/* PROBEGOK V22 — premium motion, sheets and interaction polish */
:root{--ease-premium:cubic-bezier(.22,.86,.24,1);--ease-snap:cubic-bezier(.2,.9,.2,1.12);--motion-fast:160ms;--motion-mid:280ms;--motion-slow:420ms}
html{overscroll-behavior-y:none}body{overscroll-behavior-y:none}.app-shell{transform:translateZ(0)}

/* Interaction language */
button,.choice,.feature-card,.select-car-card,.selector-pill,.listitem,.car-card,.admin-car-card,.header-stat{transition:transform var(--motion-fast) var(--ease-premium),border-color var(--motion-mid) ease,box-shadow var(--motion-mid) ease,background var(--motion-mid) ease,filter var(--motion-mid) ease,opacity var(--motion-mid) ease}
button:not(:disabled):active,.choice:active,.feature-card:active,.select-car-card:active,.selector-pill:active{transform:scale(.976)}
button.press-feedback:not(:disabled){animation:premiumPress .24s var(--ease-premium)}
button:focus-visible,input:focus-visible,select:focus-visible,.choice:focus-visible{outline:2px solid #ffd765b8!important;outline-offset:2px!important}
.field input,.field select,.formstack input,.formstack select,.admin-catalog-tools input,.admin-catalog-tools select,.admin-editor-grid input,.admin-editor-grid select,.admin-image-row input{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;caret-color:#ffd65a}
.field input:focus,.field select:focus,.formstack input:focus,.formstack select:focus,.admin-catalog-tools input:focus,.admin-catalog-tools select:focus,.admin-editor-grid input:focus,.admin-editor-grid select:focus,.admin-image-row input:focus{border-color:#9d7827!important;background:#11161c!important;box-shadow:0 0 0 3px #ffc52b12,0 8px 24px #0005!important;outline:0}
input[type="checkbox"]{accent-color:#eab737}
@media(hover:hover){.menu-grid button:hover,.selector-pill:hover,.feature-card:hover,.select-car-card:hover,.listitem:hover,.car-card:hover,.admin-car-card:hover{transform:translateY(-2px);border-color:#4a515b;box-shadow:0 14px 32px #0007}.primary-gold:hover,.roll-btn.primary-gold:hover{filter:brightness(1.055) saturate(1.04);box-shadow:0 12px 34px #ffad0036}}

/* Page / tab motion */
.screen.active.screen-enter{animation:premiumScreenIn .38s var(--ease-premium) both}.screen-enter .section-head,.screen-enter .profile-card,.screen-enter .duel-create,.screen-enter .roll-center{animation:premiumRise .42s var(--ease-premium) both}.screen-enter .menu-grid>button,.screen-enter .car-grid>.car-card,.screen-enter .market-list>.listitem,.screen-enter .duel-history>*{animation:premiumItemIn .42s var(--ease-premium) both}.screen-enter .menu-grid>*:nth-child(2n),.screen-enter .car-grid>*:nth-child(2n),.screen-enter .market-list>*:nth-child(2n){animation-delay:35ms}.screen-enter .menu-grid>*:nth-child(3n),.screen-enter .car-grid>*:nth-child(3n),.screen-enter .market-list>*:nth-child(3n){animation-delay:65ms}.screen-enter .menu-grid>*:nth-child(4n),.screen-enter .car-grid>*:nth-child(4n),.screen-enter .market-list>*:nth-child(4n){animation-delay:90ms}
.bottom-nav button{transform-origin:center bottom}.bottom-nav button.active:not(.roll-nav){animation:navSettle .32s var(--ease-snap)}.bottom-nav button.active .nav-icon,.bottom-nav button.active>span:first-child{filter:drop-shadow(0 0 8px #ffd55b42)}.bottom-nav .roll-nav .roll-orb{transition:transform .32s var(--ease-snap),box-shadow .32s ease,background .32s ease!important}

/* Roll experience */
.hero-card{transition:border-color .4s ease,box-shadow .4s ease}.car-hero{animation:premiumHeroIn .48s var(--ease-premium) both}.car-hero .v11-car-stage,.car-hero .hero-car-stage{animation:premiumCarStageIn .62s var(--ease-premium) both}.v11-badges,.hero-title h2,.hero-title p,.v11-stats-row,.v11-x-strip,.v11-value{animation:premiumRise .42s var(--ease-premium) both}.hero-title h2{animation-delay:30ms}.hero-title p{animation-delay:55ms}.v11-x-strip{animation-delay:85ms}.v11-stats-row{animation-delay:115ms}.v11-value{animation-delay:145ms}
.primary-gold,.roll-btn.primary-gold{position:relative;overflow:hidden}.primary-gold:after,.roll-btn.primary-gold:after{content:"";position:absolute;top:-80%;bottom:-80%;left:-45%;width:28%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,#fff8,transparent);opacity:.35;animation:goldSweep 4.8s ease-in-out infinite;pointer-events:none}.opening-state{position:relative;animation:premiumFadeIn .28s ease both}.opening-ring{position:relative;border-width:1px!important;background:radial-gradient(circle,#ffc62a10 0 47%,transparent 48%);box-shadow:0 0 70px #ffb0001c,0 0 0 1px #5e4716 inset!important;animation:premiumSpin 1.15s linear infinite!important}.opening-ring:before,.opening-ring:after{content:"";position:absolute;border-radius:50%;inset:10px;border:1px solid #ffda6452;animation:openingPulse 1.5s ease-in-out infinite}.opening-ring:after{inset:25px;border-color:#fff1a62e;animation-delay:.3s}.opening-copy{animation:premiumRise .4s .06s var(--ease-premium) both}
.roll-filter-drawer[open] .four-selectors{animation:drawerOpen .3s var(--ease-premium) both}.roll-filter-drawer summary b{transition:transform .28s var(--ease-premium)!important}

/* Garage and lists */
.car-card .image-wrap img,.admin-car-image img{transition:transform .38s var(--ease-premium),filter .38s ease}.car-card:active .image-wrap img,.admin-car-card:active .admin-car-image img{transform:scale(.985)}
.car-card.selected{animation:selectedPulse .35s var(--ease-premium)}.select-dot,.admin-select{transition:transform .22s var(--ease-snap),background .22s ease,border-color .22s ease}.car-card.selected .select-dot,.admin-select.on{transform:scale(1.06)}
.menu-grid button{overflow:hidden}.menu-grid button:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0,#ffffff08,transparent 42%);opacity:0;transition:opacity .25s ease;pointer-events:none}.menu-grid button:active:before{opacity:1}

/* Premium bottom sheet system. This intentionally overrides all previous sheet animations. */
#modal{display:block!important;z-index:130;pointer-events:none;visibility:visible;opacity:1}#modal.hidden{display:none!important}#modal:not(.hidden){pointer-events:auto}
#modal .backdrop{background:rgba(0,0,0,.68)!important;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);opacity:0;transition:opacity .3s ease,backdrop-filter .36s ease;-webkit-transition:opacity .3s ease,-webkit-backdrop-filter .36s ease}
#modal .sheet{animation:none!important;left:50%!important;bottom:0!important;top:auto;transform:translate(-50%,calc(100% + 42px)) scale(.985)!important;transform-origin:50% 100%;opacity:.82;width:min(100%,590px)!important;max-height:min(92dvh,calc(100dvh - max(12px,env(safe-area-inset-top))))!important;border:1px solid #3b424b!important;border-bottom:0!important;border-radius:28px 28px 0 0!important;background:linear-gradient(180deg,#151a20 0,#0c1014 16%,#07090c 100%)!important;box-shadow:0 -30px 90px #000d,0 -1px 0 #ffffff08 inset!important;padding:13px 14px max(22px,calc(16px + env(safe-area-inset-bottom)))!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transition:transform .32s var(--ease-premium),opacity .24s ease,box-shadow .32s ease!important;will-change:transform,opacity;touch-action:pan-y}
#modal .sheet:before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,#ffffff24,#ffd86644,#ffffff24,transparent);pointer-events:none}
#modal.is-open .backdrop{opacity:var(--backdrop-alpha,1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#modal.is-open .sheet{transform:translate(-50%,var(--sheet-drag,0px)) scale(var(--sheet-scale,1))!important;opacity:1}
#modal.is-closing .backdrop{opacity:0!important;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
#modal.is-closing .sheet{transform:translate(-50%,calc(100% + 48px)) scale(.985)!important;opacity:.68}
#modal .sheet.dragging{transition:none!important}.sheet.sheet-swap{animation:sheetSwap .26s var(--ease-premium)!important}
#modalBody.modal-content-enter{animation:modalContentIn .3s var(--ease-premium) both}
.sheet-grabber{position:sticky!important;z-index:25;top:0!important;width:48px!important;height:5px!important;margin:-4px auto 8px!important;border-radius:999px!important;background:linear-gradient(90deg,#515862,#a1a7ae,#515862)!important;box-shadow:0 3px 13px #0008;cursor:grab}.sheet.dragging .sheet-grabber{cursor:grabbing;background:linear-gradient(90deg,#7a632a,#ffd45e,#7a632a)!important}
.sheet-close{position:sticky!important;z-index:30!important;top:7px!important;float:right!important;margin:-2px 0 -32px auto!important;width:38px!important;height:38px!important;display:grid!important;place-items:center!important;border-radius:50%!important;border:1px solid #3a424b!important;background:#11161bdc!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#bdc3ca!important;font-size:22px!important;box-shadow:0 8px 22px #0006!important;transition:transform .18s var(--ease-snap),background .18s ease,color .18s ease,border-color .18s ease!important}.sheet-close:active{transform:scale(.9)!important;background:#272e35!important;color:#fff!important}.sheet h2{padding-right:42px}
body.modal-open .content,body.modal-open .bottom-nav,body.modal-open .topbar{filter:saturate(.86) brightness(.78);transition:filter .3s ease!important}

/* Special full-height sheets keep premium motion without inheriting odd old transforms. */
#modal .tutorial-sheet{height:100dvh!important;max-height:100dvh!important;width:100%!important;max-width:720px!important;border-radius:0!important;padding:0!important}
#modal .admin-catalog-sheet,#modal .admin-editor-sheet{max-height:min(96dvh,calc(100dvh - max(8px,env(safe-area-inset-top))))!important}

/* Confirm dialog */
#dialog{display:block!important;z-index:180;pointer-events:none}#dialog.hidden{display:none!important}#dialog:not(.hidden){pointer-events:auto}
#dialog .dialog-backdrop{opacity:0;background:#000b!important;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:opacity .22s ease,backdrop-filter .24s ease}
#dialog .dialog-card{animation:none!important;transform:translate(-50%,-46%) scale(.92)!important;opacity:0;border:1px solid #424a54!important;background:linear-gradient(180deg,#191f26,#0c1015)!important;box-shadow:0 34px 100px #000e,0 1px 0 #ffffff0c inset!important;transition:transform .24s var(--ease-premium),opacity .2s ease!important}
#dialog.is-open .dialog-backdrop{opacity:1;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}#dialog.is-open .dialog-card{transform:translate(-50%,-50%) scale(1)!important;opacity:1}#dialog.is-closing .dialog-backdrop{opacity:0}#dialog.is-closing .dialog-card{transform:translate(-50%,-47%) scale(.95)!important;opacity:0}
.dialog-icon{animation:dialogIconIn .42s .04s var(--ease-snap) both}.dialog-actions button{transition:transform .16s var(--ease-snap),filter .2s ease,border-color .2s ease}.dialog-actions .confirm.danger{border-color:#a64853!important;background:linear-gradient(135deg,#ff808c,#e03d4c)!important;color:#21070a!important}

/* Toast: clean entrance/exit with a timing bar. */
.toast{overflow:hidden!important;transform:translate(-50%,18px) scale(.96)!important;opacity:0!important;border-color:#3c444e!important;background:#151a20f2!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform .3s var(--ease-premium),opacity .22s ease!important}.toast.show{opacity:1!important;transform:translate(-50%,0) scale(1)!important}.toast.show:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,#ffc62f,#fff0a0);transform-origin:left;animation:toastTimer 3s linear both}

/* Secret cards keep their animation premium rather than noisy. */
.secret-garage-card{transition:transform .24s var(--ease-premium),box-shadow .35s ease,border-color .35s ease!important}.secret-garage-card .secret-card-shine{animation-duration:6.2s!important}.secret-garage-card:active{transform:scale(.987)!important}

/* Admin manager */
.admin-catalog-grid .admin-car-card{animation:premiumItemIn .34s var(--ease-premium) both}.admin-catalog-grid .admin-car-card:nth-child(2n){animation-delay:24ms}.admin-catalog-tools{transition:box-shadow .25s ease}.admin-catalog-tools:focus-within{box-shadow:0 14px 30px #0008}.admin-live-garage-card{animation:previewSettle .35s var(--ease-premium) both}

/* Keyframes */
@keyframes premiumScreenIn{from{opacity:0;transform:translateY(8px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes premiumRise{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
@keyframes premiumItemIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes premiumHeroIn{from{opacity:.2;transform:scale(.992)}to{opacity:1;transform:none}}
@keyframes premiumCarStageIn{from{opacity:0;transform:translateY(12px) scale(.94);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes premiumFadeIn{from{opacity:0}to{opacity:1}}
@keyframes premiumPress{0%{filter:brightness(1)}45%{filter:brightness(1.12)}100%{filter:brightness(1)}}
@keyframes navSettle{0%{transform:translateY(2px) scale(.94)}65%{transform:translateY(-1px) scale(1.045)}100%{transform:none}}
@keyframes goldSweep{0%,60%{left:-45%;opacity:0}67%{opacity:.34}83%{left:125%;opacity:0}100%{left:125%;opacity:0}}
@keyframes premiumSpin{to{transform:rotate(360deg)}}
@keyframes openingPulse{0%,100%{transform:scale(.9);opacity:.32}50%{transform:scale(1.05);opacity:.85}}
@keyframes drawerOpen{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@keyframes selectedPulse{0%{filter:brightness(1)}45%{filter:brightness(1.12)}100%{filter:brightness(1)}}
@keyframes sheetSwap{0%{filter:brightness(.94);transform:translate(-50%,5px) scale(.995)}100%{filter:none;transform:translate(-50%,0) scale(1)}}
@keyframes modalContentIn{from{opacity:0;transform:translateY(8px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes dialogIconIn{from{opacity:0;transform:scale(.65) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes toastTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes previewSettle{from{opacity:.35;transform:scale(.98)}to{opacity:1;transform:none}}

/* Honor both the in-game switch and OS accessibility preference. */
.no-animations #modal .sheet,.no-animations #modal .backdrop,.no-animations #dialog .dialog-card,.no-animations #dialog .dialog-backdrop{transition-duration:.01ms!important}.no-animations .primary-gold:after,.no-animations .roll-btn.primary-gold:after{display:none!important}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.primary-gold:after,.roll-btn.primary-gold:after{display:none!important}}

/* Reveal, wheel, duel and task motion polish */
.reveal-overlay:not(.hidden){animation:premiumOverlayIn .28s ease both}.reveal-overlay:not(.hidden) .reveal-card{animation:revealCardPremiumIn .5s var(--ease-premium) both}.reveal-overlay .reveal-progress i{transition:width .24s var(--ease-premium),background .22s ease,box-shadow .22s ease,transform .22s var(--ease-snap)!important}.reveal-overlay .reveal-progress i.active{transform:scaleY(1.35)}
.drop-fx{will-change:opacity,filter}.drop-sweep{animation-timing-function:var(--ease-premium)!important}.drop-ring{will-change:transform,opacity}
.wheel-wrap{transition:filter .3s ease}.wheel-wrap.is-spinning{filter:drop-shadow(0 0 18px #ffbf2833)}.wheel-wrap.is-spinning .wheel-pointer{animation:pointerTick .16s ease-in-out infinite alternate}.wheel-wrap.is-spinning .wheel-hub{animation:hubPulse .72s ease-in-out infinite}.wheel{will-change:transform}.wheelResult .notice,.cooldown-card,#wheelResult>.notice{animation:premiumRise .35s var(--ease-premium) both}
.duel-final:not(.hidden){animation:duelResultIn .42s var(--ease-snap) both}.coin-label{animation:premiumRise .3s var(--ease-premium) both}.duel-cube{will-change:transform}.daily-progress i{transition:width .6s var(--ease-premium)!important}.daily-task.done .daily-task-icon{animation:taskDone .5s var(--ease-snap)}
.premium-topbar{animation:topbarDrop .45s var(--ease-premium) both}.premium-nav{animation:navRise .45s .06s var(--ease-premium) both}
@keyframes premiumOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes revealCardPremiumIn{from{opacity:0;transform:translateY(16px) scale(.94);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes pointerTick{from{transform:translateX(-50%) rotate(-4deg)}to{transform:translateX(-50%) rotate(4deg)}}
@keyframes hubPulse{50%{transform:scale(1.045);box-shadow:0 0 32px #ffc02e38}}
@keyframes duelResultIn{0%{opacity:0;transform:translateY(10px) scale(.96)}65%{transform:translateY(-2px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes taskDone{0%{transform:scale(.86)}65%{transform:scale(1.1)}100%{transform:none}}
@keyframes topbarDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes navRise{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* Toggle controls: previous generic .formstack input width rule also hit checkboxes. */
.choice{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important}.choice>span:first-child{min-width:0}.choice b{overflow-wrap:normal!important;word-break:normal!important}.choice small{line-height:1.25}
.choice input[type="checkbox"],.formstack .choice input[type="checkbox"],.admin-editor-flags input[type="checkbox"]{appearance:none!important;-webkit-appearance:none!important;position:relative!important;width:44px!important;min-width:44px!important;height:25px!important;padding:0!important;margin:0!important;border-radius:999px!important;border:1px solid #414a54!important;background:#171c22!important;box-shadow:inset 0 2px 6px #0008!important;cursor:pointer;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease!important}
.choice input[type="checkbox"]:before,.formstack .choice input[type="checkbox"]:before,.admin-editor-flags input[type="checkbox"]:before{content:"";position:absolute;width:19px;height:19px;left:2px;top:2px;border-radius:50%;background:linear-gradient(180deg,#d4d9df,#8f969e);box-shadow:0 2px 6px #0008;transition:transform .24s var(--ease-snap),background .22s ease!important}
.choice input[type="checkbox"]:checked,.formstack .choice input[type="checkbox"]:checked,.admin-editor-flags input[type="checkbox"]:checked{background:linear-gradient(135deg,#ffd95b,#e79c0c)!important;border-color:#f4c13d!important;box-shadow:0 0 14px #ffc52b24,inset 0 1px 0 #fff6!important}
.choice input[type="checkbox"]:checked:before,.formstack .choice input[type="checkbox"]:checked:before,.admin-editor-flags input[type="checkbox"]:checked:before{transform:translateX(19px);background:#15191e}

/* Sheet content staging */
.modal-content-enter>.notice,.modal-content-enter>.panel,.modal-content-enter>.formstack,.modal-content-enter>.daily-head,.modal-content-enter>.daily-list,.modal-content-enter>.wheel-wrap{animation:premiumRise .32s var(--ease-premium) both}.modal-content-enter .formstack>.choice,.modal-content-enter .formstack>.field,.modal-content-enter .formstack>.primary-gold,.modal-content-enter .daily-list>.daily-task{animation:premiumItemIn .32s var(--ease-premium) both}.modal-content-enter .formstack>*:nth-child(2),.modal-content-enter .daily-list>*:nth-child(2){animation-delay:24ms}.modal-content-enter .formstack>*:nth-child(3),.modal-content-enter .daily-list>*:nth-child(3){animation-delay:44ms}.modal-content-enter .formstack>*:nth-child(4),.modal-content-enter .daily-list>*:nth-child(4){animation-delay:64ms}.modal-content-enter .formstack>*:nth-child(5),.modal-content-enter .daily-list>*:nth-child(5){animation-delay:84ms}.modal-content-enter .market-list>.listitem:nth-child(-n+8){animation:premiumItemIn .3s var(--ease-premium) both}