/* Battle interface finish. The engine, action order and visible state labels
   remain authoritative. Ink carries information; brass marks a real choice. */
.arena,
.hand-panel,
.commands-panel,
.review-panel,
.phase-track,
.turn-summary {
  --battle-ink: #101d24;
  --battle-surface: #172831;
  --battle-raised: #20343c;
  --battle-line: #536467;
  --battle-soft-line: #34484d;
  --battle-paper: #f3ecda;
  --battle-muted: #c0cbc6;
  --battle-brass: #e4c184;
  --battle-brass-line: #b69862;
  --battle-guard: #b5dbe7;
  --battle-heal: #b9dac2;
  --battle-danger: #ffc2aa;
}

/* A quiet, opaque instrument panel frames the existing combat illustrations. */
.arena .arena-top {
  gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid #b6a78130;
  background: #10222bec;
}
.arena .location-tag { color: var(--battle-paper); font-size: 12px; letter-spacing: .025em; }
.arena .location-dot { background: var(--battle-brass); box-shadow: 0 0 0 3px #e4c18416; }
.arena .turn-tag { color: #ddc89e; font-size: 12px; font-variant-numeric: tabular-nums; }
.arena .next-intent { color: #f3d9b5; border-color: #897554; background: #2b302d; }
.arena .fighter-info {
  padding: 10px 11px 11px;
  border: 1px solid #66767764;
  border-radius: 11px;
  background: #10212a;
  box-shadow: 0 5px 14px #05101738;
}
.arena .fighter-meta { gap: 4px 8px; min-height: 26px; color: #d5ded4; }
.arena .fighter-meta > span:last-child {
  color: var(--battle-paper);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
}
.arena .health-track { height: 10px; margin-top: 8px; border: 1px solid #7d90804f; background: #07151b; }
.arena .player-fill { background: linear-gradient(90deg, #6caa94, #b4d4a1); }
.arena .enemy-fill { background: linear-gradient(90deg, #ad7056, #e5b082); }
.arena .enemy-ward { background: #193d49; border-color: #648e99; }
.arena .enemy-ward > small { color: #d2e2df; font-size: 11px; }
.arena .stage-guide-button { min-height: 48px; padding: 5px 3px; border-radius: 8px; }
.arena .stage-action { color: #d2dbd1; line-height: 1.5; }
.arena .stage-member.is-ready .stage-action { color: var(--member-accent); }
.arena .stage-member.is-acting { box-shadow: 0 0 0 1px #f3dfac3d, 0 8px 20px #06151d4d; }
.arena .intent-badge {
  min-height: 48px;
  padding: 10px;
  border-color: #ac8966;
  background: #352c27;
  color: #f9dbbb;
  font-size: 13px;
  line-height: 1.55;
}
.arena .intent-badge[data-mechanic="charging"] { border-color: #bda16a; background: #383021; color: #ffe1a9; }
.arena .party-poison { background: #332a43; border-color: #ab8ec5; color: #efdcff; }

.arena #action-callout {
  min-height: 104px;
  margin: 12px 16px 0;
  padding: 15px 16px;
  border-color: #687373;
  border-left-color: var(--battle-brass);
  background: #142730;
  box-shadow: inset 0 1px 0 #f8e8ba0b, 0 8px 18px #06131b33;
}
.arena #action-callout .actor { color: var(--battle-brass); font-size: 11px; letter-spacing: .065em; }
.arena #action-callout .action { color: #fff1d4; font-size: clamp(21px, 2vw, 25px); line-height: 1.3; }
.arena #action-callout .detail { color: #d1dcd7; font-size: 13px; line-height: 1.65; }
.arena .cinema-event-caption { border-top-color: #61717670; color: #c5d5d6; font-size: 12px; }
.arena .cinema-event-caption > b { color: #ead9b0; border-color: #8a785b; background: #2a302d; font-size: 10px; }
.arena #turn-order { gap: 6px; }
.arena #turn-order .turn-chip { min-height: 34px; color: #d2dcd7; border-color: #4f6268; background: #13262e; }
.arena #turn-order .turn-chip.active { color: #23251f; background: #e5c88d; border-color: #f3deaf; }
.arena #turn-order .turn-chip.complete { color: #b6c8c3; opacity: 1; background: #12252b; border-color: #3d565b; }
.arena #turn-order .turn-chip.complete > b { color: #b8d5c1; background: #28463d; }

/* Current intent and future intent stay visually separate; disclosures retain
   their existing labels and do not conceal present-round risk. */
.arena .enemy-plan { padding: 14px; background: #11242c; border-color: #4b6064; }
.arena .ei-heading { margin-bottom: 13px; }
.arena .ei-emblem { color: var(--battle-brass); border-color: #9b8056; background: #2b302a; }
.arena .ei-title > span,
.arena .ei-title > small { color: #bbc9c5; font-size: 11px; }
.arena .ei-title h3 { color: #f3e8cc; font-size: 21px; }
.arena .ei-target { color: #e1d9be; background: #233438; border-color: #617170; }
.arena .ei-metric { padding: 10px 11px; background: #1d343e; border: 1px solid #425c65; }
.arena .ei-metric > span,
.arena .ei-metric > small { color: #d1ddd7; font-size: 12px; }
.arena .ei-metric > strong { color: #f5d6a4; font-size: 27px; }
.arena .ei-counter { background: #142a31; border-color: #3d565b; padding: 10px; }
.arena .ei-counter strong { color: #e1e7d9; font-size: 13px; }
.arena .ei-counter small { color: #c1d0c7; font-size: 12px; }
.arena .ei-condition-state { color: #d0cfb6; font-size: 11px; }
.arena .ei-counter[data-met="true"] { background: #233b32; border-color: #99ac79; }
.arena .ei-counter[data-met="true"] .ei-check { color: #243229; background: #dce5bb; border-color: #dce5bb; }
.arena .ei-next > summary { min-height: 48px; color: #e1d8bb; font-size: 13px; }
.arena .ei-next > summary > b { color: #f3d3a3; font-size: 12px; }
.arena .ei-note { color: #bdcec7; font-size: 12px; }
.arena .ei-special { background: #332f27; border-color: #9c815c; }
.arena .ei-special[data-enemy-mechanic="poison"] { background: #332a43; border-color: #9179ac; }
.arena .battle-build button,
.arena #battle-playback button {
  min-height: 48px;
  min-width: 48px;
  padding: 10px 12px;
  border-color: #647779;
  background: #1e343d;
  color: #eee7cf;
  font-size: 12px;
}
.arena #battle-playback button[aria-pressed="true"] { color: #29291f; background: #e6ca92; border-color: #f4dda9; }
.arena .battle-build > span { color: #c1d0c8; font-size: 12px; }
.arena > .battle-utility { color: #c6d5cd; }
.arena > .battle-utility .text-button { min-height: 48px; color: #ecd4a4; }

/* The three steps form a stable visual anchor across dice, command and replay. */
.phase-track { padding: 5px; gap: 5px; background: #11232a; border-color: #566467; border-radius: 13px; }
.phase-track .phase-step { min-height: 48px; padding: 8px 7px; color: #c1cec7; background: transparent; font-size: 12px; }
.phase-track .phase-step > b { color: #c8d4cb; border-color: #677b77; }
.phase-track .phase-step.active { color: #f8e7bc; background: #3b3b2d; box-shadow: inset 0 -2px 0 #d7b879; }
.phase-track .phase-step.active > b { color: #292a21; background: #ebcf96; border-color: #ebcf96; }
.phase-track .phase-step.complete { color: #c7dfcd; background: #1b3430; }

.hand-panel,
.commands-panel,
.review-panel {
  padding: 22px;
  border-color: #69706a;
  border-radius: 17px;
  background: linear-gradient(145deg, #203139, #14262d 70%);
  box-shadow: inset 0 1px 0 #f2dcaa15, 0 12px 28px #03131a38;
}
.hand-panel .hand-heading,
.commands-panel .hand-heading { align-items: center; gap: 15px; padding-bottom: 15px; border-bottom: 1px solid #67777658; }
.hand-panel .hand-heading h2,
.commands-panel .hand-heading h2,
.review-panel > h2 { color: #f7ead0; font-size: clamp(23px, 2vw, 28px); line-height: 1.35; }
.hand-panel .micro,
.commands-panel .micro,
.review-panel > .micro { color: #d7bc8a; font-size: 10px; letter-spacing: .13em; }
.hand-panel .fate-meter { min-height: 54px; padding: 7px 10px; border-color: #a18a5a; background: #323329; border-radius: 11px; }
.hand-panel .fate-meter > strong { color: #ffe3ab; font-size: 20px; }
.hand-panel .fate-copy { color: #e4d4af; font-size: 11px; }
.hand-panel .quick-start { margin-top: 13px; padding: 11px 12px; background: #14272e; border-color: #455b5c; color: #cbd7ce; font-size: 13px; line-height: 1.65; }
.hand-panel .roll-tools { margin-top: 9px; gap: 12px; }
.hand-panel .roll-tools > span { color: #c0ccc5; font-size: 12px; line-height: 1.55; }
.hand-panel .roll-tools button { min-height: 48px; font-size: 12px; color: #e9d5a7; }
.hand-panel .hand-tools { min-height: 48px; margin: 4px 0 8px; }
.hand-panel .hand-tools .text-button { min-height: 48px; color: #d6decf; }
.hand-panel .selected-count { padding: 5px 11px; color: #c7d1c6; background: #10242b; border: 1px solid #65716b; border-radius: 9px; }
.hand-panel .selected-count b { color: #f2d699; font-size: 20px; font-variant-numeric: tabular-nums; }

/* The physical die keeps its semantic symbol color when selected. The brass
   rim and real check mark communicate selection without relying on color. */
.hand-panel .dice-tray { gap: 12px; padding: 5px 0 9px; }
.hand-panel .die-owner[data-character-guide] { min-height: 68px; margin-bottom: 11px; font-size: 13px; color: #f1e9d6; border-bottom-color: color-mix(in srgb, var(--owner-accent) 65%, #182c33); }
.hand-panel .die-button {
  min-height: 74px;
  border-radius: 15px;
  box-shadow: inset 0 1px 0 #fffef5, inset 0 -3px 0 #8f825b22, 0 5px 0 #061820, 0 9px 16px #03151b66;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
/* Theme backgrounds previously outranked the ivory finish while retaining its
   dark symbol ink. Set the visible face as a pair; unrevealed dice and earned
   player skins keep their own paired surfaces. Selection retains its brass rim. */
.hand-panel .die-button:is(.sword, .shield, .arrow, .star, .miss):not(.selected) {
  --icon-cut: #ece9d4;
  color: var(--die-ink);
  border-color: #b4b78c;
  background: radial-gradient(ellipse at 27% 15%, #fffdf0, transparent 72%), linear-gradient(145deg, #f2efdb, var(--die-tint));
}
.hand-panel .die-button::after { inset: 6px; border-radius: 9px; border-color: #77684840; }
.hand-panel .die-button.selected {
  --icon-cut: #f3e8c7;
  color: var(--die-ink);
  border-color: #e9c686;
  background: radial-gradient(ellipse at 27% 15%, #fffdf0, transparent 72%), linear-gradient(145deg, #f4e9c9, var(--die-tint));
  box-shadow: inset 0 0 0 2px #9c794e99, 0 0 0 3px #e8c68338, 0 5px 0 #061820, 0 10px 17px #07111966;
}
.hand-panel .die-button.selected .selected-check { width: 23px; height: 23px; color: #273028; background: #f1d79e; border-color: #5c5c42; }
.hand-panel .die-key { opacity: .85; font-size: 11px; }
.hand-panel .die-name { min-height: 20px; margin-top: 11px; color: #e1e8db; font-size: 12px; }
.hand-panel .die-skill { min-height: 59px; padding: 7px 4px; border-color: #75877c; background: #244039; color: #e4edda; border-radius: 9px; }
.hand-panel .die-skill strong { font-size: 12px; font-weight: 650; }
.hand-panel .die-skill small { color: #e9cd92; font-size: 11px; }
.hand-panel .die-skill:disabled { opacity: 1; color: #b6c5bd; background: #182d32; border-color: #455d61; }
.hand-panel .die-skill:disabled small { color: #b6c5bd; }
.hand-panel .die-inspect { min-height: 48px; color: #d6c6a2; font-size: 12px; }
.hand-panel .die-faces { padding: 7px 3px; background: #10232a; border-color: #496061; }
.hand-panel .die-faces svg { width: 12px; height: 12px; }
.hand-panel .selection-strip { padding: 10px 12px; border-color: #8c7955; background: #242e2b; }
.hand-panel .selection-strip > span { color: #e5d7b7; font-size: 13px; }
.hand-panel .selection-chip,
.hand-panel .selection-empty { width: 48px; height: 48px; flex: none; border-radius: 10px; background: #17282b; }
.hand-panel .selection-chip { border-color: #d4b67e; }
.hand-panel .selection-chip small { top: 1px; right: 5px; color: #ead7ae; font-size: 14px; }
.hand-panel .selection-empty { color: #c3ba9c; border-color: #8b8064; }
.hand-panel .selection-hint { padding-top: 10px; color: #ced9cd; font-size: 13px; line-height: 1.65; }
.hand-panel .skill-receipt { border-color: #c2a267; background: #383225; color: #ffebbc; }
.hand-panel .move-opportunities { margin-top: 16px; }
.hand-panel .move-opportunities > strong { font-size: 13px; color: #dfdfcc; }
.hand-panel .move-member { padding: 10px; border: 1px solid #3e565a; border-radius: 10px; background: #13272e; }
.hand-panel .move-member > b { color: #e7e8d5; font-size: 12px; margin-bottom: 7px; }
.hand-panel .move-member .move-chance { padding: 7px 5px; background: transparent; border-radius: 7px; }
.hand-panel .move-member .move-chance small { font-size: 12px; color: #cfdbd1; }
.hand-panel .move-member .move-chance.ready { background: #2b4134; box-shadow: inset 2px 0 #d0cd96; }
.hand-panel .move-chance em { font-size: 11px; line-height: 1.3; color: #baccc0; }
.hand-panel .move-chance.ready em { color: #e0ebbf; }
.hand-panel .need-chip { min-width: 20px; height: 23px; background: #12272b; border-color: #73856b; }
.hand-panel .need-chip.missing { opacity: .72; }
.hand-panel .combo-status { background: #312e24; border-color: #8a77504f; color: #e9d9b1; font-size: 12px; }
.hand-panel .dice-theatre { border-color: #9c895e; background: radial-gradient(ellipse at 50% 55%, #46584a66, transparent 68%), #14292d; }
.hand-panel .dth-skip { min-height: 48px; padding-inline: 11px; color: #ecd8ac; font-size: 12px; }
.hand-panel .dth-header p,
.hand-panel .dth-status { color: #c5d2c6; font-size: 12px; }

/* Companion commands: legible names, exact requirements, and one chosen state.
   Existing container rules keep Basic compact in narrow decision columns. */
#commands-panel .command-intro,
#commands-panel .command-base-note { color: #c7d5cb; font-size: 13px; line-height: 1.65; }
#commands-panel .command-types-note { background: #172c32; border-color: #b69a63; color: #d4decf; font-size: 12px; line-height: 1.65; }
#commands-panel .locked-dice { padding: 11px 10px; border-color: #9b875d; background: #27322c; }
#commands-panel .command-list { gap: 18px; margin: 19px 0; }
#commands-panel .command-row { padding: 12px; border-color: #536c70; background: #13272f; border-radius: 13px; }
#commands-panel .command-legend { color: #f3e9d4; font-size: 16px; padding: 0 6px; gap: 7px; }
#commands-panel .command-legend small { color: #bdcfc4; font-size: 12px; }
#commands-panel .command-legend .character-info-link { min-height: 48px; min-width: 48px; color: #e1d4ae; background: #23383d; border-color: #69736b; font-size: 12px; }
#commands-panel .command-passive { color: #cad8cf; font-size: 12px; line-height: 1.65; }
#commands-panel .command-passive b { color: #e8d49d; }
#commands-panel .command-passive span { color: #c8d5cd; }
#commands-panel .command-choice { min-height: 150px; gap: 8px; padding: 12px; border-color: #566d70; background: #1b323a; box-shadow: inset 0 1px 0 #fff8de07; border-radius: 10px; }
#commands-panel .command-choice > strong { color: #f0e8d6; font-size: 15px; font-weight: 650; line-height: 1.45; }
#commands-panel .command-choice .command-type { color: #c3cbc0; font-size: 10px; letter-spacing: .07em; }
#commands-panel .command-choice .command-values { color: #d6e2d7; font-size: 12px; line-height: 1.65; }
#commands-panel .command-choice .command-outlook { color: #d2dcca; font-size: 12px; line-height: 1.6; }
#commands-panel .command-choice.trained-choice { background: #1d353c; border-color: #70948f; }
#commands-panel .command-choice.chosen,
#commands-panel .command-choice.trained-choice.chosen {
  padding: 12px;
  border-color: #e0bf7f;
  background: linear-gradient(130deg, #41412f, #2b382f);
  box-shadow: inset 0 0 0 1px #c4a76e, 0 3px 10px #06161926;
}
#commands-panel .command-choice.chosen::after { color: #f4d99f; top: 12px; right: 9px; }
#commands-panel .command-choice.chosen > strong { color: #fff0ce; }
#commands-panel .command-choice:disabled { opacity: 1; background: #16282f; border-color: #40585d; box-shadow: none; }
#commands-panel .command-choice:disabled > strong { color: #b9c8bf; }
#commands-panel .command-choice:disabled :is(.command-values, .command-outlook, .command-type) { color: #acbfb6; }
#commands-panel .command-inspect,
#commands-panel .command-training-link { min-height: 48px; color: #e3cda0; font-size: 12px; }
#commands-panel .command-bridge { padding: 13px; background: #25382f; border-color: #9a9b6a; }
#commands-panel .command-bridge > p { color: #d2dcc7; font-size: 12px; line-height: 1.65; }
#commands-panel .bridge-pattern { flex-wrap: wrap; }
#commands-panel .bridge-pattern > strong { color: #ecdfb9; font-size: 13px; }
#commands-panel .bridge-techniques > span { font-size: 12px; line-height: 1.6; }

/* Forecasts preserve direct/status loss and the actual guaranteed/risk branch. */
.commands-panel .command-decision { padding: 15px; border-color: #94976d; background: #20372f; }
.commands-panel .decision-heading > span { color: #e5d6ad; font-size: 11px; }
.commands-panel .decision-heading > strong { color: #e1e7c7; background: #152d2a; }
.commands-panel .decision-metrics > div > span { color: #d3ded1; font-size: 12px; }
.commands-panel .decision-metrics > div > strong { color: #f4dfac; font-size: 32px; }
.commands-panel .decision-metrics > div > small { color: #c1d2c2; font-size: 12px; line-height: 1.6; }
.commands-panel .decision-verdict { padding: 10px; background: #162e2b; }
.commands-panel .decision-verdict > strong { font-size: 13px; }
.commands-panel .decision-actions small { color: #bed1c1; font-size: 11px; }
.commands-panel .decision-actions strong { color: #ecedda; font-size: 13px; }
.commands-panel .command-decision:is([data-decision-outcome="defeat"], [data-decision-outcome="risk"]) { background: #382d27; border-color: #be8e6a; }
.commands-panel .command-decision:is([data-decision-outcome="defeat"], [data-decision-outcome="risk"]) .decision-verdict { background: #2d2422; border-color: #a77c5a; }
.hand-panel .buff-grid,
.commands-panel .combat-forecast { gap: 8px; margin-top: 15px; }
.hand-panel .buff-grid > div,
.commands-panel .combat-forecast > div { min-height: 79px; padding: 10px 6px; border-color: #53675f; border-radius: 10px; background: #12272d; }
.hand-panel .buff-grid span,
.commands-panel .combat-forecast span { color: #c6d3c7; font-size: 12px; line-height: 1.5; }
.hand-panel .buff-grid strong,
.commands-panel .combat-forecast strong { font-size: 22px; color: #e9e5bf; font-variant-numeric: tabular-nums; }
.hand-panel .buff-grid > div:nth-child(3) strong { color: #dbbff1; }
.hand-panel .buff-grid > div:nth-child(4) strong { color: #f3d496; }
.commands-panel .combat-forecast > div:nth-child(2) strong { color: var(--battle-heal); }
.commands-panel .combat-forecast > div:nth-child(3) strong { color: var(--battle-guard); }
.commands-panel .combat-forecast > div:last-child strong { color: var(--battle-danger); }
.commands-panel .forecast-viz { padding: 13px; background: #16342e; border-color: #738f78; }
.commands-panel .forecast-viz > div:first-child { color: #d1dfcf; font-size: 12px; }
.commands-panel .forecast-viz strong { color: #e7efd0; font-size: 14px; }
.commands-panel .forecast-viz > small { color: #c2d1bf; font-size: 12px; line-height: 1.6; }
.commands-panel .forecast-life { height: 10px; background: #0a1d22; }
.commands-panel .forecast-certain { background: linear-gradient(90deg, #7ab49c, #c9db9f); }
.commands-panel .forecast-viz.danger { background: #3c2d27; border-color: #c49371; }
.commands-panel .forecast-viz.danger strong { color: #ffcfb2; }
.commands-panel .forecast-reason > summary { min-height: 48px; color: #dce5cc; font-size: 12px; }
.commands-panel .forecast-reason > p { color: #d0dfd1; font-size: 12px; }
.commands-panel .forecast-reason > small { color: #bfd0c2; font-size: 11px; }
.commands-panel .forecast-equation { padding: 11px 8px; background: #10252b; }
.commands-panel .forecast-equation > span { color: #c8d6ca; font-size: 10px; }
.commands-panel .forecast-equation b { color: #e6e7c8; font-size: 20px; }
.commands-panel .hp-after { padding-top: 10px; color: #dbe7cc; font-size: 14px; font-weight: 650; }
.commands-panel .hp-after.lethal { color: #ffc5aa; }
.commands-panel .forecast-note { color: #cad8cb; font-size: 12px; line-height: 1.7; }

/* Receipts are calm enough to read after a busy turn. */
.review-panel .review-totals { gap: 8px; }
.review-panel .review-totals > div { padding: 12px 6px; border-color: #536c68; background: #13272d; }
.review-panel .review-totals span { color: #c7d6c8; font-size: 12px; }
.review-panel .review-totals strong { color: #f0d59c; font-size: 29px; }
.review-panel .review-totals > div:nth-child(2) strong { color: var(--battle-heal); }
.review-panel .review-totals > div:nth-child(3) strong { color: var(--battle-guard); }
.review-panel .review-totals > div:nth-child(4) strong { color: var(--battle-danger); }
.review-panel .review-message { padding: 13px; background: #29372f; border-color: #87906b; color: #e9e4c5; font-size: 14px; line-height: 1.7; }
.review-panel .event-row { gap: 12px; padding: 13px; background: #13262d; border-color: #3e585c; }
.review-panel .event-row strong { font-size: 14px; color: #eee6d2; }
.review-panel .event-row strong small { font-size: 12px; color: #d5d9c6; }
.review-panel .event-row p { color: #c8d9ce; font-size: 13px; line-height: 1.65; }
.review-panel .event-row.pending { opacity: .78; }
.review-panel .event-row.active { background: #2f3c31; border-color: #c7ac73; }
.review-panel .event-marker { width: 28px; height: 28px; color: #ded6b2; background: #293a32; border-color: #879071; }
.review-panel .event-row.seen .event-marker { color: #d3e8c1; border-color: #8da27d; }
.review-panel .review-footnote { color: #c1cfc4; font-size: 12px; line-height: 1.7; }
.review-panel .flow-outcome-heading > span { color: #dac99f; font-size: 11px; }
.review-panel .flow-outcome-note { color: #c1d1c5; font-size: 12px; }
.turn-summary { padding: 14px 16px; border: 1px solid #5e7068; border-radius: 12px; background: #172d30; }
.turn-summary > strong { color: #e6d2a2; font-size: 13px; }
.turn-summary > p { color: #cedace; font-size: 13px; line-height: 1.7; margin-top: 6px; }

/* Pointer hover is supplementary; focus and touch never depend on it. */
@media (hover: hover) {
  .hand-panel .die-button:not(:disabled):hover { transform: translateY(-2px); border-color: #f3d59b; }
  .hand-panel .die-skill:not(:disabled):hover { border-color: #d5bc83; background: #304b3d; }
  #commands-panel .command-choice:not(:disabled):hover { border-color: #e5c88f; background: #354334; }
  .arena #battle-playback button:not(:disabled):hover { border-color: #d5bc8b; background: #314740; }
}
.arena :is(button, summary):focus-visible,
.hand-panel :is(button, summary):focus-visible,
#commands-panel :is(button, summary):focus-visible,
.review-panel :is(button, summary):focus-visible {
  outline: 3px solid #ffe1a5;
  outline-offset: 4px;
}

@container (max-width: 440px) {
  .arena .fighter-info { padding: 8px; }
  .arena .fighter-meta { min-height: 47px; font-size: 12px; }
  .arena .fighter-meta > span:last-child { font-size: 13px; }
  .arena #action-callout { min-height: 100px; padding: 13px; margin-inline: 10px; }
  .arena #action-callout .action { font-size: 21px; }
  .arena .enemy-plan { padding: 11px; }
  .arena .ei-target { max-width: 42%; font-size: 11px; }
  .arena .ei-metric { grid-template-columns: 1fr; gap: 3px; padding: 9px; }
  .arena .ei-metric > strong { font-size: 25px; }
  .arena .ei-counter { flex-wrap: wrap; gap: 6px; }
  .arena .ei-counter > div { flex-basis: calc(100% - 30px); }
  .arena .ei-condition-state { max-width: none; text-align: left; margin-left: 26px; }
  .arena .ei-title h3 { font-size: 19px; }
  .arena .battle-build button { padding: 9px; }
}
@container command-cards (max-width: 430px) {
  #commands-panel .command-choice,
  #commands-panel .command-choice.chosen { padding: 11px 10px; }
  #commands-panel .has-technique .command-choice[data-command="basic"] { min-height: 100px; padding: 11px 12px; }
  #commands-panel .has-technique .command-choice[data-command="basic"] .command-outlook { max-width: 110px; }
}
@media (max-width: 560px) {
  .hand-panel,
  .commands-panel,
  .review-panel { padding: 18px 13px; border-radius: 15px; }
  .hand-panel .hand-heading,
  .commands-panel .hand-heading { gap: 10px; padding-bottom: 12px; }
  .hand-panel .hand-heading h2,
  .commands-panel .hand-heading h2,
  .review-panel > h2 { font-size: 23px; }
  .hand-panel .dice-tray { gap: 9px; }
  .hand-panel .die-owner[data-character-guide] { font-size: 12px; }
  .hand-panel .die-button { min-height: 67px; border-radius: 12px; }
  .hand-panel .die-skill { min-height: 61px; }
  .hand-panel .die-skill strong { font-size: 11px; }
  .hand-panel .die-skill small { font-size: 11px; }
  .hand-panel .selection-strip { gap: 8px; padding: 10px; }
  .hand-panel .selection-strip > span { font-size: 12px; }
  .hand-panel .move-opportunities > div { gap: 8px; }
  .hand-panel .move-member { padding: 8px; }
  .hand-panel .move-member .move-chance { grid-template-columns: 1fr; gap: 5px; padding: 7px 5px; }
  .hand-panel .move-chance em { grid-column: 1; text-align: left; }
  .hand-panel .need-chips { flex-wrap: wrap; }
  .hand-panel .buff-grid span,
  .commands-panel .combat-forecast span { font-size: 11px; }
  .hand-panel .buff-grid strong,
  .commands-panel .combat-forecast strong { font-size: 21px; }
  .phase-track .phase-step { gap: 5px; padding: 7px 4px; font-size: 11px; }
  .phase-track .phase-step > b { width: 21px; height: 21px; }
  .review-panel .review-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #commands-panel .command-row { padding: 10px; }
  #commands-panel .command-legend { font-size: 15px; }
  .commands-panel .decision-metrics > div > strong { font-size: 29px; }
}
@media (max-width: 380px) {
  .hand-panel .dice-tray { gap: 8px; }
  .hand-panel .die-faces { gap: 1px; padding-inline: 2px; }
  .hand-panel .die-faces svg { width: 9px; height: 11px; }
  .hand-panel .selection-strip { flex-wrap: wrap; }
  .hand-panel .selection-strip > div { margin-left: auto; }
  .hand-panel .fate-meter { padding: 7px; }
  .hand-panel .fate-meter > strong { font-size: 18px; }
  .hand-panel .buff-grid,
  .commands-panel .combat-forecast { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The handoff calls for two-by-two dice on phones: give the actual
   choice, character name and shaping cost room instead of shrinking them. */
@media (max-width: 640px) {
  #dice-tray { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hand-panel .die-wrap { padding: 10px; border: 1px solid #4b6063; border-radius: 13px; background: #13272f; }
  .hand-panel .die-owner[data-character-guide] { min-height: 48px; flex-direction: row; justify-content: center; gap: 6px; margin-bottom: 12px; padding-bottom: 6px; font-size: 13px; }
  .hand-panel .die-portrait { width: 30px; height: 36px; flex: none; }
  .hand-panel .die-portrait > svg { width: 30px; height: 39px; }
  #dice-tray .die-button { width: min(100%, 94px); min-height: 84px; max-height: 94px; aspect-ratio: 1; margin-inline: auto; }
  #dice-tray .die-name { font-size: 1rem; text-align: center; }
  .hand-panel .die-skill { min-height: 52px; }
  .hand-panel .die-skill strong { font-size: 12px; }
  .hand-panel .die-faces svg { width: 12px; height: 12px; }
  /* Retain the newer handoff's single-column command choices on phones. */
  #commands-panel .command-options,
  #commands-panel .command-options.has-technique { grid-template-columns: 1fr; }
  #commands-panel .command-choice { min-height: 116px; gap: 6px; }
  #commands-panel .command-choice > strong { font-size: 1rem; }
  #commands-panel .command-choice :is(.command-values, .command-outlook) { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hand-panel .die-button,
  .commands-panel .command-choice,
  .review-panel .event-row { transition: none; }
  .hand-panel .die-button:not(:disabled):hover { transform: none; }
}
html[data-motion="reduced"] .hand-panel .die-button,
html[data-motion="reduced"] .commands-panel .command-choice,
html[data-motion="reduced"] .review-panel .event-row { transition: none; }
html[data-motion="reduced"] .hand-panel .die-button:not(:disabled):hover { transform: none; }