:root {
  --coin-diam: clamp(160px, 50vmin, 300px);
  --coin-depth: calc(var(--coin-diam) * 0.1);
  --spin-speed: 12s;
}

.coin-wrapper {
  height: var(--coin-diam);
  width: var(--coin-diam);
  margin: 1rem auto; /* Default margin */
  position: relative;
  -webkit-perspective: 1000;
  perspective: 1000px;
}

/* --- BEHAVIOR-SPECIFIC RULES --- */

/* For spinning view, add margin to create space and apply the reflection */
.coin-wrapper.is-spinning {
  margin-top: 50px;
  margin-bottom: 50px;
  -webkit-box-reflect: below 0 linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0) 45%, hsla(0,0%,100%,0.2));
  filter: saturate(1.45) hue-rotate(2deg);
}

.coin-wrapper.is-spinning .coin {
  animation: spin var(--spin-speed) infinite linear;
}

/* For interactive view, no reflection, just cursor styles */
.coin-wrapper.is-interactive .coin {
  cursor: grab;
  transition: transform 0.1s ease-out;
}
.coin-wrapper.is-interactive .coin.dragging {
  cursor: grabbing;
  transition: none;
}

.coin-wrapper.is-flippable {
  margin-top: 50px;
  margin-bottom: 50px;
}


/* --- V5 - FINAL POLISH & TIMING FIXES --- */

/* 1. The 3D Toss Animation Keyframes (Unchanged) */
@keyframes flip-heads {
  0%   { transform: rotateY(0deg) scale(1); }
  /* NEW VALUE: 1080 is 3 * 360, so it will show the front face (Heads) */
  50%  { transform: rotateY(1080deg) scale(1.6); } 
  100% { transform: rotateY(1800deg) scale(1); }
}

@keyframes flip-tails {
  0%   { transform: rotateY(0deg) scale(1); }
  /* NEW VALUE: Now matches flip-heads, so it will also show the front face (Heads) */
  50%  { transform: rotateY(1080deg) scale(1.6); } 
  100% { transform: rotateY(1980deg) scale(1); }
}
/* 2. 2D Wrapper Spin (Unchanged) */
@keyframes rotate-2d-wrapper {
  from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); }
}



/* 4. Screen Shake & Particle Keyframes (Unchanged) */
@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, 2px); }
  50% { transform: translate(2px, -2px); } 75% { transform: translate(-2px, -2px); }
}
@keyframes particle-burst {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--x-end), var(--y-end)) scale(0); opacity: 0; }
}

/* --- CSS Classes to Trigger Animations & Effects --- */

/* Toss animation classes (Unchanged) */
.coin.animate-heads, .coin.animate-tails {
  animation-duration: 3s; animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1);
  animation-fill-mode: forwards;
}
.coin.animate-heads { animation-name: flip-heads; }
.coin.animate-tails { animation-name: flip-tails; }

/* NEW SPARKLE ANIMATION */
@keyframes sparkle-pop {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(10deg); opacity: 1; } /* Pop! */
  100% { transform: scale(0) rotate(20deg); opacity: 0; }
}

/* Wrapper spin class (Unchanged) */
.coin-wrapper.result-spinning {
  animation: rotate-2d-wrapper 5s linear infinite;
}

/* 1. Base styles for both parts of the sparkle */
.coin .front::before, .coin .front::after,
.coin .back::before, .coin .back::after {
    content: '';
    position: absolute;
    bottom: 37%;     /* Position the sparkle up and to the right */
    left: 60%;
    background: white;
    /* A subtle glow effect */
    box-shadow: 0 0 3px white, 0 0 6px #ffeeaa; 
    border-radius: 2px; /* Soften the ends of the sparkle */
    opacity: 0;
    transform-origin: center center;
}

/* 2. Shape for the horizontal bar of the sparkle */
.coin .front::before, .coin .back::before {
    width: 25px;
    height: 4px;
    margin-left: -12.5px; /* Center the element on its origin */
    margin-top: -2px;
}

/* 3. Shape for the vertical bar of the sparkle */
.coin .front::after, .coin .back::after {
    width: 4px;
    height: 25px;
    margin-left: -2px;
    margin-top: -12.5px; /* Center the element on its origin */
}

/* 4. Trigger the animation when the .is-shining class is added */
.coin.is-shining .front::before, .coin.is-shining .front::after,
.coin.is-shining .back::before, .coin.is-shining .back::after {
    animation: sparkle-pop 0.4s ease-in-out;
}

/* Screen shake class (Unchanged) */
body.shaking { animation: screen-shake 0.2s linear; }

/* Particle styles - NO LONGER HIDING BEHIND THE COIN */
.particle-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    pointer-events: none; /* Allows clicks to pass through */
    z-index: 10; /* Ensures particles are on top */
}
.particle {
    position: absolute;
    width: 5px; height: 5px; background: #ccc;
    border-radius: 50%; animation: particle-burst 1s ease-out forwards;
}

/* Base Coin Styles */
.coin {
  height: var(--coin-diam);
  width: var(--coin-diam);
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: 50%;
}

@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

/* (The rest of your .face, .spoke, etc. styles remain unchanged) */

/* Faces */
.coin .front,
.coin .back {
  position: absolute;
  height: var(--coin-diam);
  width: var(--coin-diam);
  border-radius: 50%;
  background-size: cover;
  backface-visibility: hidden; /* Important for 3D objects */
}

.coin .front {
  transform: translateZ(calc(var(--coin-depth) / 2));
}

.coin .back {
  transform: translateZ(calc(var(--coin-depth) / -2)) rotateY(180deg);
}

/* The Side */
.coin .side {
  transform: translateX(calc(var(--coin-diam) * 0.45));
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.coin .side .spoke {
  height: var(--coin-diam);
  width: var(--coin-depth);
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.coin .side .spoke:before,
.coin .side .spoke:after {
  content: '';
  display: block;
  
  /* --- THIS IS THE FIX --- */
  /* This formula perfectly calculates the height of one of 32 facets */
  /* based on the coin's diameter, just like the original LESS code. */
  height: calc(var(--coin-diam) * 0.098017);

  width: var(--coin-depth);
  position: absolute;
  transform: rotateX(84.375deg); /* This angle is also derived from the 32-facet geometry */
  background: linear-gradient(
    to bottom,
    var(--coin-edge-top, hsl(42, 60%, 75%)) 0%,
    var(--coin-edge-top, hsl(42, 60%, 75%)) 74%,
    var(--coin-edge-bottom, hsl(42, 40%, 60%)) 75%,          
    var(--coin-edge-bottom, hsl(42, 40%, 60%)) 100%
  );
  background-size: 100% 28.125%; /* This texturing is fine to keep */
}

.coin .side .spoke:before {
  transform-origin: top center;
}

.coin .side .spoke:after {
  bottom: 0;
  transform-origin: center bottom;
}

/* This is the unrolled loop from your LESS file for the 16 spokes */
.coin .side .spoke:nth-child(1) { transform: rotateY(90deg) rotateX(11.25deg); }
.coin .side .spoke:nth-child(2) { transform: rotateY(90deg) rotateX(22.5deg); }
.coin .side .spoke:nth-child(3) { transform: rotateY(90deg) rotateX(33.75deg); }
.coin .side .spoke:nth-child(4) { transform: rotateY(90deg) rotateX(45deg); }
.coin .side .spoke:nth-child(5) { transform: rotateY(90deg) rotateX(56.25deg); }
.coin .side .spoke:nth-child(6) { transform: rotateY(90deg) rotateX(67.5deg); }
.coin .side .spoke:nth-child(7) { transform: rotateY(90deg) rotateX(78.75deg); }
.coin .side .spoke:nth-child(8) { transform: rotateY(90deg) rotateX(90deg); }
.coin .side .spoke:nth-child(9) { transform: rotateY(90deg) rotateX(101.25deg); }
.coin .side .spoke:nth-child(10) { transform: rotateY(90deg) rotateX(112.5deg); }
.coin .side .spoke:nth-child(11) { transform: rotateY(90deg) rotateX(123.75deg); }
.coin .side .spoke:nth-child(12) { transform: rotateY(90deg) rotateX(135deg); }
.coin .side .spoke:nth-child(13) { transform: rotateY(90deg) rotateX(146.25deg); }
.coin .side .spoke:nth-child(14) { transform: rotateY(90deg) rotateX(157.5deg); }
.coin .side .spoke:nth-child(15) { transform: rotateY(90deg) rotateX(168.75deg); }
.coin .side .spoke:nth-child(16) { transform: rotateY(90deg) rotateX(180deg); }