/* ═══ EMOJI ═══ */
#emojiModal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:flex-end;justify-content:center;z-index:var(--z-overlay);padding-bottom:var(--sb)}
#emojiModal.open{display:flex}
.emoji-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg);padding:var(--sp-4);padding-bottom:calc(var(--sp-4) + var(--sb));width:min(400px,95vw);animation:slideInUp .25s var(--ease-out);margin-bottom:var(--sp-2);box-shadow:var(--shadow-lg)}
.emoji-head{font-size:var(--text-base);font-weight:var(--weight-bold);margin-bottom:var(--sp-3);display:flex;align-items:center;justify-content:space-between;color:var(--muted)}
.emoji-x{background:none;border:none;color:var(--muted);font-size:var(--text-xl);cursor:pointer;width:var(--sp-8);height:var(--sp-8);display:flex;align-items:center;justify-content:center}
.emoji-x:active{color:var(--text)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.emoji-btn{font-size:clamp(20px,5vw,24px);padding:var(--sp-2);border-radius:var(--r-lg);background:none;border:none;cursor:pointer;transition:transform var(--dur-normal) var(--ease-out),background var(--dur-fast);text-align:center;min-height:44px}
.emoji-btn:hover{transform:scale(1.12);background:var(--surface-1)}
.emoji-btn:active{background:var(--surface-3);transform:scale(1.2)}

/* ═══ SERVER BAR EXTRAS ═══ */
.srv-sep{width:28px;height:1px;background:var(--border);margin:var(--sp-1) 0;flex-shrink:0}
.srv-stocks{font-size:var(--text-xl);filter:none!important}
.srv-stocks.active{background:var(--bg5)!important;border-color:var(--border-hover)!important}
.srv-home{background:transparent!important;border:none!important;overflow:hidden;padding:0}
.srv-home img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg);pointer-events:none}
.srv-home.active{box-shadow:inset 0 0 0 2px var(--border-hover)!important}
#srvList{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);width:100%}

/* ═══ HOME / SERVER PANELS ═══ */
#homePanel{display:flex;flex-direction:column;flex:1;overflow:hidden}
#serverPanel{display:flex;flex-direction:column;flex:1;overflow:hidden}
#homeScroll{flex:1;overflow-y:auto;padding:var(--sp-2) var(--sp-2);-webkit-overflow-scrolling:touch}
#dmEmpty{padding:var(--sp-6) var(--sp-4);font-size:var(--text-sm);color:var(--text-faint);text-align:center;line-height:var(--leading-relaxed)}

/* ═══ SERVER BROWSER ═══ */
#srvBrowserOverlay{position:fixed;inset:0;background:rgba(0,0,0,.82);display:none;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--sp-5);backdrop-filter:blur(8px)}
#srvBrowserOverlay.open{display:flex}
#srvBrowserCard{background:var(--bg2);border:1.5px solid var(--border);border-top-color:var(--border-hover);border-radius:var(--r-2xl);width:min(500px,100%);max-height:82vh;display:flex;flex-direction:column;animation:bubblePop .35s var(--ease-bubble);overflow:hidden;box-shadow:var(--shadow-xl)}
.srvb-head{padding:var(--sp-4) var(--sp-5) var(--sp-3);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.srvb-title{font-size:var(--text-md);font-weight:var(--weight-bold);color:var(--text-secondary)}
.srvb-close{background:var(--surface-2);border:1px solid var(--border);color:var(--muted);font-size:var(--text-lg);width:30px;height:30px;border-radius:var(--r-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast),color var(--dur-fast)}
.srvb-close:active{background:var(--surface-active);color:var(--text)}
.srvb-body{flex:1;overflow-y:auto;padding:var(--sp-3) var(--sp-3)}
.srvb-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-3);border-radius:var(--r-xl);border:1.5px solid var(--border);background:var(--bg);margin-bottom:var(--sp-2);transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);box-shadow:var(--shadow-xs)}
.srvb-item:hover{background:var(--bg3);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.srvb-icon{width:42px;height:42px;border-radius:var(--r-lg);background:var(--bg4);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);font-weight:var(--weight-extra);flex-shrink:0;color:var(--text-secondary);overflow:hidden}
.srvb-info{flex:1;min-width:0}
.srvb-name{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--text-secondary)}
.srvb-desc{font-size:var(--text-xs);color:var(--text-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srvb-join-btn{background:var(--text);border:none;color:var(--bg);font-size:var(--text-2xs);font-weight:var(--weight-extra);letter-spacing:.5px;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-lg);cursor:pointer;flex-shrink:0;transition:transform var(--dur-fast),box-shadow var(--dur-fast);font-family:inherit}
.srvb-join-btn:hover{transform:scale(1.04);box-shadow:var(--shadow-sm)}
.srvb-join-btn:active{transform:scale(.95)}
.srvb-join-btn.joined{background:var(--surface-2);color:var(--muted);cursor:not-allowed;border:1px solid var(--border);pointer-events:none}
.srvb-empty{text-align:center;padding:var(--sp-10) var(--sp-5);color:var(--text-faint);font-size:var(--text-base);line-height:var(--leading-relaxed)}
.srvb-footer{padding:var(--sp-3) var(--sp-3);border-top:1px solid var(--border2);flex-shrink:0}
.srvb-create-btn{width:100%;padding:var(--sp-3);background:transparent;border:1px dashed var(--border-hover);border-radius:var(--r-lg);color:var(--muted);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.5px;cursor:pointer;font-family:inherit;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.srvb-create-btn:hover,.srvb-create-btn:active{background:var(--surface-1);border-color:var(--border-hover);color:var(--text)}

/* ═══ USER SEARCH ═══ */
#userSearchOverlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;z-index:var(--z-popover);padding:var(--sp-5);backdrop-filter:blur(8px)}
#userSearchOverlay.open{display:flex}
#userSearchCard{background:var(--bg2);border:1.5px solid var(--border);border-top-color:var(--border-hover);border-radius:var(--r-2xl);width:min(420px,100%);max-height:72vh;display:flex;flex-direction:column;animation:bubblePop .32s var(--ease-bubble);overflow:hidden;box-shadow:var(--shadow-xl)}
.us-head{padding:var(--sp-4) var(--sp-4) var(--sp-3);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.us-title{font-size:var(--text-md);font-weight:var(--weight-bold);color:var(--text-secondary)}
.us-close{background:var(--surface-1);border:1px solid var(--border);color:var(--muted);font-size:var(--text-md);width:28px;height:28px;border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast),color var(--dur-fast)}
.us-close:active{color:var(--text);background:var(--surface-active)}
.us-search-wrap{padding:var(--sp-3) var(--sp-3) var(--sp-2);flex-shrink:0}
.us-input{width:100%;padding:var(--sp-3) var(--sp-4);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);color:var(--text);font-size:var(--text-md);font-family:inherit;outline:none;-webkit-appearance:none;transition:border-color var(--dur-normal)}
.us-input:focus{border-color:var(--border-hover)}
.us-input::placeholder{color:var(--text-faint)}
.us-count{padding:var(--sp-1) var(--sp-4) 2px;font-size:var(--text-2xs);font-weight:var(--weight-bold);letter-spacing:1.5px;text-transform:uppercase;flex-shrink:0;transition:color var(--dur-normal);min-height:20px}
#usResults{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--sp-1) var(--sp-2) var(--sp-3)}
.us-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);cursor:pointer;transition:background var(--dur-fast);min-height:50px}
.us-item:hover,.us-item:active{background:var(--surface-hover)}
.us-av{width:36px;height:36px;border-radius:var(--r-full);background:var(--bg5);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-bold);font-size:var(--text-base);flex-shrink:0;border:1px solid var(--border);overflow:hidden;position:relative}
.us-av img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-full)}
.us-sdot{position:absolute;bottom:0;right:0;width:9px;height:9px;border-radius:var(--r-full);border:2px solid var(--bg2)}
.us-sdot.on{background:var(--success)}.us-sdot.idle{background:var(--muted)}.us-sdot.off{background:var(--bg6)}
.us-uname{font-size:var(--text-base);font-weight:var(--weight-semi);color:var(--text-secondary)}
.us-ustatus{font-size:var(--text-2xs);color:var(--text-faint);margin-top:1px}
.us-msg-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text-secondary);font-size:var(--text-2xs);font-weight:var(--weight-extra);letter-spacing:.3px;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);cursor:pointer;font-family:inherit;flex-shrink:0;transition:background var(--dur-fast),color var(--dur-fast)}
.us-msg-btn:active{background:var(--surface-active);color:var(--text)}
.us-empty{text-align:center;padding:var(--sp-7) var(--sp-5);color:var(--text-faint);font-size:var(--text-sm);line-height:var(--leading-relaxed)}

/* ═══ NOTIFS ═══ */
#notifBox{position:fixed;bottom:max(20px,calc(var(--sb) + 10px));right:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);z-index:var(--z-toast);pointer-events:none}
.notif{
  background:var(--bg3);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4);padding-right:var(--sp-5);
  font-size:var(--text-sm);max-width:min(320px,88vw);
  animation:notifSlideIn .25s var(--ease-out) both;
  box-shadow:var(--shadow-lg);color:var(--text-secondary);
  transition:transform var(--dur-normal) var(--ease-spring),opacity var(--dur-normal);
  display:flex;align-items:center;gap:var(--sp-3);
  pointer-events:auto;cursor:pointer;
  position:relative;overflow:hidden;
}
.notif-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px}
.notif-icon svg{width:16px;height:16px}
.notif-text{flex:1;line-height:var(--leading-snug)}
.notif-progress{position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 var(--r-lg) var(--r-lg);animation:notifCountdown linear forwards}
.notif.success{border-left:3px solid var(--success)}
.notif.success .notif-icon svg{stroke:var(--success)}
.notif.success .notif-progress{background:var(--success);animation-duration:3s}
.notif.error{border-left:3px solid var(--error)}
.notif.error .notif-icon svg{stroke:var(--error)}
.notif.error .notif-progress{background:var(--error);animation-duration:4s}
.notif.warning{border-left:3px solid var(--warning)}
.notif.warning .notif-icon svg{stroke:var(--warning)}
.notif.warning .notif-progress{background:var(--warning);animation-duration:3s}
.notif.info{border-left:3px solid var(--info)}
.notif.info .notif-icon svg{stroke:var(--info)}
.notif.info .notif-progress{background:var(--info);animation-duration:3s}
.notif.out{animation:nOut .28s forwards}

/* ═══ FRIENDS / PEOPLE PAGE ═══ */
#friendsPage{position:fixed;inset:0;background:var(--bg);z-index:var(--z-popover);display:flex;flex-direction:column;transform:translateY(100%);transition:transform var(--dur-slow) var(--ease-expo),opacity var(--dur-slow);opacity:0;overflow:hidden;will-change:transform,opacity}
#friendsPage.open{transform:translateY(0);opacity:1}
.fp-header{display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,3vw,18px) clamp(14px,4vw,28px);padding-top:calc(clamp(12px,3vw,18px) + var(--st));background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0}
.fp-title{font-size:clamp(15px,3.5vw,20px);font-weight:var(--weight-extra);color:var(--text);letter-spacing:-.4px}
.fp-close{background:var(--surface-1);border:1px solid var(--border);color:var(--text-secondary);font-size:16px;width:36px;height:36px;border-radius:var(--r-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast),color var(--dur-fast);flex-shrink:0}
.fp-close:hover{background:var(--surface-2);color:var(--text)}
.fp-close:active{transform:scale(.95)}
.fp-tabs{display:flex;padding:0 var(--sp-5);border-bottom:1px solid var(--border2);background:var(--bg2);flex-shrink:0}
.fp-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.5px;text-transform:uppercase;padding:var(--sp-2) var(--sp-4);cursor:pointer;font-family:inherit;transition:color var(--dur-fast),border-color var(--dur-fast)}
.fp-tab.active{color:var(--text);border-bottom-color:var(--text)}
.fp-body{flex:1;overflow-y:auto;padding:var(--sp-4) var(--sp-5);-webkit-overflow-scrolling:touch}
.fp-search{width:100%;padding:var(--sp-2) var(--sp-3);background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);color:var(--text);font-size:var(--text-md);font-family:inherit;outline:none;margin-bottom:var(--sp-3);-webkit-appearance:none;transition:border-color var(--dur-normal)}
.fp-search:focus{border-color:var(--border-hover)}
.fp-search::placeholder{color:var(--text-faint)}
.fp-user{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--surface-0);border:1px solid var(--border2);margin-bottom:var(--sp-2);transition:background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast);box-shadow:var(--shadow-xs)}
.fp-user:hover{background:var(--surface-hover);border-color:var(--border);box-shadow:var(--shadow-sm)}
.fp-uav{width:40px;height:40px;border-radius:var(--r-full);background:var(--bg5);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-bold);font-size:var(--text-lg);flex-shrink:0;border:1px solid var(--border);overflow:hidden;position:relative}
.fp-uav img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-full)}
.fp-dot{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:var(--r-full);border:2px solid var(--bg)}
.fp-dot.on{background:var(--success)}.fp-dot.idle{background:var(--warning)}.fp-dot.off{background:var(--bg6)}
.fp-uinfo{flex:1;min-width:0}
.fp-uname{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--text-secondary)}
.fp-ustatus{font-size:var(--text-xs);color:var(--text-faint);margin-top:1px}
.fp-ubtn{background:var(--surface-2);border:1px solid var(--border);color:var(--text-secondary);font-size:var(--text-xs);font-weight:var(--weight-bold);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);cursor:pointer;font-family:inherit;flex-shrink:0;transition:background var(--dur-fast),color var(--dur-fast)}
.fp-ubtn:active{background:var(--surface-active);color:var(--text)}
.fp-empty{text-align:center;padding:var(--sp-10) var(--sp-5);color:var(--text-faint);font-size:var(--text-base);line-height:var(--leading-relaxed)}

/* ═══ TRADING LEADERBOARD PAGE ═══ */
#leaderPage{position:fixed;inset:0;background:var(--bg);z-index:var(--z-popover);display:flex;flex-direction:column;transform:translateY(100%);transition:transform var(--dur-slow) var(--ease-expo),opacity var(--dur-slow);opacity:0;overflow:hidden;will-change:transform,opacity}
#leaderPage.open{transform:translateY(0);opacity:1}
#lpStars{position:absolute;inset:0;pointer-events:none;z-index:0}
#leaderPage .lp-header,#leaderPage .lp-podium,#leaderPage .lp-reset-bar,#leaderPage .lp-my-rank,#leaderPage .lp-body{position:relative;z-index:1}

/* ── Header ── */
.lp-header{display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,3vw,18px) clamp(14px,4vw,28px);padding-top:calc(clamp(12px,3vw,18px) + var(--st));background:transparent;border-bottom:1px solid var(--border);flex-shrink:0;gap:var(--sp-3)}
.lp-title{font-size:clamp(15px,3.5vw,20px);font-weight:var(--weight-extra);color:var(--text);letter-spacing:-.4px;flex-shrink:0}
.lp-header-actions{display:flex;align-items:center;gap:var(--sp-2)}
.lp-close{background:var(--surface-1);border:1px solid var(--border);color:var(--text-secondary);font-size:16px;width:36px;height:36px;border-radius:var(--r-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast),color var(--dur-fast);flex-shrink:0}
.lp-close:hover{background:var(--surface-2);color:var(--text)}
.lp-close:active{background:var(--surface-active);color:var(--text);transform:scale(.92)}

/* ── Period tabs ── */
.lp-period-tabs{display:flex;background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-lg);padding:2px;gap:1px}
.lp-period-tab{background:transparent;border:none;color:var(--muted);font-size:var(--text-xs);font-weight:var(--weight-semi);padding:5px 12px;border-radius:var(--r-md);cursor:pointer;font-family:var(--font);transition:background var(--dur-fast),color var(--dur-fast);white-space:nowrap}
.lp-period-tab:hover{color:var(--text)}
.lp-period-tab.active{background:var(--surface-2);color:var(--text);font-weight:var(--weight-bold)}

/* ── Reset timer bar ── */
.lp-reset-bar{display:flex;align-items:center;justify-content:center;gap:var(--sp-px);padding:var(--sp-px) var(--sp-4);background:transparent;border-bottom:1px solid var(--border2);flex-shrink:0}
.lp-reset-label{font-size:var(--text-2xs);color:var(--text-faint);letter-spacing:.3px}
.lp-reset-label strong{color:var(--text-secondary);font-weight:var(--weight-bold)}

/* ── Podium: Top 3 ── */
.lp-podium{flex-shrink:0;padding:var(--sp-5) var(--sp-4) var(--sp-3);background:transparent}
.lp-podium:empty{display:none}
.lp-podium-row{display:flex;align-items:flex-end;justify-content:center;gap:var(--sp-3)}
.lp-pod{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--sp-4) var(--sp-3) var(--sp-3);border-radius:var(--r-xl);border:1.5px solid var(--border2);background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:relative;min-width:0;flex:1;max-width:140px;transition:transform var(--dur-fast),box-shadow var(--dur-fast);animation:lpPodIn .4s var(--ease-out) both}
.lp-pod:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.lp-pod.me{border-color:var(--border-hover);background:var(--bg3)}
.lp-pod.gold{border-color:rgba(251,191,36,.3);animation-delay:0s}
.lp-pod.gold:hover{box-shadow:0 8px 30px rgba(251,191,36,.1)}
.lp-pod.silver{animation-delay:.08s}
.lp-pod.bronze{animation-delay:.16s}
@keyframes lpPodIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.lp-pod-medal{font-size:24px;line-height:1}
.lp-pod-av{width:52px;height:52px;border-radius:var(--r-full);background:var(--bg5);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-bold);font-size:var(--text-lg);border:2px solid var(--border);overflow:hidden;flex-shrink:0}
.lp-pod.gold .lp-pod-av{border-color:rgba(251,191,36,.4);box-shadow:0 0 16px rgba(251,191,36,.12)}
.lp-pod.silver .lp-pod-av{border-color:rgba(192,192,192,.35)}
.lp-pod.bronze .lp-pod-av{border-color:rgba(205,127,50,.3)}
.lp-pod-av img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-full)}
.lp-pod-name{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lp-pod-pct{font-size:var(--text-md);font-weight:var(--weight-extra);font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.lp-pod-pct.up{color:var(--up)}
.lp-pod-pct.down{color:var(--down)}
.lp-pod-val{font-size:var(--text-2xs);color:var(--muted);font-variant-numeric:tabular-nums}
.lp-pod-chg{position:absolute;top:var(--sp-2);right:var(--sp-2);font-size:8px;font-weight:var(--weight-bold);padding:1px 5px;border-radius:var(--r-sm);line-height:1.4}
.lp-pod-chg.up{background:var(--up-dim);color:var(--up)}
.lp-pod-chg.down{background:var(--down-dim);color:var(--down)}

/* ── My rank strip ── */
.lp-my-rank{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-5);background:rgba(255,255,255,.03);border-bottom:1px solid var(--border2);border-top:1px solid var(--border2);flex-shrink:0}
.lp-myrank-left{display:flex;align-items:center;gap:var(--sp-2)}
.lp-myrank-pos{font-size:var(--text-md);font-weight:var(--weight-extra);color:var(--text)}
.lp-myrank-of{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--muted)}
.lp-myrank-chg{font-size:var(--text-2xs);font-weight:var(--weight-bold);padding:2px 6px;border-radius:var(--r-sm);animation:lpChgPulse .5s var(--ease-out)}
.lp-myrank-chg.up{background:var(--up-dim);color:var(--up)}
.lp-myrank-chg.down{background:var(--down-dim);color:var(--down)}
@keyframes lpChgPulse{0%{transform:scale(1.15);opacity:.7}100%{transform:scale(1);opacity:1}}
.lp-myrank-right{text-align:right}
.lp-myrank-pct{font-size:var(--text-md);font-weight:var(--weight-extra);font-variant-numeric:tabular-nums}
.lp-myrank-pct.up{color:var(--up)}
.lp-myrank-pct.down{color:var(--down)}
.lp-myrank-val{font-size:var(--text-2xs);color:var(--muted);font-variant-numeric:tabular-nums}

/* ── Body / List ── */
.lp-body{flex:1;overflow-y:auto;padding:var(--sp-3) var(--sp-5);-webkit-overflow-scrolling:touch}
.lp-loading{display:flex;align-items:center;justify-content:center;gap:6px;padding:40px}
.lp-loading-dot{width:6px;height:6px;border-radius:var(--r-full);background:var(--muted);animation:lpDotBounce .8s ease-in-out infinite}
.lp-loading-dot:nth-child(2){animation-delay:.15s}
.lp-loading-dot:nth-child(3){animation-delay:.3s}
@keyframes lpDotBounce{0%,80%,100%{transform:scale(.6);opacity:.3}40%{transform:scale(1);opacity:1}}
.lp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--text-faint);text-align:center;gap:var(--sp-2);font-size:var(--text-sm)}

/* ── List items ── */
.lp-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-xl);background:rgba(0,0,0,.2);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1.5px solid var(--border2);margin-bottom:var(--sp-2);transition:transform var(--dur-fast),box-shadow var(--dur-fast),border-color var(--dur-fast);animation:lpItemIn .3s var(--ease-out) both;box-shadow:var(--shadow-xs)}
@keyframes lpItemIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.lp-item:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--border)}
.lp-item.me{border-color:var(--border-hover);background:var(--bg3)}

.lp-rank{width:32px;text-align:center;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:1px}
.lp-rank{font-size:var(--text-base);font-weight:var(--weight-extra);color:var(--text-faint)}
.lp-rank-chg{font-size:7px;font-weight:var(--weight-bold);line-height:1.2;animation:lpChgPulse .5s var(--ease-out)}
.lp-rank-chg.up{color:var(--up)}
.lp-rank-chg.down{color:var(--down)}

.lp-av{width:36px;height:36px;border-radius:var(--r-full);background:var(--bg5);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-bold);font-size:var(--text-base);flex-shrink:0;border:1px solid var(--border);overflow:hidden}
.lp-av img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-full)}
.lp-uinfo{flex:1;min-width:0}
.lp-uname{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-you{font-size:9px;opacity:.4;font-weight:var(--weight-medium)}
.lp-utype{font-size:var(--text-2xs);color:var(--text-faint);margin-top:1px}
.lp-val{text-align:right;flex-shrink:0}
.lp-pct{font-size:var(--text-md);font-weight:var(--weight-extra);font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.lp-pct.up{color:var(--up)}
.lp-pct.down{color:var(--down)}
.lp-total{font-size:var(--text-2xs);color:var(--muted);font-variant-numeric:tabular-nums;margin-top:1px}

/* ─── Leaderboard LIVE Animations ─── */

/* Value flash on % change */
.lp-val-flash-up{animation:lpValFlashUp 800ms var(--ease-out)}
.lp-val-flash-down{animation:lpValFlashDown 800ms var(--ease-out)}
@keyframes lpValFlashUp{
  0%{color:var(--text)}
  12%{color:var(--up);text-shadow:0 0 10px var(--up-dim);transform:scale(1.08)}
  100%{text-shadow:none;transform:scale(1)}
}
@keyframes lpValFlashDown{
  0%{color:var(--text)}
  12%{color:var(--down);text-shadow:0 0 10px var(--down-dim);transform:scale(1.08)}
  100%{text-shadow:none;transform:scale(1)}
}

/* Row rank movement highlight */
.lp-item.lp-moved-up{animation:lpRowMoveUp 600ms var(--ease-out)}
.lp-item.lp-moved-down{animation:lpRowMoveDown 600ms var(--ease-out)}
@keyframes lpRowMoveUp{
  0%{background:rgba(0,0,0,.2)}
  15%{background:var(--up-subtle);border-color:rgba(61,168,122,.2)}
  100%{background:rgba(0,0,0,.2)}
}
@keyframes lpRowMoveDown{
  0%{background:rgba(0,0,0,.2)}
  15%{background:var(--down-subtle);border-color:rgba(224,80,80,.2)}
  100%{background:rgba(0,0,0,.2)}
}
.lp-item.lp-rank-moving{z-index:2;box-shadow:var(--shadow-md)}

/* Top 3 podium pulsing glow */
.lp-pod-glow.gold{animation:lpPodIn .4s var(--ease-out) both,lpGlowGold 3s ease-in-out 1s infinite alternate}
.lp-pod-glow.silver{animation:lpPodIn .4s var(--ease-out) .08s both,lpGlowSilver 3.5s ease-in-out 1.2s infinite alternate}
.lp-pod-glow.bronze{animation:lpPodIn .4s var(--ease-out) .16s both,lpGlowBronze 4s ease-in-out 1.4s infinite alternate}
@keyframes lpGlowGold{
  0%{box-shadow:0 0 0 0 rgba(251,191,36,.0),0 4px 16px rgba(0,0,0,.2)}
  50%{box-shadow:0 0 20px 2px rgba(251,191,36,.12),0 4px 20px rgba(0,0,0,.3)}
  100%{box-shadow:0 0 0 0 rgba(251,191,36,.0),0 4px 16px rgba(0,0,0,.2)}
}
@keyframes lpGlowSilver{
  0%{box-shadow:0 0 0 0 rgba(192,192,192,.0),0 4px 16px rgba(0,0,0,.2)}
  50%{box-shadow:0 0 16px 2px rgba(192,192,192,.08),0 4px 20px rgba(0,0,0,.3)}
  100%{box-shadow:0 0 0 0 rgba(192,192,192,.0),0 4px 16px rgba(0,0,0,.2)}
}
@keyframes lpGlowBronze{
  0%{box-shadow:0 0 0 0 rgba(205,127,50,.0),0 4px 16px rgba(0,0,0,.2)}
  50%{box-shadow:0 0 14px 2px rgba(205,127,50,.08),0 4px 20px rgba(0,0,0,.3)}
  100%{box-shadow:0 0 0 0 rgba(205,127,50,.0),0 4px 16px rgba(0,0,0,.2)}
}

/* Podium value flash — same as list but for pod elements */
.lp-pod-pct.lp-val-flash-up{animation:lpValFlashUp 800ms var(--ease-out)}
.lp-pod-pct.lp-val-flash-down{animation:lpValFlashDown 800ms var(--ease-out)}

/* My rank strip value flash */
.lp-myrank-pct.lp-val-flash-up{animation:lpValFlashUp 800ms var(--ease-out)}
.lp-myrank-pct.lp-val-flash-down{animation:lpValFlashDown 800ms var(--ease-out)}

/* Live indicator dot — pulses to show data is live */
.lp-live-dot{width:6px;height:6px;border-radius:50%;background:var(--up);display:inline-block;margin-right:var(--sp-1);animation:lpLivePulse 2s ease-in-out infinite;vertical-align:middle}
@keyframes lpLivePulse{0%,100%{opacity:.4;box-shadow:0 0 0 0 rgba(61,168,122,.3)}50%{opacity:1;box-shadow:0 0 6px 2px rgba(61,168,122,.2)}}

[data-theme="light"] .lp-pod-glow.gold{animation:lpPodIn .4s var(--ease-out) both,lpGlowGoldLight 3s ease-in-out 1s infinite alternate}
[data-theme="light"] .lp-pod-glow.silver{animation:lpPodIn .4s var(--ease-out) .08s both,lpGlowSilverLight 3.5s ease-in-out 1.2s infinite alternate}
[data-theme="light"] .lp-pod-glow.bronze{animation:lpPodIn .4s var(--ease-out) .16s both,lpGlowBronzeLight 4s ease-in-out 1.4s infinite alternate}
@keyframes lpGlowGoldLight{0%{box-shadow:0 2px 8px rgba(0,0,0,.06)}50%{box-shadow:0 4px 20px rgba(251,191,36,.12)}100%{box-shadow:0 2px 8px rgba(0,0,0,.06)}}
@keyframes lpGlowSilverLight{0%{box-shadow:0 2px 8px rgba(0,0,0,.06)}50%{box-shadow:0 4px 16px rgba(140,140,160,.1)}100%{box-shadow:0 2px 8px rgba(0,0,0,.06)}}
@keyframes lpGlowBronzeLight{0%{box-shadow:0 2px 8px rgba(0,0,0,.06)}50%{box-shadow:0 4px 16px rgba(205,127,50,.1)}100%{box-shadow:0 2px 8px rgba(0,0,0,.06)}}

/* ─── Unread Badge on Server Icons ─── */
.srv-btn{position:relative}
.srv-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 var(--sp-1);border-radius:var(--r-full);background:var(--error);color:#fff;font-size:var(--text-2xs);font-weight:var(--weight-extra);display:flex;align-items:center;justify-content:center;pointer-events:none;box-shadow:var(--shadow-sm);z-index:var(--z-base);line-height:1}
[data-theme="light"] .srv-badge{box-shadow:var(--shadow-xs)}

/* ─── Email Display in Profile ─── */
.pp-email{font-size:var(--text-xs);color:var(--primary);margin-bottom:var(--sp-2);display:flex;align-items:center;gap:var(--sp-1)}
.pp-email::before{content:'@';font-size:var(--text-sm);font-weight:var(--weight-bold);opacity:.5}
[data-theme="light"] .pp-email{color:var(--primary)}
.sp-email-linked{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);background:var(--primary-dim);border:1px solid rgba(61,168,122,.2);border-radius:var(--r-md);font-size:var(--text-sm);color:var(--success);margin-bottom:var(--sp-2)}
[data-theme="light"] .sp-email-linked{background:var(--primary-dim)}

/* ─── Notification Permission Button ─── */
.sp-notif-btn{width:100%;padding:var(--sp-3);background:var(--primary-dim);border:1px solid rgba(61,168,122,.2);border-radius:var(--r-md);color:var(--primary);font-size:var(--text-sm);font-weight:var(--weight-semi);cursor:pointer;font-family:inherit;transition:background var(--dur-fast)}
.sp-notif-btn:hover{background:var(--primary-glow)}
.sp-notif-btn.granted{background:var(--primary-dim);border-color:rgba(61,168,122,.2);color:var(--success);cursor:not-allowed;pointer-events:none}

/* ─── Server Settings Modal ─── */
#srvSettingsOverlay{position:fixed;inset:0;background:rgba(0,0,0,.82);display:none;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--sp-5);backdrop-filter:blur(8px)}
#srvSettingsOverlay.open{display:flex}
#srvSettingsCard{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r-2xl);width:min(460px,100%);max-height:85vh;display:flex;flex-direction:column;animation:bubblePop .35s var(--ease-bubble);overflow:hidden;box-shadow:var(--shadow-xl)}
.srvs-head{padding:var(--sp-4) var(--sp-5) var(--sp-3);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.srvs-title{font-size:var(--text-md);font-weight:var(--weight-bold);color:var(--text-secondary)}
.srvs-body{flex:1;overflow-y:auto;padding:var(--sp-4)}
.srvs-icon-preview{width:56px;height:56px;border-radius:var(--r-lg);background:var(--bg4);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:var(--text-2xl);font-weight:var(--weight-extra);color:var(--muted);overflow:hidden;flex-shrink:0}
.srvs-icon-preview img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}
[data-theme="light"] #srvSettingsCard{background:var(--bg2);border-color:var(--border)}
[data-theme="light"] .srvs-title{color:var(--text-secondary)}
[data-theme="light"] .srvs-icon-preview{background:var(--bg3);border-color:var(--border);color:var(--muted)}

/* ─── Invite Modal ─── */
#inviteOverlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:var(--z-popover);padding:var(--sp-5);backdrop-filter:blur(10px)}
#inviteOverlay.open{display:flex}
#inviteCard{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r-2xl);width:min(380px,100%);animation:bubblePop .35s var(--ease-bubble);overflow:hidden;text-align:center;box-shadow:var(--shadow-xl)}
.invite-banner{height:80px;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}
.invite-body{padding:0 var(--sp-6) var(--sp-6);margin-top:-28px;position:relative}
.invite-icon{width:56px;height:56px;border-radius:var(--r-xl);background:var(--bg4);border:3px solid var(--bg2);margin:0 auto var(--sp-3);display:flex;align-items:center;justify-content:center;font-size:var(--text-2xl);font-weight:var(--weight-extra);color:var(--text-secondary);overflow:hidden;position:relative;z-index:var(--z-base)}
.invite-icon img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}
.invite-name{font-size:var(--text-xl);font-weight:var(--weight-extra);color:var(--text);margin-bottom:var(--sp-2)}
.invite-desc{font-size:var(--text-sm);color:var(--muted);margin-bottom:var(--sp-2);line-height:var(--leading-normal)}
.invite-members{font-size:var(--text-xs);color:var(--text-faint);margin-bottom:var(--sp-5)}
.invite-join-btn{width:100%;padding:var(--sp-4);background:var(--primary);border:none;border-radius:var(--r-xl);color:#fff;font-size:var(--text-md);font-weight:var(--weight-bold);cursor:pointer;font-family:inherit;transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);margin-bottom:var(--sp-2);box-shadow:var(--shadow-sm)}
.invite-join-btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md),var(--shadow-glow)}
.invite-join-btn:active{transform:scale(.97)}
.invite-join-btn.joined{background:var(--primary-dim);color:var(--success);cursor:not-allowed;pointer-events:none}
.invite-close-btn{width:100%;padding:var(--sp-3);background:transparent;border:none;color:var(--muted);font-size:var(--text-sm);font-weight:var(--weight-semi);cursor:pointer;font-family:inherit}
.invite-close-btn:hover{color:var(--text-secondary)}
[data-theme="light"] #inviteCard{background:var(--bg2);border-color:var(--border)}
[data-theme="light"] .invite-icon{background:var(--bg3);border-color:var(--bg2);color:var(--muted)}
[data-theme="light"] .invite-name{color:var(--text)}
[data-theme="light"] .invite-desc{color:var(--muted)}
[data-theme="light"] .invite-members{color:var(--text-faint)}
[data-theme="light"] .invite-close-btn{color:var(--muted)}

/* ═══ MARKET CLOSED OVERLAY ═══ */
.mkt-closed-overlay{position:absolute;inset:0;z-index:var(--z-dropdown);background:var(--bg);display:none;align-items:center;justify-content:center;flex-direction:column}
.mkt-closed-overlay.show{display:flex}
.mkt-closed-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sp-8);max-width:380px;gap:var(--sp-3);animation:mktFadeIn .4s var(--ease-out)}
@keyframes mktFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.mkt-closed-icon{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-2)}
.mkt-closed-icon svg{width:36px;height:36px;color:var(--warning);stroke-width:1.5}
.mkt-closed-title{font-size:clamp(18px,4vw,22px);font-weight:var(--weight-extra);color:var(--text);letter-spacing:-.3px}
.mkt-closed-reason{font-size:var(--text-md);font-weight:var(--weight-semi);color:var(--warning);background:rgba(214,158,46,.1);border:1px solid rgba(214,158,46,.15);padding:var(--sp-1) var(--sp-3h);border-radius:var(--r-full)}
.mkt-closed-hint{font-size:var(--text-base);color:var(--text-secondary);line-height:var(--leading-normal);max-width:300px}
.mkt-closed-hours{display:flex;align-items:center;gap:var(--sp-px);font-size:var(--text-sm);color:var(--muted);margin-top:var(--sp-1);padding:var(--sp-2) var(--sp-4);background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-lg)}
.mkt-closed-hours svg{color:var(--muted);flex-shrink:0}
.mkt-closed-btn{margin-top:var(--sp-4);padding:var(--sp-2h) var(--sp-8);border:none;border-radius:var(--r-lg);background:var(--primary);color:#fff;font-size:var(--text-base);font-weight:var(--weight-semi);cursor:pointer;transition:background var(--dur-fast),transform var(--dur-fast)}
.mkt-closed-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}
.mkt-closed-btn:active{transform:scale(.97)}

/* Light mode */
[data-theme="light"] .mkt-closed-overlay{background:var(--bg)}
[data-theme="light"] .mkt-closed-icon{background:rgba(0,0,0,.03);border-color:var(--border)}
[data-theme="light"] .mkt-closed-hours{background:var(--bg2);border-color:var(--border)}