/* V136 — true 3x3 footballer suggestions and a full-width mobile answer scene. */
:root{--kk-v136-side-gap:6px}

#root .app-shell.is-match-started .player-suggestions__grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,minmax(0,1fr))!important;
}

@media (max-width:760px), (orientation:landscape) and (pointer:coarse), (orientation:landscape) and (max-height:600px){
  #root .app-shell.is-match-started,
  #root .app-shell.is-match-started .main-grid,
  #root .app-shell.is-match-started .game-card,
  #root .app-shell.is-match-started .round-arena,
  #root .app-shell.is-match-started .round-content,
  #root .app-shell.is-match-started .round-play-grid,
  #root .app-shell.is-match-started .answer-area,
  #root .app-shell.is-match-started .answer-box,
  #root .app-shell.is-match-started .player-suggestions{
    box-sizing:border-box!important;
    min-width:0!important;
    max-width:none!important;
  }

  #root .app-shell.is-match-started .round-content,
  #root .app-shell.is-match-started .round-play-grid,
  #root .app-shell.is-match-started .answer-area,
  #root .app-shell.is-match-started .answer-box,
  #root .app-shell.is-match-started .player-suggestions{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    justify-self:stretch!important;
    align-self:stretch!important;
  }

  #root .app-shell.is-match-started .round-content{
    padding-left:var(--kk-v136-side-gap)!important;
    padding-right:var(--kk-v136-side-gap)!important;
  }
  #root .app-shell.is-match-started .round-play-grid{
    padding-left:3px!important;
    padding-right:3px!important;
  }
  #root .app-shell.is-match-started .answer-area{
    padding-left:4px!important;
    padding-right:4px!important;
  }

  #root .app-shell.is-match-started .player-suggestions{
    overflow:hidden!important;
  }
  #root .app-shell.is-match-started .player-suggestions__grid{
    width:100%!important;
    height:calc(100% - 15px)!important;
    min-height:0!important;
    gap:3px!important;
  }
  #root .app-shell.is-match-started .player-suggestions button{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
  }
}

@media (max-width:760px) and (orientation:portrait){
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .round-arena{
    left:0!important;
    right:0!important;
    width:100vw!important;
    max-width:100vw!important;
    transform:none!important;
  }
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .round-content{
    flex:1 1 auto!important;
    width:100vw!important;
    max-width:100vw!important;
    padding-left:var(--kk-v136-side-gap)!important;
    padding-right:var(--kk-v136-side-gap)!important;
  }
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .round-play-grid,
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .answer-area{
    width:100%!important;
    max-width:100%!important;
  }
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .player-suggestions{
    flex-basis:var(--kk-player-suggestions-height)!important;
    height:var(--kk-player-suggestions-height)!important;
    min-height:138px!important;
    max-height:164px!important;
  }
}

@media (max-width:390px) and (orientation:portrait){
  :root{--kk-v136-side-gap:4px}
  #root .app-shell.is-match-started .player-suggestions button{
    grid-template-columns:15px minmax(0,1fr)!important;
    gap:2px!important;
    padding:2px!important;
  }
  #root .app-shell.is-match-started .player-suggestion-flag{
    width:15px!important;
    height:15px!important;
    min-width:15px!important;
  }
  #root .app-shell.is-match-started .player-suggestion-info b{
    font-size:6.7px!important;
  }
}