/* Game master console — Polaris Page/Card patterns, phone-first. */

.gm-app { max-width: 720px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }

.gm-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--p-space-300);
  padding: var(--p-space-300) var(--p-space-400);
  background: color-mix(in srgb, var(--p-color-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--p-color-border-secondary);
  min-height: 56px;
  flex-wrap: wrap;
}
.gm-topbar .title { font-family: var(--p-font-family-display); font-size: 1.05rem; }

.gm-main {
  display: flex; flex-direction: column; gap: var(--p-space-400);
  padding: var(--p-space-400);
  padding-bottom: var(--p-space-1600);
}

.gm-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--p-space-300); }

.team-row {
  display: flex; align-items: center; gap: var(--p-space-200);
  padding: var(--p-space-200);
  border-radius: var(--p-border-radius-200);
  background: var(--p-color-bg-surface-secondary);
  flex-wrap: wrap;
}
.team-row .swatch {
  width: 36px; height: 36px; border-radius: var(--p-border-radius-200);
  border: none; padding: 0; cursor: pointer; background: none;
}
.team-row .name { font-weight: var(--p-font-weight-semibold); }

.player-row { display: flex; align-items: center; gap: var(--p-space-200); padding: var(--p-space-100) 0; flex-wrap: wrap; }
.player-row select {
  background: var(--p-color-bg-surface-secondary); color: var(--p-color-text);
  border: 1px solid var(--p-color-border); border-radius: var(--p-border-radius-100);
  min-height: 36px; padding: 0 var(--p-space-200); font: inherit;
}

.opt-row {
  display: flex; gap: var(--p-space-200); align-items: center;
  padding: var(--p-space-200) var(--p-space-300);
  border-radius: var(--p-border-radius-200);
  background: var(--p-color-bg-surface-secondary);
  font-size: var(--p-font-size-body-sm);
}
.opt-row.correct { background: rgba(34, 197, 94, 0.18); border: 1px solid rgba(34, 197, 94, 0.5); }
.opt-row .letter { font-weight: var(--p-font-weight-bold); width: 1.4rem; }

.answer-chip-grid { display: flex; gap: 4px; }
.answer-chip-grid .btn { min-height: 36px; min-width: 36px; padding: 0 8px; }

.playlist-row {
  display: flex; gap: var(--p-space-200); align-items: center;
  padding: var(--p-space-100) var(--p-space-200);
  border-radius: var(--p-border-radius-100);
  font-size: var(--p-font-size-body-sm);
  color: var(--p-color-text-secondary);
  cursor: pointer;
  border: 1px solid transparent;
  width: 100%;
  text-align: left;
}
.playlist-row:hover { background: var(--p-color-bg-surface-hover); }
.playlist-row.current { border-color: var(--p-color-border-focus); color: var(--p-color-text); background: var(--p-color-bg-surface-secondary); }
.playlist-row .idx { width: 2rem; text-align: right; opacity: 0.6; }

.mg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--p-space-300); }
.mg-launch {
  min-height: 72px; border-radius: var(--p-border-radius-300);
  background: var(--p-color-bg-surface-secondary);
  border: 1px solid var(--p-color-border);
  display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
  font-weight: var(--p-font-weight-semibold); color: var(--p-color-text);
  padding: var(--p-space-200);
}
.mg-launch:hover { background: var(--p-color-bg-surface-hover); }
.mg-launch small { color: var(--p-color-text-secondary); font-weight: var(--p-font-weight-regular); }

.qr-box { display: flex; flex-direction: column; align-items: center; gap: var(--p-space-200); }
.qr-box img { width: 180px; border-radius: var(--p-border-radius-200); }

details.card > summary {
  cursor: pointer; font-weight: var(--p-font-weight-bold);
  font-size: var(--p-font-size-heading-md);
  list-style: none; display: flex; align-items: center; gap: var(--p-space-200);
  min-height: 28px;
}
details.card > summary::before { content: '▸'; transition: transform var(--p-motion-duration-150); }
details[open].card > summary::before { transform: rotate(90deg); }
details.card > .content { margin-top: var(--p-space-300); display: flex; flex-direction: column; gap: var(--p-space-300); }