/* ==========================================================================
   Rock Paper Scissors - Background
   Soft floating shapes + gradient (light) → dark navy (dark mode)
   ========================================================================== */

/* ---- CSS variables ---- */
:root {
    --bg-rock-base1: #FFF8F0;
    --bg-rock-base2: #FFF5EB;
}
[data-theme="dark"] {
    --bg-rock-base1: #1A1A2E;
    --bg-rock-base2: #16213E;
}

/* Main background layer */
.game-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

/* Multi-layer gradient background */
.game-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(180deg,
            rgba(var(--color-primary-rgb), 0.15) 0%,
            transparent 30%,
            transparent 60%,
            rgba(var(--color-secondary-rgb), 0.1) 100%
        ),
        radial-gradient(ellipse at 20% 20%,
            rgba(var(--color-accent-rgb), 0.08) 0%,
            transparent 50%
        ),
        radial-gradient(ellipse at 80% 80%,
            rgba(var(--color-primary-rgb), 0.1) 0%,
            transparent 50%
        ),
        radial-gradient(ellipse at 50% 50%,
            rgba(var(--color-secondary-rgb), 0.05) 0%,
            transparent 70%
        ),
        linear-gradient(135deg, var(--bg-rock-base1) 0%, var(--bg-rock-base2) 100%);
    animation: bgShift 20s ease-in-out infinite;
}

/* Decoration shapes container */
.bg-decorations {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Floating decoration - rock */
.bg-shape-rock {
    position: absolute;
    top: 15%;
    left: 10%;
    width: 60px;
    height: 60px;
    opacity: 0.12;
    animation: floatRock 8s ease-in-out infinite;
}
.bg-shape-rock svg { fill: var(--color-primary); }

/* Floating decoration - paper */
.bg-shape-paper {
    position: absolute;
    top: 25%;
    right: 15%;
    width: 70px;
    height: 70px;
    opacity: 0.1;
    animation: floatPaper 10s ease-in-out infinite;
}
.bg-shape-paper svg { fill: var(--color-secondary); }

/* Floating decoration - scissors */
.bg-shape-scissors {
    position: absolute;
    bottom: 20%;
    left: 20%;
    width: 50px;
    height: 50px;
    opacity: 0.08;
    animation: floatScissors 12s ease-in-out infinite;
}
.bg-shape-scissors svg { fill: var(--color-accent); }

/* Dot decoration */
.bg-dots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle, rgba(var(--color-primary-rgb), 0.15) 1px, transparent 1px),
        radial-gradient(circle, rgba(var(--color-secondary-rgb), 0.1) 1px, transparent 1px);
    background-size: 80px 80px, 120px 120px;
    background-position: 0 0, 40px 40px;
    opacity: 0.5;
}

/* Animations */
@keyframes bgShift {
    0%, 100% { filter: hue-rotate(0deg); }
    50%      { filter: hue-rotate(5deg); }
}

@keyframes floatRock {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-20px) rotate(5deg); }
}

@keyframes floatPaper {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    33%      { transform: translateY(-15px) rotate(-5deg) scale(1.05); }
    66%      { transform: translateY(-25px) rotate(5deg) scale(0.95); }
}

@keyframes floatScissors {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-18px) rotate(10deg); }
    75%      { transform: translateY(-10px) rotate(-10deg); }
}

/* Mobile */
@media (max-width: 768px) {
    .bg-shape-rock,
    .bg-shape-paper,
    .bg-shape-scissors {
        transform: scale(0.7);
        animation-duration: 12s;
    }
    .bg-dots { background-size: 60px 60px, 100px 100px; }
}