/* Client-requested wheel language: round silhouettes and a forward rolling cadence. */
:root{--roll-ease:cubic-bezier(.18,.8,.22,1)}
.brand-logo{width:210px}.topbar{padding-top:16px;padding-bottom:16px}
.hero{padding-top:30px}.hero h1{font-size:clamp(36px,4.1vw,62px)}
.topbar .text-button,#motion-toggle{border:1px solid #2a2b2745;border-radius:999px;padding:10px 18px}
.hero .eyebrow,h1,.hero p{animation:roll-arrive .85s var(--roll-ease) both}
h1{animation-delay:.08s}.hero p{animation-delay:.16s}
.hero-stamp{animation:stamp-arrive 1.1s var(--roll-ease) both}
.arcade-rail{margin-top:22px;max-width:1200px}.rail-line{border-radius:999px}
.carousel-stage{height:632px;perspective:none;isolation:isolate;overflow:hidden}
.carousel{top:268px;left:50%;height:0;transform-style:flat}
.wheel-track{position:absolute;left:50%;top:268px;width:920px;height:348px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #8b896d45;background:#d4c99a18;overflow:hidden;pointer-events:none}
.wheel-track:after{content:"";position:absolute;inset:17px;border:1px solid #92907050;border-radius:50%}
.wheel-tread{position:absolute;width:110%;aspect-ratio:1;left:-5%;top:50%;margin-top:-55%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#555b4250 0deg 1deg,transparent 1deg 7deg);mask:radial-gradient(ellipse at center,transparent 0 57%,#000 57% 62%,transparent 62%);will-change:transform}
.wheel-inner{position:absolute;inset:54px;border:1px dashed #9a967655;border-radius:50%}
.wheel-hub{position:absolute;left:50%;top:225px;transform:translate(-50%,-50%);width:160px;height:160px;border:1px solid #89886c55;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#f5eedce8;box-shadow:inset 0 0 0 8px #eee5ce,0 0 0 7px #f5eedc66;color:#656c52}
.wheel-hub span{font-size:7px;letter-spacing:2px}.wheel-hub strong{font:16px/1.15 Bowlby;margin-top:9px}.wheel-hub i{font-style:normal;font-size:26px;line-height:1.3;color:#a33d2e}
.game-card{user-select:none;-webkit-user-select:none;--card:#f6e2a4;left:-182px;top:-182px;width:364px;height:364px;border-radius:50%;border:10px solid #34382f;background:var(--card);outline:2px solid #34382f;outline-offset:4px;box-shadow:6px 9px 0 #34382f,0 18px 25px -17px #333b2980;transition:filter .3s;backface-visibility:visible;transform-origin:center;overflow:hidden}
.game-card:after{content:"";position:absolute;inset:4px;border:1px solid #fff4cc90;border-radius:50%;pointer-events:none}
.game-card.mint{--card:#c4d7b4}.game-card.rose{--card:#e8b7a9}.game-card.blue{--card:#c1d4d6}.game-card.yellow{--card:#edcb6c}
.game-card[data-active="true"]{filter:saturate(1.04)}
.game-card:not([data-active="true"]):hover{filter:brightness(1.08)}
.card-art{position:absolute;inset:0 0 30%;height:auto;border:0;overflow:hidden}
.card-art img{object-position:45% 44%}
.card-top{position:absolute;left:0;top:23px;right:0;height:auto;z-index:2;justify-content:center;border:0;padding:0}
.card-top>span:first-child{display:none}.availability{border-radius:999px;padding:6px 12px;font-size:8px;letter-spacing:1px;background:#f5eedce8;color:#2a2b27;border:1px solid #34382f;box-shadow:0 2px 0 #34382f}
.card-info{position:absolute;bottom:0;left:-1px;right:-1px;height:145px;padding:15px 25px 18px;background:var(--card);border-radius:50% 50% 0 0 / 18% 18% 0 0;border-top:2px solid #34382f;display:flex;flex-direction:column;justify-content:flex-start;text-align:center;gap:9px}
.card-info h2{font-size:22px;letter-spacing:-.8px;margin:0 0 4px}.card-info p{font-size:10px;line-height:1.5}
.card-play{width:44px;height:44px;font-size:29px;box-shadow:2px 3px 0 #34382f;transition:transform .45s var(--roll-ease),background .2s}
.card-play:hover{transform:translateX(4px) rotate(12deg)}.card-bottom{display:none}
.star-left{left:10%;top:375px;font-size:50px}.star-right{right:9%;top:135px;font-size:38px}
.carousel-stage{animation:roll-arrive .9s .1s var(--roll-ease) both}
.carousel-controls{margin:10px auto 0;gap:18px}.carousel-controls>div{min-width:220px}
.round-button{width:54px;height:54px;background:#f5eedc;border:2px solid #34382f;box-shadow:3px 3px 0 #34382f}
.round-button:hover{transform:translateX(4px) rotate(9deg)}
.primary{border-radius:999px;padding:14px 24px;transition:transform .45s var(--roll-ease),box-shadow .45s var(--roll-ease)}
.primary:hover{transform:translateX(5px) rotate(1deg);box-shadow:0 3px 0 #2a2b27}
.text-button{transition:transform .45s var(--roll-ease)}.text-button:hover{transform:translateX(4px)}
.round-button,.close-button{transition:transform .45s var(--roll-ease),background .2s,color .2s}.close-button:hover{transform:rotate(90deg)}
button:active{scale:.96}.play-note{margin-top:23px;margin-bottom:8px}
.perks-banner{margin-top:26px;margin-bottom:26px;border:1px solid #bfb69a;border-radius:999px;background:#e9dfc526;max-width:1200px;padding:28px 36px}
.ticket-icon{display:grid;place-items:center;border:2px solid #ac4331;border-radius:50%;width:68px;height:68px;flex:none;font-size:46px;transform:none}
.perks-banner.rolled-in{animation:roll-arrive .85s var(--roll-ease) both}
.perks-banner.rolled-in .primary{animation:button-arrive .8s .16s var(--roll-ease) both}
dialog{border-radius:32px}.demo-ticket{border-radius:30px}.match-tile{border-radius:50%}
@keyframes roll-arrive{from{opacity:0;transform:translateX(-46px) rotate(-2deg)}to{opacity:1;transform:translateX(0) rotate(0)}}
@keyframes button-arrive{from{opacity:0;translate:-38px 0;rotate:-6deg}to{opacity:1;translate:0 0;rotate:0deg}}
@keyframes stamp-arrive{from{opacity:0;transform:translateX(-90px) rotate(-95deg)}to{opacity:1;transform:translateX(0) rotate(13deg)}}
@media(max-width:1100px){.hero h1{font-size:45px}.wheel-track{width:68vw}.perks-banner{margin-left:28px;margin-right:28px}.game-card{left:-165px;top:-165px;width:330px;height:330px}.card-info{height:137px;padding-top:13px}.card-info h2{font-size:20px}.carousel-stage{height:616px}}
@media(max-width:650px){
 .topbar{padding:12px 18px}.brand-logo{width:174px}.brand-sub{margin-top:0}.topbar .text-button{font-size:11px;padding:10px 14px}
 .hero{padding-top:23px}.hero h1{font-size:clamp(28px,7.7vw,46px)}.hero-stamp{display:none}
 .arcade-rail{margin-top:20px;padding:0 20px;gap:8px}#motion-toggle{min-width:96px;font-size:9px;padding:8px 10px}.rail-count{white-space:nowrap}
 .carousel-stage{height:453px}.carousel{top:166px}.wheel-track{top:166px;width:86vw;height:232px}.wheel-hub{top:122px;width:84px;height:84px;box-shadow:inset 0 0 0 4px #eee5ce}.wheel-hub span{font-size:4px;letter-spacing:.7px}.wheel-hub strong{font-size:9px;margin-top:5px}.wheel-hub i{font-size:18px}.wheel-inner{inset:30px}
 .game-card{width:298px;height:298px;left:-149px;top:-149px;border-width:8px;outline-offset:3px;box-shadow:4px 7px 0 #34382f,0 16px 20px -16px #333b2980}
 .card-info{height:126px;padding:12px 22px 10px;gap:7px}.card-info h2{font-size:19px}.card-info p{font-size:9px}.card-play{width:39px;height:39px;font-size:26px}.card-top{top:17px}.availability{font-size:7px;padding:4px 9px}.card-art{height:auto}.card-art img{object-position:44% 43%}
 .carousel-controls{margin-top:1px;gap:12px}.carousel-controls>div{min-width:190px}.round-button{width:46px;height:46px}.carousel-controls small{font-size:6px;letter-spacing:1.4px}.play-note{margin-top:23px}
 .perks-banner{border-radius:40px;margin:22px 18px;padding:26px 24px}.perks-banner .primary{border-radius:999px}.ticket-icon{display:none}.perks-banner h2{font-size:18px}
 .game-heading{padding:17px 14px}.game-actions{gap:8px}.close-button{width:34px;height:34px}dialog{border-radius:24px}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .primary:hover,.round-button:hover,.text-button:hover,.card-play:hover,.close-button:hover{transform:none}button:active{scale:1}
}

/* Pressure Pop joins the playable wheel with its own original mascot. */
.pressure-art{background:#d8b568 url("games/pressure-pop/assets/pressure-garden.png") center 63%/cover}.pressure-art .pump-card{position:absolute;width:45%;height:85%;object-fit:contain;left:8%;bottom:1%;z-index:2;filter:drop-shadow(3px 3px 0 #39281e22)}.pressure-art .gauge{transform:translateX(37px) scale(.77);z-index:1}.pressure-art .pop-word{z-index:3;right:12%;bottom:9%;color:#fff1ce}

.phone-play-note{text-align:center;color:#5d6159;font-size:11px;line-height:1.6;margin:15px 22px 0}