.ivory-render{position:absolute;width:calc(var(--die) + 32px);height:calc(var(--die) + 32px);left:calc(50% - var(--half) - 16px);top:calc(50% - var(--half) - 16px);display:block;}
.ivory-render[hidden]{display:none;}
.ivory-render-fallback{background-image:url('../assets/ui/ivory-dice-atlas.png');background-size:600% 700%;background-repeat:no-repeat;}
#dice-overlay #d-phase2{grid-column:1/-1;grid-row:2;background:radial-gradient(ellipse at 50% 0,#294052,#142431 70%);border:1px solid #ac915b;border-radius:16px;padding:12px 12px 14px;box-sizing:border-box;}
#dice-overlay #d-phase3{grid-column:1/-1;grid-row:3;}
#dice-overlay #d-phase4{grid-row:4;}
#dice-overlay .d-scroll,#dice-overlay .compact-board .d-scroll{max-height: min(480px,65vh);}
#dice-overlay .d-dice-row{gap:12px;align-items:flex-start;}
#dice-overlay .d-dice-col{flex:1;min-width:0;gap:6px;}
#dice-overlay .d-dice-who{color:#ecdfbd;font-size:10px;letter-spacing:1px;}
#dice-overlay .dbox{--die:54px;--half:27px;--edge:#c9b991;--rim:1px;position:relative;width:116px;height:104px;background:none;border:0;border-radius:0;box-shadow:none;perspective:650px;overflow:visible;}
#dice-overlay .dbox.winner{background:none;border:0;box-shadow:none;}
#dice-overlay .dbox.winner .ivory-shadow{box-shadow:0 0 16px 7px #dfba6055;}
#dice-overlay .dval{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);animation:none;}
.ivory-scene{position:absolute;inset:0;perspective:650px;}
.ivory-flight{position:absolute;left:calc(50% - var(--half));top:22px;width:var(--die);height:var(--die);transform-style:preserve-3d;}
.ivory-shadow{position:absolute;left:19%;bottom:6px;width:62%;height:15px;border-radius:50%;background:#0009;filter:blur(5px);}
#dice-overlay .dbox[data-direction="higher"]{--edge:#d5ae55;}
#dice-overlay .dbox[data-direction="lower"]{--edge:#6f9dbd;}
#dice-overlay .dbox[data-strength="1"]{--rim:2px;}
#dice-overlay .dbox[data-strength="2"]{--rim:4px;}
#dice-overlay .dbox[data-strength="3"]{--rim:5px;}
#dice-overlay .ivory-setting{color:#e5dcc7;font:600 9px/1.4 var(--fb);text-align:center;min-height:26px;max-width:140px;}
#dice-overlay .ivory-setting[data-direction="higher"]{color:#f2cf7c;}
#dice-overlay .ivory-setting[data-direction="lower"]{color:#a9d3f1;}
#dice-overlay .dmod{display:none;}
#dice-overlay .dbase{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;max-width:150px;min-height:34px;color:#f4ead4;font:500 10px/1.4 var(--fb);opacity:1;}
.ivory-original{flex-basis:100%;text-align:center;color:#c8d3da;}
.ivory-token{border-radius:50%;padding:5px;min-width:20px;text-align:center;font-weight:800;box-shadow:inset 0 0 0 1px #fff6,0 2px 5px #0005;}
.ivory-token.positive{color:#35280e;background:#efcd7a;}
.ivory-token.negative{color:#fff4ec;background:#a9483c;}
.ivory-total{padding:4px 8px;border:1px solid #af9662;border-radius:5px;background:#f8ecd3;color:#273342;font-size:12px;}
.ivory-note{flex-basis:100%;text-align:center;color:#d4dee5;font-size:9px;}
.applying~.dbase .ivory-token{animation:ivoryToken .4s ease-out both;}
.applying~.dbase .ivory-total{animation:ivoryTotal .4s ease-out both;}
@keyframes ivoryToken{from{transform:translateY(-12px) scale(1.4);opacity:0;}to{transform:none;opacity:1;}}
@keyframes ivoryTotal{from{transform:scale(.85);opacity:.3;}to{transform:none;opacity:1;}}
@media(prefers-reduced-motion:reduce){.applying~.dbase .ivory-token,.applying~.dbase .ivory-total{animation:none;}}

/* Two actual dice share the existing tray without widening it. */
#dice-overlay .dbox.prayers-pair .ivory-scene{width:50%;right:auto;transform:scale(.72);transform-origin:center;}
#dice-overlay .dbox.prayers-pair .ivory-second{left:50%;}
.ivory-scene[hidden]{display:none;}

/* The whole tray is a generous touch target while waiting for a throw. */
#dice-overlay #d-phase2:has(.dice-throw:not([hidden])){touch-action:none;user-select:none;cursor:grab;}
#dice-overlay #d-phase2:has(.dice-throw.dragging){cursor:grabbing;}
.dice-throw{display:block;margin:4px auto 0;min-height:44px;padding:8px 18px;border:1px solid #eed38c;border-radius:24px;background:#f0d696;color:#243940;font:600 12px/1.2 var(--fb);cursor:grab;touch-action:none;}
.dice-throw[hidden]{display:none;}
.dice-throw span{display:inline-block;margin-right:6px;font-size:19px;}
.dice-throw:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.dice-throw.dragging{background:#fff0ca;}

.dice-swipe-cue{display:none;position:absolute;z-index:3;left:50%;top:8px;width:30px;height:70px;pointer-events:none;border-radius:20px;background:linear-gradient(0deg,#f5db9400,#f5db9444);}
.awaiting-throw .dice-swipe-cue{display:block;}
.dice-swipe-finger{position:absolute;bottom:0;left:0;font-size:32px;filter:drop-shadow(0 2px 3px #0009);animation:diceSwipeNudge 1.8s ease-in-out infinite;}
#d-phase2:has(.dragging) .dice-swipe-cue{visibility:hidden;}
@keyframes diceSwipeNudge{0%,15%{transform:translateY(8px);opacity:0;}25%{opacity:1;}70%{transform:translateY(-42px);opacity:1;}85%,100%{transform:translateY(-42px);opacity:0;}}
@media(prefers-reduced-motion:reduce){.dice-swipe-finger{animation:none;opacity:1;}.dice-swipe-cue{background:none;}}

.dice-countdown{display:inline-block;min-width:24px;margin-left:8px;padding:4px;border-radius:50%;background:#243940;color:#fff;font-size:11px;font-variant-numeric:tabular-nums;}
/* each die stays off the table until its side's turn to roll */
#dice-overlay .dbox{transition:opacity .2s ease;}
#dice-overlay .dbox.die-waiting{opacity:0;visibility:hidden;}