/* ============================================================
   Clubhouse Sessions — styles.css
   ============================================================ */

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

:root {
    --felt:        #0a3d1f;
    --felt-light:  #0f5a2e;
    --felt-dark:   #062515;
    --gold:        #f5d67a;
    --gold-dim:    rgba(245,214,122,0.3);
    --gold-faint:  rgba(245,214,122,0.08);
    --white:       #ffffff;
    --card-red:    #cc2200;
    --card-dark:   #111111;
    --win-green:   #6dff8a;
    --loss-red:    #ff6d6d;
    --push-gray:   #aaaaaa;
    --text-muted:  rgba(255,255,255,0.45);
    --text-dim:    rgba(255,255,255,0.2);
    --border-faint:rgba(255,255,255,0.08);
    --border-gold: rgba(245,214,122,0.35);
    --overlay-bg:  rgba(0,0,0,0.35);
    --radius:      8px;
    --radius-lg:   12px;
}

html, body {
    height: 100%;
    background: #04120a;
}

body {
    font-family: Georgia, 'Times New Roman', serif;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 12px;
}

/* ── App shell ──────────────────────────────────────────── */
#app {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: radial-gradient(ellipse at 50% 40%, var(--felt-light) 0%, var(--felt) 50%, var(--felt-dark) 100%);
    border-radius: 16px;
    border: 2px solid #1a6b35;
    overflow: hidden;
    min-height: 640px;
    position: relative;
}

/* Felt texture */
#app::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3h1v1H1V3zm2-2h1v1H3V1z' fill='%23ffffff' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

#app > * { position: relative; z-index: 1; }

/* ── Header ─────────────────────────────────────────────── */
#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-faint);
}

.logo-title {
    font-size: 17px;
    font-weight: bold;
    color: var(--gold);
    letter-spacing: 2px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.logo-sub {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 4px;
    margin-top: 1px;
    font-family: Arial, sans-serif;
}

.header-btns { display: flex; gap: 8px; }

.btn-ghost {
    background: var(--gold-faint);
    border: 1px solid var(--border-gold);
    color: var(--gold);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 10px;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: background 0.15s;
}
.btn-ghost:hover { background: rgba(245,214,122,0.18); }

/* ── Stats panel ─────────────────────────────────────────── */
#stats-panel {
    position: absolute;
    top: 44px; right: 0;
    z-index: 100;
    background: #0a2f15;
    border: 1px solid var(--border-gold);
    border-radius: 0 0 0 var(--radius-lg);
    padding: 14px 16px;
    min-width: 210px;
    display: none;
}
#stats-panel.open { display: block; }

.stats-title {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 3px;
    font-family: Arial, sans-serif;
    margin-bottom: 10px;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-faint);
    font-size: 12px;
}
.stats-row:last-child { border-bottom: none; }
.stats-label { color: var(--text-muted); font-family: Arial, sans-serif; }
.stats-val   { font-weight: bold; }
.stats-val.positive { color: var(--win-green); }
.stats-val.negative { color: var(--loss-red); }

/* ── Dealer zone ─────────────────────────────────────────── */
#dealer-zone {
    padding: 12px 16px 8px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--border-faint);
    min-height: 148px;
}

.zone-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.portrait {
    flex-shrink: 0;
    text-align: center;
}

.portrait-img {
    width: 54px;
    height: 54px;
    border-radius: var(--radius);
    border: 2px solid var(--border-gold);
    background: #1a3a28;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    overflow: hidden;
}

.portrait-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portrait-label {
    color: var(--text-muted);
    font-size: 8px;
    margin-top: 3px;
    letter-spacing: 1px;
    font-family: Arial, sans-serif;
}

.hand-total-badge {
    margin-top: 4px;
    padding: 2px 6px;
    background: rgba(0,0,0,0.45);
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    color: var(--gold);
    border: 1px solid var(--gold-dim);
    display: inline-block;
}
.hand-total-badge.bust  { color: var(--loss-red); border-color: rgba(255,109,109,0.4); }
.hand-total-badge.bj    { color: var(--gold); }
.hand-total-badge.empty { color: var(--text-dim); border-color: var(--border-faint); }

/* ── Cards area ──────────────────────────────────────────── */
.cards-area {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
    min-height: 72px;
    padding-top: 4px;
}

.cards-empty {
    color: var(--text-dim);
    font-size: 11px;
    font-family: Arial, sans-serif;
    align-self: center;
}

/* ── Playing card ─────────────────────────────────────────── */
.card {
    width: 44px;
    height: 60px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    user-select: none;
}

.card.small {
    width: 38px;
    height: 52px;
}

.card-corner {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
}

.card-center {
    font-size: 16px;
    line-height: 1;
}

.card.small .card-corner { font-size: 9px; }
.card.small .card-center { font-size: 13px; }

.card.red .card-corner,
.card.red .card-center { color: var(--card-red); }
.card.black .card-corner,
.card.black .card-center { color: var(--card-dark); }

.card.hidden {
    background: linear-gradient(135deg, #1a4a8a 25%, #0f2d5a 75%);
    border-color: rgba(255,255,255,0.2);
    cursor: default;
}
.card.hidden::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 2px solid rgba(255,255,255,0.18);
    border-radius: 3px;
    background: repeating-linear-gradient(
        45deg, transparent, transparent 3px,
        rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.04) 6px
    );
}

/* ── Message banner ──────────────────────────────────────── */
#message-banner {
    text-align: center;
    margin-top: 8px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    font-family: Arial, sans-serif;
    display: none;
    border: 1px solid transparent;
}
#message-banner.show { display: block; }
#message-banner.win  { background: rgba(109,255,138,0.12); border-color: rgba(109,255,138,0.3); color: var(--win-green); }
#message-banner.loss { background: rgba(255,109,109,0.12); border-color: rgba(255,109,109,0.3); color: var(--loss-red); }
#message-banner.push { background: rgba(255,255,255,0.06); border-color: var(--border-faint);   color: var(--push-gray); }
#message-banner.bj   { background: rgba(245,214,122,0.15); border-color: var(--border-gold);    color: var(--gold); }
#message-banner.info { background: rgba(255,255,255,0.06); border-color: var(--border-faint);   color: #fff; }

/* ── Result chips ────────────────────────────────────────── */
#result-chips {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 5px 16px;
    flex-wrap: wrap;
    min-height: 0;
}

.result-chip {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: Arial, sans-serif;
    border: 1px solid var(--border-faint);
}
.result-chip.win  { background: rgba(109,255,138,0.12); color: var(--win-green); }
.result-chip.loss { background: rgba(255,109,109,0.12); color: var(--loss-red); }
.result-chip.push { background: rgba(255,255,255,0.07); color: var(--push-gray); }

/* ── Player zone ─────────────────────────────────────────── */
#player-zone {
    flex: 1;
    padding: 8px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Player hands ────────────────────────────────────────── */
#player-hands {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.player-hand-box {
    flex: 1;
    min-width: 150px;
    border: 1px solid var(--border-faint);
    border-radius: var(--radius);
    padding: 6px 8px;
    background: rgba(0,0,0,0.15);
    transition: border-color 0.2s, background 0.2s;
}
.player-hand-box.active {
    border-color: rgba(245,214,122,0.55);
    background: var(--gold-faint);
}

.hand-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.hand-box-label {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 1px;
    font-family: Arial, sans-serif;
}

/* ── Player info bar ─────────────────────────────────────── */
#player-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.25);
    border-radius: var(--radius);
    padding: 8px 10px;
}

.player-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    border: 2px solid var(--border-gold);
    flex-shrink: 0;
    overflow: hidden;
    background: #1a3a28;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.player-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}

.player-info { flex: 1; }
.player-name {
    color: var(--gold);
    font-size: 13px;
    font-weight: bold;
}
.player-bankroll-label {
    color: var(--text-muted);
    font-size: 9px;
    letter-spacing: 1px;
    font-family: Arial, sans-serif;
}

.player-bankroll-right { text-align: right; }
.bankroll-amount {
    color: var(--win-green);
    font-size: 20px;
    font-weight: bold;
}
.streak-badge {
    font-size: 10px;
    font-family: Arial, sans-serif;
    margin-top: 1px;
}
.streak-badge.win  { color: var(--win-green); }
.streak-badge.loss { color: var(--loss-red); }

/* ── Action buttons ──────────────────────────────────────── */
#action-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.action-btn {
    padding: 12px 8px;
    background: rgba(0,0,0,0.3);
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: background 0.12s, transform 0.08s;
}
.action-btn:hover   { background: rgba(255,255,255,0.08); }
.action-btn:active  { transform: scale(0.97); }
.action-btn:disabled{ opacity: 0.35; cursor: not-allowed; transform: none; }

.action-btn.hit    { border: 2px solid var(--gold);    color: var(--gold); }
.action-btn.stand  { border: 2px solid #aaaaff;         color: #aaaaff; }
.action-btn.double { border: 2px solid var(--win-green);color: var(--win-green); }
.action-btn.split  { border: 2px solid #ff9d6d;         color: #ff9d6d; }
.action-btn.ins-yes{ border: 2px solid var(--win-green);color: var(--win-green); }
.action-btn.ins-no { border: 2px solid var(--loss-red); color: var(--loss-red); }

/* ── Betting area ────────────────────────────────────────── */
#betting-area { display: flex; flex-direction: column; gap: 8px; }

.bet-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,0.3);
    border-radius: var(--radius);
    padding: 8px 12px;
    border: 1px solid var(--gold-dim);
}
.bet-display-label {
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 1px;
    font-family: Arial, sans-serif;
}
.bet-display-right { display: flex; align-items: center; gap: 8px; }
.bet-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 10px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    padding: 2px 4px;
}
.bet-clear:hover { color: #fff; }
.bet-amount {
    color: var(--gold);
    font-size: 20px;
    font-weight: bold;
}

.chip-row { display: flex; gap: 6px; }

.chip-btn {
    flex: 1;
    padding: 10px 4px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.08s;
    font-family: Georgia, serif;
}
.chip-btn:active { transform: scale(0.96); }
.chip-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.chip-btn.chip-gold {
    background: radial-gradient(circle at 30% 30%, #2a5e38, #0f3d20);
    border: 2px solid var(--gold);
    color: var(--gold);
    box-shadow: inset 0 0 0 3px rgba(245,214,122,0.1);
}
.chip-btn.chip-custom {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    font-family: Arial, sans-serif;
}

.custom-bet-row {
    display: flex;
    gap: 6px;
    display: none;
}
.custom-bet-row.show { display: flex; }

.custom-input {
    flex: 1;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--gold-dim);
    border-radius: 6px;
    padding: 7px 10px;
    color: #fff;
    font-size: 13px;
    font-family: Georgia, serif;
    outline: none;
}
.custom-input:focus { border-color: var(--gold); }
.custom-input::placeholder { color: var(--text-dim); }

.custom-set-btn {
    background: rgba(245,214,122,0.12);
    border: 1px solid var(--border-gold);
    color: var(--gold);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 12px;
    cursor: pointer;
    font-family: Arial, sans-serif;
}

/* ── Side bets ────────────────────────────────────────────── */
#side-bets-wrap {
    border: 1px solid var(--border-faint);
    border-radius: var(--radius);
    overflow: hidden;
}

.side-bets-toggle {
    width: 100%;
    background: rgba(0,0,0,0.2);
    border: none;
    padding: 7px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 1px;
    font-family: Arial, sans-serif;
}
.side-bets-toggle:hover { background: rgba(0,0,0,0.3); }

#side-bets-body {
    padding: 8px 12px;
    display: none;
    flex-direction: column;
    gap: 7px;
}
#side-bets-body.open { display: flex; }

.side-bet-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.side-bet-row input[type="checkbox"] { accent-color: var(--gold); width: 14px; height: 14px; cursor: pointer; }
.side-bet-info { flex: 1; }
.side-bet-name { color: rgba(255,255,255,0.7); font-size: 11px; font-family: Arial, sans-serif; }
.side-bet-payout { color: var(--text-dim); font-size: 9px; font-family: Arial, sans-serif; }

.side-bet-select {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--gold);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    cursor: pointer;
}

/* ── Deal / Next hand button ─────────────────────────────── */
.deal-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 3px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    transition: opacity 0.15s, box-shadow 0.15s;
}
.deal-btn.active {
    background: linear-gradient(135deg, #c49010, var(--gold), #c49010);
    color: #0a2f15;
    box-shadow: 0 2px 14px rgba(245,214,122,0.28);
}
.deal-btn.active:hover { opacity: 0.92; }
.deal-btn.inactive {
    background: rgba(255,255,255,0.04);
    color: var(--text-dim);
    cursor: not-allowed;
}

.next-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #c49010, var(--gold), #c49010);
    border: none;
    border-radius: 10px;
    color: #0a2f15;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 3px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 14px rgba(245,214,122,0.25);
    transition: opacity 0.15s;
}
.next-btn:hover { opacity: 0.9; }

/* ── Loading overlay ─────────────────────────────────────── */
#loading {
    position: absolute;
    inset: 0;
    background: rgba(6,37,21,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    border-radius: 14px;
    display: none;
}
#loading.show { display: flex; }
.spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--border-gold);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Error toast ─────────────────────────────────────────── */
#toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: #3a0f0f;
    border: 1px solid rgba(255,109,109,0.4);
    color: var(--loss-red);
    padding: 8px 18px;
    border-radius: var(--radius);
    font-size: 12px;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
    transition: transform 0.3s;
    z-index: 300;
    white-space: nowrap;
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 400px) {
    body { padding: 6px; }
    #app { border-radius: 10px; min-height: 580px; }
    .card { width: 38px; height: 52px; }
    .card-center { font-size: 13px; }
    .card-corner { font-size: 9px; }
    .bankroll-amount { font-size: 17px; }
    .chip-btn { font-size: 12px; }
}