/* @shard room-autumn (autumn.css) — the AUTUMN THEME for Word Lab.
   Two jobs, and only these two:
     1. set the --wl-* design-token VALUES (the token NAMES are declared by the engine's
        00-base.css; this room paints warm-cute values over the neutral defaults), and
     2. own the .wl-room-autumn-* room chrome (skip link, nav, title, mute toggle) plus
        the Autumn reveal flourish (Mittens pads in, the earned word blooms from petals).
   Loaded AFTER engine.css so the token values cascade. No assets, no webfonts (system
   font stacks only), reduced-motion-safe, WCAG-AA contrast, >=44px touch.
   Does NOT restyle the engine's own component classes — those belong to their shards. */

/* ============================================================
   1. DESIGN TOKEN VALUES — the warm-cute Autumn world
   ============================================================ */
:root {
  /* surfaces + ink */
  --wl-bg:            #FFF7E8;   /* soft cream page */
  --wl-bg-2:          #FFE9C7;   /* warm peach wash for gradients */
  --wl-surface:       #FFFFFF;   /* cards */
  --wl-surface-2:     #FFF3DD;   /* sunk panels */
  --wl-surface-alt:   #FFF3DD;
  --wl-text:          #4A3320;   /* warm dark brown — AA on cream */
  --wl-text-soft:     #6E5638;
  --wl-text-muted:    #8C7253;
  --wl-muted:         #8C7253;
  --wl-line:          #F0DCBE;   /* hairlines */
  --wl-border:        #E7CFA6;   /* card borders */

  /* brand accents */
  --wl-accent:        #FF8C61;   /* coral */
  --wl-accent-strong: #E8623A;
  --wl-accent-ink:    #9C3C19;   /* coral text on light — AA */
  --wl-accent-2:      #FFC93C;   /* sunny */
  --wl-accent-soft:   #FFE0CE;
  --wl-on-accent:     #FFFFFF;

  /* garden greens (Spelling Garden) */
  --wl-leaf:          #7BD389;
  --wl-leaf-deep:     #3F8F58;   /* AA green text */
  --wl-leaf-soft:     #E2F4E5;

  /* feedback — gentle, never red/scolding */
  --wl-correct:       #3F8F58;
  --wl-correct-soft:  #DDF2E1;
  --wl-warn:          #C77A19;   /* warm amber for "try again", AA on cream */
  --wl-warn-soft:     #FBEBCB;
  --wl-info:          #2F6FB0;

  /* type — system stacks; prefer rounded display faces IF the device has them */
  --wl-font:          "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wl-font-body:     "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wl-font-display:  "Fredoka", "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --wl-font-read:     Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --wl-font-mono:     "DejaVu Sans Mono", "Consolas", ui-monospace, monospace;

  /* shape + depth */
  --wl-radius:        16px;
  --wl-radius-sm:     10px;
  --wl-radius-lg:     26px;
  --wl-radius-pill:   999px;
  --wl-shadow:        0 8px 22px rgba(176, 116, 40, 0.18);
  --wl-shadow-soft:   0 3px 10px rgba(176, 116, 40, 0.12);
  --wl-ring:          #2F6FB0;   /* focus ring — AA visible on warm bg */

  /* metrics */
  --wl-touch:         44px;
  --wl-gap:           14px;
  --wl-maxw:          720px;
}

/* ============================================================
   2. PAGE CANVAS + ROOM CHROME (.wl-room-autumn-*)
   ============================================================ */
body.wl-room-autumn {
  margin: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--wl-bg-2) 0%, var(--wl-bg) 55%) fixed;
  color: var(--wl-text);
  font-family: var(--wl-font-body);
  -webkit-text-size-adjust: 100%;
}

/* skip-to-content — hidden until focused */
.wl-room-autumn-skip {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 9500;
  background: var(--wl-surface);
  color: var(--wl-accent-ink);
  border: 2px solid var(--wl-accent);
  border-radius: var(--wl-radius-sm);
  padding: 12px 18px;
  font: 600 1rem/1 var(--wl-font-display);
  text-decoration: none;
  box-shadow: var(--wl-shadow);
  transition: top 0.18s ease;
}
.wl-room-autumn-skip:focus {
  top: 12px;
  outline: 3px solid var(--wl-ring);
  outline-offset: 2px;
}

/* header nav row */
.wl-room-autumn-nav {
  display: flex;
  align-items: center;
}
.wl-backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--wl-touch);
  padding: 8px 16px;
  border-radius: var(--wl-radius-pill);
  background: var(--wl-surface);
  border: 2px solid var(--wl-border);
  color: var(--wl-accent-ink);
  font: 700 1rem/1 var(--wl-font-display);
  text-decoration: none;
  box-shadow: var(--wl-shadow-soft);
}
.wl-backlink:hover { background: var(--wl-accent-soft); }
.wl-backlink:focus-visible {
  outline: 3px solid var(--wl-ring);
  outline-offset: 2px;
}

.wl-room-autumn-title {
  margin: 0;
  flex: 1 1 auto;
  text-align: center;
  font: 800 clamp(1.25rem, 5vw, 1.9rem)/1.05 var(--wl-font-display);
  color: var(--wl-accent-ink);
  letter-spacing: 0.01em;
}
.wl-room-autumn-title-leaf { font-size: 0.95em; }

/* persistent mute toggle */
.wl-room-autumn-mute {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--wl-touch);
  min-width: var(--wl-touch);
  padding: 8px 14px;
  border-radius: var(--wl-radius-pill);
  background: var(--wl-surface);
  border: 2px solid var(--wl-border);
  color: var(--wl-text);
  font: 700 0.95rem/1 var(--wl-font-display);
  cursor: pointer;
  box-shadow: var(--wl-shadow-soft);
}
.wl-room-autumn-mute:hover { background: var(--wl-accent-soft); }
.wl-room-autumn-mute:focus-visible {
  outline: 3px solid var(--wl-ring);
  outline-offset: 2px;
}
.wl-room-autumn-mute[aria-pressed="true"] {
  background: var(--wl-surface-2);
  color: var(--wl-text-muted);
  border-color: var(--wl-line);
}
.wl-room-autumn-mute-icon { font-size: 1.15rem; line-height: 1; }
.wl-room-autumn-mute-label { white-space: nowrap; }

/* header layout — uses the engine's .wl-nav anchor; room owns the look only */
body.wl-room-autumn .wl-nav {
  display: flex;
  align-items: center;
  gap: var(--wl-gap);
  flex-wrap: wrap;
  max-width: var(--wl-maxw);
  margin: 0 auto;
  padding: 12px 16px;
}

/* keep content in a comfortable, centred reading column on big screens */
body.wl-room-autumn .wl-main,
body.wl-room-autumn .wl-hud {
  max-width: var(--wl-maxw);
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   3. THE AUTUMN REVEAL FLOURISH — Mittens + petal-bloom
   The engine fills #wl-reveal via the renderer's revealInto() path (the ONLY place the
   answer is ever shown). The room dresses that region warmly: a petal card, a Mittens
   paw motif, and a gentle letter-bloom. Reduced-motion shows it instantly, no animation.
   ============================================================ */
body.wl-room-autumn #wl-reveal:not(:empty) {
  position: relative;
  background: linear-gradient(180deg, var(--wl-surface) 0%, var(--wl-accent-soft) 100%);
  border: 2px dashed var(--wl-accent);
  border-radius: var(--wl-radius-lg);
  padding: 18px 18px 18px 56px;
  margin-top: var(--wl-gap);
  box-shadow: var(--wl-shadow-soft);
  animation: wl-room-autumn-bloom 420ms ease-out both;
}
/* Mittens pads in at the corner (decorative, CSS only — no asset) */
body.wl-room-autumn #wl-reveal:not(:empty)::before {
  content: "🐾";
  position: absolute;
  left: 16px;
  top: 16px;
  font-size: 1.4rem;
  animation: wl-room-autumn-pad 520ms ease-out both;
}
/* the earned word blooms up from its petals */
body.wl-room-autumn #wl-reveal:not(:empty) > * {
  animation: wl-room-autumn-petal 480ms 80ms ease-out both;
}

@keyframes wl-room-autumn-bloom {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
@keyframes wl-room-autumn-pad {
  from { transform: translateX(-10px) rotate(-12deg); opacity: 0; }
  to   { transform: translateX(0) rotate(0);          opacity: 1; }
}
@keyframes wl-room-autumn-petal {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);      opacity: 1; }
}

/* ============================================================
   4. REDUCED MOTION — answer still shown instantly, just no motion
   (no flash > 3Hz anywhere; all of the above are single ease-out tweens)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.wl-room-autumn #wl-reveal:not(:empty),
  body.wl-room-autumn #wl-reveal:not(:empty)::before,
  body.wl-room-autumn #wl-reveal:not(:empty) > *,
  .wl-room-autumn-skip {
    animation: none !important;
    transition: none !important;
  }
}