/* ===== Dinosaur Theme ===== */

/* Prehistoric background */
[data-dino="true"] #game-screen {
    background: linear-gradient(180deg, #1a0a2e 0%, #0d2818 40%, #1a3a1a 100%);
}

/* Dino key character */
.effect-dino-key {
    position: absolute;
    font-size: 120px;
    font-weight: 900;
    pointer-events: none;
    animation: dinoKeyPop 1.2s ease-out forwards;
    z-index: 10;
}

@keyframes dinoKeyPop {
    0% { transform: scale(0) rotate(-10deg); opacity: 1; }
    15% { transform: scale(1.4) rotate(5deg); opacity: 1; }
    30% { transform: scale(1) rotate(-2deg); opacity: 1; }
    100% { transform: scale(1.5) rotate(0deg); opacity: 0; }
}

/* Dino stomp — screen shake handled in JS, this is the footprint */
.effect-footprint {
    position: absolute;
    font-size: 80px;
    pointer-events: none;
    animation: footprintStamp 1.5s ease-out forwards;
    filter: drop-shadow(0 0 10px rgba(139, 90, 43, 0.6));
}

@keyframes footprintStamp {
    0% { transform: scale(2) rotate(var(--foot-angle, -15deg)); opacity: 0; }
    15% { transform: scale(1) rotate(var(--foot-angle, -15deg)); opacity: 1; }
    70% { transform: scale(1) rotate(var(--foot-angle, -15deg)); opacity: 0.6; }
    100% { transform: scale(1) rotate(var(--foot-angle, -15deg)); opacity: 0; }
}

/* Volcano eruption */
.effect-lava-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: lavaErupt var(--duration, 1.5s) ease-out forwards;
}

@keyframes lavaErupt {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    60% { opacity: 0.8; }
    100% { transform: translate(var(--tx, 0), var(--ty, -300px)) scale(0.2); opacity: 0; }
}

/* Volcano base */
.effect-volcano {
    position: absolute;
    pointer-events: none;
    font-size: 100px;
    animation: volcanoAppear 2s ease-out forwards;
}

@keyframes volcanoAppear {
    0% { transform: scale(0.5); opacity: 0; }
    20% { transform: scale(1.1); opacity: 1; }
    80% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 0; }
}

/* Dino charge across screen */
.effect-dino-charge {
    position: absolute;
    pointer-events: none;
    font-size: 80px;
    animation: dinoCharge var(--duration, 1.5s) linear forwards;
}

@keyframes dinoCharge {
    0% { transform: translateX(var(--start-x, -100px)) scaleX(var(--dir, 1)); }
    100% { transform: translateX(var(--end-x, 100vw)) scaleX(var(--dir, 1)); }
}

/* Egg crack */
.effect-dino-egg {
    position: absolute;
    pointer-events: none;
    font-size: 60px;
    animation: eggCrack 2s ease-out forwards;
}

@keyframes eggCrack {
    0% { transform: scale(0) rotate(0deg); opacity: 1; }
    20% { transform: scale(1.2) rotate(10deg); opacity: 1; }
    40% { transform: scale(1) rotate(-5deg); opacity: 1; }
    60% { transform: scale(1.1) rotate(3deg); opacity: 1; }
    70% { font-size: 60px; opacity: 1; }
    80% { font-size: 70px; opacity: 1; }
    100% { transform: scale(1.3) rotate(0deg); opacity: 0; }
}

/* Meteor */
.effect-meteor {
    position: absolute;
    pointer-events: none;
    font-size: 50px;
    animation: meteorFall var(--duration, 1s) linear forwards;
    filter: drop-shadow(0 0 15px #ff6600);
}

@keyframes meteorFall {
    0% { transform: translate(var(--start-tx, 200px), var(--start-ty, -200px)) rotate(0deg); opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(0, 0) rotate(360deg); opacity: 0; }
}

/* Fossil bones scatter */
.effect-fossil {
    position: absolute;
    pointer-events: none;
    font-size: 40px;
    animation: fossilScatter var(--duration, 1.2s) ease-out forwards;
}

@keyframes fossilScatter {
    0% { transform: translate(0, 0) rotate(0deg) scale(0.5); opacity: 1; }
    100% { transform: translate(var(--tx, 100px), var(--ty, -100px)) rotate(var(--rot, 360deg)) scale(1); opacity: 0; }
}

/* Jungle leaf rain */
.effect-leaf {
    position: absolute;
    pointer-events: none;
    font-size: 40px;
    animation: leafFall var(--duration, 3s) ease-in forwards;
}

@keyframes leafFall {
    0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; }
    50% { transform: translateY(50vh) rotate(180deg) translateX(var(--sway, 50px)); opacity: 0.8; }
    100% { transform: translateY(100vh) rotate(360deg) translateX(0); opacity: 0; }
}

/* Dino footprint trail (mouse move) */
.effect-paw-trail {
    position: absolute;
    pointer-events: none;
    font-size: 20px;
    animation: pawFade 1.2s ease-out forwards;
    opacity: 0.6;
}

@keyframes pawFade {
    0% { transform: scale(1) rotate(var(--paw-angle, 0deg)); opacity: 0.6; }
    100% { transform: scale(0.5) rotate(var(--paw-angle, 0deg)); opacity: 0; }
}

/* Screen shake for stomp */
@keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-8px, 5px); }
    20% { transform: translate(8px, -5px); }
    30% { transform: translate(-5px, 8px); }
    40% { transform: translate(5px, -3px); }
    50% { transform: translate(-3px, 5px); }
    60% { transform: translate(3px, -2px); }
    70% { transform: translate(-2px, 3px); }
    80% { transform: translate(2px, -1px); }
    90% { transform: translate(-1px, 1px); }
}

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

/* Ambient pterodactyl */
.effect-pterodactyl {
    position: absolute;
    pointer-events: none;
    font-size: 50px;
    animation: pterodactylFly var(--duration, 3s) ease-in-out forwards;
}

@keyframes pterodactylFly {
    0% { transform: translate(var(--start-tx, -100px), 0) scaleX(var(--dir, 1)); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(var(--end-tx, 100vw), var(--drift, -50px)) scaleX(var(--dir, 1)); opacity: 0; }
}

/* Jungle background elements */
.jungle-bg-element {
    position: absolute;
    pointer-events: none;
    opacity: 0.15;
    font-size: 60px;
}

/* Dino roar — big dino with expanding sound-wave rings */
.effect-dino-roar {
    position: absolute;
    font-size: 110px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: dinoRoarPop 2s ease-out forwards;
    z-index: 10;
}

@keyframes dinoRoarPop {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    20%  { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
    45%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

.effect-roar-wave {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 5px solid rgba(255, 150, 0, 0.7);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: roarWave 1.8s ease-out forwards;
}

@keyframes roarWave {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(5.5); opacity: 0; }
}

/* Swamp bubbles rising from the bottom */
.effect-swamp-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(144, 238, 144, 0.45), rgba(34, 139, 34, 0.25));
    border: 2px solid rgba(144, 238, 144, 0.55);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: swampRise var(--duration, 2.5s) ease-in forwards;
}

@keyframes swampRise {
    0%   { transform: translateY(0)       scale(0.5); opacity: 0;   }
    10%  { opacity: 0.85; }
    70%  { opacity: 0.7; }
    90%  { transform: translateY(-100vh)  scale(1.2); opacity: 0.3; }
    100% { transform: translateY(-110vh)  scale(0.8); opacity: 0;   }
}