* { box-sizing: border-box; margin: 0; }
:root { --arcade-ink:#050607; --arcade-panel:rgba(7,10,12,.88); --arcade-cyan:#2bd6ff; --arcade-amber:#ffb24a; --arcade-gold:#e6bd72; --arcade-cream:#f4dfb9; --arcade-red:#bd2f27; --arcade-green:#0e706e; }
html,body { width:100%; height:100%; overflow:hidden; }
body { background:var(--arcade-ink); color:var(--arcade-cream); font-family:"Arial Narrow","Segoe UI",sans-serif; overscroll-behavior:none; }
[hidden] { display:none!important; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button,a.primary { cursor:pointer; font:inherit; text-decoration:none; }
button { color:var(--arcade-cream); background:#111a1ee8; border:1px solid #e6bd7255; padding:10px 14px; border-radius:4px; min-height:44px; }
button:hover,a.primary:hover { border-color:var(--arcade-cyan); background:#17413f; }
button:disabled { opacity:.5; cursor:wait; }
:focus-visible { outline:2px solid var(--arcade-cyan); outline-offset:4px; }
#hall-canvas { display:block; width:100%; height:100%; touch-action:none; outline:none; }
.arcade-frame { position:fixed; inset:10px; pointer-events:none; z-index:4; border:1px solid #2bd6ff40; border-radius:12px; box-shadow:inset 0 0 40px #0005; }
#hud { position:fixed; top:0; left:0; width:100%; padding:30px 36px; display:flex; justify-content:space-between; align-items:center; gap:15px; z-index:5; background:linear-gradient(#050607d9,transparent); pointer-events:none; }
#hud button,#hud a,#pb-auth { pointer-events:auto; }
.brand { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:800; letter-spacing:.14em; }
.brand>b { font:46px/.7 Georgia,serif; color:var(--arcade-cyan); }
.brand small { display:block; font-size:9px; font-weight:400; letter-spacing:.16em; color:#8da7b2; margin-top:7px; text-transform:uppercase; }
.hud-right { display:flex; align-items:center; gap:18px; font-size:11px; }
.open-light { letter-spacing:.1em; color:#aac7be; }
.open-light:before { content:'●'; color:#71f0bd; margin-right:8px; }
#pb-auth { display:flex; gap:9px; align-items:center; font:11px monospace; padding:8px 10px; border:1px solid #2bd6ff44; border-radius:20px; }
#pb-login { color:var(--arcade-cyan); padding:7px; }
#zone-label { position:fixed; top:115px; left:36px; pointer-events:none; }
#zone-label span,.eyebrow { font-size:9px; letter-spacing:.2em; color:var(--arcade-cyan); }
#zone-label strong { display:block; margin-top:8px; font-size:20px; font-weight:400; }
.overlay { position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; overflow:auto; padding:25px; background:#020609ce; }
#title-overlay { justify-content:flex-start; padding-left:clamp(28px,7vw,120px); background:linear-gradient(90deg,#02090ca8,transparent 90%); }
.title-box,.scorecard-box { position:relative; border:1px solid #e6bd72a6; border-radius:8px; background:linear-gradient(145deg,#18140ff7,#05080afb 62%); box-shadow:0 28px 90px #0009,0 0 0 5px #0006,0 0 0 6px #2bd6ff38,inset 0 0 42px #e69a3d0f; }
.title-box:before { content:''; position:absolute; inset:8px; pointer-events:none; border:1px solid #2bd6ff20; }
.title-box { width:min(420px,calc(100vw - 40px)); padding:34px 30px 28px; text-align:center; flex-shrink:0; }
.brand-kicker { display:flex; align-items:center; justify-content:center; gap:12px; color:#73ddf8; font-size:9px; font-weight:800; letter-spacing:.28em; }
.brand-kicker:before,.brand-kicker:after { content:''; width:26px; height:1px; background:currentColor; }
.edition { font:8px monospace; color:#9d998d; letter-spacing:.14em; margin:18px 0 29px; }
.edition span { margin:0 12px; color:var(--arcade-amber); }
h1 { display:grid; font-family:"Arial Black",Impact,sans-serif; font-size:clamp(46px,5.4vw,62px); font-weight:900; font-style:italic; line-height:.85; letter-spacing:-.055em; filter:drop-shadow(0 7px 0 #25170d); transform:skewX(-3deg); text-transform:uppercase; }
h1 span { color:#bd352b; -webkit-text-stroke:1.5px #f0d098; text-shadow:3px 3px 0 #6d2c17,5px 5px 0 #120d09; }
h1 span:nth-child(2) { margin-top:13px; color:#157b78; text-shadow:3px 3px 0 #164b45,5px 5px 0 #120d09; }
h1 small { font:9px "Segoe UI",sans-serif; letter-spacing:.3em; margin-top:19px; color:var(--arcade-gold); }
.subtitle { margin:26px 0 18px; color:#d9c29a; font-size:14px; line-height:1.65; }
.feature-row { display:flex; justify-content:center; align-items:center; gap:8px; color:#a49b8b; font-size:9px; text-transform:uppercase; }
.feature-row span { width:3px; height:3px; border-radius:50%; background:var(--arcade-amber); }
.primary { display:block; width:100%; margin:24px 0 14px; padding:16px; border:1px solid #ffce7e; background:linear-gradient(90deg,#155f57,#103533); color:#fff0d2; text-transform:uppercase; letter-spacing:.15em; font-size:12px!important; font-weight:800!important; border-radius:4px; }
.title-controls { font-size:10px; color:#99a9a6; }
.title-route { display:flex; justify-content:space-between; gap:8px; margin-top:26px; padding-top:18px; border-top:1px solid #e6bd722a; font:9px monospace; color:var(--arcade-amber); text-align:left; }
.title-route b { display:block; margin-top:6px; color:#9d9e99; font-size:7px; font-weight:400; }
.park-caption { position:absolute; bottom:60px; right:45px; color:#a4c2ca; font-size:9px; letter-spacing:.15em; line-height:2; text-align:right; text-shadow:0 2px 5px #000; }
.park-caption b { font-size:19px; font-weight:400; color:#f4dfb9; letter-spacing:.015em; }
#loading { position:fixed; bottom:65px; left:50%; transform:translateX(-50%); z-index:20; padding:10px; background:#060b10e8; font:12px monospace; }
#crosshair { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); color:#fff7; pointer-events:none; font:20px monospace; }
#interact-prompt { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); z-index:6; border-color:var(--arcade-cyan); box-shadow:0 0 20px #2bd6ff22; max-width:90%; font-size:13px; white-space:nowrap; }
#controls-hint { position:fixed; bottom:55px; left:50%; transform:translateX(-50%); font-size:11px; color:#c1c2b5; white-space:nowrap; text-shadow:0 2px 4px #000; }
#controls-hint span { padding:0 8px; color:var(--arcade-cyan); }
kbd { font:10px monospace; border:1px solid #d7cab74d; padding:3px 5px; border-radius:3px; }
#world-labels { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.world-label { position:absolute; transform:translate(-50%,-50%); font-size:clamp(9px,1.3vw,18px); letter-spacing:.15em; color:var(--sign-color,#2bd6ff); font-weight:800; text-align:center; text-shadow:0 0 12px currentColor,0 2px 5px #000; white-space:nowrap; }
.world-label small { display:block; font-size:7px; color:#d5cdbb; margin-top:4px; letter-spacing:.25em; }
#attract-message { position:fixed; left:50%; bottom:100px; transform:translateX(-50%); pointer-events:none; padding:15px 25px; background:#050a0edb; border:1px solid #2bd6ff66; text-align:center; font-size:11px; letter-spacing:.12em; white-space:nowrap; }
#attract-message span { display:block; color:#a1b4bd; font-size:10px; margin-top:7px; }
.cabinet-shell { width:min(1280px,100%); height:min(900px,100%); display:flex; flex-direction:column; border:1px solid var(--machine-accent,var(--arcade-cyan)); background:#101015; border-radius:12px; box-shadow:0 0 60px #000; padding:16px; }
.cabinet-shell header { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:14px; }
.cabinet-shell h2 { font-size:20px; margin-top:5px; }
.cabinet-shell footer { display:flex; justify-content:space-between; gap:10px; font-size:9px; color:#b0aaa0; letter-spacing:.1em; padding-top:12px; }
.cabinet-shell footer span { letter-spacing:0; }
#crt-bezel { min-height:0; flex:1; padding:10px; border:6px solid #282831; border-radius:22px; background:#000; box-shadow:inset 0 0 8px #000,0 0 0 2px #000; }
#iframe-host { width:100%; height:100%; overflow:hidden; border-radius:10px; background:#050607; }
iframe { display:block; border:0; width:100%; height:100%; background:#050607; }
.kiosk-card h2 { font-size:27px; margin:20px 0 10px; }
.kiosk-card p { font-size:13px; line-height:1.6; color:#c0b6a5; }
#kiosk-note { font-size:10px; color:#80bfc5; margin-top:14px; }
#kiosk-cover,#kiosk-art { width:100%; aspect-ratio:16/9; object-fit:cover; margin-top:22px; border:1px solid var(--machine-accent); border-radius:3px; }
#kiosk-art { display:grid; place-items:center; font:90px Georgia; color:var(--machine-accent); background:repeating-linear-gradient(0deg,#0d1421,#0d1421 2px,#17243a 3px,#17243a 4px); }
.close-button { position:absolute; right:12px; top:12px; padding:0; width:44px; font-size:25px; background:#090e12; }
#leaderboard-button { position:fixed; right:30px; bottom:30px; z-index:6; font-size:11px; }
#leaderboard-wall { position:fixed; inset:100px 30px 85px auto; width:min(690px,calc(100% - 60px)); z-index:9; padding:20px; display:flex; flex-direction:column; }
#leaderboard-wall header { display:flex; justify-content:space-between; gap:10px; }
#leaderboard-wall h2 { font-size:20px; margin-top:7px; }
#leaderboard-rows { overflow:auto; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.score-board { background:#10232b70; padding:12px; border-top:2px solid var(--machine-accent); }
.score-board h3 { font-size:12px; margin-bottom:10px; }
.score-board ol { padding-left:22px; font:11px/1.9 monospace; }
.score-board li b { float:right; margin-left:8px; color:var(--arcade-cyan); }
.score-board p,#leaderboard-wall>p { font-size:10px; color:#9dabaf; }
#asset-badge { position:fixed; left:max(16px,env(safe-area-inset-left)); bottom:max(15px,env(safe-area-inset-bottom)); z-index:40; max-width:calc(100% - 32px); border:1px solid #ff7979; border-radius:4px; background:#710f1ef2; color:white; font:bold 10px/1.5 monospace; }
#asset-badge summary { cursor:pointer; padding:7px 10px; }
#asset-badge ul { padding:6px 25px 12px; max-height:35vh; overflow:auto; font-size:10px; overflow-wrap:anywhere; }
#touch-controls { position:fixed; bottom:80px; left:25px; right:25px; pointer-events:none; display:none; justify-content:space-between; align-items:center; }
#joystick { width:105px; height:105px; border:1px solid #2bd6ff70; border-radius:50%; background:#0b182a88; touch-action:none; pointer-events:auto; display:grid; place-items:center; }
#joystick-knob { display:block; width:42px; height:42px; border:1px solid #a4e2ef; border-radius:50%; background:#27829b80; pointer-events:none; }
#touch-play { border-radius:50%; width:70px; height:70px; pointer-events:auto; font-size:10px; letter-spacing:.1em; border-color:#e6bd72; }
.touch-look-hint { position:absolute; right:0; bottom:-25px; font-size:9px; color:#bbc9cb; }
@media (pointer:coarse) { #touch-controls { display:flex; } #controls-hint { display:none; } #interact-prompt { bottom:210px; } }
@media (max-width:600px) {
  #hud { padding:24px; align-items:flex-start; } .brand { font-size:10px; letter-spacing:.08em; } .brand>b { font-size:36px; } .brand small { font-size:7px; }
  .hud-right { gap:7px; } .open-light { display:none; } #hud button { font-size:10px; padding:7px; } #pb-auth { position:absolute; right:25px; top:78px; font-size:9px; padding:6px 8px; }
  #zone-label { top:90px; left:25px; } #zone-label strong { font-size:16px; } #zone-label span { font-size:8px; }
  #title-overlay { justify-content:center; padding:110px 20px 60px; } .title-box { padding:27px 25px 23px; } h1 { font-size:52px; } .park-caption { display:none; }
  .title-route { margin-top:20px; } .edition { margin:14px 0 23px; } .subtitle { margin:22px 0 15px; } .primary { margin-top:20px; }
  #controls-hint { font-size:9px; bottom:69px; } #controls-hint span { padding:0 2px; } #leaderboard-button { bottom:60px; right:20px; }
  #cabinet-view { padding:10px; } .cabinet-shell { padding:10px; height:100%; } .cabinet-shell h2 { font-size:16px; } #leave-machine { font-size:11px; padding:8px; } #leave-machine kbd { display:block; margin-top:5px; }
  #crt-bezel { padding:3px; border-width:4px; border-radius:12px; } .cabinet-shell footer { font-size:7px; line-height:1.6; } .cabinet-shell footer>span { max-width:155px; }
  #leaderboard-wall { inset:130px 20px 110px; width:auto; } #leaderboard-rows { grid-template-columns:1fr; } #leaderboard-wall h2 { font-size:16px; }
}
@media (max-height:680px) { #title-overlay { padding-top:85px; padding-bottom:50px; align-items:flex-start; } .title-box { padding-top:22px; } .title-route,.edition { display:none; } h1 { font-size:45px; margin-top:23px; } .subtitle { margin:20px 0 12px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }