/**
 * kickdad.css - Kick Dad game styles
 */

body {
    min-height: 100dvh;
    background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
    padding: 15px;
    overflow: hidden;
    position: relative;
}

.header {
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
    z-index: 201;
}

h1 {
    font-size: 1.8rem;
}

.back-btn {
    font-size: 1rem;
}

.back-btn:hover, .back-btn:active {
    color: #ff6b6b;
}

.score-board {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.score-box span {
    display: block;
    font-size: 1.8rem;
}

.score-box.bonus {
    background: rgba(255,215,0,0.4);
    animation: kickdad-pulse 0.5s ease infinite;
}

@keyframes kickdad-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.game-area {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.dad-container {
    position: absolute;
    cursor: pointer;
    transition: transform 0.1s;
    z-index: 5;
}

.dad-container.centered {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dad-container:active {
    transform: scale(0.95);
}

.dad-container.centered:active {
    transform: translate(-50%, -50%) scale(0.95);
}

.dad-container.kicked {
    animation: kickReaction 0.3s ease-out;
}

.dad-container.running.kicked {
    animation: kickReactionRunning 0.15s ease-out;
}

@keyframes kickReaction {
    0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    25% { transform: translate(-50%, -50%) scale(0.9) rotate(-15deg); }
    50% { transform: translate(-50%, -50%) scale(1.1) rotate(10deg); }
    75% { transform: translate(-50%, -50%) scale(0.95) rotate(-5deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

@keyframes kickReactionRunning {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(0.8) rotate(20deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.dad-face {
    width: 200px;
    height: 240px;
    border-radius: 30px;
    object-fit: cover;
    box-shadow: 0 15px 50px rgba(0,0,0,0.4);
    border: 5px solid white;
    transition: width 0.3s, height 0.3s;
}

.dad-container.running .dad-face {
    animation: wobble 0.3s ease infinite;
}

@keyframes wobble {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.dad-speech {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 10px 15px;
    border-radius: 20px;
    font-weight: bold;
    color: #ff6b6b;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    animation: speechPop 0.3s ease;
    z-index: 20;
}

.dad-speech::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top-color: white;
}

.kick-text {
    position: fixed;
    font-size: 3rem;
    font-weight: bold;
    color: white;
    text-shadow: 3px 3px 0 #ff6b6b, -3px -3px 0 #ff6b6b, 3px -3px 0 #ff6b6b, -3px 3px 0 #ff6b6b;
    pointer-events: none;
    animation: kickTextPop 0.6s ease-out forwards;
    z-index: 100;
}

@keyframes kickTextPop {
    0% { transform: scale(0) rotate(-20deg); opacity: 1; }
    50% { transform: scale(1.3) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) translateY(-50px); opacity: 0; }
}

.ouch-sound {
    position: fixed;
    font-size: 2rem;
    color: #ff6b6b;
    font-weight: bold;
    animation: floatUp 1s ease-out forwards;
    pointer-events: none;
    z-index: 100;
}

.status-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    padding: 15px 30px;
    border-radius: 30px;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    z-index: 20;
    animation: slideUp 0.5s ease;
}

@keyframes slideUp {
    from { transform: translateX(-50%) translateY(100px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.status-bar.warning {
    background: rgba(255,0,0,0.8);
    animation: slideUp 0.5s ease, kickdad-rage-shake 0.5s ease infinite;
}

@keyframes kickdad-rage-shake {
    0%, 100% { transform: translateX(-50%) rotate(-2deg); }
    50% { transform: translateX(-50%) rotate(2deg); }
}

.reset-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(45deg, #a8e6cf, #88d8b0);
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 20;
    transition: transform 0.2s;
}

.reset-btn:active {
    transform: translateX(-50%) scale(0.95);
}

.stars {
    position: fixed;
    pointer-events: none;
    z-index: 50;
}

.star {
    position: absolute;
    font-size: 2rem;
    animation: starBurst 0.8s ease-out forwards;
}

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

.overlay {
    z-index: 200;
}

.overlay h2 {
    margin-bottom: 10px;
    text-align: center;
}

.overlay .subtitle {
    color: #ffd700;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.overlay .final-score {
    font-size: 4rem;
    color: #ffd700;
    font-weight: bold;
    margin-bottom: 10px;
}

.overlay p {
    margin-bottom: 25px;
}

.overlay .play-btn {
    padding: 18px 50px;
}

.combo-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 4px 4px 0 #ff6b6b;
    pointer-events: none;
    animation: comboAppear 1s ease forwards;
    z-index: 150;
}

.speed-indicator {
    position: fixed;
    top: 100px;
    right: 20px;
    background: rgba(255,255,255,0.2);
    padding: 10px 15px;
    border-radius: 15px;
    color: white;
    font-weight: bold;
    z-index: 10;
}

.speed-indicator .bar {
    width: 100px;
    height: 10px;
    background: rgba(255,255,255,0.3);
    border-radius: 5px;
    margin-top: 5px;
    overflow: hidden;
}

.speed-indicator .bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #38ef7d, #ffd700, #ff6b6b);
    border-radius: 5px;
    transition: width 0.3s;
}

/* Combo Display Styles */
.kickdad_combo-display {
    position: fixed;
    top: 160px;
    left: 20px;
    background: rgba(0,0,0,0.7);
    padding: 10px 15px;
    border-radius: 15px;
    text-align: center;
    z-index: 10;
    transition: all 0.3s ease;
    color: white;
}

.kickdad_combo-count {
    display: block;
    font-size: 2rem;
    font-weight: bold;
}

.kickdad_combo-label {
    display: block;
    font-size: 0.8rem;
    opacity: 0.8;
}

.kickdad_combo-multiplier {
    display: block;
    font-size: 1.2rem;
    color: #ffd700;
}

.kickdad_combo-tier1 { color: #ffd700; }
.kickdad_combo-tier1 .kickdad_combo-count { font-size: 1.5rem; }

.kickdad_combo-tier2 { color: #ff8c00; }
.kickdad_combo-tier2 .kickdad_combo-count { font-size: 1.8rem; text-shadow: 0 0 10px #ff8c00; }

.kickdad_combo-tier3 { color: #ff4757; }
.kickdad_combo-tier3 .kickdad_combo-count { font-size: 2.1rem; text-shadow: 0 0 15px #ff4757; }
.kickdad_combo-tier3 { animation: kickdad_comboPulse 0.5s ease infinite; }

.kickdad_combo-tier4 {
    color: #ffd700;
    animation: kickdad_comboPulse 0.3s ease infinite, kickdad_rainbowGlow 1s linear infinite;
    box-shadow: 0 0 20px rgba(255,215,0,0.5);
}
.kickdad_combo-tier4 .kickdad_combo-count { font-size: 2.5rem; text-shadow: 0 0 20px #ffd700; }

@keyframes kickdad_comboPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes kickdad_rainbowGlow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Tier Display Styles */
.kickdad_tier-display {
    position: fixed;
    top: 100px;
    left: 20px;
    background: rgba(0,0,0,0.7);
    padding: 10px 15px;
    border-radius: 15px;
    text-align: center;
    z-index: 10;
    color: white;
}

.kickdad_tier-label {
    display: block;
    font-size: 0.7rem;
    opacity: 0.7;
}

.kickdad_tier-number {
    display: block;
    font-size: 2rem;
    font-weight: bold;
}

.kickdad_tier-name {
    display: block;
    font-size: 0.9rem;
    color: #ffd700;
}

/* Tier Transition Announcement */
.kickdad_tier-announcement {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 150;
    animation: kickdad_tierAnnounce 2s ease forwards;
    pointer-events: none;
}

.kickdad_tier-title {
    font-size: 3rem;
    font-weight: bold;
    color: white;
    text-shadow: 3px 3px 0 #ff6b6b;
}

.kickdad_tier-subtitle {
    font-size: 1.5rem;
    color: #ffd700;
    margin-top: 10px;
}

@keyframes kickdad_tierAnnounce {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    20% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
    80% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Walking Phase Styles */
.kickdad_walking {
    /* Dad is calm during walking - no wobble */
}

.kickdad_walking .dad-face {
    animation: none;
}

/* Power-up element */
.kickdad_powerup {
    position: fixed;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    animation: kickdad_float 1s ease-in-out infinite;
}

.kickdad_powerup-emoji {
    font-size: 3rem;
    animation: kickdad_glow 1.5s ease-in-out infinite;
}

@keyframes kickdad_float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes kickdad_glow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
    50% { filter: drop-shadow(0 0 25px rgba(255,255,255,0.9)); }
}

/* Effect text popup */
.kickdad_effect-text {
    position: fixed;
    font-size: 2rem;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 2px 2px 0 #ff6b6b;
    pointer-events: none;
    z-index: 150;
    animation: kickdad_effectPop 1s ease forwards;
}

@keyframes kickdad_effectPop {
    0% { transform: scale(0) translateY(0); opacity: 1; }
    50% { transform: scale(1.3) translateY(-20px); opacity: 1; }
    100% { transform: scale(1) translateY(-50px); opacity: 0; }
}

/* Effect states for dad */
.kickdad_frozen {
    filter: brightness(1.3) saturate(0.5) hue-rotate(180deg) !important;
}

.kickdad_frozen .dad-face {
    animation: none !important;
    box-shadow: 0 0 30px 10px rgba(150, 220, 255, 0.6) !important;
}

.kickdad_slowmo {
    filter: sepia(0.3) !important;
}

.kickdad_slowmo .dad-face {
    transition: all 0.8s ease !important;
}

.kickdad_shielded .dad-face {
    box-shadow: 0 0 40px 15px rgba(100, 200, 255, 0.7) !important;
}

/* Effect indicator */
.kickdad_effect-indicator {
    position: fixed;
    top: 160px;
    right: 20px;
    background: rgba(0,0,0,0.8);
    padding: 10px 15px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 20;
    color: white;
    font-weight: bold;
}

.kickdad_effect-emoji {
    font-size: 1.5rem;
}

.kickdad_effect-timer {
    width: 60px;
    height: 8px;
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
    overflow: hidden;
}

.kickdad_effect-timer::after {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #38ef7d, #ffd700);
    border-radius: 4px;
    animation: kickdad_timerShrink var(--duration) linear forwards;
}

@keyframes kickdad_timerShrink {
    from { width: 100%; }
    to { width: 0%; }
}

/* Speed Demon - flame trail */
.kickdad_flame-trail::after {
    content: '\1F525';
    position: absolute;
    font-size: 2rem;
    animation: kickdad_flameTrail 0.3s ease infinite;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes kickdad_flameTrail {
    0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.7; transform: translateX(-50%) scale(1.2); }
}

.kickdad_fire-particle {
    position: fixed;
    font-size: 2rem;
    pointer-events: none;
    animation: kickdad_fireRise 1.5s ease-out forwards;
    z-index: 200;
}

@keyframes kickdad_fireRise {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-300px) scale(0.5); }
}

/* Gentle Soul - hearts */
.kickdad_heart-particle {
    position: fixed;
    font-size: 2rem;
    pointer-events: none;
    animation: kickdad_heartFloat 1.5s ease-out forwards;
    z-index: 200;
}

@keyframes kickdad_heartFloat {
    0% { opacity: 1; transform: translateY(0) scale(0); }
    20% { transform: translateY(-20px) scale(1.2); }
    100% { opacity: 0; transform: translateY(-150px) scale(1); }
}

@keyframes kickdad_gentleWiggle {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
    25% { transform: translate(-50%, -50%) rotate(-3deg); }
    75% { transform: translate(-50%, -50%) rotate(3deg); }
}

/* Rage Mode */
.kickdad_screen-shake {
    animation: kickdad_shake 0.1s ease infinite;
}

@keyframes kickdad_shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px) rotate(-1deg); }
    75% { transform: translateX(10px) rotate(1deg); }
}

.kickdad_rage-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    font-weight: bold;
    color: #ff0000;
    text-shadow: 4px 4px 0 #8B0000;
    animation: kickdad_rageText 2s ease forwards;
    z-index: 300;
    pointer-events: none;
}

@keyframes kickdad_rageText {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-20deg); opacity: 1; }
    20% { transform: translate(-50%, -50%) scale(1.5) rotate(10deg); }
    40% { transform: translate(-50%, -50%) scale(1.3) rotate(-5deg); }
    100% { transform: translate(-50%, -50%) scale(2) rotate(0deg); opacity: 0; }
}

.kickdad_rage-particle {
    position: fixed;
    font-size: 2.5rem;
    pointer-events: none;
    animation: kickdad_rageBurst 1s ease-out forwards;
    z-index: 200;
}

@keyframes kickdad_rageBurst {
    0% { transform: scale(0); opacity: 1; }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); opacity: 0; }
}

/* Combo Master */
.kickdad_combo-master-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.5rem;
    font-weight: bold;
    background: linear-gradient(90deg, red, orange, yellow, green, blue, purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: kickdad_comboMasterText 3s ease forwards;
    z-index: 300;
    pointer-events: none;
}

@keyframes kickdad_comboMasterText {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    20% { transform: translate(-50%, -50%) scale(1.3); }
    80% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.kickdad_rainbow-particle {
    position: fixed;
    font-size: 2rem;
    pointer-events: none;
    animation: kickdad_rainbowBurst 1s ease-out forwards;
    z-index: 200;
}

@keyframes kickdad_rainbowBurst {
    0% { transform: translate(0, 0) scale(0); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; }
}

.kickdad_confetti {
    position: fixed;
    font-size: 1.5rem;
    pointer-events: none;
    animation: kickdad_confettiFall 2s ease-out forwards;
    z-index: 200;
}

@keyframes kickdad_confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* === TIER 6+ MECHANICS CSS === */

/* Teleport (Tier 6+) */
@keyframes teleportOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.3) rotate(360deg); opacity: 0; } }
@keyframes teleportIn { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes poofParticle { from { transform: scale(0.5); opacity: 0.8; } to { transform: scale(2); opacity: 0; } }
.kickdad-teleporting-out { animation: teleportOut 0.15s ease-in forwards !important; }
.kickdad-teleporting-in { animation: teleportIn 0.2s ease-out forwards !important; }
.kickdad-poof { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.7); animation: poofParticle 0.3s ease-out forwards; pointer-events: none; z-index: 10; }

/* Ghost Flicker (Tier 7+) */
.kickdad-ghost-invisible { opacity: 0.05 !important; pointer-events: none; transition: opacity 0.15s ease; }
.kickdad-ghost-visible { filter: drop-shadow(0 0 8px rgba(100, 180, 255, 0.5)); transition: opacity 0.15s ease; }

/* Decoy Dads (Tier 8+) */
.decoy-dad { position: absolute; cursor: pointer; z-index: 5; }
.decoy-dad img { border-radius: 20px; border: 4px solid #ccc; filter: grayscale(0.3) brightness(0.85); object-fit: cover; }
.decoy-dad.decoy-wrong { animation: decoyWrong 0.3s ease; }
@keyframes decoyWrong { 0%,100% { filter: grayscale(0.3) brightness(0.85); } 50% { filter: grayscale(0) brightness(1) sepia(1) hue-rotate(-30deg); } }
.decoy-penalty { position: fixed; font-size: 2rem; font-weight: bold; color: #ff4444; text-shadow: 2px 2px 0 #880000; pointer-events: none; z-index: 150; animation: kickTextPop 0.6s ease-out forwards; }

/* Projectiles (Tier 9) */
.kickdad-projectile { position: absolute; font-size: 40px; z-index: 20; cursor: pointer; pointer-events: auto; animation: projectileFly var(--fly-duration, 1.5s) linear forwards; }
@keyframes projectileFly { from { transform: scale(0.5) rotate(0deg); } to { transform: scale(1.5) rotate(720deg); } }
.kickdad-obstruction { position: fixed; z-index: 15; background: rgba(0,0,0,0.4); border-radius: 20px; backdrop-filter: blur(3px); pointer-events: none; display: flex; align-items: center; justify-content: center; font-size: 60px; animation: obstructionFade 2s ease forwards; }
@keyframes obstructionFade { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.kickdad-deflect-burst { position: absolute; font-size: 30px; pointer-events: none; z-index: 25; animation: kickTextPop 0.6s ease-out forwards; }

/* Reverse Zone (Tier 8+) */
.kickdad-reversed { transform: scaleX(-1); }
.kickdad-reverse-text { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; font-weight: bold; color: #ff00ff; text-shadow: 3px 3px 0 #8800aa; pointer-events: none; z-index: 150; animation: kickdad_tierAnnounce 2s ease forwards; }

/* Happy Bounce (reset animation) */
@keyframes happyBounce {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

/* Super Happy Dance (easter egg) */
@keyframes superHappyDance {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    10% { transform: translate(-50%, -50%) scale(1.2) rotate(-10deg); }
    20% { transform: translate(-50%, -50%) scale(1.1) rotate(10deg); }
    30% { transform: translate(-50%, -50%) scale(1.2) rotate(-10deg); }
    40% { transform: translate(-50%, -50%) scale(1.1) rotate(10deg); }
    50% { transform: translate(-50%, -50%) scale(1.3) rotate(0deg); }
    60% { transform: translate(-50%, -50%) scale(1.1) rotate(-5deg); }
    70% { transform: translate(-50%, -50%) scale(1.2) rotate(5deg); }
    80% { transform: translate(-50%, -50%) scale(1.1) rotate(-5deg); }
    90% { transform: translate(-50%, -50%) scale(1.15) rotate(5deg); }
}

@media (max-width: 600px) {
    h1 {
        font-size: 1.4rem;
    }

    .dad-face {
        width: 160px;
        height: 200px;
    }

    .score-box span {
        font-size: 1.4rem;
    }

    .kick-text {
        font-size: 2rem;
    }

    .dad-speech {
        font-size: 0.9rem;
        padding: 8px 12px;
    }

    .speed-indicator {
        top: auto;
        bottom: 80px;
        right: 10px;
    }

    .kickdad_tier-display {
        top: auto;
        bottom: 140px;
        left: 10px;
    }

    .kickdad_combo-display {
        top: auto;
        bottom: 200px;
        left: 10px;
    }

    .kickdad_effect-indicator {
        top: auto;
        bottom: 260px;
        right: 10px;
    }

    .decoy-dad img {
        width: 160px !important;
        height: 200px !important;
    }
}