/* Styles for the social & account screens (settings, friends, messages, chat, notifications, player, gifts, referral,
   delete account, avatar, private lobby) and the gift sheet. Base components come from style.css/app.css/layout.css
   (.pn .hero .sech .tabs .li .btn .ib .chip .pf-*); this file adds:
   .so-sec   a block under a .sech header         .so-grp  a list card (.pn.list) of tall rows with an icon tile .lic
   .so-empty empty state (glowing art disc + text + action)        .so-sk  loading skeleton rows (shimmer)
   Everything else is scoped to the screen (.<name>-scr) or the sheet (.gift-sheet). */

/* ── shared pieces ── */
.so-sec{display:flex;flex-direction:column;gap:10px}
.so-sec[hidden]{display:none}
.so-grp{padding:2px 14px}
.so-grp>.li{min-height:58px;gap:12px}
.so-grp>.li:active,.so-grp>a.li:hover{background:linear-gradient(90deg,rgba(242,193,78,0),rgba(242,193,78,.05),rgba(242,193,78,0))}
.so-grp .g.col{gap:2px;line-height:1.35}
.lic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--gd);
  background:radial-gradient(120% 90% at 50% 0%,#33333B,#16161A 70%);border:1px solid #2E2E36;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 5px rgba(0,0,0,.4)}
.list .li .lic svg,.list .li .lic svg:first-child{color:inherit}
.lic.rd{color:var(--rd);background:radial-gradient(120% 90% at 50% 0%,rgba(255,77,94,.28),rgba(60,10,16,.9) 70%);border-color:rgba(255,77,94,.35)}
.lic.ok{color:var(--ok)}
.so-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 16px 22px}
.so-empty .es-ic{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gd);position:relative;
  background:radial-gradient(circle at 50% 28%,rgba(242,193,78,.26),rgba(242,193,78,.05) 62%,rgba(242,193,78,0) 72%),linear-gradient(180deg,#202026,#0E0E11);
  border:1px solid var(--hairS);box-shadow:0 0 0 6px rgba(242,193,78,.04),0 0 28px rgba(242,193,78,.16),inset 0 1px 0 rgba(255,236,170,.18)}
.so-empty .es-ic .art{filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.so-empty b{font-size:15px}
.so-empty p{color:var(--mu);font-size:13px;line-height:1.65;max-width:280px}
.so-empty .btn{margin-top:4px}
.so-sk{padding:2px 14px}
.so-skr{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #1E1E22}
.so-skr:last-child{border-bottom:0}
.so-skr i{display:block;border-radius:7px;background:linear-gradient(90deg,#17171A 0%,#26262C 50%,#17171A 100%) 0 0/200% 100%;animation:soSk 1.3s linear infinite}
.so-skr .a{width:42px;height:42px;border-radius:50%;flex:none}
.so-skr span{flex:1;display:flex;flex-direction:column;gap:8px}
.so-skr .l1{height:11px;width:58%}.so-skr .l2{height:9px;width:34%}
.so-skr .e{width:64px;height:30px;border-radius:10px;flex:none}
@keyframes soSk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.so-skr i{animation:none}}
#app.nomo .so-skr i{animation:none}
.lvn.rd{background:var(--rd);color:#fff;margin-inline-start:6px;min-width:20px;height:18px;border-radius:9px;font-size:10.5px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 6px rgba(224,34,56,.45)}
.tabs .lvn.rd{min-width:22px;height:20px;font-size:11px}
.tabs .on .lvn.rd{border:1.5px solid rgba(255,255,255,.85)}
.scr .li.unr b{color:#fff}
.scr .li a.row,.fr-who{min-width:0;color:inherit}
.av-on{position:relative;display:inline-flex;flex:none}
.av-on::after{content:"";position:absolute;bottom:1px;inset-inline-end:1px;width:12px;height:12px;border-radius:50%;background:var(--ok);border:2px solid #121215;box-shadow:0 0 6px rgba(61,220,151,.7)}
.av-on.pl::after{background:var(--gd);box-shadow:0 0 6px rgba(242,193,78,.7)}

/* ── settings ── */
.settings-scr{gap:16px}
.st-acc{gap:14px;padding:14px}
.st-acc .lvn{min-width:24px}
.st-name{font-size:17px;line-height:1.3;max-width:100%}
.st-uid{gap:6px;flex-wrap:wrap}
.st-uid b{font-size:13px;color:#EDEDF2}
.st-copy{height:24px;padding:0 8px;border-radius:8px;font-size:11px;gap:4px}
.st-copy svg{color:var(--gd)}
.st-acc .ib{color:var(--gd)}
.settings-scr .lk-wrap>h3{display:none}
.settings-scr .lk-list{padding:2px 14px!important}
.settings-scr .lk-list .li{min-height:58px;gap:12px}
.settings-scr .lk-list .li>svg:first-child,.settings-scr .lk-list .lk-apl{width:36px;height:36px;padding:8px;border-radius:11px;flex:none;
  background:radial-gradient(120% 90% at 50% 0%,#33333B,#16161A 70%);border:1px solid #2E2E36;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.settings-scr .lk-list .li>svg:first-child{color:var(--gd)}
.settings-scr [data-legal-box]>section{padding:2px 14px!important}
.settings-scr [data-legal-box] .li{min-height:54px;gap:12px}
.settings-scr [data-legal-box] .li>svg:first-child{color:var(--gd)!important}
.st-seg{padding:3px;gap:3px;flex:none}
.st-seg>*{height:36px;padding:0 10px;font-size:12px;flex:none}
.st-orient{gap:12px;padding:12px 0 14px}
.st-orient .row{gap:12px}
.st-orient .opts{gap:8px}
.st-orient .opt{padding:12px 4px;background:var(--surf);box-shadow:var(--hl)}
.st-ver{padding:2px 0 8px;letter-spacing:.02em}

/* ── friends (p14) ── */
.fr-search{height:48px}.fr-search svg{color:var(--gd)}
.fr-search .bare{text-align:start;font-weight:500}
.fr-search .bare::-webkit-search-cancel-button{filter:invert(1)}
.fr-list,.ms-list,.nt-list,.rf-list,.gf-list{padding:2px 14px}
.fr-list .li{gap:10px;min-height:66px}.fr-list .ib{width:38px;height:38px;border-radius:12px;color:var(--gd)}
.fr-list .btn.sbt{padding:0 12px}
.fr-list .fr-who b{display:block;font-size:14px;line-height:1.35}
.fr-out{margin-top:auto;gap:12px;padding:12px 14px}
.fr-out .art{flex:none}

/* ── messages (p15) ── */
.messages-scr h1{font-size:24px}
.ms-head .ib{color:var(--gd)}
.ms-list .li{min-height:68px;gap:12px}
.ms-list .li .row.sp{gap:8px}
.ms-list .li .lvn.rd{margin:0}
.ms-list .li.unr{background:linear-gradient(90deg,rgba(242,193,78,0),rgba(242,193,78,.06) 50%,rgba(242,193,78,0))}
.ms-list .li.unr .sm{color:#E6E6EC}
.ms-sys{background:radial-gradient(circle at 50% 30%,rgba(242,193,78,.3),rgba(242,193,78,.08) 70%)!important;border-color:var(--gd)!important;color:var(--gd)}
.ms-note{margin-top:auto;padding-top:10px}
.ms-inv{gap:10px;padding:12px 14px;border-color:var(--hairS);box-shadow:var(--glow),var(--sh1)}
.ms-inv .g{min-width:0}
.messages-scr [data-list]{gap:12px}

/* ── chat (p16) ── */
.scr-chat{height:100%;min-height:0;overflow:hidden}
.ch-head{flex:none;gap:10px}
.ch-head a.row{gap:10px}
.ch-head .ib{color:var(--gd)}
.ch-msgs{flex:1;min-height:0;overflow-y:auto;padding:12px var(--gut);gap:8px;scrollbar-width:thin}
.ch-day,.ch-more{align-self:center;margin:4px 0;background:rgba(10,10,12,.8);border-color:var(--hair);color:var(--mu);font-size:11px}
.ch-more{color:var(--gd)}
.ch-empty{margin:auto}
.scr-chat .bub{max-width:78%;padding:8px 12px 6px;border-radius:18px;font-size:14px;line-height:1.55;display:flex;flex-direction:column;gap:2px;word-break:break-word;white-space:pre-wrap;box-shadow:var(--sh1)}
.scr-chat .bub.in{background:linear-gradient(180deg,#2A2A30,#1E1E23);border:1px solid #33333B;align-self:flex-start;border-end-start-radius:5px}
.scr-chat .bub.out{background:var(--gold);color:#241800;align-self:flex-end;border-end-end-radius:5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 10px rgba(242,193,78,.18)}
.scr-chat .bub .tm{font-style:normal;font-size:10px;opacity:.6;align-self:flex-end}
.ch-foot{flex:none;padding:8px var(--gut) calc(10px + var(--sab));gap:8px;border-top:1px solid rgba(242,193,78,.16);background:linear-gradient(180deg,rgba(24,24,28,.95),rgba(8,8,10,.98));box-shadow:0 -8px 20px rgba(0,0,0,.4)}
.ch-quick{gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.ch-quick::-webkit-scrollbar{display:none}
.ch-quick .chip{height:32px;padding:0 12px;font-size:12.5px;flex:none;border-color:var(--hair);background:var(--dark)}
.ch-emoji{gap:4px;flex-wrap:wrap;justify-content:center}
.ch-emoji button{font-size:24px;width:40px;height:40px;border-radius:10px;background:var(--s2)}
.ch-form{gap:6px}
.ch-form .inp{height:44px;border-radius:22px}
.ch-form .ib{width:40px;height:40px;border-radius:50%;color:var(--gd)}
.ch-form .send{background:var(--gold);color:#241800;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 10px rgba(242,193,78,.3)}
.ch-blocked{gap:10px}

/* ── notifications (p26) ── */
.notif-scr .ni{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;color:var(--gd);
  background:radial-gradient(120% 90% at 50% 0%,#33333B,#16161A 70%);border:1px solid #2E2E36;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 5px rgba(0,0,0,.4)}
.notif-scr .ni img{width:30px;height:30px;object-fit:contain}
.notif-scr .ni.gl{border-color:var(--hairS);background:radial-gradient(circle at 50% 30%,rgba(242,193,78,.3),rgba(242,193,78,.06) 70%),#141417}
.notif-scr .ni.vi{color:#C4B0FF;border-color:rgba(139,92,246,.5);background:radial-gradient(circle at 50% 30%,rgba(139,92,246,.35),rgba(139,92,246,.06) 70%),#141417}
.notif-scr .ni.rd{color:var(--rd);border-color:rgba(255,77,94,.4)}
.notif-scr .nd{width:9px;height:9px;border-radius:5px;background:var(--gd);flex:none;box-shadow:0 0 8px rgba(242,193,78,.8)}
.notif-scr .li{gap:12px;min-height:66px}
.notif-scr .li.unr{background:linear-gradient(90deg,rgba(242,193,78,0),rgba(242,193,78,.06) 50%,rgba(242,193,78,0))}
.notif-scr .nt-t{display:block;line-height:1.45}
.notif-scr .li:not(.unr) .nt-t{font-weight:500;color:#D8D8E0}
.notif-scr .tabs>*{font-size:12px}
.nt-bar{min-height:24px}
.nt-foot{gap:10px;padding:14px 16px;margin-top:auto;color:var(--tx)}
.nt-foot svg{flex:none;color:var(--gd)}

/* ── public profile (p24) ── */
.player-scr{padding-top:12px;gap:12px}
.pl-card .pf-top{align-items:center}
.pl-card h1{font-size:21px}
.pl-acts{gap:8px}
@media (max-width:400px){.pl-acts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pl-acts .btn{padding:0;gap:5px;font-size:12.5px;height:40px}
.pl-send{margin-top:auto}
.player-scr .gw img,.gifts-scr .gw img{width:34px;height:34px}

/* ── my gifts (p23) ── */
.gifts-scr .chip.v{background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.55);color:#C4B0FF}
.gf-hero{align-items:center}
.gf-hero>svg{color:var(--gd);filter:drop-shadow(0 4px 8px rgba(242,193,78,.3))}
.gf-list .li{min-height:64px;gap:10px}
.gf-list .li>img,.gf-list .li>svg{flex:none}
.gf-note{color:#D8D8E0;margin-top:3px}
.gf-foot{margin-top:auto}
.gifts-scr .gw.off{opacity:.35}

/* ── referral (p27) ── */
.rf-hero{align-items:center;gap:8px;padding:18px 16px}
.rf-big{font:700 40px/1 Poppins;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(242,193,78,.3))}
.rf-link{display:flex;align-items:center;direction:ltr;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;border-style:dashed;border-color:rgba(242,193,78,.45)}
.rf-stats{gap:8px}
.rf-list .li{min-height:64px;gap:10px}
.rf-foot{margin-top:auto;padding-top:8px;line-height:1.7}

/* ── delete account (p28) ── */
.del-warn{border-color:rgba(255,77,94,.55);background:radial-gradient(80% 120% at 100% 0%,rgba(255,77,94,.18),rgba(255,77,94,0) 70%),var(--surf);gap:12px}
.del-scr .list .li{min-height:54px;gap:12px}
.del-scr .list .li>b{font-weight:700}
.del-rules .row{align-items:flex-start;line-height:1.6}.del-rules svg{margin-top:3px}
.del-agree{cursor:pointer;gap:10px}
.del-agree input{position:absolute;opacity:0;width:0;height:0}
.del-agree .ck{background:var(--s3);border:1px solid var(--ln);color:transparent}
.del-agree input:checked+.ck{background:var(--rd);border-color:var(--rd);color:#fff}
.del-agree input:focus-visible+.ck{outline:2px solid var(--gd)}

/* ── avatar (p02) ── */
.avatar-scr{gap:14px}
.av-stage{align-items:center;gap:6px;padding:18px 14px 16px}
.av-stage .lring{padding:4px}
.avpick{transition:transform .2s var(--spring)}
.avpick:active{transform:scale(.94)}

/* ── private lobby ── */
.private-scr{gap:14px}
.pv-seats .li{min-height:62px;gap:12px}
.pv-seats .av.off{border-style:dashed;border-color:#4A4A55;background:rgba(255,255,255,.02);color:var(--mu)}

/* ── gift sheet (p09) ── */
.gift-sheet .gs-to{flex-wrap:wrap;gap:6px}
.gift-sheet .gs-to .chip{height:32px;padding:0 10px 0 6px;gap:6px;max-width:150px}
.gift-sheet .gs-to .chip .av{border-width:1px}
.gift-sheet .gs-grid{gap:10px}
.gift-sheet .gt{border-radius:16px;background:var(--surf);border:1px solid var(--ln);padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;position:relative;text-align:center;color:#fff;min-width:0;box-shadow:var(--hl)}
.gift-sheet .gt.sel{border:1.5px solid var(--gd);box-shadow:0 0 16px rgba(242,193,78,.3)}
.gift-sheet .gt img{width:32px;height:32px}
.gift-sheet .gt>span{max-width:100%}
.gift-sheet .gs-note{height:42px;font-size:13px}
.gift-sheet .btn.g{min-width:0}
.soc-inv{max-height:60vh;overflow-y:auto;padding:0 2px}

@media (min-width:900px){
  .scr-chat{max-width:820px;border-inline:1px solid #1E1E22}
  .scr-chat .hdr{padding:14px 20px}
  .ch-msgs{padding:16px 20px}
  .ch-foot{padding:8px 20px 14px}
  .gift-sheet .gs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.av-on.off::after{display:none}
.sech.st>.chip{order:2}
.so-skh{height:76px;background:linear-gradient(90deg,#141416 0%,#1F1F23 50%,#141416 100%) 0 0/200% 100%;animation:soSk 1.3s linear infinite;border-color:var(--ln)}
.so-skh::after{display:none}
.rf-empty{padding:22px 16px}