:root{color-scheme:dark;--bg:#23292b;--panel:#303638;--deep:#151a1a;--text:#e4dece;--muted:#a6ada5;--brass:#bea266;--line:#4b504d;--red:#ab5354;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 40% 10%,#374042 0,transparent 65%),var(--bg);-webkit-tap-highlight-color:transparent}
button,.button{font:inherit;font-size:14px;color:inherit;background:#363e3e;border:1px solid #62685e;border-radius:6px;min-height:40px;padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
button:hover:not(:disabled),.button:hover{background:#47504a;border-color:var(--brass)}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,.button:focus-visible,canvas:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.primary{background:var(--brass);color:#242620;border-color:var(--brass);font-weight:650}
.primary:hover:not(:disabled){background:#d3b879;color:#242620}
a{color:#dbc18a}
header{max-width:900px;margin:auto;padding:22px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px}
.brand h1{font:700 30px/1 Georgia,serif;margin:0;letter-spacing:-1px}
.brand p{font-size:12px;color:var(--muted);margin:6px 0 0}
.crest{display:grid;place-items:center;font:700 30px Georgia,serif;color:var(--brass);width:42px;height:48px;border:2px solid var(--brass);clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);background:#393a2d}
.account{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);flex-wrap:wrap}
#account-name{color:var(--text)}
main{max-width:900px;margin:0 auto;padding:0 20px 24px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:28px;max-width:620px;margin:20px auto}
.panel h2{font:normal 28px Georgia,serif;margin:0 0 12px}
.panel h3{font:normal 20px Georgia,serif;margin:28px 0 6px}
#rom-panel{text-align:center}
.loader-mark{font:700 64px Georgia;color:var(--brass);line-height:1.1}
.muted,.panel p{color:var(--muted);font-size:14px;line-height:1.6}
.error{color:#f2ada8;font-size:14px;min-height:0}
.slots{list-style:none;margin:16px 0;padding:0;display:grid;gap:8px}
.slots li{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#2a3031;border:1px solid var(--line);border-radius:6px;flex-wrap:wrap}
.slot-info{flex:1;min-width:160px}
.slot-info strong{display:block;font-weight:600}
.slot-info small{color:var(--muted);font-size:12px}
.slots li button{min-height:34px;padding:5px 11px;font-size:13px}
.slots .empty{color:var(--muted);font-size:14px;background:none;border-style:dashed}
.slot-actions{display:flex;gap:8px;flex-wrap:wrap}
.game{max-width:560px;margin:8px auto 0}
.game-bar{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:10px 14px;color:var(--muted);background:#1b2021;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0}
#slot-name{color:var(--text)}
.screen{position:relative;padding:14px;background:var(--deep);border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px}
canvas{display:block;margin:auto;width:100%;aspect-ratio:10/9;image-rendering:pixelated;background:#000;touch-action:none}
.screen:fullscreen{display:grid;place-items:center;background:#000;border:0;padding:0}

.paused{position:absolute;inset:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#17201ce0}
.paused h2{font:32px Georgia;margin:0 0 16px}
.pad{display:grid;grid-template-columns:auto auto;grid-template-areas:"dpad ab" "ss ss";justify-content:space-between;align-items:center;gap:14px 10px;padding:18px 6px 6px;user-select:none;-webkit-user-select:none;touch-action:none}
.dpad{grid-area:dpad;display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px)}
.dpad button{padding:0;min-height:0;border-radius:4px;background:#2c3233;font-size:14px}
.dpad [data-key=up]{grid-column:2;grid-row:1}.dpad [data-key=left]{grid-column:1;grid-row:2}.dpad [data-key=right]{grid-column:3;grid-row:2}.dpad [data-key=down]{grid-column:2;grid-row:3}
.ab{grid-area:ab;display:flex;gap:14px;transform:rotate(-20deg)}
.round{width:60px;height:60px;border-radius:50%;font-weight:700;background:#724445;border-color:#8a5a5b}
.ss{grid-area:ss;display:flex;justify-content:center;gap:20px}
.pill{font-size:11px;letter-spacing:1px;min-height:28px;padding:4px 14px;border-radius:14px}
.pad button.down{background:var(--brass);color:#242620}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.toolbar button{font-size:13px;min-height:36px}
.help{margin-top:18px;font-size:13px;color:var(--muted)}
.help p{line-height:1.6}
summary{cursor:pointer}
footer{max-width:900px;display:flex;justify-content:space-between;gap:15px;padding:24px 20px 30px;margin:auto;color:#8b958e;font-size:11px;flex-wrap:wrap}
[hidden]{display:none!important}
@media(hover:hover) and (pointer:fine){.pad{display:none}}
@media(max-width:520px){header{padding:14px 16px}.brand h1{font-size:24px}.brand p{display:none}.crest{width:34px;height:40px;font-size:24px}main{padding:0 10px 20px}.panel{padding:20px 16px}.screen{padding:6px}.paused{inset:6px}.dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}.round{width:56px;height:56px}}