:root {
  --bg: #fff7df;
  --ink: #243044;
  --muted: #667085;
  --panel: #ffffff;
  --line: #d9e1f2;
  --red: #ff5b6e;
  --red-dark: #d72f45;
  --blue: #3d8bff;
  --green: #24b47e;
  --yellow: #ffd45d;
  --orange: #ff9f43;
  --purple: #8a5cf6;
  --shadow: 0 16px 36px rgba(36, 48, 68, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 212, 93, 0.34), transparent 24rem),
    radial-gradient(circle at 88% 16%, rgba(61, 139, 255, 0.2), transparent 22rem),
    linear-gradient(180deg, #fff8e8 0%, #e7f5ff 100%);
}

button,
input {
  font: inherit;
}

button {
  touch-action: manipulation;
}

.app-shell {
  width: min(1180px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  padding: 14px;
}

.top-bar,
.bottom-bar,
.progress-panel {
  background: rgba(255, 255, 255, 0.86);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.top-bar {
  min-height: 74px;
  border-radius: 22px;
  padding: 10px;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 10px;
}

.brand-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: linear-gradient(145deg, #ff7887, #ff304d);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12);
}

h1,
h2,
h3,
p {
  margin: 0;
}

.brand-block h1 {
  font-size: clamp(21px, 4.6vw, 34px);
  line-height: 1.05;
  letter-spacing: 0;
}

.brand-block p,
.level-meta span,
.helper-text {
  color: var(--muted);
}

.icon-button,
.primary-button,
.secondary-button,
.answer-button,
.blood-bag,
.small-button {
  border: 0;
  cursor: pointer;
  color: var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.icon-button {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  font-size: 28px;
  background: #eef6ff;
  box-shadow: inset 0 -4px 0 rgba(36, 48, 68, 0.08);
}

.primary-button,
.secondary-button,
.small-button {
  min-height: 46px;
  border-radius: 16px;
  padding: 0 18px;
  font-weight: 800;
}

.primary-button {
  background: var(--green);
  color: #fff;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.14);
}

.secondary-button,
.small-button {
  background: #eef6ff;
  box-shadow: inset 0 -4px 0 rgba(36, 48, 68, 0.08);
}

button:hover,
button:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.03);
}

button:focus-visible {
  outline: 4px solid rgba(61, 139, 255, 0.36);
  outline-offset: 3px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

.progress-panel {
  border-radius: 18px;
  padding: 14px;
}

.level-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.progress-track {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef9;
}

.progress-fill {
  height: 100%;
  width: 11.11%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow));
  transition: width 300ms ease;
}

.stage {
  min-height: 560px;
  display: grid;
}

.level-screen {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 18px;
  align-items: stretch;
  animation: fadeIn 360ms ease both;
}

.story-panel,
.activity-panel,
.wide-panel {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 28px);
  animation: popIn 360ms ease both;
}

.wide-panel {
  display: grid;
  gap: 18px;
}

.story-panel {
  display: grid;
  gap: 18px;
  align-content: start;
}

.story-panel h2,
.wide-panel h2 {
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.08;
  letter-spacing: 0;
}

.story-panel p,
.wide-panel p,
.activity-panel p {
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.6;
}

.scene {
  min-height: 230px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, #a7e5ff 0%, #e8fbff 56%, #8bd66b 57%, #66be57 100%);
}

.scene.hospital {
  background:
    linear-gradient(180deg, #b7e7ff 0%, #f2fbff 54%, #d9f0ff 54%, #d9f0ff 100%);
}

.scene.kingdom {
  background:
    linear-gradient(180deg, #dff5ff 0%, #fff1b8 100%);
}

.kid,
.doctor,
.castle,
.checkpoint {
  position: absolute;
}

.kid {
  left: 13%;
  bottom: 23%;
}

.doctor {
  right: 14%;
  bottom: 22%;
}

.person {
  width: 82px;
  height: 118px;
  position: relative;
}

.person::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffd2a3;
  box-shadow: inset -6px -5px 0 rgba(0, 0, 0, 0.08);
}

.person::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 0;
  width: 62px;
  height: 76px;
  border-radius: 26px 26px 16px 16px;
  background: var(--blue);
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.12);
}

.doctor::after {
  background: #fff;
}

.speech {
  position: absolute;
  left: 50%;
  top: 16px;
  width: min(78%, 360px);
  transform: translateX(-50%);
  padding: 12px 16px;
  border-radius: 18px;
  background: #fff;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 8px 18px rgba(36, 48, 68, 0.12);
}

.activity-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}

.answer-grid,
.blood-grid,
.family-grid,
.police-grid,
.card-grid,
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.answer-button {
  min-height: 92px;
  border-radius: 22px;
  padding: 16px;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 900;
  text-align: left;
  background: #fff2c2;
  box-shadow: inset 0 -6px 0 rgba(36, 48, 68, 0.08);
}

.answer-button.correct {
  background: #c9f7df;
  animation: celebrate 520ms ease both;
}

.answer-button.wrong {
  background: #ffd6dc;
  animation: shake 320ms ease both;
}

.rbc {
  --badge-bg: #ffffff;
  width: 94px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  color: #fff;
  font-weight: 1000;
  font-size: 24px;
  background:
    radial-gradient(circle at 48% 46%, rgba(255, 255, 255, 0.45) 0 12%, transparent 13%),
    radial-gradient(circle at 50% 50%, #ff8794 0 38%, #ff5268 39% 100%);
  box-shadow: inset -10px -8px 0 rgba(166, 27, 44, 0.22), 0 8px 18px rgba(215, 47, 69, 0.22);
}

.rbc::after {
  content: attr(data-badge);
  position: absolute;
  right: -7px;
  top: -8px;
  min-width: 31px;
  height: 31px;
  padding: 0 4px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--badge-bg);
  color: var(--ink);
  border: 3px solid #fff;
  font-size: 15px;
  box-shadow: 0 4px 10px rgba(36, 48, 68, 0.18);
}

.rbc[data-badge=""]::after {
  content: "无";
}

.rbc-runner {
  animation: floatTruck 2.2s ease-in-out infinite;
}

.badge-demo {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.family-card,
.drop-zone,
.police-card,
.blood-card,
.parent-card,
.quiz-card {
  border: 3px solid var(--line);
  border-radius: 22px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 10px 22px rgba(36, 48, 68, 0.08);
}

.family-card,
.drop-zone {
  min-height: 160px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
}

.family-card strong,
.drop-zone strong,
.police-card strong,
.blood-card strong {
  font-size: 24px;
}

.draggable {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.draggable.dragging {
  opacity: 0.64;
  cursor: grabbing;
}

.draggable.selected {
  outline: 5px solid rgba(255, 212, 93, 0.86);
  outline-offset: 5px;
  animation: celebrate 520ms ease both;
}

.drop-zone.over {
  border-color: var(--green);
  background: #edfff6;
}

.drop-zone.done {
  border-color: var(--green);
}

.feedback {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #eef6ff;
  font-weight: 800;
}

.feedback.good {
  background: #d8f8e8;
  color: #08734d;
  animation: celebrate 520ms ease both;
}

.feedback.bad {
  background: #ffe2e6;
  color: #9c1d30;
  animation: shake 320ms ease both;
}

.police-card {
  display: grid;
  gap: 12px;
  cursor: pointer;
}

.police-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.police-chip,
.badge-chip {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 900;
  background: #eef6ff;
}

.police-chip {
  background: #22304a;
  color: #fff;
}

.blood-bag {
  min-height: 116px;
  border-radius: 22px;
  padding: 14px;
  display: grid;
  place-items: center;
  gap: 6px;
  background: #fff;
  border: 3px solid #ffd6dc;
  font-weight: 900;
  box-shadow: inset 0 -7px 0 rgba(215, 47, 69, 0.08);
}

.bag-icon {
  width: 54px;
  height: 72px;
  border-radius: 10px 10px 18px 18px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 24px;
  background: linear-gradient(180deg, #ff8794, #d72f45);
  position: relative;
}

.bag-icon::before {
  content: "";
  position: absolute;
  top: -14px;
  width: 28px;
  height: 16px;
  border-radius: 8px 8px 0 0;
  background: #f5f7fb;
  border: 3px solid #ffd6dc;
}

.challenge-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 18px;
  background: #fff7df;
  font-weight: 900;
}

.mini-game {
  min-height: 260px;
  border-radius: 22px;
  background: linear-gradient(180deg, #bdefff 0%, #fff3bd 100%);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 18px;
}

.gate {
  width: min(86%, 460px);
  height: 132px;
  border: 8px solid #38425c;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.35);
  font-weight: 1000;
}

.runner-path {
  position: absolute;
  left: 0;
  bottom: 42px;
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
}

.runner-path .rbc {
  margin-left: 8%;
}

.runner-path.go .rbc {
  animation: passGate 1.8s ease-in-out both;
}

.ab-demo {
  min-height: 240px;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #eaf7ff, #fff);
}

.body-zone {
  width: min(78%, 370px);
  min-height: 150px;
  border: 5px dashed #90caf9;
  border-radius: 42px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.68);
  font-size: 28px;
  font-weight: 1000;
}

.incoming-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.parent-card,
.blood-card {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.parent-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.result-box {
  padding: 14px;
  border-radius: 18px;
  background: #fff7df;
  font-size: 20px;
  font-weight: 900;
}

.quiz-card {
  display: grid;
  gap: 12px;
}

.quiz-options {
  display: grid;
  gap: 10px;
}

.quiz-question {
  font-size: 20px;
  font-weight: 900;
}

.medal {
  width: min(210px, 60vw);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  color: #5b3b00;
  font-size: 24px;
  font-weight: 1000;
  background:
    radial-gradient(circle at 35% 25%, #fff9cf 0 14%, transparent 15%),
    linear-gradient(145deg, #ffe986, #ffbd35);
  border: 10px solid #fff2b2;
  box-shadow: 0 18px 34px rgba(255, 159, 67, 0.35), inset 0 -12px 0 rgba(170, 112, 0, 0.16);
  animation: medalSpin 850ms ease both;
}

.bottom-bar {
  min-height: 70px;
  border-radius: 22px;
  padding: 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

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

.dot {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #c8d4e8;
  cursor: pointer;
}

.dot.active {
  background: var(--red);
  transform: scale(1.22);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 20;
  max-width: min(92vw, 520px);
  transform: translate(-50%, 20px);
  padding: 14px 18px;
  border-radius: 18px;
  color: #fff;
  background: rgba(36, 48, 68, 0.94);
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

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

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

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes floatTruck {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}

@keyframes celebrate {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.06) rotate(-1deg);
  }
  72% {
    transform: scale(1.03) rotate(1deg);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px);
  }
  55% {
    transform: translateX(8px);
  }
  78% {
    transform: translateX(-4px);
  }
}

@keyframes passGate {
  0% {
    transform: translateX(0) scale(1);
  }
  55% {
    transform: translateX(44vw) scale(1.04);
  }
  100% {
    transform: translateX(76vw) scale(0.95);
  }
}

@keyframes medalSpin {
  from {
    transform: scale(0.4) rotate(-16deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

@media (max-width: 860px) {
  .app-shell {
    padding: 10px;
  }

  .level-screen {
    grid-template-columns: 1fr;
  }

  .stage {
    min-height: auto;
  }

  .bottom-bar {
    grid-template-columns: 1fr 1fr;
  }

  .dot-map {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 560px) {
  .top-bar {
    grid-template-columns: 44px 1fr 44px;
    border-radius: 18px;
  }

  .brand-mark {
    display: none;
  }

  .brand-block {
    justify-content: flex-start;
  }

  .brand-block h1 {
    font-size: 22px;
  }

  .brand-block p {
    font-size: 12px;
  }

  .icon-button {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 24px;
  }

  .answer-grid,
  .blood-grid,
  .family-grid,
  .police-grid,
  .card-grid,
  .quiz-grid,
  .parent-pair {
    grid-template-columns: 1fr;
  }

  .scene {
    min-height: 210px;
  }

  .story-panel,
  .activity-panel,
  .wide-panel {
    border-radius: 18px;
    padding: 16px;
  }

  .primary-button,
  .secondary-button {
    width: 100%;
  }
}