/* =========================
   Veterans League - Global UI
   Clean spacing + VPSF-like layout
   ========================= */

:root{
  /* colors */
  --bg0: #070a14;
  --bg1: rgba(255,255,255,.03);
  --bg2: rgba(0,0,0,.20);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --accent: rgba(0,255,160,.80);
  --accentBg: rgba(0,255,160,.10);
  --accentStroke: rgba(0,255,160,.25);

  /* spacing */
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;

  --pad-xs: 10px;
  --pad-sm: 14px;
  --pad-md: 18px;
  --pad-lg: 22px;
  --pad-xl: 28px;

  --gap-xs: 10px;
  --gap-sm: 14px;
  --gap-md: 18px;
  --gap-lg: 22px;
  --gap-xl: 28px;

  color-scheme: dark;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

/* -------- Kill white flash (global) -------- */
html{
  min-height: 100%;
  background: radial-gradient(
    1200px 600px at 20% 10%,
    #24173f 0%,
    #120b22 45%,
    #07040f 100%
  ) !important;
}

body{
  margin:0;
  min-height:100%;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: transparent !important;
}

/* asıl site arka planı (body transparent olduğu için “alt layer” olarak burada) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 700px at 20% 12%, rgba(120,60,255,.18), transparent 60%),
    radial-gradient(900px 600px at 70% 15%, rgba(0,255,160,.10), transparent 60%),
    radial-gradient(900px 700px at 45% 85%, rgba(20,40,120,.35), transparent 60%),
    linear-gradient(180deg, #050713, #040513);
}

/* form elemanları bazen beyaz flash yapar */
input, select, textarea, button{
  color-scheme: dark;
}

/* ====== Layout ====== */
.shell{
  width:min(1180px, calc(100% - 40px));
  margin: 22px auto 60px;
  background: transparent !important;
}

/* Global cards */
.card{
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  padding: var(--pad-xl);
  position: relative;
}

/* ====== Topbar ====== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--gap-lg);
  margin-bottom: var(--gap-lg);
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.logoMark{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(120,60,255,.20);
  border: 1px solid rgba(120,60,255,.28);
}

.brandTitle{
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.1;
}

.brandSub{
  margin-top: 2px;
  font-size: 12px;
  opacity: .75;
  white-space: nowrap;
}

.tabs{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.tab{
  text-decoration:none;
  color: inherit;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  font-weight: 650;
  opacity: .95;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
}
.tab.active{
  border-color: rgba(120,60,255,.35);
  background: rgba(120,60,255,.16);
}

/* Home page: hide top-right tabs */
body.home .tabs{ display:none; }

/* ====== Typography ====== */
.heroTitle{
  font-size: 44px;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.heroSub{
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 78ch;
}

.h3{ font-size: 18px; font-weight: 850; }
.small{ font-size: 12px; }
.muted{ color: var(--muted); }

.label{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
}

/* ====== Chips / Pills ====== */
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  width: fit-content;
  font-size: 12px;
  opacity: .96;
}

.chip.green{
  border-color: var(--accentStroke);
  background: var(--accentBg);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 700;
}

.pill.green{
  border-color: var(--accentStroke);
  background: var(--accentBg);
}

/* ====== Buttons (VPSF-like) ====== */
.btnRow{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn{
  text-decoration:none;
  color: inherit;
  display:inline-flex;
  align-items:center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  font-weight: 750;

  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
}
.btn:active{ transform: translateY(0px); }

.btn.primary{
  border-color: var(--accentStroke);
  background: rgba(0,255,160,.14);
}
.btn.primary:hover{
  background: rgba(0,255,160,.18);
}

.btn.ghost{
  background: rgba(0,0,0,.12);
}

/* ====== Feature tiles ====== */
.tileRow{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.tile{
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.14);
  padding: 16px;
}
.tileTitle{
  font-weight: 850;
}
.tileSub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* ====== Panels ====== */
.panel{
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.16);
}

/* ====== Empty box ====== */
.empty-box{
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed var(--stroke2);
  background: rgba(255,255,255,.03);
}

/* ====== Fixtures shared (keeps your layout but more airy) ====== */
.fixtures-board{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.board-col{ display:flex; flex-direction:column; gap: 12px; }
.board-head{ display:flex; align-items:center; justify-content:space-between; padding: 0 4px; }
.board-list{ display:flex; flex-direction:column; gap: 14px; }

.matchLink{ text-decoration:none; color:inherit; display:block; }

.match-row{
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  transition: transform .12s ease;
  position: relative;
}
.matchLink:hover .match-row{ transform: translateY(-1px); }
.match-row.finished{ background: rgba(0,0,0,.12); }

.match-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 12px;
}

.match-mid{
  display:grid;
  grid-template-columns: 1fr 160px 1fr;
  gap: 14px;
  align-items:center;
}

.side{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
}
.side.right{ justify-content:flex-end; }

.sideName{
  font-size: 16px;
  font-weight: 850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mini-logo{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit:cover;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.03);
  flex: 0 0 auto;
}

.scorebox{
  text-align:center;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
}
.score{
  margin-top: 6px;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -.02em;
}

.match-foot{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
}

/* ====== Responsive ====== */
@media (max-width: 980px){
  .shell{ width: min(980px, calc(100% - 26px)); margin-top: 16px; }
  .heroTitle{ font-size: 38px; }
  .tileRow{ grid-template-columns: 1fr; }
  .fixtures-board{ grid-template-columns: 1fr; }
  .match-mid{ grid-template-columns: 1fr; }
  .scorebox{ text-align:left; }
  .side.right{ justify-content:flex-start; }
}

/* ===== LIVE match glow + pulse (VPSF-style) ===== */
.match-row.live{
  border-color: rgba(0,255,160,.35);
  box-shadow:
    0 0 0 1px rgba(0,255,160,.18),
    0 14px 40px rgba(0,255,160,.12),
    inset 0 0 0 1px rgba(0,255,160,.08);
  animation: livePulse 2.6s ease-in-out infinite;
}

.match-row.live .scorebox{
  border-color: rgba(0,255,160,.35);
  background: rgba(0,255,160,.08);
}

@keyframes livePulse{
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50%      { transform: translateY(-1px); filter: brightness(1.06); }
}

/* ===== Finished winner highlight ===== */
.sideName.winner{
  color: rgba(0,255,160,.95);
  text-shadow: 0 0 18px rgba(0,255,160,.22);
}
.sideName.draw{ opacity: .95; }

/* ===== Hover glow (purple) ===== */
.match-row::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:20px;
  pointer-events:none;
  opacity:0;
  transition: opacity .18s ease, filter .18s ease;
  background: radial-gradient(700px 220px at 35% 20%,
    rgba(160, 110, 255, .22),
    rgba(160, 110, 255, .10) 35%,
    rgba(0,0,0,0) 70%
  );
  filter: blur(10px);
}
.match-row:hover::after{ opacity:1; }

/* =========================
   PAGE TRANSITION (single source of truth)
   ========================= */

#pageTransition{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;

  opacity: 0;
  transition: opacity 0.95s ease; /* yavaş */
  background: radial-gradient(
    1200px 700px at 18% 12%,
    rgba(140, 90, 255, .28) 0%,
    rgba(18, 10, 36, .92) 45%,
    rgba(7, 4, 15, 1) 100%
  );
}

#pageTransition.show{
  opacity: 1;
}

/* ===== Fixtures: right-side ID + hover "View match" ===== */
.matchTopRight{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  text-align:right;
}

.viewMatch{
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .18s ease, transform .18s ease;
  color: rgba(0,255,160,.88);
}

.match-row:hover .viewMatch{
  opacity: 1;
  transform: translateX(0px);
}

/* finished kartlarda da aynı hover davranışı */
.match-row.finished .viewMatch{
  color: rgba(160,110,255,.92);
}

/* =========================
   UI POLISH PATCH (VPSF-like)
   Paste at END of style.css
   ========================= */

/* 1) genel spacing biraz daha nefesli */
:root{
  --pad-xl: 30px;
  --gap-lg: 26px;
  --gap-xl: 34px;
}

/* 2) container üst boşluk + satır araları */
.shell{
  margin: 28px auto 70px;
}

/* 3) Topbar: daha “glass”, daha airy */
.topbar{
  position: sticky;
  top: 14px;
  z-index: 20;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,10,24,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  margin-bottom: 22px;
}

/* 4) Brand daha premium */
.logoMark{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(140,90,255,.22);
  border: 1px solid rgba(140,90,255,.30);
  box-shadow: 0 10px 26px rgba(140,90,255,.18);
}

.brandTitle{
  font-size: 15px;
}

.brandSub{
  margin-top: 3px;
  opacity: .72;
}

/* 5) Tabs: daha fazla boşluk + daha “pill” hissi */
.tabs{
  gap: 12px;
}

.tab{
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
  font-weight: 750;
  letter-spacing: -.01em;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

.tab.active{
  background: rgba(140,90,255,.18);
  border-color: rgba(140,90,255,.38);
  box-shadow: 0 10px 26px rgba(140,90,255,.18);
}

/* 6) Cards: biraz daha “soft” ve boşluklu */
.card{
  padding: 30px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.085);
  background: rgba(0,0,0,.20);
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
}

/* 7) Hero metinleri: VPSF gibi net */
.heroTitle{
  font-size: 48px;
  letter-spacing: -0.035em;
  line-height: 1.01;
}

.heroSub{
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.6;
  opacity: .92;
}

/* 8) Chip/Pill daha “clean” */
.chip, .pill{
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
}

.chip.green, .pill.green{
  border-color: rgba(0,255,160,.30);
  background: rgba(0,255,160,.10);
}

/* 9) Buttons: daha premium */
.btn{
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

.btn.primary{
  border-color: rgba(0,255,160,.28);
  background: rgba(0,255,160,.14);
}

.btn:hover{
  box-shadow: 0 16px 36px rgba(0,0,0,.26);
}

/* 10) Fixtures/Teams grid boşluklarını artır */
.fixtures-board{ gap: 18px; margin-top: 22px; }
.board-list{ gap: 16px; }

.match-row{
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.09);
}

.match-mid{
  grid-template-columns: 1fr 170px 1fr;
  gap: 16px;
}

.scorebox{
  border-radius: 18px;
  padding: 14px 16px;
}

.mini-logo{
  width: 44px;
  height: 44px;
}

/* 11) Teams kartları logo delirmesin: sabitle */
.team-logo{
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important; /* rounded-square hissi */
  object-fit: cover !important;
  flex: 0 0 auto !important;
}

/* Teams card iç hizalama daha düzgün */
.team-left{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
}

/* 12) Hover glow biraz daha kontrollü (çok basmasın) */
.match-row::after{
  filter: blur(12px);
  opacity: 0;
}
.match-row:hover::after{
  opacity: .95;
}

/* 13) Responsive: daha temiz */
@media (max-width: 980px){
  .topbar{ top: 10px; padding: 12px 12px; }
  .heroTitle{ font-size: 40px; }
  .match-mid{ grid-template-columns: 1fr; }
  .scorebox{ text-align:left; }
}

/* 14) Home page: tabs gizleme sende vardı, aynı kalsın */
body.home .tabs{ display:none; }

/* =========================
   Tiny Detail Polish (A)
   Paste at END of style.css
   ========================= */

/* --- Fixtures: match-top sağ blok daha temiz --- */
.matchTopRight{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 4px;
  text-align:right;
  min-width: 140px;
}

.matchTopRight .small{
  line-height: 1.1;
}

/* ID yazısı daha "soft" */
.matchTopRight .muted.small:first-child{
  opacity: .62;
  letter-spacing: .02em;
}

/* --- Fixtures: footer sağdaki View match hover daha premium --- */
.viewMatch{
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.match-row:hover .viewMatch{
  opacity: 1;
  transform: translateX(0px);
  filter: brightness(1.05);
}

/* Upcoming/finished renk ayrımı */
.match-row .viewMatch{ color: rgba(0,255,160,.88); }
.match-row.finished .viewMatch{ color: rgba(160,110,255,.92); }

/* Match foot iki tarafı daha düzgün */
.match-foot{
  justify-content: space-between;
}
.match-foot .muted{
  max-width: 70%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* --- Fixtures: side text biraz daha hizalı --- */
.sideText{
  min-width:0;
}
.sideText .label{
  margin-bottom: 2px;
}

/* --- Teams: kart düzeni VPSF gibi daha temiz --- */
.teamcard{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.16);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.teamcard:hover{
  transform: translateY(-2px);
  border-color: rgba(140,90,255,.22);
  background: rgba(0,0,0,.18);
}

/* Sol blok nefes */
.team-left{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width:0;
}

/* Logo sabit + rounded-square */
.team-logo{
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.03) !important;
  flex: 0 0 auto !important;
}

/* Team info tipografi */
.team-info .name{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 34ch;
}
.team-info .short{
  margin-top: 4px;
  opacity: .7;
  font-weight: 800;
  font-size: 12px;
}

/* City chip daha küçük ve düzgün */
.team-info .chip{
  margin-top: 10px;
  opacity: .92;
}

/* Sağ blok: flag + ülke, düzgün hizalama */
.team-right{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Flag daha şık */
.flag{
  width: 20px;
  height: 14px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* “Country: …” metni */
.team-right > div{
  font-size: 12px;
  font-weight: 850;
  opacity: .9;
}

/* Teams grid spacing daha nefesli */
.teamsGrid{
  gap: 16px !important;
  margin-top: 18px !important;
}

/* Mobile: sağ blok alta insin */
@media (max-width: 720px){
  .teamcard{
    flex-direction: column;
    align-items: stretch;
  }
  .team-right{
    justify-content: flex-start;
    width: 100%;
  }
  .team-info .name{
    max-width: 100%;
  }
  .match-foot .muted{
    max-width: 62%;
  }
}

/* =========================
   VPSF-like polish (Home-first)
   paste at END of style.css
   ========================= */

/* 1) genel ölçüleri biraz büyüt */
:root{
  --r-sm: 16px;
  --r-md: 20px;
  --r-lg: 26px;

  --pad-xs: 12px;
  --pad-sm: 16px;
  --pad-md: 20px;
  --pad-lg: 26px;
  --pad-xl: 32px;

  --gap-xs: 12px;
  --gap-sm: 16px;
  --gap-md: 20px;
  --gap-lg: 26px;
  --gap-xl: 34px;
}

/* 2) container daha “wide” + üst boşluk */
.shell{
  width: min(1240px, calc(100% - 56px));
  margin: 28px auto 70px;
}

/* 3) kart hissi: daha yumuşak stroke + daha temiz shadow */
.card{
  padding: var(--pad-xl);
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.20);
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
}

/* 4) topbar daha ferah */
.topbar{
  margin-bottom: var(--gap-xl);
}
.brandSub{
  font-size: 12.5px;
  opacity: .72;
}
.tab{
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
}

/* 5) hero tipografi: VPSF gibi “büyük, nefes alan” */
.heroTitle{
  font-size: 54px;
  font-weight: 950;
  letter-spacing: -0.035em;
  line-height: 1.01;
}
.heroSub{
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 76ch;
  opacity: .86;
}

/* 6) home hero için özel spacing */
.heroHome{
  padding: 34px;
}
.heroButtons{
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 7) butonlar: VPSF hissi (yüksek, daha “pillow”) */
.btn, .btnGreen{
  padding: 13px 18px;
  border-radius: 18px;
  font-weight: 850;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.045);
}
.btnGreen{
  border: 1px solid rgba(0,255,160,.22);
  background: rgba(0,255,160,.16);
}

/* 8) 3’lü feature kutuları daha geniş, daha yumuşak */
.miniGrid{
  margin-top: 20px;
  gap: 14px;
}
.miniCard{
  border-radius: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.miniTitle{ font-weight: 900; }
.miniText{ margin-top: 7px; font-size: 13.5px; opacity: .78; line-height: 1.5; }

/* 9) alt kartlar arası boşluk */
.card + .card{
  margin-top: 18px;
}

/* 10) responsive: VPSF gibi kırılım */
@media (max-width: 980px){
  .shell{ width: min(980px, calc(100% - 28px)); margin-top: 18px; }
  .heroTitle{ font-size: 40px; }
  .heroHome{ padding: 26px; }
  .miniGrid{ grid-template-columns: 1fr; }
}

/* =========================
   HOME: VPSF layout FIX (guarantee)
   paste at END of style.css
   ========================= */

/* hero kartın içi daha "VPSF" */
.heroHome{
  padding: 28px !important;
}

/* başlık biraz daha dengeli (çok büyümesin) */
.heroHome .heroTitle{
  font-size: 46px !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
  max-width: 22ch;
}

/* açıklama VPSF gibi, daha rahat */
.heroHome .heroSub{
  margin-top: 10px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  max-width: 72ch;
}

/* butonlar */
.heroHome .heroButtons{
  margin-top: 18px !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.heroHome .btn,
.heroHome .btnGreen{
  padding: 12px 16px !important;
  border-radius: 16px !important;
  font-weight: 850 !important;
}

/* ====== ASIL PROBLEM: miniGrid tekrar 3 kolon ====== */
.heroHome .miniGrid{
  margin-top: 16px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* miniCard: VPSF gibi daha kompakt */
.heroHome .miniCard{
  border-radius: 16px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.14) !important;
}

/* kartların iç yazıları */
.heroHome .miniTitle{
  font-weight: 900 !important;
  font-size: 14px !important;
}

.heroHome .miniText{
  margin-top: 6px !important;
  font-size: 13px !important;
  opacity: .78 !important;
  line-height: 1.45 !important;
}

/* mobile kırılım */
@media (max-width: 900px){
  .heroHome .heroTitle{ font-size: 36px !important; }
  .heroHome .miniGrid{ grid-template-columns: 1fr !important; }
}

/* =========================
   VPSF-like polish pack (A)
   - smaller typography
   - airier spacing
   - slimmer navbar + tabs
   - fixes visited/underline weirdness
   ========================= */

/* shell daha geniş -> elemanlar daha sağ/sol "uzakta" görünür */
.shell{
  width: min(1320px, calc(100% - 88px));
  margin: 18px auto 60px;
}

/* topbar: daha ince, daha az "kutu" hissi */
.topbar{
  margin-bottom: 26px;
  gap: 18px;
}

/* brand alanındaki çerçeveyi kaldırıp VPSF gibi "hafif" yap */
.brand{
  padding: 0;
  border: none;
  background: transparent;
}

/* logo biraz küçülsün */
.logoMark{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 14px;
}

/* başlık ve alt yazı daha küçük ve ince */
.brandTitle{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brandSub{
  font-size: 11px;
  opacity: .68;
}

/* tabs: daha ince, daha zarif */
.tabs{
  gap: 8px;
}
.tab{
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 625;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.tab:hover{
  background: rgba(255,255,255,.05);
}
.tab.active{
  border-color: rgba(160,110,255,.35);
  background: rgba(160,110,255,.13);
}

/* HERO: VPSF gibi daha küçük/ince + daha ferah boşluklar */
.heroTitle{
  font-size: 38px;          /* eskisi 44 */
  font-weight: 900;         /* 950 yerine daha "ince" hissiyat */
  letter-spacing: -0.025em;
  line-height: 1.06;
}
.heroSub{
  margin-top: 16px;         /* chip ile title arasını da biraz açacağız */
  font-size: 13.5px;
  line-height: 1.55;
  opacity: .78;
  max-width: 86ch;
}

/* chip ile title arasına VPSF boşluğu */
.card .chip{ margin-bottom: 14px; }

/* butonlar: visited/underline/pembe olayı fix */
a, a:visited{
  color: inherit;
  text-decoration: none;
}

/* Home’daki buton sınıfların varsa: yazı rengi sabit kalsın */
.btnGreen, .btnGreen:visited{
  color: rgba(7,10,20,.92) !important;       /* VPSF: yeşil butonda koyu yazı gibi */
  text-decoration: none !important;
}
.btnGreen{
  background: rgba(0, 255, 170, 0.616) !important;
  border-color: rgba(0, 255, 170, 0.623) !important;
}
.btnGreen:hover{ filter: brightness(1.06); }

/* normal .btn linklerinin de visited’da sapıtmasını engelle */
.btn, .btn:visited{
  color: rgba(255,255,255,.90) !important;
  text-decoration: none !important;
}

/* küçük kartlar (tile) daha ince dursun */
.tile{
  padding: 14px;
  border-color: rgba(255,255,255,.09);
  background: rgba(0,0,0,.13);
}
.tileTitle{ font-size: 14px; font-weight: 850; }
.tileSub{ font-size: 12.5px; opacity: .75; }

/* ===== List reveal animation (Teams gibi) ===== */
.revealItem{
  opacity: 0;
  transform: translateY(8px);
  animation: revealIn .55s ease forwards;
  will-change: opacity, transform;
}

@keyframes revealIn{
  to{ opacity: 1; transform: translateY(0); }
}

/* hareket hassasiyeti olanlar için */
@media (prefers-reduced-motion: reduce){
  .revealItem{ animation: none; opacity: 1; transform: none; }
}

/* === FIXTURES LIST FADE-IN === */
.revealItem {
  opacity: 0;
  transform: translateY(10px);
  animation: revealIn 0.55s ease forwards;
}

@keyframes revealIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================
   PAGE TRANSITION + REVEAL (FINAL)
   ========================= */

/* Beyaz flash öldür */
:root{ color-scheme: dark; }

html{
  min-height:100%;
  background: radial-gradient(
    1200px 600px at 20% 10%,
    #24173f 0%,
    #120b22 45%,
    #07040f 100%
  ) !important;
}

body{
  min-height:100%;
  background: transparent !important;
}

/* ===== Overlay Transition ===== */
#pageTransition{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;

  opacity: 0;
  transition: opacity 0.70s ease; /* geçiş süresi */
  background: radial-gradient(
    1200px 700px at 18% 12%,
    rgba(140, 90, 255, .28) 0%,
    rgba(18, 10, 36, .92) 45%,
    rgba(7, 4, 15, 1) 100%
  );

  transform:none !important;
  filter:none !important;
}

#pageTransition.show{ opacity: 1; }

/* ===== Reveal (lists/cards appear smoothly) ===== */
.revealItem{
  opacity: 0;
  transform: translateY(10px);
  animation: revealIn .55s ease forwards;
}

@keyframes revealIn{
  to{ opacity:1; transform: translateY(0); }
}

/* İstersen daha “yumuşak” olsun diye */
@media (prefers-reduced-motion: reduce){
  #pageTransition{ transition: none; }
  .revealItem{ animation:none; opacity:1; transform:none; }
}

/* --- TEAMS: searchbar polish (VPSF-like) --- */
.searchbar{
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.searchWrap{
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.searchInput{
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font-size: 14px;
}

/* Butonun "dev blok" gibi büyümesini engelle */
.btnGreen{
  flex: 0 0 auto;
  height: 44px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(0,255,160,.25);
  background: rgba(0,255,160,.18);
  color: inherit;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

/* Filter select düzgün dursun */
.filters{
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.select{
  width: 100%;
  max-width: 360px;
  height: 44px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: inherit;
  outline: none;
}

@media (max-width: 720px){
  .searchbar{ flex-direction: column; align-items: stretch; }
  .btnGreen{ width: 100%; }
  .select{ max-width: 100%; }
}

.teamcard,
.vpsfCard{
  cursor: pointer;
}

.brandLogo{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  flex: 0 0 auto;
}

/* ---------- PLAYERS (VPSF vibe) ---------- */
.playersGrid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.playerCard{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  overflow:hidden;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, filter .15s ease;
}
.playerCard:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  filter: brightness(1.02);
}
.playerLeft{ display:flex; align-items:center; gap:14px; min-width:0; }
.playerInfo{ min-width:0; }
.playerName{
  font-size:16px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.playerMeta{ opacity:.75; margin-top:2px; font-size:12px; }
.playerTags{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }

.pillTag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-size:12px;
  opacity:.95;
}

/* Search bar: teams ile aynı look */
.vpsfSearch{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.vpsfSearch .searchWrap{
  flex: 1 1 420px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.vpsfSearch .searchInput{
  width:100%;
  background:transparent;
  border:none;
  outline:none;
  color:inherit;
  font-size: 14px;
}
.vpsfSearch .select{
  flex: 0 0 220px;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: inherit;
  outline:none;
}

/* reveal (liste elemanları yavaşça gelsin) */
.revealItem{
  opacity:0;
  transform: translateY(10px);
  animation: revealUp .55s ease forwards;
}
@keyframes revealUp{
  to { opacity:1; transform: translateY(0); }
}

@media (max-width: 1100px){
  .playersGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .playersGrid{ grid-template-columns: 1fr; }
  .vpsfSearch .select{ flex: 1 1 240px; }
}

/* =========================
   PLAYERS: free agents pill
   ========================= */
.playersPage .checkPill{
  position: relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}

.playersPage .checkPill input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.playersPage .checkBox{
  width:18px;
  height:18px;
  border-radius:6px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
  transition: .18s ease;
  flex: 0 0 auto;
}

.playersPage .checkBox::after{
  content:"";
  width:10px;
  height:6px;
  border-left:2px solid rgba(0,0,0,.9);
  border-bottom:2px solid rgba(0,0,0,.9);
  transform: rotate(-45deg) scale(0);
  transition: transform .16s ease;
}

.playersPage .checkText{
  font-size: 13px;
  opacity: .92;
  letter-spacing: .01em;
}

/* checked look */
.playersPage .checkPill input:checked ~ .checkBox{
  border-color: rgba(0,255,160,.55);
  background: rgba(0, 255, 157, 0.418);
  box-shadow:
    0 0 0 1px rgba(0,255,160,.22),
    0 0 22px rgba(0,255,160,.18);
}

.playersPage .checkPill input:checked ~ .checkBox::after{
  transform: rotate(-45deg) scale(1);
}

/* small pulse on check */
.playersPage .checkPill input:checked ~ .checkBox{
  animation: vlPulse .55s ease;
}
@keyframes vlPulse{
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* green burst / glow pop like VPSF */
.playersPage .checkPill.burst::before{
  content:"";
  position:absolute;
  left: 14px;               /* checkbox hizası */
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%) scale(.35);
  border-radius: 999px;
  background: radial-gradient(circle,
    rgba(0, 255, 149, 0.692) 0%,
    rgba(0,255,160,.25) 35%,
    rgba(0,255,160,0) 72%
  );
  filter: blur(1.5px);
  pointer-events:none;
  animation: vlBurst .45s ease-out;
}

@keyframes vlBurst{
  0%   { opacity: 0; transform: translateY(-50%) scale(.35); }
  35%  { opacity: 1; transform: translateY(-50%) scale(2.8); }
  100% { opacity: 0; transform: translateY(-50%) scale(4.2); }
}

.playersPage .heroTitle{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.playersPage .heroSub{
  margin-top: 10px;
  max-width: 760px;
  line-height: 1.55;
  opacity: .82;
}
.playersPage .chip{
  margin-bottom: 12px;
}

/* ---------- PLAYERS FILTERS (VPSF-like) ---------- */

.filtersRow{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

/* Select pill wrapper */
.selectPill{
  position: relative;
  flex: 1 1 280px;
  min-width: 240px;
}

/* Sol ikon */
.selIcon{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .65;
  font-size: 14px;
  pointer-events:none;
}

/* Native select’i VPSF gibi yap + ok taşmasın */
.select.selectIcon{
  width: 100%;
  padding: 12px 46px 12px 40px;  /* sağ: ok için boşluk, sol: ikon için boşluk */
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: inherit;
  outline:none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* ok ikonunu sağda ama daha içeride tut */
  background-image:
    linear-gradient(transparent, transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center; /* <-- burayı 14/18 yaparak oynayabilirsin */
  background-size: 18px 18px;
}

/* focus hissi */
.select.selectIcon:focus{
  border-color: rgba(0,255,160,.25);
  box-shadow: 0 0 0 4px rgba(0,255,160,.08);
}

/* Dropdown list tarafı (native select sınırlı, ama genel okunabilirlik) */
select option{
  background: #0c1020;
  color: #fff;
}

/* ---------- PLAYER CARDS ---------- */

.playersGrid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.playerCard{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  cursor: pointer;                 /* ✅ mouse “basma” imleci */
  transition: transform .15s ease, filter .15s ease;
  user-select:none;
}
.playerCard:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.pTop{ display:flex; gap: 12px; align-items:center; }
.pAvatar{ width: 36px; height: 36px; border-radius: 12px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); flex:0 0 auto; }
.pAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.pAvatarPh{ width:100%; height:100%; background: rgba(255,255,255,.04); }

.pName{ font-weight: 900; }
.pMeta{ opacity:.75; margin-top:2px; font-size:12px; }

.pBottom{
  margin-top: 10px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items:center;
}

.pillTag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  opacity: .95;
  white-space: nowrap;
}

.flagMini{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  object-fit: cover;
  border:1px solid rgba(255,255,255,.12);
}

.mini-logo{
  width: 16px;
  height: 16px;
  border-radius: 6px;
  object-fit: cover;
  border:1px solid rgba(255,255,255,.12);
}

/* ---------- REVEAL ANIM ---------- */

.revealItem{
  opacity: 0;
  transform: translateY(10px);
  animation: revealUp .45s ease forwards;
}
@keyframes revealUp{
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- FREE AGENTS "GLOW POP" ---------- */

.checkPill{
  position: relative;
  overflow: hidden;
}

.checkPill.popGlow::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle, rgba(0,255,160,.35) 0%, rgba(0,255,160,0) 55%);
  opacity: 0;
  animation: popGlow .55s ease;
  pointer-events:none;
}

@keyframes popGlow{
  0%   { opacity: 0; transform: scale(.7); }
  35%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* responsive */
@media (max-width: 1100px){
  .playersGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .playersGrid{ grid-template-columns: 1fr; }
}

/* =========================
   PLAYER PAGE (VPSF vibe)
========================= */

.playerHeader{
  margin-top: 18px;
  display:flex;
  gap: 18px;
  align-items:flex-start;
}

.playerLeft{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  min-width: 380px;
}

.pAvatarBig{
  width:72px; height:72px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow:hidden;
  flex: 0 0 auto;
}
.pAvatarBig img{ width:100%; height:100%; object-fit:cover; display:block; }
.pAvatarPhBig{
  width:100%; height:100%;
  background: rgba(255,255,255,.04);
}

.pTitleBlock{ padding-top: 4px; }
.pIdLine{ font-size:11px; opacity:.65; }
.pNameLine{
  margin-top: 6px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.02em;
  display:flex;
  align-items:center;
  gap:10px;
}
.pSubLine{ margin-top: 4px; opacity:.75; font-size: 13px; }

.coreRatings{
  flex:1;
  padding: 14px 16px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}

.coreTitle{ text-align:center; font-size: 11px; letter-spacing: .12em; opacity:.7; font-weight: 800; }
.coreSub{ text-align:center; margin-top: 3px; font-size: 12px; opacity:.75; }

.coreGrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ringCard{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  padding: 12px;
  display:flex;
  gap: 12px;
  align-items:center;
}

.ring{
  width:56px; height:56px;
  border-radius: 999px;
  --p: 0;
  background:
    conic-gradient(
      rgba(255,255,255,.85) calc(var(--p) * 1%),
      rgba(255,255,255,.10) 0
    );
  position:relative;
  flex: 0 0 auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.ring::after{
  content:"";
  position:absolute;
  inset: 7px;
  border-radius:999px;
  background: rgba(10,12,22,.95);
  border: 1px solid rgba(255,255,255,.08);
}
.ring::before{
  content: attr(data-value);
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 900;
  z-index: 2;
}

.ringMeta{ min-width:0; }
.ringLabel{ font-size: 10px; letter-spacing:.12em; opacity:.65; font-weight:800; }
.ringValue{ font-size: 18px; font-weight: 900; margin-top: 2px; }
.ringSmall{ font-size: 11px; opacity:.7; margin-top: 2px; }

.player3col{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1.05fr 1.05fr .9fr;
  gap: 14px;
  align-items:start;
}

.pPanel{ padding: 14px; border-radius: 18px; }
.panelHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.panelTitle{ font-weight: 900; font-size: 14px; }
.panelChip{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  opacity: .9;
}

.statList{ display:flex; flex-direction:column; gap: 10px; }
.statRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.14);
}
.statK{ opacity:.75; font-size: 12px; }
.statV{ font-weight: 900; }
.linkish{ color: rgba(0,255,160,.9); }

.panelActions{ margin-top: 12px; }
.btnGhost{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  text-decoration:none;
  color: inherit;
}
.btnGhost:hover{ filter: brightness(1.05); }

.pHint{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px dashed rgba(255,255,255,.14);
  background: rgba(0,0,0,.14);
  opacity:.9;
}

@media (max-width: 1200px){
  .coreGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .player3col{ grid-template-columns: 1fr; }
  .playerLeft{ min-width: 0; }
  .playerHeader{ flex-direction: column; }
}