/* Shared with CDRDesignSystem.swift: Matte Studio surfaces and controls.
   Campaign typography and artwork remain the site's editorial layer. */
:root {
  --radius-control: 14px;
  --radius-surface: 24px;
  --radius-pill: 999px;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --matte-ground: #0b0d0f;
  --matte-panel: #15181b;
  --matte-edge: #30363b;
  --matte-control: #252b2f;
  --matte-selection: #f4f3ee;
  --surface-edge: #d3cec4;
}

/* Actions share the game's quiet, rounded silhouette and readable labels. */
.button, .nav-cta, .menu-toggle, .press-download-button, .asset-actions a {
  min-block-size: 44px;
  border-radius: var(--radius-pill);
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.button { min-block-size: 50px; padding: 14px 22px; border-color: var(--surface-edge); }
.button--primary { border-color: transparent; }
.button--ink, .nav-cta, .press-download-button { background: var(--matte-panel); border-color: var(--matte-panel); }
.button--quiet { background: var(--paper-light); }
.button:hover, .nav-cta:hover, .button--ink:hover { translate: none; box-shadow: none; }
.button:active, .nav-cta:active, .press-download-button:active, .asset-actions a:active { transform: scale(.98); }
.menu-toggle { padding: 11px 17px; border-color: var(--surface-edge); }
.asset-actions a { display: inline-flex; align-items: center; padding: 10px 16px; border-color: var(--surface-edge); }
.press-download-button { justify-content: space-between; }
.primary-nav { font-family: var(--ui-font); font-size: 13px; text-transform: none; gap: 8px; }
.primary-nav > a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; padding: 10px 15px; border-radius: var(--radius-pill); }
.primary-nav > a:not(.nav-cta) { border: 0; }
.primary-nav > a[aria-current="page"] { background: var(--paper-deep); }
.status-chip { inline-size: fit-content; padding: 7px 10px; border: 1px solid var(--surface-edge); border-radius: var(--radius-pill); font-size: .52rem; white-space: nowrap; }
.status-chip span { border-radius: 50%; }
.coming-state, .contact-pending { border-radius: var(--radius-pill); border-color: var(--surface-edge); }
.skip-link { border-radius: var(--radius-control); }

/* One perimeter owns the surface, image and caption corners. */
.hero-art, .gameplay-figure, .asset-card, .circuit-frame {
  border-radius: var(--radius-surface);
  overflow: hidden;
}
.hero-art, .asset-card { border-color: var(--surface-edge); }
.gameplay-figure, .circuit-frame { border-color: var(--matte-edge); }
.feature-grid { gap: 16px; border: 0; }
.feature-grid article, .feature-grid article:nth-child(even) {
  padding: 28px;
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius-surface);
  background: var(--paper-light);
}
.feature-grid h3 { margin-block-start: 40px; }
.creator-grid { gap: 16px; border: 0; }
.creator-grid article, .creator-grid article:first-child, .creator-grid article + article,
.controls-grid article:nth-child(odd), .controls-grid article:nth-child(n + 3) {
  padding: 28px;
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius-surface);
  background: var(--paper-light);
}
.section-dark .creator-grid article { background: var(--matte-panel); border-color: var(--matte-edge); }
.section-paper .creator-grid .feature-index { color: var(--muted); }
.platform-panel { border: 1px solid var(--surface-edge); border-radius: var(--radius-surface); padding-inline: clamp(20px, 3vw, 42px); background: var(--paper-light); }
.platform-body, .platform-icon-wrap, .development-row, .development-row:first-child { border-color: var(--surface-edge); }
.callout-panel, .copy-card, .service-request-form, .request-unavailable,
.press-download-bar, .policy-footer, .choices-grid article, .no-results {
  border-radius: var(--radius-surface);
  border-color: var(--surface-edge);
}
.choices-grid { gap: 16px; }
.asset-guidance { border-radius: var(--radius-surface); }
.asset-meta { border-color: var(--surface-edge); }

/* FAQ and support are grouped controls, with quiet internal dividers. */
.faq-list, .support-list, .next-links {
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius-surface);
  background: var(--paper-light);
}
.faq-item, .support-topic { margin-inline: 22px; border-color: var(--surface-edge); }
.faq-item:last-child, .support-topic:last-child { border-block-end: 0; }
.faq-item summary, .support-topic summary { font-family: var(--ui-font); font-size: 16px; font-weight: 600; border-radius: var(--radius-control); }
.faq-item summary span, .support-topic summary span { flex: 0 0 28px; display: grid; place-items: center; block-size: 28px; border-radius: 50%; background: var(--paper-deep); }
.faq-item summary:focus-visible, .support-topic summary:focus-visible { outline-offset: 3px; }
.next-links { gap: 8px; padding: 8px; }
.next-links a, .next-links a + a { border: 0; border-radius: 18px; font: 600 15px/1.4 var(--ui-font); text-transform: none; }
.field-group input, .faq-search input, .form-field input, .form-field select, .form-field textarea {
  border-radius: var(--radius-control);
  border-color: var(--surface-edge);
  font-family: var(--ui-font);
  font-size: 16px;
  transition: border-color .18s ease, background-color .18s ease;
}
.form-message:not(:empty) { border-radius: var(--radius-control); border-color: var(--surface-edge); }

/* Circuit choices follow the warm-white selected controls in the game. */
.circuit-chapter { background: var(--matte-ground); }
.circuit-frame { background: var(--matte-panel); }
.circuit-frame-head, .circuit-panels { border-color: var(--matte-edge); }
.circuit-options { padding: 10px; gap: 8px; background: var(--matte-panel); }
.circuit-option, .circuit-option:last-child {
  padding: 16px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  transition: background-color .18s ease, color .18s ease;
}
.circuit-option strong { font-family: var(--ui-font); font-size: 14px; font-weight: 600; line-height: 1.25; }
.circuit-option small { font-family: var(--ui-font); }
.circuit-option.is-selected { background: var(--matte-selection); border-color: transparent; color: var(--ink); }
.circuit-option.is-selected strong, .circuit-option.is-selected .circuit-option-number,
.circuit-option.is-selected .circuit-option-arrow { color: var(--ink); }
.circuit-option.is-selected small { color: #525b60; }
.circuit-option:hover:not(.is-selected) { background: var(--matte-control); }
.circuit-option:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.circuit-map-panel { background: var(--matte-panel); border-color: var(--matte-edge); }
.circuit-map-close, .film-close { border-radius: var(--radius-pill); background: var(--matte-control); border-color: #485158; }
.circuit-map-zoom, .circuit-map-overlay { border-radius: var(--radius-control); }
.circuit-availability, .circuit-summary { border-radius: var(--radius-control); }

/* The film uses the same panel and dismiss-control geometry. */
.film-dialog { border: 1px solid var(--matte-edge); border-radius: var(--radius-surface); background: var(--matte-panel); }
.film-dialog-panel { border-block-start: 0; }
.film-callout { padding: 12px; border: 1px solid var(--surface-edge); border-radius: var(--radius-surface); background: var(--paper); transition: background-color .18s ease; }
.film-callout-copy strong { font-family: var(--ui-font); font-size: 15px; }
.film-callout:hover .film-callout-icon img { transform: none; }
.film-callout:hover strong { text-decoration: none; }
.film-play { border-color: var(--paper); }

@media (hover: hover) {
  .button--primary:hover { background: #e8f64a; }
  .button--ink:hover, .nav-cta:hover, .press-download-button:hover { background: var(--matte-control); }
  .button--quiet:hover, .asset-actions a:hover, .primary-nav > a:not(.nav-cta):hover, .next-links a:hover { background: var(--paper-deep); }
  .film-callout:hover { background: var(--paper-deep); }
}
@media (max-width: 820px) {
  .primary-nav { inset: 78px 16px auto; gap: 4px; padding: 10px; border: 1px solid var(--surface-edge); border-radius: var(--radius-surface); box-shadow: 0 16px 38px #15171914; }
  .primary-nav > a { justify-content: flex-start; padding-inline: 16px; border: 0; }
  .primary-nav > .nav-cta { justify-content: center; margin-block-start: 4px; }
  .feature-grid article, .feature-grid article:nth-child(even),
  .creator-grid article, .creator-grid article:first-child, .creator-grid article + article,
  .controls-grid article:nth-child(odd), .controls-grid article:nth-child(n + 3) { padding: 24px; }
}
@media (max-width: 700px) {
  .circuit-options { padding: 10px; gap: 8px; border-color: var(--matte-edge); }
  .circuit-option, .circuit-option:last-child { flex-basis: 145px; padding: 13px 12px; border: 1px solid transparent; }
  .circuit-option.is-selected { border-color: transparent; }
  .circuit-option strong { font-size: 14px; }
}
@media (max-width: 560px) {
  .hero-meta { gap: 8px; }
  .hero-meta .eyebrow { max-inline-size: 150px; }
  .status-chip { font-size: 8px; padding: 6px 8px; }
  .faq-item, .support-topic { margin-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .nav-cta, .menu-toggle, .press-download-button, .asset-actions a,
  .circuit-option, .film-callout, .field-group input, .faq-search input,
  .form-field input, .form-field select, .form-field textarea { transition: none; }
  .button:active, .nav-cta:active, .press-download-button:active, .asset-actions a:active { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --surface-edge: #777b77; --matte-edge: #69737a; }
}

/* Current press media: a lead garage view, then paired captures. */
.press-media-intro { max-inline-size: 640px; margin-block: 20px 36px; }
.press-media-grid { gap: 28px; }
.press-media-card:first-child { grid-column: 1 / -1; }
.press-media-card .asset-preview { min-block-size: 0; padding: 0; background: var(--matte-ground); }
.press-media-card .asset-preview img { display: block; max-block-size: none; }
.press-media-card .asset-meta { align-items: start; flex-direction: column; padding: 24px; }
.press-media-card h3 { font: 600 clamp(20px, 2vw, 28px)/1.2 var(--ui-font); text-transform: none; }
.press-media-caption { margin-block: 10px 0; font: 15px/1.5 var(--ui-font); color: var(--muted); }
.press-media-card .asset-actions { margin-block-start: 6px; }
@media (max-width: 820px) {
  .press-media-grid { grid-template-columns: 1fr; gap: 22px; }
  .press-media-card .asset-meta { padding: 20px; }
}

/* Native disclosure for in-page game chapters, shared by every route. */
.nav-game { position: relative; }
.nav-game > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 10px 15px; min-height: 44px; border-radius: 999px; }
.nav-game > summary::-webkit-details-marker { display: none; }
.nav-game > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.nav-game[open] > summary { background: var(--paper-deep); }
.nav-game[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.nav-game-links { position: absolute; top: calc(100% + 12px); left: -10px; width: 285px; max-height: calc(100svh - 115px); overflow-y: auto; padding: 10px; border: 1px solid var(--surface-edge); border-radius: 22px; background: var(--paper-light); box-shadow: 0 20px 55px #15171924; }
.nav-game-links a { display: grid; gap: 4px; padding: 11px 14px; border-radius: 12px; color: var(--ink); font: 600 14px/1.3 var(--ui-font); }
.nav-game-links a span { font-size: 11px; font-weight: 400; color: #606760; }
.nav-game-links a:hover, .nav-game-links a:focus-visible { background: var(--paper-deep); }
.nav-game > summary:focus-visible, .nav-game-links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 820px) {
 .primary-nav { max-height: calc(100svh - 96px); overflow-y: auto; }
 .nav-game { width: 100%; }
 .nav-game > summary { padding-inline: 16px; justify-content: space-between; }
 .nav-game-links { position: static; width: auto; max-height: none; margin: 6px 4px 10px; padding: 4px; border: 0; box-shadow: none; background: var(--paper-deep); border-radius: 16px; }
 .nav-game-links a { padding: 11px 14px; min-height: 44px; }
}

.nav-game-links a { border: 0; }
@media (max-width: 820px) { .nav-game-links a span { display: none; } }

/* Support should read as help, with a quiet contact surface. */
.support-contact.callout-panel { background: var(--paper-light); padding: clamp(24px, 4vw, 40px); }
.support-contact.callout-panel h2 { margin: 0 0 16px; font: 600 clamp(24px, 2.4vw, 32px)/1.2 var(--ui-font); letter-spacing: -.025em; }
.support-contact .contact-large { margin-block: 0 14px; font: 500 clamp(16px, 1.6vw, 20px)/1.5 var(--ui-font); }
.support-contact > p:last-child { max-inline-size: 68ch; color: var(--muted); font-size: 16px; line-height: 1.6; }

.support-contact.callout-panel { margin-block-end: clamp(32px, 4vw, 56px); }
.support-contact .contact-pending { border: 0; padding: 0; font-size: 16px; text-transform: none; letter-spacing: 0; }