/* MN Arcade Demo look: near-black stage, MN red, Montserrat Black for display text and Inter for body text
   (the same faces as Arcade HQ). Loaded after style.css on every page. */
@font-face { font-family: 'Montserrat'; src: url('../assets/fonts/montserrat.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --black: #0a1128;
  --ink: #070d1f;
  --charcoal: #121b3d;
  --accent: #e11d2e;
  --accent-d: #c01729;
  --accent-rgb: 225 29 46;
  --on-accent: #ffffff;
  --gold: #ffc83d;
  --display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html, body { background: #0a1128; }
body { background: linear-gradient(180deg, #121b3d, #070d1f) fixed; }

/* Montserrat is a text face: everything set in the display font uses its black weight */
.title, .lockup .l1, .lockup .l2, .card h2, .card h3, .stat b, .score-big, .ticket .tier, .ticket .flag-text, .tabs button,
.chip, .deal p, .best-line, .best-line b, .lb-row .rank, .lb-row .pts, .bar-row .lbl, .icon-label, .test-ribbon, .arcade-back,
.install-sheet h2, .install-sheet .steps .n, .tut .order .num, .tut .order .txt, .btn, #toast button, .prize b, .tut-sp,
.arc-title, .arc-title span, .name, .name b, .play, .kind, .copy, .shot .new { font-weight: 900; }

/* Montserrat Black is wide: keep big scores (134 070), titles and tabs on one line at 360px */
.lockup .l1 { font-size: clamp(38px, 11.5vw, 56px); letter-spacing: 1px; }
.lockup .l2 { font-size: clamp(44px, 13.5vw, 66px); letter-spacing: 1px; padding: 4px 22px 2px; }
.title.lg { font-size: clamp(38px, 11vw, 54px); }
.title.md { font-size: 26px; }
.score-big { font-size: clamp(52px, 16vw, 84px); letter-spacing: 0; white-space: nowrap; }
.topbar .title { font-size: clamp(18px, 5.6vw, 24px); white-space: nowrap; }
.tabs button { font-size: clamp(13px, 4vw, 16px); white-space: nowrap; letter-spacing: .3px; padding-top: 11px; padding-bottom: 9px; }
.btn.big { font-size: clamp(22px, 7vw, 28px); letter-spacing: .5px; }
.btn.small { font-size: 15px; }
.btn { letter-spacing: .5px; }
.stat b { font-size: 24px; }
.lb-row .rank, .lb-row .pts { font-size: 22px; }
.ticket .tier { font-size: 28px; }
.deal p { font-size: 16px; letter-spacing: .3px; line-height: 1.15; }
.chip { font-size: 13px; letter-spacing: .5px; }
.best-line { font-size: 16px; }
.best-line b { font-size: 24px; }
.icon-label { font-size: 13px; letter-spacing: .5px; }
.test-ribbon { font-size: 12px; letter-spacing: .8px; white-space: nowrap; }
.card h2 { font-size: 22px; letter-spacing: .3px; }
.tut .order .num { font-size: 34px; }
.tut .order .txt { font-size: 22px; }
.hashtag { letter-spacing: 3px; }
.logo-band img { height: 54px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.screen.menu .logo-band img { height: 50px; }

/* Cards over the dark stage */
.screen.dim { background: rgba(7, 8, 12, .7); }
.screen.dim .card { background: #111a38; border-top: 3px solid var(--accent); box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.screen.dim .muted, .screen.dim .card .muted { color: #a9b0c6; }
.screen.dim .stat { background: #18234a; border-bottom: 3px solid var(--accent); }
.screen.dim .stat span { color: #a9b0c6; }
.topbar { background: #0a1128; border-bottom: 3px solid var(--accent); }

/* Home page */
.arc-logo { height: 70px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.arc-title span { letter-spacing: 2px; font-size: clamp(40px, 12vw, 80px); }
.arc-sub { color: #cfd5e6; }
.arc-foot .tagline { font-family: var(--display); font-weight: 900; letter-spacing: 2px; color: var(--gold); }
.game-card { background: #111a38; border-top: 3px solid var(--accent); box-shadow: 0 16px 34px rgba(0, 0, 0, .5); }
.name { font-size: clamp(26px, 7.5vw, 38px); }
.kind { color: var(--accent); font-size: 14px; }
.play { white-space: nowrap; font-size: 18px; }
.copy { font-size: 14px; }

/* two buttons side by side (SHARE · SCORES) still fit at 360px in Montserrat Black */
.btn-row .btn { font-size: clamp(15px, 4.6vw, 22px); letter-spacing: .3px; padding-left: 10px; padding-right: 10px; }