#friends { padding:20px 0 45px; min-width:0; }
.friends-heading { padding:16px 24px; border:1px solid #59674e; border-radius:22px; background:radial-gradient(ellipse at 90% 0,#c2ae4a22,transparent 65%),linear-gradient(130deg,#1e3026,#151e19); }
.friends-tabs { display:flex; gap:8px; margin:20px 0; border-bottom:1px solid #344b3c; padding-bottom:12px; }
.friends-tabs button { border:0; border-radius:9px; padding:12px 18px; background:transparent; color:#a6beb0; font:600 13px system-ui,sans-serif; cursor:pointer; }
.friends-tabs button[aria-pressed=true] { background:#cdebd9; color:#143224; }
.friends-inbox { display:grid; grid-template-columns:minmax(230px,300px) minmax(0,1fr); border:1px solid #344b3c; border-radius:16px; overflow:hidden; background:#132018; min-height:530px; }
.friends-conversations { min-width:0; border-right:1px solid #344b3c; background:#19281e; padding:18px 12px; }
.friends-conversations h2 { font-size:15px; margin:0 6px 15px; }
.friends-conversations .friends-search { padding:0 10px; margin:0 0 12px; }
.friends-conversation-list { max-height:510px; overflow:auto; scrollbar-width:thin; }
.friends-conversation { display:flex; width:100%; align-items:center; gap:10px; padding:12px 9px; border:1px solid transparent; border-radius:10px; background:transparent; color:#dce9e0; cursor:pointer; text-align:left; font:inherit; }
.friends-conversation:hover { background:#233a2b; }
.friends-conversation[aria-pressed=true] { background:#284633; border-color:#4e775c; }
.friends-conversation .friends-avatar { width:36px; height:36px; font-size:13px; }
.friends-conversation>span:not(.friends-avatar) { min-width:0; flex:1; }
.friends-conversation strong,.friends-conversation small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.friends-conversation strong { font-size:12px; }
.friends-conversation small { color:#9bb3a4; font-size:10px; margin-top:6px; }
.friends-conversation>time { display:none; }
.friends-unread-badge { display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:#f6d78d;color:#252415;font-size:11px;font-weight:700; }
.friends-tabs .friends-unread-badge { margin-left:6px; }
.friends-conversation>.friends-unread-badge { flex:0 0 auto!important; }
.friends-unread-badge.is-dot,#friends .friends-conversation .friends-unread-badge.is-dot { min-width:8px; width:8px; height:8px; padding:0; background:#ef5350; font-size:0; box-shadow:0 0 0 2px #132018; vertical-align:middle; }
.friends-conversation.has-unread { background:#26382c;border-color:#577a59; }.friends-conversation.has-unread strong { color:#ffe2a0; }
.friends-discussion { display:flex; flex-direction:column; min-width:0; padding:20px; }
.friends-discussion-header { display:flex; align-items:center; gap:12px; border-bottom:1px solid #344b3c; padding-bottom:16px; }
.friends-discussion-header>div { flex:1; min-width:0; }
.friends-discussion-header h2 { font-size:17px; margin:0 0 5px; overflow-wrap:anywhere; }
.friends-discussion-header small { color:#8ea997; font-size:10px; }
.friends-message-log { height:350px; overflow:auto; scrollbar-width:thin; display:flex; flex-direction:column; gap:12px; padding:20px 0; }
.friends-message-empty { margin:auto; text-align:center; padding:20px; color:#9eb7a8; font-size:13px; line-height:1.6; }
.friends-message-empty strong { color:#dce9df; }
.friends-compose { display:flex; gap:10px; align-items:flex-end; padding-top:16px; border-top:1px solid #344b3c; }
.friends-compose textarea { width:100%; min-width:0; box-sizing:border-box; border:1px solid #49614e; border-radius:11px; padding:12px; background:#102018; color:#e6efe9; font:13px/1.5 system-ui,sans-serif; resize:vertical; max-height:150px; }
.friends-compose-footer { display:flex; justify-content:space-between; gap:10px; font-size:10px; color:#8ba493; margin-top:9px; }
.friends-compose-footer small { font-size:inherit; }
.friends-message-status { color:#83d9af; font-size:11px; margin:10px 0 0; }
.friends-message-status:empty { display:none; }
@media(max-width:760px){.friends-inbox{grid-template-columns:1fr;}.friends-conversations{border-right:0;border-bottom:1px solid #344b3c;padding:14px;}.friends-conversation-list{display:flex;gap:6px;max-height:none;overflow-x:auto;}.friends-conversation{flex:0 0 175px;}.friends-discussion{padding:16px;}.friends-message-log{height:300px;}.friends-compose-footer small{max-width:70%;}.friends-discussion-header{gap:8px;}.friends-discussion-header .friends-avatar{width:38px;height:38px;font-size:14px;}.friends-discussion-header h2{font-size:15px;}.friends-discussion-header button{padding:9px;font-size:11px;}.friends-heading{padding:20px;}}
#friends [hidden] { display:none!important; }
.friends-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.friends-eyebrow { color:#94b5a3; font-size:10px; letter-spacing:1.5px; }
.friends-heading h1 { margin:0 0 5px; font-size:clamp(28px,2.7vw,38px); font-weight:500; }
.friends-referral { display:grid;gap:5px;min-width:250px;padding:14px 20px;border:1px solid #9b75ce;border-radius:14px;background:linear-gradient(125deg,#493365,#2f2348);color:#f1e6ff;text-align:left;cursor:pointer;font:inherit; }
.friends-referral span { font-size:12px; }.friends-referral strong { font-size:17px;color:#ead4ff; }.friends-referral small { font-size:10px;color:#c9b4e4; }
.friends-referral:hover { border-color:#d2a9ff;filter:brightness(1.1); }
.friends-find-section { display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 28px;padding:20px;border:1px solid #3e5948;border-radius:14px;background:#14241b; }
.friends-find-section h2 { margin:0 0 8px;font-size:15px;color:#dce9e0; }.friends-find-section p { margin:0;color:#9eb7a8;font-size:12px;line-height:1.6; }
.friends-find-section>.friends-button { flex-shrink:0; }
@media(max-width:760px){.friends-heading{flex-direction:column;align-items:stretch!important;}.friends-referral{min-width:0;}.friends-find-section{align-items:stretch;flex-direction:column;}}
.friends-heading p { margin:0; color:#a1b4a8; font-size:13px; line-height:1.6; }
.friends-header-actions,.friends-row-actions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.friends-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; min-height:40px; border:1px solid #34715a; border-radius:10px; background:#153026; color:#58dbab; font:600 12px/1.4 system-ui,sans-serif; cursor:pointer; }
.friends-button svg,.friends-search svg { width:18px; height:18px; flex-shrink:0; }
.friends-button:hover:not(:disabled) { filter:brightness(1.14); }
.friends-button:disabled { opacity:.5; cursor:default; }
.friends-button.is-primary { border-color:#44d29f; background:#44d29f; color:#08251a; }
.friends-button.is-decline { background:#3c2423; border-color:#69413c; color:#f29c96; }
.friends-button.is-accept { background:#163a26; border-color:#315f3d; color:#72dfa0; }
.friends-button.is-message { background:#13313a; border-color:#2d667a; color:#70d2ec; }
.friends-button.is-trade { background:#17382d; border-color:#316950; color:#56d6aa; }
.friends-demo-note { color:#8ba396; font-size:11px; line-height:1.5; margin:0 0 25px; }
.friends-feedback { color:#79dfae; font-size:12px; line-height:1.5; }
.friends-feedback:empty,.friends-dialog-feedback:empty { display:none; }
.friends-requests h2,.friends-list-section h2 { margin:0 0 15px; color:#a5b7ab; font-size:13px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; }
.friends-requests { margin-bottom:28px; }
.friends-requests h2 span,.friends-list-section h2 span { color:#83978a; }
.friends-row { display:flex; align-items:center; gap:10px; border:1px solid #344b3c; border-radius:14px; padding:10px; background:#1a2920; }
.friends-row.is-request { background:#11251b; border-color:#34664a; }
.friends-row>strong { min-width:0; overflow-wrap:anywhere; font-size:15px; font-weight:600; }
.friends-row-actions { margin-left:auto; flex-shrink:0; }
.friends-avatar { width:46px; height:46px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:#24523e; color:#72e0b0; font-size:17px; font-weight:700; }
.friends-list { display:grid; gap:12px; }
.friends-search { display:flex; align-items:center; gap:11px; padding:0 16px; border:1px solid #405146; border-radius:10px; background:#1a2820; margin-bottom:15px; color:#809e8c; }
.friends-search input { width:100%; min-width:0; padding:14px 0; border:0; background:transparent; color:#e0ece4; font:inherit; font-size:13px; outline-offset:4px; }
.friends-search input::placeholder { color:#87998d; }
.friends-empty,.friends-empty-request { padding:19px; border:1px dashed #49604e; border-radius:12px; color:#a5b7ac; font-size:13px; }
.friends-empty p { font-size:12px; margin-bottom:0; }
.friends-dialog { width:min(640px,calc(100vw - 28px)); max-height:calc(100dvh - 30px); overflow:auto; box-sizing:border-box; padding:27px; border:1px solid #6b856a; border-radius:20px; color:#e0ece2; background:linear-gradient(135deg,#1c3022,#122018); box-shadow:0 25px 90px #0008; }
.friends-dialog::backdrop { background:#040b07bd; backdrop-filter:blur(5px); }
.friends-dialog .friends-close { position:absolute; top:9px; right:10px; padding:5px 9px; border:0; background:transparent; color:#d9e9df; font-size:25px; }
.friends-dialog h2 { margin:10px 20px 9px 0; font-size:25px; font-weight:600; line-height:1.3; color:#f5dda1; }
.friends-dialog p { font-size:13px; line-height:1.7; color:#acc2b3; }
.friends-dialog input,.friends-dialog select,.friends-dialog textarea { width:100%; box-sizing:border-box; min-width:0; padding:11px 12px; border:1px solid #536c58; border-radius:9px; background:#102017; color:#e3ece5; font:inherit; font-size:13px; }
.friends-dialog textarea { resize:vertical; line-height:1.6; }
.friends-dialog-primary { width:100%; margin-top:15px; }
.friends-dialog-note { display:block; margin-top:17px; color:#94aa9b; font-size:11px; line-height:1.6; }
.friends-dialog-feedback { color:#7fdfb1!important; font-size:12px!important; margin-bottom:0; }
.friends-player-results { display:grid; gap:10px; margin-top:18px; }
.friends-player-results:empty { display:none; }
.friends-player-row { display:flex; align-items:center; gap:12px; padding:12px; background:#21392a; border:1px solid #3c5945; border-radius:11px; }
.friends-player-row>strong { font-size:13px; overflow-wrap:anywhere; min-width:0; }
.friends-player-row>button { margin-left:auto; }
.server-friends-dialog .friends-player-row { gap:6px;padding:7px; }
.server-friends-dialog .friends-player-row>div { display:flex;flex-wrap:wrap;gap:4px;margin-left:auto; }
.server-friends-dialog .friends-player-row>div button { margin:0;padding:6px 8px;min-height:32px;font-size:11px; }
.friends-dialog-person { display:flex; gap:13px; align-items:center; margin-bottom:18px; }
.friends-dialog-person h2 { margin:0 25px 5px 0; font-size:21px; overflow-wrap:anywhere; }
.friends-dialog-person small { font-size:11px; color:#9db5a6; }
.friends-chat { max-height:300px; min-height:140px; overflow:auto; display:flex; flex-direction:column; gap:11px; padding:14px; border:1px solid #3c5542; border-radius:12px; background:#102017; }
.friends-chat-bubble { align-self:flex-start; max-width:85%; padding:12px; border-radius:12px 12px 12px 3px; background:#293d30; color:#dceadf; font-size:13px; line-height:1.6; overflow-wrap:anywhere; white-space:pre-wrap; }
.friends-chat-bubble.is-mine { align-self:flex-end; background:#255a40; border-radius:12px 12px 3px 12px; }
.friends-chat-bubble small { display:block; margin-top:7px; color:#9dbaaa; font-size:10px; }
#friends-message-form { display:flex; align-items:flex-end; gap:10px; margin-top:15px; }
.friends-trade-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:20px 0 5px; }
.friends-trade-grid label { display:flex; flex-direction:column; gap:10px; padding:13px; border:1px solid #4b6550; border-radius:12px; color:#c9dfd0; font-size:12px; min-width:0; }
.friends-trade-preview { display:block; width:min(145px,100%); margin:7px auto; pointer-events:none; }
.friends-trade-preview .card-shell { width:100%; margin:0; }
.friends-proposal-success { text-align:center; }
.friends-proposal-success>span { display:grid; place-items:center; width:50px; height:50px; border-radius:50%; margin:0 auto 16px; background:#28583f; color:#75e6b1; }
.friends-proposal-success>span svg { width:28px; height:28px; }
#friends :is(a,button,input):focus-visible,.friends-dialog :is(button,input,textarea,select):focus-visible { outline:2px solid #e9ce8b; outline-offset:3px; }
@media(max-width:650px){.friends-heading{align-items:flex-start;flex-direction:column;gap:16px;}.friends-header-actions{width:100%;}.friends-header-actions button{flex:1;padding:10px;}.friends-row{flex-wrap:wrap;gap:11px;padding:13px;}.friends-row-actions{flex-basis:calc(100% - 57px);margin-left:57px;flex-wrap:nowrap;min-width:0;}.friends-row-actions button{flex:1;min-width:0;padding:8px 10px;}.friends-dialog{padding:23px 17px;}.friends-trade-grid{gap:9px;}.friends-trade-grid label{padding:9px;}.friends-player-row{gap:8px;}.friends-player-row .friends-avatar{width:36px;height:36px;font-size:14px;}.friends-player-row button{padding:8px;}.friends-header-actions svg{width:15px;height:15px;}}
@media(max-width:980px){.account-nav:has(a[href="#friends"]){flex-wrap:wrap;}}
.friends-identity{display:grid;gap:6px;min-width:0;}
.friends-identity strong{font-size:15px;font-weight:600;overflow-wrap:anywhere;}
.friends-identity small{font-size:10px;color:#91aa9a;}
#friends .friends-remove{font:inherit;font-size:10px;padding:10px 6px;min-height:36px;border:0;background:transparent;color:#a1afa4;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
#friends .friends-remove:hover{color:#edb3a4;}
@media(max-width:650px){#friends .friends-row-actions{flex-wrap:wrap;}#friends .friends-row-actions .friends-remove{flex:0 0 auto;}}
.friends-message-report { border:0; padding:2px; background:transparent; color:#9eb7a8; font:inherit; text-decoration:underline; cursor:pointer; }
html body :is(#friends,.friends-dialog) :is(.friends-remove,.friends-message-report){border:0;box-shadow:none;background:transparent;color:#9ca6a1;border-radius:0;text-decoration:none;font:inherit;font-size:11px;min-height:32px;padding:6px;cursor:pointer}
html body :is(#friends,.friends-dialog) :is(.friends-remove,.friends-message-report):hover{background:transparent;color:#c7cfca;text-decoration:underline;text-underline-offset:3px}
html body :is(#friends,.friends-dialog) :is(.friends-remove,.friends-message-report):focus-visible{outline:2px solid #b5c8bb;outline-offset:2px}
.friends-dialog .friends-referral-remaining { display:inline-block; margin:5px 0; padding:8px 12px; border:1px solid #9c925e; border-radius:10px; background:#ffe2a014; color:#ffe2a0; font-size:18px; font-weight:600; }
.friends-dialog .friends-referral-quota-note { margin:3px 0 12px; color:#b6c9bd; font-size:12px; line-height:1.5; }