/* The build creator (src/app/builder.mjs): pick cards with number chips, a
   live stats preview and the review. Shares the classic creator's shell. */
.builder .creator-progress{gap:0}
.builder .creator-progress button{min-width:0}
.builder .creator-steps button{min-height:38px;padding-block:4px}
.build-pick-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);margin:0 0 14px}
.build-pick-head b{color:var(--accent-200);font:500 var(--size-title) var(--body)}
.build-pick-head input{max-width:260px}
.build-group{margin:18px 0 8px;color:var(--accent-350);font:500 var(--size-compact) var(--body);text-transform:uppercase;letter-spacing:.06em}
.build-cards{display:grid;gap:var(--space-5)}
.build-cards.compact{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.build-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;padding:14px 16px;border:1px solid var(--stone-700);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--text-soft);text-align:left;cursor:pointer}
.build-card b{color:var(--text);font:500 var(--size-body) var(--body)}
.build-card>span{color:var(--text-dim);line-height:1.45;font-size:var(--size-compact)}
.build-card.chosen{border-color:var(--accent-450);background:linear-gradient(var(--stone-780),var(--accent-950));box-shadow:0 0 0 1px rgb(var(--accent-450-rgb) / .25)}
.build-card.chosen b{color:var(--accent-200)}
.build-main-attr{color:var(--muted);font-size:var(--size-ui)}
.build-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.build-chip{padding:3px 10px;border-radius:var(--radius-round);background:rgb(var(--well-rgb) / .9);color:#6fcf8a;font-size:var(--size-ui)}
.build-chip.down{color:#e48a7a}
.build-stats,.build-scores{margin:10px 0;display:grid;gap:4px}
.build-stats div,.build-scores div{display:flex;justify-content:space-between;gap:var(--space-6);padding:4px 0;border-top:1px solid var(--stone-800)}
.build-stats dt,.build-scores dt{color:var(--text-dim)}
.build-stats dd,.build-scores dd{margin:0;color:var(--text);font-variant-numeric:tabular-nums}
.build-pool.health dd{color:#6fcf8a}.build-pool.mana dd{color:#7fb2ff}.build-pool.stamina dd{color:#b9e27a}
.build-scores .moved dd{color:var(--accent-200)}
.build-note{display:block;margin:6px 0;color:var(--muted);font-size:var(--size-ui);line-height:1.45}
.build-review-stats{border:1px solid var(--stone-750);border-radius:var(--radius-md);background:rgb(var(--well-rgb) / .75);padding:15px;margin-bottom:16px}
.build-review-stats h4{margin:14px 0 4px;color:var(--accent-350);font:500 var(--size-compact) var(--body);text-transform:uppercase;letter-spacing:.06em}
.build-review-stats h4:first-child{margin-top:0}
.build-review-stats p{margin:4px 0;color:var(--text-soft);line-height:1.5}
.build-review-stats .build-scores{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-9)}
.build-review{display:grid;gap:var(--space-4)}
.build-review-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:10px 14px;border:1px solid var(--stone-750);border-radius:var(--radius-md);background:var(--surface-raised)}
.build-review-row span{display:flex;flex-direction:column;gap:2px;min-width:0}
.build-review-row small{color:var(--muted);font-size:var(--size-ui)}
.build-review-row b{color:var(--text);font-weight:500;overflow-wrap:anywhere}
.build-review-row button{flex:0 0 auto;min-width:40px;min-height:40px;padding:0}
#build-preview h4{margin:10px 0 2px;text-align:center;color:var(--accent-200)}
#build-preview>p{margin:0 0 10px;text-align:center;color:var(--text-dim)}
@media(max-width:760px){
  .build-pick-head{flex-direction:column;align-items:stretch}
  .build-pick-head input{max-width:none}
  .build-cards.compact{grid-template-columns:1fr}
  .build-review-stats .build-scores{grid-template-columns:1fr 1fr}
  .builder .creator-progress{min-width:0;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .builder .creator-progress button{flex:0 0 26px}
  .builder .creator-progress button::before{width:22px;height:22px;font-size:11px}
  .builder .creator-progress button::after{top:11px;left:calc(50% + 12px);right:calc(-50% + 12px)}
}
.build-premade{display:flex;gap:var(--space-5);align-items:stretch}
.build-premade select{flex:1;min-width:0;padding:9px 34px 9px 9px}
.build-premade button{flex:0 0 auto;min-height:42px}
.build-note button{margin-left:6px;padding:2px 10px}
@media(max-width:760px){.build-premade{flex-direction:column}}

/* The rules picker (src/app/builder.mjs rulesGridHtml): each rules' built-in
   world as its picture with the name across its foot, two to a row on a
   phone and more on a wide screen; the chosen one ringed in the accent, its
   card spanning the row under it (dense flow fills the row around it). */
.rules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-flow:row dense;gap:var(--space-5);margin:6px 0 4px}
.creator-main .rules-tile{position:relative;display:block;min-width:0;margin:0;cursor:pointer}
.rules-tile input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.rules-tile-art{display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:repeating-linear-gradient(135deg,var(--surface-raised) 0 6px,var(--surface-low) 6px 12px)}
.rules-tile-art img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.78);transition:filter .15s}
.rules-tile-name{position:absolute;left:1px;right:1px;bottom:1px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:18px 9px 7px;background:linear-gradient(transparent,rgb(var(--black-rgb) / .85));color:var(--text);font:600 var(--size-label)/1.25 var(--head);letter-spacing:.02em;text-shadow:0 1px 2px rgb(var(--black-rgb) / .8);pointer-events:none}
.rules-tile:hover .rules-tile-art img,.rules-tile input:checked~.rules-tile-art img{filter:none}
.rules-tile input:checked~.rules-tile-art{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.rules-tile input:checked~.rules-tile-name{color:var(--accent-200)}
.rules-tile input:focus-visible~.rules-tile-art{outline:2px solid var(--accent);outline-offset:4px}
.rules-tile .unfinished-tag{font-size:var(--size-micro);text-shadow:none}
.rules-detail{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--space-3);padding:12px 14px;border:1px solid var(--accent-750);border-left:3px solid var(--accent);border-radius:var(--ledger-radius,2px);background:var(--surface-low)}
.rules-detail p{margin:0}
.rules-detail-feel{color:var(--text);font-size:var(--size-body);line-height:1.4}
.rules-detail-feel b{margin-right:4px;color:var(--accent)}
.rules-detail-brief{color:var(--text-dim);font-size:var(--size-small);line-height:1.45}
@media(prefers-reduced-motion:reduce){.rules-tile-art img{transition:none}}

/* v8.87.0: the editors' look (dialogs.css). The header as every dialog's,
   a step picker on a phone (the step list beside on a wide screen), the
   interface font and square corners; the rules as one card until changed,
   a quick start above who they are, Assist beside its label, and cards with
   what they add first and a long description in three lines. */
#build-dialog .creator-shell{font-family:var(--head);border-radius:var(--ledger-radius)}
#build-dialog .creator-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);min-height:61px;padding:4px 6px 4px 20px;border-bottom:2px solid var(--accent-700);background:var(--surface)}
#build-dialog .creator-top h2{font-size:var(--size-lead)}
#build-dialog .creator-step-pick{display:none}
#build-dialog .creator-heading{padding-bottom:14px;margin-bottom:18px}
#build-dialog .creator-heading h3{margin:4px 0 6px;color:var(--text);font:600 var(--size-story)/1.3 var(--head)}
#build-dialog .creator-heading p{font-size:var(--size-small);line-height:1.5}
#build-dialog .creator-fieldset{margin:18px 0;padding:14px 16px;border-radius:var(--ledger-radius)}
#build-dialog .creator-fieldset legend{color:var(--accent-350);font:600 var(--size-ui) var(--head)}
#build-dialog .creator-main label{color:var(--text-dim);font:500 var(--size-ui) var(--head)}
#build-dialog .creator-main :is(input:not([type=radio],[type=checkbox]),textarea,select){border-radius:var(--ledger-radius);font:400 var(--size-compact)/1.4 var(--head)}
#build-dialog .choice-card span{min-height:48px;border-radius:var(--ledger-radius);font:500 var(--size-small) var(--head)}
#build-dialog .choice-grid{margin:6px 0 0}
#build-dialog .creator-steps button,#build-dialog .creator-footer button,#build-dialog .creator-main button:not(.build-card,.build-more){border-radius:var(--ledger-radius)}
#build-dialog .creator-footer button{min-height:44px}
#build-dialog .build-pick-head b{color:var(--text-dim);font:600 var(--size-ui) var(--head);letter-spacing:.02em}
#build-dialog .build-group{font:600 var(--size-label) var(--head);letter-spacing:.12em}
#build-dialog .build-card{border-radius:var(--ledger-radius)}
#build-dialog .build-card b{font:600 var(--size-compact) var(--head)}
#build-dialog .build-card>.build-blurb{font-size:var(--size-small)}
#build-dialog :is(.build-review-stats,.build-review-row){border-radius:var(--ledger-radius)}
#build-dialog .build-review-stats h4,#build-dialog .creator-preview h3{font:600 var(--size-label) var(--head);letter-spacing:.12em}
#build-preview h4{font:600 var(--size-lead) var(--head)}
/* A long description: three lines, all of it when chosen or opened. */
.build-card-wrap{position:relative;min-width:0}
.build-card.has-more{padding-bottom:40px}
.build-card.has-more:not(.open) .build-blurb{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.build-more{position:absolute;right:6px;bottom:4px;min-height:32px;padding:0 12px;border:0;background:none;color:var(--accent-350);font:600 var(--size-label) var(--head)}
.build-more:hover,.build-more:focus-visible{color:var(--accent)}
/* The chosen rules, shut. */
.rules-chosen{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-3) var(--space-6)}
.rules-chosen-art{grid-row:span 2;display:grid;place-items:center;width:88px;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--accent);border-radius:var(--ledger-radius);background:var(--surface-low)}
.rules-chosen-art img{display:block;width:100%;height:100%;object-fit:cover}
.rules-chosen-text{flex:1;display:grid;gap:2px;min-width:0}
.rules-chosen-text b{color:var(--accent-200);font:600 var(--size-compact) var(--head)}
.rules-chosen-text small{color:var(--text-dim);font-size:var(--size-ui);line-height:1.4}
.rules-chosen button{justify-self:start;min-height:40px;padding:0 12px}
/* The quick start. */
.premade-traits{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.quick-start-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);margin-top:8px}
.quick-start-row .build-note{margin:0}
.quick-start-row button{min-height:44px}
/* Assist beside its label (the other editors' place), not a bar under the field. */
#build-dialog .creator-main label:has(>.creator-assist-row){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--space-5);row-gap:var(--space-3)}
#build-dialog .creator-main label:has(>.creator-assist-row)>:not(.creator-assist-row){grid-column:1/-1}
#build-dialog .creator-main label>.creator-assist-row{grid-column:2;grid-row:1;margin:0}
#build-dialog .creator-assist-button{width:auto;min-height:36px;padding:0 12px;border-radius:var(--ledger-radius)}
@media(max-width:800px){#build-dialog .creator-main :is(input:not([type=radio],[type=checkbox]),textarea,select){font-size:var(--size-body)}}
@media(max-width:760px){
  #build-form{grid-template-rows:auto auto minmax(0,1fr) auto}
  #build-dialog .creator-top{min-height:calc(61px + env(safe-area-inset-top));padding:calc(4px + env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) 4px max(16px,env(safe-area-inset-left))}
  #build-dialog .creator-step-pick{display:block;margin:0;padding:10px 14px;border-bottom:1px solid var(--stone-800);background:var(--surface-low)}
  #build-dialog .creator-step-pick select{width:100%;min-height:48px;border-color:var(--accent-600);border-radius:var(--ledger-radius);color:var(--accent-100);font:600 var(--size-body) var(--head)}
  #build-dialog .creator-heading small{display:none}
  #build-dialog .creator-footer{padding-bottom:calc(9px + env(safe-area-inset-bottom))}
}
#build-dialog .creator-main .form-grid{grid-template-columns:minmax(0,1fr)}
#build-dialog .build-review-stats p{font-size:var(--size-small)}
#build-dialog :is(.build-stats,.build-scores){font-size:var(--size-compact)}