:root{
  --felt:#0f6b4f;
  --felt-dark:#0c4f3a;
  --ink:#f0f5ea;
  --gold:#f3cd71;
  --accent:#d2f2d0;
  --danger:#ff6b6b;
  --ok:#a4e8a4;
  --shadow: 0 8px 24px rgba(0,0,0,.4);
}

*{ box-sizing:border-box; }
html,body{ height:100%; background:#08130f; color:var(--ink); font-family:system-ui, -apple-system, Segoe UI, Roboto, 'Trebuchet MS', sans-serif; }
#app{ max-width:1200px; margin:0 auto; padding:12px; }

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; border-radius:12px;
  background:linear-gradient(180deg,#0b2b22,#061a14);
  box-shadow:var(--shadow);
  position:sticky; top:8px; z-index:5;
}
.brand{ font-weight:800; letter-spacing:.5px; color:var(--gold); }
.status span{ margin:0 8px; opacity:.9; }

.bubble-wrap{
  margin:16px 0; position:relative; display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap;
}
#bubble{
  background:radial-gradient(circle at 50% 40%, #1a7b60, #0e3c30);
  border-radius:16px; box-shadow:var(--shadow), 0 0 0 6px rgba(255,255,255,.05) inset;
}
.bubble-ctl{ display:flex; align-items:center; gap:10px; }
button{ cursor:pointer; border:0; padding:10px 14px; border-radius:12px; background:#17342b; color:var(--ink); box-shadow:var(--shadow); }
button.primary{ background:linear-gradient(180deg,#22a07b,#177d61); color:#061a14; font-weight:800; letter-spacing:.5px; }

.switch{ position:relative; display:inline-block; width:48px; height:28px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#2c4141; transition:.2s; border-radius:28px;
}
.slider:before{
  position:absolute; content:""; height:22px; width:22px; left:3px; top:3px; background:white; border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{ background:#2db896; }
.switch input:checked + .slider:before{ transform:translateX(20px); }
.hint{ opacity:.7; }

.table-wrap{ padding:10px; }
#table{
  background: radial-gradient(circle at 50% 0%, var(--felt), var(--felt-dark));
  border-radius:24px; padding:16px; box-shadow: var(--shadow), inset 0 0 80px rgba(0,0,0,.35);
  border:3px solid rgba(255,255,255,.06);
}
.centerrow, .midrow, .bottomrow{ display:grid; gap:10px; margin-bottom:12px; }
.centerrow{ grid-template-columns: repeat(7, 1fr); }
.midrow{ grid-template-columns: 2fr 3fr 2fr; }
.numbers{ display:grid; grid-template-columns: repeat(6, 1fr); gap:10px; margin-bottom:12px; }
.num-col{ display:grid; grid-template-rows:auto auto 1fr; gap:8px; align-content:start; }

.bet{
  text-align:center; padding:10px; border-radius:12px; user-select:none; position:relative;
  border:2px dashed rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);
  transition: transform .05s ease-out, box-shadow .2s ease, background .2s ease;
  min-height:56px;
}
.bet:hover{ transform:translateY(-1px); box-shadow:0 8px 16px rgba(0,0,0,.25); background:rgba(255,255,255,.1); }
.bet.small{ min-height:44px; font-size:.9rem; }
.bet.tiny{ min-height:32px; font-size:.8rem; }
.prop{ background:rgba(255,255,255,.08); }
.come{ background:rgba(0,0,0,.15); }
.field{ background:rgba(34,139,34,.25); }
.place{ background:rgba(255,255,255,.07); }
.hard{ background:rgba(237, 180, 59, .2); }

.comebox{ display:grid; grid-template-rows:repeat(2,1fr); gap:6px; }

.bottomrow{ grid-template-columns: 2fr 5fr; }
.pass{ background:rgba(26, 127, 191, .25); }
.dontpass{ background:rgba(209, 71, 71, .25); }

.controls{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:8px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ background:#0d2b22; border:1px solid rgba(255,255,255,.1); min-width:72px; font-weight:700; }
.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.toggle{ display:flex; gap:8px; align-items:center; }

.stack{
  position:absolute; bottom:6px; right:6px; display:flex; flex-direction:column; gap:2px; align-items:flex-end;
}
.stack .chip-tag{
  background:rgba(0,0,0,.45); padding:3px 6px; border-radius:8px; font-size:.78rem; box-shadow:inset 0 0 8px rgba(0,0,0,.4);
}

.winflash{ animation: winflash 1s ease-out 0s 1; }
@keyframes winflash{
  0% { box-shadow: 0 0 0 rgba(255,255,255,0); }
  25% { box-shadow: 0 0 16px rgba(255,255,255,.4), inset 0 0 32px rgba(255,255,255,.3); }
  100% { box-shadow: 0 0 0 rgba(255,255,255,0); }
}

.foot{ display:flex; justify-content:center; gap:10px; opacity:.7; margin:12px 0 24px; }
.tiny{ font-size:.85rem; opacity:.8; }

/* Responsive */
@media (max-width:900px){
  .centerrow{ grid-template-columns: repeat(4, 1fr); }
  .midrow{ grid-template-columns: 1fr; }
  .numbers{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:580px){
  #bubble{ width:100%; height:auto; }
  .status{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
}


/* --- Bubble glass overlay & shimmer --- */
.bubble-shell{ position:relative; display:inline-block; border-radius:16px; box-shadow: var(--shadow); }
.bubble-shell #bubble{ display:block; border-radius:16px; }
.glass-overlay{
  pointer-events:none; position:absolute; inset:0; border-radius:16px;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.20), rgba(255,255,255,0) 60%) ,
    linear-gradient(115deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 38%, rgba(255,255,255,.10) 39%, rgba(255,255,255,.02) 42%, rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  overflow:hidden;
}
.glass-overlay::after{
  content:""; position:absolute; inset:-20% -40%; transform:rotate(8deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 55%);
  animation: shine 4.5s linear infinite;
  filter: blur(2px);
}
.rim-shadow{
  pointer-events:none; position:absolute; inset:0; border-radius:16px;
  box-shadow: inset 0 0 64px rgba(0,0,0,.35), inset 0 0 0 6px rgba(255,255,255,.05);
}

@keyframes shine{
  0%{ transform: translateX(-60%) rotate(8deg); opacity:.0; }
  10%{ opacity:.9; }
  50%{ opacity:.3; }
  100%{ transform: translateX(60%) rotate(8deg); opacity:0; }
}

/* --- Anticipation states (seven sweat vs point sweat) --- */
.bubble-shell.anticipate-seven{ box-shadow: 0 0 0 0 rgba(255,80,80,.0), 0 0 32px rgba(255,80,80,.25), var(--shadow); }
.bubble-shell.anticipate-point{ box-shadow: 0 0 0 0 rgba(243,205,113,.0), 0 0 32px rgba(243,205,113,.25), var(--shadow); }
.bubble-shell.anticipate-seven .glass-overlay{ background-blend-mode: screen, normal; }
.bubble-shell.anticipate-point .glass-overlay{ background-blend-mode: screen, normal; }

/* glow pulses on felt targets */
.sweat-target{ position:relative; }
.sweat-target::before{
  content:""; position:absolute; inset:-3px; border-radius:14px;
  box-shadow: 0 0 0 0 rgba(255,255,255,.0);
  animation: sweatPulse 0.85s ease-in-out infinite alternate;
}
.sweat-seven::before{ box-shadow: 0 0 16px 2px rgba(255,60,60,.45); }
.sweat-point::before{ box-shadow: 0 0 16px 2px rgba(243,205,113,.45); }

@keyframes sweatPulse{
  from{ transform: scale(1); opacity:.8; }
  to{ transform: scale(1.02); opacity:1; }
}


/* --- Casino chips (buttons) --- */
.chips { gap:12px; }
.chip{
  position:relative; width:72px; height:72px; min-width:72px; padding:0;
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-variant-numeric: tabular-nums; letter-spacing:.2px;
  background:#1a1a1a; border:3px solid rgba(255,255,255,.15);
  box-shadow: 0 6px 0 rgba(0,0,0,.35), var(--shadow);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.chip:before, .chip:after{
  content:""; position:absolute; inset:8px; border-radius:50%;
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.2);
}
.chip:after{
  inset:0; border-radius:50%;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,.85) 0 10deg, transparent 10deg 40deg,
      rgba(255,255,255,.85) 40deg 50deg, transparent 50deg 80deg,
      rgba(255,255,255,.85) 80deg 90deg, transparent 90deg 120deg,
      rgba(255,255,255,.85) 120deg 130deg, transparent 130deg 160deg,
      rgba(255,255,255,.85) 160deg 170deg, transparent 170deg 200deg,
      rgba(255,255,255,.85) 200deg 210deg, transparent 210deg 240deg,
      rgba(255,255,255,.85) 240deg 250deg, transparent 250deg 280deg,
      rgba(255,255,255,.85) 280deg 290deg, transparent 290deg 320deg,
      rgba(255,255,255,.85) 320deg 330deg, transparent 330deg 360deg);
  mix-blend-mode: overlay;
  opacity:.45;
}
.chip span{
  position:relative; z-index:1; font-size:14px; background:rgba(0,0,0,.35);
  padding:4px 8px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
}

/* denominations */
.chip[data-chip="0.25"]{ background:#e9e9e9; color:#111; }
.chip[data-chip="1"]{ background:#1b66d1; }
.chip[data-chip="5"]{ background:#d12a2a; }
.chip[data-chip="25"]{ background:#1f8a43; }
.chip[data-chip="100"]{ background:#101010; }

/* flying chip token */
.flying-chip{
  position:fixed; z-index:9999; width:46px; height:46px; border-radius:50%;
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:11px;
  pointer-events:none;
  transition: transform .45s cubic-bezier(.2,.9,.2,1.1), opacity .45s ease;
}
.flying-chip span{ background:rgba(0,0,0,.45); padding:2px 6px; border-radius:8px; border:1px solid rgba(255,255,255,.15); }
.flying-025{ background:#e9e9e9; color:#111; }
.flying-1{ background:#1b66d1; }
.flying-5{ background:#d12a2a; }
.flying-25{ background:#1f8a43; }
.flying-100{ background:#101010; }

/* on-felt chip mini + amount */
.stack{ align-items:flex-end; }
.stack .chip-mini{
  width:24px; height:24px; border-radius:50%; margin-top:2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.stack .chip-mini.amt{ display:none; }
.stack .amt-text{ font-weight:800; }


/* --- Casino chip styling --- */
.chip{
  border-radius:50%;
  width:64px; height:64px;
  display:flex; justify-content:center; align-items:center;
  font-weight:800; font-size:0.9rem;
  position:relative;
  box-shadow:0 4px 8px rgba(0,0,0,.4), inset 0 0 4px rgba(255,255,255,.6);
  transition:transform .15s ease;
}
.chip:hover{ transform:scale(1.08); }
.chip[data-chip="0.25"]{ background:#fdfdfd; color:#000; }
.chip[data-chip="1"]{ background:#d22; color:#fff; }
.chip[data-chip="5"]{ background:#0a5; color:#fff; }
.chip[data-chip="25"]{ background:#222; color:#fff; }
.chip[data-chip="100"]{ background:#639; color:#fff; }

/* Flying chip animation */
.flying-chip{
  position:fixed; width:48px; height:48px;
  border-radius:50%; display:flex; justify-content:center; align-items:center;
  font-weight:700; font-size:.8rem; pointer-events:none;
  opacity:0.9;
  box-shadow:0 4px 10px rgba(0,0,0,.5);
  z-index:1000;
  transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
}

/* DnD drop highlight */
.drop-target{ outline: 3px dashed rgba(255,255,255,.6); outline-offset: 2px; }

/* --- Place Helpers Toolbar --- */
.ptool{
  position:fixed; z-index:9998; background:#0b1f18; color:#eaf2ea; border:1px solid rgba(255,255,255,.12);
  border-radius:12px; box-shadow: 0 10px 26px rgba(0,0,0,.45);
  display:flex; gap:6px; padding:6px; align-items:center;
}
.ptool.hidden{ display:none; }
.ptool button{
  background:#123c2f; border:1px solid rgba(255,255,255,.12); color:#eaf2ea;
  padding:6px 10px; border-radius:10px; font-size:.9rem; cursor:pointer;
}
.ptool button:hover{ background:#165846; }