/* ============================================================
   TUTORIAL OVERLAY — Clash Royale style (no text, arrows only)
   ============================================================ */

/* Single spotlight element — rounded hole via box-shadow + pulsing border */
.tutorial-spotlight-hole {
    position: fixed;
    z-index: 99998;
    border-radius: 16px;
    border: 3px solid rgba(255, 200, 50, 0.8);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    transition: left 0.15s ease, top 0.15s ease, width 0.15s ease, height 0.15s ease;
    animation: pulseRing 1.2s ease-in-out infinite;
}

/* Hidden state */
.tutorial-spotlight-hole.hidden {
    display: none;
}

@keyframes pulseRing {
    0%, 100% { border-color: rgba(255, 200, 50, 0.4); }
    50%      { border-color: rgba(255, 200, 50, 1); }
}

/* ---- Cursor image ---- */
.tutorial-hand {
    position: fixed;
    z-index: 100000;
    width: 96px;
    height: 96px;
    pointer-events: none;
    display: none;
    background-image: url('./img/mouse_1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: left 0.15s ease, top 0.15s ease;
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.9)) drop-shadow(0 0 24px rgba(255,255,255,0.5));
}

/* When pointing at something to click — switch to mouse_2 */
.tutorial-hand.hand-click-cursor {
    background-image: url('./img/mouse_2.png');
}

/* When dragging the map — switch to mouse_3 (grab hand) */
.tutorial-hand.hand-drag-cursor {
    background-image: url('./img/mouse_3.png');
}

.tutorial-hand::before,
.tutorial-hand::after {
    display: none;
}

.tutorial-hand-dot {
    display: none;
}

/* ---- Bounce animations ---- */

.hand-bounce-up {
    animation: bounceUp 0.7s ease-in-out infinite;
}
@keyframes bounceUp {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

.hand-bounce-down {
    animation: bounceDown 0.7s ease-in-out infinite;
}
@keyframes bounceDown {
    0%, 100% { transform: scaleY(-1) translateY(0); }
    50%      { transform: scaleY(-1) translateY(16px); }
}

.hand-bounce-left {
    animation: bounceLeft 0.7s ease-in-out infinite;
}
@keyframes bounceLeft {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-16px); }
}

.hand-bounce-right {
    animation: bounceRight 0.7s ease-in-out infinite;
}
@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(16px); }
}

/* Diagonal bounce — from bottom-right toward top-left */
.hand-bounce-diagonal {
    animation: bounceDiagonal 0.7s ease-in-out infinite;
}
@keyframes bounceDiagonal {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-18px, -18px); }
}

/* Drag gesture */
.hand-drag {
    animation: dragGesture 2s ease-in-out infinite;
}
@keyframes dragGesture {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-50px, 0); }
    40%  { transform: translate(50px, 0); }
    60%  { transform: translate(0, -30px); }
    80%  { transform: translate(0, 30px); }
    100% { transform: translate(0, 0); }
}

/* Tap gesture */
.hand-tap {
    animation: tapGesture 1s ease-in-out infinite;
}
@keyframes tapGesture {
    0%, 100% { transform: scale(1);   }
    30%      { transform: scale(0.8); }
    60%      { transform: scale(1.15); }
}

/* ---- Skip button (reject.png) ---- */
.tutorial-skip {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100001;
    width: 48px;
    height: 48px;
    border: none;
    background: url('./img/reject.png') center / contain no-repeat;
    cursor: pointer;
    padding: 0;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.2s;
}

.tutorial-skip:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
    .tutorial-hand {
        width: 96px;
        height: 96px;
    }
    .tutorial-skip {
        width: 40px;
        height: 40px;
    }
}