.arcade{height:100%;overflow-y:auto;padding:92px clamp(18px,5vw,70px) 42px;background:radial-gradient(circle at 50% 0,#40105b 0,#0a0610 45%,#030205 100%);color:#f8eefb}
.arcade>.back-button{position:fixed;top:88px}
.arcade-header{text-align:center;margin:1.5rem auto 2rem}
.arcade-header .eyebrow{color:#6fffe9}
.arcade-header h2{margin:.45rem 0 0;font-size:clamp(2.8rem,8vw,6.8rem);line-height:.82;letter-spacing:-.06em;text-shadow:4px 4px 0 #7f249f,0 0 24px #d148ff}
.arcade-header h2 span{display:block;color:#e6b84c;text-shadow:4px 4px 0 #713d0a,0 0 22px #ffbd55}
.arcade-header p:last-child{color:#b8a9bf;letter-spacing:.1em}
.cabinet-row{width:min(1020px,100%);margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,4vw,3rem)}
.game-cabinet{position:relative;padding:1rem 1rem 1.4rem;background:linear-gradient(145deg,#26102f,#09050d 58%);border:4px solid var(--cabinet);box-shadow:10px 12px 0 #020103,0 0 28px color-mix(in srgb,var(--cabinet) 35%,transparent);clip-path:polygon(6% 0,94% 0,100% 8%,96% 100%,4% 100%,0 8%)}
.cabinet-title{text-align:center;padding:.55rem;border:2px solid var(--cabinet);background:#050308;color:var(--cabinet);font:900 clamp(1.15rem,3vw,1.8rem)/1 monospace;letter-spacing:.08em;text-shadow:0 0 12px var(--cabinet)}
.arcade-screen{display:block;width:100%;aspect-ratio:4/3;margin:.85rem auto;background:#05030a;border:8px solid #1a1220;image-rendering:pixelated;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.game-readout{display:flex;justify-content:space-between;color:#d9cde0;font:700 .72rem monospace;letter-spacing:.06em}
.game-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.85rem}
.game-controls button{min-height:44px;border:2px solid var(--cabinet);background:#0b0610;color:#fff;font:900 .72rem monospace;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.game-controls button:hover,.game-controls button:focus-visible{background:var(--cabinet);color:#09050c}
.game-controls .wide{grid-column:1/-1}
.high-scores{margin-top:1rem;border-top:2px solid color-mix(in srgb,var(--cabinet) 55%,transparent);padding-top:.75rem}
.high-scores h4{margin:0 0 .5rem;color:var(--cabinet);font:900 .78rem monospace;letter-spacing:.12em}
.high-scores ol{counter-reset:rank;margin:0;padding:0;color:#8f8197;font:700 .74rem/1.75 monospace}
.high-scores li{counter-increment:rank;display:grid;grid-template-columns:1.5rem 1fr auto;gap:.3rem;border-bottom:1px dashed #33243b}
.high-scores li::before{content:counter(rank) "."}
.high-scores li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ded2e4}
.high-scores li b{color:#fff}
.challenge-cabinet{grid-column:1/-1}
.challenge-screen{aspect-ratio:16/9;max-width:760px}
.challenge-cabinet .game-readout{width:min(760px,100%);margin:auto}
.fret-controls{grid-template-columns:repeat(4,1fr);width:min(760px,100%);margin-inline:auto}
.fret-controls button{font-size:.9rem}
.fret-dot{display:inline-block;width:.72rem;height:.72rem;margin-right:.35rem;border-radius:50%;vertical-align:-.08rem;box-shadow:0 0 8px currentColor}
.fret-dot.purple{background:#a445ff;color:#a445ff}
.fret-dot.gold{background:#e6b84c;color:#e6b84c}
.fret-dot.blue{background:#2b78d0;color:#2b78d0}
.fret-dot.green{background:#23a895;color:#23a895}
.challenge-credit{text-align:center;color:#a899b0;font:700 .7rem/1.4 monospace;letter-spacing:.05em}
.challenge-cabinet .high-scores{width:min(760px,100%);margin-inline:auto}
.future-cabinet{grid-column:1/-1;width:min(520px,100%);justify-self:center;overflow:hidden;filter:saturate(.72)}
.future-screen{position:relative;display:grid;place-content:center;gap:.45rem;width:100%;aspect-ratio:4/3;margin:.85rem auto;border:8px solid #1a1220;background:repeating-linear-gradient(0deg,#08090b 0 3px,#101216 3px 5px);text-align:center;color:#f2c94c;box-shadow:inset 0 0 55px #000,0 0 18px #f2c94c33;animation:future-flicker 3.6s steps(1) infinite}
.future-screen span{font:900 clamp(4rem,12vw,7rem)/.8 monospace;text-shadow:0 0 25px #f2c94c}.future-screen strong{font:900 1.05rem/1 monospace;letter-spacing:.15em}.future-screen small{color:#8b876f;font:700 .63rem/1 monospace;letter-spacing:.12em}
.caution-tape{position:absolute;z-index:2;left:-7%;top:47%;width:114%;padding:.52rem;background:repeating-linear-gradient(135deg,#f2c94c 0 18px,#15120a 18px 36px);border-block:2px solid #f2c94c;color:#fff;text-align:center;font:950 .7rem/1 monospace;letter-spacing:.09em;text-shadow:1px 2px #000;transform:rotate(-4deg);white-space:nowrap;overflow:hidden}
.future-controls{display:flex;align-items:center;justify-content:center;gap:1rem;min-height:52px}.future-controls i{display:block;width:24px;height:24px;border-radius:50%;border:2px solid #655d35;background:#16130b}.future-controls b{display:block;width:68px;height:16px;border:2px solid #655d35;background:#080705}
.future-cabinet>p{text-align:center;color:#9b9275;font:700 .72rem/1.5 monospace;letter-spacing:.08em}
@keyframes future-flicker{0%,18%,21%,67%,70%,100%{opacity:1}19%,68%{opacity:.38}20%,69%{opacity:.72}}
.arcade-footer{text-align:center;margin:2rem auto 0;color:#7f7087;font:700 .65rem monospace;letter-spacing:.12em}
@media(max-width:760px){
  .arcade{padding-top:78px}
  .arcade>.back-button{top:72px}
  .cabinet-row{grid-template-columns:1fr}
  .game-cabinet{max-width:520px;margin:auto;width:100%}
  .challenge-cabinet{max-width:520px}
  .future-cabinet{grid-column:auto}
  .fret-controls{gap:.3rem}
  .fret-controls button{padding:.35rem .2rem}
  .fret-dot{display:block;margin:0 auto .25rem}
}
@media(prefers-reduced-motion:reduce){.future-screen{animation:none}}