/* Cabinet Night: the Graveyard Arcade home as one arcade cabinet in the yard at night. One dark look on purpose
   (a night-time arcade), so there is no light theme. Every swappable piece has data-slot; sizes come from --sz
   (1 = the design's own size), set by the editor.
   Layout: a cabinet (marquee, tube + attendant, control deck, cartridge shelf) stands on the yard floor; below it the
   cartridge wall, then the coin door. Hardware is inked art; anything ON a screen is the pixel kit. */
:root{
  --bg:#07060b;--night:#171022;--cab:#100c15;--cab-2:#1b1522;--trim:#f6580f;--trim-hi:#ff9a5a;--trim-lo:#8a2e08;
  --ink:#f7efe5;--ink-2:#d6ccde;--ink-3:#b3a9bf;--bone:#f2e3c4;--amber:#ffb84d;--orange:#ff7a32;--phos:#78f0a0;--cyan:#93dbe6;
  --panel:#120d1b;--lcd:#0c1a0f;
  --f-display:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;--f-body:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  color-scheme:dark
}
body{background:var(--bg);color:var(--ink)}
[hidden]{display:none!important}
a{color:var(--amber)}a:hover{color:var(--orange)}
html.dlg-open body{overflow:hidden}

/* ---------- base ---------- */
.ns{--g:.7;position:relative;overflow:hidden;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
.ns *,.ns *::before,.ns *::after{box-sizing:border-box}
:where(.ns) a,:where(.ns) button,:where(.ns) label,:where(.ns) input[type=range],:where(.ns) input[type=checkbox],:where(.ns) select{cursor:inherit}
:where(.ns) input[type=text],:where(.ns) input[type=password],:where(.ns) input[type=search]{cursor:text}
/* resets carry no weight (:where), so every component rule below wins over them */
:where(.ns) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:inherit;-webkit-appearance:none;appearance:none}
:where(.ns) h1,:where(.ns) h2,:where(.ns) h3,:where(.ns) h4,:where(.ns) p,:where(.ns) ul,:where(.ns) li{margin:0;padding:0}
:where(.ns) ul{list-style:none}
:where(.ns) img{display:block;max-width:none;border:0}
.ns :focus{outline:none}
.ns :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
.silk{font:700 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#dcc78c}

/* ---------- keys (Night Shift): the up and pressed pictures swap; the label rides on the measured face ---------- */
.key{position:relative;display:block;flex:none;isolation:isolate;text-decoration:none;color:var(--kink,#2a1205);-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:18px}
.key:hover{color:var(--kink,#2a1205)}
.kbox{position:relative;display:block;width:100%;aspect-ratio:var(--kar,420/215)}
.key .cap{position:absolute;transition:filter .2s}
.key.t-text .cap{left:0;bottom:0;width:100%}
.key.t-icon .cap{left:50%;top:0;height:100%;transform:translateX(-50%)}
.key.t-px .cap{left:0;top:0;width:100%;height:100%;--k:var(--pxk,3)}
.key.t-px.t-icon .cap{left:0;transform:none;width:100%;background-size:100% 100%}
.key:hover .cap{filter:brightness(1.08) saturate(1.05)}
.key .face{position:absolute;left:var(--fx);top:var(--fy);width:var(--fw);height:var(--fh);display:flex;align-items:center;justify-content:center;transition:left .06s,top .06s,width .06s,height .06s}
.key.t-px .face{left:0;top:0;width:100%;height:100%}
.key.t-px.down .face{top:calc(1px * var(--k))}
.key.t-px.t-icon .face{left:19%;top:16%;width:62%;height:56%}
.key .lbl{display:block;font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:.05em;line-height:1;white-space:nowrap;color:var(--kink);transition:transform .06s}
.key.ink-dark .lbl{text-shadow:0 1px 0 rgba(255,214,170,.45)}
.key.ink-light .lbl{text-shadow:0 1px 0 rgba(0,0,0,.55)}
.key.down .lbl,.key.down .ico{transform:scale(.94);text-shadow:none}
.key .ico{display:block;width:64%;height:auto;max-height:94%;fill:none;stroke:var(--kink);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;transition:transform .06s}
.key::after{content:"";position:absolute;left:14%;right:14%;bottom:-4%;height:24%;border-radius:50%;z-index:-1;pointer-events:none;opacity:.75;filter:blur(6px);transition:opacity .25s;background:radial-gradient(closest-side,rgba(255,122,50,calc(.6 * var(--g))),rgba(255,122,50,0))}
.key.ink-light::after{background:radial-gradient(closest-side,rgba(255,226,180,calc(.28 * var(--g))),rgba(255,226,180,0))}
.key:hover::after{opacity:1}
.key.down::after{opacity:.35}
.k-md{width:calc(200px * var(--sz,1))}.k-md .lbl{font-size:calc(20px * var(--sz,1))}
.k-sm2{width:calc(168px * var(--sz,1))}.k-sm2 .lbl{font-size:calc(19px * var(--sz,1))}
.k-xs{width:calc(132px * var(--sz,1))}.k-xs .lbl{font-size:calc(16px * var(--sz,1))}
.k-ic{width:calc(54px * var(--sz,1))}
.keyt{display:flex;align-items:center;gap:8px;width:auto;padding-right:8px;border-radius:14px}
.keyt .kbox{width:calc(54px * var(--sz,1));flex:none}
.keyt .ktxt{font:800 15px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);transition:color .2s}
.keyt:hover .ktxt{color:var(--amber)}

/* ---------- one button system (cab.js drawBtn): any slot can hold a stamped key, a square icon key or a push button.
   --bw is the slot's width for the chosen type at size 100 %; --bscale shrinks a whole row on small screens. ---------- */
.btn{--bscale:1;flex:none}
.btn.key,.btn.pbtn{width:calc(var(--bw,160px) * var(--sz,1) * var(--bscale))}
.btn.keyt{width:auto}
.btn.keyt .kbox,.btn.keyt .pb-pic{width:calc(var(--bw,54px) * var(--sz,1) * var(--bscale));flex:none}
.btn.keyt.t-push{display:flex;align-items:center;gap:8px}
.btn.key .lbl{font-size:min(calc(var(--bw,160px) * .118 * var(--sz,1) * var(--bscale)),calc(var(--bw,160px) * var(--sz,1) * var(--bscale) * var(--fwn,.7) / (var(--nch,4) * .62)))}
.btn.t-px .lbl{letter-spacing:.06em}
.btn .face{overflow:hidden;border-radius:6%}
/* the light sweep that crosses the face on release (with the glow surge and the sparks) */
.btn .sweep{position:absolute;top:-20%;bottom:-20%;left:-70%;width:45%;pointer-events:none;opacity:0;transform:skewX(-18deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,246,220,.65),rgba(255,255,255,0))}
.btn.surge .sweep{animation:sweep .5s ease-out}
@keyframes sweep{0%{opacity:1;left:-70%}100%{opacity:0;left:125%}}
.btn.key.surge .cap{animation:surge .5s ease-out}
.btn .bsilk{display:block;margin-top:6px;text-align:center;font:700 10.5px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#dcc78c}
/* a status LED on the button: dim at rest, lit with the button (sound on, a game ready, the reel spinning) */
.btn .led{position:absolute;right:9%;top:7%;width:7px;height:7px;border-radius:50%;z-index:4;pointer-events:none;background:#2c1a10;box-shadow:inset 0 1px 1px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.45);display:none}
.btn.key .led,.deck .btn .led{display:block}
.btn.t-icon .led{right:14%;top:12%}
.btn.pbtn .led{right:4%;top:4%}
.btn.lit .led{background:#78f0a0;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 calc(10px * var(--g)) rgba(120,240,160,calc(.95 * var(--g)))}
#b-play.lit .led{background:#ffb84d;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 calc(12px * var(--g)) rgba(255,170,60,var(--g));animation:led 1.2s ease-in-out infinite}
@keyframes led{50%{opacity:.45}}
.btn.key.lit .cap{filter:brightness(1.08) drop-shadow(0 0 calc(12px * var(--g)) rgba(255,140,50,calc(.55 * var(--g))))}
#b-play.lit.key{animation:readyGlow 1.6s ease-in-out infinite}
.btn.key.t-icon.lit .ico{filter:drop-shadow(0 0 calc(4px * var(--g)) rgba(255,214,150,.8))}
#b-surprise.lit .cap,#b-surprise.lit .pb-pic{animation:reel .32s linear infinite}
@keyframes reel{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px) rotate(-2deg)}}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
/* a stamped key already says what it does, so the deck's printed label under it would repeat the word */
.act:has(> .btn.t-text) > .silk{display:none}

/* spark burst on release (two identical animations so each release restarts it) */
.burst{position:absolute;left:50%;top:26%;width:0;height:0;pointer-events:none;z-index:3}
.spk{position:absolute;left:-1.5px;top:0;width:3px;height:var(--h,14px);border-radius:3px;background:linear-gradient(to top,#fff7d6,#ffb84d 55%,rgba(255,122,50,0));opacity:0;transform-origin:50% 0}
.burst .bring{position:absolute;left:-42px;top:-42px;width:84px;height:84px;border-radius:50%;border:2px solid rgba(255,214,140,.9);opacity:0}
.burst.b1 .spk{animation:spkA .62s cubic-bezier(.15,.7,.3,1) var(--dl,0s) both}
.burst.b2 .spk{animation:spkB .62s cubic-bezier(.15,.7,.3,1) var(--dl,0s) both}
.burst.b1 .bring{animation:ringA .45s ease-out both}
.burst.b2 .bring{animation:ringB .45s ease-out both}
@keyframes spkA{0%{opacity:1;transform:rotate(var(--a)) translateY(-14px) scaleY(.3)}35%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) scaleY(1)}}
@keyframes spkB{0%{opacity:1;transform:rotate(var(--a)) translateY(-14px) scaleY(.3)}35%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) scaleY(1)}}
@keyframes ringA{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.9)}}
@keyframes ringB{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.9)}}

/* ---------- framed pictures: picture under the frame, in the measured opening ---------- */
.slot{position:relative;display:block;background-image:none!important}
.slot .op{position:absolute;left:calc(var(--ox) - .5%);top:calc(var(--oy) - .5%);width:calc(var(--ow) + 1%);height:calc(var(--oh) + 1%);overflow:hidden;background:#05040a}
.slot .op img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transition:opacity .2s,transform .45s ease}
.slot .p2{opacity:0}
.slot .skin{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}

/* pixel-font text: one box per glyph */
.pxt{position:relative;display:block;flex:none}
.pxt>i{position:absolute;top:0;display:block;background-repeat:no-repeat;image-rendering:pixelated}

/* ---------- section plates with live text ---------- */
.ns .plate{display:grid;place-items:center;width:min(100%,calc(var(--pw,640px) * var(--sz,1)));margin-left:auto;margin-right:auto}
.plate>span{padding-left:.16em;font:900 calc(clamp(17px,2vw,27px) * var(--sz,1))/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase}
.plate.tone-dark>span{color:#fff4ea;text-shadow:0 0 2px #1a0826,0 2px 0 #1a0826,0 -1px 0 #1a0826,0 0 calc(10px * var(--g)) rgba(255,79,123,calc(.95 * var(--g))),0 0 calc(24px * var(--g)) rgba(255,122,50,calc(.5 * var(--g)))}
.plate.tone-light>span{color:#2b1806;text-shadow:0 1px 0 rgba(255,236,190,.55),0 -1px 0 rgba(0,0,0,.3)}
.wall-intro{text-align:center;color:var(--ink-2);max-width:60ch;margin:14px auto 0;font-size:16.5px}

/* ---------- the room: the cabinet stands in the yard; the stacks fade in behind it ---------- */
.cabinet{position:relative;isolation:isolate;padding:0 0 34px;background:var(--bg)}
/* the room's light sits over whatever background the owner picks (#cab-bg): a warm glow behind the cabinet and a fade
   to night at the top and bottom, so the cabinet always reads against key art */
.cabinet::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 50% 42%,rgba(255,122,50,calc(.13 * var(--g))),rgba(255,122,50,0) 70%),linear-gradient(to bottom,rgba(7,6,11,.82),rgba(7,6,11,.55) 40%,rgba(7,6,11,.96))}

/* ---------- background layers (cab.js paintGround): a picture and a scrim; textures tile, illustrations cover ---------- */
.bgl{position:absolute;inset:0;z-index:-2;overflow:hidden}
.bgi{position:absolute;inset:0;background-repeat:no-repeat;background-position:center 30%;background-size:cover}
.g-tile>.bgi{background-repeat:repeat;background-position:0 0;background-size:var(--gt,320px) var(--gt,320px)}
.g-cover>.bgi{transform:scale(var(--gz,1));transform-origin:50% 40%}
.bgs{position:absolute;inset:0;background:var(--bg);opacity:.5;pointer-events:none}
.topbar{position:relative;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1320px;margin:0 auto;padding-top:14px;padding-bottom:14px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.coinop{font:700 12px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.coinop span{color:var(--amber)}
.ctrl-wrap{position:relative;flex:none}
.ctrl{display:flex;align-items:center;gap:4px;padding:6px 8px 6px 10px;border-radius:18px;background:rgba(9,7,14,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 12px 30px rgba(0,0,0,.35)}
.navl{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 10px;border-radius:12px;text-decoration:none;color:var(--ink);font:800 15px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;transition:color .2s,background .2s}
.navl:hover{color:var(--amber);background:rgba(255,255,255,.045)}
.navl .mini-card{width:calc(40px * var(--sz,1));transform:rotate(-10deg);transition:transform .35s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.navl:hover .mini-card{transform:rotate(0deg) translateY(-2px) scale(1.12)}
.navl .mini-coin{width:calc(40px * var(--sz,1));transition:transform .6s cubic-bezier(.3,1.2,.5,1);filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.navl:hover .mini-coin{transform:rotateY(360deg) translateY(-2px)}

/* the cabinet body: black paint, orange T-moulding lit from the upper left (the yard's bulbs), a cool rim on the right */
.cab-body{position:relative;width:calc(100% - 48px);max-width:1240px;margin:0 auto;border:7px solid;border-color:var(--trim-hi) var(--trim-lo) var(--trim-lo) var(--trim);border-radius:30px 30px 12px 12px;
  background:linear-gradient(100deg,rgba(255,255,255,.035),rgba(255,255,255,0) 30%),linear-gradient(to bottom,var(--cab-2),var(--cab) 50%,#0a0810);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.6),inset -10px 0 30px -18px rgba(147,219,230,.35),0 40px 80px rgba(0,0,0,.7),0 0 calc(60px * var(--g)) rgba(255,122,50,calc(.12 * var(--g)))}

/* ---------- the marquee: backlit art behind glass, the logo, the bulb chase ---------- */
.marquee{position:relative;isolation:isolate;margin:18px 18px 0;height:clamp(130px,12vw,180px);border-radius:18px 18px 8px 8px;overflow:hidden;display:grid;place-items:center;background:#1a0f12;box-shadow:inset 0 0 0 3px #050407,0 10px 26px rgba(0,0,0,.55)}
.mq-art{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#1a0f12;filter:brightness(calc(.55 + .25 * var(--g))) saturate(1.08);animation:mqHum 7s ease-in-out infinite}
@keyframes mqHum{0%,100%{filter:brightness(calc(.55 + .25 * var(--g))) saturate(1.08)}47%{filter:brightness(calc(.55 + .25 * var(--g))) saturate(1.08)}48%{filter:brightness(calc(.42 + .2 * var(--g))) saturate(1)}50%{filter:brightness(calc(.6 + .28 * var(--g))) saturate(1.1)}}
.mq-glass{position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 26%),linear-gradient(to bottom,rgba(7,6,11,.1),rgba(7,6,11,.45));box-shadow:inset 0 0 50px rgba(0,0,0,.7)}
.mq-bulbs{position:absolute;inset:9px;pointer-events:none}
.mq-bulbs i{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fffbe8,#ffc46a 45%,#d4600f 80%);box-shadow:0 0 calc(10px * var(--g)) rgba(255,190,90,calc(.95 * var(--g)));opacity:.3;animation:chase 1.2s steps(1) infinite;animation-delay:calc(var(--k) * .4s)}
@keyframes chase{0%{opacity:1}33.3%,100%{opacity:.25}}
.brand{position:relative;z-index:2;font-size:0;line-height:0}
.logo{position:relative;display:block;width:calc(clamp(200px,26vw,380px) * var(--sz,1));aspect-ratio:640/285;border-radius:14px}
.logo img{width:100%;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)) drop-shadow(0 0 calc(18px * var(--g)) rgba(255,122,50,calc(.35 * var(--g))))}
.logo:hover img{filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)) drop-shadow(0 0 calc(26px * var(--g)) rgba(255,122,50,calc(.65 * var(--g)))) brightness(1.08)}

/* ---------- the tube and the attendant ---------- */
.bay-row{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;align-items:center;padding:22px 26px 0}
.tube-col{min-width:0;display:grid;place-items:center}
.tube{position:relative;width:min(100%,calc(800px * var(--tsz,1)))}
.tube:has(.op.attract){cursor:pointer}
.tube:has(.op.attract):hover .skin{filter:drop-shadow(0 18px 24px rgba(0,0,0,.65)) drop-shadow(0 0 calc(18px * var(--g)) rgba(255,176,0,calc(.35 * var(--g))))}
.tube .slot{width:100%}
.tube .skin{filter:drop-shadow(0 18px 24px rgba(0,0,0,.65))}
.tube .op{background:#020203;border-radius:2.5%/5%}
.tube .op .shot{opacity:0;transition:opacity .7s ease}
.tube .op .shot.on{opacity:1}
.tube .op.attract .shot{filter:brightness(.62) saturate(.8) blur(.4px)}
.tube .op.ready .shot{filter:none}
.noise{position:absolute;inset:0;width:100%;height:100%;opacity:0;image-rendering:pixelated;transition:opacity .08s}
.op.static .noise{opacity:.8}
.bootline{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#f4fbff;box-shadow:0 0 12px #d8f4ff,0 0 30px rgba(180,230,255,.8);opacity:0;transform:scaleX(0)}
.op.booting .bootline{animation:crtOn .62s cubic-bezier(.3,0,.2,1) both}
@keyframes crtOn{0%{opacity:1;transform:scaleX(0) scaleY(1)}35%{opacity:1;transform:scaleX(1) scaleY(1)}70%{opacity:.85;transform:scaleX(1) scaleY(60)}100%{opacity:0;transform:scaleX(1) scaleY(140)}}
.lines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 1px,rgba(0,0,0,0) 1px,rgba(0,0,0,0) 3px);box-shadow:inset 0 0 60px rgba(0,0,0,.75)}
.glass{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 28% 18%,rgba(255,255,255,.1),rgba(255,255,255,0) 70%)}
.osd{position:absolute;inset:6% 5%;pointer-events:none;display:block}
.osd .pxt{filter:drop-shadow(0 0 calc(4px * var(--g)) currentColor)}
.osd .o-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.osd .o-tl{position:absolute;left:0;top:0}
.osd .o-tr{position:absolute;right:0;top:0;display:flex;align-items:center;gap:6px}
.osd .o-bl{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:rgba(5,4,9,.68);box-shadow:0 0 0 2px rgba(5,4,9,.68)}
.osd.attract .pxt:first-child{filter:drop-shadow(0 0 calc(6px * var(--g)) rgba(255,176,0,.9))}
.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:0}}
.osd.ready .o-tl{animation:blink 1.4s steps(1) infinite}
.pbar{display:flex;width:62%;height:calc(10px * var(--s,3));image-rendering:pixelated}
.pbar i{display:block;height:100%;background-repeat:no-repeat;background-size:100% 100%}
.pbar .l{width:calc(11px * var(--s,3));background-image:url(/arcade/art/ui/cabinet/px-energy-bar-capL.png)}
.pbar .m{position:relative;flex:1;background:url(/arcade/art/ui/cabinet/px-energy-bar-empty.png) 0 0/auto 100% repeat-x}
.pbar .m b{position:absolute;left:0;top:0;bottom:0;width:0;background:url(/arcade/art/ui/cabinet/px-energy-bar-fill.png) 0 0/auto 100% repeat-x;animation:fill 1s steps(14) .05s forwards}
.pbar .r{width:calc(2px * var(--s,3));background-image:url(/arcade/art/ui/cabinet/px-energy-bar-capR.png)}
@keyframes fill{to{width:100%}}

/* ---------- CRT effects (cab.js Tube.fx): channel change, picture lock, power-down dot. Brightness rides on --g. ---------- */
.tube .op.preview .shot{filter:brightness(.8) saturate(.88)}
.op.fx-ch .shot.on{animation:chRoll .36s steps(6,end)}
@keyframes chRoll{0%{transform:translateY(-38%) scaleY(1.12);filter:brightness(calc(1.2 + .9 * var(--g))) contrast(1.3)}
  25%{transform:translateY(14%) skewX(-5deg);filter:brightness(calc(1 + .6 * var(--g))) contrast(1.15)}
  50%{transform:translateY(-6%) skewX(3deg)}75%{transform:translateY(2%) skewX(-1deg)}100%{transform:none;filter:none}}
.op.fx-rgb .shot.on{filter:drop-shadow(5px 0 0 rgba(255,30,70,.6)) drop-shadow(-5px 0 0 rgba(40,210,255,.6))}
.op.fx-ch.fx-rgb .shot.on{animation:chRoll .36s steps(6,end),rgbSplit .36s ease-out}   /* rgbSplit carries the bloom here (its 0% has the brightness) */
@keyframes rgbSplit{0%{filter:drop-shadow(9px 0 0 rgba(255,30,70,.75)) drop-shadow(-9px 0 0 rgba(40,210,255,.75)) brightness(calc(1.3 + .8 * var(--g)))}100%{filter:none}}
.op.burst-n .noise{opacity:.34}
.op.fx-ch .lines{animation:linesWob .36s steps(4,end)}
@keyframes linesWob{0%{transform:scaleY(1.06) translateY(-2px);opacity:.6}50%{transform:skewX(4deg)}100%{transform:none;opacity:1}}
/* the picture locks in: a bright bloom settling, scanlines wobbling, a soft horizontal jitter */
.op.fx-snap .shot.on{animation:snap .56s cubic-bezier(.2,.9,.2,1)}
@keyframes snap{0%{transform:scale(1.06,1.02);filter:brightness(calc(1.5 + 1.2 * var(--g))) saturate(1.3) blur(1.2px)}35%{transform:scale(.995,1) translateX(1.5px);filter:brightness(calc(1.1 + .3 * var(--g)))}
  60%{transform:translateX(-1px)}100%{transform:none;filter:none}}
/* on High the lock-in also splits its colours; one keyframe set carries both, since two animations on filter cannot add */
.op.fx-snap.fx-rgb .shot.on{animation:snapRgb .56s cubic-bezier(.2,.9,.2,1)}
@keyframes snapRgb{0%{transform:scale(1.06,1.02);filter:brightness(calc(1.5 + 1.2 * var(--g))) saturate(1.3) blur(1.2px) drop-shadow(9px 0 0 rgba(255,30,70,.7)) drop-shadow(-9px 0 0 rgba(40,210,255,.7))}
  35%{transform:scale(.995,1) translateX(1.5px);filter:brightness(calc(1.1 + .3 * var(--g))) drop-shadow(3px 0 0 rgba(255,30,70,.4)) drop-shadow(-3px 0 0 rgba(40,210,255,.4))}
  60%{transform:translateX(-1px);filter:none}100%{transform:none;filter:none}}
.op.fx-snap .lines{animation:linesWob .5s steps(5,end)}
.op.fx-snap .glass{animation:bloom .56s ease-out}
@keyframes bloom{0%{background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(220,245,255,calc(.5 * var(--g))),rgba(255,255,255,0) 75%)}100%{background:radial-gradient(ellipse 60% 50% at 28% 18%,rgba(255,255,255,.1),rgba(255,255,255,0) 70%)}}
/* power-down: the picture squeezes to a bright line, the line to a dot, the dot fades (before the next boot) */
.op.fx-off .shot.on,.op.fx-off .osd{animation:powerOff .34s cubic-bezier(.6,0,.9,.4) forwards}
.op.fx-off::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#f4fbff;box-shadow:0 0 14px #d8f4ff,0 0 calc(34px * var(--g)) rgba(180,230,255,.9);animation:dot .34s ease-in forwards;pointer-events:none}
@keyframes powerOff{0%{transform:none;filter:brightness(1)}55%{transform:scale(1,.012);filter:brightness(3)}85%{transform:scale(.02,.012);filter:brightness(4)}100%{transform:scale(0,0);opacity:0}}
@keyframes dot{0%,55%{opacity:0;transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.2)}}
/* low quality: just a short dim cut between pictures */
.op.fx-cut .shot.on{animation:cut .2s steps(2,end)}
@keyframes cut{0%{opacity:.25}100%{opacity:1}}

.attendant{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.cam{position:relative;width:calc(150px * var(--sz,1));aspect-ratio:419/420}
.cam-op{position:absolute;left:17.9%;top:17.3%;width:64.4%;height:64%;border-radius:50%;overflow:hidden;background:radial-gradient(circle,#17302a,#060c0b)}
.cam-op .face{position:absolute;left:-12%;top:4%;width:124%;filter:saturate(.9) contrast(1.05)}
.cam-op .face.body{left:5%;top:2%;width:90%}
.cam-skin{position:absolute;inset:0;width:100%;filter:drop-shadow(0 8px 12px rgba(0,0,0,.6))}
.say{position:relative;max-width:240px;padding:10px 14px;border-radius:10px;background:rgba(9,7,14,.86);box-shadow:0 0 0 1px rgba(120,240,160,.28),0 0 calc(14px * var(--g)) rgba(120,240,160,calc(.16 * var(--g)));font:700 12.5px/1.45 var(--f-mono);letter-spacing:.04em;color:#c9f5d6;text-align:center;min-height:3.4em;display:grid;place-items:center}
.say::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);background:rgba(9,7,14,.86);box-shadow:-1px -1px 0 rgba(120,240,160,.28)}
.scout{width:calc(170px * var(--sz,1));filter:drop-shadow(0 18px 18px rgba(0,0,0,.6)) drop-shadow(0 0 calc(14px * var(--g)) rgba(120,220,255,calc(.18 * var(--g))));animation:hover 3.4s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.scout.hop{animation:hop .55s cubic-bezier(.3,1.6,.5,1),hover 3.4s ease-in-out .55s infinite}
@keyframes hop{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-20px) scale(1.03,.97)}100%{transform:translateY(0)}}

/* ---------- the control deck ---------- */
.deck{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:30px;margin:22px 26px 0;padding:18px 26px 16px;border-radius:14px 14px 18px 18px;
  background:linear-gradient(to bottom,#3a333f 0,#26212b 9%,#1a161e 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -3px 0 rgba(0,0,0,.5),0 16px 30px rgba(0,0,0,.5)}
.deck::before{content:"";position:absolute;left:12px;right:12px;top:8px;height:5px;border-radius:3px;background:repeating-linear-gradient(-45deg,#f6b000 0 10px,#151017 10px 20px);opacity:.55}
.dk-grp{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.pbtn{position:relative;display:block;width:calc(var(--pw,96px) * var(--sz,1));-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:20%;transition:transform .07s}
.pbtn.big{--pw:128px}
.pb-pic{position:relative;display:block;width:100%;aspect-ratio:var(--par,1/1)}
.pb-pic .ga{position:absolute;left:0;top:0;width:100%;transition:opacity .18s,filter .2s}
.pbtn .pb-off{filter:drop-shadow(0 7px 7px rgba(0,0,0,.6))}
.pbtn .pb-on{opacity:0;filter:drop-shadow(0 7px 7px rgba(0,0,0,.6)) drop-shadow(0 0 calc(18px * var(--g)) rgba(255,140,50,calc(.7 * var(--g))))}
.pbtn:hover .pb-on{opacity:.5}
.pbtn.lit .pb-on{opacity:1}
.pbtn.down{transform:translateY(3px) scale(.965)}
.pbtn.down .pb-off,.pbtn.down .pb-on{filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.pbtn.surge .pb-pic{animation:surge .5s ease-out}
@keyframes surge{0%{filter:brightness(1.7) saturate(1.2)}100%{filter:none}}
.pbtn.still .pb-on{display:none}
.pbtn.still .pb-off{filter:drop-shadow(0 7px 7px rgba(0,0,0,.6)) grayscale(.9) brightness(.5)}
.pbtn.still.lit .pb-off{filter:drop-shadow(0 7px 7px rgba(0,0,0,.6)) drop-shadow(0 0 calc(14px * var(--g)) rgba(255,140,50,calc(.6 * var(--g))))}
.pbtn.lit.big{animation:readyGlow 1.6s ease-in-out infinite}
@keyframes readyGlow{0%,100%{filter:none}50%{filter:brightness(1.15)}}
.pbtn .burst{top:30%}
.act-grp{flex-direction:row;align-items:flex-end;gap:22px}
.act{display:flex;flex-direction:column;align-items:center;gap:8px}
.sel-grp{align-items:stretch;min-width:230px}
.sel-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lcd-mini{display:grid;place-items:center;min-width:86px;height:30px;padding:0 10px;border-radius:4px;background:var(--lcd);box-shadow:inset 0 0 0 2px #050805,inset 0 2px 8px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.lcd-mini .pxt{filter:drop-shadow(0 0 calc(4px * var(--g)) rgba(120,240,160,.8))}
.sel-row{display:flex;align-items:center;gap:10px}
.slider{position:relative;width:100%;max-width:290px}
.slider .trk{width:100%}
.slider .knob{position:absolute;pointer-events:none;transition:left .12s;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.slider.s-plain .knob{top:22.4%;width:32.4%}
.slider.s-fader .knob{top:23%;width:30%}
.slider .rng{position:absolute;width:var(--tw);left:var(--tx);top:0;height:100%;margin:0;padding:0;opacity:0;-webkit-appearance:none;appearance:none;background:none}
.slider:focus-within{outline:2px solid var(--cyan);outline-offset:4px;border-radius:10px}
#fader{flex:1;max-width:none;width:calc(100% * var(--sz,1))}
.port{width:calc(168px * var(--sz,1));filter:drop-shadow(0 10px 12px rgba(0,0,0,.6))}
.port.seat{animation:seat .42s cubic-bezier(.3,1.4,.5,1)}
@keyframes seat{0%{transform:none}30%{transform:translateY(5px) scaleY(.97)}100%{transform:none}}

/* ---------- the shelf ---------- */
.shelf-wrap{margin:18px 26px 22px}
.shelf-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.now{font:700 12px/1.3 var(--f-mono);letter-spacing:.08em;color:var(--ink-3)}
.shelf{position:relative;overflow:hidden;padding:26px 0 18px;border-radius:10px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:12px;border-radius:3px;background:linear-gradient(#4b4354,#1d1825);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 8px 14px rgba(0,0,0,.5)}
.shelf:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.track{position:relative;z-index:1;display:flex;align-items:flex-end;gap:16px;width:max-content;padding:0 calc(50% - 74px);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sc{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:148px;transition:transform .3s cubic-bezier(.3,1.4,.5,1);-webkit-tap-highlight-color:transparent}
.sc .slot{width:100%;filter:drop-shadow(0 10px 10px rgba(0,0,0,.6))}
.sc-n{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 10.5px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sc:hover{transform:translateY(-6px)}
.sc.on{transform:translateY(-16px)}
.sc.on .slot{filter:drop-shadow(0 16px 14px rgba(0,0,0,.6)) drop-shadow(0 0 calc(16px * var(--g)) rgba(255,184,77,calc(.5 * var(--g))))}
.sc.on .sc-n{color:var(--amber)}
.sc.loaded::after{content:"In";position:absolute;right:6px;top:-6px;padding:3px 6px;border-radius:4px;background:#0b1a10;box-shadow:0 0 0 1px rgba(120,240,160,.5),0 0 calc(10px * var(--g)) rgba(120,240,160,calc(.6 * var(--g)));font:700 9px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--phos)}
.flyer .skin{filter:drop-shadow(0 18px 18px rgba(0,0,0,.6))}

/* ---------- separators (Night Shift) ---------- */
.sep{position:relative;margin:56px 0}
.sep.has-lane{margin-top:8px}
.rail{position:relative;height:calc(40px * var(--rsz,1));background:#0d1a10}
.rail .mid{position:absolute;top:0;bottom:0;left:var(--lw,0px);right:var(--rw,0px);background-repeat:repeat-x;background-size:auto 100%;background-position:0 0}
.rail .cap{position:absolute;top:0;height:100%;background-size:100% 100%;background-repeat:no-repeat}
.rail .cap.l{left:0;width:var(--lw,0px)}
.rail .cap.r{right:0;width:var(--rw,0px)}
.rail .orn{position:absolute;top:0;height:100%;background-size:100% 100%;background-repeat:no-repeat}
.rail.no-bg{background:none}
.rail.shadow{box-shadow:0 0 0 1px rgba(0,0,0,.45),0 10px 24px rgba(0,0,0,.4)}
.leds{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at 50% 50%,rgba(255,240,200,.95) 0,rgba(255,190,90,.75) 4px,rgba(255,140,50,.28) 10px,rgba(255,122,50,0) 17px) calc(-13.1px * var(--rsz,1)) 0/calc(146.75px * var(--rsz,1)) 100% repeat-x;display:none}
.rail.has-leds .leds{display:block}
.leds.base{opacity:calc(.3 * var(--g));animation:ledBreath 2.6s ease-in-out infinite}
.leds.chase{opacity:calc(.3 + .7 * var(--g));-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%,#000 55%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 45%,#000 55%,transparent 100%);-webkit-mask-size:520px 100%;mask-size:520px 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:ledChase 3.4s linear infinite}
@keyframes ledChase{from{-webkit-mask-position:-520px 0;mask-position:-520px 0}to{-webkit-mask-position:calc(100% + 520px) 0;mask-position:calc(100% + 520px) 0}}
@keyframes ledBreath{0%,100%{opacity:calc(.12 * var(--g))}50%{opacity:calc(.5 * var(--g))}}
.lane{position:relative;z-index:2;height:calc(130px * var(--sz,1));margin-bottom:calc(-14px * var(--rsz,1));overflow:hidden}
.mn{position:absolute;left:0;bottom:0;display:block;background-repeat:no-repeat;will-change:transform}

/* ---------- the cartridge wall ---------- */
.wall{position:relative;isolation:isolate;padding:56px 0 64px;background:#0c0b12}
.wall::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:inset 0 40px 50px -14px var(--bg),inset 0 -40px 50px -14px var(--bg)}
.tools{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;margin-top:30px}
.lcd-field{position:relative;flex:1 1 320px;display:flex;align-items:center;gap:10px;min-height:54px;padding:0 16px;border-radius:10px;background:var(--lcd);box-shadow:inset 0 0 0 2px #050805,inset 0 3px 10px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1),0 0 calc(18px * var(--g)) rgba(120,240,160,calc(.08 * var(--g)))}
.lcd-field:focus-within{box-shadow:inset 0 0 0 2px #050805,inset 0 3px 10px rgba(0,0,0,.85),0 0 0 2px var(--cyan)}
.lcd-field svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--phos);stroke-width:2;stroke-linecap:round;opacity:.8}
.lcd-field input{flex:1;min-width:0;height:52px;border:0;background:none;color:#b6f5c8;font:700 16px/1 var(--f-mono);letter-spacing:.06em;text-shadow:0 0 calc(6px * var(--g)) rgba(120,240,160,.6)}
.lcd-field input::placeholder{color:rgba(150,220,170,.5)}
.lcd-field input:focus{outline:none}
.sort{display:flex;align-items:center;gap:12px;padding:0 6px 0 14px;border-radius:10px;background:rgba(18,13,27,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sort select{height:50px;padding:0 10px;border:0;border-radius:8px;background:#0a0710;color:var(--ink);font:700 15px var(--f-body)}
.sort select:focus-visible{outline:2px solid var(--cyan)}
.cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cat{display:flex;align-items:center;gap:8px;min-height:48px;padding:5px 12px 5px 6px;border-radius:12px;background:rgba(18,13,27,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:background .15s,box-shadow .15s,transform .15s}
.cat:hover{background:rgba(32,22,44,.9);transform:translateY(-1px)}
.cat .ci{width:calc(36px * var(--csz,1));filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.cat .cn{font:800 15px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase}
.cat .cc{min-width:24px;padding:4px 6px;border-radius:5px;background:#0a0710;font:700 11px/1 var(--f-mono);color:var(--amber);text-align:center;font-variant-numeric:tabular-nums}
.cat.on{background:#2a1a12;box-shadow:inset 0 0 0 2px var(--amber),0 0 calc(16px * var(--g)) rgba(255,150,60,calc(.35 * var(--g)))}
.grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:26px 24px;margin-top:28px}
/* a wall screen: a 16:9 picture in a slim gunmetal bezel (four screws, an LED that lights on hover), the name on the
   owner's label tape over the bottom-left corner and the kind beside it, so the picture keeps nearly all the room */
.card{position:relative;display:block;min-width:0;padding:7px;border-radius:14px;color:inherit;text-align:left;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 10px 10px,#9a93a3 0 1.6px,#2b2631 2.4px,transparent 3px),radial-gradient(circle at calc(100% - 10px) 10px,#9a93a3 0 1.6px,#2b2631 2.4px,transparent 3px),
    radial-gradient(circle at 10px calc(100% - 10px),#9a93a3 0 1.6px,#2b2631 2.4px,transparent 3px),radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#9a93a3 0 1.6px,#2b2631 2.4px,transparent 3px),
    linear-gradient(155deg,#4b4453,#2a2530 38%,#17131c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.6),inset -6px 0 14px -10px rgba(147,219,230,.5),0 14px 26px rgba(0,0,0,.5);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.card:hover,.card:focus-visible{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 0 rgba(0,0,0,.6),inset -6px 0 14px -10px rgba(147,219,230,.6),0 20px 34px rgba(0,0,0,.55),0 0 calc(26px * var(--g)) rgba(255,140,50,calc(.28 * var(--g)))}
.card:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.cpic{position:relative;display:block;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:#020203;box-shadow:0 0 0 2px #060509}
.cpic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.cpic .p2{opacity:0}
.card.has2:hover .p2,.card.has2:focus-visible .p2{opacity:1}
.card:hover .cpic img,.card:focus-visible .cpic img{transform:scale(1.035)}
.cglass{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.1),rgba(255,255,255,0) 30%),repeating-linear-gradient(to bottom,rgba(0,0,0,.12) 0 1px,rgba(0,0,0,0) 1px 3px);box-shadow:inset 0 0 34px rgba(0,0,0,.55)}
.card .led{position:absolute;right:22px;top:2px;width:7px;height:3px;border-radius:2px;background:#3b1c0c;box-shadow:0 0 0 1px rgba(0,0,0,.5);transition:background .2s,box-shadow .2s}
.card:hover .led,.card:focus-visible .led{background:#ffb84d;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 calc(10px * var(--g)) rgba(255,170,60,calc(.9 * var(--g)))}
.cstrip{position:absolute;left:7px;right:7px;bottom:7px;display:flex;align-items:flex-end;padding:30px 12px 9px 0;border-radius:0 0 7px 7px;pointer-events:none;background:linear-gradient(to top,rgba(5,4,9,.85),rgba(5,4,9,.4) 50%,rgba(5,4,9,0))}
.cstrip .tape{position:relative;display:inline-grid;place-items:center;min-width:0;max-width:calc(100% + 2px);margin:0 0 -3px -14px;padding:calc(7px * var(--sz,1)) calc(18px * var(--sz,1)) calc(8px * var(--sz,1));transform:rotate(-1.6deg)}
.card:nth-child(even) .cstrip .tape{transform:rotate(1.1deg)}
.cstrip .tape .ga{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;filter:drop-shadow(0 4px 4px rgba(0,0,0,.55))}
.cstrip .tape b{position:relative;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 calc(17px * var(--sz,1))/1.05 var(--f-display);letter-spacing:.05em;text-transform:uppercase;color:var(--tink,#2a1b0c)}
/* the kind rides in the picture's top-right corner, like a channel tag, so the name has the whole bottom edge */
.card .kind{position:absolute;right:15px;top:15px;max-width:calc(100% - 30px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 8px;border-radius:5px;background:rgba(5,4,9,.78);box-shadow:0 0 0 1px rgba(255,184,77,.25);font:700 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);pointer-events:none}
.grid.gi1 .card{animation:insA .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 26ms)}
.grid.gi2 .card{animation:insB .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 26ms)}
@keyframes insA{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes insB{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
.empty{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;margin-top:36px;padding:18px 22px;border-radius:16px;background:rgba(18,13,27,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.empty .ga{width:90px}
.empty p{color:var(--ink-2)}
.reset-btn{--k:2;padding:6px 18px 8px;font:800 15px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:#0d0a08}
.more-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:46px;flex-wrap:wrap;min-height:102px}
.count{font:700 13px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- the coin door ---------- */
.door-sec{position:relative;padding:4px 0 88px}
.door-row{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr) 190px;gap:30px;align-items:start;margin-top:40px}
.door{position:relative;isolation:isolate;padding:40px 30px 30px;border-radius:20px;background:#18151e;box-shadow:0 26px 40px rgba(0,0,0,.6)}
.door>.bgl{border-radius:inherit}
/* the door's bevel sits above its background layer (an inset shadow on .door itself would be covered by it) */
.door::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -3px 0 rgba(0,0,0,.5),inset 0 0 0 2px rgba(0,0,0,.4)}
.door::before{content:"";position:absolute;inset:12px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 8px rgba(0,0,0,.6);pointer-events:none}
.rv{position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e8e2ee,#8c8596 45%,#3d3846 80%);box-shadow:0 1px 1px rgba(0,0,0,.6)}
.rv.r1{left:18px;top:18px}.rv.r2{right:18px;top:18px}.rv.r3{left:18px;bottom:18px}.rv.r4{right:18px;bottom:18px}
.door-top{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.seven{position:relative;width:calc(260px * var(--sz,1));max-width:100%;filter:drop-shadow(0 12px 16px rgba(0,0,0,.6))}
.seven .ga{width:100%}
.seg-txt{position:absolute;left:11.6%;top:22%;width:74.4%;height:56%;display:grid;grid-template-columns:repeat(4,1fr)}
.seg-txt i{display:grid;place-items:center;font:700 calc(40px * var(--sz,1))/1 var(--f-mono);font-style:normal;color:#ff4a36;text-shadow:0 0 calc(6px * var(--g)) #ff2a1a,0 0 calc(18px * var(--g)) rgba(255,40,20,calc(.75 * var(--g)));transform:skewX(-8deg)}
.seven:not(.red) .seg-txt i{color:#8dffb0;text-shadow:0 0 calc(8px * var(--g)) rgba(120,240,160,.8)}
.dlcd{position:relative;display:block;width:calc(190px * var(--sz,1))}
.dlcd .scr{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);display:flex;align-items:center;justify-content:center;border-radius:2px;transition:background .3s,box-shadow .3s}
.dlcd .pxt{opacity:.6;transition:opacity .3s}
.dlcd.lit .pxt{opacity:1}
.dlcd.lit .scr{background:rgba(214,255,160,.18);box-shadow:0 0 calc(14px * var(--g)) rgba(170,255,120,calc(.6 * var(--g)))}
.slots{display:flex;align-items:center;gap:22px;margin-top:22px}
.cslot-col{position:relative;flex:none;width:86px;height:118px;border-radius:12px;background:linear-gradient(160deg,#5e5966,#2a2630 55%,#3a3644);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),inset 0 -3px 0 rgba(0,0,0,.5),0 8px 14px rgba(0,0,0,.5)}
.dtoken{position:absolute;left:50%;top:10px;width:calc(54px * var(--sz,1));transform:translateX(-50%);z-index:2}
.dtoken .ga{width:100%;filter:drop-shadow(0 4px 4px rgba(0,0,0,.6))}
.dtoken.d1 .ga{animation:dropA .9s cubic-bezier(.5,0,.9,.5) both}
.dtoken.d2 .ga{animation:dropB .9s cubic-bezier(.5,0,.9,.5) both}
@keyframes dropA{0%{transform:translateY(0) rotateY(0deg);opacity:1}55%{transform:translateY(42px) rotateY(80deg);opacity:1}70%{transform:translateY(52px) rotateY(88deg) scaleY(.6);opacity:0}86%{transform:translateY(-10px);opacity:0}100%{transform:none;opacity:1}}
@keyframes dropB{0%{transform:translateY(0) rotateY(0deg);opacity:1}55%{transform:translateY(42px) rotateY(80deg);opacity:1}70%{transform:translateY(52px) rotateY(88deg) scaleY(.6);opacity:0}86%{transform:translateY(-10px);opacity:0}100%{transform:none;opacity:1}}
.cslot{position:absolute;left:50%;top:76px;width:44px;height:12px;margin-left:-22px;border-radius:6px;background:#120a04;box-shadow:0 0 0 3px #25212c,0 0 0 4px rgba(255,255,255,.12),0 0 calc(16px * var(--g)) rgba(255,160,60,calc(.75 * var(--g))),inset 0 0 8px rgba(255,170,60,.95);z-index:3}
.cslot b{position:absolute;left:50%;top:18px;transform:translateX(-50%);font:700 10px/1 var(--f-mono);color:#ffcf8a;letter-spacing:.06em}
.cslot.lit,.cslot.lit2{animation:slotLit .9s ease-out}
@keyframes slotLit{0%,50%{filter:none}65%{filter:brightness(1.8)}100%{filter:none}}
.amts-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.amts{display:flex;gap:10px;flex-wrap:wrap}
.amt{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font:900 18px/1 var(--f-display);color:#3a2206;background:radial-gradient(circle at 35% 30%,#ffeeb4,#e3ad42 45%,#ab731f 76%,#7a4e10);box-shadow:inset 0 0 0 3px rgba(122,78,16,.9),inset 0 0 0 5px rgba(255,226,150,.55),0 6px 10px rgba(0,0,0,.45);transition:transform .2s,box-shadow .25s}
.amt:hover{transform:translateY(-3px) rotate(-6deg)}
.amt:active{transform:translateY(1px) scale(.96)}
.amt.on{box-shadow:inset 0 0 0 3px rgba(122,78,16,.9),inset 0 0 0 5px rgba(255,226,150,.75),0 0 calc(16px * var(--g)) rgba(255,190,80,calc(.85 * var(--g))),0 6px 10px rgba(0,0,0,.45)}
.door-note{margin-top:20px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.door-tape{position:absolute;right:-12px;top:-16px;width:calc(118px * var(--sz,1));transform:rotate(7deg);filter:drop-shadow(0 4px 5px rgba(0,0,0,.5))}
.tiers{display:grid;gap:14px;min-width:0}
.tier{display:grid;grid-template-columns:calc(158px * var(--msz,1)) minmax(0,1fr) auto;gap:20px;align-items:center;padding:14px 18px;border-radius:16px;background:rgba(18,13,27,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:box-shadow .25s,background .25s}
.tier:hover,.tier:focus-within{background:rgba(26,18,38,.9);box-shadow:inset 0 0 0 1px rgba(255,184,77,.36),0 0 calc(22px * var(--g)) rgba(255,122,50,calc(.16 * var(--g)))}
.mcard{position:relative;display:block;width:100%;transform:translateY(var(--ty,0px)) rotate(-3deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.mcard.up{--ty:-6px;transform:translateY(-6px) rotate(0deg)}
.mcard .mface{position:relative;width:100%;filter:drop-shadow(0 14px 16px rgba(0,0,0,.55))}
.glare{position:absolute;inset:0;border-radius:10px;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.35) 48%,rgba(255,255,255,0) 62%);mix-blend-mode:overlay;opacity:0;transition:opacity .3s;pointer-events:none}
.mcard.up .glare{opacity:1}
.ct{position:absolute;inset:0;padding:8% 9%;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;pointer-events:none}
.ct .tname{display:block;font:900 15px/1 var(--f-display);text-transform:uppercase;letter-spacing:.03em}
.ct .tprice{display:block;font:700 8.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.mcard.tone-light .ct{color:#22170c;text-shadow:0 1px 0 rgba(255,236,210,.55)}
.mcard.tone-dark .ct{color:#f3cf74;text-shadow:0 1px 0 rgba(0,0,0,.85)}
.shim{position:absolute;inset:0;overflow:hidden;border-radius:10px;pointer-events:none}
.shim::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:55%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 38%,rgba(255,140,230,.45) 48%,rgba(120,230,255,.45) 58%,rgba(255,255,255,0) 100%);mix-blend-mode:overlay;transform:skewX(-12deg);opacity:0}
.tier:hover .shim::before{opacity:1;animation:shim 1.5s ease-in-out infinite}
@keyframes shim{from{transform:translateX(0) skewX(-12deg)}to{transform:translateX(330%) skewX(-12deg)}}
.tinfo{min-width:0}
.tier h3{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font:900 26px/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.price{font:700 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.perks{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px;font-size:14px;color:var(--ink-2);line-height:1.35}
.perks li{position:relative;padding-left:15px}
.perks li::before{content:"";position:absolute;left:1px;top:.45em;width:6px;height:6px;border-radius:1px;transform:rotate(45deg);background:var(--cyan);box-shadow:0 0 calc(8px * var(--g)) rgba(147,219,230,calc(.7 * var(--g)))}
.tier-note{min-height:1.4em;font:700 12.5px/1.4 var(--f-mono);letter-spacing:.04em;color:var(--amber)}
.bouncer{display:flex;justify-content:center;align-self:end}
.visor{width:calc(190px * var(--sz,1));filter:drop-shadow(0 20px 20px rgba(0,0,0,.6))}
.visor.nod{animation:nod .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes nod{0%{transform:none}35%{transform:translateY(6px) rotate(-2deg)}100%{transform:none}}

.scores{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.4fr);gap:32px;align-items:center;margin-top:64px;padding:24px 28px;border-radius:20px;background:rgba(18,13,27,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.board{position:relative;width:calc(210px * var(--sz,1));filter:drop-shadow(0 14px 20px rgba(0,0,0,.6))}
.board .ga{width:100%}
.scores-t h3{font:900 28px/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.scores-t p{margin-top:8px;color:var(--ink-2);max-width:42ch}
.prizes .silk{margin-bottom:12px}
.items{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.item .pic{height:calc(64px * var(--esz,1));display:grid;place-items:end center}
.item .ga{width:calc(58px * var(--esz,1));filter:grayscale(.55) brightness(.75) drop-shadow(0 8px 8px rgba(0,0,0,.5));transition:transform .3s cubic-bezier(.3,1.5,.5,1),filter .3s}
.item:hover .ga{transform:translateY(-5px) rotate(-4deg);filter:drop-shadow(0 0 calc(12px * var(--g)) rgba(255,184,77,calc(.55 * var(--g)))) drop-shadow(0 10px 10px rgba(0,0,0,.5))}
.item b{display:block;font:800 12px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.04em;color:#e9e0d6}

/* ---------- the game label dialog ---------- */
.dlg-back{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));background:rgba(4,3,7,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:panIn .2s ease-out both}
.dlg{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;width:min(1120px,100%);max-height:calc(100vh - 48px);overflow:auto;padding:30px;border-radius:22px;background:linear-gradient(to bottom,#1b1522,#100c15);border:5px solid;border-color:var(--trim-hi) var(--trim-lo) var(--trim-lo) var(--trim);box-shadow:0 40px 90px rgba(0,0,0,.75)}
.dlg-x{position:absolute;right:16px;top:14px;margin:0;z-index:3}
.dlg-scr{min-width:0;display:flex;flex-direction:column;gap:14px}
.tube.mini{width:100%}
.thumbs{display:flex;gap:10px}
.th{width:120px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.12);transition:box-shadow .15s}
.th img{width:100%;aspect-ratio:16/9;object-fit:cover}
.th.on{box-shadow:0 0 0 2px var(--amber),0 0 calc(12px * var(--g)) rgba(255,184,77,calc(.5 * var(--g)))}
.dlg-info{min-width:0;display:flex;flex-direction:column;gap:12px;padding-right:20px}
.dlg-kind{display:flex;gap:14px;flex-wrap:wrap}
.dlg-kind span{display:flex;align-items:center;gap:6px;font:700 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.dlg-kind .ga{width:28px}
.dlg h2{font:900 clamp(34px,4vw,54px)/.95 var(--f-display);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.dlg-hook{font:700 18px/1.4 var(--f-body);color:var(--bone)}
.dlg-sum{font-size:15px;color:var(--ink-2);max-width:62ch}
.dlg-info .silk{margin-top:4px}
.dlg-ctl{display:grid;gap:6px;font-size:14px;color:var(--ink-2)}
.dlg-ctl li{position:relative;padding-left:16px}
.dlg-ctl li::before{content:"";position:absolute;left:1px;top:.5em;width:6px;height:6px;background:var(--phos);box-shadow:0 0 calc(6px * var(--g)) rgba(120,240,160,.7)}
.dlg-keys{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.dlg-note{font-size:12.5px;color:var(--ink-3)}

/* ---------- settings and sign-in panels (Night Shift) ---------- */
.panel{position:absolute;right:0;top:calc(100% + 10px);width:340px;max-width:calc(100vw - 32px);padding:16px 18px 18px;border-radius:16px;background:var(--panel);box-shadow:0 0 0 1px rgba(255,255,255,.09),0 24px 60px rgba(0,0,0,.6);z-index:20;animation:panIn .18s ease-out both}
@keyframes panIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.panel-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.panel-h span{font:700 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.x{width:44px;height:44px;margin:-10px -12px -10px 0;display:grid;place-items:center;border-radius:10px;color:var(--ink-3)}
.x:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.x svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.set-group{padding:12px 0 2px;border-top:1px solid rgba(255,255,255,.08)}
.set-group>h4{margin:0 0 4px;font:700 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.set-row{display:grid;gap:8px;padding:8px 0}
.set-l{font:700 14px/1.2 var(--f-body);color:var(--ink)}
.set-v{font:700 11px/1 var(--f-mono);letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.set-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.set-note{font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.chk{display:flex;align-items:center;gap:12px;min-height:48px}
.chk .cb{position:relative;display:block;width:54px;flex:none;aspect-ratio:348/276}
.chk .cb .ga{position:absolute;left:0;top:0;width:100%}
.chk .c-on{opacity:0}
.sr:checked+.chk .c-on{opacity:1}
.sr:checked+.chk .c-off{opacity:0}
.sr:focus-visible+.chk .cb{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
.chk .t{display:grid;gap:2px;font:700 14px/1.2 var(--f-body)}
.chk .t small{font:500 12.5px/1.35 var(--f-body);color:var(--ink-3)}
.swch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;width:100%}
.swch .sw{position:relative;display:block;width:78px;flex:none;aspect-ratio:400/201}
.swch .sw .ga{position:absolute;left:0;top:0;width:100%;transition:opacity .12s}
.swch .s-on{opacity:0}
.swch[aria-checked=true] .s-on{opacity:1}
.swch[aria-checked=true] .s-off{opacity:0}
.seg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.seg3 button{min-height:44px;border-radius:10px;font:800 15px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:#0a0710;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);text-align:center;transition:color .15s,box-shadow .15s,background .15s}
.seg3 button:hover{color:var(--ink)}
.seg3 button[aria-pressed=true]{color:#2a1205;background:linear-gradient(#ffc56b,#ff8a3a);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 0 calc(14px * var(--g)) rgba(255,122,50,calc(.5 * var(--g)))}
.fld{display:grid;gap:6px;margin:0 0 12px}
.fld span{font:700 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.fld input{height:44px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#0a0710;color:var(--ink);font:600 15px var(--f-body)}
.fld input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,184,77,.22)}
.panel-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.panel-f a{font-size:13px;font-weight:800;text-decoration:none;border-bottom:1px solid rgba(255,184,77,.5)}
.note{margin-top:10px;font:700 12px/1.4 var(--f-mono);color:var(--amber);min-height:1.4em}

/* ---------- footer: the strip on top, the backdrop fading in (Night Shift) ---------- */
.foot{position:relative;isolation:isolate}
.foot-body{position:relative;isolation:isolate;overflow:hidden;min-height:360px;padding:60px 0 44px}
.foot-art{position:absolute;inset:0;z-index:-1;overflow:hidden}
.foot-art>.bgi{background-position:center 70%}
.foot-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#07060b 0%,rgba(7,6,11,.86) 32%,rgba(7,6,11,.4) 100%)}
.foot-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start;max-width:980px}
.foot-logo{display:block;width:calc(230px * var(--sz,1))}
.foot-logo img{width:100%;height:auto}
.foot-tag{margin-top:14px;color:#cfc5d9;max-width:36ch}
.foot-links{display:grid;grid-template-columns:repeat(2,max-content);gap:4px 40px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font:800 16px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#f1e9df}
.foot-links a:hover{color:var(--amber)}
.foot-base{position:relative;z-index:2;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:980px;margin-top:56px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;color:#aaa1b6}

/* ---------- CRT scanlines over the whole page (Settings) ---------- */
.crt{position:fixed;inset:0;z-index:40;pointer-events:none;display:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.16) 0,rgba(0,0,0,.16) 1px,rgba(0,0,0,0) 1px,rgba(0,0,0,0) 3px);box-shadow:inset 0 0 160px rgba(0,0,0,.55)}
.ns.crt-on .crt{display:block}

/* ---------- graphics quality (Settings): medium drops the glass blur and the bulb chase; low also every glow,
   the moving static (minions.js and the tube engine check the class too) and the drop shadows ---------- */
.ns.q-medium .mq-bulbs i{animation:none;opacity:.7}
.ns.q-medium .mq-art{animation:none}
.ns.q-medium .ctrl{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(9,7,14,.9)}
.ns.q-medium .dlg-back{-webkit-backdrop-filter:none;backdrop-filter:none}
.ns.q-low .mq-bulbs,.ns.q-low .leds.chase,.ns.q-low .key::after{display:none}
.ns.q-low .mq-art{animation:none}
.ns.q-low .ctrl{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(9,7,14,.94)}
.ns.q-low .dlg-back{-webkit-backdrop-filter:none;backdrop-filter:none}
.ns.q-low .tube .skin,.ns.q-low .sc .slot,.ns.q-low .scout,.ns.q-low .visor,.ns.q-low .osd .pxt,.ns.q-low .tape .ga,.ns.q-low .item .ga,.ns.q-low .mcard .mface{filter:none}
.ns.q-low .scout{animation:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .door-row{grid-template-columns:minmax(280px,340px) minmax(0,1fr)}
  .bouncer{display:none}
  .tier{grid-template-columns:calc(130px * var(--msz,1)) minmax(0,1fr)}
  .tier .key{grid-column:2;justify-self:start}
  .scores{grid-template-columns:auto minmax(0,1fr)}
  .prizes{grid-column:1/-1}
  .deck{gap:20px;padding-left:18px;padding-right:18px}
}
@media (max-width:960px){
  .bay-row{grid-template-columns:minmax(0,1fr);gap:14px}
  .attendant{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;max-width:640px;margin:0 auto}
  .cam{width:calc(104px * var(--sz,1))}
  .say{max-width:none;text-align:left}
  .say::before{left:-6px;top:50%;margin:-6px 0 0 0}
  .scout{width:calc(92px * var(--sz,1))}
  .deck{grid-template-columns:auto minmax(0,1fr);row-gap:22px}
  .port-grp{order:3}
  .act-grp{order:4;justify-self:end}
  .grid{grid-template-columns:repeat(min(var(--cols,3),2),minmax(0,1fr));gap:20px 18px}
  .door-row{grid-template-columns:minmax(0,1fr)}
  .door{max-width:520px;width:100%;margin:0 auto}
  .dlg{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px 20px}
  .dlg-info{padding-right:0}
  .items{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:16px}
}
@media (max-width:640px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .topbar{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));flex-wrap:wrap}
  .coinop{width:100%;font-size:10.5px;order:2}
  .ctrl{gap:0;padding:4px 6px}
  .navl{padding:0 6px;font-size:13px;gap:6px}
  .navl .mini-card,.navl .mini-coin{width:30px}
  .keyt .ktxt{display:none}
  .cab-body{width:calc(100% - 32px);border-width:5px;border-radius:22px 22px 10px 10px}
  .marquee{margin:10px 10px 0;height:116px}
  .mq-bulbs i{width:7px;height:7px;margin:-3.5px 0 0 -3.5px}
  .bay-row{padding:14px 10px 0}
  .attendant{grid-template-columns:auto minmax(0,1fr);gap:10px}
  .scout{display:none}
  .cam{width:calc(84px * var(--sz,1))}
  .say{font-size:11.5px;padding:8px 10px}
  .deck{grid-template-columns:minmax(0,1fr);justify-items:center;margin:14px 10px 0;padding:18px 14px 14px;gap:18px}
  .sel-grp{width:100%}
  .act-grp{justify-self:center}
  .power-grp{flex-direction:row;gap:12px}
  .deck .btn{--bscale:.8}
  /* three keys share the action row at phone width: a little smaller, the printed labels on one line */
  .act-grp{gap:12px;align-items:flex-end}
  .act-grp .btn{--bscale:.68}
  .act .silk{white-space:nowrap;letter-spacing:.08em;font-size:10px}
  .shelf-wrap{margin:14px 10px 16px}
  .sc{width:112px}
  .track{padding:0 calc(50% - 56px)}
  .grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .tools{flex-direction:column}
  .lcd-field{flex-basis:auto}
  .sort{justify-content:space-between}
  .empty{grid-template-columns:auto minmax(0,1fr)}
  .empty .reset-btn{grid-column:1/-1;justify-self:start}
  .door{padding:34px 18px 24px}
  .slots{gap:16px}
  .amt{width:50px;height:50px;font-size:16px}
  .tier{grid-template-columns:minmax(0,1fr);justify-items:start;padding:16px}
  .tier .mcard{width:calc(180px * var(--msz,1))}
  .tier .key{grid-column:auto}
  .scores{grid-template-columns:minmax(0,1fr);padding:20px 16px}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot-links{gap:0 24px}
  .dlg-back{padding:10px max(10px,env(safe-area-inset-right,0px)) 10px max(10px,env(safe-area-inset-left,0px))}
  .dlg{max-height:calc(100vh - 20px);padding:20px 16px;border-width:4px}
  .th{width:96px}
}

/* ---------- reduced animations: the page setting and the system setting ---------- */
.ns.rm *,.ns.rm *::before,.ns.rm *::after{animation:none!important;transition-duration:.01ms!important}
.ns.rm .mq-bulbs i{opacity:.75}
.ns.rm .leds.base{opacity:calc(.35 * var(--g))}
.ns.rm .pbar .m b{width:100%}

/* ---------- the 3D changer (changer3d.js) takes the shelf's place and carries its own port ---------- */
.changer{position:relative;width:100%;aspect-ratio:1180/330;max-height:360px;border-radius:12px;outline:none;
  background:radial-gradient(120% 90% at 30% 10%,rgba(255,140,60,.08),transparent 60%),linear-gradient(#120d18,#0a0710);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 18px 40px rgba(0,0,0,.55)}
.changer:focus-visible{box-shadow:inset 0 0 0 2px #93dbe6,0 0 0 3px rgba(147,219,230,.25)}
.changer canvas{display:block;width:100%!important;height:100%!important;border-radius:inherit;cursor:pointer}
.changer-hint{margin:8px 2px 0;font:700 11px/1.3 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#8d8398}
.has-3d .shelf,.has-3d .port-grp{display:none}
@media (max-width:700px){.changer{aspect-ratio:auto;height:300px}}