/* Lila chat: the big centered stage for coins and dice (chance-stage.js builds it).
   The page behind fades into a dark red veil; the coin or die gets the middle of
   the screen. Coin faces and die faces come from chance.js (classes lc-*, cs__*). */

.cstage {
  --cs-floor: 74%;
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center; padding: 16px;
  opacity: 0; transition: opacity .32s ease;
  color: var(--bone, #f3e6ea);
  font-family: var(--font-body, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif);
  -webkit-user-select: none; user-select: none;
  outline: none;
}
.cstage.is-open { opacity: 1; }
.cstage.is-closing { opacity: 0; pointer-events: none; }
.cstage *, .cstage *::before, .cstage *::after { box-sizing: border-box; }

.cstage__veil {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 46%, rgba(78, 0, 18, .62) 0%, rgba(12, 0, 4, .9) 60%, rgba(0, 0, 0, .96) 100%);
  -webkit-backdrop-filter: blur(7px) saturate(.55); backdrop-filter: blur(7px) saturate(.55);
}

.cstage__panel {
  position: relative; width: min(100%, 520px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  transform: translateY(16px) scale(.96); transition: transform .45s cubic-bezier(.2, 1.25, .4, 1);
}
.cstage.is-open .cstage__panel { transform: none; }

.cstage__title {
  position: relative; z-index: 0; margin: 0;
  font: 600 clamp(21px, 5.6vw, 29px)/1.2 var(--font-name, "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif);
  letter-spacing: .08em; color: #ffd9de;
  text-shadow: 0 0 18px rgba(255, 51, 85, .65), 0 2px 0 #2a0008;
}
.cstage--offer .cstage__title { color: #ffe9ed; }

/* ---- the arena: rune circle on the floor, the object above it ---- */
.cstage__arena {
  position: relative; z-index: 2; width: 100%;
  height: clamp(230px, 42vh, 340px);
  perspective: 900px; perspective-origin: 50% 40%;
}
.cstage__floor {
  position: absolute; left: 50%; top: var(--cs-floor); width: 78%; height: 26%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 51, 85, .28), rgba(255, 51, 85, .08) 60%, transparent);
  pointer-events: none;
}
.cstage__ringwrap {
  position: absolute; left: 50%; top: var(--cs-floor);
  width: min(86vw, 420px); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotateX(74deg);
  pointer-events: none;
}
.cstage__ring {
  display: block; width: 100%; height: 100%; overflow: visible;
  opacity: .55; animation: cs-ring-spin 40s linear infinite;
  transition: opacity .25s ease, filter .25s ease;
}
.cstage.is-flare .cstage__ring { opacity: 1; filter: drop-shadow(0 0 10px #ff3355) brightness(1.5); }
.cs-ring-line { fill: none; stroke: #ff3355; stroke-width: 1.4; opacity: .8; }
.cs-ring-line--dash { stroke-dasharray: 2 4; }
.cs-ring-line--thin { stroke-width: .8; opacity: .55; }
.cs-ring-rune { fill: #ff3355; opacity: .85; }
@keyframes cs-ring-spin { to { transform: rotate(360deg); } }

/* ---- objects ---- */
.cs-group { position: absolute; inset: 0; }
.cs-obj {
  position: absolute; left: 50%; top: var(--cs-floor);
  width: var(--cs-size); height: var(--cs-size);
  margin-left: calc(var(--cs-size) * (var(--cs-x, 0) - .5));
  margin-top: calc(var(--cs-size) * -1);
}
.cs-coin { --cs-size: clamp(150px, 46vw, 220px); }
.cs-die { --cs-size: clamp(78px, 22vw, 108px); }
.cs-poly { --cs-size: clamp(130px, 38vw, 176px); }

.cs-shadow {
  position: absolute; left: 8%; right: 8%; bottom: -7%; height: 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35) 60%, transparent);
}
.cs-hop, .cs-tilt, .cs-spin, .cs-cube, .cs-polyspin { position: absolute; inset: 0; transform-style: preserve-3d; }

/* coin: a gold disc 14px thick, demon in front, pig behind */
.cs-coin .cs-tilt { transform: rotateY(-16deg) rotateX(5deg); }
.cs-edge {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(90deg, #5a3608, #d9a443 30%, #fff0b5 48%, #b07a1c 64%, #4a2c06);
  transform: translateZ(var(--z, 0px));
}
.cs-face { position: absolute; inset: 0; border-radius: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cs-face--demon { transform: translateZ(7px); }
.cs-face--pig { transform: rotateX(180deg) translateZ(7px); }
.cs-face svg { display: block; width: 100%; height: 100%; }
.cs-coin.is-charging .cs-face { filter: drop-shadow(0 0 14px rgba(255, 60, 90, .8)); }
.cs-coin.is-landed .cs-face { animation: cs-glow 1.8s ease-out both; }
.cs-coin.is-pig.is-landed .cs-face { animation-name: cs-glow-pig; }
@keyframes cs-glow {
  0% { filter: drop-shadow(0 0 0 rgba(255, 60, 90, 0)); }
  22% { filter: drop-shadow(0 0 30px rgba(255, 50, 80, 1)) brightness(1.3); }
  100% { filter: drop-shadow(0 0 10px rgba(255, 50, 80, .45)); }
}
@keyframes cs-glow-pig {
  0% { filter: drop-shadow(0 0 0 rgba(255, 140, 180, 0)); }
  22% { filter: drop-shadow(0 0 30px rgba(255, 140, 180, 1)) brightness(1.3); }
  100% { filter: drop-shadow(0 0 10px rgba(255, 140, 180, .45)); }
}

/* d6: obsidian cubes with glowing red pips; the 1 is a demon eye */
.cs-die .cs-tilt { transform: rotateX(-18deg) rotateY(24deg); }
.cs__side {
  position: absolute; inset: 0;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 13%; border-radius: 13%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background:
    radial-gradient(circle at 26% 20%, rgba(255, 70, 100, .26), transparent 52%),
    radial-gradient(circle at 78% 84%, rgba(130, 0, 24, .45), transparent 58%),
    linear-gradient(145deg, #2c0912, #0b0205 58%, #040102);
  box-shadow: inset 0 0 0 2px rgba(255, 51, 85, .75), inset 0 0 22px rgba(255, 20, 60, .28), inset 0 0 0 5px rgba(0, 0, 0, .55);
}
.cs__side::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), transparent 40%, rgba(0, 0, 0, .3));
}
.cs__side--1 { transform: translateZ(calc(var(--cs-size) / 2)); }
.cs__side--6 { transform: rotateY(180deg) translateZ(calc(var(--cs-size) / 2)); }
.cs__side--2 { transform: rotateY(90deg) translateZ(calc(var(--cs-size) / 2)); }
.cs__side--5 { transform: rotateY(-90deg) translateZ(calc(var(--cs-size) / 2)); }
.cs__side--3 { transform: rotateX(90deg) translateZ(calc(var(--cs-size) / 2)); }
.cs__side--4 { transform: rotateX(-90deg) translateZ(calc(var(--cs-size) / 2)); }
.cs__cell { display: flex; align-items: center; justify-content: center; }
.cs__cell--pip::before {
  content: ""; display: block; width: 64%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffe0e6, #ff2a50 45%, #6a0012);
  box-shadow: 0 0 10px rgba(255, 40, 70, .9);
}
.cs__cell--sigil { grid-area: 1 / 1 / 4 / 4; padding: 4%; }
.cs-die.is-landed .cs__cell--pip::before, .cs-die.is-landed .lc-sigil-orb { animation: cs-pip 1.6s ease-out both; }
@keyframes cs-pip {
  0% { filter: brightness(1); }
  20% { filter: brightness(1.9) drop-shadow(0 0 8px #ff3355); }
  100% { filter: brightness(1.15); }
}

/* d20 / d100: a black crystal with a burning number */
.cs-polyspin svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px rgba(255, 51, 85, .55)) drop-shadow(0 0 26px rgba(255, 51, 85, .25)); }
.cs-poly .chance__num { fill: #ffe3e8; stroke: #3a0008; filter: drop-shadow(0 0 4px rgba(255, 51, 85, .95)); }
.cs-poly.is-flying .chance__num { fill: #ff8a9e; }
.cs-poly.is-crit svg { filter: drop-shadow(0 0 16px rgba(255, 200, 90, .95)) drop-shadow(0 0 40px rgba(255, 120, 40, .6)); }
.cs-poly.is-crit .chance__num { fill: #fff2c0; }
.cs-poly.is-fumble svg { filter: grayscale(.7) brightness(.75) drop-shadow(0 0 8px rgba(120, 110, 115, .5)); }
.cs-poly.is-fumble .chance__crack { display: block; stroke: #ff3355; }

/* ---- effects ---- */
.cs-spark {
  position: absolute; left: calc(50% + var(--x, 0px)); top: var(--cs-floor);
  width: var(--s, 5px); height: var(--s, 5px); border-radius: 50%;
  pointer-events: none; z-index: 3;
}
.cs-spark--red { background: radial-gradient(circle, #fff3f5 0, #ff3355 55%, rgba(255, 51, 85, 0) 72%); box-shadow: 0 0 8px rgba(255, 51, 85, .95); }
.cs-spark--gold { background: radial-gradient(circle, #fffbe0 0, #ffc23d 55%, rgba(255, 194, 61, 0) 72%); box-shadow: 0 0 8px rgba(255, 190, 70, .9); }
.cs-spark--ash { background: radial-gradient(circle, #e2d9dc 0, #6d6266 60%, rgba(109, 98, 102, 0) 74%); }
.cs-wave {
  position: absolute; left: calc(50% + var(--x, 0px)); top: var(--cs-floor);
  width: 56%; aspect-ratio: 3.4; border-radius: 50%;
  border: 3px solid rgba(255, 80, 110, .9);
  box-shadow: 0 0 18px rgba(255, 51, 85, .85), inset 0 0 14px rgba(255, 51, 85, .6);
  pointer-events: none; z-index: 1;
}

/* ---- result, stakes, buttons ---- */
.cstage__result {
  min-height: 1.15em; margin-top: 4px;
  font: 700 clamp(32px, 9.5vw, 48px)/1.1 var(--font-name, "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif);
  letter-spacing: .14em; text-transform: uppercase; color: #ffe9ed;
  text-shadow: 0 0 24px rgba(255, 51, 85, .9), 0 2px 0 #3a0008;
}
.cstage__result--demon { color: #ff6b82; }
.cstage__result--pig { color: #ffc9d6; text-shadow: 0 0 24px rgba(255, 120, 165, .85), 0 2px 0 #3a0014; }
.cstage__result--crit { color: #ffe9a8; text-shadow: 0 0 26px rgba(255, 190, 90, .95), 0 2px 0 #3a1a00; }
.cstage__result--fumble { color: #b9adb1; text-shadow: 0 0 14px rgba(120, 110, 115, .7); }
.cstage__result--crit + .cstage__note, .cstage__result--fumble + .cstage__note { font: 700 17px var(--font-name, Georgia, serif); letter-spacing: .16em; text-transform: uppercase; color: #ffd98a; }
.cstage__result--fumble + .cstage__note { color: #b9adb1; }
.cstage__note { min-height: 1.35em; max-width: 30em; font-size: 15.5px; line-height: 1.35; color: var(--bone, #f3e6ea); opacity: .92; }

.cstage__stakes { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 7px; width: min(100%, 360px); }
.cstage__stakes:empty { display: none; }
.cstage__stake {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 9px;
  text-align: left; font-size: 14.5px; line-height: 1.3;
  background: linear-gradient(100deg, rgba(42, 6, 14, .85), rgba(14, 2, 6, .85));
  box-shadow: inset 0 0 0 1px rgba(255, 51, 85, .4);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: opacity .35s ease, box-shadow .35s ease, transform .35s ease;
}
.cstage__stake--plain { padding-left: 14px; }
.cstage__stakeface { flex: none; width: 34px; height: 34px; }
.cstage__stakeface svg { display: block; width: 100%; height: 100%; }
.cstage__staketext b { font-family: var(--font-name, Georgia, serif); font-weight: 700; letter-spacing: .05em; color: #ffd9de; margin-right: 4px; }
.cstage__stake.is-hit { box-shadow: inset 0 0 0 1.5px #ff3355, 0 0 22px rgba(255, 51, 85, .5); transform: scale(1.05); }
.cstage__stake.is-miss { opacity: .32; }

.cstage__foot { display: grid; min-height: 52px; width: 100%; margin-top: 6px; }
.cstage__foot > * { grid-area: 1 / 1; align-self: center; justify-self: center; }
.cstage__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; transition: opacity .25s ease; }
.cstage__actions:empty { display: none; }
.cstage.is-rolling .cstage__actions, .cstage.is-landed .cstage__actions { opacity: 0; visibility: hidden; }
.cstage__go, .cstage__cancel {
  border: 0; cursor: pointer; font: 600 16px var(--font-name, Georgia, serif); letter-spacing: .06em;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.cstage__go {
  padding: 13px 28px; color: #fff0f2;
  background: linear-gradient(160deg, #a3142f, #4a0715);
  box-shadow: inset 0 0 0 1.5px rgba(255, 120, 140, .7);
  animation: cs-go-pulse 1.8s ease-in-out infinite;
}
.cstage__go:hover, .cstage__go:focus-visible { outline: none; background: linear-gradient(160deg, #d01a3c, #6a0a1e); }
.cstage__cancel {
  padding: 13px 22px; color: var(--mist, #b8a2a9);
  background: rgba(20, 4, 9, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.cstage__cancel:hover, .cstage__cancel:focus-visible { outline: none; color: #ffd9de; box-shadow: inset 0 0 0 1px rgba(255, 120, 140, .6); }
.cstage__go:disabled, .cstage__cancel:disabled { cursor: default; opacity: .6; animation: none; }
@keyframes cs-go-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 51, 85, .45)); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 51, 85, .9)); }
}
.cstage__hint {
  margin: 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mist, #a88a92); opacity: 0; transition: opacity .4s ease .5s; pointer-events: none;
}
.cstage.is-done .cstage__hint { opacity: .85; }
.cstage.is-done { cursor: pointer; }

@media (max-height: 640px) {
  .cstage__arena { height: clamp(200px, 38vh, 260px); }
  .cstage__stake { padding-top: 5px; padding-bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cstage, .cstage__panel { transition: none; }
  .cstage__ring, .cstage__go { animation: none; }
}