.scene-transition-overlay{position:fixed;inset:0;background:radial-gradient(circle,#00000080,#000000e6);z-index:100;animation:fadeInOut .6s ease-in-out;pointer-events:none}@keyframes fadeInOut{0%,to{opacity:0}50%{opacity:1}}.choice-button-animated{animation:slideInUp .4s ease-out backwards}.choice-button-animated:nth-child(1){animation-delay:.1s}.choice-button-animated:nth-child(2){animation-delay:.2s}.choice-button-animated:nth-child(3){animation-delay:.3s}@keyframes slideInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@keyframes bounce-slow{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.confetti-piece{position:absolute;width:10px;height:10px;background:#fbbf24;animation:confetti-fall 3s ease-out forwards}.confetti-piece:nth-child(1){left:10%;background:#ef4444;animation-delay:0s}.confetti-piece:nth-child(2){left:20%;background:#3b82f6;animation-delay:.2s}.confetti-piece:nth-child(3){left:30%;background:#10b981;animation-delay:.4s}.confetti-piece:nth-child(4){left:40%;background:#f59e0b;animation-delay:.6s}.confetti-piece:nth-child(5){left:50%;background:#8b5cf6;animation-delay:.8s}.confetti-piece:nth-child(6){left:60%;background:#ec4899;animation-delay:1s}.confetti-piece:nth-child(7){left:70%;background:#06b6d4;animation-delay:1.2s}.confetti-piece:nth-child(8){left:80%;background:#f97316;animation-delay:1.4s}.confetti-piece:nth-child(9){left:90%;background:#eab308;animation-delay:1.6s}.tooltip-container{position:relative;display:inline-block}.tooltip{position:absolute;background:#000000f2;color:#fff;padding:10px 14px;border-radius:8px;font-size:14px;line-height:1.4;z-index:1000;pointer-events:none;animation:tooltipFadeIn .2s ease-out;box-shadow:0 4px 12px #0006;max-width:250px;white-space:normal}.tooltip:before{content:"";position:absolute;border:7px solid transparent}.tooltip-top{bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}.tooltip-top:before{top:100%;left:50%;transform:translate(-50%);border-top-color:#000000f2}.tooltip-bottom{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.tooltip-bottom:before{bottom:100%;left:50%;transform:translate(-50%);border-bottom-color:#000000f2}.tooltip-left{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.tooltip-left:before{left:100%;top:50%;transform:translateY(-50%);border-left-color:#000000f2}.tooltip-right{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.tooltip-right:before{right:100%;top:50%;transform:translateY(-50%);border-right-color:#000000f2}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%) translateY(-4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(max-width:768px){.tooltip{font-size:13px;padding:8px 12px;max-width:200px}}.tutorial-overlay{position:fixed;inset:0;z-index:200;animation:fadeIn .3s}.tutorial-backdrop{position:absolute;inset:0;background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.tutorial-spotlight{position:absolute;background:transparent;border:3px solid #fbbf24;border-radius:16px;box-shadow:0 0 0 9999px #000000d9,0 0 30px #fbbf24,inset 0 0 30px #fbbf2426;pointer-events:none;transition:all .4s cubic-bezier(.4,0,.2,1);animation:pulse-spotlight 2.5s infinite}@keyframes pulse-spotlight{0%,to{box-shadow:0 0 0 9999px #000000d9,0 0 30px #fbbf24,inset 0 0 30px #fbbf2426;border-color:#fbbf24}50%{box-shadow:0 0 0 9999px #000000d9,0 0 45px #fbbf24,inset 0 0 40px #fbbf2440;border-color:#f59e0b}}.tutorial-card{position:absolute;background:linear-gradient(135deg,#1f2937,#111827);border:2px solid #fbbf24;border-radius:20px;padding:24px;max-width:420px;color:#fff;box-shadow:0 25px 50px -12px #000000b3,0 0 0 1px #fbbf241a;animation:slideInScale .5s cubic-bezier(.34,1.56,.64,1);z-index:201}@keyframes slideInScale{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.tutorial-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}.tutorial-header h3{font-size:22px;font-weight:700;color:#fbbf24;line-height:1.2}.tutorial-close-btn{background:none;border:none;color:#9ca3af;font-size:28px;line-height:1;cursor:pointer;transition:all .2s;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px}.tutorial-close-btn:hover{color:#fff;background:#ffffff1a}.tutorial-content{font-size:16px;line-height:1.6;color:#d1d5db;margin-bottom:20px}.tutorial-footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.tutorial-progress{display:flex;gap:7px}.tutorial-dot{width:9px;height:9px;border-radius:50%;background:#4b5563;transition:all .3s cubic-bezier(.4,0,.2,1)}.tutorial-dot.active{width:28px;border-radius:5px;background:linear-gradient(90deg,#fbbf24,#f59e0b);box-shadow:0 2px 8px #fbbf2466}.tutorial-buttons{display:flex;gap:10px}.tutorial-btn{padding:10px 20px;border-radius:10px;border:none;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-weight:600;font-size:15px;cursor:pointer;transition:all .2s;white-space:nowrap;box-shadow:0 4px 12px #f59e0b4d}.tutorial-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #f59e0b66}.tutorial-btn:active{transform:translateY(0)}.tutorial-btn-secondary{background:linear-gradient(135deg,#6b7280,#4b5563);box-shadow:0 4px 12px #4b55634d}@media(max-width:768px){.tutorial-card{max-width:calc(100% - 32px);margin:16px;padding:20px}.tutorial-header h3{font-size:19px}.tutorial-content{font-size:15px}.tutorial-footer{flex-direction:column;gap:16px}.tutorial-buttons{width:100%}.tutorial-btn{flex:1;padding:12px 16px;font-size:14px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}@keyframes essencePulseGlow{0%,to{filter:drop-shadow(0 0 4px rgba(252,206,56,.6));transform:scale(1)}50%{filter:drop-shadow(0 0 12px rgba(252,206,56,.9)) drop-shadow(0 0 20px rgba(255,215,0,.6));transform:scale(1.08)}}.essence-pulse-animation{animation:essencePulseGlow 2s ease-in-out infinite}@keyframes sigilsGoldenGlow{0%,to{filter:drop-shadow(0 0 3px rgba(255,215,0,.5));transform:scale(1)}50%{filter:drop-shadow(0 0 10px rgba(255,215,0,.8)) drop-shadow(0 0 16px rgba(255,200,0,.5));transform:scale(1.05)}}.sigils-glow-animation{animation:sigilsGoldenGlow 3s ease-in-out infinite}
