/* ============================================================
   Judgment Gauntlet — one hand, one metaphor: the royal tribunal.
   Depth reads through value steps, scale, and gold rim-light.
   NO drop shadows anywhere.

   v2 interaction model: FIXED STAGE. The page never scrolls.
   The two scrolls split the stage and stand as PREVIEWS; a
   vertical swipe (up = first, down = second) passes the verdict.
   Full text lives behind a full-screen Unfurl overlay.
   ============================================================ */

:root {
  --bg:#0B132B;  --bg2:#0f1a35;  --bg3:#1a2540;
  --text:#F0FDFD; --text2:#8ab4ba; --text3:#3f6070;
  --gold:#C9A227; --gold-hi:#E8C766;
  --parchment:#F3E9D2; --parchment-2:#E5D5B0; --ink:#2A2418; --ink-2:#5c5238;
  --wax:#8B1E1E;  --wax-hi:#B33A2E;
  --aqua:#40E0D0;
  --radius:10px;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dur:240ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

/* Fixed stage: the document itself is nailed to the viewport. Nothing here
   scrolls — the only scrollable region in the app is the Unfurl overlay. */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  height: 100dvh;
  /* Navy storm stage — a faint vertical value gradient, god-ray-ish, no image. */
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(232,199,102,.10), transparent 60%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 42%, var(--bg) 100%);
  background-attachment: fixed;
}

.app {
  max-width: 880px;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- 1. Masthead (compressed to ~72px) ---------- */
.masthead {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border-bottom: 2px solid var(--gold);
  background: var(--bg);
}
.masthead__art {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
  object-position: 50% 8%;   /* top-anchored crop */
}
@media (min-width: 768px) { .masthead__art { height: 96px; object-position: 50% 6%; } }

/* ---------- 2. Court status strip (compact one row) ---------- */
.court {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--bg3);
}
.court__sprite {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: opacity var(--dur) var(--ease);
}
.court__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 200px; }
.court__caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--text2);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.court__stats {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; letter-spacing: .02em;
}
.court__streak { color: var(--gold-hi); font-weight: 500; white-space: nowrap; }
.court__streak::before { content: "\2691"; margin-right: 5px; color: var(--wax-hi); } /* pennant */
.court__progress { color: var(--text2); white-space: nowrap; }

/* brick progress — value steps, not bars. Compact; the sliver row under the stats. */
.bricks { display: flex; gap: 3px; }
.brick {
  width: 13px; height: 6px; border-radius: 2px;
  background: var(--bg3);
  border: 1px solid #24304d;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.brick.is-set {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border-color: var(--gold);
}

/* ---------- 3. The stage (fills all remaining height, never scrolls) ---------- */
.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.loading, .stage__msg {
  margin: auto;
  color: var(--text2);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  text-align: center;
}

/* context line above the trial — compact, up to two lines, opaque band so a
   scroll lifting during the drag tucks cleanly behind it. */
.trial-context {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--text2);
  text-align: center;
  margin: -12px -16px 10px;
  padding: 10px 20px 8px;
  line-height: 1.3;
  position: relative;
  z-index: 3;
  background: var(--bg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- The trial viewport (clips the moving pair) ---------- */
.trial-viewport {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  padding: 4px;          /* breathing room so the gold rim isn't clipped */
  margin: 0 -4px;
}

/* the moving pair — vertical drag axis; horizontal does nothing */
.trial {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  touch-action: none;           /* we own every gesture; nothing here scrolls */
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.trial.is-dragging { cursor: grabbing; }
/* during the drag the pair follows the finger 1:1 — kill every transition so
   nothing fights the pointer. Transitions return on release for the settle. */
.trial.is-dragging .scroll,
.trial.is-dragging .scroll::after,
.trial.is-dragging .seal-ghost { transition: none; }

/* ---------- A scroll (a PREVIEW panel) ---------- */
.scroll {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  border-radius: var(--radius);
  border: 1px solid var(--parchment-2);
  /* Parchment via layered CSS gradients only — no image texture. */
  background:
    radial-gradient(140% 120% at 12% 0%, rgba(255,255,255,.5), transparent 42%),
    radial-gradient(120% 140% at 100% 100%, rgba(140,110,60,.16), transparent 46%),
    repeating-linear-gradient(92deg, rgba(140,110,60,.05) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, var(--parchment) 0%, var(--parchment-2) 100%);
  color: var(--ink);
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* gold rim-light — a pseudo frame whose opacity JS ramps with the drag; no box-shadow */
.scroll::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius) + 2px);
  padding: 2px;
  background: linear-gradient(135deg, var(--gold-hi), rgba(232,199,102,.15) 45%, rgba(232,199,102,.15) 55%, var(--gold-hi));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--rim, 0);
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.scroll.is-leading { border-color: var(--gold); }

.plaque {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 6px;
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(90,80,50,.28);
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
}
.plaque::before {
  content: "";
  width: 7px; height: 7px;
  border: 1.5px solid var(--wax);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
/* preview body: NO internal scroll. Overflow is clipped; a bottom fade + the
   Unfurl affordance signal there is more behind the mask. */
.scroll__body {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}
.scroll.is-clipped .scroll__body {
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}

/* Unfurl affordance — a real button (keyboard path), shown only when the
   preview is actually clipped. Tapping anywhere on the scroll opens it too. */
.scroll__unfurl {
  display: none;
}
.scroll.is-clipped .scroll__unfurl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wax);
  background: rgba(243,233,210,.86);
  border: 1px solid rgba(139,30,30,.35);
  border-radius: 999px;
  padding: 3px 11px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.scroll__unfurl .chev { font-size: 11px; line-height: 1; }
.scroll__unfurl:hover { background: var(--parchment); border-color: var(--wax); color: var(--wax-hi); }
.scroll__unfurl:focus-visible { outline: 3px solid var(--wax-hi); outline-offset: 2px; }

/* seal ghost — the wax disc that blooms over the would-be winner */
.seal-ghost {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40%;
  max-width: 132px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, var(--wax-hi), var(--wax) 62%, #6b1414 100%);
  opacity: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  will-change: opacity, transform;
  transform: scale(.6);
}
.seal-ghost::before {
  content: "\2691";              /* pennant sigil in the wax */
  font-size: 30px;
  color: rgba(255,225,180,.55);
  line-height: 1;
}

/* ---------- 4. Verdict row (pinned to the very bottom, always visible) ---------- */
.verdict-row {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 9px;
  margin: 10px -16px 0;
  padding: 10px 16px 2px;
  position: relative;
  z-index: 3;
  background: var(--bg);        /* opaque band: a scroll dragged down tucks behind it */
  border-top: 1px solid var(--bg3);
}
.verdict {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--parchment);
  background: var(--bg2);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  padding: 12px 10px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 120ms var(--ease);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.verdict .arrow { color: var(--gold-hi); font-size: 15px; line-height: 1; }
.verdict--tie {
  background: var(--bg3);
  border-color: #2e3c5c;
  color: var(--text2);
  padding-inline: 16px;
}
.verdict:hover { background: #14213f; border-color: var(--gold-hi); color: var(--text); }
.verdict--tie:hover { background: #22304c; border-color: #3a4a6e; color: var(--text); }
.verdict:active { transform: translateY(1px); }
.verdict:focus-visible {
  outline: 3px solid var(--gold-hi);
  outline-offset: 2px;
}

.hint {
  flex: 0 0 auto;
  text-align: center;
  font-size: 11.5px;
  color: #6b9099;          /* muted but AA on navy (5.3:1) */
  letter-spacing: .02em;
  margin-top: 6px;
}
.hint .k { color: var(--text2); }
/* on short screens the arrows on the buttons carry the message — drop the hint */
@media (max-height: 700px) { .hint { display: none; } }

/* ---------- 5. Footer whisper (retired in the fixed layout — counts live in the court strip) ---------- */
.whisper { display: none; }

/* ---------- Unfurl overlay (the only scrollable region in the app) ---------- */
.unfurl {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: rgba(6,10,24,.72);
  opacity: 0;
  transition: opacity 180ms var(--ease);
}
.unfurl.is-open { opacity: 1; }
.unfurl__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: auto;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--parchment-2);
  background:
    radial-gradient(140% 90% at 12% 0%, rgba(255,255,255,.5), transparent 42%),
    radial-gradient(120% 120% at 100% 100%, rgba(140,110,60,.16), transparent 46%),
    repeating-linear-gradient(92deg, rgba(140,110,60,.05) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, var(--parchment) 0%, var(--parchment-2) 100%);
  color: var(--ink);
  overflow: hidden;
}
.unfurl__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(90,80,50,.28);
}
.unfurl__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
}
.unfurl__label::before {
  content: "";
  width: 7px; height: 7px;
  border: 1.5px solid var(--wax);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.unfurl__close {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1;
  color: var(--ink-2);
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(90,80,50,.35);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.unfurl__close:hover { background: rgba(255,255,255,.6); color: var(--ink); border-color: var(--wax); }
.unfurl__close:focus-visible { outline: 3px solid var(--wax-hi); outline-offset: 2px; }
.unfurl__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;          /* the overlay is the one place a finger scrolls */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 16px 18px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: rgba(90,80,50,.4) transparent;
}
.unfurl__body::-webkit-scrollbar { width: 7px; }
.unfurl__body::-webkit-scrollbar-thumb { background: rgba(90,80,50,.4); border-radius: 3px; }

/* ---------- 6. Secured state ---------- */
.secured {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 20px;
}
.secured__sprite {
  width: 150px; height: 150px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.secured__title {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  color: var(--text);
}
.secured__streak {
  font-size: 15px; color: var(--gold-hi); font-weight: 500;
}
.secured__streak::before { content: "\2691"; margin-right: 6px; color: var(--wax-hi); }
.secured__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--text2);
}

/* ---------- 7. Portcullis (401) ---------- */
.portcullis {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 10px 16px 24px;
}
.gate {
  width: min(260px, 72vw);
  height: 168px;
  border-radius: var(--radius) var(--radius) 4px 4px;
  border: 2px solid var(--gold);
  border-bottom-width: 6px;
  /* bars: vertical repeating gradient + horizontal crossbars */
  background:
    repeating-linear-gradient(0deg, rgba(201,162,39,.30) 0 3px, transparent 3px 34px),
    repeating-linear-gradient(90deg, #0d1730 0 14px, #060c1c 14px 30px);
  position: relative;
  overflow: hidden;
}
.gate::before {
  /* studded crossbars */
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(201,162,39,.28) 0 3px, transparent 3px 60px);
  background-position: 6px 0;
}
.gate::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
}
.portcullis__title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.portcullis__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--text2);
  max-width: 34ch;
  line-height: 1.5;
}
.btn-primary {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--bg);
  background: var(--gold);
  border: 1.5px solid var(--gold-hi);
  border-radius: var(--radius);
  padding: 13px 26px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background var(--dur) var(--ease), transform 120ms var(--ease);
}
.btn-primary:hover { background: var(--gold-hi); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
.btn-ghost {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: 1.5px solid var(--bg3);
  border-radius: var(--radius);
  padding: 12px 22px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-ghost:hover { border-color: var(--gold); background: var(--bg2); }
.btn-ghost:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }

/* ---------- Seal stamp (commit payoff) ---------- */
.seal-stamp {
  position: fixed;
  z-index: 40;
  width: 132px; height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--wax-hi), var(--wax) 60%, #661212 100%);
  border: 3px solid rgba(255,220,170,.35);
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0;
}
.seal-stamp::before {
  content: "\2691";
  font-size: 58px;
  color: rgba(255,228,188,.72);
  line-height: 1;
}
.seal-stamp.is-tie {
  background: radial-gradient(circle at 40% 36%, #35435f, #1a2540 62%, #10192e 100%);
  border-color: rgba(201,162,39,.4);
}
.seal-stamp.is-tie::before { content: "\2696"; color: rgba(232,199,102,.8); } /* scales */

/* verdict caption flash — full-width + centered text so JS translateY
   animation can't clobber a translateX centering offset. The caption sits
   on a navy chip so the gold text keeps its contrast over the winner's
   parchment snapshot (First/Second), not just over navy (ties). */
.verdict-flash {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 41;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.verdict-flash__chip {
  display: inline-block;
  max-width: 90vw;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--gold-hi);
  background: rgba(11,19,43,.92);     /* navy plaque — gold-on-navy holds ~9:1 */
  border: 1px solid rgba(201,162,39,.5);
  border-radius: var(--radius);
  padding: 7px 18px;
  white-space: nowrap;
}

/* gold particles on deck completion */
.particle {
  position: fixed;
  z-index: 39;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  pointer-events: none;
  opacity: 0;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  z-index: 50;
  background: var(--bg3);
  border: 1px solid var(--gold);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  padding: 11px 18px;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  max-width: 90vw;
  text-align: center;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Reduced motion: instant swaps + short fades, no springs ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 150ms !important;
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}