/* Drift Girls Reborn: site styles. Palette and shapes follow the game's own UI:
   gunmetal panels with a lit top edge, cyan glossy buttons, gold stars, the logo's magenta. */
@font-face {
  font-family: "Hemi Head";
  src: url("../fonts/HemiHeadBdIt.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #0a0c12;
  --bg-2: #10141d;
  --panel: #171c27;
  --panel-2: #1f2633;
  --line: #2d3647;
  --line-hi: #46526a;
  --text: #e9edf5;
  --text-2: #a9b3c6;
  --text-3: #7f8aa0;
  --cyan: #2cc4f2;
  --cyan-hi: #7fe3ff;
  --cyan-lo: #0b7fb8;
  --cyan-deep: #0a5c88;
  --pink: #ff3d8e;
  --gold: #ffcf3a;
  --display: "Hemi Head", "Arial Black", "Segoe UI", sans-serif;
  --body: "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 6px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--body);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan-hi); }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--cyan-hi); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1em; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cyan); color: #00131c; padding: 10px 16px; font-weight: 700; border-radius: var(--radius); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; height: 32px; margin: 0 0 16px; padding: 0 18px 0 6px;
  border-style: solid; border-width: 0 16px 0 46px; border-image: url("../img/ui/list01.png") 0 20 0 58 fill / 0 16px 0 46px;
  font: 700 italic 15px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.h2 {
  font: 700 italic clamp(30px, 4.6vw, 52px)/1.04 var(--display);
  letter-spacing: .005em;
  text-wrap: balance;
}
.h3 { font: 700 italic 24px/1.1 var(--display); margin-bottom: 18px; }
.section { padding: clamp(64px, 8vw, 110px) 0; position: relative; }
.section__head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section__intro { color: var(--text-2); font-size: 18px; margin: 16px 0 0; }

/* ---------- buttons (the game's cyan glossy button) ---------- */
.btn {
  --h: 50px; --by: 13px; --bx: 28px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 10px;
  border-style: solid; border-width: 13px 28px; border-image: url("../img/ui/btn1_blue.png") 15 35 18 35 fill / 13px 28px;
  font: 700 18px/1 var(--body); letter-spacing: .01em;
  color: #fff; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 25, 45, .95), 0 0 10px rgba(0, 40, 70, .5);
  filter: drop-shadow(0 8px 18px rgba(30, 190, 240, .28));
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), filter .2s ease;
}
.btn:hover { color: #fff; filter: brightness(1.12) drop-shadow(0 10px 26px rgba(30, 190, 240, .5)); }
.btn:active { transform: translateY(2px) scale(.975); filter: brightness(.92) drop-shadow(0 4px 10px rgba(30, 190, 240, .3)); transition-duration: .06s; }
.btn--big { --h: 72px; --by: 16px; --bx: 34px; padding: 0 14px; white-space: nowrap; font-size: clamp(17px, 4.4vw, 24px); border-width: 16px 34px; border-image-width: 16px 34px; }
.btn--small { --h: 40px; --by: 10px; --bx: 18px; padding: 0 2px; font-size: 15px; border-width: 10px 18px; border-image-width: 10px 18px; }
.btn__icon { width: 1.15em; height: 1.15em; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 25, 45, .9)); }

.iconbtn {
  width: 50px; height: 50px; display: inline-grid; place-items: center; padding: 0; cursor: pointer; color: #fff;
  background: none; border-style: solid; border-width: 12px; border-image: url("../img/ui/tab_on.png") 25 fill / 12px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
.iconbtn { transition: transform .15s cubic-bezier(.2, .8, .2, 1), filter .2s ease; }
.iconbtn:hover { filter: brightness(1.15) drop-shadow(0 4px 14px rgba(30, 190, 240, .5)); }
.iconbtn:active { transform: scale(.92); transition-duration: .06s; }
.iconbtn svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0, 25, 45, .9)); }

/* the game's panel: gunmetal, lit top edge, thin dark outline */
.panel {
  border-style: solid; border-width: 20px; border-image: url("../img/ui/info_bg.png") 40 fill / 20px;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45));
}
.frame-ui {
  border-style: solid; border-width: 12px; border-image: url("../img/ui/popup1_infobg1.png") 30 fill / 12px;
}

/* ---------- top bar ---------- */
.topbar { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s ease, box-shadow .3s ease; }
.topbar.is-solid { background: rgba(10, 12, 18, .94); box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0, 0, 0, .4); }
@media (hover: hover) and (pointer: fine) { @supports (backdrop-filter: blur(8px)) { .topbar.is-solid { background: rgba(10, 12, 18, .82); backdrop-filter: blur(10px); } } }
.topbar__inner { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 24px; }
.topbar__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.topbar__brand img { width: 112px; height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.topbar__nav { margin-left: auto; }
.topbar__nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.topbar__nav a { position: relative; display: block; padding: 8px 12px; color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 4px; }
.topbar__nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.topbar__nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; background: var(--cyan);
  transform: scaleX(0) skewX(-30deg); transform-origin: 0 50%; transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.topbar__nav a:hover::after, .topbar__nav a.is-active::after { transform: scaleX(1) skewX(-30deg); }
.topbar__nav a.is-active { color: #fff; }
.topbar__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 8px rgba(44, 196, 242, .6); opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.topbar.is-solid .topbar__progress { opacity: 1; }
.topbar__menu { display: none; }

@media (max-width: 480px) { .topbar .btn--small { display: none; } .topbar__menu { margin-left: auto; } }
@media (max-width: 1020px) {
  .topbar__inner { gap: 12px; }
  .topbar__nav { margin-left: auto; order: 3; }
  .topbar .btn--small { margin-left: auto; }
  .topbar__menu {
    display: inline-grid; gap: 5px; place-content: center; width: 44px; height: 44px; order: 4;
    background: none; border: 1px solid var(--line-hi); border-radius: 5px; cursor: pointer;
  }
  .topbar__menu span { width: 20px; height: 2px; background: var(--text); display: block; }
  .topbar__nav ul {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; padding: 8px var(--gutter) 16px; background: rgba(10, 12, 18, .97);
    border-bottom: 1px solid var(--line);
  }
  .topbar__nav ul.is-open { display: flex; }
  .topbar__nav a { padding: 12px 8px; font-size: 17px; }
  .topbar__nav a::after { left: 8px; right: auto; width: 40px; bottom: 6px; }
  .topbar__nav { margin-left: 0; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: clamp(640px, 100svh, 64vw); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; }
.hero__art { position: absolute; inset: 0; z-index: -2; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; will-change: transform; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 12, 18, .92) 0%, rgba(10, 12, 18, .7) 34%, rgba(10, 12, 18, .1) 64%, rgba(10, 12, 18, 0) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10, 12, 18, .6) 22%, rgba(10, 12, 18, 0) 48%),
    linear-gradient(180deg, rgba(10, 12, 18, .65) 0%, rgba(10, 12, 18, 0) 18%);
}
.hero__content { padding-top: 120px; padding-bottom: 40px; }
.hero__logo { position: relative; width: min(600px, 90vw); margin-left: -1.2%; }
.hero__logo img { width: 100%; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .55)); }

.hero__lede { max-width: 540px; font-size: clamp(17px, 1.6vw, 20px); color: #d5dbe7; margin: 26px 0 30px; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; color: var(--text-2); font-size: 14px; }
.hero__meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; background: var(--text-3); border-radius: 50%; margin-right: 18px; vertical-align: middle; }
.hero__stats {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 24px auto 0; padding-bottom: 40px;
}
.hero__stats li { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 16px 0; }
.hero__stats li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-hi); transform-origin: 0 50%; }
.hero__stats b { display: inline-grid; font: 700 italic clamp(28px, 4vw, 44px)/1 var(--display); color: #fff; }
.hero__stats b::after { content: attr(data-to); grid-area: 1 / 1; visibility: hidden; }
.hero__stats .cnt { grid-area: 1 / 1; }
.hero__stats li > span { color: var(--text-2); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
@media (max-width: 640px) {
  .hero { min-height: 0; }
  .hero__art { position: relative; inset: auto; height: 62vw; min-height: 230px; }
  .hero__art img { height: 100%; object-position: 50% 20%; }
  .hero__shade { background: linear-gradient(0deg, var(--bg) 0%, rgba(10, 12, 18, .0) 40%); bottom: auto; height: 62vw; min-height: 230px; }
  .hero__content { padding-top: 0; margin-top: -60px; }
  .hero__logo { width: min(400px, 92%); }
  .hero__stats { grid-template-columns: repeat(2, 1fr); column-gap: 20px; }
  .btn--big { width: 100%; }
}

/* ---------- why ---------- */
.why { background: var(--bg) url("../img/asphalt.jpg") center / cover no-repeat; }
.why::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(10, 12, 18, .55) 30%, rgba(10, 12, 18, .55) 70%, var(--bg) 100%); }
.why__grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.why__text .h2 { margin-bottom: 22px; }
.why__text p { color: var(--text-2); font-size: 17px; }
.why__text p strong { color: var(--text); }
.why__art figcaption { margin-top: 14px; color: var(--text-3); font-size: 14px; font-style: italic; }
.frame { border-style: solid; border-width: 12px; border-image: url("../img/ui/info_bg.png") 40 fill / 20px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.frame img { border-radius: 10px; }
.frame--tilt { transform: rotate(-1.6deg); }
.checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 34px; font-weight: 600; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 4px;
  background: linear-gradient(180deg, #5ad6ff, var(--cyan-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
.checks li::after { content: ""; position: absolute; left: 7px; top: calc(.2em + 3px); width: 6px; height: 11px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
@media (max-width: 860px) { .why__grid { grid-template-columns: 1fr; } .why__art { order: 2; } }

/* ---------- story ---------- */
.story { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.story__strip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.story__strip figure { margin: 0; position: relative; padding: 0; border-style: solid; border-width: 8px; border-image: url("../img/ui/info_bg.png") 40 fill / 14px; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .45)); }

.story__strip img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; width: 100%; height: auto; border-radius: 8px; }
.story__strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px; border-radius: 0 0 8px 8px;
  font: 700 italic 18px/1 var(--display); background: linear-gradient(0deg, rgba(5, 7, 12, .92), rgba(5, 7, 12, 0));
}
.story__strip li:nth-child(even) { margin-top: 36px; }
@media (max-width: 860px) {
  .story__strip { grid-template-columns: repeat(2, 1fr); }
  .story__strip li:nth-child(even) { margin-top: 0; }
}

/* ---------- girls ---------- */
.girls { background: radial-gradient(80% 60% at 30% 40%, rgba(44, 196, 242, .10), rgba(44, 196, 242, 0) 70%), var(--bg-2); }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.stage__art { position: relative; display: grid; place-items: end center; min-height: 560px; }
.stage__art::before {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 64%;
  background: radial-gradient(closest-side, rgba(44, 196, 242, .32), rgba(44, 196, 242, 0)); filter: blur(10px);
}
.stage__art::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 4px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .55); filter: blur(8px); }
.stage__art img { position: relative; z-index: 1; height: min(640px, 76vh); width: auto; max-width: 100%; object-fit: contain; transition: opacity .38s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.stage__art img.is-out { opacity: 0; transform: translate3d(var(--dx, -14px), 0, 0); transition-duration: .18s, .2s; transition-timing-function: ease-in; }
.stage__art img.no-tr { transition: none; }
.stage__card { padding: clamp(8px, 2.4vw, 22px); position: relative; }
.stage__bar {
  display: flex; align-items: center; justify-content: center; height: 46px; margin: 0 0 18px;
  border-style: solid; border-width: 0 96px; border-image: url("../img/ui/info_titlebar1.png") 0 135 fill / 0 96px;
  font: 700 18px/1 var(--body); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.stage__count { font: 700 italic 15px/1 var(--display); color: var(--text-3); margin-bottom: 10px; }
.stage__count span { color: var(--cyan); }
.stage__name { font: 700 italic clamp(40px, 6vw, 68px)/1 var(--display); }
.stage__job { font-size: 18px; font-weight: 600; color: var(--cyan-hi); margin: 10px 0 6px; min-height: 1.6em; }
.stage__stars { display: flex; gap: 3px; height: 22px; margin: 0 0 18px; }
.stage__stars img { width: 23px; height: 22px; }
.stage__desc { margin: 0 0 22px; padding: 6px 8px; border-style: solid; border-width: 12px; border-image: url("../img/ui/popup1_infobg1.png") 30 fill / 12px; font-size: 17px; color: #dfe5ef; min-height: 5.2em; }
.stage__desc:empty { display: none; }
.stage__facts { display: flex; gap: 32px; margin: 0 0 24px; }
.stage__facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 600; }
.stage__facts dd { margin: 2px 0 0; font: 700 italic 22px/1.1 var(--display); }
.stage__nav { display: flex; gap: 10px; }
.roster { margin-top: 32px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line-hi) transparent; padding: 6px 2px 14px; }
.roster ul { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; width: max-content; }
.roster button {
  display: block; width: 72px; height: 72px; padding: 0; border-radius: 50%; cursor: pointer; overflow: hidden;
  background: #2a3242; border: 2px solid var(--line-hi); transition: border-color .2s, transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
}
.roster button img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.roster button:hover { border-color: var(--cyan); transform: translateY(-4px); }
.roster button:hover img { transform: scale(1.08); }
.roster button:active { transform: translateY(-1px) scale(.95); transition-duration: .06s; }
.roster button[aria-pressed="true"] { border-color: var(--cyan-hi); box-shadow: 0 0 0 3px rgba(44, 196, 242, .35), 0 0 18px rgba(44, 196, 242, .5); }
@media (max-width: 860px) {
  .stage { grid-template-columns: 1fr; }
  .stage__art { min-height: 0; }
  .stage__art img { height: min(520px, 70vh); }
}
@media (max-width: 480px) { .roster button { width: 60px; height: 60px; } }

/* ---------- cars ---------- */
.cars { background: var(--bg); }
.cars__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.car { padding: 0; overflow: visible; display: flex; flex-direction: column; }
.car__shot {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center;
  border-style: solid; border-width: 22px 12px; border-image: url("../img/ui/car_bg1.png") 50 26 fill / 22px 12px;
}
.car[data-grade="2"] .car__shot { border-image-source: url("../img/ui/car_bg2.png"); }
.car[data-grade="3"] .car__shot { border-image-source: url("../img/ui/car_bg4.png"); }
.car[data-grade="4"] .car__shot { border-image-source: url("../img/ui/car_bg5.png"); }
.car[data-grade="5"] .car__shot, .car[data-grade="6"] .car__shot { border-image-source: url("../img/ui/car_bg3.png"); }
.car__shot img { width: 90%; height: auto; filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .45)); }
.car__grade { position: absolute; left: -2px; top: -14px; display: flex; gap: 1px; }
.car__grade img { width: 20px; height: 19px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.car__unique { position: absolute; right: -2px; top: -12px; font: 700 italic 13px/1 var(--display); color: #fff; padding: 5px 8px 4px; background: var(--pink); transform: skewX(-12deg); }
.car__body { padding: 14px 4px 2px; }
.car__name { font: 700 italic 26px/1 var(--display); margin-bottom: 14px; }
.car__stats { margin: 0; display: grid; gap: 8px; }
.car__stats div { display: grid; grid-template-columns: 112px 1fr 40px; align-items: center; gap: 10px; font-size: 13px; }
.car__stats dt { color: var(--text-2); font-weight: 600; }
.car__stats dd { margin: 0; text-align: right; font: 700 italic 15px/1 var(--display); }
.bar { height: 12px; border-style: solid; border-width: 0 6px; border-image: url("../img/ui/carinfo_guagebg.png") 0 20 fill / 0 6px; }
.bar i { display: block; height: 100%; width: 0; margin: 0 -6px; min-width: 0; border-style: solid; border-width: 0 6px; border-image: url("../img/ui/carinfo_guagebar.png") 0 20 fill / 0 6px; transition: width 1.1s cubic-bezier(.2, .7, .2, 1); }
.car__stats div:nth-child(1) .bar i { transition-delay: calc(var(--d, 0s) + .25s); }
.car__stats div:nth-child(2) .bar i { transition-delay: calc(var(--d, 0s) + .33s); }
.car__stats div:nth-child(3) .bar i { transition-delay: calc(var(--d, 0s) + .41s); }
.car__stats div:nth-child(4) .bar i { transition-delay: calc(var(--d, 0s) + .49s); }
.car.in .bar i, .no-motion .bar i { width: calc(var(--w) + 12px); }
@media (max-width: 960px) { .cars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cars__grid { grid-template-columns: 1fr; } }

/* ---------- features ---------- */
.features { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.feat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feat__item { margin: 0; display: flex; flex-direction: column; border-style: solid; border-width: 10px; border-image: url("../img/ui/info_bg.png") 40 fill / 16px; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .4)); }
.feat__item > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.feat__item--wide { grid-column: span 4; display: grid; grid-template-columns: 1.6fr 1fr; }
.feat__item--wide > img { height: 100%; }
.feat__item--wide .feat__body { align-self: center; padding: clamp(24px, 4vw, 48px); }
.feat__item--wide h3 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 14px; }
.feat__item--wide p { font-size: 17px; }
.feat__body { padding: 16px 8px 10px; }
.feat__body h3 { font: 700 italic 22px/1.1 var(--display); margin-bottom: 8px; }
.feat__body p { color: var(--text-2); margin: 0; font-size: 15px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); margin-top: clamp(56px, 7vw, 88px); }
.tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.tiles li { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 0; border-style: solid; border-width: 10px; border-image: url("../img/ui/popup1_infobg1.png") 30 fill / 12px; }
.tiles img { grid-row: span 2; width: 76px; height: 76px; object-fit: cover; border-radius: 4px; }
.tiles b { font: 700 italic 19px/1.1 var(--display); align-self: end; }
.tiles span { color: var(--text-2); font-size: 14px; align-self: start; }
@media (max-width: 960px) {
  .feat { grid-template-columns: repeat(2, 1fr); }
  .feat__item--wide { grid-column: span 2; grid-template-columns: 1fr; }
  .modes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .feat { grid-template-columns: 1fr; } .feat__item--wide { grid-column: auto; } }

/* ---------- screenshots ---------- */
.screens { background: var(--bg-2); }
.shots { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.shots li:first-child { grid-column: span 2; grid-row: span 2; }
.shots button { display: block; width: 100%; padding: 0; cursor: zoom-in; background: none; border-style: solid; border-width: 7px; border-image: url("../img/ui/info_bg.png") 40 fill / 14px; }
.shots button > span { display: block; overflow: hidden; border-radius: 6px; }
.shots button { transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s ease; }
.shots img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.shots button:hover, .shots button:focus-visible { transform: translateY(-3px); filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)) drop-shadow(0 0 10px rgba(44, 196, 242, .25)); }
.shots button:hover img, .shots button:focus-visible img { transform: scale(1.06); }
@media (max-width: 760px) { .shots { grid-template-columns: 1fr 1fr; } .shots li:first-child, .shots li:last-child { grid-column: span 2; grid-row: auto; } }
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1280px, 94vw); width: 100%; }
.lightbox::backdrop { background: rgba(4, 6, 10, .9); }
.lightbox { overflow: visible; }
.lightbox img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); transform-origin: 0 0; }
.lightbox form { position: absolute; right: 8px; top: 8px; z-index: 1; }

/* ---------- how ---------- */
.how { background: var(--bg) url("../img/asphalt.jpg") center / cover no-repeat; }
.how::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-2) 0%, rgba(10, 12, 18, .7) 30%, rgba(10, 12, 18, .7) 70%, var(--bg) 100%); }
.how .wrap { position: relative; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: none; }
.steps li { position: relative; padding: 14px 12px 10px; border-style: solid; border-width: 16px; border-image: url("../img/ui/info_bg.png") 40 fill / 20px; overflow: hidden; }
.steps__no { position: absolute; right: 4px; top: -18px; font: 700 italic 120px/1 var(--display); color: rgba(44, 196, 242, .14); }
.steps h3 { font: 700 italic 24px/1.1 var(--display); margin-bottom: 10px; position: relative; }
.steps p { color: var(--text-2); margin: 0; position: relative; }
.how__cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */
.faq { background: var(--bg); }
.faq__wrap { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.faq__list { display: grid; gap: 10px; }
.faq details { border-style: solid; border-width: 10px; border-image: url("../img/ui/popup1_infobg1.png") 30 fill / 12px; }
.faq summary { list-style: none; cursor: pointer; padding: 8px 44px 8px 10px; font-weight: 700; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 10px; height: 10px; border: solid var(--cyan); border-width: 0 3px 3px 0; transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 10px 10px; margin: 0; color: var(--text-2); }
@media (max-width: 860px) { .faq__wrap { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: #07090d; padding: 48px 0 56px; }
.footer__inner { display: grid; grid-template-columns: auto 1fr; gap: 12px 40px; align-items: start; }
.footer__logo { position: relative; display: block; width: 120px; }
.footer__legal { color: var(--text-2); font-size: 14px; max-width: 760px; margin: 0; }
.footer__legal strong { color: var(--text); }
.footer__small { grid-column: 2; font-size: 14px; margin: 0; }
@media (max-width: 600px) { .footer__inner { grid-template-columns: 1fr; } .footer__small { grid-column: auto; } }

/* ---- Beyond the original ---- */
.section__lead { color: var(--text-2); font-size: 17px; max-width: 640px; }
.beyond__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.beyond__list li { position: relative; padding: 14px 12px 10px; border-style: solid; border-width: 16px; border-image: url("../img/ui/info_bg.png") 40 fill / 20px; }
.beyond__tag { display: inline-block; margin-bottom: 10px; font: 700 italic 13px/1 var(--display); color: #fff; padding: 5px 9px 4px; background: var(--pink); transform: skewX(-12deg); letter-spacing: .06em; text-transform: uppercase; }
.beyond__list h3 { font: 700 italic 24px/1.1 var(--display); margin: 0 0 8px; }
.beyond__list p { color: var(--text-2); margin: 0; }
.beyond__note { margin-top: 24px; color: var(--text-3); font-size: 14px; font-style: italic; }
@media (max-width: 960px) { .beyond__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .beyond__list { grid-template-columns: 1fr; } }

/* ---- Support ---- */
.support { background: var(--bg) url("../img/asphalt.jpg") center / cover no-repeat; }
.support::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 12, 18, .95) 0%, rgba(10, 12, 18, .8) 55%, rgba(255, 61, 142, .18) 100%); }
.support__inner { position: relative; }
.support__text { max-width: 640px; }
.support__text p { color: var(--text-2); font-size: 17px; }
.support__text .btn { margin-top: 18px; }

.support .h2 { margin-bottom: 18px; }
.beyond .section__head .h2 { margin-bottom: 18px; }
.support { overflow: hidden; }
.support__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
.support__girl { align-self: end; width: clamp(260px, 30vw, 420px); height: 560px; object-fit: cover; object-position: top; margin: -40px 0 calc(-1 * clamp(64px, 8vw, 110px)); filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)); -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 75%, transparent); }
@media (max-width: 860px) { .support__inner { grid-template-columns: 1fr; } .support__girl { display: none; } }

/* =====================================================================
   MOTION
   Hidden "before" states only exist under html.anim (set in the page head
   when the visitor allows motion, removed if site.js fails), so content is
   always visible without JS or with reduced motion. Scroll-driven motion
   uses transform and opacity only.
   ===================================================================== */
@keyframes dg-fade-up { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes dg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dg-art-in { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: none; } }
@keyframes dg-drop { from { transform: translate3d(0, -100%, 0); } to { transform: none; } }
@keyframes dg-slam {
  0% { opacity: 0; transform: translate3d(-7%, 0, 0) scale(1.55); }
  45% { opacity: 1; }
  62% { transform: translate3d(.6%, 0, 0) scale(.965); }
  80% { transform: scale(1.012); }
  100% { opacity: 1; transform: none; }
}
@keyframes dg-plate {
  0% { opacity: 0; transform: translate3d(48%, 0, 0) skewX(-28deg); }
  40% { opacity: 1; }
  68% { transform: translate3d(-2.5%, 0, 0) skewX(6deg); }
  86% { transform: translate3d(.6%, 0, 0) skewX(-1.5deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes dg-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dg-shine-loop { 0% { transform: translate3d(-130%, 0, 0) skewX(-18deg); } 14%, 100% { transform: translate3d(330%, 0, 0) skewX(-18deg); } }
@keyframes dg-shine-once { from { transform: translate3d(-130%, 0, 0) skewX(-18deg); } to { transform: translate3d(330%, 0, 0) skewX(-18deg); } }
@keyframes dg-menu { from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: none; } }

/* ---- shared shine: a soft white band, masked to a picture for the logos ---- */
.shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
.shine i {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, 0));
  transform: translate3d(-130%, 0, 0) skewX(-18deg);
}
.hero__logo-shine { --mask: url("../img/logo-reborn.webp"); }
.hero__logo-shine i { opacity: .8; }
.footer__shine { --mask: url("../img/logo-reborn-sm.webp"); }

/* ---- hero intro ---- */
.hero__fx { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 640px) { .hero__fx { bottom: auto; height: 62vw; min-height: 230px; } }
.hero__logo-art { display: block; position: relative; }
.anim .hero__logo-art { filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .55)); }
.anim .hero__logo-art img { filter: none; }
.hero__logo-plate { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; display: none; }
.anim .hero__logo-plate { display: block; clip-path: polygon(40.2% 75.3%, 90.6% 58.8%, 88.4% 87.5%, 37.5% 98.8%); transform-origin: 64% 80%; }
.anim .hero__logo-base { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 40.2% 75.3%, 90.6% 58.8%, 88.4% 87.5%, 37.5% 98.8%, 40.2% 75.3%); }
.anim.intro-done .hero__logo-base { clip-path: none; }
.anim.intro-done .hero__logo-plate { display: none; }

.anim:not(.is-ready) .hero__art, .anim:not(.is-ready) .hero__fx,
.anim:not(.is-ready) .hero__logo-base, .anim:not(.is-ready) .hero__logo-plate,
.anim:not(.is-ready) .hero__lede, .anim:not(.is-ready) .hero__cta, .anim:not(.is-ready) .hero__stats li { opacity: 0; }
.anim:not(.is-ready) .topbar { transform: translate3d(0, -100%, 0); }

.anim.is-ready .topbar { animation: dg-drop .7s cubic-bezier(.2, .8, .2, 1) .35s backwards; }
.anim.is-ready .hero__art { animation: dg-art-in 1.8s cubic-bezier(.16, .84, .24, 1) backwards; }
.anim.is-ready .hero__fx { animation: dg-fade 1.2s ease .2s backwards; }
.anim.is-ready .hero__logo-base { animation: dg-slam .62s cubic-bezier(.2, .9, .3, 1) .28s backwards; }
.anim.is-ready .hero__logo-plate { animation: dg-plate .5s cubic-bezier(.2, .9, .3, 1) .78s backwards; }
.anim.is-ready .hero__logo-shine i { animation: dg-shine-loop 8s cubic-bezier(.3, .6, .3, 1) 1.12s infinite; }
.anim.is-ready .hero__lede { animation: dg-fade-up .8s cubic-bezier(.2, .8, .2, 1) 1.0s backwards; }
.anim.is-ready .hero__cta { animation: dg-fade-up .8s cubic-bezier(.2, .8, .2, 1) 1.12s backwards; }
.anim.is-ready .hero__stats li { animation: dg-fade-up .7s cubic-bezier(.2, .8, .2, 1) 1.25s backwards; }
.anim.is-ready .hero__stats li:nth-child(2) { animation-delay: 1.34s; }
.anim.is-ready .hero__stats li:nth-child(3) { animation-delay: 1.43s; }
.anim.is-ready .hero__stats li:nth-child(4) { animation-delay: 1.52s; }
.anim.is-ready .hero__stats li::before { animation: dg-line .9s cubic-bezier(.6, 0, .2, 1) 1.2s backwards; }
.anim.is-ready .hero__stats li:nth-child(2)::before { animation-delay: 1.29s; }
.anim.is-ready .hero__stats li:nth-child(3)::before { animation-delay: 1.38s; }
.anim.is-ready .hero__stats li:nth-child(4)::before { animation-delay: 1.47s; }

/* ---- generic reveal ---- */
.anim .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.16, .84, .24, 1); }
.anim .reveal.in { opacity: 1; transform: none; }

/* headings: the eyebrow tag snaps in on the game's slant, the title fades up */
.anim .section__head.reveal, .anim .why__text.reveal, .anim .support__text.reveal { opacity: 1; transform: none; }
.anim .section__head .eyebrow, .anim .why__text .eyebrow, .anim .support__text .eyebrow {
  transform-origin: 0 50%; transition: opacity .45s ease, transform .6s cubic-bezier(.2, 1.25, .4, 1);
}
.anim .reveal:not(.in) > .eyebrow { opacity: 0; transform: translate3d(-30px, 0, 0) skewX(-16deg) scaleX(.8); }
.anim .section__head .h2, .anim .why__text .h2, .anim .support__text .h2 {
  transition: opacity .7s ease .12s, transform .8s cubic-bezier(.16, .84, .24, 1) .12s;
}
.anim .reveal:not(.in) > .h2 { opacity: 0; transform: translate3d(0, 20px, 0); }
.anim .section__head > p:not(.eyebrow), .anim .why__text > p:not(.eyebrow), .anim .why__text > .checks li,
.anim .support__text > p:not(.eyebrow) {
  transition: opacity .7s ease, transform .8s cubic-bezier(.16, .84, .24, 1);
}
.anim :is(.section__head, .why__text, .support__text):not(.in) > p:not(.eyebrow), .anim .why__text:not(.in) .checks li { opacity: 0; transform: translate3d(0, 18px, 0); }
.anim :is(.section__head, .why__text, .support__text).in > p:not(.eyebrow) { transition-delay: .45s; }
.anim :is(.section__head, .why__text, .support__text).in > p:not(.eyebrow) ~ p:not(.eyebrow) { transition-delay: .55s; }
.anim :is(.section__head, .why__text, .support__text).in > p:not(.eyebrow) ~ p:not(.eyebrow) ~ p:not(.eyebrow) { transition-delay: .65s; }
.anim .why__text.in .checks li { transition-delay: .8s; }
.anim .why__text.in .checks li:nth-child(2) { transition-delay: .87s; }
.anim .why__text.in .checks li:nth-child(3) { transition-delay: .94s; }
.anim .why__text.in .checks li:nth-child(4) { transition-delay: 1.01s; }
.anim .why__text.in .checks li:nth-child(5) { transition-delay: 1.08s; }

/* the FIN frame settles into its tilt */
.anim .why__art .frame--tilt { transition: transform 1.2s cubic-bezier(.16, .84, .24, 1); }
.anim .why__art:not(.in) .frame--tilt { transform: rotate(-6deg) scale(.93); }

/* pink skewed tags snap in after their card */
.anim .beyond__tag { transform-origin: 0 50%; transition: opacity .3s ease .25s, transform .5s cubic-bezier(.2, 1.4, .4, 1) .25s; }
.anim .beyond__list li:not(.in) .beyond__tag { opacity: 0; transform: translate3d(-14px, 0, 0) skewX(-28deg) scaleX(.5); }

/* story strip: lift on hover */
.story__strip figure { transition: transform .45s cubic-bezier(.2, .8, .2, 1); overflow: hidden; }
.story__strip img { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.story__strip li:hover figure { transform: translate3d(0, -6px, 0); }
.story__strip li:hover img { transform: scale(1.05); }

/* girls: the picture slides in, the profile panel pops like the game's popup */
.anim .stage.reveal { opacity: 1; transform: none; }
.anim .stage__art { transition: opacity .7s ease, transform .9s cubic-bezier(.16, .84, .24, 1); }
.anim .stage:not(.in) .stage__art { opacity: 0; transform: translate3d(-40px, 0, 0); }
.anim .stage__card { transition: opacity .3s ease .18s, transform .55s cubic-bezier(.2, 1.3, .4, 1) .18s; }
.anim .stage:not(.in) .stage__card { opacity: 0; transform: scale(.86); }

/* cars: tilt, the car lifts on hover */
.anim .car.reveal.in {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1);
}
.anim .car.reveal.in.is-tilt { transition: opacity .8s ease, transform .12s linear; will-change: transform; }
.car__shot img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.car:hover .car__shot img { transform: translate3d(0, -5px, 0) scale(1.03); }

/* mode tiles slide in */
.anim .tiles li { transition: opacity .5s ease, transform .6s cubic-bezier(.16, .84, .24, 1); }
.anim .modes__col:not(.in) .tiles li { opacity: 0; transform: translate3d(-20px, 0, 0); }
.anim .modes__col.in .tiles li:nth-child(2) { transition-delay: .08s; }
.anim .modes__col.in .tiles li:nth-child(3) { transition-delay: .16s; }

/* steps: the big number slides in behind the title */
.anim .steps__no { transition: opacity .6s ease .2s, transform .8s cubic-bezier(.16, .84, .24, 1) .2s; }
.anim .steps li:not(.in) .steps__no { opacity: 0; transform: translate3d(40px, 0, 0); }

/* support: Joyce slides in from the side */
.anim .support__girl.reveal:not(.in) { transform: translate3d(40px, 30px, 0); }

/* FAQ */
.anim .faq__list.reveal { opacity: 1; transform: none; }
.anim .faq details { transition: opacity .5s ease, transform .6s cubic-bezier(.16, .84, .24, 1); }
.anim .faq__list:not(.in) details { opacity: 0; transform: translate3d(0, 16px, 0); }
.anim .faq__list.in details:nth-child(2) { transition-delay: .05s; }
.anim .faq__list.in details:nth-child(3) { transition-delay: .1s; }
.anim .faq__list.in details:nth-child(4) { transition-delay: .15s; }
.anim .faq__list.in details:nth-child(5) { transition-delay: .2s; }
.anim .faq__list.in details:nth-child(6) { transition-delay: .25s; }
.anim .faq__list.in details:nth-child(7) { transition-delay: .3s; }
.anim .faq__list.in details:nth-child(8) { transition-delay: .35s; }
.faq summary { transition: color .2s ease; }
.faq summary:hover { color: var(--cyan-hi); }
.faq summary::after { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.anim .faq details.is-opening summary::after { transform: translateY(-30%) rotate(-135deg); }

/* mobile menu */
.anim .topbar__nav ul.is-open { animation: dg-menu .28s cubic-bezier(.2, .8, .2, 1); }

/* lightbox */
.lightbox[open]::backdrop { animation: dg-fade .35s ease; }
.lightbox[open] form { animation: dg-fade .3s ease .25s backwards; }
.lightbox.is-closing::backdrop { opacity: 0; transition: opacity .3s ease; }
.lightbox.is-closing form { opacity: 0; }

/* footer logo shimmer */
.footer__logo.is-lit .footer__shine i { animation: dg-shine-once 1.1s cubic-bezier(.3, .6, .3, 1) .2s both; }
.footer__logo:hover .footer__shine i { animation: dg-shine-once .9s cubic-bezier(.3, .6, .3, 1) both; }

/* reduced motion: no animation at all, everything in place */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero__art img { transform: none !important; }
  .shine, .hero__fx, .hero__logo-plate { display: none !important; }
}

/* Download: one card per platform (2026-10-22) */
.dl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dl__card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; min-width: 0; }
.dl__card h3 { margin: 0; font-family: var(--display); font-style: italic; font-size: 30px; color: #fff; }
.dl__req { margin: 0; color: var(--text-2); font-size: 15px; }
.dl__card .btn--big { font-size: clamp(16px, 2vw, 20px); max-width: 100%; }
.dl__alt { margin: 0; color: var(--text-3); font-size: 14px; line-height: 1.45; }
.dl__alt a { color: var(--cyan-hi); }
@media (max-width: 900px) { .dl { grid-template-columns: 1fr; } }