/* Arcade kit styles. One small token set (colours, radii, type) on :root; everything else
   refers to tokens, translucency comes from color-mix() on a token, never a new shade.
   Player colours are --p0..--p9 (canvas code reads them with getComputedStyle).
   Game pages (body.game) are a fixed 100dvh grid: header / hud / stage / controls. */
:root{
  color-scheme:dark;
  --bg:#07080d; --surface:#0f121a; --surface-2:#171b26; --line:#242a3a; --line-2:#363e54;
  --text:#eef1f8; --muted:#98a1b6; --accent:#22d3ee; --accent-ink:#03161c;
  --good:#4ade80; --warn:#facc15; --bad:#f87171;
  --p0:#22d3ee; --p1:#f472b6; --p2:#facc15; --p3:#4ade80; --p4:#fb923c;
  --p5:#a78bfa; --p6:#f87171; --p7:#e5e7eb; --p8:#60a5fa; --p9:#a3e635;
  --r:14px; --r-sm:9px; --r-pill:999px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sat:env(safe-area-inset-top,0px); --sar:env(safe-area-inset-right,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px);
  --glow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font:15px/1.45 var(--font);-webkit-tap-highlight-color:transparent;
  padding:var(--sat) var(--sar) var(--sab) var(--sal)}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{margin:0}
canvas{display:block}
kbd{display:inline-block;min-width:22px;padding:0 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;background:var(--surface-2);color:var(--text);font:12px/20px var(--mono);text-align:center}
.muted{color:var(--muted);font-weight:400}
.hint{color:var(--muted);font-size:13px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--pc,var(--muted));box-shadow:0 0 8px var(--pc,transparent);flex:none;margin-right:6px;vertical-align:-1px}

/* ---------- buttons, inputs, segmented controls ---------- */
button{font:600 15px var(--font);color:var(--accent-ink);background:var(--accent);border:0;border-radius:var(--r-sm);padding:10px 18px;cursor:pointer;touch-action:manipulation;margin:0}
button:hover{filter:brightness(1.08)}
button:disabled{background:var(--surface-2);color:var(--muted);cursor:default;filter:none}
button.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--line-2)}
button.small{padding:6px 12px;font-size:13px}
button.big{display:block;width:100%;min-height:54px;font-size:18px;border-radius:var(--r);letter-spacing:.02em}
button.icon{width:38px;height:38px;padding:0;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);font-size:17px;line-height:1}
button.linkish{background:none;border:0;padding:0;color:var(--accent);font:inherit}
button.x{width:30px;height:30px;padding:0;border-radius:8px;background:transparent;border:1px solid var(--line-2);color:var(--muted);font-size:13px;flex:none}
button.x:hover{color:var(--bad);border-color:var(--bad)}
input{font:600 17px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 12px;min-height:48px;text-align:center;width:100%}
input:focus{outline:2px solid var(--accent);outline-offset:1px}
input.text{font:600 18px var(--font);letter-spacing:0;text-transform:none;text-align:left}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1 1 0;min-height:38px;padding:4px 8px;font-size:13px;background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);white-space:nowrap}
.seg button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.seg button:disabled{opacity:.6}
.seg button.on:disabled{opacity:.85;background:var(--accent);color:var(--accent-ink)}
.badge{font:700 10px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border-radius:5px;background:var(--line-2);color:var(--text);flex:none}
.badge.host{background:var(--warn);color:var(--accent-ink)}
.badge.live{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good);border:1px solid color-mix(in srgb,var(--good) 45%,transparent)}
.badge.accent{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.ping{font:600 12px var(--mono);color:var(--good);white-space:nowrap}
.ping.meh{color:var(--warn)} .ping.bad{color:var(--bad)}
.toast{position:fixed;left:50%;bottom:calc(20px + var(--sab));transform:translateX(-50%);z-index:50;background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);padding:10px 16px;border-radius:var(--r);box-shadow:0 10px 30px rgb(0 0 0 / .45);max-width:90vw}

/* ---------- settings sheet ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:40;background:rgb(0 0 0 / .55);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);border:1px solid var(--line-2);border-radius:18px 18px 0 0;padding:18px 18px calc(18px + var(--sab));width:min(480px,100%);display:flex;flex-direction:column;gap:8px}
@media (min-height:600px) and (min-width:600px){.sheet-wrap{align-items:center}.sheet{border-radius:18px}}
.sheet h2{font-size:19px;margin-bottom:4px}
.sheet label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:6px}
.sheet .done{margin-top:12px;min-height:48px}

/* ---------- hub (index.html) ---------- */
body.hub{display:flex;flex-direction:column;align-items:center}
.hub header{width:min(1080px,100%);display:flex;align-items:center;gap:10px;padding:14px 16px}
.hub header h1{font:900 22px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;flex:1;text-shadow:var(--glow)}
.hub header h1 b{color:var(--accent)}
.hub header .actions{display:flex;gap:8px;align-items:center}
.hub main{width:min(1080px,100%);padding:4px 16px 40px}
.hub .lede{color:var(--muted);margin:0 0 14px;max-width:640px}
.joinbar{display:flex;gap:8px;align-items:center;max-width:560px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px;margin-bottom:16px}
.joinbar input{flex:1;min-width:0}
.joinbar button{flex:none;min-height:48px}
.err{color:var(--bad);min-height:1.2em;margin:-8px 0 12px;font-size:14px}
.err:empty{display:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;--gc:var(--accent)}
.gcard .art{aspect-ratio:16/9;background:var(--bg);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.gcard .art svg,.gcard .art canvas{position:absolute;inset:0;width:100%;height:100%}
.gcard .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.gcard h2{font-size:19px;display:flex;align-items:center;gap:8px}
.gcard p{margin:0;color:var(--muted);font-size:14px;flex:1}
.gcard .tags{display:flex;gap:6px;flex-wrap:wrap}
.gcard .row{display:flex;gap:8px;margin-top:4px}
.gcard .row button,.gcard .row a.btn{flex:1;min-height:46px}
.gcard .status{font-size:13px;color:var(--muted);min-height:1.2em}
.gcard .status:empty{display:none}
a.btn{display:flex;align-items:center;justify-content:center;gap:6px;font:600 15px var(--font);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);padding:10px 18px}
.gcard.ext .art{display:grid;place-items:center}
.offline-note{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px;margin-bottom:14px}

/* ---------- game pages ---------- */
html:has(body.game){height:100%;overflow:hidden;overscroll-behavior:none}
body.game{position:fixed;inset:0;min-height:0;overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) 0;
  grid-template-areas:"hdr hdr" "hud hud" "stage stage" "padl padr"}
/* The pad row needs an explicit size: the pad cells are size containers (they size their contents with cq units). */
html.show-pad body.game{grid-template-rows:auto auto minmax(0,1fr) calc(190px + var(--sab))}
.bar{grid-area:hdr;display:flex;align-items:center;gap:8px;padding:8px 12px;min-width:0;height:52px}
.bar .home{font:800 20px/1 var(--font);color:var(--text);width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line-2);flex:none}
.bar h1{font:800 16px/1.1 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.bar .code{font:700 14px/1 var(--mono);letter-spacing:.14em;background:var(--surface-2);border:1px solid var(--line-2);border-radius:7px;padding:6px 8px;flex:none}
.bar .ping{flex:none;min-width:44px;text-align:right}
.bar button{flex:none}
.hud{grid-area:hud;display:flex;align-items:center;gap:10px;padding:0 12px 6px;min-width:0;height:34px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden}
.hud .phase{color:var(--text);font-weight:650;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hud .sp{flex:1}
.hud b{color:var(--text);font-variant-numeric:tabular-nums}
.stage{grid-area:stage;position:relative;min-width:0;min-height:0;display:grid;place-items:center;padding:4px 8px;container-type:size}
.stage canvas{touch-action:none}
.netbanner{position:fixed;left:50%;top:calc(10px + var(--sat));transform:translateX(-50%);z-index:30;background:var(--bad);color:var(--accent-ink);font-weight:700;padding:8px 16px;border-radius:var(--r-pill);box-shadow:0 6px 20px rgb(0 0 0 / .4)}

/* square arena (cycles) on a touch screen: the stage is as tall as it is wide, the pad takes the rest */
html.show-pad body.game[data-layout=square]{grid-template-rows:auto auto auto minmax(calc(170px + var(--sab)),1fr)}
html.show-pad body.game[data-layout=square] .stage{height:min(calc(100vw - var(--sal) - var(--sar)),calc(100dvh - 86px - var(--sat) - var(--sab) - 170px))}

/* table games (air hockey): no pad row even on touch screens; the game sizes and rotates its own
   table to fit the stage (portrait: long axis vertical; landscape: horizontal) and takes input on it */
html body.game[data-layout=table],html.show-pad body.game[data-layout=table]{grid-template-rows:auto auto minmax(0,1fr) 0}
html body.game[data-layout=table] .ctl{display:none}
body.game[data-layout=table] .stage{padding:2px 6px 6px}

/* banner over the stage: countdown, waiting, round results, "next round" */
.banner{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:5}
.banner > div{pointer-events:auto;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line-2);border-radius:var(--r);padding:14px 18px;text-align:center;max-width:min(90%,420px);box-shadow:0 12px 40px rgb(0 0 0 / .45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.banner .big{font:900 72px/1 var(--mono);color:var(--text);text-shadow:var(--glow);background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;animation:pop .9s ease-out}
.banner h2{font-size:20px;margin-bottom:4px}
.banner p{margin:4px 0;color:var(--muted)}
.banner button{margin-top:10px}
.banner table{margin:6px auto 0}
.banner.corner{place-items:start center;padding-top:8px}
.banner.corner > div{padding:6px 12px;font-size:13px}
@keyframes pop{0%{transform:scale(.4);opacity:0}25%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:.9}}

/* ---------- touch controls (game clients fill .ctl-l / .ctl-r) ---------- */
.ctl{display:none;touch-action:none;user-select:none;-webkit-user-select:none;min-width:0;min-height:0;container-type:size;padding:6px 12px calc(8px + var(--sab))}
html.show-pad .ctl{display:grid;place-items:center}
.ctl-l{grid-area:padl}
.ctl-r{grid-area:padr}
.dpad{position:relative;width:min(100cqh,100cqw,240px);aspect-ratio:1;border-radius:50%;background:var(--surface);border:1px solid var(--line-2);touch-action:none}
.dpad .arr{position:absolute;width:34%;height:34%;display:grid;place-items:center;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);font-size:clamp(20px,9cqmin,34px);pointer-events:none;transition:background .06s,box-shadow .06s}
.dpad .arr[data-d="0"]{left:33%;top:4%}.dpad .arr[data-d="1"]{right:4%;top:33%}.dpad .arr[data-d="2"]{left:33%;bottom:4%}.dpad .arr[data-d="3"]{left:4%;top:33%}
.dpad .arr.on{background:var(--accent);color:var(--accent-ink);box-shadow:var(--glow)}
.dpad::after{content:"";position:absolute;left:39%;top:39%;width:22%;height:22%;border-radius:50%;background:var(--surface-2);border:1px solid var(--line)}
.holdbtn{width:min(100cqh,100cqw,160px);aspect-ratio:1;border-radius:50%;font:800 16px var(--mono);letter-spacing:.1em;background:var(--surface-2);color:var(--text);border:2px solid var(--line-2);position:relative;overflow:hidden;touch-action:none}
.holdbtn .fill{position:absolute;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--accent) 22%,transparent);pointer-events:none}
.holdbtn span{position:relative}
.holdbtn.down{border-color:var(--accent);box-shadow:var(--glow);transform:scale(.97)}
.holdbtn:disabled{opacity:.4}

/* ---------- overlay panels (lobby, messages) ---------- */
.overlay{position:fixed;inset:0;display:grid;place-items:safe center;background:rgb(4 5 9 / .78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:20;
  padding:calc(10px + var(--sat)) calc(10px + var(--sar)) calc(10px + var(--sab)) calc(10px + var(--sal));overflow:auto;touch-action:pan-y;user-select:text;-webkit-user-select:text}
.panel{background:var(--surface);border:1px solid var(--line-2);border-radius:18px;padding:22px 24px;width:min(440px,100%);text-align:center;box-shadow:0 20px 60px rgb(0 0 0 / .5)}
.panel h2{font-size:22px;margin-bottom:8px}
.panel p{margin:6px 0}
.panel .row{display:flex;gap:8px;margin-top:12px}
.panel .row button{flex:1}
.roomcode{font:800 clamp(32px,10vw,50px)/1 var(--mono);letter-spacing:.16em;margin:8px 0 2px;user-select:all;-webkit-user-select:all;text-shadow:var(--glow)}
.namebox{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.only-touch{display:none} html.show-pad .only-touch{display:inline} html.show-pad .only-keys{display:none}

.panel.lobby{width:min(1000px,100%);text-align:left;display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:24px;padding:20px}
.panel.lobby.noinvite{grid-template-columns:minmax(0,1fr);width:min(640px,100%)}
.invite{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.qr{width:min(310px,100%);aspect-ratio:1;background:#fff;border-radius:var(--r);padding:4px}
.qr svg{display:block;width:100%;height:100%}
.invite .row{display:flex;gap:8px;width:100%}
.invite .row button{flex:1}
.invite .url{word-break:break-all;margin:0}
.lhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lhead h2{font-size:22px}
.modeline{margin:6px 0 0;color:var(--muted);font-size:14px}
.modeline b{color:var(--good)}
.info h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 6px;font-weight:700}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.plist li{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--pc);border-radius:8px;padding:5px 8px;min-height:40px}
.plist .nm{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.plist .sp{flex:1}
.plist .rd{font-size:12px;color:var(--muted);white-space:nowrap}
.plist .rd.ok{color:var(--good);font-weight:650}
.plist .rd.off{color:var(--bad)}
/* team games: the sides of the round (Home / Away) as headed groups with a team-colour chip */
.plist li.grp{background:none;border:0;min-height:0;padding:6px 2px 0;font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plist li.grp .chip{width:10px;height:10px;border-radius:3px;background:var(--pc);box-shadow:0 0 8px var(--pc)}
.plist li.grp .n{font-weight:600;letter-spacing:0;text-transform:none}
.watchers{margin-top:8px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.watchers .w{display:inline-flex;gap:4px;align-items:center;color:var(--text)}
.settings{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:center}
.settings label{font-size:13px;color:var(--muted)}
.go{display:flex;gap:8px;margin-top:16px;position:sticky;bottom:-20px;padding:10px 0 12px;background:linear-gradient(transparent,var(--surface) 30%);z-index:1}
.go button{flex:1}
.links{margin-top:6px}
.table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.table th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;font-weight:650;padding:3px 6px}
.table td{padding:5px 6px;border-top:1px solid var(--line);white-space:nowrap}
.table td.nm{white-space:normal;width:100%}
.table th.n,.table td.n{text-align:right}
.table tr.me td{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.table tr.champ td{color:var(--good);font-weight:700}
.table tr.away td{opacity:.55}

@media (max-width:760px){
  .panel.lobby{grid-template-columns:minmax(0,1fr);padding:16px;gap:12px}
  .qr{width:min(260px,66vw)}
  .settings{gap:6px 8px}
  .settings .seg button{font-size:12px;padding:3px 4px;min-height:36px}
}


/* ---------- phones held sideways: controls at the left and right edges ---------- */
@media (max-height:520px) and (orientation:landscape){
  body.game,html.show-pad body.game,html.show-pad body.game[data-layout=square]{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"hdr hdr hdr" "padl hud padr" "padl stage padr"}
  html:not(.show-pad) body.game{grid-template-areas:"hdr hdr hdr" "hud hud hud" "stage stage stage"}
  .bar{height:44px;padding:4px 10px}
  .hud{height:28px;padding:0 8px 4px}
  html.show-pad body.game[data-layout=square] .stage{height:auto}
  html body.game[data-layout=table],html.show-pad body.game[data-layout=table]{grid-template-rows:auto auto minmax(0,1fr)}
  body.game[data-layout=table] .stage{padding:2px calc(6px + var(--sar)) 4px calc(6px + var(--sal))}
  .ctl{width:calc(min(42vh,190px) + 24px);padding:6px calc(8px + var(--sal)) 6px 10px}
  .ctl-r{padding:6px calc(8px + var(--sar)) 6px 10px}
  .dpad{width:min(100cqw,100cqh,190px)}
  .holdbtn{width:min(100cqw,100cqh,130px)}
  .panel.lobby{grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:18px;padding:16px}
  .qr{width:min(220px,100%,58vh)}
  .roomcode{font-size:32px}
}
#invite{display:inline-flex;align-items:center;gap:6px}
#invite .ico{width:16px;height:16px}
@media (max-width:720px) and (orientation:portrait){
  .bar{padding:6px 10px;gap:6px}
  .bar .hide-narrow{display:none}
  .bar .code{letter-spacing:.08em;padding:6px}
  .bar .ping{min-width:0}
  #invite{padding:0;width:38px;height:38px;justify-content:center}
  #invite .lbl{display:none}
}