/* ============================================================
   Royal Blackjack Casino – main.css
   ============================================================ */

:root {
  --felt: #1a5c2a;
  --felt-light: #1e6b30;
  --felt-dark: #12401d;
  --gold: #c9a227;
  --gold-light: #e8c84a;
  --gold-dark: #9a7a1a;
  --cream: #f5f0e8;
  --card-red: #c0392b;
  --card-back-top: #1a237e;
  --card-back-bot: #283593;
  --chip-5: #e74c3c;
  --chip-10: #3498db;
  --chip-25: #2ecc71;
  --chip-50: #9b59b6;
  --chip-100: #e67e22;
  --text-gold: #f0d060;
  --shadow: rgba(0, 0, 0, 0.5);
  --anim-speed: 1;        /* multiplicador global – JS lo modifica */
  --card-w: 72px;
  --card-h: 102px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: 'Inter', sans-serif;
  background: radial-gradient(ellipse at center, #0d2b10 0%, #060f07 100%);
  min-height: 100vh;
  color: var(--cream);
  overflow-x: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Layout ────────────────────────────────────────────────── */
#app {
  max-width: 920px;
  margin: 0 auto;
  padding: 12px 12px 24px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  gap: 10px;
}

/* ── Header ─────────────────────────────────────────────────── */
.header {
  text-align: center;
  padding: 10px 0 4px;
}
.header h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(24px, 5vw, 42px);
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(201,162,39,.65), 2px 2px 4px rgba(0,0,0,.85);
  letter-spacing: 5px;
}
.header .subtitle {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--gold-dark);
  letter-spacing: 4px;
  margin-top: 3px;
}

/* ── Quick-stats bar ─────────────────────────────────────────── */
.stats-bar {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: rgba(240,208,96,.65);
}
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.stat-item .val { font-size: 15px; font-weight: 700; color: var(--gold); }

/* ── Mesa ────────────────────────────────────────────────────── */
.table-area {
  position: relative;
  background: radial-gradient(ellipse at center, var(--felt-light) 0%, var(--felt) 55%, var(--felt-dark) 100%);
  border-radius: 28px;
  border: 6px solid var(--gold-dark);
  box-shadow:
    0 0 50px rgba(0,0,0,.85),
    inset 0 0 70px rgba(0,0,0,.35),
    0 0 0 2px rgba(201,162,39,.25);
  padding: 18px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 440px;
  transition: box-shadow .6s;
}
.table-area::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 22px;
  border: 1px solid rgba(201,162,39,.18);
  pointer-events: none;
}
.table-area.blackjack-glow {
  animation: bjGlow 0.9s ease-in-out 3;
}
@keyframes bjGlow {
  0%,100% { box-shadow: 0 0 50px rgba(0,0,0,.85), inset 0 0 70px rgba(0,0,0,.35); }
  50% { box-shadow: 0 0 80px rgba(240,208,96,.45), 0 0 140px rgba(201,162,39,.25), inset 0 0 70px rgba(0,0,0,.35); }
}

/* Deck stack (decorativo) */
.deck-area {
  position: absolute;
  top: 18px;
  right: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 1;
}
.deck-stack { width: 44px; height: 60px; position: relative; }
.deck-card {
  position: absolute;
  width: 38px;
  height: 54px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--card-back-top), var(--card-back-bot));
  border: 1px solid #3949ab;
  box-shadow: 1px 1px 3px rgba(0,0,0,.5);
}
.deck-card:nth-child(1){ top:4px; left:4px; }
.deck-card:nth-child(2){ top:2px; left:2px; }
.deck-card:nth-child(3){ top:0; left:0; }
.deck-label { font-family:'Cinzel',serif; font-size:8px; color:rgba(240,208,96,.4); letter-spacing:1px; }

/* ── Zone labels & scores ───────────────────────────────────── */
.dealer-zone, .player-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 130px;
}
.zone-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: rgba(240,208,96,.55);
  letter-spacing: 3px;
}
.hand-score {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(201,162,39,.5);
  min-width: 44px;
  text-align: center;
  transition: color .3s;
}
.hand-score.bust { color: #e74c3c; }
.hand-score.blackjack { animation: pulseGold 1s infinite; }
@keyframes pulseGold {
  0%,100% { text-shadow: 0 0 10px rgba(201,162,39,.5); }
  50% { text-shadow: 0 0 28px rgba(240,208,96,1), 0 0 56px rgba(201,162,39,.8); }
}

/* ── Cards row ───────────────────────────────────────────────── */
.cards-row {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 110px;
  flex-wrap: nowrap;
}

/* ── Card ────────────────────────────────────────────────────── */
.card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 9px;
  margin: 0 -9px;
  flex-shrink: 0;
  transform-style: preserve-3d;
  perspective: 800px;
}
.card-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform calc(0.42s * var(--anim-speed)) cubic-bezier(.4,0,.2,1);
  border-radius: 9px;
}
.card.face-down .card-inner { transform: rotateY(180deg); }

.card-front, .card-back {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-front {
  background: #fff;
  border: 1px solid #d0ccc5;
  display: flex;
  flex-direction: column;
  padding: 4px 5px;
  box-shadow: 2px 4px 10px rgba(0,0,0,.45);
}
.card-back {
  background: linear-gradient(135deg, var(--card-back-top) 0%, var(--card-back-bot) 60%, var(--card-back-top) 100%);
  border: 1px solid #3949ab;
  transform: rotateY(180deg);
  box-shadow: 2px 4px 10px rgba(0,0,0,.45);
  display: flex; align-items:center; justify-content:center;
  overflow: hidden;
}
.card-back-inner {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 5px;
}
.card-back-diamond {
  font-size: 52px;
  color: rgba(255,255,255,.08);
  line-height: 1;
}
.card-corner { display: flex; flex-direction: column; line-height: 1; }
.card-corner.bottom { transform: rotate(180deg); margin-top: auto; }
.card-rank {
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-weight: 700; line-height: 1;
}
.card-suit-sm { font-size: 11px; line-height: 1; }
.card-center { flex:1; display:flex; align-items:center; justify-content:center; }
.card-suit-lg { font-size: 30px; line-height: 1; }
.red  { color: var(--card-red); }
.black{ color: #1a1a1a; }

/* Deal animation */
@keyframes dealCard {
  from { transform: translate(220px, -160px) rotate(18deg) scale(0.45); opacity: 0; }
  to   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
}
.card.dealing { animation: dealCard calc(0.36s * var(--anim-speed)) cubic-bezier(.25,.46,.45,.94) both; }

/* ── Table divider ───────────────────────────────────────────── */
.table-divider {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.div-line { flex:1; height:1px; background: linear-gradient(90deg, transparent, rgba(201,162,39,.3), transparent); }
.div-text { font-family:'Cinzel',serif; font-size:10px; color:rgba(201,162,39,.4); letter-spacing:3px; }

/* ── Bet area ────────────────────────────────────────────────── */
.bet-area {
  display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 56px;
}
.current-bet { font-family:'Cinzel',serif; text-align:center; }
.bet-label { font-size:10px; opacity:.55; letter-spacing:1px; }
.bet-amount { font-size:26px; font-weight:700; color:var(--gold); }

/* ── Message overlay ─────────────────────────────────────────── */
.msg-overlay {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  z-index: 20; border-radius: 24px;
  pointer-events: none; opacity: 0;
  transition: opacity .3s;
}
.msg-overlay.visible { opacity: 1; }
.msg-box {
  font-family: 'Cinzel', serif;
  font-size: clamp(22px, 5vw, 46px);
  font-weight: 900;
  text-align: center;
  padding: 16px 32px;
  border-radius: 14px;
  background: rgba(0,0,0,.62);
  border: 2px solid currentColor;
  backdrop-filter: blur(6px);
  animation: msgPop .4s cubic-bezier(.34,1.56,.64,1) both;
  text-shadow: 0 0 30px currentColor, 2px 2px 4px rgba(0,0,0,.8);
}
@keyframes msgPop {
  from { transform: scale(.5) rotate(-5deg); opacity:0; }
  to   { transform: scale(1) rotate(0); opacity:1; }
}
.msg-win       { color: #f0d060; }
.msg-blackjack { color: #f0d060; }
.msg-lose      { color: #e74c3c; }
.msg-bust      { color: #e74c3c; }
.msg-push      { color: #3498db; }

/* ── Insurance prompt ────────────────────────────────────────── */
.insurance-prompt {
  display: none;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  background: rgba(10,30,12,.96);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 20px 28px;
  text-align: center;
  font-family: 'Cinzel', serif;
  min-width: 240px;
}
.insurance-prompt.visible { display: block; }
.insurance-prompt h3 { color: var(--gold); margin-bottom: 8px; font-size: 17px; }
.insurance-prompt p  { font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 14px; line-height: 1.5; }
.ins-btns { display:flex; gap:10px; justify-content:center; }

/* ── Split hands ─────────────────────────────────────────────── */
.split-container { display:flex; gap:16px; justify-content:center; width:100%; }
.split-hand {
  flex:1; max-width:280px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding: 8px;
  border-radius: 12px;
  border: 1px dashed rgba(201,162,39,.28);
  transition: border-color .3s;
}
.split-hand.active-hand { border-color: rgba(240,208,96,.85); }

/* ── Bottom: Balance & Shoe ──────────────────────────────────── */
.info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  background: rgba(0,0,0,.32);
  border-radius: 12px;
  border: 1px solid rgba(201,162,39,.18);
  flex-wrap: wrap;
  gap: 10px;
}
.balance-info { font-family:'Cinzel',serif; display:flex; flex-direction:column; }
.balance-label  { font-size:10px; color:rgba(240,208,96,.5); letter-spacing:1px; }
.balance-amount { font-size:22px; font-weight:700; color:var(--gold); }

/* Shoe */
.shoe-group { display:flex; align-items:center; gap:7px; }
.shoe-label { font-family:'Cinzel',serif; font-size:9px; color:rgba(240,208,96,.45); letter-spacing:1px; }
.shoe-track { width:90px; height:5px; background:rgba(0,0,0,.4); border-radius:3px; overflow:hidden; }
.shoe-fill  { height:100%; background:linear-gradient(90deg,#2ecc71,#27ae60); border-radius:3px; transition:width .5s; }

/* Speed */
.speed-group { display:flex; align-items:center; gap:6px; }
.speed-label { font-family:'Cinzel',serif; font-size:9px; color:rgba(240,208,96,.5); }
.speed-btn {
  font-family:'Cinzel',serif; font-size:9px; padding:4px 9px;
  background:transparent; border:1px solid rgba(201,162,39,.28);
  color:rgba(240,208,96,.55); border-radius:4px; cursor:pointer;
  transition:all .2s; letter-spacing:.5px;
}
.speed-btn.active, .speed-btn:hover { background:rgba(201,162,39,.18); border-color:var(--gold); color:var(--gold); }

/* ── Chips ────────────────────────────────────────────────────── */
.chips-row {
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
}
.chip {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700;
  cursor: pointer;
  border: 3px dashed rgba(255,255,255,.5);
  transition: transform .15s, box-shadow .15s;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.2);
  flex-shrink: 0;
}
.chip:hover  { transform: translateY(-4px) scale(1.12); box-shadow: 0 7px 14px rgba(0,0,0,.5); }
.chip:active { transform: translateY(0) scale(.97); }
.chip.disabled { opacity:.35; pointer-events:none; }
.chip-5   { background: radial-gradient(circle, #e74c3c, #c0392b); color:#fff; }
.chip-10  { background: radial-gradient(circle, #3498db, #2980b9); color:#fff; }
.chip-25  { background: radial-gradient(circle, #2ecc71, #27ae60); color:#1a3a1a; }
.chip-50  { background: radial-gradient(circle, #9b59b6, #8e44ad); color:#fff; }
.chip-100 { background: radial-gradient(circle, #e67e22, #d35400); color:#fff; }

/* ── Buttons ──────────────────────────────────────────────────── */
.controls { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.btn {
  font-family: 'Cinzel', serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 1px; padding: 11px 20px;
  border-radius: 7px; border: 2px solid;
  cursor: pointer; transition: all .2s;
  text-transform: uppercase; white-space: nowrap;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.45); }
.btn:active:not(:disabled){ transform: translateY(0); }
.btn:disabled { opacity: .33; cursor: not-allowed; transform: none !important; }

.btn-deal  { background:linear-gradient(135deg,#c9a227,#9a7a1a); color:#1a1a1a; border-color:#e8c84a; box-shadow:0 2px 10px rgba(201,162,39,.4); }
.btn-deal:hover:not(:disabled){ background:linear-gradient(135deg,#e8c84a,#c9a227); }
.btn-hit   { background:linear-gradient(135deg,#27ae60,#1e8449); color:#fff; border-color:#2ecc71; }
.btn-stand { background:linear-gradient(135deg,#c0392b,#922b21); color:#fff; border-color:#e74c3c; }
.btn-double{ background:linear-gradient(135deg,#2980b9,#1a5276); color:#fff; border-color:#3498db; }
.btn-split { background:linear-gradient(135deg,#8e44ad,#6c3483); color:#fff; border-color:#9b59b6; }
.btn-clear { background:transparent; color:rgba(240,208,96,.6); border-color:rgba(240,208,96,.3); font-size:10px; padding:7px 13px; }
.btn-clear:hover:not(:disabled){ border-color:rgba(240,208,96,.7); color:var(--gold); }

/* ── Settings row ────────────────────────────────────────────── */
.settings-row { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.btn-sm {
  font-family:'Cinzel',serif; font-size:9px; padding:6px 11px;
  border-radius:5px; border:1px solid rgba(201,162,39,.28);
  background:transparent; color:rgba(240,208,96,.6);
  cursor:pointer; transition:all .2s; letter-spacing:.8px;
}
.btn-sm:hover { color:var(--gold); border-color:var(--gold); background:rgba(201,162,39,.08); }

/* ── Stats & History panels ──────────────────────────────────── */
.collapse-panel {
  display: none;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(201,162,39,.2);
  border-radius: 12px;
  padding: 14px;
}
.collapse-panel.open { display: block; }

.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stat-box { text-align:center; }
.stat-box .val { font-family:'Cinzel',serif; font-size:20px; color:var(--gold); font-weight:700; }
.stat-box .lbl { font-family:'Cinzel',serif; font-size:9px; color:rgba(240,208,96,.5); letter-spacing:1px; margin-top:3px; }

.history-panel { max-height:130px; overflow-y:auto; }
.history-item {
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:rgba(255,255,255,.7);
  font-family:'Cinzel',serif;
}
.r-win  { color:#2ecc71; }
.r-lose { color:#e74c3c; }
.r-push { color:#3498db; }

/* ── Music bar ───────────────────────────────────────────────── */
.music-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(0,0,0,.35);
  border-radius: 10px;
  border: 1px solid rgba(201,162,39,.18);
  flex-wrap: wrap;
}
.music-bar.visible { display: flex; }
.music-info { font-family:'Cinzel',serif; font-size:10px; color:rgba(240,208,96,.7); flex:1; min-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-btns { display:flex; gap:6px; align-items:center; }
.music-btn {
  background:transparent; border:1px solid rgba(201,162,39,.3);
  color:rgba(240,208,96,.7); border-radius:4px; cursor:pointer;
  padding:4px 8px; font-size:12px; transition:all .2s;
}
.music-btn:hover { color:var(--gold); border-color:var(--gold); }
.vol-slider { width:70px; accent-color:var(--gold); cursor:pointer; }

/* ── Fullscreen button ───────────────────────────────────────── */
.fs-btn {
  position:fixed; top:12px; right:12px;
  background:rgba(0,0,0,.5); border:1px solid rgba(201,162,39,.3);
  color:rgba(240,208,96,.7); padding:6px 11px; border-radius:7px;
  cursor:pointer; font-family:'Cinzel',serif; font-size:10px;
  z-index:200; transition:all .2s;
}
.fs-btn:hover { color:var(--gold); border-color:var(--gold); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 520px) {
  :root { --card-w: 56px; --card-h: 80px; }
  .card-rank { font-size: 12px; }
  .card-suit-lg { font-size: 22px; }
  .btn { padding: 9px 13px; font-size: 11px; }
  .chip { width: 34px; height: 34px; font-size: 8px; }
  .hand-score { font-size: 18px; }
}
@media (max-width: 380px) {
  .stats-bar { gap: 10px; font-size: 9px; }
  .btn { padding: 8px 10px; font-size: 10px; }
}