/* Home page only (the legal/support pages keep site.css).
   The look borrows the game's own HUD: navy outlines, hard offset shadows, slanted buttons. */
:root {
  --yellow: #FFD21F;
  --red: #E0261F;
  --ink: #15214B;
  --sky: #38AEFF;
  --glow: #3BE8FF;
  --cloud: #EEF8FF;
  --white: #FFFFFF;
  --line: 4px solid var(--ink);
  --pop: 6px 6px 0 var(--ink);
  --display: "Lato", "Arial Black", sans-serif;
  --body: "Lato", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cloud);
  color: var(--ink);
  font: 400 1.125rem/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.02em; }
h2 { font-size: clamp(2.3rem, 5.6vw, 4.4rem); }
h3 { font-size: 1.5rem; }
p { margin: 0; }
:focus-visible { outline: 4px solid var(--glow); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--yellow); padding: 10px 16px; border: var(--line); font-weight: 700; }
.skip:focus { left: 8px; }

/* ---------- Top bar ---------- */
.top {
  position: absolute; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 3vw, 32px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 1.2rem; color: var(--white); text-shadow: 2px 2px 0 var(--ink); }
.brand img { border-radius: 10px; border: 3px solid var(--ink); }
.top nav { display: flex; align-items: center; gap: 6px; }
.top nav a {
  text-decoration: none; font-weight: 700; font-size: 1rem;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(21, 33, 75, .55); color: var(--white);
}
.top nav a:hover { background: var(--ink); }
.top nav .nav-cta { background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.top nav .nav-cta:hover { background: var(--white); }

/* ---------- Hero: the art, uncropped, with the logo stamped on the sky ---------- */
.hero-art { position: relative; background: var(--sky); }
.hero-img { width: 100%; }
.hero-logo {
  position: absolute; left: 26%; top: 6%; width: 34%;
  filter: drop-shadow(0 6px 0 rgba(21, 33, 75, .35));
  animation: stamp .7s cubic-bezier(.2, 1.6, .4, 1) .15s both;
}
@keyframes stamp { from { transform: scale(.4) rotate(-8deg); opacity: 0; } }

/* The dashboard band under the art */
.dash {
  position: relative;
  background: var(--ink); color: var(--white);
  padding: 40px 0 44px;
}
.dash::before { /* taxi checker trim */
  content: ""; position: absolute; inset: -14px 0 auto; height: 14px;
  background: repeating-conic-gradient(var(--ink) 0 25%, var(--yellow) 0 50%) 0 0 / 28px 28px;
}
.dash-inner {
  width: min(1200px, 100% - 32px); margin-inline: auto;
  display: grid; grid-template-columns: 1.15fr auto 1fr; gap: 40px; align-items: center;
}
.pitch-big { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.05; color: var(--yellow); margin-bottom: 12px; }
.pitch p:not(.pitch-big) { color: #D6E3FF; max-width: 42ch; }

.meter { display: grid; justify-items: center; gap: 10px; text-align: center; }
.meter-face {
  display: grid; place-items: center;
  width: 168px; height: 168px; border-radius: 50%;
  background: var(--yellow); border: 6px solid var(--white);
  box-shadow: 0 0 0 6px var(--red), 0 0 34px rgba(59, 232, 255, .45);
}
.meter-time { font-family: var(--display); font-weight: 900; font-size: 3rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.meter-face.hurry { background: var(--red); }
.meter-face.hurry .meter-time { color: var(--white); }
.meter-note { font-size: .95rem; color: #D6E3FF; max-width: 18ch; line-height: 1.3; }

.btns { display: flex; flex-wrap: wrap; gap: 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 18px; min-width: 190px;
  border: var(--line); border-radius: 16px; box-shadow: var(--pop);
  text-decoration: none; color: var(--ink);
  font-family: var(--display); font-weight: 900; font-style: italic; font-size: 1.4rem; line-height: 1.05;
  transition: transform .08s, box-shadow .08s;
}
.btn svg { width: 30px; height: 30px; flex: none; }
.btn small { display: block; font: 700 .9rem/1.2 var(--body); margin-top: 3px; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 1px 1px 0 var(--ink); }
.btn-yellow { background: var(--yellow); }
.btn-white { background: var(--white); }
.dash .btn { border-color: var(--white); box-shadow: 6px 6px 0 var(--glow); }
.dash .btn:hover { box-shadow: 8px 8px 0 var(--glow); }
.dash .btn:active { box-shadow: 1px 1px 0 var(--glow); }
.android-note { margin-top: 18px; font-size: .95rem; color: #D6E3FF; max-width: 46ch; }
.android-note a { color: var(--yellow); font-weight: 700; }

/* ---------- How a shift goes: three stops along a road ---------- */
.shift { background: var(--sky); padding: 96px 0 104px; overflow: hidden; }
.intro { max-width: 52ch; margin-top: 14px; font-size: 1.25rem; font-weight: 400; }
.road {
  position: relative; list-style: none; padding: 0;
  width: min(1200px, 100% - 32px); margin: 56px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
}
.road::before { /* the asphalt with its centre line, running behind the stops */
  content: ""; position: absolute; left: -50vw; right: -50vw; top: 70px; height: 96px;
  background:
    repeating-linear-gradient(90deg, var(--yellow) 0 44px, transparent 44px 80px) center / 100% 8px no-repeat,
    #2C3350;
  border-block: 6px solid var(--white);
}
.stop { position: relative; }
.stop img { border: var(--line); border-radius: 14px; box-shadow: var(--pop); background: var(--ink); }
.stop:nth-child(1) img { transform: rotate(-2deg); }
.stop:nth-child(2) img { transform: rotate(1.5deg) translateY(10px); }
.stop:nth-child(3) img { transform: rotate(-1deg); }
.stop h3 { margin: 30px 0 6px; }
.stop p { max-width: 34ch; }
.stamp {
  position: absolute; z-index: 2; top: -18px; left: -8px;
  font-family: var(--display); font-weight: 900; font-size: 1.25rem; font-variant-numeric: tabular-nums;
  background: var(--yellow); border: var(--line); border-radius: 999px;
  padding: 4px 14px; box-shadow: 3px 3px 0 var(--ink);
}

/* ---------- Modes: slanted panels, like the in-game buttons ---------- */
.modes { padding: 96px 0; }
.mode-row { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 26px; margin-top: 40px; }
.mode {
  border: var(--line); border-radius: 12px; box-shadow: var(--pop);
  transform: skewX(-6deg);
}
.mode-in { transform: skewX(6deg); padding: 28px 30px 30px; }
.mode h3 { font-size: 2rem; margin-bottom: 10px; }
.mode-shift { background: var(--yellow); }
.mode-free { background: var(--glow); }
.mode-daily { background: var(--red); color: var(--white); }
.lengths { display: flex; gap: 8px; list-style: none; padding: 0; margin: 18px 0 0; }
.lengths li {
  font-family: var(--display); font-weight: 900; font-size: 1.1rem; font-variant-numeric: tabular-nums;
  background: var(--white); border: 3px solid var(--ink); border-radius: 10px; padding: 4px 10px;
}

/* ---------- World: weather, car wash, daily ---------- */
.world { background: var(--yellow); padding: 96px 0 110px; border-block: var(--line); }
.world-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.world-head p { font-size: 1.2rem; font-weight: 400; max-width: 48ch; }
.world-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 48px; }
.shot { margin: 0; }
.shot img { border: var(--line); border-radius: 14px; box-shadow: var(--pop); }
.shot figcaption { margin-top: 14px; font-weight: 700; font-size: 1.05rem; }
.tilt-l { transform: rotate(-1.5deg); }
.tilt-r { transform: rotate(1.5deg); }
.vip {
  position: absolute; right: -24px; bottom: -92px;
  width: 168px; height: 168px; padding: 30px;
  display: grid; place-content: center; text-align: center;
  background: var(--red); color: var(--white);
  clip-path: polygon(50% 0, 61% 14%, 79% 9%, 80% 27%, 97% 33%, 87% 49%, 98% 65%, 80% 71%, 78% 90%, 61% 85%, 50% 100%, 39% 85%, 21% 90%, 20% 71%, 2% 65%, 13% 49%, 3% 33%, 20% 27%, 21% 9%, 39% 14%);
  transform: rotate(10deg);
}
.vip strong { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--yellow); }
.vip span { font-size: .8rem; font-weight: 700; line-height: 1.15; }

/* ---------- Garage ---------- */
.garage {
  background: radial-gradient(ellipse at 75% 60%, #1F3A8A 0%, var(--ink) 65%);
  color: var(--white); padding: 104px 0;
}
.garage-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.garage h2 { color: var(--yellow); }
.garage-copy > p { margin-top: 16px; color: #D6E3FF; font-size: 1.2rem; max-width: 40ch; }
.parts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 28px 0 0; }
.parts li {
  font-weight: 700; padding: 6px 14px; border-radius: 999px;
  border: 3px solid var(--glow); color: var(--white);
  box-shadow: 0 0 14px rgba(59, 232, 255, .35);
}
.parts li:nth-child(7) { background: var(--yellow); border-color: var(--yellow); color: var(--ink); box-shadow: none; }
.garage-pics { position: relative; padding-bottom: 18%; }
.garage-pics img { border: 4px solid var(--glow); border-radius: 14px; }
.pic-main { width: 86%; box-shadow: 0 0 40px rgba(59, 232, 255, .3); }
.pic-couch {
  position: absolute; right: 0; bottom: 0; width: 56%;
  transform: rotate(3deg); border-color: var(--yellow) !important;
  box-shadow: 8px 8px 0 var(--yellow);
}

/* ---------- Beta CTA ---------- */
.beta { background: var(--red); color: var(--white); padding: 104px 0; text-align: center; }
.beta h2 { font-size: clamp(3.4rem, 11vw, 8.5rem); color: var(--yellow); text-shadow: 6px 6px 0 var(--ink); }
.beta p { font-size: 1.3rem; font-weight: 400; margin: 16px auto 0; max-width: 40ch; }
.beta .btns { justify-content: center; margin-top: 36px; }
.beta .btn { min-width: 250px; justify-content: center; text-align: left; }
.beta .fine { font-size: 1rem; margin-top: 30px; max-width: 52ch; }
.beta .fine a { color: var(--yellow); font-weight: 700; }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: #D6E3FF; padding: 28px 0; font-size: 1rem; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 22px; }
.foot a { text-decoration: none; font-weight: 400; }
.foot a:hover { color: var(--yellow); text-decoration: underline; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .dash-inner { grid-template-columns: 1fr auto; }
  .get { grid-column: 1 / -1; }
  .world-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  .top { position: relative; background: var(--ink); padding: 10px 16px; }
  .top nav a:not(.nav-cta) { display: none; }
  .hero-logo { left: 27%; top: 5%; width: 38%; }
  .dash { padding: 34px 0 40px; }
  .dash-inner { grid-template-columns: 1fr; gap: 28px; }
  .meter { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: left; gap: 16px; }
  .meter-face { width: 110px; height: 110px; border-width: 5px; box-shadow: 0 0 0 5px var(--red), 0 0 24px rgba(59, 232, 255, .4); }
  .meter-time { font-size: 1.9rem; }
  .btn { flex: 1 1 100%; }

  .shift, .modes, .world, .garage, .beta { padding: 72px 0; }
  .road { grid-template-columns: 1fr; gap: 44px; margin-top: 44px; }
  .road::before { left: 50%; right: auto; top: -20px; bottom: -20px; width: 72px; height: auto; transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, var(--yellow) 0 36px, transparent 36px 66px) center / 6px 100% no-repeat, #2C3350;
    border-block: 0; border-inline: 5px solid var(--white); }
  .stop { background: var(--cloud); border: var(--line); border-radius: 18px; padding: 16px 16px 20px; box-shadow: var(--pop); }
  .stop img, .stop:nth-child(n) img { transform: none; box-shadow: none; border-width: 3px; }
  .stop h3 { margin-top: 16px; }
  .stamp { top: -16px; left: 12px; }

  .mode-row { grid-template-columns: 1fr; gap: 20px; }
  .mode { transform: skewX(-4deg); }
  .mode-in { transform: skewX(4deg); padding: 22px 24px 24px; }

  .world-head { grid-template-columns: 1fr; gap: 16px; }
  .world-grid { gap: 18px 14px; margin-top: 36px; }
  .shot figcaption { font-size: .95rem; margin-top: 10px; }
  .vip { position: relative; bottom: auto; right: auto; grid-column: 1 / -1; justify-self: center; margin-top: 8px; width: 150px; height: 150px; }

  .garage-grid { grid-template-columns: 1fr; gap: 40px; }
  .beta .btn { min-width: 0; }
  .foot .wrap { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-logo { animation: none; }
  .btn { transition: none; }
}