/* Echo Dot — flagship responsive/device pass (2026-09-09) */
.hud {
  top: 0;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-right: max(10px, env(safe-area-inset-right));
  padding-left: max(10px, env(safe-area-inset-left));
}

.icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.primary,
.secondary,
.pulse-btn {
  min-height: 44px;
  touch-action: manipulation;
}

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

.panel {
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--cyan2);
  outline-offset: 3px;
}

/* Portrait is supported. Landscape remains the ideal view, but the old full
   screen blocker made the game unusable on portrait phones. The hint now sits
   above play, never intercepts input, and auto-dismisses via polish.js. */
.rotate-screen {
  pointer-events: none;
  background: transparent;
  align-items: flex-start;
  justify-content: center;
  padding:
    max(84px, calc(env(safe-area-inset-top) + 72px))
    max(14px, env(safe-area-inset-right))
    env(safe-area-inset-bottom)
    max(14px, env(safe-area-inset-left));
}

.rotate-inner {
  width: min(320px, calc(100vw - 28px));
  padding: 10px 14px;
  border: 1px solid rgba(122,252,255,.3);
  border-radius: 16px;
  background: rgba(2,10,20,.82);
  box-shadow: 0 12px 38px rgba(0,0,0,.42), inset 0 0 26px rgba(54,247,255,.05);
  backdrop-filter: blur(14px);
}

.rotate-phone {
  display: inline-block;
  font-size: 24px;
  margin-right: 7px;
  vertical-align: middle;
  animation: none;
}

.rotate-title {
  display: inline;
  margin: 0;
  font-size: 14px;
}

.rotate-sub {
  margin: 5px 0 0;
  font-size: 11px;
}

.rotate-screen.dismissed {
  display: none !important;
}

.mobile-controls {
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* One control that always works is better than two decorative dead buttons. */
.mobile-controls .pulse-btn {
  width: clamp(92px, 25vw, 116px);
  height: clamp(92px, 25vw, 116px);
}

@media (max-width: 720px) {
  .hud {
    gap: 5px;
  }
  .hud-left,
  .hud-right {
    gap: 4px;
  }
  .hud span {
    font-size: 10px;
    padding: 6px 7px;
  }
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 7px;
  }
}

@media (orientation: portrait) and (pointer: coarse) {
  .hud {
    flex-direction: column;
    align-items: stretch;
  }
  .hud-left,
  .hud-right {
    justify-content: center;
  }
  #hudUser {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-controls {
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
  }
}

@media (max-height: 560px) {
  .overlay {
    align-items: start;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .panel {
    margin: auto;
    max-height: calc(100dvh - 16px);
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel,
  .toast,
  .rotate-phone,
  .icon-btn,
  .primary,
  .secondary,
  .pulse-btn {
    animation: none !important;
    transition: none !important;
  }
}