:root{
  --kp-hilite-eligible:#1E90FF;
  --kp-hilite-ineligible:#FF8C00;
  --kp-hilite-eligible-rgb:30,144,255;
  --kp-hilite-ineligible-rgb:249,115,22;
  --kp-hilite-pattern-eligible:solid;
  --kp-hilite-pattern-ineligible:dashed;
  /* Base size - will be overridden by JS-based scaling */
  --kp-hilite-decoration-size:13px;
  /* === KP HILITE SCALE DEFAULT (v1.0) === */
  --kp-hilite-scale: 1;
}

/* === KP HIGHLIGHTS TV SCALING (v1.0) ===
   Scales tick/cross badges with --kp-ui-scale from TV layout
   Added by: Kilo Code, 2026-02-13
   === */
.kp-tv-root {
  --kp-hilite-decoration-size: calc(13px * var(--kp-ui-scale, 1));
}

/* === KP HILITES SCALE (v1.0) === */
/* Scales highlight icons/markers based on event-scoped setting */
/* Depends on: --kp-hilite-scale CSS variable set by JS */
/* Added: 2026-02-14 */

/* Default scale value on root containers */
.kp-tv-root,
#kp-admin-wrap,
body.kp-admin-page #kp-admin-wrap {
  --kp-hilite-scale: 1;
}

/* Scale tick/cross badges using font-size and padding */
/* Using calc() instead of transform to avoid layout shifts */
body.kp-hilite-ticks-on .kp-eligible-now::after,
body.kp-hilite-ticks-on .kp-ineligible-now::after {
  font-size: calc(var(--kp-hilite-decoration-size, 13px) * var(--kp-hilite-scale, 1));
  padding: calc(2px * var(--kp-hilite-scale, 1)) calc(6px * var(--kp-hilite-scale, 1));
  border-radius: calc(10px * var(--kp-hilite-scale, 1));
}

/* Scale optional rings decoration */
body.kp-hilite-rings-on .kp-eligible-now::before {
  inset: calc(-4px * var(--kp-hilite-scale, 1));
  border-width: calc(2px * var(--kp-hilite-scale, 1));
}

/* Scale border width via outline */
body.kp-hilite-border-on .kp-eligible-now {
  outline-width: calc(var(--kp-hilite-width, 2px) * var(--kp-hilite-scale, 1));
  outline-offset: calc(2px * var(--kp-hilite-scale, 1));
}
body.kp-hilite-border-on .kp-ineligible-now {
  outline-width: calc(var(--kp-hilite-width, 2px) * var(--kp-hilite-scale, 1));
  outline-offset: calc(2px * var(--kp-hilite-scale, 1));
}

/* Scale glow intensity */
body.kp-hilite-glow-on .kp-eligible-now {
  filter: drop-shadow(0 0 calc(8px * var(--kp-hilite-scale, 1)) rgba(var(--kp-hilite-eligible-rgb, 30,144,255), 0.75));
}
/* === END KP HILITES SCALE === */

/* =========================================================
   KP HIGHLIGHTS: Hide legacy eligibility visuals (TV only)
   - Prevents red dots/rings (.kp-eligible-marker / .kp-eligible-dot)
     overlapping KP Highlights ticks/crosses.
   - Keeps legacy nodes in DOM (for animation logic), but invisible.
   Added by: Kilo Code, 2025-12-16
   ========================================================= */
.kp-eligible-marker,
.kp-eligible-dot{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Apply position only when highlighted so we don't affect tiles without styles */
.kp-eligible-now, .kp-ineligible-now {
  position: relative;
  border-radius: var(--kp-hilite-radius, 14px);
}

/* Show outlines ONLY when Border is ON */
body.kp-hilite-border-on .kp-eligible-now {
  outline-width: calc(var(--kp-hilite-width,2px) * var(--kp-hilite-scale,1));
  outline-style: var(--kp-hilite-pattern-eligible, solid);
  outline-color: var(--kp-hilite-eligible);
  outline-offset: calc(2px * var(--kp-hilite-scale,1));
}
body.kp-hilite-border-on .kp-ineligible-now {
  outline-width: calc(var(--kp-hilite-width,2px) * var(--kp-hilite-scale,1));
  outline-style: var(--kp-hilite-pattern-ineligible, dashed);
  outline-color: var(--kp-hilite-ineligible);
  outline-offset: calc(2px * var(--kp-hilite-scale,1));
}

/* Optional border inset */
body.kp-hilite-border-on .kp-eligible-now {
  box-shadow: 0 0 0 3px rgba(var(--kp-hilite-eligible-rgb, 30,144,255), 0.25) inset;
}
/* Optional glow */
body.kp-hilite-glow-on .kp-eligible-now {
  filter: drop-shadow(0 0 calc(8px * var(--kp-hilite-scale,1)) rgba(var(--kp-hilite-eligible-rgb, 30,144,255), 0.75));
}
/* Optional rings */
body.kp-hilite-rings-on .kp-eligible-now::before {
  content:""; position:absolute; inset:calc(-4px * var(--kp-hilite-scale,1)); border-radius:inherit;
  border:calc(2px * var(--kp-hilite-scale,1)) solid rgba(var(--kp-hilite-eligible-rgb, 30,144,255), .35); pointer-events:none;
}

/* Ticks/X badges (compact, top-right) */
body.kp-hilite-ticks-on .kp-eligible-now::after,
body.kp-hilite-ticks-on .kp-ineligible-now::after{
  position:absolute; top:6px; right:8px; font-weight:700; padding:calc(2px * var(--kp-hilite-scale,1)) calc(6px * var(--kp-hilite-scale,1)); border-radius:calc(10px * var(--kp-hilite-scale,1)); font-size:calc(var(--kp-hilite-decoration-size,13px) * var(--kp-hilite-scale,1)); line-height:1;
  color:#fff;
  z-index: 1; /* beneath any higher z-index shooter overlay */
}
body.kp-hilite-ticks-on .kp-eligible-now::after   { content:"✓"; background:var(--kp-hilite-eligible); }
body.kp-hilite-ticks-on .kp-ineligible-now::after { content:"✕"; background:var(--kp-hilite-ineligible); }

/* Light sweep for newly eligible */
.kp-sweep { animation: kpSweep var(--kp-hilite-sweep-ms,900ms) ease-out; }
@keyframes kpSweep { 0%{ transform: scale(1.02);} 100%{ transform: scale(1);} }

/* === KP ELIMINATION STATE EXPOSURE (v1.0) ===
   Tiles expose elimination state ONLY - no visual styling.
   Visual styling is handled entirely by KP Highlights.
   Added by: Kilo Code, 2026-01-03
   === END === */

/* Optional debug watermark */
.kp-hilite-watermark {
  position: fixed; bottom: 6px; left: 6px; font: 12px/1.2 system-ui, sans-serif;
  opacity: .35; pointer-events: none;
}
/* =========================================================
   KP LEGACY ELIGIBLE DOT COLOR (TV)
   - Align legacy dots with highlight eligibility (green)
   ========================================================= */

.kp-eligible-marker {
  color: #10b981; /* same green as ✓ tick */
}
/* === KP LEGACY ELIGIBILITY DOT (TV) === */
.kp-eligible-dot {
  background-color: #10b981; /* green */
}

/* =========================================================
   KP TV OUTREMOVED FIX (v1.0)
   - Hard-hide legacy .out-badge on TV pages to prevent race
   - Added: 2026-02-14
   ========================================================= */
.kp-tv-root .out-badge,
.kp-tv-root.kp-player-tile .out-badge,
.kp-player-tile .out-badge,
.kp-tile .out-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* =========================================================
   KP TV COMPACT MODE (v2.0)
   - Collapses header + stats into ONE ROW using absolute positioning
   - Stats positioned inside header band (right side)
   - No gap row between header and grid
   - Controlled from Admin Clone page via localStorage
   - BroadcastChannel: "kp_tv_ui" for cross-tab sync
   - localStorage key: "kp_tv_compact_mode_v1"
   - Added: 2026-02-14
   ========================================================= */

/* Compact mode: header becomes unified top band */
body.kp-compact-on .kp-tv-root .kp-tv-header,
body.kp-compact-on .kp-tv-root .kp-header,
body.kp-compact-on .kp-tv-root .tv-header,
.kp-tv-root.kp-compact-on .kp-tv-header,
.kp-tv-root.kp-compact-on .kp-header,
.kp-tv-root.kp-compact-on .tv-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  min-height: 44px !important;
  margin-bottom: 0 !important;
  background: rgba(15, 23, 42, 0.95) !important;
  flex-wrap: wrap !important;
  position: relative !important;
  z-index: 20 !important;
}

/* Inline all header elements */
body.kp-compact-on .kp-tv-root .kp-tv-header > *,
body.kp-compact-on .kp-tv-root .kp-header > *,
body.kp-compact-on .kp-tv-root .tv-header > *,
.kp-tv-root.kp-compact-on .kp-tv-header > *,
.kp-tv-root.kp-compact-on .kp-header > *,
.kp-tv-root.kp-compact-on .tv-header > * {
  margin: 0 !important;
  min-width: 0 !important;
}

body.kp-compact-on #kp-fullscreen-toggle,
body.kp-compact-on #kp-compact-toggle,
.kp-tv-root.kp-compact-on #kp-fullscreen-toggle,
.kp-tv-root.kp-compact-on #kp-compact-toggle {
  position: static !important;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  z-index: 30 !important;
}

/* Stats row wraps below top header line to prevent overlap/clipping */
body.kp-compact-on .kp-tv-root .kp-tv-stats,
.kp-tv-root.kp-compact-on .kp-tv-stats {
  position: static !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 4px 8px !important;
  margin: 4px 0 0 0 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  z-index: 15 !important;
  overflow: visible !important;
}

/* Hide labels, keep values */
body.kp-compact-on .kp-tv-root .kp-label,
body.kp-compact-on .kp-tv-root .label-text,
body.kp-compact-on .kp-tv-root .kp-stat-label,
.kp-tv-root.kp-compact-on .kp-label,
.kp-tv-root.kp-compact-on .label-text,
.kp-tv-root.kp-compact-on .kp-stat-label {
  display: none !important;
}

/* Reduce vertical gaps in compact mode */
body.kp-compact-on .kp-tv-root,
.kp-tv-root.kp-compact-on {
  padding-top: 4px !important;
}

/* Shift grid up to reclaim space */
body.kp-compact-on .kp-tv-root .kp-tile-grid,
body.kp-compact-on .kp-tv-root .player-grid,
body.kp-compact-on .kp-tv-root .kp-players-grid,
.kp-tv-root.kp-compact-on .kp-tile-grid,
.kp-tv-root.kp-compact-on .player-grid,
.kp-tv-root.kp-compact-on .kp-players-grid {
  margin-top: 4px !important;
  padding-top: 4px !important;
}

/* === END KP TV COMPACT MODE === */