/* FishWeightBar component (webapp/static/js/components/fish-weight-bar.js) —
   the catch-result trophy gauge. Gradient stops below are hand-tuned to the
   exact same zone boundaries the component draws its dividers at (0.20,
   0.40, 0.60, 0.75, 0.90, 0.98 — mirroring
   app/services/economy/fish_pricing.py's SIZE_CATEGORY_THRESHOLDS), so the
   color under the indicator always matches the category label shown below
   it. Rebalance both together.

   Every property the JS animates per frame (indicator position, segment
   glow) is transform/filter/box-shadow/opacity only — never left/width/
   margin — so none of it forces a layout recalculation. */

.fish-weight-bar {
  display: flex;
  flex-direction: column;
  /* Tighter than --space-3 — this component only ever appears in the
     catch-result screen (webapp/static/css/minigame.css's .catch-result),
     whose fish image was enlarged to 250px; every gap here is trimmed to
     compensate so the layout doesn't grow taller overall. */
  gap: var(--space-2);
  width: 100%;
  align-self: stretch;
  /* Set once from WEIGHT_BAR_CONFIG so every segment inherits it without a
     per-element write — see fish-weight-bar.js's render(). */
  --segment-fade-duration: 220ms;
}

.fish-weight-bar__track {
  position: relative;
  width: 100%;
  height: clamp(22px, 6vw, 32px);
  margin-top: clamp(8px, 2vw, 12px);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.fish-weight-bar__gradient {
  position: absolute;
  inset: 0;
  opacity: 0.9;
  background: linear-gradient(
    90deg,
    var(--rarity-common) 0%,
    var(--rarity-uncommon) 20%,
    var(--rarity-rare) 40%,
    var(--rarity-epic) 60%,
    var(--gold-500) 75%,
    #ff9d3d 90%,
    var(--gold-400) 98%,
    #fff6d8 100%
  );
}

/* Ruler ticks — real elements (not a CSS background pattern) because each
   one needs its own independently-animatable "energized" glow as the
   indicator passes it (see updateSegmentGlow in fish-weight-bar.js). Count
   is small (WEIGHT_BAR_CONFIG.segmentCount, default 50) so this stays cheap;
   position is set once at build time via `left`, never touched again —
   only the already-cheap `filter`/`box-shadow` animate per frame. */
.fish-weight-bar__segment {
  position: absolute;
  bottom: 4px;
  width: 1.5px;
  height: 42%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.4);
  filter: brightness(calc(1 + var(--intensity, 0) * 2.2));
  box-shadow: 0 0 calc(var(--intensity, 0) * 9px) color-mix(in srgb, var(--gold-400) 90%, transparent);
  transition: filter var(--segment-fade-duration) ease-out, box-shadow var(--segment-fade-duration) ease-out;
  pointer-events: none;
  will-change: filter;
}
.fish-weight-bar__segment--major {
  height: 72%;
  width: 2px;
  background: rgba(255, 255, 255, 0.65);
}

.fish-weight-bar__zone-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
}

/* The final-flash region — the last WEIGHT_BAR_CONFIG.flashRegionFraction of
   the track, lit up once the indicator settles at >= goldTierRatio. Its own
   size is set once (static geometry, not animated), only opacity/its inner
   wave's transform change afterward. */
.fish-weight-bar__flash-region {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.fish-weight-bar__flash-region.is-gold {
  opacity: 1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-400) 55%, transparent));
}
.fish-weight-bar__flash-region.is-trophy {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-400) 78%, transparent));
}
.fish-weight-bar__flash-region.is-record {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff6d8 60%, var(--gold-400)));
}
.fish-weight-bar__flash-region.is-resting {
  transition: opacity 500ms ease-out;
  opacity: 0.4;
}
.fish-weight-bar__flash-region.is-pulsing {
  animation-name: fish-weight-pulse;
  animation-duration: calc(var(--trophy-duration, 700ms) / var(--pulse-count, 2));
  animation-iteration-count: var(--pulse-count, 2);
  animation-timing-function: ease-in-out;
}

.fish-weight-bar__flash-wave {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  transform: translateX(-120%);
  opacity: 0;
}
.fish-weight-bar__flash-wave.is-sweeping {
  opacity: 1;
  animation-name: fish-weight-wave-sweep;
  animation-duration: var(--wave-duration, 320ms);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

/* Two-level structure so the indicator can move via `transform` (never
   `left`, which would force layout every frame) while still using a plain
   percentage for that transform:
   - .indicator-slot spans the full track width (100%, set once) — a CSS
     `transform: translateX(N%)` on it is relative to *that* 100%-of-track
     box, so JS can just write the same 0-100 percentage it already computes
     for the ratio, no pixel measurement needed.
   - .indicator, nested inside, has no explicit width (shrink-wraps to
     nothing, same as any absolutely-positioned box with no in-flow
     content), so its children can center themselves on its local x=0
     anchor via `left:50%; transform:translateX(-50%)` same as before. */
.fish-weight-bar__indicator-slot {
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 0;
  width: 100%;
  transform: translateX(0%);
  will-change: transform;
}
.fish-weight-bar__indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.fish-weight-bar__indicator-line {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #ffffff, var(--gold-400));
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0, 0, 0, 0.45);
}
.fish-weight-bar__indicator-pin {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--gold-400);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.fish-weight-bar__spark-mount {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

/* --- Post-settle indicator glow tiers, driven by ratio vs
   WEIGHT_BAR_CONFIG.goldTierRatio/trophyTierRatio/recordTierRatio --- */
.fish-weight-bar__indicator--glow-gold .fish-weight-bar__indicator-line {
  box-shadow: 0 0 10px color-mix(in srgb, var(--gold-500) 65%, transparent), 0 2px 4px rgba(0, 0, 0, 0.45);
}
.fish-weight-bar__indicator--glow-trophy .fish-weight-bar__indicator-line {
  box-shadow: 0 0 16px color-mix(in srgb, var(--gold-400) 80%, transparent), 0 0 8px color-mix(in srgb, var(--rarity-epic) 50%, transparent);
}
.fish-weight-bar__indicator--glow-record .fish-weight-bar__indicator-line {
  animation: size-record-glow 1.2s ease-in-out infinite;
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold-400) 90%, transparent);
}
.fish-weight-bar__indicator--glow-record .fish-weight-bar__indicator-pin {
  border-top-color: #fff6d8;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gold-400) 80%, transparent));
}

.fish-weight-bar__spark {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 6px color-mix(in srgb, var(--gold-400) 90%, transparent);
  animation-name: fish-weight-spark;
  animation-duration: var(--spark-duration, 700ms);
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

/* --- Readout: weight / percent+category / max weight --- */
.fish-weight-bar__readout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.fish-weight-bar__weight-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fish-weight-bar__weight-block--max {
  align-items: flex-end;
  text-align: right;
}
.fish-weight-bar__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.fish-weight-bar__weight-value {
  font-size: 16px;
  font-weight: 800;
}
.fish-weight-bar__result-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
}
.fish-weight-bar__percent-value {
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 900;
  line-height: 1;
}
.fish-weight-bar__category-badge {
  white-space: nowrap;
}

.fish-weight-bar__record-banner {
  display: none;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--gold-400);
  text-shadow: 0 0 12px color-mix(in srgb, var(--gold-500) 70%, transparent);
}
.fish-weight-bar__record-banner.is-visible {
  display: block;
  animation-name: fish-weight-record-banner-pop;
  animation-duration: var(--banner-duration, 420ms);
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}