/* --- Reset a základní styl --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg:#0a0b23;
  --panel1:#1b1d58;
  --panel2:#111337;
  --accent:#ffd700;
  --accent2:#ffe65c;
  --line:#333366;
  --text:#fff;
  --muted:#cfd3ff;
  --success:#34d399;
  --danger:#ef4444;
  --payout-bg1:#1f238a;
  --payout-bg2:#4826a8;
  --payout-row:#2b2fb5;
  --payout-cell:#1a1f80;
  --payout-cell-active:#ffcc00;
  --payout-row-text:#9ee0ff;
}

html,body{ height:100%; }
body {
  background: radial-gradient(800px 500px at 50% 0%, #1b1d58 0%, #0a0b23 60%, #050616 100%);
  color: var(--text);
  font-family: system-ui, 'Segoe UI', Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  display: flex; justify-content: center; align-items: center; padding: 20px;
}

.container {
  width: min(1100px, 96vw);
  background: linear-gradient(145deg, var(--panel1), var(--panel2));
  border: 4px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 0 35px rgba(0,0,0,.65);
  overflow: hidden;
}

/* --- Header --- */
.header {
  background: linear-gradient(90deg, #222266, #444488);
  padding: 14px 16px 10px;
  text-align: center;
  border-bottom: 1px solid #2a2c78;
}
.header h1{
  color: var(--accent);
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  letter-spacing: .5px;
  text-shadow: 2px 2px 6px rgba(0,0,0,.6);
  margin-bottom: 8px;
}

/* --- NEW: Payout table --- */
.payout-wrap{
  margin: 0 auto 6px;
  width: min(1040px, 100%);
  background: linear-gradient(90deg, var(--payout-bg1), var(--payout-bg2));
  border: 2px solid #0b0f6b;
  border-radius: 10px;
  padding: 10px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.35);
}
.payout-title{
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 6px;
  color: #fffb;
  text-align: left;
}
.payout-table{
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 0.8fr);
  gap: 4px;
  align-items: stretch;
}
.payout-cell{
  display:flex; align-items:center; justify-content:center;
  padding: 4px 4px;
  background: #0c1156;
  color: #fff;
  border: 1px solid #1a238a;
  border-radius: 4px;
  text-shadow: 1px 1px 1px #000;
  min-height: 22px;
  font-size: 0.8rem;
  font-weight: 600;
}
.payout-head{ background: #08104a; color:#ffda5c; }
.payout-rank{ background: var(--payout-row); color: var(--payout-row-text); justify-content: flex-start; padding-left: 10px; }
.payout-val { background: var(--payout-cell); }
.payout-val.payout-col-active{ outline: 2px solid #ffe066; box-shadow: 0 0 8px #ffd34d; }

/* winning glow on the specific cell + row */
@keyframes winGlow { 0%,100%{ box-shadow: 0 0 18px #ffdb4d; } 50%{ box-shadow: 0 0 8px #fff; } }
.payout-win-cell { background: #f7b500; color:#3a2a00; animation: winGlow 1s infinite; }
.payout-win-row  { filter: brightness(1.1); }

.payout-note{ margin-top: 6px; font-size: .9rem; color:#e6e6ffcc; text-align:left; }

/* --- Game area --- */
.game-area{ padding: 18px; display:flex; flex-direction: column; gap: 16px; align-items: center; }

/* Stats bar */
.stats{ display:flex; gap:16px; }
.stat{
  background: rgba(0,0,0,.25);
  border: 1px solid #2f327e;
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 130px;
  text-align: center;
  box-shadow: inset 0 0 10px rgba(0,0,0,.3);
}
.stat .stat-label{ display:block; font-size:.85rem; color: var(--muted); letter-spacing:.4px; }
.stat .stat-value{ display:block; font-size:1.4rem; font-weight:700; color: var(--accent); margin-top:2px;}
.stat.win .stat-value{ color:#ffe066; text-shadow: 0 0 8px rgba(255, 230, 0, .5); }

/* Cards row */
.cards { display:flex; gap: 14px; margin: 8px 0 10px; justify-content:center; flex-wrap: wrap; perspective: 1200px; }

/* Card (shared for hand and gamble) */
.card {
  width: 110px; height: 160px;
  border: 2px solid #9aa1ff33;
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.55);
  cursor: pointer; overflow: hidden; position: relative;
  transform-style: preserve-3d; transition: transform .35s, border-color .2s, box-shadow .2s;
  background: transparent !important;
}
.card.held{ border-color: var(--accent); box-shadow: 0 0 16px var(--accent); }
.card .front,
.card .back{ position:absolute; inset:0; backface-visibility: hidden; transition: opacity .25s ease, transform .35s ease; }
.card .front{ background:#fff; }
.card .back {
  transform: rotateY(180deg);
  opacity: 0;
  background: radial-gradient(circle at 30% 30%, #3a4ba0 0%, #1a2566 80%) !important;
  border: 2px solid #ffffffcc;
  display: flex; justify-content: center; align-items: center;
}
.card .back::before {
  content: "";
  width: 80%; height: 80%;
  border: 2px solid #ffffffcc;
  border-radius: 8px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.16),
    rgba(255,255,255,0.16) 6px,
    rgba(255,255,255,0.0) 6px,
    rgba(255,255,255,0.0) 12px
  );
}
.card.flipped{ transform: rotateY(180deg); } /* flipped => back side visible */
.card.flipped .front { opacity: 0; }
.card.flipped .back  { opacity: 1; }
.card img{ width:100%; height:100%; object-fit: cover; }

@keyframes flash { 0%,100%{ box-shadow: 0 0 16px #00ff91; } 50%{ box-shadow:0 0 16px #ffffff; } }
.card.winner{ animation: flash 1s infinite; }

/* Controls */
.controls{ display:flex; gap:10px; flex-wrap: wrap; justify-content:center; }
.btn{
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
  letter-spacing:.3px;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
  user-select: none;
}
.btn:disabled{ opacity:.45; cursor:not-allowed; filter: grayscale(.5); }

.btn.pill{ background: linear-gradient(180deg, #e1e6ff, #c5cbff); color:#0a0b23; box-shadow: 0 6px 14px #5562ff33; }
.btn.glow{ background: linear-gradient(180deg, var(--accent), #e6c200); color:#000; box-shadow: 0 6px 14px #ffe06655; }
.btn.primary{ background: linear-gradient(180deg, #66a3ff, #3977ff); color:#fff; box-shadow: 0 6px 14px #3977ff55; }
.btn.success{ background: linear-gradient(180deg, #34d399, #10b981); color:#002a1f; box-shadow: 0 6px 14px #10b98155; }
.btn.danger{ background: linear-gradient(180deg, #ff6b6b, #ef4444); color:#fff; box-shadow: 0 6px 14px #ef444455; }
.btn:hover{ filter: brightness(1.05); }
.btn:active{ transform: translateY(1px) scale(0.99); }

/* Info / status */
.info{ width:100%; display:flex; justify-content:center; }
.status{
  background: rgba(0,0,0,.35);
  border: 1px solid #2f327e;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 1.05rem;
  color:#fffae0;
}

/* --- On-table GAMBLE bar --- */
.gamble-bar{
  display:flex; gap:12px; justify-content:center; align-items:center;
  width: 100%;
}
.gamble-bar.hidden{ display:none; }
.btn.red{ background: linear-gradient(180deg,#ff9aa9,#ff4d4d); color:#330000; box-shadow: 0 8px 16px rgba(239,68,68,.35); }
.btn.black{ background: linear-gradient(180deg,#c8cbe0,#2b2e3e); color:#fff; box-shadow: 0 8px 16px rgba(0,0,0,.45); }
.big-suit{ display:block; font-size: 1.6rem; margin-bottom: 2px; }

/* Responsive tweaks */
@media (max-width: 700px){
  .cards .card{ width: 92px; height: 135px; }
  .payout-table{ grid-template-columns: 1.2fr repeat(5, 0.7fr); }
}

/* Active bet column header highlight */
.payout-head.payout-col-active{ outline: 2px solid #ffe066; box-shadow: 0 0 8px #ffd34d; }


/* ==== Subtle blue glow for active bet column; bright yellow stays for win cell ==== */
.payout-val.payout-col-active{
  outline: none;
  background: linear-gradient(180deg, #1a1f80, #22289a);
  box-shadow:
    0 0 0 2px rgba(96, 128, 255, 0.35) inset,
    0 0 14px rgba(96, 128, 255, 0.45);
  filter: saturate(1.05) brightness(1.05);
}
.payout-head.payout-col-active{
  outline: none;
  background: linear-gradient(180deg, #0b125e, #15207e);
  box-shadow:
    0 0 0 2px rgba(96, 128, 255, 0.35) inset,
    0 0 10px rgba(96, 128, 255, 0.35);
  color:#ffe89e;
}

/* Winning cell remains vivid yellow */
.payout-win-cell{
  background: #f7b500 !important;
  color: #3a2a00 !important;
  box-shadow: 0 0 16px rgba(255, 219, 77, .9), 0 0 4px #fff inset;
}