/* ===== 赛罗英语乐园 · 样式 ===== */
:root {
  --blue: #2E86DE;
  --blue-dark: #1B5FA8;
  --red: #E74C3C;
  --red-dark: #B03A2E;
  --silver: #E8ECF2;
  --ink: #233240;
  --bg: #EAF3FF;
  --card: #FFFFFF;
  --radius: 18px;
  --shadow: 0 6px 18px rgba(30, 80, 160, .16);
  --shadow-sm: 0 3px 10px rgba(30, 80, 160, .12);
  --font: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; }
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(46,134,222,.18), transparent 32%),
    radial-gradient(circle at 88% 4%, rgba(231,76,60,.12), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(29,209,161,.10), transparent 40%),
    var(--bg);
  min-height: 100vh;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 12px calc(env(safe-area-inset-bottom) + 28px);
  touch-action: manipulation;
}
#app { position: relative; }

/* ===== 顶栏 ===== */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 6px 10px;
  position: relative;
}
.mascot-box { position: relative; flex: 0 0 auto; }
#mascot { width: 84px; height: 84px; filter: drop-shadow(0 4px 8px rgba(30,80,160,.25)); }
#mascot.speaking { animation: mascot-bob .5s ease-in-out infinite alternate; }
@keyframes mascot-bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-6px) rotate(2deg); } }
.bubble {
  position: absolute; top: -6px; left: 74px; z-index: 5;
  background: #fff; color: var(--blue-dark);
  font-size: .82rem; font-weight: 700;
  padding: 6px 10px; border-radius: 12px 12px 12px 3px;
  box-shadow: var(--shadow-sm);
  max-width: 210px; white-space: nowrap;
  animation: bubble-pop .3s ease;
}
.bubble::before {
  content: ""; position: absolute; left: -6px; top: 14px;
  border: 6px solid transparent; border-right-color: #fff; border-left: 0;
}
@keyframes bubble-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.title-box { flex: 1; min-width: 0; }
.title-box h1 {
  font-size: 1.45rem; font-weight: 900;
  background: linear-gradient(135deg, var(--red), var(--blue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 1px;
}
.subtitle { font-size: .8rem; color: #5b6f85; margin-top: 2px; }
.header-actions { flex: 0 0 auto; }
.icon-btn {
  width: 44px; height: 44px; border: none; border-radius: 14px;
  background: #fff; font-size: 1.25rem;
  box-shadow: var(--shadow-sm); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:active { transform: scale(.92); }

/* ===== 视图切换 ===== */
.view { animation: view-in .28s ease; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== 主页 ===== */
.hero-text { font-size: 1.05rem; font-weight: 800; color: var(--blue-dark); text-align: center; margin: 8px 0 14px; }
.theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.theme-card {
  background: var(--card); border-radius: var(--radius);
  padding: 16px 10px; text-align: center; cursor: pointer;
  box-shadow: var(--shadow); border: none;
  transition: transform .15s ease;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.theme-card:active { transform: scale(.94); }
.theme-emoji { font-size: 2.4rem; line-height: 1.2; }
.theme-name { font-size: 1rem; font-weight: 800; }
.theme-meta { font-size: .74rem; color: #6b7f95; }
.theme-bar {
  height: 8px; width: 88%; border-radius: 5px; background: #EDF1F6;
  overflow: hidden; margin-top: 2px;
}
.theme-bar > i { display: block; height: 100%; border-radius: 5px; transition: width .4s ease; }
.big-btn {
  display: block; width: 100%; border: none; cursor: pointer;
  font-family: var(--font); font-size: 1.05rem; font-weight: 800;
  color: #fff; border-radius: 16px; padding: 15px;
  background: linear-gradient(135deg, var(--red), #F06292);
  box-shadow: 0 6px 16px rgba(231,76,60,.35);
}
.big-btn:active { transform: scale(.97); }
.quiz-all { margin-top: 18px; }
.home-stats { text-align: center; font-size: .8rem; color: #6b7f95; margin-top: 14px; }

/* ===== 卡片页 ===== */
.deck-head { display: flex; align-items: center; gap: 10px; padding: 8px 0 10px; }
.deck-head h2 { font-size: 1.3rem; font-weight: 900; }
.deck-sub { font-size: .78rem; color: #6b7f95; }
.deck-tools { display: flex; gap: 8px; margin-bottom: 14px; }
.tool-btn {
  flex: 1; border: none; cursor: pointer;
  font-family: var(--font); font-size: .9rem; font-weight: 800;
  color: var(--blue-dark); background: #fff;
  padding: 11px 6px; border-radius: 13px; box-shadow: var(--shadow-sm);
}
.tool-btn:active { transform: scale(.95); }
.tool-btn.active { background: var(--blue); color: #fff; }

.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}
.card { perspective: 900px; cursor: pointer; }
.card-inner {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,.7,.3,1);
}
.card.flipped .card-inner { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow);
  background: var(--card); overflow: hidden;
  display: flex; flex-direction: column;
}
.card-front { padding: 8px 8px 4px; }
.card-front .img-wrap {
  flex: 1; min-height: 0; border-radius: 13px; overflow: hidden;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.card-front img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .2s ease;
}
.card.flipped .card-front img { transform: scale(1.05); }
.card-front .word-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 4px 2px; gap: 4px;
}
.img-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.4rem; line-height: 1;
}
.img-fallback.big { font-size: 4.6rem; }
.card-front .word {
  font-size: 1.12rem; font-weight: 900; letter-spacing: .5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.speak-btn {
  border: none; background: linear-gradient(135deg, var(--blue), #5FA8EE);
  color: #fff; width: 34px; height: 34px; border-radius: 50%;
  font-size: .95rem; cursor: pointer; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.speak-btn:active { transform: scale(.88); }
.learned-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: 1.15rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
  display: none;
}
.card.learned .learned-badge { display: block; }

.card-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #ffffff, #f2f7ff);
  padding: 12px; align-items: stretch;
}
.card-back .ipa {
  font-size: 1.05rem; color: var(--blue-dark); font-weight: 700;
  text-align: center; margin-top: 4px;
}
.card-back .zh { font-size: 1.25rem; font-weight: 900; text-align: center; margin: 3px 0; }
.card-back .ex { font-size: .86rem; text-align: center; color: #40536a; margin-top: 2px; line-height: 1.35; }
.card-back .ex-zh { font-size: .76rem; text-align: center; color: #8a99ab; margin-top: 2px; }
.card-back .back-btns { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.btn-say, .btn-learn {
  border: none; cursor: pointer; font-family: var(--font);
  font-size: .88rem; font-weight: 800; border-radius: 12px; padding: 10px 4px;
}
.btn-say { background: linear-gradient(135deg, var(--red), #F06292); color: #fff; box-shadow: 0 4px 10px rgba(231,76,60,.3); }
.btn-learn { background: #fff; color: var(--blue-dark); box-shadow: var(--shadow-sm); border: 2px solid #D7E5F5; }
.btn-learn.learned { background: #FFF3D6; border-color: #FFC94D; color: #B07E00; }
.card-back .tip { font-size: .7rem; text-align: center; color: #aab6c4; margin-top: 6px; }
.deck-footer-space { height: 20px; }

/* ===== 测验页 ===== */
.quiz-stage { margin-top: 6px; }
.quiz-ask { text-align: center; padding: 10px 0 14px; }
.quiz-tip { font-size: 1rem; font-weight: 800; color: var(--blue-dark); display: block; margin-bottom: 10px; }
.big-sound-btn {
  border: none; cursor: pointer; font-family: var(--font);
  font-size: 1.1rem; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--blue), #5FA8EE);
  padding: 14px 26px; border-radius: 40px; box-shadow: 0 6px 16px rgba(46,134,222,.35);
}
.big-sound-btn:active { transform: scale(.94); }
.quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.quiz-opt {
  border: 4px solid #fff; border-radius: var(--radius); background: #fff;
  box-shadow: var(--shadow-sm); cursor: pointer; overflow: hidden;
  padding: 10px 10px 8px; font-family: var(--font); text-align: center;
}
.quiz-opt:active { transform: scale(.95); }
.quiz-opt img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: #fff; }
.quiz-opt .opt-word { font-size: .95rem; font-weight: 800; margin-top: 6px; }
.quiz-opt.correct { border-color: #27AE60; background: #EAFBF0; animation: pop .35s ease; }
.quiz-opt.wrong { border-color: var(--red); background: #FDECEA; animation: shake .4s ease; }
.quiz-opt.disabled { pointer-events: none; }
@keyframes pop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.quiz-feedback { text-align: center; font-size: 1.05rem; font-weight: 800; margin-top: 16px; min-height: 30px; }
.quiz-feedback.good { color: #27AE60; }
.quiz-feedback.bad { color: var(--red); }
#btnQuizNext { margin-top: 14px; }

/* ===== 设置弹窗 ===== */
.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 35, 65, .5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal[hidden] { display: none; }
.modal-card {
  background: #fff; border-radius: 22px; padding: 20px; width: 100%; max-width: 400px;
  box-shadow: 0 18px 50px rgba(0,0,0,.3);
  display: flex; flex-direction: column; gap: 14px;
}
.modal-card h3 { font-size: 1.2rem; font-weight: 900; text-align: center; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .92rem; font-weight: 600; color: #40536a;
}
.setting-row select {
  font-family: var(--font); font-size: .9rem; padding: 8px 10px;
  border-radius: 10px; border: 2px solid #D7E5F5; background: #fff; color: var(--ink);
}
.danger-btn {
  border: none; background: #FDECEA; color: var(--red); font-weight: 800;
  padding: 8px 14px; border-radius: 10px; cursor: pointer; font-family: var(--font);
}

/* ===== 彩带 ===== */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.confetti {
  position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 3px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: .7; }
}

/* ===== 音频播放中卡片高亮 ===== */
.card.speaking .card-inner { box-shadow: 0 0 0 4px rgba(46,134,222,.35); }

/* ===== 平板适配 ===== */
@media (min-width: 640px) {
  .theme-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  #mascot { width: 96px; height: 96px; }
  .title-box h1 { font-size: 1.7rem; }
}

/* ===== 酷炫背景光效 ===== */
body::before {
  content: ""; position: fixed; inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(46,134,222,.22), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(231,76,60,.16), transparent 40%),
    radial-gradient(circle at 60% 20%, rgba(241,196,15,.10), transparent 35%);
  animation: bg-drift 18s ease-in-out infinite alternate;
  z-index: -1; pointer-events: none;
}
@keyframes bg-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
.big-btn.battle-all {
  margin-top: 10px;
  background: linear-gradient(135deg, #8E2DE2, #4A00E0);
  box-shadow: 0 6px 18px rgba(74,0,224,.4);
}

/* ===== 全屏学习模式 ===== */
#view-learn {
  position: fixed; inset: 0; z-index: 40;
  background: linear-gradient(160deg, #0B1F3A 0%, #123A6B 45%, #1B5FA8 100%);
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 18px;
}
.learn-top { display: flex; align-items: center; gap: 10px; color: #fff; }
.learn-title { flex: 1; min-width: 0; }
.learn-title h2 { font-size: 1.1rem; font-weight: 900; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
.learn-progress {
  height: 7px; border-radius: 4px; background: rgba(255,255,255,.25);
  overflow: hidden; margin-top: 5px;
}
.learn-progress i { display: block; height: 100%; background: linear-gradient(90deg, #FFD700, #FF9F43); border-radius: 4px; transition: width .4s ease; }
.learn-counter { font-size: 1rem; font-weight: 800; color: #FFD700; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.learn-stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 0; position: relative;
}
.learn-card-wrap {
  width: min(88vw, 400px); height: min(66vh, 560px);
  perspective: 1200px; position: relative;
}
.learn-card { width: 100%; height: 100%; cursor: pointer; }
.learn-card .card-face { box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 3px rgba(255,215,0,.35); }
.learn-card .card-front .img-wrap { border-radius: 14px; }
.learn-card .card-front .word { font-size: 1.6rem; }
.learn-card .card-back { padding: 20px 16px; }
.learn-card .card-back .ipa { font-size: 1.35rem; }
.learn-card .card-back .zh { font-size: 1.6rem; }
.learn-card .card-back .ex { font-size: 1.02rem; }
.learn-card .card-back .ex-zh { font-size: .88rem; }
.learn-card .card-back .btn-say { font-size: 1.05rem; padding: 13px; }
.learn-card .card-back .btn-learn { font-size: 1rem; padding: 13px; }
/* 对决舞台（替代底部按钮） */
.learn-arena {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px; padding: 10px 4px 2px;
  background: radial-gradient(ellipse at 50% 0%, rgba(46,134,222,.28), transparent 70%);
  border-radius: 18px;
}
.arena-fighter { display: flex; flex-direction: column; align-items: center; width: 92px; flex: 0 0 auto; }
.arena-sprite {
  width: 62px; height: 92px;
  background-size: contain; background-repeat: no-repeat; background-position: center bottom;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.45));
  position: relative;
}
#arenaHero { background-image: url("/assets/img/hero.png"); }
#arenaVillain { background-image: url("/assets/img/villain.png"); }
/* 待机摇晃 */
.arena-sprite.idle { animation: idle-sway 1.6s ease-in-out infinite; }
@keyframes idle-sway {
  0%,100% { transform: rotate(0) translateY(0); }
  25% { transform: rotate(-3deg) translateY(-2px); }
  75% { transform: rotate(3deg) translateY(-2px); }
}
.arena-name { font-size: .72rem; font-weight: 800; color: #EAF3FF; margin-top: 3px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.arena-villain .arena-name { color: #F48FB1; }
.arena-center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.mic-btn {
  width: 66px; height: 66px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 1.5rem; color: #fff;
  background: linear-gradient(145deg, #FFD700, #FF9F43);
  box-shadow: 0 6px 16px rgba(255,159,67,.45), inset 0 2px 0 rgba(255,255,255,.4);
  transition: transform .12s ease;
}
.mic-btn:active { transform: scale(.88); }
.mic-btn.listening { animation: mic-pulse 1s ease-in-out infinite; }
@keyframes mic-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,82,82,.6); } 50% { box-shadow: 0 0 0 14px rgba(255,82,82,0); } }
.arena-status {
  font-size: .82rem; font-weight: 800; color: #FFD700; text-align: center;
  min-height: 20px; text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.arena-status.good { color: #69F0AE; }
.arena-status.bad { color: #FF8A80; }
.arena-manual { display: flex; gap: 8px; }
.mini-btn {
  border: none; cursor: pointer; font-family: var(--font); font-weight: 800;
  font-size: .8rem; padding: 9px 14px; border-radius: 12px; color: #fff;
}
.mini-btn.ok { background: #27AE60; box-shadow: 0 4px 10px rgba(39,174,96,.4); }
.mini-btn.no { background: #E74C3C; box-shadow: 0 4px 10px rgba(231,76,60,.4); }
/* 攻击/受击（舞台版，复用同名动画） */
.arena-sprite.attack { animation: attack-lunge .5s ease; }
.arena-sprite.attack-rev { animation: attack-lunge-rev .5s ease; }
.arena-sprite.hit { animation: hit-shake .5s ease; filter: drop-shadow(0 0 10px rgba(255,80,80,.9)) saturate(1.6); }
.arena-sprite.ko { animation: ko-fall .7s ease forwards; }
.arena-sprite.win { animation: win-hop .6s ease; }
.arena-beam {
  position: absolute; top: 46%; height: 14px; z-index: 5; pointer-events: none;
  border-radius: 10px; animation: beam-fire .55s ease;
}
.arena-beam.light {
  left: 50%; width: 46%; transform-origin: left center;
  background: linear-gradient(90deg, rgba(120,200,255,0), #7FD4FF, #fff, #7FD4FF, rgba(120,200,255,0));
  box-shadow: 0 0 18px #7FD4FF;
}
.arena-beam.dark {
  left: 4%; width: 46%; transform-origin: right center;
  background: linear-gradient(90deg, rgba(220,60,120,0), #FF4081, #E91E63, #FF4081, rgba(220,60,120,0));
  box-shadow: 0 0 18px #E91E63;
}
.nav-dots { display: flex; gap: 6px; max-width: 40vw; overflow: hidden; }
.nav-dots i {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35);
  flex: 0 0 auto; transition: all .25s ease;
}
.nav-dots i.active { background: #FFD700; transform: scale(1.35); box-shadow: 0 0 8px rgba(255,215,0,.8); }
.learn-card-wrap.swipe-left .learn-card { animation: swipe-left .32s ease both; }
.learn-card-wrap.swipe-right .learn-card { animation: swipe-right .32s ease both; }
@keyframes swipe-left { from { transform: translateX(0) rotate(0); opacity: 1; } to { transform: translateX(-120%) rotate(-6deg); opacity: 0; } }
@keyframes swipe-right { from { transform: translateX(0) rotate(0); opacity: 1; } to { transform: translateX(120%) rotate(6deg); opacity: 0; } }
.learn-card-wrap.enter-left .learn-card { animation: enter-left .34s ease both; }
.learn-card-wrap.enter-right .learn-card { animation: enter-right .34s ease both; }
@keyframes enter-left { from { transform: translateX(120%) rotate(6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes enter-right { from { transform: translateX(-120%) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== 对战模式 ===== */
#view-battle {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto;
  background: linear-gradient(180deg, #0B1F3A 0%, #2C0A3E 60%, #4A0040 100%);
  color: #fff; padding: calc(env(safe-area-inset-top) + 10px) 14px 24px;
}
.battle-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.battle-head h2 { font-size: 1.15rem; font-weight: 900; text-shadow: 0 2px 8px rgba(255,0,128,.5); }
.battle-field {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between;
  height: 38vh; min-height: 240px; max-height: 340px;
  background: radial-gradient(circle at 50% 20%, rgba(255,215,0,.12), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(46,134,222,.25), transparent 60%);
  border-radius: 20px; border: 1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 0 60px rgba(0,0,0,.5);
  overflow: hidden; margin-bottom: 10px;
}
.fighter { display: flex; flex-direction: column; align-items: center; width: 42%; }
.fighter-hp {
  width: 100%; height: 14px; border-radius: 8px; background: rgba(255,255,255,.18);
  overflow: hidden; border: 1px solid rgba(255,255,255,.3);
}
.hp-bar { height: 100%; border-radius: 8px; transition: width .5s cubic-bezier(.3,.8,.3,1); }
.hero-hp { background: linear-gradient(90deg, #E74C3C, #FFD700); }
.villain-hp { background: linear-gradient(90deg, #9B59B6, #E91E63); }
.fighter-name { font-size: .95rem; font-weight: 900; margin: 6px 0 2px; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.side-villain .fighter-name { color: #F48FB1; }
.fighter-img {
  width: 100%; flex: 1; min-height: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.fighter-sprite {
  width: min(30vw, 140px); height: min(44vw, 200px);
  background-size: contain; background-repeat: no-repeat; background-position: center bottom;
  position: relative; transition: transform .18s ease;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
#heroSprite { background-image: url("/assets/img/hero.png"); }
#villainSprite { background-image: url("/assets/img/villain.png"); }
.vs-badge {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  font-size: 1.5rem; font-weight: 900; color: #FFD700;
  text-shadow: 0 0 14px rgba(255,215,0,.9); z-index: 5;
  background: radial-gradient(circle, rgba(0,0,0,.55), transparent 70%);
  padding: 14px; border-radius: 50%;
}
/* 攻击 / 受击 / KO 动画 */
.fighter-sprite.attack { animation: attack-lunge .5s ease; }
.fighter-sprite.attack-rev { animation: attack-lunge-rev .5s ease; }
@keyframes attack-lunge {
  0% { transform: translateX(0) scale(1); } 35% { transform: translateX(60%) scale(1.12); } 60% { transform: translateX(52%) scale(1.06); } 100% { transform: translateX(0) scale(1); }
}
@keyframes attack-lunge-rev {
  0% { transform: translateX(0) scale(1); } 35% { transform: translateX(-60%) scale(1.12); } 60% { transform: translateX(-52%) scale(1.06); } 100% { transform: translateX(0) scale(1); }
}
.fighter-sprite.hit { animation: hit-shake .5s ease; filter: drop-shadow(0 0 12px rgba(255,80,80,.9)) saturate(1.6); }
@keyframes hit-shake {
  0%,100% { transform: translateX(0); } 15% { transform: translateX(-8px) rotate(-3deg); } 30% { transform: translateX(7px) rotate(2deg); } 45% { transform: translateX(-6px); } 60% { transform: translateX(5px) rotate(-2deg); } 80% { transform: translateX(-3px); }
}
.fighter-sprite.ko { animation: ko-fall .7s ease forwards; }
@keyframes ko-fall { 0% { transform: rotate(0); } 100% { transform: rotate(90deg) translateY(30px) scale(.9); opacity: .6; } }
.fighter-sprite.win { animation: win-hop .6s ease; }
@keyframes win-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-16px) rotate(-4deg); } 70% { transform: translateY(0); } 85% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
/* 光线 */
.battle-beam {
  position: fixed; top: 42%; height: 26px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, rgba(120,200,255,0), #7FD4FF, #FFFFFF, #7FD4FF, rgba(120,200,255,0));
  border-radius: 20px; box-shadow: 0 0 30px #7FD4FF, 0 0 60px rgba(127,212,255,.8);
  animation: beam-fire .6s ease;
}
.battle-beam.beam-dark {
  background: linear-gradient(90deg, rgba(220,60,120,0), #FF4081, #E91E63, #FF4081, rgba(220,60,120,0));
  box-shadow: 0 0 30px #E91E63, 0 0 60px rgba(233,30,99,.8);
}
@keyframes beam-fire { from { transform: scaleX(0); opacity: .2; } to { transform: scaleX(1); opacity: 1; } }
.battle-ask { text-align: center; padding: 6px 0 12px; }
.battle-ask .quiz-tip { color: #FFD700; font-size: 1rem; margin-bottom: 10px; }
.battle-feedback {
  text-align: center; font-size: 1.1rem; font-weight: 900; margin-top: 12px;
  min-height: 28px; text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.battle-feedback.good { color: #69F0AE; }
.battle-feedback.bad { color: #FF8A80; }
#view-battle .quiz-opt { border-color: rgba(255,255,255,.25); }
#view-battle .quiz-opt img { background: #fff; }
#battleOptions { max-width: 560px; margin: 0 auto; }
.battle-buttons { display: flex; gap: 10px; max-width: 560px; margin: 12px auto 0; }
.battle-buttons .big-btn { margin: 0; }