/* ─────────────────────────────────────────────
   The Arcade — shared C64 chrome
   Full-screen Commodore-64 shell used by the arcade hub AND every game
   page, so the whole arcade feels like one immersive machine, separate
   from the wedding site. Provides: the light-blue-bordered deep-blue
   screen frame, the CRT scanline overlay, and the C64 title-bar nav +
   status-bar footer (which reuse the site's .nav / .footer structure so
   markup stays identical, only the skin changes).

   Load this AFTER the page's own stylesheet. Game pages additionally
   re-point their in-cabinet panel colors (game.css --arcade-* vars) to
   this palette so menus and leaderboards match.
───────────────────────────────────────────── */

:root {
  /* Classic Commodore boot-screen colors: light blue-violet border
     around a deep blue screen. */
  --c64-border: #7C70DA;
  --c64-screen: #40318D;
  --c64-text:   #A9A3E8;
  --c64-dim:    #6C63C4;
  --c64-bright: #DFE3FF;
}

/* The deep-blue screen fills the whole viewport, framed by the classic
   light-blue border — no floating card. Nav + content + footer stack
   inside the frame. */
body { background: var(--c64-border); }
.c64-frame {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  background: var(--c64-screen);
  border: clamp(10px, 2.2vw, 22px) solid var(--c64-border);
  display: flex; flex-direction: column;
  font-family: 'Press Start 2P', monospace;
  -webkit-font-smoothing: none;
  color: var(--c64-text);
}

/* CRT scanlines + vignette over the whole screen */
.c64-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background:
    radial-gradient(120% 100% at 50% 42%, transparent 58%, rgba(0,0,0,0.30) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

/* ── C64 nav — same structure/placement/content as the site nav
   (monogram left, ARCADE link right), pixel aesthetic: a title bar
   across the top of the screen. ── */
.nav.c64-nav {
  position: static; mix-blend-mode: normal;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(0.7rem, 2vw, 1.1rem) clamp(1rem, 3vw, 2.2rem);
  background: rgba(0,0,0,0.22);
  border-bottom: 3px solid var(--c64-border);
}
.c64-nav .brand-mark { height: 34px; }
.c64-nav .brand-mark path { fill: var(--c64-bright); transition: fill 0.2s; }
.c64-nav .nav-logo:hover .brand-mark path { fill: var(--gold); }
.c64-nav .nav-arcade-link {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, 1.6vw, 11px); letter-spacing: 0;
  text-transform: uppercase; color: var(--gold);
}
.c64-nav .nav-arcade-link::after { display: none; }
.c64-nav .nav-arcade-link::before { content: '> '; }
.c64-nav .nav-arcade-link:hover { color: var(--c64-bright); }

/* ── C64 footer — same structure/placement/content as the site footer
   (name + date), pixel aesthetic: a status bar across the bottom. ── */
.footer.c64-footer {
  background: rgba(0,0,0,0.22);
  border-top: 3px solid var(--c64-border);
  padding: clamp(1rem, 3vw, 1.6rem) clamp(1rem, 3vw, 2.2rem);
  color: var(--c64-text);
}
.c64-footer .footer-grid {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 0.8rem 1.5rem; max-width: 1200px; margin: 0 auto;
}
.c64-footer .footer-mark {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, 1.8vw, 13px); font-weight: 400; letter-spacing: 0;
  color: var(--c64-bright); line-height: 1.6;
}
.c64-footer .footer-mark .amp { font-style: normal; color: var(--gold); }
.c64-footer .footer-meta {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 1.3vw, 8px); color: var(--c64-dim);
  line-height: 2; text-align: right;
}

@media (max-width: 760px) {
  .c64-footer .footer-grid { flex-direction: column; align-items: flex-start; }
  .c64-footer .footer-meta { text-align: left; }
}