/* Dice's own look, on the game template (static/game.css styles the shell): one canvas stage (static/dice.js draws the
   number, the track, the gold target tag and the ivory puck) and the hairline Under ⇄ Over under the track. */

.dc-stage { position: relative; flex: 1; min-height: 300px; }
.dc-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.dc-cv:focus-visible { box-shadow: inset 0 0 0 1.5px rgb(216 165 72 / .7); border-radius: 14px; }
.dc-sw.gm-sec { --fill: var(--stage); position: absolute; left: 50%; top: 70%; z-index: 2; translate: -50% 0; min-width: 0; height: 34px; padding: 0 12px;
  display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--f-ui); }
.dc-sw span { color: var(--ink-3); transition: color var(--t-hover); }
.dc-sw span.on { color: var(--ink); }
.dc-sw svg { width: 16px; height: 16px; overflow: visible; }
.dc-sw path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gm.playing .dc-sw, .gm.autoplaying .dc-sw { opacity: .5; cursor: default; }
@media (max-width: 899px) { .dc-stage { min-height: 292px; } .gm[data-game="dice"] .gm-play { min-height: 0; } }