: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;
  /* Logo on the left; the links, then a short search box at the far right. */
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 260px); 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. */
/* (Solid gold, not a gradient painted through see-through letters: browsers sometimes painted part of that
   wrong and the background showed through a letter.) */
.home h1 span { color: #ffcf1f; }
.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 logo, search and links on one row: logo and links on top,
   search on its own row underneath. */
@media (max-width: 760px) {
  .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; }
}
/* (Same spacing with or without the leaderboard button, so the name doesn't jump when switching games.) */
/* 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; }

/* Top search: "+" inside the box on the right imports a snapshot. */
.topsearch { position: relative; }
.topsearch input { padding-right: 44px; }
.search-import { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--tile); color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.search-import:hover, .search-import:focus-visible { background: var(--accent-2); color: #fff; outline: none; }

/* Search suggestions: the same name twice gets its join date on the right. */
.suggest li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.suggest-joined { font-size: 12px; color: var(--dim); white-space: nowrap; }
.suggest li:hover .suggest-joined, .suggest li.active .suggest-joined { color: #e3cff5; }

/* Pictures and icons can't be dragged off the page. */
img { -webkit-user-drag: none; user-select: none; }
@media (min-width: 761px) {
  .topnav { grid-column: 3; grid-row: 1; }
  .topsearch { grid-column: 4; grid-row: 1; }
}

/* Warning triangle (H.util.warnIcon) at the start of warnings and errors. */
.warn-icon { flex: none; display: inline-block; vertical-align: -3px; margin-right: 8px; }
.snapshot-banner > span:first-child { display: inline-flex; align-items: center; flex-wrap: wrap; }
.snapshot-banner .warn-icon { color: #f2cf7a; }
.lb-warn { display: flex; align-items: flex-start; }
.lb-warn .warn-icon { margin-top: 1px; }
.warn-title .warn-icon { width: 22px; height: 22px; vertical-align: -3px; color: var(--bad); }

/* Tickboxes in the site's colours (purple when ticked, white tick). */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid #5b4372; background: var(--tile); display: inline-grid; place-content: center; cursor: pointer;
  vertical-align: -3px; transition: background .15s, border-color .15s;
}
input[type="checkbox"]::before {
  content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .12s ease-out; background: #fff;
  clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 39% 70%);
}
input[type="checkbox"]:checked { background: var(--accent-2); border-color: var(--accent); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hold-and-drag lists (H.util.sortable): column picker + custom game order. */
.lb-picker { align-items: center; }
.lb-pick-list { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.lb-pick-list label { padding: 5px 10px; border-radius: 8px; border: 1px solid transparent; cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; transition: background .15s, border-color .15s; }
.lb-pick-list label:hover { background: rgba(255,255,255,.04); border-color: var(--card-border); }
.order-list li { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.order-list li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.is-sorting, .is-sorting * { cursor: grabbing !important; }
.sorting { background: var(--accent-2) !important; color: #fff; border-color: var(--accent) !important; box-shadow: 0 6px 18px rgba(0,0,0,.45); position: relative; z-index: 2; }
.sorting input[type="checkbox"] { border-color: #fff; }
.order-note { margin: 0 0 6px !important; }
/* Drag polish: the dragged item follows the pointer (others glide aside); lists are the layout reference. */
.lb-pick-list, .order-list { position: relative; }
.sorting { pointer-events: none; transition: none !important; will-change: transform; }
.lb-picker { flex-direction: column; align-items: stretch; gap: 12px; }
.lb-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-pick-foot .lb-pbtn { padding: 7px 18px; }

/* Switching game on the leaderboards / games pages (H.anim.switchGame): the title, tiles and the game's card
   stay put; the card's picture changes inside it (util.js), and what's under it fades up, one after another. */
@keyframes sw-in { from { opacity: 0; transform: translateY(14px); } }
#app.game-switch > section > :is(.lb-warn, .gi-years, .lb-top, .lb-picker, .lb-card, .state, .empty-note):not(.sw-same),
#app.game-switch > section > .gi-layout > :is(.gi-levels, .gi-maps):not(.sw-same) {
  animation: sw-in calc(.42s * var(--anim)) cubic-bezier(.2, .8, .25, 1) both;
  animation-delay: calc(150ms * var(--anim) + var(--sw-i, 0) * 55ms * var(--anim) - var(--sw-elapsed, 0ms));
}
.lb-banner-bg .sw-old { position: absolute; inset: 0; }/* Faded-out copies of the old card's name / corner tags while switching game (util.js). */
.lb-banner .sw-ghost { pointer-events: none; }
.lb-banner .sw-ghost-body { position: absolute; inset: 0; justify-content: center; z-index: 1; }

/* Top bar: round settings button at the far right (after the search box). */
.topbar { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 260px) auto; }
@media (min-width: 761px) { .top-settings { grid-column: 5; grid-row: 1; } }
.top-settings { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; cursor: pointer;
  background: var(--card); color: var(--muted); border: 1px solid var(--card-border); transition: color .15s, border-color .15s, transform .3s; }
.top-settings:hover, .top-settings[aria-expanded="true"] { color: #fff; border-color: var(--accent-2); }
.top-settings:hover svg, .top-settings[aria-expanded="true"] svg { transform: rotate(45deg); }
.top-settings svg { transition: transform calc(.3s * var(--anim)) ease-out; }
@media (max-width: 760px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand nav nav" "search search gear"; }
  .top-settings { grid-area: gear; }
}
/* Opened from the top bar: Settings drops down under it instead of rising from the footer. */
.settings-panel.at-top { position: fixed; top: 66px; right: 16px; bottom: auto; max-height: calc(100vh - 82px); overflow-y: auto; transform-origin: top right; }
@media (max-width: 760px) { .settings-panel.at-top { top: 110px; max-height: calc(100vh - 126px); } }
/* "Custom" sort: a pencil to edit the order in Settings; the order list flashes when opened from it. */
.toggle .toggle-edit { padding: 0 9px; display: grid; place-items: center; color: var(--muted); }
.toggle .toggle-edit:hover { color: #fff; }
@keyframes order-flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 2px var(--accent); } }
.order-set.flash .order-list { animation: order-flash calc(1.2s * var(--anim)) ease-out; }

/* Profile toggles: a pill slides to the picked button (app.js animateToggles); the toggle resizes smoothly. */
.toggle { position: relative; overflow: hidden; }
.toggle button { position: relative; z-index: 1; transition: color calc(.25s * var(--anim)); }
.toggle-pill { position: absolute; z-index: 0; border-radius: 999px; background: rgba(255,255,255,.18); pointer-events: none; }
.toggle.pill-moving button.active { background: none; }
/* "Show / Hide old games": a bigger button. */
.show-extras { font-size: 16px; padding: 12px 30px; min-width: 220px; justify-content: center; }
/* (While a toggle resizes, its buttons keep their size and text on one line - the toggle clips them instead.) */
.toggle > * { flex-shrink: 0; white-space: nowrap; }
/* Sort toggle's pencil: folded away (no width) unless Custom is picked; app.js animates it opening/closing. */
.toggle { overflow: visible; }
.toggle .toggle-edit { overflow: hidden; box-sizing: border-box; width: 32px; padding: 0; }
.toggle .toggle-edit.off { width: 0; opacity: 0; pointer-events: none; }
.settings-panel .source-set { margin-top: 14px; } /* (API choice: last in Settings) */
.settings-panel h3 + fieldset { margin-top: 0; } /* (first section right under the title) */
/* Toggle highlight: drawn by the active button's ::before so it can slide (app.js animateToggles). */
.toggle button.active { background: none; isolation: isolate; }
.toggle button.active::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; border-radius: 999px; background: rgba(255,255,255,.18); }
.lb-tiles.fresh .lb-tile, .lb-tiles.fresh .gt-cover { transition: none !important; } /* (just redrawn - see util.js balanceTiles) */
.settings-panel .source-set { margin-top: 10px; }

/* Home picture wall with animations off: the second row sits half a picture along, like bricks.
   (A picture is 16:9 at the row height, plus the 12px gap.) */
.home-wall { --wall-h: 210px; }
html[data-anim="off"] .wall-row:nth-child(2) .wall-track { transform: translateX(calc(-0.5 * (var(--wall-h) * 16 / 9 + 12px))); }
@media (max-width: 640px) { .home-wall { --wall-h: 140px; } }

.gi-mirror-note { margin: 0 0 10px; }
/* Map counts: purple = playable now, orange = every map (vaulted + modes no longer played too). */
.tag.count.total { background: rgba(227,169,43,.2); color: #f2cf7a; border: 1px solid rgba(227,169,43,.45); margin-left: 6px; }

/* Kits (SkyWars Kits / Classic): under How to earn XP. */
.kit-note { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 4px; }
.kit-tile { padding: 10px 12px; background: var(--tile); border: 1px solid var(--card-border); border-radius: 10px; font-size: 13px; line-height: 1.4; }
.kit-tile > b { font-size: 15px; }
.kit-tile > p { margin: 4px 0 8px; color: var(--muted); }
.kit-list small { display: block; color: var(--dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 6px; }
.kit-list ul { margin: 2px 0 0; padding-left: 16px; }
.gi-kits .xp-sub { display: flex; align-items: center; gap: 8px; }
.gi-kits .xp-sub:not(:first-child) { margin-top: 18px; }


/* Leaderboard card tags: the whole row centred (its parts are just groups - see leaderboard.js); a tag that changes
   animates and the others slide (util.js tagDiff), so the row can re-centre without jumping. */
.lb-tagrow .tr-l, .lb-tagrow .tr-m, .lb-tagrow .tr-r { display: contents; }


/* Profile badges (render.js badgesHtml): small icons under the name and hub title; hover for what they mean. */
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pbadge { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  background: var(--tile); border: 1px solid var(--card-border); color: var(--muted); cursor: help;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: transform .15s; }
.pbadge:hover { transform: translateY(-2px); }
.pbadge b { position: absolute; right: -6px; bottom: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; box-sizing: border-box;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; background: var(--card); border: 1px solid var(--card-border); color: var(--text); }
.pbadge.b-gold { color: #ffd23f; background: linear-gradient(160deg, rgba(255,210,63,.22), rgba(255,169,10,.08)); border-color: rgba(255,210,63,.5); }
.pbadge.b-silver { color: #dfe6ee; background: linear-gradient(160deg, rgba(223,230,238,.18), rgba(160,170,185,.06)); border-color: rgba(223,230,238,.4); }
.pbadge.b-purple { color: #d6a8ff; background: linear-gradient(160deg, rgba(176,92,230,.3), rgba(176,92,230,.08)); border-color: rgba(176,92,230,.6); }
.pbadge.b-teal { color: #6ee7d8; background: linear-gradient(160deg, rgba(64,210,190,.22), rgba(64,210,190,.06)); border-color: rgba(64,210,190,.5); }
.pbadge.b-rainbow { color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #ff5f6d, #ffc371, #47e1a8, #4facfe, #b05ce6); }
/* Login streak: a different look for each full year of your longest streak. */
.pbadge.b-streak.t0 { color: #ff9a5a; }
.pbadge.b-streak.t1 { color: #e8a165; background: linear-gradient(160deg, rgba(205,127,50,.3), rgba(205,127,50,.08)); border-color: rgba(205,127,50,.6); }
.pbadge.b-streak.t2 { color: #e6edf5; background: linear-gradient(160deg, rgba(200,210,222,.28), rgba(200,210,222,.06)); border-color: rgba(200,210,222,.55); }
.pbadge.b-streak.t3 { color: #ffd23f; background: linear-gradient(160deg, rgba(255,210,63,.3), rgba(255,169,10,.08)); border-color: rgba(255,210,63,.6); }
.pbadge.b-streak.t4 { color: #b8fff1; background: linear-gradient(160deg, rgba(120,240,220,.3), rgba(120,240,220,.06)); border-color: rgba(120,240,220,.6); }
.pbadge.b-streak.t5 { color: #a8dcff; background: linear-gradient(160deg, rgba(80,170,255,.35), rgba(80,170,255,.08)); border-color: rgba(80,170,255,.7); }
.pbadge.b-streak.t6 { color: #ff8fa3; background: linear-gradient(160deg, rgba(240,60,90,.35), rgba(240,60,90,.08)); border-color: rgba(240,60,90,.7); }
.pbadge.b-streak.t7 { color: #fff; border-color: transparent; background: linear-gradient(135deg, #ffd1f0, #c6b8ff, #a8f0ff, #d9ffc8); }
.pbadge.b-streak.t7 svg circle { fill: #7a4cc2; }
.pbadge svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
@media (max-width: 560px) { .hero-badges { justify-content: center; } }
/* Badge rarity colours (render.js tierOf): diamond = rarest, then gold, then silver. */
.pbadge.b-diamond { color: #e9fbff; border-color: rgba(150,230,255,.75);
  background: linear-gradient(145deg, rgba(120,220,255,.45) 0%, rgba(180,150,255,.32) 45%, rgba(110,240,230,.38) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px rgba(120,220,255,.35); }
.pbadge.b-diamond svg { filter: drop-shadow(0 0 3px rgba(190,240,255,.8)); }
.pbadge.b-gold { color: #ffd23f; background: linear-gradient(160deg, rgba(255,210,63,.28), rgba(255,169,10,.08)); border-color: rgba(255,210,63,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.pbadge.b-silver { color: #e3e9f0; background: linear-gradient(160deg, rgba(223,230,238,.2), rgba(160,170,185,.06)); border-color: rgba(223,230,238,.45); }
.pbadge.b-streak svg circle { fill: currentColor; }
/* Badges under the avatar: small, tight boxes in rows as wide as the avatar. */
.avatar-col { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; width: 128px; }
.avatar-col .hero-badges { justify-content: center; gap: 5px; margin: 0; width: 100%; }
.avatar-col .pbadge { width: 28px; height: 28px; border-radius: 8px; }
.avatar-col .pbadge svg { width: 22px; height: 22px; }
.avatar-col .pbadge b { right: -5px; bottom: -5px; min-width: 15px; height: 15px; padding: 0 3px; font-size: 9px; line-height: 13px; }
@media (max-width: 560px) { .avatar-col { width: 96px; } .avatar-col .hero-badges { width: 150px; } }
/* #1 tags (game cards: "#1 all time" / "#1 this month"): the diamond rarity look, like the diamond badges. */
.tag.medal-1 { background: linear-gradient(110deg, #9fe8ff 0%, #d9c8ff 45%, #a6fff0 100%); color: #10243a;
  box-shadow: 0 0 10px rgba(140,225,255,.45), inset 0 1px 0 rgba(255,255,255,.6); }
/* Badges: one row under the avatar and the name / hub title together. */
.hero-id { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hero-id-row { display: flex; align-items: center; gap: 28px; min-width: 0; }
.hero-id .hero-badges { margin: 0; gap: 6px; }
.hero-id .pbadge { width: 32px; height: 32px; border-radius: 9px; }
.hero-id .pbadge svg { width: 24px; height: 24px; }
.hero-id .pbadge b { right: -5px; bottom: -5px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 14px; }
/* Rarity colours as solid fills (like the "#1 all time" tag), icons dark on top. */
.pbadge.b-diamond { background: linear-gradient(135deg, #9fe8ff 0%, #d9c8ff 50%, #a6fff0 100%); color: #10243a; border-color: rgba(200,245,255,.9);
  box-shadow: 0 0 10px rgba(140,225,255,.45), inset 0 1px 0 rgba(255,255,255,.6); }
.pbadge.b-gold { background: linear-gradient(135deg, #ffe066 0%, #f5b301 100%); color: #3a2400; border-color: rgba(255,224,102,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.pbadge.b-silver { background: linear-gradient(135deg, #f1f3f6 0%, #9ea3ad 100%); color: #2a2d33; border-color: rgba(241,243,246,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.pbadge.b-diamond svg, .pbadge.b-gold svg, .pbadge.b-silver svg { filter: none; }
.pbadge.b-gold svg text, .pbadge.b-diamond svg text, .pbadge.b-silver svg text { fill: #fff; }
.pbadge.b-streak svg path { stroke: #fff; }
@media (max-width: 560px) { .hero-id { align-items: center; } .hero-id-row { flex-direction: column; text-align: center; gap: 12px; } }
/* "First to Level N" tags: diamond rarity too. */
.tag.first { background: linear-gradient(110deg, #9fe8ff 0%, #d9c8ff 45%, #a6fff0 100%) !important; color: #10243a !important; box-shadow: 0 0 10px rgba(140,225,255,.45), inset 0 1px 0 rgba(255,255,255,.6); text-decoration: none; }
.tag.first * { color: inherit !important; }
a.tag, a.tag:hover { text-decoration: none; } /* (tags that are links: no underline) */
/* Badges hero card: the badges in one line where the other cards have their number. */
.badges-card .hero-badges { flex-wrap: nowrap; gap: 5px; margin: 0 0 4px; }
.badges-card .pbadge { width: 30px; height: 30px; border-radius: 8px; }
.badges-card .pbadge svg { width: 23px; height: 23px; }
.badges-card .pbadge b { right: -5px; bottom: -5px; min-width: 15px; height: 15px; padding: 0 3px; font-size: 9px; line-height: 13px; }
@media (max-width: 560px) { .badges-card { grid-column: 1 / -1; } .badges-card .hero-badges { flex-wrap: wrap; } }
/* Badges box above the Locker. */
.locker > .badges-card { padding: 14px 16px; margin-bottom: 22px; }
.locker > .badges-card .hero-badges { flex-wrap: wrap; gap: 8px; margin: 0; }
.locker > .badges-card .pbadge { width: 38px; height: 38px; border-radius: 10px; }
.locker > .badges-card .pbadge svg { width: 28px; height: 28px; }
.locker > .badges-card .pbadge b { right: -6px; bottom: -6px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; line-height: 15px; }
.settings-panel .badge-set { margin-top: 10px; }