/* @shard answer-tile-grid-layout-fix */
/* @provides ClarksLayout.tile_grid_3up */
/* @requires none */

/* public/oaks/style.css
   Oaks room shell -- pitch/midnight + electric mint + halftone comic register.
   Comic-cell panel housing for Maul (rotate -1.2deg + box-shadow 4px 4px 0).
   Chalk-grid card for Captain Vector. Lock 8 continuous-driver tokens.
   Namespace: .oaks-* + the .clarks-companion-housing.oaks modifier on S5's
   shared housing wrapper. */

/* ---------- Lock 8 tokens (canonical Oaks palette) ---------- */

:root.oaks {
  --pitch: #0E2A1F;
  --midnight: #1A2B4A;
  --electric: #3CE2A5;
  --crimson: #E63946;             /* used only for try-line stroke; NEVER for error feedback (Lock 6) */
  --gold-cup: #FFC93C;
  --chalk: #F8F6F0;
  --halftone: rgba(60, 226, 165, .18);
  --ink-deep: #0B0F1A;
  --floodlight: 0;                /* SESSION-MONOTONIC 0->1 (S5 ClarksDriver) */
  --flashbulb: 0;                 /* PER-CORRECT pulse 0->1->0 over 0.3s */
  --warm: #FBBF24;                /* Lock 6 -- amber, NOT red, for error feedback */
  --oaks-tap-min: 44px;           /* Lock 16 -- Oaks floor (not Ngaia's 80px) */
  --oaks-tr-tap-min: 88px;        /* Lock 16 -- Trail Run lanes Oaks */
  --accent: var(--electric);
}

/* ---------- Reset + base ---------- */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body.oaks {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  color: var(--chalk);
  background:
    radial-gradient(circle at 50% 8%, color-mix(in srgb, #3CE2A5 calc(var(--floodlight) * 30%), transparent) 0%, transparent 40%),
    radial-gradient(circle, #0B0B0B 1px, transparent 1px) 0 0 / 8px 8px,    /* halftone 8px default (Theme R2) */
    linear-gradient(180deg, var(--pitch), var(--midnight) 60%, var(--pitch));
  background-blend-mode: normal, multiply, normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* Escalate halftone density to 4px on capable hardware (Theme R2 lock) */
@media (prefers-reduced-data: no-preference) and (min-device-memory: 4) {
  body.oaks {
    background-size: auto, 4px 4px, auto;
  }
}

/* ---------- Typography ---------- */

.oaks-marquee {
  font-family: 'Bungee', 'Impact', sans-serif;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.oaks-score-num,
.oaks-stat .oaks-num {
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: .03em;
}

/* ---------- Skip-to-content + focus ---------- */

.oaks-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 99;
  background: var(--ink-deep);
  color: var(--chalk);
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s;
}

.oaks-skip:focus {
  top: 8px;
  outline: 3px solid var(--electric);
  outline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--electric);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Shell layout ---------- */

#oaks-app {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 14px 48px;
  position: relative;
  z-index: 1;
}

.oaks-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.oaks-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--oaks-tap-min);
  padding: 8px 14px;
  background: var(--ink-deep);
  border: 2px solid var(--chalk);
  color: var(--chalk);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
}

.oaks-back:active {
  transform: translateY(1px);
}

/* ---------- HUD ---------- */

#oaks-hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ink-deep);
  border: 3px solid var(--chalk);
  border-radius: 0;                  /* comic-cell aesthetic, no soft corners */
  box-shadow: 4px 4px 0 var(--electric);
  margin-bottom: 14px;
  min-height: var(--oaks-tap-min);
}

.oaks-crest {
  width: 44px;
  height: 44px;
  background: linear-gradient(160deg, var(--electric), var(--midnight));
  border: 2px solid var(--chalk);
  display: grid;
  place-items: center;
  color: var(--chalk);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .5px;
}

.oaks-title {
  font-family: 'Bungee', 'Impact', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.1;
  color: var(--chalk);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.oaks-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  background: var(--midnight);
  border: 2px solid var(--chalk);
  color: var(--chalk);
}

.oaks-stat .oaks-num {
  font-size: 22px;
  color: var(--gold-cup);
}

.oaks-stat .oaks-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .78;
}

/* ---------- Stage ---------- */

#oaks-stage {
  background: var(--midnight);
  border: 3px solid var(--ink-deep);
  box-shadow: 4px 4px 0 var(--ink-deep);
  padding: 18px;
  margin-bottom: 14px;
  min-height: 220px;
  color: var(--chalk);
}

/* ---------- Companion housing (Lock 20: bespoke, NOT generic radial-gradient) ---------- */

/* Comic-cell panel for Maul -- rotate -1.2deg + box-shadow 4px 4px 0 + thick ink border */
.clarks-companion-housing.oaks {
  background: var(--midnight);
  transform: rotate(-1.2deg);
  box-shadow: 4px 4px 0 var(--ink-deep);
  border: 3px solid var(--ink-deep);
  min-height: 46px;                  /* HUD floor; never below (border eats 14px) */
  padding: 16px;
  position: relative;
  color: var(--chalk);
}

.clarks-companion-housing.oaks .clarks-companion-avatar {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto;
}

.clarks-companion-housing.oaks .clarks-companion-reaction {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--pitch);
}

/* Maul does NOT bob (Potato-register stillness, Lock-aligned). Override S5's bob. */
.clarks-companion-housing.oaks .clarks-companion-bob {
  animation: none !important;
}

/* Cheer one-shot -- a single comic-style jolt, no oscillation */
.clarks-companion-housing.oaks .clarks-companion-cheer {
  animation: oaks-companion-jolt .35s cubic-bezier(.2, 1.4, .4, 1) forwards;
}

@keyframes oaks-companion-jolt {
  0%   { transform: rotate(-1.2deg) translateY(0)    scale(1); }
  40%  { transform: rotate(-1.2deg) translateY(-6px) scale(1.06); }
  100% { transform: rotate(-1.2deg) translateY(0)    scale(1); }
}

/* ---------- Captain Vector mascot card -- chalk-grid background ---------- */

.oaks-mascot-card {
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(248, 246, 240, .12) 38px 39px),
    var(--pitch);
  border: 2px solid var(--chalk);
  padding: 14px;
  color: var(--chalk);
  position: relative;
}

.oaks-mascot-card .oaks-cape {
  /* lightning-split-bolt cape clip (Captain Vector signature shape) */
  clip-path: polygon(50% 0, 100% 60%, 70% 100%, 30% 100%, 0 60%);
}

.oaks-cape-snap {
  animation: oaks-cape-snap .8s cubic-bezier(.2, 1.4, .4, 1) forwards;
}

@keyframes oaks-cape-snap {
  0%   { transform: scaleY(1)    translateY(0); }
  35%  { transform: scaleY(1.18) translateY(-2px); }
  100% { transform: scaleY(1)    translateY(0); }
}

/* ---------- Maul-avatar rare-item equip layer (Oaks ladder, Lock GROW) ---------- */

.oaks-maul-avatar {
  position: relative;
  display: inline-block;
}

.oaks-maul-avatar[data-equipped="head"]::after  { content: url('/oaks/sprites/halo.svg');    position: absolute; top: -8px;  left: 50%; transform: translateX(-50%); pointer-events: none; }
.oaks-maul-avatar[data-equipped="back"]::after  { content: url('/oaks/sprites/cape.svg');    position: absolute; top: -4px;  left: 50%; transform: translateX(-50%); pointer-events: none; }
.oaks-maul-avatar[data-equipped="feet"]::after  { content: url('/oaks/sprites/boots-rare.svg'); position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); pointer-events: none; }
.oaks-maul-avatar[data-equipped="eyes"]::after  { content: url('/oaks/sprites/goggles.svg'); position: absolute; top: 22%; left: 50%; transform: translateX(-50%); pointer-events: none; }
.oaks-maul-avatar[data-equipped="arm"]::after   { content: url('/oaks/sprites/armband.svg'); position: absolute; top: 48%; right: -6px; pointer-events: none; }
.oaks-maul-avatar[data-equipped="mouth"]::after { content: url('/oaks/sprites/mouthguard.svg'); position: absolute; top: 56%; left: 50%; transform: translateX(-50%); pointer-events: none; }

/* ---------- Squad chip strip (Boots, Whistle) ---------- */

.oaks-squad-strip {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
}

.oaks-squad-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--ink-deep);
  border: 2px solid var(--chalk);
  color: var(--chalk);
  min-height: var(--oaks-tap-min);
  cursor: default;
}

.oaks-squad-chip img,
.oaks-squad-chip svg {
  width: 28px;
  height: 28px;
  display: block;
}

.oaks-squad-chip .oaks-squad-name {
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 13px;
  text-transform: uppercase;
}

/* ---------- Buttons (coach-comic register) ---------- */

.oaks-btn,
button.oaks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--oaks-tap-min);
  padding: 10px 18px;
  background: var(--electric);
  border: 3px solid var(--ink-deep);
  color: var(--ink-deep);
  box-shadow: 4px 4px 0 var(--ink-deep);
  font-family: 'Bungee', 'Impact', sans-serif;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}

.oaks-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink-deep);
}

.oaks-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.oaks-btn--ghost {
  background: var(--ink-deep);
  color: var(--chalk);
  border-color: var(--chalk);
  box-shadow: 4px 4px 0 var(--chalk);
}

/* TTS speaker button (S9 boot.js emits class="oaks-speaker"). Lock 16: tap target >=44px everywhere. */
.oaks-speaker,
button.oaks-speaker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
}

/* Answer-tile row (S9 boot.js emits class="oaks-tile" inside .oaks-tiles).
   Grid 3-up at every viewport (replaces prior flex-wrap that allowed L-shape on mobile).
   Tile floor raised to 80x88 to match Annabel benchmark (Lewis flagged 59x48). */
.oaks-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  justify-items: stretch;
  align-items: stretch;
}
.oaks-tile {
  min-height: 80px;
  min-width: 88px;
  padding: 0.6rem 1rem;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Error feedback uses --warm (amber), NEVER --crimson (Lock 6) */
.oaks-feedback--tiny-slip {
  color: var(--warm);
  border-left: 4px solid var(--warm);
  padding-left: 10px;
}

/* ---------- Scaffold + storybook stages ---------- */

#oaks-scaffold-slot,
#oaks-storybook-stage {
  background: var(--pitch);
  border: 2px solid var(--ink-deep);
  padding: 12px;
  margin-top: 12px;
}

/* ---------- Delight moment 1: Halftone POW flash ---------- */

.oaks-pow {
  position: relative;
  display: inline-block;
}

.oaks-pow::after {
  content: "";
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle, #0B0B0B 1.5px, transparent 1.5px) 0 0 / 4px 4px;
  pointer-events: none;
  opacity: var(--flashbulb);
  mix-blend-mode: screen;
  transition: opacity .08s linear;
}

/* ---------- Delight moment 2: Try-line stroke (boss-clear chalk line) ---------- */

.oaks-try-line-svg {
  width: 100%;
  height: 60px;
  display: block;
  overflow: visible;
}

.oaks-try-line-svg line {
  stroke: var(--crimson);            /* the ONE allowed use of --crimson: try-line stroke */
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 12px var(--electric));
  animation: oaks-try-line-draw 1.2s ease-out forwards;
}

@keyframes oaks-try-line-draw {
  to { stroke-dashoffset: 0; }
}

/* ---------- Delight moment 3: Rank-up shockwave (rare-item equip) ---------- */

.oaks-rank-up {
  display: inline-block;
  transform-origin: 50% 50%;
  animation: oaks-rank-slam .7s cubic-bezier(.2, 1.4, .4, 1) forwards;
}

@keyframes oaks-rank-slam {
  0% {
    transform: scale(0) rotate(-8deg);
    box-shadow: 0 0 0 0 var(--electric);
  }
  60% {
    transform: scale(1.4) rotate(4deg);
    box-shadow: 0 0 0 40px transparent;
  }
  100% {
    transform: scale(1) rotate(0);
    box-shadow: 0 0 0 0 transparent;
  }
}

/* ---------- Try-Line scaffold art swap (Ideas R2 cooperation with S9 boot) ---------- */
/* When S9 boot adds .try-line class to #oaks-scaffold-slot's bar-model element,
   this swaps the bar-model art to a rugby pitch -- pitch lines as bar segments,
   ball SVG at answer position. ZERO extra shard cost. */

.clarks-scaffold-bar.try-line {
  background:
    linear-gradient(90deg, var(--chalk) 1px, transparent 1px) repeat-x bottom,
    linear-gradient(0deg, var(--pitch), color-mix(in srgb, var(--pitch), var(--midnight)));
  background-size: 80px 100%, auto;
  background-position: bottom, top;
}

.clarks-scaffold-bar.try-line .answer-pos {
  position: relative;
}

.clarks-scaffold-bar.try-line .answer-pos::before {
  content: url('/oaks/sprites/boots.svg');     /* the talking ball at the answer position */
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: block;
  pointer-events: none;
}

/* ---------- 30deg motion-line streaks (ambient, SOLUTION sec.2.2 ambient lock) ---------- */

.oaks-motion-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(60deg,
      transparent 0 12px,
      rgba(60, 226, 165, .04) 12px 14px,
      transparent 14px 26px);
  opacity: calc(.4 + var(--floodlight) * .4);
  mix-blend-mode: screen;
}

/* ---------- Stadium-corner brighten (floodlight monotonic) ---------- */

.oaks-corner-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--gold-cup) calc(var(--floodlight) * 35%), transparent) 0%, transparent 30%),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--gold-cup) calc(var(--floodlight) * 25%), transparent) 0%, transparent 30%);
  mix-blend-mode: screen;
  z-index: 0;
}

/* ---------- Storybook (Comic Panel) framing helper ---------- */

.oaks-comic-panel {
  background: var(--chalk);
  border: 4px solid var(--ink-deep);
  box-shadow: 6px 6px 0 var(--ink-deep);
  padding: 14px;
  color: var(--ink-deep);
}

.oaks-comic-panel .oaks-caption {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  margin-top: 8px;
  color: var(--ink-deep);
}

/* ---------- Small-screen tuning (iPhone 13 Pro 390x844 primary, Lock 11) ---------- */

@media (max-width: 420px) {
  #oaks-app { padding: 12px 10px 40px; }
  .oaks-title { font-size: 16px; }
  .oaks-stat .oaks-num { font-size: 20px; }
  #oaks-stage { padding: 14px; min-height: 200px; }
  .oaks-btn { padding: 10px 14px; }
}

/* ---------- End of file: Lock 25 verbatim reduced-motion block (SOLUTION sec.2.4) ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  path[stroke-dasharray] { stroke-dashoffset: 0 !important; }
  .achieve::before, .companion-housing::before { animation-play-state: paused !important; }
}