/* ==========================================================================
   90s arcade look for the Play section (only loaded on /play pages).
   Dark hall, neon cabinets, pixel lettering, CRT scanlines on the game screens.
   ========================================================================== */
body.arcade {
  --bg: #07051a; --surface: #15112e; --ink: #F4F0FF; --muted: #9A90C8; --line: #2A2360;
  --n1: #FFE600; --n2: #FF4FD8; --n3: #39FF8B; --n4: #3DF0FF;
  --pixel: "Press Start 2P", "Courier New", monospace;
  color-scheme: dark;
  background:
    radial-gradient(1px 1px at 20% 30%, #fff8 50%, transparent 51%) 0 0 / 120px 120px,
    radial-gradient(1px 1px at 70% 80%, #fff6 50%, transparent 51%) 0 0 / 160px 160px,
    radial-gradient(1.5px 1.5px at 50% 50%, #FFE60088 50%, transparent 51%) 0 0 / 230px 230px,
    radial-gradient(ellipse at 50% -10%, #2a1170 0%, transparent 60%),
    #07051a;
}
body.arcade .backdrop { display: none; }
body.arcade header.top { background: color-mix(in srgb, #15112e 80%, transparent); border-color: #2A2360; }
body.arcade .site-footer, body.arcade .site-footer strong { color: var(--muted); }

/* ---------- The hall ---------- */
.arcade-hall { padding-top: 40px; text-align: center; }
.arcade-title { margin: 0; font-family: var(--pixel); font-size: clamp(1.4rem, 4vw, 2.4rem); line-height: 1.5;
  color: var(--n1); text-shadow: 0 0 6px var(--n1), 0 0 22px #ff9a00, 4px 4px 0 #b3001b; }
.arcade-title span { color: var(--n2); text-shadow: 0 0 6px var(--n2), 0 0 22px var(--n2), 4px 4px 0 #3b0a6b; }
.insert-coin { font-family: var(--pixel); font-size: .8rem; color: var(--n4); margin: 22px 0 34px;
  animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.cabinets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 26px; text-align: left; }
.cabinet-card { position: relative; display: grid; gap: 12px; align-content: start; padding: 26px 22px 22px;
  background: linear-gradient(180deg, #1d1640, #0d0a24); border: 3px solid var(--neon); border-radius: 14px;
  box-shadow: 0 0 0 2px #000, 0 0 18px var(--neon), inset 0 0 22px color-mix(in srgb, var(--neon) 25%, transparent);
  transition: transform .2s steps(3), box-shadow .2s ease; }
.cabinet-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 2px #000, 0 0 34px var(--neon), inset 0 0 30px color-mix(in srgb, var(--neon) 35%, transparent); }
.cabinet-art { font-size: 3rem; line-height: 1; filter: drop-shadow(0 0 10px var(--neon)); }
.cabinet-card:hover .cabinet-art { animation: bounce .5s steps(4) infinite alternate; }
@keyframes bounce { to { transform: translateY(-6px); } }
.cabinet-name { font-family: var(--pixel); font-size: .95rem; line-height: 1.5; color: var(--neon); text-shadow: 0 0 8px var(--neon); }
.cabinet-pitch { color: var(--muted); font-size: .9rem; }
.cabinet-hi { font-family: var(--pixel); font-size: .6rem; color: var(--ink); }
.cabinet-go { font-family: var(--pixel); font-size: .7rem; color: #000; background: var(--neon); justify-self: start;
  padding: 8px 12px; border-radius: 4px; box-shadow: 3px 3px 0 #000; }

/* ---------- A game cabinet ---------- */
.arcade-game { padding-top: 26px; }
.arcade-back { font-family: var(--pixel); font-size: .65rem; color: var(--n4); }
.arcade-back:hover { text-shadow: 0 0 8px var(--n4); }
.machine { width: min(100%, 560px); margin: 18px auto 0; padding: 16px 18px 22px; border-radius: 22px 22px 10px 10px;
  background: linear-gradient(180deg, #241a52, #0d0a24 70%); border: 3px solid var(--neon);
  box-shadow: 0 0 0 3px #000, 0 0 30px color-mix(in srgb, var(--neon) 70%, transparent); }
.marquee { text-align: center; padding: 12px 8px; margin-bottom: 14px; border-radius: 10px; background: #000;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--neon) 50%, transparent); }
.marquee span { font-family: var(--pixel); font-size: clamp(.9rem, 3vw, 1.3rem); color: var(--neon);
  text-shadow: 0 0 6px var(--neon), 0 0 18px var(--neon); animation: flicker 4s infinite; }
@keyframes flicker { 0%, 92%, 96%, 100% { opacity: 1; } 94% { opacity: .55; } }
.hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px;
  font-family: var(--pixel); font-size: .62rem; color: var(--muted); }
.hud b { color: var(--ink); font-weight: 400; margin-left: 6px; }
.hud span:first-child b { color: var(--n1); }
.sound { font-family: var(--pixel); font-size: .55rem; color: var(--ink); background: #000; border: 2px solid var(--line);
  border-radius: 4px; padding: 6px 8px; cursor: pointer; }
.sound[aria-pressed="false"] { color: var(--muted); }

.screen { position: relative; width: min(100%, calc((100vh - 300px) * var(--screen-ratio, .75))); margin-inline: auto;
  border: 10px solid #050308; border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: inset 0 0 0 2px #2a2360, 0 0 22px #000; }
.screen canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges;
  touch-action: none; cursor: pointer; }
/* CRT: scanlines and a soft vignette over the picture */
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .55) 100%);
  animation: roll 8s linear infinite; }
@keyframes roll { to { background-position: 0 30px, 0 0; } }

.overlay { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 14px;
  padding: 18px; text-align: center; background: rgba(4, 2, 14, .82); }
.overlay[hidden] { display: none; }
.overlay-title { margin: 0; font-family: var(--pixel); font-size: clamp(.9rem, 3.4vw, 1.3rem); line-height: 1.5;
  color: var(--neon); text-shadow: 0 0 8px var(--neon); }
.overlay-text { margin: 0; color: var(--ink); max-width: 30ch; font-size: .9rem; }
.press-start { font-family: var(--pixel); font-size: .8rem; color: #000; background: var(--n1); border: 0; border-radius: 4px;
  padding: 12px 16px; cursor: pointer; box-shadow: 4px 4px 0 #b3001b; animation: blink 1.1s steps(1) infinite; }
.press-start:hover, .press-start:focus-visible { animation: none; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #b3001b; }
.overlay-hint { margin: 0; font-family: var(--pixel); font-size: .5rem; line-height: 1.8; color: var(--muted); max-width: 34ch; }
.overlay.celebrate .overlay-title { color: var(--n1); animation: rainbow 1s steps(6) infinite; }
@keyframes rainbow {
  0% { color: #FFE600; } 17% { color: #FF9A3D; } 33% { color: #FF4FD8; }
  50% { color: #3DF0FF; } 67% { color: #39FF8B; } 83% { color: #FFE600; }
}

.arcade .other-games { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.arcade .other-games a { font-family: var(--pixel); font-size: .55rem; line-height: 1.6; color: var(--ink); background: #000;
  border: 2px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.arcade .other-games a:hover { border-color: var(--n4); box-shadow: 0 0 12px var(--n4); }

@media (prefers-reduced-motion: reduce) {
  .insert-coin, .press-start, .marquee span, .screen::after { animation: none !important; }
}