/* Texas Hold'em dedicated styling improvements */
.game-container { max-width: 980px; margin: 30px auto; background: linear-gradient(135deg,#0f2027 0%,#203a43 55%,#2c5364 100%); border:2px solid #2e7d32; border-radius:20px; padding:24px 28px 32px; box-shadow:0 0 40px #000a,0 4px 28px #2e7d3244; }
.header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding:10px 16px; background:rgba(0,0,0,0.35); border-radius:14px; box-shadow:0 2px 10px #0006; }
.back-btn { position:absolute; top:18px; left:18px; background:#1b2a33; color:#fff; text-decoration:none; padding:10px 18px; border-radius:8px; font-size:.65em; box-shadow:0 2px 8px #0008; transition:background .2s; }
.back-btn:hover { background:#254453; }
.poker-table { background: radial-gradient(circle at 50% 35%, #146314 0%, #0d4f0d 60%, #073607 100%); border-radius:28px; padding:28px 30px 34px; border:3px solid #2e7d32; position:relative; min-height:420px; overflow:hidden; }
.community-cards h3 { margin:0 0 8px; font-size:.9em; letter-spacing:1px; color:#ffd700; text-shadow:0 2px 6px #000; }
.cards { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; }
.card { width:70px; height:98px; background:linear-gradient(160deg,#ffffff 0%,#f1f1f1 60%,#e4e4e4 100%); border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:Arial, sans-serif; font-weight:700; font-size:18px; color:#111; box-shadow:0 4px 10px rgba(0,0,0,0.45); position:relative; transform:translateY(0); transition:transform .25s, box-shadow .25s; }
.card.red { color:#d40000; }
.card.hidden { background:#3a3a3a; color:#eee; box-shadow:0 2px 6px #000; }
.card.best { outline:3px solid #ffd700; box-shadow:0 0 14px #ffd700aa,0 4px 12px #000; }
.card:hover { transform:translateY(-6px); box-shadow:0 6px 16px rgba(0,0,0,0.55); }
.player-area { display:flex; justify-content:space-around; gap:14px; flex-wrap:wrap; margin:18px 0 8px; }
.player-hand { flex:1 1 240px; background:rgba(0,0,0,0.35); border:2px solid #2e7d32; border-radius:16px; padding:14px 12px 18px; box-shadow:0 2px 10px #0008; position:relative; }
.player-hand h4 { margin:0 0 10px; font-size:.85em; font-weight:400; letter-spacing:1px; color:#ffd700; }
.hand-strength { background:rgba(255,215,0,0.1); border:1px solid #ffd70055; padding:6px 8px; border-radius:10px; font-size:.7em; margin-top:10px; letter-spacing:.5px; }
.pot-info { text-align:center; background:rgba(0,0,0,0.45); border-radius:16px; padding:14px 10px 16px; margin:14px auto 10px; max-width:380px; border:2px solid #2e7d32; box-shadow:0 2px 10px #0008; }
.pot-amount { font-size:1.05em; color:#ffd700; text-shadow:0 2px 4px #000; margin-bottom:4px; }
#currentPhase { font-size:.75em; letter-spacing:1px; opacity:.9; }
.poker-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:24px 0 10px; }
.game-btn, .poker-btn { padding:12px 26px; font-size:.7em; background:linear-gradient(120deg,#2e7d32 0%, #0d4f0d 90%); color:#fff; border:none; border-radius:10px; cursor:pointer; letter-spacing:1px; box-shadow:0 3px 10px #0006; position:relative; overflow:hidden; transition:background .25s, transform .15s, box-shadow .25s; }
.game-btn:hover, .poker-btn:hover { background:linear-gradient(120deg,#3fa542 0%, #146314 95%); transform:translateY(-3px); box-shadow:0 6px 18px #0009; }
.game-btn:disabled, .poker-btn:disabled { background:#4a4a4a; cursor:not-allowed; box-shadow:0 2px 4px #0005; }
.poker-btn.fold { background:linear-gradient(140deg,#c62828 0%,#7f1d1d 90%); }
.poker-btn.fold:hover:not(:disabled){ background:linear-gradient(140deg,#e53935 0%,#a12323 90%); }
.status-display { text-align:center; font-size:.75em; margin:12px 0 4px; padding:14px 18px; background:rgba(0,0,0,0.55); border-radius:14px; min-height:42px; border:1px solid #2e7d32; box-shadow:0 2px 10px #0008; }

/* Phase progress bar */
.phase-progress { display:flex; justify-content:space-between; gap:4px; margin:10px 0 4px; }
.phase-progress .step { flex:1; height:6px; background:#1f3a40; border-radius:4px; position:relative; overflow:hidden; }
.phase-progress .step.active { background:#2e7d32; box-shadow:0 0 6px #2e7d32aa; }
.phase-progress .step::after { content:attr(data-label); position:absolute; top:8px; left:50%; transform:translateX(-50%); font-size:.55em; letter-spacing:1px; color:#fff; opacity:.55; }
.phase-progress .step.active::after { opacity:1; color:#ffd700; }

/* Animations */
@keyframes dealIn { 0% { transform:scale(.5) rotate(-8deg); opacity:0; } 60% { opacity:1; } 100% { transform:scale(1) rotate(0deg); opacity:1; } }
.card { animation:dealIn .35s ease; }

/* Responsive */
@media (max-width:840px){ .game-container { padding:20px 14px 26px; } .card { width:58px; height:84px; font-size:15px; } .player-area { flex-direction:column; } }
@media (max-width:560px){ .card { width:50px; height:74px; font-size:14px; } .game-btn,.poker-btn { padding:10px 18px; font-size:.65em; } .player-hand { flex:1 1 auto; } .poker-table { padding:18px 16px 24px; } }
@media (max-width:400px){ .card { width:44px; height:66px; font-size:13px; } .status-display { font-size:.65em; } }