/* terminal_velocity.css — the skydiver + force arrows + speed gauge for viz/terminal_velocity.js. */

.tv { display: flex; flex-direction: column; gap: 0.85rem; }
.tv-stage { position: relative; width: 100%; aspect-ratio: 16 / 11; min-height: 240px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0e1b30, #0a0f1a 70%); }

.tv-streaks { position: absolute; inset: 0; pointer-events: none; }
.tv-streak { position: absolute; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(148, 197, 230, 0), rgba(148, 197, 230, 0.5)); }
.tv-streak:nth-child(odd) { left: 26%; } .tv-streak:nth-child(even) { left: 70%; }
.tv-streak:nth-child(3n) { left: 40%; } .tv-streak:nth-child(3n+1) { left: 60%; } .tv-streak:nth-child(5n) { left: 18%; } .tv-streak:nth-child(7n) { left: 82%; }

.tv-figure { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; height: 76%; justify-content: center; z-index: 2; }
.tv-arrow { width: 4px; background: currentColor; position: relative; }
.tv-arrow-up { color: #38bdf8; align-self: center; }
.tv-arrow-up::after { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid #38bdf8; }
.tv-arrow-down { color: #8fa8cf; }
.tv-arrow-down::after { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid #8fa8cf; }

.tv-diver { width: 16px; height: 24px; margin: 4px 0; border-radius: 7px 7px 5px 5px; background: linear-gradient(180deg, #fbbf24, #f59e0b); position: relative; flex: 0 0 auto; }
.tv-diver::before { content: ""; position: absolute; left: 50%; top: -7px; width: 9px; height: 9px; border-radius: 50%; background: #fcd34d; transform: translateX(-50%); }
.tv-diver.tv-chute-open::after { content: ""; position: absolute; left: 50%; top: -34px; width: 46px; height: 26px; border-radius: 46px 46px 0 0; transform: translateX(-50%);
  background: linear-gradient(180deg, #f472b6, #db2777); box-shadow: inset 0 -3px 4px rgba(0,0,0,.2); }

.tv-gaugewrap { position: absolute; right: 14px; top: 14%; bottom: 18%; width: 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); display: flex; align-items: flex-end; }
.tv-gauge { width: 100%; border-radius: 7px; background: linear-gradient(180deg, #fbbf24, #f59e0b); transition: height 0.12s linear, background 0.2s; }
.tv-gaugewrap:has(.tv-gauge[style*="--bal: 1"]) .tv-gauge, .tv-gauge[style*="--bal:1"] { background: linear-gradient(180deg, #34d399, #059669); }
.tv-gaugelab { position: absolute; bottom: -1.1rem; left: 50%; transform: translateX(-50%); font-size: 0.68rem; color: #8aa0b6; }

.tv-phase { position: absolute; left: 8px; bottom: 6px; font-size: 0.78rem; font-weight: 600; color: #aebdce; background: rgba(6, 10, 18, 0.6); padding: 2px 7px; border-radius: 5px; }
.tv-chutes { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.tv-clbl { font-size: 0.85rem; color: #9fb0c3; font-weight: 600; margin-right: 0.2rem; }
.tv-chutebtn { cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600; color: #cbd5e1; padding: 0.28rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.12s ease; }
.tv-chutebtn:hover { background: rgba(255, 255, 255, 0.09); }
.tv-chutebtn.tv-on { color: #07121d; background: #f472b6; border-color: #f472b6; }
.tv-da { color: #7dd3fc; } .tv-wa { color: #a9c0e2; }