/* Pick & Roll: the five tools. Sizes come from the kit's variables so Big and easy scales them. */
.hx-tool textarea.hx-in { padding: 10px 12px; line-height: 1.4; font-weight: 500; resize: vertical; display: block; }
.pr-step { display: flex; gap: 6px; }
.pr-step .hx-in { width: 3.8em; text-align: center; }
.pr-step .hx-btn { padding: 0; font-size: calc(var(--hx-fs) * 1.2); }
.pr-res { margin: 0; min-width: 0; }
.pr-res .hx-lab { margin: 0; }
.pr-res .hx-out { display: block; min-height: 1.15em; }
.pr-hh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-ht { margin: 0; font-size: var(--hx-fs); font-weight: 800; }
.pr-hh .hx-btn { font-size: var(--hx-small); }
.hx-tool [hidden] { display: none !important; }
.hx-btn[aria-disabled="true"] { opacity: .65; cursor: progress; }
.pr-pop { animation: pr-pop .35s ease-out; }
@keyframes pr-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Spinner: the wheel on the left, the result and the list beside it; a phone stacks them. */
.sp { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 16px 32px; align-items: start; }
.sp-wheel { position: relative; width: 100%; max-width: 460px; margin: 0 auto; padding-top: 10px; }
.sp-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; cursor: pointer; touch-action: manipulation; }
.sp-ptr { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; width: 0; height: 0;
  border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid var(--hx-ink); filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); pointer-events: none; }
.sp-side { min-width: 0; display: grid; gap: 10px; }
.sp-top { display: flex; gap: 10px; align-items: stretch; }
.sp-res { flex: 1 1 auto; min-width: 0; border: 1px solid var(--hx-line); border-radius: 16px; padding: 8px 14px; background: var(--hx-soft); }
.sp-res .hx-lab { margin: 0; }
.sp-win { display: block; font-size: calc(var(--hx-out) * 1.15); min-height: 1.15em; }
.sp-go { flex: 0 0 auto; min-width: 5.5em; font-size: calc(var(--hx-fs) * 1.25); border-radius: 16px; }
.sp-side > .hx-lab { margin: 4px 0 -6px; }
.sp-list { min-height: calc(var(--hx-tap) * 3.6); }
.sp-side .hx-note { margin: 0; }
.sp-more .hx-btn { font-size: var(--hx-small); }
@media (max-width: 760px) {
  /* A phone: the wheel and the result side by side, the list under them, all above the fold. */
  .sp { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px 10px; align-items: center; }
  .sp-side { display: contents; }
  .sp-wheel { grid-column: 1; grid-row: 1; padding-top: 8px; }
  .sp-top { grid-column: 2; grid-row: 1; flex-direction: column; }
  .sp-side > :not(.sp-top) { grid-column: 1 / -1; }
  .sp-res { padding: 6px 10px; }
  .sp-win { font-size: calc(var(--hx-out) * .85); }
  .sp-go { min-width: 0; }
  .sp-side > .hx-lab { margin: 0 0 -4px; }
  .sp-list { min-height: calc(var(--hx-tap) * 2.2); height: calc(var(--hx-tap) * 2.2); }
}

/* Names */
.nm, .gr, .dc, .rn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 28px; align-items: start; }
.nm-in, .gr-in, .dc-in, .rn-in { display: grid; gap: 10px; min-width: 0; }
.nm-in .hx-lab, .gr-in > .hx-lab { margin: 0 0 -6px; }
.nm-in .hx-note { margin: 0; }
.nm-list, .gr-list { min-height: calc(var(--hx-tap) * 5); }
.nm-out, .gr-out, .dc-out, .rn-out { min-width: 0; display: grid; gap: 12px; border: 1px solid var(--hx-line); border-radius: 16px; padding: 14px 16px; background: var(--hx-soft); }
.nm-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.nm-go { flex: 1 1 6em; font-size: calc(var(--hx-fs) * 1.15); }
.nm-out .hx-out { font-size: calc(var(--hx-out) * 1.1); }
.nm-done { border-top: 1px solid var(--hx-line); padding-top: 10px; }
.nm-list-done { margin: 6px 0 0; padding-left: 1.6em; columns: 2 10em; font-size: var(--hx-small); line-height: 1.6; }
.nm-done .hx-note { margin: 6px 0 0; }

/* Groups */
.gr-ctl { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.gr-ctl .hx-chips .hx-btn { font-size: var(--hx-small); }
.gr-res { padding: 2px 0; }
.gr-plan { font-size: calc(var(--hx-out) * .7); }
.gr-act { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-act .hx-btn.primary { flex: 1 1 8em; font-size: calc(var(--hx-fs) * 1.1); }
.gr-act .hx-btn:not(.primary) { font-size: var(--hx-small); }
.gr-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gr-groups:empty { display: none; }
.gr-card { background: #fff; border: 1px solid var(--hx-line); border-radius: 12px; padding: 8px 12px; }
.gr-card h3 { margin: 0 0 4px; font-size: var(--hx-fs); }
.gr-card h3 span { font-weight: 600; color: var(--hx-muted); font-size: var(--hx-small); }
.gr-card ol { margin: 0; padding-left: 1.4em; font-size: var(--hx-small); line-height: 1.55; }
.gr-out > .hx-note { margin: 0; }

/* Dice */
.dc-row, .rn-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.dc-n { width: 4.6em; text-align: center; }
.dc-sets { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dc-sets .hx-btn { padding: 0 4px; font-size: var(--hx-small); }
.dc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dc-top .pr-res { flex: 1 1 auto; }
.dc-go { flex: 0 0 auto; padding: 0 22px; font-size: calc(var(--hx-fs) * 1.15); }
.dc-total { font-size: calc(var(--hx-out) * 1.4); white-space: nowrap; }
.dc-faces { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-faces:empty { display: none; }
.dc-face { min-width: calc(var(--hx-tap) * 1.05); height: calc(var(--hx-tap) * 1.05); padding: 0 6px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--hx-ink); border-radius: 12px; background: #fff; font-weight: 800; font-size: calc(var(--hx-fs) * 1.25); font-variant-numeric: tabular-nums; }
.dc-faces.many .dc-face { min-width: 2.4em; height: 2.4em; font-size: var(--hx-small); border-radius: 8px; border-width: 1px; }
.dc-faces.tumble .dc-face { animation: dc-tumble .45s ease-out; }
@keyframes dc-tumble { 0% { transform: rotate(-200deg) scale(.6); opacity: .2; } 100% { transform: none; opacity: 1; } }
.dc-out .hx-formula { margin: 0; }
.dc-hist { border-top: 1px solid var(--hx-line); padding-top: 10px; }
.dc-list { margin: 6px 0 0; padding: 0 0 0 1.4em; max-height: 240px; overflow-y: auto; font-size: var(--hx-small); line-height: 1.6; font-variant-numeric: tabular-nums; }
.dc-hist .hx-note { margin: 6px 0 0; }

/* Number */
.rn-row > div { flex: 1 1 6em; min-width: 0; }
.rn-res { font-size: calc(var(--hx-out) * 1.4); }
.rn-res.long { font-size: var(--hx-fs); max-height: 12em; overflow-y: auto; line-height: 1.5; }
.rn-out .hx-formula { margin: 0; }
.rn-coin { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--hx-line); padding-top: 12px; }
.rn-cres { font-size: calc(var(--hx-out) * .8); }
#ctally { margin: -6px 0 0; }
#ctally:empty { display: none; }

@media (max-width: 760px) {
  .nm, .gr, .dc, .rn { grid-template-columns: 1fr; gap: 10px; }
  .nm-out, .gr-out, .dc-out, .rn-out { padding: 10px 12px; gap: 8px; }
  .nm-list, .gr-list { min-height: calc(var(--hx-tap) * 2.2); height: calc(var(--hx-tap) * 2.6); }
  .dc-total, .rn-res { font-size: var(--hx-out); }
  .dc-row { gap: 8px; }
  .dc-row .pr-step .hx-in { width: 3.2em; }
  .dc-n { width: 3.8em; }
  .dc-sets { gap: 4px; }
  .dc-sets .hx-btn { padding: 0 2px; }
}
@media (prefers-reduced-motion: reduce) { .pr-pop, .dc-faces.tumble .dc-face { animation: none; } }