/* Coinflip — extends dice.css */

.cf-coin-stage {
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 0 22px;
  min-height: 220px;
}

/* Outer wrapper handles vertical jump on flip; inner does the 3D rotation. */
.cf-coin-jumper {
  width: 160px;
  height: 160px;
  transform-style: preserve-3d;
  will-change: transform;
}
.cf-coin-jumper.flipping { animation: cfJump 1.7s cubic-bezier(0.4, 0.85, 0.3, 1); }
@keyframes cfJump {
  0%   { transform: translateY(0)    scale(1); }
  18%  { transform: translateY(-58px) scale(1.06); }
  55%  { transform: translateY(-22px) scale(1.02); }
  80%  { transform: translateY(-6px)  scale(1.005); }
  100% { transform: translateY(0)    scale(1); }
}

.cf-coin-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.7s cubic-bezier(0.18, 0.62, 0.32, 1);
}

/* Each disc slice (faces + edge rings) shares the base — JS sets --z. */
.cf-slice {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.cf-face {
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow:
    inset 0 -10px 18px rgba(0, 0, 0, 0.35),
    inset 0 8px 14px rgba(255, 255, 255, 0.22),
    inset 0 0 0 3px rgba(255, 255, 255, 0.08),
    0 18px 36px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.35);
}
.cf-heads {
  background: radial-gradient(circle at 30% 22%, #ffe98a 0%, #f5b542 55%, #8a5e10 100%);
  transform: translateZ(var(--z, 0px));
}
.cf-tails {
  background: radial-gradient(circle at 30% 22%, #f4f6fc 0%, #9aa3b8 55%, #2c3344 100%);
  transform: translateZ(var(--z, 0px)) rotateY(180deg);
}

/* Cylindrical-edge slices stacked between the faces — give the coin real 3D
   thickness so you see a metallic rim during the spin. */
.cf-edge {
  /* Slightly inset so the front/back faces fully obscure them when face-on. */
  inset: 1px;
  background:
    /* Subtle vertical band stripe to mimic milled edges */
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.0) 0,
      rgba(0,0,0,0.0) 4px,
      rgba(0,0,0,0.18) 4px,
      rgba(0,0,0,0.18) 5px
    ),
    radial-gradient(circle at 30% 22%, #d6dbe6 0%, #8b94a8 55%, #3a4258 100%);
  transform: translateZ(var(--z, 0px));
}

/* Specular highlight on each face — looks like a polished coin */
.cf-face::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,0.35), rgba(255,255,255,0) 45%);
  pointer-events: none;
}

.cf-face-art {
  width: 78%;
  height: 78%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  position: relative;
  z-index: 1;
}

/* Side toggle in the solo controls */
.cf-side-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  padding: 3px;
  gap: 3px;
}
.cf-side-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 0;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.cf-side-btn:hover { color: var(--text); }
.cf-side-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.cf-side-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.25);
}
.cf-side-h {
  background: radial-gradient(circle at 30% 25%, #ffe98a, #f5b542 60%, #8a5e10);
  color: #4d3608;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.cf-side-t {
  background: radial-gradient(circle at 30% 25%, #f4f6fc, #9aa3b8 55%, #2c3344);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

/* Mobile */
@media (max-width: 760px) {
  .cf-coin-stage { padding: 22px 0 10px; min-height: 170px; }
  .cf-coin-jumper { width: 124px; height: 124px; }
  @keyframes cfJump {
    0%   { transform: translateY(0)    scale(1); }
    18%  { transform: translateY(-40px) scale(1.05); }
    55%  { transform: translateY(-15px) scale(1.02); }
    100% { transform: translateY(0)    scale(1); }
  }
}