/* Lila chat: coin / dice result panel (chance.js builds the markup).
   Angular panel technique as in styles.css: the clip-path shape carries the edge
   colour as background, ::before (inset by --chance-b) carries the fill.
   Every class is prefixed "chance". No inline styles are needed: the script only
   sets custom properties through the CSSOM (allowed under style-src 'self'). */

.chance {
  --chance-c: 12px;
  --chance-b: 1.5px;
  --chance-shape: polygon(var(--chance-c) 0, 100% 0, 100% calc(100% - var(--chance-c)), calc(100% - var(--chance-c)) 100%, 0 100%, 0 var(--chance-c));
  --chance-dur: 1200ms;
  --chance-s: 48px;
  --chance-pip-d: calc(var(--chance-s) * .18);

  position: relative; isolation: isolate; box-sizing: border-box;
  display: block; width: 220px; max-width: 100%;
  padding: 9px 12px 8px;
  clip-path: var(--chance-shape);
  background: var(--chance-edge);
  color: var(--bone, #f3e6ea);
  font-family: var(--font-body, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif);
  text-align: center;
  -webkit-user-select: none; user-select: none;
}
.chance::before {
  content: ""; position: absolute; inset: var(--chance-b); z-index: -1;
  clip-path: var(--chance-shape); background: var(--chance-fill);
}
.chance *, .chance *::before, .chance *::after { box-sizing: border-box; }

/* ---- accents: user = cool violet-grey, lila = crimson ---- */
.chance--user {
  --chance-edge: var(--user-edge, linear-gradient(200deg, #6b5578, #2c2233 70%, #4d3a59));
  --chance-fill: var(--user-fill, linear-gradient(200deg, #1e1724 0%, #140f19 100%));
  --chance-accent: #9d86b3;
  --chance-soft: #cdbcdb;
  --chance-bright: #efe5f7;
  --chance-glow: 157, 134, 179;
  --chance-die-a: #6a5879;
  --chance-die-b: #2d2337;
  --chance-pip: #f6eefb;
}
.chance--lila {
  --chance-edge: var(--lila-edge, linear-gradient(160deg, #ff3355, #7a0c22 60%, #ff5a3d));
  --chance-fill: var(--lila-fill, linear-gradient(160deg, #2a060e 0%, #4a0b19 55%, #5f0f22 100%));
  --chance-accent: var(--crimson, #ff3355);
  --chance-soft: #ffb3bf;
  --chance-bright: #ffd9de;
  --chance-glow: 255, 51, 85;
  --chance-die-a: #a3142f;
  --chance-die-b: #43081a;
  --chance-pip: #ffe9ed;
}
.chance--2d6 { --chance-s: 42px; }

/* ---- label / stage / caption ---- */
.chance__label {
  position: relative; padding-bottom: 6px;
  font-size: 12px; line-height: 16px; letter-spacing: .05em; color: var(--chance-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chance__label::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--chance-glow), .55), transparent);
}
.chance__who { font-weight: 700; color: var(--chance-bright); }

.chance__stage {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 104px; margin-top: 2px;
}
.chance__stage::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 156px; height: 92px; margin: -46px 0 0 -78px;
  background: radial-gradient(closest-side, rgba(var(--chance-glow), .22), transparent);
  opacity: .8; pointer-events: none;
}

.chance__result {
  min-height: 26px; margin-top: 1px;
  font: 600 20px/26px var(--font-name, "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif);
  letter-spacing: .06em; color: var(--chance-bright);
  text-shadow: 0 0 12px rgba(var(--chance-glow), .55);
}

.chance__slot { position: relative; display: block; flex: none; perspective: 480px; }
.chance__shadow {
  position: absolute; left: 50%; bottom: 3px; width: 64px; height: 10px; margin-left: -32px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
}

/* =====================================================================
   coin
   ===================================================================== */
.chance__slot--coin { width: 84px; height: 96px; }
.chance__hop {
  position: absolute; left: 50%; top: 50%; width: var(--chance-s); height: var(--chance-s);
  margin: calc(var(--chance-s) / -2) 0 0 calc(var(--chance-s) / -2);
  transform-style: preserve-3d;
}
.chance__slot--coin .chance__hop { width: 66px; height: 66px; margin: -33px 0 0 -33px; top: 52%; }
.chance__coin { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--chance-end, 0deg)); }
.chance__rim {
  position: absolute; inset: 0; border-radius: 50%;
  background: #a87419; transform: translateZ(var(--chance-z, 0px));
}
.chance__rim:nth-child(even) { background: #6f4710; }
.chance__face--coin {
  position: absolute; inset: 0; border-radius: 50%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background:
    radial-gradient(circle at 34% 28%, #fff1b8 0%, #f0c866 22%, #cf9a35 52%, #8d5c14 100%);
  box-shadow: inset 0 0 0 1.5px #f8dc8e, inset 0 0 9px rgba(70, 38, 4, .75);
}
.chance__face--heads { transform: translateZ(3.5px); }
.chance__face--tails { transform: rotateY(180deg) translateZ(3.5px); }
.chance__coinsvg { display: block; width: 100%; height: 100%; }
.chance__ring { fill: none; stroke: #7a4d0f; stroke-width: 2.2; }
.chance__ring--thin { stroke: #fbe3a0; stroke-width: 1; stroke-dasharray: 1.6 3.1; opacity: .85; }
.chance__sigil { fill: #7a4d0f; stroke: #fbe3a0; stroke-width: 1.1; stroke-linejoin: round; paint-order: stroke; }
.chance__sigil--gem { fill: #fbe3a0; stroke: #7a4d0f; stroke-width: 1; }

.chance--animate .chance__hop { animation: chance-hop var(--chance-dur) linear both; }
.chance--animate .chance__coin { animation: chance-coin-spin var(--chance-dur) cubic-bezier(.25, .55, .35, 1) both; }
.chance--animate .chance__slot--coin .chance__shadow { animation: chance-shadow var(--chance-dur) linear both; }
@keyframes chance-coin-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(var(--chance-spin, 1800deg)); }
}
@keyframes chance-hop {
  0%   { transform: translateY(0) rotateX(0deg) scale(1); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  38%  { transform: translateY(-16px) rotateX(24deg) scale(1.08); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  72%  { transform: translateY(0) rotateX(0deg) scale(1); animation-timing-function: ease-out; }
  85%  { transform: translateY(-6px) rotateX(5deg) scale(1.02); animation-timing-function: ease-in; }
  100% { transform: translateY(0) rotateX(0deg) scale(1); }
}
@keyframes chance-shadow {
  0%   { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  38%  { transform: scale(.6); opacity: .45; animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  72%  { transform: scale(1); opacity: 1; animation-timing-function: ease-out; }
  85%  { transform: scale(.88); opacity: .8; animation-timing-function: ease-in; }
  100% { transform: scale(1); opacity: 1; }
}

/* =====================================================================
   d6 / 2d6 cubes
   ===================================================================== */
.chance__slot--die { width: calc(var(--chance-s) + 16px); height: 96px; }
.chance__slot--die .chance__hop { top: 46%; }
.chance__tilt {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(-26deg);
}
.chance__cube {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--chance-fx, 0deg)) rotateY(var(--chance-fy, 0deg)) rotateZ(0deg);
}
.chance__side {
  position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 15%; border-radius: 16%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: linear-gradient(145deg, var(--chance-die-a), var(--chance-die-b));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 0 0 10px rgba(0, 0, 0, .5);
}
.chance__side::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .17), transparent 46%, rgba(0, 0, 0, .22));
}
.chance__side--1 { transform: translateZ(calc(var(--chance-s) / 2)); }
.chance__side--6 { transform: rotateY(180deg) translateZ(calc(var(--chance-s) / 2)); }
.chance__side--2 { transform: rotateY(90deg) translateZ(calc(var(--chance-s) / 2)); }
.chance__side--5 { transform: rotateY(-90deg) translateZ(calc(var(--chance-s) / 2)); }
.chance__side--3 { transform: rotateX(90deg) translateZ(calc(var(--chance-s) / 2)); }
.chance__side--4 { transform: rotateX(-90deg) translateZ(calc(var(--chance-s) / 2)); }
.chance__cell { display: flex; align-items: center; justify-content: center; }
.chance__cell--pip::before {
  content: ""; display: block; width: var(--chance-pip-d); height: var(--chance-pip-d); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--chance-pip) 55%);
  box-shadow: 0 0 5px rgba(var(--chance-glow), .6);
}

.chance--animate .chance__slot--die .chance__hop { animation: chance-die-hop var(--chance-dur) linear both; }
.chance--animate .chance__cube { animation: chance-cube-tumble var(--chance-dur) cubic-bezier(.15, .7, .3, 1) both; }
.chance--animate .chance__slot--die .chance__shadow { animation: chance-shadow var(--chance-dur) linear both; width: 52px; margin-left: -26px; }
@keyframes chance-cube-tumble {
  from {
    transform: rotateX(calc(var(--chance-fx, 0deg) + var(--chance-tx, 720deg)))
               rotateY(calc(var(--chance-fy, 0deg) + var(--chance-ty, -720deg)))
               rotateZ(var(--chance-tz, 360deg));
  }
  to { transform: rotateX(var(--chance-fx, 0deg)) rotateY(var(--chance-fy, 0deg)) rotateZ(0deg); }
}
@keyframes chance-die-hop {
  0%   { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  36%  { transform: translateY(-14px); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  70%  { transform: translateY(0); animation-timing-function: ease-out; }
  83%  { transform: translateY(-5px); animation-timing-function: ease-in; }
  100% { transform: translateY(0); }
}

/* =====================================================================
   d20 / d100 (svg silhouettes, number flickers then settles)
   ===================================================================== */
.chance__slot--poly { width: 100px; height: 96px; display: grid; place-items: center; }
.chance__poly {
  width: 88px; height: 88px;
  filter: drop-shadow(0 0 5px rgba(var(--chance-glow), .55)) drop-shadow(0 0 14px rgba(var(--chance-glow), .25));
}
.chance__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chance__body { fill: var(--chance-die-a); stroke: var(--chance-soft); stroke-width: 1.6; stroke-linejoin: round; }
.chance__outline--only { fill: none; }
.chance__facet { stroke: rgba(255, 255, 255, .34); stroke-width: .9; stroke-linejoin: round; }
.chance__facet--l3 { fill: #fff; fill-opacity: .22; }
.chance__facet--l2 { fill: #fff; fill-opacity: .13; }
.chance__facet--l1 { fill: #fff; fill-opacity: .06; }
.chance__facet--d1 { fill: #000; fill-opacity: .14; }
.chance__facet--d2 { fill: #000; fill-opacity: .26; }
.chance__facet--d3 { fill: #000; fill-opacity: .38; }
.chance__num {
  fill: var(--chance-pip); text-anchor: middle; font-weight: 700;
  font-family: var(--font-name, "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif);
  stroke: rgba(0, 0, 0, .55); stroke-width: 2.4; paint-order: stroke; stroke-linejoin: round;
}
.chance__num--1, .chance__num--2 { font-size: 21px; }
.chance__num--3 { font-size: 17px; }
.chance__crack { display: none; fill: none; stroke: #090203; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.chance--animate .chance__poly { animation: chance-poly-tumble var(--chance-dur) cubic-bezier(.2, .7, .25, 1) both; }
@keyframes chance-poly-tumble {
  from { transform: rotate(var(--chance-spin, -300deg)) scale(.5) translateY(6px); }
  42%  { transform: rotate(calc(var(--chance-spin, -300deg) * .35)) scale(1.1) translateY(-5px); }
  100% { transform: rotate(0deg) scale(1) translateY(0); }
}

/* ---- landing flash, caption reveal ---- */
.chance--animate .chance__stage::before { animation: chance-flash var(--chance-dur) ease-out both; }
@keyframes chance-flash {
  0%, 58% { opacity: .2; transform: scale(.8); }
  80% { opacity: 1; transform: scale(1.12); }
  100% { opacity: .8; transform: scale(1); }
}
.chance--animate .chance__result { animation: chance-reveal var(--chance-dur) ease-out both; }
@keyframes chance-reveal {
  0%, 74% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}
.chance--animate.chance--d20 .chance__svg,
.chance--animate.chance--d100 .chance__svg { animation: chance-settle var(--chance-dur) ease-out both; }
@keyframes chance-settle {
  0%, 62% { filter: brightness(.8); }
  82% { filter: brightness(1.45); }
  100% { filter: brightness(1); }
}

/* ---- natural 20 / 100 and a 1 ---- */
.chance--crit .chance__poly {
  filter: drop-shadow(0 0 7px rgba(255, 205, 120, .95)) drop-shadow(0 0 20px rgba(255, 150, 60, .6));
}
.chance--crit .chance__body { stroke: #ffd98a; }
.chance--crit .chance__facet { stroke: rgba(255, 233, 180, .55); }
.chance--crit .chance__num { fill: #ffe9a8; }
.chance--crit .chance__result { color: #ffe9a8; text-shadow: 0 0 14px rgba(255, 190, 90, .75); }
.chance--crit .chance__stage::before { background: radial-gradient(closest-side, rgba(255, 190, 90, .38), transparent); }

.chance--fumble .chance__poly { filter: drop-shadow(0 0 3px rgba(0, 0, 0, .8)); }
.chance--fumble .chance__svg { filter: saturate(.5) brightness(.72); }
.chance--fumble .chance__num { fill: var(--mist, #a88a92); }
.chance--fumble .chance__crack { display: block; }
.chance--fumble .chance__result { color: var(--mist, #a88a92); text-shadow: none; }
.chance--fumble .chance__stage::before { opacity: .35; }
.chance--animate.chance--fumble .chance__svg { animation: none; }

/* ---- unavailable ---- */
.chance-unavailable {
  display: inline-block; padding: 4px 0; font-size: 13px; font-style: italic; letter-spacing: .03em;
  color: var(--mist, #a88a92);
}

/* ---- narrow screens ---- */
@media (max-width: 520px) {
  .chance { width: 180px; padding: 8px 10px 7px; }
  .chance__label { font-size: 11.5px; letter-spacing: .035em; }
  .chance__stage { gap: 4px; }
  .chance__stage::before { width: 130px; margin-left: -65px; }
  .chance--2d6 { --chance-s: 38px; }
  .chance__slot--poly { width: 92px; }
  .chance__poly { width: 84px; height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .chance, .chance *, .chance *::before, .chance *::after { animation: none !important; transition: none !important; }
}