:root { --ps-navy:#112e3b; --ps-teal:#20606a; --ps-mint:#a8e6d0; --ps-gold:#ffc857; --ps-paper:#f6fbfa; }
* { box-sizing:border-box; }
body.ps-member-showcase { background:linear-gradient(135deg,#102e3b,#164b55 58%,#1c6b67); color:#fff; font-family:Arial,Helvetica,sans-serif; margin:0; min-height:100vh; }
.ps-showcase-shell { margin:0 auto; max-width:1180px; overflow:hidden; padding:24px 28px 36px; }
.ps-showcase-nav { align-items:center; display:flex; justify-content:space-between; }
.ps-showcase-brand img { background:rgba(255,255,255,.1); border-radius:10px; display:block; height:38px; padding:6px 9px; }
.ps-showcase-join-link { color:#d9f7ed; font-size:14px; font-weight:700; text-decoration:none; }
.ps-showcase-join-link i { margin-left:5px; }
.ps-showcase-hero { align-items:center; display:grid; gap:60px; grid-template-columns:1fr 280px; min-height:420px; padding:54px 6vw 48px; position:relative; }
.ps-showcase-hero:after { background:url('/assets/img/kingdom/island-background-v2.png') center/cover no-repeat; content:''; inset:-40px -180px -100px 35%; opacity:.2; pointer-events:none; position:absolute; }
.ps-showcase-intro,.ps-showcase-profile-card { position:relative; z-index:1; }
.ps-showcase-kicker { color:var(--ps-gold); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ps-showcase-kicker i { margin-right:6px; }
.ps-showcase-hero h1 { font-size:clamp(44px,7vw,76px); letter-spacing:-.06em; line-height:.95; margin:13px 0 8px; }
.ps-showcase-handle { color:var(--ps-mint); font-size:18px; font-weight:700; margin:0; }
.ps-showcase-copy { color:#d9eef0; font-size:19px; line-height:1.45; margin:24px 0; max-width:510px; }
.ps-showcase-cta { background:var(--ps-gold); border-radius:9px; color:#183642; display:inline-block; font-weight:800; padding:14px 19px; text-decoration:none; }
.ps-showcase-cta i { margin-left:7px; }
.ps-showcase-profile-card { align-items:center; background:rgba(9,34,43,.65); border:1px solid rgba(205,245,232,.24); border-radius:22px; box-shadow:0 22px 50px rgba(0,0,0,.2); display:flex; flex-direction:column; min-height:260px; padding:26px; text-align:center; }
.ps-showcase-avatar { border:4px solid var(--ps-gold); border-radius:50%; height:98px; object-fit:cover; width:98px; }
.ps-showcase-member-badge { background:rgba(168,230,208,.16); border-radius:999px; color:#dffff4; font-size:12px; font-weight:700; margin:14px 0 11px; padding:6px 10px; }
.ps-showcase-profile-card strong { font-size:24px; }.ps-showcase-profile-card > span:last-child { color:#b9dbd8; font-size:13px; margin-top:5px; }
.ps-showcase-stats { display:grid; gap:14px; grid-template-columns:repeat(4,1fr); position:relative; z-index:2; }
.ps-showcase-stat { align-items:center; background:#f7fffd; border-radius:14px; box-shadow:0 12px 30px rgba(5,30,39,.16); color:var(--ps-navy); display:flex; gap:13px; min-height:102px; padding:18px; }
.ps-showcase-stat i { background:#d9f6ed; border-radius:11px; color:#1a7270; font-size:21px; padding:13px; }.ps-showcase-stat.is-gold i { background:#fff1cd; color:#bb7b00; }
.ps-showcase-stat strong,.ps-showcase-stat span { display:block; }.ps-showcase-stat strong { font-size:22px; }.ps-showcase-stat span { color:#587078; font-size:12px; margin-top:4px; }
.ps-showcase-kingdom { align-items:center; background:linear-gradient(100deg,#f0fcf7,#d8f5e9); border-radius:20px; color:var(--ps-navy); display:grid; gap:44px; grid-template-columns:1fr 1fr; margin:44px 0 24px; overflow:hidden; padding:38px 48px; position:relative; }
.ps-showcase-kingdom:after { background:url('/assets/img/kingdom/quest-map-background-v1.png') center/cover; content:''; inset:0 0 0 56%; opacity:.15; pointer-events:none; position:absolute; }.ps-showcase-kingdom-copy,.ps-showcase-progress-wrap { position:relative; z-index:1; }
.ps-showcase-kingdom h2 { font-size:30px; margin:11px 0 10px; }.ps-showcase-kingdom p { color:#49636a; line-height:1.45; margin:0; }.ps-showcase-kingdom .ps-showcase-kicker { color:#20826d; }
.ps-showcase-progress-label { display:flex; justify-content:space-between; margin-bottom:10px; }.ps-showcase-progress-label span { color:#267f6d; font-weight:800; }.ps-showcase-progress { background:#c7e7db; border-radius:99px; height:16px; overflow:hidden; }.ps-showcase-progress span { background:linear-gradient(90deg,#238a74,#68c99c); border-radius:inherit; display:block; height:100%; }.ps-showcase-progress-note { color:#597178; font-size:13px; margin-top:12px; }.ps-showcase-progress-note i { color:#d59200; margin-right:5px; }
.ps-showcase-footer { color:#cce5e3; font-size:14px; padding:16px 0; text-align:center; }.ps-showcase-footer a { color:var(--ps-gold); font-weight:700; }
@media (max-width:800px) { .ps-showcase-hero { gap:32px; grid-template-columns:1fr; padding:62px 3vw 32px; }.ps-showcase-profile-card { max-width:290px; }.ps-showcase-stats { grid-template-columns:repeat(2,1fr); }.ps-showcase-kingdom { grid-template-columns:1fr; padding:30px; }.ps-showcase-kingdom:after { inset:45% 0 0; } }
@media (max-width:460px) { .ps-showcase-shell { padding:18px; }.ps-showcase-join-link { font-size:12px; }.ps-showcase-stats { grid-template-columns:1fr; }.ps-showcase-hero h1 { font-size:49px; }.ps-showcase-kingdom { margin-top:28px; padding:26px; } }