:root{color-scheme:dark;--bg:#111315;--panel:#191c1f;--panel-soft:#22262a;--ink:#f1f3f0;--muted:#a6adaa;--subtle:#858e89;--line:#30363a;--line-strong:#49534b;--accent:#c0e58b;--accent-soft:#c0e58b16;--success:#c0e58b;--danger:#ffa99c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}
*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--bg)}body{margin:0;color:var(--ink);background:var(--bg);line-height:1.5}body:has(dialog[open]){overflow:hidden}button,input,select{font:inherit}button,.file-button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:42px;padding:9px 16px;border:1px solid var(--line);border-radius:9px;background:var(--panel-soft);color:var(--ink);font-size:.875rem;font-weight:550;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}button:hover:not(:disabled),.file-button:hover{background:#2c3234;border-color:#667161}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.35;cursor:not-allowed}.primary,button.primary{background:var(--accent);color:#1a2410;border-color:var(--accent);font-weight:650}.primary:hover:not(:disabled){background:#d0efa5;color:#17220f}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[role=tabpanel]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.text-button{border:0;background:transparent;color:var(--muted);padding:6px 0;min-height:36px}.text-button:hover:not(:disabled){background:transparent;color:var(--ink)}input[type=range]{accent-color:var(--accent);width:100%;cursor:pointer;min-height:28px}input[type=checkbox]{accent-color:var(--accent);width:20px;height:20px}input[type=datetime-local],select{width:100%;min-height:46px;padding:10px 12px;color:var(--ink);background:#111518;border:1px solid var(--line);border-radius:8px}h1,h2,h3,p{margin-top:0}h1{font-size:1.3rem;font-weight:600;letter-spacing:-.03em;margin-bottom:0;overflow-wrap:anywhere}h2{font-size:1.4rem;letter-spacing:-.035em;font-weight:600}h3{font-size:1rem;font-weight:550}small{font-size:.8125rem}.app-shell{max-width:1440px;margin:auto;padding:0 40px}.topbar{min-height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}.brand strong{font-weight:600;font-size:1rem;letter-spacing:-.025em}.brand-mark{display:grid;gap:3px;width:23px;height:29px}.brand-mark i{border:1.5px solid var(--accent);border-radius:3px}.version{font-size:.75rem;color:var(--subtle);margin-left:2px}.top-actions{display:flex;gap:10px}.open-game{background:transparent}.player-card{max-width:1056px;margin:28px auto 0}.player-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 8px 18px}.section-kicker{color:var(--subtle);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 4px;font-weight:600}.status-pill{font-size:.8125rem;padding:4px 10px;border:1px solid var(--line);border-radius:20px;color:var(--muted);white-space:nowrap}.status-pill.good{color:var(--accent);border-color:#48593a}.status-pill.bad{color:var(--danger)}.stage{position:relative;background:#0b0e10;border:1px solid #292e31;border-radius:14px;overflow:auto;padding:20px;scrollbar-color:#434b43 #111315}.player-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 6px 8px}.playback{display:flex;gap:8px}.playback #runButton{min-width:102px}.playback #resetButton{background:transparent}.quick-volume{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.875rem}.quick-volume input{width:110px}.quick-volume output{width:40px;text-align:right;font-size:.8125rem;font-variant-numeric:tabular-nums}.player-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 8px}.player-bottom p{color:var(--muted);font-size:.8125rem;margin:0;overflow-wrap:anywhere}.player-bottom button{white-space:nowrap}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:#101416f5}.empty-label{font-size:.75rem;letter-spacing:.14em;color:var(--accent);margin-bottom:18px}.empty-state h2{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.05em;line-height:1.15;margin-bottom:16px}.empty-state p{color:var(--muted);font-size:1rem;line-height:1.7;margin-bottom:24px}.empty-state small{color:var(--subtle);margin-top:18px}.empty-state .primary{min-width:155px;justify-content:space-between}.stage:not(.has-game) .console-frame{visibility:hidden}.app-shell>footer{max-width:1056px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 8px 24px;margin:auto;color:var(--subtle);font-size:.8125rem}.settings-dialog{inset:0 0 0 auto;margin:0;width:min(620px,100%);height:100dvh;max-height:100dvh;max-width:100%;padding:0;border:0;border-left:1px solid var(--line);background:#191d20;color:var(--ink);box-shadow:-20px 0 80px #0005}.settings-dialog::backdrop{background:#060809aa;backdrop-filter:blur(5px)}.settings-shell{height:100%;display:flex;flex-direction:column}.settings-heading{display:flex;justify-content:space-between;align-items:center;padding:28px 28px 20px;gap:16px}.settings-heading h2{margin:0;font-size:1.8rem}.settings-heading button{background:transparent;min-width:42px;padding:8px}.settings-tabs{display:flex;gap:4px;overflow-x:auto;padding:0 24px 14px;border-bottom:1px solid var(--line);flex-shrink:0}.settings-tabs button{background:transparent;border-color:transparent;color:var(--muted);white-space:nowrap;padding:8px 11px}.settings-tabs button[aria-selected=true]{color:var(--accent);background:#c0e58b10;border-color:#c0e58b30}.settings-content{padding:26px 28px;overflow-y:auto;flex:1;min-height:0;scrollbar-gutter:stable}.settings-content [role=tabpanel]>h2{font-size:1.125rem;margin-bottom:18px}.settings-content .control-section:first-of-type{border-top:0;margin-top:0;padding-top:0}.settings-footer{display:flex;justify-content:space-between;gap:16px;padding:16px 28px;border-top:1px solid var(--line);font-size:.75rem;color:var(--subtle)}.settings-footer p{margin:0}.control-section{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}.field-label{display:block;font-size:.875rem;color:var(--muted);margin:12px 0 8px}.hint{color:var(--muted);font-size:.875rem;line-height:1.65;margin:12px 0}.range-control,.scale-control,.subheading-row,.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0 6px;font-size:.875rem}.range-control output{color:var(--muted)}.scale-buttons,.save-buttons,.button-grid{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.scale-buttons button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.card{border-top:1px solid var(--line);padding:18px 0;margin-top:16px}.card summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none}.card summary::-webkit-details-marker{display:none}.card summary::after{content:'+';color:var(--muted)}.card[open]>summary::after{content:'−'}.card summary strong{font-size:.9375rem;font-weight:550}.mini-status,.local-chip{font-size:.75rem;color:var(--muted)}.details-list{margin:16px 0 0}.details-list>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:20px;padding:10px 0;border-top:1px solid var(--line);font-size:.875rem}.details-list dt{color:var(--muted)}.details-list dd{margin:0;overflow-wrap:anywhere}.scope-card ul{padding-left:20px;color:var(--muted);font-size:.875rem}.scope-card p{font-size:.875rem;color:var(--muted)}.load-card{border:0;padding:0;margin:0}.load-card .card-heading{display:none}.load-card button{margin:0 6px 10px 0}.drop-overlay{position:fixed;inset:0;background:#080c10e8;z-index:200;display:grid;place-items:center;pointer-events:none}.drop-overlay-card{border:1px dashed var(--accent);border-radius:18px;display:grid;gap:8px;padding:50px;text-align:center;background:#1b2319}.drop-overlay-card strong{font-size:1.5rem}.drop-overlay-card span{color:var(--muted)}

.console-frame {
  --screen-gap: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "top" "hinge" "bottom";
  align-items: center;
  padding: clamp(11px, 1.4vw, 18px);
  border: 1px solid rgba(208,220,235,.14);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 27%),
    linear-gradient(155deg, #202833 0%, #131a22 48%, #0b1016 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.06), inset 0 -1px rgba(0,0,0,.4), 0 22px 45px rgba(0,0,0,.24);
  overflow: hidden;
}
.screen-unit { min-width: 0; }
.screen-unit-top { grid-area: top; }
.screen-unit-bottom { grid-area: bottom; }
.screen-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, 670px);
  margin: 0 auto 6px;
  color: #7f8c9d;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.screen-bezel {
  width: min(100%, 690px);
  margin: 0 auto;
  padding: clamp(8px, 1vw, 11px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: linear-gradient(145deg, #080b0f, #121820);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 7px 18px rgba(0,0,0,.24);
}
.screen-surface { position: relative; width: 100%; aspect-ratio: 4 / 3; margin: 0 auto; overflow: hidden; border-radius: 5px; background: #020304; }
.screen-surface::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.045); border-radius: inherit; }
.screen-surface canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: #020304; image-rendering: pixelated; touch-action: none; transform-origin: center; }
.hinge {
  grid-area: hinge;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 14px;
  align-items: center;
  width: calc(100% + 4px);
  height: var(--screen-gap);
  min-height: 0;
  margin: 4px -2px;
  overflow: hidden;
}
.hinge i { height: 7px; border-radius: 999px; background: linear-gradient(#070a0e, #2a343f); box-shadow: inset 0 1px rgba(255,255,255,.11), 0 1px 2px rgba(0,0,0,.5); }
.console-frame[data-rotation="180"] { grid-template-areas: "bottom" "hinge" "top"; }
.console-frame[data-rotation="180"] .screen-surface canvas { transform: rotate(180deg); }
.console-frame[data-rotation="90"],
.console-frame[data-rotation="-90"] {
  grid-template-columns: minmax(0, 1fr) var(--screen-gap) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.console-frame[data-rotation="-90"] { grid-template-areas: "top hinge bottom"; }
.console-frame[data-rotation="90"] { grid-template-areas: "bottom hinge top"; }
.console-frame[data-rotation="90"] .screen-label,
.console-frame[data-rotation="-90"] .screen-label,
.console-frame[data-rotation="90"] .screen-bezel,
.console-frame[data-rotation="-90"] .screen-bezel { width: min(100%, 410px); }
.console-frame[data-rotation="90"] .screen-surface,
.console-frame[data-rotation="-90"] .screen-surface { aspect-ratio: 3 / 4; }
.console-frame[data-rotation="90"] .screen-surface canvas,
.console-frame[data-rotation="-90"] .screen-surface canvas {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 133.333333%;
  height: 75%;
}
.console-frame[data-rotation="90"] .screen-surface canvas { transform: translate(-50%, -50%) rotate(90deg); }
.console-frame[data-rotation="-90"] .screen-surface canvas { transform: translate(-50%, -50%) rotate(-90deg); }
.console-frame[data-rotation="90"] .hinge,
.console-frame[data-rotation="-90"] .hinge {
  align-self: stretch;
  width: var(--screen-gap);
  height: auto;
  margin: -2px 4px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 3fr 1fr;
  gap: 14px;
  justify-items: center;
}
.console-frame[data-rotation="90"] .hinge i,
.console-frame[data-rotation="-90"] .hinge i { width: 7px; height: 100%; }

/* Fit remains the responsive default. Integer modes keep each DS pixel an exact CSS-pixel multiple. */
.console-frame[data-scale="1"],
.console-frame[data-scale="2"] {
  overflow: auto;
  justify-content: safe center;
}
.console-frame[data-scale="1"] .screen-bezel,
.console-frame[data-scale="2"] .screen-bezel { box-sizing: content-box; max-width: none; }
.console-frame[data-scale="1"] .screen-label,
.console-frame[data-scale="2"] .screen-label { max-width: none; }
.console-frame[data-scale="1"] .screen-surface { width: 256px; height: 192px; aspect-ratio: auto; }
.console-frame[data-scale="2"] .screen-surface { width: 512px; height: 384px; aspect-ratio: auto; }
.console-frame[data-scale="1"] .screen-bezel,
.console-frame[data-scale="1"] .screen-label { width: 256px; }
.console-frame[data-scale="2"] .screen-bezel,
.console-frame[data-scale="2"] .screen-label { width: 512px; }
.console-frame[data-scale="1"][data-rotation="90"],
.console-frame[data-scale="1"][data-rotation="-90"],
.console-frame[data-scale="2"][data-rotation="90"],
.console-frame[data-scale="2"][data-rotation="-90"] {
  grid-template-columns: max-content var(--screen-gap) max-content;
}
.console-frame[data-scale="1"][data-rotation="90"] .screen-surface,
.console-frame[data-scale="1"][data-rotation="-90"] .screen-surface { width: 192px; height: 256px; aspect-ratio: auto; }
.console-frame[data-scale="2"][data-rotation="90"] .screen-surface,
.console-frame[data-scale="2"][data-rotation="-90"] .screen-surface { width: 384px; height: 512px; aspect-ratio: auto; }
.console-frame[data-scale="1"][data-rotation="90"] .screen-bezel,
.console-frame[data-scale="1"][data-rotation="-90"] .screen-bezel,
.console-frame[data-scale="1"][data-rotation="90"] .screen-label,
.console-frame[data-scale="1"][data-rotation="-90"] .screen-label { width: 192px; }
.console-frame[data-scale="2"][data-rotation="90"] .screen-bezel,
.console-frame[data-scale="2"][data-rotation="-90"] .screen-bezel,
.console-frame[data-scale="2"][data-rotation="90"] .screen-label,
.console-frame[data-scale="2"][data-rotation="-90"] .screen-label { width: 384px; }

.pad {
  margin-top: 10px;
  padding: 10px 13px 13px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(22,29,39,.93), rgba(12,17,24,.93));
  user-select: none;
  -webkit-user-select: none;
}
.shoulder-row { display: grid; grid-template-columns: 94px 1fr 94px; gap: 10px; align-items: center; }
.shoulder-row .shoulder { min-height: 34px; padding: .35rem .65rem; border-radius: 10px; font-weight: 850; }
.pad-caption { color: var(--subtle); text-align: center; font-size: .63rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.pad-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(18px, 5vw, 50px); margin: 7px auto 0; max-width: 690px; }
.dpad, .face-buttons { justify-self: center; width: 130px; height: 108px; }
.dpad { display: grid; grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(3, 36px); justify-content: center; }
.dpad button { min-width: 36px; min-height: 36px; padding: 0; border-radius: 7px; background: linear-gradient(#222c38, #151c25); font-size: .68rem; }
.dpad-up { grid-area: 1 / 2; }
.dpad-left { grid-area: 2 / 1; }
.dpad-center { grid-area: 2 / 2; border: 1px solid var(--line); background: #171f29; box-shadow: inset 0 0 0 8px rgba(255,255,255,.012); }
.dpad-right { grid-area: 2 / 3; }
.dpad-down { grid-area: 3 / 2; }
.center-buttons { display: flex; gap: 7px; align-self: end; padding-bottom: 8px; }
.center-buttons button { min-height: 28px; padding: .32rem .62rem; border-radius: 999px; color: #aab5c2; font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; }
.face-buttons { position: relative; }
.face-buttons button { position: absolute; width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 50%; font-weight: 900; }
.face-x { left: 44px; top: 0; }
.face-y { left: 2px; top: 34px; }
.face-a { right: 2px; top: 34px; }
.face-b { left: 44px; bottom: 0; }
.pad button.is-held { color: #071310; border-color: transparent; background: var(--accent); box-shadow: 0 0 0 4px rgba(120,231,218,.09); }

.control-panel { display: grid; gap: 11px; }
.developer-panels details[hidden] { display: none; }
.developer-panels details { border-top: 1px solid var(--line); padding-top: .6rem; }
.developer-panels summary { cursor: pointer; color: var(--ink); font-size: .75rem; font-weight: 750; }
.debug-panel { margin: .6rem 0 0; max-height: 32rem; overflow: auto; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: #080d12; color: #c9d7df; font: .68rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.profiler-panel { font-family: inherit; white-space: normal; }
.profiler-empty { color: var(--muted); font-size: .75rem; }
.profiler-head { display: flex; justify-content: space-between; gap: .8rem; align-items: start; margin-bottom: .65rem; }
.profiler-head strong, .profiler-head span { display: block; }
.profiler-head span { margin-top: .14rem; color: var(--muted); font-size: .65rem; }
.profiler-total { flex: 0 0 auto; text-align: right; color: var(--accent); font: .7rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.profiler-row { display: grid; grid-template-columns: minmax(6.8rem,.85fr) minmax(5rem,1.5fr) minmax(6.5rem,.7fr); gap: .5rem; align-items: center; padding: .25rem 0; }
.profiler-label strong { display: block; font-size: .7rem; }
.profiler-label span { display: block; color: var(--muted); font-size: .6rem; }
.profiler-track { height: .42rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.profiler-fill { height: 100%; min-width: 1px; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }
.profiler-value { text-align: right; color: #c8d6de; font: .64rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.profiler-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.profiler-meta span { padding: .16rem .36rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .6rem; }

.keybindings-dialog { width: min(700px, calc(100% - 28px)); max-height: min(84vh, 760px); padding: 0; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 18px; background: #101720; box-shadow: 0 2rem 6rem rgba(0,0,0,.58); }
.keybindings-dialog::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(5px); }
.keybindings-shell { padding: 16px; }
.dialog-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.dialog-heading h2 { margin: .17rem 0 0; font-size: 1.35rem; letter-spacing: -.025em; }
.keybinding-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.keybinding-row { display: grid; grid-template-columns: minmax(4rem,.7fr) minmax(7rem,1fr); gap: 7px; align-items: center; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.022); }
.keybinding-row.waiting { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(120,231,218,.18); }
.keybinding-name { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.keybinding-row button { min-height: 36px; padding: .4rem .5rem; font: .68rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }

/* Screen geometry stays shared with rotation and integer scaling. */
.console-frame{--screen-gap:20px;--fit-width:clamp(224px,calc(66.666dvh - 214px),410px);width:min(100%,calc(var(--fit-width) + 24px));margin:auto;padding:10px;background:#171c1f;border:1px solid #303637;border-radius:10px;box-shadow:none}.screen-bezel{padding:0;width:100%;background:#070909;border:0;border-radius:3px;box-shadow:none}.screen-label{font-size:.75rem;letter-spacing:0;text-transform:none;font-weight:400;line-height:1.4;width:100%;color:var(--subtle);margin-bottom:5px}.screen-surface{border-radius:2px}.hinge{margin:0;width:100%;background:transparent}.hinge i{display:none}.console-frame[data-rotation="90"],.console-frame[data-rotation="-90"]{width:min(100%,900px);grid-template-columns:minmax(0,1fr) var(--screen-gap) minmax(0,1fr)}.console-frame[data-rotation="90"] .hinge,.console-frame[data-rotation="-90"] .hinge{margin:0;height:100%;width:var(--screen-gap)}.console-frame[data-scale="1"],.console-frame[data-scale="2"]{width:max-content;max-width:none}.pad{max-width:650px;margin:20px auto 0;background:transparent;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:none}.pad-caption{font-size:.75rem;letter-spacing:0}.pad-controls{gap:30px}.center-buttons button{font-size:.75rem;min-height:38px}.shoulder-row .shoulder{min-height:40px}.dpad button{min-height:36px}.keybindings-dialog{background:#191d20}.keybindings-shell{padding:24px}.keybinding-row button{font-size:.875rem}.debug-panel{font-size:.8125rem}.profiler-meta span{font-size:.75rem}.profiler-row{font-size:.8125rem}.keybindings-dialog h2{font-size:1.4rem}.keybinding-list{display:grid;gap:8px}.keybindings-dialog .section-kicker{font-size:.75rem}
@media(min-width:1600px){.app-shell{padding:0 60px}.player-card{margin-top:36px}}
@media(max-width:700px){.app-shell{padding:0 16px}.topbar{min-height:76px;gap:10px}.brand{gap:8px}.brand strong{font-size:.9375rem}.version{display:none}.top-actions{gap:6px}.top-actions button{padding:8px 10px}.top-actions button span{display:none}.player-card{margin-top:20px}.stage{padding:12px}.player-heading{padding:0 2px 14px}.player-toolbar{flex-wrap:wrap;gap:12px;padding:14px 0 8px}.quick-volume{flex:1;justify-content:flex-end}.quick-volume input{width:90px}.player-bottom{align-items:flex-start;padding:0;gap:12px}.player-bottom p{padding-top:8px}.app-shell>footer{padding-inline:0}.console-frame{--fit-width:clamp(224px,calc(66.666dvh - 190px),350px)}.settings-heading{padding:24px 20px 18px}.settings-tabs{padding-left:16px;padding-right:16px}.settings-content{padding:22px 20px}.settings-footer{padding:14px 20px}.pad-controls{gap:10px}.pad-caption{display:none}.center-buttons{flex-direction:column}.pad{padding:10px}.scope-card summary .mini-status{display:none}}
@media(max-width:420px){.quick-volume{justify-content:flex-start;width:100%;flex-basis:100%}.quick-volume input{flex:1}.top-actions .open-game{display:none}.brand strong{font-size:1rem}.player-bottom{flex-wrap:wrap;gap:0}.player-bottom p{flex-basis:100%}.player-bottom button{margin-left:auto}.app-shell>footer{flex-wrap:wrap;gap:0}.pad-controls{grid-template-columns:1fr 1fr}.center-buttons{grid-column:1/-1;grid-row:2;flex-direction:row;justify-content:center}.dpad,.face-buttons{width:114px}.settings-heading .section-kicker{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.settings-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:6px}.settings-tabs button{white-space:normal;text-align:center}.settings-tabs button:focus-visible{outline-offset:0}
.player-indicators{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}.speed-indicator{display:flex;gap:7px;align-items:baseline;font-size:.875rem;color:var(--muted);white-space:nowrap}.speed-indicator output{color:var(--ink);font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}@media(max-width:420px){.player-indicators{gap:6px}.speed-indicator{font-size:.8125rem}}
/* Layout presets keep both displays available; focused layouts retain a
   smaller companion display instead of obscuring or disconnecting it. */
.screen-layout-buttons {display:flex;gap:6px;flex-wrap:wrap;margin:12px 0;}
.screen-layout-buttons [aria-pressed="true"] {background:var(--accent);color:var(--bg);}
.rom-player .stage .console-frame[data-layout="side-by-side"],
.rom-player .stage .console-frame[data-layout="focus-top"],
.rom-player .stage .console-frame[data-layout="focus-bottom"] {
  width:min(100%,1000px);grid-template-areas:"top hinge bottom";
  grid-template-columns:minmax(0,1fr) var(--screen-gap) minmax(0,1fr);grid-template-rows:auto;
}
.rom-player .stage .console-frame[data-layout="focus-top"] {grid-template-columns:minmax(0,1fr) var(--screen-gap) minmax(0,.35fr);}
.rom-player .stage .console-frame[data-layout="focus-bottom"] {grid-template-columns:minmax(0,.35fr) var(--screen-gap) minmax(0,1fr);}
.rom-player .stage .console-frame:not([data-layout="stacked"])[data-rotation="180"],
.rom-player .stage .console-frame:not([data-layout="stacked"])[data-rotation="90"] {grid-template-areas:"bottom hinge top";}
.rom-player .stage .console-frame[data-layout="focus-top"][data-rotation="180"],
.rom-player .stage .console-frame[data-layout="focus-top"][data-rotation="90"] {grid-template-columns:minmax(0,.35fr) var(--screen-gap) minmax(0,1fr);}
.rom-player .stage .console-frame[data-layout="focus-bottom"][data-rotation="180"],
.rom-player .stage .console-frame[data-layout="focus-bottom"][data-rotation="90"] {grid-template-columns:minmax(0,1fr) var(--screen-gap) minmax(0,.35fr);}
.console-frame:not([data-layout="stacked"]) .hinge {height:100%;width:var(--screen-gap);}