/* ORBITAL: one canvas, three panes (your slice of the 4D atom, our 3D atom, the dartboard); the bar, the caption and the pads float over it */
:root { --bg: #07080c; --panel: rgba(14, 16, 23, 0.9); --text: #e9e4da; --dim: #9a958c; --ice: #6fe0ff; --gold: #ffd27a; --mono: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); overflow: hidden; overscroll-behavior: none; }
html, body, button, canvas, #view { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[hidden] { display: none !important; }
#view { position: fixed; inset: 0; }
#gl, #ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#gl { touch-action: none; } #ov { pointer-events: none; }
#bar { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 10px; align-items: center; padding: calc(6px + env(safe-area-inset-top)) 8px 6px 12px; background: linear-gradient(rgba(7, 8, 12, 0.85), rgba(7, 8, 12, 0)); }
#bar > b { font: 800 13px var(--mono); letter-spacing: 0.1em; }
#exps { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
#exps button { flex: none; font: 600 12px var(--mono); background: rgba(7, 8, 12, 0.6); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; padding: 5px 9px; cursor: pointer; touch-action: manipulation; }
#exps button.on { border-color: var(--gold); color: var(--gold); }
#cap { position: absolute; left: 10px; top: calc(44px + env(safe-area-inset-top)); max-width: min(520px, 58%); font: 13px/1.5 var(--sans); color: #d9d3c8; background: rgba(7, 8, 12, 0.62); border-radius: 10px; padding: 8px 11px; cursor: pointer; }
#cap.min { max-height: 2.3em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
#cap b { color: var(--gold); }
@media (orientation: portrait) { #cap { max-width: none; right: 10px; font-size: 12px; } }
#panel { position: absolute; right: 8px; top: calc(44px + env(safe-area-inset-top)); width: min(330px, 92vw); background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 10px 12px; font: 12px var(--mono); }
#panel label { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 4px 0 8px; color: var(--dim); }
#panel input { width: 100%; } #panel span { color: var(--text); }
.foot { color: var(--dim); margin: 6px 0 0; line-height: 1.6; } .foot a { color: var(--text); }
.pad { position: absolute; width: 104px; height: 104px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.28); background: rgba(7, 8, 12, 0.35); touch-action: none; cursor: grab; }
.pad.live, .lever.live { border-color: rgba(255, 210, 122, 0.75); }
#twistKnob { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); pointer-events: none; }
.pad span { position: absolute; left: -10px; right: -10px; top: -17px; text-align: center; font: 10px var(--mono); color: var(--dim); pointer-events: none; }
.lever { position: absolute; width: 44px; height: 120px; border-radius: 22px; border: 2px solid rgba(255, 255, 255, 0.28); background: linear-gradient(rgba(56, 242, 224, 0.18), rgba(7, 8, 12, 0.3) 50%, rgba(255, 102, 184, 0.18)); touch-action: none; cursor: ns-resize; }
#anaKnob { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); pointer-events: none; }
.lever b, .lever i { position: absolute; left: 0; right: 0; text-align: center; font: 600 10px var(--mono); font-style: normal; pointer-events: none; }
.lever b { top: -15px; color: #38f2e0; } .lever i { bottom: -15px; color: #ff66b8; }
#picks { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 0 8px 6px 12px; position: absolute; left: 0; right: 0; top: calc(38px + env(safe-area-inset-top)); }
#picks button { flex: none; font: 600 12px var(--mono); background: rgba(7, 8, 12, 0.6); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; padding: 4px 8px; cursor: pointer; touch-action: manipulation; }
#picks button.on { border-color: var(--gold); color: var(--gold); }
#picks .sep { width: 1px; background: rgba(255, 255, 255, 0.2); margin: 2px 3px; flex: none; }
#cap { top: calc(76px + env(safe-area-inset-top)); }