/* Homepage presentation. Native gameplay remains in its existing iframe. */
.home-page { --home-line:#343c36; --home-soft:#aeb7ad; }
.home-page [hidden] { display:none !important; }
.home-eyebrow { display:block; color:#b4bbaa; font-size:10px; font-weight:700; letter-spacing:1.8px; line-height:1.5; }
.home-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.3fr); align-items:center; gap:32px; padding:40px 32px; border:1px solid #414839; border-radius:18px; overflow:hidden; background:radial-gradient(ellipse at 85% 0%,#68764130,transparent 65%),linear-gradient(125deg,#232b22,#171d1a 70%); }
.home-hero::before { content:''; position:absolute; z-index:-1; inset:0; opacity:.065; background:linear-gradient(90deg,#182019,transparent),url('./assets/gameplay/casino-world.webp') center/cover; pointer-events:none; }
.home-hero-copy { padding:8px 0 10px 4px; }
.home-hero-copy .home-eyebrow { display:flex; align-items:center; gap:9px; font-size:9px; letter-spacing:1.4px; }
.home-spark { width:7px; height:7px; flex:none; background:#d6b270; transform:rotate(45deg); }
.home-hero h2 { margin:22px 0 20px; font-size:clamp(38px,3.8vw,60px); line-height:1.04; letter-spacing:-2.4px; font-weight:750; }
.home-hero h2 em { color:#efd197; font-style:normal; }
.home-hero-copy>p { max-width:390px; color:#bac2b4; font-size:14px; line-height:1.85; }
.home-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin:26px 0 24px; }
.home-hero-actions .button { padding:13px 17px; min-height:46px; font-size:12px; background:#e9c680; color:#211c12; box-shadow:0 4px 20px #e6bb7212; }
.home-secondary-link { display:inline-flex; align-items:center; gap:12px; color:#dfdcd0; font-size:12px; font-weight:600; }
.home-secondary-link:hover { color:#ffe3ad; }
.home-hero-benefits { display:flex; flex-wrap:wrap; gap:7px 17px; color:#a8b3a2; font-size:10px; }
.home-hero-benefits span { display:inline-flex; align-items:center; gap:6px; }
.home-hero-benefits span::before { content:'✓'; color:#b3c59d; font-size:11px; }
.home-showcase { min-width:0; padding:13px; background:#0c100dda; border:1px solid #586044; border-radius:12px; box-shadow:0 20px 55px #0005; }
.home-showcase-top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 2px 12px; color:#acb29f; font-size:8px; font-weight:600; letter-spacing:1.4px; }
.home-preview-label { padding:3px 7px; border:1px solid #404739; border-radius:4px; color:#c3c9b9; font-size:9px; letter-spacing:0; font-weight:400; }
.home-showcase-screen { position:relative; border-radius:5px; overflow:hidden; background:#191b15; }
.home-showcase-screen>img { display:block; width:100%; aspect-ratio:710/334; height:auto; object-fit:contain; }
#showcase-details { display:flex; align-items:center; gap:10px; position:absolute; bottom:14px; left:50%; transform:translate(-50%,6px); background:#efce8e; color:#231b0d; padding:10px 14px; border:1px solid #ffe7b8; border-radius:6px; font-size:11px; font-weight:650; white-space:nowrap; opacity:0; transition:opacity .16s,transform .16s; box-shadow:0 4px 15px #0006; }
.home-showcase-screen:hover #showcase-details,.home-showcase-screen:focus-within #showcase-details { opacity:1; transform:translate(-50%,0); }
.home-showcase-caption { display:flex; flex-direction:column; gap:4px; padding:14px 3px 12px; min-height:64px; }
.home-showcase-caption strong { font-size:15px; }
.home-showcase-caption span { font-size:11px; color:#a4aea0; line-height:1.6; }
.home-showcase-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.home-showcase-tabs button { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; border:1px solid #2b342a; border-radius:6px; padding:7px 4px; background:#181e17; color:#9ca896; font-size:9px; line-height:1.35; transition:border-color .15s,background .15s; }
.home-showcase-tabs button img { width:54px; height:35px; object-fit:cover; border-radius:2px; opacity:.75; }
.home-showcase-tabs button[aria-pressed=true] { color:#f2d69e; background:#343324; border-color:#ad8d4c; }
.home-showcase-tabs button[aria-pressed=true] img,.home-showcase-tabs button:hover img { opacity:1; }
.home-showcase-tabs button:hover { border-color:#7f815c; color:#f1e9d3; }
.home-practice-note { display:flex; align-items:center; gap:12px; margin:18px 2px 24px; color:#a9b6ab; font-size:11px; line-height:1.8; }
.home-note-mark { color:#c0d2b2; font-size:21px; }
.home-practice-note strong { color:#d5dece; font-weight:600; }
.home-practice-note a { display:flex; align-items:center; gap:8px; margin-left:auto; color:#d0dfc4; font-size:11px; white-space:nowrap; }
.home-practice-note .icon { width:14px; height:14px; }
.home-membership { display:grid; grid-template-columns:minmax(180px,.6fr) minmax(0,1.4fr) auto; align-items:center; gap:12px 24px; padding:22px 25px; border:1px solid #3d4132; border-radius:12px; background:linear-gradient(105deg,#25281f,#1c211c); }
.home-membership .home-eyebrow,.home-rank-eyebrow { color:#bea875; font-size:9px; letter-spacing:1.35px; text-transform:uppercase; font-weight:700; }
.home-rank-title { margin-top:5px; font-size:17px; font-weight:650; letter-spacing:-.3px; }
.home-rank-main { min-width:0; display:flex; align-items:center; gap:17px; }
.home-rank-current,.home-rank-next { display:flex; flex-direction:column; align-items:center; gap:4px; flex:none; font-size:10px; color:#c6cabd; }
.home-rank-icon { width:42px; height:42px; object-fit:contain; }
.home-rank-next { opacity:.7; }
.home-rank-next .home-rank-icon { width:32px; height:32px; }
.home-rank-name { color:#efdbb6; font-weight:600; }
.home-rank-progress { flex:1; min-width:0; }
.home-rank-progress progress { display:block; appearance:none; border:0; border-radius:10px; width:100%; height:6px; overflow:hidden; background:#414438; accent-color:#e2bb70; }
.home-rank-progress progress::-webkit-progress-bar { background:#414438; border-radius:10px; }
.home-rank-progress progress::-webkit-progress-value { background:linear-gradient(90deg,#a57e3e,#f4d597); border-radius:10px; }
.home-rank-progress progress::-moz-progress-bar { background:#e2bb70; border-radius:10px; }
.home-rank-remaining { margin-top:8px; color:#e0d7c5; font-size:11px; }
.home-rank-total { margin-top:3px; color:#a3ac9e; font-size:10px; }
.home-rank-actions { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.home-rank-link { color:#eacb8d; display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:600; white-space:nowrap; }
.home-rank-refresh { padding:0; min-height:24px; background:none; color:#afb99f; text-decoration:underline; text-underline-offset:3px; font-size:10px; }
.home-rank-refresh:hover,.home-rank-link:hover { color:#ffe7b7; }
.home-rank-status { color:#b3bca9; font-size:11px; }
.home-rank-status:empty { display:none; }
.home-rank-note { grid-column:2/4; color:#99a48f; font-size:10px; line-height:1.7; }
.home-membership:has(.home-rank-main:not([hidden])) .home-rank-status { grid-column:2/4; }
.home-membership[data-state=unavailable],.home-membership[data-state=stale] { border-color:#64533b; }
.home-games-section { margin-top:48px; scroll-margin-top:100px; }
.home-section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:23px; }
.home-section-heading h2 { font-size:29px; line-height:1.2; letter-spacing:-.9px; margin-top:8px; }
.home-section-heading p { color:#9da79e; font-size:12px; margin-top:10px; line-height:1.8; }
.home-search { display:flex; align-items:center; gap:9px; width:215px; flex:none; padding:0 12px; min-height:41px; border:1px solid #354137; border-radius:7px; background:#1a211c; color:#99a893; }
.home-search input { width:100%; min-width:0; color:#e5eade; font-size:12px; background:none; border:0; outline:none; padding:10px 0; }
.home-search:focus-within { border-color:#c8a663; outline:2px solid #e6bb721c; }
.home-search .icon { width:17px; height:17px; }
.home-game-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:23px; }
.home-filters { display:flex; gap:7px; flex-wrap:wrap; }
.home-filters button { display:flex; align-items:center; gap:6px; min-height:37px; padding:9px 14px; background:#1d2420; border:1px solid #343d35; color:#abb6a8; border-radius:6px; font-size:11px; }
.home-filters button[aria-pressed=true] { background:#dac18a; color:#211e17; border-color:#dac18a; font-weight:650; }
.home-filters button:hover:not([aria-pressed=true]) { color:#efdfb9; border-color:#827653; }
.home-filters .icon { width:13px; height:13px; }
.home-game-count { color:#8b988c; font-size:11px; white-space:nowrap; }
.home-games-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 20px; }
.home-game-card { position:relative; min-width:0; border:1px solid #353c32; border-radius:10px; overflow:hidden; background:#1b211b; transition:transform .18s,border-color .18s,box-shadow .18s; }
.home-game-card:hover { transform:translateY(-3px); border-color:#85754f; box-shadow:0 10px 24px #0003; }
.home-game-shot { display:block; width:100%; padding:0; position:relative; overflow:hidden; background:#28291c; }
.home-game-shot>img { display:block; width:100%; height:auto; aspect-ratio:512/334; object-fit:contain; transition:filter .18s; }
.home-game-overlay { display:flex; position:absolute; inset:0; align-items:center; justify-content:center; gap:12px; background:#080d09a6; color:#f5ddb0; font-size:12px; font-weight:600; opacity:0; transition:opacity .18s; }
.home-game-shot:hover .home-game-overlay,.home-game-shot:focus-visible .home-game-overlay { opacity:1; }
.home-game-favourite { display:grid; place-items:center; width:31px; height:31px; padding:0; position:absolute; right:9px; top:9px; color:#c4c3af; border:1px solid #67644b80; border-radius:6px; background:#182018e8; }
.home-game-favourite .icon { width:16px; height:16px; }
.home-game-favourite:hover,.home-game-favourite[aria-pressed=true] { color:#f2cb79; background:#373421; border-color:#b59a5c; }
.home-game-favourite[aria-pressed=true] .icon { fill:#e2bd6733; }
.home-game-body { padding:17px 18px 19px; }
.home-game-tag { display:block; color:#94a58e; font-size:9px; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; }
.home-game-body>button { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; padding:0; background:none; color:#eee8d6; font-size:18px; font-weight:650; letter-spacing:-.25px; text-align:left; }
.home-game-body>button .icon { color:#a89362; width:16px; height:16px; transition:transform .16s; }
.home-game-body>button:hover .icon { transform:translateX(3px); }
.home-game-body>p { color:#a1ad9c; font-size:11px; line-height:1.8; margin-top:9px; }
.home-game-empty { border:1px dashed #526047; border-radius:10px; padding:42px 22px; text-align:center; color:#c5cdbd; }
.home-capture-note { margin-top:16px; color:#7f8e7f; font-size:10px; }
.home-world { display:grid; grid-template-columns:1.1fr 1fr; gap:0; overflow:hidden; border:1px solid #464637; border-radius:14px; background:#23271e; margin-top:48px; }
.home-world-image { position:relative; min-height:280px; }
.home-world-image>img { width:100%; height:100%; object-fit:cover; }
.home-world-image::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#172013e0,transparent 35%); pointer-events:none; }
.home-world-image>span { position:absolute; bottom:20px; left:22px; z-index:1; color:#f0e1b7; font-size:9px; letter-spacing:1.5px; }
.home-world-copy { padding:32px; align-self:center; }
.home-world-copy h2 { color:#eee6d2; margin:10px 0 15px; font-size:32px; line-height:1.13; letter-spacing:-1px; }
.home-world-copy>p { color:#b1b8a4; line-height:1.85; font-size:12px; }
.home-duel-styles { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 23px; }
.home-duel-styles span { padding:5px 8px; border:1px solid #505240; border-radius:4px; color:#d3d4bd; font-size:9px; }
.home-world-copy>.button { font-size:12px; }
.home-fairness { display:flex; align-items:center; gap:20px; padding:27px 6px; border-bottom:1px solid #343e33; margin:18px 0 0; }
.home-fairness-icon { display:grid; place-items:center; width:48px; height:48px; flex:none; background:#293526; color:#b7cc9c; border:1px solid #45523a; border-radius:10px; }
.home-fairness-icon svg { width:26px; height:26px; }
.home-fairness h2 { font-size:17px; letter-spacing:-.3px; }
.home-fairness p { color:#a2ae9d; font-size:11px; margin-top:5px; line-height:1.7; }
.home-fairness>a { margin-left:auto; flex:none; }
.home-help { display:grid; grid-template-columns:.8fr 1.3fr; gap:52px; margin:47px 0 35px; scroll-margin-top:100px; }
.home-help h2 { font-size:32px; line-height:1.15; letter-spacing:-1px; margin:12px 0 15px; }
.home-help>div>p { max-width:290px; color:#a7b09f; font-size:12px; line-height:1.8; }
.home-help-list details { border-bottom:1px solid #353e32; }
.home-help-list summary { cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:17px 0; color:#dbdfd2; font-size:12px; font-weight:550; list-style:none; }
.home-help-list summary::-webkit-details-marker { display:none; }
.home-help-list summary>span { font-size:18px; color:#c9ad74; transition:transform .15s; }
.home-help-list details[open] summary>span { transform:rotate(45deg); }
.home-help-list details>p { color:#a7b19f; font-size:11px; line-height:1.9; padding:0 25px 18px 0; }
.home-help-list details a { color:#e6c181; text-decoration:underline; }
#game-dialog { width:min(870px,calc(100vw - 32px)); max-width:870px; max-height:calc(100dvh - 40px); overflow-y:auto; }
#game-dialog[open] { display:block; }
#game-dialog .game-detail-art { padding:40px 20px 16px; min-height:0; height:auto; background:#11170f; border-bottom:1px solid #484635; }
#game-dialog .game-detail-art img { width:100%; height:auto; max-height:400px; object-fit:contain; position:static; transform:none; }
#game-dialog .game-detail-copy { padding:26px 30px; }
#game-dialog .game-detail-copy h2 { margin:7px 0; font-size:27px; }
#game-dialog .game-howto { margin:18px 0; }
@media (min-width:1600px) { .home-showcase-tabs button { flex-direction:row; text-align:left; padding:7px; } .home-hero { padding:42px; } }
@media (max-width:1200px) and (min-width:901px) { .home-hero { gap:22px; padding:28px 23px; grid-template-columns:minmax(220px,.7fr) minmax(0,1fr); } .home-hero h2 { font-size:42px; } .home-hero-copy>p { font-size:12px; } .home-hero-actions { gap:14px; } .home-hero-benefits { font-size:9px; } .home-membership { grid-template-columns:1fr auto; } .home-rank-heading { grid-column:1/-1; } .home-rank-note,.home-membership:has(.home-rank-main:not([hidden])) .home-rank-status { grid-column:1/-1; } }
@media (max-width:900px) { .home-hero { grid-template-columns:1fr; padding:30px; gap:28px; } .home-hero h2 { font-size:54px; } .home-hero-copy>p { max-width:540px; } .home-hero-actions { margin:22px 0 17px; } .home-hero-copy { padding:0; } .home-showcase-tabs button { flex-direction:row; justify-content:center; gap:7px; } .home-practice-note>a { display:none; } .home-membership { grid-template-columns:1fr auto; } .home-rank-heading { grid-column:1/-1; } .home-rank-note,.home-membership:has(.home-rank-main:not([hidden])) .home-rank-status { grid-column:1/-1; } .home-games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .home-world-copy { padding:24px; } .home-world-copy h2 { font-size:28px; } .home-fairness { flex-wrap:wrap; } .home-fairness>div:nth-child(2) { flex:1; } .home-fairness>a { margin-left:68px; } .home-help { gap:30px; } }
@media (max-width:560px) { .home-hero { padding:24px 17px 17px; border-radius:12px; gap:24px; } .home-hero h2 { font-size:44px; letter-spacing:-1.8px; margin:20px 0 15px; } .home-hero-copy { padding:0 4px; } .home-hero-copy .home-eyebrow { font-size:8px; letter-spacing:1px; } .home-hero-copy>p { font-size:12px; line-height:1.85; } .home-hero-actions { gap:15px; } .home-hero-actions .button { font-size:11px; } .home-secondary-link { font-size:11px; } .home-hero-benefits { font-size:9px; gap:12px; } .home-showcase { padding:9px; border-radius:9px; } .home-showcase-top { padding-bottom:9px; font-size:7px; letter-spacing:1px; } .home-preview-label { font-size:8px; } .home-showcase-caption { min-height:60px; padding:12px 2px 10px; } .home-showcase-caption span { font-size:10px; } .home-showcase-tabs { gap:4px; } .home-showcase-tabs button { flex-direction:column; font-size:8px; min-height:64px; } .home-showcase-tabs button img { width:44px; height:29px; } #showcase-details { opacity:1; transform:none; position:static; width:100%; justify-content:center; border:0; border-top:1px solid #61583b; border-radius:0; padding:8px; background:#272b20; color:#e5c991; font-size:10px; box-shadow:none; } .home-showcase-screen:hover #showcase-details,.home-showcase-screen:focus-within #showcase-details { transform:none; } .home-practice-note { align-items:flex-start; font-size:10px; margin:15px 2px 21px; } .home-note-mark { font-size:17px; } .home-membership { padding:19px 17px; grid-template-columns:1fr; gap:12px; } .home-rank-title { font-size:16px; } .home-rank-main { gap:12px; } .home-rank-next .home-rank-icon { width:29px; height:29px; } .home-rank-actions { flex-direction:row; align-items:center; justify-content:space-between; } .home-rank-status,.home-rank-note { grid-column:1; } .home-rank-remaining { font-size:10px; } .home-games-section { margin-top:34px; } .home-section-heading { flex-direction:column; align-items:stretch; gap:16px; margin-bottom:18px; } .home-section-heading h2 { font-size:27px; } .home-section-heading p { font-size:11px; } .home-search { width:100%; min-height:43px; } .home-filters { flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding-bottom:4px; scrollbar-width:thin; } .home-filters button { flex:none; min-height:40px; padding:8px 12px; font-size:10px; } .home-game-toolbar { display:block; margin-bottom:16px; } .home-game-count { display:none; } .home-games-grid { gap:15px 11px; } .home-game-body { padding:12px 11px 14px; } .home-game-body>button { font-size:14px; } .home-game-body>button .icon { width:13px; height:13px; } .home-game-body>p { font-size:10px; line-height:1.7; } .home-game-tag { font-size:8px; letter-spacing:.6px; } .home-game-favourite { width:28px; height:28px; top:5px; right:5px; } .home-game-overlay { font-size:10px; gap:5px; } .home-game-overlay .icon { width:13px; height:13px; } .home-world { grid-template-columns:1fr; margin-top:34px; } .home-world-image { min-height:0; aspect-ratio:505/300; } .home-world-copy { padding:26px 23px; } .home-world-copy h2 { font-size:30px; } .home-fairness { padding:24px 1px; gap:13px; } .home-fairness h2 { font-size:15px; } .home-fairness-icon { width:40px; height:40px; } .home-fairness>a { margin-left:53px; } .home-help { grid-template-columns:1fr; gap:18px; margin:35px 0 25px; } .home-help h2 { font-size:30px; } .home-help h2 br { display:none; } .home-help>div>p { max-width:none; } .home-help-list summary { min-height:49px; } #game-dialog .game-detail-art { padding:44px 7px 12px; } #game-dialog .game-detail-copy { padding:22px 20px; } }
@media (prefers-reduced-motion:reduce) { .home-page *, .home-page *::before, .home-page *::after { transition:none !important; scroll-behavior:auto !important; } .home-game-card:hover { transform:none; } }

/* Retain the account actions beside a dated, still-valid progress snapshot. */
@media (min-width:1201px) { .home-membership:has(.home-rank-main:not([hidden])) .home-rank-actions { grid-column:3; grid-row:1; } }
@media (min-width:561px) and (max-width:1200px) { .home-membership:has(.home-rank-main:not([hidden])) .home-rank-actions { grid-column:2; grid-row:2; } }
@media (max-width:560px) { .home-membership:has(.home-rank-main:not([hidden])) .home-rank-status { grid-column:1/-1; } }