:root{--olive-dark: #232b1f;--olive: #3a4632;--olive-light: #5a6b4d;--brass: #c9a85c;--brass-bright: #e8c878;--paper: #e9e4d6;--ink: #1c2118;--danger: #c0392b;--ok: #2ecc71;--warn: #f1c40f;font-family:Courier New,Consolas,monospace}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;width:100%;overflow:hidden;background:var(--ink);color:var(--paper)}#app{position:relative}#scene-root{position:absolute;top:0;right:0;bottom:0;left:0}#scene-root canvas{display:block;width:100%;height:100%}#ui-root{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column}#ui-root>*{pointer-events:auto}.panel{background:linear-gradient(180deg,var(--olive) 0%,var(--olive-dark) 100%);border:2px solid var(--brass);border-radius:6px;box-shadow:inset 0 0 12px #00000080,0 4px 14px #00000073;color:var(--paper);padding:10px 14px}.panel h2,.panel h3{margin:0 0 8px;color:var(--brass-bright);letter-spacing:.06em;text-transform:uppercase;font-size:.95em;border-bottom:1px solid var(--olive-light);padding-bottom:6px}.btn{font-family:inherit;background:linear-gradient(180deg,var(--brass-bright),var(--brass));color:var(--ink);border:1px solid #8a703a;border-radius:4px;padding:8px 16px;font-weight:700;letter-spacing:.05em;cursor:pointer;text-transform:uppercase;font-size:.85em}.btn:hover{filter:brightness(1.1)}.btn:active{filter:brightness(.9)}.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}.btn.secondary{background:linear-gradient(180deg,var(--olive-light),var(--olive));color:var(--paper);border-color:var(--olive-light)}.btn.danger{background:linear-gradient(180deg,#e0594a,var(--danger));color:#fff;border-color:#8a2e22}#hud-bar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:#141a11d9;border-bottom:2px solid var(--brass);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}#hud-bar .title{font-weight:700;color:var(--brass-bright);letter-spacing:.08em;text-transform:uppercase;font-size:1.05em}#hud-bar .spacer{flex:1}#hud-bar .score{color:var(--paper);opacity:.85;font-size:.9em}.scene-tabs{display:flex;gap:6px}.scene-tabs button{font-family:inherit;background:#5a6b4d59;color:var(--paper);border:1px solid var(--olive-light);border-radius:4px;padding:6px 14px;cursor:pointer;text-transform:uppercase;font-size:.8em;letter-spacing:.05em}.scene-tabs button.active{background:var(--brass);color:var(--ink);font-weight:700;border-color:var(--brass-bright)}.scene-tabs button:disabled{opacity:.35;cursor:not-allowed}#ui-body{flex:1;display:flex;position:relative;min-height:0}.side-stack{display:flex;flex-direction:column;gap:12px;padding:14px;width:360px;overflow-y:auto;max-height:100%}.side-stack.left{margin-right:auto}.side-stack.right{margin-left:auto}.dial-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0}.dial-row label{text-transform:uppercase;font-size:.78em;letter-spacing:.06em;color:var(--brass-bright);width:90px}.readout{background:var(--ink);border:1px solid var(--olive-light);border-radius:3px;padding:4px 10px;font-size:1.15em;font-weight:700;color:var(--ok);min-width:90px;text-align:right;letter-spacing:.05em}.readout.target{color:var(--brass-bright)}.readout.match{color:var(--ok)}.dial-controls{display:flex;gap:4px}.dial-controls button{font-family:inherit;width:30px;height:30px;border-radius:3px;border:1px solid var(--olive-light);background:var(--olive);color:var(--paper);cursor:pointer;font-size:.9em}.dial-controls button:hover{background:var(--olive-light)}.dial-controls button:active{filter:brightness(.85)}.lay-status{margin-top:10px;padding:6px 10px;border-radius:4px;text-align:center;font-size:.8em;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--olive-light)}.lay-status.ready{color:var(--ok);border-color:var(--ok);background:#2ecc711a}.lay-status.not-ready{color:var(--paper);opacity:.7}.intel-line{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed rgba(201,168,92,.25);font-size:.92em}.intel-line .k{color:var(--paper);opacity:.75;text-transform:uppercase;font-size:.85em;letter-spacing:.04em}.intel-line .v{color:var(--brass-bright);font-weight:700}.note{font-size:.82em;opacity:.8;line-height:1.4;margin-top:8px}table.charge-table{width:100%;border-collapse:collapse;font-size:.85em}table.charge-table th,table.charge-table td{border:1px solid var(--olive-light);padding:5px 8px;text-align:center}table.charge-table th{color:var(--brass-bright);text-transform:uppercase;font-size:.78em;letter-spacing:.04em}table.charge-table tr.in-band td{background:#2ecc711f}table.charge-table tr.selectable{cursor:pointer}table.charge-table tr.selectable:hover td{background:#c9a85c2e}table.charge-table tr.selected td{background:#c9a85c52;font-weight:700}.calc-row{display:flex;align-items:center;gap:8px;margin:6px 0}.calc-row label{width:110px;font-size:.8em;text-transform:uppercase;letter-spacing:.05em;color:var(--brass-bright)}.calc-row select,.calc-row input{font-family:inherit;background:var(--ink);color:var(--paper);border:1px solid var(--olive-light);border-radius:3px;padding:6px 8px;flex:1;font-size:.9em}.calc-result{margin-top:8px;padding:8px 10px;background:#00000040;border-radius:4px;border:1px solid var(--olive-light);font-size:.9em}.calc-result strong{color:var(--brass-bright)}.plot-spotter{border:1px solid var(--olive-light);border-radius:4px;padding:8px 10px;margin-bottom:8px;font-size:.85em}.plot-spotter .name{color:var(--brass-bright);font-weight:700;text-transform:uppercase;font-size:.8em;letter-spacing:.05em}.verdict{font-size:1.3em;font-weight:700;text-align:center;letter-spacing:.08em;text-transform:uppercase;padding:10px;border-radius:4px;margin-bottom:10px}.verdict.direct-hit{color:var(--ok);border:1px solid var(--ok);background:#2ecc711f}.verdict.effective{color:var(--warn);border:1px solid var(--warn);background:#f1c40f1f}.verdict.miss{color:var(--danger);border:1px solid var(--danger);background:#c0392b1f}#menu-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:linear-gradient(#0f140cc7,#0f140cd9),url(/assets/howitzer-CnVvYP6Y.png) center 38% / cover no-repeat;pointer-events:auto}#menu-screen h1{color:var(--brass-bright);letter-spacing:.12em;text-transform:uppercase;font-size:2em;text-shadow:0 2px 10px rgba(0,0,0,.8);margin:0}#menu-screen .subtitle{color:var(--paper);opacity:.85;margin-top:-16px;font-size:.95em;text-shadow:0 2px 8px rgba(0,0,0,.8)}.mode-cards{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;max-width:1180px}.mode-card{width:260px;cursor:pointer;text-align:left}.mode-card h3{margin-top:0}.mode-card p{font-size:.85em;line-height:1.5;opacity:.9;margin:0}.mode-card:hover{border-color:var(--brass-bright);transform:translateY(-2px)}.mode-card{transition:transform .12s ease,border-color .12s ease}.row{display:flex;gap:10px;align-items:center}.row.wrap{flex-wrap:wrap}.fire-bar{display:flex;justify-content:center;padding:14px}.fire-bar .btn{font-size:1.1em;padding:12px 48px;letter-spacing:.12em}.hint{font-size:.78em;opacity:.7;margin-top:6px}.wheels-row{display:flex;gap:16px;justify-content:center;margin:10px 0 8px}.wheel-group{display:flex;flex-direction:column;align-items:center;gap:5px}.wheel-label{text-transform:uppercase;font-size:.72em;letter-spacing:.08em;color:var(--brass-bright)}.dial-wheel{display:block;border-radius:50%;box-shadow:0 4px 18px #000000bf,inset 0 1px #ffffff0a;-webkit-user-select:none;user-select:none}.wheel-group .readout{min-width:84px;text-align:center;font-size:1.1em;letter-spacing:.06em}.plot-board .plot-instr{font-size:.82em;line-height:1.4;margin:4px 0 8px;min-height:2.4em}.plot-board .plot-instr b{color:var(--brass-bright)}.plot-board .plot-err{color:var(--danger);font-weight:700}.plot-canvas{display:block;margin:0 auto;border:1px solid var(--olive-light);border-radius:4px;cursor:crosshair;background:#0d130b}.plot-readout{margin-top:8px;padding:5px 8px;background:#0000004d;border:1px solid var(--olive-light);border-radius:3px;font-size:.8em;text-align:center}.plot-readout b{color:var(--brass-bright)}.plot-actions{display:flex;gap:8px;margin-top:8px}.plot-actions .btn{flex:1}