/* Option B: Neon Lounge: dark with playful neon */
:root{
  --display-font:'Monoton',system-ui,sans-serif;
  --body-font:'Nunito',system-ui,sans-serif;
  --bg:#120a24; --ink:#f3ecff; --brand:#ff6be0; --two:#39f3ff; --accent-text:#7ef9ff;
  --accent:#ff4fd8; --accent-2:#39f3ff; --lime:#c6ff4a; --lime-rind:#7bd11f;
  --outline:#39f3ff; --glass:#1a1033; --drink:#5a2a8a; --fizz:#ff9cf0; --bubble:#39f3ff;
  --blush:#ff4fd8; --berry:#8f7bff; --sprig:#c6ff4a;
  --focus:#c6ff4a; --nav-hover:rgba(57,243,255,.15);
  --btn-bg:#ff4fd8; --btn-ink:#120a24; --btn-shadow:0 0 18px rgba(255,79,216,.7);
  --placeholder:#ffe48a; --placeholder-bg:rgba(255,228,138,.12);
  --pill-bg:rgba(57,243,255,.12); --pill-ink:#7ef9ff;
  --card:#1c1236; --card-border:2px solid #39f3ff; --card-shadow:0 0 22px rgba(57,243,255,.35);
  --divider:#4a3a78; --footer-bg:#0a0516; --footer-ink:#d9ccff;
}
body{background:radial-gradient(ellipse at 80% 0%,#3a1466 0,transparent 55%),radial-gradient(ellipse at 0% 60%,#0f3a4a 0,transparent 50%),var(--bg)}
h1{text-shadow:0 0 6px #ff4fd8,0 0 22px #ff4fd8;font-weight:400;letter-spacing:.02em}
h1 .two{text-shadow:0 0 6px #39f3ff,0 0 22px #39f3ff}
h2,h3{font-family:'Nunito',system-ui,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
h2{color:#ff6be0;text-shadow:0 0 12px rgba(255,79,216,.6)}
.brand{font-size:1.2rem}
.mascot{filter:drop-shadow(0 0 10px rgba(57,243,255,.6))}
.btn-ghost{color:#7ef9ff}
.footer-brand{color:#ff6be0}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body-font);color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem clamp(1rem,4vw,3rem);max-width:1200px;margin:0 auto}
.brand{font-family:var(--display-font);font-size:1.4rem;text-decoration:none;display:flex;align-items:center;gap:.5rem;color:var(--brand)}
.brand .tld{color:var(--accent-text);font-size:.9em}
.brand-dot{width:14px;height:14px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--outline)}
nav{display:flex;gap:.25rem;flex-wrap:wrap}
nav a{text-decoration:none;font-weight:700;padding:.4rem .8rem;border-radius:999px}
nav a:hover{background:var(--nav-hover)}
main{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem)}
.hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:2rem;padding:clamp(1.5rem,5vw,4rem) 0}
.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--accent-text);margin:0}
h1{font-family:var(--display-font);font-size:clamp(3.4rem,10vw,7rem);line-height:1;margin:.2em 0;color:var(--brand)}
h1 .two{display:inline-block;color:var(--two);transform:rotate(-8deg);margin:0 .05em}
h2,h3{font-family:var(--display-font);line-height:1.15}
h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 .5rem;color:var(--brand)}
h3{font-size:1.5rem;margin:.5rem 0}
.tagline{font-size:clamp(1.1rem,2.2vw,1.4rem);max-width:32ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.btn{display:inline-block;text-decoration:none;font-weight:800;padding:.95rem 1.6rem;border-radius:999px;font-size:1.1rem;transition:transform .15s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--btn-shadow)}
.btn-ghost{border:3px solid var(--outline);color:var(--ink)}
.btn-sm{font-size:.95rem;padding:.65rem 1.2rem;margin-top:1rem}
.hero-art{display:flex;justify-content:center}
.mascot{width:min(380px,100%);height:auto;animation:bob 4s ease-in-out infinite}
.mascot .bubbles circle{animation:rise 3s ease-in-out infinite}
.mascot .bubbles circle:nth-child(2n){animation-delay:1.2s}
@keyframes bob{50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes rise{50%{transform:translateY(-8px);opacity:.5}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
section{scroll-margin-top:1rem}
.about,.next,.signups{padding:clamp(1.5rem,4vw,3rem) 0}
.about{text-align:center}
.placeholder{font-style:italic;color:var(--placeholder);background:var(--placeholder-bg);padding:.1em .4em;border-radius:6px;display:inline-block}
.pills{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1rem}
.pills li{background:var(--pill-bg);color:var(--pill-ink);padding:.45rem 1rem;border-radius:999px;font-weight:700}
.card{background:var(--card);border:var(--card-border);border-radius:24px;padding:1.6rem;box-shadow:var(--card-shadow)}
.icon{width:56px;height:56px;flex:none}
.next-card{display:flex;gap:1.5rem;align-items:flex-start}
.details{margin:0;display:grid;gap:.6rem}
.details div{display:flex;gap:.8rem;flex-wrap:wrap;align-items:baseline}
.details dt{font-weight:800;min-width:4.5rem;color:var(--accent-text)}
.details dd{margin:0}
.signups{text-align:center}
.lede{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;text-align:left;margin-top:1.5rem}
.snacks{list-style:none;padding:0;margin:.5rem 0 0}
.snacks li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:2px dashed var(--divider)}
.slot{color:var(--placeholder);font-style:italic}
.fake-input{display:grid;gap:.5rem;margin-top:1rem}
.fake-input span{border:2px dashed var(--divider);border-radius:12px;padding:.6rem .9rem;color:var(--placeholder)}
.btn[aria-disabled="true"]{opacity:.85;cursor:default}
.footer{text-align:center;padding:2.5rem 1rem 3rem;margin-top:2rem;background:var(--footer-bg);color:var(--footer-ink)}
.footer .placeholder{color:inherit;background:rgba(255,255,255,.15)}
.footer-brand{font-family:var(--display-font);font-size:1.6rem;margin:0 0 .5rem}
.small{font-size:.9rem;max-width:60ch;margin:.5rem auto;opacity:.95}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero-art{order:-1}
  .mascot{width:min(240px,70vw)}
  .tagline{margin-inline:auto}
  .cta-row{justify-content:center}
  .grid{grid-template-columns:1fr}
  .next-card{flex-direction:column;align-items:center;text-align:center}
  .details div{justify-content:center}
  .topbar{justify-content:center}
}

/* B2: neon couple hero */
.couple{width:min(560px,100%);height:auto;display:block;animation:flicker 7s infinite}
.couple .heart{transform-origin:200px 84px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
@keyframes flicker{0%,92%,100%{opacity:1}93%{opacity:.75}95%{opacity:1}96%{opacity:.85}}
.mini-mascot{display:flex;justify-content:center;margin-bottom:.5rem}
.mascot-sm{width:120px}
@media (min-width:761px){.hero{grid-template-columns:1fr 1.1fr}}
@media (max-width:760px){.couple{width:100%;max-width:400px;margin:0 auto}}

/* ---------- Sign-ups page ---------- */
.su{max-width:1100px}
.su-hero{text-align:center;padding:1.5rem 0 1rem}
.su-title{font-size:clamp(2.8rem,8vw,5rem);margin:.1em 0}
.su-h{font-size:1.5rem;margin:0 0 .25rem}
.small-text{font-size:.95rem;opacity:.9;margin:.25rem 0 .75rem}
.su-pass{margin-bottom:1.5rem}
.su-grid{margin-top:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:grid;gap:.3rem;font-weight:700;font-size:.9rem;flex:1;min-width:0}
.field input{font:inherit;font-weight:400;font-size:1rem;width:100%;padding:.65rem .8rem;border-radius:12px;border:2px solid var(--divider);background:#120a24;color:var(--ink)}
.field input:focus{border-color:var(--outline);outline:none;box-shadow:0 0 0 3px rgba(57,243,255,.35)}
.add-row{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap;margin-top:1rem}
.add-row .btn{margin-top:0}
button.btn{font-family:inherit;cursor:pointer;border:0}
button.btn-ghost{background:transparent;border:3px solid var(--outline)}
.btn-danger{background:#ffe48a;color:#120a24}
.entries{list-style:none;padding:0;margin:.5rem 0 0}
.entries li{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.6rem 0;border-bottom:2px dashed var(--divider)}
.entries .what{font-weight:800;flex:1 1 9rem;min-width:0;overflow-wrap:anywhere}
.entries .who{color:#7ef9ff;overflow-wrap:anywhere}
.entries .open{color:var(--placeholder);font-style:italic}
.entries .mine{font-size:.75rem;font-weight:800;background:rgba(198,255,74,.15);color:#c6ff4a;border-radius:999px;padding:.1rem .5rem}
.entries .acts{display:flex;gap:.4rem;margin-left:auto}
.link-btn{font:inherit;font-size:.85rem;font-weight:700;background:none;border:2px solid var(--divider);color:var(--ink);border-radius:999px;padding:.25rem .7rem;cursor:pointer}
.link-btn:hover{border-color:var(--outline)}
.claim-btn{border-color:#ff4fd8;color:#ff9cf0}
.empty{font-style:italic;opacity:.8}
.notice{border-radius:16px;padding:1rem 1.2rem;margin:0 0 1.5rem;font-weight:700;background:rgba(255,228,138,.12);border:2px solid #ffe48a;color:#ffe48a}
.notice.ok{background:rgba(198,255,74,.1);border-color:#c6ff4a;color:#c6ff4a}
.organizer{margin:2rem 0 1rem}
.organizer summary{cursor:pointer;font-weight:800;font-size:1.1rem}
.mini-mascot .mascot-sm{width:100px}
@media (max-width:760px){.row{grid-template-columns:1fr}.add-row .btn{width:100%}.entries .acts{margin-left:0}}
.su-narrow{max-width:520px;margin:0 auto 1.5rem}
.stack{display:grid;gap:1rem;margin-top:.5rem}
.stack .btn{justify-self:start}
.hint{font-weight:400;font-size:.82rem;opacity:.85}
.whoami{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem 1.4rem;margin-bottom:1.5rem}
.voice{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.5rem}
.voice > div{flex:1 1 16rem}
.voice .btn[disabled]{opacity:.55;cursor:not-allowed}
.soon{font-size:.75rem;vertical-align:middle;background:#ffe48a;color:#120a24;border-radius:999px;padding:.15rem .6rem;letter-spacing:.05em;text-shadow:none}
.admin-sub{font-family:'Nunito',system-ui,sans-serif;font-size:1.05rem;margin:1.2rem 0 .3rem;color:#7ef9ff}
.su a{color:#7ef9ff}
@media (max-width:760px){.stack .btn{justify-self:stretch}}

/* ---------- Lounge hub: wall of neon door signs ---------- */
.door-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.4rem;margin:1rem 0 2rem}
.door{--c:#ff4fd8;position:relative;display:grid;justify-items:center;gap:.35rem;text-align:center;text-decoration:none;color:var(--ink);
  padding:1.6rem 1rem 1.3rem;border-radius:22px 22px 10px 10px;border:3px solid var(--c);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.25));
  box-shadow:0 0 14px var(--c),inset 0 0 14px color-mix(in srgb,var(--c) 35%,transparent);transition:transform .2s}
.door::before{content:"";position:absolute;top:-12px;left:50%;width:46px;height:8px;margin-left:-23px;border-radius:4px;background:var(--c);box-shadow:0 0 10px var(--c)}
.door svg{width:58px;height:58px;fill:none;stroke:var(--c);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--c))}
.door-name{font-family:'Monoton',system-ui;font-size:1.7rem;line-height:1.1;color:var(--c);text-shadow:0 0 8px var(--c),0 0 20px var(--c)}
.door-sub{font-weight:700;font-size:.95rem;opacity:.9}
.door-pink{--c:#ff4fd8}.door-cyan{--c:#39f3ff}.door-lime{--c:#c6ff4a}.door-gold{--c:#ffe48a}.door-violet{--c:#a98bff}
a.door:hover,a.door:focus-visible{transform:translateY(-4px) rotate(-1deg)}
.soon-door{opacity:.6;cursor:default}
.soon-door .soon{position:absolute;top:10px;right:10px}
.whoami-line{text-align:center;margin:0 0 1rem}
@media (prefers-reduced-motion:no-preference){
  a.door:hover .door-name,a.door:focus-visible .door-name,a.door:active .door-name{animation:sign-flicker .9s linear 1}
  a.door:hover svg,a.door:focus-visible svg,a.door:active svg{animation:sign-flicker .9s linear 1 .1s}
  .lounge .door{animation:door-on .7s ease both}
  .lounge .door:nth-child(2){animation-delay:.08s}.lounge .door:nth-child(3){animation-delay:.16s}.lounge .door:nth-child(4){animation-delay:.24s}.lounge .door:nth-child(5){animation-delay:.32s}
}
@keyframes sign-flicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.25}40%{opacity:.85}}
@keyframes door-on{0%{opacity:0;filter:brightness(.3)}30%{opacity:1;filter:brightness(1.4)}45%{filter:brightness(.4)}100%{opacity:1;filter:none}}

/* ---------- Room nav: "Back to the lounge" sign + room links ---------- */
.room-nav{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.lounge-sign{font-family:'Monoton',system-ui;font-size:1rem;text-decoration:none;color:#c6ff4a;border:2px solid #c6ff4a;border-radius:10px;padding:.35rem .7rem;text-shadow:0 0 8px #c6ff4a;box-shadow:0 0 10px rgba(198,255,74,.5),inset 0 0 8px rgba(198,255,74,.3);white-space:nowrap}
.lounge-sign:hover,.lounge-sign:focus-visible{background:rgba(198,255,74,.1)}
@media (prefers-reduced-motion:no-preference){.lounge-sign:hover,.lounge-sign:focus-visible{animation:sign-flicker .9s linear 1}}
.room-nav a[aria-current="page"]{color:#ffe48a;text-decoration:underline;text-underline-offset:4px}

/* ---------- Mascot peeking in from the corner on room pages ---------- */
.peek{position:fixed;right:-14px;bottom:-26px;width:74px;z-index:5;pointer-events:none;transform:rotate(-14deg);opacity:.92}
.peek svg{width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){.peek{animation:peek-in 1.2s ease 1s both}}
@keyframes peek-in{0%{transform:translate(60px,60px) rotate(-14deg)}70%{transform:translate(-4px,-4px) rotate(-18deg)}100%{transform:rotate(-14deg)}}
@media (max-width:760px){.peek{width:56px;bottom:-22px}.room-nav{justify-content:center}}

/* ---------- Page transitions: neon "lights dim" between pages ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:lights-out .22s ease-in both}
  ::view-transition-new(root){animation:lights-on .38s ease-out both}
  @supports not (view-transition-name:none){ body{animation:lights-on .4s ease-out both} }
}
@keyframes lights-out{to{opacity:0;filter:brightness(.2)}}
@keyframes lights-on{0%{opacity:0;filter:brightness(.2)}35%{opacity:1;filter:brightness(1.5)}50%{filter:brightness(.6)}100%{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- Doodle Wall ---------- */
.wb-hero{padding-bottom:.5rem}
.wb-tools{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center;padding:.8rem 1rem;margin-bottom:.8rem}
.tool-group{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.tool,.size{font:inherit;font-weight:800;font-size:.9rem;background:transparent;color:var(--ink);border:2px solid var(--divider);border-radius:999px;padding:.35rem .75rem;cursor:pointer;min-height:40px}
.size{width:40px;padding:0;display:grid;place-items:center}
.tool[aria-pressed="true"],.size[aria-pressed="true"]{border-color:#c6ff4a;color:#c6ff4a;box-shadow:0 0 8px rgba(198,255,74,.5)}
.swatch{width:32px;height:32px;border-radius:50%;border:3px solid #120a24;outline:2px solid var(--divider);cursor:pointer}
.swatch[aria-pressed="true"]{outline:3px solid #fff;box-shadow:0 0 10px currentColor}
.sw-pink{background:#ff4fd8;color:#ff4fd8}.sw-cyan{background:#39f3ff;color:#39f3ff}.sw-lime{background:#c6ff4a;color:#c6ff4a}.sw-gold{background:#ffe48a;color:#ffe48a}.sw-violet{background:#a98bff;color:#a98bff}.sw-white{background:#fff;color:#fff}
.dot{display:block;border-radius:50%;background:currentColor}
.d3{width:4px;height:4px}.d6{width:8px;height:8px}.d12{width:14px;height:14px}.d24{width:22px;height:22px}
.link-btn.danger{border-color:#ffe48a;color:#ffe48a}
.wb-stage{border:3px solid #39f3ff;border-radius:18px;box-shadow:0 0 18px rgba(57,243,255,.4);overflow:hidden;background:#0d0719;
  background-image:radial-gradient(rgba(169,139,255,.18) 1px,transparent 1px);background-size:24px 24px}
#board{display:block;width:100%;height:auto;aspect-ratio:4/3;touch-action:none;cursor:crosshair}
.wb-who{min-height:1.5em;font-weight:700;color:#7ef9ff;text-align:center}
@media (max-width:760px){.wb-tools{gap:.5rem}.tool{padding:.3rem .6rem}}

/* ---------- Jukebox ---------- */
.jb-fab{position:fixed;left:14px;bottom:14px;z-index:30;display:flex;align-items:center;gap:.45rem;font:inherit;font-weight:800;font-size:.9rem;color:#ffe48a;background:#120a24;border:2px solid #ffe48a;border-radius:999px;padding:.55rem .9rem;cursor:pointer;box-shadow:0 0 12px rgba(255,228,138,.55),inset 0 0 8px rgba(255,228,138,.25)}
.jb-fab svg{width:20px;height:20px;fill:none;stroke:#ffe48a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jb-fab.on{color:#c6ff4a;border-color:#c6ff4a;box-shadow:0 0 14px rgba(198,255,74,.6)}
.jb-fab.on svg{stroke:#c6ff4a}
@media (prefers-reduced-motion:no-preference){.jb-fab.on svg{animation:jb-bop .9s ease-in-out infinite}.jb-fab.resume{animation:jb-glow 1.6s ease-in-out infinite}}
@keyframes jb-bop{50%{transform:translateY(-2px) rotate(-8deg)}}
@keyframes jb-glow{50%{box-shadow:0 0 22px rgba(255,228,138,.95)}}
.jb-panel{position:fixed;left:12px;bottom:70px;z-index:31;width:min(340px,calc(100vw - 24px));max-height:calc(100vh - 90px);overflow:auto;background:#1c1236;border:2px solid #ffe48a;border-radius:18px;padding:.9rem;box-shadow:0 0 24px rgba(255,228,138,.4);color:var(--ink)}
.jb-panel[hidden]{display:none}
.jb-head{display:flex;justify-content:space-between;align-items:center}
.jb-title{font-family:'Monoton',system-ui;font-weight:400;font-size:1.4rem;color:#ffe48a;text-shadow:0 0 8px rgba(255,228,138,.7)}
.jb-x{font-size:1.6rem;line-height:1;background:none;border:0;color:var(--ink);cursor:pointer;padding:.2rem .5rem}
.jb-tabs{display:flex;gap:.4rem;margin:.5rem 0}
.jb-tabs button,.jb-ctrls button,.jb-queue button{font:inherit;font-weight:700;color:var(--ink);background:transparent;border:2px solid var(--divider);border-radius:999px;cursor:pointer}
.jb-tabs button{flex:1;padding:.35rem .5rem;font-size:.85rem}
.jb-tabs button[aria-pressed="true"]{border-color:#ff4fd8;color:#ff9cf0;box-shadow:0 0 8px rgba(255,79,216,.5)}
.jb-video{border-radius:12px;overflow:hidden;min-height:200px;background:#000;margin:.4rem 0}
.jb-video iframe{display:block;width:100%;height:200px;border:0}
.jb-now{font-weight:800;margin:.4rem 0;color:#7ef9ff;font-size:.95rem}
.jb-ctrls{display:flex;align-items:center;gap:.4rem}
.jb-ctrls button{width:42px;height:42px;display:grid;place-items:center;font-size:1rem}
.jb-ctrls .jb-play{border-color:#c6ff4a;color:#c6ff4a}
.jb-vol{flex:1;min-width:0;accent-color:#ffe48a}
.jb-queue{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:.25rem;max-height:150px;overflow:auto}
.jb-queue button{width:100%;text-align:left;border-radius:10px;padding:.3rem .6rem;font-size:.85rem;border-color:transparent}
.jb-queue button[aria-current="true"]{border-color:#ffe48a;color:#ffe48a}
.jb-note{font-size:.75rem;opacity:.8;margin:.6rem 0 0}