/* =============================================================
   WAVEDASH-OVERRIDES.CSS — single sheet of Wavedash-only tweaks
   =============================================================
   Loaded ONLY by wavedash-auth.html and wavedash.html (= the build
   shipped to Wavedash CDN). NEVER linked from index.html / lobby.html
   so the heroescm.com prod UI is unchanged.

   Rules here override style.css because this file is linked AFTER
   style.css in the head. Keep selectors specific (not *) so the
   prod base sheet still owns everything we don't intentionally
   change.

   Topics covered:
   1. Combat sidebar (combat log) — shrink so battlefield gets more room
   2. Player name in HUD — slightly smaller font
   3. Helpful Tips popup — scale down so it fits Wavedash player iframe
   4. Leaderboard — hide all prize/money UI (no cash prizes on Wavedash)
   ============================================================= */

/* ── 1. Combat sidebar (Combat Log) — shrink ~30% (280px → 196px) ── */
/* Leaves more horizontal room for the battlefield without changing
   any combat-internal coords (the playfield itself is fixed-size
   inside .combat-main and gets centered by .combat-main-wrapper). */
.combat-sidebar {
  width: 196px !important;
  min-width: 196px !important;
  max-width: 196px !important;
}

/* ── 2. Player name in HUD — smaller font ── */
/* Default 0.95rem felt too dominant in the lobby header given the
   Wavedash player chrome already shows the game title above us. */
#hud-name {
  font-size: 0.78rem !important;
  letter-spacing: 0.5px;
}

/* ── 3. Helpful Tips + START BATTLE button ──
   Tips panel: scale 0.7 only — JS in hex-combat.js#positionPanel
   keeps it above the roster.

   START BATTLE button has TWO states:
   · Tips visible — anchored 20 px below the .formation-title (Troop
     Placement) panel. Since .formation-title sits at top:10 with
     about 100 px height, top:130 lands just under it with a small
     visual gap.
   · Tips closed — detached from the title, slides smoothly to the
     center of the battlefield (top:340 in combat-main local coords). */
/* Calculated from real DevTools measurements (Wavedash player at
   974×548 viewport, combat-main scale 0.6433):
     · combat-main bottom = y:446 (= map bottom = roster top)
     · #formation-title (Troop Placement) bottom = y:119
     · button needs y:139 (20 px below title)
     · tips bottom needs y:436 (10 px above map bottom)
   Tips uses position:fixed → `top` is viewport-pixel.
   Button uses position:absolute inside scaled combat-main → `top` is
   in local 1200×700 space, multiplied by 0.6433 on screen. */
.combat-tips-panel {
  top: 179px !important;
  transform: translateX(-50%) scale(0.7) !important;
  transform-origin: top center !important;
}
@keyframes combat-tips-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.7); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.7); }
}
body:has(.combat-tips-panel) #formation-bar {
  top: 140px !important;
  transform: translateX(-50%) !important;
}
body:not(:has(.combat-tips-panel)) #formation-bar {
  top: 340px !important;
  transform: translateX(-50%) !important;
  transition: top 0.4s ease;
}

/* ── 7. Hero panel name — shrink so long guest names fit ──
   `guest_<8-hex>` synthetic usernames generated by auth:wavedash-guest
   are ~14 chars, which overflowed the default 0.85rem font on the
   on-field hero label. Reduce + tighten letter-spacing so the typical
   guest name still reads cleanly without truncation. */
.hero-panel-name {
  font-size: 0.62rem !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 5. Tutorial step popup (.tut-tip) — scale to 0.7 ─────────
   The 8-step lobby tutorial (YOUR HERO / ARMY BUILDER / etc.) has
   default 360 px width and dense Crimson-Text body. At Wavedash player
   iframe size it dominates the screen. Scale-only keeps the wording
   intact + same proportions — just smaller. Top-left origin matches
   the JS positioning logic. */
.tut-tip {
  transform: scale(0.7);
  transform-origin: top left;
}

/* ── 6. Artifact / inventory hover tooltip (.art-tooltip) — scale to 0.7 ─
   Same approach. The tooltip is positioned relative to the cursor, so
   transform-origin top-left keeps it visually anchored where JS placed
   the top-left corner. */
.art-tooltip {
  transform: scale(0.7);
  transform-origin: top left;
}
.art-tooltip.show {
  /* Override the show-state transform from style.css so our scale is
     not stomped during the entrance animation. */
  transform: scale(0.7) translateY(0) !important;
  transform-origin: top left !important;
}

/* ── 4. Leaderboard — strip ALL prize / money UI ── */
/* Hide the WEEK X PRIZE POOL banner block (title + subtitle + medal
   slots). Each piece has a class prefixed `lb-prize-...`. Catch the
   list-row money tags + medals too so the table is just: rank,
   player, earned XP. */
.lb-prize-banner,
.lb-prize-title,
.lb-prize-subtitle,
.lb-prize-split,
.lb-prize-slot,
.lb-prize-note,
.lb-prize-tag,
.lb-medal,
.lb-place,
.lb-countdown,
.lb-wallet-note,
.lb-admin-note { display: none !important; }
/* The $-tag was a child of .lb-name; once hidden the surrounding
   space looks fine, no extra layout fix needed. */