:root{color-scheme:dark;--bg:#131c25;--panel:#1a2630;--line:#33424a;--text:#e7e7d9;--muted:#9eada9;--orange:#f4a860}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,"PingFang SC",sans-serif}main{max-width:1280px;margin:auto;padding:0 42px}button,select{font:inherit;color:inherit;background:transparent;border:1px solid var(--line);cursor:pointer;padding:9px 14px;border-radius:3px}button:hover{border-color:var(--orange);color:var(--orange)}button:disabled{opacity:.55;cursor:wait}button.active{color:var(--orange);background:#f4a8600b;border-color:#956749}button:focus-visible,canvas:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}header{height:92px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{text-decoration:none;color:var(--text);font-size:15px;letter-spacing:2px;font-weight:750}.brand-mark{color:var(--orange);font-size:30px;margin-right:8px}nav{display:flex;gap:10px}nav button{border:none}nav span{font:11px monospace;color:var(--muted);margin-left:7px}.status{font-size:12px;color:var(--muted)}.status i,.live-dot{display:inline-block;width:6px;height:6px;background:#98c19c;border-radius:50%;margin-right:8px}.intro{display:flex;align-items:center;justify-content:space-between;margin:42px 0 31px}.eyebrow{letter-spacing:2px;font-size:11px;color:var(--orange);margin:0 0 13px}h1{font-size:35px;letter-spacing:-1px;margin:0 0 13px;font-weight:700}h1 em{font-style:normal;color:var(--orange)}.intro p:last-child{font-size:14px;color:var(--muted);margin:0}.chapter{border-left:1px solid var(--line);padding-left:24px;display:flex;flex-direction:column;gap:8px}.chapter span,.chapter small{font-size:11px;color:var(--muted)}.chapter strong{font-size:16px}.panel{border:1px solid var(--line);background:var(--panel);border-radius:5px;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 19px;font-size:12px;border-bottom:1px solid var(--line)}.panel-head button{font-size:12px;padding:5px 10px;border-color:transparent}.viewport{position:relative;background:#131f27}canvas{display:block;image-rendering:pixelated}#game{width:100%;height:auto;max-height:72vh;object-fit:contain;outline-offset:-3px}#overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;background:linear-gradient(#0f1c2690,#0f1c26cf);text-align:center;padding:26px}#overlayTag{font-size:11px;letter-spacing:3px;color:var(--orange)}#overlay h2{font-size:44px;margin:18px 0 10px}#overlay p{font-size:14px;color:#bbc9c3;line-height:1.8;margin-bottom:25px}#start{background:var(--orange);color:#222a2b;border:0;padding:13px 32px;font-weight:700}#overlay small{margin-top:14px;color:var(--muted);font-size:11px}.instructions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 19px;font-size:11px;color:var(--muted);border-top:1px solid var(--line)}kbd{font:11px monospace;padding:3px 5px;border:1px solid #54616a;background:#27363e;margin-right:4px;border-radius:2px}.hidden{display:none!important}.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin:34px 0 40px}.notes article{border-top:1px solid var(--line);padding-top:16px}.notes span{color:var(--orange);font:10px monospace;letter-spacing:1px}.notes h3{font-size:17px;margin:12px 0}.notes p{font-size:12px;line-height:1.9;color:var(--muted);margin:0}footer{display:flex;justify-content:space-between;padding:23px 0;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.touch-controls{display:none;position:absolute;left:12px;right:12px;bottom:12px;justify-content:space-between;pointer-events:none}.touch-controls>div{display:flex;gap:6px}.touch-controls button{pointer-events:auto;touch-action:none;user-select:none;background:#182832bb;border-color:#a9b8a44d;width:43px;height:43px;padding:0;color:#e7e7d9;border-radius:50%}.touch-controls button.pressed{background:#c88244;color:#18212b}.lab-layout{display:grid;grid-template-columns:1fr 260px}.lab-stage{min-width:0;background:#15212b;padding:10px 20px 22px}#lab{width:100%;height:auto;max-height:54vh;object-fit:contain}.lab-options{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px}.lab-options button,.lab-options select{padding:7px 10px;font-size:12px}.seek{display:flex;gap:14px;align-items:center;font-size:11px;color:var(--muted);margin-top:16px}.seek input{flex:1;accent-color:var(--orange);min-width:0}.action-list{display:flex;flex-direction:column;border-left:1px solid var(--line);padding:12px;gap:6px}.action-list button{text-align:left;display:flex;align-items:center;justify-content:space-between;font-size:14px;padding:11px 13px}.action-list small{font:10px monospace;color:var(--muted)}.lab-caption{display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding:14px 20px}.lab-caption p{font-size:11px;color:var(--muted);line-height:1.7;margin:0}.lab-caption p:first-child{color:var(--text)}@media(pointer:coarse){.touch-controls{display:flex}.instructions{font-size:10px}#game{max-height:none}}@media(max-width:740px){.touch-controls{display:flex}main{padding:0 14px}header{height:70px;gap:10px}.brand{font-size:11px;letter-spacing:1px}.brand-mark{font-size:23px}.status{display:none}nav{gap:0}nav button{font-size:12px;padding:8px}.intro{margin:27px 0 23px}h1{font-size:24px;line-height:1.5;letter-spacing:0}h1 em{display:block}.eyebrow{font-size:9px}.intro p:last-child{font-size:12px}.chapter{display:none}.panel-head{padding:10px;font-size:11px}.panel-head button{padding:4px 5px;font-size:10px}.instructions{justify-content:flex-start;padding:10px;gap:10px}.notes{grid-template-columns:1fr;gap:20px;margin:25px 0}.notes h3{font-size:15px}.notes p{font-size:12px}footer{gap:10px;line-height:1.8}#overlay h2{font-size:28px;margin:10px}#overlay p{font-size:11px;margin:5px 0 12px}#overlayTag{font-size:8px}#start{padding:9px 18px;font-size:12px}#overlay small{font-size:9px;margin-top:9px}.lab-layout{grid-template-columns:1fr}.action-list{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:10px;gap:5px}.action-list button{font-size:12px;display:block;text-align:center;padding:9px 3px}.action-list small{display:block;font-size:8px;margin-top:4px}.lab-caption{display:block;padding:12px}.lab-caption p+p{margin-top:9px}.lab-stage{padding:10px}.touch-controls button{width:34px;height:34px}.touch-controls{bottom:8px;left:8px;right:8px}.touch-controls>div{gap:4px}}
.asset-link{color:var(--orange);font-size:11px;text-decoration:none;white-space:nowrap}.asset-link:hover{text-decoration:underline}

.mobile-hud{display:none;position:absolute;left:0;right:0;top:0;height:34px;padding:8px 12px;align-items:center;justify-content:space-between;gap:8px;background:#15262bf2;color:#e5d2a8;font:11px ui-sans-serif,system-ui;pointer-events:none;z-index:1}.mobile-hud span:first-child{color:#f4a860;letter-spacing:2px}#overlay{z-index:2}.touch-controls{z-index:3}@media(max-width:740px),(pointer:coarse){.mobile-hud{display:flex}}@media(max-height:480px){.intro,.notes,footer,.instructions{display:none}main{padding:0}header{height:42px;padding:0 10px}.status{display:none}.brand{font-size:11px}.brand-mark{font-size:20px}nav button{font-size:11px;padding:6px}.panel{border-radius:0}.panel-head{padding:4px 10px;height:35px}#game{height:calc(100dvh - 79px);width:100%;max-height:none;object-fit:contain}.mobile-hud,.touch-controls{display:flex}.touch-controls button{width:43px;height:43px}}

.character-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(510px,100%);margin:0 0 22px}.character-card{display:flex;gap:12px;align-items:center;text-align:left;padding:12px;background:#172731e8;border:1px solid #647776;border-radius:5px;min-width:0}.character-card.active{border-color:var(--orange);background:#293437}.character-card img{image-rendering:pixelated;object-fit:contain;width:70px;height:70px;flex-shrink:0}.character-card span{display:flex;flex-direction:column;gap:5px;min-width:0}.character-card strong{font-size:16px;color:var(--text)}.character-card small{font:9px monospace;letter-spacing:1px;margin:0!important}.character-card em{font-size:10px;font-style:normal;color:var(--muted);line-height:1.5}.panel-head select{padding:3px 5px;font-size:11px;margin-left:10px}body[data-character="gastly"]{--orange:#c8a4ef}.viewport.selecting{min-height:330px}#overlay[data-menu="true"] h2{font-size:30px;margin:10px 0}#overlay[data-menu="true"] p{margin:0 0 16px}#overlay:not([data-menu="true"]) .character-choices{display:none}.asset-link{min-width:135px}.mobile-hud span:first-child{color:var(--orange)}
@media(max-width:740px){.character-choices{gap:7px;margin-bottom:13px}.character-card{gap:6px;padding:8px 5px}.character-card img{width:42px;height:55px}.character-card strong{font-size:12px}.character-card small{font-size:7px}.character-card em{font-size:8px}.character-card span{gap:4px}#overlay[data-menu="true"] h2{font-size:23px}#overlay[data-menu="true"] p{margin:0 0 12px}#overlay{padding:18px}.panel-head label{font-size:10px}.panel-head select{margin-left:3px;max-width:125px}}
@media(max-height:480px){.viewport.selecting{min-height:0}#overlay[data-menu="true"] h2{font-size:24px;margin:3px 0}#overlay[data-menu="true"] p{margin:0 0 8px;font-size:11px}.character-choices{margin-bottom:10px;max-width:470px}.character-card{padding:5px 12px}.character-card img{width:48px;height:48px}.character-card strong{font-size:12px}.character-card em{font-size:9px}#overlay{padding:10px}#overlay small{margin-top:7px}}
body[data-character="gastly"] button.active{border-color:#a28ac1;background:#c8a4ef0b}body[data-character="gastly"] .character-card.active{background:#302c41}body[data-character="gastly"] .touch-controls button.pressed{background:#af8cd2;color:#18212b}

/* Three companions share a compact, responsive chooser. */
.character-choices{grid-template-columns:repeat(3,minmax(0,1fr));width:min(690px,100%)}
body[data-character="pikachu"]{--orange:#f7d65c}body[data-character="pikachu"] button.active{border-color:#b39742;background:#f7d65c0b}body[data-character="pikachu"] .character-card.active{background:#393827}body[data-character="pikachu"] .touch-controls button.pressed{background:#f7d65c;color:#18212b}
@media(max-width:740px){.character-card{flex-direction:column;text-align:center;padding:7px 3px;gap:3px}.character-card img{width:45px;height:48px}.character-card strong{font-size:11px}.character-card small{font-size:6px;letter-spacing:0}.character-card em{font-size:8px}.character-choices{gap:5px}.character-card span{gap:3px}}
@media(max-height:480px){.character-choices{max-width:650px}.character-card{flex-direction:row;text-align:left;padding:5px 8px}.character-card img{width:45px;height:45px}.character-card strong{font-size:12px}.character-card small{font-size:7px}.character-card em{font-size:8px}}

.skill-hint{margin:0;padding:0 19px 13px;color:var(--muted);font-size:11px;line-height:1.7}@media(max-width:740px){.skill-hint{padding:0 10px 10px;font-size:10px}}@media(max-height:480px){.skill-hint{display:none}}
.viewport.selecting .touch-controls,.viewport.selecting .mobile-hud{display:none}
.character-card em{word-break:keep-all}

/* Play surface: the page disappears, the arena and thumb controls remain. */
html:has(body.immersive),body.immersive{height:100%;overflow:hidden;overscroll-behavior:none;background:#13242b}
body.immersive main{padding:0;max-width:none}
body.immersive header,body.immersive .intro,body.immersive .notes,body.immersive footer,body.immersive .instructions,body.immersive .skill-hint{display:none}
body.immersive #gamePanel{position:fixed;inset:0;z-index:20;width:100%;height:100dvh;border:0;border-radius:0;background:#13242b}
body.immersive .viewport{position:absolute;inset:0;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#304641,#13242b 85%);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body.immersive #game{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;outline:none}
body.immersive .panel-head{position:absolute;z-index:8;top:max(10px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));height:34px;padding:0;border:0;background:#14252bbb;border-radius:8px;backdrop-filter:blur(8px)}
body.immersive .panel-head>span,body.immersive #restart{display:none}
body.immersive .panel-head>div{display:flex;gap:1px}
body.immersive .panel-head button{height:34px;font-size:11px;padding:5px 9px;border-radius:7px;color:#dddccd}
body.immersive .panel-head #immersive{color:var(--orange)}
body.immersive .mobile-hud{display:flex;left:max(14px,env(safe-area-inset-left));right:auto;top:max(10px,env(safe-area-inset-top));width:min(44%,340px);height:34px;border-radius:8px;padding:8px 11px;font-size:11px;background:#14252bbb;backdrop-filter:blur(8px)}
.touch-controls{align-items:flex-end;bottom:max(17px,env(safe-area-inset-bottom));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));gap:14px}
.touch-controls .move-controls{display:flex;flex-direction:column;align-items:center;gap:5px}
#joystick{pointer-events:auto;position:relative;width:118px;height:118px;border:1px solid #d0e1c94d;border-radius:50%;background:radial-gradient(circle,#bcccb217 55%,#192c3159 56%);touch-action:none;box-shadow:inset 0 0 0 9px #d0e1c908}
.stick-guide{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:13px;font-size:15px;color:#dbe6c877;pointer-events:none}.stick-guide span{color:#dbe6c855}
#stickThumb{position:absolute;top:50%;left:50%;width:49px;height:49px;transform:translate(-50%,-50%);border:1px solid #c5d8c266;background:linear-gradient(#42594bc9,#263e36c9);border-radius:50%;pointer-events:none;box-shadow:0 5px 18px #07191f44}
.move-hint{font-size:9px;color:#cbd6c9a8;letter-spacing:1px;pointer-events:none}
.touch-controls .action-controls{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(2,54px);gap:8px;align-items:center}
.touch-controls button{width:54px;height:54px;font-size:11px;border:1px solid #dddcb95c;background:#182d30a6;color:#f3e7cf;backdrop-filter:blur(4px);box-shadow:0 3px 12px #08191e33;touch-action:none;-webkit-tap-highlight-color:transparent;transition:background .08s,transform .08s}
.touch-controls button.pressed{transform:scale(.93);background:var(--orange);color:#18212b}
.touch-jump{grid-column:2;grid-row:1}.touch-melee{grid-column:1;grid-row:2}.touch-ranged{grid-column:2;grid-row:2;border-color:var(--orange)!important;color:var(--orange)!important}.touch-ranged.pressed{color:#18212b!important}.touch-dodge{grid-column:3;grid-row:2}
body.immersive .touch-controls{display:flex}
body.immersive #overlay{padding:48px max(26px,env(safe-area-inset-right)) 20px;background:linear-gradient(#10212aca,#12232bf2);z-index:5}
body.immersive #overlay h2{font-size:30px;margin:6px 0 8px}
body.immersive #overlay p{margin:0 0 13px;font-size:12px}
body.immersive .character-choices{width:min(630px,100%);gap:10px;margin:0 0 14px}
body.immersive .character-card{flex-direction:row;text-align:left;padding:12px;gap:10px;min-height:87px;background:#1b303ae0}
body.immersive .character-card img{width:57px;height:57px}
body.immersive .character-card strong{font-size:14px}
body.immersive .character-card small{font-size:7px}
body.immersive .character-card em{font-size:9px}
body.immersive #start{padding:12px 28px;font-size:13px;border-radius:6px}
body.immersive #loadingInfo{margin-top:10px;font-size:10px}
.viewport:not(.selecting):has(#overlay:not(.hidden)) .touch-controls{visibility:hidden}
.rotate-prompt{display:none;position:absolute;inset:0;z-index:10;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px max(24px,env(safe-area-inset-right));background:radial-gradient(ellipse at 50% 35%,#31443e,#101f28 80%)}
.rotate-icon{width:87px;height:58px;border:2px solid var(--orange);border-radius:12px;display:grid;place-items:center;color:var(--orange);font-size:37px;margin:0 0 35px;transform:rotate(-15deg)}
.rotate-prompt h2{font-size:26px;margin:0 0 15px}.rotate-prompt>p:not(.eyebrow){font-size:14px;line-height:1.9;color:var(--muted);margin:0 0 28px}.rotate-prompt button{padding:13px 24px;border-radius:7px;font-size:13px}.rotate-prompt #rotateFullscreen{background:var(--orange);color:#18212b;border:0;font-weight:700}.rotate-prompt #rotateBack{margin-top:12px;border:0;color:var(--muted)}.rotate-prompt small{font-size:10px;line-height:1.8;color:var(--muted);margin-top:27px;max-width:280px}
body.immersive[data-rotated="true"] .rotate-prompt{display:flex}
body.immersive[data-rotated="true"] .panel-head{display:none}
.play-notice{position:absolute;z-index:11;left:50%;top:55px;transform:translateX(-50%);width:max-content;max-width:85%;border:1px solid #50645a;border-radius:7px;background:#13252bf0;color:#e5e3d1;font-size:11px;line-height:1.8;margin:0;padding:9px 14px;text-align:center;pointer-events:none}
@media(max-height:380px) and (orientation:landscape){body.immersive #overlay{padding-top:45px;padding-bottom:9px}body.immersive #overlay h2{font-size:23px;margin:2px 0 5px}body.immersive #overlay p{font-size:11px;margin-bottom:8px}body.immersive .character-card{padding:7px;min-height:65px;gap:7px}body.immersive .character-card img{width:43px;height:43px}body.immersive .character-choices{margin-bottom:9px}body.immersive #start{padding:9px 22px}body.immersive #loadingInfo{margin-top:7px;font-size:9px}#joystick{width:104px;height:104px}.touch-controls .action-controls{grid-template-columns:repeat(3,49px);grid-template-rows:repeat(2,49px);gap:7px}.touch-controls button{width:49px;height:49px}.touch-controls{bottom:max(12px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}}
@media(max-width:650px) and (orientation:landscape){body.immersive .panel-head button{padding:5px 7px;font-size:10px}body.immersive .mobile-hud{font-size:10px;padding:7px 8px;width:43%}body.immersive .mobile-hud span:first-child{letter-spacing:1px}body.immersive .character-card{gap:5px}body.immersive .character-card small{font-size:6px}body.immersive .character-card strong{font-size:12px}}