/* Clash Scope — War Room V3. Ported from the reference, scoped to .war-v3 so
   the brand vars don't leak into the rest of the app. Dark-mode aware via the
   app theme tokens. */
.war-v3 {
    /* Follow the app theme accent (per data-theme-accent / -mode); brand coral
       is just the fallback when the tokens aren't present. */
    --accent:var(--app-accent,#FF5247); --accent-deep:var(--app-accent-deep,#F0344F); --accent-2:var(--app-accent,#FF8A3D);
    --grad:linear-gradient(135deg,var(--accent-2) 0%,var(--accent) 46%,var(--accent-deep) 100%);
    --accent-tint:var(--app-accent-soft,#FFF1EA); --accent-tint-2:var(--app-accent-soft,#FFE1D7);
    /* Surfaces + ink follow the app theme (light & dark) so the war room
       matches the rest of the app; brand neutrals are fallbacks. */
    --ink:var(--app-ink,#171520); --ink-2:var(--app-ink-soft,#403B4C); --muted:var(--app-mute,#7E7889); --faint:var(--app-fade,#A7A2B0);
    --bg:var(--app-canvas,#F4F5F8); --card:var(--app-surface,#FFFFFF); --border:var(--app-line,#E7E8EE); --border-2:var(--app-line-soft,#EFF0F4);
    --green:#16B981; --green-tint:#EAFBF3; --green-bd:#BFEFD8; --green-deep:#0E9466;
    --amber:#F59E0B; --amber-tint:#FEF3E2; --amber-deep:#B45309;
    --blue:#2563EB; --blue-tint:#E8F0FE; --purple:#7C3AED;
    --star:#FFB020; --enemy:#6D5BD0;
    --r:16px;
    font-family:var(--app-font-ui, system-ui, sans-serif);
    color:var(--ink);
}
[data-theme-mode="dark"] .war-v3 {
    /* surfaces, ink & accent-tint all come from the app theme tokens; only the
       semantic status tints need dark-mode values here */
    --green-tint:#10241C; --green-bd:#1E4636; --amber-tint:#2A2012; --blue-tint:#15203A;
}
.war-v3 * { box-sizing:border-box; }
.war-v3 button { font-family:inherit; cursor:pointer; }
.war-v3 .sg { font-family:'Space Grotesk',sans-serif; }

.war-lab { font-family:'Space Grotesk'; font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); margin:4px 0 14px; }
.war-v3 .card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); }
.war-v3 .sectitle { font-family:'Space Grotesk'; font-weight:700; font-size:19px; margin:0; display:flex; align-items:center; gap:10px; color:var(--ink); }
.war-v3 .sectitle::before { content:""; width:4px; height:17px; border-radius:2px; background:var(--grad); }
.war-v3 .secrow { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:30px 2px 14px; flex-wrap:wrap; }
.war-v3 .secrow .hint { font-size:13px; color:var(--muted); }
.war-v3 .secrow.eqhead { min-height:40px; align-content:center; }

.war-empty { padding:48px; text-align:center; }
.war-empty-big { font-family:'Space Grotesk'; font-weight:700; font-size:22px; margin-bottom:6px; color:var(--ink); }
.war-empty-sub { color:var(--muted); font-size:14px; margin-bottom:18px; }
.war-btn { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13.5px; padding:11px 18px; border-radius:11px; border:1px solid transparent; text-decoration:none; }
.war-btn-primary { background:var(--grad); color:#fff; box-shadow:0 8px 18px -10px rgba(240,52,79,.6); }

/* WAR HEADER */
.warhead { overflow:hidden; position:relative; margin-bottom:18px; }
.warhead::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--grad); }
.scoreboard { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; padding:26px 28px 22px; }
@media (max-width:760px){ .scoreboard { grid-template-columns:1fr; gap:14px; } }
.team { display:flex; align-items:center; gap:14px; }
.team.them { flex-direction:row-reverse; text-align:right; }
.team .badge { width:58px; height:58px; border-radius:13px; object-fit:contain; background:var(--bg); border:1px solid var(--border-2); flex:none; }
.team .tn { font-family:'Space Grotesk'; font-weight:700; font-size:20px; line-height:1.1; color:var(--ink); }
.team .tm { font-size:12.5px; color:var(--muted); margin-top:2px; }
.center { text-align:center; min-width:200px; }
.bigstars { font-family:'Space Grotesk'; font-weight:700; font-size:40px; line-height:1; display:flex; align-items:center; justify-content:center; gap:14px; }
.bigstars .vs { font-size:16px; color:var(--faint); font-weight:600; }
.bigstars .us { color:var(--accent-deep); } .bigstars .th { color:var(--enemy); }
.resultpill { display:inline-flex; align-items:center; gap:7px; font-family:'Space Grotesk'; font-weight:700; font-size:12.5px; letter-spacing:.04em; padding:5px 14px; border-radius:999px; margin-top:10px; }
.rp-win { background:var(--green-tint); color:var(--green-deep); border:1px solid var(--green-bd); }
.rp-live { background:var(--accent-tint); color:var(--accent-deep); border:1px solid var(--accent-tint-2); }
.destrline { font-size:12.5px; color:var(--muted); margin-top:8px; }
.destrline b { color:var(--ink); font-family:'Space Grotesk'; }

.race { padding:0 28px 12px; display:grid; gap:9px; }
.racerow { display:grid; grid-template-columns:60px 1fr auto; gap:12px; align-items:center; font-size:12.5px; }
.racerow .rl { font-weight:700; font-family:'Space Grotesk'; }
.racebar { height:12px; border-radius:7px; background:var(--bg); overflow:hidden; position:relative; }
.racebar i { position:absolute; left:0; top:0; bottom:0; border-radius:7px; transition:width .35s ease; }
.racebar.us i { background:var(--grad); } .racebar.them i { background:linear-gradient(90deg,#8B79E6,#6D5BD0); }
.racerow .rv { font-family:'Space Grotesk'; font-weight:700; min-width:88px; text-align:right; }

.momentum { padding:8px 28px 6px; }
.mhead2 { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:2px; flex-wrap:wrap; }
.mlead { font-family:'Space Grotesk'; font-weight:600; font-size:13px; color:var(--ink-2); }
.mlead b { font-family:'Space Grotesk'; font-weight:700; }
.mcap { font-size:11px; color:var(--faint); font-weight:500; }
.mchart-wrap { position:relative; }
.mchart { width:100%; height:104px; display:block; overflow:visible; }
.mdot { position:absolute; width:11px; height:11px; border-radius:50%; background:var(--accent-deep); border:2px solid #fff; box-shadow:0 2px 6px rgba(240,52,79,.45); transform:translate(-50%,-50%); pointer-events:none; }
.scrub { border-top:1px solid var(--border); padding:18px 28px 22px; background:linear-gradient(180deg,var(--accent-tint),transparent); }
.scrub-top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.scrub-top .lt { display:flex; align-items:center; gap:12px; }
.iconbtn { width:40px; height:40px; border-radius:11px; border:1px solid var(--border); background:var(--card); display:grid; place-items:center; color:var(--ink); transition:all .15s; }
.iconbtn:hover { border-color:var(--accent); color:var(--accent-deep); }
.iconbtn.play { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 8px 18px -8px rgba(240,52,79,.6); }
.scrub-state { font-family:'Space Grotesk'; font-weight:700; font-size:15px; color:var(--ink); }
.scrub-state span { color:var(--muted); font-weight:500; font-size:12.5px; }
.pillbtns { display:flex; gap:8px; }
.pillbtn { font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:9px; border:1px solid var(--border); background:var(--card); color:var(--ink-2); }
.pillbtn:hover { border-color:var(--accent); color:var(--accent-deep); }
.sharebox { display:flex; align-items:center; gap:6px; }
.sharelabel { font-weight:700; font-size:12.5px; color:var(--ink-2); white-space:nowrap; margin-right:2px; }
.sharebox form { display:inline-flex; margin:0; }
.sharebtn { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:12.5px; padding:8px 13px; border-radius:9px; border:1px solid var(--border); background:var(--card); color:var(--ink-2); }
.sharebtn:hover { border-color:var(--accent); color:var(--accent-deep); }
.sharecode { font-family:'Space Grotesk'; font-weight:700; font-size:13px; letter-spacing:.04em; padding:6px 10px; border-radius:8px; background:var(--accent-tint); color:var(--accent-deep); border:1px solid var(--accent); }
.shareic { width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--ink-2); }
.shareic:hover { border-color:var(--accent); color:var(--accent-deep); }
.shareic.danger:hover { border-color:var(--enemy); color:var(--enemy); }
.war-v3 input[type=range] { width:100%; -webkit-appearance:none; appearance:none; height:8px; border-radius:6px; background:var(--border); outline:none; }
.war-v3 input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--accent-deep); border:3px solid #fff; box-shadow:0 3px 8px rgba(240,52,79,.5); cursor:pointer; }
.war-v3 input[type=range]::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--accent-deep); border:3px solid #fff; cursor:pointer; }
.ticks { display:flex; justify-content:space-between; font-size:10.5px; color:var(--faint); margin-top:6px; font-weight:600; }

.kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:6px; }
@media (max-width:1080px){ .kpis { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .kpis { grid-template-columns:repeat(2,1fr); } }
.war-v3 .kpi { padding:14px 15px; }
.war-v3 .kpi .k { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.war-v3 .kpi .v { font-family:'Space Grotesk'; font-weight:700; font-size:25px; line-height:1.05; margin-top:3px; color:var(--ink); }
.war-v3 .kpi .sub { font-size:11px; color:var(--faint); margin-top:2px; }
.war-v3 .kpi.hot { border-color:var(--accent-tint-2); background:linear-gradient(180deg,var(--accent-tint),var(--card)); }
.war-v3 .kpi.hot .v { color:var(--accent-deep); }
.war-v3 .kpi.warn .v { color:var(--amber-deep); }
.war-v3 .kpi.good .v { color:var(--green-deep); }

.planner { padding:0; overflow:hidden; }
.planmode { display:flex; gap:6px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:4px; }
.planmode .pm { display:inline-flex; align-items:center; gap:7px; font-family:var(--app-font-ui); font-weight:600; font-size:13px; color:var(--ink-2); padding:8px 14px; border-radius:9px; border:none; background:none; }
.planmode .pm:hover { color:var(--accent-deep); }
.planmode .pm.on { background:var(--grad); color:#fff; box-shadow:0 6px 14px -7px rgba(240,52,79,.6); }
.planmode .pm svg { flex:none; }
.subtoggle { display:flex; gap:3px; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:3px; }
.subtoggle .sub { border:none; background:none; font-family:var(--app-font-ui); font-weight:600; font-size:12.5px; color:var(--ink-2); padding:7px 12px; border-radius:7px; }
.subtoggle .sub.on { background:var(--card); color:var(--accent-deep); box-shadow:0 2px 6px -2px rgba(0,0,0,.18); }
.pstatbar { display:flex; align-items:center; gap:22px; padding:14px 22px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--accent-tint),transparent); flex-wrap:wrap; }
.pstat { display:flex; flex-direction:column; }
.pstat .pv { font-family:'Space Grotesk'; font-weight:700; font-size:22px; line-height:1; color:var(--ink); }
.pstat .pk { font-size:11px; color:var(--muted); font-weight:600; margin-top:3px; letter-spacing:.02em; }
.pstat.good .pv { color:var(--green-deep); } .pstat.warn .pv { color:var(--amber-deep); } .pstat.bad .pv { color:var(--accent-deep); }
.pstat-share { margin-left:auto; }
.prep3 { display:grid; grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .prep3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .prep3 { grid-template-columns:1fr; } }
.tgt.prep { flex-wrap:wrap; align-items:flex-start; }
.tgt.prep.is-dup { background:linear-gradient(90deg,var(--accent-tint),transparent); }
.mirrortag { font-size:10px; font-weight:700; font-family:'Space Grotesk'; color:var(--green-deep); background:var(--green-tint); border:1px solid var(--green-bd); padding:1px 6px; border-radius:5px; }
.diptag { font-size:10px; font-weight:700; font-family:'Space Grotesk'; color:var(--amber-deep); background:var(--amber-tint); border:1px solid #F5E2BE; padding:1px 6px; border-radius:5px; }
.prep-actual { font-size:10.5px; font-weight:600; margin-top:5px; display:flex; align-items:center; gap:5px; color:var(--muted); }
.prep-actual.ok { color:var(--green-deep); } .prep-actual.bad { color:var(--accent-deep); }
.planner-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.planner-head .pl { display:flex; flex-direction:column; }
.planner-head .desc { font-size:12.5px; color:var(--muted); margin-top:3px; }
.planner-actions { display:flex; gap:9px; }
.war-v3 .btn { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13.5px; padding:10px 16px; border-radius:11px; border:1px solid transparent; }
.war-v3 .btn-primary { background:var(--grad); color:#fff; box-shadow:0 8px 18px -10px rgba(240,52,79,.6); }
.war-v3 .btn-primary:hover { transform:translateY(-1px); }
.war-v3 .btn-soft { background:var(--card); color:var(--ink); border:1px solid var(--border); }
.war-v3 .btn-soft:hover { border-color:var(--accent); color:var(--accent-deep); }
.mirror-mode { width:18px; height:18px; flex:none; display:grid; place-items:center; border-radius:6px; font-family:'Space Grotesk'; font-weight:800; font-size:11px; line-height:1; background:var(--bg); border:1px solid var(--border); color:var(--ink-2); cursor:pointer; user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
.mirror-mode:hover { border-color:var(--accent); color:var(--accent-deep); }
.mirror-mode.force { background:var(--accent-tint); border-color:var(--accent); color:var(--accent-deep); }
.targets { display:grid; grid-template-columns:repeat(2,1fr); gap:0; }
@media (max-width:820px){ .targets { grid-template-columns:1fr; } }
.tgt { display:flex; align-items:center; gap:13px; padding:14px 22px; border-bottom:1px solid var(--border-2); border-right:1px solid var(--border-2); position:relative; }
.tgt:hover { background:var(--bg); }
.tgt .pos { width:34px; height:34px; border-radius:10px; background:var(--enemy); color:#fff; display:grid; place-items:center; font-family:'Space Grotesk'; font-weight:700; font-size:13px; flex:none; }
.tgt .ti { flex:1; min-width:0; }
.tgt .tnm { font-family:'Space Grotesk'; font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.tgt .tsub { font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:7px; margin-top:1px; }
.thchip { font-family:'Space Grotesk'; font-weight:700; font-size:10px; padding:1px 6px; border-radius:5px; }
.stars3 { display:inline-flex; gap:1px; }
.stars3 i { width:11px; height:11px; display:inline-block; -webkit-mask:var(--starmask) center/contain no-repeat; mask:var(--starmask) center/contain no-repeat; background:var(--star); }
.stars3 i.off { background:#D9DAE2; }
.tgt .assign { flex:none; text-align:right; }
.recbtn { font-size:12px; font-weight:700; font-family:'Space Grotesk'; padding:7px 12px; border-radius:9px; border:1px dashed var(--accent); background:var(--accent-tint); color:var(--accent-deep); display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.recbtn:hover { background:var(--accent); color:#fff; border-style:solid; }
.assigned { font-size:12px; font-weight:700; font-family:'Space Grotesk'; padding:7px 11px; border-radius:9px; background:var(--green-tint); color:var(--green-deep); border:1px solid var(--green-bd); display:inline-flex; align-items:center; gap:7px; }
.assigned.dup { background:var(--accent-tint); color:var(--accent-deep); border-color:var(--accent-tint-2); }
.assigned.over { background:var(--accent-tint); color:var(--accent-deep); border-color:var(--accent); }

/* ===== War map · mind map (ported from reference) ===== */
.war-v3 { --wm-red:#f0556b; }
/* War-map header tools: filters + Table/Mind-map toggle share one inline,
   right-aligned row so they stay compact next to the title. */
.wm-headtools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.wm-vtoggle { flex:none; }
.wm-filters { display:flex; gap:5px; flex-wrap:wrap; margin:0; }
.wm-chip { font-size:12px; font-weight:600; padding:5px 8px; border-radius:999px; cursor:pointer; border:1px solid var(--border); background:var(--card); color:var(--muted); display:inline-flex; align-items:center; gap:5px; line-height:1; }
.wm-chip svg { color:var(--cdot,var(--muted)); display:block; flex:none; }
.wm-chip:hover { color:var(--ink); border-color:var(--faint); }
.wm-chip.on { color:var(--ink); background:var(--bg); border-color:var(--cdot,var(--border)); }
.wm-chip.c-all{--cdot:var(--accent)} .wm-chip.c-on{--cdot:var(--green)} .wm-chip.c-off{--cdot:var(--amber)} .wm-chip.c-no{--cdot:var(--wm-red)} .wm-chip.c-att{--cdot:var(--enemy)}
.wm-chip .n { font-family:'Space Grotesk'; font-size:11px; font-weight:700; }

.wm-card { padding:0; overflow:hidden; }
.warmap { position:relative; padding:0; }
.wm-cols { display:grid; grid-template-columns:1fr 80px 1fr; align-items:start; }
.wm-colhead { font-family:'Space Grotesk'; font-weight:700; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; padding:12px 22px; border-bottom:1px solid var(--border); color:var(--faint); }
.wm-ours .wm-colhead { text-align:right; }
.wm-rows { display:flex; flex-direction:column; }
.wm-ours .wm-rows { padding-right:22px; }
.wm-enemy .wm-rows { padding-left:22px; }
.wm-node { display:flex; align-items:center; gap:9px; min-height:var(--war-row-h,64px); padding:5px 9px; border-bottom:1px solid var(--border-2); background:var(--card); cursor:pointer; position:relative; transition:border-color .14s,background .14s; }
.wm-rows .wm-node:last-child { border-bottom:none; }
.wm-ours .wm-node { flex-direction:row-reverse; text-align:right; }
.wm-node:hover { border-color:var(--faint); background:var(--bg); }
.wm-node .pos { font-family:'Space Grotesk'; font-size:10px; color:var(--faint); width:22px; text-align:center; flex:none; }
.wm-node .th { font-family:'Space Grotesk'; font-size:10px; font-weight:700; width:28px; height:22px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:6px; background:var(--bg); color:var(--ink-2); border:1px solid var(--border); }
.wm-node .nm { flex:1; min-width:0; font-weight:600; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-node .stpip { display:flex; gap:1px; flex:none; }
.wm-node .stpip i { width:5px; height:5px; border-radius:50%; background:var(--border); }
.wm-node .stpip i.on { background:var(--star); }
.wm-node .sbadge { width:9px; height:9px; border-radius:50%; flex:none; }
.wm-node.s-ontarget .sbadge { background:var(--green); }
.wm-node.s-offtarget .sbadge { background:var(--amber); }
.wm-node.s-attacked .sbadge { background:var(--enemy); }
.wm-node.s-noattack { opacity:.5; }
.wm-node.s-noattack .sbadge { background:var(--wm-red); }
.wm-node.s-noattack .nm { color:var(--muted); }
.wm-enemy-node { cursor:default; }
.wm-enemy-node .sbadge { display:none; }
.wm-enemy-node.cleared .th { border-color:var(--green); color:var(--green-deep); }

.wm-links { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; overflow:visible; }
.wm-links path { fill:none; }
.wm-links .guide { stroke:var(--faint); stroke-width:1; stroke-dasharray:2 5; opacity:.4; }
.warmap.focused .wm-node { opacity:.3; }
.warmap.focused .wm-node.hl { opacity:1; border-color:var(--hlc,var(--accent)); background:var(--bg); box-shadow:0 0 0 1px var(--hlc,var(--accent)); }
.warmap.focused .wm-links .link { opacity:.08; }
.warmap.focused .wm-links .link.hl { opacity:1; }
.warmap.focused .wm-links .guide { opacity:.05; }
.warmap.focused .wm-links .guide.hl { opacity:.5; }
.warmap.filtered .wm-node.out { opacity:.13; }
.warmap.filtered .wm-links .link.out, .warmap.filtered .wm-links .guide.out { opacity:.04; }

.wm-legend { position:absolute; left:16px; bottom:10px; z-index:3; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; font-size:11.5px; color:var(--muted); box-shadow:0 8px 22px -14px rgba(0,0,0,.4); }
.wm-legend .lrow { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.wm-legend .ll { width:20px; height:0; border-top:3px solid var(--faint); border-radius:2px; }
.wm-legend .ll.dash { border-top-style:dashed; border-top-width:2px; }
.wm-legend .ll.g { border-top-color:var(--green); }
.wm-legend .ll.a { border-top-color:var(--amber); }
.wm-legend .dotr { width:9px; height:9px; border-radius:50%; background:var(--wm-red); }
.wm-legend b { color:var(--ink); font-weight:600; }

.wm-detail { position:fixed; top:0; left:0; width:300px; max-width:92vw; max-height:80vh; z-index:1090; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 18px 50px -14px rgba(0,0,0,.5); display:none; flex-direction:column; overflow:hidden; }
.wm-detail.open { display:flex; }
.wm-detail .wd-h { display:flex; align-items:flex-start; gap:12px; padding:16px; border-bottom:1px solid var(--border); }
.wm-detail .wd-h .th { font-family:'Space Grotesk'; font-size:13px; font-weight:700; width:38px; height:34px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:9px; background:var(--bg); color:var(--ink); border:1px solid var(--border); }
.wm-detail .wd-h .nm { font-family:'Space Grotesk'; font-weight:700; font-size:18px; line-height:1.1; }
.wm-detail .wd-h .pos { font-family:'Space Grotesk'; font-size:11px; color:var(--faint); margin-top:3px; }
.wm-detail .wd-h .x { margin-left:auto; background:var(--bg); border:1px solid var(--border); color:var(--muted); width:30px; height:30px; border-radius:8px; cursor:pointer; flex:none; }
.wm-detail .wd-body { padding:14px 16px; overflow:auto; display:flex; flex-direction:column; gap:14px; }
.wd-status { font-family:'Space Grotesk'; font-weight:700; font-size:13px; padding:8px 12px; border-radius:9px; }
.wd-status.s-ontarget { background:var(--green-tint); color:var(--green-deep); }
.wd-status.s-offtarget { background:var(--amber-tint); color:var(--amber-deep); }
.wd-status.s-noattack { background:var(--accent-tint); color:var(--wm-red); }
.wd-lbl { font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--faint); font-weight:700; margin-bottom:7px; }
.wd-mirror { font-weight:600; color:var(--ink); }
.wd-mirror span { font-family:'Space Grotesk'; font-size:10px; color:var(--faint); }
.wd-atk { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:7px 9px; border-radius:8px; background:var(--bg); border:1px solid var(--border); margin-bottom:6px; }
.wd-atk.on { border-color:var(--green-bd); background:var(--green-tint); }
.wd-atk .ar { color:var(--faint); }
.wd-atk .dn { flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wd-atk .dp { font-family:'Space Grotesk'; font-size:10px; color:var(--faint); }
.wd-atk .pc { font-family:'Space Grotesk'; font-size:11px; color:var(--muted); width:38px; text-align:right; }
.wd-atk .mt { font-size:9px; font-weight:700; color:var(--green-deep); }
.wd-none { font-size:12.5px; color:var(--wm-red); padding:8px; text-align:center; border:1px dashed var(--border); border-radius:8px; }

@media (max-width:680px){
  .wm-cols { grid-template-columns:1fr 50px 1fr; }
  /* Pin the tap-detail popover to viewport gutters (override the inline
     left/width the JS sets for desktop anchoring). */
  .wm-detail { left:8px !important; right:8px !important; width:auto !important; max-width:none; }
  /* Bipartite map can't fit two roster columns + arcs on a phone. Keep both
     sides full-size and let the card scroll sideways (arcs anchor off node
     rects, so they stay correct while scrolling). */
  .wm-card { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
  .warmap { min-width:500px; }
}

/* compact planning cards — chips inline, right-aligned */
.tgt.prep { padding:9px 16px; align-items:flex-start; }
.tgt.prep .tnm { font-size:13px; }
.tgt.prep .ti { flex:1 1 auto; min-width:0; }
.tgt.prep .assign.prepchips { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; align-items:center; margin-left:auto; max-width:62%; flex:0 1 auto; }
.prepchips .assigned { padding:4px 9px; font-size:11px; gap:5px; white-space:nowrap; }
.prepchips .assigned .cn { white-space:nowrap; }
.prepchips .recbtn { padding:4px 10px; font-size:13px; font-weight:800; line-height:1; }
.prep-actual { margin-top:4px; }
.assigned .rb { display:inline-grid; place-items:center; width:15px; height:15px; border-radius:5px; font-size:9px; font-weight:800; line-height:1; flex:none; }
.assigned .rb.p { background:var(--green-deep); color:#fff; }
.assigned .rb.b { background:var(--ink-2); color:#fff; }
.assigned .x { cursor:pointer; opacity:.7; font-weight:800; }
.assigned .x:hover { opacity:1; }
.allclear { padding:40px; text-align:center; color:var(--green-deep); grid-column:1/-1; }
.allclear .big { font-family:'Space Grotesk'; font-weight:700; font-size:22px; margin-bottom:6px; }
.rosterlist { padding:6px 0; }
.rosterhead { display:grid; grid-template-columns:200px 32px 1fr 70px; gap:10px; padding:9px 22px; font-family:'Space Grotesk'; font-weight:700; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); }
.rosterrow { display:grid; grid-template-columns:24px 176px 32px 1fr 70px; gap:10px; align-items:center; padding:9px 22px; border-bottom:1px solid var(--border-2); font-size:13px; }
.rosterrow:last-child { border-bottom:none; }
.rosterrow.free { background:linear-gradient(90deg,var(--amber-tint),transparent); }
.rosterrow .rr-id { display:flex; align-items:center; gap:8px; min-width:0; }
.rosterrow .rr-n { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.rosterrow .rr-arrow { color:var(--faint); }
.rosterrow .rr-tgt { font-size:13px; color:var(--ink-2); }
.rosterrow .rr-tgt b { font-family:'Space Grotesk'; color:var(--ink); }
.rosterrow .free-t { color:var(--amber-deep); font-weight:600; }
.duptag { font-size:10px; font-weight:700; color:var(--accent-deep); }
.rosterrow .rr-act { text-align:right; }
.rosterrow .rr-act.none { font-size:11px; color:var(--faint); }
@media (max-width:640px){ .rosterhead { display:none; } .rosterrow { grid-template-columns:24px 1fr 50px; } .rosterrow .rr-arrow { display:none; } .rosterrow .rr-tgt { grid-column:2; } }
.planbar { padding:14px 22px; border-top:1px solid var(--border); display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--bg); }
.planbar .pcount { font-family:'Space Grotesk'; font-weight:700; font-size:13px; color:var(--ink); }
.planchips { display:flex; gap:8px; flex-wrap:wrap; flex:1; }
.pchip { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:5px 11px; }
.pchip b { font-family:'Space Grotesk'; }
.pchip .ar { color:var(--accent-deep); }
.pchip .x { cursor:pointer; color:var(--faint); font-weight:800; }
.pchip .x:hover { color:var(--accent-deep); }
.war-v3 .none { font-size:12px; color:var(--faint); font-style:italic; }

/* assign popover (body-level fixed) */
.apop { position:fixed; width:280px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 24px 60px -18px rgba(0,0,0,.35); z-index:1065; overflow:hidden; display:none; }
.apop.on { display:block; }
.apop .ah { padding:12px 15px; border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); }
.apop .ah b { color:var(--ink); font-family:'Space Grotesk'; }
.apop .alist { max-height:280px; overflow-y:auto; }
.apop .arow { display:flex; align-items:center; gap:10px; padding:10px 15px; border-bottom:1px solid var(--border-2); }
.apop .arow:hover { background:var(--accent-tint); }
.apop .an { flex:1; font-weight:600; font-size:13px; color:var(--ink); }
.apop .ameta { font-size:11px; color:var(--muted); }
.apop .pick { font-size:11px; font-weight:700; color:var(--accent-deep); }
.apop .asplit { padding:7px 15px; font-size:10px; letter-spacing:.09em; text-transform:uppercase; font-weight:800; font-family:'Space Grotesk'; color:var(--wm-red); background:rgba(240,85,107,.07); border-top:1px solid var(--border); border-bottom:1px solid var(--border-2); }
.apop .arow.full .an { color:var(--wm-red); }
.apop .arow.full .pos-dot { color:var(--wm-red); border-color:rgba(240,85,107,.5); }
.apop .arow.full .pick { color:var(--wm-red); }
.apop .arow.full:hover { background:rgba(240,85,107,.08); }
.apop .cap-full { color:var(--wm-red); font-weight:700; }
.rel { font-size:10px; font-weight:700; font-family:'Space Grotesk'; padding:1px 6px; border-radius:5px; background:var(--bg); color:var(--ink-2); }

/* MATCHUP */
.matchup { overflow:hidden; }
.mrow { display:grid; grid-template-columns:1fr 56px 1fr; align-items:stretch; min-height:var(--war-row-h,64px); border-bottom:1px solid var(--border-2); cursor:pointer; }
.mrow:last-child { border-bottom:none; }
.mrow:hover { background:var(--bg); }
.mside { display:flex; align-items:center; gap:11px; padding:11px 16px; min-width:0; }
.mside.them { flex-direction:row-reverse; text-align:right; }
.mside .nm { font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.mside .meta { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.mside.them .meta { flex-direction:row-reverse; }
.mmid { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:var(--bg); border-left:1px solid var(--border-2); border-right:1px solid var(--border-2); }
.mmid .mp { font-family:'Space Grotesk'; font-weight:700; font-size:12px; color:var(--muted); }
.resdot { width:9px; height:9px; border-radius:50%; flex:none; }
.mhead { display:grid; grid-template-columns:1fr 56px 1fr; background:var(--card); border-bottom:1px solid var(--border); font-family:'Space Grotesk'; font-weight:700; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.mhead div { padding:12px 16px; }
.mhead .c { text-align:center; }
.mhead .them { text-align:right; }
.mdetail { grid-column:1/-1; background:var(--bg); border-top:1px dashed var(--border); padding:0; display:none; }
.mdetail.on { display:block; }
.mdetail .dgrid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
@media (max-width:680px){ .mdetail .dgrid { grid-template-columns:1fr; } }
.dcol { padding:13px 18px; }
.dcol.r { border-left:1px solid var(--border); }
.dcol h5 { font-family:'Space Grotesk'; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.atkline { display:flex; align-items:center; gap:9px; font-size:12px; padding:5px 0; }
.atkline .who { font-weight:600; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.atkline .pct { color:var(--muted); font-family:'Space Grotesk'; font-weight:600; min-width:38px; text-align:right; }

/* PARTICIPATION */
.ptable { width:100%; border-collapse:collapse; }
.ptable th { text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:12px 16px; border-bottom:1px solid var(--border); }
.ptable td { height:var(--war-row-h,64px); padding:0 16px; border-bottom:1px solid var(--border-2); font-size:13.5px; color:var(--ink); }
.ptable tr:last-child td { border-bottom:none; }
.ptable tr.norow { background:linear-gradient(90deg,var(--accent-tint),transparent); }
.pname { font-weight:700; display:flex; align-items:center; gap:9px; }
.pos-dot { width:24px; height:24px; border-radius:7px; background:var(--bg); border:1px solid var(--border); display:grid; place-items:center; font-family:'Space Grotesk'; font-weight:700; font-size:11px; color:var(--ink-2); flex:none; }
.atkdots { display:inline-flex; gap:4px; }
.atkdots .d { width:15px; height:15px; border-radius:50%; border:2px solid var(--border); display:grid; place-items:center; font-size:8px; font-weight:800; color:var(--muted); line-height:1; }
.atkdots .d.done { background:var(--green); border-color:var(--green); color:#fff; }
.atkdots .d.miss { background:var(--accent-tint); border-color:var(--accent); }
.statetag { font-size:11px; font-weight:700; font-family:'Space Grotesk'; padding:3px 9px; border-radius:7px; }
.st-done { background:var(--green-tint); color:var(--green-deep); }
.st-part { background:var(--amber-tint); color:var(--amber-deep); }
.st-none { background:var(--accent-tint); color:var(--accent-deep); }
.parthead-r { display:flex; align-items:center; gap:12px; }
.pendtoggle { font-size:12px; font-weight:600; padding:6px 12px; border-radius:9px; border:1px solid var(--border); background:var(--card); color:var(--ink); cursor:pointer; white-space:nowrap; }
.pendtoggle:hover { border-color:var(--accent); color:var(--accent-deep); }
.pendtoggle.on { background:var(--accent-tint); border-color:var(--accent); color:var(--accent-deep); }
.capbtn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:var(--card); color:var(--ink); cursor:pointer; }
.capbtn:hover { border-color:var(--accent); color:var(--accent-deep); background:var(--accent-tint); }
.parttime { margin-top:10px; padding:0 2px; font-size:12px; font-weight:600; color:var(--muted); text-align:right; }

/* LOG */
.logfilters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.logsearch { display:flex; align-items:center; gap:7px; padding:0 11px; border:1px solid var(--border); border-radius:9px; background:var(--card); color:var(--muted); }
.logsearch:focus-within { border-color:var(--accent); color:var(--accent-deep); }
.logsearch input { border:none; outline:none; background:transparent; font-size:12.5px; color:var(--ink); padding:7px 0; width:150px; }
.logsearch input::placeholder { color:var(--faint); }
.logsearch .exact { margin:0 2px 0 4px; width:24px; height:24px; flex:none; display:grid; place-items:center; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--faint); cursor:pointer; }
.logsearch .exact svg { display:block; }
.logsearch .exact:hover { background:var(--bg); color:var(--ink-2); }
.logsearch .exact.on { background:var(--accent-tint); border-color:var(--accent); color:var(--accent-deep); }
.lf { font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:9px; border:1px solid var(--border); background:var(--card); color:var(--ink-2); }
.lf.on { background:var(--grad); color:#fff; border-color:transparent; }
.logtable { width:100%; border-collapse:collapse; }
.logtable th { text-align:left; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:11px 14px; border-bottom:1px solid var(--border); }
.logtable td { padding:10px 14px; border-bottom:1px solid var(--border-2); font-size:13px; color:var(--ink); }
.sidetag { font-size:10px; font-weight:800; font-family:'Space Grotesk'; padding:2px 8px; border-radius:6px; }
.side-us { background:var(--accent-tint); color:var(--accent-deep); }
.side-them { background:#EFEBFB; color:var(--enemy); }
.war-v3 .arrow { color:var(--faint); }
.ministars { display:inline-flex; gap:1px; vertical-align:middle; }
.ministars i { width:10px; height:10px; -webkit-mask:var(--starmask) center/contain no-repeat; mask:var(--starmask) center/contain no-repeat; background:var(--star); }
.ministars i.off { background:#DcDCE4; }

.grid2 { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start; }
@media (max-width:980px){ .grid2 { grid-template-columns:1fr; } }
.war-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--card); font-weight:600; font-size:13.5px; padding:11px 20px; border-radius:11px; opacity:0; pointer-events:none; transition:all .25s; z-index:1080; }
.war-toast.on { opacity:1; transform:translateX(-50%); }

/* ===== Mobile ===== */
/* Tables live in cards; default clip on desktop, scroll inside the card on
   phones so wide columns (log: Destr/Time) stay reachable instead of clipped. */
.tbl-wrap { overflow:hidden; }
/* Grid children must be allowed to shrink below their content, or a wide table
   forces the whole page to scroll sideways (grid min-width:auto blow-out). */
.grid2 > * { min-width:0; }

@media (max-width:680px){
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .logtable { min-width:560px; }   /* 7 columns — scroll rather than crush */
  /* iOS Safari zooms the page when focusing an input under 16px. Bump the log
     search field to 16px on phones to stop the focus-zoom. */
  .logsearch input { font-size:16px; }
}
@media (max-width:560px){
  /* Trim the generous desktop gutters so content breathes on phones. */
  .scoreboard { padding:20px 16px 18px; }
  .race { padding:0 16px 12px; }
  .momentum { padding:8px 16px 6px; }
  .scrub { padding:16px 16px 18px; }
  .planner-head, .pstatbar, .tgt, .planbar { padding-left:16px; padding-right:16px; }
  .wm-colhead { padding-left:14px; padding-right:14px; }
  .wm-ours .wm-rows { padding-right:14px; }
  .wm-enemy .wm-rows { padding-left:14px; }
  .ptable th, .ptable td, .logtable th, .logtable td { padding-left:12px; padding-right:12px; }
  .mside { padding-left:12px; padding-right:12px; }
  .mhead div { padding-left:12px; padding-right:12px; }
}

/* The leader's manual "Sync war" (cooldown: Platform → Sync defaults). */
.war-v3 .war-syncbar { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.war-v3 .war-syncbar .war-btn { font-size: 13px; padding: 6px 12px; }
.war-v3 .war-syncbar .war-btn:disabled { opacity: .7; cursor: default; }