/* Shared look for the arcade game pages: OTS brand bar, layout, overlays, high score board. */
:root{--navy-900:#001331;--navy-800:#002747;--blue:#25486b;--blue-300:#919eb3;--green:#8ad544;--green-600:#71b72e;--ink:#0c0b0d;--text:#eef1f6;--muted:#b5becc;font-family:'Poppins',system-ui,Arial,sans-serif;color:var(--text);background:var(--navy-900)}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:var(--navy-900)}
h1,h2{font-family:'Michroma','Poppins',sans-serif;font-weight:400}
.topbar{background:#fff;border-bottom:4px solid var(--green)}
.topbar .in{max-width:1080px;margin:auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;text-decoration:none;min-height:40px}.logo img{height:40px;display:block}
.wordmark{font-family:'Michroma',sans-serif;line-height:1;display:none}.wordmark b{font-weight:400;font-size:24px}.wordmark .o{color:#8a9199}.wordmark .t{color:var(--blue)}.wordmark small{display:block;font-size:9px;letter-spacing:.55em;color:var(--blue);margin-top:4px}
.logo.fallback img{display:none}.logo.fallback .wordmark{display:block}
.tag{font-family:'Michroma',sans-serif;font-size:11px;letter-spacing:.12em;color:var(--blue);text-transform:uppercase}
main{max-width:1080px;margin:auto;padding:20px 16px}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.bar h1{font-size:clamp(20px,3.4vw,30px);margin:0}
a.back,button{font:inherit;border-radius:8px;padding:10px 14px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
a.back{border:1px solid var(--blue-300);color:var(--text)}
button{border:1px solid var(--green);background:var(--green);color:var(--ink)}
input{font:inherit;border-radius:8px;padding:10px 14px;background:var(--navy-900);border:1px solid var(--blue);color:var(--text);width:100%;max-width:280px}
a.back:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:2px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
@media(max-width:860px){.layout{grid-template-columns:1fr}.tag{display:none}}
.stage{position:relative;border:3px solid var(--blue);border-radius:10px;overflow:hidden;background:#000;touch-action:none;user-select:none;-webkit-user-select:none}
.stage canvas{display:block;width:100%;height:auto}
.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.18) 2px 3px)}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,19,49,.84);padding:16px;z-index:2}
.overlay .box{background:var(--navy-800);border:1px solid var(--blue);border-radius:14px;padding:22px;max-width:480px;width:100%;text-align:center}
.overlay h2{font-size:18px;margin:0 0 10px}
.overlay p{color:var(--muted);font-size:14px;margin:0 0 14px;line-height:1.5}
.overlay .big{font-family:'Press Start 2P',monospace;color:var(--green);font-size:22px;margin:8px 0 12px}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}
.help{color:var(--muted);font-size:13px;margin-top:10px;line-height:1.5}
.pad{display:none;gap:8px;margin-top:10px;justify-content:center;flex-wrap:wrap}
.pad button{min-width:64px;min-height:52px;background:var(--navy-800);color:var(--text);border-color:var(--blue);touch-action:none}
@media(pointer:coarse){.pad{display:flex}}
.hs{background:#000;border:3px solid #2a3cff;border-radius:6px;padding:14px 12px 12px;font-family:'Press Start 2P',ui-monospace,monospace;font-size:10px;line-height:2;position:relative;overflow:hidden;box-shadow:0 0 14px rgba(42,60,255,.55),inset 0 0 18px rgba(42,60,255,.35)}
.hs:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.32) 2px 3px)}
.hs h4{margin:0 0 10px;text-align:center;font-size:10px;font-weight:400;color:#fff;text-shadow:0 0 6px #fff;animation:hsblink 1.2s steps(2,start) infinite}
.hs ol{list-style:none;margin:0;padding:0}
.hs li{display:grid;grid-template-columns:4.2em minmax(0,1fr) auto;gap:8px;white-space:nowrap;text-shadow:0 0 4px currentColor}
.hs .n{overflow:hidden}.hs .s{text-align:right}
.hs li:nth-child(7n+1){color:#ff2a2a}.hs li:nth-child(7n+2){color:#ff9a1f}.hs li:nth-child(7n+3){color:#ffe81f}.hs li:nth-child(7n+4){color:#3dff5a}.hs li:nth-child(7n+5){color:#22f0ff}.hs li:nth-child(7n+6){color:#4f7bff}.hs li:nth-child(7n+7){color:#ff4fe0}
.hs li.empty{color:#3a3a4a!important;text-shadow:none}.hs li.me{animation:hsblink .6s steps(2,start) 6}
.hs .src{margin-top:8px;text-align:center;color:#6c6c88;font-size:7px}
@keyframes hsblink{to{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.hs h4,.hs li.me{animation:none}}