/* ============================================
   LOOP - THE WIZARD FROG
   Pixel Art Website Styles
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES (THEMES)
   ============================================ */
:root {
    /* Night Theme (Default) */
    --bg-primary: #0d1b2a;
    --bg-secondary: #1b263b;
    --bg-tertiary: #243447;
    --text-primary: #e0e7ff;
    --text-secondary: #a3b8cc;
    --accent-green: #4a7c59;
    --accent-moss: #6b8f71;
    --accent-lavender: #9381ff;
    --accent-moonlight: #7ec8e3;
    --accent-yellow: #ffd166;
    --accent-warm: #ef8354;
    --glow-color: rgba(126, 200, 227, 0.4);
    --portal-glow: rgba(147, 129, 255, 0.6);
    
    /* Background image */
    --bg-image: url('./public/darkbackground.png');
    
    /* Pixel sizing */
    --pixel-size: 4px;
    --border-width: 4px;
    
    /* Animation speeds */
    --breathe-speed: 4s;
    --float-speed: 6s;
    --glow-speed: 3s;
}

/* Day Theme */
[data-theme="day"] {
    --bg-primary: #f5e6d3;
    --bg-secondary: #e8d4b8;
    --bg-tertiary: #d4c4a8;
    --text-primary: #3d2914;
    --text-secondary: #5c4023;
    --accent-green: #4a7c59;
    --accent-moss: #6b8f71;
    --accent-lavender: #8b7355;
    --accent-moonlight: #f4a460;
    --accent-yellow: #daa520;
    --accent-warm: #cd853f;
    --glow-color: rgba(218, 165, 32, 0.5);
    --portal-glow: rgba(205, 133, 63, 0.7);
    
    /* Day background image */
    --bg-image: url('./public/background.png');
}


/* ============================================
   RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

body {
    font-family: 'Press Start 2P', monospace;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect x="12" y="4" width="8" height="4" fill="%234a7c59"/><rect x="8" y="8" width="4" height="4" fill="%234a7c59"/><rect x="20" y="8" width="4" height="4" fill="%234a7c59"/><rect x="8" y="12" width="4" height="4" fill="%23ffd166"/><rect x="12" y="12" width="8" height="4" fill="%236b8f71"/><rect x="20" y="12" width="4" height="4" fill="%23ffd166"/><rect x="8" y="16" width="16" height="4" fill="%236b8f71"/><rect x="4" y="20" width="8" height="4" fill="%236b8f71"/><rect x="20" y="20" width="8" height="4" fill="%236b8f71"/><rect x="4" y="24" width="4" height="4" fill="%236b8f71"/><rect x="24" y="24" width="4" height="4" fill="%236b8f71"/></svg>') 16 16, auto;
    transition: background-image 0.5s ease, background-color 0.5s ease, color 0.5s ease;
}

/* ============================================
   PIXEL FONT STYLING
   ============================================ */
.pixel-title {
    font-size: clamp(2rem, 8vw, 4rem);
    letter-spacing: 0.1em;
    text-shadow: 
        2px 2px 0 rgba(0, 0, 0, 0.8),
        4px 4px 0 var(--accent-lavender),
        0 0 30px rgba(147, 129, 255, 0.5);
    animation: titleFloat var(--float-speed) ease-in-out infinite;
}

.pixel-subtitle {
    font-size: clamp(0.5rem, 2vw, 0.8rem);
    line-height: 2.5;
    color: var(--text-primary);
    text-align: center;
    max-width: 600px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    animation: fadeInUp 2s ease-out 0.5s both;
}

/* ============================================
   PARTICLE CANVAS
   ============================================ */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

/* ============================================
   SECTION BASE STYLES
   ============================================ */
.section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transition: transform 0.1s ease-out;
}

/* ============================================
   AUDIO CONTROLS
   ============================================ */
.audio-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 12px;
    z-index: 1000;
}

.pixel-btn {
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'Press Start 2P', monospace;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.pixel-btn:hover {
    background: rgba(147, 129, 255, 0.6);
    border-color: var(--accent-lavender);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(147, 129, 255, 0.4);
}

.pixel-btn:active {
    transform: translateY(0);
}

/* Play Game Button */
.play-game-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(85, 239, 196, 0.3) !important;
    border-color: #55efc4 !important;
    animation: playBtnPulse 2s ease-in-out infinite;
}

.play-game-btn:hover {
    background: rgba(85, 239, 196, 0.6) !important;
    border-color: #55efc4 !important;
    box-shadow: 0 4px 20px rgba(85, 239, 196, 0.5) !important;
}

@keyframes playBtnPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(85, 239, 196, 0.3); }
    50% { box-shadow: 0 0 20px rgba(85, 239, 196, 0.6); }
}

/* Audio toggle states */
#audio-toggle .sound-off,
#audio-toggle.playing .sound-on {
    display: none;
}

#audio-toggle.playing .sound-off {
    display: none;
}

#audio-toggle .sound-on {
    display: inline;
}

#audio-toggle.playing .sound-on {
    display: inline;
    animation: pulse 1s infinite;
}

/* Theme toggle states */
[data-theme="night"] #theme-toggle .sun {
    display: none;
}

[data-theme="day"] #theme-toggle .moon {
    display: none;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
    background: transparent;
}

.hero-bg {
    /* Clean background - let the image show through */
    background: transparent;
}

.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    text-align: center;
}

/* Parchment Container */
.parchment-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Loop behind parchment */
.loop-peek {
    position: absolute;
    z-index: 0;
    top: -80px;
    left: 50%;
    margin-left: -125px; /* Half of max width to center */
    cursor: pointer;
}

.loop-sprite-animated {
    transition: transform 0.8s ease-in-out;
}

.loop-peek:hover .loop-sprite-animated {
    transform: scale(1.08) translateY(-40px);
}

/* Loop Frame Animation */
.loop-sprite-animated {
    position: relative;
    width: clamp(150px, 30vw, 250px);
    height: clamp(150px, 30vw, 250px);
}

.loop-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.5));
    opacity: 0;
}

.loop-frame { opacity: 0; }
.loop-frame.frame-1 { animation: frame1 1.2s steps(1) infinite; }
.loop-frame.frame-2 { animation: frame2 1.2s steps(1) infinite; }
.loop-frame.frame-3 { animation: frame3 1.2s steps(1) infinite; }
.loop-frame.frame-4 { animation: frame4 1.2s steps(1) infinite; }

@keyframes frame1 {
    0%, 100% { opacity: 1; }
    25%, 99.9% { opacity: 0; }
}
@keyframes frame2 {
    0%, 24.9% { opacity: 0; }
    25%, 49.9% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes frame3 {
    0%, 49.9% { opacity: 0; }
    50%, 74.9% { opacity: 1; }
    75%, 100% { opacity: 0; }
}
@keyframes frame4 {
    0%, 74.9% { opacity: 0; }
    75%, 99.9% { opacity: 1; }
    100% { opacity: 0; }
}

/* Parchment Sheet - using text.png */
.parchment {
    position: relative;
    z-index: 1;
    background: url('public/text.png') center center / contain no-repeat;
    padding: 3rem 2.5rem;
    margin-top: 60px;
    min-width: clamp(300px, 80vw, 600px);
    min-height: clamp(200px, 40vw, 350px);
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
}

.parchment-content {
    text-align: center;
}

.parchment .pixel-title {
    color: #4a3728;
    text-shadow: 
        3px 3px 0 rgba(139, 90, 43, 0.3);
    margin-bottom: 1rem;
    font-size: clamp(2rem, 8vw, 3.5rem);
}

.parchment .pixel-subtitle {
    color: #5c4033;
    text-shadow: none;
    font-size: clamp(0.55rem, 2vw, 0.85rem);
    line-height: 2.2;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    animation: bounce 2s ease-in-out infinite;
}

.scroll-indicator .arrow {
    font-size: 1.5rem;
    color: var(--accent-yellow);
    text-shadow: 0 0 10px var(--accent-yellow);
}

/* ============================================
   STORY SECTION
   ============================================ */
.story-section {
    background: transparent;
}

.story-bg {
    /* Clean background - let the image show through */
    background: transparent;
}

.story-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding: 2rem;
    text-align: center;
}

.story-text {
    font-size: clamp(0.5rem, 1.8vw, 0.75rem);
    line-height: 2.8;
    color: var(--text-primary);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9);
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

.story-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Portal */
.portal-container {
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.portal-container:hover {
    transform: scale(1.05);
}

.portal-img {
    width: clamp(150px, 30vw, 300px);
    height: auto;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    position: relative;
    z-index: 2;
}

.portal-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(
        ellipse at center,
        var(--portal-glow) 0%,
        transparent 70%
    );
    animation: portalPulse var(--glow-speed) ease-in-out infinite;
    z-index: 1;
}

.portal-hint {
    font-size: 0.5rem;
    color: var(--accent-lavender);
    animation: blink 2s ease-in-out infinite;
}

/* ============================================
   MEDIA SECTION
   ============================================ */
.media-section {
    background: transparent;
    padding: 4rem 2rem;
}

.media-bg {
    /* Clean background - let the image show through */
    background: transparent;
}

.media-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-size: clamp(1rem, 4vw, 1.5rem);
    text-align: center;
    margin-bottom: 3rem;
    color: var(--accent-yellow);
    text-shadow: 
        2px 2px 0 rgba(0, 0, 0, 0.8),
        0 0 20px rgba(255, 209, 102, 0.4);
}

/* Memory Grid */
.memory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 1rem;
}

.memory-frame {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.memory-frame:hover {
    transform: translateY(-8px);
}

.memory-frame:hover .frame-border {
    border-color: var(--accent-yellow);
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(255, 209, 102, 0.3);
}

.frame-border {
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.memory-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
}

.frame-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.memory-frame:hover .frame-overlay {
    opacity: 1;
}

.frame-overlay span {
    font-size: 2rem;
    color: var(--accent-yellow);
    text-shadow: 0 0 20px var(--accent-yellow);
}

.memory-label {
    font-size: 0.6rem;
    text-align: center;
    margin-top: 1rem;
    color: var(--text-primary);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* ============================================
   FUTURE SECTION
   ============================================ */
.future-section {
    background: transparent;
    min-height: 60vh;
}

.future-bg {
    /* Clean background - let the image show through */
    background: transparent;
}

.future-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.crt-text {
    font-size: clamp(0.7rem, 3vw, 1.2rem);
    color: var(--accent-moonlight);
    animation: crtFlicker 0.15s infinite;
    text-shadow: 
        0 0 10px var(--accent-moonlight),
        0 0 20px var(--accent-moonlight),
        0 0 40px var(--accent-lavender);
}

/* ============================================
   MODAL
   ============================================ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
}

.modal-close {
    position: absolute;
    top: -60px;
    right: 0;
    z-index: 10;
}

/* CRT Screen Effect */
.crt-screen {
    position: relative;
    background: #000;
    border: 8px solid #333;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        inset 0 0 100px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(147, 129, 255, 0.3);
}

.crt-content {
    position: relative;
    z-index: 1;
}

.crt-content video,
.crt-content img {
    width: 100%;
    height: auto;
    display: block;
    image-rendering: pixelated;
}

.crt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(
            ellipse at center,
            transparent 0%,
            rgba(0, 0, 0, 0.3) 100%
        );
    pointer-events: none;
    z-index: 2;
}

.crt-scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.3) 2px,
        rgba(0, 0, 0, 0.3) 4px
    );
    pointer-events: none;
    z-index: 3;
    animation: scanlines 0.1s linear infinite;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes breathe {
    0%, 100% {
        transform: scale(1) translateY(0);
    }
    50% {
        transform: scale(1.02) translateY(-5px);
    }
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes portalPulse {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

@keyframes crtFlicker {
    0% {
        opacity: 0.97;
    }
    5% {
        opacity: 1;
    }
    10% {
        opacity: 0.98;
    }
    15% {
        opacity: 1;
    }
    20% {
        opacity: 0.96;
    }
    100% {
        opacity: 1;
    }
}

@keyframes scanlines {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(4px);
    }
}

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

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    :root {
        --pixel-size: 2px;
        --border-width: 3px;
    }
    
    .audio-controls {
        top: 10px;
        right: 10px;
    }
    
    .pixel-btn {
        width: 40px;
        height: 40px;
        font-size: 0.8rem;
    }
    
    .hero-content {
        padding: 1rem;
        gap: 1.5rem;
    }
    
    .loop-sprite {
        width: clamp(180px, 60vw, 300px);
    }
    
    .pixel-title {
        font-size: clamp(1.5rem, 10vw, 3rem);
    }
    
    .pixel-subtitle {
        font-size: clamp(0.4rem, 2.5vw, 0.6rem);
        line-height: 2.2;
    }
    
    .story-text {
        font-size: clamp(0.4rem, 2.5vw, 0.6rem);
        line-height: 2.5;
        padding: 0 1rem;
    }
    
    .portal-img {
        width: clamp(120px, 50vw, 200px);
    }
    
    .memory-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0.5rem;
    }
    
    .section-title {
        font-size: clamp(0.8rem, 5vw, 1.2rem);
        margin-bottom: 2rem;
    }
    
    .memory-label {
        font-size: 0.5rem;
    }
    
    .crt-text {
        font-size: clamp(0.5rem, 4vw, 0.9rem);
        padding: 0 1rem;
    }
    
    .modal-content {
        width: 95%;
    }
    
    .crt-screen {
        border-width: 4px;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .memory-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .scroll-indicator {
        bottom: 20px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for keyboard navigation */
.pixel-btn:focus,
.memory-frame:focus,
.portal-container:focus {
    outline: 3px solid var(--accent-yellow);
    outline-offset: 3px;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-lavender);
    border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-moonlight);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-lavender) var(--bg-primary);
}

/* ============================================
   LOADING SCREEN
   ============================================ */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(13, 27, 42, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.8s ease, backdrop-filter 0.8s ease, visibility 0.8s ease;
}

.loading-screen.hidden {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    visibility: hidden;
    pointer-events: none;
}

.loading-content {
    text-align: center;
    animation: fadeInUp 0.5s ease-out;
}

.loading-frog {
    width: 120px;
    height: auto;
    image-rendering: pixelated;
    animation: loadingFloat 2s ease-in-out infinite;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}

.loading-text {
    font-size: 0.6rem;
    color: var(--text-primary);
    margin-top: 1.5rem;
    opacity: 0.8;
    animation: loadingPulse 1.5s ease-in-out infinite;
}

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

@keyframes loadingPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ============================================
   CURSOR TRAIL
   ============================================ */
#cursor-trail-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
}

/* ============================================
   FLOATING MAGICAL ELEMENTS
   ============================================ */
.floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.floating-item {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.6;
    animation: floatAround 20s linear infinite;
    filter: drop-shadow(0 0 10px currentColor);
}

.floating-item.mushroom { top: 20%; left: 5%; animation-delay: 0s; animation-duration: 25s; }
.floating-item.crystal { top: 60%; left: 90%; animation-delay: -5s; animation-duration: 22s; }
.floating-item.potion { top: 80%; left: 15%; animation-delay: -10s; animation-duration: 28s; }
.floating-item.star { top: 10%; left: 80%; animation-delay: -3s; animation-duration: 18s; }
.floating-item.leaf { top: 40%; left: 95%; animation-delay: -8s; animation-duration: 30s; }
.floating-item.sparkle { top: 70%; left: 50%; animation-delay: -12s; animation-duration: 24s; }

@keyframes floatAround {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translate(-100vw, -20vh) rotate(360deg); opacity: 0; }
}

/* ============================================
   LANTERNS
   ============================================ */
.lantern {
    position: fixed;
    font-size: 2rem;
    z-index: 60;
    animation: lanternGlow 3s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 165, 0, 0.6));
}

.lantern-left { top: 30%; left: 20px; animation-delay: 0s; }
.lantern-right { top: 50%; right: 20px; animation-delay: 1.5s; }

@keyframes lanternGlow {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(255, 165, 0, 0.4)); transform: rotate(-5deg); }
    50% { filter: drop-shadow(0 0 30px rgba(255, 165, 0, 0.8)); transform: rotate(5deg); }
}

/* ============================================
   GRASS ANIMATION
   ============================================ */
.grass-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    z-index: 5;
    pointer-events: none;
}

.grass-blade {
    width: 8px;
    height: 40px;
    background: linear-gradient(to top, #2d5a27, #4a7c59);
    border-radius: 50% 50% 0 0;
    transform-origin: bottom center;
    animation: grassSway 3s ease-in-out infinite;
}

.grass-blade:nth-child(1) { animation-delay: 0s; height: 35px; }
.grass-blade:nth-child(2) { animation-delay: 0.2s; height: 45px; }
.grass-blade:nth-child(3) { animation-delay: 0.4s; height: 38px; }
.grass-blade:nth-child(4) { animation-delay: 0.6s; height: 42px; }
.grass-blade:nth-child(5) { animation-delay: 0.8s; height: 36px; }

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

/* ============================================
   LOOP ANIMATIONS (Blink & Sparkle)
   ============================================ */
.loop-peek:hover .hat-sparkle {
    opacity: 1;
}

.hat-sparkle {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 20px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hat-sparkle::before,
.hat-sparkle::after {
    content: '✨';
    position: absolute;
    font-size: 1rem;
    animation: sparkleFloat 1s ease-in-out infinite;
}

.hat-sparkle::after {
    left: 10px;
    animation-delay: 0.5s;
}

@keyframes sparkleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-10px) scale(1.2); opacity: 0.5; }
}

.loop-blink {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 8px;
    opacity: 0;
    animation: blinkEyes 4s ease-in-out infinite;
}

@keyframes blinkEyes {
    0%, 95%, 100% { opacity: 0; }
    96%, 99% { opacity: 1; }
}

/* ============================================
   CHARACTER STATS SECTION
   ============================================ */
.stats-section {
    background: transparent;
    padding: 4rem 2rem;
}

.stats-bg {
    background: transparent;
}

.stats-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.character-sheet {
    background: rgba(0, 0, 0, 0.7);
    border: 3px solid var(--accent-lavender);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.stat-portrait {
    position: relative;
    width: 150px;
    height: 150px;
}

.portrait-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.portrait-frame {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 3px solid var(--accent-yellow);
    border-radius: 8px;
    pointer-events: none;
}

.stat-info {
    flex: 1;
    min-width: 250px;
}

.stat-name {
    font-size: 1rem;
    color: var(--accent-yellow);
    margin-bottom: 0.5rem;
}

.stat-class {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.stat-bars {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.stat-row {
    display: grid;
    grid-template-columns: 75px 1fr 65px;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.45rem;
}

.stat-row.good .stat-label {
    color: var(--accent-yellow);
}

.stat-row.bad .stat-label {
    color: #636e72;
}

.stat-divider {
    text-align: center;
    font-size: 0.4rem;
    color: var(--text-secondary);
    margin: 0.3rem 0;
    opacity: 0.5;
}

.stat-label {
    text-align: left;
    white-space: nowrap;
}

.stat-bar {
    height: 14px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 7px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.stat-bar.empty {
    background: rgba(100, 100, 100, 0.2);
}

.stat-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 1s ease;
}

.creativity-fill { width: 100%; background: linear-gradient(90deg, #ff6b6b, #feca57); }
.vibes-fill { width: 100%; background: linear-gradient(90deg, #a29bfe, #fd79a8); }
.cozy-fill { width: 100%; background: linear-gradient(90deg, #00d2d3, #54a0ff); }
.frog-fill { width: 100%; background: linear-gradient(90deg, #00b894, #55efc4); }
.comfy-fill { width: 100%; background: linear-gradient(90deg, #ff9f43, #ee5a24); }
.moon-fill { width: 85%; background: linear-gradient(90deg, #9b59b6, #f39c12); }
.fud-fill { width: 0%; background: #636e72; }
.paper-fill { width: 0%; background: #636e72; }
.rug-fill { width: 0%; background: #636e72; }
.drama-fill { width: 0%; background: #636e72; }

.stat-value {
    text-align: right;
    color: var(--accent-moonlight);
    font-size: 0.45rem;
}

.stat-row.bad .stat-value {
    color: #636e72;
}

.stat-abilities {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ability {
    font-size: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: rgba(147, 129, 255, 0.3);
    border: 1px solid var(--accent-lavender);
    border-radius: 4px;
}

/* ============================================
   JOURNEY MAP SECTION
   ============================================ */
.journey-section {
    background: transparent;
    padding: 4rem 2rem;
}

.journey-bg {
    background: transparent;
}

.journey-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.journey-map {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0;
    flex-wrap: wrap;
    gap: 1rem;
}

.journey-path {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-moss), var(--accent-lavender), rgba(255,255,255,0.2));
    transform: translateY(-50%);
    z-index: 0;
}

.journey-point {
    position: relative;
    z-index: 1;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.journey-point:hover {
    transform: scale(1.1);
}

.point-icon {
    width: 60px;
    height: 60px;
    background: var(--bg-secondary);
    border: 3px solid var(--accent-lavender);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 0.5rem;
    transition: all 0.3s ease;
}

.journey-point.completed .point-icon {
    border-color: var(--accent-moss);
    box-shadow: 0 0 15px rgba(107, 143, 113, 0.5);
}

.journey-point.active .point-icon {
    border-color: var(--accent-yellow);
    box-shadow: 0 0 20px rgba(255, 209, 102, 0.6);
    animation: activePulse 2s ease-in-out infinite;
}

.journey-point.locked .point-icon {
    filter: grayscale(1);
    opacity: 0.5;
}

@keyframes activePulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 209, 102, 0.6); }
    50% { box-shadow: 0 0 30px rgba(255, 209, 102, 0.9); }
}

.point-label {
    font-size: 0.5rem;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.point-desc {
    font-size: 0.4rem;
    color: var(--text-secondary);
    max-width: 100px;
}

/* ============================================
   FRIENDS/BESTIARY SECTION
   ============================================ */
.friends-section {
    background: transparent;
    padding: 4rem 2rem;
}

.friends-bg {
    background: transparent;
}

.friends-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.category-section {
    margin-bottom: 3rem;
}

.category-title {
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 0.5rem 1rem;
    display: inline-block;
    width: 100%;
}

.category-title.friend-title {
    color: #55efc4;
    text-shadow: 0 0 15px rgba(85, 239, 196, 0.5);
}

.category-title.mysterious-title {
    color: #a29bfe;
    text-shadow: 0 0 15px rgba(162, 155, 254, 0.5);
}

.category-title.foe-title {
    color: #ff6b6b;
    text-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
}

.bestiary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.2rem;
    max-width: 900px;
    margin: 0 auto;
    justify-content: center;
}

.bestiary-card {
    perspective: 1000px;
    height: 200px;
    cursor: pointer;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.bestiary-card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.card-front {
    background: rgba(0, 0, 0, 0.6);
    border: 3px solid var(--accent-lavender);
}

.card-back {
    background: rgba(0, 0, 0, 0.8);
    border: 3px solid var(--accent-yellow);
    transform: rotateY(180deg);
}

.bestiary-card.friend .card-front { border-color: #55efc4; }
.bestiary-card.friend .card-back { border-color: #55efc4; }
.bestiary-card.foe .card-front { border-color: #ff6b6b; }
.bestiary-card.foe .card-back { border-color: #ff6b6b; }
.bestiary-card.mysterious .card-front { border-color: #a29bfe; }
.bestiary-card.mysterious .card-back { border-color: #a29bfe; }

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
}

/* Animated Owl */
.owl-animated {
    position: relative;
    width: 60px;
    height: 60px;
}

.owl-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    opacity: 0;
}

.owl-frame.owl-1 { animation: owlFrame1 1.2s steps(1) infinite; }
.owl-frame.owl-2 { animation: owlFrame2 1.2s steps(1) infinite; }
.owl-frame.owl-3 { animation: owlFrame3 1.2s steps(1) infinite; }
.owl-frame.owl-4 { animation: owlFrame4 1.2s steps(1) infinite; }

@keyframes owlFrame1 {
    0%, 100% { opacity: 1; }
    25%, 99.9% { opacity: 0; }
}
@keyframes owlFrame2 {
    0%, 24.9% { opacity: 0; }
    25%, 49.9% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes owlFrame3 {
    0%, 49.9% { opacity: 0; }
    50%, 74.9% { opacity: 1; }
    75%, 100% { opacity: 0; }
}
@keyframes owlFrame4 {
    0%, 74.9% { opacity: 0; }
    75%, 99.9% { opacity: 1; }
    100% { opacity: 0; }
}

/* Diamond Dan animated frames */
.dan-animated {
    position: relative;
    width: 60px;
    height: 60px;
}

.dan-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 8px;
    opacity: 0;
}

.dan-frame.dan-1 { animation: danFrame1 0.9s steps(1) infinite; }
.dan-frame.dan-2 { animation: danFrame2 0.9s steps(1) infinite; }
.dan-frame.dan-3 { animation: danFrame3 0.9s steps(1) infinite; }

@keyframes danFrame1 {
    0%, 100% { opacity: 1; }
    33.33%, 99.9% { opacity: 0; }
}
@keyframes danFrame2 {
    0%, 33.32% { opacity: 0; }
    33.33%, 66.65% { opacity: 1; }
    66.66%, 100% { opacity: 0; }
}
@keyframes danFrame3 {
    0%, 66.65% { opacity: 0; }
    66.66%, 99.9% { opacity: 1; }
    100% { opacity: 0; }
}

/* Shelly (snail) animated frames - 7 frames */
.shelly-animated {
    position: relative;
    width: 60px;
    height: 60px;
}

.shelly-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 8px;
    opacity: 0;
}

.shelly-frame.shelly-1 { animation: shellyFrame1 2.1s steps(1) infinite; }
.shelly-frame.shelly-2 { animation: shellyFrame2 2.1s steps(1) infinite; }
.shelly-frame.shelly-3 { animation: shellyFrame3 2.1s steps(1) infinite; }
.shelly-frame.shelly-4 { animation: shellyFrame4 2.1s steps(1) infinite; }
.shelly-frame.shelly-5 { animation: shellyFrame5 2.1s steps(1) infinite; }
.shelly-frame.shelly-6 { animation: shellyFrame6 2.1s steps(1) infinite; }
.shelly-frame.shelly-7 { animation: shellyFrame7 2.1s steps(1) infinite; }

@keyframes shellyFrame1 {
    0%, 100% { opacity: 1; }
    14.28%, 99.9% { opacity: 0; }
}
@keyframes shellyFrame2 {
    0%, 14.27% { opacity: 0; }
    14.28%, 28.56% { opacity: 1; }
    28.57%, 100% { opacity: 0; }
}
@keyframes shellyFrame3 {
    0%, 28.56% { opacity: 0; }
    28.57%, 42.84% { opacity: 1; }
    42.85%, 100% { opacity: 0; }
}
@keyframes shellyFrame4 {
    0%, 42.84% { opacity: 0; }
    42.85%, 57.13% { opacity: 1; }
    57.14%, 100% { opacity: 0; }
}
@keyframes shellyFrame5 {
    0%, 57.13% { opacity: 0; }
    57.14%, 71.41% { opacity: 1; }
    71.42%, 100% { opacity: 0; }
}
@keyframes shellyFrame6 {
    0%, 71.41% { opacity: 0; }
    71.42%, 85.70% { opacity: 1; }
    85.71%, 100% { opacity: 0; }
}
@keyframes shellyFrame7 {
    0%, 85.70% { opacity: 0; }
    85.71%, 99.9% { opacity: 1; }
    100% { opacity: 0; }
}

/* Paper Pete (rabbit) animated frames - 6 frames */
.pete-animated {
    position: relative;
    width: 60px;
    height: 60px;
}

.pete-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 8px;
    opacity: 0;
}

.pete-frame.pete-1 { animation: peteFrame1 1.2s steps(1) infinite; }
.pete-frame.pete-2 { animation: peteFrame2 1.2s steps(1) infinite; }
.pete-frame.pete-3 { animation: peteFrame3 1.2s steps(1) infinite; }
.pete-frame.pete-4 { animation: peteFrame4 1.2s steps(1) infinite; }
.pete-frame.pete-5 { animation: peteFrame5 1.2s steps(1) infinite; }
.pete-frame.pete-6 { animation: peteFrame6 1.2s steps(1) infinite; }

@keyframes peteFrame1 {
    0%, 100% { opacity: 1; }
    16.66%, 99.9% { opacity: 0; }
}
@keyframes peteFrame2 {
    0%, 16.65% { opacity: 0; }
    16.66%, 33.32% { opacity: 1; }
    33.33%, 100% { opacity: 0; }
}
@keyframes peteFrame3 {
    0%, 33.32% { opacity: 0; }
    33.33%, 49.99% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes peteFrame4 {
    0%, 49.99% { opacity: 0; }
    50%, 66.65% { opacity: 1; }
    66.66%, 100% { opacity: 0; }
}
@keyframes peteFrame5 {
    0%, 66.65% { opacity: 0; }
    66.66%, 83.32% { opacity: 1; }
    83.33%, 100% { opacity: 0; }
}
@keyframes peteFrame6 {
    0%, 83.32% { opacity: 0; }
    83.33%, 99.9% { opacity: 1; }
    100% { opacity: 0; }
}

/* Sir Dip Eater (frog) animated frames - 3 frames */
.dipper-animated {
    position: relative;
    width: 60px;
    height: 60px;
}

.dipper-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 8px;
    opacity: 0;
}

.dipper-frame.dipper-1 { animation: dipperFrame1 0.9s steps(1) infinite; }
.dipper-frame.dipper-2 { animation: dipperFrame2 0.9s steps(1) infinite; }
.dipper-frame.dipper-3 { animation: dipperFrame3 0.9s steps(1) infinite; }

@keyframes dipperFrame1 {
    0%, 100% { opacity: 1; }
    33.33%, 99.9% { opacity: 0; }
}
@keyframes dipperFrame2 {
    0%, 33.32% { opacity: 0; }
    33.33%, 66.65% { opacity: 1; }
    66.66%, 100% { opacity: 0; }
}
@keyframes dipperFrame3 {
    0%, 66.65% { opacity: 0; }
    66.66%, 99.9% { opacity: 1; }
    100% { opacity: 0; }
}

/* Moon Moth animated frames - 5 frames */
.moth-animated {
    position: relative;
    width: 60px;
    height: 60px;
}

.moth-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 8px;
    opacity: 0;
}

.moth-frame.moth-1 { animation: mothFrame1 1.0s steps(1) infinite; }
.moth-frame.moth-2 { animation: mothFrame2 1.0s steps(1) infinite; }
.moth-frame.moth-3 { animation: mothFrame3 1.0s steps(1) infinite; }
.moth-frame.moth-4 { animation: mothFrame4 1.0s steps(1) infinite; }
.moth-frame.moth-5 { animation: mothFrame5 1.0s steps(1) infinite; }

@keyframes mothFrame1 {
    0%, 100% { opacity: 1; }
    20%, 99.9% { opacity: 0; }
}
@keyframes mothFrame2 {
    0%, 19.9% { opacity: 0; }
    20%, 39.9% { opacity: 1; }
    40%, 100% { opacity: 0; }
}
@keyframes mothFrame3 {
    0%, 39.9% { opacity: 0; }
    40%, 59.9% { opacity: 1; }
    60%, 100% { opacity: 0; }
}
@keyframes mothFrame4 {
    0%, 59.9% { opacity: 0; }
    60%, 79.9% { opacity: 1; }
    80%, 100% { opacity: 0; }
}
@keyframes mothFrame5 {
    0%, 79.9% { opacity: 0; }
    80%, 99.9% { opacity: 1; }
    100% { opacity: 0; }
}

/* FUD Bat animated frames - 4 frames */
.bat-animated {
    position: relative;
    width: 60px;
    height: 60px;
}

.bat-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 8px;
    opacity: 0;
}

.bat-frame.bat-1 { animation: batFrame1 0.8s steps(1) infinite; }
.bat-frame.bat-2 { animation: batFrame2 0.8s steps(1) infinite; }
.bat-frame.bat-3 { animation: batFrame3 0.8s steps(1) infinite; }
.bat-frame.bat-4 { animation: batFrame4 0.8s steps(1) infinite; }

@keyframes batFrame1 {
    0%, 100% { opacity: 1; }
    25%, 99.9% { opacity: 0; }
}
@keyframes batFrame2 {
    0%, 24.9% { opacity: 0; }
    25%, 49.9% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes batFrame3 {
    0%, 49.9% { opacity: 0; }
    50%, 74.9% { opacity: 1; }
    75%, 100% { opacity: 0; }
}
@keyframes batFrame4 {
    0%, 74.9% { opacity: 0; }
    75%, 99.9% { opacity: 1; }
    100% { opacity: 0; }
}

/* Rug Rat animated frames - 3 frames */
.rat-animated {
    position: relative;
    width: 60px;
    height: 60px;
}

.rat-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 8px;
    opacity: 0;
}

.rat-frame.rat-1 { animation: ratFrame1 0.6s steps(1) infinite; }
.rat-frame.rat-2 { animation: ratFrame2 0.6s steps(1) infinite; }
.rat-frame.rat-3 { animation: ratFrame3 0.6s steps(1) infinite; }

@keyframes ratFrame1 {
    0%, 100% { opacity: 1; }
    33.33%, 99.9% { opacity: 0; }
}
@keyframes ratFrame2 {
    0%, 33.32% { opacity: 0; }
    33.33%, 66.65% { opacity: 1; }
    66.66%, 100% { opacity: 0; }
}
@keyframes ratFrame3 {
    0%, 66.65% { opacity: 0; }
    66.66%, 99.9% { opacity: 1; }
    100% { opacity: 0; }
}

/* The Whale animated frames - 4 frames */
.whale-animated {
    position: relative;
    width: 60px;
    height: 60px;
}

.whale-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 8px;
    opacity: 0;
}

.whale-frame.whale-1 { animation: whaleFrame1 1.2s steps(1) infinite; }
.whale-frame.whale-2 { animation: whaleFrame2 1.2s steps(1) infinite; }
.whale-frame.whale-3 { animation: whaleFrame3 1.2s steps(1) infinite; }
.whale-frame.whale-4 { animation: whaleFrame4 1.2s steps(1) infinite; }

@keyframes whaleFrame1 {
    0%, 100% { opacity: 1; }
    25%, 99.9% { opacity: 0; }
}
@keyframes whaleFrame2 {
    0%, 24.9% { opacity: 0; }
    25%, 49.9% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes whaleFrame3 {
    0%, 49.9% { opacity: 0; }
    50%, 74.9% { opacity: 1; }
    75%, 100% { opacity: 0; }
}
@keyframes whaleFrame4 {
    0%, 74.9% { opacity: 0; }
    75%, 99.9% { opacity: 1; }
    100% { opacity: 0; }
}

/* Oracle Octopus animated frames - 3 frames */
.octopus-animated {
    position: relative;
    width: 60px;
    height: 60px;
}

.octopus-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 8px;
    opacity: 0;
}

.octopus-frame.octopus-1 { animation: octopusFrame1 0.9s steps(1) infinite; }
.octopus-frame.octopus-2 { animation: octopusFrame2 0.9s steps(1) infinite; }
.octopus-frame.octopus-3 { animation: octopusFrame3 0.9s steps(1) infinite; }

@keyframes octopusFrame1 {
    0%, 100% { opacity: 1; }
    33.33%, 99.9% { opacity: 0; }
}
@keyframes octopusFrame2 {
    0%, 33.32% { opacity: 0; }
    33.33%, 66.65% { opacity: 1; }
    66.66%, 100% { opacity: 0; }
}
@keyframes octopusFrame3 {
    0%, 66.65% { opacity: 0; }
    66.66%, 99.9% { opacity: 1; }
    100% { opacity: 0; }
}

/* Liquidity Newt animated frames - 4 frames */
.newt-animated {
    position: relative;
    width: 60px;
    height: 60px;
}

.newt-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 8px;
    opacity: 0;
}

.newt-frame.newt-1 { animation: newtFrame1 1.2s steps(1) infinite; }
.newt-frame.newt-2 { animation: newtFrame2 1.2s steps(1) infinite; }
.newt-frame.newt-3 { animation: newtFrame3 1.2s steps(1) infinite; }
.newt-frame.newt-4 { animation: newtFrame4 1.2s steps(1) infinite; }

@keyframes newtFrame1 {
    0%, 100% { opacity: 1; }
    25%, 99.9% { opacity: 0; }
}
@keyframes newtFrame2 {
    0%, 24.9% { opacity: 0; }
    25%, 49.9% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes newtFrame3 {
    0%, 49.9% { opacity: 0; }
    50%, 74.9% { opacity: 1; }
    75%, 100% { opacity: 0; }
}
@keyframes newtFrame4 {
    0%, 74.9% { opacity: 0; }
    75%, 99.9% { opacity: 1; }
    100% { opacity: 0; }
}

.card-name {
    font-size: 0.5rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.card-type {
    font-size: 0.5rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.8rem;
    display: inline-block;
}

.card-type.friend-type {
    background: rgba(85, 239, 196, 0.3);
    color: #55efc4;
    border: 1px solid #55efc4;
}

.card-type.foe-type {
    background: rgba(255, 107, 107, 0.3);
    color: #ff6b6b;
    border: 1px solid #ff6b6b;
}

.card-type.mysterious-type {
    background: rgba(162, 155, 254, 0.3);
    color: #a29bfe;
    border: 1px solid #a29bfe;
}

.card-desc {
    font-size: 0.4rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.6;
}

/* ============================================
   LORE SCROLLS SECTION
   ============================================ */
.lore-section {
    background: transparent;
    padding: 4rem 2rem;
}

.lore-bg {
    background: transparent;
}

.lore-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.lore-scrolls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lore-scroll {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--accent-warm);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.lore-scroll:hover {
    border-color: var(--accent-yellow);
}

.scroll-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.scroll-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.scroll-icon {
    font-size: 1.2rem;
}

.scroll-title {
    flex: 1;
    font-size: 0.6rem;
    color: var(--text-primary);
}

.scroll-toggle {
    font-size: 1rem;
    color: var(--accent-yellow);
    transition: transform 0.3s ease;
}

.lore-scroll.open .scroll-toggle {
    transform: rotate(45deg);
}

.scroll-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 1rem;
}

.lore-scroll.open .scroll-content {
    max-height: 300px;
    padding: 0 1rem 1rem;
}

.scroll-content p {
    font-size: 0.5rem;
    color: var(--text-secondary);
    line-height: 2;
}

/* ============================================
   EASTER EGG
   ============================================ */
.easter-egg {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 1rem;
    opacity: 0.1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.easter-egg:hover {
    opacity: 1;
    transform: scale(1.5);
}

.easter-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.easter-popup.active {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background: var(--bg-secondary);
    border: 3px solid var(--accent-yellow);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    animation: popupBounce 0.5s ease;
}

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

.popup-content p {
    font-size: 0.7rem;
    margin-bottom: 1rem;
}

.popup-message {
    color: var(--accent-lavender);
}

.popup-close {
    margin-top: 1rem;
}

/* ============================================
   SECTION TRANSITIONS
   ============================================ */
.section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   DAY THEME OVERRIDES FOR NEW SECTIONS
   ============================================ */

/* Day theme text readability fixes */
[data-theme="day"] .section-title {
    color: #3d2914;
    text-shadow: 
        2px 2px 0 rgba(255, 255, 255, 0.6),
        0 0 15px rgba(255, 255, 255, 0.4);
}

[data-theme="day"] .pixel-title {
    color: #3d2914;
    text-shadow: 
        2px 2px 0 rgba(255, 255, 255, 0.7),
        4px 4px 0 rgba(139, 115, 85, 0.4);
}

[data-theme="day"] .pixel-subtitle,
[data-theme="day"] .story-text {
    color: #3d2914;
    text-shadow: 
        1px 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="day"] .character-sheet {
    background: rgba(245, 230, 211, 0.9);
    border-color: #8b7355;
}

[data-theme="day"] .stat-name,
[data-theme="day"] .stat-class {
    color: #3d2914;
}

[data-theme="day"] .stat-label,
[data-theme="day"] .stat-value {
    color: #5c4023;
}

[data-theme="day"] .stat-row.good .stat-label {
    color: #daa520;
}

[data-theme="day"] .ability {
    background: rgba(139, 115, 85, 0.2);
    border-color: #8b7355;
    color: #3d2914;
}

[data-theme="day"] .point-label,
[data-theme="day"] .point-desc {
    color: #3d2914;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="day"] .point-icon {
    background: rgba(245, 230, 211, 0.9);
    border-color: #8b7355;
}

[data-theme="day"] .journey-point.active .point-icon {
    border-color: #daa520;
    box-shadow: 0 0 20px rgba(218, 165, 32, 0.6);
}

[data-theme="day"] .card-front,
[data-theme="day"] .card-back {
    background: rgba(245, 230, 211, 0.95);
    border-color: #8b7355;
}

[data-theme="day"] .card-name,
[data-theme="day"] .card-desc,
[data-theme="day"] .card-type {
    color: #3d2914;
}

[data-theme="day"] .lore-scroll {
    background: rgba(245, 230, 211, 0.9);
    border-color: #8b7355;
}

[data-theme="day"] .scroll-title,
[data-theme="day"] .scroll-content p {
    color: #3d2914;
}

[data-theme="day"] .memory-label {
    color: #3d2914;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="day"] .frame-border {
    background: rgba(245, 230, 211, 0.5);
    border-color: #8b7355;
}

[data-theme="day"] .crt-text {
    color: #3d2914;
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.6),
        2px 2px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="day"] .portal-hint {
    color: #8b7355;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="day"] .loading-screen {
    background: rgba(245, 230, 211, 0.7);
}

[data-theme="day"] .pixel-btn {
    background: rgba(245, 230, 211, 0.8);
    border-color: #8b7355;
    color: #3d2914;
}

[data-theme="day"] .pixel-btn:hover {
    background: rgba(218, 165, 32, 0.6);
    border-color: #daa520;
}

/* ============================================
   SEASONAL THEMES
   ============================================ */
[data-season="winter"] .floating-item.leaf::before { content: '❄️'; }
[data-season="winter"] .grass-blade { background: linear-gradient(to top, #fff, #e0e0e0); }

[data-season="autumn"] .floating-item.leaf::before { content: '🍂'; }
[data-season="autumn"] .grass-blade { background: linear-gradient(to top, #8b4513, #d2691e); }

[data-season="spring"] .floating-item.star::before { content: '🌸'; }
[data-season="spring"] .grass-blade { background: linear-gradient(to top, #90EE90, #32CD32); }

/* ============================================
   MOBILE RESPONSIVE - NEW SECTIONS
   ============================================ */
@media (max-width: 768px) {
    .character-sheet {
        flex-direction: column;
        align-items: center;
    }
    
    .stat-portrait {
        width: 120px;
        height: 120px;
    }
    
    .journey-map {
        flex-direction: column;
        gap: 2rem;
    }
    
    .journey-path {
        display: none;
    }
    
    .bestiary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .bestiary-card {
        height: 170px;
    }
    
    .card-icon {
        font-size: 2rem;
    }
    
    .card-name {
        font-size: 0.4rem;
    }
    
    .lantern {
        display: none;
    }
    
    .floating-item {
        font-size: 1rem;
    }
}