:root {
  color-scheme: light;
  font-family: Nunito, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #102846;
  background: #62c8f4;
  --red: #eb382f;
  --red-dark: #b82520;
  --blue: #176eb7;
  --green: #2d9855;
  --gold: #ffbf2f;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; margin: 0; }
body {
  min-width: 320px;
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
  background: #5bc5f3 url("./assets/mario-hero-v2.webp") center 50% / cover no-repeat;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.22) 58%, rgba(12,102,151,.2));
}
button { font: inherit; }

.route-shell {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 32px));
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  gap: 20px;
  margin-inline: auto;
  padding: clamp(18px, 4vw, 42px) 0;
}

.route-brand {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 9px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 17px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 34px rgba(20,71,105,.16), inset 0 1px #fff;
  backdrop-filter: blur(12px);
}
.route-brand img { width: 48px; height: 48px; object-fit: cover; border-radius:50%; box-shadow:0 4px 12px rgba(31,103,153,.22); }
.route-brand strong { font-size: 22px; letter-spacing: -.7px; }
.route-brand strong span { color: var(--red); }
.route-brand small { display: block; margin-top: 1px; color: #53718a; font-size: 9px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }

.route-card {
  position: relative;
  width: min(670px, 100%);
  overflow: hidden;
  padding: clamp(24px, 4.2vw, 44px);
  border: 2px solid rgba(255,255,255,.96);
  border-radius: 30px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 30px 80px rgba(17,70,103,.25), inset 0 1px #fff;
  backdrop-filter: blur(14px) saturate(1.08);
}
.route-card::before {
  content: attr(data-stage);
  position: absolute;
  right: -8px;
  top: -32px;
  color: rgba(26,107,170,.07);
  font: 900 clamp(126px, 20vw, 240px) / 1 system-ui, sans-serif;
  letter-spacing: -14px;
  pointer-events: none;
}
.stage-label { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; }
.stage-label::before { content: ""; width: 27px; height: 3px; border-radius: 3px; background: var(--red); }
h1 { position: relative; max-width: 570px; margin: 0; font-size: clamp(35px, 6vw, 60px); line-height: .98; letter-spacing: -2.2px; text-wrap: balance; }
h1 em { color: var(--red); font-style: normal; }
.route-copy { position: relative; max-width: 550px; margin: 16px 0 0; color: #45627b; font-size: 14px; font-weight: 700; line-height: 1.65; }

.route-game {
  position: relative;
  container-type: inline-size;
  height: 168px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.8);
  background: #5c94fc;
  box-shadow: inset 0 1px rgba(255,255,255,.9);
  image-rendering: pixelated;
}
.route-game::before { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.24),inset 0 18px 34px rgba(255,255,255,.1); }
.game-scroll { position:absolute; z-index:3; inset:0 auto 0 0; height:100%; display:flex; will-change:transform; }
.game-world { position:relative; flex:0 0 var(--mario-segment-width,100cqw); width:var(--mario-segment-width,100cqw); height:100%; overflow:hidden; }
.game-ground { position:absolute; z-index:2; inset:auto 0 0; width:100%; height:32px; background:url("./assets/route-ground.png") 0 0/32px 32px repeat; image-rendering:pixelated; will-change:background-position; }


.world-tile { position:absolute; display:block; background-image:url("./assets/route-overworld.png"); background-size:256px 256px; background-repeat:no-repeat; image-rendering:pixelated; }
.world-cloud { z-index:1; top:10px; width:60px; height:44px; background-image:url("./assets/route-cloud.png?v=20261026-1"); background-size:60px 44px; background-repeat:no-repeat; opacity:.86; }
.world-cloud-left { left:6%; }
.world-cloud-right { right:6%; }
.world-hill { bottom:32px; opacity:.92; background-repeat:no-repeat; background-size:100% 100%; }
.world-hill-large { left:2%; width:160px; height:70px; background-image:url("./assets/route-hill-large.png?v=20261026-1"); }
.world-hill-small { left:9%; width:96px; height:48px; background-image:url("./assets/route-hill-small.png?v=20261026-1"); }
.world-coin { z-index:2; width:32px; height:32px; background-image:url("./assets/route-items.png?v=20261026-1"); background-size:160px 96px; background-repeat:no-repeat; background-position:0 -32px; animation:coin-spin .64s steps(1,end) infinite; }
.world-coin.is-collected { animation:coin-collect .18s ease-out forwards; }.world-coin-one { left:14%; top:72px; }
.world-coin-two { left:27%; top:72px; }
.world-coin-three { left:40%; top:72px; }
.world-coin-four { left:53%; top:72px; }
.world-coin-five { left:66%; top:72px; }
.world-coin-far { left:74%; top:72px; }
.world-brick { z-index:4; left:56%; top:36px; width:32px; height:32px; background-position:-96px 0; }
.world-question { z-index:4; left:calc(56% + 40px); top:36px; width:32px; height:32px; background-position:-128px 0; }
.world-variant-pipe-blocks .world-brick { left:31%; }
.world-variant-pipe-blocks .world-question { left:calc(31% + 40px); }
.world-variant-question-run .world-brick { left:64%; }
.world-variant-question-run .world-question { left:calc(64% + 40px); }
.world-pipe { z-index:4; left:72%; bottom:32px; width:64px; height:64px; background-image:url("./assets/route-pipe.png?v=20261026-1"); background-size:64px 64px; background-repeat:no-repeat; }
.world-variant-pipe-blocks .world-pipe { left:79%; }
.route-player { position:absolute; z-index:6; left:38%; bottom:32px; width:64px; height:64px; will-change:transform; filter:drop-shadow(0 6px 3px rgba(29,68,50,.24)); }
.route-player.is-jumping { animation:player-jump var(--mario-jump-duration,2.11s) linear both; }
.route-player-sprite { position:absolute; inset:0; display:block; width:64px; height:64px; background-repeat:no-repeat; image-rendering:pixelated; }
.route-player-run { background-image:url("./assets/route-mario-run.png?v=20261026-2"); background-position:0 0; background-size:256px 64px; animation:player-run .36s steps(1,end) infinite; }
.route-player-jump { opacity:0; background-image:url("./assets/route-mario-jump.png?v=20261026-2"); background-size:64px 64px; }
.route-player.is-jumping .route-player-run { opacity:0; }
.route-player.is-jumping .route-player-jump { opacity:1; }
.enemy { position:absolute; z-index:5; left:48%; bottom:32px; display:block; width:64px; height:64px; image-rendering:pixelated; transform:translate3d(var(--goomba-walk-x,0),0,0); will-change:transform; filter:drop-shadow(0 4px 2px rgba(29,68,50,.2)); }
.world-variant-meadow .enemy { left:58%; }
.world-variant-question-run .enemy { left:43%; }
.enemy-goomba { background:url("./assets/route-goomba-run.png?v=20261026-2") 0 0/128px 64px no-repeat; animation:enemy-walk .32s steps(1,end) infinite; }

.route-state { position: relative; display: grid; grid-template-columns: minmax(0,1fr); align-items: center; margin-top: 18px; padding: 13px 14px; border: 1px solid #d2e4ee; border-radius: 14px; background: #f5fbff; }
.status { color: #173a5f; font-size: 12px; font-weight: 900; }
.progress { min-height: 20px; display: flex; align-items: flex-end; gap: 7px; margin-top: 7px; }
.progress i { width: 16px; height: 16px; flex: 0 0 16px; background: url("./assets/route-items.png?v=20261026-1") 0 -16px/80px 48px no-repeat; image-rendering: pixelated; opacity: .32; filter: drop-shadow(0 2px 0 rgba(123,75,15,.18)); animation: route-coin-progress 1.35s ease-in-out infinite; }
.progress i:nth-child(2) { animation-delay: .11s; }
.progress i:nth-child(3) { animation-delay: .22s; }
.progress i:nth-child(4) { animation-delay: .33s; }
.progress i:nth-child(5) { animation-delay: .44s; }
.progress i:nth-child(6) { animation-delay: .55s; }
.error { display: none; margin-top: 11px; padding: 11px 12px; border: 1px solid #f1b6b1; border-radius: 12px; background: #fff0ef; color: #a5322c; font-size: 12px; font-weight: 700; line-height: 1.55; }
.route-card.failed .error { display: block; }
.route-card.failed .progress { display: none; }
.route-card.failed .game-scroll,.route-card.failed .route-player,.route-card.failed .route-player i,.route-card.failed .enemy { animation-play-state:paused; }
.route-retry { min-height:40px; margin-top:12px; padding:0 17px; border:1px solid var(--red); border-radius:11px; background:var(--red); color:#fff; font-weight:900; box-shadow:0 4px 0 var(--red-dark); }
.route-retry:hover { transform:translateY(-1px); box-shadow:0 6px 0 var(--red-dark); }
.route-retry:active { transform:translateY(2px); box-shadow:0 2px 0 var(--red-dark); }

.route-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 8px; color: #143d5d; font-size: 9px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 1px rgba(255,255,255,.8); }


@keyframes coin-spin { 0%,12% { background-position:0 -32px; } 13%,24% { background-position:-32px -32px; } 25%,36% { background-position:-64px -32px; } 37%,49% { background-position:-96px -32px; } 50%,61% { background-position:0 -64px; } 62%,74% { background-position:-32px -64px; } 75%,86% { background-position:-64px -64px; } 87%,100% { background-position:-96px -64px; } }
@keyframes coin-collect { to { opacity:0; transform:translateY(-18px) scale(.35); } }
@keyframes player-run { 0%,24% { background-position:0 0; } 25%,49% { background-position:-64px 0; } 50%,74% { background-position:-128px 0; } 75%,100% { background-position:-192px 0; } }
@keyframes player-jump { 0%,100% { transform:translateY(0); } 10%,90% { transform:translateY(-34.56px); } 20%,80% { transform:translateY(-61.44px); } 30%,70% { transform:translateY(-80.64px); } 40%,60% { transform:translateY(-92.16px); } 50% { transform:translateY(-96px); } }

@keyframes enemy-walk { 0%,49% { background-position:0 0; } 50%,100% { background-position:-64px 0; } }
@keyframes route-coin-progress { 0%,30%,100% { transform:translateY(0) scale(.78); opacity:.32; } 14% { transform:translateY(-5px) scale(1); opacity:1; } }

@media (max-width: 640px) {
  body { overflow: auto; background-image: url("./assets/world-h5.webp"); background-position: center top; }
  .route-shell { width: min(100% - 20px, 480px); padding: 12px 0 18px; gap: 12px; }
  .route-brand { padding-block: 5px; border-radius: 14px; }
  .route-brand img { width: 44px; height: 44px; }
  .route-brand strong { font-size: 18px; }
  .route-card { padding: 23px 17px 20px; border-radius: 23px; }
  .route-card::before { top: -12px; font-size: 130px; }
  h1 { font-size: clamp(34px, 11.5vw, 48px); letter-spacing: -1.6px; }
  .route-copy { font-size: 12px; }
  .route-meta { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-scroll,.route-player,.route-player i,.enemy,.progress i { animation:none; }
}