/* The catalogue is the primary destination; game mechanics keep their own stage styles. */
.game-hub{display:grid;gap:28px;padding-bottom:12px;min-width:0}
.hub-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:stretch}
.hub-welcome{padding:10px 0 8px;align-self:center}
.hub-welcome h1{font-size:clamp(36px,4vw,54px);line-height:1.02;letter-spacing:-.045em;margin:0 0 16px;font-weight:800;color:#eef1df}
.hub-welcome h1 em{color:#cfe4a4;font-style:normal}
.hub-welcome p{font-size:14px;line-height:1.55;color:#b9c9b2;margin:0 0 20px}
.hub-actions{display:flex;gap:10px;flex-wrap:wrap}.hub-actions .button{min-height:44px;padding:11px 17px;font-size:13px}
.hub-multiplayer{display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;border-radius:18px;padding:23px 26px;background:radial-gradient(ellipse at 95% 10%,#71815155,transparent 65%),linear-gradient(120deg,#314f3b,#223e2e);border:1px solid #81926a38;color:#eef1df;text-decoration:none;min-width:0;transition:background .2s,border-color .2s}
.hub-multiplayer:hover{border-color:#b5c98b88;background-color:#304e38}
.hub-multiplayer-top{display:flex;justify-content:space-between;gap:16px;align-items:center;position:relative;z-index:1;font-size:13px}.hub-multiplayer-top>span:first-child{display:flex;gap:8px;align-items:center;font-weight:700}.hub-multiplayer-top .icon{width:19px;height:19px}.hub-multiplayer-top>span:last-child{color:#d3dfbb;font-size:11px;white-space:nowrap}
.hub-multiplayer h2{font-size:31px;line-height:1.06;letter-spacing:-.025em;margin:19px 0 10px;position:relative;z-index:1}
.hub-multiplayer p{font-size:12px;line-height:1.5;color:#c3d0b5;margin:0 110px 15px 0;position:relative;z-index:1}
.hub-multiplayer-link{display:flex;align-items:center;gap:10px;margin-top:auto;font-size:13px;font-weight:700;color:#d6e9b2;position:relative;z-index:1}.hub-multiplayer-link .icon{width:17px;height:17px}
.hub-party-art{position:absolute;width:160px;height:150px;right:12px;bottom:27px;pointer-events:none;z-index:0;opacity:.55;transform:rotate(-8deg);transition:transform .35s}
.hub-party-art i{position:absolute;inset:26px;border:1px solid #c4dca161;border-radius:23px;background:#7e906322;transform:rotate(-14deg)}.hub-party-art i:nth-child(2){transform:rotate(14deg);background:#af9d7020;border-color:#d5b98955}.hub-party-art i:nth-child(3){transform:none;background:#244433;border-color:#a7bd8177}
.hub-party-art>.icon{position:absolute;width:50px;height:50px;left:55px;top:50px;color:#deebbf;stroke-width:1.1}.hub-multiplayer:hover .hub-party-art{transform:rotate(0) translateY(-3px)}
.hub-games{min-width:0}.hub-section-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}.hub-section-heading h2{font-size:21px;line-height:1.3;margin:0;letter-spacing:-.025em;scroll-margin-top:24px}.hub-section-heading a{font-size:12px;display:flex;align-items:center;gap:7px;color:#bbcca8;min-height:32px}.hub-section-heading .icon{width:16px;height:16px}
.game-hub .arcade-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;width:100%;margin:0}
.game-hub .arcade-card:nth-child(n){display:flex;flex-direction:column;min-width:0;min-height:0;height:auto;padding:0;margin:0;border:1px solid #8aa17825;border-radius:13px;overflow:hidden;box-shadow:none;background:#1f392b;transform:none;transition:transform .2s,border-color .2s}
.game-hub .arcade-card.is-preview-active{transform:translateY(-3px);border-color:#abc78e80}
.game-hub .arcade-banner{width:100%;height:120px;min-height:120px;flex:none;border-radius:0;container-type:size;overflow:hidden}
.game-hub .idea-category{display:none}
.game-hub .idea-copy{display:flex;flex-direction:column;justify-content:center;gap:0;padding:10px 12px;min-width:0;min-height:44px;box-sizing:border-box}
.game-hub .idea-copy strong{opacity:1;font-size:14px;line-height:1.35;letter-spacing:-.015em;color:#e6ecd8;font-weight:700;overflow-wrap:normal;white-space:normal}
.game-hub .idea-copy small{display:none}
.hub-tip-rounds{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:13px;background:#263d2c80;min-width:0}
.hub-tip-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;flex:none;background:#bcc79215;color:#c9d1a3}.hub-tip-icon .icon{width:22px;height:22px}
.hub-tip-rounds>div{flex:1;min-width:0}.hub-tip-rounds h2{font-size:16px;line-height:1.35;margin:0 0 4px;letter-spacing:-.02em}.hub-tip-rounds p{font-size:12px;line-height:1.5;color:#aebfa5;margin:0}.hub-tip-rounds .button{font-size:12px;min-height:42px;padding:10px 14px;white-space:nowrap}
.hub-shortcuts{display:flex;justify-content:center;gap:30px}.hub-shortcuts a{display:flex;align-items:center;gap:8px;min-height:36px;font-size:12px;color:#b6c6aa}.hub-shortcuts .icon{width:14px;height:14px}
.game-hub a:focus-visible,.game-hub button:focus-visible{outline:2px solid #d5e7b0;outline-offset:4px}
.multiplayer-welcome{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:60px;padding:38px 32px;background:linear-gradient(110deg,#284432,#1b3327);border-radius:18px}
.multiplayer-welcome h1{font-size:clamp(30px,4vw,46px);line-height:1.1;margin:18px 0;letter-spacing:-.04em}.multiplayer-welcome p{font-size:15px;line-height:1.65;color:#bfceb4;max-width:480px;margin-bottom:24px}.multiplayer-welcome .text-button{display:flex;margin-top:15px;gap:8px;min-height:36px}
.hub-welcome-symbol{display:grid;place-items:center;width:48px;height:48px;background:#c5d99a1a;border-radius:14px;color:#d1e5a8}.hub-welcome-symbol .icon{width:26px;height:26px}
.multiplayer-welcome ol{list-style:none;counter-reset:step;display:grid;gap:28px;margin:0;padding:0}.multiplayer-welcome li{position:relative;padding-left:45px;counter-increment:step;display:grid;gap:7px}.multiplayer-welcome li:before{content:counter(step);position:absolute;left:0;top:1px;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#adc88b20;color:#d1e2b4;font-size:12px}.multiplayer-welcome li strong{font-size:15px}.multiplayer-welcome li span{font-size:13px;color:#b4c4ab;line-height:1.5}
@media(min-width:701px) and (max-width:1050px){.game-hub .arcade-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.hub-intro{gap:24px}.hub-multiplayer{padding:20px}.hub-party-art{right:-25px;opacity:.3}.hub-multiplayer p{margin-right:0}}
@media(max-width:700px){
 .game-hub{gap:22px;padding-bottom:8px}.hub-intro{grid-template-columns:1fr;gap:18px}.hub-welcome{padding:2px 2px 0}.hub-welcome h1{font-size:38px;line-height:1.05;letter-spacing:-.045em;margin-bottom:12px}.hub-welcome h1 br{display:none}.hub-welcome h1 em{display:block}.hub-welcome p{font-size:13px;line-height:1.5;margin-bottom:16px}.hub-welcome p br{display:none}
 .hub-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hub-actions .button{padding:11px 9px;font-size:12px;gap:6px}
 .hub-multiplayer{padding:17px 18px;border-radius:13px}.hub-multiplayer-top{font-size:12px}.hub-multiplayer h2{font-size:24px;line-height:1.1;margin:13px 0 7px}.hub-multiplayer h2 br{display:none}.hub-multiplayer p{margin:0 45px 12px 0;font-size:12px;max-width:255px}.hub-multiplayer-link{font-size:12px}.hub-party-art{width:125px;height:125px;bottom:5px;right:-20px;opacity:.3}.hub-party-art>.icon{width:37px;height:37px;left:44px;top:44px}
 .hub-section-heading{margin-bottom:12px}.hub-section-heading h2{font-size:20px}.hub-section-heading a{min-height:36px;font-size:11px}
 .game-hub .arcade-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.game-hub .arcade-card:nth-child(n){display:flex;grid-template-columns:none;border-radius:11px}.game-hub .arcade-banner{height:112px;min-height:112px}.game-hub .idea-copy{min-height:48px;padding:8px 10px}.game-hub .idea-copy strong{font-size:13px;line-height:1.35}
 .hub-tip-rounds{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:16px}.hub-tip-icon{width:32px;height:32px;background:none}.hub-tip-rounds h2{font-size:15px}.hub-tip-rounds .button{grid-column:1/-1;justify-self:stretch;min-height:44px}.hub-tip-rounds p{font-size:12px}
 .hub-shortcuts{gap:16px;flex-wrap:wrap}.hub-shortcuts a{font-size:11px;min-height:40px;gap:4px}
 .mobile-nav>a{min-width:0;font-size:10px;letter-spacing:0;padding-inline:2px}
 .multiplayer-welcome{grid-template-columns:1fr;gap:30px;padding:24px 20px;border-radius:13px}.multiplayer-welcome h1{font-size:34px;margin-block:16px}.multiplayer-welcome p{font-size:14px;line-height:1.6;margin-bottom:20px}.multiplayer-welcome ol{gap:24px}.multiplayer-welcome .button{width:100%;min-height:46px}
}
@media(prefers-reduced-motion:reduce){.game-hub *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Preview framing is scoped to the new card ratio, not the playable stages. */
.game-hub .coin-art{scale:.78;transform-origin:50% 40%}
.game-hub .mine-art{scale:.77;transform-origin:50% 40%}
.game-hub .snail-art{scale:.86;transform-origin:50% 50%}
@media(max-width:700px){
 .game-hub .coin-art{scale:1;transform-origin:50% 40%}
 .game-hub .mine-art{scale:1;transform-origin:50% 40%}
 .game-hub .snail-art{scale:.92}
 .social-login h1{line-height:1.12;margin-bottom:18px}.social-login p{line-height:1.6;margin-bottom:22px}
}

/* A single illustrated welcome surface, with a quiet multiplayer shortcut below. */
.hub-showcase{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:1fr 1.15fr;gap:20px;min-height:340px;padding:30px 40px;border:1px solid #a9bd7b33;border-radius:22px;background:radial-gradient(ellipse at 87% 20%,#88955c32,transparent 62%),linear-gradient(115deg,#294934,#203d2e)}
.hub-showcase .hub-welcome{padding:0;z-index:1}.hub-showcase h1{font-size:clamp(42px,4.4vw,64px);line-height:1.08;max-width:520px}.hub-showcase p{max-width:330px;font-size:14px;line-height:1.65;color:#c0cfb5}.hub-showcase .hub-actions{gap:10px}.hub-showcase .hub-actions .icon{width:17px;height:17px}
.hub-scene-wrap{position:relative;min-width:0;display:grid;place-items:center;align-self:stretch}.hub-scene{display:block;width:100%;max-width:480px;overflow:visible}


.hub-multiplayer-compact{display:flex;flex-direction:row;align-items:center;gap:15px;padding:16px 22px;border-radius:13px;min-height:0;background:#263f2e;border-color:transparent;margin-top:-12px}.hub-mp-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#a5c88118;color:#c9dda7;flex:none}.hub-mp-icon .icon{width:23px;height:23px}.hub-mp-copy{display:grid;gap:5px;min-width:0;flex:1}.hub-mp-copy strong{font-size:15px;line-height:1.3}.hub-mp-copy small{font-size:12px;line-height:1.4;color:#b9c9ae}.hub-mp-go{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;color:#d3e5b0;white-space:nowrap}.hub-mp-go .icon{width:19px;height:19px}
@media(min-width:701px){
 .game-hub .blackjack-art{inset:8px 0;scale:.78;transform-origin:50% 50%}
 .game-hub .snail-art{inset:0 auto 0 50%;width:min(100%,220px);translate:-50% 0;scale:1;overflow:hidden}
 .game-hub .snail-preview-track{width:78%;height:28%;left:11%;top:56%;transform:rotate(-9deg);border-block-width:3px}
 .game-hub .snail-preview-racer.front{width:40%;left:20%;top:34px}
 .game-hub .snail-preview-racer.back{width:29%;left:52%;top:28px}
 .game-hub .snail-preview-flag{width:10%;height:31px;right:7%;left:auto;top:31px;bottom:auto}
 .game-hub .arcade-card.is-preview-active .snail-preview-racer.front{translate:10px -2px}.game-hub .arcade-card.is-preview-active .snail-preview-racer.back{translate:6px -2px}
}
@media(min-width:701px) and (max-width:1050px){.hub-showcase{padding:28px;min-height:300px}.hub-showcase h1{font-size:44px}.hub-showcase .hub-actions .button{padding:10px 12px;font-size:12px}}
@media(max-width:700px){
 .hub-showcase{grid-template-columns:1fr;gap:0;padding:25px 22px 10px;min-height:0;border-radius:18px}.hub-showcase h1{font-size:42px;line-height:1.03;margin-bottom:14px}.hub-showcase p{font-size:13px;line-height:1.55;max-width:310px;margin-bottom:18px}.hub-showcase .hub-actions{display:grid;grid-template-columns:1.1fr 1fr;gap:8px}.hub-showcase .hub-actions .button{font-size:11px;padding:11px 7px;min-height:44px}.hub-showcase .hub-actions .icon{width:15px;height:15px}.hub-scene-wrap{margin:2px -8px 0}.hub-scene{max-width:370px}.hub-multiplayer-compact{padding:13px 14px;gap:10px;margin-top:-10px}.hub-mp-icon{width:32px;height:32px;background:none}.hub-mp-copy strong{font-size:13px}.hub-mp-copy small{font-size:10px}.hub-mp-go{font-size:0;gap:0}.hub-mp-go .icon{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){.hub-scene *{animation:none!important}}

@media(max-width:700px){.mobile-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}.mobile-nav>a{width:100%;min-height:46px;box-sizing:border-box;justify-self:stretch}}
@media(max-width:360px){.mobile-nav>a{font-size:9px}}

.hub-showcase .hub-welcome h1 em{display:inline}.hub-showcase .hub-welcome h1 br{display:block}


/* Reuse the playable Blackjack cards and the existing preview chip. */
.hub-showcase{grid-template-columns:1fr 1.05fr;gap:12px;min-height:355px;background:radial-gradient(ellipse at 80% 60%,#627c462b,transparent 60%),linear-gradient(115deg,#2c4b35,#1c3529)}
.hub-showcase .hub-welcome h1{font-size:clamp(44px,4.7vw,64px)}
.hub-showcase p{font-size:15px;max-width:365px;line-height:1.65;margin-bottom:25px}
.hub-blackjack-scene{position:relative;max-width:500px;aspect-ratio:540/340}
.hub-art-table{position:absolute;top:50%;left:50%;width:230px;height:160px;transform:translate(-50%,-50%) scale(1.85)}
.hub-card-pair{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:0}
.hub-card-pair .bj-card{width:76px;height:108px;flex:0 0 76px;border-radius:9px;margin:0;transform:translate(-3px,3px) rotate(-13deg)}
.hub-card-pair .bj-card+.bj-card{margin-left:-10px;transform:translate(3px,-3px) rotate(12deg)}
.hub-card-pair .bj-front>span{font-size:20px;top:8px;left:8px}
.hub-card-pair .bj-front>span:last-child{inset:auto 8px 8px auto}
.hub-card-pair .bj-card small{font-size:13px!important}
.hub-card-pair .bj-front>b{font-size:40px;inset:37px 0 auto}
.hub-table-chip{top:113px;left:150px;width:40px;height:40px;transform:rotate(-9deg);box-shadow:0 3px 0 #754537,0 6px 9px #10251935}
.hub-card-pair{animation:hub-deal-intro 1.4s cubic-bezier(.2,.65,.25,1) 1}
@keyframes hub-deal-intro{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(min-width:701px) and (max-width:1050px){.hub-showcase{min-height:320px}.hub-showcase .hub-welcome h1{font-size:43px}.hub-showcase p{font-size:13px}.hub-art-table{transform:translate(-50%,-50%) scale(1.45)}}
@media(max-width:700px){.hub-showcase{grid-template-columns:1fr;min-height:0;padding-bottom:14px;gap:0}.hub-showcase .hub-welcome h1{font-size:40px}.hub-showcase p{font-size:13px;max-width:320px;margin-bottom:18px}.hub-scene-wrap{margin:8px -12px 0}.hub-blackjack-scene{max-width:350px;aspect-ratio:350/220}.hub-art-table{transform:translate(-50%,-50%) scale(1.3)}}
@media(max-width:360px){.hub-art-table{transform:translate(-50%,-50%) scale(1.08)}}

/* Catalogue motion is explicitly triggered, finite and never runs offscreen. */
.game-hub .arcade-card:not(.is-preview-active) .arcade-art *{animation:none!important}
.game-hub .arcade-card.is-preview-active .arcade-art *{animation-iteration-count:1!important}
.game-hub .arcade-card .art-car{animation:none;transform:translateY(-80px)}
.game-hub .arcade-card.is-preview-active .art-car{animation:preview-lane-traffic 3.8s linear 1 both}
.game-hub .arcade-card.is-preview-active .preview-plinko-ball{animation:plinko-preview-drop 2.6s linear 1 both}
@media(max-width:700px){
 .game-hub .blackjack-art{inset:0;scale:.79;transform-origin:50% 50%;translate:0 0}
 .game-hub .roulette-preview-wheel{width:min(96px,78%)}
}
@media(max-width:700px){
 .game-hub .roulette-preview-wheel{height:auto!important;aspect-ratio:1}
 .game-hub .arcade-card.is-preview-active .blackjack-art .bj-card:first-child{transform:translate(-7px,2px) rotate(-15deg)}
 .game-hub .arcade-card.is-preview-active .blackjack-art .bj-card:nth-child(2){transform:translate(7px,-3px) rotate(15deg)}
}
/* Center the full silhouettes, including the ladder's small arrow. */
.game-hub .ladder-art{inset:auto;left:calc(50% - 5px);top:50%;width:34%;max-width:92px;height:74px;translate:-50% -50%;justify-content:center}
@media(min-width:701px){.game-hub .ticket-art{inset:auto;left:50%;top:50%;width:73px;height:67px;translate:-50% -50%}}
@media(max-width:700px){.game-hub .ladder-art{width:38%;height:70px;gap:4px}}
/* Stable silhouettes and visible traffic, even after a short preview ends. */
.game-hub .arcade-card .art-car{transform:translateY(28px)}
.game-hub .arcade-card.is-preview-active .art-car{animation:hub-traffic-pass 4s ease-out 1 both}
@keyframes hub-traffic-pass{0%{transform:translateY(-80px)}75%{transform:translateY(28px)}100%{transform:translateY(28px)}}
@media(min-width:701px){
 .game-hub .coin-art{inset:0;scale:.78;transform-origin:50% 50%;translate:6.5px -12px}
 .game-hub .ticket-art{width:80px;height:73px}
 .game-hub .ladder-art{width:38%;max-width:102px;height:82px}
 .game-hub .blackjack-art{inset:0;scale:.84;translate:0 0}
}

@media(max-width:700px){
 .game-hub .coin-art{translate:0 -2px}
}

/* Touch previews stay completely still; desktop hover motion is unchanged. */
@media(max-width:700px),(hover:none),(pointer:coarse){
 .game-hub .arcade-card,.game-hub .arcade-art,.game-hub .arcade-art *{animation:none!important;transition:none!important}
}