/* zWorld.css — loaded via zMeta.zBrush: [zWorld] -> /styles/zWorld.css
   Two skins in one brush:
   · Landing (.zw-*) — dark threshold page, D&D × Zarathustra: a gold hex-sun
     at great noon over a mountain ridge. Scoped via body:has(.zw-scene).
   · Map probe (.hex-*) — 7 flat hexes on one plane, camera = perspective +
     rotateX on the plane's parent. White void by design. */

:root {
    --hexw:  118px;
    --hexh:  calc(var(--hexw) * 1.1547);          /* pointy-top regular hex */
    --stepx: calc(var(--hexw) * 1.06);            /* 1.06 = tile gap */
    --stepy: calc(var(--hexw) * 1.1547 * 0.75 * 1.06);
    --tilt:  45deg;
    --cam:   900px;
    --ink:   #26221a;
    --mono:  'IBM Plex Mono', ui-monospace, monospace;
}

body {
    background: #ffffff;
    color: var(--ink);
    font-family: -apple-system, 'Inter', system-ui, sans-serif;
    margin: 0;
}

#zVaF-content {
    max-width: 860px;
    margin: 0 auto;
    padding: 48px 24px 64px;
    text-align: center;
}

/* ── heading ────────────────────────────────────────────────────────── */

.hex-title {
    font-family: 'Cinzel', serif;
    font-size: 2.6rem;
    letter-spacing: 0.22em;
    margin: 0;
}

.hex-tagline {
    color: #8b8578;
    font-family: var(--mono);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    margin-top: 8px;
}

/* ── the camera ─────────────────────────────────────────────────────── */

.hex-stage {
    margin: 12px auto 0;
    width: min(92vw, 640px);
    height: 460px;
    perspective: var(--cam);
    perspective-origin: 50% 32%;
}

.hex-board {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotateX(var(--tilt));
    transform-style: preserve-3d;
}

/* ── tiles: flat, positioned purely by their axial-coordinate classes ── */

.hex-tile {
    position: absolute;
    left: calc(50% - var(--hexw) / 2 + (var(--q) + var(--r) / 2) * var(--stepx));
    top:  calc(50% - var(--hexh) / 2 + var(--r) * var(--stepy));
    width: var(--hexw);
    height: var(--hexh);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    transition: transform 160ms ease;
}

.hex-tile:hover {
    transform: translateZ(18px);
}

.q-1 { --q: -1; }  .q0 { --q: 0; }  .q1 { --q: 1; }
.r-1 { --r: -1; }  .r0 { --r: 0; }  .r1 { --r: 1; }

/* ── tile text ──────────────────────────────────────────────────────── */

.hex-coord {
    font-family: var(--mono);
    font-size: 11px;
    margin: 0;
}

.hex-label {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0;
    padding: 0 14px;
}

/* ── terrain palette (flat fills, same-family darker text) ──────────── */

.terrain-camp     { background: #efe3c2; }
.terrain-camp     .hex-label { color: #6b5426; }
.terrain-camp     .hex-coord { color: #a08a53; }

.terrain-grass    { background: #b5d69a; }
.terrain-grass    .hex-label { color: #33591c; }
.terrain-grass    .hex-coord { color: #6d9950; }

.terrain-water    { background: #93cbe4; }
.terrain-water    .hex-label { color: #14425c; }
.terrain-water    .hex-coord { color: #4a86a5; }

.terrain-mountain { background: #c2bcb2; }
.terrain-mountain .hex-label { color: #464036; }
.terrain-mountain .hex-coord { color: #837c6f; }

.terrain-forest   { background: #7fae7e; }
.terrain-forest   .hex-label { color: #1d3d1d; }
.terrain-forest   .hex-coord { color: #416b41; }

.terrain-sand     { background: #ecd9a0; }
.terrain-sand     .hex-label { color: #6e5a1e; }
.terrain-sand     .hex-coord { color: #a98f4a; }

.terrain-ruins    { background: #b5a8d6; }
.terrain-ruins    .hex-label { color: #3b2b63; }
.terrain-ruins    .hex-coord { color: #6f5f9c; }

/* ── footnote ───────────────────────────────────────────────────────── */

.hex-note {
    color: #a39c8c;
    font-family: var(--mono);
    font-size: 0.75rem;
    margin-top: 4px;
}

/* ── small screens: shrink the tiles, everything else re-derives ────── */

@media (max-width: 480px) {
    :root { --hexw: 88px; }
    .hex-stage { height: 360px; }
    .hex-title { font-size: 1.8rem; }
    .hex-label { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════════
   LANDING — the threshold. Everything below is scoped to pages that
   contain .zw-scene so the Map probe keeps its white void.
   ════════════════════════════════════════════════════════════════════ */

body:has(.zw-scene) {
    background: #0a0805;
}

body:has(.zw-scene) #zVaF-content {
    max-width: none;
    padding: 0;
    margin: 0;
}

.zw-scene {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 38%, rgba(216, 160, 60, 0.16) 0%, rgba(216, 160, 60, 0.05) 32%, transparent 55%),
        radial-gradient(1px 1px at 12% 18%, rgba(255, 236, 190, 0.55) 0 1px, transparent 2px),
        radial-gradient(1px 1px at 26% 9%,  rgba(255, 236, 190, 0.35) 0 1px, transparent 2px),
        radial-gradient(1.5px 1.5px at 38% 24%, rgba(255, 236, 190, 0.45) 0 1px, transparent 2px),
        radial-gradient(1px 1px at 63% 12%, rgba(255, 236, 190, 0.5) 0 1px, transparent 2px),
        radial-gradient(1.5px 1.5px at 78% 21%, rgba(255, 236, 190, 0.4) 0 1px, transparent 2px),
        radial-gradient(1px 1px at 89% 8%,  rgba(255, 236, 190, 0.55) 0 1px, transparent 2px),
        radial-gradient(1px 1px at 71% 33%, rgba(255, 236, 190, 0.3) 0 1px, transparent 2px),
        radial-gradient(1px 1px at 8% 41%,  rgba(255, 236, 190, 0.3) 0 1px, transparent 2px),
        linear-gradient(180deg, #060504 0%, #0d0a06 42%, #1a1208 74%, #241708 100%);
}

/* the hex-sun at great noon — one glyph of the map, raised to a sky */
.zw-scene::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 30%;
    width: min(42vw, 340px);
    aspect-ratio: 1 / 1.1547;
    transform: translate(-50%, -56%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: radial-gradient(circle at 50% 42%,
        #f7dd9b 0%, #eec25e 34%, #c78f2e 62%, #8a5a13 88%, #6d4208 100%);
    filter: drop-shadow(0 0 60px rgba(238, 194, 94, 0.4))
            drop-shadow(0 0 140px rgba(238, 194, 94, 0.18));
    opacity: 0.85;
}

/* the ridge Zarathustra comes down from */
.zw-scene::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30vh;
    clip-path: polygon(0 100%, 0 52%, 7% 68%, 15% 44%, 24% 63%, 33% 36%,
        44% 60%, 52% 30%, 63% 58%, 73% 40%, 82% 62%, 91% 48%, 100% 60%, 100% 100%);
    background: linear-gradient(180deg, #17100a 0%, #0c0805 60%, #080604 100%);
}

.zw-hero {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 44px 56px;
    background: radial-gradient(ellipse closest-side,
        rgba(9, 7, 4, 0.62) 0%, rgba(9, 7, 4, 0.38) 55%, transparent 78%);
}

.zw-kicker {
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    color: #d3ab60;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
    margin: 0 0 18px;
}

.zw-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(3.2rem, 9vw, 5.4rem);
    font-weight: 700;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    color: #f8e6ab;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.85),
                 0 0 34px rgba(238, 194, 94, 0.35);
    margin: 0;
}

.zw-epigraph {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.2rem, 2.7vw, 1.55rem);
    color: #f2e7c6;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
    max-width: 34em;
    margin: 26px auto 6px;
    line-height: 1.5;
}

.zw-attrib {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.28em;
    color: #cba765;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
    margin: 0 0 44px;
}

.zw-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.zw-btn {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    text-decoration: none;
    padding: 16px 42px;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%,
        calc(100% - 12px) 100%, 12px 100%, 0 50%);
    transition: transform 150ms ease, filter 150ms ease, background 150ms ease;
    display: inline-block;
}

.zw-btn:hover {
    transform: translateY(-2px);
}

.zw-btn-primary {
    background: linear-gradient(180deg, #efc76a 0%, #d9a63e 55%, #b57f22 100%);
    color: #241a06 !important;
}

.zw-btn-primary:hover {
    filter: drop-shadow(0 0 22px rgba(238, 194, 94, 0.55));
}

.zw-btn-ghost {
    background: rgba(238, 194, 94, 0.07);
    box-shadow: inset 0 0 0 1px rgba(238, 194, 94, 0.45);
    color: #e8cd8a !important;
}

.zw-btn-ghost:hover {
    background: rgba(238, 194, 94, 0.16);
}

.zw-foot {
    position: absolute;
    z-index: 2;
    bottom: 26px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    color: rgba(216, 201, 163, 0.42);
    margin: 0;
}

@media (max-width: 480px) {
    .zw-actions { gap: 12px; }
    .zw-btn { padding: 14px 30px; font-size: 0.85rem; }
    .zw-scene::before { top: 40%; }
}

/* ── the create-user door ───────────────────────────────────────────── */

.zw-actions button.zw-btn {
    border: 0;
    cursor: pointer;
}

.zw-btn-door {
    background: rgba(238, 194, 94, 0.12);
    box-shadow: inset 0 0 0 1px rgba(238, 194, 94, 0.65),
                inset 0 0 22px rgba(238, 194, 94, 0.10);
    color: #f2d998 !important;
}

.zw-btn-door:hover {
    background: rgba(238, 194, 94, 0.22);
    filter: drop-shadow(0 0 16px rgba(238, 194, 94, 0.35));
}

/* ── sign-up modal: retheme the default (light) zModal chrome ───────── */

body:has(.zw-scene) .zModal-overlay {
    background: rgba(5, 4, 2, 0.82);
    backdrop-filter: blur(3px);
}

body:has(.zw-scene) .zModal-card {
    background: linear-gradient(180deg, #171008 0%, #0e0a05 100%);
    border: 1px solid rgba(238, 194, 94, 0.38);
    border-radius: 6px;
    box-shadow: 0 0 70px rgba(238, 194, 94, 0.14), 0 30px 60px rgba(0, 0, 0, 0.65);
    color: #d8c9a3;
    padding: 34px 38px;
    max-width: 420px;
}

body:has(.zw-scene) .zModal-close {
    color: #9b7f4b;
}

body:has(.zw-scene) .zModal-close:hover {
    color: #f2d998;
}

/* ── pause modal (World page): the client wires exactly THREE dismiss
   triggers — its own auto-injected ×, a backdrop click, Escape — and NO
   content-authored button can reach a 4th (see zUI.World.zolo's
   !modal_dismiss note). So the WORKING × becomes "Resume the wandering"
   itself (restyled into a normal menu row) instead of a decorative,
   non-functional stand-in. Scoped to the World page via .world-slot, the
   same body:has() idiom the Sign_Up modal already uses for .zw-scene. ── */
body:has(.world-slot) .zModal-overlay {
    background: rgba(8, 6, 3, 0.86);
    backdrop-filter: blur(3px);
}
body:has(.world-slot) .zModal-card {
    background: linear-gradient(180deg, #171008 0%, #0e0a05 100%);
    border: 1px solid rgba(238, 194, 94, 0.34);
    border-radius: 8px;
    box-shadow: 0 0 70px rgba(238, 194, 94, 0.14), 0 30px 60px rgba(0, 0, 0, 0.65);
    color: #d8c9a3;
    padding: 8px 14px;
    width: min(360px, 100%);
}
body:has(.world-slot) .zModal-close {
    /* the native × is absolutely-positioned top-right by default (zbase.css)
       — pull it into normal flow as the menu's first row */
    position: static;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-size: 0;   /* hides the native "×" textContent */
    line-height: 0;
    opacity: 1;
    padding: 12px 10px 11px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid rgba(238, 194, 94, 0.14);
    background: transparent;
    cursor: pointer;
}
body:has(.world-slot) .zModal-close::before {
    content: "◈  Resume the wandering";
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 1.06rem;
    line-height: 1.3;
    color: #f2d998;
}
body:has(.world-slot) .zModal-close:hover::before { color: #fff2c9; }

body:has(.zw-scene) .zw-signup-note {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #c9b98e;
    margin: 0 0 18px;
}

body:has(.zw-scene) .zModal-card .zDialog-title,
body:has(.zw-scene) .zModal-card h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    letter-spacing: 0.18em;
    color: #f2d998;
    margin: 0 0 14px;
}

body:has(.zw-scene) .zModal-card label {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9b7f4b;
}

body:has(.zw-scene) .zModal-card input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 240, 200, 0.05);
    border: 1px solid rgba(238, 194, 94, 0.28);
    border-radius: 3px;
    padding: 12px 14px;
    margin: 6px 0 16px;
    font-family: var(--mono);
    font-size: 0.95rem;
    color: #f0e6c8;
}

body:has(.zw-scene) .zModal-card input:focus {
    outline: none;
    border-color: rgba(238, 194, 94, 0.75);
    box-shadow: 0 0 0 3px rgba(238, 194, 94, 0.14);
}

body:has(.zw-scene) .zModal-card button[type='submit'] {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    border: 0;
    cursor: pointer;
    width: 100%;
    padding: 14px 0;
    border-radius: 3px;
    background: linear-gradient(180deg, #efc76a 0%, #d9a63e 55%, #b57f22 100%);
    color: #241a06;
    transition: filter 150ms ease;
}

body:has(.zw-scene) .zModal-card button[type='submit']:hover {
    filter: drop-shadow(0 0 18px rgba(238, 194, 94, 0.45));
}

/* ── login page: the panel is the modal card, grounded ──────────────── */

.zw-panel {
    position: relative;
    z-index: 2;
    width: min(92vw, 400px);
    padding: 40px 46px;
    text-align: center;
    background: linear-gradient(180deg, #171008 0%, #0e0a05 100%);
    border: 1px solid rgba(238, 194, 94, 0.38);
    border-radius: 6px;
    box-shadow: 0 0 70px rgba(238, 194, 94, 0.14), 0 30px 60px rgba(0, 0, 0, 0.65);
    color: #d8c9a3;
}

body:has(.zw-scene) .zw-panel .zDialog-title,
body:has(.zw-scene) .zw-panel h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    letter-spacing: 0.18em;
    color: #f2d998;
    margin: 10px 0 14px;
}

body:has(.zw-scene) .zw-panel label {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9b7f4b;
}

body:has(.zw-scene) .zw-panel input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 240, 200, 0.05);
    border: 1px solid rgba(238, 194, 94, 0.28);
    border-radius: 3px;
    padding: 12px 14px;
    margin: 6px 0 16px;
    font-family: var(--mono);
    font-size: 0.95rem;
    color: #f0e6c8;
}

body:has(.zw-scene) .zw-panel input:focus {
    outline: none;
    border-color: rgba(238, 194, 94, 0.75);
    box-shadow: 0 0 0 3px rgba(238, 194, 94, 0.14);
}

body:has(.zw-scene) .zw-panel button[type='submit'] {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    border: 0;
    cursor: pointer;
    width: 100%;
    padding: 14px 0;
    border-radius: 3px;
    background: linear-gradient(180deg, #efc76a 0%, #d9a63e 55%, #b57f22 100%);
    color: #241a06;
    transition: filter 150ms ease;
}

body:has(.zw-scene) .zw-panel button[type='submit']:hover {
    filter: drop-shadow(0 0 18px rgba(238, 194, 94, 0.45));
}

/* ── session bar + quiet text links ─────────────────────────────────── */

.zw-session {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 26px;
}

.zw-session-name {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: #b39055;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
    margin: 0;
}

button.zw-signout,
button.zw-link {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    color: #d3ab60;
    text-decoration: underline dotted rgba(238, 194, 94, 0.5);
    text-underline-offset: 4px;
    padding: 2px 0;
}

button.zw-signout:hover,
button.zw-link:hover {
    color: #f2d998;
}

button.zw-link {
    margin-top: 18px;
}

/* ════════════════════════════════════════════════════════════════════
   BOARD DEV VIEW — game layout: tilted board (left) + current-hex panel
   (right). Scoped under .hex-game so it never touches the landing scene.
   ════════════════════════════════════════════════════════════════════ */

/* GAME MODE: full-bleed. Kill the web-page container so the arena fills the
   viewport; HUD floats in the corners over the board. */
body:has(.hex-game) #zVaF-content {
    max-width: none;
    margin: 0;
    padding: 0;
}

.hex-game {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;   /* the board (only in-flow child) centers */
    overflow: hidden;
}

/* the board fills the central play area; HUD sits on top at the edges */
.hex-game .hex-stage {
    margin: 0;
    width: min(96vw, 940px);
    height: min(82vh, 760px);
}

/* "you are here" — the center hex glows as the standing tile. filter (not
   box-shadow) so the halo follows the clip-path silhouette, not the box. */
.hex-tile.q0.r0 {
    filter: drop-shadow(0 0 6px rgba(238, 194, 94, 0.95))
            drop-shadow(0 0 18px rgba(238, 194, 94, 0.55));
    z-index: 5;
}

/* ── the current-hex readout: a HUD panel pinned bottom-left ─────────── */

.hex-panel {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 10;
    width: min(86vw, 340px);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(23, 16, 8, 0.94) 0%, rgba(14, 10, 5, 0.94) 100%);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(238, 194, 94, 0.34);
    border-radius: 8px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6);
    color: #d8c9a3;
}

/* ════════════════════════════════════════════════════════════════════
   HUD — corner overlays. All z-index 10, above the board.
   ════════════════════════════════════════════════════════════════════ */

/* top-left: menu button */
.hud-menu {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 10;
}

button.hud-menu-btn {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
    line-height: 1;
    color: #f2d998;
    background: linear-gradient(180deg, rgba(23, 16, 8, 0.92) 0%, rgba(14, 10, 5, 0.92) 100%);
    border: 1px solid rgba(238, 194, 94, 0.42);
    border-radius: 8px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
button.hud-menu-btn:hover {
    border-color: rgba(238, 194, 94, 0.85);
    box-shadow: 0 0 18px rgba(238, 194, 94, 0.3);
}

/* top-right: character dashboard */
.hud-dash {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px 12px 12px;
    background: linear-gradient(180deg, rgba(23, 16, 8, 0.92) 0%, rgba(14, 10, 5, 0.92) 100%);
    border: 1px solid rgba(238, 194, 94, 0.34);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    color: #d8c9a3;
}

.hud-portrait {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #241a06;
    background: radial-gradient(circle at 50% 38%, #f7dd9b 0%, #e0b054 60%, #b57f22 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    margin: 0;
}

.hud-ident { min-width: 168px; }

.hud-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.02rem;
    color: #f2d998;
    margin: 0;
    line-height: 1.1;
}

.hud-role {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: #b39a6a;
    margin: 1px 0 8px;
}

.hud-hp-label {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    color: #cf9a5a;
    margin: 0 0 4px;
}

.hud-hp-track {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 240, 200, 0.09);
    box-shadow: inset 0 0 0 1px rgba(238, 194, 94, 0.2);
    overflow: hidden;
}

.hud-hp-fill {
    width: 90%;   /* mock */
    height: 100%;
    background: linear-gradient(90deg, #b57f22 0%, #efc76a 100%);
}

.hud-stats {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.hud-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    padding: 4px 8px;
    border-radius: 5px;
    background: rgba(238, 194, 94, 0.06);
    border: 1px solid rgba(238, 194, 94, 0.16);
}

.hud-stat-k {
    font-family: var(--mono);
    font-size: 0.54rem;
    letter-spacing: 0.14em;
    color: #8a744a;
    margin: 0;
}

.hud-stat-v {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1rem;
    color: #f2d998;
    margin: 0;
}

/* ── the pause menu modal (themed for the board scene) ──────────────── */

body:has(.hex-game) .zModal-overlay {
    background: rgba(4, 3, 2, 0.8);
    backdrop-filter: blur(3px);
}

body:has(.hex-game) .zModal-card {
    background: linear-gradient(180deg, #171008 0%, #0d0905 100%);
    border: 1px solid rgba(238, 194, 94, 0.4);
    border-radius: 8px;
    box-shadow: 0 0 70px rgba(238, 194, 94, 0.12), 0 30px 60px rgba(0, 0, 0, 0.7);
    padding: 30px 34px;
    min-width: 320px;
}

body:has(.hex-game) .zModal-close { color: #9b7f4b; }
body:has(.hex-game) .zModal-close:hover { color: #f2d998; }

.gm-title {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    color: #8a744a;
    text-align: center;
    margin: 0 0 20px;
}

.gm-item {
    /* now real controls (zBtn / zURL) — normalize both to the menu-row look */
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    text-decoration: none;
    background: transparent;
    border: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.06rem;
    color: #d8c9a3;
    padding: 11px 10px;
    border-top: 1px solid rgba(238, 194, 94, 0.12);
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
    margin: 0;
}
.gm-item:hover {
    color: #f2d998;
    background: rgba(238, 194, 94, 0.06);
}
.gm-item-lead { color: #f2d998; }
.gm-item-leave { color: #b59a6a; }
.gm-item-leave:hover { color: #d9b87a; }

.hp-head {
    padding: 20px 22px 18px;
    border-bottom: 1px solid rgba(238, 194, 94, 0.22);
    position: relative;
    /* override the terrain-<name> fill this element also carries — gold text
       was unreadable on the light parchment. Header stays dark like the rest
       of the panel; terrain now reads ONLY as the left accent bar (::before). */
    background: rgba(238, 194, 94, 0.05);
}

/* the terrain fill bleeds in as a left accent bar on the header */
.hp-head::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
}
.hp-head.terrain-camp::before     { background: #efe3c2; }
.hp-head.terrain-grass::before    { background: #b5d69a; }
.hp-head.terrain-water::before    { background: #93cbe4; }
.hp-head.terrain-mountain::before { background: #c2bcb2; }
.hp-head.terrain-forest::before   { background: #7fae7e; }
.hp-head.terrain-sand::before     { background: #ecd9a0; }
.hp-head.terrain-ruins::before    { background: #b5a8d6; }

.hp-coord {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: #9b7f4b;
    margin: 0 0 4px;
}

.hp-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #f2d998;
    margin: 0;
}

.hp-diff {
    display: inline-block;
    margin: 10px 0 0;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: #e2b45a;
    border: 1px solid rgba(238, 194, 94, 0.4);
    border-radius: 3px;
    padding: 3px 10px;
}

.hp-blurb {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.12rem;
    line-height: 1.5;
    color: #cdbe93;
    margin: 14px 0 0;
}

.hp-section {
    padding: 16px 22px;
    border-bottom: 1px solid rgba(238, 194, 94, 0.14);
}

.hp-section-title {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.34em;
    color: #8a744a;
    margin: 0 0 12px;
}

.hp-obj {
    margin: 0 0 12px;
    padding-left: 14px;
    border-left: 2px solid rgba(238, 194, 94, 0.3);
}
.hp-obj:last-child { margin-bottom: 0; }

.hp-obj-name {
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    color: #e8cd8a;
    margin: 0 0 2px;
}

.hp-obj-note {
    font-size: 0.86rem;
    line-height: 1.45;
    color: #a99e82;
    margin: 0;
}

.hp-visit {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(238, 194, 94, 0.14);
}
.hp-visit:last-child { border-bottom: 0; }

.hp-visit-turn {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: #e2b45a;
    background: rgba(238, 194, 94, 0.1);
    border-radius: 3px;
    padding: 2px 8px;
    margin: 0;
    white-space: nowrap;
}

.hp-visit-when {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1rem;
    color: #c9b98e;
    margin: 0;
}

@media (max-width: 720px) {
    .hex-game { gap: 20px; }
    .hex-panel { max-width: none; flex-basis: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   BOARD SCENE — the twilight world below the mountain. Same palette as the
   landing, quieter: no blazing sun (the hex cluster is the focal light now),
   a low amber horizon-glow, a scatter of high stars. Scoped to .hex-game so
   the panel/landing are untouched. Retires the dev white void.
   ════════════════════════════════════════════════════════════════════ */

body:has(.hex-game) {
    background:
        radial-gradient(1px 1px   at 18% 13%, rgba(255, 236, 190, 0.40) 0 1px, transparent 2px),
        radial-gradient(1px 1px   at 34% 8%,  rgba(255, 236, 190, 0.26) 0 1px, transparent 2px),
        radial-gradient(1.4px 1.4px at 63% 11%, rgba(255, 236, 190, 0.34) 0 1px, transparent 2px),
        radial-gradient(1px 1px   at 81% 9%,  rgba(255, 236, 190, 0.40) 0 1px, transparent 2px),
        radial-gradient(1px 1px   at 90% 19%, rgba(255, 236, 190, 0.24) 0 1px, transparent 2px),
        radial-gradient(1px 1px   at 8% 26%,  rgba(255, 236, 190, 0.22) 0 1px, transparent 2px),
        radial-gradient(ellipse 95% 55% at 50% 116%, rgba(216, 160, 60, 0.16) 0%, transparent 58%),
        linear-gradient(180deg, #070604 0%, #0d0a06 50%, #120d07 100%);
    background-repeat: no-repeat;
    /* NO background-attachment: fixed — on a page taller than the viewport it
       stops at one screen-height and the white default bleeds in below. Let it
       cover the full document instead. */
    background-color: #0a0805;
    min-height: 100vh;
}

/* title + tagline were near-black (dev ink) — lift to gold so they read */
body:has(.hex-game) .hex-title {
    color: #f2d998;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 0 26px rgba(238, 194, 94, 0.28);
}

body:has(.hex-game) .hex-tagline {
    color: #b39a6a;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
}

/* a soft amber pool under the board so the cluster feels lit, not floating */
body:has(.hex-game) .hex-stage {
    background: radial-gradient(ellipse 62% 52% at 50% 44%,
        rgba(238, 194, 94, 0.09) 0%, transparent 68%);
}

/* the bright terrain fills now sit on near-black — give each tile a faint
   dark seat so edges read and the cluster gains a little depth */
body:has(.hex-game) .hex-tile {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}
/* keep the center's gold halo winning over the seat shadow */
body:has(.hex-game) .hex-tile.q0.r0 {
    box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════
   THE CHARACTER PAWN — a standing gold game-piece on the tilted board.
   Positioned by the same axial q/r classes as a tile (movement later = a
   coord change). The figure counter-rotates the board's 45° tilt so it
   stands upright facing the camera; a flat shadow stays on the ground.
   ════════════════════════════════════════════════════════════════════ */

.pawn {
    position: absolute;
    left: calc(50% - var(--hexw) / 2 + (var(--q) + var(--r) / 2) * var(--stepx));
    top:  calc(50% - var(--hexh) / 2 + var(--r) * var(--stepy));
    width: var(--hexw);
    height: var(--hexh);
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    pointer-events: none;
    z-index: 6;
}

/* cast shadow — a flat ellipse that STAYS on the board plane (no counter-
   rotation), so it reads as a shadow on the ground beneath the figure */
.pawn-shadow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 22px;
    transform: translate(-50%, -20%);
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 45%, transparent 72%);
    border-radius: 50%;
    filter: blur(1.5px);
}

/* the standing billboard: cancel the board's rotateX(45) so the figure is
   upright + camera-facing, pivoting on its base */
.pawn-figure {
    position: relative;
    width: 42px;
    height: 70px;
    transform-origin: bottom center;
    transform: translateY(-6px) rotateX(-45deg);
    transform-style: preserve-3d;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.4));
}

/* head — a lit gold sphere */
.pawn-head {
    position: absolute;
    left: 50%;
    top: 0;
    width: 27px;
    height: 27px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%,
        #fbe9b0 0%, #efc76a 40%, #c78f2e 72%, #8a5a13 100%);
}

/* body — a carved base flaring from a pinched neck to a wide foot */
.pawn-body {
    position: absolute;
    left: 50%;
    top: 19px;
    width: 42px;
    height: 51px;
    transform: translateX(-50%);
    clip-path: polygon(40% 0, 60% 0, 70% 18%, 52% 30%, 86% 100%, 14% 100%, 48% 30%, 30% 18%);
    background: linear-gradient(90deg,
        #6d4208 0%, #c78f2e 24%, #f7dd9b 50%, #c78f2e 76%, #6d4208 100%);
}

/* ════════════════════════════════════════════════════════════════════
   3D WORLD (Three.js widget) — full-bleed WebGL canvas owns the screen.
   The zCLI fallback list is hidden in Bifrost (data-only, for the terminal).
   ════════════════════════════════════════════════════════════════════ */

body:has(.world-slot) {
    background: #0b0906;
}
body:has(.world-slot) #zVaF-content {
    max-width: none;
    margin: 0;
    padding: 0;
}

.world-slot {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.world-slot canvas {
    display: block;
}

/* the terminal-only data list — never shown in the browser render */
body:has(.world-slot) .world-cli {
    display: none;
}

/* ════════════════════════════════════════════════════════════════════
   GAME OVER — vigor hit 0. The board is "scratched": desaturated, dimmed,
   inert (raycasting is gated off in JS) — a memory, not a control surface.
   The interactive HUD (actions, story, bag, menu) steps aside; only the
   dashboard (a final vigor 0 epitaph) and the epilogue card remain.
   ════════════════════════════════════════════════════════════════════ */

body.zw-ended .world-slot canvas {
    filter: grayscale(0.88) brightness(0.4) contrast(0.92);
    transition: filter 1.4s ease;
}
body.zw-ended .action-slot,
body.zw-ended .hud-story,
body.zw-ended .hex-panel,
body.zw-ended .hud-bag,
body.zw-ended .hud-menu {
    display: none;
}

.gameover-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    width: min(90vw, 620px);
    box-sizing: border-box;
    padding: 40px 44px;
    background: linear-gradient(180deg, #171008 0%, #0b0704 100%);
    border: 1px solid rgba(238, 194, 94, 0.4);
    border-radius: 10px;
    box-shadow: 0 0 90px rgba(238, 194, 94, 0.14), 0 40px 80px rgba(0, 0, 0, 0.75);
    color: #d8c9a3;
    text-align: center;
}
.go-kicker {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.36em;
    text-indent: 0.36em;
    color: #b56b4a;
    margin: 0 0 16px;
}
.go-title {
    font-family: 'Cinzel', serif;
    font-size: 1.7rem;
    letter-spacing: 0.06em;
    color: #f2d998;
    margin: 0 0 22px;
}
.go-epilogue {
    font-family: 'Spectral', serif;
    font-weight: 500;
    font-size: 1.28rem;
    line-height: 1.62;
    color: #eee0ba;
    margin: 0 0 30px;
    text-align: left;
}
a.go-back {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    color: #1c1204;
    padding: 12px 26px;
    border-radius: 24px;
    background: linear-gradient(180deg, #f7dd9b 0%, #e0b054 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
a.go-back:hover { filter: brightness(1.06); }

.world-err {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--mono);
    font-size: 0.9rem;
    color: #d98a5a;
    text-align: center;
    padding: 0 24px;
}

/* ════════════════════════════════════════════════════════════════════
   3D HUD — the 2D game UI (menu / dashboard / current-hex card) floated
   OVER the WebGL canvas. Reuses the CSS-board classes verbatim; only the
   positioning changes to fixed + above the canvas. Scoped to the 3D page
   (body:has(.world-slot)) so the CSS-board view (.hex-game) is untouched.
   ════════════════════════════════════════════════════════════════════ */

body:has(.world-slot) .hud-menu,
body:has(.world-slot) .hud-dash,
body:has(.world-slot) .hex-panel {
    position: fixed;
    z-index: 20;
}

/* the card floats bottom-left over the board; keep it from swallowing the
   whole left edge for pointer events on the canvas later */
body:has(.world-slot) .hex-panel {
    max-height: calc(100vh - 160px);
}

/* pause menu modal — themed for the 3D scene (mirrors the board version) */
body:has(.world-slot) .zModal-overlay {
    background: rgba(4, 3, 2, 0.8);
    backdrop-filter: blur(3px);
}
body:has(.world-slot) .zModal-card {
    background: linear-gradient(180deg, #171008 0%, #0d0905 100%);
    border: 1px solid rgba(238, 194, 94, 0.4);
    border-radius: 8px;
    box-shadow: 0 0 70px rgba(238, 194, 94, 0.12), 0 30px 60px rgba(0, 0, 0, 0.7);
    padding: 30px 34px;
    min-width: 320px;
}
body:has(.world-slot) .zModal-close { color: #9b7f4b; }
body:has(.world-slot) .zModal-close:hover { color: #f2d998; }

/* ════════════════════════════════════════════════════════════════════
   STORY CARD — the narrative's own stage: one wide horizontal card,
   top-center over the board. A gold sweep announces every new line.
   ════════════════════════════════════════════════════════════════════ */

.hud-story {
    /* the narrator's text box lives BOTTOM-LEFT (classic RPG grammar) —
       the top-center perch overlaid the dashboard and crowned the board;
       the chronicle drawer freed this corner */
    position: fixed;
    bottom: 64px;
    left: 22px;
    width: min(44vw, 640px);
    z-index: 25;
    box-sizing: border-box;
    padding: 16px 26px 18px;
    background: linear-gradient(180deg, rgba(26, 18, 8, 0.96) 0%, rgba(14, 10, 5, 0.96) 100%);
    border: 1px solid rgba(238, 194, 94, 0.4);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(5px);
    text-align: left;
}
.hud-story:empty { display: none; }

.story-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}
.story-loc {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #b3924e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.story-head .roll-badge { margin: 0; flex: none; }

.story-text {
    /* Spectral: a literary serif built for on-screen reading — dominant and
       legible where Cormorant Garamond's only loaded cut is italic (that's
       what read as "hard to read" no matter the font-style rule) */
    font-family: 'Spectral', serif;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.58;
    letter-spacing: 0.003em;
    color: #f5e9c8;
    margin: 0;
    max-height: 26vh;
    overflow-y: auto;
    padding-right: 8px;
}
.story-text::-webkit-scrollbar { width: 5px; }
.story-text::-webkit-scrollbar-thumb {
    background: rgba(238, 194, 94, 0.28); border-radius: 3px;
}

/* the tale advanced — a gold flare that settles (opacity/glow only: the
   card's centering transform must never be animated) */
@keyframes storyIn {
    0% {
        opacity: 0.2;
        border-color: rgba(247, 221, 155, 0.95);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 42px rgba(238, 194, 94, 0.55);
    }
    45% {
        opacity: 1;
        border-color: rgba(247, 221, 155, 0.8);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 26px rgba(238, 194, 94, 0.35);
    }
    100% {
        opacity: 1;
        border-color: rgba(238, 194, 94, 0.4);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    }
}
.hud-story.story-flash { animation: storyIn 950ms ease-out; }

/* narrow screens: the top row is menu + dashboard — the story card slides
   under them, full width */


.action-slot {
    position: fixed;
    top: 248px;
    right: 22px;
    z-index: 20;
    width: min(90vw, 372px);
    max-height: calc(100vh - 272px);
    overflow-y: auto;
    padding: 18px 20px;
    background: linear-gradient(180deg, rgba(23, 16, 8, 0.94) 0%, rgba(14, 10, 5, 0.94) 100%);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(238, 194, 94, 0.34);
    border-radius: 10px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
    color: #d8c9a3;
    /* the app shell centers text (#zVaF-content) — prose panels read left */
    text-align: left;
}
.action-slot:empty { display: none; }
.action-slot.action-busy { opacity: 0.6; pointer-events: none; }

.action-here {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #9b7f4b;
    margin: 0 0 8px;
}

.action-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

button.action-opt {
    text-align: left;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: #e8cd8a;
    background: rgba(238, 194, 94, 0.07);
    border: 1px solid rgba(238, 194, 94, 0.28);
    border-radius: 5px;
    padding: 10px 13px;
    cursor: pointer;
    transition: background 130ms ease, border-color 130ms ease, transform 130ms ease;
}
button.action-opt:hover {
    background: rgba(238, 194, 94, 0.16);
    border-color: rgba(238, 194, 94, 0.6);
    transform: translateX(2px);
}
button.action-opt:active { transform: translateX(2px) scale(0.99); }

/* a picked-but-not-yet-rolled move — same treatment on options, take-items,
   creature actions; nothing happens to the world until the dice fire */
button.pending-selected {
    background: rgba(238, 194, 94, 0.26) !important;
    border-color: rgba(247, 221, 155, 0.85) !important;
    box-shadow: 0 0 0 1px rgba(247, 221, 155, 0.3) inset;
}

.action-form { margin: 0; }

input.action-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 240, 200, 0.05);
    border: 1px solid rgba(238, 194, 94, 0.24);
    border-radius: 5px;
    padding: 10px 13px;
    font-family: var(--mono);
    font-size: 0.85rem;
    color: #f0e6c8;
}
input.action-input::placeholder { color: #8a744a; }
input.action-input:focus {
    outline: none;
    border-color: rgba(238, 194, 94, 0.7);
    box-shadow: 0 0 0 3px rgba(238, 194, 94, 0.12);
}

/* the roll control — the ONE trigger that commits a turn. A staged pick
   (act/take/engage) waits here until the dice are rolled. */
.action-roll {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(238, 194, 94, 0.24);
    text-align: center;
}
.action-roll-empty { color: #7a6440; }
.action-roll-hint {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.92rem;
    color: #7a6440;
    margin: 0;
}
.action-roll-label {
    font-family: 'Cinzel', serif;
    font-size: 0.86rem;
    color: #f2d998;
    margin: 0 0 10px;
}
button.action-roll-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: #1c1204;
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid #f7dd9b;
    background: linear-gradient(180deg, #f7dd9b 0%, #e0b054 100%);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: filter 130ms ease, transform 130ms ease;
}
button.action-roll-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
button.action-roll-btn:active { transform: translateY(0); }
button.action-roll-cancel {
    display: block;
    margin: 10px auto 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: #8a744a;
    text-decoration: underline;
}
button.action-roll-cancel:hover { color: #b39a6a; }

/* card slot is widget-painted now — hide the empty container until it fills */
.hex-panel:empty { display: none; }

/* ════════════════════════════════════════════════════════════════════
   MOVE CONFIRM — a widget-painted overlay: "travel to X?" + a light line.
   ════════════════════════════════════════════════════════════════════ */

.wc-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 3, 2, 0.72);
    backdrop-filter: blur(3px);
}

.wc-card {
    width: min(90vw, 400px);
    padding: 30px 34px;
    text-align: center;
    background: linear-gradient(180deg, #171008 0%, #0d0905 100%);
    border: 1px solid rgba(238, 194, 94, 0.42);
    border-radius: 10px;
    box-shadow: 0 0 70px rgba(238, 194, 94, 0.14), 0 30px 60px rgba(0, 0, 0, 0.7);
    color: #d8c9a3;
}

.wc-kicker {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    color: #8a744a;
    margin: 0 0 8px;
}

.wc-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #f2d998;
    margin: 0 0 12px;
}

.wc-blurb {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #cdbe93;
    margin: 0 0 24px;
}

.wc-row {
    display: flex;
    gap: 12px;
    justify-content: center;
}

button.wc-go, button.wc-no {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    border-radius: 5px;
    padding: 12px 26px;
    cursor: pointer;
    border: 0;
    transition: filter 140ms ease, background 140ms ease;
}
button.wc-go {
    background: linear-gradient(180deg, #efc76a 0%, #d9a63e 55%, #b57f22 100%);
    color: #241a06;
    letter-spacing: 0.02em;   /* "🎲 Roll the dice" is longer than "Set out" was */
}
button.wc-go:hover { filter: drop-shadow(0 0 16px rgba(238, 194, 94, 0.45)); }
button.wc-no {
    background: rgba(238, 194, 94, 0.08);
    box-shadow: inset 0 0 0 1px rgba(238, 194, 94, 0.4);
    color: #d3ab60;
}
button.wc-no:hover { background: rgba(238, 194, 94, 0.16); }

/* ════════════════════════════════════════════════════════════════════
   MENU PAGES — NEW GAME (create form) + CONTINUE (games list). Client-
   painted by menu_widget into .menu-boot; body.zw-menu gets the twilight.
   ════════════════════════════════════════════════════════════════════ */

body.zw-menu {
    background:
        radial-gradient(ellipse 95% 55% at 50% 116%, rgba(216, 160, 60, 0.16) 0%, transparent 58%),
        linear-gradient(180deg, #070604 0%, #0d0a06 50%, #120d07 100%);
    background-repeat: no-repeat;
    background-color: #0a0805;
    min-height: 100vh;
}
body.zw-menu #zVaF-content { max-width: none; margin: 0; padding: 0; }

.menu-boot {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.menu-loading {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: #8a744a;
}
/* once the widget has painted (body.zw-menu), hide the fallback zText that
   zolo renders as a sibling — timing-proof (CSS applies whenever it appears) */
body.zw-menu .menu-loading { display: none; }

.mm-card {
    width: min(92vw, 420px);
    padding: 40px 44px;
    text-align: center;
    background: linear-gradient(180deg, #171008 0%, #0e0a05 100%);
    border: 1px solid rgba(238, 194, 94, 0.38);
    border-radius: 8px;
    box-shadow: 0 0 70px rgba(238, 194, 94, 0.12), 0 30px 60px rgba(0, 0, 0, 0.65);
    color: #d8c9a3;
}
.mm-card.mm-wide { width: min(92vw, 480px); }

.mm-kicker {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    color: #9b7f4b;
    margin: 0 0 10px;
}
.mm-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.7rem;
    color: #f2d998;
    margin: 0 0 26px;
}

.mm-form { text-align: left; }
.mm-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #9b7f4b;
    margin: 14px 0 6px;
}
.mm-input, .mm-select {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 240, 200, 0.05);
    border: 1px solid rgba(238, 194, 94, 0.28);
    border-radius: 4px;
    padding: 12px 14px;
    font-family: var(--mono);
    font-size: 0.9rem;
    color: #f0e6c8;
}
.mm-input::placeholder { color: #8a744a; }
.mm-input:focus, .mm-select:focus {
    outline: none;
    border-color: rgba(238, 194, 94, 0.75);
    box-shadow: 0 0 0 3px rgba(238, 194, 94, 0.14);
}
.mm-select option { background: #171008; }

.mm-err { color: #d98a5a; font-size: 0.82rem; min-height: 1.2em; margin: 12px 0 0; }

.mm-go {
    width: 100%;
    margin-top: 18px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    border: 0;
    cursor: pointer;
    padding: 14px 0;
    border-radius: 4px;
    background: linear-gradient(180deg, #efc76a 0%, #d9a63e 55%, #b57f22 100%);
    color: #241a06;
    transition: filter 140ms ease;
}
.mm-go:hover { filter: drop-shadow(0 0 16px rgba(238, 194, 94, 0.45)); }
.mm-go:disabled { opacity: 0.6; cursor: default; }

.mm-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.mm-empty { color: #8a744a; font-style: italic; font-family: 'Cormorant Garamond', serif; }

/* ── the change-password card: account admin, sharing the ledger's page but
   fenced off from it by a rule (deleting a world and rotating a credential
   are different kinds of dangerous). .mm-whoami is the server-stamped
   session name — read by the widget, never shown. ─────────────────────── */
.mm-whoami { display: none; }
.mm-pw {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(238, 194, 94, 0.18);
}
.mm-pw-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #f2d998;
    margin: 0 0 6px;
}
.mm-pw-meter, .mm-pw-out {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    min-height: 1em;
    margin: 6px 0 0;
}
.mm-pw-ok { color: #8fbf7a; }
.mm-pw-weak { color: #d47a5a; }
button.mm-pw-save {
    margin-top: 14px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    border: 1px solid rgba(238, 194, 94, 0.4);
    border-radius: 4px;
    cursor: pointer;
    padding: 10px 22px;
    color: #f2d998;
    background: linear-gradient(180deg, rgba(58, 42, 14, 0.9), rgba(26, 18, 8, 0.9));
}
button.mm-pw-save:hover:not(:disabled) { border-color: #f7dd9b; color: #fff2cf; }
button.mm-pw-save:disabled { opacity: 0.55; cursor: default; }

.mm-game {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    text-decoration: none;
    padding: 14px 16px;
    border-radius: 6px;
    background: rgba(238, 194, 94, 0.06);
    border: 1px solid rgba(238, 194, 94, 0.24);
    transition: background 130ms ease, border-color 130ms ease, transform 130ms ease;
}
.mm-game:hover {
    background: rgba(238, 194, 94, 0.15);
    border-color: rgba(238, 194, 94, 0.6);
    transform: translateX(2px);
}
.mm-game-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.05rem; color: #f2d998; }
.mm-game-meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: #b39a6a; }

/* the painted portrait fills the hex frame (dashboard) / round thumb (menu) */
.hud-portrait { overflow: hidden; }
.hud-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mm-game-has-thumb {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}
.mm-thumb {
    width: 46px;
    height: 46px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #241a06;
    background: radial-gradient(circle at 50% 38%, #f7dd9b 0%, #e0b054 60%, #b57f22 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.mm-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the guest-facing settings gate — quiet, centered, no ledger leakage */
.mm-guest-gate {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.mm-guest-note {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.25rem;
    color: #b39a6a;
}

/* settings ledger rows — same card look, but a row: text left, DELETE right */
.mm-game-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.mm-game-row:hover { transform: none; }
.mm-game-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-note {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.5;
    color: #b39a6a;
    margin: 0 0 18px;
}
button.mm-del {
    flex: none;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    cursor: pointer;
    padding: 8px 13px;
    border-radius: 4px;
    color: #d98a5a;
    background: rgba(217, 138, 90, 0.07);
    border: 1px solid rgba(217, 138, 90, 0.35);
    transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}
button.mm-del:hover { background: rgba(217, 138, 90, 0.16); }
button.mm-del.mm-del-armed {
    color: #ffd9c9;
    background: linear-gradient(180deg, #b8433f 0%, #8a2f2c 100%);
    border-color: #d0605c;
}
button.mm-del:disabled { opacity: 0.6; cursor: default; }

/* a fallen character's row + its "Read the tale" epilogue reveal */
.mm-game-fallen { border-color: rgba(181, 107, 74, 0.3); opacity: 0.9; }
.mm-game-actions { display: flex; align-items: center; gap: 8px; flex: none; }
button.mm-read {
    flex: none;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    padding: 8px 13px;
    border-radius: 4px;
    color: #e8cd8a;
    background: rgba(238, 194, 94, 0.07);
    border: 1px solid rgba(238, 194, 94, 0.3);
    transition: background 130ms ease;
}
button.mm-read:hover { background: rgba(238, 194, 94, 0.16); }
.mm-epilogue {
    font-family: 'Spectral', serif;
    font-weight: 500;
    font-size: 1.08rem;
    line-height: 1.6;
    color: #eee0ba;
    text-align: left;
    background: rgba(238, 194, 94, 0.05);
    border: 1px solid rgba(238, 194, 94, 0.16);
    border-radius: 6px;
    padding: 16px 18px;
    margin: -4px 0 10px;
}

.mm-back {
    display: inline-block;
    margin-top: 22px;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    color: #d3ab60;
    text-decoration: underline dotted rgba(238, 194, 94, 0.5);
    text-underline-offset: 4px;
}
.mm-back:hover { color: #f2d998; }

/* ════════════════════════════════════════════════════════════════════
   THE DIE — roll badge in the action panel (tier-colored).
   ════════════════════════════════════════════════════════════════════ */

.roll-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 5px 10px 5px 6px;
    border-radius: 5px;
    border: 1px solid rgba(238, 194, 94, 0.3);
    background: rgba(238, 194, 94, 0.06);
}
.roll-die {
    font-family: var(--mono);
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    color: #8a744a;
    text-transform: uppercase;
}
.roll-num {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
    min-width: 1.4em;
    text-align: center;
}
.roll-tier {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
}
.roll-crit { border-color: rgba(151, 196, 89, 0.6); }
.roll-crit .roll-num, .roll-crit .roll-tier { color: #b6df8a; }
.roll-good { border-color: rgba(151, 196, 89, 0.4); }
.roll-good .roll-num, .roll-good .roll-tier { color: #9fce77; }
.roll-bad { border-color: rgba(239, 159, 39, 0.5); }
.roll-bad .roll-num, .roll-bad .roll-tier { color: #e6a94a; }
.roll-doom { border-color: rgba(226, 75, 74, 0.55); }
.roll-doom .roll-num, .roll-doom .roll-tier { color: #e8706f; }

/* low-vigor bar tint */
.hud-hp-fill.hud-hp-low { background: linear-gradient(90deg, #7a1f1f 0%, #e24b4a 100%); }

/* ════════════════════════════════════════════════════════════════════
   FLOATING TILE LABELS (CSS2DRenderer) — full on visited, faded on
   known-but-unvisited, highlighted on the current hex.
   ════════════════════════════════════════════════════════════════════ */

/* dark pill chips — readable over ANY hex-top colour (bare gold text washed
   out completely on sand/grass tops) */
.tile-label {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    padding: 3px 10px 2px;
    border-radius: 20px;
    background: rgba(12, 8, 4, 0.78);
    border: 1px solid rgba(238, 194, 94, 0.28);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
    backdrop-filter: blur(2px);
}
.tile-visited { color: #f2e2b0; }
.tile-faded {
    color: rgba(210, 194, 150, 0.55);
    font-weight: 400;
    background: rgba(12, 8, 4, 0.55);
    border-color: rgba(238, 194, 94, 0.12);
}
.tile-current {
    color: #1c1204;
    background: linear-gradient(180deg, #f7dd9b 0%, #e0b054 100%);
    border-color: #f7dd9b;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 16px rgba(238, 194, 94, 0.45);
}

/* ════════════════════════════════════════════════════════════════════
   ITEMS — carriable objects under the options, + the bag.
   ════════════════════════════════════════════════════════════════════ */

.action-take {
    margin: 4px 0 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(238, 194, 94, 0.2);
}
.action-take-title {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    color: #7fae7e;
    margin: 0 0 8px;
}
button.take-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    margin-bottom: 7px;
    padding: 9px 12px;
    cursor: pointer;
    border-radius: 5px;
    background: rgba(127, 174, 126, 0.08);
    border: 1px solid rgba(127, 174, 126, 0.34);
    transition: background 130ms ease, border-color 130ms ease, transform 130ms ease;
}
button.take-item:hover {
    background: rgba(127, 174, 126, 0.18);
    border-color: rgba(127, 174, 126, 0.7);
    transform: translateX(2px);
}
.take-item-name {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: #d7ecc6;
}
.take-item-grab {
    flex: none;
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7fae7e;
    border: 1px solid rgba(127, 174, 126, 0.4);
    border-radius: 3px;
    padding: 2px 7px;
}

/* item clarity: the note is a real, visible subtitle (was a hover tooltip),
   and this-turn finds carry a NEW badge */
.take-item-tx {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    text-align: left;
}
.take-item-name-row { display: flex; align-items: center; gap: 7px; }
.take-item-note {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.25;
    color: #93b088;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.take-item-newbadge {
    flex: none;
    font-family: var(--mono);
    font-size: 0.52rem;
    letter-spacing: 0.14em;
    color: #1c2a14;
    background: linear-gradient(180deg, #b8e29a 0%, #7fae7e 100%);
    border-radius: 3px;
    padding: 1px 5px;
}

/* fresh loot just landed — a green sweep announces the section */
@keyframes takeIn {
    0%   { box-shadow: 0 0 0 1px rgba(127, 174, 126, 0.0), 0 0 26px rgba(127, 174, 126, 0.55); }
    100% { box-shadow: none; }
}
.action-take.take-flash { animation: takeIn 1.1s ease-out; border-radius: 6px; }

/* ══ THE DIE — always on the table. Dim asleep; gold and eager when a move
   is staged. Sits off the panel's left shoulder, over the board. ══ */
.hud-dice-wrap {
    position: fixed;
    bottom: 26px;
    right: 418px;
    z-index: 24;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    pointer-events: none;   /* the wrap is transparent; children opt back in */
}
.hud-dice-wrap > * { pointer-events: auto; }
.hud-dice-cap {
    max-width: 220px;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-align: center;
    color: #7a6440;
    background: rgba(14, 10, 5, 0.85);
    border-radius: 12px;
    padding: 4px 12px;
}
.hud-dice-cap-armed { color: #f2d998; }
/* THE GEM — no button chrome: the die itself is the object on the table.
   All state (dim/armed/rolling/fate) is filters on the one svg, so the
   artwork is cut once and the hitbox never moves (the Playwright lesson). */
button.hud-dice {
    position: relative;
    width: 88px;
    height: 88px;
    padding: 4px;
    border: 0;
    background: transparent;
    cursor: default;
    transition: transform 160ms ease;
}
.hud-dice-svg {
    width: 100%;
    height: 100%;
    display: block;
    /* asleep: desaturated, sunk into the dark, grounded by its own shadow */
    filter: saturate(0.25) brightness(0.55) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.6));
    transition: filter 260ms ease;
}
.d20-edges polygon, .d20-edges path {
    stroke: rgba(46, 30, 8, 0.55);
    stroke-width: 1.3;
    stroke-linejoin: round;
}
.d20-edges .d20-hull { stroke: rgba(26, 16, 4, 0.85); stroke-width: 2; }
.hud-dice-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #4a3a1c;
    /* engraved into the face: dark bite above, thin light lip below */
    text-shadow: 0 -1px 0 rgba(30, 18, 4, 0.8), 0 1px 0 rgba(255, 240, 200, 0.35);
    pointer-events: none;
    transition: color 160ms ease, font-size 160ms ease, text-shadow 160ms ease;
}

/* ARMED — the gem wakes with a POP (spring-scale in), then floats: a slow
   rise-and-fall with a breathing halo, an unmissable "roll me". All motion
   is on the inner canvas — the button (the hitbox) never moves. */
button.hud-dice.hud-dice-armed { cursor: pointer; }
button.hud-dice.hud-dice-armed .hud-dice-svg {
    animation: diePop 460ms cubic-bezier(0.34, 1.56, 0.64, 1),
               dieEager 1.8s ease-in-out 460ms infinite;
    filter: saturate(1) brightness(1)
            drop-shadow(0 12px 12px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 12px rgba(240, 200, 110, 0.45));
}
button.hud-dice.hud-dice-armed .hud-dice-num {
    color: #2e2008;
    text-shadow: 0 -1px 0 rgba(30, 18, 4, 0.7), 0 1px 0 rgba(255, 244, 210, 0.55),
                 0 0 12px rgba(255, 226, 150, 0.55);
    /* the engraved number rides the floating gem */
    animation: dieNumPop 460ms cubic-bezier(0.34, 1.56, 0.64, 1),
               dieNumBob 1.8s ease-in-out 460ms infinite;
}
@keyframes dieNumPop {
    0%   { transform: translate(-50%, -46%) scale(0.68); }
    55%  { transform: translate(-50%, -46%) scale(1.22); }
    100% { transform: translate(-50%, -46%) scale(1); }
}
@keyframes dieNumBob {
    0%, 100% { transform: translate(-50%, -46%) translateY(0); }
    50%      { transform: translate(-50%, -46%) translateY(-9px); }
}
button.hud-dice.hud-dice-armed:hover { transform: translateY(-2px) scale(1.04); }
@keyframes diePop {
    0%   { transform: scale(0.68); }
    55%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}
@keyframes dieEager {
    0%, 100% { transform: translateY(0);
               filter: saturate(1) brightness(1)
                       drop-shadow(0 12px 12px rgba(0, 0, 0, 0.6))
                       drop-shadow(0 0 12px rgba(240, 200, 110, 0.45)); }
    50%      { transform: translateY(-9px);
               filter: saturate(1.1) brightness(1.14)
                       drop-shadow(0 20px 16px rgba(0, 0, 0, 0.55))
                       drop-shadow(0 0 30px rgba(246, 212, 122, 0.9)); }
}

/* ROLLING — the storyteller's think-time IS the tumble. The 3D canvas
   tumbles for real in its own loop; the flat 2D spin below is only for the
   pre-mount SVG fallback (svg-scoped so the canvas never double-spins). */
button.hud-dice.hud-dice-rolling .hud-dice-svg {
    filter: saturate(1) brightness(1.08)
            drop-shadow(0 6px 9px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 20px rgba(246, 212, 122, 0.7));
}
button.hud-dice.hud-dice-rolling svg.hud-dice-svg {
    animation: dieTumble 0.65s linear infinite;
}
@keyframes dieTumble {
    0%   { transform: rotate(0deg)   scale(1); }
    50%  { transform: rotate(180deg) scale(0.86); }
    100% { transform: rotate(360deg) scale(1); }
}

/* RESULT — fate recolors the whole gem (hue-shift of the one gold cut),
   the number lands big, the halo takes the tier's color */
button.hud-dice.hud-dice-result .hud-dice-num { font-size: 2.2rem; }
button.hud-dice.hud-dice-result .hud-dice-svg { animation: dieLand 320ms ease-out; }
@keyframes dieLand {
    0%   { transform: scale(1.22); }
    100% { transform: scale(1); }
}
button.hud-dice.hud-dice-result.roll-crit .hud-dice-svg {
    filter: saturate(1.1) brightness(1.3)
            drop-shadow(0 10px 10px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 34px rgba(255, 232, 160, 0.95));
}
button.hud-dice.hud-dice-result.roll-crit .hud-dice-num { color: #2e2008; }
button.hud-dice.hud-dice-result.roll-good .hud-dice-svg {
    filter: hue-rotate(62deg) saturate(0.8) brightness(1.05)
            drop-shadow(0 10px 10px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 22px rgba(150, 205, 130, 0.75));
}
button.hud-dice.hud-dice-result.roll-good .hud-dice-num { color: #16260f; }
button.hud-dice.hud-dice-result.roll-bad .hud-dice-svg {
    filter: hue-rotate(-16deg) saturate(1.3) brightness(0.96)
            drop-shadow(0 10px 10px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 20px rgba(220, 130, 80, 0.7));
}
button.hud-dice.hud-dice-result.roll-bad .hud-dice-num { color: #33170a; }
button.hud-dice.hud-dice-result.roll-doom .hud-dice-svg {
    filter: hue-rotate(-40deg) saturate(1.7) brightness(0.92)
            drop-shadow(0 10px 10px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 28px rgba(228, 70, 60, 0.85));
}
button.hud-dice.hud-dice-result.roll-doom .hud-dice-num { color: #360c08; }
button.hud-dice-cancel {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: #8a744a;
    text-decoration: underline;
}
button.hud-dice-cancel:hover { color: #b39a6a; }

/* the panel's collapsible header */
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.panel-head .action-here { margin: 0; }
button.panel-toggle {
    flex: none;
    background: transparent;
    border: 1px solid rgba(238, 194, 94, 0.25);
    border-radius: 5px;
    color: #b3924e;
    font-size: 0.8rem;
    padding: 3px 9px;
    cursor: pointer;
}
button.panel-toggle:hover { color: #f2d998; border-color: rgba(238, 194, 94, 0.55); }

/* the chronicle drawer — parked off-screen left, only its tab showing */
body:has(.world-slot) .hex-panel {
    /* park exactly at -100% so the tab (perched at left:100%) stays visible */
    transform: translateX(-100%);
    transition: transform 300ms ease;
}
body.chron-open .hex-panel { transform: none !important; z-index: 30; }
button.hp-tab {
    position: absolute;
    left: 100%;
    bottom: 10px;
    writing-mode: vertical-rl;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: #b3924e;
    background: linear-gradient(180deg, rgba(23, 16, 8, 0.95) 0%, rgba(14, 10, 5, 0.95) 100%);
    border: 1px solid rgba(238, 194, 94, 0.3);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    padding: 12px 6px;
    cursor: pointer;
}
button.hp-tab:hover { color: #f2d998; }

/* ══ THE ENTITY SPLIT — beings live in the LEFT column (the scene panel);
   the right panel stays pure narrative. Each being-card renders in BOTH
   places; the viewport decides which copy shows: desktop shows the left
   column's, mobile (scene strip hidden) shows the in-sheet copy. ══ */
@media (min-width: 641px) {
    .action-slot .creature-box { display: none; }
}
.scene-being {
    margin-bottom: 9px;
    text-align: left;
}
.scene-being .creature-note {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scene-being .creature-act {
    padding: 6px 10px;
    font-size: 0.72rem;
}

/* ROADS OUT — named neighbor chips; each acts exactly like its hex click */
.action-roads { margin-top: 12px; }
.road-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
button.road-chip {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    color: #e8cd8a;
    background: rgba(238, 194, 94, 0.06);
    border: 1px dashed rgba(238, 194, 94, 0.4);
    border-radius: 16px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 130ms ease, border-color 130ms ease;
}
button.road-chip:hover {
    background: rgba(238, 194, 94, 0.16);
    border-color: rgba(238, 194, 94, 0.75);
    border-style: solid;
}
button.road-chip-flee {
    color: #f0c0a5;
    border-color: rgba(226, 75, 74, 0.55);
    background: rgba(226, 75, 74, 0.08);
    margin-top: 10px;
}
button.road-chip-flee:hover { background: rgba(226, 75, 74, 0.2); border-color: #e24b4a; }

/* a travel-shaped option — rolling it MOVES the pawn (the → marks it) */
button.action-opt-travel { border-style: dashed; }

/* the ? — teaches that the map itself is the control surface */
button.hud-help {
    position: absolute;
    top: 22px;
    left: 84px;
    z-index: 10;
    width: 52px;
    height: 52px;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    color: #b3924e;
    background: linear-gradient(180deg, rgba(23, 16, 8, 0.92) 0%, rgba(14, 10, 5, 0.92) 100%);
    border: 1px solid rgba(238, 194, 94, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: color 130ms ease, border-color 130ms ease;
}
button.hud-help:hover { color: #f2d998; border-color: rgba(238, 194, 94, 0.6); }

.help-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 3, 2, 0.82);
    backdrop-filter: blur(3px);
}
.help-card {
    width: min(92vw, 520px);
    max-height: 84vh;
    overflow-y: auto;
    padding: 28px 32px;
    background: linear-gradient(180deg, #171008 0%, #0d0905 100%);
    border: 1px solid rgba(238, 194, 94, 0.4);
    border-radius: 10px;
    box-shadow: 0 0 70px rgba(238, 194, 94, 0.12), 0 30px 60px rgba(0, 0, 0, 0.7);
    color: #d8c9a3;
    text-align: left;
}
.help-kicker {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    color: #8a744a;
    text-align: center;
    margin: 0 0 18px;
}
.help-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid rgba(238, 194, 94, 0.1);
}
.help-row:first-of-type { border-top: 0; }
.help-ico { flex: none; font-size: 1.1rem; width: 1.6em; text-align: center; }
.help-txt {
    font-family: 'Spectral', serif;
    font-weight: 400;
    font-size: 0.98rem;
    line-height: 1.5;
    margin: 0;
}
button.help-close {
    display: block;
    margin: 18px auto 0;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    color: #1c1204;
    padding: 11px 26px;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(180deg, #f7dd9b 0%, #e0b054 100%);
    cursor: pointer;
}

/* mid-flight: the panel becomes the flight instruction — urgent, pulsing */
.flee-banner {
    border: 1px solid rgba(226, 75, 74, 0.5);
    border-radius: 6px;
    background: rgba(226, 75, 74, 0.08);
    padding: 14px 16px;
    animation: fleePulse 1.6s ease-in-out infinite;
}
.flee-banner-txt {
    font-family: 'Spectral', serif;
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #f0c0a5;
    margin: 0;
}
@keyframes fleePulse {
    0%, 100% { box-shadow: 0 0 0 rgba(226, 75, 74, 0); }
    50%      { box-shadow: 0 0 18px rgba(226, 75, 74, 0.35); }
}
.wc-card.wc-flee { border-color: rgba(226, 75, 74, 0.55); }
.wc-card.wc-flee .wc-kicker { color: #e2724a; }

/* the nemesis line — the map's central conflict, pinned in the dashboard */
.hud-nemesis {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0 0;
    padding-top: 7px;
    border-top: 1px solid rgba(238, 194, 94, 0.14);
}
.hud-nemesis-k {
    font-family: var(--mono);
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    color: #b5584a;
    white-space: nowrap;
}
.hud-nemesis-v {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    color: #e8a17a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* the chase compass — the seat is a real hex; this is how far, which way */
.hud-nemesis-compass {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: #c9ad72;
    white-space: nowrap;
}

/* the ambience toggle — under the bag; synthesized in-browser, no assets */
button.hud-sound {
    position: fixed;
    top: 132px;
    left: 22px;
    z-index: 20;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: #8a744a;
    background: rgba(23, 16, 8, 0.92);
    border: 1px solid rgba(238, 194, 94, 0.24);
    border-radius: 8px;
    padding: 9px 14px;
    cursor: pointer;
    transition: color 130ms ease, border-color 130ms ease;
}
button.hud-sound:hover { color: #d3ab60; }
button.hud-sound.hud-sound-on {
    color: #f2d998;
    border-color: rgba(238, 194, 94, 0.6);
}

/* the read-aloud toggle riding the story card header */
.story-head-right { display: flex; align-items: center; gap: 10px; flex: none; }
button.story-voice {
    background: transparent;
    border: 1px solid rgba(238, 194, 94, 0.24);
    border-radius: 6px;
    font-size: 0.85rem;
    padding: 3px 8px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 130ms ease, border-color 130ms ease;
}
button.story-voice:hover { opacity: 1; }
button.story-voice.story-voice-on {
    opacity: 1;
    border-color: rgba(238, 194, 94, 0.65);
    box-shadow: 0 0 10px rgba(238, 194, 94, 0.25);
}

/* the SHARED environ backdrop — the game's lowest layer: one very dark
   ambient image per genre×terrain class (generated once, reused by all),
   behind the transparent WebGL canvas, under everything */
.zw-environ {
    position: fixed;
    inset: 0;
    z-index: 0;
    /* 0.42 triple-crushed an already-dark image into the void — the raven's
       visible-tab screenshot proved "faded in" and "visible" are different claims */
    filter: brightness(0.8);
    pointer-events: none;
}
/* double-buffered panes: the hidden one is painted, committed, then faded
   over the visible one — a true cross-dissolve between hexes */
.env-pane {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2.4s ease;
}
.env-pane.env-pane-on { opacity: 1; }
.zw-environ::after {
    /* vignette so the board's edges melt into dark, whatever the image */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(6, 4, 2, 0.72) 100%);
}
body:has(.world-slot) .world-slot { z-index: 1; }

/* environment tint — the page void answers the terrain underfoot (the WebGL
   backdrop lerps in JS; this colors the body edges around the canvas) */
body[class*="env-"] { transition: background 2.5s ease; }
body.env-camp     { background: radial-gradient(ellipse at 50% 45%, #171008 0%, #0a0703 70%); }
body.env-grass    { background: radial-gradient(ellipse at 50% 45%, #0c1507 0%, #060a04 70%); }
body.env-forest   { background: radial-gradient(ellipse at 50% 45%, #081206 0%, #050903 70%); }
body.env-water    { background: radial-gradient(ellipse at 50% 45%, #07131c 0%, #04090e 70%); }
body.env-sand     { background: radial-gradient(ellipse at 50% 45%, #171207 0%, #0b0804 70%); }
body.env-mountain { background: radial-gradient(ellipse at 50% 45%, #101013 0%, #08080a 70%); }
body.env-ruins    { background: radial-gradient(ellipse at 50% 45%, #110a1b 0%, #08050d 70%); }

/* the bag button — top-left, under the menu */
button.hud-bag {
    position: fixed;
    top: 88px;
    left: 22px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    color: #f2d998;
    background: linear-gradient(180deg, rgba(23, 16, 8, 0.92) 0%, rgba(14, 10, 5, 0.92) 100%);
    border: 1px solid rgba(238, 194, 94, 0.42);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
button.hud-bag:hover {
    border-color: rgba(238, 194, 94, 0.85);
    box-shadow: 0 0 18px rgba(238, 194, 94, 0.3);
}
.hud-bag-ico { font-size: 1rem; line-height: 1; }
.hud-bag-n {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
}

/* the bag overlay */
.bag-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 3, 2, 0.78);
    backdrop-filter: blur(3px);
}
.bag-card {
    width: min(92vw, 420px);
    max-height: 76vh;
    overflow-y: auto;
    padding: 30px 34px;
    background: linear-gradient(180deg, #171008 0%, #0d0905 100%);
    border: 1px solid rgba(238, 194, 94, 0.4);
    border-radius: 8px;
    box-shadow: 0 0 70px rgba(238, 194, 94, 0.12), 0 30px 60px rgba(0, 0, 0, 0.7);
    color: #d8c9a3;
    text-align: center;
}
.bag-kicker {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    color: #8a744a;
    margin: 0 0 20px;
}
.bag-list { text-align: left; }
.bag-empty {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: #8a744a;
    text-align: center;
}
.bag-item {
    padding: 12px 0;
    border-top: 1px solid rgba(238, 194, 94, 0.14);
}
.bag-item:first-child { border-top: 0; }
.bag-item-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #f2d998;
    margin: 0 0 3px;
}
.bag-item-note {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1rem;
    color: #b39a6a;
    margin: 0;
}
/* the teaching footnotes — the whole game funnels to these lines */
.bag-philosophy, .inscribe-philosophy {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #c9ad72;
    border-left: 2px solid rgba(238, 194, 94, 0.4);
    padding: 2px 0 2px 10px;
    margin: 8px 0 14px;
}

/* a broken item stays in the bag but reads as dead weight */
.bag-item-broken .bag-item-name,
.bag-item-broken .bag-item-note,
.bag-item-broken .bag-item-form { opacity: 0.45; }
.bag-item-broken .bag-item-name { text-decoration: line-through; }
.bag-item-cond {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: #d47a5a;
    margin: 0 0 3px;
}
/* the narration wrote back to the bag — the notice under the prose */
.story-bagev {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: #d47a5a;
    margin: 6px 0 0;
}
.story-bagev-mended { color: #8fbf7a; }
button.bag-close {
    margin-top: 22px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    border: 0;
    cursor: pointer;
    padding: 11px 30px;
    border-radius: 4px;
    background: rgba(238, 194, 94, 0.1);
    box-shadow: inset 0 0 0 1px rgba(238, 194, 94, 0.4);
    color: #d3ab60;
}
button.bag-close:hover { background: rgba(238, 194, 94, 0.2); }

/* ════════════════════════════════════════════════════════════════════
   CREATURES — a present being demands a response, above the options.
   ════════════════════════════════════════════════════════════════════ */

.creature-box {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 6px;
    background: rgba(226, 75, 74, 0.08);
    border: 1px solid rgba(226, 75, 74, 0.4);
}
.creature-villain {
    background: rgba(226, 75, 74, 0.14);
    border-color: rgba(226, 75, 74, 0.7);
    box-shadow: 0 0 18px rgba(226, 75, 74, 0.2);
}
.creature-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.creature-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1rem;
    color: #f0a6a5;
}
.creature-meta {
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c47c7b;
    white-space: nowrap;
}
.creature-note {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: #cbb69a;
    margin: 6px 0 10px;
}
.creature-acts {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
button.creature-act {
    flex: 1;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: 9px 0;
    border-radius: 5px;
    border: 1px solid;
    transition: filter 130ms ease, transform 130ms ease;
}
button.creature-act:hover { transform: translateY(-1px); }
.ca-fight {
    background: linear-gradient(180deg, #b8433f 0%, #8a2f2c 100%);
    border-color: #d0605c;
    color: #ffe1e0;
}
.ca-fight:hover { filter: drop-shadow(0 0 12px rgba(226, 75, 74, 0.5)); }
.ca-flee {
    background: rgba(238, 194, 94, 0.08);
    border-color: rgba(238, 194, 94, 0.4);
    color: #e2b45a;
}
.ca-flee:hover { background: rgba(238, 194, 94, 0.16); }
.ca-parley {
    background: rgba(127, 174, 126, 0.1);
    border-color: rgba(127, 174, 126, 0.45);
    color: #a9d19a;
}
.ca-parley:hover { background: rgba(127, 174, 126, 0.2); }
/* talk — the NPC door: calm sky-gold, first in the row for the non-hostile */
.ca-talk {
    background: rgba(126, 156, 194, 0.12);
    border-color: rgba(126, 156, 194, 0.5);
    color: #a8c4e8;
}
.ca-talk:hover { background: rgba(126, 156, 194, 0.24); }

/* ════════════════════════════════════════════════════════════════════
   GRAPHICS — curated game-icons.net glyphs (static/icons/), rendered as
   CSS masks so `background: currentColor` tints each to its context's
   accent (gold loot, red foes). One .zw-icon primitive, sized by em.
   ════════════════════════════════════════════════════════════════════ */

.zw-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* items you could take — a green glyph beside the name */
.take-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.take-item-ico {
    width: 1.35em;
    height: 1.35em;
    color: #8fc47e;
}

/* creatures — an icon column to the left of name/meta/note */
.creature-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.creature-htx { flex: 1; min-width: 0; }
.creature-ico {
    width: 2.2em;
    height: 2.2em;
    margin-top: 2px;
    color: #e2724a;
}
.creature-ico-villain {
    color: #f0605c;
    filter: drop-shadow(0 0 7px rgba(226, 75, 74, 0.55));
}

/* bag rows — a gold glyph beside each carried item */
.bag-item {
    display: flex;
    align-items: center;
    gap: 13px;
}
.bag-item-ico {
    width: 1.9em;
    height: 1.9em;
    color: #f2d998;
}
.bag-item-tx { flex: 1; min-width: 0; }

/* a genuine consumable (restores > 0) — a small green USE affordance */
.bag-item-power { border-color: rgba(122, 196, 110, 0.22); }
button.bag-item-use {
    flex: none;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    padding: 7px 11px;
    border-radius: 4px;
    color: #dff5d6;
    background: linear-gradient(180deg, #4a8f3e 0%, #356b2c 100%);
    border: 1px solid rgba(158, 224, 140, 0.5);
    transition: filter 130ms ease;
}
button.bag-item-use:hover { filter: brightness(1.15); }

/* the bag button glyph is now a real pouch icon (was a ❖ char) */
.hud-bag-ico {
    width: 1.05rem;
    height: 1.05rem;
    color: #f2d998;
}

/* ── the "on this hex" scene strip — top-left, under the bag button, so
   "what stands here / what you could take" sits beside "what you carry"
   (the right column is the dashboard + action panel, already full) ──── */
.hud-scene {
    position: fixed;
    top: 186px;   /* below bag (88) + sound toggle (132) */
    left: 22px;
    z-index: 9;
    width: min(316px, 46vw);
    /* floor = the story box's ceiling: 100vh − strip top (186) − story bottom
       gap (64) − story max (26vh text + ~92 chrome) − 12 breathing room */
    max-height: calc(74vh - 354px);
    overflow-y: auto;
    padding: 11px 13px 13px;
    background: linear-gradient(180deg, rgba(23, 16, 8, 0.9) 0%, rgba(14, 10, 5, 0.9) 100%);
    border: 1px solid rgba(238, 194, 94, 0.22);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(4px);
}
.hud-scene-empty { display: none; }
.hud-scene-title {
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.24em;
    color: #8a744a;
    margin: 0 0 9px;
}
.hud-scene-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.scene-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 5px 10px 5px 8px;
    border-radius: 20px;
    border: 1px solid;
    cursor: default;
}
.scene-chip-ico {
    width: 1.15em;
    height: 1.15em;
}
.scene-chip-label {
    font-family: 'Cinzel', serif;
    font-size: 0.74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scene-chip-loot {
    color: #d7ecc6;
    background: rgba(127, 174, 126, 0.1);
    border-color: rgba(127, 174, 126, 0.34);
    /* item chips are BUTTONS now — clicking one stages the pick-up */
    cursor: pointer;
    font: inherit;
    transition: background 130ms ease, border-color 130ms ease;
}
button.scene-chip-loot:hover {
    background: rgba(127, 174, 126, 0.22);
    border-color: rgba(127, 174, 126, 0.7);
}
.scene-chip-loot .scene-chip-ico { color: #8fc47e; }
.scene-chip-foe {
    color: #f0a6a5;
    background: rgba(226, 75, 74, 0.1);
    border-color: rgba(226, 75, 74, 0.38);
}
.scene-chip-foe .scene-chip-ico { color: #e2724a; }
.scene-chip-villain {
    border-color: rgba(226, 75, 74, 0.75);
    box-shadow: 0 0 12px rgba(226, 75, 74, 0.28);
}
.scene-chip-villain .scene-chip-ico {
    color: #f0605c;
    filter: drop-shadow(0 0 5px rgba(226, 75, 74, 0.5));
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT — MOBILE FIRST. The BASE below IS the mobile game:
   controls row → slim dash bar → story card → live board → action sheet.
   min-width: 641px graduates to the two-column tablet game (entities
   left, narrative right, story bottom-left, die bottom-center), and
   min-width: 1001px is only the desktop refinement (wider story, the
   die stepping to the panel's shoulder). Placed LAST — this section is
   the single authority on WHERE things sit at every width.
   ════════════════════════════════════════════════════════════════════ */

/* ── BASE = the phone ────────────────────────────────────────────────── */
.hud-menu { top: 8px; left: 8px; }
button.hud-menu-btn { width: 42px; height: 42px; font-size: 1.1rem; }
button.hud-help { top: 8px; left: 58px; width: 42px; height: 42px; font-size: 1rem; }
button.hud-bag { top: 8px; left: 108px; padding: 10px 10px; }
button.hud-sound { top: 8px; left: 196px; padding: 10px 10px; }

.hud-dash {
    top: 58px;
    left: 8px;
    right: 8px;
    width: auto;
    padding: 8px 12px;
}
.hud-dash .hud-portrait { width: 40px; height: 40px; font-size: 1rem; }
.hud-dash .hud-stats { display: none; }
.hud-dash .hud-name { font-size: 0.95rem; }
.hud-nemesis { margin-top: 4px; padding-top: 4px; }

.hud-story {
    top: 164px;
    bottom: auto;
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
    padding: 10px 14px 12px;
}
.story-text { font-size: 1.02rem; line-height: 1.5; max-height: 16vh; }

.action-slot {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 42vh;
    border-radius: 14px 14px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.hex-panel, .hud-scene { display: none; }

.hud-dice-wrap {
    bottom: calc(42vh + 12px);
    right: 10px;
    left: auto;
    transform: none;
}
button.hud-dice { width: 84px; height: 84px; }
.hud-dice-num { font-size: 1.35rem; }

.gameover-card { width: 94vw; padding: 26px 22px; }
.go-title { font-size: 1.3rem; }
.help-card { padding: 20px 18px; }
.wc-card { width: 88vw; }

/* ── 641px+: the two-column table (tablet and up) ────────────────────── */
@media (min-width: 641px) {
    .hud-menu { top: 22px; left: 22px; }
    button.hud-menu-btn { width: 52px; height: 52px; font-size: 1.4rem; }
    button.hud-help { top: 22px; left: 84px; width: 52px; height: 52px; font-size: 1.25rem; }
    button.hud-bag { top: 88px; left: 22px; padding: 9px 14px; }
    button.hud-sound { top: 132px; left: 22px; padding: 9px 14px; }

    .hud-dash {
        top: 22px;
        right: 22px;
        left: auto;
        width: auto;
        padding: 12px 16px 12px 12px;
    }
    .hud-dash .hud-portrait { width: 54px; height: 54px; font-size: 1.3rem; }
    .hud-dash .hud-stats { display: flex; }
    .hud-dash .hud-name { font-size: 1.15rem; }
    .hud-nemesis { margin-top: 8px; padding-top: 7px; }

    /* the narrator's text box: bottom-left, clear of dash and board crown —
       width earns the room the right panel leaves free at this range */
    .hud-story {
        top: auto;
        bottom: 64px;
        left: 22px;
        right: auto;
        width: min(calc(100vw - 440px), 520px);
        padding: 16px 26px 18px;
    }
    .story-text { font-size: 1.3rem; line-height: 1.55; max-height: 20vh; }

    .action-slot {
        top: 248px;
        bottom: auto;
        left: auto;
        right: 22px;
        width: min(90vw, 372px);
        max-height: calc(100vh - 272px);
        border-radius: 10px;
        border: 1px solid rgba(238, 194, 94, 0.34);
    }

    .hud-scene { display: block; }
    .hex-panel { display: block; }

    /* the die holds bottom-center until the desktop gives it a shoulder;
       it layers ABOVE the story box — its caption chip carries its own
       backing, so the brush over the story's corner reads as HUD depth */
    .hud-dice-wrap {
        bottom: 26px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        z-index: 26;
    }
    button.hud-dice { width: 132px; height: 132px; }
    .hud-dice-num { font-size: 1.7rem; }
    .hud-dice-cap { max-width: 280px; font-size: 0.7rem; }

    .gameover-card { width: min(90vw, 620px); padding: 40px 44px; }
    .go-title { font-size: 1.7rem; }
    .help-card { padding: 28px 32px; }
    .wc-card { width: min(560px, 100%); }
}

/* ── 1001px+: the desktop refinement ─────────────────────────────────── */
@media (min-width: 1001px) {
    .hud-story { width: min(44vw, 640px); }
    .story-text { font-size: 1.4rem; line-height: 1.58; max-height: 26vh; }
    .hud-dice-wrap {
        right: 418px;
        left: auto;
        transform: none;
    }
}

/* ── the ROTATED PHONE: wide enough for tablet rules, ~390px tall — cards
   sized for a 1024-tall screen drowned the board (the landscape bug).
   Height, not width, is the constraint here: every fixture goes compact
   and hugs an edge so the middle stays the game. Placed last — at short
   heights this block outranks every width breakpoint above. ──────────── */
@media (min-width: 641px) and (max-height: 480px) {
    .hud-menu { top: 8px; left: 8px; }
    button.hud-menu-btn { width: 40px; height: 40px; font-size: 1rem; }
    button.hud-help { top: 8px; left: 54px; width: 40px; height: 40px; font-size: 0.95rem; }
    button.hud-bag { top: 8px; left: 102px; padding: 8px 10px; }
    button.hud-sound { top: 8px; left: 190px; padding: 8px 10px; }

    .hud-dash { top: 8px; right: 8px; left: auto; padding: 6px 10px; }
    .hud-dash .hud-portrait { width: 34px; height: 34px; font-size: 0.9rem; }
    .hud-dash .hud-stats { display: none; }
    .hud-dash .hud-name { font-size: 0.9rem; }
    .hud-nemesis { display: none; }

    .hud-story {
        top: auto;
        bottom: 8px;
        left: 8px;
        right: auto;
        width: min(46vw, 400px);
        padding: 8px 14px 10px;
    }
    .story-text { font-size: 1rem; line-height: 1.45; max-height: 26vh; }

    .action-slot {
        top: 118px;   /* clear of the compact dash card above it */
        bottom: auto;
        left: auto;
        right: 8px;
        width: min(38vw, 300px);
        max-height: calc(100vh - 126px);
    }

    .hex-panel, .hud-scene { display: none; }

    .hud-dice-wrap {
        bottom: 10px;
        left: auto;
        right: calc(min(38vw, 300px) + 20px);
        transform: none;
    }
    button.hud-dice { width: 76px; height: 76px; }
}

/* ════════════════════════════════════════════════════════════════════
   THE INSCRIPTION — one try, forever. The card where zPhilosophy is
   played: declare the form in string-first zolo, seal it, live with it.
   ════════════════════════════════════════════════════════════════════ */

.inscribe-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 3, 2, 0.85);
    backdrop-filter: blur(4px);
}
.inscribe-card {
    width: min(94vw, 560px);
    max-height: 88vh;
    overflow-y: auto;
    padding: 26px 30px;
    background: linear-gradient(180deg, #171008 0%, #0d0905 100%);
    border: 1px solid rgba(238, 194, 94, 0.45);
    border-radius: 10px;
    box-shadow: 0 0 80px rgba(238, 194, 94, 0.16), 0 30px 60px rgba(0, 0, 0, 0.7);
    color: #d8c9a3;
    text-align: left;
}
.inscribe-kicker {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.3em;
    color: #b5924e;
    margin: 0 0 8px;
}
.inscribe-title {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: #f2d998;
    margin: 0 0 10px;
    text-transform: capitalize;
}
.inscribe-note {
    font-family: 'Spectral', serif;
    font-size: 0.98rem;
    line-height: 1.5;
    color: #b39a6a;
    margin: 0 0 14px;
}
button.inscribe-legend-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: #8a744a;
    padding: 0 0 6px;
}
button.inscribe-legend-toggle:hover { color: #d3ab60; }
.inscribe-legend { display: none; }
.inscribe-legend.inscribe-legend-open { display: block; }
.inscribe-legend-line {
    font-family: var(--mono);
    font-size: 0.7rem;
    line-height: 1.5;
    color: #9b7f4b;
    margin: 0 0 8px;
}
.inscribe-example {
    font-family: var(--mono);
    font-size: 0.76rem;
    line-height: 1.55;
    color: #c9b98a;
    background: rgba(238, 194, 94, 0.05);
    border: 1px dashed rgba(238, 194, 94, 0.25);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0 0 12px;
    white-space: pre;
    overflow-x: auto;
}
textarea.inscribe-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 150px;
    resize: vertical;
    background: rgba(255, 240, 200, 0.04);
    border: 1px solid rgba(238, 194, 94, 0.3);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1.6;
    color: #f0e6c8;
    tab-size: 4;
}
textarea.inscribe-input:focus {
    outline: none;
    border-color: rgba(238, 194, 94, 0.7);
    box-shadow: 0 0 0 3px rgba(238, 194, 94, 0.12);
}
.inscribe-result {
    font-family: 'Spectral', serif;
    font-size: 0.94rem;
    line-height: 1.5;
    min-height: 1.2em;
    margin: 10px 0 4px;
    color: #b39a6a;
}
.inscribe-ok { color: #a9d19a; }
.inscribe-err { color: #e8a17a; }
.inscribe-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}
button.inscribe-seal {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #1c1204;
    padding: 12px 24px;
    border: 1px solid #f7dd9b;
    border-radius: 6px;
    background: linear-gradient(180deg, #f7dd9b 0%, #e0b054 100%);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
button.inscribe-seal:hover { filter: brightness(1.06); }
button.inscribe-seal:disabled { opacity: 0.55; cursor: default; }
button.inscribe-skip {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: #8a744a;
    text-decoration: underline;
}
button.inscribe-skip:hover { color: #b39a6a; }
button.inscribe-skip:disabled { opacity: 0.5; }

/* a sealed form in the bag — the declaration, readable forever */
.bag-item-form {
    font-family: var(--mono);
    font-size: 0.68rem;
    line-height: 1.55;
    color: #a9987a;
    background: rgba(238, 194, 94, 0.05);
    border-left: 2px solid rgba(238, 194, 94, 0.3);
    border-radius: 0 4px 4px 0;
    padding: 6px 10px;
    margin: 6px 0 0;
    white-space: pre;
    overflow-x: auto;
}