/* panels-social.css: Clan, Leaderboards and Mail (client/panels-social.js). Prefix: sc-. Tokens from style.css / panels.css. */
.sc-mt { margin-top: 10px; }
.sc-big { width: 100%; min-height: 48px; font-size: 16px; border-radius: 12px; }
button.primary.sc-big, .sc-join, .sc-donate { background: linear-gradient(#ffd677, var(--pn-gold) 45%, var(--pn-gold2)); box-shadow: 0 3px 0 var(--pn-gold-dark), 0 6px 14px rgba(0,0,0,.35); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
button.primary.sc-big:active:not(:disabled), .sc-join:active:not(:disabled), .sc-donate:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--pn-gold-dark); }
.sc-confirm { margin: 6px 0 4px; color: var(--muted); line-height: 1.45; }
.sc-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(#2a382f, var(--c-panel)); }
.sc-tabs button.active { background: linear-gradient(#ffd677, var(--pn-gold) 50%, var(--pn-gold2)); box-shadow: 0 0 12px rgba(240,180,60,.35); }
.sc-tabs { padding-top: 6px; }
.sc-ti { font-size: 15px; }
.sc-tag { display: inline-block; background: linear-gradient(#ffd677, var(--pn-gold)); color: var(--c-amber-ink); font-weight: 900; font-size: .78em; letter-spacing: .04em; border-radius: 6px; padding: 1px 6px; margin-right: 6px; vertical-align: 2px; box-shadow: 0 1px 0 var(--pn-gold-dark); }
.sc-you { display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 800; letter-spacing: .06em; background: var(--good); color: var(--c-ink); border-radius: 5px; padding: 1px 5px; vertical-align: 2px; }
.sc-emblem { display: block; flex: 0 0 auto; filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.sc-ini { flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; border: 2px solid var(--pn-gold2); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.sc-av { flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--pn-gold2); }
.sc-note-card { font-size: 13px; color: var(--muted); background: var(--c-ink); border: 1px dashed var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; }

/* ---------- clan: no clan ---------- */
:where(.pn-wrap:not(.sc-root)) .sc-hero { position: relative; overflow: hidden; text-align: center; border-radius: 18px; padding: 14px 14px 12px; margin-bottom: 12px; border: 1px solid var(--pn-gold2);
  background: radial-gradient(circle at 50% 0%, rgba(240,180,60,.28), transparent 60%), linear-gradient(160deg, #2b3366, #141c33 55%, #10160f); box-shadow: inset 0 1px 0 rgba(255,220,140,.18), 0 6px 18px rgba(0,0,0,.4); }
.sc-hero-shields { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin-bottom: 6px; }
.sc-hero-shields .sc-emblem:not(:nth-child(2)) { opacity: .8; transform: translateY(-2px) rotate(-8deg); }
.sc-hero-shields .sc-emblem:nth-child(3) { transform: translateY(-2px) rotate(8deg); }
.sc-hero-t { font-size: 22px; font-weight: 900; color: var(--pn-gold); text-shadow: 0 2px 0 #000, 0 0 16px rgba(240,180,60,.45); letter-spacing: .02em; }
.sc-hero-s { font-size: 13px; color: #c9d6cc; margin: 4px auto 8px; max-width: 300px; }
.sc-perks { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sc-perks span { font-size: 11px; font-weight: 700; background: rgba(0,0,0,.4); border: 1px solid rgba(240,180,60,.45); color: var(--c-amber-pale); border-radius: 999px; padding: 3px 9px; }
.sc-search { position: relative; margin-bottom: 10px; }
.sc-search input { padding-left: 36px; min-height: 44px; border-radius: 12px; }
.sc-search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 15px; opacity: .8; }
.sc-clan-list { display: grid; gap: 8px; }
.sc-clan-card { display: grid; grid-template-columns: 50px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; cursor: pointer; border: 1px solid hsl(var(--hue) 35% 35%);
  background: linear-gradient(110deg, hsl(var(--hue) 40% 20% / .9), var(--panel) 55%); box-shadow: 0 3px 10px rgba(0,0,0,.35); transition: transform .08s; }
.sc-clan-card:active { transform: scale(.98); }
.sc-cc-mid { min-width: 0; }
.sc-cc-name { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-cc-name.sc-lg { font-size: 18px; }
.sc-cc-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-cc-stats { display: flex; gap: 10px; font-size: 12px; margin-top: 2px; }
.sc-pow { color: var(--pn-gold); font-weight: 700; }
.sc-cc-bar { height: 5px; margin-top: 4px; }
.sc-join { min-width: 66px; min-height: 40px; font-weight: 800; }
.sc-sheet-emb { display: grid; place-items: center; margin: 6px 0 8px; }
.sc-desc { font-size: 14px; line-height: 1.4; background: var(--c-ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-create { padding: 12px; }
.sc-create-prev { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sc-lbl { font-size: 12px; font-weight: 700; color: var(--pn-gold); text-transform: uppercase; letter-spacing: .05em; display: flex; justify-content: space-between; margin-top: 2px; }
.sc-lbl .pn-note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sc-tag-in { text-transform: uppercase; letter-spacing: .3em; font-weight: 900; font-size: 18px; text-align: center; min-height: 44px; }
.sc-cost { font-size: 12px; color: var(--muted); text-align: center; margin: 10px 0 8px; }

/* ---------- clan: banner ---------- */
:where(.pn-wrap:not(.sc-root)) .sc-banner { position: relative; overflow: hidden; border-radius: 18px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--pn-gold2);
  background: radial-gradient(circle at 18% 30%, hsl(var(--hue) 70% 50% / .45), transparent 55%), linear-gradient(150deg, hsl(var(--hue) 35% 22%), #121a15 70%);
  box-shadow: inset 0 1px 0 rgba(255,220,140,.2), 0 8px 20px rgba(0,0,0,.45); }
:where(.pn-wrap:not(.sc-root)) .sc-banner::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 8px, transparent 8px 16px); }
.sc-banner-top { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center; }
.sc-banner-emb { animation: scFloat 4s ease-in-out infinite; }
@keyframes scFloat { 50% { transform: translateY(-3px); } }
.sc-banner-id { min-width: 0; }
.sc-banner-name { font-size: 20px; font-weight: 900; line-height: 1.15; text-shadow: 0 2px 0 #000; overflow-wrap: anywhere; }
.sc-banner-lead { font-size: 13px; color: #d9e4dc; margin: 3px 0 5px; }
.sc-role-chip { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid var(--line); }
.sc-role-chip.r5 { color: var(--c-amber-pale); border-color: var(--pn-gold); box-shadow: 0 0 10px rgba(240,180,60,.35); }
.sc-role-chip.r4 { color: #a9d0ff; border-color: var(--c-blue); }
.sc-banner-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.sc-banner-stats div { background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 6px 4px; text-align: center; display: grid; }
.sc-banner-stats b { color: var(--pn-gold); font-size: 16px; font-weight: 800; }
.sc-banner-stats span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sc-banner-desc { position: relative; z-index: 1; display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 13px; color: #d2ddd5; font-style: italic; background: rgba(0,0,0,.3); border-radius: 10px; padding: 7px 9px; overflow-wrap: anywhere; }
.sc-banner-desc span { flex: 1; white-space: pre-wrap; }
.sc-edit { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 10px; background: rgba(0,0,0,.4); border-color: var(--pn-gold2); font-style: normal; }
.sc-tab-body { min-height: 120px; }
.sc-leave { display: block; width: 100%; margin-top: 18px; min-height: 44px; background: transparent; border: 1px solid #7a3530; color: #f08a80; font-weight: 700; border-radius: 12px; }

/* members */
.sc-mem-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 0 2px 6px; }
.sc-mem-list { display: grid; gap: 6px; }
.sc-mem { display: grid; grid-template-columns: 42px 1fr auto 34px; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.sc-mem.r5 { border-color: var(--pn-gold2); background: linear-gradient(100deg, #2e2711, var(--panel) 60%); }
.sc-mem.r4 { border-color: #3b5f8c; background: linear-gradient(100deg, #18263a, var(--panel) 60%); }
.sc-mem.me { box-shadow: inset 3px 0 0 var(--good); }
.sc-mem-av { position: relative; width: 42px; height: 42px; }
.sc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #5d6b62; border: 2px solid var(--panel); vertical-align: -1px; }
.sc-dot.on { background: #43e36b; box-shadow: 0 0 6px #43e36b; }
.sc-mem-av .sc-dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; }
.sc-mem-mid { min-width: 0; }
.sc-mem-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-crown { margin-right: 4px; }
.sc-mem-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-mem-right { display: grid; justify-items: end; font-size: 12px; }
.sc-mem-right b { color: var(--pn-gold); font-weight: 800; }
.sc-mem-right span { color: var(--muted); font-size: 11px; }
.sc-more { width: 34px; height: 34px; padding: 0; border-radius: 10px; font-size: 18px; line-height: 1; font-weight: 900; }
.sc-sheet-acts { display: grid; gap: 8px; margin-top: 10px; }
.sc-sheet-acts button { min-height: 46px; font-weight: 700; text-align: left; padding-left: 14px; }

/* tech */
.sc-tech { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding: 10px; margin-bottom: 8px; border-radius: 14px; background: linear-gradient(#1f2a22, #16201a); border: 1px solid var(--line); }
.sc-tech.maxed { border-color: var(--pn-gold); box-shadow: 0 0 12px rgba(240,180,60,.2) inset; }
.sc-tech-ic { position: relative; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; background: radial-gradient(circle at 40% 30%, #3b4a8c, #141c33 75%); border: 2px solid var(--pn-gold2); box-shadow: 0 3px 8px rgba(0,0,0,.45); }
.sc-tech-lv { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 900; background: var(--pn-gold); color: var(--c-amber-ink); border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.sc-tech-mid { min-width: 0; }
.sc-tech-name { font-weight: 800; }
.sc-tech-eff { font-size: 12px; color: var(--good); }
.sc-next { color: var(--muted); }
.sc-pips { display: flex; gap: 3px; margin: 4px 0 2px; }
.sc-pips i { width: 16px; height: 6px; border-radius: 3px; background: var(--c-ink); border: 1px solid var(--line); }
.sc-pips i.on { background: linear-gradient(var(--c-amber-pale), var(--pn-gold)); border-color: var(--pn-gold2); box-shadow: 0 0 5px rgba(240,180,60,.6); }
.sc-tech-bar { position: relative; height: 14px; border-radius: 7px; }
.sc-tech-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; }
.sc-donate { min-height: 40px; min-width: 70px; font-weight: 800; }
.sc-res-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sc-res-pick button { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; font-size: 12px; border-radius: 12px; }
.sc-res-pick button .ic { font-size: 22px; }
.sc-res-pick button.on { border-color: var(--pn-gold); background: #2a2410; box-shadow: 0 0 10px rgba(240,180,60,.35); }
.sc-presets { display: flex; gap: 6px; margin-bottom: 8px; }
.sc-presets button { flex: 1; min-height: 38px; font-weight: 700; }
.sc-don-info { margin: 8px 0 2px; }

/* help */
:where(.pn-wrap:not(.sc-root)) .sc-help { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 14px 10px; border-radius: 18px; background: radial-gradient(circle at 50% 40%, rgba(94,196,107,.18), transparent 60%), var(--panel); border: 1px solid var(--line); }
.sc-help-btn { width: 150px; height: 150px; padding: 8px; border-radius: 50%; border: 0; background: conic-gradient(#5d6b62 var(--p), var(--good) var(--p)); box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 26px rgba(94,196,107,.35); }
.sc-help-btn:not(:disabled) { animation: scPulse 2s ease-in-out infinite; }
.sc-help-btn:disabled { opacity: 1; filter: grayscale(.8) brightness(.8); }
.sc-help-in { width: 100%; height: 100%; border-radius: 50%; display: grid; place-content: center; gap: 2px; background: radial-gradient(circle at 40% 30%, #7fe08c, #2e8a3e 70%, #1d5a28); border: 3px solid #b8f5c1; box-shadow: inset 0 -6px 0 rgba(0,0,0,.25); }
.sc-help-in .ic { font-size: 48px; line-height: 1; }
.sc-help-in .lb { font-weight: 900; color: #fff; letter-spacing: .08em; text-shadow: 0 2px 0 #1d5a28; }
.sc-help-btn:active:not(:disabled) { transform: scale(.95); }
@keyframes scPulse { 50% { box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 40px rgba(94,196,107,.65); } }
.sc-help-count { font-size: 14px; }
.sc-help-count b { color: var(--pn-gold); font-size: 18px; }

/* gifts */
.sc-gifts { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 16px 12px; border-radius: 18px; background: radial-gradient(circle at 50% 30%, rgba(240,180,60,.12), transparent 60%), var(--panel); border: 1px solid var(--line); }
.sc-gifts.has { border-color: var(--pn-gold2); }
.sc-chest-wrap { position: relative; width: 170px; height: 140px; display: grid; place-items: center; }
.sc-rays { position: absolute; inset: -10px; border-radius: 50%; opacity: 0; background: repeating-conic-gradient(rgba(255,214,119,.35) 0 10deg, transparent 10deg 24deg); mask: radial-gradient(circle, #000 25%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); }
.sc-gifts.has .sc-rays { opacity: 1; animation: scSpin 14s linear infinite; }
@keyframes scSpin { to { transform: rotate(360deg); } }
.sc-chest { position: relative; width: 104px; height: 84px; }
.sc-gifts.has .sc-chest { animation: scWiggle 2.4s ease-in-out infinite; }
@keyframes scWiggle { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-5deg); } 80% { transform: rotate(5deg); } 85% { transform: rotate(-3deg); } 90% { transform: rotate(2deg); } }
.sc-chest .lid { position: absolute; left: 0; right: 0; top: 0; height: 34px; border-radius: 40px 40px 6px 6px; background: linear-gradient(90deg, transparent 14px, #e7b44a 14px 22px, transparent 22px calc(100% - 22px), #e7b44a calc(100% - 22px) calc(100% - 14px), transparent 0), linear-gradient(#b2652c, #7a3f17); border: 3px solid #3b1f0a; }
.sc-chest .box { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; border-radius: 4px 4px 10px 10px; background: linear-gradient(90deg, transparent 14px, #e7b44a 14px 22px, transparent 22px calc(100% - 22px), #e7b44a calc(100% - 22px) calc(100% - 14px), transparent 0), linear-gradient(#9a5424, #5e2f10); border: 3px solid #3b1f0a; border-top-width: 2px; }
.sc-chest .lock { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); width: 20px; height: 24px; border-radius: 4px 4px 9px 9px; background: linear-gradient(var(--c-amber-pale), var(--c-amber-lo)); border: 2px solid #3b1f0a; }
.sc-gifts:not(.has) .sc-chest { filter: grayscale(.85) brightness(.6); }
.sc-chest-n { position: absolute; right: 8px; top: 8px; background: var(--bad); color: #fff; font-weight: 900; border-radius: 999px; padding: 2px 9px; border: 2px solid #fff4; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.sc-gift-t { font-size: 18px; font-weight: 900; color: var(--pn-gold); text-shadow: 0 2px 0 #000; }
:where(.pn-wrap:not(.sc-root)) .sc-loot { margin-top: 10px; }

/* attachments (gifts + mail) */
.sc-att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.sc-att { display: grid; justify-items: center; gap: 1px; padding: 8px 4px 6px; border-radius: 12px; background: radial-gradient(circle at 50% 30%, #3a3214, #12180f 80%); border: 1px solid var(--pn-gold2); box-shadow: inset 0 1px 0 rgba(255,220,140,.15); }
.sc-att .ic { font-size: 26px; line-height: 1.1; }
.sc-att b { color: #fff; font-size: 13px; text-shadow: 0 1px 2px #000; }
.sc-att small { font-size: 9px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }

/* ---------- leaderboards ---------- */
.sc-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 6px; align-items: end; margin: 8px 0 12px; padding: 14px 6px 0; border-radius: 18px; background: radial-gradient(circle at 50% 10%, rgba(240,180,60,.25), transparent 60%); }
.sc-pod { display: grid; justify-items: center; gap: 2px; text-align: center; min-width: 0; cursor: pointer; }
.sc-pod.empty { visibility: hidden; }
.sc-pod-face { position: relative; display: grid; place-items: center; margin-bottom: 4px; }
.sc-pod-face .sc-ini, .sc-pod-face .sc-av { border-width: 3px; }
.sc-pod.p1 .sc-pod-face .sc-ini, .sc-pod.p1 .sc-pod-face .sc-av { border-color: #ffd65a; box-shadow: 0 0 18px rgba(255,214,90,.6); }
.sc-pod.p2 .sc-pod-face .sc-ini, .sc-pod.p2 .sc-pod-face .sc-av { border-color: #d6dde6; }
.sc-pod.p3 .sc-pod-face .sc-ini, .sc-pod.p3 .sc-pod-face .sc-av { border-color: #d48a4a; }
.sc-pod-crown { position: absolute; top: -20px; font-size: 22px; animation: scFloat 3s ease-in-out infinite; z-index: 1; }
.sc-medal { position: absolute; right: -6px; bottom: -6px; font-size: 20px; filter: drop-shadow(0 2px 2px #000); }
.sc-pod-name { font-weight: 800; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-pod-tag { font-size: 11px; color: var(--muted); }
.sc-pod-val { font-size: 12px; font-weight: 800; color: var(--pn-gold); margin-bottom: 4px; }
.sc-plinth { width: 100%; display: grid; place-items: start center; padding-top: 6px; font-size: 26px; font-weight: 900; color: rgba(0,0,0,.35); text-shadow: 0 1px 0 rgba(255,255,255,.4); border-radius: 10px 10px 0 0; border: 1px solid rgba(255,255,255,.25); border-bottom: 0; }
.sc-pod.p1 .sc-plinth { height: 78px; background: linear-gradient(#ffe48a, #e0a52a 45%, #8a5a10); box-shadow: 0 0 22px rgba(255,200,80,.35); }
.sc-pod.p2 .sc-plinth { height: 56px; background: linear-gradient(#f2f5f8, #aab4bf 45%, #5d6670); }
.sc-pod.p3 .sc-plinth { height: 42px; background: linear-gradient(#f0b07a, #b86a2c 45%, #6a3712); }
.sc-pod.me .sc-pod-name { color: var(--good); }
.sc-lb-list { display: grid; gap: 5px; }
.sc-lb-row { display: grid; grid-template-columns: 34px 34px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px 7px 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.sc-lb-row .sc-emblem { justify-self: center; }
.sc-lb-row.mine { border-color: var(--good); background: linear-gradient(100deg, #1d3a24, var(--panel) 60%); }
.sc-rk { text-align: center; font-weight: 900; font-size: 15px; color: var(--muted); }
.sc-lb-name { min-width: 0; font-weight: 700; }
.sc-lb-name > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-mini-tag { font-size: 11px; color: var(--muted); font-weight: 400; }
.sc-lb-val { font-weight: 800; color: var(--pn-gold); white-space: nowrap; }
.sc-lb { display: flex; flex-direction: column; min-height: calc(100vh - 250px); }
.sc-me-pin { position: sticky; bottom: calc(-24px - var(--safe-bottom)); margin: auto -12px 0; padding: 14px 12px calc(10px + var(--safe-bottom)); background: linear-gradient(transparent, var(--bg) 35%); z-index: 4; }
.sc-lb-list + .sc-me-pin, .sc-podium + .sc-me-pin { margin-top: 10px; }
:where(.pn-wrap:not(.sc-root)) .sc-me { cursor: default; border: 1px solid var(--pn-gold); background: linear-gradient(100deg, #3a2e0e, #1d2318 70%); box-shadow: 0 -4px 18px rgba(0,0,0,.55), 0 0 14px rgba(240,180,60,.25); }
:where(.pn-wrap:not(.sc-root)) .sc-me .sc-rk { color: var(--pn-gold); font-size: 14px; }

/* ---------- mail ---------- */
.sc-mail-acts { display: flex; gap: 8px; margin-bottom: 10px; }
.sc-mail-acts button { flex: 1; min-height: 40px; font-size: 13px; font-weight: 700; border-radius: 12px; }
.sc-mail-list { display: grid; gap: 6px; }
.sc-mail { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 14px; cursor: pointer; background: var(--panel); border: 1px solid var(--line); transition: transform .08s; }
.sc-mail:active { transform: scale(.985); }
.sc-mail.unread { background: linear-gradient(100deg, hsl(var(--h) 45% 20%), var(--panel) 60%); border-color: hsl(var(--h) 40% 38%); }
.sc-mail-ic { position: relative; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: radial-gradient(circle at 40% 30%, hsl(var(--h) 45% 36%), hsl(var(--h) 50% 13%) 80%); border: 1px solid hsl(var(--h) 40% 45%); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.sc-mail.win .sc-mail-ic { background: radial-gradient(circle at 40% 30%, #3f8f4c, #10301a 80%); border-color: var(--c-good); }
.sc-mail.loss .sc-mail-ic { background: radial-gradient(circle at 40% 30%, #9a3a32, #3a0f0c 80%); border-color: var(--c-blood); }
.sc-mail.read .sc-mail-ic { filter: saturate(.45) brightness(.8); }
.sc-mail-ic .dot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bad); border: 2px solid var(--bg); box-shadow: 0 0 6px var(--bad); }
.sc-mail-mid { min-width: 0; }
.sc-mail-t { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-mail.read .sc-mail-t { font-weight: 500; color: #c3d0c6; }
.sc-mail-p { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-mail-meta { display: grid; justify-items: end; gap: 3px; font-size: 11px; color: var(--muted); }
.sc-mail-flags { display: flex; gap: 4px; align-items: center; min-height: 18px; }
.sc-mail-flags .fav { color: var(--pn-gold); font-size: 14px; }
.sc-mail-flags .gift { font-size: 15px; filter: drop-shadow(0 0 4px rgba(240,180,60,.8)); animation: scBob 1.6s ease-in-out infinite; }
.sc-mail-flags .gift.done { color: var(--good); filter: none; animation: none; font-weight: 900; }
@keyframes scBob { 50% { transform: translateY(-2px) rotate(-6deg); } }
.sc-more-mail { width: 100%; min-height: 42px; margin-top: 4px; }
.sc-mail-empty { text-align: center; color: var(--muted); padding: 34px 10px; }
.sc-mail-empty .ic { font-size: 46px; opacity: .5; margin-bottom: 6px; }
.sc-star { width: 40px; height: 40px; padding: 0 !important; font-size: 22px !important; line-height: 1; background: rgba(0,0,0,.35); border-color: #5a3f20; color: #c9b892; border-radius: 12px; }
.sc-star.on { color: #ffd65a; text-shadow: 0 0 10px rgba(255,214,90,.8); border-color: var(--pn-gold); }
.sc-mail-head { position: relative; overflow: hidden; display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; margin-bottom: 10px;
  background: radial-gradient(circle at 15% 50%, hsl(var(--h) 55% 35% / .7), transparent 60%), linear-gradient(140deg, hsl(var(--h) 30% 18%), #121a15 70%); border: 1px solid hsl(var(--h) 40% 40%); }
.sc-mail-head.win { background: radial-gradient(circle at 15% 50%, rgba(94,196,107,.5), transparent 60%), linear-gradient(140deg, #1a3a22, #121a15 70%); border-color: var(--good); }
.sc-mail-head.loss { background: radial-gradient(circle at 15% 50%, rgba(224,87,76,.5), transparent 60%), linear-gradient(140deg, #3a1a18, #121a15 70%); border-color: var(--bad); }
.sc-mail-big { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-size: 32px; background: rgba(0,0,0,.4); border: 2px solid var(--pn-gold2); box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.sc-mail-title { font-weight: 900; font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; padding-right: 8px; }
.sc-stamp { position: absolute; right: -8px; top: 8px; transform: rotate(12deg); font-weight: 900; font-size: 13px; letter-spacing: .12em; padding: 3px 14px; border: 2px solid; border-radius: 6px; opacity: .85; }
.sc-stamp.win { color: #8ff09c; border-color: #8ff09c; background: rgba(20,60,30,.6); }
.sc-stamp.loss { color: #ff9a90; border-color: #ff9a90; background: rgba(70,20,18,.6); }
.sc-mail-head:has(.sc-stamp) .sc-mail-title { padding-right: 70px; }
.sc-mail-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sc-chip-btn { cursor: pointer; padding: 4px 10px; font-size: 12px; color: #a9d0ff; border-color: #3b5f8c; }
.sc-letter { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; padding: 14px; border-radius: 14px; margin-bottom: 10px; color: #e3ddcc;
  background: linear-gradient(#18211b, #121a15); border: 1px solid #5a4520; box-shadow: inset 0 1px 0 rgba(255,220,140,.12), inset 3px 0 0 var(--pn-gold2), 0 4px 12px rgba(0,0,0,.4); }
.sc-report-btn { width: 100%; min-height: 46px; margin-bottom: 10px; font-weight: 800; border-radius: 12px; background: linear-gradient(#3b4a8c, #232c5a); border-color: var(--c-blue); }
.sc-attach.claimed .sc-att { filter: grayscale(.7) brightness(.75); }
.sc-attach .sc-big { margin-top: 10px; }
.sc-claimed { text-align: center; margin-top: 10px; font-weight: 900; color: var(--good); letter-spacing: .06em; }
.sc-mail-foot { display: flex; gap: 8px; margin-top: 6px; }
.sc-mail-foot button { flex: 1; min-height: 44px; border-radius: 12px; }

/* Rankings hub pennants */
.rk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding: 4px 4px 20px; }
.rk-pennant { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 8px 30px; cursor: pointer; text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); transition: transform .1s; }
.rk-pennant:active { transform: scale(.97); }
.rk-pennant.ally { background: linear-gradient(170deg, #5a7fc8, #2a3f7a 70%); box-shadow: inset 0 0 0 3px #8fb0ff55; }
.rk-pennant.solo { background: linear-gradient(170deg, #e0a04a, #8a4a1a 70%); box-shadow: inset 0 0 0 3px #ffd27a55; }
.rk-title { font: 900 15px/1.1 system-ui; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45); letter-spacing: .01em; }
.rk-pennant .rk-face { width: 72px; height: 72px; display: grid; place-items: center; /* scoped: panels-rookie.css also has .rk-face (display: block) and pushed the photo off-centre */ border-radius: 14px; background: rgba(0,0,0,.25); box-shadow: 0 0 0 2px rgba(255,255,255,.35); overflow: hidden; }
.rk-pennant .rk-face .pn-portrait, .rk-pennant .rk-face img { border-radius: 12px !important; margin: 0 !important; }
.rk-pennant .rk-face > * { margin: auto; }
.rk-none { font-size: 30px; color: rgba(255,255,255,.5); }
.rk-name { font: 800 13px/1.15 system-ui; color: #fff; text-shadow: 0 1px 0 #000; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-me { font: 700 11px/1 system-ui; color: rgba(255,255,255,.8); min-height: 11px; }

.al-tech-tree { position:relative; margin:12px 0; border-radius:16px; background:radial-gradient(ellipse at top,#334237,#15211b); border:1px solid #6c6142; overflow:hidden; }
.al-tech-wires { position:absolute; width:100%; height:100%; inset:0; pointer-events:none; }
.al-tech-wires path { fill:none; stroke:#697166; stroke-width:3; }
.al-tech-wires path.on { stroke:#d9af56; }
.al-tech-node { position:absolute; transform:translateX(-50%); width:43%; max-width:220px; min-height:120px; padding:8px 5px; display:flex; flex-direction:column; align-items:center; gap:3px; border:2px solid #c49b4c; border-radius:14px; background:linear-gradient(#364d3b,#1b2b21); color:#ffe8b0; box-shadow:0 4px 0 #0b130e; }
.al-tech-node.locked { border-color:#687269; background:linear-gradient(#394139,#222b25); color:#bdc3b5; }
.al-tech-node.maxed { border-color:#ebcf70; box-shadow:0 0 14px #b7984244; }
.al-tech-node.recommended { border-color:#ffe47d; background:linear-gradient(#536039,#263b25); box-shadow:0 0 0 2px #e7c45b55,0 0 22px #ffd65b99,inset 0 0 18px #e6c64b22; animation:clan-recommended-glow 2s ease-in-out infinite alternate; }
.al-tech-node .al-tech-reward { color:#ffe47d; font-weight:800; font-size:10px; }
@keyframes clan-recommended-glow { to { box-shadow:0 0 0 2px #ffe47d99,0 0 32px #ffd65bcc,inset 0 0 20px #e6c64b33; } }
@media(prefers-reduced-motion:reduce) { .al-tech-node.recommended { animation:none; } }
.al-tech-icon { font-size:29px; line-height:32px; }
.al-tech-icon .ico { width:34px; height:34px; }
.al-tech-node b { font-size:12px; line-height:1.2; text-align:center; }
.al-tech-node small { font-size:11px; }
.al-tech-node .pn-bar { width:85%; height:5px; margin:2px 0; }
.al-help-list { display:grid; gap:8px; }
.al-help-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#1c2e22; }
.al-help-row>div { display:grid; gap:5px; min-width:0; }
.al-help-row small { overflow-wrap:anywhere; }
.al-help-row button { min-height:44px; flex-shrink:0; }
/* alliance ranks (titles only) */
.sc-rank { margin-bottom: 8px; border-radius: 12px; overflow: hidden; background: #141c17; border: 1px solid var(--line); }
.sc-rank-head { width: 100%; display: grid; grid-template-columns: 40px 1fr auto 20px; gap: 10px; align-items: center; padding: 8px 12px; border: 0; border-radius: 0; background: linear-gradient(#1f2a22, #18211b); text-align: left; }
.sc-rank-badge { width: 34px; height: 38px; display: grid; place-items: center; font-size: 18px; clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%); background: linear-gradient(var(--c-amber-pale), var(--c-amber) 60%, #b8741f); }
.sc-rank-badge.r4 { background: linear-gradient(#e6ecf2, #a9b4bf 60%, #6d7884); } .sc-rank-badge.r3 { background: linear-gradient(#f2c49a, #c8813a 60%, #8a4f1a); }
.sc-rank-badge.r2 { background: linear-gradient(#a8d8a8, #4f9a5a 60%, #2e5f35); } .sc-rank-badge.r1 { background: linear-gradient(#b8c6d4, #6f8294 60%, #43515e); }
.sc-rank-head b { font-size: 16px; } .sc-rank-n { font-size: 13px; color: var(--muted); font-weight: 700; }
.sc-rank-chev { color: var(--muted); transition: transform .2s; } .sc-rank:not(.open) .sc-rank-chev { transform: rotate(-90deg); }
.sc-rank .sc-mem-list { padding: 6px; } .sc-rank-empty { padding: 4px 8px 8px; }

/* ---------- alliance home: tiles + sub-views (prefix al-) ---------- */
.al-hazard { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; opacity: .8; background: repeating-linear-gradient(-45deg, var(--pn-gold) 0 9px, #1a1206 9px 18px); }
:where(.pn-wrap:not(.sc-root)) .sc-banner, :where(.pn-wrap:not(.sc-root)) .sc-hero { padding-bottom: 16px; }
.al-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sc-role-chip.r3 { color: #f2c49a; border-color: #c8813a; } .sc-role-chip.r2 { color: #a8d8a8; border-color: #4f9a5a; }
.al-rec { color: #d9e4dc; text-transform: none; letter-spacing: 0; font-weight: 700; }
.al-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; padding: 14px 6px 12px; margin-bottom: 4px; border-radius: 18px;
  background: radial-gradient(120% 70% at 50% 0%, rgba(240,180,60,.08), transparent 60%), linear-gradient(#18211b, #111813); border: 1px solid #3a3020; box-shadow: inset 0 1px 0 rgba(255,220,140,.08); }
.al-tile { --c1: #6a7c70; --c2: #1d2620; display: grid; justify-items: center; align-content: start; gap: 5px; padding: 0; min-width: 0; background: none; border: 0; border-radius: 14px; cursor: pointer; }
.al-tile:active .al-orb { transform: scale(.92); }
.al-orb { position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; transition: transform .1s;
  background: radial-gradient(circle at 38% 30%, var(--c1), var(--c2) 72%); border: 3px solid var(--pn-gold2);
  box-shadow: 0 0 0 2px #1a1206, 0 5px 10px rgba(0,0,0,.55), inset 0 -6px 10px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.18); }
.al-orb::after { content: ''; position: absolute; inset: 4px 10px auto; height: 16px; border-radius: 50%; background: linear-gradient(rgba(255,255,255,.28), transparent); pointer-events: none; }
.al-ic { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.al-bdg { top: -4px; right: -6px; }
.al-soon { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font: 900 8px/1 system-ui; letter-spacing: .08em; padding: 3px 5px; border-radius: 6px; background: #2a1d08; border: 1px solid var(--pn-gold2); color: var(--pn-gold); }
.al-tile.soon .al-orb { filter: saturate(.55) brightness(.85); }
.al-lb { font-size: 12px; font-weight: 800; color: #eadfc4; text-shadow: 0 1px 0 #000; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-sub { margin-top: -4px; font-size: 10px; color: var(--muted); }
.al-tile.red { --c1: #d0574a; --c2: #4a1410; } .al-tile.green { --c1: var(--c-good); --c2: #163f1e; } .al-tile.blue { --c1: #5b8fe0; --c2: #172a52; }
.al-tile.gold { --c1: #f2c45a; --c2: #5a3a08; } .al-tile.amber { --c1: #d89a4a; --c2: #4a2a0c; } .al-tile.olive { --c1: #9aaa5a; --c2: #2c3510; }
.al-tile.violet { --c1: #9a72d8; --c2: #2c1a4e; } .al-tile.teal { --c1: #4ab8b0; --c2: #10403c; }
@media (max-width: 360px) { .al-orb { width: 54px; height: 54px; } .al-ic { font-size: 24px; } }
/* sections in sub-views (same family as the building details popup) */
.al-sec { border-radius: 12px; overflow: hidden; margin-bottom: 10px; background: #141c17; border: 1px solid var(--line); }
.al-sec h4 { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--pn-gold); background: linear-gradient(#22301f, var(--c-panel)); border-bottom: 1px solid #3a3020; }
.al-sec.danger { border-color: #5a2a26; } .al-sec.danger h4 { color: #f08a80; background: linear-gradient(#2e1b19, #221614); border-bottom-color: #5a2a26; }
.al-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--bad); color: #fff; font-size: 11px; letter-spacing: 0; }
.al-none { padding: 10px 12px; color: var(--muted); font-size: 13px; }
.al-rows { display: grid; }
.al-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 8px 10px; border-top: 1px solid rgba(255,255,255,.04); }
.al-row:first-child { border-top: 0; }
.al-row-mid { min-width: 0; display: grid; } .al-row-mid b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .al-row-mid small { color: var(--muted); font-size: 11px; }
.al-mini { width: 36px; height: 36px; padding: 0; border-radius: 10px; background: rgba(0,0,0,.35); border-color: #5a3f20; color: #e8d9b8; font-size: 15px; }
.al-ok { min-height: 36px; padding: 0 12px; font-weight: 800; }
.al-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.al-seg button { display: grid; gap: 2px; padding: 10px 6px; border-radius: 12px; background: #0f1611; }
.al-seg button b { font-size: 15px; } .al-seg button small { color: var(--muted); font-size: 11px; }
.al-seg button.on { border-color: var(--pn-gold); background: linear-gradient(#3a2e0e, #1d2318); box-shadow: 0 0 12px rgba(240,180,60,.25); }
.al-seg button.on b { color: var(--pn-gold); }
.al-inv-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; }
.al-inv-form input { min-height: 42px; width: 100%; box-sizing: border-box; } .al-inv-form button { min-height: 42px; padding: 0 16px; font-weight: 800; }
.al-line { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; text-align: left; min-height: 46px; padding: 6px 12px; border: 0; border-top: 1px solid rgba(255,255,255,.04); border-radius: 0; background: transparent; }
.al-sec h4 + .al-line { border-top: 0; } .al-line i { color: var(--pn-gold); font-style: normal; font-size: 20px; } .al-line.bad b { color: #f08a80; }
.al-line:active { background: rgba(255,255,255,.04); }
.al-rank-edit { display: grid; grid-template-columns: 34px 78px 1fr; gap: 8px; align-items: center; margin: 6px 0; }
.al-rank-edit small { color: var(--muted, #9aa59c); font-weight: 700; }
/* no-clan invitations */
.al-inv { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 8px; align-items: center; padding: 8px 10px; border-top: 1px solid rgba(255,255,255,.04); }
.al-inv-mid { min-width: 0; }
.al-lock { margin-left: 6px; font-size: 10px; font-weight: 800; color: #e8d9b8; background: rgba(0,0,0,.4); border: 1px solid #5a3f20; border-radius: 6px; padding: 1px 5px; }
.sc-join.applied { background: linear-gradient(#3a4a3e, #26322a); color: #cfe0d3; box-shadow: none; text-shadow: none; }
/* wars */
.al-war-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.al-war-sum div { display: grid; justify-items: center; padding: 8px 4px; border-radius: 12px; background: #141c17; border: 1px solid var(--line); }
.al-war-sum b { font-size: 20px; font-weight: 900; color: var(--pn-gold); } .al-war-sum span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.al-war-sum .win b { color: var(--good); } .al-war-sum .loss b { color: var(--bad); }
.al-list { display: grid; gap: 6px; }
.al-war { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.al-war.win { background: linear-gradient(100deg, #1a3320, var(--panel) 55%); border-color: #2f6a3a; } .al-war.loss { background: linear-gradient(100deg, #3a1a18, var(--panel) 55%); border-color: #6a2f2a; }
.al-war-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: rgba(0,0,0,.35); border: 1px solid #5a3f20; }
.al-war-mid { min-width: 0; } .al-war-t { font-size: 13px; overflow-wrap: anywhere; } .al-war-t .vs { color: var(--muted); }
.al-war-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.al-war-r { display: grid; justify-items: end; gap: 4px; }
.al-res { font: 900 10px/1 system-ui; letter-spacing: .1em; padding: 3px 6px; border-radius: 6px; border: 1px solid; }
.al-war.win .al-res { color: #8ff09c; border-color: var(--c-good); } .al-war.loss .al-res { color: #ff9a90; border-color: var(--c-blood); }
.al-war-r .al-mini { width: 30px; height: 30px; font-size: 13px; }
.al-empty b { display: block; color: var(--pn-gold); font-size: 16px; margin-bottom: 4px; }
/* log */
.al-timeline { position: relative; }
.al-day { display: inline-block; margin: 8px 0 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pn-gold); background: #2a1d08; border: 1px solid #5a3f20; }
.al-log { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px 7px 6px; margin-bottom: 4px; border-radius: 10px; background: #141c17; border: 1px solid var(--line); font-size: 13px; }
.al-log-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px #3a3020; }
.al-log-t { min-width: 0; overflow-wrap: anywhere; } .al-log-time { font-size: 11px; color: var(--muted); }
.al-log.leader, .al-log.tech, .al-log.create { border-color: #5a4520; background: linear-gradient(100deg, #2a2310, #141c17 60%); }
.al-log.kick, .al-log.leave { border-color: #4a2a26; }
/* territory popup */
.al-soon-card { text-align: center; padding: 4px 4px 0; }
.al-soon-ic { font-size: 46px; margin: 4px 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.al-soon-card p { margin: 4px 0 8px; color: #e8d9b8; }
.al-soon-card ul { text-align: left; margin: 0 0 10px; padding: 8px 12px; list-style: none; display: grid; gap: 6px; border-radius: 12px; background: #141c17; border: 1px solid var(--line); font-size: 13px; }

/* ---------- mail (prefix ml-) ---------- */
.ml-unread { font-size: 11px; font-weight: 800; white-space: nowrap; padding: 3px 7px; border-radius: 999px; background: var(--bad); color: #fff; }
.ml-unread.zero { background: rgba(0,0,0,.35); color: var(--muted); border: 1px solid #5a3f20; }
.ml-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: -4px 0 10px; padding: 6px 4px; border-radius: 14px; background: #121a15; border: 1px solid #3a3020; }
.ml-tab { display: grid; justify-items: center; gap: 3px; padding: 6px 0 5px; min-width: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; }
.ml-tab-ic { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: radial-gradient(circle at 40% 30%, #34443a, #151d18 75%); border: 2px solid #4a3c20; }
.ml-tab-lb { font-size: 10.5px; font-weight: 800; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-tab.on { background: linear-gradient(#3a2e0e, #1d2318); border-color: var(--pn-gold2); box-shadow: 0 0 10px rgba(240,180,60,.2); }
.ml-tab.on .ml-tab-ic { border-color: var(--pn-gold); background: radial-gradient(circle at 40% 30%, #ffd677, #b8741f 75%); }
.ml-tab.on .ml-tab-lb { color: var(--pn-gold); }
.ml-tab-bdg { position: absolute; top: -5px; right: -9px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; display: grid; place-items: center; font: 800 10px/1 system-ui; font-style: normal; color: #fff;
  background: linear-gradient(#ff6a5c, #c8392e); border: 1.5px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.ml-tab-bdg.gold { background: linear-gradient(#ffe08a, var(--pn-gold2)); color: var(--c-amber-ink); border-color: #fff6d8; }
.ml-list { display: grid; gap: 6px; align-content: start; min-height: calc(100vh - 290px); }
.ml-card { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 14px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); transition: transform .08s; }
.ml-card.selecting { grid-template-columns: 26px 44px 1fr; }
.ml-card:active { transform: scale(.985); }
.ml-card.unread { background: linear-gradient(100deg, #2a2310, var(--panel) 55%); border-color: #5a4520; box-shadow: inset 3px 0 0 var(--pn-gold); }
.ml-card.picked { border-color: var(--bad); background: linear-gradient(100deg, #3a1a18, var(--panel) 60%); }
.ml-check { width: 24px; height: 24px; box-sizing: border-box; border-radius: 7px; display: grid; place-items: center; font-weight: 900; font-size: 14px; border: 2px solid #6a5a3a; background: var(--c-ink); color: #fff; }
.ml-check.on { background: var(--bad); border-color: #ff9a90; }
.ml-check.lock { color: var(--pn-gold); border-color: var(--pn-gold2); background: #2a1d08; font-size: 13px; }
.ml-ic { position: relative; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px;
  background: radial-gradient(circle at 40% 30%, hsl(var(--h) 40% 34%), hsl(var(--h) 45% 12%) 80%); border: 1px solid hsl(var(--h) 35% 40%); }
.ml-card.win .ml-ic { background: radial-gradient(circle at 40% 30%, #3f8f4c, #10301a 80%); border-color: var(--c-good); }
.ml-card.loss .ml-ic { background: radial-gradient(circle at 40% 30%, #9a3a32, #3a0f0c 80%); border-color: var(--c-blood); }
.ml-card.read .ml-ic { filter: saturate(.4) brightness(.8); }
.ml-ic .dot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bad); border: 2px solid var(--bg); box-shadow: 0 0 6px var(--bad); }
.ml-mid { min-width: 0; display: grid; gap: 1px; }
.ml-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ml-t { flex: 1; min-width: 0; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-card.read .ml-t { font-weight: 600; color: #c3d0c6; }
.ml-time { flex: none; font-size: 11px; color: var(--muted); }
.ml-p { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-flags { display: flex; gap: 5px; margin-top: 3px; }
.ml-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; min-height: 0; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1.4; border: 1px solid #5a3f20; background: rgba(0,0,0,.35); color: #e8d9b8; }
.ml-chip.fav { color: var(--pn-gold); }
.ml-chip.done { color: var(--good); border-color: #2f6a3a; }
.ml-chip.gift { color: var(--c-amber-ink); border-color: #fff3c4; background: linear-gradient(#ffd677, var(--pn-gold) 50%, var(--pn-gold2)); box-shadow: 0 0 8px rgba(240,180,60,.45); }
button.ml-chip.gift { cursor: pointer; min-height: 28px; padding: 2px 11px; animation: scBob 1.8s ease-in-out infinite; }
.ml-empty { text-align: center; color: var(--muted); padding: 40px 16px; font-size: 13px; }
.ml-empty .ic { font-size: 46px; opacity: .55; margin-bottom: 6px; }
.ml-empty b { display: block; color: var(--pn-gold); font-size: 16px; margin-bottom: 4px; }
.ml-bar { position: sticky; bottom: calc(-24px - var(--safe-bottom)); z-index: 4; display: flex; gap: 8px; margin: 12px -12px 0; padding: 14px 12px calc(10px + var(--safe-bottom));
  background: linear-gradient(transparent, var(--bg) 30%); }
.ml-btn { flex: 1; min-height: 46px; padding: 6px 8px; border-radius: 12px; font-weight: 800; font-size: 13.5px; background: linear-gradient(#2a382f, var(--c-panel)); border-color: #5a3f20; box-shadow: 0 3px 0 #0b100d; }
.ml-btn.gold { color: var(--c-amber-ink); border-color: #fff3c4; background: linear-gradient(#ffd677, var(--pn-gold) 45%, var(--pn-gold2)); box-shadow: 0 3px 0 var(--pn-gold-dark), 0 6px 14px rgba(0,0,0,.35); }
.ml-btn.bad { color: #fff; border-color: var(--c-blood-lo); background: linear-gradient(#ee6a5c, var(--bad) 50%, var(--c-blood-lo)); box-shadow: 0 3px 0 #5a1a14; }
.ml-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.ml-btn:disabled { opacity: .5; } .ml-btn { line-height: 1.2; } /* three buttons: the labels wrap to two lines on a phone */
.sc-mail-foot button.on { color: var(--pn-gold); border-color: var(--pn-gold2); }

/* ---------- clan emblem (client/emblem.js) and its editor sheet (em-) ---------- */
.emb { display: block; flex: 0 0 auto; }
button.sc-emb-btn { position: relative; padding: 0; background: none; border: 0; box-shadow: none; width: 80px; min-height: 0; cursor: pointer; }
button.sc-emb-btn:active { transform: scale(.96); }
.sc-emb-pen { position: absolute; right: -4px; bottom: 2px; width: 26px; height: 26px; display: grid; place-items: center; font-size: 13px; border-radius: 50%; background: var(--c-panel); border: 1px solid var(--pn-gold2); box-shadow: var(--sh-1); }
.em-top { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; margin: 4px 0 8px; }
.em-prev { display: grid; place-items: center; padding: 8px; border-radius: 16px; background: radial-gradient(circle at 50% 30%, rgba(240,180,60,.18), transparent 65%), var(--c-ink); border: 1px solid var(--line); box-shadow: var(--well); }
.em-prev .emb { filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.em-side { display: grid; gap: 6px; min-width: 0; }
.em-small { display: flex; align-items: flex-end; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--c-ink); border: 1px solid var(--line); }
.em-small .pn-note { font-size: 10px; line-height: 1.2; }
.em-act { min-height: 38px; font-size: 13px; font-weight: 700; }
.em-tabs { margin-bottom: 6px; }
.em-tabs button { padding: 6px 4px; font-size: 11px; }
.em-tabs .sc-ti { font-size: 14px; }
.em-body { max-height: 46vh; overflow-y: auto; padding: 2px 0; }
.em-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.em-syms { grid-template-columns: repeat(5, 1fr); }
button.em-chip { display: grid; justify-items: center; gap: 3px; padding: 6px 2px 5px; min-height: 0; border-radius: 10px; background: var(--c-panel-2); border: 2px solid transparent; font-size: 10.5px; font-weight: 700; color: var(--c-text-2); box-shadow: var(--bevel); }
button.em-chip span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.em-chip.on { border-color: var(--pn-gold); background: linear-gradient(#3a4a3f, var(--c-panel-2)); color: var(--c-amber-pale); box-shadow: var(--sh-glow); }
.em-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--pn-gold); margin: 6px 0 4px; }
.em-swatches { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
button.em-sw { aspect-ratio: 1; min-height: 0; padding: 0; border-radius: 8px; background: linear-gradient(rgba(255,255,255,.18), transparent 50%, rgba(0,0,0,.25)), var(--c); border: 2px solid rgba(0,0,0,.45); box-shadow: var(--sh-1); }
button.em-sw.on { border-color: var(--c-amber-pale); box-shadow: 0 0 0 2px var(--pn-gold), var(--sh-glow); }

/* Clan command screens: compact reference layout, camp metal and amber palette. */
.al-screen { display:flex; flex-direction:column; min-height:calc(100dvh - 170px); }
.al-screen .sc-banner { border-radius:8px; padding:14px 12px 10px; background:radial-gradient(ellipse at 20% 0,#3d4930,transparent 60%),linear-gradient(125deg,#233127,#142119); box-shadow:inset 0 1px #e7c67b33,0 4px 12px #0005; }
.al-screen .sc-banner-top { grid-template-columns:80px minmax(0,1fr); }
.al-screen .sc-banner-emb { animation:none; }
.al-screen .sc-banner-name { font-size:19px; color:#f5d78d; }
.al-screen .sc-banner-stats { gap:0; border-block:1px solid #b08b4144; padding-block:7px; }
.al-screen .sc-banner-stats div { background:none; border:0; border-radius:0; padding:2px; border-right:1px solid #b08b4133; }
.al-screen .sc-banner-stats div:last-child { border-right:0; }
.al-screen .sc-banner-stats b { font-size:15px; }
.al-screen .sc-banner-desc { display:grid; grid-template-columns:1fr auto; min-height:66px; border:1px solid #b08b4133; border-radius:5px; padding:9px; font-style:normal; background:#0e1917aa; }
.al-notice-heading { grid-column:1/-1; text-transform:uppercase; letter-spacing:.07em; color:#dfb85d; font-size:10px; font-weight:900; }
.al-screen .sc-banner-desc>span { font-size:12px; line-height:1.4; }
.al-research-summary { width:100%; display:grid; grid-template-columns:1fr auto; gap:5px; padding:9px 0; background:none; border:0; text-align:left; border-radius:0; font-size:11px; color:#ddd1ae; }
.al-research-summary b { color:#efc764; }
.al-research-track { grid-column:1/-1; height:9px; overflow:hidden; background:#0c1712; border:1px solid #77764f; border-radius:3px; }
.al-research-track i { display:block; height:100%; background:linear-gradient(#c2d96a,#669743); box-shadow:0 0 8px #b0d15666; }
.al-screen .al-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:2px 0 10px; border:0; border-radius:0; background:none; box-shadow:none; }
.al-screen .al-tile { position:relative; display:grid; grid-template-columns:43px minmax(0,1fr); align-items:center; align-content:center; justify-items:start; min-height:62px; gap:7px; padding:8px; text-align:left; border:1px solid #ad874b; border-radius:6px; background:linear-gradient(155deg,#354638,#213128 65%,#17261d); box-shadow:inset 0 1px #fff1,0 3px #0c170f; }
.al-screen .al-tile:active { transform:translateY(2px); box-shadow:inset 0 1px #fff1; }
.al-screen .al-orb { width:40px; height:40px; border:0; border-radius:5px; background:radial-gradient(ellipse,#92713c44,transparent 75%); box-shadow:none; }
.al-screen .al-orb::after { display:none; }
.al-screen .al-ic { font-size:29px; }
.al-screen .al-ic .ico { width:34px; height:34px; }
.al-screen .al-lb { white-space:normal; overflow:visible; font-size:12px; line-height:1.2; color:#f2e5be; }
.al-screen .al-bdg { top:-12px; right:-5px; }
.al-more-operations { margin:5px 0 14px; border-top:1px solid #b08b4144; padding-top:8px; }
.al-more-operations summary { color:#dcb566; font-weight:800; padding:8px 0 12px; cursor:pointer; }
.al-bottom-nav { position:sticky; bottom:0; z-index:25; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:6px 5px calc(6px + env(safe-area-inset-bottom,0px)); margin:18px -2px 0; margin-top:auto; border:1px solid #ad874b; border-radius:7px 7px 0 0; background:linear-gradient(#3b3825,#17241b); box-shadow:0 -4px 16px #0008; }
.al-bottom-nav button { position:relative; min-height:57px; display:grid; gap:4px; justify-items:center; align-content:center; border:0; border-radius:4px; background:none; color:#aaa98d; font-size:11px; }
.al-bottom-nav button .ic { font-size:22px; }
.al-bottom-nav button.on { color:#ffe19a; background:linear-gradient(#b48a3c44,#d4a34a11); box-shadow:inset 0 2px #efc96e; }
.al-bottom-nav .pn-bdg { top:3px; right:12px; }
.al-manage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:10px 0 24px; }
.al-manage-tile { min-height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:12px 6px; border:1px solid #ae8a4b; border-radius:6px; background:linear-gradient(145deg,#354535,#1b2d23); box-shadow:inset 0 1px #fff2,0 4px #0d1b13; color:#f2e0b7; }
.al-manage-tile .ic { font-size:34px; }
.al-manage-tile .ic .ico { width:40px; height:40px; }
.al-manage-tile b { font-size:14px; }
.al-manage-tile small { font-size:10px; color:#b6bea8; }
.al-manage-tile.danger { background:linear-gradient(#833f31,#49291f); border-color:#bb7454; }
.al-manage-tile:disabled { opacity:.5; }
.al-manage-back { margin:4px 0 14px; }
.al-leadership { border:1px solid #ac864244; border-radius:8px; padding:15px 8px 12px; margin-bottom:18px; background:radial-gradient(ellipse at 50% 0,#b58b4330,transparent 70%),linear-gradient(#24362b,#14231a); }
.al-leader-card { position:relative; display:grid; grid-template-columns:40px 76px 40px; gap:4px; justify-content:center; align-items:center; margin:auto; padding:0 16px; border:0; background:none; color:#eed59b; }
.al-leader-card>.sc-av { grid-column:2; border:3px solid #d8b15c; border-radius:16px; box-shadow:0 0 15px #e6b44b44; }
.al-leader-wings { font-size:40px; font-weight:900; color:#bf9849; text-shadow:0 2px #000; }
.al-leader-card>small,.al-leader-card>b,.al-leader-card>span:last-child { grid-column:1/-1; text-align:center; }
.al-leader-card>small { margin-top:7px; font-size:11px; color:#bfc5ab; }
.al-leader-card>b { font-size:18px; }
.al-leader-card>span:last-child { font-size:11px; }
.al-officer-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-top:17px; }
.al-officer-card { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:6px 2px; border:0; background:none; }
.al-officer-card .sc-av { border:2px solid #998852; border-radius:10px; }
.al-officer-card small { font-size:9px; color:#c8b87d; }
.al-officer-card b { font-size:10px; width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.al-screen .sc-rank { border-radius:4px; margin-bottom:5px; border-color:#80744766; }
.al-screen .sc-rank-head { min-height:50px; padding:5px 10px; background:linear-gradient(#354434,#233328); }
.al-directory-card { width:100%; text-align:left; }
.al-directory-card>div { display:grid; gap:6px; }
.al-directory-card small { font-size:11px; color:#bcc6b8; }
@media(max-width:360px) { .al-screen .sc-banner-top { grid-template-columns:64px minmax(0,1fr); gap:8px; } .al-screen .sc-banner-top .sc-emblem { max-width:64px; } .al-screen .sc-banner-name { font-size:16px; } .al-screen .al-tile { grid-template-columns:34px minmax(0,1fr); padding:7px 5px; gap:5px; } .al-screen .al-orb { width:34px; height:34px; } .al-screen .al-lb { font-size:11px; } }

.al-ranking-row { display:grid; grid-template-columns:26px 36px minmax(0,1fr) auto; align-items:center; gap:8px; width:100%; min-height:62px; padding:8px; margin-bottom:5px; border:1px solid #68725366; border-radius:5px; background:linear-gradient(110deg,#2c3a2e,#19271f); text-align:left; }
.al-ranking-row.is-me { border-color:#d4b26b; background:linear-gradient(110deg,#524b2a,#253528); }
.al-ranking-place { text-align:center; color:#e8c87d; font-weight:900; }
.al-ranking-name { display:grid; min-width:0; gap:4px; }
.al-ranking-name b { overflow-wrap:anywhere; font-size:12px; }
.al-ranking-name small { font-size:9px; color:#aebeaa; }
.al-ranking-value { color:#f1d492; font-size:12px; font-variant-numeric:tabular-nums; }
.al-ranking-heading { display:flex; justify-content:space-between; padding:12px 8px 7px; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:#b4bca4; }
.al-ranking-period { display:grid; gap:8px; padding:12px; border:1px solid #a58c5066; background:#1a281f; border-radius:6px; font-size:11px; color:#d9c38e; }
.al-ranking-period>span { color:#b6c4b0; }.al-ranking-period button { justify-self:start; }
.al-ranking-reward { display:flex; justify-content:space-between; gap:15px; padding:14px 8px; border-bottom:1px solid #a58c5044; font-size:12px; }
.al-ranking-mine { position:sticky; bottom:0; padding:10px 0 2px; background:#152219; box-shadow:0 -8px 16px #102018; }
.al-ranking-mine>small { display:block; color:#d6b86d; font-size:9px; letter-spacing:.12em; margin:0 8px 6px; }
@media(max-width:360px) { .al-ranking-row { gap:5px; grid-template-columns:22px 36px minmax(0,1fr) auto; }.al-ranking-value { font-size:10px; } }

/* Clan home: brass field plates, engraved identity and illustrated commands. */
.al-screen .sc-banner { isolation:isolate; border:1px solid #a68d5c; padding:18px 14px 12px; background:radial-gradient(ellipse at 15% 0,#69736455,transparent 65%),repeating-linear-gradient(115deg,#ffffff03 0 1px,transparent 1px 5px),linear-gradient(135deg,#344139,#18251f 75%); box-shadow:inset 0 0 0 3px #121c18,inset 0 0 0 4px #b9a57444,0 5px 14px #0006; }
.al-banner-watermark { position:absolute; z-index:-1; right:-24px; top:-12px; opacity:.09; transform:rotate(-16deg); pointer-events:none; filter:grayscale(1); }
.al-screen .sc-banner-top { position:relative; z-index:1; }
.al-screen .sc-banner-stats { margin-top:16px; padding-block:10px; }
.al-screen .sc-banner-stats b { font-size:18px; color:#f5d389; text-shadow:0 2px 3px #000; }
.al-screen .sc-banner-stats span { margin-top:3px; font-size:9px; letter-spacing:.12em; }
.al-screen .al-research-summary { position:relative; z-index:1; padding:11px 0; gap:7px; }
.al-screen .al-research-track { height:8px; border-color:#b59a5c88; background:#101b16; box-shadow:inset 0 2px 4px #000a; }
.al-screen .al-research-track i { background:linear-gradient(#ffe5a0,#c8963e); box-shadow:0 0 10px #f4c66d88; }
.al-screen .sc-banner-desc { min-height:62px; border-color:#b2985a66; border-left:3px solid #c6a05b; background:linear-gradient(110deg,#0c1814dd,#18231bdd); box-shadow:inset 0 0 0 2px #080f0c66; }
.al-screen .al-grid { gap:8px; padding-top:4px; }
.al-screen .al-command-tile { isolation:isolate; overflow:hidden; grid-template-columns:minmax(0,1fr) 51px; min-height:72px; padding:10px 9px 10px 12px; border-color:#827752; border-radius:5px; background:radial-gradient(ellipse at 100% 50%,color-mix(in srgb,var(--c1) 20%,transparent),transparent 75%),linear-gradient(155deg,#354238,#1a2922); box-shadow:inset 0 0 0 2px #101b1688,inset 0 3px #c0cfb014,0 3px 5px #0005; }
.al-command-tile::before { content:''; position:absolute; inset:5px; pointer-events:none; background:radial-gradient(circle at 0 0,#b7a779 0 1px,#111b17 2px,transparent 3px),radial-gradient(circle at 100% 100%,#b7a779 0 1px,#111b17 2px,transparent 3px); }
.al-screen .al-command-tile .al-orb { grid-column:2; grid-row:1; width:49px; height:49px; background:none; }
.al-screen .al-command-tile .al-ic { font-size:39px; filter:drop-shadow(0 4px 3px #0008); transform:rotate(-7deg); }
.al-screen .al-command-tile .al-ic .ico { width:47px; height:47px; }
.al-command-copy { grid-column:1; grid-row:1; display:grid; gap:5px; min-width:0; }
.al-screen .al-command-copy .al-lb { font-size:14px; font-weight:800; color:#f4e4b9; text-shadow:0 2px 2px #000; }
.al-command-copy small { font-size:9px; line-height:1.35; color:#b1bca9; }
.al-screen .al-command-tile.has-activity { border-color:#c9a45e; box-shadow:inset 3px 0 #c9a45e,inset 0 0 16px #c99a3320,0 3px 5px #0005; }
.al-screen .al-command-tile .al-bdg { top:-6px; right:-3px; z-index:2; }
.al-screen .tp-clanbtn { width:85%; align-self:center; min-height:62px; margin:18px 0 24px; border:2px solid #b69d63; border-radius:6px; background:linear-gradient(135deg,#34716a,#194a43); box-shadow:inset 0 0 0 3px #102f2b,inset 0 0 0 4px #86b3a466,0 5px 14px #0006; color:#fff0c7; font-size:17px; }
.al-screen .tp-clanbtn small { margin-top:4px; font-size:10px; color:#c8ddd1; }
.al-screen .al-command-tile:focus-visible,.al-screen .al-research-summary:focus-visible { outline:2px solid #ffe09a; outline-offset:3px; }
@media(max-width:360px) { .al-screen .al-command-tile { grid-template-columns:minmax(0,1fr) 37px; padding:9px; gap:3px; } .al-screen .al-command-tile .al-orb { width:37px; } .al-screen .al-command-tile .al-ic .ico { width:37px; height:37px; } .al-screen .al-command-copy .al-lb { font-size:12px; } .al-command-copy small { font-size:8px; } }

/* Clan Supply Vault: plated field caches and the convoy reward reveal. */
.cg-vault{padding:18px;border:1px solid #a88645;border-radius:14px;background:radial-gradient(ellipse at 20% 20%,#66542660,transparent 65%),linear-gradient(145deg,#28352e,#141d19);color:#f3ead1;overflow:hidden}
.cg-eyebrow{letter-spacing:2px;font-size:10px;color:#d3b66d}.cg-vault-head{display:flex;gap:18px;align-items:center;margin:8px 0 16px}.cg-vault-head h2{margin:0 0 6px;font-size:23px}.cg-vault-head p{margin:0;color:#b7c2b6;font-size:12px}.cg-level,.cg-level-meta{display:flex;justify-content:space-between;gap:12px;align-items:center}.cg-level span,.cg-level-meta{font-size:11px;color:#c4bd9d}.cg-progress{height:10px;background:#0d1512;border:1px solid #5a6047;border-radius:10px;overflow:hidden;margin:9px 0}.cg-progress i{display:block;height:100%;background:linear-gradient(90deg,#98722e,#ffe49a);box-shadow:0 0 12px #ffcf68;transition:width .7s}.cg-vault .pn-note{font-size:11px;line-height:1.6;margin:14px 0 0;color:#b5bfae}
.cg-chest{--gift:#ffc85e;position:relative;width:100px;height:82px;flex:none;filter:drop-shadow(0 8px 6px #0008)}.cg-common{--gift:#9caf99}.cg-rare{--gift:#55a9f5}.cg-epic{--gift:#c580f5}.cg-legendary{--gift:#ffc85e}.cg-chest-rays{position:absolute;inset:-25%;border-radius:50%;background:repeating-conic-gradient(from 10deg,transparent 0deg 20deg,color-mix(in srgb,var(--gift) 18%,transparent) 25deg 32deg,transparent 38deg 50deg);mask-image:radial-gradient(circle,#000,transparent 70%);animation:cg-rays 18s linear infinite}.cg-box{position:absolute;left:10%;right:10%;top:40%;height:48%;border:3px solid var(--gift);border-radius:3px 3px 8px 8px;background:repeating-linear-gradient(90deg,transparent 0 20%,#d7d5b838 21% 25%,transparent 26% 70%,#d7d5b838 71% 75%,transparent 76%),linear-gradient(#4e5b4d,#19271e);box-shadow:inset 0 0 10px #0008,0 0 15px color-mix(in srgb,var(--gift) 20%,transparent)}.cg-lid{position:absolute;left:7%;right:7%;top:19%;height:27%;border:3px solid var(--gift);border-radius:10px 10px 2px 2px;background:linear-gradient(#737c5f,#303d2e);z-index:2;transform-origin:50% 100%}.cg-lock{position:absolute;left:39%;top:41%;width:23%;height:30%;z-index:3;border:2px solid var(--gift);border-radius:3px;background:#212a20;color:var(--gift);display:grid;place-items:center;font-size:17px}
.cg-tabs{display:flex;gap:5px;overflow-x:auto;padding:15px 0 12px}.cg-tabs button{flex:1;white-space:nowrap;font-size:11px;padding:9px 10px;border:1px solid #52604e;border-radius:7px;background:#1a251e;color:#c4cdbd}.cg-tabs .active{border-color:#d7b56a;color:#ffe7a5;background:#54452a}.cg-cache-list{display:grid;gap:8px}.cg-cache{display:flex;gap:12px;align-items:center;border:1px solid #4d594b;border-left:3px solid var(--gift);border-radius:9px;background:linear-gradient(105deg,#29362b,#18231d);padding:12px}.cg-cache>.cg-chest{width:62px;height:56px}.cg-cache-copy{flex:1;min-width:0;display:grid;gap:4px}.cg-cache-copy>b{font-size:13px;color:#eee7d3}.cg-cache-copy>span{font-size:10px;line-height:1.4;color:#aebbac;overflow-wrap:anywhere}.cg-cache-copy>small{font-size:10px;color:#bcbdab}.cg-cache-copy .cg-rarity{font-size:8px;letter-spacing:1.5px;color:var(--gift)}.cg-cache>button{font-size:11px;padding:9px 13px;flex:none}.cg-claim-bar{position:relative;z-index:4;padding:14px 0 6px;background:linear-gradient(transparent,#142019 20%);display:grid;gap:9px}.cg-claim-bar small{font-size:10px;line-height:1.5;color:#a7b39e}.cg-claim-bar button{width:100%;border-color:#cda352!important;background:linear-gradient(#a67d38,#655024)!important;color:#fff1c7!important}
.cg-reveal{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:24px 16px;background:#060d09eb;backdrop-filter:blur(8px);overflow-y:auto;color:#f7edce;animation:cg-fade .25s ease-out}.cg-reveal-content{position:relative;width:min(100%,520px);text-align:center;padding:25px 0;z-index:2}.cg-reveal-content>.cg-chest{margin:0 auto 14px;width:148px;height:125px;animation:cg-chest-pop 1s both}.cg-reveal .cg-lid{animation:cg-open 1.2s .2s both}.cg-reveal .cg-lock{animation:cg-unlock .4s .3s both}.cg-reveal .cg-chest-rays{inset:-85%;animation:cg-rays 12s linear infinite;opacity:.9}.cg-congrats{font-weight:900;letter-spacing:2px;font-size:23px;padding:12px;border-top:1px solid var(--gift);border-bottom:1px solid var(--gift);background:linear-gradient(90deg,transparent,#825d2b90,transparent);text-shadow:0 2px 3px #000;animation:cg-reward-in .5s .65s both}.cg-reveal-content>p{font-size:12px;color:#cdc6aa;animation:cg-reward-in .5s .75s both}.cg-rewards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:24px 0}.cg-reward{display:grid;align-content:start;gap:5px;padding:12px 5px;border:1px solid #bfa76670;border-radius:8px;background:linear-gradient(145deg,#46533c,#1a291d);animation:cg-reward-in .45s calc(.85s + var(--i)*.065s) both;box-shadow:inset 0 0 16px #0003}.cg-reward>span{font-size:27px}.cg-reward>b{font-size:15px;color:#ffe4a1}.cg-reward>small{font-size:9px;line-height:1.4;color:#cfdbc4;overflow-wrap:anywhere}.cg-continue{min-width:220px;padding:14px!important;animation:cg-reward-in .4s 1.2s both}.cg-reveal-flash{pointer-events:none;position:fixed;inset:0;background:radial-gradient(circle at 50% 30%,#fffbe8,#ffe09b80 12%,transparent 60%);animation:cg-flash 1.5s .25s both}.cg-particles{position:fixed;inset:0;overflow:hidden;pointer-events:none}.cg-particles i{position:absolute;left:var(--x);top:-30px;width:5px;height:10px;background:var(--gift);box-shadow:0 0 5px var(--gift);animation:cg-fall 3s calc(.5s + var(--d)) both;transform:rotate(var(--r))}
@keyframes cg-rays{to{transform:rotate(360deg)}}@keyframes cg-fade{from{opacity:0}to{opacity:1}}@keyframes cg-open{0%,20%{transform:translateY(0) rotate(0)}45%{transform:translateY(-5px) rotate(-4deg)}100%{transform:translateY(-34px) rotate(-15deg)}}@keyframes cg-unlock{to{opacity:0;transform:translateY(12px)}}@keyframes cg-chest-pop{0%{transform:scale(.6)}35%{transform:scale(1.08)}55%{transform:scale(.97)}100%{transform:scale(1)}}@keyframes cg-reward-in{from{opacity:0;transform:translateY(18px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes cg-flash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}@keyframes cg-fall{0%{opacity:0;transform:translateY(20vh) rotate(var(--r))}15%{opacity:1}100%{opacity:0;transform:translateY(100vh) rotate(500deg)}}
@media(max-width:380px){.cg-vault{padding:12px}.cg-vault-head{gap:10px}.cg-vault-head h2{font-size:19px}.cg-vault-head>.cg-chest{width:80px;height:70px}.cg-cache{gap:8px;padding:10px 8px}.cg-cache>.cg-chest{width:48px;height:45px}.cg-tabs button{padding:8px;font-size:10px}.cg-rewards{grid-template-columns:repeat(3,minmax(0,1fr))}.cg-congrats{font-size:20px}}
@media(prefers-reduced-motion:reduce){.cg-chest *,.cg-reveal,.cg-reveal *{animation:none!important;transition:none!important}.cg-reveal .cg-lid{transform:translateY(-30px) rotate(-12deg)}.cg-reveal .cg-lock,.cg-particles,.cg-reveal-flash{display:none}}
/* Persistent clan research donation card. */
.cd-popup{color:#e2e5d2;display:grid;gap:12px;padding:3px 0}.cd-identity{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid #a68c5355;border-radius:8px;background:radial-gradient(ellipse at 0 0,#9ba56433,transparent 70%),linear-gradient(135deg,#344634,#17281e)}.cd-tech-icon{width:62px;height:62px;display:grid;place-items:center;border:2px solid #b6a16a;border-radius:12px;background:linear-gradient(145deg,#52694a,#1e3426);font-size:38px;flex:none;box-shadow:inset 0 0 0 3px #13251d,0 5px 10px #0005}.cd-tech-icon .ico{width:48px;height:48px}.cd-identity>div:last-child{display:grid;gap:6px}.cd-identity small{font-size:8px;letter-spacing:.13em;color:#cebc7b}.cd-identity b{font-size:19px;color:#ffe3a0}.cd-identity span{font-size:12px;color:#b6c8a8}.cd-effect{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px;background:#0e1c1566;border-left:2px solid #9b925c;font-size:11px}.cd-effect>span{margin-right:auto;color:#b6c2ac}.cd-effect strong{color:#c3e48b}.cd-progress-label,.cd-stock{display:flex;justify-content:space-between;gap:8px;font-size:11px}.cd-progress-label>span,.cd-stock>span{color:#aebaa4}.cd-track{height:13px;border:1px solid #998750;border-radius:4px;background:#0b1711;overflow:hidden;box-shadow:inset 0 3px 5px #0008}.cd-track i{display:block;height:100%;background:linear-gradient(#e2ec9a,#75964c);box-shadow:0 0 12px #c5df6a66;transition:width .25s}.cd-feedback{min-height:30px;display:grid;place-items:center;text-align:center;color:#b9cba3;font-size:11px}.cd-feedback.critical{color:#ffe18b;font-size:14px;font-weight:900;text-shadow:0 0 12px #e6b44c88;animation:cd-critical .35s ease-out}.cd-rewards{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:12px;border:1px solid #9b865344;background:#a58c4b10;border-radius:5px;font-size:11px}.cd-rewards small{grid-column:1/-1;color:#c6b884;letter-spacing:.1em;font-size:8px}.cd-rewards b{color:#efda97}.cd-rewards>span{text-align:right;color:#c7d5ac}.cd-resource-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.cd-resource-pick button{display:grid;justify-items:center;gap:4px;padding:7px 3px;border:1px solid #6b795544;background:#14271c;font-size:20px;border-radius:5px}.cd-resource-pick button.on{border-color:#d7b56d;background:#64582b55;box-shadow:inset 0 -2px #c4a45a}.cd-resource-pick small{font-size:9px;color:#c4d0b6}.cd-stock{align-items:center;padding-top:4px}.cd-stock b{color:#f3d28b}.cd-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cd-donate{display:grid;justify-items:center;gap:6px;min-height:83px;padding:11px 6px;border-radius:7px;touch-action:none;user-select:none;box-shadow:inset 0 1px #ffffff30,0 3px #081a12;font-size:12px}.cd-donate>span{font-size:16px;font-weight:900}.cd-donate>small{font-size:9px;opacity:.8}.cd-standard{background:linear-gradient(#36786b,#204e40);border:1px solid #84ac83;color:#e8f3ce}.cd-premium{background:linear-gradient(#a07b39,#624923);border:1px solid #d6b56b;color:#fff0bd}.cd-donate:disabled{filter:grayscale(.8);opacity:.45;cursor:default}.cd-donate:active:not(:disabled){transform:translateY(2px)}.cd-refill{text-align:center;font-size:10px;color:#b5c2a7;font-variant-numeric:tabular-nums}.cd-details{border-top:1px solid #9b865333;padding-top:8px;font-size:10px;color:#aebca2}.cd-details summary{cursor:pointer;color:#c5b780}.cd-details p{line-height:1.6}.cd-recommend{font-size:10px;justify-self:center;background:none;border:0;color:#dfc484;padding:6px}.cd-popup button:focus-visible{outline:2px solid #f7d78c;outline-offset:2px}@keyframes cd-critical{from{transform:scale(.92);opacity:.3}to{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.cd-feedback.critical{animation:none}.cd-track i{transition:none}}
.cd-popup{gap:8px}.cd-identity{padding:10px;gap:10px}.cd-tech-icon{width:48px;height:48px;font-size:30px}.cd-tech-icon .ico{width:38px;height:38px}.cd-identity b{font-size:16px}.cd-effect{padding:8px}.cd-rewards{padding:9px}.cd-feedback{min-height:24px}.cd-donate{min-height:76px;padding:9px 5px}.cd-details{padding-top:6px}
.cd-research-timer{padding:12px;border:1px solid #c2a65e;background:linear-gradient(110deg,#4b4928,#203725);border-radius:5px;text-align:center;color:#ffe1a0;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
/* Mail actions stay beneath the category tabs; only messages scroll. */
#panel .ml-root > .ml-bar{position:relative;bottom:auto;flex:0 0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 9px;padding:5px 0 8px;background:none;border-bottom:1px solid #b49b5544}
#panel .ml-root > .ml-bar .ml-btn{min-width:0;min-height:42px;padding:5px 4px;font-size:11px;line-height:1.25;border-radius:7px;box-shadow:inset 0 1px #ffffff15,0 2px 3px #0003}
#panel .ml-root .ml-list{min-height:0}
@media(max-height:500px){#panel .ml-root > .ml-bar{margin-bottom:5px;padding:2px 0 5px}#panel .ml-root > .ml-bar .ml-btn{min-height:36px;font-size:10px}#panel .ml-root .ml-tabs{margin-bottom:5px;padding:3px}#panel .ml-root .ml-tab{padding:3px 0}}
/* Best Hero board: which hero it is, under the commander's name (panels-social.js heroTag) */
.sc-hero-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 1px 7px 1px 2px; border-radius: 10px; font-size: 11px; font-weight: 800; color: #ffd98a; background: rgba(255,210,63,.12); border: 1px solid rgba(255,210,63,.4); max-width: 100%; }
.sc-hero-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-hero-tag .sc-hero-face { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.sc-pod .sc-hero-tag { margin: 2px auto 1px; }