/* Team Battle (PvE adventure, Battle System spec 2026-10-17). Reuses the duel's VFX classes from styles.css
   (impact, spark, float, bloom, heal-*, projectile, flash, callout); only the layout and unit states live here. */
.tb { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; touch-action: manipulation; }
.tb > .arena-bg { position: absolute; inset: 0; z-index: -2; background: url("../assets/fac/bg-battle.webp") center 40% / cover no-repeat, #0d1410; }
.tb-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent 16%, transparent 58%, rgba(0, 0, 0, .55) 80%, rgba(0, 0, 0, .9)); }

/* ---- top panel: pause · wave + timer · the enemy the team is hitting */
.tb-top { flex: none; display: flex; align-items: stretch; gap: 6px; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); position: relative; z-index: 20; }
.tb-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 20px; color: var(--gold1);
  background: linear-gradient(180deg, rgba(16, 44, 48, .92), rgba(6, 20, 24, .92)); border: 1px solid #b8862b; box-shadow: inset 0 0 0 1px rgba(255, 214, 102, .12), 0 3px 10px rgba(0, 0, 0, .5); }
.tb-btn:active { transform: scale(.94); }
.tb-btn.tall { height: 50px; grid-template-rows: 1fr auto; padding: 5px 0 4px; gap: 1px; font-size: 18px; }
.tb-btn.tall small { font: 700 10px/1 var(--display); letter-spacing: .04em; }
.tb-btn.on { background: linear-gradient(180deg, var(--gold1), var(--gold4)); color: #2a1700; border-color: var(--gold1); box-shadow: 0 0 12px rgba(250, 173, 20, .6); }
.tb-wave { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 9px; border-radius: 12px; min-width: 70px;
  background: rgba(6, 20, 24, .85); border: 1px solid #6b5220; }
.tb-wave b { font: 700 12px/1 var(--display); color: var(--t1); white-space: nowrap; }
.tb-wave span { display: flex; align-items: center; gap: 4px; color: var(--gold1); font: 700 14px/1 var(--display); }
.tb-wave span .i { font-size: 13px; }
.tb-wave em { font-style: normal; } .tb-wave em.low { color: var(--red2); animation: blink .5s steps(2) infinite; }
.tb-foe { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 8px; border-radius: 12px;
  background: rgba(6, 20, 24, .85); border: 1px solid #6b5220; }
.tf-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tf-name { font: 600 12px/1.1 var(--display); color: #ffd6e7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.tf-st { display: flex; gap: 3px; justify-content: center; min-height: 0; }
.tf-st:empty { display: none; }
.tf-pt { flex: none; width: 36px; height: 36px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #6b3a8c, #1c0f26); border: 1px solid #b37feb; }
.tb-foe.boss { border-color: #b37feb; box-shadow: 0 0 14px rgba(146, 84, 222, .45); }
.tb-foe.boss .tf-name { font-size: 15px; color: #fff; }
.tb-foe.boss .bar.foe { height: 18px; }
.tb-foe.boss .tf-pt { width: 46px; height: 46px; }
/* bars (own markup: the duel's bars are id-based) */
.tb .bar > .fill { display: block; height: 100%; border-radius: inherit; transition: width .2s linear; }
.tb .bar.hp > .fill { background: linear-gradient(180deg, #7ee05a, #3f9e1c); }
.tb .bar.hp.foe > .fill { background: linear-gradient(180deg, #ff6b6b, #c4212a); }
.tb .bar.en > .fill { background: linear-gradient(180deg, #69c0ff, #1d6fd1); transition: none; }

/* ---- AUTO / speed: a slim column on the right edge, under the top panel */
.tb-side { position: absolute; z-index: 20; right: max(8px, env(safe-area-inset-right)); top: calc(max(6px, env(safe-area-inset-top)) + 54px); display: flex; flex-direction: column; gap: 6px; }

/* ---- field: absolutely placed models (percent coordinates from screens-team.js layout()) */
.tb-field { position: relative; z-index: 1; flex: 1; min-height: 0; }   /* own stacking context: models never cover the panels */
.u { position: absolute; aspect-ratio: .72; translate: -50% -100%; transition: opacity .5s, filter .5s; container-type: size; }
.u.gone { opacity: 0; pointer-events: none; }
.u.waiting { opacity: 0; translate: -50% -110%; transition: opacity .4s, translate .4s; }
.u-body { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 92%; transition: transform .55s cubic-bezier(.5, 0, .5, 1.4), filter .6s; }
.u .ua.full { max-width: 100%; max-height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
.u .ua.ph { font-size: 62cqh; line-height: 1; padding-bottom: 6cqh; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .7)); }
.u.boss .ua.ph { font-size: 80cqh; filter: drop-shadow(0 0 18px rgba(146, 84, 222, .8)) drop-shadow(0 8px 10px rgba(0, 0, 0, .7)); }
.u-shadow { position: absolute; left: 50%; bottom: -3%; width: 80%; height: 9%; translate: -50% 0; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .6), transparent 70%); }
.u.boss .u-shadow { background: radial-gradient(rgba(146, 84, 222, .55), rgba(0, 0, 0, .4) 45%, transparent 70%); width: 110%; }
.u-ring { position: absolute; left: 50%; bottom: -5%; width: 96%; height: 15%; translate: -50% 0; border-radius: 50%; opacity: 0; transition: opacity .25s;
  border: 3px solid var(--gold1); box-shadow: 0 0 12px var(--gold), inset 0 0 10px rgba(250, 173, 20, .6); }
.u.ally { cursor: pointer; }
/* energy ring under each pet (2026-10-19): an elliptical ring that fills clockwise from the top (like a clock hand) with energy towards the skill cost;
   full = the skill is ready (gold, pulsing). It replaces the plain selection ring for pets; selection is a brighter rim. */
.u-energy { position: absolute; left: 50%; bottom: -11%; width: 106%; height: 20%; translate: -50% 0; border-radius: 50%; pointer-events: none; --e: 0%;
  /* bright fill on a dark track: readable on any ground */
  background: conic-gradient(#7fe3ff 0, #1ea7ff var(--e), rgba(4, 12, 20, .78) var(--e));   /* like a clock hand: from 12 o'clock, clockwise */
  -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 56%, #000 96%, transparent 100%); mask: radial-gradient(closest-side, transparent 52%, #000 56%, #000 96%, transparent 100%);
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px rgba(62, 196, 255, .85)); transition: filter .2s; }
.u.ally .u-ring { display: none; }
.u.ally.sel .u-energy { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px rgba(62, 196, 255, .9)); }
.u.ally.ready .u-energy { background: conic-gradient(#ffd666, #ffb020, #ffd666); filter: drop-shadow(0 0 6px #ffd666) drop-shadow(0 0 14px rgba(250, 140, 20, .8)); animation: energyPulse 1.1s ease-in-out infinite; }
@keyframes energyPulse { 50% { filter: drop-shadow(0 0 10px #ffe58a) drop-shadow(0 0 22px rgba(250, 140, 20, .95)); } }
.u.is-ko .u-energy { opacity: 0; }
.u.ally.sel .u-ring { opacity: 1; animation: ringPulse 1.6s ease-in-out infinite; }
@keyframes ringPulse { 50% { box-shadow: 0 0 20px var(--gold1), inset 0 0 14px rgba(250, 173, 20, .8); } }
.u.ally.ready .u-body { filter: drop-shadow(0 0 6px #ffd666) drop-shadow(0 0 16px rgba(250, 140, 20, .75)); animation: readyGlow 1.1s ease-in-out infinite; }
@keyframes readyGlow { 50% { filter: drop-shadow(0 0 10px #fff1b8) drop-shadow(0 0 26px rgba(250, 140, 20, .95)) brightness(1.08); } }
.u.casting .u-body { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px #ffd666) brightness(1.15); animation: none; }
.u.enemy.casting .u-body { filter: drop-shadow(0 0 10px #d3adf7) drop-shadow(0 0 22px #722ed1); }
.u.hurt .u-body { animation: hurt .35s; }
.u.healed .u-body { animation: unitHeal .9s; }
@keyframes unitHeal { 30% { filter: drop-shadow(0 0 16px #95de64) brightness(1.25); } }
.u.stunned .u-body { filter: saturate(.3) brightness(1.15) sepia(.3) hue-rotate(160deg) drop-shadow(0 0 10px #91d5ff); animation: none; }
.u.stunned .u-body::after { content: '❄'; position: absolute; top: 18%; left: 50%; translate: -50% 0; font-size: 22cqh; color: #e6f7ff; text-shadow: 0 0 10px #69c0ff; }
.u.target .u-shadow { background: radial-gradient(rgba(255, 77, 79, .55), transparent 70%); }
.u.deny .u-body { animation: deny .3s; }
/* K.O.: the model sinks to the ground, darkens, loses its ring and READY; the others fight on */
.u.is-ko { pointer-events: none; }
.u.is-ko .u-body { transform: rotate(-78deg) translate(-8%, 18%) scale(.9); filter: grayscale(.85) brightness(.45); animation: none; }
.u.is-ko.enemy .u-body { transform: rotate(78deg) translate(8%, 18%) scale(.9); }
.u.is-ko .u-ring, .u.is-ko .u-ready, .u.is-ko .u-cd, .u.is-ko .u-head { opacity: 0 !important; }
.u.is-ko .u-body::after { content: none; }

/* head: small HP bar + status badges (the boss's HP is in the top panel) */
.u-head { position: absolute; left: 50%; bottom: calc(100% + 2px); translate: -50% 0; width: 76%; min-width: 54px; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; transition: opacity .3s; }
.u-hp { width: 100%; height: 6px; border-radius: 3px; background: #1a1612; box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), inset 0 1px 2px rgba(0, 0, 0, .8); overflow: hidden; }
.u-hp i { display: block; height: 100%; background: linear-gradient(180deg, #7ee05a, #3f9e1c); transition: width .2s linear; }
.u.enemy .u-hp i { background: linear-gradient(180deg, #ff6b6b, #c4212a); }
.u-st { display: flex; gap: 3px; }
.st { display: inline-flex; align-items: center; gap: 2px; height: 18px; padding: 0 5px 0 3px; border-radius: 9px; font: 700 10px/1 system-ui, sans-serif; color: #fff; background: rgba(0, 0, 0, .78); border: 1px solid var(--s4); white-space: nowrap; }
.st .i, .st .ab-art { width: 12px; height: 12px; font-size: 12px; }
.st.stun { border-color: #69c0ff; color: #bae7ff; }
.st.cast { border-color: var(--gold); color: var(--gold1); }
.st.cast b { font: 800 11px/1 var(--display); width: 12px; text-align: center; color: #d3adf7; }
.u.enemy .st.cast { border-color: #b37feb; }
.st.is-ko { border-color: var(--red); color: var(--red2); }

/* READY badge over a pet whose skill can be used now; a cooldown dial while it recharges */
.u-ready { position: absolute; left: 50%; bottom: calc(100% + 26px); translate: -50% 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 0; scale: .6; transition: opacity .2s, scale .25s cubic-bezier(.3, 1.6, .5, 1); }
.u-ready .ab-art { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, #5c2a06, #1a0b02); border: 2px solid var(--gold1); box-shadow: 0 0 14px var(--gold), 0 0 26px rgba(250, 120, 20, .7); padding: 3px; object-fit: contain; animation: readyBob 1.1s ease-in-out infinite; }
.u.ready .u-ready { opacity: 1; scale: 1; }
@keyframes readyBob { 50% { translate: 0 -3px; box-shadow: 0 0 20px var(--gold1), 0 0 34px rgba(250, 120, 20, .9); } }
.u-cd { position: absolute; left: 50%; bottom: calc(100% + 26px); translate: -50% 0; width: 30px; height: 30px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: conic-gradient(rgba(255, 214, 102, .85) var(--p, 0%), rgba(0, 0, 0, .7) 0); border: 1px solid var(--gold5); display: grid; place-items: center; }
.u-cd::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: rgba(10, 10, 10, .9); }
.u-cd em { position: relative; font: 700 10px/1 system-ui, sans-serif; color: var(--t1); font-style: normal; }
.u-cd.on { opacity: 1; }
.u .callouts { left: 50%; bottom: calc(100% + 30px); }
.u .callout { left: 0; translate: -50% 0; font-size: 13px; }
.u.boss .callouts { bottom: 62%; }   /* a tall boss: keep its label on the field, not under the top panel */
.u .callout.enemy { border-color: #b37feb; color: #efdbff; box-shadow: 0 0 14px rgba(146, 84, 222, .5); }
.u .floats { top: 18%; }
.u .impact { width: 70px; height: 70px; }
.u.boss .impact.super { width: 240px; height: 240px; }
.float.ko-fl { color: #ff7875; font-size: 22px; }
.tb .crush-lines { display: none; }

/* wave / result banner */
.tb-banner { position: absolute; left: 0; right: 0; top: 34%; z-index: 90; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.tb-banner span { padding: 8px 22px; border-radius: 12px; font: 700 24px/1 var(--display); color: #fff; background: rgba(6, 20, 24, .85); border: 1px solid var(--gold); box-shadow: 0 0 24px rgba(250, 173, 20, .4); text-shadow: 0 2px 0 #000; }
.tb-banner span.ok { color: var(--gold1); }
.tb-banner span.big { font-size: 40px; padding: 10px 26px; }
.tb-banner.show { animation: bannerIn 1.4s cubic-bezier(.215, .61, .355, 1) forwards; }
.tb-banner.show:has(.big) { animation: bannerStay .5s cubic-bezier(.215, .61, .355, 1) forwards; }
@keyframes bannerIn { 0% { opacity: 0; scale: .6; } 15% { opacity: 1; scale: 1.08; } 25% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bannerStay { 0% { opacity: 0; scale: .6; } 60% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }

/* ---- bottom: selected pet's skill + one compact card per pet */
.tb-bot { flex: none; position: relative; z-index: 20; display: flex; flex-direction: column; gap: 6px; padding: 0 max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }

.tb-cards { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb-cards.n1 { grid-template-columns: minmax(0, 300px); justify-content: center; }
.tb-cards.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 5px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(16, 44, 48, .94), rgba(6, 20, 24, .94)); border: 1px solid #3c4c44; transition: border-color .2s, box-shadow .2s, filter .4s; }
.pc.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(250, 173, 20, .45); }
.pc.ready .pc-sk { animation: readyBob2 1.1s ease-in-out infinite; }
.pc.healed { animation: hudHeal .9s; }
.pc-pick { display: flex; align-items: center; gap: 5px; min-width: 0; text-align: left; }
.pc-pt { position: relative; flex: none; width: 38px; height: 38px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--gold5);
  background: radial-gradient(circle at 50% 38%, #3b5a66, #0d1d22); }
.pc-pt.raccoon { background: radial-gradient(circle at 50% 38%, #f6c35c 0%, #c4572a 48%, #3b140a 100%); }
.pc-pt.frog { background: radial-gradient(circle at 50% 38%, #b7eb8f 0%, #3f7d2a 50%, #10260a 100%); }
.pc-pt .ua.por, .tf-pt .ua.por { width: 100%; height: 100%; object-fit: cover; }
.pc-pt .ua.ph, .tf-pt .ua.ph { font-size: 24px; line-height: 1; }
.tb-foe.boss .tf-pt .ua.ph { font-size: 32px; }
.pc-ko { position: absolute; inset: 0; display: none; place-items: center; font-size: 30px; color: var(--red); background: rgba(0, 0, 0, .45); }
.pc-ko .i { stroke-width: 3.5; filter: drop-shadow(0 0 2px #000); }
.pc-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-name { font: 600 11px/1.1 var(--display); color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .bar.hp { height: 12px; } .pc .bar.en { height: 9px; }
.pc .bar-txt { font-size: 9px; } .pc .bar.en .bar-txt { font-size: 8px; }
.pc-sk { position: relative; width: 44px; height: 52px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; padding-top: 2px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(to top, rgba(250, 173, 20, .32) var(--e, 0%), rgba(0, 0, 0, .55) 0); border: 1px solid var(--gold6); }
.pc-sk .ab-art { position: relative; width: 32px; height: 32px; object-fit: contain; z-index: 1; }
.pc-sk small { position: relative; z-index: 1; font: 700 9px/1 system-ui, sans-serif; color: var(--t2); white-space: nowrap; }
.pc-cd { position: absolute; inset: 0; z-index: 2; background: conic-gradient(rgba(0, 0, 0, .62) var(--p, 0%), transparent 0); pointer-events: none; }
.pc.ready .pc-sk { border-color: var(--gold1); background: radial-gradient(circle at 50% 40%, rgba(255, 170, 40, .55), rgba(60, 20, 0, .8)); }
.pc.ready .pc-sk small { color: var(--gold1); }
@keyframes readyBob2 { 50% { box-shadow: 0 0 14px var(--gold), inset 0 0 8px rgba(255, 214, 102, .6); } }
.pc-sk.deny { animation: deny .3s; }
.pc-st { position: absolute; left: 6px; top: -9px; display: flex; gap: 3px; pointer-events: none; }
.pc.stunned { border-color: #69c0ff; }
/* K.O. card: darkened, cross on the portrait, skill locked */
.pc.is-ko { filter: grayscale(.9) brightness(.6); }
.pc.is-ko .pc-ko { display: grid; }
.pc.is-ko .pc-sk { pointer-events: none; }

/* small phones (360×640 and below): tighter top and cards */
@media (max-height: 700px) {
  .tb-btn { width: 40px; height: 40px; font-size: 18px; }
  .tb-btn.tall { height: 44px; }
  .tb-side { top: calc(max(6px, env(safe-area-inset-top)) + 48px); }
  .pc-pt { width: 32px; height: 32px; }
  .pc-sk { width: 40px; height: 46px; }
  .pc-sk .ab-art { width: 28px; height: 28px; }
  .u-ready .ab-art { width: 34px; height: 34px; }
}
/* three cards in a row: portrait + skill on top, full-width bars below (the name is in the skill strip) */
.tb-cards.n3 .pc { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pt st sk" "hp hp hp" "en en en"; row-gap: 3px; }
.tb-cards.n3 .pc-pick, .tb-cards.n3 .pc-bars { display: contents; }
.tb-cards.n3 .pc-pt { grid-area: pt; }
.tb-cards.n3 .pc-sk { grid-area: sk; height: 44px; }
.tb-cards.n3 .pc-sk .ab-art { width: 28px; height: 28px; }
.tb-cards.n3 .pc .bar.hp { grid-area: hp; }
.tb-cards.n3 .pc .bar.en { grid-area: en; }
.tb-cards.n3 .pc-name { display: none; }

/* team result rows */
.tr-pets { display: flex; flex-direction: column; gap: 6px; }
.tr-pet { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; font-size: 13px; }
.tr-pet b { font: 600 13px var(--display); }
.tr-pet .use { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--gold1); }
.tr-pet .use .ab-art { width: 22px; height: 22px; }
.tr-pet.is-ko { color: var(--red2); } .tr-pet.is-ko .pc-pt { filter: grayscale(1) brightness(.6); }

/* adventure scenario list on the Arena screen */
.scen-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scen { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 10px; border-radius: 12px; text-align: left; background: rgba(0, 0, 0, .55); border: 1px solid var(--gold6); }
.scen b { font: 600 14px var(--display); color: var(--gold1); }
.scen small { font-size: 11px; color: var(--t2); }
.scen .team { display: flex; gap: 2px; font-size: 13px; }
.scen:active { transform: scale(.97); }
.scen-note { margin-top: 8px; font-size: 11px; color: var(--t3); }

@media (prefers-reduced-motion: reduce) {
  .u.ally.sel .u-ring, .u.ally.ready .u-energy, .u.ally.ready .u-body, .u-ready .ab-art, .pc.ready .pc-sk { animation: none !important; }
}

/* ---- Fablepaws battle look (Battle handoff 2026-10-17): warm wood-and-gold panels instead of teal */
.tb-btn { background: linear-gradient(180deg, #7a4c22, #4a2b12); border: 2px solid #c58b2c; color: var(--gold1);
  box-shadow: inset 0 2px 0 rgba(255, 220, 160, .25), 0 3px 8px rgba(0, 0, 0, .55); }
.tb-btn.on { background: linear-gradient(180deg, var(--gold1), var(--gold4)); color: #3a1a06; border-color: #5c3208; }
.tb-wave, .tb-foe { background: linear-gradient(180deg, rgba(110, 70, 34, .94), rgba(60, 36, 16, .94)); border: 2px solid #c58b2c; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.tb-wave { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 2px; align-content: center; padding: 0 10px 0 4px; }
.tw-face { grid-row: 1 / 3; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 20px;
  background: radial-gradient(circle at 50% 40%, #6a2fa0, #2b0f45); border: 2px solid #e0a83a; }
.tw-face .tw-img { width: 100%; height: 100%; object-fit: cover; }
.tb-wave b { font: 13px/1 'Lilita One', var(--display); color: #fff3d6; }
.tb-wave span { font: 14px/1 'Lilita One', var(--display); }
.tf-name { font-family: 'Lilita One', var(--display); color: #fff3d6; }
.tb-foe.boss { border-color: #e0a83a; box-shadow: 0 0 14px rgba(165, 75, 255, .5), 0 3px 10px rgba(0, 0, 0, .5); }
.tf-pt { border: 2px solid #e0a83a; }
.tb .bar { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 0 0 1px #3a1a06; }
.pc { background: linear-gradient(180deg, rgba(110, 70, 34, .96), rgba(48, 28, 12, .96)); border: 2px solid #8a5a2e; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.pc.sel { border-color: var(--gold1); box-shadow: 0 0 0 1px var(--gold1), 0 0 14px rgba(255, 209, 102, .5); }
.pc-name { font-family: 'Lilita One', var(--display); font-weight: 400; color: #fff3d6; }
.pc-sk { border-color: #8a5a2e; }
.pc-pt { border: 2px solid #c58b2c; }

/* HP over a pet: a small portrait next to the bar, as in the mockup */
.u-bar { display: flex; align-items: center; gap: 3px; width: 100%; }
.u-face { flex: none; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 13px; border: 2px solid #e0a83a; background: #3b5a66; }
.u-face.raccoon { background: radial-gradient(circle at 50% 38%, #f6c35c, #c4572a 55%, #3b140a); }
.u-face.frog { background: radial-gradient(circle at 50% 38%, #b7eb8f, #3f7d2a 55%, #10260a); }
.u-face .ua { width: 100%; height: 100%; object-fit: cover; font-size: 13px; }
.u-bar .u-hp { flex: 1; height: 7px; }

/* ---- Battle result (Battle handoff 2026-10-17): wooden plaque, the real team in poses, summary, Home/Retry/Next.
   No stars, rewards or currency: the game grants none yet. */
.tr2 { position: relative; flex: 1; min-height: 0; overflow: hidden; isolation: isolate; }
.tr2-bg { position: absolute; inset: 0; z-index: -2; background: #1d2a14 center 40% / cover no-repeat; }
.tr2-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tr2.victory .tr2-shade { background: radial-gradient(ellipse at 50% 30%, rgba(255, 209, 102, .35), rgba(20, 12, 2, .25) 45%, rgba(10, 8, 4, .88) 85%); }
.tr2.defeat .tr2-shade, .tr2.draw .tr2-shade { background: radial-gradient(ellipse at 50% 30%, rgba(60, 80, 120, .3), rgba(6, 10, 18, .6) 45%, rgba(4, 6, 10, .92) 85%); }
.tr2.defeat .tr2-bg:not(.has-art) { filter: saturate(.4) brightness(.7); }   /* the dedicated defeat art is already dark */
.tr2 > .res-burst { position: absolute; top: -6%; left: 50%; width: 150%; max-width: 700px; translate: -50% 0; opacity: .5; mix-blend-mode: screen; z-index: -1; pointer-events: none; animation: spin 14s linear infinite; }
.tr2-scroll { height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; scrollbar-width: none;
  padding: max(26px, calc(env(safe-area-inset-top) + 18px)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.tr2-scroll::-webkit-scrollbar { display: none; }
.tr2-scroll > * { flex-shrink: 0; }
.tr2-plaque { position: relative; display: flex; flex-direction: column; align-items: center; padding: 14px 40px 10px; border-radius: 16px;
  background: linear-gradient(180deg, #7a4c22, #4a2b12); border: 3px solid #c58b2c; box-shadow: inset 0 2px 0 rgba(255, 220, 160, .3), 0 6px 16px rgba(0, 0, 0, .55); }
.tr2-plaque .paw { position: absolute; top: -20px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #3a1a06;
  background: radial-gradient(circle at 50% 35%, #ffe7a3, #f5b335 60%, #b86b10); border: 2px solid #5c3208; }
.tr2-plaque h1 { font: 38px/1 'Lilita One', var(--display); color: var(--gold1); text-shadow: 0 3px 0 #3a1a06, 0 0 14px rgba(255, 209, 102, .4); }
.tr2.defeat .tr2-plaque h1, .tr2.draw .tr2-plaque h1 { color: #d6e4ff; text-shadow: 0 3px 0 #1a2433; }
.tr2-plaque small { margin-top: 4px; font-size: 12px; color: #f6dfb0; }
.tr2-team { display: flex; justify-content: center; align-items: flex-end; height: min(26dvh, 220px); width: 100%; }
.tr2-pose { height: 100%; width: auto; max-width: 60%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.tr2-team.n2 .tr2-pose { max-width: 48%; height: 92%; } .tr2-team.n3 .tr2-pose { max-width: 36%; height: 84%; }
.tr2-team.n3 .tr2-pose:nth-child(2) { height: 100%; }   /* the front pet in the middle, taller */
.tr2-pose.defeat { filter: saturate(.6) brightness(.85) drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.tr2-team .tr2-pose.ph { height: auto !important; width: min(28%, 120px); max-width: none; aspect-ratio: 1; align-self: center; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 3px solid #e0a83a; background: #3b5a66; }
.tr2-pose.ph.frog { background: radial-gradient(circle at 50% 38%, #b7eb8f, #3f7d2a 55%, #10260a); }
.tr2-pose.ph .ua { width: 100%; height: 100%; object-fit: cover; font-size: 64px; display: grid; place-items: center; }
.tr2-msg { font: 16px/1.2 'Lilita One', var(--display); color: #fff3d6; text-align: center; text-shadow: 0 2px 3px #000; }
.tr2-msg.cleanse { color: #b7eb8f; }
.tr2-panel { width: 100%; padding: 12px; border-radius: 18px; background: linear-gradient(180deg, rgba(70, 42, 20, .95), rgba(40, 24, 10, .96)); border: 2px solid #c58b2c; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.tr2-panel .res-sum b { font-family: 'Lilita One', var(--display); font-weight: 400; color: #fff3d6; }
.tr2-panel .res-sum > div + div { border-left-color: #8a5a2e; }
.tr2-btns { width: 100%; display: grid; grid-template-columns: 58px 58px 1fr; gap: 10px; margin-top: auto; padding-top: 4px; }
.tr2-ic { height: 58px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; color: #fff3d6;
  background: linear-gradient(180deg, #7a4c22, #4a2b12); border: 2px solid #c58b2c; box-shadow: inset 0 2px 0 rgba(255, 220, 160, .25), 0 4px 8px rgba(0, 0, 0, .5); }
.tr2-main { height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
  font: 20px/1 'Lilita One', var(--display); color: #fff; text-shadow: 0 2px 0 #1d5c13;
  background: linear-gradient(180deg, #8fe05a, #3f9e1c); border: 2px solid #1d5c13; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(0, 0, 0, .5); }
.tr2-main .i { font-size: 24px; stroke-width: 3; }
.tr2-main span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr2-main.defeat, .tr2-main.draw { background: linear-gradient(180deg, var(--gold1), var(--gold4)); color: #3a1a06; text-shadow: none; border-color: #5c3208; }
.tr2-ic:active, .tr2-main:active { transform: scale(.96); }
@media (max-height: 700px) { .tr2-plaque h1 { font-size: 32px; } .tr2-team { height: min(22dvh, 150px); } }
/* wide art (e.g. the raccoon seen from behind, ~1:1) may spill past the narrow model box instead of shrinking */
.u.ally .ua.full { max-width: 150%; flex: none; }

/* ---- pet cards, Battle polish mockup (2026-10-18): big portrait, skill badge in its corner, HP + energy below */
.tb-cards .pc2 { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 5px; grid-template-columns: none; grid-template-areas: none; }
.tb-cards.n1 { grid-template-columns: minmax(0, 150px); }
.tb-cards.n2 { grid-template-columns: repeat(2, minmax(0, 150px)); justify-content: center; }
.tb-cards .pc2 .pc-pick { display: block; width: 100%; }
.tb-cards .pc2 .pc-pt { display: grid; width: 100%; height: auto; aspect-ratio: 1.3; border-radius: 10px; }
.tb-cards .pc2 .pc-pt .ua.por { object-fit: cover; object-position: 50% 22%; }
.tb-cards .pc2 .pc-pt .ua.ph { font-size: 44px; }
.tb-cards .pc2 .pc-sk { position: absolute; left: 9px; bottom: 40px; width: 40px; height: 40px; border-radius: 50%; padding: 0; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #4a2b12, #1a0d04); border: 2px solid #8a5a2e; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.tb-cards .pc2 .pc-sk .ab-art { width: 30px; height: 30px; }
.tb-cards .pc2 .pc-cd { border-radius: 50%; }
.tb-cards .pc2.ready .pc-sk { border-color: var(--gold1); box-shadow: 0 0 0 2px rgba(255, 209, 102, .35), 0 0 14px rgba(255, 170, 40, .9); animation: readyBob2 1.1s ease-in-out infinite; }
.pc-skt { position: absolute; right: 9px; bottom: 44px; padding: 2px 6px; border-radius: 8px; font: 700 10px/1.2 system-ui, sans-serif; color: #fff3d6; background: rgba(0, 0, 0, .7); border: 1px solid #8a5a2e; pointer-events: none; }
.pc-skt[hidden] { display: none; }
.tb-cards .pc2 .pc-bars { display: flex; flex-direction: column; gap: 3px; }
.tb-cards .pc2 .bar.hp { height: 13px; } .tb-cards .pc2 .bar.en { height: 11px; }
.tb-cards .pc2 .pc-st { left: 8px; top: 8px; }
.tb-cards .pc2 .pc-ko { font-size: 40px; }
.tb-cards .pc2 .pc-name { display: none; }
@media (max-height: 700px) {
  .tb-cards .pc2 .pc-pt { aspect-ratio: 1.75; }
  .tb-cards .pc2 .pc-sk { width: 34px; height: 34px; bottom: 38px; } .tb-cards .pc2 .pc-sk .ab-art { width: 26px; height: 26px; }
  .pc-skt { bottom: 40px; }
}

/* skill strip: the state sits in its own right-hand column (Battle polish mockup) */

/* damage numbers, MISS and CRIT over the units (2026-10-20) */
.u .float { translate: calc(-50% + var(--dx, 0px)) 0; font: 28px/1 'Lilita One', var(--display); letter-spacing: .02em; text-shadow: 0 2px 0 #1a0d00, 0 0 3px #000, 0 0 10px rgba(0, 0, 0, .85); }
.u .float.dmg.dealt { color: #fff1b8; }
.u .float.dmg.taken { color: #ff5c5c; }
.u .float.crit { font-size: 38px; color: #ffd666; text-shadow: 0 2px 0 #3a1500, 0 0 3px #000, 0 0 14px rgba(255, 140, 0, .95); animation-duration: 1.2s; }
.u .float.crit.taken { color: #ff7a45; }
.u .float.crit b { display: block; margin-bottom: 2px; font-size: 15px; letter-spacing: .12em; color: #ffb347; text-align: center; }
.u .float.miss { font-size: 22px; letter-spacing: .1em; color: #e3c8ff; }