*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: radial-gradient(ellipse at 50% 0%, #1b5e2e 0%, #0a1f0e 100%);
  min-height: 100vh;
  color: #f0f0f0;
}

/* ===== LOBBY ===== */
.lobby-container {
  max-width: 680px;
  margin: 50px auto;
  background: rgba(0,0,0,.65);
  border: 2px solid #2e7d32;
  border-radius: 18px;
  padding: 40px 45px;
  box-shadow: 0 0 50px rgba(0,180,0,.15);
}
.lobby-container h1 {
  text-align: center;
  font-size: 2.6rem;
  color: #ffd700;
  text-shadow: 0 0 25px rgba(255,215,0,.45);
  margin-bottom: 32px;
  letter-spacing: 2px;
}
.form-group { margin-bottom: 24px; }
.form-group label { display: block; color: #bbb; margin-bottom: 7px; font-size: .95rem; }
.form-group input[type="text"] {
  width: 100%;
  padding: 13px 16px;
  background: rgba(255,255,255,.09);
  border: 1px solid #388e3c;
  border-radius: 9px;
  color: #fff;
  font-size: 1.1rem;
  outline: none;
  transition: border-color .2s;
}
.form-group input[type="text"]:focus { border-color: #ffd700; }

.deck-selector { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.deck-option input[type="radio"] { display: none; }
.deck-preview {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 18px;
  border-radius: 12px;
  border: 2px solid #2e6a31;
  cursor: pointer;
  background: rgba(255,255,255,.04);
  transition: all .2s;
  min-width: 100px;
}
.deck-option input:checked + .deck-preview {
  border-color: #ffd700;
  background: rgba(255,215,0,.10);
  box-shadow: 0 0 18px rgba(255,215,0,.3);
}
.deck-preview img  { height: 85px; object-fit: contain; }
.deck-preview span { margin-top: 7px; font-size: .82rem; color: #bbb; text-transform: capitalize; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 9px;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
  margin: 5px;
}
.btn-primary  { background: linear-gradient(135deg,#2e7d32,#43a047); color:#fff; }
.btn-primary:hover  { background: linear-gradient(135deg,#388e3c,#66bb6a); transform:translateY(-2px); box-shadow:0 4px 15px rgba(0,180,0,.3); }
.btn-secondary{ background:#424242; color:#eee; }
.btn-secondary:hover{ background:#616161; transform:translateY(-2px); }
.btn-success  { background: linear-gradient(135deg,#1565c0,#1e88e5); color:#fff; }
.btn-success:hover { background: linear-gradient(135deg,#1976d2,#42a5f5); transform:translateY(-2px); }
.btn-large { font-size: 1.15rem; padding: 15px 40px; }

/* ===== GAME ===== */
.game-container { max-width: 920px; margin: 18px auto; padding: 0 15px 30px; }

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,0,.55);
  border-radius: 14px;
  padding: 14px 24px;
  margin-bottom: 18px;
  border: 1px solid #2e7d32;
}
.player-info, .bank-info { display:flex; flex-direction:column; gap:3px; }
.bank-info { text-align:right; }
.player-name { font-size:1.15rem; color:#ffd700; font-weight:700; }
.bank-label  { font-size:.95rem; color:#ef9a9a; font-weight:700; }
.money       { font-size:1.25rem; color:#a5d6a7; font-weight:700; }
.bank-money  { color:#ef9a9a; }
.round-badge { font-size:.82rem; color:#888; }
.title-center { font-size:1.5rem; color:#ffd700; font-weight:900; letter-spacing:3px; text-shadow:0 0 15px rgba(255,215,0,.4); }

.message-box {
  text-align:center;
  padding:13px 20px;
  border-radius:11px;
  font-size:1.15rem;
  font-weight:700;
  margin-bottom:16px;
  border:1px solid #555;
  background:rgba(255,255,255,.07);
}
.message-box.win  { background:rgba(0,160,0,.2);   border-color:#388e3c; color:#a5d6a7; }
.message-box.lose { background:rgba(180,0,0,.2);   border-color:#c62828; color:#ef9a9a; }
.message-box.info { background:rgba(21,101,192,.2); border-color:#1565c0; color:#90caf9; }

.hand-area {
  background: rgba(0,0,0,.4);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border: 1px solid #1b5e20;
}
.hand-area.player { border-color:#1565c0; }
.hand-label {
  font-size:.9rem; color:#999; margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.total-badge {
  background:rgba(255,215,0,.15);
  border:1px solid #ffd700;
  color:#ffd700;
  border-radius:20px;
  padding:2px 12px;
  font-size:.85rem;
  font-weight:700;
}
.total-badge.bust    { background:rgba(180,0,0,.25);  border-color:#c62828; color:#ef9a9a; }
.total-badge.perfect { background:rgba(0,160,0,.25);  border-color:#2e7d32; color:#a5d6a7; }

.cards { display:flex; flex-wrap:wrap; gap:10px; min-height:105px; align-items:flex-end; }
.card-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; }
.card-img {
  height: 105px;
  border-radius: 6px;
  box-shadow: 2px 4px 12px rgba(0,0,0,.7);
  transition: transform .18s;
  cursor: default;
}
.card-img:hover { transform:translateY(-6px); }
.card-img.face-down { filter:brightness(.7) saturate(.5); }
.card-img.matta-card { box-shadow:0 0 18px rgba(255,215,0,.6); }
.card-name { font-size:.68rem; color:#999; text-align:center; max-width:75px; }
.card-name.matta { color:#ffd700; font-weight:700; }

.matta-notice {
  background:rgba(255,200,0,.12);
  border:1px solid #ffd700;
  border-radius:9px;
  padding:9px 16px;
  margin-bottom:14px;
  font-size:.9rem;
  color:#ffd700;
}

/* ===== ACTION AREA ===== */
.action-area {
  background: rgba(0,0,0,.5);
  border-radius: 14px;
  padding: 24px;
  border: 1px solid #2e7d32;
  text-align: center;
}
.bet-label { font-size:.95rem; color:#bbb; margin-bottom:12px; }

.bet-slider-wrap { margin-bottom: 18px; }
.bet-amount-display {
  font-size: 2.4rem;
  font-weight: 900;
  color: #ffd700;
  margin-bottom: 8px;
}
.dollar-sign { font-size:1.8rem; color:#a5d6a7; margin-left:4px; }

.bet-slider {
  width: 75%;
  max-width: 380px;
  height: 9px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right,#2e7d32,#ffd700);
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}
.bet-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #ffd700;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255,215,0,.6);
  border: 2px solid #fff;
}
.slider-labels {
  display:flex;
  justify-content:space-between;
  width:75%;
  max-width:380px;
  margin:4px auto 0;
  font-size:.78rem;
  color:#777;
}
.dollar-area { min-height:38px; margin-top:10px; font-size:.0rem; }
.dollar-coin {
  display:inline-block;
  width:28px; height:28px;
  line-height:26px;
  border-radius:50%;
  background: radial-gradient(circle,#ffd700,#c8a800);
  color:#7a5c00;
  font-size:.85rem;
  font-weight:900;
  text-align:center;
  margin:2px;
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}

.action-buttons { display:flex; justify-content:center; gap:14px; margin-top:10px; flex-wrap:wrap; }

/* ===== GAME OVER ===== */
.game-over-box {
  text-align:center;
  border-radius:18px;
  padding:40px 30px;
  border:2px solid #ffd700;
  box-shadow:0 0 40px rgba(255,215,0,.25);
  background:rgba(0,0,0,.7);
}
.game-over-box.sbancato { border-color:#ffd700; box-shadow:0 0 50px rgba(255,215,0,.4); }
.game-over-box.gameover { border-color:#c62828; box-shadow:0 0 40px rgba(200,0,0,.2); }
.game-over-box h2 { font-size:2.6rem; color:#ffd700; margin-bottom:22px; }
.go-stats { display:flex; justify-content:center; gap:25px; flex-wrap:wrap; margin-bottom:25px; }
.go-stat  { display:flex; flex-direction:column; align-items:center; gap:4px; }
.go-stat span   { font-size:.82rem; color:#999; text-transform:uppercase; letter-spacing:1px; }
.go-stat strong { font-size:1.6rem; color:#ffd700; font-weight:900; }
.game-over-buttons { margin-top:10px; }

/* ===== SCOREBOARD ===== */
.scoreboard-container { max-width:1050px; margin:35px auto; padding:0 20px 40px; }
.scoreboard-container h1 {
  text-align:center; font-size:2.3rem; color:#ffd700;
  text-shadow:0 0 20px rgba(255,215,0,.4);
  margin-bottom:30px;
}
.score-tables { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media(max-width:660px){ .score-tables{grid-template-columns:1fr;} }
.score-section h2 {
  font-size:1.1rem; color:#ccc; margin-bottom:14px;
  border-bottom:1px solid #2e7d32; padding-bottom:8px;
}
.score-table { width:100%; border-collapse:collapse; background:rgba(0,0,0,.4); border-radius:12px; overflow:hidden; }
.score-table th { background:rgba(0,80,0,.5); padding:10px 12px; text-align:left; font-size:.8rem; color:#999; letter-spacing:.5px; }
.score-table td { padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.05); font-size:.88rem; }
.rank-gold   td { background:rgba(255,215,0,.08); }
.rank-silver td { background:rgba(192,192,192,.07); }
.rank-bronze td { background:rgba(205,127,50,.07); }
.empty-msg { color:#666; font-style:italic; margin:12px 0; }

/* ===== TABLE LIST ===== */
.table-list { width:100%; border-collapse:collapse; margin-top:15px; }
.table-list th,.table-list td { padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; }
.table-list th { color:#999; font-size:.85rem; }

.error {
  background:rgba(180,0,0,.25); border:1px solid #c62828;
  border-radius:9px; padding:14px; color:#ef9a9a; margin-top:15px;
}

/* ── TAB BAR ── */
.tab-bar { display:flex; gap:0; margin-bottom:24px; border-radius:10px; overflow:hidden; border:1px solid #2e7d32; }
.tab-btn { flex:1; padding:12px; background:rgba(0,0,0,.3); color:#aaa;
           border:none; cursor:pointer; font-size:.95rem; font-weight:600; transition:all .2s; }
.tab-btn.active { background:#2e7d32; color:#fff; }
.tab-btn:hover:not(.active) { background:rgba(46,125,50,.3); color:#ddd; }

/* ── TABLE CARDS (join list) ── */
.table-cards { display:flex; flex-direction:column; gap:12px; }
.table-card  { background:rgba(255,255,255,.05); border:1px solid #2e6a31;
               border-radius:12px; padding:14px 18px; }
.tc-name     { font-size:1.1rem; font-weight:700; color:#ffd700; margin-bottom:8px; }
.tc-info     { display:flex; flex-wrap:wrap; gap:10px; font-size:.82rem; color:#aaa; margin-bottom:4px; }
.tc-info span b { color:#ccc; }

/* ── TAB BAR ── */
.tab-bar{display:flex;gap:0;margin-bottom:24px;border-radius:10px;overflow:hidden;border:1px solid #2e7d32}
.tab-btn{flex:1;padding:12px;background:rgba(0,0,0,.3);color:#aaa;
         border:none;cursor:pointer;font-size:.95rem;font-weight:600;transition:all .2s}
.tab-btn.active{background:#2e7d32;color:#fff}
.tab-btn:hover:not(.active){background:rgba(46,125,50,.3);color:#ddd}

/* ── TABLE CARDS ── */
.table-cards{display:flex;flex-direction:column;gap:12px}
.table-card{background:rgba(255,255,255,.05);border:1px solid #2e6a31;border-radius:12px;padding:14px 18px}
.tc-name{font-size:1.1rem;font-weight:700;color:#ffd700;margin-bottom:8px}
.tc-info{display:flex;flex-wrap:wrap;gap:10px;font-size:.82rem;color:#aaa;margin-bottom:4px}
.tc-info span b{color:#ccc}

.btn-danger{background:rgba(180,0,0,.3);color:#ff9999;border:1px solid #c62828;border-radius:8px;padding:8px 14px;cursor:pointer;font-size:.85rem;font-weight:700;transition:all .2s}
.btn-danger:hover{background:rgba(220,0,0,.5)}


.footer-bar{
  display:flex;justify-content:space-between;align-items:center;
  max-width:680px;margin:18px auto 6px;
  background:rgba(0,0,0,.45);border:1px solid #2e4a2e;
  border-radius:12px;padding:10px 20px;gap:12px;
}
.footer-link{
  display:flex;align-items:center;gap:5px;
  font-size:.82rem;text-decoration:none;border-radius:8px;
  padding:5px 12px;transition:background .2s;
}
.footer-link-cancel{color:#ff9999;border:1px solid #c62828;background:rgba(180,0,0,.15);}
.footer-link-cancel:hover{background:rgba(180,0,0,.35);}
.footer-link-home{color:#90caf9;border:1px solid #1565c0;background:rgba(21,101,192,.15);}
.footer-link-home:hover{background:rgba(21,101,192,.35);}