/* Project Hoof — Hoof Auto Chess (/arcade/ab/) autobattler UI.
   Rides on the shared body.subpage frame (fixed scene-bg + vignette) from
   base.css. Palette mirrors garrison.css: gold #f2cc6a / #c9a24a accents on a
   deep-blue parchment ground; rarity-tier colours match the calc collections.
   ---------------------------------------------------------------------------
   Rarity / cost-tier colours (TFT-style):
     5 Legendary  #f2cc6a (gold)   4 Epic #b483ff (violet)
     3 Elite      #6db3ff (azure)  2 Rare #74d49a (green)
     1 Common     #9aa0ad (steel)
*/

:root {
  --ab-gold: #f2cc6a;
  --ab-gold-d: #c9a24a;
  --ab-ink: #f4ecd8;
  --ab-dim: #b3a98b;
  --ab-panel: linear-gradient(180deg, rgba(18,26,46,.72), rgba(12,18,34,.8));
  --ab-line: rgba(201,162,74,.22);
  --t1: #9aa0ad; --t2: #74d49a; --t3: #6db3ff; --t4: #b483ff; --t5: #f2cc6a;
}

.ab-main {
  max-width: 1200px;
  margin: 0 auto;
  /* clear the fixed .site-nav (var(--nav-h)=72px) so the game's top bar / synergy
     panel aren't hidden behind the navbar. */
  padding: calc(var(--nav-h) + clamp(8px, 1.6vw, 16px)) clamp(10px, 2.4vw, 24px) 60px;
}

/* ---- Gate / start ---- */
.ab-gate, .ab-start { text-align: center; }
.ab-gate { max-width: 460px; margin: clamp(60px,12vh,140px) auto; }
.ab-gate-title {
  font-family: 'Cinzel Decorative','Cinzel',serif; font-weight: 900;
  font-size: clamp(1.7rem,4vw,2.4rem); color: #f1ead4; margin: 0 0 12px;
}
.ab-gate-msg { font-family: 'EB Garamond',serif; font-style: italic; color: var(--ab-dim); margin: 0 0 22px; }
.ab-start { max-width: 720px; margin: clamp(28px,6vh,80px) auto; }
.ab-eyebrow { color: var(--ab-gold-d); }
.ab-lead { color: var(--ab-dim); }
/* Main menu: two full-width primary CTAs (solo / multiplayer) stacked over an
   even row of two panel tiles. A grid (CTAs span both columns) keeps it all
   aligned — no flex-wrap staircase. */
.ab-start-actions {
  margin: clamp(24px,5vh,40px) auto 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  max-width: 480px;
}
/* ---- the two big primary buttons (icon + two-line label) ---- */
.ab-bigbtn {
  grid-column: 1 / -1; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  text-align: left; padding: .95rem 1.6rem; min-height: 66px;
}
.ab-bigbtn-ic {
  font-size: 1.6rem; line-height: 1; flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(60,40,0,.4));
}
.ab-bigbtn-text { display: flex; flex-direction: column; gap: 2px; }
.ab-bigbtn-main { font-size: 1.12rem; letter-spacing: .05em; line-height: 1.05; }
.ab-bigbtn-sub {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; opacity: .68;
}
/* multiplayer CTA: same heft as the solo button but an azure cast so PvE vs PvP
   reads instantly. Overrides the gold .btn-primary surface. */
.ab-mp-bigbtn {
  background: linear-gradient(180deg, #7fb6ff, #4e8ddb 50%, #2f5fa6);
  border-color: color-mix(in srgb, #7fb6ff 70%, white 30%);
  color: #0a1426;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(20,40,80,.45),
    0 5px 0 #2f5fa6, 0 14px 36px rgba(78,141,219,.45);
}
.ab-mp-bigbtn::after { background: linear-gradient(180deg, rgba(255,255,255,.32), transparent); }
.ab-mp-bigbtn.btn-primary::before { background: linear-gradient(110deg, transparent 30%, rgba(220,235,255,.5) 50%, transparent 70%); }
.ab-mp-bigbtn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(20,40,80,.45), 0 7px 0 #2f5fa6, 0 18px 44px rgba(78,141,219,.6); }
.ab-mp-bigbtn:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(20,40,80,.45), 0 0 0 #2f5fa6, 0 8px 24px rgba(78,141,219,.4); }
.ab-lb-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center; min-height: 80px; padding: 12px 8px;
  background: var(--ab-panel); border: 1px solid var(--ab-line);
  color: var(--ab-ink); font-family: 'Manrope',sans-serif; font-weight: 700;
  border-radius: 14px; cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
/* faint gold hairline along the top edge — ties the tiles to the in-game panels */
.ab-lb-btn::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; opacity: .65;
  background: linear-gradient(90deg, transparent, rgba(242,204,106,.55), transparent);
}
.ab-lb-btn > span[aria-hidden] {
  font-size: 1.45rem; line-height: 1; filter: drop-shadow(0 1px 6px rgba(242,204,106,.25));
}
.ab-lb-btn > span:not([aria-hidden]) {
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ab-dim); transition: color .15s;
}
.ab-lb-btn:hover {
  border-color: rgba(242,204,106,.6); transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(38,32,18,.6), rgba(16,12,8,.75));
  box-shadow: 0 10px 24px rgba(0,0,0,.42), inset 0 0 0 1px rgba(242,204,106,.1);
}
.ab-lb-btn:hover > span:not([aria-hidden]) { color: var(--ab-ink); }
.ab-lb-btn:active { transform: translateY(0) scale(.98); }

@media (max-width: 520px) {
  .ab-start-actions { grid-template-columns: 1fr; max-width: 340px; }
  .ab-lb-btn { flex-direction: row; gap: 12px; min-height: 54px; }
  .ab-lb-btn > span[aria-hidden] { font-size: 1.2rem; }
}

/* ===================================================================== TOP BAR */
.ab-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
  border-radius: 14px; padding: 10px clamp(14px,2.4vw,22px);
  margin-bottom: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.ab-stage { display: flex; align-items: baseline; gap: 12px; }
.ab-stage-kicker {
  font-family: 'Manrope',sans-serif; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ab-gold-d);
}
.ab-stage-label {
  font-family: 'Cinzel',serif; font-weight: 900; font-size: clamp(1.3rem,3vw,1.9rem);
  color: var(--ab-gold); letter-spacing: .04em; line-height: 1;
}
.ab-round-label { font-family: 'EB Garamond',serif; color: var(--ab-dim); font-style: italic; }
.ab-round-label b { color: var(--ab-ink); font-style: normal; }

.ab-vitals { display: flex; align-items: center; gap: clamp(12px,2vw,24px); }
.ab-lb-topbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 1.05rem;
  background: rgba(8,14,28,.6); border: 1px solid rgba(201,162,74,.32);
  transition: border-color .15s, background .15s, transform .08s;
}
.ab-lb-topbtn:hover { border-color: rgba(242,204,106,.7); background: rgba(242,204,106,.08); }
.ab-lb-topbtn:active { transform: scale(.94); }
.ab-hp { display: flex; align-items: center; gap: 8px; }
.ab-hp-icon { color: #e0796b; font-size: 1.1rem; filter: drop-shadow(0 0 4px rgba(224,121,107,.5)); }
.ab-hp-bar {
  width: clamp(80px,14vw,160px); height: 12px; border-radius: 8px;
  background: rgba(8,14,28,.7); border: 1px solid rgba(224,121,107,.35);
  overflow: hidden;
}
.ab-hp-fill {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg,#e0796b,#f2a25a);
  transition: width .4s ease;
}
.ab-hp-val { font-family: 'Manrope',sans-serif; font-weight: 800; color: var(--ab-ink); font-variant-numeric: tabular-nums; min-width: 2.2ch; }

.ab-gold-top, .ab-gold-big {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Manrope',sans-serif; font-weight: 800;
  color: var(--ab-gold); font-variant-numeric: tabular-nums;
}
.ab-coin { color: var(--ab-gold); font-size: .8em; filter: drop-shadow(0 0 3px rgba(242,204,106,.6)); }
.ab-coin-sm { color: var(--ab-gold); font-size: .7em; margin-left: 2px; }
.ab-gold-top { font-size: 1.1rem; }

/* ---- Phase 4: Hooves balance chip (🐂 + number) + ledger popover ---- */
.ab-hooves {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; cursor: default; outline: none;
  background: rgba(123,196,142,.1); border: 1px solid rgba(123,196,142,.34);
  font-family: 'Manrope',sans-serif; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #bfe6c8; transition: border-color .15s, background .15s;
}
.ab-hooves:hover, .ab-hooves:focus-visible { border-color: rgba(123,196,142,.7); background: rgba(123,196,142,.16); }
.ab-hooves-ic { font-size: 1em; filter: drop-shadow(0 0 4px rgba(123,196,142,.5)); }
.ab-hooves-val { font-size: 1.05rem; }
.ab-hooves-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 200px; max-width: 260px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(20,28,48,.98), rgba(12,18,34,.98));
  border: 1px solid rgba(123,196,142,.36); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s, transform .14s, visibility .14s;
  pointer-events: none;
}
.ab-hooves:hover .ab-hooves-pop, .ab-hooves:focus-within .ab-hooves-pop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.ab-hooves-pop-h {
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ab-gold-d); margin-bottom: 6px;
}
.ab-hooves-pop-empty { font-family: 'EB Garamond',serif; font-style: italic; color: var(--ab-dim); font-size: .85rem; }
.ab-hooves-pop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 3px 0; font-size: .82rem;
}
.ab-hooves-pop-reason { color: var(--ab-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-hooves-pop-amt { color: #9be86a; font-weight: 800; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.ab-hooves-pop-amt.is-neg { color: #e08a8a; }

.ab-record { display: inline-flex; align-items: center; gap: 4px; font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .9rem; }
.ab-rec-w { color: #74d49a; } .ab-rec-l { color: #e08a8a; } .ab-rec-sep { color: var(--ab-dim); }
.ab-streak {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: .72rem;
  background: rgba(242,204,106,.16); border: 1px solid rgba(242,204,106,.5); color: var(--ab-gold);
}

/* ===================================================================== ARENA */
.ab-arena {
  display: grid; grid-template-columns: 210px 1fr; gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 820px) { .ab-arena { grid-template-columns: 1fr; } }

/* ---- Left synergy panel ---- */
.ab-synergies {
  background: var(--ab-panel); border: 1px solid var(--ab-line);
  border-radius: 14px; padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  align-self: start;
}
.ab-panel-h {
  font-family: 'Cinzel',serif; font-weight: 700; font-size: 1rem;
  color: var(--ab-gold); letter-spacing: .05em; margin: 0 0 12px;
}
.ab-syn-empty { font-family: 'EB Garamond',serif; font-style: italic; color: var(--ab-dim); font-size: .92rem; margin: 0; }
.ab-syn {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; margin-bottom: 8px;
  background: rgba(8,14,28,.45); border: 1px solid rgba(201,162,74,.18);
  border-left: 3px solid rgba(201,162,74,.3);
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.ab-syn.is-lit {
  background: rgba(242,204,106,.1);
  border-color: rgba(242,204,106,.5); border-left-color: var(--ab-gold);
  box-shadow: 0 0 14px rgba(242,204,106,.22), inset 0 0 0 1px rgba(242,204,106,.12);
}
.ab-syn-crest { width: 28px; height: 28px; flex: 0 0 28px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.ab-syn-crest.is-broken { display: none; }
.ab-syn-body { flex: 1 1 auto; min-width: 0; }
.ab-syn-name {
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .84rem;
  color: var(--ab-ink); display: flex; align-items: center; gap: 6px;
}
.ab-syn-count {
  margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800;
  font-size: .8rem; color: var(--ab-gold-d);
}
.ab-syn.is-lit .ab-syn-count { color: var(--ab-gold); }
/* breakpoint pips */
.ab-syn-pips { display: flex; gap: 4px; margin-top: 5px; }
.ab-syn-pip {
  flex: 1 1 0; height: 4px; border-radius: 3px;
  background: rgba(201,162,74,.2);
}
.ab-syn-pip.is-on { background: var(--ab-gold); box-shadow: 0 0 6px rgba(242,204,106,.5); }

/* ---- Phase 3: owned-augment strip (under the synergy list) ---- */
:root {
  --ab-aug-econ: #f2cc6a;   /* gold  — economy */
  --ab-aug-combat: #e0796b; /* ember — combat  */
  --ab-aug-util: #8fa9ff;   /* azure — utility */
}
.ab-augments {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--ab-line);
}
.ab-aug-h {
  font-family: 'Cinzel',serif; font-weight: 700; font-size: .82rem;
  color: var(--ab-gold-d); letter-spacing: .06em; margin: 0 0 8px;
}
.ab-aug-strip { display: flex; flex-direction: column; gap: 6px; }
.ab-aug-chip {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  padding: 5px 9px; border-radius: 9px; cursor: help;
  background: rgba(8,14,28,.5);
  border: 1px solid var(--ab-line);
  border-left: 3px solid var(--ab-aug, var(--ab-gold-d));
}
.ab-aug-chip.ab-aug-econ   { --ab-aug: var(--ab-aug-econ); }
.ab-aug-chip.ab-aug-combat { --ab-aug: var(--ab-aug-combat); }
.ab-aug-chip.ab-aug-util   { --ab-aug: var(--ab-aug-util); }
.ab-aug-chip-ic { font-size: .9rem; color: var(--ab-aug, var(--ab-gold)); flex: 0 0 auto; }
.ab-aug-chip-name {
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .78rem; color: var(--ab-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Center battlefield ---- */
.ab-field { position: relative; }
.ab-field-frame {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(60,40,80,.35), transparent 60%),
    linear-gradient(180deg, rgba(20,16,34,.7), rgba(10,14,28,.82));
  border: 1px solid var(--ab-line); border-radius: 16px;
  padding: clamp(10px,2vw,20px);
  box-shadow: 0 14px 44px rgba(0,0,0,.45), inset 0 0 80px rgba(120,80,160,.08);
  overflow: hidden;
}
/* faint hex texture */
.ab-field-frame::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background-image:
    linear-gradient(60deg, transparent 49.3%, rgba(201,162,74,.5) 49.7%, rgba(201,162,74,.5) 50.3%, transparent 50.7%),
    linear-gradient(-60deg, transparent 49.3%, rgba(201,162,74,.5) 49.7%, rgba(201,162,74,.5) 50.3%, transparent 50.7%);
  background-size: 46px 80px;
}

.ab-enemy-half { position: relative; z-index: 1; margin-bottom: 8px; }
.ab-enemy-row { display: flex; justify-content: center; gap: 14px; min-height: 96px; }
.ab-field-divider {
  position: relative; z-index: 1; text-align: center; margin: 6px 0;
  color: rgba(201,162,74,.4); font-size: 1.1rem;
}
.ab-field-divider::before, .ab-field-divider::after {
  content: ''; display: inline-block; width: 32%; height: 1px; vertical-align: middle;
  margin: 0 10px; background: linear-gradient(90deg, transparent, rgba(201,162,74,.4), transparent);
}
.ab-board-half { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.ab-row {
  display: flex; justify-content: center; gap: clamp(6px,1.4vw,14px);
  min-height: 104px;
}
.ab-row-back { opacity: .98; }

/* hex cell */
.ab-cell {
  position: relative;
  width: clamp(64px, 11vw, 92px); aspect-ratio: 1 / 1.08;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.025);
  border: 1.5px dashed rgba(201,162,74,.28);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.ab-row-front .ab-cell { border-color: rgba(224,121,107,.3); }
.ab-row-back .ab-cell { border-color: rgba(109,179,255,.3); }
.ab-cell.is-drop {
  background: rgba(242,204,106,.16);
  border-color: var(--ab-gold); border-style: solid;
  box-shadow: 0 0 18px rgba(242,204,106,.4);
}
.ab-cell.is-empty-hint::after {
  content: ''; position: absolute; width: 30%; height: 30%;
  border-radius: 50%; background: rgba(201,162,74,.08);
}

.ab-board-cap {
  text-align: center; margin-top: 8px;
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .82rem;
  color: var(--ab-dim); letter-spacing: .04em;
}
.ab-board-cap.is-full { color: var(--ab-gold); }
.ab-board-cap.is-over { color: #e08a8a; }

/* ===================================================================== UNIT */
.ab-unit {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  cursor: grab; user-select: none;
}
.ab-unit:active { cursor: grabbing; }
.ab-unit.is-dragging { opacity: .35; }
.ab-unit-portrait {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 12px; overflow: hidden;
  background: rgba(8,14,28,.6);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 2px solid var(--tier, var(--ab-gold-d));
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.5);
}
/* the hero portrait fills the cell; the class-crest badge (.ab-unit-class) must
   NOT match this rule or it covers the face (it's more specific than .ab-unit-class). */
.ab-unit-portrait img:not(.ab-unit-class) { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-unit-portrait img.is-broken { opacity: 0; }
.ab-unit[data-tier="1"] { --tier: var(--t1); }
.ab-unit[data-tier="2"] { --tier: var(--t2); }
.ab-unit[data-tier="3"] { --tier: var(--t3); }
.ab-unit[data-tier="4"] { --tier: var(--t4); }
.ab-unit[data-tier="5"] { --tier: var(--t5); }

/* class crest badge bottom-left of portrait */
.ab-unit-class {
  position: absolute; left: 2px; bottom: 2px; width: 18px; height: 18px;
  object-fit: contain; z-index: 3; filter: drop-shadow(0 1px 2px #000);
}
.ab-unit-class.is-broken { display: none; }
/* element dot top-right */
.ab-unit-elem {
  position: absolute; right: 3px; top: 4px; width: 9px; height: 9px;
  border-radius: 50%; z-index: 3; box-shadow: 0 0 5px currentColor;
}
.ab-elem-ice { background: #6db3ff; color: #6db3ff; }
.ab-elem-fire { background: #f2774e; color: #f2774e; }
.ab-elem-thunder { background: #c98bff; color: #c98bff; }
.ab-elem-poison { background: #8fce5a; color: #8fce5a; }

/* star pips above portrait */
.ab-stars {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 1px; z-index: 4;
}
.ab-star {
  font-size: .7rem; line-height: 1; color: var(--ab-gold);
  text-shadow: 0 0 4px rgba(242,204,106,.8), 0 1px 1px #000;
}
.ab-unit[data-star="2"] .ab-unit-portrait { border-width: 2.5px; }
.ab-unit[data-star="3"] .ab-unit-portrait {
  border-width: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 16px rgba(242,204,106,.55);
}

.ab-unit-name {
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .62rem;
  color: var(--ab-ink); text-align: center; line-height: 1.1;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px; text-shadow: 0 1px 2px #000;
}

/* HP + mana bars under name */
.ab-bars { width: 92%; margin-top: 2px; display: flex; flex-direction: column; gap: 2px; }
.ab-bar { height: 5px; border-radius: 3px; background: rgba(0,0,0,.55); overflow: hidden; }
.ab-bar-hp .ab-bar-fill { background: linear-gradient(90deg,#5fd07a,#9be86a); }
.ab-bar-mana .ab-bar-fill { background: linear-gradient(90deg,#4aa3ff,#7ec8ff); }
.ab-bar-fill { display: block; height: 100%; width: 100%; transition: width .25s ease; }
.ab-bar-mana { height: 4px; }

/* ---- Phase 3b: equipped item pips on a unit (up to 3) ---- */
.ab-unit-items {
  position: absolute; top: 1px; right: 1px; z-index: 5;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-end;
}
.ab-item-pip {
  display: block; cursor: grab; touch-action: none;
  filter: drop-shadow(0 1px 2px #000);
}
.ab-item-pip:active { cursor: grabbing; }
.ab-item-pip.is-dragging { opacity: .35; }
.ab-item-pip .ab-item-pip-ic {
  width: 16px; height: 16px; font-size: .6rem; border-radius: 5px;
  border-color: rgba(242,204,106,.75);
  box-shadow: 0 0 6px rgba(242,204,106,.45);
}
/* a unit being targeted by an item drop glows gold */
.ab-unit.is-item-drop .ab-unit-portrait {
  border-color: var(--ab-gold) !important;
  box-shadow: 0 0 0 2px var(--ab-gold), 0 0 20px rgba(242,204,106,.6) !important;
}

/* combat states */
.ab-unit.is-hit .ab-unit-portrait { animation: ab-shake .25s; }
.ab-unit.is-casting .ab-unit-portrait {
  box-shadow: 0 0 0 2px #fff, 0 0 22px var(--tier, #f2cc6a), 0 0 40px rgba(255,255,255,.5);
}
.ab-unit.is-dead { animation: ab-die .5s forwards; pointer-events: none; }
@keyframes ab-shake {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(-3px,1px); } 50% { transform: translate(3px,-1px); } 75% { transform: translate(-2px,1px); }
}
@keyframes ab-die {
  to { opacity: 0; transform: scale(.7) translateY(8px); filter: grayscale(1) brightness(.5); }
}

/* enemy unit (Darkness) — bigger, menacing */
.ab-unit.ab-enemy { width: clamp(72px,12vw,104px); }
.ab-unit.ab-enemy .ab-unit-portrait {
  border-color: #b06a9a;
  background: radial-gradient(circle at 50% 35%, rgba(150,60,120,.5), rgba(20,8,24,.9));
  box-shadow: 0 0 18px rgba(170,60,130,.4), inset 0 0 24px rgba(0,0,0,.6);
}
.ab-unit.ab-enemy .ab-unit-portrait::after {
  content: '☠'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: rgba(255,180,220,.55);
}
/* ghost opponent (a clanmate's saved board) — cooler tint + optional avatar */
.ab-unit.ab-enemy.is-ghost .ab-unit-portrait {
  border-color: #8fa9ff;
  background: radial-gradient(circle at 50% 35%, rgba(80,110,200,.5), rgba(10,14,34,.92));
  box-shadow: 0 0 18px rgba(110,150,255,.4), inset 0 0 24px rgba(0,0,0,.6);
}
.ab-unit.ab-enemy.is-ghost .ab-unit-portrait::after { content: '👻'; color: rgba(200,215,255,.7); }
.ab-ghost-av {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 2; opacity: .9; filter: grayscale(.2) brightness(.95);
}
/* when a real avatar is present, hide the ghost glyph behind it */
.ab-unit.ab-enemy.is-ghost .ab-unit-portrait:has(.ab-ghost-av)::after { content: none; }

/* ---- Phase 3: Darkness BOSS — ominous blood-red, crowned, larger ---- */
.ab-unit.ab-enemy.is-boss { width: clamp(92px,16vw,132px); }
.ab-unit.ab-enemy.is-boss .ab-unit-portrait {
  border-color: #ff5a4e; border-width: 3px;
  background: radial-gradient(circle at 50% 35%, rgba(190,40,40,.6), rgba(28,4,8,.96));
  box-shadow: 0 0 26px rgba(220,50,40,.55), inset 0 0 30px rgba(0,0,0,.7);
  animation: ab-boss-throb 1.6s ease-in-out infinite;
}
.ab-unit.ab-enemy.is-boss .ab-unit-portrait::after {
  content: '👑'; font-size: 1.9rem; color: rgba(255,210,120,.9);
  text-shadow: 0 0 10px rgba(255,120,60,.7);
}
.ab-unit.ab-enemy.is-boss .ab-unit-name { color: #ffb3a3; text-shadow: 0 0 6px rgba(220,60,40,.6), 0 1px 2px #000; }
@keyframes ab-boss-throb {
  0%,100% { box-shadow: 0 0 26px rgba(220,50,40,.5), inset 0 0 30px rgba(0,0,0,.7); }
  50% { box-shadow: 0 0 40px rgba(255,70,50,.75), inset 0 0 30px rgba(0,0,0,.7); }
}
/* boss banner above the enemy row + a red wash over the whole enemy half */
.ab-enemy-half.is-boss::before {
  content: ''; position: absolute; inset: -10px -10px 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(200,40,40,.22), transparent 70%);
}
.ab-boss-banner {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
  gap: 9px; margin: 0 auto 8px; padding: 5px 16px; width: fit-content; max-width: 92%;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(90,12,16,.92), rgba(50,6,10,.94));
  border: 1px solid rgba(255,90,70,.5);
  box-shadow: 0 4px 18px rgba(160,30,30,.45), inset 0 0 14px rgba(255,80,60,.18);
}
.ab-boss-glyph { font-size: 1.05rem; filter: drop-shadow(0 0 6px rgba(255,90,60,.7)); }
.ab-boss-tag {
  font-family: 'Manrope',sans-serif; font-weight: 800; font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: #ff8a78;
}
.ab-boss-name {
  font-family: 'Cinzel Decorative','Cinzel',serif; font-weight: 900; font-size: clamp(.95rem,2.4vw,1.25rem);
  color: #ffd2c4; letter-spacing: .03em; text-shadow: 0 0 10px rgba(220,60,40,.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- floating damage numbers + result overlay ---- */
.ab-fx-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.ab-dmg {
  position: absolute; transform: translate(-50%,-50%);
  font-family: 'Cinzel',serif; font-weight: 900; font-size: 1rem;
  color: #ffd76a; text-shadow: 0 0 6px #000, 0 2px 3px #000;
  animation: ab-float 1s ease-out forwards;
  white-space: nowrap;
}
.ab-dmg.is-crit { font-size: 1.4rem; color: #ff7a4e; }
.ab-dmg.is-ability { color: #b9e0ff; text-shadow: 0 0 8px #4aa3ff, 0 2px 3px #000; }
@keyframes ab-float {
  0% { opacity: 0; transform: translate(-50%,-30%) scale(.6); }
  18% { opacity: 1; transform: translate(-50%,-60%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%,-150%) scale(1); }
}

.ab-result {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,22,.66); backdrop-filter: blur(2px);
  border-radius: 16px; animation: ab-fadein .3s;
}
@keyframes ab-fadein { from { opacity: 0; } to { opacity: 1; } }
.ab-result-card {
  text-align: center; padding: 28px 36px; max-width: 360px;
  background: var(--ab-panel); border: 1px solid rgba(242,204,106,.4);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.ab-result-title {
  display: block; font-family: 'Cinzel Decorative','Cinzel',serif; font-weight: 900;
  font-size: 2rem; letter-spacing: .04em; margin-bottom: 6px;
}
.ab-result.is-win .ab-result-title { color: var(--ab-gold); text-shadow: 0 0 20px rgba(242,204,106,.5); }
.ab-result.is-loss .ab-result-title { color: #e08a8a; }
.ab-result.is-end .ab-result-title { color: #9be86a; }
.ab-result-sub { display: block; font-family: 'EB Garamond',serif; font-style: italic; color: var(--ab-dim); margin-bottom: 16px; }
.ab-result-rewards {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px;
}
.ab-reward {
  padding: 6px 12px; border-radius: 999px; font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .85rem;
  background: rgba(242,204,106,.12); border: 1px solid rgba(242,204,106,.4); color: var(--ab-gold);
}
/* Phase 4 — the run-end Hooves earning gets its own (green) emphasis. */
.ab-reward-hooves {
  background: rgba(123,196,142,.16); border-color: rgba(123,196,142,.55); color: #bfe6c8;
  box-shadow: 0 0 16px rgba(123,196,142,.25);
}
.ab-result-btn { min-width: 180px; }

/* ===================================================================== BENCH */
.ab-bench-wrap {
  display: flex; align-items: center; gap: 12px;
  background: var(--ab-panel); border: 1px solid var(--ab-line);
  border-radius: 14px; padding: 10px clamp(12px,2vw,18px); margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.ab-bench-label {
  font-family: 'Cinzel',serif; font-weight: 700; font-size: .82rem;
  color: var(--ab-gold-d); letter-spacing: .08em; text-transform: uppercase;
  writing-mode: horizontal-tb; flex: 0 0 auto;
}
.ab-bench {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; flex: 1 1 auto;
}
@media (max-width: 600px) { .ab-bench { grid-template-columns: repeat(9, 1fr); gap: 3px; } .ab-bench-label { display: none; } }
.ab-slot {
  position: relative; aspect-ratio: 1 / 1.05;
  border-radius: 10px; background: rgba(8,14,28,.5);
  border: 1.5px solid rgba(201,162,74,.18);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.ab-slot.is-drop {
  background: rgba(242,204,106,.16); border-color: var(--ab-gold);
  box-shadow: 0 0 14px rgba(242,204,106,.35);
}
.ab-slot .ab-unit { width: 100%; height: 100%; }

/* ===================================================================== ITEM TRAY (Phase 3b) */
/* Inventory of un-equipped artifacts. Drag a chip onto a unit to equip; drag an
   equipped pip back here to unequip. Sits between the bench and the shop bar. */
.ab-item-tray-wrap {
  display: flex; align-items: center; gap: 12px;
  background: var(--ab-panel); border: 1px solid var(--ab-line);
  border-radius: 14px; padding: 8px clamp(12px,2vw,18px); margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.ab-item-tray-label {
  font-family: 'Cinzel',serif; font-weight: 700; font-size: .82rem;
  color: var(--ab-gold-d); letter-spacing: .08em; text-transform: uppercase; flex: 0 0 auto;
}
.ab-item-tray {
  display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-height: 46px;
  align-items: center; align-content: center;
  border-radius: 10px; padding: 4px;
  transition: background .15s, box-shadow .15s;
}
/* the tray as the unequip drop target */
.ab-item-tray.is-item-drop {
  background: rgba(242,204,106,.14);
  box-shadow: inset 0 0 0 1.5px var(--ab-gold), inset 0 0 18px rgba(242,204,106,.25);
}
@media (max-width: 600px) { .ab-item-tray-label { display: none; } }
.ab-item-empty {
  margin: 0; font-family: 'EB Garamond',serif; font-style: italic;
  color: var(--ab-dim); font-size: .9rem;
}

/* a draggable tray chip: icon + name + bonus */
.ab-item-chip {
  display: flex; align-items: center; gap: 8px; cursor: grab; user-select: none;
  padding: 5px 11px 5px 6px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,28,48,.92), rgba(10,16,30,.95));
  border: 1px solid rgba(201,162,74,.4); border-left: 3px solid var(--ab-gold-d);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  transition: border-color .15s, transform .08s, box-shadow .15s;
  touch-action: none;
}
.ab-item-chip:hover { border-color: rgba(242,204,106,.7); box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 12px rgba(242,204,106,.25); }
.ab-item-chip:active { cursor: grabbing; }
.ab-item-chip.is-dragging { opacity: .35; }
.ab-item-chip-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ab-item-chip-name {
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .76rem; color: var(--ab-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12ch;
}
.ab-item-chip-bonus {
  font-family: 'Manrope',sans-serif; font-weight: 800; font-size: .66rem; color: var(--ab-gold);
  font-variant-numeric: tabular-nums;
}

/* shared icon node: an <img> over a lettered fallback (404 → letter shows) */
.ab-item-ic {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(80,60,120,.5), rgba(14,10,26,.92));
  border: 1px solid rgba(201,162,74,.5);
  font-family: 'Cinzel',serif; font-weight: 900; color: var(--ab-gold);
}
.ab-item-ic-fb { line-height: 1; }
.ab-item-ic-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.ab-item-ic-img.is-broken { display: none; }
.ab-item-chip-ic { width: 30px; height: 30px; font-size: .9rem; }

/* ===================================================================== SHOP BAR */
.ab-shopbar {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(8px,1.5vw,16px);
  align-items: stretch;
  background: var(--ab-panel); border: 1px solid var(--ab-line);
  border-radius: 16px; padding: clamp(10px,1.8vw,16px);
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
}
@media (max-width: 880px) {
  .ab-shopbar { grid-template-columns: 1fr; }
  .ab-econ { flex-direction: row; flex-wrap: wrap; }
}

/* econ column */
.ab-econ {
  display: flex; flex-direction: column; gap: 10px; justify-content: center;
  min-width: 140px;
}
.ab-gold-big { font-size: 1.5rem; }
.ab-level { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.ab-level-lab { font-family: 'Manrope',sans-serif; font-weight: 800; color: var(--ab-ink); font-size: .9rem; }
.ab-level-lab b { color: var(--ab-gold); }
.ab-xp-bar {
  position: relative; height: 14px; border-radius: 8px;
  background: rgba(8,14,28,.7); border: 1px solid rgba(201,162,74,.3); overflow: hidden;
}
.ab-xp-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg,#7ec8ff,#b9e0ff); transition: width .3s ease; }
.ab-xp-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .64rem; color: #fff;
  text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums;
}
.ab-econ-btns { display: flex; gap: 8px; }
.ab-ebtn {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 6px; cursor: pointer;
  background: rgba(8,14,28,.6); border: 1px solid rgba(201,162,74,.32); border-radius: 10px;
  color: var(--ab-ink); font-family: 'Manrope',sans-serif; transition: border-color .15s, background .15s, transform .08s;
}
.ab-ebtn:hover { border-color: rgba(242,204,106,.7); background: rgba(242,204,106,.08); }
.ab-ebtn:active { transform: scale(.96); }
.ab-ebtn[disabled] { opacity: .45; cursor: not-allowed; }
.ab-ebtn-ic { font-size: 1.05rem; color: var(--ab-gold); }
.ab-ebtn-lab { font-size: .68rem; font-weight: 700; }
.ab-ebtn-cost { font-size: .72rem; font-weight: 800; color: var(--ab-gold); }

/* shop cards */
.ab-shop { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(5px,1vw,10px); }
@media (max-width: 540px) { .ab-shop { gap: 4px; } }
.ab-card {
  position: relative; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(20,28,48,.9), rgba(10,16,30,.95));
  border: 2px solid var(--tier, var(--ab-gold-d)); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  transition: transform .12s, box-shadow .15s, opacity .2s;
  min-height: 150px;
}
.ab-card[data-tier="1"] { --tier: var(--t1); }
.ab-card[data-tier="2"] { --tier: var(--t2); }
.ab-card[data-tier="3"] { --tier: var(--t3); }
.ab-card[data-tier="4"] { --tier: var(--t4); }
.ab-card[data-tier="5"] { --tier: var(--t5); }
.ab-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.6), 0 0 16px var(--tier); }
.ab-card.is-empty { opacity: .25; cursor: default; pointer-events: none; }
.ab-card.is-empty:hover { transform: none; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.ab-card.is-unaffordable { filter: saturate(.5) brightness(.8); }
.ab-card.is-upgrade {
  animation: ab-upgrade-pulse 1.1s ease-in-out infinite;
}
@keyframes ab-upgrade-pulse {
  0%,100% { box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 4px var(--tier); }
  50% { box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 22px var(--tier), 0 0 40px var(--tier); }
}
.ab-card-port {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background: rgba(8,14,28,.7);
}
/* hero portrait fills the card; exclude the class-crest badge (else it covers the face). */
.ab-card-port img:not(.ab-card-class) { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-card-port img.is-broken { opacity: 0; }
.ab-card-class {
  position: absolute; left: 4px; bottom: 4px; width: 20px; height: 20px;
  object-fit: contain; filter: drop-shadow(0 1px 2px #000);
}
.ab-card-class.is-broken { display: none; }
.ab-card-stars {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 1px;
}
.ab-card-stars .ab-star { font-size: .65rem; }
.ab-card-upbadge {
  position: absolute; top: 4px; right: 4px; padding: 1px 5px; border-radius: 6px;
  font-family: 'Manrope',sans-serif; font-weight: 800; font-size: .58rem;
  background: var(--tier); color: #1a1206; box-shadow: 0 0 8px var(--tier);
}
.ab-card-body { padding: 5px 6px 7px; display: flex; flex-direction: column; gap: 2px; }
.ab-card-name {
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .72rem; color: var(--ab-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15;
}
.ab-card-traits {
  font-family: 'EB Garamond',serif; font-size: .64rem; color: var(--ab-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ab-card-cost {
  display: flex; align-items: center; justify-content: flex-end; gap: 3px;
  font-family: 'Manrope',sans-serif; font-weight: 800; font-size: .8rem; color: var(--tier);
}

/* FIGHT button */
.ab-fightcol { display: flex; align-items: center; }
.ab-fight-btn {
  position: relative; cursor: pointer; overflow: hidden;
  min-width: clamp(96px,12vw,140px); height: 100%; min-height: 120px;
  padding: 0 18px; border: none; border-radius: 14px;
  background: linear-gradient(180deg,#e0796b,#a83c33);
  box-shadow: 0 8px 24px rgba(168,60,51,.5), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .1s, box-shadow .15s;
}
.ab-fight-btn:hover { box-shadow: 0 10px 30px rgba(224,121,107,.6), 0 0 24px rgba(224,121,107,.4); }
.ab-fight-btn:active { transform: scale(.97); }
.ab-fight-btn[disabled] { opacity: .55; cursor: progress; }
.ab-fight-glow {
  position: absolute; inset: 0; opacity: .6;
  background: radial-gradient(circle at 50% 30%, rgba(255,220,180,.5), transparent 60%);
  animation: ab-fight-breathe 2s ease-in-out infinite;
}
@keyframes ab-fight-breathe { 0%,100% { opacity: .35; } 50% { opacity: .7; } }
.ab-fight-lab {
  position: relative; z-index: 1;
  font-family: 'Cinzel Decorative','Cinzel',serif; font-weight: 900;
  font-size: clamp(1.1rem,2.4vw,1.6rem); letter-spacing: .06em; color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
  writing-mode: vertical-rl; text-orientation: upright;
}
@media (max-width: 880px) {
  .ab-fightcol { order: -1; }
  .ab-fight-btn { width: 100%; min-height: 64px; }
  .ab-fight-lab { writing-mode: horizontal-tb; text-orientation: mixed; }
}

/* ---- sell zone + toast ---- */
.ab-sell-zone {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 40; padding: 12px 28px; border-radius: 14px;
  background: rgba(168,60,51,.92); border: 2px dashed rgba(255,200,180,.7);
  color: #fff; font-family: 'Manrope',sans-serif; font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.ab-sell-zone.is-drop { background: rgba(200,70,60,.98); box-shadow: 0 0 24px rgba(255,120,100,.6); }
.ab-sell-zone b { color: #ffd76a; }

.ab-toast {
  position: fixed; left: 50%; top: 80px; transform: translateX(-50%);
  z-index: 50; padding: 10px 22px; border-radius: 12px;
  background: rgba(20,14,30,.95); border: 1px solid rgba(224,138,138,.5);
  color: #f4ecd8; font-family: 'Manrope',sans-serif; font-weight: 600; font-size: .9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: ab-toast-in .25s;
}
@keyframes ab-toast-in { from { opacity: 0; transform: translate(-50%,-8px); } to { opacity: 1; transform: translate(-50%,0); } }

/* drag ghost following the pointer */
.ab-drag-ghost {
  position: fixed; z-index: 1000; pointer-events: none; width: 76px;
  transform: translate(-50%,-50%) scale(1.05); opacity: .9;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.6));
}
/* Phase 3b — item drag ghost (just the artifact icon following the pointer) */
.ab-item-drag-ghost {
  position: fixed; z-index: 1000; pointer-events: none;
  transform: translate(-50%,-50%) scale(1.15); opacity: .92;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.6));
}
.ab-item-ghost-ic { width: 38px; height: 38px; font-size: 1.1rem; }

/* ===================================================================== LEADERBOARD */
.ab-lb {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,18,.72); backdrop-filter: blur(3px);
  padding: 16px; animation: ab-fadein .25s;
}
.ab-lb-card {
  width: min(520px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--ab-panel); border: 1px solid rgba(242,204,106,.4);
  border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.65);
  overflow: hidden;
}
.ab-lb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--ab-line);
}
.ab-lb-title {
  margin: 0; font-family: 'Cinzel Decorative','Cinzel',serif; font-weight: 900;
  font-size: 1.4rem; color: var(--ab-gold); letter-spacing: .03em;
}
.ab-lb-close {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 1rem;
  background: rgba(8,14,28,.6); border: 1px solid rgba(201,162,74,.32); color: var(--ab-ink);
  transition: border-color .15s, background .15s;
}
.ab-lb-close:hover { border-color: rgba(242,204,106,.7); background: rgba(242,204,106,.08); }
.ab-lb-tabs { display: flex; gap: 6px; padding: 12px 20px 4px; }
.ab-lb-tab {
  flex: 1 1 0; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .82rem;
  background: rgba(8,14,28,.55); border: 1px solid rgba(201,162,74,.2); color: var(--ab-dim);
  transition: border-color .15s, background .15s, color .15s;
}
.ab-lb-tab:hover { border-color: rgba(242,204,106,.5); color: var(--ab-ink); }
.ab-lb-tab.is-active {
  background: rgba(242,204,106,.12); border-color: rgba(242,204,106,.55); color: var(--ab-gold);
}
/* headrow, rows & foot share a 4-track grid: rank | avatar | player | score.
   The headrow's "Champion" label spans the avatar + player tracks. */
.ab-lb-headrow {
  display: grid; grid-template-columns: 3.2ch 30px 1fr auto; align-items: center;
  gap: 12px; padding: 10px 20px 6px;
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ab-gold-d);
}
.ab-lb-h-player { grid-column: 2 / 4; }
.ab-lb-h-score { text-align: right; }
.ab-lb-body { overflow-y: auto; padding: 4px 0 8px; }
.ab-lb-loading, .ab-lb-empty {
  padding: 26px 20px; text-align: center; color: var(--ab-dim);
  font-family: 'EB Garamond',serif; font-style: italic;
}
.ab-lb-row, .ab-lb-foot {
  display: grid; grid-template-columns: 3.2ch 30px 1fr auto; align-items: center;
  gap: 12px; padding: 8px 12px;
}
.ab-lb-row {
  border-radius: 10px; margin: 0 8px;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.ab-lb-row:hover { background: rgba(255,255,255,.03); }
.ab-lb-row.is-you {
  background: rgba(242,204,106,.12); border-color: rgba(242,204,106,.45);
  box-shadow: inset 0 0 0 1px rgba(242,204,106,.12);
}
.ab-lb-rank { font-family: 'Manrope',sans-serif; font-weight: 800; color: var(--ab-gold-d); font-variant-numeric: tabular-nums; }
.ab-lb-row:first-child .ab-lb-rank { color: var(--ab-gold); }
.ab-lb-row.is-you .ab-lb-rank { color: var(--ab-gold); }
.ab-lb-av {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,14,28,.7); border: 1px solid rgba(201,162,74,.3);
  font-family: 'Cinzel',serif; font-weight: 700; font-size: .85rem; color: var(--ab-gold-d);
}
.ab-lb-av img { width: 100%; height: 100%; object-fit: cover; }
.ab-lb-av.is-broken { font-size: .85rem; }
.ab-lb-name { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ab-lb-user {
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .92rem; color: var(--ab-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ab-lb-tag {
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .58rem;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
}
.ab-lb-tag.is-cleared { background: rgba(155,232,106,.16); border: 1px solid rgba(155,232,106,.5); color: #9be86a; }
.ab-lb-tag.is-dead { background: rgba(224,138,138,.14); border: 1px solid rgba(224,138,138,.4); color: #e08a8a; }
.ab-lb-youtag {
  font-family: 'Manrope',sans-serif; font-weight: 800; font-size: .58rem;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  background: rgba(242,204,106,.18); border: 1px solid rgba(242,204,106,.6); color: var(--ab-gold);
}
/* Phase 4 — season reward badge (🐂) on each leaderboard row. Base = a muted
   green Hooves pill; the top-3 reward tiers escalate (bronze → silver → gold). */
.ab-lb-reward {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  font-family: 'Manrope',sans-serif; font-weight: 800; font-size: .68rem;
  font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px;
  background: rgba(123,196,142,.14); border: 1px solid rgba(123,196,142,.4); color: #bfe6c8;
}
.ab-lb-reward-amt { font-size: .72rem; }
.ab-lb-reward[data-tier="3"] {
  background: rgba(199,140,90,.18); border-color: rgba(199,140,90,.6); color: #e0a878;
}
.ab-lb-reward[data-tier="2"] {
  background: rgba(196,206,224,.16); border-color: rgba(196,206,224,.55); color: #dfe6f2;
}
.ab-lb-reward[data-tier="1"] {
  background: rgba(242,204,106,.2); border-color: rgba(242,204,106,.7); color: var(--ab-gold);
  box-shadow: 0 0 12px rgba(242,204,106,.3);
}
.ab-lb-score {
  font-family: 'Manrope',sans-serif; font-weight: 800; font-size: 1rem; color: var(--ab-ink);
  font-variant-numeric: tabular-nums; text-align: right;
}
.ab-lb-row.is-you .ab-lb-score { color: var(--ab-gold); }
.ab-lb-foot {
  border-top: 1px solid var(--ab-line);
  background: rgba(242,204,106,.08);
}
.ab-lb-foot .ab-lb-name { grid-column: 2 / 4; }

/* ===================================================================== AUGMENT MODAL */
/* Prominent 3-card chooser shown whenever state.augment_offer is non-empty.
   Dismissible (close = leave the offer pending). Cards tinted by kind. */
.ab-aug-modal {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,18,.78); backdrop-filter: blur(4px);
  padding: 16px; animation: ab-fadein .25s;
}
/* Overlays (.ab-result / .ab-leaderboard / .ab-aug-modal) set display:flex via
   their class, which overrides the UA [hidden]{display:none} and leaks an empty
   overlay onto the page (the JS toggles the `hidden` attribute to show/hide them).
   Make the hidden attribute authoritative for everything on this page. */
.ab-page [hidden] { display: none !important; }
.ab-aug-card-wrap {
  width: min(840px, 100%);
  background: var(--ab-panel); border: 1px solid rgba(242,204,106,.45);
  border-radius: 20px; box-shadow: 0 26px 80px rgba(0,0,0,.7);
  padding: clamp(16px,3vw,30px); animation: ab-aug-rise .3s ease;
}
@keyframes ab-aug-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.ab-aug-modal-head {
  position: relative; text-align: center; margin-bottom: clamp(16px,2.6vw,26px);
}
.ab-aug-modal-kicker {
  display: block; font-family: 'Manrope',sans-serif; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ab-gold-d); margin-bottom: 4px;
}
.ab-aug-modal-title {
  margin: 0; font-family: 'Cinzel Decorative','Cinzel',serif; font-weight: 900;
  font-size: clamp(1.5rem,4vw,2.1rem); color: var(--ab-gold);
  letter-spacing: .03em; text-shadow: 0 0 22px rgba(242,204,106,.4);
}
.ab-aug-close {
  position: absolute; top: -6px; right: -4px;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 1rem;
  background: rgba(8,14,28,.6); border: 1px solid rgba(201,162,74,.32); color: var(--ab-ink);
  transition: border-color .15s, background .15s;
}
.ab-aug-close:hover { border-color: rgba(242,204,106,.7); background: rgba(242,204,106,.08); }

.ab-aug-choices {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px,1.8vw,18px);
}
@media (max-width: 640px) { .ab-aug-choices { grid-template-columns: 1fr; } }

.ab-aug-choice {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 8px; text-align: center; cursor: pointer;
  padding: clamp(18px,2.4vw,26px) 16px 20px;
  background: linear-gradient(180deg, rgba(20,28,48,.92), rgba(10,16,30,.96));
  border: 2px solid var(--ab-aug, var(--ab-gold-d)); border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  transition: transform .12s, box-shadow .18s, background .18s;
}
.ab-aug-choice.ab-aug-econ   { --ab-aug: var(--ab-aug-econ); }
.ab-aug-choice.ab-aug-combat { --ab-aug: var(--ab-aug-combat); }
.ab-aug-choice.ab-aug-util   { --ab-aug: var(--ab-aug-util); }
.ab-aug-choice::before {
  content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--ab-aug) 18%, transparent), transparent 70%);
}
.ab-aug-choice:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.6), 0 0 26px var(--ab-aug);
  background: linear-gradient(180deg, rgba(26,36,60,.96), rgba(12,18,34,.98));
}
.ab-aug-choice:active { transform: translateY(-1px) scale(.99); }
.ab-aug-choice-tag {
  position: relative; z-index: 1;
  font-family: 'Manrope',sans-serif; font-weight: 800; font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  color: var(--ab-aug);
  background: color-mix(in srgb, var(--ab-aug) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ab-aug) 55%, transparent);
}
.ab-aug-choice-ic {
  position: relative; z-index: 1; font-size: 2rem; line-height: 1;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ab-aug) 70%, transparent));
}
.ab-aug-choice-name {
  position: relative; z-index: 1;
  font-family: 'Cinzel',serif; font-weight: 700; font-size: 1.05rem; color: var(--ab-ink);
  letter-spacing: .02em;
}
.ab-aug-choice-desc {
  position: relative; z-index: 1;
  font-family: 'EB Garamond',serif; font-size: .92rem; color: var(--ab-dim); line-height: 1.35;
}

/* ===================================================================== GUIDE */
.ab-guide {
  position: fixed; inset: 0; z-index: 1400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,18,.8); backdrop-filter: blur(5px);
  padding: 16px; animation: ab-fadein .25s;
}
.ab-guide-card {
  width: min(680px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--ab-panel); border: 1px solid rgba(242,204,106,.45);
  border-radius: 20px; box-shadow: 0 26px 80px rgba(0,0,0,.7);
  animation: ab-aug-rise .3s ease; overflow: hidden;
}
.ab-guide-head {
  position: relative; text-align: center; padding: 20px 44px 12px;
  border-bottom: 1px solid rgba(242,204,106,.18);
}
.ab-guide-kicker {
  display: block; font-family: 'IM Fell English SC',serif; letter-spacing: .12em;
  text-transform: uppercase; font-size: .72rem; color: var(--ab-gold-d);
}
.ab-guide-title {
  margin: 4px 0 0; font-family: 'Cinzel Decorative','Cinzel',serif; font-weight: 900;
  font-size: clamp(1.5rem,3.4vw,2rem);
  background: linear-gradient(180deg,#f7e6b0,#e0b25a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ab-guide-head .ab-aug-close { position: absolute; top: 14px; right: 14px; }
.ab-guide-body { padding: 16px 22px 6px; overflow-y: auto; }
.ab-guide-goal {
  margin: 0 0 14px; text-align: center; font-family: 'EB Garamond',serif; font-style: italic;
  font-size: 1.02rem; color: var(--ab-ink); line-height: 1.45;
}
.ab-guide-h {
  margin: 16px 0 8px; font-family: 'Cinzel',serif; font-weight: 700; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ab-gold-d);
}
.ab-guide-steps { display: grid; gap: 8px; }
.ab-guide-step {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(8,14,28,.5); border: 1px solid rgba(201,162,74,.18);
  border-radius: 12px; padding: 10px 13px;
}
.ab-guide-ic { font-size: 1.3rem; line-height: 1.25; flex: 0 0 auto; width: 26px; text-align: center; }
.ab-guide-st { font-family: 'Manrope',sans-serif; font-weight: 800; color: var(--ab-ink); font-size: .95rem; }
.ab-guide-sb { font-family: 'Manrope',sans-serif; color: var(--ab-dim); font-size: .85rem; line-height: 1.4; margin-top: 1px; }
.ab-guide-board {
  margin: 12px 0 2px; padding: 12px; border-radius: 14px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(150,50,60,.22), rgba(8,14,28,.6) 62%);
  border: 1px solid rgba(201,162,74,.2);
}
.ab-guide-enemy { text-align: center; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #e69; color: #e08a8a; margin-bottom: 8px; }
.ab-guide-row { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 6px 0; }
.ab-guide-front { margin-top: 4px; }
.ab-guide-rowlab { font-style: normal; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ab-dim); width: 90px; text-align: right; flex: 0 0 auto; }
.ab-guide-dot {
  width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; background: rgba(242,204,106,.1); border: 1px solid rgba(242,204,106,.3);
}
.ab-guide-front .ab-guide-dot { background: rgba(120,160,230,.12); border-color: rgba(120,160,230,.35); }
.ab-guide-tip {
  display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0;
  font-family: 'Manrope',sans-serif; font-size: .85rem; color: var(--ab-dim); line-height: 1.4;
}
.ab-guide-tip .ab-guide-ic { font-size: 1.1rem; width: 22px; }
.ab-guide-tip-hooves { color: var(--ab-gold-d); }
.ab-guide-foot { padding: 12px 22px 18px; text-align: center; border-top: 1px solid rgba(242,204,106,.14); }
.ab-guide-foot .btn { min-width: 200px; }
@media (max-width: 560px) {
  .ab-guide-rowlab { width: 62px; }
  .ab-guide-dot { width: 30px; height: 30px; font-size: .95rem; }
}

/* ===================================================================== PHASE 5: MULTIPLAYER LOBBY */
/* Start-screen entry panel (create / join by code). Rides the parchment card
   styling used elsewhere on the page. */
.ab-mp-entry {
  margin: 22px auto 0; max-width: 520px; animation: ab-aug-rise .25s ease;
}
.ab-mp-entry-card {
  background: var(--ab-panel); border: 1px solid rgba(242,204,106,.4);
  border-radius: 18px; padding: clamp(18px,3vw,28px); box-shadow: 0 16px 44px rgba(0,0,0,.5);
  text-align: center;
}
.ab-mp-entry-h {
  margin: 0 0 6px; font-family: 'Cinzel Decorative','Cinzel',serif; font-weight: 900;
  font-size: clamp(1.3rem,3vw,1.7rem); color: var(--ab-gold); letter-spacing: .03em;
}
.ab-mp-entry-sub {
  margin: 0 0 18px; font-family: 'EB Garamond',serif; font-style: italic;
  color: var(--ab-dim); font-size: .98rem; line-height: 1.4;
}
.ab-mp-entry-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.ab-mp-create { width: 100%; }
.ab-mp-join { display: flex; gap: 8px; }
.ab-mp-code-input {
  flex: 1 1 auto; min-width: 0; padding: 0 16px; height: 46px; border-radius: 12px;
  background: rgba(8,14,28,.7); border: 1px solid rgba(201,162,74,.4); color: var(--ab-ink);
  font-family: 'Cinzel',serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .35em;
  text-align: center; text-transform: uppercase;
}
.ab-mp-code-input::placeholder { color: var(--ab-dim); letter-spacing: .25em; opacity: .6; }
.ab-mp-code-input:focus { outline: none; border-color: var(--ab-gold); box-shadow: 0 0 0 2px rgba(242,204,106,.25); }
.ab-mp-join-btn { flex: 0 0 auto; }
.ab-mp-entry-back {
  margin-top: 14px; background: none; border: none; cursor: pointer;
  font-family: 'Manrope',sans-serif; font-weight: 600; font-size: .85rem; color: var(--ab-dim);
}
.ab-mp-entry-back:hover { color: var(--ab-ink); }

/* Waiting room (phase 'lobby') */
.ab-mp-lobby { max-width: 560px; margin: clamp(28px,6vh,80px) auto; text-align: center; }
.ab-mp-room-kicker { color: var(--ab-gold-d); }
.ab-mp-codecard {
  display: inline-flex; align-items: center; gap: 12px; margin: 8px auto 22px;
  padding: 12px 18px; border-radius: 14px;
  background: rgba(242,204,106,.08); border: 1px solid rgba(242,204,106,.4);
}
.ab-mp-code-lab {
  font-family: 'Manrope',sans-serif; font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ab-gold-d);
}
.ab-mp-code {
  font-family: 'Cinzel',serif; font-weight: 900; font-size: 1.6rem; letter-spacing: .3em;
  color: var(--ab-gold); text-shadow: 0 0 16px rgba(242,204,106,.4);
}
.ab-mp-code-copy {
  padding: 6px 12px; border-radius: 9px; cursor: pointer;
  background: rgba(8,14,28,.6); border: 1px solid rgba(201,162,74,.4); color: var(--ab-ink);
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .78rem;
  transition: border-color .15s, background .15s;
}
.ab-mp-code-copy:hover { border-color: rgba(242,204,106,.7); background: rgba(242,204,106,.08); }
.ab-mp-roster-list {
  list-style: none; margin: 0 auto 22px; padding: 0; max-width: 420px;
  display: flex; flex-direction: column; gap: 8px;
}
.ab-mp-roster-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 12px;
  background: rgba(8,14,28,.5); border: 1px solid rgba(201,162,74,.2); text-align: left;
}
.ab-mp-roster-row.is-you { background: rgba(242,204,106,.1); border-color: rgba(242,204,106,.45); }
.ab-mp-rr-name { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.ab-mp-rr-user {
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .98rem; color: var(--ab-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ab-mp-tag {
  font-family: 'Manrope',sans-serif; font-weight: 800; font-size: .56rem;
  letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  flex: 0 0 auto;
}
.ab-mp-tag.is-host { background: rgba(123,196,142,.16); border: 1px solid rgba(123,196,142,.5); color: #9be8b4; }
.ab-mp-tag.is-you { background: rgba(242,204,106,.18); border: 1px solid rgba(242,204,106,.6); color: var(--ab-gold); }
.ab-mp-room-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ab-mp-start { min-width: 220px; }
.ab-mp-start[disabled] { opacity: .5; cursor: not-allowed; }
.ab-mp-waithost { font-family: 'EB Garamond',serif; font-style: italic; color: var(--ab-dim); }
.ab-mp-leave {
  background: none; border: 1px solid rgba(224,138,138,.4); color: #e08a8a;
}
.ab-mp-leave:hover { border-color: rgba(224,138,138,.7); background: rgba(224,138,138,.08); }

/* shared avatar chip (waiting room + roster bar + podium) */
.ab-mp-av {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,14,28,.7); border: 1px solid rgba(201,162,74,.35);
  font-family: 'Cinzel',serif; font-weight: 700; font-size: .9rem; color: var(--ab-gold-d);
}
.ab-mp-av img { width: 100%; height: 100%; object-fit: cover; }

/* In-lobby HUD: roster bar + phase/round/countdown */
.ab-mp-hud {
  background: var(--ab-panel); border: 1px solid var(--ab-line);
  border-radius: 14px; padding: 10px clamp(12px,2vw,18px); margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.ab-mp-roster {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px;
}
.ab-mp-pl {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border-radius: 10px;
  background: rgba(8,14,28,.5); border: 1px solid rgba(201,162,74,.2); min-width: 130px;
  transition: opacity .2s, border-color .2s;
}
.ab-mp-pl.is-you { border-color: rgba(242,204,106,.5); background: rgba(242,204,106,.08); }
.ab-mp-pl.is-out { opacity: .5; filter: grayscale(.6); }
.ab-mp-pl .ab-mp-av { width: 28px; height: 28px; font-size: .8rem; }
.ab-mp-pl-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ab-mp-pl-name {
  font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .74rem; color: var(--ab-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 10ch;
}
.ab-mp-pl-hpbar {
  height: 6px; border-radius: 4px; background: rgba(8,14,28,.8);
  border: 1px solid rgba(224,121,107,.3); overflow: hidden; width: 64px;
}
.ab-mp-pl-hpfill { display: block; height: 100%; background: linear-gradient(90deg,#e0796b,#f2a25a); transition: width .4s ease; }
.ab-mp-pl-hpval { font-family: 'Manrope',sans-serif; font-weight: 700; font-size: .62rem; color: var(--ab-dim); font-variant-numeric: tabular-nums; }
.ab-mp-pl-place {
  font-family: 'Manrope',sans-serif; font-weight: 800; font-size: .68rem; color: #e08a8a;
}
.ab-mp-pl.is-you .ab-mp-pl-place { color: var(--ab-gold); }
.ab-mp-youmark {
  font-family: 'Manrope',sans-serif; font-weight: 800; font-size: .52rem;
  letter-spacing: .08em; padding: 2px 6px; border-radius: 999px; flex: 0 0 auto;
  background: rgba(242,204,106,.18); border: 1px solid rgba(242,204,106,.6); color: var(--ab-gold);
}
.ab-mp-phasebar {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid var(--ab-line);
}
.ab-mp-phase-round {
  font-family: 'EB Garamond',serif; font-style: italic; color: var(--ab-dim); font-size: .95rem;
}
.ab-mp-phase-name {
  font-family: 'Cinzel',serif; font-weight: 700; font-size: .9rem; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 12px; border-radius: 999px;
  background: rgba(109,179,255,.12); border: 1px solid rgba(109,179,255,.4); color: #9cc8ff;
}
.ab-mp-phase-name[data-phase="combat"] {
  background: rgba(224,121,107,.14); border-color: rgba(224,121,107,.5); color: #f2a290;
}
.ab-mp-timer {
  font-family: 'Cinzel',serif; font-weight: 900; font-size: 1.4rem; color: var(--ab-gold);
  font-variant-numeric: tabular-nums; letter-spacing: .04em; min-width: 3ch; text-align: center;
}
.ab-mp-timer.is-urgent { color: #ff7a4e; animation: ab-mp-pulse 1s ease-in-out infinite; }
@keyframes ab-mp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.ab-mp-locked {
  font-family: 'EB Garamond',serif; font-style: italic; color: var(--ab-gold-d); font-size: .9rem;
}

/* End / placement screen */
.ab-mp-end {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,18,.8); backdrop-filter: blur(4px); padding: 16px;
  animation: ab-fadein .25s;
}
.ab-mp-end-card {
  width: min(440px, 100%); max-height: 88vh; overflow-y: auto; text-align: center;
  padding: clamp(22px,4vw,34px) clamp(20px,3vw,30px);
  background: var(--ab-panel); border: 1px solid rgba(242,204,106,.45);
  border-radius: 20px; box-shadow: 0 26px 80px rgba(0,0,0,.7); animation: ab-aug-rise .3s ease;
}
.ab-mp-end-kicker {
  display: block; font-family: 'Manrope',sans-serif; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ab-gold-d); margin-bottom: 6px;
}
.ab-mp-end-place {
  display: block; font-family: 'Cinzel Decorative','Cinzel',serif; font-weight: 900;
  font-size: clamp(2rem,7vw,3rem); color: var(--ab-ink); letter-spacing: .02em;
}
.ab-mp-end-place b { color: var(--ab-gold-d); }
.ab-mp-end-place.is-win, .ab-mp-end-place.is-win b { color: var(--ab-gold); text-shadow: 0 0 24px rgba(242,204,106,.5); }
.ab-mp-end-of { font-family: 'EB Garamond',serif; font-style: italic; font-size: 1rem; color: var(--ab-dim); }
.ab-mp-end-sub { display: block; font-family: 'EB Garamond',serif; font-style: italic; color: var(--ab-dim); margin: 6px 0 14px; }
.ab-mp-end-rewards { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; min-height: 0; }
.ab-mp-podium {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; flex-direction: column; gap: 6px; text-align: left;
}
.ab-mp-podium-row {
  display: grid; grid-template-columns: 3ch 32px 1fr; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: 11px;
  background: rgba(8,14,28,.5); border: 1px solid rgba(201,162,74,.18);
}
.ab-mp-podium-row.is-you { background: rgba(242,204,106,.1); border-color: rgba(242,204,106,.45); }
.ab-mp-podium-row[data-place="1"] { border-color: rgba(242,204,106,.6); box-shadow: inset 0 0 0 1px rgba(242,204,106,.15); }
.ab-mp-podium-row[data-place="2"] { border-color: rgba(196,206,224,.5); }
.ab-mp-podium-row[data-place="3"] { border-color: rgba(199,140,90,.5); }
.ab-mp-podium-rank {
  font-family: 'Manrope',sans-serif; font-weight: 800; color: var(--ab-gold-d);
  font-variant-numeric: tabular-nums;
}
.ab-mp-podium-row[data-place="1"] .ab-mp-podium-rank { color: var(--ab-gold); }
.ab-mp-podium-row .ab-mp-av { width: 32px; height: 32px; }
.ab-mp-podium-name {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-family: 'Manrope',sans-serif; font-weight: 700; color: var(--ab-ink);
}
.ab-mp-podium-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-mp-end-back { min-width: 200px; }
@media (max-width: 480px) {
  .ab-mp-pl { min-width: 108px; }
  .ab-mp-phasebar { gap: 10px; }
}

/* MP lobby size selector (4 / 8) */
.ab-mp-size { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; }
.ab-mp-size-lab { font-family: 'Manrope',sans-serif; font-size: .8rem; color: var(--ab-dim); text-transform: uppercase; letter-spacing: .06em; }
.ab-mp-size-btn {
  min-width: 44px; padding: 7px 14px; border-radius: 10px; cursor: pointer;
  font-family: 'Cinzel',serif; font-weight: 700; font-size: .95rem;
  background: rgba(8,14,28,.6); border: 1px solid rgba(201,162,74,.3); color: var(--ab-dim);
  transition: border-color .15s, background .15s, color .15s, transform .08s;
}
.ab-mp-size-btn:hover { border-color: rgba(242,204,106,.6); color: var(--ab-ink); }
.ab-mp-size-btn:active { transform: scale(.96); }
.ab-mp-size-btn.is-active {
  background: linear-gradient(180deg, rgba(242,204,106,.22), rgba(242,204,106,.08));
  border-color: rgba(242,204,106,.7); color: #f7e6b0;
}