/* =====================================================================
   PRIMEz HUB — GAMING / HACKER SKIN  (css/gaming.css)
   Loaded AFTER main.css + themes.css so it overrides the base look.
   Opera-GX flavoured: near-black surfaces, angular cut corners, neon
   glow (not soft shadows), uppercase condensed HUD type, scanline grid.
   Remove this one <link> to revert to the original look.
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  --font-sans: 'Rajdhani', 'Chakra Petch', system-ui, sans-serif;
  --font-display: 'Chakra Petch', 'Rajdhani', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-sm: 3px; --radius-md: 5px; --radius-lg: 7px; --radius-xl: 9px;
  --gx-accent: #a855f7;
  --gx-accent-rgb: 168,85,247;
  --gx-accent2: #22d3ee;
  --gx-accent2-rgb: 34,211,238;
  --gx-bg: #05060a;
  --gx-surface: rgba(10,12,19,0.82);
  --gx-line: rgba(var(--gx-accent-rgb),0.35);
}

html, body { font-family: var(--font-sans); }
body { background-color: var(--gx-bg); letter-spacing: .01em; }

/* faint animated HUD grid behind everything (pointer-events: none) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .25;
  background-image:
    linear-gradient(to right, rgba(var(--gx-accent-rgb),0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--gx-accent2-rgb),0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 85%);
  animation: gxGridDrift 26s linear infinite;
}
@keyframes gxGridDrift { from { background-position: 0 0, 0 0; } to { background-position: 40px 40px, 40px 40px; } }

/* ---------- typography: condensed + uppercase HUD ---------- */
h1, h2, h3, h4, .section-headline, .hero-title, .brand-title, .drawer-user-title,
.modal-header-bar h3, .tool-card-title, .panel-head h3 {
  font-family: var(--font-display) !important;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.nav-item, .btn, .btn-subtle, .btn-primary-gradient, .pill-button, .chip,
.profile-tab-btn, .theme-pill, .tt-btn, .seg-btn, .ctl-hide, .ctl-reset {
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.hero-desc, p, .section-subtext { font-size: 0.98em; }

/* ---------- buttons: angular + glow ---------- */
.btn, .btn-subtle, .btn-primary-gradient, .pill-button {
  border-radius: 4px !important;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.btn-subtle, .pill-button {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(var(--gx-accent-rgb),0.35) !important;
  color: #dbeafe !important;
}
.btn-subtle:hover, .pill-button:hover {
  border-color: var(--gx-accent) !important;
  box-shadow: 0 0 0 1px rgba(var(--gx-accent-rgb),0.5), 0 0 18px rgba(var(--gx-accent-rgb),0.35);
  transform: translateY(-1px);
}
.btn-primary-gradient {
  position: relative; border: none !important; color: #fff !important;
  background: linear-gradient(135deg, var(--gx-accent), #6d28d9 60%, #4f46e5) !important;
  box-shadow: 0 0 0 1px rgba(var(--gx-accent-rgb),0.55), 0 0 22px rgba(var(--gx-accent-rgb),0.4);
}
.btn-primary-gradient::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 55%);
  pointer-events: none;
}
.btn-primary-gradient:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--gx-accent), 0 0 30px rgba(var(--gx-accent-rgb),0.6); }
.btn-primary-gradient:active, .btn:active, .btn-subtle:active { transform: translateY(1px) scale(.995); }

/* ---------- surfaces: hard neon borders, no soft shadows ---------- */
.tool-card, .script-card-r, .data-table-card, .profile-sidebar-card, .chat-sidebar-card,
.modal-container, .theme-pick-card, .panel, .stat-card, .drawer-stat-card {
  border-radius: 6px !important;
  border: 1px solid rgba(var(--gx-accent-rgb),0.22) !important;
  background: linear-gradient(180deg, rgba(14,16,24,0.9), rgba(8,9,14,0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(0,0,0,0.4) !important;
  position: relative;
}
.script-card-r:hover, .tool-card:hover, .theme-pick-card:hover {
  border-color: rgba(var(--gx-accent-rgb),0.6) !important;
  box-shadow: 0 0 0 1px rgba(var(--gx-accent-rgb),0.4), 0 0 26px rgba(var(--gx-accent-rgb),0.18), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
/* corner bracket accents */
.script-card-r::before, .tool-card::before {
  content: ""; position: absolute; top: 6px; left: 6px; width: 10px; height: 10px;
  border-top: 2px solid rgba(var(--gx-accent2-rgb),0.75); border-left: 2px solid rgba(var(--gx-accent2-rgb),0.75);
  pointer-events: none; opacity: .7;
}

/* ---------- nav / header ---------- */
.header-nav { backdrop-filter: blur(14px); border-bottom: 1px solid rgba(var(--gx-accent-rgb),0.22); }
.nav-item { border-radius: 3px; position: relative; }
.nav-item.active { background: rgba(var(--gx-accent-rgb),0.12) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(var(--gx-accent-rgb),0.5); }
.nav-item.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--gx-accent), transparent); box-shadow: 0 0 10px var(--gx-accent); }
.brand-title { font-family: var(--font-display) !important; }
.brand-title span { color: var(--gx-accent); text-shadow: 0 0 12px rgba(var(--gx-accent-rgb),0.7); }

/* ---------- inputs ---------- */
input, textarea, select, .clean-select, .field-input {
  border-radius: 4px !important;
  background: rgba(4,6,10,0.7) !important;
  border: 1px solid rgba(var(--gx-accent-rgb),0.25) !important;
  font-family: var(--font-sans) !important;
}
input:focus, textarea:focus, select:focus, .clean-select:focus {
  border-color: var(--gx-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--gx-accent-rgb),0.18), 0 0 16px rgba(var(--gx-accent-rgb),0.25) !important;
  outline: none !important;
}

/* ---------- chips / pills ---------- */
.chip { border-radius: 3px !important; text-transform: uppercase; letter-spacing: .06em; }
.chip.emerald { border-color: rgba(16,185,129,.6) !important; box-shadow: 0 0 12px rgba(16,185,129,.25); }

/* ---------- tables ---------- */
.modern-table th { text-transform: uppercase; letter-spacing: .1em; color: var(--gx-accent2) !important; border-bottom: 1px solid rgba(var(--gx-accent-rgb),0.3) !important; }
.modern-table td { border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
.modern-table tr:hover td { background: rgba(var(--gx-accent-rgb),0.06) !important; }

/* ---------- scrollbar ---------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #06070b; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gx-accent), #4f46e5); border: 2px solid #06070b; border-radius: 8px; }

/* ---------- live background: keep the UI readable over Gojo ---------- */
body.prz-live-on .tool-card, body.prz-live-on .script-card-r, body.prz-live-on .data-table-card,
body.prz-live-on .profile-sidebar-card, body.prz-live-on .modal-container, body.prz-live-on .panel,
body.prz-live-on .theme-pick-card, body.prz-live-on .chat-sidebar-card {
  background: linear-gradient(180deg, rgba(8,10,16,0.86), rgba(6,7,12,0.9)) !important;
  backdrop-filter: blur(7px);
}
body.prz-live-on .prz-stage { opacity: .92; }
body.prz-live-on main, body.prz-live-on .wrap { position: relative; z-index: 1; }

/* ---------- left vertical theme rail (injected by gaming-ui.js) ---------- */
.gx-rail {
  position: fixed; left: 10px; top: 50%; transform: translateY(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.gx-rail-btn {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; cursor: pointer; user-select: none;
  padding: 14px 9px; color: #cbd5ff;
  background: linear-gradient(180deg, rgba(12,14,22,0.9), rgba(7,8,13,0.92));
  border: 1px solid rgba(var(--gx-accent-rgb),0.35);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: all .16s ease;
}
.gx-rail-btn:hover { color: #fff; border-color: var(--gx-accent); box-shadow: 0 0 18px rgba(var(--gx-accent-rgb),0.4); }
.gx-rail-btn.active {
  color: #fff; border-color: var(--gx-accent2);
  background: linear-gradient(180deg, rgba(var(--gx-accent-rgb),0.35), rgba(var(--gx-accent2-rgb),0.18));
  box-shadow: 0 0 22px rgba(var(--gx-accent2-rgb),0.5);
}
.gx-rail .gx-rail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gx-accent2); box-shadow: 0 0 10px var(--gx-accent2); }
@media (max-width: 900px) { .gx-rail { display: none; } }

/* =====================================================================
   MOBILE-ONLY: wider content, smaller layout
   ===================================================================== */
@media (max-width: 820px) {
  html, body { font-size: 13px; }
  .header-nav, .nav-inner { padding-left: 8px !important; padding-right: 8px !important; }
  .wrap { max-width: 100% !important; width: 100% !important; padding-left: 8px !important; padding-right: 8px !important; }
  .page-view { padding-left: 4px !important; padding-right: 4px !important; }
  .section-headline { font-size: 21px !important; }
  .hero-title { font-size: 25px !important; line-height: 1.08 !important; }
  .section-subtext, .hero-desc, p { font-size: 12.5px !important; }
  h1, h2, h3 { letter-spacing: .04em !important; }
  .tool-card, .script-card-r, .data-table-card, .profile-sidebar-card, .chat-sidebar-card, .modal-container { padding: 12px !important; border-radius: 5px !important; }
  .modal-container { width: calc(100vw - 14px) !important; max-width: 100% !important; }
  .btn, .btn-subtle, .btn-primary-gradient, .pill-button { padding: 7px 12px !important; font-size: 11.5px !important; }
  .nav-item { padding: 6px 8px !important; font-size: 10.5px !important; }
  .chip { font-size: 10px !important; }
  .cards-grid-layout, .theme-cards-grid, .profile-grid, .studio-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .header-search-wrap { max-width: none !important; margin: 0 6px !important; }
  img, video, canvas { max-width: 100% !important; }
  .gx-rail { display: none !important; }
}

/* =====================================================================
   PREMIUM PASS — richer Opera-GX-flavoured visuals
   ===================================================================== */
:root { --gx-gold: #ffd166; }

/* header: gradient sheen + glowing accent line */
.header-nav { background: linear-gradient(180deg, rgba(11,13,21,0.95), rgba(8,9,14,0.88)) !important; }
.header-nav .nav-inner { position: relative; }
.header-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gx-accent), var(--gx-accent2), transparent);
  box-shadow: 0 0 18px rgba(var(--gx-accent-rgb),0.7); }

/* brand + big headings: gradient text */
.brand-title { background: linear-gradient(90deg,#ffffff,#c4b5fd 38%, var(--gx-accent) 68%, var(--gx-accent2)); -webkit-background-clip: text; background-clip: text; color: transparent !important; filter: drop-shadow(0 0 10px rgba(var(--gx-accent-rgb),0.45)); }
.brand-badge { color: var(--gx-accent2) !important; letter-spacing: .3em !important; }
.section-headline, .hero-title, main h1 { background: linear-gradient(92deg,#ffffff,#ede9fe 45%, #c4b5fd 70%, var(--gx-accent)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

/* nav tabs: angular + glowing (GX style) */
.nav-item { clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.nav-item:hover { background: rgba(var(--gx-accent-rgb),0.10) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(var(--gx-accent-rgb),0.45); }
.nav-item.active { background: linear-gradient(135deg, rgba(var(--gx-accent-rgb),0.30), rgba(var(--gx-accent2-rgb),0.14)) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(var(--gx-accent-rgb),0.6), 0 0 16px rgba(var(--gx-accent-rgb),0.25); }

/* cards: subtle gradient hairline border + lift on hover */
.tool-card, .script-card-r, .data-table-card, .profile-sidebar-card, .chat-sidebar-card, .theme-pick-card { position: relative; }
.tool-card::after, .script-card-r::after, .data-table-card::after, .profile-sidebar-card::after, .chat-sidebar-card::after, .theme-pick-card::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(var(--gx-accent-rgb),0.6), rgba(var(--gx-accent2-rgb),0.12) 45%, rgba(var(--gx-accent2-rgb),0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.script-card-r, .tool-card { transition: transform .16s ease, box-shadow .16s ease; }
.script-card-r:hover, .tool-card:hover { transform: translateY(-2px); }

/* premium numbers + chips */
.drawer-stat-val { background: linear-gradient(180deg,#ffffff,var(--gx-accent2)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.chip { background: rgba(var(--gx-accent-rgb),0.10) !important; border-color: rgba(var(--gx-accent-rgb),0.45) !important; color: #e9d5ff !important; }

/* section header accent underline */
.section-header { position: relative; }
.section-header::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--gx-accent), var(--gx-accent2)); box-shadow: 0 0 14px rgba(var(--gx-accent-rgb),0.6); }

/* brighter body copy + accent links + selection */
a { color: var(--gx-accent2); }
p, .section-subtext { color: #c7cfe6; }
::selection { background: rgba(var(--gx-accent-rgb),0.45); color: #fff; }

/* =====================================================================
   MOBILE PERFORMANCE PASS - keep phones smooth
   ===================================================================== */
@media (max-width: 820px) {
  *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .tool-card, .script-card-r, .data-table-card, .profile-sidebar-card, .chat-sidebar-card, .theme-pick-card, .modal-container, .brand-mark, .tool-card:hover, .script-card-r:hover { box-shadow: none !important; filter: none !important; }
  .brand-title, .section-headline, main h1 { filter: none !important; }
  .page-view { content-visibility: auto; contain-intrinsic-size: 1400px; }
  .prz-moon, .prz-light, .prz-wind, .prz-water, .prz-hair { display: none !important; }
}

/* ensure auth/detail modals always display when opened */
.modal-backdrop.show { display: grid !important; opacity: 1 !important; pointer-events: auto !important; }