html, body { height: 100%; overflow: hidden; }

body { background: #060e0b; font-family: 'Cormorant Garamond', serif; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; }

body::before { content: ''; position: fixed; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(201,168,76,0.03) 0px, rgba(201,168,76,0.03) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(-45deg, rgba(201,168,76,0.03) 0px, rgba(201,168,76,0.03) 1px, transparent 1px, transparent 40px); pointer-events: none; }

/* ── Main layout: fills full viewport ── */ .table { width: 100%; max-width: 520px; height: 100dvh; background: radial-gradient(ellipse 100% 140% at 50% 30%, var(--felt-light) 0%, var(--felt) 55%, #082b20 100%); display: flex; flex-direction: column; padding: env(safe-area-inset-top, 12px) 16px env(safe-area-inset-bottom, 12px); box-shadow: 0 0 0 4px #0a1a12, 0 0 0 7px var(--gold), 0 0 0 10px #0a1a12; position: relative; overflow: hidden; }

/* ── Header ── */ .header { text-align: center; padding: 6px 0 4px; flex-shrink: 0; } .table-logo { color: rgba(201,168,76,0.3); font-family: 'Playfair Display', serif; font-size: 10px; letter-spacing: 6px; text-transform: uppercase; } h1 { font-family: 'Playfair Display', serif; color: var(--gold); font-size: clamp(22px, 6vw, 36px); font-weight: 900; letter-spacing: 10px; text-transform: uppercase; text-shadow: 0 0 20px rgba(201,168,76,0.4); line-height: 1.1; }

/* ── Stats bar ── */ .stats-bar { display: flex; justify-content: space-between; gap: 6px; padding: 8px 0 6px; flex-shrink: 0; } .stat-box { flex: 1; background: rgba(0,0,0,0.4); border: 1px solid rgba(201,168,76,0.2); border-radius: 8px; padding: 5px 4px; text-align: center; } .stat-label { color: rgba(201,168,76,0.5); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; display: block; } .stat-value { color: var(--gold-light); font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; }

/* ── Divider ── */ .divider { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 2px 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.35; } .divider span { color: var(--gold); font-size: 9px; opacity: 0.5; letter-spacing: 3px; }

/* ── Card areas ── */ .hand-section { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }

.area-label { font-family: 'Playfair Display', serif; color: rgba(201,168,76,0.4); font-size: 10px; letter-spacing: 4px; text-transform: uppercase; text-align: center; margin-bottom: 4px; flex-shrink: 0; }

.card-zone { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px; min-height: calc(var(--card-h) + 8px); }

.score-display { text-align: center; margin: 3px 0; flex-shrink: 0; } .score-badge { display: inline-block; background: rgba(0,0,0,0.45); border: 1px solid rgba(201,168,76,0.3); border-radius: 16px; padding: 3px 14px; color: var(--gold-light); font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; letter-spacing: 2px; min-width: 50px; }

/* ── Cards ── */ .card { width: var(--card-w); height: var(--card-h); border-radius: 7px; display: flex; flex-direction: column; justify-content: space-between; padding: 5px; font-family: 'Playfair Display', serif; font-weight: 700; position: relative; animation: cardDeal 0.3s cubic-bezier(0.23,1,0.32,1); flex-shrink: 0; } @keyframes cardDeal { from { opacity: 0; transform: translateY(-30px) rotate(-6deg) scale(0.85); } to { opacity: 1; transform: none; } } .card-front { background: linear-gradient(135deg, #fffdf5, #f5e6c0); color: #c0392b; box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.4); } .card-front.black { color: #1a1a1a; } .card-back { background: repeating-linear-gradient(45deg, #8b0000 0px, #8b0000 4px, #a00000 4px, #a00000 8px); box-shadow: 0 3px 10px rgba(0,0,0,0.5); border: 3px solid #fdf6e3; overflow: hidden; } .card-back::after { content: '♠'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; color: rgba(255,255,255,0.12); } .card-corner { line-height: 1; } .card-corner.br { align-self: flex-end; transform: rotate(180deg); } .card-rank { font-size: 14px; font-weight: 900; } .card-suit { font-size: 11px; line-height: 1; } .card-center-suit { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 24px; opacity: 0.12; }

/* ── Message ── */ #message { text-align: center; min-height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 2px 0; } .msg-text { font-family: 'Playfair Display', serif; font-size: clamp(15px, 4vw, 22px); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; animation: msgPop 0.35s cubic-bezier(0.23,1,0.32,1); } @keyframes msgPop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } .msg-win { color: var(--gold-light); text-shadow: 0 0 16px rgba(201,168,76,0.6); } .msg-lose { color: #e74c3c; } .msg-push { color: #aaa; } .msg-info { color: rgba(201,168,76,0.65); } .msg-bj { color: var(--gold-light); text-shadow: 0 0 24px rgba(201,168,76,0.9); animation: msgPop 0.35s, bjGlow 1.4s ease-in-out infinite alternate; } @keyframes bjGlow { from { text-shadow: 0 0 16px rgba(201,168,76,0.7); } to { text-shadow: 0 0 36px rgba(201,168,76,1), 0 0 64px rgba(201,168,76,0.4); } }

/* ── Bottom controls ── */ .controls { flex-shrink: 0; padding-top: 4px; }

/* Chips */ .bet-row { display: flex; justify-content: center; gap: 12px; padding: 6px 0; } .chip { width: 56px; height: 56px; border-radius: 50%; border: 3px dashed rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 13px; cursor: pointer; user-select: none; touch-action: manipulation; transition: transform 0.12s, opacity 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.18); } .chip:active:not([disabled]) { transform: scale(0.9); } .chip[disabled] { opacity: 0.3; pointer-events: none; } .chip-10 { background: radial-gradient(circle, #e74c3c, #c0392b); color: #fff; } .chip-50 { background: radial-gradient(circle, #3498db, #2980b9); color: #fff; } .chip-100 { background: radial-gradient(circle, #2ecc71, #27ae60); color: #fff; } .chip-500 { background: radial-gradient(circle, #9b59b6, #8e44ad); color: #fff; }

/* Action buttons */ .btn-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 6px 0 4px; } .btn-row-top { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 0 6px; }

.btn { font-family: 'Playfair Display', serif; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 14px 8px; border: none; border-radius: 6px; cursor: pointer; touch-action: manipulation; transition: transform 0.1s, opacity 0.2s; width: 100%; } .btn:active:not([disabled]) { transform: scale(0.95); } .btn[disabled] { opacity: 0.28; pointer-events: none; }

.btn-deal { background: linear-gradient(135deg, var(--gold), #a07830); color: #1a0e00; box-shadow: 0 4px 14px rgba(201,168,76,0.35); } .btn-clear { background: rgba(231,76,60,0.15); color: #e74c3c; border: 1px solid rgba(231,76,60,0.3); } .btn-action { background: rgba(255,255,255,0.07); color: var(--gold-pale); border: 1px solid rgba(201,168,76,0.3); }

/* ── Particles ── */ .particle { position: fixed; pointer-events: none; border-radius: 50%; animation: particleFly 0.9s ease-out forwards; z-index: 999; } @keyframes particleFly { from { transform: translate(0,0) scale(1); opacity: 1; } to { transform: translate(var(--tx),var(--ty)) scale(0); opacity: 0; } }

/* ── Large screens: center & constrain ── */ @media (min-width: 520px) { .table { border-radius: 32px; height: min(900px, 100dvh); margin: auto; } body { justify-content: center; } :root { --card-w: 76px; --card-h: 108px; } .chip { width: 60px; height: 60px; } .btn { font-size: 14px; padding: 15px 8px; } }

<!-- Deal / Clear -->
<div class="btn-row-top">
  <button class="btn btn-deal"  id="btn-deal"  onclick="deal()">Deal</button>
  <button class="btn btn-clear" id="btn-clear" onclick="clearBet()">Clear</button>
</div>

<!-- Hit / Stand / Double -->
<div class="btn-row">
  <button class="btn btn-action" id="btn-hit"    onclick="hit()"         disabled>Hit</button>
  <button class="btn btn-action" id="btn-stand"  onclick="stand()"       disabled>Stand</button>
  <button class="btn btn-action" id="btn-double" onclick="doubleDown()"  disabled>Double</button>
</div>