:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#281743;color:#f7f1ff}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body{background:radial-gradient(ellipse at 45% 45%,#6442a3,#281743 74%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid #ffe782;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}.app{height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);display:flex;flex-direction:column;align-items:center;justify-content:center}.toolbar{display:flex;align-items:center;justify-content:space-between;width:min(100%,460px);padding:7px 18px;height:52px;flex-shrink:0}.wordmark{line-height:1.15;letter-spacing:.14em}.wordmark span{font-size:9px;font-weight:650;color:#c9bbdf;display:block}.wordmark b{font-size:16px}.tools{display:flex;gap:5px}.tools button{width:38px;height:38px;border:1px solid #ffffff1b;border-radius:12px;background:#ffffff09;font-size:22px}.tools button.on{color:#ffe482;background:#ffffff19}.device{position:relative;flex-shrink:0;width:min(100vw,calc((100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom))* .5625),460px);aspect-ratio:9/16;background:url('assets/handheld.jpg') center/100% 100% no-repeat;box-shadow:0 16px 64px #180b3840;border-radius:14px 14px 32px 32px;overflow:hidden;touch-action:none}.screen{position:absolute;left:21.3%;top:12.05%;width:56.7%;height:29.05%;background:#111;overflow:hidden;box-shadow:inset 0 0 8px #000;isolation:isolate}#display{width:100%;height:100%;display:block;object-fit:fill;image-rendering:auto}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#153934;text-align:center;background:linear-gradient(#fff5d2b5,#d3f1dc88),url('assets/forest-lossless.webp') center/cover}.cover-label{font-size:clamp(5px,1.6vw,8px);letter-spacing:.16em;font-weight:900}.cover h1{font-size:clamp(18px,5vw,27px);line-height:.92;letter-spacing:-.05em;font-weight:950;margin:6% 0 0;color:#e04338;text-shadow:1px 1px #fff5d2,2px 2px #274a4a}.cover h1 span{font-size:.72em;letter-spacing:-.055em}.cover h1 em{color:#f6b638;font-style:normal}.cover-mario{height:36%;max-width:50%;object-fit:contain;filter:drop-shadow(2px 3px 0 #173b3420);margin:3% 0}.play{font-weight:850;border-radius:20px;background:#e2483f;color:#fff8de;font-size:clamp(10px,2.8vw,15px);padding:4% 10%;box-shadow:0 3px 0 #a32b2a}.cover-sub{font-size:clamp(4px,1.4vw,7px);font-weight:650;margin-top:6%;max-width:90%;letter-spacing:.01em}.power-led{position:absolute;left:9.3%;top:20.35%;width:2.1%;aspect-ratio:1;border-radius:50%;background:#dc3a4e;box-shadow:0 0 5px #ff5268,0 0 11px #ff52686e;opacity:.5}.power-led.active{opacity:1}.physical{position:absolute;background:transparent;border-radius:50%;touch-action:none}.physical.pressed{background:#c9adff22;box-shadow:inset 0 0 15px #08001899,0 0 10px #ddc6ff44}.a-button{left:78%;top:59.9%;width:16.2%;height:9%}.b-button{left:60.5%;top:63.2%;width:16.2%;height:9%}.select-button{left:35.6%;top:78.9%;width:13.7%;height:5.1%;border-radius:40%}.start-button{left:50.5%;top:78.9%;width:13.7%;height:5.1%;border-radius:40%}.dpad{position:absolute;left:8.1%;top:58.6%;width:26%;height:14.7%;touch-action:none}.dpad button{position:absolute;background:transparent;touch-action:none;border-radius:7px}.dpad button.pressed{background:#c8afff26;box-shadow:inset 0 0 8px #0008}.up{left:31%;top:0;width:38%;height:40%}.down{left:31%;bottom:0;width:38%;height:40%}.left{left:0;top:31%;width:40%;height:38%}.right{right:0;top:31%;width:40%;height:38%}.dpad-center{position:absolute;left:38%;top:38%;width:24%;height:24%;border-radius:50%;pointer-events:none}.run-hint,.jump-hint{position:absolute;font-size:7px;font-weight:800;letter-spacing:.1em;color:#b39cd370;transform:rotate(-18deg);pointer-events:none}.run-hint{top:72%;left:63%}.jump-hint{top:68.8%;left:83%}.edition-label{position:absolute;bottom:3.4%;width:100%;text-align:center;font-size:8px;letter-spacing:.14em;color:#bba5d9a0}.edition-label span{margin:0 4px}.statusbar{height:34px;flex-shrink:0;width:min(100%,460px);padding:5px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:9px;color:#b6a5ce}.statusbar i{display:inline-block;width:5px;height:5px;background:#d6a85a;border-radius:50%;margin-right:4px}.statusbar .ready i{background:#79dba4}.statusbar button{font-size:10px;color:#e9daff;background:transparent;padding:8px 0}.pause-badge{position:absolute;inset:0;background:#172a29b8;backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;flex-direction:column;font-weight:850;letter-spacing:.12em;color:#fff2c9;font-size:18px}.pause-badge span{font-size:8px;letter-spacing:.02em;margin-top:10px}.device.expanded .screen{left:5%;width:90%;top:7.4%;height:45%;box-shadow:0 0 0 4px #15171a,0 5px 12px #0008;border-radius:5px}.device.expanded .power-led{display:none}.device.expanded .cover h1{font-size:37px}.device.expanded .cover-label{font-size:10px}.device.expanded .play{font-size:18px}.device.expanded .cover-sub{font-size:9px}.device.expanded .cover-mario{height:38%}.toast{position:fixed;left:50%;bottom:calc(35px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;background:#fff2d6;color:#40313d;box-shadow:0 5px 30px #0005;border-radius:30px;padding:11px 20px;font-size:12px;max-width:90%;text-align:center;pointer-events:none;transition:.2s;z-index:20}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{color:#e8e1ef;background:#241b33;border:1px solid #796587;border-radius:24px;width:min(92%,440px);max-height:84dvh;padding:23px;box-shadow:0 20px 90px #0008;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}dialog::backdrop{background:#120c25bd;backdrop-filter:blur(8px)}.panel-head{display:flex;gap:12px;align-items:center;justify-content:space-between}.panel-head small{font-size:8px;letter-spacing:.16em;color:#b5a3c9}.panel-head h2{margin:6px 0;font-size:21px;letter-spacing:-.04em}.close{background:#ffffff10;width:34px;height:34px;border-radius:50%;font-size:26px;flex-shrink:0}.panel-tabs{display:flex;border-radius:13px;background:#100b1b;padding:4px;margin:20px 0 16px}.panel-tabs button{flex:1;background:transparent;border-radius:10px;font-size:12px;padding:10px}.panel-tabs button.active{background:#66508b;color:white}.muted{font-size:12px;color:#bfb0cf;line-height:1.6}.setting{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid #ffffff12}.setting strong{font-size:12px;display:block}.setting small{font-size:10px;display:block;color:#aa9ab9;margin-top:5px}.switch{background:#44344e;font-size:10px;border-radius:16px;min-width:52px;padding:10px;font-weight:800}.switch[aria-pressed=true]{background:#cbe5ac;color:#233d24}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}.menu-grid button{padding:13px 10px;border-radius:12px;background:#48345f;font-size:12px}.menu-grid .primary{background:#e3c789;color:#30252c;font-weight:750}.small{font-size:10px;line-height:1.6;color:#ad9abc}.text-link{display:block;margin:12px 0;color:#cfbddc;font-size:11px}a{color:inherit}.course-list{display:grid;gap:9px}.course{background:#382b48;border:1px solid #594164;padding:13px;border-radius:13px;display:flex;text-align:left;align-items:center;gap:13px}.course .course-icon{width:32px;height:32px;background:#a1b783;border-radius:10px;display:grid;place-items:center;color:#283621;font-weight:800;font-size:12px}.course b{display:block;font-size:12px}.course small{display:block;color:#b6a6c4;font-size:10px;margin-top:4px}.course span:last-child{margin-left:auto;color:#e3c789}.guide-grid{display:grid;grid-template-columns:44px 1fr;align-items:start;gap:14px;font-size:12px}.guide-grid b{color:#e3c789;font-size:12px;padding-top:4px}.guide-grid p{margin:0;line-height:1.5;color:#c8b9d5}h3{font-size:14px;margin-top:23px}ol{padding-left:20px;font-size:12px;line-height:1.8;color:#c8b9d5}summary{font-size:11px;cursor:pointer;color:#dccba8;padding:12px 0}body.input-key .physical:focus{outline:none}@media(max-height:620px) and (orientation:landscape){.toolbar{height:40px;position:absolute;top:0;left:0}.device{height:96dvh;width:54dvh}.statusbar{position:absolute;bottom:0;left:0;width:220px;flex-direction:column;height:auto}.device.expanded .screen{position:fixed;left:43%;top:12%;width:52vw;height:calc(52vw * .9);max-height:80dvh}.device.expanded .screen canvas{object-fit:contain}}
/* Keep safe-area clearance; move 24 CSS pixels up from the previous layout. */
html,body{overflow-x:hidden;overflow-y:auto;scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
.app{height:calc(100dvh + 24px);padding-top:calc(env(safe-area-inset-top) + 24px)}
body.selecting{overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#443254 0,#201631 57%,#120f1b 100%)}
.screen{left:var(--screen-left,21.3%);top:var(--screen-top,12.05%);width:var(--screen-width,56.7%);height:var(--screen-height,29.05%)}
.device:not([data-skin="original"]){border-radius:5% 5% 12% 12%;background-color:transparent;box-shadow:none}
.device:not([data-skin="original"]) .dpad{left:9.5%;top:57.8%;width:26%;height:15.4%}
.device:not([data-skin="original"]) .a-button{left:76%;top:59.5%;width:16%;height:9.2%}
.device:not([data-skin="original"]) .b-button{left:57%;top:63.1%;width:16%;height:9.2%}
.device:not([data-skin="original"]) .select-button{left:34.5%;top:79.5%;width:14%;height:6%}
.device:not([data-skin="original"]) .start-button{left:49%;top:79.5%;width:14%;height:6%}
.device:not([data-skin="original"]) .power-led{left:10.2%;top:19.4%}
.device:not([data-skin="original"]) .run-hint,.device:not([data-skin="original"]) .jump-hint,.device:not([data-skin="original"]) .edition-label{display:none}
.menu-grid .wide{grid-column:1/-1}.shell-picker{--selection-color:#7842bf;min-height:100svh;max-width:600px;margin:auto;padding:calc(env(safe-area-inset-top) + 48px) 20px calc(env(safe-area-inset-bottom) + 18px);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;text-align:center;isolation:isolate}
.picker-brand{line-height:1.05}.picker-brand>span{font-size:8px;font-weight:700;letter-spacing:.25em;color:#baacc9}.picker-brand h1{font-size:12px;letter-spacing:.24em;margin:13px 0 0;font-weight:650}.picker-brand h1 b{display:block;font-size:35px;letter-spacing:.07em;margin-top:4px;color:#faf4e8;text-shadow:0 3px 22px #cabadd22}.picker-intro{margin-top:24px}.eyebrow{font-size:8px;letter-spacing:.2em;font-weight:650;color:#a798b9}.picker-intro h2{font-size:21px;font-weight:500;letter-spacing:-.025em;margin:8px 0 0}
.console-stage{position:relative;width:100%;height:clamp(235px,37svh,365px);perspective:900px;perspective-origin:50% 44%;touch-action:pan-y;--radius:clamp(120px,34vw,190px);--card-width:clamp(125px,34vw,170px);margin:8px 0 0;flex-shrink:0}
.orbit-glow{position:absolute;left:8%;right:8%;top:55%;height:38%;background:radial-gradient(ellipse,var(--selection-color),transparent 65%);opacity:.2;filter:blur(18px);transform:rotateX(65deg);transition:background .8s}
.console-ring{position:absolute;top:50%;left:50%;width:0;height:0;transform-style:preserve-3d;transition:transform 850ms cubic-bezier(.22,.7,.25,1);will-change:transform}
.orbit-console{position:absolute;width:var(--card-width);aspect-ratio:9/16;left:calc(var(--card-width) / -2);top:calc(var(--card-width) * -8 / 9);transform-style:preserve-3d;transform:rotateY(var(--angle)) translateZ(var(--radius));background:transparent;padding:0;outline-offset:10px}
.console-front,.console-back{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:5% 5% 12% 12%;overflow:hidden}.console-front{transform:translateZ(2px);filter:drop-shadow(0 10px 10px #0008)}.console-front img{width:100%;height:100%;display:block;object-fit:fill}.mini-screen{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(#d4ddb5,#8f9a79);color:#243930;line-height:1.2;box-shadow:inset 0 0 6px #1116;font-family:ui-monospace,monospace}.mini-screen small{font-size:7px;font-weight:700;letter-spacing:-.05em}.mini-screen b{font-size:17px}.mini-screen i{font-size:13px;margin-top:5px;color:#375a42;font-style:normal}.console-back{transform:rotateY(180deg);background:linear-gradient(100deg,#ffffff33,transparent 25%,#0004 85%),var(--shell-color);border:2px solid #ffffff22;box-shadow:inset 0 0 12px #0007}.back-cartridge{display:block;position:absolute;left:10%;top:2%;width:80%;height:25%;border-radius:4px;border:2px solid #0003;background:#16151c66}.back-label{position:absolute;top:33%;left:12%;width:76%;height:20%;background:#272b2b;color:#c6c8c2;display:flex;flex-direction:column;justify-content:center;font-size:8px;letter-spacing:-.05em;border:1px solid #7a7c73;border-radius:3px}.back-label small{font-size:4px;letter-spacing:.05em}.back-battery{position:absolute;left:8%;right:8%;top:58%;bottom:9%;border:1px solid #0005;box-shadow:inset 0 0 0 2px #ffffff17;border-radius:5px}
.selection-detail{position:relative;z-index:2;margin-top:2px}.selection-detail h3{font-size:22px;margin:0;font-weight:650;letter-spacing:-.025em}.selection-detail p{font-size:11px;color:#b6a7c4;margin:7px 0 0}.shell-dots{display:flex;gap:10px;margin:17px 0 20px}.shell-dot{width:30px;height:30px;border-radius:50%;background:transparent;position:relative;border:1px solid transparent;padding:0;transition:.2s}.shell-dot:after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--dot-color);box-shadow:inset 0 1px 4px #ffffff77}.shell-dot[aria-pressed=true]{border-color:#f8edd5;transform:scale(1.12)}.picker-actions{display:flex;gap:9px;width:100%;max-width:380px}.rotate-shell{width:108px;flex-shrink:0;font-size:24px;background:#ffffff08;border:1px solid #ffffff20;border-radius:15px;color:#e7ddef;display:flex;gap:7px;align-items:center;justify-content:center}.rotate-shell span{font-size:10px;font-weight:600}.choose-shell{flex:1;min-height:51px;background:#f3ddad;color:#2b2034;border-radius:15px;font-size:13px;font-weight:750;padding:12px 17px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 5px 20px #0002}.choose-shell>span{font-size:21px}.picker-note{font-size:9px;color:#8e7d9e;margin:13px 0 0}.picker-status{font-size:9px;color:#b3a2c2;margin-top:14px}.picker-status.ready{color:#a6d4ac}.update-ready{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);transform:translateX(-50%);z-index:30;padding:13px 20px;border-radius:30px;background:#f3ddad;color:#2b2034;box-shadow:0 5px 20px #0006;font-size:12px;font-weight:700;white-space:nowrap}
@media(max-height:740px){.shell-picker{padding-top:calc(env(safe-area-inset-top) + 28px)}.picker-intro{margin-top:16px}.console-stage{height:235px;--card-width:125px;--radius:120px}.picker-brand h1 b{font-size:29px}.selection-detail h3{font-size:19px}.shell-dots{margin:12px 0}.picker-status{margin-top:9px}}
@media(prefers-reduced-motion:reduce){.console-ring,.shell-dot{transition:none}}
@media(max-height:620px) and (orientation:landscape){.app{height:calc(100dvh + 24px);padding-top:24px}.app .toolbar{top:24px}.shell-picker{padding-top:20px;max-width:650px;min-height:100svh}.picker-brand,.picker-intro{display:none}.console-stage{height:210px;--card-width:110px}.shell-dots{margin:8px 0}.picker-note,.picker-status{display:none}.selection-detail{margin-top:0}.selection-detail h3{font-size:16px}.selection-detail p{display:none}.choose-shell{min-height:42px}}
.console-stage{touch-action:none;cursor:grab}.console-stage.dragging{cursor:grabbing}.console-ring.direct{transition:none}.orbit-console{--rise:0px;transform:rotateY(var(--angle)) translateZ(var(--radius)) translateY(var(--rise));cursor:inherit}.reveal-curtain{position:fixed;inset:0;z-index:50;background:#120f1b;opacity:0;pointer-events:none;transition:opacity .85s}.fading-out .reveal-curtain{opacity:1}.unlock-reveal .orbit-console{transition:transform 4.2s cubic-bezier(.2,.6,.2,1),opacity 3.5s}.orbit-console.rising{--rise:550px;opacity:0}.unlock-reveal .orbit-console[data-skin="midnight"] .console-front{filter:drop-shadow(0 0 20px #e7bc5066)}.unlock-reveal .selection-detail{color:#f5dea6}.unlock-reveal .shell-dot{transition:transform 2s,opacity 2s}.unlock-reveal .console-stage{pointer-events:none}@media(prefers-reduced-motion:reduce){.unlock-reveal .orbit-console,.reveal-curtain{transition:opacity .2s}.orbit-console.rising{--rise:0px}}
.console-stage{height:clamp(270px,43svh,410px);margin-top:18px}.selection-detail{margin-top:12px}@media(max-height:740px){.console-stage{height:260px;margin-top:10px}}@media(max-height:620px) and (orientation:landscape){.console-stage{height:220px;margin-top:8px}.selection-detail{margin-top:4px}}
.cover{z-index:2}.pause-badge{z-index:3}
/* Game Boy Astra platform */
.toolbar{gap:8px}.wordmark{flex-shrink:0}.tools button{width:34px;height:36px}.tools{gap:4px}.screen #romFrame{position:absolute;inset:0;border:0;width:100%;height:100%;background:#111;pointer-events:none}.device[data-player="rom"] .run-hint,.device[data-player="rom"] .jump-hint{display:none}
.game-picker{position:relative;max-width:680px;isolation:isolate;justify-content:center;overflow:hidden}.game-atmosphere{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;opacity:.55;transition:background-image .7s;filter:saturate(.85)}.game-picker:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#141021c9,#17102038 34%,#181124dc 68%,#171020)}.library-heading{width:100%;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:24px;max-width:430px}.library-heading button{background:#ffffff0c;border:1px solid #ffffff1c;padding:9px 13px;border-radius:25px;font-size:12px}.library-heading .eyebrow{font-size:8px;color:#dbcfde;letter-spacing:.16em}.game-stage{position:relative;width:100%;height:clamp(240px,34svh,310px);perspective:1000px;perspective-origin:50% 38%;touch-action:none;cursor:grab;--box-width:clamp(138px,35vw,185px);--radius:clamp(155px,43vw,230px);flex-shrink:0}.game-ring{position:absolute;top:50%;left:50%;width:0;height:0;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.22,.7,.25,1)}.game-ring.direct{transition:none}.orbit-box{position:absolute;left:calc(var(--box-width)/-2);top:calc(var(--box-width)*-.58);width:var(--box-width);height:calc(var(--box-width)*1.16);background:transparent;padding:0;transform:rotateY(var(--angle)) translateZ(var(--radius));transform-style:preserve-3d;cursor:inherit}.box-front,.box-back,.box-spine,.box-top{position:absolute;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}.box-front{inset:0;transform:translateZ(15px);border-radius:2px;overflow:hidden;box-shadow:0 9px 14px #0008;border:1px solid #fff5;background:var(--game-color)}.box-front>img{height:100%;width:100%;object-fit:fill;display:block}.box-front:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#fff3,transparent 17%,transparent 78%,#0002)}.box-spine{width:30px;height:100%;left:-15px;top:0;transform:rotateY(-90deg);background:linear-gradient(90deg,#0006,transparent),var(--game-color);color:#171123;display:flex;align-items:center;justify-content:space-around;writing-mode:vertical-rl;transform-origin:center}.box-spine b{font-size:11px}.box-spine small{font-size:6px;letter-spacing:.1em}.box-back{inset:0;transform:rotateY(180deg) translateZ(15px);background:linear-gradient(#161421,#312842);border:1px solid var(--game-color);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20px 9px;color:#f0e6d7}.box-back small{font-size:7px;letter-spacing:.15em}.box-back strong{font-size:20px}.box-back span{font-size:6px;letter-spacing:.1em}.box-top{top:-15px;left:0;height:30px;width:100%;background:var(--game-color);transform:rotateX(90deg)}.original-box{position:absolute;inset:0;display:flex;align-items:center;flex-direction:column;background:linear-gradient(#fff7d4a6,#abd8c7aa),url('assets/forest-lossless.webp') center/cover;color:#1d4a41;padding:10px 8px}.original-box small{font-size:7px;letter-spacing:.13em;font-weight:900}.original-box strong{font-size:20px;line-height:.94;color:#d2443d;letter-spacing:-.04em;text-shadow:1px 1px #fff6d2;margin-top:8px}.original-box img{height:58%;width:90%;object-fit:contain;filter:drop-shadow(2px 3px #34532f55)}.original-box b{font-size:5px;letter-spacing:.11em;margin-top:auto}.game-detail{width:100%;max-width:430px;min-height:91px;display:flex;flex-direction:column;justify-content:center}.game-system{font-size:8px;font-weight:700;color:var(--selection-color);letter-spacing:.21em}.game-detail h2{font-size:21px;line-height:1.12;letter-spacing:-.035em;margin:9px 0 4px;text-wrap:balance}.game-detail p{font-size:10px;color:#c8b9cf;margin:3px}.game-picker .shell-dots{margin:9px 0 12px}.game-fact{text-align:left;max-width:430px;width:100%;padding:13px 17px;border:1px solid #ffffff21;border-radius:15px;background:#1a152bc9;backdrop-filter:blur(15px);margin-bottom:18px;min-height:83px}.game-fact>span{font-size:7px;letter-spacing:.2em;color:var(--selection-color);font-weight:800}.game-fact p{margin:7px 0 0;color:#dfd2e7;font-size:11px;line-height:1.5}.game-picker .picker-note{margin-top:10px}.game-picker .picker-status{margin-top:8px}.picker-status.error{color:#ffc3b5}.picker-actions{width:100%;max-width:430px}.game-picker .shell-dot{width:11px;height:11px}.game-picker .shell-dot[aria-pressed=true]{box-shadow:0 0 0 3px #201631,0 0 0 4px var(--dot-color)}
body.selecting{min-height:0;overflow:hidden;overflow:clip}.shell-picker:not([hidden]){animation:astra-enter .5s ease both}@keyframes astra-enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:780px){.game-picker{padding-top:calc(env(safe-area-inset-top) + 25px)}.game-picker .picker-brand h1 b{font-size:27px}.library-heading{margin-top:14px}.game-stage{height:225px;--box-width:135px;--radius:155px}.game-detail{min-height:80px}.game-detail h2{font-size:18px}.game-fact{min-height:74px;margin-bottom:12px;padding:10px 14px}.game-fact p{font-size:10px}.game-picker .picker-status{font-size:8px}}
@media(min-width:680px){.game-picker{border-left:1px solid #ffffff09;border-right:1px solid #ffffff09}.game-atmosphere{opacity:.64}.game-stage{--radius:230px}}
@media(prefers-reduced-motion:reduce){.shell-picker:not([hidden]){animation:none}.game-ring,.game-atmosphere{transition:none}}
.orbit-box{height:var(--box-width);top:calc(var(--box-width)/-2)}.original-box strong{font-size:19px}.original-box img{height:55%}
.game-atmosphere{background-size:100% auto;background-position:center 150px;background-repeat:no-repeat;opacity:.9}.game-picker:after{background:linear-gradient(#141021a6,#17102012 32%,#181124b8 58%,#171020 80%)}
.game-picker .shell-dot{width:28px;height:28px}.game-picker .shell-dot:after{inset:8px}.game-picker .shell-dot[aria-pressed=true]{box-shadow:none}
.princess-cameos{position:absolute;inset:0;pointer-events:none;z-index:-1}.cameo{position:absolute;bottom:-20px;height:150px;max-width:30%;object-fit:contain;filter:drop-shadow(0 5px 15px #17091f);opacity:.85}.cameo.peach{left:0;transform:rotate(-8deg)}.cameo.daisy{right:0;transform:rotate(7deg)}@media(max-width:500px){.cameo{height:105px;bottom:-20px;opacity:.8}}

/* The ten-game ring keeps equal spacing and compact tap targets. */
.game-stage{--box-width:clamp(115px,30vw,155px);--radius:clamp(225px,58vw,300px)}
.game-picker .shell-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:350px}
.tilt-calibrate{width:100%;background:#493961;border:1px solid #ffffff20;border-radius:12px;padding:10px;font-size:11px;margin-top:8px}
@media(max-height:780px){.game-stage{--box-width:115px;--radius:225px}}

/* Fixed app viewport: no page dragging, pinch zoom, or pull-to-refresh. */
html,body{height:100%;overflow:hidden;overflow:clip;overscroll-behavior:none;touch-action:none}
body{position:fixed;inset:0}
.app{height:100svh;max-height:100svh;overflow:hidden;overflow:clip;padding-top:calc(env(safe-area-inset-top) + 24px)}
.device{width:min(100vw,calc((100svh - 114px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .5625),460px)}
.shell-picker{height:100svh;min-height:0;overflow:hidden;overflow:clip;overscroll-behavior:none;touch-action:none}
.console-stage,.game-stage,.device{touch-action:none}
dialog{touch-action:pan-y;overscroll-behavior:contain}
.library-heading{max-width:430px}.library-heading>button{margin-left:auto}
@media(max-height:620px) and (orientation:landscape){.app{height:100svh;padding-top:24px}.device{height:calc(100svh - 28px);width:calc((100svh - 28px)*.5625)}}

.previous-choice{width:43px;flex-shrink:0;border-radius:15px;background:#ffffff08;border:1px solid #ffffff20;font-size:20px;color:#e7ddef}.picker-actions .rotate-shell{width:88px}.picker-actions{gap:7px}

.library-heading>.music-toggle{margin-left:0;color:#f1d39a;min-height:36px}.music-toggle[aria-pressed=true]{background:#ffe29b18;border-color:#ffe29b44}

.console-music{align-self:flex-end;margin:0 0 8px;padding:8px 12px;border-radius:24px;background:#ffffff0c;border:1px solid #ffffff1c;color:#f1d39a;font-size:11px;flex-shrink:0}

/* Fit the complete selection panel inside the safe viewport without a scroll area. */
.picker-content{width:100%;display:flex;flex-direction:column;align-items:center;flex-shrink:0;transform:scale(var(--picker-scale,1));transform-origin:center center}
.picker-content>*{flex-shrink:0}
@media(max-height:740px){.shell-picker{padding-top:calc(env(safe-area-inset-top) + 20px);padding-bottom:calc(env(safe-area-inset-bottom) + 12px)}.console-music{margin-bottom:4px}.picker-intro{margin-top:12px}.shell-picker .console-stage{height:240px;--card-width:115px;--radius:115px;margin-top:6px}.game-picker .game-stage{height:185px;--box-width:105px;--radius:215px}.game-picker .game-detail{min-height:68px}.game-picker .game-fact{min-height:64px;margin-bottom:10px}.picker-content .picker-status{margin-top:8px}.picker-content .picker-note{margin-top:8px}}
@media(max-height:620px) and (orientation:landscape){.picker-content{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;max-width:610px}.picker-content>.console-stage,.picker-content>.game-stage{grid-column:1;grid-row:1/8;height:230px;margin:0;--card-width:100px;--radius:100px}.picker-content>.game-stage{--box-width:95px;--radius:190px}.picker-content>:not(.console-stage):not(.game-stage){grid-column:2;width:100%;margin:4px 0}.picker-content>.picker-brand,.picker-content>.picker-intro,.picker-content>.picker-note,.picker-content>#pickerStatus{display:none}.picker-content .game-detail{min-height:58px}.picker-content .game-fact{min-height:0;padding:7px 10px}.picker-content .game-detail h2{font-size:16px}.picker-content .choose-shell{padding:8px;min-height:42px}.picker-content .rotate-shell{width:60px}.picker-content .previous-choice{width:36px}.picker-content .library-heading{gap:8px}.picker-content .library-heading button{padding:8px;font-size:10px}.picker-content .shell-dots{gap:2px;justify-content:center}.picker-content .shell-dot{width:25px;height:25px}.picker-content .console-music{justify-self:end;width:auto}.picker-content .picker-status{font-size:8px}.picker-content .game-fact p{font-size:9px}}

/* Original 4.1-second startup, restyled as light on a true black canvas. */
.boot-screen{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;overflow:clip;touch-action:none;opacity:1;transition:opacity .5s linear}
.boot-art{position:relative;width:min(86vw,480px,120svh);aspect-ratio:3/2;transform:translateY(-3svh)}
.boot-art img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:invert(1) hue-rotate(180deg) saturate(1.25) contrast(1.2);mix-blend-mode:screen}
.boot-wordmark{position:absolute;left:0;right:0;bottom:4%;text-align:center;color:#a69ab9;font-size:10px;font-weight:600;letter-spacing:.45em}
.boot-screen.fading{opacity:0;pointer-events:none}
/* Bigger targets preserve the photographed button positions. */
.tools button{min-width:44px;min-height:44px;touch-action:manipulation}.toolbar{height:56px}.tools{gap:4px}
.start-button,.select-button{top:77.2%;height:8.5%;min-height:44px}.start-button{left:50%;width:17%}.select-button{left:32.5%;width:17%}
.physical.a-button::before,.physical.b-button::before{content:'';position:absolute;inset:-5px;border-radius:50%}
button{touch-action:manipulation}button:active{filter:brightness(1.18)}
.original-box .sml4-box-title{font-size:18px;line-height:1.1;max-width:80%;margin:15px auto 0;text-shadow:none;letter-spacing:-.04em}.original-box img{max-height:70%;height:70%}.original-box small,.original-box b{display:none}
.character-picker{background:radial-gradient(ellipse at 50% 38%,#5c335b 0%,#221a38 52%,#100d1b 100%)}
.character-picker .picker-content{max-width:680px;display:block;text-align:center}.character-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:32px}.character-top .eyebrow{font-size:10px;letter-spacing:.16em;color:#d4bc88}.character-top button{padding:12px 16px;border:1px solid #ffffff20;background:#ffffff08;border-radius:14px;min-height:44px;font-size:12px}.character-picker h1{font-size:clamp(27px,6vw,42px);letter-spacing:-.055em;margin:0 0 8px}.character-intro{font-size:13px;color:#beafc8;margin:0 0 26px}
.character-row{display:flex;justify-content:center;align-items:end;min-height:200px;gap:8px;position:relative;perspective:800px}.character-row:after{content:'';position:absolute;left:3%;right:3%;bottom:25px;height:35px;background:#d5a4e429;filter:blur(18px);border-radius:50%;pointer-events:none}.character-card{position:relative;flex:1;max-width:148px;min-width:0;background:transparent;border-radius:20px;padding:6px 2px 12px;transition:flex .9s,transform .6s,background .4s;isolation:isolate}.character-card .portrait{height:150px;display:flex;align-items:end;justify-content:center;transition:transform .4s}.character-card img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 9px #0008);pointer-events:none}.character-name{font-size:11px;font-weight:650;display:block;min-height:30px;margin-top:15px}.character-card[aria-pressed=true]{background:linear-gradient(transparent,#ffffff12);box-shadow:none}.character-card[aria-pressed=true] .portrait{transform:translateY(-10px)}.character-card[aria-pressed=true] .character-name{color:var(--hero-color)}
.character-details{margin:18px auto 24px;max-width:480px;min-height:190px}.character-details h2{font-size:24px;margin:0 0 8px}.character-details>p{font-size:14px;color:#f2d29b;line-height:1.5;min-height:42px;margin:0}.character-details blockquote{font-size:12px;line-height:1.6;color:#d3c5dd;margin:14px 8px 10px}.character-details small{font-size:9px;color:#95869f}.character-picker .choose-shell{width:min(100%,360px);min-height:50px;font-weight:700}.character-picker .picker-status{min-height:24px}.birdo-reveal .character-card[data-character=birdo]{animation:birdo-rise 1.8s both}.birdo-reveal .character-card:not([data-character=birdo]){animation:make-room 1.4s both}@keyframes birdo-rise{from{opacity:0;transform:translateY(120px) scale(.7)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes make-room{from{transform:scale(1.08)}to{transform:scale(1)}}
@media(max-width:370px){.character-row{gap:2px}.character-card .portrait{height:120px}.character-name{font-size:10px}.character-details{min-height:170px}.character-details blockquote{font-size:11px}.character-top{margin-bottom:18px}}
@media(max-height:620px) and (orientation:landscape){.character-picker .picker-content{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}.character-picker .character-top{grid-column:1/3;margin:0}.character-picker h1,.character-picker .character-intro{display:none}.character-picker .character-row{grid-column:1;grid-row:2/5;width:100%;min-height:170px}.character-card .portrait{height:125px}.character-picker .character-details{grid-column:2;margin:0;min-height:0}.character-picker .choose-shell,.character-picker .picker-status{grid-column:2}.character-details h2{font-size:18px}.character-details>p{font-size:11px;min-height:0}.character-details blockquote{font-size:10px;margin:6px}.character-details small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.character-card,.character-card .portrait{transition:none}.birdo-reveal .character-card{animation:none!important}}

.character-card{flex:0 0 calc((100% - 24px)/4);transition:flex-basis .95s ease,transform .6s,background .4s}.has-birdo .character-card{flex-basis:calc((100% - 32px)/5)}.character-picker .choose-shell{text-align:center}.course{overflow:hidden}.course-preview{width:80px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0}.shell-picker:not([hidden]) .picker-content{animation:content-arrive .45s ease both}@keyframes content-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@media(prefers-reduced-motion:reduce){.shell-picker:not([hidden]) .picker-content{animation:none}}

/* The animation clock owns ring position; grabbing never jumps to a CSS endpoint. */
.console-ring,.game-ring{transition:none;will-change:transform}
/* Enlarge the complete box display together so the carousel keeps its spacing. */
.game-ring{scale:1.005}
.game-stage{perspective-origin:50% 50%;min-height:calc(var(--box-width)*1.541)}
.orbit-console,.orbit-box{touch-action:none;-webkit-user-drag:none}
.orbit-console:active,.orbit-box:active{filter:none}
.console-front,.console-back,.box-front,.box-back,.box-spine,.box-top{pointer-events:none}
.game-stage.dragging{cursor:grabbing}
.shell-picker[data-motion=dragging]{cursor:grabbing}
.selection-detail{height:50px}
.game-detail{height:96px;min-height:96px}
.game-fact{height:96px;min-height:96px;backdrop-filter:none}
.game-atmosphere{transition:opacity .32s ease;will-change:opacity}
.game-picker[data-motion=dragging] .game-atmosphere,.game-picker[data-motion=coasting] .game-atmosphere{opacity:.52}
.orbit-glow:after{content:'';position:absolute;inset:16% 4%;border:1px solid var(--selection-color);border-radius:50%;opacity:.5}
@media(max-height:780px){.game-picker .game-detail{height:86px;min-height:86px}.game-picker .game-fact{height:84px;min-height:84px}}
@media(max-height:740px){.game-picker .game-detail{height:78px;min-height:78px}.game-picker .game-fact{height:78px;min-height:78px}}
@media(max-height:620px) and (orientation:landscape){.game-picker .game-detail{height:76px;min-height:76px}.game-picker .game-fact{height:68px;min-height:68px}.selection-detail{height:24px}}
@media(prefers-reduced-motion:reduce){.game-atmosphere{transition:none}}

/* Blend the scene into the header instead of a hard-edged background strip. */
.game-atmosphere{background-size:cover;background-position:center;mask-image:linear-gradient(transparent,#000 24%,#000 55%,transparent 84%);-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 55%,transparent 84%)}

/* The display width is independent of the position lock and shell photograph. */
.app{height:100dvh;max-height:100dvh;justify-content:flex-start;padding-top:calc(env(safe-area-inset-top) + 24px)}
.console-viewport{position:relative;width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;overflow:clip}
.console-viewport .device{aspect-ratio:auto;max-width:none;flex:none;will-change:transform}
.toolbar{width:100%;max-width:600px;padding:6px 12px;gap:8px;position:relative;top:auto;left:auto;height:56px}
.wordmark{min-width:48px}.wordmark span{font-size:8px}.wordmark b{font-size:15px}
.tools{gap:3px;align-items:center}.tools button{width:44px;min-width:44px;height:44px;display:grid;place-items:center;padding:0}
#wideView[aria-pressed=true]{color:#ffe49b;border-color:#e6c47488;background:#e6c47422}
.statusbar{position:relative;bottom:auto;left:auto;width:100%;max-width:600px;flex-direction:row;min-height:34px;height:34px}
.wide-view .device{border-radius:0!important}
.wide-view .device.expanded .screen{position:absolute;left:0;right:0;top:7%;width:100%;height:min(90vw,calc(var(--device-height)*.51));max-height:none;border-radius:0;box-shadow:0 -8px 0 #111218,0 8px 0 #111218;isolation:isolate}
.wide-view .device.expanded #display{object-fit:fill;width:100%;height:100%}
.wide-view .screen #romFrame{width:100%;height:100%}
.app:not(.layout-locked) .device{cursor:grab}.app:not(.layout-locked) .screen,.app:not(.layout-locked) button,.app:not(.layout-locked) .dpad{cursor:default}
@media(max-width:350px){.toolbar{padding-inline:6px;gap:4px}.tools{gap:2px}.wordmark{min-width:44px}.wordmark b{font-size:13px}.wordmark span{font-size:7px}}
@media(max-height:620px) and (orientation:landscape){.app{padding-top:env(safe-area-inset-top)}.toolbar{height:48px}.statusbar{height:26px;min-height:26px}.console-viewport .device{max-height:none}}

@media(orientation:landscape){.wide-view .device.expanded #display{object-fit:contain}}

/* Wide play: conceal the upper shell, lower its artwork and hit areas together.
   72 CSS px approximates .75in; compact screens reserve room for Start/Select. */
.wide-view .device{overflow:clip;background-size:0 0;background-color:transparent;isolation:isolate;clip-path:inset(7% 0 0)}
.wide-view .device::before{content:"";position:absolute;inset:0;background-image:inherit;background-size:100% 100%;background-repeat:no-repeat;transform:translateY(var(--control-drop,72px));pointer-events:none;z-index:-1}
.wide-view .device .dpad,.wide-view .device .physical,.wide-view .device .run-hint,.wide-view .device .jump-hint,.wide-view .device .edition-label{translate:0 var(--control-drop,72px)}
.wide-view .device .screen{z-index:1}
/* Tactile overlays animate above photographed buttons; hit areas never move. */
.device .physical,.device .dpad button{transition:background-color 130ms ease-out,box-shadow 130ms ease-out}
.device .physical::after,.device .dpad button::after{content:"";position:absolute;inset:6%;border-radius:inherit;pointer-events:none;opacity:0;transform:scale(1.06);border:1px solid #ecddff70;box-shadow:inset 0 2px 4px #fff2,0 0 9px #d3b2ff35;transition:opacity 150ms ease-out,transform 150ms cubic-bezier(.2,.7,.3,1)}
.device .physical.pressed{background:linear-gradient(#0803134d,#c7a3ff18);box-shadow:inset 0 4px 8px #080313b3,inset 0 -1px 2px #f3e5ff66,0 0 12px #c49dff44;transition-duration:0ms}
.device .dpad button.pressed{background:linear-gradient(#08031366,#bea0f52b);box-shadow:inset 0 3px 6px #0009,0 0 8px #d2b6ff3d;transition-duration:0ms}
.device .physical.pressed::after,.device .dpad button.pressed::after{opacity:1;transform:scale(.94);transition-duration:0ms}
.tools button{transition:background-color 120ms ease,box-shadow 120ms ease}
.tools button:active{background:#ddc6ff24;box-shadow:inset 0 3px 6px #10071f88;transition-duration:0ms}
@media(prefers-reduced-motion:reduce){.device .physical,.device .dpad button,.device .physical::after,.device .dpad button::after,.tools button{transition:none}.device .physical::after,.device .dpad button::after{transform:none!important}}
/* Mechanical travel studied from the supplied pressed-button photographs. */
.mechanical-controls .physical,.mechanical-controls .dpad{perspective:240px;isolation:isolate}
.mechanical-controls .physical.pressed,.mechanical-controls .dpad button.pressed{background:transparent;box-shadow:none}
.mechanical-controls .physical::after,.mechanical-controls .dpad button::after{display:none}
.button-face,.button-socket{position:absolute;display:block;pointer-events:none;border-radius:50%;background-repeat:no-repeat}
.button-socket{background:#111218;box-shadow:inset 0 2px 4px #000b;z-index:0}
.button-face{z-index:1;transform-origin:center;transform:translateY(var(--press-depth,0px)) rotateX(var(--press-rx,0deg)) rotateY(var(--press-ry,0deg)) scale(var(--press-scale,1));filter:brightness(1);transition:transform 110ms cubic-bezier(.2,.8,.3,1),filter 110ms ease-out}
.button-face::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,30%),#fff2,transparent 65%);box-shadow:inset 0 1px 1px #ffffff17;opacity:0;transition:opacity 110ms ease}
.mechanical-down .button-face{filter:brightness(.84);transition-duration:35ms}
.mechanical-down .button-face::after{opacity:1;box-shadow:inset 0 2px 3px #0007,inset 0 -1px 1px #fff3;transition-duration:35ms}
.dpad .button-face,.dpad .button-socket{border-radius:0;clip-path:polygon(32% 3%,68% 3%,68% 32%,98% 32%,98% 69%,68% 69%,68% 98%,32% 98%,32% 69%,2% 69%,2% 32%,32% 32%)}
.mechanical-controls .dpad button{z-index:3}
.start-button .button-face,.select-button .button-face,.start-button .button-socket,.select-button .button-socket{border-radius:45%}
@media(prefers-reduced-motion:reduce){.mechanical-controls .button-face{transform:none!important;transition:none}.button-face::after{transition:none}}
/* Full-size princess cameos sit in front of the rotating boxes. */
.princess-cameos{z-index:5;transform:translateZ(0);pointer-events:none}
.princess-cameos .cameo{height:450px;max-width:90%;bottom:-40px;opacity:1}
@media(max-width:500px){.princess-cameos .cameo{height:315px;bottom:-40px}}

/* Console-only play area with a quarter-inch CSS margin. */
:root,html{background:#271841}
body{background:radial-gradient(ellipse at 45% 25%,#6442a3,#271841 74%)}
.shell-picker{background-color:#271841}
.app{position:relative;isolation:isolate;padding-bottom:env(safe-area-inset-bottom)}
.toolbar{z-index:4}
.wide-view .device{clip-path:none}
.wide-view .device::after{content:"";position:absolute;inset:0;background-image:inherit;background-size:100% 100%;background-repeat:no-repeat;clip-path:inset(0 0 93%);pointer-events:none;z-index:2}

/* A single proportional lower shell preserves the round speaker and bottom rim. */
.lower-shell{display:contents}
.wide-view{padding-bottom:0}
.wide-view .device::before{display:none}
.wide-view .device::after{background-size:100% var(--shell-height);clip-path:inset(0 0 calc(100% - 7%));}
.wide-view .lower-shell{display:block;position:absolute;height:var(--shell-height);width:calc(var(--shell-height)*.5625);max-width:100%;bottom:0;left:50%;transform:translateX(-50%);background-image:inherit;background-size:100% 100%;background-repeat:no-repeat;clip-path:inset(54% 0 0);pointer-events:none}
.wide-view .lower-shell button,.wide-view .lower-shell .dpad{pointer-events:auto}
.wide-view .device.expanded .screen{height:calc(93% - var(--shell-height)*.46);}
/* Hidden crown reveal: full-bleed tribute, with readable controls above it. */
.character-picker{position:relative;max-width:none;width:100%}
.secret-unlocked .picker-content{max-width:680px;text-shadow:0 2px 8px #000}
.secret-unlocked .character-top button{background:#160e27c9;border-color:#e4bf6e60}
.secret-unlocked .character-details{background:#160e27ca;border:1px solid #e5bd6944;border-radius:18px;padding:14px 16px;box-shadow:0 12px 40px #0005}
.secret-unlocked .character-details small{color:#d2bedc}
.secret-unlocked .character-intro{color:#f7e6cc}
.secret-unlocked .character-card{background:linear-gradient(transparent,#160d27d9)}
.secret-hero .portrait img{filter:drop-shadow(0 0 13px #f0b34680)}
.character-variant{display:block;margin:0 auto 10px;padding:8px 15px;min-height:36px;border:1px solid #d9ba7e66;background:#170f26da;border-radius:30px;font-size:11px;color:#ffe7b5}
.secret-unlocked .choose-shell{background:linear-gradient(110deg,#ffe9b3,#efc373);box-shadow:0 0 28px #f4bc5330;color:#2e1831;text-shadow:none}
.crown-burst{display:none;pointer-events:none;position:absolute;z-index:5;inset:0;align-items:center;justify-content:center;color:#ffe4a0;font-size:100px;text-shadow:0 0 30px #ffb833}
.crown-reveal .crown-burst{display:flex;animation:crown-arrival 2.4s ease-out both}
.crown-reveal .secret-hero{animation:royal-rise 1.2s ease-out both}
.crown-burst::before{content:'';position:absolute;width:230px;height:230px;border:2px solid #ffe0a2;border-radius:50%;box-shadow:0 0 70px 15px #b05edc80,inset 0 0 55px #d99c4740}
@keyframes crown-arrival{0%{opacity:0;transform:scale(.4)}18%{opacity:1;transform:scale(1)}52%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
@keyframes royal-rise{from{transform:translateY(16px);filter:brightness(1.8)}to{transform:translateY(0);filter:brightness(1)}}
.secret-box img{object-fit:cover!important;height:100%!important;width:100%!important}
.secret-box-title{position:absolute;top:6px;left:6px;margin:0;color:#ffe6ae;font-size:3.5px;line-height:1.1;text-align:left;text-shadow:0 1px 2px #000;z-index:1}

/* Supplied cover art and branding strip are rendered on the existing 3D box. */
.orbit-box[data-game="astra"] .box-front:not(.secret-box){background:#ece9dc}
.orbit-box[data-game="astra"] .box-front:not(.secret-box)>img{width:100%;margin-left:0;object-fit:fill}
.orbit-box[data-game="astra"] .box-front:not(.secret-box)::before{content:none}
.orbit-box[data-game="astra"] .box-spine{background:linear-gradient(90deg,#b6b7b8,#f2efe1 35%,#cccac1);color:#20245f}
.character-picker,.character-picker.secret-unlocked{background:#271841;isolation:isolate}
.character-picker::before{content:'';position:absolute;inset:0;z-index:-2;background:url('assets/character-scenery.webp') center/cover no-repeat;opacity:.9;mask-image:linear-gradient(transparent,#000 24%,#000 55%,transparent 84%);-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 55%,transparent 84%);pointer-events:none}
.character-picker::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#141021a6,#17102012 32%,#181124b8 58%,#171020 80%);pointer-events:none}
@media(prefers-reduced-motion:reduce){.crown-reveal .crown-burst{display:none}.crown-reveal .secret-hero{animation:none}}

/* Every cover shares one stable footprint across selection and unlock states. */
.game-picker .orbit-box{min-width:var(--box-width);max-width:var(--box-width);min-height:var(--box-width);max-height:var(--box-width);aspect-ratio:1}

/* Display toggle stays above gameplay and pause overlays; maps open in color. */
.map-color-toggle{position:absolute;top:6px;right:6px;z-index:4;min-width:44px;min-height:44px;padding:6px 9px;border:1px solid #fff1cc99;border-radius:10px;background:#252d49e8;color:#fff1cc;font:700 12px/1 system-ui;cursor:pointer;touch-action:manipulation;box-shadow:0 2px 8px #0004}
.map-color-toggle[hidden]{display:none}.map-color-toggle:focus-visible{outline:3px solid #f3cb6b;outline-offset:2px}
.device[data-skin="pikachu"] .power-led{display:none}

/* Rounded solid console bodies; each selected shell performs a slow local turn. */
.orbit-console{--shell-depth:calc(var(--card-width) * .28)}
.console-body,.console-edges{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.console-edges{pointer-events:none}
.console-front{transform:translateZ(calc(var(--shell-depth) / 2));filter:none}
.console-back{transform:rotateY(180deg) translateZ(calc(var(--shell-depth) / 2));box-shadow:inset 0 0 12px #0007,0 14px 20px #09041266}
.console-edge{position:absolute;left:0;top:0;display:block;width:calc(var(--card-width) * var(--edge-length) + .2px);height:var(--shell-depth);transform-origin:0 0;transform:translate3d(calc(var(--card-width) * var(--edge-x)),calc(var(--card-width) * var(--edge-y)),calc(var(--shell-depth) / -2)) rotateZ(var(--edge-angle)) rotateX(90deg);background:linear-gradient(rgba(0,0,0,var(--edge-shade)),rgba(0,0,0,var(--edge-shade))),linear-gradient(to bottom,#0005 0%,#ffffff15 18%,#0001 47%,#16102099 49%,#ffffff70 51%,#ffffff05 54%,#ffffff44 88%,#ffffff88 100%),var(--shell-color);backface-visibility:visible}
.console-edge.left-wall:after{content:"";position:absolute;left:28%;top:24%;width:10%;height:52%;border-radius:2px;background:#111822;box-shadow:inset 0 0 0 2px #04070b,0 0 0 1px #ffffff66}
.console-edge.left-wall:before{content:"";position:absolute;left:53%;top:16%;width:12%;height:65%;border-radius:4px;background:repeating-linear-gradient(90deg,#242b32 0 2px,#77808b 2px 3px);box-shadow:0 0 0 1px #101820}
.console-edge.right-wall:after{content:"";position:absolute;left:18%;top:22%;width:9%;height:45%;border-radius:3px;background:linear-gradient(90deg,#10151e,#535966,#10151e);box-shadow:0 0 0 1px #ffffff55}
.pause-map{margin-top:18px;min-height:44px;padding:10px 16px;border-radius:12px;background:#f4dfab;color:#281743;font-size:12px;font-weight:750;letter-spacing:0;box-shadow:0 4px 12px #0003}
@media(prefers-reduced-motion:reduce){.console-body{animation:none!important}}

/* Photographic rear shells and molded optical details, derived from the user's turntable reference.
   Lighting reads the existing turn; it never advances the wheel or changes its timing. */
.console-body{--reflection-x:24%;--reflection-alpha:.10}
.console-back{border:0;background:var(--shell-color);box-shadow:inset 0 0 2px #fff9}
.rear-texture{position:absolute;inset:0;display:block;background:url('assets/select-shells/rear-atomic-yellow.webp') center 46% / 120.5% 116% no-repeat}






.console-front::after,.console-back::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(108deg,transparent 24%,rgba(255,255,255,var(--reflection-alpha)) 44%,#ffffff03 49%,transparent 59%);background-size:240% 100%;background-position:var(--reflection-x) center;box-shadow:inset 1px 0 1px #fff7,inset -1px 0 2px #150e3040,inset 0 1px 1px #fff9}
.mini-screen{border:1px solid #27312a;box-shadow:inset 0 0 7px #19261e88,0 1px 1px #ffffff40;text-shadow:0 1px #e3e8c533;background:linear-gradient(115deg,#c2cba8ee,#929e7d 65%,#adb895)}
.mini-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff14,transparent 38%,#ffffff0c 44%,transparent 49%);box-shadow:inset 1px 1px 2px #0c181e55}
.console-edge{background:linear-gradient(rgba(0,0,0,var(--edge-shade)),rgba(0,0,0,var(--edge-shade))),linear-gradient(to bottom,#150c2666,#ffffff50 7%,#ffffff0a 16%,#14102666 45%,#080711bb 48%,#dfe9ffbb 50%,#ffffff08 55%,#ffffff40 86%,#e5eaffaa 96%,#ffffff66),var(--shell-color);box-shadow:inset 0 1px #ffffff80,inset 0 -1px #120d2933}
.orbit-console:is([data-skin="atomic"],[data-skin="emerald"],[data-skin="ice"],[data-skin="crystal"],[data-skin="midnight"]) .console-edge{background:linear-gradient(rgba(0,0,0,var(--edge-shade)),rgba(0,0,0,var(--edge-shade))),linear-gradient(to bottom,#ffffff66,#ffffff15 13%,#16302855 22%,#ffffff28 43%,#0d0c29bb 48%,#f3e7ffbb 50%,#ffffff08 57%,#153a2d55 72%,#ffffff33 87%,#fff9 98%),repeating-linear-gradient(90deg,transparent 0 13%,#f4eeff70 13.3% 14%,#130d2d70 14.5% 15%,transparent 15.5% 29%),var(--shell-color)}
.console-edge.left-wall:after{background:linear-gradient(#02060a,#253039);border:1px solid #969b9d;box-shadow:inset 0 0 0 1px #070a0e,0 0 0 1px #1d2027,0 1px 1px #fff8}
.console-edge.left-wall:before{background:repeating-linear-gradient(90deg,#181a21 0 1px,#73767c 1.2px 1.8px,#22272b 2px 3px);box-shadow:inset 0 2px 2px #000b,inset 0 -1px #d6d7d380,0 0 0 1px #17151e}
.console-edge.right-wall:after{background:repeating-linear-gradient(90deg,#10141b 0 2px,#525965 2px 3px);box-shadow:inset 0 2px 2px #000,0 0 0 1px #e5def888,0 0 0 2px #30213799}
/* The ports sit inside the casing rather than spanning its full thickness. */
.console-edge.left-wall:after{left:28%;top:28%;width:8%;height:38%;border-radius:1px}
.console-edge.left-wall:before{left:58%;top:29%;width:8%;height:42%;border-radius:2px}
.console-edge.right-wall:after{left:17%;top:28%;width:7%;height:33%;border-radius:1px}

/* Each shell has its own rear photo; cartridge and pika pika colors are never hue-shifted. */
.orbit-console[data-skin="original"] .rear-texture{background-image:url("assets/select-shells/rear-original-yellow.webp")}
.orbit-console[data-skin="atomic"] .rear-texture{background-image:url("assets/select-shells/rear-atomic-yellow.webp")}
.orbit-console[data-skin="emerald"] .rear-texture{background-image:url("assets/select-shells/rear-emerald-yellow.webp")}
.orbit-console[data-skin="ice"] .rear-texture{background-image:url("assets/select-shells/rear-ice-yellow.webp")}
.orbit-console[data-skin="crystal"] .rear-texture{background-image:url("assets/select-shells/rear-crystal-yellow.webp")}
.orbit-console[data-skin="pikachu"] .rear-texture{background-image:url("assets/select-shells/rear-pikachu-yellow.webp")}
.orbit-console[data-skin="midnight"] .rear-texture{background-image:url("assets/select-shells/rear-midnight-yellow.webp")}

/* Printed battery mascots follow the opposing cell orientations. */
.battery-mark{position:absolute;display:block;width:12.4%;height:auto;object-fit:contain;pointer-events:none;opacity:.88}
.battery-mark-top{left:78%;top:60.94%}
.battery-mark-bottom{left:19.9%;top:72.74%;transform:rotate(180deg)}
.orbit-console[data-skin="original"] .battery-mark,.orbit-console[data-skin="pikachu"] .battery-mark{display:none}

/* Version follows ASTRA in normal flow, with removed tagline spacing closed. */
.picker-brand h1{margin-top:0}
.picker-version{display:block;margin:4px 0 0;color:inherit;font-family:inherit;font-size:12px;font-weight:650;line-height:1.05;letter-spacing:.24em;white-space:nowrap;pointer-events:none}

/* Independent cartridges sit behind the rear casing, with actual top and side faces.
   The cutout removes the former baked-in yellow cartridge, without tinting the label or batteries. */
.console-back{overflow:visible;transform-style:preserve-3d;background:none;box-shadow:none}
.rear-texture{border-radius:inherit;clip-path:polygon(0 0,11.4% 0,11.4% 36.7%,90.4% 36.7%,90.4% 0,100% 0,100% 100%,0 100%);transform:translateZ(.1px)}
.rear-slot-well{position:absolute;display:block;left:10.8%;top:.2%;width:80.2%;height:37.2%;border-radius:3% 3% 1% 1%;background:linear-gradient(90deg,#090b0fe8,#1d2923 7%,#101912 50%,#24332b 94%,#05070ae8);box-shadow:inset 2px 0 3px #000c,inset -2px 0 3px #000c;transform:translateZ(calc(var(--card-width) * -.07))}
.slot-cartridge{--cart-depth:calc(var(--card-width) * .055);position:absolute;display:block;left:12.1%;top:.5%;width:77.6%;height:51%;transform:translateZ(calc(var(--card-width) * -.018));transform-style:preserve-3d}
.cartridge-face{position:absolute;inset:0;display:block;overflow:hidden;border-radius:2% 2% 1% 1%;clip-path:polygon(0 0,88% 0,88% 4.5%,100% 4.5%,100% 100%,0 100%);background:var(--cartridge-color);box-shadow:inset 1px 1px 1px #fff5,inset -1px -1px 2px #0008;backface-visibility:hidden}
.cartridge-face img{position:absolute;display:block;max-width:none;object-fit:fill}
.cartridge-face::after{content:"";position:absolute;inset:0;background:linear-gradient(107deg,#ffffff14,transparent 22%,transparent 70%,#0003);pointer-events:none}
.cartridge-edge{position:absolute;display:block;background:linear-gradient(90deg,#ffffff60,#ffffff0c 14%,#0003 72%,#0008),var(--cartridge-color);backface-visibility:visible;box-shadow:inset 0 1px #ffffff70,inset 0 -1px #0008}
.cartridge-edge-left,.cartridge-edge-right{top:0;height:100%;width:var(--cart-depth);transform-origin:0 0;transform:rotateY(90deg)}
.cartridge-edge-left{left:0;background:repeating-linear-gradient(#0002 0 2px,#fff2 2px 3px),var(--cartridge-color)}
.cartridge-edge-right{left:100%;top:4.5%;height:95.5%}
.cartridge-edge-top{left:0;top:0;width:88%;height:var(--cart-depth);transform-origin:0 0;transform:rotateX(-90deg);background:linear-gradient(#ffffff88,#ffffff10 20%,#0005),var(--cartridge-color)}
.orbit-console[data-cartridge-form="color"] .cartridge-face{clip-path:inset(0 round 4% 4% 2% 2%)}
.orbit-console[data-cartridge-form="color"] .cartridge-edge-top{width:100%}
.orbit-console[data-cartridge-form="color"] .cartridge-edge-right{top:0;height:100%}
.rear-slot-shield{position:absolute;display:block;left:11.2%;top:21.1%;width:79.3%;height:15.9%;border-radius:1px 1px 3px 3px;border-top:1px solid #d6e3f5ad;background:linear-gradient(100deg,#ffffff22,transparent 12%,#ffffff06 48%,#ffffff2c 96%,#0004);box-shadow:0 -1px 0 #080d1880,inset 1px 0 1px #fff6,inset -1px 0 2px #070b1699;transform:translateZ(.3px)}
.rear-slot-rail{position:absolute;display:block;top:20.7%;width:1.5%;height:16%;border-radius:1px;background:linear-gradient(90deg,#ffffff66,#2920354d,#ffffff44);box-shadow:0 0 1px #000b;transform:translateZ(.7px)}
.rear-slot-rail-left{left:11.2%}.rear-slot-rail-right{right:9.3%}
.orbit-console:is([data-skin="original"],[data-skin="pikachu"]) .rear-slot-shield{background:linear-gradient(105deg,#ffffff24,#ffffff05 24%,#0001 80%,#0003),var(--shell-color);border-top-color:#ffffff77;box-shadow:0 -1px 0 #12102080,inset 1px 0 1px #fff5,inset -1px 0 2px #0005}
.orbit-console[data-skin="original"] .rear-slot-shield{background-color:#55328c}
.orbit-console[data-skin="pikachu"] .rear-slot-shield{background-color:#f8cc24}
.battery-mark{transform:translateZ(.4px)}
.battery-mark-bottom{transform:translateZ(.4px) rotate(180deg)}

/* Continuous opaque shell substrate closes the slot perimeter and grazing-angle seams. */
.rear-shell-backing{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,#ffffff20,#0002),var(--shell-color);transform:translateZ(calc(var(--card-width) * -.075));backface-visibility:hidden}
.console-edge{width:calc(var(--card-width) * var(--edge-length) + 1px);height:calc(var(--shell-depth) + .6px)}
.rear-slot-well{left:10%;width:82%;height:38%;background-color:var(--shell-color)}
/* Narrow specular bands and rolled ends follow the photographed horizontal AA cells. */
.battery-optics{position:absolute;display:block;left:17%;width:72%;height:9%;border-radius:7% / 48%;pointer-events:none;transform:translateZ(.25px);background:linear-gradient(to bottom,#0008 0%,#0002 12%,#ffffff08 21%,#ffffff58 30%,#ffffff12 42%,transparent 54%,#0002 76%,#0008 97%),radial-gradient(ellipse at 2% 48%,#e4e8e47a 0%,#ffffff30 2%,transparent 5%),radial-gradient(ellipse at 98% 48%,#e2d4c66b 0%,#28272966 2%,transparent 5%);box-shadow:inset 0 1px 1px #ffffff66,inset 0 -2px 2px #05050977}
.battery-optics-top{top:59.4%}.battery-optics-bottom{top:69.7%}
.orbit-console:is([data-skin="original"],[data-skin="pikachu"]) .battery-optics{display:none}
.rear-texture,.cartridge-face img{filter:contrast(1.045) saturate(1.025)}

/* Keep the full secret name inside its card when all five heroes are visible. */
.has-birdo .character-name{font-size:min(11px,2.65vw)}

/* A shared foot line and height, with Toad at three quarters of the group. */
.character-card{container-type:inline-size;--select-hero-height:min(150px,130cqw)}
.character-card .portrait img{height:var(--select-hero-height);width:auto;max-width:none;max-height:none;flex-shrink:0}
.character-card[data-character=toad] .portrait img{height:calc(var(--select-hero-height) * .75)}
.character-card[data-character=mario] .portrait img{height:calc(var(--select-hero-height) * .75 + 15px)}
.character-card.secret-hero .portrait img{height:calc(var(--select-hero-height) * 1.0651875);transform:scaleX(1.15);transform-origin:center bottom}
.character-card[aria-pressed=true] .portrait{transform:none}

/* Reserve the tallest portrait so Luigi cannot overlap the heading above the row. */
.character-card .portrait{min-height:calc(var(--select-hero-height) * 1.3)}
.character-card[data-character=luigi] .portrait img{height:calc(var(--select-hero-height) * .975);transform:scaleX(.93);transform-origin:center bottom}

.open-game-file{margin-top:12px;padding:11px 20px;min-height:44px;border:1px solid #d9bee865;border-radius:14px;background:#291c3dde;color:#f6edff;font:inherit;font-size:13px;cursor:pointer}.open-game-file small{margin-left:8px;color:#bca8ce;font-size:10px}.local-game-status{margin:5px 0 0;color:#ffd4bc;font-size:12px;text-align:center;max-width:340px}.local-game-status:empty{display:none}.local-game-fade{position:fixed;inset:0;z-index:99999;background:#000;opacity:0;transition:opacity 1s ease;pointer-events:all}.local-game-fade[hidden]{display:none}

/* Preserve front-cover scale and equal spacing as the collection grows. */
.game-ring{translate:0 0 calc(var(--radius) - var(--ring-radius,var(--radius)))}
.orbit-box{transform:rotateY(var(--angle)) translateZ(var(--ring-radius,var(--radius)))}
.restored-cover .box-front{border:1px solid #ffffff6b;box-shadow:0 10px 22px #0009,0 0 0 1px #0004}
.restored-cover .box-front:after{background:linear-gradient(100deg,#ffffff24,transparent 12%,transparent 88%,#0000001a)}
.restored-cover .box-spine{background:linear-gradient(90deg,#0008,#0003 22%,#0006),var(--box-art) center/cover;color:#fff;text-shadow:0 1px 3px #000}
.restored-cover .box-spine b{max-height:78%;font-size:10px;line-height:1.1;text-align:center}
.restored-cover .box-back{background:linear-gradient(#151122dd,#151122c9),var(--box-art) center/cover}
.restored-cover .box-back strong{font-size:15px;line-height:1.12;text-wrap:balance}

.game-picker[data-cover-atmosphere="true"] .game-atmosphere{filter:blur(12px) saturate(.75);opacity:.5;transform:scale(1.06)}

/* Daisy: a further 7.5% reduction from the previous 85% scale, on the game menu only. */
#gamePicker .princess-cameos .cameo.daisy{transform:rotate(7deg) scale(.78625) scaleY(1.1);transform-origin:bottom right}

/* Preserve the complete supplied Yellow cover, including its printed 2. */
.orbit-box[data-game="yellow"] .box-front>img{object-fit:contain;background:#fff}
.orbit-box[data-game="yellow"] .box-front:after{background:none}

/* Let longer Pocket Notes fit without clipping on compact screens. */
#gamePicker .game-fact{height:auto;flex-shrink:0}

/* Artwork fills the existing space without moving either header button. */
#gamePicker .library-heading{gap:10px}
#gamePicker .library-heading>button{flex-shrink:0}
.library-header-art{position:relative;flex:1;min-width:0;height:0;pointer-events:none}
.library-header-art img{position:absolute;display:block;width:100%;height:auto;max-height:80px;left:0;top:0;transform:translateY(-50%);object-fit:contain}

/* Balanced menu companions, with a clear 50px center channel. */
#gamePicker .princess-cameos .cameo{width:calc((100% - 50px)/2);max-width:none;height:auto;max-height:382.5px;object-fit:contain;transform:none;bottom:-40px}
#gamePicker .princess-cameos .cameo.peach{left:0;object-position:right bottom}
#gamePicker .princess-cameos .cameo.daisy{right:0;object-position:left bottom;transform:none;max-height:389px}
@media(max-width:500px){#gamePicker .princess-cameos .cameo.peach{max-height:267.75px}#gamePicker .princess-cameos .cameo.daisy{max-height:272.4px}}

/* Lift only the console-selection prompt without shifting the carousel. */
#shellPicker .picker-intro h2{position:relative;top:-5px}

/* The photos already contain reflections. Avoid full-face generated paint layers
   that can obscure the artwork when a browser recolors/composites them. */
.console-front::after,.console-back::after,.cartridge-face::after{content:none}

/* Fourteen game selectors: two centered rows with seven aligned columns. */
#gameDots{display:grid;grid-template-columns:repeat(7,28px);justify-content:center;justify-items:center;align-items:center;gap:6px 10px;width:100%;max-width:350px;margin-left:auto;margin-right:auto}

/* Dark browser/safe-area canvas after leaving the console selector. */
html.past-console-select,html.past-console-select body{background:#17111f}

/* Smooth illustration resampling with restrained shadows around cutout edges. */
.character-card .portrait img,.princess-cameos .cameo,.library-header-art img{image-rendering:auto}
.character-card .portrait img{filter:drop-shadow(0 3px 4px #0005)}
.secret-hero .portrait img{filter:drop-shadow(0 3px 4px #0005)}
#gamePicker .princess-cameos .cameo{filter:drop-shadow(0 3px 5px #17091f88)}

/* Raise only Peach in the game carousel, preserving the unlocked cameo position. */
#gamePicker .princess-cameos .cameo.peach[src$="/peach.webp"]{bottom:-30px}