/* Battlefield HUD: top information, separate left movement and right combat zones. */
:root {
  --edge: 20px;
  --map-size: 156px;
  --info-left: 196px;
  --skill-size: 56px;
  --attack-size: 94px;
  --skill-gap: 8px;
  --ally-size: 38px;
  --ally-gap: 5px;
  --shop-size: 28px;
  --top-row-height: max(24px, calc(var(--ally-size) + 3px));
}

#match-bar {
  top: var(--edge);
  left: var(--edge);
  right: var(--edge);
  width: auto;
  height: var(--top-row-height);
  padding: 0;
  gap: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  background: transparent;
  border: none;
}
.brand, #network, #objectives { display: none; }
.score { position: static; transform: none; display: grid; grid-column: 2; grid-row: 1; grid-template-columns: 44px 64px 44px; align-items: center; gap: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.score b { font-size: 22px; min-width: 22px; text-shadow: 0 1px 3px #000; }
.score span { font-size: 12px; text-shadow: 0 1px 3px #000; }
.match-tools { grid-column: 3; grid-row: 1; justify-self: end; gap: 5px; }
.match-tools button {
  border: none;
  border-radius: 50%;
  background: #0b211b80;
  width: 32px;
  height: 32px;
}
#match-bar #logout { position: static; width: 32px; height: 32px; border: none; border-radius: 50%; background: #0b211b80; }
#feed { top: 108px; right: var(--edge); max-width: 240px; }
#announcement { top: 28%; }

#hud { inset: 0; display: block; pointer-events: none; }
#hud > div, #hud > section { pointer-events: none; }
#hud button, #minimap { pointer-events: auto; }
#map-wrap {
  position: absolute;
  top: var(--edge);
  left: var(--edge);
  bottom: auto;
  width: calc(var(--map-size) + 8px);
  padding: 3px;
  background: #0c211dc9;
  border: 1px solid #a1b8b780;
}
#minimap { width: var(--map-size); height: var(--map-size); }
#minimap { touch-action: none; }
#minimap.camera-dragging { cursor: grabbing; }
#camera-home { display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:44px;margin-top:3px;padding:3px;font-size:10px;border-color:#71908a80;background:#132722d9; }
#camera-home svg { width:16px;height:16px; }
#camera-home.active { color:#eadc9c;border-color:#c2b17c80; }
#camera-help { font-size:12px;line-height:1.5;color:#b8c8b1; }
#wave { display: none; }
#team-hud {
  position: absolute;
  left: var(--info-left);
  top: var(--edge);
  display: flex;
  min-height: var(--top-row-height);
  align-items: center;
  gap: 12px;
}
.economy { position: static; display: flex; align-items: center; gap: 6px; width: auto; height: var(--shop-size); }
.economy > span { white-space: nowrap; font-size: 12px; color: #ffe1a0; text-shadow: 0 1px 3px #000; }
.economy button { position: static; width: var(--shop-size); height: var(--shop-size); padding: 0; border: 1px solid #c2b17c80; border-radius: 4px; background: #162a2399; display: grid; place-items: center; }
.economy button svg { width: 19px; height: 19px; color: #eed9a4; }
#allies { position: static; display: flex; gap: var(--ally-gap); }
.ally { width: var(--ally-size); flex-shrink: 0; background: #132722a3; border: 1px solid #71908a80; }
.ally img { display: block; width: calc(var(--ally-size) - 2px); height: calc(var(--ally-size) - 2px); image-rendering: pixelated; }
.ally b { font-size: 10px; bottom: 7px; }

#skills {
  --attack-inset: max(0px, (2 * var(--skill-size) + var(--skill-gap) - var(--attack-size)) / 2);
  position: absolute;
  right: var(--edge);
  bottom: var(--edge);
  width: calc(var(--attack-inset) + var(--attack-size) + 2 * var(--skill-gap) + var(--skill-size));
  height: calc(var(--attack-size) + var(--skill-gap) + var(--skill-size));
  display: block;
  margin: 0;
}
.skill-row { position: absolute; inset: 0; display: block; }
.skill { position: absolute; width: var(--skill-size); height: var(--skill-size); }
/* Two left buttons and two above, without reserving a circular orbit. */
.skill[data-skill="0"] { right: calc(var(--attack-inset) + var(--attack-size) + var(--skill-gap)); bottom: calc((var(--attack-size) - var(--skill-size)) / 2 - 15px); }
.skill[data-skill="1"] { right: calc(var(--attack-inset) + var(--attack-size) + 2 * var(--skill-gap) - 5px); bottom: calc((var(--attack-size) + var(--skill-size)) / 2 + var(--skill-gap) - 14px); }
.skill[data-skill="2"] { right: calc(var(--skill-size) + var(--skill-gap)); bottom: calc(var(--attack-size) + var(--skill-gap)); }
.skill[data-skill="3"] { right: 0; bottom: calc(var(--attack-size) + var(--skill-gap)); }
.skill > button.cast {
  display: block;
  width: var(--skill-size);
  height: var(--skill-size);
  padding: 2px;
  border: 2px solid #e2c382;
  border-radius: 50%;
  background: #132e29d9;
  box-shadow: inset 0 0 0 1px #142b27, 0 2px 6px #0006;
  touch-action: manipulation;
}
.skill.selected > button.cast { border-color: #96f0ff; box-shadow: 0 0 0 2px #63d9eba0, 0 0 16px #63d9eb60; }
.skill > button.cast:disabled { opacity: .8; }
.skill img { object-fit: contain; image-rendering: pixelated; background: #18342c; }
.skill .hotkey, .skill .rank { display: none; }
.skill .cooldown { font-size: 23px; background: #05120dbd; text-shadow: 0 1px 4px #000; }
.skill .upgrade { top: -10px; left: -5px; width: 24px; height: 24px; z-index: 1; background: #d3b965; color: #102d28; }
.utility { position: absolute; inset: 0; display: block; pointer-events: none; }
.utility button { position: absolute; padding: 0; display: grid; place-items: center; border-radius: 50%; background: #183b458c; border: 2px solid #6faebd; box-shadow: inset 0 0 0 4px #132f4480, 0 2px 8px #0005; }
.utility #attack { right: var(--attack-inset); bottom: 0; width: var(--attack-size); height: var(--attack-size); border-radius: 50%; border: 2px solid #79b8dc; background: #243b699e; }
.utility #attack svg { width: 44px; height: 44px; color: #c9e1ff; }
.utility #attack.active { border-color: #eacf7f; background: #456794bd; }
#capture {right:calc(var(--attack-inset) + var(--attack-size) + 2 * var(--skill-gap) + var(--skill-size));bottom:calc((var(--attack-size) - var(--skill-size)) / 2 - 15px);width:var(--skill-size);height:var(--skill-size);border-color:#d9c68d;background:#264b42e0;touch-action:manipulation;overflow:hidden}
/* L10038 has its visible net at x=25..114/y=62..115 in a 128px canvas.
   Center that artwork, not the transparent canvas, and fill the circular slot. */
#capture img {position:absolute;left:50%;top:50%;width:225%;height:225%;transform:translate(-54.3%,-69.1%);object-fit:contain;image-rendering:pixelated;padding:0;pointer-events:none}
#rally, #recall {bottom:calc((var(--attack-size) - var(--skill-size)) / 2 - 15px);width:var(--skill-size);height:var(--skill-size);touch-action:manipulation;overflow:hidden}
#recall {right:calc(var(--attack-inset) + var(--attack-size) + 3 * var(--skill-gap) + 2 * var(--skill-size))}
#rally {right:calc(var(--attack-inset) + var(--attack-size) + 4 * var(--skill-gap) + 3 * var(--skill-size))}
#rally svg, #recall svg {width:24px;height:24px;pointer-events:none;color:#e5e7be}
#recall.active {border-color:#96f0ff;background:#254f64}
.utility .utility-countdown {position:absolute;inset:0;display:grid;place-items:center;background:#05120dc9;border-radius:50%;color:#fff;font-size:20px;pointer-events:none}
@media(max-width:600px) {
  #rally, #recall, #capture {bottom:calc(var(--attack-size) + var(--skill-size) + 2 * var(--skill-gap) + 16px)}
  #capture {right:0}
  #recall {right:calc(var(--skill-size) + var(--skill-gap))}
  #rally {right:calc(2 * var(--skill-size) + 2 * var(--skill-gap))}
}
#capture-count {position:absolute;z-index:1;bottom:2px;font-size:10px;color:#efe3b8;background:#10271fe6;border-radius:4px;padding:0 3px;line-height:12px;text-shadow:0 1px 2px #000}
#capture[aria-pressed="true"] {border-color:#96f0ff;box-shadow:0 0 0 2px #63d9eba0}
#capture:disabled {opacity:.6}
#capture-cooldown {position:absolute;z-index:2;inset:0;background:#05120dc9;border-radius:50%;align-items:center;justify-content:center;font-size:20px;color:#fff}
#capture-cooldown:not([hidden]) {display:flex}
#captured-squad {display:flex;gap:3px;position:absolute;top:calc(100% + 5px);left:0;width:100%;pointer-events:none}
.captured-pet {position:relative;flex:1;min-width:0;max-width:38px;height:38px;background:#173d30b0;border:1px solid #7db995;border-radius:4px;overflow:hidden}
.captured-pet img {width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.captured-pet .pet-hp {position:absolute;bottom:0;left:0;height:3px;background:#97d677}
.captured-pet .pet-level {position:absolute;right:1px;bottom:5px;font-size:10px;color:#fff2a8;background:#0b201dc9;padding:0 2px}
.captured-pet .pet-xp {position:absolute;bottom:3px;left:0;height:2px;background:#7fbcf3}
#progression-info {border-top:1px solid #638174;margin-top:14px;padding-top:4px;font-size:12px;line-height:1.5}
#progression-info h3 {font-size:14px}
#progression-info summary {cursor:pointer;color:#ecd68d}
#pet-progress p {padding:8px;background:#172d27;border-left:2px solid #97d677;overflow-wrap:anywhere}
#settings {max-height:85dvh;overflow-y:auto}
.captured-pet b {position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:#09150c99;font-size:12px}
@media(max-width:420px) {.captured-pet{height:24px}}
#joystick {
  display: block;
  left: calc(var(--edge) + 16px);
  bottom: calc(var(--edge) + 16px);
  width: 126px;
  height: 126px;
  background: #2e516032;
  border: 1px solid #a0c6d34f;
  box-shadow: inset 0 0 0 14px #668caa15;
}
#joystick > div { width: 48px; height: 48px; left: calc(50% - 24px); top: calc(50% - 24px); background: #a2c5e94d; border: 1px solid #c1deec99; box-shadow: 0 2px 10px #0d212850; }

@media (max-width: 1000px) {
  :root { --edge: 12px; --map-size: 116px; --info-left: 148px; --skill-size: 50px; --attack-size: 82px; --ally-size: 34px; --shop-size: 26px; }
  #joystick { width: 112px; height: 112px; }
}

@media (min-width: 1001px) and (max-width: 1200px) {
  :root { --map-size: 116px; --info-left: 148px; --ally-size: 28px; --ally-gap: 4px; }
}

@media (min-width: 800px) and (max-width: 1000px) {
  :root { --map-size: 92px; --info-left: 118px; --ally-size: clamp(23px, calc(23px + (100vw - 800px) * .06), 34px); --ally-gap: 3px; }
  #team-hud { gap: 8px; }
  .economy { gap: 4px; }
  .economy > span { font-size: 10px; }
  .score { grid-template-columns: 32px 52px 32px; gap: 6px; }
  .score b { font-size: 18px; }
}

@media (max-height: 550px), (max-width: 700px) {
  :root { --skill-size: 48px; --attack-size: 76px; }
  .skill .cooldown { font-size: 20px; }
  .utility #attack svg { width: 37px; height: 37px; }
  #joystick { left: var(--edge); bottom: var(--edge); width: 96px; height: 96px; }
}

@media (max-width: 700px) {
  :root { --edge: 10px; --map-size: 92px; --info-left: 118px; --ally-size: 29px; --ally-gap: 4px; --shop-size: 26px; }
  #match-bar { gap: 8px; }
  .score { grid-template-columns: 32px 52px 32px; gap: 6px; }
  .score b { font-size: 16px; min-width: 32px; }
  .score span { font-size: 10px; min-width: 36px; }
  .match-tools { gap: 2px; }
  .match-tools button { width: 24px; height: 24px; }
  .match-tools button svg { width: 16px; height: 16px; }
  #sound { display: none; }
  #team-hud { gap: 8px; }
  .economy { gap: 4px; }
  .economy > span { font-size: 10px; }
  .ally b { font-size: 8px; }
  #feed { top: 181px; max-width: 200px; font-size: 9px; }
  #match-bar #logout { width: 24px; height: 24px; }
}

/* Short phones keep announcements above the utility row, not over its icons. */
@media (max-width: 700px) and (max-height: 550px) {
  #feed { top: 48px; max-width: 180px; }
}

@media (max-width: 360px) {
  :root { --map-size: 76px; --info-left: 100px; --ally-size: 23px; --ally-gap: 3px; --shop-size: 24px; }
}

@media (max-width: 420px) {
  :root { --skill-size: 44px; --attack-size: 68px; }
  .utility #attack svg { width: 33px; height: 33px; }
  #joystick { width: 84px; height: 84px; }
  #joystick > div { width: 40px; height: 40px; left: calc(50% - 20px); top: calc(50% - 20px); }
}

/* Keep every information/control group on one top row, even in a narrow panel. */
@media (min-width: 600px) and (max-width: 799px) {
  :root { --edge: 10px; --map-size: 68px; --info-left: 94px; --ally-size: 18px; --ally-gap: 2px; --shop-size: 22px; }
  #team-hud { gap: 4px; }
  .economy { gap: 3px; }
  .economy > span { font-size: 8px; }
  .economy button svg { width: 16px; height: 16px; }
  .score { grid-template-columns: 24px 40px 24px; gap: 3px; }
  .score b { font-size: 14px; min-width: 0; }
  .score span { font-size: 9px; min-width: 0; }
  .match-tools { gap: 2px; }
  .match-tools button, #match-bar #logout { width: 24px; height: 24px; }
  #sound { display: none; }
}

@media (max-width: 599px) {
  :root { --info-left: var(--edge); --ally-size: 18px; --ally-gap: 2px; --shop-size: 22px; }
  #map-wrap { top: calc(var(--edge) + var(--top-row-height) + 8px); }
  #team-hud { gap: 4px; }
  .economy { gap: 3px; }
  .economy > span { font-size: 8px; }
  .economy button svg { width: 16px; height: 16px; }
  .score { grid-template-columns: 24px 40px 24px; gap: 3px; }
  .score b { font-size: 14px; min-width: 0; }
  .score span { font-size: 9px; min-width: 0; }
  .ally b { font-size: 7px; bottom: 5px; }
}

@media (max-width: 440px) {
  :root { --ally-size: 14px; --ally-gap: 1px; --shop-size: 18px; }
  #team-hud { gap: 3px; }
  .economy { gap: 2px; }
  .economy button svg { width: 13px; height: 13px; }
  .ally b { font-size: 6px; bottom: 4px; right: 0; }
}

@media (max-width: 360px) {
  :root { --edge: 6px; --ally-size: 11px; }
  .economy > span { font-size: 7px; }
  .score { grid-template-columns: 18px 32px 18px; gap: 2px; }
  .score b { font-size: 10px; }
  .score span { font-size: 8px; }
  .match-tools button, #match-bar #logout { width: 20px; height: 20px; }
  .match-tools button svg { width: 13px; height: 13px; }
}