/* Quiz-specific styles. Panels, buttons, the top bar and toasts all come from
   ../shared/arcade.css, linked first in index.html. */

/* the Pass button sits straight under the join row, which has no margin */
#start .join-row { margin-bottom: 12px; }

#play {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

.stage {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

/* ───────── the question ───────── */
.q-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.q-count { font-size: 0.82rem; color: #9d8bb5; letter-spacing: 0.06em; }

.q-cat {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  color: #f3ecdf;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.q-cat[data-cat="spicy"] { color: #ffb0a2; border-color: rgba(255, 130, 110, 0.45); background: rgba(255, 110, 90, 0.16); }
.q-cat[data-cat="sweet"] { color: #ffd9ec; border-color: rgba(255, 160, 205, 0.4); background: rgba(255, 150, 200, 0.14); }
.q-cat[data-cat="habits"] { color: #b9e6ff; border-color: rgba(130, 200, 240, 0.35); background: rgba(120, 190, 240, 0.13); }
.q-cat[data-cat="taste"] { color: #ffe4a8; border-color: rgba(255, 208, 118, 0.4); background: rgba(255, 208, 118, 0.13); }
.q-cat[data-cat="random"] { color: #d6c7ff; border-color: rgba(180, 160, 240, 0.4); background: rgba(170, 150, 240, 0.14); }
.q-cat[data-cat="tells"] { color: #c9f5dd; border-color: rgba(140, 225, 185, 0.38); background: rgba(130, 220, 180, 0.13); }
.q-cat[data-cat="deep"] { color: #cfd8ff; border-color: rgba(150, 170, 245, 0.4); background: rgba(140, 160, 245, 0.14); }

.role-note {
  font-size: 0.9rem;
  color: #b9a8cf;
  min-height: 1.3em;
}
.role-note.guessing { color: #ffd076; }

.q-text {
  font-size: clamp(1.35rem, 5.6vw, 1.75rem);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ───────── options ───────── */
.opts { display: flex; flex-direction: column; gap: 10px; }

.opt {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.35;
  padding: 15px 16px;
  border-radius: 14px;
  cursor: pointer;
  color: #f3ecdf;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.15s ease, transform 0.1s ease;
}
.opt:active { transform: scale(0.985); }
.opt:disabled { cursor: default; }

.opt.mine { background: #ffd076; color: #241a10; border-color: #ffd076; }

.opts.locked .opt:not(.mine):not(.subject-pick):not(.guess-pick) { opacity: 0.4; }

/* reveal: the subject's answer in gold, the guess outlined, both when they
   landed on the same one */
.opt.subject-pick { background: rgba(255, 208, 118, 0.22); border-color: #ffd076; }
.opt.guess-pick { border-color: #8fd3a8; border-style: dashed; }
.opt.match { background: rgba(120, 200, 140, 0.3); border-color: #8fd3a8; border-style: solid; }

/* ───────── waiting on the other one ───────── */
.waiting { text-align: center; }
.waiting-line { font-size: 0.95rem; color: #b9a8cf; margin-bottom: 10px; }
.waiting .dots { margin: 0 0 4px; }

/* ───────── reveal ───────── */
.reveal { display: flex; flex-direction: column; gap: 12px; }

.rev-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.rev-rows.hit { border-color: rgba(143, 211, 168, 0.5); background: rgba(120, 200, 140, 0.12); }

.rev-row { display: flex; align-items: baseline; gap: 10px; }
/* min-width so the two picks line up under each other, whatever the labels */
.rev-who { flex: 0 0 auto; min-width: 7.4em; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9d8bb5; }
.rev-pick { flex: 1; font-weight: 700; font-size: 1rem; line-height: 1.3; }

.rev-head { text-align: center; font-size: 0.95rem; color: #b9a8cf; }
.rev-rows.hit + .rev-head { color: #a8e6bd; }

#btn-next {
  font: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  display: block;
  width: 100%;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  color: #241a10;
  background: #ffd076;
  padding: 14px 18px;
}
#btn-next:active { transform: scale(0.98); }

/* ───────── final score ───────── */
.final {
  margin: 4px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.final-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 11px 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 1rem;
}
.final-row b { color: #ffd076; font-size: 1.15rem; }

.verdict { margin-bottom: 20px; font-size: 0.95rem; line-height: 1.5; color: #cbbfe0; }

@media (min-width: 620px) {
  .opts { display: grid; grid-template-columns: 1fr 1fr; }
}

/* On a narrow phone the two score chips and the room badge will not share a
   line with the back button, so give the scores a row of their own. */
@media (max-width: 430px) {
  #play .topbar { flex-wrap: wrap; }
  #play #score { order: 3; flex-basis: 100%; }
}

/* Skipping a question. Deliberately understated and below the options: it is
   an escape hatch for a question you have already talked through, not one of
   the four things you are choosing between. */
.skip-row {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.skip-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #b9a8cf;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.skip-btn:hover { border-color: rgba(255, 255, 255, 0.4); color: #f3ecdf; }
.skip-btn:active { transform: translateY(1px); }
.skip-note { font-size: 0.78rem; color: #8d7da5; }