/* ==========================================================================
   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; }

/* ---------- Pause (games against bots) ---------------------------------- */
/* Dims the frozen scene but lets the board be hovered; the fade-in delay hides the blink of a menu pause ending. */
.pause-overlay {
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, rgba(5, 7, 20, 0.2) 30%, rgba(5, 7, 20, 0.65));
  pointer-events: none !important;
  animation: fadeIn 0.25s ease 0.12s both;
}
.pause-card { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding: 1.1rem 1.9rem 1.25rem; }
.pause-title { font-size: 2.1rem; }
.pause-sub { font-size: 0.82rem; color: var(--text-2); margin-bottom: 0.3rem; }
.pause-card .kbd { margin-left: 0.2rem; }
.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-slot.combine-target { transform: scale(1.15); box-shadow: 0 0 0 2px rgba(93, 224, 138, 0.9), 0 0 1.1rem rgba(93, 224, 138, 0.7); }
.item-slot.combine-bad { box-shadow: 0 0 0 2px rgba(255, 77, 94, 0.8); }
.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; }
.item-orb.xl { width: 5rem; height: 5rem; border-width: 3px; }
.item-orb.xl .item-orb-ico { font-size: 2.5rem; }

/* Forge flash (ItemBench.playForge, --forge-ms long): over the whole game, the two components fly together, flash and
   burst into the finished item. */
.forge-flash {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--fc) 40%, transparent), rgba(4, 5, 14, 0.6) 40%, rgba(4, 5, 14, 0.35));
  animation: forgeBg var(--forge-ms) ease-out both;
}
.forge-flash > * { grid-area: 1 / 1; }
.forge-part { animation: forgePart var(--forge-ms) ease-in both; }
.forge-part.l { --dx: -1; }
.forge-part.r { --dx: 1; }
.forge-ring { width: 6rem; height: 6rem; border-radius: 50%; border: 3px solid #fff4d6; box-shadow: 0 0 2rem var(--fc), inset 0 0 1.5rem var(--fc); animation: forgeRing var(--forge-ms) ease-out both; }
.forge-result { animation: forgeResult var(--forge-ms) var(--ease-out) both; }
@keyframes forgeBg { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes forgePart {
  0% { transform: translateX(calc(var(--dx) * 7rem)) scale(0.85); opacity: 0.5; }
  45% { transform: translateX(calc(var(--dx) * 0.8rem)); opacity: 1; filter: brightness(1.3); }
  55%, 100% { transform: scale(0.5); opacity: 0; filter: brightness(3); }
}
@keyframes forgeRing { 0%, 42% { transform: scale(0.2); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes forgeResult {
  0%, 45% { transform: scale(0.3); opacity: 0; filter: brightness(3); }
  70% { transform: scale(1.18); opacity: 1; filter: brightness(1.4); }
  100% { transform: scale(1); opacity: 1; filter: none; }
}

/* ---------- 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;
}

/* ---------- Player list: gold + interest, ready mark ---------------------- */
.pl-gold { display: inline-flex; align-items: center; gap: 0.12rem; flex: none; margin-left: auto; font-family: var(--font-num); font-size: 0.66rem; font-weight: 800; color: #ffe08a; font-variant-numeric: tabular-nums; }
.pl-gold .ico { font-size: 0.72rem; }
.pl-interest { padding: 0 0.22rem; border-radius: 0.25rem; background: rgba(255, 200, 80, 0.16); color: #ffd36b; font-size: 0.6rem; }
.pl-gold.none .pl-interest { background: rgba(255, 255, 255, 0.06); color: var(--text-3); }
.pl-gold.max .pl-interest { background: linear-gradient(180deg, #f3c44f, #a86a12); color: #2a1a04; box-shadow: 0 0 0.4rem rgba(255, 200, 80, 0.6); }
.pl-gold ~ .pl-eye, .pl-gold ~ .pl-marker { margin-left: 0; }
.pl-ready { display: flex; flex: none; color: var(--green); font-size: 0.78rem; filter: drop-shadow(0 0 0.3rem rgba(93, 224, 138, 0.7)); }
.scout-econ { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: #ffe08a; }
.scout-econ .muted { color: var(--text-2); }
.sb-interest { font-size: 0.8em; color: var(--text-2); }

/* ---------- Damage meter (desktop: under the player list) ----------------- */
.damage-meter {
  top: calc(var(--pl-bottom, 27.3rem) + 0.5rem);
  right: 1rem;
  width: 15.6rem;
  padding: 0.3rem 0.45rem 0.4rem;
  animation: riseIn 0.35s var(--ease-out);
}
.dm-top { display: flex; align-items: center; gap: 0.3rem; }
.dm-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  padding: 0.15rem 0.1rem;
  border: 0;
  background: none;
  color: var(--gold-hi);
  cursor: pointer;
  text-align: left;
}
.dm-head .ico { font-size: 0.85rem; }
.dm-title { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.dm-round { font-size: 0.7rem; font-weight: 800; color: var(--text-3); }
.dm-caret { margin-left: auto; font-size: 0.65rem; color: var(--text-3); transition: transform 0.2s; }
.damage-meter.collapsed .dm-caret { transform: rotate(-90deg); }
.damage-meter.collapsed .dm-body { display: none; }
.dm-tabs { display: flex; gap: 0.2rem; margin: 0.2rem 0 0.35rem; }
.dm-tab { flex: 1; }
.dm-tab, .dm-side {
  padding: 0.12rem 0.38rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-2);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
}
.dm-side { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 7rem; flex: none; }
.dm-side-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dm-side-swap { color: var(--gold); }
.dm-side.enemy { border-color: rgba(255, 110, 125, 0.5); color: #ffb3bb; }
.damage-meter.collapsed .dm-side { display: none; }
.dm-tab:hover, .dm-side:hover { border-color: rgba(232, 193, 112, 0.5); color: var(--text); }
.dm-tab.on, .dm-side.on { border-color: var(--gold); background: rgba(232, 193, 112, 0.16); color: var(--gold-hi); }
.dm-list { display: flex; flex-direction: column; gap: 0.2rem; max-height: calc(100vh - var(--pl-bottom, 27.3rem) - 10.5rem); overflow-y: auto; scrollbar-width: none; }
.dm-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.4rem; height: 1.7rem; }
.dm-row.dead { opacity: 0.45; }
.dm-row.dead .dm-portrait { filter: grayscale(1); }
.dm-portrait { width: 1.55rem; height: 1.55rem; border-radius: 0.3rem; font-size: 0.45rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.dm-main { min-width: 0; }
.dm-name { display: flex; align-items: baseline; gap: 0.25rem; font-size: 0.66rem; font-weight: 700; color: var(--text); line-height: 1.15; }
.dm-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dm-stars { flex: none; font-size: 0.55rem; letter-spacing: -0.05em; color: #dca36a; }
.dm-stars.s2 { color: #d8e6ff; }
.dm-stars.s3 { color: #ffd54a; }
.dm-track { height: 0.42rem; margin-top: 0.12rem; border-radius: 999px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
.dm-bar { display: flex; height: 100%; width: 0; border-radius: inherit; overflow: hidden; transition: width 0.35s var(--ease-out); }
.dm-seg { flex: 0 0 0; min-width: 0; transition: flex-grow 0.35s var(--ease-out); }
.dm-seg.physical { background: linear-gradient(180deg, #ffb07a, #e0602a); }
.dm-seg.magic { background: linear-gradient(180deg, #a9b4ff, #5a5ce6); }
.dm-seg.true { background: linear-gradient(180deg, #ffffff, #c9c4e0); }
.dm-seg.heal { background: linear-gradient(180deg, #9ff0bb, #2fae62); }
.dm-seg.shield { background: linear-gradient(180deg, #f2f4f8, #9aa4b8); }
.dm-num { min-width: 2.2rem; text-align: right; font-family: var(--font-num); font-weight: 900; font-size: 0.78rem; color: var(--text); font-variant-numeric: tabular-nums; }
.dm-row.top .dm-num { color: var(--gold-hi); }
.dm-total { margin-top: 0.3rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; color: var(--text-3); text-align: right; text-transform: uppercase; }
.dm-toggle { display: none; }

/* toasts start below the right column (player list + damage meter) */
body[data-screen='game'] .toasts { top: max(28.4rem, calc(var(--hud-right, 0px) + 0.6rem)); }

/* ---------- Ready button (desktop, bottom right) ---------------------------- */
.ready-btn {
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 10.5rem;
  padding: 0.6rem 0.9rem 0.6rem 0.65rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(93, 224, 138, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #17402b, #0c1f18);
  color: var(--text);
  box-shadow: 0 0 1.2rem rgba(93, 224, 138, 0.18), var(--shadow);
  cursor: pointer;
  text-align: left;
  animation: riseIn 0.4s var(--ease-out);
  transition: transform 0.14s var(--ease-out), box-shadow 0.2s, border-color 0.2s, filter 0.2s;
}
.ready-btn:hover { transform: translateY(-0.1rem); border-color: var(--green); box-shadow: 0 0 1.6rem rgba(93, 224, 138, 0.4), var(--shadow); }
.ready-btn:active { transform: scale(0.97); }
.rb-ico { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; flex: none; font-size: 1.15rem; color: #0c2a18; background: radial-gradient(circle at 35% 30%, #d6ffe4, #3fae6b 70%); box-shadow: 0 0 0.7rem rgba(93, 224, 138, 0.55); }
.rb-text { display: flex; flex-direction: column; line-height: 1.15; }
.rb-label { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; color: #c9ffd9; }
.rb-sub { font-size: 0.7rem; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ready-btn .kbd { position: absolute; right: 0.45rem; top: 0.4rem; font-size: 0.58rem; }
.ready-btn.on { border-color: #8ff0b3; background: linear-gradient(180deg, #3fae6b, #1f6b3f); box-shadow: 0 0 1.6rem rgba(93, 224, 138, 0.55), var(--shadow); }
.ready-btn.on .rb-label { color: #fff; }
.ready-btn.on .rb-sub { color: #dfffe9; }
.ready-btn.on .rb-ico { animation: bump 0.4s var(--ease-back); }
.layer-hud[data-phase='planning'] .round-tracker.warn ~ .ready-btn:not(.on) { animation: pulseGlow 1s ease-in-out infinite; }
/* the big button replaces the small one in the round tracker when there is room for it */
@media (min-width: 1061px) { html:not(.mobile-ui) .rt-ready { display: none; } }
@media (max-width: 1060px) { .ready-btn { display: none !important; } }

/* ---------- Item sheet (ItemSheet.js): champions ranked for an item, a champion's loadout, team items ---------- */
.item-slot.selected { transform: scale(1.12); box-shadow: 0 0 0 2px var(--gold-hi), 0 0 1.1rem rgba(232, 193, 112, 0.75); }
.ib-team { display: none; }
.item-combos {
  z-index: 4;
  width: 24rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 0.6rem 0.65rem 0.55rem;
  animation: popIn 0.22s var(--ease-back);
}
.ic-head { display: flex; align-items: center; gap: 0.55rem; }
.ic-head-text { flex: 1; min-width: 0; }
.ic-head-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: 0.45rem; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); color: var(--gold-hi); font-size: 1.3rem; }
.ic-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--gold-hi); }
.ic-kind { font-size: 0.68rem; font-weight: 700; color: var(--text-3); }
.ic-good { margin-top: 0.1rem; font-size: 0.68rem; font-weight: 800; color: #9fe6ff; }
.ic-close { align-self: flex-start; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; border-radius: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.3); color: var(--text-2); cursor: pointer; font-size: 0.75rem; }
.ic-close:hover { color: #fff; border-color: var(--gold); }
.ic-desc { margin-top: 0.4rem; font-size: 0.74rem; line-height: 1.35; color: var(--text-2); }
.ic-section { margin: 0.55rem 0 0.25rem; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.ic-section.inline { margin: 0 0.3rem 0 0; }
.ic-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.28rem 0.4rem;
  margin-bottom: 0.18rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  text-align: left;
}
button.ic-row { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
button.ic-row:hover { border-color: var(--gold); background: rgba(232, 193, 112, 0.12); }
button.ic-row:active { transform: scale(0.99); }
/* champion rows (item mode) and item rows (unit mode): rank · picture · name + why · result + verdict */
.ic-champ, .ic-itemrow { grid-template-columns: 0.9rem auto minmax(0, 1fr) auto; gap: 0.45rem; }
.ic-rank { justify-self: center; font-family: var(--font-num); font-weight: 900; font-size: 0.78rem; color: var(--green); }
.ic-champ.tier-best, .ic-itemrow.tier-best { border-color: rgba(93, 224, 138, 0.55); background: linear-gradient(90deg, rgba(47, 174, 98, 0.2), rgba(0, 0, 0, 0.25)); }
.ic-champ.blocked, .ic-itemrow.blocked { opacity: 0.5; }
.ic-champ.blocked:hover, .ic-itemrow.blocked:hover { border-color: rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.25); }
.ic-portrait { width: 1.8rem; height: 1.8rem; flex: none; border-radius: 0.3rem; font-size: 0.5rem; }
.ic-portrait.lg { width: 2.6rem; height: 2.6rem; border-radius: 0.45rem; font-size: 0.7rem; }
.ic-main { min-width: 0; }
.ic-title { display: flex; align-items: baseline; gap: 0.3rem; min-width: 0; }
.ic-unit-name { font-size: 0.74rem; font-weight: 800; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-stars { flex: none; font-size: 0.58rem; letter-spacing: -0.05em; color: #ffd54a; }
.ic-count { flex: none; font-size: 0.64rem; font-weight: 800; color: var(--text-2); }
.ic-sub { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.12rem; min-width: 0; }
.ic-why { min-width: 0; font-size: 0.64rem; line-height: 1.2; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tier-best .ic-why, .tier-good .ic-why { color: var(--text-2); }
.ic-slots { display: flex; gap: 0.15rem; flex: none; }
.ic-slot { display: block; flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ic-slot.xs { width: 1rem; height: 1rem; }
.ic-slot.sm { width: 1.5rem; height: 1.5rem; }
.ic-slots .item-orb.xs { width: 1rem; height: 1rem; }
.ic-slots .item-orb.xs .item-orb-ico { font-size: 0.55rem; }
.ic-slots .item-orb.sm { width: 1.5rem; height: 1.5rem; }
.ic-side { display: flex; align-items: center; gap: 0.3rem; }
.ic-tier { padding: 0.1rem 0.4rem; border-radius: 999px; font-size: 0.58rem; font-weight: 800; white-space: nowrap; background: rgba(255, 255, 255, 0.07); color: var(--text-3); }
.ic-tier.tier-best { background: rgba(93, 224, 138, 0.2); color: #b6ffcf; }
.ic-tier.tier-good { background: rgba(127, 216, 255, 0.16); color: #bfeaff; }
.ic-tier.tier-ok { color: var(--text-2); }
.ic-tier.tier-poor { color: #d99aa2; }
.ic-more, .ic-empty { margin: 0.3rem 0 0.2rem; font-size: 0.66rem; color: var(--text-3); }
/* a champion's loadout (unit mode) */
.ic-loadout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; margin-top: 0.5rem; }
.ic-load { display: flex; align-items: center; gap: 0.3rem; min-width: 0; padding: 0.2rem 0.3rem; border-radius: 0.4rem; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.25); }
.ic-load-name { min-width: 0; font-size: 0.6rem; font-weight: 700; line-height: 1.15; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ic-load.empty .ic-load-name { color: var(--text-3); }
/* team rows */
.ic-teamrow { grid-template-columns: auto minmax(0, 1fr) auto 2.6rem; }
.ic-teamrow.bench { background: rgba(0, 0, 0, 0.15); }
.ic-suggest { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; font-size: 0.52rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); }
/* recipes */
.ic-recipe-row { padding: 0.18rem 0.4rem; margin-bottom: 0.12rem; }
.ic-recipe-row.missing { opacity: 0.55; }
.ic-recipe-row.have { border-color: rgba(127, 216, 255, 0.4); }
.ic-recipe { display: flex; align-items: center; gap: 0.2rem; }
.ic-recipe-line { flex-wrap: wrap; margin-top: 0.45rem; font-size: 0.72rem; }
.ic-recipe-name { margin-right: 0.2rem; color: var(--text-2); font-weight: 700; }
.ic-op { font-size: 0.7rem; font-weight: 900; color: var(--text-3); }
.ic-result { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.ic-result-name { flex: none; font-size: 0.7rem; font-weight: 800; color: var(--text); }
.ic-result-desc { flex: 1; min-width: 0; font-size: 0.64rem; line-height: 1.25; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-tag { padding: 0.08rem 0.35rem; border-radius: 999px; background: rgba(127, 216, 255, 0.16); color: #bfeaff; font-size: 0.58rem; font-weight: 800; white-space: nowrap; }
.ic-tag.unit { background: rgba(93, 224, 138, 0.16); color: #b6ffcf; }
.ic-tag.forge { border: 0; cursor: pointer; font-family: inherit; background: rgba(232, 193, 112, 0.25); color: var(--gold-hi); box-shadow: 0 0 0 1px rgba(232, 193, 112, 0.5); }
.ic-tag.forge:hover { background: rgba(232, 193, 112, 0.4); }
.ic-hint { margin-top: 0.45rem; font-size: 0.64rem; font-weight: 700; color: var(--text-3); }
/* rank numbers above the suggested champions (positioned every frame via view.unitScreenPos) */
.unit-marks { inset: 0; pointer-events: none; overflow: hidden; }
.unit-mark {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  margin: -2.6rem 0 0 -0.725rem;
  border-radius: 50%;
  border: 2px solid #d6ffe4;
  background: radial-gradient(circle at 35% 30%, #8ff0b3, #1f8a4c 75%);
  color: #06200f;
  font-family: var(--font-num);
  font-weight: 900;
  font-size: 0.8rem;
  box-shadow: 0 0 0.8rem rgba(93, 224, 138, 0.7), 0 0.15rem 0.4rem rgba(0, 0, 0, 0.6);
  animation: popIn 0.25s var(--ease-back);
}
.unit-mark.pointer { border-color: var(--gold-hi); background: radial-gradient(circle at 35% 30%, #fff4c4, #c9912e 75%); color: #3a2506; font-size: 0.6rem; box-shadow: 0 0 0.8rem rgba(232, 193, 112, 0.7), 0 0.15rem 0.4rem rgba(0, 0, 0, 0.6); }
.unit-mark.hidden { display: none; }
.dm-title, .dm-round { white-space: nowrap; }