/* style.css - Phiên bản nâng cấp */
body { font-family: 'Segoe UI', sans-serif; background: #1b1b1b; color: white; overflow: hidden; margin: 0; }
.container { width: 100vw; height: 100vh; position: relative; }

/* Màn hình Login/Lobby (Giữ nguyên style cơ bản) */
.box { background: rgba(0,0,0,0.8); padding: 30px; border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; text-align: center; border: 1px solid #444; }
input, select, button { width: 100%; margin: 10px 0; padding: 12px; border-radius: 5px; border: none; box-sizing: border-box; }
button { background: #ff9800; color: white; font-weight: bold; cursor: pointer; }
button:hover { background: #e68900; }

/* --- BÀN CHƠI TIẾN LÊN --- */
#game-area { width: 100%; height: 100%; background: radial-gradient(circle, #2e7d32 0%, #1b5e20 100%); position: relative; }

/* 1. Khu vực giữa bàn (Bài đã đánh) */
.table-center {
    position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);
    width: 200px; height: 140px; 
    border: 2px dashed rgba(255,255,255,0.2); border-radius: 10px;
    display: flex; justify-content: center; align-items: center;
}

/* 2. Vị trí Người chơi (Avatar + Info) */
.player-seat { position: absolute; width: 100px; text-align: center; transition: all 0.3s; }
.avatar { 
    width: 60px; height: 60px; background: #444; border-radius: 50%; margin: 0 auto; 
    border: 3px solid #ccc; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 20px;
    position: relative;
}
.player-info { background: rgba(0,0,0,0.6); padding: 2px 5px; border-radius: 5px; font-size: 12px; margin-top: 5px; display: inline-block;}
.card-count-badge { 
    position: absolute; top: -5px; right: -5px; background: red; color: white; 
    width: 20px; height: 20px; border-radius: 50%; font-size: 12px; line-height: 20px;
}

/* Hiệu ứng tới lượt (Turn Active) */
.active-turn .avatar { border-color: #ffeb3b; box-shadow: 0 0 15px #ffeb3b; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 235, 59, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 235, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 235, 59, 0); } }

/* Định vị 4 chỗ ngồi */
/* Tôi (Luôn ở dưới) */
.seat-me { bottom: 20px; left: 50%; transform: translateX(-50%); }
/* Phải */
.seat-right { top: 50%; right: 20px; transform: translateY(-50%); }
/* Trên (Đối diện) */
.seat-top { top: 20px; left: 50%; transform: translateX(-50%); }
/* Trái */
.seat-left { top: 50%; left: 20px; transform: translateY(-50%); }

/* 3. Lá bài */
.card { 
    width: 70px; height: 100px; background: white; border-radius: 6px; 
    position: absolute; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); 
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    font-weight: bold; font-size: 20px; user-select: none;
    transition: transform 0.2s, top 0.2s;
}
.card.red { color: #d32f2f; }
.card.black { color: #212121; }
.card small { font-size: 14px; }

/* Bài trên tay tôi */
.my-hand { 
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); 
    width: 600px; height: 120px; pointer-events: none; /* Để click xuyên qua vùng trống */
}
.my-hand .card { pointer-events: auto; cursor: pointer; bottom: 0; transition: 0.3s; }
.my-hand .card:hover { transform: translateY(-20px) !important; z-index: 10; }
.my-hand .card.selected { transform: translateY(-30px); border: 2px solid gold; }

/* Bài lưng (Của đối thủ) */
.card-back { 
    background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
    border: 2px solid white;
}

/* Các nút hành động (Đánh/Bỏ lượt) */
.action-bar { position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%); display: none; gap: 10px; z-index: 50;}
.btn-play { background: #4caf50; padding: 10px 30px; }
.btn-pass { background: #f44336; padding: 10px 20px; }