/* games-web/roll3d.css — the CSS half of the 3D roll component.
 *
 * The 3D canvas draws ONLY the dice; everything you see around them — the card, the
 * glow, the button — is here. That split is deliberate: the previous version painted a
 * felt disc inside the scene and floated an oversized canvas over the panel, which
 * clipped the Roll button and the text beside it.
 *
 * Every rule is scoped to `html.r3d-on`, which roll3d.js adds only when WebGL is
 * actually available — so a device that falls back to the 2D dice keeps the game's
 * original styling untouched.
 *
 * The classes are applied by roll3d.js as it anchors: the die/shell host gets
 * `.r3d-slot`, its parent gets `.r3d-card`. Games need no markup changes.
 */

html.r3d-on .r3d-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 14px 12px;
  border-radius: 22px;
  border: 1px solid rgba(255, 221, 114, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* backdrop-filter is expensive on low-end Android: opt in only where supported, and
   keep the translucent fill above as the base either way */
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  html.r3d-on .r3d-card {
    backdrop-filter: blur(13px) saturate(1.12);
    -webkit-backdrop-filter: blur(13px) saturate(1.12);
  }
}

/* warm glow behind the dice — CSS, so the canvas can stay fully transparent */
html.r3d-on .r3d-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  width: 62%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(243, 194, 69, 0.2), rgba(243, 194, 69, 0) 68%);
  pointer-events: none;
}

/* The canvas slot. Sized here so the 3D has room without the layer ever growing past
   its own box and covering a neighbour. */
html.r3d-on .r3d-slot {
  position: relative;
  width: 108px;
  height: 108px;
  margin: 0 auto;
  /* The host is the game's own 2D die box. Its background, border and shadow have to
     go, or they draw a plate behind the floating dice — the exact look this redesign
     removed from the 3D scene. The element stays for layout and for the fallback. */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: transparent;
}
html.r3d-on .r3d-slot > * { visibility: hidden; }

/* cowries need a wide, short slot: six shells in a 3 x 2 grid */
html.r3d-on #shells.r3d-slot {
  width: min(220px, 74vw);
  height: 104px;
}

/* the roll button, restyled in place — the games keep their own single button */
html.r3d-on .r3d-card .btn {
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #24170a;
  background: linear-gradient(135deg, var(--gold-2), var(--gold) 52%, var(--gold-deep));
  box-shadow: 0 8px 18px rgba(243, 194, 69, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s, filter 0.2s;
}
html.r3d-on .r3d-card .btn:hover { filter: brightness(1.05); }
html.r3d-on .r3d-card .btn:active {
  transform: translateY(2px) scale(0.975);
  box-shadow: 0 3px 9px rgba(243, 194, 69, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html.r3d-on .r3d-card .btn[disabled] { opacity: 0.45; filter: grayscale(0.35); cursor: default; }
html.r3d-on .r3d-card .btn.bounce { animation: r3dBounce 0.42s cubic-bezier(0.2, 1.5, 0.4, 1); }

@keyframes r3dBounce {
  0% { transform: scale(0.97); }
  45% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html.r3d-on .r3d-card .btn,
  html.r3d-on .r3d-card .btn.bounce { transition: none; animation: none; }
}

/* =============================================================================
 * NO-WEBGL FALLBACK
 * If `r3d-on` is absent the games keep their 2D die — which looked like an
 * unfinished dark box. It gets the same warm treatment so a device without WebGL
 * still sees something deliberate rather than something broken.
 * ============================================================================= */
html:not(.r3d-on) .dicewrap,
html:not(.r3d-on) .controls {
  border-radius: 20px;
}
html:not(.r3d-on) #die {
  background: radial-gradient(120% 120% at 30% 22%, #fff3d0, var(--gold) 55%, var(--gold-deep)) !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -3px 6px rgba(120, 70, 0, 0.35) !important;
}
html:not(.r3d-on) #die .pip { background: rgba(35, 22, 5, 0.25); }
html:not(.r3d-on) #die .pip.on {
  background: #241706;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.25);
}
html:not(.r3d-on) .shell {
  background: radial-gradient(120% 120% at 32% 24%, #fff0cd, #e8b959 60%, #9c6f1c) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.5) !important;
}
html:not(.r3d-on) .shell.up {
  background: radial-gradient(120% 120% at 50% 45%, #150e04, #3a2a10 70%, #e8b959 92%) !important;
}