body{font-family:sans-serif;background-color:#35654d;color:#f5f5f5;text-align:center}h1,h2{color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,.4)}#root{max-width:600px;margin:0 auto;padding:2rem}.game-board{display:flex;flex-direction:column;gap:2rem;margin-top:2rem}.player-area{background-color:#0000001a;border-radius:10px;padding:1rem}.hand{display:flex;justify-content:center;gap:1rem;height:120px}.card{width:80px;height:120px;border:1px solid #ccc;border-radius:8px;background-color:#fff;background-size:cover;background-position:center;display:flex;justify-content:center;align-items:center;font-size:2rem;font-weight:700;box-shadow:2px 2px 5px #0000001a}.card.back{background-color:#a0a0a0}.message-area{font-size:1.2rem;font-weight:700;color:#ffeb3b;min-height:50px;background-color:#0003;padding:.5rem;border-radius:5px}button{padding:.8rem 1.5rem;font-size:1rem;border:none;border-radius:5px;background-color:#1976d2;color:#fff;cursor:pointer;transition:background-color .3s}button:hover{background-color:#1565c0}.card.clickable{cursor:pointer;transition:transform .2s,box-shadow .2s}.card.clickable:hover{transform:translateY(-5px);box-shadow:4px 4px 10px #0003}.card.pair{border:4px solid gold;box-shadow:0 0 15px gold}@keyframes deal-in{0%{opacity:0;transform:translateY(30px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}.card.deal-animation{animation:deal-in .4s ease-out forwards;opacity:0}@keyframes card-taken{0%{transform:translateY(0);opacity:1}to{transform:translateY(-40px);opacity:0}}.card.taken-animation{animation:card-taken .5s ease-in forwards}
