/* Original variable fonts, served locally. Licenses: /assets/fonts/*-OFL.txt. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./assets/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./assets/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("./assets/fonts/outfit-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("./assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-display: "Outfit", "DM Sans", sans-serif;
}
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.012em;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button,
input,
select,
textarea {
  font-family: var(--font-body);
}
h1,
h2,
h3,
.page-title,
.hero h1,
.welcome h1,
.game-info h2,
.result-box h2,
dialog h2,
.lunar-intro h1,
.lunar-summary strong,
.lunar-history h2,
.lunar-card strong,
.floating-ticket strong {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero h1 {
  font-size: clamp(48px, 5.8vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  max-width: 490px;
}
.hero h1 em,
.welcome h1 em {
  font-weight: 600;
}
.welcome h1 {
  font-size: clamp(42px, 4.9vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.05em;
}
.page-title {
  font-size: clamp(34px, 3.8vw, 44px);
  line-height: 1.12;
  margin-bottom: 16px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.055em;
  color: var(--cream);
  font-size: 34px;
}
.eyebrow,
.lunar-intro .eyebrow,
.lunar-card .eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: none;
  line-height: 1.5;
}
.pill {
  font-size: 11px;
  letter-spacing: 0.015em;
  font-weight: 500;
  text-transform: none;
}
.hero-copy > p {
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.014em;
  max-width: 395px;
}
.welcome p {
  font-size: 18px;
  line-height: 1.65;
}
.welcome .fine {
  font-size: 13px;
  line-height: 1.7;
}
.primary {
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 15px;
}
.secondary {
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 14px;
}
.quiet {
  font-weight: 500;
}
.section-label h2,
.more-games h2,
.panel h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
}
.section-label h2,
.more-games h2 {
  font-size: 20px;
}
.panel h2 {
  font-size: 23px;
}
.quick-link strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.quick-link small {
  font-size: 12px;
  line-height: 1.5;
}
.person strong {
  font-weight: 600;
  font-size: 15px;
}
.person small {
  font-size: 12px;
}
.credit {
  font-size: 12px;
}
.credit strong {
  font-size: 17px;
  font-weight: 600;
}
.floating-ticket strong {
  font-size: 23px;
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.floating-ticket > small {
  font-size: 9px;
  letter-spacing: 0.035em;
  font-weight: 600;
}
.opportunities {
  font-size: 13px;
}
.small {
  font-size: 14px;
  line-height: 1.6;
}
.journey .journey-title {
  font-size: 14px;
  line-height: 1.5;
}
.journey li {
  font-size: 14px;
  font-weight: 500;
}
.journey li small {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.game-info h2,
.result-box h2 {
  font-size: 28px;
  line-height: 1.2;
}
.game-info p {
  font-size: 15px;
  line-height: 1.7;
}
.card-title strong {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.card-title small {
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.scratch-cell small {
  font-size: 12px;
  font-weight: 500;
}
.scratch-card .card-foot {
  font-size: 12px;
}
.steps li {
  font-size: 12px;
  font-weight: 500;
}
.ticket .number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 29px;
  letter-spacing: 0.035em;
}
.ticket dl {
  font-size: 13px;
  line-height: 1.6;
}
.ticket .eyebrow {
  font-size: 11px;
  letter-spacing: 0.025em;
}
.balance-grid strong,
.result-box .prize,
.amount,
.credit strong,
.lunar-balance strong {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.025em;
}
.balance-grid strong {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
}
.list-row strong {
  font-size: 15px;
  font-weight: 600;
}
.list-row small {
  font-size: 12px;
  line-height: 1.65;
}
.list-row .amount {
  white-space: nowrap;
  font-weight: 600;
}
label {
  font-size: 14px;
  font-weight: 500;
}
input,
select {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}
.notice {
  font-size: 14px;
  line-height: 1.7;
}
dialog h2 {
  font-size: 30px;
  line-height: 1.15;
}
dialog p,
dialog li {
  font-size: 15px;
  line-height: 1.75;
}
.rules-table {
  font-size: 14px;
  line-height: 1.55;
}
.rules-table th {
  font-weight: 600;
}
.rules-table td,
.rules-table th {
  padding: 11px 8px;
}
.rules-table td {
  font-variant-numeric: tabular-nums;
}
.footer,
.footer button {
  font-size: 12px;
  line-height: 1.6;
}
.audit,
.audit p {
  font-size: 12px;
  line-height: 1.7;
}
.audit code {
  font-size: 11px;
}
.lunar-intro h1 {
  font-size: clamp(38px, 4.5vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.lunar-intro p {
  font-size: 14px;
  line-height: 1.6;
}
.lunar-card strong {
  font-size: 26px;
  line-height: 1.15;
}
.lunar-card small {
  font-size: 13px;
}
.lunar-card .eyebrow {
  font-size: 11px;
}
.lunar-summary strong {
  font-size: 25px;
  line-height: 1.2;
}
.lunar-summary p {
  font-size: 13px;
  line-height: 1.6;
}
.lunar-history h2 {
  font-size: 27px;
}
.lunar-history .list-row strong {
  font-size: 14px;
}
.lunar-history .list-row small {
  font-size: 12px;
}
.lunar-balance {
  font-size: 12px;
}
.lunar-balance strong {
  font-size: 16px;
  font-weight: 600;
}
.lunar-top .pill {
  font-size: 11px;
}
.lunar-top .quiet,
.lunar-top .back {
  font-size: 13px;
}
.lunar-stake {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.lunar-stake strong {
  font-size: 18px;
  font-weight: 600;
}
.lunar-secondary .quiet,
.lunar-secondary label {
  font-size: 13px;
}
.lunar-footnote,
.lunar-navigation-note {
  font-size: 12px;
  line-height: 1.65;
}
.lunar-symbol-edit-row label {
  font-size: 12px;
}
.lunar-symbol-edit-row .check {
  font-size: 13px;
}
@media (max-width: 650px) {
  body {
    font-size: 15px;
    line-height: 1.6;
  }
  .brand {
    font-size: 29px;
  }
  .hero h1 {
    font-size: clamp(40px, 10.8vw, 49px);
    line-height: 1.05;
    letter-spacing: -0.055em;
    margin-top: 9px;
  }
  .hero-copy > p {
    font-size: 15px;
    line-height: 1.65;
    max-width: 330px;
  }
  .hero-copy .eyebrow {
    font-size: 11px;
  }
  .welcome h1 {
    font-size: 44px;
  }
  .welcome p {
    font-size: 17px;
  }
  .welcome .fine {
    font-size: 13px;
  }
  .page-title {
    font-size: 35px;
  }
  .eyebrow {
    font-size: 12px;
  }
  .topline {
    font-size: 12px;
    align-items: flex-start;
    gap: 12px;
  }
  .topline .quiet {
    font-size: 12px;
    white-space: nowrap;
  }
  .credit {
    font-size: 10px;
  }
  .credit strong {
    font-size: 14px;
  }
  .pill {
    font-size: 10px;
  }
  .opportunities {
    font-size: 12px;
  }
  .hero-copy .small {
    font-size: 12px;
  }
  .floating-ticket strong {
    font-size: 18px;
    line-height: 1.1;
  }
  .floating-ticket > small {
    font-size: 8px;
  }
  .section-label h2,
  .more-games h2 {
    font-size: 19px;
  }
  .section-label > span {
    font-size: 12px;
  }
  .quick-link strong {
    font-size: 14px;
  }
  .quick-link small {
    font-size: 11px;
  }
  .quick-link {
    gap: 10px;
    padding: 17px 12px;
  }
  .quick-icon {
    width: 30px;
    height: 36px;
    flex-shrink: 0;
  }
  .journey .journey-title {
    font-size: 14px;
  }
  .journey li {
    font-size: 12px;
  }
  .journey li small {
    font-size: 11px;
    max-width: 90px;
    margin-left: 0;
    margin-top: 6px;
  }
  .journey ol {
    gap: 12px;
  }
  .bottom-nav button {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
  }
  .footer,
  .footer button {
    font-size: 11px;
  }
  .small {
    font-size: 13px;
  }
  .game-info h2,
  .result-box h2 {
    font-size: 25px;
  }
  .game-info p {
    font-size: 14px;
  }
  .steps li {
    font-size: 11px;
  }
  .scratch-cell small {
    font-size: 11px;
  }
  .scratch-card .card-foot {
    font-size: 11px;
  }
  .card-title strong {
    font-size: 24px;
  }
  .card-title small {
    font-size: 9px;
  }
  .panel h2 {
    font-size: 22px;
  }
  .list-row strong {
    font-size: 14px;
  }
  .list-row small {
    font-size: 12px;
  }
  .ticket .number {
    font-size: 25px;
  }
  .ticket dl {
    font-size: 12px;
  }
  .balance-grid strong {
    font-size: 26px;
  }
  .notice {
    font-size: 13px;
  }
  .rules-table {
    font-size: 12px;
  }
  dialog p,
  dialog li {
    font-size: 14px;
  }
  dialog h2 {
    font-size: 27px;
  }
  .lunar-intro h1 {
    font-size: 39px;
  }
  .lunar-intro .eyebrow {
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  .lunar-intro p {
    font-size: 12px;
    line-height: 1.65;
    max-width: 260px;
    margin: 10px auto;
  }
  .lunar-top .pill {
    font-size: 10px;
    letter-spacing: 0;
  }
  .lunar-top .quiet,
  .lunar-top .back {
    font-size: 12px;
  }
  .lunar-balance {
    font-size: 11px;
  }
  .lunar-balance strong {
    font-size: 14px;
  }
  .lunar-summary strong {
    font-size: 22px;
    line-height: 1.2;
  }
  .lunar-summary p {
    font-size: 12px;
    line-height: 1.6;
  }
  .lunar-stake {
    font-size: 11px;
  }
  .lunar-stake strong {
    font-size: 16px;
  }
  .lunar-footnote {
    font-size: 11px;
  }
  .lunar-navigation-note {
    font-size: 12px;
  }
  .lunar-secondary .quiet,
  .lunar-secondary label {
    font-size: 12px;
  }
  .lunar-card strong {
    font-size: 25px;
  }
  .lunar-card small {
    font-size: 12px;
  }
  .lunar-card .eyebrow {
    font-size: 10px;
  }
  .lunar-history .list-row small {
    font-size: 11px;
  }
  .lunar-symbol-edit-row .check {
    font-size: 12px;
  }
}
@media (max-width: 360px) {
  .hero h1 {
    font-size: 39px;
  }
  .quick-link strong {
    font-size: 12px;
  }
  .quick-link small {
    font-size: 10px;
  }
  .lunar-top .pill {
    font-size: 9px;
  }
  .lunar-top .quiet,
  .lunar-top .back {
    font-size: 11px;
  }
  .lunar-intro h1 {
    font-size: 35px;
  }
  .lunar-playrow {
    gap: 8px;
  }
  .lunar-stake strong {
    font-size: 14px;
  }
}