/* ============================================================
   battle.css —— 听写前对战（2026-10-30，tabs/battle.js）
   上半场地：对手在右上（名字＋血条），她的伙伴在左下；下半题目（字母块沿用 .spell-slots / .letter）
   ============================================================ */
.bt { padding-top: 8px; }
.bt-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bt-x { width: 40px; height: 40px; border-radius: 12px; border: 2.5px solid #4A3728; background: #fff; font-size: 18px; font-weight: 900; color: #4A3728; box-shadow: 0 3px 0 #4A3728; flex: none; }
.bt-st { flex: 1; text-align: center; font-weight: 900; font-size: 17px; color: #4A3728; }
.bt-n { flex: none; width: 40px; text-align: center; color: #8A7E70; font-size: 14px; }

.bt-field {
  position: relative; height: 196px; border-radius: 20px; border: 3px solid #4A3728; overflow: hidden;
  background: linear-gradient(#BFE3F7 0, #DDF1FB 52%, #CFE8B4 52%, #B9DC98 100%);
  box-shadow: 0 4px 0 rgba(74, 55, 40, .3);
}
.bt-s2 .bt-field { background: linear-gradient(#F9D9A6 0, #FCEBCF 52%, #E8D29E 52%, #D9BE82 100%); }
.bt-s3 .bt-field { background: linear-gradient(#3B3F7A 0, #6A5DA8 52%, #8B7BC2 52%, #6E5FA6 100%); }
.bt-foe { position: absolute; right: 10px; top: 8px; width: 58%; display: flex; flex-direction: column; align-items: flex-end; }
.bt-foe img { width: 112px; height: 112px; object-fit: contain; margin-right: 6px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .12)); transition: transform .2s; }
.bt-me { position: absolute; left: 10px; bottom: 6px; display: flex; align-items: flex-end; gap: 6px; }
.bt-me img { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .12)); }
.bt-tag { background: rgba(255, 255, 255, .92); border: 2px solid #4A3728; border-radius: 10px; padding: 2px 8px; text-align: center; }
.bt-tag b { font-size: 14px; color: #4A3728; }
.bt-tag small { display: block; font-size: 13px; font-weight: 900; color: #D0552C; min-height: 16px; }
.bt-foe .bt-tag { width: 150px; position: absolute; right: 120px; top: 6px; }
.bt-hp { height: 10px; border-radius: 99px; background: #E6DCCB; overflow: hidden; margin: 3px 0 2px; }
.bt-hp i { display: block; height: 100%; background: #58B85C; border-radius: 99px; transition: width .5s ease; }
.bt-hp i.y { background: #F2B33D; } .bt-hp i.r { background: #E0603E; }
.bt-fx { position: absolute; left: 0; right: 0; top: 42%; text-align: center; pointer-events: none; }
.bt-fx span { display: inline-block; font-size: 26px; font-weight: 900; color: #fff; -webkit-text-stroke: 1.5px #4A3728; animation: btpop .9s ease both; }
.bt-fx span.m { color: #E6DCCB; font-size: 20px; }
.bt-fx span.c { color: #FFD23F; font-size: 32px; }
.bt-fx span.u { color: #FF7A3D; font-size: 40px; }

.bt-q { text-align: center; margin-top: 12px; }
.bt-zh { font-size: 26px; font-weight: 900; color: #4A3728; }
.bt-sent { font: 600 19px/1.7 "Avenir Next", "Helvetica Neue", Arial, sans-serif; color: #4A3728; background: #FFFDF5; border: 2px dashed #E9C46A; border-radius: 14px; padding: 8px 12px; text-align: left; }
.bt-sent.story { font-size: 16px; line-height: 1.65; max-height: 150px; overflow-y: auto; }
.bt-sent u { text-decoration: none; color: #B5A58A; letter-spacing: -1px; }
.bt-sent u.ok { color: #3c8a33; font-weight: 800; letter-spacing: 0; }
.bt-sent u.now { color: #D0552C; background: #FFE6C7; border-radius: 6px; padding: 0 3px; }
.bt-spk { margin: 8px auto 0; width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid #4A3728; background: #FFF1D6; font-size: 20px; display: block; box-shadow: 0 3px 0 #4A3728; }
.bt-peek { margin-top: 6px; font: 700 22px "Avenir Next", Arial, sans-serif; color: #C9BBA3; letter-spacing: 3px; }
.bt .spell-slots { margin-top: 10px; }
.bt-undo { margin-top: 12px; }

/* 招式 */
#mon.atk { animation: btatk .45s ease; }
#foe.hit { animation: bthit .5s ease; }
#foe.dodge { animation: btdodge .5s ease; }
#foe.ult { animation: btult 1.2s ease; }
@keyframes btatk { 0% { transform: none; } 45% { transform: translate(60px, -40px) scale(1.08); } 100% { transform: none; } }
@keyframes bthit { 0%, 100% { transform: none; filter: none; } 20% { transform: translateX(-10px); filter: brightness(2.2); } 45% { transform: translateX(10px); } 70% { transform: translateX(-6px); filter: brightness(1.6); } }
@keyframes btdodge { 0%, 100% { transform: none; } 50% { transform: translateX(26px) rotate(6deg); } }
@keyframes btult { 0% { transform: none; filter: none; } 15% { transform: scale(1.15) rotate(-8deg); filter: brightness(3); } 35% { transform: translateX(14px) rotate(8deg); filter: brightness(2); } 60% { transform: translateX(-12px) scale(.95); } 100% { transform: none; filter: none; } }
@keyframes btpop { 0% { opacity: 0; transform: scale(.4) translateY(10px); } 30% { opacity: 1; transform: scale(1.15); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-18px); } }

/* 每一段开头的大字 */
.bt-flash { position: fixed; left: 0; right: 0; top: 34%; z-index: 70; text-align: center; pointer-events: none; font-size: 40px; font-weight: 900; color: #FFD23F; -webkit-text-stroke: 2px #4A3728; animation: btflash 1.5s ease both; }
@keyframes btflash { 0% { opacity: 0; transform: scale(.3) rotate(-6deg); } 25% { opacity: 1; transform: scale(1.1); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }

/* 结算 */
.bt-win { text-align: center; padding-top: 18px; }
.bt-wfield { position: relative; height: 150px; }
.bt-wfoe { position: absolute; right: 18%; top: 34px; width: 96px; filter: grayscale(1) opacity(.55); transform: rotate(80deg); }
.bt-wme { position: absolute; left: 20%; top: 0; width: 130px; animation: btjump 1s ease 2; }
@keyframes btjump { 0%, 100% { transform: none; } 40% { transform: translateY(-22px); } }
.bt-wt { display: block; font-size: 34px; font-weight: 900; color: #4A3728; }
.bt-wsub { color: #8A7E70; margin: 4px 0 8px; font-size: 15px; }
.bt-wr { margin: 10px auto 14px; max-width: 340px; background: #FFF6E6; border: 2px solid #F2B33D; border-radius: 14px; padding: 8px 10px; }
.bt-wr b { display: block; font-size: 15px; color: #6f4a1e; margin-bottom: 6px; }
.bt-wr span { display: inline-block; margin: 3px 5px; font: 700 18px "Avenir Next", Arial, sans-serif; color: #4A3728; }
.bt-wr small { font: 400 12px sans-serif; color: #B5602A; margin-left: 3px; }

/* 首页横条 */
.hm-bt { background: #FDE6D8; border-color: #E0883B; box-shadow: 0 3px 0 #D0552C; }
.hm-bt img { object-fit: contain; background: #fff; }
.hm-bt span { color: #A2471F; }
.bt .bt-undo { width: auto; display: inline-block; padding: 8px 18px; font-size: 15px; }

/* ---------- 对手回合（10-30） ---------- */
.bt-hp.me { width: 92px; margin: 2px auto 0; }
.bt-field.foe-turn { box-shadow: 0 0 0 4px #E0603E, 0 4px 0 rgba(74, 55, 40, .3); }
.bt-x0 { visibility: hidden; }
.bt-enemy .bt-st { color: #C0432A; }
.bt-pow { font-size: 19px; font-weight: 900; color: #4A3728; margin-top: 4px; }
.bt-pow b { color: #C0432A; }
.bt-how { color: #8A7E70; font-size: 15px; margin: 4px 0 0; }
.bt-opts { display: grid; gap: 10px; max-width: 320px; margin: 14px auto 0; }
.bt-opt { font: 800 24px "Avenir Next", "Helvetica Neue", Arial, sans-serif; letter-spacing: 1px; padding: 12px; border-radius: 16px; border: 3px solid #4A3728; background: #fff; color: #3F6FD1; box-shadow: 0 4px 0 rgba(74, 55, 40, .3); }
.bt-opt.ok { background: #EAF6E4; border-color: #3c8a33; color: #3c8a33; }
.bt-opt.off { opacity: .45; }
.bt-opt.no { background: #FDE6D8; border-color: #E0883B; color: #B5602A; opacity: 1; text-decoration: line-through; }
.bt-fx span.p { color: #FF8A5C; font-size: 24px; letter-spacing: 1px; }
#foe.charge { animation: btcharge .8s ease-in-out infinite; filter: drop-shadow(0 0 10px #FF7A3D); }
#foe.lunge { animation: btlunge .5s ease; }
#mon.dodge { animation: btmdodge .6s ease; }
#mon.hurt { animation: bthurt .6s ease; }
@keyframes btcharge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes btlunge { 0% { transform: none; } 45% { transform: translate(-70px, 40px) scale(1.08); } 100% { transform: none; } }
@keyframes btmdodge { 0%, 100% { transform: none; } 40% { transform: translateX(-34px) rotate(-10deg); } }
@keyframes bthurt { 0%, 100% { transform: none; filter: none; } 20% { transform: translateX(-8px); filter: brightness(2) saturate(.3); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); filter: brightness(1.5); } }

/* ---------- 正式对战场地（10-30 画图AI交图：同一个场馆白天/黄昏/星空，对应三段）----------
   原图 1600×900：远处站台中心约(82%,47%)、近处站台中心约(28%,70%)。场地按 16:9 等比，宝可梦用百分比站上去；
   名字牌照宝可梦游戏：对手的在左上、我方的在右下（中间留给「命中！」） */
.bt-field { height: auto; aspect-ratio: 16 / 9; background: #9fd0ef center / cover no-repeat; }
.bt-s1 .bt-field { background: #9fd0ef url(../img/battle/arena-day-f5ffd842.jpg) center / cover no-repeat; }   /* 用整条 background：前面 .bt-s2/.bt-s3 的渐变简写会把 size 冲回 auto（10-30 黄昏、星空两段放大成只剩柱子） */
.bt-s2 .bt-field { background: #9fd0ef url(../img/battle/arena-dusk-d1fe6c9d.jpg) center / cover no-repeat; }   /* 用整条 background：前面 .bt-s2/.bt-s3 的渐变简写会把 size 冲回 auto（10-30 黄昏、星空两段放大成只剩柱子） */
.bt-s3 .bt-field { background: #9fd0ef url(../img/battle/arena-night-d247ed24.jpg) center / cover no-repeat; }   /* 用整条 background：前面 .bt-s2/.bt-s3 的渐变简写会把 size 冲回 auto（10-30 黄昏、星空两段放大成只剩柱子） */
.bt-foe, .bt-me { position: absolute; inset: 0; width: auto; display: block; }
.bt-foe img { position: absolute; right: 5%; top: 3%; width: auto; height: 50%; margin: 0; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .18)); }
.bt-me img { position: absolute; left: 11%; bottom: 23%; width: auto; height: 54%; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .18)); }
.bt-foe .bt-tag { position: absolute; left: 3%; top: 5%; right: auto; width: 44%; }
.bt-me .bt-tag { position: absolute; right: 3%; bottom: 6%; width: 40%; }
.bt-tag { background: rgba(255, 255, 255, .9); padding: 2px 8px 3px; }
.bt-hp.me { width: auto; margin: 3px 0 2px; }
.bt-fx { top: 36%; }
.bt-fx span { -webkit-text-stroke: 2px #4A3728; }
/* 结算：夜晚场馆，对手倒在远处站台、伙伴在近处站台上跳 */
.bt-wfield { height: auto; aspect-ratio: 16 / 9; border: 3px solid #4A3728; border-radius: 20px; overflow: hidden; background: url(../img/battle/arena-night-d247ed24.jpg) center / cover no-repeat; box-shadow: 0 4px 0 rgba(74, 55, 40, .3); margin-bottom: 12px; }
.bt-wfoe { right: 6%; top: 20%; width: auto; height: 34%; }
.bt-wme { left: 12%; top: auto; bottom: 22%; width: auto; height: 58%; }
.bt-wfoe { filter: grayscale(1) brightness(.85) opacity(.8); }
/* 镜像用单独的 scale 属性，不和招式动画的 transform 打架 */
.bt img.flip { scale: -1 1; }

/* ---------- 选出战宝可梦（10-30）：默认选好，直接出战；想换点下面的头像 ---------- */
.bt-pick .bt-field.bt-s1-bg { background: #9fd0ef url(../img/battle/arena-day-f5ffd842.jpg) center / cover no-repeat; }
.bt-pick .bt-how { text-align: center; margin: 10px 0 6px; }
.bt-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.bt-pk { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 5px; border-radius: 14px; border: 2.5px solid #E6DCCB; background: #fff; font: inherit; cursor: pointer; }
.bt-pk img { width: 54px; height: 54px; object-fit: contain; }
.bt-pk span { font-size: 13px; font-weight: 700; color: #4A3728; white-space: nowrap; }
.bt-pk.on { border-color: #E0883B; background: #FFF1D6; box-shadow: 0 0 0 3px rgba(224, 136, 59, .35); }
.bt-go { margin-top: 14px; }