/* quiz-mobile.css — Responsive overrides for quiz.html */
/* WCAG 2.1 AAA: 44px minimum touch targets + 8px spacing */

/* ══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS: 360px · 480px · 768px
   ══════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .lobby-two-col { grid-template-columns: 1fr; }
  .lobby-side-col { position: static; }
}

@media (max-width: 600px) {
  .lobby-grid-2 { grid-template-columns: 1fr; }
  .lobby-wrap { padding: 0 16px; }
}

/* ═══════════════════════════════════════════════════════════
   SMALL PHONES: 360px–480px
   Ensure all touch targets meet WCAG AAA 44x44px minimum
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Navigation links: strict 44x44px */
  .nav-flat-link {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    font-size: 11px;
  }

  /* Buttons with guaranteed spacing */
  button:not([style*="display:none"]),
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
    margin-bottom: 8px;
  }

  /* Inputs: 16px font to prevent iOS zoom */
  input:not([type="hidden"]),
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px;
    padding: 12px 12px;
    box-sizing: border-box;
  }

  /* Form elements spacing */
  input + input,
  input + button,
  button + button {
    margin-top: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════
   MEDIUM PHONES: 481px–768px
   Touch targets: 44px minimum, spacing: 8px
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Board+sidebar row: column instead of row */
  #view-host > div[style*="display:flex;flex:1"] {
    flex-direction: column !important;
  }

  /* Board takes top portion */
  .host-board-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* Sidebar becomes compact strip at bottom */
  .host-side-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-left: none !important;
    border-top: 1px solid rgba(87,242,135,0.15) !important;
    height: auto !important;
    max-height: 38vh !important;
    overflow-y: auto !important;
    flex-shrink: 0 !important;
  }

  /* Sidebar sections in a row on mobile */
  .host-side-panel .sidebar-scroll-area {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    align-items: flex-start !important;
  }

  .host-side-panel .panel-section {
    flex-shrink: 0 !important;
    min-width: 160px !important;
    max-width: 220px !important;
  }

  /* Side controls bar with button spacing */
  .side-controls {
    flex-direction: row !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .side-controls button {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    margin-bottom: 4px;
    flex: 1;
  }

  /* Category names: smaller on mobile */
  .host-jeopardy-table th {
    font-size: clamp(8px, 2.5vw, 12px) !important;
    padding: 5px 3px !important;
    letter-spacing: 0.02em !important;
  }

  .host-tile {
    font-size: clamp(1.2rem, 5vw, 2rem) !important;
    min-height: clamp(40px, 8vh, 70px) !important;
    min-width: 40px;
  }

  /* qoverlay-points (200 PUNKTE) — not too huge */
  .qoverlay-points {
    font-size: 40px !important;
    margin-bottom: 12px !important;
  }

  /* Question overlay covers full board area only (not sidebar) */
  #question-overlay {
    position: absolute !important;
    inset: 0 !important;
    padding: 16px 12px 100px !important;
    overflow-y: auto !important;
    justify-content: flex-start !important;
  }

  /* Image sizing in overlay on mobile */
  .qoverlay-question-img, .qoverlay-answer-img {
    max-height: 30vh !important;
    max-width: 100% !important;
  }

  /* Topbar: hide non-essentials */
  #view-host .board-topbar [data-i18n="play.room_label"],
  #view-host .board-topbar .topbar-divider,
  #view-host #game-elapsed-timer,
  #view-host #host-fs-btn {
    display: none !important;
  }

  #view-host .board-topbar {
    padding: 8px 10px !important;
    min-height: 44px !important;
    gap: 6px !important;
  }

  /* Ensure all topbar buttons are touch-friendly */
  #view-host .board-topbar button {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
  }

  .room-topbar-code {
    font-size: 16px !important;
    letter-spacing: 4px !important;
  }

  /* Nav links: strict WCAG AAA */
  .nav-flat-link {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    font-size: 11px;
  }

  /* Guaranteed 8px spacing between nav links */
  .nav-flat-link + .nav-flat-link {
    margin-left: 8px;
  }

  /* General buttons in mobile view */
  button:not([style*="display:none"]),
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
  }

  /* Inputs in mobile */
  input:not([type="hidden"]),
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px;
    padding: 12px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   TABLETS & LANDSCAPE: 769px–1024px
   Touch targets: 40–44px minimum
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .nav-flat-link {
    min-height: 40px;
    min-width: 40px;
  }

  button:not([style*="display:none"]) {
    min-height: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════
   LANDSCAPE MODE: Maintain vertical space for touch targets
   ═══════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
  #page-header {
    min-height: 44px;
  }

  button,
  .nav-flat-link,
  input,
  textarea {
    min-height: 38px;
  }

  /* Reduce vertical spacing in landscape */
  button + button {
    margin-top: 4px;
  }
}