/* A New Page — shared program styles.
   RESTYLE 2026-06-12: the legacy token layer now maps onto design/anp.css
   tokens (every consumer page links anp.css after this file). Selectors are
   unchanged so all page JS keeps working. THE LAW: world energy in the
   chrome, calm cream under every story word. */
:root{--paper:var(--anp-paper);--paper-card:#FFFFFF;--ink:var(--anp-ink);--ink-2:var(--anp-ink-soft);--muted:var(--anp-ink-soft);--star:var(--anp-gold);--star-deep:var(--anp-warn-ink);--sage:var(--anp-violet);--sage-deep:var(--anp-violet-deep);--night-1:var(--anp-world-deep);--line:rgba(38,34,28,.12);--shadow-sm:var(--anp-shadow);--display:var(--anp-font-display);--body:var(--anp-font-ui);
--read-bg:var(--anp-cream);/* dyslexia-considerate cream — anp reading surface */}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:640px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;margin:0}
nav{border-bottom:1px solid var(--line);background:var(--paper)}
nav .r{max-width:1000px;margin:0 auto;display:flex;align-items:center;padding:13px 16px;gap:12px}
.brand{font-family:var(--display);font-weight:700;font-size:1.08rem;display:flex;gap:8px;align-items:center;min-height:var(--anp-tap);text-decoration:none;color:var(--ink)}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--star);box-shadow:0 0 0 4px rgba(232,163,61,.25)}
nav .sp{margin-left:auto}
nav a.menu{display:inline-flex;align-items:center;min-height:var(--anp-tap);color:var(--muted);text-decoration:none;font-weight:600;font-size:.88rem;margin-left:14px}

/* segment header bar — band-aware world chrome (timer lives here, never under words) */
.seg-bar{position:sticky;top:0;z-index:5;background:radial-gradient(120% 90% at 85% -10%, var(--anp-world-glow), transparent 60%),linear-gradient(160deg,var(--anp-world-base),var(--anp-world-deep));color:#fff;border-radius:0 0 var(--anp-radius-sm) var(--anp-radius-sm);padding:12px 16px;display:flex;align-items:center;gap:12px}
.seg-bar .num{background:var(--anp-world-accent);color:var(--anp-world-accent-ink);font-weight:800;border-radius:999px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-family:var(--anp-font-display)}
.seg-bar .nm{font-weight:700;font-size:1rem;line-height:1.2}
.seg-bar .nm small{display:block;color:rgba(255,255,255,.72);font-weight:600;font-size:.74rem}
.seg-bar .clock{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800;font-size:1.25rem;color:var(--anp-world-accent)}
.seg-bar .clock.over{color:#ff9d8a}
/* journey-trail dots */
.seg-dots{display:flex;gap:5px;justify-content:center;margin:10px 0 2px}
.seg-dots i{width:8px;height:8px;border-radius:50%;background:rgba(38,34,28,.18)}
.seg-dots i.on{background:var(--anp-world-accent);box-shadow:0 0 0 3px var(--anp-world-glow)}
.seg-dots i.done{background:var(--anp-world-base)}

/* parent script */
.script{background:var(--paper-card);border:1px solid var(--line);border-left:4px solid var(--sage);border-radius:14px;padding:16px 18px;margin-top:14px}
.script .k{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--sage-deep)}
.script p{margin:9px 0 0;font-size:1.05rem;color:var(--ink)}
.script p.say{font-weight:600}
.script p.say::before{content:"“ ";color:var(--star-deep);font-family:var(--display)}
.script p.say::after{content:" ”";color:var(--star-deep);font-family:var(--display)}
/* "For the parent — how this works" — one quiet button per screen instead of
   repeated instructions on every page (Joel note 2026-06-12) */
.phelp{margin-top:16px;text-align:center}
.phelp-btn{background:none;border:1px solid var(--line);border-radius:999px;min-height:var(--anp-tap);padding:8px 18px;font-family:inherit;font-size:.82rem;font-weight:700;color:var(--muted);cursor:pointer}
.phelp-btn:active{transform:scale(.98)}
.phelp-card{background:var(--paper-card);border:1px solid var(--line);border-left:4px solid var(--sage);border-radius:14px;padding:14px 16px;margin-top:10px;text-align:left}
.phelp-card p{margin:0;font-size:.92rem;color:var(--ink-2);line-height:1.55}

.correction{background:var(--anp-warn-bg);border:1px solid rgba(244,183,63,.55);border-radius:var(--anp-radius-sm);padding:11px 14px;margin-top:10px;font-size:.95rem;color:var(--anp-warn-ink)}
.correction b{color:var(--anp-warn-ink)}
.donot{background:rgba(179,64,47,.06);border:1px solid rgba(179,64,47,.25);border-radius:var(--anp-radius-sm);padding:10px 14px;margin-top:10px;font-size:.92rem;color:#7a2d1c}

/* child-facing stimulus card — kitchen-table huge, serene anp reading surface */
.stim{background:var(--read-bg);border:1px solid var(--line);border-radius:var(--anp-radius);box-shadow:var(--shadow-sm);margin-top:14px;padding:26px 16px;text-align:center;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-user-select:none}
.stim .big{font-family:var(--anp-font-read);font-weight:700;letter-spacing:var(--anp-letterspace);color:var(--anp-ink);font-size:clamp(64px,22vw,130px);line-height:1.05}
.stim .big.word{font-size:clamp(40px,14vw,92px);letter-spacing:var(--anp-letterspace);word-spacing:var(--anp-wordspace)}
.stim .heart::after{content:" ♥";color:#c95b4d;font-size:.5em;vertical-align:super}
.stim .hint{color:var(--muted);font-size:.85rem;font-weight:600;margin-top:10px}
.stim .count{position:absolute;top:10px;right:16px;color:var(--muted);font-size:.8rem;font-weight:700}
.stim{position:relative}
.say-btn{display:inline-flex;align-items:center;gap:7px;min-height:var(--anp-tap);background:var(--anp-violet);color:#fff;border:none;border-radius:999px;padding:9px 18px;font-weight:700;font-family:inherit;font-size:.95rem;cursor:pointer;margin-top:14px}
.say-btn.alt{background:var(--anp-gold);color:var(--anp-gold-ink)}
.say-btn:active{transform:scale(.97)}

/* ✓ / ✗ marking — anp semantics: color + icon, never hue alone */
.markrow{display:flex;gap:10px;margin-top:12px}
.markrow button{flex:1;min-height:var(--anp-tap);border:none;border-radius:var(--anp-radius-sm);padding:16px 0;font-size:1.5rem;font-weight:800;font-family:inherit;cursor:pointer}
.mk-yes{background:rgba(30,122,70,.12);color:var(--anp-success);border:2px solid rgba(30,122,70,.45)!important}
.mk-no{background:rgba(179,64,47,.08);color:var(--anp-danger);border:2px solid rgba(179,64,47,.35)!important}
.mk-yes:active{background:var(--anp-success);color:#fff}
.mk-no:active{background:var(--anp-danger);color:#fff}
.misskind{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.misskind button{flex:1;min-width:90px;min-height:var(--anp-tap);border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 8px;font-weight:700;font-size:.82rem;font-family:inherit;color:var(--ink-2);cursor:pointer}
.misskind button.on{background:var(--anp-world-base);color:#fff;border-color:var(--anp-world-base)}

/* story reading — the serene anp-read surface; the spacing dial does the dyslexia work */
.story{background:var(--read-bg);border:1px solid var(--line);border-radius:var(--anp-radius);padding:22px 18px;margin-top:14px;box-shadow:var(--shadow-sm)}
.story .ttl{font-family:var(--display);font-size:1.3rem;text-align:center;margin-bottom:10px}
.story p.line{font-family:var(--anp-font-read);font-size:clamp(20px,5.6vw,28px);line-height:var(--anp-lineheight);letter-spacing:var(--anp-letterspace);word-spacing:var(--anp-wordspace);margin:10px 0;color:var(--anp-ink)}
.story .w{cursor:pointer;border-radius:6px;padding:1px 3px}
.story .w.miss{background:rgba(179,64,47,.18);box-shadow:inset 0 -2px 0 var(--anp-danger)}
.story .tapnote{color:var(--muted);font-size:.85rem;font-weight:600;text-align:center;margin-top:8px}

/* generic */
.card{background:var(--paper-card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-top:14px}
.card .k{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--sage-deep)}
.btn{display:inline-block;background:var(--anp-gold);color:var(--anp-gold-ink);border:none;border-radius:999px;min-height:var(--anp-tap);padding:14px 28px;font-weight:800;font-size:1.05rem;font-family:inherit;cursor:pointer;text-decoration:none;text-align:center}
.btn.full{display:block;width:100%;margin-top:16px}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink-2)}
.btn:active{transform:translateY(1px)}
.pill{display:inline-block;background:rgba(104,68,163,.1);color:var(--anp-violet-deep);border-radius:999px;padding:3px 12px;font-weight:700;font-size:.8rem}
.pill.warn{background:var(--anp-warn-bg);color:var(--anp-warn-ink)}
.subnote{color:var(--muted);font-size:.86rem;margin-top:8px}
.center{text-align:center}
.chain{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.chain span{background:#fff;border:1.5px solid var(--line);border-radius:var(--anp-radius-sm);padding:8px 14px;font-family:var(--anp-font-read);font-weight:700;font-size:1.2rem;letter-spacing:var(--anp-letterspace)}
.chain .arr{border:none;background:none;color:var(--muted);padding:8px 0}
.summary-hero{background:radial-gradient(130% 100% at 50% 115%, var(--anp-world-glow), transparent 60%),linear-gradient(180deg,var(--anp-world-deep),var(--anp-world-base));color:#fff;border-radius:var(--anp-radius);padding:26px 22px;margin-top:16px;text-align:center;box-shadow:var(--anp-shadow-lift)}
.summary-hero h2{color:#fff;font-family:var(--anp-font-display);font-size:1.45rem}
.summary-hero p{color:rgba(255,255,255,.9)}
.expert{background:var(--paper-card);border:1px solid var(--line);border-left:4px solid var(--anp-gold);border-radius:var(--anp-radius-sm);padding:16px 18px;margin-top:12px;font-size:1.02rem}
.evalflag{background:#f3eefb;border:1px solid rgba(104,68,163,.3);border-left:4px solid var(--anp-violet);border-radius:var(--anp-radius-sm);padding:16px 18px;margin-top:12px}
.evalflag h3{color:var(--anp-violet-deep);font-size:1.1rem}
.evalflag p{font-size:.95rem;color:var(--ink-2)}
footer{margin-top:48px;border-top:1px solid var(--line);padding:22px 0 36px;color:var(--muted);font-size:.82rem;text-align:center}
footer a{color:var(--ink-2);font-weight:600}
@media(min-width:700px){.wrap{padding:0 22px}}

/* ============ adventure layer — two-voice episode on the anp system ============
   Parent voice = quiet register on calm paper. Child lines = huge serene cream
   reading surface, spacing-dial driven. World energy stays in the frames. */
.tv-title{background:radial-gradient(120% 90% at 85% -10%, var(--anp-world-glow), transparent 60%),linear-gradient(160deg,var(--anp-world-base),var(--anp-world-deep));color:#fff;border-radius:var(--anp-radius);padding:18px 20px;margin-top:14px;text-align:center;box-shadow:var(--anp-shadow)}
.tv-title .k{color:var(--anp-world-accent);font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.tv-title h2{color:#fff;font-family:var(--anp-font-display);font-size:1.4rem;margin-top:4px}
.tv-parent{background:var(--anp-paper);border:1px solid var(--line);border-left:4px solid var(--anp-world-accent);border-radius:var(--anp-radius-sm);padding:14px 18px;margin-top:12px;position:relative}
.tv-parent .k{font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--anp-violet)}
.tv-parent p{margin:7px 0 0;font-family:var(--anp-font-read);font-size:var(--anp-fs-base);line-height:1.6;color:var(--anp-ink-soft)}
.tv-cue{display:inline-block;background:rgba(104,68,163,.12);color:var(--anp-violet-deep);border-radius:999px;padding:3px 12px;font-weight:700;font-size:.78rem;margin:8px 6px 0 0}
.tv-cue.sfx{background:var(--anp-warn-bg);color:var(--anp-warn-ink)}
.tv-child{background:var(--read-bg);border:2px solid var(--anp-world-accent);border-radius:var(--anp-radius);padding:18px 16px 14px;margin-top:12px;position:relative;box-shadow:var(--shadow-sm)}
.tv-child .youread{position:absolute;top:-12px;left:14px;background:var(--anp-world-accent);color:var(--anp-world-accent-ink);border-radius:999px;padding:3px 14px;font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.tv-child.climax{border-color:var(--anp-violet)}
.tv-child.climax .youread{background:var(--anp-violet);color:#fff}
.tv-child p.line{font-family:var(--anp-font-read);font-weight:700;font-size:clamp(22px,6vw,30px);line-height:var(--anp-lineheight);letter-spacing:var(--anp-letterspace);word-spacing:var(--anp-wordspace);margin:8px 0 2px;color:var(--anp-ink);text-align:center}
.tv-child p.line .w{cursor:pointer;border-radius:6px;padding:1px 3px}
.tv-child p.line .w.miss{background:rgba(179,64,47,.18);box-shadow:inset 0 -2px 0 var(--anp-danger)}
.tv-mark{font-size:clamp(64px,22vw,120px);text-align:center;font-family:var(--anp-font-read);font-weight:700;color:var(--anp-ink)}
.tv-dice{background:#f3eefb;border:1px solid rgba(104,68,163,.3);border-radius:var(--anp-radius-sm);padding:14px 18px;margin-top:12px}
.tv-dice .k{font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--anp-violet-deep)}
.tv-reveal{background:radial-gradient(130% 100% at 50% 115%, var(--anp-world-glow), transparent 60%),linear-gradient(180deg,var(--anp-world-deep),var(--anp-world-base));border-radius:var(--anp-radius);margin-top:14px;padding:26px 18px;text-align:center;color:#fff;box-shadow:var(--anp-shadow-lift)}
.tv-reveal .hidden-art{font-size:64px;filter:blur(2px) grayscale(1);opacity:.4;transition:all .5s}
.tv-reveal .hidden-art.shown{filter:none;opacity:1;font-size:84px}
.tv-reveal p{color:rgba(255,255,255,.9)}
.tv-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.tv-choice button{background:var(--paper-card);border:2px solid var(--line);border-radius:var(--anp-radius);min-height:calc(var(--anp-tap)*1.6);padding:18px 12px;font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;color:var(--ink);transition:transform var(--anp-dur) var(--anp-ease),border-color var(--anp-dur) var(--anp-ease)}
.tv-choice button:hover{transform:translateY(-2px);border-color:var(--anp-world-accent)}
.tv-choice button .big-ic{display:block;font-size:42px;margin-bottom:6px}
.tv-choice button.on{border-color:var(--anp-world-accent);box-shadow:0 0 0 4px var(--anp-world-glow)}
/* cliffhanger card — the end-of-episode hook, world chrome energy */
.tv-cliff{background:radial-gradient(130% 100% at 50% 115%, var(--anp-world-glow), transparent 60%),linear-gradient(180deg,var(--anp-world-deep),var(--anp-world-base));border:none;border-radius:var(--anp-radius);padding:18px 20px;margin-top:12px;color:#fff;text-align:center;box-shadow:var(--anp-shadow-lift)}
.tv-cliff .k{font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--anp-world-accent)}
.tv-cliff p{margin:8px auto 0;font-weight:600;max-width:46ch;color:#fff}
.tv-mark.miss{background:rgba(179,64,47,.18);border-radius:var(--anp-radius-sm);box-shadow:inset 0 -3px 0 var(--anp-danger)}