/* WORLD ORDER v006. Combat annotations share the existing navy, ivory and brass system. */
.has-combat-presentation .command-rail { gap: .65rem; }
.combat-sequence { position: relative; display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; min-height: 6.5rem; max-height: 28rem; padding: .75rem .8rem .65rem; border: 1px solid #b7a27666; border-radius: .2rem; background: linear-gradient(135deg, #1b3039f7, #0a1b25fc); box-shadow: 0 .4rem 1.3rem #0003; overflow: hidden; }
.combat-sequence > :not(.combat-sequence-details) { flex-shrink: 0; }
.combat-sequence > .combat-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #647c72 #0d202a; padding-right: 1px; }
.combat-scroll:focus-visible { outline: 1px solid #d7bd86; outline-offset: -1px; }
.combat-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.combat-heading .eyebrow { color: #cdb989; font-size: max(8px, .56rem); letter-spacing: .13em; }
#combat-phase-status { font-size: max(7px, .48rem); color: #91adb7; white-space: nowrap; letter-spacing: .035em; }
#combat-sequence-title { margin: .5rem 0 .28rem; font: 400 max(12px, .99rem) var(--wo-title); color: #f0dfba; line-height: 1.3; }
#combat-sequence-note { margin: 0; font-size: max(9px, .66rem); line-height: 1.5; color: #bccdcc; }
.combat-steps-context { font-size: max(7px, .44rem); letter-spacing: .09em; color: #92a8ad; margin-top: .55rem; }
.combat-steps-context[hidden] { display: none; }
.combat-sequence-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .32rem .2rem; list-style: none; padding: .3rem 0 0; margin: 0; }
.combat-sequence-steps[hidden] { display: none; }
.combat-sequence-steps li { display: flex; gap: .22rem; align-items: center; min-width: 0; padding: .22rem .15rem; color: #8aa3ab; border: 1px solid #859c9e27; font-size: max(8px, .57rem); line-height: 1.3; }
.combat-sequence-steps li > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combat-step-marker { flex: 0 0 .55rem; text-align: center; color: #90a7ad; font-size: max(8px, .52rem); }
.combat-sequence-steps li[data-status="active"] { color: #f3ddaa; border-color: #c9ae7485; background: #4b452b55; }
.combat-sequence-steps li[data-status="active"] .combat-step-marker { color: #f3ce82; font-weight: 700; }
.combat-sequence-steps li[data-status="done"] { color: #bed0bd; border-color: #8fab8b4f; }
.combat-sequence-steps li[data-status="done"] .combat-step-marker { color: #b4ccb2; }
.combat-sequence-steps li[data-status="skipped"] { opacity: .66; }
.combat-last-effect { margin-top: .65rem; border-top: 1px solid #92a3963b; padding-top: .5rem; }
.combat-last-effect[hidden] { display: none; }
.combat-latest-heading { display: flex; gap: .5rem; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.combat-latest-heading > span { font-size: max(7px, .46rem); letter-spacing: .11em; color: #98b1b8; }
#combat-details-toggle { background: transparent; color: #cbb888; border-bottom: 1px solid #bfa56f58; padding: .13rem 0 .19rem; font-size: max(8px, .5rem); letter-spacing: .07em; }
#combat-details-toggle:hover, #combat-details-toggle[aria-expanded="true"] { color: #f0dcae; border-color: #dbc089; }
#combat-last-title { display: block; font-size: max(10px, .72rem); color: #e4dcc5; font-weight: 400; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#combat-last-summary { margin: .25rem 0 0; color: #a6c0c2; font-size: max(8px, .61rem); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.combat-last-facts { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-top: .4rem; }
.combat-last-facts[hidden] { display: none; }
.combat-last-facts > span { font-size: max(8px, .52rem); line-height: 1.5; color: #d4c18f; padding: .14rem .23rem; background: #283a337d; border: 1px solid #a9ac7947; }
.combat-sequence-details { flex: 1 1 auto; min-height: 0; margin-top: .55rem; max-height: 7.1rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #647c72 #0d202a; border-top: 1px solid #8fa39340; }
.combat-sequence-details[hidden] { display: none; }
#combat-feed { list-style: none; padding: 0 .25rem 0 0; margin: 0; }
#combat-feed li { padding: .45rem 0; border-bottom: 1px solid #a1a98822; font-size: max(9px, .63rem); line-height: 1.6; overflow-wrap: anywhere; }
.combat-feed-kind { display: block; font-size: max(8px, .5rem); color: #cab78d; line-height: 1.5; }
.combat-feed-source { display: block; font-size: max(8px, .57rem); color: #c3d7cc; line-height: 1.5; margin: .2rem 0; }
.combat-feed-text { color: #c1d2ce; }
#combat-feed small { display: block; font-size: max(7px, .46rem); letter-spacing: .055em; color: #88a6ad; margin-top: .2rem; }
.combat-skip { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; background: #34433c; border: 1px solid #c1aa7269; color: #eee1bb; margin-top: .6rem; padding: .4rem .45rem; font-size: max(8px, .53rem); letter-spacing: .055em; }
.combat-skip:hover { border-color: #e0c487; background: #425045; }
.combat-skip[hidden] { display: none; }
.combat-skip kbd { font-size: max(7px, .44rem); font-weight: 400; background: #14272d; border-color: #bfad7859; color: #d9c7a0; padding: .1rem .18rem; }
.combat-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.has-combat-presentation .chronicle-panel { padding-top: .75rem; min-height: 4.4rem; overflow: hidden; }
.has-combat-presentation .chronicle-panel .rail-heading .eyebrow { font-size: max(8px, .58rem); }
.has-combat-presentation .chronicle-panel .log-item { font-size: max(9px, .7rem); }
.has-combat-presentation .chronicle-panel .log-bottom { font-size: max(7px, .46rem); }
.has-combat-presentation.history-collapsed .chronicle-panel { display: none; }
.has-combat-presentation.history-collapsed .command-rail { justify-content: space-between; }
.has-combat-presentation .command-rail:has(.details-expanded) .chronicle-panel { display: none; }
.has-combat-presentation .command-rail:has(.details-expanded) { justify-content: space-between; }

/* Effect labels sit beside cards, never over their name, printed effect, cost or stats. */
.combat-vfx { position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.combat-change-group { position: absolute; display: flex; flex-direction: column; gap: .3rem; pointer-events: none; }
.combat-change-group[hidden] { display: none; }
.combat-change { --change-color: #d2bd8e; --change-bg: #172c34f5; pointer-events: auto; display: flex; align-items: flex-start; gap: .22rem; padding: .27rem .28rem; color: var(--change-color); background: var(--change-bg); border: 1px solid color-mix(in srgb, var(--change-color) 54%, transparent); border-left: 2px solid var(--change-color); box-shadow: 0 .25rem .75rem #0008; font-size: max(8px, .57rem); line-height: 1.45; overflow-wrap: normal; }
.combat-change > span:last-child { min-width: 0; }
.combat-change-sign { font-size: max(9px, .66rem); font-weight: 700; line-height: 1.2; flex: 0 0 .5rem; text-align: center; }
.combat-change-damage, .combat-change-destroy { --change-color: #efb6a2; --change-bg: #3b2728f5; }
.combat-change-shield, .combat-change-shield_absorb { --change-color: #b5dce5; --change-bg: #163440f7; }
.combat-change-shield_remove { --change-color: #c5cce1; --change-bg: #2a2e43f7; border-left-style: double; }
.combat-change-restore { --change-color: #c7dfb1; --change-bg: #283d30f7; }
.combat-change-silence, .combat-change-expiry { --change-color: #d3bedc; --change-bg: #332b40f7; }
.combat-change-power { --change-color: #e5ca8c; --change-bg: #3b3424f7; }
.combat-change-deployment, .combat-change-draw { --change-color: #bfdbcd; --change-bg: #21372ff7; }
.combat-change-budget { --change-color: #e0cd9b; --change-bg: #3b3626f7; }
.combat-change-more { color: #b4c9cc; border-color: #92aba85d; font-size: max(7px, .5rem); }
.combat-resource-change { gap: .15rem; }
.combat-resource-change .combat-change { align-self: flex-end; width: auto; max-width: 100%; padding: .13rem .3rem; font-size: max(8px, .51rem); line-height: 1.35; border-left-width: 1px; background: #0a1a24f5; }
.combat-change-group.is-appearing { animation: combat-label-in .24s ease-out both; }
@keyframes combat-label-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

/* Leader reveals use the approved SP01 portrait in the existing portrait area. */
.combat-special { --special-color: #deb482; position: absolute; inset: 0; z-index: 32; pointer-events: none; overflow: hidden; }
.combat-special[hidden], .combat-clash[hidden] { display: none; }
.combat-special[data-profile="XJ"] { --special-color: #a8d0c1; }
.combat-special-source { position: absolute; overflow: hidden; border: 1px solid var(--special-color); background: radial-gradient(ellipse at 60% 50%, #3b5358, #10232d 75%); }
.combat-special-source img { position: absolute; width: 100%; height: 126%; left: 0; top: -1%; object-fit: contain; object-position: center top; filter: drop-shadow(.25rem 0 .3rem #0007); }
.combat-special-source:after { content: ''; position: absolute; inset: 72% 0 0; background: linear-gradient(0deg, #0b1e2bf2, transparent); }
.combat-special-source-label { position: absolute; left: .3rem; right: .3rem; bottom: .27rem; z-index: 2; font-size: max(8px, .57rem); letter-spacing: .06em; line-height: 1.3; color: #f0dfbb; background: #0b1b25b5; padding: .1rem .2rem; text-align: center; }
.combat-special-grid { position: absolute; inset: 8% 9%; border: 1px solid #c4b58b5e; background: repeating-linear-gradient(0deg, transparent 0 14px, #b1ccc50c 14px 15px); }
.combat-special[data-profile="TR"] .combat-special-grid { transform: skew(-8deg); border-left: 3px solid #d9ab79; }
.combat-special[data-profile="XJ"] .combat-special-grid { border-radius: 50%; background: none; border-width: 2px; border-color: #b6d8c64f #a8d0c1 #b6d8c64f #a8d0c1; transform: rotate(-30deg); }
.combat-special-route { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--special-color); stroke-width: 1.5px; stroke-linejoin: bevel; }
.combat-special-route path { vector-effect: non-scaling-stroke; }
.combat-route-track { opacity: .36; stroke-dasharray: 3 6; }
.combat-route-progress { stroke-dasharray: 100; stroke-dashoffset: 0; opacity: .86; }
.combat-special[data-profile="XJ"] .combat-route-progress { stroke-dasharray: 5 3; opacity: .75; }
.combat-special-target { position: absolute; border-radius: .25rem; }
.combat-special-target[hidden], .combat-special-banner[hidden] { display: none; }
.combat-special-target > i { position: absolute; width: 17%; height: 13%; border: solid var(--special-color); border-width: 2px 0 0 2px; }
.combat-special-target > i:nth-child(1) { left: 0; top: 0; }
.combat-special-target > i:nth-child(2) { right: 0; top: 0; transform: rotate(90deg); transform-origin: center; }
.combat-special-target > i:nth-child(3) { right: 0; bottom: 0; transform: rotate(180deg); }
.combat-special-target > i:nth-child(4) { left: 0; bottom: 0; transform: rotate(270deg); }
.combat-special-target > span { position: absolute; left: 50%; top: -.95rem; transform: translateX(-50%); white-space: nowrap; font-size: max(7px, .46rem); letter-spacing: .06em; color: var(--special-color); background: #0c202cf5; border: 1px solid #b3b18d60; padding: .1rem .3rem; }
.combat-special[data-profile="XJ"] .combat-special-target > i { border-radius: 50%; border-color: #a8d0c1; width: 20%; height: 16%; }
.combat-special[data-status="declared"] .combat-special-target > i { border-style: dashed; }
.combat-special[data-status="canceled"] { --special-color: #c9a7a3; }
.combat-special-banner { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: .2rem .5rem; gap: .11rem; border-top: 1px solid var(--special-color); border-bottom: 1px solid #b8ab8066; background: linear-gradient(90deg, #0b1c26eb, #263c42fc, #0b1c26eb); text-align: center; box-shadow: 0 .25rem .8rem #0005; }
.combat-special-banner strong { color: #f1e0b9; font: 400 max(11px, .92rem) var(--wo-title); line-height: 1.1; }
.combat-special-banner > span { color: var(--special-color); font-size: max(7px, .47rem); letter-spacing: .055em; line-height: 1.25; }
.combat-special.is-animated .combat-special-source img { animation: combat-pose-in .25s ease-out both; }
.combat-special.is-animated .combat-route-progress { animation: combat-route-in .6s ease-out both; }
.combat-special.is-animated[data-profile="TR"] .combat-special-target { animation: combat-pressure .55s ease-out both; }
.combat-special.is-animated[data-profile="XJ"] .combat-special-grid { animation: combat-progress-arc .85s ease-out both; }
.combat-special.is-animated[data-profile="XJ"] .combat-special-target { animation: combat-recovery .65s ease-out both; }
@keyframes combat-pose-in { from { opacity: .4; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } }
@keyframes combat-route-in { from { opacity: 0; stroke-dashoffset: 100; } to { opacity: .86; stroke-dashoffset: 0; } }
@keyframes combat-pressure { from { opacity: .3; transform: translateX(-7px); } to { opacity: 1; transform: translateX(0); } }
@keyframes combat-progress-arc { from { transform: rotate(-70deg); opacity: .45; } to { transform: rotate(-30deg); opacity: 1; } }
@keyframes combat-recovery { from { opacity: .3; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
.combat-clash { position: absolute; z-index: 33; display: flex; align-items: center; justify-content: center; gap: 1.2rem; padding: .25rem 1rem; background: linear-gradient(90deg, #112831ef, #243b41fc 50%, #112831ef); border-top: 1px solid #d4bb8188; border-bottom: 1px solid #d4bb8188; box-shadow: 0 .3rem 1rem #0005; pointer-events: none; }
.combat-clash strong { font-size: max(9px, .75rem); font-weight: 400; color: #edd9a9; white-space: nowrap; letter-spacing: .1em; }
.combat-clash > span { color: #c5d7d3; font-size: max(8px, .61rem); line-height: 1.3; text-align: center; }

/* Declaration facts stay visible while the player decides whether to respond. */
.declaration-summary { padding: 13px 15px; margin: 15px 0 20px; border: 1px solid #a0b6a44d; background: #0b202bea; color: #c4d4d0; }
.declaration-facts { display: flex; flex-wrap: wrap; gap: 7px 13px; font-size: 10px; line-height: 1.5; color: #e1cba1; margin-bottom: 11px; }
.declaration-facts > span { border: 1px solid #b4b28444; background: #2c3c356e; padding: 4px 7px; }
.declaration-summary > strong { font-size: 8px; font-weight: 400; letter-spacing: .1em; color: #8fb1bb; }
.declaration-summary ul { list-style: none; padding: 0; margin: 7px 0 10px; font-size: 11px; line-height: 1.65; }
.declaration-summary li { position: relative; padding-left: 12px; margin-top: 3px; }
.declaration-summary li:before { content: '›'; position: absolute; left: 0; color: #d3bc82; }
.declaration-order { margin: 10px 0 0 !important; padding-top: 9px; border-top: 1px solid #91a99433; font-size: 9px !important; line-height: 1.7 !important; color: #a2bdbc !important; }
.modifier-label:has(.modifier-duration) { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; padding: .22rem .32rem; }
.modifier-duration { display: block; font: 400 max(6px, .38rem) var(--wo-text); letter-spacing: .06em; line-height: 1.25; color: #dcd0ad; }
.modifier-label.negative .modifier-duration { color: #ecc6b4; }
.inspection-status { font-size: 11px; line-height: 1.8; color: #b8d1ce; border-left: 2px solid #9eb69870; padding: 10px 12px; margin-top: 15px; background: #19323a88; }

/* Debrief supports final totals, match duration and concrete decisive public events. */
.result-modal:has(.result-debrief) { width: min(960px, 94vw); max-height: 94svh; overflow-y: auto; }
.result-modal:has(.result-debrief) .result-art { width: 38%; max-height: 720px; }
.result-modal:has(.result-debrief) .result-copy { margin-left: 30%; padding: 34px 34px 26px 14px; }
.result-modal:has(.result-debrief) .result-copy h2 { font-size: 54px; margin: 13px 0 11px; }
.result-modal:has(.result-debrief) .result-copy > p { margin-bottom: 16px; }
.result-modal:has(.result-debrief) .result-scores { padding: 15px 0; margin-bottom: 16px; }
.result-debrief { margin-bottom: 22px; }
.result-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0 0 14px; }
.result-facts > div { border: 1px solid #90a8943d; background: #132a3296; padding: 10px 11px; min-width: 0; }
.result-facts strong { display: block; font: 24px var(--wo-title); font-weight: 400; line-height: 1.2; color: #e6d4a9; }
.result-facts span, .result-facts small, .result-facts dt { display: block; color: #a6c1c1; font-size: 8px; letter-spacing: .05em; line-height: 1.6; margin-top: 4px; }
.result-facts dd { margin: 0; font: 24px var(--wo-title); color: #e6d4a9; }
.result-debrief h3 { font-size: 10px; font-weight: 400; letter-spacing: .13em; color: #c9b686; margin: 19px 0 11px; }
.result-events { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.result-event { position: relative; border-left: 2px solid #aa9f7463; background: #0e242f9c; padding: 10px 12px; color: #bfd1ce; font-size: 11px; line-height: 1.65; }
.result-event-round { display: inline-block; color: #cbb680; font-size: 8px; letter-spacing: .06em; margin-right: 8px; }
.result-event-source { color: #e0d4b8; font-size: 10px; }
.result-event > p { margin: 5px 0 0; }
.result-limit-note { margin: 13px 0 0; padding: 11px 12px; border: 1px solid #a1c0bb57; color: #c4d8d2; background: #25433e6b; font-size: 11px; line-height: 1.75; }

@media (max-width: 1400px) {
  .combat-sequence { padding: .68rem .7rem .6rem; }
  .combat-sequence-steps { gap: .24rem .16rem; }
  .combat-sequence-steps li { gap: .12rem; padding: .2rem .1rem; }
  .combat-step-marker { flex-basis: .48rem; }
  .combat-sequence-details { max-height: 6.1rem; }
  .combat-change { padding: 3px; gap: 2px; }
  .combat-change-sign { flex-basis: 6px; }
  .combat-clash { gap: .7rem; }
}
@media (max-width: 1100px) {
  .combat-scroll:has(.combat-last-effect:not([hidden])) > #combat-sequence-title,
  .combat-scroll:has(.combat-last-effect:not([hidden])) > #combat-sequence-note { display: none; }
  .combat-sequence:has(.combat-last-effect:not([hidden])) .combat-steps-context { margin-top: .4rem; }
}
@media (max-width: 680px) {
  .combat-sequence { max-height: 29rem; }
  .combat-sequence-details { max-height: 5.5rem; }
  .combat-change { font-size: 8px; padding: 2px 3px; }
  .combat-clash { gap: .5rem; padding-left: .4rem; padding-right: .4rem; }
  .combat-clash > span { font-size: 8px; }
  .combat-special-banner strong { font-size: 11px; }
  .combat-special-banner > span { font-size: 7px; }
  .declaration-summary { padding: 11px; margin: 12px 0 16px; }
  .declaration-facts { font-size: 9px; gap: 6px; }
  .declaration-summary ul { font-size: 10px; }
  .result-modal:has(.result-debrief) .result-copy { margin-left: 0; padding: 31px 23px 25px; }
  .result-modal:has(.result-debrief) .result-art { width: 60%; }
  .result-modal:has(.result-debrief) .result-copy h2 { font-size: 48px; }
  .result-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .result-facts > div { padding: 8px; }
  .result-facts strong, .result-facts dd { font-size: 21px; }
  .result-facts span, .result-facts small { font-size: 7px; }
  .result-event { padding: 9px 10px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .combat-change-group.is-appearing, .combat-special.is-animated *, .combat-special.is-animated *:before, .combat-special.is-animated *:after { animation: none !important; transition: none !important; }
}
.reduced-motion .combat-change-group.is-appearing, .reduced-motion .combat-special * { animation: none !important; transition: none !important; }