.onboarding-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:100000;pointer-events:all;opacity:0;transition:opacity 0.5s ease;}.onboarding-overlay.active{opacity:1;}.onboarding-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(2,6,23,0.85);backdrop-filter:blur(4px);transition:opacity 0.4s ease;}.onboarding-overlay.spotlight-mode .onboarding-backdrop{display:none !important;}.onboarding-spotlight{position:absolute;border-radius:12px;background:transparent !important;box-shadow:0 0 0 9999px rgba(2,6,23,0.80),0 0 50px rgba(250,204,21,0.4),inset 0 0 30px rgba(250,204,21,0.15);border:2px solid rgba(250,204,21,0.6);transition:all 0.5s cubic-bezier(0.4,0,0.2,1);z-index:100001;pointer-events:none;}.onboarding-spotlight::before{content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:2px solid rgba(250,204,21,0.3);border-radius:14px;animation:spotlight-pulse 2s ease-in-out infinite;}@keyframes spotlight-pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.02);opacity:0.7;}}.onboarding-card{position:fixed;z-index:100002;width:380px;max-width:90vw;max-height:75vh;background:linear-gradient(165deg,rgba(15,23,42,0.98) 0%,rgba(2,6,23,0.98) 100%);border:1px solid rgba(250,204,21,0.3);border-radius:16px;padding:0;box-shadow:0 25px 80px rgba(0,0,0,0.8),0 0 60px rgba(250,204,21,0.15),inset 0 1px 0 rgba(255,255,255,0.1);overflow:hidden;transform:translateY(20px) scale(0.95);opacity:0;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;}.onboarding-card.visible{transform:translateY(0) scale(1);opacity:1;}.onboarding-card.mobile-centered{transform:translate(-50%,-50%) !important;}.onboarding-card.mobile-centered.visible{transform:translate(-50%,-50%) scale(1) !important;opacity:1;}.onboarding-header{position:relative;padding:20px 22px 16px;background:linear-gradient(135deg,rgba(250,204,21,0.15) 0%,transparent 60%);border-bottom:1px solid rgba(250,204,21,0.1);flex-shrink:0;}.onboarding-header::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#facc15,#f59e0b,#facc15);background-size:200% 100%;animation:gradient-shift 3s ease infinite;}@keyframes gradient-shift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}.onboarding-icon{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,rgba(250,204,21,0.2),rgba(245,158,11,0.1));border:1px solid rgba(250,204,21,0.3);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px;position:relative;overflow:hidden;}.onboarding-icon::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,0.1) 50%,transparent 60%);animation:icon-shine 3s ease-in-out infinite;}@keyframes icon-shine{0%{transform:translateX(-100%) rotate(45deg);}100%{transform:translateX(100%) rotate(45deg);}}.onboarding-title{font-family:'Chakra Petch',sans-serif;font-size:20px;font-weight:700;color:#facc15;margin:0 0 4px 0;text-shadow:0 0 20px rgba(250,204,21,0.3);letter-spacing:0.5px;}.onboarding-subtitle{font-family:'DM Sans',sans-serif;font-size:11px;color:#94a3b8;margin:0;text-transform:uppercase;letter-spacing:2px;}.onboarding-body{padding:16px 22px;flex:1;min-height:0;overflow-y:auto;}.onboarding-body::-webkit-scrollbar{width:4px;}.onboarding-body::-webkit-scrollbar-track{background:transparent;}.onboarding-body::-webkit-scrollbar-thumb{background:rgba(250,204,21,0.3);border-radius:2px;}.onboarding-text{font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.6;color:#e2e8f0;margin:0;}.onboarding-text strong{color:#facc15;font-weight:600;}.onboarding-text .highlight{background:linear-gradient(135deg,rgba(250,204,21,0.2),rgba(250,204,21,0.1));padding:2px 8px;border-radius:4px;color:#fcd34d;}.onboarding-features{display:flex;flex-direction:column;gap:8px;margin-top:12px;}.onboarding-feature{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(250,204,21,0.05);border:1px solid rgba(250,204,21,0.1);border-radius:8px;transition:all 0.3s ease;}.onboarding-feature:hover{background:rgba(250,204,21,0.1);transform:translateX(2px);}.onboarding-feature-icon{width:32px;height:32px;border-radius:6px;background:linear-gradient(135deg,rgba(250,204,21,0.2),transparent);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}.onboarding-feature-text{font-size:12px;color:#cbd5e1;line-height:1.4;}.onboarding-feature-text strong{display:block;color:#f1f5f9;font-size:13px;margin-bottom:1px;}.onboarding-footer{padding:12px 22px 16px;background:rgba(0,0,0,0.2);border-top:1px solid rgba(255,255,255,0.05);flex-shrink:0;}.onboarding-progress{display:flex;justify-content:center;gap:6px;margin-bottom:12px;}.onboarding-dot{width:7px;height:7px;border-radius:50%;background:rgba(148,163,184,0.3);transition:all 0.3s ease;cursor:pointer;}.onboarding-dot:hover{background:rgba(148,163,184,0.5);transform:scale(1.2);}.onboarding-dot.active{width:20px;border-radius:4px;background:linear-gradient(90deg,#facc15,#f59e0b);box-shadow:0 0 8px rgba(250,204,21,0.4);}.onboarding-dot.completed{background:rgba(250,204,21,0.5);}.onboarding-nav{display:flex;gap:10px;}.onboarding-btn{flex:1;padding:11px 16px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.3s ease;border:none;display:flex;align-items:center;justify-content:center;gap:6px;}.onboarding-btn-secondary{background:rgba(148,163,184,0.1);border:1px solid rgba(148,163,184,0.2);color:#94a3b8;}.onboarding-btn-secondary:hover{background:rgba(148,163,184,0.2);color:#e2e8f0;}.onboarding-btn-primary{background:linear-gradient(135deg,#facc15,#f59e0b);color:#0f172a;box-shadow:0 4px 20px rgba(250,204,21,0.3);}.onboarding-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(250,204,21,0.4);}.onboarding-btn-primary:active{transform:translateY(0);}.onboarding-skip{display:block;text-align:center;margin-top:10px;font-size:11px;color:#64748b;cursor:pointer;transition:color 0.2s ease;}.onboarding-skip:hover{color:#94a3b8;}.onboarding-welcome-visual{position:relative;height:120px;background:linear-gradient(135deg,rgba(250,204,21,0.1) 0%,rgba(6,182,212,0.05) 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;margin:-16px -22px 16px -22px;}.onboarding-welcome-visual::before{content:'';position:absolute;width:300px;height:300px;background:radial-gradient(circle,rgba(250,204,21,0.15) 0%,transparent 70%);animation:welcome-glow 4s ease-in-out infinite;}@keyframes welcome-glow{0%,100%{transform:scale(1);opacity:0.5;}50%{transform:scale(1.2);opacity:1;}}.onboarding-logo{position:relative;z-index:1;font-family:'Chakra Petch',sans-serif;font-size:38px;font-weight:900;background:linear-gradient(135deg,#facc15,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 20px rgba(250,204,21,0.4));}.onboarding-logo-sub{font-size:10px;letter-spacing:3px;color:#94a3b8;text-transform:uppercase;margin-top:5px;}.onboarding-fade-in{animation:onboardFadeIn 0.4s ease forwards;}.onboarding-fade-out{animation:onboardFadeOut 0.3s ease forwards;}@keyframes onboardFadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}@keyframes onboardFadeOut{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-10px);}}.onboarding-court-highlight{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;border:3px solid rgba(250,204,21,0.5);border-radius:12px;animation:court-highlight-pulse 1.5s ease-in-out infinite;}@keyframes court-highlight-pulse{0%,100%{box-shadow:0 0 20px rgba(250,204,21,0.3),inset 0 0 20px rgba(250,204,21,0.1);}50%{box-shadow:0 0 40px rgba(250,204,21,0.5),inset 0 0 40px rgba(250,204,21,0.2);}}.onboarding-card[data-position="left"]::after,.onboarding-card[data-position="right"]::after,.onboarding-card[data-position="top"]::after,.onboarding-card[data-position="bottom"]::after{content:'';position:absolute;width:16px;height:16px;background:linear-gradient(135deg,rgba(15,23,42,0.98),rgba(2,6,23,0.98));border:1px solid rgba(250,204,21,0.3);transform:rotate(45deg);}.onboarding-card[data-position="right"]::after{left:-9px;top:50%;margin-top:-8px;border-right:none;border-top:none;}.onboarding-card[data-position="left"]::after{right:-9px;top:50%;margin-top:-8px;border-left:none;border-bottom:none;}.onboarding-card[data-position="bottom"]::after{top:-9px;left:50%;margin-left:-8px;border-bottom:none;border-right:none;}.onboarding-card[data-position="top"]::after{bottom:-9px;left:50%;margin-left:-8px;border-top:none;border-left:none;}.onboarding-confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100003;}.confetti-piece{position:absolute;width:10px;height:10px;background:#facc15;animation:confetti-fall 3s ease-out forwards;}@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0deg);opacity:1;}100%{transform:translateY(100vh) rotate(720deg);opacity:0;}}