/* Riddle Night skin — on top of base.css.
   The register is the cool-paper games one: centred single column, mono eyebrows, near-sharp radii.
   The only saturated colour is still the two people (pink / blue) plus the verdict chips. */

/* ---------- PACK ---------- */
/* Three across on a desktop shelf, two on a phone — nine packs read as a 3×3 grid. */
.rd-pack { width: min(600px, calc(100vw - 32px)); padding-top: 32px; }
.rd-packs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rd-packs .pack-card { min-height: 210px; }
@media (max-width: 560px) { .rd-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rd-options { width: min(560px, 100%); gap: 18px; }
.rd-modes { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.rd-modes__row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rd-mode {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 120px; min-height: 56px; padding: 8px 14px; border-radius: var(--r8);
  border: 1px solid var(--line); background: var(--paper-raised);
}
.rd-mode .t { font-weight: 700; font-size: 15px; }
.rd-mode .s { font: 11px var(--mono); color: var(--ink-soft); letter-spacing: .02em; }
.rd-mode[aria-pressed="true"] { border-color: var(--ink); border-width: 2px; }
.rd-mode[aria-pressed="true"] .s { color: var(--ink); }
.rd-pack-foot { font: 13px var(--mono); color: var(--ink-soft); letter-spacing: .01em; }
@media (max-width: 480px) { .rd-mode { min-width: calc(50% - 4px); } }

/* ---------- shared play furniture ---------- */
.rd-dots { color: var(--pink); letter-spacing: .18em; font-size: 14px; }
.rd-art { font-size: 34px; line-height: 1.1; letter-spacing: 6px; }
.rd-art--sm { font-size: 24px; letter-spacing: 4px; }
.rd-card {
  width: 100%; padding: 22px 24px; border-radius: var(--r8); border: 1px solid var(--line);
  background: var(--paper-raised); box-shadow: var(--shadow-1);
  font-size: clamp(17px, 2.2vw, 21px); font-weight: 800; letter-spacing: -.01em; line-height: 1.35;
  text-wrap: balance; text-align: center;
}
.rd-card.is-dim { font-size: clamp(14px, 1.7vw, 16px); color: var(--ink-soft); padding: 16px 20px; box-shadow: none; }

/* ---------- RIDDLE ---------- */
.rd-play { gap: 16px; }
.rd-unit { font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.rd-textarea { width: min(520px, 100%); min-height: 92px; font-size: 16px; }
.rd-waiting { font-size: 14px; color: var(--ink-soft); }
.rd-hint-btn { font-size: 14px; min-height: 38px; padding: 0 16px; }
.rd-hint {
  width: min(520px, 100%); padding: 12px 16px; border-radius: var(--r8);
  background: var(--yellow-tint); color: var(--on-yellow-tint); font-size: 15px; line-height: 1.4;
}

/* ---------- REVEAL ---------- */
.rd-reveal { gap: 16px; }
.rd-judging { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 6px; }
.rd-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.rd-answer {
  text-align: left; padding: 14px 16px; border-radius: var(--r8); border: 1px solid var(--line);
  background: var(--paper-raised); display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-1);
}
.rd-answer--pink { border-color: var(--pink); }
.rd-answer--blue { border-color: var(--blue); }
.rd-answer__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.rd-answer__name { font-weight: 800; font-size: 17px; }
.rd-answer__v { font-size: 16px; word-break: break-word; }
.rd-verdict {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 999px; font: 700 13px var(--mono); letter-spacing: .02em; flex: none;
}
.rd-verdict.is-correct { background: var(--green-tint); color: var(--on-green-tint); border: 1px solid var(--green); }
.rd-verdict.is-close { background: var(--yellow-tint); color: var(--on-yellow-tint); border: 1px solid var(--yellow); }
.rd-verdict.is-wrong { background: var(--red-tint); color: var(--on-red-tint); border: 1px solid var(--red); min-width: 36px; padding: 0 10px; }
@media (max-width: 560px) { .rd-answers { grid-template-columns: 1fr; } }

.rd-solution {
  width: 100%; padding: 18px 22px; border: 2px solid var(--ink); border-radius: var(--r8);
  background: var(--paper-raised); display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.rd-solution__tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); font: 700 11px var(--mono); letter-spacing: .14em;
}
.rd-solution__a { font-size: clamp(19px, 2.6vw, 24px); font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
.rd-solution__story { font-size: 15px; color: var(--ink-soft); line-height: 1.45; max-width: 52ch; text-wrap: balance; }
.rd-line { max-width: 46ch; }

.rd-scores { display: flex; gap: 10px; justify-content: center; }
.rd-score {
  min-width: 82px; padding: 8px 14px 10px; border-radius: var(--r8); border: 1px solid var(--line);
  background: var(--paper-raised); display: flex; flex-direction: column; align-items: center; gap: 2px;
  border-bottom-width: 3px;
}
.rd-score.pink { border-bottom-color: var(--pink); }
.rd-score.blue { border-bottom-color: var(--blue); }
.rd-score .who { font-size: 13px; color: var(--ink-soft); }
.rd-score .n { font: 800 26px/1.1 var(--mono); }

/* ---------- RESULT ---------- */
.rd-result { padding-top: 36px; gap: 18px; }
.rd-result-emoji { font-size: 52px; line-height: 1; }
.rd-winner { font-size: clamp(40px, 8vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.rd-winner.pink { color: var(--pink); }
.rd-winner.blue { color: var(--blue); }
.rd-band { font-size: clamp(18px, 2.6vw, 22px); font-weight: 700; color: var(--ink-soft); text-wrap: balance; }
.rd-score-rows { width: min(430px, 100%); display: flex; flex-direction: column; gap: 10px; }
.rd-score-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-radius: var(--r8); background: var(--paper-raised);
  border: 1px solid var(--line); border-left-width: 4px; font-weight: 800; font-size: 17px;
}
.rd-score-row.pink { border-left-color: var(--pink); }
.rd-score-row.blue { border-left-color: var(--blue); }
.rd-score-row .pts { font-weight: 700; font-size: 16px; }
.rd-rounds { width: min(480px, 100%); }
.rd-rounds .r { align-items: center; gap: 10px; }
.rd-rounds__art { width: 40px; flex: none; font-size: 14px; white-space: nowrap; }
.rd-rounds .r .t { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-rounds__marks { display: flex; gap: 6px; flex: none; }
.rd-mark {
  width: 30px; height: 26px; border-radius: var(--r4); border: 1px solid var(--line);
  display: grid; place-items: center; font: 700 13px var(--mono); background: var(--paper-raised);
}
.rd-mark.pink { border-color: var(--pink); }
.rd-mark.blue { border-color: var(--blue); }
.rd-mark.correct { color: var(--green); }
.rd-mark.close { color: #7A5A00; }
.rd-mark.wrong { color: var(--ink-faint); }

/* ---------- room for the activity bar (docs/R2-INTERFACE.md S5) ----------
   These top paddings exist to hold a scene off the top of the WINDOW. With the 44px bar there,
   the bar already does that, and the two together push the first line of a scene ~9%% of an
   iPhone's screen down before anything is said. Trimmed by 20px, so the gap a person sees is the
   gap that was designed. Nothing moves on a page with no bar. */
body.has-activitybar .rd-pack { padding-top: 12px; }
body.has-activitybar .rd-result { padding-top: 16px; }