/* Wilds — painterly open air, only-essential HUD, an ancient slate. */
:root{
  --ink:#f2ecd9;--ink-dim:#d9d1ba;--shadow:0 1px 2px rgba(10,16,20,.8),0 0 6px rgba(10,16,20,.55),0 0 18px rgba(10,16,20,.35);
  --slate:#24272b;--slate-2:#2d3136;--carve:#474d53;--glow:#4fd6ff;--glow-soft:rgba(79,214,255,.18);--ember:#ff9f4a;
  --title:"Optima","Candara","Palatino Linotype","Book Antiqua",serif;
  --ui:"Avenir Next","Segoe UI","Helvetica Neue",system-ui,sans-serif;
  /* time of day — overridden per encounter */
  --sky-a:#9cc6de;--sky-b:#d3e6df;--sky-c:#f4e3b6;--haze:#c9dcd8;--far:#a4c0c6;--far-2:#8fadb6;--snow:#f4f7f5;
  --mid:#7fa396;--mid-2:#6b9185;--near:#a9b764;--near-2:#bcc76f;--near-3:#c9cf78;--cloud:#fbf6ea;--cloud-d:#dfe3de;
  --sun-x:360px;--sun-y:250px;--tint:rgba(255,236,190,.0);
  --path:#c9ad76;--path-d:#a88d5c;--tuft-b:#6f8a3c;--tuft-f:#8aa447;
}
body[data-stage="1"]{--sky-a:#4f9fd6;--sky-b:#9ad0e8;--sky-c:#e4f0de;--haze:#cfe5ea;--far:#98bccb;--far-2:#80a7ba;--mid:#6fa08e;--mid-2:#5a8d7c;--near:#9fbb5a;--near-2:#b3c965;--near-3:#c4d26f;--sun-x:600px;--sun-y:110px}
body[data-stage="2"]{--sky-a:#6c93c2;--sky-b:#e3c08f;--sky-c:#f6d396;--haze:#ecd3a8;--far:#b3aeb0;--far-2:#9c98a2;--snow:#fbeede;--mid:#8f9b7a;--mid-2:#7c8a6a;--near:#b8b45a;--near-2:#c9be62;--near-3:#d5c56b;--cloud:#fde9cc;--cloud-d:#e8c8a0;--sun-x:1240px;--sun-y:300px;--tuft-b:#8a8a3a;--tuft-f:#a5a046}
body[data-stage="3"]{--sky-a:#34436f;--sky-b:#a9728a;--sky-c:#f1a06a;--haze:#c98f8a;--far:#7d7890;--far-2:#6a6680;--snow:#f2d8d0;--mid:#5e6a70;--mid-2:#4f5c62;--near:#79814c;--near-2:#88894f;--near-3:#958f55;--cloud:#f4c2a8;--cloud-d:#c98f95;--sun-x:1380px;--sun-y:520px;--path:#b09470;--path-d:#8e7552;--tuft-b:#56613a;--tuft-f:#6c7443}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:#6b8f92;color:var(--ink);font:14px/1.45 var(--ui);overflow:hidden}
kbd{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;padding:0 .4em;border:1px solid rgba(242,236,217,.45);border-bottom-width:2px;border-radius:5px;font:600 11px/1 var(--ui);color:var(--ink);background:rgba(20,24,28,.35);letter-spacing:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:6px}

/* ——— landscape ——— */
.land{position:fixed;inset:0;width:100%;height:100%;display:block}
.land *{transition:fill 1.4s ease,stop-color 1.4s ease}
.sky-a{stop-color:var(--sky-a)}.sky-b{stop-color:var(--sky-b)}.sky-c{stop-color:var(--sky-c)}.haze-a{stop-color:var(--haze)}
.sun{transform:translate(var(--sun-x),var(--sun-y));transition:transform 1.6s cubic-bezier(.4,.1,.2,1)}
.cl{fill:var(--cloud)}.cd{fill:var(--cloud-d)}
.cloud{animation:drift 90s linear infinite alternate}.c2{animation-duration:120s}.c3{animation-duration:70s;animation-direction:alternate-reverse}
@keyframes drift{to{transform:translateX(120px)}}
.f1{fill:var(--far)}.f3{fill:#fff;opacity:.16}.f2{fill:var(--far-2)}.snow{fill:var(--snow)}.ruin{fill:var(--far-2)}
.m1{fill:var(--mid)}.m2{fill:var(--mid-2)}.trees{fill:var(--mid-2);filter:brightness(.82)}
.n1{fill:var(--near)}.n2{fill:var(--near-2)}.n3{fill:var(--near-3)}
.strokes{stroke:var(--near);stroke-width:3;stroke-linecap:round;fill:none;filter:brightness(.8)}
.drift circle{fill:#fff7d6;opacity:.7;animation:mote 9s ease-in-out infinite alternate}
.drift circle:nth-child(2n){animation-duration:13s;animation-delay:-4s}.drift circle:nth-child(3n){animation-duration:11s;animation-delay:-7s}
@keyframes mote{0%{transform:translate(0,0);opacity:.15}50%{opacity:.8}100%{transform:translate(40px,-30px);opacity:.2}}
.scrim{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,20,26,.38),rgba(14,20,26,0) 18%,rgba(14,20,26,0) 72%,rgba(14,20,26,.42))}

/* ——— frame ——— */
.app{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 356px;grid-template-rows:56px minmax(0,1fr) 150px;column-gap:22px;padding:0 20px 16px 26px}
.compass{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;text-shadow:var(--shadow)}
.brand{color:var(--ink);text-decoration:none;font:600 11px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;min-width:180px}.brand span{color:var(--glow)}
.bar{display:flex;align-items:center;gap:12px;flex:0 1 560px}
.line{position:relative;flex:1;height:34px}
.ticks{position:absolute;left:0;right:0;top:50%;height:10px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,var(--ink) 8%,var(--ink) 92%,transparent) center/100% 1px no-repeat,repeating-linear-gradient(90deg,rgba(242,236,217,.55) 0 1px,transparent 1px 14px) center/100% 6px no-repeat;opacity:.8}
.pins{position:absolute;inset:0;display:flex;justify-content:space-around}
.pin{position:relative;width:34px;height:34px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.pin svg{width:22px;height:28px;overflow:visible;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.pin .body{fill:rgba(20,26,30,.55);stroke:var(--ink);stroke-width:1.4}
.pin.done .body{fill:var(--ember);stroke:#fff1dc}
.pin.here .body{fill:var(--glow);stroke:#e9fbff}
.pin.here::after{content:"";position:absolute;left:50%;bottom:22px;width:2px;height:24px;transform:translateX(-50%);background:linear-gradient(transparent,var(--glow));opacity:.8;animation:beam 2.4s ease-in-out infinite}
@keyframes beam{50%{opacity:.25}}
.pin:disabled{cursor:not-allowed;opacity:.5}
.pin .lbl{position:absolute;top:31px;left:50%;transform:translateX(-50%);white-space:nowrap;font:600 9px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;opacity:0;transition:opacity .2s}
.pin:hover .lbl,.pin:focus-visible .lbl,.pin.here .lbl{opacity:1}
.keys-btn{border:0;background:none;display:flex;gap:8px;align-items:center;font:600 11px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;min-width:180px;justify-content:flex-end}

/* ——— stage ——— */
.stage{position:relative;grid-column:1;grid-row:2;min-height:0;outline:none}
.fade{transition:opacity .5s ease}
body.playing .place,body.playing .subtitle,body.playing .compass{opacity:.32}
.place{position:absolute;left:0;top:10px;max-width:58%;text-shadow:var(--shadow);transition:opacity .5s}
.kicker{margin:0 0 6px;font:600 10.5px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim)}
h1{margin:0;font:400 clamp(22px,2.3vw,32px)/1.1 var(--title);letter-spacing:.02em}
.readout{position:absolute;right:-14px;top:0;width:296px;padding:10px 14px 6px;border-radius:14px;text-shadow:var(--shadow);font-variant-numeric:tabular-nums}
.readout .row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px solid rgba(242,236,217,.22);font-size:12.5px}
.readout .row span{font:600 10px/1.6 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.readout .res{margin-top:8px;min-height:62px;font-size:12px;line-height:1.5}
.readout .res b{font-weight:600;color:#fff}.readout .res .ok{color:#b8f4ff}.readout .res .no{color:#ffc590}
.readout .note{min-height:18px;font-size:11px;color:#ffd4ab}
.track{position:absolute;left:0;right:0;bottom:42px;width:100%;height:calc(100% - 150px);overflow:visible;transition:opacity .3s,filter .3s}
.subtitle{position:absolute;left:6%;right:6%;bottom:0;margin:0;min-height:40px;padding:8px 18px;border-radius:40px;background:radial-gradient(closest-side,rgba(16,24,30,.45),rgba(16,24,30,0));text-align:center;font:italic 400 15px/1.35 var(--title);text-shadow:var(--shadow);transition:opacity .5s}
.subtitle b{font:600 10px/1 var(--ui);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--glow);margin-right:10px}
.banner{position:absolute;left:0;right:0;top:34%;display:flex;align-items:center;justify-content:center;gap:18px;pointer-events:none;opacity:0;text-shadow:var(--shadow)}
.banner i{height:1px;width:90px;background:linear-gradient(90deg,transparent,var(--ink))}.banner i:last-child{transform:scaleX(-1)}
.banner span{font:400 clamp(20px,2.4vw,30px)/1 var(--title);letter-spacing:.14em;text-transform:uppercase}
.banner.show{animation:banner 2.8s ease forwards}
@keyframes banner{0%{opacity:0;letter-spacing:.3em}18%{opacity:1}70%{opacity:1}100%{opacity:0;letter-spacing:.14em}}

/* scene pieces */
.tuft path{fill:none;stroke-linecap:round;stroke-width:2.6;transition:stroke 1.4s}.tuft.back path{stroke:var(--tuft-b)}.tuft.front path{stroke:var(--tuft-f)}
.tuft .sw{animation:sway 3.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes sway{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
.stone text{font:700 11px var(--ui);color:#1f1d17;fill:currentColor;paint-order:stroke;stroke:rgba(250,244,222,.75);stroke-width:3px}
.terminal .rim{fill:#6b7078;stroke:#2d3136;stroke-width:2}
.terminal .top{fill:#2a5a6c;transition:fill .6s}
.terminal .beam{opacity:0;transition:opacity .6s}
.terminal.dormant{opacity:.9}
.terminal.dormant .glyph{stroke:#7f8a8f}
.terminal .glyph{stroke:var(--ember);stroke-width:1.6;fill:none}
.terminal.active .glyph{stroke:var(--glow)}
.terminal.lit .top{fill:#8ef0ff}.terminal.lit .beam{opacity:1}
.terminal.chime .ring{animation:chime 1.1s ease-out 2}
.terminal .ring{fill:none;stroke:var(--glow);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
@keyframes chime{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
.dockband{fill:var(--glow);opacity:.22}
.pre-mark{fill:none;stroke:#e9fbff;stroke-width:1.6;stroke-dasharray:4 4;opacity:.85}
.pre-text{font:700 10px var(--ui);letter-spacing:.14em;color:#06151a;fill:currentColor;paint-order:stroke;stroke:rgba(240,252,255,.9);stroke-width:3.5px}
.vel{stroke:var(--ember);stroke-width:3.2;stroke-linecap:round}
.vel-text{font:600 11px var(--ui);fill:#fff1dc;paint-order:stroke;stroke:rgba(30,20,10,.65);stroke-width:3px}
.ghost{opacity:.38}
.ghost-text{font:600 10px var(--ui);letter-spacing:.14em;fill:#e9fbff}
.puff{fill:#e8dcc0;opacity:.8;animation:puff .8s ease-out forwards;transform-box:fill-box;transform-origin:center}
@keyframes puff{to{opacity:0;transform:translate(-14px,-12px) scale(2.4)}}

/* dissolve transition */
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.motes i{position:absolute;width:5px;height:5px;border-radius:50%;background:#bff3ff;box-shadow:0 0 10px 2px var(--glow);opacity:0;animation:scatter .62s ease-in-out forwards}
@keyframes scatter{0%{opacity:0;transform:translate(0,0)}35%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
body.dissolve .track{opacity:0;filter:blur(6px) drop-shadow(0 0 12px var(--glow)) hue-rotate(160deg)}
body.assemble .track{animation:assemble .32s ease-out}
@keyframes assemble{from{opacity:0;filter:blur(6px) drop-shadow(0 0 12px var(--glow))}to{opacity:1;filter:none}}

/* ——— journal (chart) ——— */
.journal{grid-column:1;grid-row:3;display:grid;grid-template-rows:20px minmax(0,1fr) 30px;gap:6px;padding:12px 16px 8px;border-radius:14px;background:linear-gradient(180deg,rgba(24,28,32,.62),rgba(24,28,32,.76));backdrop-filter:blur(4px)}
.jhead{display:flex;justify-content:space-between;align-items:center;font:600 10px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.legend{display:flex;gap:14px;letter-spacing:.12em}.legend span{display:flex;align-items:center;gap:6px}
.lg{display:inline-block;width:16px;height:0;border-top:2px solid var(--glow)}.lg.pre{border-top:2px dashed rgba(242,236,217,.8)}.lg.gho{border-color:var(--ember)}.lg.dock{height:8px;border:0;background:rgba(79,214,255,.3)}
.chart{position:relative;min-height:0;padding-left:34px}
.chart svg{width:100%;height:100%;display:block;overflow:visible}
.ymax,.ymin{position:absolute;left:0;font:600 10px var(--ui);color:var(--ink-dim);font-variant-numeric:tabular-nums}.ymax{top:-2px}.ymin{bottom:-2px}
.c-run{fill:none;stroke:var(--glow);stroke-width:2.4;vector-effect:non-scaling-stroke}
.c-pre{fill:none;stroke:rgba(242,236,217,.75);stroke-width:1.5;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.c-gho{fill:none;stroke:var(--ember);stroke-width:2;vector-effect:non-scaling-stroke}
.c-dock{fill:rgba(79,214,255,.22)}.c-axis{stroke:rgba(242,236,217,.28);stroke-width:1;vector-effect:non-scaling-stroke}
.c-cur{stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.8}
.time{display:flex;align-items:center;gap:10px;padding-left:34px}
.time output{min-width:48px;text-align:right;font:600 12px var(--ui);font-variant-numeric:tabular-nums}
.scrub{position:relative;flex:1;height:18px;cursor:pointer;touch-action:none}
.scrub::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:rgba(242,236,217,.3);border-radius:2px}
.scrub i{position:absolute;left:0;top:8px;height:2px;background:var(--glow);box-shadow:0 0 8px var(--glow)}
.scrub b{position:absolute;top:3px;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);background:#e9fbff;border:2px solid var(--glow)}

/* ——— the slate ——— */
.slate{grid-column:2;grid-row:2/4;align-self:stretch;min-height:0;display:grid;grid-template-rows:26px 40px 112px 176px 46px minmax(52px,1fr) 68px 46px;grid-template-columns:minmax(0,1fr);gap:9px;padding:16px 18px 16px;margin-top:4px;border-radius:22px 22px 26px 26px;
  background:radial-gradient(120% 60% at 50% 0%,rgba(79,214,255,.07),transparent 60%),repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 3px,transparent 3px 7px),linear-gradient(180deg,var(--slate-2),var(--slate));
  box-shadow:inset 0 0 0 1px #3c4248,inset 0 0 0 7px var(--slate),inset 0 0 0 8px rgba(79,214,255,.22),0 18px 40px rgba(8,12,16,.45);position:relative}
.slate::before,.slate::after{content:"";position:absolute;left:50%;width:74px;height:8px;transform:translateX(-50%);border:1px solid rgba(255,159,74,.55);border-radius:6px;background:#1c1f22}
.slate::before{top:-4px}.slate::after{bottom:-4px}
.slate-head{display:flex;align-items:center;gap:10px;font:600 10px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--ember)}
.orn{width:74px;height:12px;flex:none}.orn path{fill:none;stroke:var(--ember);stroke-width:1.3}
.prompt{margin:0;font:400 16px/1.25 var(--title);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dials{display:grid;align-content:start;gap:10px}
.dial{position:relative;display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:8px 10px 10px;border-radius:10px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px var(--carve);cursor:pointer;touch-action:none}
.dial .name{font:600 10px/1.4 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.dial .val{font:600 13px/1.4 var(--ui);font-variant-numeric:tabular-nums}
.dial .groove{grid-column:1/-1;position:relative;height:14px}
.dial .groove::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:repeating-linear-gradient(90deg,var(--carve) 0 6px,transparent 6px 9px)}
.dial .groove i{position:absolute;left:0;top:6px;height:2px;background:var(--ink-dim)}
.dial .groove b{position:absolute;top:1px;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);background:var(--slate);border:2px solid var(--ink-dim)}
.dial .keys{position:absolute;right:10px;bottom:-9px;display:flex;gap:3px;opacity:0;transition:opacity .2s}
.dial.active{box-shadow:inset 0 0 0 1px var(--glow),0 0 16px rgba(79,214,255,.18)}
.dial.active .groove i{background:var(--glow);box-shadow:0 0 8px var(--glow)}.dial.active .groove b{border-color:var(--glow);background:#12303a}
.dial.active .keys{opacity:1}.dial.active .name{color:var(--glow)}
.keep{padding:10px 12px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--carve);font-size:12.5px;color:var(--ink-dim)}
.keep strong{display:block;font:400 15px/1.3 var(--title);color:var(--ink);margin:2px 0 8px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--carve);background:rgba(0,0,0,.2);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:12.5px}
.chip:hover{border-color:var(--glow)}
.task{min-height:0;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.task h2{margin:0;font:400 15px/1.3 var(--title);color:var(--ink)}
.opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:6px 10px;border-radius:8px;border:1px solid var(--carve);background:rgba(0,0,0,.18);cursor:pointer;font-size:13px}
.opt:hover{border-color:rgba(79,214,255,.6)}
.opt.chosen{border-color:var(--ember)}.opt.chosen.right{border-color:var(--glow);background:rgba(79,214,255,.12)}
.opt kbd{flex:none}
.limits{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:12.5px;color:var(--ink-dim)}
.limits li{display:flex;gap:10px;align-items:center}.limits li::before{content:"";width:7px;height:7px;transform:rotate(45deg);border:1.5px solid var(--glow)}
textarea{flex:1;min-height:52px;resize:none;border-radius:10px;border:1px solid var(--carve);background:rgba(0,0,0,.25);color:var(--ink);font:14px/1.4 var(--title);padding:8px 10px}
textarea:focus{outline:none;border-color:var(--glow);box-shadow:0 0 0 3px var(--glow-soft)}
.tiny{margin:0;font-size:11px;color:var(--ink-dim);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hint,.feedback{font-size:12.5px;line-height:1.4;overflow:hidden}
.hint .ask{border:0;background:none;padding:0;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink-dim);font-size:12.5px}
.hint .ask:hover{color:var(--ink)}
.hint p,.feedback p{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hint p{color:#cdeef8;font-style:italic;font-family:var(--title);font-size:13.5px}
.feedback p{padding-left:10px;border-left:2px solid var(--ink-dim)}
.feedback .good{border-color:var(--glow);color:#dff8ff}.feedback .try{border-color:var(--ember);color:#ffe2c6}
.enter{animation:etch .45s ease-out}
@keyframes etch{from{opacity:0;clip-path:inset(0 100% 0 0);filter:drop-shadow(0 0 6px var(--glow))}to{opacity:1;clip-path:inset(0 0 0 0)}}
.runes{border-top:1px solid var(--carve);padding-top:9px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.rune-row{display:flex;gap:6px}
.rune{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--carve);background:rgba(0,0,0,.2)}
.rune svg{width:20px;height:20px}.rune path,.rune circle{fill:none;stroke:#5c646b;stroke-width:1.6;stroke-linecap:round}
.rune.lit{box-shadow:inset 0 0 0 1px var(--glow),0 0 12px rgba(79,214,255,.35);background:#10262e}
.rune.lit path,.rune.lit circle{stroke:var(--glow)}
.rune.lit.new{animation:inscribe 1s ease-out}
@keyframes inscribe{0%{transform:scale(.6);box-shadow:0 0 0 0 var(--glow)}60%{transform:scale(1.12);box-shadow:0 0 22px 6px rgba(79,214,255,.6)}100%{transform:scale(1)}}
.ability{margin:0;font-size:11.5px;line-height:1.35;color:var(--ink-dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ability b{display:block;color:var(--glow);font:600 10px/1.5 var(--ui);letter-spacing:.2em;text-transform:uppercase}
.actions{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}.act span{overflow:hidden;text-overflow:ellipsis}
.act{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--carve);background:rgba(0,0,0,.25);border-radius:10px;padding:0 12px;height:44px;cursor:pointer;font:600 11.5px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase}
.act:hover{border-color:var(--ink-dim)}
.act.primary{letter-spacing:.06em;border-color:var(--glow);background:linear-gradient(180deg,#17414f,#10303b);color:#e9fbff}
.act.primary:disabled{opacity:.55;cursor:default}
.act.primary.ready{animation:ready 1.8s ease-in-out infinite}
@keyframes ready{50%{box-shadow:0 0 0 4px rgba(79,214,255,.18),0 0 22px rgba(79,214,255,.45)}}

/* ——— help ——— */
.help{position:fixed;inset:0;display:grid;place-items:center;background:rgba(10,14,18,.55);backdrop-filter:blur(4px);z-index:10}
.help[hidden]{display:none}
.help-card{width:min(520px,92vw);padding:24px 26px;border-radius:22px;background:linear-gradient(180deg,var(--slate-2),var(--slate));box-shadow:inset 0 0 0 1px #3c4248,inset 0 0 0 7px var(--slate),inset 0 0 0 8px rgba(79,214,255,.25),0 30px 60px rgba(0,0,0,.5)}
.help-card h2{margin:0 0 14px;font:400 22px var(--title);letter-spacing:.06em}
dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:13px}dt{display:flex;gap:4px}dd{margin:0;color:var(--ink-dim);align-self:center}
.help-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}.help-foot a{color:var(--ink-dim);font-size:12px}

@media (max-height:760px){
  .app{grid-template-rows:50px minmax(0,1fr) 128px}
  .slate{grid-template-rows:22px 38px 100px 164px 40px minmax(46px,1fr) 62px 42px;gap:7px;padding:13px 16px}
  .dial{padding:6px 10px 8px}.act{height:40px}.opt{padding:5px 10px}
  .readout .res{min-height:54px}
}
@media (max-width:1100px){#run span{display:none}.rune{width:26px;height:26px}.app{grid-template-columns:minmax(0,1fr) 330px;column-gap:16px;padding:0 14px 14px 18px}.readout{width:230px}.place{max-width:52%}}
@media (max-width:767px){
  html,body{overflow:auto;height:auto}
  .app{position:relative;display:flex;flex-direction:column;gap:14px;padding:0 14px 20px}
  .compass{flex-wrap:wrap;gap:6px;padding-top:10px}.brand,.keys-btn{min-width:0}.bar{order:3;flex:1 1 100%}
  .stage{height:420px}.place{max-width:100%;position:relative}.readout{position:relative;width:auto;margin-top:10px}
  .track{height:200px;bottom:44px}.banner{display:none}
  .journal{height:150px}
  .slate{grid-template-rows:auto;display:flex;flex-direction:column;margin-top:0}
  .task{min-height:150px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}