:root{
  --felt-dark:#0b3d24;
  --felt:#0f5132;
  --felt-light:#146c40;
  --gold:#d4af37;
  --red:#c0392b;
  --cream:#f5efe0;
  --panel:#0d2b1c;
  --text:#f2ede0;
  --muted:#9fb8ac;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI', Roboto, Arial, sans-serif;
  background:radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 75%);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 12px 60px;
}
h1{
  margin:6px 0 2px;
  font-size:1.6rem;
  letter-spacing:1px;
  color:var(--gold);
  text-shadow:0 2px 4px rgba(0,0,0,.5);
}
.subtitle{
  color:var(--muted);
  font-size:.85rem;
  margin-bottom:18px;
  text-align:center;
}

/* ---------- Layout / table (game page) ---------- */
.layout{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  width:100%;
  max-width:980px;
  justify-content:center;
}
.table-wrap{flex:1 1 560px; min-width:320px;}
.table{
  background:linear-gradient(180deg, var(--felt-light), var(--felt) 60%, var(--felt-dark));
  border:10px solid #3b2314;
  border-radius:20px;
  padding:24px 18px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.4);
  min-height:380px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.zone{text-align:center;}
.zone-label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--muted);
  margin-bottom:8px;
}
.hands-row{
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}
.hand-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:6px 10px;
  border-radius:10px;
  transition:box-shadow .2s ease;
}
.hand-block.active-hand{
  box-shadow:0 0 0 2px var(--gold);
}
.hand{
  display:flex;
  justify-content:center;
  gap:8px;
  min-height:96px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.total{margin-top:8px; font-weight:600; font-size:.95rem; color:var(--cream);}
.hand-status{font-size:.72rem; color:var(--muted); margin-top:2px; min-height:1em;}

.card{
  width:60px;
  height:88px;
  background:var(--cream);
  border-radius:7px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:5px 6px;
  color:#1a1a1a;
  font-weight:700;
  box-shadow:0 3px 6px rgba(0,0,0,.4);
  font-size:1rem;
  line-height:1;
  user-select:none;
  animation:deal .25s ease-out;
}
.card.red{color:var(--red);}
.card .rank-bottom{align-self:flex-end;transform:rotate(180deg);}
.card.back{
  background:repeating-linear-gradient(45deg, #163d2c, #163d2c 6px, #1d4f39 6px, #1d4f39 12px);
  border:2px solid var(--gold);
}
@keyframes deal{
  from{transform:translateY(-16px) scale(.9); opacity:0;}
  to{transform:translateY(0) scale(1); opacity:1;}
}

.status-msg{
  text-align:center;
  font-size:1.1rem;
  font-weight:700;
  min-height:1.6em;
  color:var(--gold);
}

.controls{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px;}
button{
  font-family:inherit;
  font-weight:600;
  font-size:.9rem;
  border:none;
  border-radius:8px;
  padding:10px 18px;
  cursor:pointer;
  transition:transform .08s ease, opacity .15s ease;
  color:#fff;
}
button:active{transform:scale(.96);}
button:disabled{opacity:.35;cursor:not-allowed;}
#dealBtn{background:var(--gold); color:#221a05;}
#hitBtn{background:#2d7d46;}
#standBtn{background:var(--red);}
#doubleBtn{background:#3a5ca8;}
#splitBtn{background:#8a5cd6;}
#newShoeBtn, #logoutBtn{background:#555; font-size:.75rem; padding:8px 12px;}

.bet-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:10px;
  font-size:.85rem;
  flex-wrap:wrap;
}
.bet-row input{
  width:80px;
  padding:6px 8px;
  border-radius:6px;
  border:1px solid #444;
  background:#111;
  color:var(--text);
  font-size:.9rem;
}
.chip{
  background:var(--panel);
  padding:4px 10px;
  border-radius:20px;
  border:1px solid var(--gold);
  color:var(--gold);
  font-weight:700;
}

.side{flex:0 1 320px; min-width:280px; display:flex; flex-direction:column; gap:14px;}
.panel{
  background:var(--panel);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  border:1px solid rgba(212,175,55,.25);
}
.panel h2{
  margin:0 0 10px;
  font-size:.95rem;
  color:var(--gold);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.toggle-link{font-size:.72rem; color:var(--muted); cursor:pointer; text-decoration:underline; font-weight:400;}
.coach-tip{font-size:.95rem; line-height:1.4; min-height:60px;}
.coach-tip .action{font-size:1.3rem; font-weight:800; color:#fff; display:block; margin-bottom:4px;}
.coach-tip .action.HIT{color:#5fd97d;}
.coach-tip .action.STAND{color:#ff8080;}
.coach-tip .action.DOUBLE{color:#7fb2ff;}
.coach-tip .action.SPLIT{color:#c79bff;}
.coach-tip .reason{color:var(--muted); font-size:.82rem;}
.coach-tip.hidden-mode{filter:blur(6px); user-select:none;}

.feedback{margin-top:10px; font-size:.82rem; padding:8px 10px; border-radius:8px; display:none;}
.feedback.match{background:rgba(95,217,125,.15); color:#8ef0a4; display:block;}
.feedback.miss{background:rgba(255,128,128,.15); color:#ffabab; display:block;}

.stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:.85rem;}
.stat-box{background:rgba(255,255,255,.04); border-radius:8px; padding:8px 10px; text-align:center;}
.stat-box .num{font-size:1.2rem; font-weight:700; color:var(--cream); display:block;}
.stat-box .lbl{font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;}

.roadmap{font-size:.78rem; color:var(--muted); line-height:1.5;}
.roadmap b{color:var(--cream);}

.account-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-size:.8rem;
  color:var(--muted);
  margin-bottom:10px;
}

footer{margin-top:24px; font-size:.7rem; color:var(--muted); text-align:center; max-width:600px;}

/* ---------- Auth pages ---------- */
.auth-card{
  background:var(--panel);
  border:1px solid rgba(212,175,55,.25);
  border-radius:16px;
  padding:32px 28px;
  width:100%;
  max-width:360px;
  margin-top:40px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.auth-card h1{text-align:center; width:100%;}
.auth-card .subtitle{margin-bottom:24px;}
.field{margin-bottom:16px;}
.field label{
  display:block;
  font-size:.78rem;
  color:var(--muted);
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.field input{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #3a5142;
  background:#0b1f14;
  color:var(--text);
  font-size:.95rem;
}
.field input:focus{outline:1px solid var(--gold);}
.auth-submit{
  width:100%;
  background:var(--gold);
  color:#221a05;
  padding:12px;
  font-size:1rem;
  margin-top:6px;
}
.auth-error{
  background:rgba(255,128,128,.15);
  color:#ffabab;
  padding:10px 12px;
  border-radius:8px;
  font-size:.85rem;
  margin-bottom:14px;
  display:none;
}
.auth-switch{
  text-align:center;
  margin-top:18px;
  font-size:.85rem;
  color:var(--muted);
}
.auth-switch a{color:var(--gold); text-decoration:none;}
.auth-switch a:hover{text-decoration:underline;}