// lineup-pieces.jsx — Header, SpecialBar, DeckSummary, SubmitBar — building blocks
// shared across the 3 lineup variants.

// ─── Header ────────────────────────────────────────────────────────────────
function LineupHeader({ locale = 'fa', deckTier = 'gold', deadline = '02:14:36', actions = null }) {
  const ll = LU_I18N[locale];
  return (
    <header className="lu-header">
      <button className="lu-header-btn" type="button" aria-label="back">
        <svg width="20" height="20" viewBox="0 0 22 22" fill="none">
          <path d="M8 4 L14 11 L8 18" stroke="currentColor" strokeWidth="1.8"
          strokeLinecap="round" strokeLinejoin="round" fill="none"
          transform="scale(-1, 1) translate(-22, 0)" />
        </svg>
      </button>
      <div className="lu-header-mid">
        <div className="lu-header-title">{ll.title}</div>
        <div className="lu-header-sub">{ll.eventName}</div>
      </div>
      {actions && <div className="lu-header-actions">{actions}</div>}
      <div className="lu-header-deadline" title={ll.deadline}>
        <div className="lu-header-deadline-label">{ll.deadline}</div>
        <div className="lu-header-deadline-value">{toLocaleDigits(deadline, locale)}</div>
      </div>
    </header>);

}

// ─── Orientation toggle — segmented control with vertical/horizontal icons ─
function OrientationToggle({ value = 'vertical', onChange, locale = 'fa' }) {
  const labels = {
    vertical:   locale === 'fa' ? 'عمودی' : locale === 'ar' ? 'عمودي' : 'Vertical',
    horizontal: locale === 'fa' ? 'افقی' : locale === 'ar' ? 'أفقي'  : 'Horizontal',
  };
  return (
    <div className="lu-orient-toggle" role="tablist" aria-label="Pitch orientation">
      <button type="button" role="tab"
              aria-selected={value === 'vertical'}
              className={`lu-orient-btn ${value === 'vertical' ? 'is-active' : ''}`}
              onClick={() => onChange('vertical')}
              title={labels.vertical} aria-label={labels.vertical}>
        <svg width="14" height="14" viewBox="0 0 18 18" fill="none" aria-hidden="true">
          <rect x="6" y="2.5" width="6" height="13" rx="1.5"
                stroke="currentColor" strokeWidth="1.6" fill="none"/>
          <line x1="6" y1="9" x2="12" y2="9" stroke="currentColor" strokeWidth="1.2" opacity="0.5"/>
        </svg>
      </button>
      <button type="button" role="tab"
              aria-selected={value === 'horizontal'}
              className={`lu-orient-btn ${value === 'horizontal' ? 'is-active' : ''}`}
              onClick={() => onChange('horizontal')}
              title={labels.horizontal} aria-label={labels.horizontal}>
        <svg width="14" height="14" viewBox="0 0 18 18" fill="none" aria-hidden="true">
          <rect x="2.5" y="6" width="13" height="6" rx="1.5"
                stroke="currentColor" strokeWidth="1.6" fill="none"/>
          <line x1="9" y1="6" x2="9" y2="12" stroke="currentColor" strokeWidth="1.2" opacity="0.5"/>
        </svg>
      </button>
    </div>
  );
}

// ─── Formation chip — small label showing 1-2-1 structure (DEF-MID-FWD) ───
function FormationChip({ locale = 'fa' }) {
  const ll = LU_I18N[locale];
  const fmt = toLocaleDigits('1-2-1', locale);
  return (
    <div className="lu-formation-chip">
      <span className="lu-formation-chip-label">{ll.formation}</span>
      <span className="lu-formation-chip-value">{fmt}</span>
    </div>);

}

// ─── Special Bar ─────────────────────────────────────────────────────────
// Shows Fan + Coach slots side-by-side. Either filled (with compact card)
// or empty (with SpecialEmptySlot). v2: defaults to ABOVE the field so it's
// visible at first paint. `compact` prop = tighter chips, no separate header.
function SpecialBar({ locale = 'fa', fanCard, coachCard, onPickFan, onPickCoach,
  onRemoveFan, onRemoveCoach, visible = true, compact = false }) {
  if (!visible) return null;
  const ll = LU_I18N[locale];
  return (
    <div className={`lu-special-bar ${compact ? 'lu-special-bar--compact' : ''}`}
    aria-label="Bonus & multiplier slots">
      {!compact &&
      <div className="lu-special-bar-header">
          <span className="lu-special-bar-title">{ll.fanSlot} · {ll.coachSlot}</span>
          <span className="lu-special-bar-hint">{ll.fanEmpty}</span>
        </div>
      }
      <div className="lu-special-bar-row">
        {fanCard ?
        <FilledSpecialChip kind="fan" locale={locale} card={fanCard}
        onRemove={onRemoveFan} compact={compact} /> :

        <SpecialEmptySlot kind="fan" locale={locale} onClick={onPickFan} compact={compact} />
        }
        {coachCard ?
        <FilledSpecialChip kind="coach" locale={locale} card={coachCard}
        onRemove={onRemoveCoach} compact={compact} /> :

        <SpecialEmptySlot kind="coach" locale={locale} onClick={onPickCoach} compact={compact} />
        }
      </div>
    </div>);

}

// Filled chip for special bar — compact rep of selected Fan/Coach.
// v2: pulls the action-figure render in as a thumb + makes the value the hero
// element so the filled state reads as a richer card, not weaker than empty.
function FilledSpecialChip({ kind, locale = 'fa', card, onRemove, compact = false }) {
  const ll = LU_I18N[locale];
  const isFan = kind === 'fan';
  // Saturated tints — same as empty state so filled and empty share visual DNA
  const tint = isFan ? '#EF4444' : '#22C55E';
  const title = isFan ? card.team[locale] : card.name[locale];
  // Value hierarchy: the NUMBER is hero, the unit is meta.
  const valueNum = isFan
    ? `+${toLocaleDigits(card.bonus, locale)}`
    : `×${toLocaleDigits(card.multiplier, locale)}`;
  const valueLabel = isFan ? ll.bonus : ll.multiplier;
  const image = card.image || (isFan ? 'assets/fan.webp' : 'assets/coach.webp');

  return (
    <div className={`lu-special-chip ${compact ? 'lu-special-chip--compact' : ''}`}
         style={{ '--tint': tint }}>
      {/* Action-figure thumbnail — the actual card image, masked into a tinted
          circle so face/torso peek out. Big bonus over the old SVG glyph. */}
      <div className="lu-special-chip-thumb" aria-hidden="true">
        <div className="lu-special-chip-thumb-bg"></div>
        <img className="lu-special-chip-thumb-img"
             src={image}
             alt=""
             onError={(e) => { e.target.style.opacity = '0'; }}/>
      </div>
      <div className="lu-special-chip-text">
        <div className="lu-special-chip-title">{title}</div>
        <div className="lu-special-chip-value">
          <span className="lu-special-chip-value-num">{valueNum}</span>
          <span className="lu-special-chip-value-label">{valueLabel}</span>
        </div>
      </div>
      {onRemove &&
        <button className="lu-special-chip-x" onClick={onRemove}
                type="button" aria-label={ll.remove}>
          <IconX size={12} />
        </button>
      }
    </div>);
}

// ─── Deck Summary card ─────────────────────────────────────────────────────
// Shows: Base × Multiplier + Bonus = Final | XP est.
// Optional breakdown row underneath.

// ─── Mini Score Bar ────────────────────────────────────────────────────────
// Compact above-the-field preview of the LIVE score formula. Users see how
// adding/removing slots and Fan/Coach cards changes their final score in
// real time, BEFORE they scroll down to the full DeckSummary.
//
// Visual: a single horizontal chip-row → [Base] × [Mult] + [Bonus] = [Final]
// Inactive multiplier (×1.0) or bonus (+0) render dim; active values flash
// the relevant accent (success for mult, danger for bonus) so the user
// immediately sees which optional card is "doing work".
function MiniScore({ locale = 'fa', score, complete = false }) {
  const ll = LU_I18N[locale];
  const baseStr = toLocaleDigits(score.base, locale);
  const multStr = toLocaleDigits(score.mult.toFixed(1), locale);
  const bonusStr = toLocaleDigits(score.bonus, locale);
  const finalStr = toLocaleDigits(score.final, locale);
  const multActive = score.mult > 1;
  const bonusActive = score.bonus > 0;

  return (
    <div className={`lu-mini ${complete ? 'lu-mini--complete' : ''}`}
         aria-label={ll.finalScore}>
      <div className="lu-mini-formula">
        <span className="lu-mini-cell">
          <span className="lu-mini-cell-label">{ll.baseScore}</span>
          <span className="lu-mini-cell-value">{baseStr}</span>
        </span>
        <span className="lu-mini-op">×</span>
        <span className={`lu-mini-cell ${multActive ? 'lu-mini-cell--active lu-mini-cell--mult' : 'lu-mini-cell--dim'}`}>
          <span className="lu-mini-cell-label">{ll.multiplier}</span>
          <span className="lu-mini-cell-value">{multStr}</span>
        </span>
        <span className="lu-mini-op">+</span>
        <span className={`lu-mini-cell ${bonusActive ? 'lu-mini-cell--active lu-mini-cell--bonus' : 'lu-mini-cell--dim'}`}>
          <span className="lu-mini-cell-label">{ll.bonus}</span>
          <span className="lu-mini-cell-value">{bonusActive ? '+' : ''}{bonusStr}</span>
        </span>
      </div>
      <div className="lu-mini-eq" aria-hidden="true">=</div>
      <div className="lu-mini-final">
        <span className="lu-mini-final-label">{ll.finalScore}</span>
        <span className="lu-mini-final-value">{finalStr}</span>
      </div>
    </div>
  );
}

function DeckSummary({ locale = 'fa', score, showBreakdown = true, complete = false }) {
  const ll = LU_I18N[locale];
  const baseStr = toLocaleDigits(score.base, locale);
  const multStr = toLocaleDigits(score.mult.toFixed(1), locale);
  const bonusStr = toLocaleDigits(score.bonus, locale);
  const finalStr = toLocaleDigits(score.final, locale);
  const xpStr = toLocaleDigits(score.xp, locale);
  const filledStr = `${toLocaleDigits(score.filled, locale)}/${toLocaleDigits(5, locale)}`;

  return (
    <div className={`lu-summary ${complete ? 'lu-summary--complete' : ''}`}>
      <div className="lu-summary-glow" aria-hidden="true"></div>
      <div className="lu-summary-head">
        <div className="lu-summary-head-left">
          <div className="lu-summary-progress">
            <span className="lu-summary-progress-value">{filledStr}</span>
            <span className="lu-summary-progress-label">{ll.formation}</span>
          </div>
        </div>
        <div className="lu-summary-head-right">
          <div className="lu-summary-final-label">{ll.finalScore}</div>
          <div className="lu-summary-final-value">{finalStr}</div>
        </div>
      </div>

      {showBreakdown &&
      <div className="lu-summary-breakdown">
          <div className="lu-summary-cell">
            <span className="lu-summary-cell-label">{ll.baseScore}</span>
            <span className="lu-summary-cell-value">{baseStr}</span>
          </div>
          <span className="lu-summary-op">×</span>
          <div className="lu-summary-cell">
            <span className="lu-summary-cell-label">{ll.multiplier}</span>
            <span className="lu-summary-cell-value lu-summary-cell--mult"
          style={{ color: score.mult > 1 ? 'var(--success)' : 'var(--text-secondary)' }}>
              {multStr}
            </span>
          </div>
          <span className="lu-summary-op">+</span>
          <div className="lu-summary-cell">
            <span className="lu-summary-cell-label">{ll.bonus}</span>
            <span className="lu-summary-cell-value lu-summary-cell--bonus"
          style={{ color: score.bonus > 0 ? 'var(--danger)' : 'var(--text-secondary)' }}>
              {score.bonus > 0 ? '+' : ''}{bonusStr}
            </span>
          </div>
          <span className="lu-summary-op lu-summary-op--eq">=</span>
          <div className="lu-summary-cell">
            <span className="lu-summary-cell-label">XP</span>
            <span className="lu-summary-cell-value lu-summary-cell--xp">{xpStr}</span>
          </div>
        </div>
      }
    </div>);

}

// ─── Sponsor Strip ─────────────────────────────────────────────────────────
// Two variants:
//   • banner  → bigger promotional block with logo + brand + tagline + CTA
//   • compact → small inline pill: just logo + brand name
// `sponsorId` picks from SPONSORS (lineup-data). Rotates so multiple placements
// on the same screen feel like different ads, not one repeated.
function SponsorStrip({ locale = 'fa', visible = true, variant = 'banner', sponsorId = 'coastal' }) {
  if (!visible) return null;
  const ll = LU_I18N[locale];
  const s = SPONSORS[sponsorId] || SPONSORS.coastal;
  const isBanner = variant === 'banner';

  return (
    <div className={`lu-sponsor lu-sponsor--${variant}`}
         role="complementary"
         aria-label={`${ll.sponsoredBy} ${s.name[locale]}`}
         style={{ '--brand': s.color, '--brand-2': s.color2 }}>
      {/* small "Sponsored" eyebrow — same in both variants */}
      <span className="lu-sponsor-eyebrow">{ll.sponsoredBy}</span>

      <div className="lu-sponsor-logo">
        <span className="lu-sponsor-mark"
              style={{ background: `linear-gradient(135deg, ${s.color}, ${s.color2})` }}>
          {s.mark}
        </span>
        <span className="lu-sponsor-brand">{s.name[locale]}</span>
      </div>

      {isBanner && (
        <React.Fragment>
          <span className="lu-sponsor-tagline">{s.tagline[locale]}</span>
          <button className="lu-sponsor-cta" type="button">
            <span>{ll.sponsorCta}</span>
            <svg width="12" height="12" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M5 3 L9 7 L5 11" stroke="currentColor" strokeWidth="2"
                    fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        </React.Fragment>
      )}

      {/* subtle decorative gradient streak — feels branded without being loud */}
      <div className="lu-sponsor-streak" aria-hidden="true"></div>
      {/* soft light sweep — like a passing reflection over the ad surface */}
      <div className="lu-sponsor-shine" aria-hidden="true"></div>
    </div>
  );
}

// ─── Submit Bar (sticky bottom) ────────────────────────────────────────────
// States: ready / waiting (not all slots filled) / cooldown (Free Submit recharging)
// Visual: dark glass panel (mirrors the bottom panel of PlayerCard) with a
// state-tinted halo bleeding up from underneath.
function SubmitBar({ locale = 'fa', state = 'ready', cooldown = '03:42' }) {
  const ll = LU_I18N[locale];
  const isReady = state === 'ready';
  const isWaiting = state === 'waiting';
  const isCooldown = state === 'cooldown';

  const label = isReady ? ll.submit :
  isWaiting ? ll.submitWaiting :
  ll.submitCooldown;

  const hint = isReady ? ll.submitReady :
  isWaiting ? null :
  `${ll.submitNext} ${toLocaleDigits(cooldown, locale)}`;

  return (
    <div className={`lu-submit lu-submit--${state}`}>
      {/* state-tinted halo bleeding up from underneath the bar */}
      <div className="lu-submit-halo" aria-hidden="true"></div>
      {/* dark glass panel above the halo */}
      <div className="lu-submit-glass" aria-hidden="true"></div>
      {/* top hairline highlight (like card top edge) */}
      <div className="lu-submit-hairline" aria-hidden="true"></div>

      <div className="lu-submit-inner">
        <div className="lu-submit-left">
          <div className="lu-submit-token">
            {isCooldown ?
            <svg width="20" height="20" viewBox="0 0 22 22" fill="none" aria-hidden="true">
                <circle cx="11" cy="11" r="8" stroke="currentColor" strokeWidth="1.6" opacity="0.3" />
                <path d="M11 4 a7 7 0 0 1 7 7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
              </svg> :

            <span className="lu-submit-token-text">{ll.free}</span>
            }
          </div>
          {hint && <div className="lu-submit-hint">{hint}</div>}
        </div>
        <button className="lu-submit-cta"
        disabled={!isReady}
        type="button">
          <span>{label}</span>
          {isReady &&
          <svg width="18" height="18" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M5 3 L9 7 L5 11" stroke="currentColor" strokeWidth="2"
            fill="none" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          }
        </button>
      </div>
    </div>);

}

// ─── Slot label divider (used in Grid variant) ─────────────────────────────
function SlotRowLabel({ position, locale = 'fa', count = 1 }) {
  const ll = LU_I18N[locale];
  return (
    <div className="lu-row-label">
      <div className="lu-row-label-icon"><PosIcon position={position} size={18} /></div>
      <div className="lu-row-label-text">
        <span className="lu-row-label-name">{ll.pos[position]}</span>
        <span className="lu-row-label-code">{ll.posShort[position]}</span>
      </div>
      <div className="lu-row-label-rule"></div>
      <div className="lu-row-label-count">
        ×{toLocaleDigits(count, locale)}
      </div>
    </div>);

}

// ─── styles ─────────────────────────────────────────────────────────────────
const PIECES_CSS = `
  /* ──── Orientation toggle (segmented) ──── */
  .lu-orient-toggle {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    flex-shrink: 0;
  }
  .lu-orient-btn {
    width: 30px; height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background .12s, color .12s;
    font-family: inherit;
  }
  .lu-orient-btn:hover { color: var(--text-secondary); }
  .lu-orient-btn.is-active {
    background: rgba(113,99,217,0.18);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent);
  }
  .lu-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  /* ──── Header ──── */
  .lu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(7,7,12,0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .lu-header-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.03);
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  html[dir="rtl"] .lu-header-btn svg { transform: scaleX(-1); }
  .lu-header-mid {
    flex: 1;
    display: flex; flex-direction: column;
    min-width: 0;
  }
  .lu-header-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.15;
  }
  .lu-header-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
  }
  .lu-header-deadline {
    display: flex; flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    flex-shrink: 0;
  }
  .lu-header-deadline-label {
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  html[lang="fa"] .lu-header-deadline-label,
  html[lang="ar"] .lu-header-deadline-label {
    font-family: inherit; text-transform: none; letter-spacing: 0;
  }
  .lu-header-deadline-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--warning);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
  }
  html[lang="fa"] .lu-header-deadline-value,
  html[lang="ar"] .lu-header-deadline-value {
    font-family: inherit;
    letter-spacing: 0;
  }

  /* ──── Formation chip ──── */
  .lu-formation-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    font-size: 11px;
    color: var(--text-secondary);
  }
  .lu-formation-chip-label {
    color: var(--text-tertiary);
    font-size: 10px;
  }
  .lu-formation-chip-value {
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.04em;
  }
  html[lang="fa"] .lu-formation-chip-value,
  html[lang="ar"] .lu-formation-chip-value {
    font-family: inherit; letter-spacing: 0;
  }

  /* ──── Special Bar ──── */
  .lu-special-bar {
    padding: 14px 16px 16px;
    border-top: 1px dashed rgba(255,255,255,0.06);
    border-bottom: 1px dashed rgba(255,255,255,0.06);
    margin: 8px 0;
  }
  .lu-special-bar--compact {
    padding: 0;
    border-top: 0;
    border-bottom: 0;
    margin: 0 0 6px;
  }
  .lu-special-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
  }
  .lu-special-bar-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
  }
  .lu-special-bar-hint {
    font-size: 10px;
    color: var(--text-tertiary);
  }
  .lu-special-bar-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .lu-special-bar--compact .lu-special-bar-row { gap: 6px; }

  /* ──── Filled special chip ──── */
  /* Matches the visual weight of .lu-special-empty: saturated tinted gradient,
     glow, and a hero action-figure thumb. Value (+250 / ×1.7) is the focal
     element so the filled state feels rewarding, not weaker than empty. */
  .lu-special-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 10px;
    border-radius: 16px;
    border: 1.5px solid color-mix(in oklab, var(--tint) 60%, transparent);
    background:
      linear-gradient(135deg,
        color-mix(in oklab, var(--tint) 24%, transparent) 0%,
        color-mix(in oklab, var(--tint) 10%, rgba(20,20,28,0.55)) 100%);
    overflow: hidden;
    isolation: isolate;
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--tint) 28%, transparent) inset,
      0 8px 22px -8px color-mix(in oklab, var(--tint) 55%, transparent);
  }
  .lu-special-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 100% at 100% 0%,
      color-mix(in oklab, var(--tint) 38%, transparent) 0%, transparent 70%);
    opacity: 0.7;
    pointer-events: none;
    z-index: -1;
  }
  .lu-special-chip--compact {
    padding: 6px 10px 6px 6px;
    gap: 8px;
    border-radius: 12px;
  }
  /* Action-figure thumbnail — circular crop, tinted gradient halo behind. */
  .lu-special-chip-thumb {
    position: relative;
    width: 48px; height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow:
      0 0 0 2px color-mix(in oklab, var(--tint) 65%, transparent),
      0 6px 16px -4px color-mix(in oklab, var(--tint) 70%, transparent);
  }
  .lu-special-chip--compact .lu-special-chip-thumb {
    width: 38px; height: 38px;
  }
  .lu-special-chip-thumb-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 70% at 50% 42%,
        color-mix(in oklab, var(--tint) 70%, #1a0f08) 0%,
        color-mix(in oklab, var(--tint) 25%, #0c0805) 70%,
        #07050a 100%);
    z-index: 0;
  }
  .lu-special-chip-thumb-img {
    position: absolute;
    width: 200%;
    height: 200%;
    /* Pull the action figure UP so face + torso sit centered in the circle;
       feet/base get cropped out by overflow:hidden. */
    bottom: -65%;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: bottom center;
    z-index: 1;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
    pointer-events: none;
  }
  .lu-special-chip-text {
    flex: 1;
    min-width: 0;
    display: flex; flex-direction: column;
    line-height: 1.15;
    gap: 2px;
  }
  .lu-special-chip-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: 0.95;
  }
  .lu-special-chip--compact .lu-special-chip-title { font-size: 11px; }
  .lu-special-chip-value {
    display: flex;
    align-items: baseline;
    gap: 5px;
    line-height: 1;
  }
  .lu-special-chip-value-num {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: -0.01em;
    text-shadow: 0 0 12px color-mix(in oklab, var(--tint) 60%, transparent);
  }
  html[lang="fa"] .lu-special-chip-value-num,
  html[lang="ar"] .lu-special-chip-value-num {
    font-family: inherit;
  }
  .lu-special-chip--compact .lu-special-chip-value-num { font-size: 16px; }
  .lu-special-chip-value-label {
    font-size: 10px;
    color: color-mix(in oklab, var(--tint) 80%, white);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  html[lang="fa"] .lu-special-chip-value-label,
  html[lang="ar"] .lu-special-chip-value-label {
    font-family: inherit; text-transform: none; letter-spacing: 0;
    font-weight: 600;
  }
  .lu-special-chip--compact .lu-special-chip-value-label { font-size: 9px; }
  .lu-special-chip-x {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .lu-special-chip-x:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
  }

  /* ──── Slot row label (Grid variant) ──── */
  .lu-row-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0 8px;
    color: var(--text-secondary);
  }
  .lu-row-label-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.025);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
  }
  .lu-row-label-text {
    display: flex; align-items: baseline; gap: 8px;
    line-height: 1;
  }
  .lu-row-label-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .lu-row-label-code {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-tertiary);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.12em;
  }
  html[lang="fa"] .lu-row-label-code,
  html[lang="ar"] .lu-row-label-code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  .lu-row-label-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0.06), transparent);
  }
  html[dir="rtl"] .lu-row-label-rule {
    background: linear-gradient(to left, rgba(255,255,255,0.06), transparent);
  }
  .lu-row-label-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  html[lang="fa"] .lu-row-label-count,
  html[lang="ar"] .lu-row-label-count {
    font-family: inherit;
  }

  /* ──── Mini Score (above-field preview) ──── */
  /* A live above-the-field score formula. Sits between SpecialBar and the
     pitch so users see how each pick affects their final score in real time.
     Inactive mult/bonus render dim; active values flash success/danger. */
  .lu-mini {
    position: relative;
    margin: 6px 16px 10px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
      linear-gradient(180deg, rgba(28,28,38,0.88) 0%, rgba(14,14,22,0.88) 100%);
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 6px 20px -10px rgba(0,0,0,0.6);
  }
  .lu-mini::before {
    content: '';
    position: absolute;
    inset: -20px -20px auto auto;
    width: 140px; height: 80px;
    background: radial-gradient(ellipse, rgba(113,99,217,0.18) 0%, transparent 70%);
    filter: blur(18px);
    pointer-events: none;
    z-index: -1;
  }
  .lu-mini--complete::before {
    background: radial-gradient(ellipse, rgba(52,211,153,0.22) 0%, transparent 70%);
  }
  .lu-mini-formula {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .lu-mini-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
    padding: 4px 6px;
    border-radius: 8px;
    flex-shrink: 1;
    min-width: 0;
    transition: background .2s, color .2s;
  }
  .lu-mini-cell-label {
    font-size: 8px;
    color: var(--text-tertiary);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    white-space: nowrap;
  }
  html[lang="fa"] .lu-mini-cell-label,
  html[lang="ar"] .lu-mini-cell-label {
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    font-size: 9px;
  }
  .lu-mini-cell-value {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  html[lang="fa"] .lu-mini-cell-value,
  html[lang="ar"] .lu-mini-cell-value {
    font-family: inherit;
  }
  .lu-mini-cell--dim .lu-mini-cell-value { color: var(--text-tertiary); opacity: 0.6; }
  .lu-mini-cell--active.lu-mini-cell--mult {
    background: color-mix(in oklab, var(--success) 14%, transparent);
  }
  .lu-mini-cell--active.lu-mini-cell--mult .lu-mini-cell-value {
    color: var(--success);
    text-shadow: 0 0 12px color-mix(in oklab, var(--success) 50%, transparent);
  }
  .lu-mini-cell--active.lu-mini-cell--bonus {
    background: color-mix(in oklab, var(--danger) 14%, transparent);
  }
  .lu-mini-cell--active.lu-mini-cell--bonus .lu-mini-cell-value {
    color: var(--danger);
    text-shadow: 0 0 12px color-mix(in oklab, var(--danger) 50%, transparent);
  }
  .lu-mini-op {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    margin: 0 -1px;
  }
  .lu-mini-eq {
    font-size: 14px;
    color: var(--text-tertiary);
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    padding: 0 4px;
    border-inline-start: 1px solid rgba(255,255,255,0.08);
    margin-inline-start: 4px;
    align-self: stretch;
    display: flex; align-items: center;
  }
  .lu-mini-final {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
    flex-shrink: 0;
  }
  .lu-mini-final-label {
    font-size: 9px;
    color: var(--text-tertiary);
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    white-space: nowrap;
  }
  html[lang="fa"] .lu-mini-final-label,
  html[lang="ar"] .lu-mini-final-label {
    font-family: inherit; text-transform: none; letter-spacing: 0;
    font-size: 10px;
  }
  .lu-mini-final-value {
    margin-top: 4px;
    font-size: 26px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-shadow: 0 0 18px rgba(113,99,217,0.30);
  }
  html[lang="fa"] .lu-mini-final-value,
  html[lang="ar"] .lu-mini-final-value {
    font-family: inherit;
  }
  .lu-mini--complete .lu-mini-final-value {
    color: var(--success);
    text-shadow: 0 0 18px rgba(52,211,153,0.45);
  }

  /* ──── Deck Summary ──── */
  .lu-summary {
    position: relative;
    margin: 14px 16px 12px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(22,22,30,0.85) 0%, rgba(12,12,18,0.85) 100%);
    overflow: hidden;
    isolation: isolate;
  }
  .lu-summary-glow {
    position: absolute;
    inset: -40px -40px auto auto;
    width: 160px; height: 120px;
    background: radial-gradient(ellipse, rgba(113,99,217,0.16) 0%, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
  }
  .lu-summary--complete .lu-summary-glow {
    background: radial-gradient(ellipse, rgba(52,211,153,0.20) 0%, transparent 70%);
  }
  .lu-summary-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
  }
  .lu-summary-head-left { display: flex; gap: 8px; }
  .lu-summary-progress {
    display: flex; flex-direction: column;
    line-height: 1;
  }
  .lu-summary-progress-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
  }
  html[lang="fa"] .lu-summary-progress-value,
  html[lang="ar"] .lu-summary-progress-value {
    font-family: inherit;
  }
  .lu-summary-progress-label {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
  }
  html[lang="fa"] .lu-summary-progress-label,
  html[lang="ar"] .lu-summary-progress-label {
    text-transform: none;
  }
  .lu-summary-head-right {
    display: flex; flex-direction: column;
    align-items: flex-end;
    line-height: 1;
    text-align: end;
  }
  .lu-summary-final-label {
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  html[lang="fa"] .lu-summary-final-label,
  html[lang="ar"] .lu-summary-final-label {
    text-transform: none;
  }
  .lu-summary-final-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-primary);
    margin-top: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
  html[lang="fa"] .lu-summary-final-value,
  html[lang="ar"] .lu-summary-final-value {
    font-family: inherit;
  }
  .lu-summary--complete .lu-summary-final-value {
    color: var(--success);
    text-shadow: 0 0 24px rgba(52,211,153,0.30);
  }
  .lu-summary-breakdown {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .lu-summary-cell {
    display: flex; flex-direction: column;
    align-items: center;
    line-height: 1;
    min-width: 0;
    flex: 1;
  }
  .lu-summary-cell-label {
    font-size: 9px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }
  html[lang="fa"] .lu-summary-cell-label,
  html[lang="ar"] .lu-summary-cell-label {
    font-family: inherit; text-transform: none; letter-spacing: 0;
    font-size: 10px;
  }
  .lu-summary-cell-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
  }
  html[lang="fa"] .lu-summary-cell-value,
  html[lang="ar"] .lu-summary-cell-value {
    font-family: inherit;
  }
  .lu-summary-op {
    color: var(--text-tertiary);
    font-size: 14px;
    font-weight: 500;
    align-self: center;
    margin: 0 -2px;
    margin-top: 13px;
  }
  .lu-summary-op--eq { color: var(--text-secondary); }

  /* ──── Sponsor strip ──── */
  .lu-sponsor {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
    /* brand tint piped through via inline style --brand / --brand-2 */
    background:
      linear-gradient(90deg,
        color-mix(in oklab, var(--brand) 14%, transparent) 0%,
        color-mix(in oklab, var(--brand) 4%, transparent) 60%,
        rgba(20,20,30,0.4) 100%);
    border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
    color: var(--text-primary);
    margin: 8px 0 0;
  }
  /* decorative streak — a thin highlight ray + a soft glow blob */
  .lu-sponsor-streak {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 0% 50%,
        color-mix(in oklab, var(--brand) 25%, transparent) 0%,
        transparent 35%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
  }
  html[dir="rtl"] .lu-sponsor-streak {
    background:
      radial-gradient(circle at 100% 50%,
        color-mix(in oklab, var(--brand) 25%, transparent) 0%,
        transparent 35%);
  }

  /* Soft light sweep — a diagonal highlight that travels across the strip,
     simulating a passing reflection on a glossy ad surface. */
  .lu-sponsor-shine {
    position: absolute;
    top: -50%;
    left: -30%;
    width: 35%;
    height: 200%;
    background: linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,0.10) 35%,
      rgba(255,255,255,0.22) 50%,
      rgba(255,255,255,0.10) 65%,
      transparent 100%);
    transform: skewX(-18deg) translateX(-150%);
    animation: lu-sponsor-shine 5.4s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
  }
  @keyframes lu-sponsor-shine {
    0%       { transform: skewX(-18deg) translateX(-150%); opacity: 0; }
    8%       { opacity: 1; }
    55%, 100%{ transform: skewX(-18deg) translateX(900%);  opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lu-sponsor-shine { animation: none; opacity: 0; }
  }

  /* eyebrow — small "Sponsored by" label */
  .lu-sponsor-eyebrow {
    position: relative;
    z-index: 1;
    font-size: 9px;
    font-weight: 700;
    color: color-mix(in oklab, var(--brand) 80%, white);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding-inline-start: 12px;
    border-inline-start: 2px solid var(--brand);
    flex-shrink: 0;
  }
  html[lang="fa"] .lu-sponsor-eyebrow,
  html[lang="ar"] .lu-sponsor-eyebrow {
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
  }

  /* logo group — mark + brand name */
  .lu-sponsor-logo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
  }
  .lu-sponsor-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 5px;
    color: white;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.20);
  }
  .lu-sponsor-brand {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
  }

  /* banner — bigger, fills available width, has tagline + CTA */
  .lu-sponsor--banner {
    padding: 10px 12px;
    gap: 10px;
    min-height: 48px;
  }
  .lu-sponsor--banner .lu-sponsor-tagline {
    position: relative;
    z-index: 1;
    flex: 1;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .lu-sponsor--banner .lu-sponsor-cta {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent);
    background: color-mix(in oklab, var(--brand) 18%, transparent);
    color: color-mix(in oklab, var(--brand) 75%, white);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s;
  }
  .lu-sponsor--banner .lu-sponsor-cta:hover {
    background: color-mix(in oklab, var(--brand) 28%, transparent);
    border-color: var(--brand);
    color: white;
  }
  html[dir="rtl"] .lu-sponsor--banner .lu-sponsor-cta svg { transform: scaleX(-1); }

  /* compact — minimal pill, just eyebrow + logo */
  .lu-sponsor--compact {
    padding: 6px 10px;
    gap: 8px;
    min-height: 32px;
  }
  .lu-sponsor--compact .lu-sponsor-eyebrow {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
  .lu-sponsor--compact .lu-sponsor-brand {
    font-size: 12px;
  }
  .lu-sponsor--compact .lu-sponsor-mark {
    min-width: 20px;
    height: 18px;
    font-size: 9px;
  }

  /* Block — large vertical ad for desktop sidebar (skyscraper-style) */
  .lu-sponsor--block {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px 16px;
    gap: 10px;
    min-height: 180px;
    text-align: start;
  }
  .lu-sponsor--block .lu-sponsor-eyebrow {
    align-self: flex-start;
    font-size: 10px;
    margin-bottom: 2px;
  }
  .lu-sponsor--block .lu-sponsor-logo {
    gap: 10px;
    margin-bottom: 4px;
  }
  .lu-sponsor--block .lu-sponsor-mark {
    min-width: 36px;
    height: 30px;
    padding: 0 8px;
    border-radius: 7px;
    font-size: 13px;
  }
  .lu-sponsor--block .lu-sponsor-brand {
    font-size: 15px;
    max-width: none;
    white-space: normal;
    line-height: 1.2;
  }
  .lu-sponsor--block .lu-sponsor-tagline {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: normal;
    line-height: 1.45;
  }
  .lu-sponsor--block .lu-sponsor-cta {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent);
    background: color-mix(in oklab, var(--brand) 18%, transparent);
    color: color-mix(in oklab, var(--brand) 75%, white);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s;
  }
  .lu-sponsor--block .lu-sponsor-cta:hover {
    background: color-mix(in oklab, var(--brand) 28%, transparent);
    border-color: var(--brand);
    color: white;
  }
  html[dir="rtl"] .lu-sponsor--block .lu-sponsor-cta svg { transform: scaleX(-1); }

  /* ──── Submit Bar ──── */
  .lu-submit {
    position: relative;
    padding: 0;
    /* tint color piped through layers — defaults set per state below */
    --submit-tint:        rgba(52,211,153,0.55);
    --submit-tint-strong: rgba(52,211,153,0.75);
    --submit-tint-faint:  rgba(52,211,153,0.18);
    overflow: hidden;
    isolation: isolate;
  }
  .lu-submit--waiting {
    --submit-tint:        rgba(113,99,217,0.45);
    --submit-tint-strong: rgba(113,99,217,0.60);
    --submit-tint-faint:  rgba(113,99,217,0.14);
  }
  .lu-submit--cooldown {
    --submit-tint:        rgba(255,214,10,0.55);
    --submit-tint-strong: rgba(255,214,10,0.70);
    --submit-tint-faint:  rgba(255,214,10,0.16);
  }
  /* state-tinted halo — OFF by default. Kept as a class hook for future tweaks. */
  .lu-submit-halo {
    display: none;
  }
  /* glass panel — covers the bar area fully; mostly opaque so the lineup above
     is clearly separated, with just a thin top edge that reads as glass */
  .lu-submit-glass {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(14, 14, 22, 0.85) 0%,
      rgba(7, 7, 12, 0.96) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    z-index: 1;
    pointer-events: none;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  /* top edge highlight — subtle hairline */
  .lu-submit-hairline {
    position: absolute;
    left: 18px; right: 18px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--submit-tint-strong) 50%,
      transparent 100%);
    z-index: 2;
    pointer-events: none;
    opacity: 0.5;
  }
  .lu-submit-inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 12px;
  }
  .lu-submit-left {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
  }
  .lu-submit-token {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid color-mix(in oklab, var(--submit-tint-strong) 50%, transparent);
    background: color-mix(in oklab, var(--submit-tint) 20%, transparent);
    color: color-mix(in oklab, var(--submit-tint-strong) 100%, white);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .lu-submit--ready .lu-submit-token {
    color: var(--success);
  }
  .lu-submit--cooldown .lu-submit-token {
    color: var(--warning);
  }
  /* Spin only the inner SVG, not the whole token tile.
     Rotating the box made it look like motion-sickness, not progress. */
  .lu-submit--cooldown .lu-submit-token svg {
    animation: lu-spin 1.6s linear infinite;
    transform-origin: center;
  }
  @keyframes lu-spin { to { transform: rotate(360deg); } }
  html[dir="rtl"] .lu-submit--cooldown .lu-submit-token svg {
    animation: lu-spin-rtl 1.6s linear infinite;
  }
  @keyframes lu-spin-rtl { to { transform: rotate(-360deg); } }
  .lu-submit-token-text {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  html[lang="fa"] .lu-submit-token-text,
  html[lang="ar"] .lu-submit-token-text {
    font-family: inherit;
    font-size: 11px;
  }
  .lu-submit-hint {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .lu-submit--ready .lu-submit-hint { color: var(--success); }
  .lu-submit--cooldown .lu-submit-hint { color: var(--warning); font-variant-numeric: tabular-nums; }
  html[lang="fa"] .lu-submit-hint,
  html[lang="ar"] .lu-submit-hint { font-family: inherit; }
  /* CTA — clean glass pill (like pc-pill on PlayerCard). No state-tint, no halo.
     Only the dynamic hint text + token reflect the state. */
  .lu-submit-cta {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.22);
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.04) 100%),
      rgba(0, 0, 0, 0.35);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -1px 0 rgba(0,0,0,0.20),
      0 4px 14px rgba(0,0,0,0.30);
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  }
  .lu-submit-cta:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.34);
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0.14) 0%,
        rgba(255,255,255,0.06) 100%),
      rgba(0, 0, 0, 0.30);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.24),
      inset 0 -1px 0 rgba(0,0,0,0.20),
      0 6px 18px rgba(0,0,0,0.40);
  }
  .lu-submit-cta:active:not(:disabled) { transform: translateY(0) scale(0.97); }
  .lu-submit-cta:disabled {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--text-tertiary);
    cursor: not-allowed;
    box-shadow: none;
    text-shadow: none;
  }
  html[dir="rtl"] .lu-submit-cta svg { transform: scaleX(-1); }
`;

const __luPiecesStyle = document.createElement('style');
__luPiecesStyle.textContent = PIECES_CSS;
document.head.appendChild(__luPiecesStyle);

Object.assign(window, {
  LineupHeader, FormationChip, SpecialBar, FilledSpecialChip,
  DeckSummary, MiniScore, SubmitBar, SlotRowLabel, SponsorStrip, OrientationToggle
});