/* Hand-maintained styles layered on top of the generated vault.css. */

/* Kill horizontal scroll on mobile: the 3D-tilted hero card projects past the
   viewport. clip stops the scroll without breaking the sticky header; on small
   screens we flatten the card (the tilt is a desktop pointer effect anyway). */
html, body { overflow-x: clip; max-width: 100%; }
@media (max-width: 920px) {
  .stage { max-width: 100%; overflow: clip; }
  .card3d { transform: none !important; }
}

/* "Coming soon" game status (vs green "Live at launch") + dimmed soon-chip */
.gcard .st.soon { color: var(--gold, #d4af6a); }
.gchip-soon { opacity: .68; }

/* Official game logos as white tiles on the dark cards */
.gcard .gmark { width: auto; height: auto; background: transparent; border-radius: 0; margin: 0 auto 16px; display: flex; justify-content: center; }
.gcard .gmark img { height: 56px; width: auto; max-width: 180px; object-fit: contain; border-radius: 10px; }
.next span { border: 0; padding: 0; background: transparent; }
.next span img { height: 30px; width: auto; object-fit: contain; border-radius: 6px; opacity: .92; }

/* Real brand logo: faceted "M" mark + wordmark (Mint gradient, Cards ink) */
.brand-mark { display: block; height: 34px; width: auto; }
footer .brand-mark { height: 30px; }
.brand .word { font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 21px; letter-spacing: .2px; color: var(--ink, #f4f7fb); }

/* A11y: never leave reveal sections hidden without JS, and global focus ring */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--cyan, #00d4ff); outline-offset: 2px; }


/* Legal / support reading pages */
.prose { color: var(--ink, #f4f7fb); font-size: 1.02rem; }
.prose h1 { font-family: "Cormorant Garamond", Georgia, serif; }
.prose h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.7rem; line-height: 1.2; margin: 1.7em 0 .5em; color: var(--ink, #f4f7fb); }
.prose h3 { font-size: 1.12rem; margin: 1.4em 0 .4em; color: var(--ink, #f4f7fb); }
.prose p, .prose li { color: #c7d2e3; }
.prose a { color: var(--cyan, #00d4ff); }
.prose ul { padding-left: 1.2em; }
.prose li { margin: .3em 0; }
.prose strong { color: var(--ink, #f4f7fb); }
.legal-updated { color: #9eabc2; font-size: .9rem; margin-bottom: 1.6em; }

/* Waitlist form layout: stack rows, keep input+button inline */
.waitform { display: block !important; }
.waitform .wait-row { display: flex; gap: 10px; flex-wrap: wrap; }
.waitform .wait-row input { flex: 1 1 220px; }
.ctaband .waitform .wait-row { justify-content: center; }

/* Waitlist consent + states (progressive enhancement) */
.waitform .consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: .82rem; color: #9eabc2; text-align: left; }
.waitform .consent input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; }
.waitform .consent a { color: var(--cyan, #00d4ff); }
.waitform.is-success { text-align: center; }
.wait-success { display: none; }
.waitform.is-success .wait-success { display: block; color: var(--ink, #f4f7fb); }
.waitform.is-success .wait-row, .waitform.is-success .consent { display: none; }