:root {
  color-scheme: dark;
  --bg: #111017; --panel: #1b1924; --panel-alt: #211e2d; --line: #302b40;
  --text: #f6f4fc; --muted: #aaa4bc; --purple: #a284ff; --lime: #d4fa78; --gold: #ffcd65;
  --radius: 22px; --display: "Unbounded", "Arial Black", sans-serif; --body: "Manrope", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 1rem/1.6 var(--body); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { line-height: 1.3; }
h1,h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.055em; }
h1 { font-size: clamp(1.7rem, 2.7vw, 2.7rem); }
h2 { font-size: clamp(1.3rem, 2.1vw, 1.9rem); }
h3 { font-size: 1.12rem; font-weight: 800; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 24px; z-index: 100; background: var(--lime); color: #182010; padding: 12px; border-radius: 10px; }
.skip-link:focus { top: 10px; }
.sidebar { width: 222px; position: fixed; inset: 0 auto 0 0; z-index: 30; background: #16131e; border-right: 1px solid #282332; padding: 32px 20px 22px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; width: fit-content; font-family: var(--display); font-size: 1.26rem; line-height: 1.05; font-weight: 800; letter-spacing: -.06em; margin: 0 0 42px 6px; }
.brand-rush { display: block; color: var(--lime); }
.brand-mark { display: grid; place-items: center; background: var(--lime); color: #191323; width: 41px; height: 45px; border-radius: 10px; transform: rotate(-9deg); font-size: 1.6rem; box-shadow: 4px 4px 0 #574d78; }
.nav-label { font-size: .75rem; letter-spacing: .1em; color: #8f879f; margin: 0 0 12px 12px; font-weight: 800; }
.navigation { display: grid; gap: 5px; }
.nav-item { border: 0; display: flex; align-items: center; width: 100%; gap: 13px; border-radius: 12px; padding: 12px 14px; color: #b9b2c9; background: transparent; font-size: .875rem; font-weight: 700; text-align: left; }
.nav-item>span:first-child { font-size: 1.4rem; line-height: 1; width: 22px; text-align: center; }
.nav-item:hover { color: white; background: #252031; }
.nav-item.active { background: #35264f; color: #ccafff; }
.nav-count { margin-left: auto; color: #a88fcc; font-size: .75rem; }
.sidebar-account { margin-top: 32px; display: grid; gap: 5px; }
.sidebar-bottom { margin-top: auto; padding: 25px 5px 0; }
.mini-rate { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 21px 0; }
.mini-rate strong { font-size: .75rem; display: block; }
.mini-rate small { display: block; color: var(--muted); font-size: .75rem; }
.sidebar-bottom>a { display: flex; justify-content: space-between; font-size: .875rem; color: var(--muted); }
.sidebar-bottom>p { margin: 25px 0 18px; color: #686174; font: 600 1.15rem/1.5 var(--display); letter-spacing: -.04em; }
.sidebar-version { color: #746b84; font-size: .75rem; }
.app { margin-left: 222px; }
.topbar { height: 83px; border-bottom: 1px solid #272330; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 36px; background: rgba(17,16,23,.95); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(16px); }
.breadcrumb { color: var(--muted); font-size: .875rem; }
.breadcrumb span { margin: 0 14px; color: #5a5269; }
.breadcrumb strong { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: 15px; }
.demo-badge { font-size: .75rem; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.demo-badge i,.status-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; background: var(--gold); border-radius: 50%; }
.wallet-button { display: flex; align-items: center; gap: 9px; border: 1px solid #3a323f; background: #211c26; border-radius: 12px; padding: 9px 13px; font-size: .875rem; }
.wallet-arrow { color: var(--muted); margin-left: 8px; }
.avatar-button { height: 40px; width: 40px; border-radius: 13px; background: #8456bf; border: 2px solid #b38ee9; font-weight: 800; transform: rotate(4deg); }
main { max-width: 1470px; margin: auto; padding: 29px 36px 0; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.eyebrow { display: block; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .13em; line-height: 1.5; }
.page-heading .eyebrow { color: var(--purple); margin-bottom: 8px; }
.accent { color: var(--lime); }
.text-link,.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; background: transparent; padding: 0; font-size: .875rem; font-weight: 700; color: var(--muted); }
.text-link:hover,.text-button:hover { color: var(--lime); }
.intro-grid { display: grid; grid-template-columns: minmax(0,2.1fr) minmax(270px,1fr); gap: 20px; }
.welcome-card { position: relative; min-height: 330px; border-radius: var(--radius); overflow: hidden; isolation: isolate; background: #402780; }
.welcome-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 48%; z-index: -2; }
.welcome-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#2a135dec 0%,#352060d9 35%,#31206735 72%,#31206705); }
.welcome-content { padding: 28px 30px; width: 66%; }
.tag { display: inline-flex; align-items: center; padding: 4px 9px; background: #302b3e; color: #c9c0d9; border-radius: 6px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.tag.light { color: #eee2ff; background: #ffffff19; border: 1px solid #ffffff26; letter-spacing: .07em; }
.welcome-content h2 { margin: 16px 0 12px; font-size: clamp(1.45rem,2.55vw,2.5rem); line-height: 1.18; }
.welcome-content h2>span { color: var(--lime); }
.welcome-content p { color: #ded4f2; font-size: .875rem; line-height: 1.65; max-width: 350px; margin-bottom: 22px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 47px; padding: 12px 20px; border: 1px solid transparent; border-radius: 11px; font-size: .875rem; font-weight: 800; transition: transform .15s, filter .15s, background .15s; }
.button:hover { transform: translateY(-2px); filter: brightness(1.07); }
.button span { font-size: 1.15rem; }
.lime { background: var(--lime); color: #1e2713; box-shadow: 0 3px 0 #91ae50; }
.purple { background: #8b59e8; color: white; box-shadow: 0 3px 0 #56388a; }
.secondary { background: #302b3d; color: var(--text); border-color: #484053; }
.welcome-sticker { position: absolute; bottom: 22px; right: 24px; padding: 10px 14px; background: var(--lime); color: #292132; border: 3px solid #fbffe1; border-radius: 8px; font: 700 .75rem var(--display); transform: rotate(-8deg); box-shadow: 4px 4px 0 #291448; }
.welcome-sticker span { margin-left: 8px; }
.wallet-card { background: radial-gradient(ellipse at 100% 0,#3b2c56,transparent 70%), var(--panel); padding: 23px; border-radius: var(--radius); border: 1px solid #393046; display: flex; flex-direction: column; justify-content: center; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wallet-value { display: flex; align-items: center; gap: 13px; margin-top: 25px; }
.wallet-value>strong { font: 600 clamp(2.1rem,3vw,3.1rem)/1.25 var(--display); letter-spacing: -.05em; }
.coin { width: 33px; height: 33px; border-radius: 50%; border: 3px solid #ffe6a0; display: inline-grid; flex: 0 0 auto; place-items: center; color: #8b5500; background: #ffc850; box-shadow: 2px 3px 0 #986822; font-weight: 800; line-height: 1; font-size: 1rem; }
.coin.small { width: 23px; height: 23px; border-width: 2px; font-size: .75rem; }
.muted { color: var(--muted); font-size: .875rem; }
.wallet-card>p { margin: 6px 0 18px; }
.wallet-conversion { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #3a3248; padding: 14px 0 19px; font-size: .875rem; color: var(--muted); }
.wallet-conversion strong { color: var(--lime); white-space: nowrap; }
.wallet-card .text-button { margin-top: 16px; font-size: .75rem; }
.section { margin-top: 42px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 20px; }
.section-heading .eyebrow { margin-bottom: 7px; }
.section-note { font-size: .875rem; color: var(--muted); }
.game-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.game-card { border-radius: 18px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; transition: border-color .2s, transform .2s; }
.game-card:hover { transform: translateY(-4px); border-color: #7e5fa8; }
.game-art { height: 170px; position: relative; overflow: hidden; background: #392447; }
.game-art>img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; transition: transform .4s; }
.game-card:hover .game-art>img { transform: scale(1.05); }
.game-art::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent,#1511208f); pointer-events: none; }
.game-genre { position: absolute; left: 14px; top: 13px; color: white; padding: 4px 9px; background: #14101dd9; backdrop-filter: blur(8px); border: 1px solid #ffffff30; border-radius: 7px; font-size: .75rem; }
.game-index { position: absolute; right: 12px; bottom: 8px; z-index: 1; color: #ffffffe6; font: 700 2rem var(--display); font-style: italic; }
.game-body { padding: 19px; }
.game-title-row { display: flex; align-items: center; gap: 12px; }
.game-icon { width: 45px; height: 45px; border-radius: 11px; border: 2px solid #ffffff36; }
.game-title-row h3 { font: 600 1.04rem var(--display); letter-spacing: -.04em; }
.game-title-row small { font-size: .75rem; color: var(--muted); }
.game-body>p { margin: 15px 0 18px; color: #bab4c9; font-size: .875rem; min-height: 69px; }
.store-links { display: flex; gap: 8px; }
.store-links button { border: 1px solid #40394d; border-radius: 8px; background: #272330; padding: 9px 10px; flex: 1; font-size: .75rem; font-weight: 700; min-height: 39px; }
.store-links button:hover { border-color: var(--purple); background: #332942; }
.catalog-note { display: flex; align-items: center; gap: 8px; margin-top: 13px; color: var(--muted); font-size: .75rem; }
.panel { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); }
.competition-grid { display: grid; grid-template-columns: minmax(0,2.1fr) minmax(270px,1fr); gap: 20px; }
.leaderboard { overflow: hidden; }
.leaderboard-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 22px; border-bottom: 1px solid var(--line); }
.period-tabs { display: inline-flex; padding: 4px; gap: 3px; border: 1px solid #332d40; border-radius: 10px; background: #131018; }
.period-tabs button { border: 0; background: transparent; padding: 8px 14px; color: #a69db9; border-radius: 6px; font-size: .875rem; font-weight: 800; white-space: nowrap; }
.period-tabs button[aria-selected="true"] { background: #8b5bdd; color: white; box-shadow: 0 2px 6px #0004; }
.period-note { color: var(--gold); font-size: .75rem; }
.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table th { font-size: .75rem; letter-spacing: .05em; color: #968da9; font-weight: 600; text-align: left; padding: 15px 22px; }
.ranking-table td { padding: 12px 22px; border-top: 1px solid #282333; font-size: .875rem; }
.ranking-table th:last-child,.ranking-table td:last-child { text-align: right; }
.ranking-table td:first-child { color: #a79bb8; width: 80px; font-weight: 800; }
.ranking-table tr:first-child td:first-child { color: var(--gold); }
.ranking-player { display: flex; align-items: center; gap: 11px; }
.player-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 33px; height: 33px; border-radius: 10px; background: #524275; color: #e1caff; font-weight: 800; font-size: .875rem; }
.tone-1 { background: #725333; color: #ffdf9d; }.tone-2 { background: #295975; color: #9de5ff; }.tone-3 { background: #773b65; color: #ffc1f3; }
.ranking-table tr.is-player { background: #342447; }
.ranking-table tr.is-player td { color: #d9c1ff; border-color: #4c346a; }
.you-label { margin-left: 7px; color: #b69acf; font-size: .75rem; font-weight: 500; }
.ranking-divider td { padding: 2px 22px; color: #776c87; text-align: center!important; }
.ranking-footnote { display: flex; align-items: baseline; gap: 8px; padding: 15px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.purple-dot { background: var(--purple); }
.chase-card { border-radius: var(--radius); border: 1px solid #674698; background: radial-gradient(ellipse at 110% -10%,#a876f03b,transparent 65%),#31213f; padding: 23px; }
.chase-card .eyebrow { color: #c9acdf; }.chase-icon { color: #bf8cff; font-size: 1.75rem; }
.rank-label { color: #bcabc8; font-size: .875rem; margin: 14px 0 5px; }.rank-label span { margin-left: 4px; }
.rank-number { display: block; font: 600 clamp(2.2rem,3.8vw,3.4rem)/1.2 var(--display); color: #e2c8ff; letter-spacing: -.05em; }
.opponent { display: flex; gap: 10px; align-items: center; border-block: 1px solid #533863; padding: 15px 0; margin-top: 20px; }
.opponent small { display: block; font-size: .75rem; color: #c1adcc; }.opponent b { font-size: .875rem; }.opponent>span:last-child { margin-left: auto; color: #be9fcf; font-size: .875rem; }
.chase-copy { font-size: .875rem; color: #d4c2dc; margin: 18px 0; }.chase-copy strong { color: var(--lime); font-size: 1.15rem; }
.chase-card .button { width: 100%; }.chase-card>small { display: block; font-size: .75rem; text-align: center; margin-top: 12px; color: #bba5c9; }
.draw-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.draw-card { position: relative; padding: 22px; overflow: hidden; background: linear-gradient(135deg,#2e243a,#1e1927); border: 1px solid #4c385f; border-radius: 18px; }
.draw-card:nth-child(2) { background: linear-gradient(135deg,#263131,#192124); border-color: #374b44; }
.draw-card:nth-child(3) { background: linear-gradient(135deg,#3e2a28,#241d24); border-color: #61432f; }
.draw-card .card-top { margin-bottom: 23px; }.draw-period { font-weight: 800; font-size: .875rem; color: #c1a5ef; }.draw-card:nth-child(2) .draw-period { color: #acdbb8; }.draw-card:nth-child(3) .draw-period { color: var(--gold); }
.draw-symbol { font-size: 1.7rem; color: #c298f3; line-height: 1; }.draw-card:nth-child(2) .draw-symbol { color: #a6dca5; }.draw-card:nth-child(3) .draw-symbol { color: var(--gold); }
.draw-card h3 { font: 600 1.15rem var(--display); letter-spacing: -.04em; }
.draw-card p { color: #c0b3ca; font-size: .875rem; margin: 10px 0 18px; }
.draw-meta { padding: 12px 0; border-top: 1px solid #ffffff16; display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: #b7a9c2; }
.draw-card .text-button { margin-top: 10px; color: #e8def2; }
.exchange-layout { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.exchange-explainer { padding: 35px; background: radial-gradient(ellipse at 0 100%,#65793918,transparent 60%); }
.lime-tag { background: #d4fa7814; color: var(--lime); border: 1px solid #d4fa7828; }
.exchange-explainer h3 { font: 600 clamp(1.7rem,3.2vw,2.8rem)/1.25 var(--display); letter-spacing: -.045em; margin: 25px 0 17px; }.exchange-explainer h3>span { color: var(--lime); }
.exchange-explainer>p { color: var(--muted); max-width: 385px; }
.rate-callout { display: flex; align-items: center; gap: 14px; margin: 25px 0; }.rate-callout strong { display: block; font-size: 1.12rem; }.rate-callout small { font-size: .75rem; color: var(--muted); }
.rate-examples { display: grid; gap: 7px; margin-bottom: 20px; }
.rate-examples>div { display: flex; justify-content: space-between; gap: 12px; max-width: 380px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .875rem; color: var(--muted); }.rate-examples b { color: var(--text); }
.fine-print { color: #a59ab5; font-size: .75rem; line-height: 1.65; }
.claim-form { margin: 20px; padding: 25px; border: 1px solid #3e354b; background: #24202e; border-radius: 17px; display: flex; flex-direction: column; }
.form-balance { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .875rem; padding: 18px 0; margin-bottom: 4px; }.form-balance strong { color: var(--gold); }
.claim-form label { display: flex; justify-content: space-between; color: #d7cce3; font-size: .875rem; margin: 9px 0 8px; }.claim-form label>span { color: var(--muted); }
.claim-form input { width: 100%; min-width: 0; background: #16131e; border: 1px solid #4a3d58; border-radius: 10px; color: white; padding: 13px 15px; }
.claim-form input::placeholder { color: #8f839e; }
.amount-field { position: relative; }.amount-field input { font: 600 1.65rem var(--display); padding-right: 88px; }.amount-field>span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--lime); font-weight: 800; pointer-events: none; }
.amount-presets { display: flex; gap: 8px; margin: 9px 0 13px; }.amount-presets button { flex: 1; border: 1px solid #483b57; background: #322a3d; border-radius: 7px; font-size: .75rem; min-height: 34px; padding: 6px; }.amount-presets button[aria-pressed="true"] { background: #514065; border-color: #a284ff; color: #e7d5ff; }
.exchange-quote { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; align-items: center; margin: 21px 0; color: var(--muted); font-size: .875rem; }.exchange-quote strong { color: var(--text); }.exchange-quote small { grid-column: 1/-1; color: #a69ab5; font-size: .75rem; }.exchange-quote.error strong,.exchange-quote.error small { color: #ffb2b7; }
.form-message { color: #e6d0ff; font-size: .875rem; line-height: 1.6; margin-top: 15px; }.form-message:empty { display: none; }.claim-form>.fine-print { text-align: center; margin-top: 14px; }
.proof-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }
.payout-panel { padding: 24px; }.empty-count { font-size: .75rem; color: var(--muted); }
.empty-state { text-align: center; padding: 28px 25px 10px; }.empty-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px dashed #665378; border-radius: 15px; color: #a890bc; margin-bottom: 17px; font-size: 1.4rem; }.empty-state p { max-width: 350px; margin: 12px auto 20px; color: var(--muted); font-size: .875rem; }
.trust-card { border-radius: 20px; padding: 28px; background: #212627; border: 1px solid #38423b; }.trust-card .eyebrow { color: #9fb7a2; }.trust-card h3 { margin: 15px 0 20px; font: 500 1.5rem/1.4 var(--display); letter-spacing: -.04em; }.trust-card ol { padding: 0; margin: 0 0 22px; list-style: none; display: grid; gap: 13px; }.trust-card li { font-size: .875rem; color: #b7c3b9; }.trust-card li>span { font-size: .75rem; color: #86a08c; margin-right: 12px; }.trust-card .text-button { color: var(--lime); }
.how-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 30px 0; margin: 40px 0 0; border-top: 1px solid var(--line); }.how-strip>div { display: flex; align-items: center; gap: 14px; }.how-strip b { color: #6a577e; font: 500 1.55rem var(--display); }.how-strip strong { display: block; font-size: .875rem; }.how-strip small { font-size: .75rem; color: var(--muted); }.how-arrow { color: #594b69; font-size: 1.4rem; }
footer { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding: 25px 0 32px; border-top: 1px solid var(--line); font-size: .75rem; color: #93859f; }.footer-brand { font: 700 1rem var(--display); letter-spacing: -.06em; color: white; }.footer-brand span { color: var(--lime); }footer p { flex: 1; }footer .text-button { font-size: .75rem; }
.site-dialog { width: min(560px,calc(100% - 28px)); max-height: calc(100dvh - 48px); overflow: auto; border: 1px solid #68517e; border-radius: 24px; padding: 28px; color: var(--text); background: #211b2c; box-shadow: 0 30px 100px #0009; }
.site-dialog::backdrop { background: #0a0813c9; backdrop-filter: blur(7px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.dialog-close { background: #3d304d; color: white; border: 0; border-radius: 9px; width: 38px; height: 38px; font-size: 1.5rem; }
#dialog-body { margin-top: 22px; }#dialog-body p { color: #c0b3ce; margin: 14px 0; font-size: .875rem; }#dialog-body .button { margin-top: 10px; width: 100%; }
.dialog-balance { color: var(--lime); font: 600 2.5rem var(--display); letter-spacing: -.05em; }
.balance-list { display: grid; gap: 9px; margin-top: 20px; }.balance-list>div { display: flex; align-items: center; gap: 10px; padding: 10px; background: #2b2437; border-radius: 12px; font-size: .875rem; }.balance-list img { width: 39px; height: 39px; border-radius: 10px; }.balance-list b { margin-left: auto; text-align: right; }.dialog-record { border: 1px solid #4b3c5c; border-radius: 12px; padding: 15px; margin: 12px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .875rem; }.dialog-record small { width: 100%; color: var(--muted); }.dialog-record strong { color: var(--lime); }
.rules-list { padding-left: 20px; color: #c5b9d1; font-size: .875rem; }.rules-list li { margin: 14px 0; }
.toast { position: fixed; bottom: 25px; left: calc(50% + 111px); transform: translateX(-50%); width: max-content; max-width: min(600px,calc(100% - 28px)); z-index: 90; display: flex; align-items: center; gap: 20px; border: 1px solid #8c6ca8; background: #342445; padding: 15px 18px; border-radius: 14px; box-shadow: 0 10px 40px #0008; font-size: .875rem; }
.toast button { border: 0; border-radius: 7px; background: #534066; width: 30px; height: 30px; flex: 0 0 30px; font-size: 1.15rem; }
.noscript-note { position: fixed; bottom: 0; width: 100%; background: #4d243b; padding: 15px; text-align: center; z-index: 95; }
@media (min-width:1600px) { .game-art { height: 210px; } .welcome-card { min-height: 355px; } }
@media (max-width:1200px) { .sidebar { width: 194px; padding-inline: 14px; }.app { margin-left: 194px; }main { padding-inline: 24px; }.topbar { padding-inline: 24px; }.intro-grid,.competition-grid { grid-template-columns: minmax(0,1.6fr) minmax(255px,1fr); }.welcome-content { width: 80%; padding: 25px; }.welcome-sticker { right: 12px; bottom: 15px; }.game-grid,.draw-grid { gap: 13px; }.game-body { padding: 14px; }.game-body>p { min-height: 90px; }.store-links { flex-direction: column; }.game-title-row { gap: 9px; }.game-title-row h3 { font-size: .875rem; }.ranking-table td,.ranking-table th { padding-inline: 14px; }.exchange-explainer { padding: 26px; }.claim-form { margin: 15px; padding: 20px; }.toast { left: calc(50% + 97px); }.how-arrow { display: none; } }
@media (max-width:980px) { .sidebar { width: 80px; padding: 26px 12px; }.brand { margin: 0 auto 32px; }.brand>span:last-child,.nav-label,.nav-count,.sidebar-bottom,.sidebar-account { display: none; }.nav-item { font-size: 0; justify-content: center; padding: 15px; }.nav-item>span:first-child { font-size: 1.5rem; }.app { margin-left: 80px; }.intro-grid { grid-template-columns: minmax(0,1.65fr) minmax(245px,1fr); }.competition-grid { grid-template-columns: minmax(0,1.7fr) minmax(245px,1fr); }.page-heading>.text-link { display: none; }.welcome-content { width: 90%; }.welcome-sticker { display: none; }.welcome-card::before { background: linear-gradient(90deg,#2a135df0,#352060bd 50%,#35206040); }.section-note { font-size: .75rem; }.game-art { height: 145px; }.game-title-row { align-items: flex-start; }.game-icon { width: 36px; height: 36px; }.ranking-player { gap: 6px; }.ranking-table th:last-child { max-width: 130px; }.ranking-table td,.ranking-table th { padding-inline: 11px; }.you-label { display: none; }.proof-layout { grid-template-columns: 1.1fr 1fr; }.toast { left: calc(50% + 40px); }.how-strip { flex-wrap: wrap; gap: 22px; } }
@media (max-width:760px) { .sidebar { inset: auto 0 0; width: 100%; height: 70px; padding: 5px 10px max(5px,env(safe-area-inset-bottom)); border: 0; border-top: 1px solid #3d334a; background: #17131ef5; backdrop-filter: blur(18px); }.brand { display: none; }.navigation { display: grid; grid-template-columns: repeat(5,1fr); gap: 3px; }.nav-item { flex-direction: column; gap: 3px; padding: 6px 2px; font-size: .75rem; border-radius: 10px; }.nav-item>span:first-child { font-size: 1.2rem; }.app { margin-left: 0; }.topbar { height: 68px; padding: 0 18px; }.breadcrumb { font-size: .75rem; }.breadcrumb span,.breadcrumb strong { display: none; }.header-actions { gap: 9px; }.demo-badge { font-size: .75rem; }.wallet-button { padding: 7px 10px; }.wallet-arrow { display: none; }.avatar-button { width: 35px; height: 35px; }main { padding: 24px 18px 70px; }.intro-grid { grid-template-columns: 1fr; gap: 15px; }.welcome-card { min-height: 300px; }.welcome-content { width: 70%; padding: 26px; }.welcome-content h2 { font-size: 1.95rem; }.welcome-card::before { background: linear-gradient(90deg,#2a135df0,#352060cf 35%,#35206010); }.wallet-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; padding: 20px; }.wallet-card>.card-top { grid-column: 1/-1; }.wallet-value { margin: 8px 0 0; }.wallet-value>strong { font-size: 2rem; }.wallet-card>p { grid-column: 1; margin: 0; }.wallet-conversion { grid-column: 2; grid-row: 2; border: 0; padding: 0; flex-direction: column; justify-content: center; align-items: end; gap: 1px; font-size: .75rem; }.wallet-card>.button { grid-column: 2; grid-row: 3 / span 2; align-self: center; min-height: 42px; padding: 9px; }.wallet-card>.text-button { margin: 4px 0 0; justify-content: flex-start; text-align: left; }.section { margin-top: 34px; }.section-heading { gap: 12px; flex-wrap: wrap; }.section-note { display: none; }.game-grid { grid-template-columns: 1fr; gap: 15px; }.game-card { display: grid; grid-template-columns: 36% minmax(0,1fr); }.game-art { height: 100%; min-height: 255px; }.game-art>img { object-position: 50% 45%; }.game-genre { left: 9px; top: 9px; }.game-body { padding: 18px; }.game-title-row h3 { font-size: 1.06rem; }.game-icon { width: 42px; height: 42px; }.game-body>p { min-height: 0; }.store-links { flex-direction: row; flex-wrap: wrap; }.competition-grid { grid-template-columns: 1fr; }.chase-card { padding: 22px; }.rank-number { font-size: 2.7rem; }.chase-card>.muted { text-align: left; }.draw-grid { grid-template-columns: 1fr; gap: 14px; }.draw-card { padding: 21px; }.draw-card .card-top { margin-bottom: 12px; }.draw-card h3 { font-size: 1.2rem; }.exchange-layout { grid-template-columns: 1fr; }.exchange-explainer { padding: 25px; }.exchange-explainer h3 { font-size: 2rem; }.claim-form { margin: 0 15px 15px; }.proof-layout { grid-template-columns: 1fr; }.how-strip { display: grid; gap: 23px; }.how-strip b { font-size: 1.7rem; }footer { gap: 17px; }footer p { flex: 0 0 100%; order: 3; }footer>span { margin-left: auto; }.toast { left: 50%; bottom: 84px; }.site-dialog { padding: 23px; } }
@media (max-width:420px) { .demo-badge { display: none; }.welcome-content { width: 88%; padding: 23px; }.welcome-content h2 { font-size: 1.65rem; }.welcome-art { object-position: 60% 50%; }.game-card { grid-template-columns: 1fr; }.game-art { min-height: 0; height: 180px; }.wallet-card { column-gap: 12px; }.wallet-card .text-button { font-size: .75rem; }.wallet-card .button { font-size: .75rem; gap: 8px; }.period-tabs { width: 100%; }.period-tabs button { flex: 1; padding-inline: 8px; }.ranking-table th { font-size: .75rem; letter-spacing: 0; }.ranking-table td { font-size: .75rem; }.player-avatar { width: 28px; height: 28px; font-size: .75rem; }.ranking-table td:first-child { width: 49px; }.ranking-table td,.ranking-table th { padding-inline: 8px; }.balance-list>div { flex-wrap: wrap; }.balance-list b { width: 100%; }.exchange-quote { grid-template-columns: 1fr; }.exchange-quote small { grid-column: 1; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; }*,*::before,*::after { transition: none!important; } }