/* Adapted from the existing V8 centered card, overlapping media and viewport grid. */
:root {
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  color: #f3efdf;
  background: #081511;
  color-scheme: dark;
  font-synthesis: none;
  --gold: #ddbd7a;
  --ink: #10211c;
}
* { box-sizing: border-box; }
html, body, #root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--gold); color: var(--ink); }
.stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  overflow: hidden;
}
.environment { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.environment-art {
  position: absolute; inset: -3%; width: 106%; height: 106%;
  background: var(--world-art) center / cover no-repeat;
  filter: blur(1px);
  transform-origin: center;
  animation: background-matte 18s ease-in-out infinite alternate;
  will-change: transform;
}
.environment-grade { position: absolute; inset: 0; background: radial-gradient(ellipse min(460px, 48vw) 190px at min(160px, 16vw) 45px, #05110f 32%, #05110fbb 62%, transparent), linear-gradient(#06131022, #07120d35), radial-gradient(ellipse at center, transparent 30%, #020a0966); }
.cloud-light { position: absolute; inset: 0; opacity: .4; background: radial-gradient(ellipse at 48% 9%, #c1ddce18, transparent 65%); animation: cloud-light 23s ease-in-out infinite alternate; }
.cloud-bank { position: absolute; top: 10%; left: 10%; width: 80%; height: 45%; background: radial-gradient(ellipse at 50% 40%, #cddbc915, transparent 65%); animation: cloud-drift 38s ease-in-out infinite alternate; }
.valley-mist { position: absolute; top: 58%; width: 55%; height: 24%; opacity: .16; background: radial-gradient(ellipse, #becfc344, transparent 70%); mask-image: linear-gradient(transparent, #000 25%, #000 70%, transparent); animation: background-fog 32s ease-in-out infinite alternate; }
.mist-left { left: -20%; }
.mist-right { right: -20%; opacity: .12; animation-delay: -16s; animation-duration: 38s; animation-direction: alternate-reverse; }
.foreground-shade { position: absolute; inset: 0; background: linear-gradient(0deg, #030c095c, transparent 35%); }
.page-logo { position: absolute; z-index: 5; top: max(24px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); width: clamp(170px, 15vw, 260px); margin: 0; line-height: 0; pointer-events: none; mix-blend-mode: screen; }
.page-logo img { display: block; width: 100%; height: auto; filter: invert(1) hue-rotate(180deg) brightness(1.4) contrast(1.5); }

/* Independent copy occupies only the available space outside the unchanged card. */
.marketing-hook {
  --hook-inset: clamp(24px, 3.2vw, 64px);
  --hook-card-width: min(820px, calc((100dvh - 184px) / .9624));
  position: absolute; z-index: 3; top: 50%; left: var(--hook-inset);
  width: min(480px, max(0px, calc((100vw - var(--hook-card-width)) / 2 - var(--hook-inset) - 36px)));
  transform: translateY(-50%); container-type: inline-size;
  color: #f7f0e1; text-shadow: 0 2px 12px #000a, 0 0 28px #0006;
  pointer-events: none;
}
.hook-eyebrow { margin: 0 0 16px; color: #ddbd7a; font-size: clamp(10px, 3cqw, 14px); font-weight: 600; line-height: 1.4; letter-spacing: .22em; }
.hook-headline { margin: 0; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; font-size: clamp(28px, 16.5cqw, 76px); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; }
.hook-headline span { display: block; white-space: nowrap; }
.hook-headline .hook-gold { color: #ddbd7a; }
.hook-support { max-width: 29ch; margin: 22px 0 0; color: #ede8db; font-size: clamp(12px, 3.8cqw, 18px); line-height: 1.6; }
@container (max-width: 210px) {
  .marketing-hook-content { display: none; }
}
@media (min-width: 601px) and (max-width: 1000px) and (min-height: 850px) {
  .marketing-hook { --hook-card-width: min(620px, calc((100dvh - 390px) / .9624)); }
}
@media (max-height: 550px) {
  .marketing-hook { --hook-card-width: calc(100dvh - 132px); }
  .hook-headline { font-size: clamp(24px, 14cqw, 46px); }
  .hook-eyebrow { margin-bottom: 10px; }
  .hook-support { margin-top: 14px; font-size: 12px; }
}
@media (max-width: 600px), (max-height: 330px) {
  .marketing-hook { display: none; }
}
/* Mobile copy fits only when the existing logo-to-card gap can contain it. */
@media (max-width: 600px) and (min-height: calc(112vw + 380px)) {
  .marketing-hook {
    display: block; left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); width: auto;
    top: calc(max(14px, env(safe-area-inset-top)) + clamp(132px, 36vw, 156px) * 813 / 2100 + 12px);
    transform: none; text-align: center;
  }
  .hook-eyebrow { margin: 0 0 4px; font-size: 8px; line-height: 1.2; letter-spacing: .2em; }
  .hook-headline { font-size: clamp(20px, 6vw, 26px); line-height: 1.1; letter-spacing: -.025em; white-space: nowrap; }
  .hook-headline span { display: inline; }
  .hook-support { max-width: none; margin: 6px 0 0; font-size: 11px; line-height: 1.4; }
}

/* Keep the original intrinsic card size; media and CTA are independent overlays. */
.poster {
  --cta-height: 54px; --offer-gap: 12px; --disclosure-size: 9px; --offer-inset: 24px;
  --card-stroke-x: 1px; --card-stroke-y: 1px;
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
  container-type: inline-size;
  width: min(820px, 100%, calc((100dvh - 184px) / .9624));
  overflow: hidden;
  border: 1px solid #d6c59a38;
  border-radius: clamp(18px, 2.2vw, 28px);
  background: linear-gradient(#071b1680, #0a1917a0), var(--world-art) center / cover;
  box-shadow: 0 28px 90px #010908b3, 0 5px 24px #01080766, inset 0 1px 0 #e8d8b010;
}
.poster:before { content: ''; grid-area: 1 / 1; aspect-ratio: 1 / .54; pointer-events: none; }
.poster:after { content: ''; grid-area: 3 / 1; aspect-ratio: 1 / .4224; pointer-events: none; }
.card-hero {
  position: absolute; z-index: 2; isolation: isolate;
  top: calc(-1 * var(--card-stroke-y)); left: calc(-1 * var(--card-stroke-x)); right: calc(-1 * var(--card-stroke-x));
  height: calc(50% + var(--card-stroke-y)); overflow: visible;
  pointer-events: none;
}
.hero-blend {
  /* 107% of the hero half ends at 53.5% of the card. The alpha fade starts
     at 46.5%, making a 7% card-height blend without resizing either half. */
  position: absolute; inset: 0 0 -7%; overflow: hidden; pointer-events: none;
  mask-image: linear-gradient(#000 86.916%, #000f 90%, #000d 93.46%, #0008 96%, transparent 100%), radial-gradient(ellipse 48% 4% at 28% 97%, #0002, transparent 80%), radial-gradient(ellipse 35% 3% at 78% 96%, #0002, transparent 80%);
  mask-composite: add;
}
.portraits { position: absolute; z-index: 2; top: clamp(12px, 1.5cqw, 16px); left: -35%; width: 170%; aspect-ratio: 1200 / 628; pointer-events: none; }
.hero-artwork {
  display: block; width: 100%; height: auto;
  /* Preserve both faces and restored hands; only the flattened lower edge fades. */
  mask-image: linear-gradient(#000 76%, transparent 80%), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20628%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2212%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22white%22%20filter%3D%22url%28%23f%29%22%20d%3D%22M-200-200H1400V425C1180%20455%201080%20430%20950%20448S760%20472%20650%20458S555%20483%20475%20488S350%20454%20265%20458S100%20430-200%20448Z%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-composite: intersect;
  animation: hero-float 14s ease-in-out infinite;
}
.gameplay {
  /* Exactly the lower half of the outer card, including its decorative border. */
  position: absolute; z-index: 1; top: 50%;
  left: calc(-1 * var(--card-stroke-x)); right: calc(-1 * var(--card-stroke-x)); bottom: calc(-1 * var(--card-stroke-y));
  isolation: isolate; overflow: hidden; pointer-events: none;
}
.video-surface {
  position: absolute; inset: 0; overflow: hidden;
  /* The video stays inside its lower half; the hero's narrow alpha tail
     overlaps it. Finish this short fade before that tail becomes transparent. */
  mask-image: linear-gradient(transparent, #0009 1.5%, #000 4%), radial-gradient(ellipse 36% 3% at 28% 2%, #0005, transparent 80%), radial-gradient(ellipse 28% 3% at 79% 2%, #0003, transparent 80%);
  mask-composite: add;
}
.video-fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 62%; pointer-events: none; }
.video-extension {
  position: absolute; z-index: 0; inset: -64px; width: calc(100% + 128px); height: calc(100% + 128px);
  display: block; object-fit: cover; filter: blur(22px) brightness(.72); opacity: 0; pointer-events: none;
}
.video-foreground {
  position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: 50% 50%; border: 0; opacity: 0; pointer-events: none;
  /* Match the contained 1920x1080 frame exactly. Only its encoded black bars
     become transparent; the complete horizontal action remains in view. */
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201920%201080%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22v%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%22.08%22%20stop-color%3D%22white%22%2F%3E%3Cstop%20offset%3D%22.92%22%20stop-color%3D%22white%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22h%22%3E%3Cstop%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%22.04%22%20stop-color%3D%22white%22%2F%3E%3Cstop%20offset%3D%22.96%22%20stop-color%3D%22white%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D%22s%22%3E%3Crect%20y%3D%22118%22%20width%3D%221920%22%20height%3D%22844%22%20fill%3D%22url%28%23h%29%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Crect%20y%3D%22118%22%20width%3D%221920%22%20height%3D%22844%22%20fill%3D%22url%28%23v%29%22%20mask%3D%22url%28%23s%29%22%2F%3E%3C%2Fsvg%3E");
  mask-size: 100% 100%; mask-repeat: no-repeat;
}
.is-playing .video-foreground, .is-playing .video-extension { opacity: 1; }
.is-playing .video-fallback { opacity: 0; }
.media-mist { position: absolute; z-index: 3; left: -5%; right: -5%; top: 47.5%; height: 5%; opacity: .45; background: radial-gradient(ellipse at 22% 48%, #9bbdb032, transparent 70%), radial-gradient(ellipse at 80% 68%, #adc4b32a, transparent 72%), radial-gradient(ellipse at 52% 74%, #d5d8bf16, transparent 76%); mask-image: linear-gradient(transparent, #000 23%, #000 68%, transparent); pointer-events: none; animation: scene-mist 21s ease-in-out infinite alternate; }
.card-info { position: static; grid-area: 2 / 1; z-index: 4; display: flex; flex-direction: column; align-items: center; padding: 14px 24px 24px; text-align: center; background: transparent; pointer-events: none; }
/* Preserve the old row's intrinsic height without letting it position the CTA. */
.card-info:after { content: ''; flex: none; height: calc(var(--cta-height) + var(--offer-gap) + var(--disclosure-size) * 1.35); }
.card-info:before { content: ''; position: absolute; z-index: 3; top: 50%; left: 8%; width: 84%; height: calc(var(--cta-height) + 44px); transform: translateY(-50%); background: radial-gradient(ellipse closest-side, #04140f66, #04140f18 65%, transparent); pointer-events: none; }
.offer { position: absolute; z-index: 4; top: 50%; left: 0; right: 0; transform: translateY(-50%); padding-inline: var(--offer-inset); isolation: isolate; display: flex; flex-direction: column; align-items: center; }
@property --cta-heat { syntax: '<number>'; inherits: true; initial-value: 0; }
.offer:before { content: ''; position: absolute; z-index: -1; inset: -22px 13% -16px; opacity: .5; background: radial-gradient(ellipse at center, #ffc65f70, #e984352d 48%, transparent 74%); animation: golden-aura 2.3s ease-in-out infinite; pointer-events: none; }
.cta {
  position: relative; pointer-events: auto; cursor: pointer;
  display: grid; grid-template-columns: 1fr 24px; align-items: center;
  width: min(350px, 87%); min-height: 54px; padding: 0 18px 0 36px;
  overflow: visible; border: 1px solid #ffe2a0; border-radius: 6px;
  color: #10221a; background: linear-gradient(135deg, #ffe3a0, #e1b45e 58%, #cca04e);
  text-decoration: none;
  scale: calc(1 + .045 * var(--cta-heat));
  box-shadow: inset 0 1px 0 #fff4cd, inset 0 -2px 0 #9d6a2d,
    0 0 0 1px #dc963e99, 0 5px 14px #783d2a55,
    0 0 18px rgb(255 203 91 / calc(.28 + .32 * var(--cta-heat))),
    0 0 36px rgb(255 157 49 / calc(.18 + .25 * var(--cta-heat))),
    0 0 64px rgb(237 108 28 / calc(.08 + .12 * var(--cta-heat)));
  animation: cta-pulse 2.3s ease-in-out infinite;
  transition: translate .22s ease, scale .22s ease, box-shadow .22s ease;
}
.cta:before {
  content: ''; position: absolute; z-index: 0; inset: -5px; padding: 4px; border-radius: 10px;
  background: conic-gradient(from 35deg, #ffb43c22, #ffe7a5 12%, #e9882633 22%, transparent 32%, #ffc25b 43%, #fff0b9 50%, #e98b2522 61%, transparent 72%, #ffad39 87%, #ffda7b 94%, #ffb43c22);
  background-size: 180% 180%;
  background-position: calc(40% + 25% * var(--cta-heat)) calc(60% - 20% * var(--cta-heat));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: calc(.5 + .4 * var(--cta-heat)); filter: blur(.8px); pointer-events: none;
}
.cta:after {
  content: ''; position: absolute; z-index: 0; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 43%, #fff0bda8 50%, transparent 57%);
  background-size: 280% 100%; background-position: 180% 0;
  clip-path: inset(0 round 6px); animation: cta-sweep 4s ease-in-out infinite; pointer-events: none;
}
.cta-label { position: relative; z-index: 1; font-size: 17px; font-weight: 800; letter-spacing: 2px; text-align: center; }
.cta-arrow { position: relative; z-index: 1; font-size: 23px; text-align: right; }
.disclosure { position: absolute; z-index: 4; top: calc(50% + var(--cta-height) / 2 + var(--offer-gap)); left: 0; right: 0; margin: 0; color: #e0e5d6; font-size: 9px; line-height: 1.35; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { translate: 0 -2px; scale: 1.06; box-shadow: inset 0 1px 0 #fff7dc, inset 0 -2px 0 #a57430, 0 0 0 1px #ffe6a4, 0 7px 18px #8d471e66, 0 0 24px #ffd76bab, 0 0 46px #ffad4b88, 0 0 76px #f18c3540; }
}
.cta:focus-visible { outline: 3px solid #fff6dc; outline-offset: 6px; }
.cta:active { translate: 0; scale: .99; }
@keyframes cta-pulse { 0%, 100% { --cta-heat: 0; } 50% { --cta-heat: 1; } }
@keyframes golden-aura { 0%, 100% { opacity: .35; scale: .98; } 50% { opacity: .75; scale: 1.055; } }
@keyframes cta-sweep {
  0%, 68% { background-position: 180% 0; opacity: 0; }
  73% { opacity: .7; }
  91% { background-position: -80% 0; opacity: .7; }
  96%, 100% { background-position: -80% 0; opacity: 0; }
}
@keyframes hero-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes scene-mist { from { translate: -1% 1%; } to { translate: 2% -1%; } }
@keyframes background-matte { from { transform: translate3d(-.35%, .2%, 0) scale(1); } to { transform: translate3d(.35%, -.2%, 0) scale(1.04); } }
@keyframes background-fog { from { transform: translate3d(-1.5%, .5%, 0); } to { transform: translate3d(1.5%, -.5%, 0); } }
@keyframes cloud-light { from { opacity: .3; } to { opacity: .5; } }
@keyframes cloud-drift { from { translate: -2% 0; } to { translate: 3% 2%; } }

/* Portrait tablets reserve room above the card for the independent logo. */
@media (min-width: 601px) and (max-width: 1000px) and (min-height: 850px) {
  .poster { width: min(620px, 100%, calc((100dvh - 390px) / .9624)); }
}
@media (max-width: 600px) {
  .stage { padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .poster { width: min(100%, calc((100dvh - 280px) / 1.12)); border-radius: 20px; }
  .poster { --cta-height: 50px; --offer-gap: 11px; --disclosure-size: 8px; --offer-inset: 16px; }
  .poster:before { aspect-ratio: 1 / .64; }
  .portraits { left: -52.5%; width: 205%; }
  .poster:after { aspect-ratio: 1 / .48; }
  .card-info { padding: 12px 16px 20px; }
  .cta { width: min(280px, 94%); min-height: 50px; padding: 0 14px 0 30px; }
  .cta-label { font-size: 15px; letter-spacing: 1.5px; }
  .cta-arrow { font-size: 21px; }
  .disclosure { font-size: 8px; }
  .page-logo { top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); width: clamp(132px, 36vw, 156px); }
  .environment-art { filter: blur(.6px); animation-duration: 22s; }
}
@media (max-height: 550px) {
  .stage { padding: 10px; }
  .poster { width: min(100%, calc((100dvh - 132px) / 1)); border-radius: 14px; }
  .poster { --cta-height: 44px; --offer-gap: 8px; --disclosure-size: 7px; --offer-inset: 10px; }
  .poster:before { aspect-ratio: 1 / .60; }
  .poster:after { aspect-ratio: 1 / .40; }
  .portraits { left: -50%; width: 200%; }
  .card-info { padding: 8px 10px 14px; }
  .cta { width: min(250px, 94%); min-height: 44px; padding: 0 10px 0 26px; }
  .cta-label { font-size: 12px; letter-spacing: 1px; }
  .cta-arrow { font-size: 18px; }
  .disclosure { font-size: 7px; }
  .page-logo { top: max(12px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); width: 124px; }
}
@media (max-width: 480px) and (max-height: 550px) {
  .poster { width: min(100%, calc((100dvh - 224px) / 1)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .environment-art { transform: none; will-change: auto; }
  .cta, .cta:hover, .cta:active { scale: 1; translate: 0; }
}