@font-face{font-family:ConsoleSerif;src:local('Georgia');font-display:swap}
:root{color-scheme:dark;--room:#2b201b;--ink:#f0dbb7;--muted:#baa38a;--gold:#dca254;--wine:#792f2d;--cream:#e7d6b4;--line:#69513d;font-family:Arial,Helvetica,sans-serif;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 30% 34%,#4c3728 0%,#2b201b 60%,#201917);color:var(--ink);min-height:100svh}button,input{font:inherit}button{color:inherit;cursor:pointer}button:disabled{opacity:.36;cursor:default}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #f3b74c;outline-offset:5px}button{ -webkit-tap-highlight-color:transparent}button,dialog{touch-action:manipulation}[hidden]{display:none!important}a{color:var(--gold)}.room{max-width:1360px;margin:auto;padding:0 44px}.masthead{display:flex;align-items:center;justify-content:space-between;padding:27px 0 24px;border-bottom:1px solid #674b37}.brand{display:flex;align-items:center;gap:15px}.brand h1{font-family:ConsoleSerif,Georgia,serif;font-size:48px;line-height:1;margin:0;letter-spacing:-3px;font-weight:900}.brand h1>span{font:12px Arial;vertical-align:top;letter-spacing:0;margin-left:5px}.brand-stripes{height:37px;width:13px;background:linear-gradient(#e4b258 0 30%,transparent 30% 35%,#c6793b 35% 65%,transparent 65% 70%,#a24932 70%);transform:skew(-13deg)}.brand-note{font-size:11px;line-height:1.6;letter-spacing:1.5px;border-left:1px solid var(--line);padding-left:17px;margin-left:10px}.masthead nav{display:flex;gap:24px}.text-button{background:none;border:0;font-size:13px;color:var(--muted);padding:8px 0}.text-button:hover{color:var(--ink)}.text-button span{margin-left:8px}.playroom{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;padding-top:27px}.station{min-width:0}.television{position:relative;width:100%;isolation:isolate}.cabinet{width:100%;height:auto;display:block;border-radius:3%;mix-blend-mode:normal}.glass{position:absolute;left:10.4%;top:13.7%;width:65.9%;height:65.4%;border-radius:4.5% / 5.5%;overflow:hidden;background:#10150f;box-shadow:inset 0 0 35px #000;isolation:isolate;outline-offset:0!important}.glass::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 28px 8px #0009;pointer-events:none;z-index:6}.glass.focused{box-shadow:0 0 40px #e5c48210}#emulator-mount{position:absolute;inset:0;display:grid;place-items:center;background:#050604}#emulator-mount iframe{width:100%;height:100%;border:0;pointer-events:none;display:block}.crt-layer{position:absolute;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(0deg,#0002 0,#0002 1px,transparent 1px,transparent 3px),radial-gradient(ellipse at center,transparent 38%,#0004);mix-blend-mode:multiply}.clean-picture .crt-layer{display:none}.screen-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:8%;background:radial-gradient(ellipse at 50% 45%,#28362b,#0d160f);text-align:center;color:#eed7a6}.channel{position:absolute;top:7%;left:7%;font:12px monospace;letter-spacing:2px;color:#b8c39c;opacity:.8}.channel span{margin-left:7px}.screen-eyebrow{font:10px monospace;letter-spacing:3px;margin-top:15px;color:#bfc79c}.screen-overlay h2{font:italic 700 clamp(24px,4vw,55px)/1.1 Georgia,serif;letter-spacing:-1px;margin:13px 0 6px;text-shadow:0 0 12px #dfd48a44}.screen-overlay p{font-size:12px;margin:0 0 20px;color:#c1c3a2}.screen-play{background:#e2c087;color:#253024;border:0;border-radius:2px;box-shadow:0 3px 0 #816f4c;padding:11px 19px;font-size:14px;font-weight:700}.screen-play span{padding-left:12px}.screen-play:active{transform:translateY(2px);box-shadow:0 1px 0 #816f4c}.screen-foot{position:absolute;bottom:8%;font:9px monospace;letter-spacing:2px;color:#b3bca27a}.pause-overlay{position:absolute;inset:0;z-index:7;background:#11180de0;display:flex;align-items:center;justify-content:center;gap:15px;flex-direction:column}.pause-overlay>span{font-size:34px;color:var(--gold)}.pause-overlay strong{font:16px monospace;letter-spacing:3px}.pause-overlay button{border:1px solid var(--gold);background:#2e3024;padding:9px 13px;border-radius:3px;font-size:13px}.dial-hit{position:absolute;left:80.7%;width:11%;height:18%;border:0;border-radius:50%;background:transparent}.dial-hit:hover{box-shadow:0 0 10px 2px #fcd38d66}.dial-hit:active{background:#0002;transform:rotate(18deg)}.dial-top{top:14.5%}.dial-bottom{top:31.5%;height:14%;width:9%;left:81.7%}
.console-deck{margin:-1% 8% 0;position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 19px 19px;background:linear-gradient(#e8d8b8,#d4bf96);border:2px solid #ecdcbb;border-bottom:9px solid #a18a67;border-radius:8px 8px 18px 18px;color:#772f2c;box-shadow:0 14px 18px #120c0a66,inset 0 -3px 0 #eee0c177}.console-logo{font:bold 24px/1 Georgia,serif;letter-spacing:-1.5px;flex-shrink:0}.console-logo span{display:block;font:bold 7px/1 Arial;letter-spacing:.75px;margin-top:7px}.cartridge-slot{align-self:stretch;display:flex;flex-direction:column;justify-content:center;width:32%;min-width:60px;text-align:center;gap:6px;overflow:hidden}.cartridge-slot>span:first-child{font:bold 10px monospace;letter-spacing:2px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.slot-groove{height:9px;border:2px solid #978468;border-bottom-color:#fae8c8;background:#251c16;border-radius:3px;box-shadow:inset 0 2px 3px #000}.hardware-controls{display:flex;gap:15px;align-items:center}.power-switch{border:0;background:none;display:flex;align-items:center;flex-direction:column;padding:0;font-size:9px;font-weight:bold;gap:5px;color:#732d29}.power-switch i{width:30px;height:17px;border:2px solid #51231e;border-radius:3px;background:linear-gradient(90deg,#56251f 50%,#9e4b39 50%);box-shadow:0 2px 0 #9a7f5c}.power-switch[aria-pressed=true] i{background:linear-gradient(90deg,#b45332 50%,#f3b461 50%);box-shadow:2px 0 8px #ed994977}.reset-switch{background:#722c2a;border:2px solid #4a201d;border-radius:3px;box-shadow:0 3px 0 #48211c;padding:5px 6px;font-size:9px;font-weight:bold;color:#efddb8}.reset-switch:active{transform:translateY(2px)}
.controller-area{display:flex;align-items:center;justify-content:center;gap:26px;padding:26px 8px 20px}.controller{width:380px;flex-shrink:0;background:linear-gradient(#e6d4b0,#c7ae84);border:2px solid #f2dfb9;border-bottom:6px solid #ac8e61;border-radius:8px 8px 22px 22px;box-shadow:0 8px 0 #392621,0 13px 20px #110c0a99;color:#f0d9ae;position:relative;padding:10px 13px 14px;user-select:none;touch-action:none}.controller::before{content:'';width:5px;height:29px;background:#201714;position:absolute;bottom:100%;left:49%;box-shadow:1px 0 0 #7e6350;border-radius:2px}.controller-top{height:22px;color:#702c28;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1px}.controller-top>span:first-child{font:bold 21px Georgia}.controller-top b{font-size:11px;letter-spacing:2px}.controller-face{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(#893c34,#662721);border:1px solid #56211f;border-radius:3px 3px 9px 9px;padding:13px 12px}.dpad{width:99px;height:99px;display:grid;grid-template-columns:repeat(3,33px);grid-template-rows:repeat(3,33px);filter:drop-shadow(0 4px 1px #351b17);touch-action:none;flex-shrink:0}.dpad button,.dpad-center{border:0;background:#2c2924;color:#867b64;font-size:22px;box-shadow:inset 0 2px 0 #555048;padding:0;border-radius:2px;touch-action:none}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad-center{grid-area:2/2;background:radial-gradient(circle,#302d26 20%,#22211d 23%,#3d382e 30%,#2c2924 33%);box-shadow:none}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2;box-shadow:inset 0 -2px 0 #171713}.system-buttons{display:flex;align-items:center;gap:9px;padding-top:17px}.system-buttons>div{display:flex;align-items:center;flex-direction:column;gap:8px}.system-buttons span{font-size:8px;letter-spacing:.5px}.system-buttons button{width:34px;height:14px;background:#2b2824;box-shadow:0 4px 0 #411d18,inset 0 2px 0 #555047;border:1px solid #1b1a17;border-radius:10px;transform:rotate(-12deg);padding:0;touch-action:none}.action-buttons{display:flex;gap:12px;transform:rotate(-9deg)}.action-buttons>div{display:flex;flex-direction:column;align-items:center;gap:9px}.action-buttons button{width:44px;height:44px;border:3px solid #dbba81;border-radius:50%;background:radial-gradient(circle at 35% 25%,#eece91,#bd9255);color:#773629;box-shadow:0 4px 0 #411d18,inset 0 1px 0 #fff1ca;font:bold 21px Georgia;touch-action:none}.action-buttons span{font:9px monospace;opacity:.7}.controller [data-input].pressed{filter:brightness(1.35);box-shadow:inset 0 3px 5px #100b0888;translate:0 3px;color:#ffd17c}.connection{max-width:154px;font-size:11px;line-height:1.5;color:var(--muted)}.connection-dot{display:inline-block;width:6px;height:6px;background:#d9a14d;border-radius:50%;box-shadow:0 0 5px #d9a14d77;margin-right:5px}.connection-keys{display:block;margin-top:10px;font:9px/1.8 monospace;color:#a98c70;letter-spacing:.3px}.transport{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;padding-top:10px;border-top:1px solid #5c4230}.transport button{border:0;border-radius:3px;background:none;padding:8px 9px;font-size:12px;color:#d1b998}.transport button:hover:not(:disabled){background:#72503355;color:#f9db9a}.transport-divider{height:16px;width:1px;background:var(--line);margin:0 3px}.status{text-align:center;color:#bca085;font-size:12px;line-height:1.5;min-height:18px;margin:8px 10px 14px}.library{padding:4px 0 0 22px;border-left:1px solid #674b37}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:2px;color:var(--gold)}.library-heading h2{font:italic 26px/1.2 Georgia,serif;margin:9px 0 8px;letter-spacing:-.7px}.library-heading>span:last-child{font:11px monospace;color:var(--muted)}.cartridge-shelf{display:flex;flex-direction:column;gap:18px;margin-top:27px}.cartridge{width:100%;position:relative;display:block;text-align:left;padding:13px 12px 17px;background:linear-gradient(100deg,#604b39,#755c43 5%,#4d3b2d 95%);border:1px solid #897055;border-bottom:6px solid #30231c;border-radius:5px 5px 9px 9px;box-shadow:0 7px 12px #130c0977, inset 0 2px 0 #a0825d55;transition:translate .18s,box-shadow .18s;min-height:145px}.cartridge::before{content:'';position:absolute;left:15px;right:15px;top:5px;height:4px;border-top:1px solid #362820;border-bottom:1px solid #aa8b6044}.cartridge:hover{translate:0 -4px;box-shadow:0 11px 18px #130c0999}.cartridge[aria-pressed=true]{outline:2px solid #dfa758;outline-offset:4px}.cartridge-label{padding:12px 12px 10px;display:flex;flex-direction:column;min-height:112px;border-radius:2px;background:var(--cart-color);color:var(--label-color);box-shadow:inset 0 0 14px #56352326;position:relative;overflow:hidden}.cartridge-label::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,#60321407 2px,#60321407 3px);pointer-events:none}.cart-series{display:flex;justify-content:space-between;font:8px monospace;letter-spacing:1.3px;border-bottom:1px solid #3334;padding-bottom:5px;position:relative;z-index:1}.cart-title{font:italic bold 30px/1 Georgia;margin-top:9px;position:relative;z-index:1;letter-spacing:-1px}.cart-subtitle{font:9px/1.3 monospace;letter-spacing:.5px;margin-top:6px;position:relative;z-index:1;max-width:75%}.cart-art{position:absolute;right:0;bottom:-5%;width:51%;height:74%;object-fit:cover;image-rendering:pixelated;opacity:.18;mix-blend-mode:multiply}.cart-bottom{display:flex;justify-content:space-between;gap:10px;font:8px monospace;letter-spacing:1px;color:#ddc5a3;margin-top:11px;padding:0 2px}.cart-bottom span:last-child{color:#f2bf72}.sideload{width:100%;padding:18px 10px;margin-top:20px;background:#2b211acc;border:1px dashed #8b6c4e;border-radius:5px;display:grid;grid-template-columns:30px 1fr;gap:5px;text-align:left;color:#d7bd99}.sideload>span{grid-row:span 2;font-size:26px;align-self:center;font-weight:normal}.sideload b{font-size:13px;font-weight:normal}.sideload small{font:10px monospace;color:#ab8e6e}.sideload:hover{background:#533c27}.game-notes{margin-top:26px;padding-top:20px;border-top:1px solid #674b37}.game-notes h3{font:italic 24px Georgia;margin:9px 0}.game-notes p{font-size:13px;line-height:1.6;color:#c6ae91;margin:9px 0}.game-notes .game-controls{font-size:11px;line-height:1.8;color:#b3997c}.privacy-note{font:10px/1.8 monospace;color:#9e846b;margin:23px 0}footer{padding:18px 0 22px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #604431;font:9px monospace;letter-spacing:1px;color:#a08368}footer .text-button{font:10px monospace;letter-spacing:0}.footer-dot{font-size:7px;color:#ca8f48;margin:0 8px}dialog{background:#e8d7b8;color:#403025;border:1px solid #f8e6c6;border-bottom:7px solid #a98757;box-shadow:0 25px 80px #000a;border-radius:7px;padding:35px;max-width:600px;width:calc(100% - 36px);max-height:85svh}dialog::backdrop{background:#150f0bc9;backdrop-filter:blur(5px)}dialog h2{font:italic 36px Georgia;margin:13px 0 20px;letter-spacing:-1px}dialog h3{font:italic 24px Georgia;margin-bottom:10px}dialog p{font-size:15px;line-height:1.6}dialog a{color:#793a26}dialog .eyebrow{color:#90542e}.dialog-close{position:absolute;right:13px;top:7px;border:0;background:none;font-size:30px;color:#65432e}.key-guide{display:grid;grid-template-columns:120px 1fr;font-size:13px;gap:13px;border-top:1px solid #bca47f;border-bottom:1px solid #bca47f;padding:20px 0}.key-guide dt{font-weight:bold}.key-guide dd{margin:0;line-height:1.5}.dragging .television{outline:3px dashed #e7b564;outline-offset:4px}.mobile-controller{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:center;padding:13px 12px max(14px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#251b15 25%);pointer-events:none}.mobile-controller .controller{pointer-events:auto;width:min(100%,420px)}.mobile-controller .controller::before{display:none}.mobile-controller .controller-face{padding:10px 14px}.mobile-controller .dpad{width:126px;height:126px;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px)}.mobile-controller .action-buttons button{width:53px;height:53px}.mobile-controller .system-buttons button{height:28px;width:35px}.mobile-controller .controller-top{height:15px}.touch-visible{padding-bottom:225px}.touch-visible #desktop-controller{opacity:.5}body:has(dialog[open]) .mobile-controller{visibility:hidden}
@media(min-width:1450px){.room{padding-top:15px}.playroom{padding-top:34px}}
@media(max-width:1100px){.room{padding:0 25px}.playroom{grid-template-columns:minmax(0,1fr) 225px;gap:20px}.library{padding-left:18px}.controller-area{gap:15px}.controller{width:340px}.controller-face{padding:11px 8px;gap:7px}.action-buttons{gap:8px}.action-buttons button{width:39px;height:39px}.system-buttons{gap:6px}.system-buttons button{width:29px}.connection-keys{display:none}.connection{max-width:100px;font-size:10px}.console-deck{margin-inline:7%;padding:12px 12px 15px}.console-logo{font-size:21px}.console-logo span{font-size:6px}.hardware-controls{gap:10px}.cartridge-slot{width:25%}.screen-eyebrow{letter-spacing:1.5px}.screen-foot{font-size:8px;letter-spacing:1px}.screen-overlay p{margin-bottom:14px}.screen-play{padding:9px 15px;font-size:12px}}
@media(max-width:820px){.room{padding:0 18px}.masthead{padding:19px 0}.brand h1{font-size:40px}.brand-note{display:none}.masthead nav{gap:17px}.text-button{font-size:12px}.playroom{grid-template-columns:1fr;padding-top:19px;gap:18px}.television{max-width:750px;margin:auto}.console-deck{max-width:600px;margin-inline:auto;width:85%;padding:13px 18px}.screen-overlay h2{font-size:clamp(33px,7vw,60px)}.screen-eyebrow{font-size:12px}.screen-overlay p{font-size:14px}.screen-play{font-size:14px}.screen-foot{font-size:10px}.controller-area{padding-top:24px}.controller{width:380px}.controller-face{padding:13px}.connection{max-width:130px;font-size:11px}.connection-keys{display:block}.library{border-left:0;border-top:1px solid #674b37;padding:22px 0 0;display:grid;grid-template-columns:1fr auto;gap:12px}.library-heading h2{font-size:26px}.library-heading>span:last-child{display:none}.cartridge-shelf{grid-column:1/-1;grid-row:2;flex-direction:row;overflow:auto;padding:6px 6px 14px;margin:0 -6px;gap:19px}.cartridge{width:210px;flex:0 0 210px}.sideload{margin:0;align-self:center;width:176px;padding:10px;font-size:12px}.game-notes{grid-column:1/-1;margin:0;padding:0 0 8px;border:0}.game-notes .eyebrow,.game-notes h3,.game-notes>p:not(.game-controls){display:none}.game-controls{margin:0!important;font-size:12px!important}.privacy-note{display:none}footer{margin-top:5px}footer>span:last-child{display:none}.status{margin-bottom:0}.transport{padding-top:6px}}
@media(max-width:480px){.room{padding:0 12px}.masthead{padding:16px 3px}.brand{gap:8px}.brand h1{font-size:36px}.brand-stripes{width:9px;height:28px}.masthead nav{gap:12px}.text-button{font-size:11px}.television{width:calc(100% + 16px);margin-left:-8px}.glass{border-radius:5%}.screen-overlay h2{font-size:29px;margin:9px 0 5px}.screen-eyebrow{font-size:8px;letter-spacing:1px;margin-top:12px}.channel{font-size:8px;top:8%}.screen-overlay p{font-size:10px;margin:0 0 12px}.screen-play{font-size:11px;padding:8px 12px}.screen-foot{font-size:6px;bottom:6%}.console-logo{font-size:19px}.console-logo span{font-size:5px;letter-spacing:.4px}.console-deck{width:88%;padding:10px 10px 13px;gap:8px}.cartridge-slot>span:first-child{font-size:8px;letter-spacing:1px}.hardware-controls{gap:7px}.reset-switch,.power-switch{font-size:8px}.controller-area{padding:24px 4px 20px}.controller{width:100%;max-width:355px}.controller-face{padding:10px 12px}.connection{display:none}.transport{gap:0}.transport button{font-size:11px;padding:8px}.transport-divider{display:none}.library-heading h2{font-size:23px}.sideload{width:147px;padding:10px 7px;grid-template-columns:22px 1fr}.sideload b{font-size:12px}.sideload small{font-size:9px}.cartridge{width:192px;flex-basis:192px}.cart-title{font-size:28px}footer{font-size:8px;letter-spacing:.4px}footer .text-button{font-size:9px}.mobile-controller .controller{width:100%;max-width:410px}.mobile-controller .controller-face{padding:10px;gap:6px}.mobile-controller .system-buttons{gap:6px}.mobile-controller .action-buttons{gap:9px}.mobile-controller .action-buttons button{width:48px;height:48px}.mobile-controller .dpad{grid-template-columns:repeat(3,39px);grid-template-rows:repeat(3,39px);width:117px;height:117px}dialog{padding:28px 23px}.key-guide{grid-template-columns:80px 1fr;gap:11px}.touch-visible #desktop-controller{display:none}.touch-visible .controller-area{padding:7px}}
@media(pointer:coarse){.touch-visible #desktop-controller{display:none}.touch-visible .controller-area{padding:7px}.transport button{min-height:38px}}
@media(max-height:520px) and (orientation:landscape){.touch-visible{padding-bottom:0}.touch-visible .masthead,.touch-visible .library,.touch-visible footer,.touch-visible .console-deck,.touch-visible .controller-area,.touch-visible .transport,.touch-visible .status{display:none}.touch-visible .playroom{display:block;padding:0}.touch-visible .television{width:min(76vw,690px);height:100svh;margin:auto}.touch-visible .cabinet{display:none}.touch-visible .glass{top:3%;left:12%;width:76%;height:94%;border-radius:12px}.touch-visible .dial-hit{display:none}.mobile-controller{background:none;align-items:flex-end;padding:8px;inset:0}.mobile-controller .controller{max-width:none;width:100%;height:100%;background:none;border:0;box-shadow:none;padding:0}.mobile-controller .controller-top,.mobile-controller .system-buttons span,.mobile-controller .action-buttons span{display:none}.mobile-controller .controller-face{background:none;border:0;height:100%;align-items:flex-end;padding:0}.mobile-controller .system-buttons{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);opacity:.65}.mobile-controller .action-buttons,.mobile-controller .dpad{opacity:.8}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.battery-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}.battery-actions button{background:#742f29;color:#f7dfae;border:1px solid #431b18;border-radius:4px;padding:12px 16px;box-shadow:0 3px 0 #a6865e;font-size:14px}.battery-actions button:active{translate:0 2px;box-shadow:0 1px 0 #a6865e}.battery-detail{font-size:13px!important;color:#725b42}#battery-status{padding:12px;background:#d5be96;border-left:3px solid #92633c;font-size:14px}

/* Molded controller: warm overhead light, a recessed face and a shaded lower shell.
   Only the tabletop instance tilts; its top-center cord attachment stays fixed. */
.controller{
  background:url('assets/controller-grain.svg'),linear-gradient(155deg,#eddfc0 3%,#d8c59f 57%,#bda77f);
  background-size:128px 128px,100% 100%;
  border:1px solid #a48b64;
  border-top-color:#f4e7cb;
  border-bottom:3px solid #b69c72;
  border-radius:11px 11px 18px 18px;
  box-shadow:inset 1px 1px 2px #fff4d880,inset -2px -2px 3px #79614040,
    0 2px 0 #8d7554,0 4px 0 #66503b,0 8px 0 #b59b73,
    0 11px 0 #907551,0 13px 0 #594534,0 17px 8px #140e0b66,0 26px 23px #130d0966;
  color:#e7d7b8
}
#desktop-controller{
  transform:perspective(1100px) rotateX(34deg);
  transform-origin:50% 0
}
.controller::before{
  width:5px;
  background:#29221c;
  box-shadow:none;
  border-radius:2px
}
.controller-top{
  color:#6f3831;
  text-shadow:0 1px 0 #fff0d14d
}
.controller-top b{font-weight:600;letter-spacing:2.3px}
.controller-top>span:first-child{font:600 15px Arial,sans-serif}
.controller-face{
  background:url('assets/controller-grain.svg'),linear-gradient(150deg,#905345,#783b32 52%,#653028);
  background-size:128px 128px,100% 100%;
  border:1px solid #63342d;
  border-top-color:#69312b;
  border-bottom-color:#ad7862;
  border-radius:3px 3px 8px 8px;
  box-shadow:inset 0 2px 4px #3b1f1966,inset 1px 0 2px #44231c33,0 1px 0 #f0d5ae80
}

/* A single cross underlies the five grid cells; the arms have no separate bevels. */
.dpad{
  position:relative;
  isolation:isolate;
  filter:drop-shadow(0 1px 0 #161913) drop-shadow(0 3px 0 #181a16) drop-shadow(1px 5px 2px #30191280)
}
.dpad::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(145deg,#55554a,#35382f 43%,#252921 90%);
  box-shadow:inset 0 1px 1px #b9b09a80;
  clip-path:polygon(33.333% 0,66.667% 0,66.667% 33.333%,100% 33.333%,100% 66.667%,66.667% 66.667%,66.667% 100%,33.333% 100%,33.333% 66.667%,0 66.667%,0 33.333%,33.333% 33.333%)
}
.dpad button,.dpad-center,.dpad .down{
  background:transparent;
  border:0;
  border-radius:1px;
  box-shadow:none;
  color:#bbb39b;
  font-size:19px;
  text-shadow:none
}
.dpad-center{
  background:radial-gradient(circle at 48% 46%,#55564a 0 13%,#272a22 16% 22%,#77705c66 24%,transparent 27%)
}
.system-buttons{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none
}
.system-buttons span{color:#e0c5a5;font-size:8px;letter-spacing:.45px}
.system-buttons button{
  background:linear-gradient(#646254,#393c32 40%,#2b2e26);
  border:1px solid #242620;
  border-top-color:#8a826b;
  box-shadow:0 3px 0 #1e211b,0 4px 0 2px #512920,0 6px 4px #381e1966;
  transform:none
}
.action-buttons{transform:none}
.action-buttons button{
  background:url('assets/controller-grain.svg'),radial-gradient(ellipse at 32% 20%,#f3e6c6,#decca5 58%,#c4aa7c);
  background-size:128px 128px,100% 100%;
  border:1px solid #c5ae86;
  border-top-color:#eee2c7;
  box-shadow:inset 0 1px 2px #fff5d8,0 3px 0 #ad9062,0 5px 0 #8a6f4b,
    0 6px 0 2px #512a23,1px 8px 5px #351a1677;
  color:#704137;
  font:600 18px/1 Arial,sans-serif;
  text-shadow:0 1px 0 #fff0cd99
}
.action-buttons span{color:#dfbd9b;opacity:1;font-size:8px;letter-spacing:.6px}

.controller [data-input]{transition:translate .07s ease,background-color .07s ease}
.controller [data-input].pressed,.controller [data-input]:active{
  filter:none;
  translate:0 3px;
  box-shadow:none;
  color:#f1d9a7
}
.dpad button.pressed,.dpad button:active{background:#414338}
.system-buttons button.pressed,.system-buttons button:active{background:#252720}
.controller .action-buttons button.pressed,.controller .action-buttons button:active{background:#c9b893;color:#623c32}
.controller .action-buttons button.pressed,.controller .action-buttons button:active{
  box-shadow:inset 0 1px 3px #9a805e66,0 1px 0 #8a6f4b,0 2px 0 2px #512a23
}
.controller .system-buttons button.pressed,.controller .system-buttons button:active{
  box-shadow:inset 0 1px 2px #11150f,0 1px 0 2px #512920
}

/* Keep the larger touch hit targets and the existing shell-free landscape layout. */
@media(max-height:520px) and (orientation:landscape){
  .mobile-controller .controller,
  .mobile-controller .controller-face{background:none;border:0;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  .controller [data-input]{transition:none}
}
@media(forced-colors:active){
  #desktop-controller{transform:none}
  .controller,.controller-face,
  .system-buttons button,.action-buttons button{
    background:Canvas;color:ButtonText;border:1px solid ButtonText;box-shadow:none
  }
  .dpad{filter:none}
  .dpad::before{background:CanvasText}
  .dpad button,.dpad-center{color:Canvas;forced-color-adjust:none}
  .controller [data-input].pressed,.controller [data-input]:active{
    background:Highlight;color:HighlightText
  }
}


/* Hybrid hardware: the shell supplies the material; HTML supplies the moving parts. */
.console-deck{
  width:91%;max-width:none;aspect-ratio:4.15;
  margin:-1.8% auto 0;padding:0;display:block;position:relative;isolation:isolate;
  border:0;border-radius:0;background:none;box-shadow:none;
  container-type:inline-size;color:#6d302a
}
.console-shell{
  position:absolute;left:0;top:-20%;width:100%;height:auto;display:block;
  pointer-events:none;user-select:none;
  /* Trim the empty studio backdrop without altering the source artwork. */
  clip-path:polygon(12% 14%,88% 14%,96% 32%,97.4% 39%,97.5% 68%,96.4% 82%,93% 84%,93% 88%,87% 88%,87% 84%,13% 84%,13% 88%,7% 88%,7% 84%,3.6% 82%,2.5% 68%,2.6% 39%,4% 32%);
  filter:drop-shadow(0 9px 8px #120c0866)
}
.console-deck .cartridge-slot{
  position:absolute;left:35%;top:34%;width:30%;height:14%;min-width:0;
  display:flex;justify-content:center;align-items:center;padding:0;gap:0;
  border:0;border-radius:0;background:none;box-shadow:none
}
.console-deck .cartridge-slot>span:first-child{
  max-width:100%;font:600 clamp(6px,1.28cqw,11px)/1.2 monospace;
  color:#6d3a2d;letter-spacing:.14em;text-shadow:none
}
.console-deck .hardware-controls{
  position:absolute;left:72.5%;top:37%;width:17%;height:27%;
  display:flex;justify-content:center;align-items:center;gap:13%;
  padding:0;border:0;background:none;box-shadow:none
}
.console-deck .power-switch{
  position:relative;width:34%;height:100%;min-height:0;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10%;
  border:0;padding:0;background:none;color:#eedcbb;
  font:600 clamp(5px,1.05cqw,9px)/1 Arial,sans-serif;letter-spacing:.08em;text-shadow:none
}
.console-deck .power-switch i{
  position:relative;display:block;flex-shrink:0;width:80%;height:43%;
  border:1px solid #211b16;border-radius:2px;
  background:#322b23;box-shadow:0 1px 0 #c3a38266
}
.console-deck .power-switch i::before{
  content:'';position:absolute;inset:2px 48% 2px 2px;
  background:linear-gradient(#b4a27e,#7a6d55);border-radius:1px;
  box-shadow:1px 0 2px #0008;transition:translate .16s ease
}
.console-deck .power-switch i::after{
  content:'';position:absolute;left:-40%;top:32%;width:15%;aspect-ratio:1;
  border-radius:50%;background:#46211b;border:1px solid #221611;
  transition:background .2s,box-shadow .2s
}
.console-deck .power-switch[aria-pressed=true] i{background:#322b23;box-shadow:0 1px 0 #c3a38266}
.console-deck .power-switch[aria-pressed=true] i::before{translate:92% 0}
.console-deck .power-switch[aria-pressed=true] i::after{background:#eea358;box-shadow:0 0 5px 2px #eaa25166;border-color:#c97c43}
.console-deck .reset-switch{
  width:35%;height:54%;padding:0;flex-shrink:0;
  border:1px solid #bb9770;border-top-color:#e6c7a1;border-radius:2px;
  background:#c9b18c;color:#593329;
  font:600 clamp(5px,1.05cqw,9px)/1 Arial,sans-serif;letter-spacing:.03em;
  box-shadow:0 2px 0 #331714;text-shadow:none
}
.console-deck .reset-switch:active{transform:none;translate:0 2px;box-shadow:none}
.console-deck .reset-switch:disabled{opacity:.55}
.console-deck button:focus-visible{outline-offset:3px}
.controller-area{position:relative;padding-top:46px;padding-bottom:25px}
.controller-area .controller::before{display:none}
.controller-linked #desktop-controller::before{
  display:block;height:13px;width:11px;left:calc(50% - 5.5px);
  background:repeating-linear-gradient(0deg,transparent 0 2px,#12160f99 2px 3px),
    linear-gradient(90deg,#23271f,#797460 35%,#3c4033 62%,#24281f);
  border:1px solid #20241c;border-radius:4px 4px 2px 2px;
  box-shadow:1px 1px 2px #160e0999;pointer-events:none
}
/* The port is at (50%, 76%) in the shell image. This overlay shares its scale;
   its lower end overlaps the relief on the controller, 46px below the deck.
   The cable starts at the plug's y=72 (7.2cqw * 72/120), independent of gap height. */
.controller-link{
  position:absolute;z-index:2;left:46.4%;top:77%;width:7.2%;height:calc(23% + 47px);
  pointer-events:none;opacity:0;transition:opacity .18s ease
}
.controller-linked .controller-link{opacity:1}
.controller-plug{position:absolute;inset:0 0 auto;width:100%;height:auto;overflow:visible;filter:drop-shadow(1px 3px 2px #100d09a6)}
.controller-cable{position:absolute;left:50%;top:4.32cqw;width:70px;height:calc(100% - 4.32cqw - 9px);transform:translateX(-50%);overflow:visible}
.controller-cable path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cable-shadow{stroke:#100d09;stroke-opacity:.5;stroke-width:7px;transform:translate(3px,3px);filter:blur(1.5px)}
.cable-edge{stroke:#191d16;stroke-width:6.5px}
.cable-rubber{stroke:#45483a;stroke-width:4.5px}
.cable-highlight{stroke:#b9ad8c;stroke-opacity:.33;stroke-width:1px;transform:translateX(-1px)}
.controller-area .connection{position:absolute;left:calc(50% + 224px);top:50%;transform:translateY(-50%)}

/* The TV retains its photographed dial collars. Only the inset grip turns. */
.dial-hit{
  /* Socket centers measured in the 1536 x 1024 cabinet. Translate the hit area
     around its center; both faces cover 85% of their photographed ring width. */
  --dial-x:86.532%;--dial-y:21.463%;--face-inset:10.47%;
  z-index:3;left:var(--dial-x);top:var(--dial-y);width:10.7%;height:auto;aspect-ratio:1;
  translate:-50% -50%;
  padding:0;border:0;background:transparent;overflow:visible
}
.dial-bottom{
  --dial-x:86.460%;--dial-y:37.478%;--face-inset:12.62%;
  width:9%;height:auto
}
.dial-face{
  position:absolute;inset:var(--face-inset);border-radius:50%;pointer-events:none;
  border:1px solid #4f3a25;
  background:radial-gradient(ellipse at 34% 25%,#d1b68a,#9e7f53 46%,#715133 85%);
  box-shadow:inset 0 1px 2px #ebd6ac99,0 1px 3px #1a120bcc
}
.dial-grip{
  position:absolute;left:41%;top:-5%;width:18%;height:110%;border-radius:2px;
  border:1px solid #57432c;border-left-color:#ddc8a2;
  background:linear-gradient(90deg,#dbc69f,#a58e66 65%,#725b3f);
  box-shadow:2px 2px 3px #1b120b77;
  transform:rotate(34deg);transition:transform .23s cubic-bezier(.2,.7,.2,1)
}
/* A mark on one end distinguishes opposite positions of the same rotating grip. */
.dial-grip::after{
  content:'';position:absolute;top:8%;left:20%;right:20%;height:5%;
  border-radius:1px;background:#4f3c28;box-shadow:0 1px 0 #e3cca37a
}
.dial-top .dial-grip{transform:rotate(var(--picture-angle,34deg))}
.dial-hit.dial-bottom .dial-grip{transform:rotate(calc(var(--sound-angle,0deg) - 120deg))}
.dial-hit:active{background:transparent;transform:none}
.dial-hit:hover{box-shadow:none}
.dial-hit:hover .dial-face{filter:brightness(1.08)}
.dial-caption{
  position:absolute;left:50%;top:105%;transform:translateX(-50%);
  padding:4px 6px;border-radius:2px;white-space:nowrap;
  background:#30231b;color:#f2d8b0;font:8px/1.2 monospace;letter-spacing:.12em;
  opacity:0;pointer-events:none;transition:opacity .15s
}
.dial-hit:hover .dial-caption,.dial-hit:focus-visible .dial-caption{opacity:1}
@media(prefers-reduced-motion:reduce){.dial-grip,.dial-caption{transition:none}}

@media(min-width:821px) and (max-width:1100px){.controller-area .connection{left:calc(50% + 196px);max-width:78px}}
@media(max-width:820px){.console-deck{width:91%;max-width:680px}}
@media(max-width:650px){.controller-area .connection{display:none}}
@media(max-width:480px){
  .console-deck{width:100%;margin-top:-1.8%}
  /* Extend touch targets into the surrounding fascia without enlarging the artwork. */
  .console-deck .hardware-controls button::after{content:'';position:absolute;inset:-9px -3px}
  .console-deck .reset-switch{position:relative}
  .controller-area{padding-top:46px;padding-bottom:20px}
  #desktop-controller{width:calc(100% - 22px)}
}
@media(pointer:coarse){.touch-visible .controller-area{padding:7px}}
@media(max-width:480px),(pointer:coarse){.touch-visible .controller-cable{display:none}}
@media(max-width:380px){
  .brand h1{font-size:30px}.masthead nav{gap:8px}.masthead .text-button{font-size:10px}
  #desktop-controller{width:calc(100% - 10px)}
  .controller{padding:8px 9px 10px}
  .controller-face{padding:10px 8px;gap:5px}
  .dpad{width:81px;height:81px;grid-template-columns:repeat(3,27px);grid-template-rows:repeat(3,27px)}
  .system-buttons{gap:5px}.system-buttons button{width:25px}
  .system-buttons span{font-size:7px;letter-spacing:0}
  .action-buttons{gap:8px}.action-buttons button{width:33px;height:33px;font-size:16px}
  .mobile-controller .controller-face{padding:10px 6px;gap:5px}
  .mobile-controller .dpad{width:90px;height:90px;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px)}
  .mobile-controller .action-buttons{gap:6px}.mobile-controller .action-buttons button{width:39px;height:39px}
  .mobile-controller .system-buttons{gap:4px}.mobile-controller .system-buttons button{width:24px;height:26px}
  .library{gap:9px}.library-heading h2{font-size:21px}.sideload{width:132px}
}
@media(max-height:520px) and (orientation:landscape){.touch-visible .console-deck{display:none}}
@media(forced-colors:active){
  .console-shell,.dial-face{display:none}
  .console-deck{border:1px solid CanvasText;background:Canvas}
  .console-deck .cartridge-slot>span:first-child{color:CanvasText}
  .console-deck .hardware-controls{width:25%;left:71%}
  .console-deck .power-switch,.console-deck .reset-switch,.dial-hit{
    background:ButtonFace;color:ButtonText;border:1px solid ButtonText
  }
  .dial-caption{opacity:1;background:Canvas;color:CanvasText}
}

.compatibility-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0;font-size:12px}.compatibility-controls select{max-width:100%;font:inherit;color:#302d25;background:#efe6cf;border:1px solid #9b8864;border-radius:5px;padding:7px}.compatibility-controls span{font-size:11px}#frame-tools:not([hidden]){display:flex;flex-wrap:wrap;gap:6px}

#frame-tools button{border:1px solid var(--line);background:#352a21;color:var(--gold);padding:7px 10px;border-radius:5px;font:inherit}#frame-tools button:hover{background:#4c3827}.compatibility-controls select:focus-visible{outline:3px solid #f3b74c;outline-offset:3px}

.input-diagnostics{margin:10px 0;border:1px solid var(--line);border-radius:5px;padding:10px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}.input-diagnostics summary{cursor:pointer;color:var(--gold)}.input-diagnostics p{margin:8px 0;line-height:1.5}