/* Aptangle Labs: site styles.
   Tokens and components follow docs/DESIGN_SYSTEM.md. */

/* ------------------------------------------------------------------ fonts (self-hosted, OFL) */
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/sourcesans3.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/sourcesans3-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Lilita One"; src: url("/assets/fonts/lilitaone.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------------ tokens */
:root {
  --brand: #080EA3; --brand-slate: #30354C;
  --ribbon-dark: #1118B5; --ribbon-mid: #1436DA; --ribbon-light: #3688F6;
  --accent: #2770F6; --lockup-divider: #ACADBB;

  --canvas: #F6F7FC; --surface: #FFFFFF; --surface-tint: #ECEEFA;
  --text: #161A30; --text-muted: #596178; --border: #DDE0EC; --control-border: #7A8198;

  --primary: #080EA3; --primary-hover: #0A12A0; --primary-active: #060A78; --on-primary: #FFFFFF;
  --link: #080EA3; --secondary-bg: #FFFFFF; --secondary-text: #080EA3; --ghost-hover-bg: #ECEEFA;
  --focus: #1436DA;

  --success: #146C43; --success-bg: #EAF6EF; --warning: #8A4B00; --warning-bg: #FFF4DE;
  --error: #B42318; --error-bg: #FFF0EE; --info: #080EA3; --info-bg: #ECEEFA;

  --ink-start: #080B3D; --ink-end: #10152F; --ink-text: #FFFFFF; --ink-muted: #C9CDE2;

  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --weight-display: 700; --weight-heading: 600; --weight-body: 400; --weight-ui: 600;

  --type-caption: clamp(.875rem, .825rem + .2vw, 1rem);
  --type-body: clamp(1rem, .95rem + .2vw, 1.125rem);
  --type-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --type-h3: clamp(1.375rem, 1.15rem + .8vw, 1.875rem);
  --type-h2: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  --type-hero: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  --leading-caption: 1.4; --leading-body: 1.6; --leading-lead: 1.5;
  --leading-h3: 1.22; --leading-h2: 1.12; --leading-hero: 1.05;
  --tracking-body: 0; --tracking-ui: .01em; --tracking-h3: -.015em; --tracking-h2: -.025em; --tracking-hero: -.035em;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-space: clamp(4rem, 8vw, 8rem);
  --container: 80rem; --reading-width: 65ch;
  --grid-gap: clamp(1.5rem, 3vw, 2rem);
  --control-min-height: 3rem;

  --radius-control: 4px; --radius-card: 5px; --radius-feature: 5px; --radius-pill: 4px; --radius-media: 5px;
  --shadow-1: 0 1px 2px rgb(22 26 48 / 5%), 0 10px 28px -10px rgb(22 26 48 / 13%);
  --shadow-2: 0 3px 8px rgb(22 26 48 / 7%), 0 22px 44px -14px rgb(22 26 48 / 20%);
  /* Media (screenshots, video, art): a hairline ring plus soft layered depth instead of a hard border. */
  --shadow-media: 0 0 0 1px rgb(22 26 48 / 8%), 0 1px 2px rgb(22 26 48 / 8%), 0 6px 16px -4px rgb(22 26 48 / 14%), 0 24px 48px -12px rgb(22 26 48 / 22%);

  --z-base: 0; --z-raised: 10; --z-header: 30; --z-skip-link: 100;

  --duration-fast: 120ms; --duration-ui: 200ms; --duration-entry: 400ms; --duration-ribbon: 1200ms;
  --duration-cloud-near: 60s; --duration-cloud-far: 90s; --duration-ruckus: 4s;
  --reveal-distance: 12px; --ruckus-bob-distance: -6px;
  --ease-ui: cubic-bezier(.2, 0, 0, 1); --ease-entry: cubic-bezier(.16, 1, .3, 1);
}

.ink-band, .band-ink {
  --canvas: #080B3D; --surface: #10152F; --surface-tint: #232B52;
  --text: #FFFFFF; --text-muted: #C9CDE2; --border: #394467; --control-border: #8992B7;
  --primary: #FFFFFF; --primary-hover: #ECEEFA; --primary-active: #DDE0EC; --on-primary: #080EA3;
  --link: #FFFFFF; --secondary-bg: #10152F; --secondary-text: #FFFFFF; --ghost-hover-bg: #232B52;
  --focus: #FFFFFF;
  --shadow-media: 0 0 0 1px rgb(255 255 255 / 7%), 0 2px 4px rgb(0 0 0 / 22%), 0 10px 24px -6px rgb(0 0 0 / 40%), 0 32px 64px -16px rgb(0 0 0 / 55%);
  background: linear-gradient(135deg, var(--ink-start), var(--ink-end));
  color: var(--text);
}

.theme-rocketdash {
  --font-display: "Lilita One", system-ui, sans-serif; --font-body: "Nunito", system-ui, sans-serif;
  --weight-display: 400; --weight-heading: 400; --weight-ui: 800;
  --tracking-h3: 0; --tracking-h2: 0; --tracking-hero: 0; --leading-hero: 1.08;
  --canvas: #10152F; --surface: #1D2448; --surface-tint: #2A335B;
  --text: #FFFFFF; --text-muted: #C9CDE2; --border: #394467; --control-border: #8992B7;
  --primary: #FFD43B; --primary-hover: #FFE174; --primary-active: #F5BF18; --on-primary: #10152F;
  --link: #FFD43B; --secondary-bg: #1D2448; --secondary-text: #FFFFFF; --ghost-hover-bg: #2A335B;
  --focus: #FFD43B;
  --shadow-media: 0 0 0 1px rgb(255 255 255 / 7%), 0 2px 4px rgb(0 0 0 / 22%), 0 10px 24px -6px rgb(0 0 0 / 40%), 0 32px 64px -16px rgb(0 0 0 / 55%);
  --hero-red: #E8322B; --action-red: #B42318; --hazard-yellow: #FFD43B; --display-outline: #10152F;
}

.theme-cloudcrash {
  --font-display: "Lilita One", system-ui, sans-serif; --font-body: "Nunito", system-ui, sans-serif;
  --weight-display: 400; --weight-heading: 400; --weight-ui: 800;
  --tracking-h3: 0; --tracking-h2: 0; --tracking-hero: 0; --leading-hero: 1.08;
  --canvas: #F7FBFF; --surface: #FFFFFF; --surface-tint: #E7F7FC;
  --text: #1E2A5A; --text-muted: #1E2A5A; --border: #D6E5EC; --control-border: #64739A;
  --primary: #F5B83D; --primary-hover: #FFD06C; --primary-active: #EBA923; --on-primary: #1E2A5A;
  --link: #080EA3; --secondary-bg: #FFFFFF; --secondary-text: #1E2A5A; --ghost-hover-bg: #E7F7FC;
  --focus: #080EA3;
  --shadow-media: 0 0 0 1px rgb(30 42 90 / 8%), 0 1px 2px rgb(30 42 90 / 10%), 0 8px 18px -4px rgb(30 42 90 / 16%), 0 28px 52px -14px rgb(30 42 90 / 26%);
  --sky: #2EC4E6; --coral: #FF6B5A; --brass: #F5B83D; --leaf: #4CCB6A; --display-outline: #1E2A5A;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--surface); color: var(--text);
  font-family: var(--font-body); font-size: var(--type-body); line-height: var(--leading-body);
  font-weight: var(--weight-body); letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.theme-rocketdash body, .theme-cloudcrash body { background: var(--canvas); }
img, svg, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-heading); margin: 0 0 var(--space-4); text-wrap: balance; }
h1 { font-size: var(--type-hero); line-height: var(--leading-hero); letter-spacing: var(--tracking-hero); font-weight: var(--weight-display); }
h2 { font-size: var(--type-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); font-weight: var(--weight-display); }
h3 { font-size: var(--type-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
a { color: var(--link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.lead { font-size: var(--type-lead); line-height: var(--leading-lead); color: var(--text-muted); }
.eyebrow { font-family: var(--font-display); font-size: var(--type-caption); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ribbon-mid); margin-bottom: var(--space-3); }
.band-ink .eyebrow, .ink-band .eyebrow { color: #8FB8FF; }
.muted { color: var(--text-muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-skip-link); background: var(--primary); color: var(--on-primary); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: var(--space-4); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.section--canvas { background: var(--canvas); }
.theme-corporate .section--canvas { background: radial-gradient(48rem 30rem at 5% 0%, rgb(255 247 235 / 75%), transparent 72%), linear-gradient(155deg, #F8F8FB, #F3F5FA); }
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section__head h2 { margin-bottom: var(--space-6); }
.section__head--center { margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------------ buttons + pills */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-min-height); padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill); border: 2px solid transparent;
  font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--type-caption); letter-spacing: var(--tracking-ui);
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: background-color var(--duration-ui) var(--ease-ui), color var(--duration-ui) var(--ease-ui), border-color var(--duration-ui) var(--ease-ui), transform var(--duration-ui) var(--ease-ui), box-shadow var(--duration-ui) var(--ease-ui);
}
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); box-shadow: 0 6px 18px rgb(8 14 163 / 16%); }
.btn--primary:active { background: var(--primary-active); }
.btn--secondary { background: var(--secondary-bg); color: var(--secondary-text); border-color: var(--control-border); }
.btn--secondary:hover { background: var(--ghost-hover-bg); box-shadow: var(--shadow-1); }
.btn--ghost { background: transparent; color: var(--link); padding-inline: var(--space-4); }
.btn--ghost:hover, .btn--ghost:focus-visible { text-decoration: underline; background: var(--ghost-hover-bg); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--text);
  font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--type-caption); letter-spacing: var(--tracking-ui); line-height: 1.3;
}
.pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .75; flex: none; }

/* ------------------------------------------------------------------ corporate header */
.site-header { position: relative; z-index: var(--z-header); background: rgb(255 255 255 / 94%); border-bottom: 1px solid var(--border); box-shadow: 0 3px 16px rgb(22 26 48 / 4%); }
@supports (backdrop-filter: blur(10px)) { .site-header { backdrop-filter: saturate(1.4) blur(12px); } }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-8); padding-block: var(--space-4); }
.site-header__brand { display: block; border-radius: var(--radius-control); }
.site-header__brand img { height: clamp(2.1rem, 1.7rem + 1.2vw, 2.75rem); width: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; }
.site-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--space-3); border-radius: var(--radius-pill); color: var(--text); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: var(--type-caption); transition: background-color var(--duration-ui) var(--ease-ui), color var(--duration-ui) var(--ease-ui); }
.site-nav a:hover, .site-nav a:focus-visible { background: var(--ghost-hover-bg); color: var(--brand); }
.site-nav a[aria-current="page"] { color: var(--brand); background: var(--surface-tint); box-shadow: inset 0 -2px 0 var(--ribbon-mid); }
@media (max-width: 39.99rem) { .site-nav { width: 100%; margin-inline: calc(-1 * var(--space-3)); } .site-nav ul { gap: 0; } }
@media (min-width: 64rem) { .site-header { position: sticky; top: 0; } }

/* ------------------------------------------------------------------ corporate hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(4rem, 10vw, 9rem) clamp(4rem, 9vw, 8rem); background:
  radial-gradient(60rem 40rem at 85% 10%, rgb(54 136 246 / 14%), transparent 60%),
  radial-gradient(42rem 30rem at 5% 90%, rgb(244 222 196 / 38%), transparent 70%), linear-gradient(155deg, #FFFFFF, #F9FAFD); }
.hero__inner { position: relative; z-index: var(--z-raised); display: grid; gap: var(--space-12); align-items: center; }
.hero__copy { max-width: 44rem; }
.hero__title { margin-bottom: var(--space-6); }
.hero__title .line { display: block; }
.hero__title .grad { background: linear-gradient(90deg, var(--ribbon-dark), var(--ribbon-mid) 45%, var(--ribbon-light)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { max-width: 36rem; margin-bottom: var(--space-8); }
.hero__art { position: relative; }
.hero__ribbon { position: absolute; inset: auto -12% -22% auto; width: min(70rem, 120%); pointer-events: none; opacity: .9; }
.hero__ribbon path { fill: none; stroke-linecap: round; }
.hero__mark { width: min(62%, 30rem); margin-inline: auto; filter: drop-shadow(0 30px 50px rgb(17 24 181 / 22%)); }
@media (min-width: 64rem) { .hero__inner { grid-template-columns: 1.25fr .9fr; } .hero__mark { width: min(100%, 30rem); } }

/* ------------------------------------------------------------------ what we do (area cards) */
.areas { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .areas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .areas { grid-template-columns: repeat(4, 1fr); } }
.area { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8) var(--space-6); background: linear-gradient(160deg, #FFFFFF 60%, #FBFAF8); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-1); transition: transform var(--duration-ui) var(--ease-ui), box-shadow var(--duration-ui) var(--ease-ui), border-color var(--duration-ui) var(--ease-ui); }
.area h3 { margin: 0; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.area p { margin: 0; color: var(--text-muted); }
.area__icon { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border: 1px solid rgb(8 14 163 / 8%); border-radius: var(--radius-control); color: var(--brand); background: linear-gradient(135deg, #F3F0EF, #E8EEFC); margin-bottom: var(--space-2); }
.area__icon svg { width: 1.75rem; height: 1.75rem; }
.area__link { margin-top: auto; padding-top: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--type-caption); }
@media (hover: hover) { .area:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #BFC7E1; } }

/* ------------------------------------------------------------------ game division (ink band) */
.games { position: relative; overflow: hidden; }
.games::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 50rem; height: 50rem; background: radial-gradient(closest-side, rgb(54 136 246 / 22%), transparent); pointer-events: none; }
.games .section__head p { color: var(--text-muted); }
.games__division { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.games__division img { width: 2.75rem; height: auto; }
.game-tiles { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .game-tiles { grid-template-columns: repeat(2, 1fr); } }
.game-tile { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-feature); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-media); color: var(--text); text-decoration: none; isolation: isolate; transition: transform var(--duration-ui) var(--ease-ui), box-shadow var(--duration-ui) var(--ease-ui), border-color var(--duration-ui) var(--ease-ui); }
.game-tile__art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.game-tile__art img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-entry) var(--ease-entry); }
.game-tile__art::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); pointer-events: none; }
.game-tile__art .game-tile__logo { position: absolute; left: 5%; bottom: 6%; width: 46%; height: auto; object-fit: contain; filter: drop-shadow(0 8px 16px rgb(0 0 0 / 35%)); transition: none; }
.game-tile__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-8) var(--space-8); }
.game-tile__body h3 { margin: 0; }
.game-tile__body p { margin: 0; color: var(--text-muted); }
.game-tile__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.game-tile__cta { font-family: var(--font-display); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.game-tile:hover, .game-tile:focus-visible { border-color: #5866A0; }
@media (hover: hover) { .game-tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 10px 26px -6px rgb(0 0 0 / 35%), 0 28px 56px -14px rgb(0 0 0 / 50%); } .game-tile:hover .game-tile__art picture img { transform: scale(1.03); } }

/* ------------------------------------------------------------------ how we work */
.principles { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; counter-reset: p; margin: 0; padding: 0; list-style: none; }
@media (min-width: 64rem) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principle { padding-top: var(--space-6); border-top: 2px solid var(--border); }
.principle::before { counter-increment: p; content: "0" counter(p); display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--type-caption); color: var(--ribbon-mid); letter-spacing: .1em; margin-bottom: var(--space-3); }
.principle h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.principle p { color: var(--text-muted); margin: 0; }

/* ------------------------------------------------------------------ contact */
.contact-card { position: relative; overflow: hidden; display: grid; gap: var(--space-8); padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radius-feature); background: radial-gradient(36rem 24rem at 0% 100%, rgb(255 245 227 / 78%), transparent 76%), linear-gradient(135deg, #F1F1FA, #E8EFFC 65%, #F8F9FC); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.contact-card h2 { margin-bottom: var(--space-3); }
.contact-card p { color: var(--text-muted); margin: 0; }
.contact-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.contact-list li { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-6); background: rgb(255 255 255 / 90%); border-radius: var(--radius-card); border: 1px solid var(--border); box-shadow: 0 3px 12px rgb(22 26 48 / 5%); }
.contact-list span { font-size: var(--type-caption); color: var(--text-muted); font-weight: 600; }
.contact-list a { font-family: var(--font-display); font-weight: 700; font-size: clamp(.95rem, .82rem + .9vw, 1.3rem); overflow-wrap: anywhere; }
.contact-card > *, .contact-list li, .split > * { min-width: 0; }
@media (min-width: 64rem) { .contact-card { grid-template-columns: 1.1fr 1fr; align-items: center; } }
@media (max-width: 30rem) { .contact-card { padding: var(--space-6) var(--space-4); } .contact-list li { padding: var(--space-4); } .contact-list a { font-size: 1rem; } }

/* ------------------------------------------------------------------ simple page (investors / support) */
.page-hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem); background: radial-gradient(50rem 30rem at 90% 0%, rgb(54 136 246 / 12%), transparent 65%), radial-gradient(36rem 26rem at 0% 100%, rgb(246 229 207 / 36%), transparent 72%), #FDFDFE; border-bottom: 1px solid var(--border); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { max-width: 40rem; }
.split { display: grid; gap: var(--space-12); }
@media (min-width: 64rem) { .split { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.stack > * + * { margin-top: var(--space-4); }
.facts { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.facts li { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: linear-gradient(155deg, #FFFFFF, #FCFBFA); box-shadow: var(--shadow-1); }
.facts strong { display: block; font-family: var(--font-display); font-size: var(--type-h3); line-height: 1.15; color: var(--brand); margin-bottom: var(--space-1); }
.facts span { color: var(--text-muted); }
.aside-card { padding: var(--space-8); border-radius: var(--radius-card); background: linear-gradient(155deg, #F8F8FC, #F4F3F0); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.aside-card h2 { font-size: var(--type-h3); }
.aside-card a.big { font-family: var(--font-display); font-weight: 700; font-size: clamp(.95rem, .82rem + .9vw, 1.3rem); overflow-wrap: anywhere; }
.note { font-size: var(--type-caption); color: var(--text-muted); }
.faq { display: grid; gap: var(--space-3); }
.faq details { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); padding: 0 var(--space-6); box-shadow: 0 3px 14px rgb(22 26 48 / 4%); }
.faq details:hover, .faq details[open] { border-color: #BFC7E1; }
.faq summary { cursor: pointer; padding: var(--space-4) 0; font-family: var(--font-display); font-weight: 600; list-style-position: outside; }
.faq details[open] summary { border-bottom: 1px solid var(--border); margin-bottom: var(--space-4); }
.faq details > *:last-child { margin-bottom: var(--space-4); }

/* ------------------------------------------------------------------ prose / legal docs */
.prose { max-width: var(--reading-width); }
.prose h2 { font-size: var(--type-h3); margin-top: var(--space-12); letter-spacing: var(--tracking-h3); }
.prose h3 { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3rem); margin-top: var(--space-8); margin-bottom: var(--space-2); }
.prose ul { padding-left: 1.25em; margin: 0 0 var(--space-4); }
.prose li + li { margin-top: var(--space-2); }
.prose > :first-child { margin-top: 0; }
.doc { padding-block: clamp(3rem, 7vw, 6rem) var(--section-space); background: radial-gradient(46rem 28rem at 90% 0%, rgb(236 238 250 / 55%), transparent 72%), #FFFFFF; }
.doc__wrap { display: grid; gap: var(--space-8) var(--space-16); }
.doc__head h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); max-width: 20ch; }
.doc__date { color: var(--text-muted); font-size: var(--type-caption); }
.doc__toc { align-self: start; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: linear-gradient(155deg, #F8F8FC, #F4F3F0); box-shadow: var(--shadow-1); font-size: var(--type-caption); }
.doc__toc p { font-family: var(--font-display); font-weight: 700; margin-bottom: var(--space-3); }
.doc__toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
@media (min-width: 64rem) {
  .doc__wrap { grid-template-columns: minmax(0, 1fr) 17rem; grid-template-areas: "head head" "body toc"; }
  .doc__head { grid-area: head; } .doc__body { grid-area: body; } .doc__toc { grid-area: toc; position: sticky; top: 7rem; }
}

/* ------------------------------------------------------------------ corporate footer */
.site-footer { padding-block: var(--space-16) var(--space-8); background: radial-gradient(44rem 28rem at 90% 0%, rgb(54 136 246 / 12%), transparent 75%), linear-gradient(135deg, var(--ink-start), var(--ink-end)); }
.site-footer__inner { display: grid; gap: var(--space-12); }
.site-footer__brand img { width: min(16rem, 70%); height: auto; margin-bottom: var(--space-4); }
.site-footer__brand p { color: var(--text-muted); margin: 0; }
.site-footer__nav { display: grid; gap: var(--space-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__nav h2 { font-size: var(--type-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); font-weight: 700; }
.site-footer__nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.site-footer__nav a { color: var(--text); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; transition: text-decoration-color var(--duration-ui) var(--ease-ui), color var(--duration-ui) var(--ease-ui); }
.site-footer__nav > div:last-child { grid-column: 1 / -1; }
@media (min-width: 64rem) { .site-footer__nav > div:last-child { grid-column: auto; } }
.site-footer__nav a:hover, .site-footer__nav a:focus-visible { text-decoration-color: currentColor; color: #FFFFFF; }
.site-footer__base { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--type-caption); }
.site-footer__base p { margin: 0; }
@media (min-width: 64rem) { .site-footer__inner { grid-template-columns: 1fr 2.2fr; } .site-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); } .site-footer__nav a { word-break: normal; } }

/* ------------------------------------------------------------------ corporate color and section rhythm */
.theme-corporate {
  --studio-coral: #A13D31; --studio-coral-soft: #FFE5D9;
  --studio-amber: #89510C; --studio-amber-soft: #FFF0D4;
  --studio-violet: #59439A; --studio-teal: #11665E;
}
.theme-corporate .eyebrow::before {
  content: ""; display: inline-block; width: 1.5rem; height: 3px;
  margin-right: var(--space-3); vertical-align: .3em;
  background: linear-gradient(90deg, var(--studio-coral), #D67B41);
}
.theme-corporate .ink-band .eyebrow::before,
.theme-corporate .band-ink .eyebrow::before { background: linear-gradient(90deg, #F3A780, #F6D49B); }
.theme-corporate .games__division::before { display: none; }
.theme-corporate .site-nav a:hover, .theme-corporate .site-nav a:focus-visible { background: var(--studio-coral-soft); color: var(--studio-coral); }
.theme-corporate .btn--secondary:hover { background: #FFF0E4; }
.theme-corporate .hero {
  background: radial-gradient(45rem 33rem at 3% 90%, #FFE0CC 0%, transparent 72%),
    radial-gradient(45rem 35rem at 92% 17%, #DCE8FF 0%, transparent 74%),
    linear-gradient(120deg, #FFFCF8, #F8FAFF);
}
.theme-corporate .section--canvas {
  position: relative;
  background: radial-gradient(40rem 27rem at 0% 0%, #FFE9D8 0%, transparent 75%),
    radial-gradient(38rem 28rem at 100% 100%, #E4ECFF 0%, transparent 78%),
    linear-gradient(145deg, #FFF9F2, #F5F7FD);
}
.theme-corporate .section--canvas::before,
.theme-corporate .site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--studio-coral), #E4A563 28%, var(--ribbon-mid) 72%, var(--ribbon-light));
}
.theme-corporate .page-hero + .section--canvas::before { content: none; }
.theme-corporate main > .section:not(.ink-band):not(.section--canvas) {
  background: radial-gradient(35rem 23rem at 95% 100%, #FFF1E5 0%, transparent 75%), #FFFCF8;
}
.theme-corporate .area {
  --area-accent: var(--brand); --area-tile: #E6ECFF; --area-edge: #B8C9F6; --area-wash: #F0F4FF;
  border-top: 3px solid var(--area-accent);
  background: linear-gradient(155deg, var(--area-wash), #FFFFFF 52%);
}
.theme-corporate .area--games { --area-accent: var(--studio-coral); --area-tile: #FFE2D3; --area-edge: #EAB9A5; --area-wash: #FFF3EC; }
.theme-corporate .area--ai { --area-accent: var(--studio-violet); --area-tile: #EAE4FB; --area-edge: #C8B8EB; --area-wash: #F5F1FD; }
.theme-corporate .area--personal { --area-accent: var(--studio-teal); --area-tile: #DDF2EB; --area-edge: #ACD8CD; --area-wash: #EFFAF6; }
.theme-corporate .area--enterprise { --area-accent: var(--brand); --area-tile: #E4ECFF; --area-edge: #B8C9F6; --area-wash: #F0F4FF; }
.theme-corporate .area__icon { color: var(--area-accent); background: var(--area-tile); border-color: var(--area-edge); }
.theme-corporate .area__link { color: var(--area-accent); }
@media (hover: hover) { .theme-corporate .area:hover { border-top-color: var(--area-accent); } }
.theme-corporate .principle { --principle-accent: var(--studio-coral); border-top: 3px solid var(--principle-accent); padding-inline: var(--space-4); background: linear-gradient(180deg, #FFF2E8, transparent 70%); }
.theme-corporate .principle:nth-child(2) { --principle-accent: var(--studio-violet); background: linear-gradient(180deg, #F2EDFC, transparent 70%); }
.theme-corporate .principle:nth-child(3) { --principle-accent: var(--studio-teal); background: linear-gradient(180deg, #EAF7F2, transparent 70%); }
.theme-corporate .principle::before { color: var(--principle-accent); font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); line-height: 1; letter-spacing: -.05em; margin-bottom: var(--space-4); }
.theme-corporate .contact-card {
  border-top: 3px solid var(--studio-coral);
  background: radial-gradient(36rem 25rem at 0% 100%, #FFE1CD 0%, transparent 78%),
    radial-gradient(40rem 25rem at 100% 0%, #DCE7FF 0%, transparent 78%), #F9F7FA;
}
.theme-corporate .contact-list li:first-child { border-left: 3px solid var(--studio-coral); }
.theme-corporate .contact-list li:last-child { border-left: 3px solid var(--ribbon-mid); }
.theme-corporate .page-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(38rem 27rem at 2% 80%, #FFE1CD 0%, transparent 73%),
    radial-gradient(42rem 30rem at 91% 15%, #DCE7FF 0%, transparent 75%),
    linear-gradient(120deg, #FFFCF8, #F7F9FF);
}
.theme-corporate .page-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, var(--studio-coral), #E4A563 32%, var(--ribbon-mid) 75%, var(--ribbon-light)); }
.theme-corporate .facts li { border-left: 3px solid var(--studio-coral); background: linear-gradient(140deg, #FFF5ED, #FFFFFF 55%); }
.theme-corporate .facts li:nth-child(2) { border-left-color: var(--studio-violet); background: linear-gradient(140deg, #F5F1FD, #FFFFFF 55%); }
.theme-corporate .facts li:nth-child(3) { border-left-color: var(--studio-teal); background: linear-gradient(140deg, #EDF8F4, #FFFFFF 55%); }
.theme-corporate .aside-card, .theme-corporate .doc__toc { border-top: 3px solid var(--studio-coral); background: linear-gradient(145deg, #FFF2E7, #F5F4FC 72%); }
.theme-corporate .faq details { background: #FFFDF9; border-left: 3px solid #E6AB8C; }
.theme-corporate .doc { background: radial-gradient(42rem 28rem at 4% 0%, #FFE5D2 0%, transparent 75%), radial-gradient(40rem 28rem at 100% 10%, #E4ECFF 0%, transparent 78%), #FFFCF8; }
.theme-corporate .doc__head { padding-bottom: var(--space-8); border-bottom: 3px solid var(--studio-coral); }
.theme-corporate .notfound { background: radial-gradient(40rem 26rem at 10% 75%, #FFE3D1 0%, transparent 75%), radial-gradient(38rem 25rem at 90% 15%, #E0E9FF 0%, transparent 78%), #FFFCF8; }
.theme-corporate .project-card { border-top: 3px solid var(--studio-coral); background: linear-gradient(145deg, #FFF6EF, #FFFFFF 55%); }
.theme-corporate .project-card--soon { border: 2px dashed #B2A5A1; border-top: 3px solid var(--studio-amber); background: linear-gradient(145deg, #FFF8EC, #F7F8FD); }
.theme-corporate .project-card__soon { color: var(--studio-amber); background: var(--studio-amber-soft); border-color: #E9C789; }
.theme-corporate .oss__facts li { border-top: 2px solid #EAA980; }
.theme-corporate .oss__features li { border-top-color: #8293C0; }
.theme-corporate .oss__start { border-top: 3px solid #EAA980; }
.theme-corporate .site-footer { position: relative; background: radial-gradient(36rem 26rem at 0% 100%, rgb(214 123 65 / 13%), transparent 75%), radial-gradient(44rem 28rem at 90% 0%, rgb(54 136 246 / 16%), transparent 75%), linear-gradient(135deg, var(--ink-start), var(--ink-end)); }

/* ================================================================== GAME PAGES */
.game-header { position: absolute; inset: 0 0 auto 0; z-index: var(--z-header); padding-block: var(--space-4); }
.game-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.game-header__studio { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: rgb(255 255 255 / 92%); color: #161A30; text-decoration: none; font-family: "Manrope", system-ui, sans-serif; font-weight: 700; font-size: .9rem; line-height: 1.1; box-shadow: 0 6px 20px rgb(0 0 0 / 18%); }
.game-header__studio img { width: 2.1rem; height: auto; }
.game-header__division { display: block; font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #596178; }
.game-nav ul { display: flex; gap: var(--space-1); margin: 0; padding: var(--space-1); list-style: none; border-radius: var(--radius-pill); background: rgb(16 21 47 / 92%); box-shadow: 0 6px 20px rgb(0 0 0 / 18%); }
.game-nav a:focus-visible { outline: 3px solid #FFD43B; outline-offset: 2px; }
@supports (backdrop-filter: blur(8px)) { .game-nav ul { backdrop-filter: blur(10px); } }
.game-nav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding-inline: var(--space-4); border-radius: var(--radius-pill); color: #fff; text-decoration: none; font-family: var(--font-body); font-weight: 800; font-size: .9rem; }
.game-nav a:hover, .game-nav a:focus-visible { background: rgb(255 255 255 / 18%); }
@media (max-width: 39.99rem) { .game-nav { display: none; } }

.g-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; background: var(--canvas); }
.g-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 70% 50%); }
.g-hero__scrim { pointer-events: none; }
.g-hero__logo { width: min(100%, 30rem); height: auto; filter: drop-shadow(0 14px 28px rgb(0 0 0 / 35%)); }
.g-hero h1 { margin: 0; }
.g-hero__copy { display: grid; justify-items: start; gap: var(--space-6); max-width: 34rem; }
.g-hero__tagline { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.1; margin: 0; }
.g-hero .pill { font-size: 1rem; padding: var(--space-3) var(--space-6); }
.g-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.g-hero__scroll { position: absolute; left: 50%; bottom: var(--space-6); translate: -50% 0; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--radius-control); color: #fff; background: rgb(0 0 0 / 30%); }

/* desktop: art fills the hero, brand + copy stacked in the quiet left area */
@media (min-width: 64rem) {
  .g-hero { min-height: min(100svh, 56rem); grid-template-rows: 1fr auto auto 1.15fr; padding-top: 5rem; }
  .g-hero__art, .g-hero__scrim, .clouds { position: absolute; inset: 0; }
  .g-hero__art { z-index: -2; } .g-hero__scrim { z-index: -1; }
  .g-hero__brand { grid-row: 2; margin-bottom: var(--space-6); }
  .g-hero__inner { grid-row: 3; }
}
/* phone/tablet: art on top with only the logo over its sky, copy on a solid panel below */
@media (max-width: 63.99rem) {
  .g-hero { grid-template-rows: auto auto; }
  .g-hero__art, .g-hero__scrim, .clouds, .g-hero__brand { grid-row: 1; grid-column: 1; }
  .g-hero__art { display: block; aspect-ratio: var(--hero-ratio-m, 3 / 4); max-height: 92svh; width: 100%; z-index: 0; }
  .g-hero__scrim, .clouds { position: relative; z-index: 1; }
  .g-hero__brand { position: relative; z-index: 2; align-self: start; display: grid; justify-items: center; padding-top: clamp(4.5rem, 18vw, 6.5rem); }
  .g-hero__logo { width: min(82%, 24rem); }
  .g-hero__inner { grid-row: 2; position: relative; z-index: 2; padding-block: var(--space-6) var(--space-12); margin-top: calc(-1 * var(--space-8)); }
  .g-hero__copy { justify-items: center; text-align: center; margin-inline: auto; gap: var(--space-4); }
  .g-hero__ctas { justify-content: center; }
  .g-hero__scroll { display: none; }
}
.motion-toggle { position: absolute; right: var(--gutter); bottom: var(--space-6); z-index: var(--z-raised); display: none; align-items: center; gap: var(--space-2); min-height: var(--control-min-height); padding-inline: var(--space-4); border-radius: var(--radius-pill); border: 0; background: rgb(255 255 255 / 88%); color: #1E2A5A; font: 800 .85rem/1 var(--font-body); cursor: pointer; }
.motion-ready .motion-toggle { display: inline-flex; }
@media (max-width: 63.99rem) { .motion-toggle { grid-row: 1; grid-column: 1; position: relative; z-index: 3; align-self: end; justify-self: end; right: auto; bottom: auto; margin: 0 var(--gutter) var(--space-12); } }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none !important; } }

.g-section { padding-block: var(--section-space); position: relative; }
.g-section__head { text-align: center; max-width: 44rem; margin: 0 auto var(--space-12); }
.g-section__head p { color: var(--text-muted); font-size: var(--type-lead); line-height: var(--leading-lead); }
.g-title { font-family: var(--font-display); font-weight: 400; }

/* intro / about */
.g-about { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 64rem) { .g-about { grid-template-columns: 1fr 1fr; } }
.g-about__media img { border-radius: var(--radius-media); box-shadow: var(--shadow-media); }
.g-stats { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.g-stats li { padding: var(--space-3) var(--space-6); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); text-align: center; }
.g-stats strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1; color: var(--primary); }
.g-stats span { font-size: var(--type-caption); color: var(--text-muted); font-weight: 700; }

/* character lineup */
.cast { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .cast { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cast { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cast--feature { margin-bottom: var(--grid-gap); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .cast--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cast-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-media); transition: transform var(--duration-ui) var(--ease-ui), box-shadow var(--duration-ui) var(--ease-ui); }
.cast-card__art { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface-tint); }
.cast-card__art::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); pointer-events: none; }
.cast-card__art img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-entry) var(--ease-entry); }
.cast-card__art--cutout img { object-fit: contain; padding: 8%; }
.cast-card--big .cast-card__art--cutout img { padding: 4% 8% 0; object-position: 50% 100%; }
.cast-card__body { padding: var(--space-4) var(--space-6) var(--space-6); min-width: 0; }
@media (max-width: 39.99rem) { .cast-card__body { padding: var(--space-3) var(--space-4) var(--space-4); } .cast-card h3 { overflow-wrap: anywhere; } }
@media (max-width: 22.99rem) { .cast { grid-template-columns: 1fr; } }
.cast-card__role { display: block; font-size: var(--type-caption); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-1); }
.cast-card h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); margin: 0 0 var(--space-2); }
.cast-card p { margin: 0; color: var(--text-muted); font-size: var(--type-caption); line-height: 1.5; }
.cast-card--big .cast-card__art { aspect-ratio: 4 / 3; }
.cast-card--big h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.cast-card--big p { font-size: var(--type-body); }
@media (hover: hover) { .cast-card:hover { transform: translateY(-2px); } .cast-card:hover .cast-card__art img { transform: scale(1.04); } }

/* features */
.features { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .features { grid-template-columns: repeat(4, 1fr); } }
.feature { padding: var(--space-8) var(--space-6); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); }
.feature__icon { width: 4.5rem; height: 4.5rem; margin-bottom: var(--space-4); }
.feature__icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 9px rgb(16 21 47 / 17%)); }
.feature h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); margin-bottom: var(--space-2); }
.feature p { color: var(--text-muted); margin: 0; }
/* RocketDash Armory: one card per weapon, glowing in that weapon's colour (--w) */
.arsenal { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .arsenal { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .arsenal { grid-template-columns: repeat(6, 1fr); } }
.weapon { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-6) var(--space-4); border-radius: var(--radius-card); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--w, #FFD43B) 30%, transparent), transparent 62%), var(--surface); border: 1px solid color-mix(in srgb, var(--w, #FFD43B) 45%, var(--border)); }
.weapon__art { display: flex; justify-content: center; align-items: center; height: 8.5rem; margin-bottom: var(--space-4); }
.weapon__art img { height: 8.5rem; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--w, #FFD43B) 55%, transparent)); }
.weapon__shout { font-family: var(--font-body); font-weight: 800; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--w, #FFD43B); margin-bottom: var(--space-1); }
.weapon h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); margin-bottom: var(--space-2); }
.weapon p { color: var(--text-muted); margin: 0; font-size: .95rem; }

/* worlds strip */
.worlds { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12rem, 16rem); gap: var(--space-4); overflow-x: auto; padding: var(--space-2) var(--gutter) var(--space-6); margin-inline: calc(-1 * var(--gutter)); scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); list-style: none; margin-block: 0; }
@media (min-width: 64rem) { .worlds { grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; } .worlds--islands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.world { scroll-snap-align: start; position: relative; overflow: hidden; border-radius: var(--radius-media); aspect-ratio: 2 / 3; box-shadow: var(--shadow-media); }
.world img { width: 100%; height: 100%; object-fit: cover; }
.world figcaption { position: absolute; inset: auto 0 0 0; padding: var(--space-12) var(--space-4) var(--space-4); background: linear-gradient(transparent, rgb(0 0 0 / 80%)); color: #fff; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.15; }
.world figcaption small { display: block; font-family: var(--font-body); font-weight: 800; font-size: .78rem; opacity: .85; letter-spacing: .04em; text-transform: uppercase; }

/* screenshots */
.shots { display: flex; gap: clamp(1rem, 3vw, 2rem); overflow-x: auto; padding: var(--space-4) var(--gutter) var(--space-8); margin: 0 calc(-1 * var(--gutter)); scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); list-style: none; }
.shots li { flex: 0 0 auto; scroll-snap-align: center; }
.phone { width: clamp(13rem, 11rem + 8vw, 17.5rem); padding: .55rem; border-radius: 2.4rem; background: #0B0F24; box-shadow: 0 0 0 2px rgb(255 255 255 / 12%) inset, var(--shadow-media); }
.phone img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 1.9rem; }
.shots figcaption { margin-top: var(--space-3); text-align: center; font-weight: 800; font-size: var(--type-caption); color: var(--text-muted); }

/* closing CTA */
.g-cta { text-align: center; }
.g-cta__box { display: grid; justify-items: center; gap: var(--space-6); padding: clamp(2.5rem, 6vw, 5rem) var(--space-6); border-radius: var(--radius-feature); background: var(--surface); border: 1px solid var(--border); }
.g-cta__box img.logo { width: min(80%, 26rem); }
.g-cta__box p { max-width: 36rem; margin: 0; color: var(--text-muted); }

/* game footer */
.game-footer { padding-block: var(--space-12); background: #0B0F24; color: #C9CDE2; }
.theme-cloudcrash .game-footer { background: #1E2A5A; }
.game-footer__inner { display: grid; justify-items: center; gap: var(--space-6); text-align: center; }
.game-footer__studio { display: grid; justify-items: center; gap: var(--space-3); color: #fff; text-decoration: none; font-family: "Manrope", system-ui, sans-serif; font-weight: 700; }
.game-footer__plate { display: block; padding: var(--space-4) var(--space-6); border-radius: var(--radius-card); background: #fff; }
.game-footer__plate img { width: min(15rem, 60vw); height: auto; }
.game-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
.game-footer__links a { color: #fff; font-family: "Source Sans 3", system-ui, sans-serif; }
.game-footer__legal { margin: 0; font-family: "Source Sans 3", system-ui, sans-serif; font-size: var(--type-caption); }
.game-footer :focus-visible { outline-color: #FFD43B; }

/* ------------------------------------------------------------------ RocketDash theme */
.theme-rocketdash .g-hero__scrim { background: linear-gradient(90deg, rgb(8 11 40 / 82%) 0%, rgb(8 11 40 / 55%) 34%, transparent 58%), linear-gradient(0deg, var(--canvas) 0%, transparent 22%); }
@media (max-width: 63.99rem) { .theme-rocketdash .g-hero__scrim { background: linear-gradient(180deg, rgb(8 11 40 / 70%) 0%, rgb(8 11 40 / 25%) 26%, transparent 40%, transparent 78%, var(--canvas) 100%); } }
.theme-rocketdash .g-hero__tagline, .theme-rocketdash .g-title { color: #fff; text-shadow: 0 3px 0 var(--display-outline), 0 6px 18px rgb(0 0 0 / 45%); }
.theme-rocketdash .g-title { font-size: var(--type-h2); }
.theme-rocketdash .g-title .hot { color: var(--hazard-yellow); }
.theme-rocketdash .pill, .theme-cloudcrash .pill { font-family: var(--font-body); font-weight: 800; }
.theme-rocketdash .pill { background: rgb(16 21 47 / 85%); color: #fff; border: 2px solid var(--hazard-yellow); }
.theme-rocketdash .pill::before { background: var(--hazard-yellow); opacity: 1; }
.theme-rocketdash .btn--primary { box-shadow: 0 4px 0 #B88C00, 0 10px 24px rgb(0 0 0 / 35%); font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: .02em; }
.theme-rocketdash .btn--primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #B88C00; }
.theme-rocketdash .btn--secondary { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; }
.hazard { height: .85rem; background: repeating-linear-gradient(-45deg, var(--hazard-yellow) 0 18px, #10152F 18px 36px); border-block: 2px solid #0B0F24; }
.theme-rocketdash .g-section--alt { background: radial-gradient(60rem 30rem at 50% 0%, #26306A, transparent 70%), #141A3A; }
.theme-rocketdash .cast-card, .theme-rocketdash .feature, .theme-rocketdash .g-stats li, .theme-rocketdash .g-cta__box { background: linear-gradient(180deg, #232C58, #1A2146); border: 2px solid #33407A; }
.theme-rocketdash .cast-card h3, .theme-rocketdash .feature h3 { color: #fff; }
.theme-rocketdash .cast-card--villain .cast-card__role { color: #FF8A80; }
.theme-rocketdash .cast-card--hero .cast-card__role { color: var(--hazard-yellow); }
.theme-rocketdash .g-stats strong { color: var(--hazard-yellow); }
.theme-rocketdash .phone { background: #05071A; }
/* Game trailer: a 9:16 video in a phone frame, sized to fit the screen height */
.trailer { display: grid; justify-items: center; gap: var(--space-8); }
.trailer__frame { width: min(100%, 25rem, calc((100svh - 9rem) * 9 / 16)); padding: .6rem; border-radius: 2.6rem; background: #05071A; box-shadow: 0 0 0 2px rgb(255 255 255 / 12%) inset, var(--shadow-media); }
.trailer__video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 2.05rem; background: #05071A; }
.trailer__controls { display: none; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.js .trailer__controls { display: flex; }
.trailer__btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-min-height); padding: .8rem 1.4rem; border-radius: var(--radius-pill); border: 2px solid var(--hazard-yellow); background: #1D2448; color: #fff; font: 800 .9rem/1 var(--font-body); cursor: pointer; }
.trailer__btn:hover { background: #2A335B; }
.trailer__btn[aria-pressed="true"] [data-wave] { opacity: 1; }
.theme-cloudcrash .trailer__frame { background: #1E2A5A; box-shadow: 0 0 0 2px rgb(255 255 255 / 30%) inset, var(--shadow-media); }
.theme-cloudcrash .trailer__video { background: #1E2A5A; }
.theme-cloudcrash .trailer__btn { background: #fff; color: var(--display-outline); border: 2px solid var(--display-outline); box-shadow: 0 3px 0 var(--display-outline); }
.theme-cloudcrash .trailer__btn:hover { background: var(--surface-tint); }
.theme-rocketdash .cast-card__art--cutout { background: radial-gradient(circle at 50% 58%, rgb(255 212 59 / 20%), transparent 62%), radial-gradient(circle at 50% 120%, rgb(232 50 43 / 28%), transparent 60%), #232C58; }

/* ------------------------------------------------------------------ Cloudcrash theme */
.theme-cloudcrash .g-hero { background: linear-gradient(180deg, #7BD9EE, #F7FBFF); }
.theme-cloudcrash .g-hero__scrim { background: linear-gradient(90deg, rgb(234 249 253 / 72%) 0%, rgb(234 249 253 / 35%) 32%, transparent 55%), linear-gradient(0deg, var(--canvas) 0%, transparent 20%); }
@media (max-width: 63.99rem) { .theme-cloudcrash .g-hero__scrim { background: linear-gradient(180deg, rgb(234 249 253 / 55%) 0%, transparent 34%, transparent 80%, var(--canvas) 100%); } }
.theme-cloudcrash .g-hero__tagline { color: var(--text); text-shadow: 0 2px 0 #fff, 0 0 18px rgb(255 255 255 / 80%); }
.theme-cloudcrash .g-title { font-size: var(--type-h2); color: var(--display-outline); letter-spacing: .01em; padding-bottom: .05em; }
.theme-cloudcrash .g-title .warm { color: var(--brass); text-shadow: 2px 0 0 var(--display-outline), -2px 0 0 var(--display-outline), 0 2px 0 var(--display-outline), 0 -2px 0 var(--display-outline), 0 4px 0 var(--display-outline); }
.theme-cloudcrash .pill { background: #fff; color: var(--text); border: 2px solid var(--display-outline); }
.theme-cloudcrash .pill::before { background: var(--leaf); opacity: 1; }
.theme-cloudcrash .btn--primary { border: 2px solid var(--display-outline); box-shadow: 0 4px 0 var(--display-outline); font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: .02em; }
.theme-cloudcrash .btn--primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--display-outline); }
.theme-cloudcrash .btn--secondary { border: 2px solid var(--display-outline); font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; }
.theme-cloudcrash .g-section--sky { background: linear-gradient(180deg, #E7F7FC, #F7FBFF); }
.theme-cloudcrash .g-section--sun { background: radial-gradient(50rem 26rem at 50% 0%, #FFF1D6, transparent 70%), #F7FBFF; }
.theme-cloudcrash .cast-card, .theme-cloudcrash .feature, .theme-cloudcrash .g-stats li, .theme-cloudcrash .g-cta__box { border: 2px solid #CFE3EC; box-shadow: 0 6px 0 #DCEAF0; }
.theme-cloudcrash .cast-card { box-shadow: var(--shadow-media); }
.theme-cloudcrash .cast-card__art { background: radial-gradient(circle at 50% 35%, #FFFFFF, #CFF1FA 70%); }
.theme-cloudcrash .cast-card--villain .cast-card__art { background: radial-gradient(circle at 50% 35%, #FFFFFF, #FFE0DA 70%); }
.theme-cloudcrash .cast-card__role { color: #2A7F96; }
.theme-cloudcrash .cast-card--villain .cast-card__role { color: #B03A2E; }
.theme-cloudcrash .g-stats strong { color: var(--display-outline); }
.theme-cloudcrash .rope { height: 14px; background: repeating-linear-gradient(-60deg, #C9934E 0 7px, #E8B877 7px 14px); border-block: 2px solid #8A5A22; }
.theme-cloudcrash .phone { background: #1E2A5A; }

/* decorative cloud layers (Cloudcrash hero) */
.clouds { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cloud-layer { position: absolute; left: 0; width: 112%; height: 30%; background-repeat: repeat-x; opacity: .9; }
.cloud-far { bottom: 18%; height: 26%; opacity: .55; background-image: radial-gradient(closest-side, #fff 60%, transparent 100%), radial-gradient(closest-side, #fff 55%, transparent 100%), radial-gradient(closest-side, #fff 60%, transparent 100%); background-size: 22rem 8rem, 30rem 10rem, 18rem 7rem; background-position: 0 70%, 14rem 100%, 34rem 80%; }
.cloud-near { bottom: -6%; height: 34%; background-image: radial-gradient(closest-side, #fff 62%, transparent 100%), radial-gradient(closest-side, #fff 58%, transparent 100%), radial-gradient(closest-side, #fff 62%, transparent 100%); background-size: 34rem 12rem, 26rem 10rem, 40rem 14rem; background-position: 0 100%, 20rem 80%, 42rem 100%; }

/* ------------------------------------------------------------------ open source */
.projects { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .projects { grid-template-columns: 1.4fr 1fr; } }
.project-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); background: linear-gradient(155deg, #FFFFFF, #FCFBFA); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-1); }
.project-card h3, .project-card p { margin: 0; }
.project-card p { color: var(--text-muted); }
.project-card__logo { width: 3.5rem; height: 3.5rem; margin-bottom: var(--space-2); }
.project-card__meta { font-family: var(--font-display); font-weight: 600; font-size: var(--type-caption); }
.project-card--soon { background: transparent; border: 2px dashed var(--control-border); box-shadow: none; justify-content: center; }
.project-card__soon { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border: 1px solid rgb(8 14 163 / 8%); border-radius: var(--radius-control); color: var(--brand); background: linear-gradient(135deg, #F3F0EF, #E8EEFC); margin-bottom: var(--space-2); }
.project-card__soon svg { width: 1.6rem; height: 1.6rem; }

.oss__intro { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 64rem) { .oss__intro { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); } }
.oss__copy > * + * { margin-top: var(--space-4); }
.oss__copy h2 { margin-bottom: 0; }
.oss__copy p { color: var(--text-muted); }
.oss__copy .lead { color: var(--text); }
.oss__copy .btn-row { margin-top: var(--space-8); }
.oss__brand { display: flex; align-items: center; gap: var(--space-4); }
.oss__brand img { width: 3.5rem; height: 3.5rem; }
.oss__brand .pill { margin: 0; }
.oss__note { padding-left: var(--space-4); border-left: 3px solid #8FB8FF; font-style: italic; }
.shot { margin: 0; }
.shot picture, .shot img { display: block; width: 100%; height: auto; }
.shot img { border-radius: var(--radius-media); box-shadow: var(--shadow-media); }
.shot figcaption { margin-top: var(--space-3); font-size: var(--type-caption); color: var(--text-muted); }
.shot__zoom { position: relative; display: block; border-radius: var(--radius-card); cursor: zoom-in; }
.shot__zoom img { transition: transform .25s var(--ease-entry, ease), box-shadow .25s ease; }
.shot__zoom:hover img { transform: translateY(-2px); }
.shot__hint { position: absolute; right: var(--space-3); bottom: var(--space-3); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-control); background: rgb(5 7 26 / 78%); color: #fff; border: 1px solid rgb(255 255 255 / 30%); pointer-events: none; transition: background .2s ease; }
.shot__hint svg { width: 1.35rem; height: 1.35rem; }
@media (max-width: 40rem) { .shot__hint { width: 2.25rem; height: 2.25rem; right: var(--space-2); bottom: var(--space-2); } .shot__hint svg { width: 1.1rem; height: 1.1rem; } }
.shot__zoom:hover .shot__hint, .shot__zoom:focus-visible .shot__hint { background: #fff; color: #05071A; border-color: #fff; }

/* Screenshot viewer (built by site.js) */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.lightbox::backdrop { background: #04051A; }
.lightbox__stage { position: absolute; inset: 4.5rem 5rem 5.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lightbox__stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--radius-media); box-shadow: 0 0 0 1px rgb(255 255 255 / 8%), 0 30px 80px rgb(0 0 0 / 60%); cursor: zoom-in; }
.lightbox.is-actual .lightbox__stage { display: block; overflow: auto; overscroll-behavior: contain; inset-inline: 0; }
.lightbox.is-actual .lightbox__stage img { max-width: none; max-height: none; height: auto; margin: 0 auto; cursor: zoom-out; border-radius: 0; }
.lightbox.is-actual .lightbox__nav { display: none; }
.lightbox.is-actual .lightbox__stage { cursor: grab; }
.lightbox.is-dragging .lightbox__stage, .lightbox.is-dragging .lightbox__stage img { cursor: grabbing; }
.lightbox.is-actual .lightbox__stage img { -webkit-user-drag: none; user-select: none; }
.lightbox__bar { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); }
.lightbox__bar--top { top: 0; height: 4.5rem; justify-content: space-between; }
.lightbox__bar--bottom { bottom: 0; min-height: 5.5rem; justify-content: center; text-align: center; }
.lightbox__count { font-weight: 800; font-size: var(--type-caption); color: #C9CDE2; }
.lightbox__caption { margin: 0; max-width: 46rem; font-size: var(--type-caption); color: #E6E9F5; }
.lightbox__tools { display: flex; gap: var(--space-3); }
.lightbox__btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 3rem; min-height: 3rem; padding: .6rem 1rem; border-radius: var(--radius-control); border: 1px solid rgb(255 255 255 / 35%); background: rgb(255 255 255 / 10%); color: #fff; font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; }
.lightbox__btn:hover { background: rgb(255 255 255 / 20%); }
.lightbox__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lightbox__btn svg { width: 1.2rem; height: 1.2rem; flex: none; }
.lightbox__btn--icon { padding: 0; width: 3rem; }
.lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 1; width: 3rem; height: 3rem; padding: 0; background: rgb(5 7 26 / 70%); }
.lightbox__nav--prev { left: var(--space-3); }
.lightbox__nav--next { right: var(--space-3); }
.lightbox__nav[hidden] { display: none; }
@media (max-width: 40rem) {
  .lightbox__stage { inset: 4rem 0 6.5rem; }
  .lightbox__bar--top { height: 4rem; }
  .lightbox__nav { top: auto; bottom: 1.25rem; translate: none; }
  .lightbox__bar--bottom { padding-inline: 4.5rem; min-height: 6.5rem; }
  .lightbox__zoom-label { display: none; }
  .lightbox__btn--zoom { padding: 0; width: 3rem; }
}
.oss__facts { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin: var(--space-16) 0 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .oss__facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .oss__facts { grid-template-columns: repeat(4, 1fr); } }
.oss__facts li { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 10px 24px -10px rgb(0 0 0 / 28%); }
.oss__facts strong { display: block; font-family: var(--font-display); font-size: var(--type-h3); line-height: 1.15; margin-bottom: var(--space-1); }
.oss__facts span { color: var(--text-muted); }
.oss__subhead { margin: var(--space-16) 0 var(--space-6); }
.oss__features { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .oss__features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .oss__features { grid-template-columns: repeat(3, 1fr); } }
.oss__features li { padding-top: var(--space-4); border-top: 2px solid var(--border); }
.oss__features h4 { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); margin-bottom: var(--space-2); }
.oss__features p { margin: 0; color: var(--text-muted); }
.oss__gallery { display: grid; gap: var(--space-12) var(--grid-gap); grid-template-columns: 1fr; margin: var(--space-16) 0 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .oss__gallery { grid-template-columns: repeat(2, 1fr); } }
.oss__start { display: grid; gap: var(--space-8); align-items: center; margin-top: var(--space-16); padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-feature); background: linear-gradient(155deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%)), var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 18px 40px -16px rgb(0 0 0 / 40%); }
@media (min-width: 64rem) { .oss__start { grid-template-columns: 1fr 1fr; } }
.oss__start h3 { margin-bottom: var(--space-3); }
.oss__start p { color: var(--text-muted); margin: 0 0 var(--space-6); }
.oss__code { margin: 0; padding: var(--space-6); border-radius: var(--radius-card); background: #05071A; border: 1px solid var(--border); color: #E6E9F5; font: 500 clamp(.85rem, .8rem + .2vw, .98rem)/1.7 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ 404 */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: var(--section-space); }
.notfound .eyebrow { font-size: 1rem; }

/* ------------------------------------------------------------------ motion (agreed rules) */
@keyframes ribbon-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(-8%); } }
@keyframes ruckus-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--ruckus-bob-distance)); } }

@media (prefers-reduced-motion: no-preference) {
  .reveal { transition: opacity var(--duration-entry) var(--ease-entry), transform var(--duration-entry) var(--ease-entry); }
  .reveal.is-reveal-pending { opacity: 0; transform: translateY(var(--reveal-distance)); }
  .reveal.is-reveal-pending:focus-within { opacity: 1; transform: none; }
  .motion-ready .ribbon-draw { stroke-dasharray: 1; animation: ribbon-draw var(--duration-ribbon) var(--ease-entry) both; }
  .motion-ready .cloud-far { animation: cloud-drift var(--duration-cloud-far) linear infinite alternate; }
  .motion-ready .cloud-near { animation: cloud-drift var(--duration-cloud-near) linear infinite alternate; }
  .motion-ready .ruckus-idle { animation: ruckus-idle var(--duration-ruckus) ease-in-out infinite; }
  .motion-paused .ambient-motion, .hero-motion.is-offscreen .ambient-motion, .document-hidden .ambient-motion { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .area:hover, .game-tile:hover, .game-tile:hover .game-tile__art img, .cast-card:hover, .cast-card:hover .cast-card__art img, .shot__zoom:hover img, .btn:active, .theme-rocketdash .btn--primary:active, .theme-cloudcrash .btn--primary:active { transform: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal.is-reveal-pending { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .game-header, .doc__toc, .skip-link { display: none !important; }
  body { color: #000; background: #fff; }
  .reveal.is-reveal-pending { opacity: 1 !important; transform: none !important; }
}

/* Cloudcrash island worlds */
.worlds--islands { grid-auto-columns: minmax(11rem, 14rem); }
.world--island { aspect-ratio: auto; display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4) var(--space-4); background: radial-gradient(circle at 50% 40%, #FFFFFF, #D8F3FB 70%); border: 2px solid #CFE3EC; box-shadow: var(--shadow-media); }
.world--island img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 12px rgb(30 42 90 / 18%)); }
.world--island figcaption { position: static; padding: 0; background: none; color: var(--text); text-align: center; }
.world--island figcaption small { color: var(--text-muted); }
/* 36 islands: keep them a scrolling strip on desktop too (the 7 RocketDash worlds still sit in a row) */
@media (min-width: 64rem) { .worlds--islands { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 13rem; overflow-x: auto; margin-inline: 0; padding-inline: 0; } }

/* phones: compact pause control, Cloudcrash logo clears Pip's hat */
@media (max-width: 63.99rem) {
  .motion-toggle { width: 3rem; padding: 0; justify-content: center; margin-bottom: var(--space-16); }
  .motion-toggle [data-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .theme-cloudcrash .g-hero__logo { width: min(70%, 21rem); }
  .theme-cloudcrash .g-hero__brand { padding-top: clamp(4.25rem, 16vw, 6rem); }
}

/* ------------------------------------------------------------------ rails (screenshot + world sliders) */
.rail { position: relative; --rail-thumb: var(--primary); --rail-track: rgb(255 255 255 / 12%); }
.theme-cloudcrash .rail { --rail-thumb: #1E2A5A; --rail-track: rgb(30 42 90 / 12%); }
.rail__bar { display: none; justify-content: flex-end; gap: var(--space-3); margin: calc(-1 * var(--space-6)) 0 var(--space-4); }
.js .rail__bar { display: flex; }
.rail--static .rail__bar { display: none; }
.rail__btn { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border-radius: var(--radius-control); cursor: pointer;
  border: 2px solid var(--control-border); background: var(--surface); color: var(--text);
  transition: background-color var(--duration-ui) var(--ease-ui), opacity var(--duration-ui) var(--ease-ui), transform var(--duration-ui) var(--ease-ui); }
.rail__btn:hover:not(:disabled) { background: var(--ghost-hover-bg); }
.rail__btn:disabled { opacity: .35; cursor: default; }
.theme-rocketdash .rail__btn { background: #1D2448; border-color: #FFD43B; color: #FFD43B; }
.theme-rocketdash .rail__btn:hover:not(:disabled) { background: #2A335B; }
.theme-cloudcrash .rail__btn { background: #fff; border-color: #1E2A5A; color: #1E2A5A; box-shadow: 0 3px 0 #1E2A5A; }
.theme-cloudcrash .rail__btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #1E2A5A; }

/* styled scrollbars: WebKit/Blink get the full treatment, Firefox the standard thin bar */
.rail .shots, .rail .worlds { padding-top: var(--space-2); padding-bottom: var(--space-8); margin-bottom: 0; }
.rail .shots::-webkit-scrollbar, .rail .worlds::-webkit-scrollbar { height: 8px; }
.rail .shots::-webkit-scrollbar-track, .rail .worlds::-webkit-scrollbar-track { background: var(--rail-track); border-radius: 999px; margin-inline: var(--gutter); }
.rail .shots::-webkit-scrollbar-thumb, .rail .worlds::-webkit-scrollbar-thumb { background: var(--rail-thumb); border-radius: 999px; }
.rail .shots::-webkit-scrollbar-thumb:hover, .rail .worlds::-webkit-scrollbar-thumb:hover { background: var(--primary-hover, var(--rail-thumb)); }
@supports not selector(::-webkit-scrollbar) {
  .rail .shots, .rail .worlds { scrollbar-width: thin; scrollbar-color: var(--rail-thumb) var(--rail-track); }
}
.rail .shots:focus-visible, .rail .worlds:focus-visible { outline-offset: -3px; border-radius: var(--radius-card); }
@media (prefers-reduced-motion: reduce) { .rail__btn:active { transform: none !important; } }