@media (max-width:820px){
  html,
  body,
  #root,
  #root .app-shell,
  #root .main-grid,
  .page-shell,
  .page-wrap,
  .screen-shell,
  .content-shell{
    background-color:transparent!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    background-size:cover!important;
    background-attachment:scroll!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  html{
    background-color:#123b34!important;
    background-image:linear-gradient(180deg,rgba(2,18,22,.01),rgba(2,18,22,.09)),url("./assets/kariyer-setup-stadium-ultrahd-v166.webp")!important;
  }
  body,
  #root,
  #root .app-shell,
  #root .main-grid,
  .page-shell,
  .page-wrap,
  .screen-shell,
  .content-shell{
    background-image:linear-gradient(180deg,rgba(2,18,22,.01),rgba(2,18,22,.09)),url("./assets/kariyer-setup-stadium-ultrahd-v166.webp")!important;
  }
  body.kk-match-active,
  body.kk-match-active #root,
  body.kk-match-active #root .app-shell,
  body.kk-match-active #root .main-grid,
  body.kk-match-active .page-shell,
  body.kk-match-active .page-wrap,
  body.kk-match-active .screen-shell,
  body.kk-match-active .content-shell{
    background-image:linear-gradient(180deg,rgba(2,18,22,.02),rgba(2,18,22,.11)),url("./assets/kariyer-player-stadium-ultrahd-v166.webp")!important;
  }
  body::before,body::after,#root::before,#root::after,.app-shell::before,.app-shell::after,.main-grid::before,.main-grid::after{content:none!important;display:none!important;background:none!important}

  #root .hero,
  #root .game-card,
  #root .player-card,
  #root .side-card,
  #root .round-arena,
  #root .answer-panel,
  #root .round-scoreboard{box-shadow:0 10px 28px rgba(0,22,25,.18),inset 0 1px 0 rgba(255,255,255,.84)!important}

  /* keep the 3 mode buttons in their own place */
  #root .mode-switch.mode-switch--three,
  #root .mode-switch.mode-switch--three button,
  #root .mode-switch.mode-switch--three button > span,
  #root .mode-switch.mode-switch--three button div{
    position:static!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    transform:none!important;translate:none!important;
  }
  #root .mode-switch.mode-switch--three{margin:0!important;isolation:auto!important}

  /* make hero action buttons fully readable */
  #root .hero-actions{display:grid!important;grid-template-columns:minmax(0,1.02fr) minmax(0,1.08fr)!important;gap:8px!important;margin-top:12px!important}
  #root .hero-actions .btn{min-width:0!important;width:100%!important;min-height:46px!important;padding:8px 8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #root .hero-actions .btn:last-child{font-size:10.5px!important;letter-spacing:-.01em!important;padding-inline:6px!important}

  /* remove duplicated lower info cards on mobile */
  #root .side-stack .progress-card,
  #root .side-stack .data-card{display:none!important}
  #root .side-stack{display:grid!important;gap:12px!important}
  #root .side-stack .history-card{margin-top:0!important}

  /* keep setup hero visually crisp */
  body:not(.kk-match-active) #root .hero{
    background:linear-gradient(180deg,rgba(6,25,28,.28),rgba(6,25,28,.16)),url("./assets/kariyer-setup-stadium-ultrahd-v166.webp") center center/cover no-repeat!important;
    border:1px solid rgba(255,255,255,.54)!important;
  }
  body:not(.kk-match-active) #root .hero h1,
  body:not(.kk-match-active) #root .hero p,
  body:not(.kk-match-active) #root .hero .eyebrow,
  body:not(.kk-match-active) #root .hero .hero-metrics b,
  body:not(.kk-match-active) #root .hero .hero-metrics span{color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.24)!important}

  /* match header still HD but light for mobile */
  #root .round-arena .round-scoreboard,
  #root .round-scoreboard{
    background:linear-gradient(180deg,rgba(7,20,24,.34),rgba(7,20,24,.22)),url("./assets/kariyer-player-stadium-ultrahd-v166.webp") center center/cover no-repeat!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.24)!important;
  }
  #root .round-arena .round-scoreboard::before{content:none!important;display:none!important}
  #root .round-team{background:rgba(7,24,18,.38)!important;border-color:rgba(255,255,255,.28)!important;color:#fff!important}
  #root .round-team span,
  #root .round-team b,
  #root .timer-ring strong,
  #root .timer-ring span{color:#fff!important}
  #root .timer-ring{background:rgba(7,24,18,.42)!important;border-color:rgba(255,255,255,.42)!important}
}

@media (max-width:430px){
  #root .hero-actions{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)!important;gap:7px!important}
  #root .hero-actions .btn{font-size:11px!important}
  #root .hero-actions .btn:last-child{font-size:10px!important;padding-inline:5px!important}
  #root .mode-switch.mode-switch--three button b{font-size:11.5px!important}
  #root .mode-switch.mode-switch--three button small{font-size:8.9px!important}
}