/* ════════════════════════════════════════════════════════════
   KICKBOWL ULTRA v4 — Global Stylesheet
   Dark broadcast-tier UI · Glassmorphism · Neon · Premium
════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=Roboto+Mono:wght@300;400;500;600;700&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Neon palette */
  --c-emerald:     #10B981;
  --c-emerald-dim: rgba(16,185,129,.18);
  --c-emerald-glow:rgba(16,185,129,.40);
  --c-cyan:        #22D3EE;
  --c-cyan-dim:    rgba(34,211,238,.18);
  --c-danger:      #EF4444;
  --c-danger-dim:  rgba(239,68,68,.18);
  --c-danger-glow: rgba(239,68,68,.42);
  --c-amber:       #F59E0B;
  --c-amber-dim:   rgba(245,158,11,.16);
  --c-purple:      #A855F7;

  /* Surfaces */
  --bg:            #030509;
  --s1:            rgba(8,10,24,.96);
  --s2:            rgba(14,16,34,.92);
  --s3:            rgba(20,23,46,.88);
  --glass:         rgba(6,8,20,.75);
  --border:        rgba(255,255,255,.055);
  --border-hi:     rgba(255,255,255,.11);

  /* Text */
  --tx:            #EDF0FF;
  --tx2:           #6B7598;
  --tx3:           #343C5C;

  /* Effects */
  --ease:          cubic-bezier(.4,0,.2,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);

  /* Fonts */
  --ff-head:  'Oswald', sans-serif;
  --ff-body:  'Inter', sans-serif;
  --ff-mono:  'Roboto Mono', monospace;
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--tx);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{display:block;max-width:100%;}
button,input,select,textarea{font-family:inherit;}
:focus-visible{outline:2px solid var(--c-cyan);outline-offset:3px;border-radius:4px;}

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-track{background:rgba(255,255,255,.02);}
::-webkit-scrollbar-thumb{background:rgba(16,185,129,.38);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:rgba(16,185,129,.62);}

/* ── GRID / NOISE BACKGROUNDS ───────────────────────────── */
.bg-grid{
  background-image:
    linear-gradient(rgba(16,185,129,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,.018) 1px, transparent 1px);
  background-size:48px 48px;
}
.bg-noise{
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* ── GLASS ──────────────────────────────────────────────── */
.glass{
  background:var(--glass);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border);
  border-radius:16px;
}
.surface  { background:var(--s1); border:1px solid var(--border); border-radius:16px; }
.surface-2{ background:var(--s2); border:1px solid var(--border); border-radius:12px; }
.surface-3{ background:var(--s3); border:1px solid var(--border); border-radius:10px; }

/* ── NEON TEXT HELPERS ──────────────────────────────────── */
.neon-g{ color:var(--c-emerald); text-shadow:0 0 22px rgba(16,185,129,.55); }
.neon-c{ color:var(--c-cyan);    text-shadow:0 0 22px rgba(34,211,238,.55); }
.neon-r{ color:var(--c-danger);  text-shadow:0 0 22px rgba(239,68,68,.55); }
.neon-a{ color:var(--c-amber);   text-shadow:0 0 22px rgba(245,158,11,.55); }

/* ── TYPOGRAPHY SHORTCUTS ───────────────────────────────── */
.heading{ font-family:var(--ff-head); letter-spacing:.04em; }
.mono   { font-family:var(--ff-mono); }
.micro  {
  font-family:var(--ff-mono);
  font-size:9px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
}

/* ════════════════════════════════════════════════════════════
   GLOBAL NAVIGATION
════════════════════════════════════════════════════════════ */
#kb-nav{
  position:sticky; top:0; z-index:300;
  height:58px;
  background:rgba(3,5,9,.94);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s var(--ease);
}
#kb-nav.scrolled{ box-shadow:0 4px 48px rgba(0,0,0,.75); }

.nav-inner{
  max-width:1440px; margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; gap:14px;
}

.nav-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-mark{
  width:34px; height:34px;
  background:linear-gradient(135deg,#1A237E,#283593);
  border-radius:8px; display:grid; place-items:center;
  font-size:18px; position:relative; overflow:hidden; flex-shrink:0;
}
.nav-mark::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 38%,rgba(255,255,255,.13) 50%,transparent 62%);
  animation:sheen 5s ease-in-out infinite;
}
.nav-name{ font-family:var(--ff-head); font-size:20px; letter-spacing:3px; color:#fff; line-height:1; }
.nav-tag { font-family:var(--ff-mono); font-size:8px; letter-spacing:2px; color:#FF3D00; text-transform:uppercase; line-height:1; margin-top:2px; display:block; }

.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-link{
  display:flex; align-items:center; gap:6px;
  font-family:var(--ff-mono); font-size:10px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--tx2); padding:7px 13px;
  border-radius:7px; border:1px solid transparent;
  transition:all .2s var(--ease); white-space:nowrap;
}
.nav-link:hover { color:var(--tx);       background:rgba(255,255,255,.05); border-color:var(--border); }
.nav-link.active{ color:var(--c-emerald); background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.22); }
.nav-link i{ font-size:9px; }

/* ════════════════════════════════════════════════════════════
   TICKER BAR
════════════════════════════════════════════════════════════ */
.ticker-bar{
  height:34px; background:rgba(3,5,9,.92); border-bottom:1px solid var(--border);
  display:flex; align-items:center; overflow:hidden; position:relative;
}
.ticker-badge{
  font-family:var(--ff-mono); font-size:9px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:var(--c-danger);
  padding:0 12px; border-right:1px solid var(--border);
  height:100%; display:flex; align-items:center; flex-shrink:0;
  animation:flash-lbl 2s ease-in-out infinite;
}
.ticker-track{
  flex:1; overflow:hidden; position:relative;
}
.ticker-track::after{
  content:''; position:absolute; right:0; top:0; bottom:0; width:48px;
  background:linear-gradient(to right,transparent,rgba(3,5,9,.92));
  pointer-events:none; z-index:2;
}
.ticker-inner{ display:flex; animation:ticker-run 56s linear infinite; white-space:nowrap; }
.ticker-inner:hover{ animation-play-state:paused; }
.t-item{ font-family:var(--ff-mono); font-size:10px; font-weight:500; color:var(--c-emerald); padding:0 20px; white-space:nowrap; }
.t-item.warn   { color:var(--c-danger); }
.t-item.muted  { color:var(--tx2); }
.t-item::after { content:'◆'; color:rgba(255,255,255,.08); margin-left:20px; font-size:7px; }

/* ════════════════════════════════════════════════════════════
   NEWS CARDS
════════════════════════════════════════════════════════════ */
.news-card{
  background:var(--s1); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; cursor:pointer;
  position:relative; transition:all .24s var(--ease);
}
.news-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--c-emerald);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .24s var(--ease);
}
.news-card:hover{
  transform:translateY(-2px) translateX(3px);
  border-color:rgba(16,185,129,.22);
  box-shadow:0 14px 48px rgba(0,0,0,.5);
}
.news-card:hover::before{ transform:scaleY(1); }
.news-card.breaking{ border-color:rgba(239,68,68,.26); }
.news-card.breaking::before{ background:var(--c-danger); transform:scaleY(1); }

/* ── Virality badge ── */
.v-badge{
  font-family:var(--ff-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.5px; padding:3px 9px; border-radius:4px;
  display:inline-flex; align-items:center; gap:4px;
}
.v-hi { background:rgba(239,68,68,.15); color:#FF6B6B; border:1px solid rgba(239,68,68,.3); }
.v-md { background:rgba(245,158,11,.15); color:var(--c-amber); border:1px solid rgba(245,158,11,.28); }
.v-lo { background:rgba(16,185,129,.12); color:var(--c-emerald); border:1px solid rgba(16,185,129,.22); }

/* ════════════════════════════════════════════════════════════
   HYPE METER
════════════════════════════════════════════════════════════ */
.hype-track{
  height:18px; border-radius:99px;
  background:rgba(255,255,255,.04); overflow:hidden; display:flex;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
.hype-home,.hype-away{
  border-radius:99px; position:relative; overflow:hidden;
  transition:width .75s var(--ease);
}
.hype-home{
  background:linear-gradient(90deg,#001080,#0046e0);
  box-shadow:0 0 20px rgba(0,70,224,.5);
}
.hype-away{
  background:linear-gradient(90deg,#8a0000,#e01010);
  box-shadow:0 0 20px rgba(224,16,16,.5);
  margin-left:auto;
}
.hype-draw{ background:linear-gradient(90deg,#2a2a4a,#5050a0); transition:width .75s var(--ease); }
.hype-home::after,.hype-away::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  animation:shimmer 2.4s linear infinite;
}

/* ════════════════════════════════════════════════════════════
   VOTE BUTTONS
════════════════════════════════════════════════════════════ */
.vote-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:15px 18px; border-radius:10px;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.04);
  color:var(--tx); font-family:var(--ff-mono); font-size:11.5px;
  font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; transition:all .22s var(--ease); position:relative; overflow:hidden;
}
.vote-btn::before{
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0); transition:background .2s;
}
.vote-btn:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(0,0,0,.4); }
.vote-btn:active{ transform:none; }
.vote-btn.home:hover{ background:rgba(0,70,224,.15); border-color:rgba(0,70,224,.5); }
.vote-btn.draw:hover{ background:rgba(80,80,160,.12); }
.vote-btn.away:hover{ background:rgba(200,0,0,.14);   border-color:rgba(200,0,0,.5); }
.vote-btn.voted{ animation:vote-pop .36s var(--ease-spring); }
@keyframes vote-pop{ 50%{ transform:scale(1.08); } }

/* ════════════════════════════════════════════════════════════
   PLAYER CARDS
════════════════════════════════════════════════════════════ */
.player-card{
  background:var(--s2); border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  transition:all .28s var(--ease); position:relative;
}
.player-card:hover{
  transform:translateY(-6px);
  border-color:rgba(16,185,129,.24);
  box-shadow:0 24px 64px rgba(0,0,0,.55);
}
.pos-gk{ background:rgba(245,158,11,.18); color:var(--c-amber);   border:1px solid rgba(245,158,11,.3); }
.pos-df{ background:rgba(34,211,238,.15); color:var(--c-cyan);    border:1px solid rgba(34,211,238,.28); }
.pos-mf{ background:rgba(16,185,129,.14); color:var(--c-emerald); border:1px solid rgba(16,185,129,.25); }
.pos-fw{ background:rgba(239,68,68,.16);  color:#FF6B6B;          border:1px solid rgba(239,68,68,.3); }

.media-btn{
  width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:rgba(255,255,255,.04);
  color:var(--tx2); font-size:13px; cursor:pointer;
  transition:all .2s var(--ease);
}
.media-btn:hover        { transform:translateY(-2px); border-color:rgba(16,185,129,.3); color:var(--c-emerald); }
.media-btn.yt:hover     { border-color:rgba(255,0,0,.42);     color:#FF4444; }
.media-btn.ig:hover     { border-color:rgba(225,48,108,.42);  color:#E1306C; }
.media-btn.tt:hover     { border-color:rgba(16,185,129,.4);   color:var(--c-emerald); }
.media-btn.x-btn:hover  { border-color:rgba(255,255,255,.35); color:#fff; }
.media-btn.fb:hover     { border-color:rgba(24,119,242,.42);  color:#1877F2; }

/* ════════════════════════════════════════════════════════════
   XP BAR
════════════════════════════════════════════════════════════ */
.xp-track{ height:4px; background:rgba(255,255,255,.06); border-radius:99px; overflow:hidden; }
.xp-fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--c-emerald),var(--c-cyan));
  transition:width .9s var(--ease);
  box-shadow:0 0 8px rgba(16,185,129,.45);
}

/* ════════════════════════════════════════════════════════════
   STATUS PILLS
════════════════════════════════════════════════════════════ */
.s-pill{
  font-family:var(--ff-mono); font-size:9px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  padding:4px 10px; border-radius:4px;
  display:inline-flex; align-items:center; gap:5px;
}
.s-live    { background:rgba(239,68,68,.2); color:#FF6B6B; border:1px solid rgba(239,68,68,.35); }
.s-upcoming{ background:rgba(34,211,238,.14); color:var(--c-cyan); border:1px solid rgba(34,211,238,.28); }
.s-ft      { background:rgba(255,255,255,.06); color:var(--tx2); border:1px solid var(--border); }
.s-ht      { background:rgba(245,158,11,.16); color:var(--c-amber); border:1px solid rgba(245,158,11,.3); }

/* ════════════════════════════════════════════════════════════
   SYNC BUTTON
════════════════════════════════════════════════════════════ */
.sync-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; background:var(--c-emerald); color:var(--bg);
  font-family:var(--ff-mono); font-size:10.5px; font-weight:800;
  letter-spacing:1.5px; text-transform:uppercase;
  border:none; border-radius:8px; cursor:pointer;
  transition:all .22s var(--ease);
  position:relative; overflow:hidden;
  animation:sync-glow 3s ease-in-out infinite;
}
.sync-btn::before{
  content:''; position:absolute; top:-50%; left:-70%;
  width:40%; height:200%; background:rgba(255,255,255,.2);
  transform:skewX(-20deg); transition:left .5s ease;
}
.sync-btn:hover::before{ left:130%; }
.sync-btn:hover { background:#00ff94; transform:translateY(-1px); }
.sync-btn.busy  { animation:none; background:#009944; cursor:wait; }

/* ════════════════════════════════════════════════════════════
   LIVE DOTS
════════════════════════════════════════════════════════════ */
.dot-g{ width:8px;height:8px;border-radius:50%;background:var(--c-emerald);display:inline-block;animation:pulse-g 1.6s ease-in-out infinite; }
.dot-r{ width:8px;height:8px;border-radius:50%;background:var(--c-danger); display:inline-block;animation:pulse-r 1.6s ease-in-out infinite; }
.dot-a{ width:8px;height:8px;border-radius:50%;background:var(--c-amber);  display:inline-block;animation:pulse-a 1.6s ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════
   SKELETON LOADER
════════════════════════════════════════════════════════════ */
.skel{
  background:linear-gradient(90deg,var(--s1) 25%,var(--s2) 50%,var(--s1) 75%);
  background-size:200% 100%; animation:skel-anim 1.6s infinite; border-radius:6px;
}

/* ════════════════════════════════════════════════════════════
   KEYFRAMES
════════════════════════════════════════════════════════════ */
@keyframes sheen    { 0%,100%{transform:translateX(-120%);}50%{transform:translateX(120%);} }
@keyframes shimmer  { from{transform:translateX(-100%);}to{transform:translateX(100%);} }
@keyframes ticker-run{ from{transform:translateX(0);}to{transform:translateX(-50%);} }
@keyframes flash-lbl{ 0%,100%{opacity:1;}50%{opacity:.4;} }
@keyframes sync-glow{ 0%,100%{box-shadow:0 0 18px rgba(16,185,129,.3);}50%{box-shadow:0 0 36px rgba(16,185,129,.62);} }
@keyframes pulse-g  { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5);}70%{box-shadow:0 0 0 8px rgba(16,185,129,0);} }
@keyframes pulse-r  { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5);}70%{box-shadow:0 0 0 8px rgba(239,68,68,0);} }
@keyframes pulse-a  { 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.5);}70%{box-shadow:0 0 0 8px rgba(245,158,11,0);} }
@keyframes skel-anim{ 0%{background-position:200% 0;}100%{background-position:-200% 0;} }
@keyframes spin     { to{transform:rotate(360deg);} }

/* Siren protocol */
@keyframes siren-flash{ 0%,100%{box-shadow:inset 0 0 0 0 rgba(239,68,68,0);}50%{box-shadow:inset 0 0 120px 40px rgba(239,68,68,.16);} }
@keyframes siren-shake{ 0%,100%{transform:rotate(0deg);}25%{transform:rotate(-9deg);}75%{transform:rotate(9deg);} }
@keyframes siren-badge{ 0%,100%{text-shadow:0 0 12px rgba(239,68,68,.6);}50%{text-shadow:0 0 28px rgba(239,68,68,1),0 0 56px rgba(239,68,68,.45);} }

/* Page animations */
@keyframes slide-up  { from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);} }
@keyframes pop-in    { from{opacity:0;transform:scale(.87);}to{opacity:1;transform:scale(1);} }
@keyframes fade-in   { from{opacity:0;}to{opacity:1;} }
@keyframes count-up  { from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);} }

.anim-su{ animation:slide-up .45s var(--ease) both; }
.anim-pi{ animation:pop-in   .35s var(--ease) both; }
.anim-fi{ animation:fade-in   .4s ease both; }
.spin   { animation:spin .75s linear infinite; display:inline-block; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .hide-mob { display:none!important; }
  .nav-tag  { display:none; }
}
@media(min-width:769px){
  .show-mob { display:none!important; }
}