/* Final mockup-fidelity pass: global stadium + rounded top shell.
   Visual only. No DOM, navigation, data or training logic changes. */
:root{
  --mockup-shell-radius:30px;
}

html[data-ui="liquid-glass-v2"],
html[data-ui="liquid-glass-v2"] body{
  background:#080204!important;
}

/* The photographed stadium is the page itself, not a section background. */
html[data-ui="liquid-glass-v2"] body{
  min-height:100dvh!important;
  background:
    linear-gradient(180deg,rgba(6,7,14,.12) 0%,rgba(14,3,7,.22) 38%,rgba(6,0,2,.70) 100%),
    url("./stadium-background.jpg") center top/cover fixed no-repeat!important;
  background-size:cover!important;
  background-position:center top!important;
  background-attachment:fixed!important;
}

html[data-ui="liquid-glass-v2"] body .app-atmosphere{
  background:
    linear-gradient(180deg,rgba(7,8,15,.08) 0%,rgba(13,4,8,.18) 42%,rgba(6,0,2,.66) 100%),
    url("./stadium-background.jpg") center top/cover no-repeat!important;
  background-size:cover!important;
  background-position:center top!important;
  background-attachment:fixed!important;
  filter:saturate(1.14) contrast(1.07) brightness(.94)!important;
  opacity:1!important;
}

html[data-ui="liquid-glass-v2"] body .app-atmosphere::before{
  background:
    radial-gradient(circle at 86% 8%,rgba(255,255,255,.72) 0 2.5%,rgba(255,255,255,.20) 10%,transparent 25%),
    radial-gradient(circle at 12% 13%,rgba(255,255,255,.20),transparent 22%),
    linear-gradient(114deg,transparent 0 54%,rgba(220,18,47,.13) 70%,transparent 87%)!important;
  opacity:.92!important;
  mix-blend-mode:screen!important;
}

html[data-ui="liquid-glass-v2"] body .app-atmosphere::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.10) 45%,rgba(4,0,1,.50) 78%,rgba(3,0,1,.72) 100%)!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}

/* Every screen stays transparent so the same stadium remains visible throughout. */
html[data-ui="liquid-glass-v2"] body .screen,
html[data-ui="liquid-glass-v2"] body .home-screen,
html[data-ui="liquid-glass-v2"] body .mockup-home,
html[data-ui="liquid-glass-v2"] body .page-head,
html[data-ui="liquid-glass-v2"] body .day-detail-head{
  background:transparent!important;
}

/* Match the mockup's soft top silhouette instead of a square header cut. */
html[data-ui="liquid-glass-v2"] body #today.screen.active{
  border-radius:var(--mockup-shell-radius) var(--mockup-shell-radius) 0 0!important;
}

html[data-ui="liquid-glass-v2"] body #today .mockup-topbar{
  border-radius:var(--mockup-shell-radius) var(--mockup-shell-radius) 0 0!important;
  background:linear-gradient(180deg,rgba(10,10,17,.20) 0%,rgba(10,5,8,.06) 58%,transparent 100%)!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}

@media(max-width:430px){
  html[data-ui="liquid-glass-v2"] body,
  html[data-ui="liquid-glass-v2"] body .app-atmosphere{
    background-position:center top!important;
    background-size:cover!important;
  }
}