/* Ceilte, aligned with the Focal app: lowercase serif brand, one tall hero card
   with a living sky (sun arc + nightfall veils) and a green hill Fionnán sits on,
   big italic Georgia for the Irish word, sage banner. Light theme only.
   Text colors meet WCAG AA at every nightfall stage (verified). */

:root {
  --paper: #FBF9F4;
  --card: #FFFFFF;
  --ink: #1A3A2E;
  --ink-soft: #47695C;            /* 5.8:1 on paper */
  --accent: #C17D5B;              /* decorative only */
  --accent-deep: #954F2E;         /* >=4.8:1 on every light surface */
  --border: #CFC7B4;
  --good: #2E6247;
  --good-text: #2E6247;
  --bad: #B04A31;
  --ring: rgba(149, 79, 46, 0.22);
  --on-strong: #FBF9F4;
  --dot: rgba(26, 58, 46, 0.06);
  --shadow: 0 4px 16px rgba(26, 58, 46, 0.07), 0 1px 2px rgba(26, 58, 46, 0.05);
  --sky-top: #F8EDE2;             /* the mascot illustration's soft sky */
  --sky-bottom: #FDFAF4;
  --hill-back: #C2D2A8;
  --hill-front: #97B476;
  --banner: #E4EDE4;              /* app's "keep it going" banner */
  --banner-icon: #B5C9B2;
  /* Fionnán's coat, from the app's Fionnan.tsx (light scheme) */
  --f-bone: #E7DBBF;
  --f-shade: #D2C29F;
  --f-belly: #F3EBD8;
  --f-gold: #B8894C;
  --tile-size: 3rem;              /* set per-word by game.js */
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* the hidden attribute must always win, whatever display a class sets */
[hidden] { display: none !important; }

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(var(--dot) 1px, transparent 1.5px),
    radial-gradient(var(--dot) 1px, transparent 1.5px);
  background-size: 26px 26px;
  background-position: 0 0, 13px 13px;
  color: var(--ink);
  font-family: var(--serif);
  min-height: 100svh;   /* svh: stable when the mobile URL bar collapses */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.4rem 1.15rem calc(1.4rem + env(safe-area-inset-bottom));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s, color 0.35s;
}

a { color: var(--accent-deep); text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: 6px; }

/* ---------- top bar, like the app's header row ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 26rem;
  margin-bottom: 1rem;
}
.brand h1 {
  font-size: 2.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
}
.tagline { color: var(--ink-soft); font-style: italic; font-size: 0.8rem; }
.topbar-right { display: flex; align-items: center; gap: 0.55rem; }

/* ---------- the hero card: sky above, hill below ---------- */
main { width: 100%; max-width: 26rem; flex: 1; display: flex; flex-direction: column; gap: 0.9rem; }

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 27rem;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(var(--sky-top), var(--sky-bottom) 70%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* thin corner accents, from the app's CornerDecor */
.hero::before, .hero::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--accent);
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}
.hero::before { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.hero::after { top: 10px; right: 10px; border-top-width: 1px; border-right-width: 1px; }

/* the sun: crosses east to west as evening advances (position set by game.js) */
.sun {
  position: absolute;
  left: var(--sun-x, 16%);
  top: var(--sun-y, 24%);
  width: 2.4rem;
  height: 2.4rem;
  margin: -1.2rem 0 0 -1.2rem;
  border-radius: 50%;
  background: var(--sun-color, #FFDE8F);
  box-shadow: 0 0 34px 12px var(--sun-glow, rgba(255, 222, 143, 0.55));
  opacity: var(--sun-op, 1);
  pointer-events: none;
  z-index: 0;
  transition: left 1.4s ease, top 1.4s ease, opacity 1.4s ease,
              background 1.4s ease, box-shadow 1.4s ease;
}

/* nightfall veils: opacity driven by game.js (--sunset-op, --night-op, --stars-op) */
.veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 1.4s ease;
}
/* horizon glow: strongest just above the hill, fading upward */
.veil-sunset {
  background: linear-gradient(to top,
    rgba(255, 106, 60, 0.9) 0%,
    rgba(240, 82, 92, 0.55) 34%,
    rgba(214, 92, 128, 0.22) 55%,
    rgba(214, 92, 128, 0) 70%);
  opacity: var(--sunset-op, 0);
}
/* night: deep indigo settling from the top down */
.veil-night { background: linear-gradient(#0F1735, #232B4E); opacity: var(--night-op, 0); }
.stars {
  opacity: var(--stars-op, 0);
  background-image:
    radial-gradient(1.5px 1.5px at 16% 12%, #FFF8E7 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 32% 26%, #FFF8E7 60%, transparent 61%),
    radial-gradient(1.6px 1.6px at 48% 9%, #FFF8E7 60%, transparent 61%),
    radial-gradient(1.1px 1.1px at 63% 21%, #FFF8E7 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 78% 13%, #FFF8E7 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 88% 30%, #FFF8E7 60%, transparent 61%),
    radial-gradient(1.3px 1.3px at 24% 40%, #FFF8E7 60%, transparent 61%),
    radial-gradient(1.1px 1.1px at 70% 38%, #FFF8E7 60%, transparent 61%);
}

/* each act stretches and distributes: clue at the top, board in the middle,
   whisper settling toward the hill; no dead space pooling at the bottom */
.hero section {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.4rem 0.4rem;
  text-align: center;
}
#act1 .type-hint { margin-top: auto; }
#act1 .whisper { margin-top: auto; margin-bottom: 0.5rem; }
#act2 .tiles-act2 { margin-top: auto; }
#act2 .act2-intro { margin-top: 0.4rem; }
#act2 .btn { margin-bottom: auto; }
/* guaranteed breathing room even when the reveal content fills the hero */
#reveal .countdown { margin-top: auto; padding-top: 1.4rem; margin-bottom: 0.5rem; }

/* twilight (stages 2-4): soft text deepens to full ink so it stays readable
   as the veils gather */
.hero.twilight .act-label, .hero.twilight .clue-grammar, .hero.twilight .whisper,
.hero.twilight .act2-intro, .hero.twilight .type-hint, .hero.twilight .miss-line,
.hero.twilight .countdown, .hero.twilight .reveal-grammar,
.hero.twilight .dict-link { color: var(--ink); }

/* deep dusk on (stage 5+): the hero's text switches to night colors */
.hero.dusky .clue-meaning, .hero.dusky .reveal-word, .hero.dusky .reveal-meaning,
.hero.dusky .stat-val { color: #FBF9F4; }
.hero.dusky .act-label, .hero.dusky .dict-link { color: #FBF9F4; }
.hero.dusky .clue-grammar, .hero.dusky .whisper, .hero.dusky .act2-intro,
.hero.dusky .type-hint, .hero.dusky .miss-line, .hero.dusky .countdown,
.hero.dusky .reveal-grammar, .hero.dusky .copied,
.hero.dusky .stat-label { color: #EAE8DF; }
.hero section:not([hidden]) { animation: enter 0.45s ease both; }
@keyframes enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.act-label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-deep);
  margin-bottom: 0.9rem;
}

/* the hill Fionnán sits on */
.hill {
  position: relative;
  z-index: 1;
  margin-top: auto;
  height: 9.5rem;
  filter: brightness(var(--hill-bright, 1));
  transition: filter 1.4s ease;
  background:
    radial-gradient(90% 130% at 8% 130%, var(--hill-back) 58%, transparent 59%),
    radial-gradient(90% 130% at 92% 130%, var(--hill-back) 58%, transparent 59%),
    radial-gradient(160% 110% at 50% 165%, var(--hill-front) 62%, transparent 63%);
}
.hare {
  position: absolute;
  left: 50%;
  bottom: -0.4rem;    /* his feet rest on the grass */
  transform: translateX(-50%);
  width: clamp(6.5rem, 26vw, 7.5rem);
  height: clamp(6.5rem, 26vw, 7.5rem);
  animation: breathe 4.5s ease-in-out infinite;
}
.hare svg { width: 100%; height: 100%; display: block; }
@keyframes breathe {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}
.hare.hop { animation: hop 0.65s cubic-bezier(0.28, 1.6, 0.4, 1); }
@keyframes hop {
  0% { transform: translateX(-50%) translateY(0); }
  30% { transform: translateX(-50%) translateY(-16px) rotate(-4deg); }
  55% { transform: translateX(-50%) translateY(0); }
  75% { transform: translateX(-50%) translateY(-6px) rotate(2deg); }
  100% { transform: translateX(-50%) translateY(0); }
}
.hare.dip { animation: dip 0.5s ease; }
@keyframes dip {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  35% { transform: translateX(-50%) rotate(-7deg) translateY(2px); }
  70% { transform: translateX(-50%) rotate(4deg); }
}
.hare.asleep { animation: none; }
.hare.asleep::after {
  content: 'z z';
  position: absolute;
  top: -0.5rem;
  right: -0.9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: #FBF9F4;
  animation: zfloat 2.8s ease-in-out infinite;
}
@keyframes zfloat {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-7px); opacity: 0.9; }
}

/* ---------- act 1 ---------- */
.clue-meaning {
  font-size: clamp(1.35rem, 5.5vw, 1.55rem);
  font-style: italic;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.clue-grammar {
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0.4rem 0 1.2rem;
}

.tiles {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 1rem;
}
.tile {
  width: var(--tile-size);
  height: var(--tile-size);
  flex: 0 0 var(--tile-size);
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  display: grid;
  place-items: center;
  font-size: calc(var(--tile-size) * 0.52);
  font-weight: 700;
  text-transform: uppercase;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.tile.deal { animation: deal 0.4s ease backwards; }
@keyframes deal {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* editable tiles */
.tile-input {
  font-family: var(--serif);
  /* never below 16px: smaller focused inputs make iOS zoom the page */
  font-size: max(16px, calc(var(--tile-size) * 0.52));
  text-align: center;
  color: var(--ink);
  caret-color: var(--accent-deep);
  padding: 0;
  border-style: dashed;         /* an open door: type here */
}
.tile-input::placeholder { color: var(--ink-soft); opacity: 0.45; }
.tile-input:focus::placeholder { opacity: 0; }
.tile-input:focus {
  outline: none;
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px var(--ring);
}

/* settled tiles: green you earned, gold Fionnán gave you */
.tile.earned, .tile.solved {
  background: var(--good);
  border-color: var(--good);
  color: var(--on-strong);
}
.tile.gifted {
  background: var(--f-gold);
  border-color: var(--f-gold);
  color: #26221B;
}
.tile.flip-in { animation: flip 0.5s ease; }
@keyframes flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}

/* check feedback on tiles that did not lock */
.tile.flash-amber {
  background: var(--f-gold);
  border-color: var(--f-gold);
  color: #26221B;
  animation: pulse 0.6s ease;
}
.tile.flash-wrong {
  border-color: var(--bad);
  color: var(--bad);
  animation: shake 0.45s ease;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.08); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  55% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}

.tiles-act2 { margin: 1.2rem 0; }
.tile.vowel { cursor: pointer; border-color: var(--accent); border-style: dashed; }
.tile.vowel:active { transform: scale(0.93); }
.tile.fada-on { background: var(--sky-top); border-style: solid; }
.tile.fada-good { background: var(--good); border-color: var(--good); color: var(--on-strong); }
.tile.fada-bad  { background: var(--bad);  border-color: var(--bad);  color: var(--on-strong); }

.type-hint {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.board-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
/* solid card ground so it reads against every sky, day or night */
.btn-ghost {
  background: var(--card);
  color: var(--accent-deep);
  border: 1.5px solid var(--accent-deep);
  box-shadow: var(--shadow);
}
.btn-ghost:hover { filter: none; background: var(--ring); }

.miss-line {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}

.btn {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.65rem 1.35rem;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(0.97); }
#act2 .btn { display: inline-block; }

.whisper, .act2-intro {
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-style: italic;
  margin-top: 0.9rem;
}
.act2-intro { margin-top: 0; }
.whisper.nudge { animation: nudge 0.4s; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
}

/* ---------- reveal, typeset like the app's word card ---------- */
.reveal-word {
  font-size: clamp(2.7rem, 12vw, 3.3rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.reveal-grammar {
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 0.35rem;
}
.reveal-meaning { font-weight: 700; margin-top: 0.6rem; font-size: 1.15rem; }
.dict-link {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.8rem;
}
/* the scorecard: your word in the game's own tile language, then labeled stats */
.scorecard { margin: 1.15rem 0 1rem; }
.mini-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 0.8rem;
}
.mini-tile {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
}
.mini-tile.earned { background: var(--good); color: var(--on-strong); }
.mini-tile.gifted { background: var(--f-gold); color: #26221B; }
.stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.4rem;
  row-gap: 0.8rem;
  padding: 0 0.4rem;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-val { font-family: var(--sans); font-size: 1.02rem; font-weight: 700; }
.stat-label {
  font-family: var(--sans);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.btn-share { background: var(--accent-deep); color: var(--on-strong); }
.copied {
  font-family: var(--sans);
  color: var(--good-text);
  font-size: 0.8rem;
  margin-top: 0.55rem;
}
.countdown {
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 1.1rem;
}

/* ---------- app banner, like Focal's ---------- */
.banner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--banner);
  border-radius: 16px;
  padding: 0.9rem;
}
.banner { align-items: flex-start; }
.banner-icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--banner-icon);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.banner-hare { width: 2.9rem; height: 2.9rem; margin-top: 0.45rem; }
.banner-hare svg { width: 100%; height: 100%; display: block; }
.banner-text { flex: 1; }
.store-badge { display: inline-block; margin-top: 0.7rem; line-height: 0; }
.store-badge svg { height: 40px; width: auto; border-radius: 9px; }
.store-badge:hover svg { filter: brightness(1.25); }
.store-badge:active { transform: scale(0.97); }
.banner-title { font-family: var(--sans); font-size: 0.92rem; font-weight: 700; }
.banner-body {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}
.banner-body a { font-weight: 600; }

/* ---------- separator & footer ---------- */
.separator {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  max-width: 26rem;
  margin: 1.1rem 0 0.8rem;
  color: var(--ink-soft);
}
.separator::before, .separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.2;
}
.separator span { font-size: 0.5rem; opacity: 0.6; }

footer {
  width: 100%;
  max-width: 26rem;
  text-align: center;
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 0.76rem;
}
.credits { margin-top: 0.4rem; font-size: 0.66rem; opacity: 0.85; }

/* ---------- first-visit intro ---------- */
.intro {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 2rem 1.9rem;
  text-align: center;
  background: #FBF9F4;    /* fully opaque, shown instantly: never a flash of game */
  border-radius: inherit;
}
.intro[hidden] { display: none; }
.intro-hare { width: 5.2rem; height: 5.2rem; }
.intro-hare svg { width: 100%; height: 100%; display: block; }
.intro-eyebrow {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-deep);
}
.intro h2 {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: -0.3rem;
}
.intro-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.4rem 0 0.3rem;
  max-width: 19.5rem;
  text-align: left;
}
.intro-points li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink);
}
.intro-chip {
  flex-shrink: 0;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}
.chip-earned { background: var(--good); color: var(--on-strong); }
.chip-amber { background: var(--f-gold); color: #26221B; }
.chip-gifted { background: var(--card); color: var(--accent-deep); border: 1.5px dashed var(--accent-deep); }
.chip-night { background: #232B4E; color: #FBF9F4; }
.intro .btn { margin-top: 0.6rem; }

/* ---------- phones: the hero owns the screen ---------- */
@media (max-width: 719px) {
  body { padding: 1rem 0.65rem calc(1.2rem + env(safe-area-inset-bottom)); }
  .topbar { margin-bottom: 0.6rem; padding: 0 0.3rem; }
  .brand h1 { font-size: 1.85rem; }
  .separator { display: none; }             /* chrome makes way for the game */
  main { gap: 0.8rem; }
  .hero { min-height: clamp(24rem, 72svh, 34rem); }  /* svh: no resize on scroll */
  .hero section { padding: 1.2rem 0.5rem 0.4rem; }   /* wider board, bigger tiles */
  .tiles { gap: 3px; }
  .tiles { margin-bottom: 1.2rem; }
  /* crossword-slot tiles: a touch taller than wide, so they read bigger */
  .tile {
    height: calc(var(--tile-size) * 1.12);
    font-size: calc(var(--tile-size) * 0.56);
  }
  /* clue block and board sit closer: the gap above the board takes one share
     of free space, the gap below takes two */
  #act1 .board-actions { margin-bottom: auto; }
  footer, .banner { margin-left: 0.3rem; margin-right: 0.3rem; }
  .sun {
    width: 1.8rem;
    height: 1.8rem;
    margin: -0.9rem 0 0 -0.9rem;
    box-shadow: 0 0 22px 8px var(--sun-glow, rgba(255, 222, 143, 0.5));
  }
  .whisper { font-size: 0.8rem; max-width: 20rem; align-self: center; }
  .hill { height: 7.2rem; }                 /* more sky for the play area */
  .hare { width: 5.8rem; height: 5.8rem; }
  footer { margin-top: 0.9rem; }
}

/* ---------- larger screens: same column, room to breathe ---------- */
@media (min-width: 720px) {
  body { padding-top: 3rem; }
  .topbar, main, .separator, footer { max-width: 30rem; }
  .topbar { margin-bottom: 1.4rem; }
  .brand h1 { font-size: 2.5rem; }
  .tagline { font-size: 0.88rem; }
  .hero { min-height: 32rem; border-radius: 28px; }
  .hero section { padding: 2.1rem 2rem 0.5rem; }
  .clue-meaning { font-size: 1.7rem; }
  .reveal-word { font-size: 3.7rem; }
  .hill { height: 11rem; }
  .hare { width: 8.5rem; height: 8.5rem; }
  main { gap: 1.1rem; }
  .banner { padding: 1.1rem 1.2rem; }
  .banner-title { font-size: 1rem; }
  .banner-body { font-size: 0.86rem; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}