/* =====================================================================
   f2pmmo — site styles
   Black / red / gray / white, framed panels in the style of IdleRPG.
   Change colors in the :root block only.
   ===================================================================== */

:root {
  --bg:        #0a0a0a;   /* page background */
  --panel:     #131313;   /* panels and cards */
  --panel-2:   #1b1b1b;   /* inputs, hover rows */
  --panel-3:   #232323;
  --border:    #2c2c2c;   /* panel frames */
  --border-hi: #3d3d3d;
  --muted:     #8f8f8f;   /* secondary text */
  --text:      #f2f2f2;   /* main text */
  --red:       #d11a2a;   /* actions and highlights */
  --red-hi:    #ef2f40;
  --red-dim:   #3a0d12;
  --void:      #7a5aa6;   /* VOID Points: toned-down purple */
  --void-hi:   #a58bd6;   /* VOID text on dark backgrounds */
  --void-dim:  #221a31;   /* VOID-tinted backgrounds */
  --void-deep: #140f1d;
  --yellow:    #e2b84f;   /* second accent: highlights, badges, "new" */
  --yellow-hi: #f3cf6e;
  --gold:      var(--yellow);
  --good:      #5fd38a;
  --dev:       #2bb3a3;   /* the Dev side (Phase 9): teal */
  --dev-hi:    #4fd1c1;
  --dev-dim:   #0e2b28;
  --radius:    6px;
  --font-head: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow:    0 10px 30px rgba(0, 0, 0, .45);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--font-body); min-height: 100vh; display: flex; flex-direction: column; }
body::before { /* faint red glow at the top, like a portal */
  content: ""; position: fixed; inset: 0 0 auto 0; height: 420px; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 60% 100% at 50% 0, rgba(209, 26, 42, .10), transparent 70%);
}
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--red-hi); }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
p { margin: 0 0 12px; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.red { color: var(--red-hi); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--red); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 16px; }
main.wrap { flex: 1; padding-top: 18px; padding-bottom: 40px; }
[hidden] { display: none !important; }

/* ---------- Buttons ---------- */
.btn, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius); padding: 10px 16px; font: 600 15px var(--font-body);
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap;
}
.btn { background: var(--red); color: #fff; border: 1px solid var(--red); }
.btn:hover { background: var(--red-hi); border-color: var(--red-hi); color: #fff; }
.btn:active, .btn-ghost:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-hi); }
.btn-ghost:hover { border-color: var(--red); color: var(--text); background: var(--red-dim); }
.btn-sm { padding: 6px 12px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled], .btn-ghost[disabled] { opacity: .5; cursor: wait; }
.link { background: none; border: 0; padding: 0; color: var(--red-hi); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link.danger { color: #ff7a7a; font-size: 14px; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px;
  padding: 10px 16px; background: rgba(10, 10, 10, .94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; flex-direction: column; justify-content: center; gap: 3px; flex-shrink: 0; }
.brand-logo { display: block; height: 28px; width: auto; }          /* the F2P MMO dragon logo (v0.17) */
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font: 700 20px var(--font-head); letter-spacing: .14em; text-transform: uppercase; }
.brand-name .red { color: var(--red); }
.brand-tag { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.mainnav { display: flex; gap: 4px; }
.mainnav a { padding: 8px 12px; border-radius: var(--radius); font-weight: 600; font-size: 15px; color: var(--muted); }
.mainnav a:hover { color: var(--text); background: var(--panel-2); }
.stat-pills { display: flex; gap: 8px; margin-left: auto; }
.pill {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border); font: inherit; color: var(--text); cursor: default;
}
a.pill, button.pill { cursor: pointer; }
.pill-label { font-size: 10px; letter-spacing: .18em; color: var(--muted); }
.pill b { font-size: 16px; }
.pill-void { border-color: var(--void); background: linear-gradient(180deg, var(--void-dim), var(--panel)); }
.pill-void .pill-label { color: var(--void-hi); }
.pill-void b { color: #fff; }
.pill-void.bump { animation: bump .5s ease; }
@keyframes bump { 30% { transform: scale(1.12); box-shadow: 0 0 22px rgba(122, 90, 166, .7); } }
.account { display: flex; gap: 8px; align-items: center; }
.account-name { display: inline-flex; align-items: center; gap: 6px; max-width: 190px; }
.account-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name .caret { font-size: 10px; color: var(--muted); transition: transform .15s; }
.account-name.open { border-color: var(--border-hi); background: var(--panel-2); }
.account-name.open .caret { transform: rotate(180deg); }

/* The account menu on the member's name (v0.20): profile, tasks, shop, teams... */
.menu-wrap { position: relative; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 210px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border-hi); border-radius: 8px; box-shadow: var(--shadow);
}
.account-menu[hidden] { display: none; }
.account-menu a, .account-menu button {
  display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius); background: none;
  color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover, .account-menu a:focus-visible, .account-menu button:focus-visible { background: var(--panel-2); outline: none; }
.account-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }
.account-menu .menu-admin { color: var(--yellow); }
.account-menu [data-logout] { color: var(--muted); }

/* The current section in the menus (v0.20) */
.mainnav a[aria-current] { color: var(--text); box-shadow: inset 0 -2px 0 var(--red); border-radius: var(--radius) var(--radius) 0 0; }

/* ---------- Sub-nav (v0.20): the smaller bar under the top bar ---------- */
.subnav { background: #0e0e0e; border-bottom: 1px solid var(--border); }
.subnav-in {
  display: flex; gap: 2px; padding: 0 12px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.subnav-in::-webkit-scrollbar { display: none; }
.subnav a {
  flex: 0 0 auto; padding: 9px 12px; font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--muted);
  white-space: nowrap; border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--text); }
.subnav a.on { color: var(--text); border-bottom-color: var(--red); }
.subnav a.nav-dev { color: var(--dev-hi); }
.subnav a.nav-dev.on, .subnav a.nav-dev:hover { color: #fff; border-bottom-color: var(--dev); }
@media (min-width: 1100px) { .subnav-in { justify-content: center; -webkit-mask-image: none; mask-image: none; } }
.site-banner { background: var(--red-dim); border-bottom: 1px solid var(--red); text-align: center; padding: 8px 16px; font-size: 14px; }

/* ---------- Panels (framed, like IdleRPG) ---------- */
.panel {
  position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px;
}
.panel::before, .panel::after { /* corner brackets */
  content: ""; position: absolute; width: 10px; height: 10px; border-color: var(--red); pointer-events: none; opacity: .7;
}
.panel::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; border-top-left-radius: var(--radius); }
.panel::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; border-bottom-right-radius: var(--radius); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-head h2, .page-head h1, .mini-head {
  font: 700 15px var(--font-head); letter-spacing: .12em; text-transform: uppercase;
}
.panel-link { font-size: 13px; color: var(--red-hi); }
.mini-head { font-size: 12px; color: var(--muted); margin: 18px 0 8px; }
.empty { color: var(--muted); margin: 0; }
.count { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--panel-3); color: var(--muted); font: 600 12px var(--font-body); letter-spacing: 0; text-align: center; }
.notice { background: var(--red-dim); border: 1px solid var(--red); padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 16px; }
.page-head h1 { font-size: 22px; }

/* ---------- Chips and badges ---------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 8px 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 13px; background: var(--panel-2); border: 1px solid var(--border-hi); color: var(--text); }
a.chip:hover { border-color: var(--red); color: var(--text); }
.chip-red { background: var(--red-dim); border-color: var(--red); }
.chip-gold { border-color: var(--gold); color: var(--gold); }
.badge { position: absolute; font: 600 11px var(--font-body); letter-spacing: .04em; padding: 2px 7px; border-radius: 4px; background: rgba(0, 0, 0, .78); color: var(--text); }
.badge-type { left: 8px; top: 8px; text-transform: uppercase; }
.badge-comments { right: 8px; bottom: 8px; }
.badge-featured { left: 8px; top: 8px; background: var(--red); }

/* ---------- Feature card row ---------- */
.feature-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.feature-card {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; min-height: 82px;
}
a.feature-card:hover { border-color: var(--red); color: var(--text); background: linear-gradient(180deg, var(--red-dim), var(--panel)); }
.feature-intro h2 { font: 700 15px var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--red-hi); margin-bottom: 4px; }
.feature-intro p { color: var(--muted); font-size: 14px; margin: 0 0 4px; }
.fc-icon { color: var(--red); font-size: 16px; }
.fc-title { font: 700 14px var(--font-head); letter-spacing: .1em; text-transform: uppercase; }
.fc-sub { font-size: 13px; color: var(--muted); }
.feature-event { border-color: var(--yellow); }
.feature-event .fc-icon { color: var(--yellow); }
.fc-live { color: var(--good) !important; }

/* ---------- Homepage dashboard ---------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.dash-right { display: flex; flex-direction: column; gap: 16px; }
.dash-right > .panel { margin: 0; }
.dash-right .game-list { max-height: 440px; }
.stage-side .stage-title { font-size: 20px; }
.stage-side .stage-art { aspect-ratio: 16 / 10; }
.stage-side .stage-copy { font-size: 13px; left: 14px; right: 14px; bottom: 12px; -webkit-line-clamp: 3; }
.stage-side .stage-actions { padding: 12px 14px 14px; }
.stage-side .stage-actions .btn, .stage-side .stage-actions .btn-ghost { flex: 1 1 100%; text-align: center; }
.event-panel { display: flex; flex-direction: column; gap: 2px; border-left: 3px solid var(--yellow); }
.event-panel b { font: 700 17px var(--font-head); letter-spacing: .04em; }
.game-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow: auto; }
.game-list a { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: var(--radius); border: 1px solid transparent; }
.game-list a:hover { background: var(--panel-2); border-color: var(--border-hi); color: var(--text); }
.gl-cover { width: 40px; height: 54px; border-radius: 4px; overflow: hidden; background: var(--panel-3); flex-shrink: 0; display: grid; place-items: center; font: 700 13px var(--font-head); color: var(--red-hi); }
.gl-cover img { width: 100%; height: 100%; object-fit: cover; }
.gl-text { display: flex; flex-direction: column; min-width: 0; }
.gl-text b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-text small { color: var(--muted); font-size: 12px; }

.stage { padding: 0; overflow: hidden; }
.stage-head { padding: 14px 16px 10px; }
.stage-kicker { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--red-hi); }
.stage-title { font: 700 26px var(--font-head); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.stage-art { position: relative; display: block; aspect-ratio: 21 / 8; background: var(--panel-3) center / cover no-repeat; }
.stage-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .2) 60%, transparent); }
.stage-copy { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #ddd; font-size: 15px; max-width: 70ch;
              display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.stage-actions .btn-ghost { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.stage-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; }

.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; }
.stat-strip div { padding: 12px 14px; text-align: center; border-right: 1px solid var(--border); }
.stat-strip div:last-child { border-right: 0; }
.stat-strip span { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.stat-strip b { font: 700 24px var(--font-head); }

/* Progress panel ("The Journey") */
.journey { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 10px; }
.journey-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.journey-rank { font: 700 30px var(--font-head); letter-spacing: .06em; margin: 2px 0; }
.journey-points { display: inline-block; padding: 3px 12px; border: 1px solid var(--void); background: var(--void-dim); color: var(--void-hi); border-radius: 999px; font-size: 13px; letter-spacing: .1em; }
.journey-points b { color: #fff; }
.journey-points b { font-size: 15px; }
.rank-bar { height: 8px; background: var(--panel-3); border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.rank-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--void), var(--void-hi)); border-radius: 999px; transition: width .6s ease; box-shadow: 0 0 10px rgba(122, 90, 166, .5); }
.rank-next { font-size: 13px; color: var(--muted); text-align: center; margin: 0 0 10px; }
.kv { margin: 0; display: grid; gap: 6px; }
.kv div { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 6px; font-size: 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; }
.earn-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.earn-list li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.earn-list b { color: var(--void-hi); white-space: nowrap; }

/* Ticker */
.live-dot { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--good); display: inline-flex; align-items: center; gap: 6px; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.ticker { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; font-size: 14px; }
.ticker li { padding: 8px 0 8px 12px; border-left: 2px solid var(--border-hi); margin-bottom: 2px; }
.ticker li[data-verb="joined"] { border-left-color: var(--red); }
.ticker li[data-verb="ranked_up"] { border-left-color: var(--void); }
.ticker li[data-verb="game_added"] { border-left-color: var(--yellow); }
.ticker li[data-verb="page_post"] { border-left-color: var(--yellow-hi); }
.ticker li.fresh { animation: slidein .5s ease; background: linear-gradient(90deg, var(--red-dim), transparent); }
@keyframes slidein { from { opacity: 0; transform: translateX(-8px); } }
.ticker time { display: block; font-size: 12px; color: var(--muted); }

/* ---------- Media grid ---------- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.media-card { display: flex; flex-direction: column; gap: 8px; border-radius: var(--radius); }
.media-card:hover { color: var(--text); }
.media-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--panel-3); border: 1px solid var(--border); }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.media-card:hover .media-thumb { border-color: var(--red); }
.media-card:hover .media-thumb img { transform: scale(1.04); }
.play-dot { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(209, 26, 42, .9); box-shadow: 0 0 0 4px rgba(0, 0, 0, .35); }
.play-dot::after { content: ""; position: absolute; left: 17px; top: 13px; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.media-meta { display: flex; flex-direction: column; gap: 2px; }
.media-title { font-weight: 600; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.media-sub { font-size: 13px; color: var(--muted); }

/* ---------- Games ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.game-card { display: flex; flex-direction: column; gap: 8px; }
.game-card:hover { color: var(--text); }
.game-cover { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--panel-3); border: 1px solid var(--border); }
.game-card:hover .game-cover { border-color: var(--red); }
.game-cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-placeholder { width: 100%; height: 100%; display: grid; place-items: center; font: 700 36px var(--font-head); color: var(--red); background: radial-gradient(circle, var(--red-dim), var(--panel-3)); }
.game-meta { display: flex; flex-direction: column; }
.game-title { font-weight: 700; }
.game-sub, .game-count { font-size: 13px; color: var(--muted); }

/* ---------- Game hub ---------- */
.hub-head { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--panel-3) center / cover no-repeat; margin-bottom: 0; min-height: 220px; display: flex; align-items: flex-end; }
.hub-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 10, 10, .96) 10%, rgba(10, 10, 10, .55) 60%, rgba(10, 10, 10, .3)); }
.hub-inner { position: relative; display: flex; gap: 18px; align-items: flex-end; padding: 20px; width: 100%; }
.hub-cover { width: 120px; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--border-hi); flex-shrink: 0; background: var(--panel-3); box-shadow: var(--shadow); }
.hub-cover img { width: 100%; height: 100%; object-fit: cover; }
.hub-text { flex: 1; min-width: 0; }
.hub-text h1 { font: 700 32px var(--font-head); letter-spacing: .06em; text-transform: uppercase; }
.hub-actions { flex-shrink: 0; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 14px 0 16px; }
.tabs a { padding: 10px 16px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active, .tabs a:hover { color: var(--text); border-bottom-color: var(--red); }
.hub-body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.hub-side { position: sticky; top: 76px; }
.type-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.prose { color: #d8d8d8; max-width: 80ch; }
.pager { display: flex; justify-content: space-between; margin-top: 16px; }
.empty-cta { text-align: center; padding: 24px 12px; }
.empty-cta p { color: var(--muted); max-width: 520px; margin: 0 auto 14px; }

/* ---------- Watch page + player ---------- */
.watch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.watch-layout.theater { grid-template-columns: minmax(0, 1fr); }
.f2p-player { background: #000; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.f2p-player:fullscreen { display: flex; flex-direction: column; border: 0; border-radius: 0; }
.f2p-player:fullscreen .player-frame { flex: 1; aspect-ratio: auto; }
.player-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.player-frame iframe, #yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-poster { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; background: #000 center / cover no-repeat; display: grid; place-items: center; }
.big-play { width: 76px; height: 76px; border-radius: 50%; background: var(--red); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(0, 0, 0, .35), 0 0 30px rgba(209, 26, 42, .5); transition: transform .15s; }
.player-poster:hover .big-play { transform: scale(1.08); }
.big-play svg { width: 38px; height: 38px; fill: #fff; margin-left: 4px; }
.player-error { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; background: rgba(0, 0, 0, .85); font-size: 14px; }
.player-error a { color: var(--red-hi); text-decoration: underline; }

.controls { background: linear-gradient(180deg, #111, #0b0b0b); border-top: 1px solid var(--border); padding: 6px 10px 8px; user-select: none; }
.scrub { position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.scrub-track { position: relative; width: 100%; height: 6px; background: #2a2a2a; border-radius: 999px; }
.scrub:hover .scrub-track, .scrub.dragging .scrub-track { height: 8px; }
.scrub-buffered { position: absolute; inset: 0 auto 0 0; width: 0; background: #4a4a4a; border-radius: 999px; }
.scrub-played { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--red); border-radius: 999px; }
.scrub-played::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--red); opacity: 0; transition: opacity .15s; }
.scrub:hover .scrub-played::after, .scrub.dragging .scrub-played::after, .scrub:focus-visible .scrub-played::after { opacity: 1; }
.scrub-ticks { position: absolute; inset: 0; pointer-events: none; }
.scrub-tick { position: absolute; top: -5px; width: 4px; height: calc(100% + 10px); margin-left: -2px; background: #fff; border: 0; padding: 0; border-radius: 2px; opacity: .85; pointer-events: auto; cursor: pointer; }
.scrub-tick:hover, .scrub-tick.active { background: var(--red-hi); opacity: 1; transform: scaleX(1.5); }
.scrub-preview { position: absolute; bottom: 24px; transform: translateX(-50%); background: #000; border: 1px solid var(--border-hi); padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 2; }
.control-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ctl { width: 38px; height: 38px; border: 0; background: transparent; border-radius: var(--radius); display: grid; place-items: center; cursor: pointer; color: var(--text); }
.ctl:hover { background: var(--panel-3); }
.ctl svg { width: 22px; height: 22px; fill: currentColor; }
.btn-play .i-pause, .f2p-player.is-playing .btn-play .i-play { display: none; }
.f2p-player.is-playing .btn-play .i-pause { display: inline; }
.btn-mute .i-muted, .f2p-player.is-muted .btn-mute .i-vol { display: none; }
.f2p-player.is-muted .btn-mute .i-muted { display: inline; }
.time-code { background: none; border: 0; color: var(--text); font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 6px 8px; cursor: pointer; border-radius: var(--radius); }
.time-code:hover { background: var(--panel-3); }
.spacer { flex: 1; }
.vol { width: 84px; accent-color: var(--red); }
.control-row .speed { width: auto; background: var(--panel-2); color: var(--text); border: 1px solid var(--border-hi); border-radius: var(--radius); padding: 5px 6px; font: 13px var(--font-body); }
.btn-comment { margin-left: 4px; }

.watch-info h1 { font-size: 22px; margin-bottom: 6px; }
.watch-meta { color: var(--muted); font-size: 14px; }
.watch-meta a { color: var(--text); }
.watch-meta a.red { color: var(--red-hi); }
.image-view { margin: 0 0 16px; background: #000; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.image-view img { margin: 0 auto; max-height: 78vh; width: auto; }

.comments-panel { position: sticky; top: 76px; display: flex; flex-direction: column; max-height: calc(100vh - 96px); }
.comments-panel .panel-head h2 { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.comment-box { background: var(--panel-2); border: 1px solid var(--border-hi); border-radius: var(--radius); padding: 10px; margin-bottom: 12px; }
.comment-box label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 6px; }
.comment-box label b { color: var(--red-hi); font-family: ui-monospace, monospace; }
.comment-box textarea { width: 100%; resize: vertical; }
.comment-box-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.comment-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; }
.comment-list li { padding: 10px; border-radius: var(--radius); border: 1px solid transparent; margin-bottom: 4px; font-size: 14px; }
.comment-list li.active { border-color: var(--red); background: var(--red-dim); }
.comment-list li.mine { border-left: 2px solid var(--red); }
.comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.tc { background: var(--red); color: #fff; border: 0; border-radius: 4px; padding: 1px 7px; font: 600 12px ui-monospace, monospace; cursor: pointer; }
.tc:hover { background: var(--red-hi); }
.comment-head a { font-weight: 600; }
.comment-head time { color: var(--muted); font-size: 12px; margin-left: auto; }
.comment-body { word-wrap: break-word; }
.comment-del { background: none; border: 0; color: var(--muted); font-size: 12px; cursor: pointer; padding: 0; margin-top: 2px; }
.comment-del:hover { color: #ff7a7a; }
.up-next { margin-top: 4px; }

/* ---------- Segmented control ---------- */
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border-hi); border-radius: var(--radius); padding: 3px; gap: 3px; margin-bottom: 12px; }
.seg-btn { white-space: nowrap; background: none; border: 0; color: var(--muted); font: 600 14px var(--font-body); padding: 7px 12px; border-radius: 4px; cursor: pointer; }
.seg-btn small { color: var(--void-hi); font-weight: 600; }
.seg-btn.active { background: var(--red); color: #fff; }
.seg-btn.active small { color: #fff; }
.seg-sm { margin: 0; } .seg-sm .seg-btn { padding: 4px 8px; font-size: 12px; }

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=date], input[type=datetime-local], input:not([type]), select, textarea {
  width: 100%; padding: 10px 12px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border-hi);
  border-radius: var(--radius); font: 15px var(--font-body);
}
.filters select { width: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(209, 26, 42, .25); }
input[type=file] { color: var(--muted); font-size: 14px; }
label { display: block; margin-bottom: 12px; font-size: 14px; color: var(--muted); }
label > input, label > select, label > textarea, label > .pw-wrap { margin-top: 4px; }
label.check { display: inline-flex; gap: 6px; align-items: center; margin: 0; color: var(--text); }
label.check input { width: auto; accent-color: var(--red); }
.stack { margin-bottom: 14px; }
.form-msg { background: var(--red-dim); border: 1px solid var(--red); padding: 8px 12px; border-radius: var(--radius); color: var(--text); font-size: 14px; }
.form-msg.ok { background: #0f2a1a; border-color: var(--good); }
.narrow-panel { max-width: 460px; margin: 40px auto; }
.narrow-panel h1 { font-size: 24px; margin: 0 0 8px; }
.forgot { margin: -4px 0 10px; text-align: right; font-size: 13px; }
.pw-wrap { position: relative; display: block; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); font-size: 12px; cursor: pointer; padding: 4px 6px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Modal dialogs ---------- */
.modal { width: min(440px, calc(100vw - 24px)); background: var(--panel); color: var(--text); border: 1px solid var(--red); border-radius: 10px; padding: 26px; box-shadow: var(--shadow), 0 0 60px rgba(209, 26, 42, .15); }
.modal-wide { width: min(560px, calc(100vw - 24px)); }
.modal::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); }
.modal h2 { font: 700 20px var(--font-head); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.modal-close-form { position: absolute; top: 10px; right: 10px; margin: 0; }
.modal-x { background: none; border: 0; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.modal-x:hover { color: var(--text); }
.switch { text-align: center; font-size: 14px; color: var(--muted); margin: 14px 0 0; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; pointer-events: none; }
.toast { pointer-events: auto; background: var(--panel); border: 1px solid var(--border-hi); border-left: 4px solid var(--red); padding: 10px 14px; border-radius: var(--radius); box-shadow: var(--shadow); font-size: 14px; max-width: 340px; animation: toastin .35s ease; }
.toast.points { border-left-color: var(--void); font-weight: 600; }
.toast.rank, .toast.welcome { border-color: var(--void); background: linear-gradient(180deg, var(--void-dim), var(--panel)); font: 700 15px var(--font-head); letter-spacing: .06em; }
.toast.error { border-left-color: #ff6b6b; }
.toast.info { border-left-color: var(--muted); }
.toast.out { opacity: 0; transform: translateY(8px); transition: .3s; }
.toast small { display: block; font: 500 12px var(--font-body); color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.toast small:first-of-type { margin-top: 4px; }
@keyframes toastin { from { opacity: 0; transform: translateY(12px); } }
.float-points { position: fixed; z-index: 201; font: 800 18px var(--font-head); color: var(--void-hi); pointer-events: none; text-shadow: 0 0 12px rgba(122, 90, 166, .9); animation: floatup 1.2s ease forwards; }
@keyframes floatup { to { transform: translateY(-40px); opacity: 0; } }

/* ---------- Profile ---------- */
.profile-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.avatar { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font: 700 36px var(--font-head); background: radial-gradient(circle, var(--red), var(--red-dim)); border: 2px solid var(--red-hi); }
.profile-main h1 { font: 700 28px var(--font-head); letter-spacing: .04em; }
.bio { color: #d8d8d8; margin: 4px 0; }
.profile-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 18px; text-align: center; }
.profile-stats b { display: block; font: 700 24px var(--font-head); }
.profile-stats span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.profile-bar { grid-column: 1 / -1; }
.profile-bar .rank-next { text-align: left; }
.profile-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.ledger { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ledger li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.ledger time { display: block; color: var(--muted); font-size: 12px; }
.ledger b { color: var(--void-hi); } .ledger b.neg { color: #ff7a7a; }

/* ---------- Error page ---------- */
.error-page { max-width: 560px; margin: 40px auto; text-align: center; padding: 40px 24px; }
.error-code { display: block; font: 700 64px var(--font-head); color: var(--red); line-height: 1; }
.error-page h1 { font: 700 22px var(--font-head); letter-spacing: .08em; text-transform: uppercase; margin: 8px 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 32px 0 18px; margin-top: 24px; font-size: 14px; color: var(--muted); background: linear-gradient(180deg, #0d0d0d, var(--bg)); }
.footer-inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.footer-logo { display: inline-flex; align-items: center; margin-bottom: 10px; }
.footer-logo img { display: block; height: 32px; width: auto; }
.footer-brand p { margin: 0 0 10px; max-width: 380px; }
.footer-game a { color: var(--red-hi); }
.footer-col { display: flex; flex-direction: column; gap: 6px; }
.footer-col h3 { font: 700 12px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--text); margin: 0 0 4px; }
.footer-col a { color: var(--muted); }
.footer-col a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .dash { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 980px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash-right { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
  .watch-layout, .hub-body, .profile-body { grid-template-columns: minmax(0, 1fr); }
  .comments-panel { position: relative; top: auto; max-height: none; }
  .hub-side { position: static; }
  .comment-list { max-height: 480px; }
}
@media (max-width: 820px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash-right .game-list { max-height: 360px; }
  .feature-row { grid-template-columns: repeat(2, 1fr); }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip div:nth-child(2) { border-right: 0; }
  .stat-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .hub-inner { flex-direction: column; align-items: flex-start; }
  .hub-cover { width: 90px; }
  .hub-text h1 { font-size: 24px; }
  .profile-head { grid-template-columns: auto 1fr; }
  .profile-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .brand-tag, .hide-sm { display: none; }
  .vol { display: none; }
  .mainnav { display: none; }
}
@media (max-width: 560px) {
  .topbar { gap: 10px; padding: 8px 12px; flex-wrap: wrap; }
  .stat-pills { order: 3; width: 100%; margin-left: 0; }
  .pill { flex: 1; justify-content: center; }
  .account { margin-left: auto; }
  .brand-logo { height: 22px; }
  .stage-title { font-size: 20px; }
  .stage-art { aspect-ratio: 16 / 11; }
  .stage-copy { font-size: 14px; -webkit-line-clamp: 4; }
  .stage-actions .btn, .stage-actions .btn-ghost { width: 100%; }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-comment { width: 100%; margin: 6px 0 0; }
  .control-row .speed, .btn-theater { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Admin ---------- */
.admin-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
.admin-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; }
.admin-nav h2 { font: 700 13px var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--red-hi); padding: 0 10px 8px; }
.admin-nav a { padding: 8px 10px; border-radius: var(--radius); font-weight: 600; font-size: 15px; }
.admin-nav a:hover { background: var(--panel-2); color: var(--text); }
.admin-nav a.active { background: var(--red-dim); border-left: 3px solid var(--red); }
.admin-nav a.muted { margin-top: 10px; font-weight: 400; font-size: 14px; color: var(--muted); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.admin-stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.admin-stat span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.admin-stat b { font: 700 24px var(--font-head); }
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.panel > h2, .admin-form h2, .danger-zone h2, .welcome-panel h1 { font: 700 15px var(--font-head); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.welcome-panel { border-color: var(--red); background: linear-gradient(180deg, var(--red-dim), var(--panel)); }
.welcome-panel h1 { font-size: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.checks-row { display: flex; flex-direction: column; justify-content: center; gap: 8px; margin-bottom: 12px; }
.img-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 14px; color: var(--muted); }
.img-preview { border-radius: var(--radius); border: 1px solid var(--border-hi); object-fit: cover; }
.img-preview.cover { width: 120px; aspect-ratio: 3 / 4; }
.img-preview.banner { width: 100%; max-width: 420px; aspect-ratio: 16 / 5; }
.danger-zone { border-color: #5a1a20; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.checklist li a { color: var(--red-hi); text-decoration: underline; text-underline-offset: 3px; }
.checklist .tick { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-hi); display: grid; place-items: center; font-size: 13px; flex-shrink: 0; }
.checklist li.done { color: var(--muted); }
.checklist li.done .tick { background: var(--red); border-color: var(--red); color: #fff; }
.plain-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.plain-list li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.plain-list time { color: var(--muted); font-size: 12px; margin-left: 6px; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border-hi); }
.table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:hover td { background: #161616; }
.table tr.dim td { opacity: .55; }
.table .right { text-align: right; }
.nowrap { white-space: nowrap; }
.wrap-cell { max-width: 420px; word-wrap: break-word; }
.table-thumb { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); }
.num-input { max-width: 120px; }
form.inline { display: inline-flex; gap: 6px; margin: 0; }
.tc-mini { background: var(--red); color: #fff; border-radius: 4px; padding: 0 6px; font: 600 12px ui-monospace, monospace; }
input[type=search] { width: 260px; max-width: 100%; }
@media (max-width: 980px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-nav { position: relative; top: auto; flex-direction: row; flex-wrap: wrap; }
  .admin-nav h2 { width: 100%; }
  .admin-cols, .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- VOID color helpers ---------- */
.void-text { color: var(--void-hi) !important; }
.btn-void {
  background: linear-gradient(135deg, var(--void) 0%, #5d4386 100%); border-color: var(--void); color: #fff;
  box-shadow: 0 0 0 1px rgba(165, 139, 214, .25), 0 8px 24px rgba(122, 90, 166, .35);
}
.btn-void:hover { background: linear-gradient(135deg, #8a69b8 0%, var(--void) 100%); border-color: var(--void-hi); color: #fff; }
.profile-stats div:first-child b { color: var(--void-hi); }

/* =====================================================================
   Homepage hero: brand gradient + "void" effects, announcing Void Points
   ===================================================================== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); align-items: center; gap: 24px;
  min-height: 340px; padding: 40px 44px; margin-bottom: 16px; border-radius: 10px;
  border: 1px solid rgba(165, 139, 214, .28);
  background:
    radial-gradient(ellipse 55% 85% at 80% 45%, rgba(122, 90, 166, .42), transparent 62%),
    radial-gradient(ellipse 45% 70% at 5% 105%, rgba(209, 26, 42, .32), transparent 65%),
    linear-gradient(120deg, #110c1a 0%, #1a1128 38%, #0f0a16 70%, #1c0b10 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.hero::after { /* thin tri-color line along the bottom edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--void-hi) 25%, var(--red) 55%, var(--yellow) 80%, transparent);
  opacity: .8;
}

/* Effects layer */
.hero-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-glow { position: absolute; border-radius: 50%; }
.glow-void { width: 520px; height: 520px; right: -80px; top: -140px; background: radial-gradient(circle, rgba(122, 90, 166, .38), transparent 65%); animation: drift-a 16s ease-in-out infinite alternate; }
.glow-red  { width: 420px; height: 420px; left: -120px; bottom: -220px; background: radial-gradient(circle, rgba(209, 26, 42, .30), transparent 65%); animation: drift-b 19s ease-in-out infinite alternate; }
.glow-gold { width: 240px; height: 240px; right: 26%; bottom: -120px; background: radial-gradient(circle, rgba(226, 184, 79, .16), transparent 65%); animation: drift-a 13s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate(-60px, 40px) scale(1.08); } }
@keyframes drift-b { to { transform: translate(70px, -30px) scale(1.12); } }
.hero-stars {
  position: absolute; inset: 0; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 120px, var(--void-hi), transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, #fff, transparent),
    radial-gradient(1px 1px at 230px 150px, var(--yellow-hi), transparent),
    radial-gradient(1px 1px at 300px 40px, #fff, transparent);
  background-size: 320px 180px;
  animation: stars 60s linear infinite;
}
@keyframes stars { to { background-position: -320px 180px; } }
.hero-floor { /* perspective grid fading into the distance: the "void floor" */
  position: absolute; left: -20%; right: -20%; bottom: -10%; height: 60%;
  background-image:
    linear-gradient(rgba(165, 139, 214, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 139, 214, .22) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(420px) rotateX(62deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: floor 6s linear infinite;
}
@keyframes floor { to { background-position: 0 48px, 0 0; } }

/* Copy */
.hero-copy { position: relative; max-width: 640px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--yellow-hi); }
.kicker-new { background: var(--yellow); color: #1a1405; padding: 2px 7px; border-radius: 4px; letter-spacing: .12em; }
.hero h1, .hero .hero-h { font: 700 clamp(28px, 4vw, 46px)/1.08 var(--font-head); letter-spacing: .02em; margin: 12px 0 14px; }
.void-grad {
  background: linear-gradient(90deg, var(--void-hi) 0%, #c9a6ff 35%, var(--yellow-hi) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(122, 90, 166, .45));
}
.hero-lead { color: #cfc8dc; font-size: 17px; max-width: 58ch; margin-bottom: 18px; }
.hero-lead b { color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.hero-actions .btn, .hero-actions .btn-ghost { padding: 12px 20px; font-size: 16px; }
.hero-actions .btn-ghost { background: rgba(10, 10, 10, .35); }
.hero-rank { height: 8px; max-width: 420px; background: rgba(255, 255, 255, .08); border-radius: 999px; overflow: hidden; margin: 0 0 18px; }
.hero-rank span { display: block; height: 100%; background: linear-gradient(90deg, var(--void), var(--void-hi), var(--yellow)); border-radius: 999px; transition: width .6s ease; }
.hero-earn { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 14px; }
.hero-earn li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; color: #ddd; background: rgba(20, 15, 29, .7); border: 1px solid rgba(165, 139, 214, .3); }
.hero-earn li span { color: var(--void-hi); }
.hero-earn b { color: var(--yellow-hi); }
.hero-pulse { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--muted); }
.hero-pulse b { color: var(--void-hi); }
.hero-pulse .live-dot { flex-shrink: 0; }

/* The VOID orb */
.hero-orb { position: relative; justify-self: center; width: 250px; aspect-ratio: 1; }
.orb { position: absolute; inset: 0; }
.orb-ring { position: absolute; border-radius: 50%; }
.ring-outer {
  inset: 0;
  background: conic-gradient(from 0deg, transparent 0 8%, var(--void-hi) 20%, transparent 32% 44%, var(--red) 56%, transparent 66% 76%, var(--yellow) 88%, transparent 96%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: spin 9s linear infinite;
}
.ring-inner {
  inset: 26px; border: 1px dashed rgba(165, 139, 214, .45);
  animation: spin 22s linear infinite reverse;
}
.orb-core {
  position: absolute; inset: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #3b2b57 0%, #1a1228 55%, #0b0810 100%);
  box-shadow: 0 0 70px rgba(122, 90, 166, .6), 0 0 18px rgba(165, 139, 214, .5), inset 0 0 30px rgba(0, 0, 0, .85);
  animation: breathe 4s ease-in-out infinite;
}
.orb-core span { font: 700 26px var(--font-head); letter-spacing: .24em; margin-left: .24em; color: var(--void-hi); text-shadow: 0 0 14px rgba(165, 139, 214, .9); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { box-shadow: 0 0 95px rgba(122, 90, 166, .75), 0 0 24px rgba(165, 139, 214, .6), inset 0 0 30px rgba(0, 0, 0, .85); } }
.orb-chip {
  position: absolute; padding: 4px 10px; border-radius: 999px; font: 800 14px var(--font-head); letter-spacing: .04em;
  color: var(--yellow-hi); background: rgba(20, 15, 29, .88); border: 1px solid rgba(226, 184, 79, .55);
  box-shadow: 0 0 18px rgba(226, 184, 79, .2); animation: bob 3.6s ease-in-out infinite;
}
.chip-a { top: 6%; right: -6%; }
.chip-b { bottom: 14%; left: -10%; animation-delay: -1.2s; }
.chip-c { bottom: -2%; right: 8%; animation-delay: -2.4s; }
@keyframes bob { 50% { transform: translateY(-8px); } }

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 30px 24px; }
  .hero-orb { display: none; }
}
@media (max-width: 560px) {
  .hero { padding: 26px 18px; min-height: 0; }
  .hero-lead { font-size: 15px; }
  .hero-actions .btn, .hero-actions .btn-ghost { width: 100%; }
}

/* =====================================================================
   Phase 2: social + progression
   ===================================================================== */

/* Top bar: level, bell, notifications */
.pill-level { font-size: 11px; color: var(--void-hi); margin-left: 2px; letter-spacing: .04em; }
.bell-wrap { position: relative; }
.bell { position: relative; width: 38px; height: 34px; border-radius: var(--radius); border: 1px solid var(--border-hi); background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.bell:hover { border-color: var(--void); background: var(--void-dim); }
.bell svg { width: 18px; height: 18px; fill: currentColor; }
.bell-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font: 700 11px/18px var(--font-body); text-align: center; }
.notif-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-width: calc(100vw - 24px); background: var(--panel); border: 1px solid var(--border-hi); border-radius: 8px; box-shadow: var(--shadow); z-index: 60; }
.notif-head { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.notif-list { list-style: none; margin: 0; padding: 4px 0; max-height: 380px; overflow: auto; }
.notif-list li { padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.notif-list li.unread { background: var(--void-dim); border-left: 3px solid var(--void); }
.notif-list li a { color: var(--text); }
.notif-list time { display: block; font-size: 12px; color: var(--muted); }
.notif-list .empty { color: var(--muted); }

/* Toasts move to the top right so the chat dock can live bottom right */
.toasts { top: 76px; bottom: auto; }

/* Echoes chat dock */
.chat-dock { position: fixed; right: 16px; bottom: 0; width: 340px; max-width: calc(100vw - 24px); z-index: 90; background: var(--panel); border: 1px solid var(--border-hi); border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: var(--shadow); }
.chat-dock.open { border-color: var(--void); }
.chat-bar { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: none; border: 0; color: var(--text); cursor: pointer; font: 600 14px var(--font-body); }
.chat-online { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 12px; }
.chat-caret { color: var(--muted); font-size: 11px; transition: transform .2s; }
.chat-dock.open .chat-caret { transform: rotate(180deg); }
.chat-tabs { display: flex; gap: 4px; padding: 0 10px 8px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.chat-tabs button { background: var(--panel-2); border: 1px solid var(--border-hi); color: var(--muted); border-radius: 999px; padding: 3px 10px; font: 600 12px var(--font-body); cursor: pointer; white-space: nowrap; }
.chat-tabs button.active { background: var(--void-dim); border-color: var(--void); color: var(--text); }
.chat-list { list-style: none; margin: 0; padding: 8px 12px; height: 300px; overflow-y: auto; font-size: 14px; }
.chat-list li { padding: 4px 0; line-height: 1.4; word-wrap: break-word; position: relative; }
.chat-list li.mine .chat-name { color: var(--void-hi); }
.chat-list time { color: var(--muted); font-size: 11px; margin-right: 6px; }
.chat-name { font-weight: 700; margin-right: 4px; }
.chat-name.staff::after { content: " ★"; color: var(--yellow); font-size: 11px; }
.chat-title { color: var(--yellow); font-size: 11px; margin-right: 6px; }
.chat-text { color: #ddd; }
.chat-tools { display: none; position: absolute; right: 0; top: 2px; gap: 2px; background: var(--panel); }
.chat-list li:hover .chat-tools { display: inline-flex; }
.chat-tools button { background: var(--panel-2); border: 1px solid var(--border-hi); color: var(--muted); border-radius: 4px; font-size: 11px; padding: 1px 5px; cursor: pointer; }
.chat-form { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--border); }
.chat-form input { padding: 8px 10px; font-size: 14px; }
.chat-join { padding: 8px 12px; border-top: 1px solid var(--border); }
.chat-note { margin: 0; padding: 0 12px 8px; font-size: 11px; color: var(--muted); }
main.wrap { padding-bottom: 80px; }

/* Upvotes and action bars */
.upvote { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-hi); background: var(--panel-2); color: var(--text); font: 700 14px var(--font-body); cursor: pointer; transition: border-color .15s, background .15s; }
.upvote:hover:not([disabled]) { border-color: var(--void); }
.upvote.on { background: var(--void-dim); border-color: var(--void); color: var(--void-hi); }
.upvote[disabled] { opacity: .5; cursor: default; }
.upvote.pop { animation: bump .4s ease; }
.upvote-sm { padding: 2px 8px; font-size: 12px; }
.action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 12px; }
.muted-link { color: var(--muted); text-decoration: none; font-size: 14px; }
.muted-link:hover { color: #ff7a7a; }
.inline-select { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.inline-select select { width: auto; padding: 5px 8px; font-size: 13px; }
.comment-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.comment-title { color: var(--yellow); font-size: 11px; }
.radio-row { display: flex; margin-bottom: 8px; }
.radio-row input { accent-color: var(--red); }

/* Media badges: stats, #1, former #1 */
.badge-stats { right: 8px; bottom: 8px; display: flex; gap: 8px; }
.badge-champion { right: 8px; top: 8px; background: linear-gradient(135deg, var(--yellow), #ff8a3c); color: #1a0a05; font-weight: 800; }
.badge-laurel { right: 8px; top: 8px; color: var(--yellow-hi); }
.champion-tag, .laurel-tag { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; font: 800 12px var(--font-body); letter-spacing: .06em; }
.champion-tag { background: linear-gradient(135deg, var(--yellow), #ff8a3c); color: #1a0a05; }
.laurel-tag { border: 1px solid var(--yellow); color: var(--yellow-hi); }

/* ---------- Themes (post frames) ---------- */
.theme-steel      { --t1: #d5dae2; --t2: #6f7782; --t3: #aab1bb; --tglow: rgba(213, 218, 226, .22); }
.theme-crimson    { --t1: #ef2f40; --t2: #7d0d17; --t3: #ff6b76; --tglow: rgba(239, 47, 64, .3); }
.theme-violet     { --t1: #a58bd6; --t2: #4f3a73; --t3: #c9b4f2; --tglow: rgba(165, 139, 214, .35); }
.theme-moss       { --t1: #86c56f; --t2: #35602c; --t3: #b5e29f; --tglow: rgba(134, 197, 111, .28); }
.theme-frost      { --t1: #9ad8ff; --t2: #2f6f9f; --t3: #e2f5ff; --tglow: rgba(154, 216, 255, .38); }
.theme-sunforge   { --t1: #f3cf6e; --t2: #9c6b18; --t3: #fff0b8; --tglow: rgba(243, 207, 110, .38); }
.theme-nightshade { --t1: #c77dff; --t2: #2e0f4d; --t3: #7a5aa6; --tglow: rgba(199, 125, 255, .42); }
.theme-riftfire   { --t1: #ef2f40; --t2: #a58bd6; --t3: #f3cf6e; --tglow: rgba(239, 47, 64, .42); }
.theme-aurora     { --t1: #5fe0c1; --t2: #a58bd6; --t3: #f3cf6e; --tglow: rgba(95, 224, 193, .38); }
.theme-ember      { --t1: #ff6a2b; --t2: #d11a2a; --t3: #ffcf6e; --tglow: rgba(255, 106, 43, .5); }
.theme-voidcrown  { --t1: #a58bd6; --t2: #f3cf6e; --t3: #7a5aa6; --tglow: rgba(165, 139, 214, .55); }
.theme-laureate   { --t1: #4fd1c1; --t2: #f3cf6e; --t3: #1c7f74; --tglow: rgba(79, 209, 193, .45); }

.themed .media-thumb, .watch-info.themed, .theme-swatch.themed {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--frame-bg, var(--panel-3)), var(--frame-bg, var(--panel-3))) padding-box,
    linear-gradient(135deg, var(--t1), var(--t2), var(--t3), var(--t1)) border-box;
  background-size: auto, 300% 300%;
  box-shadow: 0 0 18px -4px var(--tglow);
}
.watch-info.themed { --frame-bg: var(--panel); }
.theme-swatch.themed { --frame-bg: var(--panel-2); }
/* Epic and legendary frames move */
.theme-riftfire .media-thumb, .watch-info.theme-riftfire, .theme-swatch.theme-riftfire,
.theme-aurora .media-thumb, .watch-info.theme-aurora, .theme-swatch.theme-aurora,
.theme-ember .media-thumb, .watch-info.theme-ember, .theme-swatch.theme-ember,
.theme-voidcrown .media-thumb, .watch-info.theme-voidcrown, .theme-swatch.theme-voidcrown,
.theme-laureate .media-thumb, .watch-info.theme-laureate, .theme-swatch.theme-laureate { animation: frame-flow 5s linear infinite; }
.theme-nightshade .media-thumb, .watch-info.theme-nightshade, .theme-swatch.theme-nightshade,
.theme-frost .media-thumb, .watch-info.theme-frost { animation: frame-glow 3.2s ease-in-out infinite; }
.theme-ember .media-thumb, .watch-info.theme-ember { box-shadow: 0 0 24px -4px var(--tglow), 0 -6px 18px -8px #ff6a2b inset; }
@keyframes frame-flow { to { background-position: 0 0, 300% 50%; } }
@keyframes frame-glow { 50% { box-shadow: 0 0 28px -2px var(--tglow); } }
.fx-still .media-thumb { animation: none !important; }

/* The Champion border: #1 posts, on top of any theme */
.champion .media-thumb, .watch-info.champion {
  outline: 2px solid rgba(243, 207, 110, .9); outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--red), 0 0 26px rgba(239, 47, 64, .45);
  animation: champion-glow 2.4s ease-in-out infinite;
}
@keyframes champion-glow { 50% { box-shadow: 0 0 0 1px var(--red), 0 0 36px rgba(243, 207, 110, .55); } }

/* ---------- Game hub: scores, rating, population, council ---------- */
.chip-void { background: var(--void-dim); border-color: var(--void); color: var(--void-hi); }
a.chip-void:hover { color: #fff; }
.score-tiles { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.score-tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; }
.score-tile span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.score-tile b { display: block; font: 700 28px var(--font-head); }
.score-tile small { color: var(--muted); font-size: 12px; }
.score-tile.overall { border-color: var(--void); background: linear-gradient(180deg, var(--void-dim), var(--panel-2)); }
.score-tile.overall b { color: var(--void-hi); font-size: 36px; }
.score-note { color: var(--yellow-hi); font-size: 14px; margin: 0 0 12px; }
.p2w-meter { margin: 14px 0; }
.p2w-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.p2w-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.p2w-seg { height: 10px; border-radius: 3px; }
.p2w-seg.p2w-1 { background: #3f9d62; } .p2w-seg.p2w-2 { background: #86b04a; } .p2w-seg.p2w-3 { background: #d9b440; }
.p2w-seg.p2w-4 { background: #e07a3a; } .p2w-seg.p2w-5 { background: #d11a2a; }
.p2w-marker { position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; background: #fff; border-radius: 2px; box-shadow: 0 0 8px rgba(255, 255, 255, .6); }
.p2w-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; }
.p2w-label.p2w-1, .p2w-label.p2w-2 { color: #86d38f; } .p2w-label.p2w-3 { color: var(--yellow-hi); } .p2w-label.p2w-4, .p2w-label.p2w-5 { color: #ff7a7a; }
.scorecard { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.scorecard li { display: grid; grid-template-columns: 170px 1fr 36px; align-items: center; gap: 10px; font-size: 14px; }
.scorecard .bar { height: 8px; background: var(--panel-3); border-radius: 999px; overflow: hidden; }
.scorecard .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--void), var(--void-hi)); }
.scorecard b { text-align: right; }
.hub-facts { margin-top: 8px; }
.score-picker { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: 12px; }
.score-picker button { padding: 8px 0; border-radius: 4px; border: 1px solid var(--border-hi); background: var(--panel-2); color: var(--text); font: 700 14px var(--font-body); cursor: pointer; }
.score-picker button:hover { border-color: var(--void); }
.score-picker button.on { background: var(--void); border-color: var(--void-hi); color: #fff; }
.p2w-picker { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.p2w-picker legend { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.p2w-choice { text-align: left; padding: 6px 10px; border-radius: 4px; border: 1px solid var(--border-hi); background: var(--panel-2); color: var(--text); font: 13px var(--font-body); cursor: pointer; border-left-width: 4px; }
.p2w-choice.p2w-1 { border-left-color: #3f9d62; } .p2w-choice.p2w-2 { border-left-color: #86b04a; } .p2w-choice.p2w-3 { border-left-color: #d9b440; }
.p2w-choice.p2w-4 { border-left-color: #e07a3a; } .p2w-choice.p2w-5 { border-left-color: #d11a2a; }
.p2w-choice.on { background: var(--panel-3); border-color: var(--void-hi); }
.cat-details { margin-bottom: 12px; font-size: 14px; }
.cat-details summary { cursor: pointer; color: var(--void-hi); margin-bottom: 8px; }
.cat-row { display: grid; grid-template-columns: 1fr 110px 34px; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--text); font-size: 13px; }
.cat-row input[type=range] { accent-color: var(--void); width: 100%; }
.cat-row output { color: var(--muted); font-size: 12px; text-align: right; }
.pop-buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 8px; }
.pop-btn { padding: 8px 2px; border-radius: 4px; border: 1px solid var(--border-hi); background: var(--panel-2); color: var(--text); font: 600 12px var(--font-body); cursor: pointer; }
.pop-btn:hover:not([disabled]) { border-color: var(--yellow); }
.pop-btn.on { background: var(--yellow); color: #1a1405; border-color: var(--yellow); }
.pop-btn[disabled]:not(.on) { opacity: .45; }
.council { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.seat { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel-2); }
.seat.held { border-color: rgba(243, 207, 110, .55); background: linear-gradient(135deg, rgba(243, 207, 110, .08), var(--panel-2)); }
.seat-name { font: 700 14px var(--font-head); letter-spacing: .06em; }
.seat-name small { font: 400 12px var(--font-body); color: var(--muted); letter-spacing: 0; }
.seat-holder { color: var(--yellow-hi); font-weight: 700; font-size: 14px; }
.seat-holder.open { color: var(--muted); font-weight: 400; }
.seat-how { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }

/* ---------- Profile: level, titles, tracks, badges, themes ---------- */
.avatar { position: relative; }
.avatar-level { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: var(--void); color: #fff; font: 700 11px var(--font-body); white-space: nowrap; border: 2px solid var(--panel); }
.equipped-title { color: var(--yellow-hi); font: 600 14px var(--font-head); letter-spacing: .1em; text-transform: uppercase; margin: 2px 0 0; }
.chip-grand { background: linear-gradient(135deg, rgba(243, 207, 110, .2), var(--void-dim)); border-color: var(--yellow); color: var(--yellow-hi); }
.profile-maincol { min-width: 0; }
.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.track { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.track.untouched { opacity: .55; }
.track-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.track-name { color: var(--muted); }
.track .rank-bar { margin: 8px 0 4px; }
.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.badge-item { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel-2); }
.badge-item.locked { opacity: .38; filter: grayscale(1); }
.badge-item.got { border-color: rgba(165, 139, 214, .45); }
.badge-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--void), var(--void-dim)); color: var(--yellow-hi); font-size: 16px; }
.badge-text { display: flex; flex-direction: column; min-width: 0; }
.badge-text b { font-size: 13px; }
.badge-text small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0 12px; }
.theme-swatch { text-align: left; padding: 10px; border-radius: var(--radius); border: 2px solid var(--border-hi); background: var(--panel-2); color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 58px; font: 600 13px var(--font-body); }
.theme-swatch small { font-weight: 400; font-size: 11px; color: var(--muted); }
.theme-swatch.locked { opacity: .45; cursor: not-allowed; }
.theme-swatch.selected { outline: 2px solid #fff; outline-offset: 2px; }
.theme-swatch.none { justify-content: center; }
/* Admin flags */
.flag-preview { font-size: 15px; }
.flag-actions { margin-top: 10px; }

@media (max-width: 820px) {
  .score-tiles { grid-template-columns: repeat(2, 1fr); }
  .scorecard li { grid-template-columns: 120px 1fr 32px; }
  .chat-dock { right: 8px; width: calc(100vw - 16px); }
  .chat-list { height: 240px; }
}

/* =====================================================================
   Phase 3: maps, pins and quests
   ===================================================================== */

/* ---------- Map page ---------- */
.kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.kicker a { color: var(--red-hi); }
.map-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.map-title h1 { font: 700 30px var(--font-head); letter-spacing: .06em; margin-bottom: 6px; }
.map-progress { min-width: 280px; flex: 0 1 420px; }
.map-progress .charted { font-size: 14px; color: var(--muted); }
.map-progress .charted b { font: 700 26px var(--font-head); color: var(--void-hi); margin-right: 4px; }
.map-progress .rank-bar { margin: 6px 0; }
.notice-void { background: var(--void-dim); border-color: var(--void); }
.notice-void a { color: var(--void-hi); text-decoration: underline; }

.map-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.cat-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 5px; border-radius: 999px; border: 1px solid var(--border-hi); background: var(--panel); color: var(--muted); font: 600 13px var(--font-body); cursor: pointer; opacity: .55; }
.cat-chip .glyph { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--c); color: #111; font-size: 12px; }
.cat-chip small { color: var(--muted); font-weight: 600; }
.cat-chip.on { opacity: 1; color: var(--text); border-color: var(--c); }
.cat-chip.empty.on { opacity: .75; }
.map-toggles { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.map-toggles .check { margin: 0; }

.map-wrap { position: relative; display: flex; gap: 0; }
.map-view { position: relative; flex: 1; height: min(74vh, 780px); min-height: 380px; overflow: hidden; border: 1px solid var(--border-hi); border-radius: 10px;
  background: repeating-linear-gradient(45deg, #0e0e0e 0 12px, #111 12px 24px); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; }
.map-view:focus-visible { box-shadow: 0 0 0 2px var(--void); }
.map-view.dragging { cursor: grabbing; }
.map-view.tagging { cursor: crosshair; box-shadow: inset 0 0 0 2px var(--yellow); }
.map-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; --inv: 1; }
.map-stage.animate { transition: transform .3s ease; }
.map-stage > img { max-width: none; width: auto; height: auto; pointer-events: none; image-rendering: auto; }
.map-grid { position: absolute; inset: 0; display: grid; pointer-events: none; }
.map-grid i { background: rgba(122, 90, 166, .28); box-shadow: inset 0 0 0 1px rgba(165, 139, 214, .45); }
.map-region { position: absolute; width: 25%; height: 25%; border: 3px dashed var(--yellow); background: rgba(226, 184, 79, .08); pointer-events: none; }
.map-region span { position: absolute; left: 8px; top: 6px; background: var(--yellow); color: #1a1405; font: 800 12px var(--font-body); padding: 2px 8px; border-radius: 4px;
  transform: scale(var(--inv)); transform-origin: 0 0; }
.map-pins { position: absolute; inset: 0; }
.pin { position: absolute; width: 30px; height: 30px; margin: 0; padding: 0; border: 2px solid #fff; border-radius: 50% 50% 50% 0; background: var(--c, #9aa0a6);
  transform: translate(-50%, -100%) scale(var(--inv)) rotate(-45deg); transform-origin: 50% 100%; cursor: pointer; box-shadow: 0 3px 8px rgba(0, 0, 0, .6);
  display: grid; place-items: center; transition: filter .15s; }
.pin > span { transform: rotate(45deg); color: #111; font: 800 14px/1 var(--font-body); }
.pin:hover, .pin:focus-visible { filter: brightness(1.2); outline: none; z-index: 3; }
.pin.open { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(226, 184, 79, .5), 0 3px 8px rgba(0, 0, 0, .6); z-index: 4; }
.pin.is-top { border-color: var(--yellow); box-shadow: 0 0 14px 3px rgba(243, 207, 110, .75); z-index: 2; }
.pin.has-video::after { content: ""; position: absolute; right: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 2px solid #fff; }
.pin.is-disc > span::after { content: ""; }
.pin.temp { background: var(--yellow); animation: pin-drop .35s ease; }
.pin.just-added { animation: pin-drop .5s ease; }
@keyframes pin-drop { from { opacity: 0; margin-top: -24px; } to { opacity: 1; margin-top: 0; } }
.map-zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
.map-zoom button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-hi); background: rgba(19, 19, 19, .92); color: var(--text); font: 700 18px var(--font-body); cursor: pointer; }
.map-zoom button:hover { border-color: var(--void); }
.map-banner { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6; background: var(--yellow); color: #1a1405; font-weight: 700; padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow); }
.map-banner .link { color: #1a1405; text-decoration: underline; font-weight: 700; }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }

.pin-drawer { width: 360px; flex: 0 0 360px; margin-left: 12px; height: min(74vh, 780px); min-height: 380px; overflow-y: auto; }
.drawer-card { position: relative; background: var(--panel); border: 1px solid var(--border-hi); border-radius: 10px; padding: 18px; min-height: 100%; }
.drawer-card.themed { border-width: 2px; }
.drawer-card h2 { font: 700 22px var(--font-head); margin: 8px 0 4px; padding-right: 26px; }
.drawer-x { position: absolute; right: 8px; top: 6px; background: none; border: 0; color: var(--muted); font-size: 26px; cursor: pointer; line-height: 1; padding: 4px 8px; }
.drawer-x:hover { color: var(--text); }
.pin-cat { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 700 12px var(--font-body); background: var(--c); color: #111; }
.drawer-card .champion-tag { margin: 8px 0 0 6px; }
.discovered { color: var(--void-hi); font-weight: 700; margin: 4px 0 10px; }
.discovered a { color: var(--void-hi); text-decoration: underline; }
.pin-desc { white-space: pre-wrap; }
.drawer-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.pin-media { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-item { position: relative; display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: #000; }
.pm-item img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.pm-time { position: absolute; left: 6px; top: 6px; background: var(--red); color: #fff; font: 700 11px var(--font-body); padding: 2px 6px; border-radius: 4px; }
.pm-title { display: block; font-size: 12px; padding: 4px 6px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-comments { list-style: none; margin: 0 0 10px; padding: 0; }
.pin-comments li { border-bottom: 1px solid var(--border); padding: 8px 0; font-size: 14px; }
.pin-comments li p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.pc-head time { color: var(--muted); font-size: 12px; }
.pc-user { font-weight: 700; color: var(--void-hi); }
.pin-comment-form { display: grid; gap: 8px; }
.pin-comment-form textarea { width: 100%; }
.attach-box { border: 1px solid var(--border-hi); border-radius: var(--radius); padding: 10px 12px 4px; margin: 6px 0 14px; }
.attach-box legend { font-size: 13px; color: var(--muted); padding: 0 4px; }
.attach-box .seg { flex-wrap: wrap; margin-bottom: 10px; }
.pin-cell-note { align-self: end; margin-bottom: 14px; }

.map-below { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.leader-list { list-style: none; margin: 0; padding: 0; }
.leader-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.leader-list .pos { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--panel-3); font: 700 12px var(--font-body); }
.leader-list li:first-child .pos { background: var(--yellow); color: #1a1405; }
.leader-list b { margin-left: auto; color: var(--void-hi); font-size: 14px; }
.map-below .earn-list li { display: block; }

.seen-on-map { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; }

/* ---------- Maps on game hubs ---------- */
.map-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.map-card { display: block; border: 1px solid var(--border-hi); border-radius: 10px; overflow: hidden; background: var(--panel-2); transition: border-color .15s, transform .15s; }
.map-card:hover { border-color: var(--void); transform: translateY(-2px); color: var(--text); }
.map-thumb { position: relative; display: block; background: #000; }
.map-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.map-card.locked .map-thumb img { filter: grayscale(1) brightness(.45); }
.map-lock { position: absolute; inset: 0; display: grid; place-items: center; font: 700 16px var(--font-body); color: var(--yellow-hi); }
.map-card-body { display: block; padding: 10px 12px 12px; }
.map-card-body b { display: block; font-size: 16px; }
.map-card-body small { display: block; font-size: 12px; color: var(--muted); }
.map-card-body .rank-bar { margin: 8px 0 4px; }
.map-mini { list-style: none; margin: 0; padding: 0; }
.map-mini li a { display: block; padding: 6px 0; }
.map-mini .rank-bar { margin: 5px 0 2px; height: 6px; }
.map-mini small { color: var(--muted); font-size: 12px; }

/* ---------- Quests ---------- */
.quests-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.goal-card { padding: 14px 0; border-bottom: 1px solid var(--border); }
.goal-card:last-child { border-bottom: 0; }
.goal-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.goal-top h3 { font-size: 18px; }
.goal-bar { display: block; height: 12px; background: var(--panel-3); border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.goal-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--void), var(--yellow)); border-radius: 999px; box-shadow: 0 0 12px rgba(226, 184, 79, .35); transition: width .6s ease; }
.goal-meta { font-size: 14px; color: var(--muted); margin: 0; }
.goal-meta b { color: var(--text); }
.bounty-card { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.bounty-card:last-child { border-bottom: 0; }
.bounty-reward { flex: 0 0 78px; height: 78px; border-radius: 10px; display: grid; place-content: center; text-align: center; background: linear-gradient(145deg, var(--void-dim), #2a1f10); border: 1px solid var(--yellow); }
.bounty-reward b { font: 700 22px var(--font-head); color: var(--yellow-hi); line-height: 1; }
.bounty-reward span { font-size: 11px; letter-spacing: .12em; color: var(--void-hi); }
.bounty-body { flex: 1; min-width: 0; }
.bounty-body h3 { font-size: 17px; margin-bottom: 2px; }
.contract-list { list-style: none; margin: 0; padding: 0; }
.contract-list a { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.contract-list a:hover span:nth-child(2) { color: var(--void-hi); }
.contract-list .c-icon { flex: 0 0 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: var(--void-dim); color: var(--void-hi); }
.contract-list b { margin-left: auto; color: var(--yellow-hi); white-space: nowrap; font-size: 13px; }
.contract-list.compact a { padding: 6px 0; font-size: 13px; }
.quests-panel .goal-mini { display: block; padding: 4px 0 10px; }
.quests-panel .goal-mini-title { font-weight: 700; font-size: 14px; }
.quests-panel .goal-mini small { color: var(--muted); font-size: 12px; }
.quests-panel .goal-bar { height: 8px; margin: 6px 0 4px; }
.quests-panel .btn-block { margin-top: 12px; }
.claim { border-bottom: 1px solid var(--border); padding: 10px 0; }
.claim.rejected { opacity: .6; }

@media (max-width: 980px) {
  .quests-layout { grid-template-columns: 1fr; }
  .map-below { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .map-view { height: 62vh; min-height: 320px; }
  .map-wrap { display: block; }
  .pin-drawer { position: fixed; left: 0; right: 0; bottom: 0; width: auto; height: auto; max-height: 52vh; margin: 0; z-index: 95; }
  .drawer-card { border-radius: 14px 14px 0 0; min-height: 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .6); }
  .map-toggles { width: 100%; justify-content: space-between; }
  .cat-filters { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
  .cat-chip { flex: 0 0 auto; }
  .map-title h1 { font-size: 24px; }
  .map-banner { font-size: 13px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .map-stage.animate { transition: none; }
  .pin.temp, .pin.just-added { animation: none; }
}

/* =====================================================================
   Phase 4: reviews, rankings, tier list, leaderboards, guilds, shop
   ===================================================================== */
.section-label { font: 700 14px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }
.void-text { color: var(--void-hi); }

/* ---------- Reviews ---------- */
.review-card { position: relative; margin-bottom: 16px; scroll-margin-top: 80px; transition: box-shadow .4s; }
.review-card.flash { box-shadow: 0 0 0 3px var(--yellow); }
.review-head { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.review-cover { display: block; width: 72px; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-hi); background: var(--panel-3); }
.review-cover img { width: 100%; height: 100%; object-fit: cover; }
.review-cover .cover-placeholder { font-size: 20px; }
.review-titles h2 { font: 700 22px var(--font-head); line-height: 1.25; margin-bottom: 2px; }
.review-titles h2 a:hover { color: var(--red-hi); }
.review-titles .kicker { margin-bottom: 2px; }
.review-titles p { margin: 0; }
.review-score { text-align: center; min-width: 64px; }
.review-score b { display: block; font: 800 44px/1 var(--font-head); color: var(--red-hi); text-shadow: 0 0 18px rgba(209, 26, 42, .35); }
.review-score small { color: var(--muted); font-size: 12px; }
.review-excerpt { margin: 14px 0 10px; padding: 10px 14px; border-left: 3px solid var(--void); background: var(--void-deep); border-radius: 0 6px 6px 0; font-size: 14px; color: #cfcfcf; }
.review-excerpt p { margin-bottom: 6px; }
.review-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.review-verdict { font-weight: 700; font-size: 17px; color: var(--text); margin: 10px 0; }
.review-body { max-width: none; }
.review-body p, .review-body ul, .review-body ol { margin: 0 0 12px; }
.review-body a { color: var(--void-hi); text-decoration: underline; }
.review-teaser { color: #cfcfcf; }
.review-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.yt-embed { position: relative; margin: 12px 0; border-radius: 8px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; max-width: 720px; cursor: pointer; }
.yt-embed img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.yt-embed .yt-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border-radius: 12px; border: 0; background: var(--red); color: #fff; font-size: 20px; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.yt-embed:hover .yt-play { background: var(--red-hi); }
.yt-embed.playing { cursor: default; }
.yt-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-remove { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .75); color: #fff; font-size: 18px; cursor: pointer; }

.reviewer-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: start; }
.reviewer-head .avatar { background: radial-gradient(circle, var(--void), var(--void-dim)); border-color: var(--void-hi); }
.reviewer-main h1 { font: 700 30px var(--font-head); margin-bottom: 6px; }
.reviewer-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.reviewer-edit { margin-top: 12px; }
.rv-tabs { display: none; gap: 4px; margin: 0 0 12px; background: var(--panel-2); border: 1px solid var(--border-hi); border-radius: var(--radius); padding: 3px; }
.reviewer-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
.rv-left, .rv-right { position: sticky; top: 76px; max-height: calc(100vh - 90px); overflow-y: auto; }
.rv-covers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rv-covers a { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 5px; overflow: hidden; border: 1px solid var(--border-hi); background: var(--panel-3); }
.rv-covers img { width: 100%; height: 100%; object-fit: cover; }
.rv-covers .cover-placeholder { font-size: 16px; }
.rv-covers b { position: absolute; right: 3px; bottom: 3px; background: var(--red); color: #fff; font: 800 11px var(--font-body); padding: 1px 5px; border-radius: 3px; }
.fav-list { margin: 0; padding-left: 20px; }
.fav-list a { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 14px; }
.fav-list b { color: var(--red-hi); }
.rv-back { margin-bottom: 10px; }
.feed-end { text-align: center; color: var(--muted); padding: 18px; font-size: 14px; }
.dir-filter { width: 100%; margin-bottom: 6px; }
.dir-list { list-style: none; margin: 0 0 6px; padding: 0; }
.dir-list a { display: block; padding: 6px 8px; border-radius: 5px; border-left: 3px solid transparent; font-size: 14px; }
.dir-list a small { display: block; color: var(--muted); font-size: 12px; }
.dir-list a:hover { background: var(--panel-2); }
.dir-list a.current { border-left-color: var(--void-hi); background: var(--void-deep); color: var(--void-hi); }

.review-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.review-form-side { position: sticky; top: 76px; }
.review-form-side .panel { margin-bottom: 14px; }
.first-review { border-color: var(--void); }
.editor { border: 1px solid var(--border-hi); border-radius: 8px; background: var(--panel); margin-bottom: 14px; }
.editor:focus-within { border-color: var(--void); }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--border); position: sticky; top: 60px; background: var(--panel); z-index: 2; border-radius: 8px 8px 0 0; }
.editor-toolbar button { min-width: 34px; height: 32px; border-radius: 5px; border: 1px solid transparent; background: var(--panel-2); color: var(--text); font: 14px var(--font-body); cursor: pointer; padding: 0 8px; }
.editor-toolbar button:hover { border-color: var(--border-hi); }
.editor-toolbar button.on { background: var(--void-dim); border-color: var(--void); color: var(--void-hi); }
.editor-toolbar .yt-btn { background: var(--red); color: #fff; font-weight: 700; }
.editor-toolbar .sep { width: 1px; background: var(--border-hi); margin: 4px 2px; }
.editor-area { min-height: 320px; padding: 14px 16px; outline: none; max-width: none; line-height: 1.7; }
.editor-area:empty::before { content: "Write your review. Tell people what it's like to play, what's great, what isn't, and who it's for."; color: var(--muted); }
.editor-area p { margin: 0 0 12px; }
.editor-area a { color: var(--void-hi); }
.editor-foot { padding: 6px 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.editor-foot [data-char-count] { font-weight: 700; color: var(--red-hi); }
.editor-foot [data-char-count].ok { color: var(--good); }

/* ---------- Rankings ---------- */
.rank-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 12px; }
.rank-filters label { margin: 0; font-size: 13px; }
.rank-filters select { min-width: 120px; }
.rank-table, .power-list { list-style: none; margin: 0; padding: 0; }
.rank-row { display: grid; grid-template-columns: 34px 46px 44px minmax(0, 1fr) auto 82px; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.rank-pos { font: 800 20px var(--font-head); text-align: center; color: var(--muted); }
.rank-row:nth-child(1) .rank-pos, .power-list li:nth-child(1) .rank-pos { color: var(--yellow-hi); }
.rank-row:nth-child(2) .rank-pos, .power-list li:nth-child(2) .rank-pos { color: #d7d7d7; }
.rank-row:nth-child(3) .rank-pos, .power-list li:nth-child(3) .rank-pos { color: #d9965a; }
.rank-move { font: 700 12px var(--font-body); text-align: center; }
.move-up { color: var(--good); } .move-down { color: #ff6b6b; } .move-same { color: var(--muted); }
.move-new { background: var(--red); color: #fff; padding: 1px 5px; border-radius: 3px; font-size: 10px; letter-spacing: .06em; }
.rank-cover { display: block; width: 44px; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; background: var(--panel-3); border: 1px solid var(--border-hi); }
.rank-cover img { width: 100%; height: 100%; object-fit: cover; }
.rank-cover .cover-placeholder { font-size: 13px; }
.rank-game { min-width: 0; }
.rank-game b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-game small { color: var(--muted); font-size: 12px; }
.rank-value { text-align: right; }
.rank-value b { font: 800 22px var(--font-head); color: var(--void-hi); }
.rank-value small { color: var(--muted); font-size: 11px; }
.rank-signals { grid-column: 4 / -1; font-size: 13px; }
.rank-signals summary { cursor: pointer; color: var(--muted); }
.rank-signals ul { list-style: none; margin: 6px 0 0; padding: 0; }
.rank-signals li { display: grid; grid-template-columns: 170px 1fr 36px; gap: 8px; align-items: center; padding: 2px 0; }
.rank-signals .bar { height: 6px; background: var(--panel-3); border-radius: 999px; overflow: hidden; }
.rank-signals .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--void), var(--yellow)); }
.rank-note { margin: 10px 0 0; }
.p2w-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 700 11px var(--font-body); white-space: nowrap; border: 1px solid; }
.p2w-badge.p2w-1 { color: #86d38f; border-color: #3f9d62; background: rgba(63, 157, 98, .12); }
.p2w-badge.p2w-2 { color: #b9d77a; border-color: #86b04a; background: rgba(134, 176, 74, .12); }
.p2w-badge.p2w-3 { color: var(--yellow-hi); border-color: #d9b440; background: rgba(217, 180, 64, .12); }
.p2w-badge.p2w-4 { color: #ffae7a; border-color: #e07a3a; background: rgba(224, 122, 58, .12); }
.p2w-badge.p2w-5 { color: #ff7a7a; border-color: #d11a2a; background: rgba(209, 26, 42, .15); }

.power-panel .seg { margin-bottom: 8px; }
.power-list li { display: grid; grid-template-columns: 26px 38px 34px minmax(0, 1fr) auto 56px auto; gap: 8px 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.power-list .rank-pos { font-size: 16px; }
.power-list .rank-cover { width: 34px; }
.power-list .rank-value b { font-size: 17px; }

/* ---------- Tier list ---------- */
.tier-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tier-board { display: grid; gap: 6px; }
.tier-row { display: grid; grid-template-columns: 64px 1fr; gap: 6px; min-height: 86px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); transition: border-color .15s, background .15s; }
.tier-row.over, .picking .tier-row:hover { border-color: var(--void-hi); background: var(--void-deep); }
.tier-row.pool { background: transparent; border-style: dashed; }
.tier-label { display: grid; place-items: center; font: 800 26px var(--font-head); border-radius: 7px 0 0 7px; color: #111; background: var(--panel-3); }
.tier-row.pool .tier-label { font: 700 11px var(--font-body); color: var(--muted); text-align: center; padding: 4px; }
.tier-label.t5 { background: #ff6b6b; } .tier-label.t4 { background: #f0a35c; } .tier-label.t3 { background: #e2d14f; } .tier-label.t2 { background: #86d38f; } .tier-label.t1 { background: #6fa8ff; }
.tier-drop { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; align-content: flex-start; }
.tier-card { position: relative; width: 64px; padding: 0; border: 1px solid var(--border-hi); border-radius: 5px; overflow: hidden; background: var(--panel-3); color: var(--text); cursor: grab; text-align: center; }
.tier-card img, .tier-card .cover-placeholder { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: grid; font-size: 16px; }
.tier-name { display: block; font-size: 10px; line-height: 1.2; padding: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tier-card small { position: absolute; right: 2px; top: 2px; background: rgba(0, 0, 0, .75); font-size: 10px; padding: 0 4px; border-radius: 3px; }
.tier-card.dragging { opacity: .4; }
.tier-card.picked { outline: 3px solid var(--yellow); outline-offset: 1px; }
.readonly .tier-card { cursor: pointer; }
.tier-board .btn { justify-self: start; margin-top: 6px; }

/* ---------- Leaderboards and guilds ---------- */
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.board-grid .panel { margin: 0; }
.leader-list li.me { background: var(--void-deep); border-radius: 6px; }
.guild-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.guild-head h1 { font: 700 28px var(--font-head); }
.guild-tag { width: 84px; height: 84px; border-radius: 14px; display: grid; place-items: center; font: 800 22px var(--font-head); letter-spacing: .06em;
  background: linear-gradient(145deg, var(--void-dim), var(--red-dim)); border: 2px solid var(--void); color: var(--yellow-hi); }
.guild-actions { max-width: 260px; }

/* ---------- Shop ---------- */
.shop-balance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.shop-balance span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.shop-balance b { font: 700 28px var(--font-head); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.shop-item { display: grid; gap: 8px; justify-items: stretch; }
.shop-item .theme-swatch { cursor: default; min-height: 80px; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.color-chip { display: grid; grid-template-columns: 18px 1fr; gap: 2px 8px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-hi); background: var(--panel-2); color: var(--text); cursor: pointer; font: 14px var(--font-body); }
.color-chip:hover { border-color: var(--c, var(--void)); }
.color-chip.current { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.color-chip .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--c); grid-row: span 2; }
.color-chip .dot.none { background: var(--text); }
.color-chip small { color: var(--muted); font-size: 12px; }
.spotlight-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.spotlight-form label { flex: 1 1 280px; margin: 0; }

/* ---------- Homepage: spotlights and community picks ---------- */
.spotlight-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.spotlight { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 120px; padding: 12px; border-radius: 10px; overflow: hidden;
  background: var(--void-deep) center / cover no-repeat; border: 1px solid var(--yellow); box-shadow: 0 0 20px rgba(226, 184, 79, .18); }
.spotlight::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .85)); }
.spotlight > * { position: relative; }
.spotlight b { font-size: 15px; line-height: 1.25; }
.spotlight small { color: #cfcfcf; font-size: 12px; }
.spot-label { position: absolute !important; left: 10px; top: 10px; background: var(--yellow); color: #1a1405; font: 800 11px var(--font-body); padding: 2px 8px; border-radius: 4px; letter-spacing: .06em; }
.spotlight.add { border-style: dashed; border-color: var(--border-hi); box-shadow: none; justify-content: center; text-align: center; }
.spotlight.add::before { display: none; }
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pick { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }
.pick:hover { border-color: var(--void); color: var(--text); }
.pick img { border-radius: 6px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.pick-label { font: 700 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--yellow-hi); }
.pick small { color: var(--muted); font-size: 12px; }
.pick-pin, .pick-score { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--void-deep); font: 800 42px var(--font-head); color: var(--void-hi); }
.pick-score { color: var(--red-hi); }

/* ---------- Phone tab bar ---------- */
.tabbar { display: none; }

@media (max-width: 1200px) {
  .reviewer-layout { grid-template-columns: 200px minmax(0, 1fr) 240px; }
}
@media (max-width: 980px) {
  .reviewer-head, .guild-head { grid-template-columns: auto 1fr; }
  .reviewer-head .profile-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .guild-actions { grid-column: 1 / -1; max-width: none; }
  .rv-tabs { display: flex; }
  .rv-tabs .seg-btn { flex: 1; }
  .reviewer-layout { grid-template-columns: 1fr; }
  .rv-left, .rv-right { position: static; max-height: none; }
  .reviewer-layout [data-rv-pane] { display: none; }
  .reviewer-layout[data-rv-show="feed"] [data-rv-pane="feed"],
  .reviewer-layout[data-rv-show="games"] [data-rv-pane="games"],
  .reviewer-layout[data-rv-show="directory"] [data-rv-pane="directory"] { display: block; }
  .review-form-grid, .tier-layout { grid-template-columns: 1fr; }
  .review-form-side { position: static; }
}
@media (max-width: 820px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 96; height: calc(58px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); background: rgba(12, 12, 12, .97); border-top: 1px solid var(--border-hi); backdrop-filter: blur(6px); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; color: var(--muted); font: 600 11px var(--font-body); cursor: pointer; }
  .tabbar span { font-size: 18px; line-height: 1; }
  .tabbar a:hover, .tabbar button:hover { color: var(--text); }
  .chat-dock { bottom: calc(58px + env(safe-area-inset-bottom)); }
  .chat-dock:not(.open) { display: none; }
  .pin-drawer { bottom: calc(58px + env(safe-area-inset-bottom)); }
  .rank-row { grid-template-columns: 28px 36px 40px minmax(0, 1fr) 64px; }
  .rank-row .rank-extra { display: none; }
  .rank-signals { grid-column: 1 / -1; }
  .rank-signals li { grid-template-columns: 120px 1fr 30px; }
  .power-list li { grid-template-columns: 24px 34px 30px minmax(0, 1fr) 50px; }
  .power-list .p2w-badge, .power-list .rank-p2w, .power-list .rank-view { display: none; }
  .review-head { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; }
  .review-cover { width: 56px; }
  .review-titles h2 { font-size: 18px; }
  .review-score b { font-size: 34px; }
  .shop-balance b { font-size: 22px; }
  .editor-toolbar { top: 0; }
}

/* ---------- Header fit (four menu links + pills since v0.20; the rest is in the sub-nav) ---------- */
.pill { white-space: nowrap; }
.mainnav a { white-space: nowrap; }
@media (max-width: 1600px) {
  .brand-tag { display: none; }
  .topbar { gap: 12px; }
  .mainnav { gap: 2px; }
  .mainnav a { padding: 8px 8px; font-size: 14px; }
  .hide-sm { display: none; }
}
@media (max-width: 1120px) and (min-width: 821px) {     /* v0.20: the four main links share the row down to here, then get their own */
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .mainnav { order: 5; width: 100%; }
}
@media (max-width: 700px) {                              /* the pills get their own row before they push past the edge */
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .stat-pills { order: 3; width: 100%; margin-left: 0; }
  .account { margin-left: auto; }
}
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 560px) {
  .tabs a { padding: 10px 11px; }
  .topbar { position: static; }                   /* phones: the bottom tab bar is the menu, so the top bar can scroll away */
  .pill { padding: 5px 10px; gap: 6px; }
  .pill b { font-size: 15px; }
}
.shop-balance small { margin-left: 4px; color: var(--muted); }
.shop-item .chip { justify-content: center; }
@media (max-width: 820px) {
  .rank-game b { white-space: normal; overflow: visible; }
  .rank-cover { width: 36px; }
}

/* ---------- Community servers (Phase 5) ---------- */
.server-chip { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 12px; line-height: 18px; background: var(--void-dim); border: 1px solid var(--void); color: var(--void-hi); white-space: nowrap; max-width: 14em; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
a.server-chip:hover { color: #fff; border-color: var(--void-hi); }
.scope-chips { margin-bottom: 8px; }
.server-head .hub-shade { background: linear-gradient(0deg, rgba(10, 10, 10, .96) 10%, rgba(20, 15, 29, .7) 60%, rgba(20, 15, 29, .35)); }
.server-head .hub-cover { width: 96px; border-color: var(--void); }
.server-head .hub-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.server-tagline { margin: 2px 0 8px; color: #d8d8d8; font-size: 15px; }
.server-switch { margin-left: auto; align-self: center; white-space: nowrap; font-size: 13px; color: var(--muted); padding-left: 12px; }
.server-switch select { margin-left: 6px; max-width: 180px; }
.server-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.server-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--border-hi); border-left: 3px solid var(--void); border-radius: var(--radius); background: var(--panel-2); color: var(--text); transition: border-color .15s, transform .15s; }
.server-card:hover { border-color: var(--void); transform: translateY(-2px); color: var(--text); }
.server-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.server-card-head b { font-size: 17px; }
.server-card .server-tagline { margin: 0; font-size: 14px; }
.server-card .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.server-card .chip { font-size: 12px; padding: 1px 8px; }
.server-score { font: 700 18px var(--font-body); color: var(--void-hi); white-space: nowrap; }
.server-score small, .server-score-big small { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 2px; }
.server-score-big { margin-bottom: 10px; }
.server-score-big b { font: 700 36px var(--font-head); color: var(--void-hi); }
.stat-list { list-style: none; margin: 0 0 12px; padding: 0; }
.stat-list li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); }
.stat-list li b { margin-left: auto; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 820px) {
  .server-switch { margin-left: 0; }
  .server-head .hub-actions { justify-content: flex-start; }
}
.tabs-row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); margin: 14px 0 16px; }
.tabs-row .tabs { border-bottom: 0; margin: 0; flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) {
  .tabs-row { flex-wrap: wrap; row-gap: 0; }
  .tabs-row .server-switch { padding: 0 0 10px; }
}

/* ---------- Teams, sharing, playlists and Kudos (Phase 7) ---------- */
.badge-vis { right: 8px; top: 8px; background: var(--void-dim); border: 1px solid var(--void); color: var(--void-hi); }
.kudos-text { color: var(--yellow-hi); font-weight: 700; }
.pill-kudos { border-color: var(--yellow); background: linear-gradient(180deg, rgba(226, 184, 79, .16), var(--panel)); }
.pill-kudos .pill-label { color: var(--yellow-hi); }
.pill-kudos b { color: #fff; }
.pill-kudos.bump { animation: bump .5s ease; }
.toast.kudos { border-left-color: var(--yellow); font-weight: 600; }
.vis-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.share-box { border: 1px solid var(--border-hi); border-radius: var(--radius); padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.share-box legend { padding: 0 6px; font-size: 13px; color: var(--muted); }
.vis-option span { display: flex; flex-direction: column; }
.vis-picker { display: flex; flex-direction: column; gap: 8px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Team pages */
.team-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; border-top: 3px solid var(--yellow); }
.team-head h1 { font: 700 28px var(--font-head); letter-spacing: .06em; text-transform: uppercase; margin: 2px 0 6px; }
.team-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.team-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.team-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border-hi); border-left: 3px solid var(--yellow); border-radius: var(--radius); background: var(--panel); color: var(--text); transition: border-color .15s, transform .15s; }
.team-card:hover { border-color: var(--yellow); transform: translateY(-2px); color: var(--text); }
.team-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.team-card-head b { font-size: 17px; }
.team-card-foot { font-size: 13px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.team-card-foot .kudos-text { margin-left: auto; }
.team-feed { list-style: none; margin: 0; padding: 0; }
.team-feed li { padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.invite-list { list-style: none; margin: 0; padding: 0; }
.invite-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.invites-panel { margin-bottom: 16px; }
.kudos-table td, .kudos-table th { white-space: nowrap; }
.shoutout-list { list-style: none; margin: 0; padding: 0; }
.shoutout-list li { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.shoutout-list p { margin: 4px 0 2px; }
.table.compact input[type=number] { width: 80px; }
[data-invite-output] { font-size: 13px; }
.invite-page { max-width: 560px; margin: 40px auto; text-align: center; }
.invite-page h1 { font: 700 28px var(--font-head); letter-spacing: .06em; text-transform: uppercase; }

/* Playlists */
.playlist-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.playlist-card { display: flex; flex-direction: column; border: 1px solid var(--border-hi); border-radius: var(--radius); overflow: hidden; background: var(--panel-2); color: var(--text); transition: border-color .15s, transform .15s; }
.playlist-card:hover { border-color: var(--void); transform: translateY(-2px); color: var(--text); }
.playlist-cover { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--void-deep) center / cover no-repeat; }
.playlist-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(10, 10, 10, .85)); }
.playlist-count { position: absolute; right: 0; top: 0; bottom: 0; width: 38%; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 22px var(--font-head); color: #fff; }
.playlist-count small { font: 500 11px var(--font-body); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.playlist-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.playlist-body b { font-size: 15px; }
.playlist-head { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.playlist-cover.big { border-radius: var(--radius); border: 1px solid var(--border-hi); }
.playlist-head h1 { font: 700 28px var(--font-head); letter-spacing: .06em; text-transform: uppercase; margin: 2px 0 4px; }
.playlist-items { list-style: none; margin: 0; padding: 0; counter-reset: pl; }
.pl-item { display: grid; grid-template-columns: 28px 160px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pl-item.resume, .pl-item.current { background: linear-gradient(90deg, var(--void-dim), transparent 70%); border-radius: var(--radius); }
.pl-num { font: 700 14px var(--font-body); color: var(--muted); text-align: center; padding-top: 6px; }
.pl-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--panel-3) center / cover no-repeat; border: 1px solid var(--border); }
.pl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-title { font-weight: 700; color: var(--text); }
.pl-note { margin: 4px 0 0; padding: 6px 10px; border-left: 3px solid var(--yellow); background: var(--panel-2); font-size: 14px; }
.pl-tools { display: flex; gap: 4px; }
.pl-edit { margin-top: 8px; }
.icon-btn { width: 30px; height: 30px; border-radius: 4px; border: 1px solid var(--border-hi); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 13px; }
.icon-btn:hover:not(:disabled) { border-color: var(--void); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.danger:hover { border-color: var(--red); color: var(--red-hi); }
.playlist-items.compact .pl-item { grid-template-columns: 24px 96px minmax(0, 1fr); padding: 6px 4px; }
.playlist-panel .pl-next { margin: 0 0 10px; }
.playlist-panel .playlist-items { max-height: 420px; overflow: auto; }
@media (max-width: 820px) {
  .playlist-head { grid-template-columns: minmax(0, 1fr); }
  .pl-item { grid-template-columns: 22px 110px minmax(0, 1fr); }
  .pl-tools { grid-column: 3; }
  .team-head-side { align-items: flex-start; }
}

/* =====================================================================
   v0.6.1: game hero, lightbox, Discord buttons, staff-score tags
   ===================================================================== */

/* Homepage game hero: our own game in development */
.game-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); align-items: end; gap: 28px;
  min-height: 380px; padding: 40px 40px 34px; margin-bottom: 16px; border-radius: 10px;
  border: 1px solid rgba(209, 26, 42, .35); background: #0b0b0d;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.game-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--red) 25%, var(--yellow) 60%, var(--void-hi) 85%, transparent); opacity: .85; }
.gh-art { position: absolute; inset: 0; z-index: -2; background: #111 center 35% / cover no-repeat; transform: scale(1.02); }
.gh-art.is-cover { filter: blur(18px) saturate(1.2); transform: scale(1.15); }
.gh-shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .82) 38%, rgba(8, 8, 10, .35) 70%, rgba(8, 8, 10, .6) 100%),
              linear-gradient(0deg, rgba(8, 8, 10, .85) 0%, transparent 55%); }
.gh-copy { max-width: 620px; }
.gh-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--yellow-hi); }
.gh-kicker .live-dot::before { background: var(--red-hi); }
.gh-title { font: 700 clamp(30px, 4.4vw, 54px)/1.04 var(--font-head); letter-spacing: .02em; margin: 12px 0 6px; text-shadow: 0 4px 24px rgba(0, 0, 0, .7); }
.gh-title a { color: #fff; }
.gh-title a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 6px; }
.gh-meta { color: #c9c3cf; font-size: 14px; margin: 0 0 12px; }
.gh-lead { color: #e2dde8; font-size: 17px; max-width: 56ch; margin-bottom: 20px; }
.gh-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gh-actions .btn, .gh-actions .btn-ghost { padding: 11px 18px; font-size: 15px; }
.gh-actions .btn-ghost { background: rgba(10, 10, 10, .45); }
.gh-admin-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.gh-admin-note a { color: var(--yellow-hi); text-decoration: underline; }
.gh-media { align-self: end; }
.gh-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gh-shot { position: relative; display: block; padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; overflow: hidden; background: #000;
  aspect-ratio: 16 / 9; cursor: zoom-in; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); transition: transform .15s, border-color .15s; }
.gh-shot.is-video { cursor: pointer; }
.gh-shot img { width: 100%; height: 100%; object-fit: cover; }
.gh-shot:hover, .gh-shot:focus-visible { transform: translateY(-2px); border-color: var(--red); }
.gh-shot .play-dot { transform: scale(.72); }
.gh-count { margin: 8px 0 0; font-size: 13px; color: #c9c3cf; text-align: right; }
.gh-count a { color: var(--yellow-hi); }
@media (max-width: 980px) {
  .game-hero { grid-template-columns: minmax(0, 1fr); padding: 30px 24px 26px; min-height: 0; }
  .gh-shots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gh-count { text-align: left; }
}
@media (max-width: 560px) {
  .game-hero { padding: 24px 16px 22px; }
  .gh-lead { font-size: 15px; }
  .gh-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-actions .btn, .gh-actions .btn-ghost { flex: 1 1 100%; justify-content: center; }
}

/* The Void Points banner, now at the bottom of the homepage */
.hero-bottom { margin: 16px 0 0; }

/* Discord link buttons (games, servers, the hero) */
.btn-discord { display: inline-flex; align-items: center; gap: 8px; }
.btn-discord svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.btn-ghost.btn-discord { border-color: rgba(165, 139, 214, .55); }
.btn-ghost.btn-discord:hover { border-color: var(--void-hi); background: var(--void-dim); }

/* "Staff score" tag on rankings for games ranked before community votes come in */
.staff-tag { display: inline-block; font: 700 10px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--yellow-hi);
  border: 1px solid rgba(226, 184, 79, .45); border-radius: 3px; padding: 0 5px; vertical-align: 1px; white-space: nowrap; }
.power-list .rank-game { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.power-list .rank-game b { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-counts { font-size: 12px; color: var(--muted); font-weight: 400; }
.rank-view { white-space: nowrap; }
.power-list .staff-tag { flex-shrink: 0; }

/* Watch page image: opens the lightbox */
.image-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: zoom-in; }
.image-open-hint { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .7);
  border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 13px; opacity: .85; transition: opacity .15s; }
.image-open:hover .image-open-hint, .image-open:focus-visible .image-open-hint { opacity: 1; border-color: var(--red); }

/* Lightbox */
html.lb-lock, html.lb-lock body { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(5, 5, 7, .96); color: #fff; }
.lb-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lb-count { font: 700 13px var(--font-body); color: var(--muted); min-width: 52px; }
.lb-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sub { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-hi); background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.lb-close:hover { border-color: var(--red); background: var(--red-dim); }
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 14px 64px; }
.lb-fig { position: relative; margin: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); user-select: none; transition: opacity .15s; }
.lb.is-loading .lb-img { opacity: .35; }
.lb-spin { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--red); opacity: 0; animation: spin 0.8s linear infinite; pointer-events: none; }
.lb.is-loading .lb-spin { opacity: 1; }
.lb.is-video .lb-img { opacity: .55; }
.lb-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 24px; font-size: 17px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(20, 20, 24, .75); color: #fff; font-size: 38px; line-height: 1; cursor: pointer; z-index: 1; }
.lb-nav:hover { border-color: var(--red); background: var(--red-dim); }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb-strip { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 14px; border-top: 1px solid rgba(255, 255, 255, .08); scrollbar-width: thin; }
.lb-thumb { position: relative; flex: 0 0 auto; width: 112px; aspect-ratio: 16 / 9; padding: 0; border: 2px solid transparent; border-radius: 5px; overflow: hidden; background: #111; cursor: pointer; opacity: .6; transition: opacity .15s, border-color .15s; }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb:hover { opacity: .9; }
.lb-thumb.active { opacity: 1; border-color: var(--red); }
.lb-thumb.is-video::after { content: "\25B6"; position: absolute; left: 5px; bottom: 3px; font-size: 11px; color: #fff; text-shadow: 0 1px 3px #000; }
@media (max-width: 820px) {
  .lb-stage { padding: 8px 8px; }
  .lb-nav { width: 40px; height: 52px; font-size: 30px; top: auto; bottom: 14px; transform: none; }
  .lb-top { gap: 10px; padding: 10px 12px; }
  .lb-open { padding: 5px 9px; font-size: 12px; }
  .lb-thumb { width: 84px; }
}

/* Game hub without a banner or videos yet: a soft blurred copy of the cover */
.hub-bg { position: absolute; inset: 0; background: center / cover no-repeat; filter: blur(24px) saturate(1.15); transform: scale(1.25); opacity: .7; }

/* =====================================================================
   Phase 8: Managed pages
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn-xs { padding: 3px 9px; font-size: 12px; }
.inline-form { display: inline; margin: 0; }
.crumbs { font-size: 14px; color: var(--muted); margin: 4px 0 12px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.hub-tagline { margin: 4px 0 8px; color: #ddd; font-size: 16px; max-width: 70ch; }

/* "Managed by" chip and the Manage page button */
.chip-managed { background: rgba(226, 184, 79, .1); border-color: rgba(226, 184, 79, .55); color: var(--yellow-hi); }
.chip-managed a { color: #fff; font-weight: 700; }
.btn-manage { border-color: rgba(226, 184, 79, .55); }
.btn-manage:hover { border-color: var(--yellow); background: rgba(226, 184, 79, .1); }
.btn-manage.on { background: var(--yellow); border-color: var(--yellow); color: #1a1405; }

/* Manage mode bar */
.manage-bar { margin-top: 12px; border-color: rgba(226, 184, 79, .5); background: linear-gradient(180deg, rgba(226, 184, 79, .07), transparent 70%), var(--panel); }
.manage-bar-head { display: flex; gap: 12px; align-items: flex-start; }
.manage-bar-head p { margin: 0; font-size: 14px; color: #d8d3c6; }
.manage-badge { flex-shrink: 0; background: var(--yellow); color: #1a1405; font: 800 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; }
.manage-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.manage-done { margin-left: auto; }
.page-sections { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-hi); }
.section-list { list-style: none; margin: 8px 0 12px; padding: 0; max-width: 460px; }
.section-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); margin-bottom: 6px; }
.section-move { display: flex; gap: 4px; }
.step-down { margin-top: 10px; }
.tabs a.tab-hidden { opacity: .55; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); }
.tabs a.tab-hidden small { text-decoration: none; }

/* Claim this page */
.claim-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; justify-content: flex-end; margin: 8px 2px 0; font-size: 13px; color: var(--muted); }

/* Curated media tiles */
.page-tile { position: relative; display: flex; flex-direction: column; min-width: 0; }
.page-tile .media-card { flex: 1; }
.tile-tag { position: absolute; z-index: 2; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; font: 700 11px var(--font-body); background: rgba(0, 0, 0, .75); border: 1px solid var(--border-hi); color: #fff; pointer-events: none; }
.tag-pinned { border-color: var(--yellow); color: var(--yellow-hi); }
.tag-hidden { border-color: var(--red); color: #ff9aa2; }
.tag-featured { top: 36px; border-color: var(--void-hi); color: var(--void-hi); }
.page-tile.is-hidden .media-card { opacity: .55; }
.tile-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 2px; }
.tile-tools form { display: flex; gap: 6px; margin: 0; }
.media-grid.managing .page-tile { outline: 1px dashed rgba(226, 184, 79, .35); outline-offset: 4px; border-radius: var(--radius); }
.curation-note { font-size: 13px; color: var(--muted); margin: -4px 0 12px; }
.curation-note a { color: var(--yellow-hi); text-decoration: underline; }
.server-card-wrap { display: flex; flex-direction: column; }
.server-card { position: relative; }
.server-card.is-pinned { border-left-color: var(--yellow); }
.server-card .tile-tag { top: -9px; right: 10px; }
.post-card .tile-tag, .page-post .tile-tag { position: static; display: inline-block; margin-bottom: 6px; }

/* Featured video on the Overview */
.featured-link { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: center; color: var(--text); }
.featured-link:hover { color: var(--text); }
.featured-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--border-hi); }
.featured-thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-link:hover .featured-thumb { border-color: var(--red); }
.featured-text { display: flex; flex-direction: column; gap: 6px; }
.featured-text b { font-size: 18px; }
.featured-text small { color: var(--muted); font-size: 14px; }
@media (max-width: 820px) { .featured-link { grid-template-columns: minmax(0, 1fr); } }

/* Posts */
.post-list { display: flex; flex-direction: column; gap: 10px; }
.post-card { padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--yellow); border-radius: var(--radius); background: var(--panel-2); }
.post-card h3 { font: 700 18px var(--font-body); margin: 0 0 4px; }
.post-card h3 a:hover { color: var(--yellow-hi); }
.post-meta { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.post-by { color: var(--yellow-hi); font-weight: 700; }
.post-excerpt { font-size: 15px; color: #d6d6d6; margin: 0 0 8px; }
.post-stats { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--muted); margin: 0; }
.post-stats .panel-link { margin-left: auto; }
.post-list.compact .post-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-form .editor-area { min-height: 180px; }
.page-post h1 { font: 700 clamp(24px, 3vw, 34px)/1.15 var(--font-head); margin: 0 0 10px; }
.post-by-page { display: inline-flex; align-items: center; gap: 6px; }
.post-by-page img { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; }
.post-by-page a { color: var(--yellow-hi); font-weight: 700; }
.comment-thread { list-style: none; margin: 0 0 14px; padding: 0; }
.comment-thread li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.comment-thread p { margin: 4px 0 6px; }
.comment-tools { display: flex; gap: 12px; align-items: center; }
.page-card-head { display: flex; gap: 12px; align-items: center; color: var(--text); margin-bottom: 10px; }
.page-card-head img { width: 56px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; border: 1px solid var(--border-hi); }
.page-card-head span { display: flex; flex-direction: column; }
.page-card .chips { margin: 0 0 10px; padding: 0; }
.more-posts { list-style: none; margin: 0; padding: 0; }
.more-posts a { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px dashed var(--border); color: var(--text); }
.more-posts a:hover b { color: var(--yellow-hi); }

/* Admin: claims */
.claim-card { padding: 14px; border: 1px solid var(--border-hi); border-left: 3px solid var(--yellow); border-radius: var(--radius); background: var(--panel-2); margin-bottom: 12px; }
.claim-card h3 { margin: 0 0 6px; font-size: 17px; }
.claim-card blockquote { margin: 8px 0; padding: 8px 12px; border-left: 2px solid var(--border-hi); color: #ddd; white-space: pre-wrap; }
.claim-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 10px; }
.claim-actions input[name=note] { min-width: 260px; }
.admin-form-inline { align-items: end; }
.admin-form-inline select, .admin-form-inline input { width: 100%; }

/* =====================================================================
   Phase 6: Deep-zoom maps
   ===================================================================== */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
@media (max-width: 820px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
.deep-zoom .tiler-progress { margin: 10px 0 14px; }
.tiler-sources { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 10px; }
.tiler-sources legend { padding: 0 6px; font-weight: 700; }
.tiler-field { margin: 4px 0 10px 26px; display: flex; flex-direction: column; gap: 4px; }

/* Tiles in the viewer: the preview underneath, sharp tiles fading in on top */
.map-tiles { position: absolute; left: 0; top: 0; pointer-events: none; }
.map-tiles.old { z-index: 0; }
.map-tiles img { position: absolute; max-width: none; opacity: 0; transition: opacity .2s; user-select: none; }
.map-tiles img.on { opacity: 1; }
.map-stage > img.is-preview { image-rendering: auto; }
.map-coords { position: absolute; left: 10px; bottom: 10px; z-index: 3; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .72); border: 1px solid var(--border-hi);
  font: 600 12px var(--font-body); color: #ddd; pointer-events: none; font-variant-numeric: tabular-nums; }
.map-credit { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 2px 8px; border-radius: 4px; background: rgba(0, 0, 0, .6); font-size: 11px; color: #bbb; }
.map-credit a { color: #ddd; text-decoration: underline; }
.map-layers { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.map-layers a { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-hi); font-size: 13px; color: var(--text); }
.map-layers a.on { background: var(--void-dim); border-color: var(--void); color: var(--void-hi); }
.map-layers a:hover { border-color: var(--void); }
.coord-entry { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.coord-entry label { flex: 1 1 90px; }
.map-share-btn { font-size: 15px; }
.map-card .layer-note { color: var(--void-hi); }
.map-banner:has(.coord-entry) { border-radius: 12px; white-space: normal; max-width: calc(100% - 20px); text-align: center; }
.map-banner .coord-entry { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 0 8px; font-weight: 600; }
.map-banner .coord-entry input { width: 76px; padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .35); background: #fff8e1; color: #1a1405; }
.map-banner .coord-entry .muted { color: #4a3d12; }
.pin-coords { font-variant-numeric: tabular-nums; }
.tiler-sources label.check { display: flex; margin: 4px 0; }

/* =====================================================================
   Phase 9: the Dev side (teal accent)
   ===================================================================== */
body.side-dev::before { background: radial-gradient(ellipse 60% 100% at 50% 0, rgba(43, 179, 163, .10), transparent 70%); }
.side-dev .panel-link { color: var(--dev-hi); }
.side-dev .mainnav .nav-dev { color: #fff; box-shadow: inset 0 -2px 0 var(--dev); }
.mainnav .nav-dev { color: var(--dev-hi); }
.mainnav .nav-dev:hover { color: #fff; }
.btn-dev { background: var(--dev); border-color: var(--dev); color: #041311; }
.btn-dev:hover { background: var(--dev-hi); border-color: var(--dev-hi); color: #041311; }
.dev-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 0 0 16px; padding-bottom: 8px; }
.dev-nav a { padding: 6px 12px; border-radius: var(--radius); color: var(--muted); font-weight: 600; font-size: 14px; }
.dev-nav a:hover { color: var(--text); background: var(--panel-2); }
.dev-nav a.active { color: var(--dev-hi); background: var(--dev-dim); }
.dev-nav .dev-brand { color: var(--dev-hi); font: 700 17px var(--font-head); letter-spacing: .06em; padding-left: 0; margin-right: 8px; }
.dev-nav .dev-brand:hover { background: none; }
.dev-nav-gap { flex: 1; }
.dev-link { color: var(--dev-hi) !important; font-weight: 600; }

.dev-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: radial-gradient(ellipse 70% 120% at 0 0, rgba(43, 179, 163, .16), transparent 60%), linear-gradient(180deg, #111 0%, var(--panel) 100%); }
.dh-kicker { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dev-hi); font-weight: 700; }
.dev-hero h1 { font: 700 34px var(--font-head); margin: 6px 0 10px; }
.dh-lead { color: #cfcfcf; max-width: 640px; }
.dh-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dh-stats { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 8px; margin: 0; }
.dh-stats div { background: rgba(0, 0, 0, .35); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
.dh-stats dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.dh-stats dd { margin: 0; font: 700 24px var(--font-head); }

.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.topic-grid-sm { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.topic-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--border-hi); border-left: 3px solid var(--tc, var(--dev)); }
.topic-tile:hover { border-color: var(--tc, var(--dev)); color: var(--text); background: var(--panel-3); }
.topic-tile b { font-size: 15px; }
.topic-tile small { color: var(--muted); font-size: 12px; }
.topic-grid-sm .topic-tile { padding: 8px 12px; }
.topic-tile.is-mine small, .topic-card.is-mine small { color: var(--dev-hi); }
.topic-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.topic-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--border-hi); border-top: 3px solid var(--tc, var(--dev)); }
.topic-card:hover { color: var(--text); border-color: var(--tc, var(--dev)); }
.topic-card b { font-size: 16px; }
.topic-card span { color: #cfcfcf; font-size: 14px; }

.topic-head, .creator-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 22px 24px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: radial-gradient(ellipse 60% 140% at 0 0, color-mix(in srgb, var(--tc, var(--dev)) 22%, transparent), transparent 65%), var(--panel); border-left: 4px solid var(--tc, var(--dev)); }
.th-kind { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.topic-head h1, .creator-head h1 { font: 700 30px var(--font-head); margin: 4px 0 6px; overflow-wrap: anywhere; }
.th-desc { color: #cfcfcf; max-width: 640px; }
.th-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.notice-dev, .ch-note { background: var(--dev-dim); border-color: var(--dev); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.filter-chips .chip:hover { border-color: var(--dev); color: var(--text); }
.filter-chips .chip.on { background: var(--dev-dim); border-color: var(--dev); color: var(--dev-hi); }
.chip-topic { border-color: var(--tc, var(--dev)); box-shadow: inset 3px 0 0 var(--tc, var(--dev)); }
.chip-topic:hover { color: var(--text); background: var(--panel-3); }
.chip-level, .level-dot { font-weight: 600; }
.level-beginner { color: var(--good); }
.level-intermediate { color: var(--yellow); }
.level-advanced { color: var(--red-hi); }
.dev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; }
.creator-credit { font-size: 13px; color: var(--muted); margin-left: 4px; }
.creator-credit a { color: var(--dev-hi); font-weight: 600; }
.claimed { color: var(--dev-hi); font-weight: 600; }

.q-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.q-list li { padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.q-list li:last-child { border-bottom: 0; }
.q-link { display: flex; gap: 8px; align-items: baseline; font-size: 14px; min-width: 0; }
.q-link .tc { flex-shrink: 0; }
.q-body { overflow-wrap: anywhere; }
.q-list-big .q-link { font-size: 16px; }
.q-list small { font-size: 12px; }
.q-none { color: var(--yellow); }
.tc { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--dev-hi); background: var(--dev-dim); padding: 1px 6px; border-radius: 4px; }
.creator-list { list-style: none; margin: 0; padding: 0; }
.creator-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.creator-list li:last-child { border-bottom: 0; }
.creator-list a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-how li { border-bottom-color: var(--border); }
kbd { font: 600 12px ui-monospace, monospace; background: var(--panel-3); border: 1px solid var(--border-hi); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }

/* The post box on /dev: topics */
.topic-picker { border: 1px solid var(--border-hi); border-radius: var(--radius); padding: 8px 12px 10px; margin: 0 0 12px; }
.topic-picker legend { font-size: 14px; padding: 0 4px; }
.tp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.tp-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); width: 52px; }
.tp-chip { display: inline-flex !important; margin: 0 !important; cursor: pointer; }
.tp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tp-chip span { padding: 3px 10px; border-radius: 999px; font-size: 13px; background: var(--panel-2); border: 1px solid var(--border-hi); color: var(--text); }
.tp-chip input:checked + span { background: var(--dev-dim); border-color: var(--dev); color: var(--dev-hi); }
.tp-chip input:focus-visible + span { outline: 2px solid var(--dev-hi); outline-offset: 1px; }
.tp-chip.is-off span { opacity: .4; cursor: not-allowed; }
.claim-code { font-size: 20px; display: flex; align-items: center; gap: 8px; }
.claim-code code { font-size: 20px; padding: 4px 10px; color: var(--dev-hi); }
.claim-verify { display: flex; gap: 8px; flex-wrap: wrap; }
.claim-verify .form-msg { flex-basis: 100%; }
.claim-verify input[type=url] { flex: 1; min-width: 200px; }
.steps-list { padding-left: 20px; color: #cfcfcf; }

/* Study tools in the player */
.study-tools { display: inline-flex; align-items: center; gap: 2px; }
.btn-frame, .btn-loop { width: auto; min-width: 34px; padding: 0 6px; font: 700 14px var(--font-body); }
.btn-loop { font-size: 12px; white-space: nowrap; }
.btn-loop.half { background: var(--dev-dim); color: var(--dev-hi); }
.btn-loop.on { background: var(--dev); color: #041311; }
.scrub-tick.is-question { background: var(--yellow); }
.scrub-tick.is-step { background: var(--dev-hi); }

/* Typed notes, chapters, answers */
.note-types { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.comment-box .note-type { display: inline-flex; margin: 0; cursor: pointer; }
.note-type input { position: absolute; opacity: 0; pointer-events: none; }
.note-type span { padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border-hi); color: var(--muted); background: var(--panel); }
.note-type input:checked + span { color: var(--text); border-color: var(--dev); background: var(--dev-dim); }
.note-type input:focus-visible + span { outline: 2px solid var(--dev-hi); }
.note-badge { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 4px; background: var(--panel-3); color: var(--muted); }
.nb-step { color: var(--dev-hi); background: var(--dev-dim); }
.nb-tip { color: var(--yellow); }
.nb-question { color: #111; background: var(--yellow); }
.nb-correction { color: var(--red-hi); background: var(--red-dim); }
.comment-list li.nt-question { border-left: 2px solid var(--yellow); }
.comment-list li.nt-correction { border-left: 2px solid var(--red); }
.q-thread { margin: 6px 0 0 8px; padding-left: 10px; border-left: 1px solid var(--border-hi); }
.q-answers { list-style: none; margin: 0; padding: 0; }
.comment-list .q-answers li { padding: 4px 0; margin: 0; border: 0; font-size: 13px; overflow-wrap: anywhere; }
.comment-list .q-answers li.accepted { color: var(--text); }
.q-answers a { font-weight: 600; }
.accepted-badge { color: var(--good); font-weight: 700; font-size: 12px; margin-right: 6px; }
.accept-btn { margin-left: 8px; color: var(--good) !important; }
.q-thread > .link { color: var(--dev-hi); }
.answer-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.answer-form[hidden] { display: none; }
.answer-form textarea { width: 100%; resize: vertical; }
.answer-form .btn { align-self: flex-end; }
.chapters { margin: 0 0 10px; }
.chapters .mini-head { margin-top: 0; }
.chapters ol { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow: auto; }
.chapters button { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 4px 6px; border-radius: 4px; cursor: pointer; font: 14px var(--font-body); }
.chapters button:hover { background: var(--panel-2); }
.chapters button.current { background: var(--dev-dim); }

@media (max-width: 820px) {
  .dev-hero { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .dev-hero h1 { font-size: 26px; }
  .dh-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dh-stats div { padding: 8px; }
  .dh-stats dd { font-size: 18px; }
  .topic-head h1, .creator-head h1 { font-size: 24px; }
}
@media (max-width: 560px) {
  .dh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-nav { gap: 2px; }
  .dev-nav a { padding: 6px 7px; font-size: 13px; }
  .dev-nav .dev-brand { font-size: 15px; margin-right: 2px; }
  .dev-nav .btn-sm { padding: 5px 9px; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-label { width: 100%; }
}

/* =====================================================================
   Phase 10: critique on images, challenges
   ===================================================================== */
.critique-stage { display: flex; flex-direction: column; background: #050505; }
.cq-frame { position: relative; align-self: center; line-height: 0; max-width: 100%; }
.cq-frame img { max-height: 78vh; max-width: 100%; width: auto; height: auto; user-select: none; -webkit-user-drag: none; }
.cq-draw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cq-draw polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .8)); }
.critique-stage.is-drawing .cq-draw { pointer-events: auto; cursor: crosshair; touch-action: none; }
.critique-stage.is-placing .cq-frame { cursor: crosshair; outline: 2px dashed var(--dev); outline-offset: -2px; }
.cq-pins { position: absolute; inset: 0; pointer-events: none; }
.cq-pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: var(--dev); color: #041311;
  font: 800 12px/22px var(--font-body); text-align: center; padding: 0; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.cq-pin.has-drawing::after { content: "✎"; position: absolute; right: -9px; top: -9px; width: 15px; height: 15px; border-radius: 50%; background: #111; color: #fff; font-size: 9px; line-height: 15px; }
.cq-pin.is-helpful { background: var(--good); }
.cq-pin.on, .cq-pin.hover, .cq-pin:hover { background: var(--yellow); transform: translate(-50%, -50%) scale(1.15); z-index: 2; }
.cq-pin.pending { background: #fff; border-color: var(--dev); animation: cq-pulse 1.2s ease-in-out infinite; pointer-events: none; }
.critique-stage.is-drawing .cq-pins { opacity: .35; }
@keyframes cq-pulse { 50% { box-shadow: 0 0 0 8px rgba(79, 209, 193, .25); } }
.cq-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); border-top: 1px solid var(--border); line-height: 1.4; }
.cq-bar .check { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); }
.cq-help { margin: 0 0 10px; }
.cq-help.on { color: var(--dev-hi); }
.cq-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.cq-tools .on { border-color: var(--dev); color: var(--dev-hi); background: var(--dev-dim); }
.cq-pens { display: inline-flex; gap: 4px; }
.cq-pen { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-hi); background: var(--pen); cursor: pointer; padding: 0; }
.cq-pen.on { border-color: #fff; box-shadow: 0 0 0 2px var(--dev); }
.cq-num { width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--dev); color: #041311; font: 800 11px var(--font-body); cursor: pointer; flex-shrink: 0; }
.cq-list li.active .cq-num { background: var(--yellow); }
.cq-list li.active { border-color: var(--dev); background: var(--dev-dim); }
.cq-has-drawing { font-size: 11px; color: var(--muted); }
.comment-actions { display: flex; gap: 10px; margin-top: 4px; }

.dev-challenge-strip { margin-bottom: 16px; }
.challenge-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 16px; }
.challenge-list-sm { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.challenge-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border-hi); background: var(--panel); border-top: 3px solid var(--border-hi); }
.challenge-card:hover { color: var(--text); border-color: var(--dev); }
.challenge-card.phase-open { border-top-color: var(--dev); background: linear-gradient(180deg, rgba(43, 179, 163, .10), var(--panel) 60%); }
.challenge-card.phase-voting { border-top-color: var(--yellow); background: linear-gradient(180deg, rgba(226, 184, 79, .10), var(--panel) 60%); }
.challenge-card.is-big .cc-title { font: 700 22px var(--font-head); }
.cc-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.cc-phase { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dev-hi); }
.phase-voting .cc-phase { color: var(--yellow-hi); }
.phase-closed .cc-phase, .phase-upcoming .cc-phase { color: var(--muted); }
.cc-clock { color: var(--muted); }
.cc-title { font-size: 17px; }
.cc-brief { color: #cfcfcf; font-size: 14px; }
.cc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.cc-prize { color: var(--yellow-hi); font-weight: 600; }
.cc-winner { font-size: 13px; color: var(--muted); }
.cc-winner b { color: var(--yellow-hi); }

.challenge-head { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; padding: 22px 24px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: radial-gradient(ellipse 60% 140% at 0 0, rgba(43, 179, 163, .18), transparent 65%), var(--panel); border-left: 4px solid var(--dev); }
.challenge-head.phase-voting { border-left-color: var(--yellow); }
.challenge-head h1 { font: 700 30px var(--font-head); margin: 4px 0 8px; overflow-wrap: anywhere; }
.ch-brief { color: #d8d8d8; margin-top: 8px; }
.ch-side { display: flex; flex-direction: column; gap: 12px; }
.ch-clock { background: rgba(0, 0, 0, .35); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
.ch-clock span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ch-clock b { font: 700 26px var(--font-head); }
.ch-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ch-steps li { text-align: center; font-size: 12px; padding: 5px 4px; border-radius: 4px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.ch-steps li.done { color: var(--text); }
.ch-steps li.now { background: var(--dev-dim); border-color: var(--dev); color: var(--dev-hi); font-weight: 700; }
.ch-prizes { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ch-prizes li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.ch-prizes b { color: var(--yellow-hi); }
.ch-theme-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; border: 2px solid var(--t1, var(--dev)); color: var(--t1, var(--dev-hi)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--t1, #4fd1c1) 18%, transparent), color-mix(in srgb, var(--t2, #f3cf6e) 18%, transparent)); box-shadow: 0 0 12px -3px var(--tglow, transparent); }
.ch-enter p { margin: 0 0 6px; }
.ch-enter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.ch-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ch-pick select { max-width: 280px; }
.ch-vote-bar { border-left: 3px solid var(--yellow); }
.ch-vote-bar p { margin: 0; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; align-items: end; }
.podium-spot { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); }
.podium-spot.place-1 { order: 2; border-color: var(--yellow); box-shadow: 0 0 24px -6px rgba(243, 207, 110, .5); }
.podium-spot.place-2 { order: 1; }
.podium-spot.place-3 { order: 3; }
.podium-place { font: 800 13px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--yellow-hi); }
.podium-meta { font-size: 13px; color: var(--muted); }
.entry { display: flex; flex-direction: column; gap: 6px; }
.entry-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.place-tag { color: var(--yellow-hi); }
.vote-btn { border: 1px solid var(--yellow); background: transparent; color: var(--yellow-hi); border-radius: 999px; padding: 3px 12px; font: 700 13px var(--font-body); cursor: pointer; }
.vote-btn:hover { background: rgba(226, 184, 79, .12); }
.vote-btn.on { background: var(--yellow); color: #1a1405; }

@media (max-width: 820px) {
  .challenge-head { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .challenge-head h1 { font-size: 24px; }
  .podium { grid-template-columns: minmax(0, 1fr); }
  .podium-spot.place-1, .podium-spot.place-2, .podium-spot.place-3 { order: 0; }
}
@media (max-width: 560px) {
  .challenge-list, .challenge-list-sm { grid-template-columns: minmax(0, 1fr); }
  .cq-pin { width: 22px; height: 22px; font-size: 11px; line-height: 18px; }
}
.tracks-sub { grid-column: 1 / -1; margin: 6px 0 -4px; color: var(--dev-hi); }
.track-dev .rank-bar span { background: linear-gradient(90deg, var(--dev), var(--dev-hi)); }
.cq-list .comment-head { flex-wrap: wrap; row-gap: 2px; }
.cq-has-drawing, .cq-list .accepted-badge, .cq-list .comment-head time { white-space: nowrap; }

/* =====================================================================
   Phase 11: learning paths, portfolios, resources, rankings, councils
   ===================================================================== */
.dev-links { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.path-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.path-grid-side { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.path-card { display: flex; gap: 12px; padding: 10px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--border-hi); border-left: 3px solid var(--tc, var(--dev)); min-width: 0; }
.path-card:hover { color: var(--text); border-color: var(--tc, var(--dev)); }
.path-card.is-done { background: linear-gradient(90deg, rgba(95, 211, 138, .08), var(--panel-2) 60%); }
.path-cover { position: relative; width: 96px; aspect-ratio: 16 / 10; flex-shrink: 0; border-radius: 4px; background: var(--panel-3) center / cover no-repeat; }
.path-parts { position: absolute; right: 4px; bottom: 4px; background: rgba(0, 0, 0, .75); border-radius: 4px; padding: 1px 6px; font: 700 13px var(--font-body); }
.path-parts small { font-weight: 400; font-size: 10px; margin-left: 3px; color: var(--muted); }
.path-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.path-text b { font-size: 15px; overflow-wrap: anywhere; }
.path-kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dev-hi); font-weight: 700; }
.path-progress { display: block; height: 6px; border-radius: 999px; background: var(--panel-3); overflow: hidden; margin-top: 4px; }
.path-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--dev), var(--dev-hi)); border-radius: 999px; transition: width .4s ease; }
.path-progress.big { height: 10px; flex: 1; min-width: 140px; margin: 0; }
.path-progress-text { font-size: 12px; color: var(--dev-hi); }
.path-tag { color: var(--dev-hi); font-weight: 700; }
.path-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 12px; }
.path-finished { color: var(--good); }
.path-check { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--dev); background: transparent; color: var(--dev-hi); font: 700 13px var(--font-body); cursor: pointer; flex-shrink: 0; align-self: center; }
.path-check:hover { background: var(--dev-dim); }
.path-check.on { background: var(--dev); color: #041311; }
.pl-item.is-done .pl-title { color: var(--muted); }

.council-list { list-style: none; margin: 0 0 8px; padding: 0; }
.council-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.council-list li:last-child { border-bottom: 0; }
.seat-name { flex-basis: 120px; color: var(--dev-hi); font-weight: 600; font-size: 13px; }
.chip-seat { border-color: var(--dev); background: var(--dev-dim); }
.chip-seat a { color: var(--dev-hi); }
.chip-collab { border-color: var(--good); color: var(--good); background: rgba(95, 211, 138, .08); }

.resource-list { list-style: none; margin: 0; padding: 0; }
.resource-list li { border-bottom: 1px solid var(--border); }
.resource-list li:last-child { border-bottom: 0; }
.resource-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 4px; }
.resource-row:hover { color: var(--text); background: var(--panel-2); }
.res-score { flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--radius); display: grid; place-items: center; font: 700 20px var(--font-head); background: var(--dev-dim); border: 1px solid var(--dev); color: var(--dev-hi); }
.res-score.none { background: var(--panel-3); border-color: var(--border-hi); color: var(--muted); }
.res-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.res-desc { color: #cfcfcf; font-size: 14px; }
.resource-head { align-items: center; }
.res-big-score { text-align: center; min-width: 120px; }
.res-big-score b { display: block; font: 700 44px var(--font-head); color: var(--dev-hi); line-height: 1; }
.res-big-score small { color: var(--muted); }
.res-reviews { list-style: none; margin: 0; padding: 0; }
.res-reviews li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.res-reviews li:last-child { border-bottom: 0; }
.res-review-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.res-rating { font: 700 18px var(--font-head); color: var(--dev-hi); }
.res-rating small { font-size: 12px; color: var(--muted); }

.dev-tabs { flex-wrap: wrap; }
.dev-tabs a.active, .dev-tabs a:hover { border-bottom-color: var(--dev); }
.dev-rank { list-style: none; margin: 0; padding: 0; }
.dev-rank li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.dev-rank li:last-child { border-bottom: 0; }
.dr-pos { width: 30px; text-align: center; font: 700 18px var(--font-head); color: var(--muted); flex-shrink: 0; }
.dev-rank li:nth-child(1) .dr-pos { color: var(--yellow-hi); }
.dr-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dr-main b { overflow-wrap: anywhere; }
.dr-score { font: 700 18px var(--font-head); color: var(--dev-hi); white-space: nowrap; }
.dr-score small { font-size: 11px; color: var(--muted); }
.skill-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.skill-tool { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.skill-tool ol { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }

.portfolio .pf-headline { font-size: 17px; font-weight: 600; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-about { color: #d8d8d8; }
.pf-links { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 14px; }
.pf-links a { color: var(--dev-hi); }
.pf-pieces { margin-top: 10px; }
.pf-picker { border: 1px solid var(--border-hi); border-radius: var(--radius); padding: 8px 12px 10px; margin: 0; }
.pf-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 300px; overflow: auto; padding: 4px; }
.pf-pick { display: flex !important; flex-direction: column; gap: 4px; margin: 0 !important; cursor: pointer; position: relative; }
.pf-pick input { position: absolute; top: 6px; left: 6px; z-index: 1; accent-color: var(--dev); }
.pf-pick span { aspect-ratio: 16 / 10; border-radius: 4px; background: var(--panel-3) center / cover no-repeat; border: 2px solid transparent; }
.pf-pick input:checked + span { border-color: var(--dev); box-shadow: 0 0 0 2px var(--dev-dim); }
.pf-pick small { font-size: 11px; color: var(--muted); line-height: 1.3; }

.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.person-card { display: flex; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--border-hi); min-width: 0; }
.person-card:hover { color: var(--text); border-color: var(--dev); }
.person-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--dev-dim); border: 1px solid var(--dev); color: var(--dev-hi); font: 700 18px var(--font-head); flex-shrink: 0; }
.person-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.person-headline { color: #d8d8d8; font-size: 14px; }
.person-text .chips { margin: 4px 0; }

@media (max-width: 820px) {
  .dev-nav { flex-wrap: nowrap; }
  .dev-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1; -webkit-overflow-scrolling: touch; }
  .dev-links::-webkit-scrollbar { display: none; }
  .dev-links a { white-space: nowrap; }
  .dev-nav-gap { display: none; }
  .res-big-score { text-align: left; }
}
@media (max-width: 560px) {
  .path-grid, .people-grid { grid-template-columns: minmax(0, 1fr); }
  .path-cover { width: 80px; }
}

@media (max-width: 820px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* =====================================================================
   v0.12.0: game links, Top Discords
   ===================================================================== */
.hub-links { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.hub-link { color: #e6e6e6; font-weight: 600; border-bottom: 1px dotted var(--border-hi); }
.hub-link:hover { color: var(--red-hi); border-bottom-color: var(--red-hi); }
.hub-link.link-steam::before, .hub-link.link-charts::before, .hub-link.link-web::before, .hub-link.link-epic::before { display: inline-block; margin-right: 5px; color: var(--muted); font-weight: 400; }
.hub-link.link-epic::before { content: "\25B6"; font-size: 10px; }
.hub-link.link-web::before { content: "\1F310"; font-size: 12px; }
.hub-link.link-steam::before { content: "\25B6"; font-size: 10px; }
.hub-link.link-charts::before { content: "\2197"; font-size: 12px; }

.discord-ours { position: relative; display: flex; align-items: center; min-height: 190px; margin-bottom: 16px; border: 1px solid rgba(165, 139, 214, .45); border-radius: var(--radius); overflow: hidden; background: var(--void-deep); }
.do-art { position: absolute; inset: 0; background: center / cover no-repeat; opacity: .35; }
.do-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, .95) 30%, rgba(10, 10, 10, .4)); }
.do-copy { position: relative; padding: 24px 28px; max-width: 620px; }
.do-kicker { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--void-hi); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.do-kicker .live-dot { font-size: 0; }
.discord-ours h2 { font: 700 28px var(--font-head); margin: 6px 0 8px; }
.discord-ours p { color: #d8d8d8; }

.discord-rank { list-style: none; margin: 0; padding: 0; }
.discord-rank li { display: grid; grid-template-columns: 28px 44px minmax(0, 1fr) 150px auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.discord-rank li:last-child { border-bottom: 0; }
.dc-pos { font: 700 18px var(--font-head); color: var(--muted); text-align: center; }
.discord-rank li:nth-child(1) .dc-pos { color: var(--yellow-hi); }
.discord-rank li:nth-child(2) .dc-pos { color: #d7d7d7; }
.discord-rank li:nth-child(3) .dc-pos { color: #d9965a; }
.dc-cover { width: 44px; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; background: var(--panel-3); display: grid; place-items: center; }
.dc-cover img { width: 100%; height: 100%; object-fit: cover; }
.dr-server .dc-cover { aspect-ratio: 1; border-radius: 50%; }
.dc-name { display: flex; flex-direction: column; min-width: 0; }
.dc-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-name small { font-size: 12px; }
.dc-counts { display: flex; flex-direction: column; line-height: 1.25; }
.dc-counts b { font: 700 18px var(--font-head); color: var(--void-hi); }
.dc-counts small { font-size: 12px; color: var(--muted); }
.dc-online { font-size: 12px; color: var(--good); display: inline-flex; align-items: center; gap: 4px; }
.dc-online .live-dot { font-size: 0; }
.dc-actions { display: flex; gap: 6px; }
.dc-note { margin: 12px 0 0; }
.bots-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bots-panel .panel-head { flex-wrap: wrap; }
.bot-dirs { display: flex; flex-wrap: wrap; gap: 6px; }
.bot-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bot-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; }
.bot-list a b { color: var(--void-hi); }
.bot-list span { color: var(--muted); font-size: 13px; }
.howto-steps { margin: 0 0 10px; padding-left: 20px; font-size: 14px; color: #d8d8d8; }
.howto-steps li { margin-bottom: 8px; }

@media (max-width: 820px) {
  .bots-layout, .bot-list { grid-template-columns: minmax(0, 1fr); }
  .discord-rank li { grid-template-columns: 24px 40px minmax(0, 1fr) auto; }
  .dc-actions { grid-column: 3 / -1; }
  .dc-view { display: none; }
  .discord-ours h2 { font-size: 22px; }
  .do-copy { padding: 18px; }
}

/* =====================================================================
   v0.13–v0.17: top lists, breadcrumbs, game landing pages, FAQ, guides
   ===================================================================== */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--border-hi); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }

/* List header */
.list-head { margin: 4px 0 14px; }
.list-head h1 { font: 700 clamp(24px, 3.2vw, 36px)/1.15 var(--font-head); letter-spacing: .02em; margin: 0 0 8px; }
.list-updated { color: #cfcfcf; margin: 0 0 8px; }
.list-updated .live-dot { display: inline-block; vertical-align: middle; margin-right: 6px; }
.list-intro { color: #d8d8d8; max-width: 88ch; }
.list-intro p { margin: 0 0 8px; }
.list-note { margin: 4px 0 0; }
.list-chips { margin: -4px 0 14px; }

/* Ranked rows: top 3 as podium cards, then rows with big covers */
.rank-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rank-table .rank-row { grid-column: 1 / -1; display: grid; grid-template-columns: 34px 40px 108px minmax(0, 1fr) 150px; gap: 16px; align-items: start;
  padding: 16px 8px; border-bottom: 1px solid var(--border); }
.rank-table .rank-row:last-child { border-bottom: 0; }
.rank-table .rank-pos { padding-top: 2px; }
.rank-table .rank-move { padding-top: 6px; }
.rank-table .rank-cover { width: 108px; height: 144px; aspect-ratio: auto; border-radius: 6px; }
.rank-table .rank-cover .cover-placeholder { font-size: 22px; }
.rank-main { min-width: 0; }
.rank-table .rank-game b { font-size: 18px; white-space: normal; }
.rank-meta { margin: 2px 0 6px; color: var(--muted); font-size: 13px; }
.rank-desc { margin: 0 0 8px; color: #d8d8d8; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 72ch; }
.rank-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.rank-chips li > a { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; background: var(--panel-2); border: 1px solid var(--border-hi); color: #d8d8d8; }
.rank-chips li > a:hover { border-color: var(--void); color: var(--text); }
.rank-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.rank-side .btn-sm, .rank-side .btn-discord { width: 100%; justify-content: center; text-align: center; }
.rank-table .rank-value b { font-size: 26px; }
.rank-tie { margin: 0; font-size: 12px; color: var(--muted); }
.rank-table .rank-signals { grid-column: auto; margin: 0; width: 100%; }
.rank-signals summary { display: flex; align-items: center; justify-content: flex-end; gap: 8px; cursor: pointer; list-style: none; color: var(--muted); font-size: 12px; }
.rank-signals summary::-webkit-details-marker { display: none; }
.sig-bars { display: inline-grid; grid-template-columns: repeat(4, 22px); gap: 3px; }
.sig-bars i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--void-hi) var(--v), var(--panel-3) var(--v)); }
.rank-table .rank-signals ul { text-align: left; margin-top: 8px; }
.rank-row.is-podium { grid-column: auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--border-hi); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.pod-art { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--panel-3) center / cover no-repeat; border-bottom: 1px solid var(--border); }
.pod-art.is-cover { background-position: center 25%; }
.pod-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55)); }
.pod-art .rank-pos { position: absolute; z-index: 1; left: 12px; top: 10px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(10,10,10,.8); border: 2px solid currentColor; font-size: 20px; }
.pod-art .rank-move { position: absolute; z-index: 1; right: 12px; top: 14px; background: rgba(10,10,10,.75); border-radius: 999px; padding: 2px 8px; }
.pod-1 .rank-pos { color: var(--yellow-hi); } .pod-2 .rank-pos { color: #d7d7d7; } .pod-3 .rank-pos { color: #d9965a; }
.pod-1 { border-color: rgba(226, 184, 79, .55); }
.pod-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.pod-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pod-top .rank-game b { font-size: 19px; }
.pod-body .rank-meta, .pod-body .rank-desc { margin: 0; }
.pod-body .rank-signals summary { justify-content: flex-start; }
.rank-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

/* Under the list */
.list-after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; margin-top: 16px; }
.list-after .list-outro { grid-column: 1 / -1; }
.list-method p { color: #d8d8d8; margin: 6px 0; }
.list-faq h2 { margin-top: 0; }
.faq-item { padding: 10px 0; border-top: 1px solid var(--border); }
.faq-item:first-of-type { border-top: 0; }
.faq-item h3, .faq-item h2 { font: 600 16px/1.35 var(--font-body); margin: 0 0 4px; }
.faq-item p { margin: 0; color: #d8d8d8; line-height: 1.5; }
details.faq-item summary { cursor: pointer; list-style: none; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary h3::after { content: " +"; color: var(--muted); }
details.faq-item[open] summary h3::after { content: " –"; }
details.faq-item p { margin-top: 6px; }
.related-lists { margin: 22px 0 8px; }
.related-lists h2 { font: 700 20px var(--font-head); margin: 0 0 10px; }
.rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.rl-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border-hi); border-radius: 8px; background: var(--panel); color: var(--text); }
.rl-card:hover { border-color: var(--void); }
.rl-card small { color: var(--muted); }
.rl-all { border-style: dashed; }

/* Homepage */
.home-intro { margin: 2px 0 14px; }
.home-intro h1 { font: 700 clamp(22px, 2.8vw, 30px)/1.2 var(--font-head); margin: 0 0 4px; letter-spacing: .02em; }
.home-intro p { margin: 0; color: #d8d8d8; }
.home-faq { margin: 18px 0; }

/* Game pages */
.hub-text h1 .h1-sub { color: var(--void-hi); }
.hub-kind { margin: -4px 0 6px; color: #e2e2e2; font-size: 15px; }
/* At a glance (slimmed in v0.23): a short sentence, the ranked-in chips and one line of small facts, no boxes */
.game-facts { margin: 4px 0 24px; padding: 0 2px 16px; border-bottom: 1px solid var(--border); }
.game-facts .gf-summary { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: #b5b5b5; max-width: 82ch; }
.gf-ranked { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 12px; }
.gf-ranked a { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--void-dim); border: 1px solid var(--void); color: var(--text); font-size: 13px; }
.gf-ranked b { color: var(--yellow-hi); }
.gf-line { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0; }
.gf-line > div { padding: 0 18px; border-left: 1px solid var(--border-hi); }
.gf-line > div:first-child { padding-left: 0; border-left: 0; }
.gf-line dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gf-line dd { margin: 3px 0 0; font-size: 14px; color: #cdcdcd; }
.gf-line dd a { color: #cdcdcd; }
.gf-line dd a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 640px) {
  .gf-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .gf-line > div { padding: 0; border-left: 0; }
  .game-facts .gf-summary { font-size: 14px; }
  .gf-ranked { flex-wrap: nowrap; gap: 5px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }      /* one swipe line on phones */
  .gf-ranked::-webkit-scrollbar { display: none; }
  .gf-ranked li { flex: 0 0 auto; }
  .gf-ranked a { padding: 2px 8px; font-size: 12px; white-space: nowrap; }
}
.sim-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; padding: 0; margin: 0; }
.sim-grid a { display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.sim-grid img, .sim-grid .cover-placeholder { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-hi); }
.sim-grid small { color: var(--muted); font-size: 12px; }
.mini-chart { margin: 12px 0 4px; }
.mini-chart svg { width: 100%; height: 140px; display: block; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; }
.mini-chart rect { fill: var(--void-hi); opacity: .85; }
.mini-chart figcaption { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 4px; }
.pn-big { margin: 0 0 4px; font-size: 18px; }
.pn-big b { font: 700 34px var(--font-head); color: var(--void-hi); margin-right: 6px; }
.do-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.do-count { margin: 0; font-size: 18px; }
.do-count b { font: 700 28px var(--font-head); color: var(--void-hi); }
.dr-discord.is-pending, .dr-discord.is-hidden, .dr-discord.is-dead { opacity: .6; }
.dc-stat { color: var(--good); }
.add-discord form { align-items: end; }

/* Guides, info pages, roundup */
.guide-section h2 { margin-top: 0; }
.guide-section p, .guide-list li { color: #d8d8d8; line-height: 1.55; }
.guide-list { padding-left: 20px; margin: 0; }
.guide-list li { margin: 4px 0; }
.bot-list-wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.roundup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ru-list { list-style: none; padding: 0; margin: 0; }
.ru-list li { padding: 6px 0; border-top: 1px solid var(--border); }
.ru-list li:first-child { border-top: 0; }
.blurb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 8px 0; border-top: 1px solid var(--border); }

@media (max-width: 980px) {
  .rank-table { grid-template-columns: minmax(0, 1fr); }
  .rank-table .rank-row { grid-template-columns: 28px 72px minmax(0, 1fr); gap: 12px; }
  .rank-table .rank-move { display: none; }
  .rank-table .rank-cover { width: 72px; height: 96px; }
  .rank-side { grid-column: 3; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; }
  .rank-side .btn-sm, .rank-side .btn-discord { width: auto; }
  .rank-side .rank-signals { width: auto; }
  .list-after { grid-template-columns: minmax(0, 1fr); }
  .pod-art { aspect-ratio: 21 / 9; }
}
@media (max-width: 560px) {
  .rank-table .rank-row { grid-template-columns: 22px 64px minmax(0, 1fr); padding: 12px 2px; }
  .rank-table .rank-cover { width: 64px; height: 85px; }
  .rank-table .rank-game b { font-size: 16px; }
  .rank-side { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blurb-row { grid-template-columns: minmax(0, 1fr); }
}

/* News stories strip (v0.17): Instagram-style bubbles on every page, about 80px tall */
.stories { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 2px 6px; margin: 0 0 10px; height: 88px; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: 0 0 auto; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text); text-decoration: none; }
.story-ring { box-sizing: border-box; display: block; width: 62px; height: 62px; border-radius: 50%; padding: 2px; background: var(--border-hi); transition: transform .15s; }
.story.is-new .story-ring { padding: 3px; background: linear-gradient(45deg, var(--yellow-hi) 0%, #f58529 25%, var(--red-hi) 50%, #c13584 70%, var(--void-hi) 100%); }
.story:hover .story-ring { transform: scale(1.05); }
.story-pic { box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); background: var(--panel-3); display: grid; place-items: center; font-weight: 700; color: var(--muted); }
.story-pic-all { font-size: 22px; color: var(--text); background: var(--panel-2); }
.story-all .story-ring { background: linear-gradient(45deg, var(--border-hi), var(--muted)); }
.story-name { max-width: 74px; font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #d8d8d8; }
.story.is-seen .story-name { color: var(--muted); }

/* /news */
.news-list { display: flex; flex-direction: column; gap: 12px; }
.news-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
.news-pic img, .news-pic .cover-placeholder { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-hi); display: grid; place-items: center; }
.news-from { margin: 0 0 2px; font-size: 13px; }
.news-card h2 { font: 700 19px/1.3 var(--font-body); margin: 0 0 6px; }
.news-card h2 a { color: var(--text); }
.news-excerpt { margin: 0 0 6px; color: #d8d8d8; line-height: 1.5; }
.pager { display: flex; gap: 8px; justify-content: center; margin: 16px 0; }
@media (max-width: 560px) {
  .news-card { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .news-pic img, .news-pic .cover-placeholder { width: 44px; height: 44px; }
  .stories { gap: 10px; }
}

/* Live homepage hero (v0.17.2) */
.gh-kicker .live-dot { color: var(--red-hi); font-weight: 800; }
.gh-kick-text { color: var(--yellow-hi); }
.gh-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: -6px 0 14px; }
.gh-stats a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: #ece6f2; background: rgba(10, 10, 10, .55); border: 1px solid rgba(255, 255, 255, .14); }
.gh-stats a:hover { border-color: var(--void-hi); color: #fff; }
.gh-now { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(95, 211, 138, .6); animation: pulse 2s infinite; }
.gh-news { margin: 0 0 16px; font-size: 14px; color: #d9d3df; }
.gh-news-tag { display: inline-block; margin-right: 4px; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--red); color: #fff; }
.gh-news a { color: #fff; font-weight: 600; }
.gh-news small { color: #a9a3ae; margin-left: 4px; }
.gh-kick-sep { color: rgba(255, 255, 255, .45); }
.pick-tag { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 7px; border-radius: 4px; font: 700 10px/1.6 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #1a1306; background: var(--yellow-hi); }
.checks-col { display: flex; flex-direction: column; gap: 4px; }

/* ---------- v0.17.4: official store screenshots ---------- */
.official-shots .shots-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.official-shots .shot { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--panel-2); }
.official-shots .shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .2s ease, opacity .2s ease; }
.official-shots .shot:hover img, .official-shots .shot:focus-visible img { transform: scale(1.03); opacity: .92; }
.official-shots .shots-credit { margin: 10px 0 0; }
.official-shots .shots-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .official-shots .shots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Admin: the official images panel and the bulk import */
.official-panel h2, .official-bulk h2 { margin-top: 0; }
.official-art { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 12px 0; }
.official-art li { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.official-art img { border-radius: var(--radius); border: 1px solid var(--border-hi); object-fit: cover; }
.official-art img.is-cover { width: 90px; aspect-ratio: 3 / 4; }
.official-art img.is-banner { width: 280px; max-width: 100%; aspect-ratio: 31 / 10; }
.official-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 0; margin: 12px 0; }
.official-grid li { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.official-grid li.is-hidden img { opacity: .35; filter: grayscale(1); }
.official-grid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.official-grid form { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; }
.official-grid small { color: var(--muted); }
.official-import textarea { min-height: 0; }
.official-cell { max-width: 280px; font-size: .9rem; }

/* ---------- v0.18.0: site stories ---------- */
.story-page { max-width: 820px; margin: 0 auto; }
.story-head { margin: 6px 0 18px; }
.story-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.story-kicker a { color: var(--yellow); font-weight: 700; }
.story-head h1, .story-preview h1 { font: 700 clamp(28px, 4.2vw, 42px)/1.15 var(--font-head); margin: 0 0 12px; }
.story-dek { font-size: 19px; line-height: 1.5; color: #cfcfcf; margin: 0 0 12px; }
.story-figure { margin: 0 0 18px; }
.story-figure img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.story-figure figcaption { color: var(--muted); font-size: 13px; margin-top: 6px; }
.story-body { font-size: 17px; line-height: 1.75; max-width: none; }
.story-body h2 { font: 700 21px/1.3 var(--font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--text); margin: 30px 0 10px; }
.story-body h3 { font: 700 16px/1.35 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--yellow); margin: 22px 0 8px; }
.story-body > :first-child { margin-top: 0; }
.story-body a { color: var(--red-hi); text-decoration: underline; text-underline-offset: 3px; }
.story-body blockquote { margin: 18px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--red); color: #e6e6e6; font-style: italic; }
.story-body ul, .story-body ol { padding-left: 22px; }
.story-body li { margin: 6px 0; }
.story-body hr { border: 0; border-top: 1px solid var(--border-hi); margin: 26px 0; }
.story-games, .story-sources { margin: 22px 0; }
.story-game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.story-game { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
.story-game:hover { border-color: var(--border-hi); }
.story-game img, .story-game .cover-placeholder { width: 54px; height: 72px; object-fit: cover; border-radius: 4px; flex: none; }
.story-game span { display: flex; flex-direction: column; min-width: 0; }
.story-game small { color: var(--muted); font-size: 12px; }
.story-sources ul { margin: 0; padding-left: 20px; color: var(--muted); }
.story-sources a { color: #d8d8d8; text-decoration: underline; text-underline-offset: 2px; }
.news-card.is-story { border-left: 3px solid var(--red); }
.story-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.story-preview { margin-top: 16px; }
@media (max-width: 640px) { .story-body { font-size: 16px; } .story-dek { font-size: 17px; } }

/* ---------- v0.19.0: VOID Patrol (the idle shooter in the corner) ---------- */
.patrol { position: fixed; left: 16px; bottom: 16px; z-index: 85; font: 600 12px/1.3 var(--font-body); color: var(--text); }
.patrol[hidden] { display: none; }
.patrol-panel { width: 216px; padding: 7px 8px 8px; background: linear-gradient(180deg, rgba(24, 17, 38, .94), rgba(9, 7, 15, .94)); border: 1px solid #3b2d55; border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 26px rgba(122, 90, 166, .22); backdrop-filter: blur(6px); }
.patrol-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 7px; }
.patrol-title { flex: 1; display: flex; align-items: center; gap: 7px; font: 700 10.5px var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--void-hi); white-space: nowrap; }
.patrol-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }
.patrol-score { color: var(--muted); white-space: nowrap; }
.patrol-score b { color: var(--yellow); font-size: 13px; }
.patrol-min { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 1px solid #3b2d55; border-radius: 6px; background: rgba(255, 255, 255, .04); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; }
.patrol-min:hover, .patrol-min:focus-visible { border-color: var(--void-hi); color: #fff; }
.patrol-screen { position: relative; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; background: #05040a;
  box-shadow: inset 0 0 0 1px rgba(165, 139, 214, .45), inset 0 0 26px rgba(0, 0, 0, .85), 0 0 0 3px rgba(122, 90, 166, .12); }
.patrol-screen canvas { display: block; width: 200px; height: 200px; }
.patrol-screen::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, transparent 62%, rgba(5, 4, 10, .55) 100%); }
.patrol-foot { display: flex; justify-content: space-between; gap: 8px; padding: 7px 3px 0; font-size: 11px; color: var(--muted); white-space: nowrap; }
.patrol-foot [data-void] { flex: 1; min-width: 0; color: var(--void-hi); overflow: hidden; text-overflow: ellipsis; }
.patrol-foot [data-next] { flex: none; font-variant-numeric: tabular-nums; }
.patrol-foot a { color: var(--void-hi); text-decoration: underline; text-underline-offset: 2px; }
.patrol-pop { position: absolute; z-index: 2; transform: translate(-50%, -50%); font: 800 13px var(--font-head); color: #d9c8ff; white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 10px rgba(122, 90, 166, .95), 0 0 2px #000; animation: patrol-pop 1.4s ease-out forwards; }
.patrol-pop.is-banked { color: var(--yellow); font-size: 11px; }
.patrol-pop.is-guest { color: #cfcfcf; }
@keyframes patrol-pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 18% { opacity: 1; transform: translate(-50%, -90%) scale(1.06); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
.patrol-mini { position: relative; width: 50px; height: 50px; padding: 0; border-radius: 50%; border: 1px solid #4a3a68; cursor: pointer;
  background: conic-gradient(from 35deg, rgba(165, 139, 214, .55) 0deg, rgba(122, 90, 166, 0) 70deg, transparent 360deg), radial-gradient(circle, #1c1430 0%, #08060e 70%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55), 0 0 18px rgba(122, 90, 166, .3); }
.patrol-mini-radar { position: absolute; inset: 7px; border-radius: 50%; border: 1px solid rgba(165, 139, 214, .45);
  background: radial-gradient(circle, rgba(243, 207, 110, .95) 0 2px, transparent 3px), radial-gradient(circle at 70% 32%, rgba(239, 47, 64, .95) 0 2px, transparent 3px),
              radial-gradient(circle, transparent 46%, rgba(165, 139, 214, .35) 47% 50%, transparent 51%); }
.patrol-mini:hover, .patrol-mini:focus-visible { border-color: var(--void-hi); }
.patrol-badge { position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center;
  background: var(--void); color: #fff; font: 800 11px var(--font-body); border: 2px solid var(--bg); }
.patrol.is-min .patrol-panel { display: none; }
.patrol:not(.is-min) .patrol-mini { display: none; }
@media (max-width: 820px) { .patrol { left: 10px; bottom: calc(70px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .patrol-pop { animation-duration: 2s; animation-timing-function: steps(1, end); } }

/* =====================================================================
   Videos (v0.20): category tiles and big sideways rows, like a streaming
   service. PvP is the headline, in red.
   ===================================================================== */
.vcats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 6px 0 26px; }
.vcat {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  aspect-ratio: 16 / 8; overflow: hidden; border-radius: 10px; color: #fff; text-align: center;
  background: linear-gradient(160deg, #282828, #0c0c0c 72%); border: 1px solid #353535;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
}
.vcat::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 10, 10, .1), rgba(10, 10, 10, .7)); }
.vcat-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .24; filter: grayscale(.5); transform: scale(1.1); transition: opacity .25s, filter .25s, transform .4s; }
.vcat-name { position: relative; z-index: 2; font: 700 clamp(17px, 1.9vw, 28px) var(--font-head); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, .85); }
.vcat-n { position: relative; z-index: 2; font-size: 12px; color: #cfcfcf; letter-spacing: .04em; }
.vcat:hover, .vcat:focus-visible { transform: scale(1.04); border-color: rgba(255, 255, 255, .85); box-shadow: 0 18px 34px rgba(0, 0, 0, .7); outline: none; }
.vcat:hover .vcat-art, .vcat:focus-visible .vcat-art { opacity: .55; filter: none; transform: scale(1); }
.vcat.on { border-color: #fff; }
.vcat.is-empty:not(.on) { opacity: .6; }
.vcat-pvp { background: linear-gradient(160deg, #551019, #140406 72%); border-color: var(--red); box-shadow: 0 12px 30px rgba(209, 26, 42, .3), inset 0 1px 0 rgba(255, 255, 255, .08); }
.vcat-pvp .vcat-name { text-shadow: 0 0 18px rgba(239, 47, 64, .85), 0 2px 10px rgba(0, 0, 0, .8); }
.vcat-pvp:hover, .vcat-pvp:focus-visible, .vcat-pvp.on { border-color: var(--red-hi); box-shadow: 0 18px 40px rgba(209, 26, 42, .5); }
.vcats-compact { margin-bottom: 18px; }
.vcats-compact .vcat { aspect-ratio: auto; height: 64px; flex-direction: row; gap: 10px; }
.vcats-compact .vcat-name { font-size: 17px; }

.vcloud-box { margin: 0 0 24px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.vcloud-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vcloud-head h2 { margin: 0; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vcloud-head .seg { margin: 0; }
.vcloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.vtag { color: #d6d6d6; font-weight: 600; line-height: 1.3; }
.vtag small { font-size: 11px; font-weight: 500; color: var(--muted); }
.vtag:hover { color: #fff; }
.vtag.s1 { font-size: 13px; color: #a6a6a6; }
.vtag.s2 { font-size: 15px; }
.vtag.s3 { font-size: 18px; }
.vtag.s4 { font-size: 22px; color: #fff; }
.vtag.s5 { font-size: 27px; color: #fff; }
.vtag.on { color: var(--red-hi); text-decoration: underline; text-underline-offset: 5px; }
.vtag-all { font-size: 13px; color: var(--yellow); }

.vrow { margin: 0 0 30px; }
.vrow-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 14px; margin-bottom: 2px; }
.vrow-head h2 { margin: 0; font-size: 20px; }
.vrow-head h2 small { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.vrow-head .seg { margin: 0; }
.vrow-xl .vrow-head h2 { font-size: 24px; }
.vrow-more { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.vrow-more:hover { color: #fff; }
.vrow-wrap { position: relative; }
.vrow-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(230px, 22vw, 330px); gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 10px;
  padding: 12px 10px 8px; margin: 0 -10px; scrollbar-width: none;
}
.vrow-track::-webkit-scrollbar { display: none; }
.vrow-xl .vrow-track { grid-auto-columns: clamp(270px, 33vw, 470px); gap: 18px; }
.vrow-arrow {
  position: absolute; top: 12px; bottom: 8px; z-index: 3; width: 52px; padding: 0; border: 0; cursor: pointer;
  color: #fff; font-size: 44px; line-height: 1; opacity: 0; transition: opacity .2s;
  background: linear-gradient(90deg, rgba(10, 10, 10, .95), rgba(10, 10, 10, 0));
}
.vrow-prev { left: -10px; }
.vrow-next { right: -10px; background: linear-gradient(270deg, rgba(10, 10, 10, .95), rgba(10, 10, 10, 0)); }
.vrow-wrap:hover .vrow-arrow, .vrow-arrow:focus-visible { opacity: 1; }
.vrow-arrow[hidden] { display: none; }
@media (hover: none) { .vrow-arrow { display: none; } }

.vtile { display: block; min-width: 0; scroll-snap-align: start; color: var(--text); }
.vtile:focus-visible { outline: none; }
.vtile-art {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #161616;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .07); transition: transform .22s ease, box-shadow .22s ease;
}
.vtile-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vtile:hover .vtile-art, .vtile:focus-visible .vtile-art { transform: scale(1.04); box-shadow: 0 16px 32px rgba(0, 0, 0, .7), 0 0 0 3px rgba(255, 255, 255, .9); }
.vtile-play {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: rgba(209, 26, 42, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); opacity: 0; transform: scale(.85); transition: opacity .2s, transform .2s;
}
.vtile-play::before { content: ''; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.vtile:hover .vtile-play, .vtile:focus-visible .vtile-play { opacity: 1; transform: scale(1); }
.vtile-one { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #1a1305; background: var(--yellow); }
.vtile-cap { display: block; padding: 10px 2px 0; }
.vtile-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; }
.vrow-xl .vtile-title { font-size: 16.5px; }
.vtile-sub { display: block; margin-top: 4px; overflow: hidden; font-size: 12.5px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }

.vgrid-box { margin-top: 6px; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px 18px; margin-top: 12px; }
.vgrid-box .pager { margin-top: 22px; }

@media (max-width: 900px) {
  .vcats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 560px) {
  .vcat { aspect-ratio: 16 / 10; }
  .vcat-name { font-size: 15px; letter-spacing: .1em; }
  .vcats-compact .vcat { height: 46px; }
  .vcats-compact .vcat-name { font-size: 13px; }
  .vcats-compact .vcat-n { display: none; }
  .vrow-lg .vrow-head h2 small { display: none; }
  .vrow-track { grid-auto-columns: 72vw; gap: 12px; }
  .vrow-xl .vrow-track { grid-auto-columns: 84vw; }
  .vgrid { grid-template-columns: 1fr; }
}

/* /reviews (v0.20) */
.reviews-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.reviews-bar .seg { margin: 0; }

/* =====================================================================
   v0.21: teal means "being built": games in development and Make Games,
   the career and business hub on the Game Dev side
   ===================================================================== */
.dev-text { color: var(--dev-hi); }
.chip-dev { background: var(--dev-dim); border-color: var(--dev); color: var(--dev-hi); }

/* The homepage hero while its game is in development; it turns red and yellow on launch day */
.game-hero.is-upcoming { border-color: rgba(43, 179, 163, .55); box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 46px rgba(43, 179, 163, .16); }
.game-hero.is-upcoming::after { background: linear-gradient(90deg, transparent, var(--dev) 22%, var(--dev-hi) 55%, var(--void-hi) 85%, transparent); }
.game-hero.is-upcoming .gh-kicker, .game-hero.is-upcoming .gh-kicker .live-dot, .game-hero.is-upcoming .gh-kick-text { color: var(--dev-hi); }
.game-hero.is-upcoming .gh-kicker .live-dot::before { background: var(--dev-hi); }
.game-hero.is-upcoming .gh-title a:hover { text-decoration-color: var(--dev); }
.game-hero.is-upcoming .gh-news-tag { background: var(--dev); color: #041311; }
.game-hero.is-upcoming .gh-shot:hover, .game-hero.is-upcoming .gh-shot:focus-visible { border-color: var(--dev-hi); }
.game-hero.is-upcoming .gh-actions .btn:not(.btn-discord) { background: var(--dev); border-color: var(--dev); color: #041311; }        /* the Discord button keeps its own look */
.game-hero.is-upcoming .gh-actions .btn:not(.btn-discord):hover { background: var(--dev-hi); border-color: var(--dev-hi); color: #041311; }
.game-hero.is-upcoming .gh-actions .btn-ghost:hover { border-color: var(--dev-hi); }
.game-hero.is-upcoming .gh-count a, .game-hero.is-upcoming .gh-admin-note a { color: var(--dev-hi); }

/* "In development" / "Coming Nov 2026" on game pages and cards */
.hub-head.is-indev { border-color: rgba(43, 179, 163, .55); box-shadow: inset 0 -3px 0 var(--dev); }
.indev-tag { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 8px; padding: 4px 12px; border-radius: 999px; font: 700 12px var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--dev-hi); background: rgba(14, 43, 40, .88); border: 1px solid rgba(43, 179, 163, .65); }
.indev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dev-hi); animation: pulse 2s infinite; }
.badge-indev { left: 8px; bottom: 8px; background: rgba(14, 43, 40, .94); color: var(--dev-hi); border: 1px solid rgba(43, 179, 163, .7); text-transform: uppercase; letter-spacing: .08em; }
.badge-type.badge-dev { background: var(--dev); color: #041311; }

/* Footer, phone tab bar, the Apprentice Dev title */
.footer-game a { color: var(--dev-hi); }
.footer-dev h3 { color: var(--dev-hi); }
.tabbar a.tab-dev { color: var(--dev-hi); }
.equipped-title.is-dev { color: var(--dev-hi); }
.dev-nav .dev-links .dev-start { color: var(--dev-hi); }

/* The homepage strip under the hero */
.make-games-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: -4px 0 18px; padding: 14px 18px; border-radius: 10px; color: var(--text);
  border: 1px solid rgba(43, 179, 163, .45); background: linear-gradient(90deg, rgba(14, 43, 40, .92), rgba(12, 12, 12, .7));
}
.make-games-band:hover { border-color: var(--dev-hi); color: var(--text); }
.mgb-kicker, .fgc-kicker { font: 700 11px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--dev-hi); }
.mgb-text { flex: 1 1 320px; color: #d6ebe8; }
.mgb-go { font-weight: 700; color: var(--dev-hi); white-space: nowrap; }

/* "Your first game": the card on Tasks and the checklist on Start Here */
.first-game-card {
  display: grid; gap: 6px; margin: 0 0 16px; padding: 14px 18px; border-radius: 10px; color: var(--text);
  border: 1px solid rgba(43, 179, 163, .45); background: linear-gradient(90deg, var(--dev-dim), var(--panel));
}
.first-game-card:hover { border-color: var(--dev-hi); color: var(--text); }
.first-game-card b { font-size: 18px; }
.fgc-line { font-size: 13px; color: var(--muted); }
.fgc-bar, .fg-bar { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.fgc-bar span, .fg-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--dev), var(--dev-hi)); }
.first-game { border-color: rgba(43, 179, 163, .45); }
.fg-count { color: var(--dev-hi); font-weight: 700; }
.fg-bar { margin: 10px 0 14px; }
.fg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fg-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 12px; padding: 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border-hi); }
.fg-num { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--dev); color: var(--dev-hi); font-weight: 700; }
.fg-text { display: grid; gap: 2px; }
.fg-text small { color: var(--muted); font-size: 13px; }
.fg-steps li > .btn-ghost { justify-self: start; }
.fg-steps li.done { border-color: rgba(43, 179, 163, .6); background: linear-gradient(180deg, var(--dev-dim), var(--panel-2)); }
.fg-steps li.done .fg-num { background: var(--dev); border-color: var(--dev); color: #041311; }
.fg-join { margin: 14px 0 0; }

/* Start Here */
.mg-hero { border-color: rgba(43, 179, 163, .45); }
.mg-section { margin: 28px 0; }
.mg-head { margin-bottom: 12px; }
.mg-head h2 { margin: 0 0 4px; }
.mg-head p { margin: 0; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.role-card { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--dev); border-radius: 8px; }
.role-card[open] { border-color: rgba(43, 179, 163, .6); }
.role-card summary { list-style: none; display: grid; gap: 4px; padding: 12px 14px; cursor: pointer; }
.role-card summary::-webkit-details-marker { display: none; }
.role-card summary b { color: #fff; }
.role-card summary span { font-size: 14px; color: var(--muted); }
.role-card summary::after { content: 'More \25BE'; font-size: 12px; font-weight: 700; color: var(--dev-hi); }
.role-card[open] summary::after { content: 'Less \25B4'; }
.role-card dl { margin: 0; padding: 0 14px 4px; }
.role-card dt { margin-top: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dev-hi); }
.role-card dd { margin: 2px 0 0; font-size: 14px; }
.role-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 8px 14px 12px; font-size: 14px; }
.role-links a, .mg-card a, .mg-more a { color: var(--dev-hi); font-weight: 600; }
.mg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mg-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mg-card { padding: 14px; background: var(--panel); border: 1px solid var(--border); border-top: 2px solid var(--dev); border-radius: 8px; }
.mg-card h3 { margin: 0 0 6px; font-size: 16px; }
.mg-card p { margin: 0 0 8px; font-size: 14px; color: #cfcfcf; }
.mg-more { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.guide-card { display: grid; align-content: start; gap: 6px; padding-bottom: 12px; overflow: hidden; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.guide-card:hover { border-color: var(--dev); color: var(--text); }
.guide-card img, .guide-art { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--dev-dim); color: var(--dev-hi); font-size: 34px; }
.guide-card b, .guide-card > span:not(.guide-art) { padding: 0 12px; }
.guide-card > span:not(.guide-art) { font-size: 13px; color: var(--muted); }
.mg-build { padding: 16px; border: 1px solid rgba(43, 179, 163, .45); border-radius: 10px; background: linear-gradient(180deg, rgba(14, 43, 40, .5), transparent 70%); }
.mg-boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; align-items: start; }
.fund-mini li { display: grid; gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--border); }
@media (max-width: 1000px) {
  .mg-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-boards { grid-template-columns: minmax(0, 1fr); }
  .fg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mg-cards-4, .fg-steps { grid-template-columns: minmax(0, 1fr); }
}

/* Opportunities */
.opp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 14px; }
.opp-filters label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.opp-list { display: grid; gap: 10px; }
.opp-row { padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--dev); border-radius: 8px; }
.opp-row h3 { margin: 6px 0 2px; font-size: 17px; }
.opp-row h3 a { color: #fff; }
.opp-row h3 a:hover { color: var(--dev-hi); }
.opp-row.compact { padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.opp-row.compact h3 { font-size: 15px; }
.opp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.opp-meta { margin: 0; }
.opp-teaser { margin: 6px 0 0; font-size: 14px; color: #cfcfcf; }
.chip.pay-paid { background: rgba(95, 211, 138, .12); border-color: var(--good); color: var(--good); }
.chip.pay-revshare { background: rgba(226, 184, 79, .12); border-color: var(--yellow); color: var(--yellow-hi); }
.chip.pay-unpaid { color: var(--muted); }
.opp-page h1 { margin: 10px 0 4px; }
.opp-pay { margin: 10px 0 0; }
.opp-warn { margin: 12px 0; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--yellow); background: rgba(226, 184, 79, .08); font-size: 14px; }
.opp-body { margin-top: 14px; }
.opp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.opp-safety { margin-top: 18px; }
.opp-safety ul { margin: 0; padding-left: 18px; }
.opp-safety li { margin: 4px 0; font-size: 14px; }
.opp-form textarea { width: 100%; }

/* Funding and programs */
.fund-list { display: grid; gap: 10px; }
.fund-card { margin: 0; }
.fund-card h2 { margin: 8px 0 6px; font-size: 18px; }
.fund-card h2 a { color: #fff; }
.fund-card h2 a:hover { color: var(--dev-hi); }
.fund-card p { margin: 4px 0; font-size: 14px; }
.fund-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fund-deadline { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); }
.fund-deadline.is-open { color: var(--dev-hi); }
.fund-card.is-past { opacity: .78; }

/* Behind the scenes on game pages */
.behind-scenes { border-color: rgba(43, 179, 163, .45); }
.behind-scenes .panel-head h2 { color: var(--dev-hi); }
.behind-scenes .panel-link { color: var(--dev-hi); }
.bs-sub { margin: 14px 0 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* =====================================================================
   v0.22: Admin > YouTube library
   ===================================================================== */
.yt-steps { margin: 6px 0 8px; padding-left: 20px; }
.yt-steps li { margin: 4px 0; }
.yt-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.yt-row label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.yt-row .yt-kw { flex: 1 1 260px; }
.yt-row input, .yt-row select { min-width: 160px; }
.yt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.yt-chips .chip { cursor: pointer; }
.yt-chips .chip:hover { border-color: var(--red); }
.yt-filters { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 14px; }
.yt-bar {
  position: sticky; top: 64px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 14px;
  background: rgba(19, 19, 19, .96); border: 1px solid var(--border-hi); border-radius: 8px; box-shadow: var(--shadow);
}
.yt-bar[hidden] { display: none; }
.yt-setall { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.yt-bar #yt-add { margin-left: auto; }
.yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.yt-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.yt-card[hidden] { display: none; }
.yt-card:has(.yt-check:checked) { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.yt-card.on-site { opacity: .7; }
.yt-pick { position: absolute; left: 8px; top: 8px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: rgba(0, 0, 0, .75); cursor: pointer; }
.yt-pick input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.yt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #111; }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .82); color: #fff; font-size: 12px; font-weight: 600; }
.yt-info { display: grid; align-content: start; gap: 6px; padding: 10px 12px 12px; }
.yt-title { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-meta { color: var(--muted); font-size: 12px; }
.yt-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.yt-tags .chip { font-size: 11px; padding: 1px 7px; }
.yt-type { width: 100%; }
.yt-more-row { text-align: center; margin: 16px 0 24px; }

/* =====================================================================
   v0.23: a picture on every news item (the big video of v0.23 became the
   compact Videos section in v0.24, below)
   ===================================================================== */
/* Rows and news on a game page */
.hub-news { margin: 0 0 30px; }
.hub-news .vrow-head { margin-bottom: 10px; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px 14px; }

/* A news item with its picture: row (the News page), card (grids) and mini (side lists) */
.ni { display: grid; min-width: 0; }
.ni-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 8px; background: #151515; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.ni-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ni:hover .ni-thumb img { transform: scale(1.04); }
.ni-ph { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 50% 42%, #3a0d12, #0d0d0d 72%); }
.ni-ph img { width: 30%; height: auto; object-fit: contain; }
.ni-kicker { margin: 0 0 4px; overflow: hidden; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.ni-kicker .ni-src { color: var(--red-hi); font-weight: 700; }
.ni.is-story .ni-kicker .ni-src { color: var(--yellow); }
.ni.is-dev .ni-kicker, .ni.is-dev .ni-kicker .ni-src { color: var(--dev-hi); }
.ni-title { margin: 0; font: 700 16px/1.3 var(--font-body); }
.ni-title a { color: #fff; }
.ni-title a:hover { color: var(--yellow-hi); }
.ni-excerpt { margin: 6px 0 0; font-size: 14px; color: #c9c9c9; }
.ni-meta { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.ni-card .ni-body { padding: 10px 2px 0; }
.ni-card .ni-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ni-row { grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; padding: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.ni-row.is-story { border-left: 3px solid var(--yellow); }
.ni-row.is-dev { border-left-color: var(--dev); }
.ni-row .ni-title { font-size: 19px; }
.ni-list { display: grid; }
.ni-mini { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ni-mini:last-child { border-bottom: 0; }
.ni-mini .ni-thumb { border-radius: 6px; }
.ni-mini .ni-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
.ni-mini .ni-meta { margin-top: 3px; }
@media (max-width: 640px) {
  .ni-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  .ni-row .ni-title { font-size: 17px; }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .ni-card .ni-title { font-size: 14px; }
}

/* Posts from game and server pages: their picture */
.post-card.has-pic { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.pc-thumb { display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 6px; background: #151515; }
.pc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pc-body { min-width: 0; }
.post-list.compact .post-card.has-pic { grid-template-columns: 140px minmax(0, 1fr); }
@media (max-width: 560px) { .post-card.has-pic, .post-list.compact .post-card.has-pic { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; } }
.post-picture { margin: 4px 0 16px; }
.post-picture img { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: 10px; }

/* The post editor's Picture */
.post-pic { margin: 0; padding: 10px 14px 14px; border: 1px solid var(--border); border-radius: 8px; }
.post-pic legend { padding: 0 6px; font-weight: 600; }
.post-pic > p { margin: 2px 0 0; }
.pp-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px 8px; max-height: 290px; margin: 10px 0 12px; overflow: auto; }
.pp-opt { position: relative; display: grid; gap: 4px; font-size: 12px; color: var(--muted); cursor: pointer; }
.pp-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pp-opt img, .pp-blank { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 2px solid transparent; border-radius: 6px; background: var(--panel-2); }
.pp-blank { display: grid; place-items: center; font-size: 22px; color: var(--muted); border-color: var(--border); }
.pp-opt:has(input:checked) { color: var(--text); }
.pp-opt:has(input:checked) img, .pp-opt:has(input:checked) .pp-blank { border-color: var(--red); }
.pp-opt:has(input:focus-visible) img, .pp-opt:has(input:focus-visible) .pp-blank { outline: 2px solid #fff; outline-offset: 2px; }
.pp-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }

/* The homepage hero's latest news: its picture */
.gh-news { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gh-news-pic { display: block; flex: 0 0 auto; width: 72px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.gh-news-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   v0.24: the compact Videos section (filter bubbles), Related news on the
   right, and the recent games next to the breadcrumbs
   ===================================================================== */
.hub-vids { margin: 0 0 28px; }
.hub-vids .vrow-head { margin-bottom: 8px; }
.hv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.hv-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--text); background: var(--panel-2); border: 1px solid var(--border-hi); transition: border-color .15s, background .15s;
}
.hv-chip small { font-weight: 500; color: var(--muted); }
.hv-chip:hover { color: #fff; border-color: #fff; }
.hv-chip.hv-pvp { border-color: rgba(209, 26, 42, .65); }
.hv-chip.on { color: #fff; background: var(--red); border-color: var(--red); }
.hv-chip.on small { color: #ffd6da; }
.hv-chip.hv-dev { border-color: rgba(43, 179, 163, .6); }
.hv-chip.hv-dev.on { color: #041311; background: var(--dev); border-color: var(--dev); }
.hv-chip.hv-dev.on small { color: #0b3a35; }
.hv-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 12px; }
.hv-item[hidden] { display: none; }
.hv-grid .vtile-art { border-radius: 8px; box-shadow: 0 6px 14px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .07); }
.hv-grid .vtile:hover .vtile-art, .hv-grid .vtile:focus-visible .vtile-art { transform: scale(1.03); }
.hv-grid .vtile-play { transform: scale(.7); }
.hv-grid .vtile:hover .vtile-play, .hv-grid .vtile:focus-visible .vtile-play { transform: scale(.78); }
.hv-grid .vtile-cap { padding-top: 7px; }
.hv-grid .vtile-title { font-size: 13.5px; }
.hv-grid .vtile-sub { font-size: 12px; }
.vtile-srv { color: var(--void-hi); }
@media (max-width: 1240px) { .hv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px) { .hv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  /* Phones: one swipe row instead of a tall grid */
  .hv-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: -4px -16px 0; padding: 4px 16px 6px; scroll-padding: 0 16px; }
  .hv-grid::-webkit-scrollbar { display: none; }
  .hv-item { scroll-snap-align: start; }
  .hv-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hv-chips::-webkit-scrollbar { display: none; }
  .hv-chip { flex: 0 0 auto; }
}

/* Related news in the right column */
.side-news .ni-mini { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.side-news .ni-title { font-size: 13.5px; }
.ni-from-sm { color: var(--red-hi); font-weight: 600; }
.ni-from-sm.is-story { color: var(--yellow); }


/* Recent games opposite the breadcrumbs */
.crumbs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 4px 0 12px; }
.crumbs-row .crumbs, .crumbs-row .crumbs ol { margin: 0; }
.recent-games { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.rg-label { margin-right: 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rg { display: block; width: 27px; height: 36px; overflow: hidden; border-radius: 4px; background: var(--panel-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .15s, box-shadow .15s; }
.rg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rg:hover, .rg:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 2px #fff; outline: none; }
.rg-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 10px; font-weight: 700; color: var(--muted); }
@media (max-width: 560px) { .rg-label { display: none; } .rg { width: 24px; height: 32px; } }