/* ─────────────────────────────────────────────────────────────────────────────
   Host Mobile Override
   Loaded only on the multiplayer host page via <link media="(max-width: 768px)">
   Uses existing CSS custom properties so theme changes still cascade.
   Only hides non-interactive decorative elements — all click-bound elements
   remain visible.

   IMPORTANT: multiplayer.pug also serves players who join a lobby via room
   code. After joining, ClientController renders inside the same #game div
   using ctrl-* prefixed classes. Rules below that target shared selectors
   (button, .back-btn, .generic-button, .main-game-area) are scoped with
   :not(:has(#ctrl-phase-content)) so they only apply when the host game is
   active, not when the controller has taken over.
   ───────────────────────────────────────────────────────────────────────────── */

/* ─── Sidebars: hide decorative, keep timer visible ──────────────────────── */
#left-sidebar-top,
#right-sidebar {
  display: none;
}

/* Timer sidebar: unfixed, compact inline bar instead of fixed panel */
#left-sidebar-bottom {
  position: static;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 12px;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
  z-index: auto;
  padding: 0.5rem 1rem;
}

#left-sidebar-bottom h3 {
  margin: 0 0 0.25rem;
  font-size: clamp(0.8rem, 2.5vw, 1rem);
}

/* ─── Main layout: remove sidebar margins, vertical stacking ─────────────── */
/* Scoped to host-only: controller replaces #game contents with #ctrl-phase-content */
#game.main-game-area:not(:has(#ctrl-phase-content)),
#game.main-game-area-s:not(:has(#ctrl-phase-content)) {
  margin-left: 0;
  margin-right: 0;
  padding: 0.5rem;
  box-sizing: border-box;
}

.game-flex {
  flex-direction: column;
  align-items: stretch;
}

/* ─── Scoreboard: full width, compact height ─────────────────────────────── */
.scoreboard-div {
  width: 100%;
  display: block;
  max-height: 40vh;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}

#scoreboard-table {
  width: 100%;
  height: auto;
  max-height: 35vh;
}

/* ─── Questions column and boards: full width ────────────────────────────── */
#questions-column {
  width: 100%;
}

.question-board,
.team-question-board,
.group-boss-question-board {
  width: min(95vw, 100%);
}

#team-questions-div,
#game-challenge {
  display: block;
  width: 100%;
}

/* ─── Category/question board: vertical layout ───────────────────────────── */
/* Category headers row: stack vertically instead of horizontal */
.question-board,
.team-question-board,
.group-boss-question-board {
  display: block;
  width: 100%;
  table-layout: auto;
}

.question-board tbody,
.team-question-board tbody,
.group-boss-question-board tbody {
  display: block;
  width: 100%;
}

/* Each table row becomes a vertical block */
.question-board tr,
.team-question-board tr,
.group-boss-question-board tr {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cat-row {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Category header cells: full width, stacked */
.question-board th,
.team-question-board th,
.group-boss-question-board th {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Question button cells: full width */
.question-board td,
.team-question-board td,
.group-boss-question-board td {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* ─── Question phase: full width, responsive text ────────────────────────── */
#question-main-p {
  font-size: clamp(1.2rem, 4vw, 2.5rem);
}

h2.question-category {
  font-size: clamp(1rem, 3.5vw, 1.8rem);
}

.option-btn {
  width: min(95vw, 100%);
  font-size: clamp(0.9rem, 3vw, 1.5rem);
  padding: clamp(8px, 2vw, 16px);
  box-sizing: border-box;
  height: auto;
  min-height: 50px;
}

/* Scoped: controller also uses .back-btn */
#game:not(:has(#ctrl-phase-content)) .back-btn {
  width: min(80vw, 100%);
  font-size: clamp(0.9rem, 3vw, 1.3rem);
}

.mod-area,
.prefix-area,
.options-area,
.timer-area,
.status-div {
  width: 100%;
  box-sizing: border-box;
}

/* ─── Mod select overlay: card wrapping ──────────────────────────────────── */
.mod-select-row {
  flex-wrap: wrap;
  justify-content: center;
}

.mod-card {
  flex: 0 0 min(85vw, 280px);
}

.mod-select-panel {
  width: 95%;
  max-height: 85vh;
  overflow-y: auto;
}

.mod-select-continue {
  width: 100%;
  padding: 0.8rem;
  font-size: clamp(1rem, 3vw, 1.2rem);
}

/* ─── Notification area: full-width top bar ──────────────────────────────── */
.notification-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  max-height: 20vh;
  border-radius: 0 0 16px 16px;
}

/* ─── Header: compact ────────────────────────────────────────────────────── */
.header-area {
  text-align: center;
}

h1#title {
  font-size: clamp(0.9rem, 3vw, 1.5rem);
  padding: 0.3rem 0.5rem;
  word-wrap: break-word;
}

.mode-swap-input {
  font-size: clamp(0.7rem, 2.5vw, 1rem);
  padding: 0.4rem 0.8rem;
}

/* ─── Footer and audio area ──────────────────────────────────────────────── */
audioarea {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
}

footer {
  text-align: center;
}

.labor-time {
  font-size: clamp(0.7rem, 2vw, 0.9rem);
}

/* ─── Category and interactive buttons: touch targets ────────────────────── */
.question-cat-headers {
  font-size: clamp(0.9rem, 3vw, 1.3rem);
  padding: clamp(8px, 2vw, 16px);
}

td .team-question-btn,
td .group-boss-question-btn {
  font-size: clamp(0.7rem, 2.5vw, 1.1rem);
  width: 100%;
}

.category-btn {
  width: clamp(40%, 50%, 80%);
}

/* Minimum 44px touch target (WCAG) — scoped to host only */
#game:not(:has(#ctrl-phase-content)) .generic-button,
#game:not(:has(#ctrl-phase-content)) .option-btn,
#game:not(:has(#ctrl-phase-content)) .back-btn,
#game:not(:has(#ctrl-phase-content)) .team-question-btn,
#game:not(:has(#ctrl-phase-content)) .group-boss-question-btn,
#game:not(:has(#ctrl-phase-content)) .mod-card,
#game:not(:has(#ctrl-phase-content)) .mod-select-continue,
#game:not(:has(#ctrl-phase-content)) .duel-answer-btn,
#game:not(:has(#ctrl-phase-content)) button {
  min-height: 44px;
}

#game:not(:has(#ctrl-phase-content)) .team-question-btn,
#game:not(:has(#ctrl-phase-content)) .group-boss-question-btn,
#game:not(:has(#ctrl-phase-content)) .mod-card,
#game:not(:has(#ctrl-phase-content)) .mod-select-continue,
#game:not(:has(#ctrl-phase-content)) .duel-answer-btn {
  max-width: fit-content;
  margin: auto;
}

#game:not(:has(#ctrl-phase-content)) .generic-button,
#game:not(:has(#ctrl-phase-content)) .option-btn,
#game:not(:has(#ctrl-phase-content)) .back-btn {
  max-width: unset;
  margin: 5px;
}

#game:not(:has(#ctrl-phase-content)) #mod-description-card {
  margin: auto;
}

#game:not(:has(#ctrl-phase-content)) .question-board,
#game:not(:has(#ctrl-phase-content)) .team-question-board {
  margin: 0 auto;
}


#game:not(:has(#ctrl-phase-content)) #left-sidebar-bottom {
  display: unset;
}

#game:not(:has(#ctrl-phase-content)) .sidebar-left {
  display: none;
}


/* ─── Duel grid: single column ───────────────────────────────────────────── */
.duel-answer-grid {
  grid-template-columns: 1fr;
}

.duel-answer-btn {
  width: 100%;
  font-size: clamp(0.9rem, 3vw, 1.3rem);
}

/* ─── Question images ────────────────────────────────────────────────────── */
#question-picture {
  max-width: 90vw;
  height: auto;
}