/* threebody.css — the 3D Three-Body Problem sandbox page */
:root {
  --orange: #ff5500;
  --neon: #33b6ff;
  --panel: rgba(8, 11, 20, 0.82);
  --border: rgba(94, 234, 255, 0.28);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #03040a; color: #eaf2ff; font-family: 'Space Mono', monospace;
  -webkit-font-smoothing: antialiased;
}
#sim { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; z-index: 0; }
/* #5: cinematic vignette — frames the action, darkens the corners. Above canvas, below UI. */
.tb-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 115% 95% at 50% 46%, rgba(0,0,0,0) 52%, rgba(2,4,12,0.5) 100%); }
.tb-glfail { position: fixed; inset: 0; display: grid; place-items: center; z-index: 5; color: #9fc4e8; }
.tb-glfail[hidden] { display: none; }   /* author display:grid otherwise overrides the [hidden] attribute */

/* cinematic eclipse overlay — vignette + HUD tag, opacity driven from JS */
.tb-eclipse { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(2,4,12,0) 42%, rgba(2,4,12,0.5) 100%); }
.tb-eclipse span { position: absolute; left: 50%; top: 15%; transform: translateX(-50%);
  font-family: 'Space Mono', monospace; font-weight: 700; letter-spacing: 0.42em; font-size: 12px;
  color: #ffd9a8; text-shadow: 0 0 16px rgba(255,120,30,0.85), 0 0 4px rgba(255,90,0,0.9); white-space: nowrap; }

/* Top bar */
.tb-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 18px; padding: 14px 22px;
  background: linear-gradient(180deg, rgba(4,6,12,0.65), rgba(4,6,12,0));
  pointer-events: none;
}
.tb-top > * { pointer-events: auto; }
.tb-back {
  color: #cfe1ff; text-decoration: none; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; background: rgba(8,12,22,0.5); transition: 0.2s;
}
.tb-back:hover { box-shadow: 0 0 16px rgba(94,234,255,0.35); color: #fff; }
.tb-brand { display: flex; align-items: center; gap: 12px; }
.tb-logo {
  width: clamp(40px, 5vw, 54px); height: clamp(40px, 5vw, 54px); flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(255,85,0,0.35)) drop-shadow(0 0 12px rgba(51,182,255,0.3));
}
.tb-logo-orbits { transform-box: fill-box; transform-origin: center; animation: tbLogoSpin 26s linear infinite; }
@keyframes tbLogoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tb-logo-orbits { animation: none; } }

.tb-title {
  margin: 0; font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: clamp(22px, 3.4vw, 40px); letter-spacing: 0.06em; text-shadow: 0 0 22px rgba(51,182,255,0.4);
}
.tb-title span { color: var(--orange); text-shadow: 0 0 22px rgba(255,85,0,0.5); }
.tb-top-actions { margin-left: auto; display: flex; gap: 10px; }

/* Buttons */
.tb-btn {
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
  color: #dcecff; background: rgba(14,20,34,0.7); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 14px; cursor: pointer; transition: 0.18s; text-transform: uppercase;
}
.tb-btn:hover { box-shadow: 0 0 14px rgba(94,234,255,0.32); color: #fff; border-color: var(--neon); }
.tb-btn.tb-wide { width: 100%; margin-top: 8px; }
.tb-run {
  font-size: 14px; padding: 11px 26px; color: #061018; border: 0; font-weight: 700;
  background: linear-gradient(180deg, #ffd29a, var(--orange)); box-shadow: 0 0 26px rgba(255,85,0,0.5);
}
.tb-run.is-running { background: linear-gradient(180deg, #bfe9ff, var(--neon)); box-shadow: 0 0 26px rgba(51,182,255,0.55); }

/* Minimal bottom dock */
.tb-dock {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.tb-speed { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #aebfd6; }
.tb-speed b { color: #fff; min-width: 34px; }
.tb-mini {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #cfe1ff; background: rgba(14,20,34,0.6); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 13px; cursor: pointer; transition: 0.18s;
}
.tb-mini:hover { color: #fff; border-color: var(--neon); box-shadow: 0 0 12px rgba(94,234,255,0.3); }

/* Popovers */
.tb-pop {
  position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%); z-index: 4;
  width: 300px; padding: 14px 16px; border-radius: 14px;
  max-height: calc(100vh - 96px); overflow-y: auto;   /* scroll if the panel is taller than the screen */
  background: var(--panel); border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 22px 56px rgba(0,0,0,0.55);
}
.tb-pop-wide { width: 340px; }
.tb-pop h3 {
  margin: 0 0 10px; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 16px;
  letter-spacing: 0.1em; color: #bfe2ff;
}
.tb-pop h3 + h3 { margin-top: 16px; }
.tb-pop h3 small { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--neon); letter-spacing: 0; }
.tb-check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #cfe1ff; margin: 10px 0; cursor: pointer; }

/* Sliders */
.tb-slider { display: block; margin: 11px 0; }
.tb-slider span { display: flex; justify-content: space-between; font-size: 11px; color: #aebfd6; letter-spacing: 0.05em; margin-bottom: 5px; text-transform: uppercase; }
.tb-slider b { color: #fff; }
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--neon), var(--orange)); outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  border: 2px solid var(--neon); cursor: pointer; box-shadow: 0 0 10px rgba(94,234,255,0.6);
}
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--neon); cursor: pointer; }
.tb-speed input[type=range] { width: 120px; }

/* Preset grid */
.tb-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.preset {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: #cfe1ff;
  background: rgba(14,20,34,0.6); border: 1px solid rgba(94,234,255,0.22); border-radius: 7px;
  padding: 8px 6px; cursor: pointer; transition: 0.16s;
}
.preset:hover { border-color: var(--neon); color: #fff; }
.preset.active { color: #061018; background: linear-gradient(180deg, #bfe9ff, var(--neon)); border-color: transparent; box-shadow: 0 0 16px rgba(51,182,255,0.5); }

/* Hint */
.tb-hint {
  position: fixed; left: 0; right: 0; bottom: 80px; z-index: 2; text-align: center;
  margin: 0; padding: 0 18px; font-size: 12px; letter-spacing: 0.04em; color: rgba(207,225,255,0.62);
  transition: opacity 0.6s ease; pointer-events: none;
}
.tb-hint b { color: #fff; }
.tb-hint.gone { opacity: 0; }

@media (max-width: 560px) {
  /* Keep the whole control row on-screen: drop the long title, shrink buttons,
     and let the header wrap so the Run button is never pushed off the edge. */
  .tb-top { gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
  .tb-title { display: none; }
  .tb-back { padding: 7px 11px; font-size: 11px; }
  .tb-logo { width: 38px; height: 38px; }
  .tb-top-actions { gap: 8px; }
  .tb-btn { padding: 8px 11px; font-size: 11px; }
  .tb-run { padding: 9px 18px; font-size: 12px; }
  .tb-pop, .tb-pop-wide { width: calc(100vw - 24px); }
  .tb-dock { flex-wrap: wrap; justify-content: center; width: calc(100vw - 24px); border-radius: 16px; gap: 8px; padding: 9px 12px; }
  .tb-mini { padding: 7px 11px; }
  .tb-hint { bottom: 96px; font-size: 11px; }
}

/* ═══ #5 — futuristic glass control deck ════════════════════════════════════ */

/* Deeper glass + a live neon edge-glow on the dock and popovers */
.tb-dock, .tb-pop {
  background:
    linear-gradient(180deg, rgba(40,60,96,0.16), rgba(8,11,20,0)) ,
    rgba(7,10,18,0.74);
  -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25);
  border-color: rgba(94,234,255,0.34);
  box-shadow: 0 18px 48px rgba(0,0,0,0.6), 0 0 22px rgba(51,182,255,0.14), inset 0 1px 0 rgba(180,230,255,0.18);
}
/* thin shimmering scanlines inside the panels */
.tb-dock::after, .tb-pop::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(140,200,255,0.05) 0 1px, transparent 1px 4px);
  opacity: 0.5; mix-blend-mode: screen;
}
/* HUD corner brackets on the rectangular popovers */
.tb-pop::before {
  content: ''; position: absolute; inset: 7px; border-radius: 10px; pointer-events: none; opacity: 0.7;
  background:
    linear-gradient(var(--neon),var(--neon)) left top/16px 2px no-repeat,
    linear-gradient(var(--neon),var(--neon)) left top/2px 16px no-repeat,
    linear-gradient(var(--orange),var(--orange)) right top/16px 2px no-repeat,
    linear-gradient(var(--orange),var(--orange)) right top/2px 16px no-repeat,
    linear-gradient(var(--orange),var(--orange)) left bottom/16px 2px no-repeat,
    linear-gradient(var(--orange),var(--orange)) left bottom/2px 16px no-repeat,
    linear-gradient(var(--neon),var(--neon)) right bottom/16px 2px no-repeat,
    linear-gradient(var(--neon),var(--neon)) right bottom/2px 16px no-repeat;
  filter: drop-shadow(0 0 4px rgba(94,234,255,0.5));
}

/* Angular HUD buttons (notched corners) with an edge-light sweep on hover */
.tb-btn, .preset {
  position: relative; overflow: hidden; border-color: rgba(94,234,255,0.4);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  box-shadow: inset 0 0 0 1px rgba(94,234,255,0.16), inset 0 1px 0 rgba(190,235,255,0.12);
}
.tb-btn::after, .preset::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(180,230,255,0.35), transparent);
  transition: left 0.5s ease;
}
.tb-btn:hover::after, .preset:hover::after { left: 130%; }
.tb-btn:hover, .preset:hover { box-shadow: 0 0 18px rgba(94,234,255,0.4), inset 0 0 0 1px rgba(94,234,255,0.45); transform: translateY(-1px); }
.tb-mini { transition: 0.18s; }
.tb-mini:hover { transform: translateY(-1px); }

/* The Run button: a living, breathing neon capsule */
.tb-run { animation: tbRunPulse 2.6s ease-in-out infinite; }
.tb-run.is-running { animation: tbRunPulseCyan 2.6s ease-in-out infinite; }
@keyframes tbRunPulse { 0%,100% { box-shadow: 0 0 22px rgba(255,85,0,0.45); } 50% { box-shadow: 0 0 34px rgba(255,120,40,0.75); } }
@keyframes tbRunPulseCyan { 0%,100% { box-shadow: 0 0 22px rgba(51,182,255,0.5); } 50% { box-shadow: 0 0 36px rgba(90,210,255,0.8); } }
@media (prefers-reduced-motion: reduce) { .tb-run { animation: none; } }

/* glowing slider track */
input[type=range] { box-shadow: 0 0 10px rgba(51,182,255,0.35); }

/* sound toggle: dim when muted */
#sound { font-size: 14px; }
#sound.is-muted { opacity: 0.5; }

/* "Our Solar System" — a selectable world, styled like a small sun */
.tb-solar { margin-bottom: 14px; border-color: rgba(255,180,90,0.5);
  background: linear-gradient(180deg, rgba(60,40,16,0.55), rgba(30,18,8,0.55)); color: #ffd9a8; }
.tb-solar:hover { color: #fff; border-color: #ffb15a; box-shadow: 0 0 18px rgba(255,140,40,0.45); }
.tb-solar.active { color: #2a1606; border-color: transparent;
  background: linear-gradient(180deg, #ffe0a8, #ff9b3a); box-shadow: 0 0 22px rgba(255,140,40,0.6); }

/* "Neutron Star" — a selectable world, styled blue-white */
.tb-neutron { margin-bottom: 14px; border-color: rgba(150,200,255,0.5);
  background: linear-gradient(180deg, rgba(24,40,70,0.55), rgba(12,22,42,0.55)); color: #cfe6ff; }
.tb-neutron:hover { color: #fff; border-color: #9fd0ff; box-shadow: 0 0 18px rgba(120,180,255,0.5); }
.tb-neutron.active { color: #08131f; border-color: transparent;
  background: linear-gradient(180deg, #eaf4ff, #8fbcff); box-shadow: 0 0 22px rgba(140,190,255,0.65); }

/* "Run the Simulator" — the green go button */
.tb-runsim { margin: 4px 0 16px; font-size: 14px; color: #06180e; border-color: transparent;
  background: linear-gradient(180deg, #8effb0, #18c95a); box-shadow: 0 0 22px rgba(40,220,110,0.55);
  animation: tbRunSimPulse 2.4s ease-in-out infinite; }
.tb-runsim:hover { color: #04120a; background: linear-gradient(180deg, #a8ffc4, #20e066); box-shadow: 0 0 30px rgba(50,240,130,0.8); }
@keyframes tbRunSimPulse { 0%,100% { box-shadow: 0 0 20px rgba(40,220,110,0.5); } 50% { box-shadow: 0 0 32px rgba(60,250,140,0.85); } }
@media (prefers-reduced-motion: reduce) { .tb-runsim { animation: none; } }

/* best-effort iOS haptic switch — rendered (so the Taptic engine fires) but out of the way */
.tb-haptic-sink { position: fixed; bottom: 0; left: 0; width: 1px; height: 1px; opacity: 0.01; pointer-events: none; z-index: -1; }

/* ── one-time gesture coach (phone-first) ───────────────────────────────────── */
.tb-coach {
  position: fixed; inset: 0; z-index: 6; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(3,6,16,0.78), rgba(2,3,9,0.94));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 24px;
  animation: tbCoachIn 0.35s ease both;
}
.tb-coach[hidden] { display: none; }
@keyframes tbCoachIn { from { opacity: 0; } to { opacity: 1; } }
.tb-coach-card {
  width: min(360px, 92vw); text-align: center;
  background: linear-gradient(180deg, rgba(12,20,38,0.92), rgba(6,10,22,0.92));
  border: 1px solid rgba(94,234,255,0.28); border-radius: 20px; padding: 26px 24px 22px;
  box-shadow: 0 0 40px rgba(51,182,255,0.22), inset 0 0 0 1px rgba(94,234,255,0.08);
}
.tb-coach-orbs { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.tb-coach-orbs i { width: 16px; height: 16px; border-radius: 50%; display: block; }
.tb-coach-orbs i:nth-child(1) { background: radial-gradient(circle at 35% 32%, #ffd6ad, var(--orange)); box-shadow: 0 0 14px rgba(255,85,0,0.7); }
.tb-coach-orbs i:nth-child(2) { background: radial-gradient(circle at 35% 32%, #c7ecff, #33b6ff); box-shadow: 0 0 14px rgba(51,182,255,0.7); }
.tb-coach-orbs i:nth-child(3) { background: radial-gradient(circle at 35% 32%, #e6d1ff, #b06bff); box-shadow: 0 0 14px rgba(176,107,255,0.7); }
.tb-coach-card h2 {
  margin: 0 0 16px; font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: 30px; letter-spacing: 0.06em; color: #fff;
}
.tb-coach-card ul { list-style: none; margin: 0 0 22px; padding: 0; text-align: left; }
.tb-coach-card li {
  font-family: 'Space Mono', monospace; font-size: 13px; line-height: 1.5; color: #cfe1ff;
  padding: 9px 4px; border-bottom: 1px solid rgba(94,234,255,0.12);
}
.tb-coach-card li:last-child { border-bottom: 0; }
.tb-coach-card li b { color: #fff; }
.tb-coach-card .tb-run { width: 100%; padding: 12px; font-size: 14px; }

/* ── dock: icon minis, divider, headline "survive" key ──────────────────────── */
.tb-dock-div { width: 1px; align-self: stretch; margin: 2px 2px;
  background: linear-gradient(180deg, transparent, rgba(94,234,255,0.4), transparent); }
.tb-mini { display: inline-grid; place-items: center; min-width: 38px; min-height: 34px; font-size: 15px; padding: 6px 10px; line-height: 1; }
/* the survival toggle — the one orange note in a cyan deck */
.tb-mini-key { color: #ffd9a8; border-color: rgba(255,140,60,0.5);
  background: linear-gradient(180deg, rgba(60,32,12,0.6), rgba(24,14,8,0.55)); }
.tb-mini-key:hover { color: #fff; border-color: var(--orange); box-shadow: 0 0 14px rgba(255,110,30,0.5); }
.tb-mini-key.is-live { color: #1a0d04; border-color: transparent;
  background: linear-gradient(180deg, #ffd29a, var(--orange)); box-shadow: 0 0 22px rgba(255,90,0,0.6);
  animation: tbRunPulse 2.2s ease-in-out infinite; }

/* ── survival HUD — the score clock ─────────────────────────────────────────── */
.tb-surv {
  position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: baseline; gap: 12px; padding: 7px 18px;
  font-family: 'Space Mono', monospace; white-space: nowrap;
  background: linear-gradient(180deg, rgba(40,60,96,0.16), rgba(7,10,18,0)), rgba(7,10,18,0.78);
  border: 1px solid var(--border); border-radius: 999px;
  -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 12px 34px rgba(0,0,0,0.5), 0 0 20px rgba(51,182,255,0.16), inset 0 1px 0 rgba(180,230,255,0.16);
}
.tb-surv[hidden] { display: none; }
.tb-surv-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.24em; color: var(--neon);
  text-shadow: 0 0 10px rgba(51,182,255,0.6); transition: color 0.25s, text-shadow 0.25s; }
.tb-surv-time { font-size: 21px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em; text-shadow: 0 0 16px rgba(140,200,255,0.4); }
.tb-surv-best { font-size: 10px; letter-spacing: 0.1em; color: #8fa9c8; }
.tb-surv[data-state="escaped"] .tb-surv-tag { color: #ff6a2a; text-shadow: 0 0 12px rgba(255,90,0,0.7); }
.tb-surv[data-state="ended"] .tb-surv-tag { color: #ffcf8a; text-shadow: none; }
@keyframes tbSurvFlash { 0% { box-shadow: 0 0 0 0 rgba(255,90,0,0.6), 0 12px 34px rgba(0,0,0,0.5); }
  100% { box-shadow: 0 0 0 22px rgba(255,90,0,0), 0 12px 34px rgba(0,0,0,0.5); } }
.tb-surv-flash { animation: tbSurvFlash 0.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .tb-surv-flash, .tb-mini-key.is-live { animation: none; } }

/* ── toast — shared status pill just above the dock ─────────────────────────── */
.tb-toast {
  position: fixed; left: 50%; bottom: 78px; transform: translate(-50%, 10px); z-index: 5;
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.04em; color: #eaf6ff;
  padding: 9px 18px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  background: linear-gradient(180deg, rgba(40,60,96,0.2), rgba(7,10,18,0.1)), rgba(7,10,18,0.82);
  border: 1px solid rgba(94,234,255,0.4);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 12px 34px rgba(0,0,0,0.5), 0 0 20px rgba(51,182,255,0.2);
  opacity: 0; transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.tb-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 560px) {
  .tb-surv { top: auto; bottom: 150px; padding: 6px 14px; }
  .tb-surv-time { font-size: 18px; }
  .tb-toast { bottom: 168px; }
}