.party-page[data-party=dice] .party-layout{width:min(100%,660px)}
.party-page[data-party=dice] .party-toolbar{margin-bottom:0}
.party-page[data-party=dice] .party-stage{gap:0;min-height:0}
.dice-studio{position:relative;width:100%;height:clamp(290px,calc(100dvh - 280px),540px);border-radius:26px;cursor:grab;touch-action:none;outline-offset:-6px!important;-webkit-user-select:none;user-select:none}
.dice-studio[aria-disabled=true]{cursor:default}.dice-studio:active{cursor:grabbing}
.dice-viewport{position:absolute;inset:0;overflow:hidden;border-radius:26px;background:radial-gradient(ellipse at 50% 48%,#29292955,transparent 70%)}
.dice-canvas{display:block;width:100%;height:100%;pointer-events:none}
.dice-readout{min-height:60px;width:100%;display:flex;justify-content:center;align-items:center;gap:12px;font-variant-numeric:tabular-nums}
.dice-instruction{font-size:12px;color:#888;letter-spacing:.025em}
.dice-readout strong{font-weight:400;font-size:35px;letter-spacing:-.06em;line-height:1}
.dice-total-label{font-size:11px;color:#8a8a8a}.dice-values{font-size:12px;color:#777;margin-left:12px;letter-spacing:.15em}
.party-page[data-party=dice] .party-actions{margin-top:8px;display:grid;grid-template-columns:1fr auto;gap:8px;width:min(100%,360px)}
.dice-roll-button{min-width:142px}.party-page[data-party=dice] .privacy-toggle{height:48px;padding:0 16px;border:0;border-radius:12px;font-family:var(--sans);font-size:12px;background:#232323;color:#888;cursor:pointer;white-space:nowrap}
.party-page[data-party=dice] .privacy-toggle[aria-pressed=true]{background:#363636;color:#ddd}
.dice-peek{grid-column:1/-1;min-height:48px}
.dice-fallback{position:absolute;inset:0;display:flex;align-content:center;align-items:center;justify-content:center;flex-wrap:wrap;gap:24px;padding:35px;background:radial-gradient(ellipse,#292929,#202020);border-radius:28px}
.fallback-die{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:56px;height:56px;padding:10px;gap:4px;border-radius:13px;transform:rotate(-9deg);background:linear-gradient(135deg,#e4e4e4,#aaa);box-shadow:inset 0 1px #fff8,3px 5px #737373,4px 10px 10px #0007}
.fallback-die:nth-child(even){transform:rotate(12deg)}.fallback-die i{border-radius:50%;background:#292929;box-shadow:inset 0 2px 2px #111,0 1px #fff7}
.dice-fallback[data-rolling=true] .fallback-die{animation:dice-fallback-toss .36s ease-out}
@keyframes dice-fallback-toss{50%{transform:translateY(-12px) rotate(30deg)}100%{transform:rotate(-9deg)}}
@media(max-width:760px){.party-page[data-party=dice] .party-layout{width:100%}.dice-studio{height:clamp(270px,calc(100dvh - 258px),520px);margin:0 -10px;width:calc(100% + 20px)}.dice-readout{min-height:52px}.party-page[data-party=dice] .party-actions{margin-top:4px}}
@media(max-height:650px){.dice-studio{height:clamp(225px,calc(100dvh - 248px),360px)}.dice-readout{min-height:44px}.party-page[data-party=dice] .party-actions{margin-top:0}}
@media(prefers-reduced-motion:reduce){.dice-fallback .fallback-die{animation:none}}

.party-page[data-party=dice][data-private=true] .dice-studio{height:clamp(215px,calc(100dvh - 305px),492px)}

.dice-fallback[data-concealed=true] .fallback-die{background:linear-gradient(135deg,#494949,#292929);box-shadow:inset 0 1px #ffffff15,3px 5px #1f1f1f,4px 10px 10px #0005}
@media(max-width:360px){.dice-fallback{padding:20px;gap:18px}.fallback-die{width:51px;height:51px;padding:9px}}

/* A small instrument dock: shape first, surface finish second. */
.dice-kit{width:min(100%,420px);margin:10px auto 0;display:grid;gap:7px}
.dice-shapes,.dice-finishes{display:flex;justify-content:center;gap:4px}
.dice-shapes button,.dice-finishes button{display:flex;align-items:center;justify-content:center;border:0;box-shadow:none;cursor:pointer;font-family:var(--sans);background:transparent;color:#767676;transition:background .18s,color .18s,box-shadow .18s}
.dice-shapes button{flex:1;height:42px;gap:8px;border-radius:10px;font-size:11px;font-variant-numeric:tabular-nums}
.dice-shapes svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:.85;stroke-linejoin:round}
.dice-shapes button[aria-pressed=true]{background:linear-gradient(#383838,#2b2b2b);color:#e3e3e3;box-shadow:inset 0 1px #ffffff10,0 3px 8px #0003}
.dice-finishes button{min-height:38px;flex:1;gap:7px;border-radius:9px;font-size:10px;white-space:nowrap}
.dice-finishes button[aria-pressed=true]{color:#d4d4d4;background:#ffffff05}
.dice-finishes i{display:block;width:17px;height:17px;flex:0 0 17px;border-radius:50%;box-shadow:inset 0 1px 1px #fff5,0 2px 3px #0005;position:relative}
.dice-finishes [data-material=ceramic] i{background:linear-gradient(140deg,#e7e7e7,#999)}
.dice-finishes [data-material=graphite] i{background:linear-gradient(140deg,#5c5c5c,#181818)}
.dice-finishes [data-material=titanium] i{background:linear-gradient(105deg,#555,#ddd 35%,#777 60%,#bbb)}
.dice-finishes [data-material=resin] i{background:radial-gradient(circle at 70% 80%,#ffffff55,transparent 60%),linear-gradient(135deg,#bcbcbc88,#7775);box-shadow:inset 0 0 3px #fff8,0 2px 3px #0005}
.dice-finishes button[aria-pressed=true] i::after{content:'';position:absolute;inset:-3px;border:1px solid #999;border-radius:50%}
.dice-kit button:disabled{cursor:default;opacity:.5}
.dice-studio{height:clamp(235px,calc(100dvh - 374px),500px)}
.party-page[data-party=dice][data-private=true] .dice-studio{height:clamp(198px,calc(100dvh - 425px),450px)}
.fallback-number{display:flex;align-items:center;justify-content:center;color:#222;font:700 26px var(--sans);border-radius:9px}
.dice-fallback[data-sides="4"] .fallback-number{clip-path:polygon(50% 0,100% 100%,0 100%);padding-top:22px}
.dice-fallback[data-sides="8"] .fallback-number,.dice-fallback[data-sides="20"] .fallback-number{clip-path:polygon(50% 0,100% 28%,90% 84%,50% 100%,10% 84%,0 28%)}
.dice-fallback[data-sides="12"] .fallback-number{clip-path:polygon(30% 0,70% 0,100% 40%,80% 100%,20% 100%,0 40%)}
.dice-fallback[data-material=graphite] .fallback-die{background:linear-gradient(135deg,#494949,#242424);color:#ddd}.dice-fallback[data-material=graphite] .fallback-die i{background:#bbb}
.dice-fallback[data-material=titanium] .fallback-die{background:linear-gradient(110deg,#999,#ddd 30%,#888 65%,#aaa)}
.dice-fallback[data-material=resin] .fallback-die{background:linear-gradient(135deg,#a5a5a5,#777)}
@media(max-width:760px){.dice-kit{margin-top:5px;gap:2px}.dice-studio{height:clamp(210px,calc(100dvh - 349px),520px)}.party-page[data-party=dice][data-private=true] .dice-studio{height:clamp(165px,calc(100dvh - 397px),470px)}}
@media(max-height:650px){.dice-kit{margin-top:0;gap:0}.dice-studio{height:clamp(180px,calc(100dvh - 330px),320px)}.party-page[data-party=dice][data-private=true] .dice-studio{height:clamp(150px,calc(100dvh - 378px),275px)}}
.dice-shapes button,.dice-finishes button{min-width:0;padding:0}
@media(max-width:360px){.dice-shapes button{gap:5px}.dice-shapes svg{width:20px;height:20px}.dice-finishes button{gap:5px;font-size:9px}}

.dice-finish-line{display:flex;align-items:center;gap:8px;min-width:0}.dice-finish-line .dice-finishes{flex:1;min-width:0}
.dice-sound-picker{position:relative;flex:none;z-index:4}
.dice-sound-toggle{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 11px;border:0;border-radius:10px;background:#292929;color:#bbb;font:400 11px var(--sans);white-space:nowrap;box-shadow:inset 0 1px #ffffff08,0 2px 5px #0002}
.dice-sound-toggle svg{width:15px;height:15px}.dice-sound-picker svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.dice-sound-toggle[aria-expanded=true]{background:#363636;color:#ddd}
.dice-sound-menu{position:absolute;right:0;top:calc(100% + 9px);width:254px;max-width:calc(100vw - 32px);padding:16px 10px 12px;border-radius:16px;background:linear-gradient(145deg,#303030,#252525);box-shadow:0 14px 32px #0008,inset 0 1px #ffffff0a}
.dice-sound-title{padding:0 5px 12px;font-size:12px;color:#ccc}
.dice-sound-options{display:flex;gap:5px}.dice-sound-options button{flex:1;min-width:0;min-height:67px;padding:9px 3px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;background:transparent;border:0;border-radius:10px;color:#929292;font:400 12px var(--sans)}
.dice-sound-options svg{width:25px;height:25px;stroke-width:1.2}.dice-sound-options button[aria-pressed=true]{color:#e1e1e1;background:linear-gradient(#484848,#393939);box-shadow:inset 0 1px #ffffff08,0 3px 6px #0002}
.dice-sound-hint{padding:12px 5px 0;font-size:10px;color:#858585;text-align:center}
@media(max-width:480px){.dice-finish-line{gap:5px}.dice-sound-toggle{width:36px;padding:0}.dice-sound-toggle span{display:none}.dice-finish-line .dice-finishes button{gap:5px}.dice-finish-line .dice-finishes i{width:15px;height:15px;flex-basis:15px}}

.dice-values{font-size:13px;font-weight:500;color:#aaa;letter-spacing:.10em}
@media(prefers-reduced-motion:no-preference){
 .dice-fallback[data-settled=true] .fallback-number{animation:dice-number-readout 1.05s ease-out}
 .dice-fallback[data-settled=true] .fallback-die i{animation:dice-pip-readout 1.05s ease-out}
 @keyframes dice-number-readout{0%,100%{text-shadow:0 0 0 transparent}15%,27%{text-shadow:0 0 3px #fff2d1,0 0 12px #ffdf9bcc}}
 @keyframes dice-pip-readout{0%,100%{box-shadow:inset 0 2px 2px #111,0 1px #fff7}15%,27%{box-shadow:inset 0 0 7px #fff1ce,0 0 9px #ffe9bbaa}}
}

/* The desktop table uses the window's height; controls sit beside the tray. */
@media(min-width:761px) and (max-width:999px){
 .party-page[data-party=dice] .party-layout{width:100%}
 .party-page[data-party=dice] .dice-kit{display:flex;align-items:center;justify-content:center;gap:16px;width:min(100%,580px);margin-top:6px}
 .party-page[data-party=dice] .dice-shapes{flex:1;min-width:280px}
 .party-page[data-party=dice] .dice-studio{height:max(200px,calc(100dvh - 320px))}
 .party-page[data-party=dice][data-private=true] .dice-studio{height:max(165px,calc(100dvh - 376px))}
}
@media(min-width:1000px){
 .party-page[data-party=dice] .shell{max-width:1920px;padding:0 clamp(24px,2.5vw,48px) 16px}
 .party-page[data-party=dice] .party-layout{display:grid;grid-template-columns:minmax(0,1fr) 224px;grid-template-rows:1fr auto 1fr;column-gap:clamp(16px,2vw,36px);row-gap:18px;width:100%;height:calc(100dvh - 96px);min-height:440px;margin:8px auto 0}
 .party-page[data-party=dice] .party-stage{grid-column:1;grid-row:1/-1;display:grid;grid-template-rows:minmax(0,1fr) 52px;align-items:stretch;justify-content:stretch;min-width:0;min-height:0}
 .party-page[data-party=dice] .dice-studio,.party-page[data-party=dice][data-private=true] .dice-studio{height:100%;min-height:0;width:100%;margin:0}
 .party-page[data-party=dice] .party-toolbar{grid-column:2;grid-row:1;align-self:end;flex-direction:column;align-items:flex-start;gap:8px;margin:0}
 .party-page[data-party=dice] .party-toolbar>a{min-height:28px}
 .party-page[data-party=dice] .party-options{width:100%;justify-content:space-between;gap:3px}
 .party-page[data-party=dice] .party-options>span{margin-right:3px}
 .party-page[data-party=dice] .party-options #party-help{margin-left:0}
 .party-page[data-party=dice] .dice-kit{grid-column:2;grid-row:2;width:100%;margin:0;gap:16px}
 .party-page[data-party=dice] .dice-shapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .party-page[data-party=dice] .dice-shapes button{height:64px;flex-direction:column;gap:6px}
 .party-page[data-party=dice] .dice-readout{min-height:52px;align-self:center}
 .party-page[data-party=dice] .party-actions{grid-column:2;grid-row:3;align-self:start;width:100%;margin:0;grid-template-columns:1fr;gap:8px}
 .party-page[data-party=dice] .privacy-toggle{width:100%}
 .party-page[data-party=dice] .dice-fallback{inset:3% max(0px,calc((100% - 88dvh)/2))}
 .party-page[data-party=dice] .fallback-die{width:clamp(64px,7.8dvh,108px);height:clamp(64px,7.8dvh,108px);padding:clamp(11px,1.4dvh,18px);gap:6px}
 .party-page[data-party=dice] .fallback-number{font-size:clamp(28px,4dvh,42px)}
}
