/* ================================================================
   VIZSURGE WATCH.HTML — OVERHAULED PARTY OVERLAYS
   Page-local only. Does not modify shared style.css/header/footer.
   IDs and inline event handlers are intentionally preserved.
   ================================================================ */

:root{
  --wov-bg:#090b18;
  --wov-panel:rgba(13,17,37,.96);
  --wov-panel-2:rgba(17,22,48,.94);
  --wov-line:rgba(148,163,184,.16);
  --wov-line-strong:rgba(129,140,248,.34);
  --wov-text:#f5f7ff;
  --wov-muted:#9da8c2;
  --wov-dim:#66718c;
  --wov-purple:var(--theme-accent);
  --wov-indigo:var(--theme-indigo);
  --wov-cyan:var(--theme-cyan);
  --wov-pink:var(--theme-pink);
}

/* ---------- Overlay backdrop ---------- */
#room-edit-overlay,
#create-room-overlay,
#crooms-info-overlay{
  background:
    radial-gradient(700px 380px at 50% 20%,rgba(99,102,241,.12),transparent 70%),
    rgba(2,4,13,.76) !important;
  backdrop-filter:blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(150%) !important;
  padding:20px !important;
  align-items:center !important;
  justify-content:center !important;
}

/* ---------- Create/Edit shell ---------- */
#room-edit-overlay .vs-sheet,
#create-room-overlay .vs-sheet{
  position:relative !important;
  width:min(620px,100%) !important;
  max-width:620px !important;
  max-height:min(88vh,820px) !important;
  padding:18px 22px 20px !important;
  margin:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  border:1px solid rgba(129,140,248,.22) !important;
  border-radius:26px !important;
  background:
    radial-gradient(500px 240px at 100% 0%,rgba(99,102,241,.13),transparent 72%),
    radial-gradient(420px 220px at 0% 100%,rgba(34,211,238,.06),transparent 72%),
    linear-gradient(145deg,rgba(16,20,45,.98),rgba(7,10,25,.98)) !important;
  box-shadow:
    0 35px 100px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 70px rgba(79,70,229,.10) !important;
  animation:wovSheetIn .28s cubic-bezier(.22,.8,.25,1) !important;
}

@keyframes wovSheetIn{
  from{opacity:0;transform:translateY(24px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

#room-edit-overlay .vs-sheet::before,
#create-room-overlay .vs-sheet::before{
  content:"";
  position:absolute;
  top:0;left:18%;right:18%;
  height:2px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,transparent,var(--wov-cyan),var(--wov-indigo),var(--wov-pink),transparent);
  box-shadow:0 0 20px rgba(99,102,241,.45);
}

#room-edit-overlay .vs-sheet-handle,
#create-room-overlay .vs-sheet-handle{
  width:46px !important;
  height:4px !important;
  margin:2px auto 17px !important;
  background:linear-gradient(90deg,var(--wov-cyan),var(--wov-purple)) !important;
  box-shadow:0 0 12px rgba(99,102,241,.35) !important;
}

/* ---------- Modal title ---------- */
.vs-overhaul-title-wrap{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
}

.vs-overhaul-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:#fff;
  font-size:18px;
  background:linear-gradient(135deg,rgba(34,211,238,.20),rgba(99,102,241,.34),rgba(168,85,247,.28));
  border:1px solid rgba(129,140,248,.28);
  box-shadow:0 0 28px rgba(99,102,241,.16),inset 0 1px rgba(255,255,255,.10);
}

.vs-overhaul-kicker{
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  color:#8290b1;
  margin-bottom:3px;
}

#room-edit-overlay .vs-sheet h3,
#create-room-overlay .vs-sheet h3{
  color:#f8faff !important;
  font-size:21px !important;
  line-height:1.15 !important;
  letter-spacing:-.035em !important;
}

.vs-overhaul-subtitle{
  margin:4px 0 0 !important;
  color:#8995b0;
  font-size:11.5px;
  line-height:1.45;
}

/* ---------- Fields ---------- */
#room-edit-overlay .vs-field,
#create-room-overlay .vs-field{
  margin-bottom:15px !important;
}

#room-edit-overlay .vs-field label,
#create-room-overlay .vs-field label{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#aeb9d2 !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.09em !important;
  margin-bottom:7px !important;
}

#room-edit-overlay .vs-field label em,
#create-room-overlay .vs-field label em{
  font-style:normal;
  text-transform:none;
  letter-spacing:0;
  font-size:9px;
  font-weight:700;
  color:#6f7b98;
}

#room-edit-overlay .vs-field input,
#create-room-overlay .vs-field input{
  height:48px !important;
  border-radius:14px !important;
  border:1px solid rgba(129,140,248,.16) !important;
  background:rgba(3,7,20,.58) !important;
  color:#f4f7ff !important;
  box-shadow:inset 0 1px rgba(255,255,255,.035) !important;
  transition:border-color .18s,box-shadow .18s,background .18s !important;
}

#room-edit-overlay .vs-field input:focus,
#create-room-overlay .vs-field input:focus{
  border-color:rgba(129,140,248,.65) !important;
  background:rgba(8,12,31,.80) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.10),0 0 26px rgba(99,102,241,.08),inset 0 1px rgba(255,255,255,.05) !important;
}

#room-edit-overlay .vs-field input::placeholder,
#create-room-overlay .vs-field input::placeholder{
  color:#56627e !important;
}

.vs-input-shell{
  position:relative;
}

#room-edit-overlay .vs-input-shell input{
  padding-right:42px !important;
}

#room-edit-overlay .vs-input-shell button{
  border-radius:9px !important;
}

/* ---------- Visibility cards ---------- */
#room-edit-overlay .vs-radio-row,
#create-room-overlay .vs-radio-row{
  gap:9px !important;
  margin-top:0 !important;
}

#room-edit-overlay .vs-radio-opt,
#create-room-overlay .vs-radio-opt{
  position:relative;
  min-height:52px !important;
  height:52px !important;
  justify-content:flex-start !important;
  padding:0 15px !important;
  border-radius:14px !important;
  background:rgba(7,11,27,.66) !important;
  border:1px solid rgba(148,163,184,.14) !important;
  color:#8995b0 !important;
  font-size:12px !important;
  font-weight:800 !important;
  transition:.18s ease !important;
}

#room-edit-overlay .vs-radio-opt:hover,
#create-room-overlay .vs-radio-opt:hover{
  border-color:rgba(129,140,248,.30) !important;
  background:rgba(18,24,51,.76) !important;
}

#room-edit-overlay .vs-radio-opt:has(input:checked),
#create-room-overlay .vs-radio-opt:has(input:checked){
  color:#eef1ff !important;
  border-color:rgba(129,140,248,.62) !important;
  background:linear-gradient(135deg,rgba(67,56,202,.27),rgba(99,102,241,.13)) !important;
  box-shadow:0 0 25px rgba(99,102,241,.08),inset 0 1px rgba(255,255,255,.06) !important;
}

#room-edit-overlay .vs-radio-opt:has(input:checked)::after,
#create-room-overlay .vs-radio-opt:has(input:checked)::after{
  content:"✓";
  margin-left:auto;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,var(--wov-indigo),var(--wov-purple));
  box-shadow:0 0 13px rgba(99,102,241,.32);
  font-size:11px;
}

/* ---------- Choice helper ---------- */
.vs-choice-note{
  margin:-6px 0 16px 2px;
  color:#68748f;
  font-size:10px;
  line-height:1.45;
}

/* ---------- Section ---------- */
#room-edit-overlay .vs-sheet-divider,
#create-room-overlay .vs-sheet-divider{
  margin:18px 0 14px !important;
  background:linear-gradient(90deg,rgba(129,140,248,.20),rgba(148,163,184,.06),transparent) !important;
}

#room-edit-overlay .vs-sheet-section-label,
#create-room-overlay .vs-sheet-section-label{
  display:flex;
  align-items:center;
  gap:7px;
  color:#8f9ab4 !important;
  font-size:9px !important;
  letter-spacing:.14em !important;
  margin-bottom:10px !important;
}

#room-edit-overlay .vs-sheet-section-label::before,
#create-room-overlay .vs-sheet-section-label::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--wov-cyan),var(--wov-purple));
  box-shadow:0 0 10px rgba(34,211,238,.4);
}

/* ---------- Toggles ---------- */
#room-edit-overlay .vs-toggle-row,
#create-room-overlay .vs-toggle-row{
  min-height:65px !important;
  padding:12px 13px !important;
  margin-bottom:10px !important;
  border-radius:15px !important;
  background:linear-gradient(145deg,rgba(19,25,53,.72),rgba(8,12,29,.70)) !important;
  border:1px solid rgba(148,163,184,.12) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.025) !important;
}

#room-edit-overlay .vs-toggle-label,
#create-room-overlay .vs-toggle-label{
  color:#e6ebfa !important;
  font-size:12px !important;
  font-weight:800 !important;
}

#room-edit-overlay .vs-toggle-desc,
#create-room-overlay .vs-toggle-desc{
  color:#75819d !important;
  font-size:10px !important;
  line-height:1.5 !important;
}

#room-edit-overlay .vs-toggle,
#create-room-overlay .vs-toggle{
  width:46px !important;
  height:27px !important;
}

#room-edit-overlay .vs-toggle input:checked + .vs-toggle-track,
#create-room-overlay .vs-toggle input:checked + .vs-toggle-track{
  background:linear-gradient(90deg,#4f46e5,#8b5cf6) !important;
  border-color:rgba(165,180,252,.58) !important;
  box-shadow:0 0 16px rgba(99,102,241,.20) !important;
}

#room-edit-overlay .vs-toggle input:checked + .vs-toggle-track::after,
#create-room-overlay .vs-toggle input:checked + .vs-toggle-track::after{
  background:#fff !important;
}

/* ---------- Private party code ---------- */
#edit-room-code-field{
  padding:13px !important;
  border:1px solid rgba(139,92,246,.16) !important;
  border-radius:15px !important;
  background:rgba(99,102,241,.045) !important;
}

#edit-room-code-field > label{
  margin-bottom:7px !important;
}

#edit-room-code-field button{
  min-height:42px;
  border-radius:11px !important;
  border-color:rgba(129,140,248,.30) !important;
  background:rgba(99,102,241,.08) !important;
  color:#b8bfff !important;
}

/* ---------- Notices ---------- */
#create-room-overlay .vs-notice{
  position:relative;
  align-items:flex-start !important;
  padding:11px 12px !important;
  margin-bottom:8px !important;
  border-radius:13px !important;
  border-color:rgba(148,163,184,.10) !important;
  background:rgba(255,255,255,.025) !important;
  color:#78849f !important;
  font-size:10px !important;
}

#create-room-overlay .vs-notice:first-of-type{
  border-color:rgba(34,211,238,.10) !important;
}

/* ---------- Sticky actions ---------- */
#room-edit-overlay .vs-sheet-actions,
#create-room-overlay .vs-sheet-actions{
  position:sticky;
  bottom:-20px;
  z-index:5;
  margin:17px -22px -20px !important;
  padding:13px 22px calc(12px + env(safe-area-inset-bottom,0px)) !important;
  background:linear-gradient(180deg,rgba(9,12,28,0),rgba(9,12,28,.94) 28%) !important;
}

#room-edit-overlay .vs-btn-cancel,
#create-room-overlay .vs-btn-cancel{
  height:46px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(148,163,184,.15) !important;
  color:#a4aec3 !important;
}

#room-edit-overlay .vs-btn-submit,
#create-room-overlay .vs-btn-submit{
  height:46px !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,#4f46e5,#7c3aed 58%,#a855f7) !important;
  border:1px solid rgba(196,181,253,.25) !important;
  color:#fff !important;
  box-shadow:0 10px 25px rgba(79,70,229,.24),inset 0 1px rgba(255,255,255,.15) !important;
}

/* ---------- How it works modal ---------- */
#crooms-info-overlay{
  align-items:center !important;
}

#crooms-info-overlay .vs-info-modal{
  position:relative !important;
  width:min(760px,100%) !important;
  max-width:760px !important;
  max-height:min(82vh,720px) !important;
  overflow:auto !important;
  padding:27px !important;
  border-radius:26px !important;
  border:1px solid rgba(129,140,248,.23) !important;
  background:
    radial-gradient(520px 250px at 0% 0%,rgba(99,102,241,.15),transparent 72%),
    radial-gradient(480px 250px at 100% 100%,rgba(34,211,238,.07),transparent 72%),
    linear-gradient(145deg,rgba(15,19,43,.98),rgba(6,9,23,.98)) !important;
  box-shadow:0 35px 100px rgba(0,0,0,.62),0 0 60px rgba(79,70,229,.10) !important;
  animation:wovInfoIn .24s cubic-bezier(.22,.8,.25,1) !important;
}

@keyframes wovInfoIn{
  from{opacity:0;transform:translateY(10px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

#crooms-info-overlay .vs-info-modal::before{
  content:"";
  position:absolute;
  top:0;left:20%;right:20%;
  height:2px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,transparent,var(--wov-cyan),var(--wov-indigo),var(--wov-pink),transparent);
  box-shadow:0 0 20px rgba(99,102,241,.45);
}

#crooms-info-overlay .vs-info-hdr{
  align-items:flex-start !important;
  margin-bottom:17px !important;
}

#crooms-info-overlay .vs-info-hdr h3{
  color:#f8faff !important;
  font-size:23px !important;
  line-height:1.15 !important;
  letter-spacing:-.035em !important;
}

#crooms-info-overlay .vs-info-hdr .vs-info-close{
  width:38px !important;
  height:38px !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(148,163,184,.14) !important;
}

#crooms-info-overlay .vs-info-hdr .vs-info-close:hover{
  color:#fff !important;
  border-color:rgba(129,140,248,.40) !important;
  background:rgba(99,102,241,.12) !important;
}

.vs-info-lead{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 13px;
  margin-bottom:15px;
  border:1px solid rgba(34,211,238,.10);
  border-radius:13px;
  color:#8d9ab5;
  font-size:11px;
  line-height:1.5;
  background:rgba(34,211,238,.035);
}

.vs-info-lead-dot{
  width:7px;height:7px;flex:0 0 7px;
  border-radius:50%;
  background:#34d399;
  box-shadow:0 0 11px rgba(52,211,153,.65);
}

#crooms-info-overlay .vs-info-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
}

#crooms-info-overlay .vs-info-card{
  position:relative;
  overflow:hidden;
  min-height:220px;
  padding:18px !important;
  border-radius:18px !important;
  border:1px solid rgba(148,163,184,.12) !important;
  background:linear-gradient(145deg,rgba(20,27,57,.82),rgba(8,12,28,.82)) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 10px 30px rgba(0,0,0,.18) !important;
  transition:transform .18s,border-color .18s,box-shadow .18s !important;
}

#crooms-info-overlay .vs-info-card:hover{
  transform:translateY(-3px);
  border-color:rgba(129,140,248,.28) !important;
  box-shadow:0 15px 34px rgba(0,0,0,.28),0 0 28px rgba(99,102,241,.06) !important;
}

#crooms-info-overlay .vs-info-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,#22d3ee,#6366f1,#a855f7);
}

#crooms-info-overlay .vs-info-card:nth-child(2)::before{
  background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899);
}

#crooms-info-overlay .vs-info-card:nth-child(3)::before{
  background:linear-gradient(90deg,#8b5cf6,#ec4899,#f59e0b);
}

#crooms-info-overlay .vs-info-card-icon{
  width:45px;height:45px;
  display:grid;
  place-items:center;
  margin-bottom:15px !important;
  border-radius:14px;
  font-size:22px !important;
  background:rgba(99,102,241,.11);
  border:1px solid rgba(129,140,248,.14);
}

#crooms-info-overlay .vs-info-card h4{
  font-size:15px !important;
  margin-bottom:7px !important;
  color:#f1f5ff !important;
}

#crooms-info-overlay .vs-info-card p{
  font-size:11px !important;
  line-height:1.55 !important;
  color:#8e9ab5 !important;
}

#crooms-info-overlay .vs-info-card ul{
  margin-top:11px !important;
  padding-left:15px !important;
  font-size:10.5px !important;
  line-height:1.9 !important;
  color:#78849f !important;
}

.vs-info-footer{
  margin-top:14px;
  text-align:center;
  color:#606c87;
  font-size:10px;
}

/* ---------- Responsive ---------- */
@media(max-width:700px){
  #room-edit-overlay,
  #create-room-overlay,
  #crooms-info-overlay{
    padding:10px !important;
    align-items:flex-end !important;
  }

  #room-edit-overlay .vs-sheet,
  #create-room-overlay .vs-sheet{
    width:100% !important;
    max-width:none !important;
    max-height:92dvh !important;
    border-radius:24px !important;
    padding:16px 16px 18px !important;
  }

  #room-edit-overlay .vs-sheet-actions,
  #create-room-overlay .vs-sheet-actions{
    margin-left:-16px !important;
    margin-right:-16px !important;
    margin-bottom:-18px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  #crooms-info-overlay{
    align-items:center !important;
  }

  #crooms-info-overlay .vs-info-modal{
    width:100% !important;
    max-height:88dvh !important;
    padding:20px !important;
    border-radius:23px !important;
  }

  #crooms-info-overlay .vs-info-grid{
    grid-template-columns:1fr !important;
  }

  #crooms-info-overlay .vs-info-card{
    min-height:0 !important;
  }
}

@media(max-width:430px){
  .vs-overhaul-icon{
    width:40px;height:40px;flex-basis:40px;border-radius:13px;
  }

  #room-edit-overlay .vs-sheet h3,
  #create-room-overlay .vs-sheet h3{
    font-size:18px !important;
  }

  .vs-overhaul-subtitle{
    font-size:10px;
  }

  #room-edit-overlay .vs-radio-row,
  #create-room-overlay .vs-radio-row{
    flex-direction:column;
  }

  #room-edit-overlay .vs-radio-opt,
  #create-room-overlay .vs-radio-opt{
    flex:0 0 auto !important;
    width:100%;
  }

  #room-edit-overlay .vs-sheet-actions,
  #create-room-overlay .vs-sheet-actions{
    gap:7px !important;
  }

  #room-edit-overlay .vs-btn-cancel,
  #create-room-overlay .vs-btn-cancel,
  #room-edit-overlay .vs-btn-submit,
  #create-room-overlay .vs-btn-submit{
    height:44px !important;
    font-size:12px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #room-edit-overlay .vs-sheet,
  #create-room-overlay .vs-sheet,
  #crooms-info-overlay .vs-info-modal{
    animation:none !important;
  }
}


/* Search clear control: replaces the keyboard-shortcut badge with an actual
   clear action. The shortcut badge was decorative; the X is actionable. */
.watch-search-wrap{
  position:relative !important;
}
.watch-search-wrap .watch-search{
  padding-right:42px !important;
}
.watch-search-clear{
  position:absolute !important;
  right:7px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:26px !important;
  height:26px !important;
  padding:0 !important;
  place-items:center !important;
  border:1px solid rgba(148,163,184,.16) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.055) !important;
  color:#aab4cb !important;
  font-size:19px !important;
  line-height:1 !important;
  cursor:pointer !important;
  z-index:3 !important;
  transition:background .16s,border-color .16s,color .16s,transform .16s !important;
}
.watch-search-clear:hover{
  background:rgba(129,140,248,.16) !important;
  border-color:rgba(129,140,248,.35) !important;
  color:#fff !important;
}
.watch-search-clear:active{
  transform:translateY(-50%) scale(.94) !important;
}