:root {
  --page: 1680px; /* profile page width */
  --bg: #0d0613;
  --bg-2: #150a1e;
  --card: #1b0f25;
  --card-border: #2c1a3a;
  --tile: #2a1638;
  --tile-hover: #331b44;
  --text: #f4ecfb;
  --muted: #b9a6c9;
  --dim: #7d6a8e;
  --accent: #b05ce6;
  --accent-2: #8b3fc4;
  --gold: #e3a92b;
  --gold-dark: #9c6a10;
  --good: #58d68d;
  --bad: #ff6b81;
  --radius: 14px;
  --radius-sm: 9px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Never wider than the screen (phones otherwise zoom out and things shift). */
html, body { max-width: 100%; overflow-x: clip; }
/* Don't let phones resize text by themselves when rotated. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); }
button { font: inherit; color: inherit; }
main { flex: 1; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  /* Three columns with equal outer ones, so the search box is always centred on the page. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px) minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 12px 24px;
  background: rgba(13, 6, 19, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--card-border);
}
.brand {
  font-weight: 700; font-size: 22px; letter-spacing: 1px;
  color: var(--gold); text-decoration: none;
  text-shadow: 0 2px 0 var(--gold-dark);
}
.brand span { color: var(--text); text-shadow: none; margin-left: 4px; font-size: 14px; letter-spacing: 3px; }
.brand img { display: block; height: 36px; width: auto; }
.brand { justify-self: start; }
.topsearch { width: 100%; }
.topnav { justify-self: end; display: flex; gap: 4px; white-space: nowrap; }
.topsearch input, .search-big input {
  width: 100%;
  background: var(--card); color: var(--text);
  border: 1px solid var(--card-border); border-radius: 999px;
  padding: 9px 16px; font: inherit; outline: none;
}
.topsearch input:focus, .search-big input:focus { border-color: var(--accent); }
.link-btn {
  background: none; border: 0; cursor: pointer; color: var(--muted); text-decoration: none;
  font-weight: 700; padding: 6px 8px; border-radius: 8px;
}
.link-btn:hover { color: var(--text); background: var(--card); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-2); color: #fff; border: 0; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 14px;
}
.btn:hover { background: var(--accent); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn.ghost { background: rgba(255,255,255,.08); }
.btn.ghost:hover { background: rgba(255,255,255,.16); }

/* ---------- home ---------- */
.home {
  max-width: 720px; margin: 0 auto; padding: 96px 16px 48px; text-align: center;
}
.home h1 { font-size: clamp(34px, 6vw, 56px); margin: 0 0 8px; }
/* Bright yellow-to-orange gold, like the Hive logo. */
.home h1 span {
  background: linear-gradient(180deg, #ffef5a 0%, #ffd21f 50%, #ffa90a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home p.lead { color: var(--muted); margin: 0 0 32px; }
.search-big { display: flex; gap: 10px; }
.search-big input { padding: 14px 22px; font-size: 18px; }
.search-big .btn { padding: 0 24px; font-size: 16px; }
.chip {
  background: var(--card); border: 1px solid var(--card-border); color: var(--text);
  padding: 6px 14px; border-radius: 999px; text-decoration: none; font-size: 14px;
}
.chip:hover { border-color: var(--accent); }
.home-import {
  margin-top: 48px; padding: 24px; border: 2px dashed var(--card-border); border-radius: var(--radius);
  color: var(--muted);
}

/* Home: a wall of Hive map pictures drifting behind the heading, fading into the page. */
#app { position: relative; }
.home { position: relative; z-index: 1; }
.home-wall {
  position: absolute; top: 0; left: 0; right: 0; height: 560px; overflow: hidden; z-index: 0; pointer-events: none;
  display: flex; flex-direction: column; gap: 12px; padding-top: 24px; opacity: .32;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%); mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
}
.wall-row { overflow: hidden; }
.wall-track { display: flex; gap: 12px; width: max-content; animation: wall-scroll calc(90s / var(--anim-speed, 1)) linear infinite; }
.wall-row:nth-child(2) .wall-track { animation-direction: reverse; animation-duration: calc(110s / var(--anim-speed, 1)); }
.wall-track img { height: 210px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; filter: saturate(1.1); }
@keyframes wall-scroll { to { transform: translateX(-50%); } }
.home h1 { text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.home p.lead { text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.home-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; text-align: left; }
/* Shortcut cards: map picture, dark fade, title + one line, arrow that nudges on hover. */
.home-feature {
  position: relative; display: block; height: 112px; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, var(--accent-2), var(--card)); border: 1px solid var(--card-border);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.hf-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.home-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,6,19,.1) 0%, rgba(13,6,19,.9) 100%); }
.hf-body { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.hf-body b { font-size: 18px; text-shadow: 0 2px 8px rgba(0,0,0,.7); display: flex; align-items: center; gap: 6px; }
.hf-text { color: #d9cfe6; font-size: 13px; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.hf-arrow { color: var(--gold); transition: transform .2s; }
.home-feature:hover { transform: translateY(-3px); border-color: var(--accent-2); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.home-feature:hover .hf-pic { transform: scale(1.06); }
.home-feature:hover .hf-arrow { transform: translateX(4px); }
@media (max-width: 640px) { .home-features { grid-template-columns: minmax(0, 1fr); } .wall-track img { height: 140px; } }

/* ---------- animations (Settings: Normal / Fast / Off) ---------- */
/* --anim is the duration multiplier: 1 normal, .45 fast. "Off" removes them all. */
:root { --anim: 1; --anim-speed: 1; }
html[data-anim="fast"] { --anim: .45; --anim-speed: 2.2; }
html[data-anim="off"] *, html[data-anim="off"] *::before, html[data-anim="off"] *::after { animation: none !important; transition: none !important; }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes reveal { from { opacity: 0; transform: translateY(-6px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.96) translateY(6px); } }
/* Opening a page: the page fades up, then its cards one after another (--n set by app.js). */
/* (--elapsed: a redraw part-way through continues the animation rather than restarting it - see util.js.) */
#app.page-enter > * { animation: page-in calc(.35s * var(--anim)) ease-out both; animation-delay: calc(0ms - var(--page-elapsed, 0ms)); }
#app.page-enter :is(.card, .game-tile, .map-card, .home-feature, .hero-card) {
  animation: card-in calc(.45s * var(--anim)) cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--n, 0) * 35ms * var(--anim) - var(--elapsed, 0ms));
}
/* Opening "All stats", "Unlocks" and other dropdowns. */
details[open] > :not(summary) { animation: reveal calc(.28s * var(--anim)) ease-out; }
/* "Show all" etc: what just appeared slides in (app.js adds .reveal for a moment). */
.reveal :is(.map-card, tbody tr, .icon-cell, li, .card, .game-tile) { animation: reveal calc(.3s * var(--anim)) ease-out both; }
/* Leaderboard row details, the settings panel, tooltips. */
.lb-details td { animation: reveal calc(.25s * var(--anim)) ease-out; }
.settings-panel:not([hidden]) { animation: pop-in calc(.2s * var(--anim)) ease-out; transform-origin: bottom right; }

.home-link {
  display: block; margin-top: 24px; padding: 16px 20px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--card-border); color: var(--text);
  text-decoration: none; font-size: 18px; font-weight: 700;
}
.home-link span { display: block; color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 2px; }
.home-link:hover { border-color: var(--gold); }

/* leaderboards */
.lb-page { max-width: 1200px; margin: 0 auto; padding: 40px 16px; }
.lb-page h1 { margin: 0 0 16px; font-size: clamp(30px, 5vw, 44px); }
.lb-games { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.lb-games .chip.active { border-color: var(--accent); background: var(--accent-2); }
.lb-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lb-controls h2 { margin: 0 auto 0 0; font-size: 26px; }
.lb-controls .toggle a { padding: 7px 16px; border-radius: 999px; color: var(--muted); font-weight: 700; text-decoration: none; }
.lb-controls .toggle a.active { background: rgba(255,255,255,.18); color: var(--text); }
.lb-controls select { background: var(--card); color: var(--text); border: 1px solid var(--card-border); border-radius: 999px; padding: 8px 14px; font: inherit; }
/* ---------- Games page (gameinfo.js) ---------- */
.game-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.game-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 22px 18px;
  text-decoration: none; color: var(--text); font-size: 18px; transition: border-color .15s, transform .15s; }
.game-tile:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.gi-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.gi-head h2 { margin: 0 8px 0 0; font-size: 26px; }
.gi-filter { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; cursor: pointer; }
.gi-filter input { accent-color: var(--accent-2); }
.gi-table th { cursor: default; }
.gi-table td { vertical-align: top; }
.gi-table .lv-num { font-weight: 700; width: 56px; text-align: center; }
.gi-table th.num, .gi-table td.num { text-align: right; width: 110px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gi-table td.unlocks { white-space: normal; }
/* (The list is inside the cell, so the cell stays a normal table cell and row lines line up.) */
.gi-table .u-list { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.unlock.gone { opacity: .45; }
.gi-table tr.empty td { padding-top: 6px; padding-bottom: 6px; color: var(--dim); }
/* Level numbers are in their in-game colour; ones with no unlocks are a little faded. */
.gi-table tr.empty .lv-num { opacity: .6; }
.unlock { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.unlock > img, .unlock > .no-icon { width: 32px; height: 32px; flex: none; object-fit: contain; image-rendering: pixelated; border-radius: 6px; }
.unlock .no-icon { background: rgba(255,255,255,.05); }
.unlock .u-text { display: flex; flex-direction: column; line-height: 1.2; }
.unlock .u-name { font-weight: 700; }
.unlock small { color: var(--dim); font-size: 11px; }
.gi-maps-title { margin: 32px 0 4px; font-size: 26px; display: flex; align-items: center; gap: 8px; min-height: 30px; }
.gi-variant { margin: 18px 0 10px; font-size: 18px; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.map-card { margin: 0; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; }
.map-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tile); }
.map-card img.missing { visibility: hidden; }
.map-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; font-size: 14px; }
.map-card figcaption .tag { white-space: nowrap; flex: none; }
/* Game page: as wide as profiles, maps (left) and levels (right) side by side; stacked on narrower screens. */
.games-page.wide { max-width: var(--page); padding: 28px 24px 40px; }
.games-page.wide h1 { margin-bottom: 8px; }
.gi-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
/* First few levels / maps, then "Show all". */
.gi-hidden { display: none !important; }
.show-more[hidden] { display: none !important; }
/* Limited-time modes: tile with the event's top reward, and the year picker. */
.gi-ltm-title { margin: 36px 0 4px; font-size: 26px; display: flex; align-items: center; gap: 10px; }
.ltm-tile { background: radial-gradient(circle at 75% 40%, #4a2a6e, #1b0f25 70%); }
.lb-games .ltm-chip { display: inline-flex; align-items: center; gap: 6px; }
.lb-games .ltm-chip .tag { font-size: 9px; padding: 2px 5px; }
.lb-games .chip-lvl { font-size: 11px; font-weight: 700; }
/* Level achievements under a game's levels. */
.gi-ach-head { margin-top: 22px; }
.gi-ach-head a.tag { text-decoration: none; margin-left: auto; }
.gi-ach { padding: 6px 16px; }
.ach-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); flex-wrap: wrap; }
.ach-row:last-child { border-bottom: 0; }
.ach-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ach-who a { color: var(--text); font-weight: 700; text-decoration: none; }
.ach-who a:hover { color: var(--accent); }
.ach-unknown { color: var(--dim); }
/* Button to the game's leaderboard, under the achievements. */
.gi-lb-btn { display: flex; justify-content: center; width: 100%; box-sizing: border-box; margin-top: 12px; padding: 12px; text-decoration: none; }
.gi-ach-wrap { margin-top: 22px; }
/* How to earn XP (under the levels). */
.gi-xp-head { margin-top: 22px; }
/* A grid of small tiles: what you do, and the XP it gives in a green pill. */
.gi-xp { padding: 14px 16px 16px; }
.xp-sub { margin: 14px 0 8px; font-size: 14px; color: var(--text); }
.xp-sub:first-child { margin-top: 0; }
.xp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.xp-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 10px 12px;
  background: var(--tile); border: 1px solid var(--card-border); border-radius: 10px; font-size: 13px; line-height: 1.35;
}
.xp-tile b {
  align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-size: 12px; white-space: nowrap;
  background: rgba(85, 255, 85, .12); color: #7ef08a; font-variant-numeric: tabular-nums;
}
.xp-label { margin: 10px 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.xp-note { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--accent-2); background: rgba(255,255,255,.03);
  border-radius: 0 8px 8px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ltm-tile .ltm-pic { position: absolute; right: 8%; top: 8%; height: 62%; width: auto; image-rendering: pixelated;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); transition: transform .3s; }
.ltm-tile:hover .ltm-pic { transform: scale(1.08) rotate(-3deg); }
/* Year picker: compact chips, year big + season small. */
.gi-years { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 18px; }
.year-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: 6px 12px;
  border-radius: 10px; background: var(--card); border: 1px solid var(--card-border); color: var(--muted);
  text-decoration: none; line-height: 1.15; transition: border-color .15s, color .15s;
}
.year-chip b { font-size: 16px; }
.year-chip small { font-size: 10px; font-weight: 600; opacity: .8; white-space: nowrap; }
.year-chip:hover { color: var(--text); border-color: var(--accent-2); }
.year-chip.active { background: var(--accent-2); border-color: var(--accent); color: #fff; }
.ltm-card { max-width: 900px; }
.gi-levels .show-more, .gi-group .show-more { display: block; margin: 10px auto 14px; }
.gi-group { margin-bottom: 8px; }
.gi-table .qp-reward .u-name { color: #7fd3ff; }
/* Games landing: picture cards. */
.game-tiles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 14px !important; }
.game-tile {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; padding: 0 !important;
  background: linear-gradient(135deg, var(--accent-2), var(--card)); border: 1px solid var(--card-border); text-decoration: none; color: var(--text);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.game-tile .gt-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.game-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,6,19,0) 35%, rgba(13,6,19,.92) 100%); }
.game-tile:hover { transform: translateY(-3px); border-color: var(--accent-2); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.game-tile:hover .gt-cover { transform: scale(1.05); }
.gt-body { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.gt-body b { font-size: 22px; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
/* Tags stay on one row (smaller, no letter spacing) instead of wrapping. */
.gt-tags { display: flex; flex-wrap: nowrap; gap: 5px; overflow: hidden; }
.gt-tags .tag { white-space: nowrap; flex: none; font-size: 10px; padding: 3px 6px; letter-spacing: 0; }
.gt-tags .tag:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Discontinued / LTM: a badge in the tile's top-right corner. */
.game-tile .gt-badge { position: absolute; top: 10px; right: 10px; z-index: 1; font-size: 10px; padding: 3px 7px; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.gt-tags .tag.level { background: rgba(13,6,19,.75); }
.gi-layout .gi-maps-title { margin-top: 8px; }
.gi-layout .gi-head { margin-top: 8px; }
.gi-layout .map-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gi-layout .map-card figcaption { padding: 6px 8px; font-size: 13px; }
/* Tighter levels table. */
.gi-table th, .gi-table td { padding: 7px 10px; }
.gi-table th.num, .gi-table td.num { width: 84px; }
.gi-table .lv-num { width: 44px; }

.unlock > img { width: 26px; height: 26px; }
.gi-max .lvl { gap: 4px; }
/* Prestige rewards, under the levels. */
.gi-table tr.gi-section td { background: var(--tile); color: var(--gold); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; padding: 9px 12px; }
.gi-table tr.prestige-row .lv-num .glyph { height: 22px; vertical-align: middle; }
.gi-table tr.prestige-row td.num { text-align: left; color: var(--text); font-weight: 700; }
.unlock .u-name .glyph { height: 1.2em; vertical-align: -2px; margin-left: 3px; }
@media (max-width: 1100px) { .gi-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .games-page.wide { padding: 20px 16px 32px; }
  .gi-table th.num, .gi-table td.num { width: auto; }
  .map-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

.lb-card { padding: 0; overflow: hidden; }
.lb-scroll { overflow-x: auto; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.lb-table th, .lb-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.05); }
.lb-table th { position: sticky; top: 0; background: var(--tile); color: var(--muted); font-size: 12px; cursor: pointer; user-select: none; }
.lb-table th.sorted { color: var(--text); }
.lb-table th:hover { color: var(--text); }
.lb-table td.rank, .lb-table th.rank { text-align: center; color: var(--dim); width: 44px; }
.lb-table td.player, .lb-table th.player { text-align: left; position: sticky; left: 0; background: var(--card); }
.lb-table th.player { background: var(--tile); cursor: default; }
.lb-table td.player a { color: var(--text); text-decoration: none; font-weight: 700; }
.lb-table td.player a:hover { color: var(--accent); }
.lb-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.lb-table tbody tr:nth-child(1) td.rank { color: var(--gold); font-weight: 700; }
.lb-table tbody tr:nth-child(2) td.rank { color: #d4d4d4; font-weight: 700; }
.lb-table tbody tr:nth-child(3) td.rank { color: #d08a4e; font-weight: 700; }

.lb-row { cursor: pointer; }
.lb-table .lvl { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.lb-row.open td { background: rgba(176,92,230,.12); }
.lb-details td { text-align: left; padding: 6px 16px 14px; background: rgba(176,92,230,.06); white-space: normal; }
.lb-details .statlist { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 0; }
.lb-top { position: relative; margin-bottom: 12px; }
.lb-tools { display: flex; justify-content: flex-end; }
.lb-top .podium + .lb-tools { position: absolute; right: 0; bottom: 0; }
.lb-top .podium { margin-bottom: 0; }
@media (max-width: 700px) { .lb-top .podium + .lb-tools { position: static; margin-top: 12px; } }
.lb-picker { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.lb-picker label { cursor: pointer; display: flex; gap: 6px; align-items: center; }

/* top 3 podium */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; max-width: 640px; margin: 8px auto 24px; }
.podium-spot { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--text); gap: 4px; }
.podium-name { font-weight: 700; font-size: 16px; text-align: center; overflow-wrap: anywhere; }
.podium-spot.p1 .podium-name { font-size: 20px; }
.podium-stat { color: var(--muted); font-size: 13px; }
.podium-stat b { color: var(--text); }
.podium-block {
  width: 100%; display: grid; place-items: center; border-radius: 12px 12px 4px 4px;
  font-size: 34px; font-weight: 700; color: rgba(0,0,0,.45); margin-top: 6px;
}
.podium-spot.p1 .podium-block { height: 130px; background: linear-gradient(180deg, #ffd36a, var(--gold-dark)); }
.podium-spot.p2 .podium-block { height: 95px; background: linear-gradient(180deg, #eef0f4, #8e939c); }
.podium-spot.p3 .podium-block { height: 70px; background: linear-gradient(180deg, #e9a46a, #8a4f22); }
.podium-spot:hover .podium-name { color: var(--accent); }

/* Diamond blue, for "First to ..." from the Level achievements list. */
.tag.first { background: linear-gradient(90deg, #4fe3f0, #2fa8d8); color: #062a3a; text-decoration: none; text-transform: none;
  display: inline-flex; align-items: center; gap: 4px; }

.saved-panel { margin-top: 32px; text-align: left; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px; }
.saved-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.saved-head h2 { margin: 0; font-size: 22px; }
.saved-list { list-style: none; margin: 8px 0 0; padding: 0; }
.saved-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14px; }
.saved-list li:last-child { border-bottom: 0; }
.saved-list a { color: var(--text); text-decoration: none; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.saved-list a:hover { color: var(--accent); }
.saved-list .when, .saved-list .size { color: var(--dim); font-size: 12px; }
.saved-list .link-btn { color: var(--bad); }
@media (max-width: 560px) { .saved-list .when { display: none; } }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 72px 24px 56px;
  background:
    radial-gradient(1200px 400px at 70% 0%, rgba(176, 92, 230, .35), transparent 70%),
    linear-gradient(180deg, #3a1260 0%, #24093d 55%, var(--bg) 100%);
  overflow: hidden;
}
.hero::before {
  /* blocky pixel texture so it feels minecrafty without hotlinking art */
  content: ""; position: absolute; inset: 0; opacity: .12;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}
.hero-inner {
  position: relative; max-width: var(--page); margin: 0 auto;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
/* Hive's avatar images already include their frame. */
.avatar-frame { width: 128px; height: 128px; flex: none; filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.avatar-frame img, .avatar-frame .avatar-fallback {
  width: 100%; height: 100%; display: block; image-rendering: pixelated; object-fit: contain;
}
.avatar-frame .avatar-fallback { background: #1d3b44; border-radius: 12px; }
.avatar-fallback { display: grid; place-items: center; font-size: 48px; }
.hero-name { min-width: 0; }
.rank-badge {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  background: var(--accent); color: #fff;
}
.hero-name h1 {
  margin: 4px 0 2px; font-size: clamp(36px, 7vw, 64px); line-height: 1.05;
  word-break: break-word; text-shadow: 0 3px 12px rgba(0,0,0,.4);
}
.hero-title { font-size: 20px; min-height: 1.2em; }
.hero-cards { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-card {
  background: rgba(13, 6, 19, .7); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius); padding: 14px 20px; min-width: 120px;
}
.hero-card b { display: block; font-size: 26px; }
.hero-card span { color: var(--muted); font-size: 13px; }
.hero-card.swap { cursor: pointer; user-select: none; }
/* All views share one grid cell, so the card is sized by its widest view and never resizes on swap. */
.swap-views { display: grid; }
.swap-view { grid-area: 1 / 1; }
.swap-view:not(.active) { visibility: hidden; }
.hero-card .of-max { font-size: 15px; color: var(--muted); font-weight: 600; }
/* Everything owned / every level maxed: gold, like the Max Prestige tag. */
.hero-card.complete { background: linear-gradient(90deg, var(--gold), #ffcf5a); border-color: #ffd36a; color: #3a2400; }
.hero-card.complete span, .hero-card.complete .of-max { color: #5a3a00; }
.hero-actions {
  position: relative; max-width: var(--page); margin: 24px auto 0;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.hero-meta { color: var(--muted); font-size: 13px; margin-left: auto; }

/* ---------- snapshot banner ---------- */
.snapshot-banner {
  background: linear-gradient(90deg, #5a3b05, #3a2604);
  border-bottom: 1px solid var(--gold-dark);
  color: #ffe2a1;
  padding: 10px 24px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-size: 14px;
}
.snapshot-banner .btn { padding: 6px 12px; font-size: 13px; }
.snapshot-banner .spacer { flex: 1; }

/* ---------- layout ---------- */
.profile-body {
  max-width: var(--page); margin: 0 auto; padding: 0 24px 48px;
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 32px;
}
/* Game cards side by side when there's room (2 columns on a wide screen), one column otherwise. */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 16px; align-items: start; }
.games-grid > .card { margin-bottom: 0; }
.games-grid > :not(.card) { grid-column: 1 / -1; }
.games-grid > .show-extras { justify-self: center; margin: 8px 0; }
/* Columns (app.js): cards alternate left/right in order, each column stacked with a 16px gap. */
.games-grid.cols { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.games-grid.cols > :not(.masonry-cols) { align-self: stretch; }
.games-grid.cols > .show-extras { align-self: center; margin: 0; }
.masonry-cols { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 16px; align-items: start; }
.masonry-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.masonry-col > .card { margin: 0; }
.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 8px 0 16px;
}
.section-head h2 { margin: 0; font-size: 32px; }
.section-head { flex-wrap: wrap; }
.toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.toggle {
  display: inline-flex; background: var(--card); border-radius: 999px; padding: 4px;
  border: 1px solid var(--card-border);
}
.toggle button {
  background: none; border: 0; padding: 7px 16px; border-radius: 999px; cursor: pointer;
  color: var(--muted); font-weight: 700;
}
.toggle button.active { background: rgba(255,255,255,.18); color: var(--text); }

.card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 18px 18px 16px; margin-bottom: 16px;
}
.card h3 {
  margin: 0 0 12px; font-size: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 6px; background: var(--accent); color: #fff;
}
.tag.level { background: rgba(255,255,255,.1); color: var(--text); }
.tag.prestige { background: linear-gradient(90deg, var(--gold), #ffcf5a); color: #3a2400; }
.tag.discontinued { background: #5a2330; color: #ffb3c0; }
.tag.ltm { background: #1f3f5a; color: #9fd4ff; cursor: help; }
.tag.dates { background: rgba(255,255,255,.1); color: var(--muted); text-transform: none; }
.tag.max-level { background: linear-gradient(90deg, #9ea3ad, #e6e9ef); color: #2a2d33; }
/* Leaderboard top 3 on game cards: gold, silver, bronze. */
.tag.medal { text-decoration: none; }
.tag.medal-1 { background: linear-gradient(90deg, #f5b301, #ffe066); color: #3a2400; }
.tag.medal-2 { background: linear-gradient(90deg, #9ea3ad, #f1f3f6); color: #2a2d33; }
.tag.medal-3 { background: linear-gradient(90deg, #a5602b, #e3a36b); color: #2b1505; }
.tag.level { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.tag .glyph { height: 1.35em; margin: 0; vertical-align: middle; }
.tag.count { background: var(--accent-2); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile {
  background: var(--tile); border-radius: var(--radius-sm); padding: 10px 12px;
}
.tile b { display: block; font-size: 24px; line-height: 1.2; }
.tile span { color: var(--muted); font-size: 13px; }
.delta { font-size: 12px; font-weight: 700; margin-left: 6px; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }

.xpbar { margin-top: 12px; }
.xpbar .bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.xpbar .fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.xpbar .lbl { display: flex; justify-content: space-between; color: var(--dim); font-size: 12px; margin-top: 4px; }

details.more { margin-top: 12px; }
details.more summary {
  cursor: pointer; color: var(--muted); font-size: 13px; list-style: none; user-select: none;
}
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "▸ "; }
details.more[open] summary::before { content: "▾ "; }
.statlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin-top: 10px; }
.statlist div {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14px;
}
.statlist div span { color: var(--muted); }
.statlist .derived span { color: #d6a6ff; }
.statlist div[title] { cursor: help; }
.statlist .full { grid-column: 1 / -1; }
.statlist div[title] span { text-decoration: underline dotted rgba(255,255,255,.25); text-underline-offset: 3px; }
.tag.level { text-transform: none; }

.empty-note { color: var(--dim); font-size: 14px; padding: 8px 0; }
.show-extras { display: flex; margin: 4px auto 16px; }
.xpbar .lbl + .lbl { margin-top: 2px; }

/* ---------- locker ---------- */
.locker .card h3 { font-size: 22px; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
/* No frame of our own: Hive's icon images already include their frame. */
.icon-cell { aspect-ratio: 1; position: relative; }
.icon-cell img { width: 100%; height: 100%; display: block; image-rendering: pixelated; object-fit: contain; }

/* Player IDs, just above the page footer on profiles. */
.ids-footer {
  max-width: var(--page); margin: 0 auto; padding: 0 24px 16px;
  display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; color: var(--dim);
}
.ids-footer div { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.ids-footer span { text-transform: uppercase; letter-spacing: .5px; font-size: 11px; }
.ids-footer code { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; user-select: all; }
.ids-footer b { color: var(--muted); font-weight: 600; }
.ids-footer .rate { cursor: help; }
.icon-missing {
  width: 100%; height: 100%; display: grid; place-items: center; text-align: center;
  border-radius: 7px; background: #241433; font-size: 9px; line-height: 1.1; padding: 3px;
  color: var(--muted); overflow: hidden; word-break: break-word;
}
.icon-cell.equipped::after {
  content: "✓"; position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--good); color: #062; font-size: 12px; font-weight: 700;
}
.name-list { list-style: none; margin: 0; padding: 0; }
.name-list li {
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14px;
  overflow-wrap: anywhere;
}
.name-list li:last-child { border-bottom: 0; }
.name-list li.equipped::after { content: " (equipped)"; color: var(--dim); font-size: 12px; }
.locker-card.collapsed .extra { display: none; }

/* locker search */
.locker-search .search-row { display: flex; gap: 8px; }
.locker-search input, .locker-search select {
  background: var(--tile); color: var(--text); border: 1px solid var(--card-border);
  border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 14px; outline: none;
}
.locker-search input { flex: 1; min-width: 0; }
.locker-search input:focus, .locker-search select:focus { border-color: var(--accent); }
.locker-search #searchResults:empty { display: none; }
.search-results { list-style: none; margin: 4px 0 0; padding: 0; max-height: 480px; overflow-y: auto; }
.search-results li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.search-results li > img, .search-results .no-thumb { width: 40px; height: 40px; flex: none; object-fit: contain; image-rendering: pixelated; }
.search-results .nm { flex: 1; min-width: 0; font-size: 14px; }
.search-results small { display: block; color: var(--dim); font-size: 11px; margin-top: 2px; }
.search-results .own { font-size: 12px; font-weight: 700; white-space: nowrap; }
.search-results .own.yes { color: var(--good); }
.search-results .own.no { color: var(--bad); }

/* old event games */
/* hub hunts (under the locker) */
.hub-events-head { margin-top: 28px; display: flex; align-items: center; gap: 10px; }
.hub-events.collapsed .hub-event.extra { display: none; }
.hub-event h3 { font-size: 18px; }
.hub-event .tag.count.all, .hub-events-head .tag.count.all, .locker-card .tag.count.all { background: linear-gradient(90deg, var(--gold), #ffcf5a); color: #3a2400; }
.hub-event .legacy-list li { padding: 4px 0; }
.hub-event .legacy-list li > img, .hub-event .legacy-list .no-thumb { width: 32px; height: 32px; }
.hub-events .show-more { display: block; margin: 0 auto 16px; }
.hub-event .type { white-space: nowrap; }
/* Name wraps onto more lines if it's long; the count badge stays on the right. */
.hub-event h3 { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.hub-event h3 .ev-name { min-width: 0; overflow-wrap: anywhere; }
.hub-event h3 .tag { flex: none; }
/* Hub hunts: one list, hunt name on the left, extra rewards from the same hunt under the main one. */
.hub-hunts.collapsed .legacy-list li.extra { display: none; }
.hub-hunts .show-more { display: block; margin: 8px auto 0; }
.hub-hunts .lv { flex: none; width: 74px; font-size: 11px; line-height: 1.25; color: var(--muted); }
.hub-hunts .nm .bundle { display: block; font-size: 12px; color: var(--muted); }
.hub-hunts .nm .bundle.locked { opacity: .5; }
.quest-costume { margin-top: 16px; }
/* Keep "Quest Costume" in one piece; the QP total drops to the next line if there isn't room. */
.quest-costume h3 { flex-wrap: wrap; }
.quest-costume h3 .ev-name { white-space: nowrap; }
.quest-costume .type .qp { color: #7fd3ff; }
.hub-event h3 .qp-total { flex: none; }
.qp-total { margin-left: auto; font-size: 12px; font-weight: 700; color: #7fd3ff; cursor: help; white-space: nowrap; }
.hub-hunts .nm .hunt { display: block; font-size: 11px; color: var(--muted); opacity: .75; }

.legacy { position: relative; }
/* Orange "!" (top right) on event games: their levels are estimates; hover for why. "!!" = an extra caveat. */
.estimate-note {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; cursor: help; z-index: 1;
  background: #ff8a1f; color: #3a1a00; font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.estimate-note.double { font-size: 11px; letter-spacing: -1px; }
.assume-note {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; cursor: help;
  background: var(--gold); color: #3a2400; font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.legacy-list li { display: flex; gap: 12px; align-items: center; padding: 6px 0; }
/* Not unlocked: fully black-and-white (coloured title text, glyphs and icons) and faded. */
.legacy-list li.locked { opacity: .35; filter: grayscale(1); }
.legacy-list .lv { color: var(--dim); font-size: 12px; min-width: 38px; display: inline-flex; align-items: center; gap: 2px; }
.legacy-list li > img, .legacy-list .no-thumb { width: 40px; height: 40px; flex: none; image-rendering: pixelated; object-fit: contain; }
.legacy-list .nm { flex: 1; min-width: 0; }
.legacy-list .type { color: var(--dim); font-size: 12px; }
.show-more {
  margin-top: 10px; background: none; border: 0; cursor: pointer; color: var(--accent);
  font-weight: 700; padding: 0;
}

/* ---------- misc states ---------- */
.state { max-width: 640px; margin: 80px auto; text-align: center; padding: 0 16px; color: var(--muted); }
.state h2 { color: var(--text); }
.spinner {
  width: 42px; height: 42px; margin: 0 auto 16px; border-radius: 50%;
  border: 4px solid var(--card-border); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Footer on every page: rate limit + Settings, the Hive API warning, then the small print. */
.footer { color: var(--dim); font-size: 12px; padding: 0 24px 28px; }
.footer-inner {
  max-width: var(--page); margin: 0 auto; padding-top: 18px; border-top: 1px solid var(--card-border);
  display: grid; gap: 10px;
}
.footer-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-legal { margin: 0; flex: 1 1 300px; line-height: 1.5; }
.footer a { color: var(--muted); }

.drop-overlay {
  position: fixed; inset: 0; z-index: 50; display: none; place-items: center;
  background: rgba(13, 6, 19, .85); border: 3px dashed var(--accent);
  font-size: 24px;
}
.drop-overlay.show { display: grid; }

/* ---------- settings (footer button; the panel opens above it) ---------- */
.footer-btn {
  padding: 8px 14px; border-radius: 999px; cursor: pointer; flex: none;
  background: var(--card); color: var(--text); border: 1px solid var(--card-border);
  font: inherit; font-weight: 700; font-size: 13px;
}
.footer-btn:hover, .footer-btn[aria-expanded="true"] { border-color: var(--accent-2); }
.settings-panel {
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 70; margin: 0; text-align: left;
  width: min(340px, calc(100vw - 32px)); box-shadow: 0 12px 32px rgba(0,0,0,.55); font-size: 14px; color: var(--text);
}
.settings-panel[hidden] { display: none; }
.settings-panel h3 { font-size: 20px; margin-bottom: 8px; }
.settings-panel fieldset { border: 0; margin: 0; padding: 0; }
.settings-panel legend { color: var(--muted); font-size: 13px; font-weight: 700; margin-bottom: 8px; padding: 0; }
.settings-panel .opt {
  display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--card-border); margin-bottom: 8px;
}
.settings-panel .opt:has(input:checked) { border-color: var(--accent-2); background: rgba(255,255,255,.04); }
.settings-panel .opt input { margin: 0; accent-color: var(--accent-2); }
.settings-panel .opt b { display: block; }
.settings-panel .opt small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.settings-panel .order-set, .settings-panel .save-set, .settings-panel .anim-set, .settings-panel .me-set { margin-top: 10px; }
/* "Your profile": gamertag box + Save (Settings), and the first-time pop-up. */
.me-row { display: flex; gap: 6px; }
.me-row input, .me-dialog input {
  flex: 1; min-width: 0; background: var(--tile); color: var(--text); border: 1px solid var(--card-border);
  border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 14px;
}
.me-row input:focus, .me-dialog input:focus { outline: none; border-color: var(--accent); }
.me-row .btn { padding: 6px 14px; font-size: 13px; }
.me-dialog { width: min(420px, calc(100vw - 32px)); color: var(--text); padding: 22px; margin: auto; } /* (centred) */
.me-dialog::backdrop { background: rgba(13, 6, 19, .7); backdrop-filter: blur(3px); }
.me-dialog[open] { animation: pop-in calc(.22s * var(--anim)) ease-out; }
.me-dialog h3 { margin: 0 0 8px; font-size: 22px; }
.me-dialog p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.me-dialog input { width: 100%; box-sizing: border-box; font-size: 16px; padding: 11px 14px; }
.me-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* Normal / Fast / Off segmented control. */
.seg { display: flex; background: var(--tile); border: 1px solid var(--card-border); border-radius: 10px; padding: 3px; gap: 3px; }
.seg label { flex: 1; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 6px 0; border-radius: 7px; color: var(--muted); font-weight: 700; font-size: 13px; transition: background .15s, color .15s; }
.seg input:checked + span { background: var(--accent-2); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--accent); }
.settings-panel .opt.off { opacity: .55; cursor: default; }
.settings-panel .opt .why { margin: 0 0 0 auto; white-space: nowrap; }
.order-list {
  list-style: none; margin: 0 0 8px; padding: 4px; max-height: 260px; overflow-y: auto; counter-reset: game;
  border: 1px solid var(--card-border); border-radius: 10px;
}
.order-list li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; counter-increment: game; }
.order-list li:hover { background: rgba(255,255,255,.04); }
.order-list li[draggable="true"] { cursor: grab; }
.order-list li.dragging { opacity: .4; }
/* Where the dragged game will land. */
.order-list li.drop-before { box-shadow: inset 0 2px 0 var(--accent-2); }
.order-list li.drop-after { box-shadow: inset 0 -2px 0 var(--accent-2); }
.order-list .grip { color: var(--dim); font-size: 14px; flex: none !important; }
.order-list li::before { content: counter(game) "."; color: var(--dim); font-size: 12px; min-width: 20px; }
.order-list li span { flex: 1; min-width: 0; }
.order-list button {
  width: 26px; height: 26px; border-radius: 6px; cursor: pointer; flex: none;
  background: var(--tile); color: var(--text); border: 1px solid var(--card-border); font: inherit; font-size: 13px;
}
.order-list button:hover:not([disabled]) { border-color: var(--accent-2); }
.order-list button[disabled] { opacity: .3; cursor: default; }
.order-reset { width: 100%; justify-content: center; padding: 8px; font-size: 13px; }
.order-reset[disabled] { opacity: .5; cursor: default; }
.settings-panel .note { color: var(--dim); font-size: 12px; margin: 4px 0 0; }

/* ---------- logo explosion (fx.js) ---------- */
/* Fuse: the logo swells and flashes white, like a creeper about to blow. */
@keyframes fx-fuse {
  0%, 50%, 100% { filter: brightness(1); }
  25%, 75% { filter: brightness(2.6) saturate(.2); }
}
.brand img.fx-fuse { animation: fx-fuse .21s steps(2) infinite; transform: scale(1.18); transition: transform .42s ease-in; }
.brand img.fx-gone { opacity: 0; transform: scale(1.4); }
@keyframes fx-back { from { transform: scale(0); } 70% { transform: scale(1.12); } to { transform: scale(1); } }
.brand img.fx-back { animation: fx-back .3s ease-out; }
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 200; }
@keyframes fx-shake {
  0%, 100% { transform: none; } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -3px); }
  60% { transform: translate(-3px, -2px); } 80% { transform: translate(2px, 3px); }
}
body.fx-shake #app, body.fx-shake .topbar { animation: fx-shake .32s linear; }

/* Styled tooltip (replaces the browser's title tooltip, see app.js). */
.tooltip {
  position: fixed; z-index: 100; max-width: 300px; pointer-events: none;
  padding: 8px 12px; border-radius: 10px;
  background: #2e1942; color: #fff; border: 1px solid var(--accent-2);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  font-size: 13px; font-weight: 600; line-height: 1.4; white-space: pre-line;
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.tooltip.show { opacity: 1; transform: none; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120px);
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px;
  padding: 12px 18px; z-index: 60; transition: transform .25s; max-width: calc(100% - 32px);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--bad); }

/* minecraft formatting */
.mc-l { font-weight: 700; }
.mc-o { font-style: italic; }
.glyph { height: 1.15em; width: auto; vertical-align: -0.22em; image-rendering: pixelated; margin: 0 .1em; }

/* Too narrow for the links to fit either side of a centred search: logo and links on top,
   search centred on its own row underneath. */
@media (max-width: 1080px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "brand nav" "search search"; row-gap: 10px; }
  .brand { grid-area: brand; }
  /* The links may wrap rather than push the page wider than the screen. */
  .topnav { grid-area: nav; min-width: 0; flex-wrap: wrap; justify-content: flex-end; white-space: normal; row-gap: 2px; }
  .topsearch { grid-area: search; justify-self: center; max-width: 560px; }
}

@media (max-width: 900px) {
  .profile-body { grid-template-columns: minmax(0, 1fr); }
  .hero-cards { margin-left: 0; }
}
@media (max-width: 560px) {
  /* On phones the bar scrolls away with the page instead of covering it. */
  .topbar { padding: 10px 16px; gap: 10px; position: static; }
  .brand img { height: 30px; }
  .topnav .link-btn { font-size: 13px; padding: 4px 6px; white-space: nowrap; }
  .hero { padding: 40px 16px 32px; }
  .avatar-frame { width: 96px; height: 96px; }
  .hero-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; }
  /* An odd last card (Total Level) takes the full row instead of half of it. */
  .hero-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hero-card { min-width: 0; padding: 10px 12px; }
  .hero-card b { font-size: 20px; }
  .hero-meta { margin-left: 0; }
  .profile-body { padding: 0 16px 32px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile b { font-size: 20px; }
  .statlist { grid-template-columns: minmax(0, 1fr); }
  .statlist .blank { display: none; }
  .ids-footer { padding: 0 16px 16px; }
  .footer { padding: 0 16px 24px; }
  .search-big { flex-direction: column; }
  .search-big .btn { padding: 12px; justify-content: center; }
}

/* ---------- leaderboards: picture-tile game picker + a big centred banner (same look as the Games page) ---------- */
.lb-page.games-page > h1, .lb-page.games-page > h1 + .empty-note { text-align: center; }
.lb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 16px 0 18px; }
.lb-tile { position: relative; height: 64px; border-radius: var(--radius-sm); overflow: hidden; background: var(--tile);
  border: 2px solid var(--card-border); display: flex; align-items: flex-end; padding: 6px 10px; text-decoration: none; color: var(--text);
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.lb-tile .gt-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; transition: transform .3s, opacity .2s; }
.lb-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,6,19,0) 15%, rgba(13,6,19,.92) 100%); }
.lb-tile b { position: relative; z-index: 1; min-width: 0; font-size: 14px; text-shadow: 0 2px 6px rgba(0,0,0,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-tile .gt-badge { position: absolute; top: 5px; right: 5px; z-index: 2; font-size: 8px; padding: 2px 5px; }
.lb-tile:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.lb-tile:hover .gt-cover { transform: scale(1.06); opacity: 1; }
.lb-tile.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(176,92,230,.3); }
.lb-tile.active .gt-cover { opacity: 1; }

.lb-banner { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(220px, 28vw, 300px); margin-bottom: 22px; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--card-border); background: var(--tile); }
.lb-banner .gt-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-banner::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(13,6,19,.55) 0%, rgba(13,6,19,.8) 75%), linear-gradient(180deg, rgba(13,6,19,0) 50%, rgba(13,6,19,.6) 100%); }
.lb-banner-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; width: 100%; padding: 28px 16px; }
.lb-banner h2 { margin: 0; font-size: clamp(32px, 6vw, 60px); line-height: 1.05; text-shadow: 0 4px 20px rgba(0,0,0,.7); overflow-wrap: anywhere; }
.lb-banner .gt-tags { flex-wrap: wrap; justify-content: center; overflow: visible; }
.lb-banner .gt-tags .tag { font-size: 12px; padding: 4px 9px; }
.lb-banner .gt-tags .tag.level { background: rgba(13,6,19,.75); }
.lb-banner a.tag { text-decoration: none; }
.lb-banner a.tag:hover { background: var(--accent-2); }
.lb-period { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.lb-seg { display: flex; gap: 3px; padding: 4px; border-radius: 12px; background: rgba(13,6,19,.8); border: 1px solid var(--card-border); backdrop-filter: blur(6px); }
.lb-seg a { padding: 8px 18px; border-radius: 8px; color: var(--muted); font-weight: 700; font-size: 15px; text-decoration: none; transition: background .15s, color .15s; }
.lb-seg a:hover { color: var(--text); }
.lb-seg a.active { background: var(--accent-2); color: #fff; }
.lb-period select, .lb-cols { background: rgba(13,6,19,.8); color: var(--text); border: 1px solid var(--card-border); border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.lb-cols:hover { border-color: var(--accent); }
.games-page .lb-top { margin-bottom: 14px; }
.games-page .podium { margin-top: 4px; }
.card.lb-card { padding: 0; }
.lb-table thead th { background: var(--tile); }

/* ---------- phones / small screens ---------- */
@media (max-width: 560px) {
  .hide-sm { display: none; }
  .topnav { flex-wrap: nowrap; gap: 0; }
  .topnav .link-btn { font-size: 13px; padding: 4px 5px; }
}
@media (max-width: 700px) {
  /* Leaderboard games: one row you swipe through instead of a screen full of tiles. */
  .lb-tiles { display: flex; overflow-x: auto; position: relative; gap: 8px; margin: 14px -16px 16px; padding: 2px 16px 8px;
    scroll-snap-type: x proximity; scrollbar-width: thin; }
  .lb-tile { flex: 0 0 136px; height: 56px; scroll-snap-align: start; }
  .lb-tile:hover { transform: none; }
  .lb-banner { min-height: 200px; }
  .lb-seg a { padding: 7px 12px; font-size: 14px; }
  .podium { gap: 6px; }
  .podium-name { font-size: 13px; }
  .podium-spot.p1 .podium-name { font-size: 15px; }
  .section-head { flex-wrap: wrap; }
  .toggles { flex-wrap: wrap; }
}
/* Leaderboard tiles: centred rows (the last row too). */
@media (min-width: 701px) {
  .lb-tiles { display: flex; flex-wrap: wrap; justify-content: center; }
  /* --per: tiles per row, set by js/util.js so the rows come out (near) equal. */
  .lb-tile { flex: 0 0 calc((100% - (var(--per, 10) - 1) * 8px) / var(--per, 10)); min-width: 140px; }
}

/* Banner picture: Hive's map pictures are small, so it's softly blurred (a backdrop) rather than looking pixelated when stretched. */
.lb-banner .gt-cover { filter: blur(7px) saturate(1.2) brightness(1.05); transform: scale(1.1); }
.lb-banner::after { background: radial-gradient(ellipse at center, rgba(13,6,19,.3) 0%, rgba(13,6,19,.6) 80%); }

/* Leaderboard button: top of a game page's right-hand column, above the maps. */
.gi-lb-top { display: block; text-align: center; margin: 8px 0 18px; }
.gi-picker { margin-top: 0; }
@media (min-width: 701px) { .gi-picker .lb-tile { min-width: 112px; } }

/* Leaderboard period: three separate buttons in the banner's bottom-right corner; Monthly / Seasons open a list. */
.lb-banner .lb-period { position: absolute; right: 16px; bottom: 16px; z-index: 3; }
.lb-banner { overflow: visible; }
.lb-banner > .gt-cover { border-radius: inherit; }
.lb-banner::after { border-radius: inherit; }
.lb-banner-body { padding-bottom: 64px; }
.lb-pbtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.lb-pwrap { position: relative; }
.lb-pbtn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 12px; border: 1px solid var(--card-border);
  background: rgba(13,6,19,.8); color: var(--muted); font: inherit; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer;
  backdrop-filter: blur(6px); transition: background .15s, color .15s, border-color .15s; }
.lb-pbtn:hover { color: var(--text); border-color: var(--accent-2); }
.lb-pbtn.active { background: var(--accent-2); border-color: var(--accent); color: #fff; }
.lb-pbtn small { font-size: 12px; opacity: .85; font-weight: 600; }
.lb-caret { font-size: 10px; opacity: .8; }
.lb-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 10; min-width: 190px; max-height: 300px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.55);
  animation: pop-in calc(.18s * var(--anim)) ease-out; transform-origin: bottom right; }
.lb-menu-item { display: block; padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; white-space: nowrap; }
.lb-menu-item:hover { background: var(--tile); }
.lb-menu-item.active { background: var(--accent-2); color: #fff; }
/* Columns: on the right, above the table. */
.lb-toolbar { display: flex; justify-content: flex-end; margin: 0 0 10px; }
/* Copied old months (no UUIDs). */
.lb-warn { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: rgba(227,169,43,.12); border: 1px solid rgba(227,169,43,.4); color: #f2cf7a; font-size: 13px; }
@media (max-width: 700px) {
  .lb-banner .lb-period { left: 12px; right: 12px; bottom: 12px; }
  .lb-pbtns { justify-content: center; }
  .lb-pbtn { padding: 8px 12px; font-size: 13px; }
  .lb-banner-body { padding-bottom: 70px; }
  .lb-menu { right: auto; left: 50%; transform: translateX(-50%); transform-origin: bottom center; }
}/* (The blurred picture is clipped by its own layer, so the period menu can still spill out of the banner.) */
.lb-banner-bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }

/* Columns: the banner's bottom-left corner, on the same row as the period buttons. */
.lb-banner .lb-cols-pos { position: absolute; left: 16px; bottom: 16px; z-index: 3; }
.lb-warn { margin: -6px 0 14px; }
@media (max-width: 700px) {
  .lb-banner .lb-cols-pos { left: 12px; bottom: 12px; }
  .lb-banner .lb-period { left: auto; right: 12px; }
  .lb-pbtns { justify-content: flex-end; }
  .lb-pbtn { padding: 7px 10px; font-size: 12px; }
  .lb-pbtn small { display: none; }
}

/* ---------- tips for new visitors (js/hints.js) ---------- */
.hint-bubble { position: absolute; z-index: 60; width: min(300px, calc(100vw - 16px)); padding: 12px 14px; border-radius: 12px;
  background: var(--accent-2); color: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.5); animation: pop-in calc(.22s * var(--anim)) ease-out; }
.hint-bubble::before { content: ""; position: absolute; left: var(--arrow, 50%); top: -6px; width: 12px; height: 12px; margin-left: -6px;
  background: var(--accent-2); transform: rotate(45deg); }
.hint-bubble.above::before { top: auto; bottom: -6px; }
.hint-bubble p { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: #fff; }
.hint-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hint-actions small { font-size: 11px; opacity: .8; }
.hint-actions .btn { background: #fff; color: var(--accent-2); padding: 6px 14px; font-size: 13px; flex: none; }
.hint-actions .btn:hover { background: #f1e6fb; }
.settings-panel .hint-set { margin-top: 10px; }
.settings-panel .hint-set .link-btn { margin-top: 4px; font-size: 13px; color: var(--accent); }
/* Leaderboards: bigger page title and game name. */
.lb-page.games-page > h1.lb-title { margin-bottom: 8px; } /* (same size as the Games page title) */
.lb-banner h2 { font-size: clamp(40px, 8vw, 88px); }

/* Bigger leaderboard podium. */
.games-page .podium { max-width: 980px; gap: 18px; margin: 18px auto 30px; }
.games-page .podium-name { font-size: clamp(16px, 2.2vw, 24px); }
.games-page .podium-spot.p1 .podium-name { font-size: clamp(19px, 2.8vw, 32px); }
.games-page .podium-stat { font-size: clamp(13px, 1.5vw, 17px); }
.games-page .podium-block { font-size: clamp(40px, 6vw, 64px); border-radius: 16px 16px 6px 6px; margin-top: 10px; }
.games-page .podium-spot.p1 .podium-block { height: clamp(150px, 20vw, 220px); }
.games-page .podium-spot.p2 .podium-block { height: clamp(110px, 14.5vw, 160px); }
.games-page .podium-spot.p3 .podium-block { height: clamp(80px, 10.5vw, 118px); }
@media (max-width: 700px) {
  .games-page .podium { gap: 8px; }
  .games-page .podium-name { font-size: 14px; }
  .games-page .podium-spot.p1 .podium-name { font-size: 17px; }
}
/* Games page tiles: centred rows (the last row too). Tiles per row follow the screen width. */
.game-tiles { --cols: 1; display: flex !important; flex-wrap: wrap; justify-content: center; }
.game-tiles > .game-tile { flex: 0 0 calc((100% - (var(--cols) - 1) * 14px) / var(--cols)); min-width: 0; }
@media (min-width: 560px) { .game-tiles { --cols: 2; } }
@media (min-width: 860px) { .game-tiles { --cols: 3; } }
@media (min-width: 1140px) { .game-tiles { --cols: 4; } }
@media (min-width: 1420px) { .game-tiles { --cols: 5; } }
@media (min-width: 1680px) { .game-tiles { --cols: 6; } }
/* Games-left estimate: double-click to show it with an XP booster (gold while on). */
.games-left { cursor: pointer; user-select: none; }
.games-left.boosted span { color: var(--gold); }

/* XP text above the bar, percentages and games-left below it. */
.xpbar .lbl.xp-top { margin: 0 0 5px; }
.xpbar .bar + .lbl { margin-top: 5px; }

/* Gamertag suggestions under the search boxes (js/suggest.js). */
#topSearch, #homeSearch { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; list-style: none; margin: 0; padding: 6px;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.5);
  text-align: left; animation: pop-in calc(.15s * var(--anim)) ease-out; transform-origin: top center; }
.suggest li { padding: 8px 12px; border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 15px; }
.suggest li b { color: var(--text); }
.suggest li:hover, .suggest li.active { background: var(--accent-2); color: #f1e6fb; }
.suggest li:hover b, .suggest li.active b { color: #fff; }
/* Tip bubble: the small 'turn tips off in Settings' text opens Settings. */
.hint-actions .hint-settings { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-size: 11px; opacity: .85; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.hint-actions .hint-settings:hover { opacity: 1; }

/* Your saved profile on leaderboards: highlighted row, podium spot and a "You" tag. */
.tag.you { background: var(--gold); color: #3a2400; font-size: 10px; padding: 2px 6px; vertical-align: middle; border: 0; font-family: inherit; font-weight: 700; }
button.tag.you { cursor: pointer; font-size: 12px; padding: 4px 9px; }
.lb-banner .gt-tags .tag.you { background: var(--gold); color: #3a2400; }
.lb-table tbody tr.me td { background: rgba(227,169,43,.14); }
.lb-table tbody tr.me td.player { background: #2e2316; box-shadow: inset 3px 0 0 var(--gold); }
.lb-table tbody tr.me:hover td { background: rgba(227,169,43,.2); }
.lb-table tbody tr.me td.player a { color: var(--gold); }
@keyframes me-flash { 0%, 100% { background: rgba(227,169,43,.14); } 50% { background: rgba(227,169,43,.45); } }
.lb-table tbody tr.me.flash td { animation: me-flash calc(.6s * var(--anim)) ease-in-out 2; }
.podium-spot.me .podium-name { color: var(--gold); }/* (One solid shade across your row, including the sticky name column.) */
.lb-table tbody tr.me td, .lb-table tbody tr.me td.player { background: #3a2a22; }
.lb-table tbody tr.me:hover td, .lb-table tbody tr.me:hover td.player { background: #46321f; }

/* Eye button next to Columns: show / hide your highlight on leaderboards. */
.lb-banner .lb-cols-pos { display: flex; gap: 8px; }
.lb-eye { padding: 9px 11px; }
.lb-eye.on { color: var(--gold); border-color: rgba(227,169,43,.5); }
.lb-eye svg { display: block; }
button.tag.you { text-transform: none; letter-spacing: 0; }

/* Game pages: the game's big card at the top (same look as the leaderboard's), "View leaderboard" bottom-right. */
.gi-banner { margin-top: 4px; }
.gi-banner .lb-banner-body { padding-bottom: 64px; }
.gi-banner h1 { margin: 0; font-size: clamp(40px, 8vw, 88px); line-height: 1.05; text-shadow: 0 4px 20px rgba(0,0,0,.7); overflow-wrap: anywhere; }
.gi-banner-lb { position: absolute; right: 16px; bottom: 16px; z-index: 3; }
@media (max-width: 700px) {
  .gi-banner-lb { right: 12px; bottom: 12px; }
}
.gi-banner:not(:has(.gi-banner-lb)) .lb-banner-body { padding-bottom: 28px; } /* (LTMs: no leaderboard button) */
/* Banner corner tags (LTM / Discontinued): top-right of the game card. */
.lb-banner-badge { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 6px; }
.lb-banner-badge .tag { font-size: 12px; padding: 4px 10px; }
@media (max-width: 700px) { .lb-banner-badge { top: 10px; right: 10px; } }
/* Map cards with a description (Sonic's Party Games): it fades in over the picture on hover / tap. */
.map-pic { position: relative; }
.map-desc { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; padding: 10px 12px; font-size: 13px; line-height: 1.35;
  color: #fff; background: rgba(13,6,19,.86); opacity: 0; transition: opacity calc(.18s * var(--anim)); overflow-y: auto; }
.map-card.has-desc { cursor: help; }
.map-card.has-desc:is(:hover, :focus-visible, :focus-within) .map-desc { opacity: 1; }
.map-card.has-desc:focus { outline: none; }
.map-card.has-desc:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.map-desc { align-items: safe center; justify-content: center; text-align: center; font-size: 12px; padding: 6px 8px; }
/* Prestige rows' XP: right-aligned grey numbers, like the level rows. */
.gi-table tr.prestige-row td.num.px { text-align: right; color: var(--muted); font-weight: inherit; }
/* "Total XP" heading over the prestige rows' XP (styled like the table's column headings). */
.gi-table tr.gi-section td { white-space: nowrap; }
.gi-table tr.gi-section td.gi-section-xp { text-align: right; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 600; }