:root { --bg:#0b0a17; --panel:#100e22; --ink:#eef0ff; --dim:#8b87b3; --cyan:#00f0ff; --magenta:#ff2e88; --yellow:#ffe14d; --glass:rgba(238,240,255,.04); --cyan-rgb:0,240,255; --magenta-rgb:255,46,136; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; background:var(--bg); color:var(--ink); font-family:'Courier New',monospace; }
#arcade { display:block; width:100%; height:100dvh; border:0; }
.btn { padding:10px 14px; border:1px solid var(--cyan); border-radius:6px; background:var(--panel); color:var(--cyan); font:inherit; cursor:pointer; }
.btn:hover { box-shadow:0 0 18px rgba(var(--cyan-rgb),.25); }
.btn:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.ai-launcher { position:fixed; right:20px; bottom:54px; z-index:70; box-shadow:0 0 18px rgba(var(--cyan-rgb),.2); font-weight:bold; letter-spacing:1px; }
dialog { width:min(760px,calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:0; border:1px solid var(--cyan); border-radius:14px; color:var(--ink); background:var(--panel); }
dialog::backdrop { background:rgba(4,3,12,.8); }
.ai-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ai-header h1 { margin:0; font-size:18px; letter-spacing:2px; color:var(--cyan); }
.ai-panel { border:0; }
#ai-clear { margin-top:4px; font-size:11px; }
@media (max-width:520px) { .ai-launcher { right:12px; bottom:54px; font-size:12px; } .ai-messages { min-height:160px; height:32dvh; } }