:root{
  --bg:#0b0c0f;
  --surface:#131419;
  --surface-2:#16181d;
  --surface-3:#1d1f26;
  --line:#1c1e24;
  --border:#1c1e24;
  --text:#d7d9df;
  --text-2:#868b96;
  --text-3:#545863;
  --accent:#83ab9c;
  --accent-dim:#37463f;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; justify-content:center;
  padding:max(44px, env(safe-area-inset-top)) 22px 72px;
}
main{width:100%; max-width:500px;}

/* ---- Header ---- */
header{margin-bottom:42px;}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:12px;}
.mark{width:26px; height:26px; flex:none; color:var(--text-3);}
.wordmark{
  font-family:var(--mono); font-size:21px; font-weight:500;
  letter-spacing:-0.03em; line-height:1; user-select:none;
}
.wordmark .a{color:var(--text-2);}
.wordmark .b{color:var(--text);}
.seedline{
  flex:none; text-align:right; font-family:var(--mono);
  line-height:1.45; letter-spacing:0.03em;
}
.seedline .lbl{display:block; font-size:10.5px; color:var(--text-3);}
.seedline b{font-size:12px; color:var(--text-2); font-weight:500;}
.tagline{
  margin-top:22px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px;
  font-size:14px; color:var(--text-2); line-height:1.55;
}
.tagline .ic{
  display:inline-block; width:16px; height:16px;
  vertical-align:-0.2em; margin-right:7px;
  color:var(--accent);
}

/* ---- Game index ---- */
.index{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.game{
  display:flex; align-items:baseline; gap:14px;
  padding:16px 8px;
  border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--text);
  transition:background 0.15s ease;
}
a.game{cursor:pointer;}
a.game:hover{background:var(--surface);}
a.game:focus-visible{background:var(--surface); outline:none;}
.idx{
  font-family:var(--mono); font-size:11px; font-weight:500;
  color:var(--text-3); flex:none; width:18px;
  align-self:center; letter-spacing:0.04em;
  transition:color 0.15s ease;
}
.gname{
  font-family:var(--mono); font-size:15px; font-weight:500;
  color:var(--text); flex:none; letter-spacing:-0.01em;
  transition:color 0.15s ease;
}
.gname .check{
  display:none; width:14px; height:14px;
  margin-left:8px; vertical-align:-0.22em;
  color:var(--accent);
}
.game.done .gname .check{ display:inline-block; }
.gdesc{
  flex:1 1 auto; min-width:0;
  font-size:12.5px; color:var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:right;
}
.garrow{
  font-family:var(--mono); flex:none; align-self:center;
  color:var(--text-3); font-size:13px; line-height:1;
  transition:color 0.15s ease, transform 0.15s ease;
}
a.game:hover .idx,
a.game:focus-visible .idx,
a.game:hover .garrow,
a.game:focus-visible .garrow{color:var(--accent);}
a.game:hover .garrow,
a.game:focus-visible .garrow{transform:translate(1px,-1px);}
a.game:hover .gname,
a.game:focus-visible .gname{color:#fff;}

.game.soon .gname{color:var(--text-3); letter-spacing:0.1em;}
.game.soon .gdesc{color:var(--text-3);}

/* ---- Your standings (aggregate) ---- */
.standings{
  margin-top:34px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px; overflow:hidden;
}
.standings[hidden]{display:none;}
.st-head{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-bottom:1px solid var(--line);
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
}
.st-title{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text-2);
}
.st-sub{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.02em; color:var(--accent);
}
.st-refresh{
  margin-left:auto; flex:none;
  width:26px; height:26px; border-radius:6px;
  background:transparent; border:1px solid var(--line); color:var(--text-3);
  font-size:13px; line-height:1; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.st-refresh:hover{ color:var(--accent); border-color:var(--accent-dim); }
.st-refresh:active{ transform:rotate(90deg) scale(0.94); }
.st-rows{ display:flex; flex-direction:column; }
.st-row{
  display:flex; align-items:baseline; gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--line);
}
.st-row:last-child{ border-bottom:0; }
.st-row.passed{ background:rgba(224,177,94,0.045); }
.st-name{
  font-family:var(--mono); font-size:13px; font-weight:500;
  color:var(--text); flex:none; min-width:96px; letter-spacing:-0.01em;
}
.st-score{
  flex:1 1 auto; min-width:0;
  font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.st-rank{
  flex:none; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.02em; padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.st-rank.leading{ color:var(--accent); background:var(--accent-dim); }
.st-rank.passed{ color:#e0b15e; background:#3a2f1a; }
.st-rank.checking{ color:var(--text-3); background:var(--surface-3); }

/* ---- Today's overall (global cross-game leaderboard) ---- */
.global{
  margin-top:34px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px; overflow:hidden;
}
.global[hidden]{display:none;}
.gl-head{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-bottom:1px solid var(--line);
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
}
/* collapse: click the header to show only the header */
.st-caret, .gl-caret{
  flex:none; color:var(--text-3); font-size:9px; line-height:1;
  transition:transform 0.15s ease;
}
.standings.collapsed .st-caret, .global.collapsed .gl-caret{ transform:rotate(-90deg); }
.standings.collapsed .st-head, .global.collapsed .gl-head{ border-bottom:0; }
.standings.collapsed .st-rows, .global.collapsed .gl-rows{ display:none; }
.gl-title{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text-2);
}
.gl-sub{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--accent); }
.gl-refresh{
  margin-left:auto; flex:none;
  width:26px; height:26px; border-radius:6px;
  background:transparent; border:1px solid var(--line); color:var(--text-3);
  font-size:13px; line-height:1; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.gl-refresh:hover{ color:var(--accent); border-color:var(--accent-dim); }
.gl-refresh:active{ transform:rotate(90deg) scale(0.94); }
.gl-rows{ display:flex; flex-direction:column; }
.gl-row{
  display:grid;
  grid-template-columns:28px 52px 1fr auto;
  align-items:baseline; gap:16px;
  padding:10px 16px; border-bottom:1px solid var(--line);
}
.gl-row:last-child{ border-bottom:0; }
.gl-row.me{ background:var(--accent-dim); }
.gl-rank{
  text-align:right;
  font-family:var(--mono); font-size:12px; color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.gl-row.me .gl-rank, .gl-row.me .gl-games{ color:var(--accent); }
.gl-name{
  min-width:0;
  font-size:13px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gl-you{
  font-family:var(--mono); font-size:10px; color:var(--accent);
  margin-left:7px; letter-spacing:0.04em;
}
.gl-games{
  text-align:center;
  font-family:var(--mono); font-size:11px; color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.gl-pts{
  flex:none; min-width:38px; text-align:right;
  font-family:var(--mono); font-size:13px; font-weight:500; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.gl-row.gl-gap{ display:block; text-align:center; padding:4px; color:var(--text-3); }
.gl-empty{
  padding:14px; text-align:center;
  font-size:12.5px; color:var(--text-3); line-height:1.5;
}
.gl-note{
  padding:10px 14px; border-bottom:1px solid var(--line);
  font-size:11.5px; color:var(--text-3); line-height:1.5;
}
.gl-colhead span{
  font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--text-3);
}
.gl-medals{
  text-align:right;
  font-size:13px; letter-spacing:0.04em; white-space:nowrap;
}
.gl-medals.none{
  font-family:var(--mono); font-size:11px; color:var(--text-3); letter-spacing:0.02em;
}
.gl-colhead .gl-medals{ white-space:nowrap; }

footer{margin-top:38px;}
footer p{
  font-family:var(--mono); font-size:11px; color:var(--text-3);
  letter-spacing:0.02em; line-height:1.8;
}

/* ---- Full-screen in-place game player ---- */
.player{
  position:fixed; inset:0; z-index:1000;
  background:var(--bg);
  transform:translateY(100%);
  transition:transform 0.30s cubic-bezier(0.22,0.61,0.36,1);
  visibility:hidden;
  display:flex; flex-direction:column;
}
.player.open{ transform:translateY(0); visibility:visible; }
.player-bar{
  flex:0 0 auto; box-sizing:content-box;
  height:38px; padding-top:env(safe-area-inset-top, 0px);
  padding-left:max(env(safe-area-inset-left, 0px), 8px);
  padding-right:max(env(safe-area-inset-right, 0px), 8px);
  display:flex; align-items:center;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.player-back{
  display:inline-flex; align-items:center; gap:5px;
  height:38px; padding:0 12px 0 6px;
  background:transparent; border:0; border-radius:7px;
  outline:none; -webkit-tap-highlight-color:transparent;
  color:var(--text-2); cursor:pointer;
  font-family:var(--mono); font-size:13px; font-weight:500;
  letter-spacing:-0.01em;
}
.player-back .b-dim{ color:var(--text-3); }
.player-back:hover{ color:var(--text); }
.player-back:active{ transform:scale(0.98); }
.player-back svg{ width:18px; height:18px; flex:0 0 auto; }
.player-open{
  flex:0 0 auto; margin-left:auto;
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:7px; color:var(--text-3);
  outline:none; -webkit-tap-highlight-color:transparent;
  transition:color 0.15s ease;
}
.player-open:hover{ color:var(--text); }
.player-open:active{ transform:scale(0.92); }
.player-open svg{ width:18px; height:18px; }
.player-body{ position:relative; flex:1 1 auto; min-height:0; }
.player-body iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block; background:var(--bg);
}
.player-loading{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3); font-family:var(--mono); font-size:12px;
  letter-spacing:0.05em;
  pointer-events:none; opacity:1; transition:opacity 0.2s ease;
}
.player.loaded .player-loading{ opacity:0; }
body.playing{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .player{ transition:none; }
  .player-back:active, .player-open:active{ transform:none; }
  a.game:hover .garrow{ transform:none; }
}