:root {
   /* =========================
   BV COLORS
========================= */

   --bv-red: #d90404;
   --bv-blue: #0b3b84;

   /* =========================
   BV LIGHTS
========================= */

   --bv-red-soft: #ffeaea;
   --bv-red-glow: rgba(217, 4, 4, 0.25);
}

html,
body{
overflow-x:hidden;
}

body {
   margin: 0;
   background: #050505;
   color: #fff;
   font-family: Arial;
}

.topbar {
   background: #ff0000;
   padding: 10px;
   text-align: center;
}

/* =========================
   FUN STAVEK / KUGL SMEJKO
========================= */

.fun-line {
   display: flex;
   align-items: center;
   gap: 10px;

   margin: 26px 0 22px;
   padding: 4px 0;

   font-size: 42px;
   font-weight: 900;
   line-height: 1.15;

color:#202020;

text-shadow:
    0 -1px 0 #ffffff,
    0 1px 0 #000000,
    0 2px 0 #000000,
    0 3px 2px rgba(0,0,0,.80);
} 

.fun-line .fun-highlight {
   position: relative;
   display: inline-block;

   padding: 0 6px 10px 6px;

   z-index: 1;
}



.fun-line .smile {
   width: 120px;
   height: auto;
   flex-shrink: 0;

   filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

/* =========================
   NAVIGATION
   ========================= */

.nav {
   display: flex;
   align-items: center;
   justify-content: space-between;

   max-width: 1200px;
   margin: 0 auto;

   padding: 18px 28px;

   background: #070707;

   border-bottom: 1px solid rgba(255, 255, 255, 0.05);

   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85);
}

/* logo */
.logo img {
   height: 40px;
   display: block;
}

/* sredinski menu */
.nav-menu {
   display: flex;
   align-items: center;
   gap: 16px;
}

/* linki */
.nav-menu a {
   position: relative;

   display: flex;
   align-items: center;
   justify-content: center;

   min-width: 120px;

   padding: 10px 22px;

   color: #fff;
   text-decoration: none;

   font-weight: 800;
   font-size: 17px;

   border-radius: 14px;

   background: linear-gradient(180deg, #111111 0%, #080808 100%);

   border: 1px solid rgba(255, 255, 255, 0.03);

   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45),
      inset 0 0 8px rgba(255, 255, 255, 0.03);

   opacity: 0.9;

   transition: all 0.2s ease;
}

/* hover */
.nav-menu a:hover {
   color: #4d8fff;
   opacity: 1;

   border-color: rgba(30, 94, 214, 0.75);
}

/* aktivni link */
.nav-menu a.active {
   color: #ff2a2a;
   opacity: 1;

   border-color: rgba(255, 0, 0, 0.55);

   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 0, 0, 0.15),
      inset 0 0 8px rgba(255, 255, 255, 0.03);
}

/* skupna črta */
.nav-menu a::after {
   content: "";

   position: absolute;

   left: 6%;
   bottom: -14px;

   width: 88%;
   height: 5px;

   border-radius: 999px;

   opacity: 0;

   transition: 0.2s;
}

/* hover črta */
.nav-menu a:hover::after {
   opacity: 1;

   background: linear-gradient(
      90deg,
      rgba(30, 94, 214, 0) 0%,
      rgba(30, 94, 214, 0.55) 20%,
      #7ec3ff 50%,
      rgba(30, 94, 214, 0.55) 80%,
      rgba(30, 94, 214, 0) 100%
   );

   box-shadow: 0 0 10px rgba(30, 94, 214, 0.9), 0 0 20px rgba(30, 94, 214, 0.5);
}

/* active črta */
.nav-menu a.active::after {
   opacity: 1;

   background: linear-gradient(
      90deg,
      rgba(255, 0, 0, 0) 0%,
      rgba(255, 0, 0, 0.55) 20%,
      #ffd0d0 50%,
      rgba(255, 0, 0, 0.55) 80%,
      rgba(255, 0, 0, 0) 100%
   );

   box-shadow: 0 0 10px rgba(255, 0, 0, 0.9), 0 0 20px rgba(255, 0, 0, 0.5);
}

/* desni del */
.nav-right {
   display: flex;
   align-items: center;
   gap: 22px;
}

/* social */
.socials {
   display: flex;
   align-items: center;
   gap: 18px;
}

.socials a {
   color: #fff;
   font-size: 22px;
   text-decoration: none;

   opacity: 0.9;
   transition: 0.2s;
}

.socials a:hover {
   opacity: 1;
   transform: translateY(-1px);
}

/* FB hover */
.socials a:first-child:hover {
   color: #1877f2;
}

/* YT hover */
.socials a:last-child:hover {
   color: #ff0000;
}

/* login */
.nav-login {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   padding: 14px 24px;

   border-radius: 12px;

   font-weight: 900;
   font-size: 14px;

   text-decoration: none;
   color: #fff;

   border: 1px solid rgba(255, 255, 255, 0.12);

   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.65),
      inset 0 0 8px rgba(255, 255, 255, 0.08);

   transition: 0.2s;
}

.nav-login:hover {
   transform: translateY(-2px);
}

.wrap {
   max-width: 1200px;
   margin: auto;
   padding: 20px;
}

/* =========================
   BACKGROUND – GLOBAL
   ========================= */

/* 🔴 RDEČ */
.bg-red {
   background: linear-gradient(180deg, #950407 0%, #7b0304 45%, #5e0203 100%);
}

/* 🔵 MODER */
.bg-blue {
   background: linear-gradient(180deg, #0b3b84 0%, #072d67 45%, #042555 100%);
}

/* =========================
   UI ELEMENTS
========================= */

/* =========================
   ALERT TEXT
========================= */

.bv-alert-text {
   font-size: 22px;
   font-weight: 800;
   line-height: 1.4;

   color: #1d1d1d;
}

/* =========================
   ALERT ICON
========================= */

.bv-alert-icon {
   font-size: 34px;
   line-height: 1;

   color: #ffffff;

   flex-shrink: 0;

   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* =========================
   TOP ALERT BAR
   ========================= */

.top-alert {
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);

   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55),
      inset 0 -8px 18px rgba(0, 0, 0, 0.18);
}

.top-alert-inner {
   max-width: 1400px;
   margin: 0 auto;

   display: flex;
   align-items: center;
   justify-content: center;

   gap: 22px;

   padding: 14px 28px;
}

/* leva ikona */
.top-alert-left {
   font-size: 28px;
   color: #ffd84d;

   text-shadow: 0 0 12px rgba(255, 215, 0, 0.65);
}

/* tekst */
.top-alert-text {
   display: flex;
   align-items: center;
   gap: 14px;

   font-size: 20px;
   font-weight: 800;

   color: #fff;
}

/* glavni naslov */
.top-alert-text strong {
   color: #ffd84d;

   letter-spacing: 0.4px;

   text-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
}

/* desni gumb */
.top-alert-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   padding: 11px 22px;

   border-radius: 14px;

   text-decoration: none;

   font-weight: 900;
   font-size: 14px;
   letter-spacing: 0.03em;

   color: #ffffff;

   border: 1px solid rgba(80, 170, 255, 0.42);

   background: linear-gradient(180deg, #1d5fc0 0%, #0f3f86 48%, #082552 100%);

   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42), 0 0 18px rgba(0, 120, 255, 0.22),
      inset 0 0 8px rgba(255, 255, 255, 0.1);

   transition: transform 0.18s ease, box-shadow 0.18s ease,
      background 0.18s ease;
}

.top-alert-btn:hover {
   transform: translateY(-1px);

   background: linear-gradient(180deg, #2873de 0%, #1450a8 48%, #0a2f67 100%);

   box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 120, 255, 0.35),
      inset 0 0 10px rgba(255, 255, 255, 0.14);
}

.top-alert-btn:hover {
   transform: translateY(-1px);

   background: rgba(0, 0, 0, 0.28);
}

/* =========================
   🔴 HIGHLIGHT PANEL (glavni blok)
   ========================= */
.highlight {
   display: flex; /* postavi elemente v vrstico */
   align-items: center; /* vertikalno poravnani */
   gap: 20px; /* razmik med ikonico, tekstom, gumbom */
   
   max-width: 1200px;
   margin: 0 auto 20px;

   padding: 22px 28px; /* notranji razmik */
   margin-bottom: 20px; /* razmik spodaj */

   border-radius: 18px; /* zaobljeni robovi */

   /* temen BV panel (ne rdeča plošča!) */
   background: linear-gradient(180deg, #390607 0%, #1a0304 45%, #1a0405 100%);

   /* rdeč rob okoli panela */
   border: 1px solid rgba(255, 0, 0, 0.6);

   /* globina: zunanji shadow + notranji glow */
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9),
      inset 0 0 25px rgba(255, 0, 0, 0.25);
}

/* =========================
   🏆 IKONA (levi kvadrat)
   ========================= */
.hl-icon {
   width: 56px;
   height: 56px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 12px;

   /* temen rdeč kvadrat */
   background: linear-gradient(180deg, #7a0000 0%, #2a0000 100%);

   /* subtilen rob */
   border: 1px solid rgba(255, 0, 0, 0.35);

   /* notranji glow + globina */
   box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.25),
      0 6px 16px rgba(0, 0, 0, 0.7);

   position: relative;
}

/* dejanska ikona (emoji ali kasneje SVG) */
.hl-icon::before {
   content: "🏆";
   font-size: 26px;

   /* rdeča barva ikone */
   color: #ff2a2a;
   filter: none;
}

/* =========================
   📝 NASLOV
   ========================= */
.hl-text h2 {
   margin: 0;
   font-size: 22px;
   font-weight: 900;

   /* BV rdeč naslov */
   color: #ff2a2a;
}

/* =========================
   🔴 GUMB "PREVERI PRENOS"
   ========================= */
.btn-live {
   display: inline-flex;
   align-items: center;
   gap: 10px;

   padding: 12px 18px;
   border-radius: 12px;

   font-weight: 900;
   font-size: 14px;
   text-decoration: none;
   color: #fff;

   /* svetel rob */
   border: 1px solid rgba(255, 255, 255, 0.2);

   /* shadow + rahli notranji sijaj */
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6),
      inset 0 0 6px rgba(255, 255, 255, 0.2);

   /* animacija */
   transition: 0.2s;
}

/* ikona na gumbu (broadcast) */
.btn-live::before {
   content: "📡";
   font-size: 16px;
}

/* hover efekt (dvig + močnejši shadow) */
.btn-live:hover {
   transform: translateY(-1px);
   box-shadow: 0 10px 22px rgba(0, 0, 0, 0.8),
      inset 0 0 8px rgba(255, 255, 255, 0.25);
}

.hl-action {
   margin-left: auto; /* potisne gumb čisto desno */
   display: flex;
   align-items: center;
}

.live-more-btn {
   margin: 18px 0;

   width: fit-content;

   display: grid;
   grid-template-columns: 32px 1fr;
   align-items: center;
   column-gap: 12px;

   padding: 14px 18px 14px 28px;

   border-radius: 14px;

   font-weight: 900;
   text-decoration: none;
   color: #fff;

   justify-content: flex-start;
}

/* =========================
   LIVE ROW
   ========================= */
.live-row {
   display: flex;
   gap: 20px;
   margin-bottom: 30px;
   align-items: stretch;
}

.live-main {
   flex: 1.6;
}

.live-actions {
   flex: 1;
}

.live-info {
   flex: 1.2;
}

/* =========================
   LEVI BLOK (slika / video)
   ========================= */

.live-main {
   position: relative;

   border-radius: 16px;
   overflow: hidden;

   aspect-ratio: 16/9;
}

/* GRAFIKA */

.live-image {
   position: absolute;
   inset: 0;

   width: 100%;
   height: 100%;

   border: 1px solid rgba(255, 0, 0, 0.35);

   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9),
      inset 0 0 20px rgba(255, 0, 0, 0.15);
   display: block;
}

/* VIDEO */

.live-video {
   position: absolute;
   inset: 0;

   width: 100%;
   height: 100%;

   display: none;
}

/* SLIKA */

.live-main img {
   width: 100%;
   height: 100%;

   object-fit: contain;

   display: block;
}

/* YT iframe */

.live-video iframe {
   width: 100%;
   height: 100%;

   border: 0;

   display: block;
}

/* TEMEN OVERLAY (ključen efekt!) */
.live-main::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.4) 40%,
      rgba(0, 0, 0, 0) 80%
   );
}

/* =========================
   SREDINA (gumbi)
   ========================= */
.live-actions {
   display: flex;
   flex-direction: column;
   gap: 12px;

   background: #0f0f0f;
   padding: 18px;
   border-radius: 18px;

   border: 1px solid rgba(255, 255, 255, 0.05);

   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85),
      inset 0 0 12px rgba(255, 255, 255, 0.05);
}

/* gumbi */
.live-actions .btn {
   display: grid;
   grid-template-columns: 32px 1fr;
   align-items: center;
   column-gap: 12px;

   padding: 14px 18px;
   border-radius: 14px;

   font-weight: 900;
   text-decoration: none;
   color: #fff;

   transition: all 0.18s ease;
}

/* =========================
   SECTION TITLE
   ========================= */

.section-title {

   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;

   margin: 40px 0 30px;

   font-size: 26px;
   font-weight: 900;
   text-transform: uppercase;

   color: #0d4ea3;

   text-align: center;

   letter-spacing: 0.8px;

   text-shadow:
      0 1px 0 rgba(255,255,255,.18),
      0 2px 5px rgba(0,0,0,.80);

}

.section-title::before,
.section-title::after {

   content: "";

   flex: 1;
   max-width: 220px;
   height: 3px;

   border-radius: 999px;

   background: linear-gradient(
      90deg,
      transparent,
      #b61b1b 40%,
      #ff4d4d 100%
   );

   opacity: .95;

}

.section-title::after {

   background: linear-gradient(
      90deg,
      #ff4d4d 0%,
      #b61b1b 60%,
      transparent
   );

}

/* =========================
   PURPLE BUTTON - RAZPIS
   ========================= */

.btn-purple {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   padding: 12px 22px;

   margin-top: 20px;
   margin-bottom: 18px;
   margin-left: 40px;

   border-radius: 12px;

   font-weight: 900;
   font-size: 14px;

   color: #fff;
   text-decoration: none;

   border: 1px solid rgba(180, 120, 255, 0.35);

   background: linear-gradient(180deg, #8b5cf6 0%, #6d28d9 45%, #4c1d95 100%);

   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 14px rgba(139, 92, 246, 0.28),
      inset 0 0 6px rgba(255, 255, 255, 0.12);

   cursor: pointer;
   transition: 0.2s;
}

.btn-purple:hover {
   transform: translateY(-1px);

   box-shadow: 0 10px 22px rgba(0, 0, 0, 0.8), 0 0 20px rgba(139, 92, 246, 0.45),
      inset 0 0 8px rgba(255, 255, 255, 0.18);
}

/* ikona */
.live-actions .btn .icon {
   width: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   opacity: 0.9;
}

/* tekst */
.live-actions .btn span:last-child {
   text-align: left;
}

/* =========================
   GUMBI – ENOTEN STIL
   ========================= */

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;

   cursor: pointer;
   transition: all 0.18s ease;

   /* osnovni izgled */
   border: 1px solid rgba(255, 255, 255, 0.08);

   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.75),
      inset 0 0 6px rgba(255, 255, 255, 0.08);
}

/* hover */
.btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 22px rgba(0, 0, 0, 0.85),
      inset 0 0 8px rgba(255, 255, 255, 0.15);
}

/* klik */
.btn:active {
   transform: translateY(1px);
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 0 6px rgba(0, 0, 0, 0.5);
}

/* =========================
   DESNO (info)
   ========================= */
.live-info {
   position: relative;
   padding: 24px;
   border-radius: 16px;

   /* background slika */
   background: url("../grafika/kugl-info.png");
   background-size: cover;
   background-position: 85% 115%;
   background-repeat: no-repeat;

   /* rob + glow */
   border: 1px solid rgba(0, 120, 255, 0.25);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);

   /* KLJUČ: razporeditev za sredinski divider */
   display: flex;
   flex-direction: column;
}

/* naslov */
.live-info h3 {
   margin: 0 0 12px;
   font-size: 18px;
   font-weight: 900;
   color: #fff;
}

/* tekst */
.live-info p {
   color: #ddd;
   margin: 0 0 10px;
}

/* divider NA SREDINI */
.live-info .divider {
   margin: auto 0; /* KLJUČ */
   height: 1px;
   width: 65%;
   background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0)
   );
}

/* radar ikona */
.live-info::after {
   content: "📡";
   position: absolute;
   top: 20px;
   right: 20px;
   font-size: 28px;
   opacity: 0.8;
}

/* email */
.mail {
   margin-top: 10px;
   font-weight: 700;
   position: relative;
   padding-left: 28px;
}

/* email ikona */
.mail::before {
   content: "✉";
   position: absolute;
   left: 0;
   top: 0;
}

/* =========================
   CARDS
   ========================= */

.cards {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
}

/* kartica */
.card {
   position: relative;

   display: flex;
   flex-direction: column;

   border-radius: 16px;
   overflow: hidden;

   text-decoration: none;
   color: #fff;

   transition: all 0.2s ease;

   /* BV okvir */
   border: 1px solid rgba(255, 255, 255, 0.08);

   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85),
      inset 0 0 10px rgba(255, 255, 255, 0.05);
}

/* hover */
.card:hover {
   transform: translateY(-4px);

   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.95),
      inset 0 0 12px rgba(255, 255, 255, 0.08);
}

/* zgornja slika */
.card-img {
   position: relative;
   z-index: 1;
}

.card-img img {
   width: 100%;
   height: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;

   display: block;
}

/* spodnji del */
.card-body {
   padding: 16px 18px 42px;
   padding: 18px;

   position: relative;
   z-index: 2;

   margin-top: -2px;

   overflow: visible;
}

/* rdeč / moder spodnji del */
.card.red .card-body {
   background: linear-gradient(180deg, #e02a2a 0%, #c41e3a 45%, #880808 100%);
}

.card.blue .card-body {
   background: linear-gradient(180deg, #285fc0 0%, #1e5ed6 45%, #0a2a63 100%);
}

/* naslov */
.card h3 {
   margin: 10px 0 6px;
   font-size: 20px;
}

/* opis */
.card p {
   font-size: 14px;
   opacity: 0.85;
}

/* puščica */
.card .arrow {
   position: absolute;
   right: 16px;
   bottom: 16px;
   font-size: 20px;
   opacity: 0.8;
}

/* krog (ikona) */
.card-icon {
   position: absolute;
   z-index: 5;

   top: -12px;
   left: 18px;

   width: 42px;
   height: 42px;

   border-radius: 50%;

   display: flex;
   align-items: center;
   justify-content: center;

   font-size: 18px;

   color: #ffffff;

   overflow: hidden;

   background-clip: padding-box;

   border: 1px solid rgba(255, 255, 255, 0.14);

   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
}

/* 🔴 rdeče kartice */

.card.bg-red .card-icon {
   background: linear-gradient(180deg, #e02a2a 0%, #880808 100%);

   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.65), 0 0 14px rgba(255, 0, 0, 0.28);
}

/* 🔵 modre kartice */

.card.bg-blue .card-icon {
   background: linear-gradient(180deg, #285fc0 0%, #0a2a63 100%);

   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.65), 0 0 14px rgba(0, 120, 255, 0.28);
}
/* ===== FOOTER (minimalen) ===== */

.site-footer {
   margin-top: 6px;
   padding: 18px 0;

   background: #0b0b0b;

   border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 26px;

   text-align: center;

   color: rgba(255, 255, 255, 0.72);

   font-weight: 700;
   letter-spacing: 0.2px;
}

.footer-inner strong {
   color: #fff;
   font-weight: 900;
}

/* =========================
   TEAM CARD
   ========================= */

.team-card {
   position: relative;

   max-width: 600px;

   margin: 30px auto;

   overflow: visible;

   border-radius: 20px;

   background: #f5f5f5;

   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.team-card-header {
   padding: 8px 10px;

   text-align: center;

   font-size: 22px;
   font-weight: 900;
   line-height: 1.1;

   text-transform: uppercase;

   color: #9b6500;

   background: linear-gradient(180deg, #fff3b0 0%, #f3d45a 45%, #e4b52a 100%);

   border-bottom: 1px solid rgba(180, 130, 0, 0.25);
}

.team-card.gold .team-card-header {
   color: #9b6500;

   background: linear-gradient(180deg, #fff3b0 0%, #f3d45a 45%, #e4b52a 100%);
}

.team-card.silver .team-card-header {
   color: #666;

   background: linear-gradient(180deg, #ffffff 0%, #e9e9e9 45%, #cfcfcf 100%);
}

.team-card.bronze .team-card-header {
   color: #a04d00;

   background: linear-gradient(180deg, #f7d9bb 0%, #e4b07a 45%, #c98642 100%);
}

.team-card-image img {
   display: block;

   width: 100%;
   height: 240px;

   object-fit: cover;
   object-position: center center;
}

.team-card-name {
   padding: 6px 20px 2px;

   text-align: center;
   color:#222;
   font-size: 22px;
   font-weight: 900;
   line-height: 1.1;
}

.team-card-players {
   padding: 0 20px 10px;

   text-align: center;
   color:#222;
   font-size: 15px;
   line-height: 1.4;
}

.team-card-score {
   padding: 0 20px 14px;

   text-align: center;

   font-size: 20px;
   font-weight: 900;
   line-height: 1.1;

   color: #9b0000;
}

.team-card-medal {
   position: absolute;

   top: -32px;
   left: 10px;

   z-index: 20;
}

.team-card-medal img {
   width: 55px;
   height: auto;

   display: block;
}

.rank-medal{
    width:30px;
    height:auto;
    display:block;
    margin:auto;
}

/* =========================
   TEAM CARD COLORS
   ========================= */

.team-card.gold {
   background: linear-gradient(180deg, #fffdf3 0%, #fff4c8 45%, #f3e19a 100%);
}

.team-card.silver {
   background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 45%, #dddddd 100%);
}

.team-card.bronze {
   background: linear-gradient(180deg, #fff8f0 0%, #efd3b2 45%, #ddb187 100%);
}

/* =========================
   POSAMEZNO
   ========================= */

.solo-card {
   background: #f4f6f8;

   border-radius: 18px;

   padding: 16px;

   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.solo-card-header {
   display: flex;
   align-items: center;
   justify-content: center;

   gap: 10px;

   font-size: 20px;
   font-weight: 900;

   letter-spacing: 0.5px;
   text-transform: uppercase;

   margin-bottom: 16px;
}

.solo-gender {
   width: 25px;
   height: 25px;

   display: block;
}

.solo-card-men .solo-card-header {
   color: #183b73;
   text-shadow: 0 1px 0 #fff, 0 2px 4px rgba(0, 0, 0, 0.1);
}

.solo-card-women .solo-card-header {
   color: #d23f98;
   text-shadow: 0 1px 0 #fff, 0 2px 4px rgba(0, 0, 0, 0.1);
}

.solo-row {
   display: flex;
   align-items: center;

   gap: 12px;

   padding: 8px 0;

   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.solo-row:last-child {
   border-bottom: none;
}

.solo-medal {
   width: 48px;
   height: auto;

   display: block;

   flex-shrink: 0;
}

.solo-photo {
   width: 60px;
   height: 60px;

   object-fit: cover;

   border-radius: 8px;

   display: block;

   flex-shrink: 0;
}

.solo-info {
   flex: 1;
}

.solo-name {
   font-size: 16px;
   font-weight: 900;
   color:#222;
}

.solo-score {
   font-size: 14px;
   font-weight: 900;

   color: #a40000;
}
/* ========================================
   KONTAKT / O NAS
======================================== */

/* HERO */

.hero {
   margin-bottom: 32px;
}

.hero h1 {
   margin: 0 0 14px;

   font-size: 42px;
   font-weight: 900;

   color: #ffffff;

   text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

.about-text {
   max-width: 920px;
}

.about-text p {
   font-size: 18px;
   line-height: 1.7;

   color: rgba(255, 255, 255, 0.86);
}

/* ========================================
   RDEČ PANEL
======================================== */

.panel {
   border-radius: 18px;

   overflow: hidden;

   border: 1px solid rgba(255, 255, 255, 0.08);

   box-shadow: 0 14px 36px rgba(0, 0, 0, 0.75);
}

.panel-red {
   background: linear-gradient(180deg, #d90404 0%, #7b0304 100%);
}

.panel-pad {
   padding: 24px 28px;
}

.panel-red p {
   margin: 0;

   font-size: 17px;
   font-weight: 700;
   line-height: 1.5;

   color: #ffffff;
}

.panel-red p + p {
   margin-top: 14px;
}

/* ========================================
   INFO GRID
======================================== */

.info-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;

   gap: 24px;

   margin: 34px 0;
}

.info-col {
   padding: 28px;

   border-radius: 18px;

   box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.info-col h3 {
   margin: 0 0 20px;

   font-size: 24px;
   font-weight: 900;
}

.info-col p {
   margin: 0 0 12px;

   line-height: 1.6;
}

/* LEVO */

.info-col.contact {
   background: linear-gradient(180deg, #1f1f1f 0%, #121212 100%);

   border: 1px solid rgba(255, 255, 255, 0.08);
}

/* DESNO */

.info-col.official {
   background: linear-gradient(180deg, #0b3b84 0%, #042555 100%);

   border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ========================================
   PUBLIC INTEREST
======================================== */

.public-interest {
   margin: 34px 0;

   padding: 22px 28px;

   border-radius: 18px;

   font-weight: 800;
   line-height: 1.5;
   text-align: center;

   background: linear-gradient(180deg, #d90404 0%, #7b0304 100%);

   box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65);
}

/* ========================================
   TWO COL
======================================== */

.two-col {
   display: grid;
   grid-template-columns: 1fr 1fr;

   gap: 24px;

   margin-top: 34px;
}

/* ========================================
   LIGHT PANEL
======================================== */

.panel-light {
   padding: 28px;

   border-radius: 18px;

   background: linear-gradient(180deg, #e7eaee 0%, #d4d8dd 100%);

   color: #0f1724;

   box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.panel-light h2 {
   margin: 0 0 10px;

   font-size: 28px;
   font-weight: 900;

   color: #08152d;
}

.panel-light .muted {
   color: #445066;

   line-height: 1.6;
}

/* ========================================
   MAP
======================================== */

.map-embed {
   margin-top: 18px;

   border-radius: 16px;

   overflow: hidden;

   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.map-embed iframe {
   width: 100%;
   height: 320px;

   border: 0;

   display: block;
}

/* ========================================
   BUTTON ROW
======================================== */

.btn-row {
   display: flex;
   gap: 14px;

   margin-top: 18px;
   flex-wrap: wrap;
}

.btn-row .btn {
   display: flex;

   align-items: center;
   justify-content: center;

   gap: 10px;

   padding: 5px 12px;

   min-height: 58px;

   border-radius: 14px;

   font-weight: 800;
   font-size: 16px;

   text-decoration: none;

   color: #ffffff;

   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);

   transition: 0.2s;
}

.btn-row .btn:hover {
   transform: translateY(-2px);
}

/* ========================================
   PARKING IMAGE
======================================== */

.parking-figure {
   margin: 18px 0 0;
}

.parking-figure img {
   width: 100%;

   display: block;

   border-radius: 16px;

   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

/* ========================================
   NOTICE
======================================== */

.notice {
   margin-top: 16px;

   padding: 16px 18px;

   border-radius: 16px;

   font-weight: 700;
   line-height: 1.45;
}

.notice-ban {
   background: linear-gradient(180deg, #d90404 0%, #7b0304 100%);

   color: #ffffff;
}

.notice-info {
   background: linear-gradient(180deg, #0b3b84 0%, #042555 100%);

   color: #ffffff;
}

/* ========================================
   SPACER
======================================== */

.park-spacer {
   height: 110px;
}

/* =========================
   VITEZOV KOTIČEK
   ========================= */

.vitez-corner {
   margin: 30px 0;

   padding: 24px;

   background: #f6f0e4;

   border: 1px solid #c9b38a;

   border-radius: 6px;

   position: relative;

   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1),
      inset 0 0 40px rgba(120, 90, 40, 0.06);
}

.vitez-corner:before {
   content: "";

   position: absolute;

   top: 10px;
   left: 10px;
   right: 10px;
   bottom: 10px;

   border: 1px solid #dcc9a5;

   border-radius: 4px;

   pointer-events: none;
}

.vitez-corner-title {
   font-family: Georgia, "Times New Roman", serif;

   font-size: 32px;
   font-weight: 900;

   letter-spacing: 1px;

   color: #3a2b1c;

   text-align: center;

   margin-bottom: 4px;
}

.vitez-corner-subtitle {
   font-family: Georgia, "Times New Roman", serif;

   font-size: 22px;
   font-weight: 700;

   color: #8a1a1a;

   text-align: center;

   letter-spacing: 3px;

   margin-bottom: 20px;
}

.vitez-corner-body {
   display: block;
}

.vitez-avatar {
   width: 180px;

   padding: 10px;

   background: #f6f0e4;

   border: 1px solid #b89f74;

   border-radius: 12px;

   box-shadow: inset 0 0 0 2px #eadcc0, inset 0 0 0 8px #f6f0e4,
      inset 0 0 0 9px #d8c8a5, 0 3px 10px rgba(0, 0, 0, 0.15);

   float: left;

   margin: 0 24px 12px 0;
}

.vitez-article {
   font-family: Georgia, "Times New Roman", serif;

   font-size: 18px;
   line-height: 1.7;

   color: #222;
}

.vitez-sign {
   margin-top: 20px;

   text-align: right;

   font-family: Georgia, "Times New Roman", serif;

   color: #555;
}

.vitez-sign strong {
   font-family: "Brush Script MT", "Segoe Script", cursive;

   font-size: 42px;
   font-weight: 400;

   color: #8a1a1a;

   line-height: 1;
}

.novinarski-koticek {
    margin-top: 20px;
}

.novinarski-koticek summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 18px;

    cursor: pointer;
    user-select: none;

    font-size: 24px;
    font-weight: 800;

    color: #07224a;

    list-style: none;
}

.novinarski-koticek summary::-webkit-details-marker {
    display: none;
}

.novinarski-koticek summary::after {
    content: "▼";
    font-size: 18px;
    transition: transform .25s ease;
}

.novinarski-koticek[open] summary::after {
    content: "▲";
}

/* =========================
   FOOTER
   ========================= */
.footer-inner{
   display:flex;
   align-items:center;
   justify-content:center;
   gap:14px;
}

.footer-text{
   display:flex;
   flex-direction:column;
   align-items:center;
   text-align:center;
}

.footer-ball{
   height:36px;
   width:auto;
   display:block;
}

.footer-slogan{
   margin-top:8px;
   padding-top:8px;

   position:relative;

   font-size:.92rem;
   opacity:.9;
}

.footer-slogan::before{
   content:"";

   display:block;

   width:220px;
   height:3px;

   margin:0 auto 8px;

   border-radius:999px;

   background:linear-gradient(
      90deg,
      transparent,
      rgba(255,215,0,.9),
      transparent
   );

   box-shadow:
      0 0 8px rgba(255,215,0,.7),
      0 0 16px rgba(255,215,0,.4);
}

/* =========================
   RAZPISI
   ========================= */
.razpisi-naslov {
   max-width: 1200px;
   margin: 20px auto 10px;
   padding: 0 20px;

   font-size: 28px;
   font-weight: 800;

   color: #fff;
}

.razpisi-links {
   max-width: 1200px;
   margin: 24px auto 0;
   padding: 0 20px;

   display: flex;
   gap: 20px;
}

.razpisi-links a {
   flex: 1;

   display: flex;
   align-items: center;
   gap: 12px;

   padding: 14px 20px;

   text-decoration: none;
   color: #fff;

   border-radius: 16px;

   background: linear-gradient(180deg, #161616 0%, #0b0b0b 100%);

   border: 1px solid rgba(255, 255, 255, 0.06);

   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45),
      inset 0 0 8px rgba(255, 255, 255, 0.03);

   transition: 0.2s;
}

.razpisi-links a:hover {
   transform: translateY(-2px);
   border-color: rgba(255, 0, 0, 0.35);
}

.razpis-icon {
   font-size: 24px;
}

.razpis-arrow {
   margin-left: auto;
   font-size: 22px;
   opacity: 0.8;
}


/* ==========================================================
   PROJEKT OMOGOČAJO
========================================================== */

.partnerji{

    padding:70px 30px;

    background:#050505;

}

.partnerji-inner{

    max-width:1280px;

    margin:0 auto;

}

.partnerji-header{

    text-align:center;

    margin-bottom:30px;

}

.partnerji-icon{

    display:block;

    width:150px;

    height:auto;

    margin:0 auto -8px;

}

.partnerji-title{

    margin:0 auto;

    text-align:center;

    font-size:40px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:2px;

    line-height:1;

}

.partnerji-title .white{

    color:#f5f5f5;

}

.partnerji-title .red{

    color:#d61515;

}

.partnerji-line{

    width:100%;

    max-width:580px;

    height:4px;

    margin:24px auto;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        transparent 0%,
        #7b0000 10%,
        #d81b1b 50%,
        #7b0000 90%,
        transparent 100%
    );

    box-shadow:
        0 0 8px rgba(216,27,27,.40),
        0 0 16px rgba(216,27,27,.20);

}

.partnerji-text{

    max-width:780px;

    margin:22px auto 55px;

    text-align:center;

    font-size:22px;

    line-height:1.7;

    color:#d6d6d6;

}

.partner-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    padding:26px 22px 20px;

    background:linear-gradient(
        180deg,
        #131313 0%,
        #0b0b0b 100%
    );

    border:1px solid #3a3a3a;

    border-radius:18px;

    overflow:hidden;

    transition:.30s;

    box-shadow:
        0 10px 28px rgba(0,0,0,.45);

}

.partner-card:hover{

    transform:translateY(-6px);

    border-color:#b91c1c;

    box-shadow:
        0 18px 40px rgba(0,0,0,.55),
        0 0 18px rgba(214,21,21,.18);

}

.partner-card::after{

    content:"";

    position:absolute;

    left:18px;

    right:18px;

    bottom:0;

    height:2px;

    background:#d61515;

    border-radius:999px;

}

.partnerji-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:28px;

    margin-top:20px;

}

.partner-logo{

    width:auto;

    height:130px;

    max-width:180px;

    object-fit:contain;

    margin-bottom:22px;

}

.partner-name{

    text-align:center;

    font-size:17px;

    font-weight:700;

    color:#f2f2f2;

    line-height:1.35;

    text-transform:uppercase;

    min-height:48px;

}

.partner-opis{

    margin-top:18px;

    padding-top:16px;

    border-top:1px solid rgba(214,21,21,.25);

    text-align:center;

    font-size:15px;

    color:#bdbdbd;

}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {
   .hero h1 {
      font-size: 34px;
   }

   .about-text p {
      font-size: 16px;
   }

   .info-grid {
      grid-template-columns: 1fr;
   }

   .two-col {
      grid-template-columns: 1fr;
   }

   .panel-light {
      padding: 22px;
   }

   .btn-row {
      flex-direction: column;
   }

   .btn-row .btn {
      width: 100%;
   }

   .park-spacer {
      height: 0;
   }
}

/* ========================================
   📱 MOBILE / PHONE PORTRAIT
======================================== */

@media (max-width: 768px) {
   /* =========================
   WRAP
========================= */

   .wrap {
      padding: 14px;
   }

   /* =========================
   TOP ALERT
========================= */

   .top-alert-inner {
      display: flex;
      flex-direction: column;

      text-align: center;

      gap: 12px;
      padding: 14px;
   }

   .top-alert-text {
      display: flex;
      flex-direction: column;

      gap: 6px;

      font-size: 16px;
   }

   /* =========================
   NAV
========================= */

   .nav {
      display: flex;
      flex-direction: column;

      gap: 18px;
      padding: 18px 14px;
   }

   .nav-menu {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      gap: 18px;
   }

   /* =========================
   HIGHLIGHT
========================= */

   .highlight {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
   }

   .hl-action {
      margin-left: 0;
      width: 100%;
   }

   .hl-action .btn-live {
      width: 100%;
      justify-content: center;
   }

   /* =========================
   LIVE ROW
========================= */

   .live-row {
      display: flex;
      flex-direction: column;

      gap: 18px;
   }

   /* =========================
   LIVE MAIN
========================= */

   .live-main {
      width: 100%;
   }

   .live-overlay {
      left: 14px;
      right: 14px;
      bottom: 14px;

      max-width: 70%;
   }

   .live-overlay h2 {
      font-size: 16px;
      margin-bottom: 4px;
   }

   .live-overlay p {
      display: none;
   }

   /* =========================
   LIVE ACTIONS
========================= */

   .live-actions {
      width: 100%;

      padding: 10px;

      align-items: center;
   }

   .live-actions .btn {
      width: 80%;

      padding: 10px 12px;

      font-size: 13px;
   }

   /* =========================
   LIVE INFO
========================= */

   .live-info {
      background-image: none;
   }

   .live-info h3 {
      font-size: 16px;
   }

   .live-info p {
      font-size: 14px;
      line-height: 1.4;
   }

   .live-info .divider {
      display: none;
   }

   /* =========================
   CARDS
========================= */

   .cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
   }
}

.btn-row .btn {
   width: 100%;
   box-sizing: border-box;
}

/* ========================================
   📲 MOBILE LANDSCAPE
======================================== */

@media (max-width: 900px) and (orientation: landscape) {
   /* =========================
   NAV
========================= */

   .nav {
      padding: 14px;
   }

   .nav-menu {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      gap: 12px;
   }

   .nav-menu a {
      font-size: 13px;
   }

   /* =========================
   LIVE ROW
========================= */

   .live-row {
      display: grid;

      grid-template-columns: 1fr 1fr;
      grid-template-areas:
         "video video"
         "actions info";

      gap: 16px;
   }

   /* =========================
   VIDEO
========================= */

   .live-main {
      grid-area: video;
   }

   /* =========================
   BUTTONS
========================= */

   .live-actions {
      grid-area: actions;
   }

   /* =========================
   INFO
========================= */

   .live-info {
      grid-area: info;

      background-size: 90px;
      background-position: 115% bottom;
   }

   /* =========================
   CARDS
========================= */

   .cards {
      grid-template-columns: 1fr 1fr;
      gap: 16px;
   }
}

/* ========================================
   📲 TABLET PORTRAIT
======================================== */

@media (min-width: 768px) and (max-width: 1024px) {
   .live-row {
      display: grid;

      grid-template-columns: 1fr 1fr;
      grid-template-areas:
         "video video"
         "actions info";

      gap: 20px;
   }

   .live-main {
      grid-area: video;
   }

   .live-actions {
      grid-area: actions;
   }

   .live-info {
      grid-area: info;
   }
}

/* ========================================
   📲 TABLET LANDSCAPE
======================================== */

@media (min-width: 1024px) and (orientation: landscape) {
   .live-main {
      aspect-ratio: 21/9;
   }

   .live-main img {
      object-position: center 45%;
   }
}