/* assets/css/modern.css — ULTRA CLEAN / PREMIUM (GOLD) */

/* fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&display=swap");

/* =========================
   THEME
========================= */
:root{
  --bg0:#efe9df;
  --bg1:#e5ddd2;

  --card1: rgba(255,255,255,.92);
  --card2: rgba(255,255,255,.86);

  --stroke: rgba(15,18,20,.10);
  --stroke2: rgba(15,18,20,.06);

  --text: rgba(18,20,22,.92);
  --muted: rgba(18,20,22,.62);

  --gold1: rgba(255, 205, 135, .22);
  --gold2: rgba(215, 165, 70, .26);

  --accent: rgba(215,165,70,1);

  --shadow: 0 14px 40px rgba(0,0,0,.14);
  --shadow2: 0 3px 10px rgba(0,0,0,.10);

  --radius: 18px;
}

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

body{
  margin:0;
  padding:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  overflow-x:hidden;

  background:
    radial-gradient(1200px 600px at 50% -220px, rgba(255,200,120,.20), rgba(255,200,120,.06) 45%, transparent 72%),
    radial-gradient(900px 600px at 25% 5%, rgba(255,170,90,.10), transparent 70%),
    radial-gradient(900px 650px at 85% 10%, rgba(215,165,70,.12), transparent 68%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* miękka winieta */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(0,0,0,.06), transparent 62%),
    radial-gradient(900px 650px at 50% 85%, rgba(0,0,0,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.06));
  opacity: 1;
  z-index: 0;
}

header.topbar, .matchbar, .page, .container, footer{
  position: relative;
  z-index: 1;
}

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.92; }

.page{ padding: 18px 0 44px; }
.container{
  width: min(1220px, calc(100% - 36px));
  margin: 0 auto;
}

/* =========================
   NAV
========================= */
header.topbar{
  width: min(1220px, calc(100% - 36px));
  margin: 0 auto;
  padding: 12px 14px;

  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;

  background: rgba(255,255,255,.90);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 22px;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 44px rgba(0,0,0,.14);
}

header.topbar .brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-logo{
  width:34px;
  height:34px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.16));
  opacity:.98;
}

.brand-text{ line-height: 1.05; }
.brand-title{
  font-family: Orbitron, Inter, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 16px;
  color: rgba(18,20,22,.95);
}
.brand-sub{
  font-size: 12px;
  color: rgba(18,20,22,.62);
  letter-spacing: .06em;
  margin-top: 2px;
}

nav.topnav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

nav.topnav a{
  font-size: 13px;
  color: rgba(18,20,22,.86);
  font-weight: 650;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all .18s ease;
}

nav.topnav a:hover{
  background: rgba(255,215,140,.22);
  border-color: rgba(215,165,70,.30);
}

nav.topnav a.active{
  background: linear-gradient(135deg, rgba(255,215,140,.55), rgba(215,165,70,.38));
  border-color: rgba(215,165,70,.55);
  color: #2b1a05;
  box-shadow: 0 10px 22px rgba(215,165,70,.25);
}

/* =========================
   MATCHBAR
========================= */
.matchbar{
  margin-top: 12px;
  background: linear-gradient(to bottom, rgba(230,235,232,.96), rgba(220,226,223,.96));
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}

.matchbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

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

.matchbar__badge{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:999px;

  background: linear-gradient(135deg, #f6d98a, #d9a441);
  color:#2b1a05;
  font-weight:900;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    0 6px 18px rgba(215,165,70,.45),
    inset 0 1px 0 rgba(255,255,255,.55);

  position: relative;
  animation: liveGlow 2.8s ease-in-out infinite;
}

@keyframes liveGlow{
  0%{ box-shadow: 0 0 0 rgba(255,190,80,0); }
  50%{ box-shadow: 0 0 14px rgba(255,190,80,.45); }
  100%{ box-shadow: 0 0 0 rgba(255,190,80,0); }
}

.matchbar__text{
  font-size: 14px;
  color: rgba(18,20,22,.92);
  font-weight: 700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

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

.matchbar__link{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.matchbar__link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.14);
}
.matchbar__link--accent{
  background: rgba(255,215,140,.30);
  border-color: rgba(215,165,70,.55);
}

/* =========================
   HOME HERO
========================= */
.home-shell{ margin-top: 16px; }

.hero-pro{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 26px 80px rgba(0,0,0,.18);
  background: rgba(255,255,255,.55);
}

/* rozmyte tło z banneru */
.hero-pro__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background: url("../hero-banner-wide.webp") center/cover no-repeat;
  filter: blur(18px) saturate(1.00) brightness(1.03);
  opacity:.88;
  z-index:0;
}

/* złoty overlay spójności */
.hero-pro::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(255,205,135,.22), rgba(255,205,135,.10) 45%, rgba(0,0,0,0) 100%);
  pointer-events:none;
  z-index:1;
}

.hero-pro__center{
  position: relative;
  z-index: 2;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 14px;
}

.hero-pro__poster{
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
  filter: brightness(1.05) contrast(1.06) saturate(0.95);
}

/* eleganckie zejście do kart */
.hero-pro::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:80px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.88));
  pointer-events:none;
  z-index: 3;
}

.hero-pro__cta{
  position: relative;
  z-index: 4;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  padding: 0 14px 14px;
}

.btn-main, .btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.10);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.btn-main{
  background: linear-gradient(135deg, #f4d78a, #d9a441);
  border-color: rgba(215,165,70,.65);
  color: #2b1a05;
  box-shadow: 0 14px 40px rgba(215,165,70,.35);
}
.btn-main:hover{ transform: translateY(-1px); }

.btn-ghost{
  background: rgba(255,255,255,.86);
}
.btn-ghost:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* =========================
   CONTROL PANEL
========================= */
.control-panel{ margin-top: 16px; }

.panel-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 1100px){ .panel-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .panel-grid{ grid-template-columns: 1fr; } }

.panel-card{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,235,.82));
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.panel-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 1px;
  background: rgba(255,255,255,.85);
  opacity: .9;
  pointer-events:none;
}
.panel-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(0,0,0,.16);
  border-color: rgba(215,165,70,.35);
}

.panel-title{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel-tag{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.78);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: rgba(18,20,22,.78);
}

.panel-big{ font-size: 20px; font-weight: 900; margin-top: 2px; line-height:1.15; }
.panel-sub{ color: var(--muted); font-size:13px; }

.panel-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
}

/* =========================
   HOME LAYOUT
========================= */
.container.home-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}
@media (max-width: 1100px){
  .container.home-layout{ grid-template-columns: 1fr; }
  .home-aside{ order: 2; }
}

/* universal card look */
.content.card,
.league-table,
.last-matches,
.top-players,
.streams{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,235,.82));
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  backdrop-filter: blur(10px);
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.content.card::before,
.league-table::before,
.last-matches::before,
.top-players::before,
.streams::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 1px;
  background: rgba(255,255,255,.85);
  opacity: .9;
  pointer-events:none;
}

/* right column spacing */
.home-aside > * + *{ margin-top: 18px; }

/* headings */
h2{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(18,20,22,.66);
  margin: 0 0 10px;
}
h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(18,20,22,.92);
}

/* tables side-by-side */
.tables-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 920px){ .tables-grid{ grid-template-columns: 1fr; } }

/* =========================
   SECTION HEADERS
========================= */
.section-header{
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  border: 1px solid rgba(0,0,0,.06);
  margin: 0 0 12px;
}

.section-title{
  display:flex;
  align-items:center;
  gap:12px;

  font-family: Orbitron, Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;

  margin: 0;
  color: rgba(18,20,22,.86);
}

.section-title::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(255,184,77,1);
  box-shadow: 0 0 12px rgba(255,184,77,.35);
}

/* accents per section */
.section-news::before{ background: rgba(255,184,77,1); box-shadow: 0 0 12px rgba(255,184,77,.30); }
.section-table::before{ background: rgba(78,200,122,1);  box-shadow: 0 0 12px rgba(78,200,122,.30); }
.section-matches::before{ background: rgba(120,160,255,1); box-shadow: 0 0 12px rgba(120,160,255,.30); }
.section-streams::before{ background: rgba(255,90,90,1);  box-shadow: 0 0 12px rgba(255,90,90,.28); }
.section-playoff::before{ background: rgba(255,150,90,1); box-shadow: 0 0 12px rgba(255,150,90,.28); }
.section-useful::before{ background: rgba(120,120,120,1); box-shadow: 0 0 12px rgba(0,0,0,.12); }
.section-players::before{ background: rgba(170,120,255,1); box-shadow: 0 0 12px rgba(170,120,255,.25); }

/* =========================
   TABLE
========================= */
.tbl{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tbl th, .tbl td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(15,18,20,.06);
  text-align: left;
  white-space: nowrap;
}
.tbl th{
  color: rgba(18,20,22,.70);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.tbl tbody tr:hover{ background: rgba(255,215,140,.18); }

/* =========================
   HOME NEWS (IMPORTANT!)
   - .news może być używany gdzie indziej (news.php, komunikaty, itd.)
   - badge "NEWS" dajemy TYLKO na home: .news-list .news::before
========================= */

/* karta newsa */
.news{
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.90);
  padding: 12px;
  border-radius: 16px;
  box-shadow: var(--shadow2);
  position: relative;
}

/* tylko na HOME */
.news-list .news::before{
  content: "NEWS";
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,180,80,.18);
  color: #a35b00;
}

/* clamp długości (żeby newsy nie rosły) */
.news h3{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news p{
  margin: 0;
  color: rgba(18,20,22,.74);
  font-size: 13px;
  line-height: 1.55;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mini-link{
  font-size: 12px;
  font-weight: 900;
  color: rgba(18,20,22,.82);
}
.mini-link:hover{ opacity: .9; }

/* =========================
   MATCH LIST
========================= */
.result-list{ list-style:none; padding:0; margin:0; }

.result-item{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(15,18,20,.06);
}
.result-item:last-child{ border-bottom: 0; }

.result-teams{
  font-weight: 900;
  font-size: 13px;
  color: rgba(18,20,22,.86);
}
.result-date{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* =========================
   VOD cards
========================= */
.vod-card{
  display:flex;
  gap: 12px;
  align-items: stretch;
}

.vod-card img{
  width: 160px;
  min-width: 160px;
  height: 90px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
}

.vod-meta{ min-width:0; }
.vod-title{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.2;
}
.vod-sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

/* =========================
   TEAMS (teams.php) — tiles
========================= */
.grid-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1100px){ .grid-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .grid-cards{ grid-template-columns: 1fr; } }

.team-card{
  display:block;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,235,.82));
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  backdrop-filter: blur(10px);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-width: 0;
}

.team-card:hover{
  transform: translateY(-1px);
  border-color: rgba(215,165,70,.35);
  box-shadow: 0 22px 60px rgba(0,0,0,.14);
}

.team-card__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.team-card__tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(18,20,22,.74);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.10);
}

.team-card__cta{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(18,20,22,.82);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  white-space: nowrap;
}
.team-card__cta i{ font-style: normal; opacity: .8; }

.team-card__name{
  margin-top: 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.team-card__sub{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

.team-card__stats{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.team-stat{
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55);
  border-radius: 14px;
  padding: 10px;
  min-width: 0;
}
.team-stat .k{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(18,20,22,.60);
}
.team-stat .v{
  margin-top: 4px;
  font-size: 14px;
  font-weight: 900;
  color: rgba(18,20,22,.90);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
@media (max-width: 640px){ .team-card__stats{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.team-card:hover .team-card__name{ text-decoration: underline; }
.team-card.is-leader{
  border-color: rgba(215,165,70,.55);
  box-shadow: 0 20px 50px rgba(215,165,70,.22);
}
.team-card.is-leader .team-card__tag{
  background: linear-gradient(135deg, #ffe08a, #ffc14d);
  color: #3b2a00;
  font-weight: 900;
}

/* =========================
   FOOTER
========================= */
footer{
  margin-top: 30px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
/* =========================
   STICKY TOP NAV (always on top)
   dopisz na koniec modern.css
========================= */

header.topbar{
  position: sticky;
  top: 12px;              /* odstęp od góry */
  z-index: 9999;          /* zawsze nad treścią */
}

/* opcjonalnie: żeby przy przewijaniu wyglądało jeszcze bardziej “premium” */
header.topbar{
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}