:root {
  --ink: #29334a;
  --cream: #fffaf0;
  --orange: #ff8f51;
  --orange-dark: #dc6036;
  --orange-soft: #fff0d8;
  --blue: #56a9df;
  --blue-dark: #2776ad;
  --blue-soft: #e7f7ff;
  --green: #47b980;
  --yellow: #ffd460;
  --shadow: 0 16px 38px rgba(57, 55, 78, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", "Arial Rounded MT Bold", sans-serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.95) 0 22%, transparent 45%),
    linear-gradient(180deg, #bfeaff 0%, #e8f8ff 38%, #fff8db 100%);
}

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

.sky-decor { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.cloud { position: absolute; color: rgba(255,255,255,.82); filter: drop-shadow(0 8px 8px rgba(66,120,155,.08)); }
.cloud-one { top: 5%; left: 4%; font-size: clamp(80px, 11vw, 150px); animation: drift 18s ease-in-out infinite; }
.cloud-two { top: 13%; right: 2%; font-size: clamp(60px, 9vw, 120px); animation: drift 23s ease-in-out -5s infinite reverse; }
.leaf { position: absolute; font-size: 32px; opacity: .55; }
.leaf-one { bottom: 3%; left: 2%; transform: rotate(20deg); }
.leaf-two { top: 42%; right: 1%; transform: rotate(-25deg); }

.game-shell {
  position: relative;
  width: min(1440px, calc(100% - 32px));
  min-height: calc(100vh - 32px);
  margin: 16px auto;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: rgba(255,255,255,.78);
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 30px;
  box-shadow: 0 24px 60px rgba(55, 104, 134, .18);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px 24px;
  border-bottom: 2px dashed rgba(74,106,132,.14);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-badge {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  color: white; font-size: 25px; font-weight: 900;
  background: var(--orange);
  border: 3px solid white; border-radius: 17px 13px 18px 12px;
  box-shadow: 0 5px 0 var(--orange-dark);
  transform: rotate(-5deg);
}
.eyebrow { margin: 0 0 2px; color: #6c7890; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.brand h1 { margin: 0; font-family: "Microsoft YaHei", "Arial Rounded MT Bold", sans-serif; font-size: clamp(20px, 2vw, 29px); font-weight: 900; letter-spacing: .04em; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.round-pill { padding: 8px 15px; background: #fff4c9; color: #9d6b11; border: 2px solid #ffdf72; border-radius: 99px; font-size: 13px; font-weight: 900; }
.icon-button {
  width: 42px; height: 42px; border: 2px solid #dce7ee; border-radius: 14px;
  color: #56657a; background: white; font-size: 20px; font-weight: 900; cursor: pointer;
  box-shadow: 0 4px 0 #d9e3e9; transition: transform .15s, box-shadow .15s;
}
.icon-button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #d9e3e9; }
.icon-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9e3e9; }
.icon-button.muted { color: #a9b1bc; background: #f2f4f6; }

.question-banner { position: relative; padding: 15px 17% 14px; text-align: center; min-height: 124px; }
.difficulty-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 13px; color: white; border-radius: 99px; font-size: 12px; font-weight: 900; }
.difficulty-badge.easy { background: var(--green); }
.difficulty-badge.medium { background: #f29b38; }
.difficulty-badge.hard { background: #906ad3; }
.question-number { margin: 6px 0 3px; color: #8290a1; font-size: 12px; font-weight: 800; }
.question-banner h2 { margin: 0 auto; max-width: 960px; font-size: clamp(18px, 2.05vw, 28px); line-height: 1.42; }
.answer-reveal {
  position: absolute; z-index: 5; left: 50%; bottom: -15px; transform: translate(-50%, 8px) scale(.94);
  min-width: 210px; padding: 8px 18px; color: white; background: #2f3d54; border: 3px solid white;
  border-radius: 99px; box-shadow: 0 8px 18px rgba(41,51,74,.22); font-size: 13px; font-weight: 900;
  opacity: 0; pointer-events: none; transition: .25s;
}
.answer-reveal.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

.players-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.player-card { display: flex; flex-direction: column; min-width: 0; padding: 25px clamp(18px, 3vw, 46px) 22px; }
.player-one { background: linear-gradient(150deg, rgba(255,246,223,.88), rgba(255,225,198,.8)); border-radius: 0 28px 28px 0; }
.player-two { background: linear-gradient(210deg, rgba(238,250,255,.9), rgba(201,235,255,.78)); border-radius: 28px 0 0 28px; }
.player-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.player-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.player-identity h3 { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(19px, 2vw, 26px); }
.player-identity p { margin: 1px 0 0; color: #7a8797; font-size: 11px; }
.player-tag { display: grid; place-items: center; min-width: 41px; height: 32px; border-radius: 9px; color: white; font-size: 13px; font-weight: 900; transform: rotate(-4deg); }
.player-one .player-tag { background: var(--orange); box-shadow: 0 4px 0 var(--orange-dark); }
.player-two .player-tag { background: var(--blue); box-shadow: 0 4px 0 var(--blue-dark); transform: rotate(4deg); }
.score-box { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.score-box strong { font-size: clamp(31px, 4vw, 48px); line-height: 1; }
.player-one .score-box strong { color: var(--orange-dark); }
.player-two .score-box strong { color: var(--blue-dark); }
.score-box span { color: #84909c; font-size: 14px; }

.track-wrap { position: relative; height: 112px; margin: 11px 0 4px; }
.track-line { position: absolute; left: 24px; right: 35px; bottom: 21px; height: 12px; display: flex; align-items: center; justify-content: space-evenly; background: rgba(255,255,255,.7); border: 2px solid rgba(73,88,104,.13); border-radius: 99px; }
.track-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(76,90,109,.25); }
.finish-flag { position: absolute; z-index: 2; right: -2px; bottom: 19px; font-size: 28px; filter: drop-shadow(0 4px 2px rgba(56,65,77,.15)); }
.runner { position: absolute; z-index: 3; left: var(--progress); bottom: 20px; width: 66px; transform: translateX(0); transition: left .7s cubic-bezier(.2,1.4,.4,1); }
.runner-shadow { position: absolute; left: 9px; bottom: -3px; width: 53px; height: 12px; border-radius: 50%; background: rgba(52,61,74,.14); filter: blur(2px); }
.animal { position: relative; display: block; font-size: 59px; line-height: 1; filter: drop-shadow(0 5px 0 rgba(255,255,255,.8)); transform-origin: center bottom; }
.runner.running .animal { animation: hop .65s ease; }
.runner.winner .animal { animation: celebrate .65s ease-in-out infinite alternate; }
.runner-two .animal { transform: scaleX(-1); }
.runner-two.running .animal { animation: hop-flipped .65s ease; }
.runner-two.winner .animal { animation: celebrate-flipped .65s ease-in-out infinite alternate; }

.progress-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 0 0 8px; }
.progress-dot { height: 9px; border-radius: 99px; background: rgba(255,255,255,.76); border: 1px solid rgba(54,68,84,.12); transition: .35s; }
.player-one .progress-dot.filled { background: var(--orange); border-color: var(--orange); box-shadow: 0 2px 6px rgba(220,96,54,.26); }
.player-two .progress-dot.filled { background: var(--blue); border-color: var(--blue); box-shadow: 0 2px 6px rgba(39,118,173,.26); }
.player-status { height: 22px; margin: 3px 0 10px; color: #778496; text-align: center; font-size: 13px; font-weight: 900; }
.player-status.locked { color: #7d62bd; }
.player-status.correct { color: #238c5c; }
.player-status.wrong { color: #d25a4f; }

.answers { display: grid; gap: 10px; margin-top: auto; }
.answer-button {
  position: relative; width: 100%; min-height: 50px; padding: 10px 50px 10px 16px;
  border: 2px solid rgba(55,72,93,.12); border-radius: 16px; color: #374256; background: rgba(255,255,255,.93);
  text-align: left; font-size: clamp(13px, 1.22vw, 16px); font-weight: 900; line-height: 1.35; cursor: pointer;
  box-shadow: 0 5px 0 rgba(67,84,104,.13); transition: transform .14s, box-shadow .14s, border-color .14s;
}
.answer-button:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(69,147,195,.45); box-shadow: 0 7px 0 rgba(67,84,104,.13); }
.answer-button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 rgba(67,84,104,.13); }
.answer-button:disabled { cursor: default; opacity: .65; }
.answer-button.selected { opacity: 1; border-color: #8269c5; background: #f4efff; box-shadow: 0 4px 0 #c7bae8; }
.answer-button.correct-answer { opacity: 1; color: #167548; border-color: #53bd88; background: #e6fff2; box-shadow: 0 4px 0 #a7dfc2; }
.answer-button.wrong-answer { opacity: .72; color: #b04740; border-color: #e0837c; background: #fff0ef; box-shadow: 0 4px 0 #efb6b2; }
.key-hint { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: grid; place-items: center; width: 27px; height: 25px; color: #7d8794; background: #edf1f4; border-radius: 7px; box-shadow: 0 2px 0 #d5dde2; font-size: 11px; }
.answer-button.selected .key-hint { color: white; background: #8269c5; box-shadow: 0 2px 0 #5d4799; }
.versus-badge { position: absolute; z-index: 7; top: 42%; left: 50%; transform: translate(-50%,-50%) rotate(-6deg); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 58px; color: white; background: #303b53; border: 5px solid white; border-radius: 50%; box-shadow: 0 9px 0 rgba(41,51,74,.18); font-size: 16px; font-weight: 900; line-height: .88; }
.versus-badge span:last-child { margin-left: 10px; color: var(--yellow); }

.game-footer { display: flex; justify-content: space-between; gap: 20px; padding: 9px 24px; color: #6f7d8c; background: rgba(255,255,255,.75); border-top: 2px dashed rgba(74,106,132,.12); font-size: 11px; font-weight: 800; }

.modal-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(38,51,70,.42); backdrop-filter: blur(9px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.modal-backdrop.visible { opacity: 1; visibility: visible; }
.start-card, .result-card { position: relative; width: min(680px, 100%); max-height: calc(100vh - 30px); overflow: auto; padding: clamp(24px, 4vw, 42px); background: var(--cream); border: 5px solid white; border-radius: 31px; box-shadow: 0 24px 0 rgba(41,51,74,.14), 0 38px 70px rgba(41,51,74,.25); text-align: center; transform: translateY(20px) scale(.96); transition: transform .28s cubic-bezier(.2,1.3,.4,1); }
.modal-backdrop.visible .start-card, .modal-backdrop.visible .result-card { transform: translateY(0) scale(1); }
.start-card::before, .result-card::before { content: ""; position: absolute; inset: 10px; pointer-events: none; border: 2px dashed #f2d8a2; border-radius: 21px; }
.start-stickers { position: relative; display: flex; justify-content: center; gap: 22px; margin-bottom: 10px; font-size: 39px; }
.start-stickers span:nth-child(1) { transform: rotate(-9deg); }
.start-stickers span:nth-child(2) { transform: translateY(-10px); }
.start-stickers span:nth-child(3) { transform: rotate(9deg); }
.start-kicker, .result-kicker { position: relative; margin: 0 0 5px; color: var(--orange-dark); font-size: 12px; font-weight: 900; letter-spacing: .13em; }
.start-card h2, .result-card h2 { position: relative; margin: 0; font-family: "Microsoft YaHei", "Arial Rounded MT Bold", sans-serif; font-size: clamp(26px, 5vw, 39px); font-weight: 900; }
.start-copy { position: relative; max-width: 540px; margin: 11px auto 22px; color: #6c7686; font-size: 14px; line-height: 1.7; }
.team-setup { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.team-field { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 5px 10px; padding: 14px; border: 2px solid; border-radius: 20px; }
.orange-field { background: #fff1df; border-color: #ffc992; }
.blue-field { background: #eaf8ff; border-color: #a9dfff; }
.setup-label { grid-column: 1 / -1; justify-self: start; font-size: 11px; font-weight: 900; }
.animal-choice { grid-row: 2 / 4; font-size: 42px; }
.team-field input { min-width: 0; width: 100%; padding: 7px 9px; border: 2px solid rgba(63,73,86,.11); border-radius: 10px; color: var(--ink); background: white; font-weight: 900; outline: none; }
.team-field input:focus { border-color: #9274d2; }
.team-field small { justify-self: start; color: #87909c; font-size: 10px; }
.setup-vs { font-weight: 900; color: #7c8290; }
.difficulty-preview { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.preview-chip { padding: 5px 11px; color: white; border-radius: 99px; font-size: 11px; font-weight: 900; }
.easy-chip { background: var(--green); }.medium-chip { background: #f29b38; }.hard-chip { background: #906ad3; }
.preview-plus { color: #a9a29a; }.preview-note { margin-left: 7px; color: #8b8379; font-size: 11px; font-weight: 900; }
.start-button { position: relative; display: inline-flex; align-items: center; gap: 14px; min-width: 205px; padding: 14px 20px 14px 27px; border: 0; border-radius: 17px; color: white; background: linear-gradient(135deg, var(--orange), #ffb14e); box-shadow: 0 7px 0 var(--orange-dark), 0 13px 24px rgba(220,96,54,.22); font-size: 18px; font-weight: 900; cursor: pointer; transition: .15s; }
.start-button:hover { transform: translateY(-2px); box-shadow: 0 9px 0 var(--orange-dark), 0 15px 26px rgba(220,96,54,.24); }
.start-button:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--orange-dark); }
.start-button b { display: grid; place-items: center; width: 40px; height: 32px; color: var(--orange-dark); background: white; border-radius: 10px; font-size: 13px; }
.audio-note { position: relative; margin: 14px 0 0; color: #9a958b; font-size: 10px; }

.result-card { width: min(540px, 100%); overflow: hidden; }
.trophy { position: relative; font-size: 75px; animation: float 1.4s ease-in-out infinite alternate; }
.result-card > p:not(.result-kicker) { position: relative; margin: 11px 0; color: #6c7686; }
.result-scores { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 22px auto 25px; }
.result-scores div { padding: 13px; border-radius: 17px; background: #f5efe4; }
.result-scores span { display: block; overflow: hidden; color: #7b8290; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.result-scores strong { display: block; font-size: 37px; }
.result-scores em { font-style: normal; font-size: 28px; font-weight: 900; }
.replay-button { background: linear-gradient(135deg, #5abf88, #80d49f); box-shadow: 0 7px 0 #2f9661, 0 13px 24px rgba(47,150,97,.22); }
.replay-button:hover { box-shadow: 0 9px 0 #2f9661, 0 15px 26px rgba(47,150,97,.23); }
.replay-button:active { box-shadow: 0 2px 0 #2f9661; }
.replay-button b { color: #278253; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; width: 10px; height: 18px; border-radius: 3px; animation: confetti 2.2s linear infinite; }
.confetti i:nth-child(1) { left: 8%; background: #ff795e; animation-delay: -.2s; }.confetti i:nth-child(2) { left: 19%; background: #ffd35b; animation-delay: -1.4s; }.confetti i:nth-child(3) { left: 31%; background: #5bbcdf; animation-delay: -.8s; }.confetti i:nth-child(4) { left: 45%; background: #906ad3; animation-delay: -1.8s; }.confetti i:nth-child(5) { left: 58%; background: #50bd83; animation-delay: -.4s; }.confetti i:nth-child(6) { left: 70%; background: #ff795e; animation-delay: -1.1s; }.confetti i:nth-child(7) { left: 82%; background: #ffd35b; animation-delay: -.6s; }.confetti i:nth-child(8) { left: 91%; background: #5bbcdf; animation-delay: -1.7s; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 25px; transform: translate(-50%, 20px); padding: 10px 18px; color: white; background: #303b53; border-radius: 99px; box-shadow: var(--shadow); font-size: 13px; font-weight: 900; opacity: 0; pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes drift { 50% { transform: translateX(35px) translateY(10px); } }
@keyframes hop { 35% { transform: translateY(-16px) rotate(-7deg); } 70% { transform: translateY(0) rotate(5deg); } }
@keyframes hop-flipped { 35% { transform: scaleX(-1) translateY(-16px) rotate(-7deg); } 70% { transform: scaleX(-1) translateY(0) rotate(5deg); } }
@keyframes celebrate { to { transform: translateY(-13px) rotate(8deg) scale(1.08); } }
@keyframes celebrate-flipped { to { transform: scaleX(-1) translateY(-13px) rotate(8deg) scale(1.08); } }
@keyframes float { to { transform: translateY(-8px) rotate(4deg); } }
@keyframes confetti { from { top: -25px; transform: rotate(0); } to { top: 110%; transform: rotate(540deg); } }

@media (max-width: 850px) {
  .game-shell { width: calc(100% - 16px); min-height: calc(100vh - 16px); margin: 8px auto; border-radius: 22px; }
  .game-header { padding: 12px 14px; }.brand-badge { width: 42px; height: 42px; }.eyebrow { display: none; }
  .round-pill { display: none; }.question-banner { padding: 13px 9% 12px; min-height: 116px; }
  .player-card { padding: 22px 13px 17px; }.player-identity p { display: none; }.track-wrap { height: 96px; }
  .animal { font-size: 50px; }.runner { width: 56px; }.answer-button { padding-left: 11px; font-size: 12px; }
  .versus-badge { width: 48px; height: 48px; border-width: 4px; font-size: 13px; }
}

@media (max-width: 600px) {
  body { overflow: auto; }.game-shell { min-height: auto; }
  .brand h1 { font-size: 18px; }.brand-badge { display: none; }.icon-button { width: 38px; height: 38px; }
  .question-banner { padding-inline: 14px; }.question-banner h2 { font-size: 17px; }
  .players-grid { grid-template-columns: 1fr; }.player-one, .player-two { border-radius: 0; }
  .player-two { border-top: 3px solid white; }.versus-badge { top: 50%; }
  .player-card { min-height: 410px; }.track-wrap { height: 90px; }.game-footer { flex-direction: column; gap: 3px; }
  .team-setup { grid-template-columns: 1fr; }.setup-vs { margin: -4px 0; }.start-card { padding: 24px 18px; }
  .start-copy { font-size: 12px; }.team-field { grid-template-columns: auto 1fr; }.difficulty-preview { margin: 13px 0; }
}

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