/* ============ Dice game ============ */
.dice { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; overflow-x: clip; }

/* ---- Stage ---- */
.dice-stage {
  margin: 12px 14px 0; padding: 22px 16px 0; border-radius: var(--r);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(139,92,255,.16), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--bg-2));
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
/* ---- 3D tumbling die ---- */
.die-floater { animation: die-float 3.8s ease-in-out infinite; will-change: transform; }
@keyframes die-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.die-scene {
  --th: clamp(88px, 24vw, 112px); --hz: calc(var(--th) / 2);
  position: relative; width: var(--th); height: var(--th); perspective: 620px; margin-bottom: 6px;
  transition: filter .25s ease; will-change: filter;
}
.die-scene.win  { filter: drop-shadow(0 8px 26px rgba(14,203,129,.7)); }
.die-scene.lose { filter: drop-shadow(0 8px 26px rgba(246,70,93,.62)); }
.die-scene.land { animation: die-land .5s cubic-bezier(.22,1.55,.36,1); }
@keyframes die-land { 0% { transform: scale(.9); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* Soft contact shadow on the ground. */
.die-shadow {
  position: absolute; left: 50%; bottom: -12px; width: 84%; height: 18px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,0) 70%); filter: blur(5px);
}

.die-cube {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(-34deg) rotateY(0deg); transition: transform 1.5s cubic-bezier(.1,.62,.12,1);
}
.die-cube.spin { animation: die-roll .5s linear infinite; transition: none; }
@keyframes die-roll {
  from { transform: rotateX(0) rotateY(0) rotateZ(0); }
  to   { transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg); }
}

/* ---- d10: pentagonal bipyramid — 10 triangular faces, digits 0–9 ---- */
/* Upper ring: 5 triangles meeting at the top apex (every 72°), tips up.
   Lower ring: 5 mirrored triangles meeting at the bottom apex, sharing the equator edges.
   Face 1 (front-upper) is where the rolled digit lands.
   Geometry (closes exactly): R=.5, tilt 40° → W=2R·sin36=.588, L=R·cos36/sin40=.629,
   z-offset=(L/2)·tan40=.264, y-shift=(L/2)cos40−z·sin40=.0713 (rings meet at equator). */
/* Each face gets --a (azimuth) and --b (lighting brightness) inline from dice.js. */
.die-core10, .die-face10 {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--th) * .588); height: calc(var(--th) * .63);
  margin: calc(var(--th) * -.315) 0 0 calc(var(--th) * -.294);
  backface-visibility: hidden;
  filter: brightness(var(--b, 1)) saturate(0);
}
.die-core10.upper, .die-face10.upper { transform: translateY(calc(var(--th) * -.0713)) rotateY(var(--a, 0deg)) rotateX(40deg)  translateZ(var(--fz, calc(var(--th) * .264))); }
.die-core10.lower, .die-face10.lower { transform: translateY(calc(var(--th) *  .0713)) rotateY(var(--a, 0deg)) rotateX(-40deg) translateZ(var(--fz, calc(var(--th) * .264))); }

/* Core: sharp triangles, slightly recessed + darker — shows through the rounded
   corner cutouts of the outer faces, reading as a softly bevelled edge. */
.die-core10 { --fz: calc(var(--th) * .264 - 2.5px); background: #c6c6c6; }
.die-core10.upper { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.die-core10.lower { clip-path: polygon(50% 100%, 100% 0%, 0% 0%); }

/* Outer faces: corners rounded off (multi-point clip approximates the arc). */
.die-face10 {
  display: flex; justify-content: center;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  background: linear-gradient(168deg, #ffffff 0%, #f2f2f2 48%, #dcdcdc 100%);
}
.die-face10.upper {
  align-items: flex-end;
  clip-path: polygon(46% 7%, 48% 3.5%, 50% 2.5%, 52% 3.5%, 54% 7%, 96.5% 92%, 97.5% 95.5%, 96.5% 98.5%, 93% 100%, 7% 100%, 3.5% 98.5%, 2.5% 95.5%, 3.5% 92%);
}
.die-face10.lower {
  align-items: flex-start;
  clip-path: polygon(46% 93%, 48% 96.5%, 50% 97.5%, 52% 96.5%, 54% 93%, 96.5% 8%, 97.5% 4.5%, 96.5% 1.5%, 93% 0%, 7% 0%, 3.5% 1.5%, 2.5% 4.5%, 3.5% 8%);
}

.d10-num {
  font-size: calc(var(--th) * .25); font-weight: 500; color: #161616;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.die-face10.upper .d10-num { margin-bottom: calc(var(--th) * .055); }
.die-face10.lower .d10-num { margin-top: calc(var(--th) * .055); }
.d10-num.u69 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.dice-stage .history-strip { width: calc(100% + 0px); margin-top: 4px; padding: 8px 12px 10px; border-top: 1px solid var(--line); }
.dice-pred { font-size: 14px; color: var(--muted); letter-spacing: .3px; }
.dice-pred b { color: var(--accent); font-weight: 700; }

/* ---- 0–9 win-zone track ---- */
.dice-track { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 460px; }
.dice-cell {
  min-width: 0; height: clamp(30px, 8.5vw, 40px); display: grid; place-items: center; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  font-size: clamp(12px, 3.4vw, 15px); font-weight: 700; font-variant-numeric: tabular-nums; transition: background .2s, color .2s, transform .15s;
}
.dice-cell.win { background: rgba(14,203,129,.16); color: var(--win); border-color: rgba(14,203,129,.35); }
.dice-cell.barrier { outline: 2px solid var(--accent); outline-offset: -2px; }
.dice-cell.rolled-win  { background: var(--win);  color: #04130d; transform: scale(1.14); box-shadow: 0 0 18px rgba(14,203,129,.6); }
.dice-cell.rolled-lose { background: var(--lose); color: #fff;     transform: scale(1.14); box-shadow: 0 0 18px rgba(246,70,93,.6); }

.dice-readout { font-size: 13px; color: var(--muted); }
.dice-readout b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Controls ---- */
.dice-controls {
  margin: 12px 14px calc(14px + env(safe-area-inset-bottom)); padding: 14px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--r);
  display: flex; flex-direction: column; gap: 12px;
}

.du-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.du-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border-radius: var(--r-sm);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: 14px; letter-spacing: .5px;
  transition: background .15s, color .15s, border-color .15s;
}
.du-btn .ic { width: 15px; height: 15px; }
.du-btn.over.active  { background: rgba(14,203,129,.16); color: var(--win);  border-color: rgba(14,203,129,.5); }
.du-btn.under.active { background: rgba(240,185,11,.16); color: var(--accent); border-color: rgba(240,185,11,.5); }
.du-btn.over .ic  { transform: rotate(90deg); }   /* ← → ↑ */
.du-btn.under .ic { transform: rotate(-90deg); }  /* ← → ↓ */

.dice-bar-row { display: flex; align-items: center; justify-content: space-between; }
.dice-bar-cap { font-size: 12px; color: var(--muted); font-weight: 600; }
.dice-bar-val { font-size: 22px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

.dice-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.dice-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.dice-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; background: #fff; border: 3px solid var(--accent); }
.dice-slider:disabled { opacity: .5; }

.dice .launch-btn { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #1a1300; box-shadow: 0 6px 18px rgba(240,185,11,.3); }

/* ---- polish: smooth transitions + tactile feedback ---- */
.dice-cell { transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s cubic-bezier(.2,1.6,.4,1), box-shadow .25s ease; }
.du-btn { transition: background .15s, color .15s, border-color .15s, transform .08s ease; }
.du-btn:active { transform: scale(.97); }
.dice-bar-val { transition: transform .12s ease; }
.dice-slider::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(0,0,0,.45), 0 0 0 4px rgba(240,185,11,.14); transition: box-shadow .15s ease; }
.dice-slider:active::-webkit-slider-thumb { box-shadow: 0 2px 11px rgba(0,0,0,.55), 0 0 0 8px rgba(240,185,11,.22); }
.dice .launch-btn { transition: transform .07s ease, filter .15s ease, box-shadow .25s ease; }
.dice .launch-btn:active { transform: scale(.985); }
.dice .launch-btn:not(:disabled) { animation: roll-glow 2.3s ease-in-out infinite; }
@keyframes roll-glow { 0%, 100% { box-shadow: 0 6px 18px rgba(240,185,11,.28); } 50% { box-shadow: 0 8px 28px rgba(240,185,11,.5); } }
.dice-readout b { transition: color .2s ease; }

/* History win/lose pills (shared strip) */
.hist-pill.win  { color: var(--win);  border-color: rgba(14,203,129,.4); }
.hist-pill.lose { color: var(--lose); border-color: rgba(246,70,93,.4); }

/* ---- Mobile: native bottom tab bar (Games / Play / My plays) ---- */
@media (max-width: 879px) {
  .dice { padding-bottom: 74px; }
  .dice .mybets { display: none; }
  .dice.view-plays .mybets { display: block; min-height: 60vh; }
  .dice.view-plays .dice-stage,
  .dice.view-plays .dice-controls,
  .dice.view-plays .history-strip { display: none; }
}