/* THE WAY — view/style.css — lane B. M0: enough to boot cleanly and hide the card.
   The palette is §8.3's: sand, ochre, deep shade, and the storybook cream. */

:root{
  --sand:#F4D58D; --ochre:#D9A441; --rock:#D2693F; --deep:#8E3B2A;
  --ink:#2B2118; --cream:#E9D9B0; --shade:#4A3A55; --sky:#3EC1D3;
  --ui:'Darumadrop One', system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#1a1410;color:var(--cream);font-family:var(--ui)}
canvas#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}

#ui{position:fixed;inset:0;pointer-events:none;z-index:10}
#ui > *{pointer-events:auto}

.card{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:20;min-width:min(420px,86vw);padding:28px 32px;text-align:center;
  background:rgba(43,33,24,.92);border:2px solid var(--ochre);border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
}
.card .title{font-size:44px;letter-spacing:.14em;color:var(--sand)}
.card .sub{margin-top:6px;font-size:16px;opacity:.78}
.card .bar{margin-top:18px;height:8px;border-radius:6px;background:rgba(233,217,176,.16);overflow:hidden}
.card .bar > i{display:block;height:100%;width:0;background:var(--ochre);transition:width .2s ease}

#boot.gone{display:none}

/* the crash line: a boot failure must be READABLE, not a blank canvas and a silent console */
#boot .err{margin-top:14px;font-size:13px;line-height:1.45;color:#E4572E;white-space:pre-wrap;text-align:left}

/* ─────────────────────────── M2 — THE HUD (§9.3, §2.8) ───────────────────────────
   Parchment panel #FBF3DF, ink #2B2118, Darumadrop One (peak-art §6.3). Every colour below is
   §2.3's or §6.3's; nothing is invented.

   ⚠️⚠️ `#ui > *` above is `pointer-events:auto`, and THE HUD IS FULL-SCREEN. A HUD that accepts
   pointer events swallows the click that takes the pointer lock and every click after it — the
   game would look like it had stopped responding to the mouse. `#ui > #hud` is specificity
   (2,0,0) so it wins on merit rather than on source order. Nothing in here may set it back. */

:root{
  --parchment:#FBF3DF; --hud-ink:#2B2118;
  --stam:#5FCF5A; --bonus-stam:#F5D65C; --overflow:rgba(43,33,24,.6);
  --injury:#C0392B;
}

#ui > #hud{position:absolute;inset:0;pointer-events:none;font-family:var(--ui);color:var(--hud-ink);
  -webkit-user-select:none;user-select:none;overflow:hidden}

/* ⚠️⚠️ THERE ARE NO `transition:` DECLARATIONS ANYWHERE IN THE HUD, AND THAT IS A FIX, NOT A
   STYLE CHOICE. `.bar-stam` shipped with `transition:width .09s linear` and MEASURED 0 px on
   screen while its own inline style read `width:42%` — `st.getAnimations()` showed a CSSTransition
   stuck at `currentTime: 0`, `playState: "running"`, for ever. CSS transitions are driven by the
   same frame clock as requestAnimationFrame, and the Browser pane SUSPENDS rAF (trap 23) — so a
   transition never advances and the used value is pinned at the value it started from. The sim
   keeps stepping (that is what the setInterval fallback is for) and the readout the player is
   supposed to trust freezes at zero.
   That is the worst failure this HUD can have, it looks exactly like a feature that never
   shipped, and it is invisible to every test that reads the DOM instead of the layout.
   ⚠️ It also applies to the held-slot lift and the icon fades: a frozen `transform`/`opacity`
   transition reports a STALE state, which is the same lie in a smaller font. Keyframe animations
   are kept (the fade pulse, the urgent ring) because they only add a `filter` — a frozen one
   misreports nothing. */

/* the one panel treatment, shared: parchment with an ink edge and a soft drop */
.hud-bar .bar-frame,.hud-slots .slot,.hud-alt,.hud-prompt .p-row,.hud-talk,.hud-emote{
  background:var(--parchment);border:2px solid var(--hud-ink);border-radius:9px;
  box-shadow:0 6px 18px rgba(0,0,0,.35)
}

/* ── the altimeter + the sun dial (top right). §9.3: THE ONLY NUMBER ON SCREEN. ── */
.hud-alt{position:absolute;top:14px;right:16px;padding:6px 10px 5px;text-align:right;line-height:1;
  display:flex;align-items:center;gap:9px}
.hud-alt .alt-dial{color:#E4A11B;flex:0 0 auto;margin-bottom:-4px}
.hud-alt.night .alt-dial{color:#8FA6FF}
.hud-alt .alt-num{font-size:23px;letter-spacing:.02em}
.hud-alt .alt-band{font-size:11px;opacity:.62;letter-spacing:.14em;margin-top:3px}
.hud-alt > div{display:flex;flex-direction:column;align-items:flex-end}

/* ── the world prompt (centre, small). The RMB line is rmbTarget()'s output (§9.1). ── */
.hud-prompt{position:absolute;left:50%;top:56%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px}
.hud-prompt .p-row{padding:4px 11px;font-size:15px;white-space:nowrap;display:flex;gap:7px;align-items:baseline}
.hud-prompt .p-key{color:#B4552E;letter-spacing:.06em}
.hud-prompt .p-key::after{content:' —';opacity:.45}
.hud-prompt .p-txt{opacity:.92}

/* ── THE ONE BAR, 100 POINTS (§2.8) ── */
.hud-bar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:min(560px,52vw)}
.hud-bar .bar-frame{padding:6px 7px 5px}
.bar-track{position:relative;height:22px;border-radius:5px;overflow:hidden;
  background:rgba(43,33,24,.14);box-shadow:inset 0 1px 3px rgba(43,33,24,.3)}
/* stamina: green, from the LEFT */
.bar-stam{position:absolute;left:0;top:0;height:100%;width:0;background:var(--stam);
  border-radius:4px 0 0 4px}
/* the nine afflictions: from the RIGHT, in §2.3's table order */
.bar-affl{position:absolute;inset:0;pointer-events:none}
.bar-affl .af{position:absolute;top:0;height:100%;width:0;display:flex;align-items:center;justify-content:center}
.bar-affl .af .af-ico{opacity:0}
/* anything past 100 wraps onto this second pass and carries the dashed ink outline (§2.3) */
.bar-over .af{border:2px dashed var(--overflow)}
/* bonus gold: a THINNER strip beneath (§2.2) */
.bar-bonus-track{position:relative;height:7px;margin-top:3px;border-radius:4px;
  background:rgba(43,33,24,.14);overflow:hidden}
.bar-bonus{position:absolute;left:0;top:0;height:100%;width:0;background:var(--bonus-stam);
  border-radius:4px}
/* the 5-second fade (§5.1): the bar itself is a tell, and it is visible before the screen is */
.bar-frame.fading{box-shadow:0 0 0 calc(2px + var(--fade,0)*5px) rgba(192,57,43,calc(.25 + var(--fade,0)*.55)),
  0 6px 18px rgba(0,0,0,.35);animation:hud-pulse .85s ease-in-out infinite}
@keyframes hud-pulse{0%,100%{filter:none}50%{filter:brightness(1.12) saturate(.8)}}
.hud-fade{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 52%,rgba(20,12,8,0) 34%,rgba(20,12,8,.92) 100%)}

/* ── three slots + the Bag (bottom right) ── */
.hud-slots{position:absolute;right:16px;bottom:22px;display:flex;gap:7px;align-items:flex-end}
.hud-slots .slot{width:88px;padding:5px 7px 6px;display:flex;flex-direction:column;gap:2px;
}
.hud-slots .slot-bag{width:96px;border-style:dashed}
.hud-slots .slot-n{font-size:11px;opacity:.5;letter-spacing:.1em}
.hud-slots .slot-name{font-size:14px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-slots .slot.empty .slot-name{opacity:.32}
/* "the held one lifted" (§9.3) */
.hud-slots .slot.held{transform:translateY(-9px);box-shadow:0 12px 22px rgba(0,0,0,.42);border-color:#B4552E}

/* ── the downed ring + its visible timer (§5.2 — the one readout PEAK hides and we do not) ── */
.hud-down{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:60px;height:60px}
.hud-down .down-ring{position:absolute;inset:0}
.hud-down .down-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:19px;color:var(--parchment);text-shadow:0 2px 5px rgba(0,0,0,.7)}
.hud-down.urgent{animation:hud-pulse .6s ease-in-out infinite}

/* ── the talking ear (PTT). §9.3's over-the-head ear is view/avatars.js, M4. ── */
.hud-talk{position:absolute;left:16px;bottom:22px;padding:4px 10px;display:flex;align-items:center;gap:7px;
  font-size:13px;opacity:.42}
.hud-talk.live{opacity:1}
.hud-talk.me{border-color:#B4552E}
.hud-talk .talk-who{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── ping markers (screen pixels; main.js projects at M4) ── */
.hud-pings{position:absolute;inset:0}
.hud-pings .ping{position:absolute;left:0;top:0;margin:-11px 0 0 -11px;color:var(--parchment);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.65));display:flex;flex-direction:column;align-items:center}
.hud-pings .ping.off{opacity:.55}
.hud-pings .ping-n{font-size:11px;margin-top:2px}

/* ── the emote wheel (R) — a stub: it opens, highlights and hit-tests ── */
.hud-emote{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:330px;height:330px;border-radius:50%;background:rgba(251,243,223,.90)}
.hud-emote .em{position:absolute;transform:translate(-50%,-50%);font-size:12px;text-align:center;
  width:92px;padding:3px 4px;border-radius:6px;line-height:1.15}
.hud-emote .em.sel{background:var(--hud-ink);color:var(--parchment)}

/* ⚠️⚠️ MEASURED: a 560 px bar centred on a 1280 px screen runs from x 360 to x 920, and the slot
   rack starts at x 883 — THE ONE READOUT AND THE ITEM SLOTS OVERLAP ON EVERY COMMON LAPTOP
   (1366×768 and 1280×720 both). The clash threshold works out at 1354 px, so the break is set at
   1400. The bar does NOT shrink: §2.8 makes it the only persistent readout and a squeezed bar
   makes nine colour blocks unreadable. The rack and the ear step above its line instead, which is
   also what PEAK does on a narrow window. */
@media (max-width:1400px){
  .hud-slots,.hud-talk{bottom:92px}
}

@media (prefers-reduced-motion:reduce){
  .bar-frame.fading,.hud-down.urgent{animation:none}
}

/* ─────────────────────────── THE APP: title · character · lobby · pause · end (lane APP) ───────────────────────────
   PEAK's register: Darumadrop One, parchment #FBF3DF, ink #2B2118, a hard ink edge, no gradients.
   ⚠️ `#ui > #app` is pointer-events:NONE and only a VISIBLE screen takes clicks — a full-screen
   menu layer that ate pointer events would swallow the click that takes the pointer lock (the
   HUD's lesson, one file up). Specificity (2,0,0) beats `#ui > *` on merit, not source order.
   ⚠️ NO `transition:` — the pane suspends rAF, and a frozen transition reports a stale state
   (see the HUD block above). Screens switch by display, instantly. */

#ui > #app{position:absolute;inset:0;pointer-events:none;z-index:30;font-family:var(--ui);color:var(--hud-ink)}
#app .app-scr{display:none;position:absolute;inset:0;pointer-events:auto;align-items:center;justify-content:center;
  align-items:safe center;justify-content:safe center;
  padding:24px;overflow:auto}
/* ⚠️ `safe center` (the second pair wins where supported): a card TALLER than the window used to
   centre itself into negative y, above scrollTop 0 where no scroll can reach — the Loom's "Who
   walks?" header, the name field and the first cast cards were cut off [MEASURED 741×914: card
   top −265]. Safe alignment centres a card that fits and starts one that doesn't at the top. */
#app .app-scr.on{display:flex}
#app.menu::before{content:"";position:absolute;inset:0;background:rgba(26,20,16,.55)}
#app .app-scr.app-click{background:transparent;cursor:pointer}

#app .app-card{position:relative;background:var(--parchment);border:3px solid var(--hud-ink);border-radius:16px;
  box-shadow:0 10px 0 rgba(43,33,24,.85),0 26px 70px rgba(0,0,0,.5);padding:26px 30px;max-width:min(560px,92vw);
  width:100%;text-align:center}
#app .app-logo{font-size:clamp(54px,9vw,96px);letter-spacing:.08em;line-height:.95;color:#D2693F;
  text-shadow:3px 3px 0 var(--hud-ink)}
#app .app-h{font-size:30px;letter-spacing:.04em;margin-bottom:4px}
#app .app-sub{font-size:15px;opacity:.75;margin:6px auto 16px;max-width:44ch;line-height:1.3}
#app .app-col{display:flex;flex-direction:column;gap:10px;align-items:stretch;max-width:300px;margin:0 auto}
#app .app-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
#app .app-btn{font-family:var(--ui);font-size:20px;padding:10px 20px;border-radius:11px;cursor:pointer;
  background:#F4D58D;color:var(--hud-ink);border:3px solid var(--hud-ink);box-shadow:0 4px 0 var(--hud-ink)}
#app .app-btn:hover{background:#FFC965}
#app .app-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--hud-ink)}
#app .app-btn.primary{background:#E4572E;color:var(--parchment)}
#app .app-btn.primary:hover{background:#F06A40}
#app .app-btn.quiet{background:transparent;box-shadow:none;border-color:rgba(43,33,24,.35);font-size:17px}
#app .app-btn:disabled{opacity:.45;cursor:default}

#app .app-road{margin-top:18px;padding-top:12px;border-top:2px dashed rgba(43,33,24,.25)}
#app .app-road-lbl{font-size:14px;letter-spacing:.14em;opacity:.7}
#app .app-seed,#app .app-name,#app .app-set{display:flex;gap:10px;align-items:center;justify-content:center;
  margin-top:8px;font-size:15px}
#app .app-in{font-family:var(--ui);font-size:16px;padding:6px 10px;border:2px solid var(--hud-ink);border-radius:8px;
  background:#fff8e8;color:var(--hud-ink);width:13em}
#app .app-ver{margin-top:14px;font-size:12px;opacity:.5}
#app .app-home{position:absolute;left:16px;bottom:12px;display:flex;gap:12px;align-items:baseline;font-size:12px;color:var(--hud-ink);opacity:.7;text-shadow:0 0 4px rgba(251,243,223,.85)}
#app .app-home:hover{opacity:.95}
#app .app-house{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
#app .app-dbd{letter-spacing:.06em}
#app .app-val{min-width:3.4em;text-align:left}
#app .app-keys{margin-top:16px;font-size:13px;line-height:1.5;opacity:.75;text-align:left}

/* the cast */
#app .app-cast-card{max-width:min(900px,96vw)}
#app .app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px;margin-top:14px;text-align:left}
#app .app-castc{font-family:var(--ui);display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;
  column-gap:9px;padding:8px 10px;border:2px solid rgba(43,33,24,.3);border-radius:10px;background:#fff8e8;
  color:var(--hud-ink);cursor:pointer;text-align:left}
#app .app-castc:hover{border-color:var(--hud-ink)}
#app .app-castc.sel{border:3px solid var(--hud-ink);background:#F4D58D;box-shadow:0 3px 0 var(--hud-ink)}
#app .app-castc .robe{grid-row:1 / span 2;width:22px;height:34px;border-radius:6px 6px 10px 10px;border:2px solid var(--hud-ink)}
#app .app-castc .robe.lot{background:repeating-linear-gradient(45deg,#E4572E 0 5px,#F2C14E 5px 10px,#2E86DE 10px 15px,#8E44AD 15px 20px)}
#app .app-castc .cn{font-size:16px;line-height:1.1}
#app .app-castc .cl{font-size:12px;opacity:.7;line-height:1.2;font-style:italic}
#app .app-castc .cl.silent{letter-spacing:.3em}

/* the end card */
#app .app-end-card{max-width:min(760px,96vw)}
#app .app-end-h{font-size:40px;color:#D2693F;text-shadow:2px 2px 0 var(--hud-ink)}
#app .app-end-stats{font-size:17px;margin-bottom:12px}
#app .app-report{width:100%;border-collapse:collapse;font-size:15px}
#app .app-report th{font-weight:normal;font-size:12px;letter-spacing:.08em;opacity:.6;padding:4px 6px;text-align:right}
#app .app-report td{padding:5px 6px;border-top:1px solid rgba(43,33,24,.18);text-align:right}
#app .app-report td.who,#app .app-report th:first-child{text-align:left}
#app .app-report tr.left td{opacity:.6}
#app .app-badges{margin-top:14px;font-size:16px;color:#8E3B2A;min-height:1.2em}
#app .app-click-card{max-width:420px;pointer-events:none}

/* ─────────── lane NET's lobby (NOTES-C's CSS request, answered) — mounted in the app's lobby screen ─────────── */
#app .app-lobby{flex-direction:column;justify-content:flex-start}
#app .app-lobby-bar{align-self:stretch;display:flex;justify-content:flex-start;margin-bottom:8px;position:relative}
#app .app-lobby-mount{width:100%;display:flex;justify-content:center;position:relative}
#app .app-lobby-note{margin-top:12px}
.lobby{font-family:var(--ui);color:var(--hud-ink)}
.lobby.gone,.lobby[hidden]{display:none}
.lobby .lobby-panel.card{position:relative;left:auto;top:auto;transform:none;background:var(--parchment);color:var(--hud-ink);
  border:3px solid var(--hud-ink);border-radius:16px;max-width:min(860px,96vw);text-align:left}
.lobby-title{font-size:30px}
.lobby-sub,.lobby-hint{font-size:14px;opacity:.72}
.lobby-label{font-size:13px;letter-spacing:.1em;opacity:.65;margin-top:10px}
.lobby-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.lobby-input{font-family:var(--ui);font-size:16px;padding:6px 10px;border:2px solid var(--hud-ink);border-radius:8px;background:#fff8e8}
.lobby-btn{font-family:var(--ui);font-size:17px;padding:7px 16px;border-radius:10px;cursor:pointer;background:#F4D58D;
  border:3px solid var(--hud-ink);box-shadow:0 3px 0 var(--hud-ink);color:var(--hud-ink)}
.lobby-btn:disabled{opacity:.45}
.lobby-start{background:#E4572E;color:var(--parchment)}
.lobby-cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin-top:6px}
.lobby-cast-pick{display:flex;gap:7px;align-items:center;padding:5px 8px;border:2px solid rgba(43,33,24,.25);border-radius:9px;cursor:pointer;background:#fff8e8}
.lobby-cast-pick.sel{border-color:var(--hud-ink);background:#F4D58D}
.lobby-cast-pick.taken{opacity:.35;cursor:default}
.lobby-cast-line{font-size:11px;opacity:.65;font-style:italic}
.lobby-swatch{display:inline-block;width:14px;height:22px;border-radius:4px;border:2px solid var(--hud-ink);background:var(--robe,#ccc);flex:0 0 auto}
.lobby-roads{display:flex;flex-wrap:wrap;gap:6px}
.lobby-road{padding:4px 9px;border:2px solid rgba(43,33,24,.3);border-radius:8px;cursor:pointer;font-size:14px}
.lobby-road.sel{border-color:var(--hud-ink);background:#F4D58D}
.lobby-code{text-align:center;margin:12px 0}
.lobby-code-letters{font-size:64px;letter-spacing:.25em;line-height:1;color:#D2693F;text-shadow:3px 3px 0 var(--hud-ink)}
.lobby-roster{display:grid;gap:6px;margin-top:8px}
.lobby-seat{display:flex;gap:9px;align-items:center;padding:6px 9px;border:2px solid rgba(43,33,24,.25);border-radius:9px;background:#fff8e8}
.lobby-seat.empty{opacity:.5;border-style:dashed}
.lobby-seat.me{border-color:var(--hud-ink)}
.lobby-seat-cast{opacity:.65;font-size:13px}
.lobby-line{margin-left:auto;font-size:13px;padding:2px 8px;border-radius:7px}
.lobby-line-good{background:#5FCF5A;color:var(--hud-ink)}
.lobby-line-shake{background:#F5D65C;color:var(--hud-ink)}
.lobby-line-wobble{background:#E9A23B;color:var(--hud-ink)}
.lobby-line-dead{background:#C0392B;color:#fff;font-weight:bold;letter-spacing:.06em}
.lobby-line-quiet{opacity:.5}
.lobby-banner{display:none;margin-top:10px;padding:10px 12px;border:2px solid var(--hud-ink);border-radius:10px}
.lobby-banner.on{display:block}
.lobby-skew{background:#F5D65C}
.lobby-fail{background:#F4C0B0}
.lobby-fail-title{font-size:17px}
.lobby-fail-body{font-size:14px;line-height:1.4;white-space:normal}
.lobby-mic.on{background:#5FCF5A}
.lobby-mic.err{background:#C0392B;color:#fff}
#app .app-lobby-bar .app-btn.quiet{color:var(--parchment);border-color:rgba(251,243,223,.45)}
.lobby button,.lobby input{font-family:var(--ui)}

/* ── the road's news + the screen effects (integration pass; view/actions.js captionFor) ──
   Stable DOM: the lines are a fixed pool of four written by textContent, never rebuilt. */
#way-news{position:fixed;left:50%;top:16%;transform:translateX(-50%);z-index:20;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--ui);width:min(92vw,720px)}
#way-news .nl{padding:5px 14px;border-radius:9px;background:rgba(251,243,223,.9);color:var(--hud-ink);
  border:2px solid var(--hud-ink);font-size:18px;text-align:center;opacity:0;transform:translateY(-6px);
  transition:opacity .35s ease,transform .35s ease;max-width:100%}
#way-news .nl.on{opacity:1;transform:none}
#way-news .nl.warn{background:rgba(192,57,43,.92);color:var(--parchment);border-color:#5a1a12}
#way-news .nl.good{background:rgba(245,214,92,.95)}
#way-news .nl.big{font-size:30px;padding:10px 22px}
#way-fx{position:fixed;inset:0;z-index:19;pointer-events:none;opacity:0;transition:opacity .9s ease}
#way-fx.thunder{background:#fff;opacity:.55;transition:none}
#way-fx.gate{background:radial-gradient(ellipse at 50% 40%,rgba(255,236,160,.75),rgba(245,214,92,.25) 60%,rgba(0,0,0,0));opacity:1;transition:none}
#way-fx.gold{background:radial-gradient(ellipse at 50% 30%,rgba(255,236,160,.35),rgba(0,0,0,0) 70%);opacity:1;transition:none}

/* ─────────── fix round (lane APP) ─────────── */
/* §9.1 hold Q: the throw charge, above the slots. Stable DOM (hud.js setThrow), no transition. */
.hud-throw{position:absolute;right:16px;bottom:104px;width:190px;padding:5px 9px 7px;display:flex;flex-direction:column;gap:4px;
  background:var(--parchment);border:2px solid var(--hud-ink);border-radius:9px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.hud-throw .thr-lbl{font-size:13px;white-space:nowrap}
.hud-throw .thr-track{height:8px;border:2px solid var(--hud-ink);border-radius:5px;overflow:hidden;background:#fff8e8}
.hud-throw .thr-fill{display:block;height:100%;width:0;background:#E4572E}
.hud-throw.tap .thr-track{opacity:.35}
@media (max-width:760px){ .hud-throw{bottom:176px} }

/* unlocked: say how to get the mouse back, and how to look without it (main.js mouseChip) */
#app .app-mouse-chip{position:absolute;left:50%;top:14px;transform:translateX(-50%);pointer-events:none;
  background:var(--parchment);border:2px solid var(--hud-ink);border-radius:9px;padding:4px 12px;font-size:13px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);white-space:nowrap}
/* the click card's fullscreen offer is the one clickable thing on an otherwise pass-through card */
#app .app-click-card .app-btn{pointer-events:auto;margin-top:10px;font-size:16px}
/* §9.4: the app already asked who walks — the lobby does not ask again (its name + robe rows hide) */
#app .app-lobby-mount.picked .lobby-cast,
#app .app-lobby-mount.picked .lobby-name,
#app .app-lobby-mount.picked .lobby-label:has(+ .lobby-cast){display:none}
#app .app-end-card .app-row .app-btn.quiet{font-size:18px}

/* ─────────────────────────── LOOT-AND-LOOK §1.7 — HOW RARITY SHOWS ───────────────────────────
   Colour AND pips AND border width, never colour alone: Common (linen) and Treasured (gold) are
   close in grey-scale (relative luminance .78 / .62), so a slot also says its tier in pips (0–3 ◆)
   and in border weight (1 / 2 / 2 / 3 px). `--rar` is set per slot by hud.js from sim/items.js
   RARITY — the one table the glint, the toast and the prompt all read. ⚠️ No `transition:` (see
   the note at the top of the HUD block); the Treasured sheen is a keyframe background sweep, and
   a frozen one misreports nothing. */
.hud-slots .slot{position:relative}
.hud-slots .slot .slot-pips{position:absolute;top:3px;right:6px;font-style:normal;font-size:9px;letter-spacing:1px;
  color:var(--rar,var(--hud-ink));text-shadow:0 0 1px var(--hud-ink)}
.hud-slots .slot.rar0{border:1px solid rgba(239,228,203,.6);box-shadow:0 0 0 1px var(--hud-ink),0 6px 18px rgba(0,0,0,.35)}
.hud-slots .slot.rar1,.hud-slots .slot.rar2{border:2px solid var(--rar)}
.hud-slots .slot.rar3{border:3px solid var(--rar);overflow:hidden}
.hud-slots .slot.rar1 .slot-name,.hud-slots .slot.rar2 .slot-name{color:var(--rar)}
.hud-slots .slot.rar3 .slot-name{color:var(--rar);text-shadow:0 0 1px var(--hud-ink),0 1px 0 var(--hud-ink)}
.hud-slots .slot.held.rar1,.hud-slots .slot.held.rar2,.hud-slots .slot.held.rar3{border-color:var(--rar)}
.hud-slots .slot.rar3::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,244,200,.75) 50%,transparent 65%) no-repeat;
  background-size:250% 100%;background-position:180% 0;animation:rar-sheen 3s linear infinite}
@keyframes rar-sheen{0%{background-position:180% 0}40%,100%{background-position:-80% 0}}
#hud.photosafe .hud-slots .slot.rar3::after{animation:none;background:none}
@media (prefers-reduced-motion:reduce){ .hud-slots .slot.rar3::after{animation:none;background:none} }

/* the world prompt: the NAME wears its rarity colour, then its pips; a hold carries its ring */
.hud-prompt .p-row{align-items:center}
.hud-prompt .p-name.rar{font-weight:700;text-shadow:0 0 1px var(--hud-ink)}
.hud-prompt .p-pips{font-size:10px;letter-spacing:1px;text-shadow:0 0 1px var(--hud-ink)}
.hud-prompt .p-ring{flex:0 0 auto;color:#B4552E;margin-right:-2px}

/* §1.7's pickup toast — ONE node, rises above the slots for 2.2 s (hud.js toast) */
.hud-toast{position:absolute;right:16px;bottom:132px;min-width:190px;max-width:320px;padding:7px 12px 8px;
  background:var(--parchment);border:2px solid var(--hud-ink);border-radius:9px;box-shadow:0 6px 18px rgba(0,0,0,.35);
  display:flex;flex-direction:column;gap:2px;text-align:right}
.hud-toast.rar1,.hud-toast.rar2{border-color:currentColor}
.hud-toast .toast-name{font-size:17px;line-height:1.1;text-shadow:0 0 1px var(--hud-ink)}
.hud-toast .toast-word{font-size:11px;letter-spacing:.16em;font-variant:small-caps;text-shadow:0 0 1px var(--hud-ink)}
.hud-toast .toast-tip{font-size:12px;font-style:italic;opacity:.8;line-height:1.25;white-space:normal}
.hud-toast.rar3{border:3px solid #F7C948}
.hud-toast.on{animation:toast-rise .35s ease-out both}
@keyframes toast-rise{from{transform:translateY(10px)}to{transform:translateY(0)}}
@media (max-width:760px){ .hud-toast{bottom:204px} }

/* ─────────── THE LOOM (LOOT-AND-LOOK §4.5) — the pick, the turntable, the twelve slots ─────────── */
#app .app-cast-card.loom-card{max-width:min(1240px,98vw);padding:20px 22px}
#app .loom-wrap{display:grid;grid-template-columns:minmax(220px,1fr) 360px minmax(330px,380px);gap:16px;align-items:start;margin-top:10px;text-align:left}
@media (max-width:1100px){#app .loom-wrap{grid-template-columns:1fr 360px}#app .loom-right{grid-column:1 / -1}}
#app .loom-left .app-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin-top:0;max-height:560px;overflow:auto;padding-right:4px}
#app .loom-centre{display:flex;flex-direction:column;align-items:center;gap:8px}
#app .loom-stage{position:relative;width:360px;height:480px;border:3px solid var(--hud-ink);border-radius:14px;
  background:radial-gradient(ellipse at 50% 35%,#FFF6DE 0%,#F4E2B8 60%,#E3C78F 100%);overflow:hidden;cursor:grab}
#app .loom-stage:active{cursor:grabbing}
#app .loom-canvas{width:360px;height:480px;display:block;touch-action:none}
#app .loom-stage-note{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:13px;opacity:.6;pointer-events:none}
#app .loom-faces{display:flex;gap:6px}
#app .loom-face{font-family:var(--ui);font-size:14px;padding:4px 12px;border-radius:9px;border:2px solid rgba(43,33,24,.35);
  background:#fff8e8;color:var(--hud-ink);cursor:pointer}
#app .loom-face.sel{border-color:var(--hud-ink);background:#F4D58D}
#app .loom-h{font-size:24px;letter-spacing:.14em;margin-bottom:6px;text-align:center}
#app .loom-rows{display:flex;flex-direction:column;gap:4px}
#app .loom-row{display:grid;grid-template-columns:92px 30px 1fr 30px;align-items:center;gap:6px;padding:3px 6px;border-radius:8px;
  border:2px solid transparent;font-size:15px}
#app .loom-row.focus{border-color:rgba(43,33,24,.45);background:#fff8e8}
#app .loom-lbl{font-size:13px;letter-spacing:.06em;opacity:.7}
#app .loom-arr{font-family:var(--ui);font-size:14px;width:30px;height:28px;border-radius:7px;border:2px solid var(--hud-ink);
  background:#F4D58D;color:var(--hud-ink);cursor:pointer;padding:0}
#app .loom-val{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
#app .loom-chip{display:inline-block;width:14px;height:14px;border-radius:4px;border:2px solid var(--hud-ink);flex:0 0 auto}
#app .loom-name{font-weight:normal;white-space:nowrap}
#app .loom-note{font-size:11px;opacity:.7;font-style:italic;flex-basis:100%;line-height:1.1}
#app .loom-row.locked .loom-name{opacity:.55}
#app .loom-row.locked .loom-note{color:#8E3B2A;opacity:1}
#app .loom-acts{display:flex;gap:10px;justify-content:center;margin-top:10px}
#app .loom-acts .app-btn{font-size:16px;padding:6px 14px}
#app .loom-keys{margin-top:6px;font-size:11px;opacity:.55;text-align:center}
.lobby-loom[hidden]{display:none}