:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.4; }
    *, *::before, *::after { box-sizing: border-box; }

    body{
      margin:0; padding:0;
      background: radial-gradient(circle at top, #222 0, #111 40%, #000 100%);
      color:#f5f5f5;
      display:flex; justify-content:center;
    }
    .app{ max-width:1050px; width:100%; padding:16px; }
    .card{
      background: rgba(20,20,20,0.9);
      border-radius:16px;
      padding:16px 20px;
      box-shadow:0 10px 30px rgba(0,0,0,0.5);
      margin-bottom:16px;
      border:1px solid rgba(255,255,255,0.06);
    }
    h1{ margin:0 0 4px 0; font-size:1.8rem; }
    h2{ margin:0 0 8px 0; font-size:1.2rem; }
    p{ margin:4px 0; color:#ddd; }
    .subtitle{ color:#aaa; font-size:0.9rem; margin-bottom:8px; }

    .row{ display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; }
    .bankroll-display{ font-size:1.05rem; font-weight:700; }

    .stat-row{
      margin-top:8px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:stretch;
    }

    .stat-box{
      flex: 1 1 120px;
      min-width:120px;
      padding:8px 10px;
      border-radius:12px;
      background: radial-gradient(circle at top, rgba(15,23,42,0.95) 0, rgba(15,23,42,0.85) 40%, rgba(15,23,42,0.75) 100%);
      border:1px solid rgba(148,163,184,0.6);
      box-shadow:0 4px 10px rgba(0,0,0,0.6);
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:2px;
    }

    .stat-box.primary{
      border-color:#facc15;
      box-shadow:0 6px 14px rgba(0,0,0,0.8);
    }

    .stat-label{
      font-size:0.7rem;
      text-transform:uppercase;
      letter-spacing:0.08em;
      color:#9ca3af;
    }

    .stat-value{
      font-size:1.1rem;
      font-weight:800;
      color:#f9fafb;
    }

    .stat-btn{
      align-self:stretch;
      flex: 0 0 auto;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding-inline:16px;
      font-weight:800;
    }

    @media (max-width: 640px){
      .stat-row{
        flex-direction:row;
      }
      .stat-btn{
        width:100%;
      }
    }


    .muted{ color:#cbd5e1; opacity:0.85; }

    .badge{
      display:inline-block;
      padding:2px 8px;
      border-radius:999px;
      font-size:0.75rem;
      text-transform:uppercase;
      letter-spacing:0.04em;
      background:#1f2937;
      border:1px solid rgba(255,255,255,0.06);
      color:#f9fafb;
      user-select:none;
      white-space:nowrap;
    }
    .badge-point{ background:#1d4ed8; }
    .badge-comeout{ background:#16a34a; }
    .badge-off{ background:#374151; }
    .badge-on{ background:#16a34a; }

    /* TABLE */
    .table-card{
      background: radial-gradient(circle at top, #064e3b 0, #022c22 50%, #020617 100%);
      border-color: rgba(148, 163, 184, 0.4);
      position:relative;
      overflow:hidden;
    }
    .table-felt{
      border-radius:18px;
      border:2px solid rgba(148, 163, 184, 0.5);
      padding:14px;
      display:grid;
      grid-template-columns: 2fr 1.4fr;
      gap:12px;
    }
    .table-main{ display:flex; flex-direction:column; gap:10px; }
    .table-sides{
      display:grid;
      grid-template-columns: 1fr;
      gap:8px;
      align-content:start;
    }
    @media (min-width: 900px){
      .table-sides{ grid-template-columns: 1fr 1fr; }
    }

    #sideBetsGroup,
    #bonusBetsGroup{
      display: contents;
    }
    .table-felt.one-group-wide{
      grid-template-columns: 2.4fr 1.7fr;
    }
    .bet-spot{
      border-radius:999px;
      border:1px solid rgba(148,163,184,0.8);
      padding:4px 4px;
      font-size:0.8rem;
      text-align:center;
      cursor:pointer;
      background: rgba(15,118,110,0.35);
      color:#e5e7eb;
      box-shadow:0 4px 10px rgba(0,0,0,0.5);
      transition: transform 0.05s ease, box-shadow 0.05s ease, border-color 0.1s ease, opacity 0.1s ease;
      position:relative;
      overflow:hidden;
      user-select:none;
      white-space:nowrap;
    }
    .bet-spot:hover{ transform: translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,0.7); border-color:#facc15; }
    .bet-spot:active{ transform: translateY(0); box-shadow:0 4px 10px rgba(0,0,0,0.5); }

    .bet-spot-main{
      font-size:0.95rem;
      font-weight:800;
      background: linear-gradient(135deg, rgba(22, 163, 74, 0.7), rgba(5, 150, 105, 0.7));
    }
    .bet-spot-odds{
      font-size:0.85rem;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.7), rgba(37, 99, 235, 0.7));
    }
    .bet-spot-come{
      font-size:0.85rem;
      background: linear-gradient(135deg, rgba(168, 85, 247, 0.7), rgba(99, 102, 241, 0.7));
    }

    .bet-title{ text-transform:uppercase; letter-spacing:0.08em; font-size:0.7rem; }
    .bet-subtitle{ font-size:0.7rem; opacity:0.85; white-space:normal; }
    .bet-amount{ margin-top:6px; font-weight:900; font-size:0.9rem; color:#f97316; }

    .disabled,
    [aria-disabled="true"]{
      opacity:0.45 !important;
      cursor:not-allowed !important;
      transform:none !important;
      border-color: rgba(148,163,184,0.8) !important;
      box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    }

    /* OFF overlay (bubble behavior) */
    .off-overlay::after{
      content:"OFF";
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      letter-spacing:0.18em;
      font-size:1.05rem;
      color: rgba(255,255,255,0.85);
      background: rgba(0,0,0,0.35);
      text-shadow: 0 2px 12px rgba(0,0,0,0.8);
      pointer-events:none;
    }

    /* Places */
    .table-places{
      grid-column: 1 / -1;
      margin-top:8px;
      padding-top:8px;
      border-top:1px solid rgba(148,163,184,0.6);
    }
    .table-places-title{
      font-size:0.8rem;
      text-transform:uppercase;
      letter-spacing:0.08em;
      color:#e5e7eb;
      margin-bottom:6px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .table-places-grid{
      display:flex;
      gap:6px;
      overflow-y:hidden;
      flex-wrap:nowrap;
      align-items:flex-start;
      padding-bottom:8px;
    }
    .payout-col{
      flex: 0 0 118px;
      width:118px;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .payout-header{
      font-size:0.75rem;
      letter-spacing:0.06em;
      text-transform:uppercase;
      color:#e5e7eb;
      padding:6px 8px;
      border-radius:12px;
      background: rgba(2,6,23,0.35);
      border:1px solid rgba(148,163,184,0.55);
      text-align:center;
      white-space:nowrap;
    }
    .bet-spot-place{
      background: rgba(8,47,73,0.65);
      border-radius:18px;
      padding:10px;
      cursor:default;
      white-space:normal;
      padding: 4px;
    }
    .bet-spot-place:hover,
    .bet-spot-place:active{
      transform:none;
      border-color: rgba(148,163,184,0.8);
      box-shadow:0 4px 10px rgba(0,0,0,0.5);
    }
    .spot-header{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:8px;
      margin-bottom:8px;
    }
    .spot-number{ font-size:1.05rem; font-weight:900; letter-spacing:0.02em; }

    .mini-spot{
      border-radius:12px;
      border:1px solid rgba(148,163,184,0.75);
      padding:8px;
      background: rgba(2,6,23,0.35);
      cursor:pointer;
      transition: transform 0.05s ease, box-shadow 0.05s ease, border-color 0.1s ease, opacity 0.1s ease;
      text-align:left;
      white-space:nowrap;
      user-select:none;
      position:relative;
      overflow:hidden;
    }
    .mini-spot:hover{ transform: translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,0.7); border-color:#facc15; }
    .mini-spot:active{ transform: translateY(0); box-shadow:0 4px 10px rgba(0,0,0,0.5); }
    .mini-label{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; opacity:0.9; }
    .mini-amt{ margin-top:4px; font-weight:900; color:#f97316; font-size:0.85rem; }

    .mini-spot.disabled{ opacity:0.45; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
    .mini-spot.disabled:hover{ border-color: rgba(148,163,184,0.75) !important; }

    .come-row{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-top:8px; }
    .come-readonly{
      opacity:0.8;
      cursor:default;
      pointer-events:none;
    }

    /* Chip rack + buttons */
    .chip-bar{
      margin-top:10px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:left;
    }

    /* Casino chip */
    .chip{
      --chip-base: #e5e7eb;
      --chip-ring: rgba(15,23,42,0.85);
      --chip-inserts: rgba(255,255,255,0.92);
      --chip-label: #111827;

      width:48px;
      height:48px;
      border-radius:999px;
      border:3px solid rgba(15,23,42,0.92);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      font-size:0.8rem;
      cursor:pointer;
      user-select:none;
      position:relative;
      transition: transform 0.05s ease, box-shadow 0.05s ease, outline 0.1s ease;

      background:
        radial-gradient(circle at 30% 28%,
          color-mix(in srgb, var(--chip-base) 92%, #000 8%) 38%,
          color-mix(in srgb, var(--chip-base) 72%, #000 28%) 100%
        );
    }

    .chip::before{
      content:"";
      position:absolute;
      inset:2px;
      border-radius:999px;
      pointer-events:none;
      background: repeating-conic-gradient(
        from 0deg,
        var(--chip-inserts) 0deg 10deg,
        transparent 10deg 20deg
      );
      -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 61% 100%);
              mask: radial-gradient(circle, transparent 0 60%, #000 61% 100%);
      opacity:0.95;
    }

    .chip::after{
      content:"";
      position:absolute;
      inset:7px;
      border-radius:999px;
      pointer-events:none;
      border:2px dashed var(--chip-ring);
      opacity:0.95;
    }

    .chip span{
      position:relative;
      z-index:1;
      color: var(--chip-label);
      text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    }

    .chip.selected{
      outline:2px solid #facc15;
      transform: translateY(-1px) scale(1.03);
      box-shadow:
        0 10px 22px rgba(0,0,0,0.95),
        inset 0 2px 8px rgba(255,255,255,0.10),
        inset 0 -10px 18px rgba(0,0,0,0.35);
    }

    /* --- Denomination colorways --- */
    .chip[data-chip="100"]{
      --chip-base: #f1f5f9;
      --chip-ring: rgba(15,23,42,0.85);
      --chip-inserts: rgba(15,23,42,0.85);
      --chip-label: #0f172a;
    }
    .chip[data-chip="500"]{
      --chip-base: #dc2626;
      --chip-ring: rgba(255,255,255,0.92);
      --chip-inserts: rgba(255,255,255,0.92);
      --chip-label: #ffffff;
    }
    .chip[data-chip="2500"]{
      --chip-base: #16a34a;
      --chip-ring: rgba(255,255,255,0.92);
      --chip-inserts: rgba(255,255,255,0.92);
      --chip-label: #ffffff;
    }
    .chip[data-chip="10000"]{
      --chip-base: #111827;
      --chip-ring: rgba(248,250,252,0.95);
      --chip-inserts: rgba(248,250,252,0.95);
      --chip-label: #f8fafc;
    }
    .chip[data-chip="50000"]{
      --chip-base: #7c3aed;
      --chip-ring: rgba(248,250,252,0.95);
      --chip-inserts: rgba(248,250,252,0.95);
      --chip-label: #f8fafc;
    }

    .controls{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; align-items:center; }
    button{
      border:none;
      border-radius:999px;
      padding:8px 14px;
      font-size:0.9rem;
      cursor:pointer;
      background:#16a34a;
      color:#f9fafb;
      font-weight:800;
      box-shadow:0 4px 12px rgba(0,0,0,0.4);
      transition: transform 0.05s ease, box-shadow 0.05s ease, background 0.1s ease;
      white-space:nowrap;
      user-select:none;
    }
    button.secondary{ background:#374151; }
    button.danger{ background:#b91c1c; }
    button:disabled{ opacity:0.5; cursor:not-allowed; box-shadow:none; }
    button:hover:not(:disabled){ transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,0.6); }
    button:active:not(:disabled){ transform: translateY(0); box-shadow:0 4px 12px rgba(0,0,0,0.4); }

    .chip-hint{ font-size:0.75rem; text-align:center; color:#e5e7eb; margin-top:6px; }

    /* Side-bets / Bonus toggles */
    .table-toggles{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
      margin: 10px 0 10px;
    }
    .table-toggles .toggle-label{
      font-size:0.75rem;
      letter-spacing:0.06em;
      text-transform:uppercase;
      color:#e5e7eb;
      opacity:0.9;
      margin-right:2px;
    }
    .is-hidden{ display:none !important; }


    /* Dice */
    .dice-display{
      display:flex; gap:12px; align-items:center; margin-top:4px; flex-wrap:wrap;
    }
    .die{
      width:64px; height:64px;
      border-radius:12px;
      background:#fff;
      border:2px solid #111827;
      display:flex; align-items:center; justify-content:center;
      color:#111827;
      font-weight:900;
      font-size:4.2rem;
      box-shadow:0 4px 12px rgba(0,0,0,0.6);
    }
    .total-display{ margin-left:8px; font-weight:900; }

    .status{ font-size:0.95rem; margin-top:6px; min-height:1.1em; }
    .status.good{ color:#4ade80; }
    .status.bad{ color:#f97373; }
    .status.neutral{ color:#e5e7eb; }

    #log{
      max-height: 280px;
      overflow-y:auto;
      font-size:0.85rem;
      border-radius:10px;
      background: rgba(0,0,0,0.6);
      padding:8px;
      border:1px solid rgba(255,255,255,0.06);
    }
    .log-entry{ margin-bottom:4px; }
    .log-entry span.total{ font-weight:900; }
    .log-entry.win{ color:#6ee7b7; }
    .log-entry.lose{ color:#fca5a5; }
    .log-entry.side{ color:#e5e7eb; }

    .money-win{ color:#6ee7b7; font-weight:900; }
    .money-lose{ color:#fca5a5; font-weight:900; }

    .btn-small{ padding:6px 10px; font-size:0.8rem; }

    .come-odds-bar{
      display:none;
      margin-top:10px;
      border-radius:16px;
      border:1px solid rgba(148,163,184,0.65);
      background: rgba(2,6,23,0.35);
      padding:10px;
      box-shadow: 0 6px 14px rgba(0,0,0,0.45);
    }
    .come-odds-bar.show{ display:block; }
    .come-odds-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:6px;
    }
    .come-odds-title{
      font-weight:900;
      letter-spacing:0.08em;
      text-transform:uppercase;
      font-size:0.8rem;
    }
    .come-odds-info{
      font-size:0.8rem;
      color:#e5e7eb;
      opacity:0.9;
      margin-bottom:8px;
    }
    .come-odds-actions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      justify-content:center;
    }
    .come-odds-actions button{
      background:#1d4ed8;
    }
    .come-odds-actions button.secondary{
      background:#374151;
    }

    /* Bonus trackers */
    .bonus-tracker{
      margin-top:6px;
      display:flex;
      flex-wrap:wrap;
      gap:4px;
      justify-content:center;
      align-items:center;
    }
    .bonus-pill{
      width:24px;
      height:22px;
      border-radius:8px;
      border:1px solid rgba(148,163,184,0.75);
      background: rgba(2,6,23,0.35);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      font-size:0.75rem;
      color:#e5e7eb;
      user-select:none;
    }
    .bonus-pill.hit{
      background: rgba(34,197,94,0.25);
      border-color: rgba(34,197,94,0.85);
      color:#d1fae5;
      box-shadow:0 0 0 1px rgba(34,197,94,0.15) inset;
    }
    .bonus-pill.dead{
      background: rgba(239,68,68,0.18);
      border-color: rgba(239,68,68,0.8);
      color:#fecaca;
    }

    /* --- HOT ROLL BORDER FX --- */
/* Border-only glow (no interior fill) via outline + drop-shadows. */
.roll-card{
  position: relative;
  border-radius: 16px; /* keep in sync with .card */
  overflow: visible;   /* allow glow outside */
}

.roll-card::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: calc(16px + 10px);
  pointer-events:none;
  opacity:0;
  border: 2px solid rgba(255,255,255,0.06);
  transition: opacity 250ms ease;
  animation: hotPulse 1.6s ease-in-out infinite;
  z-index: 5;
}

.roll-card.hot-1::after{
  opacity:0.95;
  box-shadow:
    0 0 18px rgba(255,200,80,0.65),
    0 0 42px rgba(255,140,60,0.45);
}

.roll-card.hot-2::after{
  opacity:1;
  box-shadow:
    0 0 22px rgba(255,220,110,0.75),
    0 0 52px rgba(255,120,60,0.60),
    0 0 80px rgba(255,60,50,0.35);
}

.roll-card.hot-3::after{
  opacity:1;
  box-shadow:
    0 0 26px rgba(255,235,140,0.85),
    0 0 64px rgba(255,150,85,0.75),
    0 0 110px rgba(255,40,40,0.55);
  animation: hotPulse 1.2s ease-in-out infinite;
}

/* ===== Leaderboard modal ===== */
.hidden { display:none !important; }

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:9999;
}
.modal{
  width:min(920px, 100%);
  max-height: min(80vh, 760px);
  overflow:hidden;
  background: var(--card, #111);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display:flex;
  flex-direction:column;
}
.modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 10px 16px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.modal-controls{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px 12px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  flex-wrap:wrap;
}
.modal-body{
  padding:14px 16px;
  overflow:auto;
}
.modal-footer{
  padding:12px 16px 16px 16px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  border-top:1px solid rgba(255,255,255,0.08);
}
.btn-sm{
  padding:6px 10px;
  border-radius:10px;
  font-size:0.9rem;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 220px;
}
.field-label{ font-size:0.9rem; opacity:0.8; }
.text-input{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: inherit;
  outline:none;
}
.text-input:focus{
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
}
.tabs{
  display:flex;
  gap:8px;
  align-items:center;
}
.tab{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: inherit;
  cursor:pointer;
  font-weight:700;
  font-size:0.95rem;
}
.tab.active{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.30);
}
.lb-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.98rem;
}
.lb-table th, .lb-table td{
  padding:10px 8px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  text-align:left;
  vertical-align:top;
}
.lb-table thead th{
  position:sticky;
  top:0;
  background: rgba(20,20,20,0.95);
  backdrop-filter: blur(6px);
  z-index:1;
}
.lb-table tbody tr:hover td{
  background: rgba(255,255,255,0.04);
}


@keyframes hotPulse{
  0%,100%{ transform: scale(1.00); }
  50%{ transform: scale(1.02); }
}




    @media (min-width: 860px){
      .table-places-grid{
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap:8px;
        overflow:visible;
        padding-bottom:0;
      }
      .payout-col{
        flex:none;
        width:auto;
        min-width:120px;
      }
    }

    @media (min-width: 860px){
      .table-places-grid{
        display:grid;
        grid-template-columns: repeat(7, minmax(110px, 1fr));
        gap:8px;
        overflow:visible;
        padding-bottom:0;
      }
      .payout-col{
        flex:none;
        width:auto;
        min-width:110px;
      }
      .table-places-grid .payout-col:last-child{
        grid-column: 1 / -1;
        justify-self: center;
        width: fit-content;
      }
    }

    @media (min-width: 900px){
      .table-sides [data-bet="field"],
      .table-sides [data-bet="short"],
      .table-sides [data-bet="long"],
      .table-sides [data-bet="shitshow"]{
        grid-column: 1 / -1;
      }
    }


    @media (min-width: 1100px){
      .app{
        max-width:1280px;
        display:grid;
        grid-template-columns: 1fr 360px;
        gap:12px;
        align-items:start;
      }

      #headerCard{ grid-column: 1 / -1; }

      #rollCard{
        grid-column: 1;
        position: sticky;
        top: 12px;
        z-index: 20;
      }

      #tableCard{ grid-column: 1; }

      #logCard{
        grid-column: 2;
        grid-row: 2 / span 2;
        position: sticky;
        top: 12px;
        align-self: start;
      }

      #log{
        max-height: none;
        height: calc(100vh - 180px);
        overflow-y:auto;
      }
    }

    @media (max-width: 820px){
      .table-felt{ grid-template-columns: 1fr; }
    }
    @media (max-width: 480px){
      /* prevent any single control button from forcing horizontal overflow */
      .controls button{
        max-width: 100%;
        white-space: normal;      /* allow label wrap on small screens */
        overflow-wrap: anywhere;
      }
      /* same for any other wide buttons in tight rows */
      .stat-row button{
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
      }
      .bet-spot{
        max-width: 300px;
      }
      .table-places{
        overflow: scroll;
      }
    }