@font-face {
  font-family: "Fredoka";
  src: url("fredoka-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("nunito-latin.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #241b3f;
  --ink-soft: #5e537b;
  --cream: #fff8e9;
  --paper: #fffdf6;
  --lav: #c7bef6;
  --lav-deep: #8c7de1;
  --violet: #6f57d4;
  --night: #19122f;
  --night-2: #2a1d4d;
  --gold: #ffca3a;
  --gold-deep: #e89912;
  --pink: #ff58b6;
  --green: #46d777;
  --green-deep: #1f9e4a;
  --red: #ff5062;
  --font-display: "Fredoka", "Arial Rounded MT Bold", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-body: "Nunito", "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  background: var(--night);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at 24% 18%, #4b3688 0%, transparent 30%),
    radial-gradient(circle at 82% 74%, #1e527e 0%, transparent 34%),
    linear-gradient(135deg, #17112d 0%, #211744 48%, #120f25 100%);
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 3px solid #fff4a8;
  outline-offset: 3px;
}

.page-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.36;
  animation: drift 18s ease-in-out infinite alternate;
}

.orb-a {
  width: 42vw;
  height: 42vw;
  min-width: 360px;
  min-height: 360px;
  left: -10vw;
  top: -8vw;
  background: #7b55dd;
}

.orb-b {
  width: 34vw;
  height: 34vw;
  min-width: 280px;
  min-height: 280px;
  right: -8vw;
  bottom: -10vw;
  background: #1a8ea6;
  animation-delay: -6s;
}

.orb-c {
  width: 20vw;
  height: 20vw;
  left: 38%;
  bottom: 5%;
  background: #ff4fae;
  opacity: 0.16;
  animation-delay: -11s;
}

.road-lines {
  position: absolute;
  inset: 0;
  opacity: 0.09;
  background-image:
    linear-gradient(115deg, transparent 0 47%, #ffffff 47% 47.4%, transparent 47.4% 100%),
    linear-gradient(115deg, transparent 0 52%, #ffffff 52% 52.35%, transparent 52.35% 100%);
  background-size: 260px 260px, 260px 260px;
  transform: rotate(-12deg) scale(1.4);
}

.site-shell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 6vw, 104px);
  width: min(1440px, 100%);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 26px clamp(22px, 4vw, 64px);
}

/* --------------------------- desktop hero --------------------------- */

.hero-panel {
  width: min(438px, 34vw);
  min-width: 340px;
  padding: 10px 0;
  animation: rise-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: clamp(30px, 4.5vh, 58px);
}

.hero-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  color: #241b3f;
  background: linear-gradient(145deg, #ffe05d, #ffb72e);
  box-shadow: 0 7px 0 #b96f10, 0 14px 32px rgba(0, 0, 0, 0.28);
  transform: rotate(-4deg);
}

.hero-mark svg {
  width: 42px;
  height: 42px;
}

.hero-wordmark {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1;
}

.hero-wordmark span {
  color: var(--gold);
  margin-left: 5px;
}

.hero-panel h1,
.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.1vw, 61px);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -1.5px;
  text-wrap: balance;
}

.hero-panel h1 em,
.hero-title em {
  color: transparent;
  font-style: normal;
  background: linear-gradient(100deg, #ffdd63 5%, #ff7ac2 52%, #78d8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 5px 20px rgba(255, 110, 190, 0.2));
}

.hero-copy {
  max-width: 398px;
  margin: 24px 0 30px;
  color: #cfc6e9;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.15px;
}

.rule-list {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rule-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.rule-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  border-radius: 11px;
  color: #ffe57b;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 212, 75, 0.12);
  border: 1px solid rgba(255, 212, 75, 0.22);
}

.rule-list strong {
  display: block;
  margin-bottom: 3px;
  color: #fff9ed;
  font-size: 14.5px;
  font-weight: 800;
}

.rule-list small {
  display: block;
  color: #b7acd1;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
}

.hero-hint {
  color: #a99dc7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.hero-stats {
  display: flex;
  gap: 0;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-stats div {
  flex: 1;
  min-width: 0;
}

.hero-stats strong {
  display: block;
  color: #ffe478;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.hero-stats span {
  display: block;
  margin-top: 6px;
  color: #a89cc2;
  font-size: 11px;
  font-weight: 700;
}

.hero-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  color: #8f83ac;
  font-size: 11px;
  font-weight: 700;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #54e287;
  box-shadow: 0 0 0 4px rgba(84, 226, 135, 0.12);
}

/* --------------------------- buttons --------------------------- */

.btn {
  position: relative;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: 0.2px;
  user-select: none;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 23px;
  border-radius: 17px;
  font-size: 16px;
  background: linear-gradient(180deg, #ffe36c, #ffbc35);
  box-shadow: 0 6px 0 #b66d0f, 0 18px 34px rgba(255, 171, 41, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-hero svg {
  width: 19px;
  height: 19px;
}

.btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #b66d0f, 0 22px 42px rgba(255, 171, 41, 0.26);
}

.btn-hero:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #b66d0f;
}

.btn-play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2cqw;
  width: 66cqw;
  height: 11.5cqw;
  border-radius: 4.2cqw;
  font-size: 4.05cqw;
  background: linear-gradient(180deg, #ffe36e 0%, #ffc23c 54%, #ffb52e 100%);
  box-shadow:
    0 1.3cqw 0 #d47d12,
    0 2.2cqw 3.5cqw rgba(43, 26, 80, 0.3),
    inset 0 0.25cqw 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.btn-play::after {
  content: "";
  position: absolute;
  inset: 0.7cqw;
  border: 0.25cqw solid rgba(255, 255, 255, 0.35);
  border-radius: 3.4cqw;
  pointer-events: none;
}

.btn-play:hover {
  filter: brightness(1.04);
  transform: translateY(-0.35cqw);
}

.btn-play:active {
  transform: translateY(0.9cqw);
  box-shadow: 0 0.35cqw 0 #d47d12, 0 1.2cqw 2cqw rgba(43, 26, 80, 0.26);
}

.btn-play.compact {
  width: 100%;
  height: 10.2cqw;
  border-radius: 3.2cqw;
  font-size: 3.45cqw;
}

.play-orb {
  display: grid;
  place-items: center;
  width: 7.6cqw;
  height: 7.6cqw;
  border-radius: 50%;
  color: #342341;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0.25cqw 0 rgba(255, 255, 255, 0.5);
}

.play-orb svg {
  width: 4.2cqw;
  height: 4.2cqw;
  transform: translateX(0.25cqw);
}

.btn-soft {
  width: 100%;
  height: 9.4cqw;
  border-radius: 3cqw;
  border: 0.26cqw solid #ded6c8;
  background: #fffdf7;
  box-shadow: 0 0.7cqw 0 #d8d0c2;
  font-family: var(--font-body);
  font-size: 3.15cqw;
  transition: transform 0.12s ease, background 0.12s ease;
}

.btn-soft:hover {
  background: #ffffff;
  transform: translateY(-0.25cqw);
}

.btn-soft:active {
  transform: translateY(0.55cqw);
  box-shadow: 0 0.2cqw 0 #d8d0c2;
}

.icon-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 8.2cqw;
  height: 8.2cqw;
  border: 0;
  border-radius: 50%;
  color: #70668c;
  background: #efeae0;
  font-family: var(--font-display);
  font-size: 5.5cqw;
  line-height: 1;
  cursor: pointer;
}

/* --------------------------- phone / stage --------------------------- */

.game-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  animation: phone-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s both;
}

.phone-shell {
  position: relative;
  width: min(calc(94dvh * 0.46154), 458px);
  aspect-ratio: 54 / 117;
  padding: 0;
  border: 7px solid #171129;
  border-radius: 42px;
  background: #171129;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 0 8px rgba(255, 255, 255, 0.025),
    0 36px 80px rgba(0, 0, 0, 0.46),
    0 10px 28px rgba(0, 0, 0, 0.38);
}

.phone-shell::before {
  content: "";
  position: absolute;
  z-index: 80;
  top: 9px;
  left: 50%;
  width: 23%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  transform: translateX(-50%);
  pointer-events: none;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 35px;
  background: #b9b2ee;
  container-type: size;
  font-family: var(--font-body);
  color: var(--ink);
  isolation: isolate;
}

.stage.danger::after {
  content: "";
  position: absolute;
  z-index: 18;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 12cqw rgba(255, 40, 72, 0.5);
  animation: danger-pulse 0.65s ease-in-out infinite alternate;
}

#game {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  touch-action: none;
}

.mobile-note {
  display: none;
}

.version-tag {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 0.55cqw;
  color: rgba(36, 27, 63, 0.35);
  font-family: var(--font-display);
  font-size: 1.45cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

/* --------------------------- HUD --------------------------- */

.hud,
.dock {
  transition: opacity 0.2s ease;
}

.stage.overlay-open .hud,
.stage.overlay-open .dock {
  opacity: 0;
  pointer-events: none;
}

.hud {
  position: absolute;
  z-index: 12;
  top: 2.4cqw;
  left: 2.6cqw;
  right: 2.6cqw;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2cqw;
  pointer-events: none;
}

.hud-coin,
.hud-level,
.hud-goal {
  display: flex;
  align-items: center;
  height: 7.2cqw;
  border: 0.28cqw solid rgba(255, 255, 255, 0.42);
  background: linear-gradient(180deg, rgba(70, 55, 122, 0.88), rgba(52, 40, 96, 0.92));
  box-shadow:
    0 0.55cqw 0 rgba(31, 23, 61, 0.3),
    inset 0 0.3cqw 0 rgba(255, 255, 255, 0.16),
    0 1cqw 2.4cqw rgba(29, 21, 58, 0.18);
  backdrop-filter: blur(8px);
  color: #fff9e8;
}

.hud-coin {
  gap: 1.2cqw;
  min-width: 20cqw;
  padding: 0 2.2cqw 0 1.1cqw;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 3.6cqw;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.coin-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 4.8cqw;
  height: 4.8cqw;
  border-radius: 50%;
  color: #9b5f0a;
  font-family: var(--font-display);
  font-size: 2.3cqw;
  background:
    radial-gradient(circle at 35% 30%, #fff6a9 0 14%, transparent 15%),
    linear-gradient(145deg, #ffe86d, #ffc02c 58%, #f1a210);
  border: 0.28cqw solid #d9880a;
  box-shadow: inset 0 0.25cqw 0 rgba(255, 255, 255, 0.6), 0 0.2cqw 0 rgba(107, 60, 3, 0.4);
}

.coin-icon.small {
  width: 18px;
  height: 18px;
  font-size: 9px;
  border-width: 1px;
}

.hud-level {
  flex-direction: column;
  justify-content: center;
  min-width: 18.5cqw;
  padding: 0 2.1cqw;
  border-radius: 2.3cqw;
}

.hud-level-kicker {
  display: block;
  margin-bottom: -0.2cqw;
  color: #cfc4ef;
  font-family: var(--font-display);
  font-size: 1.65cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
}

.hud-level > span:last-child {
  display: block;
  font-family: var(--font-display);
  font-size: 3.75cqw;
  font-weight: 700;
  line-height: 1.05;
}

.hud-goal {
  gap: 0.8cqw;
  min-width: 18.5cqw;
  padding: 0 2.1cqw;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 3.1cqw;
  font-weight: 700;
}

.goal-star {
  color: #ffe266;
  font-size: 3.6cqw;
  text-shadow: 0 0.25cqw 0 #b66c0d;
}

/* --------------------------- countdown / toast --------------------------- */

.countdown-pill {
  position: absolute;
  z-index: 21;
  top: 36.2%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  padding: 1.25cqw 2.4cqw 1.25cqw 1.25cqw;
  border: 0.32cqw solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 80, 98, 0.96), rgba(211, 31, 65, 0.97));
  box-shadow: 0 1.1cqw 2.6cqw rgba(132, 17, 40, 0.4), inset 0 0.28cqw 0 rgba(255, 255, 255, 0.33);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -0.8cqw) scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.countdown-pill.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.countdown-icon {
  display: grid;
  place-items: center;
  width: 5cqw;
  height: 5cqw;
  border-radius: 50%;
  color: #d21f41;
  background: #fff6e8;
  font-family: var(--font-display);
  font-size: 3.2cqw;
  font-weight: 700;
  animation: warning-bounce 0.55s ease-in-out infinite alternate;
}

.countdown-copy {
  font-size: 2.9cqw;
  font-weight: 900;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.countdown-time {
  min-width: 7cqw;
  padding: 0.5cqw 1cqw;
  border-radius: 999px;
  color: #d21f41;
  background: #fff6e8;
  font-family: var(--font-display);
  font-size: 2.9cqw;
  font-weight: 700;
  text-align: center;
}

.toast {
  position: absolute;
  z-index: 65;
  top: 48%;
  left: 50%;
  max-width: 82cqw;
  padding: 2.2cqw 3.4cqw;
  border: 0.25cqw solid rgba(255, 255, 255, 0.36);
  border-radius: 2.6cqw;
  color: #fff9ec;
  background: rgba(32, 23, 57, 0.94);
  box-shadow: 0 1.5cqw 4cqw rgba(15, 10, 28, 0.36);
  font-size: 2.8cqw;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 1cqw) scale(0.92);
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* --------------------------- bottom dock --------------------------- */

.dock {
  position: absolute;
  z-index: 30;
  right: 2.2cqw;
  bottom: 2.15cqw;
  left: 2.2cqw;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.55cqw;
  pointer-events: none;
}

.dock-controls {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.55cqw;
  pointer-events: none;
}

.ad-slot-dock {
  display: none;
  flex: 0 0 auto;
  width: min(90vw, 320px);
  min-height: 50px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  pointer-events: auto;
}

.booster,
.pause-btn {
  pointer-events: auto;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.booster {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3cqw;
  width: 17.2cqw;
  height: 16.4cqw;
  border: 0.3cqw solid rgba(255, 255, 255, 0.74);
  border-radius: 3.1cqw;
  color: #4b3b6e;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(241, 234, 255, 0.92));
  box-shadow:
    0 1.1cqw 0 rgba(102, 83, 152, 0.34),
    0 2cqw 4cqw rgba(53, 37, 91, 0.18),
    inset 0 0.28cqw 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}

.booster:hover {
  transform: translateY(-0.55cqw);
  filter: brightness(1.03);
}

.booster:active {
  transform: translateY(0.4cqw);
  box-shadow: 0 0.4cqw 0 rgba(102, 83, 152, 0.34), 0 1cqw 2.2cqw rgba(53, 37, 91, 0.18);
}

.booster.used {
  filter: grayscale(0.9) brightness(0.94);
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.booster.active {
  border-color: #54f2ff;
  box-shadow:
    0 1.1cqw 0 rgba(76, 62, 128, 0.34),
    0 0 0 0.7cqw rgba(84, 242, 255, 0.25),
    0 0 3.5cqw rgba(84, 242, 255, 0.65);
  animation: active-glow 1.1s ease-in-out infinite alternate;
}

.booster-art {
  display: grid;
  place-items: center;
  width: 9.7cqw;
  height: 9.7cqw;
}

.booster-art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.booster-label {
  color: #5f527b;
  font-size: 2.15cqw;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
}

.booster-badge {
  position: absolute;
  z-index: 2;
  top: -0.9cqw;
  right: -0.9cqw;
  display: grid;
  place-items: center;
  min-width: 4.2cqw;
  height: 4.2cqw;
  padding: 0 0.75cqw;
  border: 0.38cqw solid #fff6e5;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #64e58e, #22b85a);
  box-shadow: 0 0.45cqw 0 #157b3a, 0 0.8cqw 1.8cqw rgba(21, 123, 58, 0.28);
  font-family: var(--font-display);
  font-size: 2.3cqw;
  font-weight: 700;
  line-height: 1;
}

.booster.used .booster-badge {
  background: #b5afc2;
  box-shadow: 0 0.45cqw 0 #817b91;
}

.pause-btn {
  display: grid;
  place-items: center;
  width: 8.9cqw;
  height: 8.9cqw;
  margin-bottom: 0.15cqw;
  border: 0.3cqw solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  color: #3b2e5d;
  background: linear-gradient(160deg, #ffffff, #e7e0fa);
  box-shadow: 0 0.9cqw 0 rgba(86, 68, 137, 0.32), 0 1.6cqw 3cqw rgba(50, 34, 88, 0.2);
}

.pause-btn svg {
  width: 4.5cqw;
  height: 4.5cqw;
}

.pause-btn:active {
  transform: translateY(0.45cqw);
  box-shadow: 0 0.35cqw 0 rgba(86, 68, 137, 0.32);
}

/* --------------------------- screens / sheets --------------------------- */

.screen {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4cqw;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  touch-action: pan-y;
  transition: opacity 0.26s ease, visibility 0.26s step-end;
}

.screen.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.26s ease, visibility 0s step-start;
}

.sheet {
  width: 88cqw;
  max-height: 88cqh;
  padding: 5cqw 4.8cqw 4.4cqw;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border: 0.4cqw solid rgba(255, 255, 255, 0.9);
  border-radius: 5.5cqw;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(160deg, #fffbf1, #f0e9ff 100%);
  box-shadow:
    0 2.2cqw 0 rgba(47, 33, 83, 0.3),
    0 5cqw 12cqw rgba(19, 12, 38, 0.46),
    inset 0 0.3cqw 0 #fff;
  animation: sheet-pop 0.3s cubic-bezier(0.2, 1.35, 0.4, 1) both;
}

.sheet::-webkit-scrollbar,
.level-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3cqw;
}

.eyebrow {
  display: block;
  margin-bottom: 0.8cqw;
  color: #8c7ac9;
  font-family: var(--font-display);
  font-size: 1.85cqw;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.sheet h2 {
  margin: 0;
  color: #2c2148;
  font-family: var(--font-display);
  font-size: 6.2cqw;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.sheet-sub {
  margin: 1.4cqw 0 3.2cqw;
  color: #7e7397;
  font-size: 2.6cqw;
  font-weight: 700;
  line-height: 1.55;
}

.pause-sheet {
  width: 80cqw;
  text-align: center;
}

.pause-sheet .sheet-sub {
  margin-bottom: 3cqw;
}

.pause-actions {
  display: grid;
  gap: 1.7cqw;
  margin-bottom: 2.8cqw;
}

.pause-settings {
  padding-top: 2.4cqw;
  border-top: 0.25cqw dashed #d8cfe9;
}

.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 1.2cqw 2.2cqw;
  border: 0.26cqw solid #ded5c9;
  border-radius: 999px;
  color: #615478;
  background: #fffdf6;
  font-size: 2.5cqw;
  font-weight: 800;
  cursor: pointer;
}

.sound-toggle[aria-pressed="false"] {
  color: #9e94ad;
  background: #f0ece4;
}

.sound-icon svg {
  display: block;
  width: 4.3cqw;
  height: 4.3cqw;
}

/* --------------------------- start screen --------------------------- */

.start-screen {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(24, 16, 46, 0.02) 0%, rgba(24, 16, 46, 0.24) 24%, rgba(23, 15, 44, 0.86) 57%, #17102e 100%);
  backdrop-filter: blur(0.8cqw);
}

.start-screen.is-open {
  opacity: 1;
}

.start-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 100%;
  padding: 5cqw 6cqw 7.5cqw;
}

.start-art {
  width: 57cqw;
  max-height: 44cqh;
  margin-top: auto;
  margin-bottom: -2.4cqw;
  filter: drop-shadow(0 4cqw 5cqw rgba(10, 5, 24, 0.36));
  animation: art-float 4.2s ease-in-out infinite;
}

.start-art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.start-bus {
  animation: bus-bob 2.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.start-logo {
  text-align: center;
}

.start-logo-small {
  display: inline-block;
  margin-bottom: 0.8cqw;
  padding: 0.6cqw 1.8cqw;
  border: 0.24cqw solid rgba(255, 238, 151, 0.32);
  border-radius: 999px;
  color: #ffe88f;
  font-size: 2.25cqw;
  font-weight: 900;
  letter-spacing: 0.32em;
  background: rgba(255, 218, 86, 0.1);
}

.start-logo-main {
  color: #fff9ed;
  font-family: var(--font-display);
  font-size: 14.6cqw;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-shadow:
    0 1.1cqw 0 #6d4cce,
    0 1.7cqw 0 #3e2b82,
    0 2.8cqw 4.5cqw rgba(15, 8, 34, 0.4);
}

.start-logo-main span {
  display: inline-block;
  margin-left: 0.7cqw;
  color: #ffdd58;
  transform: rotate(-4deg) translateY(0.25cqw);
  text-shadow:
    0 1.1cqw 0 #d77725,
    0 1.7cqw 0 #8f4014,
    0 2.8cqw 4.5cqw rgba(15, 8, 34, 0.4);
}

.start-logo p {
  margin: 1.8cqw 0 4.2cqw;
  color: #c6b9e6;
  font-size: 2.75cqw;
  font-weight: 900;
  letter-spacing: 0.22em;
}

.start-links {
  display: flex;
  align-items: center;
  gap: 3.2cqw;
  margin-top: 3.2cqw;
}

.start-links button {
  padding: 0.8cqw 0.5cqw;
  border: 0;
  color: #d8cff4;
  background: transparent;
  font-size: 2.55cqw;
  font-weight: 800;
  cursor: pointer;
  opacity: 0.88;
}

.start-links button:hover,
.start-links a:hover {
  color: #fff;
  opacity: 1;
}

.start-links a {
  padding: 0.8cqw 0.5cqw;
  color: #d8cff4;
  font-size: 2.55cqw;
  font-weight: 800;
  text-decoration: none;
  opacity: 0.88;
}

.start-links span {
  width: 0.25cqw;
  height: 2.8cqw;
  background: rgba(255, 255, 255, 0.18);
}

.start-bank {
  display: flex;
  align-items: center;
  gap: 1cqw;
  margin-top: 3.5cqw;
  color: #a99dc8;
  font-size: 2.3cqw;
  font-weight: 700;
}

.start-bank b {
  color: #ffe27b;
}

/* --------------------------- level select --------------------------- */

.level-screen {
  background: rgba(24, 16, 46, 0.58);
  backdrop-filter: blur(0.7cqw);
}

.level-sheet {
  width: 92cqw;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2cqw;
  max-height: 63cqh;
  padding: 0.3cqw 0.3cqw 1.5cqw;
  overflow-y: auto;
  touch-action: pan-y;
}

.chapter-nav {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2cqw;
  margin-bottom: 0.4cqw;
  padding: 0.55cqw 0.7cqw;
  border: 0.18cqw solid rgba(255,255,255,.7);
  border-radius: 1.6cqw;
  background: rgba(255,252,243,.88);
  box-shadow: 0 0.35cqw 0 rgba(149,129,190,.22);
  backdrop-filter: blur(6px);
}

.chapter-title {
  flex: 1;
  text-align: center;
  line-height: 1.15;
}

.chapter-title small {
  display: block;
  color: #8b7aa9;
  font-size: clamp(8px, 1.05cqw, 13px);
  font-weight: 800;
  letter-spacing: .08em;
}

.chapter-title strong {
  display: block;
  color: #4b376d;
  font-size: clamp(11px, 1.55cqw, 21px);
  font-weight: 900;
}

.chapter-btn {
  width: clamp(30px, 3.6cqw, 52px);
  height: clamp(30px, 3.6cqw, 52px);
  border: 0;
  border-radius: 50%;
  background: linear-gradient(160deg,#ffd96a,#f0b62e);
  box-shadow: 0 0.28cqw 0 #c58e12, inset 0 0.15cqw 0 rgba(255,255,255,.75);
  color: #5e3b05;
  font-size: clamp(20px, 2.6cqw, 36px);
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
}

.chapter-btn:disabled {
  opacity: .35;
  cursor: default;
}

.chapter-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.level-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1.03;
  padding: 0.6cqw;
  border: 0.3cqw solid #ded4ef;
  border-radius: 2.7cqw;
  color: #443365;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.9), transparent 55%),
    linear-gradient(160deg, #fffdf7, #ece4ff);
  box-shadow: 0 0.75cqw 0 #cfc2e8, inset 0 0.25cqw 0 #fff;
  cursor: pointer;
  transition: transform 0.13s ease, box-shadow 0.13s ease;
}

.level-card:hover:not(.locked) {
  transform: translateY(-0.6cqw);
  box-shadow: 0 1.3cqw 0 #cfc2e8, inset 0 0.25cqw 0 #fff;
}

.level-card:active:not(.locked) {
  transform: translateY(0.35cqw);
  box-shadow: 0 0.35cqw 0 #cfc2e8;
}

.level-card strong {
  font-family: var(--font-display);
  font-size: 4.2cqw;
  font-weight: 700;
  line-height: 1;
}

.level-card small {
  margin-top: 0.4cqw;
  color: #9b8dbd;
  font-family: var(--font-display);
  font-size: 1.5cqw;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.level-stars {
  display: flex;
  gap: 0.2cqw;
  margin-top: 0.65cqw;
  color: #d9d0e7;
  font-size: 2.2cqw;
  line-height: 1;
}

.level-stars .on {
  color: #ffc937;
  filter: drop-shadow(0 0.2cqw 0 #c17a0c);
}

.level-card.locked {
  color: #9a8eaf;
  background: linear-gradient(160deg, #e3ddeb, #d5cde1);
  box-shadow: 0 0.75cqw 0 #c2b9d0;
  cursor: not-allowed;
}

.level-card.locked strong {
  color: #9588ac;
}

.level-card.locked::after {
  content: "🔒";
  position: absolute;
  right: 1.1cqw;
  top: 0.8cqw;
  font-size: 2.7cqw;
  filter: grayscale(1) saturate(0.2);
  opacity: 0.8;
}

.level-card.current {
  border-color: #7e66e0;
  box-shadow: 0 0.75cqw 0 #6b53c8, 0 0 0 0.55cqw rgba(126, 102, 224, 0.17);
}

.level-card.current::before {
  content: "";
  position: absolute;
  top: 0.9cqw;
  left: 50%;
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: #ffca3a;
  box-shadow: 0 0 0 0.3cqw rgba(255, 202, 58, 0.18);
  transform: translateX(-50%);
}

/* --------------------------- how to play --------------------------- */

.how-screen {
  background: rgba(24, 16, 46, 0.58);
  backdrop-filter: blur(0.7cqw);
}

.how-sheet {
  width: 89cqw;
}

.how-list {
  display: grid;
  gap: 1.7cqw;
  margin: 2.8cqw 0 3.2cqw;
}

.how-item {
  display: flex;
  align-items: flex-start;
  gap: 2.2cqw;
  padding: 2cqw;
  border: 0.25cqw solid #e5dcf1;
  border-radius: 2.7cqw;
  background: rgba(255, 255, 255, 0.55);
}

.how-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 7cqw;
  height: 7cqw;
  border-radius: 2cqw;
  color: #6f57d4;
  font-family: var(--font-display);
  font-size: 3.4cqw;
  font-weight: 700;
  background: #eee8ff;
  box-shadow: inset 0 0.25cqw 0 #fff;
}

.arrow-ico {
  color: #fff;
  background: linear-gradient(145deg, #8d73ed, #6a4bda);
  transform: rotate(-8deg);
}

.people-ico {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.3cqw;
  color: transparent;
  background: #f4edff;
}

.people-ico i {
  display: block;
  width: 1.3cqw;
  height: 1.3cqw;
  border-radius: 50%;
  background: #ff58b6;
  box-shadow: 0 1.35cqw 0 #ff58b6;
}

.people-ico i:nth-child(2) {
  height: 1.7cqw;
  background: #4aadff;
  box-shadow: 0 1.45cqw 0 #4aadff;
}

.people-ico i:nth-child(3) {
  background: #ffc83b;
  box-shadow: 0 1.35cqw 0 #ffc83b;
}

.bay-ico {
  color: #fff;
  font-size: 4cqw;
  background: linear-gradient(145deg, #a88bff, #7054d8);
}

.star-ico {
  color: #8b5b00;
  background: linear-gradient(145deg, #ffe774, #ffc42e);
}

.how-item b {
  display: block;
  margin: 0.25cqw 0 0.55cqw;
  color: #352650;
  font-size: 2.75cqw;
  font-weight: 900;
}

.how-item p {
  margin: 0;
  color: #807498;
  font-size: 2.3cqw;
  font-weight: 700;
  line-height: 1.55;
}

/* --------------------------- result --------------------------- */

.result-screen {
  z-index: 70;
  background: rgba(20, 13, 39, 0.57);
  backdrop-filter: blur(0.9cqw);
}

.result-card {
  position: relative;
  z-index: 2;
  width: 83cqw;
  padding: 6.5cqw 5cqw 4.7cqw;
  overflow: hidden;
  border: 0.4cqw solid rgba(255, 255, 255, 0.92);
  border-radius: 6cqw;
  color: var(--ink);
  text-align: center;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 226, 114, 0.6), transparent 42%),
    linear-gradient(160deg, #fffdf5, #eee6ff);
  box-shadow:
    0 2.2cqw 0 rgba(47, 33, 83, 0.32),
    0 5cqw 13cqw rgba(13, 7, 27, 0.5),
    inset 0 0.35cqw 0 #fff;
  animation: result-pop 0.42s cubic-bezier(0.2, 1.3, 0.36, 1) both;
}

.result-burst {
  position: absolute;
  top: -18cqw;
  left: 50%;
  width: 65cqw;
  height: 65cqw;
  border-radius: 50%;
  opacity: 0.5;
  background: repeating-conic-gradient(rgba(255, 195, 49, 0.19) 0 9deg, transparent 9deg 21deg);
  transform: translateX(-50%);
  pointer-events: none;
  animation: spin-slow 18s linear infinite;
}

.result-eyebrow {
  position: relative;
  display: block;
  color: #a18538;
  font-family: var(--font-display);
  font-size: 1.9cqw;
  font-weight: 700;
  letter-spacing: 0.28em;
}

.result-card h2 {
  position: relative;
  margin: 1.3cqw 0 0;
  color: #2f214b;
  font-family: var(--font-display);
  font-size: 6.6cqw;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.result-stars {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 1.2cqw;
  margin: 2.6cqw 0 1.4cqw;
  color: #d6cde3;
  font-size: 11.8cqw;
  line-height: 0.9;
  text-shadow: 0 0.5cqw 0 rgba(107, 82, 145, 0.15);
}

.result-stars span {
  display: inline-block;
  transform: scale(0.72) rotate(-9deg);
  transition: transform 0.32s cubic-bezier(0.2, 1.5, 0.4, 1), color 0.2s ease;
}

.result-stars span:nth-child(2) {
  transform: scale(0.72) rotate(0deg);
}

.result-stars span:nth-child(3) {
  transform: scale(0.72) rotate(9deg);
}

.result-stars span.on {
  color: #ffca3a;
  text-shadow: 0 0.65cqw 0 #c57a0f, 0 1.3cqw 2.4cqw rgba(199, 122, 15, 0.3);
  transform: scale(1) rotate(0deg);
}

.result-stars span.on:nth-child(1) {
  transform: scale(1) rotate(-9deg);
}

.result-stars span.on:nth-child(3) {
  transform: scale(1) rotate(9deg);
}

.result-copy {
  position: relative;
  margin: 0 auto 2.8cqw;
  max-width: 64cqw;
  color: #7e7197;
  font-size: 2.5cqw;
  font-weight: 700;
  line-height: 1.55;
}

.result-reward {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
  margin-bottom: 3.6cqw;
  padding: 1.2cqw 2.2cqw;
  border: 0.25cqw solid rgba(236, 178, 48, 0.3);
  border-radius: 999px;
  color: #91620b;
  background: #fff5cf;
  font-family: var(--font-display);
  font-size: 3cqw;
  font-weight: 700;
}

.result-reward.hidden {
  display: none;
}

.result-actions {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6cqw;
}

.result-actions .btn-play {
  grid-column: 1 / -1;
}

.result-actions .btn-soft {
  height: 8.6cqw;
  font-size: 2.8cqw;
}

/* --------------------------- fake ad --------------------------- */

.ad-screen {
  z-index: 75;
  background: rgba(12, 8, 24, 0.84);
  backdrop-filter: blur(0.9cqw);
}

.ad-card {
  width: 80cqw;
  padding: 5cqw 4.5cqw 4cqw;
  border: 0.35cqw solid rgba(255, 255, 255, 0.18);
  border-radius: 5cqw;
  color: #f9f2ff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(116, 82, 222, 0.55), transparent 55%),
    linear-gradient(160deg, #2c1e56, #1a1133);
  box-shadow: 0 4cqw 12cqw rgba(0, 0, 0, 0.45);
  animation: sheet-pop 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.ad-tag {
  display: inline-block;
  padding: 0.4cqw 1.2cqw;
  border-radius: 0.8cqw;
  color: #1b1430;
  background: #c9bdf1;
  font-size: 1.7cqw;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.ad-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 44cqw;
  height: 32cqw;
  margin: 2.5cqw auto 1cqw;
}

.ad-ring {
  position: absolute;
  width: 42cqw;
  height: 26cqw;
  border: 2.8cqw solid rgba(133, 106, 238, 0.3);
  border-radius: 50%;
  transform: rotate(-10deg);
}

.ad-bus {
  position: relative;
  z-index: 1;
  width: 31cqw;
  filter: drop-shadow(0 1.5cqw 0 rgba(0, 0, 0, 0.28));
  animation: bus-bob 1.7s ease-in-out infinite;
}

.ad-bus svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ad-spark {
  position: absolute;
  color: #ffe472;
  font-size: 4cqw;
  animation: sparkle 1.6s ease-in-out infinite;
}

.ad-spark.s1 { left: 3cqw; top: 8cqw; }
.ad-spark.s2 { right: 4cqw; top: 5cqw; animation-delay: -0.5s; }
.ad-spark.s3 { right: 11cqw; bottom: 1cqw; animation-delay: -1s; }

.ad-card h3 {
  margin: 0.8cqw 0 0.8cqw;
  font-family: var(--font-display);
  font-size: 5cqw;
  font-weight: 700;
}

.ad-card p {
  margin: 0 auto 3cqw;
  max-width: 55cqw;
  color: #bdb0dc;
  font-size: 2.4cqw;
  font-weight: 700;
  line-height: 1.55;
}

.ad-card .btn-soft {
  height: 9.5cqw;
  color: #3a2b57;
  font-size: 3cqw;
}

.ad-card .btn-soft:disabled {
  cursor: wait;
  opacity: 0.58;
}

.ad-skip {
  margin-top: 2.2cqw;
  padding: 0.6cqw;
  border: 0;
  color: #9c8cbe;
  background: transparent;
  font-size: 2.2cqw;
  font-weight: 700;
  cursor: pointer;
}

/* --------------------------- confetti --------------------------- */

.confetti {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -8cqw;
  width: 1.5cqw;
  height: 3cqw;
  border-radius: 0.3cqw;
  opacity: 0;
  animation: confetti-fall var(--fall-time, 2.6s) cubic-bezier(0.16, 0.6, 0.4, 1) var(--delay, 0s) forwards;
}

/* --------------------------- responsive --------------------------- */

@media (max-width: 1120px) {
  .site-shell {
    gap: 38px;
  }

  .hero-panel {
    width: min(370px, 37vw);
    min-width: 300px;
  }

  .hero-panel h1,
.hero-title {
    font-size: clamp(34px, 4.2vw, 48px);
  }

  .hero-copy {
    font-size: 14px;
  }

  .hero-stats strong {
    font-size: 24px;
  }
}

@media (max-width: 899px) {
  body {
    overflow: hidden;
    background: #17102e;
  }

  .page-ambient,
  .hero-panel,
  .mobile-note {
    display: none;
  }

  .site-shell {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
  }

  .game-column {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    background:
      radial-gradient(circle at 50% 10%, #31205b 0%, transparent 42%),
      #0f0a1e;
  }

  .phone-shell {
    width: min(100vw, calc(100dvh * 0.46154));
    max-width: 100vw;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .phone-shell::before {
    display: none;
  }

  .stage {
    border-radius: 0;
  }

  .btn-play {
    width: 70cqw;
    height: 12cqw;
    border-radius: 4.4cqw;
    font-size: 4.25cqw;
  }

  .start-logo-main {
    font-size: 15.4cqw;
  }

  .start-inner {
    padding-bottom: 8cqw;
  }
}

/* Desktop: a larger landscape console instead of a small phone. */
@media (min-width: 900px) {
  body {
    overflow: hidden;
    background: #0f0a1e;
  }

  .site-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.2vh 1vw;
  }

  .hero-panel {
    display: none;
  }

  .game-column {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 0;
    background:
      radial-gradient(circle at 50% 45%, rgba(68, 46, 128, 0.32), transparent 58%),
      #0f0a1e;
  }

  .phone-shell {
    width: min(99vw, calc(97.5dvh * 4 / 3), 1600px);
    aspect-ratio: 4 / 3;
    border: 7px solid #171129;
    border-radius: 38px;
    background: #171129;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.12),
      0 0 0 8px rgba(255, 255, 255, 0.025),
      0 38px 90px rgba(0, 0, 0, 0.5),
      0 12px 32px rgba(0, 0, 0, 0.4);
  }

  .phone-shell::before {
    display: none;
  }

  .stage {
    border-radius: 31px;
  }

  .version-tag {
    display: none;
  }
}

/* The wide desktop stage needs its own UI scale; cqw keeps it crisp at any size. */
@container (min-width: 800px) {
  .hud {
    top: 1.35cqw;
    left: 1.45cqw;
    right: 1.45cqw;
    gap: 1.4cqw;
  }

  .hud-coin,
  .hud-level,
  .hud-goal {
    height: 4.25cqw;
    border-width: 0.16cqw;
    box-shadow:
      0 0.32cqw 0 rgba(31, 23, 61, 0.3),
      inset 0 0.18cqw 0 rgba(255, 255, 255, 0.16),
      0 0.6cqw 1.4cqw rgba(29, 21, 58, 0.18);
  }

  .hud-coin {
    min-width: 10.5cqw;
    gap: 0.7cqw;
    padding: 0 1.35cqw 0 0.7cqw;
    font-size: 1.85cqw;
  }

  .coin-icon {
    width: 2.85cqw;
    height: 2.85cqw;
    border-width: 0.16cqw;
    font-size: 1.35cqw;
  }

  .hud-level {
    min-width: 9cqw;
    padding: 0 1.2cqw;
    border-radius: 1.15cqw;
  }

  .hud-level-kicker {
    margin-bottom: 0;
    font-size: 0.9cqw;
  }

  .hud-level > span:last-child {
    font-size: 2.1cqw;
  }

  .hud-goal {
    min-width: 9.4cqw;
    gap: 0.5cqw;
    padding: 0 1.2cqw;
    font-size: 1.55cqw;
  }

  .goal-star {
    font-size: 1.8cqw;
  }

  .dock {
    right: 2cqw;
    bottom: 1.25cqw;
    left: 2cqw;
    justify-content: space-between;
    gap: 2cqw;
  }

  .dock-controls {
    gap: 1.45cqw;
  }

  .ad-slot-dock {
    display: flex;
    margin-bottom: 0.9cqw;
  }

  .booster {
    width: 7.6cqw;
    height: 7.6cqw;
    gap: 0.15cqw;
    border-width: 0.16cqw;
    border-radius: 1.45cqw;
    box-shadow:
      0 0.55cqw 0 rgba(102, 83, 152, 0.34),
      0 1.1cqw 2.2cqw rgba(53, 37, 91, 0.18),
      inset 0 0.16cqw 0 rgba(255, 255, 255, 0.8);
  }

  .booster-art {
    width: 4.65cqw;
    height: 4.65cqw;
  }

  .booster-label {
    font-size: 1.05cqw;
  }

  .booster-badge {
    top: -0.45cqw;
    right: -0.45cqw;
    min-width: 2.1cqw;
    height: 2.1cqw;
    padding: 0 0.35cqw;
    border-width: 0.2cqw;
    font-size: 1.1cqw;
    box-shadow: 0 0.24cqw 0 #157b3a, 0 0.4cqw 0.9cqw rgba(21, 123, 58, 0.28);
  }

  .booster.used .booster-badge {
    box-shadow: 0 0.24cqw 0 #817b91;
  }

  .pause-btn {
    width: 4.4cqw;
    height: 4.4cqw;
    border-width: 0.16cqw;
    box-shadow: 0 0.5cqw 0 rgba(86, 68, 137, 0.32), 0 0.9cqw 1.8cqw rgba(50, 34, 88, 0.2);
  }

  .pause-btn svg {
    width: 2.2cqw;
    height: 2.2cqw;
  }

  .countdown-pill {
    top: 8.1cqw;
    gap: 0.8cqw;
    padding: 0.7cqw 1.35cqw 0.7cqw 0.7cqw;
    border-width: 0.16cqw;
    box-shadow: 0 0.65cqw 1.6cqw rgba(132, 17, 40, 0.4), inset 0 0.16cqw 0 rgba(255, 255, 255, 0.33);
  }

  .countdown-icon {
    width: 2.7cqw;
    height: 2.7cqw;
    font-size: 1.75cqw;
  }

  .countdown-copy {
    font-size: 1.45cqw;
  }

  .countdown-time {
    min-width: 3.5cqw;
    padding: 0.25cqw 0.55cqw;
    font-size: 1.45cqw;
  }

  .toast {
    top: 43%;
    max-width: 42cqw;
    padding: 1.1cqw 1.75cqw;
    border-width: 0.12cqw;
    border-radius: 1.25cqw;
    font-size: 1.38cqw;
    box-shadow: 0 0.8cqw 2.2cqw rgba(15, 10, 28, 0.36);
  }

  .screen {
    padding: 2cqw;
  }

  .sheet {
    width: 44cqw;
    max-height: 86cqh;
    padding: 2.4cqw 2.2cqw 2.1cqw;
    border-width: 0.2cqw;
    border-radius: 2.6cqw;
    box-shadow:
      0 1.1cqw 0 rgba(47, 33, 83, 0.3),
      0 2.6cqw 6cqw rgba(19, 12, 38, 0.46),
      inset 0 0.16cqw 0 #fff;
  }

  .sheet h2 {
    font-size: 3cqw;
  }

  .eyebrow {
    margin-bottom: 0.4cqw;
    font-size: 0.9cqw;
  }

  .sheet-sub {
    margin: 0.7cqw 0 1.6cqw;
    font-size: 1.25cqw;
  }

  .icon-close {
    width: 4cqw;
    height: 4cqw;
    font-size: 2.7cqw;
  }

  .pause-sheet {
    width: 34cqw;
  }

  .how-sheet {
    width: 42cqw;
  }

  .level-sheet {
    width: 52cqw;
  }

  .level-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.15cqw;
    max-height: 67cqh;
    padding: 0.2cqw 0.2cqw 0.8cqw;
  }

  .level-card {
    border-width: 0.16cqw;
    border-radius: 1.35cqw;
    box-shadow: 0 0.38cqw 0 #cfc2e8;
  }

  .level-card:hover:not(.locked) {
    box-shadow: 0 0.65cqw 0 #cfc2e8, inset 0 0.12cqw 0 #fff;
  }

  .level-card strong {
    font-size: 2.2cqw;
  }

  .level-card small {
    margin-top: 0.2cqw;
    font-size: 0.8cqw;
  }

  .level-stars {
    gap: 0.1cqw;
    margin-top: 0.3cqw;
    font-size: 1.15cqw;
  }

  .level-card.locked::after {
    right: 0.55cqw;
    top: 0.4cqw;
    font-size: 1.4cqw;
  }

  .level-card.current::before {
    top: 0.45cqw;
    width: 0.6cqw;
    height: 0.6cqw;
    box-shadow: 0 0 0 0.15cqw rgba(255, 202, 58, 0.18);
  }

  .btn-play {
    width: 30cqw;
    height: 5.4cqw;
    gap: 1cqw;
    border-radius: 2cqw;
    font-size: 1.9cqw;
    box-shadow:
      0 0.65cqw 0 #d47d12,
      0 1.1cqw 2.2cqw rgba(43, 26, 80, 0.3),
      inset 0 0.12cqw 0 rgba(255, 255, 255, 0.65);
  }

  .btn-play::after {
    inset: 0.32cqw;
    border-width: 0.12cqw;
    border-radius: 1.6cqw;
  }

  .btn-play:hover {
    transform: translateY(-0.18cqw);
  }

  .btn-play:active {
    transform: translateY(0.45cqw);
    box-shadow: 0 0.18cqw 0 #d47d12, 0 0.6cqw 1.2cqw rgba(43, 26, 80, 0.26);
  }

  .btn-play.compact {
    width: 100%;
    height: 5.2cqw;
    border-radius: 1.8cqw;
    font-size: 1.65cqw;
  }

  .play-orb {
    width: 3.5cqw;
    height: 3.5cqw;
  }

  .play-orb svg {
    width: 1.9cqw;
    height: 1.9cqw;
    transform: translateX(0.12cqw);
  }

  .btn-soft {
    height: 4.7cqw;
    border-width: 0.13cqw;
    border-radius: 1.5cqw;
    font-size: 1.45cqw;
    box-shadow: 0 0.35cqw 0 #d8d0c2;
  }

  .btn-soft:active {
    box-shadow: 0 0.1cqw 0 #d8d0c2;
  }

  .pause-actions {
    gap: 1cqw;
    margin-bottom: 1.4cqw;
  }

  .pause-settings {
    padding-top: 1.2cqw;
    border-top-width: 0.12cqw;
  }

  .sound-toggle {
    gap: 0.6cqw;
    padding: 0.6cqw 1.1cqw;
    border-width: 0.13cqw;
    font-size: 1.2cqw;
  }

  .sound-icon svg {
    width: 2.2cqw;
    height: 2.2cqw;
  }

  .how-list {
    gap: 1cqw;
    margin: 1.4cqw 0 1.6cqw;
  }

  .how-item {
    gap: 1.1cqw;
    padding: 1.1cqw;
    border-width: 0.13cqw;
    border-radius: 1.4cqw;
  }

  .how-ico {
    width: 3.5cqw;
    height: 3.5cqw;
    border-radius: 1cqw;
    font-size: 1.8cqw;
  }

  .people-ico {
    gap: 0.15cqw;
  }

  .people-ico i {
    width: 0.62cqw;
    height: 0.62cqw;
    box-shadow: 0 0.65cqw 0 #ff58b6;
  }

  .people-ico i:nth-child(2) {
    height: 0.8cqw;
    box-shadow: 0 0.72cqw 0 #4aadff;
  }

  .people-ico i:nth-child(3) {
    box-shadow: 0 0.65cqw 0 #ffc83b;
  }

  .bay-ico {
    font-size: 2cqw;
  }

  .how-item b {
    margin: 0.1cqw 0 0.3cqw;
    font-size: 1.4cqw;
  }

  .how-item p {
    font-size: 1.15cqw;
  }

  .result-screen {
    padding: 2cqw;
  }

  .result-card {
    width: 36cqw;
    padding: 3.2cqw 2.6cqw 2.4cqw;
    border-width: 0.2cqw;
    border-radius: 2.8cqw;
    box-shadow:
      0 1.1cqw 0 rgba(47, 33, 83, 0.32),
      0 2.6cqw 6.5cqw rgba(13, 7, 27, 0.5),
      inset 0 0.18cqw 0 #fff;
  }

  .result-eyebrow {
    font-size: 0.9cqw;
  }

  .result-card h2 {
    margin: 0.6cqw 0 0;
    font-size: 3.2cqw;
  }

  .result-stars {
    gap: 0.6cqw;
    margin: 1.2cqw 0 0.7cqw;
    font-size: 5.8cqw;
    text-shadow: 0 0.25cqw 0 rgba(107, 82, 145, 0.15);
  }

  .result-stars span.on {
    text-shadow: 0 0.3cqw 0 #c57a0f, 0 0.65cqw 1.2cqw rgba(199, 122, 15, 0.3);
  }

  .result-copy {
    max-width: 30cqw;
    margin-bottom: 1.4cqw;
    font-size: 1.2cqw;
  }

  .result-reward {
    gap: 0.6cqw;
    margin-bottom: 1.8cqw;
    padding: 0.6cqw 1.1cqw;
    border-width: 0.13cqw;
    font-size: 1.4cqw;
  }

  .result-actions {
    gap: 0.8cqw;
  }

  .result-actions .btn-soft {
    height: 4.4cqw;
    font-size: 1.35cqw;
  }

  .ad-card {
    width: 34cqw;
    padding: 2.5cqw 2.2cqw 2cqw;
    border-width: 0.18cqw;
    border-radius: 2.4cqw;
    box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, 0.45);
  }

  .ad-tag {
    padding: 0.2cqw 0.6cqw;
    border-radius: 0.4cqw;
    font-size: 0.85cqw;
  }

  .ad-art {
    width: 20cqw;
    height: 14cqw;
    margin: 1.2cqw auto 0.5cqw;
  }

  .ad-ring {
    width: 19cqw;
    height: 12cqw;
    border-width: 1.4cqw;
  }

  .ad-bus {
    width: 14cqw;
  }

  .ad-card h3 {
    margin: 0.4cqw 0;
    font-size: 2.2cqw;
  }

  .ad-card p {
    max-width: 24cqw;
    margin-bottom: 1.4cqw;
    font-size: 1.2cqw;
  }

  .ad-card .btn-soft {
    height: 4.8cqw;
    font-size: 1.45cqw;
  }

  .ad-skip {
    margin-top: 1cqw;
    font-size: 1.1cqw;
  }

  .start-screen {
    align-items: center;
    justify-content: center;
    padding: 0;
    backdrop-filter: blur(0.45cqw);
  }

  .start-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "art logo"
      "art play"
      "art links"
      "art bank";
    align-content: center;
    justify-items: center;
    gap: 1.2cqw 3cqw;
    width: 100%;
    max-width: 1000px;
    min-height: 0;
    margin: auto;
    padding: 3cqw 6cqw;
  }

  .start-art {
    grid-area: art;
    align-self: center;
    width: 38cqw;
    max-height: none;
    margin: 0;
    animation: art-float 4.2s ease-in-out infinite;
  }

  .start-logo {
    grid-area: logo;
    align-self: end;
  }

  .start-logo-small {
    margin-bottom: 0.5cqw;
    padding: 0.3cqw 0.9cqw;
    border-width: 0.12cqw;
    font-size: 1.1cqw;
  }

  .start-logo-main {
    font-size: 6.3cqw;
    letter-spacing: -0.055em;
    white-space: nowrap;
    text-shadow:
      0 0.55cqw 0 #6d4cce,
      0 0.85cqw 0 #3e2b82,
      0 1.4cqw 2.2cqw rgba(15, 8, 34, 0.4);
  }

  .start-logo-main span {
    margin-left: 0.35cqw;
    transform: rotate(-4deg) translateY(0.12cqw);
    text-shadow:
      0 0.55cqw 0 #d77725,
      0 0.85cqw 0 #8f4014,
      0 1.4cqw 2.2cqw rgba(15, 8, 34, 0.4);
  }

  .start-logo p {
    margin: 0.9cqw 0 0;
    font-size: 1.25cqw;
    letter-spacing: 0.16em;
  }

  .start-screen #btn-play {
    grid-area: play;
    width: 28cqw;
    height: 5.2cqw;
    margin-top: 0.5cqw;
    border-radius: 1.9cqw;
    font-size: 1.8cqw;
  }

  .start-links {
    grid-area: links;
    gap: 1.6cqw;
    margin-top: 0.4cqw;
  }

  .start-links button {
    padding: 0.4cqw 0.2cqw;
    font-size: 1.15cqw;
  }

  .start-links span {
    width: 0.12cqw;
    height: 1.3cqw;
  }

  .start-bank {
    grid-area: bank;
    gap: 0.5cqw;
    margin-top: 0.4cqw;
    font-size: 1.05cqw;
  }

  .start-bank .coin-icon.small {
    width: 1.2cqw;
    height: 1.2cqw;
    border-width: 0.08cqw;
    font-size: 0.6cqw;
  }

  .version-tag {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------- keyframes --------------------------- */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes phone-in {
  from { opacity: 0; transform: translateY(34px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

@keyframes art-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.2cqw); }
}

@keyframes bus-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-1.5cqw) rotate(1deg); }
}

@keyframes sheet-pop {
  from { opacity: 0; transform: translateY(2.5cqw) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-pop {
  0% { opacity: 0; transform: translateY(3cqw) scale(0.86); }
  70% { transform: translateY(-0.4cqw) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes warning-bounce {
  from { transform: scale(0.92); }
  to { transform: scale(1.06); }
}

@keyframes danger-pulse {
  from { opacity: 0.65; }
  to { opacity: 1; }
}

@keyframes active-glow {
  from { filter: brightness(1); }
  to { filter: brightness(1.08); }
}

@keyframes spin-slow {
  to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(0.75) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(28deg); }
}

@keyframes confetti-fall {
  0% { opacity: 0; transform: translate3d(0, -4cqw, 0) rotate(0deg); }
  8% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(var(--drift, 4cqw), 125cqh, 0) rotate(var(--spin, 640deg)); }
}

/* --------------------------- ad slots --------------------------- */

.ad-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.52);
  background: rgba(20, 13, 38, 0.28);
  font-family: "Nunito", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ad-slot-tag {
  position: absolute;
  top: 4px;
  left: 6px;
  padding: 1px 4px;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.42);
  background: rgba(0, 0, 0, 0.16);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.ad-slot-hint {
  opacity: 0.68;
}

.ad-slot-horizontal {
  flex: 0 0 auto;
  width: min(100%, 360px);
  min-height: 54px;
  margin-top: 2.2cqw;
}

.ad-slot-home {
  width: min(100%, 360px);
  color: rgba(255, 255, 255, 0.62);
  background: rgba(12, 7, 26, 0.42);
  border-color: rgba(255, 238, 151, 0.26);
}

.ad-slot-panel,
.ad-slot-result {
  color: #8d80a2;
  background: rgba(94, 72, 132, 0.08);
  border-color: rgba(94, 72, 132, 0.25);
}

.ad-slot-result {
  margin-top: 2.6cqw;
}

.ad-rail {
  display: none;
  position: fixed;
  top: 50%;
  right: 1.2vw;
  z-index: 25;
  width: 160px;
  min-height: 600px;
  transform: translateY(-50%);
  background: rgba(12, 7, 26, 0.36);
}

.ad-slot.is-filled {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ad-slot.is-filled .ad-slot-tag,
.ad-slot.is-filled .ad-slot-hint {
  display: none;
}

.ad-slot .adsbygoogle {
  display: block;
  width: 100%;
}

@media (min-width: 1700px) {
  .ad-rail {
    display: flex;
  }
}

@media (max-width: 899px) {
  .ad-slot-horizontal {
    min-height: 50px;
    margin-top: 1.8cqw;
  }
}

@media (min-width: 900px) {
  .start-inner {
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "art logo"
      "art play"
      "art links"
      "art bank"
      "ad ad";
  }

  .ad-slot-home {
    grid-area: ad;
    justify-self: center;
  }
}

@media (min-width: 900px) {
  .start-links a {
    padding: 0.3cqw 0.4cqw;
    font-size: 1.15cqw;
  }

  .start-links span {
    height: 1.25cqw;
  }
}

@media (max-width: 899px) {
  .dock {
    flex-direction: column;
    align-items: center;
    gap: 1.5cqw;
  }

  .dock-controls {
    justify-content: center;
  }

  .ad-slot-dock {
    display: flex;
    order: -1;
    width: min(86cqw, 320px);
    min-height: 50px;
    margin-bottom: 0;
  }
}

/* The in-game dock ad is only shown when the desktop stage has enough
   spare width/height. On phones, tablets and zoomed-in desktop windows it
   is hidden so it can never cover the parking lot or controls. */
@media (max-width: 1399px) {
  .ad-slot-dock {
    display: none !important;
  }
}

@media (min-width: 900px) and (max-width: 1399px) {
  .dock {
    justify-content: center;
  }
}

@media (min-width: 1400px) and (min-height: 850px) {
  .ad-slot-dock {
    display: flex !important;
  }
}

/* Desktop/tablet: the bottom ad lives below the stage, never over cars. */
@media (min-width: 900px) {
  .phone-shell {
    width: min(99vw, calc(130dvh - 101px), 1600px);
  }

  .ad-slot-dock {
    display: flex !important;
    order: initial;
    margin: 0 auto;
  }

  .dock {
    justify-content: center;
  }
}

@media (max-width: 899px) {
  .ad-slot-dock {
    display: none !important;
  }
}

/* Portrait tablets: keep the ad outside the stage and reserve its height. */
@media (min-width: 700px) and (max-width: 899px) {
  .phone-shell {
    width: min(100vw, calc((100dvh - 64px) * 0.46154));
  }

  .ad-slot-dock {
    display: flex !important;
    order: initial;
    margin: 0 auto;
  }
}

@media (max-width: 699px) {
  .ad-slot-dock {
    display: none !important;
  }
}

/* If the browser reports a desktop game but CSS media queries disagree
   (zoom / embedded browsers), keep the desktop UI at desktop proportions. */
html.is-desktop .booster {
  width: 7.6cqw;
  height: 7.6cqw;
  max-width: 110px;
  max-height: 110px;
}

html.is-desktop .booster-art {
  width: 4.65cqw;
  height: 4.65cqw;
}

html.is-desktop .booster-label {
  font-size: 1.05cqw;
}

html.is-desktop .pause-btn {
  width: 4.4cqw;
  height: 4.4cqw;
  max-width: 68px;
  max-height: 68px;
}

html.is-desktop .pause-btn svg {
  width: 2.2cqw;
  height: 2.2cqw;
}

html.is-desktop .start-screen {
  align-items: center;
  justify-content: center;
}

html.is-desktop .start-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
    "art logo"
    "art play"
    "art links"
    "art bank"
    "ad ad";
  align-content: center;
  justify-items: center;
  gap: 1.2cqw 3cqw;
  width: 100%;
  max-width: 1000px;
  min-height: 0;
  margin: auto;
  padding: 3cqw 6cqw;
}

html.is-desktop .start-art {
  grid-area: art;
  align-self: center;
  width: 38cqw;
  max-width: 640px;
  max-height: none;
  margin: 0;
}

html.is-desktop .start-logo {
  grid-area: logo;
  align-self: end;
}

html.is-desktop .start-logo-main {
  font-size: min(6.3cqw, 110px);
}

html.is-desktop .start-logo-small {
  font-size: 1.1cqw;
}

html.is-desktop .start-screen #btn-play {
  grid-area: play;
  width: 28cqw;
  max-width: 560px;
  height: 5.2cqw;
  max-height: 110px;
  font-size: 1.8cqw;
}

html.is-desktop .start-links {
  grid-area: links;
}

html.is-desktop .start-links button,
html.is-desktop .start-links a {
  font-size: 1.15cqw;
}

html.is-desktop .start-bank {
  grid-area: bank;
}

html.is-desktop .ad-slot-home {
  grid-area: ad;
  justify-self: center;
}

html.is-mobile .booster {
  max-width: 110px;
  max-height: 110px;
}

html.is-mobile .pause-btn {
  max-width: 68px;
  max-height: 68px;
}

html.is-mobile .start-logo-main {
  font-size: min(14.6cqw, 96px);
}

html.is-mobile .btn-play {
  max-width: 420px;
  max-height: 96px;
}

html.is-mobile .start-art {
  max-width: 420px;
}

/* Bottom bar: four controls on the left, ad on the right. */
.bottom-bar {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin: 0 auto;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.bottom-bar .dock {
  position: static;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  gap: 0;
  pointer-events: none;
}

.bottom-bar .dock-controls {
  justify-content: flex-start;
  gap: clamp(10px, 1.4vw, 22px);
}

.bottom-bar .booster {
  width: clamp(60px, 7vw, 92px);
  height: clamp(60px, 7vw, 92px);
  max-width: none;
  max-height: none;
  gap: 2px;
  border-width: 2px;
  border-radius: 18px;
}

.bottom-bar .booster-art {
  width: clamp(36px, 4.3vw, 56px);
  height: clamp(36px, 4.3vw, 56px);
}

.bottom-bar .booster-label {
  font-size: 12px;
}

.bottom-bar .booster-badge {
  top: -3px;
  right: -3px;
  min-width: 26px;
  height: 26px;
  font-size: 13px;
}

.bottom-bar .pause-btn {
  width: clamp(48px, 5vw, 64px);
  height: clamp(48px, 5vw, 64px);
  max-width: none;
  max-height: none;
}

.bottom-bar .ad-slot-dock {
  display: none;
  flex: 0 0 auto;
  width: min(90vw, 320px);
  min-height: 50px;
  margin: 0;
}

body:not(.game-playing) .bottom-bar {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 900px) {
  .phone-shell {
    width: min(99vw, calc(130dvh - 200px), 1600px);
  }

  .bottom-bar {
    width: min(99vw, calc(130dvh - 200px), 1600px);
  }

  .bottom-bar .ad-slot-dock {
    display: flex;
  }
}

@media (min-width: 700px) and (max-width: 899px) {
  .phone-shell {
    width: min(100vw, calc((100dvh - 120px) * 0.46154));
  }

  .bottom-bar {
    width: 100vw;
    padding: 0 14px;
  }

  .bottom-bar .ad-slot-dock {
    display: flex;
  }
}

@media (max-width: 699px) {
  .phone-shell {
    width: min(100vw, calc((100dvh - 110px) * 0.46154));
  }

  .bottom-bar {
    width: 100vw;
    padding: 0 10px;
  }

  .bottom-bar .dock {
    width: 100%;
  }

  .bottom-bar .dock-controls {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 900px) {
  .bottom-bar .ad-slot-dock {
    display: flex !important;
  }
}

@media (min-width: 700px) and (max-width: 899px) {
  .bottom-bar .ad-slot-dock {
    display: flex !important;
  }
}

/* Integrated bottom deck: controls left, ad right. */
.bottom-bar {
  box-sizing: border-box;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(42, 31, 70, 0.96), rgba(19, 12, 35, 0.98));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.bottom-bar .booster {
  width: clamp(56px, 6vw, 82px);
  height: clamp(56px, 6vw, 82px);
  border-radius: 16px;
}

.bottom-bar .booster-art {
  width: clamp(33px, 3.8vw, 48px);
  height: clamp(33px, 3.8vw, 48px);
}

.bottom-bar .booster-label {
  font-size: 11px;
}

.bottom-bar .booster-badge {
  min-width: 24px;
  height: 24px;
  font-size: 12px;
}

.bottom-bar .pause-btn {
  width: clamp(46px, 4.8vw, 60px);
  height: clamp(46px, 4.8vw, 60px);
}

/* Compact pause sheet for desktop, tablet and phone. */
.pause-sheet {
  width: min(84cqw, 440px) !important;
  max-height: 86cqh;
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: clamp(18px, 2vw, 26px);
}

.pause-sheet h2 {
  font-size: clamp(30px, 3.2vw, 44px);
}

.pause-sheet .sheet-sub {
  margin: 8px 0 18px;
  font-size: clamp(13px, 1.4vw, 16px);
}

.pause-actions {
  gap: 10px;
  margin-bottom: 14px;
}

.pause-actions .btn-play,
.pause-actions .btn-soft {
  width: 100%;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  font-size: 15px;
  border-radius: 14px;
}

.pause-settings {
  padding-top: 12px;
}

.pause-sheet .sound-toggle {
  padding: 8px 14px;
  font-size: 13px;
}

.pause-sheet .ad-slot-pause {
  min-height: 50px;
  margin-top: 12px;
}

/* Smaller bottom controls. */
.bottom-bar {
  padding: 7px 12px;
}

.bottom-bar .booster {
  width: clamp(46px, 4.8vw, 64px);
  height: clamp(46px, 4.8vw, 64px);
  border-radius: 13px;
}

.bottom-bar .booster-art {
  width: clamp(27px, 2.9vw, 38px);
  height: clamp(27px, 2.9vw, 38px);
}

.bottom-bar .booster-label {
  font-size: 10px;
}

.bottom-bar .booster-badge {
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  font-size: 10px;
  border-width: 2px;
}

.bottom-bar .pause-btn {
  width: clamp(40px, 4vw, 52px);
  height: clamp(40px, 4vw, 52px);
}

.bottom-bar .pause-btn svg {
  width: clamp(18px, 1.9vw, 25px);
  height: clamp(18px, 1.9vw, 25px);
}

/* cqw units resolve to the viewport outside .stage, so pin the bottom
   controls to pixel clamps instead. */
html.is-desktop .bottom-bar .booster,
html.is-mobile .bottom-bar .booster {
  width: clamp(46px, 4.8vw, 64px) !important;
  height: clamp(46px, 4.8vw, 64px) !important;
  max-width: 64px !important;
  max-height: 64px !important;
}

html.is-desktop .bottom-bar .booster-art,
html.is-mobile .bottom-bar .booster-art {
  width: clamp(27px, 2.9vw, 38px) !important;
  height: clamp(27px, 2.9vw, 38px) !important;
}

html.is-desktop .bottom-bar .pause-btn,
html.is-mobile .bottom-bar .pause-btn {
  width: clamp(40px, 4vw, 52px) !important;
  height: clamp(40px, 4vw, 52px) !important;
  max-width: 52px !important;
  max-height: 52px !important;
}

html.is-desktop .bottom-bar .pause-btn svg,
html.is-mobile .bottom-bar .pause-btn svg {
  width: clamp(18px, 1.9vw, 25px) !important;
  height: clamp(18px, 1.9vw, 25px) !important;
}

html.is-desktop .bottom-bar .booster-badge,
html.is-mobile .bottom-bar .booster-badge {
  top: -2px !important;
  right: -2px !important;
  min-width: 20px !important;
  height: 20px !important;
  font-size: 10px !important;
  border-width: 2px !important;
}

/* Final compact pause sizing: scales with the stage, never oversized. */
.pause-sheet {
  width: clamp(300px, 60cqw, 420px) !important;
  max-height: 74cqh;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  overflow-y: auto;
}

.pause-sheet h2 {
  font-size: clamp(28px, 2.8vw, 36px) !important;
}

.pause-sheet .sheet-sub {
  margin: 6px 0 14px !important;
  font-size: 13px !important;
}

.pause-actions {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.pause-actions .btn-play,
.pause-actions .btn-soft {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
}

.pause-settings {
  padding-top: 10px !important;
}

.pause-sheet .sound-toggle {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

.pause-sheet .ad-slot-pause {
  display: none !important;
}

#ad-slot-pause {
  display: none !important;
}

/* Pause dialog: remove filler, move sound up, ad at the bottom. */
.pause-sheet .sheet-sub {
  display: none !important;
}

.pause-actions {
  margin-bottom: 8px !important;
}

.pause-settings {
  padding-top: 0 !important;
  border-top: 0 !important;
  margin-bottom: 0 !important;
}

.pause-sheet .sound-toggle {
  margin-top: 0 !important;
}

#ad-slot-pause {
  display: flex !important;
  width: 100% !important;
  max-width: 320px;
  min-height: 50px;
  margin: 10px auto 0 !important;
}

/* Wide desktop stage (Water Sort-like proportions). */
@media (min-width: 900px) {
  .phone-shell {
    width: min(96vw, calc(160dvh - 208px), 1600px);
    aspect-ratio: 16 / 10;
  }

  .bottom-bar {
    width: min(96vw, calc(160dvh - 208px), 1600px);
  }
}

@media (min-width: 900px) {
  .phone-shell {
    width: min(96vw, calc(177.78dvh - 231px), 1600px);
    aspect-ratio: 16 / 9;
  }

  .bottom-bar {
    width: min(96vw, calc(177.78dvh - 231px), 1600px);
  }
}

@media (max-width: 1999px) {
  .ad-rail {
    display: none !important;
  }
}

/* Pause dialog: no PAUSED label, tighter rhythm, ad fully visible. */
.pause-sheet {
  max-height: 84cqh !important;
  padding: 12px 14px !important;
}

.pause-sheet h2 {
  margin: 2px 0 10px !important;
  font-size: clamp(26px, 2.6vw, 34px) !important;
}

.pause-actions {
  gap: 6px !important;
  margin-bottom: 6px !important;
}

.pause-actions .btn-play,
.pause-actions .btn-soft {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  font-size: 13px !important;
  border-radius: 11px !important;
}

.pause-settings {
  padding-top: 4px !important;
}

.pause-sheet .sound-toggle {
  padding: 4px 10px !important;
  font-size: 11px !important;
}

#ad-slot-pause {
  flex-shrink: 0;
  min-height: 50px;
  margin: 6px auto 0 !important;
}

#ad-slot-result {
  width: min(100%, 360px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.unlock-all-btn {
  width: 100%;
  margin-top: 1.2cqw;
  padding: 1.05cqw 1.4cqw;
  border: 0.2cqw solid #d8c9ee;
  border-radius: 1.4cqw;
  background: linear-gradient(160deg, #fffdf6, #e8ddff);
  color: #5c4783;
  font: 900 clamp(12px, 1.45cqw, 19px) "Nunito", "Microsoft YaHei", sans-serif;
  box-shadow: 0 0.4cqw 0 #cdbde5, inset 0 0.18cqw 0 #fff;
  cursor: pointer;
}

.unlock-all-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0.2cqw 0 #cdbde5, inset 0 0.18cqw 0 #fff;
}

.booster-badge.ad {
  font-size: 1.75cqw;
  letter-spacing: 0.01em;
}

.bottom-bar .booster-badge.ad {
  font-size: 10px;
  letter-spacing: 0;
}

/* Language picker */
.pause-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lang-toggle {
  cursor: pointer;
}

.language-sheet {
  width: min(92cqw, 620px);
}

.language-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2cqw;
  margin-top: 1.4cqw;
}

.language-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  padding: 1.2cqw 1.4cqw;
  border: 0.22cqw solid #ded4ef;
  border-radius: 1.2cqw;
  background: linear-gradient(160deg, #fffdf7, #ece4ff);
  color: #443365;
  font: 800 clamp(12px, 1.55cqw, 19px) "Nunito", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  box-shadow: 0 0.35cqw 0 #cfc2e8, inset 0 0.16cqw 0 #fff;
}

.language-option .lang-short {
  display: inline-grid;
  place-items: center;
  min-width: 2.4em;
  padding: 0.3em 0.5em;
  border-radius: 999px;
  background: rgba(122, 92, 224, .13);
  color: #6d54a5;
  font-size: .78em;
}

.language-option.is-active {
  border-color: #f0b62e;
  background: linear-gradient(160deg, #fff8dc, #ffe6a3);
  box-shadow: 0 0.35cqw 0 #cf9b1d, inset 0 0.16cqw 0 #fff;
}

.language-option.is-active .lang-short {
  background: #f0b62e;
  color: #4b3300;
}

@media (max-width: 699px) {
  .language-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.start-links {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6cqw;
  row-gap: 1.2cqw;
}

.language-list {
  max-height: 58cqh;
  overflow-y: auto;
  padding-right: 0.4cqw;
}

#btn-language-start::before {
  content: "🌐 ";
}

/* SEO content footer */
.site-footer {
  width: min(96vw, 1600px);
  margin: 18px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 22px;
  padding: 14px 8px 26px;
  color: #a99cc4;
  font-size: 12px;
  font-weight: 700;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.site-footer a {
  color: #cfc4e5;
  text-decoration: none;
}

.site-footer a:hover {
  color: #ffd35e;
}

/* Keep the board colours stable when the waiting-bay countdown is active. */
.stage.danger::after {
  display: none !important;
  animation: none !important;
  box-shadow: none !important;
}

/* Large desktop: let the game occupy the page instead of leaving a wide blank side. */
@media (min-width: 900px) {
  .phone-shell,
  .bottom-bar {
    width: min(96vw, calc(177.78dvh - 300px), 2400px);
  }
}

@media (min-width: 900px) {
  .site-shell {
    width: min(2600px, 100%);
    gap: 0;
    justify-content: center;
  }

  .hero-panel {
    display: none;
  }

  .game-column {
    width: 100%;
  }
}

.start-close {
  position: absolute;
  top: clamp(10px, 1.6cqw, 22px);
  right: clamp(10px, 1.6cqw, 22px);
  z-index: 40;
  width: clamp(32px, 3.2cqw, 48px);
  height: clamp(32px, 3.2cqw, 48px);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 245, .86);
  color: #4c3e68;
  font-size: clamp(22px, 2.4cqw, 34px);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(65, 47, 100, .2);
}

.start-close:hover { background: #fff; }

.home-reopen {
  position: absolute;
  left: 50%;
  bottom: 9%;
  z-index: 30;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(160deg, #ffe071, #f0b62e);
  color: #3b2a08;
  box-shadow: 0 5px 0 #ad7810, 0 14px 28px rgba(20, 10, 40, .3);
  font: 900 clamp(14px, 1.5cqw, 20px) "Nunito", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  transform: translateX(-50%);
}

body.home-closed .home-reopen { display: flex; }

.lang-suggest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 1.5cqw;
  padding: 0.85cqw 1.4cqw;
  border: 1px solid rgba(255, 235, 190, .32);
  border-radius: 999px;
  color: #e9ddff;
  background: rgba(38, 25, 68, .55);
  font: 800 clamp(11px, 1.25cqw, 16px) "Nunito", "Microsoft YaHei", sans-serif;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.lang-suggest[hidden] { display: none; }

.lang-suggest:hover {
  color: #fff;
  border-color: rgba(255, 224, 142, .7);
  background: rgba(64, 43, 104, .72);
}

.lang-suggest-globe { font-size: 1.15em; }
.lang-suggest-arrow { opacity: .85; }

/* Website chrome: header, content and footer around the game. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(18, 13, 34, .9);
  backdrop-filter: blur(14px);
}

.header-inner {
  width: min(2600px, 100%);
  min-height: 64px;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.4vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff8e9;
  text-decoration: none;
  font: 900 21px/1 "Nunito", "Microsoft YaHei", sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
}

.header-bus {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #36250a;
  background: #ffd35e;
  font-size: 9px;
  letter-spacing: .02em;
}

.header-loop { color: #ffd35e; }

.header-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: clamp(10px, 1.8vw, 28px);
  font: 800 14px/1 "Nunito", "Microsoft YaHei", sans-serif;
}

.header-nav a {
  color: #d8cdeb;
  text-decoration: none;
  padding: 10px 2px;
}

.header-nav a:hover { color: #ffd35e; }

.header-actions { display: flex; align-items: center; }

.header-language {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #eee6ff;
  background: rgba(255,255,255,.06);
  font: 800 13px/1 "Nunito", "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.header-language:hover { border-color: rgba(255,211,94,.65); color: #ffd35e; }

.site-shell {
  min-height: calc(100dvh - 64px);
}

.home-info {
  width: min(1600px, calc(100% - 32px));
  margin: 36px auto 0;
  padding: clamp(26px, 3.5vw, 54px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,211,94,.12), transparent 30rem),
    rgba(27, 21, 48, .9);
  color: #f7f1ff;
}

.home-kicker {
  color: #ffd35e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
}

.home-info-head h2,
.home-info-head h1 {
  margin: 8px 0 10px;
  max-width: 900px;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.14;
}

.home-info-head p {
  max-width: 800px;
  margin: 0;
  color: #c9bde0;
  font-size: clamp(15px, 1.5vw, 18px);
}

.home-guides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.home-guide-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  color: inherit;
  background: rgba(255,255,255,.055);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.home-guide-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,211,94,.5);
  background: rgba(255,255,255,.09);
}

.home-guide-card small { color: #9f8ec3; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.home-guide-card strong { color: #fff7e7; font-size: 19px; }
.home-guide-card span { color: #c8bcdf; font-size: 14px; line-height: 1.6; }

.home-lower {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 28px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.home-lower h2 { margin: 0 0 12px; font-size: 20px; }
.home-faq details { border-bottom: 1px solid rgba(255,255,255,.1); padding: 10px 0; }
.home-faq summary { cursor: pointer; color: #f0e8ff; font-weight: 800; }
.home-faq p { margin: 8px 0 2px; color: #c3b6dc; font-size: 14px; }
.home-side-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.home-side-links a { color: #d7c8f4; font-weight: 700; text-decoration: none; }
.home-side-links a:hover { color: #ffd35e; }

.site-footer {
  display: block;
  width: min(2600px, calc(100% - 32px));
  margin: 28px auto 0;
  padding: 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  padding: 24px 8px 36px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.footer-brand strong { color: #fff8e9; font-size: 18px; }
.footer-brand strong span { color: #ffd35e; }
.footer-brand p { margin: 4px 0 0; color: #9f92b8; font-size: 12px; }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-inner nav a { color: #cfc3e4; text-decoration: none; font-size: 13px; font-weight: 700; }
.footer-inner nav a:hover { color: #ffd35e; }
.footer-copy { color: #8f83a8; font-size: 12px; }

@media (max-width: 1000px) {
  .header-inner { min-height: 58px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .header-nav { order: 3; flex: 1 0 100%; justify-content: flex-start; overflow-x: auto; }
  .home-guides { grid-template-columns: 1fr; }
  .home-lower { grid-template-columns: 1fr; gap: 20px; }
  .site-shell { min-height: calc(100dvh - 58px); }
}

@media (max-width: 520px) {
  .header-brand { font-size: 18px; }
  .header-bus { width: 26px; height: 26px; font-size: 8px; }
  .header-language { padding: 8px 10px; font-size: 12px; }
  .header-language span:last-child { display: none; }
  .home-info { width: calc(100% - 20px); padding: 22px 16px; border-radius: 20px; }
}


@media (max-width: 899px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .site-shell {
    min-height: calc(100dvh - 58px);
  }
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-lang-prompt {
  display: flex;
  justify-content: center;
  padding: 10px 16px 0;
}

.site-lang-prompt[hidden] { display: none; }

.site-lang-prompt .lang-suggest { margin-top: 0; }

.header-logo-img {
  width: clamp(36px, 2.5vw, 46px);
  height: clamp(36px, 2.5vw, 46px);
  flex: none;
  border-radius: 11px;
  box-shadow: 0 4px 10px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.16);
  display: block;
}

@media (max-width: 520px) {
  .header-logo-img { width: 34px; height: 34px; border-radius: 9px; }
}

/* Keep the full game window and its bottom controls inside the first view. */
@media (min-width: 900px) {
  .phone-shell,
  .bottom-bar {
    width: min(96vw, calc(177.78dvh - 430px), 2200px);
  }

  .site-shell {
    min-height: 0;
    align-items: flex-start;
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* The header is part of the page flow so it can never cover the game window. */
.site-header {
  position: relative;
  top: auto;
}

html,
body {
  overflow-x: clip;
}

#play {
  scroll-margin-top: 14px;
}

html.is-desktop .start-inner,
.start-inner {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.start-screen {
  overflow: hidden;
}

html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Larger game stage and calmer HUD. */
@media (min-width: 900px) {
  .phone-shell,
  .bottom-bar {
    width: min(96vw, calc(177.78dvh - 380px), 2200px);
  }

  html.is-desktop .hud {
    top: 1.8cqw;
  }

  html.is-desktop .hud-coin,
  html.is-desktop .hud-level,
  html.is-desktop .hud-goal {
    height: 4.9cqw;
    border-width: 0.2cqw;
  }

  html.is-desktop .hud-coin {
    min-width: 14cqw;
    gap: 0.8cqw;
    padding: 0 1.6cqw 0 0.8cqw;
    font-size: 2.35cqw;
  }

  html.is-desktop .coin-icon {
    width: 3.3cqw;
    height: 3.3cqw;
    font-size: 1.55cqw;
    border-width: 0.2cqw;
  }

  html.is-desktop .hud-level {
    min-width: 12.5cqw;
    padding: 0 1.6cqw;
    border-radius: 1.5cqw;
  }

  html.is-desktop .hud-level-kicker {
    font-size: 1.05cqw;
  }

  html.is-desktop .hud-level > span:last-child {
    font-size: 2.65cqw;
  }

  html.is-desktop .hud-goal {
    min-width: 13.5cqw;
    gap: 0.55cqw;
    padding: 0 1.6cqw;
    font-size: 2.1cqw;
  }

  html.is-desktop .goal-star {
    font-size: 2.6cqw;
  }
}

/* Keep the start window compact enough to avoid an inner scrollbar. */
@media (min-width: 900px) {
  html.is-desktop .start-inner {
    max-width: 1240px;
    padding: 2.2cqw 4.5cqw;
    gap: 0.9cqw 2.4cqw;
    overflow: hidden;
  }

  html.is-desktop .start-art {
    width: 33cqw;
    max-width: 520px;
  }

  html.is-desktop .start-logo-main {
    font-size: min(5.4cqw, 84px);
  }

  html.is-desktop .start-logo-small {
    font-size: 0.95cqw;
  }

  html.is-desktop .start-logo p {
    font-size: 1.02cqw;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  html.is-desktop .start-screen #btn-play {
    width: 25cqw;
    height: 4.4cqw;
    font-size: 1.55cqw;
  }

  html.is-desktop .start-links button,
  html.is-desktop .start-links a {
    font-size: 1cqw;
  }

  html.is-desktop .start-bank {
    font-size: 1cqw;
  }
}

/* Blend the home content into the page instead of a floating rounded card. */
.home-info {
  width: 100%;
  max-width: none;
  margin: 34px 0 0;
  padding: 44px max(16px, calc((100% - 1600px) / 2));
  border: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(20,14,38,.18), rgba(17,12,32,.5));
}

.home-info-inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* Keep HUD text readable but not oversized on very wide stages. */
html.is-desktop .hud-coin,
html.is-desktop .hud-level,
html.is-desktop .hud-goal {
  height: clamp(42px, 4.9cqw, 64px);
}

html.is-desktop .hud-coin {
  min-width: clamp(124px, 14cqw, 210px);
  padding: 0 clamp(12px, 1.6cqw, 22px) 0 clamp(7px, 0.8cqw, 12px);
  font-size: clamp(18px, 2.35cqw, 30px);
}

html.is-desktop .coin-icon {
  width: clamp(25px, 3.3cqw, 40px);
  height: clamp(25px, 3.3cqw, 40px);
  font-size: clamp(11px, 1.55cqw, 18px);
}

html.is-desktop .hud-level {
  min-width: clamp(105px, 12.5cqw, 180px);
  padding: 0 clamp(10px, 1.6cqw, 22px);
}

html.is-desktop .hud-level-kicker {
  font-size: clamp(8px, 1.05cqw, 13px);
}

html.is-desktop .hud-level > span:last-child {
  font-size: clamp(22px, 2.65cqw, 34px);
}

html.is-desktop .hud-goal {
  min-width: clamp(112px, 13.5cqw, 200px);
  gap: clamp(4px, 0.55cqw, 8px);
  padding: 0 clamp(10px, 1.6cqw, 22px);
  font-size: clamp(17px, 2.1cqw, 27px);
}

html.is-desktop .goal-star {
  font-size: clamp(21px, 2.6cqw, 34px);
}

html.is-desktop .start-logo p {
  font-size: clamp(11px, 1.02cqw, 16px);
}

html.is-desktop .start-screen #btn-play {
  width: clamp(260px, 25cqw, 420px);
  height: clamp(48px, 4.4cqw, 72px);
  font-size: clamp(14px, 1.55cqw, 20px);
}

html.is-desktop .start-links button,
html.is-desktop .start-links a,
html.is-desktop .start-bank {
  font-size: clamp(11px, 1cqw, 15px);
}

/* Wide 2:1 game board: more room for the loop and parking lot. */
@media (min-width: 900px) {
  .phone-shell,
  .bottom-bar {
    width: min(96vw, calc(200dvh - 400px), 2300px);
  }

  .phone-shell {
    aspect-ratio: 2 / 1;
  }
}

.header-actions {
  gap: 8px;
}

.site-lang-prompt {
  padding: 0;
}

.site-lang-prompt .lang-suggest {
  margin: 0;
  padding: 8px 12px;
  font-size: clamp(10px, 0.72vw, 13px);
  border-color: rgba(255, 211, 94, .35);
  background: rgba(255, 211, 94, .08);
}

.site-lang-prompt .lang-suggest-globe {
  font-size: 1em;
}

@media (max-width: 1000px) {
  .site-lang-prompt .lang-suggest span:not(.lang-suggest-globe):not(.lang-suggest-arrow) {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Left-align the main menu and keep the language hint in the free header space. */
@media (min-width: 1001px) {
  .site-header .header-inner {
    justify-content: flex-start;
  }

  .site-header .header-nav {
    flex: 0 1 auto;
    justify-content: flex-start;
    gap: clamp(12px, 1.8vw, 26px);
  }

  .site-header .header-actions {
    margin-left: auto;
  }
}

/* Mobile portrait: use nearly the full screen width instead of a narrow phone card. */
@media (max-width: 899px) and (orientation: portrait) {
  .site-shell {
    display: block;
    width: 100%;
    padding: 0;
  }

  .game-column {
    width: 100%;
  }

  .phone-shell {
    width: min(96vw, 760px);
    max-width: 96vw;
    aspect-ratio: 540 / 1170;
  }

  .bottom-bar {
    width: 100vw;
    padding: 0 10px;
  }
}

/* Compact mobile header so the larger board is visible sooner. */
@media (max-width: 899px) {
  .header-inner {
    min-height: 0;
    gap: 6px;
    padding: 6px 10px;
  }

  .header-brand {
    font-size: 18px;
  }

  .header-logo-img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .header-nav {
    gap: 14px;
    padding: 2px 0;
    font-size: 12px;
  }

  .header-nav a {
    padding: 5px 0;
  }

  .header-language {
    padding: 7px 9px;
    font-size: 12px;
  }

  .site-lang-prompt .lang-suggest {
    padding: 6px 9px;
    font-size: 10px;
  }
}