/* The arcade frame (/play/<slug>): a slim cabinet bar over the game, which fills the rest of the window.
   The bar's keys match the site header's router panel. The frame never sits on top of the game except for
   the How to play card and the More games drawer, and both close when the player clicks back into the game. */
:root{--black:#0B0B0A;--carbon:#151515;--paper:#F1EFE6;--dim:#A9A69B;--chartreuse:#C8FF3D;--red:#FF3B30;--amber:#FFB020;--cobalt:#3157FF;
  --display:"Anton","Arial Narrow",Impact,sans-serif;--ui:"Instrument Sans",Inter,Arial,Helvetica,sans-serif;--mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --bar:52px;--hue:#C8FF3D}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:#000;color:var(--paper);font:15px/1.5 var(--ui);overflow:hidden;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--chartreuse);outline-offset:2px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.cabinet{position:fixed;inset:0;display:flex;flex-direction:column;height:100dvh}

/* ---------- the bar ---------- */
.bar{position:relative;z-index:5;flex:none;display:flex;align-items:center;gap:12px;height:calc(var(--bar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));
  background:linear-gradient(180deg,#22211f,#141413);box-shadow:inset 0 -3px 0 var(--hue),0 2px 0 #000}
.k{display:inline-flex;align-items:center;gap:8px;height:40px;min-width:44px;justify-content:center;padding:0 12px;border:1px solid #34342f;border-radius:3px;cursor:pointer;
  background:linear-gradient(#262624,#181816);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 #000;color:var(--paper);text-decoration:none;
  font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:border-color .15s,color .15s,transform .08s}
.k svg{width:15px;height:15px;flex:none}
.k:hover{border-color:#5a5a52;color:var(--chartreuse)}
.k:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.k[aria-expanded="true"],.k[aria-pressed="true"]{border-color:var(--hue);color:var(--hue)}
#mute-btn .off{display:none}#mute-btn[aria-pressed="true"] .on{display:none}#mute-btn[aria-pressed="true"] .off{display:block}
.now{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.tally{width:9px;height:9px;border-radius:50%;flex:none;background:var(--red);box-shadow:0 0 10px var(--red);animation:tally 1.6s infinite}
@keyframes tally{50%{opacity:.35;box-shadow:none}}
.now .ch{color:var(--dim);flex:none}
.now h1{margin:0;font:400 24px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.keys{display:flex;align-items:center;gap:6px;flex:none}
.credit{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-left:8px;padding-left:14px;border-left:1px solid #34342f;color:var(--paper);text-decoration:none;font-size:13px;font-weight:600;line-height:1.1}
.credit small{display:block;font:500 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.credit .mark svg{width:24px;height:24px;display:block}
.credit:hover span:last-child{text-decoration:underline;text-underline-offset:3px}

/* ---------- the stage ---------- */
.stage{position:relative;flex:1;min-height:0;background:#000}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.tuning{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:#000;transition:opacity .4s}
.tuning img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;filter:saturate(.8)}
.tuning img:not([src]){display:none}
.tuning .snow{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);animation:roll 6s linear infinite}
@keyframes roll{to{background-position:0 300px}}
.tuning .tl{position:relative;padding:8px 14px;background:rgba(0,0,0,.8);color:var(--chartreuse);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.tuning.gone{opacity:0;pointer-events:none}
.note{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.82)}
.note-in{max-width:440px;padding:26px 24px 22px;background:#1b1a18;border-radius:10px;box-shadow:inset 0 0 0 1px #34342f,inset 0 3px 0 var(--hue)}
.note .kick{color:var(--amber);margin:0 0 10px}
.note h2{margin:0 0 10px;font:400 30px/1 var(--display);text-transform:uppercase}
.note p{margin:0 0 18px;color:#d6d3c8}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:2px;font-weight:600;text-decoration:none;cursor:pointer;background:var(--chartreuse);color:var(--carbon)}
.btn.ghost{background:none;color:var(--paper);border-color:rgba(241,239,230,.3)}

/* ---------- how to play and more games ---------- */
.pop,.drawer{position:absolute;z-index:6;background:#1b1a18;color:var(--paper);box-shadow:inset 0 0 0 1px #34342f,0 24px 60px -10px rgba(0,0,0,.8)}
.pop{top:calc(var(--bar) + env(safe-area-inset-top) + 10px);right:max(10px,env(safe-area-inset-right));width:min(380px,calc(100vw - 20px));padding:18px 18px 12px;border-radius:8px}
.pop-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.pop h2,.drawer h2{margin:0;font:400 26px/1 var(--display);text-transform:uppercase}
.x{display:grid;place-items:center;width:44px;height:44px;margin:-8px -8px -8px 0;border:0;background:none;cursor:pointer;color:var(--dim)}
.x svg{width:14px;height:14px}.x:hover{color:var(--paper)}
.pop ol{margin:0 0 12px;padding-left:22px}
.pop li{margin:0 0 6px;color:#e2dfd4}
.pop li::marker{font:600 12px var(--mono);color:var(--hue)}
.pop .fit{color:var(--dim);margin:0 0 6px}
.pop-foot{display:flex;flex-wrap:wrap;gap:0 18px;margin:0;border-top:1px solid #2e2d29;padding-top:4px}
.linkish{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;color:var(--chartreuse);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:14px}
.drawer{top:calc(var(--bar) + env(safe-area-inset-top));right:0;bottom:0;width:min(400px,100vw);padding:18px 18px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;border-radius:0}
.mini{list-style:none;margin:6px 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini a{display:block;color:var(--paper);text-decoration:none;border-radius:6px;overflow:hidden;background:#121211;box-shadow:inset 0 3px 0 var(--h,#C8FF3D)}
.mini img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;margin-top:3px}
.mini span{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 9px 9px;font:400 16px/1 var(--display);text-transform:uppercase}
.mini svg{width:11px;height:11px;flex:none;color:var(--dim)}
.mini a:hover span{color:var(--h,#C8FF3D)}
.btn-arcade{display:flex;align-items:center;justify-content:center;min-height:48px;margin-bottom:16px;background:var(--chartreuse);color:var(--carbon);font-weight:600;text-decoration:none;border-radius:2px}
.drawer .rbs-made-by{--rbs-mark:34px;--rbs-dim:.7;color:var(--paper);border-top:1px solid #2e2d29;padding-top:12px}
.rbs-made-by{--rbs-mark:36px;--rbs-icon:18px;--rbs-hit:44px;--rbs-gap:16px;--rbs-dim:.72;display:flex;flex-wrap:wrap;align-items:center;gap:8px var(--rbs-gap)}
.rbs-made-by__credit{display:inline-flex;align-items:center;gap:10px;min-height:var(--rbs-hit);color:inherit;text-decoration:none}
.rbs-made-by__mark{width:var(--rbs-mark);height:var(--rbs-mark);flex:none;display:block}
.rbs-made-by__text{display:flex;flex-direction:column;line-height:1.15}
.rbs-made-by__text small{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:var(--rbs-dim)}
.rbs-made-by__text b{font-weight:600}
.rbs-made-by__credit:hover b{text-decoration:underline;text-underline-offset:3px}
.rbs-social{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.rbs-social a{display:grid;place-items:center;width:var(--rbs-hit,44px);height:var(--rbs-hit,44px);color:inherit;opacity:var(--rbs-dim,.72);transition:opacity .15s}
.rbs-social a:hover,.rbs-social a:focus-visible{opacity:1}
.rbs-social svg{width:var(--rbs-icon,18px);height:var(--rbs-icon,18px);display:block}
.nojs{position:fixed;inset:auto 0 0;margin:0;padding:16px;background:#1b1a18;color:var(--paper)}
.nojs a{color:var(--chartreuse)}

/* full screen: the game alone */
.stage:fullscreen{background:#000}
.stage:-webkit-full-screen{background:#000;width:100%;height:100%}

/* ---------- narrower windows: labels go, icons stay ---------- */
@media (max-width:1180px){.credit span:last-child{display:none}.credit{padding-left:10px;margin-left:4px}}
@media (max-width:980px){.keys .lbl{display:none}.k{padding:0 10px}}
@media (max-width:640px){
  :root{--bar:50px}
  .bar{gap:6px}
  .back .lbl{display:none}
  .now .ch{display:none}
  .now h1{font-size:20px}
  .credit{display:none}
  .keys{gap:4px}
  .k{height:42px;min-width:42px;padding:0}
  .drawer{width:100vw}
}
@media (prefers-reduced-motion:reduce){.tally,.tuning .snow,.tuning .tl{animation:none}}