/* Warm, sculpted game UI. Shared layout and responsive rules live in styles.css. */
.screens-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 68%, #ffdc9d 0, #fff0ce 42%, #fff8e5 75%);
  color: #482945;
  padding-bottom: 60px;
}

/* Hero background video fades in after the initial key art. */
.hero-video { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center bottom; opacity:0; pointer-events:none; transition:opacity 1.2s ease; }
.hero-video.is-active { opacity:1; }
.tracklist-pagination { display:flex; align-items:center; justify-content:flex-end; gap:14px; padding-top:18px; font-size:11px; letter-spacing:.08em; }
.tracklist-pagination button { width:34px; height:30px; border:1px solid #a1ad7e; background:transparent; color:inherit; border-radius:4px; font-size:16px; }
.tracklist-pagination button:not(:disabled):hover { background:#cbd990; }
.tracklist-pagination button:disabled { opacity:.35; cursor:default; }
.music-section { position:relative; overflow:hidden; }
.music-section::before { content:""; position:absolute; width:min(62vw,760px); aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-50%); transform-origin:center; border-radius:50%; opacity:.19; background:conic-gradient(from 20deg, #101b29, #33465a 12deg, #111b2a 28deg, #263446 48deg, #101b29 72deg, #33465a 94deg, #111b29 126deg, #263446 160deg, #101b29 200deg, #33465a 240deg, #111b29 280deg, #263446 320deg, #101b29), radial-gradient(circle at 50% 50%, #e5eead 0 3%, transparent 3.5%), repeating-radial-gradient(circle at 50% 50%, #111b2a 0 2px, #263446 3px 5px, #101b29 6px 8px); box-shadow:0 24px 45px #39422733; pointer-events:none; will-change:transform; animation:vinyl-spin 18s linear infinite; }
.music-section::after { content:""; position:absolute; width:min(26vw,290px); aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-8deg); border-radius:50%; opacity:.18; background:url('assets/music/hyperspeed.jpg') center/cover; mix-blend-mode:multiply; pointer-events:none; }
@keyframes vinyl-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
/* Keep the record to the right while it turns slowly in place. */
.music-section::before { left:auto; right:-13%; transform:translateY(-50%); animation:vinyl-spin-right 38s linear infinite; }
@keyframes vinyl-spin-right { to { transform:translateY(-50%) rotate(360deg); } }
/* The record label/cover rotates with the vinyl. */
.music-section::after { left:auto; right:6%; transform:translateY(-50%) rotate(-8deg); animation:cover-spin-right 38s linear infinite; }
@keyframes cover-spin-right { to { transform:translateY(-50%) rotate(352deg); } }
/* Shared center line keeps the smaller cover centered on the larger record. */
.music-section { --vinyl-size:min(62vw,760px); --cover-size:min(26vw,290px); }
.music-section::before { width:var(--vinyl-size); right:-13%; }
.music-section::after { width:var(--cover-size); right:calc(-13% + (var(--vinyl-size) - var(--cover-size)) / 2); }
.music-section .wrap { position:relative; z-index:1; }
.screens-section h2 { text-align: center; position: relative; z-index: 1; }
.device-composition {
  width: min(100%, 1120px);
  aspect-ratio: 1.6;
  position: relative;
  isolation: isolate;
  margin: 65px auto 0;
}
.device-composition::before {
  content: "";
  position: absolute;
  width: 87%;
  height: 11%;
  left: 7%;
  bottom: 3%;
  border-radius: 50%;
  background: #ae653832;
  filter: blur(17px);
  z-index: -1;
}
.showcase-device { position: absolute; margin: 0; }
.device-shell {
  position: relative;
  padding: 1%;
  border: 2px solid #4f334d;
  background: linear-gradient(135deg, #785b71, #382a3e 40%, #604454);
  box-shadow: 0 3px 10px #623d3d30;
}
.device-display { position: relative; overflow: hidden; background: #382a3e; }
.screen-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 30% 20%, #fff3b0, transparent 65%), linear-gradient(135deg, #ffd15c, #ee9759);
}
.screen-placeholder::before {
  content: "";
  position: absolute;
  inset: -80%;
  background: repeating-conic-gradient(from 8deg, transparent 0deg 20deg, #fff5ce26 20deg 40deg);
}
.screen-placeholder img { position: relative; width: 44%; height: auto; opacity: .85; transform: rotate(-5deg); filter: drop-shadow(0 5px 0 #8e47251a); }
.device-screenshot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; }
.device-screenshot.is-loaded { opacity: 1; }
.showcase-laptop { width: 68%; left: 18%; top: 1%; z-index: 1; }
.showcase-laptop .device-shell { border-radius: 20px 20px 8px 8px; padding: .7% .7% 1%; box-shadow: 0 2px 6px #3e293a45; }
.showcase-laptop .device-shell::before {
  content: "";
  position: absolute;
  top: 1.3%;
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1e1d2c;
  box-shadow: inset 0 1px 0 #a8a1b1;
}
.showcase-laptop .device-display { aspect-ratio: 16 / 10; border-radius: 7px; border: 1px solid #2d2333; }
.laptop-base {
  position: relative;
  width: 115%;
  aspect-ratio: 9 / 1;
  margin: -1px -7.5% 0;
  background: linear-gradient(#cdb3b8, #ae8b9a 82%, #e0c6cb 83%, #b293a3 91%, #65485e 93%);
  clip-path: polygon(6.5% 0, 93.5% 0, 100% 84%, 99% 94%, 96% 100%, 4% 100%, 1% 94%, 0 84%);
  border-bottom: 2px solid #65485e;
}
.laptop-keyboard { position: absolute; top: 9%; left: 16%; width: 68%; height: 37%; border-radius: 4px; transform: perspective(140px) rotateX(15deg); background: repeating-linear-gradient(90deg, transparent 0 6%, #a0809429 6% 7%), repeating-linear-gradient(#523c53 0 24%, #b495a4 24% 32%); border: 1px solid #7d5c72; }
.laptop-trackpad { position: absolute; bottom: 21%; left: 40%; width: 20%; height: 25%; border: 1px solid #8b6d84; border-radius: 3px; background: #c9abb8; }
.showcase-tablet { width: 32%; left: 2%; bottom: 8%; transform: rotate(-7deg); z-index: 2; }
.showcase-tablet .device-shell { border-radius: 25px; padding: 1%; }
.showcase-tablet .device-display { aspect-ratio: 4 / 3; border-radius: 12px; border: 1px solid #2d2333; }
.showcase-tablet .screen-placeholder { background: radial-gradient(ellipse at 30% 20%, #ffe8a8, transparent 65%), linear-gradient(140deg, #edb576, #d07f99); }
.showcase-tablet .screen-placeholder img { width: 55%; }
.showcase-foldable { width: 32%; left: 35%; bottom: 2%; transform: perspective(1000px) rotateY(-7deg) rotate(-2deg); z-index: 4; }
.showcase-foldable .device-shell { padding: .9%; border-radius: 24px; box-shadow: 0 3px 10px #623d3d45; background: linear-gradient(90deg, #876b81, #32273a 48%, #b596a9 49.4%, #3b2b40 50.5%, #6b5066 52%, #39283d); }
.showcase-foldable .device-display { aspect-ratio: 1.15; border-radius: 15px; border: 1px solid #2d2333; }
.showcase-foldable .device-display::after { content: ""; position: absolute; inset: 0 auto 0 48%; width: 4%; z-index: 2; pointer-events: none; background: linear-gradient(90deg, transparent, #49314e35 40%, #241b303f 50%, #ffffff35 65%, transparent); }
.showcase-foldable .device-display::before { content: ""; position: absolute; top: 4%; right: 8%; width: 2%; aspect-ratio: 1; border-radius: 50%; background: #39263e; z-index: 3; }
.showcase-foldable .screen-placeholder { background: radial-gradient(ellipse at 20% 15%, #ffedd1, transparent 60%), linear-gradient(115deg, #f6c192 48%, #edb2a1 51%, #a3669a); }
.showcase-foldable .screen-placeholder img { width: 64%; }
.showcase-phone { width: 16%; right: 3%; bottom: 7%; transform: rotate(8deg); z-index: 3; }
.showcase-phone .device-shell { border-radius: 30px; padding: 1.2%; box-shadow: 0 3px 10px #623d3d40; }
.showcase-phone .device-display { aspect-ratio: 9 / 19.5; border-radius: 22px; border: 1px solid #2d2333; }
.showcase-phone .device-display::after { content: ""; position: absolute; z-index: 2; top: 3%; left: 34%; width: 32%; height: 3%; border-radius: 20px; background: #36283c; }
.showcase-phone .screen-placeholder { background: radial-gradient(ellipse at 40% 10%, #ffd998, transparent 65%), linear-gradient(170deg, #f5b27b, #975989); }
.showcase-phone .screen-placeholder img { width: 83%; }
@media (max-width: 760px) {
  .screens-section { padding-bottom: 48px; }
  .device-composition { width: calc(100% + 12px); margin: 42px -6px 0; aspect-ratio: 1.25; }
  .showcase-laptop { width: 83%; left: 9%; top: 0; }
  .showcase-laptop .device-shell { border-radius: 12px 12px 4px 4px; }
  .showcase-laptop .device-display { border-radius: 4px; }
  .laptop-keyboard, .laptop-trackpad { border-radius: 1px; }
  .showcase-tablet { width: 34%; left: 3%; bottom: 13%; }
  .showcase-tablet .device-shell { border-radius: 13px; }
  .showcase-tablet .device-display { border-radius: 7px; }
  .showcase-foldable { width: 37%; left: 34%; bottom: 2%; }
  .showcase-foldable .device-shell { border-radius: 12px; }
  .showcase-foldable .device-display { border-radius: 8px; }
  .showcase-phone { width: 20%; right: 2%; bottom: 13%; }
  .showcase-phone .device-shell { border-radius: 17px; }
  .showcase-phone .device-display { border-radius: 12px; }
  .device-shell { border-width: 1px; }
}
@font-face {
  font-family: "Lilita One";
  src: url("assets/fonts/LilitaOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Nunito;
  src: url("assets/fonts/Nunito-Variable.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
:root {
  --navy: #44264d;
  --navy-soft: #59345c;
  --paper: #fff6dd;
  --lime: #ffd344;
  --blue: #ee762d;
  --muted: #efdbf6;
  --line: #ffffff35;
  --ink: #482945;
  --gold-edge: #9c491f;
  font-family: Nunito, "Arial Rounded MT Bold", sans-serif;
  font-weight: 700;
  background: #3e2350;
}
body { background: #fff6dd; }
h1, h2, .ticker span, .big-number, .art-sticker, .stage-word {
  font-family: "Lilita One", "Arial Rounded MT Bold", sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.015em;
}
h1, h2 {
  color: #fff9e9;
  -webkit-text-stroke: 5px #482945;
  paint-order: stroke fill;
  text-shadow: 0 5px 0 #482945, 0 8px 0 #48294522;
  line-height: 1.02;
}
h2 { font-size: clamp(44px, 5.8vw, 78px); }
h3 { font-family: "Lilita One", sans-serif; font-weight: 400; letter-spacing: 0; }
.text-blue { color: #ffc643; }
.text-lime { color: #ffd64b; }
.section-pad { padding-block: 92px; }
.section-light { color: var(--ink); background: #fff6dd; }
.eyebrow { font-size: 12px; font-weight: 1000; letter-spacing: .09em; }
.status-dot { background: #ffce40; box-shadow: 0 0 0 4px #fff1b43d; }
.topbar {
  height: 90px;
  padding-inline: max(32px, calc((100% - 1280px) / 2));
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  background: transparent;
  border-bottom: 4px solid transparent;
  box-shadow: none;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.topbar.is-scrolled {
  background: #fff7e4;
  border-bottom-color: #e6c598;
  box-shadow: 0 4px 0 #4e274427;
}
.brand { font-family: "Lilita One", sans-serif; font-weight: 400; font-size: 17px; color: #512c48; }
.brand b { color: #d86519; }
.topbar .brand .brand-logo {
  width: 146px;
  height: 78px;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 2px 0 #7a492e25);
  transform: rotate(-3deg);
}
.nav { color: #53364e; font-size: 15px; font-weight: 900; gap: 28px; }
.topbar:not(.is-scrolled) .nav > a:not(.nav-cta) {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.topbar:not(.is-scrolled) .nav > a:not(.nav-cta):hover { color: #fff; }
.topbar.is-scrolled .nav > a:not(.nav-cta) { color: #53364e; text-decoration: none; }
.nav > a:not(.nav-cta):hover { color: #c6581f; }
.nav-cta, .button-lime {
  color: #67301f;
  border: 3px solid #9e4e27;
  border-radius: 15px;
  background: linear-gradient(#ffe66d, #ffbd35);
  box-shadow: inset 0 3px 0 #fff5bf, 0 5px 0 #a44d29, 0 8px 0 #52254422;
  font-family: "Lilita One", sans-serif;
  font-weight: 400;
  text-shadow: 0 1px 0 #fff4b9;
}
.nav-cta { padding: 11px 19px; font-size: 18px; transform: rotate(-2deg); }
.nav-cta:hover { color: #67301f !important; background: #ffe77c; }
.hero { height: min(780px, 100svh); min-height: 650px; background: #139bdc; }
.hero-bg { object-position: center bottom; }
.hero-shade {
  background: linear-gradient(90deg, #255789b8, #24476b49 39%, transparent 68%), linear-gradient(0deg, #11304b85, transparent 24%);
}
.hero-content { padding-bottom: 54px; }
.hero .eyebrow {
  display: inline-flex;
  color: #6e391f;
  background: #fff4d4;
  padding: 9px 17px;
  border: 2px solid #bc6c35;
  border-radius: 10px;
  box-shadow: 0 3px 0 #995126;
  transform: rotate(-3deg);
  margin-bottom: 26px;
}
.hero .status-dot { background: #ec9230; box-shadow: none; }
.hero h1 {
  font-size: clamp(70px, 8.2vw, 120px);
  line-height: .98;
  transform: rotate(-3deg);
  transform-origin: left center;
  -webkit-text-stroke: 7px #3d3158;
  text-shadow: 0 7px 0 #3d3158, 0 11px 0 #352b543f;
}
.hero h1 span { color: #ffda4f; }
.hero-description { color: #fff; font-weight: 900; font-size: 19px; line-height: 1.5; text-shadow: 0 2px 3px #163f70; margin-block: 28px 25px; }
.hero .button { font-size: 22px; padding: 16px 26px; gap: 32px; }
.button:hover { background: linear-gradient(#fff08a, #ffd04e); transform: translateY(-2px) rotate(-1deg); }
.button:active { transform: translateY(3px); box-shadow: inset 0 3px 0 #fff5bf, 0 2px 0 #a44d29; }
.platform-note { color: #fff4cf; font-size: 12px; font-weight: 900; text-shadow: 0 1px 3px #21477c; }
.hero-bottom { color: #fff6dc; font-size: 10px; font-weight: 1000; letter-spacing: .07em; text-shadow: 0 1px 2px #244876; }
.ticker {
  position: relative;
  z-index: 2;
  background: linear-gradient(#ffd76a, #ffb93a);
  border-top: 4px solid #fff0b3;
  border-bottom: 4px solid #d98435;
  box-shadow: 0 5px 0 #e9a85532;
  color: #763822;
}
.ticker > div { min-height: 80px; }
.ticker span { font-size: 26px; text-shadow: 0 2px 0 #fff0ad; }
.ticker i { color: #bf612e; font-size: 28px; }
.ticker > div {
  width: max-content;
  max-width: none;
  justify-content: flex-start;
  gap: 34px;
  animation: ticker-scroll 30s linear infinite;
  will-change: transform;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.section-heading { gap: 70px; }
.section-heading > p { font-size: 17px; color: #796051; line-height: 1.7; }
.game-section { background: radial-gradient(ellipse at 12% 90%, #ffdfa6, transparent 45%), #fff6dd; }
.game-section .eyebrow, .heroes-section .eyebrow { color: #b56630; }
.game-art {
  min-height: 480px;
  border: 6px solid #fffdf2;
  border-radius: 30px;
  outline: 3px solid #bd8253;
  background: #0797d7;
  box-shadow: 0 10px 0 #b8784c, 0 20px 26px #7e523224;
  transform: rotate(-2deg);
}
.world-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.orbit { display: none; }
.art-caption { top: 19px; left: 18px; z-index: 1; color: #fff; font-size: 11px; font-weight: 1000; letter-spacing: .04em; text-shadow: 0 2px 4px #294c68; max-width: 170px; }
.art-sticker { z-index: 1; background: #ffd349; color: #784022; border: 3px solid #9f502c; box-shadow: inset 0 3px 0 #fff4c0, 0 4px 0 #8c4b30; top: 17px; right: 17px; font-size: 26px; padding: 19px 12px; }
.art-coin { z-index: 1; top: auto; bottom: 24%; left: 9%; filter: drop-shadow(0 4px 0 #7439216b); }
.art-diamond { z-index: 1; bottom: 21%; right: 11%; filter: drop-shadow(0 4px 0 #243f796b); }
.art-footer { color: #fff; z-index: 1; left: 0; right: 0; bottom: 0; padding: 21px 23px; background: linear-gradient(transparent, #1b3e80c9); font-weight: 1000; font-size: 10px; letter-spacing: .035em; align-items: center; }
.gameplay-film { border-radius: 20px; z-index: 3; }
.game-steps article { border-color: #e5caa2; gap: 20px; }
.game-steps h3 { font-size: 27px; }
.game-steps p { font-size: 15px; color: #806352; }
.step-number { flex: none; color: #884728; display: grid; place-items: center; width: 38px; height: 40px; border: 2px solid #c27b39; border-radius: 12px; background: linear-gradient(#ffe695, #ffc246); font-family: "Lilita One", sans-serif; font-size: 20px; box-shadow: inset 0 2px 0 #fff4c7, 0 3px 0 #c08642; margin-top: 0; transform: rotate(-6deg); }
.step-icon { color: #d17b3b; font-weight: 1000; }
.perk-strip {
  display: grid;
  grid-template-columns: repeat(4, 54px);
  column-gap: clamp(24px, 3.5vw, 54px);
  row-gap: 18px;
  align-items: center;
  width: max-content;
  min-height: 100px;
}
.perk-icon {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  overflow: visible;
}
.perk-strip img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 260px;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 0 #75421d22);
}
@media (max-width: 760px) {
  .perk-strip {
    grid-template-columns: repeat(2, 40px);
    column-gap: 44px;
    row-gap: 18px;
    min-height: 210px;
  }
}
.dance-section {
  color: #fff6e5;
  background: radial-gradient(ellipse at 18% 80%, #b767b7, transparent 62%), linear-gradient(130deg, #6d3c8b, #86419b);
  border-block: 5px solid #512a64;
  box-shadow: inset 0 4px 0 #c788d538;
}
.dance-section .eyebrow { color: #ffd963; }
.dance-section .section-heading > p { color: #f5e1fa; }
.dance-section h2 { -webkit-text-stroke-color: #462354; text-shadow: 0 5px 0 #462354, 0 8px 0 #46235444; }
.dance-stage {
  background: repeating-conic-gradient(from 0deg at 50% 52%, #ffd566 0deg 18deg, #ffc45e 18deg 36deg);
  border: 7px solid #ffeaa2;
  border-radius: 32px;
  outline: 3px solid #502856;
  box-shadow: 0 10px 0 #4f2758, 0 18px 30px #43234855, inset 0 0 55px #e9853a44;
  transform: rotate(-2deg);
  color: #8c452f;
}
.stage-label { color: #864529; font-weight: 1000; font-size: 11px; letter-spacing: .06em; }
.stage-word { color: #fff0ac; -webkit-text-stroke: 2px #efab4f; paint-order: stroke fill; text-shadow: 0 7px 0 #df8e3c59; }
.dance-portrait { border: 9px solid #fff4d5; outline: 3px solid #9d592f; box-shadow: 9px 14px 0 #bb6b354f, 0 20px 35px #83492640; transform: translate(-50%, -46%) rotate(5deg); }
.stage-bottom { font-weight: 1000; font-size: 11px; letter-spacing: .025em; }
.stage-bottom > span { color: #fff2b3; -webkit-text-stroke: 2px #aa642c; }
#dance-video { border-radius: 23px; object-fit: cover; opacity: 0; transition: opacity .65s ease; }
#dance-video.is-visible { opacity: 1; }
.big-number { font-size: 110px; color: #ffdb57; -webkit-text-stroke: 5px #4e2a58; paint-order: stroke fill; text-shadow: 0 5px 0 #4e2a58; }
.big-number span { font-family: Nunito, sans-serif; color: #fff0cd; font-size: 13px; font-weight: 1000; letter-spacing: .04em; max-width: 110px; -webkit-text-stroke: 0; text-shadow: none; }
.dance-copy h3 { font-size: 30px; color: #fff7de; }
.dance-copy > p { color: #f5e1fa; font-size: 16px; }
.dance-picker { border-top: 2px solid #b67ac0; }
.dance-choice { border-bottom: 2px solid #b67ac0; padding: 14px 12px; border-radius: 10px; font-size: 18px; font-weight: 900; }
.dance-choice img { width: 48px; height: 48px; border-radius: 13px; filter: none; border: 2px solid #ddaff0; }
.dance-choice.is-active { color: #ffdd5d; background: #4624592b; }
.dance-choice.is-active img { outline-color: #ffd758; }
.dance-choice:hover { background: #49204c42; }
.dance-copy > .media-status { color: #e8c9ee; font-size: 12px; }
.music-section { color: #6b3b2e; background: radial-gradient(ellipse at 80% 10%, #ffdc72, transparent 65%), #ffc05a; border-bottom: 4px solid #d98d42; }
.music-section .eyebrow { color: #894024; }
.music-layout > * { min-width: 0; }
.music-section h2 { -webkit-text-stroke-color: #89432f; text-shadow: 0 5px 0 #89432f, 0 8px 0 #89432f22; }
.music-copy > p:not(.eyebrow) { color: #75442f; font-size: 17px; }
.music-stat { color: #844b2d; font-size: 11px; font-weight: 1000; letter-spacing: .04em; }
.music-stat > span:first-child { background: #fff0b3; border: 2px solid #a76637; box-shadow: 0 3px 0 #ae7039; width: 42px; height: 42px; font-size: 24px; }
.record-cover { border: 5px solid #fff0ba; border-radius: 10px; box-shadow: 0 6px 0 #94512d, 0 16px 22px #94482045; }
.record { border: 4px solid #572e44; box-shadow: 7px 9px 0 #a85d3257; background: repeating-radial-gradient(circle, #49304c 0 2px, #382339 3px 4px); }
.record:after { background: #ffc85d; }
.tracklist-label { color: #8c4e2b; border-color: #cf8c49; font-weight: 1000; font-size: 11px; letter-spacing: .04em; }
.track { border-color: #cf8c49; }
.track-no { color: #95532e; font-family: "Lilita One", sans-serif; font-size: 17px; }
.track > img { border: 2px solid #fff1c0; border-radius: 9px; width: 48px; height: 48px; box-shadow: 0 3px 0 #ab683a; }
.track h3 { font-size: 21px; }
.track p { color: #895434; font-size: 13px; }
.track-tag { background: #ffda83; border: 1px solid #c88a41; border-radius: 7px; font-weight: 1000; font-size: 9px; letter-spacing: .035em; }
.heroes-section { background: radial-gradient(ellipse at 85% 90%, #ffdfaa, transparent 60%), #fff6dd; }
.hero-filters { border: 0; gap: 13px; padding: 5px 3px 14px; }
.hero-filters button { font-family: "Lilita One", sans-serif; font-weight: 400; border: 2px solid #c7a175; border-radius: 13px; padding: 12px 17px; background: #fff9e8; color: #8a624c; box-shadow: 0 4px 0 #d1ae81; font-size: 17px; }
.hero-filters button:first-child { padding-left: 17px; }
.hero-filters button span { font-family: Nunito, sans-serif; font-size: 11px; font-weight: 1000; }
.hero-filters button.is-active { background: linear-gradient(#ffdc64, #ffbe3b); border-color: #a66531; color: #783c27; box-shadow: inset 0 2px 0 #ffeda5, 0 4px 0 #a66531; }
.hero-filters button:hover { color: #a1522e; transform: translateY(-2px); }
.hero-grid { gap: 30px; }
.hero-grid figure > div { position: relative; background: radial-gradient(ellipse at 50% 40%, #fff8e5, #ffd789); border: 4px solid #fffbec; outline: 2px solid #c69663; border-radius: 26px; box-shadow: 0 7px 0 #bb8f60, 0 12px 20px #9664391a; }
.hero-grid figure:nth-child(3n+2) > div { background: radial-gradient(ellipse at 50% 40%, #fff7e4, #c3d6dc); }
.hero-grid figure:nth-child(3n) > div { background: radial-gradient(ellipse at 50% 40%, #fff8ed, #edc5b3); }
.hero-grid img { width: 73%; mix-blend-mode: multiply; filter: saturate(1.08); }
.hero-grid figcaption { display: block; padding: 22px 8px 0; }
.hero-grid figcaption > span { display: block; }
.hero-grid figcaption small { display: block; margin-top: 6px; }
.hero-grid .hero-bio { margin-top: 13px; color: #765849; font-size: 15px; font-weight: 650; line-height: 1.7; }
.hero-grid figcaption > span { font-family: "Lilita One", sans-serif; font-size: 23px; letter-spacing: 0; }
.hero-grid small { font-size: 9px; color: #987650; font-weight: 1000; }
.challenge-section { color: #fff7e5; background: radial-gradient(ellipse at 0% 100%, #844a88, transparent 65%), #4d2d61; border-block: 4px solid #382045; }
.challenge-section .eyebrow { color: #ffd96b; }
.challenge-section { position:relative; overflow:hidden; background:radial-gradient(circle at 14% 18%, #9865a1 0 0, transparent 34%), radial-gradient(circle at 100% 100%, #2f244f 0 0, transparent 52%), #553164; }
.challenge-layout { position:relative; z-index:1; gap:90px; }
.challenge-layout > * { min-width:0; }
.challenge-intro { position:relative; }
.challenge-intro h2 { font-size:clamp(55px,7vw,102px); text-shadow:5px 6px 0 #382045; }
.challenge-lede { color:#f4dff1!important; font-size:17px!important; max-width:280px; margin-top:26px!important; }
.challenge-spark { color:#ffd96b; font-size:70px; line-height:1; margin-top:34px; transform:rotate(15deg); text-shadow:4px 4px 0 #382045; }
.challenge-list { display:grid; gap:18px; }
.challenge-card { position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:22px; padding:24px 30px 24px 36px; min-height:170px; border:2px solid #a16aa3; border-radius:20px; background:#6b3d76d9; box-shadow:8px 9px 0 #38204580, inset 0 1px 0 #fff4; overflow:hidden; }
.challenge-card { width:100%; min-width:0; }
.challenge-card > div { position:relative; z-index:1; align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding-right:24px; }
.challenge-card::before { content:""; position:absolute; width:180px; height:180px; border-radius:50%; right:-45px; top:-70px; background:#eac2ed1c; }
.challenge-card-achievement { background:#4d5a7ed9; border-color:#8094c0; }
.challenge-icon { display:grid; place-items:center; width:66px; height:66px; border-radius:18px; background:#ffd96b; box-shadow:4px 5px 0 #382045; transform:rotate(-6deg); }
.challenge-card-achievement .challenge-icon { background:#b8e7ff; transform:rotate(6deg); }
.challenge-icon img { width:43px; height:43px; }
.challenge-kicker { color:#ffd96b; font-size:9px; font-weight:900; letter-spacing:.15em; }
.challenge-card h3 { font-size:26px; margin:6px 0 8px; }
.challenge-card p { font-size:14px; color:#f4e5f2; max-width:420px; }
.challenge-card h3, .challenge-card p { overflow-wrap:anywhere; }
.challenge-arrow { position:relative; z-index:1; align-self:center; color:#ffd96b; font-size:28px; line-height:1; }
@media (max-width:760px) {
  .challenge-layout { gap:42px; }
  .challenge-intro h2 { font-size:clamp(52px,15vw,78px); }
  .challenge-card { grid-template-columns:1fr auto; gap:17px; padding:20px 17px; }
  .challenge-card .challenge-arrow { position:absolute; top:18px; right:17px; }
  .challenge-card h3 { font-size:22px; padding-right:24px; }
  .challenge-card p { font-size:13px; }
}
/* Final card inset: keep copy visibly away from the border at every breakpoint. */
.challenge-card { padding-left:36px !important; padding-right:30px !important; }
/* Responsive guardrails: let every content block grow instead of clipping. */
html, body { overflow-x:hidden; }
.challenge-card { min-height:0; height:auto; }
.challenge-card > div { min-width:0; }
@media (max-width:1100px) {
  .challenge-layout { grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:42px; }
  .challenge-card h3 { font-size:clamp(21px, 2.5vw, 26px); }
}
@media (max-width:760px) {
  .wrap { width:calc(100% - 32px); }
  .section-pad { padding-block:58px; }
  .challenge-layout { grid-template-columns:minmax(0,1fr); gap:34px; }
  .challenge-card { grid-template-columns:minmax(0,1fr) auto; min-height:0; padding:24px 30px 24px 30px !important; }
  .challenge-card > div { padding-right:12px; }
  .challenge-card h3 { font-size:clamp(21px, 7vw, 27px); line-height:1.15; }
  .challenge-card p { font-size:14px; line-height:1.55; }
  .challenge-arrow { align-self:start; }
  .challenge-spark { margin-top:20px; }
  .music-section::before { width:130vw; right:-58%; }
  .music-section::after { width:42vw; right:calc(-58% + 44vw); }
  .music-layout, .game-layout, .dance-layout { min-width:0; }
  .tracklist { min-width:0; }
  .track { min-width:0; }
  .track > div { min-width:0; }
  .track h3, .track p { overflow-wrap:anywhere; }
}
@media (max-width:380px) {
  .wrap { width:calc(100% - 24px); }
  .challenge-card { padding-left:22px !important; padding-right:22px !important; }
  .challenge-card h3 { font-size:21px; }
  .challenge-card p { font-size:13px; }
}
.download-section { color: #753923; background: radial-gradient(ellipse at 50% 25%, #ffeeb0, transparent 65%), #ffbd51; border-bottom: 5px solid #ca793a; }
.download-section:before, .download-section:after { border: 40px solid #ffe7994a; }
.download-inner h2 { -webkit-text-stroke-color: #874530; text-shadow: 0 6px 0 #874530, 0 9px 0 #87453025; }
.download-icon { width: 95px; height: 95px; border: 4px solid #fff2c5; border-radius: 25px; box-shadow: 0 5px 0 #ba713a, 0 12px 15px #994c2436; }
.download-inner > p:not(.eyebrow) { font-size: 16px; }
.download-inner .status-dot { background: #c96d27; }
.store-status { background: #573143; border: 3px solid #fff0bf; outline: 2px solid #915133; box-shadow: 0 5px 0 #915133; border-radius: 15px; padding: 14px 26px; }
.download-inner > .universal-note { font-size: 12px !important; font-weight: 900; }
.footer { position: relative; color: #67425c; padding-block: 35px; }
.footer nav { color: #885e69; font-size: 13px; font-weight: 900; }
.footer nav a:hover { color: #c05d25; }
.footer > small { color: #9b7777; border-top-color: #e6cda6; font-size: 11px; }
.simple-page { background: #fff6dd; color: #673d46; }
.simple-content p { color: #806352; }
.store-badge { background: #ffcb4d; color: #753d24; border: 2px solid #a96634; border-radius: 12px; box-shadow: 0 4px 0 #a96634; }
@media (min-width: 1600px) {
  .hero-shade { background: linear-gradient(90deg, #255789b8, #24476b49 39%, transparent 68%), linear-gradient(0deg, #11304b85, transparent 24%); }
}
@media (max-width: 1100px) {
  .nav { gap: 20px; font-size: 14px; }
  .hero h1 { font-size: clamp(72px, 8.9vw, 110px); }
  .hero-bg, .hero-video { object-position: center bottom; }
  .section-heading { gap: 42px; }
  .hero-filters { gap: 9px; }
  .hero-filters button { font-size: 16px; padding-inline: 13px; }
  .hero-grid figcaption > span { font-size: 21px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 82px; }
  .section-pad { padding-block: 66px; }
  .topbar { height: 78px; padding-inline: 20px; }
  .topbar .brand .brand-logo { width: 128px; height: 66px; }
  .menu-toggle { background: linear-gradient(#ffdf72, #ffbb3a); border: 2px solid #a06332; box-shadow: inset 0 2px 0 #fff1b5, 0 3px 0 #a06332; border-radius: 10px; width: 44px; }
  .menu-toggle span { background: #6e3c2b; height: 2px; }
  .nav { top: 77px; background: #fff7e4; border-bottom: 3px solid #d6ad75; border-radius: 0 0 20px 20px; font-size: 17px; box-shadow: 0 10px 15px #4b25442b; gap: 0; }
  .topbar:not(.is-scrolled):not(.nav-open) { background: transparent; border-bottom-color: transparent; box-shadow: none; }
  .topbar:not(.is-scrolled) .menu-toggle { background: linear-gradient(#ffdf72, #ffbb3a); border-color: #a06332; box-shadow: inset 0 2px 0 #fff1b5, 0 3px 0 #a06332; }
  .topbar:not(.is-scrolled) .menu-toggle span { background: #6e3c2b; }
  .topbar.nav-open { background: #fff7e4; border-bottom-color: #d6ad75; box-shadow: 0 4px 0 #4e274427; }
  .topbar.nav-open .nav > a:not(.nav-cta) { color: #53364e; text-decoration: none; }
  .topbar.nav-open .nav > a:not(.nav-cta):hover { color: #c6581f; }
  .nav a { padding: 13px; }
  .nav-cta { transform: none; margin-block: 10px 5px; font-size: 20px; }
  .hero { height: 780px; min-height: 0; background: #277ab1; }
  .hero-bg, .hero-video { height: 76%; object-position: center bottom; }
  .hero-shade { background: linear-gradient(0deg, #226997 0%, #256b9dee 22%, #2775a52e 54%, transparent 70%); }
  .hero-content { padding-bottom: 85px; }
  .hero .eyebrow { font-size: 10px; padding: 7px 12px; margin-bottom: 22px; }
  .hero h1 { font-size: clamp(57px, 12.4vw, 86px); -webkit-text-stroke-width: 5px; text-shadow: 0 5px 0 #3d3158, 0 8px 0 #352b543f; }
  .hero-description { max-width: 320px; margin-block: 22px; font-size: 16px; }
  .hero .button { font-size: 20px; padding: 14px 23px; }
  .platform-note { font-size: 11px; }
  .hero-bottom { font-size: 8px; letter-spacing: .03em; }
  .hero-bottom > span { max-width: 210px; }
  .ticker > div { min-height: 64px; display: flex; justify-content: flex-start; width: max-content; gap: 22px; padding: 10px 20px; animation-duration: 24s; }
  .ticker span { font-size: clamp(15px, 4.2vw, 20px); }
  .ticker i { font-size: 15px; }
  h2 { font-size: clamp(43px, 10.6vw, 70px); -webkit-text-stroke-width: 4px; }
  .section-heading { gap: 26px; }
  .section-heading > p { font-size: 16px; }
  .game-art { min-height: 420px; width: calc(100% - 10px); border-radius: 26px; }
  .art-caption { max-width: 155px; font-size: 10px; }
  .art-sticker { font-size: 23px; }
  .game-layout { gap: 45px; }
  .game-steps article { gap: 14px; }
  .game-steps h3 { font-size: 25px; }
  .game-steps p { font-size: 15px; }
  .step-number { width: 33px; height: 36px; font-size: 18px; border-radius: 10px; }
  .step-icon { display: none; }
  .dance-stage { min-height: 440px; margin-inline: 5px; }
  .dance-layout { gap: 38px; }
  .big-number { font-size: 96px; }
  .big-number span { font-size: 12px; }
  .dance-copy h3 { font-size: 28px; }
  .dance-copy > p { font-size: 16px; }
  .music-copy > p:not(.eyebrow) { font-size: 16px; }
  .music-stat { font-size: 10px; }
  .track h3 { font-size: 19px; }
  .tracklist-label { font-size: 10px; }
  .track { gap: 13px; }
  .track-tag { font-size: 8px; }
  .hero-filters { padding: 5px 22px 14px; margin-inline: -20px; gap: 10px; }
  .hero-filters button { font-size: 17px; padding: 11px 15px; }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-grid figure { display: block; min-width: 0; }
  .hero-grid figure > div { border-radius: 22px; aspect-ratio: 1.4; width: 100%; }
  .hero-grid img { width: 60%; }
  .hero-grid figcaption { display: block; padding: 22px 8px 8px; }
  .hero-grid figcaption > span { font-size: 26px; }
  .hero-grid small { font-size: 10px; margin-top: 8px; }
  .challenge-list h3 { font-size: 24px; }
  .challenge-list p { font-size: 15px; }
  .download-inner h2 { font-size: clamp(43px, 11vw, 70px); }
  .download-inner > p:not(.eyebrow) { max-width: 320px; }
  .footer .brand { font-size: 16px; }
  .footer nav { font-size: 13px; }
}
@media (max-width: 380px) {
  .hero { height: 760px; }
  .hero h1 { font-size: 53px; }
  .hero-bottom > span { max-width: 170px; }
  .game-art { min-height: 380px; }
  .art-caption { max-width: 130px; }
  .art-sticker { font-size: 20px; }
  .dance-stage { min-height: 390px; }
  .dance-portrait { width: 242px; height: 242px; }
  .stage-bottom { font-size: 9px; }
  .record-display { width: 250px; height: 210px; }
  .record { width: 180px; height: 180px; }
  .record-cover { width: 175px; height: 175px; }
  .track h3 { font-size: 18px; }
  .hero-grid figure > div { width: 100%; aspect-ratio: 1.4; }
  .hero-grid img { width: 60%; }
  .hero-grid figcaption > span { font-size: 24px; }
}

/* A light cartoon finish: rounded toy-like surfaces, crisp edges and highlights. */
.nav-cta, .button-lime {
  border-radius: 19px 16px 20px 17px;
  box-shadow: inset 0 4px 0 #fff5bf, inset 0 -4px 0 #e9952e55, 0 6px 0 #984628, 0 9px 0 #52254422;
}
.hero .eyebrow { border-radius: 14px 10px 15px 11px; }
.ticker i { color: #ac4f31; transform: rotate(-10deg); }
.art-sticker { box-shadow: inset 0 4px 0 #fff4c0, 0 5px 0 #8c4b30; }
.game-art, .dance-stage { border-radius: 36px 29px 35px 30px; }
.hero-grid figure > div {
  border-radius: 32px 25px 31px 26px;
  outline: 3px solid #a8734e;
  box-shadow: inset 0 3px 0 #fff9df, 0 8px 0 #b17b51, 0 14px 20px #96643920;
}
.hero-filters button { border-radius: 16px 13px 15px 12px; }
.record-cover { border-radius: 16px 12px 15px 11px; }
.screens-section {
  background: radial-gradient(ellipse at 50% 68%, #ffd58c 0, #fff0ce 45%, #fff8e5 78%);
}
.device-composition::before { background: #b877493b; filter: blur(10px); }
.showcase-device .device-shell {
  border: 2px solid #51304f;
  background: linear-gradient(145deg, #c19cb3, #946c93 38%, #735273);
  box-shadow: 0 3px 10px #623d3d2b;
}
.showcase-laptop,
.showcase-tablet,
.showcase-foldable,
.showcase-phone {
  --screen-radius: 12px;
}
.showcase-tablet { --screen-radius: 18px; }
.showcase-foldable { --screen-radius: 20px; }
.showcase-phone { --screen-radius: 26px; }
.showcase-device .device-shell { border-radius: calc(var(--screen-radius) + 2px); }
.showcase-laptop .device-shell {
  border-radius: calc(var(--screen-radius) + 2px);
  box-shadow: 0 2px 6px #59365055;
}
.showcase-laptop .device-display { border-radius: var(--screen-radius); }
.laptop-base { background: linear-gradient(#ddc0d0, #b88cae 80%, #f4dce9 82%, #c4a0ba 91%, #704965 93%); border-bottom-color: #704965; }
.laptop-trackpad { background: #e1bed3; border-color: #97718f; border-radius: 6px; }
.showcase-tablet .device-shell { border-radius: calc(var(--screen-radius) + 2px); }
.showcase-tablet .device-display { border-radius: var(--screen-radius); }
.showcase-phone .device-shell { border-radius: calc(var(--screen-radius) + 2px); }
.showcase-phone .device-display { border-radius: var(--screen-radius); }
.showcase-foldable .device-shell {
  border-radius: calc(var(--screen-radius) + 2px);
  background: linear-gradient(90deg, #c49eb5, #946a90 47%, #6c456c 49%, #e1bfd4 50%, #a9799d 52%, #8b658a);
}
.showcase-foldable .device-display { border-radius: var(--screen-radius); }
.showcase-device .device-display { border: 1px solid #69415f; }
.screen-placeholder img { opacity: 1; filter: drop-shadow(0 4px 0 #8e472533); }
.device-composition::after {
  content: "";
  position: absolute;
  left: 8%; top: 13%;
  width: 30px; height: 43px;
  background: #ffcf4f;
  clip-path: polygon(50% 0, 64% 35%, 100% 50%, 64% 65%, 50% 100%, 36% 65%, 0 50%, 36% 35%);
  transform: rotate(-14deg);
  pointer-events: none;
}
@media (max-width: 760px) {
  .showcase-device .device-shell { border-width: 2px; border-radius: calc(var(--screen-radius) + 2px); box-shadow: 0 2px 7px #623d3d2b; }
  .showcase-laptop,
  .showcase-tablet,
  .showcase-foldable,
  .showcase-phone { --screen-radius: 7px; }
  .showcase-tablet { --screen-radius: 9px; }
  .showcase-foldable { --screen-radius: 11px; }
  .showcase-phone { --screen-radius: 14px; }
  .showcase-device .device-display { border-radius: var(--screen-radius); }
  .device-composition::after { width: 14px; height: 22px; left: 1%; top: 11%; }
}

/* Character cards: compact avatar beside the copy, all contained in the color panel. */
.hero-grid figure { position: relative; }
.hero-grid figure > div {
  display: block;
  padding: 0;
  aspect-ratio: auto;
  min-height: 210px;
}
.hero-grid img {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 64px;
  height: 64px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: saturate(1.08);
}
.hero-grid figcaption {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  padding: 20px;
  overflow: visible;
}
.hero-grid figcaption > span {
  position: absolute;
  left: 98px;
  top: 32px;
  right: 0;
  max-height: 1.1em;
  overflow: hidden;
  text-align: left;
  font-family: "Lilita One", sans-serif;
  font-size: 23px;
  line-height: 1.05;
  letter-spacing: 0;
}
.hero-grid figcaption small {
  position: absolute;
  left: 98px;
  top: 58px;
  right: 0;
  display: block;
  margin: 0;
  text-align: left;
}
.hero-grid .hero-bio {
  position: relative;
  margin: 78px 0 0;
  padding-top: 12px;
  border-top: 1px solid #a8734e99;
  color: #765849;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.55;
  overflow: visible;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .hero-grid figure > div { min-height: 190px; }
  .hero-grid img { left: 16px; top: 16px; width: 52px; height: 52px; }
  .hero-grid figcaption { padding: 16px; }
  .hero-grid figcaption > span { left: 82px; top: 24px; font-size: 22px; }
  .hero-grid figcaption small { left: 82px; top: 48px; }
  .hero-grid .hero-bio { margin-top: 68px; padding-top: 10px; font-size: 15px; line-height: 1.5; }
}

/* Character packs: use the supplied scene as the section backdrop and give the picker room to breathe. */
.heroes-section {
  --hero-pack-bg: url("assets/characters/backgrounds/originals.png");
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fff6dd;
}
.heroes-section::before,
.heroes-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.heroes-section::before {
  z-index: -2;
  background-image: var(--hero-pack-bg);
  background-position: center center;
  background-size: cover;
  opacity: 1;
}
.heroes-section::after {
  display: none;
}
.heroes-section > .wrap {
  position: relative;
  z-index: 1;
}
.heroes-heading {
  display: block;
  margin-bottom: 0;
}
.heroes-heading h2 {
  white-space: nowrap;
  font-size: clamp(48px, 6vw, 76px);
  text-shadow: 0 4px 0 #fff6dd99;
}
.heroes-section .hero-filters {
  margin-top: 352px;
}
@media (max-width: 760px) {
  .heroes-heading h2 {
    font-size: clamp(34px, 10vw, 56px);
  }
  .heroes-section .hero-filters {
    margin-top: 232px;
  }
}

/* Let the picker hang into the next section while the heroes section keeps its original height. */
.heroes-section {
  overflow: visible;
  z-index: 2;
}
.heroes-section::before {
  background-position: center 46%;
}
.heroes-section .hero-filters,
.heroes-section .hero-grid {
  position: relative;
  top: 220px;
  z-index: 3;
}
@media (max-width: 760px) {
  .heroes-section .hero-filters,
  .heroes-section .hero-grid {
    top: 160px;
  }
}

/* Mobile/tablet hero picker: one card at a time, with horizontal swipe and snap. */
@media (max-width: 760px) {
  .menu-toggle {
    display: flex;
  }
  .hero-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: 20px;
    margin-inline: -20px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hero-grid::-webkit-scrollbar {
    display: none;
  }
  .hero-grid figure {
    flex: 0 0 min(86vw, 520px);
    scroll-snap-align: start;
  }
}

/* Give the overlapping cards a clear purple landing area before the challenge copy. */
.challenge-section {
  padding-top: 180px;
}
@media (max-width: 760px) {
  .challenge-section {
    padding-top: 150px;
  }
}

/* Keep the hero media full-bleed at tablet and mobile breakpoints. */
@media (max-width: 1100px) {
  .hero-bg,
  .hero-video {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}

/* Keep every hero crop top-anchored, while mobile keeps the copy high and DIVE IN low. */
.hero-bg,
.hero-video {
  object-position: center top;
}
@media (max-width: 760px) {
  .hero-content {
    justify-content: flex-start;
    align-items: center;
    padding-top: 142px;
    padding-bottom: 0;
    text-align: center;
  }
  .hero-shade {
    background: linear-gradient(180deg, #226997 0%, #256b9dee 22%, #2775a52e 54%, transparent 70%);
  }
  .hero-bottom {
    bottom: 23px;
  }

  /* Keep all four pickup icons on one line in the mobile game steps. */
  .perk-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 100px;
  }
  .perk-strip .perk-icon {
    flex: 0 0 40px;
  }
}