/* Robot Recess design system (docs/ARCHITECTURE.md section 6).
   A bright, crowded 2003 game portal rebuilt with modern CSS: sky backdrop, chunky glossy panels,
   candy-colored tabs, LCD counters. Every page loads this file; area CSS (player, dashboard, publish,
   admin, account, integrations) builds on these tokens and classes. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --rr-bg: #5ec8ff;
  --rr-ink: #17204f;
  --rr-panel: #ffffff;
  --rr-border: #14206b;
  --rr-navy: #14206b;
  --rr-yellow: #ffd400;
  --rr-red: #e8392c;
  --rr-green: #1fa34a;
  --rr-blue: #1f6feb;
  --rr-purple: #8a3ffc;
  --rr-pink: #e0379b;
  --rr-lime: #7cc400;
  --rr-orange: #ff8a00;
  --rr-teal: #0f9b8e;

  /* Supporting tones */
  --rr-page: #eef4ff;
  --rr-muted: #4c5577;
  --rr-line: #c6d3f0;
  --rr-soft: #f3f7ff;
  --rr-link: #1a4fd0;
  --rr-link-hover: #b3261e;
  --rr-gold: #ffb400;
  --rr-danger: #b3261e;
  --rr-ok: #137a3a;

  /* Category colors. --cat-<slug> is the bright accent (from src/config.ts); -bg/-on are a tab or pill
     background and the text color that reads on it (>= 4.5:1). */
  --cat-action: #e8392c;      --cat-action-bg: #be2f24;      --cat-action-on: #ffffff;
  --cat-shooting: #ff8a00;    --cat-shooting-bg: #ff8a00;    --cat-shooting-on: #14206b;
  --cat-puzzle: #8a3ffc;      --cat-puzzle-bg: #7433dc;      --cat-puzzle-on: #ffffff;
  --cat-sports: #1fa34a;      --cat-sports-bg: #167535;      --cat-sports-on: #ffffff;
  --cat-racing: #1f6feb;      --cat-racing-bg: #1b5fcc;      --cat-racing-on: #ffffff;
  --cat-multiplayer: #e0379b; --cat-multiplayer-bg: #b42c7d; --cat-multiplayer-on: #ffffff;
  --cat-strategy: #0f9b8e;    --cat-strategy-bg: #0b7369;    --cat-strategy-on: #ffffff;
  --cat-weird: #7cc400;       --cat-weird-bg: #7cc400;       --cat-weird-on: #14206b;

  --font-body: Verdana, Tahoma, "DejaVu Sans", "Segoe UI", sans-serif;
  --font-pixel: "Silkscreen", "Press Start 2P", ui-monospace, monospace;
  --font-arcade: "Press Start 2P", "Silkscreen", ui-monospace, monospace;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow-chunky: 0 5px 0 rgba(20, 32, 107, 0.22);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --focus: #14206b;

  --z-raised: 2;
  --z-masthead: 5;
  --z-dropdown: 20;
  --z-toast: 40;

  --accent: var(--rr-blue);
  --accent-bg: #1b5fcc;
  --accent-on: #ffffff;
}

.cat-action { --accent: var(--cat-action); --accent-bg: var(--cat-action-bg); --accent-on: var(--cat-action-on); }
.cat-shooting { --accent: var(--cat-shooting); --accent-bg: var(--cat-shooting-bg); --accent-on: var(--cat-shooting-on); }
.cat-puzzle { --accent: var(--cat-puzzle); --accent-bg: var(--cat-puzzle-bg); --accent-on: var(--cat-puzzle-on); }
.cat-sports { --accent: var(--cat-sports); --accent-bg: var(--cat-sports-bg); --accent-on: var(--cat-sports-on); }
.cat-racing { --accent: var(--cat-racing); --accent-bg: var(--cat-racing-bg); --accent-on: var(--cat-racing-on); }
.cat-multiplayer { --accent: var(--cat-multiplayer); --accent-bg: var(--cat-multiplayer-bg); --accent-on: var(--cat-multiplayer-on); }
.cat-strategy { --accent: var(--cat-strategy); --accent-bg: var(--cat-strategy-bg); --accent-on: var(--cat-strategy-on); }
.cat-weird { --accent: var(--cat-weird); --accent-bg: var(--cat-weird-bg); --accent-on: var(--cat-weird-on); }

/* ── Base ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--rr-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: 150px;
  color: var(--rr-ink);
  font: 14px/1.5 var(--font-body);
  background:
    url("/static/img/playground.svg") repeat-x center bottom / auto 160px scroll,
    linear-gradient(180deg, #45b8ff 0%, #86d8ff 48%, #c8f1ff 100%) fixed;
}

img, svg, video, canvas { max-width: 100%; }
img { height: auto; }

a { color: var(--rr-link); text-underline-offset: 2px; }
a:hover { color: var(--rr-link-hover); }

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; color: var(--rr-navy); text-wrap: balance; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
p { margin: 0 0 0.8em; text-wrap: pretty; }
ul, ol { margin: 0 0 0.8em; padding-left: 1.4em; }
hr { border: 0; border-top: 2px dashed var(--rr-line); margin: 16px 0; }
strong, b { font-weight: 700; }
small { font-size: 12px; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 5px;
  background: #e8eefc;
  color: #1b2a6b;
}
kbd { border: 1px solid #9fb0dc; border-bottom-width: 2px; background: #fff; }
pre {
  margin: 0 0 1em;
  padding: 12px 14px;
  overflow: auto;
  border: 2px solid var(--rr-navy);
  border-radius: 12px;
  background: #0f1640;
  color: #e4ecff;
  font: 12.5px/1.55 var(--font-mono);
}
pre code { padding: 0; background: none; color: inherit; font-size: inherit; }

details > summary { cursor: pointer; font-weight: 700; color: var(--rr-navy); }
dl { margin: 0 0 1em; }
dt { font-weight: 700; }
dd { margin: 0 0 0.5em; }
blockquote { margin: 0 0 1em; padding: 8px 14px; border: 2px dashed var(--rr-line); border-radius: 12px; background: var(--rr-soft); }

::selection { background: #ffe45c; color: #14206b; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.masthead, .footer, .ticker, .page-hero, .name-card-initials { --focus: #ffd400; }
.nav-tab.is-active, .user-menu-panel { --focus: #14206b; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: var(--z-toast);
  padding: 10px 16px;
  border: 3px solid var(--rr-navy);
  border-radius: 12px;
  background: var(--rr-yellow);
  color: var(--rr-navy);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ── Backdrop and frame ─────────────────────────────────────────────────── */

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.sky::before,
.sky::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 900px);
  height: 100%;
  background: url("/static/img/clouds.svg") repeat-x 0 24px / 900px 260px;
  animation: rr-drift 260s linear infinite;
  will-change: transform;
}
.sky::after {
  top: 300px;
  width: calc(100% + 540px);
  opacity: 0.55;
  background-size: 540px 156px;
  animation-duration: 190s;
  animation-name: rr-drift-small;
}
@keyframes rr-drift { to { transform: translateX(-900px); } }
@keyframes rr-drift-small { to { transform: translateX(-540px); } }

.site {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 34px auto 0;
  border: 3px solid var(--rr-navy);
  border-radius: 20px;
  background: radial-gradient(#d9e6ff 1.1px, transparent 1.4px) 0 0 / 16px 16px, var(--rr-page);
  box-shadow: 0 10px 0 rgba(20, 32, 107, 0.28), 0 26px 60px rgba(20, 32, 107, 0.25);
}

/* ── Masthead ───────────────────────────────────────────────────────────── */

.masthead {
  position: relative;
  z-index: var(--z-masthead);
  border-radius: 17px 17px 0 0;
  color: #fff;
  background:
    radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.6px) 0 0 / 14px 14px,
    radial-gradient(120% 140% at 15% 0%, #3d63ff 0%, transparent 60%),
    linear-gradient(180deg, #2a46e0 0%, #1a2a9c 72%, #14206b 100%);
}

.masthead-top {
  position: relative;
  z-index: var(--z-dropdown);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px 18px;
  padding: 10px 18px 12px 10px;
}

.brand { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.brand-text { min-width: 0; padding-bottom: 2px; }

.rivet-btn {
  position: relative;
  z-index: var(--z-raised);
  flex: none;
  margin: -34px 0 -8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 16px;
  transform-origin: 50% 90%;
}
.rivet-btn img { display: block; width: 76px; height: 78px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.25)); }
.rivet-btn:hover img { transform: rotate(-4deg); transition: transform 0.2s var(--ease-out); }
.rivet-btn.is-ringing { animation: rr-wiggle 0.5s ease-in-out 3; }
.rivet-bubble {
  position: absolute;
  left: 58px;
  top: -6px;
  padding: 6px 8px;
  border: 3px solid var(--rr-navy);
  border-radius: 12px 12px 12px 2px;
  background: #fff;
  color: var(--rr-red);
  font: 10px/1 var(--font-arcade);
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.6) translateY(6px);
  transform-origin: 0 100%;
  transition: opacity 0.15s, transform 0.25s var(--ease-out);
  pointer-events: none;
}
.rivet-btn.is-ringing .rivet-bubble { opacity: 1; transform: none; }
@keyframes rr-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-9deg); }
  75% { transform: rotate(9deg); }
}

.logo { display: inline-block; line-height: 0; border-radius: 6px; }
.logo img { display: block; width: 332px; height: auto; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.3)); }
.tagline {
  margin: 7px 0 0 2px;
  color: #d4e1ff;
  font: 700 12px/1.2 var(--font-pixel);
  letter-spacing: 0.02em;
}

.masthead-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.search { display: flex; align-items: center; gap: 6px; }
.search input[type="search"] {
  width: 230px;
  height: 36px;
  padding: 0 14px;
  border: 2px solid var(--rr-navy);
  border-radius: 999px;
  background: #fff;
  color: var(--rr-ink);
  font: 14px var(--font-body);
  box-shadow: inset 0 2px 0 rgba(20, 32, 107, 0.12);
}
.search input[type="search"]::placeholder { color: #5f6990; }
.search .btn { height: 36px; }

.auth-buttons { display: flex; gap: 8px; }
.masthead .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.85); box-shadow: none; }
.masthead .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

.user-menu { position: relative; }
.user-menu > summary { list-style: none; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 16, 70, 0.35);
  font-weight: 700;
}
.user-chip::after { content: "▾"; font-size: 11px; opacity: 0.85; }
.user-menu[open] > .user-chip { background: rgba(10, 16, 70, 0.6); }
.avatar {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 28px;
  padding: 0 4px;
  border: 2px solid var(--rr-navy);
  border-radius: 8px;
  background: var(--rr-yellow);
  color: var(--rr-navy);
  font: 9px/1 var(--font-arcade);
}
.user-chip-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: var(--z-dropdown);
  width: 250px;
  padding: 12px;
  border: 3px solid var(--rr-navy);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--rr-ink);
  box-shadow: 0 6px 0 rgba(20, 32, 107, 0.3), 0 18px 40px rgba(20, 32, 107, 0.25);
  --focus: #14206b;
}
.user-menu-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; }
.user-menu-who { width: 100%; }
.user-menu-links { list-style: none; margin: 0 0 10px; padding: 8px 0 0; border-top: 2px dashed var(--rr-line); }
.user-menu-links a {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--rr-navy);
  font-weight: 700;
  text-decoration: none;
}
.user-menu-links a:hover, .user-menu-links a[aria-current="page"] { background: #eef3ff; color: var(--rr-navy); }
.user-menu-logout { margin: 0; }
.user-menu-logout .btn { width: 100%; justify-content: center; }
/* The panel is white but lives inside the masthead, so undo the masthead's white ghost buttons here. */
.user-menu-panel .btn-ghost { color: var(--rr-navy); border-color: var(--rr-navy); }
.user-menu-panel .btn-ghost:hover { background: #eef3ff; color: var(--rr-navy); }

.plays-today {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 2px solid #0a1150;
  border-radius: 12px;
  background: linear-gradient(180deg, #101a5c, #0a1150);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12);
}
.plays-today-label { color: #ffd400; font: 700 11px/1.15 var(--font-pixel); text-transform: uppercase; }

/* ── Ticker ─────────────────────────────────────────────────────────────── */

.ticker {
  display: flex;
  align-items: stretch;
  height: 32px;
  border-top: 2px solid #050a33;
  border-bottom: 2px solid #050a33;
  background: #050a26;
  color: #ffcf3a;
  font: 700 12px/28px var(--font-pixel);
}
.ticker-label {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  margin: 0;
  padding: 0 12px;
  background: linear-gradient(180deg, #ff5a4a, #c42c21);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ticker-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: rr-blink 1.2s steps(2, start) infinite; }
@keyframes rr-blink { to { visibility: hidden; } }
.ticker-window {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  background:
    radial-gradient(rgba(255, 207, 58, 0.09) 1px, transparent 1.3px) 0 0 / 4px 4px;
}
.ticker-window::-webkit-scrollbar { display: none; }
.ticker-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0 0 0 14px;
  list-style: none;
}
.ticker.is-moving .ticker-window { overflow: hidden; }
.ticker.is-moving .ticker-track { animation: rr-ticker var(--ticker-duration, 40s) linear infinite; }
.ticker.is-moving:hover .ticker-track,
.ticker.is-moving:focus-within .ticker-track,
.ticker.is-paused .ticker-track { animation-play-state: paused; }
@keyframes rr-ticker { to { transform: translateX(-50%); } }
.ticker-item { flex: none; padding-right: 34px; white-space: nowrap; text-shadow: 0 0 6px rgba(255, 190, 40, 0.55); }
.ticker-item::before { content: "★"; margin-right: 8px; color: #ff6a3d; }
.ticker-item a { color: #ffe27a; text-decoration: none; }
.ticker-item a:hover { color: #fff; text-decoration: underline; }
.ticker-initials { color: #7dffb0; }
.ticker-on { color: #b7c3ff; }
.ticker-when { color: #8c97c9; font-weight: 400; }
.ticker-empty { color: #ffe27a; }
.ticker-toggle {
  flex: none;
  margin: 3px 6px;
  padding: 0 10px;
  border: 2px solid #ffcf3a;
  border-radius: 6px;
  background: transparent;
  color: #ffcf3a;
  font: 700 11px/1 var(--font-pixel);
  text-transform: uppercase;
  cursor: pointer;
}
.ticker-toggle:hover { background: #ffcf3a; color: #050a26; }

/* ── Main navigation (candy tabs) ───────────────────────────────────────── */

.nav {
  position: relative;
  padding: 0;
  background: linear-gradient(180deg, #0f1850, #14206b);
}
.nav-toggle { display: none; }
.nav-tabs {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  margin: 0;
  padding: 8px 14px 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* The line under the tabs scrolls with them; the active tab covers it. */
  background: linear-gradient(var(--rr-navy), var(--rr-navy)) left bottom / 100% 3px no-repeat local;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs > li { flex: none; }
.nav-tabs > li:last-child { margin-left: auto; padding: 0 0 8px 8px; }
.nav-tab {
  position: relative;
  display: block;
  margin-bottom: 3px;
  padding: 9px 8px 8px;
  border: 2px solid #0a1150;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.06) 48%, rgba(255, 255, 255, 0) 52%),
    var(--accent-bg);
  color: var(--accent-on);
  font: 700 11px/1 var(--font-pixel);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.15s var(--ease-out);
}
.nav-tab:hover, .nav-tab:focus-visible { transform: translateY(-3px); color: var(--accent-on); }
.nav-tab:focus-visible { outline-offset: -5px; }
.nav-tab.is-active {
  z-index: var(--z-raised);
  margin-bottom: 0;
  padding-bottom: 11px;
  border-color: var(--rr-navy);
  background: var(--rr-page);
  color: var(--rr-navy);
  box-shadow: inset 0 4px 0 var(--accent);
  transform: none;
}
.nav-home { --accent-bg: #ffd400; --accent-on: #14206b; --accent: #ffd400; }
.nav-judgment { --accent-bg: #ffffff; --accent-on: #5a24b0; --accent: #8a3ffc; }
.nav-jams { --accent-bg: #ffffff; --accent-on: #a8226a; --accent: #e0379b; }
.nav-publish {
  margin: 0;
  border: 2px solid #0a1150;
  border-radius: 999px;
  padding: 8px 13px;
  background: linear-gradient(180deg, #ffe45c, #ffb000);
  color: var(--rr-navy);
  box-shadow: 0 3px 0 #0a1150, inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
.nav-publish:hover, .nav-publish:focus-visible { transform: translateY(-1px); color: var(--rr-navy); }
.nav-publish.is-active { margin: 0; padding-bottom: 8px; background: #fff; box-shadow: 0 3px 0 #0a1150; }
.nav-publish:focus-visible { outline-offset: 2px; }

/* ── Flash ──────────────────────────────────────────────────────────────── */

.flash {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 18px 0;
  padding: 10px 12px 10px 16px;
  border: 3px solid var(--rr-navy);
  border-radius: var(--radius-lg);
  font-weight: 700;
  box-shadow: var(--shadow-chunky);
  animation: rr-pop 0.35s var(--ease-out);
}
.flash::before {
  content: "i";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 2px solid var(--rr-navy);
  border-radius: 50%;
  background: #fff;
  font: 11px/1 var(--font-arcade);
}
.flash-ok { background: #dff7e4; }
.flash-ok::before { content: "✓"; font-family: var(--font-body); font-size: 15px; background: #1fa34a; color: #fff; }
.flash-error { background: #ffe3df; }
.flash-error::before { content: "!"; background: #c42c21; color: #fff; }
.flash-info { background: #e3eeff; }
.flash-text { flex: 1; margin: 0; }
.flash-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: 2px solid var(--rr-navy);
  border-radius: 8px;
  background: #fff;
  color: var(--rr-navy);
  font: 700 18px/1 var(--font-body);
  cursor: pointer;
}
@keyframes rr-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.layout { display: grid; gap: 18px; padding: 18px; align-items: start; }
.layout.has-sidebar { grid-template-columns: minmax(0, 1fr) 282px; }
.main { min-width: 0; }
.main:focus { outline: none; }
.main > * + *, .sidebar > * + *, .game-side > * + * { margin-top: 18px; }
.sidebar { min-width: 0; }

/* ── Panels ─────────────────────────────────────────────────────────────── */

.panel {
  --bar-top: #2459d6;
  --bar-bot: #173f9f;
  --bar-ink: #ffffff;
  position: relative;
  min-width: 0;
  border: 3px solid var(--rr-navy);
  border-radius: var(--radius-lg);
  background: var(--rr-panel);
  box-shadow: var(--shadow-chunky);
}
.panel-blue { --bar-top: #2459d6; --bar-bot: #173f9f; --bar-ink: #fff; }
.panel-navy { --bar-top: #2a3a9c; --bar-bot: #14206b; --bar-ink: #fff; }
.panel-red { --bar-top: #c7362a; --bar-bot: #96221a; --bar-ink: #fff; }
.panel-green { --bar-top: #187a3d; --bar-bot: #0f5a2b; --bar-ink: #fff; }
.panel-yellow { --bar-top: #ffe25a; --bar-bot: #ffb400; --bar-ink: #14206b; }
.panel-purple { --bar-top: #7433dc; --bar-bot: #5221a6; --bar-ink: #fff; }
.panel-pink { --bar-top: #b42c7d; --bar-bot: #8a1f5e; --bar-ink: #fff; }
.panel-orange { --bar-top: #ffa233; --bar-bot: #f07c00; --bar-ink: #14206b; }
.panel-teal { --bar-top: #0b7369; --bar-bot: #07544d; --bar-ink: #fff; }
.panel-lime { --bar-top: #9be01a; --bar-bot: #6fae00; --bar-ink: #14206b; }
.panel-cat { --bar-top: var(--accent-bg); --bar-bot: color-mix(in srgb, var(--accent-bg) 78%, #000); --bar-ink: var(--accent-on); }

.panel-head,
.panel > .panel-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  margin: 0;
  padding: 8px 14px;
  border-bottom: 3px solid var(--rr-navy);
  border-radius: 11px 11px 0 0;
  background: linear-gradient(180deg, var(--bar-top), var(--bar-bot));
  color: var(--bar-ink);
}
.panel-head::before,
.panel > .panel-title::before {
  content: "";
  position: absolute;
  inset: 0 0 52% 0;
  border-radius: 11px 11px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.07));
  pointer-events: none;
}
.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--bar-ink);
  font: 700 15px/1.2 var(--font-pixel);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
}
.panel > .panel-title { justify-content: flex-start; }
.panel-head > .panel-title { position: relative; min-width: 0; }
.panel-icon { flex: none; width: 22px; height: 22px; }
.panel-extra { position: relative; display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.panel-link { color: var(--bar-ink); font-weight: 700; white-space: nowrap; }
.panel-link::after { content: " ›"; }
.panel-link:hover { color: var(--bar-ink); text-decoration-thickness: 2px; }
.panel-body { padding: 14px 16px 16px; }
.panel-body > :last-child { margin-bottom: 0; }
.panel-flush { padding: 0; }
.panel-lead { margin: 0 0 14px; max-width: 70ch; }
.panel > .panel-actions,
.panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.panel > .panel-actions { padding: 10px 16px 14px; border-top: 2px dashed var(--rr-line); }
.panel-body .panel-actions { margin-top: 12px; }
.panel-plain > .panel-body { padding: 16px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 36px;
  padding: 0.5em 1.15em;
  border: 2px solid var(--rr-navy);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #e3ebfd 100%);
  color: var(--rr-navy);
  font: 700 14px/1.1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--rr-navy), inset 0 2px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, filter 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: var(--rr-navy); filter: brightness(1.04) saturate(1.1); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rr-navy), inset 0 2px 0 rgba(255, 255, 255, 0.6); }
.btn-primary { background: linear-gradient(180deg, #ffe867 0%, #ffc21a 55%, #ffad00 100%); }
.btn-danger { background: linear-gradient(180deg, #e8574b 0%, #b3261e 100%); color: #fff; }
.btn-danger:hover { color: #fff; }
.btn-success { background: linear-gradient(180deg, #2ea85a 0%, #137a3a 100%); color: #fff; }
.btn-success:hover { color: #fff; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background: rgba(20, 32, 107, 0.07); }
.btn-ghost:active { box-shadow: none; }
.btn-small { min-height: 30px; padding: 0.35em 0.9em; font-size: 12.5px; box-shadow: 0 2px 0 var(--rr-navy), inset 0 2px 0 rgba(255, 255, 255, 0.7); }
.btn-small.btn-ghost { box-shadow: none; }
.btn-large { min-height: 48px; padding: 0.6em 1.6em; font-size: 17px; box-shadow: 0 4px 0 var(--rr-navy), inset 0 2px 0 rgba(255, 255, 255, 0.8); }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; filter: none; }
.icon-play { flex: none; }
.inline-form { display: inline; margin: 0; }

/* ── Game tiles ─────────────────────────────────────────────────────────── */

.grid-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 20px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.grid-tiles > li { min-width: 0; }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 7px 7px 9px;
  border: 3px solid var(--rr-navy);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 4px 0 rgba(20, 32, 107, 0.28);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.tile:hover, .tile:focus-within { transform: translateY(-4px) rotate(-0.8deg); box-shadow: 0 9px 0 rgba(20, 32, 107, 0.24); }
.tile-link { display: block; color: inherit; text-decoration: none; border-radius: 10px; }
.tile-link:hover { color: inherit; }
.tile-link:hover .tile-title { color: var(--rr-link-hover); text-decoration: underline; }
.tile-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid var(--rr-navy);
  border-radius: 9px;
  background: var(--accent);
}
.tile-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile-thumb::after {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.tile-title {
  display: -webkit-box;
  margin: 8px 2px 0;
  overflow: hidden;
  color: var(--rr-navy);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.tile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 6px;
  margin: 7px 2px 0;
  font-size: 11.5px;
}
.tile-plays { color: var(--rr-muted); white-space: nowrap; }
.tile-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 6px;
  margin: 5px 2px 0;
  font-size: 11.5px;
  color: var(--rr-muted);
}
.tile-by { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-clock { width: 12px; height: 12px; flex: none; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.chip-clock::after { content: ""; position: absolute; left: 3px; top: 1px; width: 2px; height: 4px; background: currentColor; }
.tile-rank {
  position: absolute;
  top: -11px;
  left: -11px;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 4px;
  border: 3px solid var(--rr-navy);
  border-radius: 50%;
  background: var(--rr-navy);
  color: #fff;
  font: 12px/1 var(--font-arcade);
}
.tile-rank.rank-1, .top10-rank.rank-1 { background: linear-gradient(180deg, #fff27a, #f5b400); color: var(--rr-navy); }
.tile-rank.rank-2, .top10-rank.rank-2 { background: linear-gradient(180deg, #ffffff, #b9c5da); color: var(--rr-navy); }
.tile-rank.rank-3, .top10-rank.rank-3 { background: linear-gradient(180deg, #ffc89a, #d7803d); color: var(--rr-navy); }

/* NEW! starburst */
.burst {
  position: absolute;
  top: -15px;
  right: -9px;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 2px 0 var(--rr-navy)) drop-shadow(0 -1px 0 var(--rr-navy)) drop-shadow(1px 0 0 var(--rr-navy)) drop-shadow(-1px 0 0 var(--rr-navy));
  transform: rotate(14deg);
  animation: rr-burst 1.8s ease-in-out infinite;
  pointer-events: none;
}
.burst::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 40% 35%, #fff59a, #ffd400 55%, #ffb000);
  clip-path: polygon(100% 50%, 87.6% 59.8%, 93.3% 75%, 77.8% 77.8%, 75% 93.3%, 59.8% 87.6%, 50% 100%, 40.2% 87.6%, 25% 93.3%, 22.2% 77.8%, 6.7% 75%, 12.4% 59.8%, 0% 50%, 12.4% 40.2%, 6.7% 25%, 22.2% 22.2%, 25% 6.7%, 40.2% 12.4%, 50% 0%, 59.8% 12.4%, 75% 6.7%, 77.8% 22.2%, 93.3% 25%, 87.6% 40.2%);
}
.burst > span { position: relative; color: #a01a10; font: 9px/1 var(--font-arcade); letter-spacing: -0.02em; }
@keyframes rr-burst { 0%, 100% { transform: rotate(14deg) scale(1); } 50% { transform: rotate(8deg) scale(1.1); } }

/* Empty cabinets that fill sparse grids */
.tile-slot {
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 190px;
  padding: 16px 10px;
  border-style: dashed;
  border-color: #7f93cf;
  background: repeating-linear-gradient(-45deg, #f6f9ff 0 12px, #edf2ff 12px 24px);
  box-shadow: none;
  color: var(--rr-navy);
  text-align: center;
  text-decoration: none;
}
.tile-slot:hover { color: var(--rr-navy); border-color: var(--rr-navy); background: #fff8d6; }
.slot-plus {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--rr-navy);
  border-radius: 50%;
  background: #fff;
  font: 20px/1 var(--font-arcade);
  box-shadow: 0 3px 0 var(--rr-navy);
}
.slot-judge .slot-plus { background: #f1e9ff; }
.slot-mcp .slot-plus { background: #e3fbf6; }
.slot-publish .slot-plus { background: #fff2a8; }
.slot-title { font: 700 13px/1.2 var(--font-pixel); text-transform: uppercase; }
.slot-text { font-size: 12px; color: var(--rr-muted); }

/* ── Top 10 sidebar ─────────────────────────────────────────────────────── */

.top10 { margin: 0; padding: 6px; list-style: none; counter-reset: none; }
.top10-row:nth-child(even) .top10-link { background: #f5f8ff; }
.top10-link {
  display: grid;
  grid-template-columns: 34px 56px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 10px;
  color: var(--rr-navy);
  text-decoration: none;
}
.top10-link:hover { background: #fff6c2; color: var(--rr-navy); }
.top10-link:hover .top10-title { text-decoration: underline; }
.top10-rank {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 3px solid var(--rr-navy);
  border-radius: 50%;
  background: var(--rr-navy);
  color: #fff;
  font: 11px/1 var(--font-arcade);
}
.top10-thumb { width: 56px; height: 42px; object-fit: cover; border: 2px solid var(--rr-navy); border-radius: 7px; background: #dfe7fb; }
.top10-text { display: grid; min-width: 0; }
.top10-title { overflow: hidden; font-weight: 700; font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.top10-meta { color: var(--rr-muted); font-size: 11.5px; }
.top10-open { margin: 0; padding: 10px 14px 12px; border-top: 2px dashed var(--rr-line); font-size: 12.5px; }

.promo {
  padding: 16px 14px;
  border: 3px solid var(--rr-navy);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff9d4, #ffe98a);
  box-shadow: var(--shadow-chunky);
  text-align: center;
}
.promo-art { display: block; width: 72px; height: 74px; margin: -40px auto 4px; }
.promo-title { margin: 0 0 4px; color: var(--rr-navy); font: 700 15px/1.2 var(--font-pixel); text-transform: uppercase; }
.promo-text { margin: 0 0 10px; font-size: 13px; }
.promo-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin: 0; }
.promo-link { font-weight: 700; font-size: 13px; }
.sidebar .promo { margin-top: 38px; }

/* ── Pills, tags, flair, stars ──────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 1px 9px;
  border: 2px solid var(--rr-navy);
  border-radius: 999px;
  background: #eef2fb;
  color: var(--rr-navy);
  font: 700 11.5px/1.6 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
a.badge:hover { text-decoration: underline; filter: brightness(1.08); }
.badge-cat-action, .badge-cat-shooting, .badge-cat-puzzle, .badge-cat-sports,
.badge-cat-racing, .badge-cat-multiplayer, .badge-cat-strategy, .badge-cat-weird { background: var(--b-bg); color: var(--b-on); }
a.badge-cat-action:hover, a.badge-cat-shooting:hover, a.badge-cat-puzzle:hover, a.badge-cat-sports:hover,
a.badge-cat-racing:hover, a.badge-cat-multiplayer:hover, a.badge-cat-strategy:hover, a.badge-cat-weird:hover { color: var(--b-on); }
.badge-cat-action { --b-bg: var(--cat-action-bg); --b-on: var(--cat-action-on); }
.badge-cat-shooting { --b-bg: var(--cat-shooting-bg); --b-on: var(--cat-shooting-on); }
.badge-cat-puzzle { --b-bg: var(--cat-puzzle-bg); --b-on: var(--cat-puzzle-on); }
.badge-cat-sports { --b-bg: var(--cat-sports-bg); --b-on: var(--cat-sports-on); }
.badge-cat-racing { --b-bg: var(--cat-racing-bg); --b-on: var(--cat-racing-on); }
.badge-cat-multiplayer { --b-bg: var(--cat-multiplayer-bg); --b-on: var(--cat-multiplayer-on); }
.badge-cat-strategy { --b-bg: var(--cat-strategy-bg); --b-on: var(--cat-strategy-on); }
.badge-cat-weird { --b-bg: var(--cat-weird-bg); --b-on: var(--cat-weird-on); }

.badge-stage-checking { background: #dfe6f5; color: var(--rr-navy); }
.badge-stage-sent_back { background: #b3261e; color: #fff; }
.badge-stage-review { background: #ffcf4d; color: var(--rr-navy); }
.badge-stage-judgment { background: #5a24b0; color: #fff; }
.badge-stage-arcade { background: #1b5fcc; color: #fff; }
.badge-stage-featured { background: linear-gradient(180deg, #fff27a, #f5b400); color: var(--rr-navy); }
.badge-stage-featured::before { content: "★"; }
.badge-stage-archived { background: #5a6079; color: #fff; }
.badge-stage-removed { background: #2b2b2b; color: #fff; }
.badge-plan-premium { background: linear-gradient(180deg, #9a55ff, #6326c9); color: #fff; border-color: var(--rr-navy); }
.badge-plan-premium::before { content: "◆"; font-size: 9px; color: #ffe45c; }
.badge-editor { background: var(--rr-navy); color: #ffd400; }
.badge-tester { background: #0b7369; color: #fff; }
.masthead .badge { border-color: #0a1150; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 2px dashed #7f93cf;
  border-radius: 7px;
  background: #fff;
  color: #24306f;
  font: 700 11.5px/1.6 var(--font-body);
  white-space: nowrap;
  vertical-align: middle;
}
.tag-made-with::before { content: "⚙"; font-size: 12px; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border: 2px solid var(--rr-navy);
  border-radius: 999px;
  background: #fff;
  color: var(--rr-navy);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
}
.chip:hover { background: #fff6c2; color: var(--rr-navy); }

.flair {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 0 6px;
  border: 2px solid currentColor;
  border-radius: 6px;
  background: #fff;
  font: 700 10px/1.6 var(--font-pixel);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.flair-l1 { color: #46507a; }
.flair-l2 { color: #137a3a; }
.flair-l3 { color: #0b6b62; }
.flair-l4 { color: #5a24b0; }
.flair-l5 { color: #96221a; }
.flair-top { background: linear-gradient(180deg, #fff6a8, #ffd400); color: var(--rr-navy); border-color: var(--rr-navy); }
.user-ref { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.user-ref .flair { margin-left: 0; }
.user-link { font-weight: 700; }

.stars { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; vertical-align: middle; }
.stars-track { position: relative; display: inline-block; color: #c5cfe8; font-size: 15px; line-height: 1; letter-spacing: 1px; }
.stars-track::before { content: "★★★★★"; }
.stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #ffb400; white-space: nowrap; text-shadow: 0 1px 0 #a35f00; }
.stars-fill::before { content: "★★★★★"; }
.stars-compact .stars-track { font-size: 12px; letter-spacing: 0; }
.stars-value { color: var(--rr-navy); font-weight: 700; font-size: 11.5px; }
.stars-count { color: var(--rr-muted); font-size: 12px; }
.stars-none { color: var(--rr-muted); font-size: 12.5px; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.form { display: grid; gap: 14px; margin: 0; }
.form-row { display: grid; gap: 6px; min-width: 0; }
.form-row > label, .form > label, .form-label { color: var(--rr-navy); font-weight: 700; }
.form-hint { margin: 0; color: var(--rr-muted); font-size: 12.5px; }
.form-error { margin: 0; color: var(--rr-danger); font-weight: 700; font-size: 13px; }
.form-error::before { content: "! "; }
.field-inline { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; color: var(--rr-ink); cursor: pointer; }
.field-inline input { margin-top: 2px; flex: none; }

:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="color"], [type="image"]), select, textarea) {
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  border: 2px solid #7f93cf;
  border-radius: var(--radius);
  background: #fff;
  color: var(--rr-ink);
  font: 14px/1.4 var(--font-body);
  box-shadow: inset 0 2px 0 rgba(20, 32, 107, 0.08);
  transition: border-color 0.15s;
}
:where(textarea) { min-height: 90px; resize: vertical; }
:where(input, select, textarea):hover { border-color: #4d63b3; }
:where(input, select, textarea):focus-visible { border-color: var(--rr-navy); outline: 3px solid #ffd400; outline-offset: 1px; }
:where(input, textarea)::placeholder { color: #5f6990; opacity: 1; }
:where(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]) { border-color: var(--rr-danger); background: #fff6f5; }
:where(input[type="checkbox"], input[type="radio"]) { width: 18px; height: 18px; accent-color: #1b5fcc; }
:where(input[type="file"]) { max-width: 100%; font: 13px var(--font-body); color: var(--rr-ink); }
:where(input[type="file"])::file-selector-button {
  margin-right: 10px;
  padding: 7px 14px;
  border: 2px solid var(--rr-navy);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #e3ebfd);
  color: var(--rr-navy);
  font: 700 13px var(--font-body);
  cursor: pointer;
}
fieldset { margin: 0; padding: 12px 14px 14px; border: 2px dashed var(--rr-line); border-radius: 12px; min-width: 0; }
legend { padding: 0 6px; color: var(--rr-navy); font-weight: 700; }
label { cursor: default; }

/* ── Notices ────────────────────────────────────────────────────────────── */

.notice {
  position: relative;
  margin: 0 0 14px;
  padding: 12px 14px 12px 46px;
  border: 2px solid #7f93cf;
  border-radius: 12px;
  background: #eef4ff;
  color: var(--rr-ink);
}
.notice::before {
  content: "i";
  position: absolute;
  left: 12px;
  top: 11px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--rr-navy);
  border-radius: 50%;
  background: #fff;
  color: var(--rr-navy);
  font: 10px/1 var(--font-arcade);
}
.notice > :first-child { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }
.notice-ok { border-color: #1fa34a; background: #e6f8ea; }
.notice-ok::before { content: "✓"; background: #1fa34a; color: #fff; font: 700 14px/1 var(--font-body); }
.notice-error { border-color: #c42c21; background: #fdeceb; }
.notice-error::before { content: "!"; background: #c42c21; color: #fff; }
.notice-info { border-color: #1f6feb; background: #eaf2ff; }
.notice-warn { border-color: #d99a00; background: #fff6d6; }
.notice-warn::before { content: "!"; background: #ffd400; }

/* ── Meters ─────────────────────────────────────────────────────────────── */

.meter {
  position: relative;
  display: block;
  height: 14px;
  overflow: hidden;
  border: 2px solid var(--rr-navy);
  border-radius: 999px;
  background: #e1e8f8;
  box-shadow: inset 0 2px 0 rgba(20, 32, 107, 0.12);
}
.meter-fill {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #4f86ff, #1b5fcc);
  transition: width 0.5s var(--ease-out);
}
.meter.meter-ok .meter-fill,
.meter-fill.meter-ok {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, #4fd06a, #168f40);
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

/* Scroll wrappers are positioned so absolutely positioned children (.sr-only labels) scroll with them
   instead of widening the page. */
.table-wrap { position: relative; overflow-x: auto; border-radius: 12px; }
.table {
  width: 100%;
  border: 2px solid var(--rr-navy);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
  font-size: 13.5px;
}
.table th, .table td { padding: 8px 10px; text-align: left; vertical-align: top; }
.table th { background: var(--rr-navy); color: #fff; font-weight: 700; font-size: 12.5px; }
.table th a { color: #ffe27a; }
.table td { border-top: 1px solid var(--rr-line); }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr:nth-child(even) td { background: #f5f8ff; }
/* Row headers (<th scope="row">) read as bold body cells, not as navy column headers. */
.table tbody th { background: #fff; color: var(--rr-ink); border-top: 1px solid var(--rr-line); font-size: 13px; }
.table tbody tr:first-child th { border-top: 0; }
.table tbody tr:nth-child(even) th { background: #f5f8ff; }
.table tbody th a { color: inherit; }
.table .num, .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Sub-navigation tabs ────────────────────────────────────────────────── */

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.tabs > li { display: contents; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 2px solid var(--rr-navy);
  border-radius: 999px;
  background: #fff;
  color: var(--rr-navy);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.tab:hover { background: #fff6c2; color: var(--rr-navy); }
.tab-active, .tab[aria-current="page"], .tab[aria-selected="true"] { background: var(--rr-navy); color: #fff; }
.tab-active:hover, .tab[aria-current="page"]:hover { background: var(--rr-navy); color: #ffd400; }

/* ── Stats, LCD, pixel ──────────────────────────────────────────────────── */

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0; }
.stat {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12px 14px;
  border: 3px solid var(--rr-navy);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 4px 0 rgba(20, 32, 107, 0.2);
}
.stat-value { color: var(--rr-navy); font: 18px/1.2 var(--font-arcade); overflow-wrap: anywhere; }
.stat-label { color: var(--rr-muted); font-weight: 700; font-size: 12.5px; }
.stat-hint { color: var(--rr-muted); font-size: 12px; }

.lcd {
  position: relative;
  display: inline-grid;
  align-items: center;
  padding: 5px 8px 4px;
  border: 2px solid #021004;
  border-radius: 7px;
  background: linear-gradient(180deg, #0c2410, #071a0a);
  box-shadow: inset 0 0 0 2px #17391c, inset 0 6px 10px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(0, 0, 0, 0.35);
  color: #93ff6e;
  font: 13px/1 var(--font-arcade);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px rgba(147, 255, 110, 0.7);
  white-space: nowrap;
}
.lcd > .lcd-ghost, .lcd > .lcd-digits { grid-area: 1 / 1; }
.lcd-ghost { color: rgba(147, 255, 110, 0.12); text-shadow: none; }
.lcd-sm { font-size: 10px; padding: 4px 6px 3px; }
.lcd-lg { font-size: 20px; padding: 8px 12px 7px; }
.pixel { font-family: var(--font-arcade); font-size: 0.86em; letter-spacing: 0.02em; }

/* ── Copy blocks and countdowns ─────────────────────────────────────────── */

.copy-block {
  position: relative;
  max-height: 380px;
  margin: 0 0 10px;
  padding: 12px 14px;
  overflow: auto;
  border: 2px solid var(--rr-navy);
  border-radius: 12px;
  background: #0f1640;
  color: #e4ecff;
  font: 12.5px/1.55 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
textarea.copy-block { width: 100%; min-height: 160px; resize: vertical; }
[data-copy-target].is-copied { background: linear-gradient(180deg, #4fd06a, #168f40); color: #fff; }
[data-countdown] { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Empty states ───────────────────────────────────────────────────────── */

.empty {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border: 3px dashed #8a9fd9;
  border-radius: 16px;
  background: repeating-linear-gradient(-45deg, #f7f9ff 0 14px, #eef3ff 14px 28px);
}
.empty-art { flex: none; width: 116px; height: auto; animation: rr-float 3.2s ease-in-out infinite; }
.empty-copy { min-width: 0; }
.empty-title { margin: 0 0 6px; color: var(--rr-navy); font: 700 18px/1.25 var(--font-pixel); text-transform: uppercase; }
.empty-text { margin: 0; max-width: 62ch; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.empty-compact { gap: 14px; padding: 14px; }
.empty-compact .empty-art { width: 70px; }
.empty-compact .empty-title { font-size: 15px; }
.empty-compact .empty-text { font-size: 13px; }
.sidebar .empty, .game-side .empty { flex-direction: column; text-align: center; }
.sidebar .empty-actions, .game-side .empty-actions { justify-content: center; }
.panel-body > .empty:only-child { margin: 0; }
@keyframes rr-float { 50% { transform: translateY(-5px) rotate(-1.5deg); } }

/* ── Pagination ─────────────────────────────────────────────────────────── */

.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; }
.page-link {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 2px solid var(--rr-navy);
  border-radius: 10px;
  background: #fff;
  color: var(--rr-navy);
  font: 11px/1 var(--font-arcade);
  text-decoration: none;
  box-shadow: 0 3px 0 var(--rr-navy);
}
a.page-link:hover { background: #fff6c2; color: var(--rr-navy); }
.page-link.is-current { background: var(--rr-yellow); }
.page-prev, .page-next { font: 700 13px/1 var(--font-body); }
.page-gap { align-self: center; color: var(--rr-muted); }

/* ── Home ───────────────────────────────────────────────────────────────── */

.cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cat-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid var(--rr-navy);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 4px 0 rgba(20, 32, 107, 0.22);
}
.cat-card-head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 9px 12px;
  border-bottom: 3px solid var(--rr-navy);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%), var(--accent-bg);
  color: var(--accent-on);
  text-decoration: none;
}
.cat-card-head:hover { color: var(--accent-on); }
.cat-card-head:hover .cat-card-name { text-decoration: underline; }
.cat-card-head .cat-icon { grid-row: span 2; width: 36px; height: 36px; transition: transform 0.25s var(--ease-out); }
.cat-card-head:hover .cat-icon { transform: rotate(-10deg) scale(1.08); }
.cat-card-name { font: 700 15px/1.15 var(--font-pixel); text-transform: uppercase; }
/* Narrow cards (two per row on phones): the icon and count share the top row and the name gets the full
   width, sized so the longest one-word name (MULTIPLAYER, ~8.5em) still fits instead of being clipped. */
.cat-card { container-type: inline-size; }
@container (max-width: 220px) {
  .cat-card-head { padding: 8px 10px; }
  .cat-card-head .cat-icon { grid-row: auto; width: 30px; height: 30px; }
  .cat-card-count { grid-column: 2; grid-row: 1; }
  .cat-card-name { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; font-size: min(13px, calc((100cqi - 20px) / 8.5)); }
}
.cat-card-count { font-size: 12px; font-weight: 700; opacity: 0.95; }
.cat-card-blurb { margin: 0; padding: 9px 12px 0; font-size: 12.5px; }
.cat-card-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: auto 0 0; padding: 10px 12px 12px; list-style: none; }
.cat-card-thumbs a { display: block; border-radius: 6px; }
.cat-card-thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--rr-navy); border-radius: 6px; background: var(--accent); }
.cat-card-empty { margin: auto 0 0; padding: 10px 12px 12px; font-size: 12.5px; font-weight: 700; }

.home-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.home-duo > .panel { margin-top: 0; }
.jam-name { margin: 0 0 6px; font: 13px/1.4 var(--font-arcade); }
.jam-name a { color: var(--rr-navy); text-decoration: none; }
.jam-name a:hover { text-decoration: underline; color: var(--rr-link-hover); }
.jam-theme { margin: 0 0 8px; }
.jam-clock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 700; }
.jam-countdown {
  padding: 4px 8px 3px;
  border: 2px solid #021004;
  border-radius: 7px;
  background: #0c2410;
  color: #93ff6e;
  font: 12px/1 var(--font-arcade);
  text-shadow: 0 0 6px rgba(147, 255, 110, 0.7);
}
.jam-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.playtester-pitch { display: flex; align-items: flex-start; gap: 12px; }
.playtester-pitch > img { flex: none; width: 64px; height: auto; }
.playtester-pitch p { margin: 0 0 10px; }
.playtester-pitch p:last-child { margin: 0; }

/* ── Category page ──────────────────────────────────────────────────────── */

.cat-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  overflow: hidden;
  border: 3px solid var(--rr-navy);
  border-radius: 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-bg) 82%, #fff), var(--accent-bg) 55%, color-mix(in srgb, var(--accent-bg) 80%, #000));
  color: var(--accent-on);
  box-shadow: 0 6px 0 rgba(20, 32, 107, 0.3);
}
.cat-hero-rays {
  position: absolute;
  z-index: -1;
  left: calc(60px - 1300px);
  top: calc(50% - 1300px);
  width: 2600px;
  height: 2600px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.09) 0deg 9deg, rgba(255, 255, 255, 0) 9deg 18deg);
}
.cat-hero .cat-icon { flex: none; width: 76px; height: 76px; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.25)); }
.cat-hero-title { margin: 0 0 8px; color: inherit; font: 24px/1.25 var(--font-arcade); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.cat-shooting .cat-hero-title, .cat-weird .cat-hero-title { text-shadow: 0 3px 0 rgba(255, 255, 255, 0.45); }
.cat-hero-blurb { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.cat-hero-count { margin: 0; font-size: 13px; }
.cat-listing { margin-top: 18px; }
.other-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.other-cats-label { font-weight: 700; color: var(--rr-navy); margin-right: 4px; }

/* ── Game page ──────────────────────────────────────────────────────────── */

.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.crumbs li + li::before { content: "›"; margin-right: 4px; color: var(--rr-muted); }
.crumbs [aria-current="page"] { color: var(--rr-muted); }
.game-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 18px;
}
.main > .game-head { margin-top: 8px; }
.game-head-main { min-width: 0; }
.game-title { margin: 0 0 6px; color: var(--rr-navy); font: 700 28px/1.15 var(--font-pixel); text-transform: uppercase; overflow-wrap: anywhere; }
.game-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 13px; }
.game-head-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: 13px; }
.game-plays { font-weight: 700; color: var(--rr-navy); }

.stage-banner {
  position: relative;
  padding: 12px 16px 12px 58px;
  border: 3px solid var(--rr-navy);
  border-radius: var(--radius-lg);
  background: #eef4ff;
  box-shadow: 0 4px 0 rgba(20, 32, 107, 0.18);
}
.stage-banner::before {
  content: "i";
  position: absolute;
  left: 14px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 3px solid var(--rr-navy);
  border-radius: 10px;
  background: #fff;
  color: var(--rr-navy);
  font: 12px/1 var(--font-arcade);
}
.stage-banner-title { margin: 0 0 3px; color: var(--rr-navy); font: 700 15px/1.25 var(--font-pixel); text-transform: uppercase; }
.stage-banner-text { margin: 0; }
.stage-banner-judgment { background: #f1e9ff; }
.stage-banner-judgment::before { content: "?"; background: #5a24b0; color: #fff; }
.stage-banner-featured { background: linear-gradient(180deg, #fff9c9, #ffe98a); }
.stage-banner-featured::before { content: "★"; font: 16px/1 var(--font-body); background: #ffd400; }
.stage-banner-archived { background: #eceef4; }
.stage-banner-archived::before { content: "Z"; background: #5a6079; color: #fff; }
.stage-banner-review { background: #fff4d1; }
.stage-banner-review::before { content: "…"; background: #ffcf4d; }
.stage-banner-sent_back { background: #fdeceb; }
.stage-banner-sent_back::before { content: "!"; background: #b3261e; color: #fff; }
.stage-banner-removed { background: #2b2b2b; color: #fff; }
.stage-banner-removed .stage-banner-title { color: #ffd400; }
.stage-banner-removed::before { content: "×"; background: #b3261e; color: #fff; }

.game-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 250px); gap: 18px; }
.game-about-text { min-width: 0; }
.game-description, .game-instructions { white-space: pre-line; overflow-wrap: anywhere; max-width: 70ch; }
.game-subhead { margin: 14px 0 4px; font: 700 14px/1.2 var(--font-pixel); text-transform: uppercase; }
.game-facts { display: grid; gap: 8px; margin: 0; padding: 12px; border: 2px dashed var(--rr-line); border-radius: 12px; background: var(--rr-soft); align-content: start; }
.game-facts > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; align-items: center; }
.game-facts dt { color: var(--rr-muted); font-size: 12px; }
.game-facts dd { margin: 0; font-size: 13px; }
.creator-tools .row { margin: 6px 0 0; }
.game-report details, .game-report > details { padding: 10px 14px; border: 2px dashed var(--rr-line); border-radius: 12px; background: #fff; }
.game-report summary { color: var(--rr-muted); font-size: 13px; }
.game-report details[open] summary { margin-bottom: 10px; color: var(--rr-navy); }

/* ── Profile ────────────────────────────────────────────────────────────── */

.name-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  border: 3px solid var(--rr-navy);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #eef4ff);
  box-shadow: var(--shadow-chunky);
}
.name-card-initials {
  flex: none;
  display: grid;
  place-items: center;
  width: 118px;
  height: 92px;
  border: 4px solid var(--rr-navy);
  border-radius: 14px;
  background: radial-gradient(#1b1b1b 1px, transparent 1.4px) 0 0 / 4px 4px, #0b0b1a;
  color: #ffd400;
  font: 26px/1 var(--font-arcade);
  text-shadow: 0 0 10px rgba(255, 212, 0, 0.8), 0 3px 0 #b3261e;
  box-shadow: inset 0 0 0 3px #2a2a44, 0 5px 0 rgba(20, 32, 107, 0.3);
}
.name-card-main { min-width: 0; flex: 1; }
.name-card-name { margin: 0 0 6px; font: 700 26px/1.1 var(--font-pixel); overflow-wrap: anywhere; }
.name-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.name-card-badges .flair { margin-left: 0; }
.name-card-bio { margin: 0 0 8px; max-width: 65ch; white-space: pre-line; overflow-wrap: anywhere; }
.name-card-since { margin: 0 0 10px; color: var(--rr-muted); font-size: 12.5px; }
.name-card-level { max-width: 360px; margin: 0 0 12px; }
.name-card-level p { margin: 0 0 6px; }
.name-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.badge-card {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 10px;
  border: 2px solid var(--rr-navy);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 25%, #fff6c2, #ffffff 60%);
  text-align: center;
}
.badge-card-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 3px solid var(--rr-navy); border-radius: 50%; background: #ffd400; font-size: 26px; line-height: 1; box-shadow: 0 3px 0 rgba(20, 32, 107, 0.3); }
.badge-card-name { color: var(--rr-navy); font: 700 13px/1.2 var(--font-pixel); text-transform: uppercase; }
.badge-card-desc { font-size: 12.5px; }
.badge-card-date { color: var(--rr-muted); font-size: 11.5px; }

/* ── Search ─────────────────────────────────────────────────────────────── */

.search-big { margin: 0 0 18px; }
.search-big input[type="search"] {
  flex: 1;
  width: auto;
  height: 48px;
  padding: 0 18px;
  border: 3px solid var(--rr-navy);
  border-radius: 999px;
  font-size: 16px;
}
.search-big .btn { height: 48px; }
.search-count { margin: 0 0 14px; font-weight: 700; color: var(--rr-navy); }
.search-suggest { display: grid; gap: 10px; }
.search-suggest p { margin: 0; }
.search-lead { font: 700 15px/1.3 var(--font-pixel); text-transform: uppercase; color: var(--rr-navy); }
.search-try, .search-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.search-inline { justify-content: center; margin: 18px 0 0; }
.search-inline input[type="search"] { width: 300px; max-width: 100%; }

/* ── About, rules, errors ───────────────────────────────────────────────── */

.page-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 3px solid var(--rr-navy);
  border-radius: 18px;
  background: radial-gradient(90% 140% at 10% 50%, #3d63ff 0%, #1a2a9c 60%, #14206b 100%);
  color: #fff;
  box-shadow: 0 6px 0 rgba(20, 32, 107, 0.3);
}
.page-hero-art { flex: none; width: 104px; height: auto; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.3)); }
.page-hero-title { margin: 0 0 8px; color: #ffd400; font: 22px/1.3 var(--font-arcade); text-shadow: 0 3px 0 #0a1150; }
.page-hero-lead { margin: 0; max-width: 60ch; font-size: 15px; color: #eef3ff; }
.prose { max-width: 72ch; }
.prose p:last-child { margin-bottom: 0; }
.rules-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rules-list li { position: relative; padding-left: 28px; }
.rules-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--rr-gold);
  text-shadow: 0 1px 0 #a35f00;
  font-size: 16px;
  line-height: 1.3;
}
.lifecycle { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.life-step { position: relative; display: grid; justify-items: start; gap: 6px; flex: 1 1 140px; padding: 10px 12px; border: 2px solid var(--rr-navy); border-radius: 12px; background: var(--rr-soft); }
.life-step:not(:last-child)::after { content: "›"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); color: var(--rr-navy); font: 700 20px/1 var(--font-body); }
.life-text { font-size: 12.5px; }
.about-cats { display: flex; flex-wrap: wrap; gap: 6px; }

.error-page { display: grid; gap: 16px; justify-items: center; padding: 10px 0 20px; text-align: left; }
.error-code {
  margin: 0;
  color: #ffd400;
  font: 64px/1 var(--font-arcade);
  text-shadow: 4px 4px 0 #e8392c, 8px 8px 0 var(--rr-navy);
  -webkit-text-stroke: 3px var(--rr-navy);
  paint-order: stroke fill;
}
.error-page .empty { max-width: 720px; width: 100%; }
.error-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer {
  border-top: 3px solid var(--rr-navy);
  border-radius: 0 0 17px 17px;
  background:
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(180deg, #1a2a9c, #0f1850);
  color: #dfe8ff;
}
.footer-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px 24px;
  padding: 20px 22px;
}
.footer-counter { display: flex; align-items: center; gap: 12px; grid-row: span 2; }
.footer-counter-label { max-width: 8em; color: #ffd400; font: 700 13px/1.2 var(--font-pixel); text-transform: uppercase; }
.footer-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.footer-stats strong { color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: #fff; font-weight: 700; }
.footer-links a:hover { color: #ffd400; }
.footer-fine { grid-column: 1 / -1; margin: 0; padding-top: 12px; border-top: 2px dashed rgba(255, 255, 255, 0.2); color: #c3cff2; font-size: 12px; }

/* ── Utilities ──────────────────────────────────────────────────────────── */

.muted { color: var(--rr-muted); }
.small { font-size: 12.5px; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack > * { margin-top: 0; margin-bottom: 0; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.nowrap { white-space: nowrap; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
[hidden] { display: none !important; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .site { margin: 30px 12px 0; }
}

@media (max-width: 1060px) {
  .masthead-top { grid-template-columns: minmax(0, 1fr) auto; }
  .plays-today { display: none; }
}

@media (max-width: 900px) {
  .layout.has-sidebar { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: start; }
  .sidebar > * + * { margin-top: 0; }
  .sidebar .promo { margin-top: 38px; }
  .game-about { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body { padding-bottom: 120px; background-size: auto 120px, auto; }
  .site { margin: 26px 8px 0; border-radius: 16px; }
  .masthead { border-radius: 13px 13px 0 0; }
  .footer { border-radius: 0 0 13px 13px; }
  .masthead-top { grid-template-columns: minmax(0, 1fr); padding: 8px 14px 12px 8px; }
  .masthead-tools { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .search { flex: 1 1 220px; }
  .search input[type="search"] { flex: 1; width: auto; min-width: 0; font-size: 16px; }
  .user-menu-panel { right: 0; }

  .nav { display: flex; flex-direction: column; padding: 8px 0 0; }
  .nav-toggle {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px 12px;
    padding: 6px 12px;
    border: 2px solid #ffd400;
    border-radius: 999px;
    background: transparent;
    color: #ffd400;
    font: 700 12px/1 var(--font-pixel);
    text-transform: uppercase;
    cursor: pointer;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 14px; height: 2px; background: currentColor; border-radius: 2px; }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -5px; }
  .nav-toggle-bars::after { top: 5px; }
  .nav-tabs { padding: 8px 12px 0; scroll-snap-type: x proximity; scroll-padding: 12px; }
  .nav-tabs > li { scroll-snap-align: start; }
  .nav-tabs > li:last-child { margin-left: 4px; }
  .nav-tab { font-size: 12px; padding: 10px 10px 9px; }
  .nav.is-open .nav-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    overflow: visible;
    padding-bottom: 12px;
    background: none;
  }
  .nav.is-open .nav-tabs > li:last-child { margin: 0; padding: 0; }
  .nav.is-open .nav-tab { margin: 0; padding: 11px 8px; border-bottom: 2px solid #0a1150; border-radius: 10px; text-align: center; }
  .nav.is-open .nav-tab.is-active { box-shadow: inset 0 -4px 0 var(--accent); }

  .flash { margin: 12px 12px 0; }
  .layout { padding: 14px 12px; gap: 14px; }
  .main > * + *, .sidebar > * + *, .game-side > * + * { margin-top: 14px; }
  .home-duo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cat-hero { flex-direction: column; align-items: flex-start; padding: 18px; }
  .cat-hero-title { font-size: 20px; }
  .game-title { font-size: 22px; }
  .name-card { flex-direction: column; }
  .page-hero { flex-direction: column; align-items: flex-start; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-counter { grid-row: auto; }
  .error-code { font-size: 44px; }
}

@media (max-width: 560px) {
  .site { margin: 22px 0 0; border-left: 0; border-right: 0; border-radius: 0; }
  .masthead, .footer { border-radius: 0; }
  .masthead-top { padding: 8px 16px 12px 8px; }
  .rivet-btn { margin-top: -28px; }
  .rivet-btn img { width: 60px; height: 62px; }
  .logo img { width: min(240px, 100%); }
  .tagline { font-size: 11px; }
  .flash { margin: 12px 16px 0; }
  .layout { padding: 14px 16px; }
  .grid-tiles { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 16px 10px; }
  .tile-slot { min-height: 160px; }
  .grid-tiles > .tile-slot:nth-child(n+5) { display: none; }
  .cat-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .cat-card-blurb { font-size: 12px; }
  .empty { flex-direction: column; text-align: center; padding: 16px 14px; }
  .empty-actions { justify-content: center; }
  .stage-banner { padding-left: 16px; padding-top: 52px; }
  .panel-head, .panel > .panel-title { padding: 8px 12px; }
  .panel-body { padding: 12px 12px 14px; }
  .playtester-pitch > img { display: none; }
  .search-big { flex-wrap: wrap; }
  .search-big .btn { flex: 1 1 100%; }
  .table { font-size: 12.5px; }
}

/* ── Motion and contrast preferences ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sky::before, .sky::after, .burst, .ticker-dot, .empty-art { animation: none !important; }
  .ticker.is-moving .ticker-track { animation: none !important; }
  .ticker.is-moving .ticker-window { overflow-x: auto; }
  .tile:hover, .tile:focus-within { transform: none; }
  .rivet-btn.is-ringing { animation: none; }
}

@media (forced-colors: active) {
  .panel-head, .panel > .panel-title, .nav-tab, .btn, .badge, .tab { border: 2px solid CanvasText; }
  .stars-fill { forced-color-adjust: none; }
  .burst::before { background: Highlight; }
}

@media print {
  body { background: #fff; padding: 0; }
  .sky, .ticker, .nav, .masthead-tools, .plays-today, .sidebar, .footer, .rivet-btn { display: none !important; }
  .site { margin: 0; border: 0; box-shadow: none; }
  .layout.has-sidebar { grid-template-columns: 1fr; }
}

/* ── Phase B: the How was it strip (Cabinet Plan §14.5; site.js fills [data-rr-ask] on the page after a game) ── */
.rr-ask { margin: 14px 18px 0; }
.rr-ask[hidden] { display: none; }
.rr-ask-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 14px;
  border: 3px solid var(--rr-navy);
  border-radius: 14px;
  background: #fff6c2;
  box-shadow: 0 4px 0 rgba(20, 32, 107, 0.25);
}
.rr-ask-title { margin: 0; color: var(--rr-navy); font: 700 14px/1.3 var(--font-pixel); overflow-wrap: anywhere; }
.rr-ask-faces, .rr-ask-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-ask-faces[hidden], .rr-ask-chips[hidden] { display: none; }
.rr-ask-face, .rr-ask-chip, .rr-ask-close {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 3px 10px 3px 5px;
  border: 2px solid var(--rr-navy);
  border-radius: 999px;
  background: #fff;
  color: var(--rr-navy);
  font: 700 12.5px/1.2 var(--font-body);
  cursor: pointer;
}
.rr-ask-chip, .rr-ask-close { padding: 3px 12px; }
.rr-ask-close { margin-left: auto; background: transparent; }
.rr-ask-face:hover, .rr-ask-chip:hover, .rr-ask-close:hover { background: var(--rr-yellow); }
.rr-ask-face[aria-pressed="true"] { background: var(--rr-yellow); border-color: var(--rr-red); }
.rr-ask-face:focus-visible, .rr-ask-chip:focus-visible, .rr-ask-close:focus-visible { outline: 3px solid var(--rr-blue); outline-offset: 2px; }
.rr-ask-face-art { width: 24px; height: 24px; background: center / contain no-repeat; image-rendering: pixelated; }
.rr-ask-art-1 { background-image: url("/static/img/face-1.svg"); }
.rr-ask-art-2 { background-image: url("/static/img/face-2.svg"); }
.rr-ask-art-3 { background-image: url("/static/img/face-3.svg"); }
.rr-ask-art-4 { background-image: url("/static/img/face-4.svg"); }
.rr-ask-art-5 { background-image: url("/static/img/face-5.svg"); }
.rr-ask-msg { flex: 1 1 100%; margin: 0; font-size: 13px; }
.rr-ask-msg:empty { display: none; }
@media (max-width: 760px) {
  .rr-ask { margin: 12px 12px 0; }
  .rr-ask-face-word { display: none; }
  .rr-ask-face { padding: 3px 5px; }
}
@media (hover: none) and (pointer: coarse) {
  .rr-ask-face, .rr-ask-chip, .rr-ask-close { min-height: 40px; min-width: 40px; }
}
@media (max-width: 560px) {
  .rr-ask { margin: 12px 16px 0; }
}