/* Lobby, room, results and score screens around the original game's cabinet.
   Builds on game.css (palette, buttons, overlays); four player colors added. */
:root{ --p3:#7dff7a; --p4:#ff8f3e; --line:#2a1f5c; }
body.scroll{overflow:auto}
body.scroll #app{height:auto;min-height:100%}
.view{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.page{max-width:720px;padding-block:20px 40px;text-align:center}
.small{font-size:12px} .mute{color:var(--mute)}
.err{color:#ff8a8a;margin:0;font-size:14px}
.page .logo{margin-top:6px}
.field{display:flex;flex-direction:column;gap:4px;align-items:flex-start;font-size:12px;color:var(--mute);width:min(320px,100%)}
input{font:inherit;font-size:16px;background:#0b0822;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:9px 11px;width:100%;box-sizing:border-box}
input:focus-visible{outline:3px solid var(--p1);outline-offset:1px}
.joinform{display:flex;gap:6px;align-items:center}
.joinform input{width:6.5em;text-transform:uppercase;letter-spacing:.18em;font-family:var(--display);font-size:15px;text-align:center}
.stack{display:flex;flex-direction:column;gap:10px;align-items:center;width:min(320px,100%)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px;width:100%;box-sizing:border-box;text-align:left}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
table{width:100%;border-collapse:collapse}
td,th{padding:7px 6px;border-top:1px solid var(--line);text-align:left;font-size:13px}
th{font-weight:600;color:var(--mute);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-top:0}
.rooms td.n{white-space:nowrap;color:var(--mute)}
.rooms td.go{text-align:right}
.rooms button{font-size:12px;padding:5px 10px}
.dots{white-space:nowrap}
.dots i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:3px;background:#2a1f5c;vertical-align:middle}
.c0{color:var(--p1)} .c1{color:var(--p2)} .c2{color:var(--p3)} .c3{color:var(--p4)}
.bg0{background:var(--p1)!important} .bg1{background:var(--p2)!important} .bg2{background:var(--p3)!important} .bg3{background:var(--p4)!important}
.tag{font-size:11px;padding:2px 6px;border-radius:3px;background:#241a4d;color:var(--mute);white-space:nowrap}

/* room */
.roomhead{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;flex-wrap:wrap;text-align:left}
.code{font-family:var(--display);font-size:34px;letter-spacing:.18em}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.slot{border-radius:6px;padding:10px;border:2px solid;min-height:84px;display:flex;flex-direction:column;gap:4px;background:var(--panel);text-align:left;box-sizing:border-box;min-width:0}
.slot b{font-family:var(--display);font-weight:400;font-size:12px}
.slot .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot.s0{border-color:var(--p1)} .slot.s1{border-color:var(--p2)} .slot.s2{border-color:var(--p3)} .slot.s3{border-color:var(--p4)}
.slot.empty{border-style:dashed;border-color:#3a2d70;color:var(--mute);justify-content:center;align-items:center}
.slot.off{opacity:.55}
.slot .kick{align-self:flex-start;font-size:11px;padding:3px 8px;margin-top:auto}
.toggle[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--pink);color:var(--pink)}

/* game */
#vGame{height:100%;gap:8px;padding-block:10px;box-sizing:border-box}
#vGame .hud{display:flex;gap:8px;align-items:stretch;grid-template-columns:none}
#vGame .hud .pcard{flex:1 1 0}
#vGame .hud .center{flex:0 0 auto}
.pcard.p3 .tag,.pcard.p3 .cd{color:var(--p3)} .pcard.p4 .tag,.pcard.p4 .cd{color:var(--p4)}
.pcard .who{font-size:11px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard.me{box-shadow:inset 0 0 0 1px currentColor}
.pcard .tag{background:none;padding:0;border-radius:0;font-size:13px}
.banner{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:rgba(17,12,44,.92);border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-size:13px;white-space:nowrap}
.keyhint{margin:0}

/* results */
.res .who{font-size:12px;color:var(--mute)}
.placed{display:flex;flex-direction:column;gap:6px;align-items:center}
.placed p{margin:0;font-family:var(--display);color:var(--p2);font-size:18px}

/* scores */
.tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tab{font-family:var(--body);font-weight:700;font-size:13px;padding:7px 12px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.tab[aria-selected="true"]{background:var(--pink);color:#1a0420;box-shadow:0 3px 0 #8a0f4a}
.board{background:var(--panel);border-radius:6px}
.board td.r{font-family:var(--display);width:2.5em}
.board td.s{font-variant-numeric:tabular-nums;font-weight:700}
.board tr.mine td{background:rgba(255,61,154,.14)}
.board .names span{margin-right:6px}

.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--wall-hi);border-radius:6px;padding:8px 14px;font-size:14px;z-index:20;max-width:calc(100% - 32px)}
.modal{position:fixed;inset:0;background:rgba(7,5,26,.9);display:flex;align-items:center;justify-content:center;z-index:30;padding:16px}
.modal-inner{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px;max-width:420px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.small-big{font-size:28px}
.tap{font-size:22px;width:140px;height:140px;border-radius:50%}
.tap.beat{filter:brightness(1.4)}

@media (max-width:560px){
  .slots{grid-template-columns:repeat(2,1fr)}
  .code{font-size:28px}
  #vGame .hud{flex-wrap:wrap}
  #vGame .hud .pcard{flex:1 1 40%}
  #vGame .hud .center{order:-1;flex:1 1 100%;flex-direction:row;justify-content:space-between}
}
@media (pointer:coarse){ .keyhint{display:none} }
.res .rtag{font-family:var(--display);font-size:13px}

/* ---- phones held sideways (html.phone, set when the device is touch-first) ----
   The maze is as tall as the visible area; the HUD lives in the strips either
   side of it. GameView.fitPhone() sets the --maze* and --rail* sizes. Layers,
   bottom to top: the touch layer, the maze (taps pass through it except on its
   overlays), the side strips (taps pass through). */
.rail{display:none}
#safeProbe{position:fixed;top:0;left:0;visibility:hidden;pointer-events:none;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
html.phone.in-game,html.phone.in-game body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html.phone.in-game body{margin:0}
html.phone #vGame{position:fixed;inset:0;padding:0;gap:0}
html.phone #vGame .hud,html.phone #vGame .keyhint{display:none}
html.phone #vGame .touch{position:fixed;inset:0;z-index:1}
html.phone #vGame .stage{position:fixed;left:var(--mazeX);top:var(--mazeY);width:var(--mazeW);height:var(--mazeH);max-width:none;aspect-ratio:auto;z-index:2;pointer-events:none}
html.phone #vGame .stage .overlay{pointer-events:auto}
html.phone #vGame .rail{display:flex;flex-direction:column;gap:6px;position:fixed;z-index:3;pointer-events:none;
  top:calc(env(safe-area-inset-top,0px) + 8px);padding:0 6px;box-sizing:border-box}
html.phone #railL{left:var(--railLX);width:var(--railLW)}
html.phone #railR{left:var(--railRX);width:var(--railRW)}
html.phone .rail .pcard{width:100%;box-sizing:border-box;padding:4px 7px;gap:1px;flex:none}
html.phone .rail .pcard.p2{text-align:left;align-items:stretch}
html.phone .rail .pcard .tag{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.phone .rail .pcard .score{font-size:15px}
html.phone .rail .pcard .meta{font-size:10px;gap:4px}
html.phone .rail .pcard.p2 .meta{justify-content:flex-start}
html.phone .rail .center{padding:0;gap:3px}
html.phone .rail .center .set{font-size:10px}
html.phone .rail .center .left{font-size:10px}
html.phone .rail .pips{gap:4px} html.phone .rail .pips b{width:9px;height:9px}
html.phone .rail.compact .who,html.phone .rail.compact .groove{display:none}
html.phone #vGame .banner{font-size:11px;white-space:normal;max-width:90%;text-align:center}

/* touch controls: the layer itself, two faint hints in the side strips, and the
   stick that appears under a steering thumb */
.touch{touch-action:none;user-select:none;-webkit-user-select:none}
.thint{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.thint.tdrop{left:var(--railLX);width:var(--railLW)}
.thint.tsteer{left:var(--railRX);width:var(--railRW)}
.thint .ring{width:min(88px,calc(var(--railLW) - 12px));aspect-ratio:1;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.thint .lbl{font-size:10px;letter-spacing:.06em;color:var(--mute);opacity:.55;transition:opacity .4s}
.tdrop .ring{border:2px solid rgba(255,61,154,.5);box-shadow:0 0 16px rgba(255,61,154,.25);transition:box-shadow .06s,background .06s}
.tdrop .ring b{font-family:var(--display);font-weight:400;font-size:11px;color:#ffd0e8}
.tdrop.beat .ring{box-shadow:0 0 26px rgba(255,61,154,.6)}
.tdrop.hit .ring{border-color:var(--pink);background:rgba(255,61,154,.18);box-shadow:0 0 30px rgba(255,61,154,.7)}
.tsteer .ring{width:min(88px,calc(var(--railRW) - 12px));border:2px dashed rgba(243,233,255,.3);opacity:.55;transition:opacity .2s}
.tsteer.busy .ring,.tsteer.busy .lbl{opacity:0}
.seasoned .thint .lbl,.seasoned .tsteer .ring{opacity:.25}
.stick{position:fixed;z-index:4;width:88px;height:88px;border-radius:50%;border:2px solid rgba(243,233,255,.35);box-sizing:border-box;pointer-events:none;display:flex;align-items:center;justify-content:center}
.stick i{width:36px;height:36px;border-radius:50%;background:rgba(243,233,255,.28)}

/* the turn-sideways screen: phones held upright during play */
.rotate{display:none}
@media (orientation:portrait){
  html.phone #vGame .rotate{display:flex;position:fixed;inset:0;z-index:40;background:var(--void);flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;box-sizing:border-box;text-align:center}
}
.rot-phone{width:44px;height:76px;border:3px solid var(--wall-hi);border-radius:9px;box-shadow:0 0 18px rgba(176,76,255,.5);animation:rot-turn 2.2s ease-in-out infinite}
@keyframes rot-turn{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){ .rot-phone{animation:none;transform:rotate(-90deg)} }