/* ══════════════════════════════════════════════════════════
   Tutorial — Guided Onboarding Overlay & Tooltips
   Extracted from tutorial.js injectStyles()
   ══════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.tut-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:10000;display:flex;align-items:center;justify-content:center}
.tut-spotlight-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:10000;pointer-events:auto}

/* ── Animations ── */
.tut-fade-in{animation:tutFadeIn .35s ease forwards}
.tut-fade-out{animation:tutFadeOut .35s ease forwards !important}
.tut-slide-up{animation:tutSlideUp .45s cubic-bezier(.16,1,.3,1) forwards}
@keyframes tutFadeIn{from{opacity:0}to{opacity:1}}
@keyframes tutFadeOut{from{opacity:1}to{opacity:0;pointer-events:none}}
@keyframes tutSlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.tut-float{animation:tutFloat 3s ease-in-out infinite}
@keyframes tutFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ── Icon ── */
.tut-icon{vertical-align:middle;display:inline-block;margin:0 2px -3px 0;image-rendering:auto}

/* ── Welcome Modal ── */
.tut-modal{background:linear-gradient(145deg,#0d1225,#15203a);border:2px solid rgba(255,215,0,0.35);border-radius:22px;padding:42px 48px;max-width:520px;width:92%;text-align:center;box-shadow:0 0 80px rgba(255,215,0,0.1),0 25px 80px rgba(0,0,0,0.6)}
.tut-modal-icon-img{display:block;margin:0 auto 12px;width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(255,215,0,0.4))}
.tut-modal-title{color:#ffd700;font-size:1.7em;margin:0 0 14px 0;font-weight:800;text-shadow:0 0 18px rgba(255,215,0,0.2)}
.tut-modal-body{color:#c0c0d0;font-size:1.05em;line-height:1.75;margin-bottom:26px}
.tut-modal-body p{margin:0 0 10px 0}
.tut-modal-btn{background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000;border:none;padding:15px 44px;font-size:1.12em;font-weight:800;border-radius:14px;cursor:pointer;transition:all .25s;text-transform:uppercase;letter-spacing:1.5px;box-shadow:0 4px 25px rgba(255,215,0,0.35);position:relative;overflow:hidden}
.tut-modal-btn::after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,0.2) 50%,transparent 60%);animation:tutShine 3s ease-in-out infinite}
@keyframes tutShine{0%{transform:translateX(-100%) rotate(45deg)}100%{transform:translateX(100%) rotate(45deg)}}
.tut-modal-btn:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 8px 35px rgba(255,215,0,0.55)}

/* ── Step Tooltip ── */
.tut-tooltip{position:fixed;z-index:10003;background:linear-gradient(145deg,#0d1225,#161d38);border:2px solid rgba(52,152,219,0.4);border-radius:16px;padding:18px 22px;width:340px;box-shadow:0 0 35px rgba(52,152,219,0.12),0 14px 50px rgba(0,0,0,0.55)}
.tut-tooltip.tut-floating{border-color:rgba(255,215,0,0.35)}
.tut-tooltip-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tut-tooltip-step{color:#3498db;font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:1.2px}
.tut-skip-btn{background:none;border:1px solid rgba(255,255,255,0.12);color:#666;font-size:.72em;padding:3px 10px;border-radius:6px;cursor:pointer;transition:all .2s}
.tut-skip-btn:hover{color:#e74c3c;border-color:#e74c3c}
.tut-tooltip-title{color:#fff;font-size:1.15em;margin:0 0 6px 0;font-weight:700;display:flex;align-items:center;gap:6px}
.tut-tooltip-body{color:#a8a8bc;font-size:.93em;line-height:1.55;margin:0 0 10px 0}
.tut-tooltip-body strong{color:#e0e0f0}
.tut-tooltip-reward{background:rgba(255,215,0,0.08);border:1px solid rgba(255,215,0,0.18);border-radius:8px;padding:7px 12px;font-size:.88em;color:#ffd700;font-weight:600;margin-bottom:8px;text-align:center;display:flex;align-items:center;justify-content:center;gap:4px}

/* ── Tooltip Arrows ── */
.tut-tooltip-arrow{position:absolute;width:0;height:0}
.tut-arrow-down{bottom:-10px;left:50%;transform:translateX(-50%);border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid rgba(52,152,219,0.4)}
.tut-arrow-up{top:-10px;left:50%;transform:translateX(-50%);border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:11px solid rgba(52,152,219,0.4)}
.tut-arrow-right{right:-10px;top:50%;transform:translateY(-50%);border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:11px solid rgba(52,152,219,0.4)}
.tut-arrow-left{left:-10px;top:50%;transform:translateY(-50%);border-top:11px solid transparent;border-bottom:11px solid transparent;border-right:11px solid rgba(52,152,219,0.4)}

/* ── Spotlight Ring ── */
.tut-target-ring{position:fixed;z-index:10001;border:3px solid rgba(52,152,219,0.6);pointer-events:none}
.tut-pulse-ring{animation:tutPulseRing 1.4s ease-in-out infinite}
@keyframes tutPulseRing{0%,100%{box-shadow:0 0 8px rgba(52,152,219,0.2),inset 0 0 8px rgba(52,152,219,0.05)}50%{box-shadow:0 0 20px rgba(52,152,219,0.6),0 0 40px rgba(52,152,219,0.15),inset 0 0 12px rgba(52,152,219,0.1)}}

/* ── Hand Pointer ── */
.tut-hand-pointer{position:fixed;z-index:10002;pointer-events:none;animation:tutHandBounce 1s ease-in-out infinite}
.tut-pointer-icon{width:28px;height:28px;filter:drop-shadow(0 0 6px rgba(52,152,219,0.6))}
@keyframes tutHandBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── Step Progress Dots ── */
.tut-step-dots{display:flex;justify-content:center;gap:5px;margin-top:12px}
.tut-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.12);transition:all .3s}
.tut-dot.active{background:#3498db;box-shadow:0 0 8px rgba(52,152,219,0.5);transform:scale(1.35)}
.tut-dot.done{background:#2ecc71}

/* ── Toast ── */
.tut-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#142014,#0f2f1a);border:2px solid #2ecc71;color:#2ecc71;padding:14px 24px;border-radius:14px;font-weight:700;font-size:1em;z-index:10010;box-shadow:0 8px 32px rgba(46,204,113,0.22);max-width:calc(100vw - 32px);text-align:center;box-sizing:border-box;word-wrap:break-word}

/* ── Next Button ── */
.tut-next-btn{display:block;width:100%;margin:10px 0 4px;padding:10px 0;background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border:none;border-radius:10px;font-size:.95em;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.5px}
.tut-next-btn:hover{background:linear-gradient(135deg,#2ecc71,#27ae60);transform:translateY(-1px);box-shadow:0 4px 15px rgba(46,204,113,0.3)}

/* ── Inline Highlight Classes ── */
.tut-gold{color:#ffd700;font-weight:700}
.tut-stones{color:#9b59b6;font-weight:700}
.tut-bonus{margin-top:16px !important;padding:12px;background:rgba(46,204,113,0.08);border:1px solid rgba(46,204,113,0.22);border-radius:10px;font-size:1.02em;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}

/* ── Mobile ── */
@media(max-width:600px){
    .tut-modal{padding:28px 22px}
    .tut-tooltip{width:auto;max-width:calc(100vw - 32px);min-width:220px;padding:16px 18px}
    .tut-modal-icon-img{width:60px;height:60px}
    .tut-toast{top:auto;bottom:90px;font-size:.9em;padding:10px 18px}
}