.friendly-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;padding:18px 0}.friendly-layout h3{color:#8cf2b5;font-size:20px;margin:0 0 14px}.friendly-opponent{display:flex;align-items:center;gap:14px;width:100%;margin-bottom:7px;padding:11px;background:#123e31;border:1px solid #477e62;border-radius:4px;color:white;text-align:left}.friendly-opponent.selected{background:#278859;border-color:#a5ffd0;box-shadow:inset 4px 0 #b1ffd6}.friendly-opponent svg{width:45px;height:48px;flex-shrink:0}.friendly-opponent span:nth-child(2){flex:1}.friendly-opponent b{display:block;font-size:19px}.friendly-opponent small{display:block;color:#b6dbc7;font-size:12px;margin-top:3px}.friendly-ready{padding:24px;background:linear-gradient(150deg,#24664c,#102e25);border:1px solid #70ab85;text-align:center;align-self:start}.friendly-ready h2{background:none}.friendly-versus{display:flex;align-items:center;justify-content:center;gap:30px;margin:22px 0}.friendly-versus svg{width:90px;height:100px}.friendly-versus>b{font-size:42px;color:#81f3b5}.friendly-ready p{color:#c1dfcd}.friendly-ready>button{display:block;width:100%;margin-top:12px}.friendly-ready>small{display:block;color:#a9c8b5;font-size:12px;line-height:1.5;margin-top:20px}.friendly-condition{text-align:left;margin:25px 0;font-size:14px}.friendly-condition>b{float:right}.friendly-condition i{display:block;height:11px;background:#09291c;margin-top:8px;border-radius:3px;overflow:hidden}.friendly-condition em{display:block;height:100%;background:linear-gradient(90deg,#28b45e,#a3f7ae)}.friendly-history article{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;padding:18px;background:#163e30;margin-top:10px;border:1px solid #4b7d62}.friendly-history article>span{display:flex;align-items:center;gap:12px}.friendly-history article>span:last-child{justify-content:end}.friendly-history svg{width:45px;height:50px}.friendly-history strong{text-align:center;font-size:28px;color:#9cffbc}.friendly-history small{display:block;font-size:12px;color:#c2dacb}.friendly-online{text-align:center;max-width:600px;margin:50px auto;padding:30px;background:#194c37;border:1px solid #5c9874}.friendly-online h3{color:#a0ffd0}.friendly-online p{color:#c4dbce}@media(max-width:800px){.friendly-layout{grid-template-columns:1fr}.friendly-history article{grid-template-columns:1fr 70px 1fr}}
.friends-layout{display:grid;grid-template-columns:340px 1fr;gap:20px;padding:20px 0}.friend-add-panel,.friend-list-panel{background:#121b25;border:1px solid #35463e;border-radius:9px;padding:22px}.friends-layout h3{color:#79ebb0;margin:0 0 18px}.friend-search-types{display:flex;gap:6px}.friend-search-types button{background:#20312c;font-size:11px;color:white}.friend-search-types .active{background:#227c4d}.friend-add-panel label{display:block;font-size:12px;margin:18px 0 8px}.friend-add-panel input{width:100%;padding:12px;background:#0c141d;border:1px solid #40574b;color:white}.friend-add-panel>button{width:100%;margin:14px 0}.friend-add-panel>small,.friends-online-note{display:block;font-size:12px;line-height:1.6;color:#9db7aa}.friend-contact{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid #314337}.friend-contact>div:nth-child(2){flex:1;min-width:0}.friend-contact b,.friend-contact small,.friend-contact code{display:block}.friend-contact small{font-size:11px;color:#a2bcaf}.friend-contact code{font-size:10px;overflow-wrap:anywhere;color:#97d4b0}.friend-contact button{font-size:10px}.friend-initial{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#245d40}.friend-empty{padding:30px;text-align:center;color:#b0c7ba;border:1px dashed #476050;line-height:1.8}.friends-online-note{margin-top:22px}#friend-feedback{color:#ffa996;font-size:12px}@media(max-width:850px){.friends-layout{grid-template-columns:1fr}}