/* 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); } }