/* V210 — compact, non-overlapping Harf Avı mobile HUD.
   Keeps Menu / timer / Skip on one clean row while the native keyboard is open. */
@media (max-width:820px), (pointer:coarse) {
  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active .game-main,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .multi-game {
    --ha-v209-cell:clamp(
      24px,
      min(10.2vw,calc((var(--ha-v209-visible-height,430px) - 148px) / 6 - 3px)),
      42px
    )!important;
    grid-template-rows:42px auto minmax(0,1fr)!important;
    padding:4px 5px 58px!important;
  }

  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active .hud,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .hud {
    position:relative!important;
    top:auto!important;
    display:grid!important;
    grid-template-columns:minmax(70px,86px) minmax(82px,1fr) minmax(70px,86px)!important;
    align-items:center!important;
    justify-content:stretch!important;
    column-gap:6px!important;
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0 0 3px!important;
    padding:3px 5px!important;
    border-radius:14px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  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;
    height:36px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  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;
    max-width:none!important;
    min-width:0!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin:0!important;
    padding:0 7px!important;
    border-radius:11px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11px!important;
    line-height:1!important;
    box-sizing:border-box!important;
  }

  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:36px!important;
    margin:0!important;
    padding:0 2px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  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:27px!important;
    line-height:.82!important;
    letter-spacing:-.055em!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  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(100%,112px)!important;
    height:3px!important;
    min-height:3px!important;
    margin:4px auto 0!important;
    flex:0 0 3px!important;
  }

  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active .status,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .status {
    min-height:27px!important;
    max-height:34px!important;
    margin:0 0 3px!important;
    padding:4px 7px!important;
    font-size:9px!important;
    line-height:1.16!important;
  }

  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-short #gameScreen.active .game-main,
  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-short #multiScreen.active .multi-game {
    grid-template-rows:39px auto minmax(0,1fr)!important;
    padding:3px 4px 54px!important;
  }

  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-short #gameScreen.active .hud,
  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-short #multiScreen.active .hud {
    grid-template-columns:minmax(66px,80px) minmax(76px,1fr) minmax(66px,80px)!important;
    height:39px!important;
    min-height:39px!important;
    max-height:39px!important;
    column-gap:4px!important;
    padding:2px 4px!important;
  }

  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-short #gameScreen.active #backBtn,
  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-short #gameScreen.active #newWordBtn,
  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-short #multiScreen.active .hud .ghost {
    height:31px!important;
    min-height:31px!important;
    max-height:31px!important;
    font-size:10px!important;
  }

  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-short #gameScreen.active #timerText,
  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-short #multiScreen.active .timer {
    font-size:24px!important;
  }

  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-very-short #gameScreen.active .game-main,
  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-very-short #multiScreen.active .multi-game {
    --ha-v209-cell:clamp(22px,min(9.5vw,calc((var(--ha-v209-visible-height,340px) - 128px) / 6 - 3px)),36px)!important;
    grid-template-rows:36px 21px minmax(0,1fr)!important;
    padding:2px 4px 50px!important;
  }

  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-very-short #gameScreen.active .hud,
  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-very-short #multiScreen.active .hud {
    grid-template-columns:minmax(62px,74px) minmax(70px,1fr) minmax(62px,74px)!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
  }

  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-very-short #gameScreen.active #backBtn,
  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-very-short #gameScreen.active #newWordBtn,
  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-very-short #multiScreen.active .hud .ghost {
    height:29px!important;
    min-height:29px!important;
    max-height:29px!important;
    padding:0 5px!important;
    font-size:9px!important;
  }

  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-very-short #gameScreen.active #timerText,
  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-very-short #multiScreen.active .timer {
    font-size:22px!important;
  }

  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-very-short #gameScreen.active .timer-bar,
  html body.ha-v111-playing.ha-v209-keyboard.ha-v209-very-short #multiScreen.active .timer-bar {
    margin-top:3px!important;
  }
}

@media (max-width:360px) and (pointer:coarse) {
  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:68px minmax(76px,1fr) 68px!important;
    column-gap:4px!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }
  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 {
    padding-left:4px!important;
    padding-right:4px!important;
    font-size:9.5px!important;
  }
  html body.ha-v111-playing.ha-v209-keyboard #gameScreen.active #timerText,
  html body.ha-v111-playing.ha-v209-keyboard #multiScreen.active .timer {
    font-size:24px!important;
  }
}