/* 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; 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.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; } }

/* ---- 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 .dockBtn { flex: 1 1 0; min-width: 0; padding: 0 6px; }
    #simDock .dockBtn-menu { flex: 0 0 44px; }
    #liveCounters {
        left: 10px; right: 10px; width: auto;
        bottom: calc(10px + 52px + 8px + 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: 7px 12px 8px; border-radius: 12px; }
    .pc-banner-kicker { font-size: .6rem; letter-spacing: .22em; }
    .pc-banner-title { font-size: 1.02rem; margin-top: 1px; }
    .pc-banner-sub { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #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; }
}