/* ==========================================================================
   In-game HUD: round tracker, traits, player list, items, banners, toasts…
   Panels hug the screen edges; the board center stays clear.
   ========================================================================== */

.layer-hud > * { position: absolute; }
.layer-hud { animation: fadeIn 0.5s ease; }

.panel-kicker {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 193, 112, 0.75);
  margin: 0 0 0.4rem 0.2rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ---------- Top-left menu + boons -------------------------------------- */
.hud-menu { top: 0.9rem; left: 1rem; display: flex; align-items: center; gap: 0.4rem; }
.hud-icon-btn {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 0.45rem;
  border: 1px solid var(--line);
  background: rgba(10, 13, 32, 0.85);
  color: var(--gold-hi);
  cursor: pointer;
  font-size: 1.05rem;
  transition: transform 0.15s var(--ease-out), border-color 0.2s, box-shadow 0.2s;
}
.hud-icon-btn:hover { transform: translateY(-0.08rem); border-color: var(--gold); box-shadow: 0 0 0.9rem rgba(232, 193, 112, 0.3); }
.hud-icon-btn:active { transform: scale(0.94); }
.boon-strip { display: flex; gap: 0.35rem; margin-left: 0.4rem; }
.boon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-size: 1rem;
  cursor: help;
  animation: popIn 0.4s var(--ease-back);
}
.boon.tier-silver { background: linear-gradient(160deg, #eef2fa, #7f8aa3); }
.boon.tier-gold { background: linear-gradient(160deg, #fff1c0, #c28b2c); }
.boon.tier-prismatic { background: linear-gradient(135deg, #ffd1f7, #b7e8ff 30%, #d7c2ff 55%, #fff3b8 80%); animation: popIn 0.4s var(--ease-back), hueSpin 6s linear infinite; }
.boon span { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.boon, .sb-boon { position: relative; }
.boon .boon-art { left: 14%; top: 14%; width: 72%; height: 72%; }

/* ---------- Round tracker ------------------------------------------------ */
.round-tracker {
  top: 0.7rem;
  left: 50%;
  translate: -50% 0;
  min-width: 24rem;
  padding: 0.55rem 0.9rem 0.6rem;
  animation: dropIn 0.5s var(--ease-out);
}
.rt-top { display: flex; align-items: center; gap: 0.8rem; }
.rt-stage { display: flex; flex-direction: column; align-items: center; line-height: 1; padding-right: 0.8rem; border-right: 1px solid rgba(232, 193, 112, 0.25); }
.rt-stage-label { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.rt-stage-num { font-family: var(--font-num); font-weight: 900; font-size: 1.45rem; color: var(--gold-hi); text-shadow: 0 0 0.7rem rgba(232, 193, 112, 0.45); }
.rt-pips { display: flex; align-items: center; gap: 0.45rem; flex: 1; justify-content: center; }
.rt-pip {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-3);
  font-size: 0.85rem;
  transition: transform 0.3s var(--ease-back), background 0.3s, border-color 0.3s;
}
.rt-pip.pve { color: #ffb36b; border-color: rgba(255, 170, 90, 0.35); border-radius: 0.35rem; transform: rotate(45deg); }
.rt-pip.pve .ico { transform: rotate(-45deg); }
.rt-pip.past { opacity: 0.8; }
.rt-pip.win { background: rgba(60, 190, 110, 0.35); border-color: rgba(93, 224, 138, 0.7); color: #c6ffd8; }
.rt-pip.loss { background: rgba(200, 50, 70, 0.35); border-color: rgba(255, 110, 125, 0.7); color: #ffd0d6; }
.rt-pip.draw { background: rgba(160, 160, 180, 0.3); border-color: rgba(200, 200, 220, 0.5); }
.rt-pip.current {
  transform: scale(1.28);
  background: radial-gradient(circle at 40% 35%, #fff2c6, #e0ae4f 60%, #8a5f22);
  border-color: #fff0c2;
  color: #2a1a04;
  box-shadow: 0 0 0.9rem rgba(232, 193, 112, 0.8);
  animation: pulseGlow 2s ease-in-out infinite;
}
.rt-pip.pve.current { transform: rotate(45deg) scale(1.22); }
.rt-pip-boon { position: absolute; top: -0.45rem; right: -0.35rem; font-size: 0.62rem; color: #d8b8ff; text-shadow: 0 0 0.35rem #a57bff; }
.rt-pip.pve .rt-pip-boon { transform: rotate(-45deg); }
.rt-mid { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.45rem; }
.rt-round { font-family: var(--font-num); font-weight: 900; font-size: 0.95rem; color: var(--text); letter-spacing: 0.06em; }
.rt-sep { color: var(--text-3); }
.rt-phase { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.round-tracker[data-phase='combat'] .rt-phase { color: #ff8a96; }
.round-tracker[data-phase='results'] .rt-phase { color: #9fd0ff; }
.rt-sec { font-family: var(--font-num); font-weight: 900; font-size: 1.1rem; min-width: 1.6rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.rt-ready {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.5rem;
  padding: 0.22rem 0.55rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(93, 224, 138, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: #9ff0bb;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.rt-ready .ico { font-size: 0.8rem; opacity: 0.5; }
.rt-ready:hover { border-color: var(--green); box-shadow: 0 0 0.6rem rgba(93, 224, 138, 0.35); }
.rt-ready.on { background: linear-gradient(180deg, #3fae6b, #1f6b3f); color: #eafff1; border-color: #8ff0b3; box-shadow: 0 0 0.9rem rgba(93, 224, 138, 0.45); }
.rt-ready.on .ico { opacity: 1; }
.rt-bar { position: relative; height: 0.32rem; margin-top: 0.45rem; border-radius: 999px; background: rgba(0, 0, 0, 0.55); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.rt-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, #b98331, #f3d58a 70%, #fff5d6);
  box-shadow: 0 0 0.6rem rgba(232, 193, 112, 0.7);
  transition: background 0.4s;
}
.round-tracker[data-phase='combat'] .rt-fill { background: linear-gradient(90deg, #9c1f2e, #ff5d6d 70%, #ffc2c8); box-shadow: 0 0 0.6rem rgba(255, 77, 94, 0.6); }
.round-tracker[data-phase='results'] .rt-fill { background: linear-gradient(90deg, #2c5aa8, #7fb4ff); }
.round-tracker.warn .rt-fill { background: linear-gradient(90deg, #c2410c, #ff8a3d 60%, #ffd08a); box-shadow: 0 0 0.8rem rgba(255, 120, 50, 0.8); }
.round-tracker.critical .rt-fill { background: linear-gradient(90deg, #b3122a, #ff4d5e 60%, #ffb0b8); animation: breathe 0.5s ease-in-out infinite; }
.round-tracker.warn .rt-sec { color: #ffb36b; }
.round-tracker.critical .rt-sec { color: #ff6b7a; text-shadow: 0 0 0.6rem rgba(255, 77, 94, 0.8); }
.rt-bar-glint { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%); background-size: 250% 100%; animation: shimmer 2.4s linear infinite; mix-blend-mode: overlay; }

/* ---------- Scout bar ---------------------------------------------------- */
.scout-bar {
  top: 6.8rem;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem 0.4rem 0.9rem;
  border-radius: 999px;
  border-color: rgba(127, 216, 255, 0.5);
  box-shadow: 0 0 1.2rem rgba(63, 208, 255, 0.25), var(--shadow);
  animation: dropIn 0.3s var(--ease-out);
  white-space: nowrap;
}
.scout-eye { color: var(--cyan); font-size: 1.1rem; display: flex; }
.scout-text { font-size: 0.86rem; color: var(--text-2); }
.scout-name { font-weight: 800; color: #bfeaff; }
.scout-sep { width: 1px; height: 1.2rem; background: rgba(255, 255, 255, 0.15); }
.scout-return {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid rgba(127, 216, 255, 0.4);
  background: rgba(63, 208, 255, 0.12); color: #dff6ff; font-size: 0.76rem; font-weight: 700; cursor: pointer; transition: background 0.2s, box-shadow 0.2s;
}
.scout-return:hover { background: rgba(63, 208, 255, 0.25); box-shadow: 0 0 0.8rem rgba(63, 208, 255, 0.35); }

/* ---------- Trait tracker ------------------------------------------------ */
.trait-tracker {
  top: 4rem;
  left: 1rem;
  width: 13.2rem;
  max-height: calc(100% - 26rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.traits-list { display: flex; flex-direction: column; gap: 0.3rem; overflow-y: auto; scrollbar-width: none; padding: 0.1rem 0.2rem 0.3rem 0.1rem; }
.traits-list::-webkit-scrollbar { display: none; }
.traits-empty {
  padding: 0.6rem 0.8rem; border-radius: 0.45rem; background: rgba(8, 10, 26, 0.6); border: 1px dashed rgba(232, 193, 112, 0.25);
  color: var(--text-3); font-size: 0.74rem; line-height: 1.4;
}
.trait-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0.55rem 0.28rem 0.3rem;
  border-radius: 0.45rem;
  background: linear-gradient(90deg, rgba(12, 15, 36, 0.86), rgba(12, 15, 36, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: help;
  transition: transform 0.18s var(--ease-out), border-color 0.2s, background 0.2s;
  animation: riseIn 0.3s var(--ease-out) both;
}
.trait-row:hover { transform: translateX(0.2rem); border-color: rgba(232, 193, 112, 0.45); background: linear-gradient(90deg, rgba(30, 30, 70, 0.9), rgba(20, 22, 52, 0.7)); }
.trait-row.inactive { opacity: 0.68; }
.trait-row.inactive:hover { opacity: 1; }
.trait-row.active.bronze { border-color: rgba(201, 133, 74, 0.35); }
.trait-row.active.silver { border-color: rgba(210, 220, 235, 0.35); }
.trait-row.active.gold { border-color: rgba(255, 214, 107, 0.45); box-shadow: inset 0 0 1rem rgba(255, 200, 90, 0.08); }
.trait-row.active.prismatic { border-color: rgba(220, 180, 255, 0.55); box-shadow: inset 0 0 1rem rgba(200, 150, 255, 0.12); }
.trait-row.upgraded { animation: traitUp 0.9s var(--ease-out); }
@keyframes traitUp { 0% { box-shadow: 0 0 0 0 rgba(255, 220, 140, 0.9); transform: scale(1.06); } 100% { box-shadow: 0 0 0 0.8rem rgba(255, 220, 140, 0); transform: none; } }
.trait-count {
  min-width: 1.35rem;
  text-align: center;
  font-family: var(--font-num);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--text);
}
.trait-row.inactive .trait-count { color: var(--text-3); font-size: 0.92rem; }
.trait-info { min-width: 0; flex: 1; }
.trait-name { font-weight: 700; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trait-bps { font-size: 0.66rem; color: var(--text-3); display: flex; align-items: center; gap: 0.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bp.on { color: var(--text-2); }
.bp.cur { color: var(--gold-hi); text-shadow: 0 0 0.35rem rgba(232, 193, 112, 0.7); }
.bp-sep { opacity: 0.5; }
.bp-next { color: var(--text-3); }

/* Hex trait badge */
.tbadge {
  position: relative;
  width: 2.05rem;
  height: 2.3rem;
  flex: none;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #3b3f55;
  display: grid;
  place-items: center;
}
.tbadge-inner {
  position: absolute;
  inset: 0.14rem;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(180deg, #23273b, #14172a);
  display: grid;
  place-items: center;
}
.tbadge-ico { font-size: 0.95rem; filter: grayscale(0.6) brightness(0.85); line-height: 1; }
.tbadge.bronze { background: linear-gradient(160deg, #f0b27a, #8c5125 60%, #5e3212); }
.tbadge.bronze .tbadge-inner { background: linear-gradient(170deg, #b97443, #6d3c19); }
.tbadge.silver { background: linear-gradient(160deg, #ffffff, #9aa6ba 60%, #5d6679); }
.tbadge.silver .tbadge-inner { background: linear-gradient(170deg, #cfd7e6, #7d879c); }
.tbadge.gold { background: linear-gradient(160deg, #fff6d0, #e3b04e 55%, #8a5f22); }
.tbadge.gold .tbadge-inner { background: linear-gradient(170deg, #ffd978, #b7822d); }
.tbadge.prismatic { background: linear-gradient(135deg, #ffd1f7, #b7e8ff 25%, #d7c2ff 50%, #fff3b8 75%, #c2ffe8); animation: hueSpin 5s linear infinite; }
.tbadge.prismatic .tbadge-inner { background: linear-gradient(135deg, #f7b9ff, #8fd8ff 35%, #b99cff 65%, #ffe699); }
.tbadge.bronze .tbadge-ico, .tbadge.silver .tbadge-ico, .tbadge.gold .tbadge-ico, .tbadge.prismatic .tbadge-ico { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.tbadge.sm { width: 1.35rem; height: 1.5rem; }
.tbadge.sm .tbadge-inner { inset: 0.1rem; }
.tbadge.sm .tbadge-ico { font-size: 0.62rem; }
.tbadge.lg { width: 2.8rem; height: 3.15rem; }
.tbadge.lg .tbadge-ico { font-size: 1.35rem; }

/* ---------- Item bench ------------------------------------------------------ */
.item-bench { left: 1rem; bottom: 1rem; }
.item-bench.empty { opacity: 0.55; }
.item-grid {
  display: grid;
  grid-template-columns: repeat(2, 2.6rem);
  gap: 0.35rem;
  padding: 0.45rem;
  border-radius: 0.6rem;
  background: rgba(8, 10, 26, 0.65);
  border: 1px solid var(--line);
}
.item-slot {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
  transition: transform 0.15s var(--ease-out);
}
.item-slot:hover { transform: scale(1.1); }
.item-slot:active { cursor: grabbing; }
.item-slot.fresh { animation: popIn 0.45s var(--ease-back); }
.item-slot.empty { cursor: default; background: radial-gradient(circle, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0.15rem 0.4rem rgba(0, 0, 0, 0.6); }
.item-slot.empty:hover { transform: none; }
.item-slot.dragging { opacity: 0.3; }
.item-orb {
  position: relative;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.55), transparent 42%),
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--ic) 75%, #000), color-mix(in srgb, var(--ic) 30%, #05060f) 100%);
  border: 2px solid color-mix(in srgb, var(--ic) 70%, #fff);
  box-shadow: 0 0 0.7rem color-mix(in srgb, var(--ic) 60%, transparent), inset 0 -0.2rem 0.4rem rgba(0, 0, 0, 0.45);
}
.item-orb.combined { border-radius: 0.45rem; border-color: #f3d58a; box-shadow: 0 0 0.8rem rgba(232, 193, 112, 0.55), inset 0 -0.2rem 0.4rem rgba(0, 0, 0, 0.45); }
.item-orb-ico { font-size: 1.15rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); line-height: 1; }
.item-orb.has-art-src { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ic) 35%, #10122a), #07080f 75%); }
.item-orb .item-orb-art { left: 4%; top: 4%; width: 92%; height: 92%; }
.item-orb.xs { width: 1.35rem; height: 1.35rem; border-width: 1px; }
.item-orb.xs .item-orb-ico { font-size: 0.7rem; }
.item-orb.sm { width: 1.8rem; height: 1.8rem; }
.item-orb.sm .item-orb-ico { font-size: 0.9rem; }
.item-orb.md { width: 2.6rem; height: 2.6rem; }
.item-orb.lg { width: 3rem; height: 3rem; }
.item-orb.lg .item-orb-ico { font-size: 1.5rem; }
.item-ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.item-ghost-orb { filter: drop-shadow(0 0.4rem 0.6rem rgba(0, 0, 0, 0.6)); animation: popIn 0.2s var(--ease-back); }
.item-ghost.valid .item-ghost-orb .item-orb { box-shadow: 0 0 0 3px rgba(93, 224, 138, 0.8), 0 0 1.4rem rgba(93, 224, 138, 0.8); }
.item-ghost.invalid .item-ghost-orb .item-orb { box-shadow: 0 0 0 3px rgba(255, 77, 94, 0.8); }
.item-ghost-label { font-size: 0.72rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(0, 0, 0, 0.75); color: #b6ffcf; white-space: nowrap; }
.item-ghost-label:empty { display: none; }
.item-ghost.invalid .item-ghost-label { color: #ffb3bc; }

/* ---------- Player list --------------------------------------------------- */
.player-list { top: 0.9rem; right: 1rem; width: 15.6rem; }
.pl-list { display: flex; flex-direction: column; gap: 0.28rem; }
.pl-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55rem;
  height: 3.05rem;
  padding: 0 0.6rem 0 0.35rem;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, rgba(10, 13, 32, 0.66), rgba(10, 13, 32, 0.86));
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: transform 0.45s var(--ease-out), border-color 0.2s, background 0.2s, opacity 0.3s;
}
.pl-row:hover { border-color: rgba(127, 216, 255, 0.45); background: linear-gradient(90deg, rgba(20, 30, 60, 0.8), rgba(14, 18, 44, 0.92)); }
.pl-row:hover .pl-name { color: #fff; }
.pl-row.you { border-color: rgba(232, 193, 112, 0.7); background: linear-gradient(90deg, rgba(70, 52, 20, 0.55), rgba(16, 16, 36, 0.9)); box-shadow: 0 0 1rem rgba(232, 193, 112, 0.18), inset 0.2rem 0 0 var(--gold); }
.pl-row.scouted { border-color: rgba(127, 216, 255, 0.85); box-shadow: 0 0 1rem rgba(63, 208, 255, 0.28), inset 0.2rem 0 0 var(--cyan); }
.pl-row.opponent:not(.you) { box-shadow: inset -0.2rem 0 0 var(--red); }
.pl-row.dead { opacity: 0.42; filter: grayscale(1); }
.pl-row.hit { animation: shake 0.4s ease; }
.pl-row.hit .pl-hpbar { box-shadow: 0 0 0.6rem rgba(255, 77, 94, 0.8); }
.pl-avatar-wrap { position: relative; }
.pl-avatar {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--av) 75%, #fff), var(--av) 55%, color-mix(in srgb, var(--av) 55%, #000));
  border: 2px solid rgba(255, 255, 255, 0.28);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.8rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.pl-avatar .ico { font-size: 1.1rem; }
.pl-row.you .pl-avatar { border-color: var(--gold); box-shadow: 0 0 0.6rem rgba(232, 193, 112, 0.6); }
.pl-level {
  position: absolute;
  right: -0.3rem;
  bottom: -0.2rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #2b3158, #151936);
  border: 1px solid var(--gold);
  color: var(--gold-hi);
  font-size: 0.6rem;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.pl-main { min-width: 0; }
.pl-top { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.22rem; }
.pl-name { font-weight: 700; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); flex: 0 1 auto; min-width: 0; }
.pl-streak { display: inline-flex; align-items: center; gap: 0.08rem; font-size: 0.66rem; font-weight: 900; flex: none; }
.pl-streak.win { color: #ff9a45; filter: drop-shadow(0 0 0.25rem rgba(255, 130, 50, 0.8)); }
.pl-streak.loss { color: #7fd8ff; filter: drop-shadow(0 0 0.25rem rgba(100, 200, 255, 0.8)); }
.pl-marker { color: #ff6b7a; font-size: 0.8rem; display: flex; margin-left: auto; filter: drop-shadow(0 0 0.3rem rgba(255, 77, 94, 0.8)); animation: breathe 1.4s ease-in-out infinite; }
.pl-eye { color: var(--cyan); font-size: 0.85rem; display: flex; margin-left: auto; }
.pl-offline { color: #ff9aa5; font-size: 0.8rem; display: flex; }
.pl-hpbar { position: relative; height: 0.42rem; border-radius: 999px; background: rgba(0, 0, 0, 0.6); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow 0.3s; }
.pl-hp-fill, .pl-hp-trail { position: absolute; inset: 0; transform-origin: left center; border-radius: inherit; }
.pl-hp-trail { background: linear-gradient(90deg, #fff1f1, #ffb3b3); transition: transform 0.9s 0.35s var(--ease-out); }
.pl-hp-fill { background: linear-gradient(90deg, #2fae62, #6fe39a); transition: transform 0.3s var(--ease-out); }
.pl-row.you .pl-hp-fill { background: linear-gradient(90deg, #c08a2a, #ffe08a); }
.pl-row.low .pl-hp-fill { background: linear-gradient(90deg, #b3122a, #ff6b7a); }
.pl-hp-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, 0.45) calc(10% - 1px) 10%); pointer-events: none; }
.pl-hp-num { font-family: var(--font-num); font-weight: 900; font-size: 1rem; min-width: 1.9rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.pl-row.low .pl-hp-num { color: #ff8a96; }
.pl-place { position: absolute; right: 0.6rem; font-family: var(--font-num); font-weight: 900; font-size: 0.95rem; color: var(--text-2); }
.pl-dmg { position: absolute; right: 2.6rem; top: 0.2rem; font-weight: 900; font-size: 0.9rem; color: #ff6b7a; text-shadow: 0 0 0.4rem rgba(255, 77, 94, 0.9), 0 1px 2px #000; pointer-events: none; animation: floatUp 1.2s ease-out forwards; }

/* ---------- Banners -------------------------------------------------------------- */
.banner-wrap { position: absolute; left: 0; right: 0; top: 17%; display: flex; justify-content: center; pointer-events: none; }
.banner {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.7rem 2.4rem 0.8rem;
  animation: bannerIn 0.5s var(--ease-out) both;
  --bc: var(--gold);
}
.banner.out { animation: bannerOut 0.4s ease-in forwards; }
@keyframes bannerIn { 0% { opacity: 0; transform: scale(1.35); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes bannerOut { to { opacity: 0; transform: translateY(-0.8rem) scale(0.96); filter: blur(3px); } }
.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(6, 8, 22, 0.82) 18%, rgba(6, 8, 22, 0.82) 82%, transparent);
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--bc), transparent) 1;
  z-index: -1;
}
.banner-flare { position: absolute; left: 50%; top: 50%; width: 22rem; height: 5rem; transform: translate(-50%, -50%); background: radial-gradient(ellipse, color-mix(in srgb, var(--bc) 40%, transparent), transparent 70%); z-index: -1; filter: blur(0.5rem); }
.banner-line { width: 5rem; height: 2px; background: linear-gradient(90deg, transparent, var(--bc)); }
.banner-line.r { background: linear-gradient(-90deg, transparent, var(--bc)); }
.banner-body { text-align: center; }
.banner-kicker { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: color-mix(in srgb, var(--bc) 70%, #fff); margin-bottom: 0.15rem; }
.banner-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 0 1.2rem color-mix(in srgb, var(--bc) 80%, transparent), 0 0.15rem 0 rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}
.banner-ico { margin-right: 0.5rem; }
.banner-sub { margin-top: 0.2rem; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-2); white-space: nowrap; }
.banner-stage { --bc: #e8c170; }
.banner-stage .banner-title { font-size: 3.2rem; background: linear-gradient(180deg, #fffaf0, #f3cf7c 55%, #b98331); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 0.9rem rgba(232, 193, 112, 0.55)); }
.banner-phase { --bc: #c9b3ff; }
.banner-pve { --bc: #ffab5c; }
.banner-combat { --bc: #ff4d5e; }
.banner-combat .banner-title { font-size: 3rem; }
.banner-victory { --bc: #5de08a; }
.banner-victory .banner-title { color: #eafff1; }
.banner-defeat { --bc: #ff4d5e; }
.banner-defeat .banner-title { color: #ffe3e6; }
.banner-defeat .banner-sub { color: #ff8a96; font-size: 1.3rem; font-family: var(--font-num); font-weight: 900; letter-spacing: 0.02em; }
.banner-draw { --bc: #aab4cc; }
.banner-draw .banner-sub { color: #ffb3bc; font-family: var(--font-num); font-weight: 900; }

/* ---------- Toasts -------------------------------------------------------------- */
.toasts {
  position: absolute;
  right: 1rem;
  top: 28.4rem;
  width: 17rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  pointer-events: none !important;
}
body[data-screen='menu'] .toasts, body[data-screen='multiplayer'] .toasts, body[data-screen='lobby'] .toasts { top: auto; bottom: 1.2rem; }
.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, rgba(20, 24, 54, 0.95), rgba(10, 12, 30, 0.95));
  border: 1px solid rgba(232, 193, 112, 0.3);
  box-shadow: var(--shadow);
  pointer-events: auto;
  overflow: hidden;
  animation: toastIn 0.35s var(--ease-back);
  cursor: pointer;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(2rem) scale(0.95); } to { opacity: 1; transform: none; } }
.toast.out { animation: toastOut 0.3s ease-in forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(1.5rem); } }
.toast.bump { animation: bump 0.3s var(--ease-back); }
.toast-ico { flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; font-size: 1.1rem; border-radius: 50%; background: rgba(255, 255, 255, 0.06); }
.toast-portrait { width: 1.9rem; height: 1.9rem; border-radius: 50%; font-size: 0.5rem; }
.toast-body { min-width: 0; font-size: 0.8rem; line-height: 1.35; color: var(--text); }
.toast-title { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.toast-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: 0.35; transform-origin: left; animation: toastTimer var(--dur, 3.5s) linear forwards; color: var(--gold); }
@keyframes toastTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast-error { border-color: rgba(255, 110, 125, 0.55); background: linear-gradient(90deg, rgba(70, 14, 26, 0.95), rgba(26, 8, 16, 0.95)); }
.toast-error .toast-timer { color: var(--red); }
.toast-success { border-color: rgba(93, 224, 138, 0.5); }
.toast-gold .toast-body, .toast-gold { border-color: rgba(255, 214, 107, 0.5); }
.toast-star { border-color: rgba(255, 214, 107, 0.7); box-shadow: 0 0 1.2rem rgba(255, 214, 107, 0.25), var(--shadow); }
.toast-level { border-color: rgba(127, 216, 255, 0.5); }
.toast-boon { border-color: rgba(200, 160, 255, 0.6); }
.toast-death { border-color: rgba(180, 180, 200, 0.35); }
.toast-stars { color: #ffd66b; font-weight: 900; letter-spacing: 0.05em; text-shadow: 0 0 0.4rem rgba(255, 214, 107, 0.8); }
.toast-loot { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }

/* ---------- Augment pill ---------------------------------------------------- */
.aug-pill {
  top: 7rem;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 160, 255, 0.7);
  background: linear-gradient(90deg, rgba(60, 30, 120, 0.92), rgba(24, 16, 60, 0.92));
  color: #f1e6ff;
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 0 1.6rem rgba(170, 120, 255, 0.45), var(--shadow);
  animation: dropIn 0.3s var(--ease-out), augPulse 1.8s ease-in-out infinite;
}
@keyframes augPulse { 0%, 100% { box-shadow: 0 0 1rem rgba(170, 120, 255, 0.35), var(--shadow); } 50% { box-shadow: 0 0 2.2rem rgba(200, 150, 255, 0.75), var(--shadow); } }
.aug-pill-ico { font-size: 1.3rem; display: flex; }
.aug-pill-arrow { font-size: 1.2rem; opacity: 0.7; }

/* ---------- In-game chat ------------------------------------------------------- */
.ingame-chat { left: 8.4rem; bottom: 13.6rem; width: 18rem; display: flex; flex-direction: column; gap: 0.3rem; pointer-events: none !important; }
.igc-log { display: flex; flex-direction: column; gap: 0.15rem; }
.igc-line { font-size: 0.78rem; padding: 0.15rem 0.45rem; border-radius: 0.3rem; background: rgba(0, 0, 0, 0.5); text-shadow: 0 1px 2px #000; transition: opacity 1s; animation: riseIn 0.25s var(--ease-out); align-self: flex-start; max-width: 100%; word-break: break-word; }
.igc-line.faded { opacity: 0; }
.ingame-chat.open .igc-line.faded { opacity: 0.8; }
.igc-input { display: none; height: 2rem; font-size: 0.8rem; pointer-events: auto; }
.ingame-chat.open .igc-input { display: block; }

/* ---------- Scoreboard ------------------------------------------------------------ */
.scoreboard {
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(60rem, calc(100vw - 4rem));
  padding: 1.2rem 1.4rem 1.2rem;
  z-index: 5;
  animation: popIn 0.25s var(--ease-out);
  pointer-events: none !important;
}
.sb-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.6rem; }
.sb-head h2 { margin: 0; font-size: 1.4rem; }
.sb-round { color: var(--text-2); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; }
.sb-row {
  display: grid;
  grid-template-columns: 2.4rem 1fr 3.2rem 2.4rem 3.2rem 3.8rem 16rem 6rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.4rem;
  font-size: 0.86rem;
}
.sb-body .sb-row:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.sb-header { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.sb-row.you { background: rgba(232, 193, 112, 0.12) !important; box-shadow: inset 0.2rem 0 0 var(--gold); }
.sb-row.dead { opacity: 0.45; }
.sb-rank { font-family: var(--font-num); font-weight: 900; text-align: center; color: var(--gold-hi); }
.sb-player { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.sb-avatar { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--av); font-weight: 800; font-size: 0.62rem; color: #fff; flex: none; }
.sb-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-hp { font-family: var(--font-num); font-weight: 900; }
.sb-streak { display: inline-flex; align-items: center; gap: 0.1rem; font-weight: 800; }
.sb-streak.win { color: #ff9a45; }
.sb-streak.loss { color: #7fd8ff; }
.sb-traits { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.sb-trait { display: inline-flex; align-items: center; gap: 0.1rem; font-size: 0.72rem; font-weight: 800; }
.sb-boons { display: flex; gap: 0.2rem; }
.sb-boon { width: 1.4rem; height: 1.4rem; display: grid; place-items: center; font-size: 0.72rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #7f8aa3; }
.sb-boon.tier-gold { background: #c28b2c; }
.sb-boon.tier-prismatic { background: linear-gradient(135deg, #ffd1f7, #b7e8ff, #d7c2ff); }

/* ---------- Combat-phase tweaks ------------------------------------------------ */


/* ---------- Fallback backdrop when WebGL is unavailable ------------------------- */
.no-view #view-root::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 72%, #cbd 50%, transparent 51%), radial-gradient(1.5px 1.5px at 86% 64%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 86%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 44%, #dcf 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 60%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 94% 36%, #fff 50%, transparent 51%);
  opacity: 0.6;
}

/* ---------- Matchup pill (combat) + spectating ------------------------------------- */
.matchup {
  top: 6.8rem;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  font-weight: 800;
  font-size: 0.86rem;
}
.matchup.mu-in { animation: dropIn 0.35s var(--ease-out); }
.mu-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.mu-name.home { color: #9fe6ff; text-shadow: 0 0 0.6rem rgba(63, 208, 255, 0.6); }
.mu-name.away { color: #ffb3bc; text-shadow: 0 0 0.6rem rgba(255, 77, 94, 0.6); }
.mu-vs { font-family: var(--font-display); font-weight: 900; font-size: 0.8rem; color: var(--gold); letter-spacing: 0.12em; }
.mu-tag { font-size: 0.58rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.05rem 0.35rem; border-radius: 0.25rem; background: rgba(255, 171, 92, 0.18); color: #ffcf9e; border: 1px solid rgba(255, 171, 92, 0.4); }
.layer-hud.with-matchup .scout-bar { top: 9.6rem; }
.layer-hud.with-matchup .aug-pill { top: 9.8rem; }
.layer-hud.you-dead .shop-panel { filter: grayscale(1) brightness(0.55); pointer-events: none; }
.layer-hud.you-dead .item-bench { opacity: 0.4; pointer-events: none; }
.spectate-note {
  bottom: 13.8rem;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: rgba(10, 12, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-2);
  font-weight: 700;
  font-size: 0.82rem;
  pointer-events: none !important;
}