:root{--green:#79c832;--green2:#1b8f22;--dark:#050609;--panel:#111820;--line:#2d3743;--white:#fff;--muted:#b9c1cc;--gold:#ffd233;--red:#b63636}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#030405;color:#fff;min-height:100vh}
a{color:var(--green);text-decoration:none;font-weight:800}
button{cursor:pointer}
.login-bg{min-height:100vh;background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.86)),radial-gradient(circle at 50% 20%,rgba(121,200,50,.22),transparent 30%),linear-gradient(135deg,#030405,#10151d);display:flex;align-items:center;justify-content:center;padding:30px}
.login-card{width:430px;background:rgba(14,19,25,.9);border:1px solid #56606d;border-radius:10px;padding:34px;box-shadow:0 30px 80px #000}
.logo{text-align:center;margin-bottom:28px}
.logo .cup{font-size:42px}.logo h1{font-size:30px;line-height:1;margin:8px 0;text-transform:uppercase}.logo span{color:var(--green)}
.login-card h2{text-align:center;margin:0 0 20px}.login-card input{width:100%;padding:16px;background:#0b1016;color:#fff;border:1px solid #4d5967;border-radius:6px;margin:12px 0 16px}
.btn{background:linear-gradient(#70c52d,#368d18);border:0;color:#fff;border-radius:6px;font-size:16px;font-weight:900;padding:15px 22px}
.login-card .btn{width:100%}
.deadline-box{border:1px solid #b73737;background:rgba(120,20,20,.28);padding:18px;border-radius:8px;margin-top:25px;text-align:center}.deadline-box b{color:#fff200;font-size:18px}
.error,.success{padding:12px;border-radius:8px;margin:12px 0}.error{background:#3a1111;color:#ffd0d0}.success{background:#12391d;color:#dfffe8}
.topbar{height:78px;background:#050609;border-bottom:1px solid #1c252f;padding:14px 28px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-weight:900}.brand .cup{font-size:32px}.brand span{color:var(--green)}.user{text-align:right;color:#fff}.user b{color:var(--green);display:block}
.app-wrap{max-width:1240px;margin:25px auto;padding:0 14px}
.app{display:grid;grid-template-columns:260px 1fr;background:#0d1218;border:1px solid #344150;border-radius:8px;overflow:hidden;box-shadow:0 30px 90px #000}
.sidebar{background:#0a0e13;border-right:1px solid #2a3440;padding:24px}.sidebar h3{color:var(--green);margin-top:0;text-transform:uppercase}.step{display:flex;gap:12px;align-items:center;padding:8px;border-radius:8px;margin-bottom:8px;font-size:13px}.step.active{background:rgba(121,200,50,.16)}.circle{width:28px;height:28px;border-radius:50%;background:#d9e3ed;color:#111;display:flex;align-items:center;justify-content:center;font-weight:900}.step.active .circle{background:var(--green);color:#fff}
.content{background:#fff;color:#111;padding:28px;border-radius:8px;margin:20px;min-height:620px}.eyebrow{color:var(--green2);font-weight:900;text-transform:uppercase}.content h2{color:#08871f;font-size:34px;margin:12px 0 4px}.question{font-size:22px;font-weight:900}.hint{color:#657080;margin:12px 0 22px}
.progress{float:right;color:#158221;font-weight:900}
.team-list{border:1px solid #d8dee7;border-radius:8px;overflow:hidden}.team-btn{width:100%;display:flex;align-items:center;justify-content:space-between;background:#fff;border:0;border-bottom:1px solid #d8dee7;padding:17px 20px;font-size:18px;color:#111}.team-btn:last-child{border-bottom:0}.team-btn.active{background:#eefbe9}.team-left{display:flex;align-items:center;gap:18px}.flag{font-size:30px;width:44px}.check{width:22px;height:22px;border:1px solid #aab2bd;border-radius:4px}.team-btn.active .check{background:#13a538;border-color:#13a538}.team-btn.active .check:after{content:'✓';color:#fff;font-weight:900}
.info{background:#efffec;border:1px solid #b8e4a6;border-radius:6px;margin-top:16px;padding:14px;color:#175923}.warn{background:#eff7ff;border:1px solid #a8caf1;border-radius:6px;margin-top:12px;padding:14px;color:#0b559e}.nav{display:flex;justify-content:space-between;margin-top:30px}.nav button{min-width:170px}.btn-light{background:#fff;color:#222;border:1px solid #222;border-radius:6px;padding:13px 22px;font-weight:800}
.match-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.match{border:1px solid #d8dee7;border-radius:8px;overflow:hidden}.match h3{margin:0;background:#eefbe9;color:#167529;padding:10px}.match .team-btn{font-size:15px;padding:12px}.match .flag{font-size:24px;width:34px}
.dark-page{background:#030405;min-height:100vh;padding-bottom:35px}.road-title{text-align:center;margin:24px 0}.road-title h1{color:var(--green);margin:0;text-transform:uppercase}.road-title p{margin:8px 0}
.road-card{max-width:1200px;margin:0 auto;background:#07101a;border:1px solid #28394c;border-radius:10px;padding:20px}.road-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;border:1px solid #4b5664;border-radius:8px;padding:14px;margin-top:18px}.road-meta b{color:#fff200}
.canvas-wrap{background:#091523;border-radius:8px;padding:10px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.actions .btn,.actions a{display:block;text-align:center;border-radius:6px;padding:14px;color:#fff}.actions a{background:#111923;border:1px solid #56606d}
.leader-layout{display:grid;grid-template-columns:240px 1fr;gap:0;background:#10171f;border:1px solid #303c49;border-radius:8px;max-width:1180px;margin:30px auto;overflow:hidden}.leader-side{padding:22px;border-right:1px solid #303c49}.leader-main{padding:22px}.leader-main h1{color:var(--green);margin-top:0}table{width:100%;border-collapse:collapse;background:#111923;color:#fff}th,td{padding:14px;border-bottom:1px solid #293542;text-align:left}th{color:#fff;background:#17202b}.rank{background:#ffd43b;color:#111;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:900}
@media(max-width:900px){.app,.leader-layout{grid-template-columns:1fr}.sidebar,.leader-side{display:none}.content{margin:10px}.topbar{height:auto;gap:10px}.road-meta,.actions{grid-template-columns:1fr}}

/* official 2026 ranking UI */
.rank-table{border:1px solid #d8dee7;border-radius:8px;overflow:hidden;margin-top:20px;background:#fff}
.rank-head,.rank-row{display:grid;grid-template-columns:1fr 110px 120px 120px;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #d8dee7}
.rank-head{background:#eefbe9;color:#116b24;font-weight:900;text-transform:uppercase;font-size:13px}.rank-row:last-child{border-bottom:0}
.rank-team{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:800}.role-btn{border:1px solid #aeb8c6;background:#fff;color:#222;border-radius:8px;font-weight:900;padding:10px}.role-btn.active{background:#13a538;color:#fff;border-color:#13a538}.rank-pill{background:#0d8b2f;color:#fff;padding:5px 8px;border-radius:14px;font-size:12px}.rank-number{font-weight:900;color:#ffe600;margin-left:auto;margin-right:12px}small{color:#6e7784;font-weight:800}
@media(max-width:700px){.rank-head,.rank-row{grid-template-columns:1fr;}.role-btn{width:100%;}.rank-team{margin-bottom:8px}}


/* Lato branded v9 additions */
.brand-logo{height:44px;width:auto;background:#fff;border-radius:6px;padding:3px}
.login-logo{max-width:150px;background:#fff;border-radius:8px;padding:4px;margin-bottom:10px}
.side-logo{max-width:150px;background:#fff;border-radius:8px;padding:5px;margin-bottom:15px}
.flag-img{width:42px;height:28px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.15);background:#fff}
.rank-team .flag-img{width:38px;height:25px}
.intro-wrap,.terms-wrap,.admin-wrap{max-width:1180px;margin:30px auto;padding:0 16px}
.intro-hero{text-align:center;margin:20px auto 25px}
.intro-logo{max-width:150px;background:#fff;border-radius:10px;padding:6px}
.intro-hero h1{font-size:34px;margin:14px 0 8px;color:#fff}
.intro-hero p{color:#dce6f2;font-size:18px}
.intro-grid,.admin-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.intro-panel,.admin-panel,.terms-panel{background:#111820;border:1px solid #344150;border-radius:12px;padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.28)}
.intro-panel h2,.admin-panel h2{color:#79c832;margin-top:0}
.how-list{line-height:1.75;font-size:16px;color:#eef5ff}
.how-list b{color:#fff200}
.scoring-strip{display:flex;gap:15px;flex-wrap:wrap;margin:22px 0}
.scoring-strip span{background:#0a111a;border:1px solid #344150;border-radius:8px;padding:12px 14px}
.scoring-strip b{color:#79c832}.scoring-strip .red{color:#ff4b4b}
.terms-form{margin-top:20px}
.terms-check{display:flex;gap:12px;align-items:center;background:#0a111a;border:1px solid #344150;border-radius:8px;padding:14px;margin-bottom:16px}
.terms-check input{width:auto!important;margin:0!important}
#startBtn:disabled{opacity:.45;cursor:not-allowed}
.prize-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.prize-card{background:#0a111a;border:1px solid #344150;border-radius:10px;padding:12px;text-align:center}
.prize-card img{width:100%;height:150px;object-fit:contain;border-radius:8px;background:#fff}
.prize-card h3{margin:10px 0 0;color:#fff}
.leaderboard-prizes{margin-bottom:20px}
.leaderboard-prizes .prize-card img{height:110px}
.score-card{background:#131d27;border:1px solid #303c49;border-radius:8px;padding:18px;margin-top:18px}
.last-updated{background:#0a111a;border:1px solid #344150;padding:12px;border-radius:8px}
.admin-panel{margin-bottom:22px}
.admin-panel input,.admin-panel select{width:100%;padding:9px;border-radius:6px;border:1px solid #445366;background:#0a111a;color:#fff}
.admin-panel table input,.admin-panel table select{min-width:60px;padding:6px;font-size:12px}
.standings-scroll{overflow-x:auto}
.small-note{color:#b9c1cc;font-size:12px}
@media(max-width:900px){
  .intro-grid,.admin-grid,.prize-grid{grid-template-columns:1fr}
  .brand-logo{height:36px}
  .intro-hero h1{font-size:25px}
}


/* ============================
   V10 Lato Champions UI Update
   Responsive football game theme
   ============================ */

:root{
  --lato-blue:#112b7b;
  --lato-blue-dark:#060c1e;
  --lato-cyan:#00d8ff;
  --lato-yellow:#ffd028;
  --lato-purple:#25149a;
  --lato-green:#7ad43a;
  --lato-white:#ffffff;
  --lato-panel:#0b1018;
  --lato-line:rgba(255,255,255,.18);
}

/* Global background */
body,
.dark-page,
.v10-blue-page{
  background:
    radial-gradient(circle at 20% 10%, rgba(0,216,255,.18), transparent 24%),
    radial-gradient(circle at 80% 15%, rgba(255,208,40,.08), transparent 22%),
    linear-gradient(rgba(2,5,14,.58), rgba(2,5,14,.86)),
    url('assets/backgrounds/blue-game-bg.jpg') center/cover fixed no-repeat !important;
  color:#fff;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at bottom, rgba(0,80,255,.12), transparent 45%);
  z-index:-1;
}

/* Header */
.game-topbar,
.topbar{
  height:auto !important;
  min-height:86px;
  padding:16px clamp(14px,3vw,42px) !important;
  background:rgba(3,7,18,.88) !important;
  border-bottom:1px solid rgba(0,216,255,.28) !important;
  box-shadow:0 10px 35px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
}

.game-brand,
.brand{
  gap:16px !important;
}

.brand-logo{
  height:62px !important;
  max-width:125px;
  background:#fff;
  border-radius:7px;
  padding:4px;
  object-fit:contain;
  box-shadow:0 0 18px rgba(0,216,255,.25);
}

.unleash-logo-small{
  height:62px;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(255,208,40,.25));
}

.brand-divider{
  width:1px;
  height:64px;
  background:linear-gradient(transparent,#fff,transparent);
  opacity:.55;
}

.brand-title{
  display:flex;
  flex-direction:column;
  line-height:1;
  text-transform:uppercase;
}

.brand-kicker{
  color:#fff;
  font-size:21px;
  font-weight:900;
  letter-spacing:1px;
  text-shadow:0 3px 2px #000;
}

.brand-title strong{
  color:var(--lato-cyan);
  font-size:30px;
  font-weight:1000;
  letter-spacing:1px;
  text-shadow:0 3px 0 rgba(0,0,0,.55);
}

.game-user{
  font-size:15px;
  text-align:right;
}
.game-user b{color:#39d85a !important}
.game-user a{color:#fff !important;display:inline-block;margin-top:7px}

/* Login */
.v10-login-page{
  background:
    linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.82)),
    url('assets/backgrounds/main-screen.jpg') center/cover no-repeat fixed !important;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  padding:25px;
}

.v10-login-shell{
  width:min(880px,100%);
  text-align:center;
}

.v10-login-hero{
  margin-bottom:20px;
}

.v10-logo-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:42px;
  margin-bottom:20px;
}

.v10-login-lato{
  width:180px;
  background:#fff;
  padding:6px;
  border-radius:6px;
  box-shadow:0 0 20px rgba(0,216,255,.28);
}

.v10-login-unleash{
  width:190px;
  filter:drop-shadow(0 0 10px rgba(255,208,40,.28));
}

.v10-divider{
  width:2px;
  height:120px;
  background:linear-gradient(transparent,#fff,transparent);
  opacity:.75;
}

.v10-login-hero h1{
  margin:0;
  text-transform:uppercase;
  color:#fff;
  font-size:clamp(32px,5vw,52px);
  line-height:.95;
  letter-spacing:1px;
  text-shadow:0 4px 0 #000;
}

.v10-login-hero h1 span{
  color:var(--lato-cyan);
  font-size:1.08em;
  text-shadow:0 4px 0 #001845;
}

.v10-login-card{
  width:min(630px,100%);
  margin:0 auto;
  background:rgba(8,13,22,.9);
  border:1px solid rgba(255,255,255,.18);
  border-radius:15px;
  padding:clamp(22px,4vw,42px);
  box-shadow:0 30px 90px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
}

.v10-login-card h2{
  font-size:34px;
  margin:0 0 12px;
}
.v10-login-card h2 span{
  color:#1d68ff;
}

.login-help{
  color:#fff200;
  font-size:14px;
  margin:14px 0 18px;
}

.v10-form{
  display:grid;
  gap:16px;
  margin-top:18px;
}

.input-icon{
  display:flex;
  align-items:center;
  gap:12px;
  background:#0b121d;
  border:1px solid #405166;
  border-radius:9px;
  padding:0 16px;
  color:#fff;
}

.input-icon input{
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:#fff !important;
  width:100%;
  margin:0 !important;
  padding:18px 0 !important;
  font-size:17px;
}

.v10-primary-btn,
.btn{
  background:linear-gradient(180deg,#3326ff,#150787) !important;
  border:1px solid rgba(0,216,255,.25) !important;
  color:#fff !important;
  box-shadow:0 0 18px rgba(50,38,255,.35);
  transition:.2s ease;
}
.v10-primary-btn:hover,
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 26px rgba(0,216,255,.42);
}

.v10-note{
  color:#cbd5e1;
  font-size:14px;
  margin-top:22px;
}

.v10-deadline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border:1px solid #b93636;
  background:linear-gradient(135deg,rgba(104,20,24,.52),rgba(27,12,20,.78));
  border-radius:12px;
  padding:22px;
  margin-top:24px;
  color:#fff;
}
.v10-deadline b{
  color:#00f0ff;
  font-size:22px;
}
.v10-deadline strong{
  color:#00f0ff;
  font-size:26px;
}
.calendar-icon{font-size:38px}
.v10-login-footer{
  color:#aeb8c8;
  margin-top:26px;
}

/* App layout */
.app-wrap{
  max-width:1300px !important;
  padding:0 18px !important;
}

.app{
  grid-template-columns:300px 1fr !important;
  background:rgba(4,8,16,.88) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:16px !important;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  overflow:hidden;
}

.sidebar{
  background:rgba(5,9,17,.86) !important;
  border-right:1px solid rgba(255,255,255,.12) !important;
  padding:30px 24px !important;
}

.sidebar h3{
  color:var(--lato-green) !important;
  font-size:19px;
  letter-spacing:.5px;
}

.step{
  color:#fff !important;
  background:transparent;
  margin-bottom:11px !important;
}
.step.active{
  background:linear-gradient(90deg,rgba(0,216,255,.25),rgba(23,17,120,.25)) !important;
  border:1px solid rgba(0,216,255,.18);
}
.circle{
  background:#c8ced8 !important;
}
.step.active .circle{
  background:linear-gradient(180deg,#39e66f,#0bb050) !important;
}

.content{
  background:#fff !important;
  color:#121722 !important;
  border-radius:15px !important;
  margin:20px !important;
  padding:clamp(20px,4vw,44px) !important;
  min-height:640px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 20px 50px rgba(0,0,0,.28);
}

.eyebrow{
  color:#181b83 !important;
  letter-spacing:.7px;
}
.content h2{
  color:#191783 !important;
  font-size:clamp(32px,5vw,46px) !important;
}
.question{
  font-size:clamp(21px,3vw,31px) !important;
}
.hint{font-size:18px}

.progress{
  color:#16136b !important;
  font-size:22px;
  font-weight:1000;
}

/* Ranking table and selections */
.rank-table{
  border:1px solid #d9e0ea !important;
  border-radius:14px !important;
  overflow:hidden;
  background:#fff;
}
.rank-head{
  background:#eefbe9 !important;
  color:#17742b;
  font-weight:900;
}
.rank-row{
  min-height:72px;
}
.rank-row:nth-child(even){
  background:#fafcff;
}
.rank-team{
  font-size:19px;
  font-weight:700;
}
.role-btn,
.team-btn{
  border-radius:8px !important;
}
.role-btn.active,
.team-btn.active .check,
.check{
  transition:.2s ease;
}
.role-btn.active{
  background:#1c178f !important;
  color:#fff !important;
  box-shadow:0 0 0 2px rgba(0,216,255,.18);
}
.team-btn.active{
  background:#f1fff4 !important;
  box-shadow:inset 5px 0 0 #17158f;
}
.team-btn.active .check{
  background:#17158f !important;
  border-color:#17158f !important;
}
.flag-img{
  width:44px !important;
  height:30px !important;
  object-fit:cover;
  border-radius:4px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
}

/* Intro page */
.v10-intro-page{
  max-width:1260px;
  margin:28px auto 50px;
  padding:0 18px;
}

.v10-intro-hero-card{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:center;
  border-radius:22px;
  padding:clamp(22px,4vw,46px);
  background:
    linear-gradient(135deg,rgba(5,14,36,.92),rgba(0,42,130,.68)),
    url('assets/backgrounds/blue-game-bg.jpg') center/cover no-repeat;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
  overflow:hidden;
}

.v10-intro-hero-card:after{
  content:"";
  position:absolute;
  inset:auto -80px -90px auto;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,216,255,.25),transparent 65%);
}

.v10-mini-logo-row{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:24px;
}
.v10-mini-logo-row img:first-child{
  width:145px;
  background:#fff;
  padding:6px;
  border-radius:8px;
}
.v10-mini-logo-row img:last-child{
  width:150px;
}

.v10-intro-copy h1{
  font-size:clamp(38px,6vw,68px);
  line-height:.95;
  margin:0;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 4px 0 #000;
}
.v10-lead{
  font-size:20px;
  color:#dceeff;
  max-width:620px;
}
.v10-hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.v10-hero-tags span{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.28);
  color:#fff200;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
}

.v10-prize-spotlight img{
  width:100%;
  border-radius:18px;
  filter:drop-shadow(0 22px 35px rgba(0,0,0,.5));
}

.v10-intro-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  margin-top:24px;
}

.v10-glass-panel,
.intro-panel,
.admin-panel,
.terms-panel{
  background:rgba(5,13,29,.84) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:18px !important;
  padding:clamp(20px,3vw,34px) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
}
.v10-glass-panel h2,
.intro-panel h2,
.admin-panel h2{
  color:#00d8ff !important;
  font-size:30px;
}

.v10-step-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.v10-step-cards div{
  display:flex;
  gap:13px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:15px;
}
.v10-step-cards b{
  color:#fff200;
  font-size:24px;
}
.v10-step-cards span{
  color:#eaf2ff;
  line-height:1.45;
}

.v10-prize-card-big img{
  width:100%;
  border-radius:16px;
  background:#fff;
}

.terms-check{
  color:#fff;
}
.v10-terms-form{
  margin-top:24px;
}
.v10-terms-form .btn{
  width:100%;
  margin-top:12px;
}
.v10-deadline-compact strong{
  font-size:20px;
}

/* Prize cards */
.prize-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
}
.prize-card{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:15px !important;
}
.prize-card img{
  background:#fff;
  object-fit:contain;
}

/* Leaderboard/Admin */
.leader-layout{
  background:rgba(5,13,29,.86) !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.leader-main h1,
.admin-wrap h1{
  color:#00d8ff !important;
}
table{
  border-radius:12px;
  overflow:hidden;
}
th{
  background:#121a2a !important;
}
td{
  background:rgba(255,255,255,.02);
}
.rank{
  background:linear-gradient(180deg,#ffe86b,#e8a300) !important;
}

/* Roadmap */
.road-card{
  background:rgba(5,13,29,.88) !important;
  border-radius:18px !important;
}
.canvas-wrap{
  background:linear-gradient(135deg,#071321,#001d58) !important;
}

/* Mobile */
@media(max-width:960px){
  .game-topbar,
  .topbar{
    align-items:flex-start !important;
    flex-direction:column;
    gap:12px;
  }
  .game-brand,
  .brand{
    width:100%;
    gap:10px !important;
  }
  .brand-logo{height:48px !important}
  .unleash-logo-small{height:48px}
  .brand-divider{height:48px}
  .brand-kicker{font-size:14px}
  .brand-title strong{font-size:20px}
  .game-user{
    text-align:left;
    width:100%;
  }

  .v10-login-page{
    padding:18px;
    align-items:flex-start;
  }
  .v10-logo-row{
    gap:14px;
  }
  .v10-login-lato{width:118px}
  .v10-login-unleash{width:118px}
  .v10-divider{height:74px}
  .v10-login-card{
    padding:22px 18px;
  }
  .v10-login-card h2{font-size:26px}
  .v10-deadline{
    flex-direction:column;
    text-align:center;
  }
  .v10-deadline strong{font-size:21px}

  .app{
    grid-template-columns:1fr !important;
  }
  .sidebar{
    padding:18px !important;
    max-height:230px;
    overflow:auto;
  }
  .content{
    margin:10px !important;
    padding:18px !important;
    min-height:auto;
  }
  .rank-head{
    display:none !important;
  }
  .rank-row{
    display:grid !important;
    grid-template-columns:1fr;
    gap:8px;
    padding:14px;
    border-bottom:1px solid #e1e6ef;
  }
  .rank-team{
    margin-bottom:5px;
  }
  .rank-row .role-btn{
    width:100%;
    padding:12px;
    font-size:15px;
  }
  .match-grid{
    grid-template-columns:1fr !important;
  }
  .nav{
    flex-direction:column;
    gap:12px;
  }
  .nav button{
    width:100%;
  }

  .v10-intro-hero-card,
  .v10-intro-grid{
    grid-template-columns:1fr;
  }
  .v10-mini-logo-row{
    justify-content:center;
  }
  .v10-intro-copy{
    text-align:center;
  }
  .v10-hero-tags{
    justify-content:center;
  }
  .v10-step-cards{
    grid-template-columns:1fr;
  }
  .prize-grid{
    grid-template-columns:1fr;
  }
  .leader-layout{
    grid-template-columns:1fr !important;
    margin:15px;
  }
  .leader-side{
    display:block !important;
    border-right:0 !important;
  }
  .leader-main{
    overflow:auto;
  }
  table{
    min-width:760px;
  }
}

@media(max-width:520px){
  .v10-login-hero h1{
    font-size:30px;
  }
  .v10-logo-row{
    flex-wrap:wrap;
  }
  .v10-divider{
    display:none;
  }
  .brand-title strong{
    font-size:17px;
  }
  .brand-kicker{
    font-size:12px;
  }
  .unleash-logo-small{
    display:none;
  }
  .v10-intro-copy h1{
    font-size:34px;
  }
}

.leaderboard-prize-visual{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:14px;
  margin:18px 0 22px;
  text-align:center;
}
.leaderboard-prize-visual img{
  width:min(520px,100%);
  border-radius:14px;
  background:#fff;
}
.leaderboard-prize-visual p{
  margin:12px 0 0;
  color:#fff;
}


/* ============================
   V11 Global Background + Intro Fix
   ============================ */
html, body{
  min-height:100%;
}

body,
body.login-bg,
body.dark-page,
body.v10-blue-page,
.v10-login-page{
  background:
    linear-gradient(135deg, rgba(0, 8, 30, .72), rgba(0, 20, 80, .72)),
    url('assets/backgrounds/blue-game-bg.jpg') center center / cover fixed no-repeat !important;
  color:#fff;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 15%, rgba(0,216,255,.20), transparent 24%),
    radial-gradient(circle at 80% 15%, rgba(255,208,40,.10), transparent 20%),
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.42));
}

/* Make every page panel readable on the common background */
.login-card,
.v10-login-card,
.app,
.leader-layout,
.road-card,
.intro-panel,
.admin-panel,
.terms-panel,
.v10-glass-panel,
.v10-intro-hero-card{
  backdrop-filter: blur(12px);
}

/* Stronger intro styling */
.v10-intro-page{
  max-width:1280px;
  margin:28px auto 60px;
  padding:0 18px;
}

.v10-intro-hero-card{
  background:
    linear-gradient(135deg, rgba(3, 15, 55, .88), rgba(8, 26, 95, .72)),
    url('assets/backgrounds/blue-game-bg.jpg') center/cover no-repeat !important;
  border:1px solid rgba(255,255,255,.20);
}

.v10-glass-panel{
  background:linear-gradient(160deg, rgba(5,16,45,.88), rgba(2,8,28,.82)) !important;
  border:1px solid rgba(0,216,255,.22) !important;
}

.v10-step-cards div{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}

.v10-prize-spotlight img,
.v10-prize-card-big img,
.leaderboard-prize-visual img{
  box-shadow:0 18px 45px rgba(0,0,0,.35);
}

.accepted-terms{
  justify-content:center;
  color:#eafff0;
  font-weight:800;
}

.start-link{
  display:block;
  text-align:center;
  margin-top:14px;
  text-decoration:none;
}

/* Mobile responsiveness improvements */
@media(max-width:960px){
  body,
  body.login-bg,
  body.dark-page,
  body.v10-blue-page,
  .v10-login-page{
    background-attachment: scroll !important;
  }

  .v10-intro-hero-card,
  .v10-intro-grid{
    grid-template-columns:1fr !important;
  }

  .v10-intro-copy,
  .v10-prize-panel{
    text-align:center;
  }

  .v10-mini-logo-row,
  .v10-hero-tags{
    justify-content:center;
  }

  .v10-step-cards{
    grid-template-columns:1fr !important;
  }

  .v10-prize-spotlight img{
    max-width:650px;
    margin:auto;
    display:block;
  }
}

@media(max-width:560px){
  .v10-intro-page{
    padding:0 12px;
    margin-top:16px;
  }

  .v10-intro-hero-card,
  .v10-glass-panel{
    border-radius:16px !important;
    padding:18px !important;
  }

  .v10-mini-logo-row{
    gap:12px;
    flex-wrap:wrap;
  }

  .v10-mini-logo-row img:first-child{
    width:120px;
  }

  .v10-mini-logo-row img:last-child{
    width:120px;
  }

  .v10-intro-copy h1{
    font-size:31px !important;
  }

  .v10-lead{
    font-size:16px;
  }

  .v10-step-cards div{
    padding:13px;
  }

  .terms-check{
    align-items:flex-start;
    text-align:left;
  }
}


/* ============================
   V12 Font + Logo Cleanup
   ============================ */

/* Custom headline font.
   Place NexaRustSlab-Trial-Black3.ttf in /public/assets/fonts/ */
@font-face {
  font-family: 'NexaRustSlab-Trial-Black3';
  src: url('assets/fonts/NexaRustSlab-Trial-Black3.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Apply Nexa Rust Slab only to the main contest headline */
.v10-login-hero h1,
.v10-intro-copy h1,
.main-title h1,
.hero-title,
h1.contest-title {
  font-family: 'NexaRustSlab-Trial-Black3', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif !important;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Keep headline readable across devices */
.v10-login-hero h1 {
  line-height: .98 !important;
}

.v10-intro-copy h1 {
  line-height: .98 !important;
}

/* Remove white background, padding, border radius and shadow from Lato logo across the project */
.brand-logo,
.login-logo,
.v10-login-lato,
.v10-mini-logo-row img:first-child,
.intro-logo,
.side-logo,
.v10-login-lato,
.v10-mini-logo-row img:first-child,
.v10-login-lato,
.v10-login-lato img {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Extra specific overrides for earlier logo CSS */
.game-brand .brand-logo,
.brand .brand-logo,
.logo img,
.v10-logo-row .v10-login-lato,
.v10-mini-logo-row img:first-child {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* Terms checkbox should be prominent and accessible */
.terms-check {
  cursor: pointer;
}

.terms-check input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: #00d8ff;
  flex: 0 0 auto;
}

#startBtn:disabled,
.v10-primary-btn:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

@media(max-width:560px){
  .v10-login-hero h1,
  .v10-intro-copy h1,
  .main-title h1,
  .hero-title,
  h1.contest-title {
    letter-spacing: .5px;
  }
}


/* V13 image flag and transparent prize PNG update */
.flag-img {
  width: 44px;
  height: 30px;
  object-fit: cover;
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}

.v10-prize-spotlight img,
.v10-prize-card-big img {
  width: 100%;
  max-width: 620px;
  height: auto;
  object-fit: contain;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

@media(max-width:560px){
  .flag-img {
    width: 36px;
    height: 24px;
  }
}