/* V212 — decisive Harf Avı mobile play compaction.
   Strongly reduces the top play area on phones so Menu / timer / Skip fit cleanly. */
@media (max-width: 820px), (pointer: coarse) {
  html body.ha-v111-playing #gameScreen.active .game-main,
  html body.ha-v111-playing #multiScreen.active .multi-game,
  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active .game-main,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .multi-game {
    grid-template-rows: 28px 22px minmax(0,1fr) !important;
    padding-top: 2px !important;
  }

  html body.ha-v111-playing #gameScreen.active .hud,
  html body.ha-v111-playing #multiScreen.active .hud,
  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active .hud,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .hud {
    display:grid !important;
    grid-template-columns: 66px minmax(68px,1fr) 66px !important;
    align-items:center !important;
    justify-items:stretch !important;
    gap:4px !important;
    width:100% !important;
    min-height:28px !important;
    height:28px !important;
    max-height:28px !important;
    margin:0 0 2px !important;
    padding:0 !important;
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  html body.ha-v111-playing #gameScreen.active .hud-left,
  html body.ha-v111-playing #gameScreen.active .hud-right,
  html body.ha-v111-playing #multiScreen.active .hud-left,
  html body.ha-v111-playing #multiScreen.active .hud-right,
  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active .hud-left,
  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active .hud-right,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .hud-left,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .hud-right {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    min-height:28px !important;
    height:28px !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
  }

  html body.ha-v111-playing #gameScreen.active .hud .pill,
  html body.ha-v111-playing #multiScreen.active .hud .pill,
  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active .hud .pill,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .hud .pill {
    display:none !important;
  }

  html body.ha-v111-playing #gameScreen.active #backBtn,
  html body.ha-v111-playing #gameScreen.active #newWordBtn,
  html body.ha-v111-playing #multiScreen.active .hud .ghost,
  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active #backBtn,
  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active #newWordBtn,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .hud .ghost {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    margin:0 !important;
    padding:0 5px !important;
    border-radius:10px !important;
    font-size:9px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:-0.01em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-shadow:none !important;
  }

  html body.ha-v111-playing #gameScreen.active .timer-wrap,
  html body.ha-v111-playing #multiScreen.active .timer-wrap,
  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active .timer-wrap,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .timer-wrap {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    height:28px !important;
    min-height:28px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  html body.ha-v111-playing #gameScreen.active #timerText,
  html body.ha-v111-playing #multiScreen.active .timer,
  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active #timerText,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .timer {
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    font-size:16px !important;
    font-weight:1000 !important;
    line-height:.88 !important;
    letter-spacing:-.06em !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  html body.ha-v111-playing #gameScreen.active .timer-bar,
  html body.ha-v111-playing #multiScreen.active .timer-bar,
  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active .timer-bar,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .timer-bar {
    width:58px !important;
    max-width:58px !important;
    height:2px !important;
    min-height:2px !important;
    margin:2px auto 0 !important;
    border-radius:999px !important;
  }

  html body.ha-v111-playing #gameScreen.active .status,
  html body.ha-v111-playing #multiScreen.active .status,
  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active .status,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .status {
    display:block !important;
    width:100% !important;
    min-height:22px !important;
    height:22px !important;
    max-height:22px !important;
    margin:0 0 2px !important;
    padding:3px 6px !important;
    border-radius:10px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:8px !important;
    line-height:16px !important;
    box-sizing:border-box !important;
  }
}