*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f2f2f2;
  --sidebar-bg:#ffffff;
  --card-bg:#ffffff;
  --topnav-bg:#ffffff;
  --text:#1a1a1a;
  --muted:#666;
  --border:#e0e0e0;
  --accent:#0066ff;
  --accent-hover:#0052cc;
  --green:#00a651;
  --red:#e53e3e;
  --gold:#d4a017;
  --radius:8px;
  --radius-lg:12px;
  --shadow:0 1px 4px rgba(0,0,0,0.10);
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

/* ---- TOP NAV ---- */
.topnav{
  position:fixed;top:0;left:0;right:0;height:52px;
  background:var(--topnav-bg);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;z-index:200;gap:16px;
}
.topnav-left{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{
  width:36px;height:36px;border-radius:8px;
  object-fit:cover;display:block;
}
.logo-text{font-weight:800;font-size:1.1rem;letter-spacing:-0.5px}
.topnav-center{flex:1;max-width:520px}
.top-search{
  display:flex;align-items:center;gap:8px;
  background:#f5f5f5;border:1px solid var(--border);
  border-radius:6px;padding:7px 14px;width:100%;
}
.top-search:focus-within{border-color:var(--accent);background:#fff}
.top-search i{color:var(--muted);font-size:0.85rem}
.top-search input{border:none;background:none;outline:none;font-family:'Inter',sans-serif;font-size:0.9rem;color:var(--text);width:100%}
.topnav-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.notif-wrap{position:relative}
.topnav-icon-btn{position:relative;width:36px;height:36px;border-radius:50%;background:#f5f5f5;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.95rem;color:var(--muted);border:none}
.topnav-icon-btn:hover{background:#e8e8e8}
.badge-dot{
  position:absolute;top:2px;right:2px;
  background:var(--red);color:#fff;font-size:0.6rem;font-weight:700;
  width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.badge-dot.hidden{display:none}
.notif-pop{
  position:absolute;top:44px;right:0;width:320px;max-height:360px;overflow:hidden;
  background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 28px rgba(0,0,0,.16);z-index:500;
}
.notif-pop.hidden{display:none}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);font-size:.88rem;font-weight:800}
.notif-head button{border:none;background:none;color:var(--accent);font-size:.78rem;font-weight:700;cursor:pointer}
.notif-list{max-height:300px;overflow:auto;display:flex;flex-direction:column}
.notif-empty{padding:20px 14px;text-align:center;color:var(--muted);font-size:.85rem}
.notif-item{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid #f1f1f1;cursor:pointer}
.notif-item:hover{background:#f8faff}
.notif-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff;flex-shrink:0;background:var(--accent)}
.notif-body{min-width:0;display:flex;flex-direction:column}
.notif-title{font-size:.84rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-sub{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topnav-currency{display:flex;align-items:center;gap:6px;font-weight:700;font-size:0.88rem;color:var(--gold);background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif}
.topnav-currency:hover{opacity:.85}
.rbx-logo{width:14px;height:14px;display:inline-block;transform:rotate(18deg);border:2px solid currentColor;border-radius:3px;position:relative}
.rbx-logo::after{content:'';position:absolute;inset:3px;border:1.6px solid currentColor;border-radius:2px}
.topnav-avatar{width:34px;height:34px;border-radius:50%;border:2px solid var(--border);cursor:pointer}

/* ---- LAYOUT ---- */
.app-body{display:flex;padding-top:52px;min-height:100vh}

/* ---- SIDEBAR ---- */
.sidebar{
  width:220px;flex-shrink:0;
  background:var(--sidebar-bg);border-right:1px solid var(--border);
  position:fixed;top:52px;left:0;bottom:0;
  display:flex;flex-direction:column;overflow-y:auto;z-index:100;
}
.sidebar-user{
  display:flex;align-items:center;gap:10px;
  padding:18px 16px 12px;border-bottom:1px solid var(--border);
}
.sidebar-avatar{width:36px;height:36px;border-radius:50%;border:2px solid var(--border)}
.sidebar-username{font-weight:700;font-size:0.9rem}
.sidebar-nav{display:flex;flex-direction:column;padding:8px 0;flex:1}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;font-size:0.9rem;font-weight:500;
  color:var(--muted);cursor:pointer;text-decoration:none;
  border-radius:0;transition:background 0.15s,color 0.15s;
  position:relative;
}
.nav-item i{width:18px;text-align:center;font-size:0.95rem}
.nav-item:hover{background:#f5f5f5;color:var(--text)}
.nav-item.active{background:#e8f0ff;color:var(--accent);font-weight:700}
.nav-item.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);border-radius:0 3px 3px 0}
.nav-badge{
  margin-left:auto;background:var(--red);color:#fff;
  font-size:0.65rem;font-weight:700;padding:2px 6px;border-radius:30px;min-width:18px;text-align:center;
}
.sidebar-promo{
  margin:12px;border-radius:var(--radius);background:#f0f5ff;border:1px solid #c7d8ff;
  padding:14px;font-size:0.82rem;
}
.promo-title{font-weight:700;margin-bottom:4px;color:var(--accent)}
.promo-sub{color:var(--muted);margin-bottom:10px;line-height:1.4}
.promo-btn{
  background:var(--accent);color:#fff;border:none;border-radius:6px;
  padding:7px 14px;font-size:0.82rem;font-weight:700;cursor:pointer;width:100%;
}
.promo-btn:hover{background:var(--accent-hover)}

/* ---- PAGE AREA ---- */
.page-area{margin-left:220px;flex:1;padding:28px 32px;min-height:calc(100vh - 52px)}
.tab{display:none}.tab.active{display:block}
.page-title{font-size:1.6rem;font-weight:800;margin-bottom:22px;color:var(--text)}

/* ---- SECTION ---- */
.section{margin-bottom:36px}
.section-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-title{font-size:1rem;font-weight:700;color:var(--text)}
.see-all{font-size:0.85rem;color:var(--accent);font-weight:600;cursor:pointer}
.see-all:hover{text-decoration:underline}

/* ---- GAME GRID & CARDS ---- */
.game-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:16px;
}
.game-grid.wide{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

.game-card{background:var(--card-bg);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;border:1px solid var(--border)}
.game-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.12)}

.game-thumb{
  width:100%;aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
  font-size:3.2rem;position:relative;background:#e8e8e8;
}
.thumb-live{
  position:absolute;top:7px;left:7px;
  background:var(--red);color:#fff;font-size:0.6rem;font-weight:800;
  padding:2px 7px;border-radius:20px;letter-spacing:0.5px;
}
.thumb-players{
  position:absolute;bottom:7px;right:7px;
  background:rgba(0,0,0,0.55);color:#fff;font-size:0.7rem;font-weight:600;
  padding:2px 8px;border-radius:20px;backdrop-filter:blur(4px);
}
.game-info{padding:10px 12px 12px}
.game-name{font-weight:700;font-size:0.88rem;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-rating{display:flex;align-items:center;gap:5px;font-size:0.78rem;color:var(--muted)}
.game-rating i{color:var(--green)}
.game-play-btn{
  display:block;width:100%;margin-top:8px;
  background:var(--accent);color:#fff;border:none;border-radius:6px;
  padding:7px;font-size:0.82rem;font-weight:700;cursor:pointer;
}
.game-play-btn:hover{background:var(--accent-hover)}

/* ---- FEATURED LIST ---- */
.featured-list{display:flex;flex-direction:column;gap:12px}
.feat-row{
  display:flex;align-items:center;gap:18px;
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:16px 20px;cursor:pointer;
  transition:box-shadow 0.2s;
}
.feat-row:hover{box-shadow:0 4px 16px rgba(0,0,0,0.1)}
.feat-thumb{width:100px;height:68px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;flex-shrink:0}
.feat-info{flex:1}
.feat-title{font-weight:700;font-size:1rem;margin-bottom:4px}
.feat-desc{font-size:0.82rem;color:var(--muted);margin-bottom:8px;line-height:1.4}
.feat-meta{display:flex;gap:14px;flex-wrap:wrap}
.feat-meta span{font-size:0.78rem;color:var(--muted);display:flex;align-items:center;gap:4px}
.feat-meta i{color:var(--accent)}
.feat-live{color:var(--red)!important}

/* ---- PROFILE ---- */
.profile-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:28px}
.profile-banner{height:130px;background:linear-gradient(135deg,#0066ff 0%,#a855f7 100%)}
.profile-avatar-row{display:flex;padding:0 28px;margin-top:-44px;margin-bottom:0}
.profile-big-avatar{width:88px;height:88px;border-radius:50%;border:4px solid #fff;background:#e8e8e8;flex-shrink:0;display:block}
.profile-body{padding:12px 28px 24px}
.profile-name{font-size:1.4rem;font-weight:800;margin-bottom:3px}
.profile-join{font-size:0.82rem;color:var(--muted);margin-bottom:16px}
.profile-stats{display:flex;gap:32px}
.stat{text-align:left}
.stat-num{font-size:1.15rem;font-weight:800;color:var(--accent)}
.stat-lbl{font-size:0.75rem;color:var(--muted);margin-top:1px}

/* ---- FRIENDS ---- */
.friends-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.friends-group-label{display:flex;align-items:center;gap:7px;font-size:0.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:12px}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.status-dot.green{background:var(--green)}
.status-dot.grey{background:#aaa}
.friend-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px}
.friend-row.dim{opacity:0.55}
.fr-avatar{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:#e8e8e8}
.fr-info{flex:1}
.fr-name{font-weight:700;font-size:0.9rem}
.fr-status{font-size:0.78rem;margin-top:2px}
.fr-status.green{color:var(--green)}
.fr-status.blue{color:var(--accent)}
.fr-status.grey{color:var(--muted)}

/* ---- MESSAGES ---- */
.msg-list{display:flex;flex-direction:column;gap:0}
.msg-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;cursor:pointer}
.msg-row.unread{background:#f0f5ff;border-color:#c7d8ff}
.msg-row:hover{box-shadow:var(--shadow)}
.msg-info{flex:1}
.msg-name{font-weight:700;font-size:0.9rem;margin-bottom:2px}
.msg-preview{font-size:0.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.msg-time{font-size:0.75rem;color:var(--muted);flex-shrink:0}

/* ---- INVENTORY ---- */
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.inv-item{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:box-shadow 0.2s}
.inv-item:hover{box-shadow:0 4px 14px rgba(0,0,0,0.1)}
.inv-thumb{height:100px;display:flex;align-items:center;justify-content:center;font-size:2.8rem}
.inv-name{padding:8px 10px 2px;font-weight:700;font-size:0.82rem}
.inv-type{padding:0 10px 10px;font-size:0.72rem;color:var(--muted)}

/* ---- SETTINGS ---- */
.settings-wrap{display:flex;flex-direction:column;gap:20px;max-width:640px}
.settings-shell{width:min(980px,100%);margin:0 auto;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.settings-view{display:none;padding:8px 0}
.settings-view.active{display:block}
.settings-list{display:flex;flex-direction:column}
.settings-row-btn{
  width:100%;background:none;border:none;display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;font-family:'Inter',sans-serif;font-size:1rem;font-weight:700;color:#394150;cursor:pointer;
  border-top:1px solid var(--border);text-align:left;
}
.settings-row-btn:first-child{border-top:none}
.settings-row-btn:hover{background:#f8f9fc}
.settings-row-btn i{color:#9aa3b3}

.settings-subhead{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.settings-back-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:#fff;color:#374151;cursor:pointer}
.settings-back-btn:hover{background:#f3f4f6}
.settings-subtitle{font-size:1rem;font-weight:800;color:var(--text)}

.settings-panel{padding:18px;display:flex;flex-direction:column;gap:16px}
.settings-panel.hidden{display:none}
.settings-subpage-footer{padding:0 18px 18px;display:flex;justify-content:flex-end;border-top:1px solid var(--border);margin-top:6px}
.settings-tab-footer{width:min(980px,100%);margin:0 auto;padding:14px 0 0}
.settings-tab-footer .settings-block{margin:0}
.settings-tab-footer .settings-block.danger{border-color:var(--border)}
.settings-logout-btn{
  background:#f0f0f0!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  padding:8px 16px!important;
  border-radius:8px!important;
  font-size:0.82rem!important;
  font-weight:700!important;
  min-width:unset;
  justify-content:flex-start;
}
.settings-logout-btn:hover{background:#e0e0e0!important}

.rbucks-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:1200}
.rbucks-overlay.hidden{display:none}
.rbucks-modal{width:min(760px,92vw);background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 26px 70px rgba(0,0,0,.28);padding:18px 18px 14px}
.rbucks-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rbucks-title{font-size:1.35rem;font-weight:800;color:#111827}
.rbucks-close{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:#fff;cursor:pointer}
.rbucks-sub{font-size:.86rem;color:var(--muted);margin-bottom:14px}
.rbucks-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rbucks-pack{border:1px solid var(--border);background:#f9fafb;border-radius:12px;padding:14px 14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:.15s;font-family:'Inter',sans-serif}
.rbucks-pack:hover{background:#eef4ff;border-color:#bfd3ff}
.rbucks-pack.featured{border:1px solid var(--border);background:#f9fafb}
.rbucks-pack .amt{font-weight:800;color:#111827;display:flex;align-items:center;gap:8px}
.rbucks-pack .price{font-size:.9rem;font-weight:700;color:#e11d2e}
.rbucks-foot{font-size:.74rem;color:#94a3b8;margin-top:12px;text-align:center}

.confirm-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:1250}
.confirm-overlay.hidden{display:none}
.confirm-modal{width:min(430px,90vw);background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.22);padding:16px}
.confirm-title{font-size:1rem;font-weight:800;color:#111827;margin-bottom:8px}
.confirm-text{font-size:.9rem;color:#374151;line-height:1.45;margin-bottom:14px}
.confirm-actions{display:flex;justify-content:flex-end;gap:8px}
.confirm-btn{border:none;border-radius:8px;padding:8px 14px;font-family:'Inter',sans-serif;font-size:.86rem;font-weight:700;cursor:pointer}
.confirm-btn.ok{background:#e11d2e;color:#fff}
.confirm-btn.ok:hover{background:#1d4ed8}
.confirm-btn.cancel{background:#f3f4f6;color:#111827;border:1px solid var(--border)}
.confirm-btn.cancel:hover{background:#e5e7eb}
.settings-block{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;display:flex;flex-direction:column;gap:16px}
.settings-block.danger{border-color:#fca5a5}
.settings-block-title{font-size:0.95rem;font-weight:800;margin-bottom:2px}
.settings-field{display:flex;flex-direction:column;gap:6px}
.settings-field label{font-size:0.82rem;font-weight:600;color:var(--muted)}
.s-input{border:1px solid var(--border);border-radius:6px;padding:9px 12px;font-family:'Inter',sans-serif;font-size:0.9rem;color:var(--text);outline:none;background:#f9f9f9;transition:border 0.15s}
.s-input:focus{border-color:var(--accent);background:#fff}
.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:0.9rem;font-weight:500;padding:2px 0}
/* switch */
.sw{position:relative;display:inline-block;width:42px;height:24px}
.sw input{opacity:0;width:0;height:0}
.sw-slider{position:absolute;inset:0;background:#ddd;border-radius:30px;transition:.3s;cursor:pointer}
.sw-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
.sw input:checked + .sw-slider{background:var(--accent)}
.sw input:checked + .sw-slider::before{transform:translateX(18px)}

/* ---- BUTTONS ---- */
.pill-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--accent);color:#fff;border:none;border-radius:6px;
  padding:8px 16px;font-size:0.82rem;font-weight:700;cursor:pointer;
  transition:background 0.15s;white-space:nowrap;
}
.pill-btn:hover{background:var(--accent-hover)}
.pill-btn.ghost{background:#f0f0f0;color:var(--text);border:1px solid var(--border)}
.pill-btn.ghost:hover{background:#e0e0e0}
.pill-btn.accent{background:var(--accent);color:#fff}

/* ---- MODAL ---- */
/* ---- TOAST ---- */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(10px);
  background:#1a1a1a;color:#fff;padding:10px 22px;border-radius:30px;
  font-size:0.88rem;font-weight:600;opacity:0;pointer-events:none;
  transition:all 0.3s;z-index:9999;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}

/* ===================== IN-GAME SCREEN ===================== */
.game-screen{position:fixed;inset:0;z-index:2000;font-family:'Inter',sans-serif}
.game-screen.hidden{display:none}

/* ===== LOADING SCREEN ===== */
.load-screen{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Inter',sans-serif}
.load-screen.hidden{display:none}
.load-bg{position:absolute;inset:0;background:#0d0d14;z-index:0}
.load-cancel-btn{position:absolute;top:18px;left:18px;z-index:2;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.7);width:38px;height:38px;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.load-cancel-btn:hover{background:rgba(220,38,38,0.35);border-color:#dc2626;color:#fff}
.load-logo{position:relative;z-index:1;font-size:5rem;font-weight:900;color:#fff;letter-spacing:-2px;text-shadow:0 0 60px rgba(139,92,246,.9),0 0 120px rgba(139,92,246,.5);margin-bottom:0.3rem}
.load-title{position:relative;z-index:1;font-size:1.7rem;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:0.04em;margin-bottom:2rem}
.load-bottom{position:absolute;bottom:0;left:0;right:0;z-index:1;padding:0 0 2.8rem;display:flex;flex-direction:column;align-items:center;gap:0.75rem}
.load-bar-wrap{width:min(520px,80vw);height:5px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
.load-bar{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#9b0e1f,#ff3b3b);transition:width 0.4s cubic-bezier(.4,0,.2,1)}
.load-stage{font-size:0.82rem;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:0.06em;text-transform:uppercase}

/* Three.js canvas fills entire screen */
#gs-canvas-container{position:absolute;inset:0;z-index:0}
#gs-canvas-container canvas{display:block;width:100%!important;height:100%!important}

/* ── ESC Pause Menu ────────────────────────────────────────────────── */
.esc-overlay{
  position:absolute;inset:0;z-index:900;
  display:flex;justify-content:center;align-items:center;
  pointer-events:none;
}
.esc-overlay.hidden{ display:none; }

.esc-panel{
  pointer-events:all;
  width:700px;max-width:96vw;
  background:#1a1a1f;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  display:flex;flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,0.7);
  transform:translateY(-40px);
  opacity:0;
  transition:transform 0.28s cubic-bezier(0.22,1,0.36,1), opacity 0.22s ease;
  overflow:hidden;
}
.esc-panel.open{ transform:translateY(0); opacity:1; }

/* tabs */
.esc-tabs{
  display:flex;align-items:stretch;
  background:#111114;
  border-bottom:1px solid rgba(255,255,255,0.07);
  padding:0;
}
.esc-tab{
  flex:1 1 0;min-width:0;background:none;border:none;color:rgba(255,255,255,0.45);
  font-size:0.83rem;font-weight:700;padding:13px 6px 11px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
  overflow:hidden;
}
.esc-tab:hover{ color:rgba(255,255,255,0.75); }
.esc-tab.active{ color:#fff;border-bottom-color:#fff; }

/* body panels */
.esc-body{
  flex:1;overflow-y:auto;padding:16px 18px 0;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.12) transparent;
  min-height:380px;max-height:calc(70vh - 120px);
}
.esc-body.hidden{ display:none; }

/* invite */
.esc-invite-btn{
  width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.7);border-radius:8px;padding:10px 14px;
  text-align:left;cursor:pointer;font-size:0.85rem;display:flex;align-items:center;gap:9px;
  margin-bottom:14px;transition:background .15s;
}
.esc-invite-btn:hover{ background:rgba(255,255,255,0.1); }

/* server header */
.esc-server-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.esc-server-header>span{ font-size:1rem;font-weight:700;color:#fff; }
.esc-view-btns{ display:flex;gap:4px; }
.esc-view{
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.45);border-radius:6px;width:30px;height:30px;
  cursor:pointer;font-size:0.82rem;transition:background .15s,color .15s;
}
.esc-view.active{ background:rgba(255,255,255,0.15);color:#fff; }

/* player grid */
.esc-players-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  padding-bottom:10px;
}
.esc-players-grid.list-view{ grid-template-columns:1fr; }

.esc-player-card{
  background:#252529;border-radius:10px;overflow:hidden;
  position:relative;cursor:pointer;transition:background .15s;
  border:1px solid rgba(255,255,255,0.06);
}
.esc-player-card:hover{ background:#2e2e33; }
.esc-player-avatar{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;
  background:#1e1e22;
}
.esc-player-info{
  padding:5px 6px 6px;
}
.esc-player-name{ font-size:0.74rem;font-weight:700;color:#fff;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.esc-player-handle{ font-size:0.68rem;color:rgba(255,255,255,0.35);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.esc-you-tag{ display:inline-block;font-size:0.58rem;font-weight:700;color:#fff;background:#3b82f6;border-radius:6px;padding:1px 6px;vertical-align:middle;margin-left:2px; }
.esc-server-count{ font-size:0.8rem;font-weight:700;color:#3b82f6;margin-left:6px; }
.esc-follow-btn{
  position:absolute;bottom:28px;right:5px;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);
  color:#fff;border-radius:5px;width:26px;height:26px;font-size:0.72rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.esc-follow-btn:hover{ background:rgba(255,255,255,0.2); }

/* list view card */
.esc-players-grid.list-view .esc-player-card{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
}
.esc-players-grid.list-view .esc-player-avatar{
  width:40px;height:40px;border-radius:8px;aspect-ratio:unset;flex-shrink:0;
}
.esc-players-grid.list-view .esc-player-info{ padding:0;flex:1; }
.esc-players-grid.list-view .esc-follow-btn{ position:static;margin-left:auto;flex-shrink:0; }

/* settings */
.esc-setting-group-title{
  font-size:0.72rem;font-weight:800;letter-spacing:0.08em;
  text-transform:uppercase;color:rgba(255,255,255,0.42);
  padding:16px 0 6px;
}
.esc-setting-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.08);
  font-size:0.86rem;color:rgba(255,255,255,0.78);
}
.esc-slider-wrap{ display:flex;align-items:center;gap:8px; }
.esc-slider{ width:176px;accent-color:#4f8dff;cursor:pointer; }
.esc-num-input{
  width:56px;background:#1a1a20;border:1px solid rgba(255,255,255,0.16);
  color:#fff;border-radius:6px;padding:3px 6px;font-size:0.82rem;
  text-align:center;outline:none;
  -moz-appearance:textfield;
}
.esc-num-input::-webkit-outer-spin-button,
.esc-num-input::-webkit-inner-spin-button{ -webkit-appearance:none; }
.esc-num-input:focus{ border-color:#3b82f6; }
.esc-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  min-width:140px; cursor:pointer;
  background-color:#252529;
  /* custom chevron (native arrow is removed by appearance:none) */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23ffffff' d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;border-radius:6px;
  padding:5px 30px 5px 10px;font-size:0.82rem;
  outline:none;transition:border-color .15s,background-color .15s;
}
.esc-select:hover{ background-color:#2c2c32;border-color:rgba(255,255,255,0.28); }
.esc-select:focus{ border-color:#4f8dff; }
/* dark popup list — without this the options render white-on-white in WebView2 */
.esc-select option{ background:#1a1a20;color:#fff; }

/* help */
.esc-help-row{
  display:flex;align-items:center;gap:14px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:0.85rem;color:rgba(255,255,255,0.65);
}
.esc-help-row kbd{
  background:#2a2a30;border:1px solid rgba(255,255,255,0.15);
  border-radius:5px;padding:3px 8px;font-size:0.78rem;color:#fff;white-space:nowrap;
}

/* empty state */
.esc-empty{
  text-align:center;color:rgba(255,255,255,0.3);
  padding:60px 20px;font-size:0.9rem;line-height:1.8;
}

/* bottom action bar */
.esc-actions{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
  border-top:1px solid rgba(255,255,255,0.07);
  padding:10px 12px;gap:8px;background:#111114;
}
.esc-action-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 0;border-radius:8px;font-size:0.88rem;font-weight:700;
  cursor:pointer;border:2px solid transparent;transition:background .15s,border-color .15s;
}
.esc-action-btn kbd{
  background:rgba(255,255,255,0.12);border-radius:4px;
  padding:2px 6px;font-size:0.72rem;font-family:inherit;
}
.esc-action-btn.leave{
  background:#dc2626;color:#fff;
  border-color:#ef4444;
}
.esc-action-btn.leave:hover{ background:#b91c1c;border-color:#dc2626; }
.esc-action-btn.respawn{
  background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.7);
  border-color:rgba(255,255,255,0.1);
}
.esc-action-btn.respawn:hover{ background:rgba(255,255,255,0.12);color:#fff; }
.esc-action-btn.resume{
  background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.7);
  border-color:rgba(255,255,255,0.1);
}
.esc-action-btn.resume:hover{ background:rgba(255,255,255,0.12);color:#fff; }

/* Luau console — top left, below topbar */
/* ── F9 Developer Console ─────────────────────────────── */
.f9-overlay{
  position:absolute;inset:0;z-index:50;
  background:rgba(0,0,0,0.45);
  display:flex;align-items:center;justify-content:center;
  pointer-events:all;
}
.f9-overlay.hidden{display:none}
.f9-window{
  width:660px;max-width:95vw;
  background:#2a2a2e;
  border:1px solid #111;
  border-radius:4px;
  display:flex;flex-direction:column;
  font-family:'Inter',sans-serif;
  box-shadow:0 8px 40px rgba(0,0,0,0.7);
  overflow:hidden;
}
/* title bar */
.f9-titlebar{
  background:#1e1e22;
  padding:6px 10px;
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid #111;
  user-select:none;
}
.f9-title{font-size:12px;font-weight:600;color:#ccc;flex:1}
.f9-titlebar-right{display:flex;align-items:center;gap:8px}
.f9-badge{display:flex;align-items:center;gap:4px;font-size:11px;color:#aaa}
.f9-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.f9-dot.red{background:#e74c3c}
.f9-dot.yellow{background:#f39c12}
.f9-mem{font-size:11px;color:#4fc3f7;margin-left:4px}
.f9-btn-min,.f9-btn-close{
  background:none;border:none;color:#888;font-size:13px;cursor:pointer;
  padding:2px 6px;border-radius:3px;line-height:1;
}
.f9-btn-min:hover{background:#333;color:#fff}
.f9-btn-close:hover{background:#c0392b;color:#fff}
/* tabs */
.f9-tabs{
  display:flex;align-items:flex-end;
  background:#232327;
  border-bottom:2px solid #111;
  position:relative;
}
.f9-tab{
  background:none;border:none;color:#999;
  font-size:12px;font-weight:600;
  padding:7px 28px;cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:color .15s,border-color .15s;
}
.f9-tab.active{color:#fff;border-bottom:2px solid #3b82f6}
.f9-tab:hover:not(.active){color:#ddd}
/* filters */
.f9-filters{
  display:flex;align-items:center;gap:10px;
  padding:6px 10px;
  background:#232327;
  border-bottom:1px solid #1a1a1e;
  flex-wrap:wrap;
}
.f9-chk{display:flex;align-items:center;gap:4px;font-size:11px;color:#ccc;cursor:pointer}
.f9-chk.warn{color:#f39c12}
.f9-chk.err{color:#e74c3c}
.f9-chk input{accent-color:#3b82f6;cursor:pointer}
.f9-search-wrap{
  margin-left:auto;display:flex;align-items:center;
  background:#1a1a1e;border:1px solid #444;border-radius:4px;
  padding:3px 8px;gap:5px;
}
.f9-search-wrap .fa{color:#666;font-size:11px}
.f9-search{background:none;border:none;outline:none;color:#ccc;font-size:11px;width:120px}
/* log body */
.f9-log-body{
  height:280px;overflow-y:auto;
  padding:4px 0;
  background:#1e1e22;
}
.f9-log-body::-webkit-scrollbar{width:6px}
.f9-log-body::-webkit-scrollbar-track{background:#1a1a1e}
.f9-log-body::-webkit-scrollbar-thumb{background:#444;border-radius:3px}
.log-line{
  padding:2px 12px;font-size:11.5px;color:#ccc;
  font-family:'Courier New',monospace;line-height:1.6;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.log-line:hover{background:rgba(255,255,255,0.04)}
.log-line .log-ts{color:#555;margin-right:8px;font-size:10px}
.log-line.warn{color:#f39c12;background:rgba(243,156,18,0.06)}
.log-line.err{color:#e74c3c;background:rgba(231,76,60,0.08)}
.log-line.info{color:#60a5fa}
/* memory panel */
.f9-mem-table{padding:8px 12px;display:flex;flex-direction:column;gap:1px}
.f9-mem-row{display:flex;justify-content:space-between;font-size:12px;padding:5px 8px;border-radius:3px}
.f9-mem-row.header{color:#888;font-weight:700;font-size:11px;border-bottom:1px solid #333;margin-bottom:4px}
.f9-mem-row:not(.header){color:#ccc}
.f9-mem-row:not(.header):nth-child(even){background:rgba(255,255,255,0.04)}
.f9-panel.hidden{display:none}
.f9-panel{background:#1e1e22}
.gs-console-body .log-line{color:#cbd5e1;line-height:1.5}
.gs-console-body .log-line.err{color:#f87171}
.gs-console-body .log-line.ev{color:#60a5fa}

/* Chat — bottom left */
.gs-chat{position:absolute;top:60px;left:10px;width:290px;z-index:10;display:flex;flex-direction:column}
.gs-player-count{position:absolute;top:12px;right:14px;z-index:11;display:flex;align-items:center;gap:7px;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.18);border-radius:10px;padding:8px 13px;color:#fff;font-size:0.9rem;font-weight:700;cursor:pointer;backdrop-filter:blur(6px);transition:background .15s,border-color .15s;text-shadow:0 1px 4px rgba(0,0,0,0.8)}
.gs-player-count:hover{background:rgba(0,0,0,0.72);border-color:rgba(255,255,255,0.35)}
.gs-player-count i{color:#34d399;font-size:0.86rem}
.gs-player-count .gs-pc-sep{opacity:0.5;margin:0 1px}
.gs-player-count.gs-pc-bump{animation:gsPcBump .35s ease}
@keyframes gsPcBump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
.gs-chat-msgs{height:120px;overflow-y:auto;padding:4px 0;display:flex;flex-direction:column;gap:3px}
.gs-chat-msgs div{font-size:0.79rem;line-height:1.5;color:#e2e8f0;text-shadow:0 1px 4px rgba(0,0,0,0.9)}
.gs-chat-input-row{display:flex;gap:6px;margin-top:5px}
.gs-chat-input{flex:1;background:rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.2);border-radius:7px;padding:7px 10px;color:#fff;font-size:0.8rem;outline:none}
.gs-chat-input::placeholder{color:rgba(255,255,255,0.35)}
.gs-chat-input:focus{border-color:rgba(255,255,255,0.45)}
.gs-chat-send{background:#0066ff;border:none;border-radius:7px;color:#fff;padding:7px 11px;cursor:pointer;font-size:0.82rem;transition:background .15s}
.gs-chat-send:hover{background:#0052cc}

/* Health bar */
.gs-health{display:flex;align-items:center;gap:6px}
.gs-health-bar{width:100px;height:8px;background:rgba(255,255,255,0.15);border-radius:99px;overflow:hidden}
.gs-health-fill{height:100%;width:100%;background:#4ade80;border-radius:99px;transition:width .3s,background .3s}
.gs-health-text{font-size:0.75rem;color:rgba(255,255,255,0.75);min-width:52px}

/* Controls hint */

/* Kick / disconnect overlay (version gate — "unexpected client behavior") */
.kick-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#1a1014 0%,#0a0608 100%);
  animation:kickFade .25s ease;
}
.kick-overlay.hidden{display:none}
@keyframes kickFade{from{opacity:0}to{opacity:1}}
.kick-box{
  max-width:440px;width:90%;text-align:center;
  background:#1c1c22;border:1px solid rgba(255,90,90,0.35);
  border-radius:16px;padding:34px 32px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.03) inset;
}
.kick-icon{font-size:2.6rem;color:#ff5a5a;margin-bottom:14px}
.kick-box h2{margin:0 0 12px;color:#fff;font-size:1.32rem;font-weight:700}
.kick-reason{margin:0 0 14px;color:#ff6b6b;font-size:0.95rem;font-weight:600}
.kick-sub{margin:0 0 18px;color:rgba(255,255,255,0.6);font-size:0.86rem;line-height:1.55}
.kick-meta{
  margin:0 auto 20px;color:rgba(255,255,255,0.35);font-size:0.72rem;
  font-family:'Courier New',monospace;letter-spacing:0.3px;
}
.kick-btn{
  background:#d23b3b;border:none;border-radius:9px;color:#fff;
  padding:11px 30px;font-size:0.92rem;font-weight:700;cursor:pointer;
  transition:background .15s,transform .1s;
}
.kick-btn:hover{background:#e24747}
.kick-btn:active{transform:scale(0.97)}