:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#111317;--surface:#1a1d23;--surface-2:#232730;--surface-3:#2c313c;--border:#353b47;--text:#e8eaee;--muted:#a3acba;--accent:#8fb3a0;--accent-ink:#0d1411;--danger:#e8938a;--danger-bg:#3a2422;--warning:#e3c47f;--focus:#c3e0d0;--radius:12px;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif;line-height:1.45}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0}body{min-height:100vh;min-height:100dvh}button,input,select,textarea{font:inherit;color:inherit}a{color:var(--accent)}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}h1,h2,h3{line-height:1.2}.visually-hidden,.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.muted{color:var(--muted)}.warning-text{color:var(--warning)}.error-text{color:var(--danger)}.boot-message{text-align:center;color:var(--muted);margin:40vh auto 0}.button{border:1px solid var(--border);background:var(--surface-2);min-height:44px;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:0 16px;text-decoration:none;display:inline-flex}.button:hover:not(:disabled){background:var(--surface-3)}.button:disabled{opacity:.45;cursor:not-allowed}.button.primary{background:var(--accent);color:var(--accent-ink);border-color:#0000;font-weight:650}.button.primary:hover:not(:disabled){background:#a3c4b2}.button.danger{color:var(--danger);background:var(--danger-bg);border-color:#6b3c37}.button.large{min-height:52px;padding:0 22px;font-size:1.05rem}.button.small{min-height:36px;padding:0 12px;font-size:.9rem}.icon-button{min-width:44px;min-height:44px;color:var(--text);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;place-items:center;font-size:1.4rem;line-height:1;display:inline-grid}.icon-button:hover:not(:disabled){background:var(--surface-2)}.icon-button:disabled{opacity:.4;cursor:not-allowed}.controller-badge{min-width:36px;min-height:44px;color:var(--accent);place-items:center;display:inline-grid}.link-button{color:var(--danger);cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.button .icon{width:18px;height:18px}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.app{min-height:100vh;min-height:100dvh}.topbar,.toolbar{padding:calc(8px + var(--safe-top)) calc(12px + var(--safe-right)) 8px calc(12px + var(--safe-left));align-items:center;gap:8px;display:flex}.topbar h1{letter-spacing:.01em;flex:1;margin:0;font-size:1.15rem}.toolbar-actions{gap:2px;margin-left:auto;display:flex}.library{min-height:100dvh;padding-bottom:calc(24px + var(--safe-bottom));position:relative}.library>section,.library>.game-list,.library>.empty{margin:0 calc(12px + var(--safe-right)) 16px calc(12px + var(--safe-left))}.import-panel{border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface);flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px;display:flex}.import-panel p{flex:260px;margin:0}.empty{color:var(--muted);text-align:center;padding:24px 0}.game-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px;padding:0;list-style:none;display:grid}.game-card{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);grid-template-columns:1fr auto;gap:8px 12px;padding:14px;display:grid}.game-title{overflow-wrap:anywhere;margin:0 0 6px;font-size:1.05rem}.game-meta{flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 4px;font-size:.85rem;display:flex}.game-card-actions{align-items:flex-start;gap:4px;display:flex}.card-menu{border-top:1px solid var(--border);flex-wrap:wrap;grid-column:1/-1;gap:6px;padding-top:8px;display:flex}.card-menu .button{flex:180px}.badge{background:var(--surface-3);color:var(--text);border-radius:999px;padding:1px 8px;font-size:.78rem;display:inline-block}.badge.color{color:#b9d3ec;background:#2d3b48}.badge.subtle{border:1px solid var(--border);color:var(--muted);background:0 0}.panel{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);padding:14px 16px}.panel h2{margin:0 0 8px;font-size:1rem}.plain-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.drop-overlay{border:3px dashed var(--accent);pointer-events:none;z-index:20;background:#111317d9;border-radius:20px;place-items:center;font-size:1.3rem;display:grid;position:fixed;inset:12px}.player-screen{height:100vh;grid-template:"toolbar""stage"minmax(0,1fr)"banner""controls"/minmax(0,1fr);height:100dvh;display:grid;overflow:hidden}.player-screen .toolbar{grid-area:toolbar;padding-bottom:4px}.toolbar-title{flex-direction:column;flex:1;min-width:0;display:flex}.title-text{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.save-status{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.save-status.saved{color:var(--accent)}.save-status.error,.save-status.session-only{color:var(--warning)}.stage{min-width:0;min-height:0;margin:4px calc(8px + var(--safe-right)) 4px calc(8px + var(--safe-left));grid-area:stage;position:relative}.screen{image-rendering:pixelated;image-rendering:crisp-edges;background:#e8eee0;border-radius:2px;margin:auto;display:block;position:absolute;inset:0;box-shadow:0 0 0 6px #0a0b0d,0 10px 40px #00000073}.stage-overlay{text-align:center;background:#0a0b0d8c;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:16px;display:flex;position:absolute;inset:0}.stage-overlay.error{background:#0a0b0dcc}.overlay-text{text-shadow:0 1px 2px #000;max-width:34rem;margin:0;font-weight:600}.overlay-hint{color:var(--muted);margin:0;font-size:.9rem}.overlay-play{background:var(--accent);min-width:150px;min-height:56px;color:var(--accent-ink);cursor:pointer;border:none;border-radius:999px;align-items:center;gap:8px;padding:0 28px;font-size:1.15rem;font-weight:700;display:inline-flex;box-shadow:0 6px 24px #00000073}.overlay-play .icon{fill:currentColor;stroke:none}.diagnostics{color:#cfe8da;pointer-events:none;background:#000000b3;border-radius:6px;padding:4px 8px;font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute;top:6px;left:6px}.slow-banner,.silent-banner{color:var(--warning);text-align:center;grid-area:banner;margin:0 12px 4px;font-size:.85rem}.touch-controls{--s:calc(var(--touch-scale,1) * var(--fit,1));padding:8px calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;grid-area:controls;grid-template-columns:auto 1fr auto;grid-template-areas:"left.right""center center center";align-items:center;gap:12px 8px;display:grid}.touch-left{grid-area:left;justify-self:start}.touch-right{justify-self:end;gap:calc(14px * var(--s));grid-area:right;align-items:center;margin-right:8px;display:flex;transform:rotate(-18deg)}.touch-center{grid-area:center;justify-self:center;gap:16px;display:flex}.dpad{width:calc(150px * var(--s));height:calc(150px * var(--s));touch-action:none;border-radius:50%;position:relative}.dpad-arm,.dpad-center{background:var(--surface-3);border:1px solid var(--border);position:absolute}.dpad-arm.up,.dpad-arm.down{width:34%;height:36%;left:33%}.dpad-arm.left,.dpad-arm.right{width:36%;height:34%;top:33%}.dpad-arm.up{border-radius:10px 10px 0 0;top:0}.dpad-arm.down{border-radius:0 0 10px 10px;bottom:0}.dpad-arm.left{border-radius:10px 0 0 10px;left:0}.dpad-arm.right{border-radius:0 10px 10px 0;right:0}.dpad-center{border:none;width:34%;height:34%;top:33%;left:33%}.dpad[data-dir="4"] .up,.dpad[data-dir="5"] .up,.dpad[data-dir="6"] .up,.dpad[data-dir="1"] .right,.dpad[data-dir="5"] .right,.dpad[data-dir="9"] .right,.dpad[data-dir="8"] .down,.dpad[data-dir="9"] .down,.dpad[data-dir="10"] .down,.dpad[data-dir="2"] .left,.dpad[data-dir="6"] .left,.dpad[data-dir="10"] .left{background:var(--accent)}.pad-button{touch-action:none;border:1px solid var(--border);background:var(--surface-3);color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}.pad-button[data-pressed]{background:var(--accent);color:var(--accent-ink)}.pad-button.round{width:calc(64px * var(--s));height:calc(64px * var(--s));font-weight:700;font-size:calc(1.2rem * var(--s));border-radius:50%}.pad-button.round.b{transform:translateY(calc(18px * var(--s)))}.pad-button.pill{min-width:calc(64px * var(--s));letter-spacing:.08em;border-radius:999px;min-height:48px;padding:0 10px;font-size:.72rem}@media (max-width:380px){.touch-controls{--fit:.8;padding-left:calc(10px + var(--safe-left));padding-right:calc(10px + var(--safe-right))}}@media (max-width:560px){.player-screen .toolbar{flex-wrap:wrap;row-gap:0}.player-screen .toolbar-title{flex:calc(100% - 56px)}.player-screen .toolbar-actions{flex:100%;justify-content:space-between;margin-left:0}}@media (orientation:portrait){.player-screen.with-touch .screen{bottom:auto}}@media (orientation:landscape) and (max-height:540px){.player-screen.with-touch{grid-template:"toolbar toolbar toolbar""left stage right"minmax(0,1fr)"left banner center"/minmax(150px,1fr) minmax(0,3fr) minmax(150px,1fr)}.player-screen.with-touch .touch-controls{display:contents}.player-screen.with-touch .touch-left{padding-left:var(--safe-left);grid-area:left;place-self:center}.player-screen.with-touch .touch-right{padding-right:var(--safe-right);grid-area:right;place-self:center;margin-right:0}.player-screen.with-touch .touch-center{padding-bottom:calc(8px + var(--safe-bottom));grid-area:center;justify-self:center}.player-screen .toolbar{padding-top:calc(2px + var(--safe-top))}}.notices{left:50%;bottom:calc(12px + var(--safe-bottom));z-index:30;gap:8px;width:min(560px,100vw - 24px);display:grid;position:fixed;transform:translate(-50%)}.notice{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;align-items:flex-start;gap:8px;padding:10px 6px 10px 14px;font-size:.92rem;display:flex;box-shadow:0 8px 30px #0006}.notice span{flex:1;padding-top:10px}.notice.warning{border-color:#6b5a2f}.notice.error{border-color:#6b3c37}.dialog{border:1px solid var(--border);background:var(--surface);width:min(520px,100vw - 24px);max-height:calc(100dvh - 24px);color:var(--text);border-radius:16px;padding:0;overflow:auto}.dialog.wide{width:min(760px,100vw - 24px)}.dialog::backdrop{background:#0009}.dialog-header{background:var(--surface);border-bottom:1px solid var(--border);z-index:1;justify-content:space-between;align-items:center;padding:10px 10px 10px 18px;display:flex;position:sticky;top:0}.dialog-header h2{margin:0;font-size:1.1rem}.dialog-body{padding:4px 18px 18px}.dialog-body section+section{border-top:1px solid var(--border)}.dialog-body h3{margin:16px 0 8px;font-size:.95rem}.dialog-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.dialog-actions.stacked{flex-direction:column;align-items:stretch}.field{color:var(--muted);flex-direction:column;gap:4px;margin:8px 0;display:flex}.field.inline{color:var(--text);flex-direction:row;align-items:center;gap:10px}.field .value{font-variant-numeric:tabular-nums;min-width:3.5em;color:var(--muted)}.field input[type=range]{accent-color:var(--accent);flex:1;min-height:32px}input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:20px;height:20px}.choices{border:0;gap:8px;margin:0;padding:0;display:grid}.choices label{align-items:center;gap:8px;min-height:36px;display:flex}.keymap{border-collapse:collapse;width:100%;margin-bottom:8px}.keymap th,.keymap td{text-align:left;border-bottom:1px solid var(--border);padding:4px 8px 4px 0}.keymap th{font-weight:600}.slot-list{gap:8px;margin:0 0 12px;padding:0;list-style:none;display:grid}.slot-card{background:var(--surface-2);border-radius:10px;grid-template-columns:auto 1fr;gap:8px 12px;padding:10px;display:grid}.slot-info{flex-direction:column;gap:2px;font-size:.9rem;display:flex}.slot-actions{flex-wrap:wrap;grid-column:1/-1;gap:6px;display:flex}.slot-actions .button{flex:90px;min-height:40px}.thumb{width:80px;height:72px;image-rendering:pixelated;background:#0a0b0d;border-radius:4px}.thumb.empty{border:1px dashed var(--border)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}