/* BOLAPELANGI Tebak Skor — Frontend System UI v2.3.0
   Visual-only layer. No application logic. */

:root{
  --front-bg:#030b14;
  --front-bg-2:#061320;
  --front-panel:rgba(9,27,44,.88);
  --front-panel-2:rgba(7,21,35,.94);
  --front-line:color-mix(in srgb,var(--c1) 28%,rgba(125,180,220,.14));
  --front-line-strong:color-mix(in srgb,var(--c1) 60%,rgba(255,255,255,.06));
  --front-glow:color-mix(in srgb,var(--c1) 34%,transparent);
  --front-radius:22px;
  --front-shadow:0 24px 70px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.045);
}

html{scroll-behavior:smooth}
body{
  min-height:100vh;
  overflow-x:hidden;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--c1) 18%,transparent),transparent 24%),
    radial-gradient(circle at 90% 18%,color-mix(in srgb,var(--c2) 11%,transparent),transparent 22%),
    linear-gradient(180deg,var(--front-bg-2),var(--front-bg) 44%,#02070d 100%)!important;
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.82),transparent 88%);
}
body::after{
  content:"";
  position:fixed;right:-120px;top:120px;width:420px;height:420px;z-index:-1;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--c1) 14%,transparent);border-radius:50%;opacity:.45;
  box-shadow:0 0 0 42px rgba(255,255,255,.006),0 0 0 84px rgba(255,255,255,.004);
}

.wrap{max-width:1180px!important;padding-left:22px!important;padding-right:22px!important}

/* Header */
header,.top{
  background:linear-gradient(180deg,rgba(3,12,22,.96),rgba(4,15,26,.88))!important;
  border-bottom:1px solid var(--front-line)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(18px) saturate(140%);
}
header::after,.top::after{
  content:"";display:block;height:1px;
  background:linear-gradient(90deg,transparent,var(--c1),transparent);opacity:.45;
}
.nav,.top-inner{min-height:74px!important;padding-top:11px!important;padding-bottom:11px!important}
.brand{display:inline-flex;align-items:center;position:relative}
.brand::before{
  content:"";position:absolute;inset:-8px -14px;border-radius:16px;
  background:radial-gradient(circle,color-mix(in srgb,var(--c1) 10%,transparent),transparent 70%);
  opacity:.65;pointer-events:none;
}
.brand img{position:relative;z-index:1;filter:drop-shadow(0 5px 12px rgba(0,0,0,.38));}

.header-menu-dynamic{
  position:relative;z-index:20;
  gap:9px!important;margin:14px auto 6px!important;
}
.header-menu-dynamic a{
  position:relative;overflow:hidden;
  min-height:38px;display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px!important;border-radius:12px!important;
  color:#dff9ff!important;
  background:linear-gradient(180deg,rgba(14,43,65,.88),rgba(7,25,40,.9))!important;
  border:1px solid var(--front-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 24px rgba(0,0,0,.16);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}
.header-menu-dynamic a::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--c1);
  box-shadow:0 0 12px var(--c1);flex:none;
}
.header-menu-dynamic a:hover{transform:translateY(-2px);border-color:var(--c1)!important;box-shadow:0 12px 28px var(--front-glow)}

/* Hero */
.hero{
  position:relative!important;isolation:isolate;overflow:hidden!important;
  min-height:440px!important;margin:22px 0 26px!important;padding:50px!important;
  border-radius:28px!important;
  border:1px solid var(--front-line-strong)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.02) inset!important;
}
.hero::before{
  content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none!important;
  background:
    linear-gradient(120deg,transparent 0 54%,color-mix(in srgb,var(--c1) 13%,transparent) 54.4% 54.8%,transparent 55.2%),
    radial-gradient(circle at 92% 10%,color-mix(in srgb,var(--c1) 22%,transparent),transparent 31%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 52px)!important;
  opacity:.78!important;
}
.hero::after{
  content:""!important;position:absolute;right:32px;bottom:-76px;width:280px;height:280px;z-index:-1;pointer-events:none;
  border-radius:50%;border:1px solid color-mix(in srgb,var(--c1) 28%,transparent);
  box-shadow:0 0 0 24px rgba(255,255,255,.012),0 0 0 48px rgba(255,255,255,.008),0 0 55px var(--front-glow);
  opacity:.48;
}
.hero>div{max-width:720px;position:relative;z-index:1}
.badge{
  display:inline-flex!important;align-items:center;gap:9px!important;
  padding:9px 14px!important;border-radius:999px!important;
  color:#dffbff!important;background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 18%,transparent),rgba(255,255,255,.03))!important;
  border:1px solid var(--front-line)!important;font-size:12px!important;letter-spacing:.09em;text-transform:uppercase!important;
  box-shadow:0 10px 28px rgba(0,0,0,.2)!important;
}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c1);box-shadow:0 0 14px var(--c1)}
.hero h1{
  max-width:760px;margin-top:16px!important;
  font-size:clamp(38px,6vw,68px)!important;line-height:.98!important;letter-spacing:-.045em!important;
  text-shadow:0 12px 35px rgba(0,0,0,.42);
}
.hero p{max-width:640px!important;color:#c4d8e7!important;line-height:1.7!important;font-size:17px!important}

/* Shared buttons */
.btn,.submit,.outline-btn,.back{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:48px;display:inline-flex!important;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px!important;border-radius:13px!important;
  border:1px solid color-mix(in srgb,var(--c1) 72%,#fff 8%)!important;
  color:#041019!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 94%,#fff 6%),var(--c2))!important;
  box-shadow:0 14px 34px color-mix(in srgb,var(--c1) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.42)!important;
  font-weight:850!important;letter-spacing:.01em;text-shadow:none!important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;
}
.btn::after,.submit::after,.outline-btn::after,.back::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.28) 45%,transparent 70%);
  transform:translateX(-120%);transition:transform .55s ease;
}
.btn:hover::after,.submit:hover::after,.outline-btn:hover::after,.back:hover::after{transform:translateX(120%)}
.btn:hover,.submit:hover,.outline-btn:hover,.back:hover{filter:brightness(1.08);transform:translateY(-2px)!important}
.btn::before{content:"";width:18px;height:18px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.86}
.back::before{content:"";width:18px;height:18px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.42-1.41L7.83 13H20z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Sections */
section{
  position:relative;isolation:isolate;overflow:hidden;
  margin:24px 0!important;padding:30px!important;border-radius:var(--front-radius)!important;
  background:linear-gradient(145deg,rgba(11,34,54,.9),rgba(5,19,32,.94))!important;
  border:1px solid var(--front-line)!important;
  box-shadow:var(--front-shadow)!important;
}
section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--c1) 11%,transparent),transparent 28%),
    linear-gradient(135deg,transparent 67%,rgba(255,255,255,.018) 67.5%,transparent 68%);
}
section h2{font-size:clamp(26px,3vw,34px)!important;line-height:1.12!important;letter-spacing:-.025em!important;margin-bottom:8px!important}
.sub{color:#8fa9bb!important;line-height:1.65!important}

/* Match slider/cards */
.match-slider-wrap{padding:3px 4px;position:relative!important}
.match-list{gap:16px!important;padding:8px 3px 14px!important;scrollbar-width:thin;scrollbar-color:var(--c1) rgba(255,255,255,.04)}
.match-card{
  position:relative!important;overflow:hidden!important;
  flex-basis:340px!important;min-height:220px;
  padding:22px 20px!important;border-radius:20px!important;
  background:linear-gradient(145deg,rgba(13,42,65,.94),rgba(5,19,31,.95))!important;
  border:1px solid var(--front-line)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.match-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 14% 6%,color-mix(in srgb,var(--c1) 18%,transparent),transparent 26%),
    linear-gradient(135deg,transparent 70%,color-mix(in srgb,var(--c1) 9%,transparent));
  opacity:.85;
}
.match-card>*{position:relative;z-index:1}
.match-card:hover{transform:translateY(-4px)!important;border-color:color-mix(in srgb,var(--c1) 68%,#fff 5%)!important;box-shadow:0 24px 55px rgba(0,0,0,.34),0 0 30px var(--front-glow)!important}
.team-vs{gap:14px!important}
.team-img{
  width:76px!important;height:76px!important;padding:6px!important;
  background:linear-gradient(145deg,#fff,#eaf1f5)!important;
  border:2px solid rgba(255,255,255,.82)!important;
  box-shadow:0 13px 30px rgba(0,0,0,.38),0 0 0 4px color-mix(in srgb,var(--c1) 13%,transparent)!important;
}
.match-card b{margin-top:10px!important;font-size:14px!important;color:#eefaff!important;line-height:1.28!important}
.match-card p{margin:16px 0 5px!important;color:#c4d8e5!important;font-size:12px!important;font-weight:750!important;text-transform:uppercase;letter-spacing:.04em}
.match-card small{color:#7894a8!important;font-size:11.5px!important}
.vs,.match-vs-badge{
  width:46px!important;height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  border-radius:14px!important;color:#031018!important;font-size:12px!important;font-weight:950!important;
  background:linear-gradient(135deg,var(--c1),var(--c2))!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 11px 28px color-mix(in srgb,var(--c1) 28%,transparent)!important;
}
.match-nav{
  width:44px!important;height:44px!important;border-radius:14px!important;
  border:1px solid var(--front-line-strong)!important;
  background:rgba(5,21,35,.93)!important;color:#e8fbff!important;
  font-size:0!important;box-shadow:0 16px 34px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(10px);transition:.18s ease!important;
}
.match-nav::before{content:"";display:block;width:20px;height:20px;margin:auto;background:var(--c1);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.41 7.41L14 6l-6 6l6 6l1.41-1.41L10.83 12z'/%3E%3C/svg%3E") center/contain no-repeat}
.match-next::before{transform:rotate(180deg)}
.match-nav:hover{border-color:var(--c1)!important;box-shadow:0 0 26px var(--front-glow)!important}

/* Event card + vector icons */
.event-menu-head>span{
  display:inline-flex!important;align-items:center;gap:8px;color:var(--c1)!important;
  letter-spacing:.16em!important;font-size:11px!important;font-weight:850!important;
}
.event-menu-head>span::before{content:"";width:17px;height:17px;background:var(--c1);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 4h18v16H3zM5 8v10h14V8zm2-4v2h10V4z'/%3E%3C/svg%3E") center/contain no-repeat}
.quick-row{margin-top:18px!important}
.event-card-link{
  width:min(640px,100%)!important;min-height:92px!important;
  display:grid!important;grid-template-columns:58px 1fr 38px!important;align-items:center!important;gap:14px!important;
  padding:16px 18px!important;border-radius:18px!important;text-align:left!important;
  background:linear-gradient(145deg,rgba(13,43,66,.92),rgba(6,21,35,.94))!important;
  border:1px solid var(--front-line)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.event-card-link:hover{border-color:var(--c1)!important;transform:translateY(-3px)!important;box-shadow:0 24px 54px rgba(0,0,0,.32),0 0 28px var(--front-glow)!important}
.event-icon{
  width:54px!important;height:54px!important;border-radius:16px!important;font-size:0!important;
  display:grid!important;place-items:center!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--c1) 22%,transparent),rgba(255,255,255,.035))!important;
  border:1px solid var(--front-line-strong)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 26px rgba(0,0,0,.22)!important;
}
.event-icon::before{content:"";width:28px;height:28px;background:var(--c1);filter:drop-shadow(0 0 8px var(--front-glow));mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 16L3 5l5 5l4-7l4 7l5-5l-2 11H5zm0 2h14v2H5v-2z'/%3E%3C/svg%3E") center/contain no-repeat}
.event-card-link b{display:block!important;font-size:15px!important;color:#f2fbff!important;margin-bottom:4px!important}
.event-card-link small{color:#87a5b9!important;font-weight:500!important}
.event-card-link em{font-size:0!important;width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid var(--front-line);display:grid!important;place-items:center!important}
.event-card-link em::before{content:"";width:17px;height:17px;background:var(--c1);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.29 6.71a1 1 0 011.42 0l4.58 4.58a1 1 0 010 1.42l-4.58 4.58a1 1 0 01-1.42-1.42L13.17 12L9.29 8.12a1 1 0 010-1.41z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Rules */
.rules{gap:12px!important}
.rule{
  position:relative!important;align-items:flex-start!important;gap:13px!important;
  min-height:70px;padding:15px 16px!important;border-radius:15px!important;
  background:linear-gradient(100deg,color-mix(in srgb,var(--c1) 8%,transparent),rgba(255,255,255,.025))!important;
  border:1px solid color-mix(in srgb,var(--c1) 20%,rgba(255,255,255,.03))!important;
  color:#d9eaf4!important;font-size:13px!important;line-height:1.6!important;font-weight:550!important;
}
.rule:hover{border-color:var(--front-line-strong)!important;background:linear-gradient(100deg,color-mix(in srgb,var(--c1) 13%,transparent),rgba(255,255,255,.035))!important}
.num{
  min-width:32px!important;width:32px!important;height:32px!important;border-radius:10px!important;
  color:#041019!important;font-weight:900!important;box-shadow:0 8px 22px var(--front-glow)!important;
}

/* Form */
#form{background:linear-gradient(145deg,rgba(10,34,54,.94),rgba(4,17,29,.97))!important}
form{gap:10px!important}
label{margin-top:8px!important;color:#a9c4d5!important;font-size:11px!important;letter-spacing:.09em!important;font-weight:800!important}
input,select{
  min-height:51px!important;padding:13px 14px!important;border-radius:13px!important;
  border:1px solid rgba(114,166,199,.19)!important;
  background:linear-gradient(180deg,rgba(3,15,27,.92),rgba(5,19,31,.98))!important;
  color:#eefaff!important;outline:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
input:hover,select:hover{border-color:color-mix(in srgb,var(--c1) 38%,rgba(255,255,255,.03))!important}
input:focus,select:focus{border-color:var(--c1)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 13%,transparent),0 12px 28px rgba(0,0,0,.18)!important;background:#061624!important}
input[type=file]{padding:8px!important;color:#9bb5c6!important}
input[type=file]::file-selector-button{height:34px;margin-right:12px;border:0;border-radius:9px;padding:0 13px;background:color-mix(in srgb,var(--c1) 18%,#071827);color:#dffaff;font-weight:750;cursor:pointer}
.score-grid{gap:12px!important}
.submit{margin-top:12px!important;width:100%!important;font-size:14px!important}
.submit::before{content:"";width:19px;height:19px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 3L3.7 9.7c-.9.35-.87 1.64.04 1.94l7.2 2.4l2.4 7.2c.3.91 1.59.94 1.94.04L22 4c.3-.77-.47-1.54-1.24-1.24zM12.1 12.1l6.6-6.6l-5.1 7.8l-1.5-1.2z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Footer / Livechat */
footer{border-top:1px solid rgba(255,255,255,.045)!important;margin-top:34px!important;background:rgba(2,8,14,.42)!important;font-size:12px!important;letter-spacing:.01em!important}
footer a{color:var(--c1)!important}
.livechat-float{
  width:54px!important;height:54px!important;min-width:54px!important;padding:0!important;border-radius:16px!important;
  justify-content:center!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--c1) 95%,#fff 5%),var(--c2))!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 16px 40px color-mix(in srgb,var(--c1) 34%,rgba(0,0,0,.24))!important;
}
.livechat-float>span:first-child{font-size:0!important;width:25px;height:25px;background:#041019;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16a2 2 0 012 2v10a2 2 0 01-2 2H8l-4 3v-3a2 2 0 01-2-2V6a2 2 0 012-2zm3 5h10V7H7v2zm0 4h7v-2H7v2z'/%3E%3C/svg%3E") center/contain no-repeat}
.livechat-float .chat-text{display:none!important}
.livechat-float:hover{transform:translateY(-3px) scale(1.03);filter:brightness(1.06)}

/* History page */
.top .back{min-height:42px!important;padding:10px 16px!important}
body .hero .sub{max-width:650px;margin-left:auto;margin-right:auto}
body .hero:has(+ .match-card){min-height:auto!important;padding:44px 26px!important;text-align:center!important;background:linear-gradient(145deg,rgba(11,36,57,.94),rgba(4,17,29,.97))!important}
body .hero:has(+ .match-card) h1{font-size:clamp(34px,5vw,54px)!important}
body .hero:has(+ .match-card)::after{right:50%;transform:translateX(50%);bottom:-190px;width:330px;height:330px}

body .match-card>.match-head{
  position:relative;z-index:1;
  padding:26px 24px!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 7%,transparent),transparent 56%)!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
}
body .match-title{gap:18px!important}
body .team{font-size:18px!important;font-weight:800!important;color:#edfaff!important}
body .team img{width:58px!important;height:58px!important;border-radius:16px!important;padding:5px!important;box-shadow:0 12px 27px rgba(0,0,0,.34),0 0 0 3px color-mix(in srgb,var(--c1) 10%,transparent)!important}
body .date{color:#7898ad!important;font-size:12px!important;font-weight:600!important}
body .score{
  min-width:130px!important;padding:17px 20px!important;border-radius:15px!important;
  color:#041019!important;font-size:28px!important;font-weight:900!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 13px 34px color-mix(in srgb,var(--c1) 22%,transparent)!important;
}
.winner-list{padding:16px!important;background:rgba(2,10,18,.18)!important}
.winner-list summary{
  min-height:46px;display:flex!important;align-items:center!important;gap:9px!important;
  padding:12px 14px!important;border-radius:13px!important;
  background:linear-gradient(180deg,rgba(15,48,72,.78),rgba(7,25,40,.84))!important;
  border:1px solid var(--front-line)!important;color:#dffaff!important;font-size:13px!important;
}
.winner-list summary::before{content:"";width:19px;height:19px;background:var(--c1);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l3 6l6 .9l-4.5 4.4l1.1 6.2L12 16.6L6.4 19.5l1.1-6.2L3 8.9L9 8z'/%3E%3C/svg%3E") center/contain no-repeat}
.winner-list summary::after{margin-left:auto!important;float:none!important;color:#7c9bae!important;font-weight:600!important}
.winner-table-head{background:linear-gradient(180deg,rgba(18,57,84,.92),rgba(8,30,47,.96))!important;color:#bfe9f4!important;border:1px solid var(--front-line)!important}
.winner-row{background:rgba(255,255,255,.025)!important;border-color:rgba(255,255,255,.055)!important;transition:.15s ease!important}
.winner-row:hover{background:color-mix(in srgb,var(--c1) 7%,rgba(255,255,255,.025))!important;border-color:var(--front-line)!important}
.rank{border-radius:11px!important;color:#041019!important;box-shadow:0 8px 20px var(--front-glow)!important}
.pred-score,.prize{color:#bff8ff!important}
.empty{background:linear-gradient(180deg,rgba(11,37,57,.7),rgba(5,20,33,.8))!important;border-color:var(--front-line)!important}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--c1) 72%,#184156) rgba(255,255,255,.025)}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.025);border-radius:999px}
*::-webkit-scrollbar-thumb{background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 66%,#153b50),var(--c1));border-radius:999px;border:2px solid #071522}

/* Mobile */
@media(max-width:768px){
  .wrap{padding-left:14px!important;padding-right:14px!important}
  .nav,.top-inner{min-height:64px!important}
  .brand img{height:39px!important;max-width:175px!important}
  .header-menu-dynamic{justify-content:flex-start!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding:0 14px 7px!important;margin-top:9px!important;scrollbar-width:none}
  .header-menu-dynamic::-webkit-scrollbar{display:none}
  .header-menu-dynamic a{flex:0 0 auto!important;min-height:35px!important;padding:8px 12px!important;font-size:11px!important;border-radius:11px!important}
  .hero{min-height:350px!important;padding:26px 19px!important;border-radius:22px!important;margin:13px 0 17px!important;background-position:center!important}
  .hero h1{font-size:32px!important;line-height:1.03!important}
  .hero p{font-size:13.5px!important;line-height:1.65!important}
  .badge{font-size:10px!important;padding:7px 10px!important}
  section{padding:19px 15px!important;margin:15px 0!important;border-radius:19px!important}
  section h2{font-size:22px!important}
  .sub{font-size:12.5px!important;margin-bottom:15px!important}
  .match-card{flex-basis:82vw!important;min-height:205px!important;padding:18px 14px!important;border-radius:18px!important}
  .team-img{width:60px!important;height:60px!important}
  .team-vs{grid-template-columns:1fr 38px 1fr!important;gap:7px!important}
  .vs,.match-vs-badge{width:38px!important;height:38px!important;border-radius:12px!important;font-size:10px!important}
  .match-card b{font-size:12px!important}
  .match-nav{width:36px!important;height:36px!important;border-radius:11px!important}
  .match-nav::before{width:17px;height:17px}
  .match-prev{left:0!important}.match-next{right:0!important}
  .event-card-link{min-height:82px!important;grid-template-columns:48px 1fr 30px!important;padding:13px!important;border-radius:16px!important}
  .event-icon{width:46px!important;height:46px!important;border-radius:14px!important}.event-icon::before{width:24px;height:24px}
  .event-card-link b{font-size:13px!important}.event-card-link small{font-size:11px!important}
  .rules{gap:9px!important}.rule{min-height:0!important;padding:12px!important;font-size:12.5px!important}
  .score-grid{grid-template-columns:1fr 1fr!important}
  input,select{min-height:48px!important;font-size:14px!important}
  .livechat-float{right:14px!important;bottom:14px!important;width:50px!important;height:50px!important;min-width:50px!important;border-radius:15px!important}

  body .hero:has(+ .match-card){padding:27px 16px!important;border-radius:20px!important}
  body .hero:has(+ .match-card) h1{font-size:29px!important}
  body .match-card>.match-head{grid-template-columns:1fr!important;padding:18px 14px!important;gap:15px!important}
  body .match-title{display:grid!important;grid-template-columns:1fr 32px 1fr!important;gap:7px!important}
  body .team{flex-direction:column!important;text-align:center!important;font-size:12.5px!important;gap:6px!important}
  body .team img{width:50px!important;height:50px!important;border-radius:14px!important}
  body .match-title .vs{align-self:center!important;justify-self:center!important;width:32px!important;height:32px!important}
  body .date{text-align:center!important;font-size:11px!important;margin-top:10px!important}
  body .score{width:100%!important;min-width:0!important;padding:14px!important;font-size:26px!important}
  .winner-list{padding:12px!important}
  .winner-row{border-radius:13px!important}
}

@media(max-width:420px){
  .hero h1{font-size:28px!important}
  .score-grid{grid-template-columns:1fr!important}
  .match-card{flex-basis:86vw!important}
  .team-img{width:54px!important;height:54px!important}
  .event-card-link{grid-template-columns:44px 1fr 28px!important;gap:10px!important}
  .event-icon{width:42px!important;height:42px!important}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}