/* 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-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; }
#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 ---- */
#toastStack { position: fixed; right: 14px; top: calc(var(--pc-bar-h, 56px) + 14px); display: flex; flex-direction: column; gap: 10px; z-index: 60; pointer-events: none; max-width: min(360px, calc(100vw - 28px)); }
.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; backdrop-filter: blur(8px);
  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; }