:root{--bg:#0b0d10;--panel:#12161b;--muted:#9aa4af;--text:#e6edf3;--accent:#ffd54f;--accent-strong:#ffca28;--error:#ef5350;--notice:#42a5f5;--ok:#66bb6a;--border:#1f262e;--shadow:rgba(0,0,0,.4)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:16px auto;padding:0 16px;display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width: 980px){.container{grid-template-columns: 1fr 1fr;}}
.app-header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(255,213,79,.06), transparent)}
.logo{width:40px;height:40px}
.title{flex:1}
.title h1{margin:0;font-size:20px}
.subtitle{margin:2px 0 0 0;color:var(--muted);font-size:13px}
.links a{color:var(--accent);text-decoration:none;margin-left:12px}
.links a:hover{text-decoration:underline}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 4px 16px var(--shadow)}
.form .field{margin-bottom:12px}
.form label{display:block;margin-bottom:6px;color:var(--muted);font-size:14px}
.form input[type=text], .form input[type=url], .form input[type=file], .form select{width:100%;padding:10px;border-radius:8px;border:1px solid var(--border);background:#0e1318;color:var(--text)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.grid{grid-template-columns:1fr}}
.actions{display:flex;gap:8px}
.btn{background:#1a232b;color:var(--text);border:1px solid var(--border);padding:10px 14px;border-radius:8px;cursor:pointer}
.btn:hover{background:#1d2832}
.btn.primary{background:var(--accent);border-color:#d7b542;color:#1b1300}
.btn.primary:hover{background:var(--accent-strong)}
.btn.small{padding:6px 10px;font-size:12px}
.alert{padding:10px 12px;border-radius:8px;margin-bottom:12px}
.alert.error{background:rgba(239,83,80,.12);border:1px solid rgba(239,83,80,.3)}
.alert.notice{background:rgba(66,165,245,.12);border:1px solid rgba(66,165,245,.3)}
.muted{color:var(--muted)}
.game-container{position:relative;min-height:220px;display:flex;align-items:center;justify-content:center;background:#0d1116;border-radius:12px;border:1px solid var(--border)}
.canvas-panel{grid-column:1 / -1}
#game{width:100%;height:auto;image-rendering:pixelated;border-radius:12px}
.empty-state{padding:24px;color:var(--muted)}
.hud{position:absolute;top:8px;left:8px;display:flex;gap:12px;background:rgba(0,0,0,.35);padding:6px 8px;border-radius:8px;border:1px solid var(--border);backdrop-filter:blur(2px)}
.badge{background:rgba(255,255,255,.1);padding:2px 6px;border-radius:6px;border:1px solid var(--border);color:#9ee7ff}
.finish{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);}
.finish .card{background:#0f141a;border:1px solid var(--border);border-radius:12px;min-width:260px;padding:16px;box-shadow:0 6px 30px var(--shadow)}
.lb{list-style:none;padding:0;margin:0}
.lb li{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;padding:8px;border-bottom:1px dashed var(--border)}
.lb .who{font-weight:600}
.lb .time{color:var(--accent)}
.lb .runid{color:var(--muted);font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-size:12px}
.footer{padding:16px;text-align:center;color:var(--muted)}
[hidden]{display:none !important}