.tactile-button {
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

.tactile-button:active {
    transform: translateY(2px);
    box-shadow: 0px 2px 0px var(--tw-shadow-color) !important;
}

.floating-element {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

[x-cloak] {
    display: none !important;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.press-effect:active {
    transform: translateY(2px);
}

.shadow-tactile {
    box-shadow: 0px 4px 20px rgba(109, 105, 102, 0.1);
}

/* Flip Card Styles */
.card-container {
    perspective: 1000px;
    aspect-ratio: 2.5 / 3.5;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.card-inner.is-flippable.flipped {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0.5rem;
    border: 4px solid white;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.card-back {
    transform: rotateY(180deg);
}

.card-back>div:first-child {
    background-image: radial-gradient(#66a626 0.5px, transparent 0.5px), radial-gradient(#66a626 0.5px, #f3ede9 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

/* Minecraft Border Style */
.mc-border {
    box-shadow:
        inset 0 4px 0 rgba(255, 255, 255, 0.3),
        inset 0 -4px 0 rgba(0, 0, 0, 0.1),
        0 4px 0 rgba(0, 0, 0, 0.2);
}

@keyframes denyShake {
    0% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-6px);
    }

    30% {
        transform: translateX(6px);
    }

    45% {
        transform: translateX(-5px);
    }

    60% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(0);
    }
}

.deny-shake {
    animation: denyShake 0.4s ease;
}

.island-card {
    box-shadow: 0px 4px 20px rgba(109, 105, 102, 0.1);
}

.btn-tactile {
    box-shadow: 0px 4px 0px #2a5000;
}

.btn-tactile:active {
    box-shadow: 0px 0px 0px #2a5000;
    transform: translateY(4px);
}

.bg-landscape {
    background: linear-gradient(to bottom, #fff8f4 0%, #f3ede9 100%);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.node-shadow {
    box-shadow: 0px 4px 0px #2a5000;
}

.node-shadow-inactive {
    box-shadow: 0px 4px 0px #727a67;
}

.node-shadow-boss {
    box-shadow: 0px 4px 0px #502000;
}

.progression-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.adventure-frame {
    border: 16px solid #8a4f2d;
    box-shadow: inset 0 0 0 4px #ffdbca, 0 20px 50px rgba(0, 0, 0, 0.2);
    position: relative;
}

.adventure-frame::after {
    content: "";
    position: absolute;
    inset: -16px;
    border: 2px solid #502000;
    pointer-events: none;
}

.glass-hud {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.progression-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.world-background {
    background: radial-gradient(circle at center, #fff8f4 0%, #ffdbca 100%);
}

.stone-button {
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    border: 2px solid #4b5563;
}

.metallic-icon {
    color: #374151;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
}

.node-label-pill {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.tactile-button-primary {
    box-shadow: 0 4px 0 #2a5000;
}

.tactile-button-primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #2a5000;
}

.word-card-shadow {
    box-shadow: 0 4px 0 #f3ede9;
}

.btn-shadow {
    box-shadow: 0 4px 0 0 #2a5000;
}

.btn-shadow:active {
    box-shadow: 0 0 0 0 #2a5000;
    transform: translateY(4px);
}

.card-lift {
    box-shadow: 0px 4px 20px rgba(109, 105, 102, 0.1);
}

.word-pill-shadow {
    box-shadow: 0 3px 0 0 #c1cab4;
}

.tactile-key {
    box-shadow: 0 4px 0 0 rgba(109, 105, 102, 0.2);
}

.tactile-key:active {
    box-shadow: 0 0 0 0 #c1cab4;
    transform: translateY(2px);
}

.word-pill-shadow:active {
    box-shadow: 0 0 0 0 #c1cab4;
    transform: translateY(2px);
}

.word-pill-shadow-selected {
    box-shadow: 0 3px 0 0 #3B6FB6;
}

.word-pill-shadow-success {
    box-shadow: 0 3px 0 0 #66A626;
}

.word-pill-shadow-error {
    box-shadow: 0 3px 0 0 #ba1a1a;
}

.word-big-pill-shadow {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    box-shadow: 0 4px 0 0 #e8e1dd;
}

.word-big-pill-shadow:active {
    box-shadow: 0 0 0 0 #c1cab4;
    transform: translateY(2px);
}

.icon-success {
    color: #16a34a;
}

.icon-fail {
    color: #dc2626;
}

.icon-warning {
    color: #f59e0b;
}

.icon-mastered {
    color: #7c3aed;
}

@keyframes heartDamage {
    0% {
        transform: scale(1);
    }

    8% {
        transform: scale(1.08) rotate(-4deg);
    }

    16% {
        transform: scale(0.92) rotate(4deg);
    }

    24% {
        transform: scale(1.03);
    }

    32% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

div.anim-heart-drain {
    animation: heartDamage 2.4s ease-in-out infinite;
}

@keyframes successPop {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    12% {
        transform: scale(1.18);
        filter: brightness(1.15);
    }

    24% {
        transform: scale(0.96);
    }

    36% {
        transform: scale(1.06);
    }

    48% {
        transform: scale(1);
        filter: brightness(1);
    }

    100% {
        transform: scale(1);
    }
}

div.anim-pop {
    animation: successPop 2.2s ease-in-out infinite;
}


@keyframes masteredGlow {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    20% {
        transform: scale(1.08);
        filter: brightness(1.15);
    }

    40% {
        transform: scale(1.02);
        filter: brightness(1.05);
    }

    60% {
        transform: scale(1.1);
        filter: brightness(1.2);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

div.anim-glow {
    animation: masteredGlow 3s ease-in-out infinite;
}

@keyframes koWobble {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }

    10% {
        transform: rotate(-6deg) scale(0.98);
    }

    20% {
        transform: rotate(6deg) scale(0.98);
    }

    30% {
        transform: rotate(-4deg);
    }

    40% {
        transform: rotate(4deg);
    }

    50% {
        transform: rotate(0deg) scale(0.96);
        opacity: 0.85;
        filter: grayscale(0.2);
    }

    100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

div.anim-shake {
    animation: koWobble 3s ease-in-out infinite;
}

.card-select {
    transition: all 0.2s ease;
}

.card-select.selected {
    border: 4px solid #66A626;
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(102, 166, 38, 0.2);
}

@keyframes pop {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-pop {
    animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes soft-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
    }
}

.cursor-active {
    animation: soft-pulse 1.2s ease-in-out infinite;
}

@keyframes boss-float {

    0%,
    100% {
        transform: rotate(0deg) translateY(0);
    }

    50% {
        transform: rotate(45deg) translateY(-6px);
    }
}

.boss-float {
    animation: boss-float 2.5s ease-in-out infinite;
}

.boss-shadow {
    box-shadow: 0 0 35px 15px rgba(255, 21, 21, 0.6);
}

@keyframes reward-nudge {

    0%,
    70%,
    100% {
        transform: translateX(0);
    }

    75% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }

    85% {
        transform: translateX(-2px);
    }

    90% {
        transform: translateX(2px);
    }
}

.reward-badge--active {
    animation: reward-nudge 3s ease-in-out infinite;
}

@keyframes clashShimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

.clash-shimmer-layer {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    /* El skew aquí es seguro porque está en un elemento hijo interno */
    animation: clashShimmer 2s infinite ease-in-out;
    pointer-events: none;
}


/* 🌟 Animación 1: Estallido de luz inicial al impactar tras el giro */
@keyframes neonGlowImpact {
    0% {
        box-shadow: 0 0 0px rgba(250, 204, 21, 0);
        opacity: 0;
    }

    100% {
        box-shadow: 0 0 15px 4px rgba(250, 204, 21, 0.9),
            0 0 30px 8px rgba(254, 240, 138, 0.5);
        opacity: 1;
    }
}

/* 🌟 Animación 2: El parpadeo/respiración infinito que se queda de fondo */
@keyframes neonGlowLoop {

    0%,
    100% {
        box-shadow: 0 0 10px 2px rgba(250, 204, 21, 0.5),
            0 0 20px 4px rgba(254, 240, 138, 0.2);
    }

    50% {
        box-shadow: 0 0 16px 3px rgba(250, 204, 21, 0.85),
            0 0 28px 6px rgba(254, 240, 138, 0.4);
    }
}

/* El contenedor abraza la carta por fuera de forma muy compacta */
.green-glow-card {
    position: absolute;
    inset: -1px;
    border-radius: 0.55rem;
    z-index: 0;
    pointer-events: none;
    display: none;
    opacity: 0;
    background: transparent;
}

/* Se activa al revelar la carta */
.green-glow-card.active {
    display: block;

    /*
    🌟 TIMING CALIBRADO:
    1. 'neonGlowImpact' espera 0.45s (deja que la carta termine el flip), y dura 0.4s (termina en el segundo 0.85s).
    2. 'neonGlowLoop' empieza de forma infinita exactamente en el segundo 0.85s, logrando un encadenamiento perfecto.
  */
    animation: neonGlowImpact 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards,
        neonGlowLoop 2s infinite ease-in-out 0.85s;
}

.key-b {
    transform: translateY(-2px);
}


/* 🏕️ Botón de Campamento (Tamaño XL) */
.camp-corner-btn {
    position: absolute;
    /* Al hacerlo más grande (200px), lo empujamos un poco más hacia afuera (-40px) */
    bottom: -46px;
    right: -41px;
    width: 200px;
    /* ¡Aumentado de 160px a 200px! */
    height: 200px;
    border-radius: 50%;

    /* Borde subido a 16px para igualar matemáticamente el marco de tu mapa */
    border: 16px solid #8a4f2d;
    box-shadow: -4px -4px 15px rgba(0, 0, 0, 0.2);

    z-index: 40;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.camp-corner-btn:hover {
    transform: scale(1.08);
}

.camp-corner-btn:active {
    transform: scale(0.95);
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.15);
}