/* ============================================================
   Broadcast Chip — standalone design capture
   ============================================================
   Ported from Tridant-Fighter-2 (src/renderer/styles/main.css:
   .tier-card / .lb-row / .sidebar-lb-row family), with the bundle
   system deliberately removed. This file is self-contained: it
   consumes theme tokens via var(--t-color-*, <hex fallback>) and
   never defines them, so the importing page/app owns the palette.

   Companion docs: ./CHIP-DESIGN.md (anatomy + token contract)
                   ../chip-styling-port.md (wiring into the live
                   fault-fighter leaderboard — collision map)
   Demo:           ./demo.html

   Class family (generic, no collisions with fault-fighter src):
     .chip            chamfered broadcast card (base)
     .chip-compact    fixed-height ribbon variant (sidebar scale)
     .chip-grid       3-column responsive container
     .chip-glyph      huge faint background letter
     .chip-rank       italic rank stamp, top-left (+ <sup> ordinal)
     .chip-name       centered display-caps primary mark
     .chip-meta       bottom-right cluster (score + badge)
     .chip-score      mono numeric readout
     .chip-badge      bordered accent pill
     .chip-badge-label  tiny mono label beside the badge
     .chip-shine      diagonal gloss band (CSS sweep provided)
     .chip-highlight  gold "this is you" state
     .chip-you-badge  gold "YOU" identity pill
     .chip-you-sheen  gold sheen band for the highlighted chip

   One custom property recolors an entire chip: set --chip-accent
   on the element (inline or via a class) and the glow, top bar,
   rank stamp, name shadow, and badge all follow.
   ============================================================ */

/* --- Fonts (offline-first; adjust paths to your asset layout) ---
   Inter Variable is used condensed + black (wdth 75 / wght 900) as
   the display voice; Space Mono is the data/readout voice. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url('../fonts/Inter-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../fonts/SpaceMono-Bold.woff2') format('woff2');
}

/* ============================================================
   Base chip — chamfered broadcast card
   ============================================================ */
.chip {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  border: 0;
  border-radius: 0;               /* chamfered via clip-path, never rounded */
  overflow: hidden;
  /* Deep midnight panel — reads as glass over a dark stage. */
  background: linear-gradient(180deg, rgba(23, 28, 77, 0.55), rgba(13, 17, 48, 0.55));
  aspect-ratio: 5 / 1.9;          /* broadcast stat-bug proportions */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  /* Chamfer depth — corner-cut on top-right + bottom-left. */
  --cut: 20px;
  /* THE accent. Everything colored follows this one property. */
  --chip-accent: var(--t-color-primary, #017bfc);
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 300ms ease-out, opacity 300ms ease-out, filter 200ms;
}
/* Central accent glow layered over a faint 45° scanline texture. */
.chip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 90% at 50% 55%,
      color-mix(in srgb, var(--chip-accent) 27%, transparent),
      transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.025) 0 9px,
      transparent 9px 18px);
  pointer-events: none;
}
/* 3px glowing accent bar across the top edge. */
.chip::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--chip-accent), transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--chip-accent) 53%, transparent);
  z-index: 2;
  pointer-events: none;
}

/* Squat variant used by the source tier grid (20% taller card). */
.chip-tall { aspect-ratio: 5 / 2.28; }

/* ============================================================
   Chip content elements
   ============================================================ */

/* Huge faint background letter (first character of the name). */
.chip-glyph {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', 'Impact', 'Arial Narrow Bold', sans-serif;
  font-style: normal;             /* glyph is upright; only the name is italic */
  font-weight: 900;
  font-size: calc(180px * var(--ui-scale, 1));
  font-variation-settings: "wdth" 75, "wght" 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  text-align: center;
}

/* Rank stamp — italic display caps in the chip accent, top-left. */
.chip-rank {
  position: absolute;
  left: calc(18px * var(--ui-scale, 1));
  top: calc(10px * var(--ui-scale, 1));
  font-family: 'Inter', 'Impact', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: calc(48px * var(--ui-scale, 1));
  font-variation-settings: "wdth" 75, "wght" 900;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--chip-accent);
  text-shadow: 0 0 22px var(--chip-accent);
  font-variant-numeric: tabular-nums;
  z-index: 2;
  pointer-events: none;
}
.chip-rank sup {
  font-size: calc(14px * var(--ui-scale, 1));
  vertical-align: super;
  font-weight: 800;
  opacity: 0.65;
  /* The italic 900 numeral slants into the ordinal — nudge it right. */
  margin-left: calc(8px * var(--ui-scale, 1));
}

/* Primary mark — centered uppercase italic display caps. */
.chip-name {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 78%;
  font-family: 'Inter', 'Impact', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: calc(38px * var(--ui-scale, 1));
  font-variation-settings: "wdth" 75, "wght" 900;
  line-height: 0.92;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-align: center;
  /* Symmetric padding so the italic slant of the first/last glyph
     isn't clipped by the content box. */
  padding: 0 0.18em;
  color: #ffffff;
  text-shadow:
    0 0 24px rgba(0, 0, 0, 0.6),
    0 0 60px color-mix(in srgb, var(--chip-accent) 33%, transparent);
  text-wrap: balance;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Length-shrink modifiers — the emitting JS measures the name and adds
   .long (>= ~12 chars) or .xlong (>= ~18 chars) to the chip. */
.chip.long  .chip-name { font-size: calc(32px * var(--ui-scale, 1)); }
.chip.xlong .chip-name { font-size: calc(26px * var(--ui-scale, 1)); }

/* Bottom-right meta cluster (score + badge). */
.chip-meta {
  position: absolute;
  right: calc(14px * var(--ui-scale, 1));
  bottom: calc(12px * var(--ui-scale, 1));
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 28px);
  z-index: 2;
  pointer-events: none;
}
.chip-score {
  flex: 0 0 auto;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-style: normal;
  font-weight: 700;
  font-size: calc(18px * var(--ui-scale, 1));
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--t-color-fg-secondary, rgba(255, 255, 255, 0.6));
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Bordered accent pill — tier name / grade letter. */
.chip-badge {
  min-width: 0;
  font-family: 'Inter', 'Impact', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: calc(16px * var(--ui-scale, 1));
  font-variation-settings: "wdth" 75, "wght" 900;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--chip-accent);
  padding: calc(3px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1));
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--chip-accent);
  border-radius: 4px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--chip-accent) 27%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(220px * var(--ui-scale, 1));
  text-align: center;
}
/* Tiny mono label beside the badge ("TIER", "SCORE", ...). */
.chip-badge-label {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: calc(9px * var(--ui-scale, 1));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-color-fg-secondary, rgba(255, 255, 255, 0.6));
}

/* ============================================================
   Compact ribbon variant (sidebar scale)
   ============================================================
   Fixed-height wide ribbon instead of the 5:1.9 aspect card:
   smaller chamfer, lighter fill, 2px accent bar, 80px glyph. */
.chip-compact {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 10px;
  padding: 6px 14px 6px 16px;
  min-height: 64px;
  background: linear-gradient(180deg, rgba(23, 28, 77, 0.40), rgba(13, 17, 48, 0.40));
  --cut: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.chip-compact::before {
  background:
    radial-gradient(80% 100% at 50% 55%,
      color-mix(in srgb, var(--chip-accent) 22%, transparent),
      transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.02) 0 7px,
      transparent 7px 14px);
}
.chip-compact::after { height: 2px; }
.chip-compact .chip-glyph { font-size: calc(80px * var(--ui-scale, 1)); }
/* In the ribbon, rank/name/score flow in the grid instead of floating. */
.chip-compact .chip-rank {
  position: relative;
  left: auto; top: auto;
  font-size: calc(28px * var(--ui-scale, 1));
  z-index: 1;
}
.chip-compact .chip-name {
  /* 100%, not none: with justify-self:start an unconstrained name sizes to
     its text and overflows the grid track under the meta cell. */
  max-width: 100%;
  font-size: calc(22px * var(--ui-scale, 1));
  text-align: left;
  justify-self: start;
}
.chip-compact .chip-meta {
  position: relative;
  right: auto; bottom: auto;
  max-width: none;
  justify-self: end;
}

/* ============================================================
   Shine — periodic broadcast-reflection sweep
   ============================================================
   A mostly-transparent diagonal white band that sweeps across the
   chip, then rests, so persistent surfaces feel alive without
   competing with the content. In the source app GSAP owns this
   (staggered fan across all chips, ~14s rest); the keyframe below
   is a dependency-free approximation — stagger it by setting
   animation-delay per chip (see demo.html). */
.chip-shine {
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 55%;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(255, 255, 255, 0.05) 70%,
    transparent 100%
  );
  transform: translateX(0);
  will-change: transform;
  animation: chip-shine-sweep 14s ease-in-out infinite;
}
@keyframes chip-shine-sweep {
  0%        { transform: translateX(0);    opacity: 0; }
  2%        { opacity: 1; }
  10%       { transform: translateX(420%); opacity: 1; }
  12%, 100% { transform: translateX(420%); opacity: 0; }
}

/* ============================================================
   Highlight — gold "this is you" state
   ============================================================
   Distinct gold treatment so the current player's chip reads apart
   from accent-colored neighbors: breathing ring, gradient top edge,
   gold wash, brightened fill, gold sheen, "YOU" pill.
   Note: no transform here on purpose — the source pairs this state
   with a GSAP slide-in that animates transform; a CSS scale would
   be cancelled by it. */
@keyframes chip-highlight-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 2.5px var(--chip-you),
      0 4px 22px color-mix(in srgb, var(--chip-you) 40%, transparent),
      0 0 30px color-mix(in srgb, var(--chip-you) 26%, transparent);
  }
  50% {
    box-shadow:
      inset 0 0 0 2.5px color-mix(in srgb, var(--chip-you) 75%, white),
      0 8px 40px color-mix(in srgb, var(--chip-you) 62%, transparent),
      0 0 60px color-mix(in srgb, var(--chip-you) 50%, transparent);
  }
}
@keyframes chip-you-sheen-sweep {
  0%   { transform: translateX(0);    opacity: 0; }
  8%   { opacity: 1; }
  45%  { transform: translateX(420%); opacity: 1; }
  52%, 100% { transform: translateX(420%); opacity: 0; }
}
.chip-highlight {
  --chip-you: #ffcf5c;                        /* distinct gold */
  --chip-accent: var(--chip-you) !important;  /* re-tint the whole chip */
  filter: brightness(1.18) saturate(1.15);
  z-index: 5;
  animation: chip-highlight-pulse 1.8s ease-in-out infinite;
}
.chip-highlight::after {
  height: 4px;
  background: linear-gradient(90deg,
    #d98a2b 0%, var(--chip-you) 30%, #fff3d0 50%, var(--chip-you) 70%, #d98a2b 100%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--chip-you) 65%, transparent);
}
.chip-highlight::before {
  background:
    radial-gradient(85% 120% at 50% 0%,
      color-mix(in srgb, var(--chip-you) 22%, transparent),
      transparent 75%),
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.045) 0 9px,
      transparent 9px 18px);
}
.chip-highlight .chip-name { color: #ffffff !important; }
/* "YOU" identity pill, top-right. */
.chip-you-badge {
  position: absolute;
  top: calc(8px * var(--ui-scale, 1));
  right: calc(14px * var(--ui-scale, 1));
  z-index: 6;
  font-family: 'Inter', 'Impact', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-variation-settings: "wdth" 75, "wght" 900;
  font-size: calc(14px * var(--ui-scale, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a1206;
  padding: calc(3px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe7a6 0%, var(--chip-you) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chip-you) 70%, white),
    0 0 16px color-mix(in srgb, var(--chip-you) 55%, transparent);
  pointer-events: none;
}
/* Gold sheen band — sweeps then rests (broadcast gloss). */
.chip-you-sheen {
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 50%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 35%,
    color-mix(in srgb, var(--chip-you) 60%, white) 50%,
    rgba(255, 255, 255, 0.05) 65%,
    transparent 100%);
  animation: chip-you-sheen-sweep 4.5s ease-in-out infinite;
}

/* ============================================================
   Grid container — 3 → 2 → 1 column responsive chip lineup
   ============================================================ */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18px * var(--ui-scale, 1));
  width: 100%;
}
@media (max-width: 980px) { .chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .chip-grid { grid-template-columns: minmax(0, 1fr); }
  .chip {
    aspect-ratio: 5 / 2.2;
    padding: 14px;
    --cut: 14px;
  }
  .chip-tall { aspect-ratio: 5 / 2.45; }
  .chip-rank { font-size: calc(40px * var(--ui-scale, 1)); }
  .chip-rank sup { font-size: calc(12px * var(--ui-scale, 1)); }
  .chip-name {
    max-width: 72%;
    font-size: calc(30px * var(--ui-scale, 1));
  }
  .chip.long .chip-name { font-size: calc(26px * var(--ui-scale, 1)); }
  .chip.xlong .chip-name { font-size: calc(22px * var(--ui-scale, 1)); }
  .chip-score { font-size: calc(15px * var(--ui-scale, 1)); }
  .chip-badge {
    max-width: calc(104px * var(--ui-scale, 1));
    font-size: calc(13px * var(--ui-scale, 1));
  }
  .chip-meta {
    max-width: calc(100% - 20px);
    right: calc(10px * var(--ui-scale, 1));
    bottom: calc(10px * var(--ui-scale, 1));
    gap: 6px;
  }
}