/* Clash Scope — Capital Raid hub. Scoped to .craid; follows the app theme
   tokens exactly like the war room so light/dark and the accent match. */
.craid {
    --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);
    --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-deep:#0E9466;
    --amber:#F59E0B; --amber-tint:#FEF3E2; --amber-deep:#B45309;
    /* "Gold" tones follow the app accent so the whole hub re-themes with the
       user's chosen accent (was a fixed amber-gold). */
    --gold:var(--accent); --gold-deep:var(--accent-deep);
    --enemy:#6D5BD0; --red:#F0556B;
    --r:16px;
    font-family:var(--app-font-ui, system-ui, sans-serif);
    color:var(--ink);
}
[data-theme-mode="dark"] .craid { --green-tint:#10241C; --amber-tint:#2A2012; }
.craid * { box-sizing:border-box; }
.craid button { font-family:inherit; cursor:pointer; }
.craid-lab { font-family:'Space Grotesk'; font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); margin:0; }
.craid-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:0 0 14px; }
.craid-synced-note { font-size:11.5px; color:var(--muted); }
.craid .card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); }
.craid .disp { font-family:var(--app-font-display); }

.craid-retry { margin-top:16px; font-family:inherit; font-weight:600; font-size:13px; color:var(--accent-deep); background:var(--accent-tint); border:1px solid var(--accent-tint-2); border-radius:9px; padding:8px 16px; }
.craid-retry:hover { background:var(--accent-tint-2); }

/* ---- empty ---- */
.craid-empty { padding:56px 24px; text-align:center; }
.craid-empty-big { font-family:'Space Grotesk'; font-weight:700; font-size:22px; margin-bottom:6px; }
.craid-empty-sub { font-size:14px; color:var(--muted); max-width:440px; margin:0 auto; }

/* ---- sub-tabs ---- */
.craid-tabs { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.craid-toggle { display:inline-flex; gap:3px; background:var(--bg); border:1px solid var(--border); border-radius:11px; padding:3px; }
.craid-tab { border:none; background:none; font-family:inherit; font-weight:600; font-size:13px; color:var(--ink-2); padding:8px 15px; border-radius:8px; transition:.14s; }
.craid-tab:hover { color:var(--ink); }
.craid-tab.on { background:var(--card); color:var(--accent-deep); box-shadow:0 2px 6px -2px rgba(0,0,0,.18); }
.craid-synced { margin-left:auto; font-size:12px; color:var(--muted); }

/* ---- weekend picker ---- */
.craid-weekpick { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 16px; }
.craid-weekpick label { font-family:'Space Grotesk'; font-weight:700; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.craid-weekpick select { font-family:inherit; font-size:13px; font-weight:600; color:var(--ink); background:var(--card); border:1px solid var(--border); border-radius:10px; padding:8px 12px; min-width:15rem; max-width:100%; }
.craid-weekpick select:disabled { opacity:.6; }
.craid-weekhint { font-size:12px; color:var(--muted); }

/* ---- weekend banner ---- */
/* ---- bento (This weekend top) ---- */
.craid-bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(82px,auto); gap:10px; }
.b-tile { border:1px solid var(--border); border-radius:14px; background:var(--card); padding:15px 17px; display:flex; flex-direction:column; min-width:0; }

/* hero (weekend + countdown + progress) */
.b-hero { grid-column:1/3; grid-row:1/3; }
.b-lbl { font-family:'Space Grotesk'; font-weight:700; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:9px; }
.craid-state { font-size:9.5px; font-weight:800; letter-spacing:.06em; padding:2px 7px; border-radius:5px; }
.craid-state.ended { background:var(--border-2); color:var(--muted); }
.craid-state.ongoing { background:var(--green-tint); color:var(--green-deep); }
.b-date { font-family:'Space Grotesk'; font-weight:700; font-size:28px; line-height:1.05; margin:9px 0 3px; letter-spacing:-.015em; }
.b-sub { font-size:13px; color:var(--muted); }
.b-cd { margin-top:auto; padding-top:16px; }
.b-cd .cd-lbl { font-family:'Space Grotesk'; font-weight:700; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:8px; }
.craid-ck-row { display:flex; gap:8px; }
.craid-ck { flex:1; text-align:center; padding:9px 6px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.craid-ck b { display:block; font-family:'Space Grotesk'; font-weight:700; font-size:22px; line-height:1; }
.craid-ck span { display:block; font-size:8.5px; letter-spacing:.08em; color:var(--muted); margin-top:5px; }
.b-prog { margin-top:14px; }
.b-prog .pr-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; font-family:'Space Grotesk'; }
.b-prog .pr-top span:first-child { font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.b-prog .pr-top span:last-child { font-weight:700; font-size:13px; color:var(--accent-deep); }
.craid-bar { height:9px; border-radius:99px; background:var(--border-2); overflow:hidden; }
.craid-bar > i { display:block; height:100%; border-radius:99px; background:var(--grad); }

/* accent-filled hero stat */
.b-gold { grid-column:3/5; grid-row:1/2; background:var(--grad); border:none; color:#fff; justify-content:center; }
.b-gold .k { font-family:'Space Grotesk'; font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.86); }
.b-gold .v { font-family:'Space Grotesk'; font-weight:700; font-size:33px; line-height:1; margin:7px 0 4px; letter-spacing:-.02em; }
.b-gold .s { font-size:12px; color:rgba(255,255,255,.86); }

/* stat tiles */
.b-raids{grid-column:3/4;grid-row:2/3;} .b-districts{grid-column:4/5;grid-row:2/3;}
.b-attacks{grid-column:1/2;grid-row:3/4;} .b-part{grid-column:2/3;grid-row:3/4;}
.b-off{grid-column:3/4;grid-row:3/4;} .b-def{grid-column:4/5;grid-row:3/4;}
.b-stat { justify-content:center; }
.b-stat .k { font-family:'Space Grotesk'; font-weight:700; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.b-stat .v { font-family:'Space Grotesk'; font-weight:700; font-size:23px; line-height:1.05; margin-top:5px; letter-spacing:-.01em; }
.b-stat .s { font-size:11px; color:var(--faint); margin-top:3px; }

/* attack fill tile (full width) */
.b-fill { grid-column:1/5; }
.b-fill .fl-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.b-fill .k { font-family:'Space Grotesk'; font-weight:700; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.b-fill .cnt { font-size:12.5px; color:var(--muted); margin-top:4px; }
.b-fill .fl-pct { font-family:'Space Grotesk'; font-weight:700; font-size:28px; line-height:1; letter-spacing:-.02em; color:var(--accent-deep); }
/* distinct green/amber/red distribution segments with gaps */
.b-fill .fl-bar { display:flex; gap:3px; height:12px; margin-bottom:14px; }
.b-fill .fl-bar > span { border-radius:99px; min-width:5px; }
.s-full { background:var(--green); } .s-part { background:var(--amber); } .s-zero { background:var(--red); }
.b-fill .fl-legend { display:flex; gap:10px; }
.b-fill .fl-item { flex:1; display:flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid var(--border); border-radius:11px; background:var(--bg); }
.b-fill .fl-item .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.b-fill .fl-item .fl-lab { font-size:11.5px; color:var(--muted); flex:1; white-space:nowrap; }
.b-fill .fl-item .fl-num { font-family:'Space Grotesk'; font-weight:700; font-size:17px; }
.dot-full { background:var(--green); } .dot-part { background:var(--amber); } .dot-zero { background:var(--red); }

/* ---- section head ---- */
.craid-sec { margin:20px 2px 11px; display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; }
.craid-sec h2 { font-family:'Space Grotesk'; font-weight:700; font-size:17px; margin:0; display:flex; align-items:center; gap:9px; }
.craid-sec h2::before { content:""; width:4px; height:15px; border-radius:2px; background:var(--grad); }
.craid-sec .hint { font-size:13px; color:var(--muted); }
/* mobile-only "Scroll ->" hint for the wide activity matrix */
.craid-swipehint { display:none; margin-left:auto; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:var(--muted); background:var(--bg); border:1px solid var(--border); border-radius:99px; padding:3px 10px; }
.craid-swipehint .ar { display:inline-block; animation:craid-nudge 1.4s ease-in-out infinite; }
@keyframes craid-nudge { 0%,100% { transform:translateX(0); } 50% { transform:translateX(3px); } }

/* ---- roster filters ---- */
.craid-filters { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.craid-filt { border:1px solid var(--border); background:var(--card); color:var(--ink-2); font-weight:600; font-size:12.5px; padding:6px 13px; border-radius:9px; }
.craid-filt.on { background:var(--accent-tint); color:var(--accent-deep); border-color:var(--accent-tint-2); }
.craid-filt b { margin-left:6px; opacity:.7; }

/* horizontal-scroll wrapper for wide tables on narrow screens */
.craid-scrollx { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---- roster table ---- */
.craid-table { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--card); min-width:704px; }
.craid-th, .craid-tr { display:grid; grid-template-columns:32px minmax(160px,1.3fr) 116px 52px minmax(150px,1fr) 104px; align-items:center; gap:14px; padding:11px 16px; }
.craid-th { font-family:'Space Grotesk'; font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); }
.craid-tr { border-bottom:1px solid var(--border-2); }
.craid-tr:last-child { border-bottom:0; }
.craid-tr:hover { background:var(--bg); }
.craid-tr.miss { opacity:.55; }
.craid-rank { font-family:'Space Grotesk'; font-weight:700; font-size:12px; color:var(--faint); text-align:center; }
.craid-who { display:flex; align-items:center; gap:11px; min-width:0; }
.craid-av { width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:'Space Grotesk'; font-weight:700; font-size:11px; color:#fff; }
/* 6-pip attack meter */
.craid-pips { display:flex; gap:4px; }
.craid-pips > i { width:14px; height:14px; border-radius:4px; background:var(--border-2); }
.craid-pips > i.on { background:linear-gradient(180deg,var(--gold),var(--gold-deep)); }
.craid-used { font-family:'Space Grotesk'; font-weight:700; font-size:12.5px; color:var(--ink-2); }
.craid-gbar { height:6px; border-radius:99px; background:var(--border-2); overflow:hidden; margin:5px 0 4px; }
.craid-gbar > i { display:block; height:100%; border-radius:99px; background:var(--gold); }
.craid-status { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.craid-st { font-family:'Space Grotesk'; font-weight:700; font-size:11px; letter-spacing:.04em; }
.craid-st.done { color:var(--green-deep); } .craid-st.part { color:var(--amber-deep); } .craid-st.miss { color:var(--faint); }
.craid-i { width:24px; height:24px; flex:none; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--muted); font-family:'Space Grotesk'; font-style:italic; font-weight:700; font-size:12px; line-height:1; display:grid; place-items:center; }
.craid-i:hover { border-color:var(--accent); color:var(--accent-deep); background:var(--accent-tint); }
.craid-nm { min-width:0; }
.craid-nm b { display:block; font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.craid-nm span { display:block; font-size:11px; color:var(--faint); font-family:'Space Grotesk'; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.craid-atk { display:flex; align-items:center; gap:9px; }
.craid-atk .n { font-family:'Space Grotesk'; font-weight:700; font-size:12.5px; min-width:26px; }
.craid-usebar { flex:1; height:6px; border-radius:99px; background:var(--border-2); overflow:hidden; }
.craid-usebar > i { display:block; height:100%; border-radius:99px; background:var(--grad); }
.craid-goldcell { display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:10px; }
.craid-goldcell b { grid-row:1; grid-column:1; font-family:'Space Grotesk'; font-weight:700; font-size:13.5px; color:var(--gold-deep); }
.craid-goldcell b.none { color:var(--faint); }
.craid-goldcell span { grid-row:1; grid-column:2; font-size:10.5px; color:var(--faint); text-align:right; white-space:nowrap; }
.craid-goldcell .craid-gbar { grid-row:2; grid-column:1 / -1; }

/* ---- needs a nudge ---- */
.craid-nudge { margin-top:20px; padding:18px 20px; border:1px solid var(--border); border-radius:14px; background:var(--card); }
.craid-nudge h3 { font-family:'Space Grotesk'; font-weight:700; font-size:14px; margin:0 0 3px; }
.craid-nudge .sub { font-size:12px; color:var(--muted); margin-bottom:13px; }
.craid-nudge-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:9px; }
.craid-npill { display:flex; align-items:center; gap:10px; padding:8px 11px; border:1px solid var(--border-2); border-radius:10px; }
.craid-npill .craid-av { width:28px; height:28px; }
.craid-npill .txt { min-width:0; flex:1; }
.craid-npill .txt b { display:block; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.craid-npill .txt span { font-size:10.5px; color:var(--muted); }
.craid-npill .cnt { font-family:'Space Grotesk'; font-weight:700; font-size:12px; color:var(--amber-deep); }

/* ---- trends: two-column ---- */
.craid-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.craid-panel { padding:20px 22px; }
.craid-panel h3 { font-family:'Space Grotesk'; font-weight:700; font-size:16px; margin:0 0 2px; }
.craid-panel .psub { font-size:12px; color:var(--muted); margin-bottom:16px; }

/* monthly gold chart */
.craid-chart { width:100%; height:auto; aspect-ratio:640/210; display:block; overflow:visible; }
.craid-chart .grid { stroke:var(--border-2); stroke-width:1; }
.craid-chart .area { fill:var(--accent-tint); opacity:.65; }
.craid-chart .line { fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; }
.craid-chart .lined { fill:none; stroke:var(--faint); stroke-width:1.6; stroke-dasharray:5 5; }
.craid-chart .dot { fill:var(--card); stroke:var(--accent); stroke-width:2.6; }
.craid-months { display:flex; justify-content:space-between; margin-top:12px; gap:4px; }
.craid-months .m { text-align:center; flex:1; }
.craid-months .m b { display:block; font-family:'Space Grotesk'; font-weight:700; font-size:16px; }
.craid-months .m span { display:block; font-size:11px; color:var(--muted); }
.craid-months .m em { display:block; font-size:10px; color:var(--faint); font-style:normal; }

/* raid volume bars */
.craid-vol { display:flex; flex-direction:column; gap:16px; }
.craid-volrow .vtop { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.craid-volrow .vm { font-family:'Space Grotesk'; font-weight:700; font-size:14px; }
.craid-volrow .vv { font-size:13px; } .craid-volrow .vv b { font-family:'Space Grotesk'; font-size:15px; }
.craid-volrow .vv span { color:var(--muted); font-size:11.5px; }
.craid-volbar { height:9px; border-radius:99px; background:var(--border-2); overflow:hidden; }
.craid-volbar > i { display:block; height:100%; border-radius:99px; background:var(--gold); }
.craid-volrow .vsub { font-size:11px; color:var(--faint); margin-top:5px; }


/* activity matrix */
.craid-matrix { overflow-x:auto; }
.craid-mtable { width:100%; border-collapse:collapse; min-width:640px; }
.craid-mtable th, .craid-mtable td { padding:9px 10px; text-align:center; border-bottom:1px solid var(--border-2); font-size:12.5px; }
.craid-mtable th { font-family:'Space Grotesk'; font-weight:700; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.craid-mtable th.pl, .craid-mtable td.pl { text-align:left; }
.craid-mtable th small { display:block; font-weight:600; color:var(--faint); letter-spacing:0; text-transform:none; }
.craid-mtable th.tracked small { color:var(--green-deep); }
.craid-mcell.nd { color:var(--faint); }
.craid-mcell.z { color:var(--red); font-weight:700; }
.craid-mcell.v { font-family:'Space Grotesk'; font-weight:700; }
.craid-tier { font-size:9.5px; font-weight:800; letter-spacing:.05em; padding:3px 8px; border-radius:6px; }
.craid-tier.act { background:var(--green-tint); color:var(--green-deep); }
.craid-tier.ina { background:var(--border-2); color:var(--muted); }
.craid-mwho { display:flex; align-items:center; gap:9px; }
.craid-mwho .craid-av { width:26px; height:26px; }

/* ---- raid log ---- */
.craid-log { display:flex; flex-direction:column; gap:10px; }
.craid-lclan { border:1px solid var(--border); border-radius:14px; background:var(--card); overflow:hidden; }
.craid-lhead { display:grid; grid-template-columns:1fr 90px 80px 1fr auto; align-items:center; gap:14px; padding:15px 18px; cursor:pointer; }
.craid-lhead:hover { background:var(--bg); }
.craid-lclanname { display:flex; align-items:center; gap:12px; min-width:0; }
.craid-lbadge { width:34px; height:34px; border-radius:8px; object-fit:contain; background:var(--bg); flex:none; }
.craid-lbadge-fb { width:34px; height:34px; border-radius:8px; flex:none; display:grid; place-items:center; background:var(--enemy); color:#fff; font-family:'Space Grotesk'; font-weight:700; font-size:12px; }
.craid-lclanname .nm b { display:block; font-family:'Space Grotesk'; font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.craid-lclanname .nm span { font-size:11px; color:var(--faint); }
.craid-lstat { text-align:left; }
.craid-lstat .k { font-family:'Space Grotesk'; font-weight:700; font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.craid-lstat .v { font-family:'Space Grotesk'; font-weight:700; font-size:15px; }
.craid-lgold { display:flex; align-items:center; gap:10px; }
.craid-lgold .gbar { flex:1; height:8px; border-radius:99px; background:var(--border-2); overflow:hidden; }
.craid-lgold .gbar > i { display:block; height:100%; background:var(--gold); }
.craid-lgold .gv { font-family:'Space Grotesk'; font-weight:700; font-size:16px; }
.craid-lchev { color:var(--faint); font-size:13px; transition:transform .2s; }
.craid-lclan.open .craid-lchev { transform:rotate(180deg); }
.craid-districts { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:4px 14px 14px; }
.craid-dist { padding:10px 12px; border:1px solid var(--border-2); border-radius:10px; }
.craid-dist .dn { font-weight:600; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.craid-dist .dm { font-size:10.5px; color:var(--faint); margin-top:1px; }
.craid-dist .drow { display:flex; align-items:baseline; justify-content:space-between; margin-top:7px; }
.craid-dist .dp { font-family:'Space Grotesk'; font-weight:700; font-size:12px; color:var(--green-deep); }
.craid-dist .dg { font-family:'Space Grotesk'; font-weight:700; font-size:12.5px; color:var(--gold-deep); }

/* defense list */
.craid-def { display:flex; flex-direction:column; gap:9px; }
.craid-defrow { display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:16px; padding:13px 18px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.craid-defrow .k { font-size:12px; color:var(--muted); }
.craid-defrow .k b { font-family:'Space Grotesk'; color:var(--ink); }
.craid-dstat { font-size:9.5px; font-weight:800; letter-spacing:.05em; padding:3px 9px; border-radius:6px; }
.craid-dstat.wiped { background:#FDE7EA; color:#C2384C; }
.craid-dstat.held { background:var(--green-tint); color:var(--green-deep); }
[data-theme-mode="dark"] .craid-dstat.wiped { background:#3A1620; color:#F5889A; }

.craid-lright { display:flex; align-items:center; gap:10px; }

/* footer note */
.craid-note { margin:24px 2px 8px; font-size:12px; line-height:1.6; color:var(--muted); padding:14px 16px; border:1px dashed var(--border); border-radius:12px; }

/* ---- modals ---- */
.craid-modal-ov { position:fixed; inset:0; z-index:1200; background:rgba(17,15,25,.5); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; padding:32px 16px; }
.craid-modal-ov.on { display:flex; }
/* Single scroll region: the modal fits the viewport and only its body scrolls,
   so there is no confusing overlay-plus-inner double scroll. dvh + the overlay
   padding keep it clear of the mobile browser's top/bottom chrome. */
.craid-modal { width:100%; max-width:560px; max-height:calc(100dvh - 64px); display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:0 24px 60px rgba(17,15,25,.28); overflow:hidden; animation:craid-pop .16s ease; }
@keyframes craid-pop { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:none; } }
.craid-mhead { flex:none; display:flex; align-items:center; gap:13px; padding:18px 20px; border-bottom:1px solid var(--border); }
.craid-mhead .craid-av, .craid-mhead .craid-lbadge, .craid-mhead .craid-lbadge-fb { width:44px; height:44px; font-size:14px; }
.craid-mhead .who { flex:1; min-width:0; }
.craid-mhead .who b { display:block; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.craid-mhead .who span { font-size:11.5px; color:var(--faint); }
.craid-mx { width:32px; height:32px; flex:none; border-radius:9px; border:1px solid var(--border); background:var(--card); color:var(--muted); font-size:14px; display:grid; place-items:center; }
.craid-mx:hover { background:var(--bg); color:var(--ink); }
.craid-mtiles { flex:none; display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--border-2); border-bottom:1px solid var(--border); }
.craid-mtile { background:var(--card); padding:13px 12px; }
.craid-mtile .k { font-family:'Space Grotesk'; font-weight:700; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.craid-mtile .v { font-family:'Space Grotesk'; font-weight:700; font-size:17px; margin-top:5px; }
.craid-mbody { flex:1 1 auto; min-height:0; padding:8px 20px 18px; overflow-y:auto; }
.craid-mgroup { padding:12px 0; border-bottom:1px solid var(--border-2); }
.craid-mgroup:last-child { border-bottom:0; }
.craid-mgh { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px; }
.craid-mgh b { font-family:'Space Grotesk'; font-weight:700; font-size:14.5px; }
.craid-mgh > span { font-size:11.5px; color:var(--muted); }
.craid-mgh.dist { align-items:flex-start; }
.craid-mgh.dist span { display:block; font-size:11px; color:var(--faint); font-weight:400; margin-top:2px; }
.craid-dpct { font-family:'Space Grotesk'; font-weight:700; font-size:14px; color:var(--green-deep); }
.craid-mhh { font-family:'Space Grotesk'; font-weight:700; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.craid-mhit { display:grid; grid-template-columns:34px 1fr auto auto; align-items:center; gap:12px; padding:7px 0; }
.craid-mhit .ord { font-family:'Space Grotesk'; font-weight:700; font-size:11px; color:var(--faint); }
.craid-mhit .dloc b { display:block; font-size:13px; font-weight:600; }
.craid-mhit .dloc span { font-size:10.5px; color:var(--faint); }
.craid-mwho2 { display:flex; align-items:center; gap:9px; min-width:0; }
.craid-mwho2 .craid-av { width:26px; height:26px; font-size:9.5px; }
.craid-mwho2 span { font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.craid-stars { font-size:12px; letter-spacing:1px; color:var(--gold); white-space:nowrap; }
.craid-stars .off { color:var(--border); }
.craid-ft { display:inline-flex; align-items:center; gap:6px; font-family:'Space Grotesk'; font-weight:700; font-size:12px; }
.craid-ft .f { color:var(--muted); } .craid-ft .ar { color:var(--faint); font-weight:400; } .craid-ft .t { color:var(--ink); }
.craid-ft .gn { color:var(--green-deep); background:var(--green-tint); padding:1px 6px; border-radius:5px; font-size:11px; }
.craid-mnote { flex:none; padding:12px 20px; font-size:11px; line-height:1.55; color:var(--muted); background:var(--bg); border-top:1px solid var(--border-2); }

/* ---- responsive ---- */
@media (max-width:900px) {
    /* Bento -> 2 columns: hero + gold full width, stats in pairs. */
    .craid-bento { grid-template-columns:repeat(2,1fr); }
    .b-hero, .b-gold, .b-fill { grid-column:1/-1; grid-row:auto; }
    .b-raids, .b-districts, .b-attacks, .b-part, .b-off, .b-def { grid-column:auto; grid-row:auto; }
    .craid-grid2 { grid-template-columns:1fr; }
    .craid-districts { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
    .craid-bento { grid-template-columns:1fr; }
    .b-hero, .b-gold, .b-fill, .b-raids, .b-districts, .b-attacks, .b-part, .b-off, .b-def { grid-column:1/-1; }
    .b-fill .fl-legend { flex-direction:column; }
}
@media (max-width:640px) {
    .b-date { font-size:24px; }

    /* Roster board -> stacked cards (all data fits, no horizontal scroll). */
    .craid-scrollx { overflow-x:visible; }
    .craid-table { min-width:0; }
    .craid-th { display:none; }
    .craid-tr { grid-template-columns:26px 1fr auto; grid-template-areas:"rank who status" "meter meter used" "gold gold gold"; gap:8px 10px; padding:13px 14px; }
    .craid-rank { grid-area:rank; align-self:center; }
    .craid-who { grid-area:who; align-self:center; }
    .craid-status { grid-area:status; align-self:center; }
    .craid-pips { grid-area:meter; }
    .craid-used { grid-area:used; justify-self:end; align-self:center; }
    .craid-goldcell { grid-area:gold; }

    .craid-swipehint { display:inline-flex; }

    .craid-lhead { grid-template-columns:1fr auto auto; }
    .craid-lhead .craid-lstat.col-dist, .craid-lhead .craid-lgold { display:none; }
    .craid-districts { grid-template-columns:1fr; }
    .craid-defrow { grid-template-columns:1fr auto; row-gap:6px; }
    /* Keep the modal clear of the mobile browser's top/bottom bars + notches. */
    .craid-modal-ov { padding:calc(env(safe-area-inset-top, 0px) + 26px) 12px calc(env(safe-area-inset-bottom, 0px) + 26px); }
    .craid-modal { max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 52px); }

    /* Compact stat tiles; the odd 5th tile spans the row (no empty cell). */
    .craid-mtiles { grid-template-columns:repeat(2,1fr); }
    .craid-mtile { padding:10px 13px; }
    .craid-mtile .v { font-size:16px; margin-top:3px; }
    .craid-mtile:last-child { grid-column:1 / -1; }
    .craid-mhead .who b { font-size:16px; }
    .craid-mhit { grid-template-columns:26px 1fr auto; gap:10px; }
    .craid-mhit .craid-stars { display:none; }
    .craid-mnote { padding:11px 16px; font-size:10.5px; }
}

/* The leader's manual sync (cooldown: Platform → Sync defaults) and when the log was last read. */
.craid .craid-sync { display: flex; align-items: center; gap: .6rem; }
.craid .craid-updated { font-size: .8rem; color: var(--app-mute); white-space: nowrap; }