/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Tablet / zoomed-in desktop (≤ 1024px wide) */
@media (max-width: 1024px) {
  .game-header { padding: 8px 14px; gap: 8px; }
  .game-name-display { max-width: 140px; font-size: 13px; }
  .btn-reveal, .btn-new-round { padding: 6px 14px; font-size: 13px; }
  .btn-ghost { padding: 5px 10px; font-size: 12px; }
  .timer-display { font-size: 13px; }
  .pick-card { width: 48px; height: 68px; font-size: 15px; border-radius: 10px; }
}

/* ── Laptop / short screens (≤ 820px tall) — overrides width breakpoint above ── */
@media (max-height: 820px) {
  /* Landing page tighter so it fits without scrolling */
  .landing-box { padding: 20px 24px; gap: 10px; }
  .logo h1 { font-size: 22px; margin-top: 4px; }
  .logo p  { font-size: 12px; margin-top: 2px; }
  .toggle-label { font-size: 13px; }
  .toggle-hint  { font-size: 11px; }
  .toggle-row { gap: 8px; }
  .tab-panel { gap: 10px; }
  .divider { margin: 0; }
  .btn-primary { padding: 10px; font-size: 14px; margin-top: 0; }
  input[type=text] { padding: 8px 12px; font-size: 13px; }
  .seg-btn { padding: 6px 10px; font-size: 13px; }
  .tab-btn { padding: 6px; font-size: 13px; }
  .csel-trigger { padding: 8px 12px; font-size: 13px; }

  /* Header tighter */
  .game-header { padding: 5px 14px; gap: 6px; }

  /* Picker area much more compact */
  .picker-area { padding: 4px 16px 6px; }
  #picker-panel { gap: 4px; }
  .picker-label { font-size: 10px; }
  .cards-row { padding-top: 10px; padding-bottom: 2px; gap: 5px; }

  /* Pick cards significantly smaller */
  .pick-card { width: 36px; height: 52px; font-size: 13px; border-radius: 9px; }
  .pick-card:hover:not(:disabled) { transform: translateY(-8px); }
  .pick-card.selected { transform: translateY(-9px); }

  /* Player seats significantly smaller */
  .player-seat { min-width: 48px; gap: 3px; }
  .player-card-wrap { width: 42px; height: 60px; }
  .player-avatar { width: 30px; height: 30px; font-size: 11px; border-width: 1px; }
  .player-name { font-size: 13px; padding: 2px 7px; }
  .card-back::after { width: 16px; height: 16px; }
  .card-front .cv-center { font-size: 16px; }
  .card-empty { font-size: 12px; }
}

/* Stack tables vertically on narrow screens (≤ 860px) */
@media (max-width: 860px) {
  .tables-container { flex-direction: column; }
  .team-area { border-right: none; border-bottom: 1px solid rgba(8,17,46,0.08); min-height: 140px; }
  .team-area:last-child { border-bottom: none; }
  .results-teams { flex-direction: column; gap: 12px; }
  .landing-box { padding: 28px 20px; }
}

/* ── Mobile (≤ 640px) ────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Fix iOS Safari viewport: svh excludes browser chrome */
  .screen { height: 100svh; }

  /* Landing */
  .landing-box { padding: 18px 16px; gap: 10px; margin: 10px; border-radius: 20px; }
  .logo { margin-bottom: 2px; }
  .logo-icon { font-size: 32px; }
  .logo h1 { font-size: 20px; margin-top: 4px; }
  .logo p { font-size: 12px; }
  .input-group { gap: 4px; }
  .input-group label { font-size: 12px; }
  input[type=text] { padding: 9px 12px; font-size: 13px; }
  .seg-btn { font-size: 13px; padding: 7px 10px; }
  .tab-btn { font-size: 13px; padding: 7px; }
  .toggle-label { font-size: 13px; }
  .toggle-hint { font-size: 11px; }
  .csel-trigger { padding: 9px 12px; font-size: 13px; }
  .csel-option { padding: 11px 10px; } /* larger tap target */
  .csel-opt-label { font-size: 13px; }
  .tab-panel { gap: 10px; }
  .btn-primary { padding: 11px; font-size: 14px; }
  .avatar-preview { width: 46px; height: 46px; }
  #avatar-preview-initials { font-size: 15px; }

  .react-popover {
    position: fixed;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    flex-wrap: wrap;
    justify-content: center;
    max-width: 280px;
    border-radius: 20px;
    z-index: 500;
  }

  /* ── Header: ultra-compact single row ── */
  .game-header { flex-wrap: nowrap; padding: 5px 10px; gap: 4px; }

  .header-left { gap: 4px; flex-shrink: 1; min-width: 0; }
  .header-left .header-sep { display: none; }
  .game-name-display { display: none; }
  .room-label { font-size: 10px; }
  .room-label strong { font-size: 11px; letter-spacing: 1px; }
  .header-sep { display: none; }

  .header-center { flex: 0; flex-shrink: 0; gap: 4px; }
  .timer-wrap { padding: 2px 6px; gap: 3px; border-radius: 8px; }
  .timer-display { font-size: 11px; min-width: 28px; letter-spacing: 0; }
  .timer-btn { font-size: 11px; padding: 1px 3px; }
  .vote-tally { display: none; }

  .header-right { gap: 3px; flex-shrink: 0; }
  #btn-copy-link { display: none; }
  #btn-transfer-host { display: none !important; }
  #btn-leave { font-size: 0; gap: 0; padding: 4px 6px; border-radius: 8px; }
  #btn-leave svg { width: 16px; height: 16px; }
  #btn-link-jira { display: none !important; }
  .btn-ghost { padding: 4px 8px; font-size: 11px; border-radius: 8px; }
  .btn-ghost-icon { padding: 4px 5px; }
  .btn-reveal  { padding: 5px 10px; font-size: 11px; font-weight: 700; border-radius: 9px; }
  .btn-new-round { padding: 5px 10px; font-size: 11px; border-radius: 9px; }

  /* ── Team areas: minimal height so both fit ── */
  .team-area { min-height: 80px; overflow: visible; }
  .team-label { font-size: 9px; padding: 2px 7px; top: 3px; letter-spacing: 0.06em; }



  /* ── Table surface: thin border on mobile ── */
  .table-surface { border-width: 7px; }

  /* ── Table center content ── */
  .table-center-content { font-size: 11px; padding: 6px; max-width: 140px; }
  .table-issue-pill { padding: 6px 9px; gap: 3px; border-radius: 10px; }
  .table-issue-label { font-size: 8px; }
  .table-issue-title { font-size: 10px; max-width: 110px; }
  .table-waiting { font-size: 10px; padding: 4px 10px; }
  .table-lonely { padding: 8px 12px; gap: 4px; border-radius: 12px; }
  .table-lonely-text { font-size: 11px; }
  .table-lonely-hint { font-size: 9px; }

  /* ── Sidebar: full-screen overlay on mobile ── */
  .sidebar-jira-btn { display: block !important; }
  .issues-sidebar.open {
    position: fixed;
    inset: 0;
    width: 100% !important;
    z-index: 50;
    border-left: none;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }

  /* ── Card picker: very compact ── */
  .picker-area { padding: 4px 10px 4px; }
  #picker-panel { gap: 3px; }
  .picker-label { display: none; }
  .cards-row { gap: 5px; padding-top: 8px; padding-bottom: 2px; }
  .pick-card { width: 34px; height: 48px; font-size: 12px; border-radius: 8px; }
  /* Reduce card lift so it fits within the smaller padding-top */
  .pick-card:hover:not(:disabled) { transform: translateY(-6px); }
  .pick-card.selected { transform: translateY(-7px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 20px rgba(52,72,255,0.28); }

  /* ── Player seats: tiny ── */
  .player-seat { gap: 1px; min-width: 28px; }
  .player-card-wrap { width: 20px; height: 29px; }
  .player-avatar { width: 14px; height: 14px; font-size: 6px; border-width: 1px; }
  .player-name { display: none; }
  .card-front .cv-center { font-size: 9px; }
  .card-empty { font-size: 10px; }
  .card-back::after { width: 7px; height: 7px; }
  .dealer { display: none; }
  .dealer-hands { display: none; }
  .dlr-label { display: none; }
  .dealer-toggle { display: none; }

  /* ── Results panel ── */
  .results-teams { gap: 8px; }
  .results-team-header { font-size: 9px; }
  .results-avg { font-size: 12px; }
  .results-range { font-size: 10px; }
  .results-stats { gap: 8px; }
  .vote-card-mini { width: 26px; height: 37px; font-size: 10px; border-radius: 6px; }
  .vote-bar-wrap { height: 30px; width: 26px; }
  .vote-names { font-size: 8px; max-width: 38px; }
  .results-votes { gap: 3px; }
  .results-avg { font-size: 12px; }

  /* ── Modals: bottom sheet ── */
  .modal-backdrop { align-items: flex-end; padding-bottom: env(safe-area-inset-bottom); }
  .modal-box {
    min-width: 0;
    width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
    animation: modalInMobile 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  @keyframes modalInMobile {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .jira-modal-box { max-width: none; max-height: 85svh; overflow-y: auto; }
}