/* ==========================================================================
   ROLL INTEGRATION (Feature 4) — the die-glyph affordance on stat rows and the
   Normal / Advantage / Disadvantage chooser. Spacing from tokens only; colour
   from painted pixels (AA in both themes); zero inline style.
   ========================================================================== */

/* ---------- the roll glyph: a third control, never over the number ---------- */
.roll-die{
  flex:none;
  inline-size:36px;
  block-size:var(--field);
  display:inline-grid;
  place-items:center;
  padding:0;
  border:1px solid var(--rule-soft);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--gold-hi) 8%, var(--panel-2));
  color:var(--gold-deep);
  transition:transform .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
}
.roll-die svg{inline-size:20px;block-size:20px;display:block}
.roll-die:hover{
  border-color:var(--gold-deep);
  color:var(--gold-deep);
  background:color-mix(in srgb, var(--gold-hi) 20%, var(--panel-2));
}
.roll-die:active{transform:translateY(1px) scale(.96)}
.roll-die:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:2px;
}

/* the value + die sit together in the row's value column, die to the right */
.ab-roll-cell{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--s1);
  min-width:0;
}

/* the ability-check row rides the same rhythm as save/skill beneath it */
.ab-row--check .row-lead{color:var(--gold-deep);font-size:.9em}
.ab-check-val{
  min-width:34px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  min-height:var(--field);
  font:600 .8rem/1 var(--font-display);
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* weapon grid: the atk/damage cells hold their text plus the die, aligned */
.arms-grid .arm-c.arm-roll{
  display:flex;
  align-items:center;
  gap:var(--s1);
  min-width:0;
}
.arms-grid .arm-c.arm-roll .roll-die{margin-inline-start:auto}

/* ---------- the chooser: Normal / Advantage / Disadvantage ---------- */
dialog.roll-dialog{width:min(30rem,calc(100vw - 1.4rem))}
.roll-dialog .rules-sub{font-variant-numeric:tabular-nums}
.roll-choices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s2);
  margin:var(--s4) 0 var(--s2);
}
.roll-choice{
  display:grid;
  gap:var(--s1);
  align-content:center;
  min-height:calc(var(--field) + var(--s5));
  padding:var(--s3) var(--s2);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  background:var(--panel-2);
  color:var(--ink);
  text-align:center;
  transition:transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.roll-choice:hover{
  border-color:var(--gold-deep);
  background:color-mix(in srgb, var(--gold-hi) 12%, var(--panel-2));
}
.roll-choice:active{transform:translateY(1px)}
.roll-choice:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.roll-choice--normal{
  border-color:var(--gold-deep);
  background:color-mix(in srgb, var(--gold-hi) 16%, var(--panel));
}
.roll-choice-name{font:700 .92rem/1.1 var(--font-display)}
.roll-choice-sub{color:var(--ink-faint);text-transform:none;letter-spacing:.01em;font-weight:500}

@media (max-width:460px){
  .roll-choices{grid-template-columns:1fr}
  .roll-choice{min-height:var(--field);grid-auto-flow:column;justify-content:space-between;align-items:center;text-align:left}
}