/* ══════════════════════════════════════════
   CSS VARIABLES & THEMES
══════════════════════════════════════════ */
:root {
  /* ── DEFAULT (Light) ── */
  --bg:#f5f5f7;--bg-2:#ffffff;--bg-3:#ebebef;
  --surface:#ffffff;--surface-2:#f0f0f5;--surface-3:#e4e4ea;
  --scrollbar:rgba(0,0,0,0.12);--scrollbar-hover:rgba(0,0,0,0.22);
  --text:#1a1a2e;--text-2:#4a4a6a;--text-3:#8888aa;
  --accent:#ff6b35;--accent-2:#ff9a6c;--accent-glow:rgba(255,107,53,0.22);
  --blue:#2563eb;--blue-glow:rgba(37,99,235,0.18);
  --success:#16a34a;--warning:#d97706;--danger:#dc2626;
  --border:rgba(0,0,0,0.08);--border-2:rgba(0,0,0,0.14);
  --shadow:0 2px 12px rgba(0,0,0,0.10);--shadow-lg:0 8px 32px rgba(0,0,0,0.16);
  --radius: 18px;
  --radius-sm: 12px;
  --nav-h: 66px;
  --cat-h: 50px;
  --sidebar-w: 175px;
  --tr: all 0.2s cubic-bezier(0.4,0,0.2,1);
  --bg-rgb:245,245,247;
}
[data-theme="dark"] {
  --bg: #0d0d1a;
  --bg-2: #13132b;
  --bg-3: #1a1a38;
  --surface: #17173a;
  --surface-2: #1f1f4a;
  --surface-3: #282862;
  --scrollbar: rgba(255,255,255,0.08);
  --scrollbar-hover: rgba(255,255,255,0.18);
  --text: #f0f0ff;
  --text-2: #a8a8d8;
  --text-3: #6060a0;
  --accent: #ff6b35;
  --accent-2: #ff9a6c;
  --accent-glow: rgba(255,107,53,0.3);
  --blue: #4cc9f0;
  --blue-glow: rgba(76,201,240,0.25);
  --success: #22d472;
  --warning: #ffd60a;
  --danger: #ff3b5c;
  --border: rgba(255,255,255,0.07);
  --border-2: rgba(255,255,255,0.13);
  --shadow: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 14px 44px rgba(0,0,0,0.65);
  --bg-rgb: 13,13,26;
}
[data-theme="teal"] {
  --bg:#071f1f;--bg-2:#0c2e2e;--bg-3:#103a3a;
  --surface:#144545;--surface-2:#1c6060;--surface-3:#247878;
  --text:#e2fff8;--text-2:#9de8d8;--text-3:#6bb8ab;
  --accent:#2dd4bf;--accent-2:#5eead4;--accent-glow:rgba(45,212,191,0.3);
  --bg-rgb:7,31,31;
}
[data-theme="purple"] {
  --bg:#150a2e;--bg-2:#1e1040;--bg-3:#281852;
  --surface:#32206a;--surface-2:#402a7e;--surface-3:#503490;
  --text:#f3e8ff;--text-2:#d4b8ff;--text-3:#b080f8;
  --accent:#c084fc;--accent-2:#e2b6ff;--accent-glow:rgba(192,132,252,0.3);
  --bg-rgb:21,10,46;
}
[data-theme="ocean"] {
  --bg:#001628;--bg-2:#002040;--bg-3:#003058;
  --surface:#00407a;--surface-2:#005090;--surface-3:#0064b0;
  --text:#e6f4ff;--text-2:#98ccff;--text-3:#5090d8;
  --accent:#38d9f5;--accent-2:#80eeff;--accent-glow:rgba(56,217,245,0.3);
  --bg-rgb:0,22,40;
}
[data-theme="sunset"] {
  --bg:#201010;--bg-2:#301818;--bg-3:#401e1e;
  --surface:#502a2a;--surface-2:#643838;--surface-3:#784545;
  --text:#fff0e6;--text-2:#ffb380;--text-3:#d46040;
  --accent:#ff6b35;--accent-2:#ff9a6c;--accent-glow:rgba(255,107,53,0.3);
  --bg-rgb:32,16,16;
}

/* [data-theme="light"] is now the :root default above */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; height:100%; }
body {
  font-family:'Nunito',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  transition:background-color 0.3s,color 0.3s;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { border:none; cursor:pointer; font-family:inherit; background:none; }
img { display:block; max-width:100%; height:auto; }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--scrollbar); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:var(--scrollbar-hover); }

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
/* ── Navbar always solid — BG image NEVER bleeds into navbar/catbar ── */
/* Navbar itself: always solid theme bg */
body.has-bg-image .navbar {
  background:var(--bg-2) !important;
  border-bottom:2px solid var(--accent) !important;
  box-shadow:0 2px 24px rgba(0,0,0,.55) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.has-bg-image .category-bar {
  background:var(--bg-2) !important;
  border-bottom:1px solid var(--border-2) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* Sidebars always solid — BG image stays in CONTENT area only */
body.has-bg-image .side-col,
body.has-bg-image .qg-sidebar,
body.has-bg-image .qg-right {
  background:var(--bg-2) !important;
}

/* BG layer — ONLY covers the content area (below navbar+catbar, inside content cols) */
#qg-bg-layer {
  position:fixed;
  /* top starts below navbar + category bar */
  top:calc(var(--nav-h) + var(--cat-h));
  left:0; right:0; bottom:0;
  z-index:-2;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:opacity .5s ease;
  pointer-events:none; opacity:0;
}

/* ══ NAVBAR BASE RULE ══ */
.navbar {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  background:var(--bg-2);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  display:flex; align-items:center; padding:0 20px; gap:14px;
  z-index:1000;
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 20px rgba(0,0,0,0.35);
}
.nav-drawer-toggle {
  width:40px; height:40px; border-radius:10px;
  background:rgba(255,255,255,0.06); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); flex-shrink:0;
  transition:var(--tr);
}
.nav-drawer-toggle:hover { background:rgba(255,255,255,0.14); border-color:var(--accent); }
.nav-logo {
  font-family:'Fredoka One',cursive; font-size:1.55rem; font-weight:400;
  display:flex; align-items:center; gap:10px;
  white-space:nowrap; flex-shrink:0; letter-spacing:0.02em;
}
.logo-icon {
  width:42px; height:42px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-radius:13px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; box-shadow:0 0 24px var(--accent-glow);
  transition:transform 0.3s;
}
.logo-icon img { width:100%; height:100%; object-fit:cover; }
.logo-icon-fallback { font-size:1.5rem; }
.nav-logo:hover .logo-icon { transform:rotate(8deg) scale(1.08); }
.logo-text {
  background:linear-gradient(135deg,#fff 30%,var(--accent-2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.nav-search { flex:1; max-width:500px; position:relative; }
.search-container { position:relative; width:100%; }
.nav-search input {
  width:100%; height:44px; padding:0 46px 0 20px;
  border-radius:30px; border:2px solid var(--border);
  background:rgba(255,255,255,0.05); color:var(--text);
  font-family:'Nunito',sans-serif; font-size:0.9rem; font-weight:600;
  outline:none; transition:var(--tr);
}
.nav-search input::placeholder { color:var(--text-3); font-weight:500; }
.nav-search input:focus {
  border-color:var(--accent); background:rgba(255,255,255,0.09);
  box-shadow:0 0 0 4px var(--accent-glow);
}
.search-icon { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--text-2); pointer-events:none; font-size:1.05rem; }
.search-shortcut {
  position:absolute; right:44px; top:50%; transform:translateY(-50%);
  background:var(--surface-2); color:var(--text-3);
  font-size:0.62rem; font-weight:800; padding:2px 7px;
  border-radius:5px; border:1px solid var(--border);
  pointer-events:none; letter-spacing:0.05em;
}
.search-dropdown {
  display:none; position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:var(--surface); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg); border:1px solid var(--border-2);
  z-index:1000; max-height:420px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.search-dropdown.open { display:block; animation:slideDown 0.18s ease; }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.search-item {
  display:flex; align-items:center; gap:13px;
  padding:10px 14px; cursor:pointer; transition:background 0.12s;
  border-bottom:1px solid var(--border);
}
.search-item:last-child { border-bottom:none; }
.search-item:hover,.search-item.focused { background:var(--surface-2); }
.search-item-thumb {
  width:44px; height:44px; border-radius:10px;
  object-fit:cover; flex-shrink:0; background:var(--surface-3);
  overflow:hidden;
}
.search-item-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.search-item-info { flex:1; min-width:0; }
.search-item-title { font-weight:800; font-size:0.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-item-cat { font-size:0.68rem; color:var(--text-3); margin-top:2px; text-transform:capitalize; }

.nav-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.theme-wrap { position:relative; }
.theme-btn {
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,0.06); color:var(--text); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  transition:var(--tr); border:2px solid var(--border);
}
.theme-btn:hover { background:rgba(255,255,255,0.14); transform:scale(1.1) rotate(30deg); border-color:var(--accent); }
.theme-dropdown {
  display:none; position:absolute; top:calc(100% + 10px); right:0;
  background:var(--surface); border-radius:var(--radius-sm);
  padding:8px; min-width:180px; box-shadow:var(--shadow-lg);
  border:1px solid var(--border-2); z-index:1000;
}
.theme-dropdown.open { display:block; animation:popIn 0.14s ease; }
@keyframes popIn { from{opacity:0;transform:scale(0.94) translateY(-4px)} to{opacity:1;transform:none} }
.theme-option {
  display:flex; align-items:center; gap:12px; padding:9px 12px;
  border-radius:9px; font-size:0.88rem; font-weight:700; color:var(--text-2);
  cursor:pointer; transition:background 0.12s;
}
.theme-option:hover { background:var(--surface-2); color:var(--text); }
.theme-option.active { color:var(--accent); }
.theme-dot { width:18px; height:18px; border-radius:50%; flex-shrink:0; }
.account-btn {
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,0.06); color:var(--text); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  transition:var(--tr); border:2px solid var(--border);
}
.account-btn:hover { background:var(--accent); border-color:var(--accent); transform:scale(1.1); }

/* ══════════════════════════════════════════
   BG SETTINGS PANEL — Background Picker
══════════════════════════════════════════ */
/* #qg-bg-layer defined above in NAVBAR section — do not duplicate */
.bg-settings-btn {
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,0.06); color:var(--text);
  font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  transition:var(--tr); border:2px solid var(--border); flex-shrink:0; cursor:pointer;
  position:relative;
}
.bg-settings-btn:hover { background:rgba(255,255,255,0.14); border-color:var(--accent); }
.bg-settings-btn .bg-notif-dot {
  position:absolute; top:5px; right:5px;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); display:none;
  box-shadow:0 0 0 2px var(--bg-2);
}
.bg-settings-btn.has-bg .bg-notif-dot { display:block; }
#bg-settings-panel {
  position:fixed; top:calc(var(--nav-h) + 10px); right:14px; z-index:3000;
  width:min(340px, calc(100vw - 20px));
  max-height:calc(100vh - var(--nav-h) - 30px);
  background:var(--bg-2); border:1px solid var(--border-2);
  border-radius:18px; box-shadow:0 20px 70px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
  overflow:hidden; display:flex; flex-direction:column;
  transform:translateY(-12px) scale(.96); opacity:0;
  pointer-events:none;
  transition:transform .24s cubic-bezier(.16,1,.3,1), opacity .2s;
}
#bg-settings-panel.open { transform:none; opacity:1; pointer-events:all; }
.bsp-head {
  display:flex; align-items:center; gap:10px;
  padding:13px 15px 11px; border-bottom:1px solid var(--border);
  background:var(--bg-3); flex-shrink:0;
}
.bsp-title { font-family:'Fredoka One',cursive; font-size:1rem; flex:1; color:var(--text); }
.bsp-close {
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  color:var(--text-2); font-size:.8rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:var(--tr);
}
.bsp-close:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
.bsp-body { flex:1; overflow-y:auto; padding:13px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.bsp-body::-webkit-scrollbar { width:4px; }
.bsp-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.bsp-section-title {
  font-size:.6rem; font-weight:900; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-3); margin-bottom:7px; margin-top:2px;
}
.bsp-opacity-row {
  display:flex; align-items:center; gap:9px; margin-bottom:13px;
  padding:9px 11px; background:var(--surface); border-radius:10px; border:1px solid var(--border);
}
.bsp-opacity-label { font-size:.76rem; font-weight:800; color:var(--text-2); white-space:nowrap; }
.bsp-opacity-val { font-size:.78rem; font-weight:900; color:var(--accent); min-width:34px; text-align:right; flex-shrink:0; }
#bgOpacitySlider {
  flex:1; -webkit-appearance:none; appearance:none;
  height:4px; border-radius:4px; outline:none; cursor:pointer;
  background:linear-gradient(to right, var(--accent) 0%, var(--accent) 70%, var(--border-2) 70%, var(--border-2) 100%);
}
#bgOpacitySlider::-webkit-slider-thumb {
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--accent); cursor:pointer; box-shadow:0 2px 8px var(--accent-glow);
  transition:transform .15s;
}
#bgOpacitySlider::-webkit-slider-thumb:hover { transform:scale(1.3); }
#bgOpacitySlider::-moz-range-thumb {
  width:16px; height:16px; border-radius:50%; border:none;
  background:var(--accent); cursor:pointer;
}
.bsp-none-btn {
  width:100%; padding:8px 13px; margin-bottom:12px;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:10px; color:var(--text-2); font-size:.8rem; font-weight:800;
  cursor:pointer; transition:var(--tr); display:flex; align-items:center; gap:8px;
  font-family:'Nunito',sans-serif;
}
.bsp-none-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--surface-2); }
.bsp-none-btn.active { border-color:var(--accent); color:var(--accent); background:rgba(255,107,53,.09); }

/* ── Match theme to BG toggle ── */
.bsp-theme-from-bg-row {
  margin-bottom:12px; padding:10px 12px;
  background:var(--surface); border-radius:10px;
  border:1.5px solid var(--border);
}
.bsp-toggle-label {
  display:flex; align-items:center; gap:10px; cursor:pointer; width:100%;
}
.bsp-toggle-icon { font-size:1.1rem; flex-shrink:0; }
.bsp-toggle-text { flex:1; }
.bsp-toggle-text strong { display:block; font-size:.8rem; font-weight:800; color:var(--text); }
.bsp-toggle-text small { display:block; font-size:.66rem; color:var(--text-3); margin-top:1px; }
.bsp-toggle-switch { flex-shrink:0; position:relative; width:38px; height:22px; }
.bsp-toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.bsp-toggle-track {
  position:absolute; inset:0; border-radius:11px;
  background:var(--surface-3); border:1.5px solid var(--border);
  transition:background .2s, border-color .2s; cursor:pointer;
}
.bsp-toggle-track::after {
  content:''; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%;
  background:#fff; transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.bsp-toggle-switch input:checked + .bsp-toggle-track { background:var(--accent); border-color:var(--accent); }
.bsp-toggle-switch input:checked + .bsp-toggle-track::after { transform:translateX(16px); }
.bsp-cats {
  display:flex; gap:5px; flex-wrap:wrap; margin-bottom:11px;
}
.bsp-cat {
  padding:4px 11px; border-radius:20px;
  background:var(--surface); border:1.5px solid var(--border);
  color:var(--text-3); font-size:.68rem; font-weight:800;
  cursor:pointer; transition:var(--tr); font-family:'Nunito',sans-serif;
}
.bsp-cat:hover { border-color:var(--accent); color:var(--accent); }
.bsp-cat.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.bsp-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
}
.bsp-thumb {
  position:relative; aspect-ratio:16/9; border-radius:9px; overflow:hidden;
  cursor:pointer; border:2.5px solid transparent;
  transition:transform .18s, border-color .18s, box-shadow .18s;
  background:var(--surface-2);
}
.bsp-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; }
.bsp-thumb:hover { transform:scale(1.06); border-color:var(--accent); box-shadow:0 5px 16px rgba(0,0,0,.55); }
.bsp-thumb:hover img { transform:scale(1.12); }
.bsp-thumb.active { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow), 0 5px 18px rgba(0,0,0,.55); }
.bsp-thumb-label {
  position:absolute; bottom:0; left:0; right:0;
  padding:10px 4px 3px;
  background:linear-gradient(transparent, rgba(0,0,0,.88));
  font-size:.55rem; font-weight:900; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:center; letter-spacing:.04em;
}
.bsp-check {
  position:absolute; top:4px; right:4px;
  width:17px; height:17px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:.62rem;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
}
.bsp-thumb.active .bsp-check { display:flex; }

/* ══════════════════════════════════════════
   CATEGORY BAR
══════════════════════════════════════════ */
.category-bar {
  position:fixed; top:var(--nav-h); left:0; right:0;
  height:var(--cat-h);
  background:var(--bg-2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 16px; gap:5px;
  overflow-x:auto; overflow-y:hidden; z-index:900;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.category-bar::-webkit-scrollbar { display:none; }
.category-pill {
  display:flex; align-items:center; gap:6px; padding:6px 16px;
  border-radius:30px; background:rgba(255,255,255,0.04); color:var(--text-2);
  font-size:0.8rem; font-weight:800; white-space:nowrap;
  cursor:pointer; transition:var(--tr); border:2px solid transparent; flex-shrink:0;
}
.category-pill .pill-img {
  width:18px; height:18px; border-radius:4px; object-fit:cover; flex-shrink:0;
}
.category-pill:hover { background:rgba(255,255,255,0.09); color:var(--text); transform:translateY(-2px); }
.category-pill.active {
  background:var(--accent); color:white;
  border-color:rgba(255,255,255,0.2); box-shadow:0 4px 14px var(--accent-glow);
}

/* ══════════════════════════════════════════
   PAGE & MAIN GRID
══════════════════════════════════════════ */
.page-wrap {
  padding-top:calc(var(--nav-h) + var(--cat-h));
  min-height:100vh;
}
.main-grid {
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr var(--sidebar-w);
  gap:14px; padding:16px;
  max-width:1600px; margin:0 auto;
}

/* ══ EMBED MODE ══ */
body.embed-mode .navbar,
body.embed-mode .category-bar,
body.embed-mode .back-to-top,
body.embed-mode .toast-container,
body.embed-mode .gib,
body.embed-mode .game-desc,
body.embed-mode .bottom-sec,
body.embed-mode .bottom-section,
body.embed-mode #gm-backdrop { display:none !important; }
body.embed-mode .page-wrap { padding-top:0 !important; min-height:100vh; overflow:hidden; }
body.embed-mode .main-grid { grid-template-columns:1fr !important; padding:0 !important; gap:0 !important; max-width:100% !important; height:100vh !important; }
body.embed-mode .side-col { display:none !important; }
body.embed-mode .center-col { width:100% !important; }
body.embed-mode .game-wrap { border-radius:0 !important; border:none !important; box-shadow:none !important; height:100vh !important; display:flex; flex-direction:column; }
body.embed-mode .game-infobar { display:none !important; }
body.embed-mode .game-desc { display:none !important; }
body.embed-mode .game-box { flex:1 !important; min-height:0 !important; height:100% !important; width:100vw !important; }
body.embed-mode .game-box iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
html.embed { overflow:hidden; }
html.embed body { overflow:hidden; height:100vh; }

/* ══════════════════════════════════════════
   SIDE COLUMNS + CARDS
══════════════════════════════════════════ */
.side-col { display:flex; flex-direction:column; gap:10px; position:sticky; top:calc(var(--nav-h) + var(--cat-h) + 16px); align-self:start; max-height:calc(100vh - var(--nav-h) - var(--cat-h) - 32px); overflow-y:auto; scrollbar-width:none; }
.side-col::-webkit-scrollbar { display:none; }

.side-card {
  position:relative; border-radius:var(--radius-sm);
  overflow:hidden; aspect-ratio:1;
  background:var(--surface); box-shadow:var(--shadow);
  transition:var(--tr); border:2px solid transparent;
  cursor:pointer; display:block;
}
.side-card:hover {
  transform:scale(1.05) translateY(-5px);
  box-shadow:var(--shadow-lg),0 0 0 2px var(--accent);
  border-color:var(--accent); z-index:10;
}
.side-card > img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; position:absolute; inset:0; }
.side-card:hover > img { transform:scale(1.1); }
.side-card .gph {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  font-size:2.8rem; width:100%; height:100%;
}
.side-hover {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.18s; z-index:3;
}
.side-card:hover .side-hover { opacity:1; }
.side-play {
  width:52px; height:52px; background:rgba(255,255,255,0.96);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:var(--accent); box-shadow:0 6px 20px rgba(0,0,0,0.4);
  transform:scale(0.82); transition:transform 0.18s;
}
.side-card:hover .side-play { transform:scale(1); }
.card-badge {
  position:absolute; top:8px; left:8px;
  font-size:0.56rem; font-weight:900; text-transform:uppercase;
  padding:4px 9px; border-radius:20px; z-index:4; letter-spacing:0.5px;
}
.badge-new { background:var(--success); color:white; }
.badge-hot { background:var(--danger); color:white; }
.badge-top { background:var(--warning); color:#000; }
.card-title {
  position:absolute; bottom:0; left:0; right:0;
  padding:30px 8px 8px;
  background:linear-gradient(transparent,rgba(0,0,0,0.9));
  font-size:0.72rem; font-weight:800; color:white;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transition:opacity 0.18s; z-index:3;
}
.side-card:hover .card-title { opacity:1; }

/* ══════════════════════════════════════════
   CENTER COLUMN — GAME AREA
══════════════════════════════════════════ */
.center-col { min-width:0; }
.game-wrap {
  background:var(--surface); border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
}
.game-infobar {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background:var(--bg-2);
}
.gib-icon {
  width:40px; height:40px; border-radius:10px;
  background:var(--surface-2); flex-shrink:0;
  object-fit:cover; overflow:hidden;
}
.gib-title { font-family:'Fredoka One',cursive; font-size:1.1rem; font-weight:400; color:var(--text); flex:1; }
.gib-acts { display:flex; gap:6px; }
.g-btn {
  display:flex; align-items:center; gap:5px;
  background:var(--surface-2); color:var(--text-2);
  font-family:'Nunito',sans-serif; font-size:0.78rem; font-weight:800;
  padding:7px 13px; border-radius:10px; border:2px solid var(--border);
  cursor:pointer; transition:var(--tr);
}
.g-btn:hover { color:var(--accent); background:var(--surface-3); border-color:var(--accent); transform:translateY(-2px); }
.g-btn.liked { color:var(--success); background:rgba(34,212,114,0.1); border-color:var(--success); }
.g-btn.disliked { color:var(--danger); background:rgba(255,59,92,0.1); border-color:var(--danger); }
.game-box {
  position:relative; width:100%;
  /* Height = viewport minus navbar, catbar, infobar, and action bar */
  height:calc(100vh - var(--nav-h) - var(--cat-h) - 66px - 54px);
  min-height:400px;
  display:flex; align-items:stretch; justify-content:stretch;
  background:#000;
  overflow:hidden;
}
.game-box iframe {
  position:absolute; inset:0;
  width:100%; height:100%;
  border:none; display:block;
}
.game-box.fullscreen {
  position:fixed; inset:0; z-index:4000;
  border-radius:0; height:100vh; min-height:100vh;
}

.game-desc {
  padding:18px; border-top:1px solid var(--border); background:var(--surface);
}
.desc-tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.desc-tab {
  padding:7px 18px; border-radius:30px; font-size:0.82rem; font-weight:800;
  background:var(--surface-2); color:var(--text-2); cursor:pointer;
  transition:var(--tr); border:2px solid transparent;
}
.desc-tab:hover { color:var(--text); border-color:var(--border-2); }
.desc-tab.active { background:var(--accent); color:white; box-shadow:0 4px 14px var(--accent-glow); }
.desc-panel { display:none; animation:fadeIn 0.25s ease; }
.desc-panel.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.desc-panel p { font-size:0.92rem; line-height:1.8; color:var(--text-2); margin-bottom:0.9rem; }
.desc-panel h3 { font-family:'Fredoka One',cursive; font-size:1.1rem; color:var(--accent); margin:1rem 0 0.4rem; }
.desc-panel ul { padding-left:1.4rem; color:var(--text-2); line-height:2; margin-bottom:0.9rem; }
.tags-row { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }
.g-tag {
  padding:5px 14px; border-radius:30px; background:var(--surface-2);
  color:var(--text-2); font-size:0.78rem; font-weight:700;
  border:1px solid var(--border); transition:var(--tr); cursor:default;
}
.g-tag:hover { color:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.stats-row { display:flex; gap:22px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); flex-wrap:wrap; }
.stat-it { text-align:center; }
.stat-val { font-size:1.2rem; font-weight:900; color:var(--accent); }
.stat-lbl { font-size:0.66rem; color:var(--text-3); font-weight:800; text-transform:uppercase; letter-spacing:0.4px; margin-top:3px; }

/* ══════════════════════════════════════════
   BOTTOM STRIP (More Games)
══════════════════════════════════════════ */
.bottom-sec, .bottom-section {
  grid-column:1/-1;
  padding:6px 0 20px;
}
.sec-head, .section-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.sec-head h2, .section-header h2 {
  font-family:'Fredoka One',cursive; font-size:1.3rem; font-weight:400;
  color:var(--text); display:flex; align-items:center; gap:8px;
  letter-spacing:0.02em;
}
.see-all, .see-all-link {
  font-size:0.82rem; font-weight:800; color:var(--text-2);
  background:var(--surface-2); padding:7px 18px; border-radius:30px;
  transition:var(--tr); border:2px solid var(--border); cursor:pointer;
}
.see-all:hover, .see-all-link:hover {
  background:var(--accent); color:white; border-color:var(--accent); transform:translateY(-2px);
}

/* ── g-strip (small card row) ── */
.g-strip, .games-strip {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:10px;
}
.g-card {
  position:relative; border-radius:var(--radius-sm);
  overflow:hidden; aspect-ratio:1;
  background:var(--surface); box-shadow:var(--shadow);
  transition:var(--tr); border:2px solid transparent;
  cursor:pointer; display:block;
}
.g-card:hover {
  transform:scale(1.07) translateY(-5px);
  box-shadow:var(--shadow-lg),0 0 0 2px var(--accent);
  border-color:var(--accent); z-index:5;
}
.g-card > img { width:100%; height:100%; object-fit:cover; transition:transform 0.25s; position:absolute; inset:0; }
.g-card:hover > img { transform:scale(1.12); }
.g-card .gph {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; width:100%; height:100%;
}
.g-hover {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.18s;
  font-size:1.5rem; color:white; font-weight:900; z-index:3;
}
.g-card:hover .g-hover { opacity:1; }
.g-title {
  position:absolute; bottom:0; left:0; right:0;
  padding:24px 6px 6px;
  background:linear-gradient(transparent,rgba(0,0,0,0.92));
  font-size:0.68rem; font-weight:800; color:white;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:2;
}

/* ══════════════════════════════════════════
   HOME — FEATURED WRAP
══════════════════════════════════════════ */
.featured-wrap { width:100%; }
.featured-frame {
  position:relative; width:100%;
  aspect-ratio:16/9; background:var(--bg-3);
  border-radius:var(--radius) var(--radius) 0 0;
  overflow:hidden; cursor:pointer;
}
.featured-bg { width:100%; height:100%; object-fit:cover; }
.featured-frame .gph {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  font-size:5.5rem; width:100%; height:100%;
}
.feat-overlay {
  position:absolute; inset:0;
  background:linear-gradient(transparent 30%,rgba(0,0,0,0.82));
}
.feat-big-play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:80px; height:80px; border-radius:50%;
  background:rgba(255,255,255,0.94); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; box-shadow:0 8px 32px rgba(0,0,0,0.5);
  transition:var(--tr); z-index:2;
}
.featured-frame:hover .feat-big-play { transform:translate(-50%,-50%) scale(1.12); }
.featured-info {
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; background:var(--surface);
  border:1px solid var(--border); border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
}
.feat-icon {
  width:52px; height:52px; border-radius:13px;
  background:var(--surface-2); flex-shrink:0; object-fit:cover; overflow:hidden;
}
.feat-icon .gph { font-size:1.9rem; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.feat-texts { flex:1; min-width:0; }
.feat-name { font-family:'Fredoka One',cursive; font-size:1.15rem; font-weight:400; color:var(--text); letter-spacing:0.02em; }
.feat-by { font-size:0.72rem; color:var(--text-3); font-weight:700; }
.feat-btns { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.feat-btn {
  display:flex; align-items:center; gap:5px;
  background:var(--surface-2); color:var(--text-2);
  font-size:0.78rem; font-weight:800; padding:8px 14px;
  border-radius:10px; border:2px solid var(--border);
  transition:var(--tr); cursor:pointer;
}
.feat-btn:hover { color:var(--accent); background:var(--surface-3); border-color:var(--accent); transform:translateY(-2px); }
.feat-play-btn {
  background:var(--accent) !important; color:white !important;
  border-color:var(--accent) !important;
  box-shadow:0 4px 14px var(--accent-glow) !important;
}
.feat-play-btn:hover { transform:translateY(-2px) scale(1.04) !important; }

/* ══════════════════════════════════════════
   SECTION ROWS (category splits)
══════════════════════════════════════════ */
.cat-section { grid-column:1/-1; margin-bottom:8px; }
.cat-section-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; padding-bottom:10px;
  border-bottom:2px solid var(--border);
}
.cat-section-head h3 {
  font-family:'Fredoka One',cursive; font-size:1.1rem; font-weight:400;
  color:var(--text); display:flex; align-items:center; gap:8px;
}
.cat-badge {
  font-size:0.6rem; font-weight:900; padding:3px 10px; border-radius:20px;
  background:var(--accent); color:white; letter-spacing:0.05em;
}

/* ══════════════════════════════════════════
   POKI-STYLE GAME MODAL
══════════════════════════════════════════ */
#gm-backdrop {
  display:none;
  position:fixed; inset:0; z-index:5000;
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  align-items:center; justify-content:center;
  padding:0; overflow-y:auto;
}
#gm-backdrop.open { display:flex; }
#gm-modal {
  position:relative;
  width:min(1120px, 96vw);
  max-height:96vh;
  background:var(--surface);
  border-radius:22px;
  border:1px solid var(--border-2);
  box-shadow:0 0 100px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06);
  overflow:hidden; display:flex; flex-direction:column;
  animation:gmRise 0.32s cubic-bezier(0.16,1,0.3,1);
  margin:auto;
}
@keyframes gmRise {
  from { transform:scale(0.88) translateY(30px); opacity:0; }
  to   { transform:none; opacity:1; }
}
#gm-topbar {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; flex-shrink:0;
  border-bottom:1px solid var(--border);
  background:var(--bg-2);
}
#gm-topbar-icon {
  width:38px; height:38px; border-radius:10px;
  background:var(--surface-3); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  overflow:hidden;
}
#gm-topbar-icon img { width:100%; height:100%; object-fit:cover; }
#gm-topbar-title {
  flex:1; font-family:'Fredoka One',cursive; font-size:1.05rem; font-weight:400; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#gm-close-btn {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,0.06); color:var(--text);
  font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); cursor:pointer; transition:var(--tr);
}
#gm-close-btn:hover { background:var(--danger); color:white; border-color:var(--danger); transform:scale(1.08); }
#gm-body { display:flex; flex:1; overflow:hidden; min-height:0; }
#gm-game-col { flex:1; display:flex; flex-direction:column; min-width:0; overflow-y:auto; }
#gm-game-frame {
  position:relative; width:100%; flex-shrink:0;
  background:#000; min-height:480px;
}
#gm-game-frame > * { position:absolute; inset:0; width:100%; height:100%; }
#gm-action-bar {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; flex-shrink:0;
  border-top:1px solid var(--border);
  background:var(--surface);
}
.gm-action-btn {
  display:flex; align-items:center; gap:5px;
  background:var(--surface-2); color:var(--text-2);
  font-family:'Nunito',sans-serif; font-size:0.78rem; font-weight:800;
  padding:7px 14px; border-radius:10px; border:2px solid var(--border);
  cursor:pointer; transition:var(--tr);
}
.gm-action-btn:hover { color:var(--accent); background:var(--surface-3); border-color:var(--accent); transform:translateY(-1px); }
.gm-action-btn.liked { color:var(--success); background:rgba(34,212,114,0.1); border-color:var(--success); }
#gm-fullscreen-btn { margin-left:auto; }
#gm-sidebar {
  width:200px; flex-shrink:0;
  background:var(--bg-2); border-left:1px solid var(--border);
  overflow-y:auto; padding:12px 10px;
  display:flex; flex-direction:column; gap:8px;
}
#gm-sidebar-title {
  font-size:0.66rem; font-weight:900; text-transform:uppercase;
  letter-spacing:0.09em; color:var(--text-3); padding:0 4px;
  margin-bottom:4px;
}
.gm-side-card {
  position:relative; border-radius:10px; overflow:hidden;
  aspect-ratio:1; background:var(--surface); cursor:pointer;
  display:block; border:2px solid transparent; transition:var(--tr); flex-shrink:0;
}
.gm-side-card:hover {
  transform:scale(1.04) translateY(-2px);
  box-shadow:var(--shadow),0 0 0 2px var(--accent);
  border-color:var(--accent);
}
.gm-side-card img { width:100%; height:100%; object-fit:cover; }
.gm-side-card .gph {
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:2rem;
}
.gm-side-card .g-hover {
  position:absolute; inset:0; background:rgba(0,0,0,0.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.15s; font-size:1.2rem; color:white; z-index:3;
}
.gm-side-card:hover .g-hover { opacity:1; }
.gm-side-label {
  position:absolute; bottom:0; left:0; right:0;
  padding:18px 6px 5px;
  background:linear-gradient(transparent,rgba(0,0,0,0.9));
  font-size:0.65rem; font-weight:800; color:white;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:2;
}
@media(max-width:700px) {
  #gm-body { flex-direction:column; }
  #gm-sidebar { width:100%; border-left:none; border-top:1px solid var(--border); flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:10px; gap:8px; }
  .gm-side-card { width:90px; height:90px; flex-shrink:0; aspect-ratio:unset; }
}

/* ══════════════════════════════════════════
   BACK TO TOP / TOAST
══════════════════════════════════════════ */
.back-to-top {
  position:fixed; bottom:28px; right:28px;
  width:50px; height:50px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:white; font-size:1.2rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transform:translateY(20px);
  transition:var(--tr); z-index:900;
  box-shadow:0 4px 20px var(--accent-glow);
  border:2px solid rgba(255,255,255,0.25);
}
.back-to-top.show { opacity:1; transform:translateY(0); }
.back-to-top:hover { transform:translateY(-5px) scale(1.1); }

.toast-container {
  position:fixed; bottom:28px; left:28px; z-index:9999;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast-item {
  background:var(--surface); color:var(--text);
  padding:12px 22px; border-radius:50px; font-size:0.88rem; font-weight:700;
  box-shadow:var(--shadow-lg); animation:toastIn 0.28s ease;
  pointer-events:auto; border:1px solid var(--border-2);
  backdrop-filter:blur(12px); display:flex; align-items:center; gap:10px;
  max-width:340px;
}
.toast-item.success { border-left:4px solid var(--success); }
.toast-item.error   { border-left:4px solid var(--danger); }
.toast-item.warning { border-left:4px solid var(--warning); }
@keyframes toastIn { from{transform:translateX(-100%);opacity:0} to{transform:none;opacity:1} }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1100px) {
  :root { --sidebar-w:155px; }
  .main-grid { grid-template-columns:155px 1fr 155px; gap:10px; padding:12px; }
}
@media(max-width:860px) {
  :root { --sidebar-w:130px; }
  .main-grid { grid-template-columns:130px 1fr 130px; }
}
@media(max-width:680px) {
  :root { --nav-h:58px; --cat-h:46px; }
  .main-grid { grid-template-columns:1fr; padding:10px; }
  .side-col { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .g-strip,.games-strip { grid-template-columns:repeat(3,1fr); gap:8px; }
  .logo-text { display:none; }
  .gib-acts { flex-wrap:wrap; }
}
@media(max-width:480px) {
  .side-col { grid-template-columns:repeat(2,1fr); }
  .g-strip,.games-strip { grid-template-columns:repeat(2,1fr); }
  .navbar { padding:0 10px; gap:8px; }
  .feat-btns { flex-wrap:wrap; gap:4px; }
  .feat-btn { padding:6px 10px; font-size:0.72rem; }
}

/* ══════════════════════════════════════════
   NAV DRAWER (left slide-out)
══════════════════════════════════════════ */
:root {
  --drawer-w: 270px;
  --panel-h: 56px;
}
/* Hamburger toggle button — visible always */
.nav-drawer-toggle {
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,0.06); color:var(--text);
  font-size:1.2rem; display:flex; align-items:center; justify-content:center;
  transition:var(--tr); border:2px solid var(--border); flex-shrink:0; cursor:pointer;
}
.nav-drawer-toggle:hover { background:rgba(255,255,255,0.14); border-color:var(--accent); }

/* Overlay behind drawer */
#nav-drawer-overlay {
  display:none; position:fixed; inset:0; z-index:1099;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
#nav-drawer-overlay.open { display:block; }

/* Drawer itself */
#nav-drawer {
  position:fixed; top:0; left:0; bottom:0; z-index:1100;
  width:var(--drawer-w); background:var(--bg-2);
  border-right:1px solid var(--border-2);
  box-shadow:4px 0 32px rgba(0,0,0,0.55);
  transform:translateX(-100%);
  transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
  display:flex; flex-direction:column; overflow:hidden;
}
#nav-drawer.open { transform:translateX(0); }

.drawer-head {
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--border);
  background:var(--bg-3); flex-shrink:0;
}
.drawer-logo {
  font-family:'Fredoka One',cursive; font-size:1.3rem;
  background:linear-gradient(135deg,#fff 30%,var(--accent-2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  flex:1;
}
.drawer-close {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.06); color:var(--text);
  font-size:1rem; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); cursor:pointer; transition:var(--tr);
}
.drawer-close:hover { background:var(--danger); color:#fff; border-color:var(--danger); }

.drawer-body { flex:1; overflow-y:auto; padding:14px 12px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.drawer-section { margin-bottom:18px; }
.drawer-section-title {
  font-size:0.6rem; font-weight:900; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--text-3); padding:0 8px; margin-bottom:8px;
}
.drawer-link {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px; color:var(--text-2);
  font-size:0.88rem; font-weight:700; cursor:pointer;
  transition:var(--tr); text-decoration:none; border:2px solid transparent;
}
.drawer-link:hover { background:var(--surface); color:var(--text); }
.drawer-link.active { background:rgba(255,107,53,0.12); color:var(--accent); border-color:rgba(255,107,53,0.25); }
.drawer-link .dl-icon { font-size:1.1rem; width:22px; text-align:center; flex-shrink:0; }
.drawer-link .dl-badge {
  margin-left:auto; font-size:0.6rem; font-weight:900;
  padding:2px 8px; border-radius:20px; background:var(--accent); color:#fff;
}

.drawer-divider { height:1px; background:var(--border); margin:8px 0; }

/* ══════════════════════════════════════════
   RIGHT SIDEBAR PANEL (collapsible on desktop)
══════════════════════════════════════════ */
#right-sidebar-toggle {
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,0.06); color:var(--text);
  font-size:1rem; display:flex; align-items:center; justify-content:center;
  transition:var(--tr); border:2px solid var(--border); cursor:pointer;
}
#right-sidebar-toggle:hover { background:rgba(255,255,255,0.14); border-color:var(--accent); }

/* ══════════════════════════════════════════
   MOBILE BOTTOM PANEL — PUBG style tabs
══════════════════════════════════════════ */
#mobile-panel {
  display:none; /* shown only on mobile via media query */
  position:fixed; bottom:0; left:0; right:0; z-index:900;
  flex-direction:column;
}
/* Tab bar */
#mp-tabbar {
  display:flex; align-items:stretch;
  background:rgba(8,8,20,0.97); backdrop-filter:blur(24px);
  border-top:1px solid rgba(255,107,53,0.25);
  padding:6px 6px max(env(safe-area-inset-bottom,6px),6px);
  gap:4px;
}
.mp-tab {
  flex:1; padding:8px 4px; border-radius:10px;
  background:var(--surface); border:1.5px solid var(--border);
  color:var(--text-2); font-family:'Nunito',sans-serif;
  font-weight:800; font-size:0.62rem; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:var(--tr);
}
.mp-tab .mp-icon { font-size:1.1rem; line-height:1; }
.mp-tab:active, .mp-tab.active {
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent; color:#fff;
}
.mp-tab.primary {
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent; color:#fff;
}

/* Panel sheets that slide up */
#mp-sheet {
  background:rgba(8,8,20,0.98); backdrop-filter:blur(24px);
  border-top:1px solid var(--border-2);
  max-height:0; overflow:hidden;
  transition:max-height 0.32s cubic-bezier(0.4,0,0.2,1);
}
#mp-sheet.open { max-height:60vh; overflow-y:auto; }
.mp-sheet-inner { padding:14px 16px 10px; }
.mp-sheet-title {
  font-family:'Fredoka One',cursive; font-size:1rem;
  color:var(--text); margin-bottom:12px;
  display:flex; align-items:center; justify-content:space-between;
}
.mp-sheet-close {
  width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--text-2); font-size:0.8rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

@media(max-width:680px) {
  #mobile-panel { display:flex; }
  body { padding-bottom:calc(var(--panel-h) + max(env(safe-area-inset-bottom,0px),0px)); }
}