/* ============================================================
   Телефон: шапка в «три полоски» + облегчение эффектов.
   Раскладку стола и карт не трогаем — она родная.
   ============================================================ */

@media (min-width: 901px) and (pointer: fine) {
  .menu-toggle { display: none !important; }
}

@media (max-width: 900px), (pointer: coarse) {
  #topbar { position: relative; }

  .menu-toggle {
    display: inline-grid; place-items: center;
    width: 42px; height: 42px; margin-left: 8px;
    border-radius: 12px; cursor: pointer;
    font-size: 19px; line-height: 1; color: var(--cream, #f7efd9);
    background: linear-gradient(180deg, #5b352b, #3a1f19);
    border: 2px solid rgba(247, 239, 217, .45);
    box-shadow: 0 3px 0 #1a0c09;
    flex: none;
  }
  .menu-toggle:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a0c09; }

  /* свернутое состояние: панель «растворяется», виден только статус связи */
  #topbar .conn { display: contents; }
  #topbar .conn > * { display: none !important; }
  #topbar .conn > #connStatus { display: inline-flex !important; margin-left: auto; white-space: nowrap; }

  /* раскрытое состояние: выпадающая панель под шапкой */
  body.nav-open #topbar .conn {
    display: flex; position: absolute; top: calc(100% + 8px); left: 10px; right: 10px;
    flex-direction: column; align-items: stretch; gap: 8px; padding: 12px;
    background: linear-gradient(180deg, #2b1812, #1a0d09);
    border: 2px solid rgba(247, 239, 217, .22);
    border-radius: 18px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .65);
    z-index: 80;
  }
  body.nav-open #topbar .conn > * { display: block !important; width: 100%; }
  body.nav-open #topbar .conn > #connStatus { display: none !important; }
  body.nav-open #topbar .conn input { width: 100%; min-width: 0; }

  /* ---------- ускорение ---------- */
  #bgfx { display: none; }
  #bgfx::before, #bgfx::after { animation: none !important; }

  #unoTable.my-turn, #unoTable.opp-turn,
  .uno-deck-stack .uno-card,
  .cta, .status-dot { animation: none !important; }

  #topbar, .modal, .set-box, .mode-box, .auth-card, .auth-modal, #settingsModal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  * { -webkit-tap-highlight-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}