/* ============================================================
   hero-panel.css — shared PVE team-grid hero panel styling
   ============================================================
   Companion to hero-panel.js, which builds the matching markup.
   Load this file (as a <link rel="stylesheet">) on any page that
   renders panels via HeroPanel.renderCard() — every boss guide page
   should use the SAME two files rather than re-authoring this CSS,
   so every "sheet" (PVE boss guide) produces an identical panel.

   Design reference / interactive history: hero-panel-mockup.html
   (same directory) — that file is now itself a consumer of these
   two shared files, not a separate hand-authored copy.

   Panel size is 211.54 x 500px (500px tall, ~4% down-scaled from an
   earlier 520px-tall version — every px value below was multiplied
   by the same 500/520 ratio, so don't hand-tune one value without
   the others; see "Scaling the whole panel" at the bottom of this
   file if the target height ever needs to change again).

   Per-card color theming (--tint-strong/--tint-mid/--tint-fade/
   --tint-accent) is set inline per card by hero-panel.js from its
   own TYPE_TINTS table (keyed off hero.type) — never hand-typed
   per boss-guide page.

   STANDING RULES for every future consuming page (explicit user
   direction 2026-07-07):
   1. If the panel ever needs to resize to fit a page's layout, the
      WHOLE panel scales by one uniform ratio — see "Scaling the whole
      panel" at the bottom of this file. Never resize just the outer
      box (width/height) while leaving fonts/icons/gaps/padding at the
      old scale.
   2. No content may spill outside the panel's own border, at any
      scale. `.hero-cell{overflow:hidden}` is the enforcement backstop;
      `.hero-cell, .hero-cell *{box-sizing:border-box}` below is what
      makes every padding/width value in this file mean what it says
      regardless of whether the host page defines its own `box-sizing`
      reset (or a different one).
   3. This component's own styling SUPERSEDES a host page's differing
      aesthetic theme. A consuming page must never redefine `.hero-cell`/
      `.hc-*` selectors or rely on its own global resets/typography
      cascading into this component to make it look "right" — if a
      boss-guide page's theme visually clashes with this panel, the
      panel wins as-is; fix it here (and it then applies to every page),
      not with a page-local override.
   ============================================================ */

.hero-cell, .hero-cell *{
  box-sizing:border-box;
}

.hero-cell{
  position:relative;
  width:211.54px;
  height:500px;
  border-radius:9.62px;
  overflow:hidden;
  background:transparent;
  box-shadow:0 5.77px 17.31px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
  font-family:'SKR Global','Lato', sans-serif;
}

/* Default: images/heroes/raw/<rarity>/PanelCrop/ — hand-cropped art from
   panel-crop-tool.html, already pre-shaped to this panel's own 0.4235:1
   aspect ratio (see that tool + CLAUDE.md's "Hero Panel Component" bullet
   for the full pipeline). No scale/reposition hack needed: the crop IS the
   final framing, so a plain center-cover just displays it as-authored. */
.hc-portrait{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}

/* Fallback ONLY for a hero not yet in hero-panel.js's PANEL_CROP_IDS — the
   older images/heroes/raw/<rarity>/{6|AWK}/ "Big" source (a plain 512²/1024²
   bust crop, NOT pre-shaped to the panel's tall aspect ratio) needs this
   zoom+reposition hack to land the face reasonably. Applied automatically
   by hero-panel.js's renderCard() based on hasPanelCrop() — never hand-add
   or hand-remove this class on a specific page. Retire this rule entirely
   once every hero has real PanelCrop art. */
.hc-portrait--legacy{
  object-position:center 14%;
  transform:scale(1.18);
  transform-origin:center 14%;
}

/* rarity corner badge — L+/L++ only */
.hc-rarity{
  position:absolute; top:0; right:0;
  width:80.77px; height:80.77px;
  pointer-events:none;
  z-index:3;
}

/* Speed/turn-order badge (top-left, mirrors the rarity badge's corner on
   the right) — same neutral dark tone as every other label in the panel
   (.hc-stats/.stat-label's palette), NOT god.html's own A-lightest→
   E-darkest grayscale fade convention. Every letter reads at full,
   identical strength regardless of how slow that hero's turn order is —
   explicit user direction 2026-07-07: "do not fade it even as the speed
   is lower." */
.hc-speed-badge{
  position:absolute; top:7.69px; left:7.69px;
  z-index:5;
  width:28.85px; height:28.85px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  font-family:'SKR Global','Lato',sans-serif; font-weight:900; font-size:12.5px;
  /* Explicit line-height, not the browser default (`normal`, ~1.15-1.2x
     font-size) -- without this, the flex box centers the letter against
     a LINE BOX whose height is a fraction of a scaled font-size, and
     that fraction rounds to a different whole device pixel at nearly
     every window width (since this badge's font-size gets multiplied by
     a consuming page's fractional transform:scale() responsive wrapper,
     e.g. advent-expedition.html's HeroPanelCard) -- reads as the letter
     visibly drifting within the circle as the window resizes. line-
     height:1 removes that variable, so the flex centering has a fixed,
     single-value box to center against at any scale. */
  line-height:1;
  color:#f2f5f9;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* bottom gradient tinted to hero type color — darkest right at the
   bottom edge, staying fully opaque through the info zone, then fading
   out above it so the transition into the face reads smoothly.

   Firefox-only hairline-seam fix: pinpointed via a user screenshot with
   arrows at consistent heights on every panel -- NOT this box's own
   outer edge (an earlier, wrong theory tried a top-edge overscan; ruled
   out because the arrows land well below where that edge computes to).
   Converting the arrow heights into % of this gradient's OWN stop scale
   (each linear-gradient stop below is a % of this box's 310px height,
   counted bottom-up) lines them up almost exactly with the 84% and 62%
   stops -- i.e. the seams sit right at the two points where this
   gradient's slope changes direction (flat 0-42% into the 42-62%
   transition, and again at 62-84%). Under a consuming page's fractional
   CSS transform:scale() responsive-resize wrapper (e.g.
   advent-expedition.html's HeroPanelCard), Firefox re-derives this
   linear-gradient live in the scaled coordinate space, and a visible
   hairline can appear exactly at a slope-discontinuity point. `filter:
   blur()` forces this element through Firefox's filter-compositing
   pipeline instead -- rasterized as one flat bitmap in its own
   coordinate space FIRST, then scaled as a unit by the ancestor
   transform, same as any other filtered layer -- which sidesteps the
   live-rescale path this bug lives in. The blur radius is small enough
   to be visually a no-op against a large soft gradient, while still
   being enough to fully absorb a 1px-scale artifact if any residual
   trace survives the layer-promotion fix.

   Side effect of the blur, found immediately after: a Gaussian blur
   "erodes" color right at a hard edge (there's no adjacent color past
   the boundary to blend with), leaving a hairline of .hero-cell's own
   dark background peeking through along this div's left/right/bottom
   edges. Fixed with the same ~2px overscan convention used elsewhere in
   this file for edge artifacts -- safe since .hero-cell's own
   overflow:hidden clips the overscanned margin regardless. */
.hc-gradient{
  position:absolute; left:-2px; right:-2px; bottom:-2px;
  height:calc(62% + 2px);
  z-index:2;
  filter:blur(0.75px);
  background: linear-gradient(to top,
    var(--tint-strong) 0%,
    var(--tint-strong) 42%,
    var(--tint-mid) 62%,
    var(--tint-fade) 84%,
    transparent 100%);
}

/* Auto-height (not force-pinned to a fixed %) — an explicit gap between
   each row gives stars/stats/gear/name room to breathe instead of being
   crammed together, and generous bottom padding keeps the name clear of
   the cell's rounded corner instead of reading as clipped. Since the
   block's own height grows with its content, the stars row (its first
   child) naturally sits higher up, off the portrait/gradient seam,
   rather than jammed against the stats box under it. */
.hc-info{
  position:absolute; left:0; right:0; bottom:0;
  z-index:4;
  padding:11.54px 11.54px 15.38px;
  display:flex; flex-direction:column; gap:13.46px;
}

/* order top-to-bottom within hc-info: stars, stats, gear/accessory, type+name */

/* Star art has built-in transparent padding around the glyph itself —
   a negative margin pulls each star in tight against its neighbor
   instead of leaving CSS gap on top of that built-in padding. */
.hc-stars{ display:flex; justify-content:center; }
.hc-stars img{ width:21.15px; height:21.15px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); margin-left:-5.77px; }
.hc-stars img:first-child{ margin-left:0; }

.hc-stats{
  background:rgba(0,0,0,.55);
  border-radius:4.81px;
  padding:5.77px 7.69px;
  font-size:10.58px;
  line-height:1.6;
  color:#dbe2ec;
}
.hc-stats .stat-line{ display:flex; justify-content:space-between; gap:7.69px; }
.hc-stats .stat-label{ color:#9fb0c4; font-weight:600; }
.hc-stats .stat-val{ font-weight:700; color:#f2f5f9; }
/* DE STAT row: same label-left/value-right layout as SPD/ATK/CDMG,
   just visually separated by a divider and accent-colored value. */
.hc-stats .dedi-line{ margin-top:3.85px; padding-top:3.85px; border-top:1px solid rgba(255,255,255,.15); }
.hc-stats .dedi-val{ color:var(--tint-accent); }

/* Gear set icon sits apart from the accessory group (no "+" between
   them) — the "+" only appears BETWEEN the 2 accessory icons, always
   shown as 2 separate boxes (never a single collapsed combo icon).
   Gear and accessory boxes are the same size. */
.hc-gearrow{
  display:flex; align-items:center; justify-content:center; gap:15.38px;
}
.hc-gear-icon, .hc-acc-icon{
  width:46.15px; height:46.15px; flex:0 0 46.15px; border-radius:5.77px; background:rgba(0,0,0,.4);
  padding:1.92px; box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.hc-acc-group{ display:flex; align-items:center; gap:5.77px; }
.hc-plus{ color:#c3d0e0; font-size:13.46px; font-weight:700; }

.hc-toprow{
  display:flex; align-items:center; justify-content:space-between; gap:5.77px;
}
.hc-type-icon{ width:21.15px; height:21.15px; flex:0 0 auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.hc-name{
  font-family:'SKR Global','Lato',sans-serif; font-weight:900; font-size:14.42px;
  color:#f5f7fa; text-align:right; letter-spacing:.29px;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ============================================================
   Scaling the whole panel to a different target height
   ============================================================
   Every px value above was derived from one original 220x520 design
   by multiplying by (targetHeight / 520). To retarget:
     1. ratio = newHeight / 520
     2. multiply every px value in this file by `ratio` (width,
        height, border-radius, box-shadow offsets/blur, padding, gap,
        font-size, letter-spacing, icon widths/heights, margins)
     3. leave percentages (%), the portrait's object-position/scale
        ratio, unitless line-height, and 1px hairline borders alone —
        those already scale themselves or are deliberately fixed.
   Do NOT hand-tune only height/width and leave the rest at the old
   scale — that's what caused the "everything too cramped" / "icons
   shrunk" back-and-forth before this file existed.
   ============================================================ */