/* The web host's one stylesheet (docs/decisions/sharing-and-inviting.md, item 4), in the app's look: the midnight
   palette of client/Assets/Client/UI/Resources/DiceRollUI/Theme.uss (deep navy grounds, warm gold, the tiers'
   colours), the felt's green from the dice tray, and Cinzel (the app's own display font, its licence beside it in
   /assets/fonts) for headings. Body text is the phone's own sans, as in the app. Text pairs are WCAG AA: --text and
   --text-2 on every ground, --text-3 for captions on --card and darker, --gold-ink on --gold. Motion is CSS only and
   stops under prefers-reduced-motion. No inline styles: the pages' policy is style-src 'self'. */

@font-face {
  font-family: "Cinzel";
  src: url("/assets/fonts/cinzel.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --cover: #040710;
  --field: #060b15;
  --page: #091121;
  --sheet: #0e1727;
  --card: #131c2c;
  --surface: #1d2638;
  --pressed: #293345;
  --line: #2a3649;
  --hair: #242b39;
  --text: #eef0f4;
  --text-2: #c1c4c9;
  --text-3: #9c9fa3;
  --pop: #fee8c4;
  --gold: #edb755;
  --gold-hi: #f6cf7d;
  --gold-pressed: #d29e39;
  --gold-ink: #261800;
  --points: #fee0ae;
  --felt: #082310;
  --felt-hi: #0f3b1c;
  --good: #81d584;
  --danger: #ff7f73;
  --t-common: #e9ebef;
  --t-uncommon: #61cc69;
  --t-rare: #4a9cf1;
  --t-epic: #d59bff;
  --t-legendary: #ffa65f;
  --display: "Cinzel", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--field);
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--field);
  color: var(--text);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0; }
a { color: var(--gold-hi); }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

@media (min-width: 720px) { :root { --gutter: 28px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; } }

/* Type */

.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--pop);
  text-wrap: balance;
}

h1.display { font-size: clamp(40px, 7vw, 74px); }
h2.display { font-size: clamp(32px, 4.6vw, 52px); }
h3.display { font-size: clamp(24px, 2.6vw, 30px); }

.gold-text {
  background: linear-gradient(180deg, #ffe7b0 0%, var(--gold) 58%, #c88d2c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.7;
}

.lead {
  margin-top: 18px;
  max-width: 36em;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.button--gold, .store {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, #e2a645 100%);
  color: var(--gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 30px -12px rgba(237, 183, 85, 0.65);
}
.button--gold:hover { transform: translateY(-1px); }
.button--gold:active { background: var(--gold-pressed); transform: none; }

.button--line {
  border-color: rgba(237, 183, 85, 0.5);
  background: rgba(237, 183, 85, 0.07);
  color: var(--gold-hi);
}
.button--line:hover { background: rgba(237, 183, 85, 0.13); }
.button--line:active { background: rgba(237, 183, 85, 0.2); }

.button--small { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
.button--wide { width: 100%; }

/* The store buttons: Apple's and Google's own badges (assets/badges, the founder's go 2026-10-07), as the stores give
   them, at one height, Google's with its clear space trimmed. The pages' scripts put the phone's own store first. */

.stores {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.store {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 0 24px 0 20px;
  border: 1px solid transparent;
  border-radius: 16px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.store:hover { transform: translateY(-1px); }
.store:active { transform: none; }

.stores .store ~ .store {
  border-color: rgba(237, 183, 85, 0.5);
  background: rgba(237, 183, 85, 0.07);
  color: var(--gold-hi);
  box-shadow: none;
}
.stores .store ~ .store:hover { background: rgba(237, 183, 85, 0.13); }

.store__icon { flex: none; width: 26px; height: 26px; }
.store__text { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.store__small { font-size: 13px; font-weight: 600; opacity: 0.85; }
.store__name { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }

@media (min-width: 480px) {
  .stores { flex-direction: row; flex-wrap: wrap; }
  .store { flex: 0 1 auto; }
}

/* Header and footer */

.top {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid rgba(42, 54, 73, 0.55);
  background: rgba(6, 11, 21, 0.78);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}

.top__in {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  color: var(--pop);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.brand__icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 14px rgba(0, 0, 0, 0.45);
}

.top__nav { display: none; }
.top__nav a {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.top__nav a:hover { color: var(--text); }
.top__cta { flex: none; margin-left: auto; white-space: nowrap; }
@media (max-width: 389px) {
  .top__in { gap: 12px; }
  .top .brand { font-size: 16px; }
}

@media (min-width: 960px) {
  .top__nav { display: flex; gap: 28px; margin-left: auto; }
  .top__cta { margin-left: 8px; }
  .brand { font-size: 20px; }
}

.foot {
  border-top: 1px solid var(--hair);
  background: var(--cover);
  padding: 40px 0 calc(40px + env(safe-area-inset-bottom));
}

.foot__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}

.foot__nav { display: flex; flex-wrap: wrap; gap: 0 28px; }
.foot__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.foot__nav a:hover { color: var(--text); }
.foot__note { width: 100%; color: var(--text-3); font-size: 14px; }

/* Motion */

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-12px) rotate(calc(var(--r, 0deg) + 5deg)); }
}

@keyframes sweep {
  0% { transform: translateX(-130%) skewX(-12deg); }
  45%, 100% { transform: translateX(230%) skewX(-12deg); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(129, 213, 132, 0.45); }
  60% { box-shadow: 0 0 0 7px rgba(129, 213, 132, 0); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Pieces rise into place as they scroll in, where the browser ties animations to scrolling; elsewhere they simply
   stand. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section__head, .step, .sample, .book-art, .ladder-copy, .prize, .prize-sheet, .wall .look, .set, .friends-art,
    .checks li, .faq details, .reason {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The pieces the pages share: a phone, a die on its own, a card from the app with a glint passing over it. */

.phone {
  position: relative;
  margin: 0;
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(150deg, #353d4f 0%, #12161f 45%, #2a3140 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 50px 90px -30px rgba(0, 0, 0, 0.85),
    0 20px 40px -20px rgba(0, 0, 0, 0.6);
}
.phone img { width: 100%; border-radius: 38px; background: var(--page); }
.phone::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #05070b;
  box-shadow: inset 0 0 0 2px #1a1f2a, 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.phone::before {
  content: "";
  position: absolute;
  top: 22%;
  right: -3px;
  width: 3px;
  height: 64px;
  border-radius: 0 3px 3px 0;
  background: #2b3241;
}

.die {
  position: absolute;
  filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.6));
  animation: bob 8s ease-in-out infinite;
}

.glint {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
}
.glint img { width: 100%; }
.glint::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transform: translateX(-130%) skewX(-12deg);
  animation: sweep 6s ease-in-out 1.5s infinite;
  pointer-events: none;
}

.glow--common { box-shadow: 0 0 0 1px rgba(233, 235, 239, 0.28), 0 24px 60px -18px rgba(254, 232, 196, 0.35), 0 30px 60px -20px rgba(0, 0, 0, 0.8); }
.glow--uncommon { box-shadow: 0 0 0 1px rgba(97, 204, 105, 0.45), 0 24px 60px -18px rgba(97, 204, 105, 0.45), 0 30px 60px -20px rgba(0, 0, 0, 0.8); }
.glow--rare { box-shadow: 0 0 0 1px rgba(74, 156, 241, 0.55), 0 24px 60px -16px rgba(74, 156, 241, 0.55), 0 30px 60px -20px rgba(0, 0, 0, 0.8); }
.glow--gold { box-shadow: 0 0 0 1px rgba(237, 183, 85, 0.55), 0 24px 60px -16px rgba(237, 183, 85, 0.4), 0 30px 60px -20px rgba(0, 0, 0, 0.8); }

/* Home: the hero */

.hero {
  position: relative;
  overflow: clip;
  padding: 36px 0 64px;
  background:
    radial-gradient(58% 46% at 74% 52%, rgba(15, 59, 28, 0.62), transparent 72%),
    radial-gradient(30% 30% at 72% 48%, rgba(237, 183, 85, 0.1), transparent 70%),
    radial-gradient(55% 45% at 8% 0%, rgba(38, 52, 92, 0.42), transparent 70%);
}

.hero__in { display: grid; gap: 44px; }
.hero__copy { text-align: center; animation: rise 0.7s ease-out both; }
.hero__copy .lead { margin-inline: auto; }
.hero__copy .stores { align-items: stretch; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 7px 15px 7px 12px;
  border: 1px solid rgba(237, 183, 85, 0.3);
  border-radius: 999px;
  background: rgba(237, 183, 85, 0.08);
  color: var(--points);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pill__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  animation: pulse 2.4s ease-out infinite;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-3);
  font-size: 15px;
  font-weight: 600;
}
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.hero h1.display { font-size: clamp(40px, 4.9vw, 62px); }

/* The hero's art: a phone with the day's roll, a bonus card as it pops up, and dice around them. The art is a
   container, so the card's words keep their size to it. */
.hero__art, .invite-art {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  aspect-ratio: 470 / 600;
  container-type: inline-size;
}

.hero__art .phone, .invite-art .phone {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: 54%;
  transform: translateX(-50%);
}

.hero__art .die--a, .invite-art .die--a { top: 4%; right: -4%; z-index: 1; width: 36%; --r: 8deg; }
.hero__art .die--b, .invite-art .die--b { right: 0; bottom: 3%; z-index: 5; width: 26%; --r: -10deg; animation-delay: -3s; animation-duration: 9s; }
.hero__art .die--c { bottom: 14%; left: 1%; z-index: 1; width: 21%; --r: -14deg; animation-delay: -5s; animation-duration: 10s; }

/* A bonus as the app reveals it (client TurnScreen's reveal card), drawn here so it stays sharp at every size. As in
   the app, it sits just below the tracker, over the Re-roll button and the tray's empty upper felt: clear of the six
   dice and of the result's panel at the foot of the screen (the phone's picture: tracker to row 252 of 1396, the
   highest die from row 775, the nearest die to the card's right edge from x 376 of 645). */
.reveal-card {
  --tc: var(--t-rare);
  position: absolute;
  /* The phone's picture starts 9 px down and is 54% of the art less 18 px wide: its row 264 is 22% of the art's
     width plus 2 px down, whatever the art's height. */
  top: calc(22cqw + 2px);
  left: -3%;
  z-index: 4;
  width: 53%;
  margin: 0;
  padding: 3.6cqw 3cqw 4cqw;
  overflow: hidden;
  border: 2px solid var(--tc);
  border-radius: 16px;
  background: linear-gradient(180deg, #13203a, #0d1729);
  box-shadow: 0 0 0 4px rgba(74, 156, 241, 0.16), 0 0 34px rgba(74, 156, 241, 0.55), 0 30px 60px -18px rgba(0, 0, 0, 0.85);
  text-align: center;
  animation: rise 0.8s 0.3s ease-out both;
}
@media (max-width: 479px) { .reveal-card { left: 0; } }
/* Below 380 px the words keep their smallest sizes while the phone keeps shrinking: a little less padding. */
@media (max-width: 379px) { .reveal-card { padding-block: 3cqw 3.4cqw; } }
.reveal-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: translateX(-130%) skewX(-12deg);
  animation: sweep 6s ease-in-out 2s infinite;
  pointer-events: none;
}
.reveal-card__tier { color: var(--tc); font-size: clamp(11px, 2.7cqw, 13px); font-weight: 800; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; }
.reveal-card__name { margin-top: 0.15em; color: var(--text); font-size: clamp(19px, 6.4cqw, 30px); font-weight: 700; line-height: 1.15; }
.reveal-card__pts { color: var(--points); font-size: clamp(17px, 5.6cqw, 26px); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.reveal-card__rule { margin-top: 0.2em; color: var(--text-2); font-size: clamp(12px, 3.2cqw, 15px); line-height: 1.3; }
.reveal-card__dice { display: flex; justify-content: center; gap: 1.6cqw; margin-top: 2.2cqw; }
.reveal-card__dice span {
  padding: 0.25em 0.6em;
  border-radius: 7px;
  background: var(--tc);
  color: #06111f;
  font-size: clamp(11px, 3cqw, 14px);
  font-weight: 800;
}

@media (min-width: 960px) {
  .hero { padding: 56px 0 96px; }
  .hero__in { grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: 40px; }
  .hero__copy { text-align: left; }
  .hero__copy .lead { margin-inline: 0; }
  .facts { justify-content: flex-start; }
  .hero__art { max-width: 500px; margin-right: 0; }
}

/* On a phone the art starts on the first screen: less above the words, less between them and the art, and the two
   stores side by side where both fit. */
@media (max-width: 959px) {
  .hero { padding-top: 20px; }
  .hero__in { gap: 20px; }
  /* "One roll a day." on one line down to 360 px. */
  .hero h1.display { font-size: clamp(34px, 10.6vw, 40px); }
}
@media (min-width: 360px) and (max-width: 479px) {
  .hero__copy .stores { flex-direction: row; gap: 10px; }
  .hero__copy .store { flex: 1 1 0; justify-content: center; min-width: 0; gap: 10px; padding: 0 12px; }
  .hero__copy .store__name { font-size: 18px; white-space: nowrap; }
}
@media (min-width: 360px) and (max-width: 389px) {
  .hero__copy .store { gap: 8px; padding: 0 10px; }
  .hero__copy .store__icon { width: 22px; height: 22px; }
  .hero__copy .store__name { font-size: 17px; }
}

/* Home: the numbers */

.band {
  border-block: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(14, 23, 39, 0.75), rgba(9, 17, 33, 0.75));
}
.band__in {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 auto;
  list-style: none;
}
.stat { padding: 22px 8px; text-align: center; }
.stat__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--gold-hi);
}
.stat__label { display: block; margin-top: 4px; color: var(--text-3); font-size: 14px; font-weight: 600; }

@media (min-width: 860px) {
  .band__in { grid-template-columns: repeat(4, 1fr); }
  .stat + .stat { border-left: 1px solid var(--hair); }
  .stat { padding: 30px 12px; }
}

/* Home: sections */

.section { position: relative; padding: 80px 0; }
.section--tint { background: linear-gradient(180deg, rgba(9, 17, 33, 0) 0%, rgba(9, 17, 33, 0.9) 18%, rgba(9, 17, 33, 0.9) 82%, rgba(9, 17, 33, 0) 100%); }
.section__head { max-width: 760px; margin-bottom: 44px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lead { margin-inline: auto; }

@media (min-width: 960px) {
  .section { padding: 120px 0; }
  .section__head { margin-bottom: 56px; }
}

.split { display: grid; gap: 44px; align-items: center; }
/* A grid item's automatic minimum would let a wide child (the ladder's rows) widen its column past the page. */
.split > * { min-width: 0; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; gap: 72px; }
  .split--rev > :first-child { order: 2; }
}

/* How a day works */

.how { display: grid; gap: 28px; }
@media (min-width: 960px) {
  .how { grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: start; }
}

.steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 20px 18px 18px;
  border: 1px solid var(--hair);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(19, 28, 44, 0.95), rgba(14, 23, 39, 0.95));
}
.step h3 { margin: 3px 0 4px; font-size: 19px; line-height: 1.3; color: var(--text); }
.step p { color: var(--text-2); font-size: 16px; }

.step__n {
  display: grid;
  place-items: center;
  width: 52px;
  height: 58px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #d79a39);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: var(--gold-ink);
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
}

.sample {
  position: relative;
  padding: 22px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(15, 59, 28, 0.5), transparent 62%),
    linear-gradient(180deg, #0f1929, #0a1221);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
@media (min-width: 720px) { .sample { padding: 28px 28px 24px; } }

.sample__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.sample__head h3 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--pop); }
.sample__date { color: var(--text-3); font-size: 14px; font-weight: 600; }

.tracker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.tracker li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.tracker span { color: var(--text-3); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }
.tracker b {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.tracker .is-20 {
  border-color: rgba(237, 183, 85, 0.65);
  background: linear-gradient(180deg, rgba(237, 183, 85, 0.2), rgba(237, 183, 85, 0.04));
  box-shadow: 0 0 22px -6px rgba(237, 183, 85, 0.55);
}
.tracker .is-20 span { color: var(--gold); }
.tracker .is-20 b { color: var(--gold-hi); }
@media (min-width: 720px) { .tracker { gap: 8px; } }

.bonuses { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.bonus {
  --tc: var(--t-common);
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name pts" "rule pts";
  column-gap: 12px;
  align-items: center;
  padding: 11px 14px 11px 18px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--card);
}
.bonus::before {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tc);
}
.bonus__name { grid-area: name; color: var(--tc); font-size: 17px; font-weight: 700; line-height: 1.3; }
.bonus__rule { grid-area: rule; color: var(--text-3); font-size: 14px; line-height: 1.35; }
.bonus__pts { grid-area: pts; color: var(--points); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bonus--uncommon { --tc: var(--t-uncommon); }
.bonus--rare {
  --tc: var(--t-rare);
  border-color: rgba(74, 156, 241, 0.35);
  background: linear-gradient(90deg, rgba(74, 156, 241, 0.13), rgba(74, 156, 241, 0) 65%), var(--card);
}

.sample__more { margin-top: 12px; color: var(--text-3); font-size: 14px; font-weight: 600; text-align: center; }

.sample__total {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  text-align: center;
}
.sample__pts {
  display: block;
  font-family: var(--display);
  font-size: clamp(34px, 4.4vw, 46px);
  font-weight: 600;
  line-height: 1.05;
  color: var(--pop);
}
.sample__tier { display: block; margin-top: 6px; color: var(--t-rare); font-size: 15px; font-weight: 800; }

/* The bonus book */

.reveals {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84%, 340px);
  gap: 16px;
  /* Room below the cards inside the scroller, which clips: their glow fades out before its edge. */
  margin: 0 calc(-1 * var(--gutter)) 34px;
  padding: 10px var(--gutter) 72px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}
.reveals::-webkit-scrollbar { display: none; }
.reveals li { scroll-snap-align: center; }
.reveals .glint { border-radius: 20px; }
.reveals figcaption { margin-top: 14px; color: var(--text-3); font-size: 14px; font-weight: 600; text-align: center; }

@media (min-width: 860px) {
  .reveals {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    margin: 0 0 72px;
    padding: 10px 0 34px;
    overflow: visible;
  }
}

.book-art { position: relative; width: 78%; max-width: 340px; margin: 0 auto; }
@media (min-width: 960px) { .book-art { width: 100%; } }

.ladder {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, #101a2b, #0b1322);
  overflow: hidden;
}
.ladder__head, .rung {
  display: grid;
  grid-template-columns: 1fr 84px minmax(112px, auto);
  align-items: center;
  gap: 8px;
  padding: 0 18px;
}
.ladder__head {
  min-height: 46px;
  border-bottom: 1px solid var(--hair);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ladder__head span:not(:first-child), .rung > span:not(:first-child) { text-align: right; }
.ladder ol { margin: 0; padding: 0; list-style: none; }
.rung { --tc: var(--t-common); min-height: 58px; border-bottom: 1px solid var(--hair); }
.rung__tier { display: flex; align-items: center; gap: 12px; color: var(--tc); font-size: 17px; font-weight: 800; }
.rung__tier::before {
  content: "";
  flex: none;
  width: 16px;
  height: 18px;
  background: var(--tc);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  filter: drop-shadow(0 0 6px var(--tc));
}
.rung__count { color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.rung__odds { color: var(--text); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rung--uncommon { --tc: var(--t-uncommon); }
.rung--rare { --tc: var(--t-rare); }
.rung--epic { --tc: var(--t-epic); }
.rung--legendary { --tc: var(--t-legendary); }
.rung--perfect {
  --tc: var(--gold-hi);
  grid-template-columns: 1fr auto;
  min-height: 72px;
  border-bottom: 0;
  background: linear-gradient(90deg, rgba(237, 183, 85, 0.16), rgba(237, 183, 85, 0.02));
}
.rung--perfect .rung__count { display: none; }
.rung--perfect .rung__odds { color: var(--gold-hi); font-family: var(--display); font-size: 19px; font-weight: 600; }
.ladder__note { padding: 14px 18px 16px; border-top: 1px solid var(--hair); color: var(--text-3); font-size: 14px; }

@media (max-width: 440px) {
  .ladder__head, .rung { grid-template-columns: 1fr 64px minmax(96px, auto); gap: 10px; padding: 0 14px; }
  .ladder__head { font-size: 11px; letter-spacing: 0.06em; }
  .rung--perfect { grid-template-columns: 1fr auto; }
  .rung__tier { gap: 9px; font-size: 16px; }
  .rung--perfect .rung__odds { font-size: 17px; }
}

.ladder-copy h3, .prizes-block h3.display { margin-bottom: 12px; font-size: clamp(28px, 3.4vw, 40px); }
.ladder-copy p { color: var(--text-2); }
.ladder-copy .ladder { margin-top: 28px; }

/* Rare rolls' prizes */

.prizes-block { margin-top: 96px; }
@media (min-width: 960px) { .prizes-block { margin-top: 128px; } }

.prizes { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }

.prize {
  --tc: var(--t-epic);
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 18px 16px 12px;
  border: 1px solid rgba(213, 155, 255, 0.35);
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(213, 155, 255, 0.12), rgba(213, 155, 255, 0) 70%), var(--card);
}
.prize img { width: 76px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.55)); }
.prize h4 { margin: 0 0 3px; color: var(--tc); font-size: 18px; font-weight: 800; }
.prize p { color: var(--text-2); font-size: 15px; line-height: 1.45; }
.prize--legendary {
  --tc: var(--t-legendary);
  border-color: rgba(255, 166, 95, 0.38);
  background: linear-gradient(90deg, rgba(255, 166, 95, 0.13), rgba(255, 166, 95, 0) 70%), var(--card);
}
.prize--perfect {
  --tc: var(--gold-hi);
  border-color: rgba(237, 183, 85, 0.55);
  background: linear-gradient(90deg, rgba(237, 183, 85, 0.17), rgba(237, 183, 85, 0) 70%), var(--card);
}

.prize-sheet { width: 100%; max-width: 420px; margin: 0 auto; border-radius: 26px; }

/* Looks */

.wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) { .wall { grid-template-columns: repeat(4, 1fr); gap: 24px 16px; } }
@media (min-width: 1024px) { .wall { grid-template-columns: repeat(6, 1fr); } }

.look img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 18px 34px -18px rgba(0, 0, 0, 0.9);
  transition: transform 0.3s ease;
}
.look:hover img { transform: translateY(-4px) rotate(-1.5deg); }
.look__name { display: block; margin-top: 10px; color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.3; }
.look__about { display: none; color: var(--text-3); font-size: 13px; line-height: 1.35; }
@media (min-width: 720px) { .look__about { display: block; margin-top: 2px; } }

.tables { display: grid; gap: 44px; margin-top: 64px; }
.tables > * { min-width: 0; }
@media (min-width: 960px) { .tables { grid-template-columns: 3fr 2fr; gap: 40px; } }
.tables h3, .sets h3 { margin: 0 0 18px; font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--pop); }
.wall--3 { grid-template-columns: repeat(3, 1fr); }
.wall--2 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) {
  .wall--3 { grid-template-columns: repeat(3, 1fr); }
  .wall--2 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 960px) { .wall--2 { grid-template-columns: repeat(2, 1fr); } }

/* On a phone each wall is a row to swipe, as the reveals are, rather than every tile at once. */
@media (max-width: 719px) {
  .wall, .wall--3, .wall--2 {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 38%;
    gap: 12px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .wall::-webkit-scrollbar { display: none; }
  .wall .look { scroll-snap-align: start; animation: none; }
  .tables { margin-top: 48px; gap: 36px; }
}

.sets {
  display: grid;
  gap: 24px;
  margin-top: 72px;
  padding: 24px 16px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(80% 70% at 0% 0%, rgba(237, 183, 85, 0.1), transparent 60%),
    linear-gradient(180deg, #0f1828, #0a1221);
}
.sets p { color: var(--text-2); }
.sets__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; margin: 0; padding: 0; list-style: none; }
.set img { width: 100%; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 20px 40px -20px rgba(0, 0, 0, 0.9); }
.set__name { display: block; margin-top: 8px; color: var(--pop); font-family: var(--display); font-size: 14px; font-weight: 600; line-height: 1.25; }
@media (min-width: 720px) {
  .sets { padding: 36px; }
  .sets__grid { gap: 24px 16px; }
  .set img { border-radius: 18px; }
  .set__name { margin-top: 10px; font-size: 17px; }
}
@media (min-width: 1024px) {
  .sets { grid-template-columns: 0.8fr 2fr; align-items: center; gap: 40px; padding: 44px; }
}

.counts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.counts li {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
}
.counts b { color: var(--gold-hi); }

/* Friends */

.friends-art { position: relative; width: 100%; max-width: 440px; margin: 0 auto; padding-bottom: 8%; }
.friends-art .phone { width: 72%; }
.friends-art .share {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 58%;
  transform: rotate(4deg);
}

.checks { display: grid; gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 40px; color: var(--text-2); }
.checks li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(237, 183, 85, 0.45);
  border-radius: 50%;
  background: rgba(237, 183, 85, 0.12);
}
.checks li::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--gold-hi);
  border-bottom: 2px solid var(--gold-hi);
  transform: rotate(45deg);
}
.checks b { color: var(--text); }

.names { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.name {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-size: 16px;
  font-weight: 800;
}
.name--rainbow span {
  background: linear-gradient(90deg, #ff7a7a, #ffd36b, #7ee08a, #6fb1ff, #d59bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.name--arcane { color: #c9b6ff; font-family: var(--display); font-weight: 600; letter-spacing: 0.04em; }
.name--ember { color: #ff8a66; }
.name--gold { color: var(--gold-hi); }

/* FAQ */

.faq { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.faq details {
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: var(--card);
  transition: border-color 0.2s ease;
}
.faq details[open] { border-color: var(--line); background: linear-gradient(180deg, #172133, var(--card)); }
.faq summary {
  position: relative;
  padding: 19px 56px 19px 22px;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  border-radius: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq details p { padding: 0 22px 20px; color: var(--text-2); }
.faq details p + p { margin-top: -8px; }

/* The last call to get the app */

.cta {
  position: relative;
  overflow: clip;
  padding: 88px 0 100px;
  border-top: 1px solid var(--hair);
  background:
    radial-gradient(55% 75% at 50% 100%, rgba(15, 59, 28, 0.7), transparent 72%),
    radial-gradient(35% 45% at 50% 100%, rgba(237, 183, 85, 0.14), transparent 70%);
  text-align: center;
}
.cta .lead { margin-inline: auto; font-variant-numeric: tabular-nums; }
.cta .stores { justify-content: center; max-width: 520px; margin-inline: auto; }
.cta__dice { display: flex; justify-content: center; margin-bottom: 30px; }
.cta__dice img {
  width: clamp(64px, 17vw, 112px);
  margin: 0 -8px;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.6));
  animation: bob 8s ease-in-out infinite;
}
.cta__dice img:nth-child(1) { --r: -14deg; animation-delay: -1s; }
.cta__dice img:nth-child(2) { --r: 8deg; animation-delay: -4s; margin-top: 18px; }
.cta__dice img:nth-child(3) { --r: -4deg; animation-delay: -2s; }
.cta__dice img:nth-child(4) { --r: 12deg; animation-delay: -6s; margin-top: 18px; }
.cta__dice img:nth-child(5) { --r: -9deg; animation-delay: -3s; }

/* The invite page */

.invite-hero {
  position: relative;
  overflow: clip;
  padding: 32px 0 56px;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(237, 183, 85, 0.12), transparent 70%),
    radial-gradient(60% 50% at 80% 70%, rgba(15, 59, 28, 0.55), transparent 72%);
}
.invite-hero__in { display: grid; gap: 48px; }
.invite-hero__copy { width: 100%; max-width: 540px; margin: 0 auto; text-align: center; animation: rise 0.6s ease-out both; }
.invite-hero h1 { font-size: clamp(32px, 5vw, 54px); }
.invite-hero .lead { margin-inline: auto; }

.code-card {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  padding: 22px 18px 18px;
  border: 1px solid rgba(237, 183, 85, 0.5);
  border-radius: 24px;
  background:
    radial-gradient(110% 90% at 50% 0%, rgba(237, 183, 85, 0.16), transparent 62%),
    var(--sheet);
  box-shadow: 0 0 0 5px rgba(237, 183, 85, 0.06), 0 34px 70px -34px rgba(0, 0, 0, 0.95);
  text-align: center;
}
.code-card__label { color: var(--text-3); font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.code-card__code {
  padding-left: 0.14em;
  color: var(--pop);
  font-family: var(--mono);
  font-size: clamp(34px, 10.5vw, 54px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.14em;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}
.code-card .button { width: 100%; }
.copy::before {
  content: "";
  flex: none;
  width: 14px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 4px;
  box-shadow: 4px -4px 0 -2px var(--sheet), 4px -4px 0 0 currentColor;
}

.invite-hero__copy #open { margin-top: 28px; }
.invite-hero__copy #open:not([hidden]) + .code-card { margin-top: 16px; }
.invite-hero__copy .stores { margin-top: 16px; }
.note { margin-top: 18px; color: var(--text-3); font-size: 15px; text-wrap: pretty; }
.error {
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 127, 115, 0.4);
  border-radius: 14px;
  background: rgba(255, 127, 115, 0.08);
  color: var(--danger);
  font-weight: 600;
}

.invite-art { max-width: 400px; }

@media (min-width: 960px) {
  .invite-hero { padding: 64px 0 88px; }
  .invite-hero__in { grid-template-columns: 1fr 0.9fr; align-items: center; gap: 64px; }
  .invite-hero__copy { margin: 0; text-align: left; }
  .invite-hero .lead { margin-inline: 0; }
  .invite-art { max-width: 460px; margin-right: 0; }
}

/* Where the page can open the app (Android), Open leads and the stores step back. */
#open:not([hidden]) ~ .stores .store {
  border-color: rgba(237, 183, 85, 0.5);
  background: rgba(237, 183, 85, 0.07);
  color: var(--gold-hi);
  box-shadow: none;
}

.reasons { display: grid; gap: 12px; margin: 0 auto; padding-block: 8px 80px; list-style: none; }
@media (min-width: 720px) { .reasons { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.reason {
  padding: 22px 22px 24px;
  border: 1px solid var(--hair);
  border-radius: 22px;
  background: linear-gradient(180deg, #141e30, #0f1828);
}
.reason h2 { margin: 16px 0 4px; color: var(--text); font-size: 19px; line-height: 1.3; }
.reason p { color: var(--text-2); font-size: 16px; }
.reason__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(237, 183, 85, 0.35);
  border-radius: 15px;
  background: rgba(237, 183, 85, 0.1);
  color: var(--gold-hi);
}
.reason__icon svg { width: 28px; height: 28px; }

/* A page of its own: the 404 and the credits */

.lone {
  position: relative;
  overflow: clip;
  padding: 72px 0 96px;
  background:
    radial-gradient(50% 45% at 50% 30%, rgba(15, 59, 28, 0.6), transparent 72%),
    radial-gradient(30% 30% at 50% 28%, rgba(237, 183, 85, 0.1), transparent 70%);
}
.lone__in { max-width: 680px; text-align: center; }
.lone h1.display { font-size: clamp(38px, 5.4vw, 64px); }
.lone .lead { margin-inline: auto; }
.lone .button { margin-top: 32px; }
.lone__die { width: 168px; height: 168px; margin: 0 auto 32px; animation: bob 8s ease-in-out infinite; --r: -6deg; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.6)); }
.lone__die text { font-family: var(--display); font-weight: 600; }

.credit {
  margin-top: 36px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  text-align: left;
}
.credit h2 { margin: 0 0 8px; color: var(--pop); font-family: var(--display); font-size: 24px; font-weight: 600; }
.credit p { color: var(--text-2); }
.credit p + p { margin-top: 10px; }

/* The stores' own badges, side by side at every width, over the drawn buttons' rules above (the hero's included). */
.stores { flex-direction: row; flex-wrap: wrap; align-items: center; }
.hero__copy .stores { align-items: center; }
.stores .store.store--badge {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  box-shadow: none;
}
.stores .store.store--badge:hover { background: none; }
.store--badge img { display: block; width: auto; height: 48px; }
.store--badge:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }