/* Obstacle Remover · Elyxium Corporation. Original code and design. */
@font-face{font-family:"ORInter";src:url(assets/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#03050d;--mid:#071433;--line:#e9f6ff;--turq:#3ef0e0;--amber:#ffb648;--bad:#ff4f7a;--dim:#7d93b5;
  --font:"ORInter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;overscroll-behavior:none}
body{color:var(--line);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none}
#or-root{position:fixed;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 35%,#0a1a44 0%,var(--mid) 30%,var(--bg) 75%)}
#or-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.or-glow{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px rgba(62,240,224,.07),inset 0 0 40px rgba(0,0,0,.6);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--turq)}

/* HUD */
#or-hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));pointer-events:none;opacity:0;transition:opacity .3s}
.state-demo #or-hud,.state-playing #or-hud,.state-paused #or-hud,.state-victory #or-hud,.state-over #or-hud,.state-dying #or-hud{opacity:1}
.hud-left,.hud-right{flex:1 1 0;display:flex;gap:6px;align-items:center;min-height:32px}
.hud-right{justify-content:flex-end}
.hud-mid{text-align:center;flex:0 0 auto}
#hud-score{font-family:var(--mono);font-weight:700;font-size:clamp(14px,2.4vw,24px);letter-spacing:.08em;color:var(--line);text-shadow:0 0 10px rgba(62,240,224,.55)}
#hud-level{font-size:11px;letter-spacing:.3em;color:var(--dim);margin-top:3px}
#hud-lives{align-items:center;gap:8px;padding:3px 9px 3px 7px;border:1px solid rgba(62,240,224,.35);border-radius:7px;background:rgba(3,5,13,.55)}
#hud-lives .lv-lab{font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--turq)}
#hud-lives .lv-ic{display:flex;gap:3px}
#hud-lives svg{width:24px;height:30px;filter:drop-shadow(0 0 4px rgba(62,240,224,.7))}
#hud-lives .lv-n{font-family:var(--mono);font-weight:800;font-size:20px;color:#e9f6ff}
#hud-lives.lv-down{animation:lvdown 1.2s ease-out}
#hud-lives.lv-up{animation:lvup 1.2s ease-out}
@keyframes lvdown{0%,30%,60%{background:rgba(255,79,122,.55);border-color:#ff4f7a;transform:scale(1.12)}15%,45%,75%{background:rgba(3,5,13,.55);transform:scale(1)}100%{transform:scale(1)}}
@keyframes lvup{0%,30%,60%{background:rgba(255,211,107,.5);border-color:#ffd36b;transform:scale(1.12)}15%,45%,75%{background:rgba(3,5,13,.55);transform:scale(1)}100%{transform:scale(1)}}
#hud-level.boss{color:var(--bad);font-weight:800;text-shadow:0 0 8px rgba(255,79,122,.7)}
.champ #over-title{color:var(--amber,#ffd36b)}
.hud-btn{pointer-events:auto;background:rgba(3,5,13,.55);border:1px solid rgba(62,240,224,.45);border-radius:6px;padding:6px 9px;font-size:11px;letter-spacing:.14em;font-weight:600}
.hud-btn:hover,.hud-btn:focus-visible{border-color:var(--turq);outline:none;box-shadow:0 0 10px rgba(62,240,224,.4)}
.hud-btn[aria-pressed=false]{color:var(--dim);border-color:rgba(125,147,181,.4)}
#btn-pause{display:none}
.state-playing #btn-pause{display:inline-block}
.state-title #btn-sound,.state-how #btn-sound,.state-board #btn-sound{pointer-events:auto}
.state-title #or-hud,.state-how #or-hud,.state-board #or-hud{opacity:1}
.state-title .hud-mid,.state-how .hud-mid,.state-board .hud-mid,.state-title #hud-lives,.state-how #hud-lives,.state-board #hud-lives{visibility:hidden}

/* banner */
#or-banner{position:absolute;left:0;right:0;top:34%;text-align:center;pointer-events:none;font-weight:800;letter-spacing:.12em;
  font-size:clamp(22px,5vw,52px);color:var(--amber);text-shadow:0 0 18px rgba(255,182,72,.65);opacity:0;transform:scale(.9);transition:opacity .25s,transform .25s;padding:0 16px}
#or-banner.show{opacity:1;transform:scale(1)}
#or-banner.warn{color:var(--bad);text-shadow:0 0 18px rgba(255,79,122,.7)}
#or-banner.cool{color:var(--turq);text-shadow:0 0 18px rgba(62,240,224,.6)}
#or-banner small{display:block;font-size:.36em;letter-spacing:.3em;margin-top:.6em;color:var(--line);font-weight:600}

/* screens */
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));overflow:auto;touch-action:pan-y}
.state-title #scr-title,.state-how #scr-how,.state-board #scr-board,.state-paused #scr-pause,.state-victory #scr-victory,.state-over #scr-over{display:flex}
.panel{max-width:760px;width:100%;margin:auto;text-align:center;-webkit-user-select:text;user-select:text}
.state-paused .screen,.state-over .screen,.state-victory .screen,.state-how .screen,.state-board .screen{background:rgba(3,5,13,.72);backdrop-filter:blur(2px)}
.presents{font-size:12px;letter-spacing:.42em;color:var(--dim);margin:0 0 14px;font-weight:600}
.logo{margin:0;font-weight:900;font-size:clamp(44px,11vw,104px);line-height:.92;letter-spacing:.06em;color:transparent;
  -webkit-text-stroke:2px var(--turq);text-shadow:0 0 24px rgba(62,240,224,.45);padding:.06em .1em}
.tagline{font-size:clamp(16px,2.6vw,22px);color:var(--amber);margin:16px 0 8px;font-weight:600}
.quote{font-size:clamp(14px,2vw,17px);color:var(--line);opacity:.85;margin:6px 0 22px;font-style:italic;padding:0 .2em}
.lead{font-size:clamp(15px,2.2vw,19px);margin:8px 0 18px}
h2{margin:0 0 10px;font-size:clamp(26px,5vw,42px);letter-spacing:.12em;font-weight:800;color:var(--turq);text-shadow:0 0 16px rgba(62,240,224,.45)}
h2.big{color:var(--bad);text-shadow:0 0 18px rgba(255,79,122,.55)}
.big-amber{color:var(--amber);text-shadow:0 0 22px rgba(255,182,72,.7);font-size:clamp(28px,6.5vw,58px)}
h3{font-size:12px;letter-spacing:.3em;color:var(--amber);margin:14px 0 8px}
.dim{color:var(--dim)}
.small{font-size:13px;color:var(--dim);line-height:1.5}
.menu{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px}
.menu.row{flex-direction:row;justify-content:center;flex-wrap:wrap}
.btn{min-width:240px;min-height:48px;padding:12px 22px;background:rgba(7,20,51,.6);border:1.5px solid rgba(233,246,255,.55);border-radius:8px;
  font-weight:700;letter-spacing:.2em;font-size:14px;transition:border-color .15s,box-shadow .15s,color .15s}
.btn:hover,.btn:focus-visible{border-color:var(--turq);color:var(--turq);box-shadow:0 0 16px rgba(62,240,224,.35);outline:none}
.btn-main{border-color:var(--turq);color:var(--turq);box-shadow:0 0 12px rgba(62,240,224,.25)}
.btn-huge{min-width:280px;min-height:64px;font-size:20px;letter-spacing:.24em;border-color:var(--amber);color:var(--amber);box-shadow:0 0 18px rgba(255,182,72,.35)}
.btn-huge:hover,.btn-huge:focus-visible{color:var(--amber);border-color:var(--amber);box-shadow:0 0 26px rgba(255,182,72,.55)}
.credit{margin-top:26px;font-size:12px;letter-spacing:.14em;color:var(--dim);line-height:1.8}
.credit a{color:var(--dim)}
.focus-hint{display:none;font-size:12px;color:var(--amber);letter-spacing:.12em;margin:12px 0 0}
.needs-focus .focus-hint{display:block}

/* how to play */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:left;margin:8px 0 14px}
@media (max-width:620px){.how-grid{grid-template-columns:1fr}}
.keys{list-style:none;padding:0;margin:0;line-height:2.1;font-size:14px}
kbd{display:inline-block;min-width:28px;padding:1px 7px;border:1px solid rgba(62,240,224,.55);border-radius:4px;font-family:var(--mono);font-size:12px;text-align:center;color:var(--turq);margin-right:4px}
.pts{width:100%;border-collapse:collapse;font-size:13px}
.pts td{padding:3px 0;border-bottom:1px solid rgba(125,147,181,.15)}
.pts td:last-child{text-align:right;font-family:var(--mono);color:var(--amber)}

/* boards */
.boards{display:grid;grid-template-columns:1fr 1fr;gap:26px;text-align:left;margin-bottom:14px}
@media (max-width:620px){.boards{grid-template-columns:1fr}}
.board{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:15px;counter-reset:r}
.board li{display:flex;gap:12px;padding:4px 2px;border-bottom:1px dashed rgba(125,147,181,.2);counter-increment:r}
.board li::before{content:counter(r,decimal-leading-zero);color:var(--dim);width:2ch}
.board li .ini{color:var(--turq);font-weight:700;letter-spacing:.14em;width:6.4ch;white-space:nowrap}
.board li .sc{margin-left:auto;color:var(--line)}
.board li .lv{color:var(--dim);font-size:12px;width:5ch;text-align:right}
.board li.me{background:rgba(255,182,72,.12)}
.board li.me .ini,.board li.me .sc{color:var(--amber)}
.board li.empty{color:var(--dim);font-family:var(--font);font-size:13px;border:0}
.board li.empty::before{content:none}
.board.compact{max-width:420px;margin:10px auto 6px;font-size:13px;text-align:left}
.board-note{min-height:1.2em}

/* game over */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 16px}
@media (max-width:620px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats div{border:1px solid rgba(125,147,181,.3);border-radius:8px;padding:10px 6px}
.stats dt{font-size:10px;letter-spacing:.22em;color:var(--dim)}
.stats dd{margin:4px 0 0;font-family:var(--mono);font-size:20px;color:var(--line);font-weight:700}
#st-score{color:var(--amber)}
#initials-form label{display:block;font-size:12px;letter-spacing:.3em;color:var(--amber);margin-bottom:8px}
.ini-row{display:flex;justify-content:center;gap:10px;align-items:center}
#initials{width:min(250px,64vw);height:56px;background:transparent;border:0;border-bottom:3px solid var(--turq);color:var(--turq);font-family:var(--mono);
  font-size:34px;font-weight:700;letter-spacing:.3em;text-indent:.3em;text-align:center;text-transform:uppercase;outline:none;-webkit-user-select:text;user-select:text}
#initials::placeholder{color:rgba(62,240,224,.25)}
#btn-save{min-width:110px}
#initials-form.done{display:none}
#ini-msg.err{color:var(--bad)}

/* victory */
.achv{font-size:clamp(17px,2.6vw,22px);margin:8px 0 18px}
.achv-tag{display:inline-block;font-size:11px;letter-spacing:.35em;color:var(--bg);background:var(--turq);padding:4px 10px;border-radius:3px;margin-bottom:8px;font-weight:800}
.reveal{opacity:0;transform:translateY(12px);transition:opacity 1s,transform 1s;pointer-events:none}
.reveal.on{opacity:1;transform:none;pointer-events:auto}
.elx-link{font-size:18px;letter-spacing:.08em;color:var(--turq);font-weight:600}

/* touch controls */
#or-touch{position:absolute;left:0;right:0;bottom:0;display:none;justify-content:space-between;align-items:flex-end;
  padding:0 calc(14px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));pointer-events:none}
.touch #or-touch{display:flex}
.touch.state-title #or-touch,.touch.state-how #or-touch,.touch.state-board #or-touch,.touch.state-over #or-touch,.touch.state-victory #or-touch,.touch.state-paused #or-touch{display:none}
.t-left,.t-right{display:flex;gap:12px;pointer-events:auto}
.t-btn{width:78px;height:78px;border-radius:50%;border:2px solid rgba(62,240,224,.5);background:rgba(7,20,51,.35);color:var(--turq);font-size:24px;font-weight:800;letter-spacing:.06em;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.t-thrust,.t-fire{font-size:12px;letter-spacing:.14em}
.t-fire{width:92px;height:92px;border-color:rgba(255,182,72,.7);color:var(--amber)}
.t-btn.on{background:rgba(62,240,224,.22);box-shadow:0 0 18px rgba(62,240,224,.45)}
.t-fire.on{background:rgba(255,182,72,.22);box-shadow:0 0 18px rgba(255,182,72,.5)}
@media (max-height:500px){.t-btn{width:64px;height:64px}.t-fire{width:76px;height:76px}.panel{transform:scale(.92)}.logo{font-size:44px}}
@media (prefers-reduced-motion:reduce){.reveal{transition:none}#or-banner{transition:none}}

.hud-btn .sm{display:none}
#hud-lives{display:flex;flex-wrap:nowrap}
@media (max-width:560px){
  .hud-btn{padding:6px 8px;font-size:11px;letter-spacing:.06em;min-width:38px;min-height:34px}
  .hud-btn .lg{display:none}.hud-btn .sm{display:inline}
  #hud-lives svg{width:15px;height:19px}
  #hud-lives{gap:4px;padding:2px 5px}
  #hud-lives .lv-lab{font-size:9px;letter-spacing:.1em}
  #hud-lives .lv-n{font-size:13px}
  #hud-lives .lv-ic svg:not(:first-child){display:none}
  #hud-score{font-size:12.5px;letter-spacing:.01em}
  #hud-level{letter-spacing:.18em}
  .hud-left,.hud-right{flex:0 0 auto;gap:4px}
  #or-hud{gap:4px}
}
#st-rank{font-size:15px;line-height:1.3}
.over-sub{font-size:14px;color:var(--amber);margin:-8px 0 12px;font-style:italic}

/* ---------- 80s junk: blink, CRT flicker, glitch, hit flash ---------- */
.insert{font-family:var(--mono);font-weight:800;letter-spacing:.3em;color:var(--bad);text-shadow:2px 0 rgba(62,240,224,.7),-2px 0 rgba(255,79,122,.7);margin:6px 0 14px;font-size:15px}
.blink{animation:orblink 1.05s steps(1) infinite}
@keyframes orblink{50%{opacity:0}}
.or-glow{animation:orflicker 4s infinite}
@keyframes orflicker{0%,100%{opacity:1}41%{opacity:1}42%{opacity:.94}43%{opacity:1}}
.or-glow::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 120% at 50% 50%,transparent 62%,rgba(0,0,0,.55) 100%)}
.glitch #or-canvas{animation:orglitch .95s steps(1) 1}
.glitch #or-banner{text-shadow:4px 0 rgba(62,240,224,.9),-4px 0 rgba(255,0,90,.9)}
@keyframes orglitch{
  0%{transform:none;filter:none}
  8%{transform:translate(5px,-2px) skewX(3deg);filter:drop-shadow(5px 0 0 rgba(255,0,90,.75)) drop-shadow(-5px 0 0 rgba(0,255,240,.75))}
  16%{transform:translate(-6px,2px);filter:hue-rotate(60deg) saturate(2)}
  24%{transform:none;filter:none;opacity:.7}
  32%{transform:translate(3px,0) scaleY(1.02);filter:drop-shadow(-4px 0 0 rgba(255,0,90,.8)) drop-shadow(4px 0 0 rgba(0,255,240,.8))}
  44%{transform:none;filter:none;opacity:1}
  56%{transform:translate(-3px,-1px) skewX(-2deg);filter:invert(.12) drop-shadow(3px 0 0 rgba(255,0,90,.7))}
  64%,100%{transform:none;filter:none}}
.hitflash .or-glow{background-color:rgba(255,255,255,.16)}
@media (prefers-reduced-motion:reduce){.blink,.or-glow{animation:none}.glitch #or-canvas{animation:none}}

/* ---------- arcade cabinet (standalone page on big screens; layout numbers come from cabinet() in game.js) ---------- */
#or-cab,.or-crt{display:none}
#sound-hint{position:fixed;right:10px;bottom:8px;z-index:60;background:rgba(3,5,13,.72);border:1px solid rgba(62,240,224,.4);border-radius:999px;color:#9fb3d6;font:700 8.5px/1 var(--mono,monospace);letter-spacing:.16em;padding:4px 8px;cursor:pointer;opacity:.6;background:rgba(3,5,13,.4);animation:shint 2.6s ease-in-out infinite}
@keyframes shint{50%{opacity:.3}}
#sound-hint[hidden]{display:none}
#sound-hint:hover{color:#e9f6ff;border-color:var(--turq)}
#btn-full{display:none}
body.fs-ok #btn-full{display:inline-block}
.state-title #btn-full,.state-how #btn-full,.state-board #btn-full{pointer-events:auto}
.fs-note{display:none;margin:4px 0 0;font-size:12px;letter-spacing:.12em;color:#9fb3d6}
body.fs-ok .fs-note{display:block}
body.fs .fs-note{display:none}
.fs-note kbd{font-family:var(--mono);border:1px solid rgba(62,240,224,.45);border-radius:4px;padding:0 5px;color:var(--turq)}
.linkbtn{background:none;border:0;padding:4px 6px;color:var(--turq);font:inherit;font-weight:800;letter-spacing:.14em;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover,.linkbtn:focus-visible{color:#fff;outline:none;text-shadow:0 0 8px rgba(62,240,224,.8)}
.touch-note{display:none;font-size:12px;color:#9fb3d6;margin:6px 0 0;font-style:italic}
body.touch .touch-note{display:block}
body.cabinet{background:radial-gradient(70% 55% at 50% 38%,#1d0f33 0%,#0a0614 55%,#030208 100%);overflow:hidden}
body.cabinet::after{content:"";position:fixed;left:0;right:0;bottom:0;height:16vh;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,79,122,.07) 40%,rgba(0,0,0,.6)),repeating-linear-gradient(90deg,transparent 0 79px,rgba(62,240,224,.08) 79px 80px)}
body.cabinet #or-cab{display:block;position:fixed;left:var(--cx);top:var(--cy);width:var(--cw);height:var(--ch);z-index:0}
body.cabinet #or-cab::before{content:"";position:absolute;inset:0 6px;border-radius:14px;box-shadow:0 30px 60px rgba(0,0,0,.85),0 0 80px rgba(255,79,122,.14);pointer-events:none}
/* side panels: black t-molding glow + 80s vinyl */
.cab-side{position:absolute;top:0;bottom:0;width:var(--sd);overflow:hidden;
  background:linear-gradient(180deg,#14081f,#0b0613 60%,#07040b);box-shadow:inset 0 0 0 3px #050308,inset 0 0 30px rgba(0,0,0,.8)}
.cab-l{left:0;border-radius:14px 0 0 10px;border-left:4px solid #3ef0e0;box-shadow:-2px 0 14px rgba(62,240,224,.55),inset 0 0 30px #000}
.cab-r{right:0;border-radius:0 14px 10px 0;border-right:4px solid #3ef0e0;box-shadow:2px 0 14px rgba(62,240,224,.55),inset 0 0 30px #000}
.cab-side i{position:absolute;left:-60%;right:-60%;height:9%;transform:rotate(-58deg)}
.cab-side .v1{top:30%;background:#ff4f7a;box-shadow:0 0 18px rgba(255,79,122,.6)}
.cab-side .v2{top:42%;height:5%;background:#ffb648}
.cab-side .v3{top:51%;height:3%;background:#3ef0e0}
.cab-r i{transform:rotate(58deg)}
.cab-side::before{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;
  background:linear-gradient(180deg,rgba(255,79,122,.0),rgba(255,79,122,.25)),repeating-linear-gradient(0deg,transparent 0 13px,rgba(62,240,224,.35) 13px 15px)}
.cab-side::after{content:"";position:absolute;left:50%;top:calc(var(--mh) + 24px);width:64%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:repeating-linear-gradient(180deg,#ffb648 0 7px,transparent 7px 11px),linear-gradient(#ff4f7a,#ffb648);background-blend-mode:multiply;
  -webkit-mask:linear-gradient(#000 0 55%,transparent 55%);mask:linear-gradient(#000 0 55%,transparent 55%);box-shadow:0 0 30px rgba(255,182,72,.5)}
.side-word{position:absolute;left:50%;bottom:36%;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font:900 italic 22px/1 var(--font,system-ui);
  letter-spacing:.2em;color:#ffe9b0;text-shadow:0 0 8px #ff4f7a,2px 2px 0 #ff4f7a}
.cab-r .side-word{transform:translateX(-50%)}
/* backlit marquee */
.cab-marquee{position:absolute;left:calc(var(--sd) - 14px);right:calc(var(--sd) - 14px);top:0;height:var(--mh);display:flex;align-items:center;justify-content:center;gap:22px;
  border-radius:12px 12px 4px 4px;background:radial-gradient(80% 140% at 50% 50%,#ffefc8 0%,#ff9fb6 22%,#7a1f6e 55%,#24093a 100%);
  box-shadow:0 0 0 4px #050308,0 0 0 7px #2c2438,0 0 40px rgba(255,159,182,.55),inset 0 0 30px rgba(0,0,0,.6);overflow:hidden;animation:ormqlight 5s infinite}
.cab-marquee::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 40%),repeating-linear-gradient(90deg,transparent 0 60px,rgba(255,255,255,.05) 60px 62px)}
.mq-title{position:relative;font-weight:900;font-style:italic;font-size:calc(var(--mh) * .42);letter-spacing:.12em;color:#1a0526;
  -webkit-text-stroke:1px #fff3d6;text-shadow:0 0 2px #fff,0 0 14px #fff3d6,3px 3px 0 #ff4f7a,6px 6px 0 rgba(62,240,224,.7);animation:ormq 2.6s infinite}
.mq-star{position:relative;color:#3ef0e0;font-size:calc(var(--mh) * .3);text-shadow:0 0 10px #3ef0e0,0 0 2px #000;animation:orblink 1.3s steps(1) infinite}
.mq-sub{position:absolute;bottom:5px;left:0;right:0;text-align:center;font:700 9px/1 var(--mono);letter-spacing:.5em;color:rgba(26,5,38,.75)}
@keyframes ormq{0%,100%{filter:none}48%{filter:none}50%{filter:brightness(1.5)}52%{filter:none}}
@keyframes ormqlight{0%,100%{filter:brightness(1)}61%{filter:brightness(1)}62%{filter:brightness(.7)}63%{filter:brightness(1.05)}64%{filter:brightness(.85)}65%{filter:brightness(1)}}
/* bezel: dark glass around the tube */
.cab-bezel{position:absolute;left:var(--sd);right:var(--sd);top:calc(var(--mh) + 7px);height:var(--bh);
  background:radial-gradient(120% 100% at 50% 0%,#20202a,#0b0b10 60%,#050507);box-shadow:inset 0 0 0 2px #2a2a34,inset 0 14px 30px rgba(0,0,0,.9)}
.cab-bezel::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.07) 0 18%,transparent 30%);pointer-events:none}
.bz-txt{position:absolute;bottom:calc(var(--bz) * .22);font:700 10px/1 var(--mono);letter-spacing:.35em;color:#6b5f86}
.bz-l{left:calc(var(--bz) + 6px)}.bz-r{right:calc(var(--bz) + 6px)}
/* control panel with joystick + buttons, coin door below */
.cab-panel{position:absolute;left:calc(var(--sd) - 24px);right:calc(var(--sd) - 24px);top:calc(var(--mh) + 7px + var(--bh));bottom:0}
.cp-deck{position:absolute;left:0;right:0;top:0;height:62%;display:flex;align-items:center;justify-content:space-between;padding:0 12%;
  border-radius:6px 6px 0 0;clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,#3a1450,#22102e 70%,#140a1c),repeating-linear-gradient(118deg,transparent 0 30px,rgba(255,79,122,.18) 30px 34px);
  background-blend-mode:screen;box-shadow:inset 0 3px 0 #ff4f7a,inset 0 -6px 0 #0b0610}
.cp-deck::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:#3ef0e0;box-shadow:0 0 12px #3ef0e0;opacity:.8}
.cp-stick{position:relative;width:calc(var(--cp) * .62);height:calc(var(--cp) * .6);display:flex;justify-content:center}
.cp-stick em,.cp-btn em{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;font:700 9px/1 var(--mono);letter-spacing:.2em;color:#cbb6e6;white-space:nowrap;font-style:normal}
.cp-base{position:absolute;bottom:4%;left:8%;right:8%;height:34%;border-radius:50%;background:radial-gradient(#222 0 40%,#000 41% 55%,#2b2b33 56%);box-shadow:0 3px 0 #000}
.cp-shaft{position:absolute;bottom:20%;left:50%;width:9%;height:66%;margin-left:-4.5%;background:linear-gradient(90deg,#666,#ddd 45%,#777);border-radius:4px;transform-origin:50% 100%;transition:transform .06s}
.cp-ball{position:absolute;left:50%;top:-22%;width:460%;aspect-ratio:1;transform:translate(-50%,-30%);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffd1dc 0 8%,#ff4f7a 30%,#a3123b 80%);box-shadow:0 0 14px rgba(255,79,122,.6)}
#or-cab.j-l .cp-shaft{transform:rotate(-22deg)}#or-cab.j-r .cp-shaft{transform:rotate(22deg)}
#or-cab.j-u .cp-shaft{transform:scaleY(.86)}#or-cab.j-u.j-l .cp-shaft{transform:rotate(-20deg) scaleY(.86)}#or-cab.j-u.j-r .cp-shaft{transform:rotate(20deg) scaleY(.86)}
.cp-btns{display:flex;gap:calc(var(--cp) * .28)}
.cp-btn{position:relative;width:calc(var(--cp) * .36);aspect-ratio:1;border-radius:50%;background:#050507;box-shadow:0 0 0 3px #2b2b33,0 4px 0 #000}
.cp-btn span{position:absolute;inset:10%;border-radius:50%;transition:transform .05s,box-shadow .05s,filter .05s}
.b-fire span{background:radial-gradient(circle at 35% 30%,#fff3d6 0 8%,#ffb648 35%,#b86a10 85%);box-shadow:0 5px 0 #6a3c06}
.b-thrust span{background:radial-gradient(circle at 35% 30%,#e8fffd 0 8%,#3ef0e0 35%,#0d8c80 85%);box-shadow:0 5px 0 #06463f}
#or-cab.p-fire .b-fire span,#or-cab.p-thrust .b-thrust span{transform:translateY(4px);box-shadow:0 1px 0 #000;filter:brightness(1.5) drop-shadow(0 0 10px currentColor)}
#or-cab.p-fire .b-fire span{color:#ffb648}#or-cab.p-thrust .b-thrust span{color:#3ef0e0}
.cp-door{position:absolute;left:12%;right:12%;top:62%;bottom:0;display:flex;align-items:center;justify-content:center;gap:16px;
  background:linear-gradient(180deg,#1a1520,#0c0a10);box-shadow:inset 0 0 0 2px #050507,inset 0 2px 0 rgba(255,255,255,.08);font-family:var(--mono)}
.cp-door .slot{width:10px;height:56%;max-height:30px;border-radius:5px;background:#000;box-shadow:inset 0 0 0 2px #555,0 0 12px rgba(255,79,122,.7)}
.cp-door .coin-label{color:#ff4f7a;font-weight:800;letter-spacing:.25em;font-size:13px;text-shadow:0 0 8px rgba(255,79,122,.8);animation:orblink 1.05s steps(1) infinite}
.cp-door .coin-small{font-size:9px;letter-spacing:.2em;color:#7d93b5}
/* the tube itself */
body.cabinet #or-root{left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);right:auto;bottom:auto;z-index:1;border-radius:4% / 6%;
  box-shadow:0 0 0 2px #000,0 0 0 6px #15151c,0 0 50px rgba(62,240,224,.18)}
body.cabinet .or-glow{border-radius:4% / 6%}
body.cabinet .or-crt{display:block;position:absolute;inset:0;pointer-events:none;z-index:30;border-radius:4% / 6%;
  background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 70%,rgba(0,0,0,.5) 100%),
    radial-gradient(ellipse 60% 30% at 30% 8%,rgba(255,255,255,.06),transparent 70%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
  box-shadow:inset 0 0 60px rgba(0,0,0,.75),inset 0 0 12px rgba(0,0,0,.9)}
@media (prefers-reduced-motion:reduce){.cab-marquee,.mq-title{animation:none}}
/* inside the cabinet the tube is smaller than the window: size the title by the tube, not the viewport */
body.cabinet #or-root{container-type:size}
@container (max-height:640px){
  .presents{margin-bottom:1.6cqh}
  .logo{font-size:min(104px,14.5cqh,11cqw)}
  .tagline{margin:2cqh 0 .8cqh;font-size:min(22px,3.6cqh)}
  .quote{margin:.6cqh 0 2.4cqh;font-size:min(17px,2.9cqh)}
  .menu{gap:1.4cqh;margin-top:0}
  .btn{min-height:min(48px,7.6cqh);padding-top:0;padding-bottom:0}
  .insert{margin:1cqh 0 1cqh}
  .credit{margin-top:1.4cqh;line-height:1.5}
  .panel h2{margin:0 0 .6cqh;font-size:min(40px,6.4cqh)}
  .lead{margin:.4cqh 0 1.6cqh;font-size:min(19px,3cqh)}
  .how-grid{margin:.4cqh 0 1cqh;gap:18px}
  .pts{font-size:min(13px,2.15cqh)}.pts td{padding:.25cqh 0}
  .screen{padding-top:10px;padding-bottom:10px}
}

/* ---------- the arcade room: Paul's machine with the live game on its CRT (desktop standalone) ---------- */
#or-scene,#or-flash,#btn-step{display:none}
body.scene{background:#040308;overflow:hidden}
body.scene #or-scene{display:block;position:fixed;inset:0;overflow:hidden;z-index:0}
#sc-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#sc-img{position:absolute;left:0;top:0;user-select:none;-webkit-user-drag:none}
.sc-marquee{position:absolute;border-radius:10px;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(60% 80% at 50% 50%,rgba(255,170,210,.22),transparent 75%);animation:scmq 7s infinite}
@keyframes scmq{0%,100%{opacity:.9}40%{opacity:1}41%{opacity:.25}42%{opacity:1}43%{opacity:.5}44%,70%{opacity:1}71%{opacity:.7}72%{opacity:1}}
.sc-lb{position:absolute;white-space:nowrap;pointer-events:none;font-family:var(--font);font-weight:800;letter-spacing:.14em;color:#f4ecff;
  text-shadow:0 0 4px rgba(255,255,255,.5),0 1px 0 rgba(0,0,0,.6);line-height:1}
.sc-lb.off{color:#8a7f99;text-shadow:none}
.sc-lb.bz{font-family:var(--mono);font-weight:700;letter-spacing:.35em;color:#8e88a0;text-shadow:none}
.sc-lb.side{font-weight:900;font-style:italic;letter-spacing:.16em;color:#ffe9f0;text-shadow:0 0 6px #ff4f7a,0 0 14px rgba(255,79,122,.7),2px 2px 0 #c2185b}
.sc-glow{position:absolute;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .06s;mix-blend-mode:screen}
.sc-glow-thrust{background:radial-gradient(closest-side,rgba(140,255,250,.95),rgba(62,240,224,.45) 45%,transparent)}
.sc-glow-fire{background:radial-gradient(closest-side,rgba(255,250,180,.95),rgba(255,214,40,.45) 45%,transparent)}
#sc-world.p-thrust .sc-glow-thrust,#sc-world.p-fire .sc-glow-fire{opacity:1}
.sc-hot{position:absolute;border-radius:50%;border:0;background:transparent;cursor:pointer;padding:0}
.sc-hot:hover,.sc-hot:focus-visible{box-shadow:0 0 0 3px rgba(62,240,224,.6),0 0 18px rgba(62,240,224,.5);outline:0}
.sc-hot:active{background:rgba(0,0,0,.25)}
#sc-hint{position:absolute;left:0;right:0;bottom:2vh;text-align:center;margin:0;font:700 10px/1 var(--mono);letter-spacing:.3em;color:rgba(233,246,255,.4);
  text-transform:uppercase;pointer-events:none;transition:opacity .6s;animation:orblink 1.6s steps(1) infinite}
body.zooming #sc-hint,body.zoomed #sc-hint{visibility:hidden;animation:none}
/* the game on the tube */
body.scene #or-root{inset:auto;left:0;top:0;transform-origin:0 0;z-index:1;border-radius:4.5% / 6%;cursor:pointer;
  box-shadow:0 0 0 2px rgba(0,0,0,.9),0 0 60px rgba(62,240,224,.22)}
body.scene .or-glow{border-radius:4.5% / 6%}
body.scene .or-crt{display:block;position:absolute;inset:0;pointer-events:none;z-index:30;border-radius:4.5% / 6%;
  background:radial-gradient(ellipse 78% 74% at 50% 50%,transparent 62%,rgba(0,0,0,.6) 100%),
    linear-gradient(160deg,rgba(255,255,255,.10) 0,rgba(255,255,255,.03) 22%,transparent 38%),
    radial-gradient(ellipse 34% 14% at 52% 10%,rgba(255,255,255,.10),transparent 70%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
  box-shadow:inset 0 0 70px rgba(0,0,0,.8),inset 0 0 14px rgba(0,0,0,.95)}
body.scene:not(.zoomed) #or-hud{pointer-events:none}
body.scene.zoomed #or-root{cursor:default}
body.scene.zoomed #or-hud{pointer-events:auto}
body.scene.zoomed #btn-step{display:inline-flex}
#sc-video{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;transition:opacity .9s ease;pointer-events:none}
body.teaser #sc-video{opacity:1}
body.teaser.zooming #sc-video,body.teaser.zoomed #sc-video{opacity:0;transition-duration:.7s}
body.scene #or-flash{display:block;position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,rgba(220,255,252,.9),rgba(62,240,224,.25) 45%,rgba(0,0,0,.9) 100%)}
#or-flash.on{animation:orflash .42s ease-out}
@keyframes orflash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sc-marquee,#sc-hint{animation:none}}

/* cabinet room: control pills tucked into the viewport's top-right corner, half size, low-key */
#or-corner{position:fixed;top:8px;right:8px;z-index:40;display:flex;flex-direction:column;gap:4px;align-items:flex-end;min-height:0;opacity:.42;transition:opacity .25s}
#or-corner:hover,#or-corner:focus-within{opacity:.95}
#or-corner .hud-btn{font-size:8px;letter-spacing:.12em;padding:3px 6px;border-radius:4px;border-color:rgba(233,246,255,.22);background:rgba(3,5,13,.35);color:#c9d6ea;min-width:0;min-height:0;font-weight:600}
#or-corner .hud-btn[aria-pressed=false]{color:#7f8aa0}
#or-corner .hud-btn .lg{display:inline}#or-corner .hud-btn .sm{display:none}
body.scene:not(.zoomed) #btn-step{display:none}
body[data-st=playing] #or-corner #btn-pause{display:inline-block}
#or-corner.row{flex-direction:row}
/* EXIT sign (Paul, Oct 24): the way back to the Arcade, a glowing red emergency-exit sign in the top-left room corner. Same link logic as before.
   --xs scales it down only if it would touch the game screen (see fitExitSign in the JS). */
.exit-sign{position:fixed;top:14px;left:14px;z-index:41;display:block;text-decoration:none;transform-origin:0 0;transform:scale(var(--xs,1));-webkit-tap-highlight-color:transparent}
.exit-sign .xs-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 15px 8px;border-radius:7px;background:linear-gradient(180deg,#1c0407,#0a0103);
  box-shadow:inset 0 0 0 2px #3d0b10,inset 0 0 20px rgba(255,30,40,.16),0 0 0 1px #000,0 8px 22px rgba(0,0,0,.6),0 0 28px rgba(255,36,36,.22);transition:box-shadow .3s}
.exit-sign .xs-row{display:flex;align-items:center;gap:8px;color:#ff3b30}
.exit-sign .xs-word{font:900 30px/1 "Arial Black",Impact,"Helvetica Neue",Arial,sans-serif;letter-spacing:.12em;margin-right:-.12em;color:#ff4136;
  text-shadow:0 0 3px #ff2a1f,0 0 10px #ff1a10,0 0 22px rgba(255,20,10,.75);animation:xs-hum 9s infinite}
.exit-sign .xs-man{width:26px;height:26px;filter:drop-shadow(0 0 3px #ff2a1f) drop-shadow(0 0 8px rgba(255,26,16,.7));animation:xs-hum 9s infinite}
.exit-sign .xs-arrow{font:900 24px/1 Arial,sans-serif;filter:drop-shadow(0 0 3px #ff2a1f) drop-shadow(0 0 8px rgba(255,26,16,.7));animation:xs-hum 9s infinite}
.exit-sign .xs-sub{font:800 10px/1 "Trebuchet MS",Arial,sans-serif;letter-spacing:.42em;margin-right:-.42em;color:#ffc2bd;text-shadow:0 0 6px rgba(255,60,50,.7);opacity:.9}
.exit-sign:hover .xs-box,.exit-sign:focus-visible .xs-box{box-shadow:inset 0 0 0 2px #6a121a,inset 0 0 26px rgba(255,40,40,.3),0 0 0 1px #000,0 8px 22px rgba(0,0,0,.6),0 0 46px rgba(255,40,40,.55)}
.exit-sign:hover .xs-word,.exit-sign:focus-visible .xs-word{color:#ff6a5f;text-shadow:0 0 4px #ff3a2f,0 0 14px #ff2a1f,0 0 34px rgba(255,30,20,.95)}
.exit-sign:focus-visible{outline:2px solid #ffd36b;outline-offset:4px;border-radius:9px}
@keyframes xs-hum{0%,100%{opacity:1}46%{opacity:1}47%{opacity:.72}47.6%{opacity:1}48.4%{opacity:.86}49%{opacity:1}82%{opacity:.97}83%{opacity:1}}
@media (prefers-reduced-motion:reduce){.exit-sign .xs-word,.exit-sign .xs-man,.exit-sign .xs-arrow{animation:none}}
/* retro: grungier, an old sign bolted up in 1985: scuffed face, a tired X that buzzes on its own */
.exit-sign.retro .xs-box{transform:rotate(-1.6deg);background:linear-gradient(180deg,#210509,#0b0103),#0b0103}
.exit-sign.retro .xs-box::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background:radial-gradient(circle at 12% 30%,rgba(255,255,255,.07) 0 1px,transparent 2px) 0 0/9px 11px,linear-gradient(100deg,transparent 40%,rgba(255,255,255,.05) 46%,transparent 52%),
  linear-gradient(170deg,transparent 70%,rgba(0,0,0,.45))}
.exit-sign.retro .xs-box::before{content:"";position:absolute;top:4px;left:5px;right:5px;height:3px;background:radial-gradient(circle,#555 0 1.4px,transparent 2px) 0 0/calc(100% - 4px) 3px no-repeat,radial-gradient(circle,#555 0 1.4px,transparent 2px) 100% 0/4px 3px no-repeat;opacity:.8}
.exit-sign.retro .xs-word i{font-style:normal;animation:xs-tired 5.5s infinite}
@keyframes xs-tired{0%,100%{opacity:1}61%{opacity:1}62%{opacity:.35}63%{opacity:.95}64%{opacity:.5}66%{opacity:1}}
@media (prefers-reduced-motion:reduce){.exit-sign.retro .xs-word i{animation:none}}
@media (max-width:560px){body[data-st=playing] #arcade-exit,body[data-st=paused] #arcade-exit{display:none}}
body.fs #arcade-exit{opacity:.35}
#arcade-exit.xs-low{top:auto;bottom:14px;transform-origin:0 100%}