/* =====================================================================
   Fantasy Liga — DESIGN LANGUAGE "BOLD SPORTY"
   Stadium-at-kickoff: dark ink command bar, premium green→lime pitch,
   electric lime energy on every fan action, light data canvas.
   Display = Archivo, UI = Manrope. Tokens locked in spec section B.
   ===================================================================== */

/* ---- Design Tokens (spec §B — LOCKED) ---- */
:root {
  /* ---- Surfaces — light canvas, layered depth ---- */
  --bg:          #eef1f6;   /* page */
  --bg-mid:      #e4e9f1;   /* page-deep */
  --panel:       #ffffff;   /* card */
  --panel-2:     #f3f6fb;   /* card-inset */
  --panel-3:     #e9eef6;   /* card-deep */
  --panel-hover: #eaf6ef;   /* hover (greenish, not grey) */
  --line:        rgba(16,32,24,.09);  /* hairline */
  --line-strong: rgba(16,32,24,.15);  /* border */

  /* ---- Ink / dark accent zone (topbar, pitch-bar) ---- */
  --ink:         #0c1f17;   /* darkzone */
  --ink-2:       #123026;   /* darkzone-raised */
  --ink-line:    rgba(255,255,255,.12); /* darkzone-border */
  --on-ink:      #eafff4;   /* text-on-dark */
  --on-ink-dim:  #9fc6b4;   /* muted-on-dark */

  /* ---- Typography ---- */
  --text:        #0f1a14;   /* heading */
  --text-dim:    #3c4a42;   /* body */
  --text-mute:   #69776e;   /* caption (≥4.5:1 on white) */
  --font:        'Manrope', system-ui, sans-serif;          /* ui */
  --font-display:'Archivo', 'Manrope', system-ui, sans-serif;/* display */

  /* ---- Accent: GREEN→LIME (the brand voltage) ---- */
  --accent:       #16a34a;  /* primary green (4.6:1 on white) */
  --accent-dim:   #0f7a37;  /* green-deep */
  --accent-glow:  rgba(22,163,74,.28);   /* focus/glow ring */
  --accent-bg:    rgba(22,163,74,.10);   /* tint */
  --lime:         #b6f23d;  /* electric lime — energy hits */
  --lime-deep:    #8fd400;  /* lime-pressed */
  --lime-glow:    rgba(182,242,61,.45);  /* lime glow */
  --lime-ink:     #16320a;  /* text ON lime (≥7:1) */

  /* ---- Value accent: gold/amber (money, captain, balance) ---- */
  --gold:         #b07c10;  /* gold text (4.7:1 on white) */
  --gold-dim:     #8a5f08;  /* gold-deep */
  --gold-bg:      rgba(176,124,16,.10); /* gold tint */
  --gold-bright:  #f6c945;  /* gold for the captain armband only */

  /* ---- Position colours — vivid, distinct ---- */
  --pos-gk:  #f59017;   /* orange */
  --pos-df:  #2f7ff0;   /* blue */
  --pos-mf:  #16a34a;   /* green (== accent) */
  --pos-fw:  #e23b4e;   /* red */

  /* ---- States ---- */
  --danger:       #d63341;  /* danger */
  --danger-glow:  rgba(214,51,65,.26);
  --danger-bg:    rgba(214,51,65,.10);
  --ok:           #16a34a;  /* success (== accent) */
  --ok-bg:        rgba(22,163,74,.12);
  --warn:         #c2740a;  /* warning */
  --warn-bg:      rgba(194,116,10,.12);

  /* ---- Pitch — premium grass ---- */
  --grass-a: #1f9b54;   /* stripe-light */
  --grass-b: #178244;   /* stripe-dark */
  --grass-c: #0f6e38;   /* stripe-deep (vignette/edge) */
  --grass-line: rgba(255,255,255,.62); /* markings */

  /* ---- Gradients (reusable) ---- */
  --grad-accent: linear-gradient(100deg, var(--accent-dim) 0%, var(--accent) 55%, var(--lime) 140%);
  --grad-cta:    linear-gradient(100deg, var(--accent) 0%, var(--lime-deep) 100%);
  --grad-ink:    linear-gradient(180deg, #0e261c 0%, #0a1812 100%);

  /* ---- Elevation — colored & confident, not grey mush ---- */
  --shadow-sm:  0 1px 2px rgba(12,31,23,.10), 0 2px 6px rgba(12,31,23,.07);
  --shadow-md:  0 6px 18px rgba(12,31,23,.12), 0 2px 6px rgba(12,31,23,.08);
  --shadow-lg:  0 16px 40px rgba(12,31,23,.20), 0 4px 12px rgba(12,31,23,.10);
  --shadow-accent: 0 6px 20px var(--accent-glow);   /* green-lifted CTA */
  --shadow-lime:   0 0 0 3px var(--lime-glow);       /* lime focus pop */

  /* ---- Radius scale — slightly sharper = sportier ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r:    16px;   /* alias used by .lp-card var(--r,…) — define it */

  font-family: var(--font);
}

/* ---- Signature motifs (spec §D) — drop-in utilities ---- */
.fx-speedbar {            /* a standalone lime slash */
  display: inline-block;
  width: 26px; height: 6px;
  background: var(--grad-cta);
  border-radius: 2px;
  transform: skewX(-22deg);
  box-shadow: 0 1px 6px var(--lime-glow);
}
.fx-tick::before {        /* lime tick before a heading */
  content:""; display:inline-block;
  width: 5px; height: 1em; margin-right: 9px;
  vertical-align: -2px;
  background: var(--grad-cta);
  border-radius: 2px;
  transform: skewX(-22deg);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }

/* ---- Body ---- */
body {
  margin: 0;
  background:
    radial-gradient(ellipse 120% 60% at 75% -5%, var(--bg-mid) 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TOP BAR — DARK ink command bar (spec §F)
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: var(--grad-ink);
  border-bottom: 1px solid var(--ink-line);
  position: sticky;
  top: 0;
  z-index: 20;
  /* lime underline = signature */
  box-shadow: 0 2px 0 var(--lime-deep), 0 6px 20px rgba(0,0,0,.28);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.logo {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

/* Brand wordmark — Archivo 900, with skewed lime speedbar underline (Motif 1) */
.topbar h1 {
  position: relative;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  margin: 0;
  letter-spacing: -.02em;
  color: var(--on-ink);
  line-height: 1.1;
  display: inline-block;
}
.topbar h1::after {
  content: "";
  display: block;
  width: 32px; height: 5px;
  margin-top: 3px;
  background: var(--grad-cta);
  border-radius: 2px;
  transform: skewX(-22deg);
  box-shadow: 0 1px 6px var(--lime-glow);
}

.tagline {
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 800;
  color: var(--on-ink-dim);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}

/* ---- Controls ---- */
.controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.control {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---- Buttons (spec §E) ---- */
.btn {
  background: var(--grad-cta);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 10px 18px;
  font-family: var(--font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  cursor: pointer;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); /* Motif 2 */
  box-shadow: var(--shadow-accent);
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease;
}

.btn:hover {
  filter: brightness(1.06) saturate(1.08);
  box-shadow: 0 8px 26px var(--accent-glow);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px var(--accent-glow);
  filter: brightness(.97);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-lime), var(--shadow-accent);
}

.btn:disabled {
  filter: grayscale(.5) brightness(1.05);
  opacity: .55;
  box-shadow: none;
  cursor: default;
  transform: none;
}

.btn-ghost {
  background: transparent;
  color: var(--accent-dim);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 9px 16px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  box-shadow: none;
  clip-path: none;            /* ghost stays rectangular */
  transition: border-color .15s, color .15s, background .15s;
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
  box-shadow: none;
}

.btn-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
  border-color: var(--accent);
}

/* Inverted ghost variant on the DARK topbar (spec §E/§F) */
.topbar .btn-ghost {
  color: var(--on-ink);
  border-color: var(--ink-line);
}
.topbar .btn-ghost:hover {
  color: var(--lime);
  border-color: var(--lime);
  background: rgba(182,242,61,.12);
}
.topbar .btn-ghost:focus-visible {
  box-shadow: var(--shadow-lime);
  border-color: var(--lime);
}

/* ---- Loud CTA variant — "go big" actions (spec §E) ---- */
.btn-cta {
  background: var(--lime);
  color: var(--lime-ink);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  box-shadow: 0 6px 22px var(--lime-glow), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .08s, box-shadow .15s, background .15s;
}
.btn-cta:hover {
  background: var(--lime-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px var(--lime-glow);
}
.btn-cta:active { transform: translateY(1px); }
.btn-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow), 0 6px 22px var(--lime-glow);
}
.btn-cta:disabled {
  filter: grayscale(.55) brightness(1.04);
  opacity: .5;
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* ---- Status badge ---- */
.status {
  margin-left: auto;
}

.badge {
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  transition: all .2s ease;
}

/* "full" / win state — loud lime-green gradient (spec §E pill recipe) */
.badge.full {
  background: var(--grad-cta);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-accent);
}

/* ============================================================
   BUDGET PANEL
   ============================================================ */
.budget {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.budget::before { display: none; }

.budget.over {
  border-color: var(--danger);
  box-shadow: 0 0 20px rgba(214,63,55,.1);
}

.budget.flash {
  animation: budgetShake .4s ease;
}

@keyframes budgetShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.budget-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.budget-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.budget-figure {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.budget-figure b {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--accent-dim);
  line-height: 1;
}
.budget.over .budget-figure b { color: var(--danger); }
.budget-cap {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mute);
}

.budget-bar {
  position: relative;
  height: 12px;
  background: var(--panel-3);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(12,31,23,.18);
  margin: 0;
}

.budget-fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--grad-accent);
  box-shadow: 0 0 12px var(--accent-glow);
  transition: width .35s cubic-bezier(.4,0,.2,1), background .3s ease;
}
/* ukazatel (posuvný knoflík) na konci utracené části — bílá tečka s lime prstencem */
.budget-fill::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 3px var(--lime-deep);
}
.budget.over .budget-fill::after { box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 3px var(--danger); }

.budget.over .budget-fill {
  background: linear-gradient(90deg, #a11f2a, var(--danger), #ff6b76);
  box-shadow: 0 0 12px var(--danger-glow);
}

.budget-stats {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.bstat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bstat.right { align-items: flex-end; }

.bstat i {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-mute);
}

.bstat b {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.bstat.right b {
  color: var(--accent-dim);
  font-size: 18px;
}

.budget.over .bstat.right b { color: var(--danger); }

.budget-warn {
  position: absolute;
  top: -2px;
  right: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--danger);
  white-space: nowrap;
}

.budget-warn[hidden] { display: none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(420px, 540px);
  justify-content: center;
  gap: 24px;
  padding: 20px 28px 28px;
  align-items: start;
}

/* ============================================================
   PITCH BAR
   ============================================================ */
/* Dark "scoreboard" bar matching the topbar (spec §G) */
.pitch-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  padding: 11px 16px;
  box-shadow: var(--shadow-md);
}

.pitch-bar .controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.control-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
/* On the dark scoreboard, micro-labels invert */
.pitch-bar .control-label { color: var(--on-ink-dim); }

/* ---- Budget figures on the dark scoreboard (spec §G) ---- */
.pitch-bar .budget-label { color: var(--on-ink-dim); }
.pitch-bar .budget-figure b { color: var(--lime); }
.pitch-bar .budget-cap { color: var(--on-ink-dim); }
.pitch-bar .budget.over .budget-figure b { color: #ff8a93; }
.pitch-bar .budget-bar { background: rgba(0,0,0,.32); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.pitch-bar .budget-warn { color: #ff8a93; }

/* Dark cselect variant inside the scoreboard (spec §G) */
.pitch-bar .cselect-btn {
  background: rgba(255,255,255,.06);
  color: var(--on-ink);
  border-color: var(--ink-line);
}
.pitch-bar .cselect-btn:hover {
  border-color: var(--lime);
  background: rgba(182,242,61,.12);
}
.pitch-bar .cselect-btn[aria-expanded="true"] {
  border-color: var(--lime);
  background: rgba(255,255,255,.10);
}
.pitch-bar .cselect-caret { color: var(--on-ink-dim); }

.cselect-sm {
  min-width: 104px;
  flex: 0 0 auto;
}

.cselect-sm .cselect-btn {
  padding: 8px 11px;
}

/* Výběr ligy, pro kterou se sestava ukládá — vlastní dropdown (cselect) */
.league-pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}

.cselect-league { min-width: 150px; max-width: 240px; }
.cselect-league.is-disabled .cselect-btn { opacity: .55; cursor: default; }

/* ============================================================
   AD RAILS — reklamní sloupce vlevo/vpravo
   ============================================================ */
.ad-rail {
  position: sticky;
  top: 90px;
  width: 100%;
  max-width: 300px;
  height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-self: center;
}

.ad-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--panel-2);
  box-shadow: inset 0 1px 2px rgba(12,31,23,.04);
}

.ad-slot-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  opacity: .6;
}

/* ============================================================
   PITCH — Tactile premium grass — KEPT GREEN
   ============================================================ */
.pitch-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.pitch {
  position: relative;
  aspect-ratio: 82 / 105;
  height: calc(100vh - 130px - 54px);
  width: auto;
  max-width: 100%;
  align-self: center;

  /* Premium energetic grass — 4-layer stack (spec §G) */
  background:
    /* 1. floodlight hotspot, top-center */
    radial-gradient(ellipse 70% 45% at 50% 8%, rgba(255,255,255,.16) 0%, transparent 55%),
    /* 2. edge vignette for depth */
    radial-gradient(ellipse 120% 120% at 50% 50%, transparent 50%, rgba(8,30,18,.42) 100%),
    /* 3. subtle top-light / bottom-shade wash */
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 42%, transparent 58%, rgba(8,30,18,.12) 100%),
    /* 4. mowed stripes — 11 bands, stronger contrast than before */
    repeating-linear-gradient(180deg,
      var(--grass-a) 0, var(--grass-a) 9.0909%,
      var(--grass-b) 9.0909%, var(--grass-b) 18.1818%);

  border: 2px solid rgba(8,30,18,.45);
  border-radius: var(--r-md);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 0 4px var(--ink),              /* dark frame welds pitch to the dark pitch-bar above */
    0 0 26px var(--accent-glow);       /* faint green stadium glow */
  overflow: hidden;
}

/* ---- Pitch markings — white lines stay on green pitch ---- */
.pitch-line, .pitch-circle, .pitch-spot, .pitch-box {
  position: absolute;
  pointer-events: none;
}

.center-line {
  left: 0; right: 0;
  top: 50%;
  height: 1.5px;
  background: var(--grass-line);
  box-shadow: 0 0 6px rgba(255,255,255,.18);
}

.pitch-circle {
  top: 50%; left: 50%;
  width: 26%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--grass-line);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,255,255,.18);
}

.center-spot {
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%);
  background: var(--grass-line);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,255,255,.18);
}

.pitch-box {
  left: 50%;
  transform: translateX(-50%);
  border: 1.5px solid var(--grass-line);
  box-shadow: 0 0 6px rgba(255,255,255,.18);
}

.box-top    { top: -2px;    width: 58%; height: 16%; border-top: none; }
.box-bottom { bottom: -2px; width: 58%; height: 16%; border-bottom: none; }
.small-box-top    { top: -2px;    width: 30%; height: 7%; border-top: none; }
.small-box-bottom { bottom: -2px; width: 30%; height: 7%; border-bottom: none; }

/* ============================================================
   SLOTS
   ============================================================ */
.slot {
  position: absolute;
  width: 64px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

.slot.filled {
  cursor: grab;
  touch-action: none;
}

.slot.filled:active {
  cursor: grabbing;
}

/* Drag ghost — jersey that follows the cursor */
.drag-ghost {
  position: fixed;
  left: 0; top: 0;
  width: 64px; height: 60px;
  transform: translate(-50%, -50%) scale(1.15);
  pointer-events: none;
  z-index: 1000;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)) drop-shadow(0 0 10px var(--lime-glow));
  animation: ghostPop .12s cubic-bezier(.34,1.56,.64,1);
}

.drag-ghost .jersey-svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes ghostPop {
  from { transform: translate(-50%, -50%) scale(.75); opacity: .6; }
}

/* Source slot fades while dragging */
.drag-source { opacity: .3 !important; }

/* No text selection while dragging */
body.dragging-active {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

.slot .shirt {
  width: 50px; height: 47px;
  display: grid;
  place-items: center;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), filter .15s ease;
}

.slot .shirt .jersey-svg {
  width: 100%; height: 100%;
  display: block;
}

.slot.filled .shirt {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

.slot.drag-over .shirt {
  transform: scale(1.25);
  filter: drop-shadow(0 0 12px var(--lime-glow)) drop-shadow(0 0 6px var(--lime));
}

/* Eligible slots pulse LIME — the single most "sporty" interaction (spec §H1) */
.slot.eligible:not(.drag-over) .shirt {
  animation: eligiblePulse 1.1s ease-in-out infinite;
}

.slot.eligible .pos-label {
  background: var(--lime);
  color: var(--lime-ink);
}

.slot.ineligible { opacity: .22; }

@keyframes eligiblePulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0   rgba(182,242,61,0)); }
  50%       { transform: scale(1.13); filter: drop-shadow(0 0 11px var(--lime-glow)); }
}

/* Invalid drop — red shake */
.slot.bad .shirt {
  animation: slotBad .45s ease;
}

@keyframes slotBad {
  0%,100% { transform: scale(1);    filter: drop-shadow(0 0 0   rgba(214,51,65,0)); }
  25%      { transform: scale(1.1) rotate(-6deg); filter: drop-shadow(0 0 9px rgba(214,51,65,.95)); }
  75%      { transform: scale(1.1) rotate(6deg);  filter: drop-shadow(0 0 9px rgba(214,51,65,.95)); }
}

/* Ghost over bad target */
.drag-ghost.over-bad {
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.4)) grayscale(.7);
  opacity: .6;
}

/* ---- Remove (✕) button — appears when a filled slot is clicked ---- */
.slot .slot-remove {
  position: absolute;
  top: -6px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 4px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.6);
  z-index: 5;

  /* skryté dokud není slot „otevřený" */
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s cubic-bezier(.34,1.56,.64,1), background .12s ease;
}

.slot .slot-remove svg { display: block; width: 100%; height: 100%; }

.slot .slot-remove:hover {
  background: #e84a52;
}

.slot .slot-remove:focus-visible {
  outline: none;
  box-shadow: 0 3px 10px rgba(0,0,0,.25), 0 0 0 3px var(--danger-glow);
}

/* jen obsazené sloty mají tlačítko; zobraz po kliknutí */
.slot.filled.show-remove .slot-remove {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* ---- Tlačítko kapitána (C) — vlevo nahoře vedle ✕ ---- */
.slot .slot-captain {
  position: absolute;
  top: -6px;
  left: 4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.6);
  z-index: 5;
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s cubic-bezier(.34,1.56,.64,1), background .12s ease, color .12s ease;
}
.slot .slot-captain:hover { background: var(--gold); color: #fff; }
.slot .slot-captain:focus-visible {
  outline: none;
  box-shadow: 0 3px 10px rgba(0,0,0,.25), 0 0 0 3px var(--gold-bg);
}
.slot.captain .slot-captain { background: var(--gold); color: #fff; }
.slot.filled.show-remove .slot-captain {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* ---- Páska kapitána na dresu (vždy viditelná) ---- */
/* kapitánská páska — vodorovný proužek přes rukáv dresu */
.captain-badge {
  position: absolute;
  top: 16px;
  left: 3px;
  width: 20px;
  height: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffe27a 0%, var(--gold-bright) 45%, var(--gold) 100%);
  color: #5a3d00;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1;
  transform: rotate(-18deg);
  box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5);
  border: 0.5px solid rgba(120,80,0,.5);
  z-index: 4;
  pointer-events: none;
}
/* tmavé okrajové proužky pásky */
.captain-badge::before,
.captain-badge::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: rgba(120,80,0,.45);
}
.captain-badge::before { top: 1px; }
.captain-badge::after { bottom: 1px; }
.slot.captain .captain-badge { display: flex; }

/* Slot labels — on the green pitch: dark bg for pos-label, white name — keep as-is */
.slot .pos-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.6);
  padding: 2px 7px;
  border-radius: var(--r-xs);
  backdrop-filter: blur(4px);
}

.slot .name-label {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6);
  max-width: 78px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .1px;
}

/* ============================================================
   BENCH (player list panel)
   ============================================================ */
.bench {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 14px;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 90px;
  height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bench-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

.bench h2 {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
  text-align: left;
}
/* lime tick prefix (Motif 1) — loud, left-aligned section title */
.bench h2::before {
  content: "";
  display: inline-block;
  width: 5px; height: 1em;
  margin-right: 9px;
  background: var(--grad-cta);
  border-radius: 2px;
  transform: skewX(-22deg);
  box-shadow: 0 1px 6px var(--lime-glow);
}

.bench-count {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

/* ---- Search ---- */
.search {
  background: var(--panel-2);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.search::placeholder {
  color: var(--text-mute);
}

.search:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ============================================================
   FILTERS
   ============================================================ */
.filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* ---- Position chips (spec §E chip recipe) ---- */
.chip {
  flex: 1;
  min-width: 36px;
  background: var(--panel-2);
  color: var(--text-dim);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 7px 4px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: all .14s ease;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent-dim);
  background: var(--accent-bg);
}

.chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
  border-color: var(--accent);
}

.chip.active {
  background: var(--grad-cta);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-accent);
}

/* Optional per-position active tint when a single position is selected (spec §E) */
.chip.active[data-pos="GK"] { background: var(--pos-gk); box-shadow: var(--shadow-md); }
.chip.active[data-pos="DF"] { background: var(--pos-df); box-shadow: var(--shadow-md); }
.chip.active[data-pos="MF"] { background: var(--pos-mf); box-shadow: var(--shadow-md); }
.chip.active[data-pos="FW"] { background: var(--pos-fw); box-shadow: var(--shadow-md); }


/* ============================================================
   CUSTOM COUNTRY DROPDOWN (cselect)
   ============================================================ */
.cselect {
  position: relative;
  flex: 1;
  min-width: 0;
}

.cselect-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--panel-2);
  color: var(--text);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 8px 11px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.cselect-btn:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.cselect-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.cselect-btn[aria-expanded="true"] {
  border-color: var(--accent);
  background: #fff;
}

.cselect-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex: 0 0 auto;
  font-size: 13px;
}

.cselect-label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cselect-caret {
  color: var(--text-mute);
  font-size: 10px;
  flex: 0 0 auto;
  transition: transform .2s ease;
}

.cselect-btn[aria-expanded="true"] .cselect-caret {
  transform: rotate(180deg);
}

.cselect-list {
  position: absolute;
  top: calc(100% + 5px);
  left: 0; right: 0;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: 60;

  /* Custom thin scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) transparent;
}

.cselect-list::-webkit-scrollbar {
  width: 4px;
}

.cselect-list::-webkit-scrollbar-track {
  background: transparent;
}

.cselect-list::-webkit-scrollbar-thumb {
  background: var(--accent-dim);
  border-radius: 4px;
}

.cselect-list[hidden] { display: none; }

.cselect-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  transition: background .1s ease;
}

.cselect-opt:hover {
  background: var(--accent-bg);
}

.cselect-opt.selected {
  background: var(--accent-bg);
  color: var(--accent-dim);
  font-weight: 800;
  border: 1px solid var(--accent);
  box-shadow: inset 2px 0 0 var(--lime-deep); /* lime edge marker */
}

.cselect-opt .flag {
  width: 20px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}

/* ---- Větší nabídka zemí (#teamSelect) ---- */
#teamSelectList {
  min-width: 230px;
  max-height: 460px;
  padding: 7px;
}
#teamSelectList .cselect-opt {
  padding: 10px 11px;
  font-size: 13px;
  gap: 11px;
}
#teamSelectList .cselect-opt .flag,
#teamSelectList .cselect-icon {
  width: 28px;
  height: 19px;
  font-size: 16px;
}

/* ============================================================
   BENCH LIST — player cards
   ============================================================ */
.bench-list {
  list-style: none;
  margin: 0;
  padding: 0 6px 0 0; /* mezera vpravo, ať karty nenaráží na scrollbar */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;

  /* Custom thin scrollbar — green thumb on light track */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) transparent;
  scrollbar-gutter: stable; /* rezervuje místo pro scrollbar — žádné reflow/blikání */
}

.bench-list::-webkit-scrollbar {
  width: 4px;
}

.bench-list::-webkit-scrollbar-track {
  background: transparent;
}

.bench-list::-webkit-scrollbar-thumb {
  background: var(--accent-dim);
  border-radius: 4px;
}

.bench-empty {
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  padding: 28px 8px;
  letter-spacing: .2px;
}

/* ============================================================
   PLAYER CARD
   ============================================================ */
.player-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px 8px 9px;
  cursor: grab;
  touch-action: none;
  transition:
    border-color .15s ease,
    background .15s ease,
    transform .1s ease,
    opacity .15s ease,
    box-shadow .15s ease;

  /* Left accent bar — 4px, colored by position (spec §H1) */
  border-left: 4px solid var(--line-strong);
}

/* Position-colored 4px left bar. The JS only puts pos-XX on the inner
   .pc-pos badge, so we color the card bar via :has() — no markup/JS rename. */
.player-card:has(.pc-pos.pos-GK) { border-left-color: var(--pos-gk); }
.player-card:has(.pc-pos.pos-DF) { border-left-color: var(--pos-df); }
.player-card:has(.pc-pos.pos-MF) { border-left-color: var(--pos-mf); }
.player-card:has(.pc-pos.pos-FW) { border-left-color: var(--pos-fw); }

.player-card:hover {
  border-color: var(--line-strong);
  background: var(--panel-hover);   /* lime-tinted hover */
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.player-card:active {
  cursor: grabbing;
}

.player-card.dragging {
  opacity: .35;
}

/* On pitch — muted with a small indicator */
.player-card.on-pitch {
  opacity: .46;
}

.player-card.on-pitch::after {
  content: "na hřišti";
  position: absolute;
  right: 10px;
  bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .8;
}

/* Too expensive — muted + danger accent */
.player-card.too-expensive {
  opacity: .45;
}

.player-card.too-expensive::after {
  content: "mimo rozpočet";
  position: absolute;
  right: 10px;
  bottom: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--danger);
}

.player-card.too-expensive .pc-price {
  color: var(--danger) !important;
}

/* Jersey thumbnail */
.pc-num {
  width: 34px;
  height: 32px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
}

.pc-num .jersey-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.22));
}

/* Player info */
.pc-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.pc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
  line-height: 1.2;
}

.pc-meta {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
}

.pc-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Flag */
.flag {
  width: 18px;
  height: 12px;
  border-radius: var(--r-xs);
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

/* ---- Right column: position badge + price ---- */
.pc-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Position — small solid color tag with a position dot */
.pc-pos {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-dim);
}
.pc-pos::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.pc-pos.pos-GK::before { background: var(--pos-gk); }
.pc-pos.pos-DF::before { background: var(--pos-df); }
.pc-pos.pos-MF::before { background: var(--pos-mf); }
.pc-pos.pos-FW::before { background: var(--pos-fw); }

/* Price — Archivo tabular gold, one step bigger than its label (Motif 3) */
.pc-price {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
}
.pc-price .unit {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-mute);
  margin-left: 2px;
  letter-spacing: .3px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Skryj reklamní sloupec a zúž bench na středních obrazovkách */
@media (max-width: 1200px) {
  .ad-rail { display: none; }
  .layout { grid-template-columns: auto minmax(340px, 420px); justify-content: center; }
}

@media (max-width: 880px) {
  .layout {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .bench {
    position: static;
    max-height: 420px;
  }

  .status {
    margin-left: 0;
  }

  .budget {
    min-width: 0;
    flex: 1;
  }

  .topbar {
    gap: 12px;
    padding: 10px 14px;
  }
}