/* RPG status badge + inline telephone-radio music player.
   On desktop, sits absolutely-positioned in the top-right corner of the
   sticky hero so it pins to the viewport corner regardless of the
   container's max-width — and rides along when the hero shrinks on
   scroll (see .hero--compact rules at the bottom of this file). On
   mobile the hero isn't sticky, so the badge falls back to fixed
   bottom-right. Reads its data from Firestore at settings/status. */

.status-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 164px;
  background: rgba(10, 8, 8, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #1e1e1e;
  border-radius: 12px;
  padding: 0.7rem 0.85rem 0.65rem;
  color: #e8e8e8;
  font-family: 'Space Mono', monospace;
  user-select: none;
  /* Layered red halo (tight inner + wider outer) plus a soft depth
     shadow underneath, so the card feels lit from within rather than
     just outlined. Inner halo gives the punch right at the edge; the
     outer one bleeds further for atmosphere. */
  box-shadow:
    0 0 14px rgba(179, 0, 0, 0.28),
    0 0 38px rgba(139, 0, 0, 0.2),
    0 4px 14px rgba(0, 0, 0, 0.35);
  /* No CSS transitions here — the vertical-card → horizontal-bar pivot
     is driven by GSAP's Flip in js/hero-shrink.js, which animates via
     transforms. CSS transitions would fight Flip's transforms. */
}

/* Compact mode pivots the card from a vertical block to a two-column
   layout:
       [ name  class    ] [ HP ====  ]
       [ [effect] [...]  ] [ MP ====  ]
       [                 ] [ SP ====  ]
   Left column stacks the identity (name + class on top, status effects
   directly beneath). Right column stacks the three stat bars. Effects
   stay in normal flow so GSAP Flip can animate them into place rather
   than orphaning them at their pre-shrink coords (previously hidden
   with display:none, which read as "left behind" during the morph).
   (Music controls used to live here; they're now in the dock popover.) */
.hero--compact .status-badge {
  top: 0.5rem;
  width: auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: repeat(3, auto);
  column-gap: 0.75rem;
  row-gap: 0.15rem;
  align-items: center;
  padding: 0.4rem 0.75rem;
}

/* Keep header as a single grid cell (flex row of name + class) instead
   of `display: contents`, so both pieces move together and effects can
   slot directly underneath them. */
.hero--compact .sb-header {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  /* Override default `space-between` — the column is sized by the wider
     effects row beneath, and we don't want name/class spreading to fill
     that extra width. */
  justify-content: flex-start;
  gap: 0.55rem;
  border-bottom: none;
  margin: 0;
  padding: 0;
}

/* Effects span the bottom of the left column (rows 2-3, hugging the
   bar stack's baseline) so the header + chips bracket the bars rather
   than leaving dead space underneath. */
.hero--compact .status-effects {
  grid-column: 1;
  grid-row: 2 / 4;
  margin: 0;
  padding: 0;
  border-top: none;
  gap: 0.2rem;
  align-self: end;
}

.hero--compact .stat-row {
  grid-column: 2;
  margin-bottom: 0;
}
.hero--compact .stat-row--hp { grid-row: 1; }
.hero--compact .stat-row--mp { grid-row: 2; }
.hero--compact .stat-row--sp { grid-row: 3; }
.hero--compact .stat-bar { flex: 0 0 56px; height: 4px; }

/* Tooltip — compact mode sits flush against the viewport's top-right
   corner, so the default centered-above positioning overflows both
   axes (top is clipped by the viewport edge, right by horizontal
   overflow). Flip the tooltip below the row and anchor it to the
   row's right edge so it grows leftward into the badge. Arrow flips
   to point UP into the stat row. */
.hero--compact .stat-tooltip {
  bottom: auto;
  top: calc(100% + 6px);
  left: auto;
  right: 0;
  transform: translateY(-4px);
}
.hero--compact .stat-row:hover .stat-tooltip {
  transform: translateY(0);
}
.hero--compact .stat-tooltip::after {
  top: auto;
  bottom: 100%;
  left: auto;
  right: 10px;
  transform: none;
  border-top-color: transparent;
  border-bottom-color: #2a2020;
}

@media (max-width: 768px) {
  /* On mobile, the badge collapses to a small "JENI" chip pinned to
     the top-right of the sticky hero. Tapping it toggles `.is-expanded`
     (see js/status-badge.js bindMobileToggle) which restores the full
     compact grid layout. Tap outside collapses again.

     Override .hero--compact .status-badge directly because the desktop
     compact rules above set grid/positioning props at the same
     specificity — these later mobile rules then win by source order. */
  /* Chip — fixed-size container that ONLY shows the mini bars. Its
     dimensions never change on tap (the panel below it is a separate
     overlay), so no layout invalidation can ripple out and nudge the
     dock. position: fixed anchors it to the viewport top-right. */
  .hero--compact .status-badge {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 0.35rem 0.6rem;
    grid-template-columns: none;
    grid-template-rows: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .hero--compact .status-badge .sb-mini {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  /* Panel — separately positioned overlay anchored just below the chip.
     Hidden by default; shown when .is-expanded is on the badge. Because
     this is a different DOM node (and its visibility toggle is `display`
     not a size change on the chip), tapping the chip doesn't resize
     the chip itself and therefore can't trigger the layout-repaint
     cascade that was nudging the dock. */
  .hero--compact .status-badge .sb-panel {
    display: none;
    position: fixed;
    /* Sits right under the chip (chip is ~30px tall at top:1.5rem,
       so panel top ≈ 1.5rem + 30 + a small gap). */
    top: calc(1.5rem + 30px + 6px);
    right: 1.5rem;
    z-index: 51;
    /* Explicit cap (not max-content) so iOS Safari can't ignore the
       max-width clamp and let the grid auto-size past the viewport.
       260px is plenty for header + label-and-bar + chips; the min()
       guarantees we still fit on the narrowest phones. */
    width: min(260px, calc(100vw - 2.5rem));
    /* Belt-and-suspenders: clip anything that somehow tries to extend
       past the panel edge instead of pushing the panel wider. */
    overflow: hidden;
    background: rgba(10, 8, 8, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid #1e1e1e;
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    box-shadow:
      0 0 14px rgba(179, 0, 0, 0.28),
      0 0 38px rgba(139, 0, 0, 0.2),
      0 4px 14px rgba(0, 0, 0, 0.4);
    /* Internal layout matches the desktop compact grid. */
    grid-template-columns: auto auto;
    grid-template-rows: repeat(3, auto);
    column-gap: 0.6rem;
    row-gap: 0.18rem;
    align-items: center;
  }
  .hero--compact .status-badge.is-expanded .sb-panel { display: grid; }
}

/* ---------- Header (name + class) ---------- */

.sb-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #1a1a1a;
  margin-bottom: 0.55rem;
  padding-bottom: 0.4rem;
}
.sb-name {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e8e8e8;
}
.sb-class {
  font-size: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a89090;
}

/* ---------- Stat rows ---------- */

.stat-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.stat-label {
  font-size: 0.5rem;
  font-weight: 700;
  min-width: 20px;
  letter-spacing: 0.05em;
}
.stat-row--hp .stat-label { color: #cc4444; }
.stat-row--mp .stat-label { color: #4488cc; }
.stat-row--sp .stat-label { color: #44aa66; }

.stat-bar {
  flex: 1;
  background: #1a1a1a;
  height: 5px;
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.stat-bar__fill {
  height: 100%;
  border-radius: 1px;
  position: relative;
  overflow: hidden;
  transition: width 0.4s ease;
}
.stat-row--hp .stat-bar__fill {
  background: linear-gradient(90deg, #8b2020, #cc4444);
  box-shadow: 0 0 6px rgba(204, 68, 68, 0.3);
}
.stat-row--mp .stat-bar__fill {
  background: linear-gradient(90deg, #204080, #4488cc);
  box-shadow: 0 0 6px rgba(68, 136, 204, 0.3);
}
.stat-row--sp .stat-bar__fill {
  background: linear-gradient(90deg, #207040, #44aa66);
  box-shadow: 0 0 6px rgba(68, 170, 102, 0.3);
}

/* Subtle shimmer sweep across each fill bar. */
.stat-bar__fill::after {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  animation: sbShimmer 3s infinite;
}
@keyframes sbShimmer {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* Tooltip — full-stat-name + value on hover. */
.stat-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 4px);
  font-size: 0.48rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.45rem;
  background: #1a1616;
  border: 1px solid #2a2020;
  border-radius: 2px;
  color: #c4b0b0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 2;
}
.stat-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #2a2020;
}
.stat-row:hover .stat-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Panel wrapper ----------
   Transparent on desktop (display: contents lets its children act as
   direct grid items of .status-badge). Becomes a separately-positioned
   overlay on mobile so the chip doesn't have to resize when expanded —
   see mobile rules below. */
.sb-panel { display: contents; }

/* ---------- Mini bars (mobile collapsed teaser) ----------
   Three short stat bars mirroring HP/MP/SP that replace the "JENI"
   text in the collapsed mobile badge. Each bar is a faint track with a
   colored fill whose width is the actual stat percentage (via --fill,
   set inline by render()) — so the chip reads as a stat preview at a
   glance, NOT a hamburger menu. Hidden on desktop and when the mobile
   badge is expanded (.is-expanded). */
.sb-mini { display: none; }
.sb-mini-bar {
  display: block;
  width: 18px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.sb-mini-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--fill, 100%);
  border-radius: 1px;
}
.sb-mini-bar--hp::after { background: linear-gradient(90deg, #8b2020, #cc4444); box-shadow: 0 0 4px rgba(204, 68, 68, 0.5); }
.sb-mini-bar--mp::after { background: linear-gradient(90deg, #204080, #4488cc); box-shadow: 0 0 4px rgba(68, 136, 204, 0.5); }
.sb-mini-bar--sp::after { background: linear-gradient(90deg, #207040, #44aa66); box-shadow: 0 0 4px rgba(68, 170, 102, 0.5); }

/* ---------- Status effects ---------- */

.status-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid #1a1a1a;
}
.status-effect {
  font-size: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.3rem;
  border: 1px solid;
  border-radius: 2px;
  background: transparent;
}
.status-effect.buff    { color: #a89060; border-color: #3a3020; }
.status-effect.active  { color: #44aa66; border-color: #1a3a20; }
.status-effect.debuff  { color: #aa6644; border-color: #3a2a1a; }
.status-effect.neutral { color: #8888aa; border-color: #22223a; }

/* Music player styles moved to css/music-player.css — the player UI
   now lives in a dock-anchored popover (MusicPlayer module). */