.friends-trigger{position:relative}.friends-trigger svg{width:24px;height:24px}.friends-trigger i{position:absolute;top:-7px;right:-7px;border-radius:20px;min-width:21px;min-height:21px;background:#d36d50;color:#fff;font:500 12px/21px Fredoka,sans-serif;font-style:normal}.friends-trigger i[hidden]{display:none}.online-page .page-top{grid-template-columns:48px 1fr 48px}.friends-backdrop{position:fixed;inset:0;z-index:65;background:#25283070;backdrop-filter:blur(5px);display:grid;place-items:center;padding:18px}.friends-panel{width:100%;max-width:460px;max-height:calc(100dvh - 36px);overflow:auto;border:2px solid var(--ink);border-radius:27px;background:var(--paper);box-shadow:0 8px 0 #25283033;padding:18px 20px 24px;animation:modal-in .2s ease-out}.friends-panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:25px}.friends-panel>header h2{font-size:24px}.friends-panel>header .btn{flex-shrink:0;width:43px;height:41px;min-height:0;padding:0}.my-friend-code{display:flex;flex-direction:column;align-items:center;gap:10px;border-radius:20px;background:#fff3d7;padding:19px}.my-friend-code>small{color:#6d7666}.my-friend-code>strong{font:500 27px Fredoka,sans-serif;letter-spacing:2px;color:var(--teal)}.my-friend-code>div{display:flex;gap:16px}.my-friend-code .btn{width:44px;height:40px;min-height:0;padding:0}.add-friend{width:100%;margin:21px 0 10px;font-size:18px;min-height:48px}.friends-panel>h3{font-size:17px;margin:23px 0 9px}.friends-panel>h3>small{color:#858a77;margin-inline-start:5px}.friend-row{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #d6d3bc}.friend-photo{width:44px;height:44px;border:2px solid var(--ink);border-radius:15px;flex-shrink:0;background:#f5dab7;display:grid;place-items:center;overflow:hidden}.friend-photo img{width:100%;height:100%;object-fit:cover}.friend-photo>b{font-size:23px}.friend-row>div:first-of-type{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.friend-row strong{font-size:15px;overflow-wrap:anywhere}.friend-row small{font-size:12px;color:#838977}.friend-row .friend-online{color:var(--teal)}.friend-row-actions{display:flex;gap:7px;align-items:center}.friend-row-actions .btn{width:35px;height:35px;min-height:0;padding:0;border-radius:11px}.friend-row-actions .text-button{font-size:12px;width:auto;padding-inline:4px}.friend-row-actions .text-button svg{width:14px;height:14px}.friends-empty{color:#7d8371;text-align:center;line-height:1.6;font-size:15px;padding:30px 10px}.friends-panel form{display:grid;gap:15px}.friends-panel form label{font-size:16px;font-weight:700}.friends-panel form input{text-align:center;letter-spacing:3px;font-family:Fredoka,sans-serif}.friend-preview{text-align:center;margin-top:25px;display:flex;flex-direction:column;align-items:center;gap:14px}.friend-preview>.friend-photo{width:78px;height:78px;border-radius:25px}.friend-preview>h3{margin:4px 0;font-size:22px}.friend-preview>p{color:#77806c;font-size:14px}.friend-preview>.btn{width:100%;font-size:18px}.friend-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin:5px 0 10px}.friend-info-grid>div{border:1px solid #c1c7ad;border-radius:16px;background:#fdf8e6;min-height:85px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px}.friend-info-grid strong{font:500 24px Fredoka,sans-serif;display:flex;align-items:center;gap:6px}.friend-info-grid small{color:#727b68;font-size:12px}.friend-play-modes{display:grid;gap:20px}.friend-play-modes>small{text-align:center;color:#7d8371;margin-top:-12px}.friend-preview>.two-buttons{width:100%;margin-top:15px}.friend-preview>.two-buttons .btn{font-size:18px}
.my-friend-code{border:2px solid var(--ink);box-shadow:0 4px 0 #d7c7a5}.friend-info-grid small svg,.friend-preview p svg,.friend-row small svg,.friend-play-modes small svg{width:18px;height:18px;vertical-align:middle;color:#b9872e}
.friend-info-grid small svg{width:25px;height:25px}

.party-online-friends{margin:22px 0 0}.party-online-friends>h3{font-size:17px;margin:0 0 10px}.party-online-friends [data-party-friends]{max-height:180px;overflow:auto;padding:0 2px}.party-online-friends .friend-row{padding:9px 0}.party-online-friends .friend-row-actions .btn,.friends-panel [data-friends="party-invite"]{width:auto;min-width:62px;padding:7px 10px;font-size:14px}.party-friends-empty{font-size:14px;color:#817966;padding:15px 0;line-height:1.5}.friend-slot>button{width:94px;height:94px;border:2px dashed #b4b49d;border-radius:28px;display:grid;place-items:center;font:500 35px/1 Fredoka,sans-serif;color:#8c927e;background:none;padding:0}.friend-slot>button:hover{border-color:var(--teal);color:var(--teal)}@media(max-height:700px){.friend-slot>button{width:75px;height:75px;border-radius:23px}.party-online-friends{margin-top:15px}.party-online-friends [data-party-friends]{max-height:100px}.party-invite{margin-top:15px}}

.my-friend-code .change-code{width:auto;height:auto;font-size:14px;min-height:32px;padding:4px 12px}.friend-code-error{color:#b04a50;font-size:15px}.friend-code-error:empty{display:none}#change-friend-code>p{font-size:15px;line-height:1.5}

.friend-row>.friend-avatar-button{padding:0;background:none;border:0;box-shadow:none;min-height:0;flex-shrink:0}.friend-name-button{border:0;background:none;text-align:start;padding:0;font-size:15px;font-weight:800;overflow-wrap:anywhere}.friend-name-button:hover{color:var(--teal)}

.friend-info-grid>div{min-height:130px;gap:7px;padding:10px}.friend-info-grid>div>svg{width:58px;height:58px;flex:none}