/* Desktop navigation v66: collision-safe lower HUD for compact and short PCs. */

@media (min-width: 761px) and (max-width: 1280px) {
  /* Chat and the five-button dock keep the lower corners. Context interaction
     moves to a second centered row, so all three controls remain readable. */
  .game-screen .interaction-card {
    left: 50% !important;
    right: auto !important;
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--desktop-nav-card-height) + 14px) !important;
    width: min(380px, calc(100vw - 32px)) !important;
    max-width: none !important;
  }

  .game-screen:has(.world-rail.is-desktop-menu-open) .interaction-card.is-ready {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .game-screen .interaction-card {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    width: min(340px, calc(100vw - 24px)) !important;
    min-height: 66px !important;
    padding: 7px 8px !important;
    border-radius: 17px !important;
  }

  .game-screen .interaction-card__visual {
    width: 46px !important;
    height: 46px !important;
  }

  .game-screen .interaction-card__meta { display: none !important; }
  .game-screen .interaction-card__title { font-size: 11px !important; }
  .game-screen .interaction-card__cta,
  .game-screen .interaction-card.has-creature-emoji .interaction-card__cta {
    min-width: 110px !important;
    height: 46px !important;
    gap: 6px !important;
    padding: 0 9px 0 7px !important;
    border-radius: 12px !important;
  }
  .game-screen .interaction-card__key {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
  }
  .game-screen .interaction-card__action-label { font-size: 9px !important; }
}

@media (min-width: 761px) and (max-width: 1280px) and (max-height: 520px) {
  .game-screen .interaction-card {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--desktop-nav-card-height) + 8px) !important;
    width: min(380px, calc(100vw - 24px)) !important;
    min-height: 58px !important;
    padding-block: 5px !important;
  }
  .game-screen .interaction-card__visual { width: 42px !important; height: 42px !important; }
  .game-screen .interaction-card__meta { display: none !important; }
  .game-screen .interaction-card__cta,
  .game-screen .interaction-card.has-creature-emoji .interaction-card__cta {
    min-width: 104px !important;
    height: 42px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-screen .interaction-card { transition: none !important; }
}