/* Battle cards (src/run/hud/battles-ui.js). Like the trap cards (css/traps.css): under the pause menu, above the HUD, the
   HUD row stays clear. One big card and two rows of pips; no words. Tap-first, no scrolling. */
.bt-ov{position:fixed; inset:0; z-index:22; pointer-events:none; display:flex; align-items:center; justify-content:center;
  padding:calc(58px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  box-sizing:border-box;
  background:radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--paper) 62%, transparent) 0%, color-mix(in srgb, var(--paper) 30%, transparent) 75%);
  animation:bt-in .36s ease-out both}   /* the wash and the card fade in together, no movement (Calm too); 2026-11-12 */
.bt-ov[hidden]{display:none}
.bt-ov.out{animation:bt-out .36s ease-in both}
@keyframes bt-in{from{opacity:0}to{opacity:1}}
@keyframes bt-out{from{opacity:1}to{opacity:0}}
/* A loss (2026-11-12, confirm play test: a lost battle and a trap timing out read as "nothing happened"): the cards dim and
   sink a little as they fade, over 0.9 s; no text, no flash, no shake. Calm mode: the plain fade (the class is not set). */
.bt-ov.out.lost{animation:bt-out .9s ease-in both}
.bt-ov.out.lost .bt-panel{animation:wr-lost .9s ease-in both}
@keyframes wr-lost{0%{transform:none; filter:none}35%{transform:translateY(4px); filter:saturate(.35) brightness(.9)}100%{transform:translateY(40px) scale(.94); filter:saturate(.35) brightness(.9)}}
@media (prefers-reduced-motion: reduce){ .bt-ov.out.lost, .bt-ov.out.lost .bt-panel{animation:bt-out .36s ease-in both} .bt-ov.out.lost .bt-panel{animation:none} }

.bt-panel{pointer-events:auto; width:min(400px, 100%); display:flex; flex-direction:column; gap:10px; border-radius:22px}
.bt-panel:focus{outline:none}

/* The race: your pips (your colour) over the rival's (its colour) */
.bt-race{align-self:center; display:flex; flex-direction:column; gap:6px; padding:8px 14px; border-radius:18px; background:var(--panel); border:1px solid var(--panel-line); box-shadow:0 4px 14px rgba(0,0,0,.12)}
.bt-row{--c:var(--you); display:flex; align-items:center; gap:7px}
.bt-who{width:16px; height:16px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3); margin-right:4px; flex:none}
.bt-row.you .bt-who{width:18px; height:18px}
.bt-pip{width:30px; height:12px; border-radius:6px; background:color-mix(in srgb, var(--ink) 12%, transparent)}
.bt-pip.on{background:var(--c); transform:scaleY(1.15)}

.bt-card{display:flex; flex-direction:column; gap:12px; padding:14px 12px 12px; border-radius:20px; background:var(--panel); border:2px solid color-mix(in srgb, var(--ink) 14%, transparent); box-shadow:0 6px 18px rgba(0,0,0,.16)}
.bt-formula{text-align:center; white-space:nowrap; overflow:hidden; font:700 clamp(36px, 11vw, 52px)/1.1 var(--font-display); color:var(--ink); font-variant-numeric:tabular-nums}
.bt-formula::after{content:" = ?"; color:var(--muted); font-weight:600}
.bt-chips{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.bt-chip{position:relative; min-height:70px; min-width:0; padding:0 4px; border-radius:16px; border:2px solid var(--card-edge); border-bottom-width:6px;
  background:var(--card); color:var(--ball-ink); cursor:pointer; touch-action:none; overflow:hidden;
  font:700 34px/1 var(--font-display); font-variant-numeric:tabular-nums; transition:transform .08s, opacity .2s}
.bt-chip .v{display:block; white-space:nowrap}
.bt-chip:active, .bt-chip.down{transform:translateY(2px); border-bottom-width:4px}
.bt-chip:focus-visible{outline:3px solid var(--you); outline-offset:2px}
.bt-chip.crossed{opacity:.38; cursor:default}
.bt-chip.crossed .v{text-decoration:line-through; text-decoration-thickness:3px}
.bt-chip .key{position:absolute; right:6px; top:4px; font:800 10px/1 var(--font-body); font-style:normal; color:var(--muted); display:none}
@media (hover:hover) and (pointer:fine){ .bt-chip .key{display:block} }
.bt-ov.blank .bt-formula, .bt-ov.blank .bt-chip .v, .bt-ov.blank .bt-chip .key{visibility:hidden}

.bt-card.shake{animation:trap-shake .42s ease-in-out}
.bt-card.pop{animation:bt-pop .28s ease-out}
@keyframes bt-pop{0%{transform:translateY(8px); opacity:.4}100%{transform:none; opacity:1}}
.calm .bt-card.shake, .calm .bt-card.pop{animation:none}

@media (orientation:portrait) and (max-height:700px){
  .bt-chip{min-height:58px; font-size:28px}
  .bt-formula{font-size:clamp(30px, 9vw, 44px)}
}
@media (orientation:landscape){
  .bt-ov{padding-top:calc(50px + env(safe-area-inset-top, 0px))}
  .bt-panel{width:min(520px, 100%); gap:8px}
  .bt-card{padding:10px 12px}
  .bt-formula{font-size:clamp(30px, 5vw, 44px)}
}
@media (orientation:landscape) and (max-height:420px){
  .bt-ov{padding-top:calc(44px + env(safe-area-inset-top, 0px)); padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px))}
  .bt-panel{gap:6px}
  .bt-race{padding:5px 12px; gap:4px}
  .bt-chip{min-height:52px; font-size:26px}
}