/* =====================================================================
   Put the Reformation in Order — styles
   Parchment board / charcoal ink / antique gold. Mobile-first. Everything
   is scoped under #rt-root so the game can be dropped into any page without
   leaking styles (same pattern as berean.css).
   ===================================================================== */
#rt-root {
  --rt-paper: #f5efe0;        /* board background (brand parchment) */
  --rt-paper-2: #efe6d3;      /* deeper parchment */
  --rt-card: #fbf7ec;         /* event card face */
  --rt-card-2: #f3ecdb;       /* card gradient foot */
  --rt-ink: #1f1d1a;          /* brand charcoal */
  --rt-ink-soft: #5d5647;     /* muted ink */
  --rt-ink-faint: #8a8172;    /* faint ink (meta) */
  --rt-gold: #b8914b;         /* brand antique gold */
  --rt-gold-deep: #8a642e;
  --rt-gold-soft: #d6bc7b;
  --rt-line: rgba(133, 102, 50, 0.30);
  --rt-line-soft: rgba(133, 102, 50, 0.16);
  --rt-good: #3f7d54;
  --rt-good-bg: rgba(63, 125, 84, 0.12);
  --rt-good-line: rgba(63, 125, 84, 0.5);
  --rt-bad: #b1553f;
  --rt-bad-bg: rgba(177, 85, 63, 0.11);
  --rt-bad-line: rgba(177, 85, 63, 0.5);
  --rt-display: "Cinzel", Georgia, serif;
  --rt-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  max-width: 900px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 30px);
  color: var(--rt-ink);
  font-family: var(--rt-body);
  background:
    radial-gradient(120% 90% at 50% -10%, #fbf6ea 0%, var(--rt-paper) 52%, var(--rt-paper-2) 100%);
  border: 1px solid var(--rt-line);
  border-radius: 20px;
  box-shadow: 0 30px 70px -32px rgba(24, 22, 19, 0.4);
  -webkit-font-smoothing: antialiased;
}
#rt-root * { box-sizing: border-box; }
#rt-root button { font-family: inherit; cursor: pointer; color: inherit; }
#rt-root h1, #rt-root h2, #rt-root h3, #rt-root h4 {
  color: var(--rt-ink);
  font-family: var(--rt-display);
}
#rt-root p { margin: 0; }

.rt-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.rt-loading { text-align: center; padding: 4rem 1rem; font-size: 1.2rem; color: var(--rt-ink-soft); }

/* ---- entrance animation ---- */
.rt-anim { animation: rtFade 0.45s ease both; }
@keyframes rtFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- hero / intro ---- */
.rt-hero { text-align: center; padding: 0.5rem 0 0.25rem; }
.rt-eyebrow { font-family: var(--rt-display); letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.72rem; color: var(--rt-gold-deep); margin: 0 0 0.5rem; }
.rt-title { font-family: var(--rt-display); font-weight: 700; font-size: clamp(1.7rem, 5vw, 2.7rem); line-height: 1.08; margin: 0 0 0.6rem; color: var(--rt-ink); }
.rt-subtitle { max-width: 42rem; margin: 0 auto; font-size: 1.08rem; line-height: 1.55; color: var(--rt-ink-soft); }

/* ---- stat bar ---- */
.rt-statbar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 1.4rem 0; }
@media (min-width: 560px) { .rt-statbar { grid-template-columns: repeat(4, 1fr); } }
.rt-stat { background: rgba(255, 255, 255, 0.5); border: 1px solid var(--rt-line-soft); border-radius: 12px; padding: 0.6rem 0.7rem; text-align: center; }
.rt-stat-k { display: block; font-family: var(--rt-display); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rt-ink-faint); }
.rt-stat-v { display: block; font-family: var(--rt-display); font-weight: 600; font-size: 1.15rem; color: var(--rt-gold-deep); margin-top: 0.15rem; }

.rt-section { font-family: var(--rt-display); font-size: 1.05rem; letter-spacing: 0.04em; color: var(--rt-ink); margin: 1.5rem 0 0.8rem; text-align: center; }

/* ---- how to play ---- */
.rt-how { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin: 0.4rem 0 0.2rem; }
@media (min-width: 620px) { .rt-how { grid-template-columns: repeat(3, 1fr); } }
.rt-how-step { display: flex; gap: 0.7rem; align-items: flex-start; background: rgba(255, 255, 255, 0.4); border: 1px solid var(--rt-line-soft); border-radius: 12px; padding: 0.75rem 0.85rem; }
.rt-how-n { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--rt-gold); color: #fff; font-family: var(--rt-display); font-weight: 700; font-size: 0.85rem; }
.rt-how-t { font-size: 0.98rem; line-height: 1.35; color: var(--rt-ink-soft); }

/* ---- size selector (segmented) ---- */
.rt-sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0.4rem 0 1.2rem; }
.rt-size { padding: 0.6rem 1.1rem; border-radius: 12px; border: 1px solid var(--rt-line); background: rgba(255, 255, 255, 0.45); color: var(--rt-ink-soft); font-family: var(--rt-display); font-size: 0.95rem; letter-spacing: 0.02em; transition: transform 0.12s ease, border-color 0.14s ease, background 0.14s ease, color 0.14s ease; }
.rt-size .rt-size-sub { display: block; font-family: var(--rt-body); font-size: 0.82rem; letter-spacing: 0; color: var(--rt-ink-faint); margin-top: 0.1rem; }
.rt-size:hover, .rt-size:focus-visible { transform: translateY(-2px); border-color: var(--rt-gold); outline: none; }
.rt-size.is-active { background: linear-gradient(180deg, #fff9ec, #f3e6c6); border-color: var(--rt-gold); color: var(--rt-ink); box-shadow: 0 8px 18px -12px rgba(138, 100, 46, 0.6); }
.rt-size.is-active .rt-size-sub { color: var(--rt-gold-deep); }

/* ---- note ---- */
.rt-note { margin: 1.2rem auto 0; max-width: 44rem; padding: 0.8rem 1rem; border-left: 3px solid var(--rt-gold); background: rgba(184, 145, 75, 0.08); border-radius: 0 10px 10px 0; font-size: 0.98rem; line-height: 1.5; color: var(--rt-ink-soft); }
.rt-note strong { color: var(--rt-ink); font-weight: 600; }

/* ---- primary buttons ---- */
.rt-cta { display: block; width: 100%; max-width: 22rem; margin: 0 auto; padding: 0.9rem 1.5rem; border: none; border-radius: 12px; font-family: var(--rt-display); font-weight: 600; letter-spacing: 0.03em; font-size: 1.05rem; color: #fff; background: linear-gradient(135deg, var(--rt-gold), var(--rt-gold-deep)); box-shadow: 0 12px 26px -12px rgba(138, 100, 46, 0.7); transition: transform 0.14s ease, box-shadow 0.14s ease; }
.rt-cta:hover, .rt-cta:focus-visible { transform: translateY(-2px); outline: none; box-shadow: 0 16px 30px -12px rgba(138, 100, 46, 0.75); }
.rt-btn { padding: 0.8rem 1.4rem; border: none; border-radius: 11px; font-family: var(--rt-display); font-weight: 600; letter-spacing: 0.03em; font-size: 1rem; color: #fff; background: linear-gradient(135deg, var(--rt-gold), var(--rt-gold-deep)); box-shadow: 0 12px 24px -14px rgba(138, 100, 46, 0.7); transition: transform 0.14s ease; }
.rt-btn:hover, .rt-btn:focus-visible { transform: translateY(-2px); outline: none; }
.rt-btn-ghost { background: none; color: var(--rt-ink); border: 1px solid var(--rt-line); box-shadow: none; }
.rt-btn-ghost:hover, .rt-btn-ghost:focus-visible { background: rgba(184, 145, 75, 0.12); border-color: var(--rt-gold); }

/* ---- play HUD ---- */
.rt-hud { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; }
.rt-quit { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rt-line); background: rgba(255,255,255,0.4); color: var(--rt-ink-soft); font-size: 1rem; line-height: 1; }
.rt-quit:hover, .rt-quit:focus-visible { border-color: var(--rt-bad); color: var(--rt-bad); outline: none; }
.rt-hud-meta { flex: 1; min-width: 0; }
.rt-round { font-family: var(--rt-display); font-size: 0.9rem; letter-spacing: 0.05em; color: var(--rt-ink); }
.rt-round-sub { font-size: 0.86rem; color: var(--rt-ink-faint); }
.rt-hud-score { display: flex; align-items: center; gap: 0.8rem; }
.rt-streak { font-size: 0.9rem; color: var(--rt-gold-deep); font-weight: 600; white-space: nowrap; }
.rt-score { font-family: var(--rt-display); font-weight: 700; font-size: 1.35rem; color: var(--rt-gold-deep); min-width: 2ch; text-align: right; }

.rt-instr { font-size: 1rem; line-height: 1.45; color: var(--rt-ink-soft); margin: 0.2rem 0 1rem; text-align: center; }
.rt-instr b { color: var(--rt-ink); font-weight: 600; }

/* ---- the ordering list ---- */
.rt-list { list-style: none; margin: 0; padding: 0; }
.rt-card {
  position: relative;
  display: flex; align-items: stretch; gap: 0.6rem;
  padding: 0.7rem 0.7rem 0.7rem 0.55rem;
  margin: 0 0 0.6rem;
  border-radius: 14px;
  border: 1px solid var(--rt-line);
  background: linear-gradient(180deg, var(--rt-card), var(--rt-card-2));
  box-shadow: 0 8px 18px -14px rgba(24, 22, 19, 0.35);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  touch-action: manipulation;
}
.rt-card:last-child { margin-bottom: 0; }
.rt-card.is-grabbable { cursor: grab; }
.rt-card.is-dragging { opacity: 0.55; box-shadow: 0 18px 34px -14px rgba(24, 22, 19, 0.5); border-color: var(--rt-gold); }
.rt-card.is-dragover { border-color: var(--rt-gold); box-shadow: 0 0 0 2px var(--rt-gold-soft) inset; }

.rt-grip { flex: 0 0 auto; display: none; align-items: center; justify-content: center; width: 20px; color: var(--rt-ink-faint); }
.rt-grip svg { width: 16px; height: 16px; }
@media (min-width: 620px) and (pointer: fine) { .rt-grip { display: flex; } }

.rt-pos { flex: 0 0 auto; width: 30px; align-self: center; text-align: center; font-family: var(--rt-display); font-weight: 700; font-size: 1.15rem; color: var(--rt-gold-deep); }

.rt-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; }
.rt-card-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.rt-card-title { font-family: var(--rt-display); font-weight: 600; font-size: 1.05rem; line-height: 1.2; color: var(--rt-ink); }
.rt-card-desc { font-size: 0.95rem; line-height: 1.35; color: var(--rt-ink-soft); }
.rt-year { font-family: var(--rt-display); font-weight: 700; font-size: 0.95rem; color: #fff; background: var(--rt-gold-deep); padding: 0.08rem 0.5rem; border-radius: 999px; white-space: nowrap; }

.rt-ctrls { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.35rem; justify-content: center; }
.rt-move { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--rt-line); background: rgba(255, 255, 255, 0.6); color: var(--rt-gold-deep); transition: transform 0.12s ease, border-color 0.14s ease, background 0.14s ease, opacity 0.14s ease; }
.rt-move svg { width: 20px; height: 20px; }
.rt-move:hover:not(:disabled), .rt-move:focus-visible:not(:disabled) { border-color: var(--rt-gold); background: #fff; transform: translateY(-1px); outline: none; }
.rt-move:disabled { opacity: 0.32; cursor: default; }

/* ---- reveal connectors ---- */
.rt-link { display: flex; align-items: center; gap: 0.5rem; margin: -0.15rem 0 0.45rem 0.9rem; font-size: 0.85rem; font-family: var(--rt-display); letter-spacing: 0.02em; }
.rt-link-ic { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; }
.rt-link-ic svg { width: 15px; height: 15px; }
.rt-link.is-good { color: var(--rt-good); }
.rt-link.is-good .rt-link-ic { background: var(--rt-good-bg); color: var(--rt-good); border: 1px solid var(--rt-good-line); }
.rt-link.is-bad { color: var(--rt-bad); }
.rt-link.is-bad .rt-link-ic { background: var(--rt-bad-bg); color: var(--rt-bad); border: 1px solid var(--rt-bad-line); }

/* reveal card tinting (whole card, by exact placement) */
.rt-card.rt-reveal.is-placed { border-color: var(--rt-good-line); background: linear-gradient(180deg, #f3f8f2, #e9f1e8); }
.rt-card.rt-reveal.is-misplaced { border-color: var(--rt-bad-line); background: linear-gradient(180deg, #fbf1ee, #f4e5e0); }
.rt-place-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--rt-display); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 999px; }
.rt-place-chip.is-placed { color: var(--rt-good); background: var(--rt-good-bg); border: 1px solid var(--rt-good-line); }
.rt-place-chip.is-misplaced { color: var(--rt-bad); background: var(--rt-bad-bg); border: 1px solid var(--rt-bad-line); }

/* ---- submit row ---- */
.rt-submit-row { margin-top: 1.1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.rt-hint-line { font-size: 0.9rem; color: var(--rt-ink-faint); }

/* ---- reveal header ---- */
.rt-reveal-head { text-align: center; margin-bottom: 1.1rem; }
.rt-verdict { font-family: var(--rt-display); font-weight: 700; font-size: clamp(1.5rem, 4.5vw, 2.2rem); color: var(--rt-ink); margin: 0.2rem 0; }
.rt-verdict.is-perfect { color: var(--rt-gold-deep); }
.rt-round-score { font-family: var(--rt-display); font-weight: 700; font-size: clamp(2.4rem, 8vw, 3.4rem); line-height: 1; color: var(--rt-gold-deep); }
.rt-round-score small { font-family: var(--rt-body); font-size: 1rem; color: var(--rt-ink-faint); font-weight: 400; }
.rt-reveal-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0.9rem 0 0; }
.rt-chip { font-family: var(--rt-display); font-size: 0.72rem; letter-spacing: 0.04em; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--rt-line); background: rgba(255,255,255,0.5); color: var(--rt-ink-soft); }
.rt-chip b { color: var(--rt-gold-deep); }

/* ---- correct-order reference strip ---- */
.rt-solution { margin: 0.4rem 0 0; list-style: none; padding: 0; counter-reset: rtsol; }
.rt-sol-item { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 10px; border: 1px solid var(--rt-line-soft); background: rgba(255,255,255,0.45); margin-bottom: 0.4rem; }
.rt-sol-year { font-family: var(--rt-display); font-weight: 700; color: var(--rt-gold-deep); min-width: 3.2ch; }
.rt-sol-title { font-family: var(--rt-display); font-weight: 600; color: var(--rt-ink); }
.rt-sol-desc { display: block; font-size: 0.92rem; color: var(--rt-ink-soft); line-height: 1.35; margin-top: 0.1rem; }

.rt-reveal-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1.4rem 0 0.4rem; }

/* ---- toast (live announcements + streak cheers) ---- */
.rt-toast { position: sticky; bottom: 8px; margin: 0.9rem auto 0; width: max-content; max-width: 92%; padding: 0.5rem 1rem; border-radius: 999px; background: var(--rt-gold-deep); color: #fff; font-family: var(--rt-display); font-weight: 600; font-size: 0.85rem; opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; text-align: center; }
.rt-toast.is-show { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #rt-root *, #rt-root *::before, #rt-root *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}