/* ============================================================
   MISSION / "THE WALK" — the interactive section on play.html
   Tokens, type scale and layout primitives all come from
   style.css. This file only adds the stage and its scenery.
   ============================================================ */
:root{ --figH:280px; --baseY:80px; }

/* JetBrains Mono carries no Thai glyphs, so every .label with a data-th
   goes weedy in Thai. Worth lifting into style.css for the whole site. */
html[data-lang="th"] .label{ font-family:var(--f-body); font-size:12.5px;
  letter-spacing:.015em; line-height:1.55; font-weight:500; text-transform:none; }

html[data-lang="th"] .walk-intro .lead,
html[data-lang="th"] .cap-item p,
html[data-lang="th"] .caption,
html[data-lang="th"] .walk-outro-body p{
  line-height:1.72;
  word-break:normal;
  overflow-wrap:break-word;
}

/* ── stage ──────────────────────────────────────── */
.stage{position:relative;width:100%;height:clamp(440px,58vh,660px);
  overflow:hidden;background:#141210;cursor:grab;touch-action:pan-y;
  overscroll-behavior-inline:contain;
  user-select:none;-webkit-user-select:none}
.stage.is-dragging{cursor:grabbing}
.shake{position:absolute;inset:-16px;will-change:transform}

.layer{position:absolute;inset:0;opacity:0;will-change:opacity;pointer-events:none}
.layer.front{z-index:9}
.wash{position:absolute;inset:0}
.props{position:absolute;top:-12%;bottom:var(--baseY);left:-45%;width:190%;
  will-change:transform}
.props.tall{bottom:0;top:0}

[data-zone="0"] .wash{background:linear-gradient(180deg,#FCFBF8 0%,#F0EDE6 74%)}
[data-zone="1"] .wash{background:linear-gradient(180deg,#FFFAE6 0%,#F3E3BE 100%)}
[data-zone="2"] .wash{background:linear-gradient(180deg,#170602 0%,#7A1E06 32%,#D2490F 66%,#FFAE49 100%)}
[data-zone="3"] .wash{background:linear-gradient(180deg,#B9AE9A 0%,#8A7A62 42%,#3E362C 100%)}
[data-zone="4"] .wash{background:linear-gradient(180deg,#F4F8EF 0%,#D6E7C9 100%)}
[data-zone="5"] .wash{background:linear-gradient(180deg,#12161D 0%,#262D38 50%,#3E4650 100%)}
[data-zone="6"] .wash{background:
  radial-gradient(125% 108% at 100% 44%,#FFFDF4 0%,#FFE9A8 26%,#FBD98B 46%,#F6E7C8 66%,#F2EFE9 88%)}

/* ── scenery ────────────────────────────────────── */
.hill{position:absolute;bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0}
.tree{position:absolute;bottom:0;width:7px;background:#5A6B49;border-radius:3px;
  transform-origin:bottom center}
.tree::after{content:"";position:absolute;left:50%;bottom:78%;width:104px;height:108px;
  transform:translateX(-50%);border-radius:54% 46% 42% 58%/58% 56% 44% 42%;background:#6E8C58;
  box-shadow:-42px 26px 0 -14px #7E9A66,40px 18px 0 -18px #7E9A66,4px -30px 0 -22px #6E8C58}
.dot{position:absolute;border-radius:50%;pointer-events:none}

/* the sticky-note wall is drawn once to a canvas and tiled — 2 nodes, not 2000 */
.wall{position:absolute;inset:0;background-repeat:repeat}
.note{position:absolute;font-family:var(--f-body);font-weight:600;color:#3B3320;
  padding:11px 11px 0;line-height:1.16;overflow:hidden;transform-origin:50% 0;
  box-shadow:3px 9px 18px rgba(0,0,0,.22)}
.note::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:rgba(0,0,0,.05)}

/* fire */
.flame{position:absolute;bottom:0;border-radius:48% 52% 44% 56%/78% 78% 22% 22%;
  transform-origin:bottom center}
.smoke{position:absolute;border-radius:50%;
  background:radial-gradient(closest-side,rgba(24,12,6,.7),transparent 72%)}
.heat{position:absolute;inset:0;mix-blend-mode:screen;
  background:radial-gradient(58% 62% at 50% 100%,rgba(255,168,64,.42),transparent 72%)}

/* collapse */
.tower{position:absolute;bottom:0;background:#7C7160;transform-origin:bottom center;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)}
.tower i{position:absolute;inset:9px;
  background:repeating-linear-gradient(90deg,rgba(20,14,8,.62) 0 9px,transparent 9px 22px),
             repeating-linear-gradient(0deg,rgba(20,14,8,.62) 0 9px,transparent 9px 24px)}
.slab{position:absolute;background:#544B3E}
.dust{position:absolute;border-radius:50%;
  background:radial-gradient(closest-side,rgba(192,178,154,.5),transparent 74%)}

/* storm */
.rain{position:absolute;inset:-18% -28%;
  background:repeating-linear-gradient(100deg,rgba(255,255,255,.5) 0 1.5px,transparent 1.5px 22px),
             repeating-linear-gradient(103deg,rgba(255,255,255,.3) 0 1px,transparent 1px 37px);
  opacity:.3}
.bolt{position:absolute;inset:0;background:#fff;opacity:0;mix-blend-mode:screen}
.vignette{position:absolute;inset:0;
  background:radial-gradient(88% 74% at 50% 56%,transparent 36%,rgba(0,0,0,.58) 100%)}
.rays{position:absolute;inset:-22% -12%;
  background:repeating-conic-gradient(from 0deg at 108% 46%,
    rgba(255,246,214,.6) 0deg 2deg,transparent 2deg 7.5deg);
  mix-blend-mode:screen;opacity:.55}
.wind{position:absolute;inset:0;opacity:0;z-index:8;pointer-events:none}

/* ── track ──────────────────────────────────────── */
.trackSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;z-index:5}
.trackSvg path{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round;
  transition:stroke .4s linear}
.stage.is-dark .trackSvg path{stroke:#F6F3ED}
.tip{fill:var(--ink);transition:fill .4s linear}
#riftFill{fill:#14100A;stroke:none}
.stage.is-dark #riftFill{fill:#0E0B07}
.stage.is-dark .tip{fill:#F6F3ED}

/* ── labels ─────────────────────────────────────── */
/* .shake extends 16px past the stage to absorb motion. Keep the endpoint
   labels inside the visible stage instead of letting that inset clip them. */
.endlab{position:absolute;top:calc(clamp(14px,4vh,40px) + 16px);font-family:var(--f-display);font-weight:800;
  font-size:clamp(20px,2.6vw,38px);letter-spacing:-.035em;text-transform:uppercase;
  line-height:.92;pointer-events:none;z-index:10;transition:color .4s linear}
html[data-lang="th"] .endlab{letter-spacing:-.015em;line-height:1.06;text-transform:none}
.endlab.start{left:calc(clamp(10px,3vw,44px) + 16px)}
.endlab.success{right:calc(clamp(10px,3vw,44px) + 16px)}
.stage.is-dark .endlab{color:#F6F3ED}
.halo{position:absolute;inset:-45% -25%;border-radius:50%;opacity:0;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,211,110,.95),transparent 70%)}

/* ── walker ─────────────────────────────────────── */
.walker{position:absolute;left:0;bottom:0;width:0;height:0;z-index:6;
  cursor:grab;touch-action:none}
.walker:focus-visible .inner{outline:2px solid var(--accent);outline-offset:10px}
.inner{position:absolute;bottom:0;left:calc(var(--figH)*-.193);
  width:calc(var(--figH)*.386);height:var(--figH);transform-origin:50% 100%}
.sprite{position:absolute;inset:0;
  background-image:url(../images/mission/walk-cycle-sheet.png);
  background-size:600% 100%;background-repeat:no-repeat;background-position:0 0;
  will-change:background-position,transform,filter}
.shadow{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  width:calc(var(--figH)*.34);height:9px;border-radius:50%;
  background:rgba(0,0,0,.32);filter:blur(4px)}
.youlab{position:absolute;bottom:calc(var(--figH)*.45);left:calc(var(--figH)*.30);
  font-family:var(--f-display);font-weight:800;font-size:clamp(15px,1.8vw,26px);
  letter-spacing:-.035em;text-transform:uppercase;line-height:.92;
  white-space:nowrap;pointer-events:none;transition:color .4s linear}
html[data-lang="th"] .youlab{letter-spacing:-.015em;text-transform:none}
.stage.is-dark .youlab{color:#F6F3ED}
.fxlayer{position:absolute;inset:0;z-index:8;pointer-events:none}

/* ── readout ────────────────────────────────────── */
.readout{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;
  margin-top:20px;border-top:1px solid var(--line);padding-top:16px;min-height:104px}
.zonetag{margin:0 0 9px;color:var(--accent)}
.caption{margin:0}
.bar{position:relative;height:1px;background:var(--line);margin-top:12px;width:clamp(120px,14vw,200px)}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--ink);width:0}
.hint{margin:14px 0 0;transition:opacity .5s linear}
.hint.gone{opacity:0}

@media (max-width:720px){
  .stage{height:clamp(340px,52svh,440px)}
  .endlab{font-size:20px;top:28px}
  .endlab.start{left:30px} .endlab.success{right:30px}
  .m-title{max-width:12ch}
  .readout{flex-direction:column;gap:8px}
  .bar{width:100%}
  .sect-head{margin-bottom:30px;padding-bottom:20px}
  .hint{margin-top:20px}
  html[data-lang="th"] .walk-intro .lead{font-size:clamp(17px,5vw,21px)}
  html[data-lang="th"] .cap-item h3{line-height:1.3;margin-bottom:10px}
  html[data-lang="th"] .readout{min-height:176px}
}

/* ── the invitation: an arrow that breathes until you touch it ── */
.nudge{position:absolute;z-index:11;display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);pointer-events:none;transition:opacity .5s var(--ease,ease)}
.nudge svg{width:34px;height:10px;overflow:visible}
.stage.touched .nudge{opacity:0}
@keyframes nudge-slide{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
.nudge .arrow{animation:nudge-slide 1.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .nudge .arrow{animation:none} }

/* ── the readout keeps its own height so the layout never jumps ── */
.readout{min-height:118px}
@media (max-width:900px){ .readout{min-height:140px} }

/* ── play.html layout ─────────────────────────────────────────── */
.walk-intro{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap);
  align-items:end; }
.walk-intro .lead{ grid-column:span 7; max-width:none;
  font-size:clamp(18px,1.75vw,28px); line-height:1.42; }
.walk-note{ grid-column:9 / span 4; margin:0; }

.walk-outro{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap);
  align-items:start; }
.walk-outro h3{ grid-column:span 6; max-width:17ch; margin:0; }
.walk-outro-body{ grid-column:8 / span 5; }
.walk-outro-body p{ margin:0 0 1.1em; color:var(--muted);
  font-size:clamp(15px,1.1vw,17px); line-height:1.62; max-width:44ch; }
.walk-cta{ display:inline-block; color:var(--accent);
  border-bottom:1px solid currentColor; padding-bottom:3px; }
.walk-cta:hover{ opacity:.7; }

@media (max-width:900px){
  .walk-intro .lead, .walk-note,
  .walk-outro h3, .walk-outro-body{ grid-column:1 / -1; }
  .walk-note{ margin-top:10px; }
  .walk-outro h3{ margin-bottom:18px; max-width:22ch; }
}