.dice-utility-row{display:flex;align-items:center;justify-content:center;gap:8px}
.dice-wardrobe-toggle{display:flex;align-items:center;justify-content:center;gap:9px;height:38px;padding:0 17px;border:0;border-radius:10px;background:linear-gradient(#303030,#292929);box-shadow:inset 0 1px #ffffff09,0 3px 7px #0002;color:#c4c4c4;font:400 11px var(--sans)}
.dice-wardrobe-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}
.dice-utility-row .dice-sound-toggle{width:auto;padding:0 14px}.dice-utility-row .dice-sound-toggle span{display:inline}
.dice-utility-row .dice-sound-menu{right:50%;transform:translateX(50%)}
.dice-wardrobe{position:fixed;inset:126px max(20px,calc((100vw - 1180px)/2)) auto auto;width:340px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 150px);margin:0;padding:17px 15px 16px;border:0;border-radius:23px;background:linear-gradient(145deg,#303030,#242424);box-shadow:inset 0 1px #ffffff0b,0 24px 60px #0007;color:#ddd;overflow:hidden;font-family:var(--sans)}
.dice-wardrobe::backdrop{background:#00000012;backdrop-filter:none}
.dice-wardrobe[open]{display:flex;flex-direction:column;gap:13px}
.dice-wardrobe-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.dice-wardrobe .dice-wardrobe-heading h2{margin:0;font:400 16px var(--sans);letter-spacing:0}
.dice-wardrobe-done{min-height:34px;padding:0 11px;border:0;border-radius:9px;background:#ffffff07;color:#bababa;font:400 11px var(--sans)}
.dice-wardrobe-tabs{display:flex;gap:4px;flex:none;padding:3px;border-radius:11px;background:#17171755}
.dice-wardrobe-tabs button{flex:1;min-height:32px;border:0;border-radius:8px;background:transparent;color:#929292;font:400 12px var(--sans)}
.dice-wardrobe-tabs button[aria-selected=true]{background:#414141;color:#e1e1e1;box-shadow:0 2px 5px #0002}
.dice-wardrobe-content{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;min-height:0;scrollbar-width:thin;scrollbar-color:#555 transparent;padding:2px}
.dice-wardrobe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dice-wardrobe-choice{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;gap:2px;min-height:108px;padding:6px 3px 9px;background:linear-gradient(#292929,#242424);border:0;border-radius:12px;color:#959595;font:400 10px/1.3 var(--sans);box-shadow:inset 0 1px #ffffff05,0 2px 4px #0002}
.dice-wardrobe-choice[aria-pressed=true]{color:#e0e0e0;background:linear-gradient(#474747,#383838);box-shadow:inset 0 1px #ffffff10,0 3px 7px #0003}
.wardrobe-sample{display:block;width:100%;height:73px}.wardrobe-sample svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 3px #0003)}
.wardrobe-label{padding:0 3px;text-align:center;max-width:100%;min-height:14px}
.wardrobe-price{font:400 9px/1.4 var(--sans);color:#aaa;margin-top:3px}.wardrobe-status{font:400 12px/1.5 var(--sans);color:#ccc;margin:0}.dice-wardrobe-choice[data-locked=true]{min-height:120px}
.dice-wardrobe-choice i{display:none;position:absolute;right:7px;top:5px;font-style:normal;font-size:10px;color:#bcbcbc}.dice-wardrobe-choice[aria-pressed=true] i{display:block}
.dice-wardrobe :is(button):focus-visible{outline:1.5px solid #aaa;outline-offset:-2px}
@media(max-width:1000px){.dice-wardrobe{right:16px;top:120px;width:320px}}
@media(max-width:760px){.dice-wardrobe{inset:auto 12px max(12px,env(safe-area-inset-bottom)) 12px;width:auto;max-width:420px;margin-inline:auto;max-height:58dvh;padding:13px 13px 15px}.dice-wardrobe[open]{gap:10px}.dice-wardrobe-choice{min-height:101px}.wardrobe-sample{height:66px}}
@media(prefers-reduced-motion:no-preference){.dice-wardrobe[open]{animation:wardrobe-enter .18s ease-out}@keyframes wardrobe-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}
/* Matching low-power surfaces keep the kit playable without WebGL. */
.dice-fallback[data-tray=vermilion]{background:radial-gradient(ellipse at 35% 20%,#a4362b,#711f1b);box-shadow:inset 0 0 0 8px #65211b}
.dice-fallback[data-tray=cognac]{background:radial-gradient(ellipse at 35% 20%,#815036,#53331f);box-shadow:inset 0 0 0 8px #493020}
.dice-fallback[data-tray=forest]{background:radial-gradient(ellipse at 35% 20%,#354d3f,#20352a);box-shadow:inset 0 0 0 8px #1d2c23}
.dice-fallback[data-tray=aluminium]{background:repeating-linear-gradient(0deg,#727577 0 1px,#747779 1px 2px);box-shadow:inset 0 0 0 8px #a0a2a3}
.dice-fallback[data-material=amber] .fallback-die{background:linear-gradient(140deg,#a67834,#392313 45%,#936326);color:#d9b365}.dice-fallback[data-material=amber] .fallback-die i{background:#d9b365;box-shadow:inset 0 1px 2px #6d4d21}
.dice-fallback[data-material=crystal] .fallback-die{background:linear-gradient(135deg,#d4e1dcaa,#697a7266);color:#26362d}
.dice-fallback[data-concealed=true] .fallback-die{background:linear-gradient(135deg,#494949,#292929);color:transparent}
.dice-utility-row{position:relative;z-index:4}.dice-utility-row .dice-sound-picker{position:static}.dice-utility-row .dice-sound-menu{left:50%;right:auto;transform:translateX(-50%)}

.wardrobe-tray-shapes{grid-column:1/-1;display:flex;gap:4px;padding:3px;margin-bottom:4px;background:#1b1b1b60;border-radius:11px}
.wardrobe-tray-shapes button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:5px 3px;border:0;border-radius:8px;background:transparent;color:#999;font:400 10px var(--sans)}
.wardrobe-tray-shapes button[aria-pressed=true]{background:#484848;color:#e3e3e3;box-shadow:0 2px 5px #0002}
.wardrobe-tray-shapes svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.2}
.dice-fallback[data-tray-shape=round]{border-radius:50%;padding:18%}
.dice-fallback[data-tray-shape=hexagon]{clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);padding:19% 12%}
.dice-fallback[data-material=amber] .fallback-die{background:radial-gradient(ellipse at 44% 44%,#ffe2a0,#e6a632 16%,#945119 46%,#28180e 77%);box-shadow:inset 0 0 0 1px #c59455aa,0 5px 12px #0005}
.dice-fallback[data-concealed=true] .fallback-die{background:linear-gradient(135deg,#494949,#292929);box-shadow:0 5px 12px #0005}

/* Specialty finishes remain recognizable in the non-WebGL renderer. */
.dice-fallback:not([data-concealed=true])[data-material=cyber] .fallback-die{background:linear-gradient(135deg,transparent 19%,#5fc7ff 19% 22%,transparent 22% 78%,#5fc7ff 78% 81%,transparent 81%),linear-gradient(45deg,#172630 16%,#94a7b5 17%,#e2e8ec 44%,#acbac4 73%,#172630 74%);color:#173747;box-shadow:inset 0 0 0 2px #acbdc8,0 5px 12px #0005}
.dice-fallback[data-material=cyber] .fallback-die i{background:#14354a;box-shadow:inset 0 1px 2px #0008,0 1px 1px #e0f7ff99}
.dice-fallback:not([data-concealed=true])[data-material=mystic] .fallback-die{background:radial-gradient(circle,transparent 55%,#b48b5a 56% 57%,transparent 58%),linear-gradient(140deg,#49344e,#1b1226);color:#f0d6a8;box-shadow:inset 0 0 0 1px #716047,0 5px 12px #0005}
.dice-fallback[data-material=mystic] .fallback-die i{background:#f0d6a8;box-shadow:none}
.dice-fallback:not([data-concealed=true])[data-material=arcane] .fallback-die{background:radial-gradient(ellipse at 42% 38%,#95e7ef,#7769bd 38%,#392955 80%);color:#f6edff;box-shadow:inset 0 0 0 1px #b5a6e7,0 5px 12px #0005}
.dice-fallback[data-material=arcane] .fallback-die i{background:#f6edff;box-shadow:0 0 4px #a7c8ff55}

.dice-fallback:not([data-concealed=true])[data-material=fire] .fallback-die{background:radial-gradient(ellipse at 43% 55%,#ffcb6f,#ce631c 20%,#6c2916 42%,#2f1b16 75%);color:#ffdda0;box-shadow:inset 0 0 0 1px #895038,0 5px 12px #0005}
.dice-fallback[data-material=fire] .fallback-die i{background:#ffdda0;box-shadow:0 0 4px #ff9c3d66}
.dice-fallback:not([data-concealed=true])[data-material=diamond] .fallback-die{background:conic-gradient(from 30deg,#edf7fb,#859aa6,#eaf8ff,#b3c6d0,#f3fcff,#edf7fb);color:#193343;box-shadow:inset 0 0 0 1px #d7e8f1,0 5px 12px #0005}
.dice-fallback[data-material=diamond] .fallback-die i{background:#193343;box-shadow:none}
.dice-fallback:not([data-concealed=true])[data-material=sapphire] .fallback-die{background:conic-gradient(from 45deg,#336ab3,#112450,#477eca,#18336c,#538bd0,#336ab3);color:#daeaff;box-shadow:inset 0 0 0 1px #85a1c2,0 5px 12px #0005}
.dice-fallback[data-material=sapphire] .fallback-die i{background:#daeaff;box-shadow:none}
.dice-fallback:not([data-concealed=true])[data-material=hologlass] .fallback-die{background:linear-gradient(135deg,#b4d9d9,#b3acd1 30%,#d6c1d0 45%,#ccd2ac 61%,#92c4cf);color:#253b4b;box-shadow:inset 0 0 0 1px #d7e3e6,0 5px 12px #0005}
.dice-fallback[data-material=hologlass] .fallback-die i{background:#253b4b;box-shadow:none}