:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e4edf4;background:#0b121c;font-synthesis:none}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}body{background:radial-gradient(ellipse at 50% 15%,#273e54 0,#101c2b 45%,#080e16 100%);user-select:none;-webkit-user-select:none}button{font:inherit;cursor:pointer;touch-action:none;color:inherit;border:0}button:focus-visible{outline:2px solid #b9e5ff;outline-offset:3px}button:disabled{opacity:.45}#app{height:100dvh;max-width:620px;margin:auto;display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom));gap:14px}header{display:flex;align-items:center;height:26px;gap:12px;padding:0 5px;flex:none}.brand{font-size:13px;letter-spacing:4px;font-weight:800}.brand b{font-weight:300;color:#9fb5c9}.version{margin-left:auto;color:#8aa0b4;font-size:8px;letter-spacing:.6px;white-space:nowrap}.version.offline-ready{color:#9cd0dc}#info{border:1px solid #61798f;border-radius:50%;background:transparent;width:21px;height:21px;font-size:13px;color:#a9bece}.display{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#020508;border:2px solid #455e73;border-radius:18px;box-shadow:0 0 0 3px #09121d,0 0 0 4px #58708455,inset 0 0 26px #000;overflow:hidden}canvas{width:var(--screen-width,100%)!important;height:var(--screen-height,100%)!important;object-fit:fill;image-rendering:pixelated;display:block}#welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse,#17273777,#020508);text-align:center}.screen-emblem{font-size:68px;font-weight:200;font-style:italic;color:#b1c7d9;text-shadow:0 3px #3a536a}.screen-emblem span{font-size:16px;vertical-align:super;font-style:normal;letter-spacing:2px}h1{font-size:17px;letter-spacing:4px;margin:18px 0 0}#welcome p{font-size:12px;color:#9bafc0;letter-spacing:1px}#welcome small{color:#687d8f;font-size:10px;margin-top:20px}.ready{display:flex;align-items:center;gap:7px;font-size:10px;color:#b9d1df;margin-top:16px}.ready i,#notice{position:absolute;bottom:12px;left:10px;right:10px;padding:12px;border-radius:8px;background:#14273aee;font-size:12px;text-align:center}#resume{position:absolute;border:1px solid #8faec5;padding:14px 24px;border-radius:12px;background:#29465b;box-shadow:0 4px 20px #000}.controller{position:relative;width:100%;aspect-ratio:1.78;flex:none;border:1px solid #95acbd;border-radius:20px;background:repeating-linear-gradient(0deg,#ffffff03 0 1px,#00000003 1px 3px),linear-gradient(145deg,#8da1b1 0%,#4e6b83 18%,#667f93 42%,#2e485f 75%,#526c82);box-shadow:inset 0 2px 2px #e3f1fa99,inset 0 -5px 8px #0e2038,0 7px 0 #0b1927,0 8px 0 #4e657a,0 15px 28px #0008}.controller:before{content:"";position:absolute;inset:10px;border:1px solid #1c354b77;border-radius:13px;box-shadow:0 1px #c4d3df44;pointer-events:none}.screw{position:absolute;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#ced9df,#3b5164);box-shadow:0 1px 2px #000}.screw:after{content:"";position:absolute;left:1px;right:1px;top:3px;border-top:1px solid #253d51;transform:rotate(-35deg)}.tl{top:7px;left:7px}.tr{top:7px;right:7px}.bl{bottom:7px;left:7px}.br{bottom:7px;right:7px}.load{position:absolute;left:9%;top:9%;width:25%;height:13%;background:linear-gradient(#526d82,#294459);border:1px solid #9fb3c288;border-radius:7px;box-shadow:0 2px 3px #162b3f,inset 0 1px #c3d8e344;display:flex;gap:6px;align-items:center;justify-content:center;font-size:clamp(10px,2.7vw,15px);text-shadow:0 1px 2px #000}.load svg{width:14px;fill:none;stroke:currentColor;stroke-width:1.6}.shoulders{position:absolute;left:41%;top:9%;width:20%;height:29%;border:2px solid #21394e;border-radius:9px;overflow:hidden;display:flex;box-shadow:0 3px 4px #11283b,inset 0 1px #dae7ef}.shoulders button{width:50%;background:linear-gradient(140deg,#a4b8c7,#4e6a82 45%,#3f5a70);text-shadow:0 1px 1px #001c30;font-size:clamp(18px,5vw,30px);font-weight:700;box-shadow:inset 0 1px #e3eef588}.shoulders button+button{border-left:2px solid #21394e}.pad{position:absolute;left:9%;top:30%;width:28%;aspect-ratio:1}.cross{position:absolute;inset:0;background:linear-gradient(140deg,#b8c7d1,#7d95a9 42%,#3b566e);clip-path:polygon(33% 0,67% 0,67% 33%,100% 33%,100% 67%,67% 67%,67% 100%,33% 100%,33% 67%,0 67%,0 33%,33% 33%);filter:drop-shadow(0 3px 2px #000)}.pad{filter:drop-shadow(0 3px 0 #152b3e) drop-shadow(0 0 1px #d9e9f4)}.pad-center{position:absolute;inset:36%;border-radius:50%;background:linear-gradient(135deg,#314c62,#7990a3);box-shadow:inset 0 2px 4px #233d54}.pad button{position:absolute;background:transparent;color:#263f54;text-shadow:0 1px #c9dae8;font-size:18px;width:34%;height:34%}.pad [data-dir=Up]{left:33%;top:0}.pad [data-dir=Down]{left:33%;bottom:0}.pad [data-dir=Left]{left:0;top:33%}.pad [data-dir=Right]{right:0;top:33%}.face{position:absolute;right:6%;top:20%;width:35%;height:62%}.face button{position:absolute;width:39%;aspect-ratio:1;border-radius:50%;font-weight:750;font-size:clamp(23px,6vw,38px);border:2px solid #182f42;background:linear-gradient(140deg,#adc2d1,#607e98 40%,#294962);text-shadow:0 2px 1px #ccdeea77;color:#1b3448;box-shadow:inset 0 2px 2px #e4f3ff88,inset 0 -3px 4px #152f47,0 3px 0 #172a3b,0 5px 7px #172a3b88}.face .x{top:0;left:30.5%}.face .y{left:0;top:33%}.face .a{right:0;top:33%}.face .b{bottom:0;left:30.5%}.system{position:absolute;left:44%;width:14%;top:63%;height:33%;display:flex;flex-direction:column;align-items:center;gap:1px}.system>span{font-size:6px;font-weight:700;letter-spacing:1.3px;color:#c9d9e6;text-shadow:0 1px #233c50}.start{height:51%;width:85%;background:transparent;padding:0;filter:drop-shadow(0 2px 1px #142a3d)}.start svg{height:100%;width:100%;fill:#91a8ba;stroke:#263e52;stroke-width:3;stroke-linejoin:round}.select{height:21%;width:65%;border-radius:5px;background:linear-gradient(#9bb0c0,#56738b);box-shadow:0 2px #223b51;font-size:20px;line-height:10px;color:#213e54}.etch{position:absolute;left:9%;bottom:8%;font-size:6px;font-weight:700;letter-spacing:1.3px;color:#acc1d1;text-shadow:0 1px #263f54}.controller button.pressed,.controller button:active{filter:brightness(.75);transform:translateY(2px);box-shadow:inset 0 2px 4px #091d33}dialog{max-width:360px;width:90%;max-height:80dvh;overflow:auto;touch-action:pan-y;border:1px solid #6c8ba4;border-radius:18px;padding:25px;background:#15283b;color:#d6e6f2;box-shadow:0 20px 80px #000;font-size:13px;line-height:1.6}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}dialog h2{margin:0 0 16px;letter-spacing:2px}dialog a{color:#9dd7ff}dialog button{border-radius:8px;padding:8px 12px;background:#365873}#close-help{float:right;font-size:20px;padding:0 8px}.credits{font-size:11px;color:#a4bacb}#rom-list{display:grid;gap:8px;margin-bottom:16px}#rom-list button{text-align:left;word-break:break-word}[hidden]{display:none!important}@media(min-width:700px){#app{padding-top:25px;padding-bottom:25px;gap:22px}.controller{max-height:330px}.etch{font-size:9px}.system>span{font-size:8px}}@media(orientation:landscape) and (max-height:600px){#app{max-width:1100px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:24px 1fr;gap:10px;padding: max(8px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}header{grid-column:1/3}.display{height:100%;grid-column:1}.controller{grid-column:2;align-self:center}#welcome .screen-emblem{font-size:35px}#welcome h1{font-size:13px;margin:10px 0 0}#welcome p{margin:5px}#welcome small{margin-top:8px}.ready{margin-top:5px}.face button{font-size:26px}.load{font-size:12px}}

@font-face{font-family:WevoGothic;src:url("fonts/unifrakturcook-bold.ttf?v=5") format("truetype");font-style:normal;font-weight:700;font-display:swap}
.brand{font-family:WevoGothic,Georgia,serif;font-weight:700;font-size:25px;letter-spacing:.2px;color:#d8e8f3;text-shadow:0 1px 1px #000,0 0 12px #8ab9db33}
.etch{left:7%;bottom:5%;width:31%;text-align:center;font-family:WevoGothic,Georgia,serif;font-size:clamp(18px,5.5vw,32px);font-weight:700;letter-spacing:0;line-height:1.1;color:#e1edf5;-webkit-text-stroke:.35px #243c52;text-shadow:0 1px 0 #163148,0 2px 1px #233c50,0 -1px 0 #eef9ff,0 0 12px #bbdef433;pointer-events:none}
.screen-emblem{font-family:WevoGothic,Georgia,serif;font-style:normal;font-size:46px;font-weight:700;letter-spacing:0}
@media(orientation:landscape) and (max-height:600px){.brand{font-size:23px}.etch{font-size:clamp(18px,3.2vw,28px)}#welcome .screen-emblem{font-size:34px}}

/* Centered identity between the shoulders and Start; all controls remain clear. */
.etch{left:38%;top:40%;bottom:auto;width:26%;height:21%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:clamp(14px,4.5vw,25px);line-height:1;isolation:auto}
.etch img{display:block;width:42%;height:55%;object-fit:contain;mix-blend-mode:screen;flex:none}
.etch span{display:block;white-space:nowrap}
@media(orientation:landscape) and (max-height:600px){.etch{font-size:clamp(14px,2.8vw,22px)}}

/* PB2's 100 ms inward press, applied to a cap over a stationary hit target. */
.controller button,.controller button.pressed,.controller button:active{transform:none;filter:none}
.controller .load,.controller .load.pressed,.controller .load:active,.face button,.face button.pressed,.face button:active,.shoulders button,.shoulders button.pressed,.shoulders button:active,.system button,.system button.pressed,.system button:active{background:transparent;box-shadow:none}
.face button{border:0}
.shoulders button,.system button{position:relative}
.button-cap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:inherit;pointer-events:none;transform-origin:center;transition:transform 100ms ease-out,filter 100ms ease-out}
.face .button-cap{border:2px solid #182f42;background:linear-gradient(140deg,#adc2d1,#607e98 40%,#294962);box-shadow:inset 0 2px 2px #e4f3ff88,inset 0 -3px 4px #152f47,0 3px 0 #172a3b,0 5px 7px #172a3b88}
.shoulders .button-cap{background:linear-gradient(140deg,#a4b8c7,#4e6a82 45%,#3f5a70);box-shadow:inset 0 1px #e3eef588}
.select .button-cap{background:linear-gradient(#9bb0c0,#56738b);box-shadow:0 2px #223b51}
.load .button-cap{background:linear-gradient(#526d82,#294459);box-shadow:0 2px 3px #162b3f,inset 0 1px #c3d8e344}
.start .button-cap{filter:drop-shadow(0 2px 1px #142a3d)}
.controller button.pressed>.button-cap,.controller button:active>.button-cap{transform:perspective(230px) translateY(2px) rotateX(6deg) scale(.965);filter:brightness(.85) saturate(1.12)}
.pad{perspective:280px;filter:none}
.pad-visual{position:absolute;inset:0;pointer-events:none;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-origin:center;transition:transform 80ms ease-out,filter 80ms ease-out;filter:drop-shadow(0 3px 0 #152b3e) drop-shadow(0 0 1px #d9e9f4)}
.pad.is-depressed .pad-visual{transform:translateY(1.5px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));filter:brightness(.87) drop-shadow(var(--shade-x,0px) var(--shade-y,0px) 2px #142a3d)}
.pad button.pressed,.pad button:active{box-shadow:none}
.pad .arrow{position:absolute;width:34%;height:34%;display:grid;place-items:center;font-style:normal;font-size:18px;color:#263f54;text-shadow:0 1px #c9dae8}
.pad .arrow.up{left:33%;top:0}.pad .arrow.down{left:33%;bottom:0}.pad .arrow.left{left:0;top:33%}.pad .arrow.right{right:0;top:33%}
@media(prefers-reduced-motion:reduce){.button-cap,.pad-visual{transition:none}}

/* Independent shoulder triggers at the outer edges, above the thumb controls. */
.shoulders{left:0;top:6%;width:100%;height:15%;border:0;border-radius:0;overflow:visible;box-shadow:none;pointer-events:none}
.shoulders button{position:absolute;top:0;left:10px;width:16%;height:100%;border:0;border-radius:8px;pointer-events:auto;font-size:clamp(18px,5vw,28px)}
.shoulders button+button{left:auto;right:10px;border-left:0}
.shoulders .button-cap{border:2px solid #21394e;border-radius:8px;box-shadow:inset 0 1px #e3eef588,0 3px 4px #11283b}
.load{left:36.5%;top:7%;width:27%;height:13%}
.pad{top:35%}
.face{right:4%;top:25%}
.system{left:43%;top:63%}
.etch{left:39%;top:28%;width:22%;height:28%;font-size:clamp(14px,4.1vw,23px)}
.etch img{width:54%;height:57%}
@media(orientation:landscape) and (max-height:600px){.etch{font-size:clamp(14px,2.6vw,22px)}}

/* Menus scroll independently while the controller stays fixed. */
.source-options{display:grid;gap:12px;margin-bottom:20px}.source-options button{padding:16px 12px;text-align:left;min-height:48px}#picker{padding:22px;overscroll-behavior:contain}#rom-list button{min-height:48px;padding:12px;touch-action:pan-y}#rom-list button[aria-current="true"]{border:1px solid #a9d2ed;background:#476c87}#picker-title{font-size:18px}dialog{overscroll-behavior:contain}dialog button{touch-action:pan-y}

/* Requested footer, logo and theme adjustments. */
.player-footer{position:relative;display:flex;align-items:center;gap:8px;min-height:32px;flex:none;padding:0 5px}.player-footer .brand{font-size:22px}.player-footer .version{font-size:7px;letter-spacing:0}.player-footer #info{flex:none}.player-footer #theme-toggle{position:absolute;left:50%;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;border:1px solid #92aabc;background:#304c63;color:#ecf6ff;font-size:21px;padding:0}.player-footer .version{margin-left:auto}.etch img{width:81%;height:85.5%;max-width:none;mix-blend-mode:normal;filter:url(#clear-logo)}.etch{justify-content:center}.shoulders button{left:16px;top:-8px}.shoulders button+button{left:auto;right:16px}
[data-theme=dark] body{background:#0c0d0f;color:#f1f3f5}[data-theme=dark] .controller{background:linear-gradient(145deg,#333538,#202225 45%,#141618);border-color:#63676b;box-shadow:inset 0 1px 2px #73777b66,inset 0 -4px 6px #08090a,0 7px #090a0b,0 8px #42464a,0 15px 28px #0008}[data-theme=dark] .controller:before{border-color:#55595d66;box-shadow:0 1px #74787b33}[data-theme=dark] .button-cap{background:linear-gradient(145deg,#55595d,#303337 55%,#24272a);color:#f1f3f5;text-shadow:0 1px 2px #000;border-color:#17191b;box-shadow:inset 0 1px #8a8e9255,0 3px 3px #090a0b}[data-theme=dark] .start .button-cap{background:transparent;box-shadow:none}[data-theme=dark] .start svg{fill:#555b60;stroke:#111416}[data-theme=dark] .cross{background:linear-gradient(145deg,#666c71,#393e43 55%,#23272b)}[data-theme=dark] .pad-center{background:linear-gradient(135deg,#22262a,#52585e)}[data-theme=dark] .pad .arrow{color:#e6ebef;text-shadow:0 1px #000}[data-theme=dark] .system>span{color:#e5e9ec}[data-theme=dark] .display{border-color:#555c62}[data-theme=dark] .brand{color:#f0f2f4;text-shadow:0 1px #000}[data-theme=dark] .version{color:#c2c9ce}[data-theme=dark] .offline-ready{color:#b5d7c9}[data-theme=dark] #theme-toggle,[data-theme=dark] dialog,[data-theme=dark] dialog button{background:#292d31;color:#f0f3f5;border-color:#71777d}
@media(orientation:landscape) and (max-height:600px){#app{grid-template-rows:1fr 32px}.player-footer{grid-column:1/3;grid-row:2}.display,.controller{grid-row:1}}

/* Keep caption space so Start and Select remain in their exact positions. */
.system>span{visibility:hidden}

/* Match the three upper buttons and the Select metal finish. */
.load{top:calc(6% - 8px);height:15%}
.start .start-face{fill:url(#start-metal);stroke:#263e52;stroke-width:2}
.start .start-bevel{fill:none;stroke:#e3eef5;stroke-width:1;opacity:.35;stroke-linejoin:round}
[data-theme=dark] .start .start-face{fill:url(#start-metal-dark);stroke:#17191b}
[data-theme=dark] .start .start-bevel{stroke:#8a8e92;opacity:.33}
[data-theme=dark] .start{filter:drop-shadow(0 3px 3px #090a0b)}
:where([data-theme=dark]) .start .button-cap{filter:drop-shadow(0 2px 1px #090a0b)}

/* iPhone edge coverage and requested control offsets. */
html:root{min-height:100lvh;background:radial-gradient(ellipse at 50% 15%,#273e54 0,#101c2b 45%,#080e16 100%);background-attachment:fixed}
body{background:transparent}
html[data-theme=dark]{background:#0c0d0f}
[data-theme=dark] body{background:transparent}
#app{position:relative;top:5px}
.pad{top:calc(35% - 8px)}