/* ============================================================
   Dice Duel — visual module stylesheet
   Namespace: .dg-*  (safe to drop into any page)
   Palette: dark luxury — near-black aubergine, gold, purple
   No external fonts, no CDN. System font stack only.
   ============================================================ */

.dg-root {
  --dg-bg-deep:   #0b0812;
  --dg-bg-felt:   #1a1128;
  --dg-felt-edge: #120b1d;
  --dg-gold:      #f0c25c;
  --dg-gold-hi:   #ffdf8e;
  --dg-purple:    #8b5cf6;
  --dg-purple-dk: #4c1d95;
  --dg-red:       #e14b4b;
  --dg-blue:      #4cc9f0;
  --dg-ivory-1:   #faf6ec;   /* die top light */
  --dg-ivory-2:   #e8e1d2;   /* die mid */
  --dg-ivory-3:   #cfc6b2;   /* die shaded */
  --dg-pip:       #241d18;
  --dg-pip-red:   #c8342e;
  --dg-text:      #efe9dc;
  --dg-text-dim:  #9a8fb0;

  --dg-die-size: clamp(68px, 19vw, 90px);
  --dg-stage-h:  clamp(260px, 46vw, 340px);

  position: relative;
  width: 100%;
  height: var(--dg-stage-h);
  overflow: hidden;                 /* nothing ever escapes the frame */
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 50% 18%, #241638 0%, var(--dg-bg-felt) 42%, var(--dg-bg-deep) 100%);
  box-shadow: inset 0 0 0 1px rgba(240,194,92,.10), inset 0 -30px 60px rgba(0,0,0,.55);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  contain: layout paint;            /* isolates repaints for WebView perf */
}

/* --- signature: elliptical felt spotlight with a thin gold inlay ring --- */
.dg-table {
  position: absolute;
  left: 50%; bottom: 8%;
  width: 88%; height: 46%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(139,92,246,.16), rgba(76,29,149,.10) 55%, rgba(0,0,0,0) 72%);
  pointer-events: none;
}
.dg-table::after {
  content: "";
  position: absolute; inset: 6% 4%;
  border-radius: 50%;
  border: 1px solid rgba(240,194,92,.22);
  box-shadow: 0 0 24px rgba(240,194,92,.06) inset;
}

/* faint top vignette light beam */
.dg-lightbeam {
  position: absolute; inset: 0;
  background: radial-gradient(60% 42% at 50% -6%, rgba(255,223,142,.10), rgba(255,223,142,0) 70%);
  pointer-events: none;
}

/* ------------------------------------------------------------
   Arena: perspective container holding the two dice slots
   ------------------------------------------------------------ */
.dg-arena {
  position: absolute; inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--dg-die-size) * 1.05);
  padding-bottom: calc(var(--dg-stage-h) * 0.20);
  perspective: 950px;
  perspective-origin: 50% 34%;
}

.dg-slot {
  position: relative;
  width: var(--dg-die-size);
  height: var(--dg-die-size);
  transform-style: preserve-3d;
}

/* dynamic ground shadow (scaled/faded from JS while airborne) */
.dg-shadow {
  position: absolute;
  left: 50%; bottom: calc(var(--dg-die-size) * -0.30);
  width: 108%; height: 26%;
  transform: translateX(-50%) scale(1);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.62), rgba(0,0,0,0) 78%);
  filter: blur(2px);
  will-change: transform, opacity, filter;
}

/* wrapper: translation + squash live here, spin lives on .dg-die */
.dg-die-wrap {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform, filter;
}

.dg-die {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* result glow states (driven by JS) */
.dg-slot.dg-glow-gold   .dg-die-wrap { filter: drop-shadow(0 0 14px rgba(255,223,142,.85)) drop-shadow(0 0 34px rgba(240,194,92,.45)); }
.dg-slot.dg-glow-loss   .dg-die-wrap { filter: drop-shadow(0 0 12px rgba(225,75,75,.75))  drop-shadow(0 0 30px rgba(139,92,246,.45)); }
.dg-slot.dg-glow-blue   .dg-die-wrap { filter: drop-shadow(0 0 12px rgba(76,201,240,.80)) drop-shadow(0 0 28px rgba(76,201,240,.35)); }
.dg-slot.dg-glow-gold   .dg-die-wrap,
.dg-slot.dg-glow-loss   .dg-die-wrap,
.dg-slot.dg-glow-blue   .dg-die-wrap { animation: dg-glow-pulse 1.15s ease-in-out infinite alternate; }

@keyframes dg-glow-pulse {
  from { opacity: 1; }
  to   { opacity: .82; }
}

/* ------------------------------------------------------------
   The die: six faces, rounded corners, ivory glossy material
   ------------------------------------------------------------ */
.dg-face {
  position: absolute; inset: 0;
  border-radius: 16%;
  background:
    radial-gradient(120% 120% at 28% 22%, var(--dg-ivory-1) 0%, var(--dg-ivory-2) 55%, var(--dg-ivory-3) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    inset 0 2px 4px rgba(255,255,255,.5),
    inset 0 -4px 8px rgba(90,74,50,.28);
  backface-visibility: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  padding: 14%;
  box-sizing: border-box;
}

/* soft specular sheen on every face */
.dg-face::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 42%);
  pointer-events: none;
}

/* concave-looking pips */
.dg-pip {
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #4a4038 0%, var(--dg-pip) 58%, #000 130%);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.75),
    inset 0 -1px 1px rgba(255,255,255,.28),
    0 1px 0 rgba(255,255,255,.35);
}
.dg-pip.dg-pip-red {
  background: radial-gradient(circle at 34% 30%, #ff7a6d 0%, var(--dg-pip-red) 55%, #6e0f0c 130%);
  box-shadow:
    inset 0 2px 3px rgba(80,0,0,.8),
    inset 0 -1px 1px rgba(255,255,255,.3),
    0 1px 0 rgba(255,255,255,.35);
}

/* grid cells for pip placement (r=row, c=col, 1-indexed) */
.dg-pip[data-cell="1-1"] { grid-area: 1 / 1; }
.dg-pip[data-cell="1-2"] { grid-area: 1 / 2; }
.dg-pip[data-cell="1-3"] { grid-area: 1 / 3; }
.dg-pip[data-cell="2-1"] { grid-area: 2 / 1; }
.dg-pip[data-cell="2-2"] { grid-area: 2 / 2; }
.dg-pip[data-cell="2-3"] { grid-area: 2 / 3; }
.dg-pip[data-cell="3-1"] { grid-area: 3 / 1; }
.dg-pip[data-cell="3-2"] { grid-area: 3 / 2; }
.dg-pip[data-cell="3-3"] { grid-area: 3 / 3; }

/* ------------------------------------------------------------
   Labels: player names + value chips
   ------------------------------------------------------------ */
.dg-name {
  position: absolute;
  top: calc(100% + var(--dg-die-size) * 0.42);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--dg-text-dim);
}
.dg-slot.dg-glow-gold .dg-name { color: var(--dg-gold-hi); }
.dg-slot.dg-glow-loss .dg-name { color: #d6a0ff; }
.dg-slot.dg-glow-blue .dg-name { color: var(--dg-blue); }

.dg-value {
  position: absolute;
  top: calc(100% + var(--dg-die-size) * 0.10);
  left: 50%;
  transform: translateX(-50%) scale(.6);
  min-width: 1.9em;
  padding: .05em .35em;
  border-radius: 999px;
  text-align: center;
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--dg-bg-deep);
  background: linear-gradient(180deg, var(--dg-gold-hi), var(--dg-gold));
  box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  opacity: 0;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,1.4,.4,1);
}
.dg-value.dg-show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ------------------------------------------------------------
   Result banner
   ------------------------------------------------------------ */
.dg-banner {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(.8);
  padding: .28em .9em;
  border-radius: 14px;
  font-size: clamp(22px, 7vw, 34px);
  font-weight: 900;
  letter-spacing: .10em;
  white-space: nowrap;
  background: rgba(11,8,18,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease, transform .32s cubic-bezier(.18,1.5,.35,1);
}
.dg-banner.dg-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.dg-banner.dg-win {
  color: transparent;
  background-image: linear-gradient(180deg, #fff2c8 0%, var(--dg-gold-hi) 38%, var(--dg-gold) 62%, #b0801f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 26px rgba(240,194,92,.35);
  background-color: rgba(11,8,18,.55);
}
.dg-banner.dg-loss { color: #f0a1a1; text-shadow: 0 0 22px rgba(225,75,75,.45); }
.dg-banner.dg-draw { color: var(--dg-blue); text-shadow: 0 0 22px rgba(76,201,240,.45); }

/* draw: soft expanding pulse ring between the dice */
.dg-drawring {
  position: absolute;
  left: 50%; bottom: 26%;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(76,201,240,.8);
  transform: translate(-50%, 50%);
  opacity: 0;
  pointer-events: none;
}
.dg-drawring.dg-run { animation: dg-ring 1.1s ease-out forwards; }
@keyframes dg-ring {
  0%   { opacity: .9; width: 12px;  height: 12px; }
  100% { opacity: 0;  width: 240px; height: 96px; }
}

/* confetti / coins canvas overlay */
.dg-fx {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* loss: very slight screen shake on the whole stage */
.dg-root.dg-shake { animation: dg-shake .38s linear 1; }
@keyframes dg-shake {
  0%,100% { transform: translate(0,0); }
  20%     { transform: translate(-2px, 1px); }
  40%     { transform: translate(2px, -1px); }
  60%     { transform: translate(-2px, -1px); }
  80%     { transform: translate(1px, 1px); }
}

/* ------------------------------------------------------------
   Accessibility: reduced motion → skip the aerial show
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .dg-root.dg-shake { animation: none; }
  .dg-slot.dg-glow-gold .dg-die-wrap,
  .dg-slot.dg-glow-loss .dg-die-wrap,
  .dg-slot.dg-glow-blue .dg-die-wrap { animation: none; }
}