/* Wager: the end of a match (the big result, its actions, the seal line, the W / L strip) and the result ticket dialog.
   Loaded after styles.css and uses its variables. Owner: SITE. No inline styles anywhere (CSP style-src self). */

/* ---- the result: the word and the number are the largest thing on the screen ---- */
.verdict.rt-result { padding: 22px 12px 14px; margin: 10px 0 12px; }
.rt-result .rt-word { font-size: clamp(30px, 9.4vw, 50px); margin: 0; line-height: 1; text-transform: uppercase; letter-spacing: .06em; }
.rt-result .rt-amt {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 10.5vw, 72px); line-height: 1.04; margin: 8px 0 6px; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--text); text-transform: uppercase;
}
.rt-result.win .rt-amt { color: var(--gold-2); text-shadow: 0 0 30px rgba(244,180,12,.6); }
.rt-result.lose .rt-amt { color: var(--text); }
.rt-result.neutral .rt-amt { color: var(--ice); }
.rt-result .rt-sub { margin: 0; color: var(--text); }

/* ---- the actions, all on one phone screen with the result ---- */
.rt-acts > * + * { margin-top: 10px; }
.rt-main { display: flex; align-items: center; gap: 10px; }
.rt-main > .btn { flex: 1 1 auto; min-height: 56px; font-size: 21px; }
.rt-acts .row > .grow { flex: 1 1 130px; }
.rt-acts .btn { text-align: center; }
.rt-minor .btn { min-height: 38px; }

/* this session results: W / L coins beside Rematch (kept in this browser only) */
.rt-streak { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; flex: 0 1 auto; max-width: 46%; margin: 0; padding: 0; list-style: none; }
.rt-streak li {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 1; background: var(--panel-2); color: var(--mute);
}
.rt-streak li.w { background: radial-gradient(circle at 35% 30%, var(--gold-3), var(--gold) 70%); color: var(--gold-ink); border-color: var(--gold-3); }
.rt-streak li.l { background: var(--panel-3); color: var(--ice-2); border-color: var(--line-soft); }
.rt-streak li.now { box-shadow: 0 0 0 2px #07080a, 0 0 0 3px var(--gold-3); }

/* ---- the seal line: the long "Provably fair" block folds into this ---- */
.rt-seal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin-top: 12px;
  padding: 9px 10px; border: 1px dashed var(--gold); border-radius: 3px; background: rgba(6,7,9,.7);
}
.rt-seal .rt-badge { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: .03em; }
.rt-seal .rt-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--win); flex: none; box-shadow: 0 0 10px var(--win); }
.rt-seal.warn { border-color: var(--lose); }
.rt-seal.warn .rt-badge::before { background: var(--lose); box-shadow: 0 0 10px var(--lose); }
.rt-note { margin: 10px 0 0; }
.rt-challenge { margin-top: 12px; }
.rt-challenge .hash { color: var(--gold-3); }

/* ---- the result ticket dialog ---- */
dialog.rt-dialog { max-width: min(96vw, 680px); padding: 22px 14px 14px; }
dialog.rt-dialog h2 { font-size: 19px; margin-bottom: 8px; }
.rt-body > * + * { margin-top: 10px; }
.rt-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 675; border: 1px solid var(--line); border-radius: 2px; background: var(--bg-2); }
.rt-share > .grow { flex: 1 1 140px; }
.rt-share .btn.primary { font-size: 15px; }
.rt-say { min-height: 1.45em; margin-bottom: 0; font-weight: 700; color: var(--gold-2); }
.rt-say:empty { display: none; } /* nothing said yet: no hole between the buttons and the next line */
.rt-text { white-space: pre-line; overflow-wrap: anywhere; background: #07080a; border: 1px solid var(--line-soft); border-radius: 3px; padding: 8px 10px; }
dialog.rt-dialog > .row { margin-top: 10px; justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
  .verdict.rt-result { animation: none; }
}

/* the two middle actions are the same height even when a long label wraps on a phone */
.rt-acts .row { align-items: stretch; }
.rt-acts .row > .btn.grow { padding-left: 8px; padding-right: 8px; font-size: 15px; }
.rt-main .rt-streak { padding: 2px 3px; }