/* --- Mobile overrides (max-width: 640px) --- */
@media (max-width: 640px) {
  .video-area {
    flex-direction: column;
    padding: 0;
    gap: 0;
  }

  .video-tile {
    border-radius: 0;
  }

  /* Solo: remote fullscreen, local PiP */
  .video-area.solo-mode .video-tile-remote {
    position: absolute; inset: 0;
  }
  .video-area.solo-mode .video-tile-local {
    position: fixed;
    bottom: 100px; right: 12px;
    width: 110px; height: 150px;
    border-radius: 12px;
    z-index: 20;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    border: 2px solid var(--stroke-2);
  }

  /* Cupido 3-way mobile: stack top/bottom */
  .video-area.cupido-3way {
    flex-direction: column;
    position: relative;
  }
  .video-area.cupido-3way .video-tile { flex: 1; }

  /* Mobile participant: top = host, bottom = other, PiP = self */
  .video-area.cupido-participant-mobile .video-tile-remote,
  .video-area.cupido-participant-mobile .video-tile-right {
    flex: 1;
    display: block !important;
  }

  /* PiP on mobile: small corner overlay */
  .pip-container {
    top: auto !important;
    bottom: 100px !important;
    left: auto !important;
    right: 12px !important;
    transform: none !important;
    width: 100px !important;
    aspect-ratio: 3/4 !important;
    border-radius: 10px !important;
  }

  /* Quiz start bar mobile */
  .quiz-start-bar {
    bottom: 60px !important;
    flex-direction: column;
    width: 90vw !important;
  }

  /* Self camera mini (cupido) */
  .cupido-mini-self {
    position: fixed;
    bottom: 100px; right: 12px;
    width: 90px; height: 120px;
    border-radius: 10px;
    overflow: hidden;
    z-index: 25;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    border: 2px solid var(--stroke-2);
  }
  .cupido-mini-self video {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
  }

  /* Controls */
  .controls-bar {
    padding: 8px 12px;
    gap: 8px;
  }
  .btn-icon { width: 40px; height: 40px; font-size: 1rem; }

  /* Text chat */
  .text-chat {
    position: fixed;
    inset: 0;
    width: 100%;
    z-index: 40;
    border: none;
  }
  .text-chat .text-chat-close {
    display: block;
    position: absolute;
    top: 8px; right: 12px;
    background: none;
    border: none;
    color: var(--txt);
    font-size: 1.4rem;
    cursor: pointer;
  }

  /* Top bar compact */
  .chat-topbar { padding: 6px 12px; }
  .chat-topbar-logo { font-size: .85rem; }

  /* Landing */
  .landing-card { padding: 24px 20px; }

  /* Quiz */
  .quiz-host-panel { min-width: auto; width: 90vw; max-width: 90vw; top: auto; bottom: 90px; left: 50%; transform: translateX(-50%); position: fixed; }
  .quiz-options { grid-template-columns: 1fr; }

  /* Participant question panel: overlay between cameras on mobile */
  .quiz-participant-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88vw;
    max-width: 88vw;
    min-width: auto;
    z-index: 119;
    font-size: .78rem;
    padding: 10px 14px;
    max-height: 50vh;
    overflow-y: auto;
  }
  .quiz-participant-question { font-size: .88rem; }
  .quiz-participant-options { grid-template-columns: 1fr; gap: 5px; }
  .quiz-participant-option { padding: 6px 8px; font-size: .75rem; }
  .quiz-participant-panel .quiz-buzz-btn { padding: 12px 30px; font-size: .95rem; }

  /* Cupido dashboard */
  .cupido-dashboard { width: 95vw; max-height: 50vh; }

  /* Mobile participant: keep single tile layout */
  .video-area.cupido-participant .video-tile-right { display: none; }
  .video-area.cupido-participant .pip-container {
    top: 12px; right: 12px; left: auto; transform: none;
  }
}

/* --- Desktop overrides --- */
@media (min-width: 641px) {
  .video-area.solo-mode {
    flex-direction: row;
  }
  /* Self mini: visible in cupido for participants on desktop too */
  .cupido-mini-self {
    position: fixed;
    bottom: 80px; left: 12px;
    width: 120px; height: 160px;
    border-radius: 12px;
    overflow: hidden;
    z-index: 25;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    border: 2px solid var(--stroke-2);
    display: none; /* shown via JS */
  }
  .cupido-mini-self video {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
  }
  .text-chat .text-chat-close { display: none; }
}