/* The shell's decisions (kit/decide.js; docs/UI_GUIDE.md, Components): action tiles, either/or, the
   card picker, the stepper, the footer (secondary · selection · primary) and the full decision view
   over the dimmed board. Tokens only; amber (--gc-signal) only for what the player can act on now. */

.dc { display: flex; flex-direction: column; gap: var(--gc-s-3); }
.dc-prompt { font-size: 12.5px; color: var(--gc-text-2); }
.dc-group { display: flex; flex-direction: column; gap: var(--gc-s-2); }
.dc-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gc-text-3); }

/* Action tiles: a name, one line, a cost, the effect. A tap decides (or picks, with a confirm). */
.dc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr)); gap: var(--gc-s-2); }
.dc-tiles.dense { display: flex; flex-wrap: wrap; }
.dc-tiles.either { display: flex; flex-direction: column; align-items: stretch; }
@media (min-width: 520px) { .dc-tiles.either { flex-direction: row; align-items: center; } .dc-tiles.either > .dc-tile { flex: 1; } }
.dc-tile { position: relative; display: flex; align-items: center; gap: var(--gc-s-2); min-height: 44px; padding: 8px 12px;
           border: 1px solid var(--gc-rule-strong); border-radius: var(--gc-r-m); background: var(--gc-raised); color: var(--gc-text);
           font: inherit; text-align: left; cursor: pointer; transition: border-color var(--gc-dur-quick), background var(--gc-dur-quick); }
.dc-tile.dense { min-width: 44px; justify-content: center; text-align: center; padding: 6px 12px; }
@media (hover: hover) { .dc-tile:hover:not(:disabled) { border-color: var(--gc-signal); } .dc-card:hover:not(:disabled) .dc-frame { border-color: var(--gc-signal); } }
.dc-tile:focus-visible { border-color: var(--gc-signal); }
.dc-tile:focus-visible, .dc-card:focus-visible, .dc-pill:focus-visible { outline: 2px solid var(--gc-signal); outline-offset: 2px; }
.dc-tile.on { border-color: var(--gc-text); box-shadow: inset 0 0 0 1px var(--gc-text); }
.dc-tile:disabled { cursor: default; background: var(--gc-panel); border-style: dashed; }
.dc-tile:disabled .dc-name { color: var(--gc-text-3); }
/* A legal no-op the rules force (every option is one): selectable, but it looks like nothing happens. */
.dc-tile.idle:not(:disabled) { background: var(--gc-panel); border-style: dashed; }
.dc-tile.idle:not(:disabled) .dc-name { color: var(--gc-text-2); }
.dc-tile-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dc-tile-art { flex: none; width: 36px; height: 36px; object-fit: contain; }
.dc-name { font-weight: 600; font-size: 14px; line-height: 1.25; }
.dc-line { font-size: 12.5px; line-height: 1.3; color: var(--gc-text-2); }
.dc-why { color: var(--gc-text-3); font-style: italic; }
.dc-eff { font-size: 12.5px; color: var(--gc-text-2); font-variant-numeric: tabular-nums; }
.dc-cost { flex: none; align-self: flex-start; padding: 2px 8px; border-radius: var(--gc-r-s); background: var(--gc-sunken);
           font: 700 14px/1.3 var(--gc-font-ui); font-variant-numeric: tabular-nums; color: var(--gc-text); }
/* Choices picked on the board (choice.board): one quiet line each, "List" to show them as tiles. */
.dc-onboard { display: flex; align-items: center; gap: var(--gc-s-2); min-height: 44px; padding: 4px 4px 4px 12px;
              border: 1px dashed var(--gc-rule-strong); border-radius: var(--gc-r-m); }
.dc-onboard-t { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.dc-onboard-n { font-size: 14px; font-weight: 600; color: var(--gc-text); }
.dc-list { flex: none; padding: 4px 12px; }
.dc-unlist { align-self: flex-start; }
@media (pointer: coarse) { .dc-list { min-height: 44px; } }
.dc-or {align-self: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gc-text-3); padding: 0 var(--gc-s-1); }

/* Selection badges: the order picked (1, 2, 3) or ✓. White, never amber (amber is "act now"). */
.dc-badge { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
            display: grid; place-items: center; background: var(--gc-text); color: var(--gc-bg); font: 700 12.5px/1 var(--gc-font-ui);
            box-shadow: 0 0 0 2px var(--gc-surface); pointer-events: none; }

/* The card picker: card frames (63 × 88 by default), choose N. */
.dc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--gc-s-3) var(--gc-s-2); }
.dc-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: var(--gc-s-1); min-width: 44px; padding: 0;
           border: 0; background: none; color: var(--gc-text); font: inherit; text-align: center; cursor: pointer; }
.dc-frame { position: relative; display: grid; place-items: center; aspect-ratio: var(--dc-ratio, .716); overflow: hidden;
            border-radius: var(--gc-r-m); border: 1px solid var(--gc-rule-strong); background: var(--gc-panel);
            transition: transform var(--gc-dur-quick) var(--gc-ease-out), border-color var(--gc-dur-quick); }
.dc-frame > * { max-width: 100%; max-height: 100%; }
.dc-card-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dc-card-blank { padding: var(--gc-s-2); font-weight: 600; font-size: 12.5px; }
.dc-card:focus-visible .dc-frame { border-color: var(--gc-signal); }
.dc-card.on .dc-frame { border-color: var(--gc-text); box-shadow: 0 0 0 2px var(--gc-text); transform: translateY(-4px); }
.dc-card:disabled { cursor: default; }
.dc-card:disabled .dc-frame, .dc-card.idle .dc-frame { opacity: .45; filter: grayscale(.6); }
/* What picking does (the descriptor's intent, web/kit/intent.js): a card that would be lost shows a
   red edge, a veil and a ✕ when picked, hovered or focused; a neutral pick the verb's badge. */
.dc-cards[data-tone] .dc-frame::after { content: none; }
.dc-cards[data-tone="bad"] .dc-card:is(.on, :focus-visible) .dc-frame { border-color: var(--gc-bad); box-shadow: 0 0 0 2px var(--gc-bad), 0 0 16px var(--gc-bad-soft); }
.dc-cards[data-tone="bad"] .dc-card.on .dc-frame::after, .dc-cards[data-tone="bad"] .dc-card:focus-visible .dc-frame::after {
  content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 34px/1 var(--gc-font-ui);
  color: var(--gc-on-bad); background: var(--gc-bad-veil); text-shadow: 0 0 .14em var(--gc-bad), 0 2px 6px rgba(0, 0, 0, .5); pointer-events: none; }
@media (hover: hover) {
  .dc-cards[data-tone="bad"] .dc-card:hover:not(:disabled) .dc-frame { border-color: var(--gc-bad); box-shadow: 0 0 0 2px var(--gc-bad), 0 0 16px var(--gc-bad-soft); }
  .dc-cards[data-tone="bad"] .dc-card:hover:not(:disabled) .dc-frame::after {
    content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 34px/1 var(--gc-font-ui);
    color: var(--gc-on-bad); background: var(--gc-bad-veil); text-shadow: 0 0 .14em var(--gc-bad), 0 2px 6px rgba(0, 0, 0, .5); pointer-events: none; }
}
.dc-cards[data-tone="neutral"] .dc-card.on .dc-frame::after {
  content: attr(data-verb); position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px;
  font: 700 11px/1.3 var(--gc-font-ui); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
  background: var(--gc-glass); color: var(--gc-text); box-shadow: 0 0 0 1px var(--gc-rule-strong); }
.dc-card .dc-name { font-size: 12.5px; }
.dc-card .dc-line { font-size: 11px; }

/* The stepper: an amount. */
.dc-amount { display: flex; flex-direction: column; align-items: center; gap: var(--gc-s-2); }
.dc-stepper { display: flex; align-items: center; gap: var(--gc-s-4); }
.dc-step { width: 44px; height: 44px; padding: 0; font-size: 22px; line-height: 1; border-radius: 22px; }
.dc-val { min-width: 72px; text-align: center; font: 700 34px/1.1 var(--gc-font-display); font-variant-numeric: tabular-nums; }
.dc-step-line { font-size: 12.5px; color: var(--gc-text-2); text-align: center; }
.dc-range { width: 100%; max-width: 320px; min-height: 32px; accent-color: var(--gc-signal); }
@media (pointer: coarse) { .dc-range { min-height: 44px; } }

/* The footer: secondary left, what is picked in the middle, the one primary right. */
.dc-foot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--gc-s-2); padding-top: var(--gc-s-1); }
/* In the decision card the footer stays in view while the choices scroll (the sheet's body scrolls;
   the card clips without becoming a scroller of its own, so the footer can stick). */
.turn-panel { overflow: clip; }
.dc > .dc-foot { position: sticky; bottom: -12px; z-index: 1; margin: 0 -14px -12px; padding: var(--gc-s-2) 14px var(--gc-s-3);
                 background: var(--gc-surface); border-top: 1px solid var(--gc-rule); }
.dc-foot-l, .dc-foot-r { display: flex; flex-wrap: wrap; gap: var(--gc-s-2); align-items: center; }
.dc-foot-r { justify-content: flex-end; }
.dc-echo { min-width: 0; text-align: center; font-size: 12.5px; color: var(--gc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-echo:empty { visibility: hidden; }
@media (max-width: 520px) {
  .dc-foot { grid-template-columns: 1fr auto; }
  .dc-echo { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  .dc-echo:empty { display: none; }
}
@media (pointer: coarse) { .dc-foot .btn, .dc-min { min-height: 44px; } }

/* The pill a minimised full view leaves in the decision card: it opens it again. */
.dc-pill { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 8px 14px;
           border: 1px solid var(--gc-signal); border-radius: 999px; background: var(--gc-signal-soft); color: var(--gc-text);
           font: inherit; text-align: left; cursor: pointer; }
.dc-pill-t { font-weight: 700; font-size: 14px; }
.dc-pill-s { font-size: 11px; color: var(--gc-text-2); letter-spacing: .02em; }

/* The full decision view: over the dimmed board, under the bar (Library and Undo stay). Phones: the
   sheet pulled up; tablets and desktops: a centred panel. */
.dc-full { position: fixed; inset: 0; z-index: 28; display: flex; align-items: flex-end; justify-content: center;
           padding-top: calc(var(--bar-h) + var(--safe-t) + 24px);
           background: color-mix(in srgb, var(--gc-bg) 70%, transparent); animation: dc-in var(--gc-dur-base) var(--gc-ease-out); }
.dc-full[hidden] { display: none; }
.dc-panel { display: flex; flex-direction: column; width: 100%; max-height: 100%; min-height: 0; background: var(--gc-surface);
            border: 1px solid var(--gc-rule); border-bottom: 0; border-radius: var(--gc-r-l) var(--gc-r-l) 0 0; box-shadow: var(--gc-shadow);
            padding-bottom: var(--safe-b, 0px); animation: dc-up var(--gc-dur-base) var(--gc-ease-out); }
.dc-panel-head { display: flex; align-items: center; gap: var(--gc-s-2); padding: var(--gc-s-3) var(--gc-s-4) var(--gc-s-2); border-bottom: 1px solid var(--gc-rule); }
.dc-title { flex: 1; min-width: 0; font-size: 19px; font-weight: 700; }
.dc-progress { margin-left: var(--gc-s-2); font-size: 12.5px; font-weight: 500; color: var(--gc-text-3); }
.dc-panel-body { display: flex; flex-direction: column; gap: var(--gc-s-3); padding: var(--gc-s-3) var(--gc-s-4) var(--gc-s-4); overflow: auto; overscroll-behavior: contain; }
.dc-panel-body .dc-foot { position: sticky; bottom: calc(-1 * var(--gc-s-4)); margin: 0 calc(-1 * var(--gc-s-4)) calc(-1 * var(--gc-s-4));
                          padding: var(--gc-s-3) var(--gc-s-4); background: var(--gc-surface); border-top: 1px solid var(--gc-rule); }
@media (min-width: 700px) and (min-height: 560px) {
  .dc-full { align-items: center; padding: calc(var(--bar-h) + var(--safe-t) + 24px) 24px 24px; }
  .dc-panel { width: min(680px, 100%); border-bottom: 1px solid var(--gc-rule); border-radius: var(--gc-r-l); padding-bottom: 0;
              animation-name: dc-pop; }
  /* Cards picked in the full view, large enough to read their printed text (owner, 2026-10-07: the
     starting cards were thumbnails), centred when there are few. Hold to zoom still works. */
  .dc-panel .dc-cards { grid-template-columns: repeat(auto-fit, minmax(168px, 212px)); justify-content: center; }
  .dc-panel .dc-card .dc-name { font-size: 14px; }
  .dc-panel .dc-card .dc-line { font-size: 12.5px; }
}
@keyframes dc-in { from { opacity: 0; } }
@keyframes dc-up { from { transform: translateY(24px); opacity: 0; } }
@keyframes dc-pop { from { transform: scale(.97); opacity: 0; } }
/* Compact tiles (descriptor.compact): square buttons, the number or the picture alone, a cost small under it. */
.dc-tiles.compact .dc-tile { min-width: 52px; min-height: 52px; padding: 6px; flex-direction: column; gap: 2px; }
.dc-tiles.compact .dc-tile .dc-tile-main { flex: none; align-items: center; }
.dc-tiles.compact .dc-tile-main:empty { display: none; }
.dc-tiles.compact .dc-name { font-size: 20px; font-weight: 700; line-height: 1; }
.dc-tiles.compact .dc-cost { align-self: center; font-size: 11px; }
/* a picture (a die): the tile its size, the cost (a count) on its corner */
.dc-tiles.compact .dc-tile:has(.dc-tile-art) { min-width: 48px; min-height: 48px; padding: 5px; }
.dc-tiles.compact .dc-tile-art { width: 36px; height: 36px; }
.dc-tiles.compact .dc-tile:has(.dc-tile-art) .dc-cost { position: absolute; top: -7px; right: -7px; padding: 1px 5px; border: 1px solid var(--gc-line); }