:root { color-scheme: dark; --bg: #0c1019; --panel: #131925; --line: #ffffff13; --text: #f6f3ec; --muted: #9ba3b2; --gold: #e8be70; --gold-dark: #302311; font-family: Arial, Helvetica, sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 26px; }
body { margin: 0px; background: var(--bg); color: var(--text); line-height: 1.5; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: 0.6; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
input:focus-visible { outline: rgb(152, 166, 187) solid 1px; outline-offset: 1px; }
[hidden] { display: none !important; }
.wrap { width: min(1160px, 100% - 72px); margin-inline: auto; }
.header { height: 108px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand img { display: block; object-fit: contain; width: 142px; height: 66px; }
.text-link:hover, .inline-button:hover { color: var(--gold); }
.button { min-height: 48px; padding: 13px 23px; border-radius: 9px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 28px; font-weight: 700; font-size: 14px; transition: transform 0.18s, background 0.18s; }
.button:hover { transform: translateY(-2px); }
.button-gold { background: linear-gradient(110deg, rgb(240, 207, 138), rgb(220, 169, 87)); color: rgb(33, 25, 14); box-shadow: rgba(212, 166, 83, 0.075) 0px 6px 24px; }
.button-outline { border-color: rgba(255, 255, 255, 0.157); background: transparent; }
.button-outline:hover { background: rgba(255, 255, 255, 0.03); }
.hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; min-height: 590px; padding-top: 40px; padding-bottom: 55px; }
.eyebrow { font-size: 10px; letter-spacing: 2.5px; font-weight: 700; color: var(--gold); margin: 0px 0px 23px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 100%; background: var(--gold); margin: 0px 9px 1px 0px; }
h1, h2, h3, p { margin-top: 0px; }
h1 { font-size: clamp(44px, 4.5vw, 66px); font-weight: 600; letter-spacing: -3px; line-height: 1.09; margin-bottom: 26px; }
em { color: var(--gold); font-style: normal; }
h1 em { display: block; }
.hero-description { color: var(--muted); font-size: 16px; line-height: 1.85; }
.hero-actions { display: flex; gap: 26px; align-items: center; margin-top: 29px; }
.text-link { font-size: 13px; display: inline-flex; gap: 14px; }
.hero-note { font-size: 11px; color: rgb(116, 126, 143); margin: 20px 0px 0px; }
.hero-art { position: relative; height: 420px; isolation: isolate; background: radial-gradient(rgba(187, 135, 57, 0.13), transparent 65%); }
.art-label { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); font-size: 9px; letter-spacing: 3px; color: rgb(123, 119, 109); white-space: nowrap; }
.platform-section { padding: 54px 0px 80px; border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 30px; }
.section-heading .eyebrow { margin-bottom: 11px; }
h2 { font-weight: 500; font-size: 36px; line-height: 1.2; letter-spacing: -1.4px; margin-bottom: 0px; }
.section-heading > p { font-size: 12px; line-height: 1.8; color: var(--muted); margin-bottom: 1px; }
.platform-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.platform-card { position: relative; min-width: 0px; min-height: 170px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(155deg, rgb(23, 30, 43), rgb(17, 23, 34)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 19px 9px 17px; gap: 12px; transition: transform 0.18s, border-color 0.18s; }
.platform-card:hover { transform: translateY(-4px); border-color: rgba(232, 190, 112, 0.376); }
.platform-card img { width: 86px; height: 86px; object-fit: contain; filter: drop-shadow(rgba(0, 0, 0, 0.333) 0px 7px 7px); }
.platform-card > span:first-of-type { font-size: 12px; font-weight: 600; }
.card-arrow { position: absolute; top: 10px; right: 12px; color: rgb(104, 115, 134); font-size: 13px; }
.rewards-section { display: grid; grid-template-columns: 0.95fr 1.3fr; gap: 70px; padding: 65px 0px 75px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rewards-intro h2 { font-size: 38px; line-height: 1.23; margin-bottom: 21px; }
.rewards-intro > p:not(.eyebrow) { color: var(--muted); font-size: 13px; max-width: 290px; line-height: 1.8; }
.rewards-intro .free-note { margin: 25px 0px 29px; color: rgb(211, 189, 145) !important; }
.free-note span { margin-right: 6px; }
.reward-list article { display: flex; gap: 17px; align-items: center; border-bottom: 1px solid var(--line); padding: 23px 0px; }
.reward-list article:first-child { padding-top: 3px; }
.step { color: rgb(128, 108, 70); font-size: 11px; align-self: start; padding-top: 4px; }
.reward-list h3 { font-size: 14px; font-weight: 600; line-height: 1.5; margin-bottom: 5px; }
.reward-list article p { font-size: 11px; color: var(--muted); line-height: 1.7; margin-bottom: 0px; }
.reward-tag { color: var(--gold); background: rgba(232, 190, 112, 0.043); border: 1px solid rgba(232, 190, 112, 0.15); border-radius: 6px; padding: 5px 9px; white-space: nowrap; font-size: 11px; font-weight: 600; margin-left: auto; flex-shrink: 0; }
.reward-disclaimer { font-size: 10px; line-height: 1.8; color: rgb(126, 135, 152); margin: 18px 0px 0px; }
.closing { text-align: center; padding: 78px 0px 73px; }
.closing h2 { font-size: 38px; margin: 19px 0px 26px; }
.closing > p { margin: 18px 0px 0px; color: var(--muted); font-size: 12px; }
.inline-button { border: 0px; background: none; padding: 0px; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 20px; padding: 31px 0px; }
.footer strong { font-size: 12px; letter-spacing: 2px; }
.footer p { font-size: 10px; color: rgb(126, 135, 152); line-height: 1.9; margin: 6px 0px 0px; }
.footer-links { display: flex; gap: 24px; font-size: 11px; color: rgb(165, 170, 180); }
.footer-fine { width: 100%; }
dialog { color: var(--text); background: rgb(20, 27, 40); border: 1px solid rgba(255, 255, 255, 0.145); border-radius: 18px; padding: 35px; width: min(440px, 100% - 28px); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: rgba(0, 0, 0, 0.6) 0px 30px 110px; }
dialog::backdrop { background: rgba(4, 7, 13, 0.85); backdrop-filter: blur(7px); }
dialog h2 { font-size: 30px; margin-bottom: 12px; }
dialog .eyebrow { margin-bottom: 13px; }
.dialog-close { position: absolute; right: 15px; top: 12px; background: transparent; border: 0px; font-size: 26px; color: var(--muted); width: 34px; height: 34px; }
.auth-intro { font-size: 12px; color: var(--muted); }
.auth-tabs { display: flex; border-bottom: 1px solid var(--line); margin: 25px 0px 22px; }
.auth-tabs button { width: 50%; border-width: 0px 0px 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; background: transparent; padding: 11px 0px; font-size: 12px; color: var(--muted); }
.auth-tabs button[aria-pressed="true"] { border-bottom-color: var(--gold); color: var(--gold); }
form > label { display: block; font-size: 12px; margin: 14px 0px; color: rgb(201, 205, 214); }
input:not([type="checkbox"]) { display: block; width: 100%; border: 1px solid rgba(255, 255, 255, 0.145); border-radius: 7px; padding: 11px 12px; background: rgb(13, 19, 30); color: var(--text); margin-top: 6px; min-width: 0px; }
input[type="checkbox"] { accent-color: var(--gold); margin: 3px 0px 0px; flex-shrink: 0; width: 15px; height: 15px; }
.check { display: flex; align-items: start; gap: 9px; font-size: 11px; line-height: 1.7; }
.password-control { position: relative; display: block; }
.password-control input { padding-right: 58px; }
.password-control > button { position: absolute; right: 10px; top: 10px; background: transparent; border: 0px; font-size: 11px; color: var(--gold); min-height: 25px; }
.auth-submit { width: 100%; margin-top: 8px; }
#auth-message { font-size: 12px; line-height: 1.7; color: var(--gold); margin: 17px 0px; }
#auth-message[data-error="true"] { color: rgb(241, 168, 160); }
#forgot-password { font-size: 11px; color: var(--muted); }
.auth-footnote { border-top: 1px solid var(--line); padding-top: 17px; font-size: 10px; line-height: 1.7; color: rgb(126, 135, 152); margin: 24px 0px 0px; }
#verification-actions { display: grid; gap: 17px; font-size: 11px; }
#policy-copy { font-size: 12px; line-height: 1.9; color: rgb(182, 190, 203); }
#policy-copy p { margin: 16px 0px; }
#policy-copy a { color: var(--gold); text-decoration: underline; }
.skip-link { position: fixed; top: -80px; left: 15px; padding: 10px; background: var(--gold); color: rgb(17, 17, 17); z-index: 10; }
.skip-link:focus { top: 10px; }
.noscript { padding: 20px; text-align: center; color: var(--gold); }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 1000px) {
.wrap { width: calc(100% - 48px); }
.hero { gap: 18px; min-height: 530px; }
h1 { font-size: 49px; }
.hero-art { height: 350px; }
.hero-actions { gap: 18px; flex-wrap: wrap; }
.platform-grid { grid-template-columns: repeat(4, 1fr); }
.rewards-section { gap: 35px; }
.rewards-intro h2 { font-size: 33px; }
}
@media (max-width: 650px) {
.wrap { width: calc(100% - 36px); }
.header { height: 83px; }
.brand img { width: 112px; height: 55px; }
.header-login { font-size: 11px; padding: 9px 12px; min-height: 37px; gap: 10px; }
.hero { grid-template-columns: 1fr; padding: 45px 0px 29px; gap: 15px; min-height: 0px; }
.hero-copy { text-align: center; }
.hero .eyebrow { font-size: 9px; letter-spacing: 2px; margin-bottom: 21px; }
h1 { font-size: clamp(41px, 9vw, 56px); letter-spacing: -2px; margin-bottom: 20px; }
.hero-description { font-size: 13px; line-height: 1.8; }
.hero-actions { justify-content: center; gap: 22px; margin-top: 25px; }
.hero-actions .button { font-size: 12px; padding: 12px 17px; gap: 18px; }
.text-link { font-size: 11px; gap: 8px; }
.hero-note { font-size: 10px; margin-top: 17px; }
.hero-art { height: 290px; width: min(360px, 100%); margin: auto; }
.art-label { top: 20px; font-size: 8px; }
.platform-section { padding: 32px 0px 40px; }
.section-heading { align-items: start; gap: 15px; margin-bottom: 23px; }
.section-heading h2 { font-size: 27px; }
.section-heading > p { font-size: 10px; max-width: 126px; margin-top: 26px; }
.eyebrow { font-size: 9px; letter-spacing: 1.7px; }
.platform-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
.platform-card { min-height: 137px; padding: 17px 5px 12px; gap: 10px; }
.platform-card img { width: 67px; height: 67px; }
.platform-card > span:first-of-type { font-size: 10px; }
.card-arrow { top: 7px; right: 8px; font-size: 11px; }
.rewards-section { grid-template-columns: 1fr; gap: 33px; padding: 40px 0px; }
.rewards-intro h2 { font-size: 34px; }
.rewards-intro > p:not(.eyebrow) { max-width: 100%; }
.rewards-intro .free-note { margin: 17px 0px 20px; }
.reward-list article { gap: 11px; padding: 20px 0px; }
.reward-list h3 { font-size: 12px; }
.reward-list article p { font-size: 10px; }
.reward-tag { font-size: 10px; padding: 4px 7px; }
.closing { padding: 46px 0px; }
.closing h2 { font-size: 29px; }
.footer { padding: 25px 0px; gap: 19px; }
.footer-links { gap: 18px; font-size: 10px; }
dialog { padding: 29px 23px; }
.auth-tabs { margin-top: 20px; }
}
@media (max-width: 360px) {
.brand img { width: 91px; }
.header-login { padding: 8px 10px; }
.hero-actions { gap: 15px; }
.section-heading > p { max-width: 105px; }
.section-heading h2 { font-size: 25px; }
.reward-list h3 { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, ::before, ::after { transition: none !important; }
}
.hero-art { overflow: clip; }
.game-carousel { height: 450px; overflow: hidden; }
.carousel-stage { position: absolute; inset: 45px 0px 78px; perspective: 900px; }
.hero-game { position: absolute; left: 50%; top: 50%; width: 220px; height: 285px; margin: -142px 0px 0px -110px; border: 1px solid rgba(232, 190, 112, 0.333); border-radius: 23px; background: radial-gradient(at 50% 25%, rgba(232, 190, 112, 0.157), transparent 75%), linear-gradient(145deg, rgb(36, 41, 54), rgb(16, 22, 33)); box-shadow: rgba(0, 0, 0, 0.4) 0px 25px 55px; padding: 21px; display: flex; flex-direction: column; align-items: center; transition: transform 0.65s, opacity 0.65s; transform: translateX(0px); z-index: 3; }
.hero-game img { width: 170px; height: 180px; object-fit: contain; filter: drop-shadow(rgba(0, 0, 0, 0.467) 0px 12px 15px); margin: 15px 0px 8px; }
.game-kicker { font-size: 8px; letter-spacing: 1.7px; color: var(--gold); white-space: nowrap; }
.game-name { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 16px; font-weight: 600; }
.game-name > span { color: var(--gold); }
.hero-game[data-position="previous"] { transform: translateX(-155px) rotateY(18deg) rotate(-8deg) scale(0.76); opacity: 0.6; z-index: 1; }
.hero-game[data-position="next"] { transform: translateX(155px) rotateY(-18deg) rotate(8deg) scale(0.76); opacity: 0.6; z-index: 1; }
.hero-note { max-width: 390px; line-height: 1.8; }
.hero h1 em { font-size: 1.1em; }
.hero-copy { position: relative; z-index: 2; }
@media (max-width: 600px) {
.game-carousel { height: 365px; }
.carousel-stage { inset: 28px 0px 70px; }
.hero-game { width: 180px; height: 235px; margin: -117px 0px 0px -90px; padding: 16px; }
.hero-game img { width: 140px; height: 145px; margin: 12px 0px 7px; }
.hero-game[data-position="previous"] { transform: translateX(-115px) rotate(-9deg) scale(0.72); }
.hero-game[data-position="next"] { transform: translateX(115px) rotate(9deg) scale(0.72); }
.game-name { font-size: 14px; }
.game-kicker { font-size: 7px; letter-spacing: 1px; }
.hero-note { max-width: 100%; }
}
.more-games-card { border-color: rgba(232, 190, 112, 0.4); background: radial-gradient(at 50% 20%, rgba(232, 190, 112, 0.133), transparent 75%), linear-gradient(145deg, rgb(37, 37, 31), rgb(23, 27, 37)); gap: 8px; }
.more-games-icon { display: grid; place-items: center; width: 70px; height: 70px; font-size: 48px; color: var(--gold); }
.more-games-card > span:nth-child(2) { font-size: 16px; font-weight: 700; color: var(--gold); }
.more-games-card small { font-size: 10px; color: var(--muted); }
.freeplay-link { text-decoration-line: underline; text-decoration-thickness: 3px; text-underline-offset: 9px; text-decoration-color: rgba(232, 190, 112, 0.5); }
.freeplay-link:hover { text-decoration-color: var(--gold); }
.google-auth { margin-top: 22px; }
.google-button { width: 100%; background: rgb(255, 255, 255); color: rgb(36, 36, 36); border: 1px solid rgb(218, 220, 224); gap: 12px; }
.google-mark { font-size: 22px; font-weight: 700; color: rgb(66, 133, 244); }
.google-button:hover { background: rgb(243, 245, 248); }
.google-note { font-size: 11px; color: var(--muted); line-height: 1.6; margin: 10px 0px 0px; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; margin: 20px 0px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: var(--line); flex: 1 1 0%; }
.google-auth { margin-top: 8px; }
.google-button { background: rgb(23, 30, 43); color: var(--text); border-color: rgba(255, 255, 255, 0.16); min-height: 46px; box-shadow: none; }
.google-button:hover { background: rgb(32, 41, 56); border-color: rgba(232, 190, 112, 0.44); }
.google-mark { display: grid; place-items: center; width: 24px; height: 24px; background: rgb(255, 255, 255); border-radius: 50%; font-family: Arial, sans-serif; font-size: 17px; }
.google-note { text-align: center; font-size: 10px; }
.auth-divider { margin: 17px 0px; }
body { font-weight: 500; }
h1 { font-weight: 700; }
h2 { font-weight: 650; }
.header-login { font-size: 14px; }
.hero-description { font-size: 17px; }
.hero-note { font-size: 13px; color: rgb(155, 163, 178); }
.button { font-size: 15px; }
.platform-card > span:first-of-type { font-size: 14px; font-weight: 650; }
.section-heading > p, .rewards-intro > p:not(.eyebrow) { font-size: 14px; }
.reward-list h3 { font-size: 16px; font-weight: 650; }
.reward-list article p { font-size: 13px; }
.step, .reward-tag, .reward-disclaimer { font-size: 12px; }
.reward-disclaimer { color: rgb(155, 163, 178); }
.closing > p { font-size: 14px; }
.footer p { font-size: 12px; color: rgb(155, 163, 178); }
.footer strong { font-size: 13px; }
.footer-links { font-size: 13px; }
dialog h2 { font-size: 32px; font-weight: 650; }
.auth-intro { font-size: 14px; }
.auth-tabs button { font-size: 14px; font-weight: 600; }
form > label { font-size: 14px; font-weight: 600; }
input:not([type="checkbox"]) { font-size: 16px; font-weight: 500; }
.check { font-size: 13px; font-weight: 500; line-height: 1.65; }
.password-control > button { font-size: 12px; font-weight: 600; }
#auth-message, #reset-message { font-size: 14px; font-weight: 500; }
#forgot-password, #verification-actions { font-size: 13px; }
.auth-footnote { font-size: 12px; line-height: 1.65; color: rgb(155, 163, 178); margin-top: 20px; }
#policy-copy { font-size: 14px; line-height: 1.8; }
.google-note, .auth-divider, .more-games-card small { font-size: 12px; }
.game-kicker { font-size: 9px; }
@media (max-width: 650px) {
.header-login { font-size: 13px; }
.hero-description { font-size: 15px; }
.hero-note { font-size: 12px; }
.hero-actions .button { font-size: 14px; }
.text-link { font-size: 12px; }
.section-heading > p { font-size: 12px; }
.platform-card > span:first-of-type { font-size: 12px; }
.rewards-intro > p:not(.eyebrow) { font-size: 14px; }
.reward-list h3 { font-size: 14px; }
.reward-list article p { font-size: 12px; }
.reward-tag { font-size: 12px; }
.footer p { font-size: 12px; }
.footer-links { font-size: 12px; }
}
.header-login { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 650px) {
.header { flex-wrap: wrap; height: auto; min-height: 83px; padding-block: 14px; gap: 10px; }
.header .brand { margin-right: auto; }
}
dialog { scrollbar-width: thin; scrollbar-color: rgb(89, 101, 121) transparent; overscroll-behavior: contain; }
@supports selector(::-webkit-scrollbar) {
dialog { scrollbar-width: auto; scrollbar-color: auto; }
}
dialog::-webkit-scrollbar { width: 6px; height: 6px; }
dialog::-webkit-scrollbar-track, dialog::-webkit-scrollbar-corner { background: transparent; }
dialog::-webkit-scrollbar-thumb { background: rgb(89, 101, 121); border-radius: 999px; }
dialog::-webkit-scrollbar-thumb:hover { background: rgb(133, 146, 168); }
dialog::-webkit-scrollbar-button { display: none; width: 0px; height: 0px; }
.freeplay-banner { width: 100%; max-width: 1240px; margin: 0px auto; padding: 22px 24px 0px; }
.freeplay-banner-link { display: block; width: 100%; padding: 0px; border: 1px solid rgba(235, 184, 70, 0.24); border-radius: 22px; overflow: hidden; background: rgb(8, 6, 4); box-shadow: rgba(0, 0, 0, 0.4) 0px 28px 80px; line-height: 0; }
.freeplay-banner-link img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: contain; }
.freeplay-banner-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
@media (max-width: 620px) {
.freeplay-banner { padding: 12px 12px 0px; }
.freeplay-banner-link { border-radius: 13px; }
}
.platform-grid { grid-auto-rows: 1fr; }
.platform-card.more-games-card { gap: 12px; }
.platform-card.more-games-card > .more-games-icon { width: 86px; height: 86px; flex-shrink: 0; font-size: 36px; }
.platform-card.more-games-card > span:nth-child(2) { font-size: 14px; }
.more-games-card small { position: absolute; bottom: 3px; font-size: 10px; line-height: 1.2; }
@media (max-width: 650px) {
.platform-card.more-games-card { gap: 10px; }
.platform-card.more-games-card > .more-games-icon { width: 67px; height: 67px; font-size: 30px; }
.platform-card.more-games-card > span:nth-child(2) { font-size: 12px; }
.more-games-card small { font-size: 9px; }
}
@media (max-width: 600px) {
.game-carousel { height: 390px; }
}
dialog.landing-offer { width: min(430px, 100% - 32px); padding: 38px 30px 24px; text-align: center; border: 1px solid rgba(232, 190, 112, 0.3); background: radial-gradient(at 50% 0px, rgba(184, 134, 36, 0.16), transparent 65%), rgb(17, 23, 34); border-radius: 22px; }
.landing-offer .eyebrow { margin: 0px 20px 18px; font-size: 11px; letter-spacing: 2px; }
.landing-offer-symbol { display: flex; justify-content: center; align-items: baseline; gap: 8px; color: rgb(243, 204, 118); font-size: 76px; font-weight: 750; line-height: 1.2; margin: 6px 0px 18px; text-shadow: rgba(232, 190, 112, 0.145) 0px 4px 24px; }
.landing-offer-symbol small { font-size: 24px; }
.landing-offer h2 { font-size: 29px; line-height: 1.15; letter-spacing: -0.8px; margin: 0px 0px 18px; }
.landing-offer-copy { font-size: 15px; line-height: 1.7; color: rgb(195, 200, 208); margin: 0px 0px 24px; }
.landing-offer-action { width: 100%; gap: 12px; min-height: 50px; }
.landing-offer-note { font-size: 12px; line-height: 1.6; color: rgb(164, 172, 184); margin: 17px 0px 0px; }
.landing-offer-age { border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 14px; margin: 16px 0px 0px; font-size: 11px; line-height: 1.5; color: rgb(147, 157, 170); }
.landing-offer .dialog-close { width: 40px; height: 40px; top: 8px; right: 8px; }
@media (max-width: 380px) {
dialog.landing-offer { padding: 35px 22px 20px; }
.landing-offer h2 { font-size: 26px; }
.landing-offer-copy { font-size: 14px; }
}
.landing-offer-symbol svg { display: block; width: 94px; height: 94px; align-self: center; }
.landing-offer .dialog-close { border-radius: 50%; }
.landing-offer-symbol img { display: block; width: 120px; height: 120px; object-fit: contain; margin: auto; }
.landing-offer .dialog-close:focus-visible { outline: none; }
html.landing-keyboard-focus .landing-offer .dialog-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.landing-messenger { position: fixed; z-index: 40; right: max(22px,env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.282); border-radius: 50%; background: linear-gradient(135deg, rgb(8, 124, 255), rgb(150, 51, 237)); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 26px; transition: transform 0.18s, box-shadow 0.18s; }
.landing-messenger svg { width: 30px; height: 30px; }
.landing-messenger:hover { transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.533) 0px 12px 30px; }
.landing-messenger-badge { position: absolute; right: -3px; top: -4px; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0px 5px; border: 2px solid rgb(12, 16, 25); border-radius: 20px; background: rgb(239, 59, 76); color: white; font-size: 12px; font-weight: 700; line-height: 1; }
@media (max-width: 650px) {
.landing-messenger { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 54px; height: 54px; }
}
.header .header-login { background: linear-gradient(110deg, rgb(240, 207, 138), rgb(220, 169, 87)); color: rgb(33, 25, 14); border-color: rgb(237, 197, 120); box-shadow: rgba(212, 166, 83, 0.094) 0px 6px 20px; }
.header .header-login:hover { background: linear-gradient(110deg, rgb(246, 217, 156), rgb(229, 182, 99)); border-color: rgb(244, 212, 148); }

/* Carousel navigation: single source for the final design. */
.game-carousel .carousel-stage{bottom:110px}
.carousel-controls{position:absolute;bottom:46px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:16px}
.carousel-controls button{position:relative;width:36px;height:36px;min-width:36px;padding:0;display:grid;place-items:center;border:1px solid #ffffff24;border-radius:50%;background:#ffffff05;color:#e8be70;font-size:0;box-shadow:none;transition:background .18s,border-color .18s,transform .18s}
.carousel-controls button:hover{background:#e8be7012;border-color:#e8be7070;transform:none}.carousel-controls button:active{transform:scale(.95)}
.carousel-controls button::before{content:'';display:block;position:absolute;left:50%;top:50%;width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;margin:0}
.carousel-controls [data-carousel-prev]::before{transform:translate(-35%,-50%) rotate(-135deg)}.carousel-controls [data-carousel-next]::before{transform:translate(-65%,-50%) rotate(45deg)}
.carousel-controls [data-carousel-pause]::before{width:9px;height:12px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor;transform:translate(-50%,-50%)}
.carousel-controls [aria-label='Play carousel']::before{width:0;height:0;border:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor;transform:translate(-40%,-50%)}
.carousel-count{min-width:46px;text-align:center;font-size:11px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:1px;color:#b7b9c0}
.carousel-footnote{position:absolute;bottom:5px;width:100%;text-align:center;margin:0;line-height:1.5;font-size:9px;letter-spacing:1px;color:#8f939e}
@media(max-width:600px){.game-carousel{height:390px}.carousel-controls{bottom:43px}.carousel-footnote{bottom:9px;font-size:8px;letter-spacing:.7px}}
@media(prefers-reduced-motion:reduce){.carousel-controls button{transition:none}}