/* The casino coin (js/coin.js): a struck gold token in CSS 3D. Size comes from
   --cf-size (default 168px; 72px chips up to a 240px hero all hold up). The
   metal keeps its own colour stops, money gold on the page stays --gold.
   The toss is Web Animations on transform, opacity and filter only; nothing here
   loops, so there is nothing to switch off under prefers-reduced-motion.
   A promo coin is lit like the real thing: its own photo, a holo layer masked by
   a map drawn from that photo (scripts/coin_foil.py), and the pointer tilt vars
   (--rx --ry --nx --ny --tilt, set by tiltCoin) move the spectrum and the glare.
   Never put a filter on .cf-coin or .cf-tilt: Safari draws the back face through. */

/* ---------- stage: the table under the coin ---------- */
.cf-coin-stage {
  --cf-size: 168px;
  --cf-headroom: 0.42; /* room above the coin for the toss, in coin widths */
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--cf-size) * 1.32);
  max-width: 100%;
  padding: calc(var(--cf-size) * var(--cf-headroom)) 0 calc(var(--cf-size) * 0.12);
  margin-inline: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cf-coin-stage > .cf-coin,
.cf-coin-stage > .cf-shadow { grid-area: 1 / 1; }

/* A soft ellipse on the table. The toss rewrites its transform, opacity and blur
   so it shrinks, thins and softens as the coin climbs. */
.cf-shadow {
  place-self: center;
  width: calc(var(--cf-size, 168px) * 1);
  height: calc(var(--cf-size, 168px) * 1);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.78) 0 80%, rgb(0 0 0 / 0) 100%);
  opacity: 0.62;
  transform: translate(calc(var(--cf-size, 168px) * 0.045), calc(var(--cf-size, 168px) * 0.075)) scale(0.98);
  filter: blur(calc(var(--cf-size, 168px) * 0.018));
  pointer-events: none;
}

/* ---------- the coin ---------- */
.cf-coin {
  --cf-t: max(3px, calc(var(--cf-size, 168px) * 0.085)); /* thickness */
  --cf-edge-lo: #6f4a10;
  --cf-edge-mid: #c99a34;
  --cf-edge-hi: #f6dc8b;
  position: relative;
  display: block;
  flex: none;
  width: var(--cf-size, 168px);
  height: var(--cf-size, 168px);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: perspective(calc(var(--cf-size, 168px) * 5)) rotateX(0deg);
  -webkit-tap-highlight-color: transparent;
}
.cf-coin[data-rest="tails"] { transform: perspective(calc(var(--cf-size, 168px) * 5)) rotateX(180deg); }
/* The pointer tilt lives one level in, so it never fights the toss for a transform.
   While a finger or mouse holds it the coin follows at once; released, it eases home. */
.cf-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx, var(--rx0, 0)) * 1deg)) rotateY(calc(var(--ry, var(--ry0, 0)) * 1deg));
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cf-coin.is-held .cf-tilt { transition: none; }
/* promo coins take their rim from their own tint: a paler metal band for metal and
   foil, a moulded plastic edge for plastic */
.cf-coin.cf-custom {
  --cf-tint: #9a9484;
  --cf-edge-hi: color-mix(in oklab, var(--cf-tint) 28%, #f4f4f4);
  --cf-edge-mid: color-mix(in oklab, var(--cf-tint) 45%, #8c8c8c);
  --cf-edge-lo: color-mix(in oklab, var(--cf-tint) 35%, #181818);
  --cf-t: max(3px, calc(var(--cf-size, 168px) * 0.07));
  touch-action: none;
}
.cf-coin.cf-mat-plastic { --cf-edge-hi: color-mix(in oklab, var(--cf-tint) 30%, #444); --cf-edge-mid: color-mix(in oklab, var(--cf-tint) 40%, #1c1c1c); --cf-edge-lo: #0c0c0c; }

.cf-face {
  position: absolute;
  inset: 0;
  /* flat on purpose: a face is one plane, and its own backface is what hides it */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cf-front { transform: translateZ(calc(var(--cf-t) / 2)); }
.cf-back { transform: rotateX(180deg) translateZ(calc(var(--cf-t) / 2)); }
/* The face turned away is switched off as well as culled, so a coin at rest
   is right even where the 3D is flattened (a toss animates this per frame). */
.cf-coin[data-rest="heads"] .cf-back,
.cf-coin[data-rest="tails"] .cf-front { visibility: hidden; }

/* ---------- edge: a ring of reeded facets ---------- */
.cf-edge {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  pointer-events: none;
}
.cf-edge > i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cf-w);
  height: var(--cf-t);
  margin: calc(var(--cf-t) / -2) 0 0 calc(var(--cf-w) / -2);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    /* per-facet light, baked in by the script */
    linear-gradient(rgb(0 0 0 / var(--s, 0.2)), rgb(0 0 0 / var(--s, 0.2))),
    /* chamfered lips top and bottom */
    linear-gradient(180deg, rgb(255 240 190 / 0.55), rgb(255 240 190 / 0) 16%, rgb(0 0 0 / 0) 82%, rgb(0 0 0 / 0.4)),
    /* the reeding */
    repeating-linear-gradient(90deg,
      var(--cf-edge-hi) 0 calc(var(--cf-size, 168px) * 0.0035),
      var(--cf-edge-mid) calc(var(--cf-size, 168px) * 0.0035) calc(var(--cf-size, 168px) * 0.0075),
      var(--cf-edge-lo) calc(var(--cf-size, 168px) * 0.0075) calc(var(--cf-size, 168px) * 0.0105));
}

.cf-mat-plastic .cf-edge > i {
  background:
    linear-gradient(rgb(0 0 0 / var(--s, 0.2)), rgb(0 0 0 / var(--s, 0.2))),
    linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 22%, rgb(0 0 0 / 0) 70%, rgb(0 0 0 / 0.45)),
    linear-gradient(180deg, var(--cf-edge-mid), var(--cf-edge-lo) 55%, var(--cf-edge-mid) 56%, var(--cf-edge-lo));
}
.cf-mat-metal .cf-edge > i {
  background:
    linear-gradient(rgb(0 0 0 / var(--s, 0.2)), rgb(0 0 0 / var(--s, 0.2))),
    linear-gradient(180deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0) 18%, rgb(0 0 0 / 0) 78%, rgb(0 0 0 / 0.4)),
    repeating-linear-gradient(90deg, var(--cf-edge-hi) 0 calc(var(--cf-size, 168px) * 0.003), var(--cf-edge-mid) calc(var(--cf-size, 168px) * 0.003) calc(var(--cf-size, 168px) * 0.006), var(--cf-edge-lo) calc(var(--cf-size, 168px) * 0.006) calc(var(--cf-size, 168px) * 0.0085));
}

/* ---------- a face, flat ---------- */
.cf-face-flat {
  /* Laid out at twice the size and scaled back: engines rasterise a tilted 3D
     layer at 1x, which turns the emboss into stair-steps on a phone screen. */
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  display: block;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  /* the chamfer: lit from the upper left */
  background: linear-gradient(140deg, #fff4c4 0%, #e3b954 22%, #a9782a 52%, #6a4510 80%, #4a2e08 100%);
}
/* a struck field, sunk inside the rim: gold sweeps with two lobes, lathe rings under it */
.cf-field {
  position: absolute;
  inset: 6.2%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.055) 0 1px, rgb(0 0 0 / 0.07) 1px 2.2px),
    radial-gradient(circle at 34% 28%, rgb(255 244 200 / 0.35), rgb(255 244 200 / 0) 52%),
    conic-gradient(from 25deg at 50% 50%,
      #c8982f 0deg, #eccb6e 34deg, #f9e6a3 58deg, #d4a640 92deg, #a07220 132deg,
      #8a5f17 160deg, #b8862a 196deg, #e7c165 236deg, #f7dd93 262deg, #cf9f38 300deg,
      #a97b25 332deg, #c8982f 360deg);
  box-shadow:
    inset 3px 5px 6px rgb(40 22 2 / 0.5),
    inset -2px -3px 3px rgb(255 236 170 / 0.4),
    0 0 0 1.2px rgb(40 22 2 / 0.55);
}
/* the rim's highlight line where the chamfer meets the air */
.cf-lip {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgb(255 246 205 / 0.55),
    inset 2px 3px 2px rgb(255 250 220 / 0.5),
    inset -2px -3px 3px rgb(30 16 2 / 0.4);
}

/* ---------- house coin artwork: Meowth, struck (js/coin.js houseFace) ----------
   The beads, rings and legends are vector; the emblem is the relief sheet
   assets/casino/house-coin-v1.webp (heads left, tails right), clipped to the
   field and laid over it. */
.cf-art-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cf-beads, .cf-beads-sh, .cf-inner-ring { fill: none; }
.cf-beads, .cf-beads-sh {
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-dasharray: 0.01 6.928;
}
.cf-beads { stroke: #f4d97f; }
.cf-beads-sh { stroke: rgb(58 32 4 / 0.7); }
.cf-inner-ring { stroke: rgb(70 42 6 / 0.5); stroke-width: 1.1; }
.cf-legend {
  font-family: var(--font, "Bricolage Grotesque", system-ui, sans-serif);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.7px;
  fill: #6d4710;
}
.cf-legend-low { font-size: 12.5px; letter-spacing: 3.2px; }
.cf-legend-sh { fill: rgb(255 240 178 / 0.75); }
.cf-emblem { pointer-events: none; }

/* ---------- promo coin: the real coin's photo, lit ----------
   The photo already holds the coin's own rim, so it fills the face; the lip adds
   the bevel's light. The photo file holds both faces (obverse left), --mpos picks one. */
.cf-has-art { background: #0b0a09; }
.cf-photo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--art) var(--mpos, 0 0) / 200% 100% no-repeat;
}
.cf-has-art .cf-lip {
  box-shadow:
    inset 0 0 0 1.5px rgb(0 0 0 / 0.55),
    inset 0 0 0 3px rgb(255 255 255 / 0.1),
    inset 3px 5px 5px rgb(255 255 255 / 0.18),
    inset -3px -5px 7px rgb(0 0 0 / 0.38);
}

/* The holo: a spectrum that slides over the coin's map, so it shows only where the
   real coin is reflective. Masked container, oversized child moved by transform. */
.cf-holo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: var(--map);
  mask-image: var(--map);
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-position: var(--mpos, 0 0);
  mask-position: var(--mpos, 0 0);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: hard-light;
  opacity: calc(var(--cf-rest, 0.5) + var(--tilt, 0) * 0.3);
}
.cf-holo > i {
  position: absolute;
  left: -100%;
  top: -100%;
  width: 300%;
  height: 300%;
  --p: calc(var(--cf-size, 168px) * 1.7); /* one spectrum, in this face's 2x pixels */
  background:
    radial-gradient(circle calc(var(--cf-size, 168px) * 0.95) at 50% 50%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 100%),
    repeating-linear-gradient(112deg,
      hsl(350 100% 62%) 0, hsl(32 100% 58%) calc(var(--p) * 0.14), hsl(58 100% 60%) calc(var(--p) * 0.28),
      hsl(140 100% 56%) calc(var(--p) * 0.42), hsl(186 100% 58%) calc(var(--p) * 0.56),
      hsl(230 100% 66%) calc(var(--p) * 0.7), hsl(292 100% 64%) calc(var(--p) * 0.84), hsl(350 100% 62%) var(--p));
  /* the light sits at the pointer: the spectrum slides against the tilt */
  transform: translate(
    calc(var(--nx, -0.35) * var(--cf-size, 168px) * -1.5),
    calc(var(--ny, -0.4) * var(--cf-size, 168px) * -1.1));
}
/* struck metal is a mirror: one broad bright band, silvery, no rainbow bars */
.cf-fin-metal { --cf-rest: 0.7; }
.cf-fin-metal .cf-holo > i {
  background:
    linear-gradient(112deg, rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0.55) 44%, rgb(255 255 255 / 0.95) 50%, rgb(255 255 255 / 0.55) 56%, rgb(255 255 255 / 0) 66%),
    linear-gradient(112deg, rgb(150 190 255 / 0.18) 38%, rgb(255 200 150 / 0.2) 62%);
}
.cf-fin-foil { --cf-rest: 0.8; }
.cf-fin-plastic { --cf-rest: 0.75; }
.cf-fin-plastic .cf-holo > i { filter: saturate(0.75); }

/* ---------- light on the face (rewritten during a toss) ---------- */
.cf-shade {
  position: absolute;
  inset: 0;
  background: #0b0703;
  opacity: 0.04;
  pointer-events: none;
}
.cf-sheen {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  background: linear-gradient(120deg,
    rgb(255 250 225 / 0) 35%, rgb(255 250 225 / 0.13) 45%, rgb(255 252 235 / 0.3) 50%,
    rgb(255 250 225 / 0.13) 55%, rgb(255 250 225 / 0) 65%);
  transform: translateY(calc(var(--cf-size, 168px) * -0.68)); /* the face is laid out at 2x */
}
.cf-has-art .cf-sheen { opacity: 0.55; }
/* the varnish: a soft glare under the light (every real coin is glossy or polished) */
.cf-glare {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at calc(50% + var(--nx, -0.35) * 34%) calc(50% + var(--ny, -0.4) * 34%),
    rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.12) 34%, rgb(255 255 255 / 0) 62%);
  mix-blend-mode: overlay;
  opacity: calc(0.45 + var(--tilt, 0) * 0.4);
}
.cf-house .cf-glare { display: none; }
.cf-fin-metal .cf-glare { opacity: calc(0.6 + var(--tilt, 0) * 0.35); }
.cf-fin-plastic .cf-glare { opacity: calc(0.55 + var(--tilt, 0) * 0.35); }