:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  color:#f5f7f5;
  background:#06110c;
  color-scheme:dark;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:
    radial-gradient(circle at 80% 0,#123c29 0,transparent 34rem),
    #06110c;
}

button{font:inherit}

.shell{
  max-width:1080px;
  margin:auto;
  padding:0 22px 80px;
}

.topbar{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid #ffffff15;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand strong,
.brand span{
  display:block;
}

.brand span{
  margin-top:2px;
  font-size:12px;
  color:#8ca097;
}

.brand-mark{
  width:43px;
  height:43px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#20dc76;
  color:#05200f;
  font-weight:950;
}

.engine-status{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  letter-spacing:.09em;
  color:#91a69b;
}

.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#20dc76;
  box-shadow:0 0 0 5px #20dc7614;
}

.hero{
  max-width:780px;
  padding:65px 0 34px;
}

.eyebrow,
.section-head>div>span{
  color:#20dc76;
  font-size:11px;
  font-weight:850;
  letter-spacing:.17em;
}

.hero h1{
  margin:14px 0;
  font-size:clamp(43px,8vw,78px);
  line-height:.96;
  letter-spacing:-.055em;
}

.hero h1 em{
  font-style:normal;
  color:#20dc76;
}

.hero p{
  max-width:680px;
  color:#a2b2a9;
  line-height:1.7;
  font-size:16px;
}

.card,
.simulation{
  background:#0b1912;
  border:1px solid #ffffff14;
  border-radius:24px;
}

.upload-card{
  padding:18px;
}

.upload-zone{
  width:100%;
  min-height:220px;
  border:1px dashed #35664d;
  background:#09150f;
  border-radius:18px;
  color:white;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
}

.upload-zone:disabled{
  opacity:.55;
  cursor:default;
}

.upload-icon{
  width:55px;
  height:55px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:31px;
  color:#20dc76;
  background:#20dc7618;
}

.upload-zone strong{
  font-size:18px;
}

.upload-zone small,
.status,
.privacy{
  color:#82958a;
}

.preview-wrap{
  margin-top:14px;
  background:#030906;
  border-radius:16px;
  overflow:hidden;
  max-height:320px;
}

.preview-wrap img{
  display:block;
  width:100%;
  max-height:320px;
  object-fit:contain;
}

.primary{
  width:100%;
  margin-top:14px;
  padding:16px;
  border:0;
  border-radius:15px;
  background:#20dc76;
  color:#04200e;
  font-weight:900;
  font-size:16px;
  cursor:pointer;
}

.primary:disabled{
  opacity:.55;
}

.status{
  min-height:20px;
  text-align:center;
  font-size:13px;
}

.simulation{
  margin-top:30px;
  padding:22px;
}

.simulation-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.simulation-head h2{
  margin:7px 0 0;
  font-size:26px;
}

.timer-box{
  min-width:78px;
  padding:10px 13px;
  text-align:center;
  border-radius:14px;
  background:#07120d;
  border:1px solid #ffffff12;
}

.timer-box strong{
  display:block;
  font-size:22px;
}

.timer-box span{
  display:block;
  color:#758b7e;
  font-size:9px;
  letter-spacing:.12em;
}

.progress-shell{
  margin-top:20px;
  height:6px;
  overflow:hidden;
  border-radius:20px;
  background:#ffffff0d;
}

.progress{
  height:100%;
  width:0;
  border-radius:20px;
  background:#20dc76;
  transition:width .3s ease;
}

.stage-row{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  color:#789084;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}

.match-board{
  display:grid;
  gap:10px;
  margin-top:20px;
}

.scanner{
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  text-align:center;
  color:#a5b7ad;
}

.scanner-ring{
  width:46px;
  height:46px;
  border-radius:50%;
  border:3px solid #ffffff12;
  border-top-color:#20dc76;
  animation:spin .8s linear infinite;
}

.scanner small{
  color:#708479;
}

.sim-match{
  display:grid;
  grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);
  align-items:center;
  gap:15px;
  min-height:92px;
  padding:13px 15px;
  border:1px solid #ffffff11;
  border-radius:17px;
  background:#08150e;
  transition:
    border-color .25s,
    transform .25s,
    background .25s;
}

.sim-match.goal-flash{
  border-color:#20dc7688;
  background:#0d2518;
  transform:scale(1.01);
}

.sim-team{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.sim-team.away{
  flex-direction:row-reverse;
  text-align:right;
}

.sim-team strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.team-badge{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#ffffff0b;
  border:1px solid #ffffff12;
  font-size:10px;
  font-weight:900;
  color:#b8c9bf;
}

.score-zone{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.score{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:27px;
  font-variant-numeric:tabular-nums;
}

.score-zone small{
  margin-top:3px;
  color:#708479;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
}

.playing-dot{
  width:6px;
  height:6px;
  margin-bottom:3px;
  border-radius:50%;
  background:#20dc76;
  animation:pulse 1s ease-in-out infinite;
}

.playing-dot.finished{
  animation:none;
  background:#83968b;
}

.results{
  margin-top:36px;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:15px;
  margin-bottom:15px;
}

.section-head h2{
  margin:6px 0 0;
  font-size:29px;
}

.section-head button{
  border:1px solid #ffffff1d;
  background:#ffffff08;
  color:white;
  border-radius:12px;
  padding:10px 15px;
  cursor:pointer;
}

.result-list{
  display:grid;
  gap:10px;
}

.result-row{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) auto auto;
  gap:18px;
  align-items:center;
  padding:17px 18px;
  background:#0b1912;
  border:1px solid #ffffff12;
  border-radius:17px;
}

.result-match strong,
.result-match small{
  display:block;
}

.result-match small{
  margin-top:5px;
  color:#82948a;
  font-size:12px;
}

.prob{
  display:flex;
  gap:8px;
}

.prob span{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid #ffffff10;
  background:#ffffff07;
  color:#aebdb4;
  font-size:11px;
}

.prob b{
  color:white;
}

.pick{
  white-space:nowrap;
  padding:9px 12px;
  border-radius:11px;
  border:1px solid #20dc7645;
  background:#20dc7615;
  color:#4feb8f;
}

.privacy{
  margin-top:18px;
  text-align:center;
  font-size:11px;
}

.error-box{
  min-height:130px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  text-align:center;
  padding:20px;
  border-radius:16px;
  background:#24100f;
  border:1px solid #ff68682f;
}

.error-box span{
  color:#d1aaa7;
}

.hidden{
  display:none!important;
}

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

@keyframes pulse{
  0%,100%{opacity:.35}
  50%{opacity:1}
}

@media(max-width:700px){

  .shell{
    padding-inline:14px;
  }

  .topbar{
    min-height:74px;
  }

  .engine-status{
    font-size:9px;
  }

  .hero{
    padding-top:43px;
  }

  .hero h1{
    font-size:49px;
  }

  .simulation{
    padding:14px;
  }

  .simulation-head h2{
    font-size:21px;
  }

  .sim-match{
    grid-template-columns:minmax(0,1fr) 83px minmax(0,1fr);
    padding:12px 9px;
    gap:6px;
  }

  .sim-team{
    flex-direction:column;
    text-align:center;
    gap:5px;
  }

  .sim-team.away{
    flex-direction:column;
    text-align:center;
  }

  .sim-team strong{
    font-size:11px;
    white-space:normal;
  }

  .team-badge{
    width:32px;
    height:32px;
  }

  .score{
    font-size:23px;
  }

  .result-row{
    grid-template-columns:1fr;
  }

  .prob{
    flex-wrap:wrap;
  }

  .pick{
    justify-self:start;
  }

}