/* P03 — mobile viewport, safe-area, and compact layout hardening. */

html,
body {
  min-height: 100%;
  min-height: 100dvh;
}

body {
  overscroll-behavior: none;
}

#game {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

#hud {
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
}

.overlay {
  padding-top: max(18px, env(safe-area-inset-top));
  padding-right: max(18px, env(safe-area-inset-right));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  padding-left: max(18px, env(safe-area-inset-left));
}

.panel {
  width: min(92vw, 420px);
  max-height: calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

.keys {
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 600px) {
  #hud {
    gap: 7px;
  }

  .pill {
    padding: 6px 11px;
    font-size: 16px;
  }

  .pill .lbl {
    font-size: 9px;
    letter-spacing: 1.4px;
  }

  .icon-btn {
    width: 38px;
    height: 38px;
  }

  .overlay {
    gap: 14px;
  }

  .keys {
    gap: 10px 14px;
  }

  .key-row {
    font-size: 12px;
  }

  kbd {
    padding: 3px 8px;
  }

  .panel {
    min-width: 0;
    padding: 28px 24px;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .logo {
    font-size: clamp(42px, 9vw, 72px);
  }

  .overlay {
    gap: 9px;
  }

  .keys {
    margin-top: 2px;
  }

  .panel {
    padding: 20px 26px;
  }
}