/* ── Battle stage layout ──────────────────────── */
.battle-stage{
  flex:1;
  display:flex;
  overflow:hidden;
  /* Containing block for the compact tactical rail and its tab. */
  position:relative;
  /* How wide the rail is once it stops being a column beside the canvas. */
  --brail-w:min(280px,72vw);
}
#cvwrap{flex:1;position:relative;overflow:hidden;background:#060b14}
/* Two stacked, overlapping canvases fill the wrap: the WebGL 3D layer (#bg3d,
   ships + environment + bloom) sits underneath, and the transparent 2D HUD
   overlay (#cv — bars, component grid, skill strip, projectiles, damage
   numbers, tooltips) sits on top and owns pointer input. Both are absolutely
   positioned so they occupy the same box. The fill rule is scoped to #cvwrap
   so it can't blow up portrait / silhouette canvases elsewhere. */
#cvwrap > canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
#cvwrap > canvas#bg3d{z-index:0;pointer-events:none}
#cvwrap > canvas#cv{z-index:1}

#ticklabel{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-family:'Orbitron',sans-serif;font-size:10px;color:rgba(0,212,255,.4);
  letter-spacing:3px;pointer-events:none;display:none;
}

.battle-escape-btn{
  position:absolute;bottom:38px;left:50%;transform:translateX(-50%);
  display:none;align-items:center;gap:7px;
  font-family:'Orbitron',sans-serif;letter-spacing:2px;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
  z-index:var(--z-panel);
}
.battle-escape-btn.show{display:inline-flex}
.battle-escape-btn .ico{font-size:14px;line-height:1;color:#8ea4bc}
.battle-escape-btn:hover .ico{color:#d6e4f2}

/* ── Battle result overlay ────────────────────── */
#battleResult{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 50%,rgba(2,8,24,.82) 0%,rgba(0,0,0,.55) 100%);
  cursor:pointer;z-index:var(--z-bay);
  animation:brIn .35s cubic-bezier(.22,1,.36,1);
}
.br-inner{text-align:center;display:flex;flex-direction:column;gap:18px;pointer-events:none}
.br-title{
  font-family:'Orbitron',sans-serif;font-size:52px;letter-spacing:10px;
}
.br-title.win{color:var(--green);text-shadow:0 0 40px rgba(0,232,122,.6),0 0 100px rgba(0,180,80,.3)}
.br-title.loss{color:var(--red);text-shadow:0 0 40px rgba(255,34,68,.6),0 0 100px rgba(180,0,30,.3)}
.br-title.draw{color:#d8b34a;text-shadow:0 0 40px rgba(216,179,74,.5),0 0 100px rgba(170,130,30,.25)}
.br-sub{font:600 11px/1 var(--u-font-ui);color:rgba(80,140,180,.55);letter-spacing:.24em;text-transform:uppercase}
@keyframes brIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}

/* The loot panel is a kit surface: bracketed glass, with the kit's own pills
   carrying the XP and money the frame reported. */
.br-loot{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  min-width:380px;max-width:560px;
  padding:15px 18px;border-radius:var(--u-r);
  background:var(--u-glass);border:1px solid var(--u-line-dim);
  pointer-events:none;
}
.br-loot-bucket{
  font:600 10px/1 var(--u-font-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--u-label);
}
.br-loot-bucket b{color:var(--u-body)}
.br-loot-head{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.br-stamina{display:flex;justify-content:center;pointer-events:none}
.br-stam-note{
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  padding:6px 14px;border-radius:4px;
  font-family:'Orbitron',sans-serif;
}
.br-stam-defeat{color:#ff8a99;background:rgba(180,0,40,.16);border:1px solid rgba(255,68,90,.55)}
.br-stam-escape{color:#ffd17a;background:rgba(180,120,0,.16);border:1px solid rgba(255,170,68,.55)}
.br-mmr{display:flex;justify-content:center;pointer-events:none}
.br-mmr-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 22px;border-radius:6px;
  background:rgba(6,18,30,.8);border:1px solid rgba(60,110,170,.35);
}
.br-mmr-label{font:600 10px/1 var(--u-font-ui);color:var(--u-label);letter-spacing:.2em;text-transform:uppercase}
.br-mmr-row{display:flex;align-items:baseline;gap:10px;font-family:'Share Tech Mono',monospace}
.br-mmr-old{font-size:18px;color:var(--dim)}
.br-mmr-arrow{font-size:14px;color:#446680}
.br-mmr-new{font-size:22px;color:var(--accent)}
.br-mmr-delta{font:700 13px/1 var(--u-font-ui);letter-spacing:.1em;padding:3px 9px;border-radius:var(--u-r-sm);border:1px solid currentColor}
.br-mmr-card.up .br-mmr-delta{color:var(--green)}
.br-mmr-card.down .br-mmr-delta{color:var(--red)}
.br-drops{display:flex;flex-direction:column;gap:4px;margin-top:4px;width:100%}
.br-drop{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 8px;
  padding:6px 9px;border-radius:var(--u-r-sm);
  background:var(--u-well);border:1px solid var(--u-line-soft);
}
.br-drop .ty{font:600 9px/1 var(--u-font-ui);color:var(--u-label);text-transform:uppercase;letter-spacing:.1em}
.br-drop .nm{font-family:var(--u-font-ui);color:var(--u-value);text-align:left}
.br-drop-stats{grid-column:1 / -1;font:400 11px/1.35 var(--u-font-ui);color:var(--u-label);text-align:left}
/* A drop's fast fit onto the active ship: the server's verdict, then Equip / Change / Too much weight. The one strip of
   the overlay that takes clicks for itself; a click anywhere else still dismisses it. */
.br-drop-fit{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  pointer-events:auto;cursor:default;
}
.br-drop-fit .u-blocked{margin:0}

/* ── Per-pilot result cards ───────────────────── */
.br-pilots{
  display:flex;flex-direction:column;gap:8px;
  min-width:380px;max-width:560px;width:100%;
  pointer-events:none;
}
/* A pilot's card keeps its own bars: the stamina drain and the XP fill are
   animated against a delta overlay (see Visual.md §12.1), which the kit's flat
   `meter()` does not model. The surface and the type are the kit's. */
.br-pilot-card{
  position:relative;
  display:flex;flex-direction:column;gap:7px;
  padding:11px 13px;border-radius:var(--u-r-sm);
  background:var(--u-glass);border:1px solid var(--u-line-dim);
  font:400 12px/1.4 var(--u-font-ui);
  animation:brPilotIn .45s cubic-bezier(.22,1,.36,1) backwards;
}
.br-pilot-card:nth-child(1){animation-delay:.05s}
.br-pilot-card:nth-child(2){animation-delay:.18s}
.br-pilot-card:nth-child(3){animation-delay:.31s}
.br-pilot-card:nth-child(4){animation-delay:.44s}
.br-pilot-card:nth-child(5){animation-delay:.57s}
.br-pilot-card:nth-child(6){animation-delay:.70s}
@keyframes brPilotIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.br-pilot-head{display:flex;align-items:center;gap:10px}
.br-pilot-portrait{width:34px;height:34px;border-radius:50%;background:#0a1828;flex-shrink:0;border:1px solid var(--u-line-dim)}
.br-pilot-title{display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0}
.br-pilot-name{font:600 14px/1.2 var(--u-font-ui);color:var(--u-value);letter-spacing:.02em}
.br-pilot-role{font:600 10px/1 var(--u-font-ui);color:var(--u-label);letter-spacing:.16em;text-transform:uppercase}
.br-level-up{
  font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:2px;
  color:#ffcc55;padding:3px 8px;border-radius:3px;
  background:rgba(180,120,0,.18);border:1px solid rgba(255,200,80,.55);
  text-shadow:0 0 8px rgba(255,200,80,.6);
  animation:brLevelGlow 1.2s ease-out infinite alternate;
}
@keyframes brLevelGlow{
  from{box-shadow:0 0 4px rgba(255,200,80,.4),0 0 12px rgba(255,200,80,.15)}
  to  {box-shadow:0 0 8px rgba(255,200,80,.65),0 0 28px rgba(255,200,80,.35)}
}
.br-stam-row,.br-xp-row{display:flex;align-items:center;gap:8px}
.br-stam-lbl,.br-xp-lbl{font-size:9px;color:#6a8aaa;letter-spacing:1px;text-transform:uppercase;width:62px;flex-shrink:0;text-align:left}
.br-stam-track,.br-xp-track{
  position:relative;
  flex:1;height:6px;border-radius:3px;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid rgba(60,110,170,.2);
}
.br-stam-fill,.br-xp-fill{
  position:relative;z-index:1;
  display:block;height:100%;
  transition:width 1.5s cubic-bezier(.22,1,.36,1);
}
.br-stam-fill{background:linear-gradient(90deg,#226688,#44aacc)}
.br-xp-fill  {background:linear-gradient(90deg,#bb6600,#ffaa33)}
/* Delta overlay — sized to exactly the changed portion of the bar so the
   glow visually equals the amount of stamina spent / XP gained. Positioned
   absolutely; clipped by the track's overflow:hidden so the highlight stays
   within the bar shape. */
.br-stam-delta,.br-xp-delta{
  position:absolute;top:0;bottom:0;
  z-index:2;pointer-events:none;
  opacity:0;
  border-radius:2px;
}
.br-stam-delta{
  background:linear-gradient(90deg,rgba(140,0,30,.55),rgba(255,40,70,.75));
  box-shadow:
    0 0 10px rgba(255,40,70,.9),
    0 0 22px rgba(160,0,30,.7),
    inset 0 0 8px rgba(40,0,15,.85);
}
.br-xp-delta{
  background:linear-gradient(90deg,rgba(140,70,0,.55),rgba(255,200,80,.75));
  box-shadow:
    0 0 10px rgba(255,180,40,.9),
    0 0 22px rgba(180,90,0,.7),
    inset 0 0 8px rgba(50,20,0,.85);
}
.br-stam-delta.is-active,.br-xp-delta.is-active{
  animation:brDeltaPulse 1.5s ease-in-out forwards;
}
@keyframes brDeltaPulse{
  0%  {opacity:0;filter:brightness(.55)}
  18% {opacity:1;filter:brightness(1.1)}
  82% {opacity:1;filter:brightness(.95)}
  100%{opacity:0;filter:brightness(.6)}
}
.br-stam-val,.br-xp-val{font-size:10px;color:#a0c0d8;width:64px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.br-cost-pill{
  font-size:9px;letter-spacing:1px;
  padding:2px 6px;border-radius:3px;font-family:'Orbitron',sans-serif;
}
.br-cost-start  {color:#88aacc;background:rgba(60,110,170,.18);border:1px solid rgba(80,140,200,.4)}
.br-cost-escape {color:#ffd17a;background:rgba(180,120,0,.18);border:1px solid rgba(255,170,68,.45)}
.br-cost-defeat {color:#ff8a99;background:rgba(180,0,40,.18);border:1px solid rgba(255,68,90,.55)}
.br-xp-gain{
  font-size:9px;letter-spacing:1px;color:#ffcc55;font-family:'Orbitron',sans-serif;
  padding:2px 6px;border-radius:3px;background:rgba(255,180,40,.12);border:1px solid rgba(255,200,80,.4);
}
.br-pilot-card.br-level-flash{
  animation:brLevelFlash .7s ease-out;
}
@keyframes brLevelFlash{
  0%  {box-shadow:0 0 0 1px rgba(255,200,80,0)   inset, 0 0 0 rgba(255,200,80,0)}
  25% {box-shadow:0 0 0 2px rgba(255,200,80,.9) inset, 0 0 28px rgba(255,200,80,.6)}
  100%{box-shadow:0 0 0 1px rgba(255,200,80,0)  inset, 0 0 0 rgba(255,200,80,0)}
}

/* ── Battle bar panel (rail) ──────────────────── */
.comb{display:flex;flex-direction:column;gap:4px}
.comb-name{font-size:11px;color:#90c0e0;margin-bottom:1px}
.mbar-row{display:flex;align-items:center;gap:6px}
.mbar-lbl{font-size:9px;color:var(--dim);width:38px;flex-shrink:0;text-transform:uppercase}
.mbar-track{flex:1;height:5px;background:rgba(255,255,255,.04);border-radius:3px;overflow:hidden}
.mbar-fill{height:100%;border-radius:3px;transition:width .35s}
.mf-shield{background:linear-gradient(90deg,#0055bb,#0099ff)}
.mf-armor{background:linear-gradient(90deg,#aa5500,#ff9900)}
.mf-hp{background:linear-gradient(90deg,#aa0020,#ff2244)}
.mbar-val{font-size:9px;color:#2a4a6a;width:30px;text-align:right;flex-shrink:0}
.bevents{max-height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin;scrollbar-color:#1a3a5a transparent}
.ev{font-size:10px;color:var(--dim)}
.ev .ply{color:#44aaff}.ev .enm{color:#cc44cc}.ev .dmg{color:#ff4444}
.ev .miss{color:#88aacc;font-weight:bold;letter-spacing:1px}
.ev .crit{color:#ffd24a;font-weight:bold;letter-spacing:1px;font-size:15px}
.battle-banner{text-align:center;padding:8px;border-radius:6px;font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:2px;display:none}
.battle-banner.win{display:block;background:rgba(0,160,70,.18);border:1px solid #00aa44;color:var(--green)}
.battle-banner.loss{display:block;background:rgba(180,0,40,.18);border:1px solid #aa0022;color:var(--red)}
.battle-banner.draw{display:block;background:rgba(216,179,74,.15);border:1px solid #8a6d20;color:#d8b34a}

/* Idle empty-state (no battle) */
.battle-idle{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
}
.battle-idle .hint{
  font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:4px;
  color:rgba(120,170,210,.4);text-transform:uppercase;
  margin-top:10vh;
}

/* ── Rail tab ─────────────────────────────────────
   The handle that pulls the tactical rail out on a compact viewport. Hidden
   wherever the rail is a column beside the canvas, which is every viewport the
   reflow below does not catch. */
.battle-rail-toggle{
  display:none;
  position:absolute;top:50%;right:0;
  width:44px;height:56px;
  place-items:center;
  background:rgba(5,12,26,.92);border:1px solid var(--u-line-dim);border-right:0;
  border-radius:var(--u-r-sm) 0 0 var(--u-r-sm);
  color:var(--u-line);font-size:20px;line-height:1;cursor:pointer;
  z-index:var(--z-panel);
  transition:right .18s ease-out,background .15s;
}
.battle-rail-toggle .ico{display:block;transition:transform .18s ease-out}
.battle-rail-toggle:hover,.battle-rail-toggle:active{background:rgba(20,48,88,.95)}
.battle-stage.rail-open .battle-rail-toggle .ico{transform:rotate(180deg)}

/* ══ Reflow ═══════════════════════════════════════
   The kit's three breakpoints (css/ui.css, UI-REDESIGN.md §4 Phase 7). The
   design target is a phone held in landscape — 740×390 — where the fight needs
   every pixel of width and the result overlay has to fit in 390px of height. */

/* Narrow *or* short: the 300px rail would take 40% of the stage, so it stops
   being a column and becomes an overlay the player pulls out from the edge.
   An overlay rather than an in-flow collapse because opening an in-flow rail
   resizes #cvwrap, and that re-fits the 3D scene and rebuilds its gradients
   mid-fight; over the top, the drawing stays exactly where it was. The canvas
   already carries both ships' bars, so the rail is the event log and the
   settings — supplementary, and correct to keep closed by default. */
@media (max-width:900px),(max-height:520px){
  .battle-rail-toggle{display:grid}
  .battle-stage.rail-open .battle-rail-toggle{right:var(--brail-w)}
  #battleRail{
    position:absolute;top:0;right:0;bottom:0;
    width:var(--brail-w);
    /* env() so the rail clears a notch: in landscape the cut-out eats a side. */
    padding:10px calc(10px + env(safe-area-inset-right)) 10px 10px;
    z-index:var(--z-panel);
    background:rgba(4,10,24,.97);
    box-shadow:-14px 0 34px rgba(0,0,0,.5);
    transform:translateX(100%);visibility:hidden;
    transition:transform .18s ease-out,visibility .18s;
  }
  .battle-stage.rail-open #battleRail{transform:none;visibility:visible}
  .bevents{max-height:120px}
}

/* Narrow: the loot and pilot columns are sized for a desktop overlay; on a
   640px screen their 380px floor plus the overlay's own padding is the whole
   width, so they take what the column gives them instead. */
@media (max-width:900px){
  .br-inner{width:min(560px,100%)}
  .br-loot,.br-pilots{min-width:0;width:100%}
  .br-title{font-size:34px;letter-spacing:6px}
}

/* Short: the result overlay is a title, a stamina note, an MMR card, a loot
   card and up to six pilot cards. It scrolls inside itself rather than being
   clipped by a 390px viewport, and every piece of it tightens first. */
@media (max-height:520px){
  #battleResult{padding:8px 10px}
  .br-inner{
    gap:8px;width:min(560px,100%);max-height:100%;
    overflow-y:auto;overscroll-behavior:contain;
    /* Taking pointer events back is what makes the column scrollable; the
       overlay still dismisses, because the click bubbles to it. */
    pointer-events:auto;
  }
  .br-title{font-size:28px;letter-spacing:5px}
  .br-sub{font-size:10px;letter-spacing:.18em}
  .br-stam-note{font-size:10px;letter-spacing:1.4px;padding:5px 10px}
  .br-mmr-card{padding:7px 16px;gap:4px}
  .br-mmr-old{font-size:15px}
  .br-mmr-new{font-size:18px}
  .br-loot{padding:10px 12px;gap:6px}
  .br-drops{gap:3px}
  .br-drop{padding:4px 8px}
  .br-pilots{gap:6px}
  .br-pilot-card{padding:8px 10px;gap:5px}
  .br-pilot-portrait{width:28px;height:28px}
  .br-pilot-name{font-size:13px}
}

/* Touch: nothing a finger has to hit stays under 44px. */
@media (pointer:coarse){
  /* `min-height` only — a `display` here would beat .battle-escape-btn's own
     `display:none` and strand the Escape button on screen out of battle. */
  .battle-stage .btn{min-height:44px}
  /* The 36×18 settings switch keeps its size and gains a finger-sized hit
     area, so it still reads as a switch and still catches a thumb. */
  .battle-stage .setting-row .toggle::after{content:'';position:absolute;inset:-13px}
}