:root{ --bg:#000; --fg:#9fffa9; --dim:#4fe06f; --accent:#00ffc6; --panel:#0b1320; --panel2:#111a2e; --warn:#ff5a5a; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; background:var(--bg); color:var(--fg); font-family: ui-monospace, Menlo, Consolas, monospace; }
#gameCanvas{ display:block; width:100vw; height:100vh; background: radial-gradient(ellipse at top, #02050a, #000); }
.ui-root{ position:fixed; inset:0; pointer-events:none; }
.panel{ pointer-events:auto; position:absolute; top:6vh; right:6vw; width:min(560px,88vw); max-height:88vh; background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--dim); border-radius:14px; padding:16px; overflow:auto; box-shadow:0 18px 48px rgba(0,0,0,0.6); }
.hidden{ display:none!important; }
.toast{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); background:#111a2e; border:1px solid var(--accent); border-radius:10px; padding:10px 14px; }
a.btn, button.btn{ background:#0c1c2c; color:var(--fg); border:1px solid var(--accent); border-radius:10px; padding:8px 12px; cursor:pointer; }
a.btn:hover, button.btn:hover{ filter:brightness(1.2); }
table{ width:100%; border-collapse: collapse; } th,td{ border-bottom:1px solid #233; padding:6px 8px; text-align:left; } th{ color:#fff; }
code.kbd{ border:1px solid #334; padding:2px 6px; border-radius:6px; background:#0b1420; color:#bf9; }
.warn{ color: var(--warn); }