body { font-family: sans-serif; background: #2c3e50; color: white; display: flex; justify-content: center; height: 100vh; overflow: hidden; }
.game-board { position: relative; width: 100%; max-width: 800px; height: 100%; }
.player { position: absolute; text-align: center; }
#ai-left { top: 30%; left: 20px; }
#ai-right { top: 30%; right: 20px; }
#my-area { bottom: 20px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.hand { display: flex; justify-content: center; margin-bottom: 10px; height: 120px; }
.card { 
    background: white; color: black; border-radius: 5px; width: 40px; height: 60px; 
    margin: 0 2px; line-height: 60px; font-weight: bold; cursor: pointer; border: 1px solid #999;
    user-select: none;
}
.card.selected { transform: translateY(-20px); background: #f1c40f; }
.table-area { position: absolute; top: 40%; width: 100%; text-align: center; min-height: 60px; }
.controls button { padding: 10px 20px; margin: 5px; cursor: pointer; }
.played-card { display: inline-block; background: #ddd; color: #333; padding: 5px 10px; margin: 2px; border-radius: 4px; }