:root { color-scheme: dark; font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #24466f; }
body::after { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 78% 18%,rgba(255,219,174,.11),transparent 30%),linear-gradient(180deg,transparent 64%,rgba(36,38,62,.12)); mix-blend-mode:screen; }
#renderCanvas { width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#hud { position: fixed; inset: 0; pointer-events: none; padding: clamp(18px, 3vw, 38px); display: flex; flex-direction: column; }
header { max-width: 440px; text-shadow: 0 3px 20px rgba(38,24,31,.32); }
.eyebrow { font-size: 10px; letter-spacing: .24em; font-weight: 900; opacity: .76; }
h1 { margin: 3px 0 -5px; font-size: clamp(43px, 8vw, 92px); line-height: .93; letter-spacing: -.06em; }
.subtitle { font-size: clamp(15px, 2vw, 20px); opacity: .86; }
button { pointer-events:auto; border:0; color:white; font:900 12px/1 system-ui; letter-spacing:.15em; border-radius:999px; padding:16px 25px; background:rgba(48,44,64,.72); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(42,25,34,.18); }
button:active { transform:translateY(1px); }
#statusToggle { align-self:flex-start; margin-top:15px; padding:11px 15px; display:flex; gap:16px; align-items:center; }
#statusToggle b { font-size:18px; line-height:.7; }
#statusPanel { pointer-events:auto; margin-top:8px; width:min(315px,76vw); border-radius:18px; overflow:hidden; background:rgba(44,42,60,.62); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(18px); box-shadow:0 18px 42px rgba(35,27,43,.2); }
#readout, #buildHud { display:grid; gap:1px; }
#readout div, #buildHud div { display:flex; justify-content:space-between; gap:18px; font-size:10px; letter-spacing:.1em; background:rgba(30,31,47,.26); padding:8px 11px; }
#buildHud { border-top:1px solid rgba(255,255,255,.14); grid-template-columns:1fr 1fr 1fr; }
#buildHud div { display:grid; gap:4px; }
#readout span, #buildHud span { opacity:.62; }
#readout strong, #buildHud strong { font-variant-numeric:tabular-nums; text-align:right; }
#hint { margin-top:auto; margin-bottom:72px; align-self:center; font-size:12px; opacity:.72; text-align:center; text-shadow:0 2px 10px rgba(30,32,52,.65); }
#controls { position:fixed; bottom:max(18px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; gap:12px; }
#fireButton { background:#fff1df; color:#342532; min-width:118px; }
#fireButton:disabled { opacity:.45; }
#tuneToggle { position:fixed; right:clamp(18px,3vw,38px); bottom:max(20px,env(safe-area-inset-bottom)); padding:13px 17px; z-index:5; }
#tuningPanel { position:fixed; z-index:6; right:clamp(16px,3vw,34px); bottom:76px; width:min(320px,calc(100vw - 32px)); max-height:min(76vh,720px); overflow:auto; padding:18px; border-radius:22px; background:rgba(45,42,60,.9); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(22px); box-shadow:0 24px 65px rgba(40,20,32,.28); }
.panelTitle { display:flex; align-items:center; justify-content:space-between; font-weight:900; font-size:11px; letter-spacing:.15em; margin-bottom:10px; }
.panelTitle button { padding:4px 8px; background:transparent; box-shadow:none; font-size:24px; }
.labSection { margin:14px 0 6px; padding-top:10px; border-top:1px solid rgba(255,255,255,.14); font-size:9px; letter-spacing:.2em; font-weight:900; opacity:.58; }
#tuningPanel label { display:grid; grid-template-columns:1fr auto; gap:6px 12px; margin:11px 0; font-size:12px; font-weight:700; }
#tuningPanel output { opacity:.7; font-variant-numeric:tabular-nums; }
#tuningPanel input { grid-column:1/-1; width:100%; accent-color:#ffd1a4; }
#tuningPanel .wide { width:100%; margin-top:8px; background:#fff0df; color:#342532; }
#reticle { position:fixed; width:34px; height:34px; border:1px solid rgba(255,248,238,.95); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; box-shadow:0 0 0 2px rgba(73,42,52,.25),0 0 18px rgba(255,207,161,.68); display:none; }
#reticle::before,#reticle::after { content:""; position:absolute; background:#fff7ed; opacity:.9; }
#reticle::before { width:46px; height:1px; left:-7px; top:16px; }
#reticle::after { height:46px; width:1px; top:-7px; left:16px; }
#reticle i { position:absolute; width:4px; height:4px; background:white; border-radius:50%; left:14px; top:14px; }
#resultPanel { position:fixed; left:50%; bottom:92px; transform:translateX(-50%); width:min(360px,calc(100vw - 48px)); padding:19px 22px; text-align:center; background:rgba(45,42,58,.72); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(18px); border-radius:20px; box-shadow:0 18px 50px rgba(37,27,43,.24); }
#resultTitle { margin:7px 0 15px; font-weight:950; font-size:clamp(22px,5vw,34px); letter-spacing:-.035em; }
#resultPanel button { padding:13px 18px; }
@media(max-width:600px){ #statusPanel{width:min(292px,82vw)} #hint{margin-bottom:82px} button{padding:15px 20px} #tuneToggle{right:auto;left:16px;bottom:78px} #tuningPanel{right:16px;bottom:74px;max-height:72vh} #resultPanel{bottom:84px;width:calc(100vw - 36px)} }