/* v5 of the game: the universe panel, the two clocks and the rupture. Uses the
   site's own tokens (--pc-teal, --pc-pink, --phase-mid) and the v4 shell. */
#liveCounters .hud-u { font-size: 0.86em; opacity: 0.92; }
#liveCounters .hud-bar { height: 4px; width: 100%; background: rgba(255,255,255,0.12); border-radius: 2px; overflow: hidden; margin-top: 4px; }
#liveCounters .hud-bar > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--pc-teal, #35e8e0), var(--pc-pink, #ff3366)); transition: width 0.25s linear; }

.u-help { font-size: 0.85em; opacity: 0.8; margin: 0 0 6px; }
.u-readout { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 8px; font-size: 0.82em; }
.u-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,0.04); }
.u-row .u-k { opacity: 0.75; }
.u-row .u-v { font-variant-numeric: tabular-nums; text-align: right; }
.u-real { margin-top: 8px; }
.u-real summary { cursor: pointer; font-size: 0.85em; opacity: 0.85; }
.u-muted { opacity: 0.7; font-size: 0.85em; }
.u-children { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; max-height: 240px; overflow: auto; }
.u-children li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.82em; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,0.04); }
.u-children li.is-failed { opacity: 0.55; font-style: italic; }
.u-play { flex: 0 0 auto; }

#ruptureOverlay {
    position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(0.9);
    padding: 18px 28px; border-radius: 14px; text-align: center;
    font-size: 2rem; font-weight: 700; letter-spacing: 0.04em;
    color: #fff; background: rgba(176, 92, 196, 0.85); box-shadow: 0 0 60px rgba(255, 51, 102, 0.5);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 50;
}
#ruptureOverlay small { display: block; font-size: 0.5em; font-weight: 500; opacity: 0.9; margin-top: 4px; }
#ruptureOverlay.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (max-width: 900px) {
    #liveCounters .hud-u { font-size: 0.78em; }
}

/* ---- 3D view ---- */
#scene3dWrap { position: fixed; inset: 0; display: none; z-index: 0; }
#scene3dWrap.on { display: block; }
#scene3dWrap canvas { width: 100% !important; height: 100% !important; display: block; touch-action: none; }
#grid.behind { opacity: 0; pointer-events: none; }
body { background: radial-gradient(1200px 800px at 50% 40%, #16121e 0%, #08070a 60%, #000 100%); }

/* ---- HUD ---- */
#liveCounters .hud-epoch { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.hud-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75em; font-weight: 700; letter-spacing: 0.04em; color: #0b0d12; background: linear-gradient(90deg, var(--pc-teal, #35e8e0), #b05cc4); }
.u-hidden { display: none !important; }
.pc-count { display: inline-block; min-width: 1.4em; padding: 0 5px; border-radius: 999px; font-size: 0.75em; text-align: center; background: var(--pc-pink, #ff3366); color: #fff; }

/* ---- toasts: the pops ---- */
/* Top left since 2026-10-18 (Josh), under the site bar, clear of the dock and
   readouts at the bottom and the menu drawer on the right; above the field and
   the drawer (880), under Zin's panel. Newest at the top. */
#toastStack { position: fixed; left: 14px; right: auto; top: calc(var(--pc-bar-h, 56px) + 14px); bottom: auto; display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: flex-start; gap: 10px; z-index: 895; pointer-events: none; max-width: min(360px, calc(100vw - 28px)); max-height: calc(100vh - var(--pc-bar-h, 56px) - 120px); overflow: hidden; }
.pc-toast { --hue: 200; display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, hsla(var(--hue), 80%, 45%, 0.92), rgba(20, 16, 28, 0.92)); border: 1px solid hsla(var(--hue), 90%, 70%, 0.6);
  box-shadow: 0 10px 40px hsla(var(--hue), 90%, 55%, 0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
  transform: translateX(-24px) scale(0.96); opacity: 0; transition: transform 0.35s cubic-bezier(.2,.9,.3,1.3), opacity 0.3s ease; }
.pc-toast.show { transform: none; opacity: 1; }
.pc-toast-icon { font-size: 1.5em; line-height: 1; filter: drop-shadow(0 0 6px hsla(var(--hue), 90%, 70%, 0.9)); animation: pc-spin 2.4s linear infinite; }
.pc-toast.tier-5 .pc-toast-icon { animation-duration: 1.2s; }
.pc-toast-body { display: flex; flex-direction: column; gap: 2px; font-size: 0.9em; line-height: 1.3; }
.pc-toast-body strong { font-size: 1.02em; letter-spacing: 0.02em; }
.pc-toast-body span { opacity: 0.92; }
@keyframes pc-spin { to { transform: rotate(360deg); } }
.gi-chip { --hue: 200; }

@media (prefers-reduced-motion: reduce) { .pc-toast-icon { animation: none; } }
.u-import { display: inline-block; padding: 4px 10px; border: 1px solid currentColor; border-radius: 6px; cursor: pointer; font-size: 0.9em; opacity: 0.85; }
.u-import:hover { opacity: 1; }

/* ==== The announcer and the end of a run (2026-10-18) =====================
   Josh: the messages that popped over the middle of the field go to the top
   of the page, styled like a game; the end of a run stays up with the run's
   figures and Play Again. Overrides the shared style.css #novaOverlay (v4
   keeps its own). Layers: over the field and the menu drawer (880), under
   the pops (895) and Zin's panel. */
#novaOverlay {
    top: calc(var(--pc-bar-h, 56px) + 14px); left: 50%; bottom: auto;
    transform: translate(-50%, -16px);
    z-index: 892; width: min(560px, calc(100vw - 28px));
    font-size: 1rem; color: #eef1f6; text-align: center; pointer-events: none; opacity: 0;
}
#novaOverlay.show { animation: pc-announce 2.8s cubic-bezier(.2, .9, .3, 1) forwards; }
#novaOverlay.prompt { opacity: 1; transform: translate(-50%, 0); animation: none; }
@keyframes pc-announce {
    0%   { opacity: 0; transform: translate(-50%, -16px) scale(.96); }
    12%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
    78%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -10px) scale(.98); }
}
.pc-banner {
    --hue: 320;
    position: relative; overflow: hidden;
    padding: 12px 22px 13px; border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%),
        linear-gradient(135deg, hsla(var(--hue), 70%, 22%, .96), rgba(8, 9, 14, .97) 70%);
    border: 1px solid hsla(var(--hue), 95%, 70%, .55);
    box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 14px 50px hsla(var(--hue), 90%, 50%, .35), inset 0 0 30px hsla(var(--hue), 90%, 60%, .12);
}
.pc-banner::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
    animation: pc-sweep 1.4s ease-out .15s 1 both;
}
@keyframes pc-sweep { to { left: 120%; } }
.pc-banner-kicker {
    display: block; font: 700 .72rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: .32em; text-transform: uppercase; color: hsl(var(--hue), 95%, 78%);
}
.pc-banner-title {
    display: block; margin-top: 3px;
    font-size: clamp(1.25rem, 3.6vw, 1.7rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    text-shadow: 0 0 18px hsla(var(--hue), 95%, 65%, .8);
}
.pc-banner-sub { display: block; margin-top: 2px; font-size: .86rem; color: rgba(238, 241, 246, .82); }
.pc-banner.is-prompt { --hue: 190; }
.pc-banner-act { display: block; margin: 10px auto 0; pointer-events: auto; }   /* a banner's one button: the overlay passes taps through, the button takes them */
.pc-banner.is-prompt .pc-banner-title { animation: pc-blink 1.6s ease-in-out infinite; }
@keyframes pc-blink { 50% { opacity: .55; } }

/* The pops step down on a phone, where the banner spans the top. */
@media (max-width: 700px) {
    #toastStack { top: calc(var(--pc-bar-h, 56px) + 96px); }
}

/* ---- well labels over the 3D field (2026-10-24): every well is drawn in front; the label says where it really is ---- */
.well-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.well-label { position: absolute; left: 0; top: 0; margin: -26px 0 0 10px; padding: 2px 7px; border-radius: 7px; white-space: nowrap;
    font: 600 11px/1.3 ui-monospace, Menlo, Consolas, monospace; color: #f3e9ff; background: rgba(20, 12, 30, .72); border: 1px solid rgba(176, 92, 196, .6); }
.well-label.is-far { color: #b9a9c9; border-style: dashed; background: rgba(20, 12, 30, .5); }
@media (max-width: 700px) { .well-label { font-size: 10px; } }
/* Ascendant Wells and Well #1, named on screen (2026-10-28; book Part 3.14, Ascendant Wells) */
.well-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.well-tag { position: absolute; left: 0; top: 0; margin: -20px 0 0 10px; white-space: nowrap; pointer-events: none;
    font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace; color: #ffe7a3; text-shadow: 0 0 3px #000, 0 0 8px rgba(255, 200, 90, .55); }   /* no pill: the mark hangs by its well (2026-10-28, Josh) */
.well-tag.is-top { color: #fff6dc; font-size: 13px; text-shadow: 0 0 3px #000, 0 0 10px rgba(255, 225, 150, .8); }
@media (max-width: 700px) { .well-tag { font-size: 10px; } }
.alpha-hoop { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; box-sizing: border-box; border-radius: 50%;
    border: 2px solid #ffc94d; box-shadow: 0 0 8px rgba(255, 196, 70, .75), inset 0 0 6px rgba(255, 196, 70, .45); animation: alphaBreathe 3.2s ease-in-out infinite; }   /* the Alpha Well's gold hoop (2026-10-29, Josh) */
.alpha-hoop.is-far { opacity: .35; animation: none; }
@keyframes alphaBreathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .alpha-hoop { animation: none; } }
.u-children li.is-ascendant { border-left: 3px solid #ffd77a; padding-left: 6px; }
.u-asc { color: #ffd77a; }

/* ---- a discovery (2026-10-24): the run summary's card, with the pattern drawn and a name field ---- */
#discovery {
    position: fixed; inset: 0; z-index: 895;
    display: none; align-items: flex-start; justify-content: center;
    padding: calc(var(--pc-bar-h, 56px) + 18px) 16px calc(18px + var(--pc-consent-h, 0px));
    background: radial-gradient(900px 500px at 50% 20%, rgba(255, 209, 102, .22), rgba(0, 0, 0, .62) 70%);
    overflow-y: auto;
}
#discovery.show { display: flex; animation: rs-in .45s cubic-bezier(.2, .9, .3, 1.2) both; }
#discovery.is-first .rs-kicker { color: #ffd166; }
.dv-body { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
#dvCanvas { width: 240px; height: 240px; max-width: 100%; border-radius: 14px; background: #05060a; border: 1px solid rgba(255,255,255,.12); image-rendering: pixelated; }
.dv-facts { flex: 1 1 200px; display: grid; gap: 8px; }
.dv-facts div { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.dv-facts b { display: block; color: #fff; font-size: 1rem; }
.dv-facts span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #8b93a1; }
.dv-form { margin-top: 14px; }
.dv-form label { display: block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #35e8e0; margin-bottom: 6px; }
.dv-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dv-row input { flex: 1 1 220px; min-width: 0; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.35); color: #fff; font: inherit; font-size: 16px; }
.dv-row .rs-btn { min-width: 0; }
.dv-note { margin: 6px 0 0; font-size: .85rem; color: #aab1bd; }
.dv-note a { color: #35e8e0; }

/* ---- the end of a run ---- */
#runSummary {
    position: fixed; inset: 0; z-index: 893;
    display: none; align-items: flex-start; justify-content: center;
    padding: calc(var(--pc-bar-h, 56px) + 18px) 16px calc(18px + var(--pc-consent-h, 0px));
    background: radial-gradient(900px 500px at 50% 20%, rgba(176, 92, 196, .22), rgba(0, 0, 0, .55) 70%);
    overflow-y: auto;
}
#runSummary.show { display: flex; animation: rs-in .45s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes rs-in { from { opacity: 0; } to { opacity: 1; } }
.rs-card {
    position: relative; width: min(680px, 100%);
    padding: 22px clamp(16px, 4vw, 30px) 20px; border-radius: 20px; color: #eef1f6;
    background:
        linear-gradient(160deg, rgb(22, 18, 34), rgb(7, 8, 12));
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 60px rgba(53, 232, 224, .12);
    animation: rs-rise .55s cubic-bezier(.2, .9, .3, 1.2) both;
}
.rs-card::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 21px; padding: 1px;
    background: conic-gradient(from var(--rs-a, 0deg), #35e8e0, #b05cc4, #ff3366, #35e8e0);
    animation: rs-spin 6s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
@property --rs-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rs-spin { to { --rs-a: 360deg; } }
@keyframes rs-rise { from { transform: translateY(24px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.rs-close {
    position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #c9cdd6; font-size: 18px; cursor: pointer;
}
.rs-close:hover { color: #fff; border-color: rgba(53, 232, 224, .5); }
.rs-kicker { font: 700 .72rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .34em; text-transform: uppercase; color: #35e8e0; }
.rs-title {
    margin: 8px 0 2px; font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 900; letter-spacing: .05em; text-transform: uppercase; line-height: 1.05;
    background: linear-gradient(90deg, #35e8e0, #b05cc4 55%, #ff3366); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 18px rgba(176, 92, 196, .45));
}
.rs-lede { margin: 6px 0 16px; color: #aab1bd; font-size: .95rem; }
.rs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rs-stat {
    position: relative; padding: 12px 12px 10px; border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border: 1px solid rgba(255,255,255,.08);
    opacity: 0; animation: rs-pop .4s cubic-bezier(.2, .9, .3, 1.4) forwards;
}
@keyframes rs-pop { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }
.rs-stat b {
    display: block; font: 800 clamp(1.15rem, 3.4vw, 1.55rem)/1.1 ui-monospace, Menlo, Consolas, monospace; color: #fff;
    font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(53, 232, 224, .45);
}
.rs-stat span { display: block; margin-top: 4px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #8b93a1; }
.rs-stat small { display: block; margin-top: 2px; font-size: .74rem; color: #aab1bd; }
.rs-stat.is-hot b { color: #ffd166; text-shadow: 0 0 16px rgba(255, 209, 102, .55); }
.rs-finds { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.rs-find {
    --hue: 200; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .82rem;
    background: hsla(var(--hue), 80%, 50%, .14); border: 1px solid hsla(var(--hue), 90%, 65%, .4); color: hsl(var(--hue), 90%, 82%);
}
.rs-verdict { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: .9rem; color: #c9cdd6; background: rgba(53, 232, 224, .06); border: 1px dashed rgba(53, 232, 224, .3); }
.rs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.rs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 10rem; max-width: 75%;
    padding: 12px 22px; border-radius: 12px; font: inherit; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .9rem;
    color: #e8eaef; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); cursor: pointer; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.rs-btn:hover, .rs-btn:focus-visible { transform: translateY(-2px); outline: none; border-color: rgba(53, 232, 224, .55); box-shadow: 0 8px 26px rgba(53, 232, 224, .2); }
.rs-btn-go {
    color: #06251f; border-color: transparent;
    background: linear-gradient(135deg, #35e8e0, #17b8b2 60%, #b05cc4);
    box-shadow: 0 0 0 0 rgba(53, 232, 224, .6); animation: rs-pulse 2s ease-out infinite;
}
@keyframes rs-pulse { 0% { box-shadow: 0 0 0 0 rgba(53, 232, 224, .55); } 70% { box-shadow: 0 0 0 14px rgba(53, 232, 224, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 232, 224, 0); } }
@media (max-width: 560px) { .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rs-btn { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) {
    #novaOverlay.show { animation-duration: .01s; opacity: 1; }
    .pc-banner::after, .rs-card::before, .rs-btn-go, .pc-banner.is-prompt .pc-banner-title { animation: none; }
    .rs-stat, .rs-card { animation: none; opacity: 1; }
}

/* ==== The readout folds, and the game on a phone (2026-10-18) ==============
   Josh: on a phone "the complexity data covers most of the page and then the
   popouts end up covering the entire view of the unisphere". The readout
   folds to its key rows (level and epoch, pulses, wells, the rupture bar) and
   opens on tap; the dock spans the bottom; the banner and the pops shrink and
   keep to the top; the nova boxes stay off the field. */
.hud-toggle {
    justify-self: end; display: inline-flex; align-items: center; gap: 4px;
    margin: -2px -4px 2px auto; padding: 2px 9px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: .72rem; letter-spacing: .04em; color: #c9cdd6;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
#liveCounters .hud-toggle span { color: inherit; }
.hud-toggle:hover { color: #fff; border-color: rgba(53, 232, 224, .5); }
.hud-toggle-caret { display: inline-block; transition: transform .2s ease; }
#liveCounters.hud-folded .hud-toggle-caret { transform: rotate(180deg); }
#liveCounters.hud-folded > div:not(.hud-key) { display: none; }
#liveCounters { max-height: calc(100vh - var(--pc-bar-h, 56px) - 120px); overflow-y: auto; }

@media (max-width: 700px) {
    #simDock {
        left: 10px; right: 10px; bottom: calc(10px + var(--pc-consent-h, 0px));
        justify-content: stretch; gap: 6px; padding: 5px 6px;
    }
    #simDock { padding: 4px 6px; gap: 5px; }
    #simDock .dockBtn { flex: 1 1 0; min-width: 0; padding: 0 6px; min-height: 30px; font-size: .84rem; border-radius: 8px; }   /* smaller on a phone (2026-10-27, Josh) */
    #simDock .dockBtn-menu { flex: 0 0 38px; }
    #liveCounters {
        left: 10px; right: 10px; width: auto;
        bottom: calc(10px + 40px + 6px + var(--pc-consent-h, 0px));
        font-size: .74rem; padding: 6px 10px; border-radius: 12px;
    }
    #liveCounters.hud-folded { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; }
    #liveCounters.hud-folded .hud-toggle { order: 2; margin: 0 0 0 auto; }
    #liveCounters.hud-folded .hud-epoch { order: 1; flex: 1 1 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #liveCounters.hud-folded .hud-key:not(.hud-epoch):not(.hud-bar) { order: 3; }
    #liveCounters.hud-folded .hud-bar { order: 4; flex: 1 1 100%; }
    #liveCounters:not(.hud-folded) { grid-template-columns: 1fr 1fr; gap: 3px 10px; max-height: 46vh; }
    #liveCounters:not(.hud-folded) .hud-toggle,
    #liveCounters:not(.hud-folded) .hud-epoch,
    #liveCounters:not(.hud-folded) .hud-bar { grid-column: 1 / -1; }
    body.menu-open #liveCounters { opacity: 0; pointer-events: none; }

    /* The announcer, smaller, and the pops: one line each, under it. */
    #novaOverlay { top: calc(var(--pc-bar-h, 56px) + 8px); width: calc(100vw - 20px); }
    .pc-banner { padding: 4px 10px 5px; border-radius: 10px; }   /* tighter on a phone (2026-10-27, Josh) */
    .pc-banner-kicker { font-size: .54rem; letter-spacing: .18em; }
    .pc-banner-title { font-size: .9rem; margin-top: 0; line-height: 1.15; }
    .pc-banner-sub { font-size: .66rem; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pc-banner-act { min-width: 0; max-width: none; padding: 3px 10px; margin-top: 4px; font-size: .6rem; letter-spacing: .06em; border-radius: 7px; gap: 4px; }
    #toastStack { left: 10px; right: 10px; top: calc(var(--pc-bar-h, 56px) + 74px); max-width: none; gap: 6px; max-height: 96px; }
    .pc-toast { padding: 6px 10px; border-radius: 10px; gap: 8px; align-items: center; }
    .pc-toast-icon { font-size: 1.05em; }
    .pc-toast-body { font-size: .78em; }
    .pc-toast-body span { display: none; }

    /* The boxes that label each nova sit on the field itself: off on a phone. */
    #novaInfoContainer, .novaInfoBox { display: none !important; }
}

/* ---- Phones, round two (2026-10-18) ---- */
/* A drag on the field paints; it never scrolls or zooms the page. */
#grid { touch-action: none; }
/* The rupture line: its own width, and above the readout and the dock. */
#ruptureOverlay { width: max-content; max-width: calc(100vw - 32px); z-index: 891; }
/* The drawer's hints live in title=, which a finger cannot hover: a tap shows them. */
.hint-tip { cursor: pointer; }
.hint-pop {
    display: block; margin: 6px 0 2px; padding: 8px 10px; border-radius: 8px; font-size: .82rem; line-height: 1.4;
    color: #d6d9e0; background: rgba(53, 232, 224, .08); border: 1px solid rgba(53, 232, 224, .3);
}
@media (max-width: 700px) {
    .u-import { display: inline-flex; align-items: center; min-height: 40px; }
    .rs-close { width: 40px; height: 40px; }
}

/* ── First load (2026-10-25): index.php's .pc-boot shows until app.js init()
   has drawn a frame; nothing half-built shows before it. ─────────────────── */
.pc-boot { display: none; }
body.pc-booting #liveCounters,
body.pc-booting #simDock,
body.pc-booting #scene3dWrap,
body.pc-booting #grid,
body.pc-booting #controls,
body.pc-booting #slideMenu { visibility: hidden; }
body.pc-booting .pc-boot {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    position: fixed; inset: 0; z-index: 5; pointer-events: none;
    color: rgba(255, 255, 255, 0.62); font-size: 0.9rem; letter-spacing: 0.04em;
}
.pc-boot-orb {
    width: 46px; height: 46px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--pc-teal, #35e8e0), var(--pc-pink, #ff3366));
    box-shadow: 0 0 28px rgba(53, 232, 224, 0.35);
    animation: pcBootPulse 1.4s ease-in-out infinite;
}
@keyframes pcBootPulse { 0%, 100% { transform: scale(0.82); opacity: 0.55; } 50% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pc-boot-orb { animation: none; } }

/* A pop is as wide as its text (2026-10-25, Josh: the background spanned the whole width): the stack no longer stretches it. */
.pc-toast { max-width: 100%; }

/* Pops on a phone (2026-10-25, Josh): side by side, and at the very top unless a banner is showing there, when they
   sit just below it. The banner (#novaOverlay) carries .show while it is up and .prompt while it waits for a tap. */
@media (max-width: 700px) {
    #toastStack { top: calc(var(--pc-bar-h, 56px) + 8px); flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; max-height: 74px; transition: top .25s ease; }
    body:has(#novaOverlay.show) #toastStack, body:has(#novaOverlay.prompt) #toastStack { top: calc(var(--pc-bar-h, 56px) + 74px); }
}

/* The Details toggle in the readout's top-right corner on a phone too (2026-10-25, Josh); the rows keep clear of it. */
@media (max-width: 700px) {
    #liveCounters .hud-toggle, #liveCounters.hud-folded .hud-toggle, #liveCounters:not(.hud-folded) .hud-toggle { position: absolute; top: 5px; right: 6px; margin: 0; order: 0; grid-column: auto; z-index: 1; }
    #liveCounters .hud-epoch, #liveCounters.hud-folded .hud-epoch { padding-right: 86px; }   /* open or folded, the first line keeps clear of the toggle (2026-10-29) */
    #liveCounters .hud-epoch #hudEpoch { min-width: 0; white-space: normal; }   /* a nowrap line ran through the padding under the toggle: it wraps inside its own box */
    #liveCounters:not(.hud-folded) { padding-top: 30px; }
}

/* ⚠️ THE DOCK'S BUTTONS IN THE LOGO'S COLOURS (2026-10-27, Josh: "the buttons still have the dark text, I want a brighter text
   ... spice those buttons up like the pulsing logo's colours, don't make the buttons pulse"): teal, violet and pink
   gradients with bright text and a soft, still glow; nothing animates. */
#simDock .dockBtn-go {
    color: #fff; text-shadow: 0 1px 2px rgba(6, 20, 40, .55);
    background: linear-gradient(135deg, #35e8e0 0%, #5aa9ff 55%, #b05cc4 100%);
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 0 12px rgba(53, 232, 224, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
#simDock .dockBtn-stop {
    color: #fff; text-shadow: 0 1px 2px rgba(40, 6, 20, .55);
    background: linear-gradient(135deg, #ff3366 0%, #d0479a 50%, #b05cc4 100%);
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: 0 0 12px rgba(255, 51, 102, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
}
#simDock .dockBtn-go:disabled, #simDock .dockBtn-stop:disabled { box-shadow: none; }
.pc-banner-act.rs-btn-go { color: #fff; text-shadow: 0 1px 2px rgba(6, 20, 40, .55); animation: none; box-shadow: 0 0 12px rgba(53, 232, 224, .3); }

/* ⚠️ RETURNED TO THE SOURCE, ON A PHONE (2026-10-27, Josh: "the returned to source popout with the x button still needs a full
   rework to tighten it up on mobile"): a compact card that fits the screen: small close, smaller title and stats in three
   columns, finds in one scrolling row, the verdict trimmed, small buttons in a row. */
@media (max-width: 700px) {
    #runSummary { padding: calc(var(--pc-bar-h, 56px) + 8px) 8px calc(8px + var(--pc-consent-h, 0px)); align-items: flex-start; }
    .rs-card { padding: 12px 12px 10px; border-radius: 14px; }
    .rs-card::before { border-radius: 15px; }
    .rs-close { top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 8px; font-size: 15px; line-height: 1; padding: 0; }
    .rs-kicker { font-size: .56rem; letter-spacing: .2em; padding-right: 34px; }
    .rs-title { margin: 4px 34px 2px 0; font-size: 1.15rem; letter-spacing: .03em; filter: none; }
    .rs-lede { margin: 2px 0 8px; font-size: .72rem; line-height: 1.32; }
    .rs-stat b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }   /* three across: four cut every value in scientific notation short (2026-10-29) */
    .rs-stat { padding: 6px 6px 5px; border-radius: 9px; }
    .rs-stat b { font: 800 .86rem/1.15 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: 0; }   /* the monospace and its spacing cut "6.13×10⁵⁴" short in a quarter of a phone (2026-10-29) */
    .rs-stat span { margin-top: 2px; font-size: .52rem; letter-spacing: .08em; }
    .rs-stat small { display: none; }
    .rs-finds { flex-wrap: nowrap; overflow-x: auto; gap: 5px; margin: 8px 0 2px; padding-bottom: 2px; scrollbar-width: none; }
    .rs-finds::-webkit-scrollbar { display: none; }
    .rs-find { flex: 0 0 auto; padding: 3px 8px; font-size: .66rem; white-space: nowrap; }
    .rs-verdict { margin: 6px 0 0; padding: 6px 8px; font-size: .7rem; border-radius: 8px; line-height: 1.35; }
    .rs-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
    .rs-actions .rs-btn { min-width: 0; max-width: none; width: 100%; padding: 7px 6px; font-size: .6rem; letter-spacing: .04em; border-radius: 8px; gap: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rs-actions .rs-btn[hidden] { display: none; }
    .rs-actions .rs-btn-go { animation: none; }
}
.rs-actions .rs-btn-go { color: #fff; text-shadow: 0 1px 2px rgba(6, 20, 40, .55); }   /* bright text like the dock (2026-10-27) */

/* 8.3 (2026-10-27, Josh: "have those buttons by the sound throughout the menu be toggles and not checkboxes"): every on/off
   option in the menu is a toggle switch. Still the same checkbox underneath, so every handler and saved setting keeps working. */
html :is(#slideMenu, #controls) input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 34px; height: 18px; margin: 0 8px 0 0;
    vertical-align: middle; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
html :is(#slideMenu, #controls) input[type="checkbox"]::before {
    content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
    background: #cfd3dc; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); transition: transform 0.2s, background 0.2s;
}
html :is(#slideMenu, #controls) input[type="checkbox"]:checked { background: linear-gradient(90deg, var(--pc-teal, #35e8e0), #b05cc4); border-color: transparent; }
html :is(#slideMenu, #controls) input[type="checkbox"]:checked::before { transform: translateX(16px); background: #fff; }
html :is(#slideMenu, #controls) input[type="checkbox"]:focus-visible { outline: 2px solid var(--pc-teal, #35e8e0); outline-offset: 2px; }
html :is(#slideMenu, #controls) input[type="checkbox"]:disabled { opacity: 0.45; cursor: default; }
html :is(#slideMenu, #controls) label:has(> input[type="checkbox"]) { display: flex; flex-direction: row; align-items: center; gap: 0; }
/* the count of folded repeats on a notice (8.3) */
.pc-toast-count { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 0.75em; font-weight: 700; color: #0b0d12; background: linear-gradient(90deg, var(--pc-teal, #35e8e0), #b05cc4); white-space: nowrap; align-self: center; }
/* the note a nova strikes, on its banner (8.3) */
.pc-banner-note { display: block; margin-top: 4px; font-size: .82rem; font-weight: 700; letter-spacing: .02em; background: linear-gradient(90deg, var(--pc-teal, #35e8e0), #d9a6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 700px) { .pc-banner-note { font-size: .66rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
/* the "Pulsing" pill while the Pulsecore fills (8.3) */
.pc-pulsing-pill { position: fixed; top: 72px; left: 50%; transform: translate(-50%, -8px); z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: #eef1f6; background: rgba(12, 14, 22, .82); border: 1px solid rgba(53, 232, 224, .55); box-shadow: 0 0 18px rgba(53, 232, 224, .25); opacity: 0; pointer-events: none; transition: opacity .45s, transform .45s; }
.pc-pulsing-pill.show { opacity: 1; transform: translate(-50%, 0); }
.pc-pulsing-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(90deg, var(--pc-teal, #35e8e0), #b05cc4); animation: pc-pulse-beat 0.9s ease-in-out infinite; }
@keyframes pc-pulse-beat { 0%, 100% { transform: scale(0.7); opacity: .6; } 50% { transform: scale(1.25); opacity: 1; } }
@media (max-width: 700px) { .pc-pulsing-pill { top: 56px; font-size: .72rem; padding: 4px 11px; } }
@media (prefers-reduced-motion: reduce) { .pc-pulsing-dot { animation: none; } }
/* 8.3 (2026-10-27, Josh): on a desktop the "Tap a well to dive in" prompt sits top left, out of the way of the torus */
@media (min-width: 701px) {
    /* the harmonic banners over the field, not over the open settings drawer (2026-10-29, Josh: "showing properly at the top of the page") */
    body:has(#slideMenu.open) #novaOverlay:not(.prompt) { left: calc((100vw - var(--pc-drawer-w, 460px)) / 2); width: min(560px, calc(100vw - var(--pc-drawer-w, 460px) - 28px)); }
    #novaOverlay.prompt { left: 16px; transform: none; top: calc(var(--pc-bar-h, 56px) + 54px); width: min(420px, calc(100vw - 32px)); text-align: left; }
    #novaOverlay.prompt .pc-banner-act { margin: 10px 0 0; }
}
/* the Continue the universe buttons, smaller (8.3) */
.pc-banner-act.rs-btn, .rs-btn[data-dv="continue"] { min-width: 0; padding: 6px 14px; font-size: .72rem; letter-spacing: .08em; border-radius: 9px; gap: 6px; }
/* full screen, top right (8.3) */
.pc-fs-btn { position: fixed; top: calc(var(--pc-bar-h, 56px) + 10px); right: 14px; z-index: 880; width: 34px; height: 34px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; color: #eef1f6; background: rgba(12, 14, 22, .72); border: 1px solid rgba(53, 232, 224, .45); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pc-fs-btn:hover, .pc-fs-btn:focus-visible { border-color: #35e8e0; box-shadow: 0 0 12px rgba(53, 232, 224, .35); outline: none; }
.pc-fs-btn[hidden] { display: none; }
body.menu-open .pc-fs-btn { opacity: 0; pointer-events: none; }
/* the note popout, one card per strike (8.3) */
.pc-note-pop { position: fixed; right: 18px; top: 42%; z-index: 885; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 14px; border-radius: 16px; color: #eef1f6; background: linear-gradient(135deg, rgba(20, 22, 34, .92), rgba(10, 12, 20, .92)); border: 1px solid rgba(53, 232, 224, .45); box-shadow: 0 10px 34px rgba(0, 0, 0, .45), 0 0 22px rgba(176, 92, 196, .25); opacity: 0; transform: translateX(24px); pointer-events: none; max-width: min(360px, calc(100vw - 36px)); }
/* in step with the nova banner above it: the same 2.8 s rise, hold and fade (Josh, 2026-10-28) */
.pc-note-pop.show { animation: pc-note-announce 5.6s cubic-bezier(.2, .9, .3, 1) forwards; }   /* twice the banner (2026-10-28) */
@keyframes pc-note-announce { 0% { opacity: 0; transform: translateX(24px); } 12% { opacity: 1; transform: none; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(12px); } }
@media (prefers-reduced-motion: reduce) { .pc-note-pop.show { animation: none; opacity: 1; transform: none; } }
.pc-note-glyph { font-size: 3.4rem; line-height: 1; background: linear-gradient(160deg, #35e8e0, #b05cc4 70%, #ff3366); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pc-note-body { display: flex; flex-direction: column; min-width: 0; }
.pc-note-kicker { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(238, 241, 246, .62); }
.pc-note-name { font-size: 2.4rem; font-weight: 800; line-height: 1.05; letter-spacing: .02em; }
.pc-note-name sub { font-size: 1rem; font-weight: 700; margin-left: 2px; vertical-align: baseline; position: relative; bottom: -2px; }
.pc-note-cents { font-size: 1rem; font-weight: 700; margin-left: 10px; color: #35e8e0; }
.pc-note-detail { font-size: .8rem; color: rgba(238, 241, 246, .78); }
/* on a phone, a small block that pops out at the bottom right (Josh, 2026-10-28) */
@media (max-width: 700px) {
    .pc-note-pop { top: auto; bottom: 220px; right: 10px; gap: 7px; padding: 6px 10px 6px 8px; border-radius: 12px; max-width: 58vw; }
    .pc-note-glyph { font-size: 1.5rem; }
    .pc-note-kicker { font-size: .52rem; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pc-note-name { font-size: 1.15rem; }
    .pc-note-name sub { font-size: .66rem; bottom: -1px; }
    .pc-note-cents { font-size: .66rem; margin-left: 6px; }
    .pc-note-detail { font-size: .58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ⚠️ THE LANGUAGE BLOCK (2026-10-27, book Part 4.10): the universe's own language as a printout. It reuses the run card's look;
   printing shows only the block, black on white. */
.pc-lang { position: fixed; inset: 0; z-index: 895; display: none; align-items: flex-start; justify-content: center; padding: calc(var(--pc-bar-h, 56px) + 14px) 16px calc(18px + var(--pc-consent-h, 0px)); background: rgba(0, 0, 0, .62); overflow-y: auto; }
.pc-lang.show { display: flex; animation: rs-in .35s ease both; }
.pc-lang-card { position: relative; width: min(760px, 100%); padding: 20px clamp(14px, 3vw, 26px) 18px; border-radius: 20px; color: #eef1f6; background: linear-gradient(160deg, rgb(22, 18, 34), rgb(7, 8, 12)); border: 1px solid rgba(53, 232, 224, .35); box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 60px rgba(53, 232, 224, .12); }
.pc-lang-kicker { margin: 0 44px 10px 0; font: 700 .72rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .3em; text-transform: uppercase; color: #35e8e0; }
.pc-lang-pre { display: none; margin: 0; padding: 14px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); color: #d8f7f3; font: 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; max-width: 100%; }
/* the Language Block, styled (2026-10-28): the run card's look, the verdict first, words drawn bit by bit */
.pc-lang-body { min-width: 0; }
.lb-head { margin: 0 40px 12px 0; }
.lb-title { margin: 6px 0 2px; font: 800 clamp(1.3rem, 4vw, 1.8rem)/1.1 system-ui, sans-serif; letter-spacing: .02em; color: #fff; }
.lb-title span { color: #8b93a1; font-weight: 600; font-size: .7em; }
.lb-lede { margin: 2px 0 0; color: #aab1bd; font-size: .86rem; line-height: 1.4; }
.lb-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(120, 140, 170, .08); border: 1px solid rgba(160, 175, 200, .28); }
.lb-verdict b { font: 800 1.15rem/1.1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: #c9d3e3; }
.lb-verdict span { color: #c9cdd6; font-size: .88rem; }
.lb-verdict.lb-v-speaking { background: linear-gradient(120deg, rgba(255, 209, 102, .14), rgba(53, 232, 224, .08)); border-color: rgba(255, 209, 102, .55); box-shadow: 0 0 26px rgba(255, 209, 102, .12); }
.lb-verdict.lb-v-speaking b { color: #ffd166; text-shadow: 0 0 14px rgba(255, 209, 102, .5); }
.lb-verdict.lb-v-grammar-only { background: rgba(53, 232, 224, .07); border-color: rgba(53, 232, 224, .38); }
.lb-verdict.lb-v-grammar-only b { color: #35e8e0; }
.lb-verdict.lb-v-patterned { background: rgba(176, 92, 196, .1); border-color: rgba(176, 92, 196, .45); }
.lb-verdict.lb-v-patterned b { color: #d9a3e6; }
.lb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.lb-stat { padding: 10px 11px 9px; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); border: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.lb-stat b { display: block; font: 800 1.2rem/1.1 ui-monospace, Menlo, Consolas, monospace; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-stat b em { font-style: normal; font-weight: 500; font-size: .7em; color: #8b93a1; }
.lb-stat.is-hot b { color: #ffd166; text-shadow: 0 0 14px rgba(255, 209, 102, .45); }
.lb-stat span { display: block; margin-top: 4px; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #8b93a1; }
.lb-stat small { display: block; margin-top: 2px; font-size: .72rem; color: #aab1bd; line-height: 1.3; }
.lb-sec { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .07); }
.lb-sec h3 { margin: 0 0 10px; font: 700 .72rem/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .26em; text-transform: uppercase; color: #35e8e0; }
.lb-sec h3 small { display: block; margin-top: 3px; font: 400 .74rem/1.4 system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #8b93a1; }
.lb-alpha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lb-alpha > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 10px 6px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .07); }
.lb-alpha > div > b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font: 800 1.4rem/1 ui-monospace, Menlo, Consolas, monospace; }
.lb-alpha span { font-size: .78rem; font-weight: 700; color: #eef1f6; }
.lb-alpha small { font-size: .68rem; color: #8b93a1; line-height: 1.3; }
.lb-null { color: #8b93a1; border: 1px dashed rgba(160, 170, 190, .5); }
b.b0, .lb-bits i.b0 { color: #7f8aa3; background: rgba(127, 138, 163, .14); }
b.b1, .lb-bits i.b1 { color: #071014; background: #35e8e0; box-shadow: 0 0 10px rgba(53, 232, 224, .45); }
.lb-bits { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; }
.lb-bits i { display: inline-grid; place-items: center; width: 15px; height: 19px; border-radius: 4px; font: 700 .7rem/1 ui-monospace, Menlo, Consolas, monospace; font-style: normal; }
.lb-long { font: 600 .78rem/1.3 ui-monospace, Menlo, Consolas, monospace; color: #d9a3e6; }
.lb-long i { font-style: normal; color: #8b93a1; }
.lb-words { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.lb-words li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(40px, 1fr) auto 46px; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 9px; background: rgba(255, 255, 255, .025); }
.lb-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.lb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #35e8e0, #b05cc4); }
.lb-n { font: 700 .8rem/1 ui-monospace, Menlo, Consolas, monospace; color: #eef1f6; text-align: right; font-variant-numeric: tabular-nums; }
.lb-pill { display: inline-block; padding: 2px 7px; border-radius: 99px; font: 700 .6rem/1.3 system-ui, sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: #8b93a1; border: 1px solid rgba(255, 255, 255, .14); }
.lb-pill:empty { visibility: hidden; }
.lb-pill.is-own { color: #ffd166; border-color: rgba(255, 209, 102, .5); background: rgba(255, 209, 102, .1); }
.lb-pill.is-rule { color: #35e8e0; border-color: rgba(53, 232, 224, .4); background: rgba(53, 232, 224, .07); }
.lb-pill.is-new { color: #ffd166; border-color: rgba(255, 209, 102, .5); }
.lb-pill.is-inherited { color: #9fd8ff; border-color: rgba(159, 216, 255, .4); }
.lb-pill.is-lost { color: #ff8aa5; border-color: rgba(255, 51, 102, .45); }
.lb-code li { grid-template-columns: minmax(0, 1fr) auto minmax(70px, auto); }
.lb-lift { font-size: .72rem; color: #ffd166; text-align: right; }
.lb-note { margin: 10px 0 0; font-size: .78rem; color: #aab1bd; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lb-routines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.lb-routines li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "dot name pill" ". status status"; align-items: center; column-gap: 8px; padding: 7px 9px; border-radius: 9px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .05); }
.lb-dot { grid-area: dot; width: 8px; height: 8px; border-radius: 50%; background: #4a5263; }
.lb-r-name { grid-area: name; font-size: .82rem; font-weight: 600; color: #eef1f6; }
.lb-r-status { grid-area: status; font-size: .68rem; color: #8b93a1; line-height: 1.3; }
.lb-routines li > .lb-pill { grid-area: pill; }
.lb-routines li.is-runs .lb-dot { background: #35e8e0; box-shadow: 0 0 8px rgba(53, 232, 224, .7); }
.lb-routines li.is-runs .lb-r-status { display: none; }
.lb-routines li.is-skipped .lb-dot { background: #ff3366; }
.lb-routines li.is-off { opacity: .55; }
.lb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: .74rem; color: #8b93a1; }
.lb-foot b { font-family: ui-monospace, Menlo, Consolas, monospace; color: #d9a3e6; letter-spacing: .06em; }
.lb-foot a { color: #35e8e0; }
@media (max-width: 560px) {
    .pc-lang { padding-left: 8px; padding-right: 8px; }
    .pc-lang-card { padding: 14px 12px 12px; border-radius: 16px; }
    .lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .lb-stat { padding: 8px 9px 7px; }
    .lb-stat b { font-size: 1.02rem; }
    .lb-alpha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lb-routines li { padding: 6px 7px; column-gap: 6px; }
    .lb-r-name { font-size: .74rem; }
    .lb-r-status { font-size: .62rem; }
    .lb-words li { grid-template-columns: minmax(0, 1fr) 54px auto 40px; gap: 7px; padding: 5px 6px; }
    .lb-code li { grid-template-columns: minmax(0, 1fr) auto auto; }
    .lb-verdict b { font-size: 1rem; }
    .lb-verdict span { font-size: .8rem; }
}

@media print {
    html.pc-printing-lang body > *:not(.pc-lang) { display: none !important; }
    html.pc-printing-lang, html.pc-printing-lang body { background: #fff !important; }
    html.pc-printing-lang .pc-lang { position: static; display: block; padding: 0; background: none; overflow: visible; }
    html.pc-printing-lang .pc-lang-card { box-shadow: none; border: 0; background: none; color: #000; padding: 0; width: auto; }
    html.pc-printing-lang .pc-lang-pre { background: none; border: 0; color: #000; font-size: 10pt; overflow: visible; white-space: pre-wrap; }
    html.pc-printing-lang .pc-lang .rs-actions, html.pc-printing-lang .pc-lang .rs-close { display: none !important; }
    html.pc-printing-lang .pc-lang-kicker { color: #000; }
    html.pc-printing-lang .pc-lang-card, html.pc-printing-lang .pc-lang-card * { color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
    html.pc-printing-lang .lb-stat, html.pc-printing-lang .lb-verdict, html.pc-printing-lang .lb-alpha > div, html.pc-printing-lang .lb-words li, html.pc-printing-lang .lb-routines li { background: none !important; border: 1px solid #bbb !important; break-inside: avoid; }
    html.pc-printing-lang .lb-bits i.b1, html.pc-printing-lang b.b1 { background: #000 !important; color: #fff !important; }
    html.pc-printing-lang .lb-bits i.b0, html.pc-printing-lang b.b0 { background: #e6e6e6 !important; }
    html.pc-printing-lang .lb-bar i { background: #555 !important; }
    html.pc-printing-lang .lb-routines li.is-off { opacity: 1; color: #777 !important; }
}

/* 2D-only settings hide in the 3D view (2026-10-29: the debug numbers and centring draw on the 2D field only) */
body.view-3d .only-2d { display: none !important; }
/* the settings' section headers fold their sections (app.js setupSections) */
.sectionHeader[role=button] { cursor: pointer; user-select: none; }
.sectionHeader[role=button]:focus-visible { outline: 2px solid #35e8e0; outline-offset: 2px; border-radius: 4px; }
#controls .sectionContent.collapsed, .sectionContent.collapsed { display: none !important; }   /* a folded section stays folded (v8.css set the sections to flex) */