/* Side by Side — graph paper, ink-blue X, marker-red O. Phone-first single column. */
:root{
  --paper:#F6F8FB; --grid:rgba(43,80,216,.07); --surface:#FFFFFF; --line:#D9DFEA;
  --ink:#1B2232; --muted:#5D6779; --x:#2448D0; --o:#D9412A; --ok:#1E8A55;
  --x-soft:rgba(36,72,208,.10); --o-soft:rgba(217,65,42,.10); --scrim:rgba(15,20,29,.55);
  --ok-soft:rgba(30,138,85,.12); --night-bg:#1B2440; --night-fg:#E7ECF5; --day-bg:rgba(240,170,40,.16); --day-fg:#9A6200;
  --c4-frame:#2448D0; --c4a:#E0412A; --c4b:#F4C21B; --c4a-text:#C2361F; --c4b-text:#9A7400; --c4a-soft:rgba(224,65,42,.18); --c4b-soft:rgba(244,194,27,.25);
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r:14px; color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --paper:#0F141D; --grid:rgba(140,165,255,.06); --surface:#171E2B; --line:#2A3446;
  --ink:#E7ECF5; --muted:#98A3B8; --x:#86A2FF; --o:#FF8164; --ok:#4CC98A;
  --x-soft:rgba(134,162,255,.14); --o-soft:rgba(255,129,100,.14); --scrim:rgba(0,0,0,.65);
  --ok-soft:rgba(76,201,138,.15); --night-bg:#0A0F1C; --night-fg:#E7ECF5; --day-bg:rgba(240,181,74,.14); --day-fg:#F0B54A;
  --c4-frame:#2E4BB8; --c4a:#FF6A4F; --c4b:#FFD23F; --c4a-text:#FF8164; --c4b-text:#FFD23F; --c4a-soft:rgba(255,106,79,.2); --c4b-soft:rgba(255,210,63,.2); color-scheme:dark}}

*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{background-color:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px;-webkit-tap-highlight-color:transparent;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
[hidden]{display:none!important}
.app{max-width:560px;margin:0 auto;padding-block:18px 48px;display:flex;flex-direction:column;gap:16px}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:26px;font-weight:800;line-height:1.1}
h2{font-size:20px;font-weight:800}
h3{font-size:15px;font-weight:600}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center}
.eyebrow{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}

.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:34px;height:34px;flex:none}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;font:inherit;font-weight:600;color:var(--ink)}
.avatar{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex:none}

.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px}
.tab{flex:1;border:0;background:transparent;padding:9px 6px;border-radius:9px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}
.tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:14px}
.stack{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row > *{min-width:0}

.btn{appearance:none;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:inherit;font-weight:700;padding:11px 16px;border-radius:11px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.link{background:none;border:0;padding:0;font:inherit;color:var(--x);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--x);outline-offset:2px}

label{font-size:13px;font-weight:600;color:var(--muted);display:flex;flex-direction:column;gap:6px}
input[type=text],input[type=password],input[type=tel],select{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:11px 12px;width:100%;min-width:0}
input:focus,select:focus{border-color:var(--x);outline:none}
input.code{font-family:var(--f-mono);font-weight:700;letter-spacing:.25em;text-transform:uppercase;text-align:center;font-size:18px}
input.pin{font-family:var(--f-mono);letter-spacing:.5em;text-align:center;font-size:20px}
.form{display:flex;flex-direction:column;gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.join{display:grid;grid-template-columns:1fr auto;gap:8px}
.err{color:var(--o);font-size:14px;font-weight:600}

.seg{display:flex;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.seg button{flex:1;border:0;background:transparent;font:inherit;font-weight:600;padding:9px;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--x-soft);color:var(--x)}

.list{display:flex;flex-direction:column}
.item{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item .grow{flex:1;min-width:0}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code-tag{font-family:var(--f-mono);font-weight:700;letter-spacing:.12em;font-size:13px;background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:3px 7px}
.pill{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:3px 8px;white-space:nowrap}
.pill.wait{background:var(--x-soft);color:var(--x)}
.pill.live{background:var(--o-soft);color:var(--o)}
.pill.done{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.empty{color:var(--muted);font-size:14px;padding:6px 0}
.note{border-radius:11px;padding:10px 12px;font-size:14px;background:var(--x-soft);color:var(--ink)}
.note.warn{background:var(--o-soft)}
.secret{font-family:var(--f-mono);font-weight:700;font-size:22px;letter-spacing:.15em;text-align:center;padding:12px;border:2px dashed var(--line);border-radius:12px;user-select:all}

.gamecard{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px}
.gamecard .grow{flex:1;min-width:0}
.soon{opacity:.55}

/* Room */
.room-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.code-big{font-family:var(--f-mono);font-weight:700;font-size:26px;letter-spacing:.22em}
.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.seat{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;align-items:center;gap:8px;min-width:0;transition:border-color .2s,box-shadow .2s}
.seat.right{flex-direction:row-reverse;text-align:right}
.seat .who{min-width:0}
.seat .nm{font-weight:700}
.seat.turn.x{border-color:var(--x);box-shadow:0 0 0 3px var(--x-soft)}
.seat.turn.o{border-color:var(--o);box-shadow:0 0 0 3px var(--o-soft)}
.mk{width:26px;height:26px;flex:none}
.vs{font-family:var(--f-display);font-weight:800;color:var(--muted);font-size:13px}
.status{font-family:var(--f-display);font-weight:800;font-size:22px;text-align:center;min-height:1.4em}
.status.x{color:var(--x)} .status.o{color:var(--o)}

/* ---- Board area (each game styles its own board below) ---- */
.board-area{display:flex;justify-content:center}
.board-area > *{width:100%}

/* ---- Game: tic-tac-toe ---- */
.ttt{position:relative;width:100%;max-width:360px;aspect-ratio:1;margin:0 auto}
.ttt-board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.ttt-cell{appearance:none;border:0;background:transparent;padding:10%;cursor:pointer;position:relative;color:var(--ink);touch-action:manipulation}
.ttt-cell:nth-child(-n+6){border-bottom:3px solid var(--ink)}
.ttt-cell:not(:nth-child(3n)){border-right:3px solid var(--ink)}
.ttt-cell:disabled{cursor:default}
.ttt-cell.hint:hover:not(:disabled)::after{content:"";position:absolute;inset:22%;border-radius:50%;background:var(--grid)}
.ttt-cell svg{width:100%;height:100%;display:block}
.ttt-winline{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}
.ttt-winline line{stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .4s .2s ease-out forwards}
.stroke{fill:none;stroke-width:11;stroke-linecap:round}
.stroke.x{stroke:var(--x)} .stroke.o{stroke:var(--o)}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .28s ease-out forwards}
.draw.d2{animation-delay:.16s}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---- Game: Connect Four ---- */
.c4{width:100%;max-width:420px;margin:0 auto}
.c4-board{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:8px;background:var(--c4-frame);border-radius:14px;overflow:hidden}
.c4-col{appearance:none;border:0;background:transparent;padding:0;display:flex;flex-direction:column;gap:5px;min-width:0;cursor:pointer;border-radius:10px;touch-action:manipulation}
.c4-col:disabled{cursor:default}
.c4-col:not(:disabled):hover{background:rgba(255,255,255,.12)}
.c4-slot{display:block;aspect-ratio:1;border-radius:50%;background:var(--paper);position:relative;overflow:visible}
.c4-disc{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.c4-disc.s0,.c4-icon.s0{background:var(--c4a);fill:var(--c4a)}
.c4-disc.s1,.c4-icon.s1{background:var(--c4b);fill:var(--c4b)}
.c4-disc.drop{animation:c4drop .38s cubic-bezier(.4,0,.8,.6) both}
@keyframes c4drop{from{transform:translateY(calc(var(--r) * -112%))}to{transform:none}}
.c4-disc.win{box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 0 0 3px var(--surface),0 0 0 6px var(--ink)}
.status.c4a{color:var(--c4a-text)} .status.c4b{color:var(--c4b-text)}
.seat.turn.c4a{border-color:var(--c4a);box-shadow:0 0 0 3px var(--c4a-soft)}
.seat.turn.c4b{border-color:var(--c4b);box-shadow:0 0 0 3px var(--c4b-soft)}

@media (prefers-reduced-motion: reduce){.draw,.ttt-winline line{animation:none;stroke-dashoffset:0}.c4-disc.drop{animation:none}}

/* Leaderboard filters */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.fchip{border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px;cursor:pointer}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Leaderboard */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:right;font-weight:700;padding:6px;border-bottom:1px solid var(--line)}
th:nth-child(1),th:nth-child(2){text-align:left}
td{padding:10px 6px;border-bottom:1px solid var(--line);text-align:right}
td:nth-child(1){text-align:left;width:28px;color:var(--muted);font-family:var(--f-mono)}
td:nth-child(2){text-align:left;font-weight:700}
td.pts{font-family:var(--f-display);font-weight:800;font-size:17px}
tr.me-row td:nth-child(2)::after{content:" (you)";color:var(--muted);font-weight:400}

/* Modal + toast */
.modal{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;z-index:30;padding:16px}
.sheet{background:var(--surface);border-radius:18px;padding:20px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 32px);overflow:auto}
.qr{background:#fff;border-radius:12px;padding:12px;width:100%;max-width:260px;margin:0 auto}
.qr svg{display:block;width:100%;height:auto}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;font-weight:600;font-size:14px;z-index:40;max-width:calc(100% - 32px);text-align:center}

input.pin::placeholder{letter-spacing:normal;font-family:var(--f-body);font-size:15px}
.mk svg{width:100%;height:100%;display:block}

/* ---- Game: Mafia ---- */
.maf{display:flex;flex-direction:column;gap:12px;width:100%}
.maf-banner{border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.45}
.maf-banner.maf-reveal{background:var(--x-soft)}
.maf-banner.maf-night{background:var(--night-bg);color:var(--night-fg)}
.maf-banner.maf-day{background:var(--day-bg)}
.maf-banner.maf-over{background:var(--paper);border:1px solid var(--line)}
.status.maf-night-t{color:var(--x)} .status.maf-day-t{color:var(--day-fg)}
.status.maf-town-t{color:var(--ok)} .status.maf-mafia-t{color:var(--o)}
.maf-role{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.maf-role summary{cursor:pointer;font-weight:700}
.maf-role-body{display:flex;flex-direction:column;gap:6px;padding-top:8px}
.role-big{font-family:var(--f-display);font-weight:800;font-size:28px}
.role-tag{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:2px 6px;white-space:nowrap}
.r-mafia{color:var(--o)} .role-tag.r-mafia{background:var(--o-soft)}
.r-doctor{color:var(--ok)} .role-tag.r-doctor{background:var(--ok-soft)}
.r-detective{color:var(--x)} .role-tag.r-detective{background:var(--x-soft)}
.r-villager{color:var(--muted)} .role-tag.r-villager{background:var(--paper);border:1px solid var(--line)}
.r-mafia-t{color:var(--o);font-weight:700}
.maf-checks{margin:0;padding-left:18px;font-size:14px}
.maf-action{display:flex;flex-direction:column;gap:8px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.pick{appearance:none;font:inherit;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.pick:hover{border-color:var(--ink)}
.pick.on{border-color:var(--x);background:var(--x-soft);box-shadow:0 0 0 2px var(--x)}
.pick.skip{text-align:center;align-items:center}
.pick-note{font-size:12px;font-weight:500;color:var(--o)}
.maf-players{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.maf-p{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.maf-p.dead .grow{text-decoration:line-through;color:var(--muted)}
.maf-log summary{cursor:pointer;color:var(--muted)}
.maf-log ol{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.maf-icon{fill:var(--ink)}