/* Self-hosted fonts - served same-origin (no third-party requests,
   no visitor IP sent to Google; also faster: no extra DNS/connection). */
/* Self-hosted variable fonts (one file per family/subset covers all weights) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/spacegrotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/spacegrotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Scroll-reveal animation (disabled if user prefers reduced motion) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

:root {
  --ink: #111217;
  --surface: #181a22;
  --surface-2: #222530;
  --paper: #f5f4ef;
  --muted: #c7c7ce;
  --red: #d91f38;
  --blue: #315ecb;
  --purple: #9c1fa6;
  --gold: #f1c84b;
  --line: rgba(255, 255, 255, 0.14);
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Horizontal page gutter — always present on both edges. Big screens
     get extra centering padding so content caps near ~1280px. The
     22px / 5vw floor guarantees padding can never collapse to zero. */
  --page-x: max(env(safe-area-inset-left), env(safe-area-inset-right), 22px, 5vw, calc((100% - 1500px) / 2));
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

h1, h2, h3, .eyebrow, .nav, .button, .filter-btn, .nav-cta {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* Skip-to-content link — hidden until keyboard-focused (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: 10px;
  top: -56px;
  z-index: 1000;
  padding: 10px 18px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 0.16s var(--ease);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

main[tabindex]:focus {
  outline: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: calc(12px + env(safe-area-inset-top)) calc(clamp(18px, 4vw, 54px) + env(safe-area-inset-right)) 12px calc(clamp(18px, 4vw, 54px) + env(safe-area-inset-left));
  background: rgba(245, 244, 239, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 3px solid var(--red);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(245, 244, 239, 0.98); }
}

.brand img {
  width: min(330px, 62vw);
  height: auto;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(217, 31, 56, 0.1);
  color: var(--red);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.header-phone:hover,
.header-phone:focus-visible {
  background: var(--red);
  color: white;
  transform: translateY(-1px);
}

.header-phone svg {
  flex-shrink: 0;
}

@media (max-width: 880px) {
  .header-phone-number { display: none; }
  .header-phone { padding: 8px 10px; }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 800;
}

.nav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
}

.nav a:hover,
.nav a:focus-visible {
  background: rgba(17, 18, 23, 0.08);
}

.nav a[aria-current="page"] {
  background: rgba(17, 18, 23, 0.1);
  color: var(--red);
}

.nav .nav-cta {
  background: var(--blue);
  color: white;
}

.hero {
  min-height: clamp(460px, 64vh, 600px);
  position: relative;
  display: grid;
  align-items: end;
  padding: clamp(64px, 9vw, 104px) var(--page-x) 56px;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  background: var(--ink);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(17, 18, 23, 0.96) 0%, rgba(17, 18, 23, 0.76) 46%, rgba(17, 18, 23, 0.34) 100%),
    linear-gradient(0deg, rgba(17, 18, 23, 0.9) 0%, rgba(17, 18, 23, 0.12) 45%);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  position: relative;
  max-width: 760px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.04;
}

h1 {
  max-width: 860px;
  font-size: clamp(2.1rem, 5vw, 4.2rem);
}

h2 {
  font-size: clamp(1.55rem, 3vw, 2.55rem);
}

h3 {
  font-size: 1.15rem;
}

.lead {
  max-width: 680px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}

.hero-actions,
.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
  will-change: transform;
}

.button.primary {
  background: var(--red);
  color: white;
  box-shadow: 0 6px 18px rgba(217, 31, 56, 0.32);
}

.button.primary:hover,
.button.primary:focus-visible {
  background: #e8324a;
  box-shadow: 0 10px 26px rgba(217, 31, 56, 0.44);
}

.button.secondary {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: white;
}

.button.secondary:hover,
.button.secondary:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

.button:hover,
.text-link:hover {
  transform: translateY(-2px);
}

.text-link {
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}

.text-link:hover {
  color: #ffd96a;
}

.nav a {
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

/* Visible keyboard-focus indicator for every interactive element.
   Gold reads strongly on the dark UI; blue on the light header/footer
   where a gold ring would wash out against the cream background. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.site-header :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--blue);
}

.categories,
.split-section,
.inventory-band,
.contact-grid,
.page-hero {
  padding-inline: var(--page-x);
}

/* .quick-info is intentionally full-bleed: the 3 boxes span edge-to-edge
   (no centered side padding) so there are no grey gutter strips. */

.quick-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.quick-info article {
  min-height: 230px;
  padding: clamp(24px, 4vw, 42px);
  background: var(--surface);
}

.dot {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-bottom: 22px;
  border-radius: 999px;
}

.dot.red {
  background: var(--red);
}

.dot.blue {
  background: var(--blue);
}

.dot.purple {
  background: var(--purple);
}

.quick-info p,
.category-grid p,
.section-copy p,
.inventory-band p,
.contact-panel p,
.site-footer p {
  color: var(--muted);
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(52px, 7vw, 84px);
}

.about-story {
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
}

.section-copy p {
  max-width: 680px;
  font-size: 1.05rem;
}

.text-link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--gold);
  font-weight: 900;
  text-decoration: none;
}

.image-frame {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.image-frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.mascot-img {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.inventory-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-block: clamp(38px, 6vw, 66px);
  background:
    linear-gradient(90deg, rgba(217, 31, 56, 0.28), rgba(49, 94, 203, 0.22)),
    var(--surface-2);
  border-block: 1px solid var(--line);
}

.inventory-band div {
  max-width: 720px;
}

.categories {
  padding-block: clamp(52px, 7vw, 84px);
}

.section-heading {
  max-width: 780px;
  margin-bottom: 28px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.category-grid.category-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 720px) {
  .category-grid.category-grid--three {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .category-grid.category-grid--three {
    grid-template-columns: 1fr;
  }
}

.category-grid.category-grid--five {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 880px) {
  .category-grid.category-grid--five {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .category-grid.category-grid--five {
    grid-template-columns: 1fr;
  }
}

.category-grid article,
.contact-panel {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.category-grid article h3 {
  font-size: 1.32rem;
}

.page-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(460px, 64vh, 600px);
  padding-block: clamp(84px, 11vw, 132px) clamp(48px, 8vw, 82px);
  background:
    linear-gradient(120deg, rgba(217, 31, 56, 0.26), rgba(49, 94, 203, 0.12), rgba(156, 31, 166, 0.26)),
    var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Semi-transparent store-collage behind every page hero, matching the
   homepage treatment exactly: the image sits under the same dark gradient
   stack as the home hero (.hero-media::after) — a horizontal left-to-right
   darkening plus a bottom-up darkening, no brand tint — so the look and
   transparency are identical site-wide. The colored gradient on .page-hero
   above is the fallback if the image can't load. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(17, 18, 23, 0.96) 0%, rgba(17, 18, 23, 0.76) 46%, rgba(17, 18, 23, 0.34) 100%),
    linear-gradient(0deg, rgba(17, 18, 23, 0.9) 0%, rgba(17, 18, 23, 0.12) 45%),
    url("assets/store-collage.webp");
  background-size: cover;
  background-position: center;
}

/* Keep hero content above the image layer. */
.page-hero > * {
  position: relative;
  z-index: 1;
}

/* Bare buttons directly inside .page-hero (e.g. events.html) shouldn't
   stretch to the full cross-axis width; keep them sized to content. */
.page-hero > .button {
  align-self: flex-start;
}

.contact-hero {
  background:
    linear-gradient(120deg, rgba(49, 94, 203, 0.28), rgba(156, 31, 166, 0.18)),
    var(--surface);
}

.bulk-hero {
  background:
    linear-gradient(120deg, rgba(241, 200, 75, 0.22), rgba(49, 94, 203, 0.18)),
    var(--surface);
}

.card-conditions-hero {
  background:
    linear-gradient(120deg, rgba(49, 94, 203, 0.22), rgba(241, 200, 75, 0.14)),
    var(--surface);
}

.careers-hero {
  background:
    linear-gradient(120deg, rgba(217, 31, 56, 0.22), rgba(241, 200, 75, 0.18), rgba(49, 94, 203, 0.14)),
    var(--surface);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  gap: 18px;
  padding-block: clamp(48px, 8vw, 84px);
}

.contact-panel h2 {
  margin-bottom: 22px;
}

.contact-panel a {
  color: var(--gold);
}

.hours-list {
  margin: 0;
}

.hours-list div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.hours-list dt {
  font-weight: 900;
}

.hours-list dd {
  margin: 0;
  color: var(--muted);
  text-align: right;
}

/* Compact single-band footer: brand on the left, meta + links on the
   right, thin credit strip below. No tall <br> link columns. */
.site-footer {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 32px;
  row-gap: 10px;
  padding: 14px var(--page-x) calc(14px + env(safe-area-inset-bottom));
  background: var(--paper);
  color: var(--ink);
  border-top: 4px solid var(--blue);
  font-size: 0.86rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Bulky is the mobile Bulky-Tris launcher (tap 5x). Disable iOS Safari
     double-tap-to-zoom across the brand so rapid taps register cleanly. */
  touch-action: manipulation;
}

.footer-brand img {
  width: 108px;
  height: auto;
}

/* Small Bulky mascot to the left of the wordmark in the footer */
.footer-brand .footer-mascot {
  width: 44px;
  flex: 0 0 auto;
  touch-action: manipulation;
  cursor: pointer;
}

.footer-brand p {
  margin: 0;
  font-size: 0.8rem;
  color: #6b6e75;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}

.site-footer .footer-meta p {
  margin: 0;
  line-height: 1.45;
  color: #4f5159;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px 14px;
}

.footer-meta a,
.footer-links a {
  color: var(--ink);
  text-decoration: none;
}

.footer-meta a:hover,
.footer-links a:hover {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer .footer-credit {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(17, 18, 23, 0.12);
  text-align: center;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: #6b6e75;
}

.footer-credit a {
  color: #4f5159;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.18s var(--ease);
}

.footer-credit a:hover {
  color: var(--red);
}

/* Phone/tablet: stack to a tight centered block. The brand (logo + Bulky)
   stays visible — Bulky is also the mobile launch target for the hidden
   Bulky-Tris game (tap it 5x). */
@media (max-width: 760px) {
  .site-footer {
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding: 14px var(--page-x) calc(16px + env(safe-area-inset-bottom));
    text-align: center;
  }
  .footer-brand {
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2px;
  }
  .footer-meta { align-items: center; text-align: center; }
  .footer-links { justify-content: center; }
  .site-footer .footer-credit { padding-top: 10px; }
}

/* ── Map embed ──────────────────────────────────────────────────────────── */

.map-section {
  padding: 0 var(--page-x) clamp(48px, 8vw, 84px);
}

.map-embed {
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: 8px;
  display: block;
  border: 1px solid var(--line);
}

@media (max-width: 560px) {
  .map-embed { height: 280px; }
}

/* Click-to-load map facade (Google not contacted until the user opts in) */
.map-facade {
  width: 100%;
  height: 420px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 24px;
  background:
    radial-gradient(circle at 30% 25%, rgba(217, 31, 56, 0.12), transparent 60%),
    radial-gradient(circle at 75% 80%, rgba(49, 94, 203, 0.14), transparent 60%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
}

.map-facade svg {
  color: var(--gold);
  opacity: 0.85;
}

.map-facade-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.map-facade-text {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.map-facade-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 6px;
}

@media (max-width: 640px) {
  .map-facade { height: 360px; }
}

/* ── Events page ────────────────────────────────────────────────────────── */

.events-hero {
  background:
    linear-gradient(120deg, rgba(49, 94, 203, 0.32), rgba(156, 31, 166, 0.22), rgba(217, 31, 56, 0.22)),
    var(--surface);
}

.events-hero .button {
  margin-top: 8px;
}

.events-section {
  padding: clamp(48px, 7vw, 90px) var(--page-x);
}

.events-controls {
  margin-bottom: 36px;
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.events-tz-note {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.85;
}

.filter-btn {
  padding: 9px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.filter-btn:hover {
  background: var(--surface-2);
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.28);
}

.filter-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: white;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  /* stretch (not start) so every card matches the tallest in its row — the
     footer's margin-top:auto drops the buttons to the bottom and shorter
     cards just carry empty space above them. grid-auto-rows:1fr then makes
     every row track equal to the tallest, so all boxes match across the whole
     grid (not just within a row) — responsive, no magic height number. */
  align-items: stretch;
  grid-auto-rows: 1fr;
}

/* ── Game color tokens ──────────────────────────────────────────────────── */

[data-game="pokemon"]  { --game-color: #e3350d; }
[data-game="magic"]    { --game-color: #9c1fa6; }
[data-game="yugioh"]   { --game-color: #f1c84b; }
[data-game="lorcana"]  { --game-color: #315ecb; }
[data-game="smash"]    { --game-color: #d91f38; }
[data-game="digimon"]  { --game-color: #3b82f6; }
[data-game="gundam"]   { --game-color: #f97316; }
[data-game="riftbound"]{ --game-color: #0db7d4; }
[data-game="other"]    { --game-color: #c7c7ce; }

/* ── Event card ─────────────────────────────────────────────────────────── */

.event-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 22px 22px 24px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--game-color, var(--red));
  border-radius: 8px;
  background: var(--surface);
  transition: transform 0.16s, box-shadow 0.16s;
}

.event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.42);
}

.event-card.past {
  opacity: 0.46;
  pointer-events: none;
}

.event-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.event-badge {
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--game-color, var(--muted));
  border-color: var(--game-color, var(--line));
  background: transparent;
}

.days-pill {
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.days-pill.today   { background: rgba(241, 200, 75, 0.18);  color: var(--gold); }
.days-pill.soon    { background: rgba(74, 222, 128, 0.14);  color: #4ade80; }
.days-pill.upcoming{ background: rgba(49, 94, 203, 0.2);    color: #7eb3ff; }
.days-pill.past    { background: var(--surface-2);          color: var(--muted); }

.event-card-title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--paper);
}

.event-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.event-meta li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.4;
}

.event-meta li svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--game-color, var(--muted));
}

.event-desc {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.58;
  white-space: pre-line;
}

/* ── Spots capacity bar ─────────────────────────────────────────────────── */

.spots-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.spots-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.spots-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}

.spots-fill.open    { background: #4ade80; }
.spots-fill.limited { background: var(--gold); }
.spots-fill.full    { background: var(--red); }

.spots-label {
  font-size: 0.78rem;
  font-weight: 800;
}

.spots-label.open    { color: #4ade80; }
.spots-label.limited { color: var(--gold); }
.spots-label.full    { color: var(--red); }

/* ── Card footer ────────────────────────────────────────────────────────── */

.event-card-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}

.event-btn {
  flex: 1;
  min-width: 130px;
  justify-content: center;
}

.cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.cal-btn:hover {
  background: var(--surface-2);
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ── Empty state ────────────────────────────────────────────────────────── */

.events-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
}

.events-empty-mascot {
  display: block;
  width: 140px;
  height: auto;
  margin: 0 auto 18px;
  opacity: 0.92;
}

.events-empty a {
  color: var(--gold);
  font-weight: 800;
}

/* ── Events: small "follow us" announce line ────────────────────────────── */

/* Deliberately small + muted so it doesn't compete with the bigger
   host-event CTA above it. */
.events-announce {
  padding: clamp(22px, 3vw, 34px) var(--page-x);
  text-align: center;
}

.events-announce p {
  max-width: 640px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}

.events-announce a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

.events-announce a:hover {
  color: var(--paper);
}

/* ── Repairs & Gallery ───────────────────────────────────────────────────── */

.repairs-hero {
  background:
    linear-gradient(120deg, rgba(217, 31, 56, 0.26), rgba(49, 94, 203, 0.14), rgba(156, 31, 166, 0.18)),
    var(--surface);
}

.upgrades-hero {
  background:
    linear-gradient(120deg, rgba(49, 94, 203, 0.28), rgba(217, 31, 56, 0.18), rgba(156, 31, 166, 0.2)),
    var(--surface);
}

.page-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  color: var(--gold);
  font-size: 0.84rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.page-breadcrumb:hover {
  opacity: 0.8;
}

.gallery-section {
  padding: clamp(52px, 7vw, 84px) var(--page-x);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 820px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

.gallery-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.5);
  border-color: rgba(241, 200, 75, 0.4);
}

.gallery-placeholder {
  aspect-ratio: 4 / 3;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background:
    radial-gradient(circle at 30% 20%, rgba(217, 31, 56, 0.14), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(49, 94, 203, 0.14), transparent 60%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
  overflow: hidden;
}

.gallery-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.gallery-placeholder svg,
.gallery-placeholder-text {
  position: relative;
  z-index: 1;
}

.gallery-placeholder svg {
  opacity: 0.55;
  color: var(--gold);
  transition: transform 0.45s var(--ease);
}

.gallery-card:hover .gallery-placeholder svg {
  transform: scale(1.08) rotate(-3deg);
}

.gallery-placeholder-text {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.7;
  color: var(--muted);
}

.gallery-card-body {
  padding: 18px 20px 20px;
}

.gallery-card-body h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.gallery-card-body p {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.gallery-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.repairs-cta {
  background:
    linear-gradient(90deg, rgba(217, 31, 56, 0.26), rgba(49, 94, 203, 0.18)),
    var(--surface-2);
}

/* ── Event inquiry page ─────────────────────────────────────────────────── */

.event-inquiry-hero {
  background:
    linear-gradient(120deg, rgba(241, 200, 75, 0.18), rgba(49, 94, 203, 0.16), rgba(156, 31, 166, 0.16)),
    var(--ink);
}

.events-host-cta {
  background:
    linear-gradient(90deg, rgba(241, 200, 75, 0.22), rgba(49, 94, 203, 0.18)),
    var(--surface-2);
}

.inquiry-form-section {
  padding: clamp(36px, 5vw, 72px) var(--page-x) clamp(60px, 9vw, 110px);
  background: var(--surface);
}

.inquiry-placeholder {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 40px);
  text-align: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(217, 31, 56, 0.14), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(49, 94, 203, 0.14), transparent 60%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 2px solid transparent;
  border-radius: 14px;
  background-clip: padding-box;
  background:
    radial-gradient(circle at 30% 20%, rgba(217, 31, 56, 0.14), transparent 60%) padding-box,
    radial-gradient(circle at 80% 80%, rgba(49, 94, 203, 0.14), transparent 60%) padding-box,
    linear-gradient(135deg, var(--surface-2), var(--surface)) padding-box,
    linear-gradient(135deg, var(--red), var(--gold), var(--blue)) border-box;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.inquiry-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}

.inquiry-placeholder svg,
.inquiry-placeholder h2,
.inquiry-placeholder p,
.inquiry-placeholder .inquiry-fallback-actions {
  position: relative;
  z-index: 1;
}

.inquiry-placeholder svg {
  color: var(--gold);
  opacity: 0.75;
  margin-bottom: 14px;
}

.inquiry-placeholder h2 {
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  margin: 0 0 12px;
  color: var(--paper);
}

.inquiry-placeholder p {
  margin: 0 auto 20px;
  max-width: 480px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.inquiry-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ── Upgrade request page ───────────────────────────────────────────────── */

.upgrade-request-hero {
  background:
    linear-gradient(120deg, rgba(217, 31, 56, 0.18), rgba(241, 200, 75, 0.14), rgba(49, 94, 203, 0.18)),
    var(--ink);
}

.upgrade-form-section {
  padding: clamp(36px, 5vw, 72px) var(--page-x) clamp(42px, 6vw, 76px);
  background: var(--ink);
}

/* ── Repair pricing list ────────────────────────────────────────────────── */

.pricing {
  padding: clamp(42px, 6vw, 76px) var(--page-x);
  background: var(--ink);
}

.pricing-disclaimer {
  display: flex;
  gap: clamp(14px, 2vw, 22px);
  align-items: flex-start;
  max-width: 980px;
  margin: clamp(20px, 3vw, 32px) auto clamp(28px, 4vw, 48px);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.8vw, 30px);
  background: rgba(241, 200, 75, 0.08);
  border: 1px solid rgba(241, 200, 75, 0.45);
  border-left: 5px solid var(--gold);
  border-radius: 8px;
}

.pricing-asterisk {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 0.8;
  color: var(--gold);
  font-weight: 700;
  text-shadow: 0 0 18px rgba(241, 200, 75, 0.4);
}

.pricing-disclaimer p {
  margin: 0;
  color: var(--paper);
  line-height: 1.55;
  font-size: 0.95rem;
}

.pricing-disclaimer strong {
  color: var(--gold);
}

.pricing-disclaimer--centered {
  display: block;
  text-align: center;
  border-left-width: 1px;
}

.pricing-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}

.pricing-group {
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.pricing-group p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.pricing-group h3 {
  margin: 0 0 14px;
  font-size: 1.05rem;
  color: var(--gold);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.price-list {
  margin: 0;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.price-row:first-child {
  border-top: none;
  padding-top: 4px;
}

.price-row dt {
  color: var(--paper);
  font-size: 0.96rem;
}

.price-row dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--paper);
  font-size: 1rem;
  white-space: nowrap;
}

/* Full-width pricing card — for groups that benefit from a tier sweep
   (e.g., bulk pricing where comparing tiers side-by-side is the point). */
.pricing-group--wide { grid-column: 1 / -1; }

.pricing-group--wide .price-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pricing-group--wide .price-row {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 14px 0 4px;
  border-top: none;
}

.pricing-group--wide .price-row dd {
  font-size: 1.55rem;
  color: var(--gold);
}

@media (max-width: 720px) {
  .pricing-groups { grid-template-columns: 1fr; }
  .pricing-disclaimer { flex-direction: column; gap: 8px; }
  .pricing-asterisk { font-size: 2.4rem; }

  /* Wide card falls back to the standard stacked-row layout on mobile. */
  .pricing-group--wide .price-list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .pricing-group--wide .price-row {
    flex-direction: row;
    align-items: baseline;
    text-align: left;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    padding: 9px 0;
  }
  .pricing-group--wide .price-row:first-child { border-top: none; padding-top: 4px; }
  .pricing-group--wide .price-row dd {
    font-size: 1rem;
    color: var(--paper);
  }
}

/* ── Handheld upgrade cost estimator ─────────────────────────────────────── */
.upgrade-calc {
  padding: clamp(42px, 6vw, 76px) var(--page-x);
  background: var(--ink);
}

.calc-shell {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 340px);
  gap: clamp(18px, 3vw, 28px);
  max-width: 980px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  align-items: start;
}

.calc-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calc-field { display: block; }

.calc-field-label,
.calc-group legend {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  padding: 0;
}

.calc-field select {
  width: 100%;
  padding: 13px 40px 13px 15px;
  background-color: var(--surface-2);
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: 1rem;
  cursor: pointer;
  color-scheme: dark;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f1c84b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.calc-field select:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(241, 200, 75, 0.3);
}

.calc-group {
  margin: 0;
  padding: clamp(16px, 2vw, 22px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.calc-group[hidden] { display: none; }

.calc-opts { display: flex; flex-direction: column; }

.calc-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  cursor: pointer;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.calc-opt:first-child { border-top: none; padding-top: 2px; }

.calc-opt input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--gold);
  cursor: pointer;
}

.calc-opt-name { color: var(--paper); font-size: 0.96rem; }

.calc-opt-price {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--muted);
  font-size: 0.92rem;
  white-space: nowrap;
}

.calc-opt input:checked ~ .calc-opt-price { color: var(--gold); }

.calc-result {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(22px, 3vw, 30px);
  background: rgba(241, 200, 75, 0.08);
  border: 1px solid rgba(241, 200, 75, 0.45);
  border-radius: 12px;
  text-align: center;
}

.calc-result-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.calc-total {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(241, 200, 75, 0.35);
}

.calc-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

.calc-result .button { width: 100%; }

@media (max-width: 720px) {
  .calc-shell { grid-template-columns: 1fr; }
  .calc-result { position: static; }
}

/* ── Card condition guide ────────────────────────────────────────────────── */

.card-conditions {
  padding-block: clamp(48px, 8vw, 84px);
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.condition-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(22px, 3vw, 36px);
  align-items: center;
  padding-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}

.condition-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.condition-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.condition-copy h2 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 2.6vw, 1.7rem);
}

.condition-copy p {
  margin: 0 0 12px;
  color: var(--paper);
  line-height: 1.6;
}

.condition-copy p:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .condition-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .condition-photo img {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ── Review prompt (small secondary CTA on service pages) ───────────────── */

.review-prompt {
  padding: clamp(28px, 4vw, 44px) var(--page-x);
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  text-align: center;
}

.review-prompt p {
  max-width: 620px;
  margin: 0 auto 14px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ── Reviews / social proof ─────────────────────────────────────────────── */

.reviews {
  padding: clamp(48px, 7vw, 80px) var(--page-x);
  background: var(--ink);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: clamp(20px, 3vw, 32px) auto clamp(28px, 4vw, 40px);
}

@media (max-width: 920px) {
  .review-grid { grid-template-columns: 1fr; }
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--paper);
}

.review-stars {
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: 0.18em;
  line-height: 1;
}

.review-card blockquote {
  margin: 0;
}

.review-card blockquote p {
  margin: 0;
  color: var(--paper);
  font-size: 0.95rem;
  line-height: 1.55;
}

.review-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.review-author {
  color: var(--paper);
  font-weight: 600;
}

.reviews-cta {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.reviews-cta p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ── Meet the repair techs ──────────────────────────────────────────────── */

.repair-techs {
  padding: clamp(42px, 6vw, 76px) var(--page-x);
  background: var(--surface);
}

.techs-photo-frame {
  max-width: 880px;
  margin: clamp(20px, 3vw, 32px) auto 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.42);
}

.techs-photo-frame img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Source is 3/2, wider frame is 16/9 — cover crops top/bottom, so anchor
     to the top to keep heads in frame (matches .person-photo-frame img). */
  object-position: center top;
  display: block;
}

.techs-photo-placeholder {
  aspect-ratio: 16 / 9;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
  background:
    radial-gradient(circle at 30% 20%, rgba(217, 31, 56, 0.14), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(49, 94, 203, 0.14), transparent 60%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
  overflow: hidden;
}

.techs-photo-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.techs-photo-placeholder svg,
.techs-photo-text {
  position: relative;
  z-index: 1;
}

.techs-photo-placeholder svg {
  opacity: 0.55;
}

.techs-photo-text {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.techs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 880px;
  margin: clamp(24px, 4vw, 40px) auto 0;
}

.tech-card {
  display: flex;
  gap: clamp(16px, 2vw, 22px);
  align-items: flex-start;
  padding: clamp(22px, 3vw, 32px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

/* Portrait beside the bio — fixed-width 4/5 frame so the photo and text
   read as one unit instead of a stray thumbnail. */
.tech-card .tech-photo {
  flex: 0 0 132px;
}

.tech-card-body {
  flex: 1;
  min-width: 0;
}

.tech-card:hover {
  transform: translateY(-3px);
  border-color: rgba(241, 200, 75, 0.4);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
}

.tech-card h3 {
  margin: 0 0 4px;
  font-size: 1.4rem;
  color: var(--paper);
}

.tech-role {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.tech-bio {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

.tech-link {
  margin: 14px 0 0;
  font-size: 0.9rem;
}
.tech-link a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.tech-link a:hover {
  color: var(--paper);
}

@media (max-width: 720px) {
  .techs-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .tech-card { flex-direction: column; }
  .tech-card .tech-photo { flex: 0 0 auto; max-width: 160px; }
}

/* ── Meet the Team page ─────────────────────────────────────────────────── */

.team-hero {
  background:
    linear-gradient(120deg, rgba(217, 31, 56, 0.2), rgba(241, 200, 75, 0.16), rgba(49, 94, 203, 0.18)),
    var(--ink);
}

.team-section {
  padding: clamp(42px, 6vw, 76px) var(--page-x);
}

.team-section--owners {
  background: var(--surface);
}

.team-section--managers {
  background: var(--ink);
}

.team-section--crew {
  background: var(--surface);
}

/* Shared photo frame */
.person-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.person-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portraits are taller than the 4/5 frame, so cover crops vertically.
     Anchor to the top so the crop comes off the bottom and the tops of
     heads are never clipped. */
  object-position: center top;
  display: block;
}

/* Hover photo swap: a second "fun" portrait fades in over the base shot on
   hover/focus. Used on the Travis + Mike cards (team.html). The .photo-hover
   img sits absolutely over the base and is decorative (alt="", aria-hidden),
   so screen readers/no-hover (touch) just get the base photo. */
.person-photo-frame--swap .photo-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.person-photo-frame--swap:hover .photo-hover,
.person-photo-frame--swap:focus-within .photo-hover {
  opacity: 1;
}

/* Travis's hover shot (guitar-shred pose) is a tall portrait with the guitar
   headstock up top and TCG cards fanned in his hand near the bottom. The
   default "center top" anchor crops the bottom and loses the cards, so nudge
   the crop down — sacrifices empty shelf headroom above his head to keep both
   the headstock and the cards in frame. */
.person-photo-frame--swap .photo-hover--low {
  object-position: center 65%;
}

@media (prefers-reduced-motion: reduce) {
  .person-photo-frame--swap .photo-hover { transition: none; }
}

.person-photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background:
    radial-gradient(circle at 30% 20%, rgba(217, 31, 56, 0.14), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(49, 94, 203, 0.14), transparent 60%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
}

.person-photo-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.person-photo-placeholder svg {
  position: relative;
  z-index: 1;
  opacity: 0.5;
}

/* Owners: prominent 2-up cards */
.owners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 36px);
  max-width: 980px;
  margin: clamp(24px, 4vw, 40px) auto 0;
}

.owner-card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 28px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.owner-card:hover {
  transform: translateY(-3px);
  border-color: rgba(241, 200, 75, 0.4);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.42);
}

.owner-card .person-photo-frame--lg {
  /* Match the managers' 4/5 portrait crop so more of the photo shows
     (square 1/1 chopped the top/bottom — e.g. anything they're holding). */
  aspect-ratio: 4 / 5;
  max-width: 320px;
  margin: 0 auto 18px;
}

.owner-card .person-photo-frame--lg img {
  /* Owner shots have extra headroom above their heads; nudge the crop down
     from "top" so the frame top sits closer to the tops of their heads (and
     a bit more of the weapon shows at the bottom). */
  object-position: center 30%;
}

.owner-card h3 {
  margin: 0 0 4px;
  font-size: 1.6rem;
  color: var(--paper);
}

/* Managers: 5-across single row on desktop, drops to 2-col then 1-col */
.managers-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: clamp(24px, 4vw, 40px) auto 0;
}

@media (max-width: 980px) {
  .managers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .managers-grid {
    grid-template-columns: 1fr;
  }
}

.person-card {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.4vw, 24px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.person-card:hover {
  transform: translateY(-3px);
  border-color: rgba(241, 200, 75, 0.4);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
}

.person-card .person-photo-frame {
  margin-bottom: 14px;
}

.person-card h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: var(--paper);
}

/* Shared role + bio */
.person-role {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.person-bio {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Full team group photo */
.team-group-frame {
  position: relative;
  max-width: 1100px;
  margin: clamp(24px, 4vw, 40px) auto 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  /* Matches the supplied crew photo's 2:1 ratio so the full shot shows
     (no cover-crop of the people on the ends). */
  aspect-ratio: 2 / 1;
}

.team-group-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-group-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
  background:
    radial-gradient(circle at 30% 20%, rgba(217, 31, 56, 0.14), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(49, 94, 203, 0.14), transparent 60%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
}

.team-group-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.team-group-placeholder svg,
.team-group-text {
  position: relative;
  z-index: 1;
}

.team-group-placeholder svg { opacity: 0.55; }

.team-group-text {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.team-caption {
  max-width: 800px;
  margin: 22px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.team-cta {
  background:
    linear-gradient(90deg, rgba(241, 200, 75, 0.22), rgba(217, 31, 56, 0.16)),
    var(--surface-2);
}

@media (max-width: 720px) {
  .owners-grid { grid-template-columns: 1fr; }
}

/* ── Hamburger toggle (hidden on desktop) ───────────────────────────────── */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  margin-left: auto;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.22s, opacity 0.22s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Tablet: stack grids, keep full nav visible ─────────────────────────── */

@media (max-width: 920px) {
  .hero {
    min-height: 580px;
  }

  .quick-info,
  .split-section,
  .about-story,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .inventory-band,
  /* Stacked single-column: show 3 distinct cards on the page background
     instead of one undifferentiated grey slab. */
  .quick-info {
    background: var(--ink);
    border-block: 0;
    gap: 12px;
    padding: clamp(28px, 7vw, 40px) var(--page-x);
  }

  .quick-info article {
    border: 1px solid var(--line);
    border-radius: 12px;
  }
}

/* ── Phone: hamburger replaces inline nav ───────────────────────────────── */

@media (max-width: 680px) {
  .site-header {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 8px;
    padding: calc(8px + env(safe-area-inset-top)) calc(clamp(14px, 4vw, 22px) + env(safe-area-inset-right)) 8px calc(clamp(14px, 4vw, 22px) + env(safe-area-inset-left));
    /* Solid, not translucent: the semi-transparent cream + backdrop blur
       rendered as a murky gray bar over the dark hero on mobile. */
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  }

  .brand img {
    width: min(190px, 46vw);
  }

  .nav-toggle {
    display: flex;
  }

  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 12px;
  }

  .nav.nav-open {
    display: flex;
  }

  .nav a {
    justify-content: center;
    width: 100%;
  }
}

/* ── Small phone: tighten spacing and sizes ─────────────────────────────── */

@media (max-width: 560px) {
  .hero {
    min-height: 480px;
    padding-top: 56px;
  }

  .hero-media::after {
    background: linear-gradient(0deg, rgba(17, 18, 23, 0.98) 0%, rgba(17, 18, 23, 0.7) 62%, rgba(17, 18, 23, 0.38) 100%);
  }

  .button {
    width: 100%;
  }

  .quick-info article {
    min-height: unset;
    padding: 20px;
  }

  .category-grid {
    grid-template-columns: 1fr;
  }

  .category-grid article,
  .contact-panel {
    padding: 20px;
  }

  .split-section {
    padding-block: clamp(36px, 8vw, 64px);
  }

  .mascot-img {
    max-height: 280px;
  }

  .hours-list div {
    flex-direction: column;
    gap: 2px;
  }

  .hours-list dd {
    text-align: left;
  }

  .filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
  }

  .filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex-shrink: 0;
  }
}

/* ── Upgrade showcase cards ─────────────────────────────────────────────── */

.upgrade-hint-desktop,
.upgrade-hint-mobile {
  margin: 8px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

@media (hover: none) {
  .upgrade-hint-desktop { display: none; }
}

@media (hover: hover) {
  .upgrade-hint-mobile { display: none; }
}

.upgrade-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px;
  width: 85%;
  margin-inline: auto;
}

.upgrade-card {
  border: 2px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--red), var(--gold)) border-box;
  cursor: pointer;
  transition: transform 0.16s, box-shadow 0.16s;
}

.upgrade-card:hover,
.upgrade-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.42);
}

.upgrade-images {
  position: relative;
  background: var(--surface-2);
  overflow: hidden;
  line-height: 0;
  aspect-ratio: 3 / 4;
}

.upgrade-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  z-index: 0;
}

.upgrade-placeholder svg {
  opacity: 0.35;
}

.upgrade-placeholder span {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.45;
}

.upgrade-img {
  transition: opacity 0.35s ease;
}

.upgrade-img--before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  z-index: 1;
}

.upgrade-img--after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 2;
}

.upgrade-card:hover .upgrade-img--before,
.upgrade-card.is-flipped .upgrade-img--before {
  opacity: 0;
}

.upgrade-card:hover .upgrade-img--after,
.upgrade-card.is-flipped .upgrade-img--after {
  opacity: 1;
}

.upgrade-state-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 3;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.upgrade-state--before {
  opacity: 1;
}

.upgrade-state--after {
  opacity: 0;
}

.upgrade-card:hover .upgrade-state--before,
.upgrade-card.is-flipped .upgrade-state--before {
  opacity: 0;
}

.upgrade-card:hover .upgrade-state--after,
.upgrade-card.is-flipped .upgrade-state--after {
  opacity: 1;
}

.upgrade-card--static {
  cursor: default;
}

.upgrade-card--static:hover .upgrade-img--before,
.upgrade-card--static.is-flipped .upgrade-img--before {
  opacity: 1;
}

.upgrade-card-body {
  padding: 18px 20px 20px;
}

.upgrade-card-body h3 {
  font-size: 1.05rem;
  margin: 0 0 6px;
}

@media (max-width: 920px) {
  .upgrade-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .upgrade-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Showcase page ──────────────────────────────────────────────────────── */

.showcase-hero {
  background:
    linear-gradient(120deg, rgba(241, 200, 75, 0.2), rgba(217, 31, 56, 0.2), rgba(49, 94, 203, 0.2)),
    var(--surface);
}

.showcase-section {
  padding: 0 var(--page-x) clamp(52px, 7vw, 84px);
  display: flex;
  flex-direction: column;
}

/* ── Category band ──────────────────────────────────────────────────────── */

.showcase-band {
  margin-inline: calc(-1 * var(--page-x));
  padding: clamp(28px, 4vw, 48px) var(--page-x);
  border-bottom: 1px solid var(--line);
}

.showcase-band[data-cat="vg"] {
  background:
    linear-gradient(100deg, rgba(217, 31, 56, 0.2), rgba(49, 94, 203, 0.08)),
    var(--surface-2);
  border-top: 1px solid var(--line);
}

.showcase-band[data-cat="tcg"] {
  background:
    linear-gradient(100deg, rgba(241, 200, 75, 0.18), rgba(156, 31, 166, 0.1)),
    var(--surface-2);
  border-top: 1px solid var(--line);
  margin-top: clamp(36px, 5vw, 64px);
}

.showcase-band[data-cat="ttl"] {
  background:
    linear-gradient(100deg, rgba(156, 31, 166, 0.22), rgba(49, 94, 203, 0.14)),
    var(--surface-2);
  border-top: 1px solid var(--line);
  margin-top: clamp(36px, 5vw, 64px);
}

.showcase-band-eyebrow {
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.showcase-band[data-cat="vg"]  .showcase-band-eyebrow { color: var(--red); }
.showcase-band[data-cat="tcg"] .showcase-band-eyebrow { color: var(--gold); }
.showcase-band[data-cat="ttl"] .showcase-band-eyebrow { color: #c97ad6; }

.showcase-band h2 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  line-height: 1.1;
  color: var(--paper);
}

.showcase-band p:last-child {
  margin: 0;
  max-width: 540px;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ── Gallery grids ──────────────────────────────────────────────────────── */

/* VG: 5 upright portrait columns (consoles/handhelds shot in portrait) */
.showcase-grid[data-cat="vg"] {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: clamp(200px, 26vw, 380px);
  gap: 14px;
  margin-top: clamp(20px, 3vw, 32px);
}

/* TCG: 5 upright portrait columns */
/* TCG showcase shots are landscape (3:2) card spreads, not portrait console
   stacks like VG — so the grid runs 3 wide with ~3:2 cells (label strip +
   aspect-ratio). 5 cards = a row of 3 + a row of 2; the trailing pair centers
   under the top row (6-track grid, cards span 2). This keeps each full spread
   visible (object-fit: cover only trims a little backdrop air top/bottom,
   never the cards on the left/right edges). */
.showcase-grid[data-cat="tcg"] {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  gap: 14px;
  margin-top: clamp(20px, 3vw, 32px);
}

.showcase-grid[data-cat="tcg"] .showcase-card {
  aspect-ratio: 7 / 5;
  grid-column: span 2;
}

/* Center the trailing two cards under the row of three. */
.showcase-grid[data-cat="tcg"] .showcase-card:nth-child(4) { grid-column: 2 / span 2; }
.showcase-grid[data-cat="tcg"] .showcase-card:nth-child(5) { grid-column: 4 / span 2; }

.showcase-grid[data-cat="ttl"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(220px, 28vw, 420px);
  gap: 14px;
  margin-top: clamp(20px, 3vw, 32px);
}


.showcase-card {
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 3px;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(135deg, var(--red), var(--gold)) border-box;
}

.showcase-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: 2;
}

.showcase-grid[data-cat="vg"]  .showcase-card::after { background: var(--red); }
.showcase-grid[data-cat="tcg"] .showcase-card::after { background: var(--gold); }
.showcase-grid[data-cat="ttl"] .showcase-card::after { background: var(--purple); }

.showcase-card:hover::after {
  transform: scaleX(1);
}

.showcase-card img {
  position: absolute;
  inset: 38px 0 0 0;
  width: 100%;
  height: calc(100% - 38px);
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease, filter 0.3s ease;
}

.showcase-label {
  position: relative;
  z-index: 3;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--paper);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.55));
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showcase-grid[data-cat="vg"]  .showcase-label { color: #ffd2d8; }
.showcase-grid[data-cat="tcg"] .showcase-label { color: #ffe89a; }
.showcase-grid[data-cat="ttl"] .showcase-label { color: #e2b8ea; }

/* Placeholder used inside .showcase-card when the photo isn't ready yet */
.showcase-photo-placeholder {
  position: absolute;
  inset: 38px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gold);
  background:
    radial-gradient(circle at 30% 20%, rgba(217, 31, 56, 0.14), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(49, 94, 203, 0.14), transparent 60%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
  overflow: hidden;
}

.showcase-photo-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.showcase-photo-placeholder svg,
.showcase-photo-placeholder span {
  position: relative;
  z-index: 1;
  opacity: 0.65;
}

.showcase-photo-placeholder span {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (hover: hover) {
  .showcase-grid:hover .showcase-card img {
    filter: brightness(0.4);
  }

  .showcase-grid:hover .showcase-card:hover img {
    filter: brightness(1);
    transform: scale(1.04);
  }
}

.showcase-cta {
  background:
    linear-gradient(90deg, rgba(241, 200, 75, 0.2), rgba(217, 31, 56, 0.16)),
    var(--surface-2);
}

@media (max-width: 680px) {
  .showcase-grid[data-cat="vg"] {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mid widths: three-up gets cramped — step to two-up, with the lone 5th card
   centered under the 2x2. */
@media (max-width: 900px) {
  .showcase-grid[data-cat="tcg"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .showcase-grid[data-cat="tcg"] .showcase-card,
  .showcase-grid[data-cat="tcg"] .showcase-card:nth-child(4) {
    grid-column: auto;
  }

  .showcase-grid[data-cat="tcg"] .showcase-card:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 7px);
  }
}

/* TCG landscape cells get small two-up on phones — drop to a single column
   so each card spread stays readable. */
@media (max-width: 620px) {
  .showcase-grid[data-cat="tcg"] {
    grid-template-columns: 1fr;
  }

  .showcase-grid[data-cat="tcg"] .showcase-card:nth-child(5) {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }
}

@media (max-width: 560px) {
  .showcase-grid[data-cat="ttl"] {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .showcase-grid[data-cat="vg"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .showcase-grid[data-cat="vg"] .showcase-card:last-child {
    grid-column: span 2;
  }
}

/* ── Lightbox ───────────────────────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8);
  cursor: default;
  pointer-events: none;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.6);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ── Sell/Trade page ────────────────────────────────────────────────────── */

.sell-hero {
  background:
    linear-gradient(120deg, rgba(217, 31, 56, 0.18), rgba(241, 200, 75, 0.14)),
    var(--ink);
}

.how-it-works {
  padding: clamp(42px, 6vw, 76px) var(--page-x);
  background: var(--surface);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(20px, 3vw, 32px);
}

.step {
  position: relative;
  padding: clamp(22px, 3vw, 32px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.step-number {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gold);
  margin-bottom: 8px;
  line-height: 1;
}

.step h3 {
  margin: 0 0 8px;
}

.step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.step .step-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

/* Secondary "for more, see [link]" line tucked at the bottom of a section.
   Inherits parent color so it works on both dark (.how-it-works) and light
   (.events-section) backgrounds. */
.section-followup {
  max-width: 720px;
  margin: clamp(24px, 4vw, 40px) auto 0;
  text-align: center;
  font-size: 0.92rem;
  opacity: 0.85;
}
.section-followup a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.section-followup a:hover {
  text-decoration-thickness: 2px;
}

@media (max-width: 760px) {
  .steps-grid { grid-template-columns: 1fr; }
}

.sell-tips .tips-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 12px;
}

.sell-tips .tips-list li {
  position: relative;
  padding: 14px 18px 14px 44px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.98rem;
}

.sell-tips .tips-list li::before {
  content: '✓';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-weight: 900;
  font-size: 1.05rem;
}

.sell-tips .tips-list strong {
  color: var(--paper);
}

.sell-cta {
  background:
    linear-gradient(90deg, rgba(217, 31, 56, 0.22), rgba(241, 200, 75, 0.16)),
    var(--surface-2);
}

/* ── FAQ page ────────────────────────────────────────────────────────────── */

.faq-hero {
  background:
    linear-gradient(120deg, rgba(49, 94, 203, 0.18), rgba(156, 31, 166, 0.14)),
    var(--ink);
}

.faq-section {
  padding: clamp(42px, 6vw, 76px) var(--page-x);
  max-width: 1160px;
  margin: 0 auto;
}

/* ── Legal / long-form prose (privacy policy etc.) ──────────────────────── */
.legal {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) var(--page-x) clamp(56px, 8vw, 96px);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.legal p {
  margin: 0 0 16px;
}

.legal .legal-meta {
  font-size: 0.85rem;
  color: var(--gold);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}

.legal h2 {
  margin: 36px 0 12px;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--paper);
  font-family: var(--font-display);
}

.legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal li {
  margin-bottom: 6px;
}

.legal strong {
  color: var(--paper);
}

.legal a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal a:hover {
  color: #ffd96a;
}

.faq-group-title {
  margin: 48px 0 18px;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--gold);
}

.faq-col > .faq-group-title:first-child {
  margin-top: 0;
}

.faq-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(28px, 4vw, 56px);
}

.faq-list {
  display: grid;
  gap: 10px;
}

@media (max-width: 820px) {
  .faq-columns { grid-template-columns: 1fr; gap: 0; }
  .faq-col + .faq-col .faq-group-title:first-child { margin-top: 48px; }
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.faq-item[open] {
  border-color: rgba(241, 200, 75, 0.4);
  background: var(--surface-2);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 56px 18px 22px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  position: relative;
  color: var(--paper);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(241, 200, 75, 0.15);
  color: var(--gold);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}

.faq-item[open] summary::after {
  content: '−';
  transform: translateY(-50%) rotate(180deg);
  background: rgba(241, 200, 75, 0.3);
}

.faq-item p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.65;
}

.faq-item p + p { padding-top: 0; }

.faq-list-inline {
  margin: 0;
  padding: 0 22px 6px 44px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.7;
}

.faq-list-inline li {
  margin-bottom: 4px;
}

.faq-list-inline strong {
  color: var(--paper);
}

.faq-item p a {
  color: var(--gold);
  font-weight: 700;
}

.faq-cta {
  background:
    linear-gradient(90deg, rgba(49, 94, 203, 0.2), rgba(156, 31, 166, 0.14)),
    var(--surface-2);
}

/* ── Konami easter egg: BULKY-TRIS ──────────────────────────────────────── */

.konami-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 30, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
  animation: kn-fade 0.25s var(--ease);
}

@keyframes kn-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.konami-modal {
  position: relative;
  padding: clamp(20px, 3vw, 36px);
  border: 3px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(160deg, #6e5fc8, #3d3290) padding-box,
    linear-gradient(135deg, var(--red), var(--gold), var(--blue)) border-box;
  box-shadow:
    0 30px 90px rgba(217, 31, 56, 0.5),
    0 0 100px rgba(241, 200, 75, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-family: var(--font-display);
}

.konami-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.konami-close:hover,
.konami-close:focus-visible {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.05);
}

.konami-titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 24px);
  margin-bottom: 20px;
}

.kn-bulky {
  width: clamp(56px, 9vw, 88px);
  height: auto;
  filter: drop-shadow(0 0 14px rgba(241, 200, 75, 0.45));
  animation: kn-bulky-bob 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

.kn-bulky--flip {
  transform: scaleX(-1);
  animation-delay: 0.8s;
}

@keyframes kn-bulky-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.kn-bulky--flip {
  animation-name: kn-bulky-bob-flip;
}

@keyframes kn-bulky-bob-flip {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50%      { transform: scaleX(-1) translateY(-6px); }
}

.konami-title {
  margin: 0;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  letter-spacing: 0.08em;
  text-align: center;
  background: linear-gradient(120deg, #ff5b75, #ffe07a, #6b9bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 32px rgba(241, 200, 75, 0.4);
  filter: drop-shadow(0 2px 8px rgba(217, 31, 56, 0.5));
}

.konami-sub {
  margin: 4px 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  color: #d7d3e8;
}

.konami-game {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
}

#kn-board {
  background: #1f2880;
  border: 3px solid rgba(241, 200, 75, 0.7);
  border-radius: 6px;
  image-rendering: pixelated;
  box-shadow:
    0 0 40px rgba(241, 200, 75, 0.4),
    inset 0 0 30px rgba(255, 255, 255, 0.08);
}

.konami-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 110px;
}

.konami-stat {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.konami-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d7d3e8;
  margin-bottom: 4px;
}

.konami-stat span {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffe07a;
  line-height: 1.1;
  text-shadow: 0 0 14px rgba(241, 200, 75, 0.5);
}

/* Combo counter: dim when idle, lights up red/gold during an active combo. */
.kn-stat-combo span { color: #8d89a3; text-shadow: none; transition: color 0.15s var(--ease); }
.kn-combo-live {
  background: rgba(217, 31, 56, 0.28);
  border-color: rgba(255, 91, 117, 0.7);
}
.kn-combo-live span { color: #ff5b75; text-shadow: 0 0 16px rgba(255, 91, 117, 0.7); }
.kn-combo-pulse { animation: kn-combo-pop 0.32s var(--ease); }

@keyframes kn-combo-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Back-to-Back badge under the combo number (a <small>, so the .konami-stat
   span rules above don't touch it). */
.kn-b2b-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: var(--ink);
  background: linear-gradient(120deg, #ffe07a, #ff5b75);
  box-shadow: 0 0 14px rgba(255, 91, 117, 0.6);
}
.kn-b2b-badge[hidden] { display: none; }

/* Personal-best tile: teal accent; pulses green when the run sets a new best. */
.kn-stat-best span { color: #9fe7c4; text-shadow: 0 0 12px rgba(74, 222, 128, 0.4); }
.kn-best-live { background: rgba(74, 222, 128, 0.18); border-color: rgba(74, 222, 128, 0.6); }
.kn-best-live span { color: #6ef0a8; text-shadow: 0 0 16px rgba(74, 222, 128, 0.65); }
.kn-pb { color: #6ef0a8; font-weight: 800; letter-spacing: 0.06em; }

/* Transient celebratory callout over the board (TETRIS / T-SPIN / B2B …). */
.kn-board-wrap { position: relative; display: flex; }

.kn-callout {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 4.4vw, 1.8rem);
  letter-spacing: 0.06em;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 0 18px rgba(241, 200, 75, 0.9), 0 2px 6px rgba(0, 0, 0, 0.85);
}
.kn-callout.show { animation: kn-callout 1s var(--ease) forwards; }

@keyframes kn-callout {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  30%  { transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(1); }
}

/* White flash + board shake on Tetris / T-spin clears. */
.kn-flash {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.kn-flash.show { animation: kn-board-flash 0.4s ease-out; }
@keyframes kn-board-flash { 0% { opacity: 0; } 12% { opacity: 0.5; } 100% { opacity: 0; } }

.kn-shake { animation: kn-shake 0.3s var(--ease); }
@keyframes kn-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(3px, 2px); }
}

/* Bulky cheers on a new high score (brand stamp, per the mascot rule). */
.kn-cheer {
  width: 84px;
  height: auto;
  margin: 0 auto 6px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
  animation: kn-cheer-bounce 0.9s var(--ease) infinite;
}
@keyframes kn-cheer-bounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}

/* Reduced motion: drop the juice animations, keep things readable/static. */
@media (prefers-reduced-motion: reduce) {
  .kn-shake { animation: none; }
  .kn-flash.show { animation: none; }
  .kn-combo-pulse { animation: none; }
  .kn-cheer { animation: none; }
  .kn-callout { transform: translate(-50%, -50%) scale(1); }
  .kn-callout.show { animation: kn-callout-fade 1s ease forwards; }
}
@keyframes kn-callout-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

#kn-next,
#kn-hold {
  background: #15132a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  display: block;
  margin-top: 6px;
}

.konami-controls {
  margin: 18px 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--muted);
  line-height: 1.8;
}

.konami-controls span {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--gold);
  font-weight: 700;
}

.kn-msg[hidden] { display: none; }

.kn-msg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 12px;
  text-align: center;
  padding: 24px;
}

.kn-msg h3 {
  font-size: 2rem;
  margin: 0 0 6px;
  background: linear-gradient(120deg, #ff5b75, #ffe07a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.1em;
  text-align: center;
}

.kn-newhi {
  font-size: 1.8rem !important;
  animation: kn-pulse 1.2s ease-in-out infinite;
  text-shadow: 0 0 32px rgba(241, 200, 75, 0.5);
}

@keyframes kn-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.kn-msg p {
  color: var(--paper);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.kn-final { margin-bottom: 14px; color: #d7d3e8; }
.kn-final strong { color: #ffe07a; font-size: 1.15em; }

.kn-loading {
  margin-top: 14px;
  color: #d7d3e8;
  font-size: 0.84rem;
  opacity: 0.7;
  letter-spacing: 0.1em;
}

.kn-error { color: #ff8090; margin-top: 12px; }
.kn-tip { color: var(--muted); font-size: 0.74rem; letter-spacing: 0.06em; margin-top: 14px; }

/* ── Level select grid ───────────────────────────────────────────────── */
.kn-levels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 260px;
  margin: 16px 0 2px;
}

.kn-lvl {
  padding: 12px 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffe07a;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}

.kn-lvl:hover {
  background: rgba(241, 200, 75, 0.18);
  border-color: rgba(241, 200, 75, 0.7);
  transform: translateY(-1px);
}

.kn-lvl--sel {
  background: var(--gold);
  border-color: #fff;
  color: var(--ink);
}

/* ── Initials form ───────────────────────────────────────────────────── */
.kn-initials-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.kn-initials-form label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d7d3e8;
}

.kn-initials-form input {
  width: 170px;
  padding: 14px 18px;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid var(--gold);
  border-radius: 8px;
  color: #ffe07a;
  text-transform: uppercase;
  outline: none;
  caret-color: var(--gold);
}

.kn-initials-form input:focus {
  border-color: white;
  box-shadow: 0 0 18px rgba(241, 200, 75, 0.55);
}

.kn-initials-error {
  margin: 0 !important;
  color: #ff6680 !important;
  font-size: 0.82rem !important;
}

.kn-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.kn-btn {
  padding: 10px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s var(--ease);
}

.kn-btn--primary {
  background: var(--gold);
  color: var(--ink);
}

.kn-btn--primary:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-1px);
}

.kn-btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.kn-btn--skip {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: #d7d3e8;
}

.kn-btn--skip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.konami-actions {
  margin: 12px 0 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kn-btn--board {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

.kn-btn--board:hover {
  background: rgba(241, 200, 75, 0.15);
  border-color: #fff;
  color: #fff;
  transform: translateY(-1px);
}

.kn-btn--sound {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: #d7d3e8;
}

.kn-btn--sound:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.kn-btn--sound[aria-pressed="false"] { color: #8d89a3; }

.kn-btn--cb,
.kn-btn--music {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: #d7d3e8;
}
.kn-btn--cb:hover,
.kn-btn--music:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.kn-btn--cb[aria-pressed="false"],
.kn-btn--music[aria-pressed="false"] { color: #8d89a3; }

/* ── On-screen touch controls (shown on touch / coarse pointers) ──────── */
.kn-touch {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px auto 0;
  max-width: 280px;
}

.kn-tbtn {
  padding: 14px 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffe07a;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.kn-tbtn:active {
  background: rgba(241, 200, 75, 0.3);
  border-color: var(--gold);
  transform: translateY(1px);
}

.kn-tbtn--wide {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

@media (pointer: coarse) {
  .kn-touch { display: grid; }
  .konami-controls { display: none; }
}

/* ── Leaderboard table ───────────────────────────────────────────────── */
.kn-leaderboard {
  width: 100%;
  max-width: 320px;
  margin: 12px 0 0;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: 0.92rem;
}

.kn-leaderboard th {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b8b3d4;
  font-weight: 600;
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.kn-leaderboard th:last-child { text-align: right; }

.kn-leaderboard td {
  padding: 7px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--paper);
}

.kn-leaderboard tr:first-child td { border-top: none; }

.kn-rank {
  color: var(--gold);
  font-weight: 700;
  width: 32px;
}

.kn-leaderboard tr:nth-child(1) .kn-rank { color: #ffe07a; font-size: 1.05em; }
.kn-leaderboard tr:nth-child(2) .kn-rank { color: #d8d4e0; }
.kn-leaderboard tr:nth-child(3) .kn-rank { color: #c0894d; }

.kn-name {
  font-weight: 700;
  letter-spacing: 0.18em;
}

.kn-score {
  text-align: right;
  color: var(--paper);
  font-weight: 700;
}

/* Leaderboard Level / Lines columns (right-aligned, slightly dimmer). */
.kn-leaderboard th:nth-child(n+3),
.kn-leaderboard td:nth-child(n+3) { text-align: right; }
.kn-lvcol, .kn-lncol { color: #c7c3dc; font-size: 0.9em; }
.kn-leaderboard th, .kn-leaderboard td { padding-left: 7px; padding-right: 7px; }

.kn-just-added {
  background: rgba(241, 200, 75, 0.18);
  animation: kn-flash 1.2s ease-in-out;
}

@keyframes kn-flash {
  0%, 100% { background: rgba(241, 200, 75, 0.18); }
  50%      { background: rgba(241, 200, 75, 0.45); }
}

.kn-empty {
  text-align: center;
  color: var(--muted);
  padding: 18px;
  font-style: italic;
}

@media (max-width: 560px) {
  .konami-modal { padding: 16px 14px; }
  .konami-titlebar { margin-bottom: 12px; }
  .konami-game {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  /* Scale the board by height so the touch pad stays on-screen below it */
  #kn-board { height: min(44vh, 460px); width: auto; max-width: 100%; }
  .konami-side {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    width: 100%;
    gap: 8px;
  }
  .konami-stat { flex: 1 1 calc(33% - 8px); min-width: 70px; padding: 8px 10px; }
  .konami-stat span { font-size: 1.2rem; }
  #kn-next, #kn-hold { width: 56px; height: 56px; }
  .kn-touch { margin-top: 12px; }
}