/* Retro theme: "Geocities, renovated" on the shared DOM.
   Every rule is scoped under html[data-theme="retro"] so this file is
   inert unless the theme is active. Tokens come from DESIGN.md. */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Space+Mono:wght@400;700&family=VT323&display=swap');

html[data-theme="retro"] {
  --bg: #1B2A8A;
  --card: #FFFFFF;
  --ink: #1A1A1A;
  --muted: #52525B;
  --faint: #6B6B60;
  --border: #C5C1B8;
  --border-strong: #9B978E;
  --accent: #4D6FFF;
  --green: #2E9E4F;  --green-ink: #1C7A3A;
  --yellow: #D9A400; --yellow-ink: #7A5E00;
  --orange: #E06B26; --orange-ink: #A34310;
  --red: #D8342C;    --red-ink: #B42A22;
  --radius: 6px;
  --radius-sm: 0px;
  --shadow-sm: none;
  --shadow-lg: none;
  --font: Verdana, Geneva, Tahoma, sans-serif;
  --mono: 'Space Mono', monospace;
}

/* page + cards */
html[data-theme="retro"] body { background: #1B2A8A; }
html[data-theme="retro"] .card { border: 1px solid #0D1655; }

/* One custom cursor for the whole retro theme, never swapped on hover
   (a changing cursor over dials/buttons would fight the drag-precision the
   game depends on). Glossy blue-to-cyan gradient with a glass highlight:
   a Frutiger Aero-ish nod, not a literal OS cursor. Inline SVG, no assets. */
html[data-theme="retro"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32'><defs><linearGradient id='a' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23EAFBFF'/><stop offset='0.45' stop-color='%237FD8FF'/><stop offset='1' stop-color='%230B6FCB'/></linearGradient></defs><polygon points='4,2 4,28 10,22 13,29 16,28 13,21 20,21' fill='url(%23a)' stroke='%230B3D66' stroke-width='1.4' stroke-linejoin='round'/><path d='M6,5 C8,7 8,11 6,14 C6,11 6,8 6,5 Z' fill='%23FFFFFF' opacity='0.6'/></svg>") 4 2, auto;
}

/* wordmark: Comic Neue rainbow letters, hide the gradient mark */
html[data-theme="retro"] .brand-mark { display: none; }
html[data-theme="retro"] .brand-name {
  font-family: 'Comic Neue', cursive; font-weight: 700; font-size: 26px;
}
html[data-theme="retro"] .brand-name span:nth-child(1) { color: #FF6B6B; }
html[data-theme="retro"] .brand-name span:nth-child(2) { color: #FFB300; }
html[data-theme="retro"] .brand-name span:nth-child(3) { color: #FFD400; }
html[data-theme="retro"] .brand-name span:nth-child(4) { color: #5DE05D; }
html[data-theme="retro"] .brand-name span:nth-child(5) { color: #5DC9FF; }
html[data-theme="retro"] .brand-name span:nth-child(6) { color: #B98CFF; }
html[data-theme="retro"] .brand-name span:nth-child(7) { color: #FF8AD1; }
html[data-theme="retro"] .brand-name span:nth-child(8) { color: #FF6B6B; }
html[data-theme="retro"] .brand-name span:nth-child(9) { color: #FFB300; }
html[data-theme="retro"] .brand-name span:nth-child(10) { color: #FFD400; }

/* theme switcher rendered as chrome */
html[data-theme="retro"] .theme-select {
  background: #D4D0C8; color: #1A1A1A;
  border: 2px outset #E8E4DC; border-radius: 0;
}

/* marquee: visible and animated in retro only */
html[data-theme="retro"] .marquee {
  display: block; overflow: hidden;
  background: #0D1655; border: 1px solid #4D5FD1;
  margin: 0 0 14px;
  position: relative;
  height: 22px;
}
/* The loop mixes two percentage bases so it adapts to any text length with
   no dead time: `left` percentages resolve against the container (100% =
   start just off the right edge, so text appears immediately), while
   translateX percentages resolve against the text itself (-100% = shifted
   left by exactly its own width). Animating both together makes the total
   travel exactly container-width + text-width: the text finishes exiting
   the left edge at the same moment the loop restarts. No fixed end offset
   to guess, so no blank stretch for shorter strings. The static `left: 0`
   below is the reduced-motion fallback position. */
html[data-theme="retro"] .marquee span {
  position: absolute; top: 0; left: 0;
  display: inline-block; white-space: nowrap;
  color: #FFD400; font-size: 12px; padding: 4px 0;
  animation: dk-mq 10s linear infinite;
}
@keyframes dk-mq {
  from { left: 100%; transform: translateX(0); }
  to   { left: 0;    transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="retro"] .marquee span { animation: none; }
}

/* bevel buttons */
html[data-theme="retro"] .btn {
  border-radius: 0; font-weight: 700;
  background: #D4D0C8; color: #1A1A1A;
  border: 3px outset #E8E4DC;
}
html[data-theme="retro"] .btn:active { border-style: inset; transform: none; }
html[data-theme="retro"] .btn-primary { background: #FFD400; border-color: #FFE470; color: #1A1A1A; }
html[data-theme="retro"] .btn-primary:hover { background: #FFD400; }
html[data-theme="retro"] .btn-primary:disabled {
  border-style: solid; border-color: #D4D0C8; background: #D4D0C8; color: rgba(26,26,26,0.4);
}
html[data-theme="retro"] .btn-secondary:hover { background: #D4D0C8; }
html[data-theme="retro"] #share-btn { background: #4D6FFF; border-color: #7D95FF; color: #fff; }
html[data-theme="retro"] .link-btn { color: #C7D0FF; }
html[data-theme="retro"] .link-btn:hover { color: #fff; }
html[data-theme="retro"] .card .link-btn { color: #2323CC; }
html[data-theme="retro"] .card .link-btn:hover { color: #0D1655; }

/* difficulty row as bevel buttons */
html[data-theme="retro"] .diff-grid { background: transparent; padding: 0; gap: 8px; border-radius: 0; }
html[data-theme="retro"] .seg {
  border-radius: 0; background: #D4D0C8; color: #1A1A1A;
  border: 3px outset #E8E4DC; font-weight: 400;
}
html[data-theme="retro"] .seg.active {
  border-style: inset; border-color: #D9C25E;
  background: #FFE99A; color: #5C4A00; font-weight: 700; box-shadow: none;
}

/* home stats chip as LED */
html[data-theme="retro"] .chip {
  font-family: 'VT323', monospace; font-size: 17px; letter-spacing: 2px;
  color: #33FF33; background: #000; border-radius: 2px; font-weight: 400;
}
html[data-theme="retro"] .home-stats { color: #52525B; }

/* header text on navy */
html[data-theme="retro"] .home-links .link-btn { text-decoration-color: #4D5FD1; }

/* sliders: square bevel thumbs on sunken tracks */
html[data-theme="retro"] input[type="range"]::-webkit-slider-runnable-track {
  border-radius: 2px; border: 1px solid #B8B4AB;
}
html[data-theme="retro"] input[type="range"]::-moz-range-track {
  border-radius: 2px; border: 1px solid #B8B4AB;
}
html[data-theme="retro"] input[type="range"]::-webkit-slider-thumb {
  border-radius: 2px; background: #D4D0C8;
  border: 2px outset #E8E4DC; box-shadow: none;
}
html[data-theme="retro"] input[type="range"]::-moz-range-thumb {
  border-radius: 2px; background: #D4D0C8;
  border: 2px outset #E8E4DC; box-shadow: none;
}
html[data-theme="retro"] input[type="range"]:disabled::-webkit-slider-thumb {
  background: #C8C4BB; border-style: inset;
}
html[data-theme="retro"] input[type="range"]:disabled::-moz-range-thumb {
  background: #C8C4BB; border-style: inset;
}

/* pips and swatches: square corners */
html[data-theme="retro"] .pip { border-radius: 0; }
html[data-theme="retro"] .swatch { border-radius: 3px; border: 1px solid #C9C5BC; }
html[data-theme="retro"] .fr-img { border-radius: 2px; }

/* round result accents */
html[data-theme="retro"] .rr-score { color: #1B2A8A; }
html[data-theme="retro"] .rr-sub.rr-fun {
  font-family: 'Comic Neue', cursive; font-weight: 700; color: #E5484D;
}
html[data-theme="retro"] .rr-mark.you { color: #4D6FFF; }
html[data-theme="retro"] .rr-note .k-y { color: #4D6FFF; }

/* summary: verdict flourish + film-strip share card */
html[data-theme="retro"] .verdict {
  font-family: 'Comic Neue', cursive; font-weight: 700; color: #E5484D;
}
html[data-theme="retro"] .avg { color: #1B2A8A; }
html[data-theme="retro"] .share-card {
  background: #17140F; border: 1px solid #000; border-radius: 4px;
  padding: 10px 12px;
}
html[data-theme="retro"] .share-card::before,
html[data-theme="retro"] .share-card::after {
  content: ""; display: block; height: 9px; margin: 5px 0;
  background: repeating-linear-gradient(to right,
    transparent 0 6px, #D8D2C0 6px 16px, transparent 16px 22px);
}
html[data-theme="retro"] .sc-id,
html[data-theme="retro"] .sc-diff { color: #E8892E; font-family: 'Space Mono', monospace; }
html[data-theme="retro"] .sc-foot { border-top: none; color: #E8892E; font-family: 'Space Mono', monospace; }
html[data-theme="retro"] .sc-foot b { color: #F2C089; }

/* countdown LED */
html[data-theme="retro"] .next-roll .led,
html[data-theme="retro"] .mono#home-countdown {
  font-family: 'VT323', monospace; font-size: 16px; letter-spacing: 2px;
  color: #33FF33; background: #000; padding: 2px 6px; border-radius: 2px;
}

/* coach overlay in chrome */
html[data-theme="retro"] #coach-spot { outline-color: #FFD400; border-radius: 3px; }
html[data-theme="retro"] #coach-callout { border-radius: 4px; border-color: #0D1655; }