/* Social panels (js/social.js): profiles, friends, mailbox, guilds, rankings.
   Load after panels.css (it reuses .row, .tabs, .tc-stat, .msg-card, .search, .switch, .empty, .type-chip). */

/* ---------------------------------------------------------------- global bits (usable outside the panels too) */
.tier { --c1: #d08a52; --c2: #8a4a22; --ink: #fff3e8; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 4px; flex: none;
  border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; color: var(--ink);
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.3); }
.tier .tier-ic { width: 16px; height: 16px; flex: none; fill: rgba(255,255,255,.92); stroke: rgba(0,0,0,.25); stroke-width: 1; }
.tier .tier-ic .tier-line { fill: none; stroke: var(--c2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tier .tier-ic .tier-fill { fill: var(--c2); stroke: none; }
.tier i { font-style: normal; font-weight: 900; opacity: .85; padding-left: 4px; margin-left: 2px; border-left: 1px solid rgba(255,255,255,.35); font-variant-numeric: tabular-nums; }
.tier.lg { height: 30px; padding: 0 12px 0 6px; font-size: 13px; gap: 6px; }
.tier.lg .tier-ic { width: 22px; height: 22px; }
.tier.mini { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 9px; }
.tier.mini .tier-ic { width: 19px; height: 19px; }
.tier-bronze { --c1: #d8935c; --c2: #8a4a22; --ink: #fff1e4; }
.tier-silver { --c1: #f1f5fb; --c2: #8e9bb0; --ink: #1d2638; }
.tier-silver .tier-ic { fill: #fff; }
.tier-gold { --c1: #ffe07a; --c2: #d98a0c; --ink: #3a2400; }
.tier-platinum { --c1: #b8fff0; --c2: #2c9f92; --ink: #06322c; }
.tier-diamond { --c1: #a8d8ff; --c2: #3a64e8; --ink: #fff; }
.tier-master { --c1: #f0a8ff; --c2: #7a2fd8; --ink: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 1px rgba(240,168,255,.5), 0 0 10px rgba(192,96,255,.55); }

.g-emb { --g: #4f7cff; --sz: 40px; width: var(--sz); height: var(--sz); flex: none; display: inline-grid; place-items: center; border-radius: calc(var(--sz) * .3); color: #fff;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--g) 55%, #fff), var(--g) 55%, color-mix(in srgb, var(--g) 70%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.3); }
.g-emb .ic { width: 62%; height: 62%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.g-tag { --g: #4f7cff; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; flex: none; vertical-align: 1px;
  font-size: 10.5px; font-weight: 900; letter-spacing: .6px; color: #fff; background: color-mix(in srgb, var(--g) 70%, #0b1430); border: 1px solid color-mix(in srgb, var(--g) 70%, #fff); }
.g-tag::before { content: '['; opacity: .6; } .g-tag::after { content: ']'; opacity: .6; }

/* ---------------------------------------------------------------- shared panel layout */
.sp-body { display: flex; flex-direction: column; }
.sp-body > * { flex: none; }
.sp-loading { display: grid; place-items: center; min-height: 220px; flex: 1; }
.sp-back span { display: inline; }
.sp-back { min-width: 0; }
.social .sec { display: flex; align-items: center; gap: 6px; }
.social .sec .muted { text-transform: none; letter-spacing: 0; font-weight: 800; }
.sp-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 2px 8px; font-size: 12.5px; font-weight: 800; }
.sp-note { margin: 6px 2px 0; font-size: 12.5px; color: var(--muted); font-weight: 700; line-height: 1.45; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.sp-actions .btn { flex: 0 1 auto; min-width: 140px; min-height: 42px; }
.sp-link { padding: 0; border: 0; background: none; color: #bcd4ff; font-weight: 900; text-decoration: underline; text-decoration-color: rgba(188,212,255,.35); text-underline-offset: 3px; cursor: pointer; }
.sp-link:hover { color: #fff; }
.btn.armed { background: rgba(255, 95, 107, .3) !important; border-color: var(--danger) !important; color: #fff !important; animation: sp-pulse 900ms ease-in-out infinite; }
.btn.busy { position: relative; color: transparent !important; }
.btn.busy > * { visibility: hidden; }
.btn.busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2.5px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.primary.busy::after { border-color: #3a2400; border-top-color: transparent; }
html .btn.icon-only.armed { width: auto; padding: 0 10px; }
.btn.armed .ic { width: 16px; height: 16px; }
@keyframes sp-pulse { 50% { box-shadow: 0 0 0 4px rgba(255, 95, 107, .25); } }
.sp-error .empty b { max-width: 300px; }

/* avatars + online dots */
.sp-ava { --h: 210; position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-weight: 900; font-size: 17px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35);
  background: linear-gradient(140deg, hsl(var(--h) 70% 62%), hsl(calc(var(--h) + 40) 60% 38%)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.sp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #66708c; flex: none; }
.sp-dot.on { background: var(--ok); box-shadow: 0 0 0 2px rgba(62, 224, 122, .25); }
.sp-ava .sp-dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border: 2.5px solid #17224a; box-shadow: none; }

/* pokémon portraits (lazy) */
.sp-pic { position: relative; width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.14), rgba(0,0,0,.25)); }
.sp-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 200ms; }
.sp-pic.ready img { opacity: 1; }
.sp-pic > .ic { width: 50%; height: 50%; color: rgba(170, 195, 255, .22); transition: opacity 200ms; }
.sp-pic.ready > .ic { opacity: 0; }
.sp-pic.xs { width: 26px; height: 26px; border-radius: 8px; }
.sp-pic.xl { width: 100%; height: 100%; border-radius: inherit; background: none; }

/* list rows (friends, guilds, members) */
.sp-list { display: flex; flex-direction: column; gap: 6px; }
.sp-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 4px 6px 4px 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.sp-row.online { border-color: rgba(62, 224, 122, .22); }
.sp-row-main { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 6px; border: 0; border-radius: 11px; background: none; text-align: left; }
.sp-row-main:hover { background: var(--surface); }
.sp-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-row-text b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; min-width: 0; }
.sp-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sp-row-text small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sp-row-text small > span { display: inline-flex; align-items: center; gap: 3px; }
.sp-row-text small .ic { width: 14px; height: 14px; }
.sp-row-text small .on, .g-hero-meta .on { color: #8cf0b0; }
.sp-row-text small.sp-1l { flex-wrap: nowrap; gap: 6px; min-width: 0; }
.sp-1l .tier.mini, html.touch .sp-1l .tier.mini { width: 20px; height: 20px; border-radius: 6px; }
.sp-1l .tier.mini .tier-ic { width: 14px; height: 14px; }
.sp-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; display: block !important; }
.sp-row-acts { display: flex; gap: 4px; align-items: center; flex: none; }
.sp-row-acts .btn.sp-rm { color: var(--muted); }
.sp-row .sp-you { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.12); color: #fff; }
.sp-add, .sp-tools { display: flex; gap: 8px; margin-bottom: 12px; }
.sp-add .search, .sp-tools .search { min-width: 0; }
.sp-guild .sp-add { margin-top: 10px; }
.sp-add .btn, .sp-tools .btn { flex: none; min-height: 42px; }

/* forms */
.sp-form { display: flex; flex-direction: column; gap: 14px; }
.sp-field { position: relative; display: flex; flex-direction: column; min-width: 0; }
.sp-field input:not([type=color]):not([type=checkbox]), .sp-field textarea, .sp-select {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0,0,0,.3); color: #fff; font: inherit; font-size: 15px; font-weight: 700; }
.sp-field textarea { resize: vertical; min-height: 88px; line-height: 1.45; }
.sp-field input:focus, .sp-field textarea:focus, .sp-select:focus { border-color: var(--accent-2); outline: none; }
.sp-field input::placeholder, .sp-field textarea::placeholder { color: rgba(163, 179, 217, .6); }
.sp-count { align-self: flex-end; margin-top: 4px; font-size: 11.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.sp-count.near { color: var(--gold); }
.sp-select { margin-top: 8px; appearance: auto; }
.sp-form-foot { display: flex; justify-content: flex-end; position: sticky; bottom: -16px; margin: 0 -16px -16px; padding: 12px 16px 16px;
  background: linear-gradient(transparent, rgba(16, 24, 52, .96) 35%); }
.sp-form-foot .btn { min-width: 160px; min-height: 46px; font-size: 15px; }
.sp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-sw { --sw: #4f7cff; position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.18);
  background: var(--sw); color: #fff; cursor: pointer; transition: transform var(--t) var(--ease), border-color var(--t); }
.sp-sw:hover { transform: scale(1.06); }
.sp-sw.on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.sp-sw .ic { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.sp-sw.custom { background: conic-gradient(#ff5f5f, #ffd23f, #5fd35f, #3fa0ff, #c04fff, #ff5f5f); overflow: hidden; }
.sp-sw.custom.on { background: var(--sw); }
.sp-sw.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* profile banners */
.ban-indigo { --b1: #4a63e0; --b2: #23307a; }
.ban-crimson { --b1: #e0445a; --b2: #6e1530; }
.ban-emerald { --b1: #2fbf78; --b2: #0f5a48; }
.ban-gold { --b1: #f0b432; --b2: #8a4c0c; }
.ban-ocean { --b1: #2fa8e0; --b2: #10437a; }
.ban-violet { --b1: #9a5cf0; --b2: #3e1f80; }
.ban-sunset { --b1: #ff8a4a; --b2: #a8285e; }
.ban-slate { --b1: #6a7a98; --b2: #252e44; }
.sp-sw[class*="ban-"] { background: linear-gradient(135deg, var(--b1), var(--b2)); }
.sp-banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.sp-banners .sp-sw { width: auto; height: 44px; border-radius: 12px; }

/* ---------------------------------------------------------------- profile */
.sp-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 22px;
  background: linear-gradient(135deg, var(--b1, #4a63e0), var(--b2, #23307a) 75%); border: 1px solid rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-sm); }
.sp-hero::before { content: ''; position: absolute; right: -50px; top: -70px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid rgba(255,255,255,.08); pointer-events: none; }
.sp-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 15% 110%, rgba(0,0,0,.35), transparent 60%); pointer-events: none; }
.sp-fav { position: relative; z-index: 1; width: 104px; height: 104px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.35), rgba(255,255,255,.08) 70%); border: 3px solid rgba(255,255,255,.55); box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.sp-fav .sp-pic.xl > .ic { width: 40%; height: 40%; color: rgba(255,255,255,.4); }
.sp-fav.none .sp-ava { width: 84px; height: 84px; font-size: 38px; }
.sp-id { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.sp-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp-name h3 { margin: 0; font-size: 26px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 4px rgba(0,0,0,.3); }
.sp-gm { font-size: 10px; font-weight: 900; padding: 2px 6px; border-radius: 6px; background: #fff; color: #13204a; }
.sp-user { font-weight: 800; font-size: 13.5px; color: rgba(255,255,255,.78); overflow: hidden; text-overflow: ellipsis; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.sp-title { font-size: 12px; font-weight: 900; color: #3a2400; background: linear-gradient(#ffe07a, #f0a51c); padding: 3px 10px; border-radius: 999px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-chip { --g: #4f7cff; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; max-width: 100%; padding: 3px 8px 3px 4px; border-radius: 999px; font-size: 12.5px; font-weight: 900; color: #fff;
  background: rgba(0,0,0,.28); border: 1px solid color-mix(in srgb, var(--g) 60%, #fff); }
.g-chip > span:not(.g-tag) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-chip:hover { background: rgba(0,0,0,.4); }
.sp-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.75); margin-top: 2px; }
.sp-status.on { color: #b6ffd0; }
.sp-hero.mini { padding: 12px; }
.sp-hero.mini .sp-fav { width: 72px; height: 72px; }
.sp-hero.mini .sp-fav.none .sp-ava { width: 58px; height: 58px; font-size: 26px; }
.sp-hero.mini .sp-name h3 { font-size: 20px; }

.sp-bio { margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border-left: 3px solid var(--gold); font-size: 14px; line-height: 1.5; color: #e4eaff; overflow-wrap: anywhere; white-space: pre-line; }
button.sp-bio.empty-bio { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px dashed var(--line-2); border-left: 3px solid var(--line-2); color: var(--muted); font-weight: 800; }
button.sp-bio.empty-bio .ic { width: 18px; height: 18px; }

.sp-league { margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid var(--line-2); }
.sp-league-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sp-rating, .sp-rank { display: flex; flex-direction: column; }
.sp-rating b { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-rank { margin-left: auto; text-align: right; }
.sp-rank b { font-size: 22px; line-height: 1; color: var(--gold); }
.sp-rating small, .sp-rank small { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.sp-league-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 6px; margin-top: 12px; }
.sp-league-row span { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 10px; background: rgba(0,0,0,.22); font-size: 11px; font-weight: 800; color: var(--muted); }
.sp-league-row b { font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; }
b.w { color: #8cf0b0 !important; } b.l { color: #ff9aa2 !important; }

.sp-badges { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 12px; padding: 8px; border-radius: 14px; background: rgba(0,0,0,.22); }
.sp-badges .tc-badge { max-width: 52px; justify-self: center; width: 100%; }
.sp-stats { margin-top: 8px; }

.sp-party { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 8px; }
.sp-mon { --t: #8aa; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--t) 16%, transparent), var(--surface) 60%);
  border: 1px solid color-mix(in srgb, var(--t) 30%, var(--line)); min-width: 0; }
.sp-mon-top { display: flex; gap: 10px; align-items: center; min-width: 0; }
.sp-mon-top .sp-pic { width: 60px; height: 60px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--t) 45%, transparent), rgba(0,0,0,.2)); }
.sp-mon-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sp-mon-id b { font-size: 15px; display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-mon-id small { font-size: 12px; color: var(--muted); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-mon .shiny { font-style: normal; color: var(--gold); text-shadow: 0 0 6px rgba(255, 207, 74, .7); }
.sp-g { font-style: normal; font-weight: 900; font-size: 14px; } .sp-g.f { color: #ff8ab8; } .sp-g.m { color: #7ab8ff; }
.sp-types { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.sp-types .type-chip { height: 18px; font-size: 9.5px; padding: 0 7px; }
.sp-hp { height: 5px; border-radius: 3px; background: rgba(0,0,0,.4); overflow: hidden; }
.sp-hp > div { height: 100%; background: var(--hp); border-radius: inherit; }
.sp-hp > .mid { background: #ffd23f; } .sp-hp > .low { background: var(--danger); }
.sp-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sp-mv { --c: #9aa; display: flex; align-items: center; min-height: 26px; padding: 2px 8px; border-radius: 8px; font-size: 12px; font-weight: 800; color: #fff; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: color-mix(in srgb, var(--c) 22%, rgba(0,0,0,.25)); border-left: 3px solid var(--c); }
.sp-hidden { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px dashed var(--line-2); }
.sp-hidden > .ic { width: 28px; height: 28px; color: var(--muted); }
.sp-hidden span { display: flex; flex-direction: column; } .sp-hidden small { color: var(--muted); font-weight: 700; }

/* battle history */
.sp-hist { display: flex; flex-direction: column; gap: 6px; }
.sp-match { display: flex; gap: 10px; align-items: stretch; padding: 8px 10px 8px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.sp-res { width: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; font-weight: 900; font-size: 15px; }
.sp-match.win .sp-res { background: rgba(62, 224, 122, .18); color: #8cf0b0; }
.sp-match.lose .sp-res { background: rgba(255, 95, 107, .16); color: #ff9aa2; }
.sp-m-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-m-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; min-height: 24px; }
.sp-m-top .sp-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.sp-m-vs { color: var(--muted); font-weight: 800; font-size: 12px; }
.sp-delta { font-weight: 900; font-size: 13px; padding: 0 6px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.sp-delta.up { color: #8cf0b0; background: rgba(62, 224, 122, .12); } .sp-delta.down { color: #ff9aa2; background: rgba(255, 95, 107, .12); }
.sp-casual, .sp-unconf { font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.1); color: var(--muted); }
.sp-unconf { color: #ffd98a; background: rgba(255, 207, 74, .12); }
.sp-ago { margin-left: auto; color: var(--muted); font-weight: 700; font-size: 12px; white-space: nowrap; }
.sp-m-parties { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.sp-vsgrp { display: flex; align-items: center; gap: 8px; }
.sp-vsgrp > i { font-style: normal; font-size: 10.5px; font-weight: 900; color: var(--muted); text-transform: uppercase; }
.sp-minis { display: flex; gap: 2px; }
.sp-more { width: 100%; margin-top: 8px; }

/* ---------------------------------------------------------------- edit profile */
.sp-favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.sp-favpick { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 84px; padding: 6px 4px; border-radius: 14px; border: 2px solid transparent; background: var(--surface); }
.sp-favpick small { font-size: 11px; font-weight: 800; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-favpick > .ic { width: 26px; height: 26px; margin: 13px 0; color: var(--muted); }
.sp-favpick.on { border-color: var(--gold); background: rgba(255, 207, 74, .1); }
.sp-favpick.on small { color: #fff; }

/* ---------------------------------------------------------------- mail */
.sp-mail-head { display: flex; align-items: flex-start; gap: 8px; }
.sp-mail-head .tabs { flex: 1; min-width: 0; }
.sp-compose { flex: none; }
.sp-inbox { display: flex; flex-direction: column; gap: 6px; }
.sp-msg { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 14px; text-align: left; background: var(--surface); border: 1px solid var(--line); }
.sp-msg:hover { background: var(--surface-2); }
.sp-msg .ic-tile { width: 40px; height: 40px; }
.sp-msg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sp-msg-top { display: flex; align-items: baseline; gap: 8px; }
.sp-msg-top b { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-msg-top small { font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.sp-msg-sub { font-size: 14.5px; font-weight: 800; color: #dfe6ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-msg-prev { font-size: 12.5px; color: var(--muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-msg.unread { border-color: rgba(122, 168, 255, .5); background: rgba(122, 168, 255, .09); }
.sp-msg.unread .sp-msg-top b { color: #fff; }
.sp-msg.unread .sp-msg-sub { color: #fff; font-weight: 900; }
.sp-msg.unread .unread-dot, .sp-msg.unread .unread-dot { display: block; }
.sp-msg.sys { border-left: 3px solid var(--gold); }
.sp-letter { display: flex; flex-direction: column; gap: 12px; }
.sp-letter-nav { margin: -4px 0 -2px -6px; }
.sp-letter header { display: flex; gap: 12px; align-items: center; }
.sp-letter header .sp-ava, .sp-letter header .ic-tile { width: 46px; height: 46px; }
.sp-letter h3 { margin: 0 0 2px; font-size: 19px; line-height: 1.25; overflow-wrap: anywhere; }
.sp-letter header small { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.sp-letter-body { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: #e8eeff; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-letter.sys .sp-letter-body { background: linear-gradient(180deg, rgba(255, 207, 74, .08), rgba(255,255,255,.03)); border-color: rgba(255, 207, 74, .3); }
.sp-letter-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-letter-acts .btn { flex: 1 1 120px; min-height: 44px; }

/* ---------------------------------------------------------------- guilds */
.sp-intro { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin: 4px 0 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 207, 74, .1), rgba(255,255,255,.03)); border: 1px solid rgba(255, 207, 74, .25); }
.sp-intro span { display: flex; flex-direction: column; } .sp-intro small { color: var(--muted); font-weight: 700; font-size: 12.5px; line-height: 1.4; }
.sp-guilds > .sec:first-child { margin-top: 0; }
.g-open { color: var(--muted); } .g-open.open { color: #8cf0b0; }
.g-row .sp-row-acts .btn { min-width: 64px; }
.g-invite { border-color: rgba(255, 207, 74, .4); background: rgba(255, 207, 74, .06); }
.g-hero { --g: #4f7cff; position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--g) 65%, #1a2550), color-mix(in srgb, var(--g) 25%, #0e1630) 80%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.g-hero::after { content: ''; position: absolute; right: -40px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; border: 26px solid rgba(255,255,255,.07); pointer-events: none; }
.g-hero-id { min-width: 0; flex: 1; position: relative; z-index: 1; }
.g-hero-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.g-hero-name h3 { margin: 0; font-size: 23px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-hero-name .g-tag { height: 22px; font-size: 12px; }
.g-hero-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.8); }
.g-hero-meta span { display: inline-flex; align-items: center; gap: 4px; }
.g-hero-meta .ic { width: 15px; height: 15px; }
.g-role { font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.1); color: var(--muted); }
.g-role-leader { background: linear-gradient(#ffe07a, #f0a51c); color: #3a2400; }
.g-role-officer { background: rgba(122, 168, 255, .25); color: #cfe0ff; }
.g-member.open { border-color: var(--line-2); background: var(--surface-2); }
.g-manage { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px 6px 56px; }
.g-manage .btn { flex: 1 1 auto; }
.g-form { padding: 14px; margin-bottom: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); }
.g-form .sp-form-foot { position: static; margin: 0; padding: 0; background: none; }
.g-form-grid { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
.g-tagf input { text-transform: uppercase; letter-spacing: 1px; text-align: center; }
.g-preview { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(0,0,0,.25); border: 1px dashed var(--line-2); }
.g-preview > span:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.g-preview b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.g-preview small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-emblems { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; }
.g-embpick { --g: #4f7cff; height: 46px; display: grid; place-items: center; padding: 0; border-radius: 12px; border: 2px solid transparent; background: var(--surface-2); color: var(--muted); }
.g-embpick .ic { width: 24px; height: 24px; }
.g-embpick.on { color: #fff; background: var(--g); border-color: #fff; }

/* ---------------------------------------------------------------- rankings */
.sp-pin { position: sticky; top: -16px; z-index: 2; margin: 0 -16px; padding: 0 16px 8px; background: linear-gradient(rgba(16, 24, 52, .98) 80%, transparent); }
.sp-mecard { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 207, 74, .14), rgba(122, 168, 255, .1)), #19214a; border: 1px solid rgba(255, 207, 74, .35); box-shadow: 0 6px 16px rgba(4, 8, 22, .45); }
.sp-mecard > .me-st { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.sp-mecard .me-st b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-mecard .me-st small { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.sp-mecard .me-st b { font-size: 18px; font-variant-numeric: tabular-nums; }
.sp-mecard em { flex-basis: 100%; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sp-mecard .ic-tile { width: 38px; height: 38px; }
.sp-ladder { margin-top: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.sp-ladder summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; cursor: pointer; font-weight: 800; font-size: 13.5px; color: var(--muted); }
.sp-ladder summary::-webkit-details-marker { display: none; }
.sp-ladder summary > span:first-of-type { flex: 1; }
.sp-ladder summary .ic { width: 18px; height: 18px; }
.sp-ladder[open] .chev .ic { transform: rotate(180deg); }
.sp-ladder .sp-note { padding: 0 12px 12px; margin: 0; }
.sp-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; padding: 4px 12px 10px; }
.sp-tierstep { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; background: rgba(0,0,0,.2); border: 1px solid transparent; }
.sp-tierstep small { font-size: 11.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.sp-tierstep.me { border-color: var(--gold); background: rgba(255, 207, 74, .08); }
.sp-board { display: flex; flex-direction: column; gap: 4px; }
.sp-brow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 12px 6px 6px; border-radius: 14px; text-align: left; background: var(--surface); border: 1px solid transparent; }
.sp-brow:hover { background: var(--surface-2); border-color: var(--line); }
.sp-brow.me { border-color: rgba(255, 207, 74, .6); background: rgba(255, 207, 74, .08); }
.sp-brow.top { background: linear-gradient(90deg, rgba(255,255,255,.08), var(--surface)); }
.sp-rk { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 900; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sp-rk.m1, .sp-rk.m2, .sp-rk.m3 { color: #2a1a00; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.3); }
.sp-rk.m1 { background: radial-gradient(circle at 35% 30%, #fff3b0, #ffcf4a 45%, #d98a0c); }
.sp-rk.m2 { background: radial-gradient(circle at 35% 30%, #fff, #d5dce8 45%, #8e9bb0); color: #1d2638; }
.sp-rk.m3 { background: radial-gradient(circle at 35% 30%, #ffd9b8, #d8935c 45%, #8a4a22); color: #fff1e4; }
.sp-score { display: flex; flex-direction: column; align-items: flex-end; flex: none; min-width: 48px; }
.sp-score b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sp-score small { font-size: 10.5px; color: var(--muted); font-weight: 800; }
.sp-hot { color: #ffb36b; font-weight: 900; }

/* ---------------------------------------------------------------- narrow screens / touch */
@media (max-width: 560px) {
  .sp-hero { gap: 12px; padding: 14px 12px; border-radius: 18px; }
  .sp-fav { width: 84px; height: 84px; }
  .sp-fav.none .sp-ava { width: 68px; height: 68px; font-size: 30px; }
  .sp-name h3 { font-size: 21px; }
  .sp-badges { gap: 3px; padding: 6px; }
  .sp-league-main { gap: 10px; }
  .sp-rating b { font-size: 22px; }
  .g-hero { padding: 14px 12px; gap: 12px; }
  .g-hero .g-emb { --sz: 52px !important; }
  .g-hero-name h3 { font-size: 19px; }
  .g-manage { padding-left: 6px; }
  .sp-mail-head { flex-wrap: wrap; }
  .sp-compose span { display: none; }
  .sp-compose { width: 44px; padding: 0; }
  .sp-tiers { grid-template-columns: repeat(2, 1fr); }
  .tc-grid.sp-stats { grid-template-columns: 1fr 1fr; }
  .tc-grid.sp-stats .tc-stat { padding: 8px; gap: 8px; }
  .tc-grid.sp-stats .tc-stat .ic-tile { width: 30px; height: 30px; }
  .tc-grid.sp-stats .tc-stat b { font-size: 13px; }
  .sp-actions .btn { flex: 1 1 100px; min-width: 0; }
  .sp-actions .btn.danger.ghost { flex: 0 1 auto; }
  .sp-brow .sp-ava { display: none; }
}
@media (max-width: 560px) {
  .sp-mecard { gap: 6px 14px; padding: 10px 12px; }
  .sp-mecard .me-st b { font-size: 16px; }
}
@media (max-width: 380px) {
  .sp-m-top .sp-link { max-width: 45%; }
  .sp-brow .tier.mini { display: none; }
  .g-form-grid { grid-template-columns: 1fr 88px; }
}
html.touch .sp-form-foot { bottom: calc(-16px - var(--sab, 0px)); margin-bottom: calc(-16px - var(--sab, 0px)); padding-bottom: calc(16px + var(--sab, 0px)); }
html.touch .sp-pin { top: -12px; margin: 0 -12px; padding: 0 12px 8px; }
html.touch .sp-form-foot { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
html.touch .sp-row-main { min-height: 56px; }
html.touch .sp-add .btn, html.touch .sp-tools .btn, html.touch .sp-add .search, html.touch .sp-tools .search { min-height: 46px; }
html.touch .tier.mini { width: 30px; height: 30px; }
html.touch .sp-ladder summary, html.touch .sp-msg { min-height: 56px; }
html.touch .sp-mv { min-height: 28px; }
html.touch .sp-link { padding: 6px 0; margin: -6px 0; }
html.touch .sp-swatches:not(.sp-banners) .sp-sw { width: 46px; height: 46px; }
/* landscape phones: everything is short — tighten the heroes */
@media (max-height: 500px) {
  .sp-hero { padding: 10px 12px; }
  .sp-fav { width: 72px; height: 72px; }
  .sp-fav.none .sp-ava { width: 58px; height: 58px; font-size: 26px; }
  .g-hero { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .btn.armed { animation: none; } }
html.reduce-motion .btn.armed { animation: none; }