/* ==========================================================================
   Rogue Pirates — landing page
   --------------------------------------------------------------------------
   Five full-screen sections that snap into place while scrolling.
   Section content is laid out in "design units": 1rem ≈ 100px of the
   5678px-wide design, and the root size is chosen so every section fits
   the viewport (width AND height).
   Desktop  = landscape and >= 900px wide.
   Mobile   = everything else (phones, portrait tablets), single column.
   ========================================================================== */

/* Cinzel variable font (400–700), latin subset, self-hosted — SIL Open Font License */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/cinzel-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;
}

/* Alegreya for sentence-length copy — Cinzel's lowercase are small caps, which tire the eye in paragraphs */
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/alegreya-latin.woff2") format("woff2");
}

@property --tint {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(74 94 39);
}
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(187 213 160);
}

:root {
  --ink: #eef4ea;
  --gold: #ffc53d;
  --gold-hi: #ffe07a;
  --brown: #5b2a07;
  --slot: #14120f;
  --nav-h: 64px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --serif: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --body: "Alegreya", Georgia, serif;
  color-scheme: dark;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: #04244f;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: #04244f;
  color: var(--ink);
  font-family: var(--serif);
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 6px;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: #1c1c1c;
  color: #fff;
  font: 600 14px/1 system-ui, sans-serif;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---------- Page & sections ------------------------------------------- */

.page {
  position: relative;
  overflow-x: clip;
  background-color: #04244f;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.sec {
  position: relative;
  scroll-snap-align: start;
  display: grid;
  place-items: center;
}
.stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Top bar ---------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 28px;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.nav::before {
  /* soft shade so the links stay readable over the bright sky */
  content: "";
  position: absolute;
  inset: 0 0 -24px 0;
  z-index: -1;
  background: linear-gradient(rgb(0 22 56 / .45), transparent);
  pointer-events: none;
  transition: opacity .35s;
}
.nav.is-scrolled {
  background-color: rgb(3 24 56 / .62);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
          backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 1px 0 rgb(255 255 255 / .07);
}
.nav.is-scrolled::before { opacity: 0; }

.nav__brand {
  flex: none;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .35s, transform .35s var(--ease-out);
}
.nav__brand img { height: 38px; width: auto; }
.nav.is-scrolled .nav__brand { opacity: 1; transform: none; pointer-events: auto; }

.nav__links {
  display: flex;
  gap: 30px;
  margin-left: auto;
}
.nav__links a {
  position: relative;
  padding: 6px 0;
  font: 600 12.5px/1 var(--serif);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(255 255 255 / .82);
  text-shadow: 0 1px 6px rgb(0 0 0 / .35);
  transition: color .2s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 18px;
  height: 2px;
  margin-left: -9px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .3s var(--ease-out);
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--gold-hi); }
.nav__links a.is-active::after { transform: none; }

.nav__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px 0 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-hi), #f5a623);
  color: var(--brown);
  font: 700 12px/1 var(--serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .15), 0 4px 14px rgb(0 0 0 / .22);
  transition: transform .2s var(--ease-out), filter .2s;
}
.nav__cta img { width: 26px; height: 26px; border-radius: 50%; }
.nav__cta:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ---------- Section dots ---------------------------------------------- */

.dots {
  position: fixed;
  right: 22px;
  top: 50%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateY(-50%);
}
.dots a {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / .75);
  box-shadow: 0 0 6px rgb(0 0 0 / .3);
  transition: background-color .25s, border-color .25s, transform .25s var(--ease-out);
}
.dots a::before { content: ""; position: absolute; inset: -8px; } /* bigger hit area */
.dots a.is-active { background: var(--gold); border-color: var(--gold); transform: scale(1.25); }
.dots span {
  position: absolute;
  right: 22px;
  top: 50%;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgb(3 24 56 / .75);
  font: 600 11px/1 var(--serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  transform: translate(6px, -50%);
  pointer-events: none;
  transition: opacity .2s, transform .25s var(--ease-out);
}
.dots a:hover span,
.dots a:focus-visible span { opacity: 1; transform: translate(0, -50%); }

/* ---------- Section title banners -------------------------------------- */

.banner {
  --s: .75;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(16.17rem * var(--s));
  height: calc(3.91rem * var(--s));
  background: url("/assets/img/banner-plank.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 .08rem .12rem rgb(0 0 0 / .2));
}
.banner img { width: calc(var(--tw, 8.5rem) * var(--s)); translate: 0 -.04rem; }
.banner--scroll {
  width: calc(17.38rem * var(--s));
  height: calc(5.58rem * var(--s));
  background-image: url("/assets/img/banner-scroll.webp");
}
.banner--scroll img { translate: 0 .24rem; }

/* ---------- Media slots (gameplay placeholders) ----------------------- */

.media-slot {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgb(255 255 255 / .05), transparent 65%),
    var(--slot);
}
.media-slot > iframe,
.media-slot > video,
.media-slot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.media-slot__hint {
  display: grid;
  justify-items: center;
  gap: .5rem;
  font: 600 .55rem/1.3 var(--serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .3);
  text-align: center;
}
.media-slot__hint b {
  font: 400 1.6rem/1 var(--serif);
  letter-spacing: .05em;
  color: rgb(255 214 110 / .35);
}

/* ---------- HERO -------------------------------------------------------- */

.hero-stage { position: relative; }
.hero-art { position: absolute; }
.hero-art img { position: absolute; max-width: none; }
.hero-ship {
  left: 2.1%;          /* 75 / 3570 */
  top: 0;
  width: 87.65%;       /* 3129 / 3570 */
  animation: ship-bob 7s ease-in-out infinite;
  transform-origin: 55% 80%;
}
.hero-octo { top: 25.03%; /* 733 / 2929 */ transform-origin: 50% 100%; }
.hero-octo--l { left: 0; width: 27.06%; animation: sway 6s ease-in-out infinite; }
.hero-octo--r { left: 27.06%; width: 72.94%; animation: sway 7.5s ease-in-out -2s infinite reverse; }
.hero-logo { position: absolute; z-index: 1; animation: logo-in .8s var(--ease-out) both; }

@keyframes ship-bob {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50%      { transform: translateY(-1.6%) rotate(.8deg); }
}
@keyframes sway {
  0%, 100% { transform: rotate(-1deg); }
  50%      { transform: rotate(1.2deg); }
}
@keyframes logo-in {
  from { opacity: 0; transform: translateY(8%) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ---------- STORY / video player --------------------------------------- */

.story-scroll { position: relative; flex: none; }
.story-scroll__paper { width: 100%; }

.player {
  position: absolute;
  aspect-ratio: 16 / 9;
  top: 50%;
  translate: 0 -50%;
}
/* The frame melts into the parchment: feathered edges + a warm vignette,
   so the video reads as painted onto the scroll rather than stuck on top. */
.player__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-composite: intersect;
}
.player__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 60%, rgb(92 52 14 / .22) 100%);
  mix-blend-mode: multiply;
}
.player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0d1a2b;
  cursor: pointer;
}

.play-btn {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: auto;
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi) 0%, #ffc233 45%, #e98a12 100%);
  box-shadow: 0 0 0 .1rem #6b3a0e, 0 .2rem .6rem rgb(0 0 0 / .4);
  transition: transform .25s var(--ease-out), opacity .25s;
}
.play-btn::before {
  content: "";
  position: absolute;
  inset: -.1rem;
  border-radius: 50%;
  border: .08rem solid rgb(255 214 110 / .7);
  animation: ring 2.4s ease-out infinite;
}
.play-btn svg { width: 60%; height: 60%; fill: var(--brown); translate: 6% 0; }
.play-btn:hover { transform: scale(1.07); }
.play-btn:active { transform: scale(.95); }
@keyframes ring {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(1.55); opacity: 0; }
}

.player__bar {
  position: absolute;
  z-index: 2;
  left: 9%;
  right: 9%;
  bottom: 12%;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgb(18 11 4 / .55);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgb(255 214 110 / .18);
  transition: opacity .3s, transform .3s var(--ease-out);
}
.player.is-idle .player__bar { opacity: 0; transform: translateY(.3rem); pointer-events: none; }
.player.is-idle { cursor: none; }
.pbtn {
  flex: none;
  display: grid;
  place-items: center;
  width: max(1.25rem, 28px);
  height: max(1.25rem, 28px);
  border-radius: 50%;
  color: #fff3d6;
  transition: background-color .2s, color .2s;
}
.pbtn:hover { background: rgb(255 214 110 / .15); color: var(--gold-hi); }
.pbtn svg { width: 64%; height: 64%; fill: currentColor; }
.pbtn--mute svg,
.pbtn--fs svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pbtn--toggle .i-play,
.player.is-paused .pbtn--toggle .i-pause { display: none; }
.player.is-paused .pbtn--toggle .i-play { display: block; }
.pbtn--mute .i-muted,
.player.is-muted .pbtn--mute .i-vol { display: none; }
.player.is-muted .pbtn--mute .i-muted { display: block; }

.player__track { flex: 1; display: flex; align-items: center; min-width: 0; }
.player__seek {
  --p: 0%;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.player__seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold) var(--p), rgb(255 255 255 / .25) var(--p));
}
.player__seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgb(255 255 255 / .25); }
.player__seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--gold); }
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 0 3px rgb(255 197 61 / .25);
}
.player__seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--gold-hi);
}
.player__time {
  flex: none;
  min-width: 2.6em;
  font: 600 max(.5rem, 11px)/1 var(--serif);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: #fff3d6;
}

.player:fullscreen { background: #000; translate: none; }
.player:fullscreen .player__frame { -webkit-mask-image: none; mask-image: none; }
.player:fullscreen .player__frame::after { display: none; }
.player:fullscreen video { object-fit: contain; background: #000; }
.player:fullscreen .player__bar { left: 20%; right: 20%; bottom: 4%; }

/* ---------- CAPTAINS ---------------------------------------------------- */

.captains[data-captain="rook"]   { --tint: rgb(4 50 133);    --accent: rgb(170 188 222); }
.captains[data-captain="richie"] { --tint: rgb(117 34 94);   --accent: rgb(222 172 207); }
.captains[data-captain="hank"]   { --tint: rgb(74 94 39);    --accent: rgb(187 213 160); }
.captains[data-captain="roxie"]  { --tint: rgb(26 150 161);  --accent: rgb(170 244 250); }
.captains[data-captain="sparky"] { --tint: rgb(191 30 44);   --accent: rgb(240 190 194); }
.captains[data-captain="ember"]  { --tint: rgb(255 172 92);  --accent: rgb(255 238 214); }
.captains { transition: --tint .7s ease, --accent .7s ease; }

/* Gradient sampled from the "<captain> bg" exports: transparent → 85% tint.
   It fills the whole screen and fades out at the top/bottom edges. */
.cap-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--tint) 3.5%, transparent) 10%,
    color-mix(in srgb, var(--tint) 9.4%, transparent) 20%,
    color-mix(in srgb, var(--tint) 18.4%, transparent) 30%,
    color-mix(in srgb, var(--tint) 29.8%, transparent) 40%,
    color-mix(in srgb, var(--tint) 46.7%, transparent) 50%,
    color-mix(in srgb, var(--tint) 67%, transparent) 60%,
    color-mix(in srgb, var(--tint) 84.7%, transparent) 70%,
    color-mix(in srgb, var(--tint) 84.7%, transparent) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.cap-panel { position: relative; }
.cap-list { position: absolute; z-index: 3; display: flex; }
.cap-card {
  position: relative;
  display: block;
  flex: none;
  aspect-ratio: 1;
  border-radius: 12%;
  opacity: .78;
  transition: transform .25s var(--ease-out), opacity .25s, filter .25s;
  filter: drop-shadow(0 .06rem .1rem rgb(0 0 0 / .3)) saturate(.85);
}
.cap-card img { width: 100%; height: 100%; }
.cap-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/captains/frame-gold.webp") center / 100% 100% no-repeat;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .3s, transform .3s var(--ease-out);
}
.cap-card:hover { opacity: 1; transform: scale(1.05); filter: drop-shadow(0 .1rem .2rem rgb(0 0 0 / .4)); }
.cap-card.is-active { opacity: 1; transform: scale(1.06); filter: drop-shadow(0 0 .3rem rgb(255 190 40 / .5)); }
.cap-card.is-active::after { opacity: 1; transform: none; }
.cap-card:focus-visible { outline-offset: 2px; border-radius: 14%; }

.cap-figure {
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.cap-char {
  height: calc(var(--h) * var(--char-scale));
  width: auto;
  max-width: none;
  filter: drop-shadow(0 .4rem .6rem rgb(0 0 0 / .28));
  transition: opacity .28s ease, transform .45s var(--ease-out);
}
.cap-char.is-leaving { opacity: 0; transform: translateX(-4%) scale(.98); transition-duration: .18s; }
.cap-char.is-entering { opacity: 0; transform: translateX(5%); transition: none; }

.cap-details {
  position: absolute;
  z-index: 2;
  text-shadow: 0 .03rem .12rem rgb(0 0 0 / .3);
}
.cap-head { display: flex; align-items: center; gap: .75rem; }
.cap-emblem {
  flex: none;
  width: 4.6rem;
  height: 4.9rem;
  background: var(--accent);
  -webkit-mask: var(--emblem) center / contain no-repeat;
          mask: var(--emblem) center / contain no-repeat;
}
.cap-name {
  font: 400 4.7rem/1 var(--serif);
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  translate: 0 .1rem;
}

.cap-stats {
  display: grid;
  gap: 1.1rem;
  margin: .45rem 0 0 6.3rem;
}
.stat {
  display: grid;
  grid-template-columns: 2.4rem auto;
  grid-template-rows: auto auto;
  column-gap: 1.5rem;
  row-gap: .26rem;
  align-items: center;
  min-height: 2.15rem;
}
.stat__icon {
  grid-row: 1 / 3;
  width: 2.4rem;
  height: 2.15rem;
  object-fit: contain;
}
.stat__label {
  align-self: end;
  font: 600 .8rem/1 var(--serif);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stat__bar { align-self: start; display: flex; gap: .1rem; }
.seg {
  position: relative;
  width: .93rem;
  height: .525rem;
  background: var(--down) center / 100% 100% no-repeat;
}
.seg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--up) center / 100% 100% no-repeat;
  opacity: 0;
  transform: scaleX(.3);
  transform-origin: left;
  transition: opacity .25s ease, transform .35s var(--ease-out);
  transition-delay: calc(var(--i) * 55ms);
}
.seg.is-on::after { opacity: 1; transform: none; }
/* Ember's tan segments need a lift to read against her orange panel */
.captains[data-captain="ember"] .seg::after { filter: brightness(1.35) saturate(1.2); }

.cap-ability {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  column-gap: .5rem;
  margin: 2rem 0 0 3.1rem;
}
.cap-ability__kicker {
  grid-column: 1 / -1;
  margin-left: .4rem;
  font: 600 .7rem/1.2 var(--serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}
.cap-ability__name {
  grid-column: 2;
  margin: .7rem 0 .45rem .3rem;
  font: 400 1.4rem/1.2 var(--serif);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cap-ability__icon {
  grid-column: 1;
  align-self: center;
  width: 3.2rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.cap-ability__icon--emblem {
  background: rgb(10 25 30 / .5);
  box-shadow: inset 0 0 0 .05rem rgb(255 255 255 / .08);
}
.cap-ability__icon--emblem::before {
  content: "";
  width: 58%;
  height: 58%;
  background: color-mix(in srgb, var(--accent) 60%, rgb(30 40 40));
  -webkit-mask: var(--emblem) center / contain no-repeat;
          mask: var(--emblem) center / contain no-repeat;
}
.cap-ability__icon img { width: 100%; }
.cap-ability__desc {
  grid-column: 2;
  margin-left: .3rem;
  font: 400 .98rem/1.45 var(--serif);
  letter-spacing: .01em;
  color: var(--accent);
}
.cap-name,
.cap-ability { transition: opacity .3s ease, transform .4s var(--ease-out); }
.cap-details.is-swapping .cap-name,
.cap-details.is-swapping .cap-ability { opacity: 0; transform: translateY(.25rem); transition-duration: .15s; }

/* ---------- GAMEPLAY ---------------------------------------------------- */

.carousel { position: relative; flex: none; }
.carousel__viewport {
  position: relative;
  overflow: hidden;
  border-radius: .3rem;
  box-shadow: 0 .4rem 1.4rem rgb(0 0 0 / .35), 0 0 0 1px rgb(255 214 110 / .16);
}
.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: -3px; }
.slide {
  flex: 0 0 100%;
  aspect-ratio: 16 / 9;
  scroll-snap-align: center;
}
.slide .media-slot { width: 100%; height: 100%; }
.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  translate: 0 -50%;
  transition: transform .2s var(--ease-out), filter .2s, opacity .2s;
  filter: drop-shadow(0 .05rem .08rem rgb(0 0 0 / .3));
}
.carousel__arrow img { width: 100%; }
.carousel__arrow:hover { filter: drop-shadow(0 .05rem .08rem rgb(0 0 0 / .3)) brightness(1.12); }
.carousel__arrow--prev:hover { transform: translateX(-.12rem); }
.carousel__arrow--next:hover { transform: translateX(.12rem); }
.carousel__arrow:active { transform: scale(.92); }

.carousel__dots { display: flex; justify-content: center; gap: .45rem; }
.carousel__dots button {
  width: max(.5rem, 9px);
  height: max(.5rem, 9px);
  border-radius: 999px;
  background: rgb(255 255 255 / .35);
  transition: width .3s var(--ease-out), background-color .3s;
}
.carousel__dots button:hover { background: rgb(255 255 255 / .6); }
.carousel__dots button[aria-current="true"] { width: max(1.5rem, 26px); background: var(--gold); }

/* ---------- LAUNCH / FOOTER -------------------------------------------- */

/* Platform tiles: one shape, one icon style, one type style — so the row reads as a set */
.platforms { display: grid; }
.platform {
  display: flex;
  align-items: center;
  gap: .6rem;
  height: 100%;
  padding: .55rem .85rem;
  border-radius: .45rem;
  background: rgb(4 18 40 / .66);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgb(255 214 110 / .22), 0 .15rem .5rem rgb(0 0 0 / .2);
  color: #fff;
  text-decoration: none;
  transition: transform .2s var(--ease-out), box-shadow .2s, color .2s, background-color .2s;
}
.platform:hover {
  transform: translateY(-.08rem);
  background: rgb(4 18 40 / .8);
  box-shadow: inset 0 0 0 1px rgb(255 214 110 / .7), 0 .25rem .8rem rgb(0 0 0 / .3);
  color: var(--gold-hi);
}
.platform__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
}
.platform__icon svg { width: 100%; height: 100%; fill: currentColor; }
.platform__icon .i-stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.platform__icon--mask {
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.platform__text {
  display: grid;
  gap: .12rem;
  font: 600 .78rem/1.05 var(--serif);
  letter-spacing: .02em;
  white-space: nowrap;
}
.platform__text small {
  font: 600 max(.44rem, 10px)/1 var(--serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .6);
}
.platform--web { box-shadow: inset 0 0 0 1px rgb(255 214 110 / .55), 0 .15rem .5rem rgb(0 0 0 / .2); }
.platform--web .platform__icon { color: var(--gold-hi); }

/* ---------- PLAY IN BROWSER ------------------------------------------- */

.play-card {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: .45rem;
  background: #06142a;
  box-shadow: 0 .4rem 1.4rem rgb(0 0 0 / .35), 0 0 0 1px rgb(255 214 110 / .2);
}
.play-card__art { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.play-card:hover .play-card__art { transform: scale(1.03); }
.play-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
}
.play-card__badge {
  padding: .3rem .65rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(255 214 110 / .6);
  font: 700 max(.46rem, 10px)/1 var(--serif);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-hi);
}
.play-card__title {
  font: 600 1.85rem/1.12 var(--serif);
  letter-spacing: .01em;
  color: var(--ink);
  text-wrap: balance;
}
.play-card__text {
  font: 400 max(.86rem, 16px)/1.55 var(--body);
  color: rgb(255 255 255 / .9);
  max-width: 17rem;
}
.play-card__note {
  font: 400 max(.7rem, 14px)/1.45 var(--body);
  color: rgb(255 255 255 / .72);
}
.play-card__note a { color: var(--gold-hi); text-underline-offset: 3px; }

.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: max(2.3rem, 42px);
  margin-top: .3rem;
  padding: 0 1.3rem 0 1.05rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-hi), #f5a623);
  color: var(--brown);
  font: 700 max(.66rem, 13px)/1 var(--serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .15), 0 .2rem .6rem rgb(0 0 0 / .3);
  transition: transform .2s var(--ease-out), filter .2s;
}
.btn-gold svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.btn-gold:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-gold:active { transform: scale(.97); }

.play-card__launch {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(4 18 40 / .45);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 .08rem rgb(255 214 110 / .85), 0 .3rem 1rem rgb(0 0 0 / .35);
  transition: transform .25s var(--ease-out), background-color .25s;
}
.play-card__launch svg { width: 46%; height: 46%; fill: var(--gold-hi); translate: 6% 0; }
.play-card__launch:hover { transform: scale(1.08); background: rgb(4 18 40 / .65); }

.join {
  display: grid;
  place-items: center;
  flex: none;
  width: 10rem;
  height: 2.97rem;
  background: url("/assets/img/button-yellow.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 .06rem .12rem rgb(0 0 0 / .25));
  transition: transform .2s var(--ease-out), filter .2s;
}
.join img { width: 4.1rem; translate: 0 -.08rem; }
.join:hover { transform: scale(1.05); filter: drop-shadow(0 .1rem .2rem rgb(0 0 0 / .3)) brightness(1.05); }
.join:active { transform: scale(.97); }

.socials { display: flex; justify-content: center; }
.social { display: block; border-radius: 22%; transition: transform .2s var(--ease-out), filter .2s; }
.social img { width: 100%; }
.social:hover { transform: translateY(-.1rem) scale(1.05); }

.copyright {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  font: 400 12px/1.4 var(--serif);
  letter-spacing: .08em;
  color: rgb(255 255 255 / .5);
  text-align: center;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 50;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgb(20 16 10 / .88);
  border: 1px solid rgb(255 200 80 / .45);
  color: #ffe6a8;
  font: 600 15px/1.2 var(--serif);
  letter-spacing: .04em;
  box-shadow: 0 10px 30px rgb(0 0 0 / .35);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity .25s, transform .3s var(--ease-out);
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Scroll reveal ---------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(1rem); transition: opacity .8s ease, transform .9s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   DESKTOP — full-screen scenes, design coordinates scaled to fit
   ========================================================================== */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  html {
    /* fit 56.78 design-rem across and ~39 design-rem down (below the top bar) */
    font-size: min(calc((100vw - var(--sbw, 0px)) / 56.78), calc((100vh - var(--nav-h)) / 39));
    font-size: min(calc((100vw - var(--sbw, 0px)) / 56.78), calc((100svh - var(--nav-h)) / 39));
    scroll-snap-type: y mandatory;
  }
  /* real painting on top, a 400-byte blurred copy underneath so the first paint is never flat navy */
  .page {
    background-image:
      image-set(url("/assets/img/bg/full-1600.webp") 1x, url("/assets/img/bg/full-2400.webp") 2x),
      url("data:image/webp;base64,UklGRowBAABXRUJQVlA4IIABAACwCACdASoYAEAAPt1kqlAopSOipAyREBuJagC7MwAESBU9WIHgEvchjQmsxFTgVJEHjGzeENOHBSYzaiR+zYWorPa9jUArhRqSBb9USzQA/tYRLYmoJTMSTkMdaSmGRVVN5U8UuOBgkoUGC8Rr/Oia+YZZgfqWoBc3KV+7j+JMZVd3jf4pLszistMUzdVM+I9n/ufj++IeTLaXqfh/SYQQrtGupXUKZ1bmfEw9lTAjQQMBd5KwS48O3svNDqL0wRAtodIcV1H4YnY8SEcSo8lnfO/C+8sD7t2tTDb8bSwuRJHp/EH6n7tyumEi3UMgw5OXYQQvOgJjoLtcU7K5o5z1DpZyB3ZIRhkFhOdTl6vROeunkPyDzl8E3Iq2wwjn2BaobYPIeSXBmvr7o/m1Ecgn8V38Cc4TjR9QdXZ8SakhsDahPndkKSgoNNVSnz/mUcU32ghLVl6GrQTM6PQnkXMHl6vmBBIbOWTVKRhjnaOc3YwI7G3yvp6ogmQd3Z3NAAA=");
  }

  .sec {
    height: 100vh;
    height: 100svh;
    padding-top: var(--nav-h);
  }
  .stage { width: 56.78rem; }

  /* HERO — its own unit so the scene always spans the full width */
  .hero { padding-top: 0; place-items: end end; }
  .hero-stage {
    --hu: calc(min(100vw - var(--sbw, 0px), 100vh * 1.7) / 56.78);
    --hu: calc(min(100vw - var(--sbw, 0px), 100svh * 1.7) / 56.78);
    width: 100%;
    height: calc(31.5 * var(--hu));
  }
  /* ship pinned to the right edge, logo to the left — holds up on ultrawide screens too */
  .hero-art { right: 0; top: calc(2.83 * var(--hu)); width: calc(35.7 * var(--hu)); height: calc(29.29 * var(--hu)); }
  .hero-logo { left: calc(1.2 * var(--hu)); top: calc(20.1 * var(--hu)); width: calc(20.5 * var(--hu)); }

  /* STORY */
  .story-scroll { width: 50.76rem; margin-top: 1rem; }
  .player { left: 20%; width: 60%; }

  /* CAPTAINS */
  .captains { --char-scale: .0296rem; }
  .cap-panel { width: 56.78rem; height: 32rem; margin-top: 1.1rem; }
  .cap-list { left: 2.4rem; top: 50%; translate: 0 -50%; flex-direction: column; gap: .3rem; }
  .cap-card { width: 4.6rem; }
  .cap-figure { left: 9.5rem; width: 26rem; top: 0; bottom: 0; }
  .cap-details { left: 33rem; top: 50%; translate: 0 -50%; width: 23.2rem; }

  /* GAMEPLAY */
  .carousel { width: 46rem; margin-top: 1.6rem; }
  .carousel__arrow { width: 1.5rem; }
  .carousel__arrow--prev { left: -3.3rem; }
  .carousel__arrow--next { right: -3.3rem; }
  .carousel__dots { margin-top: 1.2rem; }

  /* PLAY */
  .play-card { width: 46rem; height: 23.5rem; margin-top: 1.6rem; }
  .play-card__art { position: absolute; inset: 0; }
  .play-card__body {
    height: 100%;
    width: 62%;
    justify-content: center;
    padding: 0 3.6rem 0 2.4rem;
    background: linear-gradient(90deg, rgb(3 14 32 / .94) 0%, rgb(3 14 32 / .84) 58%, rgb(3 14 32 / 0) 100%);
  }
  .play-card__launch { right: 11%; top: 50%; width: 4.6rem; height: 4.6rem; margin-top: -2.3rem; }

  /* LAUNCH */
  .platforms { grid-template-columns: repeat(5, 9.9rem); gap: .7rem; margin-top: 2.4rem; }
  .platform { height: 3.3rem; }
  .join { margin-top: 3rem; }
  .socials { gap: .9rem; margin-top: 1.7rem; }
  .social { width: 3.1rem; }
}
@media (min-width: 1800px) and (min-aspect-ratio: 1/1) {
  .page { background-image: url("/assets/img/bg/full-2400.webp"), url("data:image/webp;base64,UklGRowBAABXRUJQVlA4IIABAACwCACdASoYAEAAPt1kqlAopSOipAyREBuJagC7MwAESBU9WIHgEvchjQmsxFTgVJEHjGzeENOHBSYzaiR+zYWorPa9jUArhRqSBb9USzQA/tYRLYmoJTMSTkMdaSmGRVVN5U8UuOBgkoUGC8Rr/Oia+YZZgfqWoBc3KV+7j+JMZVd3jf4pLszistMUzdVM+I9n/ufj++IeTLaXqfh/SYQQrtGupXUKZ1bmfEw9lTAjQQMBd5KwS48O3svNDqL0wRAtodIcV1H4YnY8SEcSo8lnfO/C+8sD7t2tTDb8bSwuRJHp/EH6n7tyumEi3UMgw5OXYQQvOgJjoLtcU7K5o5z1DpZyB3ZIRhkFhOdTl6vROeunkPyDzl8E3Iq2wwjn2BaobYPIeSXBmvr7o/m1Ecgn8V38Cc4TjR9QdXZ8SakhsDahPndkKSgoNNVSnz/mUcU32ghLVl6GrQTM6PQnkXMHl6vmBBIbOWTVKRhjnaOc3YwI7G3yvp6ogmQd3Z3NAAA="); }
}

/* ==========================================================================
   MOBILE / PORTRAIT — single column
   ========================================================================== */
@media (max-width: 899.98px), (max-aspect-ratio: 1/1) {
  :root { --nav-h: 56px; }
  html {
    font-size: min(calc((100vw - var(--sbw, 0px)) / 22), 34px);
    scroll-snap-type: y proximity;
  }
  .page {
    background-image:
      image-set(url("/assets/img/bg/mobile-900.webp") 1x, url("/assets/img/bg/mobile-1300.webp") 2x),
      url("data:image/webp;base64,UklGRt4AAABXRUJQVlA4INIAAAAQBQCdASoKAEIAPt1kqU+opaOiJmwBEBuJaACdMyq4+BCuWjFr5YEuz32ujtfjXoBgAMp0BKHzS9cbJTv0/qeTxxJ+B7HgXLUImS8joAauM8fVuKg7osVwtNiTiEJSo0wvf7Y68vEKk/8NW+k2620zAmWW1qbeUB+2pITI1mhGtMstMoQjfc8rZGWUdXP2z+SZ5jG95t6PH1NUwThjbQxNnxTo40mtIjQDCn1GGYSXUTb8t2CI+/sbC3amyS3yQ/a8fRFNClBaUkurGbpo3iQAAAA=");
  }

  .nav { gap: 12px; padding: 0 14px; }
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; height: 34px; font-size: 11px; }
  .nav__brand img { height: 32px; }
  .dots { display: none; }

  .sec {
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--nav-h) + 1.4rem) 0 2.6rem;
  }
  .stage { width: 22rem; }

  /* HERO — logo on top, ship anchored to the bottom edge, never overlapping */
  .hero { padding: calc(var(--nav-h) + .6rem) 0 0; place-items: stretch center; }
  .hero-stage {
    width: 22rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
  }
  .hero-logo { position: relative; order: -1; width: 17.5rem; margin-top: 1.4rem; }
  .hero-art {
    position: relative;
    width: 27rem;
    aspect-ratio: 3570 / 2929;
    align-self: flex-end;
    margin-right: -3.2rem;
  }

  /* STORY */
  .banner { --s: .9; }
  /* parchment runs past the screen edges so the video can be nearly full width */
  .story-scroll { width: 30rem; margin-top: 1.2rem; }
  .player { left: 16%; width: 68%; }
  .play-btn { width: 3rem; height: 3rem; }
  .player__bar { left: 8%; right: 8%; bottom: 11%; gap: .2rem; padding: 0 .3rem; }
  .player__time { display: none; }
  .pbtn { width: 26px; height: 26px; }

  /* CAPTAINS */
  .captains { --char-scale: .0162rem; }
  .cap-glow {
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--tint) 12%, transparent) 16%,
      color-mix(in srgb, var(--tint) 40%, transparent) 34%,
      color-mix(in srgb, var(--tint) 75%, transparent) 50%,
      color-mix(in srgb, var(--tint) 85%, transparent) 62%,
      color-mix(in srgb, var(--tint) 85%, transparent) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 94%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 94%, transparent 100%);
  }
  .cap-panel { width: 22rem; margin-top: 1.3rem; }
  .cap-list { position: relative; justify-content: center; gap: .32rem; }
  .cap-card { width: 3.3rem; }
  .cap-figure { position: relative; height: 17.6rem; margin-top: .9rem; }
  .cap-details { position: relative; width: 19.6rem; margin: 1.1rem auto 0; }
  .cap-emblem { width: 3.3rem; height: 3.5rem; }
  .cap-name { font-size: 3.1rem; }
  .cap-stats { margin: 1.1rem 0 0 1.8rem; gap: .95rem; }
  .stat__label { font-size: .8rem; }
  .cap-ability { margin: 1.8rem 0 0 0; }

  /* GAMEPLAY */
  .carousel { width: 19rem; margin-top: 1.4rem; }
  .carousel__arrow { width: 1.2rem; }
  .carousel__arrow--prev { left: -1.55rem; }
  .carousel__arrow--next { right: -1.55rem; }
  .carousel__dots { margin-top: 1rem; }
  .media-slot__hint { font-size: .6rem; }

  /* PLAY */
  .play-card { width: 20.4rem; margin-top: 1.4rem; }
  .play-card__art { aspect-ratio: 16 / 9; height: auto; }
  .play-card__body { padding: 1.3rem 1.3rem 1.5rem; gap: .75rem; }
  .play-card__title { font-size: 1.55rem; }
  .play-card__text { max-width: none; }
  .play-card__launch { left: 50%; top: calc(20.4rem * 9 / 16 / 2); width: 3.6rem; height: 3.6rem; margin: -1.8rem 0 0 -1.8rem; }

  /* LAUNCH */
  .launch { padding-bottom: 3.6rem; }
  .platforms {
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    width: 20.4rem;
    margin-top: 1.6rem;
  }
  .platforms li:first-child { grid-column: 1 / -1; }
  .platform { height: 3.1rem; padding: .5rem .8rem; }
  .platform--web { justify-content: center; }
  .platform__text { font-size: .9rem; }
  .join { margin-top: 2.4rem; }
  .socials { gap: .8rem; margin-top: 1.5rem; }
  .social { width: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}