:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --paper:#f1e6ce; --gold:#ffd34e; --cyan:#8edfd0; --ink:#080b14; }
* { box-sizing: border-box; }
html, body { margin:0; min-width:320px; min-height:100%; background:radial-gradient(circle at 30% 0,#1b2948,#090b14 58%); color:var(--paper); }
body { padding:clamp(12px,2.5vw,30px); }
header { display:flex; justify-content:space-between; align-items:end; gap:16px; max-width:1440px; margin:0 auto 16px; }
header p { margin:0 0 6px; color:var(--cyan); font-size:10px; font-weight:900; letter-spacing:.16em; }
h1,h2 { margin:0; font-family:Georgia,serif; } h1 { font-size:clamp(28px,4vw,52px); } h2 { font-size:19px; }
#audit-badge { padding:9px 13px; border:1px solid var(--gold); border-radius:5px 14px; color:var(--gold); background:#080b14df; font-size:11px; font-weight:900; letter-spacing:.08em; }
#audit-badge.fail { color:#ffacb1; border-color:#f15b56; }
main { display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,390px); gap:18px; max-width:1440px; margin:auto; }
.stage-panel,aside { border:1px solid #f1e6ce42; border-radius:20px 6px; background:#10162fe8; box-shadow:0 22px 70px #0008,inset 0 1px #fff2; }
.stage-panel { position:relative; min-height:560px; overflow:hidden; } canvas { display:block; width:100%; height:100%; min-height:560px; }
.encounter-hud { position:absolute; inset:18px auto auto 50%; display:grid; min-width:310px; padding:10px 16px; transform:translateX(-50%); border:1px solid #d4af3788; border-radius:4px 14px; background:#080b14e8; text-align:center; }
.encounter-hud span { font-size:11px; font-weight:950; letter-spacing:.13em; }.encounter-hud strong { color:var(--gold); font-size:18px; letter-spacing:.08em; }.encounter-hud small { color:var(--cyan); font-size:9px; font-weight:900; }
#feedback { position:absolute; inset:auto 18px 18px; margin:0; padding:10px 14px; border-radius:10px 3px; background:#080b14e8; text-align:center; font-size:13px; font-weight:800; }
aside { max-height:calc(100vh - 120px); padding:20px; overflow:auto; } dl { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:0 0 15px; background:#f1e6ce25; } dl div { padding:10px; background:#0c142b; } dt { color:#95afba; font-size:9px; font-weight:900; text-transform:uppercase; } dd { margin:4px 0 0; color:var(--gold); font:800 12px ui-monospace,monospace; }
.button-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; } button { min-height:44px; padding:8px; border:1px solid #f1e6ce55; border-radius:11px 4px; color:var(--paper); background:#1a2749; font:800 13px inherit; cursor:pointer; } button.primary { color:#09121e; border-color:#ffe58d; background:linear-gradient(135deg,#ffd34e,#ff8c55); } button:focus-visible,button:hover { border-color:var(--cyan); outline:none; }
.rules { margin-top:18px; padding-top:15px; border-top:1px solid #f1e6ce2c; }.rules ul { padding-left:19px; color:#b8cbd0; font-size:12px; line-height:1.5; } pre { max-height:220px; overflow:auto; padding:10px; border:1px solid #f1e6ce22; border-radius:8px; color:var(--cyan); background:#080d1d; font-size:10px; white-space:pre-wrap; }
@media(max-width:860px){main{grid-template-columns:1fr}.stage-panel,canvas{min-height:430px}aside{max-height:none}}
@media(max-width:520px){body{padding:9px}header{align-items:start}.stage-panel,canvas{min-height:360px}.encounter-hud{min-width:230px}.button-grid{grid-template-columns:1fr}}