/* 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-face { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 14px; background: rgba(0,0,0,.25); box-shadow: 0 0 0 2px rgba(255,255,255,.35); overflow: hidden; }
.rk-face .pn-portrait, .rk-face img { border-radius: 12px !important; }
.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; }

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