:root{
  --heroImg:url('../img/homepage/cricket_25_empty_stadium_day.webp');
  --bg0:#070814; --bg1:#0b1230;
  --card:rgba(255,255,255,.06);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.74);
  --accent:#7cf7ff; --accent2:#b4ff5a; --hot:#ff4fd8; --warn:#ffb020; --ok:#41ff8f;
  --shadow:0 20px 70px rgba(0,0,0,.55);
  --r:22px; --max:1180px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 800px at 12% 10%, rgba(124,247,255,.18), transparent 55%),
    radial-gradient(900px 700px at 80% 18%, rgba(255,79,216,.12), transparent 60%),
    radial-gradient(900px 700px at 50% 100%, rgba(180,255,90,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  overflow-x:hidden;
}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.small{font-size:13px; color:var(--muted); line-height:1.65}
h1,h2,h3{letter-spacing:.02em}
h1{font-size:46px; line-height:1.1; margin:0}
h2{font-size:26px; margin:0 0 10px}
h3{font-size:18px; margin:0 0 8px}
@media(max-width:980px){h1{font-size:38px}}
a{color:inherit}
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(5,6,18,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header .row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:14px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;}
.logo{
  width:40px;height:40px;border-radius:14px;
  background:
    radial-gradient(circle at 30% 25%, rgba(124,247,255,.9), rgba(124,247,255,.0) 60%),
    radial-gradient(circle at 75% 70%, rgba(255,79,216,.85), rgba(255,79,216,.0) 55%),
    linear-gradient(135deg, rgba(180,255,90,.45), rgba(124,247,255,.15));
  border:1px solid rgba(255,255,255,.15);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.brand b{letter-spacing:.12em}
.nav{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.nav a{
  text-decoration:none; font-weight:700; font-size:13px;
  padding:9px 12px; border-radius:14px;
  border:1px solid transparent;
  color:rgba(255,255,255,.86);
}
.nav a:hover{border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.04)}
.authbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding:7px 10px; border-radius:999px;
  font-size:12px; font-weight:800;
}
.dot{width:8px;height:8px;border-radius:99px;background:var(--accent)}
.dot.ok{background:var(--ok)} .dot.hot{background:var(--hot)} .dot.warn{background:var(--warn)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; padding:10px 14px; border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color:var(--text); font-weight:900; font-size:13px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06)}
.btn.primary{border-color: rgba(124,247,255,.35); background: linear-gradient(135deg, rgba(124,247,255,.20), rgba(255,79,216,.12));}
.btn.danger{border-color: rgba(255,79,216,.35)}
.iconbtn{
  width:38px;height:38px;border-radius:14px; display:inline-grid; place-items:center;
  border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.22); color:var(--text); cursor:pointer;
}
.hero{position:relative; padding:56px 0 22px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.12em;font-size:12px;color:rgba(255,255,255,.84)}
.subtitle{max-width:820px;margin-top:12px;font-size:16px;color:rgba(255,255,255,.78);line-height:1.7}
.glowline{height:1px;margin:18px 0 0;background:linear-gradient(90deg,transparent,rgba(124,247,255,.55),rgba(255,79,216,.45),rgba(180,255,90,.40),transparent);filter:drop-shadow(0 0 10px rgba(124,247,255,.25));}
.lights{position:absolute; inset:-80px -60px auto -60px; height:220px; pointer-events:none; opacity:.45;
  background: radial-gradient(closest-side at 18% 30%, rgba(124,247,255,.55), transparent 70%),
             radial-gradient(closest-side at 48% 24%, rgba(255,79,216,.40), transparent 70%),
             radial-gradient(closest-side at 76% 35%, rgba(180,255,90,.38), transparent 70%);
  animation:sweep 7s ease-in-out infinite;
}
@keyframes sweep{0%,100%{transform:translateX(-2%)} 50%{transform:translateX(2%)}}
.section{padding:26px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:980px){.grid2,.grid3{grid-template-columns:1fr}}
.card{
  border-radius:var(--r); border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  box-shadow:var(--shadow); overflow:hidden;
}
.card .pad{padding:16px}
.surface{
  border-radius:var(--r); border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22); padding:16px; box-shadow:0 14px 40px rgba(0,0,0,.25);
}
.input, select.input, textarea.input{
  width:100%; padding:12px 12px; border-radius:16px;
  border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18);
  color:var(--text); outline:none;
}
.label{display:block;font-size:12px;font-weight:900;letter-spacing:.08em;margin-top:12px;color:rgba(255,255,255,.80)}
.alert{border:1px solid rgba(255,79,216,.35); background: rgba(255,79,216,.08); padding:10px 12px;border-radius:16px;font-size:13px;margin-top:10px}
.footer{padding:40px 0; border-top:1px solid rgba(255,255,255,.08); margin-top:40px; background: rgba(0,0,0,.2); }
.footerGrid{display:grid; grid-template-columns:1.5fr 1fr 1.2fr 1.3fr; gap:24px}
@media(max-width:980px){.footerGrid{grid-template-columns:1fr}}
.badgeRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.reveal{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100}
.modal{width:min(940px,100%);border-radius:24px;border:1px solid rgba(255,255,255,.14);background:rgba(10,12,30,.92);box-shadow:0 35px 120px rgba(0,0,0,.65);overflow:hidden}
.modalHead{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.10)}
.modalBody{padding:16px}


/* Image-backed hero */
.heroMedia{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 90px rgba(0,0,0,.55)}
.heroMedia:before{content:'';position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.05);transform:scale(1.04)}
.heroMedia:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, rgba(7,8,20,.72), rgba(7,8,20,.35), rgba(7,8,20,.72));}
.heroMedia .inner{position:relative;z-index:2;padding:22px}
.heroMedia .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.imgGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:980px){.imgGrid{grid-template-columns:repeat(2,1fr)}}
.imgCard{border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22)}
.imgCard img{width:100%;height:160px;object-fit:cover;display:block}
.imgCard .cap{padding:10px 12px}

.heroMedia:before{background-image:var(--heroImg)}

.heroShot{margin-top:16px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 70px rgba(0,0,0,.55)}
.heroShot img{width:100%;height:260px;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.05)}
@media(max-width:720px){.heroShot img{height:200px}}

.heroBg{position:relative;overflow:hidden}
.heroBg:before{content:"";position:absolute;inset:-2px;background-image:var(--heroImg);background-size:cover;background-position:center;transform:scale(1.06);opacity:.26}
.heroBg:after{content:"";position:absolute;inset:0;background:radial-gradient(900px 480px at 15% 30%, rgba(0,255,255,.16), rgba(0,0,0,0) 60%),linear-gradient(90deg, rgba(6,8,22,.88), rgba(6,8,22,.55), rgba(6,8,22,.9));}
.heroBg .container{position:relative;z-index:2}


/* Disable image heroes on selected pages */
.noHeroImg{--heroImg:none;}
.noHeroImg .heroMedia:before{background-image:none !important;}

/* Unique hero backdrop (homepage) */
.hero{position:relative}
.heroBackdrop{
  position:absolute; inset:-40px -60px auto -60px; height:420px;
  border-radius:36px;
  background-image:var(--heroImg);
  background-size:cover; background-position:center;
  filter:blur(0px) saturate(1.05) contrast(1.05);
  opacity:.32;
  pointer-events:none;
}
.heroBackdrop:after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 260px at 20% 30%, rgba(124,247,255,.25), transparent 60%),
    radial-gradient(700px 260px at 80% 20%, rgba(255,79,216,.18), transparent 60%),
    linear-gradient(90deg, rgba(7,8,20,.92), rgba(7,8,20,.52), rgba(7,8,20,.92));
  border:1px solid rgba(255,255,255,.10);
}


/* content helpers (About / How to Play) */
.cardStack{display:grid;gap:16px}
.bullets{margin:10px 0 0 0;padding-left:18px}
.bullets li{margin:8px 0;color:var(--muted)}
.steps{margin:10px 0 0 0;padding-left:18px}
.steps li{margin:10px 0;color:var(--muted)}
.muted{color:var(--muted)}
.mini{padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.mini h3{margin:0 0 6px 0;font-size:14px;letter-spacing:.02em}
.mini p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}


/* --- Home hero redesign (split) --- */
.heroSplit{padding:46px 0 20px;}
.heroBg{position:relative;}
.heroBg:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1000px 520px at 10% 20%, rgba(56,189,248,.18), transparent 60%),
             radial-gradient(900px 520px at 90% 20%, rgba(168,85,247,.18), transparent 60%),
             linear-gradient(180deg, rgba(255,255,255,.04), transparent 55%);
}
.heroGrid{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start;}
.heroTitle{font-size:56px;line-height:1.06;letter-spacing:-0.02em;margin:10px 0 10px;}
.heroTitle .accent{color:var(--accent);}
.heroLeft .lead{max-width:720px;}
.heroBtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
.heroMiniGrid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px;margin-top:16px;}
.heroMiniGrid .surface{padding:14px;}
.heroRight{overflow:hidden;}
.heroCardImg{height:240px;overflow:hidden;border-radius:18px 18px 0 0;}
.heroCardImg img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02);}
.heroCardFooter{margin-top:14px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;}

@media (max-width: 980px){
  .heroGrid{grid-template-columns:1fr;}
  .heroTitle{font-size:44px;}
  .heroMiniGrid{grid-template-columns:1fr;}
  .heroCardImg{height:220px;}
}


/* --- Responsive header / nav --- */
#siteHeader{position:sticky;top:0;z-index:50;background:rgba(10,14,26,.65);backdrop-filter: blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
#siteHeader .header-inner{max-width:1200px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:14px}
#siteHeader .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
#siteHeader .brand-mark{flex-shrink:0;width:34px;height:34px;border-radius:12px;background: radial-gradient(circle at 30% 30%, rgba(130,255,200,.9), rgba(160,120,255,.7), rgba(0,0,0,.1));box-shadow:0 10px 24px rgba(0,0,0,.35)}
#siteHeader .brand-text{display:flex;flex-direction:column;line-height:1.1}
#siteHeader .brand-text small{opacity:.75;font-size:12px}

#siteHeader .site-nav{display:flex;align-items:center;gap:10px;margin-left:auto}
#siteHeader .nav-link{padding:10px 12px;border-radius:12px;text-decoration:none;color:rgba(255,255,255,.88);font-weight:600;font-size:14px}
#siteHeader .nav-link:hover{background:rgba(255,255,255,.06)}
#siteHeader .nav-link.is-active{background:rgba(255,255,255,.10);color:#fff}

#siteHeader .nav-auth,#siteHeader .nav-user{display:flex;align-items:center;gap:10px;margin-left:10px}
#siteHeader .nav-dot{width:8px;height:8px;border-radius:99px;background:#37f2b4;box-shadow:0 0 12px rgba(55,242,180,.6)}
#siteHeader .nav-username{font-weight:700;opacity:.9}

#siteHeader .nav-toggle{display:none;margin-left:auto;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);border-radius:14px;padding:10px 12px}
#siteHeader .nav-toggle span{display:block;width:18px;height:2px;background:rgba(255,255,255,.9);margin:4px 0;border-radius:99px}

@media (max-width: 900px){
  #siteHeader .header-inner{flex-wrap:wrap}
  #siteHeader .nav-toggle{display:inline-flex}
  #siteHeader .site-nav{order:10;width:100%;display:none;flex-direction:column;align-items:stretch;margin-left:0;padding:10px 0}
  #siteHeader .site-nav.is-open{display:flex}
  #siteHeader .nav-auth,#siteHeader .nav-user{margin-left:auto}
  #siteHeader .nav-link{padding:12px 14px}
}

@media (max-width: 520px){
  #siteHeader .brand-text small{display:none}
  #siteHeader .nav-auth a.btn, #siteHeader .nav-user a.btn, #siteHeader .nav-user button.btn{padding:10px 12px}
  .container{padding-left:14px;padding-right:14px}
}

.js-enabled .reveal{opacity:0;transform:translateY(10px)}
.js-enabled .reveal.is-visible{opacity:1;transform:none}

/* Layout & Footer Fixes */
.site-footer { padding: 40px 0; border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px; background: rgba(0,0,0,.2); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr; gap: 24px; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }
.brandline { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.brandmark { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--hot)); }
.brandname { font-size: 20px; font-weight: 900; letter-spacing: .05em; color: var(--text); }
.pillrow { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-bottom { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.05); text-align: center; opacity: .6; }

/* Page Head & Doc Sections (About/How-to-play) */
.pageHead { padding: 60px 0 30px; text-align: center; }
.pageHead h1 { font-size: 48px; margin-bottom: 10px; }
.pageHead .sub { font-size: 18px; color: var(--muted); max-width: 800px; margin: 0 auto; }
.docSection { padding: 30px 0; max-width: 900px; margin: 0 auto; }
.docSection h2 { border-left: 4px solid var(--accent); padding-left: 15px; margin-bottom: 15px; }
.docSection p { line-height: 1.7; margin-bottom: 15px; color: var(--muted); }
.docSection ul, .docSection ol { padding-left: 20px; color: var(--muted); line-height: 1.8; }
.docSection li { margin-bottom: 10px; }

/* Additional Responsive Enhancements */
@media (max-width: 480px) {
  .container { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 32px; line-height: 1.2; }
  h2 { font-size: 22px; }
  h3 { font-size: 16px; }
  .heroTitle { font-size: 36px; line-height: 1.1; }
  .lead { font-size: 15px; line-height: 1.6; }
  .small { font-size: 12px; }
  .btn { padding: 10px 12px; font-size: 12px; width: 100%; }
  .heroBtns { flex-direction: column; }
  .heroBtns a { width: 100%; }
  .heroMiniGrid { grid-template-columns: 1fr; }
  .surface { padding: 12px; }
  .card { margin-top: 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 16px; }
  .brandname { font-size: 18px; }
  .pageHead h1 { font-size: 36px; }
  .pageHead .sub { font-size: 15px; }
  .docSection { padding: 20px 0; }
}

@media (max-width: 768px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .heroGrid { grid-template-columns: 1fr; gap: 20px; }
  .heroTitle { font-size: 40px; }
  .heroCardImg { height: 240px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .grid2 { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: 1fr; }
  .imgGrid { grid-template-columns: repeat(2, 1fr); }
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding-left: 20px; }
li { margin-bottom: 8px; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; }
table th, table td { padding: 10px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.12); }
.surface > :first-child { margin-top: 0; }
.surface > :last-child { margin-bottom: 0; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
main { min-height: calc(100vh - 200px); }
footer { margin-top: 40px; }