/* QeepX — Mobile-First App Shell v4 FIXED */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Orbitron:wght@700;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;height:100%;-webkit-text-size-adjust:100%}
body{font-family:'Space Grotesk',system-ui,sans-serif;background:#120020;color:#e2d9f3;min-height:100%;overflow-x:hidden;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
input,textarea,select,button{font-family:inherit}
/* FIX: Prevent button zoom on click */
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus{outline:none}

:root{
  --purple:#7d1ea0;--purple-light:#a855f7;--purple-dark:#4a0d60;
  --lime:#cbff00;--lime-dark:#8db800;--lime-glow:#d4ff33;
  --dark:#07000f;--dark-2:#0f0019;--dark-3:#160025;
  --card-bg:rgba(22,0,38,0.92);--card-border:rgba(125,30,160,0.3);
  --text-primary:#f0e8ff;--text-secondary:#b09cc8;--text-muted:#7a6990;
  --online:#00ff88;--away:#ffb800;--offline:#555;
  --danger:#ff4466;--success:#00dd88;--warning:#ffb800;--accent:#cbff00;
  --radius:14px;--radius-sm:8px;--radius-lg:20px;
  --nav-h:56px;--bnav-h:68px;
  --app-w:480px;
  --shadow-glow:0 0 20px rgba(125,30,160,0.4);
  --shadow-lime:0 0 20px rgba(203,255,0,0.3);
  --transition:0.2s cubic-bezier(0.4,0,0.2,1)
}

/* ── Desktop outer shell ── */
body{
  background:#07000f;
  background-image:
    linear-gradient(rgba(125,30,160,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,30,160,0.05) 1px,transparent 1px);
  background-size:40px 40px;
}
@media(min-width:520px){
  body::before{
    content:'';position:fixed;inset:0;
    background:radial-gradient(ellipse at 70% -10%, rgba(125,30,160,.25) 0%,transparent 55%),
               radial-gradient(ellipse at 20% 110%, rgba(203,255,0,.1) 0%,transparent 45%);
    pointer-events:none;z-index:0;
  }
}

/* ── App shell — phone-width container — FIXED LAYOUT ── */
#app-shell{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  height:100dvh; /* dynamic viewport for iOS */
  height:-webkit-fill-available;
  z-index:1;
  max-width:var(--app-w);
  margin:0 auto;
  background:#07000f;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
@media(min-width:520px){
  #app-shell{
    box-shadow:0 0 0 1px rgba(125,30,160,.3), 0 0 80px rgba(125,30,160,.15);
    /* NO transform here - transform breaks position:fixed children (chatroom, modals) */
    /* Instead use margin:auto with left/right auto */
    left:0;right:0;
    width:var(--app-w);
    margin:0 auto;
  }
}

/* ── Top Navigation ── */
.topnav{
  flex-shrink:0;
  z-index:500;
  height:var(--nav-h);
  background:rgba(7,0,15,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--card-border);
}
.nav-inner{
  height:100%;display:flex;align-items:center;gap:8px;padding:0 12px;
}
.nav-logo{display:flex;align-items:center;gap:4px;font-family:'Orbitron',sans-serif;font-size:1.1rem;font-weight:900;letter-spacing:-.5px;flex-shrink:0}
.logo-q{color:var(--lime);text-shadow:0 0 8px var(--lime)}
.logo-rest{color:var(--text-primary)}
.logo-badge{font-size:.45rem;font-family:'Space Grotesk',sans-serif;font-weight:700;background:var(--purple);color:var(--lime);padding:2px 5px;border-radius:4px;letter-spacing:.5px;margin-left:4px}
.nav-search{flex:1;min-width:0;position:relative}
.nav-search input{
  width:100%;height:34px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--card-border);
  border-radius:50px;
  padding:0 14px 0 32px;
  color:var(--text-primary);font-size:.82rem;outline:none;
  transition:var(--transition);
}
.nav-search input:focus{border-color:var(--purple-light)}
.nav-search input::placeholder{color:var(--text-muted)}
.nav-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.9rem;pointer-events:none}
.nav-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;min-width:fit-content}
.nav-qp{
  display:flex;align-items:center;gap:4px;
  background:rgba(203,255,0,.1);
  border:1px solid rgba(203,255,0,.25);
  border-radius:50px;padding:4px 10px;
  transition:var(--transition);
  cursor:pointer;
}
.qp-icon{color:var(--lime);font-size:.85rem}
.qp-val{color:var(--lime);font-weight:700;font-size:.85rem}
.qp-label{color:var(--lime-dark);font-size:.62rem;font-weight:600}
.nav-icon-btn{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:50%;
  color:var(--text-secondary);cursor:pointer;position:relative;
  transition:var(--transition);
}
.nav-icon-btn:hover{background:var(--dark-3);color:var(--text-primary)}
.nav-badge{
  position:absolute;top:2px;right:2px;
  background:var(--danger);color:#fff;
  font-size:.55rem;font-weight:700;
  width:14px;height:14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.nav-avatar-wrap{position:relative;cursor:pointer}
.nav-avatar{width:32px;height:32px;border-radius:50%;border:2px solid var(--purple);object-fit:cover}
.nav-avatar-wrap:hover .nav-avatar{border-color:var(--lime)}
.online-dot{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:2px solid var(--dark)}
.online-dot.online{background:var(--online)}
.online-dot.away{background:var(--away)}
.online-dot.offline{background:var(--offline)}

/* Avatar Dropdown */
.avatar-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;z-index:2000;
  background:var(--dark-3);border:1px solid var(--card-border);
  border-radius:var(--radius);min-width:200px;
  box-shadow:0 20px 60px rgba(0,0,0,.8),var(--shadow-glow);
  display:none;overflow:hidden;
}
.avatar-dropdown.open{display:block;animation:dropDown .18s ease}
@keyframes dropDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.drop-user-info{display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(125,30,160,.15)}
.drop-user-info img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.drop-name{font-weight:700;font-size:.88rem;color:var(--text-primary)}
.drop-handle{font-size:.72rem;color:var(--purple-light)}
.drop-divider{height:1px;background:var(--card-border);margin:3px 0}
.drop-item{display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:var(--transition)}
.drop-item:hover{background:rgba(125,30,160,.2);color:var(--text-primary)}
.drop-admin{color:var(--lime)!important}
.drop-logout{color:var(--danger)!important}
.nav-auth-btns{display:flex;gap:8px;margin-left:auto}
.btn-ghost{padding:7px 14px;border:1px solid var(--card-border);border-radius:50px;color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;background:transparent}
.btn-lime{padding:7px 16px;background:var(--lime);border-radius:50px;color:#0a0010;font-size:.85rem;font-weight:700;cursor:pointer;border:none}

/* ── Main Content — Scrollable ── */
.main-content{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  -webkit-overscroll-behavior-y:contain;
  padding-top:8px;
  padding-bottom:calc(var(--bnav-h) + 8px);
  overscroll-behavior:contain;
}

/* ── Bottom Navigation — ALWAYS FIXED ── */
.bottom-nav{
  flex-shrink:0;
  z-index:500;
  height:var(--bnav-h);
  background:rgba(7,0,15,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--card-border);
  display:flex;
  align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.bnav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--text-muted);font-size:.6rem;font-weight:600;
  text-decoration:none;transition:var(--transition);
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  border:none;background:transparent;padding:0;
}
.bnav-item.active{color:var(--lime)}
.bnav-item.active svg{stroke:var(--lime)}
.bnav-item.active .bnav-avatar{border-color:var(--lime)}
/* ── Center Joystick Button ── */
.bnav-center{
  flex:0 0 80px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding-bottom:0;position:relative;
  cursor:pointer;text-decoration:none;color:var(--text-muted);font-size:.6rem;font-weight:600;
}
.bnav-joystick{
  width:54px;height:54px;
  position:relative;margin-top:-16px;
  flex-shrink:0;
}
.bnav-joystick-base{
  width:54px;height:54px;
  background:linear-gradient(145deg,#1a003a,#0a0018);
  border-radius:50%;
  border:2px solid rgba(125,30,160,.6);
  box-shadow:0 4px 14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.bnav-joystick-stick{
  width:32px;height:32px;
  background:linear-gradient(135deg,var(--lime),#a0c800);
  border-radius:50%;
  box-shadow:0 0 16px rgba(203,255,0,.5),0 3px 6px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.3);
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,box-shadow .15s;
}
.bnav-joystick:active .bnav-joystick-stick{
  transform:scale(.9);
  box-shadow:0 0 8px rgba(203,255,0,.3),0 1px 3px rgba(0,0,0,.5);
}
.bnav-joystick-stick::after{
  content:'';
  width:8px;height:8px;
  background:rgba(0,0,0,.3);
  border-radius:50%;
}
/* d-pad arrows */
.bnav-joystick-dpad{
  position:absolute;inset:0;
  pointer-events:none;
}
.bnav-joystick-dpad::before,.bnav-joystick-dpad::after{
  content:'';position:absolute;
  background:rgba(203,255,0,.18);
}
.bnav-joystick-dpad::before{
  width:6px;height:14px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border-radius:2px;
}
.bnav-joystick-dpad::after{
  width:14px;height:6px;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border-radius:2px;
}
.bnav-center.active .bnav-joystick-stick{box-shadow:0 0 20px rgba(203,255,0,.7),0 3px 6px rgba(0,0,0,.5)}
.bnav-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;border:2px solid var(--card-border)}

/* ── Container ── */
.container,.container-sm,.container-md{
  width:100%;padding:16px 14px;
}

/* ── Toast ── */
#toast-container{position:fixed;top:calc(var(--nav-h) + 8px);right:8px;z-index:9999;display:flex;flex-direction:column;gap:6px;max-width:320px;width:calc(100% - 16px)}
@media(min-width:520px){#toast-container{right:calc(50% - var(--app-w)/2 + 8px)}}
.toast{padding:10px 16px;border-radius:10px;font-size:.82rem;font-weight:600;color:#fff;animation:toastIn .25s ease;box-shadow:0 4px 20px rgba(0,0,0,.5);max-width:100%;word-break:break-word}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
.toast.success,.toast.lime{background:linear-gradient(135deg,#00884a,#00aa60)}
.toast.error{background:linear-gradient(135deg,#c01030,#e02040)}
.toast.warning{background:linear-gradient(135deg,#996600,#cc8800)}
.toast.info{background:linear-gradient(135deg,var(--purple-dark),var(--purple))}

/* ── Cards ── */
.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card-sm{padding:12px 14px}

/* ── Buttons — FIX: no scale/zoom on click ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:50px;font-size:.875rem;font-weight:700;
  cursor:pointer;border:none;transition:background .2s,border-color .2s,opacity .2s;
  min-height:42px;-webkit-tap-highlight-color:transparent;
  white-space:nowrap;
  /* FIX: prevent zoom on click */
  transform:none!important;
  -webkit-transform:none!important;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
.btn:active{opacity:.85}
.btn-primary{background:linear-gradient(135deg,var(--purple),#9d24c7);color:#fff}
.btn-primary:hover{filter:brightness(1.1)}
.btn-secondary{background:rgba(125,30,160,.15);border:1px solid var(--card-border);color:var(--text-primary)}
.btn-secondary:hover{background:rgba(125,30,160,.3);border-color:var(--purple-light)}
.btn-accent{background:linear-gradient(135deg,var(--lime),#a0c800);color:#0a0010}
.btn-accent:hover{filter:brightness(1.05)}
.btn-outline{background:transparent;border:1px solid var(--card-border);color:var(--text-secondary)}
.btn-outline:hover{border-color:var(--purple-light);color:var(--text-primary)}
.btn-danger{background:rgba(255,68,102,.15);border:1px solid var(--danger);color:var(--danger)}
.btn-sm{padding:7px 14px;font-size:.78rem;min-height:34px}
.btn-full{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn-ripple{position:relative;overflow:hidden}
.ripple-effect{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.2);
  animation:rippleAnim .6s linear;
  pointer-events:none;
  transform:scale(0);
}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ── Forms ── */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:.78rem;font-weight:600;color:var(--text-secondary);margin-bottom:5px}
.form-control{
  width:100%;padding:11px 14px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--card-border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);font-size:.9rem;outline:none;
  transition:var(--transition);
}
.form-control:focus{border-color:var(--purple-light);background:rgba(125,30,160,.1)}
.form-control::placeholder{color:var(--text-muted)}
select.form-control{cursor:pointer}
.form-hint{font-size:.72rem;color:var(--text-muted);margin-top:4px}

/* ── Compose box ── */
.compose-box{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:12px;margin-bottom:12px}
.compose-row{display:flex;gap:10px;margin-bottom:8px}
.compose-input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--card-border);border-radius:var(--radius-sm);padding:10px 12px;color:var(--text-primary);font-size:.9rem;outline:none;resize:none;min-height:60px}
.compose-footer{display:flex;align-items:center;justify-content:space-between}

/* ── Section / Page titles ── */
.page-title{font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:900;color:var(--text-primary);margin-bottom:16px}
.section-title{font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;margin-top:4px}

/* ── Stats row ── */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.stat-box{background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;padding:10px 6px;text-align:center;transition:var(--transition);cursor:pointer}
.stat-box:hover{border-color:var(--purple-light)}
.stat-value{font-size:1.1rem;font-weight:800;color:var(--text-primary)}
.stat-label{font-size:.58rem;color:var(--text-muted);margin-top:2px;text-transform:uppercase;letter-spacing:.3px}

/* ── Wallet widget ── */
.wallet-widget{background:linear-gradient(135deg,rgba(125,30,160,.2),rgba(74,13,96,.3));border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:20px 16px;text-align:center;margin-bottom:14px;position:relative;overflow:hidden}
.wallet-widget::before{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;background:radial-gradient(circle,rgba(203,255,0,.08),transparent 70%);pointer-events:none}
.qp-big{font-family:'Orbitron',sans-serif;font-size:clamp(1.8rem,8vw,2.6rem);font-weight:900;color:var(--lime);text-shadow:0 0 20px rgba(203,255,0,.4);line-height:1}
.qp-label{font-size:.72rem;color:var(--text-muted);letter-spacing:.6px;margin-top:4px}
.level-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(125,30,160,.25);border:1px solid rgba(125,30,160,.4);border-radius:50px;padding:3px 10px;font-size:.72rem;font-weight:700;color:var(--purple-light)}
.early-badge{background:rgba(203,255,0,.1);border-color:rgba(203,255,0,.3);color:var(--lime)}
/* Level XP bar — clickable */
.xp-bar-wrap{
  height:8px;background:rgba(125,30,160,.2);border-radius:50px;overflow:hidden;
  max-width:200px;margin:8px auto 0;cursor:pointer;
  position:relative;
}
.xp-bar-wrap:hover::after{
  content:'Tap to see tasks';
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  font-size:.58rem;color:var(--lime);background:rgba(0,0,0,.8);
  padding:2px 6px;border-radius:4px;white-space:nowrap;pointer-events:none;
}
.xp-bar{height:100%;background:linear-gradient(90deg,var(--purple),var(--lime));border-radius:50px;transition:width .6s ease}

/* ── Alert ── */
.alert{padding:10px 14px;border-radius:var(--radius-sm);font-size:.85rem;margin-bottom:12px}
.alert-success{background:rgba(0,221,136,.1);border:1px solid rgba(0,221,136,.3);color:var(--success)}
.alert-danger{background:rgba(255,68,102,.1);border:1px solid rgba(255,68,102,.3);color:var(--danger)}
.alert-info{background:rgba(125,30,160,.15);border:1px solid var(--card-border);color:var(--text-secondary)}
.alert-warning{background:rgba(255,184,0,.1);border:1px solid rgba(255,184,0,.3);color:var(--warning)}

/* ── Avatar sizes ── */
.avatar{border-radius:50%!important;object-fit:cover;flex-shrink:0}
.avatar-xs{width:24px;height:24px}
.avatar-sm{width:36px;height:36px}
.avatar-md{width:52px;height:52px}
.avatar-lg{width:80px;height:80px;border-radius:50%!important;object-fit:cover;border:3px solid var(--purple)}

/* ── Feed / Posts — Instagram style ── */
/* ══ INSTAGRAM-STYLE FEED ══════════════════════════════════════════ */
.post-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:0;margin-bottom:4px;overflow:hidden;position:relative}
.post-sponsored{position:absolute;top:10px;right:10px;background:rgba(125,30,160,.7);color:#fff;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;z-index:2}
.post-header{display:flex;align-items:center;gap:10px;padding:11px 14px 9px;position:relative}
.post-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(125,30,160,.3)}
.post-meta{flex:1;min-width:0}
.post-username{font-weight:700;font-size:.88rem;color:var(--text-primary);display:block;line-height:1.2}
.post-loc-tag{font-size:.68rem;color:var(--purple-light);display:block;margin-top:1px}
.post-more-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;padding:4px 8px;line-height:1;font-weight:700;letter-spacing:2px}
.post-more-menu{position:absolute;right:10px;top:44px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.6);z-index:100;min-width:140px;overflow:hidden}
.post-more-menu button{display:flex;align-items:center;gap:8px;padding:11px 14px;background:none;border:none;color:var(--text-primary);cursor:pointer;width:100%;font-size:.84rem;font-family:inherit}
.post-more-menu button:hover{background:rgba(125,30,160,.15)}
/* Full-width image */
.post-img-wrap{position:relative;width:100%;background:#0d0020;line-height:0;overflow:hidden;cursor:pointer}
.post-image{width:100%;display:block;object-fit:cover;max-height:580px;min-height:180px}
/* Double-tap heart */
.post-dbl-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:72px;pointer-events:none;opacity:0;z-index:5}
.post-dbl-heart.pop{animation:dblHeart .8s ease forwards}
@keyframes dblHeart{0%{transform:translate(-50%,-50%) scale(0);opacity:1}35%{transform:translate(-50%,-50%) scale(1.25);opacity:1}70%{transform:translate(-50%,-50%) scale(1.05);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.4);opacity:0}}
/* Action bar */
.post-actions{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 4px}
.post-act-left{display:flex;align-items:center;gap:2px}
.post-act-right{display:flex;align-items:center;gap:4px}
.btn-icon{background:none;border:none;cursor:pointer;color:var(--text-primary);padding:5px 6px;display:flex;align-items:center;line-height:1;transition:transform .1s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn-icon:active{transform:scale(.85)}
.btn-icon.liked svg,.btn-icon.liked .like-svg{color:var(--danger);fill:var(--danger)}
.btn-icon.saved svg,.btn-icon.saved .save-svg{color:var(--accent);fill:var(--accent)}
.btn-like .like-svg{transition:transform .2s}
.btn-like.liked .like-svg{animation:heartPop .3s ease}
@keyframes heartPop{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
/* Like count */
.post-like-count{padding:0 14px 3px;font-size:.84rem;color:var(--text-primary)}
/* Caption */
.post-caption{padding:2px 14px 6px;font-size:.875rem;line-height:1.5;color:var(--text-primary)}
.post-cap-user{font-weight:800;color:var(--text-primary);margin-right:5px}
/* View comments link */
.post-view-cmts{display:block;background:none;border:none;padding:0 14px 3px;font-size:.82rem;color:var(--text-muted);cursor:pointer;text-align:left;font-family:inherit}
/* Comments section */
.post-comments{padding:4px 14px 8px;border-top:1px solid rgba(125,30,160,.1)}
.comment-row{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start}
.comment-av{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-top:2px}
.comment-body{flex:1;font-size:.84rem;line-height:1.5}
.comment-uname{font-weight:700;color:var(--text-primary);margin-right:5px}
.comment-txt{color:var(--text-secondary)}
.comment-ago{display:block;font-size:.68rem;color:var(--text-muted);margin-top:2px}
/* Add comment row */
.post-add-comment{display:flex;align-items:center;gap:8px;padding:6px 14px 8px;border-top:1px solid rgba(125,30,160,.08)}
.post-add-av{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0}
.post-comment-input{flex:1;background:none;border:none;color:var(--text-primary);font-size:.84rem;outline:none;padding:4px 0;font-family:inherit}
.post-comment-input::placeholder{color:var(--text-muted)}
.post-comment-submit{background:none;border:none;color:var(--purple-light);font-size:.82rem;font-weight:700;cursor:pointer;padding:4px 6px;font-family:inherit;flex-shrink:0}
/* Timestamp */
.post-ts{display:block;padding:0 14px 10px;font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px}
/* Boost button inline */
.post-boost-btn{background:rgba(203,255,0,.1);border:1px solid rgba(203,255,0,.25);color:var(--lime);border-radius:50px;padding:4px 10px;font-size:.7rem;font-weight:700;cursor:pointer;white-space:nowrap}

/* ── Spinner / Loading ── */
.spinner{width:28px;height:28px;border:2px solid var(--card-border);border-top-color:var(--purple-light);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex;align-items:center;justify-content:center;padding:40px;gap:10px;color:var(--text-muted)}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-muted)}
.empty-icon{font-size:2.5rem;margin-bottom:10px}
.empty-state p{font-size:.88rem;line-height:1.6}

/* ── Profile ── */
.profile-header{text-align:center;padding:20px 16px 14px;background:linear-gradient(180deg,rgba(125,30,160,.15),transparent)}
.profile-name{font-size:1.15rem;font-weight:800;margin-top:10px}
.profile-handle{font-size:.8rem;color:var(--purple-light);margin-top:2px}
.profile-bio{font-size:.85rem;color:var(--text-secondary);margin-top:8px;line-height:1.5}
.profile-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px}

/* ── Activity Graph ── */
.activity-graph{display:flex;align-items:flex-end;gap:2px;height:48px;padding:4px 0;overflow-x:auto;scrollbar-width:none}
.activity-graph::-webkit-scrollbar{display:none}
.ag-bar{
  flex-shrink:0;
  width:10px;
  border-radius:3px 3px 0 0;
  transition:height .4s ease;
  cursor:pointer;
  position:relative;
}
.ag-bar:hover::after{
  content:attr(data-tip);
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.85);color:#fff;
  font-size:.6rem;padding:2px 5px;border-radius:3px;white-space:nowrap;
  pointer-events:none;
}
.ag-bar.active{background:var(--lime)}
.ag-bar.inactive{background:rgba(125,30,160,.3)}
.ag-bar.miss{background:rgba(255,68,102,.25)}

/* ── Messages ── */
.msg-bubble{display:flex;align-items:flex-end;gap:6px;margin-bottom:8px}
.msg-bubble.mine{flex-direction:row-reverse}
.msg-text{padding:8px 12px;border-radius:16px;font-size:.88rem;line-height:1.45;max-width:75%;word-break:break-word}
.msg-bubble.mine .msg-text{background:var(--purple);color:#fff;border-bottom-right-radius:4px}
.msg-bubble.theirs .msg-text{background:rgba(255,255,255,.09);border:1px solid var(--card-border);border-bottom-left-radius:4px}
.msg-time{font-size:.62rem;color:var(--text-muted);margin-top:3px}

/* ── TTT ── */
.ttt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:260px;margin:0 auto}
.ttt-cell{aspect-ratio:1;background:rgba(125,30,160,.12);border:2px solid var(--card-border);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;cursor:pointer;transition:var(--transition);transform:none!important}
.ttt-cell.your-turn:hover{background:rgba(125,30,160,.3);border-color:var(--purple-light)}

/* ── Leaderboard ── */
.lb-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--card-border)}
.lb-row:last-child{border-bottom:none}
.lb-rank{width:28px;text-align:center;font-weight:800;font-size:.85rem;color:var(--text-muted)}
.lb-rank.gold{color:#ffd700}.lb-rank.silver{color:#c0c0c0}.lb-rank.bronze{color:#cd7f32}
.lb-info{flex:1;overflow:hidden}
.lb-name{font-weight:700;font-size:.88rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-sub{font-size:.7rem;color:var(--text-muted)}
.lb-score{font-weight:800;font-size:.88rem;color:var(--lime);white-space:nowrap}

/* ── Gifts ── */
.gift-wall{display:flex;flex-wrap:wrap;gap:8px;padding:12px}
.gift-wall-item{position:relative;font-size:1.6rem;cursor:default}
.gift-wall-tip{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--dark-3);border:1px solid var(--card-border);border-radius:6px;padding:3px 8px;font-size:.65rem;white-space:nowrap;z-index:10}
.gift-wall-item:hover .gift-wall-tip{display:block}

/* ── Zoo card ── */
.zoo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.zoo-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:10px 8px;text-align:center;position:relative}
.zoo-card-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;margin:0 auto 6px}
.zoo-card-name{font-size:.78rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zoo-card-handle{font-size:.65rem;color:var(--text-muted);margin-bottom:4px}
.zoo-card-price{font-size:.82rem;font-weight:800;color:var(--lime);margin-bottom:4px}
.hot-badge{display:inline-block;background:linear-gradient(90deg,var(--danger),#ff8800);color:#fff;font-size:.55rem;font-weight:800;padding:2px 6px;border-radius:50px}

/* ── FrndZoo Live Buy Ticker ── */
.zoo-buy-ticker{
  background:rgba(0,255,136,.05);
  border:1px solid rgba(0,255,136,.2);
  border-radius:10px;
  padding:8px 12px;
  margin-bottom:10px;
  overflow:hidden;
  max-height:120px;
  overflow-y:auto;
  scrollbar-width:none;
}
.zoo-buy-ticker::-webkit-scrollbar{display:none}
.zoo-tick-item{
  display:flex;align-items:center;gap:6px;
  font-size:.72rem;color:var(--text-secondary);
  padding:3px 0;
  border-bottom:1px solid rgba(125,30,160,.1);
  animation:tickSlide .3s ease;
}
.zoo-tick-item:last-child{border-bottom:none}
@keyframes tickSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.zoo-tick-item.new{color:var(--online)}
.zoo-tick-live{display:inline-block;width:5px;height:5px;background:var(--online);border-radius:50%;margin-right:2px;animation:livePulse 1.4s ease infinite}

/* ── Price chart ── */
.price-chart{display:flex;align-items:flex-end;gap:3px;height:80px;padding:4px 0}
.price-bar{background:linear-gradient(180deg,var(--lime),var(--purple));border-radius:3px 3px 0 0;min-width:8px;transition:height .3s}

/* ── Tabs ── */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--card-border);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{flex-shrink:0;padding:9px 16px;font-size:.8rem;font-weight:700;color:var(--text-muted);cursor:pointer;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:var(--transition);white-space:nowrap;transform:none!important;touch-action:manipulation}
.tab-btn.active{color:var(--lime);border-bottom-color:var(--lime)}
.tab-panel{display:none}.tab-panel.active{display:block}

/* ── Pagination ── */
.pagination{display:flex;align-items:center;gap:8px;justify-content:center;padding:14px 0;flex-wrap:wrap}
.pagination a{padding:6px 12px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;font-size:.82rem;transition:var(--transition)}
.pagination a:hover{border-color:var(--purple-light)}
.pagination .current{font-weight:700;color:var(--lime);font-size:.85rem}

/* ── Modals ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:3000;display:none;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--dark-3);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:20px;width:100%;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.8),var(--shadow-glow);animation:slideUp .25s ease;max-height:80vh;overflow-y:auto}
@keyframes slideUp{from{opacity:0.15;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.modal-title{font-family:'Orbitron',sans-serif;font-size:.95rem;font-weight:700;margin-bottom:16px;color:var(--text-primary)}

/* ── Tasks Popup ── */
.task-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-bottom:1px solid rgba(125,30,160,.1);
}
.task-item:last-child{border-bottom:none}
.task-check{width:20px;height:20px;border-radius:50%;border:2px solid;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.7rem}
.task-check.done{border-color:var(--online);background:rgba(0,255,136,.1);color:var(--online)}
.task-check.todo{border-color:var(--card-border);color:transparent}
.task-info{flex:1}
.task-name{font-size:.82rem;font-weight:600;color:var(--text-primary)}
.task-xp{font-size:.68rem;color:var(--lime)}

/* ── User list (followers/following modal) ── */
.user-list-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--card-border)}
.user-list-item:last-child{border-bottom:none}

/* ── Packages ── */
.packages-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.package-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:14px;text-align:center;transition:var(--transition);position:relative}
.package-card.popular{border-color:var(--lime);box-shadow:0 0 16px rgba(203,255,0,.15)}
.popular-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--lime);color:#0a0010;font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:50px;white-space:nowrap}
.pkg-name{font-weight:700;font-size:.88rem;margin-bottom:4px}
.pkg-amount{font-size:1.5rem;font-weight:900;color:var(--lime);margin-bottom:2px}
.pkg-bonus{font-size:.72rem;color:var(--success);margin-bottom:4px}
.pkg-price{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:10px}

/* ── Admin ── */
.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.admin-stat-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:14px;text-align:center}
.admin-stat-value{font-size:1.5rem;font-weight:900;color:var(--accent)}
.admin-stat-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-top:3px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--card-border)}
.data-table{width:100%;min-width:500px;border-collapse:collapse;font-size:.82rem}
.data-table th{background:rgba(125,30,160,.2);padding:8px 10px;text-align:left;font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--card-border)}
.data-table td{padding:8px 10px;border-bottom:1px solid rgba(125,30,160,.1);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:rgba(125,30,160,.06)}

/* ── Phases ── */
.phase-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:50px;font-size:.72rem;font-weight:700}
.phase1{background:rgba(0,221,136,.1);border:1px solid rgba(0,221,136,.3);color:var(--success)}
.phase2{background:rgba(255,68,102,.08);border:1px solid rgba(255,68,102,.25);color:var(--danger)}

/* ── Transaction ── */
.tx-credit{color:var(--success);font-weight:700}
.tx-debit{color:var(--danger);font-weight:700}

/* ── Search ── */
.search-result-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--card-border);text-decoration:none;color:inherit;transition:var(--transition)}
.search-result-item:hover{background:rgba(125,30,160,.1)}

/* ── Notifications ── */
.notif-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--card-border);transition:var(--transition)}
.notif-item.unread{background:rgba(125,30,160,.08)}
.notif-icon{font-size:1.3rem;flex-shrink:0}
.notif-body{flex:1;overflow:hidden}
.notif-title{font-weight:700;font-size:.85rem}
.notif-msg{font-size:.75rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Chatroom specifics ── */
.room-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;padding:12px;margin-bottom:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:10px}
.room-card:hover{border-color:var(--purple-light)}
.room-emoji-box{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--purple-dark),var(--purple));display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.live-pip{display:inline-block;width:6px;height:6px;background:var(--online);border-radius:50%;animation:livePulse 1.4s ease infinite;vertical-align:middle;margin-right:3px}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Hall of Fame ── */
.hall-section{margin-bottom:20px}
.hall-counter{font-size:1.1rem;font-weight:800;color:var(--lime)}

/* ── Reseller ── */
.reseller-code{font-family:monospace;font-size:1.1rem;font-weight:700;letter-spacing:.1em;color:var(--lime);background:rgba(203,255,0,.08);border:1px solid rgba(203,255,0,.2);padding:6px 14px;border-radius:8px;display:inline-block}

/* ── Spin wheel ── */
.spin-container{text-align:center;padding:0 0 8px}
.spin-wrap{position:relative;width:260px;height:260px;margin:0 auto 12px}
.spin-pointer{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:1.4rem;z-index:10;color:var(--lime)}
.spin-econ{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.spin-pip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:50px;font-size:.74rem;font-weight:700}
.spin-pip.free{background:rgba(203,255,0,.12);border:1px solid var(--lime);color:var(--lime)}
.spin-pip.extra{background:rgba(125,30,160,.2);border:1px solid var(--purple);color:var(--purple-light)}
.time-777{font-size:2rem;font-weight:900;color:var(--accent);letter-spacing:.1em;text-align:center;font-variant-numeric:tabular-nums}

/* ── Snake & Ladder Board ── */
.snl-board-wrap{width:min(340px,95vw);margin:0 auto;border-radius:8px;overflow:hidden;border:3px solid #333;box-shadow:0 4px 20px rgba(0,0,0,.6)}
.snl-real-board{display:grid;grid-template-columns:repeat(10,1fr);width:100%;aspect-ratio:1}
.snl-sq{
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(.4rem,1.1vw,.52rem);font-weight:700;
  position:relative;border:1px solid rgba(0,0,0,.15);
  aspect-ratio:1;
}
.snl-sq span.sq-num{position:absolute;top:1px;left:2px;font-size:clamp(.35rem,.9vw,.46rem);opacity:.85;z-index:1}
.snl-sq .piece-me{position:absolute;bottom:1px;right:1px;font-size:clamp(.6rem,1.5vw,.8rem);z-index:3;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.snl-sq .piece-opp{position:absolute;top:1px;right:1px;font-size:clamp(.6rem,1.5vw,.8rem);z-index:3;filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
/* Board colors matching screenshot */
.snl-sq.red{background:#e63946}
.snl-sq.blue{background:#457b9d}
.snl-sq.yellow{background:#f4d35e}
.snl-sq.green{background:#2d9e5a}
.snl-sq.white{background:#f1f1e6}
.snl-sq.cyan{background:#48cae4}
.snl-sq.orange{background:#f77f00}
.snl-sq.pink{background:#e07a9f}
/* Snake/Ladder overlays */
.snl-has-snake::after,.snl-has-ladder::after{
  content:'';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1em;z-index:2;
  pointer-events:none;
}
.snl-has-snake{outline:2px inset rgba(255,50,50,.6)}
.snl-has-ladder{outline:2px inset rgba(50,200,100,.6)}
.snl-emoji{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(.7rem,2vw,1rem);z-index:2;pointer-events:none}
.snl-info{text-align:center;margin-bottom:8px}
.dice-big{font-size:3rem;text-align:center;min-height:56px;animation:dBounce .35s ease}
@keyframes dBounce{0%{transform:scale(.5) rotate(-15deg)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ── Games ── */
.g-tabs{display:flex;gap:0;border-bottom:2px solid var(--card-border);margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.g-tab{flex-shrink:0;padding:10px 16px;font-size:.82rem;font-weight:700;color:var(--text-muted);cursor:pointer;border:none;background:none;border-bottom:3px solid transparent;margin-bottom:-2px;transition:.15s;white-space:nowrap;transform:none!important;touch-action:manipulation}
.g-tab.active{color:var(--lime);border-bottom-color:var(--lime)}
.g-tab:hover:not(.active){color:var(--text-primary)}
.challenge-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:20px;text-align:center;max-width:380px;margin:0 auto}
.result-win{padding:12px 20px;border-radius:10px;background:rgba(0,255,136,.1);border:1px solid var(--online);color:var(--online);font-weight:900;text-align:center;margin-bottom:12px}
.result-lose{padding:12px 20px;border-radius:10px;background:rgba(255,68,102,.1);border:1px solid var(--danger);color:var(--danger);font-weight:900;text-align:center;margin-bottom:12px}
.chess-board{display:grid;grid-template-columns:repeat(8,1fr);width:min(300px,88vw);height:min(300px,88vw);margin:0 auto;border:2px solid var(--purple);border-radius:4px;overflow:hidden}
.chess-sq{display:flex;align-items:center;justify-content:center;font-size:clamp(1rem,3.5vw,1.6rem);cursor:pointer;user-select:none;transform:none!important}
.chess-sq.light{background:#2a1a4a}.chess-sq.dark{background:#1a0a2a}
.chess-sq.selected{background:rgba(203,255,0,.35)!important}.chess-sq.valid-move{background:rgba(0,255,136,.2)!important}

/* ── Chatroom full-screen ── */
#room-screen{
  position:fixed;top:0;bottom:0;left:0;right:0;
  z-index:5000;display:none;flex-direction:column;overflow:hidden;
}
/* On desktop: constrain to app-shell width, centered */
@media(min-width:520px){
  #room-screen{
    left:50% !important;
    right:auto !important;
    width:var(--app-w) !important;
    /* transform is SAFE here — room-screen has no position:fixed children */
    transform:translateX(-50%) !important;
  }
}
#room-screen.on{display:flex}
.rs-hero{background:linear-gradient(180deg,#1a003a 0%,#0d001f 100%);flex-shrink:0;padding:10px 14px 0}
.rs-topbar{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rs-topbar-title{flex:1;text-align:center;overflow:hidden}
.rs-back-btn{background:rgba(255,255,255,.08);border:none;color:var(--text-primary);cursor:pointer;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;transition:.15s;transform:none!important}
.rs-back-btn:hover{background:rgba(255,68,102,.25);color:var(--danger)}
.rs-seats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:4px 8px 10px;max-width:460px;margin:0 auto;width:100%}
.rs-seat{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:.15s}
.rs-seat:hover .rs-seat-av{transform:scale(1.05)}
.rs-seat-av{position:relative;width:60px;height:60px}
.rs-seat-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid rgba(125,30,160,.4);transition:border-color .2s}
.rs-seat-av.speaking img{border-color:var(--online);box-shadow:0 0 14px rgba(0,255,136,.5)}
.rs-seat-av.mine img{border-color:var(--lime)}
.rs-crown{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:.75rem;z-index:1}
.rs-mic-dot{position:absolute;bottom:-2px;right:-2px;width:18px;height:18px;border-radius:50%;border:2px solid #0d001f;display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:700}
.rs-mic-dot.on{background:var(--online);color:#000}
.rs-mic-dot.off{background:var(--danger);color:#fff}
.rs-seat-name{font-size:.6rem;color:var(--text-secondary);text-align:center;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-empty-seat{width:60px;height:60px;border-radius:50%;border:2px dashed rgba(125,30,160,.3);display:flex;align-items:center;justify-content:center;color:rgba(125,30,160,.4);font-size:1.1rem;background:rgba(125,30,160,.05)}
.rs-meta-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;background:rgba(0,0,0,.3);flex-shrink:0;font-size:.72rem;color:var(--text-muted);border-top:1px solid rgba(125,30,160,.15)}
.rs-chat-area{flex:1;display:flex;flex-direction:column;background:#0a0018;min-height:0;overflow:hidden}
#rs-msgs{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.rs-msg{display:flex;align-items:flex-end;gap:6px}
.rs-msg.mine{flex-direction:row-reverse}
.rs-bub{max-width:72%;padding:7px 12px;border-radius:18px;font-size:.82rem;line-height:1.45;word-break:break-word}
.rs-msg.mine .rs-bub{background:var(--purple);color:#fff;border-bottom-right-radius:3px}
.rs-msg.theirs .rs-bub{background:rgba(255,255,255,.09);border:1px solid rgba(125,30,160,.2);color:var(--text-primary);border-bottom-left-radius:3px}
.rs-sys{text-align:center;font-size:.67rem;color:rgba(125,30,160,.55);padding:2px 0;font-style:italic}
.rs-btm-tabs{display:flex;border-top:1px solid rgba(125,30,160,.2);background:rgba(0,0,0,.5);flex-shrink:0}
.rs-btm-tab{flex:1;padding:8px 4px;font-size:.7rem;font-weight:600;color:var(--text-muted);cursor:pointer;text-align:center;border-bottom:2px solid transparent;background:none;border-left:none;border-right:none;border-top:none;transition:.15s;transform:none!important;touch-action:manipulation}
.rs-btm-tab.active{color:var(--lime);border-bottom-color:var(--lime)}
.rs-panel{display:none;flex-shrink:0}
.rs-panel.active{display:block}
.rs-gift-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:10px 12px 12px}
.rs-g-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 5px;border-radius:10px;background:rgba(125,30,160,.12);border:1px solid rgba(125,30,160,.22);cursor:pointer;transition:.15s;transform:none!important;touch-action:manipulation}
.rs-g-btn:hover{background:rgba(125,30,160,.32);border-color:var(--purple-light)}
.rs-g-btn .ge{font-size:1.3rem}
.rs-g-btn .gc{font-size:.58rem;color:var(--lime);font-weight:700}
.rs-emoji-grid{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 12px}
.rs-emoji-btn{font-size:1.4rem;cursor:pointer;padding:3px;border-radius:6px;transition:.15s;background:none;border:none;transform:none!important;touch-action:manipulation}
.rs-emoji-btn:hover{background:rgba(125,30,160,.2)}
.rs-invite-wrap{padding:12px 14px;overflow-y:auto;max-height:200px}
.rs-inputbar{display:flex;align-items:center;gap:7px;padding:8px 12px;border-top:1px solid rgba(125,30,160,.15);background:rgba(0,0,0,.55);flex-shrink:0}
.rs-input{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(125,30,160,.3);border-radius:22px;padding:9px 14px;color:var(--text-primary);font-size:.84rem;outline:none;transition:.2s;font-family:inherit}
.rs-input:focus{border-color:var(--purple-light)}
.rs-send{width:38px;height:38px;border-radius:50%;background:var(--purple);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s;transform:none!important}
.rs-send:hover{background:var(--purple-light)}
.gfly{position:fixed;pointer-events:none;z-index:9999;font-size:2.8rem;animation:gfly 1.9s ease-in-out forwards}
@keyframes gfly{0%{opacity:1;transform:translateY(0) scale(1)}60%{opacity:1;transform:translateY(-200px) scale(1.5)}100%{opacity:0;transform:translateY(-340px) scale(.7)}}
.rs-mic-toggle{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:50px;border:2px solid;cursor:pointer;font-weight:700;font-size:.82rem;transition:.25s;flex-shrink:0;transform:none!important;touch-action:manipulation}
.rs-mic-toggle.off{background:rgba(125,30,160,.2);border-color:var(--purple);color:var(--text-primary)}
.rs-mic-toggle.on{background:rgba(255,68,102,.15);border-color:var(--danger);color:var(--danger);animation:micPulse 1.2s ease infinite}
.rs-mic-toggle.live{background:rgba(0,255,136,.15);border-color:var(--online);color:var(--online);animation:micPulse 1.2s ease infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,.4)}50%{box-shadow:0 0 0 8px rgba(0,255,136,0)}}
.rs-gift-target{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 8px;border-radius:10px;border:2px solid rgba(125,30,160,.2);background:rgba(125,30,160,.08);cursor:pointer;transition:.15s;flex-shrink:0;transform:none!important}
.rs-gift-target.selected{border-color:var(--lime);background:rgba(203,255,0,.1)}
.rs-gift-target img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.rs-gift-target span{font-size:.6rem;color:var(--text-muted);white-space:nowrap;max-width:48px;overflow:hidden;text-overflow:ellipsis}
.rs-invite-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(125,30,160,.1)}
.rs-invite-row:last-child{border-bottom:none}

/* ── Zoo Swipe Cards ── */
#swipe-deck{position:relative;height:480px;margin:10px auto 0;max-width:320px}
.sc{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;overflow:hidden;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s;box-shadow:0 14px 50px rgba(0,0,0,.6),var(--shadow-glow);display:flex;flex-direction:column;box-sizing:border-box}
.sc.d1{transform:scale(.94) translateY(12px);z-index:1;filter:brightness(.7)}
.sc.d2{transform:scale(.88) translateY(24px);z-index:0;filter:brightness(.5)}
.sc.fly-r{transform:translateX(140%) rotate(20deg)!important;opacity:0!important;transition:transform .38s ease,opacity .28s ease}
.sc.fly-l{transform:translateX(-140%) rotate(-20deg)!important;opacity:0!important;transition:transform .38s ease,opacity .28s ease}
.sc-photo{width:100%;height:200px;object-fit:cover;flex-shrink:0;display:block;background:linear-gradient(135deg,#1a0040,#0a0018)}
.sc-body{padding:10px 14px 12px;flex:1;display:flex;flex-direction:column;min-height:0}
.sc-username{font-size:.95rem;font-weight:800;color:var(--text-primary);text-align:center;margin-bottom:1px}
.sc-handle{font-size:.74rem;color:var(--purple-light);text-align:center;margin-bottom:7px}
.sc-owner-row{display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 12px;background:rgba(0,0,0,.2);border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border);margin-bottom:7px;flex-shrink:0}
.sc-owner-av{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid var(--purple)}
.sc-hot{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(90deg,var(--danger),#ff8800);color:#fff;font-size:.6rem;font-weight:800;padding:2px 8px;border-radius:50px;margin-left:5px;animation:hotPulse .7s ease infinite alternate;vertical-align:middle}
@keyframes hotPulse{from{box-shadow:0 0 4px #ff4466}to{box-shadow:0 0 12px #ff8800}}
.sc-actions{display:flex;gap:7px;padding:6px 0 0;flex-shrink:0}
.sc-actions .btn{flex:1;font-size:.78rem;font-weight:700;padding:9px 6px;transform:none!important}
.sc-stats{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border);margin-bottom:7px;flex-shrink:0}
.sc-stat{padding:6px 4px;text-align:center;border-right:1px solid var(--card-border)}
.sc-stat:last-child{border-right:none}
.sc-sv{font-size:.88rem;font-weight:800;color:var(--lime)}
.sc-sl{font-size:.56rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-top:1px}
.deck-controls{display:flex;justify-content:center;gap:16px;margin-top:8px}
.deck-ctrl-btn{width:52px;height:52px;border-radius:50%;border:2px solid;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.3rem;transition:.2s;background:transparent;transform:none!important;touch-action:manipulation}
.deck-ctrl-btn.skip-btn{border-color:var(--danger);color:var(--danger)}
.deck-ctrl-btn.skip-btn:hover{background:rgba(255,68,102,.15)}
.deck-ctrl-btn.buy-btn{border-color:var(--online);color:var(--online)}
.deck-ctrl-btn.buy-btn:hover{background:rgba(0,255,136,.15)}
.buy-ticker{text-align:center;margin-top:5px;font-size:.7rem;color:var(--text-muted)}
.buy-ticker b{color:var(--lime)}
.swipe-hint-overlay{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:10;padding:7px 16px;border-radius:12px;font-weight:900;font-size:1.1rem;opacity:0;transition:opacity .1s;white-space:nowrap}
.swipe-hint-overlay.buy{background:rgba(0,255,136,.25);border:2px solid var(--online);color:var(--online)}
.swipe-hint-overlay.skip{background:rgba(255,68,102,.2);border:2px solid var(--danger);color:var(--danger)}

/* ── Jackpot ── */
.jackpot-banner{padding:14px 20px;border-radius:12px;font-weight:900;font-size:1.2rem;text-align:center;background:linear-gradient(135deg,rgba(203,255,0,.2),rgba(125,30,160,.3));border:2px solid var(--lime);color:var(--lime);animation:jackpotPulse 1s ease infinite}
@keyframes jackpotPulse{0%,100%{box-shadow:0 0 20px rgba(203,255,0,.3)}50%{box-shadow:0 0 40px rgba(203,255,0,.6)}}

/* ── Page transitions ── */
.page-enter{animation:pageIn .25s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Small screen fine-tuning ── */
@media(max-width:360px){
  .stat-value{font-size:.9rem}
  .zoo-grid{grid-template-columns:repeat(2,1fr)}
  .btn{font-size:.8rem;padding:9px 14px}
  .nav-search{display:none} /* hide search on tiny screens - avatar stays visible */
  .nav-logo .logo-badge{display:none}
}
@media(max-width:400px){
  .nav-search input{font-size:.75rem}
  .nav-qp .qp-label{display:none}
  .nav-qp{padding:4px 7px;gap:3px}
}

/* ── Messages app-level styles ── */
.msg-app{
  display:flex;flex-direction:column;
  height:calc(100vh - var(--nav-h) - var(--bnav-h));
  overflow:hidden;
}
.inbox-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--card-border);flex-shrink:0}
.inbox-search{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--card-border);flex-shrink:0}
.inbox-search input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--card-border);border-radius:50px;padding:7px 14px;color:var(--text-primary);font-size:.84rem;outline:none}
.inbox-list{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.inbox-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--card-border);cursor:pointer;transition:background .15s;text-decoration:none;color:inherit}
.inbox-row:hover{background:rgba(125,30,160,.08)}
.inbox-row.unread{background:rgba(125,30,160,.06)}
.inbox-row.unread .inbox-preview{color:var(--text-primary);font-weight:600}
.inbox-avatar-wrap{position:relative;flex-shrink:0}
.inbox-name{font-weight:700;font-size:.9rem;color:var(--text-primary);margin-bottom:2px}
.inbox-preview{font-size:.78rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.inbox-time{font-size:.65rem;color:var(--text-muted);white-space:nowrap}
.inbox-unread-badge{background:var(--purple);color:#fff;font-size:.6rem;font-weight:800;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:4px;flex-shrink:0}

/* Thread */
.thread-wrap{display:flex;flex-direction:column;height:100%;overflow:hidden}
.thread-header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(125,30,160,.12);border-bottom:1px solid var(--card-border);flex-shrink:0}
.thread-back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);border:none;border-radius:50%;cursor:pointer;color:var(--text-primary);font-size:1.1rem;flex-shrink:0;text-decoration:none}
.thread-msgs{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.thread-input-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--card-border);background:rgba(0,0,0,.4);flex-shrink:0}
.thread-inp{flex:1;background:rgba(255,255,255,.07);border:1px solid var(--card-border);border-radius:24px;padding:10px 16px;color:var(--text-primary);font-size:.88rem;outline:none;font-family:inherit;transition:.2s}
.thread-inp:focus{border-color:var(--purple-light);background:rgba(125,30,160,.1)}
.thread-send{width:40px;height:40px;border-radius:50%;background:var(--purple);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s;transform:none!important}
.thread-send:hover{background:var(--purple-light)}

/* Message bubbles - different shapes for mine vs theirs */
.mb{display:flex;align-items:flex-end;gap:6px;margin-bottom:2px}
.mb.mine{flex-direction:row-reverse}
.mb-body{max-width:72%;word-break:break-word}
.mb-text{padding:9px 14px;font-size:.88rem;line-height:1.45;display:inline-block;max-width:100%;word-break:break-word}
.mb.mine .mb-text{background:linear-gradient(135deg,var(--purple),#9d24c7);color:#fff;border-radius:18px 4px 18px 18px}
.mb.theirs .mb-text{background:rgba(255,255,255,.09);border:1px solid rgba(125,30,160,.25);color:var(--text-primary);border-radius:4px 18px 18px 18px}
.mb-time{font-size:.6rem;color:var(--text-muted);margin-top:3px;padding:0 4px}
.mb.mine .mb-time{text-align:right}
.mb-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-bottom:2px}
.msg-date-sep{text-align:center;font-size:.65rem;color:var(--text-muted);margin:8px 0;position:relative}
.msg-date-sep::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--card-border)}
.msg-date-sep span{background:#0a0018;padding:0 10px;position:relative;z-index:1}

/* ── New Joiners widget ── */
.joiners-widget{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;cursor:pointer;transition:border-color .2s}
.joiners-widget:hover{border-color:var(--purple-light)}
.joiners-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.joiner-stat{text-align:center;padding:8px 4px;background:rgba(125,30,160,.08);border-radius:8px}
.joiner-num{font-size:1.2rem;font-weight:900;color:var(--lime)}
.joiner-lbl{font-size:.6rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}

/* ── Custom country dropdown ── */
#country-drop{border-radius:10px}
#country-list div:last-child{border-bottom:none}

/* ── Cross-Browser Fixes ── */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific */
  .main-content { height: -webkit-fill-available; }
  #app-shell { height: -webkit-fill-available; }
}
/* Firefox scrollbar styling */
* { scrollbar-width: thin; scrollbar-color: rgba(125,30,160,.3) transparent; }
/* Edge/IE button fix */
button { -ms-touch-action: manipulation; }
/* Prevent text size inflation on rotation */
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

/* ── Pyrite (Bigo Beans equivalent) ── */
.pyrite-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(251,146,60,.1);
  border:1px solid rgba(251,146,60,.3);
  border-radius:50px;padding:3px 10px;
  font-size:.72rem;font-weight:700;color:#fb923c;
}
.pyrite-icon{color:#fb923c}
.pyrite-val{color:#fb923c;font-weight:800}
/* Top contributor card */
.contributor-card{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  border-bottom:1px solid var(--card-border);
  transition:.15s;
}
.contributor-card:hover{background:rgba(251,146,60,.05)}
.contributor-card:last-child{border-bottom:none}
.contributor-rank{
  width:28px;text-align:center;font-weight:900;flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════
   VIP BADGE SYSTEM — Bigo Live Style 3D Animated Badges
   ═══════════════════════════════════════════════════════ */

/* Base badge chip */
.vip-badge-chip{
  display:inline-flex;align-items:center;gap:4px;
  border-radius:50px;font-weight:900;letter-spacing:.3px;
  color:#fff;position:relative;overflow:hidden;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.2);
  cursor:default;white-space:nowrap;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* Shimmer overlay on all badges */
.vip-badge-chip::before{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  animation:badgeShimmer 3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes badgeShimmer{0%,100%{left:-100%}50%{left:150%}}

/* VIP tier styles */
.vip-badge-vip{border:1px solid rgba(255,255,255,.3)}
.vip-badge-svip{border:1px solid rgba(255,255,255,.5)}
.vip-badge-svip::after{
  content:'';position:absolute;inset:-1px;
  border-radius:50px;
  background:linear-gradient(90deg,#06b6d4,#7c3aed,#06b6d4);
  background-size:200%;
  animation:svipBorder 2s linear infinite;
  z-index:-1;
}
@keyframes svipBorder{0%{background-position:0%}100%{background-position:200%}}

.vip-badge-legend{border:2px solid #fbbf24;text-shadow:0 0 8px #fbbf24}
.vip-badge-legend::after{
  content:'';position:absolute;inset:-2px;
  border-radius:50px;
  background:conic-gradient(#fbbf24,#f59e0b,#ef4444,#a855f7,#06b6d4,#fbbf24);
  background-size:200%;
  animation:legendBorder 1.5s linear infinite;
  z-index:-1;
  filter:blur(2px);
}
@keyframes legendBorder{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Keyframe animations */
@keyframes vipBadgeGlow{
  0%,100%{box-shadow:0 0 8px currentColor}
  50%{box-shadow:0 0 20px currentColor,0 0 40px currentColor}
}
@keyframes svipBadgeShimmer{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.3) saturate(1.2)}
}
@keyframes legendBadgePulse{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.05);filter:brightness(1.4)}
}

/* ── VIP Frame/Aura on avatars ── */
.vip-frame{position:relative;display:inline-block;padding:4px;background:transparent}
.vip-frame img{position:relative;z-index:1;border-radius:50%!important}
.vip-frame .avatar{position:relative;z-index:1}
.vip-frame::before{
  content:'';position:absolute;inset:-3px;
  border-radius:50%;z-index:0;
  animation:frameRotate 3s linear infinite;
}
.vip-frame.tier-vip::before{background:conic-gradient(var(--vf-from,#7c3aed),var(--vf-to,#a855f7),var(--vf-from,#7c3aed))}
.vip-frame.tier-svip::before{
  background:conic-gradient(#06b6d4,#7c3aed,#ec4899,#fbbf24,#06b6d4);
  animation:frameRotate 2s linear infinite;
}
.vip-frame.tier-legend::before{
  background:conic-gradient(#fbbf24,#ef4444,#a855f7,#06b6d4,#10b981,#fbbf24);
  animation:frameRotate 1.5s linear infinite;
  inset:-5px;
  filter:blur(1px);
}
.vip-frame.tier-legend::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;z-index:0;
  background:conic-gradient(#fbbf24,#ef4444,#a855f7,#06b6d4,#10b981,#fbbf24);
  animation:frameRotate 1.5s linear infinite reverse;
  filter:blur(3px);opacity:.6;
}
@keyframes frameRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* VIP aura glow under avatar */
.vip-aura{
  position:absolute;inset:-8px;border-radius:50%;z-index:0;
  animation:auraPulse 2s ease-in-out infinite;
  pointer-events:none;
}
.vip-aura.tier-svip{background:radial-gradient(circle,rgba(6,182,212,.4),transparent 70%)}
.vip-aura.tier-legend{background:radial-gradient(circle,rgba(251,191,36,.5),transparent 65%)}
@keyframes auraPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}

/* ── Badge shop cards ── */
.badge-shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.badge-shop-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;padding:14px;
  text-align:center;position:relative;
  overflow:hidden;transition:.2s;
  cursor:pointer;
}
.badge-shop-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.badge-shop-card.owned{border-color:var(--online);background:rgba(0,255,136,.05)}
.badge-shop-card.active-now{border-width:2px}
.badge-shop-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--b-from,#7c3aed),var(--b-to,#a855f7));
}
.badge-shop-icon{font-size:2.2rem;margin-bottom:6px;display:block}
.badge-shop-name{font-size:.82rem;font-weight:800;color:var(--text-primary);margin-bottom:4px}
.badge-shop-price{font-size:.78rem;font-weight:700;color:var(--lime)}
.badge-shop-dur{font-size:.62rem;color:var(--text-muted);margin-top:2px}
.badge-shop-perks{font-size:.6rem;color:var(--text-muted);margin-top:5px;line-height:1.5}
.badge-tier-label{
  position:absolute;top:8px;right:8px;
  font-size:.55rem;font-weight:900;letter-spacing:.5px;
  padding:2px 6px;border-radius:4px;text-transform:uppercase;
}
.badge-tier-vip{background:rgba(139,92,246,.3);color:#c4b5fd}
.badge-tier-svip{background:rgba(6,182,212,.3);color:#67e8f9}
.badge-tier-legend{background:rgba(251,191,36,.3);color:#fde68a}

/* Profile avatar wrapper */
.profile-av-wrap{display:inline-block;position:relative}
/* ═══════════════════════════════════════════════════════════════════
   QeepX — main_additions.css
   ADD THIS TO THE BOTTOM OF main.css
   Keeps existing purple/lime theme — adds speed, Pyramid Pyrite,
   explore nav, ad card style, faster animations
   ═══════════════════════════════════════════════════════════════════ */

/* ── Pyramid Pyrite currency symbol ─────────────────────────────── */
.pyrite { color: #fbbf24; font-weight: 800 }
.pyrite::before { content: '▲'; font-size: .75em; margin-right: 2px; color: #f59e0b }
.pyrite-widget {
  background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
  border: 1px solid rgba(245,158,11,.35);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
}
.pyrite-widget .pw-icon { font-size: 1.4rem }
.pyrite-widget .pw-val { font-size: 1rem; font-weight: 800; color: #fbbf24 }
.pyrite-widget .pw-label { font-size: .68rem; color: rgba(255,255,255,.5) }

/* ── Micro-typography refinements ───────────────────────────────── */
body { letter-spacing: -.01em }
.card, .room-card, .compose-box { font-size: .875rem }
.page-title { font-size: 1.12rem; letter-spacing: -.025em }
p { font-size: .875rem; line-height: 1.6 }

/* ── Faster, tighter animations (BIGO feel) ─────────────────────── */
/* Override existing slow transitions with snappier ones */
.btn { transition: transform .08s ease, box-shadow .1s ease, background .1s ease !important }
.btn:active { transform: scale(.96) !important }
.card { transition: border-color .12s, box-shadow .12s }
.room-card { transition: all .15s cubic-bezier(.4,0,.2,1) }
.avatar { transition: transform .12s ease }
.avatar:hover { transform: scale(1.06) }
.fz-tab, .explore-tab, .rs-tier-tab { transition: all .1s ease }

/* Room slide-up entry — faster than before */
@keyframes roomSlideUp {
  from { transform: translateY(60px); opacity: 0 }
  to   { transform: translateY(0);    opacity: 1 }
}
#room-screen.on { animation: roomSlideUp .22s cubic-bezier(.4,0,.2,1) forwards }

/* Gift fly animation — snappier */
@keyframes gfly {
  0%   { opacity:1; transform:translateY(0)    scale(1)   }
  50%  { opacity:1; transform:translateY(-160px) scale(1.4) }
  100% { opacity:0; transform:translateY(-300px) scale(.7)  }
}
.gfly { animation: gfly 1.4s ease-in-out forwards !important }

/* Toast slide in — quicker */
.toast {
  animation: toastIn .18s cubic-bezier(.4,0,.2,1) forwards !important;
}
@keyframes toastIn {
  from { transform: translateX(80px); opacity: 0 }
  to   { transform: translateX(0);    opacity: 1 }
}

/* ── Explore tab in bottom nav ──────────────────────────────────── */
/* Add this 5th item: explore */
.bnav-explore .bnav-icon { position: relative }
.bnav-explore .bnav-icon::after {
  content: '';
  position: absolute; top: -1px; right: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--online);
  box-shadow: 0 0 6px var(--online);
  animation: livePulse 2s ease infinite;
}

/* ── Ad cards (transparent labeled) ────────────────────────────── */
.ad-card {
  background: var(--card-bg);
  border: 1px solid rgba(203,255,0,.12);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.ad-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(203,255,0,.02) 0%, transparent 60%);
  pointer-events: none;
}
.ad-label {
  position: absolute; top: 8px; right: 10px;
  font-size: .57rem; color: var(--text-muted);
  background: rgba(255,255,255,.05);
  padding: 1px 7px; border-radius: 4px;
  letter-spacing: .6px; text-transform: uppercase;
}
.ad-card .ad-cta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 50px;
  background: var(--lime); color: #000;
  font-size: .78rem; font-weight: 800;
  margin-top: 8px;
}

/* ── Consent / popup modals ─────────────────────────────────────── */
.consent-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
}
.consent-sheet {
  background: #120025;
  border: 1px solid rgba(125,30,160,.4);
  border-radius: 20px 20px 0 0;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  max-width: 480px; width: 100%;
  animation: sheetUp .25s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes sheetUp {
  from { transform: translateY(100%) }
  to   { transform: translateY(0) }
}
.consent-sheet h2 { font-size: 1rem; font-weight: 800; margin-bottom: 10px }
.consent-sheet p  { font-size: .83rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px }
.consent-sheet .btn-full { margin-bottom: 8px }

/* ── Explore page distance badge ────────────────────────────────── */
.dist-badge {
  font-size: .65rem; color: var(--text-muted);
  background: rgba(255,255,255,.05);
  padding: 2px 8px; border-radius: 50px;
  white-space: nowrap; border: 1px solid rgba(255,255,255,.06);
}

/* ── AI suggestion chips ────────────────────────────────────────── */
.ai-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 50px;
  border: 1px solid rgba(125,30,160,.3);
  background: rgba(125,30,160,.08);
  font-size: .75rem; color: var(--text-secondary);
  cursor: pointer; transition: all .12s;
}
.ai-chip:hover {
  border-color: var(--purple-light);
  background: rgba(125,30,160,.2);
  color: var(--text-primary);
}
.ai-chip .ai-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); flex-shrink: 0;
}

/* ── Level progress bar improvement ─────────────────────────────── */
.xp-bar-wrap {
  height: 5px; background: rgba(255,255,255,.08);
  border-radius: 3px; overflow: hidden;
}
.xp-bar {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--purple), var(--lime));
  transition: width .5s ease;
}

/* ── Maintenance Robot badge (admin panel) ──────────────────────── */
.robot-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 50px;
  font-size: .7rem; font-weight: 700;
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.3);
  color: #22c55e;
}
.robot-badge.crit { background: rgba(255,68,102,.15); border-color: rgba(255,68,102,.3); color: var(--danger) }
.robot-badge.high { background: rgba(255,184,0,.1);   border-color: rgba(255,184,0,.3);   color: var(--warning) }

/* ── Card rarity indicators ─────────────────────────────────────── */
.card-rarity-legend  { border-color: rgba(255,184,0,.5);  box-shadow: 0 0 12px rgba(255,184,0,.2) }
.card-rarity-rare    { border-color: rgba(168,85,247,.6); box-shadow: 0 0 12px rgba(168,85,247,.25) }
.card-rarity-uncommon{ border-color: rgba(34,197,94,.4);  box-shadow: 0 0 8px rgba(34,197,94,.15) }
.card-rarity-common  { border-color: var(--card-border) }

/* ── Location pin pulse ─────────────────────────────────────────── */
@keyframes pinPulse {
  0%,100% { transform: scale(1);   opacity: 1   }
  50%      { transform: scale(1.3); opacity: .7  }
}
.loc-pin-live { animation: pinPulse 1.8s ease infinite }

/* ══════════════════════════════════════════════════════════════════
   QeepX UI/UX FIXES — Complete audit patch
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. SELECT / DROPDOWN FIX ──────────────────────────────────────
   Native Android/iOS select shows only emoji, strips text in some
   OS versions. Force custom appearance with proper contrast. */
select.form-control,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a855f7' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px !important;
  color: var(--text-primary) !important;
  background-color: rgba(22, 0, 38, 0.95) !important;
  border: 1px solid rgba(125, 30, 160, 0.45) !important;
  font-size: .88rem !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
}
/* Option text: force dark bg + light text so emoji+text both show */
select.form-control option,
select option {
  background-color: #160025;
  color: #f0e8ff;
  padding: 8px 12px;
  font-size: .88rem;
}
select.form-control:focus {
  border-color: var(--purple-light) !important;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

/* ── 2. SYSTEM MESSAGES — visible in chatroom ─────────────────────
   Was rgba(125,30,160,.6) — near-invisible purple on dark bg */
.rs-sys {
  text-align: center;
  font-size: .72rem;
  color: rgba(200, 180, 255, 0.75) !important;
  padding: 4px 8px;
  font-style: italic;
  background: rgba(125, 30, 160, 0.1);
  border-radius: 20px;
  margin: 2px auto;
  max-width: 85%;
  display: block;
}

/* ── 3. MESSAGE BUBBLES — font rendering ──────────────────────────
   Text content was rendering corrupted on some Android WebViews */
.rs-bub {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ── 4. MODAL OVERFLOW — all modals scroll properly ───────────────*/
.modal-box {
  max-height: 92vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ── 5. FORM INPUTS — better contrast and touch targets ───────────*/
.form-control {
  min-height: 44px; /* Apple minimum touch target */
  padding: 11px 14px;
  font-size: .9rem;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(125, 30, 160, 0.35);
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
}
.form-control:focus {
  border-color: var(--purple-light);
  background: rgba(125, 30, 160, 0.1);
  outline: none;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15);
}
.form-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: block;
}

/* ── 6. CARD BORDERS — better visibility on dark bg ───────────────*/
.card {
  border: 1px solid rgba(125, 30, 160, 0.35);
}

/* ── 7. BUTTON STATES — active feedback ───────────────────────────*/
.btn-accent:active, .btn-primary:active {
  filter: brightness(0.9) !important;
  transform: scale(0.98) !important;
}

/* ── 8. ROOM SCREEN — chat message sender name ────────────────────
   Sender username above bubble was missing in some builds */
.rs-msg.theirs .rs-bub::before {
  display: none; /* handled by JS */
}
.rs-msg-name {
  font-size: .65rem;
  color: rgba(168, 85, 247, 0.8);
  margin-bottom: 2px;
  padding-left: 2px;
  font-weight: 600;
}

/* ── 9. SEAT CIRCLES — mic dot overlap fix on small screens ───────*/
@media (max-width: 360px) {
  .rs-seat-circle { width: 52px; height: 52px; }
  .rs-seats { gap: 6px; }
}

/* ── 10. TOPBAR BUTTONS — prevent overflow on small screens ───────*/
.rs-topbar {
  min-width: 0;
}
.rs-topbar .rs-room-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* ── 11. BOTTOM NAV — label visibility ────────────────────────────*/
.bnav-item { font-size: .58rem; }

/* ── 12. FEED — post card text contrast ───────────────────────────*/
.post-body {
  color: var(--text-primary);
  line-height: 1.6;
  font-size: .9rem;
}

/* ── 13. NOTIFICATIONS — unread highlight ─────────────────────────*/
.notif-unread {
  background: rgba(125, 30, 160, 0.12) !important;
  border-left: 3px solid var(--purple-light) !important;
}

/* ── 14. MESSAGES — chat bubble alignment ─────────────────────────*/
.msg-bubble-mine {
  background: linear-gradient(135deg, var(--purple), #9d24c7);
  border-radius: 18px 18px 4px 18px;
  color: #fff;
}
.msg-bubble-theirs {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(125, 30, 160, 0.25);
  border-radius: 18px 18px 18px 4px;
  color: var(--text-primary);
}

/* ── 15. SEARCH — no results state ────────────────────────────────*/
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.empty-icon { font-size: 2.5rem; margin-bottom: 10px; line-height: 1; }
.empty-state p { font-size: .88rem; line-height: 1.6; }

/* ── 16. WALLET / SHOP — amount inputs ────────────────────────────*/
input[type="number"].form-control {
  -moz-appearance: textfield;
}
input[type="number"].form-control::-webkit-outer-spin-button,
input[type="number"].form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── 17. PROFILE — avatar border ──────────────────────────────────*/
.profile-avatar-wrap {
  position: relative;
  display: inline-block;
}
.profile-avatar {
  border: 3px solid var(--purple);
  box-shadow: 0 0 20px rgba(125, 30, 160, 0.4);
}

/* ── 18. GIFT SHEET — handle bar ──────────────────────────────────*/
.rs-gift-sheet-handle,
.rs-sheet-handle {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 10px auto 0;
}

/* ── 19. TOAST — z-index on room screen ───────────────────────────*/
#toast-container { z-index: 99999 !important; }

/* ── 20. SCROLLBAR — webkit touch ─────────────────────────────────*/
.rs-gift-grid::-webkit-scrollbar,
.rs-user-sheet::-webkit-scrollbar,
.modal-box::-webkit-scrollbar { width: 3px; }
.rs-gift-grid::-webkit-scrollbar-thumb,
.rs-user-sheet::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb {
  background: rgba(125, 30, 160, 0.4);
  border-radius: 2px;
}

/* ── 21. LOGIN / SIGNUP — page centering ──────────────────────────*/
.auth-page {
  min-height: calc(100vh - var(--nav-h) - var(--bnav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 16px;
}

/* ── 22. LEVEL BADGE — readability ────────────────────────────────*/
.level-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
  background: rgba(125, 30, 160, 0.2);
  border: 1px solid rgba(125, 30, 160, 0.4);
  color: var(--purple-light);
}

/* ── 23. VIP BADGE ─────────────────────────────────────────────── */
.vip-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: .68rem;
  font-weight: 700;
}

/* ── 24. MODAL OVERLAY backdrop ───────────────────────────────────*/
.modal-overlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── 25. INPUT — iOS zoom prevention (< 16px triggers zoom) ───────*/
input.form-control,
input.rs-input,
textarea.form-control {
  font-size: 16px !important; /* prevent iOS auto-zoom */
}
@media (min-width: 400px) {
  input.form-control,
  textarea.form-control {
    font-size: .9rem !important;
  }
  input.rs-input {
    font-size: .82rem !important;
  }
}


/* ══════════════════════════════════════════════
   QEEPX v5 — ADVANCED UI/UX OVERHAUL
   Flash Animations · Entry Transitions · Dynamic Effects
   ══════════════════════════════════════════════ */

/* ── Global Animation Variables ── */
:root {
  --anim-fast: 0.15s;
  --anim-med: 0.3s;
  --anim-slow: 0.6s;
  --glow-purple: 0 0 20px rgba(125,30,160,0.5), 0 0 40px rgba(125,30,160,0.2);
  --glow-lime: 0 0 15px rgba(203,255,0,0.4), 0 0 30px rgba(203,255,0,0.15);
  --glow-green: 0 0 12px rgba(0,255,136,0.5);
}

/* ── Entry Flash Animation ── */
@keyframes flashIn {
  0% { opacity: 0; transform: scale(0.92) translateY(12px); filter: brightness(2); }
  40% { opacity: 1; transform: scale(1.02) translateY(-2px); filter: brightness(1.3); }
  70% { transform: scale(0.99) translateY(1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(125,30,160, 0); }
  50% { box-shadow: 0 0 0 8px rgba(125,30,160, 0.2); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-5deg) scale(0.9); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes neonPulse {
  0%, 100% { text-shadow: 0 0 5px rgba(203,255,0,.8), 0 0 10px rgba(203,255,0,.5); }
  50% { text-shadow: 0 0 10px rgba(203,255,0,1), 0 0 20px rgba(203,255,0,.7), 0 0 40px rgba(203,255,0,.3); }
}
@keyframes scanline {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}
@keyframes borderFlow {
  0% { border-color: rgba(125,30,160,.3); }
  33% { border-color: rgba(203,255,0,.4); }
  66% { border-color: rgba(0,255,136,.3); }
  100% { border-color: rgba(125,30,160,.3); }
}

/* ── Page/Content Entry Animations ── */
.container, .container-md {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.card {
  animation: slideUp var(--anim-med) cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease, border-color var(--anim-med) ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow-purple);
}

/* ── Enhanced Navigation ── */
.topnav {
  background: rgba(7,0,15,.98) !important;
  border-bottom: 1px solid transparent;
  animation: borderFlow 4s linear infinite;
  position: relative;
  overflow: hidden;
}
.topnav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 200%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(203,255,0,.6), rgba(125,30,160,.8), rgba(0,255,136,.6), transparent);
  animation: shimmer 3s linear infinite;
}
.nav-logo {
  animation: slideInLeft 0.5s ease;
}
.nav-logo:hover .logo-q {
  animation: neonPulse 1s ease infinite;
}

/* ── Bottom Navigation ── */
.bottomnav {
  background: rgba(7,0,15,.98) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(125,30,160,.2) !important;
  position: relative;
}
.bottomnav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125,30,160,.5), transparent);
}
.bnav-item {
  transition: transform var(--anim-fast) cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.bnav-item:active {
  transform: scale(0.85) !important;
}
.bnav-item.active .bnav-icon {
  animation: bounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 6px rgba(203,255,0,.6));
}

/* ── Enhanced Buttons ── */
.btn {
  position: relative;
  overflow: hidden;
  transition: all var(--anim-fast) cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}
.btn:active::before {
  width: 200px;
  height: 200px;
  opacity: 0;
}
.btn-primary {
  background: linear-gradient(135deg, #7d1ea0, #9333ea, #a855f7) !important;
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
  box-shadow: 0 4px 15px rgba(125,30,160,.4) !important;
}
.btn-primary:hover {
  box-shadow: 0 6px 25px rgba(125,30,160,.6) !important;
  transform: translateY(-2px) !important;
}
.btn-primary:active { transform: translateY(0) scale(.97) !important; }

/* Ripple effect */
.btn-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
}
.btn-ripple:active::after { opacity: 1; }

/* ── Feed & Post Cards ── */
.post-card, .feed-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  transition: all var(--anim-fast) ease;
  position: relative;
  overflow: hidden;
}
.post-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(125,30,160,.4), transparent);
  opacity: 0;
  transition: opacity var(--anim-med) ease;
}
.post-card:hover::after { opacity: 1; }

/* ── Profile Cards ── */
.profile-hero {
  position: relative;
  overflow: hidden;
}
.profile-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(125,30,160,.3) 0%, transparent 50%, rgba(203,255,0,.05) 100%);
  pointer-events: none;
}

/* ── Avatar Hover Effects ── */
img.avatar:hover, .avatar:hover {
  transform: scale(1.08);
  transition: transform var(--anim-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Stats / Number Counters ── */
.stat-value {
  font-variant-numeric: tabular-nums;
  transition: color var(--anim-fast) ease;
}

/* ── Notifications / Badges ── */
.badge, .notif-badge, .online-dot {
  animation: pulseGlow 2s ease infinite;
}
.online-dot.online {
  box-shadow: 0 0 0 0 rgba(0,255,136,.4);
  animation: onlinePulse 2s ease infinite;
}
@keyframes onlinePulse {
  0% { box-shadow: 0 0 0 0 rgba(0,255,136,.4); }
  70% { box-shadow: 0 0 0 6px rgba(0,255,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,136,0); }
}

/* ── Page Title ── */
.page-title {
  background: linear-gradient(135deg, var(--text-primary), var(--purple-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rotateIn 0.4s ease;
}

/* ── Toast Notifications ── */
#toast-container .toast {
  animation: slideInLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(125,30,160,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(125,30,160,.1) !important;
}

/* ── Modal Animations ── */
.modal-overlay {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.modal-overlay.on .modal-box {
  animation: bounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ── VIP Shine Effect ── */
.vip-badge, [class*="vip"] {
  position: relative;
  overflow: hidden;
}
.vip-badge::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transform: skewX(-20deg);
  animation: vipShine 3s ease infinite;
}
@keyframes vipShine {
  0%, 70%, 100% { left: -75%; }
  40% { left: 150%; }
}

/* ── Leaderboard Row Flash ── */
.lb-row:first-child { animation: flashIn 0.6s ease; }
.lb-row:nth-child(2) { animation: flashIn 0.6s ease 0.1s both; }
.lb-row:nth-child(3) { animation: flashIn 0.6s ease 0.2s both; }

/* ── Form Inputs Enhanced ── */
.form-control {
  transition: all var(--anim-fast) ease !important;
}
.form-control:focus {
  box-shadow: 0 0 0 3px rgba(125,30,160,.2), 0 0 12px rgba(125,30,160,.1) !important;
  border-color: var(--purple-light) !important;
}

/* ── Level Progress Bar ── */
.xp-bar, .progress-bar {
  overflow: hidden;
  position: relative;
}
.xp-bar::after, .progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: shimmer 2s linear infinite;
}

/* ── Gift Animation Float ── */
.gfly {
  animation: gflyanim 2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
@keyframes gflyanim {
  0% { opacity:1; transform: translateY(0) scale(1) rotate(0deg); }
  30% { transform: translateY(-80px) scale(1.4) rotate(10deg); }
  60% { opacity:1; transform: translateY(-180px) scale(1.2) rotate(-5deg); }
  100% { opacity:0; transform: translateY(-320px) scale(.6) rotate(15deg); }
}

/* ── Chatroom Enhanced ── */
#room-screen {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.rs-seat-circle {
  transition: all var(--anim-fast) cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.rs-seat-circle:hover {
  transform: scale(1.12) !important;
  box-shadow: var(--glow-purple) !important;
}
.rs-seat-circle.speaking {
  animation: speakerPulse 1s ease infinite !important;
}
@keyframes speakerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5), 0 0 14px rgba(34,197,94,.3); }
  50% { box-shadow: 0 0 0 10px rgba(34,197,94,0), 0 0 24px rgba(34,197,94,.5); }
}

/* ── Dynamic Text Effects ── */
.nav-logo .logo-q {
  display: inline-block;
  animation: neonPulse 3s ease infinite;
}
.logo-badge {
  animation: gradientShift 3s ease infinite;
  background-size: 200% 200%;
  background-image: linear-gradient(135deg, var(--purple), var(--purple-light), #6b21a8) !important;
}

/* ── Wallet / QP Balance ── */
.nav-qp {
  transition: all var(--anim-fast) ease !important;
}
.nav-qp:hover {
  transform: scale(1.05) !important;
  filter: brightness(1.2) !important;
}
.qp-icon {
  display: inline-block;
  animation: float 3s ease infinite;
}

/* ── Game Tab Transitions ── */
.g-tab {
  transition: all var(--anim-fast) cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}
.g-tab.active {
  text-shadow: 0 0 8px rgba(203,255,0,.5);
}
.g-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--lime);
  transform: translateX(-50%);
  transition: width var(--anim-fast) ease;
}
.g-tab.active::after { width: 80%; }
.g-tab:hover::after { width: 60%; }

/* ── Room Cards ── */
.room-card {
  animation: slideUp 0.3s ease both;
  transition: all var(--anim-fast) cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.room-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(125,30,160,.6) !important;
  box-shadow: 0 8px 30px rgba(125,30,160,.3) !important;
}
.live-pip {
  box-shadow: 0 0 0 0 rgba(34,197,94,.5);
  animation: livePulseV2 2s ease infinite;
}
@keyframes livePulseV2 {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); background: #00ff88; }
  70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ── Scroll Bars ── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(125,30,160,.4) transparent;
}
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(125,30,160,.4); border-radius: 2px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(125,30,160,.7); }

/* ── Loading Skeleton Shimmer ── */
.skeleton {
  background: linear-gradient(90deg, rgba(125,30,160,.08) 25%, rgba(125,30,160,.15) 50%, rgba(125,30,160,.08) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ── Staggered List Animation ── */
.inbox-row:nth-child(1) { animation: slideUp .3s ease .05s forwards; }
.inbox-row:nth-child(2) { animation: slideUp .3s ease .1s forwards; }
.inbox-row:nth-child(3) { animation: slideUp .3s ease .15s forwards; }
.inbox-row:nth-child(4) { animation: slideUp .3s ease .2s forwards; }
.inbox-row:nth-child(5) { animation: slideUp .3s ease .25s forwards; }

/* ── Chip / Tag Hover ── */
.vip-tag, .badge-tag, .role-badge {
  transition: all var(--anim-fast) ease !important;
}
.vip-tag:hover, .badge-tag:hover {
  transform: scale(1.05) !important;
  filter: brightness(1.2) !important;
}

/* ── Hover Cards with Depth ── */
.user-card, .player-card {
  transition: transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease !important;
}
.user-card:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.4), var(--glow-purple) !important;
}

/* ── Responsive Spacing Fix ── */
@media (max-width: 380px) {
  :root { --nav-h: 52px; --bnav-h: 64px; }
  .container, .container-md { padding: 10px 12px; }
}

/* ── Dark mode polish ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #120020 inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
}

/* ── Enhanced Empty States ── */
.empty-state {
  animation: fadeInUp .5s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.empty-icon {
  animation: float 3s ease infinite;
  display: block;
  margin: 0 auto 12px;
  font-size: 3.5rem;
  filter: drop-shadow(0 0 12px rgba(125,30,160,.3));
}

/* ── Message Bubble Animations (global) ── */
@keyframes mbAppear {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── Typing Indicator Dots (global) ── */
.typing-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple-light);
  animation: tdot 1.2s ease infinite;
  display: inline-block; margin: 0 2px;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes tdot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ── Ultra Small Screens (< 360px) ── */
@media (max-width: 359px) {
  .rs-seats { grid-template-columns: repeat(3, 1fr) !important; }
  .rs-seat-circle { width: 50px !important; height: 50px !important; }
  .dm-gift-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .emoji-grid { grid-template-columns: repeat(6, 1fr) !important; }
  .g-tab { padding: 8px 10px !important; font-size: .76rem !important; }
  .thread-header { padding: 7px 8px !important; }
  .thread-act-btn { width: 28px !important; height: 28px !important; }
}

/* ── Medium Screens (520px+) ── */
@media (min-width: 520px) {
  .msg-app { border-radius: 0; }
  .rs-seats { grid-template-columns: repeat(4, 1fr); }
  .qx-shell { max-width: 420px; }
}

/* ── Touch Device Optimizations ── */
@media (hover: none) and (pointer: coarse) {
  .btn:hover { transform: none !important; }
  .card:hover { transform: none !important; box-shadow: none !important; }
  .room-card:hover { transform: none !important; }
  .rs-seat-circle:hover { transform: none !important; }
  /* Larger tap targets on touch */
  .thread-send { width: 44px !important; height: 44px !important; }
  .thread-attach-btn { width: 40px !important; height: 40px !important; }
  .bnav-item { padding: 8px 12px !important; }
}

/* ── Safe Area for iOS notch/home bar ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottomnav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
  .thread-input-bar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .rs-bottom-bar {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
}

/* ── Landscape Mobile Fix ── */
@media (max-height: 500px) and (orientation: landscape) {
  .rs-hero { padding-top: 40px; }
  .rs-seats { grid-template-columns: repeat(6, 1fr); }
  .rs-seat-circle { width: 46px !important; height: 46px !important; }
  .msg-app { height: calc(100vh - 48px) !important; }
}

/* ── High DPI / Retina ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .playing-card { border-width: 0.5px; }
  .rs-seat-circle { border-width: 1.5px; }
}

/* ── Dark Mode System Preference (already dark, but ensure) ── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* ── Reduced Motion Accessibility ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rs-ann-text { animation: none !important; }
  .qx-pdot { animation: none !important; }
  .live-pip { animation: none !important; }
}

/* ── Print Styles ── */
@media print {
  .bottomnav, .topnav, .thread-input-bar, .rs-bottom-bar { display: none !important; }
  #app-shell { position: static !important; height: auto !important; overflow: visible !important; }
  #main-content { overflow: visible !important; }
}