/* CASINOLOJI CLUB — Visual Stage 3 / motion + reward moments */
:root{
  --s3-ease:cubic-bezier(.2,.82,.22,1);
  --s3-spring:cubic-bezier(.16,1.15,.3,1);
  --s3-fast:180ms;
  --s3-normal:360ms;
  --s3-slow:720ms;
}

/* Global interaction polish */
.club-btn,.notification-button,.club-bottom-nav a,.club-desktop-nav a,.market-card button,.season-stop button,.reaction-row button,.person-actions button,.stage2-podium-card,.leaderboard-row{
  -webkit-tap-highlight-color:transparent;
}
.club-btn,.market-card button,.season-stop button,.person-actions button,.reaction-row button,.stage2-podium-card{
  transition:transform var(--s3-fast) var(--s3-ease),box-shadow var(--s3-fast) var(--s3-ease),border-color var(--s3-fast) ease,filter var(--s3-fast) ease;
}
.club-btn:active,.market-card button:active,.season-stop button:active,.person-actions button:active,.reaction-row button:active,.stage2-podium-card:active{transform:scale(.965)}
.club-btn--primary:hover,.market-card:not(.locked) button:hover,.season-stop button:hover{filter:brightness(1.08);box-shadow:0 10px 30px var(--club-rank-soft)}
.club-progress>i,.mission-bar>i{transition:width .72s var(--s3-ease)}

/* Page entrance: calm on desktop, faster on mobile */
.club-page>section,.club-page>.stage2-dashboard-grid,.club-page>.stage2-community-grid,.club-page>.stage2-league-layout,.club-page>.stage2-mission-layout,.club-page>.stage2-market-bottom-grid,.club-page>.stage2-passport-grid{
  animation:s3PageEnter .48s var(--s3-ease) both;
}
.club-page>section:nth-child(2),.club-page>.stage2-dashboard-grid,.club-page>.stage2-community-grid,.club-page>.stage2-league-layout,.club-page>.stage2-mission-layout,.club-page>.stage2-market-bottom-grid,.club-page>.stage2-passport-grid{animation-delay:.05s}
@keyframes s3PageEnter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Level-up: final cinematic pass */
.level-up-modal{background:rgba(1,7,8,.82);backdrop-filter:blur(18px) saturate(1.1)}
.level-up-card{isolation:isolate;width:min(470px,calc(100vw - 24px));padding:38px 28px 27px;border-radius:32px;background:
  radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--level-accent) 30%,transparent),transparent 42%),
  radial-gradient(circle at 15% 85%,color-mix(in srgb,var(--level-color) 13%,transparent),transparent 34%),
  linear-gradient(165deg,#0b1720 0%,#071118 62%,#050b10 100%);
  box-shadow:0 45px 140px rgba(0,0,0,.7),0 0 100px color-mix(in srgb,var(--level-color) 17%,transparent),inset 0 1px 0 rgba(255,255,255,.055)
}
.level-up-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(145deg,color-mix(in srgb,var(--level-accent) 75%,transparent),transparent 35%,color-mix(in srgb,var(--level-color) 42%,transparent));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.level-up-modal.show .level-up-card{animation:s3LevelCard .82s var(--s3-spring) both}
.level-up-modal.show .level-up-kicker{animation:s3Kicker .5s .23s var(--s3-ease) both}
.level-up-modal.show .level-up-icon{animation:s3IconLand .86s .18s var(--s3-spring) both,s3IconFloat 2.8s 1.2s ease-in-out infinite}
.level-up-modal.show .level-up-number{animation:s3Number .66s .34s var(--s3-spring) both}
.level-up-modal.show .level-up-card h2,.level-up-modal.show .level-up-card>p{animation:s3TextRise .45s .48s var(--s3-ease) both}
.level-up-modal.show .level-up-rewards span{opacity:0;animation:s3RewardChip .55s var(--s3-spring) forwards}
.level-up-modal.show .level-up-rewards span:nth-child(1){animation-delay:.58s}.level-up-modal.show .level-up-rewards span:nth-child(2){animation-delay:.68s}.level-up-modal.show .level-up-rewards span:nth-child(3){animation-delay:.78s}.level-up-modal.show .level-up-rewards span:nth-child(4){animation-delay:.88s}
.level-up-modal.show #levelUpContinue{animation:s3TextRise .45s .8s var(--s3-ease) both}
.level-up-icon{width:96px;height:96px;border-radius:30px;box-shadow:0 0 0 8px color-mix(in srgb,var(--level-color) 9%,transparent),0 22px 70px color-mix(in srgb,var(--level-color) 34%,transparent)}
.level-up-number{font-size:82px}
.level-up-card.is-segment-upgrade{width:min(520px,calc(100vw - 20px));background:
 radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--level-accent) 37%,transparent),transparent 36%),
 radial-gradient(circle at 50% 78%,color-mix(in srgb,var(--level-color) 15%,transparent),transparent 35%),
 linear-gradient(155deg,#0c1720,#050a0f 72%)}
.level-up-card.is-segment-upgrade .level-up-kicker{box-shadow:0 0 30px color-mix(in srgb,var(--level-color) 22%,transparent)}
.level-up-card.is-segment-upgrade .level-up-icon{width:116px;height:116px;border-radius:36px}
.level-up-card.is-segment-upgrade .level-up-number{font-size:92px;text-shadow:0 0 45px color-mix(in srgb,var(--level-color) 50%,transparent)}
.level-up-card.is-segment-upgrade:after{content:"SEGMENT UPGRADE";position:absolute;left:0;right:0;bottom:106px;color:rgba(255,255,255,.025);font-size:42px;font-weight:1000;letter-spacing:-.05em;white-space:nowrap;transform:rotate(-7deg);pointer-events:none;z-index:-1}
@keyframes s3LevelCard{0%{opacity:0;transform:translateY(55px) scale(.72);filter:blur(8px)}55%{opacity:1;transform:translateY(-5px) scale(1.035);filter:none}100%{transform:none}}
@keyframes s3Kicker{from{opacity:0;transform:translateY(-8px) scale(.9)}to{opacity:1;transform:none}}
@keyframes s3IconLand{0%{opacity:0;transform:translateY(-34px) scale(.45) rotate(-16deg)}70%{opacity:1;transform:translateY(4px) scale(1.08) rotate(3deg)}100%{transform:none}}
@keyframes s3IconFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes s3Number{from{opacity:0;transform:scale(.55);letter-spacing:.05em}to{opacity:1;transform:none}}
@keyframes s3TextRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes s3RewardChip{0%{opacity:0;transform:translateY(14px) scale(.88)}65%{opacity:1;transform:translateY(-2px) scale(1.035)}100%{opacity:1;transform:none}}

/* Lightweight CSS particle field inserted by JS */
.club-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:20}
.club-particle{--x:0px;--y:-180px;--r:180deg;position:absolute;left:50%;top:48%;width:7px;height:12px;border-radius:2px;background:var(--particle,color-mix(in srgb,var(--level-accent,#fff) 90%,#fff));box-shadow:0 0 12px color-mix(in srgb,var(--particle,#fff) 55%,transparent);opacity:0;animation:s3Particle 1.15s var(--s3-ease) forwards}
.club-particle.round{width:8px;height:8px;border-radius:50%}.club-particle.diamond{width:8px;height:8px;transform:rotate(45deg)}
@keyframes s3Particle{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}12%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(.72)}}

/* Unified celebration modal: achievements, league results, reward reveal */
.club-celebration-modal{position:fixed;inset:0;z-index:78;display:grid;place-items:center;padding:14px;background:rgba(1,6,9,.82);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .24s ease}
.club-celebration-modal.show{opacity:1;pointer-events:auto}
.club-celebration-card{--celebrate:#63dbae;--celebrate-accent:#a8f0d2;position:relative;isolation:isolate;width:min(440px,100%);overflow:hidden;padding:32px 24px 24px;border:1px solid color-mix(in srgb,var(--celebrate) 40%,transparent);border-radius:30px;background:radial-gradient(circle at 50% -8%,color-mix(in srgb,var(--celebrate) 25%,transparent),transparent 40%),linear-gradient(160deg,#0a1720,#061018 68%);box-shadow:0 42px 130px rgba(0,0,0,.66),0 0 80px color-mix(in srgb,var(--celebrate) 14%,transparent);text-align:center;transform:translateY(28px) scale(.86)}
.club-celebration-modal.show .club-celebration-card{animation:s3CelebrateCard .7s var(--s3-spring) forwards}
.club-celebration-card:before{content:"";position:absolute;inset:-55%;z-index:-2;background:repeating-conic-gradient(from 20deg,color-mix(in srgb,var(--celebrate-accent) 10%,transparent) 0 5deg,transparent 5deg 18deg);animation:s3SlowSpin 18s linear infinite}
.club-celebration-card:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at center,color-mix(in srgb,var(--celebrate) 7%,transparent),transparent 56%)}
.club-celebration-kicker{display:inline-flex;padding:7px 11px;border:1px solid color-mix(in srgb,var(--celebrate) 34%,transparent);border-radius:999px;color:var(--celebrate-accent);font-size:9px;font-weight:1000;letter-spacing:.18em}
.club-celebration-icon{display:grid;place-items:center;width:88px;height:88px;margin:20px auto 12px;border-radius:28px;background:linear-gradient(145deg,var(--celebrate-accent),var(--celebrate));color:#05130f;font-size:35px;font-weight:1000;box-shadow:0 18px 55px color-mix(in srgb,var(--celebrate) 28%,transparent),0 0 0 8px color-mix(in srgb,var(--celebrate) 8%,transparent)}
.club-celebration-card h2{margin:0;font-size:27px;letter-spacing:-.035em}.club-celebration-card>p{max-width:340px;margin:8px auto 0;color:#9bb0b8;font-size:11px;line-height:1.6}
.club-celebration-rewards{display:grid;gap:7px;margin-top:18px}.club-celebration-rewards span{padding:10px;border:1px solid color-mix(in srgb,var(--celebrate) 24%,transparent);border-radius:12px;background:color-mix(in srgb,var(--celebrate) 7%,transparent);color:#e7f7f1;font-size:11px;font-weight:850;opacity:0}.club-celebration-modal.show .club-celebration-rewards span{animation:s3RewardChip .52s .36s var(--s3-spring) forwards}.club-celebration-modal.show .club-celebration-rewards span:nth-child(2){animation-delay:.46s}.club-celebration-modal.show .club-celebration-rewards span:nth-child(3){animation-delay:.56s}.club-celebration-modal.show .club-celebration-rewards span:nth-child(4){animation-delay:.66s}
.club-celebration-action{width:100%;margin-top:18px;padding:13px;border:0;border-radius:13px;background:linear-gradient(90deg,var(--celebrate),var(--celebrate-accent));color:#03120e;font-weight:1000;letter-spacing:.06em;cursor:pointer;box-shadow:0 13px 34px color-mix(in srgb,var(--celebrate) 15%,transparent)}
.club-celebration-card[data-kind="achievement"] .club-celebration-icon:before{content:"◆"}.club-celebration-card[data-kind="league-up"] .club-celebration-icon:before{content:"↑"}.club-celebration-card[data-kind="league-down"] .club-celebration-icon:before{content:"↓"}.club-celebration-card[data-kind="league-stay"] .club-celebration-icon:before{content:"#"}.club-celebration-card[data-kind="reward"] .club-celebration-icon:before{content:"★"}.club-celebration-card[data-kind="vip"] .club-celebration-icon:before{content:"VIP";font-size:20px}
.club-celebration-card[data-kind="league-down"]{--celebrate:#d77d74;--celebrate-accent:#f1aaa3}.club-celebration-card[data-kind="league-stay"]{--celebrate:#7992a4;--celebrate-accent:#b8c9d5}
@keyframes s3CelebrateCard{0%{opacity:0;transform:translateY(36px) scale(.78);filter:blur(7px)}62%{opacity:1;transform:translateY(-4px) scale(1.025);filter:none}100%{transform:none}}
@keyframes s3SlowSpin{to{transform:rotate(360deg)}}

/* Rank motion feedback */
.club-rank-motion{position:fixed;z-index:61;right:16px;top:76px;display:flex;align-items:center;gap:10px;max-width:min(350px,calc(100vw - 24px));padding:10px 13px;border:1px solid var(--club-rank-border);border-radius:14px;background:rgba(7,18,25,.95);box-shadow:0 18px 50px rgba(0,0,0,.38);backdrop-filter:blur(16px);opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none}
.club-rank-motion.show{animation:s3RankToast 3.4s var(--s3-ease) both}.club-rank-motion b{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:var(--club-rank-soft);color:var(--club-rank-accent);font-size:15px}.club-rank-motion strong{display:block;font-size:11px}.club-rank-motion small{display:block;margin-top:2px;color:var(--club-muted);font-size:9px}
.club-rank-motion.down{border-color:rgba(215,125,116,.3)}.club-rank-motion.down b{background:rgba(215,125,116,.1);color:#eea69f}
@keyframes s3RankToast{0%{opacity:0;transform:translateY(-8px) scale(.96)}10%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px) scale(.98)}}
.leaderboard-row.rank-rise{animation:s3RankRise 1.05s var(--s3-spring)}.leaderboard-row.rank-fall{animation:s3RankFall .9s var(--s3-ease)}
@keyframes s3RankRise{0%{transform:translateY(15px);box-shadow:inset 4px 0 0 #65df9c}55%{transform:translateY(-3px);background:rgba(101,223,156,.11)}100%{transform:none}}
@keyframes s3RankFall{0%{transform:translateY(-10px)}45%{background:rgba(215,125,116,.08)}100%{transform:none}}

/* Achievement cards and newly revealed state */
.achievement-card.just-unlocked,.achievement-chip.just-unlocked{animation:s3AchievementPulse 1.2s var(--s3-spring);box-shadow:0 0 0 1px var(--club-rank-border),0 0 32px var(--club-rank-soft)}
@keyframes s3AchievementPulse{0%{transform:scale(.92);filter:brightness(.75)}55%{transform:scale(1.035);filter:brightness(1.18)}100%{transform:none;filter:none}}

/* Purchase + season reward success treatment */
.purchase-sheet.is-processing{pointer-events:none}.purchase-sheet.is-processing:after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(6,15,21,.58);backdrop-filter:blur(3px)}
.purchase-sheet.is-processing:before{content:"";position:absolute;z-index:4;left:calc(50% - 16px);top:calc(50% - 16px);width:32px;height:32px;border:3px solid rgba(255,255,255,.14);border-top-color:var(--club-rank-accent);border-radius:50%;animation:s3Spinner .72s linear infinite}
@keyframes s3Spinner{to{transform:rotate(360deg)}}
.market-card.purchase-success{animation:s3PurchaseSuccess 1.05s var(--s3-spring)}
@keyframes s3PurchaseSuccess{0%{transform:scale(.96)}45%{transform:scale(1.025);box-shadow:0 0 0 1px var(--club-rank-border),0 0 40px var(--club-rank-soft)}100%{transform:none}}

/* Toast gets semantic feedback classes */
.club-toast{border:1px solid var(--club-rank-border);background:rgba(7,18,25,.96);backdrop-filter:blur(14px)}
.club-toast.success{box-shadow:0 15px 45px rgba(0,0,0,.35),0 0 30px var(--club-rank-soft)}.club-toast.error{border-color:rgba(228,135,120,.35)}

/* Drawer/modal body lock */
body.club-modal-open{overflow:hidden;touch-action:none}

/* Mobile deliberately uses shorter travel distances and bottom-aligned celebrations */
@media(max-width:620px){
  .level-up-modal{padding:8px;align-items:end}.level-up-card{width:100%;border-radius:28px 28px 18px 18px;padding:29px 18px calc(18px + env(safe-area-inset-bottom))}.level-up-card.is-segment-upgrade{width:100%}.level-up-icon{width:82px;height:82px;border-radius:25px}.level-up-card.is-segment-upgrade .level-up-icon{width:96px;height:96px;border-radius:29px}.level-up-number{font-size:68px}.level-up-card.is-segment-upgrade .level-up-number{font-size:76px}.level-up-card.is-segment-upgrade:after{font-size:30px;bottom:100px}
  .club-celebration-modal{place-items:end center;padding:7px}.club-celebration-card{width:100%;padding:27px 18px calc(17px + env(safe-area-inset-bottom));border-radius:28px 28px 17px 17px}.club-celebration-icon{width:76px;height:76px;border-radius:23px}.club-celebration-card h2{font-size:24px}.club-rank-motion{left:10px;right:10px;top:68px;max-width:none}
  .club-page>section,.club-page>.stage2-dashboard-grid,.club-page>.stage2-community-grid,.club-page>.stage2-league-layout,.club-page>.stage2-mission-layout,.club-page>.stage2-market-bottom-grid,.club-page>.stage2-passport-grid{animation-duration:.32s}
}

@media(prefers-reduced-motion:reduce){
  .club-page>section,.club-page>.stage2-dashboard-grid,.club-page>.stage2-community-grid,.club-page>.stage2-league-layout,.club-page>.stage2-mission-layout,.club-page>.stage2-market-bottom-grid,.club-page>.stage2-passport-grid,.level-up-modal.show .level-up-card,.level-up-modal.show .level-up-kicker,.level-up-modal.show .level-up-icon,.level-up-modal.show .level-up-number,.level-up-modal.show .level-up-card h2,.level-up-modal.show .level-up-card>p,.level-up-modal.show .level-up-rewards span,.level-up-modal.show #levelUpContinue,.club-celebration-modal.show .club-celebration-card,.club-celebration-modal.show .club-celebration-rewards span,.club-particle,.leaderboard-row.rank-rise,.leaderboard-row.rank-fall,.achievement-card.just-unlocked,.achievement-chip.just-unlocked,.club-rank-motion.show{animation:none!important;transition:none!important}
  .level-up-modal.show .level-up-card,.club-celebration-modal.show .club-celebration-card{transform:none;opacity:1}.level-up-rewards span,.club-celebration-rewards span{opacity:1!important}
}