/* SpiderBen10's Arcade — red & blue 80s arcade cabinet */
:root {
  color-scheme: dark;
  --night: #0a0f2e;
  --panel: #111a4c;
  --panel-2: #0d1440;
  --red: #e3262f;
  --red-dark: #8e1219;
  --blue: #2456e8;
  --blue-light: #6ea0ff;
  --web: #9fb0e0;
  --yellow: #ffd23f;
  --text: #f2f4ff;
  --muted: #9aa6d6;
  --line: #1d2766;
  --line-2: #3a4170;
  --off: #2a3160;
  --blue-dark: #13307f;
  --accent-soft: #ff8a90;
  --on-accent: #ffffff;
  --shadow: #000000;
  --marquee-bg: #050818;
  --marquee-fade: rgba(5, 8, 24, 0.9);
  --scanline: rgba(0, 0, 0, 0.2);
  --glow-red: rgba(227, 38, 47, 0.5);
  --glow-blue: rgba(36, 86, 232, 0.7);
  --glow-yellow: rgba(255, 210, 63, 0.35);
  --title-shadow: #000000;
  --page-bg:
    radial-gradient(circle at 0 0, transparent 0 60px, rgba(159, 176, 224, 0.07) 61px 62px, transparent 63px 120px, rgba(159, 176, 224, 0.06) 121px 122px, transparent 123px 190px, rgba(159, 176, 224, 0.05) 191px 192px, transparent 193px),
    radial-gradient(circle at 100% 100%, transparent 0 80px, rgba(227, 38, 47, 0.08) 81px 82px, transparent 83px 160px, rgba(227, 38, 47, 0.06) 161px 162px, transparent 163px),
    linear-gradient(180deg, #0a0f2e 0%, #0b1236 60%, #140a24 100%);
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --term: "VT323", ui-monospace, monospace;
}

/* ---------- Themes (picked with 🎨 Theme; the banner scenes are in marquee.js) ---------- */
/* Stick Figure: black and white on a white page */
:root[data-theme="stick"] {
  color-scheme: light;
  --night: #ffffff; --panel: #ffffff; --panel-2: #f5f5f5;
  --red: #111111; --red-dark: #000000; --blue: #6b6b6b; --blue-light: #444444; --blue-dark: #333333;
  --web: #9a9a9a; --yellow: #111111; --text: #111111; --muted: #5f5f5f;
  --line: #d6d6d6; --line-2: #9a9a9a; --off: #ececec; --accent-soft: #333333; --on-accent: #ffffff;
  --shadow: #111111; --marquee-bg: #ffffff; --marquee-fade: rgba(255, 255, 255, 0.94); --scanline: transparent;
  --glow-red: transparent; --glow-blue: transparent; --glow-yellow: transparent; --title-shadow: #d4d4d4;
  --page-bg: #ffffff;
}
/* Rocket Armor: red and gold plates, cyan glow */
:root[data-theme="armor"] {
  --night: #120a0a; --panel: #2a1214; --panel-2: #1a0c0d;
  --red: #c8102e; --red-dark: #6e0816; --blue: #b8860b; --blue-light: #ffcf4d; --blue-dark: #6e5006;
  --web: #f0c27b; --yellow: #5ff3ff; --text: #fff3e6; --muted: #c9a99a;
  --line: #4a2326; --line-2: #6b3a2c; --off: #3a2224; --accent-soft: #ff7a8a;
  --marquee-bg: #0c0606; --marquee-fade: rgba(12, 6, 6, 0.9);
  --glow-red: rgba(200, 16, 46, 0.5); --glow-blue: rgba(255, 207, 77, 0.5); --glow-yellow: rgba(95, 243, 255, 0.35);
  --page-bg: radial-gradient(ellipse at 50% -20%, rgba(255, 138, 58, 0.18), transparent 60%), linear-gradient(180deg, #120a0a 0%, #1c0b0e 60%, #0c0606 100%);
}
/* Lab Mice: lab green and purple */
:root[data-theme="lab"] {
  --night: #0e1a14; --panel: #15291f; --panel-2: #10221a;
  --red: #9b3fe6; --red-dark: #5d1f8f; --blue: #2f9e5a; --blue-light: #7dffa8; --blue-dark: #1f6b3c;
  --web: #9fd8b0; --yellow: #ffe14a; --text: #effff4; --muted: #9cc4ab;
  --line: #24412f; --line-2: #2f5a40; --off: #22382b; --accent-soft: #d59bff;
  --marquee-bg: #07120c; --marquee-fade: rgba(7, 18, 12, 0.9);
  --glow-red: rgba(155, 63, 230, 0.5); --glow-blue: rgba(125, 255, 168, 0.45); --glow-yellow: rgba(255, 225, 74, 0.3);
  --page-bg: repeating-linear-gradient(0deg, transparent 0 31px, rgba(125, 255, 168, 0.04) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(125, 255, 168, 0.04) 31px 32px), linear-gradient(180deg, #0e1a14, #0a140f);
}
/* Unicorn Sky: pastel pink and lavender on a light page */
:root[data-theme="unicorn"] {
  color-scheme: light;
  --night: #fff7fc; --panel: #ffffff; --panel-2: #fdebf6;
  --red: #d63d92; --red-dark: #a8236f; --blue: #9a7bff; --blue-light: #6a4fd6; --blue-dark: #5b3fc4;
  --web: #c9b5ff; --yellow: #e0479e; --text: #3a2350; --muted: #7d6493;
  --line: #f1cde4; --line-2: #d9b8f0; --off: #f3e8f7; --accent-soft: #c2337f; --on-accent: #ffffff;
  --shadow: #d7b3e6; --marquee-bg: #ffe4f4; --marquee-fade: rgba(255, 244, 251, 0.94); --scanline: transparent;
  --glow-red: rgba(255, 122, 200, 0.35); --glow-blue: rgba(176, 124, 255, 0.3); --glow-yellow: rgba(224, 71, 158, 0.25);
  --title-shadow: #ffffff;
  --page-bg: radial-gradient(circle at 10% 10%, rgba(255, 122, 200, 0.18), transparent 40%), radial-gradient(circle at 90% 80%, rgba(127, 212, 255, 0.18), transparent 45%), linear-gradient(180deg, #fff7fc, #f6efff);
}
/* Idol Hunters: neon pink, violet and cyan on a concert-night purple */
:root[data-theme="idol"] {
  --night: #0d0420; --panel: #1e0b3d; --panel-2: #150630;
  --red: #ff2e93; --red-dark: #8f0f50; --blue: #6a2cff; --blue-light: #3ff4ff; --blue-dark: #3c1499;
  --web: #c7a6ff; --yellow: #ffd84a; --text: #fff0fb; --muted: #b89ad6;
  --line: #3a1b66; --line-2: #52308a; --off: #2a1748; --accent-soft: #ff8ac4;
  --marquee-bg: #07020f; --marquee-fade: rgba(7, 2, 15, 0.9);
  --glow-red: rgba(255, 46, 147, 0.55); --glow-blue: rgba(63, 244, 255, 0.5); --glow-yellow: rgba(255, 216, 74, 0.35);
  --page-bg: radial-gradient(ellipse at 20% 0, rgba(255, 46, 147, 0.16), transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(63, 244, 255, 0.12), transparent 50%), linear-gradient(180deg, #0d0420, #150630);
}

/* Speed Streak: scarlet and gold on a storm-night purple */
:root[data-theme="speed"] {
  --night: #0b0710; --panel: #1f0f1c; --panel-2: #160a14;
  --red: #d0161f; --red-dark: #6e0810; --blue: #b8860b; --blue-light: #ffcf33; --blue-dark: #6e5006;
  --web: #ffd98a; --yellow: #ffe26b; --text: #fff4ea; --muted: #c9a7b0;
  --line: #3a1e30; --line-2: #5a2c40; --off: #2c1626; --accent-soft: #ff7a7a;
  --marquee-bg: #0b0710; --marquee-fade: rgba(11, 7, 16, 0.9);
  --glow-red: rgba(208, 22, 31, 0.55); --glow-blue: rgba(255, 207, 51, 0.5); --glow-yellow: rgba(255, 226, 107, 0.4);
  --page-bg: linear-gradient(115deg, transparent 0 48%, rgba(255, 207, 51, 0.05) 48% 49%, transparent 49%), radial-gradient(ellipse at 80% 0, rgba(208, 22, 31, 0.16), transparent 55%), linear-gradient(180deg, #0b0710, #150a14);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* some components set display, which would beat the hidden attribute */
html { background: var(--night); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--term);
  font-size: 22px;
  line-height: 1.2;
  background: var(--page-bg); /* the default theme draws a faint spider-web lattice */
  background-attachment: fixed;
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  border: 4px solid var(--red);
  box-shadow: 0 0 0 4px var(--blue), 0 0 40px var(--glow-red), 8px 8px 0 4px var(--shadow);
  background: var(--marquee-bg);
  overflow: hidden;
}
.marquee canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 120;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.marquee::after { /* CRT scanlines */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--scanline) 2px 3px);
}
.marquee-text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 16px 12px;
  background: linear-gradient(180deg, transparent, var(--marquee-fade) 45%);
  z-index: 1;
}
.eyebrow {
  margin: 0 0 6px;
  font-family: var(--pixel);
  font-size: clamp(7px, 1.2vw, 10px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  animation: blink 1.2s steps(2) infinite;
}
h1 {
  margin: 0;
  font-family: var(--pixel);
  font-size: clamp(18px, 4.6vw, 44px);
  line-height: 1.15;
  text-wrap: balance;
  font-weight: normal;
}
.h-red { color: var(--red); text-shadow: 3px 3px 0 var(--title-shadow), 0 0 12px var(--glow-red); }
.h-blue { color: var(--blue-light); text-shadow: 3px 3px 0 var(--title-shadow), 0 0 12px var(--glow-blue); }
.byline {
  margin: 8px 0 0;
  font-size: clamp(18px, 2.4vw, 24px);
  color: var(--text);
}
.byline strong { color: var(--yellow); font-weight: normal; }
.tag { color: var(--blue-light); }

/* ---------- Section heads ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
h2 {
  margin: 0;
  font-family: var(--pixel);
  font-weight: normal;
  font-size: clamp(11px, 1.8vw, 15px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  text-shadow: 2px 2px 0 var(--title-shadow);
}
.hint { margin: 0; color: var(--muted); font-size: 20px; }
kbd {
  font-family: var(--pixel); font-size: 9px; color: var(--yellow);
  border: 1px solid var(--muted); padding: 3px 5px; margin-right: 4px; background: var(--panel-2);
}

/* ---------- Grade picker ---------- */
.hint strong { color: var(--yellow); font-weight: normal; }
.grade-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.grade-select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--pixel); font-size: clamp(11px, 1.6vw, 14px);
  min-height: 48px; min-width: 240px; padding: 8px 52px 8px 14px;
  color: var(--on-accent); background-color: var(--red);
  /* pixel arrow */
  background-image: linear-gradient(45deg, transparent 50%, var(--on-accent) 50%), linear-gradient(135deg, var(--on-accent) 50%, transparent 50%);
  background-position: calc(100% - 26px) 50%, calc(100% - 18px) 50%;
  background-size: 8px 8px, 8px 8px; background-repeat: no-repeat;
  border: 2px solid var(--yellow); border-radius: 0;
  box-shadow: 3px 3px 0 var(--shadow), 0 0 14px var(--glow-red); cursor: pointer;
}
.grade-select:hover, .grade-select:focus-visible { outline: 2px solid var(--web); outline-offset: 2px; }

/* ---------- Cabinets ---------- */
.cabinets {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 22px;
}
.cabinet {
  display: flex; flex-direction: column;
  height: 100%;
  color: inherit; text-decoration: none;
  background: var(--panel);
  border: 3px solid var(--blue);
  box-shadow: 6px 6px 0 var(--shadow);
  transition: transform 0.12s ease;
}
.cabinet .cab-top {
  font-family: var(--pixel); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: center;
  padding: 8px; background: var(--red); color: var(--on-accent); border-bottom: 3px solid var(--red-dark);
}
.cabinet .screen {
  position: relative;
  margin: 12px 12px 0;
  border: 3px solid #000;
  outline: 2px solid var(--web);
  aspect-ratio: 16 / 10;
  background: #000;
  overflow: hidden;
}
.cabinet .screen img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.cabinet .screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.18) 2px 3px);
}
.cabinet .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cabinet h3 { margin: 0; font-family: var(--pixel); font-weight: normal; font-size: 13px; line-height: 1.4; color: var(--yellow); }
.cabinet p { margin: 0; color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.chip { font-family: var(--pixel); font-size: 8px; padding: 4px 6px; border: 1px solid var(--blue-light); color: var(--blue-light); }
.chip.grade { border-color: var(--red); color: var(--accent-soft); }
.chip.grade.off { border-color: var(--muted); color: var(--muted); }
.start {
  font-family: var(--pixel); font-size: 10px; text-align: center;
  padding: 10px; background: var(--blue); color: var(--on-accent); border-top: 3px solid var(--blue-dark);
}
.cabinet:hover, .cabinet:focus-visible, .cabinet.selected {
  outline: none;
  border-color: var(--yellow);
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--shadow), 0 0 24px var(--glow-yellow);
}
.cabinet.selected .start, .cabinet:focus-visible .start { background: var(--red); animation: blink 0.9s steps(2) infinite; }

.cabinet.soon { border-style: dashed; border-color: var(--muted); box-shadow: none; }
.cabinet.soon .cab-top { background: var(--panel-2); color: var(--muted); border-bottom-color: var(--panel-2); }
.cabinet.soon .screen { display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--panel-2) 0 10px, var(--panel) 10px 20px); }
.cabinet.soon .screen span { font-family: var(--pixel); font-size: 10px; color: var(--muted); animation: blink 1.4s steps(2) infinite; }

/* ---------- Credits ---------- */
.scores { margin-top: 36px; }
.scores table { width: 100%; border-collapse: collapse; font-size: 22px; font-variant-numeric: tabular-nums; }
.scores .table-wrap { overflow-x: auto; }
.scores th {
  font-family: var(--pixel); font-weight: normal; font-size: 9px; letter-spacing: 0.08em;
  color: var(--muted); text-align: left; padding: 6px 10px 8px 0;
}
.scores td { padding: 6px 10px 6px 0; border-top: 1px solid var(--line); }
.scores td:first-child { color: var(--red); font-family: var(--pixel); font-size: 11px; }
.scores td.creator { color: var(--yellow); }

footer { color: var(--muted); font-size: 19px; border-top: 2px solid var(--line); padding-top: 14px; }
footer p { margin: 0 0 4px; }
footer .fine { font-size: 17px; opacity: 0.8; }

@keyframes blink { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .eyebrow, .cabinet.selected .start, .cabinet:focus-visible .start, .cabinet.soon .screen span { animation: none; }
  .cabinet { transition: none; }
}
@media (max-width: 560px) {
  .marquee-text { position: static; background: var(--marquee-bg); }
}

/* Adaptive math switch under the grade picker */
.adapt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.adapt .hint { margin: 0; }
.adapt-btn, .adapt-reset {
  font: inherit; font-size: 0.95em; cursor: pointer; color: var(--text); background: var(--night);
  border: 2px solid var(--blue); padding: 6px 12px; box-shadow: 3px 3px 0 var(--shadow);
}
.adapt-btn.on { border-color: var(--yellow); }
.adapt-btn strong { color: var(--yellow); }
.adapt-btn:not(.on) strong { color: var(--muted); }
.adapt-btn:hover, .adapt-btn:focus-visible, .adapt-reset:hover, .adapt-reset:focus-visible { outline: none; border-color: var(--yellow); }
.adapt-reset { border-color: var(--line-2); color: var(--muted); font-size: 0.85em; }

/* ---------- Hero + credits buttons on the marquee ---------- */
.marquee-buttons { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 8px; }
.credits-badge, .hero-badge {
  font-family: var(--pixel); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--yellow); text-decoration: none; cursor: pointer;
  background: var(--marquee-fade); border: 2px solid var(--blue-light); padding: 6px 8px; box-shadow: 3px 3px 0 var(--shadow);
}
.hero-badge[aria-expanded="true"] { border-color: var(--yellow); background: var(--red); color: var(--on-accent); }
.credits-badge:hover, .credits-badge:focus-visible, .hero-badge:hover, .hero-badge:focus-visible { outline: none; border-color: var(--yellow); }

/* ---------- Theme picker ---------- */
.profile-panel {
  margin: 22px 0 6px; padding: 16px; background: var(--panel-2);
  border: 3px solid var(--yellow); box-shadow: 6px 6px 0 var(--shadow);
}
.profile-welcome { margin: 0 0 14px; padding: 8px 12px; border: 2px dashed var(--yellow); color: var(--text); }
.profile-welcome strong { color: var(--yellow); font-weight: normal; }
.profile-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.profile-row.column { display: block; }
.profile-row.column .profile-label { display: block; margin-bottom: 10px; }
.profile-label { flex: 0 0 150px; font-family: var(--pixel); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.profile-toggles { display: flex; flex-direction: column; gap: 4px; flex: 1 1 300px; min-width: 0; }
.profile-toggles .adapt { margin-top: 0; }
.players { display: flex; flex-wrap: wrap; gap: 8px; }
.player-chip { font-size: 10px; min-width: 64px; }
.player-add { border-style: dashed; }
.text-input {
  font-family: var(--term); font-size: 24px; min-height: 44px; padding: 4px 10px; width: 240px; max-width: 100%;
  color: var(--text); background: var(--panel); border: 2px solid var(--blue); border-radius: 0; box-shadow: 3px 3px 0 var(--shadow);
}
.text-input.wide { width: 360px; }
.text-input:focus-visible { outline: none; border-color: var(--yellow); }
.player-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.player-bar strong { color: var(--yellow); font-weight: normal; }
.theme-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.theme-card {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center;
  text-align: left; cursor: pointer; padding: 10px 12px; min-height: 64px;
  font: inherit; color: var(--text); background: var(--panel); border: 2px solid var(--blue); box-shadow: 3px 3px 0 var(--shadow);
}
.theme-card:hover, .theme-card:focus-visible { outline: none; border-color: var(--yellow); }
.theme-card[aria-pressed="true"] { border-color: var(--yellow); box-shadow: 3px 3px 0 var(--shadow), 0 0 0 2px var(--yellow); }
.theme-card[aria-pressed="true"] .theme-name::after { content: " ✓"; color: var(--yellow); }
.theme-dots { grid-row: 1 / 3; display: flex; gap: 3px; }
.theme-dots span { width: 12px; height: 28px; border: 1px solid var(--line-2); }
.theme-name { font-family: var(--pixel); font-size: 10px; color: var(--yellow); }
.theme-note { font-size: 18px; color: var(--muted); line-height: 1.05; }
.stick-options { margin-bottom: 6px; }
.hero-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.hero-group-label { flex: 0 0 92px; font-family: var(--pixel); font-size: 10px; color: var(--muted); text-transform: uppercase; }
.pick {
  min-height: 40px; padding: 6px 10px; cursor: pointer;
  font-family: var(--pixel); font-size: 9px; text-transform: uppercase;
  color: var(--text); background: var(--panel); border: 2px solid var(--blue); box-shadow: 3px 3px 0 var(--shadow);
}
.pick[aria-pressed="true"] { background: var(--red); border-color: var(--yellow); color: var(--on-accent); }
.pick:hover, .pick:focus-visible { outline: none; border-color: var(--yellow); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.credits-link { color: var(--yellow); }

/* ---------- Subject tabs + "fits my grade" ---------- */
.filter-selects { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
.select-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.select-label { font-family: var(--pixel); font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pick-select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--pixel); font-size: clamp(10px, 1.3vw, 12px);
  min-height: 46px; min-width: 260px; max-width: 100%; padding: 8px 46px 8px 12px;
  color: var(--text); background-color: var(--panel);
  background-image: linear-gradient(45deg, transparent 50%, var(--yellow) 50%), linear-gradient(135deg, var(--yellow) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 16px) 50%;
  background-size: 8px 8px, 8px 8px; background-repeat: no-repeat;
  border: 2px solid var(--blue); border-radius: 0; box-shadow: 3px 3px 0 var(--shadow); cursor: pointer;
}
.pick-select:hover, .pick-select:focus-visible { outline: none; border-color: var(--yellow); }
.pick-select option, 
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; }
.fit-btn {
  font: inherit; font-size: 0.95em; cursor: pointer; color: var(--text); background: var(--night);
  border: 2px solid var(--blue); padding: 6px 12px; box-shadow: 3px 3px 0 var(--shadow); min-height: 40px;
}
.fit-btn.on { border-color: var(--yellow); }
.fit-btn strong { color: var(--yellow); font-weight: normal; }
.fit-btn:not(.on) strong { color: var(--muted); }
.fit-btn:hover, .fit-btn:focus-visible { outline: none; border-color: var(--yellow); }

/* ---------- Shelves (Favorites / Recently played / New / All) ---------- */
#shelves { display: flex; flex-direction: column; gap: 26px; }
.shelf-title {
  margin: 0 0 12px; font-family: var(--pixel); font-weight: normal; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-light); text-shadow: 2px 2px 0 var(--title-shadow);
}
.shelf-favorites .shelf-title { color: var(--yellow); }
.shelf-new .shelf-title { color: var(--accent-soft); }
.shelf-count { color: var(--muted); font-size: 9px; }
.empty { margin: 0; padding: 16px; border: 2px dashed var(--muted); color: var(--muted); }
.empty strong { color: var(--yellow); font-weight: normal; }

.cabinets > li { position: relative; min-width: 0; }
.cabinets.mini { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 18px; }
.cabinets.mini .cabinet h3 { font-size: 11px; }
.cabinets.mini .start { padding: 7px; font-size: 9px; }

/* Favorite star sits on the cabinet's top strip */
.fav {
  position: absolute; top: 0; right: 0; z-index: 1;
  width: 34px; height: 34px; padding: 0;
  font-size: 20px; line-height: 1; cursor: pointer;
  color: var(--text); background: transparent; border: 0;
}
.fav.on { color: var(--yellow); text-shadow: 0 0 8px var(--glow-yellow), 2px 2px 0 var(--title-shadow); }
.fav:hover, .fav:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; color: var(--yellow); }
.cabinet .cab-top { padding-inline: 36px; }

.chip.new { border-color: var(--yellow); color: var(--yellow); }

/* ---------- New games: glow, ribbon and banner ---------- */
.cabinet.is-new { border-color: var(--yellow); animation: new-glow 1.8s ease-in-out infinite; }
@keyframes new-glow {
  0%, 100% { box-shadow: 6px 6px 0 var(--shadow), 0 0 6px var(--glow-yellow); }
  50% { box-shadow: 6px 6px 0 var(--shadow), 0 0 22px var(--glow-yellow); }
}
.cabinet.is-new:hover, .cabinet.is-new:focus-visible, .cabinet.is-new.selected { animation: none; }
.new-ribbon {
  position: absolute; top: 10px; left: -30px; z-index: 1; width: 110px; padding: 4px 0;
  transform: rotate(-35deg); text-align: center; pointer-events: none;
  font-family: var(--pixel); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #1a1200; background: var(--yellow); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
:root[data-theme="stick"] .new-ribbon, :root[data-theme="unicorn"] .new-ribbon { color: #ffffff; }
.shelf-new .shelf-title { font-size: 13px; }
@media (max-width: 560px) { .new-ribbon { top: 6px; left: -34px; width: 100px; padding: 2px 0; font-size: 7px; } }
.new-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 18px; padding: 10px 12px;
  background: var(--panel); border: 3px solid var(--yellow); box-shadow: 4px 4px 0 var(--shadow), 0 0 18px var(--glow-yellow);
}
.new-banner[hidden] { display: none; }
.new-banner-icon { font-size: 22px; }
.new-banner-text { flex: 1 1 200px; font-family: var(--pixel); font-size: 11px; line-height: 1.5; color: var(--yellow); }
.new-banner-go {
  font-family: var(--pixel); font-size: 10px; padding: 8px 10px; cursor: pointer;
  background: var(--red); color: var(--on-accent); border: 2px solid var(--yellow);
}
.new-banner-close {
  width: 34px; height: 34px; cursor: pointer; font-size: 16px; line-height: 1;
  background: transparent; color: var(--muted); border: 2px solid var(--line-2, var(--muted));
}
.new-banner-go:hover, .new-banner-go:focus-visible, .new-banner-close:hover, .new-banner-close:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; color: var(--yellow); }
@media (prefers-reduced-motion: reduce) { .cabinet.is-new { animation: none; box-shadow: 6px 6px 0 var(--shadow), 0 0 14px var(--glow-yellow); } }
.chip.dev { border-color: var(--muted); color: var(--muted); border-style: dashed; }

/* Games for other grades (shown when "Fits my grade" is off) */
.cabinet.off-grade { border-color: var(--line-2); }
.cabinet.off-grade .screen img { filter: grayscale(1) brightness(0.6); }
.cabinet.off-grade h3, .cabinet.off-grade p { opacity: 0.6; }
.cabinet.off-grade .cab-top, .cabinet.off-grade .start { background: var(--off); border-color: var(--line); color: var(--muted); }

/* ---------- Phones: compact list (thumbnail + title + chips) ---------- */
@media (max-width: 599.98px) {
  .cabinets, .cabinets.mini { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cabinet { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; box-shadow: 4px 4px 0 var(--shadow); }
  .cabinet .cab-top, .cabinet .start, .cabinet .tagline { display: none; }
  .cabinet .screen { margin: 8px; outline-width: 1px; border-width: 2px; }
  .cabinet .body { padding: 8px 40px 8px 2px; gap: 6px; }
  .cabinet h3, .cabinets.mini .cabinet h3 { font-size: 10px; }
  .chips { padding-top: 0; gap: 4px; }
  .chip { font-size: 7px; padding: 3px 4px; }
  .cabinet:hover, .cabinet:focus-visible, .cabinet.selected { transform: none; box-shadow: 4px 4px 0 var(--shadow), 0 0 16px rgba(255, 210, 63, 0.35); }
  .fav { top: 50%; transform: translateY(-50%); width: 40px; height: 44px; right: 2px; }
  .marquee-buttons { top: 6px; right: 6px; gap: 6px; }
  .credits-badge, .hero-badge { font-size: 8px; padding: 4px 6px; }
  .grade-select { min-width: 0; flex: 1 1 200px; }
  .hero-group-label { flex-basis: 100%; }
  .profile-label { flex-basis: 100%; }
  .text-input, .text-input.wide { width: 100%; }
  .select-field { flex: 1 1 100%; }
  .pick-select { min-width: 0; width: 100%; }
}

/* ---------- Credits page ---------- */
.back-bar { display: flex; }
.back-link {
  font-family: var(--pixel); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--yellow); text-decoration: none; padding: 10px 12px;
  background: var(--panel); border: 2px solid var(--blue); box-shadow: 3px 3px 0 var(--shadow);
}
.back-link:hover, .back-link:focus-visible { outline: none; border-color: var(--yellow); }
.marquee-plain { background: radial-gradient(ellipse at 80% 0, var(--panel), var(--marquee-bg) 70%); }
.marquee-plain .marquee-text { position: static; background: none; padding: 22px 18px 20px; }
.credits-page .scores { margin-top: 0; }
.credit-notes dl { margin: 12px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; }
.credit-notes dt { font-family: var(--pixel); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-light); padding-top: 6px; }
.credit-notes dd { margin: 0; }
.credit-notes strong { color: var(--yellow); font-weight: normal; }
@media (max-width: 560px) { .credit-notes dl { grid-template-columns: minmax(0, 1fr); gap: 4px; } .credit-notes dd { margin-bottom: 10px; } }
@media (max-width: 599.98px) { #keys-hint { display: none; } }
.credits-page main { display: flex; flex-direction: column; gap: 32px; }

/* DEV ribbon (dev/test site only, see ribbon.js) */
.dev-ribbon {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; text-align: center;
  font: 12px/1.6 "Press Start 2P", monospace; padding: 4px 8px; text-decoration: none;
  background: #ffd23f; color: #0a0f2e; border-top: 3px solid #e3262f; box-shadow: 0 -2px 0 var(--shadow);
}

/* ---------- Setup wizard (first visit) ---------- */
body.modal-open { overflow: hidden; }
#wizard-root, .modal-root { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.wizard-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.wizard {
  position: relative; width: min(680px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 18px 20px; background: var(--panel-2); color: var(--text);
  border: 4px solid var(--yellow); box-shadow: 8px 8px 0 var(--shadow), 0 0 40px var(--glow-yellow);
}
.wizard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wizard-head .eyebrow { margin: 0; }
.wizard-dots { display: flex; gap: 6px; }
.wizard-dots span { width: 14px; height: 14px; border: 2px solid var(--blue); background: var(--panel); }
.wizard-dots span.done { background: var(--blue); }
.wizard-dots span.on { background: var(--yellow); border-color: var(--yellow); }
.wizard-title { margin: 6px 0 6px; font-family: var(--pixel); font-weight: normal; font-size: clamp(13px, 2.4vw, 18px); line-height: 1.4; color: var(--yellow); }
.wizard-body { min-height: 220px; }
.wizard-body > .hint { margin: 0 0 14px; }
.wizard-body .text-input { font-size: 30px; min-height: 54px; }
.age-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.age-btn { font-size: 13px; min-height: 48px; }
.age-btn.wide { grid-column: span 1; }
.wizard-grade { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wizard-note { margin: 0; color: var(--muted); }
.wizard-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 12px; }
.wizard-themes .theme-card { min-height: 0; padding: 8px 10px; }
.wizard-themes .theme-note { font-size: 16px; }
.wizard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 560px) {
  .age-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .wizard-themes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Tour tips ---------- */
.tour-tip {
  position: fixed; z-index: 40; width: min(320px, calc(100vw - 16px)); padding: 12px 14px;
  background: var(--panel-2); color: var(--text); border: 3px solid var(--yellow); box-shadow: 6px 6px 0 var(--shadow);
}
.tour-tip::before { /* arrow */
  content: ""; position: absolute; left: calc(var(--arrow-x, 50%) - 9px); top: -12px;
  border: 9px solid transparent; border-top: 0; border-bottom: 12px solid var(--yellow);
}
.tour-tip.above::before { top: auto; bottom: -12px; border-bottom: 0; border-top: 12px solid var(--yellow); }
.tour-tip p { margin: 0; }
.tour-count { font-family: var(--pixel); font-size: 8px; color: var(--muted); text-transform: uppercase; }
.tour-title { font-family: var(--pixel); font-size: 11px; color: var(--yellow); margin: 6px 0 4px !important; }
.tour-text { font-size: 21px; line-height: 1.15; }
.tour-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.tour-target { outline: 3px solid var(--yellow) !important; outline-offset: 4px; z-index: 30; } /* keeps its own position (the ☆ is absolutely placed) */

/* ---------- Grown-up check (support page) ---------- */
.tip-gate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 10px 0 4px; }
.tip-gate label { flex: 1 1 100%; font-size: 24px; }
.tip-gate .text-input { width: 120px; }

/* ---------- Owner stats page ---------- */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 10px 0 24px; }
.stat-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--panel); border: 2px solid var(--blue); box-shadow: 3px 3px 0 var(--shadow); }
.stat-num { font-family: var(--pixel); font-size: clamp(14px, 2.4vw, 20px); color: var(--yellow); }
.stat-label { color: var(--muted); }
.stat-section { margin-bottom: 24px; }
.stat-section td { position: relative; }
.stat-bar { display: block; height: 4px; margin-top: 3px; background: var(--blue-light); }

/* ---------- Support page ---------- */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.support-card { padding: 16px; background: var(--panel); border: 3px solid var(--blue); box-shadow: 4px 4px 0 var(--shadow); margin-bottom: 16px; }
.support-grid .support-card { margin-bottom: 0; }
.support-card h2 { margin-top: 0; }
.support-card p { margin: 0 0 12px; }
.support-link { display: inline-block; text-decoration: none; margin: 4px 8px 4px 0; }

/* ---------- Privacy Policy and Terms of Use ---------- */
.legal { max-width: 820px; }
.legal section { margin-bottom: 22px; }
.legal h2 { margin-bottom: 8px; }
.legal p, .legal li { line-height: 1.25; }
.legal ul { margin: 0 0 10px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a, .legal-links a, .support-card a:not(.support-link) { color: var(--yellow); }
.legal-links { font-size: 19px; color: var(--muted); }
.support-amount-title { font-weight: bold; }
.support-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.support-amounts .support-link { margin: 0; }
.support-amounts .featured { transform: scale(1.12); box-shadow: 0 0 0 3px var(--yellow), 4px 4px 0 var(--shadow); }
.support-qr { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; }
.support-qr img { width: 180px; height: 180px; flex: none; image-rendering: pixelated; border: 6px solid #ffffff; box-shadow: 4px 4px 0 var(--shadow); background: #ffffff; }
.support-qr figcaption { margin: 0; font-size: 19px; }
@media (max-width: 560px) { .support-qr { flex-direction: column; align-items: flex-start; } }

/* ---------- Finding games: search, Surprise me, style chips, length and sort ---------- */
.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;
}
.search-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 14px; }
.search-field { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.search-box { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 12px; font-size: 18px; pointer-events: none; }
.search-input {
  appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; min-height: 48px; padding: 4px 46px 4px 42px;
  font-family: var(--term); font-size: 24px; color: var(--text); background: var(--panel);
  border: 2px solid var(--blue); border-radius: 0; box-shadow: 3px 3px 0 var(--shadow);
}
.search-input::placeholder { color: var(--muted); opacity: 1; }
.search-input::-webkit-search-cancel-button, .search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search-input:hover { border-color: var(--yellow); }
.search-input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-color: var(--yellow); }
.search-clear {
  position: absolute; right: 4px; width: 40px; height: 40px; padding: 0; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--muted); background: transparent; border: 0;
}
.search-clear:hover, .search-clear:focus-visible { outline: 2px solid var(--yellow); outline-offset: -4px; color: var(--yellow); }
.surprise-btn {
  min-height: 48px; padding: 8px 14px; cursor: pointer; white-space: nowrap;
  font-family: var(--pixel); font-size: 11px; color: var(--on-accent); background: var(--red);
  border: 2px solid var(--yellow); box-shadow: 3px 3px 0 var(--shadow), 0 0 14px var(--glow-red);
}
.surprise-btn:hover, .surprise-btn:focus-visible { outline: 2px solid var(--web); outline-offset: 2px; }

/* Play-style icon bar: icons only, the name in a tooltip on hover/focus, the selected style's name
   spelled out next to the bar. */
.style-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 14px; }
.style-bar-label { margin: 0; }
.style-chips { display: flex; gap: 6px; }
.style-chip {
  position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; cursor: pointer;
  color: var(--text); background: var(--panel); border: 2px solid var(--blue); box-shadow: 3px 3px 0 var(--shadow);
}
.style-chip .style-icon { font-size: 22px; line-height: 1; }
.style-chip .style-count {
  position: absolute; right: -6px; top: -7px; min-width: 18px; padding: 2px 3px; text-align: center;
  font-family: var(--pixel); font-size: 7px; line-height: 1.2; color: var(--text); background: var(--panel-2); border: 1px solid var(--blue);
}
.style-chip[aria-pressed="true"] { background: var(--red); border-color: var(--yellow); }
.style-chip[aria-pressed="true"] .style-count { color: var(--on-accent); background: var(--red); border-color: var(--yellow); }
.style-chip.empty { opacity: 0.45; }
.style-chip:hover, .style-chip:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.style-chip::after {
  content: attr(data-tip); position: absolute; z-index: 5; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: 5px 7px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s;
  font-family: var(--pixel); font-size: 8px; color: var(--on-accent); background: var(--blue); border: 2px solid var(--yellow);
}
.style-chips .style-chip:first-child::after { left: 0; transform: none; }
.style-chips .style-chip:last-child::after { left: auto; right: 0; transform: none; }
@media (hover: hover) { .style-chip:hover::after { opacity: 1; } }
.style-chip:focus-visible::after { opacity: 1; }
.style-current { font-family: var(--pixel); font-size: 10px; color: var(--yellow); }
.select-field.small .pick-select { min-width: 200px; }

.results-status { margin: -6px 0 14px; color: var(--muted); font-size: 20px; }
.results-status:empty { margin: 0; }
.search-hidden { margin: -6px 0 14px; color: var(--text); }
.search-hidden .adapt-reset { margin-left: 4px; }
.search-empty { padding: 16px; border: 2px dashed var(--yellow); color: var(--text); }
.search-empty p { margin: 0 0 10px; }
/* While searching, the shelves give way to one flat results list. */
body.is-searching #new-banner { display: none; }

/* Shelf headings with ◀ ▶ and See all */
.shelf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.shelf-head .shelf-title { margin: 0; }
.shelf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row-btn, .see-all {
  min-height: 36px; padding: 6px 10px; cursor: pointer;
  font-family: var(--pixel); font-size: 9px; color: var(--text); background: var(--panel);
  border: 2px solid var(--blue); box-shadow: 3px 3px 0 var(--shadow);
}
.row-btn { min-width: 40px; font-size: 11px; }
.see-all { color: var(--yellow); }
.row-btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.row-btn:not(:disabled):hover, .row-btn:focus-visible, .see-all:hover, .see-all:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.shelf-trynext .shelf-title { color: var(--yellow); }
.shelf-popular .shelf-title { color: var(--accent-soft); }

/* A style row: one horizontal strip of cabinets (wide screens; phones get the compact list). */
.cabinets.strip {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 250px);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--blue) transparent;
  padding: 6px 12px 16px 4px; gap: 18px; scroll-padding-inline: 4px;
}
.cabinets.strip > li { scroll-snap-align: start; }
.cabinets.strip .tagline { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .cabinets.strip { scroll-behavior: smooth; } }

.chip.len { border-color: var(--muted); color: var(--text); }
.chip.hot { border-color: var(--red); color: var(--accent-soft); }

/* Surprise me */
.surprise { margin: 0 0 16px; }
.surprise-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px; padding: 12px 52px 12px 12px;
  background: var(--panel); border: 3px solid var(--yellow); box-shadow: 6px 6px 0 var(--shadow), 0 0 24px var(--glow-yellow);
}
.surprise-card.none { display: block; }
.surprise-card.none p { margin: 0; }
.surprise-screen { aspect-ratio: 16 / 10; border: 3px solid #000; outline: 2px solid var(--web); background: #000; overflow: hidden; align-self: start; }
.surprise-screen img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.surprise-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.surprise-body .chips { margin-top: 0; }
.surprise-eyebrow { margin: 0; font-family: var(--pixel); font-size: 9px; text-transform: uppercase; color: var(--accent-soft); }
.surprise-body h3 { margin: 0; font-family: var(--pixel); font-weight: normal; font-size: 14px; line-height: 1.4; color: var(--yellow); }
.surprise-body .tagline { margin: 0; }
.surprise-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.surprise-play {
  display: inline-block; padding: 10px 14px; text-decoration: none;
  font-family: var(--pixel); font-size: 11px; color: var(--on-accent); background: var(--blue);
  border: 2px solid var(--yellow); box-shadow: 3px 3px 0 var(--shadow);
}
.surprise-play:hover, .surprise-play:focus-visible { outline: 2px solid var(--web); outline-offset: 2px; background: var(--red); }
.surprise-close { position: absolute; top: 8px; right: 8px; min-width: 36px; min-height: 36px; }
.surprise-card.none .surprise-close { position: static; margin-top: 10px; }
.surprise-card.rolling { animation: dice-pop 0.45s ease-out; }
@keyframes dice-pop {
  0% { transform: scale(0.94) rotate(-1.5deg); opacity: 0.2; }
  60% { transform: scale(1.02) rotate(0.8deg); opacity: 1; }
  100% { transform: none; }
}
.cabinet.surprise-flash { border-color: var(--yellow); animation: surprise-flash 0.36s steps(2) 5; }
@keyframes surprise-flash { 50% { box-shadow: 8px 8px 0 var(--shadow), 0 0 0 4px var(--yellow), 0 0 26px var(--glow-yellow); } }
@media (prefers-reduced-motion: reduce) {
  .surprise-card.rolling, .cabinet.surprise-flash { animation: none; }
  .cabinet.surprise-flash { box-shadow: 6px 6px 0 var(--shadow), 0 0 0 4px var(--yellow); }
}

@media (max-width: 599.98px) {
  .search-field { flex-basis: 100%; }
  .surprise-btn { flex: 1 1 100%; }
  .style-bar { gap: 6px 10px; }
  .style-chips { flex: 1 1 100%; gap: 4px; }
  .style-chip { flex: 1 1 0; width: auto; min-width: 34px; max-width: 46px; height: 42px; }
  .style-chip .style-icon { font-size: 19px; }
  .style-chip .style-count { right: -4px; }
  .select-field.small { flex: 1 1 140px; }
  .select-field.small .pick-select { min-width: 0; }
  .surprise-card { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 10px 48px 10px 10px; }
  .surprise-body .tagline { display: none; }
  .surprise-body h3 { font-size: 11px; }
  .shelf-head { margin-bottom: 10px; }
}