:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Noto Sans CJK SC",sans-serif;background:#101718;color:#e9eadc;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--device-height:min(calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom)),700px)}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;padding:calc(8px + var(--safe-top)) max(8px,env(safe-area-inset-right,0px)) calc(8px + var(--safe-bottom)) max(8px,env(safe-area-inset-left,0px));background:radial-gradient(ellipse at 30% 5%,#314540 0,transparent 55%),#101718}button,select,summary,a{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #f6d77d;outline-offset:3px}button:disabled{opacity:.5}a{color:#d4c69a}button,summary{color:inherit}.handheld{position:relative;isolation:isolate;width:min(100%,430px);height:var(--device-height);padding:16px;border:1px solid #6e7c67;border-radius:28px 28px 46px 28px;background:linear-gradient(140deg,#b0b4a0,#878e7d 48%,#767e6e);box-shadow:inset 0 2px 1px #e1e3c280,inset 0 -6px 0 #4d5d4b,0 24px 70px #0008;display:grid;grid-template-rows:32px minmax(0,1fr) 150px 44px 20px;gap:10px;overflow:hidden}.brandbar{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#263a33;min-width:0}.brand{font-size:13px;line-height:1;font-weight:900;letter-spacing:1.4px;white-space:nowrap}.brand span{display:block;font-size:8px;letter-spacing:2.7px;margin-top:5px;color:#41564a}.power{width:5px;height:5px;border-radius:50%;background:#d95048;box-shadow:0 0 6px #d95048;display:inline-block;margin-right:6px}.settings{position:static}.settings>summary{list-style:none;cursor:pointer;border:1px solid #5e6c58;border-radius:20px;padding:7px 10px;font-size:11px;font-weight:700;color:#2b4036;background:#b5bca8}.settings>summary::-webkit-details-marker{display:none}.settings-panel{position:absolute;z-index:20;top:58px;left:12px;right:12px;max-height:calc(100% - 76px);overflow:auto;overscroll-behavior:contain;padding:18px;border:1px solid #80937a;border-radius:16px;background:#1c2c27f7;box-shadow:0 12px 40px #0009;color:#eeeede;font-size:12px;line-height:1.65}.settings-panel p{margin:10px 0}.settings-panel button,.settings-panel select{padding:10px;border:1px solid #738572;border-radius:8px;background:#32453b;color:#f2f0df;min-height:44px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.port-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}.port-row select{min-width:100px}.settings-panel details{margin-top:14px}.settings-panel summary{cursor:pointer}.debug{font:10px/1.5 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:#d8c78f;max-height:140px;overflow:auto}.screen-frame{position:relative;min-height:0;display:grid;place-items:center;padding:12px 10px 18px;border-radius:13px 13px 22px 13px;background:#253932;box-shadow:inset 0 3px 8px #000a,0 1px 0 #dce3c180}.screen-frame:after{content:'DOT MATRIX · 256 × 240';position:absolute;bottom:4px;right:10px;color:#8a9b85;font:7px ui-monospace,monospace;letter-spacing:1.3px}#game{display:block;width:min(100%,calc((var(--device-height) - 350px)*256/240));height:auto;aspect-ratio:256/240;image-rendering:pixelated;background:#000;box-shadow:0 0 0 2px #111c17;touch-action:none}.controller-deck{display:flex;justify-content:space-between;align-items:center;gap:12px;user-select:none;-webkit-user-select:none;touch-action:none}.dpad{position:relative;width:146px;height:146px;flex:0 0 146px;touch-action:none;filter:drop-shadow(0 5px 0 #4b594b)}.dpad:before,.dpad:after{content:'';position:absolute;background:#25372f;box-shadow:inset 1px 1px 0 #526052;pointer-events:none;border-radius:6px}.dpad:before{left:49px;top:1px;width:48px;height:144px}.dpad:after{left:1px;top:49px;width:144px;height:48px}.dpad button{position:absolute;z-index:1;width:48px;height:48px;border:0;background:transparent;color:#91a48e;font-size:20px;touch-action:none;padding:0;border-radius:6px}.dpad [data-button=Up]{left:49px;top:1px}.dpad [data-button=Down]{left:49px;bottom:1px}.dpad [data-button=Left]{left:1px;top:49px}.dpad [data-button=Right]{right:1px;top:49px}.dpad button.is-pressed{background:#14281f;color:#e8d595;box-shadow:inset 0 3px 5px #0007}.dpad-center{position:absolute;z-index:2;left:57px;top:57px;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#344b3b,#1e3027);pointer-events:none}.action-buttons{display:flex;align-items:center;gap:12px;transform:rotate(-17deg);padding:0 2px 10px 0}.action-buttons button{width:60px;height:60px;flex-shrink:0;border:1px solid #843639;border-radius:50%;background:linear-gradient(145deg,#ce6664,#a5474a);color:#ffebd7;font-size:23px;font-weight:800;box-shadow:inset 0 2px 1px #f69b9180,0 6px 0 #713a38,0 8px 10px #30462e55;touch-action:none;transform:rotate(17deg)}.action-buttons button.is-pressed{background:#923c40;box-shadow:inset 0 3px 5px #582428,0 2px 0 #713a38;translate:0 4px}.system-buttons{display:flex;align-items:center;justify-content:center;gap:18px;touch-action:none;user-select:none}.system-buttons button{min-width:88px;min-height:44px;padding:6px 10px;border:1px solid #586956;border-radius:20px;background:linear-gradient(#53674f,#3b503d);box-shadow:0 3px 0 #364834,inset 0 1px 0 #86997d;font-size:10px;letter-spacing:1.1px;color:#e3e7ca;touch-action:none}.system-buttons button.is-pressed{translate:0 2px;box-shadow:inset 0 2px 4px #172d1c}.device-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#344a3c;font-size:9px;letter-spacing:.6px;white-space:nowrap}.speaker{width:49px;height:12px;background:repeating-linear-gradient(90deg,#3e5546 0 2px,transparent 2px 7px);transform:skewY(-8deg)}.error-banner{position:absolute;z-index:25;top:60px;left:14px;right:14px;border:1px solid #df9284;border-radius:10px;background:#542a27f5;color:#fff1df;padding:12px;font-size:12px;line-height:1.6;overflow-wrap:anywhere;max-height:160px;overflow:auto}.error-banner[hidden]{display:none}.fullscreen-exit{border:1px solid #63765d;background:#d1d2b7;color:#304330;border-radius:12px;min-height:30px;font-size:10px;padding:4px 8px}.fullscreen-exit[hidden]{display:none}.handheld:fullscreen,body.is-immersive .handheld{--device-height:100dvh;width:100%;height:100dvh;max-width:none;border-radius:0;padding-top:calc(16px + var(--safe-top));padding-bottom:calc(16px + var(--safe-bottom));grid-template-rows:32px minmax(0,1fr) 150px 44px 20px;justify-items:center}.handheld:fullscreen>*,body.is-immersive .handheld>*{width:min(100%,400px)}.handheld:fullscreen .screen-frame,body.is-immersive .screen-frame{height:100%}.handheld:fullscreen #game,body.is-immersive #game{width:min(100%,calc((100dvh - 350px - var(--safe-top) - var(--safe-bottom))*256/240))}body.is-immersive .handheld{position:fixed;inset:0;z-index:50}.handheld:fullscreen .settings-panel,body.is-immersive .settings-panel{left:50%;right:auto;transform:translateX(-50%);width:min(calc(100% - 24px),400px)}@media(min-width:800px) and (min-height:700px){.handheld{width:500px;padding:20px;grid-template-rows:32px minmax(0,1fr) 150px 44px 20px}.controller-deck{padding:0 18px}}@media(max-height:570px){:root{--device-height:calc(100dvh - 8px - var(--safe-top) - var(--safe-bottom))}body{padding-top:calc(4px + var(--safe-top));padding-bottom:calc(4px + var(--safe-bottom))}.handheld{padding:10px;grid-template-rows:28px minmax(0,1fr) 132px 44px 16px;gap:6px;border-radius:18px}.dpad{scale:.94}.controller-deck{gap:4px}.action-buttons{gap:10px}.action-buttons button{width:56px;height:56px}#game{width:min(100%,calc((var(--device-height) - 290px)*256/240))}.screen-frame{padding:8px 8px 16px}.device-foot{font-size:8px}}@media(prefers-reduced-motion:no-preference){button{transition:background .08s,box-shadow .08s,translate .08s}}
.handheld:fullscreen .error-banner,body.is-immersive .error-banner{width:auto;left:14px;right:14px}
@media(max-height:570px){.dpad{scale:.94}.handheld:fullscreen,body.is-immersive .handheld{grid-template-rows:28px minmax(0,1fr) 132px 44px 16px;gap:6px;padding-top:calc(10px + var(--safe-top));padding-bottom:calc(10px + var(--safe-bottom))}.handheld:fullscreen #game,body.is-immersive #game{width:min(100%,calc((100dvh - 290px - var(--safe-top) - var(--safe-bottom))*256/240))}}
/* Keep the bezel fitted to the256×240 display; spare height belongs to the grip. */
.screen-frame{align-self:start;height:fit-content}
.handheld:fullscreen .screen-frame,body.is-immersive .screen-frame{height:fit-content}