/* ═══════════════════════════════════════════
   LittleScreen — Trivia Game multiplayer styles
   Loaded only on room.html, applied when room.type === trivia.
   ═══════════════════════════════════════════ */

.tg-shell {
  display: flex; flex-direction: column;
  gap: 16px;
  padding: 16px 20px;
  height: 100%;
  width: 100%;
  max-width: 1100px; margin: 0 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.tg-topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.tg-role-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.tg-role {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: .82rem; font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.tg-role:hover { border-color: var(--accent); }
.tg-role.active { background: var(--accent); color: #1a0e05; border-color: var(--accent); }
.tg-role.tg-leave { color: var(--danger); border-color: var(--danger); }
.tg-mini {
  font-size: .7rem; opacity: .7;
  padding: 1px 6px;
  background: rgba(0,0,0,.3);
  border-radius: 999px;
}
.tg-hostbar { display: flex; gap: 6px; }

.tg-phase.hidden { display: none; }

.tg-idle-hero { text-align: center; padding: 16px 0 4px; }
.tg-idle-hero .tg-pack-emoji { font-size: 3rem; }
.tg-idle-hero h2 { font-size: 1.6rem; margin-top: 4px; font-weight: 800; letter-spacing: -.02em; }
.tg-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  min-width: 0;
}
.tg-pack {
  padding: 12px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  text-align: center;
  transition: border-color .14s, transform .14s;
  font-size: inherit; color: inherit;
  min-width: 0;
}
.tg-pack:hover { transform: translateY(-2px); border-color: var(--accent); }
.tg-pack.selected {
  border-color: var(--pack-color, var(--accent));
  background: var(--accent-dim);
}
.tg-pack-icon { font-size: 1.8rem; }
.tg-pack-name { font-weight: 800; font-size: .9rem; }
.tg-pack-count { font-size: .68rem; color: var(--muted); }
.tg-pack-difficulty {
  justify-self: center;
  color: var(--pack-color, var(--accent));
  border: 1px solid color-mix(in srgb, var(--pack-color, var(--accent)) 50%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tg-start-row {
  display: flex; gap: 12px; align-items: end; flex-wrap: wrap;
  background: rgba(0,0,0,.2);
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.tg-start-row label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); }
.tg-start-row select { min-height: 40px; padding: 8px 10px; }
.tg-start-row .btn-primary { margin-left: auto; padding: 12px 20px; }

@media (max-width: 640px) {
  .tg-shell { padding: 10px; gap: 10px; }
  .tg-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tg-pack { padding: 9px 7px; border-radius: 10px; }
  .tg-pack-icon { font-size: 1.35rem; }
  .tg-pack-name { font-size: .78rem; }
  .tg-start-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .tg-start-row .btn-primary { margin-left: 0; width: 100%; }
  .tg-roster { grid-template-columns: 1fr; }
}

.tg-roster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tg-roster-col { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.tg-roster-col h4 { font-size: .85rem; margin-bottom: 8px; }
.tg-roster-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tg-roster-col li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  font-size: .85rem;
}
.tg-roster-col li.host::before { content: "⭐"; }
.tg-roster-col li .roster-icon { font-size: 1.1rem; }
.tg-roster-col li .roster-name { flex: 1; font-weight: 600; }
.tg-roster-col li .roster-score { color: var(--accent); font-weight: 800; font-family: ui-monospace, monospace; }

.tg-phase-question { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.tg-q-head {
  display: flex; gap: 10px; align-items: center;
  font-size: .8rem; color: var(--muted);
  flex-wrap: wrap; justify-content: center;
}
.tg-q-counter, .tg-q-pack, .tg-q-difficulty, .tg-q-answered {
  padding: 4px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  border: 1px solid var(--border);
}
.tg-q-difficulty.easy { color: var(--success); border-color: var(--success); }
.tg-q-difficulty.medium { color: #f1c40f; border-color: #f1c40f; }
.tg-q-difficulty.hard { color: var(--danger); border-color: var(--danger); }
.tg-q-difficulty.genius { color: #c8a2ff; border-color: #c8a2ff; background: rgba(200,162,255,.10); }

.tg-countdown-ring { position: relative; width: 88px; height: 88px; }
.tg-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.tg-ring-bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 6; }
.tg-ring-fg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .25s linear, stroke .25s;
}
.tg-ring-fg.warn { stroke: #ffd76b; }
.tg-ring-fg.danger { stroke: var(--danger); }
.tg-countdown-text {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: ui-monospace, monospace;
  font-size: 1.8rem; font-weight: 800;
  color: var(--accent);
}

.tg-q-text {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 800;
  line-height: 1.35;
  max-width: 800px;
  padding: 0 8px;
}

.tg-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 800px;
}
.tg-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 14px;
  border: 2px solid var(--border-hi);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s;
  min-height: 80px;
}
.tg-tile:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent); background: rgba(255,255,255,.07); }
.tg-tile:disabled { cursor: default; opacity: .85; }
.tg-tile.selected { border-color: var(--accent); background: var(--accent-dim); }
.tg-tile.correct { border-color: var(--success); background: rgba(110,200,122,.18); }
.tg-tile.wrong { border-color: var(--danger); background: rgba(232,90,111,.16); opacity: .55; }
.tg-letter {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--accent);
  color: #1a0e05;
  display: grid; place-items: center;
  font-weight: 900; font-size: 1.1rem;
}
.tg-tile.correct .tg-letter { background: var(--success); color: #fff; }
.tg-tile.wrong .tg-letter { background: var(--danger); color: #fff; }

.tg-locked-msg {
  font-size: .9rem;
  color: var(--success);
  background: rgba(110,200,122,.15);
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--success);
}

.tg-phase-reveal { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.tg-tiles-reveal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 800px; width: 100%; }

/* Reveal fact ("oomph line" surfaced from question pack v2 reveal payload) */
.tg-reveal-fact {
  max-width: 800px; width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--accent-dim, rgba(240,160,80,.35));
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-radius: 12px;
  text-align: left;
  animation: tgRevealIn .35s ease-out;
}
.tg-reveal-headline { font-weight: 600; color: var(--accent, #f0a050); margin-bottom: 4px; font-size: 1.02rem; }
.tg-reveal-funfact { color: var(--text); line-height: 1.5; font-size: .98rem; }
@keyframes tgRevealIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tg-scoreboard {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  width: 100%; max-width: 600px;
}
.tg-scoreboard-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.tg-scoreboard-row:last-child { border-bottom: none; }
.tg-rank {
  width: 28px; height: 28px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: .82rem;
}
.tg-rank-1 { background: gold; color: #1a0e05; }
.tg-rank-2 { background: silver; color: #1a0e05; }
.tg-rank-3 { background: #cd7f32; color: #1a0e05; }
.tg-sb-icon { font-size: 1.2rem; }
.tg-sb-name { font-weight: 700; }
.tg-sb-streak { font-size: .72rem; color: var(--accent); }
.tg-sb-score { font-family: ui-monospace, monospace; font-weight: 800; color: var(--accent); }

.tg-next-row, .tg-end-row {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; justify-content: center;
}

.tg-phase-ended { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.tg-end-hero h1 { font-size: 2.2rem; font-weight: 900; letter-spacing: -.02em; }
.tg-scoreboard-final { padding: 18px 22px; }
.tg-scoreboard-final .tg-scoreboard-row { padding: 10px 6px; font-size: 1.05rem; }
body.tg-not-host .tg-host-only { display: none; }
/* Mirror class for the inverse — show ONLY when the local user is not host.
   Used for the "Waiting for host…" idle hint and any future spectator copy.
   2026-05-02c. */
body:not(.tg-not-host) .tg-not-host-only { display: none; }
.tg-not-host-only {
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px dashed rgba(255,255,255,.18);
  color: rgba(255,255,255,.72);
  font-style: italic;
  align-self: center;
}
/* Pack tile keyboard focus + a11y polish so the trivia room reads like
   the rest of the site instead of a bare grid. */
.tg-pack:focus-visible {
  outline: 2px solid var(--accent, #f0a050);
  outline-offset: 2px;
}

body.vr-mode .tg-tile { padding: 24px 28px; min-height: 100px; font-size: 1.3rem; }
body.vr-mode .tg-letter { width: 52px; height: 52px; font-size: 1.4rem; }
body.vr-mode .tg-q-text { font-size: clamp(1.4rem, 3vw, 2.2rem); }
body.vr-mode .tg-countdown-ring { width: 120px; height: 120px; }
body.vr-mode .tg-countdown-text { font-size: 2.4rem; }

@media (max-width: 640px) {
  .tg-shell { padding: 10px; gap: 10px; }
  .tg-tiles { gap: 8px; grid-template-columns: 1fr; }
  .tg-tile { padding: 22px 18px; font-size: 1.1rem; }
  .tg-letter { width: 44px; height: 44px; font-size: 1.3rem; }
  .tg-q-text { font-size: 1rem; }
  .tg-countdown-ring { width: 64px; height: 64px; }
  .tg-countdown-text { font-size: 1.3rem; }
  .tg-roster { grid-template-columns: 1fr; }
}