*{margin:0;padding:0;box-sizing:border-box}body{font-family:Comic Sans MS,cursive,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}#gameContainer{width:1000px;height:600px;background:linear-gradient(to bottom,#87ceeb,#98fb98);border-radius:20px;box-shadow:0 20px 60px #0000004d;position:relative;overflow:visible}#modeScreen{position:absolute;width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:150}.modeCard{background:#fff;border-radius:15px;padding:30px;cursor:pointer;transition:all .3s;box-shadow:0 8px 25px #0003;width:300px;text-align:center;margin:15px}.modeCard:hover{transform:translateY(-10px) scale(1.05);box-shadow:0 15px 35px #0000004d}.modeTitle{font-size:24px;color:#333;font-weight:700;margin-bottom:15px}.modeDescription{font-size:16px;color:#666;line-height:1.4}#selectionScreen{position:absolute;width:100%;height:100%;background:linear-gradient(135deg,#fa8bff,#2bd2ff 52%,#2bff88 90%);display:none;flex-direction:column;justify-content:center;align-items:center;z-index:100}.title{font-size:48px;color:#fff;text-shadow:3px 3px 6px rgba(0,0,0,.3);margin-bottom:30px;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.characterSelection{display:flex;flex-direction:row;gap:25px;margin-top:20px;justify-content:center;align-items:center;flex-wrap:nowrap}.characterCard{background:#fff;border-radius:15px;padding:15px;cursor:pointer;transition:all .3s;box-shadow:0 8px 25px #0003;width:180px;text-align:center}.characterCard:hover{transform:translateY(-10px) scale(1.05);box-shadow:0 15px 35px #0000004d}.characterEmoji{font-size:70px;margin-bottom:10px;display:block}.characterName{font-size:18px;color:#333;font-weight:700;margin-bottom:10px}.characterStats{font-size:12px;color:#666;line-height:1.4}.characterStats div{margin-bottom:3px}.playerIndicator{color:#fff;font-size:24px;margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#gameScreen{display:none;width:100%;height:100%;position:relative}#battleArena{width:100%;height:400px;position:relative;background:linear-gradient(to bottom,#87ceeb,#e0f6ff)}.ground{position:absolute;bottom:0;width:100%;height:100px;background:linear-gradient(to bottom,#8fbc8f,#228b22)}.character{position:absolute;bottom:100px;width:120px;height:140px;transition:all .3s}#player1{left:150px}#player2{right:150px;transform:scaleX(-1)}.catBody,.duckBody,.turtleBody{width:100%;height:100%;position:relative}.catTorso{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:80px;height:90px;background:orange;border-radius:40px 40px 20px 20px}.catHead{position:absolute;top:0;left:50%;transform:translate(-50%);width:70px;height:70px;background:orange;border-radius:50%}.catEars{position:absolute;top:-15px;width:100%;height:30px}.catEar{position:absolute;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:30px solid #FFA500}.catEar.left{left:8px}.catEar.right{right:8px}.catFace{position:absolute;top:20px;left:50%;transform:translate(-50%);width:60px;height:45px}.catEye{position:absolute;width:12px;height:15px;background:#000;border-radius:50%;top:8px}.catEye.left{left:12px}.catEye.right{right:12px}.catNose{position:absolute;width:8px;height:6px;background:pink;border-radius:50%;top:22px;left:50%;transform:translate(-50%)}.catWhiskers{position:absolute;top:24px;width:100%}.whisker{position:absolute;height:1px;width:25px;background:#000}.whisker.left1{left:2px;transform:rotate(-10deg)}.whisker.left2{left:2px;top:4px;transform:rotate(-5deg)}.whisker.right1{right:2px;transform:rotate(10deg)}.whisker.right2{right:2px;top:4px;transform:rotate(5deg)}.catLegs{position:absolute;bottom:-5px;width:100%;height:15px}.catLeg{position:absolute;width:12px;height:15px;background:orange;border-radius:0 0 6px 6px}.catLeg.left{left:20px}.catLeg.right{right:20px}.duckTorso{position:absolute;bottom:10px;left:50%;transform:translate(-50%);width:90px;height:80px;background:gold;border-radius:50%}.duckHead{position:absolute;top:0;left:50%;transform:translate(-50%);width:60px;height:60px;background:gold;border-radius:50%}.duckBeak{position:absolute;top:25px;left:-12px;width:25px;height:12px;background:#ff8c00;border-radius:50% 0 0 50%}.duckEye{position:absolute;width:10px;height:12px;background:#000;border-radius:50%;top:18px;left:25px}.duckWing{position:absolute;top:40px;right:-8px;width:35px;height:50px;background:orange;border-radius:50% 20%;transform:rotate(-15deg)}.duckFeet{position:absolute;bottom:-5px;left:50%;transform:translate(-50%);width:40px;height:10px}.duckFoot{position:absolute;width:15px;height:8px;background:#ff8c00;border-radius:50%}.duckFoot.left{left:5px}.duckFoot.right{right:5px}.healthBar{position:absolute;top:20px;width:300px;height:30px;background:#0000004d;border-radius:15px;overflow:hidden}#player1Health{left:20px}#player2Health{right:20px}.healthFill{height:100%;background:linear-gradient(to right,#ff6b6b,#4ecdc4);transition:width .5s;width:100%}.specialBar{position:absolute;top:55px;width:200px;height:15px;background:#0000004d;border-radius:8px;overflow:hidden}#player1Special{left:20px}#player2Special{right:20px}.specialFill{height:100%;background:linear-gradient(to right,#667eea,#764ba2);transition:width .5s;width:0%}.specialLabel{position:absolute;top:75px;font-size:12px;font-weight:700;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5)}#player1SpecialLabel{left:20px}#player2SpecialLabel{right:20px}.playerName{position:absolute;top:95px;font-size:20px;font-weight:700;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#player1Name{left:20px}#player2Name{right:20px}.controls{position:absolute;bottom:20px;width:100%;display:flex;justify-content:space-around;padding:0 30px}.actionButton{padding:12px 20px;font-size:16px;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:all .3s;box-shadow:0 5px 15px #0003}.actionButton:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0000004d}.actionButton:active{transform:translateY(0)}.actionButton:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 2px 5px #0000001a}.attackBtn{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff}.specialBtn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.specialBtn:disabled{background:linear-gradient(135deg,#999,#666)}.defenseBtn{background:linear-gradient(135deg,#4ecdc4,#44a08d);color:#fff}.resetBtn{background:linear-gradient(135deg,#ffa726,#ff7043);color:#fff;font-size:14px;padding:8px 16px}@keyframes hit{0%{transform:translate(0) rotate(0)}25%{transform:translate(-15px) rotate(-5deg);filter:hue-rotate(120deg)}50%{transform:translate(15px) rotate(5deg);filter:hue-rotate(240deg)}75%{transform:translate(-8px) rotate(-2deg);filter:hue-rotate(60deg)}to{transform:translate(0) rotate(0);filter:hue-rotate(0deg)}}@keyframes attack{0%{transform:translate(0) scale(1)}30%{transform:translate(80px) scale(1.2);filter:drop-shadow(0 0 20px #FF6B6B)}70%{transform:translate(60px) scale(1.1)}to{transform:translate(0) scale(1);filter:none}}@keyframes special{0%{transform:rotate(0) scale(1);filter:brightness(1)}25%{transform:rotate(180deg) scale(1.3);filter:brightness(1.5) drop-shadow(0 0 30px #667EEA)}50%{transform:rotate(360deg) scale(1.5);filter:brightness(2) drop-shadow(0 0 40px #764BA2)}75%{transform:rotate(540deg) scale(1.2);filter:brightness(1.5) drop-shadow(0 0 25px #667EEA)}to{transform:rotate(720deg) scale(1);filter:brightness(1)}}@keyframes defendShield{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.1);filter:brightness(1.5) drop-shadow(0 0 20px #4ECDC4)}to{transform:scale(1);filter:brightness(1)}}@keyframes defeated{0%{transform:translateY(0) rotate(0) scaleY(1);opacity:1;filter:brightness(1)}30%{transform:translateY(-20px) rotate(-15deg) scaleY(.9);opacity:.9;filter:brightness(.8) grayscale(.2)}60%{transform:translateY(40px) rotate(-45deg) scaleY(.6);opacity:.6;filter:brightness(.5) grayscale(.5)}to{transform:translateY(80px) rotate(-90deg) scaleY(.3);opacity:.2;filter:brightness(.3) grayscale(1)}}@keyframes victory{0%{transform:translateY(0) scale(1) rotate(0);filter:brightness(1)}20%{transform:translateY(-30px) scale(1.2) rotate(5deg);filter:brightness(1.5) drop-shadow(0 0 30px #FFD700)}40%{transform:translateY(-20px) scale(1.1) rotate(-5deg);filter:brightness(1.8) drop-shadow(0 0 40px #FFA500)}60%{transform:translateY(-35px) scale(1.3) rotate(3deg);filter:brightness(2) drop-shadow(0 0 50px #FF6B6B)}80%{transform:translateY(-25px) scale(1.15) rotate(-3deg);filter:brightness(1.6) drop-shadow(0 0 35px #4ECDC4)}to{transform:translateY(-15px) scale(1.1) rotate(0);filter:brightness(1.4) drop-shadow(0 0 25px #FFD700)}}@keyframes koEffect{0%{opacity:1;transform:scale(1);color:red}50%{opacity:1;transform:scale(1.5);color:gold;text-shadow:0 0 20px #FF0000,0 0 40px #FFD700}to{opacity:0;transform:scale(.8);color:red}}@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(300px) rotate(720deg);opacity:0}}@keyframes spark{0%{transform:scale(0) rotate(0);opacity:1}50%{transform:scale(1) rotate(180deg);opacity:1}to{transform:scale(0) rotate(360deg);opacity:0}}.attacking{animation:attack .8s ease-out;z-index:10}.hit{animation:hit .6s ease-out}.specialMove{animation:special 1.2s ease-out;z-index:10}.defending{animation:defendShield .5s ease-out}.defeated{animation:defeated 2s ease-out forwards;z-index:5}.victorious{animation:victory 3s ease-out infinite;z-index:15}.effect{position:absolute;font-size:32px;font-weight:700;animation:floatUp 1.2s forwards;pointer-events:none;text-shadow:2px 2px 4px rgba(0,0,0,.5);z-index:15}.koText{position:absolute;font-size:80px;font-weight:700;color:red;text-shadow:3px 3px 6px rgba(0,0,0,.8);animation:koEffect 2s ease-out;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%)}.confetti{position:absolute;width:10px;height:10px;animation:confetti 3s ease-out forwards;z-index:25}.spark{position:absolute;width:20px;height:20px;background:radial-gradient(circle,gold,orange);border-radius:50%;animation:spark 1s ease-out;z-index:20}@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(.8)}50%{opacity:1;transform:translateY(-30px) scale(1.2)}to{opacity:0;transform:translateY(-60px) scale(.5)}}#victoryScreen{display:none;position:absolute;width:100%;height:100%;background:#000000e6;z-index:200;justify-content:center;align-items:center;flex-direction:column}.victoryText{font-size:60px;color:gold;text-shadow:3px 3px 6px rgba(0,0,0,.5);animation:pulse 1s infinite;margin-bottom:20px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.playAgainBtn{margin-top:20px;padding:20px 40px;font-size:24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:15px;cursor:pointer;transition:all .3s}.playAgainBtn:hover{transform:scale(1.1)}.turnIndicator{position:absolute;top:130px;left:50%;transform:translate(-50%);font-size:24px;color:#fff;background:#000000b3;padding:10px 20px;border-radius:10px;text-shadow:none}.gameStatus{position:absolute;top:170px;left:50%;transform:translate(-50%);font-size:18px;color:#fff;background:#00000080;padding:5px 15px;border-radius:20px;opacity:0;transition:opacity .3s}.gameStatus.show{opacity:1}