/* ══════════════════════════════════════════════════════════
   MP.GAMES — deep-indigo neon arcade theme
   ══════════════════════════════════════════════════════════ */
:root{
  --bg:#080b1c;
  --bg-2:#0d1230;
  --panel:rgba(20,26,58,.72);
  --panel-solid:#141a3a;
  --line:rgba(140,160,255,.16);
  --line-hot:rgba(168,85,247,.45);
  --ink:#eef1ff;
  --ink-dim:#9aa4d4;
  --ink-faint:#616a9c;
  --brand:#a855f7;
  --brand-2:#22d3ee;
  --p1:#22d3ee;
  --p2:#fb4570;
  --p3:#a3e635;
  --p4:#fb923c;
  --ok:#34d399;
  --warn:#fbbf24;
  --r-sm:10px; --r:16px; --r-lg:26px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.8);
  --font:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

*{box-sizing:border-box}
/* several blocks below set an explicit display, which would otherwise
   beat the hidden attribute — keep [hidden] authoritative */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;color:inherit}

/* ── ambient background ── */
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(120,140,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,140,255,.055) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 30%,transparent 78%);
}
.bg-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 460px at 12% -6%,rgba(168,85,247,.30),transparent 65%),
    radial-gradient(700px 440px at 92% 8%,rgba(34,211,238,.22),transparent 62%),
    radial-gradient(900px 620px at 50% 108%,rgba(251,69,112,.16),transparent 66%);
}

/* ── view routing ── */
.view{display:none;position:relative;z-index:1}
.view.active{display:block}
#view-controller.active,#view-screen.active{display:flex;flex-direction:column;min-height:100dvh}

/* ── wordmark ── */
.wordmark{font-weight:700;letter-spacing:-.03em;font-size:clamp(2.4rem,7vw,4.2rem);line-height:1}
.wordmark .wm-a{color:var(--ink)}
.wordmark .wm-b{background:linear-gradient(96deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark .wm-dot{color:var(--p2)}
.wordmark.small{font-size:1.25rem}

/* ══════════════ LANDING ══════════════ */
#view-landing{max-width:1120px;margin:0 auto;padding:clamp(2rem,6vw,5rem) clamp(1.1rem,4vw,2rem) 4rem}
.landing-head{text-align:center;margin-bottom:clamp(2.2rem,6vw,3.6rem)}
.tagline{margin:1.1rem auto 0;max-width:44ch;color:var(--ink-dim);font-size:clamp(1rem,2.2vw,1.2rem);line-height:1.6}

.choice-grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.choice{
  position:relative;text-align:left;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(30,38,80,.9),rgba(14,18,45,.82));
  padding:1.6rem 1.6rem 1.4rem;cursor:pointer;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s;
}
.choice:hover{transform:translateY(-6px);border-color:var(--line-hot);box-shadow:0 26px 50px -24px rgba(168,85,247,.7)}
.choice h2{margin:1.1rem 0 .45rem;font-size:1.5rem;letter-spacing:-.02em}
.choice p{margin:0;color:var(--ink-dim);line-height:1.55;font-size:.97rem}
.choice-cta{display:inline-block;margin-top:1.1rem;font-weight:700;font-size:.9rem;letter-spacing:.02em;color:var(--brand-2)}
.choice-pad .choice-cta{color:var(--p2)}
.choice-art{height:104px;display:grid;place-items:center}
.art-tv{position:relative;width:150px;height:92px;border:2px solid var(--brand-2);border-radius:10px;background:rgba(34,211,238,.07);box-shadow:0 0 26px rgba(34,211,238,.28) inset}
.art-ball{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 14px #fff;top:40px;left:69px;animation:bounceX 2.2s ease-in-out infinite alternate}
.art-pad{position:absolute;width:6px;height:30px;border-radius:3px;top:31px}
.art-pad.l{left:8px;background:var(--p1);box-shadow:0 0 12px var(--p1)}
.art-pad.r{right:8px;background:var(--p2);box-shadow:0 0 12px var(--p2)}
@keyframes bounceX{from{transform:translateX(-52px) translateY(-16px)}to{transform:translateX(52px) translateY(18px)}}
.art-phone{position:relative;width:62px;height:104px;border:2px solid var(--p2);border-radius:12px;background:rgba(251,69,112,.07);box-shadow:0 0 26px rgba(251,69,112,.25) inset}
.art-stick{position:absolute;left:12px;bottom:16px;width:20px;height:20px;border-radius:50%;background:var(--p2);opacity:.85;animation:nudge 1.6s ease-in-out infinite alternate}
.art-btn{position:absolute;right:12px;bottom:18px;width:15px;height:15px;border-radius:50%;background:var(--brand-2)}
@keyframes nudge{from{transform:translateX(-4px)}to{transform:translateX(6px)}}

.feature-strip{list-style:none;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding:0;margin:2.6rem 0 0}
.feature-strip li{border-left:2px solid var(--line-hot);padding:.15rem 0 .15rem 1rem}
.feature-strip b{display:block;font-size:.95rem;margin-bottom:.3rem}
.feature-strip span{color:var(--ink-faint);font-size:.9rem;line-height:1.5}

.game-preview{margin-top:3.4rem}
.game-preview h3{font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1rem}
.preview-cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.pv-card{border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;background:var(--panel);transition:border-color .25s,transform .25s}
.pv-card:hover{border-color:var(--line-hot);transform:translateY(-3px)}
.pv-ico{font-size:1.6rem;line-height:1}
.pv-card h4{margin:.6rem 0 .3rem;font-size:1.05rem}
.pv-card p{margin:0;color:var(--ink-faint);font-size:.87rem;line-height:1.5}
.pv-meta{display:block;margin-top:.7rem;font-family:var(--mono);font-size:.72rem;color:var(--brand-2)}
.landing-foot{margin-top:3.2rem;color:var(--ink-faint);font-size:.82rem;text-align:center}

/* ══════════════ SHARED CONTROLS ══════════════ */
.prime-btn{
  border:0;border-radius:999px;padding:.85rem 1.7rem;font-weight:700;font-size:1rem;cursor:pointer;
  background:linear-gradient(96deg,var(--brand),var(--brand-2));color:#0a0c1e;
  box-shadow:0 14px 30px -12px rgba(168,85,247,.9);transition:transform .18s,filter .18s;
}
.prime-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.prime-btn:active{transform:translateY(0) scale(.985)}
.prime-btn.full{width:100%;padding:1.05rem}
.ghost-btn{
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink-dim);
  border-radius:999px;padding:.5rem .9rem;cursor:pointer;font-size:.9rem;transition:.2s;
}
.ghost-btn:hover{border-color:var(--line-hot);color:var(--ink)}
.ghost-btn.wide{padding:.65rem 1.2rem}
.link-btn{background:none;border:0;color:var(--ink-faint);cursor:pointer;font-size:.9rem;padding:.6rem}
.link-btn:hover{color:var(--ink)}

/* ══════════════ SCREEN ══════════════ */
#view-screen{height:100dvh;overflow:hidden}
.screen-shell{display:flex;flex-direction:column;height:100dvh}
.screen-bar{
  display:flex;align-items:center;gap:1rem;padding:.7rem clamp(.8rem,2.4vw,1.5rem);
  border-bottom:1px solid var(--line);background:rgba(8,11,28,.7);backdrop-filter:blur(12px);flex:0 0 auto;
}
.sb-left,.sb-right{display:flex;align-items:center;gap:.6rem}
.sb-players{display:flex;gap:.5rem;flex:1;justify-content:center;flex-wrap:wrap}
.net-pill{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.72rem;color:var(--ink-faint);border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem}
.net-pill i{width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 8px currentColor}
.net-pill.live i{background:var(--ok)}
.net-pill.dead i{background:var(--p2)}
.chip{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line);border-radius:999px;padding:.28rem .75rem;font-size:.85rem;font-weight:500}
.chip i{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.chip.gone{opacity:.4}

.screen-body{flex:1;min-height:0;overflow:auto}

/* lobby */
#lobby{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:clamp(1rem,2.5vw,2rem);padding:clamp(1rem,2.6vw,2rem)}
.lobby-join{display:flex;flex-direction:column;gap:1rem;min-width:0}
.join-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:1.4rem;text-align:center;backdrop-filter:blur(10px)}
.join-kicker{margin:0;color:var(--ink-faint);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}
.join-url{margin:.35rem 0 1rem;font-family:var(--mono);font-size:clamp(.95rem,1.6vw,1.15rem);color:var(--brand-2);word-break:break-all}
.room-code{
  font-family:var(--mono);font-weight:700;font-size:clamp(2.6rem,6vw,3.8rem);letter-spacing:.16em;
  margin:.3rem 0 1.1rem;background:linear-gradient(96deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.qr-box{display:grid;place-items:center;background:#fff;border-radius:var(--r);padding:.7rem;width:fit-content;margin:0 auto}
.qr-box img,.qr-box canvas{display:block;width:clamp(120px,15vw,168px);height:auto;image-rendering:pixelated}
.join-hint{margin:.75rem 0 0;color:var(--ink-faint);font-size:.8rem}

.seat-list{display:grid;gap:.55rem}
.seat{display:flex;align-items:center;gap:.7rem;border:1px dashed var(--line);border-radius:var(--r);padding:.7rem .9rem;color:var(--ink-faint);font-size:.92rem}
.seat.filled{border-style:solid;color:var(--ink);background:rgba(255,255,255,.03)}
.seat .dot{width:11px;height:11px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor;flex:0 0 auto}
.seat .seat-tag{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--ink-faint)}

.lobby-games{display:flex;flex-direction:column;gap:1rem;min-width:0}
.lg-head h2{margin:0;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em}
.lg-head p{margin:.3rem 0 0;color:var(--ink-faint);font-size:.9rem}
.game-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.game-card{
  position:relative;text-align:left;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(30,38,80,.85),rgba(13,17,42,.85));
  padding:1.2rem;cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s;overflow:hidden;
}
.game-card:hover,.game-card.sel{transform:translateY(-5px);border-color:var(--line-hot);box-shadow:0 22px 46px -24px rgba(168,85,247,.8)}
.game-card.sel::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--brand);pointer-events:none;animation:pulseBorder 1.4s ease-in-out infinite}
@keyframes pulseBorder{50%{opacity:.35}}
.gc-ico{font-size:2rem;line-height:1}
.game-card h3{margin:.65rem 0 .35rem;font-size:1.18rem}
.game-card p{margin:0;color:var(--ink-dim);font-size:.88rem;line-height:1.5}
.gc-meta{display:flex;gap:.5rem;margin-top:.85rem;flex-wrap:wrap}
.gc-meta span{font-family:var(--mono);font-size:.68rem;border:1px solid var(--line);border-radius:999px;padding:.16rem .55rem;color:var(--ink-faint)}
.game-card.locked{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

.lobby-tools{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;padding-top:.2rem}
.seg-group{display:flex;align-items:center;gap:.6rem}
.seg-label{font-size:.88rem;color:var(--ink-dim)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:rgba(255,255,255,.03)}
.seg button{border:0;background:none;border-radius:999px;padding:.4rem .8rem;font-size:.82rem;color:var(--ink-faint);cursor:pointer;transition:.18s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:linear-gradient(96deg,var(--brand),var(--brand-2));color:#0a0c1e;font-weight:700}
.switch{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.88rem;color:var(--ink-dim)}
.switch input{display:none}
.switch .track{width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);position:relative;transition:.22s}
.switch .track i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ink-faint);transition:.22s}
.switch input:checked + .track{background:rgba(168,85,247,.35);border-color:var(--brand)}
.switch input:checked + .track i{left:20px;background:var(--brand-2)}

/* stage */
.stage-wrap{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
#stage{display:block;width:100%;height:100%}
.stage-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,8,22,.86);backdrop-filter:blur(8px);z-index:5}
.ov-inner{text-align:center;padding:2rem;animation:popIn .35s cubic-bezier(.2,.9,.3,1.4)}
@keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.ov-kicker{margin:0;letter-spacing:.24em;text-transform:uppercase;font-size:.78rem;color:var(--ink-faint)}
.ov-title{margin:.5rem 0;font-size:clamp(2.2rem,7vw,4.4rem);letter-spacing:-.03em}
.ov-sub{margin:0 0 1.6rem;color:var(--ink-dim)}
.ov-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.toast-rail{position:absolute;bottom:1rem;left:1rem;display:grid;gap:.5rem;z-index:4;pointer-events:none;justify-items:start}
.toast{
  font-family:var(--mono);font-size:.85rem;padding:.45rem 1rem;border-radius:999px;
  background:rgba(10,14,34,.9);border:1px solid var(--line-hot);animation:toastIn .3s ease, fadeOut .4s ease 2.1s forwards;
}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}}
@keyframes fadeOut{to{opacity:0;transform:translateY(8px)}}

/* ══════════════ CONTROLLER ══════════════ */
#view-controller{height:100dvh;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.pad-stage{flex:1;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 1rem) 1.1rem calc(env(safe-area-inset-bottom) + 1rem);gap:.85rem;min-height:0}
#pad-join{align-items:center;justify-content:center;text-align:center}
.pad-h{margin:.4rem 0 .6rem;font-size:1.6rem}
.field{display:block;width:min(340px,100%);text-align:left;margin-bottom:.2rem}
.field span{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.35rem}
.code-input,.name-input{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink);padding:.9rem 1rem;font-size:1.1rem;font-family:var(--font);outline:none;transition:border-color .2s;
}
.code-input{font-family:var(--mono);font-size:2rem;letter-spacing:.34em;text-align:center;text-transform:uppercase;font-weight:700}
.code-input:focus,.name-input:focus{border-color:var(--brand)}
#btn-connect{width:min(340px,100%);margin-top:.5rem}
.pad-err{min-height:1.2rem;color:var(--p2);font-size:.86rem;margin:.3rem 0 0}

.pad-top{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.pad-you{font-family:var(--mono);font-weight:700;font-size:.9rem;border:1px solid currentColor;border-radius:999px;padding:.22rem .7rem}
.pad-title{flex:1;text-align:center;font-size:.95rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.12em}
.pad-hint{margin:0;text-align:center;color:var(--ink-faint);font-size:.9rem;flex:0 0 auto;min-height:1.2rem}
.power-chip{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:.6rem;
  border:1px solid var(--brand);border-radius:999px;padding:.45rem 1rem;background:rgba(168,85,247,.16);
  animation:glowPulse 1.5s ease-in-out infinite;
}
.power-chip b{font-family:var(--mono);letter-spacing:.1em}
.power-chip span{font-size:.75rem;color:var(--ink-dim)}
@keyframes glowPulse{50%{box-shadow:0 0 24px rgba(168,85,247,.6)}}

.pad-layout{flex:1;display:flex;flex-direction:column;gap:1rem;min-height:0}
.slider{
  flex:1;position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(34,211,238,.09),rgba(168,85,247,.09));overflow:hidden;touch-action:none;
}
.slider-knob{
  position:absolute;border-radius:var(--r);background:var(--knob,var(--p1));
  box-shadow:0 0 30px var(--knob,var(--p1));transition:none;
}
.slider.v .slider-knob{left:12%;width:76%;height:74px;top:0}
.slider.h .slider-knob{top:12%;height:76%;width:74px;left:0}
.slider-tip{position:absolute;inset:auto 0 12px;text-align:center;color:var(--ink-faint);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;pointer-events:none}
.action-btn{
  flex:0 0 auto;height:88px;border-radius:var(--r-lg);border:1px solid var(--line-hot);
  background:linear-gradient(160deg,rgba(168,85,247,.3),rgba(168,85,247,.1));color:var(--ink);
  font-weight:700;letter-spacing:.18em;font-size:1.05rem;cursor:pointer;touch-action:none;transition:transform .09s,filter .09s;
}
.action-btn:active,.action-btn.hot{transform:scale(.97);filter:brightness(1.4)}
.action-btn.small{height:72px}
.action-btn[disabled]{opacity:.35}

.dpad{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:.55rem;place-items:stretch}
.dp{
  border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.045);
  font-size:1.5rem;color:var(--ink-dim);cursor:pointer;touch-action:none;transition:transform .08s,background .12s;
}
.dp:active,.dp.hot{background:rgba(168,85,247,.35);color:var(--ink);transform:scale(.96)}
.dp.up{grid-area:1/2} .dp.left{grid-area:2/1} .dp.right{grid-area:2/3} .dp.down{grid-area:3/2}

.buzzer{
  flex:1;border-radius:50%;aspect-ratio:1;margin:auto;width:min(78vw,340px);height:auto;
  border:3px solid var(--p2);background:radial-gradient(circle at 35% 30%,rgba(251,69,112,.55),rgba(251,69,112,.16));
  color:var(--ink);font-size:2.2rem;font-weight:700;letter-spacing:.16em;cursor:pointer;touch-action:none;
  box-shadow:0 0 46px rgba(251,69,112,.4);transition:transform .07s,filter .07s;
}
.buzzer:active,.buzzer.hot{transform:scale(.94);filter:brightness(1.35)}

#lay-menu{justify-content:center}
.menu-pad{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:.6rem;align-items:stretch;height:min(34vh,230px)}
.dp.ok{font-size:1rem;font-weight:700;letter-spacing:.16em;border-color:var(--brand)}
.menu-sel{text-align:center;font-family:var(--mono);color:var(--brand-2);font-size:1.05rem;margin:0}

@media (max-width:860px){
  #lobby{grid-template-columns:1fr}
  .sb-players{order:3;flex-basis:100%;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}