/**
 * ACID - KwasneZelki :: Styles V1.8 (Landscape Mobile Fixes)
 */

/* === Setup === */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    --neon-green: #aeff00;
    --neon-green-rgb: 174, 255, 0;
    --neon-green-bright: #d0ff8a;
    --dark-teal: #1c3b4a;
    --medium-teal: #3a6b7c;
    --light-cyan: #d0f0f8;
    --grey: #4a4a4a;
    --background-dark: #050308;
    --content-box-border-top-width: 4px;
    --max-content-width: 550px;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; /* Default alignment */
    background-color: var(--background-dark);
    color: var(--light-cyan);
    font-family: 'Press Start 2P', cursive;
    overflow: hidden; /* Prevents scrollbars from effects */
    padding: 20px;
    box-sizing: border-box;
}

/* === Core Layout & Stacking === */
#background-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.container { /* Base Desktop Styles */
    width: 100%;
    max-width: var(--max-content-width);
    margin: 0 auto;
    position: relative;
    padding-top: 100px; /* Default space for sprite */
    z-index: 1;
    opacity: 0; /* Fades in via JS */
}

.content-box { /* Base Desktop Styles */
    width: 350px;
    max-width: 90%; /* Limit on smaller screens */
    margin: 0 auto 20px;
    padding: 40px 30px 30px;
    border: 3px solid var(--medium-teal);
    border-top: var(--content-box-border-top-width) solid var(--neon-green);
    background-color: rgba(10, 20, 25, 0.85);
    box-shadow: 0 0 15px rgba(var(--neon-green-rgb), 0.3);
    text-align: center;
    box-sizing: border-box;
    position: relative; /* Stacking context for pseudos */
    z-index: 3;
}

#drip-canvas { /* Base Desktop Styles */
    position: absolute;
    top: 100px; /* Matches container padding */
    left: 0;
    width: 100%;
    height: 400px;
    z-index: 4;    /* Above content-box */
    pointer-events: none;
}

#lynx-sprite { /* Base Desktop Styles */
    position: absolute;
    width: 100px;
    height: 100px;
    top: 5px; /* Position within container's top padding */
    left: 95px;
    z-index: 5; /* Above drips */
    opacity: 1;
    transform-origin: bottom center;
    cursor: pointer;
    animation: idleSway 4s ease-in-out infinite;
    transition: transform 0.3s ease;
}
#lynx-sprite:hover { transform: scale(1.08); }
#lynx-sprite.bounce-active { animation: spriteSquashBounce 0.6s ease-out forwards; }

.particle {
    position: absolute; /* Relative to .container */
    z-index: 4; /* Same level as drip canvas is generally okay */
    pointer-events: none;
    width: 6px;
    height: 6px;
    background-color: var(--neon-green);
    opacity: 1;
    animation: spreadAndFade 0.9s linear forwards;
}

/* Content Box Border Effects */
.content-box::before { /* Glow */
    content: '';
    position: absolute;
    z-index: 1; /* Within content-box context */
    pointer-events: none;
    top: calc(-1 * var(--content-box-border-top-width) - 1px);
    left: -3px; right: -3px; height: 6px;
    background: var(--neon-green);
    box-shadow: 0 1px 0 0px var(--neon-green-bright), 0 2px 0 0px var(--neon-green),
                0 0 8px 4px rgba(var(--neon-green-rgb), 0.6);
    filter: blur(2px);
    transform-origin: center center;
    animation: topBarIntensityPulse 4s ease-in-out infinite;
}
.content-box::after { /* Accent Cap */
    content: '';
    position: absolute;
    z-index: 2; /* Within content-box context */
    pointer-events: none;
    top: calc(-1 * var(--content-box-border-top-width));
    left: -3px; right: -3px; height: 2px;
    background-color: var(--neon-green-bright);
    opacity: 0.90;
    border-radius: 1px;
    filter: blur(2px);
    box-shadow: 0 2px 0 0 var(--neon-green);
    animation: topAccentPulse 4.5s ease-in-out infinite alternate;
}

/* Inner Content Styling */
.box-header { margin-bottom: 15px; text-align: center; position: relative; z-index: 3; /* Ensure text above pseudos */ }
.box-header h1 { font-size: 2.2rem; color: var(--neon-green); margin: 0 0 5px; line-height: 1.1; text-shadow: 3px 3px 0 var(--dark-teal); animation: acidPulse 6s ease-in-out infinite; }
.box-header .subtitle { font-size: .8rem; color: var(--light-cyan); margin: 0; opacity: .9; }
hr.divider { border: none; height: 2px; background-color: var(--medium-teal); opacity: .6; margin: 20px auto; width: 80%; position: relative; z-index: 3; }
.intro-text { font-size: .75rem; line-height: 1.7; color: var(--light-cyan); opacity: .9; margin-bottom: 25px; text-align: center; position: relative; z-index: 3; }
.social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; position: relative; z-index: 3; }
.social-links a { color: var(--neon-green); text-decoration: none; font-size: .8rem; transition: all .2s ease-in-out; padding: 3px 0; }
.social-links a:hover, .social-links a:focus { color: #fff; background-color: rgba(var(--neon-green-rgb), .15); transform: translateY(-2px) scale(1.05); outline: none; text-shadow: 0 0 8px var(--neon-green); }
.site-footer { margin-top: 30px; font-size: .65rem; color: var(--grey); opacity: .8; text-align: center; position: relative; z-index: 1; }
.footer-emote { display: inline-block; color: var(--neon-green); transform-origin: center center; animation: breathingScale 4s ease-in-out infinite, rainbowHue 5s linear infinite; }

/* === Base Animations === */
@keyframes idleSway { 0%, 50%, 100% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(-1.5deg) translateY(-1px); } 75% { transform: rotate(1.5deg) translateY(0px); } }
@keyframes acidPulse { 0%, 100% { color: var(--neon-green); text-shadow: 3px 3px 0 var(--dark-teal); } 50% { color: var(--neon-green-bright); text-shadow: 3px 3px 0 var(--dark-teal), 0 0 5px rgba(var(--neon-green-rgb), 1), 0 0 12px rgba(var(--neon-green-rgb), .8), 0 0 25px rgba(var(--neon-green-rgb), .6), 0 0 40px rgba(var(--neon-green-rgb), .4); } }
@keyframes spriteSquashBounce { 0% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(3px) scale(1.1, .9); } 40% { transform: translateY(-18px) scale(.9, 1.1); } 60% { transform: translateY(-20px) scale(1.05, .95); } 85% { transform: translateY(0) scale(1.2, .8); } 95% { transform: translateY(-3px) scale(.95, 1.05); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes spreadAndFade { 0% { transform: translate(0, 0) rotate(var(--rot, 0deg)); opacity: 1; } 50% { transform: translate(var(--apex-tx), var(--apex-ty)) rotate(var(--rot, 0deg)); opacity: .9; } 100% { transform: translate(var(--final-tx), var(--final-ty)) rotate(var(--rot, 0deg)); opacity: 0; } }
@keyframes topBarIntensityPulse { 0%, 100% { opacity: 1; filter: blur(2px); box-shadow: 0 1px 0 0px var(--neon-green-bright), 0 2px 0 0px var(--neon-green), 0 0 8px 4px rgba(var(--neon-green-rgb), .6); } 50% { opacity: 1; filter: blur(5px); box-shadow: 0 1px 0 0px var(--neon-green-bright), 0 2px 0 0px var(--neon-green), 0 0 12px 5px rgba(var(--neon-green-rgb), .75); } }
@keyframes topAccentPulse { 0% { opacity: 0.95; filter: brightness(1.0); } 100% { opacity: 1.0; filter: brightness(1.3); } }
@keyframes breathingScale { 0%, 100% { transform: scale(1.0); } 50% { transform: scale(1.18); } }
@keyframes rainbowHue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
/* Mobile Specific Animations */
@keyframes idleSwayMobile { 0%, 50%, 100% { transform: translateX(-50%) rotate(0deg) translateY(0); } 25% { transform: translateX(-50%) rotate(-1.5deg) translateY(-1px); } 75% { transform: translateX(-50%) rotate(1.5deg) translateY(0px); } }
@keyframes spriteSquashBounceMobile { 0% { transform: translateX(-50%) translateY(0) scale(1, 1); } 15% { transform: translateX(-50%) translateY(3px) scale(1.1, .9); } 40% { transform: translateX(-50%) translateY(-18px) scale(.9, 1.1); } 60% { transform: translateX(-50%) translateY(-20px) scale(1.05, .95); } 85% { transform: translateX(-50%) translateY(0) scale(1.2, .8); } 95% { transform: translateX(-50%) translateY(-3px) scale(.95, 1.05); } 100% { transform: translateX(-50%) translateY(0) scale(1, 1); } }


/* === Responsive: Portrait Mobile (Narrow Width) === */
@media(max-width: 600px) {
    .container {
        padding-top: 80px; /* Reduced padding */
        max-width: 95%;
    }
    .content-box {
        padding: 30px 15px 20px; /* Reduced padding */
        width: 90%; /* More flexible width */
    }
    .content-box::before, .content-box::after {
        left: -3px; right: -3px; /* Ensure pseudos cover border */
    }

    #drip-canvas {
        top: 80px; /* Adjust drip canvas top to match container padding */
        height: 300px; /* Reduce height */
    }

    #lynx-sprite {
        width: 80px; height: 80px; /* Smaller sprite */
        top: 3px; /* Adjust top within reduced padding */
        left: 50%;
        transform: translateX(-50%); /* Center horizontally */
        animation-name: idleSwayMobile; /* Use mobile animation */
    }
    #lynx-sprite:hover { transform: translateX(-50%) scale(1.08); }
    #lynx-sprite.bounce-active { animation-name: spriteSquashBounceMobile; }

    /* Smaller fonts */
    .box-header h1 { font-size: 1.8rem; }
    .box-header .subtitle { font-size: .7rem; }
    .intro-text, .social-links a { font-size: .7rem; }
    .social-links { gap: 10px; }
    .site-footer { margin-top: 20px; }
}

/* === Responsive: Landscape Mobile (Short Height) === */
/* Targets landscape orientation on devices with typical mobile height */
@media (orientation: landscape) and (max-height: 500px) {
    body {
        align-items: flex-start; /* Align container to top for more space */
        padding: 10px; /* Reduce body padding */
    }
    .container {
        padding-top: 40px; /* Significantly reduce top padding */
        max-width: 98%;    /* Allow slightly wider container */
        display: flex;      /* Use flexbox for better centering */
        flex-direction: column;
        justify-content: flex-start; /* Align content box towards top */
    }
    .content-box {
        width: 85%;        /* Flexible width */
        max-width: 400px;  /* Limit max width */
        padding: 15px 15px 15px; /* Reduce padding */
        margin: 0 auto 10px; /* Center horizontally, less bottom margin */
    }
     /* Optional: Tweak pseudos if they look too large */
     /* .content-box::before, .content-box::after { filter: blur(1px); } */

    #drip-canvas {
        top: 40px;   /* Match reduced container padding */
        height: 180px; /* Reduce drip canvas height drastically */
    }

    #lynx-sprite {
        width: 60px; height: 60px; /* Make sprite smaller */
        top: -5px;                  /* Adjust top relative to reduced padding */
        left: 50%;
        transform: translateX(-50%); /* Keep centered */
        animation-name: idleSwayMobile; /* Reuse mobile animation logic */
    }
     #lynx-sprite:hover { transform: translateX(-50%) scale(1.08); }
     #lynx-sprite.bounce-active { animation-name: spriteSquashBounceMobile; }

    /* Adjust fonts and spacing for very short screens */
    .box-header { margin-bottom: 8px; }
    .box-header h1 { font-size: 1.3rem; } /* Smaller title */
    .box-header .subtitle { font-size: .6rem; }
    hr.divider { margin: 8px auto; width: 70%; }
    .intro-text { font-size: .6rem; line-height: 1.4; margin-bottom: 10px; }
    .social-links { gap: 8px; }
    .social-links a { font-size: .6rem; }
    .site-footer { margin-top: 10px; font-size: .5rem; }
}

/* === Desktop Fallback / Overrides === */
/* This ensures desktop styles apply above 600px unless overridden by landscape */
@media(min-width: 601px) {
    /* Reset elements to desktop state ONLY if NOT landscape mobile */
    @media not all and (orientation: landscape) and (max-height: 500px) {
         .container { padding-top: 100px; }
         .content-box { width: 350px; padding: 40px 30px 30px; }
         #drip-canvas { top: 100px; height: 400px; }
         #lynx-sprite {
            width: 100px; height: 100px;
            top: 5px; left: 95px; transform: none;
            animation-name: idleSway;
         }
         #lynx-sprite:hover { transform: scale(1.08); } /* Override landscape hover */
         #lynx-sprite.bounce-active { animation-name: spriteSquashBounce; }

         /* Reset font sizes */
         .box-header h1 { font-size: 2.2rem; }
         .box-header .subtitle { font-size: .8rem; }
         .intro-text { font-size: .75rem; }
         .social-links a { font-size: .8rem; }
         .site-footer { font-size: .65rem; }
    }
}