/* V211 — tighter iPhone/mobile Harf Avı HUD.
   Force Menu / timer / Skip into a shorter, cleaner top area on all mobile play screens. */
@media (max-width:820px), (pointer:coarse) {
  html body.ha-v111-playing #gameScreen.active .game-main,
  html body.ha-v111-playing #multiScreen.active .multi-game {
    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:minmax(74px,88px) minmax(74px,1fr) minmax(74px,88px) !important;
    align-items:center !important;
    gap:4px !important;
    width:100% !important;
    min-height:36px !important;
    height:36px !important;
    max-height:36px !important;
    margin:0 0 2px !important;
    padding:2px 4px !important;
    border-radius:12px !important;
    overflow:hidden !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 {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    min-width:0 !important;
    height:30px !important;
    gap:0 !important;
    overflow:hidden !important;
  }

  html body.ha-v111-playing #gameScreen.active .hud .pill,
  html body.ha-v111-playing #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;
    max-width:none !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    padding:0 6px !important;
    border-radius:10px !important;
    font-size:10px !important;
    font-weight:800 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-sizing:border-box !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;
    max-width:none !important;
    height:30px !important;
    margin:0 !important;
    padding:0 1px !important;
    overflow:hidden !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:20px !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:min(78px,100%) !important;
    height:2px !important;
    min-height:2px !important;
    margin:2px auto 0 !important;
    border-radius:999px !important;
    flex:0 0 2px !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:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    width:100% !important;
    min-height:24px !important;
    max-height:30px !important;
    margin:0 0 2px !important;
    padding:4px 6px !important;
    border-radius:10px !important;
    overflow:hidden !important;
    font-size:8.5px !important;
    line-height:1.1 !important;
    box-sizing:border-box !important;
  }
}

@media (max-width:390px), (max-height:760px) {
  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 {
    grid-template-columns:minmax(70px,82px) minmax(68px,1fr) minmax(70px,82px) !important;
    min-height:34px !important;
    height:34px !important;
    max-height:34px !important;
    gap:3px !important;
    padding:1px 3px !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 {
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    font-size:9.5px !important;
    padding:0 5px !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 {
    font-size:18px !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 {
    font-size:8px !important;
    min-height:22px !important;
    max-height:28px !important;
    padding:3px 5px !important;
  }
}