#modal-friend{background:rgba(7,7,10,.68);backdrop-filter:blur(7px)}
#modal-friend .friend-modal-sheet{width:100%;max-height:min(84dvh,760px);overflow-y:auto;padding:14px 22px max(20px,env(safe-area-inset-bottom));border:1px solid #e5e2eb;border-bottom:0;border-radius:30px 30px 0 0;background:#fff;color:#111015;box-shadow:0 -18px 60px #09061124}
#modal-friend .sheet-handle{width:46px;height:5px;margin-bottom:18px;background:#dcd9e2}
#modal-friend .sheet-title{margin-bottom:18px;color:#111015;font-family:'Bebas Neue',Impact,sans-serif;font-size:2rem;font-weight:900;letter-spacing:.01em}
.friend-code-card{margin-bottom:20px;padding:17px 18px 15px;border:1px solid #7138f6;border-radius:20px;background:#15121b;color:#fff}
.friend-section-kicker{display:block;margin-bottom:9px;color:#777381;font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.friend-code-card .friend-section-kicker{color:#b7ff36}
.friend-code-row{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:12px}
.friend-code-value{flex:1;min-width:0;color:#fff;font-family:Inter,Arial,sans-serif;font-size:clamp(1.65rem,7vw,2.1rem);font-weight:900;letter-spacing:.14em;line-height:1.1;overflow-wrap:anywhere}
.friend-copy-button{min-height:44px;padding:0 16px;border:0;border-radius:12px;background:#7138f6;color:#fff;font-size:.88rem;font-weight:850}
.friend-code-hint{margin-top:8px;color:#c7c3ce;font-size:.82rem;line-height:1.4}
.friend-code-row .friend-copy-button{flex:0 0 auto;padding:0 12px}
.friend-qr-box{display:flex;justify-content:center;margin-top:13px;padding:14px;border-radius:16px;background:#fff}
.friend-qr-box canvas{display:block}
.friend-scan-button{margin-bottom:16px;background:#111015}
.friend-add-form{margin-bottom:19px}
.friend-add-row{display:flex;align-items:stretch;gap:9px}
.friend-code-input{min-width:0;flex:1;border:1.5px solid #e3e0e9!important;border-radius:13px!important;background:#fff!important;color:#111015!important;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.friend-code-input::placeholder{color:#9894a1!important}
.friend-add-button{width:auto;min-width:104px;min-height:52px;padding:0 18px;border-radius:13px;background:#b7ff36;color:#111015;font-size:.96rem;font-weight:950}
#modal-friend .friend-add-row .friend-code-input{width:auto;flex:1 1 0%;}
#modal-friend .friend-add-row .friend-add-button{width:auto;flex:0 0 auto;background:#b7ff36;color:#111015;box-shadow:none}
#modal-friend .friend-add-row .friend-add-button:hover{background:#a8ef2a}
.friend-add-error{min-height:18px;margin-top:4px;color:#e23858;font-size:.76rem}
.friend-list-section{margin-top:4px}
.friend-count{display:inline-grid;min-width:23px;height:23px;margin-left:4px;padding:0 6px;place-items:center;border-radius:99px;background:#f0eaff;color:#7138f6;font-size:.7rem;letter-spacing:0}
.friend-list{display:flex;max-height:220px;flex-direction:column;gap:8px;overflow-y:auto}
.friend-empty{padding:18px 12px;border:1px dashed #dedbe5;border-radius:15px;color:#777381;font-size:.9rem;text-align:center}
.friend-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid #e9e6ee;border-radius:15px;background:#fff}
.friend-avatar{display:grid;width:42px;height:42px;flex:0 0 auto;place-items:center;border-radius:13px;background:#17141d;color:#b7ff36;font-size:1rem;font-weight:900}
.friend-row-copy{flex:1;min-width:0}
.friend-row-name{overflow:hidden;color:#17141d;font-size:.92rem;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
.friend-row-code{margin-top:2px;color:#777381;font-family:Inter,Arial,sans-serif;font-size:.7rem;letter-spacing:.07em}
.friend-remove-button{width:36px;height:36px;border:1px solid #f2d9df;border-radius:11px;background:#fff5f7;color:#d42e52;font-size:.9rem;font-weight:800}
.friend-close-button{margin-top:14px;border:0!important;border-radius:13px!important;background:#111015!important;color:#fff!important;font-weight:850!important}
@media(min-width:640px){
  #modal-friend{align-items:center;justify-content:center;padding:20px}
  #modal-friend .friend-modal-sheet{width:min(520px,100%);max-height:86dvh;border:1px solid #e5e2eb;border-radius:28px;padding:20px 24px 24px;box-shadow:0 24px 80px #09061135}
}

.friend-scan-overlay{position:fixed;inset:0;z-index:600;display:flex;flex-direction:column;background:#000}
.friend-scan-header{display:flex;align-items:center;justify-content:space-between;padding:max(16px,env(safe-area-inset-top)) 18px 14px;color:#fff;font-size:.92rem;font-weight:850}
.friend-scan-close{display:grid;width:36px;height:36px;place-items:center;border:0;border-radius:11px;background:#1c1a21;color:#fff;font-size:1.2rem;line-height:1}
.friend-scan-video{flex:1;width:100%;min-height:0;object-fit:cover;background:#000}
.friend-scan-flash{position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom));padding:10px 18px;border-radius:13px;background:#fff;color:#111015;font-size:.86rem;font-weight:850;opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity .2s,transform .2s}
.friend-scan-flash.show{opacity:1;transform:translate(-50%,0)}