/* ============================================================
   bold-pages.css
   Page-level styling for games.html (Arcade) and contact.html.
   Loaded AFTER css/style.css — additive only. Never renames or
   removes ids/classes that js/games.js or js/contact.js hook into;
   only introduces new classes and layers on top of the shared
   editorial design system (Inter Tight display type, Fragment Mono
   annotations, monochrome surfaces + single blue accent, flat
   hairline-bordered panels). Colors are pulled exclusively from the
   CSS custom properties defined in style.css so light/dark mode both
   keep working.
   ============================================================ */

/* ---------- kicker: shares the shared mono kicker look, left-aligned ---------- */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
  margin-bottom: 18px;
}
.hero-kicker::before { content: "("; }
.hero-kicker::after { content: ")"; }

/* ---------- punchy subcopy under the headline ---------- */
.hero-sub {
  color: var(--text-2);
  max-width: 560px;
  margin-top: 18px;
  font-size: 1.08rem;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .hero-sub { font-size: 1rem; }
}

/* ============================================================
   Arcade image integration — hero backdrop, cabinet-poster game
   cards, and in-game imagery. Additive only: never renames or
   removes any id/class js/games.js hooks into.
   ============================================================ */

/* ---------- arcade hero: two-column, media panel on the right ---------- */
.arcade-hero { text-align: left; padding-bottom: 40px; }
.arcade-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.arcade-hero-copy .hero-kicker,
.arcade-hero-copy .arcade-stats { justify-content: flex-start; }
.arcade-hero-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/5;
  border: 1px solid var(--border);
  background-image: url("../assets/images/arcade-neon.jpg");
  background-size: cover;
  background-position: center;
}

/* ---------- arcade stat chips: flat pills, mono numerals ---------- */
.arcade-stats {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.a-stat {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: transparent; border: 1px solid var(--border);
}

/* ---------- game cards: cabinet-poster image headers, flat borders ---------- */
.game-card { padding-top: 0; }
.g-media {
  position: relative;
  margin: -28px -24px 0;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.g-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 45%, rgba(10, 10, 10, 0.72) 100%);
}
.gm-reaction { background-image: url("../assets/images/gallery-10.webp"); }
.gm-memory   { background-image: url("../assets/images/gallery-08.webp"); }
.gm-simon    { background-image: url("../assets/images/gallery-12.webp"); }
.gm-quiz     { background-image: url("../assets/images/pair-storefront-clear.jpg"); }
.gm-breaker  { background-image: url("../assets/images/gallery-06.webp"); }

.game-card .g-diff {
  position: absolute; top: 14px; right: 14px; z-index: 2;
}
.game-card .g-emoji {
  position: relative; z-index: 2;
  width: 56px; height: 56px; margin-top: -40px;
  display: grid; place-items: center;
  font-size: 1.7rem; border-radius: 14px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
}

/* ---------- Switch Speed: real photo under the frost overlay ---------- */
.rx-arena {
  background-image: url("../assets/images/pair-hero-clear.jpg");
  background-size: cover;
  background-position: center;
}
.rx-arena.tooearly {
  background-image: none;
  background-color: #7f1d1d;
}

/* ---------- Memory Frost: subtle frosted texture on the card back ---------- */
.mem-front {
  background-image: url("../assets/images/gallery-08.webp"),
    linear-gradient(140deg, rgba(148, 190, 233, 0.42), rgba(190, 215, 240, 0.6));
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
}
[data-theme="dark"] .mem-front {
  background-image: url("../assets/images/gallery-08.webp"),
    linear-gradient(140deg, rgba(40, 65, 105, 0.82), rgba(25, 42, 70, 0.9));
  background-blend-mode: soft-light;
}

/* ---------- Glass Breaker: faint room photo behind the transparent canvas ---------- */
.brk-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background-image: url("../assets/images/gallery-06.webp");
  background-size: cover;
  background-position: center;
}
#breakerCanvas {
  background: linear-gradient(160deg, rgba(12, 26, 48, 0.9), rgba(18, 37, 63, 0.9));
  border: none;
}

/* ---------- quiz per-question image ---------- */
.quiz-img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
  margin-bottom: 18px;
}

/* ============================================================
   Contact-page-only additions
   ============================================================ */
.quote-out .q-price { font-variant-numeric: tabular-nums; }
.calc-send { width: 100%; justify-content: center; margin-top: 4px; }
.submit-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.submit-row .btn { min-width: 180px; justify-content: center; }
.submit-row .btn[disabled] { opacity: 0.7; pointer-events: none; }
.form-note { font-size: 0.78rem; color: var(--text-3); font-family: var(--font-mono); }

@media (max-width: 1000px) {
  .arcade-hero-grid { grid-template-columns: 1fr; }
  .arcade-hero-media { aspect-ratio: 16/9; order: -1; }
}
@media (max-width: 680px) {
  .arcade-hero-media { aspect-ratio: 16/10; border-radius: 16px; }
  .arcade-stats { gap: 8px; }
  .a-stat { padding: 9px 14px; }
  .g-media { margin: -24px -20px 0; }
}