/* The Dawn We Choose — final presentation layer.
   Presentation only: the existing arena, owned dice, controls and event receipts
   remain the sole interactive surfaces. Load after the feature stylesheets. */

:root {
  --finish-ink: #10252a;
  --finish-paper: #f1ebd9;
  --finish-leaf: #d4e6ad;
  --finish-line: #b9c5a73b;
  --finish-light: #dbd6a1;
}

body[data-act="1"] { --finish-light: #9cd9dc; }
body[data-act="2"] { --finish-light: #d6b8de; }

/* A quieter frame gives the world and the current decision room to breathe. */
.topbar { border-bottom-color: #b2c1ac24; }
.brand-mark {
  background: linear-gradient(145deg, #3b4d3b, #1d3331);
  border-color: #b6c78e91;
  box-shadow: inset 0 1px 0 #f8f4c633, 0 5px 14px #030e1529;
}
.page-intro.opening-vista {
  border-color: #d9d2aa57;
  box-shadow: inset 0 0 0 5px #0d27252b, 0 14px 36px #020d1529;
}
.opening-vista .arrival-copy { text-wrap: pretty; }
.opening-vista .arrival-checkpoint {
  color: #e1e7ca;
  border-color: #d5d5aa50;
  background: #132b2bd4;
}
.route-disclosure { border-color: #a6b89b36; background: #13282b80; }
.route-disclosure>summary { color: #cbd8c1; }

/* One scene: health sits above the formation, consequences sit below it.
   The world keeps its original region illustration and recognisable landmarks. */
.play-column>.arena {
  border-color: #c1c5a757;
  border-radius: 22px;
  box-shadow: inset 0 1px 0 #f0e8bc24, 0 18px 50px #020e173d;
}
.arena .arena-top {
  padding: 17px 20px 13px;
  gap: 9px 12px;
  border-bottom: 1px solid #cadac118;
  margin-bottom: 12px;
}
.arena .location-tag { color: #f0edcf; font-size: 13px; line-height: 1.5; }
.arena .location-dot {
  width: 6px;
  height: 6px;
  background: var(--finish-light);
  box-shadow: 0 0 9px #deebbe40;
}
.arena .turn-tag {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  color: #e4e9cf;
  border-color: #b3c6aa4d;
  background: #0c222acf;
  border-radius: 7px;
  font-variant-numeric: tabular-nums;
}
.arena .next-intent {
  border: 0;
  background: transparent;
  color: #bdcfc6;
  padding: 0;
  font-size: 12px;
  text-align: left;
}
.arena .world-scenery { opacity: 1; }
.arena .world-scenery::after {
  background: linear-gradient(180deg, #091c29b8 0, #132b3220 22%, #132e3430 42%, #0c202bdd 74%, #0b202bfa 100%);
}
.arena .combatants {
  position: relative;
  isolation: isolate;
  padding: 0 18px 10px;
  gap: 17px;
}
.arena .combatants::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 28% 4px -3px;
  border-radius: 50% 50% 10px 10px;
  background: radial-gradient(ellipse at 25% 86%, #d3dba225, transparent 47%), radial-gradient(ellipse at 80% 70%, #dfb8971d, transparent 43%), linear-gradient(0deg, #0c252dc4, transparent 65%);
  pointer-events: none;
}
.arena .fighter-info {
  padding: 9px 11px 11px;
  border: 1px solid #bad0bb3b;
  border-radius: 11px;
  background: linear-gradient(120deg, #112a31f0, #10262bd9);
  box-shadow: 0 5px 16px #02121b26;
}
.arena .fighter-meta {
  min-height: 38px;
  color: #d6e0d2;
  font-size: 12px;
  text-shadow: none;
}
.arena .fighter-meta>span:last-child {
  color: #f4f0d6;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.arena .enemy .fighter-info { border-color: #d3b18e4d; }
.arena .health-track {
  height: 10px;
  margin-top: 6px;
  border-color: #040f174d;
  background: #06151bd9;
  box-shadow: inset 0 1px 3px #0006;
}
.arena .player-fill { background: linear-gradient(90deg, #719c75, #cce4a0); }
.arena .enemy-fill { background: linear-gradient(90deg, #a96858, #e5b183); }
.arena .health-fill { box-shadow: inset 0 1px 0 #fff4; }

/* The owners remain equally present when their die is excluded. Only the
   selected die gets a footlight; this never suggests that its owner lost an action. */
:is(.stage-member, .die-wrap, .command-row) { --owner-accent: var(--member-accent, #d4e6ad); }
:is(.stage-member, .die-wrap, .command-row)[data-character="hero"] { --owner-accent: #d8ecac; }
:is(.stage-member, .die-wrap, .command-row)[data-character="bram"] { --owner-accent: #8ccddc; }
:is(.stage-member, .die-wrap, .command-row)[data-character="lyra"] { --owner-accent: #c5a1ed; }
:is(.stage-member, .die-wrap, .command-row)[data-character="mira"] { --owner-accent: #f5da91; }
:is(.stage-member, .die-wrap, .command-row)[data-character="riven"] { --owner-accent: #f0a08b; }
:is(.stage-member, .die-wrap, .command-row)[data-character="orrin"] { --owner-accent: #8cbde9; }
:is(.stage-member, .die-wrap, .command-row)[data-character="sera"] { --owner-accent: #f4c78e; }

.arena #party-stage { gap: 8px 7px; padding-bottom: 0; }
body[data-campaign="true"] .arena .stage-member {
  padding: 0 3px 7px;
  border-color: transparent;
  border-radius: 12px;
  background: linear-gradient(180deg, transparent 42%, #0b232a42);
}
.arena .member-figure {
  height: 126px;
  isolation: isolate;
  overflow: visible;
}
.arena .member-figure::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 84%;
  height: 17px;
  left: 8%;
  bottom: 1px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--owner-accent) 32%, transparent);
  background: radial-gradient(ellipse, color-mix(in srgb, var(--owner-accent) 20%, #0e2528), #06161b6b 72%);
  box-shadow: 0 4px 8px #03151c73;
  pointer-events: none;
}
.arena .member-figure .character-avatar {
  width: calc(100% + 16px);
  height: auto;
  max-width: 138px;
  max-height: none;
  filter: drop-shadow(0 7px 4px #03121c70);
}
.arena .stage-guide-button {
  min-height: 44px;
  padding: 6px 3px 4px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #0a2229a6;
}
.arena .stage-name { color: #f0f0d9; font-size: 13px; line-height: 1.4; }
.arena .stage-level { font-size: 10px; color: #b4c9bd; }
.arena .stage-action {
  padding: 4px 1px 0;
  min-height: 22px;
  color: #c1d1c4;
  font-size: 11px;
  line-height: 1.5;
  text-wrap: pretty;
}
body[data-campaign="true"] .arena .stage-member.is-selected {
  border-color: color-mix(in srgb, var(--owner-accent) 55%, transparent);
  background: linear-gradient(180deg, transparent 27%, color-mix(in srgb, var(--owner-accent) 16%, #0b2427) 100%);
}
.arena .stage-member.is-selected .member-figure::before {
  border-color: var(--owner-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--owner-accent) 30%, transparent);
}
body[data-campaign="true"] .arena .stage-member.is-acting {
  border-color: var(--owner-accent);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--owner-accent) 24%, #0c2429));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--owner-accent) 12%, transparent), 0 8px 22px #03121a4d;
}
.arena .stage-member.is-acting .stage-guide-button {
  color: #11272a;
  background: var(--owner-accent);
}
.arena .stage-member.is-acting .stage-name,
.arena .stage-member.is-acting .stage-level { color: #142d2c; }
.arena .stage-member.is-acting .stage-action { color: #fff1cc; }
.arena .stage-member.is-hit { border-color: #edac9599; }
.arena .stage-member.is-healing { border-color: #b5e4b987; }
.arena .stage-member.is-guarding { border-color: #b6d9e38c; }
.arena #enemy-art { margin-top: 12px; }
body[data-campaign="true"] .arena #enemy-art::before {
  width: 108%;
  left: -4%;
  top: 13%;
  height: 65%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--finish-light) 19%, transparent), #aad0d008 47%, transparent 72%);
}
.arena #enemy-art img { filter: drop-shadow(0 10px 7px #01111b70); }
.arena .intent-badge {
  margin-top: 0;
  padding: 9px;
  border-color: #d3aa7e73;
  border-radius: 9px;
  background: linear-gradient(135deg, #3b332bf0, #233139ed);
  color: #f2d3b1;
  font-size: 12px;
  line-height: 1.55;
}

/* The receipt has one clear speaker and one clear consequence; its place in
   the layout does not move when playback is paused or motion is reduced. */
.arena #action-callout {
  min-height: 100px;
  margin: 11px 16px 0;
  padding: 14px 16px;
  gap: 5px 9px;
  grid-template-columns: minmax(0, 1fr);
  border-color: #c4c5a24f;
  border-left-width: 3px;
  border-radius: 12px;
  background: linear-gradient(110deg, #203b3cf5, #112b34f7);
  box-shadow: 0 8px 20px #02121b2b;
}
.arena #action-callout .actor {
  font-size: 11px;
  line-height: 1.5;
  color: #d1dfa9;
  font-weight: 700;
  letter-spacing: .025em;
}
.arena #action-callout .action {
  font-family: Georgia, "PingFang TC", "Microsoft JhengHei", serif;
  font-weight: 500;
  font-size: 23px;
  line-height: 1.3;
  color: #faf0d4;
  text-wrap: pretty;
}
.arena #action-callout .detail { font-size: 13px; line-height: 1.65; color: #d0ddd3; }
.arena .cinema-event-caption { font-size: 11px; line-height: 1.65; }
.arena .cinema-event-caption>b { font-size: 9px; }
.arena .battle-number.ward-damage {
  padding: 5px 8px;
  border: 1px solid #a6dae47d;
  border-radius: 6px;
  background: #153946e8;
  color: #d2f0ee;
  font-size: clamp(15px, 3.5cqw, 20px);
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: .025em;
  text-shadow: 0 1px 3px #06171d;
}
.arena #turn-order { gap: 5px; margin: 10px 16px 0; }
.arena #turn-order .turn-chip {
  flex: 1 1 70px;
  gap: 5px;
  justify-content: center;
  border-color: #a9c2ad30;
  background: #0c232ba6;
  min-height: 30px;
  padding: 5px 6px;
  font-size: 11px;
  color: #c4d5c9;
}
.arena #turn-order .turn-chip>b { flex: none; }
.arena #turn-order .turn-chip.active { background: #dbe6b4; color: #17312b; border-color: #dbe6b4; box-shadow: none; }
.arena #turn-order .turn-chip.active>b { background: #17312b1a; }
.arena #turn-order .turn-chip.complete { color: #a5beb4; opacity: .8; }
.arena .enemy-plan {
  margin: 11px 16px 0;
  padding: 12px;
  border-color: #a9c1ae2b;
  border-radius: 11px;
  background: #0c242dc2;
}
.arena .enemy-plan-label { gap: 9px; }
.arena .enemy-plan-label strong { font-size: 11px; letter-spacing: .035em; color: #cdd9c9; }
.arena .enemy-plan-label>span { font-size: 11px; color: #a9c0b5; }
.arena .enemy-beat { padding: 8px; border-color: #a6bca72b; background: transparent; }
.arena .enemy-beat>span { font-size: 11px; }
.arena .enemy-beat>strong { font-size: 18px; }
.arena .enemy-beat>em { font-size: 11px; line-height: 1.55; }
.arena .enemy-beat small { font-size: 10px; }
.arena .enemy-beat.current { border-color: #bed08f7a; background: #7f9c5626; }
.arena .enemy-beat.heavy { border-color: #d1a47975; background: #ac6a3a19; }

/* Encounter intelligence occupies the established enemy-plan position. Real
   conditions use both text and a check mark; an unmet preview stays distinct. */
.encounter-intel { min-width: 0; }
.ei-special { margin: 0 0 12px; padding: 12px 13px; border: 1px solid #d7b58865; border-radius: 10px; background: #3c332a66; color: #efe2bf; overflow-wrap: anywhere; }
.ei-special[data-enemy-mechanic="poison"] { border-color: #cdb2e56b; background: #362d4966; color: #e6d8f4; }
.ei-special>strong { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .04em; line-height: 1.6; }
.ei-special>strong svg { width: 15px; height: 15px; flex: none; }
.ei-special h4 { font-family: Georgia, "PingFang TC", serif; font-size: 17px; font-weight: 500; line-height: 1.4; margin: 4px 0 7px; color: inherit; }
.ei-special p { font-size: 13px; line-height: 1.65; color: inherit; margin: 7px 0 0; }
.bd-content .ei-special, .cp-encounter .ei-special { background: #efe5cf; border-color: #ad93666b; color: #5b482d; }
.bd-content .ei-special[data-enemy-mechanic="poison"], .cp-encounter .ei-special[data-enemy-mechanic="poison"] { background: #ebe1ee; border-color: #91759e70; color: #594366; }
.bd-content .ei-special p, .cp-encounter .ei-special p { color: inherit; }
.flow-poison-receipt { padding: 10px 12px; border: 1px solid #b49acc66; border-radius: 9px; background: #34293f; color: #e6d5f3; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.flow-poison-receipt>strong, .flow-poison-receipt>span { display: block; }
.flow-poison-receipt>span { margin-top: 3px; }
.forecast-reason>.forecast-poison { color: #e0ccec; padding-top: 8px; border-top: 1px solid #b49acc45; }
.bd-poison-forecast, .cp-forecast>.cp-poison-forecast { color: #614673; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.cp-poison-result { color: #614673; border-color: #91759e70; background: #dfd1e74d; }
.cp-poison-result small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.6; }
.party-poison { margin: 8px 0 0; padding: 7px 8px; border: 1px solid #cfb4e770; border-radius: 7px; background: #34293f; color: #efdcff; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.party-poison[hidden] { display: none; }
.intent-badge[data-mechanic="charging"] { color: #f7deb2; border-color: #d4b27790; background: #463622; }
.battle-number.poison { color: #e1c3fc; font-size: 19px; }
.battle-number.charge { color: #f3d7a0; font-size: 17px; }
.ei-scout .ei-progression { color: #e7d4a6; font-size: 12px; font-variant-numeric: tabular-nums; }
@media(max-width:480px) { .ei-special { padding: 10px; } .ei-special p { font-size: 12px; line-height: 1.7; } .party-poison { font-size: 12px; } }
.ei-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ei-emblem { display: grid; place-items: center; flex: none; width: 34px; height: 38px; border: 1px solid #c4b78d66; border-radius: 10px; background: #bfa26612; color: #e0c896; }
.ei-emblem svg { width: 22px; height: 22px; }
.ei-title { flex: 1; min-width: 0; }
.ei-title>span, .ei-title>small { display: block; color: #c0d0bc; font-size: 10px; letter-spacing: .045em; line-height: 1.55; }
.ei-title h3 { color: #f0e6ca; font-family: Georgia, "PingFang TC", serif; font-weight: 500; font-size: 20px; line-height: 1.3; margin: 3px 0 0; text-wrap: pretty; }
.ei-target { flex: none; max-width: 40%; padding: 6px 8px; border: 1px solid #abc0a638; border-radius: 7px; background: #133035; color: #c2d4c7; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; text-align: right; }
.ei-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-bottom: 11px; border-bottom: 1px solid #a9bda72e; }
.ei-metric { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 7px; padding: 8px 11px; border-radius: 8px; background: #16313a; }
.ei-metric>span { display: flex; align-items: center; gap: 5px; min-width: 0; color: #c4d4c6; font-size: 11px; line-height: 1.5; }
.ei-metric>span svg { width: 14px; height: 14px; flex: none; }
.ei-metric>strong { display: block; color: #f4d5aa; font-size: 25px; line-height: 1.2; font-family: Georgia, serif; font-weight: 500; font-variant-numeric: tabular-nums; margin: 3px 0; }
.ei-metric>strong del { font-size: 13px; color: #aebeb4; margin-inline-end: 6px; font-family: inherit; }
.ei-metric>small { display: block; grid-column: 1 / -1; color: #b4c7bd; font-size: 11px; line-height: 1.5; }
.ei-counters { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 7px; }
.ei-counter { min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 9px; border: 1px solid #a2b49633; border-radius: 9px; background: #0d262980; }
.ei-check { display: grid; place-items: center; width: 20px; height: 22px; flex: none; margin-top: 1px; border: 1px dashed #a8b99279; border-radius: 5px; color: #c3ceab; font-size: 13px; }
.ei-check svg { width: 13px; height: 13px; }
.ei-counter>div { flex: 1; min-width: 0; }
.ei-counter strong { display: block; color: #d6e0cb; font-size: 12px; line-height: 1.5; font-weight: 650; }
.ei-counter small { display: block; color: #b4c5b7; font-size: 11px; line-height: 1.55; margin-top: 3px; }
.ei-condition-state { flex: none; max-width: 30%; align-self: center; color: #becaa8; font-size: 10px; line-height: 1.55; text-align: right; overflow-wrap: anywhere; }
.ei-counter[data-met="true"] { border-color: #b7d09288; background: #344c332e; }
.ei-counter[data-met="true"] .ei-check { color: #213c2c; background: #d6e4b4; border-color: #d6e4b4; border-style: solid; }
.ei-counter[data-met="true"] strong { color: #e2edbc; }
.ei-counter[data-met="true"] .ei-condition-state { color: #dfebbd; }
.ei-next { margin-top: 10px; padding-top: 2px; border-top: 1px solid #a8b99536; }
.ei-next>summary { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; min-height: 44px; cursor: pointer; color: #d0dcbf; font-size: 12px; line-height: 1.55; padding: 9px 2px; list-style: none; }
.ei-next>summary::-webkit-details-marker { display: none; }
.ei-next>summary>span { flex: 1; min-width: 0; }
.ei-next>summary>b { flex: none; font-size: 11px; font-weight: 650; color: #e2cea7; }
.ei-next>summary::after { content: "+"; font-size: 18px; line-height: 1; width: 19px; text-align: center; flex: none; color: #d6dfb8; }
.ei-next[open]>summary::after { content: "−"; }
.ei-next :is(p, small) { color: #b4c9bd; font-size: 12px; line-height: 1.65; }
.ei-next p { margin: 0 0 9px; }
.ei-note { color: #b4c8ba; font-size: 11px; line-height: 1.65; margin-top: 10px; }
.enemy-ward { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 7px; margin-top: 7px; padding: 7px 8px; border: 1px solid #9dc3cb50; border-radius: 8px; background: #183b448c; color: #c7e1df; }
.enemy-ward>span { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; line-height: 1.45; }
.enemy-ward svg { width: 14px; height: 14px; flex: none; }
.enemy-ward>strong { color: #e0ecca; font-size: 15px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.enemy-ward>small { grid-column: 1 / -1; color: #b9cfca; font-size: 10px; line-height: 1.5; }
.ei-scout { margin: 13px 0; border-top: 1px solid #b7c2993b; padding-top: 14px; }
.ei-scout>span { font-size: 11px; letter-spacing: .045em; color: #d9cea6; }
.ei-scout h4 { font-family: Georgia, "PingFang TC", serif; font-size: 21px; line-height: 1.35; font-weight: 500; color: #eee5c6; margin: 5px 0 8px; }
.ei-scout p, .ei-scout li { color: #c5d5c6; font-size: 13px; line-height: 1.75; }
.ei-scout>strong { display: block; margin-top: 12px; font-size: 12px; line-height: 1.6; color: #d7dfb9; }
.ei-scout ul { padding-left: 20px; margin: 10px 0 0; }
.ei-scout li+li { margin-top: 7px; }
.arena .battle-build {
  justify-content: flex-start;
  gap: 6px;
  margin: 11px 16px 0;
  padding: 11px 0 0;
  border-top: 1px solid #a6bda729;
}
.arena .battle-build button {
  min-height: 44px;
  padding: 7px 9px;
  color: #d8dec0;
  border-color: #a8b8913b;
  background: #193038b3;
  font-size: 11px;
  line-height: 1.5;
}
.arena .battle-build>span { flex-basis: 100%; color: #b0c6bc; font-size: 11px; line-height: 1.6; }
.arena>.battle-utility {
  position: relative;
  z-index: 3;
  gap: 6px 10px;
  padding: 9px 16px 0;
  color: #c4d4c8;
  font-size: 12px;
  line-height: 1.55;
}
.arena>.battle-utility .text-button { color: #dfd4ad; font-size: 12px; }

/* Ivory faces are legible before, during and after the physical throw.
   Selected faces retain the actual check mark as well as their raised rim. */
.hand-panel, .commands-panel, .camp-panel, .review-panel {
  border-color: #b3c29f47;
  background: linear-gradient(135deg, #263d37, #182f30 76%);
  box-shadow: inset 0 1px 0 #e9edcd12, 0 10px 28px #051b201f;
}
.hand-heading h2, .camp-heading h2, .review-panel h2 {
  color: #f2ecd7;
  font-family: Georgia, "PingFang TC", "Microsoft JhengHei", serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.3;
}
.phase-track { padding: 4px; border: 1px solid #b9c7a535; border-radius: 12px; background: #10292a; }
.phase-track .phase-step { border: 0; border-radius: 8px; min-height: 42px; color: #b8c8b7; }
.phase-track .phase-step.active { color: #ecf1d5; background: #374d3f; }
.phase-track .phase-step.active>b { color: #1b322c; background: #dce8b4; }
.fate-meter { border-color: #dec8876b; background: #3c3c2b; box-shadow: inset 0 1px 0 #efdc9b17; }
.fate-meter>strong { color: #ffe6aa; font-variant-numeric: tabular-nums; }
.fate-copy { color: #e1d5a5; }
.dice-tray { padding-top: 8px; gap: 11px; }
.die-owner[data-character-guide] {
  min-height: 65px;
  padding-bottom: 5px;
  border-bottom: 2px solid color-mix(in srgb, var(--owner-accent) 49%, transparent);
  border-radius: 0;
  color: #ecebd2;
  font-size: 13px;
  line-height: 1.45;
  text-wrap: pretty;
}
.die-owner[data-character-guide]::after { display: none; }
.die-portrait { width: 42px; height: 43px; overflow: visible; }
.die-portrait>svg { width: 42px; height: 49px; }
.die-button {
  --die-ink: #315440;
  --die-tint: #e2e8ce;
  --icon-cut: #ece9d4;
  min-height: 70px;
  color: var(--die-ink);
  border-color: #b4b78c;
  border-width: 1px 1px 4px;
  border-radius: 14px;
  background: radial-gradient(ellipse at 27% 15%, #fffdf0, transparent 72%), linear-gradient(145deg, #f2efdb, var(--die-tint));
  box-shadow: inset 0 1px 0 #fffef5, inset 0 -2px 0 #acae7d26, 0 6px 0 #071c2445, 0 10px 17px #05151b3b;
}
.die-button.sword { --die-ink: #345c40; --die-tint: #dfe7c8; }
.die-button.shield { --die-ink: #2e5b68; --die-tint: #d6e2db; }
.die-button.arrow { --die-ink: #685281; --die-tint: #e5dceb; }
.die-button.star { --die-ink: #846326; --die-tint: #eaddb6; }
.die-button.miss { --die-ink: #6b7168; --die-tint: #dbdfd1; }
.die-button:is(.sword, .shield, .arrow, .star, .miss) {
  color: var(--die-ink);
  background: radial-gradient(ellipse at 27% 15%, #fffdf0, transparent 72%), linear-gradient(145deg, #f2efdb, var(--die-tint));
  border-color: #b4b78c;
}
.die-button::after { inset: 5px; border-color: #6476523b; border-radius: 9px; }
.die-button>svg { filter: drop-shadow(0 1px 0 #fff8); }
.die-button.selected {
  --icon-cut: #d7e6af;
  color: #24452c;
  background: linear-gradient(145deg, #eff6d3, #c5dda1);
  border-color: #d5e7a8;
  box-shadow: inset 0 0 0 2px #526e335e, 0 0 0 2px #d8e9ae2b, 0 7px 0 #08202273, 0 12px 20px #021a214d;
}
.die-button.selected .selected-check { color: #254130; background: #f7f4da; border-color: #1f3936; }
.die-button.unrevealed { color: #e4e8c7; background: linear-gradient(145deg, #45664f, #253e37); border-color: #95b381; }
.die-key { color: currentColor; opacity: .75; }
.die-name { color: #d7e0cf; font-size: 12px; line-height: 1.5; margin-top: 9px; }
.die-skill { border-color: #91ad7c70; background: #2d483c; color: #e5edcf; }
.die-skill:not(:disabled):hover { border-color: var(--owner-accent); background: #365846; }
.die-skill:disabled { opacity: .62; background: #203a34; }
.die-inspect { width: 100%; padding: 7px 2px; font-size: 12px; color: #d4dcbf; }
.die-faces { border-color: #aec29729; color: #bacaaf; }
.selection-strip { border-color: #b2c6914f; background: #132d28; padding: 9px 11px; }
.selection-chip { border-color: #cfdda46b; background: #2c4534; color: #e4edbf; }
.selection-empty { border-color: #9daf785e; background: #172d27; }
.selection-hint { color: #c2d1bc; }
.move-chance { background: #132b28; border-color: #a8bc9130; }
.move-chance.ready { border-color: #c9dd8f9c; background: #3a5134; box-shadow: inset 3px 0 #dbe8ac; }
.buff-grid>div { border-color: #a8bf9640; background: #18312b; }
.buff-grid strong { color: #e2ebbd; font-variant-numeric: tabular-nums; }
.dice-theatre { border-color: #c7c0925c; background: radial-gradient(ellipse at 50% 52%, #51775038, transparent 65%), linear-gradient(145deg, #1c3931, #132b2a); }
.dice-theatre .dth-owner strong { color: #e6ead1; font-size: 12px; }
.dice-theatre .dth-facet {
  --dt-ink: #345a41;
  --dt-paper: #dee7c9;
  --icon-cut: #ece9d4;
  color: var(--dt-ink);
  border-color: #a7b386;
  background: linear-gradient(135deg, #fffbed, var(--dt-paper));
  box-shadow: inset 0 2px 1px #ffffff9c, inset 0 -3px 2px #94a27370;
}
.dice-theatre .dth-facet::after { border-color: #63744e40; }
.dice-theatre .dth-facet>svg, .dice-theatre .dth-facet>span>svg { filter: drop-shadow(0 1px 0 #fff8); }
.dice-theatre .dth-facet.dth-symbol-shield { --dt-ink: #305b66; --dt-paper: #d6e3dd; }
.dice-theatre .dth-facet.dth-symbol-arrow { --dt-ink: #6a5282; --dt-paper: #e3d9e9; }
.dice-theatre .dth-facet.dth-symbol-star { --dt-ink: #846326; --dt-paper: #e8ddb6; }
.dice-theatre .dth-facet.dth-symbol-miss { --dt-ink: #677168; --dt-paper: #dce0d3; }

/* Choosing a command keeps each companion's identity at its point of use. */
.command-row {
  border-color: color-mix(in srgb, var(--owner-accent) 31%, transparent);
  border-radius: 12px;
  background: #102b2b61;
  padding: 9px 10px 10px;
}
.command-legend { color: #f0e9d1; }
.command-portrait { border-bottom: 2px solid var(--owner-accent); }
.command-choice { border-color: #96ae8552; border-radius: 9px; background: #17332e; }
.command-choice.chosen { border-color: #c4d697; background: linear-gradient(120deg, #3e543b, #2b4639); box-shadow: inset 0 0 0 1px #c8dba236; }
.command-choice.chosen::after { color: #e6efbe; }
.command-choice:disabled { opacity: .62; }
.character-info-link { min-height: 44px; min-width: 44px; padding: 6px 8px; font-size: 11px; border-color: #a5bc8d45; background: #17332d; }
.command-inspect { color: #dfdbb7; }
.command-bridge { border-color: #b7ca8e60; background: linear-gradient(125deg, #3b4c31b3, #1c352a); }
.forecast-viz { border-color: #a6c2855c; background: #163b2d; }
.forecast-viz.danger { border-color: #d6a07894; background: #573a2a80; }

/* Camp remains a destination with people in it, followed by one departure. */
body[data-phase="camp"] .arena { border-color: #c9c19a66; background: #1b3436; }
body[data-phase="camp"] .arena .arena-top { margin-bottom: 0; border-bottom-color: #dcc7961c; }
body[data-phase="camp"] .arena .world-scenery::after { background: linear-gradient(180deg, #14323c5c, #223e3830 42%, #122d32bf 78%, #102930ed); }
.camp-vista-copy { padding-top: 17px; }
.camp-vista-copy h2 { color: #f8e8c3; font-size: clamp(26px, 2.5vw, 34px); text-wrap: balance; }
.camp-vista-copy p { color: #e0e3cf; }
.camp-illustrated-ground::before {
  content: "";
  position: absolute;
  inset: 11% 4% -4%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 65%, #f8d79e20, transparent 60%);
  pointer-events: none;
}
.camp-traveler { padding-bottom: 7px; }
.camp-traveler b { color: #f1ebcf; }
.camp-traveler small { color: #dacda8; }
.camp-traveler:hover { background: linear-gradient(transparent, #c0c7871f); border-color: #dfd29c54; }
.camp-supplies { border-top: 1px solid #c0c99d30; background: #132d3273; }
.camp-vista-foot { background: #132d3273; color: #c5d4c6; }
.camp-next-encounter { border-color: #c0c5a25c; border-radius: 13px; background: linear-gradient(110deg, #314a41, #233a3b); }
.camp-next-encounter h3 { font-family: Georgia, "PingFang TC", serif; color: #f1e5c6; }
.camp-panel .camp-departure { margin-top: 17px; margin-bottom: 20px; }
.camp-panel .camp-departure .primary-button {
  color: #23382b;
  background: linear-gradient(125deg, #f3ecc9, #cddcaa);
  border-color: #d7daa6;
  box-shadow: inset 0 1px 0 #fff8, 0 3px 0 #859264;
}
.camp-character-card { border-color: #adc09a5c; background-color: #18332c; }
.hero-workshop, .collection-details { border-color: #b0c0903d; background: #142e2980; }
.hero-workshop>summary, .collection-details>summary { color: #d5dfc2; }

/* One persistent action bar, comfortable on glass and precise by keyboard. */
.action-dock {
  border-color: #c1cd9f52;
  background: #122b2cec;
  box-shadow: 0 -9px 35px #02141978;
}
.dock-context>span { color: #e0dcad; }
.dock-context>strong { color: #d3ded0; }
.action-dock .primary-button {
  color: #213729;
  background: linear-gradient(120deg, #f7efce, #cfe3ae);
  border-color: #e1e6bb;
  box-shadow: inset 0 1px 0 #fff9, 0 3px 0 #8b9e6a;
}
.action-dock .secondary-button { background: #254137; border-color: #a8bd8b70; }
.action-dock .primary-button:disabled { background: #33493b; border-color: #7e946555; color: #b2c3a3; box-shadow: none; }
.play-column :is(button, summary, select, input):focus-visible,
.action-dock button:focus-visible,
.topbar :is(button, summary):focus-visible,
.campaign-toolbar :is(button, summary):focus-visible {
  outline: 3px solid #f2e2a9;
  outline-offset: 3px;
}
.play-column :is(button, summary, select, input) { scroll-margin-bottom: 145px; }
#earned-progress button:focus-visible { outline-color: #296651; }
.top-actions :is(.quiet-button, .icon-button),
.top-actions .help-button { min-width: 44px; min-height: 44px; }
.camp-panel :is(summary, select, input),
.hand-panel .text-button, .commands-panel .text-button { min-height: 44px; }

/* The former 700px switch left normal laptops with an unnecessarily tall 2×2
   formation. 560px gives four visible figures enough room without tiny labels. */
@container (min-width: 560px) {
  .arena .combatants { grid-template-columns: minmax(0, 2.2fr) minmax(155px, 1fr); gap: 19px; }
  .arena #party-stage { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; min-height: 230px; }
  .arena #hero-art { display: flex; align-items: end; flex: 1; }
  .arena .member-figure { height: 156px; }
  .arena .stage-member:nth-child(2), .arena .stage-member:nth-child(4) { margin-bottom: 15px; }
  .arena #enemy-art { min-height: 203px; margin-top: 9px; }
  .arena #enemy-art img { height: 226px; max-width: 245px; }
  .arena .fighter-meta { min-height: 38px; }
  .arena #action-callout { min-height: 105px; }
}
@container (min-width: 720px) {
  .arena .combatants { grid-template-columns: minmax(0, 2.15fr) minmax(190px, 1fr); gap: 28px; padding-inline: 24px; }
  .arena #party-stage { min-height: 260px; gap: 7px; }
  .arena .member-figure { height: 178px; }
  .arena #enemy-art img { height: 258px; }
  .arena .stage-action { font-size: 12px; }
}
@container (max-width: 440px) {
  .arena .arena-top { padding: 13px 13px 11px; margin-bottom: 9px; }
  .arena .location-tag { font-size: 12px; }
  .arena .combatants { grid-template-columns: minmax(0, 1.6fr) minmax(92px, .95fr); gap: 9px; padding: 0 10px 6px; }
  .arena .fighter-info { padding: 8px 7px 9px; border-radius: 9px; }
  .arena .fighter-meta { min-height: 53px; gap: 3px; font-size: 12px; }
  .arena .fighter-meta>span:last-child { font-size: 13px; }
  .arena .health-track { height: 9px; }
  .arena #party-stage { gap: 8px 2px; }
  .arena .stage-member { padding: 0 1px 5px; border-radius: 9px; }
  .arena .member-figure { height: 104px; }
  .arena .member-figure .character-avatar { width: calc(100% + 6px); max-width: 96px; }
  .arena .stage-name { font-size: 12px; }
  .arena .stage-guide-button { padding: 5px 1px 3px; }
  .arena .stage-level { font-size: 10px; padding: 1px 3px; }
  .arena .stage-action { font-size: 11px; min-height: 21px; }
  .arena #enemy-art img { height: 215px; max-width: 175px; width: calc(100% + 8px); }
  .arena .intent-badge { font-size: 12px; padding: 7px 5px; }
  .arena .intent-badge svg { width: 13px; }
  .arena #action-callout { margin: 10px 10px 0; padding: 12px; min-height: 115px; }
  .arena #action-callout .action { font-size: 21px; }
  .arena #action-callout .detail { font-size: 12px; line-height: 1.65; }
  .arena #turn-order { margin-inline: 10px; }
  .arena #turn-order .turn-chip { flex: 1 1 70px; font-size: 11px; }
  .arena .enemy-plan { margin: 10px 10px 0; padding: 10px; }
  .arena .enemy-plan-label { flex-wrap: wrap; gap: 4px 8px; }
  .arena .enemy-beat { padding: 7px 5px; }
  .arena .enemy-beat>em { font-size: 11px; }
  .ei-heading { gap: 8px; flex-wrap: wrap; }
  .ei-emblem { width: 29px; height: 34px; }
  .ei-title h3 { font-size: 20px; }
  .ei-target { max-width: 100%; flex-basis: 100%; text-align: left; padding: 0; margin-left: 37px; border: 0; background: transparent; }
  .ei-metric { padding: 8px; }
  .ei-counter { flex-wrap: wrap; }
  .ei-counter>div { flex-basis: calc(100% - 36px); }
  .ei-condition-state { max-width: 100%; margin-left: 28px; text-align: left; }
  .arena .battle-build { margin-inline: 10px; }
  .arena .battle-build button { flex: 1 1 85px; justify-content: center; font-size: 11px; }
  .arena>.battle-utility { padding: 8px 11px 0; }
}
@media (max-width: 820px) {
  .hand-heading h2, .camp-heading h2, .review-panel h2 { font-size: 25px; }
  .die-owner[data-character-guide] { min-height: 52px; }
  .play-column>.arena { border-radius: 18px; }
}
@media (max-width: 560px) {
  .topbar { gap: 8px; align-items: center; }
  .top-actions { gap: 3px; }
  .top-actions .quiet-button { padding-inline: 7px; }
  .comfort-menu>summary { font-size: 12px; padding-inline: 9px; }
  .hand-panel, .commands-panel, .camp-panel, .review-panel { padding: 17px 13px; }
  .hand-heading h2, .camp-heading h2, .review-panel h2 { font-size: 24px; }
  .dice-tray { gap: 8px; }
  .die-owner[data-character-guide] { min-height: 72px; font-size: 12px; }
  .die-portrait { width: 37px; height: 39px; }
  .die-portrait>svg { width: 37px; height: 45px; }
  .die-button { min-height: 63px; border-radius: 11px; }
  .die-button::after { border-radius: 7px; }
  .die-name { font-size: 12px; }
  .die-inspect { font-size: 12px; line-height: 1.4; }
  .die-skill { min-height: 56px; }
  .die-skill strong, .die-skill small { font-size: 11px; line-height: 1.4; }
  .selection-strip { padding: 8px; }
  .selection-strip>span { font-size: 12px; }
  .selection-hint { font-size: 12px; line-height: 1.65; }
  .command-row { padding: 8px 7px; }
  .command-choice>strong { font-size: 13px; line-height: 1.45; }
  .command-choice>small { font-size: 12px; line-height: 1.55; }
  .character-info-link { font-size: 11px; padding: 6px; }
  .camp-vista-copy { padding-top: 14px; }
  .camp-vista-copy h2 { font-size: 27px; }
  .camp-vista-copy p { font-size: 14px; }
  .camp-traveler-art { height: 117px; }
  .camp-illustrated-ground { height: 242px; }
  .camp-caravan { inset: 67px 7px 0; }
  .dock-context>span { font-size: 11px; }
  .dock-context>strong { font-size: 12px; line-height: 1.45; }
  .action-dock .primary-button, .action-dock .secondary-button { font-size: 14px; min-height: 52px; }
}
@media (max-width: 365px) {
  .app-shell { padding-inline: 10px; }
  .hand-panel, .commands-panel, .camp-panel, .review-panel { padding-inline: 10px; }
  .dice-tray { gap: 6px; }
  .die-button { min-height: 58px; }
  .die-button>svg { width: 29px; height: 29px; }
  .die-owner[data-character-guide] { font-size: 12px; }
  .camp-traveler b { font-size: 11px; }
  .camp-caravan { column-gap: 1px; }
}

/* Focus, owner contrast and committed result text stay visible in quiet mode. */
html[data-motion="reduced"] .die-button:hover:not(:disabled),
html[data-motion="reduced"] .camp-traveler:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .die-button:hover:not(:disabled), .camp-traveler:hover { transform: none; }
  .arena .member-figure::before, .arena .stage-member { transition: none; }
}
@media (forced-colors: active) {
  .arena .fighter-info, .arena .stage-guide-button, .die-button, .command-choice, .action-dock { border-color: CanvasText; }
  .die-button.selected, .command-choice.chosen, .arena .stage-member.is-acting { outline: 2px solid Highlight; }
  .arena .member-figure::before { display: none; }
}