/* ================================================================
   Calcio Finder v1.3.1 – Fixed: text visibility + type icons + responsive
   Self-contained dark panels that work on any WordPress theme
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,600;9..40,700;9..40,800;9..40,900&family=DM+Mono:wght@400;500&display=swap');

/* ── CSS variables scoped to plugin containers ─────────────── */
.cf-search, .cf-league, .calcio-profile, .calcio-compare,
.calcio-wrap, .calcio-card, .cf-compare-hero {
  --cf-bg:       #0d1117;
  --cf-surface:  #161b27;
  --cf-surface2: #1e2535;
  --cf-surface3: #263044;
  --cf-border:   rgba(255,255,255,.09);
  --cf-border2:  rgba(255,255,255,.16);
  --cf-text:     #e8edf5;
  --cf-muted:    #4b5673;
  --cf-muted2:   #8b95b0;
  --cf-green:    #00e676;
  --cf-green2:   #00c853;
  --cf-green-dim:rgba(0,230,118,.11);
  --cf-yellow:   #ffc400;
  --cf-red:      #ff5252;
  --cf-blue:     #40c4ff;
  --cf-orange:   #ff9100;
  --p0: #40c4ff; --p1: #00e676; --p2: #ff9100;
  --p3: #ce93d8; --p4: #ff5252; --p5: #ffc400;
  --cf-r:  10px;
  --cf-r2: 16px;
  --cf-shadow:    0 4px 24px rgba(0,0,0,.5);
  --cf-shadow-lg: 0 16px 56px rgba(0,0,0,.7);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: var(--cf-text);
  box-sizing: border-box;
}

/* Reset box-sizing inside plugin */
.cf-search *, .cf-league *, .calcio-profile *,
.calcio-compare *, .calcio-wrap *, .cf-compare-hero * {
  box-sizing: border-box;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
.cf-search ::-webkit-scrollbar,
.calcio-profile ::-webkit-scrollbar,
.cf-league ::-webkit-scrollbar { width: 5px; height: 5px; }
.cf-search ::-webkit-scrollbar-track,
.calcio-profile ::-webkit-scrollbar-track { background: var(--cf-surface); }
.cf-search ::-webkit-scrollbar-thumb,
.calcio-profile ::-webkit-scrollbar-thumb { background: var(--cf-surface3); border-radius: 99px; }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes cf-spin { to { transform: rotate(360deg); } }
@keyframes cf-in   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cf-bar  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cf-pop  { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ── Utilities ──────────────────────────────────────────────── */
.calcio-muted { color: var(--cf-muted2); }
.calcio-link  { color: var(--cf-green); text-decoration: none; font-weight: 700; }
.calcio-link:hover { text-decoration: underline; }
.cf-sr-only   { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ================================================================
   GLOBAL SEARCH
   ================================================================ */
.cf-search { position: relative; width: 100%; }

.cf-search__bar {
  display: flex; align-items: center; gap: .5rem;
  border-radius: 99px;
  padding: .22rem .3rem .22rem 1.2rem;
  background: var(--cf-surface2);
  border: 1.5px solid var(--cf-border);
  box-shadow: var(--cf-shadow);
  transition: border-color .2s, box-shadow .2s;
}
.cf-search__bar:focus-within {
  border-color: var(--cf-green);
  box-shadow: var(--cf-shadow), 0 0 0 3px rgba(0,230,118,.14);
}
.cf-search__icon {
  color: var(--cf-muted2);
  display: flex; align-items: center; flex-shrink: 0;
}
.cf-search__input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 1rem;
  color: var(--cf-text) !important;
  padding: .78rem 0; min-width: 0;
}
.cf-search__input::placeholder { color: var(--cf-muted2) !important; }
.cf-search__clear {
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--cf-surface3); color: var(--cf-muted2);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s; flex-shrink: 0;
}
.cf-search__clear:hover { background: var(--cf-border2); transform: scale(1.1); }

/* Autocomplete dropdown */
.cf-search__drop {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  z-index: 99999;
  border-radius: var(--cf-r2); overflow: hidden;
  max-height: 520px; overflow-y: auto;
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border2);
  box-shadow: var(--cf-shadow-lg);
  animation: cf-in .15s ease;
  scrollbar-width: thin;
}
.cf-ac-group-title {
  display: flex; align-items: center; gap: .45rem;
  padding: .65rem 1rem .3rem;
  font-size: .63rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--cf-muted2) !important;
}
.cf-ac-group:not(:first-child) .cf-ac-group-title {
  border-top: 1px solid var(--cf-border);
}
.cf-ac-item {
  display: flex !important; align-items: center; gap: .8rem;
  padding: .6rem 1rem; text-decoration: none !important;
  transition: background .1s; cursor: pointer;
  background: transparent;
}
.cf-ac-item:hover, .cf-ac-item.is-selected {
  background: var(--cf-surface2) !important;
}
/* Type-specific thumb colours */
.cf-ac-thumb {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--cf-surface3);
  font-size: 1.1rem; line-height: 1;
}
.cf-ac-thumb--player      { background: rgba(0,230,118,.12);  color: #00e676; }
.cf-ac-thumb--team        { background: rgba(64,196,255,.12); color: #40c4ff; }
.cf-ac-thumb--club        { background: rgba(255,145,0,.12);  color: #ff9100; }
.cf-ac-thumb--competition { background: rgba(255,196,0,.12);  color: #ffc400; }
.cf-ac-thumb--group       { background: rgba(206,147,216,.12);color: #ce93d8; }
.cf-ac-thumb--referee     { background: rgba(255,196,0,.14);  color: #ffc400; }
.cf-ac-thumb--stadium     { background: rgba(64,196,255,.12); color: #40c4ff; }
.cf-ac-thumb--staff       { background: rgba(255,82,82,.12);  color: #ff5252; }

.cf-ac-thumb svg { width: 18px; height: 18px; flex-shrink: 0; }

.cf-ac-info  { min-width: 0; flex: 1; }
.cf-ac-name  {
  font-size: .9rem; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--cf-text) !important;
}
.cf-ac-meta  { font-size: .72rem; margin-top: .1rem; color: var(--cf-muted2) !important; }
.cf-ac-empty {
  padding: 2rem 1.5rem; text-align: center;
  font-size: .88rem; color: var(--cf-muted2) !important;
}

/* ================================================================
   LEAGUE SEARCH
   ================================================================ */
.cf-league { width: 100%; }

.cf-league__hero {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #0c1521 0%, #0b1e3a 55%, #0a1c10 100%);
  border-radius: var(--cf-r2) var(--cf-r2) 0 0;
  padding: 2rem 2.5rem 1.75rem; gap: 1.5rem;
  border: 1px solid var(--cf-border); border-bottom: none;
  position: relative; overflow: hidden;
}
.cf-league__hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 75% 50%, rgba(0,230,118,.07) 0%, transparent 60%);
}
.cf-league__hero-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.cf-league__title {
  font-size: clamp(1.3rem, 3.5vw, 2rem); font-weight: 900;
  margin: 0 0 .35rem; letter-spacing: -.03em; line-height: 1.1;
  color: var(--cf-text);
}
.cf-league__title span { color: var(--cf-green); }
.cf-league__sub { margin: 0; font-size: .83rem; color: var(--cf-muted2); }
.cf-league__hero-ico {
  width: 52px; height: 52px; color: var(--cf-green);
  opacity: .15; flex-shrink: 0; position: relative; z-index: 1;
}

.cf-league__filters {
  background: var(--cf-surface);
  border: 1px solid var(--cf-border); border-top: none;
  border-radius: 0 0 var(--cf-r2) var(--cf-r2);
  padding: 1.75rem; margin-bottom: 1.5rem;
}
.cf-league__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1rem; margin-bottom: 1rem;
}
.cf-league__field { display: flex; flex-direction: column; gap: .3rem; }
.cf-league__lbl {
  display: flex; align-items: center; gap: .35rem;
  font-size: .67rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--cf-muted2);
}
.cf-league__lbl svg { flex-shrink: 0; }
.cf-league__sel, .cf-league__input {
  width: 100%; border: 1.5px solid var(--cf-border); border-radius: 9px;
  padding: .62rem .9rem; font-size: .9rem; font-family: inherit;
  color: var(--cf-text) !important;
  background: var(--cf-surface2) !important;
  transition: border-color .2s, box-shadow .2s;
  appearance: none; -webkit-appearance: none; line-height: 1.4;
}
.cf-league__sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%238b95b0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .8rem center !important;
  padding-right: 2.4rem !important; cursor: pointer;
}
.cf-league__sel option { background: #1e2535; color: #e8edf5; }
.cf-league__sel:focus, .cf-league__input:focus {
  border-color: var(--cf-green); outline: none;
  box-shadow: 0 0 0 3px rgba(0,230,118,.12);
}
.cf-league__sel:disabled { opacity: .35; cursor: not-allowed; }
.cf-league__input::placeholder { color: var(--cf-muted2); }

.cf-league__actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: .65rem;
  padding-top: 1.25rem; margin-top: 1.25rem;
  border-top: 1px solid var(--cf-border);
}
.cf-league__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .65rem 1.5rem; border-radius: 99px;
  border: 1.5px solid var(--cf-green);
  background: var(--cf-green); color: #0b0f1a !important;
  font-family: inherit; font-size: .88rem; font-weight: 800;
  cursor: pointer; transition: all .2s; white-space: nowrap; line-height: 1;
}
.cf-league__btn:hover {
  background: var(--cf-green2); border-color: var(--cf-green2);
  transform: translateY(-1px);
}
.cf-league__btn:active { transform: scale(.97); }
.cf-league__btn--ghost {
  background: transparent !important; color: var(--cf-muted2) !important;
  border-color: var(--cf-border2);
}
.cf-league__btn--ghost:hover {
  color: var(--cf-text) !important;
  background: var(--cf-surface2) !important;
}
.cf-league__count { margin-left: auto; font-size: .8rem; color: var(--cf-muted2); font-weight: 600; }

.cf-league__loading {
  display: flex; align-items: center; gap: .75rem; justify-content: center;
  padding: 3rem; color: var(--cf-muted2); font-size: .9rem;
}
.cf-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--cf-surface3);
  border-top-color: var(--cf-green);
  animation: cf-spin .65s linear infinite; flex-shrink: 0;
}

.cf-league__empty {
  padding: 4rem 2rem; text-align: center; color: var(--cf-muted2);
  background: var(--cf-surface);
  border-radius: var(--cf-r2); border: 1px solid var(--cf-border);
}
.cf-league__empty-ico {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--cf-surface2); margin: 0 auto 1rem;
  color: var(--cf-green); opacity: .45;
}
.cf-league__empty p { margin: 0; font-size: .95rem; }

.cf-league__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.cf-league__pager {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap;
}
.cf-league__page-info { font-size: .83rem; color: var(--cf-muted2); font-weight: 600; }

/* Competition card */
.cf-comp-card {
  display: flex; flex-direction: column;
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border); border-radius: var(--cf-r2);
  padding: 1.25rem; text-decoration: none !important;
  color: var(--cf-text) !important;
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .25s, border-color .2s;
  animation: cf-in .3s ease both;
}
.cf-comp-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--cf-green), var(--cf-blue));
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.cf-comp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(0,230,118,.2);
  border-color: rgba(0,230,118,.25);
}
.cf-comp-card:hover::before { transform: scaleX(1); }
.cf-comp-card__head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: .9rem; }
.cf-comp-card__icon {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  background: var(--cf-green-dim);
  border: 1px solid rgba(0,230,118,.18);
  display: flex; align-items: center; justify-content: center; color: var(--cf-green);
}
.cf-comp-card__name   { font-size: .97rem; font-weight: 800; line-height: 1.25; margin-bottom: .2rem; color: var(--cf-text); }
.cf-comp-card__season { font-size: .75rem; color: var(--cf-muted2); }
.cf-comp-card__tags   { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.cf-tag {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .18rem .55rem; border-radius: 99px;
  font-size: .7rem; font-weight: 700;
  background: var(--cf-surface2); color: var(--cf-muted2);
  border: 1px solid var(--cf-border);
}
.cf-tag.green  { background: rgba(0,230,118,.1);  color: #00e676; border-color: rgba(0,230,118,.2); }
.cf-tag.pink   { background: rgba(255,82,82,.1);  color: #ff5252; border-color: rgba(255,82,82,.2); }
.cf-tag.blue   { background: rgba(64,196,255,.1); color: #40c4ff; border-color: rgba(64,196,255,.2); }
.cf-tag.dark   { background: var(--cf-surface3);  color: var(--cf-green); }
.cf-tag.gold   { background: rgba(255,196,0,.1);  color: #ffc400; border-color: rgba(255,196,0,.2); }
.cf-comp-card__footer {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  padding-top: .75rem; border-top: 1px solid var(--cf-border);
  font-size: .78rem; color: var(--cf-muted2);
}
.cf-comp-card__cta { display: flex; align-items: center; gap: .3rem; color: var(--cf-green); font-weight: 700; }

/* ================================================================
   PROFILES
   ================================================================ */
.calcio-profile { color: var(--cf-text); }

.calcio-card {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r2);
  box-shadow: var(--cf-shadow); overflow: hidden;
  color: var(--cf-text);
}
.calcio-card--tight { padding: 1rem 1.25rem; }

.calcio-hero {
  background: linear-gradient(145deg, #0a1420 0%, #0d1e34 60%, #091610 100%);
  padding: 2.25rem 2.25rem 0; position: relative; overflow: hidden;
}
.calcio-hero::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 350px; height: 350px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,230,118,.1) 0%, transparent 70%);
  pointer-events: none;
}
.calcio-hero__left { display: flex; align-items: flex-start; gap: 1.5rem; position: relative; z-index: 1; }

.calcio-avatar {
  width: 82px; height: 82px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(0,230,118,.4); background: rgba(0,230,118,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 900; color: var(--cf-green);
}
.calcio-logo {
  width: 82px; height: 82px; border-radius: 14px; flex-shrink: 0;
  background: rgba(255,255,255,.06); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cf-border);
}
.calcio-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.calcio-h {
  font-size: clamp(1.25rem, 3.5vw, 2rem); font-weight: 900;
  color: var(--cf-text) !important;
  margin: 0 0 .5rem; letter-spacing: -.03em; line-height: 1.1;
}
.calcio-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.calcio-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .22rem .7rem; border-radius: 99px;
  font-size: .72rem; font-weight: 700;
  background: rgba(255,255,255,.07); color: var(--cf-muted2);
  border: 1px solid var(--cf-border);
}
.calcio-badge--soft {
  background: rgba(0,230,118,.12);
  border-color: rgba(0,230,118,.25);
  color: var(--cf-green);
}

.calcio-statbar {
  display: flex; flex-wrap: wrap;
  background: rgba(0,0,0,.22); border-top: 1px solid var(--cf-border);
  margin: 1.75rem -2.25rem 0;
}
.calcio-stat {
  flex: 1; min-width: 76px; text-align: center;
  padding: 1rem .5rem; border-right: 1px solid var(--cf-border);
}
.calcio-stat:last-child { border-right: none; }
.calcio-stat__val { font-size: 1.6rem; font-weight: 900; line-height: 1; color: var(--cf-green); font-variant-numeric: tabular-nums; }
.calcio-stat__val.y { color: var(--cf-yellow); }
.calcio-stat__val.r { color: var(--cf-red);    }
.calcio-stat__val.b { color: var(--cf-blue);   }
.calcio-stat__val.w { color: var(--cf-text);   }
.calcio-stat__lbl   { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--cf-muted2); margin-top: .3rem; }

/* Tabs */
.calcio-tab-nav {
  display: flex; flex-wrap: nowrap;
  background: var(--cf-surface2);
  border-bottom: 1px solid var(--cf-border);
  padding: 0 1.5rem; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.calcio-tab-nav::-webkit-scrollbar { display: none; }
.calcio-tab {
  display: flex; align-items: center; gap: .4rem;
  padding: .9rem 1.1rem; border: none; background: transparent;
  font-family: inherit; font-size: .83rem; font-weight: 700;
  color: var(--cf-muted2) !important;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s; white-space: nowrap; flex-shrink: 0;
}
.calcio-tab:hover { color: var(--cf-text) !important; }
.calcio-tab[aria-selected="true"] { color: var(--cf-green) !important; border-bottom-color: var(--cf-green); }
.calcio-panel          { display: none; padding: 1.5rem; background: var(--cf-surface); }
.calcio-panel.is-active { display: block; animation: cf-in .2s ease; }

/* Key-value table */
.calcio-kv { width: 100%; border-collapse: collapse; font-size: .9rem; }
.calcio-kv th {
  padding: .65rem .9rem; text-align: left;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--cf-muted2) !important;
  background: var(--cf-surface2) !important;
  border-bottom: 1px solid var(--cf-border);
  white-space: nowrap; width: 160px; vertical-align: top;
}
.calcio-kv td {
  padding: .65rem .9rem; border-bottom: 1px solid var(--cf-border);
  font-weight: 500; color: var(--cf-text) !important; vertical-align: top;
}
.calcio-kv tr:last-child th, .calcio-kv tr:last-child td { border-bottom: none; }
.calcio-kv td a { color: var(--cf-green); }

/* Data tables */
.calcio-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.calcio-table { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 400px; }
.calcio-table thead tr {
  background: var(--cf-surface2) !important;
  border-bottom: 1px solid var(--cf-border);
}
.calcio-table th {
  padding: .7rem 1rem; text-align: left;
  color: var(--cf-muted2) !important;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.calcio-table td {
  padding: .65rem 1rem; border-bottom: 1px solid var(--cf-border);
  vertical-align: middle; color: var(--cf-text) !important;
  background: var(--cf-surface) !important;
}
.calcio-table tr:last-child td { border-bottom: none; }
.calcio-table tbody tr:hover td { background: var(--cf-surface2) !important; }
.calcio-table .pos-top td:first-child { border-left: 3px solid var(--cf-green); }
.calcio-table .pos-bot td:first-child { border-left: 3px solid var(--cf-red);   }
.calcio-table .pts { font-weight: 900; font-size: .95rem; color: var(--cf-green) !important; }
.calcio-table td a, .calcio-table td .calcio-link { color: var(--cf-green) !important; }

.ico-g { color: var(--cf-green); font-weight: 700; }
.ico-y { display: inline-block; width: 10px; height: 14px; background: var(--cf-yellow); border-radius: 2px; vertical-align: middle; margin: 0 1px; }
.ico-r { display: inline-block; width: 10px; height: 14px; background: var(--cf-red);    border-radius: 2px; vertical-align: middle; margin: 0 1px; }

.cf-standings-legend {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .7rem 1rem; background: var(--cf-surface2);
  border-top: 1px solid var(--cf-border); font-size: .72rem; color: var(--cf-muted2);
}
.cf-leg           { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.cf-leg--green    { background: var(--cf-green); }
.cf-leg--red      { background: var(--cf-red);   }

/* Match results */
.cf-results { display: flex; flex-direction: column; gap: .5rem; }
.cf-results__jornada {
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: var(--cf-muted2); padding: .6rem 0 .3rem;
  border-bottom: 1px solid var(--cf-border); margin-top: .75rem;
}
.cf-results__jornada:first-child { margin-top: 0; }
.cf-match {
  background: var(--cf-surface) !important;
  border: 1px solid var(--cf-border); border-radius: 12px;
  padding: .9rem 1.1rem; transition: border-color .2s, box-shadow .2s;
}
.cf-match:hover { border-color: var(--cf-border2); box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.cf-match__date  { font-size: .7rem; color: var(--cf-muted2); margin-bottom: .55rem; }
.cf-match__body  { display: flex; align-items: center; gap: .65rem; }
.cf-match__team  { flex: 1; font-size: .92rem; font-weight: 700; color: var(--cf-text) !important; line-height: 1.3; }
.cf-match__team--local { text-align: right; }
.cf-match__team--visit { text-align: left;  }
.cf-match__team--win   { color: var(--cf-green) !important; }
.cf-match__score {
  background: var(--cf-surface2); color: var(--cf-text) !important;
  border-radius: 8px; padding: .3rem .9rem;
  font-weight: 900; font-size: 1.05rem;
  white-space: nowrap; text-align: center; min-width: 68px; flex-shrink: 0;
  border: 1px solid var(--cf-border); font-variant-numeric: tabular-nums;
}
.cf-match__score--pending { color: var(--cf-muted2) !important; font-size: .88rem; }
.cf-match__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--cf-border);
  font-size: .75rem; gap: .5rem; flex-wrap: wrap; color: var(--cf-muted2);
}

/* ── Stadion special cards ─────────────────────────────────── */
.cf-stadium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.cf-stadium-stat {
  background: var(--cf-surface2);
  border: 1px solid var(--cf-border); border-radius: var(--cf-r);
  padding: 1.1rem; display: flex; flex-direction: column; gap: .3rem;
}
.cf-stadium-stat__label {
  font-size: .67rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--cf-muted2);
}
.cf-stadium-stat__value {
  font-size: 1.5rem; font-weight: 900; color: var(--cf-green);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cf-stadium-stat__value.blue  { color: var(--cf-blue); }
.cf-stadium-stat__value.white { color: var(--cf-text); }
.cf-stadium-field-svg {
  width: 100%; max-width: 440px; height: auto;
  display: block; margin: 1.25rem auto;
  filter: drop-shadow(0 4px 16px rgba(0,200,100,.15));
}

/* ================================================================
   COMPARE
   ================================================================ */
.calcio-compare { }
.cf-compare-hero {
  background: linear-gradient(145deg, #0a1420 0%, #0b1c38 55%, #091610 100%);
  border-radius: var(--cf-r2); padding: 2rem; margin-bottom: 1.25rem;
  border: 1px solid var(--cf-border); position: relative; overflow: hidden;
}
.cf-compare-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,230,118,.09) 0%, transparent 60%);
}
.cf-compare-hero__badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .7rem; border-radius: 99px; margin-bottom: .65rem;
  background: rgba(0,230,118,.12); border: 1px solid rgba(0,230,118,.25);
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--cf-green);
  position: relative; z-index: 1;
}
.cf-compare-hero__title {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-weight: 900;
  color: var(--cf-text); margin: 0 0 .3rem;
  letter-spacing: -.02em; position: relative; z-index: 1;
}
.cf-compare-hero__sub { font-size: .83rem; color: var(--cf-muted2); position: relative; z-index: 1; margin: 0; }
.cf-compare-players {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 1.5rem; position: relative; z-index: 1;
}
.cf-compare-player {
  display: flex; align-items: center; gap: .85rem;
  background: rgba(255,255,255,.04); border: 1px solid var(--cf-border);
  border-radius: var(--cf-r); padding: .75rem 1rem;
  flex: 1; min-width: 160px;
}
.cf-compare-player__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cf-compare-player__dot.p0 { background: var(--p0); box-shadow: 0 0 8px var(--p0); }
.cf-compare-player__dot.p1 { background: var(--p1); box-shadow: 0 0 8px var(--p1); }
.cf-compare-player__dot.p2 { background: var(--p2); box-shadow: 0 0 8px var(--p2); }
.cf-compare-player__dot.p3 { background: var(--p3); box-shadow: 0 0 8px var(--p3); }
.cf-compare-player__dot.p4 { background: var(--p4); box-shadow: 0 0 8px var(--p4); }
.cf-compare-player__dot.p5 { background: var(--p5); box-shadow: 0 0 8px var(--p5); }
.cf-compare-player__name { font-size: .9rem; font-weight: 800; color: var(--cf-text); line-height: 1.2; }
.cf-compare-player__sub  { font-size: .73rem; color: var(--cf-muted2); margin-top: .1rem; }

.cf-compare-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cf-compare-tab {
  display: flex; align-items: center; gap: .4rem; padding: .58rem 1.1rem;
  border-radius: 99px; border: 1.5px solid var(--cf-border);
  background: var(--cf-surface); color: var(--cf-muted2) !important;
  font-family: inherit; font-size: .83rem; font-weight: 700;
  cursor: pointer; transition: all .18s; white-space: nowrap;
}
.cf-compare-tab:hover { border-color: var(--cf-border2); color: var(--cf-text) !important; }
.cf-compare-tab.active {
  background: var(--cf-green-dim); border-color: rgba(0,230,118,.3);
  color: var(--cf-green) !important;
}
.cf-compare-pane        { display: none; }
.cf-compare-pane.active { display: block; animation: cf-in .2s ease; }

.cf-metric-grid { display: grid; gap: 1rem; }
.cf-metric-row  {
  background: var(--cf-surface); border: 1px solid var(--cf-border);
  border-radius: var(--cf-r); padding: 1rem 1.25rem;
}
.cf-metric-label {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--cf-muted2); margin-bottom: .75rem;
}
.cf-metric-bars     { display: flex; flex-direction: column; gap: .55rem; }
.cf-metric-bar-row  { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: .65rem; }
.cf-metric-name     { font-size: .78rem; color: var(--cf-muted2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-metric-bar-wrap { height: 8px; border-radius: 99px; background: var(--cf-surface3); overflow: hidden; }
.cf-metric-bar {
  height: 100%; border-radius: 99px; transform-origin: left;
  animation: cf-bar .7s cubic-bezier(.22,1,.36,1) both;
}
.cf-metric-bar.p0 { background: var(--p0); } .cf-metric-bar.p1 { background: var(--p1); }
.cf-metric-bar.p2 { background: var(--p2); } .cf-metric-bar.p3 { background: var(--p3); }
.cf-metric-bar.p4 { background: var(--p4); } .cf-metric-bar.p5 { background: var(--p5); }
.cf-metric-val { font-size: .85rem; font-weight: 700; color: var(--cf-text); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* Charts */
.calcio-chart-wrap {
  background: var(--cf-surface); border: 1px solid var(--cf-border);
  border-radius: var(--cf-r2); overflow: hidden;
}
.calcio-chart-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--cf-border);
}
.calcio-chart-title { font-size: .9rem; font-weight: 800; color: var(--cf-text); }
.calcio-chart-sub   { font-size: .75rem; color: var(--cf-muted2); margin-top: .1rem; }
.calcio-chart-body  { padding: 0 .5rem 1rem; }
.calcio-chart-svg   { width: 100%; height: auto; display: block; overflow: visible; }

.calcio-radar-wrap  { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 1.5rem; }
.calcio-radar       { width: 100%; max-width: 360px; height: auto; display: block; filter: drop-shadow(0 4px 20px rgba(0,0,0,.4)); }
.calcio-radar__grid { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 1; }
.calcio-radar__axis { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.calcio-radar__label { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; fill: #8b95b0; }
.calcio-radar__poly  { fill-opacity: .18; stroke-width: 2.5; }
.calcio-radar__poly.p0 { fill: var(--p0); stroke: var(--p0); }
.calcio-radar__poly.p1 { fill: var(--p1); stroke: var(--p1); }
.calcio-radar__poly.p2 { fill: var(--p2); stroke: var(--p2); }
.calcio-radar__poly.p3 { fill: var(--p3); stroke: var(--p3); }
.calcio-radar__poly.p4 { fill: var(--p4); stroke: var(--p4); }
.calcio-radar__poly.p5 { fill: var(--p5); stroke: var(--p5); }

.calcio-line__grid  { stroke: rgba(255,255,255,.05); stroke-width: 1; }
.calcio-line__axis  { stroke: rgba(255,255,255,.1);  stroke-width: 1; }
.calcio-line__lbl   { font-family: 'DM Mono', monospace; font-size: 9px; fill: #4b5673; }
.calcio-line__poly  { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.calcio-line__area  { opacity: .07; }
.calcio-line__poly.p0, .calcio-line__area.p0 { stroke: var(--p0); fill: var(--p0); }
.calcio-line__poly.p1, .calcio-line__area.p1 { stroke: var(--p1); fill: var(--p1); }
.calcio-line__poly.p2, .calcio-line__area.p2 { stroke: var(--p2); fill: var(--p2); }
.calcio-line__poly.p3, .calcio-line__area.p3 { stroke: var(--p3); fill: var(--p3); }
.calcio-line__poly.p4, .calcio-line__area.p4 { stroke: var(--p4); fill: var(--p4); }
.calcio-line__dot   { stroke-width: 2; }
.calcio-line__dot.p0 { fill: var(--cf-surface); stroke: var(--p0); }
.calcio-line__dot.p1 { fill: var(--cf-surface); stroke: var(--p1); }
.calcio-line__dot.p2 { fill: var(--cf-surface); stroke: var(--p2); }
.calcio-line__dot.p3 { fill: var(--cf-surface); stroke: var(--p3); }
.calcio-line__dot.p4 { fill: var(--cf-surface); stroke: var(--p4); }

.calcio-legend {
  display: flex; flex-wrap: wrap; gap: .6rem 1.25rem;
  justify-content: center; padding: .75rem 1.25rem 1.25rem;
}
.calcio-legend__item { display: flex; align-items: center; gap: .45rem; font-size: .83rem; font-weight: 600; color: var(--cf-text); }
.calcio-legend__swatch { width: 10px; height: 10px; border-radius: 99px; flex-shrink: 0; }
.calcio-legend__swatch.p0 { background: var(--p0); }
.calcio-legend__swatch.p1 { background: var(--p1); }
.calcio-legend__swatch.p2 { background: var(--p2); }
.calcio-legend__swatch.p3 { background: var(--p3); }
.calcio-legend__swatch.p4 { background: var(--p4); }
.calcio-legend__swatch.p5 { background: var(--p5); }

.cf-metric-select { display: flex; gap: .4rem; flex-wrap: wrap; padding: .75rem 1.25rem; border-bottom: 1px solid var(--cf-border); }
.cf-metric-btn {
  padding: .3rem .75rem; border-radius: 99px; border: 1px solid var(--cf-border);
  background: transparent; color: var(--cf-muted2);
  font-family: inherit; font-size: .76rem; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.cf-metric-btn:hover  { border-color: var(--cf-border2); color: var(--cf-text); }
.cf-metric-btn.active { background: var(--cf-green-dim); border-color: rgba(0,230,118,.3); color: var(--cf-green); }

.cf-section-head {
  display: flex; align-items: center; gap: .75rem;
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--cf-muted2); margin-bottom: 1rem;
}
.cf-section-head::before, .cf-section-head::after { content: ''; flex: 1; height: 1px; background: var(--cf-border); }

/* Misc shared */
.calcio-wrap  { width: 100%; }
.calcio-row   { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.calcio-list  { display: grid; gap: 1rem; }
.calcio-tabs  { display: flex; flex-direction: column; }
.calcio-h1    { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 900; color: var(--cf-text); margin: .3rem 0; }
.calcio-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem 1.2rem; border-radius: 99px; border: 1.5px solid var(--cf-border);
  text-decoration: none; font-family: inherit; font-weight: 600; font-size: .88rem;
  cursor: pointer; transition: all .18s; color: var(--cf-text) !important;
}
.calcio-btn--ghost { background: transparent; }
.calcio-btn--ghost:hover { background: var(--cf-surface2); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .cf-league__hero    { padding: 1.5rem 1.5rem 1.35rem; border-radius: 12px 12px 0 0; }
  .cf-league__filters { padding: 1.25rem; }
  .cf-league__row     { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .cf-league__grid    { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .cf-league__count   { width: 100%; text-align: center; margin-left: 0; }
  .calcio-hero        { padding: 1.75rem 1.5rem 0; }
  .calcio-statbar     { margin: 1.5rem -1.5rem 0; }
  .calcio-tab-nav     { padding: 0 1rem; }
  .calcio-panel       { padding: 1.25rem; }
  .calcio-kv th       { width: 120px; }
  .cf-metric-bar-row  { grid-template-columns: 90px 1fr auto; }
  .cf-stadium-grid    { grid-template-columns: repeat(3, 1fr); }
  .cf-compare-players { flex-direction: column; }
}

@media (max-width: 540px) {
  .cf-league__row    { grid-template-columns: 1fr; }
  .cf-league__grid   { grid-template-columns: 1fr; }
  .cf-league__actions { flex-direction: column; }
  .cf-league__btn    { width: 100%; justify-content: center; }
  .cf-league__hero-ico { display: none; }
  .calcio-hero       { padding: 1.5rem 1.25rem 0; }
  .calcio-hero__left { flex-direction: column; align-items: center; text-align: center; }
  .calcio-badges     { justify-content: center; }
  .calcio-statbar    { margin: 1.25rem -1.25rem 0; }
  .calcio-stat       { min-width: 68px; padding: .8rem .35rem; }
  .calcio-stat__val  { font-size: 1.3rem; }
  .calcio-panel      { padding: 1rem; }
  .cf-match__body    { flex-direction: column; gap: .4rem; align-items: center; }
  .cf-match__team    { text-align: center !important; width: 100%; }
  .cf-match__score   { width: 80px; }
  .cf-compare-hero   { padding: 1.25rem; }
  .cf-compare-tabs   { gap: .3rem; }
  .cf-compare-tab    { padding: .5rem .9rem; font-size: .8rem; }
  .cf-metric-bar-row { grid-template-columns: 70px 1fr auto; }
  .cf-stadium-grid   { grid-template-columns: 1fr 1fr; }
  .calcio-radar      { max-width: 280px; }
  .calcio-kv th      { width: 100px; }
  .calcio-kv th, .calcio-kv td { padding: .55rem .75rem; font-size: .83rem; }
  .cf-compare-player { min-width: 0; flex: 1 1 45%; }
}

@media (max-width: 360px) {
  .cf-league__title { font-size: 1.15rem; }
  .calcio-h         { font-size: 1.1rem;  }
  .calcio-stat__val { font-size: 1.1rem;  }
  .calcio-radar     { max-width: 240px;   }
  .cf-stadium-grid  { grid-template-columns: 1fr; }
}

@media (hover: none) and (pointer: coarse) {
  .cf-comp-card:active { transform: translateY(-2px); }
  .cf-league__btn, .cf-league__sel, .cf-league__input,
  .cf-search__input, .calcio-tab, .cf-compare-tab { min-height: 44px; }
}

@media print {
  .cf-league__filters, .cf-league__pager, .cf-league__actions,
  .calcio-tab-nav, .cf-compare-tabs { display: none !important; }
  .calcio-card { box-shadow: none !important; }
}

/* Compare picker */
.calcio-picker__row{display:flex;gap:.6rem;align-items:center}
.calcio-picker__input{flex:1;min-width:220px}
.calcio-picker__pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.calcio-pill{border:1px solid rgba(0,0,0,.12);background:rgba(0,0,0,.02);border-radius:999px;padding:.35rem .65rem;font-weight:700;cursor:pointer}
.calcio-picker__dd{position:relative;margin-top:.5rem;border:1px solid rgba(0,0,0,.12);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--calcio-shadow);max-height:280px;overflow:auto}
.calcio-picker__ddrow{width:100%;text-align:left;display:grid;grid-template-columns:24px 1fr;gap:.55rem;padding:.6rem .75rem;border:0;background:transparent;cursor:pointer}
.calcio-picker__ddrow:hover{background:rgba(0,0,0,.04)}
.calcio-picker__ico{font-size:18px;line-height:1.2}
.calcio-picker__t{font-weight:800}
.calcio-picker__m{grid-column:2/3;font-size:12px;color:rgba(0,0,0,.6)}