/* The die travels directly over the board; only its natural contact shadow remains. */
#die{--edge:34px;position:relative;isolation:isolate;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;transform:none!important;border-radius:0!important}
#die.rolling{animation:none!important}#die.rolling .dice-flight,#die.rolling .dice-shadow{opacity:0!important}
.dice-flight{position:absolute;left:calc(50% - var(--edge)/2);top:calc(60% - var(--edge)/2);width:var(--edge);height:var(--edge);will-change:transform;pointer-events:none}
.dice-cube{position:absolute;left:-50%;top:-50%;width:200%;height:200%;pointer-events:none}
.dice-shadow{position:absolute;left:calc(50% - var(--edge)*.57);top:calc(60% - var(--edge)*.34);width:calc(var(--edge)*1.35);height:calc(var(--edge)*.83);border-radius:50%;background:#14232a;opacity:.3;pointer-events:none;will-change:transform}
#diceThrow{position:absolute;inset:0;pointer-events:none;z-index:22;overflow:hidden;border-radius:10px}
#diceThrow .dice-flight{top:calc(50% - var(--edge)/2)}#diceThrow .dice-shadow{top:calc(50% - var(--edge)*.34)}
.match[data-layout=wide] #die{--edge:40px}
.match[data-layout=stack] #die{--edge:32px}
@media(max-height:600px){.match[data-layout=wide] #die{--edge:35px}}
@media(max-height:430px){.match[data-layout=wide] #die{--edge:28px}}
@media(max-width:699px) and (orientation:portrait) and (min-height:740px){.match[data-layout=stack] #die{--edge:37px}}
@media(prefers-reduced-motion:reduce){.dice-flight{will-change:auto}}
#diceMotionSetting{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:800;margin-top:14px;color:#405541;min-height:28px}#diceMotion{width:18px;height:18px;accent-color:#278660}
