/* Band Arcade — arcade cabinets (drawn by shared/cabinets.js). Used by the home page and Select Player.
   Sizing: a cabinet fills its box, which should be 1 wide × 2 tall. Everything inside is sized in em,
   and .cab sets 1em = 1/18.75 of --cab-w (16px on a 300px-wide cabinet), so it all scales together.
   Colors: --t… is the cabinet's neon tube (trim), --u… its second neon (trim2). */

/* ---------- neon colors: trim-<color> and trim2-<color> ---------- */
.trim-pink{--t:var(--pink);--t-hi:var(--pink-hi);--t-ink:var(--pink-ink);--t-glow:var(--glow-pink)}
.trim-cyan{--t:var(--cyan);--t-hi:var(--cyan-hi);--t-ink:var(--cyan-ink);--t-glow:var(--glow-cyan)}
.trim-yellow{--t:var(--yellow);--t-hi:var(--yellow-hi);--t-ink:var(--yellow-ink);--t-glow:var(--glow-yellow)}
.trim-purple{--t:var(--purple);--t-hi:var(--purple-hi);--t-ink:var(--purple-ink);--t-glow:var(--glow-purple)}
.trim-amber{--t:var(--amber);--t-hi:var(--amber-hi);--t-ink:var(--amber-ink);--t-glow:var(--glow-amber)}
.trim-green{--t:var(--green);--t-hi:var(--green-hi);--t-ink:var(--green-ink);--t-glow:var(--glow-green)}
.trim-red{--t:var(--red);--t-hi:var(--red-hi);--t-ink:var(--red-ink);--t-glow:var(--glow-red)}
.trim-white{--t:var(--white);--t-hi:var(--white-hi);--t-ink:var(--white-ink);--t-glow:var(--glow-white)}
.trim-blue{--t:var(--blue);--t-hi:var(--blue-hi);--t-ink:var(--blue-ink);--t-glow:var(--glow-blue)}
.trim2-pink{--u:var(--pink);--u-hi:var(--pink-hi);--u-glow:var(--glow-pink)}
.trim2-cyan{--u:var(--cyan);--u-hi:var(--cyan-hi);--u-glow:var(--glow-cyan)}
.trim2-yellow{--u:var(--yellow);--u-hi:var(--yellow-hi);--u-glow:var(--glow-yellow)}
.trim2-purple{--u:var(--purple);--u-hi:var(--purple-hi);--u-glow:var(--glow-purple)}
.trim2-amber{--u:var(--amber);--u-hi:var(--amber-hi);--u-glow:var(--glow-amber)}
.trim2-green{--u:var(--green);--u-hi:var(--green-hi);--u-glow:var(--glow-green)}
.trim2-red{--u:var(--red);--u-hi:var(--red-hi);--u-glow:var(--glow-red)}
.trim2-white{--u:var(--white);--u-hi:var(--white-hi);--u-glow:var(--glow-white)}
.trim2-blue{--u:var(--blue);--u-hi:var(--blue-hi);--u-glow:var(--glow-blue)}

/* ---------- the cabinet ---------- */
.cab{position:relative;width:100%;aspect-ratio:1/2;font-size:calc(var(--cab-w,300px) / 18.75);line-height:1.15;color:var(--text-hi)}
.cab-shell{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* light from the cabinet pooling on the dark floor */
.cab::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-5%;height:11%;background:radial-gradient(closest-side,var(--t),transparent);opacity:.35;pointer-events:none}

.s-side{fill:var(--cab-side)}
.s-face{fill:var(--cab-face)}
.s-tube-glow{fill:none;stroke:var(--t);stroke-width:10;stroke-opacity:.25;stroke-linejoin:round}
.s-tube{fill:none;stroke:var(--t-hi);stroke-width:2.6;stroke-linejoin:round}
.s-bezel{fill:var(--deep);stroke:var(--u);stroke-width:1.5;stroke-opacity:.55}
.s-panel{fill:var(--cab-panel);stroke:var(--t);stroke-width:2;stroke-linejoin:round}
.s-lip{fill:var(--t-ink)}
.s-joybase{fill:var(--deep)}
.s-shaft{stroke:var(--cab-metal);stroke-width:4;stroke-linecap:round}
.s-ball{fill:var(--u)}
.s-shine{fill:var(--text-hi);opacity:.45}
.s-btn0{fill:var(--t)} .s-btn1{fill:var(--u)} .s-btn2{fill:var(--t-hi)}
.s-door{fill:var(--cab-side);stroke:var(--cab-metal);stroke-width:2}
.s-coin{fill:var(--red)}
.s-slit{stroke:var(--deep);stroke-width:2.5}
.s-return{fill:var(--deep);stroke:var(--cab-metal);stroke-width:1.5}
.s-kick{fill:var(--cab-metal);opacity:.5}
.s-lamp{fill:var(--t-hi)} .s-lamp2{fill:var(--u-hi)}
.s-decal{fill:none;stroke:var(--u);stroke-width:2.5;stroke-linecap:round;opacity:.8}
.s-bolt{fill:var(--u);stroke:none}
.s-grille{stroke:var(--cab-metal);stroke-width:3;stroke-linecap:round}
.s-rivet{fill:var(--cab-metal);stroke:var(--deep);stroke-width:1}
.s-laser{stroke:var(--t-hi);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 3px var(--t))}
.s-laser2{stroke:var(--u-hi);filter:drop-shadow(0 0 3px var(--u))}
.s-tick{stroke:var(--cab-metal);stroke-width:2}
.s-dial{fill:var(--cab-panel);stroke:var(--cab-metal);stroke-width:2.5}
.s-spoke{stroke:var(--cab-metal);stroke-width:5;stroke-linecap:round}
.s-lantern{stroke:var(--temple-wood);stroke-width:1.5}
.s-ball2{fill:var(--t)}
.s-side1{fill:var(--u);opacity:.2} .s-side2{fill:var(--t);opacity:.2}
.s-goal1{stroke:var(--u);stroke-width:5;stroke-linecap:round} .s-goal2{stroke:var(--t);stroke-width:5;stroke-linecap:round}
.shape-rink .s-tube-glow{stroke:var(--t)}
.s-seam{fill:none;stroke:var(--yellow-hi);stroke-width:3;stroke-linejoin:round}
.s-plabel{font-family:var(--display);font-size:13px} .s-p1{fill:var(--u-hi)} .s-p2{fill:var(--t-hi)}

/* ---------- marquees (also used alone at the top of Select Player) ---------- */
.cab-mq{position:absolute;display:flex}
.mq{flex:1;display:flex;align-items:center;justify-content:center;gap:.3em;margin:0;padding:.2em .4em;text-align:center;overflow:hidden;
  border-radius:.4em;background:var(--t);color:var(--deep);font-family:var(--display);font-weight:400;text-transform:uppercase}
/* the animated canvas marquee (shared/marquees.js): the canvas fills the sign, whatever its frame shape */
.mq.mq-live{position:relative;padding:0;background:var(--deep)}
.mq-live .mq-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.mq-text{display:flex;flex-direction:column;align-items:center;min-width:0}
.mq-name{font-size:1.45em;line-height:1;letter-spacing:.02em}
/* haunted: an arched, purple-lit sign with drippy letters and the ghost */
.mq-haunt{background:radial-gradient(ellipse at 50% 110%,var(--t-ink),var(--deep) 75%);color:var(--t-hi);border:.12em solid var(--t);
  border-radius:50% 50% .35em .35em / 70% 70% .35em .35em;padding-top:.5em;box-shadow:inset 0 0 .8em var(--t-ink)}
.mq-haunt .mq-name{font-family:"GN Haunt",var(--display);font-size:2.05em;letter-spacing:.04em;text-shadow:var(--u-glow)}
.mq-mascot{flex:none;width:1.9em;margin-top:.3em}
.mq-mascot svg{display:block;width:100%;height:auto}
/* sound check: a black LCD with amber pixel letters */
.mq-pixel{background:var(--deep);color:var(--t);border:.12em solid var(--t);border-radius:.9em .9em .3em .3em;
  box-shadow:inset 0 0 0 .2em var(--cab-side)}
.mq-pixel .mq-name{font-family:"GN Pixel",var(--display);font-size:.9em;line-height:1.35;text-shadow:var(--t-glow)}
/* storm: a slanted sign with chunky shaded letters */
.mq-shade{background:repeating-linear-gradient(135deg,var(--u) 0 .5em,var(--pink-ink) .5em 1em);color:var(--t);border:.12em solid var(--t);border-radius:.2em;transform:skewY(7.4deg)}
.mq-shade .mq-text{background:var(--deep);padding:.2em .45em;border-radius:.2em}
.mq-shade .mq-name{font-family:"GN Shade",var(--display);font-size:1.7em;text-shadow:0 0 .3em var(--t-ink)}
/* dojo: a paper sign in a dark wooden frame, red brush-red letters, the ninja beside the name */
.mq-dojo{background:var(--dojo-paper);color:var(--red-ink);border:.3em solid var(--dojo-wood-2);border-radius:.15em;box-shadow:0 0 0 .1em var(--t),var(--t-glow);justify-content:flex-start;padding:.15em .3em}
.mq-dojo .mq-name{font-size:1.5em;letter-spacing:.04em;text-shadow:0 .05em 0 var(--dojo-paper-dim)}
.mq-dojo .mq-text{flex:1}
.mq-ninja{width:2.3em;margin:0}
/* scroll: a paper hand scroll with wooden rods at both ends, ink-red letters, hung from the temple gate */
.mq-scroll{background:var(--scroll-paper);color:var(--red-ink);border-left:.45em solid var(--scroll-rod);border-right:.45em solid var(--scroll-rod);border-radius:.25em;
  box-shadow:0 0 0 .08em var(--t),var(--t-glow);padding:.2em .3em}
.mq-scroll .mq-name{font-size:1.05em;line-height:1.05;letter-spacing:.03em;white-space:normal}
/* heist: a brushed-steel plate with rivets, green laser letters, a red laser underline */
.mq-heist{background:radial-gradient(circle at .5em 50%,var(--cab-metal) .12em,transparent .15em),radial-gradient(circle at calc(100% - .5em) 50%,var(--cab-metal) .12em,transparent .15em),
  linear-gradient(180deg,var(--cab-panel),var(--deep));color:var(--t-hi);border:.12em solid var(--t);border-radius:.3em;box-shadow:inset 0 -.14em 0 var(--u),var(--t-glow)}
.mq-heist .mq-name{font-size:1.5em;letter-spacing:.06em;text-shadow:var(--t-glow)}

/* versus: a split blue/red sign with slanted, outlined fighting-game letters */
.mq-versus{background:linear-gradient(100deg,var(--u) 0 49%,var(--yellow-hi) 49% 51%,var(--t) 51%);color:var(--yellow);border:.12em solid var(--t-hi);border-radius:.2em;
  box-shadow:inset 0 0 0 .18em var(--deep),var(--t-glow);padding:.2em .2em}
.mq-versus .mq-text{background:rgba(6,4,13,.72);border-radius:.2em;padding:.12em .3em .2em}
.mq-versus .mq-name{font-size:1.32em;font-style:italic;letter-spacing:.01em;transform:skewX(-12deg);-webkit-text-stroke:.05em var(--deep);
  text-shadow:.05em .08em 0 var(--red-ink),0 0 .35em var(--t)}

/* faceoff: neon tube letters, NEON in the trim, FACE-OFF in trim2, on a dark glass sign */
.mq-faceoff{background:radial-gradient(ellipse at 50% 120%,var(--floor-3),var(--deep) 70%);border:.12em solid var(--t);border-radius:.5em;box-shadow:inset 0 0 0 .15em var(--deep),var(--t-glow)}
.mq-faceoff .mq-name{font-family:var(--neon-font);font-size:1.02em;white-space:nowrap;letter-spacing:.02em;color:var(--t-hi);text-shadow:var(--t-glow)}
.mq-faceoff .mq-name .fo2{margin-left:.35em;color:var(--u-hi);text-shadow:var(--u-glow)}

/* showtime: a worn bulb-lit sign hanging slightly crooked; SHOWTIME in the trim, MALFUNCTION in trim2 flickering
   now and then (slow and gentle), and one bulb burnt out */
.mq-showtime{background:radial-gradient(circle,var(--t-hi) .06em,transparent .08em) 0 0/.5em .5em,linear-gradient(180deg,var(--cab-panel),var(--deep));
  border:.12em solid var(--t-ink);border-radius:.3em;box-shadow:inset 0 0 0 .2em var(--deep),var(--t-glow);transform:rotate(-2deg)}
.mq-showtime .mq-text{background:var(--deep);border-radius:.2em;padding:.1em .3em}
.mq-showtime .mq-name{font-size:1.02em;line-height:1.02;letter-spacing:.03em;white-space:normal}
.mq-showtime .st1{color:var(--t-hi);text-shadow:var(--t-glow)}
.mq-showtime .st2{display:block;color:var(--u-hi);text-shadow:var(--u-glow);animation:mq-flicker 6s infinite}
.mq-showtime .dead{font-style:normal;color:var(--cab-metal);text-shadow:none}
@keyframes mq-flicker{0%,86%,100%{opacity:1}88%{opacity:.45}90%{opacity:.95}92%{opacity:.55}}
.shape-showtime .s-hole{fill:var(--deep);stroke:var(--cab-metal);stroke-width:2}
.shape-showtime .s-tape{stroke:var(--cab-metal);stroke-width:7;stroke-linecap:round;opacity:.75}
.shape-showtime .s-crack{fill:none;stroke:var(--deep);stroke-width:2;stroke-linecap:round;opacity:.9}
.shape-showtime .s-wire{fill:none;stroke:var(--cab-metal);stroke-width:2.5;stroke-linecap:round}

/* ---------- screen ---------- */
.cab-screen{position:absolute;overflow:hidden;border-radius:.5em;background:var(--deep);box-shadow:0 0 0 .12em var(--deep),0 0 .8em var(--u)}
.shape-haunted .cab-screen{border-radius:50% 50% .4em .4em / 34% 34% .4em .4em}
.shape-storm .cab-screen{border-radius:.15em}
.scr{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* Ghost Notes: the lit staff screen */
.scr-ghost{background:var(--screen);padding-top:.6em}
.att-ghost{width:42%;margin-bottom:-.3em}
.scr-ghost .g-body{fill:var(--t)}
.scr-ghost .g-text,.scr-ghost .g-eye{fill:var(--deep)}
.att-ghost svg{display:block;width:100%;height:auto}
.att-staff{width:108%}
.attract .att-ghost{animation:att-fade 2.6s ease-in forwards}
@keyframes att-fade{0%,20%{opacity:1}85%,100%{opacity:.1}}
/* Note Checker: tuning meter */
.scr-tuner{background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 2px,transparent 2px 4px),var(--deep);gap:.2em}
.att-note{font-family:var(--display),var(--music);font-size:2.3em;line-height:1;color:var(--u-hi);text-shadow:var(--u-glow)}
.att-meter{width:84%;height:auto;overflow:visible}
.att-meter .m-arc{fill:none;stroke:var(--t);stroke-width:3}
.att-meter .m-zone{fill:none;stroke:var(--u);stroke-width:7}
.att-meter .m-tick{stroke:var(--t-hi);stroke-width:2}
.att-meter .m-needle{stroke:var(--text-hi);stroke-width:3;stroke-linecap:round}
.att-meter .m-hub{fill:var(--t)}
.att-needle{transform-box:view-box;transform-origin:80px 64px}
.att-verdict{font-family:var(--display);font-size:.8em;letter-spacing:.12em;color:var(--u)}
.attract .att-needle{animation:att-needle 3s ease-in-out forwards}
.attract .att-verdict,.attract .att-note{animation:att-lock 3s steps(1) forwards}
@keyframes att-needle{0%{transform:rotate(-48deg)}22%{transform:rotate(30deg)}40%{transform:rotate(-18deg)}56%{transform:rotate(8deg)}68%,100%{transform:rotate(0)}}
@keyframes att-lock{0%{opacity:.25}68%,100%{opacity:1}}
/* Note Storm: notes march toward Tempo */
.scr-storm{background:var(--screen)}
.scr-storm svg{width:100%;height:auto}
.att-lines line{stroke:var(--ink-2);stroke-width:1.2}
.att-robot rect{fill:var(--cyan-ink)} .att-robot .eye{fill:var(--yellow)}
.att-robot line{stroke:var(--cyan-ink);stroke-width:2} .att-robot circle{fill:var(--pink-ink)}
.att-zap{fill:none;stroke:var(--yellow-ink);stroke-width:3;stroke-linejoin:round;opacity:0}
.att-march{fill:var(--ink);stroke:var(--ink);stroke-width:2}
.att-march ellipse{stroke:none}
.att-march:nth-of-type(3){transform:translateX(96px)} .att-march:nth-of-type(4){transform:translateX(140px)} .att-march:nth-of-type(5){transform:translateX(184px)}
.attract .att-march{animation:att-march 3s linear infinite}
.attract .att-zap{animation:att-zap 1s steps(1) infinite}
@keyframes att-march{0%{transform:translateX(212px);opacity:1}88%{transform:translateX(80px);opacity:1}100%{transform:translateX(68px);opacity:0}}
@keyframes att-zap{0%{opacity:0}80%{opacity:1}}
/* Button Masher: two fighters, input icons light up one by one, then a blast */
.scr-versus{background:linear-gradient(180deg,var(--deep),var(--floor-3))}
.scr-versus svg{width:100%;height:auto}
.scr-versus .vs-bar{fill:var(--floor-3)}
.scr-versus .vs-hp1{fill:var(--u)} .scr-versus .vs-hp2{fill:var(--t)}
.scr-versus .vs-vs{font:400 10px var(--display);fill:var(--yellow)}
.scr-versus .vs-floor{stroke:var(--u);stroke-width:1.5}
.scr-versus .vs-p1{fill:var(--u-hi)} .scr-versus .vs-p2{fill:var(--t-hi)}
.scr-versus .vs-limb{fill:none;stroke-width:4;stroke-linecap:round}
.scr-versus .vs-p1 .vs-limb{stroke:var(--u-hi)} .scr-versus .vs-p2 .vs-limb{stroke:var(--t-hi)}
.scr-versus .vs-blast{fill:var(--white-hi);stroke:var(--u);stroke-width:3;opacity:0}
.scr-versus .vs-key circle{fill:var(--yellow)} .scr-versus .vs-key text{font:400 8px var(--display);fill:var(--deep)}
.cab:not(.attract) .scr-versus .vs-blast{opacity:1;transform:translateX(40px)}
.attract .scr-versus .vs-key{animation:vs-key 2.4s steps(1) both}
.attract .scr-versus .vs-blast{animation:vs-blast 2.4s ease-in forwards}
@keyframes vs-key{0%{opacity:0}10%,100%{opacity:1}}
@keyframes vs-blast{0%,55%{opacity:0;transform:none}60%{opacity:1;transform:none}90%{opacity:1;transform:translateX(62px)}100%{opacity:0;transform:translateX(62px)}}
/* Neon Face-Off: the puck slides back and forth on a tiny table */
.scr-hockey{background:var(--deep)}
.scr-hockey svg{width:100%;height:auto}
.scr-hockey .hk-table{fill:var(--floor-2)}
.scr-hockey .hk-rail1{fill:none;stroke:var(--t);stroke-width:2.5}
.scr-hockey .hk-rail2{fill:none;stroke:var(--u);stroke-width:2.5}
.scr-hockey .hk-line{fill:none;stroke:var(--text-lo);stroke-width:1;opacity:.4}
.scr-hockey .hk-goal1{stroke:var(--t-hi);stroke-width:3} .scr-hockey .hk-goal2{stroke:var(--u-hi);stroke-width:3}
.scr-hockey .hk-m1{fill:var(--deep);stroke:var(--t);stroke-width:2.5} .scr-hockey .hk-m2{fill:var(--deep);stroke:var(--u);stroke-width:2.5}
.scr-hockey .hk-puck{fill:var(--yellow-hi);transform:translate(80px,55px)}
.attract .scr-hockey .hk-puck{animation:hk-puck 2.4s ease-in-out infinite}
@keyframes hk-puck{0%{transform:translate(32px,55px)}25%{transform:translate(80px,22px)}50%{transform:translate(128px,55px)}75%{transform:translate(80px,88px)}100%{transform:translate(32px,55px)}}
/* default screen: the game's name and a blinking PRESS START */
/* Note Ninja: paper scroll screen, the right letter lights, then a slash */
.scr-ninja{background:var(--dojo-paper)}
.scr-ninja svg{width:100%;height:auto}
.scr-ninja .nj-lines line{stroke:var(--ink);stroke-width:1.2}
.scr-ninja .nj-note{fill:var(--ink);stroke:var(--ink);stroke-width:2}
.scr-ninja .nj-note ellipse{stroke:none}
.scr-ninja .nj-key rect{fill:var(--deep);stroke:var(--red);stroke-width:1.5}
.scr-ninja .nj-key text{fill:var(--white-hi);font:700 12px var(--display)}
.scr-ninja .nj-key.on rect{fill:var(--red)}
.scr-ninja .nj-slash{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;opacity:0}
.attract .scr-ninja .nj-key.on rect{animation:nj-key 2.4s steps(1) forwards}
.attract .scr-ninja .nj-note{animation:nj-gold 2.4s steps(1) forwards}
.attract .scr-ninja .nj-slash{animation:nj-slash 2.4s steps(1) forwards}
.cab:not(.attract) .scr-ninja .nj-note{fill:var(--gold-ink);stroke:var(--gold-ink)}
@keyframes nj-key{0%{fill:var(--deep)}45%{fill:var(--red)}}
@keyframes nj-gold{0%{fill:var(--ink);stroke:var(--ink)}50%{fill:var(--gold-ink);stroke:var(--gold-ink)}}
@keyframes nj-slash{0%,49%{opacity:0}50%,70%{opacity:1}71%{opacity:0}}
.scr-scrolls{justify-content:flex-start;gap:.5em;padding:.5em .4em;background:linear-gradient(180deg,var(--temple-sky),var(--deep))}
.scr-scrolls .ss-lamps{display:flex;gap:.35em}
.scr-scrolls .ss-lamps i{width:.55em;height:.75em;border-radius:.3em;box-shadow:0 0 .4em currentColor}
.scr-scrolls .ss-scroll{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;width:88%;flex:1;padding:.3em;
  background:var(--scroll-paper);color:var(--ink);border-top:.35em solid var(--scroll-rod);border-bottom:.35em solid var(--scroll-rod);border-radius:.15em}
.scr-scrolls b{font-family:var(--text);font-size:1.25em;line-height:1.1}
.scr-scrolls small{font-family:var(--text);font-size:.75em;color:var(--ink-2);text-align:center}
.attract .scr-scrolls .ss-scroll{animation:ss-unroll 2.6s ease-out}
@keyframes ss-unroll{0%{clip-path:inset(0 0 100% 0)}25%,100%{clip-path:inset(0 0 0 0)}}
.scr-heist{background:var(--deep)}
.scr-heist svg{width:100%;height:auto}
.scr-heist .hs-term{fill:var(--screen);stroke:var(--t);stroke-width:1.5}
.scr-heist .hs-lines line{stroke:var(--ink);stroke-width:1}
.scr-heist .hs-note{fill:var(--ink);stroke:var(--ink);stroke-width:1.6}
.scr-heist .hs-note ellipse{stroke:none}
.scr-heist .hs-led{fill:var(--led-off)}
.scr-heist .hs-led.on{fill:var(--t)}
.scr-heist .hs-bar{fill:var(--cab-metal);stroke:var(--t);stroke-width:1}
.scr-heist .hs-bar.on{fill:var(--text-hi)}
.attract .scr-heist .hs-bar.on{animation:hs-bar 2.2s steps(1) forwards}
.attract .scr-heist .hs-led.next{animation:hs-led 2.2s steps(1) forwards}
.attract .scr-heist .hs-note{animation:nj-gold 2.2s steps(1) forwards}
.cab:not(.attract) .scr-heist .hs-led.next{fill:var(--t)}
@keyframes hs-bar{0%{fill:var(--cab-metal)}45%{fill:var(--t-hi)}}
@keyframes hs-led{0%,49%{fill:var(--led-off)}50%{fill:var(--t)}}
.scr-insert{gap:.8em;padding:.5em;text-align:center;background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 2px,transparent 2px 4px),var(--deep)}
.att-title{font-family:var(--display);font-size:1.3em;line-height:1.1;text-transform:uppercase;color:var(--t-hi);text-shadow:var(--t-glow)}
.att-blink{display:grid;font-family:var(--display);font-size:.8em;letter-spacing:.1em;text-transform:uppercase;color:var(--u-hi)}
.att-blink span{grid-area:1/1}
.att-blink span+span{opacity:0}
.attract .att-blink span{animation:att-blink 2s steps(1) infinite}
.attract .att-blink span+span{animation-delay:-1s}
@keyframes att-blink{0%{opacity:1}50%{opacity:0}}

/* ---------- START: the real link ---------- */
.cab-start{position:absolute;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.4em;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--deep);background:var(--t);border:.12em solid var(--t-hi);border-radius:999px;
  box-shadow:inset 0 -.2em 0 rgba(0,0,0,.3),var(--t-glow)}
.cab-start:hover{background:var(--t-hi)}
.cab-start:active{box-shadow:inset 0 .15em 0 rgba(0,0,0,.3),var(--t-glow)}
.cab-start:focus-visible{outline:4px solid var(--text-hi);outline-offset:4px;box-shadow:0 0 0 9px var(--deep),var(--t-glow)}
/* speedway: a sit-down racer in magenta/orange sunset neon; the marquee is chrome-italic racing lettering with speed lines */
.mq-speedway{background:linear-gradient(180deg,var(--sw-sky-mid),var(--sw-sky-top) 60%,var(--deep));border:.12em solid var(--t);border-radius:.4em .4em .2em .2em;
  box-shadow:inset 0 -.25em 0 var(--u-ink),var(--t-glow)}
.mq-speedway .mq-name{font-size:1.18em;line-height:1;font-style:italic;letter-spacing:.02em;transform:skewX(-12deg);white-space:normal;
  background:linear-gradient(180deg,var(--yellow-hi),var(--u) 55%,var(--t));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:none;text-shadow:none;-webkit-text-stroke:.02em var(--deep)}
.mq-speedway .mq-text{position:relative}
.mq-speedway .mq-text::before,.mq-speedway .mq-text::after{content:"";position:absolute;top:58%;width:.9em;height:.08em;background:var(--u);box-shadow:0 .18em 0 var(--t),0 -.18em 0 var(--t)}
.mq-speedway .mq-text::before{right:100%;margin-right:.2em}.mq-speedway .mq-text::after{left:100%;margin-left:.2em}
.shape-speedway .s-wheel{fill:none;stroke:var(--deep);stroke-width:9}
.shape-speedway .s-grip{fill:none;stroke:var(--t);stroke-width:4;stroke-linecap:round}
.shape-speedway .s-spokes{stroke:var(--cab-metal);stroke-width:5}
.shape-speedway .s-hub{fill:var(--u);stroke:var(--deep);stroke-width:2}
.shape-speedway .s-shift{stroke:var(--cab-metal);stroke-width:5;stroke-linecap:round}
.shape-speedway .s-knob{fill:var(--t);stroke:var(--deep);stroke-width:2}
.shape-speedway .s-pedal{fill:var(--cab-metal);stroke:var(--deep);stroke-width:2}
.shape-speedway .s-sun1{stroke:var(--t);stroke-width:5;stroke-linecap:round;opacity:.85}
.shape-speedway .s-sun2{stroke:var(--u);stroke-width:5;stroke-linecap:round;opacity:.85}
.shape-speedway .s-flag{stroke:var(--white-hi);stroke-width:5;stroke-dasharray:6 6;opacity:.7}

/* duel: a two-player dojo cabinet (Dojo Duel) */
.mq-duel{background:radial-gradient(ellipse at 50% 120%,var(--dd-wood),var(--deep) 70%);color:var(--t-hi);border:.14em solid var(--t);border-radius:.25em;box-shadow:var(--t-glow)}
.shape-duel .s-dline{stroke:var(--yellow);stroke-width:4;opacity:.8}
.shape-duel .s-lantern{fill:var(--dd-lantern);opacity:.85}.shape-duel .s-lstring{stroke:var(--text-lo);stroke-width:1.5}
.shape-duel .s-lrib{stroke:var(--red-ink);stroke-width:1.5;fill:none}.shape-duel .s-lcap{fill:var(--dd-wood-line)}
.shape-duel .s-belt{stroke:var(--deep);stroke-width:1}
.scr-duel{background:linear-gradient(180deg,var(--deep),var(--dd-night))}
.scr-duel svg{width:100%;height:auto}
.scr-duel .dd-floor{fill:var(--dd-wood)}.scr-duel .dd-line{stroke:var(--yellow);stroke-width:2;opacity:.8}
.scr-duel .dd-card{fill:var(--screen)}.scr-duel .dd-staff{stroke:var(--ink);stroke-width:1}
.scr-duel .dd-note{fill:var(--ink)}.scr-duel .dd-stem{stroke:var(--ink);stroke-width:1.4}
.scr-duel .dd-n1{fill:var(--u-hi)}.scr-duel .dd-n2{fill:var(--t-hi)}
.scr-duel .dd-band1{fill:var(--belt-red)}.scr-duel .dd-band2{fill:var(--belt-blue)}
.scr-duel .dd-sc{font:400 13px var(--display)}.scr-duel .dd-s1{fill:var(--u-hi)}.scr-duel .dd-s2{fill:var(--t-hi)}
.scr-duel .dd-cap{font:400 8px var(--display);fill:var(--yellow);letter-spacing:.08em}
.attract .scr-duel .dd-n1{animation:dd-hop 2.4s ease-out infinite}
.attract .scr-duel .dd-n2{animation:dd-hop 2.4s ease-out 1.2s infinite}
@keyframes dd-hop{0%,8%{transform:none}18%{transform:translateY(-12px)}30%,100%{transform:none}}
/* signal: a deep-space radio console (Lost Signal) */
.mq-signal{background:linear-gradient(180deg,var(--deep),var(--ls-scope));border:.12em solid var(--t);border-radius:.9em .9em .2em .2em;box-shadow:var(--t-glow)}
.shape-signal .s-bar{fill:var(--t);opacity:.8}.shape-signal .s-bar2{fill:var(--u)}
.shape-signal .s-wave{fill:none;stroke:var(--u);stroke-width:4;stroke-linecap:round;opacity:.8}
.scr-signal{background:var(--ls-scope)}
.scr-signal svg{width:100%;height:auto}
.scr-signal .sg-ring{fill:none;stroke:var(--ls-grid);stroke-width:1.2}
.scr-signal .sg-sweep path{fill:var(--ls-grid)}.scr-signal .sg-sweep line{stroke:var(--ls-wave);stroke-width:2}
.scr-signal .sg-sweep{transform-origin:80px 52px;transform-box:view-box}
.scr-signal .sg-blip{fill:var(--ls-wave);opacity:.6}
.scr-signal .sg-cap{fill:var(--ls-wave);font:700 9px var(--display);letter-spacing:.1em}
.attract .scr-signal .sg-sweep{animation:sg-turn 3s linear infinite}
.attract .scr-signal .sg-blip{opacity:0;animation:sg-blip 3s ease-out infinite}
.attract .scr-signal .b2{animation-delay:1.3s}.attract .scr-signal .b3{animation-delay:2.1s}
@keyframes sg-turn{to{transform:rotate(360deg)}}
@keyframes sg-blip{0%{opacity:0}8%{opacity:1}60%,100%{opacity:0}}

/* ink: the Ink Master's scroll cabinet (Vanishing Ink): the sign is a parchment scroll between wooden rods */
.mq-ink{background:var(--vi-paper);color:var(--vi-ink);border-left:.45em solid var(--vi-rod);border-right:.45em solid var(--vi-rod);border-radius:.25em;box-shadow:var(--t-glow)}
.mq-ink .mq-name{font-family:"GN Brush",var(--display);font-size:1.5em;letter-spacing:.01em}
.shape-ink .s-rod{fill:var(--vi-rod)}.shape-ink .s-rodcap{fill:var(--vi-rod-cap)}
.shape-ink .s-ink{fill:var(--vi-ink);stroke:var(--t);stroke-width:1.5;opacity:.9}
.shape-ink .s-fnote{fill:var(--u-hi);stroke:var(--u-hi);stroke-width:3.5;opacity:.45}
.shape-ink .s-brush{stroke:var(--vi-rod);stroke-width:5;stroke-linecap:round}.shape-ink .s-brushtip{fill:var(--vi-ink)}
.scr-ink{background:linear-gradient(180deg,var(--dd-night),var(--deep))}
.scr-ink svg{width:100%;height:auto}
.scr-ink .vk-paper{fill:var(--vi-paper)}.scr-ink .vk-rod{fill:var(--vi-rod)}
.scr-ink .vk-staff{stroke:var(--vi-ink-2);stroke-width:1}
.scr-ink .vk-n{fill:var(--vi-ink);stroke:var(--vi-ink);stroke-width:1.6}
.scr-ink .vk-cap{fill:var(--t-hi);font:400 8px var(--display);letter-spacing:.06em}
.attract .scr-ink .vk-n{animation:vk-ink 4.2s ease-in-out infinite}
.attract .scr-ink .vk-n2{animation-delay:.25s}.attract .scr-ink .vk-n3{animation-delay:.5s}
.attract .scr-ink .vk-cap{animation:vk-cap 4.2s ease-in-out infinite}
@keyframes vk-ink{0%{opacity:0}6%,50%{opacity:1}74%,100%{opacity:0}}
@keyframes vk-cap{0%,62%{opacity:0}74%,96%{opacity:1}100%{opacity:0}}

/* quest: a pixel-art marquee: a big 8-bit microphone beside ARCADE QUEST in the pixel font, on a dark scanline sign */
.mq-quest{background:repeating-linear-gradient(0deg,var(--deep) 0 .12em,color-mix(in srgb,var(--u) 18%,var(--deep)) .12em .24em);border:.18em solid var(--t);
  border-radius:0;box-shadow:inset 0 0 0 .12em var(--deep),var(--t-glow);gap:.35em}
.mq-quest .mq-mic{height:82%;aspect-ratio:9/14;flex:none}
.mq-quest .mq-micsvg{display:block;width:100%;height:100%;fill:var(--t-hi);filter:none}
.mq-quest .mq-name{font-family:"GN Quest","GN Pixel",var(--display);font-weight:700;font-size:1.6em;line-height:.95;letter-spacing:.04em;color:var(--t-hi);text-shadow:.08em .08em 0 var(--u-ink)}
.shape-quest .s-ab{font:700 14px "GN Quest",var(--display);fill:var(--deep)}
.shape-quest .s-coinpix{fill:var(--yellow)}.shape-quest .s-coinpix2{fill:var(--yellow-hi)}

.attract .cab-start{animation:att-start 1.4s steps(1) infinite}
@keyframes att-start{50%{background:var(--t-hi)}}

.scr-speedway{background:var(--deep)}
.scr-speedway svg{width:100%;height:auto}
.scr-speedway .sw-sky{fill:var(--sw-sky-mid)}
.scr-speedway .sw-sun{fill:var(--sw-sun-1)}
.scr-speedway .sw-cut{stroke:var(--sw-sky-mid);stroke-width:2}
.scr-speedway .sw-ground{fill:var(--sw-ground)}
.scr-speedway .sw-grid{stroke:var(--sw-grid);stroke-width:.7;opacity:.6;fill:none}
.scr-speedway .sw-road{fill:var(--sw-road)}
.scr-speedway .sw-edge{stroke:var(--t);stroke-width:2;fill:none}
.scr-speedway .sw-dash{stroke:var(--sw-lane);stroke-width:2.5;stroke-dasharray:6 8}
.scr-speedway .sw-car rect{fill:var(--t)}.scr-speedway .sw-car .sw-glass{fill:var(--sw-glass)}.scr-speedway .sw-car .sw-tail{fill:var(--sw-tail)}
.scr-speedway .sw-cap{fill:var(--u-hi);font:700 8px var(--display);letter-spacing:.08em}
.attract .scr-speedway .sw-dash{animation:sw-dash .5s linear infinite}
.attract .scr-speedway .sw-car{animation:sw-sway 2.4s ease-in-out infinite}
@keyframes sw-dash{to{stroke-dashoffset:-14}}
@keyframes sw-sway{50%{transform:translateX(3px)}}
.scr-quest{position:relative;background:var(--deep);overflow:hidden}
.scr-quest .q-static{position:absolute;inset:0;opacity:.4;background:repeating-linear-gradient(0deg,var(--text-lo) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,transparent 0 4px,color-mix(in srgb,var(--u) 50%,transparent) 4px 5px)}
.scr-quest .q-bars{position:absolute;left:0;right:0;top:30%;height:12%;background:color-mix(in srgb,var(--t) 35%,transparent);opacity:.5}
.scr-quest .q-mic{position:absolute;left:50%;top:48%;height:52%;transform:translate(-50%,-50%);fill:var(--t-hi)}
.scr-quest .q-label{position:absolute;left:0;right:0;bottom:8%;text-align:center;font:700 .8em "GN Quest",var(--display);color:var(--u-hi);letter-spacing:.15em}
.attract .scr-quest .q-static{animation:st-static 1.2s steps(4) infinite}
.attract .scr-quest .q-bars{animation:q-bars 2.2s steps(6) infinite}
.attract .scr-quest .q-mic{animation:q-glitch 3.4s steps(1) infinite}
@keyframes q-bars{0%{top:10%}33%{top:62%}66%{top:36%}100%{top:80%}}
@keyframes q-glitch{0%,84%,100%{opacity:1;transform:translate(-50%,-50%)}86%{opacity:.3;transform:translate(-44%,-50%)}90%{opacity:1;transform:translate(-56%,-50%)}}
.scr-showtime{position:relative;background:var(--deep)}
.scr-showtime .st-static{position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(0deg,var(--text-lo) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,transparent 0 3px,color-mix(in srgb,var(--text-lo) 40%,transparent) 3px 4px);animation:st-static 1.2s steps(4) infinite}
@keyframes st-static{to{background-position:0 7px,5px 0}}
.scr-showtime .st-eyes{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;gap:1.1em;animation:st-blink 4.5s infinite}
.scr-showtime .st-eyes i{width:.9em;height:.9em;border-radius:50%;background:var(--anim-eye-bad);box-shadow:0 0 .3em var(--anim-eye-bad),0 0 .9em var(--anim-eye-bad)}
@keyframes st-blink{0%,90%,100%{opacity:1}92%,95%{opacity:.1}}
.scr-showtime .st-label{position:absolute;left:0;right:0;bottom:10%;text-align:center;font-family:var(--display);font-size:.8em;color:var(--t-hi);letter-spacing:.1em;opacity:.8}

@media (prefers-reduced-motion:reduce){
  .cab *,.cab{animation:none!important}
}