.font-hand { font-family: 'Patrick Hand', cursive; }

/* === Fond quadrillage anime === */
@keyframes grid-scroll {
    0%   { background-position: 0 0; }
    100% { background-position: 60px 60px; }
}

.dungeon-animated-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(180, 83, 9, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180, 83, 9, 0.06) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: grid-scroll 8s linear infinite;
    will-change: background-position;
}

/* Disable animated grid on mobile to save battery */
@media (max-width: 768px), (hover: none) {
    .dungeon-animated-grid { animation: none; }
}

/* Low-power mode: disable all infinite CSS animations */
.low-power .dungeon-animated-grid { animation: none; }
.low-power .dice-glow { animation: none; }
.low-power .stairs-arrow { animation: none; }
.low-power #fog-of-war { animation: none; }
.low-power .tactics-select::before { animation: none; }

/* Conteneur de la grille de jeu */
.paper-grid {
    background-color: transparent;
}

/* Desactiver la selection de texte pour le jeu */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Animation textes flottants (degats, soins, or) */
@keyframes smoothFloatUp {
    0% { transform: translateY(0) scale(0.8); opacity: 0; }
    10% { transform: translateY(0) scale(1.1); opacity: 1; }
    100% {
        transform: translateY(calc(-2 * var(--float-distance, 50px)));
        opacity: 0;
    }
}

.floating-text {
    animation: smoothFloatUp 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    text-shadow:
        2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
        1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;
    will-change: transform, opacity;
}

/* Dice glow pulse */
@keyframes dice-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 0 30px rgba(251, 191, 36, 0.6); }
}
.dice-glow { animation: dice-glow 2s ease-in-out infinite; }

/* === Flèche indicatrice escalier === */
@keyframes stairs-bounce {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50%      { transform: translateX(6px); opacity: 0.3; }
}

.stairs-arrow {
    animation: stairs-bounce 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

/* === Fog of War === */
@keyframes torch-flicker {
    0%    { --flicker-amount: 0%; }
    20%   { --flicker-amount: -0.75%; }
    40%   { --flicker-amount: 0.5%; }
    60%   { --flicker-amount: -0.5%; }
    80%   { --flicker-amount: 0.25%; }
    100%  { --flicker-amount: 0%; }
}

#fog-of-war {
    --flicker-amount: 0%;
    animation: torch-flicker 3s infinite linear;

    background: radial-gradient(
        circle at var(--player-x) var(--player-y),
        transparent calc(var(--radius-clear) + var(--flicker-amount)),
        rgba(0, 0, 0, 0.5) calc(var(--radius-clear) + var(--flicker-amount) + 10%),
        rgba(0, 0, 0, 0.7) calc(var(--radius-clear) + var(--flicker-amount) + 25%)
    );
    z-index: 10;
}

/* === RPG Tactics - Cases de déplacement valides === */
@keyframes tactics-rotate {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -40; }
}

@keyframes tactics-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

.tactics-select {
    pointer-events: none;
    z-index: 20;
}

.tactics-select::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 3px dashed rgba(100, 255, 100, 0.7);
    border-radius: 4px;
    animation: tactics-pulse 1.5s ease-in-out infinite;
}

/* === Score shake animation === */
@keyframes score-shake {
    0%, 100% { transform: scale(1) rotate(0); }
    15% { transform: scale(1.15) rotate(-3deg); }
    30% { transform: scale(1.1) rotate(2deg); }
    45% { transform: scale(1.05) rotate(-1deg); }
    60% { transform: scale(1.02) rotate(0.5deg); }
    75% { transform: scale(1); }
}

.score-shake {
    animation: score-shake 0.5s ease-out;
}

/* === Score popup flying toward score counter === */
@keyframes score-popup-fly {
    0% {
        transform: translateY(0) scale(0.7);
        opacity: 0;
    }
    15% {
        transform: translateY(4px) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translateY(-60px) scale(0.6);
        opacity: 0;
    }
}

.score-popup {
    animation: score-popup-fly 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
    text-shadow:
        2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
        1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

/* Coins marqués style RPG tactics */
.tactics-select::after {
    content: '';
    position: absolute;
    inset: 2px;
    background:
        /* Coin haut-gauche */
        linear-gradient(to right, rgba(100, 255, 100, 0.8) 12px, transparent 12px) no-repeat 0 0 / 100% 3px,
        linear-gradient(to bottom, rgba(100, 255, 100, 0.8) 12px, transparent 12px) no-repeat 0 0 / 3px 100%,
        /* Coin haut-droit */
        linear-gradient(to left, rgba(100, 255, 100, 0.8) 12px, transparent 12px) no-repeat 100% 0 / 100% 3px,
        linear-gradient(to bottom, rgba(100, 255, 100, 0.8) 12px, transparent 12px) no-repeat 100% 0 / 3px 100%,
        /* Coin bas-gauche */
        linear-gradient(to right, rgba(100, 255, 100, 0.8) 12px, transparent 12px) no-repeat 0 100% / 100% 3px,
        linear-gradient(to top, rgba(100, 255, 100, 0.8) 12px, transparent 12px) no-repeat 0 100% / 3px 100%,
        /* Coin bas-droit */
        linear-gradient(to left, rgba(100, 255, 100, 0.8) 12px, transparent 12px) no-repeat 100% 100% / 100% 3px,
        linear-gradient(to top, rgba(100, 255, 100, 0.8) 12px, transparent 12px) no-repeat 100% 100% / 3px 100%,
        /* Fond vert léger */
        rgba(100, 255, 100, 0.12);
    border-radius: 2px;
}