/* ── Flip (Heads & Tails) game styles ─────────────────────────────── */

/* ── Coin stage (ring + coin wrapper) ───────────────────────────────── */
.coin-stage {
  position: relative;
  width: 200px;
  height: 200px;
}

/* ── Coin scene (sits inside coin-stage, centred) ───────────────────── */
.coin-scene {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 160px;
  height: 160px;
  perspective: 900px;
}

.coin {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  border-radius: 50%;
  /* NOTE: never put `filter` or `overflow:hidden` on .coin — both flatten
     preserve-3d children and the back face would disappear. */
}
/* Elevation shadow lives on the (non-3D) scene wrapper so it can't break 3D. */
.coin-scene::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  bottom: -10px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.65) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ── Coin thickness (3D edge made of slats around Z axis) ───────────── */
.coin-edge {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.coin-edge-slat {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;       /* coin Z-thickness */
  height: 15px;      /* tangent chord ≈ 2*80*sin(5°)*1.05 */
  margin: -7.5px 0 0 -6px;
  background: linear-gradient(
    to right,
    #1a0d00 0%,
    #422006 18%,
    #92400e 35%,
    #d97706 50%,
    #fbbf24 60%,
    #92400e 80%,
    #1a0d00 100%
  );
  transform: rotateZ(var(--a)) translateX(80px) rotateY(90deg);
  backface-visibility: hidden;
  box-shadow: inset 0 1px 0 rgba(253,230,130,0.4);
}
/* Pulled-back tails-side hue band on every other slat for richer rim */
.coin-edge-slat:nth-child(2n) {
  background: linear-gradient(
    to right,
    #0a0f14 0%,
    #1e293b 18%,
    #475569 38%,
    #94a3b8 55%,
    #e2e8f0 65%,
    #475569 85%,
    #0a0f14 100%
  );
}

/* ── Coin face shared ────────────────────────────────────────────────── */
.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.coin-face.face-heads { transform: translateZ(6px); }
.coin-face.face-tails { transform: rotateY(180deg) translateZ(6px); }

/* ── Reeded edge (subtle milled ticks around the rim of each face) ──── */
.coin-reeded {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(0,0,0,0.20) 0deg 1deg,
    transparent 1deg 4deg
  );
  /* Show only on the outer rim band — fade everywhere else */
  -webkit-mask: radial-gradient(circle, transparent 80%, black 88%, black 97%, transparent 100%);
          mask: radial-gradient(circle, transparent 80%, black 88%, black 97%, transparent 100%);
}

/* ── Raised inner ring (coin rim) ────────────────────────────────────── */
.coin-inner-ring {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* ── Coin emblem (centred text) ──────────────────────────────────────── */
.coin-emblem {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.coin-main-char {
  display: block;
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
}

.coin-denomination {
  font-size: 3.2rem;
  letter-spacing: -3px;
}

.coin-legend {
  display: block;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 2px;
  opacity: 0.65;
}

/* ── HEADS face — premium gold ───────────────────────────────────────── */
.coin-face.face-heads {
  /* Layered gradients: specular highlight + edge shadow + warm gold base */
  background:
    radial-gradient(ellipse 56% 40% at 30% 24%, rgba(255,253,200,0.95) 0%, rgba(255,230,100,0) 58%),
    radial-gradient(ellipse 40% 30% at 72% 78%, rgba(110,55,0,0.45) 0%, transparent 55%),
    radial-gradient(circle at 48% 46%, #fde68a 0%, #f59e0b 30%, #d97706 58%, #92400e 100%);
  box-shadow:
    /* dark rim line — sits flush with the 3D slats */
    inset 0  0 0 2px #422006,
    inset 0  0 0 3px rgba(253,230,130,0.35),
    /* top-lit edge highlight */
    inset 0  4px 3px rgba(255,248,160,0.55),
    /* bottom shadow edge */
    inset 0 -4px 3px rgba(100,45,0,0.55),
    /* subtle inner relief showing raised centre */
    inset 0 0 22px rgba(0,0,0,0.22);
}

.coin-face.face-heads .coin-inner-ring {
  box-shadow:
    inset 0 0 0 2px rgba(255,240,140,0.30),
    0 0 0 1px rgba(100,50,0,0.35);
}

.coin-face.face-heads .coin-main-char {
  color: rgba(100,45,0,0.80);
  text-shadow:
    0  2px 2px rgba(255,235,120,0.70),
    0 -1px 1px rgba(80,35,0,0.50);
}

.coin-face.face-heads .coin-legend {
  color: rgba(100,45,0,0.70);
}

/* ── TAILS face — premium silver ─────────────────────────────────────── */
.coin-face.face-tails {
  background:
    radial-gradient(ellipse 56% 40% at 30% 24%, rgba(255,255,255,0.95) 0%, rgba(200,220,240,0) 58%),
    radial-gradient(ellipse 40% 30% at 72% 78%, rgba(40,60,85,0.40) 0%, transparent 55%),
    radial-gradient(circle at 48% 46%, #f1f5f9 0%, #94a3b8 38%, #64748b 68%, #334155 100%);
  box-shadow:
    inset 0  0 0 2px #1e293b,
    inset 0  0 0 3px rgba(200,220,240,0.30),
    inset 0  4px 3px rgba(255,255,255,0.65),
    inset 0 -4px 3px rgba(30,50,75,0.50),
    inset 0 0 22px rgba(0,0,0,0.20);
}

.coin-face.face-tails .coin-inner-ring {
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.28),
    0 0 0 1px rgba(30,50,75,0.30);
}

.coin-face.face-tails .coin-main-char {
  color: rgba(25,45,70,0.80);
  text-shadow:
    0  2px 2px rgba(255,255,255,0.75),
    0 -1px 1px rgba(20,40,65,0.45);
}

.coin-face.face-tails .coin-legend {
  color: rgba(30,50,80,0.65);
}

/* ── Coin glow on landing (added by JS at 11 s) ─────────────────────── */
.coin.landing-glow {
  filter: drop-shadow(0 0 28px rgba(251,191,36,0.65)) drop-shadow(0 0 60px rgba(251,191,36,0.3));
  transition: filter 1.8s ease;
}

/* ── SVG countdown ring ──────────────────────────────────────────────── */
.cring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* arc starts at 12 o'clock */
  pointer-events: none;
}
.cring-track {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 7;
}
.cring-progress {
  fill: none;
  stroke: #7c3aed;
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.95s linear, stroke 0.4s ease;
}
.cring-progress.cring-urgent  { stroke: #f59e0b; }
.cring-progress.cring-hidden  { opacity: 0; transition: opacity 0.4s; }

/* ── Big countdown number ────────────────────────────────────────────── */
.big-countdown {
  text-align: center;
  line-height: 1;
}
#big-countdown-num {
  display: block;
  font-size: 3.2rem;
  font-weight: 900;
  color: #c4b5fd;
  letter-spacing: -3px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: color 0.4s;
}
.big-countdown-label {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #52525b;
  margin-top: 3px;
}
.big-countdown.cring-urgent #big-countdown-num { color: #fbbf24; }

/* ── Side-pick buttons ──────────────────────────────────────────────── */
.side-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 2px solid transparent;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
}
.side-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.side-btn-heads {
  background: rgba(217,119,6,0.08);
  color: #fbbf24;
  border-color: rgba(217,119,6,0.2);
}
.side-btn-heads:hover:not(:disabled),
.side-btn-heads.active {
  background: rgba(217,119,6,0.18);
  border-color: #d97706;
  box-shadow: 0 0 16px rgba(217,119,6,0.25);
}
.side-btn-heads.active { color: #fde68a; }

.side-btn-tails {
  background: rgba(100,116,139,0.08);
  color: #94a3b8;
  border-color: rgba(100,116,139,0.2);
}
.side-btn-tails:hover:not(:disabled),
.side-btn-tails.active {
  background: rgba(100,116,139,0.18);
  border-color: #64748b;
  box-shadow: 0 0 16px rgba(100,116,139,0.2);
}
.side-btn-tails.active { color: #e2e8f0; }

/* ── BET / BET NEXT ROUND button ─────────────────────────────────────── */
#flip-btn {
  width: 100%;
  padding: 0.85rem;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s, opacity 0.15s, border-color 0.2s, color 0.2s;
  border: 2px solid transparent;
  cursor: pointer;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: white;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35);
  margin-top: 0.75rem;
}
#flip-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 6px 20px rgba(139,92,246,0.4);
  transform: translateY(-1px);
}
#flip-btn:active:not(:disabled) { transform: translateY(0); }
#flip-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Queued-for-next-round — amber filled */
#flip-btn.flip-btn-queued {
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 4px 14px rgba(217,119,6,0.35);
  border-color: transparent;
  opacity: 1;
}
#flip-btn.flip-btn-queued:hover:not(:disabled) {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 6px 20px rgba(245,158,11,0.4);
  transform: translateY(-1px);
}

/* Bet-next-round (not yet queued) — violet outline */
#flip-btn.flip-btn-next {
  background: transparent;
  border-color: rgba(124,58,237,0.45);
  color: #a78bfa;
  box-shadow: none;
  opacity: 1;
}
#flip-btn.flip-btn-next:hover:not(:disabled) {
  background: rgba(124,58,237,0.10);
  border-color: #7c3aed;
  transform: translateY(-1px);
}

/* ── Result flash ────────────────────────────────────────────────────── */
.result-pill {
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.result-win  { background: rgba(16,185,129,0.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.25); }
.result-loss { background: rgba(239,68,68,0.12);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); }

/* ── Shake on loss ───────────────────────────────────────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
}
.coin.shake { animation: shake 0.45s ease-in-out; }

/* ── Chip buttons ────────────────────────────────────────────────────── */
.chip-amt {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.12s, border-color 0.12s;
}
.chip-amt:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
.chip-amt.active { background: rgba(124,58,237,0.18); border-color: #7c3aed; color: #c4b5fd; }

/* ── History strip chips ─────────────────────────────────────────────── */
.history-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.history-chip-heads {
  background: rgba(217,119,6,0.12);
  color: #fbbf24;
  border: 1px solid rgba(217,119,6,0.25);
}
.history-chip-tails {
  background: rgba(100,116,139,0.12);
  color: #94a3b8;
  border: 1px solid rgba(100,116,139,0.25);
}

/* ── Live bets panel tabs ────────────────────────────────────────────── */
.tab-btn {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: none;
  cursor: pointer;
  transition: all 0.12s;
  background: transparent;
  color: #71717a;
}
.tab-btn-active {
  background: rgba(14,165,233,0.15);
  color: #38bdf8;
}

/* ── Live bet row ────────────────────────────────────────────────────── */
.bet-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.72rem;
  transition: background 0.2s;
}
.bet-row:hover { background: rgba(255,255,255,0.03); }
.bet-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; color: white;
  flex-shrink: 0;
}
.bet-username {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #a1a1aa;
}
.bet-choice-icon { font-size: 0.85rem; flex-shrink: 0; }
.bet-amount      { color: #e4e4e7; font-weight: 600; flex-shrink: 0; }
.bet-status-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,0.2); }
.bet-status-dot.placed { background: #a78bfa; }
.bet-status-dot.won    { background: #34d399; }
.bet-status-dot.lost   { background: #f87171; }
.bet-row.flash-win  { background: rgba(16,185,129,0.1); }
.bet-row.flash-loss { background: rgba(239,68,68,0.08); }

/* ── Phase label ─────────────────────────────────────────────────────── */
.phase-betting  { color: #a78bfa; }
.phase-flipping { color: #fbbf24; }
.phase-settling { color: #6ee7b7; }