/* Phones and tablets: touch, notches, small and short screens. */
html, body { height: 100dvh; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
#gl canvas { touch-action: none; }
button, .btn, select, input { touch-action: manipulation; }
.topbar { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); }
.bottom { bottom: max(14px, env(safe-area-inset-bottom)); }
.screen { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }

/* nothing should depend on hovering with a mouse */
@media (hover: none) {
  .crew-x { opacity: 1; }
  .btn:hover:not(:disabled) { transform: none; }
}

/* touch: bigger hit areas */
@media (pointer: coarse) {
  .tb-btn, .tb-btn.icon { width: 44px; min-width: 44px; height: 44px; }
  .ap-vtrack { width: 22px; }
  #emote-pick { grid-template-columns: repeat(6, 48px); }
  #emote-pick button { width: 48px; height: 48px; }
  .song-btn { width: 40px; height: 40px; }
}

/* phones in landscape: short screens */
@media (max-height: 500px) {
  .topbar { top: max(6px, env(safe-area-inset-top)); gap: 6px; }
  .tb-btn, .tb-btn.icon { width: 38px; min-width: 38px; height: 38px; }
  .tb-btn .ico { width: 20px; height: 20px; }
  #info { font-size: 11px; padding: 4px 8px; }
  .plate { min-width: 0; padding: 3px 10px 3px 3px; gap: 5px; }
  .plate-avatar { width: 30px; height: 30px; font-size: 15px; }
  .plate-name { font-size: 11px; }
  .plate-stack { font-size: 12px; }
  .menu-main .logo h1 { font-size: 34px; }
  .menu-main .logo-sub, .menu-main .suits { display: none; }
  .menu-buttons { gap: 6px; }
  .menu-buttons .btn { padding: 8px 14px; }
  .menu-buttons .btn small { display: none; }
  .panel { padding: 14px 16px; gap: 8px; }
  .panel h2 { font-size: 22px; }
  .bottom .mini-card { width: clamp(56px, 13vh, 80px); }
  #emote-pick { top: 48px; }
}

/* phones in portrait */
@media (max-width: 600px) {
  .tb-right { gap: 6px; }
  #info { display: none; }
  .ol-cards, .ol-form, .ol-segs, .pair-cols { grid-template-columns: 1fr; }
  .lobby-top { flex-wrap: wrap; }
  .code-chip b { font-size: 20px; letter-spacing: 4px; }
  #emote-pick { grid-template-columns: repeat(4, 48px); right: 8px; }
}

/* "turn your phone" hint, shown once per game on narrow portrait screens */
#rotate-hint { position: fixed; inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px; z-index: 40; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--gold); box-shadow: 0 12px 40px rgba(0,0,0,.6); }
#rotate-hint.hidden { display: none; }
#rotate-hint svg { width: 34px; height: 34px; color: var(--gold-2); flex: none; animation: rotHint 2.2s ease-in-out infinite; }
#rotate-hint span { flex: 1; font-size: 14px; }
@keyframes rotHint { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }