/* Live-war pieces shared by the War Room (.war-v3) and the CWL War Room (.cwl-v3):
   the "In war + time left" row, the data-age line, the can-we-still-win strip,
   the race-bar ceiling marks, the CWL group line, and the phone-only "Still to
   attack" list with the folded replay. Colours come from each room's own vars. */

/* ---- status row under the big score ---- */
:is(.war-v3, .cwl-v3) .livestatus { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
:is(.war-v3, .cwl-v3) .livestatus .resultpill { margin-top:0; }
.cwl-v3 .resultpill { display:inline-flex; align-items:center; gap:7px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.04em; padding:5px 14px; border-radius:999px; }
.cwl-v3 .rp-win { background:var(--green-tint); color:var(--green-deep); border:1px solid var(--green-bd); }
.cwl-v3 .rp-live { background:var(--accent-tint); color:var(--accent-deep); border:1px solid var(--accent-tint-2); }
/* "Battle day over": neither won nor live. */
:is(.war-v3, .cwl-v3) .resultpill:not(.rp-win):not(.rp-live) { background:var(--bg); color:var(--ink-2); border:1px solid var(--border); }
:is(.war-v3, .cwl-v3) .livedot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:wl-pulse 1.6s infinite; }
@keyframes wl-pulse { 0% { box-shadow:0 0 0 0 rgba(255,82,71,.55); } 70% { box-shadow:0 0 0 9px rgba(255,82,71,0); } 100% { box-shadow:0 0 0 0 rgba(255,82,71,0); } }
:is(.war-v3, .cwl-v3) .warleft { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:var(--accent-deep); white-space:nowrap; }
:is(.war-v3, .cwl-v3) .warleft.is-over { font-size:13px; color:var(--amber-deep,#B45309); font-weight:600; white-space:normal; }
:is(.war-v3, .cwl-v3) .warfresh { display:flex; justify-content:center; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); margin-top:7px; flex-wrap:wrap; text-align:center; }
:is(.war-v3, .cwl-v3) .warfresh:empty { display:none; }
:is(.war-v3, .cwl-v3) .warfresh .ok { width:7px; height:7px; border-radius:50%; background:var(--green); flex:none; }
:is(.war-v3, .cwl-v3) .warfresh .ok.is-stale { background:var(--amber,#F59E0B); }
:is(.war-v3, .cwl-v3) .warfresh b { color:var(--ink-2); font-family:'Space Grotesk',sans-serif; }

/* ---- the most each side can still reach, marked on the race bars ---- */
:is(.war-v3, .cwl-v3) .racebar .reach { position:absolute; top:0; bottom:0; border-right:2px dashed rgba(23,21,32,.28); pointer-events:none; }
[data-theme-mode="dark"] :is(.war-v3, .cwl-v3) .racebar .reach { border-right-color:rgba(255,255,255,.35); }

/* ---- can we still win ---- */
:is(.war-v3, .cwl-v3) .outcome { margin:0 28px 16px; border-radius:12px; background:var(--bg); border:1px solid var(--border); display:grid; grid-template-columns:auto repeat(3, minmax(0, 1fr)); overflow:hidden; }
:is(.war-v3, .cwl-v3) .oc-state { display:flex; flex-direction:column; justify-content:center; gap:4px; padding:12px 18px; border-right:1px solid var(--border); min-width:180px; }
:is(.war-v3, .cwl-v3) .oc-chip { display:inline-flex; align-items:center; gap:6px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; padding:4px 12px; border-radius:999px; width:max-content; }
:is(.war-v3, .cwl-v3) .oc-chip.open { background:var(--amber-tint,#FEF3E2); color:var(--amber-deep,#B45309); }
:is(.war-v3, .cwl-v3) .oc-chip.won { background:var(--green-tint); color:var(--green-deep); }
:is(.war-v3, .cwl-v3) .oc-chip.lost { background:#FDECEC; color:#B42318; }
[data-theme-mode="dark"] :is(.war-v3, .cwl-v3) .oc-chip.lost { background:rgba(239,68,68,.16); color:#fca5a5; }
:is(.war-v3, .cwl-v3) .oc-sub { font-size:11.5px; color:var(--muted); }
:is(.war-v3, .cwl-v3) .oc-cell { padding:12px 18px; border-right:1px solid var(--border); min-width:0; }
:is(.war-v3, .cwl-v3) .oc-cell:last-child { border-right:0; }
:is(.war-v3, .cwl-v3) .oc-k { font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
:is(.war-v3, .cwl-v3) .oc-v { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; margin-top:2px; color:var(--ink); }
:is(.war-v3, .cwl-v3) .oc-v.them { color:var(--enemy); }
:is(.war-v3, .cwl-v3) .oc-v small { font-size:13px; color:var(--muted); font-weight:600; }
:is(.war-v3, .cwl-v3) .oc-s { font-size:11.5px; color:var(--faint); margin-top:1px; }
@media (max-width:1100px) {
    :is(.war-v3, .cwl-v3) .outcome { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    :is(.war-v3, .cwl-v3) .oc-state { grid-column:1 / -1; border-right:0; border-bottom:1px solid var(--border); min-width:0; flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; }
    :is(.war-v3, .cwl-v3) .oc-cell.oc-need { grid-column:1 / -1; border-right:0; border-bottom:1px solid var(--border); }
    :is(.war-v3, .cwl-v3) .oc-cell { padding:10px 14px; }
    :is(.war-v3, .cwl-v3) .oc-v { font-size:19px; }
}
@media (max-width:760px) { :is(.war-v3, .cwl-v3) .outcome { margin:0 14px 14px; } }

/* ---- CWL group line ---- */
.cwl-v3 .groupline { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; padding:14px 20px 0; font-size:13px; }
.cwl-v3 .gl-pill { display:inline-flex; gap:6px; align-items:center; padding:5px 12px; border-radius:999px; background:var(--bg); border:1px solid var(--border); font-weight:600; color:var(--ink-2); white-space:nowrap; }
.cwl-v3 .gl-pill b { font-family:'Space Grotesk',sans-serif; color:var(--ink); }
.cwl-v3 .gl-pill.up b { color:#B42318; }
.cwl-v3 .gl-pill.down b { color:var(--green-deep); }
[data-theme-mode="dark"] .cwl-v3 .gl-pill.up b { color:#fca5a5; }

/* ---- phone: still to attack + folded replay ---- */
:is(.war-v3, .cwl-v3) .todo-phone { display:none; }
:is(.war-v3, .cwl-v3) .replaybtn { display:none; }
@media (max-width:760px) {
    :is(.war-v3, .cwl-v3) .todo-phone { display:block; margin-top:12px; }
    :is(.war-v3, .cwl-v3) .todo-phone:empty { display:none; }
    :is(.war-v3, .cwl-v3) .replayfold { display:none; }
    :is(.war-v3, .cwl-v3) .replayfold.open { display:block; }
    :is(.war-v3, .cwl-v3) .replaybtn { display:flex; justify-content:space-between; align-items:center; gap:8px; width:calc(100% - 28px); margin:0 14px 14px; border:1px solid var(--border); background:var(--card); border-radius:12px; padding:11px 14px; font-weight:700; font-size:13px; color:var(--ink-2); }
    :is(.war-v3, .cwl-v3) .replaybtn .chev { transition:transform .15s; color:var(--muted); }
    :is(.war-v3, .cwl-v3) .replaybtn[aria-expanded="true"] .chev { transform:rotate(180deg); }
}
:is(.war-v3, .cwl-v3) .todo { padding:12px 14px 8px; }
:is(.war-v3, .cwl-v3) .todo-h { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px; }
:is(.war-v3, .cwl-v3) .todo-h b { font-family:'Space Grotesk',sans-serif; font-size:15px; color:var(--ink); }
:is(.war-v3, .cwl-v3) .todo-h span { font-size:11.5px; color:var(--muted); }
:is(.war-v3, .cwl-v3) .trow { display:grid; grid-template-columns:30px minmax(0, 1fr) auto; gap:8px; align-items:center; padding:8px 0; border-top:1px solid var(--border-2); font-size:13px; }
:is(.war-v3, .cwl-v3) .trow:first-of-type { border-top:0; }
:is(.war-v3, .cwl-v3) .tpos { font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--muted); }
:is(.war-v3, .cwl-v3) .tname { font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:is(.war-v3, .cwl-v3) .tname .thchip { margin-left:4px; vertical-align:1px; }
:is(.war-v3, .cwl-v3) .tsub { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:is(.war-v3, .cwl-v3) .tsub b { color:var(--ink-2); }
:is(.war-v3, .cwl-v3) .tpips { display:inline-flex; gap:3px; }
:is(.war-v3, .cwl-v3) .tpips i { width:8px; height:8px; border-radius:50%; background:var(--accent); }
:is(.war-v3, .cwl-v3) .tpips i.used { background:var(--border); }
:is(.war-v3, .cwl-v3) .todo-more { width:100%; margin:6px 0 2px; border:1px solid var(--border); background:var(--bg); border-radius:10px; padding:8px; font-weight:700; font-size:12.5px; color:var(--ink-2); }
:is(.war-v3, .cwl-v3) .todo-done { padding:6px 0 4px; font-size:13px; color:var(--green-deep); font-weight:600; }

/* ---- War map · Battlefield view (war-battlefield.js) ---- */
:is(.war-v3, .cwl-v3) .bf-field { position:relative; width:100%; border-radius:16px; overflow:hidden; background:#1B191C; border:1px solid #2A2124; }
:is(.war-v3, .cwl-v3) .bf-bg { position:absolute; inset:0; z-index:0; background-size:100% 100%; background-repeat:no-repeat; }
:is(.war-v3, .cwl-v3) .bf-flow { position:absolute; left:0; top:0; z-index:1; pointer-events:none; }
/* smoke drifting across the field */
:is(.war-v3, .cwl-v3) .bf-haze { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
:is(.war-v3, .cwl-v3) .bf-haze i { position:absolute; left:-30%; width:160%; height:40%; border-radius:50%; background:radial-gradient(ellipse at center, rgba(120,110,105,.16) 0, rgba(120,110,105,0) 65%); animation:bf-drift 38s ease-in-out infinite alternate; }
:is(.war-v3, .cwl-v3) .bf-haze i:nth-child(1) { top:8%; }
:is(.war-v3, .cwl-v3) .bf-haze i:nth-child(2) { top:52%; animation-duration:52s; animation-direction:alternate-reverse; background:radial-gradient(ellipse at center, rgba(160,80,50,.12) 0, rgba(160,80,50,0) 65%); }
@keyframes bf-drift { 0% { transform:translateX(-8%); } 100% { transform:translateX(8%); } }
:is(.war-v3, .cwl-v3) .bf-side { position:absolute; top:12px; z-index:4; font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; padding:4px 12px; border-radius:8px; box-shadow:0 3px 10px rgba(0,0,0,.4); max-width:40%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:is(.war-v3, .cwl-v3) .bf-side.us { left:14px; background:linear-gradient(135deg,#2F5D9E,#1D3A66); border:1px solid rgba(140,180,255,.35); }
:is(.war-v3, .cwl-v3) .bf-side.them { right:14px; text-align:right; background:linear-gradient(135deg,#B3341A,#6E1A0C); border:1px solid rgba(255,160,120,.35); }
:is(.war-v3, .cwl-v3) .bf-v { position:absolute; z-index:3; width:150px; transform:translate(-50%,0); text-align:center; cursor:pointer; background:none; border:0; padding:0; color:inherit; transition:transform .12s, opacity .25s; display:flex; flex-direction:column; align-items:center; }
:is(.war-v3, .cwl-v3) .bf-v:hover { transform:translate(-50%,-3px); }
:is(.war-v3, .cwl-v3) .bf-v:focus-visible { outline:2px solid #fff; outline-offset:2px; border-radius:12px; }
:is(.war-v3, .cwl-v3) .bf-stars { display:flex; justify-content:center; gap:1px; height:26px; align-items:flex-end; }
:is(.war-v3, .cwl-v3) .bf-stars i { font-style:normal; font-size:22px; line-height:1; color:rgba(30,30,30,.35); }
:is(.war-v3, .cwl-v3) .bf-stars i.on { color:#FFC21A; text-shadow:0 2px 0 #B37E00, 0 0 8px rgba(255,205,40,.75); }
:is(.war-v3, .cwl-v3) .bf-stars i:nth-child(2) { transform:translateY(-6px); font-size:26px; }
:is(.war-v3, .cwl-v3) .bf-v { --pw:118px; --ph:84px; --dh:56px; --img:76px; }
:is(.war-v3, .cwl-v3) .bf-island { position:relative; display:block; width:var(--pw); height:var(--ph); }
:is(.war-v3, .cwl-v3) .bf-dirt { position:absolute; left:4px; right:4px; bottom:0; height:var(--dh); border-radius:50%; background:radial-gradient(ellipse at 50% 35%, #5C5754 0, #3B3634 55%, #231F1E 100%); box-shadow:0 7px 0 rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.08); }
:is(.war-v3, .cwl-v3) .bf-v[data-bf-side="us"] .bf-dirt { box-shadow:0 7px 0 rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.08), 0 0 0 2px rgba(110,160,240,.35); }
:is(.war-v3, .cwl-v3) .bf-v[data-bf-side="them"] .bf-dirt { box-shadow:0 7px 0 rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.08), 0 0 0 2px rgba(240,110,70,.38); }
:is(.war-v3, .cwl-v3) .bf-wall { position:absolute; left:12%; right:12%; bottom:calc(var(--dh) * .14); height:calc(var(--dh) * .72); border-radius:50%; border:3px dashed #8A8F99; opacity:.85; }
:is(.war-v3, .cwl-v3) .bf-island img, :is(.war-v3, .cwl-v3) .bf-th { position:absolute; left:50%; bottom:calc(var(--dh) * .25); transform:translateX(-50%); width:var(--img); height:var(--img); object-fit:contain; filter:drop-shadow(0 4px 0 rgba(0,0,0,.28)); }
:is(.war-v3, .cwl-v3) .bf-th { width:auto; height:auto; bottom:24px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color:#fff; background:#5B4B3A; border-radius:8px; padding:6px 9px; }
:is(.war-v3, .cwl-v3) .bf-pos { position:absolute; left:0; top:10px; z-index:2; background:#1E2B42; color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px; border-radius:7px; padding:1px 7px; box-shadow:0 2px 0 rgba(0,0,0,.35); }
:is(.war-v3, .cwl-v3) .bf-used { position:absolute; right:0; top:10px; z-index:2; background:#B9770E; color:#fff; font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700; border-radius:7px; padding:1px 6px; box-shadow:0 2px 0 rgba(0,0,0,.35); white-space:nowrap; }
:is(.war-v3, .cwl-v3) .bf-used.done { background:#0E9466; }
:is(.war-v3, .cwl-v3) .bf-used.none { background:rgba(60,64,72,.92); }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-used { font-size:9.5px; top:6px; padding:0 4px; }
:is(.war-v3, .cwl-v3) .bf-pct { position:absolute; right:0; top:12px; z-index:2; background:rgba(255,255,255,.95); color:#171520; font-size:10.5px; font-weight:800; border-radius:6px; padding:1px 5px; box-shadow:0 1px 0 rgba(0,0,0,.2); }
/* every attack on a village: beside it on the outer side, straight on the map */
:is(.war-v3, .cwl-v3) .bf-hit { position:absolute; top:calc(26px + var(--ph) * .5); transform:translateY(-50%); display:flex; flex-direction:column; gap:1px; color:#fff; font-size:10.5px; font-weight:700; line-height:1.25; white-space:nowrap; pointer-events:none; text-shadow:0 0 2px #000, 0 0 2px #000, 0 0 4px #000, 0 1px 2px rgba(0,0,0,.9); }
:is(.war-v3, .cwl-v3) .bf-v[data-bf-side="us"] .bf-hit { right:calc(50% + var(--pw) / 2 + 2px); align-items:flex-end; }
:is(.war-v3, .cwl-v3) .bf-v[data-bf-side="them"] .bf-hit { left:calc(50% + var(--pw) / 2 + 2px); align-items:flex-start; }
:is(.war-v3, .cwl-v3) .bf-hit-row { display:flex; align-items:center; gap:4px; opacity:.92; }
:is(.war-v3, .cwl-v3) .bf-hit-row.best { font-size:12px; font-weight:800; opacity:1; }
:is(.war-v3, .cwl-v3) .bf-hit-by { max-width:110px; overflow:hidden; text-overflow:ellipsis; }
:is(.war-v3, .cwl-v3) .bf-hit-st { line-height:1; letter-spacing:-1px; }
:is(.war-v3, .cwl-v3) .bf-hit-st i { font-style:normal; color:rgba(255,255,255,.45); }
:is(.war-v3, .cwl-v3) .bf-hit-st i.on { color:#FFC21A; }
:is(.war-v3, .cwl-v3) .bf-hit-row.best .bf-hit-p { color:#FFD27A; }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-hit { color:#1E1A18; text-shadow:0 0 2px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 6px rgba(255,255,255,.9); }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-hit-st i { color:rgba(0,0,0,.28); }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-hit-st i.on { color:#E8A400; }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-hit-row.best .bf-hit-p { color:#B4530A; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-hit { position:static; transform:none; align-items:center !important; margin-top:2px; font-size:9px; max-width:108px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-hit-row.best { font-size:10px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-hit-by { max-width:54px; }
:is(.war-v3, .cwl-v3) .bf-hit-more { display:none; opacity:.75; font-size:9px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-hit-row.best { order:-1; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-hit-row.more { display:none; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-hit-more { display:block; }
:is(.war-v3, .cwl-v3) .bf-name { display:inline-block; max-width:146px; margin-top:3px; background:rgba(12,11,13,.88); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:11.5px; font-weight:700; border-radius:8px; padding:2px 9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 2px 0 rgba(0,0,0,.25); }
/* cleared (3★): a ruined village */
:is(.war-v3, .cwl-v3) .bf-v.s3 .bf-island img { filter:grayscale(.85) brightness(.55) contrast(1.1) drop-shadow(0 4px 0 rgba(0,0,0,.28)); }
:is(.war-v3, .cwl-v3) .bf-v.s3 .bf-dirt { background:radial-gradient(ellipse at 50% 38%, #2C2522 0, #1E1A19 60%, #120F0E 100%); box-shadow:0 7px 0 rgba(0,0,0,.6), 0 0 22px 6px rgba(255,80,20,.45) !important; }
:is(.war-v3, .cwl-v3) .bf-v.s3 .bf-wall { border-color:#5E6168; opacity:.55; }
:is(.war-v3, .cwl-v3) .bf-smoke { position:absolute; left:50%; bottom:calc(var(--dh) * .8); width:60%; height:55%; transform:translateX(-50%); pointer-events:none; }
:is(.war-v3, .cwl-v3) .bf-smoke span { position:absolute; border-radius:50%; background:rgba(70,70,70,.5); animation:bf-puff 3.6s ease-in-out infinite; }
:is(.war-v3, .cwl-v3) .bf-smoke span:nth-child(1) { left:6px; bottom:0; width:22px; height:22px; }
:is(.war-v3, .cwl-v3) .bf-smoke span:nth-child(2) { left:24px; bottom:10px; width:28px; height:28px; animation-delay:.9s; }
:is(.war-v3, .cwl-v3) .bf-smoke span:nth-child(3) { left:42px; bottom:2px; width:20px; height:20px; animation-delay:1.7s; }
@keyframes bf-puff { 0% { transform:translateY(4px) scale(.85); opacity:0; } 25% { opacity:.75; } 100% { transform:translateY(-16px) scale(1.25); opacity:0; } }
:is(.war-v3, .cwl-v3) .bf-flag { position:absolute; right:16px; bottom:20px; font-size:18px; z-index:2; filter:drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
/* flames on a hit village: two big ones on a ruin, one small on a damaged village */
:is(.war-v3, .cwl-v3) .bf-fire { position:absolute; z-index:2; line-height:1; pointer-events:none; transform-origin:50% 100%; animation:bf-flicker 1.1s ease-in-out infinite alternate; filter:drop-shadow(0 0 6px rgba(255,120,30,.8)); }
:is(.war-v3, .cwl-v3) .bf-fire.f1 { left:15%; bottom:40%; font-size:calc(var(--img) * .29); }
:is(.war-v3, .cwl-v3) .bf-fire.f2 { right:22%; bottom:52%; font-size:calc(var(--img) * .24); animation-delay:.4s; }
:is(.war-v3, .cwl-v3) .bf-fire.f3 { right:20%; bottom:48%; font-size:calc(var(--img) * .2); }
@keyframes bf-flicker { 0% { transform:scale(1) rotate(-3deg); opacity:1; } 100% { transform:scale(1.12,.92) rotate(3deg); opacity:.85; } }
:is(.war-v3, .cwl-v3) .bf-smoke.light span { background:rgba(60,60,60,.35); }
/* embers drifting up */
:is(.war-v3, .cwl-v3) .bf-embers { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
:is(.war-v3, .cwl-v3) .bf-embers i { position:absolute; width:4px; height:4px; border-radius:50%; background:#FFB347; box-shadow:0 0 6px 2px rgba(255,120,30,.7); opacity:0; animation:bf-ember 6s linear infinite; }
@keyframes bf-ember { 0% { transform:translate(0,0); opacity:0; } 15% { opacity:.9; } 100% { transform:translate(18px,-160px); opacity:0; } }

/* your village / your target */
/* your own villages ring green, the villages you're planned to attack ring red */
:is(.war-v3, .cwl-v3) .bf-v.me[data-bf-side="us"] { --ring:#16B981; --ring-glow:rgba(22,185,129,.55); }
:is(.war-v3, .cwl-v3) .bf-v.me[data-bf-side="them"] { --ring:#F0344F; --ring-glow:rgba(240,52,79,.55); }
:is(.war-v3, .cwl-v3) .bf-v.me .bf-name { background:var(--ring); border-color:transparent; }
:is(.war-v3, .cwl-v3) .bf-v.me .bf-wall { display:none; }
:is(.war-v3, .cwl-v3) .bf-v.me .bf-dirt::after { content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 2px var(--ring), 0 0 18px 5px var(--ring-glow); animation:bf-ring 1.8s ease-in-out infinite; pointer-events:none; }
@keyframes bf-ring { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:.6; transform:scale(1.05); } }
:is(.war-v3, .cwl-v3) .bf-v.dim { opacity:.2; }
@media (prefers-reduced-motion:reduce) { :is(.war-v3, .cwl-v3) .bf-smoke span, :is(.war-v3, .cwl-v3) .bf-v.me .bf-dirt::after, :is(.war-v3, .cwl-v3) .bf-fire { animation:none; } :is(.war-v3, .cwl-v3) .bf-embers { display:none; } :is(.war-v3, .cwl-v3) .bf-haze i { animation:none; } }
/* tap card */
:is(.war-v3, .cwl-v3) .bf-card { position:absolute; z-index:6; background:var(--card,#fff); color:var(--ink); border-radius:14px; box-shadow:0 14px 30px rgba(0,0,0,.3); padding:12px 14px; font-size:12.5px; display:none; overflow-y:auto; overscroll-behavior:contain; }
:is(.war-v3, .cwl-v3) .bf-card.on { display:block; }
:is(.war-v3, .cwl-v3) .bf-card h4 { margin:0 0 6px; font-family:'Space Grotesk',sans-serif; font-size:15px; padding-right:18px; }
:is(.war-v3, .cwl-v3) .bf-ln { display:flex; justify-content:space-between; gap:8px; padding:5px 0; border-top:1px solid var(--border-2); }
:is(.war-v3, .cwl-v3) .bf-ln:first-of-type { border-top:0; }
:is(.war-v3, .cwl-v3) .bf-cs { color:#E8A400; letter-spacing:-1px; }
:is(.war-v3, .cwl-v3) .bf-x { position:sticky; top:0; float:right; z-index:1; margin:-4px -6px 0 4px; width:28px; height:28px; border:0; border-radius:50%; background:var(--card,#fff); font-size:16px; color:var(--muted); }
/* phone-sized field */
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-v { width:100px; --pw:84px; --ph:62px; --dh:40px; --img:54px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-pos { font-size:11px; padding:0 5px; top:6px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-pct { font-size:9.5px; padding:0 4px; top:8px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-flag { font-size:14px; right:10px; bottom:12px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-wall { border-width:2px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-stars { height:20px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-stars i { font-size:16px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-stars i:nth-child(2) { font-size:19px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-name { font-size:10px; max-width:100px; padding:1px 6px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-side { font-size:11px; }
/* Battlefield in the light theme: pale ash and limestone, light stone plates,
   softer smoke. (The dark look above is the default; the script adds is-light.) */
:is(.war-v3, .cwl-v3) .bf-field.is-light { background:#E7E2DA; border-color:#D6CFC5; }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-haze i { background:radial-gradient(ellipse at center, rgba(90,80,75,.10) 0, rgba(90,80,75,0) 65%); }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-haze i:nth-child(2) { background:radial-gradient(ellipse at center, rgba(200,90,50,.10) 0, rgba(200,90,50,0) 65%); }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-dirt { background:radial-gradient(ellipse at 50% 35%, #FBF9F6 0, #DDD6CD 55%, #B7AEA4 100%); box-shadow:0 7px 0 rgba(60,45,35,.28), inset 0 2px 0 rgba(255,255,255,.7); }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-v[data-bf-side="us"] .bf-dirt { box-shadow:0 7px 0 rgba(60,45,35,.28), inset 0 2px 0 rgba(255,255,255,.7), 0 0 0 2px rgba(70,120,200,.55); }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-v[data-bf-side="them"] .bf-dirt { box-shadow:0 7px 0 rgba(60,45,35,.28), inset 0 2px 0 rgba(255,255,255,.7), 0 0 0 2px rgba(210,80,50,.55); }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-v.s3 .bf-dirt { background:radial-gradient(ellipse at 50% 38%, #4A403B 0, #2F2826 60%, #1E1918 100%); }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-stars i { color:rgba(60,50,45,.32); }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-stars i.on { color:#FFC21A; }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-embers i { opacity:0; animation-name:bf-ember-light; }
@keyframes bf-ember-light { 0% { transform:translate(0,0); opacity:0; } 15% { opacity:.55; } 100% { transform:translate(18px,-160px); opacity:0; } }

/* ===== Battle plan access: view-only members, claims ===== */
:is(.war-v3, .cwl-v3) .viewonly { display:flex; align-items:flex-start; gap:8px; margin:0 0 12px; padding:10px 13px; border-radius:11px; background:var(--accent-tint); color:var(--ink-2, var(--ink)); border:1px solid var(--accent-tint-2, var(--line)); font-size:13px; line-height:1.45; }
:is(.war-v3, .cwl-v3) .claimbtn { font-size:12px; font-weight:700; font-family:'Space Grotesk'; padding:6px 11px; border-radius:9px; border:1px dashed var(--green-deep); background:var(--green-tint); color:var(--green-deep); cursor:pointer; white-space:nowrap; }
:is(.war-v3, .cwl-v3) .claimbtn:hover { background:var(--green-deep); color:#fff; border-style:solid; }
:is(.war-v3, .cwl-v3) .assigned.ro { cursor:default; }
.pa-pop { position:absolute; z-index:1080; padding:14px 15px 10px; border-radius:14px; background:var(--tblr-bg-surface, #fff); color:var(--tblr-body-color, #1d2433); border:1px solid var(--tblr-border-color, #e3e6ee); box-shadow:0 18px 40px rgba(16,24,40,.18); font-size:13px; }
.pa-pop .pa-h { font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:14.5px; }
.pa-pop .pa-note { color:var(--tblr-secondary, #6b7280); margin:2px 0 8px; }
.pa-pop .pa-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--tblr-border-color, #eef0f4); cursor:pointer; margin:0; }
.pa-pop .pa-row b { display:block; font-weight:700; }
.pa-pop .pa-row small { display:block; color:var(--tblr-secondary, #6b7280); font-size:12px; line-height:1.35; }
.pa-pop .pa-row input { width:36px; height:20px; flex:none; accent-color:#16B981; cursor:pointer; }
.pa-pop .pa-msg { min-height:16px; font-size:12px; color:var(--tblr-secondary, #6b7280); padding-top:4px; }
:is(.war-v3, .cwl-v3) .plantools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
:is(.war-v3, .cwl-v3) .planaccess { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:7px 11px; border-radius:9px; border:1px solid var(--border, var(--line)); background:var(--card); color:var(--ink-2, var(--ink)); cursor:pointer; }
:is(.war-v3, .cwl-v3) .planaccess:hover { border-color:var(--accent); color:var(--accent-deep); }
.pd-wrap { position:fixed; inset:0; z-index:1090; background:rgba(10,14,24,.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.pd { width:100%; max-width:440px; border-radius:16px; padding:18px 18px 12px; background:var(--tblr-bg-surface, #fff); color:var(--tblr-body-color, #1d2433); box-shadow:0 24px 60px rgba(0,0,0,.3); font-size:13.5px; }
.pd h3 { font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:17px; margin:0 0 6px; }
.pd p { margin:0 0 12px; color:var(--tblr-secondary, #4b5563); line-height:1.5; }
.pd-opts { display:flex; flex-direction:column; gap:8px; }
.pd-opt { text-align:left; padding:10px 13px; border-radius:11px; border:1px solid var(--tblr-border-color, #e3e6ee); background:transparent; color:inherit; cursor:pointer; }
.pd-opt b { display:block; font-weight:700; }
.pd-opt span { display:block; font-size:12px; color:var(--tblr-secondary, #6b7280); margin-top:2px; line-height:1.4; }
.pd-opt:hover, .pd-opt:focus-visible { border-color:#16B981; outline:none; }
.pd-opt.primary { border-color:#16B981; background:rgba(22,185,129,.08); }
.pd-foot { display:flex; justify-content:flex-end; padding-top:10px; }
.pd-cancel { border:0; background:none; color:var(--tblr-secondary, #6b7280); font-weight:600; padding:6px 10px; cursor:pointer; }

/* ===== Battlefield · plan mode ===== */
:is(.war-v3, .cwl-v3) .bf-links { position:absolute; left:0; top:0; z-index:2; pointer-events:none; overflow:visible; }
:is(.war-v3, .cwl-v3) .bf-links .ln { fill:none; stroke:#7FB2FF; stroke-width:3; opacity:.95; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.6)); }
:is(.war-v3, .cwl-v3) .bf-links .ln.bk { stroke-width:2.4; stroke-dasharray:7 5; }
:is(.war-v3, .cwl-v3) .bf-links .ln.over { stroke:#FF5A5F; }
:is(.war-v3, .cwl-v3) .bf-links .hd { fill:#7FB2FF; } :is(.war-v3, .cwl-v3) .bf-links .hd.over { fill:#FF5A5F; }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-links .ln { stroke:#2F6FDB; filter:drop-shadow(0 1px 1px rgba(255,255,255,.7)); }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-links .hd { fill:#2F6FDB; }
:is(.war-v3, .cwl-v3) .bf-field.is-light .bf-links .ln.over { stroke:#D92D3A; } :is(.war-v3, .cwl-v3) .bf-field.is-light .bf-links .hd.over { fill:#D92D3A; }
:is(.war-v3, .cwl-v3) .bf-v.needs .bf-dirt::before { content:""; position:absolute; inset:-7px; border-radius:50%; border:2px dashed #FFD27A; animation:bf-needs 1.4s ease-in-out infinite; pointer-events:none; }
@keyframes bf-needs { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(1.07); } }
:is(.war-v3, .cwl-v3) .bf-needs { position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); z-index:2; white-space:nowrap; background:#FFD27A; color:#3A2A00; font-size:9.5px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; border-radius:6px; padding:1px 6px; box-shadow:0 2px 0 rgba(0,0,0,.3); }
:is(.war-v3, .cwl-v3) .bf-badge { position:absolute; right:2px; bottom:4px; z-index:2; font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700; border-radius:7px; padding:1px 6px; color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.35); }
:is(.war-v3, .cwl-v3) .bf-badge.free { background:#16B981; } :is(.war-v3, .cwl-v3) .bf-badge.ok { background:#3B6FD8; } :is(.war-v3, .cwl-v3) .bf-badge.over { background:#E5484D; }
:is(.war-v3, .cwl-v3) .bf-v.sel .bf-island { outline:2px solid rgba(255,255,255,.85); outline-offset:3px; border-radius:50%; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-needs { font-size:8px; padding:0 4px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-badge { font-size:9.5px; bottom:2px; padding:0 4px; }
/* the plan part of a village's card */
:is(.war-v3, .cwl-v3) .bfp-sec { border-top:1px solid var(--border-2); margin-top:6px; padding-top:8px; }
:is(.war-v3, .cwl-v3) .bfp-lbl { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:5px; }
:is(.war-v3, .cwl-v3) .bfp-cur { display:flex; flex-wrap:wrap; gap:6px; }
:is(.war-v3, .cwl-v3) .bfp-cur span { display:inline-flex; align-items:center; gap:5px; background:var(--green-tint); color:var(--green-deep); border:1px solid var(--green-bd); border-radius:8px; padding:3px 8px; font-weight:700; font-size:12px; }
:is(.war-v3, .cwl-v3) .bfp-cur span.bk { background:var(--accent-tint); color:var(--accent-deep); border-color:var(--accent-tint-2); }
:is(.war-v3, .cwl-v3) .bfp-cur span.over { border-color:#E5484D; }
:is(.war-v3, .cwl-v3) .bfp-cur button { border:0; background:none; color:inherit; opacity:.65; padding:0 0 0 2px; font-weight:800; cursor:pointer; }
:is(.war-v3, .cwl-v3) .bfp-roles { display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden; margin-bottom:6px; }
:is(.war-v3, .cwl-v3) .bfp-roles button { border:0; background:none; padding:5px 11px; font-size:12px; font-weight:700; color:var(--muted); cursor:pointer; }
:is(.war-v3, .cwl-v3) .bfp-roles button.on { background:var(--accent); color:#fff; }
:is(.war-v3, .cwl-v3) .bfp-row { display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:0; border-top:1px solid var(--border-2); background:none; color:inherit; padding:7px 2px; cursor:pointer; }
:is(.war-v3, .cwl-v3) .bfp-row:hover { background:var(--accent-tint); }
:is(.war-v3, .cwl-v3) .bfp-row .rp { flex:none; min-width:26px; font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--muted); }
:is(.war-v3, .cwl-v3) .bfp-row .rn { font-weight:700; font-size:12.5px; }
:is(.war-v3, .cwl-v3) .bfp-row .rm { font-size:11.5px; color:var(--muted); }
:is(.war-v3, .cwl-v3) .bfp-row .rk { margin-left:auto; flex:none; font-size:11.5px; font-weight:700; color:var(--accent-deep); }
:is(.war-v3, .cwl-v3) .bfp-tag { display:inline-block; margin-left:5px; font-size:9.5px; font-weight:800; text-transform:uppercase; border-radius:5px; padding:0 5px; vertical-align:1px; }
:is(.war-v3, .cwl-v3) .bfp-tag.mirror { background:var(--accent-tint); color:var(--accent-deep); }
:is(.war-v3, .cwl-v3) .bfp-tag.busy { background:#FDECEC; color:#B42318; }
:is(.war-v3, .cwl-v3) .bfp-claim { width:100%; margin-top:4px; }
:is(.war-v3, .cwl-v3) .bfp-note { color:var(--muted); font-size:12px; }
:is(.war-v3, .cwl-v3) .bf-field.is-phone .bf-card.plan { position:fixed; left:0 !important; right:0; bottom:0; top:auto !important; width:auto !important; max-height:72vh; overflow:auto; border-radius:18px 18px 0 0; z-index:2000; padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
/* stats above the field in plan mode */
:is(.war-v3, .cwl-v3) .bf-planbar { display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 10px; font-size:12.5px; color:var(--ink-2, var(--ink)); }
:is(.war-v3, .cwl-v3) .bf-planbar .pst { display:inline-flex; align-items:center; gap:6px; }
:is(.war-v3, .cwl-v3) .bf-planbar .pst i { width:9px; height:9px; border-radius:50%; display:inline-block; }
:is(.war-v3, .cwl-v3) .bf-planbar .pst b { font-family:'Space Grotesk',sans-serif; }
:is(.war-v3, .cwl-v3) .bf-plantoggle.on { background:var(--accent); color:#fff; border-color:var(--accent); }
:is(.war-v3, .cwl-v3) .bfp-more { display:block; width:100%; margin-top:4px; padding:7px; border:0; border-top:1px solid var(--border-2); background:none; color:var(--accent-deep); font-weight:700; font-size:12.5px; cursor:pointer; }
:is(.war-v3, .cwl-v3) .bfp-more:hover { background:var(--accent-tint); }