﻿ .NuPalz-tutorial-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100000;pointer-events:none;opacity:0;transition:opacity .5s ease}.NuPalz-tutorial-overlay.active{opacity:1;pointer-events:auto}.NuPalz-tutorial-overlay.hiding{opacity:0;pointer-events:none}.tutorial-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:transparent;pointer-events:auto;transition:background .6s ease-out}.NuPalz-tutorial-overlay.no-spotlight .tutorial-backdrop{background:rgba(5,5,20,0.92)}.tutorial-spotlight{position:absolute;border-radius:16px;box-shadow:0 0 0 9999px rgba(5,5,20,0.92),0 0 40px rgba(255,107,157,0.4),0 0 80px rgba(196,77,255,0.3),inset 0 0 30px rgba(255,255,255,0.1);transition:opacity .4s ease-out,left .4s ease-out,top .4s ease-out,width .4s ease-out,height .4s ease-out,transform .4s ease-out;pointer-events:none;z-index:1}.NuPalz-tutorial-overlay.no-spotlight .tutorial-spotlight{opacity:0 !important}.NuPalz-tutorial-overlay.no-darken .tutorial-spotlight{box-shadow:0 0 40px rgba(255,107,157,0.5),0 0 80px rgba(196,77,255,0.4),inset 0 0 30px rgba(255,255,255,0.15);background:rgba(255,107,157,0.08);transition:left .25s ease-out,top .25s ease-out,width .25s ease-out,height .25s ease-out,opacity .25s ease-out}.NuPalz-tutorial-overlay.no-darken .tutorial-tooltip{transition:left .25s ease-out,top .25s ease-out,opacity .3s ease}.tutorial-spotlight::before{content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border-radius:20px;border:2px solid rgba(255,107,157,0.6);animation:spotlightPulse 2s ease-in-out infinite}.tutorial-spotlight[style*="pointer-events: auto"]{cursor:pointer}.tutorial-spotlight[style*="pointer-events: auto"]::before{border-color:rgba(74,222,128,0.8);animation:spotlightClickable 1s ease-in-out infinite}@keyframes spotlightClickable{0%,100%{transform:scale(1);border-color:rgba(74,222,128,0.8)}50%{transform:scale(1.03);border-color:rgba(74,222,128,1)}}@keyframes spotlightPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.02)}}.tutorial-tooltip{position:absolute;width:320px;max-width:calc(100vw - 40px);z-index:2;transition:all .4s cubic-bezier(0.4,0,0.2,1);filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5))}.tutorial-tooltip.transitioning{opacity:0;transform:scale(0.95) !important}.tutorial-tooltip.center{transform:translate(-50%,-50%) !important}.tutorial-tooltip-content{background:linear-gradient(145deg,rgba(30,30,60,0.98) 0,rgba(20,20,45,0.98) 100%);border:1px solid rgba(255,107,157,0.3);border-radius:20px;padding:1.5rem;backdrop-filter:blur(20px);position:relative;overflow:hidden}.tutorial-tooltip-content::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#ff6b9d 0,#c44dff 50%,#00d4ff 100%);border-radius:20px 20px 0 0}.tutorial-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.tutorial-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(255,107,157,0.2) 0,rgba(196,77,255,0.2) 100%);display:flex;align-items:center;justify-content:center;color:#ff6b9d;font-size:1.4rem;border:1px solid rgba(255,107,157,0.3);animation:iconFloat 3s ease-in-out infinite}@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}.tutorial-progress{background:rgba(255,255,255,0.08);padding:.4rem .8rem;border-radius:20px;font-size:.85rem;color:rgba(255,255,255,0.7);font-weight:600}.tutorial-step-num{color:#ff6b9d}.tutorial-title{font-family:'Fredoka','Nunito',sans-serif;font-size:1.35rem;font-weight:700;color:#fff;margin-bottom:.6rem;background:linear-gradient(135deg,#fff 0,#e0e0ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tutorial-description{font-size:.95rem;line-height:1.6;color:rgba(255,255,255,0.85);margin-bottom:.75rem}.tutorial-action-hint{background:linear-gradient(135deg,rgba(74,222,128,0.15) 0,rgba(34,197,94,0.1) 100%);border:1px solid rgba(74,222,128,0.4);border-radius:10px;padding:.6rem 1rem;margin-bottom:1rem;color:#4ade80;font-weight:600;font-size:.9rem;text-align:center;animation:pulseHint 1.5s ease-in-out infinite}@keyframes pulseHint{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,0.4)}50%{box-shadow:0 0 0 8px rgba(74,222,128,0)}}.tutorial-buttons{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.tutorial-nav{display:flex;gap:.5rem}.tutorial-btn{padding:.65rem 1.1rem;border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;gap:.4rem;border:0;font-family:'Nunito',sans-serif}.tutorial-btn i{font-size:.8rem}.tutorial-skip{background:transparent;color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.15)}.tutorial-skip:hover{color:rgba(255,255,255,0.8);border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.05)}.tutorial-prev{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.8);border:1px solid rgba(255,255,255,0.15)}.tutorial-prev:hover{background:rgba(255,255,255,0.15);color:#fff}.tutorial-next{background:linear-gradient(135deg,#ff6b9d 0,#c44dff 100%);color:#fff;box-shadow:0 4px 15px rgba(255,107,157,0.4)}.tutorial-next:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,107,157,0.5)}.tutorial-next:active{transform:translateY(0)}.tutorial-tooltip-arrow{position:absolute;width:16px;height:16px;background:linear-gradient(145deg,rgba(30,30,60,0.98) 0,rgba(20,20,45,0.98) 100%);transform:rotate(45deg);border:1px solid rgba(255,107,157,0.3);z-index:-1}.tutorial-tooltip.arrow-left .tutorial-tooltip-arrow{left:-8px;top:50%;margin-top:-8px;border-right:0;border-top:0}.tutorial-tooltip.arrow-right .tutorial-tooltip-arrow{right:-8px;top:50%;margin-top:-8px;border-left:0;border-bottom:0}.tutorial-tooltip.arrow-top .tutorial-tooltip-arrow{top:-8px;left:50%;margin-left:-8px;border-bottom:0;border-right:0}.tutorial-tooltip.arrow-bottom .tutorial-tooltip-arrow{bottom:-8px;left:50%;margin-left:-8px;border-top:0;border-left:0}.tutorial-tooltip.arrow-bottom-right .tutorial-tooltip-arrow{bottom:-8px;right:40px;border-top:0;border-left:0}.tutorial-progress-bar{position:fixed;bottom:0;left:0;right:0;height:4px;background:rgba(255,255,255,0.1);z-index:3}.tutorial-progress-fill{height:100%;background:linear-gradient(90deg,#ff6b9d 0,#c44dff 50%,#00d4ff 100%);transition:width .5s cubic-bezier(0.4,0,0.2,1);box-shadow:0 0 10px rgba(255,107,157,0.5)}.tutorial-complete-animation{text-align:center;padding:1rem 0}.tutorial-complete-icon{width:80px;height:80px;margin:0 auto 1rem;border-radius:50%;background:linear-gradient(135deg,rgba(255,215,0,0.2) 0,rgba(255,165,0,0.2) 100%);display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#ffd700;animation:completeBounce .6s cubic-bezier(0.175,0.885,0.32,1.275);box-shadow:0 0 30px rgba(255,215,0,0.3),0 0 60px rgba(255,215,0,0.2)}@keyframes completeBounce{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}.tutorial-complete-animation h3{font-family:'Fredoka',sans-serif;font-size:1.5rem;color:#fff;margin-bottom:.5rem}.tutorial-complete-animation p{color:rgba(255,255,255,0.7);font-size:1rem}@media(max-width:768px){.tutorial-tooltip{width:calc(100vw - 32px);max-width:340px}.tutorial-tooltip.center,.tutorial-tooltip.arrow-left,.tutorial-tooltip.arrow-right,.tutorial-tooltip.arrow-top,.tutorial-tooltip.arrow-bottom,.tutorial-tooltip.arrow-bottom-right{left:50% !important;right:auto !important;transform:translateX(-50%) !important}.tutorial-tooltip:not(.center){top:auto !important;bottom:80px !important}.tutorial-tooltip:not(.center) .tutorial-tooltip-arrow{display:none}.tutorial-buttons{flex-direction:column;gap:.5rem}.tutorial-skip{order:2;width:100%;justify-content:center}.tutorial-nav{order:1;width:100%}.tutorial-prev,.tutorial-next{flex:1;justify-content:center}.tutorial-icon{width:40px;height:40px;font-size:1.2rem}.tutorial-title{font-size:1.2rem}.tutorial-description{font-size:.9rem}}@media(prefers-reduced-motion:reduce){.NuPalz-tutorial-overlay,.tutorial-spotlight,.tutorial-tooltip,.tutorial-icon,.tutorial-progress-fill{transition:none;animation:none}}@media(prefers-contrast:high){.tutorial-tooltip-content{border-width:2px;background:rgba(0,0,0,0.95)}.tutorial-description{color:#fff}.tutorial-btn{border-width:2px}}