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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    overflow: hidden;
}

.container {
    background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
    border-radius: 20px;
    padding: 12px 20px;
    box-shadow: 0 25px 70px rgba(99, 102, 241, 0.4);
    width: 800px;
    height: 500px;
    max-width: 100%;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid rgba(168, 85, 247, 0.3);
}

h1 {
    text-align: center;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
    font-size: 1.4rem;
    flex-shrink: 0;
    font-weight: 800;
}

.score-board {
    display: flex;
    justify-content: space-around;
    padding: 8px 8px;
    background: transparent;
    border-radius: 8px;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
}

.score-item {
    text-align: center;
}

.score-label {
    display: block;
    color: #666;
    font-size: 0.85rem;
    margin-bottom: 3px;
}

.score-value {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.game-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
    flex: 1;
    position: relative;
    min-height: 240px;
}

.battle-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 50%, #fce7f3 100%);
    border-radius: 15px;
    border: 2px solid rgba(168, 85, 247, 0.2);
    overflow: hidden;
    box-shadow: inset 0 2px 10px rgba(168, 85, 247, 0.1);
}

.battle-container::before {
    content: 'VS';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    font-weight: bold;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.15;
    z-index: 0;
}

.player-choice-wrapper,
.computer-choice-wrapper {
    position: absolute;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.player-choice-wrapper {
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
}

.computer-choice-wrapper {
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
}

.player-choice-wrapper::before,
.computer-choice-wrapper::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

/* Screen shake for computer wins */
@keyframes screenShake {
    0%, 100% {
        transform: translate(0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate(-8px, -8px);
    }
    20%, 40%, 60%, 80% {
        transform: translate(8px, 8px);
    }
}

.screen-shake {
    animation: screenShake 0.5s ease-in-out;
}

/* Score pulse animations */
@keyframes scorePulseWin {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(1.2);
    }
}

@keyframes scorePulseLose {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(1.2);
    }
}

.score-pulse-win {
    animation: scorePulseWin 0.6s ease-in-out;
}

.score-pulse-win .score-value {
    color: #10b981 !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.score-pulse-lose {
    animation: scorePulseLose 0.6s ease-in-out;
}

.score-pulse-lose .score-value {
    color: #ef4444 !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hide result message element (no longer used) */
.result-message {
    display: none;
}

.controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 5px;
    flex-shrink: 0;
}

.choice-btn {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.choice-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.5);
    background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
}

.choice-btn:active {
    transform: translateY(-1px);
}

.btn-icon {
    font-size: 1.6rem;
}

.btn-label {
    font-size: 0.75rem;
    font-weight: 600;
}

.hidden {
    display: none !important;
}

/* Realistic Graphics */
.realistic-rock, .realistic-paper, .realistic-scissors-svg {
    width: 120px;
    height: 120px;
    position: relative;
    transform-style: preserve-3d;
}

.realistic-scissors-svg {
    filter: drop-shadow(2px 3px 5px rgba(0,0,0,0.3));
}

/* REALISTIC ROCK */
.realistic-rock {
    width: 110px;
    height: 95px;
    position: relative;
}

.rock-layer-1, .rock-layer-2, .rock-layer-3 {
    position: absolute;
    border-radius: 45% 55% 50% 50% / 50% 45% 55% 50%;
}

.rock-layer-1 {
    width: 110px;
    height: 95px;
    background: radial-gradient(ellipse at 30% 30%, #9E9E9E, #757575 40%, #5A5A5A 70%, #424242);
    box-shadow:
        inset -5px -5px 10px rgba(0,0,0,0.5),
        inset 5px 5px 10px rgba(255,255,255,0.1),
        3px 6px 15px rgba(0,0,0,0.6);
}

.rock-layer-2 {
    width: 60px;
    height: 50px;
    top: 13px;
    left: 10px;
    background: radial-gradient(circle at 40% 40%, #808080, #5A5A5A);
    opacity: 0.7;
}

.rock-layer-3 {
    width: 48px;
    height: 40px;
    top: 10px;
    right: 13px;
    background: radial-gradient(circle at 60% 30%, #6E6E6E, #4A4A4A);
    opacity: 0.6;
}

.rock-shine {
    position: absolute;
    width: 28px;
    height: 24px;
    top: 17px;
    left: 28px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.3), transparent 60%);
    border-radius: 50%;
    filter: blur(3px);
}

/* REALISTIC PAPER */
.realistic-paper {
    width: 100px;
    height: 130px;
    perspective: 1000px;
}

.paper-sheet {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 50%, #EEEEEE 100%);
    border-radius: 3px;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.12),
        0 1px 2px rgba(0,0,0,0.24),
        inset 0 0 50px rgba(0,0,0,0.03);
    position: relative;
    border: 1px solid #E0E0E0;
}

.paper-texture {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.01) 2px, rgba(0,0,0,0.01) 4px);
    pointer-events: none;
}

.paper-fold {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 25px 0;
    border-color: transparent #BDBDBD transparent transparent;
    filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.2));
}

.paper-line {
    position: absolute;
    left: 15px;
    right: 15px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #2196F3 10%, #2196F3 90%, transparent);
    opacity: 0.4;
}

.paper-line:nth-child(3) { top: 40px; }
.paper-line:nth-child(4) { top: 60px; }
.paper-line:nth-child(5) { top: 80px; width: 70%; }
.paper-line:nth-child(6) { top: 100px; width: 85%; }

.paper-shadow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 10px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.2), transparent);
    filter: blur(3px);
}

/* REALISTIC SCISSORS - SVG based */
.scissor-top-half, .scissor-bottom-half {
    transform-origin: 100px 100px;
}

/* PARTICLE EFFECTS */
.particle-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 100;
}

.particle {
    position: absolute;
    pointer-events: none;
    animation: particleExplode 1.2s ease-out forwards;
}

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

.particle-paper-tear {
    width: 8px;
    height: 12px;
    background: linear-gradient(135deg, #FAFAFA, #E0E0E0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.particle-rock-debris {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #808080, #4A4A4A);
    border-radius: 40%;
}

.particle-metal-spark {
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #FFD700, #FFA500);
    border-radius: 50%;
    box-shadow: 0 0 4px #FFD700;
}

/* CONFETTI EFFECT */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -10px;
    animation: confettiFall 3s ease-in forwards;
    opacity: 1;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(var(--rotation)) translateX(var(--drift));
        opacity: 0.7;
    }
}

.confetti-square {
    background: var(--color);
}

.confetti-circle {
    background: var(--color);
    border-radius: 50%;
}

.confetti-triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid var(--color);
}

.confetti-rectangle {
    width: 6px;
    height: 12px;
    background: var(--color);
}

/* Scissors blade opening/closing animation */
@keyframes scissorsTopOpen {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(-25deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    35% {
        transform: rotate(-30deg);
    }
    45% {
        transform: rotate(-8deg);
    }
    50% {
        transform: rotate(-32deg);
    }
    60% {
        transform: rotate(-12deg);
    }
    70% {
        transform: rotate(-28deg);
    }
    80% {
        transform: rotate(-15deg);
    }
    90% {
        transform: rotate(-22deg);
    }
    100% {
        transform: rotate(-5deg);
    }
}

@keyframes scissorsBottomOpen {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(25deg);
    }
    25% {
        transform: rotate(10deg);
    }
    35% {
        transform: rotate(30deg);
    }
    45% {
        transform: rotate(8deg);
    }
    50% {
        transform: rotate(32deg);
    }
    60% {
        transform: rotate(12deg);
    }
    70% {
        transform: rotate(28deg);
    }
    80% {
        transform: rotate(15deg);
    }
    90% {
        transform: rotate(22deg);
    }
    100% {
        transform: rotate(5deg);
    }
}

/* Scissors cutting paper - scissors move RIGHT (player side) */
@keyframes scissorsCuttingRight {
    0% {
        transform: translateX(0) rotate(0deg) scale(1);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }
    10% {
        transform: translateX(15px) rotate(-8deg) scale(1.05);
    }
    20% {
        transform: translateX(32px) rotate(5deg) scale(1.1);
        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
    }
    30% {
        transform: translateX(48px) rotate(-12deg) scale(1.15);
    }
    40% {
        transform: translateX(62px) rotate(8deg) scale(1.2);
        filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
    }
    50% {
        transform: translateX(72px) rotate(-15deg) scale(1.25);
    }
    60% {
        transform: translateX(80px) rotate(10deg) scale(1.3);
        filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35));
    }
    70% {
        transform: translateX(86px) rotate(-18deg) scale(1.35);
    }
    80% {
        transform: translateX(90px) rotate(12deg) scale(1.4);
        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
    }
    90% {
        transform: translateX(92px) rotate(-8deg) scale(1.43);
    }
    100% {
        transform: translateX(94px) rotate(0deg) scale(1.45);
        filter: drop-shadow(0 12px 24px rgba(0,0,0,0.45));
    }
}

/* Scissors cutting paper - scissors move LEFT (computer side) */
@keyframes scissorsCuttingLeft {
    0% {
        transform: translateX(0) rotate(0deg) scaleX(-1);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }
    10% {
        transform: translateX(-15px) rotate(8deg) scale(-1.05, 1.05);
    }
    20% {
        transform: translateX(-32px) rotate(-5deg) scale(-1.1, 1.1);
        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
    }
    30% {
        transform: translateX(-48px) rotate(12deg) scale(-1.15, 1.15);
    }
    40% {
        transform: translateX(-62px) rotate(-8deg) scale(-1.2, 1.2);
        filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
    }
    50% {
        transform: translateX(-72px) rotate(15deg) scale(-1.25, 1.25);
    }
    60% {
        transform: translateX(-80px) rotate(-10deg) scale(-1.3, 1.3);
        filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35));
    }
    70% {
        transform: translateX(-86px) rotate(18deg) scale(-1.35, 1.35);
    }
    80% {
        transform: translateX(-90px) rotate(-12deg) scale(-1.4, 1.4);
        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
    }
    90% {
        transform: translateX(-92px) rotate(8deg) scale(-1.43, 1.43);
    }
    100% {
        transform: translateX(-94px) rotate(0deg) scale(-1.45, 1.45);
        filter: drop-shadow(0 12px 24px rgba(0,0,0,0.45));
    }
}

@keyframes paperSplit {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
        filter: blur(0px) brightness(1);
    }
    35% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: translateX(0) translateY(0) rotate(0deg);
    }
    45% {
        clip-path: polygon(0 0, 52% 0, 52% 100%, 0 100%);
        transform: translateX(-3px) translateY(0) rotate(-2deg);
    }
    55% {
        clip-path: polygon(0 0, 50% 0, 48% 100%, 0 100%);
        transform: translateX(-10px) translateY(5px) rotate(-12deg);
        opacity: 0.9;
    }
    65% {
        clip-path: polygon(0 0, 48% 0, 46% 100%, 0 100%);
        transform: translateX(-20px) translateY(12px) rotate(-22deg);
        opacity: 0.75;
        filter: blur(0.5px) brightness(0.95);
    }
    75% {
        clip-path: polygon(0 0, 47% 0, 44% 100%, 0 100%);
        transform: translateX(-30px) translateY(20px) rotate(-32deg);
        opacity: 0.55;
        filter: blur(1px) brightness(0.9);
    }
    85% {
        clip-path: polygon(0 0, 46% 0, 42% 100%, 0 100%);
        transform: translateX(-40px) translateY(30px) rotate(-42deg);
        opacity: 0.35;
        filter: blur(1.5px) brightness(0.85);
    }
    100% {
        clip-path: polygon(0 0, 45% 0, 40% 100%, 0 100%);
        transform: translateX(-50px) translateY(42px) rotate(-50deg);
        opacity: 0.15;
        filter: blur(2px) brightness(0.8);
    }
}

@keyframes paperSplitRight {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
        filter: blur(0px) brightness(1);
    }
    35% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        opacity: 0;
    }
    45% {
        clip-path: polygon(48% 0, 100% 0, 100% 100%, 48% 100%);
        transform: translateX(3px) translateY(0) rotate(2deg);
        opacity: 1;
    }
    55% {
        clip-path: polygon(50% 0, 100% 0, 100% 100%, 52% 100%);
        transform: translateX(10px) translateY(5px) rotate(12deg);
        opacity: 0.9;
    }
    65% {
        clip-path: polygon(52% 0, 100% 0, 100% 100%, 54% 100%);
        transform: translateX(20px) translateY(12px) rotate(22deg);
        opacity: 0.75;
        filter: blur(0.5px) brightness(0.95);
    }
    75% {
        clip-path: polygon(53% 0, 100% 0, 100% 100%, 56% 100%);
        transform: translateX(30px) translateY(20px) rotate(32deg);
        opacity: 0.55;
        filter: blur(1px) brightness(0.9);
    }
    85% {
        clip-path: polygon(54% 0, 100% 0, 100% 100%, 58% 100%);
        transform: translateX(40px) translateY(30px) rotate(42deg);
        opacity: 0.35;
        filter: blur(1.5px) brightness(0.85);
    }
    100% {
        clip-path: polygon(55% 0, 100% 0, 100% 100%, 60% 100%);
        transform: translateX(50px) translateY(42px) rotate(50deg);
        opacity: 0.15;
        filter: blur(2px) brightness(0.8);
    }
}

/* Rock crushing scissors */
@keyframes rockCrushing {
    0% {
        transform: translateX(0) translateY(-80px) scale(1) rotate(0deg);
    }
    15% {
        transform: translateX(20px) translateY(-85px) scale(1.05) rotate(-15deg);
    }
    30% {
        transform: translateX(45px) translateY(-70px) scale(1.1) rotate(12deg);
    }
    45% {
        transform: translateX(65px) translateY(-35px) scale(1.2) rotate(-20deg);
    }
    55% {
        transform: translateX(75px) translateY(-5px) scale(1.3) rotate(15deg);
    }
    65% {
        transform: translateX(82px) translateY(5px) scale(1.4) rotate(-8deg);
        filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
    }
    70% {
        transform: translateX(84px) translateY(12px) scale(1.45) rotate(5deg);
    }
    75% {
        transform: translateX(83px) translateY(8px) scale(1.48) rotate(-3deg);
    }
    80% {
        transform: translateX(84px) translateY(11px) scale(1.5) rotate(2deg);
    }
    85% {
        transform: translateX(83px) translateY(9px) scale(1.52) rotate(-1deg);
    }
    90% {
        transform: translateX(84px) translateY(10px) scale(1.53) rotate(1deg);
    }
    95% {
        transform: translateX(84px) translateY(10px) scale(1.54) rotate(0deg);
    }
    100% {
        transform: translateX(84px) translateY(10px) scale(1.55) rotate(0deg);
        filter: drop-shadow(0 12px 30px rgba(0,0,0,0.6));
    }
}

@keyframes scissorsCrushed {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
        filter: brightness(1) blur(0px);
    }
    15% {
        transform: translateX(-5px) translateY(-3px) rotate(-8deg) scale(0.98);
        opacity: 0.98;
    }
    30% {
        transform: translateX(-15px) translateY(5px) rotate(-30deg) scale(0.9);
        opacity: 0.9;
        filter: brightness(0.95) blur(0.5px);
    }
    45% {
        transform: translateX(-28px) translateY(12px) rotate(-60deg) scale(0.75);
        opacity: 0.75;
        filter: brightness(0.85) blur(1px);
    }
    60% {
        transform: translateX(-40px) translateY(20px) rotate(-95deg) scale(0.55);
        opacity: 0.55;
        filter: brightness(0.7) blur(1.5px);
    }
    70% {
        transform: translateX(-48px) translateY(26px) rotate(-125deg) scale(0.4);
        opacity: 0.4;
        filter: brightness(0.5) blur(2px);
    }
    80% {
        transform: translateX(-55px) translateY(32px) rotate(-155deg) scale(0.28);
        opacity: 0.28;
        filter: brightness(0.35) blur(2.5px);
    }
    90% {
        transform: translateX(-60px) translateY(36px) rotate(-175deg) scale(0.18);
        opacity: 0.18;
        filter: brightness(0.25) blur(3px);
    }
    100% {
        transform: translateX(-65px) translateY(40px) rotate(-180deg) scale(0.1);
        opacity: 0.05;
        filter: brightness(0.15) blur(3.5px);
    }
}

/* Paper wrapping rock */
@keyframes paperWrapping {
    0% {
        transform: translateX(0) scale(1) rotateY(0deg) rotateZ(0deg);
        filter: brightness(1) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }
    10% {
        transform: translateX(15px) scale(1.05) rotateY(5deg) rotateZ(8deg);
    }
    20% {
        transform: translateX(35px) scale(1.15) rotateY(15deg) rotateZ(-10deg);
        filter: brightness(1.05) drop-shadow(0 4px 8px rgba(0,0,0,0.25));
    }
    30% {
        transform: translateX(50px) scale(1.3) rotateY(30deg) rotateZ(15deg);
    }
    40% {
        transform: translateX(62px) scale(1.45) rotateY(45deg) rotateZ(-20deg);
        filter: brightness(1.1) drop-shadow(0 6px 12px rgba(0,0,0,0.3));
    }
    50% {
        transform: translateX(72px) scale(1.6) rotateY(65deg) rotateZ(25deg);
    }
    60% {
        transform: translateX(80px) scale(1.75) rotateY(85deg) rotateZ(-30deg);
        filter: brightness(1.15) drop-shadow(0 8px 16px rgba(0,0,0,0.35));
    }
    70% {
        transform: translateX(86px) scale(1.85) rotateY(110deg) rotateZ(35deg);
    }
    80% {
        transform: translateX(90px) scale(1.95) rotateY(135deg) rotateZ(-40deg);
        filter: brightness(1.2) drop-shadow(0 10px 20px rgba(0,0,0,0.4));
    }
    90% {
        transform: translateX(93px) scale(2.0) rotateY(160deg) rotateZ(45deg);
    }
    100% {
        transform: translateX(95px) scale(2.05) rotateY(180deg) rotateZ(0deg);
        filter: brightness(1.25) drop-shadow(0 12px 24px rgba(0,0,0,0.45));
    }
}

@keyframes rockWrapped {
    0% {
        transform: translateX(0) scale(1) rotate(0deg);
        opacity: 1;
        filter: brightness(1) blur(0px);
    }
    10% {
        transform: translateX(-5px) scale(0.98) rotate(-3deg);
        opacity: 0.98;
    }
    20% {
        transform: translateX(-12px) scale(0.92) rotate(-8deg);
        opacity: 0.92;
        filter: brightness(0.95) blur(0.3px);
    }
    30% {
        transform: translateX(-20px) scale(0.85) rotate(-15deg);
        opacity: 0.85;
        filter: brightness(0.88) blur(0.6px);
    }
    40% {
        transform: translateX(-28px) scale(0.75) rotate(-22deg);
        opacity: 0.75;
        filter: brightness(0.78) blur(1px);
    }
    50% {
        transform: translateX(-36px) scale(0.65) rotate(-30deg);
        opacity: 0.65;
        filter: brightness(0.68) blur(1.5px);
    }
    60% {
        transform: translateX(-43px) scale(0.55) rotate(-38deg);
        opacity: 0.55;
        filter: brightness(0.55) blur(2px);
    }
    70% {
        transform: translateX(-49px) scale(0.45) rotate(-45deg);
        opacity: 0.45;
        filter: brightness(0.45) blur(2.5px);
    }
    80% {
        transform: translateX(-54px) scale(0.35) rotate(-52deg);
        opacity: 0.35;
        filter: brightness(0.35) blur(3px);
    }
    90% {
        transform: translateX(-58px) scale(0.25) rotate(-58deg);
        opacity: 0.25;
        filter: brightness(0.25) blur(3.5px);
    }
    100% {
        transform: translateX(-62px) scale(0.15) rotate(-65deg);
        opacity: 0.1;
        filter: brightness(0.15) blur(4px);
    }
}

/* Draw animations */
@keyframes drawShake {
    0%, 100% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    }
    10% {
        transform: translateX(-20px) translateY(-5px) rotate(-12deg) scale(1.05);
    }
    30% {
        transform: translateX(20px) translateY(5px) rotate(12deg) scale(1.05);
    }
    50% {
        transform: translateX(-18px) translateY(-3px) rotate(-10deg) scale(1.03);
    }
    70% {
        transform: translateX(18px) translateY(3px) rotate(10deg) scale(1.03);
    }
    90% {
        transform: translateX(-10px) translateY(-2px) rotate(-5deg) scale(1.01);
    }
}

/* Animation classes */
.scissors-cutting-right {
    animation: scissorsCuttingRight 2s ease-in-out forwards;
}

.scissors-cutting-right .scissor-top-half {
    animation: scissorsTopOpen 2s ease-in-out forwards;
}

.scissors-cutting-right .scissor-bottom-half {
    animation: scissorsBottomOpen 2s ease-in-out forwards;
}

.scissors-cutting-left {
    animation: scissorsCuttingLeft 2s ease-in-out forwards;
}

.scissors-cutting-left .scissor-top-half {
    animation: scissorsTopOpen 2s ease-in-out forwards;
}

.scissors-cutting-left .scissor-bottom-half {
    animation: scissorsBottomOpen 2s ease-in-out forwards;
}

.paper-split {
    animation: paperSplit 2s ease-in-out forwards;
}

.paper-split-right {
    animation: paperSplitRight 2s ease-in-out forwards;
}

.rock-crushing {
    animation: rockCrushing 1.8s ease-in-out forwards;
}

.scissors-crushed {
    animation: scissorsCrushed 1.8s ease-in-out forwards;
}

.paper-wrapping {
    animation: paperWrapping 2s ease-in-out forwards;
}

.rock-wrapped {
    animation: rockWrapped 2s ease-in-out forwards;
}

.draw-shake {
    animation: drawShake 0.6s ease-in-out 4;
}

/* Winner glow */
@keyframes winnerGlow {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.9)) drop-shadow(0 0 30px rgba(236, 72, 153, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(168, 85, 247, 1)) drop-shadow(0 0 45px rgba(236, 72, 153, 0.7));
    }
}

.winner-glow {
    animation: winnerGlow 1s ease-in-out infinite;
}

/* RESPONSIVE DESIGN */

/* Desktop view - ensure proper sizing */
@media (min-width: 601px) {
    .container {
        height: 500px !important;
    }

    .game-area {
        min-height: 240px;
        max-height: none;
    }

    .battle-container {
        min-height: 240px;
    }
}

/* Tablets and small laptops */
@media (max-width: 900px) and (min-width: 601px) {
    .container {
        width: 95vw;
        padding: 15px;
    }

    h1 {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .realistic-rock, .realistic-paper, .realistic-scissors-svg {
        width: 100px;
        height: 100px;
    }

    .realistic-rock {
        width: 90px;
        height: 80px;
    }

    .realistic-paper {
        width: 85px;
        height: 110px;
    }
}

/* Mobile devices */
@media (max-width: 600px) {
    body {
        padding: 5px;
    }

    .container {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        padding: 10px;
        justify-content: space-evenly;
    }

    .battle-container {
        max-height: 280px;
        padding-top: 50px;
    }

    h1 {
        font-size: 1.3rem;
        margin-bottom: 5px;
    }

    .score-board {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 8px;
        margin-bottom: 0;
        background: transparent;
        z-index: 15;
    }

    .score-label {
        font-size: 0.75rem;
    }

    .score-value {
        font-size: 1.5rem;
    }

    .game-area {
        margin-bottom: 8px;
        flex: 0.3;
        position: relative;
    }

    .battle-container {
        width: 100%;
        height: 100%;
    }

    .result-message {
        font-size: 1.1rem;
        min-height: 25px;
        margin-bottom: 5px;
    }

    .controls {
        gap: 10px;
        margin-bottom: 5px;
        margin-top: 0px;
    }

    .choice-btn {
        padding: 12px 18px;
        font-size: 0.9rem;
        gap: 5px;
    }

    .btn-icon {
        font-size: 1.8rem;
    }

    .btn-label {
        font-size: 0.8rem;
    }

    .play-again-btn {
        padding: 8px 20px;
        font-size: 0.85rem;
    }

    .realistic-rock, .realistic-paper, .realistic-scissors-svg {
        width: 70px;
        height: 70px;
    }

    .realistic-rock {
        width: 65px;
        height: 55px;
    }

    .realistic-paper {
        width: 60px;
        height: 78px;
    }

    .rock-layer-1 {
        width: 65px;
        height: 55px;
    }

    .rock-layer-2 {
        width: 35px;
        height: 30px;
        top: 8px;
        left: 6px;
    }

    .rock-layer-3 {
        width: 28px;
        height: 24px;
        top: 6px;
        right: 8px;
    }

    .rock-shine {
        width: 16px;
        height: 14px;
        top: 10px;
        left: 16px;
    }

    .player-choice-wrapper,
    .computer-choice-wrapper {
        width: 100px;
        height: 100px;
    }

    .battle-container::before {
        font-size: 2.5rem;
    }
}

/* Very small devices */
@media (max-width: 360px) {
    h1 {
        font-size: 1.1rem;
    }

    .score-value {
        font-size: 1.3rem;
    }

    .choice-btn {
        padding: 8px 12px;
    }

    .btn-icon {
        font-size: 1.3rem;
    }

    .btn-label {
        font-size: 0.7rem;
    }

    .realistic-rock, .realistic-paper, .realistic-scissors-svg {
        width: 60px;
        height: 60px;
    }

    .realistic-rock {
        width: 55px;
        height: 48px;
    }

    .realistic-paper {
        width: 50px;
        height: 65px;
    }
}

/* Landscape mode for mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .container {
        height: 95vh;
        padding: 8px;
    }

    h1 {
        font-size: 1.1rem;
        margin-bottom: 3px;
    }

    .score-board {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 5px;
        margin-bottom: 0;
        background: transparent;
        z-index: 15;
    }

    .score-value {
        font-size: 1.3rem;
    }

    .game-area {
        margin-bottom: 3px;
        position: relative;
    }

    .battle-container {
        width: 100%;
        height: 100%;
    }

    .result-message {
        font-size: 0.9rem;
        min-height: 20px;
        margin-bottom: 3px;
    }

    .controls {
        gap: 8px;
        margin-bottom: 3px;
    }

    .choice-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

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

    .btn-label {
        font-size: 0.65rem;
    }

    .realistic-rock, .realistic-paper, .realistic-scissors-svg {
        width: 50px;
        height: 50px;
    }

    .realistic-rock {
        width: 45px;
        height: 40px;
    }

    .realistic-paper {
        width: 42px;
        height: 55px;
    }
}