/* Capital War (client/panels-capital.js) — war room: gunmetal, rust red and hazard yellow; gold is "my clan". */
.cw-root { --cw-red: #c8452e; --cw-red2: #6a1d12; --cw-gold: var(--c-amber-hi); --cw-steel: #23282d; --cw-edge: #3a434b;
  min-height: 100%; display: flex; flex-direction: column; margin: -12px -12px 0;
  background: radial-gradient(ellipse at 50% 0%, #403632, #17191c 70%); }
#panel .pn-wrap.cw-root { padding-bottom: 0; min-height: calc(100% + 12px); }
.cw-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 14px;
  background: linear-gradient(rgba(24,20,18,.84), rgba(20,18,17,.94)), repeating-linear-gradient(-45deg, #c8452e 0 14px, #2a2a2a 14px 28px);
  border-bottom: 3px solid var(--cw-red); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.cw-head.war { border-bottom-color: #ff6a4a; animation: cw-alarm 1.6s ease-in-out infinite; }
@keyframes cw-alarm { 50% { box-shadow: 0 4px 18px rgba(255,80,50,.55); } }
.cw-head .tt { flex: 1; min-width: 0; display: grid; }
.cw-head .tt b { font: 900 20px/1.15 system-ui; color: var(--cw-gold); text-shadow: 0 2px 0 #000; letter-spacing: .02em; }
.cw-head .tt small { color: #d6cfc8; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-help { flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 2px solid var(--cw-red); background: var(--cw-steel); color: var(--cw-gold); font: 900 18px/1 system-ui; }
.cw-body { flex: 1; display: grid; align-content: start; gap: 12px; padding: 12px 12px 16px; }
.cw-ico { display: block; pointer-events: none; }

/* status banner */
.cw-banner { position: relative; overflow: hidden; display: grid; grid-template-columns: 58px 1fr; gap: 8px 12px; align-items: center; padding: 12px; border-radius: 14px; }
.cw-banner.war { background: linear-gradient(135deg, #8a2414, #2c1410 78%); box-shadow: 0 0 0 2px #ff6a4a, 0 6px 16px rgba(0,0,0,.45); }
.cw-banner.prep { background: linear-gradient(135deg, #8a6212, #2a2210 78%); box-shadow: 0 0 0 2px #e0a52a, 0 6px 16px rgba(0,0,0,.45); }
.cw-banner.peace { background: linear-gradient(135deg, #3b5a4c, #18221d 78%); box-shadow: 0 0 0 2px #5f8f78, 0 6px 16px rgba(0,0,0,.45); }
.cw-banner .ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.cw-banner.war .ic { animation: cw-beat 1.1s ease-in-out infinite; }
@keyframes cw-beat { 50% { transform: scale(1.08); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), 0 0 16px rgba(255,90,60,.6); } }
.cw-banner .tx { min-width: 0; }
.cw-banner .tx small { font: 800 11px/1 system-ui; letter-spacing: .1em; color: rgba(255,255,255,.78); }
.cw-banner .tx b { display: block; font: 900 20px/1.2 system-ui; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.cw-banner .tx b span { font-family: ui-monospace, Menlo, monospace; color: var(--cw-gold); }
.cw-banner .tx p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,.85); }
.cw-hold { grid-column: 1 / -1; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.42); font-size: 13px; line-height: 1.3; }
.cw-hold .hd { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cw-hold .hd b[data-end] { font-family: ui-monospace, Menlo, monospace; color: var(--cw-gold); }
.cw-bar { height: 8px; margin-top: 6px; border-radius: 4px; background: #0d0f11; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); overflow: hidden; }
.cw-bar i { display: block; height: 100%; border-radius: 4px; transition: width .4s; }
.cw-shell { grid-column: 1 / -1; font-size: 12.5px; color: #ffd2c4; }
.cw-shell b[data-end] { font-family: ui-monospace, Menlo, monospace; color: #fff; }
.cw-join { display: grid; grid-template-columns: 40px 1fr; gap: 6px 10px; align-items: center; padding: 12px; border-radius: 12px; background: #2a2418; border: 1px dashed var(--c-amber-lo); }
.cw-join .big { font-size: 32px; } .cw-join b { display: block; color: var(--cw-gold); font-size: 15px; } .cw-join small { color: var(--muted); font-size: 12px; }
.cw-join button { grid-column: 1 / -1; height: 40px; border-radius: 10px; border: 0; font: 900 15px/1 system-ui; color: #2a1a04; background: linear-gradient(var(--c-amber-hi), #e3a03a); box-shadow: 0 3px 0 #8a5a10; }

/* the compound: turrets in the corners, the Capital in the middle */
.cw-board { position: relative; display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-template-rows: auto 18px auto; gap: 4px; padding: 10px 8px; border-radius: 14px; overflow: hidden;
  background:
    linear-gradient(to top right, transparent calc(50% - 1.5px), rgba(0,0,0,.4) calc(50% - 1.5px), rgba(0,0,0,.4) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    linear-gradient(to top left, transparent calc(50% - 1.5px), rgba(0,0,0,.4) calc(50% - 1.5px), rgba(0,0,0,.4) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, transparent 1px 26px),
    radial-gradient(ellipse at 50% 50%, #7d7446, #5c5633 65%, #46422a);
  box-shadow: 0 0 0 2px #59636d, inset 0 0 28px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.45); }
.cw-board.war { box-shadow: 0 0 0 2px #ff6a4a, inset 0 0 34px rgba(120,20,10,.6), 0 6px 16px rgba(0,0,0,.45); }
.cw-st { position: relative; display: grid; justify-items: center; align-content: end; gap: 2px; padding: 2px; border: 0; background: none; border-radius: 12px; color: #fff; min-width: 0; }
.cw-st:active { transform: scale(.97); }
.cw-st.pos-nw { grid-area: 1 / 1; } .cw-st.pos-ne { grid-area: 1 / 3; } .cw-st.pos-sw { grid-area: 3 / 1; } .cw-st.pos-se { grid-area: 3 / 3; }
.cw-st.pos-capital { grid-area: 1 / 2 / 4 / 3; align-content: center; }
.cw-st .tg { --fc: #8d9096; padding: 2px 8px 2px 6px; border-radius: 999px; font: 900 12px/1.25 system-ui; color: #fff; background: rgba(14,16,18,.9); box-shadow: inset 4px 0 0 var(--fc), 0 0 0 1px rgba(255,255,255,.3); padding-left: 11px; white-space: nowrap; }
.cw-st.mine .tg { box-shadow: inset 4px 0 0 var(--fc), 0 0 0 1px var(--cw-gold), 0 0 10px rgba(255,215,106,.5); color: var(--cw-gold); }
.cw-st .nm { font: 800 11px/1.15 system-ui; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; text-align: center; }
.cw-st.capital .nm { font-size: 13px; }
.cw-st .my { position: absolute; top: 2px; right: 0; padding: 1px 6px; border-radius: 999px; background: #1f5a9a; box-shadow: 0 0 0 1px #8cc0ff; font: 800 10px/1.4 system-ui; }
.cw-st .my.ours { background: #4a330a; box-shadow: 0 0 0 1px var(--c-amber); color: #ffe9b0; }
.cw-st.capital .my { top: 8px; right: 6px; }
.cw-pips { display: inline-flex; gap: 2px; vertical-align: middle; }
.cw-pips i { width: 9px; height: 5px; border-radius: 1px; background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.cw-pips i.on { background: #ff7a4a; box-shadow: 0 0 4px rgba(255,120,70,.8); }
.cw-acts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.cw-acts button { min-height: 46px; border-radius: 12px; font: 800 14px/1.15 system-ui; }
.cw-acts button.danger { background: linear-gradient(var(--c-blood), #a8301f); border-color: #ff8a6a; box-shadow: 0 3px 0 #5a160c; }
.cw-mine { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-mine span { padding: 4px 10px; border-radius: 999px; background: #1c2126; border: 1px solid var(--cw-edge); font-size: 12.5px; color: #c9d1d8; }
.cw-mine b { color: #fff; }

/* lists */
.cw-list { border-radius: 14px; overflow: hidden; background: #1c2126; border: 1px solid #343c43; }
.cw-list h4 { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 8px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cw-gold); background: #252b31; }
.cw-list h4 .more { padding: 2px 8px; border-radius: 999px; font: 800 11px/1.4 system-ui; text-transform: none; letter-spacing: 0; color: #fff; }
.cw-squad, .cw-score, .cw-top, .cw-win, .cw-past { display: grid; gap: 8px; align-items: center; padding: 9px 12px; border-top: 1px solid rgba(255,255,255,.05); }
.cw-squad { grid-template-columns: 28px 1fr auto auto; }
.cw-squad .ic, .cw-past .ic { font-size: 20px; text-align: center; }
.cw-squad .nm, .cw-score .nm, .cw-top .nm, .cw-win .nm, .cw-past .nm { min-width: 0; }
.cw-squad .nm b, .cw-score .nm b, .cw-top .nm b, .cw-past .nm b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-squad .nm small, .cw-top .nm small, .cw-win .nm small, .cw-past .nm small { display: block; color: var(--muted); font-size: 12px; }
.cw-squad .cd { font: 900 13px/1 ui-monospace, Menlo, monospace; color: var(--cw-gold); }
.cw-squad button { min-height: 36px; padding: 4px 10px; font-size: 13px; }
.cw-score { grid-template-columns: 8px 1fr auto auto; }
.cw-score .fl { width: 8px; height: 30px; border-radius: 3px; }
.cw-score .t { font: 900 13px/1 ui-monospace, Menlo, monospace; color: #fff; }
.cw-score.mine, .cw-top.mine { background: rgba(255,215,106,.07); box-shadow: inset 3px 0 0 var(--cw-gold); }
.cw-score .cw-bar { height: 6px; margin-top: 4px; }
.cw-feed { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: start; padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.05); }
.cw-feed .ic { font-size: 18px; text-align: center; line-height: 1.2; }
.cw-feed .tx { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.cw-feed small { color: var(--muted); font-size: 11px; white-space: nowrap; padding-top: 2px; }
.cw-feed.k-end { background: rgba(255,215,106,.08); } .cw-feed.k-end .tx { color: var(--cw-gold); font-weight: 700; }
.cw-feed.k-start .tx { color: #ffb39a; font-weight: 700; }
.cw-top { grid-template-columns: 30px 1fr auto; }
.cw-top .rk { font: 900 14px/1 system-ui; color: #aab4bd; text-align: center; } .cw-top .pt { font: 900 14px/1 system-ui; color: var(--cw-gold); }
.cw-win { grid-template-columns: 34px 1fr auto; }
.cw-win .sl { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 900 14px/1 system-ui; color: #2a1a04; background: linear-gradient(var(--c-amber-hi), var(--c-amber-lo)); }
.cw-win .nm b { display: block; font-size: 14px; } .cw-win.next { background: rgba(255,215,106,.07); box-shadow: inset 3px 0 0 var(--cw-gold); }
.cw-past { grid-template-columns: 28px 1fr auto; }
.cw-none { padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.05); color: var(--muted); font-size: 12.5px; line-height: 1.35; }

/* office */
.cw-pres { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: 14px;
  background: radial-gradient(circle at 14% 50%, rgba(255,215,106,.28), transparent 52%), linear-gradient(135deg, #3a2f1c, #1a1c1f); border: 2px solid var(--c-amber-lo); }
.cw-pres.vacant { background: linear-gradient(135deg, #2c333a, #1a1f24); border-color: #59636d; }
.cw-pres .medal { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 38px; background: #12161a; box-shadow: 0 0 0 3px var(--c-amber-lo), 0 0 18px rgba(255,215,106,.35); }
.cw-pres.vacant .medal { box-shadow: 0 0 0 3px #59636d; filter: grayscale(.6); }
.cw-pres small { font: 800 11px/1 system-ui; letter-spacing: .1em; color: #c9b98a; }
.cw-pres b { display: block; font: 900 21px/1.2 system-ui; color: var(--cw-gold); overflow-wrap: anywhere; } .cw-pres.vacant b { color: var(--c-text); }
.cw-pres p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.3; color: #d8dde2; } .cw-pres .fx { color: var(--c-good-hi); } .cw-pres .until { color: var(--muted); }
.cw-hint { padding: 9px 12px; border-radius: 12px; background: #1f2a22; border: 1px solid #3a5042; font-size: 13px; line-height: 1.35; }
.cw-hint.gold { background: #2a2410; border-color: var(--c-amber-lo); color: #ffe9b0; }
.cw-titles { display: grid; grid-template-columns: 1fr 1fr; }
.cw-title { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 0 8px; align-items: center; padding: 10px; border: 0; border-radius: 0; background: #1c2126; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset -1px 0 0 rgba(255,255,255,.05); color: #fff; text-align: left; min-width: 0; }
button.cw-title:active { background: #2a3036; }
.cw-title .ic { grid-row: span 2; font-size: 26px; text-align: center; }
.cw-title b { font: 800 14px/1.2 system-ui; } .cw-title .fx { font-size: 11.5px; color: var(--c-good-hi); line-height: 1.25; } .cw-title.debuff .fx { color: #ff8a6a; }
.cw-title .who { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; padding: 3px 8px; border-radius: 8px; background: #0f1215; font: 700 12px/1.3 system-ui; color: #aab4bd; min-width: 0; }
.cw-title .who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-title.held .who { color: var(--cw-gold); box-shadow: inset 0 0 0 1px #7a5a1a; } .cw-title.debuff.held .who { color: #ffb39a; box-shadow: inset 0 0 0 1px #7a2a1a; }
.cw-title .lock { flex: none; font: 800 10px/1.6 ui-monospace, Menlo, monospace; font-style: normal; color: #aab4bd; white-space: nowrap; }

/* sheets */
.cw-sheet-top { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 4px 0 8px; padding: 8px; border-radius: 12px; background: radial-gradient(ellipse at 30% 60%, #7d7446, #4a4630 75%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.cw-sheet-top small { display: block; font: 800 11px/1 system-ui; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.cw-sheet-top b { display: block; font: 900 17px/1.2 system-ui; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.6); overflow-wrap: anywhere; }
.cw-str { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.cw-why { margin-top: 8px; text-align: center; }
.cw-targets { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 5px; margin: 6px 0 8px; }
.cw-target { display: grid; justify-items: center; gap: 1px; padding: 6px 2px; border-radius: 10px; background: #12161a; border: 2px solid #343c43; min-width: 0; }
.cw-target b { font: 800 13px/1.15 system-ui; } .cw-target small { font: 800 11px/1.15 system-ui; }
.cw-target.on { border-color: var(--cw-gold); background: #2a2410; box-shadow: 0 0 10px rgba(255,215,106,.35); }
.cw-tinfo { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #12161a; font-size: 13px; }
.cw-tinfo .cw-str { margin-top: 2px; text-shadow: none; } .cw-tinfo small { color: var(--muted); }
.cw-caprow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; margin-top: 10px; font-size: 14px; }
.cw-caprow button { padding: 5px 12px; font-size: 13px; }
.cw-troop { display: grid; grid-template-columns: 118px 1fr 66px 44px; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cw-troop .nm { display: grid; min-width: 0; }
.cw-troop .nm b { font: 700 13px/1.25 system-ui; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cw-troop .nm small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.cw-troop input[type=number] { width: 100%; min-width: 0; padding: 7px 6px; text-align: right; font-weight: 700; font-size: 14px; }
.cw-troop .mx { height: 36px; padding: 0; font: 800 12px/1 system-ui; }
.cw-troop input[type=range] { width: 100%; min-width: 0; height: 36px; margin: 0; padding: 0; border: 0; background: none; accent-color: var(--c-amber); }
.cw-heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.cw-hero { position: relative; display: grid; justify-items: center; gap: 2px; padding: 3px 2px; border-radius: 10px; border: 2px solid #343c43; background: #12161a; min-width: 0; }
.cw-hero .pn-portrait { border-radius: 8px; } .cw-hero small { max-width: 100%; font-size: 10px; color: #c9d1d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-hero.on { border-color: var(--good); box-shadow: 0 0 10px rgba(94,196,107,.5); background: #16261a; }
.cw-hero.on::after { content: '✓'; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #06210b; font: 900 12px/1 system-ui; }
.cw-hero.busy { opacity: .4; filter: grayscale(1); }
.cw-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px 8px; align-items: center; margin-top: 12px; padding: 8px 10px; border-radius: 12px; background: #12161a; text-align: center; }
.cw-vs small { display: block; font-size: 11px; color: var(--muted); } .cw-vs b { font: 900 17px/1.2 system-ui; } .cw-vs .me b { color: #8fc4f5; } .cw-vs .them b { color: #f5a08a; }
.cw-vs i { font: italic 900 15px/1 system-ui; color: var(--cw-gold); }
.cw-vs em { grid-column: 1 / -1; padding: 3px 0; border-radius: 8px; font: 800 12px/1.3 system-ui; font-style: normal; background: #2a3036; color: var(--c-text); }
.cw-vs em.d-cake, .cw-vs em.d-good { background: #1f3a1c; color: var(--c-good-hi); } .cw-vs em.d-even { background: #3a3414; color: var(--c-amber-hi); } .cw-vs em.d-risky { background: #3a2614; color: #ffab5a; } .cw-vs em.d-deadly { background: #3a1f1a; color: #ff8a6a; }
.cw-go { min-height: 48px; font-size: 15px; }
.cw-found { display: grid; gap: 6px; margin-top: 8px; max-height: 240px; overflow-y: auto; }
.cw-cand { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 42px; text-align: left; }
.cw-cand small { color: var(--muted); font-size: 12px; }
.cw-confirm { font-size: 15px; line-height: 1.4; margin: 8px 0 4px; }
.cw-rules { margin: 4px 0 8px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.4; }

/* bottom tab slider */
.cw-tabs { position: sticky; bottom: 0; display: flex; gap: 2px; align-items: stretch; padding: 6px 6px calc(8px + var(--safe-bottom));
  background: linear-gradient(#332c29, #181a1d); border-top: 3px solid var(--cw-red); box-shadow: 0 -6px 14px rgba(0,0,0,.5); }
.cw-back { flex: 0 0 48px; height: 48px; align-self: center; padding: 0; border-radius: 50%; border: 0; font-size: 22px; color: #fff; background: radial-gradient(circle at 50% 35%, #6d5952, #2e2826); box-shadow: 0 0 0 2px var(--cw-red); }
.cw-tab { position: relative; flex: 1 0 56px; padding: 6px 2px; border: 0; border-radius: 10px 10px 4px 4px; background: none; display: grid; justify-items: center; gap: 2px; color: #fff; }
.cw-tab .ic { font-size: 26px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.cw-tab b { font: 900 12px/1.1 system-ui; text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.cw-tab.on { background: linear-gradient(var(--c-amber-hi), #e3a03a); box-shadow: 0 -2px 0 #fff3c8 inset; }
.cw-tab .hud-bdg { top: 2px; right: 6px; }
html.land .cw-board { max-width: 520px; margin: 0 auto; width: 100%; }