/* Would You Rather. Panels, buttons, the top bar and toasts come from
   ../shared/arcade.css, linked first in index.html.
 
   The question-game chrome below (.stage, .q-head, .reveal, .final, .skip-row)
   is deliberately a copy of Quiz's rather than a shared file: they look alike
   today but are separate games, and one wanting a different reveal should not
   drag the other with it. The round-drawing LOGIC is shared — that is in
   ../../shared/draw.js — because logic drifting apart is a bug and styling
   drifting apart is a choice. */

#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="food"] { color: #ffe4a8; border-color: rgba(255, 208, 118, 0.4); background: rgba(255, 208, 118, 0.13); }
.q-cat[data-cat="us"] { color: #ffd9ec; border-color: rgba(255, 160, 205, 0.4); background: rgba(255, 150, 200, 0.14); }
.q-cat[data-cat="life"] { color: #b9e6ff; border-color: rgba(130, 200, 240, 0.35); background: rgba(120, 190, 240, 0.13); }
.q-cat[data-cat="silly"] { color: #c9f5dd; border-color: rgba(140, 225, 185, 0.38); background: rgba(130, 220, 180, 0.13); }
.q-cat[data-cat="hard"] { color: #cfd8ff; border-color: rgba(150, 170, 245, 0.4); background: rgba(140, 160, 245, 0.14); }

.wyr-lead {
  font-size: clamp(1.3rem, 5.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #f3ecdf;
}

.role-note { font-size: 0.9rem; color: #b9a8cf; min-height: 1.3em; margin-top: -6px; }

/* ───────── the two options ─────────
   Both are full-size cards rather than a list: a Would You Rather is a fork in
   the road, and two equal halves say that better than four stacked lines. */
.wyr-opts { display: flex; flex-direction: column; gap: 12px; }

.wyr-opt {
  font: inherit;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  min-height: 92px;
  text-align: left;
  padding: 16px 18px;
  border-radius: 16px;
  color: #f3ecdf;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.wyr-opt:hover:not(:disabled) { border-color: rgba(255, 208, 118, 0.5); background: rgba(255, 255, 255, 0.09); }
.wyr-opt:active:not(:disabled) { transform: scale(0.985); }
.wyr-opt:disabled { cursor: default; }

.wyr-tag {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: #241a10;
  background: #cbbfe0;
}
.wyr-text { flex: 1; font-size: 1.05rem; line-height: 1.35; font-weight: 600; }

.wyr-opt.mine { border-color: #ffd076; background: rgba(255, 208, 118, 0.16); }
.wyr-opt.mine .wyr-tag { background: #ffd076; }

/* After the reveal: whose pick was whose, and a solid green when they agreed. */
.wyr-opt.mine-pick { border-color: rgba(255, 208, 118, 0.75); background: rgba(255, 208, 118, 0.14); }
.wyr-opt.their-pick { border-color: rgba(180, 160, 240, 0.75); background: rgba(170, 150, 240, 0.14); }
.wyr-opt.mine-pick.their-pick { border-color: transparent; }
.wyr-opt.match {
  background: rgba(120, 200, 140, 0.26);
  border: 1px solid #8fd3a8;
}
.wyr-opt.match .wyr-tag { background: #8fd3a8; }
.wyr-opts.revealed .wyr-opt:not(.mine-pick):not(.their-pick) { opacity: 0.4; }

/* ───────── 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; }
.rev-who { flex: 0 0 auto; min-width: 6em; 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; font-weight: 700; }

#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; }

/* ───────── skip ───────── */
.skip-row { margin-top: 4px; 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; }

@media (min-width: 640px) {
  .wyr-opts { display: grid; grid-template-columns: 1fr 1fr; }
  .wyr-opt { min-height: 128px; }
}

@media (max-width: 430px) {
  #play .topbar { flex-wrap: wrap; }
}