/*
 * Guess the Car Year - tokens, layout, game, motion.
 *
 * Palette, fonts and the 2px radius are the same as the Car Inflation
 * Calculator (css/cic.css lines 15-48) so the tools read as one family.
 * Everything is scoped under .gcy-. The body class is gcy-body; no SVG class
 * on this page may share that token (stroke inherits, see CONTRACT.md).
 *
 * TWO TRAPS this file is written around:
 *  1. display:flex/grid beats the [hidden] attribute. One global rule at the
 *     top restores it, and every element JS shows or hides uses [hidden].
 *  2. State that JS toggles with a class must have a reveal rule at equal or
 *     higher specificity than the hide rule, or the reveal silently loses.
 */

:root {
  --gcy-red: #e11d2a;
  --gcy-red-dark: #b91320;
  --gcy-bg: #0a0a0b;
  --gcy-bg-2: #0f0f12;
  --gcy-surface: #141417;
  --gcy-surface-2: #1b1b21;
  --gcy-surface-3: #23232a;
  --gcy-line: rgba(255, 255, 255, .08);
  --gcy-line-strong: rgba(255, 255, 255, .16);
  --gcy-text: #f4f1ec;
  --gcy-dim: #c1c1c7;
  --gcy-muted: #8a8a90;
  --gcy-faint: #6a6a72;
  --gcy-amber: #f5a524;
  --gcy-sky: #38bdf8;
  --gcy-good: #4ade80;

  /* warmth colours; the label always says the word too */
  --gcy-burning: #ff3b2f;
  --gcy-hot: #ff7a1a;
  --gcy-warm: #f5b324;
  --gcy-cold: #38bdf8;
  --gcy-freezing: #8fa8ff;

  --gcy-font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --gcy-font-body: "Spectral", Georgia, "Times New Roman", serif;
  --gcy-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --gcy-radius: 2px;
  --gcy-ease: cubic-bezier(.2, .7, .2, 1);
  --gcy-ease-out: cubic-bezier(.16, 1, .3, 1);
  --gcy-maxw: 1200px;
  --gcy-pad: 16px;
  --gcy-gap: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body.gcy-body {
  margin: 0;
  background: var(--gcy-bg);
  color: var(--gcy-text);
  font-family: var(--gcy-font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

.gcy-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.gcy-wrap { width: 100%; max-width: var(--gcy-maxw); margin: 0 auto; padding: 0 var(--gcy-pad); }

/* ---------- masthead ---------- */

.gcy-masthead { border-bottom: 1px solid var(--gcy-line); background: var(--gcy-bg); }
.gcy-masthead-in {
  max-width: var(--gcy-maxw); margin: 0 auto; padding: 12px var(--gcy-pad);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
}
.gcy-brand { display: inline-flex; line-height: 0; color: var(--gcy-text); text-decoration: none; }
.gcy-brand svg { display: block; height: 32px; width: auto; }
.gcy-brand-word {
  font-family: var(--gcy-font-display); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: 17px; line-height: 1;
}
.gcy-brand-word b { color: var(--gcy-red); }
.gcy-nav { margin-left: auto; display: flex; align-items: center; gap: 4px 18px; }
.gcy-dd { position: relative; }
.gcy-dd-btn {
  appearance: none; background: transparent; border: 0; cursor: pointer; margin: 0; padding: 4px 0;
  font-family: var(--gcy-font-ui); font-size: 12.5px; color: var(--gcy-muted); line-height: 1.4;
  display: inline-flex; align-items: center;
}
.gcy-dd-btn::after {
  content: ""; margin-left: 7px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor;
}
.gcy-dd-btn:hover, .gcy-dd-btn[aria-expanded="true"] { color: var(--gcy-text); }
.gcy-dd-panel {
  display: none; position: absolute; top: calc(100% + 12px); left: 0; z-index: 130; min-width: 230px;
  list-style: none; margin: 0; padding: 6px 0; background: var(--gcy-bg);
  border: 1px solid rgba(255, 255, 255, .10); border-top: 2px solid var(--gcy-red); box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.gcy-dd:last-child .gcy-dd-panel { left: auto; right: 0; }
@media (max-width: 639px) { .gcy-dd-panel { left: auto; right: 0; } }
/* transparent bridge so the pointer can cross the gap without closing the panel */
.gcy-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.gcy-dd-panel a {
  display: block; padding: 11px 18px; font-family: var(--gcy-font-ui); font-size: 13px; letter-spacing: .06em;
  color: var(--gcy-muted); text-decoration: none; white-space: nowrap;
}
.gcy-dd-panel a:hover, .gcy-dd-panel a:focus-visible { color: #fff; background: rgba(255, 255, 255, .06); }
.gcy-dd-panel a[aria-current="page"] { color: #fff; }
.gcy-dd.is-open > .gcy-dd-panel { display: block; }
@media (hover: hover) {
  .gcy-dd:hover > .gcy-dd-panel, .gcy-dd:focus-within > .gcy-dd-panel { display: block; }
}

/* ---------- hero ---------- */

.gcy-hero { padding: 22px 0 14px; }
.gcy-eyebrow {
  font-family: var(--gcy-font-ui); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gcy-red); margin: 0 0 8px;
}
.gcy-hero h1 {
  margin: 0; font-family: var(--gcy-font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.05;
  font-size: clamp(32px, 7vw, 54px);
}
.gcy-lede { margin: 8px 0 0; color: var(--gcy-dim); font-size: 18px; max-width: 34em; }

.gcy-empty { padding: 60px 0; color: var(--gcy-dim); font-size: 20px; }

/* ---------- the game ---------- */

.gcy-game {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  padding: 8px 0 var(--gcy-gap);
}

.gcy-stage { position: relative; min-width: 0; }
.gcy-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 10px;
  font-family: var(--gcy-font-ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gcy-muted);
}
.gcy-meta-num { color: var(--gcy-text); font-weight: 600; }
.gcy-diff { padding: 2px 8px; border: 1px solid var(--gcy-line-strong); border-radius: 99px; }
.gcy-diff--easy { color: var(--gcy-good); border-color: rgba(74, 222, 128, .4); }
.gcy-diff--medium { color: var(--gcy-amber); border-color: rgba(245, 165, 36, .4); }
.gcy-diff--hard { color: var(--gcy-burning); border-color: rgba(255, 59, 47, .4); }

.gcy-photo {
  position: relative; margin: 0; width: 100%; overflow: hidden;
  background: var(--gcy-surface) center / cover no-repeat;
  border: 1px solid var(--gcy-line); border-radius: var(--gcy-radius);
  isolation: isolate;
}
.gcy-photo-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 60% 55%;
  animation: gcy-fade .7s var(--gcy-ease) both, gcy-kb 26s ease-out .2s both;
}
@keyframes gcy-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gcy-kb { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -.6%); } }

/* a light sweep across the photo, once, just after it arrives */
.gcy-sweep {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .20) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: gcy-sweep 1.5s var(--gcy-ease) .5s 1 both;
}
@keyframes gcy-sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* warmth glow over the photo; classes come from data-band on .gcy-game */
.gcy-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .4s; }
.gcy-game[data-band="burning"] .gcy-fx {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 120%, rgba(255, 90, 20, .75), rgba(255, 59, 47, .25) 45%, transparent 70%);
  animation: gcy-flicker 1.1s steps(1, end) 3;
}
.gcy-game[data-band="hot"] .gcy-fx {
  opacity: 1; background: radial-gradient(ellipse at 50% 120%, rgba(255, 122, 26, .5), transparent 65%);
}
.gcy-game[data-band="warm"] .gcy-fx {
  opacity: 1; background: radial-gradient(ellipse at 50% 120%, rgba(245, 179, 36, .30), transparent 65%);
}
.gcy-game[data-band="cold"] .gcy-fx {
  opacity: 1; background: radial-gradient(ellipse at 50% 120%, rgba(56, 189, 248, .30), transparent 65%);
}
.gcy-game[data-band="freezing"] .gcy-fx {
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(143, 168, 255, .35), transparent 35%, transparent 65%, rgba(143, 168, 255, .35)),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(143, 168, 255, .35));
}
@keyframes gcy-flicker {
  0% { opacity: 1; } 12% { opacity: .55; } 25% { opacity: 1; } 38% { opacity: .7; }
  52% { opacity: 1; } 66% { opacity: .5; } 80% { opacity: .95; } 100% { opacity: 1; }
}

.gcy-shake { animation: gcy-shake .55s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes gcy-shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); } 40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* ---------- the play panel ---------- */

.gcy-panel {
  min-width: 0; background: var(--gcy-surface); border: 1px solid var(--gcy-line);
  border-radius: var(--gcy-radius); padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.gcy-tries-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gcy-tries { margin: 0; display: flex; align-items: center; gap: 8px; }
.gcy-pip {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--gcy-line-strong); background: transparent;
  transition: background .3s, border-color .3s, transform .3s var(--gcy-ease);
}
.gcy-pip.is-used { background: var(--gcy-red); border-color: var(--gcy-red); transform: scale(.85); }
.gcy-pip.is-win { background: var(--gcy-good); border-color: var(--gcy-good); transform: scale(1); }
.gcy-tries-text {
  margin-left: 6px; font-family: var(--gcy-font-ui); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gcy-muted);
}
.gcy-sound {
  appearance: none; cursor: pointer; background: transparent; color: var(--gcy-muted);
  border: 1px solid var(--gcy-line); border-radius: 99px; padding: 4px 12px;
  font-family: var(--gcy-font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.gcy-sound[aria-pressed="true"] { color: var(--gcy-text); border-color: var(--gcy-red); }

/* hint + thermometer. min-height reserves the space so nothing jumps. */
.gcy-hint { min-height: 100px; }
.gcy-hint-msg {
  margin: 0 0 12px; font-family: var(--gcy-font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .03em; font-size: 22px; line-height: 1.15; min-height: 26px;
}
.gcy-therm { --gcy-band: var(--gcy-muted); }
.gcy-therm-track {
  height: 14px; border-radius: 99px; background: var(--gcy-bg-2);
  border: 1px solid var(--gcy-line-strong); overflow: hidden; position: relative;
}
.gcy-therm-fill {
  position: absolute; inset: 0; border-radius: 99px; background: var(--gcy-band);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--gcy-ease-out), background-color .5s;
  box-shadow: 0 0 14px var(--gcy-band);
}
.gcy-therm-scale {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-family: var(--gcy-font-ui); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gcy-faint);
}
.gcy-warm {
  margin: 8px 0 0; display: flex; align-items: center; gap: 8px; color: var(--gcy-band, var(--gcy-text));
  font-family: var(--gcy-font-display); font-size: 20px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.gcy-warm svg { width: 20px; height: 20px; flex: none; }
.gcy-flame { transform-origin: 50% 90%; animation: gcy-flame .5s ease-in-out 8 alternate; }
@keyframes gcy-flame { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.18, 1.1) rotate(3deg); } }

[data-band="burning"] .gcy-therm, [data-band="burning"] .gcy-warm { --gcy-band: var(--gcy-burning); }
[data-band="hot"] .gcy-therm, [data-band="hot"] .gcy-warm { --gcy-band: var(--gcy-hot); }
[data-band="warm"] .gcy-therm, [data-band="warm"] .gcy-warm { --gcy-band: var(--gcy-warm); }
[data-band="cold"] .gcy-therm, [data-band="cold"] .gcy-warm { --gcy-band: var(--gcy-cold); }
[data-band="freezing"] .gcy-therm, [data-band="freezing"] .gcy-warm { --gcy-band: var(--gcy-freezing); }

.gcy-history { list-style: none; margin: 0; padding: 0; min-height: 150px; display: flex; flex-direction: column; gap: 6px; }
.gcy-history li {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--gcy-bg-2); border: 1px solid var(--gcy-line);
  border-left: 3px solid var(--gcy-band, var(--gcy-line-strong)); border-radius: var(--gcy-radius);
  font-family: var(--gcy-font-ui); font-size: 14px; animation: gcy-pop .4s var(--gcy-ease) both;
}
@keyframes gcy-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gcy-history .gcy-h-year { font-family: var(--gcy-font-display); font-size: 20px; font-weight: 600; }
.gcy-history .gcy-h-dir { color: var(--gcy-dim); }
.gcy-history .gcy-h-band {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--gcy-band, var(--gcy-muted));
}
.gcy-history li.is-exact { --gcy-band: var(--gcy-good); }
.gcy-history li.gcy-ph {
  display: block; background: transparent; border: 1px dashed var(--gcy-line-strong); animation: none;
  color: var(--gcy-faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- the dial ---------- */

.gcy-dial { display: flex; flex-direction: column; gap: 10px; }
.gcy-roller-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.gcy-roller {
  position: relative; display: flex; justify-content: center; flex: 1 1 auto; min-width: 0; max-width: 232px;
  height: 76px; padding: 0 8px; gap: 2px; overflow: hidden; cursor: ew-resize;
  background: #060607; border: 1px solid var(--gcy-line-strong); border-radius: var(--gcy-radius);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .9);
  touch-action: none; user-select: none; -webkit-user-select: none;
  font-family: var(--gcy-font-display); font-weight: 600; font-size: 56px; line-height: 76px;
}
.gcy-roller:focus-visible { outline: 2px solid var(--gcy-red); outline-offset: 2px; }
.gcy-roller::before, .gcy-roller::after {
  content: ""; position: absolute; left: 0; right: 0; height: 24%; z-index: 2; pointer-events: none;
}
.gcy-roller::before { top: 0; background: linear-gradient(#060607, transparent); }
.gcy-roller::after { bottom: 0; background: linear-gradient(transparent, #060607); }
.gcy-reel { position: relative; display: block; width: .62em; height: 76px; overflow: hidden; }
.gcy-strip { display: block; transition: transform .35s var(--gcy-ease-out); will-change: transform; }
.gcy-strip i { display: block; font-style: normal; height: 76px; text-align: center; }
.gcy-roller.is-dragging .gcy-strip { transition-duration: .08s; }

.gcy-step {
  appearance: none; cursor: pointer; flex: none; min-width: 44px; height: 44px; padding: 0 6px;
  background: var(--gcy-surface-2); color: var(--gcy-text); border: 1px solid var(--gcy-line-strong);
  border-radius: var(--gcy-radius); font-family: var(--gcy-font-ui); font-size: 14px; font-weight: 600;
  transition: background .2s, border-color .2s, transform .12s;
}
.gcy-step--one { font-size: 26px; line-height: 1; min-width: 48px; height: 52px; }
.gcy-step:hover { border-color: var(--gcy-red); background: rgba(225, 29, 42, .14); }
.gcy-step:active { transform: translateY(1px); }

.gcy-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; cursor: pointer;
}
.gcy-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--gcy-surface-3); }
.gcy-slider::-moz-range-track { height: 6px; border-radius: 99px; background: var(--gcy-surface-3); }
.gcy-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: var(--gcy-red); border: 3px solid var(--gcy-text);
}
.gcy-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--gcy-red); border: 3px solid var(--gcy-text); }
.gcy-slider-scale {
  display: flex; justify-content: space-between; margin-top: -4px;
  font-family: var(--gcy-font-ui); font-size: 11px; color: var(--gcy-faint); letter-spacing: .06em;
}
.gcy-type { display: flex; align-items: center; justify-content: center; gap: 10px; }
.gcy-type label { font-family: var(--gcy-font-ui); font-size: 13px; color: var(--gcy-muted); }
.gcy-yearinput {
  width: 92px; padding: 8px 10px; text-align: center; background: var(--gcy-bg-2); color: var(--gcy-text);
  border: 1px solid var(--gcy-line-strong); border-radius: var(--gcy-radius);
  font-family: var(--gcy-font-display); font-size: 20px; letter-spacing: .06em;
}
.gcy-yearinput:focus-visible { outline: 2px solid var(--gcy-red); outline-offset: 1px; }
.gcy-yearinput.is-bad { border-color: var(--gcy-burning); }

.gcy-guess {
  appearance: none; cursor: pointer; width: 100%; padding: 16px 20px; border: 1px solid var(--gcy-red);
  border-radius: var(--gcy-radius); background: var(--gcy-red); color: #fff;
  font-family: var(--gcy-font-display); font-weight: 600; font-size: 24px; letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s, transform .12s var(--gcy-ease);
}
.gcy-guess:hover { background: var(--gcy-red-dark); border-color: var(--gcy-red-dark); }
.gcy-guess:active { transform: translateY(1px); }
.gcy-guess:disabled { opacity: .5; cursor: default; }

/* ---------- the result ---------- */

.gcy-result { padding: var(--gcy-gap) 0; border-top: 1px solid var(--gcy-line); }
.gcy-result-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.gcy-score-num {
  margin: 0; font-family: var(--gcy-font-display); font-weight: 600; line-height: 1;
  font-size: clamp(64px, 16vw, 104px); letter-spacing: -.01em;
}
.gcy-score-num small { font-size: .32em; color: var(--gcy-muted); font-weight: 500; margin-left: 6px; letter-spacing: .04em; }
.gcy-squares { margin: 10px 0 14px; font-size: 24px; letter-spacing: .12em; min-height: 32px; }
.gcy-btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gcy-btn {
  appearance: none; cursor: pointer; display: inline-block; text-decoration: none; border-radius: var(--gcy-radius);
  font-family: var(--gcy-font-ui); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: 13px 20px; border: 1px solid var(--gcy-line-strong); background: transparent; color: var(--gcy-text);
  transition: background .2s, border-color .2s, transform .15s var(--gcy-ease);
}
.gcy-btn:hover { border-color: var(--gcy-red); background: rgba(225, 29, 42, .12); }
.gcy-btn:active { transform: translateY(1px); }
.gcy-btn--primary { background: var(--gcy-red); border-color: var(--gcy-red); color: #fff; }
.gcy-btn--primary:hover { background: var(--gcy-red-dark); border-color: var(--gcy-red-dark); }
.gcy-copied { font-family: var(--gcy-font-ui); font-size: 13px; color: var(--gcy-good); min-height: 1em; }

.gcy-next { margin: 16px 0 0; font-family: var(--gcy-font-ui); font-size: 14px; color: var(--gcy-dim); }
.gcy-next-msg { display: block; color: var(--gcy-text); font-size: 15px; margin-bottom: 2px; }
.gcy-next b { font-family: var(--gcy-font-display); font-size: 20px; letter-spacing: .06em; color: var(--gcy-text); font-weight: 600; }

.gcy-stats {
  margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.gcy-stats div { background: var(--gcy-surface); border: 1px solid var(--gcy-line); padding: 10px 8px; text-align: center; border-radius: var(--gcy-radius); }
.gcy-stats dt { font-family: var(--gcy-font-ui); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gcy-muted); }
.gcy-stats dd { margin: 2px 0 0; font-family: var(--gcy-font-display); font-size: 26px; font-weight: 600; line-height: 1.1; }

/* result card: one face, year and name on top, then the facts */
.gcy-card {
  min-width: 0; background: var(--gcy-surface); border: 1px solid var(--gcy-line-strong); border-radius: var(--gcy-radius);
  border-top: 3px solid var(--gcy-red); padding: 22px;
}
.gcy-card > .gcy-eyebrow, .gcy-answer-year, .gcy-answer-name { text-align: center; }
.gcy-answer-year {
  margin: 0; font-family: var(--gcy-font-display); font-weight: 700; line-height: 1;
  font-size: clamp(72px, 18vw, 120px); letter-spacing: .02em;
}
.gcy-answer-name {
  margin: 10px 0 22px; font-family: var(--gcy-font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.08; font-size: clamp(34px, 8vw, 56px); color: var(--gcy-text);
  overflow-wrap: anywhere;
}
.gcy-facts { margin: 0 0 12px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-family: var(--gcy-font-ui); font-size: 14px; }
.gcy-facts dt { color: var(--gcy-muted); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; padding-top: 3px; }
.gcy-facts dd { margin: 0; color: var(--gcy-text); }
.gcy-fun { margin: 0 0 12px; color: var(--gcy-dim); font-size: 16px; border-left: 3px solid var(--gcy-red); padding-left: 12px; }
.gcy-yearlink { margin: 0 0 10px; font-family: var(--gcy-font-ui); font-size: 14px; }
.gcy-yearlink a { color: var(--gcy-amber); text-underline-offset: 3px; }
.gcy-yearlink a:hover { color: var(--gcy-text); }
.gcy-credit { margin: 0 0 14px; font-family: var(--gcy-font-ui); font-size: 11.5px; color: var(--gcy-faint); line-height: 1.5; }
.gcy-credit a { color: var(--gcy-muted); }

/* ---------- previous days ---------- */

.gcy-days, .gcy-embed { padding: var(--gcy-gap) 0; border-top: 1px solid var(--gcy-line); }
.gcy-note { margin: 0 0 14px; font-family: var(--gcy-font-ui); font-size: 13px; color: var(--gcy-muted); }
.gcy-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gcy-days .gcy-eyebrow, .gcy-days .gcy-note { text-align: center; }
.gcy-daynav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.gcy-daynav-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 42px; padding: 0 14px;
  border: 2px solid var(--gcy-line-strong); border-radius: 999px; color: var(--gcy-text); text-decoration: none;
  font-family: var(--gcy-font-ui); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; white-space: pre;
  transition: border-color .2s, transform .15s var(--gcy-ease);
}
a.gcy-daynav-btn:hover { border-color: var(--gcy-text); }
.gcy-daynav-btn.is-off { opacity: .35; }
@media (max-width: 639px) { .gcy-daynav-txt { display: none; } .gcy-daynav-btn { padding: 0; width: 44px; } }
.gcy-day {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--gcy-line-strong); color: var(--gcy-dim); text-decoration: none;
  font-family: var(--gcy-font-display); font-size: 15px; font-weight: 600;
  transition: transform .15s var(--gcy-ease), border-color .2s;
}
.gcy-day:hover { border-color: var(--gcy-text); transform: translateY(-2px); }
.gcy-day.is-current { outline: 2px solid var(--gcy-red); outline-offset: 3px; }
.gcy-day.is-high { background: var(--gcy-good); border-color: var(--gcy-good); color: #06210f; }
.gcy-day.is-mid { background: var(--gcy-amber); border-color: var(--gcy-amber); color: #2b1a00; }
.gcy-day.is-low { background: var(--gcy-burning); border-color: var(--gcy-burning); color: #2b0300; }
.gcy-day.is-zero { background: var(--gcy-surface-3); border-color: var(--gcy-faint); color: var(--gcy-text); }

.gcy-embed-code {
  width: 100%; min-height: 84px; resize: vertical; background: var(--gcy-bg-2); color: var(--gcy-dim);
  border: 1px solid var(--gcy-line-strong); border-radius: var(--gcy-radius); padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5;
}
.gcy-embed .gcy-btnrow { margin-top: 12px; }

/* ---------- article, ad, footer ---------- */

.gcy-article { max-width: 760px; margin: 0 auto; padding: var(--gcy-gap) var(--gcy-pad) 40px; background: var(--gcy-bg); }
.gcy-article h2, .gcy-article h3 {
  font-family: var(--gcy-font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
  line-height: 1.15; color: var(--gcy-text); margin: 40px 0 12px;
}
.gcy-article h2 { font-size: 28px; }
.gcy-article h3 { font-size: 20px; margin-top: 26px; }
.gcy-article p, .gcy-article li { color: var(--gcy-dim); }
.gcy-article a { color: var(--gcy-amber); text-decoration: underline; text-underline-offset: 3px; }
.gcy-article a:hover { color: var(--gcy-text); }

/* One reserved ad container with a fixed height, so a late fill moves nothing. */
.gcy-ad { display: block; max-width: 760px; min-height: 300px; margin: 0 auto 24px; padding: 0 var(--gcy-pad); }

.gcy-foot {
  border-top: 1px solid var(--gcy-line); margin-top: 24px; padding: 24px 0 40px;
  font-family: var(--gcy-font-ui); font-size: 13px; color: var(--gcy-muted);
}
.gcy-foot a { color: var(--gcy-dim); }

/* ---------- confetti ---------- */

.gcy-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

/* ---------- embedded on someone else's site ---------- */

.gcy-embedded .gcy-hero p { display: none; }
.gcy-embedded .gcy-hero { padding: 14px 0 6px; }
.gcy-embedded .gcy-hero h1 { font-size: 30px; }
.gcy-embed-credit { margin: 4px 0 14px; text-align: center; font-family: var(--gcy-font-ui); font-size: 13px; }
.gcy-embed-credit a { color: var(--gcy-amber); }
.gcy-embedded .gcy-result { padding-top: 18px; }
.gcy-embedded .gcy-stats { display: none; }
.gcy-embedded .gcy-hero .gcy-eyebrow { display: block; }

/* ---------- wide screens ---------- */

@media (min-width: 640px) {
  :root { --gcy-pad: 24px; }
  .gcy-roller { height: 92px; font-size: 68px; line-height: 92px; }
  .gcy-reel, .gcy-strip i { height: 92px; }
  .gcy-reel { width: .62em; }
}

@media (min-width: 960px) {
  :root { --gcy-pad: 32px; --gcy-gap: 44px; }
  .gcy-game { grid-template-columns: minmax(0, 1.7fr) minmax(360px, 1fr); gap: 24px; align-items: start; }
  .gcy-panel { padding: 22px; }
  .gcy-result-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
  .gcy-embedded .gcy-game { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- phones: get the photo and the dial on one screen ---------- */

@media (max-width: 639px) {
  .gcy-hero { padding: 14px 0 6px; }
  .gcy-hero .gcy-eyebrow { display: none; }
  .gcy-hero h1 { font-size: 30px; }
  .gcy-lede { font-size: 15.5px; margin-top: 4px; line-height: 1.4; }
  .gcy-brand svg { height: 28px; }
  .gcy-masthead-in { padding: 8px var(--gcy-pad); gap: 2px 14px; }
  .gcy-game { gap: 10px; padding-top: 2px; }
  .gcy-meta { margin-bottom: 6px; }
  .gcy-panel { padding: 12px; gap: 10px; }
  .gcy-hint { min-height: 92px; }
  .gcy-hint-msg { font-size: 19px; margin-bottom: 8px; }
  .gcy-slider-scale { display: none; }
  .gcy-guess { padding: 14px 16px; font-size: 22px; }
}

/* ---------- small phones ---------- */

@media (max-width: 420px) {
  .gcy-step { min-width: 40px; padding: 0 4px; font-size: 13px; }
  .gcy-step--one { min-width: 42px; }
  .gcy-roller-row { gap: 4px; }
  .gcy-roller { padding: 0 4px; }
  .gcy-stats dd { font-size: 22px; }
  .gcy-card { padding: 16px; }
  .gcy-facts { grid-template-columns: 1fr; gap: 0; }
  .gcy-facts dd { margin-bottom: 8px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .gcy-app *, .gcy-app *::before, .gcy-app *::after,
  .gcy-photo-img, .gcy-sweep, .gcy-fx {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .gcy-sweep { display: none; }
  .gcy-confetti { display: none; }
}