html,body{touch-action:manipulation}
#pp-stage{max-width:1060px;margin:0 auto;touch-action:manipulation}
#pp-frame{position:relative;border:3px solid var(--ink);border-radius:10px;overflow:hidden;background:#0b1c33;touch-action:manipulation}
#pp-c{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}
#pp-ui{display:flex;justify-content:space-between;align-items:center;margin:.5rem 0;font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--ink-soft);touch-action:manipulation}
.pp-pads{display:none;justify-content:space-between;align-items:flex-end;gap:.6rem;margin-top:.6rem;user-select:none;-webkit-user-select:none}
.pp-pad{display:flex;gap:.7rem;align-items:flex-end}
.pp-dpad{flex-direction:column;align-items:center;gap:.5rem}
.pp-dpad .pp-row{display:flex;gap:.8rem}
.pp-b{width:74px;height:74px;border-radius:14px;border:2px solid var(--ink);background:var(--white);font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:.72rem;color:var(--ink);display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-tap-highlight-color:transparent}
.pp-b:active{background:var(--orange);color:var(--white)}
.pp-act{align-items:center;gap:1.1rem}
.pp-act .pp-b{width:82px;height:82px}
.pp-act #pp-fire{margin-left:8px}
@media (hover:none) and (pointer:coarse){.pp-pads{display:flex}}
@media (max-width:360px){.pp-b{width:64px;height:64px}.pp-act .pp-b{width:72px;height:72px}}
.pp-keys{font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--ink-soft);margin-top:.7rem}
.pp-keys b{color:var(--ink)}
/* fixed fullscreen game mode (mobile-first) */
#pp-exit{display:none;position:absolute;top:6px;right:6px;z-index:7;width:34px;height:34px;background:#0d1230;color:#f2c94c;border:3px solid #f2c94c;font-family:'Press Start 2P',monospace;font-size:.7rem;cursor:pointer}
body.pp-fixed{overflow:hidden}
body.pp-fixed .callbar{display:none!important}
#pp-stage.pp-fx{position:fixed;inset:0;z-index:10000;background:#070a18;max-width:none;margin:0;display:flex;flex-direction:column;padding:6px;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
#pp-stage.pp-fx #pp-frame{margin:0 auto!important;box-shadow:none!important;border-width:3px!important;width:100%;max-width:calc((100dvh - 200px)*16/9)}
#pp-stage.pp-fx #pp-exit{display:block}
#pp-stage.pp-fx #pp-ui{margin:.3rem auto;width:100%;max-width:calc((100dvh - 200px)*16/9);flex:0 0 auto;flex-wrap:nowrap;gap:8px}
#pp-stage.pp-fx #pp-fs{display:none}
#pp-stage.pp-fx #pp-mute{white-space:nowrap;flex:0 0 auto}
#pp-stage.pp-fx #pp-score{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:none) and (pointer:coarse){#pp-stage.pp-fx .pp-pads{display:flex!important;flex:1 1 auto;align-items:center;justify-content:space-between;margin:.4rem 0 0;padding:0 max(14px,env(safe-area-inset-left)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right));background:linear-gradient(#0c1126,#070a18);border-top:3px solid #14202e}}
@media (hover:hover) and (pointer:fine){#pp-stage.pp-fx{justify-content:center}#pp-stage.pp-fx #pp-frame{max-width:calc((100dvh - 96px)*16/9)}#pp-stage.pp-fx #pp-ui{max-width:calc((100dvh - 96px)*16/9)}}
#pp-stage.pp-fx .pp-keys{display:none}
#pp-stage.pp-fx .pp-b{width:clamp(66px,19vw,98px);height:clamp(66px,19vw,98px);font-size:.58rem}
#pp-stage.pp-fx .pp-dpad{gap:clamp(.5rem,2.6vw,.95rem)}
#pp-stage.pp-fx .pp-dpad .pp-row{gap:clamp(.55rem,3vw,1.1rem)}
#pp-stage.pp-fx .pp-pad{gap:clamp(.7rem,3.4vw,1.15rem)}
#pp-stage.pp-fx .pp-act{gap:clamp(1rem,5vw,2rem)}
#pp-stage.pp-fx .pp-act .pp-b{width:clamp(74px,21vw,104px);height:clamp(74px,21vw,104px)}
/* landscape: rotate the phone → big immersive screen, controls overlay the bottom corners */
@media (orientation:landscape) and (max-height:560px) and (hover:none) and (pointer:coarse){
#pp-stage.pp-fx{padding:4px 4px 100px;justify-content:center;align-items:center}
#pp-stage.pp-fx #pp-frame{width:auto!important;max-width:none!important;height:min(calc(100dvh - 108px),calc(100dvw*9/16))!important}
#pp-stage.pp-fx #pp-c{width:auto;height:100%}
#pp-stage.pp-fx #pp-ui{position:absolute;top:4px;left:8px;width:auto;max-width:none;margin:0;background:rgba(7,10,24,.55);padding:2px 8px;z-index:6}
#pp-stage.pp-fx #pp-ui #pp-fs,#pp-stage.pp-fx #pp-ui #pp-mute{display:none}
#pp-stage.pp-fx .pp-pads{position:fixed;left:0;right:0;bottom:0;flex:none;align-items:center;justify-content:space-between;margin:0;background:linear-gradient(#0c1126,#070a18);border-top:3px solid #14202e;padding:8px max(20px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));z-index:6}
#pp-stage.pp-fx .pp-dpad .pp-row{gap:clamp(.7rem,3vw,1.2rem)}
#pp-stage.pp-fx .pp-pads .pp-pad{pointer-events:auto}
#pp-stage.pp-fx .pp-b{width:clamp(62px,20vh,80px);height:clamp(62px,20vh,80px)}
#pp-stage.pp-fx .pp-act .pp-b{width:clamp(66px,21vh,84px);height:clamp(66px,21vh,84px)}
#pp-stage.pp-fx .pp-act #pp-fire{margin-left:clamp(10px,3vw,20px)}
#pp-stage.pp-fx .pp-act{gap:clamp(.9rem,4vw,1.6rem)}
}
@media (hover:none) and (pointer:coarse){#pp-stage{padding-bottom:120px}}
/* ============ RETRO CRT TAKEOVER — this page only ============ */
@font-face{font-family:'Press Start 2P';src:url('../assets/fonts/press-start-2p.woff2') format('woff2');font-display:swap}
body{background:#070a18}
/* CRT overlays sit BELOW the page chrome (topbar 45, header 50, callbar 70) so they never draw over the
top banner / bottom bar — on iOS Safari, full-viewport fixed overlays over those bars misrender with
the dynamic URL bar. Effect stays over the content. */
body::before{content:'';position:fixed;inset:0;z-index:40;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
body::after{content:'';position:fixed;inset:0;z-index:39;pointer-events:none;background:radial-gradient(ellipse at center,transparent 58%,rgba(2,4,12,.55) 100%)}
#pp-stage *{border-radius:0!important}
body *{border-radius:0!important}
img{image-rendering:pixelated}
.page-hero{background:linear-gradient(#0d1230,#1a1040)!important}
.page-hero .display{font-family:'Press Start 2P','IBM Plex Mono',monospace;font-size:clamp(.9rem,3.2vw,1.5rem);line-height:1.75;color:#f2c94c;text-shadow:3px 3px 0 #b23a48,6px 6px 0 #14202e}
.page-hero .lede{font-family:'IBM Plex Mono',monospace;color:#9fd4e8;font-size:.88rem}
.page-hero .lede::after{content:'▌';color:#f2c94c;animation:ppblink 1s steps(1) infinite;margin-left:.2rem}
@keyframes ppblink{50%{opacity:0}}
.crumbs,.crumbs a,.crumbs span{font-family:'Press Start 2P',monospace;font-size:.5rem!important;color:#69d2e7!important;letter-spacing:.1em}
main section.section{background:#0a0e22!important}
main section.section.tint{background:#0d1230!important}
main .eyebrow{font-family:'Press Start 2P',monospace;font-size:.55rem;color:#f08a24;letter-spacing:.15em}
main .prose p{color:#cfd8ea;font-family:'IBM Plex Mono',monospace;font-size:.86rem}
main .prose a{color:#69d2e7}
#pp-frame{border:4px solid #f2c94c!important;box-shadow:0 0 0 4px #14202e,0 0 0 8px #b23a48,0 0 0 12px #14202e,0 16px 0 12px #000;background:#000!important;margin:14px 14px 40px}
#pp-ui{font-family:'Press Start 2P',monospace!important;font-size:.52rem!important;color:#9fd4e8;padding:0 12px;position:relative;z-index:3}
#pp-ui span{font-family:inherit!important;font-size:inherit!important}
#pp-mute{font-family:'Press Start 2P',monospace!important;font-size:.5rem!important;border:3px solid #f2c94c!important;background:#0d1230!important;color:#f2c94c!important;padding:.5rem .7rem!important;cursor:pointer}
.pp-pads{padding:0 12px;position:relative;z-index:3}
.pp-b{font-family:'Press Start 2P',monospace!important;font-size:.5rem!important;background:#0d1230!important;color:#f2c94c!important;border:3px solid #f2c94c!important;box-shadow:3px 3px 0 #14202e}
.pp-b:active{background:#f08a24!important;color:#0d1230!important;transform:translate(2px,2px);box-shadow:1px 1px 0 #14202e}
#pp-fire{border-color:#ff7a2d!important;color:#ff7a2d!important;box-shadow:3px 3px 0 #5a1e08!important}
#pp-fire:active{background:#ff7a2d!important;color:#0d1230!important}
.pp-keys{color:#7f93b8!important;padding:0 12px}
.pp-keys b{color:#f2c94c!important}
.topbar{background:#0d1230!important;position:relative;z-index:45}
.topbar span,.topbar a{color:#9fd4e8!important}
header.nav{background:#0a0e22!important;border-bottom:3px solid #f2c94c;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
header.nav .brand-name,header.nav .navlinks>li>a,header.nav .menu-btn{color:#e8e2d2!important}
header.nav .menu-btn{border-color:#f2c94c!important}
.navlinks .sub{background:#0d1230!important;border:2px solid #f2c94c}
.navlinks .sub a{color:#e8e2d2!important}
.m-menu{background:#0d1230!important}
.m-menu a,.m-menu summary{color:#e8e2d2!important}
footer{background:#070a18!important;border-top:3px solid #f2c94c}
.callbar{background:#0d1230!important;border-top:2px solid #f2c94c;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* --- deeper 8-bit dressing (page chrome, this page only) --- */
.page-hero{border-bottom:3px solid #f2c94c}
.page-hero .display{letter-spacing:.02em}
.page-hero .lede{max-width:770px;border:3px solid #2a5a86;background:rgba(6,12,28,.45);padding:14px 16px;box-shadow:5px 5px 0 #14202e;line-height:1.75}
main .prose{border:3px solid #f2c94c;background:#0a1024;padding:20px 22px;box-shadow:7px 7px 0 #14202e}
main .prose p{line-height:1.8}
.pp-cap{font-family:'Press Start 2P',monospace;font-size:.58rem;color:#f08a24;letter-spacing:.1em;margin:1rem 12px .45rem}
.pp-keys{border:3px solid #2a5a86!important;background:rgba(6,12,28,.5);box-shadow:4px 4px 0 #14202e;padding:12px 14px!important;margin:.4rem 12px .2rem!important;line-height:2.1}
.pp-keys b{background:#0d1230;border:2px solid #f2c94c;padding:0 5px;color:#f2c94c!important;white-space:nowrap}
#pp-stage.pp-fx .pp-cap{display:none}