:root{
  --bg0:#06060a;
  --bg1:#020206;

/* FELT (RED) */
--feltA:#7a0f1a;   /* tamno crvena */
--feltB:#4b0a12;   /* dublja crvena */
--feltC:#1c0408;   /* skoro crna */

  /* WOOD */
  --woodA:#6b3a19;
  --woodB:#2a1409;

  /* GOLD */
  --gold:#facc15;
  --goldSoft:rgba(250,204,21,.35);

  --text:#e5e7eb;
  --muted:#a1a1aa;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; min-height:100vh; color:var(--text); font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

/* BACKGROUND (casino room, no dots, no stripes) */
body{
  background:
    radial-gradient(1100px 700px at 20% 20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(255,200,80,.05), transparent 62%),
    radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,.85), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-attachment: fixed;
}

.container{ max-width:1400px; margin:0 auto; padding:16px 20px; }
.row{ display:flex; align-items:center; gap:10px; }

/* APPBAR */
.appbar{
  position:sticky; top:0; z-index:200;
  background:linear-gradient(180deg, rgba(2,6,23,.92), rgba(0,0,0,.88));
  border-bottom:1px solid rgba(250,204,21,.18);
  backdrop-filter:blur(14px);
  box-shadow:0 16px 50px rgba(0,0,0,.60);
}
.appbar .inner{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px; }

.brand{
  display:flex; align-items:center; gap:8px;
  font-weight:900; letter-spacing:.18em; font-size:.9rem; text-transform:uppercase;
  color:var(--text); text-decoration:none;
}
.brand .dot{
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold), #f97316);
  box-shadow:0 0 0 4px rgba(234,179,8,.14),0 0 14px rgba(250,204,21,.9);
}
.balance{ font-weight:900; font-size:.95rem; color:var(--gold); text-shadow:0 0 18px rgba(250,204,21,.14); }

/* BUTTONS (casino) */
.btn{
  appearance:none; border:none; border-radius:14px;
  padding:10px 18px; font-weight:900; font-size:.85rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  letter-spacing:.08em; text-transform:uppercase;
  color:#f8fafc;
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.92));
  border:1px solid rgba(250,204,21,.40);
  box-shadow:0 14px 30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .08s ease, filter .12s ease, box-shadow .14s ease;
}
.btn:hover{
  filter:brightness(1.06);
  box-shadow:0 18px 40px rgba(0,0,0,.72), 0 0 18px rgba(250,204,21,.10), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn:active{ transform:translateY(1px); box-shadow:0 10px 24px rgba(0,0,0,.70), inset 0 1px 0 rgba(255,255,255,.10); }

.btn.secondary{
  background:linear-gradient(180deg, rgba(59,130,246,.55), rgba(2,6,23,.92));
  border-color: rgba(96,165,250,.65);
}
.btn.ghost{
  background:linear-gradient(180deg, rgba(2,6,23,.65), rgba(0,0,0,.65));
  border:1px solid rgba(250,204,21,.55);
  color:#fde68a;
  box-shadow:0 14px 30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
}

.btn.warn{
  background:linear-gradient(180deg, rgba(250,204,21,.65), rgba(2,6,23,.92));
  border-color: rgba(250,204,21,.85);
  color:#0b1220;
}
.btn.danger{
  background:linear-gradient(180deg, rgba(239,68,68,.65), rgba(2,6,23,.92));
  border-color: rgba(248,113,113,.85);
  color:#fff;
}
.btn[disabled]{ opacity:.35; cursor:not-allowed; box-shadow:none; }

/* TABLE WRAP */
.table-wrap{ margin:26px 0 80px; position:relative; overflow:visible; }

/* WOOD FRAME */
.table{
  position:relative;
  border-radius:64px;
  padding:22px;
  background:linear-gradient(180deg,var(--woodA),var(--woodB));
  box-shadow:0 55px 120px rgba(0,0,0,.92);
  overflow:visible;
}
.table::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:64px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(180deg,#7a4520,#241109);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 0 0 2px var(--goldSoft);
  pointer-events:none;
}

/* extra thin gold frame (safe ornament) */
.table::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:52px;
  pointer-events:none;
  border:1px solid rgba(250,204,21,.18);
  box-shadow:0 0 40px rgba(250,204,21,.06), inset 0 0 0 1px rgba(0,0,0,.35);
}

/* FELT */
.table-felt{
  position:relative;
  margin:0 auto;
  max-width:1280px;
  height:430px;
  border-radius:999px;
  background:
    radial-gradient(140% 120% at 50% 18%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(120% 180% at 50% 120%, rgba(0,0,0,.55), transparent 55%),
    linear-gradient(90deg, var(--feltA), var(--feltB));
  box-shadow:
    inset 0 0 0 3px rgba(250,204,21,.20),
    inset 0 0 110px rgba(0,0,0,.78),
    0 22px 60px rgba(0,0,0,.45);
  overflow:visible; /* da se vide dealer/player */
}

/* GOLD LINES */
.table-felt::before,
.table-felt::after{
  content:'';
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  border:2px solid rgba(250,204,21,.35);
}
.table-felt::before{ inset:16% 10%; }
.table-felt::after{ inset:30% 18%; opacity:.75; }

/* DECOR ovale */
.table-decor{
  position:absolute;
  width:170px;
  height:98px;
  border-radius:999px;
  border:2px solid rgba(250,204,21,.90);
  box-shadow:0 0 26px rgba(250,204,21,.18), inset 0 0 12px rgba(0,0,0,.85);
  top:52%;
  transform:translateY(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 60%);
  pointer-events:none;
}
.table-decor-left{ left:20%; }
.table-decor-right{ right:20%; }

/* SLOGAN */
.table-slogan{
  position:absolute;
  top:10%;
  left:30%;
  transform:translateX(-50%);
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  padding:6px 18px;
  border-radius:999px;
  color:rgba(250,204,21,.96);
  background:rgba(2,6,23,.45);
  border:1px solid rgba(250,204,21,.18);
  box-shadow:0 0 24px rgba(0,0,0,1);
  pointer-events:none;
}

/* PLAYERS */
.players{ position:absolute; inset:0; pointer-events:none; z-index:40; }
.actor{ position:absolute; display:grid; place-items:center; gap:6px; }

.actor-dealer{ top:-12%; left:50%; transform:translateX(-50%); }
.actor-player{ bottom:-4%; left:50%; transform:translateX(-50%); } /* NEMA više negativnog bottom */

.avatar{
  width:78px; height:78px; border-radius:50%;
  border:2px solid rgba(250,204,21,.9);
  background:
    radial-gradient(circle at 30% 10%,rgba(255,255,255,.9),transparent 55%),
    radial-gradient(circle at 80% 0%,rgba(251,191,36,.9),transparent 55%),
    linear-gradient(145deg,#111827,#020617);
  display:flex; align-items:center; justify-content:center;
  font-size:32px;
  box-shadow:0 18px 35px rgba(0,0,0,.9);
}
.hand{
  margin-top:4px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(2,6,23,.72);
  border:1px solid rgba(250,204,21,.22);
  font-size:.88rem;
  box-shadow:0 10px 20px rgba(0,0,0,.7);
}

/* DICE */
.dice-spot{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:60;
  pointer-events:none;
}

.d12{
  position:relative;
  width:170px;
  height:170px;
  border-radius:24px;
  background:rgba(2,6,23,.25);
  box-shadow:0 30px 70px rgba(0,0,0,.75);
  outline:2px solid rgba(250,204,21,.18);
  display:grid;
  place-items:center;
  overflow:visible;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.75));
}

.d12 svg{
  width:100%;
  height:100%;
  display:block;
  transform-origin:50% 50%;
}

.d12.spin svg{
  animation:hex-roll .85s cubic-bezier(.25,.8,.25,1) both;
}
@keyframes hex-roll{
  0%{ transform:rotate(0deg) scale(1); filter:brightness(.95); }
  55%{ transform:rotate(340deg) scale(1.06); filter:brightness(1.05); }
  100%{ transform:rotate(360deg) scale(1); filter:brightness(1); }
}

/* prikaz broja (face) */
.d12 .face{ opacity:0; }
.d12[data-value="1"]  .face-1,
.d12[data-value="2"]  .face-2,
.d12[data-value="3"]  .face-3,
.d12[data-value="4"]  .face-4,
.d12[data-value="5"]  .face-5,
.d12[data-value="6"]  .face-6,
.d12[data-value="7"]  .face-7,
.d12[data-value="8"]  .face-8,
.d12[data-value="9"]  .face-9,
.d12[data-value="10"] .face-10,
.d12[data-value="11"] .face-11,
.d12[data-value="12"] .face-12{ opacity:1; }

/* MESSAGE (small badge, not full width) */
.message-banner{
  position:absolute;
  left:50%;
  top:64%;
  transform:translateX(-50%);
  padding:8px 16px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(2,6,23,.55), rgba(0,0,0,.55));
  border:1px solid rgba(250,204,21,.35);
  font-size:.78rem;
  color:#fde68a;
  letter-spacing:.20em;
  text-transform:uppercase;
  box-shadow:0 10px 24px rgba(0,0,0,.55);
  z-index:55;
  white-space:nowrap;
  max-width:min(560px, 92%);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* CONTROLS (below table) */
.controls{
  position:relative;
  z-index:80;
  display:grid;
  gap:12px;
  justify-items:center;
  margin-top:16px;
  padding:14px 12px 10px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(2,6,23,.55), rgba(0,0,0,.55));
  border:1px solid rgba(250,204,21,.18);
  box-shadow:0 18px 50px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.04);
}

.actions-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.actions-row .btn{ min-width:110px; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(2,6,23,.72);
  border:1px solid rgba(250,204,21,.22);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#cbd5e1;
}

.chips-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}

.chip{
  width:46px;
  height:46px;
  border-radius:50%;
  border:0;
  cursor:pointer;
  position:relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.18), transparent 60%),
    conic-gradient(from 0deg, #111827, #0f172a, #111827, #0b1220, #111827);
  border:1px solid rgba(250,204,21,.25);
  box-shadow:0 10px 22px rgba(0,0,0,.82), 0 0 18px rgba(250,204,21,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .08s, box-shadow .1s;
}
.chip::before{
  content:'';
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(15,23,42,.95), rgba(2,6,23,.95));
  border:1px solid rgba(250,204,21,.20);
}
.chip-value{ position:relative; z-index:1; color:#e5e7eb; text-shadow:0 2px 10px rgba(0,0,0,.85); font-size:.72rem; font-weight:1000; }
.chip:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,.90), 0 0 22px rgba(250,204,21,.10); }
.chip:active{ transform:translateY(1px); box-shadow:0 6px 14px rgba(0,0,0,.90); }
.chip.active{ outline:2px solid rgba(250,204,21,.95); outline-offset:2px; }

/* OVERLAY */
.round-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(0,0,0,.28), rgba(0,0,0,.72));
  z-index:120;
  backdrop-filter: blur(4px);
}
.round-card{
  width:min(520px, 92vw);
  border-radius:22px;
  padding:18px 18px 14px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.92), rgba(0,0,0,.92));
  border:1px solid rgba(250,204,21,.55);
  box-shadow:0 30px 80px rgba(0,0,0,.78), 0 0 40px rgba(250,204,21,.10), inset 0 0 0 1px rgba(255,255,255,.05);
}

/* overlay bez blur + close dugme */
.round-overlay{ backdrop-filter: none; }

.round-card{ position:relative; }

.overlay-close-form{ position:absolute; top:10px; right:10px; margin:0; }

.round-close{
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid rgba(250,204,21,.35);
  background:linear-gradient(180deg, rgba(2,6,23,.72), rgba(0,0,0,.72));
  color:#fde68a;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
}
.round-close:hover{ filter:brightness(1.08); }
.round-close:active{ transform:translateY(1px); }

/* chips leve/desne grupe */
.chips-row{
  width:min(520px, 96%);
  justify-content:space-between;
}
.chip-group{ display:flex; gap:8px; }

@media (max-width:520px){
  .chips-row{ justify-content:center; gap:10px; }
}


.round-title{
  font-weight:1000;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:1.15rem;
  margin:4px 0 10px;
}
.round-text{ font-size:1rem; opacity:.95; margin:0 0 10px; }
.round-sub{ font-size:.82rem; opacity:.70; }

.round-card.win{ border-color: rgba(34,197,94,.75); box-shadow:0 30px 80px rgba(0,0,0,.78), 0 0 45px rgba(34,197,94,.16); }
.round-card.win .round-title{ color:#86efac; }
.round-card.lose{ border-color: rgba(239,68,68,.70); box-shadow:0 30px 80px rgba(0,0,0,.78), 0 0 45px rgba(239,68,68,.16); }
.round-card.lose .round-title{ color:#fca5a5; }
.round-card.draw{ border-color: rgba(250,204,21,.70); box-shadow:0 30px 80px rgba(0,0,0,.78), 0 0 45px rgba(250,204,21,.16); }
.round-card.draw .round-title{ color:#fde68a; }

/* RESPONSIVE */
@media (min-width:768px){
  .table-felt{ height:460px; }
  .avatar{ width:86px; height:86px; font-size:36px; }
}
@media (max-width:520px){
  .table{ border-radius:46px; }
  .table::before{ border-radius:46px; }
  .table::after{ border-radius:38px; }
  .table-felt{ height:380px; }
  .actor-dealer{ top:-8%; }
  .actor-player{ bottom:7%; }
  .d12{ width:150px; height:150px; }
}

/* =========================
   FIX: Dealer roll visible on STAND (overlay delay)
   ========================= */

.dice-spot.dealer-front{ z-index: 999 !important; }

.round-overlay{ transition: opacity .22s ease; }
.round-overlay.is-hidden{
  opacity: 0;
  pointer-events: none;
}

/* =========================
   CHIPS: more colorful (Las Vegas)
   ========================= */

.chip{ position:relative; }
.chip:not([disabled]){ filter:saturate(1.15); }

.chip[value="10"]{  border-color: rgba(59,130,246,.55); box-shadow:0 10px 22px rgba(0,0,0,.82), 0 0 18px rgba(59,130,246,.14); }
.chip[value="20"]{  border-color: rgba(34,197,94,.55);  box-shadow:0 10px 22px rgba(0,0,0,.82), 0 0 18px rgba(34,197,94,.14); }
.chip[value="50"]{  border-color: rgba(168,85,247,.55); box-shadow:0 10px 22px rgba(0,0,0,.82), 0 0 18px rgba(168,85,247,.14); }
.chip[value="100"]{ border-color: rgba(250,204,21,.65); box-shadow:0 10px 22px rgba(0,0,0,.82), 0 0 18px rgba(250,204,21,.14); }
.chip[value="200"]{ border-color: rgba(244,63,94,.55);  box-shadow:0 10px 22px rgba(0,0,0,.82), 0 0 18px rgba(244,63,94,.14); }
.chip[value="500"]{ border-color: rgba(14,165,233,.55); box-shadow:0 10px 22px rgba(0,0,0,.82), 0 0 18px rgba(14,165,233,.14); }
.chip[value="1000"]{border-color: rgba(245,158,11,.65); box-shadow:0 10px 22px rgba(0,0,0,.82), 0 0 18px rgba(245,158,11,.14); }
.chip[value="2000"]{border-color: rgba(248,113,113,.60); box-shadow:0 10px 22px rgba(0,0,0,.82), 0 0 18px rgba(248,113,113,.14); }
.chip[value="5000"]{border-color: rgba(203,213,225,.55); box-shadow:0 10px 22px rgba(0,0,0,.82), 0 0 18px rgba(203,213,225,.14); }

.chip.active{ outline-color: rgba(250,204,21,.95) !important; }

/* =========================
   “Carpet” iza kontrola (hardcore casino)
   ========================= */

.controls{
  background:
    radial-gradient(900px 180px at 50% 0%, rgba(250,204,21,.08), transparent 60%),
    radial-gradient(700px 240px at 20% 40%, rgba(59,130,246,.06), transparent 65%),
    radial-gradient(700px 240px at 80% 60%, rgba(244,63,94,.05), transparent 65%),
    repeating-radial-gradient(circle at 12px 12px, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,0) 1px 10px),
    linear-gradient(180deg, rgba(40,14,14,.78), rgba(12,6,8,.86));
  border: 1px solid rgba(250,204,21,.18) !important;
}

/* jači “premium” glow na okviru stola */
.table::after{
  box-shadow: 0 0 40px rgba(250,204,21,.08), inset 0 0 0 1px rgba(0,0,0,.35) !important;
}

/* =========================
   LAS VEGAS DECALS + CURVY SLOGAN + CARPET AROUND FELT
   ========================= */

/* “tepih” u drvenom delu (oko kruga) */
.table::before{
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.12), transparent 55%),
    repeating-radial-gradient(circle at 14px 14px, rgba(255,255,255,.030) 0 1px, rgba(0,0,0,0) 1px 12px),
    radial-gradient(900px 350px at 25% 40%, rgba(250,204,21,.06), transparent 60%),
    radial-gradient(900px 350px at 75% 60%, rgba(244,63,94,.04), transparent 62%),
    linear-gradient(180deg,#7a4520,#241109);
  background-blend-mode: screen, overlay, normal, normal, normal;
}

/* EXTRA ornamenti po stolu (safe: na .table, ne dira felt linije) */
.table::after{
  box-shadow:
    0 0 40px rgba(250,204,21,.10),
    inset 0 0 0 1px rgba(0,0,0,.35),
    inset 0 0 60px rgba(0,0,0,.30) !important;
}

/* “corner inlays” (ugao detalji) */
.table-wrap::before,
.table-wrap::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  pointer-events:none;
  opacity:.55;
  border-radius:28px;
  border:1px solid rgba(250,204,21,.18);
  box-shadow:0 0 24px rgba(250,204,21,.06);
  background:
    radial-gradient(circle at 30% 30%, rgba(250,204,21,.10), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.06), transparent 55%);
  z-index:10;
}
.table-wrap::before{ left:-12px; top:-12px; transform:rotate(12deg); }
.table-wrap::after{ right:-12px; bottom:-12px; transform:rotate(-12deg); }

/* KRIVUDAV “DICEJACK PAYS 2 TO 1” */
.table-slogan{
  top:12% !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;

  font-size:13px !important;
  letter-spacing:.32em !important;
  color:rgba(250,204,21,.96) !important;

  transform:translateX(-50%) rotate(-4deg) skewX(-6deg) !important;
  text-shadow:0 10px 40px rgba(0,0,0,.90), 0 0 18px rgba(250,204,21,.16);
}
.table-slogan::after{
  content:"";
  display:block;
  height:10px;
  margin-top:6px;
  border-radius:999px;
  background:
    radial-gradient(circle at 10% 50%, rgba(250,204,21,.55), transparent 52%),
    radial-gradient(circle at 30% 50%, rgba(250,204,21,.35), transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(250,204,21,.55), transparent 52%),
    radial-gradient(circle at 70% 50%, rgba(250,204,21,.35), transparent 52%),
    radial-gradient(circle at 90% 50%, rgba(250,204,21,.55), transparent 52%);
  opacity:.65;
  filter:blur(.2px);
}

/* mini “neon suits” po stolu (diskretno) */
.table-wrap{
  position:relative;
}
.table-wrap .neon-decals{ display:none; } /* safe */
.table-wrap::marker{ content:""; } /* safe noop */

.table-wrap{
  background-image:
    radial-gradient(32px 32px at 18% 22%, rgba(244,63,94,.08), transparent 60%),
    radial-gradient(32px 32px at 82% 28%, rgba(59,130,246,.08), transparent 60%),
    radial-gradient(34px 34px at 22% 78%, rgba(34,197,94,.07), transparent 62%),
    radial-gradient(34px 34px at 78% 76%, rgba(250,204,21,.08), transparent 62%);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

/* =========================
   D12: bolja “dodeka” animacija (više 3D tumbling)
   ========================= */

.d12.spin svg{
  animation: d12-tumble .92s cubic-bezier(.2,.9,.2,1) both !important;
  transform-origin:50% 50%;
}
@keyframes d12-tumble{
  0%   { transform: rotate(0deg) rotateX(0deg) rotateY(0deg) scale(1); filter:brightness(.95); }
  35%  { transform: rotate(150deg) rotateX(35deg) rotateY(-28deg) scale(1.06); filter:brightness(1.05); }
  70%  { transform: rotate(310deg) rotateX(-22deg) rotateY(30deg) scale(1.02); filter:brightness(1.02); }
  100% { transform: rotate(360deg) rotateX(0deg) rotateY(0deg) scale(1); filter:brightness(1); }
}

/* D12: smirenija animacija (kraće + manje “divljanja”) */
.d12.spin svg{
  animation: d12-roll .62s cubic-bezier(.22,.85,.22,1) both !important;
  transform-origin:50% 50%;
}
@keyframes d12-roll{
  0%   { transform: rotate(0deg) scale(1);   filter:brightness(.98); }
  55%  { transform: rotate(290deg) scale(1.04); filter:brightness(1.05); }
  100% { transform: rotate(360deg) scale(1); filter:brightness(1); }
}

/* controls malo niže */
.controls{ margin-top: 26px !important; }

/* Chip colors: i spolja i unutra */
.chip{ position:relative; }
.chip::before{ transition: filter .12s ease; }

.chip[value="10"]  { --chip:#3b82f6; }
.chip[value="20"]  { --chip:#22c55e; }
.chip[value="50"]  { --chip:#a855f7; }
.chip[value="100"] { --chip:#facc15; }
.chip[value="200"] { --chip:#f43f5e; }
.chip[value="500"] { --chip:#0ea5e9; }
.chip[value="1000"]{ --chip:#f59e0b; }
.chip[value="2000"]{ --chip:#fb7185; }
.chip[value="5000"]{ --chip:#cbd5e1; }

.chip{
  border-color: color-mix(in srgb, var(--chip, #facc15) 55%, rgba(250,204,21,.25)) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.82),
    0 0 18px color-mix(in srgb, var(--chip, #facc15) 22%, transparent) !important;
}
.chip::before{
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--chip, #facc15) 45%, rgba(15,23,42,.95)),
      rgba(2,6,23,.95)
    ) !important;
  border-color: color-mix(in srgb, var(--chip, #facc15) 35%, rgba(250,204,21,.20)) !important;
}

/* Extra decals (safe, samo na table frame) */
.table::before{
  background:
    radial-gradient(900px 420px at 50% 15%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 520px at 50% 120%, rgba(0,0,0,.35), transparent 55%),
    radial-gradient(320px 220px at 20% 30%, rgba(59,130,246,.06), transparent 65%),
    radial-gradient(340px 240px at 80% 65%, rgba(244,63,94,.05), transparent 65%),
    repeating-radial-gradient(circle at 14px 14px, rgba(255,255,255,.030) 0 1px, rgba(0,0,0,0) 1px 12px),
    linear-gradient(180deg,#7a4520,#241109) !important;
  background-blend-mode: screen, normal, normal, normal, overlay, normal;
}

/* Curvy slogan + mali “quote” ispod */
.table-slogan{
  transform:translateX(-50%) rotate(-4deg) skewX(-6deg) !important;
  letter-spacing:.34em !important;
}
.table-slogan::before{
  content:"HOUSE EDGE? WE DON'T KNOW HER.";
  display:block;
  margin-top:8px;
  font-size:11px;
  letter-spacing:.26em;
  opacity:.65;
}

/* =========================
   CHIPS ON TABLE (felt)
   ========================= */
.table-chips{
  position:absolute;
  left:50%;
  bottom:10%;
  transform:translateX(-50%);
  display:flex;
  align-items:flex-end;
  gap:0;
  z-index:58; /* ispod kocke (60), iznad felta */
  pointer-events:auto;
  padding:0;
}

.table-chips::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%);
  width:min(420px, 86vw);
  height:54px;
  border-radius:999px;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.55), transparent 70%);
  filter:blur(2px);
  opacity:.55;
  pointer-events:none;
}

.table-chips .chip{
  width:54px;
  height:54px;
  margin-left:-14px; /* da se preklapaju kao na pravom stolu */
  transform:translateY(0) rotate(var(--r, 0deg));
  transform-origin:50% 80%;
  box-shadow:
    0 18px 34px rgba(0,0,0,.75),
    0 0 22px color-mix(in srgb, var(--chip, #facc15) 18%, transparent) !important;
}

.table-chips .chip:first-child{ margin-left:0; }
.table-chips .chip:hover{
  transform:translateY(-7px) rotate(var(--r, 0deg));
  z-index:5;
}
.table-chips .chip:active{
  transform:translateY(-2px) rotate(var(--r, 0deg));
}

.table-chips .chip:nth-child(1){ --r:-10deg; }
.table-chips .chip:nth-child(2){ --r:-5deg; }
.table-chips .chip:nth-child(3){ --r:0deg; }
.table-chips .chip:nth-child(4){ --r:6deg; }
.table-chips .chip:nth-child(5){ --r:12deg; }
.table-chips .chip:nth-child(6){ --r:18deg; }

@media (max-width:520px){
  .table-chips{ bottom:12%; }
  .table-chips .chip{
    width:48px;
    height:48px;
    margin-left:-12px;
  }
}

/* CHIPS ON TABLE (blackjack style) */
.table-chips{
  position:absolute;
  left:50%;
  bottom:10%;
  transform:translateX(-50%);
  display:flex;
  align-items:flex-end;
  gap:0;
  z-index:58;
}

.table-chips::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%);
  width:min(420px, 86vw);
  height:54px;
  border-radius:999px;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.55), transparent 70%);
  filter:blur(2px);
  opacity:.55;
  pointer-events:none;
}

.table-chips .chip{
  width:54px;
  height:54px;
  margin-left:-14px; /* overlap kao pravi stack */
  transform:translateY(0) rotate(var(--r, 0deg));
  transform-origin:50% 80%;
  box-shadow:0 18px 34px rgba(0,0,0,.75) !important;
}
.table-chips .chip:first-child{ margin-left:0; }
.table-chips .chip:hover{ transform:translateY(-7px) rotate(var(--r, 0deg)); z-index:5; }

.table-chips .chip:nth-child(1){ --r:-10deg; }
.table-chips .chip:nth-child(2){ --r:-5deg; }
.table-chips .chip:nth-child(3){ --r:0deg; }
.table-chips .chip:nth-child(4){ --r:6deg; }
.table-chips .chip:nth-child(5){ --r:12deg; }
.table-chips .chip:nth-child(6){ --r:18deg; }

/* overlay icon */
.round-icon{
  width:78px;
  height:78px;
  border-radius:50%;
  margin:0 auto 10px;
  display:grid;
  place-items:center;
  font-size:34px;
  background:linear-gradient(180deg, rgba(2,6,23,.85), rgba(0,0,0,.85));
  border:1px solid rgba(250,204,21,.35);
  box-shadow:0 18px 45px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.10);
}
.round-card.win  .round-icon{ border-color: rgba(34,197,94,.55);  box-shadow:0 18px 45px rgba(0,0,0,.75), 0 0 30px rgba(34,197,94,.14); }
.round-card.lose .round-icon{ border-color: rgba(239,68,68,.55);  box-shadow:0 18px 45px rgba(0,0,0,.75), 0 0 30px rgba(239,68,68,.14); }
.round-card.draw .round-icon{ border-color: rgba(250,204,21,.55); box-shadow:0 18px 45px rgba(0,0,0,.75), 0 0 30px rgba(250,204,21,.14); }

/* ===== CHIPS split left/right (near player) ===== */
.table-chips.split{
  position:absolute;
  left:50%;
  bottom:12%;
  transform:translateX(-50%);
  width:min(920px, 94vw);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  z-index:58;
  pointer-events:auto;
  padding:0 6%;
}

.chip-cluster{
  position:relative;
  display:flex;
  align-items:flex-end;
}

.chip-cluster::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%);
  width:240px;
  height:54px;
  border-radius:999px;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.55), transparent 70%);
  filter:blur(2px);
  opacity:.55;
  pointer-events:none;
}

.chip-cluster.left  { justify-content:flex-start; }
.chip-cluster.right { justify-content:flex-end; }

.table-chips.split .chip{
  width:54px;
  height:54px;
  margin-left:-14px;
  transform:translateY(0) rotate(var(--r, 0deg));
  transform-origin:50% 80%;
  box-shadow:0 18px 34px rgba(0,0,0,.75) !important;
}

.table-chips.split .chip:first-child{ margin-left:0; }
.table-chips.split .chip:hover{
  transform:translateY(-7px) rotate(var(--r, 0deg));
  z-index:5;
}

/* mali random “fan” efekat */
.table-chips.split .chip:nth-child(1){ --r:-10deg; }
.table-chips.split .chip:nth-child(2){ --r:-2deg; }
.table-chips.split .chip:nth-child(3){ --r:8deg; }

@media (max-width:520px){
  .table-chips.split{
    bottom:14%;
    padding:0 3%;
  }
  .table-chips.split .chip{
    width:48px;
    height:48px;
    margin-left:-12px;
  }
  .chip-cluster::before{
    width:190px;
  }
}