/* V157 — readable setup, compact match, keyboard-safe answer and complete result sheets */
@media (max-width:820px){
  #root .topbar{position:relative!important;top:auto!important;inset:auto!important;margin:0 0 8px!important;transform:none!important}
  #root .mode-switch.mode-switch--three{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;padding:7px!important;background:rgba(244,249,245,.96)!important;
    border:1px solid rgba(104,139,120,.35)!important;
  }
  #root .mode-switch.mode-switch--three button{
    opacity:1!important;visibility:visible!important;color:#173e32!important;
    min-height:72px!important;height:auto!important;padding:8px 5px!important;
    display:grid!important;grid-template-columns:1fr!important;place-items:center!important;
    align-content:center!important;gap:5px!important;text-align:center!important;
    background:rgba(255,255,255,.96)!important;border:1px solid #ceddd4!important;
    box-shadow:0 5px 14px rgba(23,63,48,.08)!important;
  }
  #root .mode-switch.mode-switch--three button>span{
    width:34px!important;height:34px!important;display:grid!important;place-items:center!important;
    background:#e6f0e9!important;color:#155c42!important;border:1px solid #c7dccc!important;
    opacity:1!important;font-size:20px!important;
  }
  #root .mode-switch.mode-switch--three button div{display:grid!important;gap:2px!important;min-width:0!important}
  #root .mode-switch.mode-switch--three button b{
    display:block!important;color:#173e32!important;opacity:1!important;font-size:12px!important;
    font-weight:900!important;line-height:1.12!important;text-shadow:none!important;
  }
  #root .mode-switch.mode-switch--three button small{
    display:block!important;color:#60776d!important;opacity:1!important;font-size:9.5px!important;
    font-weight:700!important;line-height:1.18!important;text-shadow:none!important;
  }
  #root .mode-switch.mode-switch--three button em{display:none!important}
  #root .mode-switch.mode-switch--three button.active{
    background:linear-gradient(145deg,#0e7651,#07583f)!important;border-color:#e4bd5e!important;
    box-shadow:0 9px 22px rgba(4,71,48,.24)!important;
  }
  #root .mode-switch.mode-switch--three button.active>span{background:#f1d27b!important;color:#164836!important;border-color:#ffe6a2!important}
  #root .mode-switch.mode-switch--three button.active b,
  #root .mode-switch.mode-switch--three button.active small{color:#fff!important}

  #root .app-shell.is-match-started{padding-top:6px!important}
  #root .app-shell.is-match-started .topbar{display:none!important}
  #root .app-shell.is-match-started .main-grid{padding:0 0 104px!important}
  #root .app-shell.is-match-started .round-arena{
    margin:0!important;border-radius:18px!important;overflow:visible!important;scroll-margin-top:6px!important;
  }
  #root .app-shell.is-match-started .round-scoreboard{
    position:sticky!important;top:5px!important;z-index:270!important;
    grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr)!important;
    gap:5px!important;min-height:96px!important;padding:7px 6px!important;border-radius:17px 17px 0 0!important;
  }
  #root .app-shell.is-match-started .round-team{
    min-width:0!important;padding:5px!important;gap:5px!important;border-radius:13px!important;
    display:grid!important;grid-template-columns:40px minmax(0,1fr)!important;align-items:center!important;text-align:left!important;
  }
  #root .app-shell.is-match-started .round-team--right{grid-template-columns:minmax(0,1fr) 40px!important;text-align:right!important}
  #root .app-shell.is-match-started .round-team--right .club-badge{order:2!important}
  #root .app-shell.is-match-started .round-team>div:not(.club-badge){min-width:0!important;gap:2px!important}
  #root .app-shell.is-match-started .round-team b{
    display:block!important;font-size:10.5px!important;line-height:1.08!important;white-space:normal!important;
    overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important;
  }
  #root .app-shell.is-match-started .round-team span{display:block!important;font-size:7.5px!important;line-height:1.1!important}
  #root .app-shell.is-match-started .round-arena .club-badge--lg{width:40px!important;height:40px!important;border-radius:11px!important}
  #root .app-shell.is-match-started .timer-ring{width:54px!important;height:54px!important;border-width:4px!important}
  #root .app-shell.is-match-started .timer-ring strong{font-size:19px!important}
  #root .app-shell.is-match-started .timer-ring span{font-size:6px!important;margin-top:2px!important}
  #root .app-shell.is-match-started .round-content{padding:8px!important}
  #root .app-shell.is-match-started .round-heading-row{
    position:relative!important;top:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;gap:7px!important;margin:0 0 7px!important;padding:7px 8px!important;
  }
  #root .app-shell.is-match-started .round-heading-row h3{font-size:17px!important;line-height:1.12!important;margin:3px 0 0!important}
  #root .app-shell.is-match-started .round-kicker{font-size:7px!important;padding:5px 7px!important}
  #root .app-shell.is-match-started .round-back-button{min-height:36px!important;height:36px!important;padding:0 9px!important;font-size:8.5px!important;white-space:nowrap!important}
  #root .app-shell.is-match-started .round-play-grid{display:block!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
  #root .app-shell.is-match-started .round-player-choice{padding:7px!important;margin:0 0 7px!important;border-radius:12px!important}
  #root .app-shell.is-match-started .round-player-choice>span{margin:0 0 5px!important;font-size:7px!important}
  #root .app-shell.is-match-started .round-player-choice .responder-tabs{display:flex!important;width:100%!important;gap:5px!important}
  #root .app-shell.is-match-started .round-player-choice .responder-tabs button{flex:1!important;min-height:34px!important;padding:5px!important;font-size:8.5px!important}

  #root .app-shell.is-match-started .answer-area,
  #root .app-shell.is-match-started .answer-panel{
    position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;z-index:30!important;
    width:100%!important;max-width:none!important;margin:0!important;padding:8px!important;min-height:0!important;
    border-radius:14px!important;box-shadow:0 9px 23px rgba(28,62,48,.13)!important;
  }
  #root .app-shell.is-match-started .answer-area>label{margin:0 0 5px!important;font-size:8px!important}
  #root .app-shell.is-match-started .answer-box{
    display:grid!important;grid-template-columns:minmax(0,1fr) 90px 62px!important;gap:5px!important;align-items:center!important;
  }
  #root .app-shell.is-match-started .answer-box input,
  #root .app-shell.is-match-started .answer-box button{
    width:100%!important;min-width:0!important;height:44px!important;min-height:44px!important;margin:0!important;border-radius:11px!important;
  }
  #root .app-shell.is-match-started .answer-box input{font-size:16px!important;padding:0 9px!important;scroll-margin-bottom:12px!important}
  #root .app-shell.is-match-started .answer-box button{font-size:9.5px!important;line-height:1.05!important;padding:0 4px!important;white-space:normal!important}
  #root .app-shell.is-match-started .player-suggestions{
    max-height:none!important;height:auto!important;overflow:visible!important;margin-top:7px!important;padding:7px!important;border-radius:12px!important;
  }
  #root .app-shell.is-match-started .player-suggestions__label{margin:0 2px 6px!important;font-size:7px!important}
  #root .app-shell.is-match-started .player-suggestions__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  #root .app-shell.is-match-started .player-suggestions button{min-height:40px!important;padding:5px 6px!important;grid-template-columns:29px minmax(0,1fr)!important;gap:6px!important}
  #root .app-shell.is-match-started .player-suggestions .player-suggestion-flag{width:29px!important;height:29px!important;font-size:16px!important;border-radius:8px!important}
  #root .app-shell.is-match-started .player-suggestions button b{font-size:10.5px!important;line-height:1.08!important}
  #root .app-shell.is-match-started .player-suggestions button small{font-size:8px!important;line-height:1.15!important}
  #root .app-shell.is-match-started .round-arena .feedback{min-height:34px!important;margin:7px 0 0!important;padding:7px!important;font-size:9px!important}

  body.wos-mobile-keyboard-open .mobile-app-nav-v154,
  body.kk-answer-focus .mobile-app-nav-v154,
  body.kk-result-open .mobile-app-nav-v154{display:none!important}
  body.wos-mobile-keyboard-open #root .app-shell.is-match-started,
  body.kk-answer-focus #root .app-shell.is-match-started{padding-bottom:8px!important}
  body.wos-mobile-keyboard-open #root .app-shell.is-match-started .main-grid,
  body.kk-answer-focus #root .app-shell.is-match-started .main-grid{padding-bottom:28px!important}
  body.wos-mobile-keyboard-open #root .app-shell.is-match-started .round-scoreboard,
  body.kk-answer-focus #root .app-shell.is-match-started .round-scoreboard{position:relative!important;top:auto!important}
  body.wos-mobile-keyboard-open #root .app-shell.is-match-started .round-player-choice,
  body.kk-answer-focus #root .app-shell.is-match-started .round-player-choice{display:none!important}

  body.kk-result-open{overflow:hidden!important}
  body.kk-result-open #root .modal-backdrop{
    z-index:7000!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;
    padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))!important;
    overflow:auto!important;overscroll-behavior:contain!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  body.kk-result-open #root .modal-card{
    width:100%!important;max-width:560px!important;max-height:calc(100svh - 16px)!important;
    margin:auto!important;padding:12px!important;border-radius:20px!important;overflow:auto!important;
  }
  body.kk-result-open #root .modal-card__head{
    position:sticky!important;top:-12px!important;z-index:20!important;margin:-4px -4px 8px!important;padding:8px!important;
    background:rgba(255,255,255,.98)!important;border-radius:14px!important;box-shadow:0 5px 16px rgba(30,63,49,.09)!important;
  }
  body.kk-result-open #root .modal-card__head h3{font-size:20px!important;line-height:1.1!important;padding-right:4px!important}
  body.kk-result-open #root .modal-card__head button{flex:0 0 40px!important;width:40px!important;height:40px!important}
  body.kk-result-open #root .round-result-icon{width:58px!important;height:58px!important;margin:4px auto 9px!important;font-size:28px!important;animation:none!important}
  body.kk-result-open #root .round-result-modal>strong{font-size:18px!important;line-height:1.18!important}
  body.kk-result-open #root .round-result-score{margin:11px auto 8px!important}
  body.kk-result-open #root .round-result-score span{padding:8px!important}
  body.kk-result-open #root .round-candidate-grid{max-height:none!important;overflow:visible!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.kk-result-open #root .round-continue-button{position:sticky!important;bottom:0!important;z-index:15!important;margin-top:10px!important;min-height:48px!important}
}
@media (max-width:370px){
  #root .mode-switch.mode-switch--three button b{font-size:10px!important}
  #root .mode-switch.mode-switch--three button small{font-size:7.5px!important}
  #root .app-shell.is-match-started .answer-box{grid-template-columns:minmax(0,1fr) 78px 55px!important;gap:4px!important}
  #root .app-shell.is-match-started .player-suggestions__grid{grid-template-columns:1fr!important}
}