/* iminparty — shared styles (TV + phone frames, tiles, buttons, overlays, old-TV fallbacks) */
:root{--bg:#0f1a2e;--bg2:#172640;--ink:#f5f7fa;--muted:#9fb0c8;--ok:#3ddc84;--bad:#ff5e6c;--line:#2b3d5c;--focus:#ffd166}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
[dir=rtl]{direction:rtl}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input{font:inherit}
.btn{background:var(--ink);color:var(--bg);border-radius:14px;padding:.65em 1.3em;font-weight:700;font-size:1.05rem;line-height:1.2}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn.small{font-size:.9rem;padding:.45em .9em;border-radius:10px}
.btn:disabled{opacity:.35;cursor:default}
.btn:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.muted{color:var(--muted)}
.hidden{display:none!important}

/* ---------- PHONE frame ---------- */
.phone{height:100vh;height:100dvh;display:grid;grid-template-rows:auto 1fr;padding:max(8px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));gap:8px}
.phone.withbar{grid-template-rows:auto auto 1fr}
.phone .top{display:flex;flex-direction:column;gap:6px;padding:4px 2px}
.msg{font-size:1.25rem;font-weight:700;text-align:center;min-height:1.5em;line-height:1.25}
.sub{font-size:1rem;text-align:center;color:var(--muted)}
.bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--ink);width:100%;transform-origin:left;will-change:transform}
[dir=rtl] .bar>i{transform-origin:right}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:12px}
.center h1{font-size:2rem;margin:0}
.center input{width:100%;max-width:340px;font-size:1.25rem;padding:.6em .8em;border-radius:12px;border:2px solid var(--line);background:var(--bg2);color:var(--ink);text-align:center}
.avgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:340px}
.avgrid button{font-size:2.2rem;background:var(--bg2);border-radius:14px;padding:.25em 0;border:3px solid transparent}
.avgrid button.sel{border-color:var(--ink)}
.result{font-size:1.4rem;font-weight:800;text-align:center}
.result.ok{color:var(--ok)}.result.bad{color:var(--bad)}
.big{font-size:3rem;font-weight:900}
.lives{display:inline-flex;gap:.25em;align-items:center}
.life{width:.5em;height:.5em;border-radius:50%;background:var(--ok)}
.life.lost{background:var(--line)}
.hostbar{display:flex;gap:8px;overflow-x:auto;padding:4px 2px;align-items:center}
.hostbar .btn{white-space:nowrap}
.toggle{display:inline-flex;align-items:center;gap:.4em;font-size:.95rem;color:var(--muted)}
.namelist{width:100%;max-width:340px;display:flex;flex-direction:column;gap:6px}
.namelist div{display:flex;justify-content:space-between;align-items:center;background:var(--bg2);border-radius:10px;padding:.4em .7em}
.row{display:flex;gap:8px;width:100%;max-width:340px}
.row input{flex:1}
.overlay{position:fixed;top:0;left:0;right:0;bottom:0;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;text-align:center;z-index:5}
.roundflash{animation:rflash .7s ease-out}@keyframes rflash{0%{background:#3ddc84}100%{background:var(--bg)}}
.notice{position:fixed;left:50%;bottom:2vh;transform:translateX(-50%);background:var(--bad);color:#fff;padding:.4em 1em;border-radius:.5em;font-weight:700;z-index:6}
.notice.ok{background:var(--ok);color:#0f1a2e}
.diag{position:fixed;left:2vw;top:2vh;max-height:80vh;overflow:auto;max-width:60vw;background:rgba(23,38,64,.96);border:2px solid var(--muted);border-radius:12px;padding:14px 18px;font:20px/1.35 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;z-index:8;user-select:text;-webkit-user-select:text}
.logbox pre{font:22px/1.4 ui-monospace,Menlo,Consolas,monospace;text-align:left;background:var(--bg2);padding:1em 1.4em;border-radius:.6em;max-width:90vw;max-height:70vh;overflow:auto;white-space:pre-wrap;user-select:text;-webkit-user-select:text}
.ver{position:fixed;right:6px;bottom:3px;font-size:11px;line-height:1;color:var(--muted);opacity:.45;pointer-events:none;z-index:7;font-family:ui-monospace,Menlo,Consolas,monospace}
.gamelist{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}
.gamelist .btn{width:100%;text-align:left;display:flex;flex-direction:column;gap:2px}
.gamelist .btn small{font-weight:400;font-size:.85rem;opacity:.75}

/* ---------- TV frame ---------- */
.tv{height:100vh;display:grid;grid-template-rows:auto 1fr auto;padding:2vh 3vw;gap:1vh;font-size:2.3vw;font-size:clamp(32px,2.3vw,52px)}
.tv .head{display:flex;justify-content:space-between;align-items:center;gap:1vw;min-height:1.4em}
.tv .head b{font-size:1.15em}
.tv .main{display:grid;grid-template-columns:1fr 1fr;gap:3vw;min-height:0;align-items:center}
.tv .main.single{grid-template-columns:1fr}
.tv .main.lobbymain{align-items:flex-start;overflow:hidden}
.tv .main.lobbymain .lobby{align-items:flex-start}
.tiles{display:grid;gap:1vh .8vw;align-content:center;grid-template-columns:repeat(2,1fr);max-height:76vh;overflow:hidden}
.tiles.c1{grid-template-columns:1fr}.tiles.c3{grid-template-columns:repeat(3,1fr)}.tiles.c5{grid-template-columns:repeat(5,1fr)}.tiles.c6{grid-template-columns:repeat(6,1fr);font-size:.72em}
.tile{background:var(--bg2);border-radius:.4em;padding:.35em .55em;display:flex;align-items:center;gap:.4em;min-height:2.1em;border:.09em solid transparent;min-width:0}
.tile .av{font-size:1.3em;flex:none}
.tile .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.tile .st{font-weight:800;flex:none;display:flex;align-items:center;gap:.3em}
.tile.ok{border-color:var(--ok)}.tile.bad{border-color:var(--bad)}.tile.dead{opacity:.4}.tile.away{opacity:.4;border-style:dashed;border-color:var(--muted)}.tile.active{border-color:var(--focus)}
.tile.flip{animation:flip .45s ease both}
@keyframes flip{from{transform:rotateX(90deg);opacity:0}to{transform:rotateX(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.tile.flip{animation:none}}
.code{font-size:13vw;font-size:clamp(96px,13vw,240px);font-weight:900;letter-spacing:.12em;line-height:1;font-variant-numeric:tabular-nums}
.qr{background:#fff;padding:1vw;border-radius:1vw;display:inline-block;line-height:0}
.lobby{display:grid;grid-template-columns:minmax(0,52%) minmax(0,1fr);gap:3vw;align-items:center}
.lobby .left{display:flex;flex-direction:column;gap:2vh;align-items:flex-start;min-width:0}
.lobby .left .muted{max-width:100%}
.tv .foot{display:flex;justify-content:space-between;align-items:center;gap:1vw;color:var(--muted);font-size:.8em;flex-wrap:wrap}
.tv .foot .btn{font-size:1em}
.tv .toggle{font-size:1em}
.tv .toggle input{width:.9em;height:.9em}
.tvbar{height:1.1vh;background:var(--line);border-radius:1vh;overflow:hidden;width:100%}
.tvbar>i{display:block;height:100%;background:var(--ink);width:100%;transform-origin:left;will-change:transform}
.podium{display:flex;gap:2vw;align-items:flex-end;justify-content:center;height:100%}
.podium .p{background:var(--bg2);border-radius:.4em;padding:.6em 1em;text-align:center;min-width:8em}
.podium .p.first{padding-bottom:2.2em;border:.1em solid var(--ok)}
.podium .p .av{font-size:2em;display:block}
.standings{display:flex;flex-direction:column;gap:.6vh;justify-content:center;height:100%}
.standings div{display:flex;justify-content:space-between;background:var(--bg2);border-radius:.4em;padding:.35em .8em}
.standings div span:first-child{display:flex;gap:.5em;align-items:center}
.stepbig{font-size:2.2em;font-weight:900;text-align:center;line-height:1}

/* ---------- OLD TV BROWSERS (no CSS Grid, no min()/clamp(), no flex gap) ---------- */
@supports not (display:grid){
  .tv{display:flex;flex-direction:column;font-size:2.3vw}
  .tv .head{flex:none;margin-bottom:1vh}
  .tv .main{display:flex;flex:1;min-height:0;align-items:center;justify-content:space-between}
  .tv .main>*{flex:1 1 0;min-width:0;margin:0 1.5vw}
  .tv .main.single>*{flex:1 1 100%}
  .tiles{display:flex;flex-wrap:wrap;justify-content:center;align-content:center}
  .tile{width:48%;margin:.5vh .4%}
  .tiles.c1 .tile{width:98%}.tiles.c3 .tile{width:31%}.tiles.c5 .tile{width:19%}.tiles.c6 .tile{width:15.5%}
  .tile .av,.tile .nm{margin-right:.4em}
  .lobby{display:flex;align-items:center}
  .lobby .left{width:52%;flex:none;margin-right:3vw}
  .lobby .left>*{margin-bottom:1vh}
  .tv .foot{flex-wrap:nowrap}
  .tv .foot>span:first-child{flex:1 1 auto;min-width:0}
  .tv .foot>span:last-child,.tv .foot>.btn{flex:none}
  .lobby>div:last-child{flex:1;min-width:0}
  .tv .foot{flex:none;margin-top:1vh}
  .tv .foot .btn,.tv .toggle,.tv .foot>span>span{margin:.2em .4em .2em 0}
  .code{font-size:13vw}
  .podium .p{margin:0 1vw}
  .standings>div{margin:.3vh 0}
  .phone{height:100vh;display:flex;flex-direction:column}
  .phone .top{flex:none;margin-bottom:8px}
  .overlay{top:0;left:0;right:0;bottom:0}
  .center>*{margin:7px 0}
  .avgrid{display:flex;flex-wrap:wrap}.avgrid button{width:22%;margin:1.5%}
  .row input{margin-right:8px}
  .hostbar .btn{margin-right:8px}
  .namelist>div{margin-bottom:6px}
  .gamelist .btn{margin-bottom:10px}
  .logbox pre{font-size:1.2vw}
}

/* pack unlock (v0.8.3) */
.packlock{display:inline-flex;gap:.5em;align-items:center;flex-wrap:wrap}
.keyfield{display:inline-flex;gap:.4em;align-items:center}
.keyfield input{font:inherit;font-size:.65em;padding:.4em .6em;border-radius:.5em;border:2px solid var(--line);background:var(--bg2);color:inherit;width:14em;max-width:40vw}
.packok{color:var(--ok);font-size:.65em;white-space:nowrap;display:inline-flex;gap:.4em;align-items:center}
.tv .packlock .btn{font-size:1em}

/* lobby join steps + brand (v0.8.3 presentation floor) */
.steps{display:flex;gap:.6em;font-size:.55em;color:var(--muted);margin:.2em 0 .1em;flex-wrap:wrap}
.steps span{display:inline-flex;align-items:center;gap:.35em;white-space:nowrap}
.steps b{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--bg2);border:2px solid var(--line);color:var(--ink);font-size:.9em}
.brand{color:var(--focus)}
@supports not (display:grid){.steps span{margin-right:.6em}}