*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;height:100%}
body{margin:0;background:#000;color:#ffb27a;min-height:100vh;min-height:100svh;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 background-image:radial-gradient(ellipse at 50% 0,rgba(253,94,2,.18),transparent 60%);
 padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.stage{display:flex;justify-content:center;align-items:center;width:100%;padding:8px}
.view{aspect-ratio:1672/941;width:min(100%,calc((100vh - 16px) * 1672 / 941));
 width:min(100%,calc((100svh - 16px) * 1672 / 941));
 border:0;border-radius:10px;overflow:hidden;background:#000}
.view svg{display:block;width:100%;height:100%}
.pin{cursor:pointer;outline:none}
.pin polygon{fill:rgba(253,94,2,0);stroke:#fd5e02;stroke-width:5;stroke-linejoin:round;stroke-opacity:0;transition:stroke-opacity .15s,fill .15s}
.pin:hover polygon,.pin:focus-visible polygon,.pin:active polygon{stroke-opacity:1;fill:rgba(253,94,2,.08)}
/* landing screen */
@font-face{font-family:"PS2P";src:url("/assets/fonts/press-start-2p.woff2") format("woff2");font-display:block}
.enter{position:fixed;inset:0;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;transition:opacity .5s ease}
.enter.out{opacity:0;pointer-events:none}
.enter.gone{display:none}
/* ENTER = the pinball-tables .btn (PLAY / CONNECT WALLET / OK) scaled x2 as the main call to action:
   PS2P, #fd5e02 fill, black text, no border, radius, flat darker-orange drop shadow, press-down on tap */
.enter-btn{font-family:"PS2P",monospace;font-size:18px;line-height:1.6;font-weight:400;letter-spacing:normal;color:#000;background:#fd5e02;
 border:0;border-radius:16px;padding:20px 24px;cursor:pointer;touch-action:manipulation;box-shadow:none;text-align:center}
.enter-btn:hover,.enter-btn:focus,.enter-btn:focus-visible{background:#fd5e02;outline:none}
.enter-btn:active{transform:none;box-shadow:none}
/* landing state: the arcade picture is blurred inside its frame until ENTER */
.view svg{transition:filter .5s ease;clip-path:inset(0 round 7px)}
body.landing .view svg{filter:blur(7px)}
@media (max-width:700px){body.landing .view svg{filter:blur(3.5px)}}
/* machine flicker overlays (added after ENTER by glow.js), in the picture's coordinate space */
.view{position:relative}
.glow{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.glow img{position:absolute;display:block;opacity:0;pointer-events:none;user-select:none;-webkit-user-select:none;max-width:none}
/* walk-forward floor marker (Street View style): faint orange disc with an arrow-shaped hole, laid flat on the floor */
.walk,.fwalk{cursor:pointer;outline:none;opacity:1;transition:opacity .5s ease}
body.landing .walk{opacity:0;pointer-events:none}
.walk-hit{fill:transparent}
.walk-ring{fill:#fd5e02;fill-opacity:.5;transition:fill-opacity .2s ease}
.walk-glow{fill:#fd5e02;opacity:0;pointer-events:none;transition:opacity .2s ease}
/* light up on hover (mouse) and briefly on touch/press (.lit, set by walk.js) */
@media (hover:hover){.walk:hover .walk-ring,.fwalk:hover .walk-ring{fill-opacity:.85}.walk:hover .walk-glow,.fwalk:hover .walk-glow{opacity:.55}}
.walk.lit .walk-ring,.fwalk.lit .walk-ring,.walk:focus-visible .walk-ring{fill-opacity:.85}
.walk.lit .walk-glow,.fwalk.lit .walk-glow,.walk:focus-visible .walk-glow{opacity:.55}
/* moving between sections: a plain crossfade, no zoom */
.view.walking .walk{opacity:0;pointer-events:none;transition:opacity .25s ease}
.view.walked>svg,.view.walked>.glow{visibility:hidden}
.fwd{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transition:opacity .8s ease}
.view.walking .fwd{opacity:1}
.fwd-in{position:absolute;inset:0}
/* same presentation as the main picture: same box, same rounded clip as .view svg */
.fwd img{display:block;width:100%;height:100%;object-fit:contain;clip-path:inset(0 round 7px);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.fwd-nav{position:absolute;inset:0;width:100%;height:100%;display:block}
.fwd .fwalk{pointer-events:none}
.view.walked .fwd .fwalk{pointer-events:auto}
/* rain outside the left-wall window: canvas over the window (picture space x352-480, y160-520), masked to the glass */
.rain{position:absolute;left:21.0526%;top:17.0032%;width:7.6555%;height:38.2572%;pointer-events:none}
/* BIGGEST BONEROS board on the next section's back wall (live top scores); tap shows it larger */
.fwd .lb{pointer-events:none;cursor:pointer;outline:none}
.view.walked .fwd .lb{pointer-events:auto}
.lb-title{font-family:"PS2P",monospace;font-size:11px;fill:#fd5e02}
.lb-row{font-family:"PS2P",monospace;font-size:7.4px;fill:#fff}
.lb-row .g{fill:#fd5e02}
.lb-pop{position:fixed;inset:0;z-index:5;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);-webkit-tap-highlight-color:transparent}
.lb-pop.on{display:flex;pointer-events:auto}
.lb-panel{background:#0b0705;border:2px solid #fd5e02;border-radius:6px;box-shadow:0 0 16px rgba(253,94,2,.7);padding:4% 5%;max-width:92%;max-height:90%;overflow:auto;font-family:"PS2P",monospace;color:#fff}
.lb-h{color:#fd5e02;text-align:center;font-size:clamp(10px,2.6vmax,18px);margin-bottom:.9em}
.lb-t{border-collapse:collapse;font-size:clamp(8px,1.7vmax,13px);line-height:1.9}
.lb-t td{padding:0 .7em;white-space:nowrap}
.lb-t td:first-child{color:#fd5e02;padding-left:0}
.lb-t td:last-child{text-align:right;padding-right:0}