/* The player's cover defines the light; the collection supplies the content. */
#app-container.profile-view-open { background: #08090b !important; }
#tab-player-profile { background: #08090b; }
#profile-screen-body { --profile-rgb: 145 151 164; --profile-accent: rgb(var(--profile-rgb)); width: 100%; max-width: 640px; margin: 0 auto; padding: 0 16px 32px; box-sizing: border-box; color: #f2f2f4; background: radial-gradient(ellipse 100% 420px at 50% 190px,rgb(var(--profile-rgb) / .22),transparent 100%),#08090b; transition: background-color .2s; }
#profile-screen-body svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#profile-screen-body .pp-screen-bar { min-height: 68px; padding: 10px 0; gap: 12px; grid-template-columns: auto minmax(0,1fr) auto; border: 0; background: #08090beb; backdrop-filter: blur(12px); }
#profile-screen-body .pp-screen-back { display: flex; align-items: center; gap: 5px; width: auto; height: 42px; padding: 0 12px 0 9px; color: #f5f4f6; font-size: 13px; border: 1px solid #ffffff12; background: #ffffff08; }
#profile-screen-body .pp-screen-owner b { font-size: 12px; color: #a8a6ad; font-weight: 500; }
#profile-screen-body .pp-screen-actions { gap: 5px; }
#profile-screen-body .pp-screen-actions button { display: grid; place-items: center; padding: 0; width: 42px; height: 42px; border: 1px solid #ffffff12; background: #ffffff08; color: #f5f4f6; }
#profile-screen-body .pp-summary-card { margin: 6px 0 0; padding: 0; border: 1px solid #ffffff16; border-radius: 23px; background: #0d0e11; box-shadow: 0 10px 40px rgb(var(--profile-rgb) / .16); }
#profile-screen-body .pp-cover { height: clamp(158px,44vw,220px); border-radius: 0; background: radial-gradient(ellipse at 30% 20%,rgb(var(--profile-rgb) / .25),transparent),#16181e; }
#profile-screen-body .pp-cover-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: 1; }
#profile-screen-body .pp-cover-shade { background: linear-gradient(180deg,#00000008 15%,#05060b2b 40%,#0d0e11f5 100%); }
#profile-screen-body .pp-cover-rank { top: 16px; right: 14px; bottom: auto; max-width: 48%; padding: 8px 11px; border: 1px solid #ffffff38; border-radius: 12px; color: #f5f5f7; background: #0a0b10b3; backdrop-filter: blur(8px); font-size: 10px; }
#profile-screen-body .pp-cover-rank b { font-size: 17px; }
#profile-screen-body .pp-identity { position: absolute; inset: auto 16px 17px; margin: 0; padding: 0; display: flex; gap: 13px; align-items: center; }
#profile-screen-body .pp-avatar { width: 60px; height: 60px; flex: 0 0 60px; border: 2px solid #ffffffc9; border-radius: 17px; padding: 0; background: #15171d; box-shadow: 0 0 22px rgb(var(--profile-rgb) / .4); }
#profile-screen-body .pp-avatar > * { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
#profile-screen-body .pp-identity-copy { min-width: 0; }
#profile-screen-body .pp-name { display: block; color: #fff; font-family: var(--font-body); font-size: clamp(22px,5.9vw,30px); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-shadow: 0 2px 8px #0008; }
#profile-screen-body .pp-cover-rank { left: auto; }
#profile-screen-body .pp-screen-back { justify-self: start; }
#profile-screen-body .pp-badges { margin-top: 6px; gap: 5px; }
#profile-screen-body .pp-league { padding: 3px 9px; color: #e0e0e8; background: #ffffff15; border: 1px solid #ffffff1a; border-radius: 7px; font-size: 11px; font-weight: 500; }
#profile-screen-body .pp-clan-chip { display: inline-flex; max-width: 100%; margin-top: 5px; padding: 0; border: 0; background: none; color: #c0bdc7; font-size: 10px; overflow-wrap: anywhere; }
#profile-screen-body .pp-clan-dot { background: var(--profile-accent); }
#profile-screen-body .pp-vip { color: #f1c375; font-size: 9px; vertical-align: middle; padding: 3px 5px; border-radius: 4px; background: #332718; text-shadow: none; }
#profile-screen-body .pp-chin { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin: 0; padding: 0; border-block: 1px solid #ffffff0e; }
#profile-screen-body .pp-chin-cell { display: grid; grid-template-columns: 18px auto; justify-content: center; align-content: center; gap: 4px 6px; min-width: 0; min-height: 58px; padding: 8px 4px; border: 0; border-radius: 0; background: none; }
#profile-screen-body .pp-chin-cell + .pp-chin-cell { border-left: 1px solid #ffffff0e; }
#profile-screen-body .pp-chin-cell svg { width: 18px; height: 18px; color: #b5b2bf; }
#profile-screen-body .pp-chin-cell:nth-child(2) svg { color: #dec582; }
#profile-screen-body .pp-chin-cell:nth-child(3) svg { color: #d3b1bd; }
#profile-screen-body .pp-chin-cell b { font: 700 clamp(13px,3.7vw,18px)/1.2 var(--font-body); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#profile-screen-body .pp-chin-cell small { grid-column: 1/-1; color: #918e9c; font-size: 10px; text-align: center; }
#profile-screen-body .pp-chin-meta { display: flex; flex-direction: row; justify-content: center; gap: 7px; margin: 0; padding: 11px 8px; color: #93909e; font-size: 10px; }
#profile-screen-body .pp-chin-meta svg { width: 14px; height: 14px; flex-basis: 14px; }
#profile-screen-body .pp-profile-tabs { position: static; display: flex; gap: 8px; width: 100%; margin: 20px 0 18px !important; padding: 0; border: 0; background: none; }
#profile-screen-body .pp-profile-tabs button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid #ffffff17; border-radius: 999px; background: #101114; color: #a9a6b0; font: 600 12px var(--font-body); }
#profile-screen-body .pp-profile-tabs button.active { background: #f4f3f6; border-color: #f4f3f6; color: #17171b; }
#profile-screen-body .pp-profile-tabs svg { width: 16px; height: 16px; flex-basis: 16px; }
#profile-screen-body .pp-content { padding: 0; min-height: 0; }
#profile-screen-body .pp-duo { grid-template-columns: minmax(0,1fr) minmax(0,1.75fr); align-items: stretch; gap: 12px; min-height: 0; padding: 16px 12px; border: 1px solid #ffffff12; border-radius: 22px; background: #0d0e12; box-shadow: 0 4px 25px rgb(var(--profile-rgb) / .15); }
#profile-screen-body .pp-duo-label { gap: 5px; min-height: 22px; margin-bottom: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
#profile-screen-body .pp-duo-label svg { width: 16px; height: 16px; flex-basis: 16px; color: #e1b7c5; }
#profile-screen-body .pp-duo-side .pp-duo-label svg { color: #e0c079; }
#profile-screen-body .pp-waifu-wrap { min-height: 0; height: calc(100% - 32px); }
#profile-screen-body .pp-waifu-glow { display: none; }
#profile-screen-body .pp-featured-card { min-height: 0; max-height: none; height: 100%; aspect-ratio: auto; border: 2px solid var(--card-rank); border-radius: 15px; }
#profile-screen-body .pp-favorites-grid { gap: 6px; }
#profile-screen-body .pp-favorite-card { aspect-ratio: .72; border-radius: 11px; border: 1.5px solid var(--card-rank,#474651); }
#profile-screen-body .pp-card-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#profile-screen-body .pp-card-caption { left: 5px; right: 5px; bottom: 6px; }
#profile-screen-body .pp-card-caption b { font-size: 9px; line-height: 1.2; font-weight: 600; }
#profile-screen-body .pp-card-caption span { display: none; }
#profile-screen-body .pp-featured-card .pp-card-caption b { font-size: 12px; }
#profile-screen-body .pp-card-stars { top: 5px; left: 5px; gap: 0; font-size: 8px; }
#profile-screen-body .pp-card-stars i { font-size: 8px; }
#profile-screen-body .pp-fav-manage { width: 25px; min-height: 25px; padding: 0; color: #c4c1cf; border: 1px solid #ffffff1a; background: #ffffff09; font-size: 17px; }
#profile-screen-body .pp-fav-add { border-color: #ffffff20 !important; background: #ffffff03 !important; color: #a4a0b0; }
#profile-screen-body .pp-fav-add small { font-size: 8px; text-transform: none; letter-spacing: 0; }
#profile-screen-body .pp-favorite-toggle { top: 20px; right: 3px; width: 22px; height: 22px; font-size: 11px; }
#profile-screen-body .pp-featured-toggle { top: 45px; right: 3px; width: 22px; height: 22px; font-size: 11px; }
#profile-screen-body .pp-section { margin-top: 18px; padding: 18px 16px; border: 1px solid #ffffff12; border-radius: 22px; background: #101115; }
#profile-screen-body .pp-section-head { align-items: center; margin-bottom: 14px; }
#profile-screen-body .pp-section-head h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
#profile-screen-body .pp-section-head > span { color: #8f8b99; font-size: 10px; }
#profile-screen-body .pp-battle-numbers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding-top: 5px; }
#profile-screen-body .pp-battle-numbers div { display: flex; flex-direction: column; gap: 5px; text-align: center; }
#profile-screen-body .pp-battle-numbers b { font-size: 20px; font-variant-numeric: tabular-nums; }
#profile-screen-body .pp-battle-numbers span { font-size: 10px; color: #9995a3; }
#profile-screen-body .pp-trade-lists { min-height: 58px; margin-top: 14px; padding: 12px 16px; border-color: #ffffff12; border-radius: 18px; background: #0d0e12; color: #e8e5ee; box-shadow: 0 4px 22px rgb(var(--profile-rgb) / .1); }
#profile-screen-body .pp-trade-lists svg { color: #bdb8cb; }
#profile-screen-body .pp-sets-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#profile-screen-body .pp-set-row { min-height: 140px; padding: 12px; border-radius: 14px; }
#profile-screen-body .pp-set-head { gap: 5px; }
#profile-screen-body .pp-set-name { font-size: 11px; }
#profile-screen-body .pp-set-count { font-size: 10px; }
#profile-screen-body .pp-set-art { opacity: .65; }
#profile-screen-body .pp-ach-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
#profile-screen-body .pp-empty-premium { min-height: 90px; padding: 15px; color: #bcb7c7; }
#profile-screen-body .pp-open-clan-trade { color: #eeeaf4; border-color: rgb(var(--profile-rgb) / .45); background: rgb(var(--profile-rgb) / .1); }
#profile-screen-body :is(button,[tabindex]):focus-visible { outline: 2px solid #ddd9e7; outline-offset: 3px; }
@media (max-width:359px) { #profile-screen-body { padding-inline: 10px; } #profile-screen-body .pp-screen-owner { display: none; } #profile-screen-body .pp-screen-bar { grid-template-columns: 1fr auto; } #profile-screen-body .pp-duo { gap: 8px; padding-inline: 10px; } #profile-screen-body .pp-duo-label { font-size: 10px; } #profile-screen-body .pp-profile-tabs { gap: 5px; } #profile-screen-body .pp-profile-tabs button { gap: 4px; font-size: 10px; } #profile-screen-body .pp-avatar { width: 64px; height: 64px; flex-basis: 64px; } }
@media (min-width:800px) { #profile-screen-body { padding-inline: 28px; } #profile-screen-body .pp-screen-bar { min-height: 78px; } #profile-screen-body .pp-duo { gap: 18px; padding: 20px; } #profile-screen-body .pp-duo-label { font-size: 15px; } #profile-screen-body .pp-card-caption b { font-size: 11px; } }
@media(prefers-reduced-motion:reduce) { #profile-screen-body * { scroll-behavior: auto; transition: none; } }