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

/* public/ngaia/style.css
   Ngaia room -- Sylvanian woodland warm, dusk -> golden-hour.
   Owns: .ngaia-* selectors AND the .clarks-companion-housing.ngaia modifier
   (which targets S5's housing wrapper). Sets root tokens per SOLUTION sec.2.1
   Locks honoured: 6 (no red; --warm forbids red), 8 (continuous-driver tokens
   --lantern monotonic + --ember per-correct pulse), 11 (mobile-first iPhone 13
   Pro), 13 (variant extends Autumn + Annabel, never invents), 16 (>=80px tap
   targets), 20 (companion housing bespoke clip-path + radial-gradient),
   25 (prefers-reduced-motion verbatim block at end).
*/

:root.ngaia {
  --moss: #6B8E5A;
  --bracken: #C97B4A;
  --bloom: #F4A6C9;
  --bark: #4A3728;
  --cream-pale: #FAF3E3;
  --honey: #E8B547;
  --dapple: rgba(245,222,179,.4);
  --lantern: 0;
  --ember: 0;
  --warm: #FBBF24;          /* Lock 6: named to forbid red */

  --ngaia-radius: 22px;
  --ngaia-radius-sm: 14px;
  --ngaia-tap-min: 80px;    /* Lock 16: Ngaia tap-target floor */
  --ngaia-shadow-card: 0 10px 24px rgba(74,55,40,.18), 0 2px 0 rgba(74,55,40,.08);
}

body.ngaia {
  background:
    radial-gradient(900px 600px at 12% -8%, color-mix(in srgb, #FFE9A8 calc(var(--lantern)*60%), transparent) 0%, transparent 55%),
    radial-gradient(800px 600px at 95% 5%, rgba(244,166,201,.18) 0%, transparent 50%),
    linear-gradient(180deg, #2A2010 calc(100% - var(--lantern)*100%), var(--cream-pale) 100%);
  filter: brightness(calc(1 + var(--ember)*.08)) saturate(calc(1 + var(--ember)*.12));
  transition: filter 1.6s cubic-bezier(.2,.9,.3,1);
  background-attachment: fixed;
  color: var(--bark);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { margin: 0; padding: 0; min-height: 100%; }

/* Lock 20: Companion housing -- BESPOKE clip-path + bark bracket.
   Targets S5's wrapper when the .ngaia modifier is applied by S8 boot. */
.clarks-companion-housing.ngaia {
  background: radial-gradient(circle at 35% 30%, #FAF3E3 0%, #E8B547 100%);
  clip-path: ellipse(48% 52% at 50% 50%);
  /* SVG bark bracket inlined as a child <svg> with stroke:#4A3728; stroke-width:3 */
  min-height: 52px;          /* Studio R2: HUD floor; clip-path eats 20% of radius */
  padding: 18px;
  position: relative;
}

.clarks-companion-housing.ngaia .clarks-companion-bob {
  animation: clarks-bob-ngaia 2.8s ease-in-out infinite;
}
@keyframes clarks-bob-ngaia {
  0%,100% { transform: translateY(0)    rotate(-2deg); }
  50%     { transform: translateY(-4px) rotate(2deg); }
}

/* Master Hazel housing: white card with bark-bottom shadow + wool-grain overlay.
   The wool-grain feTurbulence is inlined as an SVG ::before pseudo-element. */
.ngaia-mascot-card {
  background: var(--cream-pale);
  box-shadow: 0 6px 0 var(--bark), 0 10px 24px rgba(74,55,40,.16);
  border-radius: var(--ngaia-radius);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.ngaia-mascot-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.29 0 0 0 0 0.22 0 0 0 0 0.16 0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23w)'/></svg>");
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.ngaia-mascot-card > * { position: relative; z-index: 1; }

/* Skip-to-content (a11y) */
.ngaia-skip {
  position: absolute; left: 8px; top: -80px; z-index: 999;
  background: var(--bark); color: var(--cream-pale);
  padding: 14px 22px; border-radius: var(--ngaia-radius-sm);
  font-weight: 700; text-decoration: none;
  transition: top .18s ease-out;
  min-height: 44px; display: inline-flex; align-items: center;
  font-family: 'Quicksand', system-ui, sans-serif;
}
.ngaia-skip:focus { top: 10px; }

/* App shell -- mobile-first iPhone 13 Pro primary (Lock 11) */
.ngaia-app {
  max-width: 880px;
  margin: 0 auto;
  padding: 16px 14px 80px;
  position: relative;
  z-index: 1;
}

/* HUD */
.ngaia-hud {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--cream-pale);
  border: 3px solid #fff;
  border-radius: var(--ngaia-radius);
  padding: 12px 14px;
  box-shadow: var(--ngaia-shadow-card);
}
.ngaia-hud h1 {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 22px; margin: 0; color: var(--bracken);
  font-weight: 700; line-height: 1.1;
}
.ngaia-hud .ngaia-hud-sub {
  font-size: 14px; color: var(--bark); opacity: .8;
  font-family: 'Nunito', system-ui, sans-serif;
}
.ngaia-hud .ngaia-hud-spacer { flex: 1 1 24px; }
.ngaia-hud .stat .num {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--bracken);
}

/* Generic Ngaia button -- Lock 16: 80px floor */
.ngaia-btn {
  min-height: var(--ngaia-tap-min);
  min-width: var(--ngaia-tap-min);
  padding: 18px 24px;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 20px; font-weight: 700;
  color: var(--cream-pale);
  background: linear-gradient(180deg, var(--honey), var(--bracken));
  border: 3px solid var(--cream-pale);
  border-radius: var(--ngaia-radius);
  box-shadow: var(--ngaia-shadow-card);
  cursor: pointer;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.ngaia-btn:active { transform: translateY(2px); box-shadow: 0 4px 12px rgba(74,55,40,.16); }
.ngaia-btn[aria-pressed="true"] { background: linear-gradient(180deg, var(--moss), #3E5A2A); }
.ngaia-btn.ngaia-btn-soft {
  color: var(--bark);
  background: var(--cream-pale);
}

/* Stage -- maths question + answer tiles */
.ngaia-stage {
  margin-top: 18px;
  background: var(--cream-pale);
  border: 3px solid #fff;
  border-radius: var(--ngaia-radius);
  padding: 22px 18px;
  box-shadow: var(--ngaia-shadow-card);
  min-height: 240px;
}
.ngaia-stage .ngaia-prompt {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 32px; line-height: 1.2;
  color: var(--bracken);
  font-weight: 700;
  margin: 0 0 18px;
  text-align: center;
}
.ngaia-stage .ngaia-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.ngaia-tile {
  min-height: var(--ngaia-tap-min);
  padding: 20px;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 28px; font-weight: 700;
  color: var(--bark);
  background: #fff;
  border: 3px solid #C9A887;
  border-radius: var(--ngaia-radius);
  box-shadow: var(--ngaia-shadow-card);
  cursor: pointer;
  transition: transform .12s ease-out, border-color .12s ease-out;
}
.ngaia-tile:focus-visible { outline: 4px solid var(--honey); outline-offset: 3px; }
.ngaia-tile.is-correct { border-color: var(--moss); background: #EDF6E2; }
/* Lock 6: "tiny slip" framing, NO red. The wrong-tile uses warm bracken, never red. */
.ngaia-tile.is-wrong { border-color: var(--warm); background: #FFF4D6; }

/* Hint card */
.ngaia-hint-card {
  margin-top: 16px;
  background: linear-gradient(180deg, #FFFFFF, var(--cream-pale));
  border: 3px solid #C9A887;
  border-radius: var(--ngaia-radius);
  padding: 16px;
  box-shadow: var(--ngaia-shadow-card);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.ngaia-hint-card[hidden] { display: none; }
.ngaia-hint-card .ngaia-hint-text {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 22px; line-height: 1.3; font-weight: 600;
  color: var(--bark);
  margin: 0;
}
.ngaia-listen-btn {
  min-height: var(--ngaia-tap-min); min-width: var(--ngaia-tap-min);
  padding: 12px 18px;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 18px; font-weight: 700;
  color: var(--cream-pale);
  background: var(--bark);
  border: 3px solid var(--cream-pale);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--ngaia-shadow-card);
}

/* Storybook stage mount */
.ngaia-storybook-stage {
  margin-top: 18px;
  min-height: 0;
}
.ngaia-storybook-stage:not(:empty) {
  background: var(--cream-pale);
  border: 3px solid #fff;
  border-radius: var(--ngaia-radius);
  padding: 12px;
  box-shadow: var(--ngaia-shadow-card);
  min-height: 320px;
}

/* Trail Run tile + mount */
.ngaia-trail-tile {
  margin-top: 18px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--moss), #3E5A2A);
  color: var(--cream-pale);
  border: 3px solid var(--cream-pale);
  border-radius: var(--ngaia-radius);
  min-height: var(--ngaia-tap-min);
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 22px; font-weight: 700;
  cursor: pointer;
  box-shadow: var(--ngaia-shadow-card);
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}
.ngaia-trail-mount {
  margin-top: 16px;
  min-height: 0;
}
.ngaia-trail-mount:not(:empty) {
  min-height: 60vh;
  background: var(--cream-pale);
  border: 3px solid #fff;
  border-radius: var(--ngaia-radius);
  padding: 8px;
  box-shadow: var(--ngaia-shadow-card);
}

/* Decade-anchor strip (existing prior asset at /ngaia/sprites/decade-anchors.svg) */
.ngaia-decade {
  margin-top: 14px;
  display: flex; align-items: center; gap: 8px; justify-content: center;
  opacity: 0;
  transition: opacity .4s ease-out;
}
.ngaia-decade.is-visible { opacity: 1; }
.ngaia-decade svg, .ngaia-decade img { width: 56px; height: 56px; }

/* Status footer */
.ngaia-status {
  margin-top: 18px; text-align: center;
  font-size: 14px; color: var(--bark); opacity: .75;
  font-family: 'Nunito', system-ui, sans-serif;
}

/* Focus ring */
:focus-visible {
  outline: 4px solid var(--honey);
  outline-offset: 3px;
  border-radius: var(--ngaia-radius-sm);
}

/* Ambient leaf sway -- leaf-1/2/3.svg drift across the dusk gradient */
.ngaia-leaf {
  position: absolute;
  width: 36px;
  height: 36px;
  opacity: 0.55;
  pointer-events: none;
  animation: ngaia-sway 8s ease-in-out infinite;
}
.ngaia-leaf.leaf-1 { top: 8%;  left: 6%;  animation-delay: 0s;   }
.ngaia-leaf.leaf-2 { top: 24%; right: 9%; animation-delay: 1.8s; }
.ngaia-leaf.leaf-3 { top: 62%; left: 12%; animation-delay: 3.2s; }
@keyframes ngaia-sway {
  0%,100% { transform: translateX(0) rotate(-6deg); }
  50%     { transform: translateX(14px) rotate(8deg); }
}

/* Delight moment 1: dapple-shift on correct -- --ember drives this via body filter
   (declared above). The companion-housing also gets a brief honey ring when --ember pulses. */
.clarks-companion-housing.ngaia::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 var(--honey);
  opacity: calc(var(--ember));
  transition: opacity 0.4s ease-out;
}

/* Delight moment 2: boss-clear butterfly -- inline SVG animateMotion lives in
   the room boot. The CSS hook here makes the butterfly visible above other
   surfaces and provides a fade-out class. */
.ngaia-boss-butterfly {
  position: fixed;
  left: 0; top: 0;
  width: 48px; height: 48px;
  z-index: 50;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease-out;
}
.ngaia-boss-butterfly.is-gone { opacity: 0; }

/* Delight moment 3: streak=3 acorn rain -- 12 acorn nodes, stagger 0.08s */
.ngaia-acorn-rain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.ngaia-acorn-rain .ngaia-acorn {
  position: absolute;
  top: -40px;
  width: 24px;
  height: 24px;
  animation: ngaia-acorn-fall 1.8s ease-in forwards;
}
.ngaia-acorn-rain .ngaia-acorn:nth-child(1)  { left:  6%; animation-delay: 0.00s; }
.ngaia-acorn-rain .ngaia-acorn:nth-child(2)  { left: 14%; animation-delay: 0.08s; }
.ngaia-acorn-rain .ngaia-acorn:nth-child(3)  { left: 22%; animation-delay: 0.16s; }
.ngaia-acorn-rain .ngaia-acorn:nth-child(4)  { left: 30%; animation-delay: 0.24s; }
.ngaia-acorn-rain .ngaia-acorn:nth-child(5)  { left: 38%; animation-delay: 0.32s; }
.ngaia-acorn-rain .ngaia-acorn:nth-child(6)  { left: 46%; animation-delay: 0.40s; }
.ngaia-acorn-rain .ngaia-acorn:nth-child(7)  { left: 54%; animation-delay: 0.48s; }
.ngaia-acorn-rain .ngaia-acorn:nth-child(8)  { left: 62%; animation-delay: 0.56s; }
.ngaia-acorn-rain .ngaia-acorn:nth-child(9)  { left: 70%; animation-delay: 0.64s; }
.ngaia-acorn-rain .ngaia-acorn:nth-child(10) { left: 78%; animation-delay: 0.72s; }
.ngaia-acorn-rain .ngaia-acorn:nth-child(11) { left: 86%; animation-delay: 0.80s; }
.ngaia-acorn-rain .ngaia-acorn:nth-child(12) { left: 94%; animation-delay: 0.88s; }
@keyframes ngaia-acorn-fall {
  0%   { transform: translateY(0)        rotate(0deg);  opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh)    rotate(420deg); opacity: 0.9; }
}

/* Companion reaction bubble -- text channel Lewis G4b reads */
.clarks-companion-reaction {
  font-family: 'Quicksand', system-ui, sans-serif;
  font-size: 16px; font-weight: 600;
  color: var(--bark);
  background: var(--cream-pale);
  border: 2px solid var(--honey);
  border-radius: 16px;
  padding: 8px 14px;
  margin-top: 8px;
  min-height: 36px;
  box-shadow: 0 4px 0 var(--bark);
  word-wrap: break-word;
}

/* Larger viewport -- still mobile-first. Tile grid is already 3-up at every
   viewport (set above); this rule is now redundant but kept harmless for
   backwards compat with any selector relying on this media block. */
@media (min-width: 760px) {
  .ngaia-stage .ngaia-tiles { grid-template-columns: 1fr 1fr 1fr; }
  .ngaia-hud h1 { font-size: 26px; }
}

/* Lock 25: prefers-reduced-motion verbatim block (mandatory, end-of-file). */
@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; }
}


/* fix-v3 -- HUD avatar dimensions + locked state */
#ngaia-mascot-card .clarks-companion-avatar {
  width: 56px;
  height: 56px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto 6px;
}

.ngaia-sidekick-chip .clarks-companion-avatar {
  width: 36px;
  height: 36px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto 2px;
}

.ngaia-sidekick-chip.locked .clarks-companion-avatar {
  filter: grayscale(1) opacity(0.45);
}