@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --side-bg: #6b5966;
  --orange-1: #ff6b00;
  --orange-2: #ff9f17;
  --orange-3: #ffd458;
  --purple-1: #7f72d9;
  --purple-2: #5e54b5;
  --purple-3: #d7c8ff;
  --pixel-black: #131018;
  --pixel-white: #fff7ef;
  --panel-border: #7f568d;
  --panel-fill: rgba(255,255,255,0.92);
  --mint: #87edd6;
  --mint-dark: #58b8a2;
  --fox-main: #f97c08;
  --fox-deep: #a33e10;
  --fox-dark: #40251f;
  --fox-light: #fff3e8;
  --coin: #ff9530;
  --coin-deep: #cf5b12;
  --bw-sm: 3px;
  --bw-md: 5px;
  --bw-lg: 8px;
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;
  --font-ui-zh: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  font-family: var(--font-ui-zh);
  background: var(--side-bg);
  color: var(--pixel-black);
}

body {
  min-height: 100vh;
}

button {
  font: inherit;
}

.page-shell {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #ff8a15 0%, #ffb538 100%);
  overflow: hidden;
}

.page-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 14px);
  opacity: 0.12;
}

.game-page {
  position: relative;
  min-height: 100vh;
  padding: 0;
}

.home-screen,
.end-overlay {
  position: fixed;
  inset: 0;
  display: none;
  overflow: hidden;
}

.home-screen.is-visible,
.end-overlay.is-visible {
  display: block;
}

.end-data {
  position: absolute;
  right: 28px;
  top: 26%;
  width: min(360px, 34vw);
  display: grid;
  gap: 10px;
  z-index: 9;
}

.end-data > span {
  padding: 10px 12px;
  border: var(--bw-sm) solid var(--pixel-black);
  background: rgba(255, 246, 230, 0.92);
  color: #2a1d14;
  font-family: var(--font-ui-zh);
  font-weight: 900;
  line-height: 1.35;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.12);
}

#endGrade {
  font-size: clamp(18px, 1.5vw, 24px);
  color: #7e3a0f;
  background: linear-gradient(180deg, #fff5d9 0%, #ffe4ad 100%);
}

#endStageCount {
  font-size: clamp(15px, 1.05vw, 18px);
}

#endEvidenceCount,
#endImpression,
#endQuote {
  font-size: clamp(13px, 0.9vw, 15px);
}

.home-screen {
  z-index: 130;
  background: radial-gradient(circle at 50% 54%, rgba(255,215,98,0.96) 0%, #ffaf1d 32%, #ff7606 70%, #ff6500 100%);
}

.home-screen::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0) 30%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 18px);
  opacity: 0.35;
}

.home-breath-glow {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,247,186,0.72) 0%, rgba(255,219,97,0.48) 34%, rgba(255,145,0,0.0) 72%);
  animation: homeBreath 2.4s ease-in-out infinite;
}

.home-screen::before,
.home-screen::after,
.end-overlay::before,
.end-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.runner-stage.is-stage3-lanes .runner-world::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    linear-gradient(180deg, rgba(76, 132, 255, 0.22) 0%, rgba(76, 132, 255, 0.04) 100%),
    linear-gradient(180deg, rgba(255, 92, 92, 0.18) 0%, rgba(255, 92, 92, 0.04) 100%),
    linear-gradient(180deg, rgba(170, 104, 255, 0.2) 0%, rgba(170, 104, 255, 0.04) 100%);
  background-size: 33.333% 100%, 33.333% 100%, 33.333% 100%;
  background-position: left top, center top, right top;
  background-repeat: no-repeat;
}

.runner-world::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.05) 0 2px, rgba(255,255,255,0.01) 2px 4px),
    radial-gradient(circle at center, rgba(0,0,0,0) 66%, rgba(0,0,0,0.08) 100%);
}

.home-screen::before,
.end-overlay::before {
  background: radial-gradient(circle at center, rgba(255,255,255,0.0) 0 36%, rgba(0,0,0,0.0) 36%, rgba(0,0,0,0.07) 36.4%, rgba(0,0,0,0.0) 36.8%) center/4px 4px;
  opacity: 0.38;
}

.home-icons,
.end-icons,
.top-icons {
  position: absolute;
  top: 28px;
  left: 34px;
  display: flex;
  gap: 12px;
  z-index: 5;
}

.pixel-icon {
  width: 38px;
  height: 38px;
  border: 4px solid var(--pixel-black);
  background: rgba(255, 236, 189, 0.95);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.18);
  position: relative;
  display: inline-block;
}

.pixel-icon::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: #4fd0ba;
}

.pixel-icon[data-icon="bag"]::after { background: #ad6b31; }
.pixel-icon[data-icon="card"]::after { background: #61c89f; }
.pixel-icon[data-icon="gift"]::after { background: linear-gradient(135deg, #ffcb41 0 50%, #cc4d1a 50%); }
.pixel-icon[data-icon="lab"]::after { background: #ff9d56; clip-path: polygon(35% 0, 65% 0, 60% 40%, 80% 100%, 20% 100%, 40% 40%); }

.home-console,
.end-console,
.floating-console {
  position: absolute;
  right: 84px;
  top: 24px;
  width: 114px;
  height: 88px;
  z-index: 4;
}

.home-console::before,
.end-console::before,
.floating-console::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%);
  width: 6px;
  height: 34px;
  background: #4d3555;
}

.home-console,
.end-console {
  border-radius: 26px;
  background: #e3bf19;
  border: 6px solid var(--pixel-black);
  box-shadow: inset -8px -8px 0 rgba(0,0,0,0.1);
}

.end-console {
  background: #7750af;
}

.floating-console {
  border-radius: 26px;
  background: #7750af;
  border: 6px solid var(--pixel-black);
  box-shadow: inset -8px -8px 0 rgba(0,0,0,0.1);
}

.console-screen {
  width: 46px;
  height: 34px;
  margin: 16px auto 0;
  background: #dddfe0;
  border: 5px solid #4d4a53;
}

.home-logo-wrap {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  text-align: center;
  animation: homeFloat 2.8s ease-in-out infinite;
}

.home-logo {
  font-family: Impact, Haettenschweiler, 'Arial Black', sans-serif;
  font-style: italic;
  font-size: clamp(120px, 13vw, 220px);
  line-height: 0.88;
  color: #261111;
  letter-spacing: 2px;
  text-shadow: 6px 6px 0 #fff0b0, 12px 12px 0 rgba(255,255,255,0.35);
}

.home-subtitle {
  margin-top: 22px;
  font-size: clamp(40px, 4vw, 72px);
  font-weight: 900;
}

.home-loading {
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 180px));
  z-index: 5;
}

.home-quote-rotator {
  margin-bottom: 14px;
  text-align: center;
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 800;
  color: rgba(60, 20, 5, 0.88);
  line-height: 1.45;
  min-height: 1.6em;
  animation: quoteRotatorFade 1.8s ease-in-out infinite;
}

@keyframes quoteRotatorFade {
  0%, 100% { opacity: 0.3; }
  20%, 80% { opacity: 1; }
}

.home-loading-label {
  margin-bottom: 10px;
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 4px;
  color: rgba(46, 20, 9, 0.9);
}

.home-progress-track {
  height: 28px;
  padding: 3px;
  border: 5px solid var(--pixel-black);
  background: rgba(255, 245, 220, 0.72);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.15);
}

.home-progress-fill {
  width: 0%;
  height: 100%;
  background: repeating-linear-gradient(90deg, #ef411f 0 20px, #ffda43 20px 40px, #ef411f 40px 60px);
  transition: width 120ms linear;
}

.home-skip-btn {
  display: block;
  margin: 12px auto 0;
  padding: 6px 18px;
  border: 3px solid rgba(80, 36, 10, 0.4);
  background: rgba(255,255,255,0.18);
  color: rgba(60, 20, 5, 0.82);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.home-skip-btn:hover {
  background: rgba(255,255,255,0.38);
  color: rgba(60, 20, 5, 1);
}

.home-telephone,
.end-chat {
  position: absolute;
  left: 46px;
  bottom: 72px;
  width: 52px;
  height: 44px;
  border: 5px solid var(--pixel-black);
  background: #e84a2b;
  clip-path: polygon(0 18%, 26% 0, 100% 0, 100% 100%, 0 100%);
}

.home-tag,
.end-tag {
  position: absolute;
  right: 46px;
  bottom: 78px;
  font-size: clamp(48px, 4.8vw, 80px);
  font-weight: 900;
}

.home-line,
.end-line {
  position: absolute;
  left: 70px;
  right: 70px;
  bottom: 52px;
  height: 6px;
  background: var(--pixel-black);
}

.game-frame {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  position: relative;
  isolation: isolate;
  padding: 16px 24px 20px;
}

.game-frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: var(--bw-sm) solid rgba(255,255,255,0.25);
  pointer-events: none;
  opacity: 0.35;
  z-index: 0;
}

.hud,
.play-layout {
  position: relative;
  z-index: 1;
}

.hud {
  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) minmax(420px, 1.5fr) minmax(280px, 1.05fr);
  align-items: start;
  gap: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.game-frame.is-active .hud {
  opacity: 1;
  pointer-events: auto;
}

.game-frame.is-start .hud,
.game-frame.is-start .info-panel {
  opacity: 0;
  pointer-events: none;
}

.game-frame.is-end .hud,
.game-frame.is-end .info-panel,
.game-frame.is-end .runner-world,
.game-frame.is-end .floating-ui,
.game-frame.is-end .floating-console-img,
.game-frame.is-end .screen-rim {
  opacity: 0;
  pointer-events: none;
}

.game-frame.is-card-open .hud,
.game-frame.is-card-open .info-panel {
  opacity: 0.18;
}

.hud-group {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.hud-brand {
  flex-direction: column;
  gap: 2px;
}

.hud-center {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hud-logo {
  font-size: clamp(46px, 5.2vw, 74px);
  font-weight: 900;
  line-height: 0.95;
  font-family: var(--font-ui-zh);
  color: #ffffff;
  -webkit-text-stroke: 6px var(--pixel-black);
  text-shadow: 6px 6px 0 #df4915;
}

.hud-subtitle {
  font-size: clamp(13px, 1.2vw, 20px);
  font-weight: 900;
  letter-spacing: 2px;
  font-family: var(--font-pixel);
  color: white;
}

.hud-stats {
  justify-self: end;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.game-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-right: 0;
}

.play-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.8fr);
  grid-template-rows: 0.45fr 0.55fr;
  grid-template-areas:
    "stage mission"
    "stage info";
  gap: 16px;
  height: clamp(420px, 75vh, 800px);
  min-height: 0;
}

/* 宽屏优化 */
@media (min-aspect-ratio: 16/9) {
  .play-layout {
    height: clamp(480px, 80vh, 900px);
  }
}

/* 窄屏优化 */
@media (max-aspect-ratio: 4/3) {
  .play-layout {
    height: clamp(380px, 70vh, 700px);
  }
}

.play-layout::before,
.play-layout::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: var(--bw-sm) solid rgba(255,255,255,0.62);
  pointer-events: none;
}

.play-layout::before {
  left: -8px;
  top: -8px;
  border-right: none;
  border-bottom: none;
}

.play-layout::after {
  right: -8px;
  bottom: -8px;
  border-left: none;
  border-top: none;
}

.game-control-btn {
  min-width: auto;
  padding: 8px 14px;
  white-space: nowrap;
  flex-shrink: 0;
  border: var(--bw-md) solid var(--pixel-black);
  background: #fff4d8;
  color: #6f3111;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 900;
  font-family: var(--font-ui-zh);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.18), inset 0 -3px 0 rgba(0,0,0,0.12), inset 0 2px 0 rgba(255,255,255,0.45);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.game-control-btn:hover,
.game-control-btn:focus-visible {
  filter: brightness(1.06);
  outline: none;
}

.game-control-btn:active {
  transform: translateY(2px);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.18), inset 0 2px 0 rgba(0,0,0,0.12), inset 0 -2px 0 rgba(255,255,255,0.35);
}

.game-control-btn.is-active {
  background: #ef5c69;
  color: #fffef8;
}

.life-bar {
  display: grid;
  gap: 8px;
  padding: 2px 8px;
}

.hearts {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.heart {
  width: clamp(22px, 2.6vh, 30px);
  height: clamp(19px, 2.2vh, 26px);
  background: #df2633;
  border: 3px solid var(--pixel-black);
  clip-path: polygon(50% 100%, 0 48%, 0 20%, 18% 0, 50% 14%, 82% 0, 100% 20%, 100% 48%);
}

.energy-bar {
  width: clamp(100px, 12vw, 164px);
  height: 22px;
  border: 4px solid var(--pixel-black);
  background: #ffffff;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.16);
  position: relative;
}

.energy-bar::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: #e02d35;
}

.hud-card {
  min-width: clamp(90px, 8.5vw, 122px);
  padding: 10px 12px;
  border: var(--bw-md) solid var(--pixel-black);
  background: rgba(255,255,255,0.78);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.15);
  display: grid;
  gap: 4px;
  position: relative;
  overflow: hidden;
}

.hud-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: #ff9f17;
}

.hud-stats .hud-card:nth-of-type(1)::before { background: #ff8a15; }
.hud-stats .hud-card:nth-of-type(2)::before { background: #71c9b5; }
.hud-stats .hud-card:nth-of-type(3)::before { background: #9b7cc8; }

.hud-stats .hud-card:nth-of-type(1) strong { color: #b6430f; }
.hud-stats .hud-card:nth-of-type(2) strong { color: #246f5f; }
.hud-stats .hud-card:nth-of-type(3) strong { color: #5b3d8d; }

.hud-card > * {
  position: relative;
  z-index: 1;
}

.hud-card span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.hud-card strong {
  font-size: clamp(14px, 1.3vw, 20px);
  line-height: 1;
  font-family: var(--font-pixel);
}

.runner-stage {
  grid-area: stage;
  position: relative;
  overflow: hidden;
  border: var(--bw-lg) solid var(--pixel-black);
  background: linear-gradient(180deg, #a597e8 0%, #8b7ee2 100%);
  min-height: 0;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.game-frame.is-active .runner-stage {
  opacity: 1;
  pointer-events: auto;
}

.runner-stage.is-shaking {
  animation: stageShake 320ms steps(3);
}

.game-frame.is-start .runner-world {
  opacity: 0;
  pointer-events: none;
}

.game-frame.is-start .floating-ui,
.game-frame.is-start .floating-console-img,
.game-frame.is-start .screen-rim {
  opacity: 0;
}

.runner-world,
.floating-ui,
.floating-console-img,
.screen-rim,
.info-panel {
  transition: opacity 180ms ease;
}

.runner-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 20%, color-mix(in srgb, var(--stage-accent, #ff9d1c) 22%, transparent 78%) 0 20%, transparent 56%),
    linear-gradient(135deg, rgba(255,255,255,0.16) 0%, transparent 35%, rgba(0,0,0,0.1) 100%);
  pointer-events: none;
}

.runner-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0 60%, rgba(0,0,0,0.12) 100%);
  pointer-events: none;
}

.sky-layer,
.runner-track,
.runner-ground,
.coin-layer,
.runner-character,
.start-overlay,
.floating-ui,
.floating-console,
.screen-rim,
.end-cloud,
.end-fox,
.end-floor {
  position: absolute;
}

.screen-rim.top {
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  background: #1f1c26;
  z-index: 1;
}

.screen-rim.right {
  top: 0;
  right: 0;
  width: 14px;
  bottom: 0;
  background: repeating-linear-gradient(180deg, #0d6ac0 0 16px, #1d6ad0 16px 28px, #edb32d 28px 40px);
  z-index: 1;
}

.sky-back {
  inset: 0;
  background: linear-gradient(180deg, #ff8e14 0%, #ffbb24 62%, #ffee4d 100%);
}

.sky-mid {
  inset: 0;
  background:
    radial-gradient(circle at 64% 30%, rgba(255,246,171,0.9) 0 14px, rgba(255,246,171,0.0) 16px),
    radial-gradient(circle at 56% 26%, rgba(255,255,255,0.95) 0 8px, transparent 9px),
    radial-gradient(circle at 73% 36%, rgba(255,255,255,0.95) 0 7px, transparent 8px),
    radial-gradient(circle at 45% 18%, rgba(255,255,255,0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 54% 22%, rgba(255,255,255,0.15) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 16%, rgba(255,255,255,0.15) 0 2px, transparent 3px);
}

.sky-front {
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, rgba(255,215,79,0.06) 34%, rgba(255,201,60,0.14) 100%);
}

.top-icons {
  top: 22px;
  left: 22px;
  z-index: 4;
}

.stage-mission {
  grid-area: mission;
  position: relative;
  width: 100%;
  align-self: start;
  min-height: 100%;
  padding: 14px 16px;
  border: var(--bw-md) solid var(--pixel-black);
  border-left-width: var(--bw-lg);
  background:
    linear-gradient(90deg, rgba(127, 114, 217, 0.28) 0 10px, rgba(255, 249, 235, 0.95) 10px 100%);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.14);
  z-index: 7;
  display: grid;
  gap: 8px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.stage-mission::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #c8a0e8 0%, #9b7cc8 50%, #7a5daf 100%);
}

.game-frame.is-playing .stage-mission {
  opacity: 1;
  transform: translateY(0);
}

.game-frame.is-start .stage-mission,
.game-frame.is-end .stage-mission {
  opacity: 0;
}

.game-frame.is-playing .stage-mission::after {
  content: "";
  position: absolute;
  left: -12px;
  bottom: -12px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--pixel-black);
  background: #c8a0e8;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.45);
}

.mission-kicker {
  margin: 0;
  color: #8d4d1d;
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 900;
  letter-spacing: 1.4px;
  font-family: var(--font-ui-zh);
}

.mission-title {
  margin: 0;
  color: #19100c;
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.1;
  font-weight: 900;
}

.mission-objective {
  margin: 0;
  color: #2b1e16;
  font-size: clamp(13px, 0.96vw, 15px);
  line-height: 1.4;
  font-weight: 700;
}

.mission-meter {
  height: clamp(14px, 1.6vh, 18px);
  border: var(--bw-sm) solid var(--pixel-black);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 10px, rgba(255,255,255,0.2) 10px 20px),
    rgba(255,255,255,0.75);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);
  overflow: hidden;
}

.mission-meter-fill {
  width: 0%;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.26) 0 8px, rgba(255,255,255,0.02) 8px 16px),
    linear-gradient(90deg, color-mix(in srgb, var(--stage-accent, #ff9d1c) 72%, #ffffff 0%), var(--stage-accent, #ff9d1c));
  transition: width 220ms ease;
}

.mission-progress {
  margin: 0;
  color: #452f24;
  font-size: clamp(12px, 0.88vw, 14px);
  line-height: 1.35;
  font-weight: 800;
}

.floating-console {
  right: 84px;
  top: 20px;
  z-index: 4;
}

.start-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background: #d97a08;
}

.start-overlay.is-visible {
  display: flex;
}

.console-shell {
  width: min(980px, calc(100% - 44px));
  height: min(620px, calc(100% - 40px));
  position: relative;
  border: 8px solid var(--pixel-black);
  border-radius: 38px 38px 120px 120px;
  overflow: hidden;
  box-shadow: inset -18px -18px 0 rgba(0,0,0,0.12);
}

.start-shell {
  background: linear-gradient(135deg, #ffa31c 0%, #ff8609 100%);
}

/* ===== Console image wrapper (full-screen console composition) ===== */
.console-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  line-height: 0;
}

.console-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  image-rendering: pixelated;
}

.console-corner {
  position: absolute;
  top: 0;
  width: 170px;
  height: 70px;
  border-top: 9px solid #fff7e9;
  border-left: 9px solid #fff7e9;
  border-right: 9px solid #fff7e9;
  border-radius: 120px 120px 0 0;
}

.console-corner.left { left: -42px; transform: rotate(-8deg); }
.console-corner.right { right: -42px; transform: rotate(8deg); }

.console-brandmark {
  position: absolute;
  left: 50%;
  bottom: 7.2%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(34px, 4.1vw, 58px);
  color: rgba(255,241,226,0.85);
  text-shadow: 3px 3px 0 rgba(0,0,0,0.16);
  z-index: 3;
}

.console-dpad {
  position: absolute;
  left: 48px;
  top: 160px;
  width: 120px;
  height: 120px;
}

.console-dpad span {
  position: absolute;
  width: 44px;
  height: 44px;
  background: linear-gradient(180deg, #9d9ca0 0%, #626064 100%);
  border: 5px solid var(--pixel-black);
  color: #f7f7f7;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.console-dpad .up { left: 38px; top: 0; }
.console-dpad .left { left: 0; top: 38px; }
.console-dpad .right { right: 0; top: 38px; }
.console-dpad .down { left: 38px; bottom: 0; }

.console-action,
.console-arrow {
  position: absolute;
}

.console-action {
  width: 54px;
  height: 54px;
  border: 5px solid var(--pixel-black);
  background: #2f354a;
}

.console-action::after {
  content: "";
  position: absolute;
  inset: 12px;
  background: #ef5c69;
}

.console-action.action-main { right: 116px; top: 182px; }
.console-action.action-side { right: 42px; top: 172px; border-radius: 50%; }
.console-action.action-side::after { inset: 12px; border-radius: 50%; background: #8adb97; }

.console-arrow {
  width: 44px;
  height: 44px;
  background: #f4f1f6;
  border: 5px solid var(--pixel-black);
  bottom: 176px;
}

.console-arrow::after {
  content: "";
  position: absolute;
  inset: 7px;
  background: #7880a9;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.console-arrow.left { left: 36px; }
.console-arrow.right { right: 36px; }
.console-arrow.right::after { transform: rotate(180deg); }

.screen-shell {
  position: absolute;
  left: 50%;
  top: 56px;
  transform: translateX(-50%);
  width: 470px;
  height: 390px;
  background: #584537;
  border: 8px solid var(--pixel-black);
}

.screen-shell-top {
  position: absolute;
  left: -8px;
  right: -8px;
  top: -8px;
  height: 20px;
  background: #1f1c22;
}

.screen-shell-bottom {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 40px;
  color: rgba(255,240,226,0.82);
}

.start-inner {
  position: absolute;
  inset: 18px 18px 68px;
  background: linear-gradient(180deg, #ff7819 0%, #ff9a18 40%, #ffda2f 100%);
  overflow: hidden;
}

.start-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,246,180,0.55) 0 16%, transparent 17%),
    linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.02) 34%, transparent 80%);
}

.start-logo {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 104px;
  line-height: 0.9;
  font-style: normal;
  font-family: Impact, Haettenschweiler, 'Arial Black', sans-serif;
  color: #fce8b8;
  text-shadow: 4px 4px 0 #8f3007;
}

.start-cloud,
.end-cloud {
  position: absolute;
  background: #f7f0eb;
  border: 4px solid var(--pixel-black);
}

.start-cloud::before,
.start-cloud::after,
.end-cloud::before,
.end-cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border: inherit;
}

.start-cloud.small { width: 74px; height: 24px; left: 20px; top: 126px; }
.start-cloud.small::before { width: 22px; height: 22px; left: 10px; top: -10px; }
.start-cloud.small::after { width: 28px; height: 28px; right: 8px; top: -14px; }
.start-cloud.medium { width: 98px; height: 28px; left: 92px; top: 208px; }
.start-cloud.medium::before { width: 28px; height: 28px; left: 18px; top: -12px; }
.start-cloud.medium::after { width: 34px; height: 34px; right: 12px; top: -16px; }
.start-cloud.large { width: 98px; height: 30px; right: 26px; top: 150px; }
.start-cloud.large::before { width: 32px; height: 32px; left: 16px; top: -14px; }
.start-cloud.large::after { width: 40px; height: 40px; right: 10px; top: -18px; }

.start-menu {
  position: absolute;
  left: 206px;
  top: 160px;
  display: grid;
  gap: 12px;
  z-index: 4;
}

.start-menu-btn {
  position: relative;
  min-width: 104px;
  padding: 8px 12px;
  border: 4px solid #e29100;
  background: #ffd62f;
  color: #b45f00;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.14);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  z-index: 5;
}

.start-menu-btn:hover,
.start-menu-btn:focus-visible {
  background: #ffe76e;
  outline: none;
}

.start-menu-btn:active {
  transform: translateY(2px);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.14);
}

.start-fox,
.end-fox,
.runner-character {
  position: absolute;
}

.start-fox {
  right: 20px;
  bottom: 18px;
  width: 176px;
  height: 228px;
  z-index: 2;
  pointer-events: none;
}

.fox-ear,
.fox-head,
.fox-body,
.fox-tail,
.fox-leg,
.fox-face-mark,
.fox-eye,
.fox-nose {
  position: absolute;
}

.fox-ear {
  width: 44px;
  height: 64px;
  background: var(--fox-main);
  border: 5px solid var(--pixel-black);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.fox-ear::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 24px;
  background: #ffd8d1;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.fox-ear.left { left: 28px; top: 0; }
.fox-ear.right { right: 30px; top: 4px; }

.fox-head {
  left: 18px;
  top: 40px;
  width: 126px;
  height: 92px;
  background: var(--fox-main);
  border: 5px solid var(--pixel-black);
  clip-path: polygon(10% 0, 90% 0, 100% 18%, 100% 66%, 88% 82%, 73% 92%, 27% 92%, 12% 82%, 0 66%, 0 18%);
}

.fox-face-mark {
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 38px;
  background: var(--fox-light);
  border: 4px solid var(--pixel-black);
  clip-path: polygon(0 20%, 22% 0, 42% 14%, 58% 14%, 78% 0, 100% 20%, 100% 100%, 0 100%);
}

.fox-eye {
  top: 30px;
  width: 12px;
  height: 16px;
  background: #231713;
  border: 2px solid var(--pixel-black);
}

.fox-eye.left { left: 34px; }
.fox-eye.right { right: 34px; }

.fox-nose {
  left: 50%;
  top: 52px;
  width: 18px;
  height: 14px;
  transform: translateX(-50%);
  background: #3b1e1a;
  border: 2px solid var(--pixel-black);
  clip-path: polygon(50% 100%, 0 42%, 18% 0, 82% 0, 100% 42%);
}

.fox-nose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 16px;
  height: 12px;
  transform: translateX(-50%);
  border-left: 3px solid var(--pixel-black);
  border-right: 3px solid var(--pixel-black);
  border-bottom: 3px solid var(--pixel-black);
  background: transparent;
}

.fox-body {
  left: 42px;
  top: 126px;
  width: 84px;
  height: 74px;
  background: var(--fox-main);
  border: 5px solid var(--pixel-black);
  clip-path: polygon(18% 0, 82% 0, 100% 20%, 96% 100%, 4% 100%, 0 20%);
}

.fox-body::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 10px;
  width: 42px;
  height: 52px;
  background: var(--fox-light);
  border: 4px solid var(--pixel-black);
  border-radius: 28px 28px 18px 18px;
}

.fox-leg {
  bottom: 0;
  width: 18px;
  height: 40px;
  background: var(--fox-dark);
  border: 4px solid var(--pixel-black);
}

.fox-leg.front { left: 52px; }
.fox-leg.back { right: 44px; }

.fox-tail {
  right: -2px;
  bottom: 40px;
  width: 82px;
  height: 104px;
  background: var(--fox-main);
  border: 5px solid var(--pixel-black);
  clip-path: polygon(0 70%, 12% 30%, 40% 0, 100% 12%, 90% 50%, 100% 86%, 64% 100%, 18% 92%);
  transform: rotate(10deg);
}

.fox-tail::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 8px;
  width: 34px;
  height: 38px;
  background: var(--fox-light);
  border: 4px solid var(--pixel-black);
  clip-path: polygon(26% 0, 100% 18%, 88% 82%, 10% 100%, 0 44%);
}

.runner-world {
  inset: 0;
  overflow: hidden;
}

.pause-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 18;
  background: rgba(24, 14, 10, 0.4);
  color: #fff7ef;
  font-family: var(--font-ui-zh);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.35);
}

.pause-overlay.is-visible {
  display: flex;
}

.runner-stage.is-stage-transition {
  animation: stageFadeIn 420ms ease;
}

@keyframes stageFadeIn {
  from { filter: brightness(1.18) saturate(1.15); }
  to { filter: brightness(1) saturate(1); }
}

.runner-world::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 24%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 24px),
    linear-gradient(180deg, rgba(255,188,62,0) 0 58%, rgba(214,88,12,0.2) 58% 100%);
  pointer-events: none;
}

.stage-chest {
  position: absolute;
  left: 72%;
  bottom: 22%;
  width: clamp(120px, 18vh, 200px);
  height: clamp(104px, 16vh, 176px);
  z-index: 6;
  opacity: 0;
  transform: translate3d(260px, 0, 0) scale(0.82);
  transition: opacity 180ms ease, transform 260ms ease, filter 220ms ease;
  filter: drop-shadow(0 0 0 rgba(255, 227, 127, 0));
}

.stage-chest.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.stage-chest.is-attracting {
  filter: drop-shadow(0 0 18px rgba(255, 233, 127, 0.9)) drop-shadow(0 0 36px rgba(255, 188, 62, 0.75));
  animation: chestPulse 900ms ease-in-out infinite;
}

.stage-chest.is-contacting {
  transform: translate3d(0, 0, 0) scale(1.12);
  filter: drop-shadow(0 0 22px rgba(255, 244, 170, 1)) drop-shadow(0 0 48px rgba(255, 188, 62, 0.92));
}

.stage-chest.is-open .stage-chest-lid {
  transform: rotate(-24deg) translate(-8px, -18px);
}

.stage-chest-lid,
.stage-chest-body,
.stage-chest-glow {
  position: absolute;
}

.stage-chest-lid {
  left: 10px;
  top: 12px;
  width: 116px;
  height: 38px;
  border: 5px solid var(--pixel-black);
  background: linear-gradient(180deg, #ffbf42 0%, #f67e12 100%);
  transform-origin: left bottom;
  transition: transform 180ms ease;
}

.stage-chest-body {
  left: 0;
  right: 0;
  bottom: 6px;
  height: 74px;
  border: 5px solid var(--pixel-black);
  background: linear-gradient(180deg, #ff941d 0%, #f1750c 52%, #7f2fe0 52%, #7f2fe0 100%);
}

.stage-chest-body::before,
.stage-chest-body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  background: #7c2fe5;
}

.stage-chest-body::before { left: 22px; }
.stage-chest-body::after { right: 22px; }

.stage-chest-glow {
  left: 50%;
  top: -14px;
  width: 114px;
  height: 74px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,246,184,0.92) 0%, rgba(255,219,97,0.36) 42%, rgba(255,219,97,0) 76%);
  opacity: 0;
}

.stage-chest.is-open .stage-chest-glow {
  opacity: 1;
}

.card-modal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 18;
  background: rgba(32, 16, 10, 0.42);
}

.card-modal.is-visible {
  display: flex;
}

.card-modal-shell {
  width: min(900px, calc(100% - 80px));
  min-height: 440px;
  padding: 36px 40px 44px;
  border: 8px solid var(--pixel-black);
  background: linear-gradient(180deg, #fff5df 0%, #ffe5b9 100%);
  box-shadow: 12px 12px 0 rgba(0,0,0,0.18);
  display: grid;
  gap: 24px;
  text-align: center;
}

.card-modal.is-visible .card-modal-shell {
  animation: modalPulse 1.4s ease-in-out infinite;
}

.card-modal-kicker {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #96511a;
}

.card-modal-title {
  font-size: clamp(36px, 3.6vw, 60px);
  line-height: 1.2;
  font-weight: 900;
  color: #23150d;
  font-family: 'Impact', 'Arial Black', sans-serif;
  text-shadow: 2px 2px 0 #ffd700;
  white-space: pre-line;
}

.card-modal-body {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
  color: #302116;
  font-style: italic;
}

.card-modal-quote {
  padding: 16px 18px;
  border: 5px solid var(--pixel-black);
  background: rgba(255,255,255,0.4);
}

.card-modal-action {
  justify-self: center;
  min-width: 220px;
  padding: 16px 24px;
  border: 3px solid var(--pixel-black);
  background: var(--stage-accent, #ff9d1c);
  color: #fffef2;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.15);
  cursor: pointer;
  margin-top: 10px;
}

.runner-ground {
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.0) 0 14%, rgba(0,0,0,0.08) 14% 15%, transparent 15%),
    linear-gradient(180deg, #ffbd2a 0%, #ff9a16 100%);
  border-top: 6px solid rgba(0,0,0,0.22);
}

.runner-ground::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0 8%, transparent 8%),
    linear-gradient(90deg, transparent 0 4%, rgba(0,0,0,0.18) 4% 4.8%, transparent 4.8% 100%),
    linear-gradient(180deg, transparent 0 6%, rgba(0,0,0,0.18) 6% 6.8%, transparent 6.8% 100%),
    repeating-linear-gradient(90deg, #ea6712 0 11%, #ffb115 11% 22%),
    repeating-linear-gradient(180deg, transparent 0 28%, rgba(0,0,0,0.16) 28% 29%, transparent 29% 100%);
  background-size: auto, 12.5% 100%, 100% 22%, auto, auto;
}

.runner-track {
  left: -8%;
  width: 116%;
  height: 8px;
  background: repeating-linear-gradient(90deg, transparent 0 74px, rgba(255,255,255,0.16) 74px 112px);
}

.track-back { bottom: 34%; opacity: 0.18; }
.track-front { bottom: 27%; opacity: 0.26; }

.coin-layer {
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.runner-character {
  left: 18%;
  bottom: 22%;
  width: clamp(160px, 22vmin, 240px);
  height: clamp(160px, 22vmin, 240px);
  z-index: 5;
  transform: translate3d(0, 0, 0);
}

.runner-character .fox-ear.left { left: 28px; top: 8px; width: 44px; height: 64px; }
.runner-character .fox-ear.right { right: 38px; top: 14px; width: 44px; height: 64px; }
.runner-character .fox-head { left: 18px; top: 46px; width: 132px; height: 102px; border-width: 5px; }
.runner-character .fox-face-mark { left: 5px; right: 5px; bottom: 4px; height: 44px; border-width: 4px; }
.runner-character .fox-eye { top: 34px; width: 16px; height: 20px; }
.runner-character .fox-eye.left { left: 36px; }
.runner-character .fox-eye.right { right: 36px; }
.runner-character .fox-nose { top: 58px; width: 20px; height: 16px; border-width: 3px; }
.runner-character .fox-nose::after { top: 12px; width: 14px; height: 10px; border-left-width: 3px; border-right-width: 3px; border-bottom-width: 3px; }
.runner-character .fox-body { left: 46px; top: 146px; width: 92px; height: 84px; border-width: 5px; }
.runner-character .fox-body::after { left: 20px; top: 12px; width: 44px; height: 58px; border-width: 4px; }
.runner-character .fox-leg { width: 18px; height: 44px; border-width: 4px; }
.runner-character .fox-leg.front { left: 60px; }
.runner-character .fox-leg.back { right: 58px; }
.runner-character .fox-tail { right: 0; bottom: 48px; width: 90px; height: 118px; border-width: 5px; }
.runner-character .fox-tail::after { right: 4px; top: 10px; width: 36px; height: 42px; border-width: 4px; }

.runner-character.is-running {
  animation: foxRun 360ms infinite steps(2);
}

.runner-character.is-jumping {
  animation: none;
}

.fox-dialogue {
  position: absolute;
  left: auto;
  right: calc(64% - 140px);
  bottom: 55%;
  width: min(420px, 46%);
  display: grid;
  gap: 10px;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.fox-dialogue.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fox-dialogue.is-hot .fox-bubble {
  border-color: #ffb347;
  box-shadow: 0 0 0 3px rgba(255, 214, 92, 0.32), 8px 8px 0 rgba(0,0,0,0.14);
}

.fox-bubble,
.fox-guide-pill {
  margin: 0;
  position: relative;
  border: 4px solid var(--pixel-black);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.14);
}

.fox-bubble {
  padding: 12px 16px;
  min-height: 72px;
  background: rgba(255, 249, 235, 0.98);
  color: #2a1910;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
  font-weight: 800;
}

.fox-bubble::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -16px;
  width: 14px;
  height: 14px;
  background: rgba(255, 249, 235, 0.98);
  border-left: 4px solid var(--pixel-black);
  border-bottom: 4px solid var(--pixel-black);
  transform: rotate(-45deg);
}

.fox-guide-pill {
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px;
  background: rgba(109, 81, 172, 0.94);
  color: #fffdf2;
  font-size: clamp(12px, 0.88vw, 14px);
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.fox-dialogue.is-pop .fox-bubble {
  animation: foxBubblePop 300ms ease;
}

/* ===== Coins ===== */
.coin {
  position: absolute;
  width: clamp(20px, 2.6vh, 30px);
  height: clamp(20px, 2.6vh, 30px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffe86b, #f5a623);
  border: 3px solid #c47d10;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.2), 2px 2px 0 rgba(0,0,0,0.12);
  z-index: 6;
  pointer-events: none;
}

.coin.is-collected {
  animation: coinCollect 160ms ease forwards;
}

@keyframes coinCollect {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.45); }
}

.coin::before {
  content: "S";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 1.2vh, 14px);
  font-weight: 900;
  color: #b8690f;
  font-family: Impact, sans-serif;
}

.info-panel {
  grid-area: info;
  position: relative;
  min-height: 100%;
  padding: 18px clamp(16px, 1.8vw, 30px) 20px;
  background:
    repeating-linear-gradient(45deg, rgba(155,124,200,0.06) 0 2px, transparent 2px 10px),
    linear-gradient(90deg, rgba(155,124,200,0.20) 0 10px, rgba(255, 250, 240, 0.98) 10px 100%);
  border: var(--bw-lg) solid #9b7cc8;
  box-shadow: 0 -4px 0 #7a5daf, 8px 8px 0 rgba(0,0,0,0.10);
  clip-path: none;
  opacity: 0;
  pointer-events: none;
}

.game-frame.is-playing .info-panel {
  opacity: 1;
  pointer-events: auto;
}

.info-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 3px solid rgba(155, 124, 200, 0.35);
}

.info-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: linear-gradient(90deg, #c8a0e8 0%, #9b7cc8 50%, #7a5daf 100%);
  transform: none;
}

.info-title,
.info-text {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.info-title.is-visible,
.info-text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.info-title {
  margin: 0 0 8px;
  font-size: clamp(26px, 2.4vw, 38px);
  color: #09070a;
  font-weight: 900;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(155,124,200,0.42);
}

.info-text {
  margin: 0 0 6px;
  max-width: 1120px;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.58;
  color: #161312;
  font-weight: 700;
  padding: 2px 4px;
}

.info-text:nth-of-type(even) {
  background: rgba(155,124,200,0.06);
}

.info-text:last-child {
  margin-bottom: 0;
}

.end-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 120;
  overflow: hidden;
  background: linear-gradient(180deg, #ffcd71 0%, #ffb24b 42%, #f29124 100%);
}

.end-overlay.is-visible {
  display: block;
}

.end-summary-shell {
  position: relative;
  width: min(1280px, 100%);
  height: min(100%, 860px);
  margin: 0 auto;
  padding: 24px 24px 110px;
  border: none;
  background: transparent;
  box-shadow: none;
  display: block;
}

.end-summary-title {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  font-size: clamp(90px, 10vw, 168px);
  line-height: 0.9;
  font-weight: 900;
  color: #fffef6;
  -webkit-text-stroke: 10px var(--pixel-black);
  text-shadow: 8px 8px 0 #df4915;
  z-index: 5;
}

.end-summary-grid {
  position: absolute;
  right: 28px;
  bottom: 104px;
  display: grid;
  grid-template-columns: 1fr;
  width: 320px;
  gap: 12px;
}

.end-puzzle-board {
  position: absolute;
  left: 34px;
  top: 24px;
  display: flex;
  gap: 12px;
  z-index: 5;
}

.end-puzzle-piece {
  width: 86px;
  min-height: 86px;
  padding: 8px;
  border: 5px solid var(--pixel-black);
  background: rgba(255, 244, 218, 0.46);
  opacity: 0.54;
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
  backdrop-filter: blur(2px);
}

.end-puzzle-piece.is-lit {
  opacity: 1;
  transform: translateY(-2px);
  background: #fff4de;
}

.end-puzzle-piece span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 900;
  color: #90501f;
}

.end-puzzle-piece strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.1;
  color: #23140e;
}

.end-puzzle-piece p {
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
  color: #302117;
}

.end-summary-card,
.end-quote-box {
  padding: 14px 16px;
  border: 5px solid var(--pixel-black);
  background: rgba(255, 244, 221, 0.88);
}

.end-summary-card span,
.end-quote-title {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 900;
  color: #8d4d1d;
}

.end-summary-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 28px;
  line-height: 1;
  color: #1b120d;
}

.end-summary-card p,
.end-quote-box p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
  color: #2f2118;
}

.end-quote-box {
  position: absolute;
  left: 50%;
  bottom: 104px;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 420px));
}

.end-actions {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}

.end-cloud {
  background: rgba(249,244,240,0.96);
}

.end-cloud.cloud-left { left: 120px; top: 148px; width: 118px; height: 34px; }
.end-cloud.cloud-left::before { width: 34px; height: 34px; left: 18px; top: -14px; }
.end-cloud.cloud-left::after { width: 42px; height: 42px; right: 12px; top: -18px; }
.end-cloud.cloud-mid { left: 330px; top: 300px; width: 76px; height: 24px; }
.end-cloud.cloud-mid::before { width: 24px; height: 24px; left: 12px; top: -10px; }
.end-cloud.cloud-mid::after { width: 30px; height: 30px; right: 8px; top: -12px; }
.end-cloud.cloud-right { right: 300px; top: 210px; width: 120px; height: 34px; }
.end-cloud.cloud-right::before { width: 36px; height: 36px; left: 16px; top: -14px; }
.end-cloud.cloud-right::after { width: 44px; height: 44px; right: 10px; top: -18px; }

.end-floor {
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 55%;
  border: none;
  transform: perspective(600px) rotateX(50deg);
  transform-origin: center bottom;
  background:
    repeating-conic-gradient(#e06010 0% 25%, #f0a020 0% 50%) 0 0 / 120px 120px;
  z-index: 2;
}

.end-fox {
  left: 50%;
  bottom: 118px;
  width: 252px;
  height: 324px;
  transform: translateX(-50%);
  z-index: 4;
}

.end-fox .fox-ear.left { left: 34px; top: 0; width: 52px; height: 76px; }
.end-fox .fox-ear.right { right: 44px; top: 8px; width: 52px; height: 76px; }
.end-fox .fox-head { left: 22px; top: 56px; width: 154px; height: 124px; }
.end-fox .fox-face-mark { left: 8px; right: 8px; bottom: 6px; height: 54px; }
.end-fox .fox-eye { top: 40px; width: 20px; height: 26px; }
.end-fox .fox-eye.left { left: 38px; }
.end-fox .fox-eye.right { right: 38px; }
.end-fox .fox-nose { top: 70px; width: 24px; height: 18px; }
.end-fox .fox-nose::after { top: 14px; width: 18px; height: 12px; }
.end-fox .fox-body { left: 54px; top: 176px; width: 104px; height: 96px; }
.end-fox .fox-body::after { left: 22px; top: 12px; width: 50px; height: 66px; }
.end-fox .fox-leg { width: 22px; height: 52px; }
.end-fox .fox-leg.front { left: 70px; }
.end-fox .fox-leg.back { right: 66px; }
.end-fox .fox-tail { right: 0; bottom: 58px; width: 110px; height: 142px; }

.end-console {
  right: 84px;
  top: 0;
  width: 126px;
  height: 96px;
  z-index: 6;
}

.end-console::before {
  height: 160px;
  top: -156px;
}

.end-chat,
.end-tag,
.end-line {
  z-index: 5;
}

.restart-button {
  bottom: 28px;
  transform: translateX(-50%);
  padding: 10px 18px;
  min-width: 180px;
  border: 5px solid var(--mint-dark);
  background: var(--mint);
  color: white;
  font-size: 26px;
  font-weight: 900;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.14);
  cursor: pointer;
  z-index: 20;
}

.card-modal-action:hover,
.card-modal-action:focus-visible {
  filter: brightness(1.06);
  outline: none;
}

.card-modal-action:active {
  transform: translateY(2px);
}

/* ===== Stage Select Modal ===== */
.stage-select-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.stage-select-modal.is-visible {
  display: flex;
}
.stage-select-shell {
  background: #2a2a4a;
  border: 4px solid #9b7cc8;
  border-radius: 0;
  padding: 2em;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}
.stage-select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5em;
  padding-bottom: 1em;
  border-bottom: 2px solid #9b7cc8;
}
.stage-select-title {
  color: white;
  font-family: 'Press Start 2P', monospace;
  font-size: 20px;
  margin: 0;
}
.stage-select-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0.5em;
  font-family: monospace;
}
.stage-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1em;
}
.stage-select-item {
  background: #1a1a3a;
  border: 2px solid #6a5a8a;
  padding: 1.5em;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.stage-select-item:hover {
  border-color: #9b7cc8;
  transform: translateY(-2px);
}
.stage-select-item h4 {
  color: white;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  margin: 0 0 0.5em 0;
}
.stage-select-item p {
  color: #aaa;
  font-size: 12px;
  margin: 0;
  line-height: 1.4;
}

.hidden {
  display: none !important;
}

/* ========== Image sprite styles ========== */
.fox-sprite,
.chest-sprite {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

/* ========== Home page images ========== */
.home-icon-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
}

.home-console-img {
  position: absolute;
  right: 64px;
  top: 12px;
  width: 130px;
  height: auto;
  z-index: 4;
  image-rendering: pixelated;
}

/* ========== Floating gameplay images ========== */
.float-icon-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  image-rendering: pixelated;
}

.floating-console-img {
  position: absolute;
  right: 76px;
  top: 0;
  width: 120px;
  height: auto;
  z-index: 4;
  image-rendering: pixelated;
}

/* ========== Start page: screen-content overlay on console image ========== */
.screen-content {
  position: absolute;
  left: 29.5%;
  top: 9%;
  width: 41%;
  height: 68%;
  overflow: hidden;
  background: linear-gradient(180deg, #ff7819 0%, #ff9a18 40%, #ffda2f 100%);
  z-index: 2;
}

.screen-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,246,180,0.5) 0 16%, transparent 17%),
    linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 34%);
  pointer-events: none;
}

.screen-content .start-logo {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(48px, 8vw, 104px);
}

.screen-content .start-fox-img {
  position: absolute;
  right: 2%;
  bottom: 0;
  width: 52%;
  height: auto;
  z-index: 2;
  image-rendering: pixelated;
  pointer-events: none;
}

.screen-content .start-clouds-img {
  position: absolute;
  left: 0;
  top: 28%;
  width: 100%;
  height: auto;
  z-index: 1;
  image-rendering: pixelated;
  pointer-events: none;
}

.screen-content .start-menu {
  position: absolute;
  left: 12%;
  top: 38%;
  z-index: 4;
}

/* ========== End page image layout (matches 游戏结束页.png) ========== */
.end-icon-img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  image-rendering: pixelated;
}

.end-title-text {
  position: absolute;
  left: 42%;
  top: 10%;
  transform: translateX(-50%);
  font-size: clamp(72px, 12vw, 170px);
  font-weight: 900;
  line-height: 0.9;
  color: #ffffff;
  -webkit-text-stroke: 8px #c41b00;
  paint-order: stroke fill;
  text-shadow: 6px 8px 0 #c41b00, 0 0 0 #fff;
  z-index: 10;
  white-space: nowrap;
  letter-spacing: 4px;
}

.end-gameboy-wrap {
  position: absolute;
  right: 4%;
  top: 22%;
  width: clamp(90px, 12vw, 180px);
  z-index: 8;
}

.end-gameboy-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 4px;
  height: 200vh;
  background: #5e3a7a;
}

.end-gameboy-img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
}

.end-cloud-img {
  position: absolute;
  image-rendering: pixelated;
  z-index: 3;
  pointer-events: none;
}

.end-cloud-img.c1 {
  left: 4%;
  top: 42%;
  width: clamp(70px, 8vw, 120px);
}

.end-cloud-img.c2 {
  left: 8%;
  bottom: 18%;
  width: clamp(100px, 14vw, 200px);
}

.end-cloud-img.c3 {
  left: 14%;
  bottom: 4%;
  width: clamp(110px, 16vw, 240px);
}

.end-cloud-img.c4 {
  right: 18%;
  top: 36%;
  width: clamp(50px, 5vw, 80px);
}

.end-cloud-img.c5 {
  right: 6%;
  bottom: 18%;
  width: clamp(50px, 6vw, 90px);
}

.end-fox-img {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: clamp(240px, 38vw, 520px);
  height: auto;
  z-index: 5;
  image-rendering: pixelated;
}

.end-chat-icon {
  position: absolute;
  left: 28px;
  bottom: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #5ce0c4;
  border: 3px solid var(--pixel-black);
  z-index: 10;
}

.end-tag-label {
  position: absolute;
  right: 28px;
  bottom: 24px;
  font-size: clamp(32px, 4.5vw, 68px);
  font-weight: 900;
  color: var(--pixel-black);
  z-index: 10;
}

@keyframes foxRun {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}

@keyframes homeBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.66; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

@keyframes homeFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

@keyframes stageShake {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-10px, 4px, 0); }
  40% { transform: translate3d(8px, -4px, 0); }
  60% { transform: translate3d(-6px, 3px, 0); }
  80% { transform: translate3d(5px, -2px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes chestPulse {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -4px, 0) scale(1.06); }
}

@keyframes modalPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes foxBubblePop {
  0% { transform: scale(0.96); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@media (max-width: 1400px) {
  .hud-logo {
    font-size: clamp(42px, 4.6vw, 60px);
    -webkit-text-stroke: 5px var(--pixel-black);
    text-shadow: 5px 5px 0 #df4915;
  }

  .hud {
    grid-template-columns: minmax(180px, 0.85fr) minmax(360px, 1.5fr) minmax(240px, 1.05fr);
    gap: 16px;
  }

  .hud-card {
    min-width: 90px;
    padding: 8px 10px;
  }

  .game-control-btn {
    font-size: 14px;
    padding: 5px 7px;
  }

  .info-panel {
    padding: 16px clamp(14px, 1.6vw, 26px) 18px;
  }
}

@media (max-width: 1100px) {
  .console-shell {
    width: calc(100% - 24px);
    height: min(560px, calc(100% - 24px));
  }

  .screen-shell {
    width: 420px;
    height: 350px;
  }

  .start-logo {
    font-size: 88px;
  }

  .hud {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hud-center {
    justify-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .hud-stats {
    justify-self: start;
    justify-content: flex-start;
  }

  .play-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(320px, 1.2fr) auto auto;
    grid-template-areas:
      "stage"
      "mission"
      "info";
    height: auto;
    gap: 14px;
  }

  .runner-stage {
    min-height: clamp(300px, 55vh, 520px);
  }

  .play-layout::before,
  .play-layout::after {
    display: none;
  }

  .runner-character {
    left: 15%;
    bottom: 22%;
    width: clamp(140px, 20vmin, 200px);
    height: clamp(140px, 20vmin, 200px);
  }

  .stage-mission {
    width: 100%;
  }

  .fox-dialogue {
    left: 50%;
    bottom: 48%;
    width: min(420px, 50%);
  }

  .screen-content .start-fox-img {
    width: 48%;
  }

  .screen-content .start-logo {
    font-size: clamp(40px, 7vw, 80px);
  }

  .end-data {
    right: 18px;
    top: 24%;
    width: min(340px, 42vw);
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .runner-character {
    left: 12%;
    bottom: 22%;
    width: clamp(120px, 18vmin, 180px);
    height: clamp(120px, 18vmin, 180px);
  }

  .fox-dialogue {
    left: auto;
    right: 3%;
    bottom: 50%;
    width: min(340px, 60%);
    gap: 5px;
  }

  .stage-mission {
    width: 100%;
    padding: 10px 12px;
    gap: 5px;
  }

  .info-panel {
    min-height: 160px;
    padding: 14px 14px 16px;
  }

  .fox-bubble {
    min-height: 54px;
    padding: 8px 10px;
  }

  .fox-guide-pill {
    padding: 7px 10px;
  }

  .screen-content .start-fox-img {
    width: 48%;
  }

  .screen-content .start-logo {
    font-size: clamp(40px, 7vw, 80px);
  }

  .end-data {
    right: 10px;
    top: auto;
    bottom: 148px;
    width: min(320px, 64vw);
  }

  .end-data > span {
    padding: 8px 10px;
    line-height: 1.28;
  }
}

/* ===== Hearts ===== */
.heart-icon {
  font-size: clamp(18px, 2.2vh, 24px);
  margin-right: 2px;
  transition: transform 0.2s ease, opacity 0.3s ease;
}
.heart-icon.is-full {
  color: #ff2244;
  text-shadow: 0 0 4px rgba(255,34,68,0.5);
}
.heart-icon.is-empty {
  color: #555;
  opacity: 0.4;
}

/* ===== Collectibles ===== */
.collectible {
  position: absolute;
  font-size: clamp(24px, 3vmin, 36px);
  width: clamp(32px, 4vmin, 48px);
  height: clamp(32px, 4vmin, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.6));
  animation: collectibleFloat 1s ease-in-out infinite alternate;
}

.collectible.is-collected {
  animation: collectibleCollect 180ms ease forwards;
}

@keyframes collectibleCollect {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(1.35) translateY(-14px); }
}
@keyframes collectibleFloat {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-8px) scale(1.1); }
}
.collectible-dollar { font-size: clamp(22px, 2.8vh, 32px); }
.collectible-mitBadge {
  font-size: clamp(24px, 3.1vh, 36px);
  filter: drop-shadow(0 0 10px rgba(100,200,255,0.8));
}
.collectible-sohuLogo {
  font-size: clamp(23px, 2.9vh, 34px);
  filter: drop-shadow(0 0 8px rgba(255,120,0,0.7));
}
.collectible-newspaper { font-size: clamp(20px, 2.6vh, 30px); }
.collectible-sohuStock {
  font-size: clamp(23px, 2.9vh, 34px);
  filter: drop-shadow(0 0 10px rgba(0,200,100,0.8));
}
.collectible-pill {
  font-size: clamp(19px, 2.4vh, 28px);
  filter: drop-shadow(0 0 6px rgba(255,100,100,0.7));
}
.collectible-light {
  font-size: clamp(18px, 2.2vh, 26px);
  filter: drop-shadow(0 0 12px rgba(255,255,200,0.9));
}
.collectible-blackboard {
  font-size: clamp(22px, 2.8vh, 32px);
  filter: drop-shadow(0 0 8px rgba(150,150,255,0.8));
}
.collectible-star {
  font-size: clamp(20px, 2.6vh, 30px);
  filter: drop-shadow(0 0 10px rgba(255,215,0,0.9));
}
.collectible-business {
  font-size: clamp(22px, 2.8vh, 32px);
  filter: drop-shadow(0 0 8px rgba(255,140,0,0.8));
}
.collectible-orb {
  font-size: clamp(19px, 2.4vh, 28px);
  filter: drop-shadow(0 0 14px rgba(255,255,100,0.9));
}

/* ===== Obstacles ===== */
.obstacle {
  position: absolute;
  font-size: clamp(26px, 3.2vh, 36px);
  width: clamp(32px, 4vh, 44px);
  height: clamp(32px, 4vh, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(255, 0, 0, 0.6));
  animation: obstacleShake 0.5s ease-in-out infinite;
  pointer-events: none;
  background: rgba(255, 0, 0, 0.15);
  border: 2px solid rgba(255, 0, 0, 0.5);
  border-radius: 4px;
  /* 底部位置由JS动态设置 (24-42%) */
}

/* 障碍物警告标识 */
.obstacle::before {
  content: '⚠';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #ff3333;
  text-shadow: 0 0 4px rgba(255, 0, 0, 0.8);
  animation: warningPulse 0.8s ease-in-out infinite;
}

@keyframes obstacleShake {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-3px) rotate(3deg); }
}

@keyframes warningPulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.6; transform: translateX(-50%) scale(1.1); }
}
@keyframes obstacleFloat {
  from { transform: translateY(0) rotate(-5deg); }
  to { transform: translateY(-8px) rotate(5deg); }
}

/* ===== Decoration Particles ===== */
.deco-particle {
  position: absolute;
  font-size: 16px;
  opacity: 0.7;
  pointer-events: none;
  z-index: 3;
  animation: particleFall linear forwards;
}
@keyframes particleFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
  100% { transform: translateY(calc(100vh - 40px)) rotate(360deg); opacity: 0; }
}
.deco-snow { color: #fff; font-size: 14px; }
.deco-confetti { font-size: 18px; }
.deco-code { color: #0f0; font-family: monospace; font-size: 12px; opacity: 0.5; }
.deco-stars { color: #ffd700; font-size: 14px; }
.deco-glow { color: #ffaa00; font-size: 18px; text-shadow: 0 0 8px #ffaa00; }

/* ===== Hit / Sprint Animations ===== */
.runner-character.is-hit {
  animation: foxHitFlash 0.15s ease-in-out 4;
}
@keyframes foxHitFlash {
  0%, 100% { opacity: 1; filter: none; }
  50% { opacity: 0.3; filter: brightness(2) saturate(0); }
}
.runner-character.is-sprinting {
  filter: drop-shadow(0 0 12px #ffaa00) drop-shadow(0 0 24px #ff6600);
}
.runner-character.is-sprinting .fox-sprite {
  animation: sprintPulse 0.4s ease-in-out infinite alternate;
}
@keyframes sprintPulse {
  from { filter: brightness(1.1); }
  to { filter: brightness(1.4) saturate(1.3); }
}

/* ===== End Screen CTA ===== */
.end-cta-group {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  z-index: 140;
}

.end-cta-group::before {
  content: "✦";
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  font-size: 12px;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 1px 0 rgba(0,0,0,0.24);
}
.end-cta-btn {
  display: inline-block;
  padding: 12px 28px;
  border: var(--bw-md) solid var(--pixel-black);
  background: #ff7700;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  font-family: var(--font-ui-zh);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.18);
  transition: background 0.15s, transform 0.1s;
}
.end-cta-btn:hover {
  background: #ff9922;
  transform: translateY(-2px);
}
.end-cta-btn.is-secondary {
  background: #fff4d8;
  color: #6f3111;
  font-size: 14px;
  padding: 11px 22px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.15);
}
.end-cta-btn.is-secondary:hover {
  background: #ffe8bf;
}

.end-cta-btn:not(.is-secondary) {
  animation: ctaPulse 1.5s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 4px 4px 0 rgba(0,0,0,0.18), 0 0 0 rgba(255,145,0,0); }
  50% { box-shadow: 4px 4px 0 rgba(0,0,0,0.18), 0 0 20px rgba(255,145,0,0.35); }
}

/* ===== Narrative Bar (in-game story overlay) ===== */
.narrative-bar {
  position: absolute;
  top: 20px;
  left: 5%;
  right: 5%;
  z-index: 16;
  padding: 10px 16px 10px 20px;
  border-left: 5px solid var(--fox-main);
  background: rgba(10, 8, 14, 0.78);
  color: #fff7ef;
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 800;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 320ms ease, transform 320ms ease;
  backdrop-filter: blur(3px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.24);
}

.narrative-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Confirm Modal (pixel-style replacement for window.confirm) ===== */
.confirm-modal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 22;
  background: rgba(16, 10, 6, 0.52);
}

.confirm-modal.is-visible {
  display: flex;
}

.confirm-modal-shell {
  width: min(420px, calc(100% - 60px));
  padding: 24px 26px 22px;
  border: 6px solid var(--pixel-black);
  background: linear-gradient(180deg, #fff6e4 0%, #ffe8c4 100%);
  box-shadow: 10px 10px 0 rgba(0,0,0,0.18);
  text-align: center;
}

.confirm-modal-text {
  margin: 0 0 18px;
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 900;
  color: #2a1a10;
  line-height: 1.5;
}

.confirm-modal-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.confirm-modal-btn {
  min-width: 120px;
  padding: 10px 18px;
  border: 4px solid var(--pixel-black);
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.14);
  transition: transform 0.1s, box-shadow 0.1s;
}

.confirm-modal-btn:active {
  transform: translateY(2px);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.14);
}

.confirm-modal-btn.is-cancel {
  background: var(--mint);
  color: #fff;
  border-color: var(--mint-dark);
}

.confirm-modal-btn.is-ok {
  background: #ff7700;
  color: #fff;
}

/* ===== Stage 3 Business Choice Modal ===== */
.business-choice-modal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 23;
  background: rgba(18, 12, 26, 0.58);
}

.business-choice-modal.is-visible {
  display: flex;
}

.business-choice-shell {
  width: min(680px, calc(100% - 56px));
  border: 6px solid var(--pixel-black);
  background: linear-gradient(180deg, #fff8e8 0%, #ffeacc 100%);
  box-shadow: 10px 10px 0 rgba(0,0,0,0.18);
  padding: 22px 22px 20px;
  display: grid;
  gap: 10px;
}

.business-choice-kicker {
  margin: 0;
  font-size: 12px;
  letter-spacing: 1.4px;
  font-weight: 900;
  color: #8f4e1c;
}

.business-choice-title {
  margin: 0;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.2;
  color: #2a1b12;
}

.business-choice-subtitle {
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  color: #52392a;
  line-height: 1.45;
  font-weight: 700;
}

.business-choice-grid {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.business-choice-item {
  border: 4px solid var(--pixel-black);
  background: #fff4d8;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.14);
  padding: 12px 10px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  display: grid;
  gap: 5px;
}

.business-choice-item:hover,
.business-choice-item:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.04);
  outline: none;
}

.business-choice-item strong {
  font-size: clamp(14px, 1.1vw, 16px);
  color: #2a1b12;
}

.business-choice-item span {
  font-size: clamp(12px, 0.95vw, 14px);
  line-height: 1.35;
  color: #5b4332;
  font-weight: 700;
}

.business-choice-item[data-business="inputKey"] {
  border-color: #3e78de;
}

.business-choice-item[data-business="gameToken"] {
  border-color: #de5f3e;
}

.business-choice-item[data-business="videoClip"] {
  border-color: #8f5cdb;
}

/* ===== Obstacle visibility improvements ===== */
.obstacle {
  border: 2px solid rgba(255, 80, 80, 0.6);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
  text-shadow: 0 0 8px rgba(255, 60, 60, 0.6);
}

.obstacle::before {
  content: "⚠";
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  opacity: 0.7;
  animation: warningBlink 0.6s ease infinite;
}

@keyframes warningBlink {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.2; }
}

/* ===== Hit flash (screen edge red) ===== */
.runner-stage.is-hit-flash::after {
  box-shadow: inset 0 0 40px rgba(255, 40, 40, 0.35);
  transition: box-shadow 0.3s ease;
}

/* ===== Mission panel ready state ===== */
.stage-mission.is-chest-ready {
  border-color: var(--fox-main);
  animation: missionReadyPulse 1.2s ease-in-out infinite;
}

@keyframes missionReadyPulse {
  0%, 100% { box-shadow: 8px 8px 0 rgba(0,0,0,0.14); }
  50% { box-shadow: 8px 8px 0 rgba(0,0,0,0.14), 0 0 18px rgba(249, 124, 8, 0.3); }
}

/* ===== Narrative window slowdown indicator ===== */
.runner-stage.is-narrative-window .runner-world {
  transition: filter 0.4s ease;
}

/* ===== Stage transition pixel wipe ===== */
.runner-stage.is-stage-transition {
  animation: stagePixelWipe 600ms ease;
}

@keyframes stagePixelWipe {
  0% { clip-path: circle(0% at 50% 50%); }
  100% { clip-path: circle(100% at 50% 50%); }
}

/* ===== Card modal improved (from chest position, not full-screen) ===== */
.card-modal-shell {
  width: min(620px, calc(100% - 80px));
  animation: cardSlideUp 380ms ease;
}

@keyframes cardSlideUp {
  from { opacity: 0; transform: translateY(40px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.card-modal.is-visible {
  background: rgba(32, 16, 10, 0.3);
}

/* ===== End screen review section ===== */
.end-review {
  position: absolute;
  left: 28px;
  top: 32%;
  width: min(320px, 30vw);
  max-height: 44vh;
  overflow-y: auto;
  z-index: 9;
  display: grid;
  gap: 8px;
}

.end-review-card {
  padding: 10px 14px;
  border: 3px solid var(--pixel-black);
  background: rgba(255, 246, 230, 0.9);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateX(-20px);
  animation: endReviewSlideIn 0.4s ease forwards;
}

.end-review-card:nth-child(1) { animation-delay: 0.3s; }
.end-review-card:nth-child(2) { animation-delay: 0.6s; }
.end-review-card:nth-child(3) { animation-delay: 0.9s; }
.end-review-card:nth-child(4) { animation-delay: 1.2s; }
.end-review-card:nth-child(5) { animation-delay: 1.5s; }

@keyframes endReviewSlideIn {
  to { opacity: 1; transform: translateX(0); }
}

.end-review-card strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: #8d4d1d;
  margin-bottom: 3px;
}

.end-review-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  color: #2f2118;
}

/* ===== Collectible color-coded borders (Stage 3) ===== */
.collectible-inputKey {
  border: 2px solid #4488ff;
  border-radius: 4px;
  background: rgba(68, 136, 255, 0.15);
}
.collectible-gameToken {
  border: 2px solid #ff5555;
  border-radius: 4px;
  background: rgba(255, 85, 85, 0.15);
}
.collectible-videoClip {
  border: 2px solid #aa66ff;
  border-radius: 4px;
  background: rgba(170, 102, 255, 0.15);
}

/* ===== Stage 3 border flash on collectible type ===== */
.runner-stage.is-flash-blue { box-shadow: inset 0 0 28px rgba(68, 136, 255, 0.35); }
.runner-stage.is-flash-red { box-shadow: inset 0 0 28px rgba(255, 85, 85, 0.35); }
.runner-stage.is-flash-purple { box-shadow: inset 0 0 28px rgba(170, 102, 255, 0.35); }

/* ===== Light collect glow effect (Stage 4) ===== */
.light-glow-effect {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,200,0.5) 0%, transparent 70%);
  pointer-events: none;
  z-index: 7;
  animation: lightGlowFade 0.8s ease forwards;
}

@keyframes lightGlowFade {
  from { opacity: 1; transform: scale(0.6); }
  to { opacity: 0; transform: scale(1.8); }
}

/* ===== End screen entry animation ===== */
.end-overlay.is-visible {
  animation: endScreenFadeIn 0.6s ease;
}

@keyframes endScreenFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 1100px) {
  .end-review {
    left: 14px;
    width: min(280px, 38vw);
    top: 28%;
  }
}

@media (max-width: 768px) {
  .business-choice-grid {
    grid-template-columns: 1fr;
  }

  .narrative-bar {
    top: 12px;
    left: 3%;
    right: 3%;
    font-size: clamp(11px, 2.8vw, 14px);
    padding: 8px 12px 8px 16px;
  }
  .end-review {
    display: none;
  }
}