/* Shared storefront treatment for all three dice rollers. */
:root{--paper:#e9dec2;--light:#faf3e4;--ink:#4c3424;--muted:#7c644b;--line:#b7976955;--forest:#684728;--forest-light:#8a633e;--copper:#98682f;--gold:#c29554}
html.roller-embed,html.roller-embed body{background:var(--paper)}
.workbench{grid-template-columns:minmax(0,1fr) 440px;gap:28px}
.roll-folio{border:1px solid #bba17b;border-radius:0;padding:25px 24px 18px;background:#f4ebd9;box-shadow:0 7px 19px #5c3d2110}
.roll-folio:before{inset:-6px -2px auto;height:12px;background:#74502f;opacity:.95;transform:none;mask:url('/assets/redesign/assets/product-title-dry-brush.png') center/100% 100% no-repeat}
.selection-top{margin:0 0 17px;gap:12px}.expression-label{font:29px/1.15 var(--serif);letter-spacing:-.65px;color:#513724}
.reset-expression{font:14px var(--sans);padding:8px 0 8px 12px;min-height:44px;color:#7e6142}.reset-expression:hover{color:#422917}
.dice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.die-option,.die-option:last-child{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2px;grid-column:auto;min-height:59px;padding:7px 6px 7px 9px;border:1px solid #c4aa865c;border-bottom-color:#bba17b;border-radius:0;background:#fcf7ed;box-shadow:0 2px 4px #73523007}
.die-option.selected{background:#f0e1c1;border-color:#b48a52;box-shadow:inset 0 -2px #a7763b}
.die-label,.die-option:last-child .die-label{font:22px/1 var(--serif);text-transform:uppercase;margin:0;padding:0;min-width:39px;justify-content:flex-start;gap:0;color:#624022}
.die-label small,.die-option:last-child .die-label small{display:none}
.die-stepper,.die-option:last-child .die-stepper{display:grid;grid-template-columns:38px minmax(23px,1fr) 38px;flex:1;max-width:112px;gap:0;align-items:center}
.die-stepper button,.die-remove,.die-chip{min-height:44px;min-width:38px;border:0;border-radius:0;background:transparent;color:#684728;font:26px/1 var(--sans)}
.die-chip{background:#e8d8b9}.die-chip:hover{background:#ddc292;color:#3e291c}.die-remove:not(:disabled):hover{background:#eee0c6}.die-remove:disabled{opacity:.28}
.die-count{font:600 21px/1 var(--sans);color:#4b3423;font-variant-numeric:tabular-nums}
.die-option:last-child{grid-column:1/-1;padding-left:14px}.die-option:last-child .die-label{font-size:21px}.die-option:last-child .die-stepper{max-width:155px;grid-template-columns:44px minmax(32px,1fr) 44px}
.selection-summary{grid-template-columns:minmax(0,1fr) 143px;gap:16px;margin-top:18px;padding:13px 0;border-top:1px solid #b7976955;border-bottom:1px solid #b7976955}
.selection-summary output{font:27px/1.2 var(--serif);color:#5b3a22}.selection-summary output:before{content:'Your roll';display:block;font:12px/1.4 var(--sans);color:#80674e;margin-bottom:3px}
.modifier-label{font:12px/1.4 var(--sans);text-transform:none;letter-spacing:0}.modifier-label select{background:#fcf7ed;border:1px solid #baa17c;border-radius:0;font-size:14px;padding:8px 10px;min-height:44px;margin-top:4px}
.advanced-roll{margin:3px 0 0;font-size:13px}.advanced-roll summary{min-height:40px}.expression-entry input,.expression-entry button{border-radius:0}.common-rolls{margin:15px 0 19px}
.common-rolls h2{font:500 17px/1.25 var(--serif);text-transform:none;letter-spacing:0;color:#604127;margin:0 0 9px}
.common-roll-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.common-roll{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:7px;min-height:47px;padding:9px 10px;background:#fcf7ed;border:1px solid #cbb18a80;border-radius:0;box-shadow:none}
.common-roll strong{font:500 13px/1.3 var(--sans)}.common-roll small{font:12px var(--sans);white-space:nowrap;color:#86684a}.common-roll:hover{background:#eadcc0}.common-roll[aria-pressed=true]{border-color:#b08754;background:#e9d8b5;box-shadow:inset 0 -2px #a7763b}.common-roll-note{font-size:12px;line-height:1.45;margin:8px 0 0}.common-roll-note:empty{display:none}
.mode-group{margin:0 0 18px}.mode-group legend{font:13px var(--sans);margin-bottom:8px;color:#6d5137}.mode-options{background:transparent;border:0;padding:0;gap:5px;border-radius:0}
.mode-options label{border:1px solid #b99c7480;border-radius:0;background:#fcf7ed;min-height:44px;font-size:13px}.mode-options label:has(input:checked){background:#775334;color:#fff4dc;border-color:#775334;box-shadow:none}.mode-group:disabled{opacity:.5}
.roll-button{isolation:isolate;position:relative;display:flex;align-items:center;justify-content:center;gap:14px;width:100%;border:1px solid #b58a4c;border-radius:5px;min-height:54px;background:linear-gradient(180deg,#efd299,#ddb36d);box-shadow:inset 0 1px #fff3d6,0 3px 0 #987143,0 5px 10px #68472818;color:#3c291a;padding:8px 18px;font:22px var(--serif);cursor:pointer;transition:box-shadow .18s,background .18s}
.roll-button:before{display:none}.roll-button:after{content:'';display:block;position:absolute;inset:3px;border:1px solid #fff0d15c;border-radius:2px;pointer-events:none}
.roll-button:hover{background:linear-gradient(180deg,#efd299,#ddb36d)}
.roll-button:focus-visible{outline:2px solid #684728;outline-offset:5px}
.roll-button:not(:disabled):active{background:linear-gradient(180deg,#dcaf65,#e6c182);box-shadow:inset 0 2px 4px #68472826,0 1px 0 #987143}
.roll-button:disabled{opacity:.55;cursor:not-allowed;box-shadow:inset 0 1px #fff3d6,0 1px 0 #987143}
.roll-button .roll-d20{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;color:#6b4524;transform-origin:center}
.roll-button .roll-d20 svg{display:block;width:32px;height:32px;overflow:visible;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
.roll-d20-shade{fill:currentColor;fill-opacity:.06}.roll-d20 text{fill:currentColor;stroke:none;font:700 10px var(--sans)}
.roll-button:not(:disabled):focus-visible .roll-d20{animation:roll-button-d20 .8s cubic-bezier(.25,.65,.35,1) both}
@media(hover:hover) and (pointer:fine){.roll-button:not(:disabled):hover{background:linear-gradient(180deg,#f8ddaa,#e8bd76);box-shadow:inset 0 1px #fff6e3,0 3px 0 #987143,0 6px 14px #68472826}.roll-button:not(:disabled):hover .roll-d20{animation:roll-button-d20 .8s cubic-bezier(.25,.65,.35,1) both}}
@keyframes roll-button-d20{0%{transform:perspective(140px) translateY(0) rotateX(0) rotateY(0) rotateZ(0)}30%{transform:perspective(140px) translateY(-4px) rotateX(35deg) rotateY(-25deg) rotateZ(125deg)}70%{transform:perspective(140px) translateY(-2px) rotateX(-20deg) rotateY(20deg) rotateZ(300deg)}88%{transform:perspective(140px) translateY(1px) rotateX(0) rotateY(0) rotateZ(366deg)}100%{transform:perspective(140px) translateY(0) rotateX(0) rotateY(0) rotateZ(360deg)}}
.repeat-last{font-size:13px;margin-top:6px;color:#755638}.roll-keyboard{margin-top:0;color:#90795c}
.result-dock{background:#f6eddb;border:1px solid #baa17d;border-radius:0;box-shadow:0 3px 9px #67442708}.result-dock:before{width:3px}.result-panel{background:transparent}.scene-frame{border-radius:0;border-color:#a48a64;box-shadow:0 5px 15px #573b2517}.scene-frame:before,.scene-frame:after{display:none}
.session-tools{margin-top:20px;padding-top:17px}.settings{border-color:#b7976955}.settings>summary{font-size:14px}.settings-grid{gap:5px}.preference{min-height:44px}.quality-label select{background:#fcf7ed;border-radius:0;border-color:#baa17c}.session-title{font-family:var(--serif);font-size:18px;color:#61442c}.capacity-note{margin:10px 0 0;font-size:12px}
@media(max-width:1250px) and (min-width:1101px){.workbench{grid-template-columns:minmax(0,1fr) 415px;gap:22px}.roll-folio{padding-left:20px;padding-right:20px}.die-label{font-size:21px;min-width:35px}.die-stepper{max-width:106px;grid-template-columns:36px minmax(23px,1fr) 36px}.die-stepper button{min-width:36px}}
@media(max-width:1100px){.workbench{display:flex;flex-direction:column;gap:22px}.roll-folio{width:100%;padding:24px}.dice-row{grid-template-columns:repeat(4,minmax(0,1fr))}.die-option,.die-option:last-child{display:block;grid-column:auto;padding:10px 8px}.die-label,.die-option:last-child .die-label{display:flex;justify-content:center;margin-bottom:9px;font-size:22px}.die-stepper,.die-option:last-child .die-stepper{grid-template-columns:44px minmax(24px,1fr) 44px;max-width:none;width:100%}.die-stepper button{min-width:44px}.common-roll-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.common-roll{flex-direction:column;align-items:flex-start;justify-content:center}.selection-summary{grid-template-columns:minmax(0,1fr) 180px}.session-tools{width:100%}}
@media(max-width:760px){.roll-folio{padding:21px 19px 17px}.expression-label{font-size:27px}.dice-row{grid-template-columns:repeat(3,minmax(0,1fr))}.die-option:last-child{display:flex;grid-column:1/-1;padding:7px 13px}.die-option:last-child .die-label{margin:0}.die-option:last-child .die-stepper{max-width:156px}.common-roll-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.common-roll{flex-direction:row;align-items:center;justify-content:space-between}.selection-summary{grid-template-columns:minmax(0,1fr) 143px}.session-tools{padding-top:13px}.scene-bottom{left:15px;right:15px}.mode-options label{font-size:13px}.capacity-note{font-size:11px}}
@media(max-width:540px){.dice-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.die-option{padding:9px 8px 6px}.die-label{font-size:23px}.die-stepper button{font-size:27px}.die-count{font-size:23px}.selection-summary{gap:10px}.common-roll{min-height:49px;font-size:13px}.common-roll strong{max-width:10ch}.roll-button{font-size:23px}.settings-grid{grid-template-columns:1fr 1fr}}
@media(max-width:345px){.roll-folio{padding-left:12px;padding-right:12px}.expression-label{font-size:25px}.die-option{padding-left:5px;padding-right:5px}.die-label{font-size:22px}.selection-summary{grid-template-columns:minmax(0,1fr) 130px}.mode-options label{font-size:11px}.common-roll{gap:3px;padding:8px}.common-roll strong{font-size:12px}.common-roll small{font-size:11px}}
@media(prefers-reduced-motion:reduce){.roll-button{transition:none}.roll-button:not(:disabled):is(:hover,:focus-visible) .roll-d20{animation:none}}

/* Keep the everyday selection and Roll action together in one compact panel. */
.roll-folio{padding:17px 18px 13px}.selection-top{margin-bottom:9px}.expression-label{font-size:26px}
.dice-row{gap:6px}.die-option,.die-option:last-child{min-height:48px;padding:2px 5px 2px 8px}
.die-option:last-child{grid-column:auto}.die-option:last-child .die-stepper{max-width:112px;grid-template-columns:38px minmax(23px,1fr) 38px}
.selection-summary{margin-top:10px;padding:8px 0;gap:10px}.selection-summary output{font-size:24px}.selection-summary output:before{margin-bottom:1px}
.modifier-label select{margin-top:2px;padding:6px 8px}.quick-rolls-menu{margin:7px 0 9px;border-bottom:1px solid #b7976944}
.quick-rolls-menu>summary{list-style:none;display:flex;gap:10px;align-items:center;min-height:44px;padding:3px 0;font:16px var(--serif);cursor:pointer;color:#604127}
.quick-rolls-menu>summary::-webkit-details-marker{display:none}.quick-rolls-menu>summary:after{content:'+';font:22px var(--sans);margin-left:auto}
.quick-rolls-menu[open]>summary:after{content:'−'}.quick-rolls-menu>summary>span{font:12px var(--sans);color:#86684a}
.quick-rolls-menu .common-rolls{margin:3px 0 10px}.quick-rolls-menu .common-rolls h2{display:none}
.mode-group{margin-bottom:12px}.mode-group legend{margin-bottom:5px}.roll-button{min-height:54px;padding:8px 16px;font-size:22px}
.repeat-last{min-height:36px;margin-top:2px}.advanced-roll{margin-top:3px}.advanced-roll summary{min-height:38px}.roll-keyboard{margin-bottom:0}
.validation:empty{display:none}.capacity-note{margin-top:5px}
@media(max-width:1100px){
 .roll-folio{padding:17px 18px 13px}.dice-row{grid-template-columns:repeat(4,minmax(0,1fr))}
 .die-option,.die-option:last-child{display:flex;align-items:center;grid-column:auto;padding:2px 5px 2px 8px}
 .die-label,.die-option:last-child .die-label{margin:0;justify-content:flex-start;font-size:21px;min-width:32px}
 .die-stepper,.die-option:last-child .die-stepper{grid-template-columns:38px minmax(20px,1fr) 38px;max-width:112px;width:auto}
 .die-stepper button{min-width:38px}.die-count{font-size:21px}.selection-summary{grid-template-columns:minmax(0,1fr) 160px}
}
@media(max-width:760px){
 .dice-row{grid-template-columns:repeat(2,minmax(0,1fr))}.die-stepper,.die-option:last-child .die-stepper{grid-template-columns:44px minmax(18px,1fr) 44px;max-width:112px}
 .die-stepper button{min-width:44px;min-height:44px;font-size:25px}.die-label,.die-option:last-child .die-label{font-size:20px;min-width:29px}
 .expression-label{font-size:25px}.selection-summary{grid-template-columns:minmax(0,1fr) 140px}.selection-summary output{font-size:23px}
 .mode-options label{font-size:12px}.common-roll{min-height:44px;padding:7px 9px}.common-roll strong{max-width:none}
}
@media(max-width:390px){
 .roll-folio{padding-inline:11px}.dice-row{gap:5px}.die-option,.die-option:last-child{padding-inline:4px;gap:0}
 .die-label,.die-option:last-child .die-label{font-size:18px;min-width:27px}
 .die-stepper,.die-option:last-child .die-stepper{grid-template-columns:40px minmax(17px,1fr) 40px;max-width:99px}.die-stepper button{min-width:40px}.die-count{font-size:20px}
 .selection-summary{grid-template-columns:minmax(0,1fr) 132px}.quick-rolls-menu>summary{font-size:15px}
}

.dice-row>.modifier-option{display:flex;align-items:center;gap:5px;padding:2px 5px;background:#fcf7ed;border:1px solid #c4aa865c;border-bottom-color:#bba17b;min-width:0;font-size:11px}
.modifier-option select{width:100%;min-width:0;min-height:44px;margin:0;padding:5px 1px;border:0;background:transparent;font-size:12px}
.selection-summary{display:flex;align-items:center;min-height:38px;padding:6px 0;margin-top:8px}.selection-summary output{display:flex;gap:9px;align-items:baseline;font-size:23px}.selection-summary output:before{display:inline;font-size:12px;margin:0}
@media(max-width:390px){.dice-row>.modifier-option{display:block;position:relative;padding:0 5px 0}.modifier-option{font-size:10px!important}.modifier-option select{min-height:28px;font-size:12px}}