/* Crown Blackjack — green baize, gold trim. Original CSS art only. */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, Arial, sans-serif; background: #04160f; color: #eafff4; }
.app { max-width: 860px; margin: 0 auto; padding: 10px; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.logo { width: 42px; height: 42px; }
.title-block h1 { margin: 0; font-size: 20px; }
.subtitle { font-size: 12px; color: #9fd8c0; }
.pill { margin-left: auto; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.pill.demo { background: #14532d; color: #bbf7d0; }
.pill.real { background: #7f1d1d; color: #fecaca; }
.balance-block { text-align: right; }
.balance-label { font-size: 11px; color: #9fd8c0; }
.balance { font-size: 18px; font-weight: 800; color: #ffd75e; }
.icon-btn { background: #0b3d2a; color: #eafff4; border: 1px solid #14604a; border-radius: 8px; padding: 7px 10px; cursor: pointer; }

.table { background: radial-gradient(ellipse at 50% 30%, #0d5a38 0%, #07331f 75%); border: 2px solid #7a5b14; border-radius: 16px; padding: 16px 12px; }
.dealer-zone, .player-zone { text-align: center; }
.zone-label { font-size: 13px; color: #9fd8c0; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.total-badge { background: #ffd75e; color: #1a1405; border-radius: 99px; padding: 1px 8px; font-weight: 800; margin-left: 6px; }
.total-badge:empty { display: none; }
.cards { display: flex; gap: 8px; justify-content: center; min-height: 96px; flex-wrap: wrap; }
.card { width: 66px; height: 94px; border-radius: 8px; background: #f8fafc; color: #171717; position: relative; box-shadow: 0 2px 6px #00000088; flex: 0 0 auto; }
.card.red { color: #b91c1c; }
.card .corner { position: absolute; top: 4px; left: 6px; font-weight: 800; font-size: 14px; line-height: 1.1; text-align: center; }
.card .pip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.card.back { background: repeating-linear-gradient(45deg, #7f1d1d 0 8px, #991b1b 8px 16px); border: 3px solid #f8fafc; display: flex; align-items: center; justify-content: center; }
.card.back .back-pattern { color: #ffd75e; font-size: 26px; background: #7f1d1d; border: 2px solid #ffd75e; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }
.hands { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hand-box { padding: 8px; border-radius: 12px; border: 2px solid transparent; }
.hand-box.active { border-color: #ffd75e; background: #ffffff10; }
.hand-box.won { border-color: #22c55e; }
.hand-box.lost { opacity: .75; }
.hand-meta { margin-top: 6px; font-size: 13px; font-weight: 700; text-align: center; }

.insurance { background: #451a03; border: 1px solid #f59e0b; border-radius: 12px; padding: 10px; text-align: center; margin: 12px auto; max-width: 520px; }
.insurance-actions { margin-top: 8px; display: flex; gap: 8px; justify-content: center; }
.result-line { text-align: center; min-height: 24px; font-weight: 800; font-size: 17px; margin: 10px 0 2px; }
.result-line.won { color: #ffd75e; }
.result-line.lost { color: #fca5a5; }

.actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.act { border: 0; border-radius: 10px; padding: 13px 20px; font-size: 16px; font-weight: 800; cursor: pointer; color: #fff; }
.act.hit { background: #1d4ed8; } .act.stand { background: #475569; }
.act.double { background: #b45309; } .act.split { background: #6d28d9; }
.act:disabled { opacity: .4; cursor: default; }

.bet-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px; }
.stake-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.stake-row input { width: 90px; text-align: center; background: #073325; border: 1px solid #14604a; color: #eafff4; border-radius: 8px; padding: 9px; font-size: 16px; font-weight: 700; }
.step-btn { background: #0b3d2a; color: #eafff4; border: 1px solid #14604a; border-radius: 8px; width: 38px; height: 38px; font-size: 18px; cursor: pointer; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.chips button { background: #0b3d2a; color: #ffd75e; border: 1px solid #c9a227; border-radius: 99px; padding: 6px 13px; font-weight: 700; cursor: pointer; }
.deal { background: #c9a227; color: #1a1405; border: 0; border-radius: 10px; padding: 13px 34px; font-size: 17px; font-weight: 800; cursor: pointer; }
.deal:disabled { opacity: .5; }
.small-btn { background: #c9a227; border: 0; color: #1a1405; border-radius: 8px; padding: 7px 12px; cursor: pointer; font-weight: 700; }
.small-btn.ghost { background: transparent; color: #eafff4; border: 1px solid #14604a; }
.msg-line { color: #fca5a5; min-height: 18px; font-size: 13px; text-align: center; margin-top: 6px; }
.shoe-info { text-align: center; font-size: 12px; color: #9fd8c0; margin-top: 8px; word-break: break-all; }
.shoe-info code { color: #ffd75e; }

.howto { color: #9fd8c0; font-size: 13px; }
.panel { background: #0b3d2a; border: 1px solid #14604a; border-radius: 12px; padding: 12px; margin-top: 12px; }
.panel h2 { margin: 0 0 8px; font-size: 16px; }
.history .hist { padding: 3px 0; border-bottom: 1px dashed #14604a; font-size: 13px; }
.hist.won { color: #ffd75e; }
.fair-row { margin: 6px 0; font-size: 13px; }
.fair-row input { background: #073325; border: 1px solid #14604a; color: #eafff4; border-radius: 6px; padding: 5px; width: 90px; }
.verify-result { font-size: 13px; margin-top: 6px; }
.hidden { display: none !important; }
@media (max-width: 480px) { .card { width: 54px; height: 78px; } .cards { min-height: 80px; } }