/* IQ Duel skin — on top of base.css.
   Cool-paper register: centred single column, mono eyebrows, near-sharp radii. The puzzles are
   monochrome ink (inline SVG inherits `currentColor`), so the only saturated colour in the whole game
   is still the two people — their name cards, their score rows and their ticks. */

/* ---------- START preview ---------- */
.iq-preview { width: min(240px, 60%); }
.iq-preview svg { width: 100%; height: auto; color: var(--ink); }

/* ---------- PACK ---------- */
.iq-pack { width: min(560px, calc(100vw - 32px)); min-height: calc(100svh - var(--bar-h, 0px)); justify-content: center; gap: 18px; }
.iq-lengths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
.iq-length {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 20px 18px 22px; min-height: 148px; text-align: left;
  border-radius: var(--r8); border: 1px solid var(--line); background: var(--paper-raised);
  box-shadow: var(--shadow-1); transition: box-shadow .15s, border-color .12s;
}
.iq-length:hover { box-shadow: var(--shadow-2); }
.iq-length[aria-pressed="true"] { border-color: var(--ink); border-width: 2px; padding: 19px 17px 21px; }
.iq-length .emoji { font-size: 26px; line-height: 1.2; margin-bottom: 6px; }
.iq-length .t { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.iq-length .s { font-size: 14px; color: var(--ink-soft); }
.iq-notes { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.iq-note {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 16px; border-radius: var(--r8); border: 1px solid var(--line);
  background: var(--paper-raised); font-size: 14px; color: var(--ink-soft);
}
.iq-note .e { font-size: 16px; flex: none; }
@media (max-width: 480px) { .iq-lengths { grid-template-columns: 1fr; } .iq-length { min-height: 0; } }

/* ---------- QUESTION ---------- */
.iq-play { gap: 16px; padding-top: 40px; }
.iq-meta { flex-wrap: wrap; justify-content: center; gap: 10px; }
.iq-cat {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--paper-raised);
  font: 700 11px var(--mono); letter-spacing: .1em; color: var(--ink-soft);
}
.iq-finale {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
  background: var(--yellow-tint); color: var(--on-yellow-tint); font: 700 11px var(--mono); letter-spacing: .08em;
}
.iq-timer { font: 800 17px var(--mono); letter-spacing: .02em; color: var(--ink); }
.iq-timer.is-low { color: var(--red); }
.iq-question { max-width: 26ch; }

/* The drawn puzzle. One inline SVG, ink on paper, sized by the column. */
.iq-figure-wrap { width: 100%; display: flex; justify-content: center; }
.iq-figure { color: var(--ink); width: auto; max-width: 100%; max-height: 46svh; height: auto; }
.iq-figure--matrix { width: min(324px, 82%); }
.iq-figure--row { width: min(560px, 100%); }
.iq-figure--set { width: min(360px, 90%); }

.iq-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.iq-option {
  min-height: 60px; padding: 14px 16px; border-radius: var(--r8); border: 1px solid var(--line);
  background: var(--paper-raised); text-align: left; font-weight: 600; font-size: 16px;
  transition: border-color .12s, background .12s;
}
.iq-option:hover:not(:disabled) { border-color: var(--ink-faint); }
.iq-option[aria-pressed="true"] { border-color: var(--ink); border-width: 2px; background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--ink); }
.iq-option:disabled { opacity: .6; }
/* Drawn options are tiles, not sentences: square, centred, and the art carries the meaning. */
.iq-options.is-drawn .iq-option { display: grid; place-items: center; padding: 10px; min-height: 0; aspect-ratio: 1 / 1; }
.iq-options.is-drawn .iq-option svg { width: 100%; height: 100%; color: var(--ink); }
.iq-options.is-drawn { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(440px, 100%); }
@media (max-width: 520px) {
  .iq-options { grid-template-columns: 1fr; }
  .iq-options.is-drawn { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* On a phone a full-size matrix pushes the lock-in button and the two name cards below the fold,
     so the figure gives up some width to keep the whole question on one screen. */
  .iq-play { gap: 12px; padding-top: 24px; }
  .iq-figure { max-height: 38svh; }
  .iq-figure--matrix { width: min(250px, 66%); }
  .iq-figure--row { width: 100%; }
  .iq-question { font-size: clamp(20px, 5.6vw, 26px); }
}
.iq-input { width: min(520px, 100%); text-align: center; font-size: 18px; }

/* The two name cards. They never say anything but "thinking…" or "locked in ✓". */
.iq-vs { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.iq-vs__x { font: 12px var(--mono); color: var(--ink-faint); }
.iq-vs__card {
  min-width: 118px; padding: 8px 14px 9px; border-radius: var(--r8);
  border: 1px solid var(--line); border-bottom-width: 3px; background: var(--paper-raised);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.iq-vs__card.pink { border-bottom-color: var(--pink); }
.iq-vs__card.blue { border-bottom-color: var(--blue); }
.iq-vs__card .n { font-weight: 700; font-size: 13px; }
.iq-vs__card .s { font: 11px var(--mono); color: var(--ink-faint); letter-spacing: .02em; }
.iq-vs__card.is-locked .s { color: var(--green); }

/* ---------- RESULT ---------- */
.iq-result { width: min(620px, calc(100vw - 32px)); padding-top: 36px; gap: 16px; }
.iq-trophy { font-size: 50px; line-height: 1; }
.iq-winner { font-size: clamp(40px, 8vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.iq-winner.pink { color: var(--pink); }
.iq-winner.blue { color: var(--blue); }
.iq-score-rows { width: min(430px, 100%); display: flex; flex-direction: column; gap: 10px; }
.iq-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;
}
.iq-score-row.pink { border-left-color: var(--pink); }
.iq-score-row.blue { border-left-color: var(--blue); }
.iq-score-row .pts { font-weight: 700; font-size: 16px; }

.iq-iqcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(430px, 100%); }
.iq-iqcard {
  padding: 14px 12px 16px; border-radius: var(--r8); border: 1px solid var(--line);
  background: var(--paper-raised); display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.iq-iqcard.pink { border-color: var(--pink); background: linear-gradient(180deg, var(--pink-tint) 0%, var(--paper-raised) 60%); }
.iq-iqcard.blue { border-color: var(--blue); background: linear-gradient(180deg, var(--blue-tint) 0%, var(--paper-raised) 60%); }
.iq-iqcard .who { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.iq-iqcard .n { font: 800 46px/1.05 var(--font); letter-spacing: -.03em; }
.iq-iqcard .band { font: 700 12px var(--mono); letter-spacing: .02em; }
.iq-iqcard .range { font: 11px var(--mono); color: var(--ink-faint); }
.iq-disclaimer { font-size: 13px; font-style: italic; color: var(--ink-soft); max-width: 46ch; }

.iq-answers { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.iq-answer {
  border: 1px solid var(--line); border-radius: var(--r8); background: var(--paper-raised);
  padding: 10px 14px 11px; text-align: left; display: flex; flex-direction: column; gap: 5px;
}
.iq-answer__head { display: flex; align-items: center; gap: 10px; }
.iq-answer__head .n { font: 12px var(--mono); color: var(--ink-faint); width: 20px; flex: none; }
.iq-answer__head .cat { font-size: 15px; flex: none; }
.iq-answer__head .q { flex: 1; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iq-answer__head .marks { display: flex; gap: 6px; flex: none; }
.iq-answer__body { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-left: 30px; font: 12px var(--mono); color: var(--ink-soft); }
.iq-answer__body .a b { font-weight: 700; }
.iq-answer__body .a.pink b { color: #C2255C; }
.iq-answer__body .a.blue b { color: #1E5FBF; }
.iq-answer__body .a--right b { color: var(--green); }
.iq-answer__why { padding-left: 30px; font-size: 13px; color: var(--ink-faint); line-height: 1.4; }
.iq-mark {
  width: 28px; height: 24px; border-radius: var(--r4); border: 1px solid var(--line);
  display: grid; place-items: center; font: 700 13px var(--mono); background: var(--paper-raised);
}
.iq-mark.pink { border-color: var(--pink); }
.iq-mark.blue { border-color: var(--blue); }
.iq-mark.correct { color: var(--green); }
.iq-mark.partial { color: #7A5A00; }
.iq-mark.wrong { color: var(--ink-faint); }
@media (max-width: 520px) {
  .iq-answer__head .q { white-space: normal; }
  .iq-answer__body { padding-left: 0; }
  .iq-answer__why { padding-left: 0; }
}

/* ---------- 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 .iq-play { padding-top: 20px; }
body.has-activitybar .iq-result { padding-top: 16px; }
@media (max-width: 520px) { body.has-activitybar .iq-play { padding-top: 12px; } }