:root{
  --brand:#FFEA00; --ink:#111827; --soft:#64748b; --line:#e6e8ee; --card:#ffffff;
  --bg:#f3f4f7; --accent:#7c3aed; --good:#16a34a; --gold:#f5b301; --silver:#9aa6b2; --bronze:#c98a3b;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:'Open Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; }
a{ color:inherit; }

/* topbar */
.topbar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; background:var(--brand); color:#111; padding:9px 14px; }
.topbar .home{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; color:#111; text-decoration:none; }
.topbar .home svg{ width:20px; height:20px; fill:currentColor; }
.topbar .brand{ font-weight:800; font-size:17px; letter-spacing:.3px; }
.topbar .tag{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:.8; }
.topbar .auth{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.auth .who{ display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:13px; max-width:44vw; overflow:hidden; }
.auth .who img{ width:26px; height:26px; border-radius:50%; object-fit:cover; background:#fff; }
.auth .who .nm{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.auth .signin{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-weight:800; font-size:13px; padding:8px 12px; border-radius:10px; border:none; background:#111827; color:#fff; cursor:pointer; text-decoration:none; }
.auth .signout{ border:none; background:rgba(0,0,0,.08); color:#111; font-weight:800; font-size:12px; padding:6px 9px; border-radius:8px; cursor:pointer; }

.wrap{ max-width:640px; margin:0 auto; padding:16px 14px 40px; }

/* page header: back button top-left, title, optional action on the right */
.page-head{ display:flex; align-items:center; gap:10px; margin:2px 0 12px; }
.page-head h1{ margin:0; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.back-btn{ width:36px; height:36px; flex:none; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; font-size:19px; line-height:1; cursor:pointer; text-decoration:none; }
.back-btn:hover{ border-color:var(--accent); }

/* equal-width buttons sharing one row */
.btn-row{ display:flex; gap:8px; }
.btn-row .btn{ flex:1; }

/* board code + copy actions in a single row */
.code-row{ display:flex; align-items:center; gap:8px; }
.code-row .pnr{ flex:none; }
.code-row .btn{ flex:1; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin:12px 0; box-shadow:0 1px 2px rgba(16,24,40,.04); }
h1{ font-size:22px; margin:6px 2px 2px; letter-spacing:-.01em; }
h2{ font-size:15px; margin:0 0 10px; letter-spacing:.01em; }
.sub{ color:var(--soft); font-size:13.5px; line-height:1.5; margin:0 2px 10px; }
label{ display:block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--soft); margin:12px 0 5px; }
input[type=text]{ width:100%; font:inherit; font-size:15px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
input:focus{ outline:2px solid var(--accent); outline-offset:0; border-color:transparent; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; font:inherit; font-weight:800; font-size:14px; letter-spacing:.02em;
  padding:12px 16px; border-radius:12px; border:none; cursor:pointer; background:#eef0f4; color:var(--ink); text-decoration:none; }
.btn.primary{ background:var(--accent); color:#fff; }
.btn.brand{ background:#111827; color:#fff; }
.btn.ghost{ background:transparent; border:1px solid var(--line); }
.btn.wide{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn.sm{ padding:8px 12px; font-size:13px; border-radius:10px; }
.muted{ color:var(--soft); font-size:12.5px; }

.linkbox{ display:flex; gap:8px; margin-top:8px; }
.linkbox input{ font-size:12.5px; }
.pnr-line{ font-size:12.5px; color:var(--soft); margin:2px 2px 10px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.pnr{ font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:800; letter-spacing:.2em; font-size:19px; color:var(--ink); background:#f1f2f6; padding:3px 4px 3px 12px; border-radius:8px; }

.chip{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; padding:3px 8px; border-radius:999px; background:#f1f2f6; color:var(--soft); }

/* mini game tile (homepage-style) */
.mini-tile{ display:inline-flex; align-items:center; justify-content:center; min-width:60px; height:30px; padding:0 11px; border-radius:9px;
  font-weight:800; font-size:12.5px; letter-spacing:.03em; box-shadow:0 2px 5px rgba(15,23,42,.18); white-space:nowrap; }
.mini-tile.sm{ min-width:52px; height:26px; font-size:11px; padding:0 9px; border-radius:8px; }

/* game picker grid */
.game-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:11px; margin-top:6px; }
/* Unselected tiles read as "not chosen": muted swatch, plain border. */
.game-pick{ position:relative; border:2px solid var(--line); border-radius:14px; padding:9px 8px; background:#fff; cursor:pointer; text-align:center;
  transition:border-color .14s, box-shadow .14s, transform .09s, background .14s; }
.game-pick:hover{ border-color:#cdbff5; }
.game-pick:active{ transform:scale(.95); }
.game-pick .swatch{ width:100%; height:44px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; letter-spacing:.03em;
  filter:grayscale(.45); opacity:.72; transition:filter .14s, opacity .14s; }
/* Selected tiles POP: accent-tinted card, lift + ring, full-colour swatch. */
.game-pick.on{ border-color:var(--accent); background:#f4f1fe; box-shadow:0 6px 16px rgba(124,58,237,.22); transform:translateY(-2px); }
.game-pick.on .swatch{ filter:none; opacity:1; box-shadow:0 2px 6px rgba(15,23,42,.18); }
/* Spring-in check badge in the corner. */
.game-pick .tick{ position:absolute; top:-9px; right:-9px; width:23px; height:23px; border-radius:50%; background:var(--accent); color:#fff;
  font-size:13px; font-weight:900; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 7px rgba(124,58,237,.45);
  transform:scale(0); transition:transform .18s cubic-bezier(.34,1.56,.64,1); }
.game-pick.on .tick{ transform:scale(1); }

/* board list */
.board-row{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:14px; background:#fff; margin-top:10px; cursor:pointer; text-decoration:none; color:inherit; }
.board-row:hover{ border-color:var(--accent); }
.board-row .bname{ font-weight:800; font-size:15px; }
.board-row .bmeta{ font-size:12px; color:var(--soft); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.board-row .tiles{ display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.board-row .arrow{ margin-left:auto; color:#cbd0d8; font-size:20px; }

/* segmented control */
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; flex-wrap:wrap; }
.seg button{ font:inherit; font-size:13px; font-weight:800; padding:8px 12px; border:none; background:#fff; color:var(--soft); cursor:pointer; }
.seg button.on{ background:var(--ink); color:#fff; }

/* ranking table */
table.lb{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.lb th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--soft); padding:6px 8px; border-bottom:1px solid var(--line); }
table.lb td{ padding:9px 8px; border-bottom:1px solid #f1f2f5; vertical-align:middle; }
table.lb tr.me td{ background:#f5f3ff; }
table.lb .pos{ width:26px; color:var(--soft); font-weight:800; }
table.lb .who{ display:flex; align-items:center; gap:8px; }
table.lb .who img{ width:24px; height:24px; border-radius:50%; object-fit:cover; background:#eef0f4; }
table.lb .medals{ font-size:12px; white-space:nowrap; color:var(--soft); }
table.lb .pts{ text-align:right; font-weight:800; font-variant-numeric:tabular-nums; }
table.lb .tm{ text-align:right; color:var(--soft); font-variant-numeric:tabular-nums; white-space:nowrap; }

.note{ font-size:12px; color:var(--soft); background:#f8fafc; border:1px dashed var(--line); border-radius:10px; padding:10px 12px; margin-top:10px; line-height:1.5; }
.toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:#111827; color:#fff; font-weight:700; font-size:13px; padding:10px 16px; border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:80; }
.toast.on{ opacity:1; transform:translateX(-50%) translateY(-4px); }
.foot{ text-align:center; color:var(--soft); font-size:11.5px; margin-top:20px; }
.hidden{ display:none !important; }
.center{ text-align:center; }
.spinner{ width:22px; height:22px; border:3px solid rgba(0,0,0,.12); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; margin:16px auto; }
@keyframes spin{ to{ transform:rotate(360deg); } }