/* game.css — Clab web game v4
   Fixes: card size, transparent zones, split, bust score, chip design */

/* ── Container ─────────────────────────────────── */
#game-container {
  max-width: 420px; margin: 0 auto;
  background: #000; border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.7);
  display: none;
}
#game-container.active { display: block; }

/* Start overlay */
#game-start-overlay {
  max-width: 420px; margin: 0 auto; height: 260px;
  border: 1px solid rgba(255,255,255,0.06); border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: url('../assets/table_1.png') center 30% / cover; position: relative;
}
#game-start-overlay::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.5); }
#game-start-overlay > * { position:relative; z-index:1; }
.start-label { font-size:10px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.3); }
.start-balance { display:flex; align-items:center; gap:6px; font-size:15px; font-weight:700; color:#FFD700; font-family:'DM Mono',monospace; }
.start-balance img { width:20px; height:20px; }
.btn-start-game { padding:13px 44px; border-radius:100px; font-size:15px; font-weight:700; background:white; color:black; border:none; cursor:pointer; transition:transform 0.2s; }
.btn-start-game:hover { transform:translateY(-2px); }

/* ── Top bar — TRANSPARENT so table shows through ─ */
.game-top-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background: transparent;
  position: relative; z-index: 5;
}
.game-balance { display:flex; align-items:center; gap:4px; padding:2px 10px; background:rgba(0,0,0,0.5); border-radius:18px; border:1px solid rgba(255,215,0,0.25); }
.game-balance-value { font-size:13px; font-weight:700; color:#FFD700; font-family:'DM Mono',monospace; }
.game-balance img { width:18px; height:18px; }
.game-phase-label { font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.45); font-family:'DM Mono',monospace; }
.game-island-label { font-size:11px; color:rgba(255,255,255,0.4); font-weight:500; }

/* ── Table — full bleed image ──────────────────── */
.game-table {
  position: relative;
  min-height: 400px;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 16px;
  background: url('../assets/table_1.png') center / cover;
  margin-top: -50px; /* bleed behind top bar */
  padding-top: 58px; /* compensate */
}
.game-table::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0.15),rgba(0,0,0,0.35)); pointer-events:none; }
.game-table > * { position:relative; z-index:1; }

.dealer-zone, .player-zone-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; }
.zone-label { font-size:9px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.2); }
.game-middle { flex:1; display:flex; align-items:center; justify-content:center; position:relative; min-height:16px; }

/* ── Dealer cards — HStack(spacing: 8) ─────────── */
#dealer-cards { display:flex; align-items:center; gap:8px; justify-content:center; min-height:73px; }

/* ── Player hands ──────────────────────────────── */
#player-hands { display:flex; align-items:flex-end; gap:12px; justify-content:center; min-height:110px; }
.player-hand { display:flex; flex-direction:column; align-items:center; gap:5px; }
.player-hand.split { padding:6px 8px; border-radius:10px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); }
.player-hand.active-hand { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.2); }

/* Card ZStack — bottom-anchored, overflow visible for upward fan */
.card-zstack {
  position: relative;
  width: 52px; height: 73px;
  overflow: visible;
}

/* ── Cards — 52x73 (scaled from iOS 60x84) ─────── */
.card {
  width: 52px; height: 73px;
  border-radius: 7px; font-weight: 700;
  position: relative; overflow: hidden; flex-shrink: 0;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.45);
}
.card.face-up { background: #fff; }
.card.face-down { background: #1C1C2E; border: 1px solid rgba(255,255,255,0.1); }
.card.face-down::before { content:''; position:absolute; inset:3px; border:1px solid rgba(255,255,255,0.1); border-radius:4px; }
.card.face-down::after { content:''; position:absolute; inset:0; background:url('../assets/clab_diamond.png') center/30% no-repeat; opacity:0.12; }

.c-tl { position:absolute; top:3px; left:4px; display:flex; flex-direction:column; align-items:center; line-height:1; }
.c-br { position:absolute; bottom:3px; right:4px; display:flex; flex-direction:column; align-items:center; line-height:1; transform:rotate(180deg); }
.c-r { font-size:12px; font-weight:800; color:#1a1a1a; }
.c-s { font-size:9px; color:#1a1a1a; margin-top:-1px; }
.c-ctr { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px; color:#1a1a1a; opacity:0.1; pointer-events:none; }
.card.red .c-r, .card.red .c-s, .card.red .c-ctr { color:#C0392B; }

.card-deal-in { animation: dealIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes dealIn { from { opacity:0; transform:scale(0.4) translateY(-14px); } to { opacity:1; transform:none; } }
.card-flip { animation: flip 0.45s ease-in-out both; }
@keyframes flip { 0%{transform:rotateY(0)} 50%{transform:rotateY(90deg)} 100%{transform:rotateY(0)} }

/* ── Score / result badges ─────────────────────── */
.score-badge { padding:2px 7px; background:rgba(0,0,0,0.65); border-radius:8px; font-size:10px; font-weight:700; color:white; font-family:'DM Mono',monospace; min-width:24px; text-align:center; white-space:nowrap; }
.score-badge:empty { display:none; }
.score-badge.bust { color:#E03030; }
.score-badge.soft { color:#A8D8EA; }
.score-badge.highlight { color:#FFD700; border:1px solid rgba(255,215,0,0.3); }

.result-badge { font-size:10px; font-weight:900; padding:2px 8px; border-radius:8px; background:rgba(0,0,0,0.7); animation:badgePop 0.3s ease both; }
.result-badge.bj { color:#FFD700; } .result-badge.win { color:#22C55E; } .result-badge.push { color:#FFD700; } .result-badge.lose,.result-badge.bust { color:#E03030; }
@keyframes badgePop { from{transform:scale(0.6);opacity:0} to{transform:scale(1);opacity:1} }

.hand-chip { display:flex; align-items:center; justify-content:center; min-height:38px; }
.mini-chip { position:relative; display:flex; align-items:center; justify-content:center; }
.mc-label { position:absolute; font-size:8px; font-weight:800; color:white; text-shadow:0 1px 2px rgba(0,0,0,0.5); font-family:'DM Mono',monospace; pointer-events:none; }
.hand-label { font-size:8px; font-weight:600; color:rgba(255,255,255,0.25); letter-spacing:1px; text-transform:uppercase; }

#sidebet-toast { position:absolute; bottom:0; left:50%; transform:translateX(-50%); font-size:9px; font-weight:700; color:#FFD700; padding:3px 8px; background:rgba(0,0,0,0.8); border-radius:6px; border:1px solid rgba(255,215,0,0.3); white-space:nowrap; opacity:0; transition:opacity 0.3s; pointer-events:none; z-index:10; }
#sidebet-toast.show { opacity:1; }
.cards-placeholder { min-height:73px; display:flex; align-items:center; justify-content:center; font-size:14px; color:rgba(255,255,255,0.06); }

/* ── Controls — TRANSPARENT background ─────────── */
.game-controls {
  padding: 12px 14px 16px;
  background: transparent;
  position: relative; z-index: 5;
}

/* Max bet flash */
#max-bet-flash { display:none; align-items:center; gap:5px; justify-content:center; padding:5px 12px; margin-bottom:6px; background:rgba(255,165,0,0.12); border-radius:12px; border:1px solid rgba(255,165,0,0.3); }
#max-bet-flash.show { display:flex; animation:flashIn 0.15s ease; }
.flash-icon { font-size:10px; color:orange; } .flash-text { font-size:11px; font-weight:600; color:orange; }
@keyframes flashIn { from{transform:scale(0.85);opacity:0} }

/* ── Bet info ──────────────────────────────────── */
#bet-info { display:none; flex-direction:column; align-items:center; gap:3px; margin-bottom:6px; }
#bet-type-indicator { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:600; color:rgba(255,255,255,0.5); }
.bet-dot { width:5px; height:5px; border-radius:50%; } .bet-dot.main { background:white; } .bet-dot.side { background:rgba(255,255,255,0.3); }
#bet-amounts { display:flex; align-items:center; gap:10px; }
.bet-amt { font-size:10px; font-weight:600; display:flex; align-items:center; gap:3px; } .bet-amt.main { color:rgba(255,255,255,0.6); } .bet-amt.side { color:rgba(255,255,255,0.35); } .bet-amt img { vertical-align:middle; }

/* ── Bet zone ──────────────────────────────────── */
#bet-zone { display:flex; flex-direction:column; gap:8px; align-items:center; }
#chips-row { display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; width:100%; padding:4px 4px; scrollbar-width:none; flex-wrap:nowrap; }
#chips-row::-webkit-scrollbar { display:none; }

/* Chip — exact from ChipButton.swift */
.chip {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; min-width:52px;
  border-radius:50%; padding:0; flex-shrink:0;
  cursor:pointer; border:none; background:none;
  transition:transform 0.1s; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.chip:hover { transform:scale(1.08); }
.chip:active { transform:scale(0.88); }
.chip svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.chip-label { position:relative; z-index:1; font-size:11px; font-weight:800; color:white; font-family:'DM Mono',monospace; pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,0.4); }

.bet-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center; }
.btn-clear { padding:7px 14px; border-radius:21px; font-size:12px; font-weight:600; border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.45); background:none; display:none; cursor:pointer; }
.btn-clear:hover { border-color:rgba(255,255,255,0.25); color:white; }
.btn-undo { width:38px; height:38px; border-radius:19px; display:none; align-items:center; justify-content:center; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.4); font-size:13px; cursor:pointer; }
.btn-undo:hover { border-color:rgba(255,255,255,0.25); color:white; }
.btn-rebet { padding:7px 12px; border-radius:21px; font-size:11px; font-weight:600; border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.06); display:none; align-items:center; gap:4px; cursor:pointer; }
.btn-rebet:hover { border-color:rgba(255,255,255,0.25); color:white; }
.btn-sb-toggle { padding:7px 12px; border-radius:21px; font-size:11px; font-weight:600; display:inline-flex; align-items:center; gap:4px; color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); cursor:pointer; }
.btn-sb-toggle:hover { border-color:rgba(255,255,255,0.3); }
.btn-sb-toggle.active { color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.08); }
.btn-deal { padding:0 24px; height:38px; border-radius:19px; font-size:14px; font-weight:700; background:white; color:black; border:none; cursor:pointer; flex:1; max-width:140px; }
.btn-deal:hover:not(.disabled) { box-shadow:0 0 20px rgba(255,255,255,0.12); transform:translateY(-1px); }
.btn-deal.disabled { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.35); cursor:not-allowed; border:1px solid rgba(255,255,255,0.06); }

/* ── Side bets panel ───────────────────────────── */
#sidebets-panel { display:none; gap:6px; width:100%; }
.sb-slot { flex:1; padding:7px 3px; border-radius:8px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; transition:all 0.15s; text-align:center; }
.sb-slot:hover { border-color:rgba(255,255,255,0.18); }
.sb-slot.active { background:rgba(255,255,255,0.85); border-color:transparent; }
.sb-slot.active .sb-name { color:black; } .sb-slot.active .sb-tap { color:rgba(0,0,0,0.5); } .sb-slot.active .sb-amt { color:rgba(0,0,0,0.7); }
.sb-slot.has-bet { border-color:rgba(255,255,255,0.25); }
.sb-name { font-size:9px; font-weight:700; color:rgba(255,255,255,0.6); }
.sb-amt { font-size:8px; font-weight:600; color:rgba(255,255,255,0.7); display:flex; align-items:center; gap:2px; } .sb-amt img { vertical-align:middle; }
.sb-tap { font-size:8px; color:rgba(255,255,255,0.25); }

/* ── Action zone — GameActionZone.swift ─────────── */
#action-zone { display:none; flex-direction:column; gap:8px; padding:0 4px; }
.action-row { display:flex; gap:10px; }
.btn-action { flex:1; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; }
.btn-action.primary { height:48px; font-size:15px; background:white; color:black; border-radius:24px; }
.btn-action.primary.disabled { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.2); cursor:not-allowed; border:1px solid rgba(255,255,255,0.05); }
.btn-action.secondary { height:40px; font-size:12px; border-radius:11px; background:rgba(255,255,255,0.1); color:white; border:1px solid rgba(255,255,255,0.25); }
.btn-action.secondary.disabled { background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.05); cursor:not-allowed; }
.btn-action:hover:not(.disabled) { transform:translateY(-1px); }

/* ── Insurance ─────────────────────────────────── */
#insurance-zone { display:none; flex-direction:column; gap:10px; align-items:center; text-align:center; }
.ins-subtitle { font-size:12px; font-weight:600; color:rgba(255,255,255,0.45); }
.ins-title { font-size:16px; font-weight:900; color:white; }
.ins-cost-line { font-size:10px; color:rgba(255,255,255,0.35); display:flex; align-items:center; gap:5px; } .ins-cost-line img { opacity:0.5; }
.insurance-btns { display:flex; gap:10px; width:100%; }
.btn-ins-decline { flex:1; padding:12px; border-radius:22px; font-size:14px; font-weight:600; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.5); cursor:pointer; }
.btn-ins-decline:hover { border-color:rgba(255,255,255,0.25); color:white; }
.btn-ins-accept { flex:1; padding:12px; border-radius:22px; font-size:14px; font-weight:700; background:#FFD700; color:black; border:none; display:flex; align-items:center; justify-content:center; gap:5px; cursor:pointer; }
.btn-ins-accept:hover { filter:brightness(1.1); }
.ins-cost-badge { font-size:12px; font-weight:600; color:rgba(0,0,0,0.55); display:flex; align-items:center; gap:2px; } .ins-cost-badge img { filter:brightness(0) opacity(0.5); }

/* ── Dealing ───────────────────────────────────── */
#dealing-zone { display:none; justify-content:center; align-items:center; min-height:48px; }
.dealing-dots { display:flex; gap:5px; }
.dealing-dots span { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.25); animation:pulse 1.2s ease infinite; }
.dealing-dots span:nth-child(2) { animation-delay:0.2s; } .dealing-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes pulse { 0%,80%,100%{opacity:.25;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }

/* ── Result ────────────────────────────────────── */
#result-zone { display:none; flex-direction:column; gap:0; animation:slideUp 0.5s ease both; }
@keyframes slideUp { from{opacity:0;transform:translateY(10px)} to{opacity:1} }
.result-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.06); margin-bottom:8px; }
.result-title { font-size:16px; font-weight:900; }
#result-net { font-size:16px; font-weight:900; font-family:'DM Mono',monospace; display:flex; align-items:center; gap:3px; }
#result-rows { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; width:100%; }
.result-row { display:flex; align-items:center; justify-content:space-between; }
.result-row-label { font-size:10px; font-weight:600; color:rgba(255,255,255,0.35); }
.result-row-value { font-size:10px; font-weight:700; display:flex; align-items:center; gap:2px; font-family:'DM Mono',monospace; }
.btn-newround { width:100%; padding:12px; border-radius:22px; font-size:14px; font-weight:700; background:white; color:black; border:none; cursor:pointer; }
.btn-newround:hover { box-shadow:0 0 30px rgba(255,255,255,0.15); transform:translateY(-1px); }
#broke-zone { display:none; flex-direction:column; gap:8px; width:100%; }
.btn-broke-refill { width:100%; padding:12px; border-radius:22px; font-size:13px; font-weight:700; background:#FFD700; color:black; display:flex; align-items:center; justify-content:center; gap:6px; border:none; cursor:pointer; } .btn-broke-refill img { width:14px; height:14px; }

/* ── Mobile ────────────────────────────────────── */
@media (max-width:480px) {
  #game-container,#game-start-overlay { max-width:100%; border-radius:16px; }
  .chip { width:46px; height:46px; min-width:46px; } .chip-label { font-size:10px; }
  .game-table { min-height:350px; }
  .btn-action.primary { height:42px; font-size:14px; }
  .btn-action.secondary { height:36px; font-size:11px; }
}