/* The war map (js/warmap.js) in the War Room and on the Campaign, the split bars, the Campaign's sections and battle
   list, and the war explainers (js/warhelp.js). Loads after kit.css and overrides a few of its War Room rules. */

/* ---------- War Room ---------- */
.wr { background: #121b22; }
.wr-stage::after { background: radial-gradient(ellipse at 50% 56%, transparent 58%, #05080c8c 100%); }
.wr-key .k-front { height: 6px; background: linear-gradient(#5d93ea 0 30%, #16110c 30% 70%, #ea5545 70%); }
.wr-key .k-vote { height: 8px; background: none; outline: 0; border: 2px dashed #ffce5c; box-sizing: border-box; }
.wr-key .k-hot { background: radial-gradient(#ffe3a0, #d8423a); box-shadow: none; }
.wr-you [data-explain] { cursor: pointer; position: relative; }
.wr-you [data-explain]::after { content: '?'; position: absolute; right: 0; top: -3px; display: grid; place-items: center; width: 11px; height: 11px; font: 400 9px/1 var(--display); color: #120c08; background: #e6dccb; border-radius: 50%; opacity: .55; }
.wr-pin, .wm-mark { transition: opacity .35s; }
.wr-pin.dim, .wm-mark.dim { opacity: .22; }
.wr-pin[data-fx~="shake"] .wp-body { animation: wr-shake .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes wr-shake { 10%, 90% { transform: translateX(-1px) rotate(-.4deg); } 20%, 80% { transform: translateX(3px) rotate(.6deg); } 30%, 50%, 70% { transform: translateX(-5px) rotate(-.8deg); } 40%, 60% { transform: translateX(5px) rotate(.8deg); } }

/* ---------- the split bar (War Room header and the Campaign score), Gage 10-21: "more intense" ----------
   Each share sits centred in its own side; textured side colours with slow diagonal stripes; a jagged burning seam
   with sparks where the sides meet; a pulse when it shifts. Calm and reduced motion: still. */
.wr-sbar, .wt-bar { position: relative; isolation: isolate; height: 26px; overflow: visible; border: 2px solid #0d0b09; box-shadow: 2px 3px 0 #0d0b09;
  background: repeating-linear-gradient(-45deg, #ffffff14 0 5px, transparent 5px 11px), linear-gradient(#e2564a, #a5221d 60%, #7e1714); background-size: 31px 31px, auto; animation: wsb-ca 2.4s linear infinite; }
.wr-sbar i, .wt-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); z-index: 1; box-shadow: none;
  background: repeating-linear-gradient(45deg, #ffffff16 0 5px, transparent 5px 11px), linear-gradient(#6c9ff0, #2d5bb0 60%, #1f4387); background-size: 31px 31px, auto; animation: wsb-us 2.4s linear infinite; transition: width .9s cubic-bezier(.3,1.3,.5,1); }
/* the seam: a jagged burning edge with sparks */
.wr-sbar i::after, .wt-bar i::after { content: ''; position: absolute; right: -7px; top: -3px; bottom: -3px; width: 14px; z-index: 2;
  background: linear-gradient(90deg, #ffb347, #fff2c0 45%, #ff7a2e); clip-path: polygon(50% 0, 100% 12%, 62% 24%, 100% 38%, 58% 50%, 100% 64%, 60% 76%, 100% 90%, 50% 100%, 0 88%, 40% 76%, 0 62%, 42% 50%, 0 36%, 40% 24%, 0 10%);
  filter: drop-shadow(0 0 3px #ff8a3c); animation: wsb-burn .5s steps(2) infinite; }
.wr-sbar i::before, .wt-bar i::before { content: ''; position: absolute; right: -10px; top: -14px; width: 20px; height: 50px; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, #ffe08a 0 1.2px, transparent 1.6px) 2px 0 / 7px 9px, radial-gradient(circle, #ff9a3c 0 1px, transparent 1.4px) 5px 4px / 9px 11px;
  -webkit-mask: linear-gradient(transparent, #000 35%, #000 65%, transparent); mask: linear-gradient(transparent, #000 35%, #000 65%, transparent); animation: wsb-sparks .9s linear infinite; opacity: .9; }
.wr-sbar b, .wt-bar b { position: absolute; top: 0; bottom: 0; z-index: 3; display: grid; place-items: center; padding: 0; font: 400 17px/1 var(--display); letter-spacing: .06em; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 6px #000a; right: auto; }
.wr-sbar b:first-of-type, .wt-bar b:first-of-type { left: 0; width: var(--p); }
.wr-sbar b:last-of-type, .wt-bar b:last-of-type { left: var(--p); right: 0; width: auto; }
.wr-sbar.shift, .wt-bar.shift { animation: wsb-ca 2.4s linear infinite, wsb-pulse .9s ease-out; }
@keyframes wsb-us { to { background-position: 31px 0, 0 0; } }
@keyframes wsb-ca { to { background-position: -31px 0, 0 0; } }
@keyframes wsb-burn { 50% { filter: drop-shadow(0 0 6px #ffb347) brightness(1.25); transform: scaleY(1.06); } }
@keyframes wsb-sparks { from { background-position: 2px 18px, 5px 22px; } to { background-position: 2px -9px, 5px -11px; } }
@keyframes wsb-pulse { 0% { transform: scale(1); box-shadow: 2px 3px 0 #0d0b09; } 25% { transform: scale(1.045); box-shadow: 0 0 0 3px #ffd36e, 0 0 18px #ff8a3c; } 100% { transform: scale(1); box-shadow: 2px 3px 0 #0d0b09; } }
.wr.calm .wr-sbar, .wr.calm .wr-sbar *, .wr.calm .wr-sbar *::before, .wr.calm .wr-sbar *::after, .war.calm .wt-bar, .war.calm .wt-bar *, .war.calm .wt-bar *::before, .war.calm .wt-bar *::after { animation: none !important; transition: none !important; }
.wr.calm .wr-sbar i::before, .war.calm .wt-bar i::before { display: none; }
@media (prefers-reduced-motion: reduce) { .wr-sbar, .wt-bar, .wr-sbar *, .wt-bar *, .wr-sbar i::before, .wr-sbar i::after, .wt-bar i::before, .wt-bar i::after, .wr-pin .wp-body { animation: none !important; transition: none !important; } .wr-sbar i::before, .wt-bar i::before { display: none; } }

/* ---------- the Campaign: stamped sections in one clear order ---------- */
.war { gap: 16px; }
.war-sec { display: grid; gap: 9px; }
.war-stamp { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 15px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: #f2eee6; }
.war-stamp span { padding: 4px 9px 3px 10px; background: #b5232a; border: 2px solid #0d0b09; box-shadow: 2px 2px 0 #0d0b09, inset 0 0 0 1px #ff8a7a55; transform: rotate(-1.5deg); }
.war-stamp::after { content: ''; flex: 1; height: 0; border-top: 2px dashed #3b2c1c; }
.war-stamp small { order: 2; font: 400 12px var(--display); letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.war-note, .war-wait { margin: 0; font-size: 12px; color: #c9b99c; text-align: center; }
.war-count { text-align: center; }
.war .war-map { aspect-ratio: 343 / 300; background: #121b22; cursor: pointer; }
.war .war-map canvas { image-rendering: auto; }
.war .war-key { position: static; display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: -3px; padding: 0 2px; font-size: 11px; color: #c9b99c; text-shadow: none; }
.war-key .wk-tap { margin-left: auto; color: var(--gold); }
.war-key .k-front { height: 5px; background: linear-gradient(#5d93ea 0 30%, #16110c 30% 70%, #ea5545 70%); }
.war-key .k-cont { height: 8px; background: repeating-linear-gradient(45deg, #e6dccb 0 1.5px, transparent 1.5px 4px); outline: 1px solid #e6dccb66; }
.war-key .k-att { width: 9px; height: 9px !important; border-radius: 50%; background: #d8423a; outline: 0; box-shadow: 0 0 0 1.5px #ffd36e, 0 0 0 3px #0d0b09; }
.wm-marks { position: absolute; inset: 0; pointer-events: none; }
.wm-mark { position: absolute; left: 0; top: 0; width: 112px; padding: 13px 0 0; text-align: left; color: #f2eee6; font-family: var(--display); background: none; border: 0; cursor: pointer; pointer-events: auto; }
.wmk-tags { position: absolute; left: 2px; right: 0; top: 0; display: flex; gap: 3px; height: 13px; align-items: flex-end; }
.wm-mark u, .wbl u { display: inline-block; text-decoration: none; padding: 1px 4px 0; font: 400 10px/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; background: #120c08; border: 1.5px solid currentColor; transform: rotate(-2deg); white-space: nowrap; }
.wm-mark:not(:hover) .wmk-tags u:nth-child(n+3) { display: none; }
.wmk-body { display: grid; gap: 2px; padding: 3px 5px 4px 5px; background: linear-gradient(#1c1713f2, #100c09f2); border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #4a3826, 2px 2px 0 #0009; }
.wm-mark.att-us .wmk-body { border-left: 4px solid var(--us); } .wm-mark.att-ca .wmk-body { border-left: 4px solid var(--ca); }
.wm-mark.urgent .wmk-body { border-color: #d4262e; animation: wr-urgbox 1s ease-in-out infinite; }
.wmk-row { display: flex; align-items: center; gap: 3px; }
.wmk-row .wi { width: 14px; height: 14px; flex: none; }
.wmk-row b { flex: 1; min-width: 0; font: 400 13px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wmk-row em { display: inline-flex; align-items: center; gap: 1px; font: 400 12px/1 var(--display); font-style: normal; color: var(--gold); }
.wmk-row em .wi { width: 11px; height: 11px; }
.wmk-bar, .wbl-bar { position: relative; display: block; height: 10px; background: #2a231d; border: 1px solid #0d0b09; overflow: hidden; }
.wmk-bar i, .wbl-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--us); box-shadow: 1px 0 0 var(--gold); }
.att-ca .wmk-bar i, .att-ca .wbl-bar i { background: var(--ca); }
.wmk-bar s { position: absolute; inset: 0; display: grid; place-items: center; font: 400 10px/1 var(--display); text-decoration: none; color: #fff; text-shadow: 1px 1px #000; }
.war-battles { display: grid; gap: 6px; }
.wbl { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic main tags" "ic bar n"; column-gap: 8px; row-gap: 5px; align-items: center; width: 100%; padding: 7px 9px 7px 7px; text-align: left; color: #f2eee6; cursor: pointer;
  background: linear-gradient(#1c1612, #14100d); border: 2px solid #0d0b09; border-left: 5px solid var(--us); box-shadow: inset 0 0 0 1px #3b2c1c, 2px 3px 0 #0d0b09; }
.wbl.att-ca { border-left-color: var(--ca); }
.wbl.urgent { border-color: #d4262e; border-left-color: #d4262e; }
.wbl:active { transform: translate(1px, 2px); box-shadow: inset 0 0 0 1px #3b2c1c, 1px 1px 0 #0d0b09; }
.wbl-ic { grid-area: ic; align-self: stretch; display: grid; place-items: center; width: 34px; background: #0f0c0a; border: 1px solid #3b2c1c; } .wbl-ic .wi { width: 24px; height: 24px; }
.wbl-main { grid-area: main; min-width: 0; } .wbl-main b { display: block; font: 400 18px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbl-main small { display: block; margin-top: 2px; font-size: 11px; color: #c9b99c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbl-n { grid-area: n; display: flex; gap: 3px; align-items: center; justify-content: flex-end; min-width: 34px; color: var(--gold); }
.wbl-n .wi { width: 14px; height: 14px; } .wbl-n b { font: 400 18px/1 var(--display); }
.wbl-bar { grid-area: bar; height: 14px; }
.wbl-bar em { position: absolute; left: 6px; top: 0; bottom: 0; display: grid; place-items: center; font: 400 11px/1 var(--display); font-style: normal; letter-spacing: .06em; color: #fff; text-shadow: 1px 1px #000; }
.wbl-bar s { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: repeating-linear-gradient(#fff 0 3px, transparent 3px 5px); }
.wbl-tags { grid-area: tags; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; max-width: 120px; align-self: start; }
.war-tug { gap: 8px; }
.war-tug .war-flag { width: 34px; height: 22px; }
.wt-legend { display: flex; justify-content: space-between; font: 400 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wt-legend b { font-size: 16px; } .wt-legend .us b { color: var(--us); } .wt-legend .ca b { color: var(--ca); }
.wy-chips { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 6px; margin-top: 10px; }
.wy-chip { position: relative; display: grid; gap: 2px; align-content: start; padding: 6px 8px 7px; text-align: left; color: #fff; cursor: pointer; background: #0f0c0a; border: 1px solid #3b2c1c; box-shadow: 2px 2px 0 #0d0b09; }
.wy-chip::after { content: '?'; position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 13px; height: 13px; font: 400 10px/1 var(--display); color: #120c08; background: #e6dccb; border-radius: 50%; opacity: .7; }
.wy-chip small { font: 400 10px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wy-chip b { font: 400 19px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wy-chip:active { transform: translate(1px, 2px); box-shadow: none; }
.war-feed h3 { display: none; }
@media (prefers-reduced-motion: reduce) { .wm-mark .wmk-body { animation: none !important; } }
.war.calm .wm-mark .wmk-body { animation: none !important; }

/* ---------- the war explainers (js/warhelp.js) ---------- */
.wh-box > .sheet-x { align-self: flex-end; float: none; flex: none; margin: -8px -6px -44px 0; }
.wh-box { display: flex; flex-direction: column; gap: 10px; width: min(440px, 100%); max-height: min(86vh, 760px); overflow-y: auto; padding: 14px 14px 16px; }
.wh-head em { font: 400 12px var(--display); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: #f27661; }
.wh-head h2 { margin: 2px 0 0; font: 400 34px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.wh-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.wh-tabs button { padding: 7px 4px 6px; font: 400 15px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #d9cdb8; background: #0f0c0a; border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #3b2c1c; cursor: pointer; }
.wh-tabs button[aria-selected="true"] { color: #fff; background: #b5232a; box-shadow: inset 0 0 0 1px #ff8a7a66, 2px 2px 0 #0d0b09; transform: rotate(-1deg); }
.wh-body { display: grid; gap: 10px; }
.wh-you { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 10px; background: linear-gradient(#211a15, #14100d); border: 2px solid #0d0b09; border-left: 6px solid var(--gold, #ffd36e); box-shadow: inset 0 0 0 1px #4a3826, 3px 4px 0 #0d0b09; }
.wh-you small { display: block; font: 400 11px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wh-you b { display: block; font: 400 28px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #ffd36e; }
.wh-you span { display: block; margin-top: 3px; font-size: 13px; color: #e6dccb; }
.wh-you .wr-meter { margin-top: 6px; }
.wh-badge { display: grid; place-items: center; width: 54px; height: 54px; color: #ffd36e; background: #0f0c0a; border: 2px solid #ffd36e; box-shadow: 0 0 0 2px #0d0b09; transform: rotate(-4deg); }
.wh-badge .wi { width: 34px; height: 34px; } .wh-badge.num { font: 400 30px/1 var(--display); }
.wh-card { padding: 10px 11px; background: #14100d; border: 1px solid #2c2219; box-shadow: 2px 3px 0 #0d0b09; }
.wh-card h3 { margin: 0 0 7px; font: 400 15px var(--display); letter-spacing: .18em; text-transform: uppercase; color: #f27661; }
.wh-card p { margin: 0; font-size: 13px; color: #e6dccb; }
.wh-card .wh-fine { margin-top: 7px; font-size: 12px; color: #c9b99c; }
.wh-steps { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13px; color: #e6dccb; } .wh-steps b { color: #ffd36e; font-weight: 400; font-family: var(--display); letter-spacing: .05em; font-size: 15px; }
.wh-roles { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.wh-roles li { display: grid; grid-template-columns: 26px 1fr; gap: 9px; align-items: start; padding: 6px 7px; background: #0f0c0a; border-left: 3px solid #3b2c1c; }
.wh-roles li .wi { width: 24px; height: 24px; color: #e6dccb; }
.wh-roles li b { display: flex; align-items: center; gap: 6px; font: 400 17px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.wh-roles li span { display: block; margin-top: 2px; font-size: 12px; color: #d9cdb8; }
.wh-roles li small { display: block; margin-top: 2px; font-size: 11px; color: #ffd36e; }
.wh-roles li.me { border-left-color: #ffd36e; background: #1f1810; }
.wh-roles li.wh-sub { display: block; padding: 6px 7px 2px; background: none; border-left: 0; }
.wh-roles li.wh-sub b { color: #f27661; font-size: 14px; letter-spacing: .16em; }
.wh-roles u, .wh-ladder u { padding: 0 5px; font: 400 11px/1.3 var(--display); text-decoration: none; letter-spacing: .1em; color: #120c08; background: #ffd36e; transform: rotate(-3deg); display: inline-block; }
.wh-ladder { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.wh-ladder li { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; padding: 5px 7px; background: #0f0c0a; border-left: 3px solid #3b2c1c; }
.wh-ladder li em { font: 400 13px var(--display); font-style: normal; letter-spacing: .06em; color: var(--muted); }
.wh-ladder li b { display: flex; align-items: center; gap: 6px; font: 400 17px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.wh-ladder li small { font-size: 11px; color: #c9b99c; text-align: right; }
.wh-ladder.rank li.done { border-left-color: #6d5a3c; } .wh-ladder.rank li.done b { color: #bfae92; }
.wh-ladder.rank li.me { border-left-color: #ffd36e; background: #1f1810; } .wh-ladder.rank li.me b { color: #ffd36e; }
.wh-earn { margin: 0 0 2px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wh-earn li { display: grid; gap: 1px; padding: 6px 8px; background: #0f0c0a; border: 1px solid #2c2219; }
.wh-earn b { font: 400 24px/1 var(--display); color: #ffd36e; } .wh-earn span { font-size: 12px; color: #d9cdb8; }
.wh-go { justify-self: start; margin-top: 8px; padding: 7px 12px 6px; font: 400 15px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #3d3731; border: 2px solid #0d0b09; box-shadow: 2px 3px 0 #0d0b09; cursor: pointer; }