/* A small, tactile stage for the four already-committed character dice. */
.dice-theatre{--dt-size:clamp(44px,6.8vw,70px);position:relative;isolation:isolate;margin:13px 0 15px;padding:13px 12px 10px;border:1px solid #78976c;border-radius:16px;background:radial-gradient(ellipse at 50% 60%,#36513a65,transparent 65%),linear-gradient(155deg,#172b26,#10201c 65%,#17271e);box-shadow:inset 0 1px #e5f9bd14,0 9px 25px #020c0822;overflow:hidden}
.dice-theatre[hidden]{display:none!important}
.dice-theatre::before{content:"";position:absolute;inset:6px;border:1px solid #bdd39914;border-radius:11px;pointer-events:none;z-index:-1}
.dth-header{display:flex;align-items:center;gap:8px;position:relative;z-index:2;min-width:0}
.dth-title-icon{display:grid;place-items:center;flex:none;width:32px;height:36px;border:1px solid #a6bd7345;border-radius:9px;background:#b7d2880c;color:#d8ecac}
.dth-title-icon svg{width:20px;height:20px}
.dth-header>div{flex:1;min-width:0}
.dth-header h3{font-size:15px;line-height:1.35;font-weight:600;color:#edf5db;letter-spacing:0}
.dth-header p{font-size:11px;line-height:1.5;color:#b5c5ad;margin-top:2px;overflow-wrap:anywhere}
.dth-skip{flex:none;min-height:44px;min-width:66px;padding:6px 8px;border:1px solid #7d93676b;border-radius:8px;color:#ddecba;background:#193329;font-size:11px;line-height:1.4;cursor:pointer}
.dth-skip:hover:not(:disabled){background:#2b4932;border-color:#bfdb8c}
.dth-skip:focus-visible{outline:2px solid #e0edb5;outline-offset:3px}
.dth-skip:disabled{opacity:.55;cursor:default}
.dth-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:5px 3px 6px;min-width:0}
.dth-grid::before{content:"";position:absolute;inset:52px 0 26px;border:1px solid #9eb98117;border-radius:42%;background:radial-gradient(ellipse,#a0bd7035 1%,#8faf6110 37%,transparent 68%);transform:scaleY(.64);pointer-events:none}
.dth-slot{position:relative;min-width:0;text-align:center;--dt-accent:#d8ecac;--dt-glow:#d8ecac35;--dt-land-x:0deg;--dt-land-y:0deg;--dt-start-x:0deg;--dt-start-y:0deg;--dt-delay:0ms;--dt-duration:1000ms;--dt-drift:12px;--dt-spin:1}
.dth-owner{display:flex;align-items:center;justify-content:center;gap:2px;height:35px;font-size:11px;line-height:1.3;color:#dfead2}
.dth-owner strong{min-width:0;font-size:11px;font-weight:500;overflow-wrap:anywhere}
.dth-portrait{display:block;flex:none;width:24px;height:32px;overflow:hidden}
.dth-portrait>svg{width:24px;height:32px;max-width:none}
.dth-portrait .avatar-shadow{opacity:0}
.dth-throw-space{position:relative;height:112px;perspective:520px;perspective-origin:50% 40%;transform-style:preserve-3d}
.dth-trajectory{position:absolute;left:50%;top:28px;width:var(--dt-size);height:var(--dt-size);margin-left:calc(var(--dt-size) / -2);transform-style:preserve-3d;z-index:2}
.dth-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-15deg) rotateY(-22deg) rotateX(var(--dt-land-x)) rotateY(var(--dt-land-y));will-change:transform}
.dth-facet{position:absolute;inset:0;display:grid;place-items:center;border:1px solid var(--dt-accent);border-radius:10px;background:linear-gradient(145deg,#f4f3d515,#111b160d 60%,#09120e55),linear-gradient(125deg,#31483c,#253a31);color:#e5efce;box-shadow:inset 0 1px 1px #f8ffe266,inset 0 -3px 2px #0a160e55;backface-visibility:hidden;-webkit-backface-visibility:hidden;--icon-cut:#29402f}
.dth-facet::after{content:"";position:absolute;inset:5px;border:1px solid #e8f4c31d;border-radius:6px;pointer-events:none}
.dth-facet>svg,.dth-facet>span>svg{width:52%;height:52%;filter:drop-shadow(0 2px 0 #05110c66)}
.dth-facet>span{position:absolute;inset:0;display:grid;place-items:center}
.dth-facet.dth-symbol-shield{background:linear-gradient(145deg,#6a98a32a,#071d2544),#29434a;--icon-cut:#29434a}
.dth-facet.dth-symbol-arrow{background:linear-gradient(145deg,#a887cc24,#1f152b44),#363d45;--icon-cut:#363d45}
.dth-facet.dth-symbol-star{background:linear-gradient(145deg,#b59b592a,#251e1244),#494330;--icon-cut:#494330}
.dth-facet.dth-symbol-miss{background:linear-gradient(145deg,#77918a22,#0c1a1344),#2e3b34;--icon-cut:#2e3b34}
.dth-symbol-sword{color:#e2efc2}.dth-symbol-shield{color:#b5e0ec}.dth-symbol-arrow{color:#d7b8f6}.dth-symbol-star{color:#f8dc92}.dth-symbol-miss{color:#9cb0a1}
.dth-side-0{transform:translateZ(calc(var(--dt-size) / 2))}
.dth-side-1{transform:rotateY(180deg) translateZ(calc(var(--dt-size) / 2))}
.dth-side-2{transform:rotateY(90deg) translateZ(calc(var(--dt-size) / 2))}
.dth-side-3{transform:rotateY(-90deg) translateZ(calc(var(--dt-size) / 2))}
.dth-side-4{transform:rotateX(90deg) translateZ(calc(var(--dt-size) / 2))}
.dth-side-5{transform:rotateX(-90deg) translateZ(calc(var(--dt-size) / 2))}
.dth-shadow{position:absolute;left:50%;top:94px;width:calc(var(--dt-size) * 1.16);height:17px;margin-left:calc(var(--dt-size) * -.58);border-radius:50%;background:radial-gradient(ellipse,#020b08bb,transparent 70%);transform:scale(.92);opacity:.9;z-index:0}
.dth-landing-ring{position:absolute;left:50%;top:79px;width:calc(var(--dt-size) * 1.25);height:28px;margin-left:calc(var(--dt-size) * -.625);border:2px solid var(--dt-accent);box-shadow:0 0 13px var(--dt-glow),inset 0 0 10px var(--dt-glow);border-radius:50%;transform:scale(.4);opacity:0;z-index:0}
.dth-spark{position:absolute;left:50%;top:73px;width:4px;height:4px;background:var(--dt-accent);box-shadow:0 0 7px var(--dt-accent);transform:rotate(45deg);opacity:0;border-radius:1px;z-index:1}
.dth-spark-one{--dt-spark-x:-29px;--dt-spark-y:-21px}.dth-spark-two{--dt-spark-x:29px;--dt-spark-y:-14px}.dth-spark-three{--dt-spark-x:8px;--dt-spark-y:-38px}
.dth-result{display:block;position:relative;z-index:2;min-height:20px;font-size:13px;line-height:1.45;font-weight:600;letter-spacing:.1px;color:var(--dt-accent);opacity:.6;transform:translateY(3px);transition:opacity .18s,transform .18s}
.dth-six-faces{display:flex;align-items:center;justify-content:center;gap:3px;height:22px;margin-top:1px;color:#b6c7a9;opacity:.72}
.dth-six-faces svg{width:11px;height:11px;flex:none}
.dth-shaped-note{display:flex;justify-content:center;align-items:center;gap:3px;font-size:10px;line-height:1.3;color:#f4d998;min-height:15px;opacity:0}
.dth-shaped-note svg{width:10px;height:10px}
.dth-rune-old,.dth-rune-new{transition:opacity .18s}
.dth-rune-new{opacity:0}
.dth-transformed .dth-rune-old{opacity:0}
.dth-transformed .dth-rune-new{opacity:1}
.dth-transformed .dth-shaped-note{opacity:1}
.dth-active.dth-flying .dth-trajectory{animation:dth-toss var(--dt-duration) cubic-bezier(.24,.56,.26,1) var(--dt-delay) both}
.dth-active.dth-flying .dth-cube{animation:dth-tumble var(--dt-duration) cubic-bezier(.16,.51,.32,1) var(--dt-delay) both}
.dth-active.dth-flying .dth-shadow{animation:dth-air-shadow var(--dt-duration) ease-out var(--dt-delay) both}
.dice-theatre[data-kind="shape"] .dth-active.dth-flying .dth-trajectory{animation-name:dth-enchant-lift}
.dice-theatre[data-kind="shape"] .dth-active.dth-flying .dth-cube{animation-name:dth-enchant-turn}
.dth-landed .dth-result{opacity:1;transform:translateY(0)}
.dth-active.dth-landed .dth-landing-ring{animation:dth-land-ring .32s ease-out both}
.dth-active.dth-landed .dth-spark{animation:dth-land-spark .32s ease-out both}
.dth-active.dth-landed .dth-result{animation:dth-result-arrive .22s ease-out both}
.dth-stationary .dth-cube{will-change:auto}
.dth-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:2;border-top:1px solid #9caf7626;padding-top:7px;min-height:27px}
.dth-status{font-size:11px;line-height:1.5;color:#b9ccab;min-width:0;max-width:100%;overflow-wrap:anywhere}
.dth-progress{flex:none;display:block;width:45px;height:3px;background:#78916238;border-radius:10px;overflow:hidden}
.dth-progress-fill{display:block;width:100%;height:100%;background:#dbedb4;transform:scaleX(0);transform-origin:left center;transition:transform .18s}
.dth-complete .dth-status{color:#dfedc7}
.dth-complete .dth-cube{will-change:auto}
@keyframes dth-toss{0%{transform:translate3d(calc(var(--dt-drift) * -1.6),-20px,15px) scale(.7)}22%{transform:translate3d(var(--dt-drift),-28px,40px) scale(1.08)}48%{transform:translate3d(calc(var(--dt-drift) * -.4),3px,0) scale(.97)}69%{transform:translate3d(calc(var(--dt-drift) * .25),-11px,6px) scale(1.025)}85%{transform:translate3d(0,2px,0) scale(1,.97)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes dth-tumble{0%{transform:rotateX(610deg) rotateY(calc(535deg * var(--dt-spin))) rotateX(var(--dt-land-x)) rotateY(var(--dt-land-y))}45%{transform:rotateX(210deg) rotateY(calc(135deg * var(--dt-spin))) rotateX(var(--dt-land-x)) rotateY(var(--dt-land-y))}77%{transform:rotateX(-31deg) rotateY(-35deg) rotateX(var(--dt-land-x)) rotateY(var(--dt-land-y))}90%{transform:rotateX(-9deg) rotateY(-18deg) rotateX(var(--dt-land-x)) rotateY(var(--dt-land-y))}100%{transform:rotateX(-15deg) rotateY(-22deg) rotateX(var(--dt-land-x)) rotateY(var(--dt-land-y))}}
@keyframes dth-air-shadow{0%{transform:scale(.65);opacity:.35}24%{transform:scale(.58);opacity:.22}48%{transform:scale(1.08);opacity:.9}70%{transform:scale(.79);opacity:.56}100%{transform:scale(.92);opacity:.9}}
@keyframes dth-enchant-lift{0%{transform:translateY(0)}30%{transform:translateY(-13px)}65%{transform:translateY(-10px)}84%{transform:translateY(2px)}100%{transform:translateY(0)}}
@keyframes dth-enchant-turn{0%{transform:rotateX(-15deg) rotateY(-22deg) rotateX(var(--dt-start-x)) rotateY(var(--dt-start-y))}30%{transform:rotateX(-70deg) rotateY(120deg) rotateX(var(--dt-start-x)) rotateY(var(--dt-start-y))}70%{transform:rotateX(-22deg) rotateY(348deg) rotateX(var(--dt-land-x)) rotateY(var(--dt-land-y))}100%{transform:rotateX(-15deg) rotateY(338deg) rotateX(var(--dt-land-x)) rotateY(var(--dt-land-y))}}
@keyframes dth-land-ring{0%{opacity:.74;transform:scale(.4)}100%{opacity:0;transform:scale(1.45)}}
@keyframes dth-land-spark{0%{opacity:0;transform:translate(0,0) rotate(45deg) scale(.2)}18%{opacity:.9}100%{opacity:0;transform:translate(var(--dt-spark-x),var(--dt-spark-y)) rotate(100deg) scale(.4)}}
@keyframes dth-result-arrive{0%{transform:translateY(4px);opacity:.3}100%{transform:translateY(0);opacity:1}}
@media(max-width:680px){.dice-theatre{--dt-size:clamp(43px,11vw,64px);padding:11px 8px 9px}.dth-grid{gap:4px}.dth-header h3{font-size:14px}.dth-owner{height:36px}.dth-throw-space{height:107px}.dth-shadow{top:88px}.dth-landing-ring{top:75px}.dth-facet{border-radius:9px}}
@media(max-width:420px){.dice-theatre{--dt-size:45px;margin:11px 0 13px;padding:10px 7px 8px}.dth-title-icon{display:none}.dth-header{gap:7px}.dth-header h3{font-size:14px}.dth-header p{font-size:10px}.dth-skip{font-size:11px;min-width:60px;padding:5px 6px}.dth-grid{gap:3px;padding-left:0;padding-right:0}.dth-owner{flex-direction:column;height:50px;gap:0}.dth-portrait{width:22px;height:26px}.dth-portrait>svg{width:22px;height:28px}.dth-owner strong{font-size:10px;line-height:1.3;min-height:13px}.dth-throw-space{height:87px}.dth-trajectory{top:23px}.dth-shadow{top:70px;height:14px}.dth-landing-ring{top:61px;height:22px}.dth-spark{top:57px}.dth-result{font-size:12px;min-height:18px}.dth-six-faces{gap:2px;height:18px}.dth-six-faces svg{width:9px;height:10px}.dth-status{font-size:10px}.dth-footer{gap:7px}.dth-progress{width:30px}}
@media(max-width:350px){.dice-theatre{--dt-size:39px}.dth-header h3{font-size:13px}.dth-header p{font-size:10px}.dth-skip{min-width:55px}.dth-six-faces{gap:1px}.dth-six-faces svg{width:8px}.dth-owner strong{font-size:9px}.dth-facet{border-radius:7px}.dth-facet::after{inset:4px;border-radius:4px}}
.dice-theatre[data-motion="reduced"] *,.dice-theatre[data-motion="reduced"] *::before,.dice-theatre[data-motion="reduced"] *::after{animation:none!important;transition:none!important}
.dice-theatre[data-motion="reduced"] .dth-cube{will-change:auto}
@media(prefers-reduced-motion:reduce){.dice-theatre *,.dice-theatre *::before,.dice-theatre *::after{animation:none!important;transition:none!important}.dth-cube{will-change:auto}}