/* Love Match skin — on top of base.css.
   Cool-paper register like the other games, with one exception: the result art brings its own colour,
   so the cards around it stay white and the only other saturated things on the page are still the two
   people (their card borders, their facet stripes, their bars). */

/* ---------- START preview ---------- */
.ma-preview { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 78%; }
.ma-preview__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.ma-preview__card {
  background: var(--paper-raised); border: 1px solid var(--line); border-top-width: 3px; border-radius: var(--r8);
  padding: 12px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; text-align: center; box-shadow: var(--shadow-1);
}
.ma-preview__card.pink { border-top-color: var(--pink); }
.ma-preview__card.blue { border-top-color: var(--blue); }
.ma-preview__card img { width: 76px; height: 76px; border-radius: var(--r8); }
.ma-preview__ring {
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper-raised); border: 6px solid var(--pink); border-right-color: var(--blue); border-bottom-color: var(--line);
  font: 800 26px/1 var(--font); letter-spacing: -.02em;
}
.ma-preview__ring i { font: 12px var(--mono); font-style: normal; color: var(--ink-soft); }

/* ---------- PACK ---------- */
.ma-pack { width: min(900px, calc(100vw - 32px)); padding-top: 36px; gap: 16px; }
.ma-tests { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ma-test {
  display: grid; grid-template-columns: 40px minmax(96px, 130px) minmax(0, 1fr) auto minmax(150px, 210px);
  align-items: center; gap: 16px; text-align: left; padding: 18px 20px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r8);
  box-shadow: var(--shadow-1); transition: box-shadow .15s, border-color .12s; position: relative;
}
.ma-test:hover { box-shadow: var(--shadow-2); }
.ma-test[aria-pressed="true"] { border-color: var(--ink); }
.ma-test.is-playing { border-color: var(--ink); border-width: 2px; padding: 17px 19px; }
.ma-test__emoji { font-size: 26px; line-height: 1; }
.ma-test__t { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.ma-test__d { font-size: 14px; color: var(--ink-soft); line-height: 1.35; }
.ma-test__peeks { display: flex; gap: 8px; }
.ma-test__peeks img { width: 46px; height: 46px; border-radius: var(--r8); border: 1px solid var(--line); }
.ma-test__bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; width: 154px; }
.ma-test__bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--pink), var(--blue)); opacity: .55; }
.ma-test__n { font: 12px/1.4 var(--mono); color: var(--ink-soft); }
.ma-test__dots { position: absolute; top: 10px; right: 12px; display: flex; gap: 5px; }
.ma-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.ma-dot.pink { background: var(--pink); } .ma-dot.blue { background: var(--blue); }
.ma-chosen { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 760px) {
  /* One thing per row on a phone: the peeks and the count each get their own line so neither wraps
     into the other (they did, in the same grid cell, until the mobile screenshot said so). */
  .ma-test { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: 'e t' 'd d' 'p p' 'n n'; gap: 8px 12px; padding: 16px; }
  .ma-test.is-playing { padding: 15px; }
  .ma-test__emoji { grid-area: e; } .ma-test__t { grid-area: t; } .ma-test__d { grid-area: d; }
  .ma-test__peeks { grid-area: p; } .ma-test__n { grid-area: n; align-self: center; }
}

/* ---------- QUESTION ---------- */
.ma-play { gap: 16px; padding-top: 40px; }
.ma-meta { display: flex; align-items: center; gap: 14px; width: min(620px, 100%); }
.ma-step { font: 700 13px var(--mono); letter-spacing: .1em; color: var(--ink-soft); flex: none; }
.ma-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ma-bar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .25s ease; }
.ma-timer { font: 800 13px var(--mono); letter-spacing: .04em; color: var(--ink-soft); flex: none; min-width: 34px; text-align: right; }
.ma-timer.is-low { color: var(--red); }
.ma-question { max-width: 20ch; }

.ma-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(660px, 100%); }
.ma-options.is-wide { grid-template-columns: 1fr; width: min(520px, 100%); }
.ma-option {
  display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 14px 16px;
  border-radius: var(--r8); border: 1px solid var(--line); background: var(--paper-raised);
  text-align: left; font-weight: 700; font-size: 15px; transition: border-color .12s, box-shadow .12s;
}
.ma-option:hover:not(:disabled) { border-color: var(--ink-faint); box-shadow: var(--shadow-1); }
.ma-option[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ma-option:disabled { opacity: .72; }
.ma-option__e { font-size: 20px; line-height: 1; flex: none; }
.ma-option__t { line-height: 1.3; }
.ma-birthday { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.ma-birthday__sel { width: auto; min-width: 92px; height: 48px; }
.ma-hint { min-height: 20px; }

/* The mini-reveal: both answers, tinted, for 3.4 s. */
.ma-reveal { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: min(660px, 100%); animation: maPop .18s ease-out; }
@keyframes maPop { from { opacity: 0; transform: translateY(6px); } }
.ma-reveal__card {
  text-align: left; padding: 12px 14px 14px; border-radius: var(--r8); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; min-height: 74px;
}
.ma-reveal__card.pink { border-color: var(--pink); background: linear-gradient(180deg, var(--pink-tint), var(--paper-raised) 90%); }
.ma-reveal__card.blue { border-color: var(--blue); background: linear-gradient(180deg, var(--blue-tint), var(--paper-raised) 90%); }
.ma-reveal__card .v { font-weight: 700; font-size: 15px; line-height: 1.3; }
.ma-reveal__mark { font-size: 18px; font-weight: 800; color: var(--ink-faint); }
.ma-reveal__mark.is-same { color: var(--green); }
@media (max-width: 520px) {
  .ma-options { grid-template-columns: 1fr; }
  .ma-play { padding-top: 28px; gap: 14px; }
  .ma-question { font-size: clamp(20px, 5.6vw, 26px); max-width: 22ch; }
  .ma-reveal { grid-template-columns: 1fr; }
  .ma-reveal__mark { justify-self: center; }
}

/* ---------- RESULT ---------- */
.ma-result { width: min(720px, calc(100vw - 32px)); padding-top: 34px; gap: 18px; }
.ma-profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; }
.ma-profile {
  background: var(--paper-raised); border: 1px solid var(--line); border-top-width: 3px; border-radius: var(--r8);
  box-shadow: var(--shadow-1); padding: 14px 16px 18px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; text-align: center;
}
.ma-profile.pink { border-top-color: var(--pink); }
.ma-profile.blue { border-top-color: var(--blue); }
.ma-profile__art { width: min(180px, 70%); height: auto; border-radius: var(--r8); }
.ma-profile__name { font-size: 21px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.ma-profile__blurb { font-size: 14px; color: var(--ink-soft); line-height: 1.4; margin: 0; }
.ma-glyph { font-size: 24px; }
.ma-letters { display: flex; gap: 10px; font: 700 13px var(--mono); letter-spacing: .22em; color: var(--ink-soft); }
.ma-group { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 999px; background: var(--paper); font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ma-leans { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ma-lean { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); font: 11px var(--mono); color: var(--ink-soft); }
.ma-bars { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.ma-bar-row { display: grid; grid-template-columns: minmax(96px, auto) 1fr 28px; align-items: center; gap: 8px; font-size: 12px; }
.ma-bar-row .l { text-align: left; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-bar-row .track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ma-bar-row .track i { display: block; height: 100%; background: var(--ink-faint); }
.ma-bar-row .track i.pink { background: var(--pink); } .ma-bar-row .track i.blue { background: var(--blue); }
.ma-bar-row .v { text-align: right; color: var(--ink-soft); }

.ma-ring { position: relative; width: 168px; height: 168px; display: grid; place-items: center; }
.ma-ring__svg { width: 168px; height: 168px; transform: rotate(-90deg); position: absolute; inset: 0; }
.ma-ring__track { fill: none; stroke: var(--line); stroke-width: 12; }
.ma-ring__arc { fill: none; stroke: url(#maRing); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ma-ring__n { font: 800 46px/1 var(--font); letter-spacing: -.03em; z-index: 1; }
.ma-ring__n i { font: 700 16px var(--mono); font-style: normal; color: var(--ink-soft); margin-left: 2px; }
.ma-bandline { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }

.ma-facets { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.ma-facet {
  text-align: left; padding: 12px 16px; border-radius: var(--r8); background: var(--paper-raised);
  border: 1px solid var(--line); border-left-width: 4px;
}
.ma-facet.pink { border-left-color: var(--pink); } .ma-facet.blue { border-left-color: var(--blue); }
.ma-facet__t { font-weight: 800; font-size: 15px; }
.ma-facet__d { font-size: 14px; color: var(--ink-soft); line-height: 1.45; }

.ma-ai { width: 100%; display: flex; flex-direction: column; gap: 10px; }
/* Pink at one end, blue at the other, lilac where they meet — the two of them, which is the whole
   point of the verdict. The ends were already tokens and flipped; the lilac in the middle was a
   literal, so at night the card faded UP to a pale band with near-white text across it.
   --grad-soft is exactly these three (its light stops ARE --pink-tint and --blue-tint) and it has
   both palettes, so the card keeps its meaning and gains a night. */
.ma-verdict {
  text-align: left; padding: 18px 20px 20px; border-radius: var(--r8);
  background: var(--grad-soft);
}
.ma-verdict p { margin: 6px 0 0; font-size: 16px; font-weight: 700; line-height: 1.55; }
.ma-insight { text-align: left; padding: 14px 16px; border-radius: var(--r8); background: var(--paper-raised); border: 1px solid var(--line); }
.ma-insight p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.ma-dateidea { text-align: left; padding: 14px 16px 16px; border-radius: var(--r8); border: 1.5px dashed var(--pink); background: var(--paper-raised); }
.ma-dateidea .eyebrow { color: var(--pink); }
.ma-dateidea p { margin: 6px 0 0; font-size: 15px; font-weight: 700; line-height: 1.5; }
.ma-thinking { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; }
.ma-disclaimer { font-size: 13px; font-style: italic; color: var(--ink-soft); max-width: 48ch; }
@media (max-width: 620px) {
  .ma-profiles { grid-template-columns: 1fr; }
  .ma-profile__art { width: 150px; }
  .ma-ring, .ma-ring__svg { width: 148px; height: 148px; }
}

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