/* G.L.A.M. SLAM! - the cabinet in the Quarter Castle arcade at night. */
@font-face{font-family:'Luckiest Guy fb';src:local('Arial'),local('ArialMT');unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2022-2027,U+2031,U+2035-203A,U+2044,U+20AC,U+2122,U+2212;size-adjust:86.3%;ascent-override:113.4%;descent-override:28.5%;line-gap-override:0%}
@font-face{font-family:'Luckiest Guy fb';src:local('Arial'),local('ArialMT');unicode-range:U+0061-007A;size-adjust:121.2%;ascent-override:80.8%;descent-override:20.3%;line-gap-override:0%}
@font-face{font-family:'Luckiest Guy fb';src:local('Arial'),local('ArialMT');unicode-range:U+0030-0039;size-adjust:99.2%;ascent-override:98.7%;descent-override:24.8%;line-gap-override:0%}
@font-face{font-family:'Luckiest Guy fb';src:local('Arial'),local('ArialMT');unicode-range:U+0020,U+00A0;size-adjust:70.3%;ascent-override:139.3%;descent-override:35%;line-gap-override:0%}
@font-face{font-family:'Bungee fb';src:local('Arial'),local('ArialMT');unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2022-2027,U+2031-2033,U+2035-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;size-adjust:121%;ascent-override:84.3%;descent-override:24.8%;line-gap-override:0%}
@font-face{font-family:'Bungee fb';src:local('Arial'),local('ArialMT');unicode-range:U+0041-005A;size-adjust:105.2%;ascent-override:97%;descent-override:28.5%;line-gap-override:0%}
@font-face{font-family:'Bungee fb';src:local('Arial'),local('ArialMT');unicode-range:U+0061-007A;size-adjust:149.2%;ascent-override:68.4%;descent-override:20.1%;line-gap-override:0%}
@font-face{font-family:'Bungee fb';src:local('Arial'),local('ArialMT');unicode-range:U+0020,U+00A0;size-adjust:81%;ascent-override:125.9%;descent-override:37%;line-gap-override:0%}
@font-face{font-family:'Archivo fb';src:local('Arial'),local('ArialMT');font-weight:400 500;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BC,U+02C6,U+02DA,U+02DC,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2022-2027,U+2031-2033,U+2035-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;size-adjust:101.3%;ascent-override:86.7%;descent-override:20.7%;line-gap-override:0%}
@font-face{font-family:'Archivo fb';src:local('Arial'),local('ArialMT');font-weight:400 500;unicode-range:U+0020,U+00A0;size-adjust:75.2%;ascent-override:116.8%;descent-override:27.9%;line-gap-override:0%}
@font-face{font-family:'Archivo fb';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 700;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BC,U+02C6,U+02DA,U+02DC,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2022-2027,U+2031-2033,U+2035-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;size-adjust:99.9%;ascent-override:87.9%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:'Archivo fb';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 700;unicode-range:U+0020,U+00A0;size-adjust:71.5%;ascent-override:122.8%;descent-override:29.4%;line-gap-override:0%}
@font-face{font-family:'Archivo fb';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:800 900;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BC,U+02C6,U+02DA,U+02DC,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2022-2027,U+2031-2033,U+2035-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;size-adjust:105.9%;ascent-override:82.9%;descent-override:19.8%;line-gap-override:0%}
@font-face{font-family:'Archivo fb';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:800 900;unicode-range:U+0020,U+00A0;size-adjust:68%;ascent-override:129.1%;descent-override:30.9%;line-gap-override:0%}

:root{
  --navy:#1A1F71;--deep:#12155A;--yellow:#FFD400;--pink:#FF2E93;--pink-dk:#D6006F;--cyan:#00C2E0;--red:#E4002B;
  --ink:#07060c;--paper:#f4f0e6;
  --lg:'Luckiest Guy','Luckiest Guy fb',Impact,sans-serif;
  --bg:'Bungee','Bungee fb',Impact,sans-serif;
  --ar:'Archivo','Archivo fb',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
body{
  margin:0;color:#fff;font-family:var(--ar);font-size:16px;line-height:1.5;
  overflow-x:hidden;overflow-x:clip;
  background-color:var(--ink);
  background-image:
    radial-gradient(ellipse 60% 40% at 0% 0%,rgba(255,46,147,.28),transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 8%,rgba(0,194,224,.24),transparent 70%),
    radial-gradient(circle at 20% 30%,#ff2e93 0 1.4px,transparent 2px),
    radial-gradient(circle at 70% 60%,#00c2e0 0 1.4px,transparent 2px),
    radial-gradient(circle at 45% 80%,#ffd400 0 1.2px,transparent 1.8px),
    radial-gradient(circle at 85% 15%,#39ff5a 0 1px,transparent 1.6px),
    radial-gradient(circle at 10% 70%,#ff2e93 0 1px,transparent 1.6px);
  background-size:100% 900px,100% 900px,97px 89px,131px 113px,71px 83px,151px 127px,59px 67px;
  background-repeat:no-repeat,no-repeat,repeat,repeat,repeat,repeat,repeat;
}
a{color:var(--cyan)}
a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.skip{position:absolute;left:8px;top:-60px;z-index:10;background:var(--yellow);color:var(--deep);padding:10px 14px;font-weight:700;border-radius:6px;text-decoration:none}
.skip:focus{top:8px}
.room{padding:12px 16px 0;max-width:820px;margin:0 auto}

/* ---------- the cabinet ---------- */
.cab{
  position:relative;max-width:780px;margin:0 auto;padding:10px;
  background:linear-gradient(180deg,#232a8a 0%,var(--navy) 30%,var(--deep) 100%);
  border-radius:20px 20px 10px 10px;
  box-shadow:0 0 0 3px #090b36,0 0 0 5px var(--pink),0 0 22px 4px rgba(255,46,147,.45),0 0 70px rgba(0,194,224,.22);
}
.cab:fullscreen{max-width:none;width:100%;height:100%;border-radius:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:8px max(8px,env(safe-area-inset-left))}
.cab:fullscreen .marquee{display:none}
.marquee{
  display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 16px;min-height:64px;
  border-radius:12px;
  background:radial-gradient(ellipse 80% 120% at 50% 40%,#fffbe0 0%,#ffe86a 30%,var(--yellow) 55%,#ff9a2a 100%);
  box-shadow:0 0 0 3px var(--deep),0 0 22px rgba(255,212,0,.7),inset 0 0 18px rgba(255,255,255,.75);
  color:var(--deep);
}
.holly{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.hpic{
  display:block;width:60px;height:72px;border:3px solid var(--deep);border-radius:4px;
  background:url(/portraits.png) -360px -216px/480px 360px no-repeat;
  image-rendering:pixelated;box-shadow:0 0 0 2px var(--pink)
}
.hcap{font-family:var(--bg);font-size:9px;letter-spacing:.06em;word-spacing:.3em;line-height:1;color:var(--deep);white-space:nowrap}
.mqtext{text-align:center;min-width:0}
.logo{
  margin:0;font-family:var(--lg);font-weight:400;line-height:.95;font-size:56px;letter-spacing:.02em;word-spacing:.3em;
  color:var(--pink);text-shadow:3px 3px 0 var(--deep),-1px -1px 0 #fff,0 0 14px rgba(255,255,255,.8);
}
.logo .l2{color:var(--red)}
.qca{margin:4px 0 0;font-family:var(--bg);font-size:12px;letter-spacing:.22em;word-spacing:.3em;color:var(--deep);text-transform:uppercase}

.bezel{
  margin-top:10px;padding:12px;border-radius:16px;display:flex;justify-content:center;
  background:radial-gradient(ellipse at 50% 0%,#1d1d2e,#08080f 70%);
  box-shadow:inset 0 0 0 2px #2a2f8a,inset 0 0 28px #000,0 2px 0 #3a40a0;
}
.js .cab:not(.fit) .bezel,.js .cab:not(.fit) .panel{visibility:hidden}
.crt{position:relative;line-height:0;border-radius:18px/14px;overflow:hidden;background:#000;
  box-shadow:0 0 0 2px #000,0 0 26px rgba(0,194,224,.35)}
.crt:focus-within{box-shadow:0 0 0 3px var(--yellow),0 0 26px rgba(0,194,224,.35)}
#screen{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:4/3;image-rendering:crisp-edges;image-rendering:pixelated;outline:none;touch-action:none}
.glass{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse 70% 50% at 35% 20%,rgba(255,255,255,.09),transparent 60%),
    radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.5) 100%);
  box-shadow:inset 0 0 36px rgba(0,0,0,.65),inset 0 0 6px rgba(130,220,255,.3)}
/* the marquee's neon, faintly caught in the glass */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:
    linear-gradient(180deg,rgba(255,230,120,.16),transparent 9%),
    linear-gradient(100deg,transparent 18%,rgba(255,46,147,.10) 22%,transparent 30%),
    radial-gradient(ellipse 40% 12% at 50% 0%,rgba(255,212,0,.22),transparent 70%),
    linear-gradient(0deg,rgba(0,194,224,.10),transparent 7%)}
@media (prefers-reduced-motion:no-preference){
  .glass{animation:flick 7s steps(1) infinite}
  @keyframes flick{0%,100%{opacity:1}43%{opacity:.86}44%{opacity:1}71%{opacity:.92}72%{opacity:1}}
  .glass::after{opacity:1;animation:neon 5.3s steps(1) infinite}
  @keyframes neon{0%,100%{opacity:1}31%{opacity:.55}32%{opacity:1}62%{opacity:.8}63%{opacity:1}}
}

/* ---------- the control panel ---------- */
.panel{
  margin-top:10px;padding:10px 14px 14px;border-radius:14px;
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"pad sys abc";align-items:center;gap:10px 16px;
  background:
    radial-gradient(circle at 50% 120%,rgba(255,46,147,.25),transparent 60%),
    linear-gradient(180deg,#2f36a0,var(--navy) 40%,#151a66);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 5px 0 #090b36;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.panel button{touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer;font:inherit;color:inherit}
.panel kbd{display:block;font-family:var(--ar);font-size:10px;font-weight:700;line-height:1;opacity:.7;margin-top:2px}
@media (hover:none){.panel kbd{display:none}}
.sys{grid-area:sys;display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;gap:8px}
.pb,.tg{min-height:44px;min-width:44px;border:0;border-radius:10px;padding:6px 12px;font-family:var(--bg);font-size:12px;line-height:1.1;letter-spacing:.04em;word-spacing:.3em;text-transform:uppercase}
.pb{color:var(--deep);background:linear-gradient(180deg,#fff27a,var(--yellow) 50%,#d9a800);box-shadow:0 4px 0 #8a6a00,0 0 10px rgba(255,212,0,.45)}
.pb.coin{position:relative;color:var(--yellow);background:linear-gradient(180deg,#2a2a36,#0c0c14);box-shadow:0 4px 0 #000,inset 0 0 0 2px #4a4a5a,0 0 12px rgba(255,212,0,.35);padding-left:26px;text-shadow:0 0 6px rgba(255,212,0,.8)}
.pb.coin .slot{position:absolute;left:11px;top:50%;width:5px;height:22px;margin-top:-11px;border-radius:3px;background:#000;box-shadow:0 0 0 2px var(--red),0 0 8px var(--red)}
.tg{color:#fff;background:#0e1150;box-shadow:inset 0 0 0 2px #3a40a0,0 3px 0 #05062a;display:inline-flex;align-items:center;gap:6px;flex-direction:row}
.tg kbd{margin:0 0 0 2px}
.tg .led{width:9px;height:9px;border-radius:50%;background:#30304a;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.tg[aria-pressed="true"] .led{background:var(--red);box-shadow:0 0 8px var(--red)}
.pb.on,.pb:active{transform:translateY(3px);box-shadow:0 1px 0 #8a6a00,0 0 18px rgba(255,212,0,.8)}
.pb.coin.on,.pb.coin:active{box-shadow:0 1px 0 #000,inset 0 0 0 2px var(--yellow),0 0 18px rgba(255,212,0,.8)}

.dpad{grid-area:pad;position:relative;width:138px;height:138px;border-radius:50%;flex:none;touch-action:none;
  background:radial-gradient(circle,#1c2070 0 40%,#0a0c3a 70%);box-shadow:inset 0 0 0 3px #3a40a0,inset 0 4px 10px #000,0 0 0 4px #0a0c3a}
.dp{position:absolute;width:46px;height:46px;border:0;border-radius:10px;background:rgba(255,255,255,.06);padding:0}
.dp::before{content:"";position:absolute;left:50%;top:50%;width:16px;height:14px;margin:-7px 0 0 -8px;background:#c8ccef;clip-path:polygon(50% 0,100% 100%,0 100%)}
.dp.up{left:46px;top:2px}.dp.dn{left:46px;bottom:2px}.dp.lt{left:2px;top:46px}.dp.rt{right:2px;top:46px}
.dp.dn::before{transform:rotate(180deg)}.dp.lt::before{transform:rotate(-90deg)}.dp.rt::before{transform:rotate(90deg)}
.dp.on{background:rgba(255,212,0,.25)}.dp.on::before{background:var(--yellow)}
.stick{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#ff8a9a,var(--red) 45%,#7a0016);box-shadow:0 6px 10px rgba(0,0,0,.6),0 0 0 3px #12155a;
  transform:translate(var(--sx,0),var(--sy,0));transition:transform 60ms linear}
.abc{grid-area:abc;display:flex;gap:10px;align-items:flex-end}
.bt{width:64px;height:64px;border-radius:50%;border:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 5px 0 rgba(0,0,0,.55),inset 0 -4px 0 rgba(0,0,0,.25),inset 0 3px 0 rgba(255,255,255,.4)}
.bt b{font-family:var(--bg);font-size:22px;font-weight:400}
.bt span{font-family:var(--ar);font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.bt.ba{background:radial-gradient(circle at 40% 30%,#ff6b7f,var(--red) 60%);color:#fff}
.bt.bb{background:radial-gradient(circle at 40% 30%,#8aefff,var(--cyan) 60%);color:var(--deep);margin-bottom:12px}
.bt.bc{background:radial-gradient(circle at 40% 30%,#ff9ccf,var(--pink) 60%);color:#fff;margin-bottom:24px}
.bt.on,.bt:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.55),inset 0 -2px 0 rgba(0,0,0,.25),0 0 18px rgba(255,255,255,.55)}

.under{max-width:780px;margin:12px auto 0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* the coin door: two dark slots and the service switch behind them */
.door{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 8px;border-radius:8px;background:linear-gradient(180deg,#3a3a46,#1c1c24);
  box-shadow:inset 0 0 0 2px #55556a,inset 0 2px 0 rgba(255,255,255,.15),0 3px 0 #000}
.slots{display:flex;gap:6px}
.slots span{display:block;width:6px;height:24px;border-radius:3px;background:#000;box-shadow:0 0 0 2px #e4002b,0 0 6px rgba(228,0,43,.6)}
.testsw{min-height:44px;min-width:64px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:0;border-radius:6px;cursor:pointer;
  font-family:var(--bg);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#0e1150;box-shadow:inset 0 0 0 2px #3a40a0,0 3px 0 #05062a}
.testsw .led{width:9px;height:9px;border-radius:50%;background:#30304a;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.testsw[aria-pressed="true"] .led{background:var(--yellow);box-shadow:0 0 8px var(--yellow)}
.dlab{font-size:12px;color:#c8cce0;line-height:1.2}
.dlab kbd{display:inline-block;margin-left:6px;font-family:var(--ar);font-size:10px;font-weight:700;opacity:.8}
@media (hover:none){.dlab kbd{display:none}}
.fsbtn{min-height:44px;padding:8px 18px;border-radius:10px;border:2px solid var(--cyan);background:#0a0c3a;color:var(--cyan);font-family:var(--bg);font-size:13px;letter-spacing:.06em;word-spacing:.3em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 12px rgba(0,194,224,.35)}

/* ---------- below the cabinet ---------- */
.below{max-width:780px;margin:22px auto 0;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"howto howto" "hints note" "board board";gap:22px}
.below h2,.below h3{font-family:var(--bg);font-weight:400;letter-spacing:.04em;word-spacing:.3em;line-height:1.15}
.panelart{grid-area:howto;padding:20px 22px;border-radius:14px;background:linear-gradient(160deg,var(--deep),#0a0c3a);
  box-shadow:0 0 0 3px var(--yellow),0 0 0 6px var(--deep),0 0 24px rgba(255,212,0,.25);font-size:15px}
.panelart h2{margin:0 0 12px;font-size:26px;color:var(--yellow);text-shadow:2px 2px 0 var(--pink-dk)}
.panelart h3{margin:18px 0 8px;font-size:15px;color:var(--pink)}
.steps{margin:0;padding-left:1.4em}
.steps li{margin:0 0 6px}
.steps b,.rules b{color:var(--yellow);text-transform:uppercase;letter-spacing:.02em}
.moves,.keys{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}
.moves dt,.keys dt{font-weight:900;color:var(--cyan);text-transform:uppercase;font-size:13px;letter-spacing:.04em;padding-top:2px;white-space:nowrap}
.moves dd,.keys dd{margin:0}
.key{display:inline-block;width:22px;height:22px;border-radius:50%;text-align:center;line-height:22px;font-family:var(--bg);font-size:12px;margin-right:4px;vertical-align:-2px}
.ka{background:var(--red);color:#fff}.kb{background:var(--cyan);color:var(--deep)}.kc{background:var(--pink);color:#fff}
.rules{margin:0;padding-left:1.2em}
.rules li{margin:0 0 6px}
.sticker{grid-area:hints;align-self:start;padding:18px 20px;border-radius:18px;background:var(--yellow);color:var(--deep);
  transform:rotate(-1.5deg);box-shadow:0 0 0 3px var(--pink),6px 8px 0 rgba(0,0,0,.4)}
.sticker h2{margin:0;font-size:24px;color:var(--pink-dk)}
.sticker .hq{margin:4px 0 8px;font-family:var(--lg);font-size:30px;line-height:1.1;color:var(--deep)}
.sticker ul{margin:0;padding-left:1.1em;font-weight:700}
.sticker li{margin:0 0 4px}
.sticker .sig{margin:8px 0 0;text-align:right;font-style:italic}
.note{grid-area:note;align-self:start;position:relative;padding:22px 20px 16px;background:var(--paper);color:#2a2a30;
  transform:rotate(1.2deg);box-shadow:4px 6px 0 rgba(0,0,0,.4);font-size:17px}
.note::before{content:"";position:absolute;left:50%;top:-10px;width:90px;height:22px;margin-left:-45px;background:rgba(255,255,220,.65);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.note p{margin:0;font-weight:700;letter-spacing:.01em}
.note .mgmt{margin-top:8px;text-align:right;font-weight:400;font-style:italic}
.board{grid-area:board;padding:18px 22px;border-radius:14px;background:#000;box-shadow:0 0 0 3px var(--cyan),0 0 22px rgba(0,194,224,.35)}
.board h2{margin:0;font-size:22px;color:var(--cyan)}
.bsub{margin:2px 0 10px;font-size:13px;color:#9aa2c0}
#board{margin:0;padding:0;list-style:none;columns:2;column-gap:28px;counter-reset:rk}
#board li{counter-increment:rk;display:flex;align-items:baseline;gap:10px;font-family:var(--bg);font-size:16px;letter-spacing:.06em;padding:3px 0;break-inside:avoid;color:var(--yellow)}
#board li::before{content:counter(rk) ".";width:2.2em;text-align:right;color:#9aa2c0;font-size:13px}
#board li:nth-child(n+6){color:var(--cyan)}
#board .ini{width:3.2em}
#board .pts{margin-left:auto;font-variant-numeric:tabular-nums}

.foot{max-width:780px;margin:34px auto 0;padding:20px 0 30px;border-top:2px solid rgba(255,46,147,.4);text-align:center;font-size:13px;color:#c8cce0}
.foot p{margin:0 0 10px}
.foot .lic{font-weight:700;color:#fff}
.fam{font-family:var(--bg);font-size:11px;letter-spacing:.04em;line-height:2.2;margin:0 0 10px}
.fam a,.beware a{display:inline-block;padding:14px 0;margin:-14px 0;color:var(--yellow);text-decoration:none}
.fam a:hover,.beware a:hover{text-decoration:underline}
.beware{margin:0 0 10px}
.beware a{color:var(--cyan);text-decoration:underline}
.legal{color:#9aa2c0}

/* ---------- laptop heights: keep marquee, screen and panel in one view ---------- */
@media (min-width:721px) and (max-height:940px){
  .room{padding-top:8px}
  .cab{padding:8px}
  .marquee{min-height:0;padding:5px 14px}
  .hpic{width:45px;height:54px;background-position:-270px -162px;background-size:360px 270px;border-width:2px}
  .logo{font-size:44px}
  .qca{margin-top:2px;font-size:11px}
  .bezel{margin-top:8px;padding:8px}
  .panel{margin-top:8px;padding:6px 14px 8px}
  .dpad{width:132px;height:132px}
  .dp{width:44px;height:44px}
  .dp.up,.dp.dn{left:44px}.dp.lt,.dp.rt{top:44px}
}

/* ---------- narrow screens: screen on top, the panel under it, all in one view ---------- */
@media (max-width:720px){
  .room{padding:8px 10px 0}
  .cab{padding:7px;border-radius:16px 16px 8px 8px}
  .marquee{min-height:0;padding:6px 10px;gap:10px}
  .hpic{width:45px;height:54px;background-position:-270px -162px;background-size:360px 270px;border-width:2px}
  .hcap{display:none}
  .logo{font-size:34px}
  .qca{font-size:9px;letter-spacing:.16em;margin-top:2px}
  .bezel{margin-top:7px;padding:6px;border-radius:12px}
  .crt{border-radius:12px/10px}
  .panel{margin-top:7px;padding:8px 10px 10px;grid-template-columns:auto 1fr;grid-template-areas:"sys sys" "pad abc";gap:8px}
  .sys{gap:6px}
  .pb,.tg{font-size:10px;padding:4px 9px}
  .dpad{width:132px;height:132px}
  .dp{width:44px;height:44px}
  .dp.up,.dp.dn{left:44px}.dp.lt,.dp.rt{top:44px}
  .abc{justify-content:flex-end;gap:8px}
  .bt{width:58px;height:58px}
  .bt.bb{margin-bottom:10px}.bt.bc{margin-bottom:20px}
  .below{grid-template-columns:1fr;grid-template-areas:"howto" "hints" "note" "board"}
  #board{columns:1}
  .panelart{padding:16px}
  .moves,.keys{grid-template-columns:1fr;gap:2px}
  .moves dd,.keys dd{margin-bottom:8px}
}
@media (max-width:400px){
  .room{padding:6px 6px 0}
  .cab{padding:5px}
  .bezel{padding:4px}
}
@media (max-width:360px){
  .room{padding:4px 4px 0}
  .cab{padding:4px}
  .bezel{padding:4px}
  .panel{padding:6px;gap:6px}
  .logo{font-size:28px}
  .hpic{width:30px;height:36px;background-position:-180px -108px;background-size:240px 180px}
  .bt{width:46px;height:46px}
  .bt b{font-size:17px}
  .bt span{font-size:7px}
  .abc{gap:4px}
  .pb,.tg{padding:4px 7px}
}
@media (max-width:340px){
  .room{padding:0}
  .cab{padding:4px 0 6px;border-radius:0;box-shadow:0 0 0 2px var(--pink)}
  .marquee{border-radius:0;margin:0 4px}
  .bezel{padding:0;margin-top:4px;border-radius:0;box-shadow:none;background:#000}
  .crt{border-radius:0}
  .panel{border-radius:0;margin-top:4px}
  .under{padding:0 8px}
  .below{padding:0 8px}
  .foot{padding-left:8px;padding-right:8px}
}
/* a 1x screen gets a cabinet its own size */
.cab.k1{max-width:400px}
.cab.k1 .panel{grid-template-columns:auto 1fr;grid-template-areas:"sys sys" "pad abc"}
.cab.k1 .logo{font-size:34px}
/* between 641 and 720 wide, trim the trim so the 2x screen fits sooner */
@media (min-width:641px) and (max-width:720px){
  .cab{margin:0 -10px;padding:5px 4px}
  .bezel{padding:2px}
}
@media (prefers-reduced-motion:reduce){
  .stick{transition:none}
  .glass::after{display:none}
}