/* Existing interactive figures, isolated from the editorial layout. */
.shell{position:relative;border:1px solid var(--rule);border-radius:3px;background:var(--paper-2);
  overflow:hidden}

#surface{height:420px;width:100%;cursor:grab;display:block}
#surface:active{cursor:grabbing}
#surface canvas{display:block}
.eq{position:absolute;left:20px;top:18px;font-family:var(--mono);font-size:13.5px;
  color:var(--ink);pointer-events:none}
.eq sub{font-size:9.5px}
.hint{position:absolute;right:18px;bottom:14px;margin:0;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);pointer-events:none;opacity:0}
#surface.live ~ .hint{opacity:1;transition:opacity .6s ease 1s}
/* no WebGL: the shell keeps the equation as plain text instead of showing an empty box */
.shell:not(:has(#surface.live)) .eq{position:static;padding:22px 20px;display:block}
@media(max-width:620px){#surface{height:300px}.eq{font-size:11px;left:14px;top:14px}}

.ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px 0;
  font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.ctl input[type=range]{flex:1 1 180px;accent-color:var(--accent);min-width:140px}
.ctl .val{color:var(--ink);min-width:9ch}
.bars{display:grid;gap:5px;padding:14px 20px 18px}
.bar{display:grid;grid-template-columns:154px 1fr 62px;gap:12px;align-items:center;
  font-family:var(--mono);font-size:12px}
.bar .nm{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .track{height:13px;background:var(--paper);border:1px solid var(--rule);border-radius:2px;
  position:relative;overflow:hidden}
.bar .fill{position:absolute;inset:0 auto 0 0;background:var(--rule-strong);
  transition:width .2s ease}
.bar.win .fill{background:var(--accent)}
.bar.win .nm,.bar.win .num{color:var(--ink)}
.bar .num{text-align:right;color:var(--faint)}
.bar.base .fill{background:var(--warm)}
.note-line{font-family:var(--mono);font-size:11.5px;color:var(--warm);padding:0 20px 16px;
  margin:0;min-height:1.4em}
@media(prefers-reduced-motion:reduce){.bar .fill{transition:none}}

.pool{display:flex;flex-wrap:wrap;gap:7px;padding:16px 20px 2px}
.pool button{font-family:var(--mono);font-size:11.5px;padding:4px 11px;border-radius:20px;
  border:1px solid var(--rule-strong);background:var(--paper);color:var(--muted);cursor:pointer}
.pool button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent)}
.pool button.base[aria-pressed="true"]{background:var(--warm-soft);border-color:var(--warm);
  color:var(--warm)}

/* ------------------------------------------------------------------ figure 4, the walk
   The shell is the same bordered plate the other figures sit on; everything below is the
   overlay furniture that has to float above a canvas without ever intercepting a drag. */
.game-shell{position:relative;overflow:hidden}
#game{position:relative;height:470px;width:100%;display:block;touch-action:none;cursor:default}
#game canvas{display:block;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.game-fail,.walk-fail{padding:26px 20px;color:var(--muted);font-size:14px;margin:0}

.game-hud{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;padding:0;
  font-family:var(--mono);color:var(--ink);background:rgba(251,248,243,.88);
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  border-top:1px solid var(--rule);
  pointer-events:none;font-variant-numeric:tabular-nums}
.game-hud:empty{display:none}
.game-hud .hc{display:flex;flex-direction:column;gap:3px;padding:7px 16px;flex:0 0 auto;
  border-left:1px solid var(--rule)}
.game-hud .hc:first-child{border-left:0}
.game-hud i{font-style:normal;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;
  font-size:8.7px;line-height:1}
.game-hud b{display:flex;align-items:center;gap:5px;font-weight:500;font-size:12.8px;
  line-height:1.15}
.game-hud .hu{color:var(--muted);font-size:10.3px;font-weight:400}
.game-hud u{text-decoration:none;width:8px;height:8px;border-radius:50%;flex:0 0 auto}
/* The readout carries the class as a colour, so the number and the band agree at a glance. */
.game-hud.b3{background:rgba(241,227,211,.93);
  background:color-mix(in srgb,var(--paper) 78%,#c26a32);border-top-color:#c26a32}
.game-hud.b4{background:rgba(236,220,206,.94);
  background:color-mix(in srgb,var(--paper) 76%,#a8452c);border-top-color:#a8452c}

.game-banner{position:absolute;left:16px;top:14px;right:16px;margin:0;max-width:34rem;
  font-family:var(--mono);font-size:11.8px;line-height:1.5;color:var(--ink);
  background:rgba(251,248,243,.93);
  background:color-mix(in srgb,var(--paper) 93%,transparent);
  border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:3px;padding:8px 11px;pointer-events:none}
.game-banner.bad{border-left-color:#a8452c;background:rgba(236,220,206,.95);
  background:color-mix(in srgb,var(--paper) 84%,#a8452c);color:var(--ink)}

.game-intro[hidden]{display:none}
.game-intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;
  background:rgba(246,241,232,.86);
  background:color-mix(in srgb,var(--paper-2) 88%,transparent);padding:20px}
.game-card{max-width:27rem;text-align:left;padding-left:12px}
@media(max-width:700px){.game-intro{justify-content:center}.game-card{padding-left:0}}
.game-t{font-family:var(--serif);font-size:20px;color:var(--ink);margin:0 0 8px;font-weight:600}
.game-p{font-size:14px;line-height:1.6;color:var(--body);margin:0 0 12px}
.game-p b{font-family:var(--mono);font-size:12.4px;color:var(--ink);font-weight:500}
.game-k{font-family:var(--mono);font-size:11px;color:var(--muted);margin:0 0 15px}
.game-k kbd{display:inline-block;border:1px solid var(--rule-strong);border-bottom-width:2px;
  border-radius:3px;padding:1px 5px;margin-right:3px;background:var(--paper);font:inherit;
  color:var(--ink)}
#game-start{font-family:var(--mono);font-size:12px;letter-spacing:.03em;padding:9px 15px;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:3px;
  cursor:pointer}
#game-start:hover{background:var(--accent);border-color:var(--accent)}

/* A floating touch indicator appears only while steering the terrain. */
.walk-gesture{position:absolute;width:76px;height:76px;transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.6);border-radius:50%;background:rgba(20,28,23,.12);
  pointer-events:none;z-index:1}
.walk-gesture[hidden]{display:none}
.walk-gesture span{position:absolute;left:50%;top:50%;width:16px;height:16px;
  border:1px solid rgba(20,28,23,.35);border-radius:50%;background:rgba(250,249,246,.9);
  transform:translate(-50%,-50%)}
.walk-touch-help{display:none}
@media(hover:none),(any-pointer:coarse){.walk-touch-help{display:inline}.walk-keyboard-help{display:none}}
@media(max-width:620px){
  /* Keep the five readouts in two predictable rows on narrow screens. */
  .game-hud{display:grid;grid-template-columns:1fr 1fr 1fr}
  .game-hud .hc{padding:6px 9px;border-left:1px solid var(--rule);
    border-top:1px solid var(--rule);min-width:0}
  .game-hud .hc:nth-child(1){grid-area:1/1}
  .game-hud .hc:nth-child(2){grid-area:1/2}
  .game-hud .hc:nth-child(5){grid-area:1/3}
  .game-hud .hc:nth-child(3){grid-area:2/1/auto/3}
  .game-hud .hc:nth-child(4){grid-area:2/3}
  .game-hud .hc:nth-child(1),.game-hud .hc:nth-child(2),
  .game-hud .hc:nth-child(5){border-top:0}
  .game-hud .hc:nth-child(1),.game-hud .hc:nth-child(3){border-left:0}
  .game-hud i{font-size:8px;letter-spacing:.08em}
  .game-hud b{font-size:11.8px;gap:4px}
  .game-hud .hu{font-size:9.6px}
  .game-hud u{width:7px;height:7px}
  #game{position:relative;height:430px}
  .game-banner{font-size:10.8px;left:12px;right:12px;top:10px}
  .game-t{font-size:17px}
  .game-p{font-size:13px}
}