/* ===== Sic Bo — game styles =====
   Extends the shared glass casino theme with a red-and-gold felt.
   Namespaced .sb-* so nothing clashes with .c-* or the roulette .rt-*
   rules riding on the same glass.css. */

.sb-table { padding: 14px clamp(10px, 3vw, 26px) 22px; }

.sb-wrap {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "cup"
    "felt"
    "ctrl";
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

/* ---------- Dice cup ---------- */
.sb-cup {
  grid-area: cup;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 18px;
  background:
    radial-gradient(60% 80% at 50% 30%, rgba(255, 216, 112, .08) 0%, transparent 65%),
    var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.sb-dice { display: flex; gap: 22px; padding: 8px 0 14px; }

/* Each die is a perspective viewport containing a CSS 3D cube built from
   six absolutely-positioned faces. `transform-style: preserve-3d` on the
   cube lets the faces render in true 3D; `perspective` on the wrapper
   gives us the vanishing-point foreshortening. Face-to-angle mapping
   lives in JS (FACE_ROT) so a roll just sets the target rotation and the
   CSS transition does the tumbling. */
.sb-die {
  --sz: 76px;
  --hz: calc(var(--sz) / 2);
  position: relative;
  width: var(--sz);
  height: var(--sz);
  perspective: 900px;
  -webkit-perspective: 900px;
}
/* Soft ground shadow: grows when the die is at rest, shrinks while it hops. */
.sb-die::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -14px;
  width: var(--sz); height: 12px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, transparent 68%);
  filter: blur(3px);
  opacity: .9;
  transition: transform .18s ease, opacity .18s ease;
  z-index: -1;
}
.sb-cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(.15, .85, .28, 1);
  will-change: transform;
}
.sb-face {
  position: absolute;
  /* Extend each face 1px past its cube edge so two adjacent faces overlap
     along the shared seam. Without this the browser rasterises the two
     edges with a hair-thin sub-pixel gap, visible as a bright line down
     the middle of the die during the tumble. */
  inset: -1px;
  border-radius: 14px;
  background: linear-gradient(160deg, #ffffff 0%, #dedac8 100%);
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .12), inset 0 6px 10px rgba(255, 255, 255, .8), 0 0 0 1px rgba(0, 0, 0, .18);
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sb-face i { display: block; width: 100%; height: 100%; border-radius: 50%; background: transparent; }
.sb-face i.on { background: radial-gradient(circle at 30% 30%, #4a4a4a 0%, #0e0e14 60%, #000 100%); }
/* Face placement: front/back/left/right/top/bottom of the cube.
   Numbering follows the standard western die so opposite faces sum to 7
   (1↔6, 2↔5, 3↔4). Because the outer faces have `border-radius: 14px`, the
   cube's eight physical corners are not covered by any face — the
   `.sb-core` cube below fills those diagonal wedges. */
.sb-face--1 { transform: translateZ(var(--hz)); }
.sb-face--6 { transform: rotateY(180deg) translateZ(var(--hz)); }
.sb-face--2 { transform: rotateY(90deg)  translateZ(var(--hz)); }
.sb-face--5 { transform: rotateY(-90deg) translateZ(var(--hz)); }
.sb-face--3 { transform: rotateX(90deg)  translateZ(var(--hz)); }
.sb-face--4 { transform: rotateX(-90deg) translateZ(var(--hz)); }

/* Inner core cube — a same-shaped but slightly smaller (inset 1px) box of
   faces sitting 1px behind the visible ones. Its occlusion comes NOT from
   being solid but from painting on BOTH sides (backface-visibility is
   visible, the CSS default): a sight line entering an outer corner hole
   passes the aligned core hole and is stopped by the inner surface of one
   of the far core planes. The core is rounded to match the die silhouette
   so that, at rest, none of its corners poke past the ivory faces — a
   square core reads as ugly right-angle tabs sticking out underneath. */
.sb-core {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  pointer-events: none;
}
.sb-core > div {
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  background: linear-gradient(160deg, #6e5c46 0%, #4a3b2a 100%);
}
.sb-core > div:nth-child(1) { transform: translateZ(calc(var(--hz) - 1px)); }
.sb-core > div:nth-child(2) { transform: rotateY(90deg)  translateZ(calc(var(--hz) - 1px)); }
.sb-core > div:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--hz) - 1px)); }
.sb-core > div:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--hz) - 1px)); }
.sb-core > div:nth-child(5) { transform: rotateX(90deg)  translateZ(calc(var(--hz) - 1px)); }
.sb-core > div:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--hz) - 1px)); }

/* While rolling, the die hops a couple of times above the table. The cube
   inside is doing its own rotation via the CSS transition; the hop on the
   wrapper layers a vertical bounce on top of the tumble. */
.sb-die.rolling { animation: sb-hop 1.5s ease-out; }
.sb-die.rolling::after { transform: translateX(-50%) scale(.6); opacity: .35; }
.sb-die[data-slot="1"].rolling { animation-duration: 1.55s; }
.sb-die[data-slot="2"].rolling { animation-duration: 1.7s; }
@keyframes sb-hop {
  0%   { transform: translateY(0); }
  18%  { transform: translateY(-28px); }
  42%  { transform: translateY(0); }
  58%  { transform: translateY(-14px); }
  76%  { transform: translateY(0); }
  88%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

.sb-message {
  min-height: 22px;
  font-size: 15px;
  text-align: center;
  color: var(--c-text);
}
.sb-message.win  { color: #78f0a4; text-shadow: 0 0 12px rgba(120, 240, 164, .35); }
.sb-message.lose { color: #ffa0a0; }

/* ---------- Felt ---------- */
.sb-felt {
  grid-area: felt;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 216, 112, .06) 0%, transparent 55%),
    linear-gradient(180deg, #8b0f2a 0%, #4a0513 100%);
  border: 1px solid rgba(0, 0, 0, .5);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, .55),
    0 10px 30px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; gap: 10px;
  overflow-x: auto;
}
.sb-row { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-row--bigsmall .sb-cell { flex: 1 1 200px; min-width: 160px; height: 60px; }
.sb-row--tot .sb-cell { flex: 1 1 60px; min-width: 48px; }
.sb-row--triples .sb-cell, .sb-row--die .sb-cell { flex: 1 1 90px; min-width: 76px; }
.sb-row--any .sb-cell { flex: 1 1 100%; height: 42px; }

.sb-cell {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  height: 46px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .5));
  border: 1px solid rgba(255, 216, 112, .35);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: transform .08s ease, box-shadow .1s ease, filter .1s ease;
}
.sb-cell:hover { filter: brightness(1.2); }
.sb-cell:active { transform: translateY(1px); }
.sb-cell.dragover { outline: 2px dashed #ffd870; outline-offset: 2px; filter: brightness(1.35); }
.sb-lbl { letter-spacing: .04em; font-size: 12px; }
.sb-odds {
  font-size: 11px;
  color: #ffd870;
  opacity: .9;
  font-weight: 800;
}
.sb-cell--big   { background: linear-gradient(180deg, #a3182f 0%, #55061a 100%); }
.sb-cell--small { background: linear-gradient(180deg, #1a5aa8 0%, #06264f 100%); }
.sb-cell--anyt  { background: linear-gradient(180deg, #b48b22 0%, #4c3503 100%); justify-content: center; gap: 22px; }
.sb-cell--tot   { flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px; }
.sb-cell--tot .sb-lbl { font-size: 15px; }
.sb-cell--tot .sb-odds { font-size: 10px; }
.sb-cell--trip  { flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sb-cell--die   { flex-direction: row; align-items: center; justify-content: center; gap: 8px; }

/* Pip preview inside triple/die cells */
.sb-pips {
  display: grid;
  grid-template-columns: repeat(3, 6px);
  grid-template-rows: repeat(3, 6px);
  gap: 1px;
}
.sb-pips i { display: block; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.sb-pips i.on { background: #ffd870; }

/* Chip stack badge overlaid on a bet cell */
.sb-stack {
  position: absolute;
  bottom: 3px; right: 3px;
  min-width: 22px; height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ffd870;
  color: #3b2600;
  font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .15);
  pointer-events: none;
}
.sb-stack.big { background: #d4a017; color: #1a1100; }

/* Winner ring */
.sb-cell.winner::after {
  content: "";
  position: absolute; inset: -3px;
  border: 2px solid #ffd870;
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(255, 216, 112, .55);
  pointer-events: none;
  animation: sb-pop .5s ease-out;
}
@keyframes sb-pop {
  0%   { transform: scale(.85); opacity: 0; }
  55%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.sb-felt.resolving .sb-cell:not(.winner) { opacity: .35; transition: opacity .3s ease; }
.sb-felt.resolving .sb-cell.winner      { opacity: 1; }

/* ---------- Bottom controls ---------- */
.sb-controls {
  grid-area: ctrl;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.sb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-chip {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .55);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35) 0%, transparent 55%),
    var(--chip, #666);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
  transition: transform .08s ease, box-shadow .1s ease;
  display: grid; place-items: center;
  padding: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.sb-chip:hover { transform: translateY(-1px); }
.sb-chip[aria-pressed="true"] {
  box-shadow: 0 0 0 3px #ffd870, 0 3px 10px rgba(0, 0, 0, .5);
  transform: translateY(-2px);
}
.sb-chip--clear, .sb-chip--repeat { background: #2b2f36; border-style: solid; font-size: 18px; }

.sb-roll {
  min-width: 130px;
  font-size: 15px;
  padding: 10px 22px;
  letter-spacing: .04em;
}
.sb-roll[disabled] { opacity: .45; cursor: not-allowed; }
.sb-roll.rolling   { animation: sb-throb 1s ease-in-out infinite; }
/* Floating chip clone that follows the pointer during a chip-to-felt drag. */
.sb-chip--ghost {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  transform: scale(1.15);
  opacity: .95;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .55);
  margin: 0;
  animation: none;
}
.sb-chip--ghost.over { transform: scale(1.28); box-shadow: 0 0 0 3px #ffd870, 0 10px 22px rgba(0, 0, 0, .55); }
@keyframes sb-throb {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .sb-die.rolling { animation: none; }
  /* With the hop gone there's no reason to shrink the ground shadow. */
  .sb-die.rolling::after { transform: translateX(-50%); opacity: .9; }
  /* Instant landing instead of a 1.5s 3D tumble. The cube still rotates to
     the winning face, just without any motion. */
  .sb-cube { transition-duration: .01s; }
  .sb-roll.rolling { animation: none; }
  .sb-cell.winner::after { animation: none; }
}