/* Ability Score Generator. Palette, dice and type come from app-shell.css and
   dice.css — the page wears the roller's clothes — and this file adds the
   method list, the score table, the rolling area and the results rows. */
/* The heading belongs to the table, not to the page: it is inset by the width
   of the method column so it reads as centred over the view it names. */
.dice-page.ability-page > h1 { padding-left: calc(var(--sidebar-width) + var(--gap)); }
.ability-page .ability-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); gap: var(--gap); }
.ability-page .ability-layout > * { min-width: 0; min-height: 0; }
.ability-methods-panel { display: flex; flex-direction: column; gap: .55rem; overflow-y: auto; }
.ability-group { margin: .5rem 0 .1rem; color: var(--silver-dim); font-family: var(--font-display); font-size: .66rem; font-variant: small-caps; letter-spacing: .12em; }
.ability-group:first-child { margin-top: 0; }
.ability-method { display: grid; gap: .05rem; width: 100%; padding: .38rem .5rem; border: 1px solid var(--maroon-edge); border-radius: var(--radius-sm); background: var(--maroon-deep); color: var(--silver); text-align: left; cursor: pointer; }
.ability-method strong { color: var(--gold); font-family: var(--font-display); font-size: .76rem; font-weight: 600; letter-spacing: .05em; }
.ability-method:hover { border-color: var(--gold-deep); }
.ability-method.chosen { border-color: var(--gold); background: linear-gradient(180deg, var(--maroon-lit), var(--maroon)); box-shadow: inset 0 1px 0 var(--gold-glow); }
.ability-method.chosen strong { color: var(--gold-bright); }
.ability-method-summary { margin: .2rem 0 0; color: var(--silver-dim); font-size: .7rem; line-height: 1.4; }

/* --- the centre --- */
.ability-center { display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; }
.ability-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.ability-actions { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.ability-actions button { border: 1px solid var(--gold-deep); border-radius: var(--radius-sm); padding: .3rem .6rem; background: transparent; color: var(--gold); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.ability-actions #ability-roll { background: var(--gold); color: var(--on-accent); font-weight: 800; }
.ability-actions button:hover:not(:disabled) { filter: brightness(1.1); }
.ability-actions button:disabled { opacity: .35; cursor: default; }
.ability-actions button[hidden] { display: none; }
.ability-status { margin: 0; color: var(--silver-dim); font-size: .74rem; }

.ability-grid-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: .7rem; align-items: start; --ability-row-h: 2.3rem; --ability-head-h: 1.7rem; }
.ability-table { width: 100%; border-collapse: collapse; }
.ability-table th, .ability-table td { padding: 0 .45rem; border-bottom: 1px solid var(--maroon-edge); text-align: center; }
.ability-table thead th { height: var(--ability-head-h); color: var(--gold); font-family: var(--font-display); font-size: .66rem; font-variant: small-caps; letter-spacing: .1em; }
.ability-table tbody tr { height: var(--ability-row-h); }
.ability-table tbody th { color: var(--silver); font-size: .78rem; font-weight: 600; text-align: left; white-space: nowrap; }
.ability-table .ability-total { color: var(--silver); font-weight: 700; }
.ability-table .ability-mod { color: var(--gold); font-family: var(--font-display); font-size: .9rem; }
.ability-adjust input { width: 3.2rem; padding: .12rem .2rem; border: 1px solid var(--maroon-edge); border-radius: var(--radius-sm); background: var(--maroon-deep); color: var(--silver); text-align: center; font-size: .76rem; }
.ability-score { display: inline-block; min-width: 2.2rem; color: var(--silver); font-family: var(--font-display); font-size: .95rem; }

/* A value that can be dragged, and the cell it can be dropped into. */
.ability-value { position: relative; }
.ability-slot { display: inline-grid; place-items: center; width: 2.6rem; height: 1.75rem; border: 1px dashed var(--maroon-edge); border-radius: .3rem; background: var(--maroon-deep); color: var(--silver-dim); font-family: var(--font-display); font-size: .95rem; cursor: default; }
.ability-slot.filled { border-style: solid; border-color: var(--gold-deep); background: linear-gradient(180deg, var(--maroon-lit), var(--maroon)); color: var(--gold-bright); cursor: grab; }
.ability-slot.dragging { opacity: .4; }
.ability-value.drop-target .ability-slot { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-glow); }

.ability-stepper { display: inline-grid; grid-template-columns: 1.3rem minmax(2.1rem, auto) 1.3rem; align-items: center; gap: .18rem; }
.ability-stepper output { color: var(--gold-bright); font-family: var(--font-display); font-size: .9rem; text-align: center; }
.ability-stepper.compact output { font-size: .74rem; }
.ability-stepper .step { width: 1.3rem; height: 1.3rem; padding: 0; display: grid; place-items: center; border: 1px solid var(--gold-deep); border-radius: .25rem; background: transparent; color: var(--gold); font-size: .8rem; line-height: 1; cursor: pointer; }
.ability-stepper .step:disabled { opacity: .3; cursor: default; }

/* Rolls sit outside the table, one line to a row. */
.ability-side { display: grid; align-content: start; min-width: 0; }
.ability-side[hidden] { display: none; }
.ability-side-head { height: var(--ability-head-h); display: flex; align-items: center; color: var(--gold); font-family: var(--font-display); font-size: .66rem; font-variant: small-caps; letter-spacing: .1em; }
.ability-side-row { height: var(--ability-row-h); display: flex; align-items: center; gap: .18rem; border-bottom: 1px solid transparent; white-space: nowrap; }
.side-empty { color: var(--silver-dim); font-size: .7rem; font-style: italic; }
.roll-chip { display: inline-grid; place-items: center; min-width: 1.35rem; padding: .05rem .22rem; border: 1px solid var(--maroon-edge); border-radius: 4px; background: var(--maroon-deep); color: var(--silver); font-size: .7rem; font-weight: 700; }
.roll-chip.dropped { opacity: .4; text-decoration: line-through; }
.roll-plus, .roll-equals { color: var(--silver-dim); font-size: .62rem; }
.ability-side-row strong { color: var(--gold); font-family: var(--font-display); font-size: .85rem; }
.roll-option { min-width: 2.1rem; padding: .12rem .3rem; border: 1px solid var(--maroon-edge); border-radius: .3rem; background: var(--maroon-deep); color: var(--silver); font-family: var(--font-display); font-size: .8rem; cursor: pointer; }
.roll-option:hover { border-color: var(--gold-deep); }
.roll-option.chosen { border-color: var(--gold); background: var(--gold); color: var(--on-accent); font-weight: 800; }

/* --- the rolling area --- */
.ability-tray { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; min-height: 7.5rem; padding: .6rem; border: 1px solid var(--gold-deep); border-radius: var(--radius); background: radial-gradient(ellipse at 40% 35%, var(--maroon-lit), var(--maroon-deep) 70%), repeating-linear-gradient(35deg, transparent 0 7px, var(--gold-glow) 8px 9px); box-shadow: inset 0 0 40px var(--shadow); }
.ability-tray .tray-placeholder { position: static; color: var(--silver-dim); font-style: italic; }
.ability-die { position: relative; width: var(--die-size); height: var(--die-size); opacity: 0; transform: scale(.78); transition: opacity .18s ease-out var(--delay), transform .18s ease-out var(--delay); }
.ability-die.landed { opacity: 1; transform: scale(1); }
.ability-die.dropped { opacity: .35; }
.ability-die.dropped.landed { opacity: .35; }
.ability-tray-caption { margin: 0; color: var(--gold); font-family: var(--font-display); font-size: .8rem; letter-spacing: .05em; text-align: center; min-height: 1.1em; }

/* --- the results row along the bottom --- */
.ability-squares { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; min-height: 3rem; padding: .45rem; border: 1px solid var(--maroon-edge); border-radius: var(--radius); background: var(--maroon-deep); }
.ability-squares[hidden] { display: none; }
.ability-squares.drop-target { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-glow); }
.squares-empty { margin: 0; color: var(--silver-dim); font-size: .74rem; font-style: italic; }
.ability-square { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--gold-deep); border-radius: .35rem; background: linear-gradient(180deg, var(--maroon-lit), var(--maroon)); box-shadow: inset 0 1px 0 var(--gold-glow); color: var(--gold-bright); font-family: var(--font-display); font-size: 1.15rem; cursor: grab; }
.ability-square .square-value { line-height: 1; }
.ability-square .square-tag { position: absolute; bottom: .12rem; left: 0; right: 0; color: var(--silver-dim); font-family: var(--font-body, inherit); font-size: .5rem; letter-spacing: .04em; text-transform: uppercase; }
.ability-square.placed, .ability-square.spare { opacity: .45; cursor: default; }
.ability-square.dragging { opacity: .35; }
.ability-square:hover:not(.placed):not(.spare) { transform: translateY(-2px); filter: brightness(1.08); }

/* Sets are offered as whole rows, since a set is chosen entire. */
.ability-set { display: flex; align-items: center; gap: .25rem; width: 100%; padding: .25rem .4rem; border: 1px solid var(--maroon-edge); border-radius: .3rem; background: var(--maroon); color: var(--silver); cursor: pointer; }
.ability-set:hover { border-color: var(--gold-deep); }
.ability-set.chosen { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-glow); }
.ability-set .set-name { min-width: 2.5rem; color: var(--silver-dim); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.ability-set .set-score { display: inline-grid; place-items: center; min-width: 1.5rem; padding: .05rem .2rem; border-radius: 4px; background: var(--maroon-deep); color: var(--silver); font-family: var(--font-display); font-size: .8rem; }
.ability-set .set-total { margin-left: auto; color: var(--gold); font-family: var(--font-display); font-size: .8rem; }

/* One tooltip style for anything that can explain itself: the dice behind a total. */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; z-index: 20; bottom: calc(100% + .3rem); left: 50%; transform: translateX(-50%);
  padding: .25rem .45rem; border: 1px solid var(--gold-deep); border-radius: .3rem;
  background: var(--maroon-deep); color: var(--silver); font-family: var(--font-body, inherit);
  font-size: .66rem; font-weight: 400; letter-spacing: .02em; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 12px var(--shadow);
}



@media (prefers-reduced-motion: reduce) { .ability-die { transition: none; } }
.ability-squares .ability-square:nth-child(-n+2)[data-tip]:hover::after { left: 0; transform: none; }
.ability-squares .ability-square:nth-last-child(-n+2)[data-tip]:hover::after { left: auto; right: 0; transform: none; }
.ability-tray[hidden], .ability-tray-caption[hidden] { display: none; }

/* The centre is read in two columns: the sheet being filled in on the left,
   with whatever is being dragged into it directly underneath, and the dice
   and any rolled sets on the right. A method with neither gives its column
   back to the table. */
.ability-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: .7rem; align-items: start; }
.ability-columns[data-right="empty"] { grid-template-columns: minmax(0, 1fr); }
.ability-column { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.ability-column-right[hidden] { display: none; }
.ability-column-right .ability-tray { min-height: 8.5rem; }
.ability-sets { display: flex; flex-direction: column; gap: .25rem; max-height: 21rem; overflow-y: auto; padding: .35rem; border: 1px solid var(--maroon-edge); border-radius: var(--radius); background: var(--maroon-deep); }
.ability-sets[hidden] { display: none; }


/* Three widths. Wide enough for both: the method list beside the view, and the
   view in its own two columns. Under 1008px the view keeps its column but
   stacks what is inside it. Under 900px the method list stops taking width
   from the table at all and moves behind a settings button at the bottom left,
   where the app keeps its other page controls. */
.ability-settings-fab, .ability-drawer-scrim { display: none; }
@media (max-width: 1007.98px) {
  .ability-columns, .ability-columns[data-right="full"] { grid-template-columns: minmax(0, 1fr); }
  .ability-column-right .ability-tray { min-height: 7rem; }
  .ability-sets { max-height: 15rem; }
}
@media (max-width: 899.98px) {
  .ability-page .ability-layout { grid-template-columns: minmax(0, 1fr); }
  /* No method column to sit beside, so the heading centres over the whole page. */
  .dice-page.ability-page > h1 { padding-left: 0; }
  .ability-methods-panel {
    position: fixed; z-index: 940; top: 0; bottom: 0; left: 0; width: min(19rem, 86vw);
    margin: 0; border-radius: 0; overflow-y: auto;
    transform: translateX(-102%); transition: transform .2s ease;
    box-shadow: 0 0 28px rgba(0, 0, 0, .55);
  }
  .ability-methods-panel[data-open="true"] { transform: none; }
  .ability-drawer-scrim { display: block; position: fixed; z-index: 939; inset: 0; background: rgba(0, 0, 0, .55); }
  .ability-drawer-scrim[hidden] { display: none; }
  .ability-settings-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 941; left: .85rem; bottom: .85rem;
    width: 42px; height: 42px; min-height: 42px; padding: 0;
    border: 1px solid var(--gold-deep); border-radius: var(--radius-sm);
    background: var(--maroon-deep); color: var(--gold); cursor: pointer;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .45);
  }
  .ability-settings-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ability-settings-fab:hover, .ability-settings-fab[aria-expanded="true"] { background: var(--maroon-lit); border-color: var(--gold); }
  .ability-grid-wrap { grid-template-columns: minmax(0, 1fr); }
  .ability-side { border-top: 1px solid var(--maroon-edge); padding-top: .3rem; }
  .ability-side-row::before { content: attr(data-ability); min-width: 2.2rem; color: var(--silver-dim); font-size: .62rem; letter-spacing: .06em; }
  .ability-side-row { height: auto; min-height: var(--ability-row-h); }
  .ability-center { padding-bottom: 3.6rem; }
}
@media (max-width: 720px) { .ability-center { overflow: visible; } }