/* V64.33: Friends currently maps to the existing profile, not a contact list. */
.friends-screen { --friends-muted:#adc5e4; --friends-line:#21446f; --friends-surface:linear-gradient(140deg,#0c1d38,#040c1c); padding-top:18px; }
.friends-screen :is(h1,h2,strong,b,small,p,span,button) { font-family:var(--spark-font-ui); }
.friends-screen .eyebrow { color:#84caff; font-size:11px; letter-spacing:.14em; }
.friends-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.friends-heading h1 { font-size:30px; line-height:1.1; margin:0; letter-spacing:-.015em; }
.friends-emblem { display:grid; place-items:center; width:56px; height:56px; flex-shrink:0; border:1px solid #00caff66; border-radius:18px; background:radial-gradient(circle,#0066ff55,#07112a); }
.friends-emblem svg { width:34px; height:34px; fill:#00dfff; filter:drop-shadow(0 0 6px #00bfff88); }
.friends-screen .friends-invite { display:grid; grid-template-columns:84px minmax(0,1fr); gap:14px; padding:17px; border-radius:20px; border-color:#277db6; background:radial-gradient(ellipse at 0 0,#07508277,transparent 75%),var(--friends-surface); }
.friends-count { align-self:center; padding-right:12px; border-right:1px solid #28618a; text-align:center; min-width:0; }
.friends-count strong { display:block; color:#00e5ff; font-size:38px; line-height:42px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.friends-count span { display:block; font-size:12px; line-height:16px; color:var(--friends-muted); }
.friends-invite-copy h2 { margin:0 0 6px; font-size:21px; line-height:24px; }
.friends-invite-copy p { margin:0; font-size:14px; line-height:19px; color:var(--friends-muted); }
.friends-home { grid-column:1/-1; min-height:48px; border:1px solid #b679ff; border-radius:13px; background:var(--spark-primary-fill); color:white; font-size:16px; font-weight:700; box-shadow:inset 0 1px #e4b4ff55,0 0 14px #712eff26; cursor:pointer; }
.friends-home span { margin-left:8px; }
.friends-note { grid-column:1/-1; text-align:center; color:#8ea8cc; font-size:12px; line-height:16px; }
.friends-screen .profile-head { padding:18px 14px; margin:16px 0 12px; border:1px solid var(--friends-line); border-radius:19px; }
.friends-screen .profile-head:not(.frame-crown,.frame-refraction,.frame-event-horizon,.frame-overdrive-crown) { background:var(--friends-surface); }
.friends-screen .profile-head[class*="frame-"] { padding-top:27px; }
.friends-screen .profile-head:is(.frame-crown,.frame-refraction,.frame-event-horizon,.frame-overdrive-crown) { border-color:transparent; }
.friends-screen .profile-rank { gap:12px; }
.friends-screen .profile-rank > div { min-width:0; }
.friends-screen .profile-rank > span { width:52px; height:58px; font-size:30px; border-radius:15px; }
.friends-screen .profile-rank h1 { font-size:25px; line-height:29px; letter-spacing:0; overflow-wrap:anywhere; }
.friends-screen .profile-rank p { color:var(--friends-muted); font-size:13px; line-height:18px; }
.friends-screen .xp-progress-head { gap:8px; flex-wrap:wrap; font-size:12px; color:var(--friends-muted); }
.friends-screen .xp-progress .danger-track { height:8px; border-radius:99px; overflow:hidden; background:#13233d; }
.friends-screen .xp-progress .danger-fill { height:100%; background:linear-gradient(90deg,#0066ff,#00e5ff); box-shadow:0 0 10px #00bfff55; }
.friends-screen .xp-progress .danger-fill::after { display:none; }
.friends-screen .profile-grid { gap:10px; }
.friends-screen .profile-grid .panel { margin:0; padding:14px; border-radius:16px; background:var(--friends-surface); border-color:var(--friends-line); min-width:0; }
.friends-screen .profile-grid .panel:last-child { grid-column:1/-1; }
.friends-screen .profile-grid span { font-size:13px; line-height:17px; color:var(--friends-muted); }
.friends-screen .profile-grid strong { font-size:28px; line-height:32px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.friends-screen .profile-currency strong { color:#00e5ff; }
.friends-screen .profile-streak strong { color:#ffd044; }
.friends-screen :is(.chain-echo-button,.cosmetic-vault-button,.spark-market-button,.achievement-button,.legal-hub-trigger) { min-height:82px; grid-template-columns:36px minmax(0,1fr) auto; gap:10px; padding:13px; border-radius:17px; background:var(--friends-surface); border-color:var(--friends-line); }
.friends-screen :is(.chain-echo-icon,.cosmetic-vault-icon,.spark-market-icon,.achievement-button-icon,.legal-hub-icon) { width:36px; height:40px; font-size:22px; border-radius:12px; }
.friends-screen :is(.chain-echo-button,.cosmetic-vault-button,.spark-market-button,.achievement-button,.legal-hub-trigger) b { font-size:15px; line-height:19px; letter-spacing:.015em; }
.friends-screen :is(.chain-echo-button,.cosmetic-vault-button,.spark-market-button,.achievement-button,.legal-hub-trigger) small { font-size:12px; line-height:16px; color:var(--friends-muted); }
.friends-screen :is(.chain-echo-button,.cosmetic-vault-button,.spark-market-button,.achievement-button,.legal-hub-trigger) > strong { font-size:11px; max-width:74px; white-space:normal; overflow-wrap:anywhere; letter-spacing:0; }
.friends-screen .chain-echo-button.is-active { border-color:#00d7ed80; background:linear-gradient(130deg,#062e40,#0b1634); }
.friends-screen .chain-echo-button.is-muted { filter:none; background:#0b1527; }
.friends-screen .achievement-button.has-reward { border-color:#00e67688; }
.friends-screen .spark-market-button { border-color:#ae874c77; }
.friends-screen .cosmetic-vault-button { border-color:#9257d380; }
.friends-screen :is(.ranking-button,.tutorial-replay-button,.owner-button) { min-height:54px; border-color:var(--friends-line); background:#061226; border-radius:15px; }
.friends-screen :is(.ranking-button,.tutorial-replay-button,.owner-button) :is(span,b) { font-size:14px; letter-spacing:0; }
.friends-screen :is(.ranking-button,.tutorial-replay-button,.owner-button) small { font-size:12px; line-height:16px; color:var(--friends-muted); }
.friends-screen .legal-hub-panel button { min-height:58px; }
.friends-screen .legal-hub-panel b { font-size:14px; }
.friends-screen .legal-hub-panel small { font-size:12px; line-height:16px; color:var(--friends-muted); }
.friends-screen button:focus-visible { outline:2px solid #00e5ff; outline-offset:3px; }
body:has(.friends-screen) .app-shell { padding-bottom:calc(80px + env(safe-area-inset-bottom,0px)); }
body:has(.friends-screen) .bottom-nav { left:50%; right:auto; width:min(100%,420px); transform:translateX(-50%); min-height:64px; padding:8px 14px calc(9px + env(safe-area-inset-bottom,0px)); border-radius:0; background:#020a16f5; }
body:has(.friends-screen) .bottom-nav button { display:grid; grid-template-rows:25px 16px; align-content:center; justify-items:center; min-height:44px; font-size:12px; line-height:16px; color:#7f9ac9; }
body:has(.friends-screen) .bottom-nav button > span { display:grid; place-items:center; width:25px; height:25px; }
body:has(.friends-screen) .bottom-nav .nav-icon { width:23px; height:23px; fill:currentColor; }
body:has(.friends-screen) .bottom-nav button.active { color:#bb6bff; }
@media(max-width:350px) {
  .friends-heading h1 { font-size:27px; }
  .friends-screen .friends-invite { grid-template-columns:70px minmax(0,1fr); gap:12px; padding:14px; }
  .friends-screen :is(.chain-echo-button,.cosmetic-vault-button,.spark-market-button,.achievement-button,.legal-hub-trigger) { grid-template-columns:30px minmax(0,1fr) 57px; gap:8px; padding:11px; }
  .friends-screen :is(.chain-echo-icon,.cosmetic-vault-icon,.spark-market-icon,.achievement-button-icon,.legal-hub-icon) { width:30px; }
}