/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --maroon-950:#3C0A11;
  --maroon-900:#4A0E16;
  --maroon-800:#631320;
  --maroon-700:#7C1A28;
  --maroon-600:#8F2030;
  --paper:#F3EDE0;
  --paper-dim:#EAE1CC;
  --paper-card:#FBF8F0;
  --ink:#241811;
  --ink-soft:#5B4C40;
  --gold:#B48A45;
  --gold-light:#D6B878;
  --gold-dim:#9C7A3E;
  --line:rgba(36,24,17,0.14);
  --line-on-dark:rgba(214,184,120,0.35);
  --shadow:0 14px 34px -18px rgba(36,18,12,0.45);
  --radius:3px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Source Serif 4', Georgia, serif;
  --font-mono:'JetBrains Mono', 'Courier New', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; }
:focus-visible{
  outline:2px solid var(--gold-dim);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{
  background:
    radial-gradient(140% 220% at 18% -40%, rgba(214,184,120,0.10), transparent 60%),
    linear-gradient(180deg, var(--maroon-900), var(--maroon-950));
  color:var(--paper);
  padding:2.8rem 1.5rem 2.2rem;
  text-align:center;
  position:relative;
}
.masthead a{ text-decoration:none; }
.masthead__logo{
  display:block;
  width:min(300px, 60vw);
  margin:0 auto;
}
.masthead__logo img{ width:100%; height:auto; }
.masthead__tag{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-top:1.1rem;
}
.masthead__editor{
  font-family:var(--font-body);
  font-style:italic;
  font-size:0.82rem;
  color:var(--paper-dim);
  margin-top:0.35rem;
  opacity:0.75;
}

/* dateline / nav strip */
.dateline{
  background:var(--maroon-800);
  border-top:1px solid var(--line-on-dark);
  border-bottom:2px solid var(--gold);
}
.dateline__inner{
  max-width:1040px;
  margin:0 auto;
  padding:0.65rem 1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  color:var(--paper-dim);
}
.dateline__edition{ color:var(--gold-light); white-space:nowrap; }
.dateline__nav{
  display:flex;
  gap:1.4rem;
  flex-wrap:wrap;
}
.dateline__nav a{
  background:none;
  border:none;
  color:var(--paper-dim);
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  padding:0.15rem 0;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.dateline__nav a:hover{
  color:var(--gold-light);
  border-color:var(--gold-light);
}
.dateline__nav a[aria-current="page"]{
  color:var(--gold-light);
  border-color:var(--gold-light);
}

/* "Games" dropdown — groups the game pages. The trigger is a link to
   games.html (the full games list); hovering (or focusing, so it
   still works via keyboard tab and on touch) reveals the menu of
   individual games. */
.dateline__dropdown{ position:relative; }
.dateline__dropdown-trigger{
  display:inline-block;
  background:none;
  border:none;
  margin:0;
  padding:0.15rem 0;
  color:var(--paper-dim);
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-bottom:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:color .15s ease, border-color .15s ease;
}
.dateline__dropdown:hover .dateline__dropdown-trigger,
.dateline__dropdown:focus-within .dateline__dropdown-trigger,
.dateline__dropdown-trigger.is-active{
  color:var(--gold-light);
  border-color:var(--gold-light);
}
.dateline__dropdown-caret{
  display:inline-block;
  font-size:0.6rem;
  transition:transform .15s ease;
}
.dateline__dropdown:hover .dateline__dropdown-caret,
.dateline__dropdown:focus-within .dateline__dropdown-caret{
  transform:rotate(180deg);
}
.dateline__dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  /* No margin-top here on purpose — the menu sits flush against the
     trigger so the hoverable area is contiguous (padding-top gives
     the visual gap instead). A margin gap would be a dead zone the
     mouse has to cross, causing the menu to flicker closed when
     moving straight down from the trigger. */
  padding:0.7rem 0 0.4rem;
  min-width:190px;
  background:var(--maroon-900);
  border:1px solid var(--line-on-dark);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:30;
}
.dateline__dropdown:hover .dateline__dropdown-menu,
.dateline__dropdown:focus-within .dateline__dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dateline__dropdown-menu a{
  padding:0.6rem 1.1rem;
  border-bottom:none;
  white-space:nowrap;
}
.dateline__dropdown-menu a:hover,
.dateline__dropdown-menu a[aria-current="page"]{
  background:rgba(214,184,120,0.1);
}

/* ============================================================
   SHELL / LAYOUT
   ============================================================ */
.shell{
  max-width:1040px;
  margin:0 auto;
  padding:0 1.25rem;
}

/* ============================================================
   HERO — crossword-grid backdrop
   ============================================================ */
.hero{
  position:relative;
  padding:3.4rem 0 2.2rem;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(60% 90% at 78% 20%, black, transparent 72%);
          mask-image:radial-gradient(60% 90% at 78% 20%, black, transparent 72%);
  opacity:0.55;
  pointer-events:none;
}
.hero__eyebrow{
  position:relative;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gold-dim);
  margin:0 0 0.6rem;
}
.hero h1{
  position:relative;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.1rem, 5vw, 3rem);
  line-height:1.06;
  margin:0 0 0.7rem;
  color:var(--maroon-900);
}
.hero p{
  position:relative;
  max-width:46ch;
  color:var(--ink-soft);
  font-size:1.02rem;
  line-height:1.55;
  margin:0;
}
/* optional "Theme: X" line for Weekly Crossword / Weekly Word Search
   — deliberately understated (small, mono) since it's not meant to
   compete with the Special Edition banner's theme treatment */
.hero__theme{
  position:relative;
  margin:0.6rem 0 0;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.02em;
  color:var(--maroon-800);
}
.hero__theme strong{ color:var(--maroon-900); font-weight:600; }
.hero__back{
  position:relative;
  display:inline-flex;
  margin-top:1.1rem;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--maroon-800);
  text-decoration:none;
  border-bottom:1px solid var(--maroon-800);
}
.hero__back:hover{ color:var(--gold-dim); border-color:var(--gold-dim); }

/* ============================================================
   GAME CARDS — ticket-stub styling
   ============================================================ */

/* labeled dividers on the homepage — one above the daily/weekly
   games grid, one between it and the persistent games grid — so
   it's unambiguous which games change day-to-day and which don't */
.games-divider{
  display:flex;
  align-items:center;
  gap:1rem;
  margin:1.2rem 0 0.2rem;
}
/* `display:flex`/`grid` below would otherwise beat the `hidden` attribute —
   the "Limited Time Games" section relies on `hidden` to stay out of view
   while a Special Edition is live. */
.games-divider[hidden], .games[hidden]{ display:none; }
.games-divider::before, .games-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.games-divider span{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-dim);
  white-space:nowrap;
}

.games{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.4rem;
  padding:1.6rem 0 3rem;
}
.game-card{
  position:relative;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.5rem 1.4rem 1.6rem;
  display:flex;
  flex-direction:column;
  gap:0.85rem;
  transition:transform .18s ease, box-shadow .18s ease;
}
.game-card::after{
  content:"";
  position:absolute;
  left:-9px; top:50%;
  width:18px; height:18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:50%;
  transform:translateY(-50%);
}
.game-card:not(.is-disabled):hover{
  transform:translateY(-3px);
  box-shadow:0 20px 40px -18px rgba(36,18,12,0.55);
}
.game-card__row{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold-dim);
}
.game-card h2{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  margin:0;
  color:var(--maroon-900);
}
.game-card p{
  margin:0;
  color:var(--ink-soft);
  font-size:0.94rem;
  line-height:1.5;
  flex-grow:1;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.65rem 1.2rem;
  background:var(--maroon-800);
  color:var(--paper);
  border:1px solid var(--maroon-800);
  border-radius:var(--radius);
  font-family:var(--font-mono);
  font-size:0.74rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  align-self:flex-start;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ background:var(--gold); border-color:var(--gold); color:var(--maroon-950); }
.btn.is-copied,
.btn.is-copied:hover{ background:#3E6B3B; border-color:#3E6B3B; color:var(--paper); }
.btn--ghost{
  background:transparent;
  color:var(--maroon-800);
  border-color:var(--maroon-800);
}
.btn--ghost:hover{ background:var(--maroon-800); color:var(--paper); }

.game-card.is-disabled{
  opacity:0.62;
  border-style:dashed;
  box-shadow:none;
}
.game-card.is-disabled .btn{
  background:transparent;
  color:var(--ink-soft);
  border-color:var(--line);
  cursor:default;
}
.game-card.is-disabled .btn:hover{ background:transparent; color:var(--ink-soft); }

/* ============================================================
   SPECIAL EDITION BANNER — shown on the homepage only while a
   Special Edition game is live, in place of a regular game-card.
   ============================================================ */
.special-banner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.5rem;
  margin:1.6rem 0 0;
  padding:2.4rem 2.2rem;
  background:
    radial-gradient(120% 160% at 85% -20%, rgba(214,184,120,0.22), transparent 60%),
    linear-gradient(135deg, var(--maroon-800), var(--maroon-950));
  border:1px solid var(--gold-dim);
  border-radius:var(--radius);
  box-shadow:0 20px 46px -18px rgba(36,18,12,0.55);
  text-decoration:none;
  color:var(--paper);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.special-banner:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 54px -18px rgba(36,18,12,0.65);
}
.special-banner__eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gold-light);
}
.special-banner__theme{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.8rem, 4.2vw, 2.6rem);
  line-height:1.1;
  margin:0;
  color:var(--paper);
}
.special-banner__meta{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--paper-dim);
  margin:0 0 0.5rem;
}
.special-banner .btn{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--maroon-950);
}
.special-banner .btn:hover{ background:var(--gold-light); border-color:var(--gold-light); }

/* ============================================================
   PANEL (crossword / teacher-game containers)
   ============================================================ */
.panel{
  scroll-margin-top:2rem;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:2.4rem;
  overflow:hidden;
}
.panel__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding:1.3rem 1.6rem 1rem;
  border-bottom:1px solid var(--line);
}
.panel__head h2{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  color:var(--maroon-900);
  margin:0;
}
.panel__date{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-dim);
}
.panel__body{ padding:1.6rem; }

/* crossword embed */
.crossword-frame-wrap{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
}
.crossword-frame-wrap iframe{
  width:100%;
  height:620px;
  border:0;
  display:block;
}
.crossword-fallback{
  padding:2.4rem 1.5rem;
  text-align:center;
  color:var(--ink-soft);
  font-size:0.92rem;
}

/* bug report form embed height — Google Forms scrolls internally if
   the form is longer than this, so it doesn't need to fit exactly */
.form-frame-wrap iframe{ height:450px; }

/* about.html — running prose inside a .panel (fills the card width) */
.about-prose{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.65;
}
.about-prose p{ margin:0; }
.about-prose strong{ color:var(--maroon-900); font-weight:600; }
.about-prose a{
  color:var(--maroon-800);
  text-decoration:underline;
  text-underline-offset:2px;
}
.about-prose a:hover{ color:var(--gold-dim); }

/* ============================================================
   GUESS THE TEACHER widget
   ============================================================ */
.teacher-game__clues{
  list-style:none;
  margin:0 0 1.3rem;
  padding:0;
  counter-reset:clue;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}
.teacher-game__clue{
  counter-increment:clue;
  display:flex;
  gap:0.85rem;
  align-items:flex-start;
  padding:0.75rem 0.9rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper-dim);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}
.teacher-game__clue.is-revealed{ opacity:1; transform:translateY(0); }
.teacher-game__clue-num{
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--gold-dim);
  border:1px solid var(--gold-dim);
  border-radius:50%;
  width:1.6rem;
  height:1.6rem;
  min-width:1.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.teacher-game__clue-text{ font-size:0.96rem; line-height:1.5; color:var(--ink); }
.teacher-game__clue-label{
  display:block;
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:0.2rem;
}

.teacher-game__form{
  display:flex;
  gap:0.7rem;
  flex-wrap:wrap;
  align-items:center;
}
.teacher-game__input{
  flex:1 1 220px;
  padding:0.7rem 0.9rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
}
.teacher-game__input:disabled{ background:var(--paper-dim); color:var(--ink-soft); }

.teacher-game__attempts{
  display:flex;
  gap:0.35rem;
  align-items:center;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:1rem;
}
.teacher-game__dot{
  width:0.55rem;
  height:0.55rem;
  border-radius:50%;
  background:var(--gold);
  border:1px solid var(--gold-dim);
}
.teacher-game__dot.is-used{ background:transparent; }

.teacher-game__guesses{
  list-style:none;
  margin:0.9rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.4rem;
}
.teacher-game__guess{
  display:flex;
  align-items:center;
  gap:0.7rem;
  padding:0.5rem 0.75rem;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--paper-card);
  font-size:0.88rem;
}
.teacher-game__guess-num{
  font-family:var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}
.teacher-game__guess-text{
  flex:1;
  color:var(--ink);
}
.teacher-game__guess-mark{
  font-weight:600;
}
.teacher-game__guess.is-wrong{ border-left:3px solid var(--maroon-600); }
.teacher-game__guess.is-wrong .teacher-game__guess-mark{ color:var(--maroon-600); }
.teacher-game__guess.is-correct{ border-left:3px solid #3E6B3B; }
.teacher-game__guess.is-correct .teacher-game__guess-mark{ color:#3E6B3B; }

.teacher-game__result{
  margin-top:1.1rem;
  padding:0.9rem 1rem;
  border-radius:var(--radius);
  font-size:0.94rem;
  display:none;
}
.teacher-game__result.is-visible{ display:block; }
.teacher-game__result.win{ background:rgba(66,110,64,0.12); border:1px solid rgba(66,110,64,0.4); color:#2E4A2C; }
.teacher-game__result.lose{ background:rgba(140,32,32,0.08); border:1px solid rgba(140,32,32,0.3); color:var(--maroon-800); }

/* ============================================================
   ARCHIVE
   ============================================================ */
.archive-section-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.3rem;
  color:var(--maroon-900);
  margin:2.2rem 0 0.6rem;
}
.archive-section-title:first-of-type{ margin-top:0; }
.archive-section-note{
  font-family:var(--font-body);
  font-weight:400;
  font-size:0.85rem;
  color:var(--ink-soft);
}

.archive-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
}
.archive-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.9rem 0.2rem;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.archive-row__left{
  display:flex;
  align-items:baseline;
  gap:0.9rem;
  font-family:var(--font-mono);
}
.archive-row__date{ font-family:var(--font-body); font-size:1rem; color:var(--ink); }
.archive-empty{
  padding:2rem 0.2rem;
  color:var(--ink-soft);
  font-size:0.94rem;
}

.archive-row-detail[hidden]{ display:none; }
.archive-row-detail:not(:empty){
  padding:1.6rem 0.2rem 2rem;
  border-bottom:1px solid var(--line);
}

/* ============================================================
   STATS (stats.html) — one ticket-stub card per game, same visual
   language as the homepage's .game-card
   ============================================================ */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1.4rem;
  padding:1.6rem 0 0.6rem;
}
.stat-card{
  position:relative;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.4rem 1.4rem 1.5rem;
}
.stat-card::after{
  content:"";
  position:absolute;
  left:-9px; top:50%;
  width:18px; height:18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:50%;
  transform:translateY(-50%);
}
.stat-card h2{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:600;
  color:var(--maroon-900);
  margin:0 0 1rem;
}
.stat-card__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}
.stat-card__list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding-top:0.6rem;
  border-top:1px solid var(--line);
}
.stat-card__list li:first-child{ padding-top:0; border-top:none; }
.stat-card__label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gold-dim);
}
.stat-card__value{
  font-family:var(--font-body);
  font-size:1.05rem;
  font-weight:600;
  color:var(--ink);
}
.stats-note{
  margin-top:0.8rem;
  color:var(--ink-soft);
  font-size:0.86rem;
  line-height:1.5;
  text-align:center;
}

/* ============================================================
   PER-GAME SIDE CARDS — the "Your Stats" + "Challenge a Friend"
   pair that sits under each game (see config.js "PER-GAME SIDE
   CARDS"), plus the incoming-challenge banner above the game.
   ============================================================ */
.game-extras{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.4rem;
  margin:0 0 2.4rem;
}
@media (max-width:720px){
  .game-extras{ grid-template-columns:1fr; }
}
.sidecard{
  position:relative;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.4rem 1.4rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:0.7rem;
}
.sidecard__eyebrow{
  font-family:var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold-dim);
}
.sidecard__title{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:600;
  color:var(--maroon-900);
  margin:0;
}
.sidecard--stats .stat-card__list{ margin:0.1rem 0 0.2rem; }
.sidecard__link{
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--maroon-800);
  text-decoration:none;
}
.sidecard__link:hover{ color:var(--gold-dim); }
.sidecard__blurb{
  margin:0;
  color:var(--ink-soft);
  font-size:0.92rem;
  line-height:1.5;
}
.sidecard__who{
  margin:0;
  font-size:0.85rem;
  color:var(--ink-soft);
  display:flex;
  align-items:baseline;
  gap:0.5rem 0.7rem;
  flex-wrap:wrap;
}
.sidecard__who strong{ color:var(--ink); }
.sidecard__editname{
  border:0;
  background:none;
  padding:0;
  font-family:var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--maroon-800);
  text-decoration:underline;
}
.sidecard__editname:hover{ color:var(--gold-dim); }
.sidecard__label{
  font-family:var(--font-mono);
  font-size:0.64rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-dim);
}
.sidecard__text{
  width:100%;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:0.8rem;
  line-height:1.5;
  padding:0.7rem 0.8rem;
}
.sidecard__actions{
  display:flex;
  gap:0.6rem;
  flex-wrap:wrap;
}
.sidecard__hint{
  margin:0;
  font-size:0.82rem;
  color:var(--maroon-800);
}
/* the two clearly-separated blocks in the "Share This Game" card:
   "Play the same set" (no score) vs. "Challenge them" (score to beat) */
.sharegroup{
  border-top:1px solid var(--line);
  padding-top:0.9rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}
.sharegroup__label{
  font-family:var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--maroon-800);
  font-weight:600;
}
.sharegroup__note{
  margin:0;
  font-size:0.82rem;
  line-height:1.45;
  color:var(--ink-soft);
}
.sharegroup__note strong{ color:var(--ink); }

/* a stat value pops when it goes up while you're on the page */
.stat-card__list li.is-bumped .stat-card__value{
  animation:statBump 0.7s ease;
  color:var(--maroon-700);
}
@keyframes statBump{
  0%{ transform:none; }
  30%{ transform:translateY(-3px) scale(1.14); }
  100%{ transform:none; }
}
.sidecard--stats.is-celebrating{ animation:cardCelebrate 0.9s ease; }
@keyframes cardCelebrate{
  0%{ box-shadow:var(--shadow); }
  35%{ box-shadow:0 0 0 3px var(--gold-light), 0 18px 40px -18px rgba(180,138,69,0.55); }
  100%{ box-shadow:var(--shadow); }
}

/* incoming challenge banner (page opened via a ?ch=1 link) */
.challenge-banner{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  background:linear-gradient(180deg, var(--maroon-900), var(--maroon-950));
  color:var(--paper);
  border-radius:var(--radius);
  padding:1rem 1.1rem;
  margin:0 0 1.6rem;
  box-shadow:var(--shadow);
}
.challenge-banner__body{ flex:1; }
.challenge-banner__tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-bottom:0.3rem;
}
.challenge-banner p{ margin:0; font-size:0.95rem; line-height:1.5; }
.challenge-banner strong{ color:var(--gold-light); }
.challenge-banner__result{
  margin-top:0.5rem !important;
  color:var(--gold-light);
  font-weight:600;
}
.challenge-banner__dismiss{
  border:0;
  background:none;
  color:var(--paper-dim);
  font-size:1.4rem;
  line-height:1;
  padding:0 0.2rem;
}
.challenge-banner__dismiss:hover{ color:var(--paper); }

/* ============================================================
   LEADERBOARD (Tier 1 — Supabase). Everything here is inert
   markup until SUPABASE_URL / SUPABASE_ANON_KEY are set; see
   leaderboard.js + SUPABASE_SETUP.md.
   ============================================================ */
.section-head{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  color:var(--maroon-900);
  margin:0 0 0.6rem;
}
.section-head--spaced{ margin-top:2rem; }
.weekly-top10{ margin:0 0 2.4rem; }
.weekly-top10:empty{ display:none; }
.lb-panel{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.5rem 1.5rem 1.6rem;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.lb-empty{
  margin:0;
  color:var(--ink-soft);
  font-size:0.92rem;
}
.lb-controls,
.lb-identity__fields{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.lb-controls label,
.lb-identity label{
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  font-family:var(--font-mono);
  font-size:0.64rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-dim);
}
.lb-controls select,
.lb-identity input,
.lb-identity select{
  font-family:var(--font-body);
  font-size:0.95rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0.45rem 0.55rem;
}
.lb-identity input[name="lastInitial"]{ width:3.5rem; }
.lb-identity{
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--line);
}
.lb-identity__lead{
  margin:0;
  font-size:0.9rem;
  color:var(--ink-soft);
}

/* profile.html — account header */
.profile-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.profile-name{
  margin:0;
  font-family:var(--font-display, var(--font-body));
  font-size:1.4rem;
  color:var(--ink);
}
.profile-actions{
  display:flex;
  gap:0.6rem;
  flex-wrap:wrap;
}

.lb-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}
.lb-row{
  display:grid;
  grid-template-columns:2rem 1fr auto;
  align-items:baseline;
  gap:0.8rem;
  padding:0.55rem 0;
  border-top:1px solid var(--line);
}
.lb-row:first-child{ border-top:none; }
.lb-rank{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--gold-dim);
}
.lb-name{
  font-family:var(--font-body);
  font-size:0.98rem;
  color:var(--ink);
}
.lb-grade{
  font-family:var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-left:0.4rem;
}
.lb-value{
  font-family:var(--font-body);
  font-weight:600;
  color:var(--maroon-900);
}
.lb-row.is-me .lb-name{ font-weight:600; }
.lb-row.is-me{ background:rgba(180,138,69,0.12); }
.lb-submit{
  display:flex;
  align-items:center;
  gap:0.8rem;
  flex-wrap:wrap;
  margin:1.2rem 0 0;
  padding:0.9rem 1rem;
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:0.92rem;
  color:var(--ink-soft);
}
.lb-submit__done{ color:#2E4A2C; font-weight:600; }

/* stacked boards inside a game page's "This Week's Top 10" panel
   (the weekly puzzles show a Fastest-solve board AND a streak board) */
.lb-subboard + .lb-subboard{
  margin-top:1rem;
  padding-top:0.9rem;
  border-top:1px solid var(--line);
}
.lb-subboard__label{
  font-family:var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-dim);
  margin-bottom:0.4rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--maroon-950);
  color:var(--paper-dim);
  padding:2.2rem 1.5rem;
  margin-top:1rem;
}
.footer__inner{
  max-width:1040px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  border-top:1px solid var(--line-on-dark);
  padding-top:1.4rem;
}
.footer__inner p{
  margin:0;
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.05em;
  color:var(--paper-dim);
  opacity:0.75;
}
.footer__inner a{
  text-decoration:none;
  color:var(--gold-light);
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  border-bottom:1px solid transparent;
}
.footer__inner a:hover{ border-color:var(--gold-light); }

/* ============================================================
   PERSISTENT GAMES (Bronco Dash / Bronco Splash)
   ============================================================ */
.game-start{
  padding:2.4rem 1.5rem;
  text-align:center;
}
.game-start p{
  max-width:44ch;
  margin:0 auto 1.4rem;
  color:var(--ink-soft);
  font-size:0.96rem;
  line-height:1.5;
}

.game-stage{
  position:relative;
  height:300px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, #7CC4F0 0%, #BFE4FA 55%);
}
.game-stage--splash{
  background:linear-gradient(180deg, #1E6F9E, #145178);
}

/* ---------- Bronco Dash: sky + treeline + track surface ---------- */
.game-sky{
  position:absolute;
  inset:0;
  background:
    radial-gradient(24px 14px at 20% 18%, rgba(255,255,255,0.8), transparent 70%),
    radial-gradient(30px 16px at 65% 12%, rgba(255,255,255,0.7), transparent 70%),
    radial-gradient(20px 12px at 85% 22%, rgba(255,255,255,0.7), transparent 70%);
  z-index:0;
}
.game-stage--splash .game-sky{ display:none; }

.game-trees{
  position:absolute;
  left:0; right:0;
  bottom:42%;
  height:14%;
  background-image:
    radial-gradient(circle at 12px 100%, #2F6B3D 9px, transparent 10px),
    radial-gradient(circle at 34px 100%, #3C7F4C 11px, transparent 12px),
    radial-gradient(circle at 58px 100%, #2F6B3D 8px, transparent 9px);
  background-repeat:repeat-x;
  background-size:78px 100%;
  z-index:1;
}
.game-stage--splash .game-trees{ display:none; }

.game-track{
  position:absolute;
  left:0; right:0; bottom:0;
  height:42%;
  background:linear-gradient(180deg, #C1552F, #A8431F);
  z-index:1;
}
.game-track::before, .game-track::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background:rgba(255,255,255,0.65);
}
.game-track::before{ top:32%; }
.game-track::after{ top:68%; }
.game-stage--splash .game-track{ display:none; }

/* ---------- Bronco Splash: pool deck + lane ropes ---------- */
.game-stage--splash::before, .game-stage--splash::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:9%;
  background:repeating-linear-gradient(90deg, #E9E3D6 0 36px, #D4CBB6 36px 38px);
  z-index:3;
}
.game-stage--splash::before{ top:0; }
.game-stage--splash::after{ bottom:0; }

.pool-lane-rope{
  position:absolute;
  left:0; right:0;
  height:7px;
  transform:translateY(-50%);
  background-image:repeating-linear-gradient(90deg, #E23D3D 0 5px, #ffffff 5px 10px, #E23D3D 10px 15px, #2A7FB8 15px 20px);
  border-radius:4px;
  opacity:0.9;
  z-index:2;
}

/* decorative infinitely-scrolling ground/water texture — purely for
   the sense of motion, independent of the actual tick/progress math */
/* position driven entirely by JS (createScrollDrift in config.js) via
   background-position-x, not a CSS animation — a CSS animation whose
   animation-duration changes mid-flight (e.g. speeding up briefly on
   a correct answer) visibly jumps, because the browser recalculates
   progress as elapsed-time / new-duration; driving it frame-by-frame
   from JS lets the speed itself ease up and back down smoothly with
   no discontinuity. */
.game-scroll{
  position:absolute;
  left:0; right:0; bottom:0;
  height:42%;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 4px, transparent 4px 90px);
  background-size:90px 100%;
  z-index:2;
}
.game-stage--splash .game-scroll{
  inset:0; bottom:auto; height:100%;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0 8px, transparent 8px 55px);
  background-size:55px 100%;
  opacity:0.55;
}

.game-marker{
  position:absolute;
  bottom:0;
  left:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--maroon-800);
  z-index:4;
  will-change:transform;
  transition:transform 0.15s linear;
}
/* splash: markers (and the swimmer, below) sit in the vertical middle
   of the lane, between the lane ropes, instead of at the bottom edge */
.game-stage--splash .game-marker{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
  top:0; bottom:0;
  justify-content:center;
}
.game-stage--splash .game-marker::before{ height:90px; }
.game-marker::before{
  content:"";
  display:block;
  width:4px;
  height:135px;
  margin-bottom:0.3rem;
  background:repeating-linear-gradient(180deg, var(--maroon-800) 0 10px, var(--paper) 10px 20px);
}
.game-marker--finish::before{
  background:repeating-linear-gradient(180deg, var(--maroon-950) 0 8px, var(--gold) 8px 16px);
}
.game-marker--pace{ color:var(--maroon-600); font-weight:700; }
.game-marker--pace::before{
  width:5px;
  background:var(--maroon-600);
  box-shadow:0 0 10px rgba(140,32,32,0.7);
}

.game-player{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translate(-50%, 0);
  z-index:5;
}
.game-stage--splash .game-player{
  bottom:auto;
  top:50%;
  transform:translate(-50%, -50%);
}
.stick-figure{
  position:relative;
  width:34px;
  height:76px;
}
.stick-figure__head{
  position:absolute;
  top:0; left:50%;
  width:16px; height:16px;
  margin-left:-8px;
  border-radius:50%;
  background:var(--maroon-900);
}
.stick-figure__torso{
  position:absolute;
  top:15px; left:50%;
  width:3px; height:25px;
  margin-left:-1.5px;
  background:var(--maroon-900);
  transform-origin:top center;
}
.stick-figure__arm, .stick-figure__forearm, .stick-figure__leg, .stick-figure__shin{
  position:absolute;
  width:3px;
  background:var(--maroon-900);
  border-radius:2px;
  transform-origin:top center;
}
.stick-figure__arm{ top:18px; left:50%; height:14px; margin-left:-1.5px; }
.stick-figure__forearm{ top:14px; left:0; height:14px; }
.stick-figure__leg{ top:40px; left:50%; height:17px; margin-left:-1.5px; }
.stick-figure__shin{ top:17px; left:0; height:17px; }
.stick-figure__arm--left{ transform:rotate(15deg); }
.stick-figure__arm--right{ transform:rotate(-15deg); }
.stick-figure__leg--left{ transform:rotate(-10deg); }
.stick-figure__leg--right{ transform:rotate(10deg); }

/* ---------- running cycle (two-segment legs/arms, plus a body bob) ----------
   Brief holds at the extremes (instead of a smooth sine oscillation)
   mimic a real footfall/plant rather than a floaty pendulum swing. */
@keyframes run-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3.5px); } }
@keyframes run-torso-twist{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(4deg); } }
/* Sign convention: with transform-origin:top, a POSITIVE rotate()
   swings a hanging limb's tip toward screen-left, negative toward
   screen-right. The player runs toward increasing X (right, toward
   the finish), so "forward" (direction of travel) is NEGATIVE and
   "backward/trailing" is POSITIVE throughout this cycle. */
@keyframes run-thigh{
  0%{ transform:rotate(38deg); }
  10%{ transform:rotate(38deg); }
  45%{ transform:rotate(-38deg); }
  55%{ transform:rotate(-38deg); }
  90%{ transform:rotate(38deg); }
  100%{ transform:rotate(38deg); }
}
/* bends once, only during the 10%-45% recovery swing (thigh moving
   backward-to-forward) — straight the rest of the cycle, i.e. during
   the stance/push-off phase (thigh moving forward-to-backward) */
@keyframes run-shin{
  0%{ transform:rotate(8deg); }
  10%{ transform:rotate(8deg); }
  27%{ transform:rotate(75deg); }
  45%{ transform:rotate(10deg); }
  55%{ transform:rotate(10deg); }
  90%{ transform:rotate(8deg); }
  100%{ transform:rotate(8deg); }
}
/* Left leg and right arm share the same animation-delay (0), so they
   move in phase together (correct contralateral gait: they're
   "forward" and "backward" at the same moments) — which means arm
   must use the SAME sign pattern as thigh here, not the opposite. */
@keyframes run-arm{
  0%{ transform:rotate(40deg); }
  10%{ transform:rotate(40deg); }
  45%{ transform:rotate(-40deg); }
  55%{ transform:rotate(-40deg); }
  90%{ transform:rotate(40deg); }
  100%{ transform:rotate(40deg); }
}
/* elbow bends most while the arm swings forward (pumping), straighter
   on the backswing */
@keyframes run-forearm{
  0%{ transform:rotate(25deg); }
  10%{ transform:rotate(25deg); }
  45%{ transform:rotate(80deg); }
  55%{ transform:rotate(80deg); }
  90%{ transform:rotate(25deg); }
  100%{ transform:rotate(25deg); }
}

.stick-figure.is-running{ animation:run-bob 0.25s ease-in-out infinite; }
.stick-figure.is-running .stick-figure__torso{ animation:run-torso-twist 0.5s ease-in-out infinite; }
.stick-figure.is-running .stick-figure__leg--left{ animation:run-thigh 0.5s ease-in-out infinite; }
.stick-figure.is-running .stick-figure__leg--left .stick-figure__shin{ animation:run-shin 0.5s ease-in-out infinite; }
.stick-figure.is-running .stick-figure__leg--right{ animation:run-thigh 0.5s ease-in-out infinite; animation-delay:-0.25s; }
.stick-figure.is-running .stick-figure__leg--right .stick-figure__shin{ animation:run-shin 0.5s ease-in-out infinite; animation-delay:-0.25s; }
.stick-figure.is-running .stick-figure__arm--left{ animation:run-arm 0.5s ease-in-out infinite; animation-delay:-0.25s; }
.stick-figure.is-running .stick-figure__arm--left .stick-figure__forearm{ animation:run-forearm 0.5s ease-in-out infinite; animation-delay:-0.25s; }
.stick-figure.is-running .stick-figure__arm--right{ animation:run-arm 0.5s ease-in-out infinite; }
.stick-figure.is-running .stick-figure__arm--right .stick-figure__forearm{ animation:run-forearm 0.5s ease-in-out infinite; }

.stick-figure.is-boost{ animation-duration:0.14s; }
.stick-figure.is-boost .stick-figure__leg--left,
.stick-figure.is-boost .stick-figure__leg--right,
.stick-figure.is-boost .stick-figure__arm--left,
.stick-figure.is-boost .stick-figure__arm--right{ animation-duration:0.22s; }
.stick-figure.is-boost .stick-figure__leg--left .stick-figure__shin,
.stick-figure.is-boost .stick-figure__leg--right .stick-figure__shin,
.stick-figure.is-boost .stick-figure__arm--left .stick-figure__forearm,
.stick-figure.is-boost .stick-figure__arm--right .stick-figure__forearm{ animation-duration:0.22s; }

/* waiting-out-a-wrong-answer pose: bent over, still */
/* Torso stays upright here on purpose — it's a sibling of the legs,
   not their parent, so rotating it doesn't drag the legs along and
   previously left the body looking disconnected from them. Legs are
   left at their normal standing angle (just animation:none, no
   transform override) and only the arms droop, mirrored left/right,
   for a "hands on knees, catching your breath" look. */
.stick-figure.is-waiting{ animation:none; }
.stick-figure.is-waiting .stick-figure__torso{ animation:none; }
.stick-figure.is-waiting .stick-figure__leg--left,
.stick-figure.is-waiting .stick-figure__leg--right{ animation:none; }
.stick-figure.is-waiting .stick-figure__leg--left .stick-figure__shin,
.stick-figure.is-waiting .stick-figure__leg--right .stick-figure__shin{ animation:none; transform:rotate(0deg); }
.stick-figure.is-waiting .stick-figure__arm--left{ animation:none; transform:rotate(-65deg); }
.stick-figure.is-waiting .stick-figure__arm--left .stick-figure__forearm{ animation:none; transform:rotate(60deg); }
.stick-figure.is-waiting .stick-figure__arm--right{ animation:none; transform:rotate(65deg); }
.stick-figure.is-waiting .stick-figure__arm--right .stick-figure__forearm{ animation:none; transform:rotate(-60deg); }

/* ---------- swimming stroke cycle (freestyle-ish arms + flutter-kick legs) ----------
   The -90deg rotation lives on the wrapper (.stick-figure-orient), not
   on .stick-figure itself, since .stick-figure also gets its own
   animated transform (the bob below) — animating transform on an
   element completely replaces its static transform for that property,
   so the rotation has to live on a separate parent to survive. */
.game-stage--splash .stick-figure-orient{ transform:rotate(90deg) translate(-8px, -8px); }
@keyframes swim-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@keyframes swim-arm{
  0%{ transform:rotate(-85deg); }
  8%{ transform:rotate(-85deg); }
  50%{ transform:rotate(65deg); }
  60%{ transform:rotate(65deg); }
  100%{ transform:rotate(-85deg); }
}
@keyframes swim-forearm{
  0%{ transform:rotate(60deg); }
  20%{ transform:rotate(60deg); }
  50%{ transform:rotate(8deg); }
  70%{ transform:rotate(8deg); }
  100%{ transform:rotate(60deg); }
}
@keyframes swim-leg{ 0%,100%{ transform:rotate(-16deg); } 50%{ transform:rotate(16deg); } }

.stick-figure.is-swimming{ animation:swim-bob 0.35s ease-in-out infinite; }
.stick-figure.is-swimming .stick-figure__arm--left{ animation:swim-arm 0.7s ease-in-out infinite; }
.stick-figure.is-swimming .stick-figure__arm--left .stick-figure__forearm{ animation:swim-forearm 0.7s ease-in-out infinite; }
.stick-figure.is-swimming .stick-figure__arm--right{ animation:swim-arm 0.7s ease-in-out infinite; animation-delay:-0.35s; }
.stick-figure.is-swimming .stick-figure__arm--right .stick-figure__forearm{ animation:swim-forearm 0.7s ease-in-out infinite; animation-delay:-0.35s; }
.stick-figure.is-swimming .stick-figure__leg--left,
.stick-figure.is-swimming .stick-figure__leg--left .stick-figure__shin{ animation:swim-leg 0.35s ease-in-out infinite; }
.stick-figure.is-swimming .stick-figure__leg--right,
.stick-figure.is-swimming .stick-figure__leg--right .stick-figure__shin{ animation:swim-leg 0.35s ease-in-out infinite; animation-delay:-0.175s; }

.stick-figure.is-boost.is-swimming{ animation-duration:0.18s; }
.stick-figure.is-boost.is-swimming .stick-figure__arm--left,
.stick-figure.is-boost.is-swimming .stick-figure__arm--right{ animation-duration:0.4s; }
.stick-figure.is-boost.is-swimming .stick-figure__arm--left .stick-figure__forearm,
.stick-figure.is-boost.is-swimming .stick-figure__arm--right .stick-figure__forearm{ animation-duration:0.4s; }
.stick-figure.is-boost.is-swimming .stick-figure__leg--left,
.stick-figure.is-boost.is-swimming .stick-figure__leg--right,
.stick-figure.is-boost.is-swimming .stick-figure__leg--left .stick-figure__shin,
.stick-figure.is-boost.is-swimming .stick-figure__leg--right .stick-figure__shin{ animation-duration:0.2s; }

/* out of air — arms/legs stop, small gasp indicator */
/* stopped swimming, but a relaxed "barely treading water" droop
   rather than a perfectly rigid, symmetric zero pose (which read as
   lifeless) */
.stick-figure.is-gasping{ animation:none; }
.stick-figure.is-gasping .stick-figure__arm--left{ animation:none; transform:rotate(-25deg); }
.stick-figure.is-gasping .stick-figure__arm--right{ animation:none; transform:rotate(20deg); }
.stick-figure.is-gasping .stick-figure__leg--left{ animation:none; transform:rotate(12deg); }
.stick-figure.is-gasping .stick-figure__leg--right{ animation:none; transform:rotate(-8deg); }
.stick-figure.is-gasping .stick-figure__arm--left .stick-figure__forearm,
.stick-figure.is-gasping .stick-figure__arm--right .stick-figure__forearm{ animation:none; transform:rotate(30deg); }
.stick-figure.is-gasping .stick-figure__leg--left .stick-figure__shin,
.stick-figure.is-gasping .stick-figure__leg--right .stick-figure__shin{ animation:none; transform:rotate(15deg); }
.stick-figure.is-gasping .stick-figure__head::after{
  content:"💦";
  position:absolute;
  top:-16px; left:16px;
  font-size:12px;
}

.game-hud{
  position:absolute;
  top:0.7rem; left:0.9rem; right:0.9rem;
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  z-index:6;
}
.game-hud__bar{
  height:8px;
  border-radius:99px;
  background:rgba(36,24,17,0.15);
  overflow:hidden;
}
.game-hud__bar-fill{
  height:100%;
  background:var(--maroon-800);
  transition:width .2s linear;
}
.game-hud__bar--o2 .game-hud__bar-fill{ background:#2A7FB8; }
.game-hud__label{
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--maroon-900);
}

.game-question{
  margin-top:1.4rem;
  text-align:center;
}
.game-question__text{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:600;
  color:var(--maroon-900);
  margin:0 0 1rem;
}
.game-question__choices{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0.7rem;
}
.game-question__choice{
  padding:0.7rem 1rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper-card);
  font-family:var(--font-body);
  font-size:0.94rem;
  color:var(--ink);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.game-question__choice:hover:not(:disabled){ border-color:var(--maroon-800); }
.game-question__choice:disabled{ cursor:default; opacity:0.7; }
.game-question__choice.is-correct{ background:rgba(66,110,64,0.16); border-color:#3E6B3B; }
.game-question__choice.is-wrong{ background:rgba(140,32,32,0.1); border-color:var(--maroon-600); }
.game-question__wait{
  margin:0.9rem 0 0;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:var(--maroon-800);
  min-height:1.2em;
}

.game-finish{
  padding:2.4rem 1.5rem;
  text-align:center;
}
.game-finish h3{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--maroon-900);
  margin:0 0 0.6rem;
}
.game-finish p{
  color:var(--ink-soft);
  font-size:0.98rem;
  margin:0 0 1.4rem;
}
.game-finish .is-new-best{ color:#2E4A2C; font-weight:600; }
.game-finish--lose h3{ color:var(--maroon-600); }

/* ============================================================
   BRONCO BLITZ (trivia speed round — no stage/figure, just a
   countdown, a running score, and A/B/C/D questions)
   ============================================================ */
.trivia-timerbar{
  height:8px;
  border-radius:99px;
  background:rgba(36,24,17,0.15);
  overflow:hidden;
  margin-bottom:1.2rem;
}
.trivia-timerbar__fill{
  height:100%;
  background:var(--maroon-800);
  transition:width .1s linear, background .2s ease;
}
.trivia-timerbar__fill.is-low{ background:#C0392B; }

.trivia-hud{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:0.6rem;
}
.trivia-hud__stat{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--maroon-800);
}
.trivia-hud__stat strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--maroon-900);
}
.trivia-hud__stat--streak.is-hot strong{ color:var(--gold-dim); }
/* final 10 seconds — the "Time left" readout goes SS:CC and red */
.trivia-hud__stat--time strong{ font-variant-numeric:tabular-nums; }
.trivia-hud__stat--time.is-low strong{ color:#C0392B; }

.game-question__choice .choice-letter{
  font-family:var(--font-mono);
  font-weight:700;
  color:var(--gold-dim);
  margin-right:0.5em;
}

.trivia-points{
  font-family:var(--font-mono);
  font-size:0.86rem;
  color:var(--ink-soft);
  min-height:1.2em;
  text-align:center;
  margin:0.7rem 0 0;
}

/* ============================================================
   404 (404.html)
   ============================================================ */
.error-page{
  min-height:50vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:4rem 1.25rem;
}
.error-page__code{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(4.5rem, 14vw, 8rem);
  line-height:1;
  color:var(--maroon-800);
  opacity:0.85;
  margin:0;
}
.error-page h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.5rem, 4vw, 2.1rem);
  color:var(--maroon-900);
  margin:0.5rem 0 0.7rem;
}
.error-page p:not(.error-page__code){
  max-width:44ch;
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.55;
  margin:0 0 1.6rem;
}
/* .btn defaults to align-self:flex-start (left-aligned in most flex
   contexts, like game cards) — override just here so it centers
   under the message instead */
.error-page .btn{ align-self:center; }

@media (max-width:560px){
  .crossword-frame-wrap iframe{ height:520px; }
  .panel__body{ padding:1.2rem; }
  .game-question__choices{ grid-template-columns:1fr; }
  .game-stage{ height:220px; }
}