/* 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 (the author), 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) =====================
   The author: 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, the author) */
.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, the author) */
.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) ==============
   The author: 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, the author) */
    #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, the author) */
    .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, the author: the background spanned the whole width): the stack no longer stretches it. */
.pc-toast { max-width: 100%; }

/* Pops on a phone (2026-10-25, the author): 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, the author); 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, the author: "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, the author: "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, the author: "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, the author): 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, the author: "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 (the author, 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 (the author, 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) */

/* The readout sits on the board, not over it (2026-11-10, the author: "the data bar on the bottom left should have a clear background
   and no border at all so the game board can be seen properly"): no surface, blur or border, phone and desktop alike; a soft shadow on
   the text keeps it legible over a bright field. */
#liveCounters, #liveCounters.hud-folded { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; }
#liveCounters { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6); }
/* No grey track under the readout, and the Details toggle at its top left (2026-11-10, the author): the bar's empty track is clear,
   its fill still shows the progress; the toggle leads the first row on every screen. */
#liveCounters .hud-bar { background: transparent; }
#liveCounters .hud-toggle { justify-self: start; margin: -2px auto 2px -4px; order: -1; }
@media (max-width: 700px) {
    #liveCounters .hud-toggle, #liveCounters.hud-folded .hud-toggle, #liveCounters:not(.hud-folded) .hud-toggle { position: static; justify-self: start; margin: 0 auto 2px 0; order: -1; grid-column: 1 / -1; }
    #liveCounters .hud-epoch, #liveCounters.hud-folded .hud-epoch { padding-right: 0; }
    #liveCounters.hud-folded .hud-toggle { flex: 0 0 auto; }
}

/* The centered popups, smaller and on the left on a desktop (2026-11-10, the author: "all the popups that are centered should be smaller
   and popout on the left side on desktop"): the nova banner, the rupture, the run's end and discovery cards, the language card, the
   pulsing pill and the game's info panel. The toasts already stand at the top left, so the banner sits below them. Phones unchanged. */
@media (min-width: 701px) {
    #novaOverlay, body:has(#slideMenu.open) #novaOverlay:not(.prompt) { left: 16px; top: 30%; width: min(400px, calc(100vw - 32px)); font-size: .9rem; text-align: left; transform: translate(0, -16px); }
    #novaOverlay.show { animation-name: pc-announce-left; }
    #novaOverlay.prompt { transform: none; }
    @keyframes pc-announce-left {
        0%   { opacity: 0; transform: translate(0, -16px) scale(.96); }
        12%  { opacity: 1; transform: translate(0, 0) scale(1); }
        78%  { opacity: 1; transform: translate(0, 0) scale(1); }
        100% { opacity: 0; transform: translate(0, -10px) scale(.98); }
    }
    #ruptureOverlay { left: 16px; top: 55%; max-width: 380px; padding: 12px 18px; font-size: .9em; text-align: left; transform: translate(0, -50%) scale(.9); }
    #ruptureOverlay.show { transform: translate(0, -50%) scale(1); }
    #runSummary, #discovery, .pc-lang { justify-content: flex-start; padding-left: 16px; }
    .rs-card { width: min(480px, 100%); font-size: .92em; }
    .pc-lang-card { width: min(520px, 100%); font-size: .92em; }
    .pc-pulsing-pill { left: 16px; transform: translate(0, -8px); }
    .pc-pulsing-pill.show { transform: translate(0, 0); }
    .gi-panel { left: 16px; width: min(480px, calc(100vw - 32px)); transform: translate(0, calc(-50% + 10px)) scale(.985); }
    .gi-panel.is-open { transform: translate(0, -50%); }
}

/* The toasts smaller too (2026-11-10, the author), on a desktop: a narrower stack, tighter cards, smaller text and icon. */
@media (min-width: 701px) {
    #toastStack { max-width: 320px; gap: 6px; }
    .pc-toast { padding: 6px 10px; border-radius: 10px; gap: 8px; font-size: .82rem; }
    .pc-toast-icon { font-size: 1.2em; }
}

/* Top left, not middle left (2026-11-10, the author: "the popups should be top left"): on a desktop the banner, the rupture and the info
   panel stand under the site bar at the left; while one shows, the toasts step down below it. */
@media (min-width: 701px) {
    #novaOverlay, body:has(#slideMenu.open) #novaOverlay:not(.prompt) { top: calc(var(--pc-bar-h, 56px) + 14px); }
    #ruptureOverlay { top: calc(var(--pc-bar-h, 56px) + 14px); transform: scale(.9); transform-origin: top left; }
    #ruptureOverlay.show { transform: scale(1); }
    .gi-panel { top: calc(var(--pc-bar-h, 56px) + 14px); transform: translate(0, 10px) scale(.985); transform-origin: top left; }
    .gi-panel.is-open { transform: none; }
    body:has(#novaOverlay.show) #toastStack, body:has(#novaOverlay.prompt) #toastStack, body:has(#ruptureOverlay.show) #toastStack { top: calc(var(--pc-bar-h, 56px) + 150px); }
}

/* Smaller on a phone too (2026-11-10, the author): the same popups, tighter and in smaller type, where they already stand. */
@media (max-width: 700px) {
    #novaOverlay { font-size: .82rem; width: min(340px, calc(100vw - 24px)); }
    #ruptureOverlay { padding: 10px 14px; font-size: .82em; max-width: calc(100vw - 32px); }
    .rs-card, .pc-lang-card { font-size: .86em; padding: 14px 14px 12px; }
    .gi-panel { font-size: .88em; width: min(420px, calc(100vw - 24px)); }
    .pc-pulsing-pill { font-size: .8em; }
    .pc-toast { font-size: .78rem; padding: 5px 9px; }
    .pc-toast-icon { font-size: 1.1em; }
}

/* No all caps in the popups (2026-11-10, the author: "the full decay popout is all caps"): the banners' titles and labels read as written. */
.pc-banner-title, .pc-banner-kicker { text-transform: none; letter-spacing: .02em; }

/* The run's end card stays centered and always fits (2026-11-10, the author: "this should still be centered and ensure that it fits on the
   page"): centered at every width; the card is held to the space under the site bar and scrolls inside itself when its rows run long. */
#runSummary, #runSummary { justify-content: center; padding-left: 16px; padding-right: 16px; }
#runSummary .rs-card { max-height: calc(100vh - var(--pc-bar-h, 56px) - 36px - var(--pc-consent-h, 0px)); max-height: calc(100dvh - var(--pc-bar-h, 56px) - 36px - var(--pc-consent-h, 0px)); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
@media (min-width: 701px) { #runSummary .rs-card { width: min(560px, 100%); } }

/* No scroll bar on the run's end card, and its data fits (2026-11-10, the author): compact rows, the stats' notes in small type, the bar
   itself never shown (anything still past the screen scrolls without one). */
#runSummary .rs-card { scrollbar-width: none; -ms-overflow-style: none; padding: 16px 18px 14px; }
#runSummary .rs-card::-webkit-scrollbar { display: none; }
#runSummary .rs-title { font-size: clamp(1.2rem, 3.4vw, 1.7rem); margin: 4px 0 2px; }
#runSummary .rs-lede { margin: 4px 0 10px; font-size: .84rem; line-height: 1.35; }
#runSummary .rs-grid { gap: 6px; }
#runSummary .rs-stat { padding: 7px 9px; }
#runSummary .rs-stat b { font-size: 1.02rem; }
#runSummary .rs-stat span { margin-top: 2px; font-size: .62rem; letter-spacing: .1em; }
#runSummary .rs-stat small { font-size: .66rem; line-height: 1.25; }
#runSummary .rs-finds { margin: 8px 0 2px; gap: 6px; }
#runSummary .rs-verdict { margin-top: 8px; padding: 7px 10px; font-size: .8rem; }
#runSummary .rs-actions { margin-top: 10px; gap: 8px; }
#runSummary .rs-btn { padding: 9px 16px; font-size: .78rem; }
@media (min-width: 701px) { #runSummary .rs-card { width: min(640px, 100%); } }

/* The Details readout never shows a scroll bar (2026-11-10, the author: "the details bar dude, should not have a scrollbar ever"):
   tighter type so it fits, and the bar itself is never drawn. */
#liveCounters { scrollbar-width: none; -ms-overflow-style: none; gap: 2px; font-size: .74rem; }
#liveCounters::-webkit-scrollbar { display: none; }
#liveCounters .hud-u { font-size: .84em; }
/* The popouts smaller again (2026-11-10, the author: "the popouts are still too big"). */
.pc-banner-title { font-size: clamp(.95rem, 2.2vw, 1.15rem); margin-top: 2px; }
.pc-banner-kicker { font-size: .62rem; }
#novaOverlay { font-size: .8rem; }
@media (min-width: 701px) {
    #novaOverlay, body:has(#slideMenu.open) #novaOverlay:not(.prompt) { width: min(320px, calc(100vw - 32px)); }
    #ruptureOverlay { max-width: 300px; padding: 9px 14px; font-size: .8em; }
    .gi-panel { width: min(400px, calc(100vw - 32px)); font-size: .88em; }
    .rs-card { width: min(420px, 100%); }
    #runSummary .rs-card { width: min(560px, 100%); }
    .pc-lang-card { width: min(440px, 100%); font-size: .88em; }
}
@media (max-width: 700px) {
    #novaOverlay { width: min(300px, calc(100vw - 24px)); }
    #ruptureOverlay { padding: 8px 12px; font-size: .76em; }
}

/* Popout headings small (2026-11-10, the author: "the heading text is still way to big in the popouts"): every popout's heading near the
   body's size, no forced capitals, desktop and phone. */
.pc-banner-title { font-size: 1rem; line-height: 1.2; }
#runSummary .rs-title, .rs-title { font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; text-transform: none; line-height: 1.2; }
#ruptureOverlay { font-size: 1rem; }
#ruptureOverlay small { font-size: .75em; }
.gi-panel h2 { font-size: 1.05rem; }
.gi-panel h3 { font-size: .92rem; }
.lb-verdict b { font-size: .95rem; text-transform: none; letter-spacing: .02em; }
#discovery h2, #discovery h3, .pc-lang-card h2, .pc-lang-card h3 { font-size: 1rem; text-transform: none; }

/* The "returned to the Source" prompt stays put (2026-11-10, the author: "the returned to the source popout is being weird"): the left
   banner's entrance animation had reached the prompt too, which fades out after 2.8 s; a prompt stands still and fully shown. */
#novaOverlay.prompt, #novaOverlay.prompt.show, body:has(#slideMenu.open) #novaOverlay.prompt { animation: none; opacity: 1; transform: none; }

/* ⚠️ The Alpha Well's card (2026-11-11): a tap on Well #1 shows it for ten seconds, top right, under the fullscreen button. */
.pc-alpha-card { position: fixed; top: calc(var(--pc-bar-h, 56px) + 54px); right: 14px; z-index: 885; width: min(290px, calc(100vw - 28px));
    padding: 12px 14px 10px; border-radius: 14px; color: #eef1f6; background: rgba(12, 14, 22, .86); border: 1px solid rgba(53, 232, 224, .45);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    font-size: 13px; line-height: 1.45; opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; pointer-events: auto; }
.pc-alpha-card.show { opacity: 1; transform: none; }
.pc-alpha-card[hidden] { display: none; }
.pc-alpha-head { font-size: 15px; font-weight: 600; padding-right: 22px; text-transform: none; letter-spacing: 0; }
.pc-alpha-asc { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 500; color: #e8c85a; border: 1px solid rgba(232, 200, 90, .55); vertical-align: 2px; }
.pc-alpha-gen { color: #35e8e0; font-size: 12px; margin: 2px 0 8px; }
.pc-alpha-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.pc-alpha-card dt { color: #8a92a0; white-space: nowrap; }
.pc-alpha-card dd { margin: 0; color: #e8eaef; overflow-wrap: anywhere; }
.pc-alpha-x { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #9aa1ad; font-size: 16px; line-height: 1; cursor: pointer; }
.pc-alpha-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }
@media (max-width: 640px) {
    .pc-alpha-card { top: calc(var(--pc-bar-h, 56px) + 50px); right: 8px; width: min(250px, calc(100vw - 16px)); padding: 9px 11px 8px; font-size: 12px; }
    .pc-alpha-head { font-size: 14px; }
}

/* ⚠️ THE POPOUTS AT THE VERY TOP, OVER THE SITE BAR, AND SMALL (2026-11-11, the author: "the full decay popout txt is still way too big
   relative to all those popouts, and they need to be popping out at the very top of the page, even over the header menu"): the
   banners and prompts (the full decay's included), the rupture notice, the toasts and the Alpha Well's card all stand 8 px from the
   top of the page, above the site bar (900) and its menu (950), in the toasts' small type; the toasts drop below a banner while one
   is up. Desktop and phone alike, left-aligned (the Alpha card on the right). */
@keyframes pc-announce-top {
    0%   { opacity: 0; transform: translate(0, -12px) scale(.97); }
    12%  { opacity: 1; transform: translate(0, 0) scale(1); }
    78%  { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(0, -8px) scale(.98); }
}
html #novaOverlay, html body:has(#slideMenu.open) #novaOverlay:not(.prompt), html #novaOverlay.prompt, html body:has(#slideMenu.open) #novaOverlay.prompt {
    top: 8px; left: 12px; right: auto; z-index: 960; width: min(320px, calc(100vw - 24px)); font-size: .78rem; text-align: left; transform: translate(0, -12px);
}
html #novaOverlay.show { animation-name: pc-announce-top; }
html #novaOverlay.prompt, html #novaOverlay.prompt.show { transform: none; animation: none; opacity: 1; }
html .pc-banner-kicker { font-size: .6rem; }
html .pc-banner-title { font-size: .88rem; line-height: 1.25; }
html .pc-banner-sub { font-size: .72rem; line-height: 1.35; white-space: normal; }
html .pc-banner-note { font-size: .7rem; }
html .pc-banner-act { margin-top: 8px; padding: 6px 12px; font-size: .72rem; }
html #ruptureOverlay, html #ruptureOverlay.show { top: 8px; left: 12px; right: auto; z-index: 960; transform: none; width: auto; max-width: min(320px, calc(100vw - 24px)); padding: 8px 12px; font-size: .82rem; letter-spacing: .02em; text-align: left; }
html #toastStack { top: 8px; z-index: 958; }
html body:has(#novaOverlay.show) #toastStack, html body:has(#novaOverlay.prompt) #toastStack, html body:has(#ruptureOverlay.show) #toastStack { top: 100px; }
html .pc-alpha-card { top: 8px; z-index: 960; }

/* Full screen hides the site bar (2026-11-11, the author): the bar's height counts as nothing, so the field, the drawer and the popouts
   take its place; the button to leave is a compact pill, not an x. */
html.pc-fs .pc-sitebar { display: none !important; }
html.pc-fs body { --pc-bar-h: 0px !important; }
.pc-fs-btn.is-fs { width: auto; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; top: 10px; }
html.pc-fs .pc-alpha-card { top: 46px; }   /* under the Exit full screen pill */

/* While a universe runs the site bar is hidden, as in full screen (2026-11-11, the author: "when I click the start button, it should
   remove the header menu"); Pause brings it back. */
html.pc-running .pc-sitebar { display: none !important; }
html.pc-running body { --pc-bar-h: 0px !important; }