/* Heroes: the hero's shop tile and its in-match panel. The Heroes page itself
   is styled in ui/pages.css. Uses the woodland palette shared with the rest of
   the UI (style.css). */

/* ---- Menu: the Heroes medallion and the Bestiary side button ------------ */
.med-face.heroes { background: radial-gradient(circle at 50% 30%, #f7dfaa, #c89d58 60%, #8d6635); }
.side-face.grubs { background: radial-gradient(circle at 50% 30%, #f0d2a6, #c4824a 60%, #7d4520); }
.side-face.grubs svg { width: 74%; height: 74%; transform: rotate(-28deg); filter: drop-shadow(0 2px 0 rgba(60,25,8,.45)); }

/* ---- Shop: the hero's card spans the rail, gold-framed ------------------
   Portrait in a glowing frame on the left; name and price on the right. */
.tile.hero-tile {
  grid-column: 1 / -1; aspect-ratio: auto; display: grid; grid-template-columns: 46% minmax(0, 1fr); align-items: center; gap: 0 6px;
  padding: 4px 6px 4px 4px; color: #fff;
  background:
    radial-gradient(70% 90% at 75% 0%, rgba(120,170,90,.24), rgba(120,170,90,0) 70%) padding-box,
    linear-gradient(180deg, #2c4b30 0%, #1f3b25 60%, #142d1b 100%) padding-box,
    var(--hud-ring) border-box;
  box-shadow: 0 0 0 1.5px var(--hud-bark), 0 3px 0 1.5px rgba(0,0,0,.42);
}
.tile.hero-tile::before {
  left: -2%; right: -2%; bottom: -5%; height: 32%;
  background: url('../../assets/ui/hud-flower.svg') 5% 30% / auto 46% no-repeat, url('../../assets/ui/hud-sprig.svg') left bottom / auto 100% no-repeat, url('../../assets/ui/hud-sprig-r.svg') right bottom / auto 100% no-repeat;
}
.tile.hero-tile .tile-icon {
  position: relative; inset: auto; width: 100%; aspect-ratio: 1.25; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 46%, #fdfbb0 0%, #e6ec86 22%, #93b44e 52%, #3e6a2e 82%, #24452a 100%);
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.35), inset 0 0 12px rgba(20,50,20,.45);
}
.ht-text { position: relative; z-index: 2; display: grid; gap: 4px; justify-items: stretch; min-width: 0; padding-bottom: 2px; }
.ht-tag { justify-self: start; margin-left: 3px; font-style: normal; font-size: 10px; font-size: clamp(9px, 4.6cqw, 13px); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 0 7px; border-radius: 999px; color: #3a2a08; background: linear-gradient(#ffe596, #e3a54b); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.tile.hero-tile .tile-name { display: block; position: static; text-align: left; padding-left: 3px; font-size: 16px; font-size: clamp(14px, 11cqw, 28px); color: #fff; text-shadow: var(--hud-ink); }
.tile.hero-tile .tile-cost { position: relative; inset: auto; height: auto; padding: 4px 6px; font-size: 15px; font-size: clamp(13px, 9.5cqw, 24px); }
.ht-xp { display: none; width: 100%; height: 5px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; }
.ht-xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffe08a, #f2c14e); transition: width .4s ease; }
.tile.hero-tile.placed .ht-xp { display: block; }
.tile.hero-tile.placed .tile-cost { color: #ffe08a; }
.tile.hero-tile kbd { left: auto; right: 6px; }
.tile.hero-tile.active { box-shadow: 0 0 0 1.5px var(--hud-bark), 0 0 0 4.5px rgba(255,210,100,.5), 0 3px 0 1.5px rgba(0,0,0,.42); }

/* ---- In-match hero panel (TD.UpgradeUI.syncHeroPanel) ------------------- */
.tp .hp-lv { background: linear-gradient(#ffe08a, #e9a72c); }
.tp .hp-lv.flash { animation: hp-flash .5s var(--spring); }
@keyframes hp-flash { 40% { transform: scale(1.3); } }
.hp-pic svg { filter: drop-shadow(0 0 4px rgba(242,193,78,.6)) drop-shadow(0 2px 0 rgba(0,0,0,.35)) !important; }
.hp-xp { display: grid; gap: 2px; }
.hp-bar { display: block; height: 9px; border-radius: 5px; background: var(--track); overflow: hidden; box-shadow: inset 0 1px 2px rgba(100,74,30,.22); }
.hp-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #ffe08a, #f2c14e 60%, #e2a52c); transition: width .5s ease; }
.hp-xp small { font-size: 11px; color: var(--text-soft); text-align: right; font-variant-numeric: tabular-nums; }
.hp-lvl {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 42px; padding: 0 10px; border: 0; border-radius: 12px;
  font: inherit; font-weight: 700; color: #fff; cursor: pointer; text-shadow: 0 2px 0 rgba(0,0,0,.3);
  background: linear-gradient(var(--go-a), var(--go-b)); box-shadow: 0 3px 0 var(--go-deep); transition: transform .2s var(--spring);
}
.hp-lvl:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--go-deep); transition-duration: .05s; }
.hp-up { display: grid; text-align: left; line-height: 1.05; font-size: 15px; }
.hp-up small { font-size: 11px; font-weight: 500; opacity: .85; }
.hp-price { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; font-variant-numeric: tabular-nums; }
.hp-price svg { width: 14px; height: 14px; color: #ffe08a; }
.hp-lvl.poor { background: linear-gradient(var(--btn-off), var(--btn-off)); color: var(--btn-off-text); box-shadow: 0 3px 0 var(--btn-off-drop); text-shadow: none; }
.hp-lvl.poor .hp-price { color: var(--bad-text); }
.hp-lvl.poor .hp-price svg { color: inherit; }
.hp-lvl.max { cursor: default; justify-content: center; gap: 6px; color: #3a2a08; text-shadow: none; background: linear-gradient(#ffe08a, #e9b43e); box-shadow: 0 3px 0 #9a6c12; }
.hp-lvl.max svg { width: 16px; height: 16px; }
.hp-next { display: grid; gap: 1px; padding: 6px 9px; border-radius: 4px 12px 12px 4px; background: var(--well); box-shadow: inset 3px 0 0 #d3a23c, inset 0 0 0 1px var(--well-line); }
.hp-next small { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.hp-next b { font-size: 13.5px; }
.hp-next span { font-size: 11.5px; color: var(--text-soft); line-height: 1.25; }
.hp-abs { display: grid; gap: 5px; }
.tp .hp-ab-locked { color: var(--text-soft); background: var(--well); box-shadow: inset 0 0 0 1px var(--well-line), 0 2px 0 var(--card-drop); cursor: default; }
.tp .hp-ab-locked b svg { color: var(--gold-text); }
@media (max-height: 699px) { .hp-next span { display: none; } }
@media (max-height: 560px) {
  .hp-next { display: none; }
  .hp-lvl { min-height: 36px; }
  .tp .hp-abs .tp-ab { display: grid; min-height: 36px; }
  .tp .hp-abs .tp-ab small { display: none; }
}

/* Ability tray: hero chips get a gold rim. */
.uu-chip.hero { box-shadow: 0 0 0 2px #e2a52c, 0 2px 0 rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.3); }
.uu-chip.hero.ready { box-shadow: 0 0 0 3px #ffe08a, 0 6px 14px rgba(0,0,0,.3); }