*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:linear-gradient(135deg,#ffcc02,#ff9500);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}.container{text-align:center;background:#ffffffe6;padding:40px;border-radius:20px;box-shadow:0 10px 30px #0003}h1{color:#ff6b00;margin-bottom:20px;font-size:2.5em;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.game-selector{display:flex;gap:20px;justify-content:center;margin-bottom:30px}.game-btn{background:linear-gradient(135deg,#ff8c00,#ff6b00);color:#fff;border:none;padding:10px 20px;font-size:1.1em;border-radius:25px;cursor:pointer;transition:all .3s ease}.game-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0003}.game-btn.active{background:linear-gradient(135deg,#ff6b00,#ff9500);transform:scale(1.1)}.hidden{display:none!important}.score-board{display:flex;justify-content:space-around;margin-bottom:30px;gap:40px}.player-score{font-size:1.2em;font-weight:700;color:#333}.game-section{margin:0 auto}.game-board{display:grid;grid-template-columns:repeat(3,120px);grid-template-rows:repeat(3,120px);gap:10px;margin:0 auto 30px;background:#ff8c00;padding:20px;border-radius:20px;box-shadow:0 4px 15px #0003}.cell{background:linear-gradient(135deg,#fff9e6,#ffcc80);border:none;border-radius:20px;font-size:60px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 5px #0000001a}.cell:hover{background:linear-gradient(135deg,#fff2cc,#ffb74d);transform:scale(1.05)}.cell.x{color:#ff6b00}.cell.o{color:#4caf50}.connect4-board{display:grid;grid-template-columns:repeat(7,60px);grid-template-rows:repeat(6,60px);gap:8px;margin:0 auto 30px;background:#ff8c00;padding:20px;border-radius:20px;box-shadow:0 4px 15px #0003}.connect4-cell{background:linear-gradient(135deg,#fff9e6,#ffcc80);border:none;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:inset 0 2px 5px #0000001a}.connect4-cell:hover{background:linear-gradient(135deg,#fff2cc,#ffb74d);transform:scale(1.1)}.connect4-cell.x{color:#ff6b00}.connect4-cell.o{color:#4caf50}.winner-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.winner-content{text-align:center;background:#fff;padding:60px;border-radius:30px;box-shadow:0 20px 60px #0000004d;animation:bounceIn .6s ease-out}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}.winner-text{font-size:4em;color:#ff6b00;margin-bottom:30px;text-shadow:3px 3px 6px rgba(0,0,0,.2);animation:pulseText 1s ease-in-out infinite}@keyframes pulseText{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.winner-emoji{font-size:5em;margin:20px 0;animation:rotateEmoji 2s ease-in-out infinite}@keyframes rotateEmoji{0%,to{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}.winner-btn{background:linear-gradient(135deg,#ff6b00,#ff9500);color:#fff;border:none;padding:15px 30px;font-size:1.2em;border-radius:30px;cursor:pointer;transition:all .3s ease;margin-top:20px}.winner-btn:hover{transform:scale(1.05)}.confetti{position:absolute;width:10px;height:10px;pointer-events:none;animation:confetti-fall 3s linear forwards}@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.status{font-size:1.5em;margin-bottom:20px;color:#333;font-weight:700}.reset-btn{background:linear-gradient(135deg,#ff6b00,#ff9500);color:#fff;border:none;padding:15px 30px;font-size:1.2em;border-radius:30px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.reset-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}@media (max-width: 480px){.game-board{grid-template-columns:repeat(3,90px);grid-template-rows:repeat(3,90px);gap:5px;padding:15px}.connect4-board{grid-template-columns:repeat(7,40px);grid-template-rows:repeat(6,40px);gap:5px;padding:15px}.cell{font-size:45px}.connect4-cell{font-size:20px}h1{font-size:2em}.container{padding:20px}.winner-text{font-size:2.5em}}
