@font-face { font-family: Vazirmatn; font-weight: 400; font-display: swap; src: url(/assets/fonts/Vazirmatn-Regular.woff2) format('woff2'); }
@font-face { font-family: Vazirmatn; font-weight: 700; font-display: swap; src: url(/assets/fonts/Vazirmatn-Bold.woff2) format('woff2'); }
* { box-sizing: border-box; }
html { min-height: 100%; color: #3B2415; background: #F4ECD8 url(/assets/pattern.svg) repeat; }
body { margin: 0; font-family: Vazirmatn, Tahoma, sans-serif; font-size: 17px; line-height: 1.8; }
.page { max-width: 640px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom)); }
.hero { text-align: center; padding: 24px 0 8px; }
.hero.small { padding-top: 12px; }
.icon { border-radius: 22%; border: 3px solid #3B2415; }
h1 { font-size: 32px; margin: 12px 0 4px; color: #1E4D8C; }
.hero.small h1 { font-size: 24px; }
h2 { font-size: 20px; margin: 0 0 8px; color: #1E4D8C; }
.tagline { margin: 0 0 8px; font-weight: 700; color: #C1552C; }
.card { background: #F4ECD8; border: 3px solid #3B2415; border-radius: 16px; padding: 16px; margin: 16px 0; }
.features { padding-inline-start: 20px; margin: 8px 0 16px; }
.features li::marker { color: #E8A33D; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 20px; border-radius: 16px; border: 3px solid #3B2415; font-weight: 700; text-decoration: none; }
.button.primary { background: #C1552C; color: #F4ECD8; flex: 1 1 100%; font-size: 20px; }
.button.secondary { background: #1E4D8C; color: #F4ECD8; flex: 1 1 40%; }
.button.disabled { background: #F4ECD8; color: #3B2415; opacity: 0.6; flex: 1 1 40%; cursor: not-allowed; flex-direction: column; line-height: 1.4; }
.button.disabled small { font-size: 14px; font-weight: 400; }
.note { font-size: 15px; margin: 8px 0 0; }
.legal p { margin: 0 0 12px; overflow-wrap: anywhere; }
.game-card { display: flex; gap: 16px; align-items: flex-start; }
.game-card h2 { margin-top: 0; }
a { color: #1E4D8C; }
.footer { text-align: center; margin: 24px 0 0; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
a:focus-visible, .button:focus-visible { outline: 3px solid #E8A33D; outline-offset: 2px; }