/* V134 — mobile 3x3 footballer suggestions, fully inside the visual viewport. */
:root{--kk-player-suggestions-height:156px}

/* Nine results use the same 3 x 3 geometry on desktop and mobile. */
#root .app-shell.is-match-started .player-suggestions__grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

@media (min-width:761px){
  #root .app-shell.is-match-started .player-suggestions{
    max-height:238px!important;
  }
  #root .app-shell.is-match-started .player-suggestions__grid{
    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 .player-suggestions,
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .player-suggestions{
    box-sizing:border-box!important;
    min-width:0!important;
    width:100%!important;
    margin-top:3px!important;
    padding:3px!important;
    border-radius:10px!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
    contain:layout paint style!important;
  }

  #root .app-shell.is-match-started .player-suggestions__label{
    height:13px!important;
    min-height:13px!important;
    margin:0 2px 2px!important;
    overflow:hidden!important;
    font-size:6.5px!important;
    line-height:13px!important;
    letter-spacing:.075em!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  #root .app-shell.is-match-started .player-suggestions__grid,
  body.wos-keyboard-open.wos-player-answer-active #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;
    gap:3px!important;
    width:100%!important;
    min-width:0!important;
    height:calc(100% - 15px)!important;
    min-height:0!important;
  }

  #root .app-shell.is-match-started .player-suggestions button,
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .player-suggestions button{
    display:grid!important;
    grid-template-columns:17px minmax(0,1fr)!important;
    align-items:center!important;
    gap:3px!important;
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    padding:2px 3px!important;
    overflow:hidden!important;
    border-radius:7px!important;
    text-align:left!important;
    touch-action:manipulation!important;
  }

  #root .app-shell.is-match-started .player-suggestion-flag,
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .player-suggestion-flag{
    width:17px!important;
    height:17px!important;
    min-width:17px!important;
    margin:0!important;
    border-radius:5px!important;
    font-size:12px!important;
  }

  #root .app-shell.is-match-started .player-suggestion-info{
    min-width:0!important;
    gap:0!important;
  }
  #root .app-shell.is-match-started .player-suggestion-info b,
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .player-suggestion-info b{
    display:-webkit-box!important;
    min-width:0!important;
    min-height:0!important;
    max-height:17px!important;
    overflow:hidden!important;
    font-size:7.2px!important;
    line-height:1.12!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
  }
  #root .app-shell.is-match-started .player-suggestion-info small,
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .player-suggestion-info small{
    display:none!important;
  }
}

/* Portrait keyboard scene: reserve an exact three-row panel and remove lower
   non-input rows only while the user is typing. Nothing is removed when the
   keyboard closes. */
@media (max-width:760px) and (orientation:portrait){
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .round-pass-status,
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .round-feedback-stack{
    display:none!important;
  }
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .round-content,
  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{
    min-height:0!important;
    overflow:hidden!important;
  }
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .answer-area{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
    padding:3px!important;
  }
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .answer-box{
    flex:0 0 auto!important;
  }
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .player-suggestions{
    flex:0 0 var(--kk-player-suggestions-height)!important;
    height:var(--kk-player-suggestions-height)!important;
    min-height:132px!important;
    max-height:158px!important;
  }
}

@media (max-width:380px) and (orientation:portrait), (max-height:560px) and (orientation:portrait){
  :root{--kk-player-suggestions-height:138px}
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .round-scoreboard{
    flex-basis:66px!important;
    min-height:66px!important;
  }
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .answer-box input{
    min-height:41px!important;
    height:41px!important;
  }
  body.wos-keyboard-open.wos-player-answer-active #root .app-shell.is-match-started .answer-box>button{
    min-height:32px!important;
    height:32px!important;
  }
}