/* /dice-roller/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.dr-head .sub{margin-bottom:1rem}
@media(max-width:520px){.dr-head h1{margin-bottom:0.25rem}.dr-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}
@media(min-width:920px){.dr-duo{grid-template-columns:minmax(0,1.4fr) minmax(19rem,.75fr)}}

.dr-stage{padding:1rem;display:grid;gap:0.875rem;align-content:start}
@media(max-width:520px){.dr-stage{padding:0.75rem;gap:0.625rem}}
.dr-stage .k,.dr-panel .k{font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

/* the big dice buttons */
.dr-dice{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.5rem}
@media(min-width:640px){.dr-dice{grid-template-columns:repeat(7,minmax(0,1fr))}}
.dr-die{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.75rem;padding:0.375rem 0.25rem;border:1px solid var(--line-2);border-bottom-width:3px;border-radius:0.625rem;background:var(--surface-2);color:var(--ink);font:inherit;cursor:pointer;transition:.12s;touch-action:manipulation}
@media(min-width:640px){.dr-die{min-height:4.75rem}}
.dr-die:hover{border-color:var(--ink)}
.dr-die:active{transform:translateY(1px);border-bottom-width:2px}
.dr-die:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.dr-dname{font-family:var(--mono);font-size:1.375rem;font-weight:700;letter-spacing:-.02em}
@media(min-width:640px){.dr-dname{font-size:1.625rem}}
.dr-d20{background:var(--accent-soft);border-color:var(--accent)}
.dr-dmode{font-family:var(--mono);font-size:0.625rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}

.dr-opts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem 1rem}
.dr-count{display:flex;align-items:center;gap:0.375rem}
.dr-count .k{margin-right:0.25rem}
.dr-count .icon{width:2.375rem;height:2.375rem;color:var(--ink)}
.dr-count input{width:3.5rem;text-align:center;padding:0.4375rem 0.25rem;font-family:var(--mono);-moz-appearance:textfield}
.dr-count input::-webkit-inner-spin-button,.dr-count input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.dr-mode{display:flex;flex-wrap:wrap;align-items:center;gap:0.3125rem}
.dr-mode .k{margin-right:0.25rem}
.dr-mode .chip{padding:0.4375rem 0.625rem;font-size:0.8125rem}
.dr-mode .chip:focus-visible,.dr-try .chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.dr-form{display:grid;gap:0.375rem}
.dr-row{display:flex;gap:0.5rem;min-width:0}
.dr-row input{flex:1;font-family:var(--mono);font-size:1rem}
.dr-row .btn{flex:none;min-width:5.5rem}
.dr-hint{margin:0;min-height:1.25rem;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.dr-hint.bad{color:var(--bad);font-weight:600}

/* result */
.dr-result{padding:0.75rem 0.875rem;background:var(--surface-2);border:1px solid var(--line);border-radius:0.625rem;box-shadow:inset 0.1875rem 0 0 var(--signal)}
.dr-rtop{display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;flex-wrap:wrap}
.dr-rlabel{margin:0;font-family:var(--mono);font-size:0.8125rem;color:var(--ink-2);overflow-wrap:anywhere;min-width:0}
.dr-total{margin:0;display:flex;align-items:baseline;gap:0.5rem}
.dr-total b{font-size:2.5rem;line-height:1;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dr-groups{display:flex;flex-wrap:wrap;gap:0.625rem 1rem;margin-top:0.5rem;max-height:14rem;overflow-y:auto}
.dr-group{min-width:0}
.dr-gname{margin:0 0 0.25rem;font-family:var(--mono);font-size:0.75rem;color:var(--muted)}
.dr-gnote{font-family:var(--sans)}
.dr-faces{display:flex;flex-wrap:wrap;gap:0.375rem}
.dr-face{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:2.625rem;height:2.875rem;padding:0 0.375rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);color:var(--ink)}
.dr-face .dr-v{font-family:var(--mono);font-size:1.125rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.dr-face .dr-s{font-family:var(--mono);font-size:0.5625rem;color:var(--muted);line-height:1}
.dr-face.is-kept{border:2px solid var(--accent)}
.dr-face.is-drop{opacity:.5;border-style:dashed}
.dr-face.is-drop .dr-v{font-weight:500;text-decoration:line-through;text-decoration-thickness:2px}
.dr-mod{align-self:flex-end;font-family:var(--mono);font-size:1.25rem;font-weight:700;padding-bottom:0.5rem}
.dr-more{align-self:center;font-size:0.8125rem;color:var(--muted)}
.dr-sum{margin:0.5rem 0 0;font-family:var(--mono);font-size:0.75rem;color:var(--muted);overflow-wrap:anywhere}
.dr-result[data-rolling] .dr-face{border-style:dotted}
.dr-result[data-rolling] .dr-face .dr-v{color:var(--muted)}
.dr-result[data-rolling] .dr-sum{visibility:hidden}
.dr-sum:empty{display:none}
.dr-fair{margin:0;font-size:0.8125rem;line-height:1.55;color:var(--muted)}
.dr-fair code{font-family:var(--mono);font-size:0.75rem}

/* saved rolls + history */
.dr-panel{display:grid;gap:1rem;align-content:start}
.dr-block+.dr-block{border-top:1px solid var(--line);padding-top:0.875rem}
.dr-h{margin:0 0 0.5rem;font-size:0.9375rem;font-weight:650;display:flex;align-items:baseline;gap:0.5rem}
.dr-hcount{font-family:var(--mono);font-size:0.75rem;color:var(--muted);font-weight:500}
.dr-help{margin:0.375rem 0.125rem 0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.dr-help:empty{display:none}
.dr-saved{list-style:none;margin:0;padding:0;display:grid;gap:0.375rem}
.dr-saved li{display:flex;gap:0.375rem;min-width:0}
.dr-load{flex:1;min-width:0;display:flex;align-items:baseline;gap:0.5rem;padding:0.625rem 0.75rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);color:var(--ink);font:inherit;font-size:0.9375rem;text-align:left;cursor:pointer}
.dr-load:hover{border-color:var(--ink)}
.dr-load:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dr-load b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-load code{flex:none;font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}
.dr-del{width:2.5rem;height:auto;min-height:2.5rem}
.dr-saveform{display:grid;gap:0.375rem;margin-top:0.625rem}
.dr-saveform .btn{height:2.75rem}
.dr-danger{margin-top:0.625rem}
.dr-danger:hover{border-color:var(--bad);color:var(--bad)}
.dr-try{display:flex;flex-wrap:wrap;gap:0.375rem}
.dr-try .chip{padding:0.375rem 0.6875rem;font-size:0.8125rem}
.dr-history{margin:0;padding:0 0 0 2rem;max-height:16rem;overflow-y:auto;font-size:0.875rem;line-height:1.6}
.dr-history:empty{display:none}
.dr-history li{overflow-wrap:anywhere}
.dr-htotal{display:inline-block;min-width:2.5rem;font-family:var(--mono);font-variant-numeric:tabular-nums}
.dr-hwhat{font-family:var(--mono);font-size:0.8125rem;color:var(--ink-2)}
#clearhist{margin-top:0.5rem}