/* ═══ BASE ══ Variables, reset, dark mode ═══ */

/* EuroRed 2026 — Main Stylesheet */

:root{
  --bg:#ffffff;--surface:#fff;--surface2:#eaeff8;--surface3:#cddaf0;
  --border:#b4c8e8;--accent:#5ba3f0;--accent2:#7dc0ff;--accent3:#a8d4ff;
  --gold:#c8960a;--red:#c0392b;
  --text:#0a1a35;--muted:#3a5280;--dim:#8aa0c0;
  --shadow:rgba(15,63,140,.10);--r:10px;--t:.22s cubic-bezier(.4,0,.2,1);
}

.dark{
  --bg:#0d1e35;--surface:rgba(255,255,255,.05);--surface2:rgba(255,255,255,.08);--surface3:#264268;
  --border:rgba(255,255,255,.1);--accent:#5ba3f0;--accent2:#3d80d8;--accent3:#7dc0ff;
  --gold:#f0b429;--shadow:rgba(0,0,0,.4);
  --text:#e2edff;--muted:#7fa8d8;--dim:#2e5080;
}

/* Dark mode text overrides */

.dark .hgrid{display:none}

.dark .htitle{color:#5da8f5}

.dark .mt{color:var(--accent3)}

footer{background:var(--surface);border-top:1px solid var(--border);
  padding:1.35rem 1rem;text-align:center;font-size:.8rem;color:var(--dim);
  font-family:'JetBrains Mono',monospace;margin-top:2rem}

footer strong{color:var(--muted)}

.dark 

/* Smoother hero title entrance */

#countdown{}

button:focus-visible{outline:2px solid var(--accent3);outline-offset:2px}

.dark .iv{color:#fff}

.dark .is{color:rgba(255,255,255,.55)}


/* ═══ ANIMATIONS ══ Keyframes ═══ */

@keyframes fup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* Team logo images fade in */

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

@keyframes splashPulse{from{box-shadow:0 0 0 0 rgba(91,163,240,.3)}to{box-shadow:0 0 0 16px rgba(91,163,240,0)}}

@keyframes splashLoad{from{width:0%}to{width:100%}}


  100%{transform:translateX(-50%)}
}

@keyframes flipDown{
  0%{transform:rotateX(0deg);background:rgba(255,255,255,.15)}
  100%{transform:rotateX(-90deg);background:rgba(0,0,0,.55)}
}

.dark @keyframes flipFront{
  0%{transform:rotateX(0deg)}
  100%{transform:rotateX(-90deg)}}

@keyframes flipBack{
  0%{transform:rotateX(90deg)}
  100%{transform:rotateX(0deg)}}

@keyframes digitFlash{
  0%{background:rgba(91,163,240,.25);border-color:rgba(91,163,240,.5)}
  100%{background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.15)}}

@keyframes cdFlash{
  0%{color:#7dc0ff;text-shadow:0 0 20px rgba(91,163,240,.8)}
  100%{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}}


/* ═══ SPLASH ══ Loading screen ═══ */

#splash{position:fixed;inset:0;background:#0d1e35;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;
  transition:opacity .4s ease,visibility .4s ease}

#splash.hidden{opacity:0;visibility:hidden;pointer-events:none}

.splash-logo{width:150px;height:150px;object-fit:cover;border-radius:50%;
  border:2px solid rgba(91,163,240,.3);animation:splashPulse 1s ease infinite alternate}

.splash-bar{width:120px;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}

.splash-fill{height:100%;width:0%;background:#5ba3f0;border-radius:2px;
  animation:splashLoad .6s ease forwards .1s}


/* ═══ NAV ══ Top navigation bar ═══ */

/* TOPBAR */

#tb{position:sticky;top:0;z-index:100;display:flex;align-items:stretch;
  justify-content:space-between;gap:.25rem;padding:0 .6rem;min-height:48px;
  background:rgba(10,18,32,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:none;transition:background var(--t)}

.tb-l{display:flex;align-items:center;gap:.55rem}

.tb-r{display:flex;gap:.35rem;align-items:center;flex-shrink:0;padding:.4rem 0}

.bc:hover,.bc.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.bth{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);
  border-radius:6px;padding:.28rem .52rem;font-size:.82rem;cursor:pointer;
  transition:all var(--t);line-height:1.4}

.bth:hover{background:rgba(255,255,255,.2)}

nav::-webkit-scrollbar{display:none}

/* Lang dropdown */

.ldrop{position:relative}

.lbtn{display:flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.85);border-radius:7px;
  padding:.3rem .6rem;font-size:.82rem;font-weight:700;cursor:pointer;
  font-family:'Bebas Neue',cursive;letter-spacing:.06em;transition:background var(--t)}

.lchev{font-size:.65rem;opacity:.7}

.lmenu{display:none;position:absolute;right:0;top:calc(100% + 4px);
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 6px 20px var(--shadow);z-index:300;min-width:140px;overflow:hidden;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.dark .lmenu{background:#162236;border-color:rgba(255,255,255,.15)}

.lmenu.open{display:block}

.lmenu button{display:flex;align-items:center;gap:.55rem;
  width:100%;padding:.55rem .9rem;background:none;border:none;
  font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:600;
  color:var(--text);cursor:pointer;letter-spacing:.04em;text-align:left;
  white-space:nowrap}

.lmenu button:hover{background:var(--surface2);color:var(--accent)}

.nb{flex:none;padding:0 .7rem;height:48px;background:none;border:none;
  color:rgba(255,255,255,.9);font-family:'Bebas Neue',cursive;
  font-size:.88rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;
  transition:color var(--t),border-color var(--t)}

.nb:hover{color:#fff;border-bottom:2px solid rgba(255,255,255,.6);border-radius:4px 4px 0 0;transform:translateY(-1px)}

.nb:active{transform:translateY(1px);opacity:.8}

.nb.active{color:var(--accent);border-bottom:2px solid var(--accent)}

.nb.on{color:#5ba3f0;border-bottom-color:#5ba3f0}

.tb-logo-home{height:40px;width:40px;object-fit:cover;border-radius:50%;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.25);transition:box-shadow .3s ease}

/* Better focus styles for accessibility */

.nb:focus-visible,.bc:focus-visible,.ct:focus-visible{
  outline:2px solid var(--accent3);outline-offset:2px
}

/* ── LANGUAGE FLAG SELECTOR ─────────────────────────── */

.lbtn-flag{height:16px;width:24px;object-fit:cover;border-radius:2px;
  display:block;box-shadow:0 1px 3px rgba(0,0,0,.2);flex-shrink:0}

.lmenu-flag{height:16px;width:24px;object-fit:cover;border-radius:2px;
  display:inline-block;vertical-align:middle;flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.15)}

.tb-logo-home:hover{animation:spin .6s ease forwards}

.tb-logo-home:active{animation:spin .3s ease forwards}

.glb-nav:hover{background:rgba(255,255,255,.25)}


/* ═══ HERO ══ Hero + countdown ═══ */

/* HERO */

#hero{position:relative;overflow:hidden;min-height:420px;
  display:flex;flex-direction:column;justify-content:flex-end;
  margin-top:-48px;padding-top:48px;
  background:linear-gradient(to bottom,
    rgba(10,18,32,.05) 0%,
    rgba(10,18,32,.05) 40%,
    rgba(10,18,32,.78) 82%,
    rgba(10,18,32,.97) 100%),
    url('img/hero_bg.jpg') center center/cover no-repeat;
  box-shadow:0 8px 32px rgba(0,0,0,.18)}

.dark #hero{background:linear-gradient(to bottom,
    rgba(5,10,20,.12) 0%,
    rgba(5,10,20,.08) 40%,
    rgba(5,10,20,.85) 82%,
    rgba(5,10,20,.98) 100%),
    url('img/hero_bg.jpg') center center/cover no-repeat}

.hdates{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;margin-bottom:.5rem}

.hdate-chip{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.88);padding:.2rem .7rem;border-radius:20px;
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.04em;backdrop-filter:blur(6px);white-space:nowrap}

/* LIGHTBOX */

.hero-title{font-family:'Bebas Neue',cursive;font-size:clamp(3.5rem,11vw,6.5rem);
  line-height:.88;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.5);letter-spacing:.03em}

.hero-red{color:#5ba3f0}

.hero-sub{font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:400;
  color:rgba(255,255,255,.5);letter-spacing:.22em;text-transform:uppercase;margin-top:.3rem}

.dark .hdate-chip{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.88);padding:.2rem .7rem;border-radius:20px;
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.04em;backdrop-filter:blur(6px);white-space:nowrap}

/* ── HERO TWO-COLUMN LAYOUT ──────────────────────────── */

.hero-right{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;flex-shrink:0}

.hdate-chip:first-child{background:rgba(91,163,240,.2);border-color:rgba(91,163,240,.45);color:#a8d4ff}

/* digit change flash */

.flip-card.flash{animation:cdFlash .3s ease}

.flip-card.flash .flip-top{animation:cdFlash .3s ease}

/* ── COUNTDOWN CLEAN ─────────────────────────────────── */

.countdown-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}

.cd-label-row{display:flex;gap:.3rem;align-items:center;
  font-family:'Barlow Condensed',sans-serif;font-size:.65rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}

.cd-cat{color:#fff;background:rgba(91,163,240,.4);border:1px solid rgba(91,163,240,.6);
  padding:.1rem .5rem;border-radius:3px;font-family:'Barlow Condensed',sans-serif;
  font-size:.75rem;font-weight:700;letter-spacing:.06em}

.cd-units{display:flex;align-items:flex-end;gap:.25rem}

.cd-unit{display:flex;flex-direction:column;align-items:center;gap:.15rem}

.cd-num{font-family:'Bebas Neue',cursive;font-size:1.5rem;line-height:1;
  color:#fff;text-align:center;display:block;min-width:1.8ch;
  text-shadow:0 2px 8px rgba(0,0,0,.5)}

.cd-sep{font-family:'Bebas Neue',cursive;font-size:1.4rem;
  color:rgba(255,255,255,.25);line-height:1;padding-bottom:.35rem}

.cd-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.52rem;
  letter-spacing:.13em;color:rgba(255,255,255,.45);text-transform:uppercase}


/* ═══ HOME ═══ */

.home-layout{display:flex;flex-direction:column;gap:.6rem}

.home-left{display:flex;flex-direction:column;gap:1rem}

.home-right{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:stretch}

/* ── MOVED FROM INLINE ───────────────────────────── */

.wr-home{padding-top:1.5rem}

/* ── HOME STATS ──────────────────────────────────────── */

.home-stats{display:flex;gap:0;margin-bottom:.6rem;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 0 var(--border)}

.stat-item{flex:1;text-align:center;padding:1.1rem .8rem;position:relative}

.stat-item+.stat-item::before{content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:1px;background:var(--border)}

.stat-num{font-family:'Bebas Neue',cursive;font-size:2.8rem;line-height:1;
  color:var(--accent);letter-spacing:.02em;display:block;
  transition:color .3s}

.stat-lbl{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:.2rem}

.dark .stat-num{color:#fff}

/* ── HOME RIGHT ICARDS — centered content ───────────── */

.home-right .icard{text-align:center;border-left:none;
  border-top:3px solid var(--accent);display:flex;flex-direction:column;
  align-items:center;justify-content:center;min-height:120px}

.home-right .il{color:var(--accent);margin-bottom:.25rem;font-size:.6rem}

.home-right .iv{font-size:.95rem;font-weight:800;letter-spacing:.02em}

.home-right .is{font-size:.82rem;margin-top:.3rem}


/* ═══ CARDS ══ Info cards (icard, acard) ═══ */

/* ABOUT */

.acard strong{color:var(--accent);font-weight:700}

.acard{background:var(--surface2);border:1px solid var(--border);border-radius:12px;
  padding:1.8rem 2rem;font-family:'Barlow Condensed',sans-serif;font-size:1.08rem;
  font-weight:400;color:var(--text);line-height:1.8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 0 var(--border)}

/* INFO GRID */

.icard{background:var(--surface2);border:1px solid var(--border);border-radius:12px;
  padding:1.05rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 0 var(--border);
  border-left:3px solid var(--accent);
  transition:transform var(--t),box-shadow var(--t)}

.icard:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow)}

.icard-link{display:block;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s}

.icard-link:hover{box-shadow:0 4px 16px rgba(0,0,0,.12);transform:translateY(-2px)}

.icard-link-hint{color:var(--accent);font-size:.75rem;margin-top:.25rem}

.iv-lg{font-size:1.1rem}

/* ── BARLOW CONDENSED for body text ─────────────────── */

.acard,.icard .is,.about-card{font-family:'Barlow Condensed',sans-serif}

.dark .acard{color:rgba(255,255,255,.75)}

/* acard with title inside */
.acard-title{font-size:1.4rem;margin-bottom:.8rem;padding-left:.7rem;
  border-left:3px solid var(--accent)}



/* ═══ SPONSORS ══ Carousel ═══ */

.sponsors-

.sponsors-

.sponsors-grid{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:center;margin-top:.8rem}

.sponsor-card{display:flex;align-items:center;justify-content:center;background:#fff;
  border-radius:10px;padding:.7rem 1.2rem;
  box-shadow:0 2px 8px rgba(15,63,140,.1);border:1px solid var(--border);
  transition:box-shadow .2s,transform .2s}

.sponsor-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.15);transform:translateY(-2px)}

.sponsor-card img{height:44px;width:auto;object-fit:contain;display:block}

/* ── DARK MODE FIXES ─────────────────────────────── */

.dark .sponsor-card{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.1)}

.dark .sponsor-card img{filter:brightness(.9)}

.sponsors-carousel-wrap{overflow:hidden;position:relative;padding:1.2rem 0}

/* fade edges */

.sponsors-carousel-wrap::before,.sponsors-carousel-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}

.sponsors-carousel-wrap::before{left:0;background:linear-gradient(to right,var(--surface2),transparent)}

.sponsors-carousel-wrap::after{right:0;background:linear-gradient(to left,var(--surface2),transparent)}

.sponsors-carousel{overflow:visible;width:100%}

.sponsors-track{display:flex;align-items:center;gap:0;
  will-change:transform}

.sponsors-track:hover{animation-play-state:paused}

/* each sponsor item — size based on position class */

.sp-item{display:flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:0 1.2rem;transition:transform .3s ease}

.sp-item a{display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:10px;border:1px solid var(--border);
  transition:box-shadow .2s,transform .2s;overflow:hidden}

.sp-item a:hover{box-shadow:0 6px 20px var(--shadow);transform:translateY(-3px)}

/* size variants: main (center large), side (medium), mini (small) */



.dark .sp-item a{background:#fff;border-color:rgba(255,255,255,.15)}


/* ═══ TEAMS ══ Team cards and filters ═══ */

/* CAT TABS */

.ctabs{display:flex;gap:.42rem;margin-bottom:1.05rem;flex-wrap:wrap}

.ct.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.ct:hover:not(.on){border-color:var(--accent);color:var(--text)}

/* TEAM GRID */

.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(192px,1fr));gap:.85rem}
@media(max-width:600px){.tgrid{grid-template-columns:1fr 1fr;gap:.5rem}
.tcard{padding:.8rem;min-height:100px}
.tname{font-family:'Bebas Neue',cursive;font-size:.95rem;letter-spacing:.03em;color:var(--text);margin-bottom:.15rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 80px)}
.tcountry{font-size:.72rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.3rem;max-width:calc(100% - 80px)}
.tlogo-box{position:absolute;top:50%;right:.8rem;transform:translateY(-50%);width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);border-radius:10px}
.tlogo-img{width:66px;height:66px;object-fit:contain;padding:4px}}


.tcard::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent3));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t)}

.tcard:hover{background-position:-20% 0;transform:translateY(-4px) !important;box-shadow:0 10px 28px var(--shadow),0 0 0 1px var(--accent) !important;border-color:var(--accent)}

.tcard:hover::after{transform:scaleX(1)}

.tflag-row{height:28px;margin-bottom:.35rem;display:flex;align-items:center}

.tlogo-box{position:absolute;bottom:.6rem;right:.6rem;width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.2);overflow:hidden;flex-shrink:0}

.tlogo-img{width:66px;height:66px;object-fit:contain;padding:4px}

.tlogo-ph{font-size:1.6rem;line-height:1}

.tname{font-size:1.08rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:.15rem;color:var(--text)}

.tcountry{font-size:.82rem;color:var(--muted);margin-bottom:.4rem}

.tcat{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:.65rem;
  font-weight:700;letter-spacing:.1em;padding:.15rem .5rem;border-radius:4px;
  background:var(--accent);color:#fff;border:none}

.tph{text-align:center;padding:3rem 1rem;color:var(--dim);
  font-size:.98rem;letter-spacing:.06em;grid-column:1/-1}

.tph .phi{font-size:3rem;margin-bottom:.55rem}

/* category stripe */

.tcard{position:relative;background:var(--surface2);border:1px solid var(--border);
  border-radius:12px;padding:1rem 1rem 1rem 1rem;cursor:pointer;
  overflow:hidden;min-height:120px;
  background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);
  background-size:200% 100%;background-position:200% 0;
  opacity:0;transform:translateY(20px);
  transition:opacity .35s ease, transform .35s ease,
    background-position .5s ease, box-shadow .25s ease,
    border-color .2s ease}

.tcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent);opacity:.7;transition:opacity .2s}

.tcard.cat-u11::before{background:var(--gold)}

.tcard:hover::before{opacity:1}

.cat-u11 .tcat{background:var(--gold);color:#fff}

}

/* stagger delays for cards */


















.dark 


/* ═══ SKELETON ══ Loading placeholders ═══ */

/* ── SKELETON LOADER ─────────────────────────────────────── */

@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}

.tcard-sk{pointer-events:none;min-height:130px}

.sk-line,.sk-flag,.sk-badge,.sk-logo{
  background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);
  background-size:400px 100%;
  animation:shimmer 1.4s ease infinite;
  border-radius:6px;
}

.sk-name{height:14px;width:70%;margin-bottom:8px}

.sk-country{height:11px;width:50%;margin-bottom:10px}

.sk-flag{height:22px;width:36px;margin-bottom:8px;border-radius:4px}

.sk-badge{height:18px;width:34px;border-radius:10px}

.tcard-sk .tlogo-box{background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);background-size:400px 100%;animation:shimmer 1.4s ease infinite}


/* ═══ SCHEDULE ══ Match cards ═══ */

/* NOTICE */

.notice{background:var(--surface2);border:1px solid var(--border);
  border-left:4px solid var(--accent);border-radius:var(--r);
  padding:1.05rem;margin-bottom:1.3rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}

.notice p{font-size:.96rem;color:var(--muted);line-height:1.5}

.wbadge{font-family:'Bebas Neue',cursive;font-size:1.3rem;letter-spacing:.08em;
  padding:.16rem .7rem;border-radius:6px}

.bu13{background:rgba(15,63,140,.1);color:var(--accent);border:1px solid rgba(15,63,140,.28)}

.dark .bu13{background:rgba(74,144,226,.14);color:var(--accent3)}

.bu11{background:rgba(200,150,10,.1);color:var(--gold);border:1px solid rgba(200,150,10,.32)}

.mc:hover{border-color:var(--accent);transform:translateX(3px)}

.mte{flex:1;font-size:1.03rem;font-weight:700}

.mvs{color:var(--dim);font-weight:400;margin:0 .32rem}


/* ═══ GALLERY ══ Photo grid and lightbox ═══ */

.gi:hover{border-color:var(--accent)}

/* GALLERY */

.gupload-box{background:var(--surface);border:2px dashed var(--border);border-radius:16px;padding:2rem 1rem;text-align:center;margin-bottom:1.5rem}

.gupload-icon{font-size:2.5rem;margin-bottom:.5rem}

.gupload-txt{color:var(--text);margin-bottom:.6rem;font-size:1.1rem}

.gupload-btn{display:inline-block;background:var(--accent);color:#fff;padding:.6rem 1.4rem;border-radius:8px;cursor:pointer;font-family:'Bebas Neue',cursive;font-size:1.1rem;letter-spacing:.05em;transition:background .2s}

.gupload-btn:hover{background:var(--accent2)}

#gupload-status{margin-top:.8rem;font-size:.95rem;color:var(--muted);min-height:1.2rem}

.ggrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.7rem}

.ggrid2 .gthumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:pointer;transition:transform .2s,box-shadow .2s}

.ggrid2 .gthumb:hover{transform:scale(1.04);box-shadow:0 4px 16px rgba(0,0,0,.2)}

.gloading{text-align:center;color:var(--muted);padding:2rem;font-size:1.1rem}

.gempty{text-align:center;color:var(--muted);padding:2rem}

.gempty .gii{font-size:3rem;margin-bottom:.5rem}

/* LIGHTBOX */

.glightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:flex;align-items:center;justify-content:center}

.glb-inner{position:relative;max-width:95vw;max-height:95vh;display:flex;flex-direction:column;align-items:center;gap:.8rem}

.glb-inner img{max-width:95vw;max-height:80vh;border-radius:10px;object-fit:contain}

.glb-close{position:absolute;top:-1.5rem;right:-1rem;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:1.3rem;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}

.glb-dl-btn{background:var(--accent);color:#fff;padding:.5rem 1.2rem;border-radius:8px;text-decoration:none;font-family:'Bebas Neue',cursive;font-size:1rem}

/* GALLERY */

.gcat-sel{display:flex;gap:.5rem;justify-content:center;margin-bottom:1rem}

.gcat-btn{padding:.4rem 1.2rem;border-radius:20px;border:2px solid var(--border);background:transparent;color:var(--text);font-family:'Bebas Neue',cursive;font-size:1.1rem;cursor:pointer;transition:all .2s}

.gcat-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.gteam-sel{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}

.gteam-btn{padding:.3rem .9rem;border-radius:20px;border:2px solid var(--border);background:transparent;color:var(--text);font-family:'Bebas Neue',cursive;font-size:1rem;cursor:pointer;transition:all .2s}

.gteam-btn.active{background:var(--accent2,#1a56b0);color:#fff;border-color:var(--accent2,#1a56b0)}

.gfilter-row{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.3rem}

.gfbtn{padding:.4rem 1.1rem;border-radius:20px;border:2px solid var(--border);
  background:var(--surface2);color:var(--text);font-family:'Bebas Neue',cursive;
  font-size:1rem;cursor:pointer;transition:all .2s;letter-spacing:.05em}

.gfbtn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

}

.gempty-icon{font-size:3rem;margin-bottom:.5rem}

/* ── GALLERY FILTER WRAP ─────────────────────────────── */

.gfilter-wrap{position:sticky;top:48px;z-index:50;
  background:var(--bg);padding:.5rem 0 .3rem;
  border-bottom:1px solid var(--border);margin-bottom:.8rem}

.gfbtn:hover:not(.active){border-color:var(--accent);color:var(--accent)}

.glb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:none;color:#fff;font-size:2.5rem;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .2s;z-index:2}

.glb-prev{left:-52px}

.glb-next{right:-52px}

.glb-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem;padding:0 .2rem}

.glb-counter{font-family:'Barlow Condensed',sans-serif;font-size:.8rem;color:rgba(255,255,255,.5);letter-spacing:.1em;min-width:40px}


/* ═══ MODAL ══ Team detail popup ═══ */

.mc2{position:absolute;top:.7rem;right:.7rem;background:var(--surface2);
  border:1px solid var(--border);color:var(--muted);border-radius:50%;
  width:28px;height:28px;cursor:pointer;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;transition:all var(--t);
  flex-shrink:0;z-index:10}

.mc2:hover{background:var(--red);color:#fff;border-color:var(--red)}

.mtop{display:flex;align-items:flex-start;gap:1rem}

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

.mlogo{flex-shrink:0;width:110px;height:110px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.95);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.15)}

.mlogo img{width:96px;height:96px;object-fit:contain;padding:6px}

.mheader{display:flex;align-items:center;gap:.6rem;margin-bottom:.25rem}

.mrl{font-family:'JetBrains Mono',monospace;font-size:.67rem;color:var(--accent2);
  letter-spacing:.11em;min-width:76px}

.mrv{font-size:.96rem;color:var(--muted)}

.mtbd{font-size:.9rem;color:var(--dim);font-style:italic;margin-top:.65rem}

.mlogo-img{width:100px;height:100px;object-fit:contain;object-position:center;display:block}

.mlogo-ph{font-size:3.5rem;line-height:1}



/* ═══ UTILS ══ Shared helpers ═══ */

/* SECTIONS */




/* ── LANGUAGE TRANSITION ─────────────────────────────── */

.lang-fade{opacity:0;transition:opacity .15s ease}

.lang-fade.visible{opacity:1}

/* ── SHARE BUTTON ────────────────────────────────────── */

.share-btn{background:none;border:1px solid var(--border);border-radius:6px;
  color:var(--muted);padding:.2rem .5rem;font-size:.8rem;cursor:pointer;
  transition:all var(--t);display:inline-flex;align-items:center;gap:.3rem;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.05em}

.share-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}


/* ═══ RESPONSIVE ══ Media queries ═══ */

@media(max-width:620px){
.hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.hero-text{align-items:center;order:1}
.hero-logo-wrap{order:2}
.hero-bottom{align-items:center;order:3}
.hero-logo-big{width:190px;height:190px}
.hflags{justify-content:center}
.hstats{justify-content:center}
.hstat{display:flex;flex-direction:column;align-items:center;text-align:center}
}

@media(max-width:480px){}

@media(max-width:640px){.home-right{order:-1}}

/* Topbar title (hidden on mobile, shown on tablet+) */

@media(min-width:480px){
  .tb-brand{display:flex;align-items:center;gap:.5rem;cursor:pointer;text-decoration:none}
  .tb-brand-title{font-family:'Bebas Neue',cursive;font-size:1.15rem;letter-spacing:.1em;color:var(--accent)}
  .tb-brand-title em{color:#e03030;font-style:normal}
}

@media(max-width:400px){.hdate-chip{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.88);padding:.2rem .7rem;border-radius:20px;
  font-family:'Barlow Condensed',sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.04em;backdrop-filter:blur(6px);white-space:nowrap}.hdates{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;margin-bottom:.5rem}}

@media(max-width:520px){}

@media(max-width:580px){
  .flip-top{font-size:2rem}
  .flip-card{min-width:34px}
  }

@media(max-width:600px){.glb-prev{left:-8px}.glb-next{right:-8px}}

@media(max-width:380px){
  .hero-title{font-size:clamp(2.6rem,13vw,4rem)}
  .hdates{flex-direction:column;gap:.25rem}
}

/* ── HOME LAYOUT RESPONSIVE ─────────────────────────── */

@media(max-width:680px){
  .home-right{grid-template-columns:1fr 1fr}
  .acard{order:-1}
  .sponsors-carousel-wrap{padding:.8rem 0}
  .sp-item img{height:32px}
  .sp-item a{padding:.5rem .8rem}
}


/* ═══ OTHER ═══ */

html{scroll-behavior:smooth}

body{background:var(--bg);color:var(--text);font-family:'Bebas Neue',cursive;
  min-height:100vh;transition:background var(--t),color var(--t);overflow-x:hidden}

.bc{background:var(--surface2);border:1px solid var(--border);color:var(--muted);
  border-radius:6px;padding:.28rem .54rem;font-size:.82rem;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-weight:600;
  transition:all var(--t);white-space:nowrap;line-height:1.4}

/* NAV */

nav{display:flex;background:transparent;border-bottom:none;
  overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}

.hc{position:relative;z-index:1;width:100%;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:1.2rem 1rem 1.5rem 1.5rem;gap:1rem;box-sizing:border-box}

.fc{display:flex;align-items:center;gap:.3rem;background:var(--surface);
  border:1px solid var(--border);border-radius:20px;padding:.2rem .58rem;
  font-size:.78rem;font-weight:600;box-shadow:0 1px 4px var(--shadow)}

.fe{font-size:1rem}

.sv{text-align:center;width:100%;font-family:'Bebas Neue',cursive;font-size:1.8rem;line-height:1;color:var(--accent)}

.sl{font-size:.76rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}

/* WRAP */

.wr{padding:1.5rem 1rem 4rem;max-width:880px;margin:0 auto}

.st{font-family:'Bebas Neue',cursive;font-size:1.75rem;letter-spacing:.1em;
  color:var(--text);margin-bottom:.6rem;
  padding-left:.9rem;border-left:4px solid var(--accent);
  display:flex;align-items:center;line-height:1}

.il{font-family:'Barlow Condensed',sans-serif;font-size:.65rem;font-weight:600;
  color:var(--accent);letter-spacing:.15em;text-transform:uppercase;margin-bottom:.3rem}

.iv{font-size:1.03rem;font-weight:700;line-height:1.3;color:var(--text);display:block}

.is{font-size:.87rem;color:var(--muted);margin-top:.12rem}

.ct{padding:.38rem 1rem;border-radius:20px;border:1px solid var(--border);
  background:var(--surface2);color:var(--muted);
  font-family:'Bebas Neue',cursive;font-size:.93rem;font-weight:700;
  cursor:pointer;transition:all var(--t)}

.nl{color:var(--accent2)}

/* SCHEDULE */

.wb{margin-bottom:1.9rem}

.wh{display:flex;align-items:center;gap:.65rem;margin-bottom:.85rem}

.wd{font-size:.96rem;color:var(--muted)}

.ml{display:flex;flex-direction:column;gap:.52rem}

.mt{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--accent2);
  min-width:48px;font-weight:600}

.mp{font-family:'JetBrains Mono',monospace;font-size:.67rem;color:var(--muted);
  background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:.1rem .44rem}

/* VENUE */

.mi{font-size:2.9rem;position:relative}

.ms{font-size:.8rem;opacity:.6;position:relative}

/* GALLERY */

.gi{aspect-ratio:4/3;background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r);display:flex;flex-direction:column;align-items:center;
  justify-content:center;color:var(--dim);font-size:.8rem;gap:.32rem;cursor:pointer;
  transition:border-color var(--t);box-shadow:0 1px 4px var(--shadow)}

/* MODAL */

.mo{position:fixed;inset:0;background:rgba(10,18,32,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:500;display:none;align-items:center;justify-content:center;padding:1rem}

.mo.open{display:flex;animation:fup .22s ease}

.md{background:var(--surface2);border:1px solid var(--border);border-top:4px solid var(--accent);border-radius:14px;padding:1.9rem;max-width:430px;width:100%;position:relative;box-shadow:0 14px 44px rgba(0,0,0,.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);margin:auto;max-height:90vh;overflow-y:auto}

.dark 
.mf{display:flex;align-items:center;flex-shrink:0}

.mn{font-family:'Bebas Neue',cursive;font-size:1.95rem;letter-spacing:.06em;
  margin-bottom:.2rem;color:var(--text)}

.mm{font-size:.9rem;color:var(--muted);margin-bottom:1.05rem}

.mr{display:flex;gap:.48rem;margin-bottom:.42rem;align-items:baseline}
.md .mr{display:block;color:var(--muted);font-size:.95rem;line-height:1.6;margin-top:.5rem}

/* Better modal entrance */

.mo.open 

/* Scroll indicator on hero */

50%{transform:translateX(-50%) translateY(5px)}

/* 
/* ── MODAL GLASS STYLE ───────────────────────────── */.mf img{height:32px;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.mil{font-family:'Barlow Condensed',sans-serif;font-size:.65rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
  display:inline;margin-right:.3rem}
.miv{font-family:'Bebas Neue',cursive;font-size:1rem;color:var(--text);letter-spacing:.04em}

.mc2{position:absolute;top:.7rem;right:.7rem;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:50%;
  width:28px;height:28px;cursor:pointer;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;transition:all var(--t);
  flex-shrink:0;z-index:10}
.mc2:hover{background:rgba(255,255,255,.3)}
.mlogo{flex-shrink:0;width:110px;height:110px;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.9);border-radius:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.3)}

/* ═══ SECTIONS ══ */


/* ═══ SECTIONS ═══ */

/* ═══ SECTIONS — show/hide ═══ */
section{display:none}
section.on{display:block}

/* ═══ TCARD ANIMATION ═══ */
/* tcard stagger delays */

/* tcard entrance animation */
@keyframes tcardIn {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}
.tcard.anim { animation: tcardIn .6s ease both; }
.tcard.visible{opacity:1;transform:translateY(0)}

.sponsors-section{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:1.4rem 1.5rem 1.5rem;margin-top:.6rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 0 var(--border)}

/* ── HOME CARDS ANIMATION ─────────────────────────── */
@keyframes homeCardFade{from{opacity:0}to{opacity:1}}

#home .home-stats,
#home .acard,
#home .icard,
#home .sponsors-section{opacity:0}

#home .home-stats.fadein,
#home .acard.fadein,
#home .icard.fadein,
#home .sponsors-section.fadein{animation:homeCardFade .7s ease both}

/* ── SPONSORS CAROUSEL ────────────────────────────── */
.sponsors-track{display:flex;align-items:center;gap:1.2rem;
  will-change:transform}

.sp-item{flex-shrink:0;transition:transform .3s ease,opacity .3s ease}

.sp-item a{display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:10px;border:1px solid var(--border);
  padding:.7rem 1.4rem;transition:box-shadow .2s}

.sp-item a:hover{box-shadow:0 6px 20px var(--shadow)}

.sp-item img{height:40px;width:auto;object-fit:contain;display:block}

.dark .sp-item a{background:#fff;border-color:rgba(255,255,255,.15)}

/* Sponsors fade edges dark mode fix */
.dark .sponsors-carousel-wrap::before{
  background:linear-gradient(to right,#203045,transparent)}
.dark .sponsors-carousel-wrap::after{
  background:linear-gradient(to left,#203045,transparent)}

/* ── MODAL DARK MODE ─────────────────────────────── */
.dark .md{background:rgba(13,30,53,.95) !important;border-color:rgba(255,255,255,.15) !important}
.dark.dark.dark .md .mr{color:rgba(255,255,255,.8)}
.dark.dark .mc2{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}

/* ═══ SCHEDULE TEAM CARDS ═══ */
.sched-tabs{display:flex;gap:.5rem;margin-bottom:1.2rem}
.sched-tab{font-family:'Bebas Neue',cursive;font-size:1rem;letter-spacing:.08em;
  padding:.4rem 1.2rem;border-radius:20px;border:1.5px solid var(--border);
  background:var(--surface2);color:var(--muted);cursor:pointer;transition:all .2s}
.sched-tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.sched-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem}

.scard{background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  padding:.5rem .7rem;cursor:pointer;
  display:flex;align-items:center;gap:.6rem;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  border-left:3px solid var(--accent)}
.scard:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow);border-color:var(--accent)}

.scard-logo-wrap{width:36px;height:36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:8px;padding:2px}
.scard-logo{width:34px;height:34px;object-fit:contain}
.scard-ph{font-size:1.3rem;line-height:1}
.scard-name{font-family:'Bebas Neue',cursive;font-size:.95rem;letter-spacing:.04em;
  color:var(--text);line-height:1.1;flex:1}
.scard-cat{font-size:.6rem;font-weight:700;letter-spacing:.1em;
  color:var(--accent);display:block}
.bcat-u11 .scard{border-top-color:var(--gold)}
.bcat-u11 .scard-cat{color:var(--gold)}

.sched-panel{animation:fadeIn .3s ease both}
.sched-back{font-family:'Bebas Neue',cursive;font-size:.95rem;letter-spacing:.08em;
  color:var(--accent);background:none;border:none;cursor:pointer;
  padding:.3rem 0;margin-bottom:1rem;display:flex;align-items:center;gap:.3rem}
.sched-back:hover{color:var(--accent2)}

.sched-team-title{font-family:'Bebas Neue',cursive;font-size:1.8rem;
  letter-spacing:.05em;color:var(--text);margin-bottom:1rem;
  display:flex;align-items:center;gap:.6rem}

.mcard{background:var(--surface2);border:1px solid var(--border);
  border-radius:10px;padding:.9rem 1rem;margin-bottom:.6rem}
.mc-time{font-size:.75rem;color:var(--accent);font-weight:700;
  letter-spacing:.1em;margin-bottom:.3rem}
.mc-teams{font-family:'Bebas Neue',cursive;font-size:1.2rem;
  color:var(--text);letter-spacing:.04em}
.mc-vs{color:var(--muted);font-size:.9rem;margin:0 .3rem}
.mc-venue{font-size:.8rem;color:var(--muted);margin-top:.2rem}

@media(max-width:500px){
  .sched-grid{grid-template-columns:1fr 1fr;gap:.4rem}
  .scard-name{font-size:.85rem}
}

/* tcat badges stacked */
.tcat-row{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;margin:.4rem 0}

/* ── MODAL TEXT COLORS ────────────────────────────── */
/* Light mode uses CSS vars (dark text on light bg) */
/* Dark mode overrides */
.dark .mn{color:#fff !important}
.dark .mm{color:rgba(255,255,255,.6) !important}
.dark .miv{color:#fff !important}
.dark .md .mr{color:rgba(255,255,255,.75) !important}
.dark .mil{color:var(--accent) !important}

/* ── SCHEDULE CARDS ANIMATION ── slide from right ── */
@keyframes scardIn{
  from{opacity:0;transform:translateX(20px)}
  to{opacity:1;transform:none}
}
.scard.anim{animation:scardIn .4s cubic-bezier(.4,0,.2,1) both}

/* Schedule panel title logo */
.sched-title-logo{width:40px;height:40px;object-fit:contain;
  background:#fff;border-radius:8px;padding:3px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);flex-shrink:0}
.sched-team-title{display:flex;align-items:center;gap:.7rem}

/* Schedule card logo dark mode */
.dark .scard-logo-wrap{background:#fff;border-radius:8px;padding:2px}
.dark .sched-title-logo{background:#fff}