/* WaifuClicker CSS - Kawaii Aesthetic ✨ */

/* Import kawaii fonts */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Nunito:wght@300;400;600;800&display=swap');

/* CSS Variables for theme colors */
:root {
    --primary-pink: #ff69b4;
    --secondary-pink: #ffb6c1;
    --light-pink: #ffc0cb;
    --purple: #dda0dd;
    --cyan: #40e0d0;
    --neon-blue: #00bfff;
    --soft-purple: #e6e6fa;
    --mint: #f0fff0;
    --cream: #fffdd0;
    --white: #ffffff;
    --black: #000000;
    --shadow: rgba(0, 0, 0, 0.3);
    --glow: rgba(255, 105, 180, 0.4);
}

/* Global styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    background: linear-gradient(45deg, var(--soft-purple), var(--mint), var(--cream));
    background-size: 400% 400%;
    animation: gradientShift 12s ease-in-out infinite;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Background effects */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.stars {
    position: absolute;
    width: 100%;
    height: 100%;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        20px 40px white, 80px 20px white, 150px 60px white,
        200px 30px white, 300px 80px white, 400px 50px white,
        50px 100px white, 250px 120px white, 350px 90px white,
        100px 150px white, 180px 180px white, 320px 160px white;
    animation: twinkle 3s infinite;
}

.stars::after {
    animation-delay: 1.5s;
}

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

.floating-hearts {
    position: absolute;
    width: 100%;
    height: 100%;
}

.floating-hearts::before {
    content: '💕 💖 💗 💘 💝 ✨ ⭐ 🌟';
    position: absolute;
    font-size: 20px;
    animation: float 15s linear infinite;
    white-space: nowrap;
}

@keyframes float {
    0% {
        transform: translateX(-100px) translateY(100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

/* Main game container - Optimized for viewport */
.game-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    z-index: 1;
    /* Use dynamic viewport height on mobile and allow vertical scrolling */
    min-height: 100dvh;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Enhanced glass morphism effects */
.glass-panel {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* Header - Compact for viewport */
.game-header {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 12px 20px;
    margin-bottom: 10px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 40px rgba(255, 105, 180, 0.1);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.game-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Professional Title Design */
.title-container {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.title {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin: 0;
    position: relative;
    display: inline-block;
    letter-spacing: 2px;
}

.title-main {
    background: linear-gradient(135deg, #ff1493, #ff69b4, #ff1493);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
    text-shadow: 0 0 30px rgba(255, 20, 147, 0.3);
    filter: drop-shadow(0 4px 8px rgba(255, 20, 147, 0.2));
}

.title-accent {
    background: linear-gradient(135deg, #00ffff, #1e90ff, #00ffff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite reverse;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
    filter: drop-shadow(0 4px 8px rgba(0, 255, 255, 0.2));
}

.title-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.sparkle {
    position: absolute;
    font-size: 1.2rem;
    animation: sparkleFloat 4s ease-in-out infinite;
    opacity: 0.8;
}

.sparkle-1 {
    top: -10px;
    left: 10%;
    animation-delay: 0s;
}

.sparkle-2 {
    top: 20%;
    right: 15%;
    animation-delay: 1s;
}

.sparkle-3 {
    bottom: 10px;
    left: 20%;
    animation-delay: 2s;
}

.sparkle-4 {
    top: 10%;
    right: 25%;
    animation-delay: 3s;
}

.title-subtitle {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: var(--primary-pink);
    margin-top: 5px;
    opacity: 0.9;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: subtitleGlow 2s ease-in-out infinite alternate;
}

/* Animations */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes sparkleFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0.8;
    }
    25% { 
        transform: translateY(-10px) rotate(90deg);
        opacity: 1;
    }
    50% { 
        transform: translateY(-5px) rotate(180deg);
        opacity: 0.6;
    }
    75% { 
        transform: translateY(-15px) rotate(270deg);
        opacity: 1;
    }
}

@keyframes subtitleGlow {
    0% { 
        text-shadow: 0 0 5px rgba(255, 20, 147, 0.3);
        transform: scale(1);
    }
    100% { 
        text-shadow: 0 0 15px rgba(255, 20, 147, 0.6);
        transform: scale(1.02);
    }
}

/* Settings Button */
.game-header {
    position: relative;
}

/* Top buttons container */
.top-buttons {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
}

.settings-btn, .music-btn, .patreon-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.settings-btn:hover, .music-btn:hover, .patreon-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 25px rgba(255, 105, 180, 0.3);
}

.music-btn:hover {
    transform: scale(1.1); /* No rotation for music button */
}

.music-btn.muted {
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.music-btn.muted .music-icon::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 40px;
    background: #ff0000;
    transform: rotate(45deg);
    border-radius: 1px;
}

.music-btn.muted .music-icon {
    position: relative;
}

.gear-icon, .music-icon, .patreon-icon {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.settings-btn:hover .gear-icon {
    transform: rotate(-90deg);
}

.patreon-btn {
    background: linear-gradient(45deg, #ff424d, #ff6b6b);
}

.patreon-btn:hover {
    background: linear-gradient(45deg, #ff6b6b, #ff424d);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 12px 35px rgba(255, 66, 77, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.patreon-btn:hover .patreon-icon {
    transform: scale(1.2);
    animation: heartbeat 1s ease-in-out infinite;
}

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

@keyframes sparkle {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.7; }
    50% { transform: rotate(180deg) scale(1.2); opacity: 1; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    align-items: stretch;
}

.stats-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 12px 20px;
    border-radius: 15px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 20px rgba(255, 105, 180, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    min-width: 80px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-pink), var(--cyan), var(--purple));
    background-size: 200% 100%;
    animation: gradientFlow 3s linear infinite;
}

.stat-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        0 15px 45px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 30px rgba(255, 105, 180, 0.3);
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.stat-item.level-stat {
    min-width: 200px;
    position: relative;
}

/* XP Bar Styling - Integrated within level stat */
.xp-bar-container {
    width: 100%;
    margin-top: 8px;
}

.xp-bar-bg {
    position: relative;
    width: 100%;
    height: 18px;
    background: linear-gradient(45deg, #333, #555);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.xp-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(45deg, #ff69b4, #ff1493, #40e0d0);
    background-size: 200% 200%;
    border-radius: 8px;
    transition: width 0.5s ease-out;
    animation: xpGlow 2s ease-in-out infinite;
}

.xp-bar-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 1;
}

@keyframes xpGlow {
    0%, 100% { 
        background-position: 0% 50%;
        box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
    }
    50% { 
        background-position: 100% 50%;
        box-shadow: 0 0 20px rgba(255, 105, 180, 0.8);
    }
}

.xp-bar-fill.near-levelup {
    background: linear-gradient(45deg, #ffd700, #ff69b4, #ff1493);
    animation: levelUpPulse 1.5s ease-in-out infinite;
}

@keyframes levelUpPulse {
    0%, 100% { 
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
        filter: brightness(1);
    }
    50% { 
        box-shadow: 0 0 25px rgba(255, 215, 0, 1);
        filter: brightness(1.2);
    }
}

/* Stats list styling for tab content */
.stats-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    padding: 20px;
}

.stats-list .stat-item {
    background: linear-gradient(45deg, var(--cream), var(--mint));
    border: 2px solid var(--secondary-pink);
    padding: 15px;
    margin: 0;
}

.stat-label {
    font-weight: 600;
    color: var(--black);
    font-size: 0.9rem;
}

.stat-value {
    font-weight: 800;
    color: var(--primary-pink);
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px white;
}

/* Main game area - Fills remaining viewport */
.main-game {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Waifu panel - Responsive height */
.waifu-panel {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 40px rgba(255, 105, 180, 0.1);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.waifu-panel::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 105, 180, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.waifu-container {
    text-align: center;
    margin-bottom: 15px;
    flex-shrink: 0;
}

.current-waifu {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

/* Magic circle effect around waifu */
.current-waifu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--primary-pink), var(--cyan), var(--purple), var(--primary-pink)) border-box;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: magicRotate 8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.current-waifu:hover::before {
    opacity: 0.8;
}

@keyframes magicRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Floating runes around waifu */
.current-waifu::after {
    content: '✦ ✧ ✩ ✪ ✫ ✬ ✭ ✮';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: var(--primary-pink);
    opacity: 0;
    pointer-events: none;
    animation: runeOrbit 10s linear infinite;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.8);
}

.current-waifu:hover::after {
    opacity: 0.7;
}

@keyframes runeOrbit {
    0% { transform: translate(-50%, -50%) rotate(0deg) translateX(150px) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(150px) rotate(-360deg); }
}

/* Heart Orbiter Visual Effects - Smaller, More Visible, Slower */
.heart-orbiter {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    font-size: 16px;
    color: #ff1493;
    text-shadow: 
        0 0 6px rgba(255, 105, 180, 0.9),
        0 0 12px rgba(255, 20, 147, 0.7);
    z-index: 10;
    will-change: transform;
    font-weight: bold;
}

/* Slower animations with tighter orbits - 100 hearts total */
.heart-orbiter.heart-1, .heart-orbiter.heart-2, .heart-orbiter.heart-3, .heart-orbiter.heart-4, .heart-orbiter.heart-5,
.heart-orbiter.heart-6, .heart-orbiter.heart-7, .heart-orbiter.heart-8, .heart-orbiter.heart-9, .heart-orbiter.heart-10 {
    animation: heartOrbitClose 6s linear infinite both;
}

.heart-orbiter.heart-11, .heart-orbiter.heart-12, .heart-orbiter.heart-13, .heart-orbiter.heart-14, .heart-orbiter.heart-15,
.heart-orbiter.heart-16, .heart-orbiter.heart-17, .heart-orbiter.heart-18, .heart-orbiter.heart-19, .heart-orbiter.heart-20 {
    animation: heartOrbitMid 8s linear infinite both;
}

.heart-orbiter.heart-21, .heart-orbiter.heart-22, .heart-orbiter.heart-23, .heart-orbiter.heart-24, .heart-orbiter.heart-25,
.heart-orbiter.heart-26, .heart-orbiter.heart-27, .heart-orbiter.heart-28, .heart-orbiter.heart-29, .heart-orbiter.heart-30 {
    animation: heartOrbitFar 10s linear infinite both;
}

.heart-orbiter.heart-31, .heart-orbiter.heart-32, .heart-orbiter.heart-33, .heart-orbiter.heart-34, .heart-orbiter.heart-35,
.heart-orbiter.heart-36, .heart-orbiter.heart-37, .heart-orbiter.heart-38, .heart-orbiter.heart-39, .heart-orbiter.heart-40 {
    animation: heartOrbitReverse 8s linear infinite reverse both;
}

.heart-orbiter.heart-41, .heart-orbiter.heart-42, .heart-orbiter.heart-43, .heart-orbiter.heart-44, .heart-orbiter.heart-45,
.heart-orbiter.heart-46, .heart-orbiter.heart-47, .heart-orbiter.heart-48, .heart-orbiter.heart-49, .heart-orbiter.heart-50 {
    animation: heartOrbitOuter 12s linear infinite both;
}

/* Additional hearts 51-100 - Cycle through all orbit patterns */
.heart-orbiter.heart-51, .heart-orbiter.heart-52, .heart-orbiter.heart-53, .heart-orbiter.heart-54, .heart-orbiter.heart-55,
.heart-orbiter.heart-56, .heart-orbiter.heart-57, .heart-orbiter.heart-58, .heart-orbiter.heart-59, .heart-orbiter.heart-60 {
    animation: heartOrbitClose 6s linear infinite both;
}

.heart-orbiter.heart-61, .heart-orbiter.heart-62, .heart-orbiter.heart-63, .heart-orbiter.heart-64, .heart-orbiter.heart-65,
.heart-orbiter.heart-66, .heart-orbiter.heart-67, .heart-orbiter.heart-68, .heart-orbiter.heart-69, .heart-orbiter.heart-70 {
    animation: heartOrbitMid 8s linear infinite both;
}

.heart-orbiter.heart-71, .heart-orbiter.heart-72, .heart-orbiter.heart-73, .heart-orbiter.heart-74, .heart-orbiter.heart-75,
.heart-orbiter.heart-76, .heart-orbiter.heart-77, .heart-orbiter.heart-78, .heart-orbiter.heart-79, .heart-orbiter.heart-80 {
    animation: heartOrbitFar 10s linear infinite both;
}

.heart-orbiter.heart-81, .heart-orbiter.heart-82, .heart-orbiter.heart-83, .heart-orbiter.heart-84, .heart-orbiter.heart-85,
.heart-orbiter.heart-86, .heart-orbiter.heart-87, .heart-orbiter.heart-88, .heart-orbiter.heart-89, .heart-orbiter.heart-90 {
    animation: heartOrbitReverse 8s linear infinite reverse both;
}

.heart-orbiter.heart-91, .heart-orbiter.heart-92, .heart-orbiter.heart-93, .heart-orbiter.heart-94, .heart-orbiter.heart-95,
.heart-orbiter.heart-96, .heart-orbiter.heart-97, .heart-orbiter.heart-98, .heart-orbiter.heart-99, .heart-orbiter.heart-100 {
    animation: heartOrbitOuter 12s linear infinite both;
}

/* Add delays for natural spread */
.heart-orbiter.heart-1 { animation-delay: 0s; }
.heart-orbiter.heart-2 { animation-delay: 0.6s; }
.heart-orbiter.heart-3 { animation-delay: 1.2s; }
.heart-orbiter.heart-4 { animation-delay: 1.8s; }
.heart-orbiter.heart-5 { animation-delay: 2.4s; }
.heart-orbiter.heart-6 { animation-delay: 3s; }
.heart-orbiter.heart-7 { animation-delay: 3.6s; }
.heart-orbiter.heart-8 { animation-delay: 4.2s; }
.heart-orbiter.heart-9 { animation-delay: 4.8s; }
.heart-orbiter.heart-10 { animation-delay: 5.4s; }

.heart-orbiter.heart-11 { animation-delay: 0s; }
.heart-orbiter.heart-12 { animation-delay: 0.8s; }
.heart-orbiter.heart-13 { animation-delay: 1.6s; }
.heart-orbiter.heart-14 { animation-delay: 2.4s; }
.heart-orbiter.heart-15 { animation-delay: 3.2s; }
.heart-orbiter.heart-16 { animation-delay: 4s; }
.heart-orbiter.heart-17 { animation-delay: 4.8s; }
.heart-orbiter.heart-18 { animation-delay: 5.6s; }
.heart-orbiter.heart-19 { animation-delay: 6.4s; }
.heart-orbiter.heart-20 { animation-delay: 7.2s; }

.heart-orbiter.heart-21 { animation-delay: 0s; }
.heart-orbiter.heart-22 { animation-delay: 1s; }
.heart-orbiter.heart-23 { animation-delay: 2s; }
.heart-orbiter.heart-24 { animation-delay: 3s; }
.heart-orbiter.heart-25 { animation-delay: 4s; }
.heart-orbiter.heart-26 { animation-delay: 5s; }
.heart-orbiter.heart-27 { animation-delay: 6s; }
.heart-orbiter.heart-28 { animation-delay: 7s; }
.heart-orbiter.heart-29 { animation-delay: 8s; }
.heart-orbiter.heart-30 { animation-delay: 9s; }

.heart-orbiter.heart-31 { animation-delay: 0s; }
.heart-orbiter.heart-32 { animation-delay: 0.8s; }
.heart-orbiter.heart-33 { animation-delay: 1.6s; }
.heart-orbiter.heart-34 { animation-delay: 2.4s; }
.heart-orbiter.heart-35 { animation-delay: 3.2s; }
.heart-orbiter.heart-36 { animation-delay: 4s; }
.heart-orbiter.heart-37 { animation-delay: 4.8s; }
.heart-orbiter.heart-38 { animation-delay: 5.6s; }
.heart-orbiter.heart-39 { animation-delay: 6.4s; }
.heart-orbiter.heart-40 { animation-delay: 7.2s; }

.heart-orbiter.heart-41 { animation-delay: 0s; }
.heart-orbiter.heart-42 { animation-delay: 1.2s; }
.heart-orbiter.heart-43 { animation-delay: 2.4s; }
.heart-orbiter.heart-44 { animation-delay: 3.6s; }
.heart-orbiter.heart-45 { animation-delay: 4.8s; }
.heart-orbiter.heart-46 { animation-delay: 6s; }
.heart-orbiter.heart-47 { animation-delay: 7.2s; }
.heart-orbiter.heart-48 { animation-delay: 8.4s; }
.heart-orbiter.heart-49 { animation-delay: 9.6s; }
.heart-orbiter.heart-50 { animation-delay: 10.8s; }

/* Animation delays for hearts 51-100 */
.heart-orbiter.heart-51 { animation-delay: 0s; }
.heart-orbiter.heart-52 { animation-delay: 0.6s; }
.heart-orbiter.heart-53 { animation-delay: 1.2s; }
.heart-orbiter.heart-54 { animation-delay: 1.8s; }
.heart-orbiter.heart-55 { animation-delay: 2.4s; }
.heart-orbiter.heart-56 { animation-delay: 3s; }
.heart-orbiter.heart-57 { animation-delay: 3.6s; }
.heart-orbiter.heart-58 { animation-delay: 4.2s; }
.heart-orbiter.heart-59 { animation-delay: 4.8s; }
.heart-orbiter.heart-60 { animation-delay: 5.4s; }

.heart-orbiter.heart-61 { animation-delay: 0s; }
.heart-orbiter.heart-62 { animation-delay: 0.8s; }
.heart-orbiter.heart-63 { animation-delay: 1.6s; }
.heart-orbiter.heart-64 { animation-delay: 2.4s; }
.heart-orbiter.heart-65 { animation-delay: 3.2s; }
.heart-orbiter.heart-66 { animation-delay: 4s; }
.heart-orbiter.heart-67 { animation-delay: 4.8s; }
.heart-orbiter.heart-68 { animation-delay: 5.6s; }
.heart-orbiter.heart-69 { animation-delay: 6.4s; }
.heart-orbiter.heart-70 { animation-delay: 7.2s; }

.heart-orbiter.heart-71 { animation-delay: 0s; }
.heart-orbiter.heart-72 { animation-delay: 1s; }
.heart-orbiter.heart-73 { animation-delay: 2s; }
.heart-orbiter.heart-74 { animation-delay: 3s; }
.heart-orbiter.heart-75 { animation-delay: 4s; }
.heart-orbiter.heart-76 { animation-delay: 5s; }
.heart-orbiter.heart-77 { animation-delay: 6s; }
.heart-orbiter.heart-78 { animation-delay: 7s; }
.heart-orbiter.heart-79 { animation-delay: 8s; }
.heart-orbiter.heart-80 { animation-delay: 9s; }

.heart-orbiter.heart-81 { animation-delay: 0s; }
.heart-orbiter.heart-82 { animation-delay: 0.8s; }
.heart-orbiter.heart-83 { animation-delay: 1.6s; }
.heart-orbiter.heart-84 { animation-delay: 2.4s; }
.heart-orbiter.heart-85 { animation-delay: 3.2s; }
.heart-orbiter.heart-86 { animation-delay: 4s; }
.heart-orbiter.heart-87 { animation-delay: 4.8s; }
.heart-orbiter.heart-88 { animation-delay: 5.6s; }
.heart-orbiter.heart-89 { animation-delay: 6.4s; }
.heart-orbiter.heart-90 { animation-delay: 7.2s; }

.heart-orbiter.heart-91 { animation-delay: 0s; }
.heart-orbiter.heart-92 { animation-delay: 1.2s; }
.heart-orbiter.heart-93 { animation-delay: 2.4s; }
.heart-orbiter.heart-94 { animation-delay: 3.6s; }
.heart-orbiter.heart-95 { animation-delay: 4.8s; }
.heart-orbiter.heart-96 { animation-delay: 6s; }
.heart-orbiter.heart-97 { animation-delay: 7.2s; }
.heart-orbiter.heart-98 { animation-delay: 8.4s; }
.heart-orbiter.heart-99 { animation-delay: 9.6s; }
.heart-orbiter.heart-100 { animation-delay: 10.8s; }

/* Tighter, slower orbit patterns */
@keyframes heartOrbitClose {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) translateX(110px) rotate(0deg);
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) translateX(110px) rotate(-360deg);
    }
}

@keyframes heartOrbitMid {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) translateX(140px) rotate(0deg);
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) translateX(140px) rotate(-360deg);
    }
}

@keyframes heartOrbitFar {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) translateX(170px) rotate(0deg);
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) translateX(170px) rotate(-360deg);
    }
}

@keyframes heartOrbitReverse {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) translateX(125px) rotate(0deg);
    }
    100% { 
        transform: translate(-50%, -50%) rotate(-360deg) translateX(125px) rotate(360deg);
    }
}

@keyframes heartOrbitOuter {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) translateX(200px) rotate(0deg);
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) translateX(200px) rotate(-360deg);
    }
}

.waifu-image {
    width: min(55vw, 240px);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    border: 3px solid transparent;
    background: linear-gradient(45deg, var(--primary-pink), var(--cyan)) border-box;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(255, 105, 180, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.waifu-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.waifu-image:hover::before {
    transform: translateX(100%);
}

.waifu-image:hover {
    transform: scale(1.08) translateY(-8px);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.25),
        0 0 60px rgba(255, 105, 180, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    filter: brightness(1.15) saturate(1.1);
}

.waifu-image:active {
    transform: scale(1.02) translateY(-4px);
    transition: all 0.1s ease;
}

.click-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    font-size: 3rem;
    font-weight: 900;
    color: var(--primary-pink);
    text-shadow: 3px 3px 6px rgba(0,0,0,0.7), 0 0 20px rgba(255,105,180,0.8);
    opacity: 0;
    animation: clickPop 0.6s ease-out;
    z-index: 999;
}

@keyframes clickPop {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -70%) scale(1);
    }
}

.waifu-info h3 {
    font-family: 'Fredoka One', cursive;
    color: var(--primary-pink);
    font-size: 1.3rem;
    margin-bottom: 6px;
}

.waifu-info p {
    color: var(--purple);
    font-style: italic;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Click Meter / Love Surge */
.click-meter-container {
    margin-top: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.meter-label {
    font-family: 'Fredoka One', cursive;
    color: var(--primary-pink);
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.click-meter-bar {
    position: relative;
    height: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.click-meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, 
        var(--primary-pink) 0%, 
        var(--secondary-pink) 50%, 
        var(--primary-pink) 100%);
    border-radius: 8px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.click-meter-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.meter-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Fredoka One', cursive;
    font-size: 0.75rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    font-weight: bold;
}

.love-surge-text {
    font-family: 'Fredoka One', cursive;
    color: var(--primary-pink);
    font-size: 1.1rem;
    text-align: center;
    margin-top: 8px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.8);
}

/* Love Surge Active State */
.click-meter-container.love-surge-active {
    background: rgba(255, 105, 180, 0.2);
    border-color: var(--primary-pink);
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.5);
    animation: loveSurgePulse 1s infinite alternate;
}

.click-meter-container.love-surge-active .meter-label {
    color: white;
    text-shadow: 0 0 10px rgba(255, 105, 180, 1);
}

.click-meter-container.love-surge-active .love-surge-text {
    opacity: 1;
    transform: scale(1);
    animation: loveSurgeText 2s infinite;
}

.click-meter-container.love-surge-active .click-meter-fill {
    background: linear-gradient(90deg, 
        #ff1493 0%, 
        #ff69b4 25%, 
        #ffb6c1 50%, 
        #ff69b4 75%, 
        #ff1493 100%);
    animation: loveSurgeBar 1s infinite;
}

@keyframes loveSurgePulse {
    0% { box-shadow: 0 0 20px rgba(255, 105, 180, 0.5); }
    100% { box-shadow: 0 0 30px rgba(255, 105, 180, 0.8); }
}

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

@keyframes loveSurgeBar {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Waifu selection - Compact */
.waifu-selection {
    margin-bottom: 15px;
    flex-shrink: 0;
}

.waifu-selection h4 {
    font-family: 'Fredoka One', cursive;
    color: var(--primary-pink);
    margin-bottom: 10px;
    text-align: center;
    font-size: 1.1rem;
}

.waifu-thumbnails {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.waifu-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 2px solid var(--secondary-pink);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.waifu-thumbnail:hover {
    transform: scale(1.1);
    opacity: 1;
    border-color: var(--primary-pink);
}

.waifu-thumbnail.active {
    opacity: 1;
    border-color: var(--primary-pink);
    box-shadow: 0 4px 16px var(--glow);
}

/* Skills panel - Compact */
.skills-panel {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.skills-panel h4 {
    font-family: 'Fredoka One', cursive;
    color: var(--primary-pink);
    margin-bottom: 12px;
    text-align: center;
    font-size: 1.1rem;
}

.skill-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.skill-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(45deg, var(--cyan), var(--neon-blue));
    border: none;
    border-radius: 18px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 25px rgba(64, 224, 208, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.skill-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.skill-btn:hover:not(:disabled)::before {
    left: 100%;
}

.skill-btn:hover:not(:disabled) {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        0 15px 35px rgba(64, 224, 208, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 30px rgba(64, 224, 208, 0.4);
}

.skill-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.skill-btn.active {
    background: linear-gradient(45deg, #ff69b4, #ff1493);
    color: white;
    animation: skillPulse 2s ease-in-out infinite;
    box-shadow: 
        0 0 30px rgba(255, 105, 180, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@keyframes skillPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 30px rgba(255, 105, 180, 0.8);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(255, 105, 180, 1);
    }
}

.cooldown {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Upgrades panel - Responsive height */
.upgrades-panel {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 40px rgba(221, 160, 221, 0.1);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.panel-tabs {
    display: flex;
    margin-bottom: 15px;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(255, 192, 203, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.tab-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: transparent;
    color: var(--primary-pink);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.tab-btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-pink), var(--cyan));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.tab-btn.active::before {
    transform: scaleX(1);
}

.tab-btn.active {
    background: rgba(255, 105, 180, 0.15);
    color: var(--primary-pink);
    font-weight: 700;
}

.tab-btn:hover:not(.active) {
    background: rgba(255, 182, 193, 0.1);
    color: var(--primary-pink);
    transform: translateY(-2px);
}

.tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 10px 5px;
    min-height: 0;
}

.tab-content.active {
    display: block;
}

.tab-content h3 {
    font-family: 'Fredoka One', cursive;
    color: var(--primary-pink);
    margin-bottom: 12px;
    text-align: center;
    font-size: 1.3rem;
}

/* Responsive list layouts */
.buildings-list, .upgrades-list, .achievements-list, .waifus-list, .stats-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

/* Desktop: compact cards and unified grid on all tabs (lighter, tighter, less blocky) */
@media (min-width: 1024px) {
    /* Unify grids */
    .buildings-list,
    .upgrades-list,
    .waifus-list,
    .achievements-list {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 14px;
    }
    /* Bring stats in line grid-wise (keeps its own card skin) */
    .stats-list {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 14px;
    }

    /* Compact card skin for all item types */
    .buildings-list .building-item,
    .upgrades-list .upgrade-item,
    .waifus-list .waifu-item,
    .achievements-list .achievement-item {
        padding: 12px;
        min-height: 110px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        border-radius: 14px;
    }
    .buildings-list .building-item:hover,
    .upgrades-list .upgrade-item:hover,
    .waifus-list .waifu-item:hover,
    .achievements-list .achievement-item:hover {
        transform: none;
        background: rgba(255, 255, 255, 0.18);
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        border-color: rgba(255, 105, 180, 0.35);
    }
    .buildings-list .building-item .item-info,
    .upgrades-list .upgrade-item .item-info,
    .waifus-list .waifu-item .item-info,
    .achievements-list .achievement-item .item-info {
        padding-right: 12px;
    }
    .buildings-list .building-item .item-name,
    .upgrades-list .upgrade-item .item-name,
    .waifus-list .waifu-item .item-name,
    .achievements-list .achievement-item .item-name {
        font-size: 13px;
        margin-bottom: 2px;
    }
    .buildings-list .building-item .item-description,
    .upgrades-list .upgrade-item .item-description,
    .waifus-list .waifu-item .item-description,
    .achievements-list .achievement-item .item-description {
        font-size: 11px;
        margin-bottom: 4px;
        opacity: 0.85;
    }
    .buildings-list .building-item .item-controls,
    .upgrades-list .upgrade-item .item-controls,
    .waifus-list .waifu-item .item-controls,
    .achievements-list .achievement-item .item-controls { gap: 8px; }

    .buildings-list .building-item .buy-buttons,
    .upgrades-list .upgrade-item .buy-buttons,
    .waifus-list .waifu-item .buy-buttons,
    .achievements-list .achievement-item .buy-buttons { gap: 6px; }

    .buildings-list .building-item .buy-btn,
    .upgrades-list .upgrade-item .buy-btn,
    .waifus-list .waifu-item .buy-btn,
    .achievements-list .achievement-item .buy-btn {
        padding: 7px 10px;
        font-size: 0.78rem;
        min-width: 70px;
        border-radius: 7px;
    }
}

/* Make tabs sticky and horizontally scrollable on small screens */
@media (max-width: 768px) {
    .panel-tabs {
        position: sticky;
        top: 0;
        z-index: 10;
        overflow: auto hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        padding: 6px;
    }
    .panel-tabs::-webkit-scrollbar { display: none; }
    .tab-btn { flex: 0 0 auto; white-space: nowrap; border-radius: 10px; }
}

/* Building/Upgrade items - Enhanced glass morphism design */
.building-item,
.upgrade-item,
.waifu-item,
.achievement-item {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 70px;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px);
    font-size: 13px;
    position: relative;
    overflow: hidden;
}

.building-item::before,
.upgrade-item::before,
.waifu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.building-item:hover::before,
.upgrade-item:hover::before,
.waifu-item:hover::before {
    left: 100%;
}

.building-item:hover,
.upgrade-item:hover,
.waifu-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 25px rgba(255, 105, 180, 0.2);
    border-color: rgba(255, 105, 180, 0.4);
    background: rgba(255, 255, 255, 0.25);
}

.building-item.disabled,
.upgrade-item.disabled,
.waifu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.upgrade-item.locked {
    opacity: 0.3;
    cursor: not-allowed;
    background: linear-gradient(45deg, #f5f5f5, #e0e0e0) !important;
    border-color: #cccccc !important;
    color: #999999;
}

.upgrade-item.purchased {
    opacity: 0.8;
    background: linear-gradient(45deg, #e8f5e8, #d4edda) !important;
    border-color: #28a745 !important;
    color: #155724;
    cursor: default;
}

.upgrade-item.purchased .item-name {
    color: #155724;
    font-weight: bold;
}

.upgrade-item.purchased .item-description {
    color: #6c757d;
}

.upgrade-item.purchased .buy-btn.purchased {
    background: #28a745 !important;
    color: white !important;
    cursor: default;
    font-weight: bold;
}

.upgrade-item.locked .item-name {
    color: #999999;
}

.upgrade-item.locked .item-description {
    color: #aaaaaa;
}

.upgrade-item.locked .buy-btn {
    background: #cccccc !important;
    color: #777777 !important;
    cursor: not-allowed;
}

.building-item.affordable,
.upgrade-item.affordable {
    border-color: rgba(0, 200, 0, 0.5) !important;
    box-shadow:
        0 4px 12px rgba(0, 200, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    background: rgba(240, 255, 240, 0.18) !important;
}

/* remove strong pulsing to avoid blocky look */

/* Upgrade type indicators */
.upgrade-type {
    font-size: 10px;
    font-weight: bold;
    color: var(--primary-pink);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flavor-text {
    font-size: 10px;
    color: #888;
    font-style: italic;
    margin-bottom: 3px;
}

.no-upgrades {
    text-align: center;
    padding: 20px;
    color: var(--primary-pink);
    font-size: 14px;
    font-weight: bold;
}

/* Category-specific upgrade styling */
.upgrade-click {
    border-left: 4px solid #ff6b6b;
}

.upgrade-cafe {
    border-left: 4px solid #8b4513;
}

.upgrade-shrine {
    border-left: 4px solid #dc143c;
}

.upgrade-flavor {
    border-left: 4px solid #daa520;
}

.upgrade-neko {
    border-left: 4px solid #ff69b4;
}

.upgrade-golden {
    border-left: 4px solid #ffd700;
    background: linear-gradient(45deg, #fffacd, #f0f8ff);
}

.upgrade-waifu {
    border-left: 4px solid #ff1493;
    background: linear-gradient(45deg, #ffb6c1, #ffc0cb);
}

.item-info {
    flex: 1;
    padding-right: 10px;
}

.item-name {
    font-weight: bold;
    font-size: 14px;
    color: var(--primary-pink);
    margin-bottom: 4px;
    text-shadow: 1px 1px 2px rgba(255, 105, 180, 0.3);
}

.item-description {
    font-size: 11px;
    color: #666;
    line-height: 1.3;
    margin-bottom: 3px;
}

.item-cost {
    font-weight: bold;
    font-size: 12px;
    color: var(--primary-pink);
    text-align: right;
    min-width: 80px;
}

.item-name {
    font-weight: 800;
    color: var(--primary-pink);
    margin-bottom: 5px;
}

.item-description {
    font-size: 0.9rem;
    color: var(--purple);
    margin-bottom: 5px;
}

.item-cost {
    font-weight: 600;
    color: var(--black);
}

.unlock-bonus {
    font-size: 0.8rem;
    color: var(--gold);
    background: rgba(255, 215, 0, 0.2);
    padding: 4px 8px;
    border-radius: 8px;
    margin-top: 5px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    text-align: center;
    font-weight: 600;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.collection-bonus {
    font-size: 0.8rem;
    color: var(--primary-pink);
    background: rgba(255, 105, 180, 0.2);
    padding: 4px 8px;
    border-radius: 8px;
    margin-top: 5px;
    border: 1px solid rgba(255, 105, 180, 0.4);
    text-align: center;
    font-weight: 600;
    text-shadow: 0 0 5px rgba(255, 105, 180, 0.3);
}

.item-count {
    background: var(--primary-pink);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
}

/* Building item controls styling */
.item-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.buy-buttons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.buy-btn {
    background: transparent;
    color: var(--primary-pink);
    border: 2px solid var(--primary-pink);
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    text-align: center;
    min-width: 60px;
}

.buy-btn:hover:not(.disabled) {
    background: var(--primary-pink);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.buy-btn.disabled {
    background: transparent;
    color: #999;
    border-color: #ccc;
    cursor: not-allowed;
    opacity: 0.5;
}

.buy-btn.affordable {
    background: #1dbf5f !important;
    border-color: #1dbf5f !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(29, 191, 95, 0.35);
}

.buy-btn.affordable:hover {
    background: #00bb00 !important;
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.6);
}

/* Special styling for Max button */
.buy-btn[data-quantity="max"] {
    background: transparent;
    border-color: #ff6b35;
    color: #ff6b35;
    font-weight: 700;
    position: relative;
    overflow: hidden;
}

.buy-btn[data-quantity="max"]:not(.disabled) {
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    color: white;
    font-weight: 700;
}

.buy-btn[data-quantity="max"]:not(.disabled):hover {
    background: linear-gradient(45deg, #ff5722, #ff9800) !important;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.45) !important;
}

@keyframes maxButtonGlow {
    0%, 100% { 
        box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
    }
    50% { 
        box-shadow: 0 4px 16px rgba(255, 107, 53, 0.7);
    }
}

@keyframes pulse-green-btn {
    0%, 100% { 
        box-shadow: 0 2px 8px rgba(0, 255, 0, 0.4);
    }
    50% { 
        box-shadow: 0 4px 12px rgba(0, 255, 0, 0.7);
    }
}

/* Achievement specific styling */
.achievement-item {
    cursor: default;
}

.achievement-item.unlocked {
    background: linear-gradient(45deg, var(--cyan), var(--neon-blue));
    color: white;
}

.achievement-item.unlocked .item-name {
    color: white;
}

.waifu-item.unlocked {
    background: linear-gradient(45deg, var(--primary-pink), var(--purple));
    color: white;
    border-color: var(--primary-pink);
}

.waifu-item.unlocked.active {
    background: linear-gradient(45deg, var(--cyan), var(--neon-blue));
    border-color: var(--cyan);
    box-shadow: 0 8px 24px rgba(64, 224, 208, 0.6);
    /* REMOVED ANNOYING PULSE ANIMATION */
}

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

.waifu-item.unlocked .item-name,
.waifu-item.unlocked .item-description,
.waifu-item.unlocked .item-cost,
.waifu-item.unlocked .item-bonus {
    color: white;
}

/* Waifu sprite styling */
.waifu-sprite {
    flex-shrink: 0;
    margin-right: 15px;
}

.waifu-sprite img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--secondary-pink);
    object-fit: cover;
    transition: all 0.3s ease;
}

.waifu-item:hover .waifu-sprite img {
    transform: scale(1.1);
    border-color: var(--primary-pink);
    box-shadow: 0 4px 12px var(--shadow);
}

.waifu-item.active .waifu-sprite img {
    border-color: gold;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

/* Update waifu item layout for sprite */
.waifu-item {
    display: flex;
    align-items: center;
}

/* Bottom panel */
.bottom-panel {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 32px var(--shadow);
    backdrop-filter: blur(10px);
    border: 2px solid var(--cyan);
}

.options {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.option-btn {
    padding: 12px 20px;
    background: linear-gradient(45deg, var(--cyan), var(--neon-blue));
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(64, 224, 208, 0.4);
}

.option-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(64, 224, 208, 0.6);
}

/* Admin button special styling */
.admin-btn {
    background: linear-gradient(45deg, #ff69b4, #ff1493) !important;
    animation: pulse 2s infinite;
}

.admin-btn:hover {
    background: linear-gradient(45deg, #ff1493, #dc143c) !important;
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.8) !important;
}

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

/* Popup */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup.show {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.popup-content {
    background: white;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    border: 4px solid var(--primary-pink);
    box-shadow: 0 16px 64px var(--shadow);
    max-width: 400px;
    margin: 20px;
}

.popup-content h3 {
    font-family: 'Fredoka One', cursive;
    color: var(--primary-pink);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.popup-content p {
    color: var(--purple);
    margin-bottom: 20px;
    font-weight: 600;
}

#popupClose {
    padding: 12px 24px;
    background: linear-gradient(45deg, var(--primary-pink), var(--purple));
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

#popupClose:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--glow);
}

/* Golden Heart */
.golden-heart {
    position: fixed;
    font-size: 3rem;
    cursor: pointer;
    z-index: 999;
    animation: pulse 2s infinite, float 4s ease-in-out infinite;
    display: none;
}

.golden-heart.show {
    display: block;
}

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

/* Responsive design */
@media (max-width: 768px) {
    .main-game {
        grid-template-columns: 1fr;
    }
    
    .title {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
        letter-spacing: 1px;
    }
    
    .title-subtitle {
        font-size: 0.9rem;
    }
    
    .sparkle {
        font-size: 1rem;
    }
    
    .stats {
        gap: 15px;
    }
    
    .waifu-image {
        width: min(60vw, 200px);
        height: auto;
        aspect-ratio: 1 / 1;
    }
    
    .skill-buttons {
        flex-direction: column;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-pink);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-pink);
    border-radius: 4px;
}

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

/* Achievement Notification */
.achievement-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(45deg, var(--cyan), var(--neon-blue));
    border: 3px solid gold;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(255,215,0,0.5);
    z-index: 10000;
    transform: translateX(400px);
    transition: all 0.5s ease;
    max-width: 350px;
}

.achievement-notification.show {
    transform: translateX(0);
}

.achievement-content {
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
}

.achievement-icon {
    font-size: 2rem;
    text-shadow: 0 0 10px gold;
}

.achievement-text {
    flex: 1;
}

.achievement-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.achievement-desc {
    font-size: 0.9rem;
    opacity: 0.9;
}

.achievement-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.achievement-close:hover {
    background: rgba(255,255,255,0.4);
    transform: scale(1.1);
}

/* Enhanced particle effects for waifu clicks */
.particle {
    position: absolute;
    pointer-events: none;
    font-size: 20px;
    font-weight: bold;
    z-index: 1000;
    animation: particleFloat 2.5s ease-out forwards;
}

@keyframes particleFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-50px) scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-120px) scale(0.3) rotate(360deg);
    }
}

/* Multi-particle burst effect */
.particle-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    z-index: 1001;
}

.particle-burst .mini-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: burstOut 1.5s ease-out forwards;
}

@keyframes burstOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0);
    }
}

/* Floating icons around waifu */
.floating-icon {
    position: absolute;
    font-size: 16px;
    pointer-events: none;
    z-index: 999;
    animation: floatAround 4s ease-in-out infinite;
}

@keyframes floatAround {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-15px) rotate(90deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-5px) rotate(180deg);
        opacity: 0.8;
    }
    75% {
        transform: translateY(-20px) rotate(270deg);
        opacity: 1;
    }
}

.heart-particle {
    color: #ff69b4;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.8);
}

.star-particle {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.friend-particle {
    color: #ff69b4;
    text-shadow: 0 0 10px rgba(255, 182, 193, 0.9);
}

.goth-particle {
    color: #2e2e2e;
    text-shadow: 0 0 10px rgba(128, 0, 128, 0.8);
}

.maid-particle {
    color: #87ceeb;
    text-shadow: 0 0 10px rgba(135, 206, 235, 0.8);
}

.villainess-particle {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.streamer-particle {
    color: #ff69b4;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.8);
}

/* Fake AdSense Styling */
.fake-ad {
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    border: 1px solid #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-family: Arial, sans-serif;
    font-size: 12px;
    text-align: center;
    margin: 10px 0;
    position: relative;
    overflow: hidden;
}

.fake-ad::before {
    content: 'Advertisement';
    position: absolute;
    top: 2px;
    left: 5px;
    font-size: 9px;
    color: #999;
}

.fake-ad-banner {
    height: 90px;
    width: 100%;
    max-width: 728px;
    margin: 0 auto;
}

.fake-ad-square {
    height: 250px;
    width: 250px;
}

.fake-ad-skyscraper {
    height: 600px;
    width: 160px;
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

.fake-ad-skyscraper-left {
    height: 600px;
    width: 160px;
    position: fixed;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

/* Hide ad containers entirely when ads are disabled (local/dev) */
.ads-disabled .adsbygoogle,
.ads-disabled .fake-ad,
.ads-disabled .fake-ad-banner,
.ads-disabled .fake-ad-square,
.ads-disabled .fake-ad-skyscraper,
.ads-disabled .fake-ad-skyscraper-left {
    display: none !important;
}

.fake-ad-mobile {
    height: 50px;
    width: 100%;
}

/* Hide skyscraper on mobile */
@media (max-width: 768px) {
    .fake-ad-skyscraper,
    .fake-ad-skyscraper-left {
        display: none;
    }
    
    .fake-ad-mobile {
        display: flex !important;
    }
    
    .fake-ad-square {
        height: 200px;
        width: 200px;
    }
}

/* Desktop ads */
@media (min-width: 769px) {
    .fake-ad-mobile {
        display: none !important;
    }
}

/* Responsive ad container */
.ad-container {
    margin: 15px 0;
    text-align: center;
}

/* Waifu click pulse effect */
.waifu-container.pulse {
    animation: waifuPulse 0.3s ease-out;
}

@keyframes waifuPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Save/Export System Styles */
.save-section {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.save-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#exportSave, #importSave {
    background: linear-gradient(45deg, #ff69b4, #ff1493);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 4px 8px rgba(255, 105, 180, 0.3);
    transition: all 0.3s ease;
    flex: 1;
    min-width: 120px;
}

#exportSave:hover, #importSave:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 105, 180, 0.4);
    background: linear-gradient(45deg, #ff1493, #ff69b4);
}

#saveData {
    display: none;
    width: 100%;
    height: 80px;
    padding: 8px;
    border: 2px solid #ff69b4;
    border-radius: 10px;
    resize: vertical;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    background: #fff0f5;
    margin-top: 10px;
}

/* Settings Modal Styles */
.settings-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.settings-modal.show {
    display: flex;
}

.settings-content {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 25px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 60px rgba(255, 105, 180, 0.2);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.settings-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.settings-header h3 {
    margin: 0;
    font-family: 'Fredoka One', cursive;
    font-size: 1.8rem;
    background: linear-gradient(45deg, var(--primary-pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.version-info {
    position: absolute;
    top: 8px;
    right: 40px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

.settings-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    transform: rotate(90deg);
}

.settings-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.setting-label {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    color: var(--black);
    font-size: 1rem;
}

.setting-toggle {
    padding: 8px 16px;
    border: 2px solid var(--primary-pink);
    border-radius: 20px;
    background: var(--primary-pink);
    color: white;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 60px;
}

.setting-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 20, 147, 0.3);
}

.setting-toggle.off {
    background: var(--cream);
    color: var(--black);
    border-color: #ccc;
}

.setting-item.button-item {
    justify-content: center;
}

.setting-btn {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 15px;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.2);
    color: #2c2c2c;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.setting-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 25px rgba(255, 105, 180, 0.2);
}

.setting-btn.admin-btn {
    background: linear-gradient(45deg, #ff69b4, #ff1493);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.setting-btn.admin-btn:hover {
    background: linear-gradient(45deg, #ff1493, #ff69b4);
}

.setting-btn.info-btn {
    background: linear-gradient(45deg, #4facfe, #00f2fe);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.setting-btn.info-btn:hover {
    background: linear-gradient(45deg, #00f2fe, #4facfe);
    transform: translateY(-2px);
}

.setting-btn.patreon-settings-btn {
    background: linear-gradient(45deg, #ff424d, #ff6b6b);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.setting-btn.patreon-settings-btn:hover {
    background: linear-gradient(45deg, #ff6b6b, #ff424d);
    transform: translateY(-2px);
    box-shadow: 
        0 15px 35px rgba(255, 66, 77, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.setting-btn.danger-btn {
    background: linear-gradient(45deg, #ff6b6b, #ee5a52);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.setting-btn.danger-btn:hover {
    background: linear-gradient(45deg, #ee5a52, #ff6b6b);
}

/* Responsive Design for Better Viewport Fit */
@media (max-height: 800px) {
    .game-container {
        padding: 10px;
    }
    
    .game-header {
        padding: 12px 15px;
        margin-bottom: 10px;
    }
    
    .title {
        font-size: 2rem;
        margin-bottom: 10px;
    }
    
    .stat-item {
        padding: 8px 15px;
        min-width: 70px;
    }
    
    .main-game {
        gap: 15px;
    }
    
    .waifu-panel, .upgrades-panel {
        padding: 15px;
    }
    
    .waifu-image {
        width: 170px;
        height: 170px;
    }
    
    .waifu-container {
        margin-bottom: 10px;
    }
    
    .waifu-selection {
        margin-bottom: 10px;
    }
    
    .panel-tabs {
        margin-bottom: 10px;
    }
    
    .tab-btn {
        padding: 8px;
        font-size: 0.9rem;
    }
}

@media (max-height: 700px) {
    .title {
        font-size: 1.8rem;
        margin-bottom: 8px;
    }
    
    .stat-item {
        padding: 6px 12px;
    }
    
    .waifu-image {
        width: 150px;
        height: 150px;
    }
    
    .building-item, .upgrade-item {
        padding: 10px;
        margin-bottom: 6px;
    }
}

@media (max-width: 768px) {
    .main-game { grid-template-columns: 1fr; gap: 12px; }
    
    .stats { gap: 10px; }
    
    .stat-item { min-width: 60px; padding: 8px 12px; }

    /* Give the upgrades panel more vertical space */
    .upgrades-panel { min-height: 60vh; }

    /* Prevent sticky mobile ad from overlapping content */
    .game-container { padding-bottom: 64px; }
}

@media (max-width: 480px) {
    .game-container {
    padding: 8px;
    /* extra bottom padding for sticky mobile ad if shown */
    padding-bottom: 64px;
    }
    
    .title {
        font-size: 1.5rem;
    }
    
    .stats {
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .stat-item {
        flex: 1;
        min-width: 50px;
    }

    /* Tighter grid cards on very small screens */
    .buildings-list, .upgrades-list, .achievements-list, .waifus-list, .stats-list {
        grid-template-columns: 1fr;
    }
}

#saveData:focus {
    outline: none;
    border-color: #ff1493;
    box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
}

/* Current Waifu Power Section */
.current-waifu-power {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.current-waifu-power h4 {
    color: var(--gold);
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.power-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.power-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.power-label {
    color: #2c3e50;
    font-weight: 600;
    font-size: 0.9rem;
}

.power-value {
    color: var(--gold);
    font-weight: 700;
    font-size: 0.9rem;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.power-total {
    border: 2px solid var(--gold);
    background: rgba(255, 215, 0, 0.1);
    margin-top: 5px;
}

.power-total .power-label {
    color: var(--gold);
    font-size: 1rem;
}

.power-total .power-value {
    font-size: 1.1rem;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* General Statistics Section */
.general-stats-section {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.general-stats-section h4 {
    color: var(--primary-pink);
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
}