/* Rallies: clan members combine marches against Bloaters and Brutes */
.rl-hero { display: grid; gap: 8px; justify-items: stretch; padding: 12px; border-radius: 14px; background: linear-gradient(#3a1d16, #1c120e); border: 1px solid rgba(224,87,76,.5); text-align: center; }
.rl-hero .rl-big { font-size: 40px; line-height: 1; }
.rl-start { display: grid; gap: 1px; min-height: 54px; font-size: 17px; }
.rl-start small { font-size: 12px; font-weight: 600; opacity: .8; }

/* the rally card */
.rl-card { --c: var(--c-amber); display: grid; gap: 8px; margin-bottom: 10px; padding: 10px; border-radius: 14px; background: linear-gradient(#26332b, #18211b); border: 1px solid var(--line); border-left: 5px solid var(--c); box-shadow: 0 3px 0 var(--c-ink); }
.rl-card.march { --c: var(--c-blue); } .rl-card.attack { --c: var(--c-blood); } .rl-card.return { --c: var(--c-good); }
.rl-card.joined { background: linear-gradient(#253a2c, #17231b); }
.rl-top { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; }
.rl-art { position: relative; width: 56px; height: 56px; padding: 0; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #4a2a22, #1a100d); border: 2px solid #7a3a30; overflow: hidden; }
.rl-art canvas { display: block; } .rl-emo { font-size: 28px; }
.rl-art i { position: absolute; left: 0; right: 0; bottom: 0; font: 800 10px/14px system-ui; text-align: center; color: #ffd9d4; background: rgba(90,20,16,.9); }
.rl-what { display: grid; gap: 2px; min-width: 0; }
.rl-what > b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-what small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-leader { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--c-amber-pale); min-width: 0; }
.rl-leader > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-side { display: grid; gap: 4px; justify-items: end; }
.rl-status { --c: var(--c-amber); display: grid; justify-items: center; min-width: 78px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 16%, var(--c-ink)); }
.rl-status span { font-size: 11px; font-weight: 700; color: var(--c); text-transform: uppercase; letter-spacing: .03em; }
.rl-status b { font: 800 15px/1.2 ui-monospace, monospace; }
.rl-out { font-size: 12px; font-weight: 800; } .rl-out.good { color: var(--good); } .rl-out.bad { color: var(--bad); }
.rl-mid { display: flex; align-items: center; gap: 8px; }
.rl-faces { flex: 1; display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.rl-face { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #5a6b5f; background: var(--c-ink); overflow: visible; flex: none; display: inline-grid; }
.rl-face .rl-face-img { width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; object-position: top; font-size: 10px !important; font-weight: 800; display: grid; place-items: center; overflow: hidden; }
.rl-face.lead { border-color: var(--pn-gold, var(--c-amber)); } .rl-face.me { border-color: #49d28a; box-shadow: 0 0 0 1px #49d28a; }
.rl-face.walking { opacity: .5; border-style: dashed; }
.rl-face.empty { border-style: dashed; border-color: var(--c-line); background: none; }
.rl-face i { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--c-blue); color: #fff; font: 800 9px/13px system-ui; text-align: center; }
.rl-leader .rl-face { width: 22px; height: 22px; border-width: 1px; }
.rl-count { font: 800 15px system-ui; color: var(--pn-gold, var(--c-amber)); white-space: nowrap; }
.rl-bot { display: flex; align-items: center; gap: 8px; }
.rl-cap { flex: 1; min-width: 0; display: grid; gap: 2px; } .rl-cap small { font-size: 11px; color: var(--muted); }
.rl-bar { position: relative; height: 20px; border-radius: 10px; background: var(--c-ink); border: 1px solid var(--line); overflow: hidden; }
.rl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-amber-lo), #ffd97a); transition: width .3s; }
.rl-bar.full i { background: linear-gradient(90deg, var(--c-blood-lo), var(--c-blood)); }
.rl-bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 11.5px system-ui; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.rl-bar.small { height: 16px; margin-top: 5px; } .rl-bar.small i { background: linear-gradient(90deg, #2f6fa8, var(--c-blue)); } .rl-bar.small span { font-size: 10.5px; }
.rl-join { display: flex; align-items: center; gap: 7px; min-height: 48px; padding: 4px 10px 4px 6px; border-radius: 12px; border: 2px solid var(--c-amber-lo); background: linear-gradient(#ffd97a, var(--c-amber)); color: var(--c-amber-ink); box-shadow: 0 3px 0 var(--c-amber-deep); }
.rl-join:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-amber-deep); }
.rl-join .plus { width: 34px; height: 34px; border-radius: 50%; background: var(--c-amber-ink); color: #ffd97a; font: 900 26px/32px system-ui; text-align: center; }
.rl-join .when { display: grid; text-align: left; line-height: 1.15; } .rl-join .when b { font-size: 13px; white-space: nowrap; } .rl-join .when small { font-size: 11px; font-weight: 800; white-space: nowrap; color: #1e6a34; }
.rl-join.late { background: linear-gradient(#e9c9a0, #c9a274); border-color: #8a5a3a; } .rl-join.late .when small { color: #a3261c; }
.rl-join.none { filter: grayscale(.8); }
.rl-mine { display: grid; justify-items: end; text-align: right; line-height: 1.2; } .rl-mine b { font-size: 13px; color: #9ff0c4; white-space: nowrap; } .rl-mine small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.rl-mine.closed b { color: var(--muted); }
.rl-x { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: #3a1d1a; border: 1px solid var(--c-blood-lo); color: #ffb3aa; font-size: 16px; font-weight: 800; flex: none; }

/* Auto-Rally */
.rl-auto { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(#1f2a33, #151c22); border: 1px solid #2f4a63; }
.rl-auto.on { border-color: var(--c-blue); box-shadow: 0 0 12px rgba(78,143,224,.25); }
.rl-auto b { display: block; font-size: 15px; } .rl-auto small { display: block; font-size: 12px; color: var(--muted); }
.rl-switch { position: relative; width: 58px; height: 32px; padding: 0; border-radius: 16px; background: var(--c-ink); border: 2px solid var(--c-line); transition: background .2s; }
.rl-switch i { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-muted); transition: left .2s, background .2s; }
.rl-switch.on { background: #2f6fa8; border-color: var(--c-blue); } .rl-switch.on i { left: 28px; background: #fff; }

/* results */
.rl-res { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); border-left: 4px solid #5a6b5f; }
.rl-res.good { border-left-color: var(--good); } .rl-res.bad { border-left-color: var(--bad); }
.rl-res .ic { font-size: 22px; text-align: center; } .rl-res .mid { display: grid; gap: 1px; min-width: 0; } .rl-res small { font-size: 12px; color: var(--muted); }
.rl-loot { display: flex; flex-wrap: wrap; gap: 2px 9px; font-size: 12px; font-weight: 700; color: var(--c-amber-pale); } .rl-loot span { white-space: nowrap; }
.rl-pin { width: 40px; height: 40px; padding: 0; border-radius: 10px; background: rgba(255,255,255,.08); border: 0; font-size: 17px; flex: none; }
.rl-rules { margin-top: 10px; text-align: center; }

/* focused rally room: battlefield brief, member roster, and fixed rally controls */
.rl-open { flex: none; min-height: 34px; padding: 5px 10px; border: 1px solid var(--c-amber-lo); border-radius: 9px; background: rgba(0,0,0,.24); color: var(--c-amber-pale); font: 800 12px system-ui; white-space: nowrap; }
.rl-room { display: grid; gap: 10px; padding-bottom: 6px; }
.rl-room-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; color: var(--c-amber-hi); }
.rl-room-topbar button { border: 0; background: none; color: var(--c-amber-pale); font: 800 14px system-ui; }
.rl-room-banner { display: grid; gap: 9px; padding: 11px; border: 1px solid rgba(224,87,76,.58); border-radius: 14px; background: linear-gradient(150deg, #3a2019, #211913 68%, #172019); box-shadow: inset 0 1px 0 rgba(255,220,160,.1); }
.rl-room-target { display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 10px; align-items: center; }
.rl-room-target > div { display: grid; gap: 2px; min-width: 0; }
.rl-room-target > div > small { color: #ffb59c; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.rl-room-target > div > b { font-size: 18px; }
.rl-room-target > div > span { color: var(--c-muted); font-size: 12px; }
.rl-room-stats { display: grid; grid-template-columns: 1fr .72fr 1fr; gap: 6px; }
.rl-room-stats > div { display: grid; gap: 2px; min-width: 0; padding: 7px; border-radius: 9px; background: rgba(0,0,0,.24); }
.rl-room-stats small { color: var(--c-muted); font-size: 10px; }
.rl-room-stats b { overflow: hidden; color: #f7ead0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.rl-room-countdown { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; border: 1px solid rgba(240,180,60,.4); border-radius: 9px; background: rgba(0,0,0,.25); }
.rl-room-countdown > span { color: var(--c-amber-pale); font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.rl-room-clock { color: #fff1cf; font: 900 18px ui-monospace, monospace; }
.rl-room-banner .rl-bar { height: 22px; }
.rl-room-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 3px 2px 0; }
.rl-room-section-title b { font-size: 15px; }
.rl-room-section-title small { color: var(--c-muted); font-size: 11px; }
.rl-room-roster { display: grid; gap: 6px; }
.rl-room-member, .rl-invite-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 8px; align-items: center; min-height: 58px; padding: 6px 8px; border: 1px solid var(--c-line); border-radius: 11px; background: linear-gradient(110deg, rgba(255,255,255,.07), rgba(0,0,0,.12)); text-align: left; }
.rl-room-avatar { width: 38px; height: 38px; overflow: hidden; border: 2px solid var(--c-amber-lo); border-radius: 50%; background: var(--c-ink); }
.rl-room-avatar .rl-face-img { width: 100% !important; height: 100% !important; object-fit: cover; }
.rl-room-member-main { display: grid; gap: 1px; min-width: 0; }
.rl-room-member-main > b, .rl-invite-row b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rl-room-member-main > small, .rl-invite-row small { color: var(--c-muted); font-size: 10px; }
.rl-room-unit-count { color: var(--c-amber-pale); font-size: 11px; white-space: nowrap; }
.rl-room-invites { display: grid; gap: 7px; padding: 9px; border: 1px dashed var(--c-line-hi); border-radius: 11px; background: rgba(0,0,0,.12); }
.rl-room-invites > div:first-child { display: grid; gap: 1px; }
.rl-room-invites > div:first-child b { font-size: 12px; }
.rl-room-invites > div:first-child small { color: var(--c-muted); font-size: 10px; }
.rl-room-invite-slots { display: flex; flex-wrap: wrap; gap: 5px; }
.rl-room-empty-slot { display: grid; place-items: center; width: 25px; height: 25px; border: 1px dashed var(--c-line-hi); border-radius: 50%; color: var(--c-muted); font-size: 13px; }
.rl-armies { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.rl-armies > span { display: inline-flex; align-items: center; gap: 2px; color: var(--c-text-2); font-size: 9px; white-space: nowrap; }
.rl-armies .tr-ico { transform: scale(.75); transform-origin: left center; margin-right: -5px; }
.rl-invite-row { width: 100%; color: var(--c-text); }
.rl-invite-avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px dashed var(--c-line-hi); border-radius: 50%; color: var(--c-good-hi); font-size: 20px; }
.rl-invite-row > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.rl-invite-send { color: var(--c-amber-hi); font-size: 19px; }
.rl-room-result { padding: 10px; border: 1px solid var(--c-line-hi); border-radius: 10px; text-align: center; font-weight: 900; }
.rl-room-result.good { color: var(--c-good-hi); }
.rl-room-result.bad { color: var(--c-blood-hi); }
.rl-room-actions { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px -4px 0; padding: 9px 4px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(240,180,60,.28); background: linear-gradient(rgba(17,24,19,.9), #111813 35%); }
.rl-room-actions > button { min-height: 46px; border-radius: 11px; font-weight: 900; }
.rl-room-actions .danger { color: #ffe9df; border: 1px solid #a33a32; background: linear-gradient(#763029, #451b18); }
.rl-assemble { color: var(--c-amber-ink); border: 1px solid var(--c-amber-lo); background: linear-gradient(#ffda7a, #d9972a); }

/* sheets */
.rl-tgt { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; width: 100%; margin-bottom: 6px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line); text-align: left; }
.rl-tgt > div { display: grid; gap: 1px; min-width: 0; } .rl-tgt small { font-size: 12px; color: var(--muted); }
.rl-tgt .rl-art { width: 52px; height: 52px; } .rl-tgt .rl-go { font-size: 22px; color: var(--pn-gold, var(--c-amber)); padding: 0 4px; }
.rl-chips, .rl-preps { display: flex; gap: 6px; margin: 4px 0 10px; }
.rl-chips { flex-wrap: wrap; } .rl-chips button { flex: 1 1 auto; } /* five kinds of target: a second row on a narrow phone */
.rl-chips button, .rl-preps button { flex: 1; min-height: 40px; padding: 4px 6px; display: grid; place-items: center; line-height: 1.15; }
.rl-preps small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.rl-chips button.on, .rl-preps button.on { background: var(--accent); color: var(--c-amber-ink); border-color: var(--c-amber-lo); font-weight: 800; } .rl-preps button.on small { color: #5a3f0c; }
.rl-equalize { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.045); cursor: pointer; }
.rl-equalize input { width: 19px; height: 19px; accent-color: var(--c-good); }
.rl-equalize span { display: grid; gap: 1px; }
.rl-equalize small { color: var(--muted); font-size: 11px; }
.rl-eta { display: grid; gap: 1px; margin: 8px 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: 13px; color: var(--muted); text-align: center; }
.rl-eta.ok { border-color: var(--good); background: rgba(94,196,107,.12); color: var(--text); } .rl-eta.ok small { color: var(--good); font-weight: 700; }
.rl-eta.late { border-color: var(--bad); background: rgba(224,87,76,.12); color: var(--text); } .rl-eta.late small { color: #ffb3aa; font-weight: 700; }
.rl-odds { margin: 8px 0; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 12.5px; text-align: center; color: var(--muted); }
.rl-odds.cake, .rl-odds.good { border-color: var(--good); color: #b9f0c0; } .rl-odds.even { border-color: var(--accent); color: var(--c-amber-pale); } .rl-odds.risky, .rl-odds.deadly { border-color: var(--bad); color: #ffb3aa; }

/* the rally call: a round button left of the Clan icon while a clanmate's rally can still be joined */
.rl-call { position: fixed; z-index: 30; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: none; display: grid; place-items: center;
  background: conic-gradient(#ffd23f var(--p, 360deg), rgba(40,26,10,.85) 0); box-shadow: 0 4px 10px rgba(0,0,0,.55), 0 0 0 2px #3e2814; animation: rlCall 1.6s ease-in-out infinite; }
.rl-call.hidden { display: none; }
/* fixed on the body, above everything: hidden at once (no wait for the next placement tick) under a sheet, the Queue panel, the Search drawer and a ring that reaches the HUD rails */
body:has(#sheet:not(.hidden)) .rl-call, body:has(#qp.open) .rl-call, body:has(#map-search:not(.hidden)) .rl-call, body:has(#view.ring-wide) .rl-call, body:has(#view.card-wide) .rl-call { display: none; }
.rl-call::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #e8574c, #8a1f1a 75%); box-shadow: inset 0 2px 0 rgba(255,255,255,.25); }
.rl-call > * { position: relative; }
.rl-call .ic { font-size: 22px; line-height: 1; margin-top: -8px; }
.rl-call b { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.rl-call i { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 2px); font-style: normal; font-size: 10px; font-weight: 800; color: #ffe7a6; background: rgba(20,14,6,.8); border-radius: 8px; padding: 0 5px; white-space: nowrap; }
.rl-call em { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #e33; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.rl-call.pop { animation: rlPop .45s ease-out, rlCall 1.6s ease-in-out .45s infinite; }
@keyframes rlCall { 50% { transform: scale(1.08); box-shadow: 0 4px 10px rgba(0,0,0,.55), 0 0 0 2px #3e2814, 0 0 16px 4px rgba(255,120,60,.55); } }
@keyframes rlPop { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- rally card (owner, 2026-10-22): DWS layout in our wasteland look ---------- */
.rl2 { margin: 0 0 12px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #2a2418, #17140d); border: 1px solid rgba(240,180,60,.45);
  box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,230,160,.12); }
.rl2.joined { border-color: #7fd36a; box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 0 1px rgba(127,211,106,.35); }
.rl2-strip { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; color: #fff3d6;
  background: linear-gradient(180deg, #a8432a, #6e2414); border-bottom: 2px solid #d9a63a; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.rl2-strip > b { font: 900 17px/1 system-ui; letter-spacing: .02em; margin-right: auto; }
.rl2-ic { font-size: 18px; filter: drop-shadow(0 1px 1px #000); }
.rl2-strip .rl-x { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 8px; font: 900 15px/1 system-ui; color: #fff; background: linear-gradient(#e0574c, #8e2414);
  border: 1.5px solid #ffcbc4; box-shadow: 0 2px 0 #4a120a; }
.rl2-body { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 10px; cursor: pointer; }
.rl2-target { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; min-height: 0; padding: 8px 4px 6px;
  border-radius: 10px; border: 1.5px solid rgba(240,180,60,.6); color: #fff3d6; text-shadow: 0 1px 2px #000;
  background: radial-gradient(circle at 50% 45%, rgba(224,87,76,.55), transparent 65%), linear-gradient(180deg, #5a2a1c, #2a140c); }
.rl2-target .nm { font: 900 13px/1.1 system-ui; text-align: center; }
.rl2-target .art { display: grid; place-items: center; min-height: 84px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.rl2-target .art .rl-emo { font-size: 54px; }
.rl2-target .km { font-size: 11px; font-weight: 800; color: #d8f5c8; border-bottom: 2px solid #5ec46b; padding: 0 2px; }
.rl2-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rl2-lead { display: flex; align-items: center; gap: 9px; }
.rl2-ava { flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  border: 2px solid #f0b43c; box-shadow: 0 0 10px rgba(240,180,60,.45); background: #0d0d0a; }
.rl2-ava img, .rl2-ava canvas, .rl2-ava .pn-portrait { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0; }
.rl2-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rl2-who > b { font: 800 15px/1.15 system-ui; color: #ece8d6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl2-state { font: 800 13px/1.2 system-ui; color: var(--pc); text-shadow: 0 0 8px color-mix(in srgb, var(--pc) 45%, transparent); }
.rl2 .rl-join { flex: none; width: 46px; height: 46px; min-height: 0; padding: 0; border-radius: 12px; display: grid; place-items: center; font: 900 26px/1 system-ui; color: #2a1a05;
  background: linear-gradient(#ffd56a, #e8a52a); border: 1.5px solid #fff1c9; box-shadow: 0 3px 0 #a86f12, 0 0 12px rgba(255,200,80,.5); }
.rl2 .rl-join .when { display: none; } .rl2 .rl-join.late, .rl2 .rl-join.none { filter: grayscale(.7); }
.rl2 .rl-mine { flex: none; text-align: right; font-size: 11px; } .rl2 .rl-mine b { display: block; color: #8fd27a; font-size: 12px; }
.rl2-frames { display: flex; gap: 6px; overflow-x: auto; padding: 6px; border-radius: 10px; background: rgba(0,0,0,.35); box-shadow: inset 0 1px 4px rgba(0,0,0,.6); scrollbar-width: none; }
.rl2-frame { position: relative; flex: none; width: 46px; height: 46px; border-radius: 9px; overflow: hidden; display: grid; place-items: center;
  border: 2px solid #c8912a; background: #1a1a14; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.rl2-frame img, .rl2-frame canvas, .rl2-frame .pn-portrait { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0; }
.rl2-frame.lead { border-color: #ffd56a; box-shadow: 0 0 8px rgba(255,210,90,.6); }
.rl2-frame.me { border-color: #7fd36a; }
.rl2-frame.walking { opacity: .55; }
.rl2-frame.empty { border: 1.5px dashed rgba(240,180,60,.35); background: rgba(240,180,60,.06); box-shadow: none; }
.rl2-frame.empty .who { font-style: normal; font-size: 20px; opacity: .35; }
.rl2-frame .auto { position: absolute; right: 1px; bottom: 1px; font: 900 9px/1 system-ui; font-style: normal; padding: 1px 3px; border-radius: 4px; background: #4e8fe0; color: #fff; }
.rl2-foot { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #c9c3a8; }
.rl2-foot b { color: #ece8d6; font: 900 16px/1 system-ui; font-variant-numeric: tabular-nums; } .rl2-foot b.full { color: #8fd27a; }
.rl2-in { flex: none; padding: 5px 9px; border-radius: 999px; font: 900 12px/1 system-ui; color: #102010; background: linear-gradient(#a8ef8a, #4fae3f); box-shadow: 0 2px 0 #2c6a24; }
.rl2-frame.empty .who { font: 900 20px/1 system-ui; color: #f0b43c; opacity: .5; }

/* the rally banner folds the troop details out (owner) */
.rl-room-banner.tap { cursor: pointer; }
.rl-room-more { margin-top: 8px; text-align: center; font: 800 13px/1 system-ui; color: #f0c860; padding: 7px; border-radius: 9px; background: rgba(240,180,60,.1); border: 1px dashed rgba(240,180,60,.35); }
.rl-room-banner.open .rl-room-more { background: rgba(240,180,60,.18); }
.rl-members-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: linear-gradient(180deg, #a8432a, #6e2414); border: 1px solid #d9a63a; color: #fff3d6; }
.rl-members-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .rl-members-head b { font: 900 16px/1.1 system-ui; } .rl-members-head small { font-size: 12px; opacity: .9; }
/* the leader's ✕ on the rally screens */
.rl-room-banner { position: relative; }
.rl-room-x, .rl-members-head .rl-x { width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 9px; font: 900 15px/1 system-ui; color: #fff;
  background: linear-gradient(#e0574c, #8e2414); border: 1.5px solid #ffcbc4; box-shadow: 0 2px 0 #4a120a; }
.rl-room-x { position: absolute; top: 10px; right: 10px; z-index: 2; }
/* Rally incoming: another clan's rally on my base (or a clanmate's): a red pill at the top of the screen, tap = show it on the map */
.rl-incoming { position: fixed; z-index: 31; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 68px); transform: translateX(-50%); max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 2px solid #ffb3a8; border-radius: 22px; color: #fff; text-align: left;
  background: linear-gradient(180deg, #d8392c, #7e1610); box-shadow: 0 4px 12px rgba(0,0,0,.55); animation: rlWarn 1.2s ease-in-out infinite; }
.rl-incoming.hidden { display: none; }
.rl-incoming .ic { font-size: 22px; line-height: 1; }
.rl-incoming b { display: block; font-size: 13px; font-weight: 900; letter-spacing: .3px; text-transform: uppercase; }
.rl-incoming small { display: block; font-size: 11px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-incoming em { font-style: normal; font-weight: 900; font-size: 15px; margin-left: 4px; font-variant-numeric: tabular-nums; }
@keyframes rlWarn { 50% { box-shadow: 0 4px 12px rgba(0,0,0,.55), 0 0 18px 5px rgba(255,70,50,.7); } }
/* my base is the target of an attack or a rally: the screen edges glow red, softly, and breathe slowly (taps go through) */
.rl-glow { position: fixed; inset: 0; z-index: 29; pointer-events: none; box-shadow: inset 0 0 70px 14px rgba(220,40,30,.38); animation: rlGlow 2.8s ease-in-out infinite; }
.rl-glow.hidden { display: none; }
#view > .rl-glow { position: absolute; } /* inside the game column (see panels-rally.js) */
@keyframes rlGlow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rl-glow { animation: none; opacity: .7; } }
/* Auto-Rally runs 12 hours (owner 2026-10-24): time left after the name, ↻ starts a fresh run */
.rl-auto .rl-left { font-weight: 700; font-size: 13px; color: #8fd8ff; } .rl-auto .rl-left.off { color: var(--muted); font-weight: 600; }
.rl-auto-btns { display: flex; align-items: center; gap: 8px; }
.rl-renew { flex: none; width: 50px; height: 50px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #b98a64, #7a5434 70%); border: 3px solid #e8c79a; box-shadow: 0 4px 8px rgba(0,0,0,.45); }
.rl-renew svg { width: 32px; height: 32px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.rl-renew:active { transform: scale(.94) rotate(-30deg); transition: transform .12s; }
.rl-auto .rl-left { white-space: nowrap; }
.rl-auto .rl-name { white-space: nowrap; }
.rl-renew img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0,0,0,.45)); pointer-events: none; }