/* Player profile: dark editorial layout inspired by the 2023 TLOU design. */
.overlay-alerts[hidden] { display:none!important; }
.public-site .player-page { --pp-ink:#111210; --pp-panel:#1d1e1b; --pp-panel-alt:#252620; --pp-line:#393c34; --pp-gold:#e6b85f; --pp-muted:#abaea3; width:min(1280px,100%); margin:0 auto; padding:26px 24px 90px; color:#f5f3eb; font-family:Poppins,Arial,sans-serif; }
/* Legacy custom.css floats every section, pulling the profile cards beside the hero. */
.public-site .player-page section { float:none; width:auto; }
.public-site .player-page > .player-hero { display:block; width:100%; clear:both; }
.public-site .player-page a { text-decoration:none; }
.public-site .player-page h1,.public-site .player-page h2,.public-site .player-page h3,.public-site .player-page p { margin-top:0; }
.player-page__breadcrumb { display:flex; align-items:center; gap:11px; color:#8d9085; font-size:12px; margin:0 0 22px; }
.player-page__breadcrumb a { color:var(--pp-muted)!important; }
.player-page__breadcrumb a:hover { color:var(--pp-gold)!important; }
.player-eyebrow { color:var(--pp-gold); font-size:10px; font-weight:700; letter-spacing:.19em; line-height:1.5; }
.player-eyebrow__mark { display:inline-block; width:7px; height:7px; margin-right:8px; background:var(--pp-gold); transform:rotate(45deg); }
.player-hero { position:relative; overflow:hidden; border:1px solid #685336; background:radial-gradient(circle at 76% 1%,rgba(183,138,71,.15),transparent 36%),linear-gradient(125deg,#27291f 0%,#1c201d 47%,#171916 100%); border-radius:8px; box-shadow:0 25px 80px #0004; }
.player-hero::after { content:""; position:absolute; top:-130px; right:80px; width:380px; height:650px; transform:rotate(28deg); border:1px solid #b7934a24; pointer-events:none; }
.player-hero__topline,.player-hero__footer { position:relative; z-index:1; display:flex; justify-content:space-between; gap:20px; align-items:center; }
.player-hero__topline { padding:19px 30px; border-bottom:1px solid #a8905832; }
.player-hero__number { color:#aaa89d; letter-spacing:.16em; font-size:10px; font-weight:700; }
.player-hero__content { position:relative; z-index:1; display:grid; grid-template-columns:162px minmax(0,1fr) 225px; align-items:center; gap:34px; padding:44px 46px 52px; }
.player-hero__avatar-wrap { position:relative; width:162px; height:162px; padding:6px; border:1px solid var(--pp-gold); background:#1a1b18; box-shadow:0 0 0 7px #d1a75e12,0 18px 30px #0008; }
.player-hero__avatar { width:100%; height:100%; display:block; object-fit:cover; background:#33362d; border-radius:0; }
.player-hero__avatar--fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--pp-gold); background:radial-gradient(circle at 50% 33%,#494636,#30332c 65%); }
.player-hero__avatar--fallback svg { width:77px; height:77px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.player-hero__avatar--fallback span { font-size:9px; font-weight:800; letter-spacing:.22em; }
.player-hero__avatar-corner { position:absolute; display:grid; place-items:center; width:29px; height:29px; bottom:-12px; right:-12px; color:#16150f; background:var(--pp-gold); transform:rotate(45deg); font-size:16px; }
.player-hero__avatar-corner::first-letter { transform:rotate(-45deg); }
.player-hero__tag { color:#aaa99e; font-size:10px; font-weight:700; letter-spacing:.19em; }
.player-hero__tag span { color:var(--pp-gold); padding:0 5px; }
.public-site a.player-hero__pass { display:inline-block; margin:0 0 14px; padding:5px 10px; color:#171812; background:var(--pp-gold); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.player-hero__identity { min-width:0; text-align:left; }
.public-site .player-hero h1 { display:block; width:100%; margin:8px 0 12px; max-width:100%; text-align:left; overflow-wrap:anywhere; font-size:clamp(36px,4.3vw,64px); font-weight:800; line-height:1.1; letter-spacing:-.055em; color:#fff; }
.player-hero__psn { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; width:fit-content; max-width:100%; margin:0 0 17px; padding:9px 13px; border-left:2px solid var(--pp-gold); background:#b7985030; text-align:left; }
.player-hero__psn>span { color:#d8c294; font-size:9px; font-weight:800; letter-spacing:.11em; white-space:nowrap; }
.player-hero__psn strong { color:#fff; font-size:14px; font-weight:700; overflow-wrap:anywhere; }
.player-hero__psn strong i { margin-right:5px; color:var(--pp-gold); }
.public-site a.player-hero__psn--empty { color:var(--pp-gold); border-color:#86785c; background:#ffffff0b; }
.player-hero__psn--empty strong { color:#d3c4a8; font-size:11px; }
.public-site a.player-hero__psn--empty:hover { background:#e6b85f25; }
.player-hero__meta { display:flex; flex-wrap:wrap; gap:9px 20px; color:#c8c7bb; font-size:12px; }
.player-hero__meta span { display:inline-flex; align-items:center; gap:7px; }
.player-hero__meta i { color:var(--pp-gold); }
.player-hero__meta img { width:19px; height:14px; object-fit:cover; border:1px solid #ffffff3b; }
.player-hero__social { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; }
.player-hero__social a { color:#e1ddce!important; border:1px solid #777052; padding:8px 13px; background:#ffffff09; font-size:11px; font-weight:700; }
.player-hero__social a:hover { color:#171812!important; background:var(--pp-gold); }
.player-hero__social i { margin-right:5px; }
.player-hero__rating { display:flex; flex-direction:column; align-items:flex-start; border-left:1px solid #9c82544b; padding:8px 0 8px 30px; }
.player-hero__rating strong { color:#fff; font-size:clamp(48px,5vw,72px); font-weight:800; letter-spacing:-.065em; line-height:1.15; font-variant-numeric:tabular-nums; }
.player-hero__rank { color:#d8c6a3; font-size:12px; font-weight:700; }
.player-hero__rating a { margin-top:24px; color:var(--pp-gold)!important; font-size:11px; font-weight:700; }
.player-hero__footer { padding:13px 30px; border-top:1px solid #a8905832; color:#9d9e91; font-size:9px; font-weight:700; letter-spacing:.19em; }
.player-pulse { display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:#b6c986; box-shadow:0 0 9px #b6c986; }
.player-page__toolbar { display:flex; justify-content:space-between; align-items:center; gap:18px; margin:27px 0 24px; border-bottom:1px solid var(--pp-line); }
.player-tabs { display:flex; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:thin; }
.public-site .player-tabs__tab,.public-site .player-share { flex:none; appearance:none; border:0; border-radius:0; box-shadow:none; background:transparent; color:#abaea3; cursor:pointer; font-size:12px; font-weight:700; }
.public-site .player-tabs__tab { display:inline-flex; align-items:center; gap:8px; padding:15px 19px; border-bottom:2px solid transparent; white-space:nowrap; }
.public-site .player-tabs__tab:hover,.public-site .player-tabs__tab.is-active { color:var(--pp-gold); background:#e6b85f0b; border-bottom-color:var(--pp-gold); }
.player-tabs__count { display:grid; place-items:center; min-width:19px; height:19px; padding:0 4px; border-radius:15px; background:#795e2e; color:#fff; font-size:10px; }
.public-site .player-share { padding:9px 0 9px 12px; white-space:nowrap; }
.public-site .player-share:hover { color:var(--pp-gold); }
.public-site .player-share i { margin-right:6px; }
.player-panel[hidden] { display:none!important; }
.player-dashboard { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(310px,1fr); gap:20px; align-items:start; }
.player-dashboard__primary,.player-dashboard__aside { display:grid; gap:20px; min-width:0; }
.public-site .player-card { padding:27px 28px; border:1px solid var(--pp-line); border-radius:7px; background:var(--pp-panel); box-shadow:0 12px 36px #0002; color:#f5f3eb; }
.player-card__head { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:22px; }
.public-site .player-card h2 { margin:4px 0 0; color:#fff; font-size:23px; font-weight:700; line-height:1.3; }
.player-card__head p,.player-card--manage>p { color:var(--pp-muted); font-size:12px; margin:10px 0 0; line-height:1.6; }
.player-card__symbol { color:#aa8b54; font-size:30px; font-weight:300; line-height:1; }
.player-performance { display:grid; grid-template-columns:192px minmax(0,1fr); align-items:center; gap:28px; }
.player-performance__ring { display:grid; place-items:center; width:190px; height:190px; border-radius:50%; background:conic-gradient(var(--pp-gold) var(--win-rate),#41443b var(--win-rate)); box-shadow:0 10px 25px #0005; }
.player-performance__ring>div { display:flex; flex-direction:column; align-items:center; justify-content:center; width:160px; height:160px; border-radius:50%; background:var(--pp-panel); text-align:center; }
.player-performance__ring strong { font-size:43px; font-weight:800; letter-spacing:-.07em; line-height:1.2; color:#fff; }
.player-performance__ring span { color:var(--pp-gold); font-size:9px; font-weight:700; letter-spacing:.12em; }
.player-performance__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.player-performance__grid>div { display:flex; flex-direction:column; justify-content:space-between; min-height:86px; padding:13px 15px; border:1px solid #414339; background:var(--pp-panel-alt); }
.player-performance__grid span { color:var(--pp-muted); font-size:9px; font-weight:700; letter-spacing:.1em; }
.player-performance__grid strong { color:#fff; font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; }
.player-performance__grid .player-performance__record { color:var(--pp-gold); }
.player-card__note { margin:15px 0 0; color:var(--pp-muted); font-size:11px; line-height:1.6; }
.player-results { display:grid; }
.player-result { display:grid; grid-template-columns:58px minmax(0,1fr) 18px; align-items:center; gap:16px; min-height:75px; padding:12px 0; border-top:1px solid #383a33; color:#f1efe5!important; }
.player-result:hover { background:#e6b85f0a; }
.player-result__outcome { display:grid; place-items:center; padding:7px 4px; border:1px solid #77756a; color:#ddd8c6; font-size:10px; font-weight:800; text-transform:uppercase; }
.player-result__outcome.is-win { color:#cedba7; border-color:#66764c; background:#79885b22; }
.player-result__outcome.is-loss { color:#e4a395; border-color:#895f57; background:#a1655122; }
.player-result__fixture { display:flex; align-items:center; flex-wrap:wrap; column-gap:7px; line-height:1.3; }
.player-result__fixture strong { font-size:12px; }
.player-result__fixture>span { font-size:10px; color:var(--pp-muted); }
.player-result__fixture small { flex-basis:100%; margin-top:4px; color:var(--pp-muted); font-size:10px; }
.player-result__arrow { color:var(--pp-gold); }
.player-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:150px; padding:17px; text-align:center; }
.player-empty>span { color:#8d7450; font-size:32px; line-height:1.2; }
.player-empty strong { color:#f0ecdd; font-size:12px; }
.player-empty p { max-width:255px; margin:6px 0 0; color:var(--pp-muted); font-size:11px; line-height:1.6; }
.player-empty--compact { min-height:130px; }
.player-season { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 0; border-top:1px solid #3d4038; color:#fff!important; }
.player-season>span:first-child { min-width:0; }
.player-season strong,.player-season small { display:block; }
.player-season strong { overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.player-season small { margin-top:3px; color:var(--pp-muted); font-size:10px; }
.player-season__elo { color:var(--pp-gold); white-space:nowrap; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.player-season__elo small { display:inline; color:var(--pp-gold); font-size:9px; letter-spacing:.1em; }
.player-card__link { display:flex; justify-content:space-between; margin-top:13px; padding-top:15px; border-top:1px solid #3d4038; font-size:11px; font-weight:700; color:var(--pp-gold)!important; }
.player-trophies { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.player-trophies>div { display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; text-align:center; }
.player-trophies__gold { --tier-color:#e6b85f; --trophy-x:-1015px; }
.player-trophies__silver { --tier-color:#bdc7c3; --trophy-x:-1113px; }
.player-trophies__bronze { --tier-color:#c78868; --trophy-x:-1211px; }
.player-trophies .player-trophies__art { display:block; flex:none; width:82px; height:82px; border-radius:50%; background-image:url('../images/profile-trophies-figma.png'); background-repeat:no-repeat; background-size:1440px 2029px; background-position:var(--trophy-x) -337px; }
.player-trophies strong { color:#fff; font-size:22px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.player-trophies span:not(.player-trophies__art) { color:var(--tier-color); font-size:9px; font-weight:800; letter-spacing:.15em; }
.player-badges { display:flex; flex-wrap:wrap; gap:10px; }.player-badges .player-card__note { margin:0; }.player-badge { display:flex; flex-direction:column; align-items:center; gap:8px; max-width:120px; padding:13px; border:1px solid #494638; background:#262720; text-align:center; }.player-badge img { width:55px; height:55px; object-fit:contain; }.player-badge span { color:#eee9dc; font-size:10px; line-height:1.35; }
.player-teams-layout,.player-settings-layout { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.player-team { display:flex; align-items:center; gap:15px; min-height:76px; border-top:1px solid #414339; color:#eeeae0!important; }.player-team:hover,.player-timeline a:hover { color:var(--pp-gold)!important; }.player-team__crest { display:grid; place-items:center; flex:none; width:48px; height:48px; border:1px solid #746442; background:#292a24; color:var(--pp-gold); font-weight:800; }.player-team__crest img { width:100%; height:100%; object-fit:cover; }.player-team>span:nth-child(2) { flex:1; min-width:0; }.player-team strong,.player-team small { display:block; }.player-team strong { font-size:13px; }.player-team small { margin-top:3px; color:var(--pp-muted); font-size:11px; }.player-team>span:last-child { color:var(--pp-gold); }
.player-timeline { margin:0; padding:0; list-style:none; }.player-timeline li:not(.player-empty) { display:flex; gap:17px; position:relative; padding:0 0 26px; }.player-timeline li:not(.player-empty)::before { content:""; position:absolute; left:6px; top:13px; bottom:0; border-left:1px solid #795f37; }.player-timeline li:last-child::before { display:none; }.player-timeline__marker { flex:none; width:13px; height:13px; margin-top:2px; border:2px solid var(--pp-gold); background:#20211d; transform:rotate(45deg); }.player-timeline strong,.player-timeline span,.player-timeline small { display:block; }.player-timeline strong,.player-timeline a { color:#fff; font-size:13px; }.player-timeline span { color:#d9c69d; font-size:11px; margin:4px 0; }.player-timeline small { color:var(--pp-muted); font-size:10px; line-height:1.5; }
.player-card--manage { padding:32px!important; }.player-invite-group { padding:20px 0; border-top:1px solid #414339; }.player-invite-group h3 { margin:0 0 12px; font-size:14px; }.player-invite { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:12px 0; }.player-invite strong,.player-invite small { display:block; }.player-invite strong { font-size:13px; }.player-invite small { margin-top:3px; color:var(--pp-muted); font-size:11px; }.player-invite>div { display:flex; gap:7px; }.player-action { display:inline-flex; justify-content:center; padding:8px 12px; border:1px solid #6a695f; color:#eee!important; font-size:11px; font-weight:700; }.player-action--primary { background:var(--pp-gold); border-color:var(--pp-gold); color:#19170f!important; }.player-action:hover { border-color:var(--pp-gold); }
.player-form { display:grid; gap:18px; }.player-form__grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.player-form label { display:flex; flex-direction:column; gap:7px; color:#eeebdf; font-size:11px; font-weight:700; }.public-site .player-form input,.public-site .player-form select { display:block; width:100%; min-height:42px; padding:9px 11px; color:#f3eee1; border:1px solid #55584d; background:#252720; border-radius:3px; font-size:12px; }.public-site .player-form input:disabled { opacity:.6; cursor:not-allowed; }.player-form small { color:var(--pp-muted); font-size:10px; font-weight:400; line-height:1.5; }.player-form input[type=file] { font-size:11px; }.public-site .player-submit { justify-self:start; margin-top:5px; border-radius:3px!important; background:var(--pp-gold)!important; color:#17150f!important; }.public-site .player-submit:hover { background:#f8d68e!important; }.player-email-preferences { margin-top:26px; padding-top:24px; border-top:1px solid var(--pp-line); }
.player-email-preferences h3 { margin:0; color:#fff; font-size:17px; }
.player-email-preferences p { margin:0; color:var(--pp-muted); font-size:12px; line-height:1.6; }
.player-form .player-email-preferences__option { display:flex; flex-direction:row; align-items:center; gap:12px; width:fit-content; max-width:100%; cursor:pointer; font-size:13px; line-height:1.4; }
.public-site .player-email-preferences input[type=checkbox] { display:block; flex:0 0 18px; width:18px; height:18px; min-height:18px; margin:0; padding:0; accent-color:var(--pp-gold); cursor:pointer; }
.player-email-preferences__option span { min-width:0; }
.player-settings-aside { display:grid; gap:16px; }.player-form--password { margin-top:22px; }.player-admin-link { display:flex; justify-content:space-between; padding:16px 20px; border:1px solid #755a2e; color:var(--pp-gold)!important; font-size:12px; }
@media(max-width:1000px) { .player-hero__content { grid-template-columns:130px minmax(0,1fr); gap:26px; }.player-hero__avatar-wrap { width:130px; height:130px; }.player-hero__rating { grid-column:1/-1; flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:8px 18px; border-left:0; border-top:1px solid #9c82544b; padding:18px 0 0; }.player-hero__rating strong { font-size:42px; }.player-hero__rating a { margin:0 0 0 auto; }.player-dashboard { grid-template-columns:1fr; }.player-dashboard__aside { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }.player-card--badges { grid-column:1/-1; } }
@media(max-width:700px) { .public-site .player-page { padding:16px 15px 55px; }.player-hero__topline,.player-hero__footer { padding:13px 16px; }.player-hero__number,.player-hero__footer>span:last-child { display:none; }.player-hero__content { padding:29px 20px 32px; grid-template-columns:95px 1fr; gap:16px; align-items:start; }.player-hero__avatar-wrap { width:95px; height:95px; }.player-hero__avatar--fallback svg { width:50px; height:50px; }.player-hero__avatar--fallback span { font-size:7px; }.player-hero__tag { font-size:8px; }.public-site .player-hero h1 { margin:5px 0 8px; font-size:clamp(27px,7vw,42px); }.player-hero__psn { padding:7px 9px; }.player-hero__psn>span { font-size:8px; }.player-hero__meta { gap:6px 12px; font-size:10px; }.player-hero__social { margin-top:14px; gap:6px; }.player-hero__social a { padding:6px 8px; font-size:10px; }.player-hero__rating { grid-column:1/-1; }.player-page__toolbar { align-items:stretch; flex-direction:column-reverse; gap:0; }.public-site .player-share { align-self:flex-end; }.public-site .player-tabs__tab { padding:12px 11px; font-size:11px; }.player-teams-layout,.player-settings-layout,.player-dashboard__aside { grid-template-columns:1fr; }.player-card--badges { grid-column:auto; }.public-site .player-card { padding:21px; }.public-site .player-card--manage { padding:22px!important; } }
@media(max-width:520px) { .player-hero__content { grid-template-columns:76px 1fr; }.player-hero__avatar-wrap { width:76px; height:76px; }.player-performance { grid-template-columns:1fr; justify-items:center; }.player-performance__grid { width:100%; }.player-form__grid { grid-template-columns:1fr; }.player-invite { align-items:flex-start; flex-direction:column; gap:9px; }.player-result { gap:9px; grid-template-columns:51px minmax(0,1fr) 12px; }.player-result__fixture strong { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .public-site .player-page *, .public-site .player-page *::before, .public-site .player-page *::after { scroll-behavior:auto!important; transition:none!important; } }
