/* ==================================================================
   ZeathCheats - dark premium UI
   Custom CSS, no framework. Single source of truth.
   ================================================================== */

:root{
  /* Surfaces */
  --bg:            #07070b;
  --bg-2:          #0b0b12;
  --surface:       #101018;
  --surface-2:     #14141f;
  --surface-3:     #1a1a27;
  --line:          rgba(255,255,255,.07);
  --line-strong:   rgba(255,255,255,.13);

  /* Text */
  --text:          #eceaf5;
  --text-dim:      #a6a3b8;
  --text-mute:     #6f6c82;

  /* Accents */
  --accent:        #8b5cf6;
  --accent-2:      #a78bfa;
  --accent-deep:   #6d28d9;
  --neon:          #4ade80;
  --neon-dim:      #22c55e;
  --danger:        #f43f5e;
  --warn:          #fbbf24;
  --info:          #38bdf8;

  --glow:          0 0 0 1px rgba(139,92,246,.35), 0 10px 40px -12px rgba(139,92,246,.55);
  --glow-neon:     0 0 0 1px rgba(74,222,128,.3), 0 10px 36px -14px rgba(74,222,128,.5);

  --radius:        16px;
  --radius-sm:     10px;
  --radius-lg:     22px;

  --shadow-sm:     0 1px 2px rgba(0,0,0,.4);
  --shadow:        0 12px 32px -12px rgba(0,0,0,.8);
  --shadow-lg:     0 32px 70px -28px rgba(0,0,0,.9);

  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display:  'Poppins', var(--font);

  --container:     1220px;
  --header-h:      72px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5{ font-family:var(--font-display); margin:0 0 .5em; line-height:1.15; letter-spacing:-.02em; }
h1{ font-size:clamp(2.1rem,5vw,3.4rem); font-weight:800; }
h2{ font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700; }
h3{ font-size:1.15rem; font-weight:700; }
p{ margin:0 0 1rem; }
a{ color:inherit; text-decoration:none; transition:color .18s ease; }
a:hover{ color:var(--accent-2); }
img{ max-width:100%; display:block; }
hr{ border:0; border-top:1px solid var(--line); margin:2rem 0; }
small,.small{ font-size:.82rem; }
.muted{ color:var(--text-dim); }
.mute{ color:var(--text-mute); }
.center{ text-align:center; }
.mono{ font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; }

/* ---------------- Background decoration ---------------- */
.bg-grid{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.bg-glow{
  position:fixed; z-index:-1; pointer-events:none;
  top:-320px; left:50%; transform:translateX(-50%);
  width:1100px; height:760px;
  background:
    radial-gradient(closest-side, rgba(139,92,246,.30), transparent 70%),
    radial-gradient(closest-side, rgba(74,222,128,.10), transparent 70%);
  filter:blur(18px);
}

/* ---------------- Layout ---------------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.site-main{ min-height:62vh; padding-bottom:80px; }
.section{ padding:72px 0; }
.section--tight{ padding:44px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.section-head p{ margin:0; max-width:60ch; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:14px;
}
.eyebrow::before{ content:''; width:22px; height:2px; background:linear-gradient(90deg,var(--accent),transparent); border-radius:2px; }

.grid{ display:grid; gap:22px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--sidebar{ grid-template-columns:minmax(0,1fr) 320px; align-items:start; }
.stack{ display:flex; flex-direction:column; gap:16px; }
.row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.row--between{ justify-content:space-between; }
.spacer{ flex:1; }

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  height:var(--header-h);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:rgba(7,7,11,.72);
  border-bottom:1px solid var(--line);
  transition:background .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck{ background:rgba(7,7,11,.93); box-shadow:0 10px 30px -20px #000; }
.header-inner{ display:flex; align-items:center; gap:26px; height:var(--header-h); }

.brand{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:800; font-size:1.12rem; letter-spacing:-.02em; }
.brand:hover{ color:inherit; }
.brand-mark{
  height:28px; width:auto; display:block; flex:none;
  filter:drop-shadow(0 4px 12px rgba(139,92,246,.45));
  transition:filter .25s ease, transform .25s ease;
}
.brand:hover .brand-mark{
  filter:drop-shadow(0 8px 22px rgba(139,92,246,.8));
  transform:translateY(-1px);
}
.site-footer .brand-mark{ height:26px; }
.admin-side .brand-mark{ height:26px; }
.brand-text span{ color:var(--accent-2); }

.main-nav{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav-link{
  position:relative; padding:9px 14px; border-radius:10px;
  font-size:.9rem; font-weight:500; color:var(--text-dim);
}
.nav-link:hover{ color:var(--text); background:rgba(255,255,255,.045); }
.nav-link.is-active{ color:var(--text); background:rgba(139,92,246,.13); }
.nav-link.is-active::after{
  content:''; position:absolute; left:14px; right:14px; bottom:3px; height:2px;
  border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--neon));
}

.header-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-auth{ display:none; }

.user-chip{
  position:relative; display:flex; align-items:center; gap:9px;
  padding:5px 11px 5px 5px; border-radius:100px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface-2);
  transition:border-color .2s ease, background .2s ease;
}
.user-chip:hover,.user-chip:focus-within{ border-color:rgba(139,92,246,.5); background:var(--surface-3); }
.user-chip__name{ font-size:.86rem; font-weight:600; }
.user-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:196px;
  background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:14px; padding:7px; box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:.18s ease;
}
.user-chip:hover .user-menu,.user-chip:focus-within .user-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.user-menu a{ display:block; padding:9px 12px; border-radius:9px; font-size:.87rem; color:var(--text-dim); }
.user-menu a:hover{ background:rgba(139,92,246,.14); color:#fff; }
.user-menu a.danger:hover{ background:rgba(244,63,94,.14); color:#fda4af; }

.burger{ display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface-2); cursor:pointer; padding:0; }
.burger span{ display:block; width:16px; height:2px; margin:3px auto; background:var(--text); border-radius:2px; transition:.2s; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 20px; border-radius:11px; border:1px solid transparent;
  font-family:var(--font); font-size:.9rem; font-weight:600; line-height:1;
  cursor:pointer; white-space:nowrap; transition:transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{ color:#fff; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:linear-gradient(135deg,var(--accent),var(--accent-deep)); color:#fff; box-shadow:0 12px 30px -14px var(--accent); }
.btn--primary:hover{ box-shadow:0 16px 38px -12px var(--accent); }
.btn--neon{ background:linear-gradient(135deg,var(--neon),var(--neon-dim)); color:#052e16; box-shadow:0 12px 30px -14px var(--neon); }
.btn--neon:hover{ color:#052e16; box-shadow:0 16px 38px -12px var(--neon); }
.btn--ghost{ background:var(--surface-2); border-color:var(--line-strong); color:var(--text); }
.btn--ghost:hover{ border-color:rgba(139,92,246,.55); background:var(--surface-3); }
.btn--outline{ background:transparent; border-color:rgba(139,92,246,.45); color:var(--accent-2); }
.btn--outline:hover{ background:rgba(139,92,246,.12); color:#fff; }
.btn--danger{ background:rgba(244,63,94,.14); border-color:rgba(244,63,94,.35); color:#fda4af; }
.btn--danger:hover{ background:rgba(244,63,94,.24); color:#fff; }
.btn--sm{ padding:8px 14px; font-size:.83rem; border-radius:9px; }
.btn--lg{ padding:15px 28px; font-size:.98rem; border-radius:13px; }
.btn--block{ width:100%; }
.btn[disabled],.btn.is-disabled{ opacity:.5; pointer-events:none; }

/* ---------------- Cards & panels ---------------- */
.card{
  position:relative; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow-sm);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card--hover:hover{ transform:translateY(-4px); border-color:rgba(139,92,246,.42); box-shadow:var(--shadow); }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.panel__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.panel__head h3{ margin:0; font-size:1rem; }
.panel__body{ padding:20px; }

/* ---------------- Hero ---------------- */
.hero{ position:relative; padding:86px 0 64px; overflow:hidden; }
.hero-inner{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:52px; align-items:center; }
.hero h1{ margin-bottom:18px; }
.hero h1 .grad{
  background:linear-gradient(110deg,var(--accent-2) 10%,var(--neon) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ font-size:1.05rem; color:var(--text-dim); max-width:52ch; margin-bottom:28px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px; }
.hero-stats{ display:flex; gap:34px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:1.6rem; font-weight:800; letter-spacing:-.02em; }
.hero-stat span{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-mute); }

.hero-visual{ position:relative; }
.glass-card{
  background:linear-gradient(160deg, rgba(20,20,31,.94), rgba(16,16,24,.86));
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; backdrop-filter:blur(8px);
}
.glass-card__bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); }
.glass-card__bar i{ width:10px; height:10px; border-radius:50%; background:#2a2a38; display:block; }
.glass-card__bar i:first-child{ background:#f43f5e55; }
.glass-card__bar i:nth-child(2){ background:#fbbf2455; }
.glass-card__bar i:nth-child(3){ background:#4ade8055; }
.glass-card__bar span{ margin-left:8px; font-size:.78rem; color:var(--text-mute); font-family:ui-monospace,monospace; }
.glass-card__body{ padding:18px; }
.feature-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 12px; border-radius:10px; font-size:.87rem; }
.feature-row:nth-child(odd){ background:rgba(255,255,255,.025); }
.feature-row b{ font-weight:600; color:var(--text); }
.toggle{ width:38px; height:21px; border-radius:100px; background:rgba(255,255,255,.1); position:relative; flex:none; }
.toggle::after{ content:''; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#55556a; transition:.25s; }
.toggle.on{ background:rgba(74,222,128,.25); }
.toggle.on::after{ left:20px; background:var(--neon); box-shadow:0 0 10px var(--neon); }
.float{ animation:float 7s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

/* ---------------- Marquee / logos ---------------- */
.logos{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; justify-content:center; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.logos span{ font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.05em; color:var(--text-mute); text-transform:uppercase; transition:color .2s; }
.logos span:hover{ color:var(--text-dim); }

/* Each game carries whether it is actually out yet */
.logo-game{ display:inline-flex; align-items:center; gap:9px; }
.logo-game i{
  font-style:normal; font-size:.6rem; font-weight:800; letter-spacing:.1em;
  padding:3px 7px; border-radius:5px; text-transform:uppercase;
  color:var(--warn); background:rgba(251,191,36,.13); border:1px solid rgba(251,191,36,.3);
}
.logo-game.is-out{ color:var(--text-dim); }
.logo-game.is-out i{
  color:var(--neon); background:rgba(74,222,128,.12); border-color:rgba(74,222,128,.3);
}

/* ---------------- Product cards ---------------- */
.product-card{ display:flex; flex-direction:column; overflow:hidden; padding:0; }
.product-card__media{
  position:relative; aspect-ratio:16/9; display:grid; place-items:center;
  background:radial-gradient(120% 100% at 50% 0%, rgba(139,92,246,.28), transparent 65%), var(--surface-2);
  border-bottom:1px solid var(--line); overflow:hidden;
}
.product-card__media::after{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:26px 26px; opacity:.6;
}
.product-card__game{
  position:relative; z-index:1; font-family:var(--font-display); font-weight:800;
  font-size:1.5rem; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.9);
  text-shadow:0 6px 26px rgba(139,92,246,.6);
}
.product-card__badge{ position:absolute; top:12px; left:12px; z-index:2; }
.product-card__fav{ position:absolute; top:12px; right:12px; z-index:2; }
.product-card__body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.product-card__title{ font-size:1.08rem; margin:0 0 4px; }
.product-card__tag{ color:var(--text-dim); font-size:.86rem; margin:0 0 14px; min-height:2.6em; }
.product-card__meta{ display:flex; align-items:center; gap:14px; font-size:.8rem; color:var(--text-mute); margin-bottom:16px; }
.product-card__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:16px; border-top:1px solid var(--line); }
.price{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.02em; }
.price small{ font-size:.72rem; font-weight:500; color:var(--text-mute); letter-spacing:0; }

/* ---------------- Badges / status / pills ---------------- */
.status{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  border-radius:100px; font-size:.73rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  border:1px solid transparent; backdrop-filter:blur(6px);
}
.status .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 0 currentColor; animation:pulse 2.4s infinite; }
.status--ok{ color:var(--neon); background:rgba(74,222,128,.11); border-color:rgba(74,222,128,.3); }
.status--warn{ color:var(--warn); background:rgba(251,191,36,.11); border-color:rgba(251,191,36,.3); }
.status--bad{ color:var(--danger); background:rgba(244,63,94,.11); border-color:rgba(244,63,94,.3); }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 currentColor; opacity:1 } 70%{ box-shadow:0 0 0 7px transparent; opacity:.85 } 100%{ box-shadow:0 0 0 0 transparent; opacity:1 } }

.pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:100px;
  font-size:.75rem; font-weight:600; color:var(--text-dim);
  background:rgba(255,255,255,.05); border:1px solid var(--line);
}
.pill--accent{ color:var(--accent-2); background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.3); }
.pill--neon{ color:var(--neon); background:rgba(74,222,128,.1); border-color:rgba(74,222,128,.28); }

.tag{ display:inline-block; padding:3px 9px; border-radius:7px; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.tag--new{ color:var(--neon); background:rgba(74,222,128,.12); }
.tag--hot{ color:#fb7185; background:rgba(244,63,94,.12); }

.rank{
  display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 9px; border-radius:6px; white-space:nowrap;
  vertical-align:middle;
}
.rank--owner{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:5px;
  color:#fff; padding:4px 10px;
  background:linear-gradient(135deg, var(--accent-2), var(--accent) 45%, var(--accent-deep));
  border:1px solid rgba(196,181,253,.5);
  box-shadow:0 5px 18px -7px rgba(139,92,246,.95), inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 2px rgba(24,10,60,.45);
}
.rank--owner svg{ width:11px; height:11px; flex:none; opacity:.95; }

/* A slow sheen crossing the badge, so it reads as the top rank without
   resorting to a louder colour. */
.rank--owner::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform:translateX(-160%);
  animation:rank-sheen 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes rank-sheen{
  0%, 72%  { transform:translateX(-160%); }
  100%     { transform:translateX(330%); }
}
@media (prefers-reduced-motion:reduce){
  .rank--owner::after{ display:none; }
}
.rank--admin{ color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-deep)); box-shadow:0 4px 14px -6px var(--accent); }
.rank--moderator{ color:#052e16; background:linear-gradient(135deg,var(--neon),var(--neon-dim)); }
.rank--seller{ color:#082f49; background:linear-gradient(135deg,#38bdf8,#0284c7); }
.rank--vip{ color:#3a2a00; background:linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow:0 4px 14px -6px #f59e0b; }
.rank--customer{ color:var(--text-dim); background:rgba(255,255,255,.07); }
.rank--banned{ color:#fecdd3; background:rgba(244,63,94,.22); border:1px solid rgba(244,63,94,.45); }
/* kept for older markup */
.rank--mod{ color:#052e16; background:linear-gradient(135deg,var(--neon),var(--neon-dim)); }
.rank--user{ color:var(--text-dim); background:rgba(255,255,255,.07); }

.avatar{
  display:inline-grid; place-items:center; flex:none;
  border-radius:50%; font-weight:800; color:#fff; letter-spacing:.02em;
  background:linear-gradient(140deg, var(--av), #000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 14px -6px var(--av);
}

.stars{ color:var(--warn); letter-spacing:2px; font-size:.85rem; }
.stars i{ font-style:normal; opacity:.28; }
.stars i.on{ opacity:1; }

/* ---------------- Alerts ---------------- */
.alert{
  padding:13px 17px; border-radius:12px; margin:18px 0;
  font-size:.9rem; border:1px solid transparent;
  animation:slideDown .3s ease;
}
.alert--success{ color:#86efac; background:rgba(74,222,128,.1); border-color:rgba(74,222,128,.3); }
.alert--error{ color:#fda4af; background:rgba(244,63,94,.1); border-color:rgba(244,63,94,.3); }
.alert--info{ color:#7dd3fc; background:rgba(56,189,248,.1); border-color:rgba(56,189,248,.3); }
.alert--warn{ color:#fcd34d; background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.3); }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }

/* ---------------- Forms ---------------- */
.form-group{ margin-bottom:16px; }
label{ display:block; font-size:.82rem; font-weight:600; color:var(--text-dim); margin-bottom:7px; }
.input,input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=search],select,textarea{
  width:100%; padding:12px 14px; font-family:var(--font); font-size:.92rem; color:var(--text);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:11px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input::placeholder,textarea::placeholder{ color:var(--text-mute); }
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none; border-color:rgba(139,92,246,.65); background:var(--surface-3);
  box-shadow:0 0 0 4px rgba(139,92,246,.14);
}
textarea{ min-height:130px; resize:vertical; line-height:1.6; }
select{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' stroke='%23a6a3b8' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; }
.form-hint{ font-size:.78rem; color:var(--text-mute); margin-top:6px; }
.checkbox{ display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:var(--text-dim); cursor:pointer; }
.checkbox input{ width:16px; height:16px; margin-top:2px; accent-color:var(--accent); flex:none; }

.auth-wrap{ max-width:452px; margin:64px auto; }
.auth-card{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow-lg); }
.auth-card h1{ font-size:1.7rem; margin-bottom:6px; }
.auth-foot{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:.87rem; color:var(--text-dim); text-align:center; }

/* ---------------- Tables ---------------- */
.table-wrap{ overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); }
table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:560px; }
thead th{
  text-align:left; padding:13px 16px; font-size:.73rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute);
  background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{ padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr{ transition:background .16s ease; }
tbody tr:hover{ background:rgba(255,255,255,.022); }

/* ---------------- Store filters ---------------- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:28px; }
.filters__sep{ width:1px; height:26px; background:var(--line-strong); margin:0 6px; }
.chip{
  padding:8px 15px; border-radius:100px; font-size:.85rem; font-weight:600;
  color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line-strong);
  transition:.18s ease; cursor:pointer;
}
.chip:hover{ color:var(--text); border-color:rgba(139,92,246,.45); }
.chip.is-active{ color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-deep)); border-color:transparent; box-shadow:0 10px 24px -14px var(--accent); }

/* ---------------- Product page ---------------- */
.product-hero{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:34px; align-items:start; margin-bottom:44px; }
.product-shot{
  aspect-ratio:16/9; border-radius:var(--radius-lg); border:1px solid var(--line-strong);
  background:radial-gradient(120% 110% at 50% 0%, rgba(139,92,246,.35), transparent 60%), var(--surface-2);
  display:grid; place-items:center; position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.product-shot span{ font-family:var(--font-display); font-weight:800; font-size:2.6rem; text-transform:uppercase; letter-spacing:.06em; text-shadow:0 10px 40px rgba(139,92,246,.7); }
.buy-box{ position:sticky; top:calc(var(--header-h) + 20px); }
.plan{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; border-radius:13px; border:1px solid var(--line-strong);
  background:var(--surface-2); cursor:pointer; margin-bottom:10px; transition:.18s ease;
}
.plan:hover{ border-color:rgba(139,92,246,.5); }
.plan.is-selected{ border-color:var(--accent); background:rgba(139,92,246,.1); box-shadow:0 0 0 3px rgba(139,92,246,.14); }
.plan input{ display:none; }
.plan__name{ font-weight:700; font-size:.95rem; }
.plan__sub{ font-size:.76rem; color:var(--text-mute); }
.plan__price{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; }

.feature-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.feature-list li{ display:flex; gap:11px; align-items:flex-start; font-size:.9rem; color:var(--text-dim); }
.feature-list li::before{
  content:'✓'; flex:none; width:19px; height:19px; margin-top:1px; border-radius:6px;
  display:grid; place-items:center; font-size:.7rem; font-weight:800;
  color:var(--neon); background:rgba(74,222,128,.13); border:1px solid rgba(74,222,128,.28);
}

.spec-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.spec{ background:var(--surface); padding:16px 18px; }
.spec b{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); margin-bottom:5px; }
.spec span{ font-weight:600; font-size:.92rem; }

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:24px; overflow-x:auto; }
.tab{ padding:12px 18px; font-size:.9rem; font-weight:600; color:var(--text-dim); border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; transition:.18s; }
.tab:hover{ color:var(--text); }
.tab.is-active{ color:#fff; border-bottom-color:var(--accent); }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* ---------------- Reviews ---------------- */
.review{ padding:18px 0; border-bottom:1px solid var(--line); }
.review:last-child{ border-bottom:0; }
.review__head{ display:flex; align-items:center; gap:11px; margin-bottom:9px; }
.review__name{ font-weight:700; font-size:.9rem; }

/* ---------------- Forum ---------------- */
.forum-cat{
  display:grid; grid-template-columns:52px minmax(0,1fr) 92px 92px minmax(0,200px);
  gap:16px; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line);
  transition:background .18s ease;
}
.forum-cat:last-child{ border-bottom:0; }
.forum-cat:hover{ background:rgba(139,92,246,.05); }
.forum-cat__icon{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:1.25rem;
  background:linear-gradient(140deg, rgba(139,92,246,.3), rgba(139,92,246,.08));
  border:1px solid rgba(139,92,246,.28);
}
.forum-cat__name{ font-weight:700; font-size:1rem; margin:0 0 3px; }
.forum-cat__desc{ font-size:.83rem; color:var(--text-dim); margin:0; }
.forum-cat__stat{ text-align:center; }
.forum-cat__stat b{ display:block; font-family:var(--font-display); font-size:1.05rem; }
.forum-cat__stat span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-mute); }
.forum-cat__last{ font-size:.8rem; color:var(--text-mute); }

.thread-row{ display:grid; grid-template-columns:40px minmax(0,1fr) 80px 150px; gap:16px; align-items:center; padding:15px 20px; border-bottom:1px solid var(--line); transition:background .18s; }
.thread-row:last-child{ border-bottom:0; }
.thread-row:hover{ background:rgba(139,92,246,.05); }
.thread-row__title{ font-weight:600; font-size:.95rem; margin:0 0 3px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.thread-row__meta{ font-size:.79rem; color:var(--text-mute); margin:0; }
.thread-row__stat{ text-align:center; font-size:.82rem; color:var(--text-dim); }

.post{ display:grid; grid-template-columns:180px minmax(0,1fr); border-bottom:1px solid var(--line); }
.post:last-child{ border-bottom:0; }
.post__side{ padding:22px 18px; text-align:center; background:var(--surface-2); border-right:1px solid var(--line); }
.post__side .avatar{ margin:0 auto 10px; }
.post__author{ font-weight:700; font-size:.92rem; margin-bottom:5px; }
.post__stats{ font-size:.74rem; color:var(--text-mute); margin-top:10px; line-height:1.7; }
.post__main{ padding:22px 24px; }
.post__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.79rem; color:var(--text-mute); margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.post__content{ font-size:.93rem; line-height:1.75; color:var(--text-dim); word-wrap:break-word; overflow-wrap:anywhere; }
.post__content strong{ color:var(--text); }

.breadcrumb{ display:flex; align-items:center; gap:9px; font-size:.84rem; color:var(--text-mute); margin-bottom:20px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--text-dim); }
.breadcrumb a:hover{ color:var(--accent-2); }
.breadcrumb span{ opacity:.45; }

/* ---------------- Dashboard ---------------- */
.dash-grid{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:26px; align-items:start; }
.dash-nav{ position:sticky; top:calc(var(--header-h) + 20px); display:flex; flex-direction:column; gap:3px; }
.dash-nav a{ padding:11px 14px; border-radius:11px; font-size:.89rem; font-weight:600; color:var(--text-dim); }
.dash-nav a:hover{ background:rgba(255,255,255,.045); color:var(--text); }
.dash-nav a.is-active{ background:rgba(139,92,246,.14); color:#fff; }

.stat-card{ padding:20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.stat-card b{ display:block; font-family:var(--font-display); font-size:1.85rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.stat-card span{ font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-mute); }
.stat-card.accent b{ color:var(--accent-2); }
.stat-card.neon b{ color:var(--neon); }

.license-card{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); flex-wrap:wrap; transition:border-color .2s; }
.license-card:hover{ border-color:rgba(139,92,246,.4); }
.key{
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.9rem; letter-spacing:.06em; color:var(--neon);
  background:rgba(74,222,128,.08); border:1px dashed rgba(74,222,128,.32);
  padding:8px 13px; border-radius:9px; display:inline-flex; align-items:center; gap:10px;
}
.key button{ background:none; border:0; color:var(--text-mute); cursor:pointer; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.key button:hover{ color:var(--neon); }

/* ---------------- Misc sections ---------------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; cursor:pointer; font-weight:600; font-size:.98rem; }
.faq-q::after{ content:'+'; font-size:1.3rem; color:var(--accent-2); flex:none; transition:transform .22s ease; }
.faq-item.is-open .faq-q::after{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; color:var(--text-dim); font-size:.91rem; }
.faq-item.is-open .faq-a{ max-height:460px; padding-bottom:18px; }

.legal{ max-width:820px; }
.legal h2{ margin-top:38px; font-size:1.3rem; }
.legal h3{ margin-top:26px; font-size:1.02rem; }
.legal p,.legal li{ color:var(--text-dim); font-size:.94rem; }
.legal ul{ padding-left:20px; }
.legal li{ margin-bottom:8px; }

.cta-band{
  position:relative; overflow:hidden; text-align:center;
  padding:58px 30px; border-radius:var(--radius-lg);
  border:1px solid rgba(139,92,246,.3);
  background:radial-gradient(120% 160% at 50% 0%, rgba(139,92,246,.24), transparent 62%), var(--surface);
}
.cta-band h2{ margin-bottom:12px; }

.pagination{ display:flex; gap:6px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.page{ min-width:38px; height:38px; display:grid; place-items:center; border-radius:10px; font-size:.86rem; font-weight:600; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line-strong); padding:0 10px; }
.page:hover{ color:#fff; border-color:rgba(139,92,246,.5); }
.page.is-active{ color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-deep)); border-color:transparent; }

.empty{ text-align:center; padding:56px 24px; color:var(--text-mute); }
.empty h3{ color:var(--text-dim); }

/* ---------------- Admin ---------------- */
.admin-layout{ display:grid; grid-template-columns:238px minmax(0,1fr); min-height:100vh; }
.admin-side{ background:var(--bg-2); border-right:1px solid var(--line); padding:20px 14px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.admin-side .brand{ padding:0 8px 20px; }
.admin-side a.adm{ display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:10px; font-size:.88rem; font-weight:600; color:var(--text-dim); margin-bottom:2px; }
.admin-side a.adm:hover{ background:rgba(255,255,255,.045); color:var(--text); }
.admin-side a.adm.is-active{ background:rgba(139,92,246,.16); color:#fff; }
.admin-side .adm-sep{ margin:16px 8px 8px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); }
.admin-main{ padding:30px 34px 70px; min-width:0; }
.admin-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; flex-wrap:wrap; }
.admin-head h1{ font-size:1.6rem; margin:0; }

/* ---------------- Footer ---------------- */
.site-footer{ border-top:1px solid var(--line); background:var(--bg-2); padding:52px 0 30px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; padding-bottom:34px; }
.footer-brand p{ max-width:38ch; font-size:.88rem; margin:14px 0 16px; }
.footer-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.footer-col h4{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); margin-bottom:14px; }
.footer-col a{ display:block; font-size:.88rem; color:var(--text-dim); padding:5px 0; }
.footer-col a:hover{ color:var(--accent-2); }
.footer-bottom{ border-top:1px solid var(--line); padding-top:22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-bottom p{ margin:0; font-size:.82rem; color:var(--text-mute); }
.footer-bottom .small{ max-width:56ch; }

/* ---------------- Reveal on scroll ---------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------------- Responsive ---------------- */
@media (max-width:1080px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .hero-inner{ grid-template-columns:1fr; gap:38px; }
  .product-hero{ grid-template-columns:1fr; }
  .buy-box{ position:static; }
  .grid--sidebar{ grid-template-columns:1fr; }
  .forum-cat{ grid-template-columns:52px minmax(0,1fr) 84px 84px; }
  .forum-cat__last{ display:none; }
  .admin-layout{ grid-template-columns:1fr; }
  .admin-side{ position:static; height:auto; }
}
@media (max-width:860px){
  .main-nav{
    position:fixed; top:var(--header-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px; padding:14px;
    background:rgba(9,9,14,.98); border-bottom:1px solid var(--line);
    transform:translateY(-12px); opacity:0; visibility:hidden; transition:.22s ease;
  }
  .main-nav.is-open{ transform:none; opacity:1; visibility:visible; }
  .burger{ display:block; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .dash-grid{ grid-template-columns:1fr; }
  .dash-nav{ position:static; flex-direction:row; overflow-x:auto; }
  .post{ grid-template-columns:1fr; }
  .post__side{ display:flex; align-items:center; gap:12px; text-align:left; border-right:0; border-bottom:1px solid var(--line); padding:14px 18px; }
  .post__side .avatar{ margin:0; }
  .post__stats{ margin:0 0 0 auto; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .thread-row{ grid-template-columns:40px minmax(0,1fr); }
  .thread-row__stat,.thread-row__last{ display:none; }
}
@media (max-width:620px){
  .container{ padding:0 16px; }
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .section{ padding:52px 0; }
  .hero{ padding:56px 0 40px; }
  .user-chip__name{ display:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .admin-main{ padding:22px 16px 60px; }
  .auth-card{ padding:24px; }
}

/* ==================================================================
   Free cheats page (Zeath Client for Minecraft)
   ================================================================== */

/* Nav tab with a live dot */
.nav-link--free{ display:inline-flex; align-items:center; gap:7px; }
.nav-dot{
  width:6px; height:6px; border-radius:50%; background:var(--neon);
  box-shadow:0 0 8px var(--neon); animation:pulse 2.4s infinite;
}

.grad-mc{
  background:linear-gradient(110deg,var(--accent-2) 10%,var(--neon) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

kbd{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82em;
  padding:2px 7px; border-radius:6px; color:var(--text);
  background:var(--surface-3); border:1px solid var(--line-strong);
  box-shadow:0 2px 0 rgba(0,0,0,.5);
}

.free-hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:40px; align-items:center;
  padding:38px; border-radius:var(--radius-lg);
  border:1px solid rgba(139,92,246,.28);
  background:radial-gradient(120% 150% at 15% 0%, rgba(139,92,246,.22), transparent 60%), var(--surface);
}
.free-hero__art{ display:grid; place-items:center; }
.free-hero__logo{ max-width:200px; height:auto; }

.free-stats{
  display:flex; gap:34px; flex-wrap:wrap; margin-top:32px;
  padding-top:26px; border-top:1px solid var(--line);
}
.free-stats b{
  display:block; font-family:var(--font-display); font-size:1.5rem;
  font-weight:800; letter-spacing:-.02em; line-height:1.2;
}
.free-stats span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-mute); }

/* ---- ClickGUI recreation ---- */
.gui-stage{
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
  padding:34px 24px; border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:
    radial-gradient(110% 130% at 50% 0%, rgba(139,92,246,.14), transparent 65%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 12px, transparent 12px 24px),
    #0a0a10;
}
.gui-panel{
  width:190px; flex:none; border-radius:4px; overflow:hidden;
  background:rgba(12,12,18,.94); border:1px solid rgba(139,92,246,.22);
  box-shadow:0 18px 40px -22px #000;
  font-family:var(--font-display);
}
.gui-panel__bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; font-weight:700; font-size:.95rem; color:#fff;
  background:linear-gradient(180deg, rgba(28,20,48,.98), rgba(18,14,30,.98));
  border-bottom:1px solid rgba(139,92,246,.3);
}
.gui-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 12px; font-size:.87rem; font-weight:600; color:#b9b4cc;
  border-bottom:1px solid rgba(255,255,255,.03);
  transition:background .18s ease, color .18s ease;
}
.gui-row:last-child{ border-bottom:0; }
.gui-row i{ font-style:normal; opacity:.45; font-size:.9rem; }
.gui-row.is-on{ background:linear-gradient(90deg, rgba(139,92,246,.55), rgba(139,92,246,.28)); color:#fff; }
.gui-row:hover{ background:rgba(139,92,246,.16); color:#fff; }

/* Tiny CSS glyphs so the panels need no icon font */
.gui-ico{
  width:22px; height:22px; flex:none; display:inline-block;
  background:var(--accent-2);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.gui-ico--swords{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 17.5 3 6V3h3l11.5 11.5'/><path d='m13 19 6-6'/><path d='m16 16 4 4'/><path d='M19 21h2v-2'/><path d='M9.5 6.5 21 18v3h-3L6.5 9.5'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 17.5 3 6V3h3l11.5 11.5'/><path d='m13 19 6-6'/><path d='m16 16 4 4'/><path d='M19 21h2v-2'/><path d='M9.5 6.5 21 18v3h-3L6.5 9.5'/></svg>"); }
.gui-ico--run{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='13' cy='4' r='2'/><path d='m6 21 3-6 4 2 2-5'/><path d='m9 15-3-4 5-3 3 3 3 1'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='13' cy='4' r='2'/><path d='m6 21 3-6 4 2 2-5'/><path d='m9 15-3-4 5-3 3 3 3 1'/></svg>"); }
.gui-ico--user{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a7 7 0 0 1 16 0v1'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a7 7 0 0 1 16 0v1'/></svg>"); }
.gui-ico--eye{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>"); }
.gui-ico--wrench{ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a4 4 0 1 0 5 5L21 21h-3L8.5 11.5a4 4 0 0 1-5-5Z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a4 4 0 1 0 5 5L21 21h-3L8.5 11.5a4 4 0 0 1-5-5Z'/></svg>"); }

/* ---- screenshot showcase ---- */
.showcase{ width:100%; }
.showcase__main{
  position:relative; margin:0; border-radius:14px; overflow:hidden;
  aspect-ratio:16/9;
  border:1px solid rgba(139,92,246,.3); background:#08080d;
  box-shadow:0 28px 60px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.showcase__main img{
  display:block; width:100%; height:100%; cursor:zoom-in;
  aspect-ratio:16/9; object-fit:cover; object-position:center;
  transition:opacity .16s ease, transform .5s ease;
}
.showcase__main:hover img{ transform:scale(1.015); }
.showcase__main figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 14px 10px; font-size:.78rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:#cfc9e4;
  background:linear-gradient(180deg, transparent, rgba(5,5,9,.92));
  pointer-events:none;
}

.showcase__thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.showcase__thumb{
  flex:1 1 0; min-width:64px; max-width:110px; padding:0; cursor:pointer;
  border-radius:9px; overflow:hidden; background:#08080d;
  border:1px solid var(--line-strong); line-height:0;
  transition:border-color .2s ease, transform .2s ease, opacity .2s ease;
  opacity:.62;
}
.showcase__thumb img{ display:block; width:100%; height:54px; object-fit:cover; }
.showcase__thumb:hover{ opacity:1; transform:translateY(-2px); border-color:rgba(139,92,246,.5); }
.showcase__thumb.is-active{
  opacity:1; border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(139,92,246,.28);
}

/* ---- lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:200; cursor:zoom-out;
  display:grid; place-items:center; padding:28px;
  background:rgba(4,4,8,.92); backdrop-filter:blur(6px);
  animation:fadeIn .2s ease;
}
.lightbox__stage{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:min(1200px, 92vw);
}
.lightbox img{
  max-width:min(1200px, 92vw); max-height:82vh; width:auto; height:auto;
  border-radius:12px; border:1px solid rgba(139,92,246,.35);
  box-shadow:0 40px 90px -30px #000; cursor:default;
  transition:opacity .18s ease;
}
.lightbox figcaption{
  font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#cfc9e4; text-align:center;
}
.lightbox__nav, .lightbox__close{
  position:absolute; z-index:2; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:rgba(20,20,31,.85); border:1px solid var(--line-strong);
  backdrop-filter:blur(6px);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.lightbox__nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; font-size:1.2rem; }
.lightbox__nav:hover{ background:rgba(139,92,246,.5); border-color:var(--accent); transform:translateY(-50%) scale(1.06); }
.lightbox__nav--prev{ left:18px; }
.lightbox__nav--next{ right:18px; }
.lightbox__close{ top:18px; right:18px; width:44px; height:44px; border-radius:12px; font-size:1.5rem; line-height:1; }
.lightbox__close:hover{ background:rgba(244,63,94,.4); border-color:rgba(244,63,94,.6); }

/* ---- module grid ---- */
.module-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:12px; overflow:hidden;
}
.module{ background:var(--surface); padding:14px 16px; transition:background .18s ease; }
.module:hover{ background:var(--surface-2); }
.module b{ display:flex; align-items:center; gap:8px; font-size:.92rem; margin-bottom:4px; }
.module--wip{ background:rgba(251,191,36,.04); }
.wip-tag{
  font-size:.6rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding:2px 7px; border-radius:5px; white-space:nowrap;
  color:var(--warn); background:rgba(251,191,36,.13); border:1px solid rgba(251,191,36,.32);
}
.module span{ font-size:.82rem; color:var(--text-dim); line-height:1.55; }

/* ---- numbered steps ---- */
.step{ position:relative; padding-top:26px; }
.step b{
  position:absolute; top:-16px; left:18px;
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:11px; font-family:var(--font-display); font-weight:800; color:#fff;
  background:linear-gradient(140deg,var(--accent),var(--accent-deep));
  box-shadow:0 8px 20px -8px var(--accent);
}
.step h3{ font-size:1rem; margin-bottom:6px; }

@media (max-width:1080px){
  .free-hero{ grid-template-columns:1fr; gap:28px; padding:28px; }
  .free-hero__art{ order:-1; }
  /* Only the stand-in logo is capped. The showcase fills its frame - an
     earlier blanket rule here was shrinking the screenshots to 150px wide
     and cropping them beyond recognition. */
  .free-hero__logo{ max-width:150px; }
}

/* ==================================================================
   Profiles, reactions, community releases, shop availability
   ================================================================== */

.avatar--img{ object-fit:cover; border-radius:50%; box-shadow:0 4px 14px -6px #000; }
.avatar-link{ display:inline-flex; line-height:0; }
.avatar-link:hover{ opacity:.85; }

/* ---------------- profile ---------------- */
.profile{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
}
.profile__banner{
  height:200px; background-size:cover; background-position:center;
  background-color:var(--surface-2); position:relative;
}
.profile__banner-fallback{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(139,92,246,.45), transparent 62%),
    linear-gradient(120deg, #15102a, #0c0c14);
}
.profile__head{
  display:flex; align-items:flex-end; gap:20px;
  padding:0 28px 18px; margin-top:-56px; position:relative; flex-wrap:wrap;
}
.profile__avatar .avatar{
  border:4px solid var(--surface); box-shadow:0 12px 30px -12px #000;
}
.profile__id{ flex:1; min-width:200px; padding-bottom:4px; }
.profile__id h1{
  font-size:1.7rem; margin:0 0 4px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.profile__id p{ margin:0; }
.profile__actions{ padding-bottom:6px; }
.profile__bio{
  margin:0; padding:0 28px 20px; color:var(--text-dim);
  font-size:.95rem; line-height:1.7; max-width:72ch; overflow-wrap:anywhere;
}
.profile__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border-top:1px solid var(--line);
}
.profile__stats > div{ background:var(--surface); padding:16px 20px; text-align:center; }
.profile__stats b{
  display:block; font-family:var(--font-display); font-size:1.35rem;
  font-weight:800; letter-spacing:-.02em;
}
.profile__stats span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-mute); }

.mini-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 13px; border-radius:11px; background:var(--surface-2);
  border:1px solid var(--line); transition:border-color .18s ease, background .18s ease;
}
.mini-row:hover{ border-color:rgba(139,92,246,.4); background:var(--surface-3); color:inherit; }
.mini-row__title{ font-weight:600; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.upload-preview{
  border-radius:12px; border:1px dashed var(--line-strong);
  background:var(--surface-2) center/cover no-repeat;
  display:grid; place-items:center; min-height:130px;
}
.upload-preview--banner{ aspect-ratio:1500/400; min-height:110px; }
input[type=file]{
  width:100%; padding:10px 12px; font-size:.88rem; color:var(--text-dim);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:11px;
}
input[type=file]::file-selector-button{
  margin-right:12px; padding:7px 14px; border:0; border-radius:8px; cursor:pointer;
  font-family:var(--font); font-weight:600; font-size:.82rem; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
}

/* ---------------- reactions ---------------- */
.reactions{ display:flex; gap:7px; flex-wrap:wrap; margin-top:16px; align-items:center; }
.reaction-form{ margin:0; display:inline-flex; }
.reaction{
  display:inline-flex; align-items:center; gap:6px;
  min-height:34px; padding:5px 11px; border-radius:100px; cursor:pointer;
  font-size:.95rem; line-height:1; font-family:var(--font);
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text-dim);
  transition:transform .14s ease, border-color .18s ease, background .18s ease;
}
.reaction svg{
  width:19px; height:19px; stroke-width:1.9;
  color:var(--text); opacity:.9;
}
.reaction:hover svg{ color:#fff; opacity:1; }
.reaction.is-mine svg{ color:var(--accent-2); opacity:1; }
.reaction b{ font-size:.78rem; font-weight:700; color:var(--text); }
.reaction:hover{ transform:translateY(-2px); border-color:rgba(139,92,246,.5); background:var(--surface-3); }
.reaction.is-mine{
  border-color:var(--accent); background:rgba(139,92,246,.18);
  box-shadow:0 0 0 2px rgba(139,92,246,.14);
}
.reaction.is-mine b{ color:var(--accent-2); }
.reaction.is-empty{ opacity:.8; }
.reaction.is-empty:hover{ opacity:1; }

/* ---------------- community releases ---------------- */
.rel-status{
  display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; padding:4px 10px; border-radius:100px; white-space:nowrap;
}
.rel-status--ok{ color:var(--neon); background:rgba(74,222,128,.13); border:1px solid rgba(74,222,128,.32); }
.rel-status--bad{ color:var(--danger); background:rgba(244,63,94,.13); border:1px solid rgba(244,63,94,.32); }
.rel-status--accent{ color:var(--accent-2); background:rgba(139,92,246,.15); border:1px solid rgba(139,92,246,.34); }

.release-card{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
.release-card__shot{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, rgba(139,92,246,.28), transparent 65%), var(--surface-2);
  border-bottom:1px solid var(--line);
}
.release-card__shot img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.release-card:hover .release-card__shot img{ transform:scale(1.04); }
.release-card__game{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1.2rem;
  text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.85);
}
.release-card__badge{ position:absolute; top:10px; left:10px; }
.release-card__body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.release-card__title{ font-size:1rem; margin:0 0 6px; }
.release-card__desc{ margin:0 0 14px; min-height:2.6em; }
.release-card__foot{
  margin-top:auto; padding-top:13px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.release-author{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.85rem; font-weight:600; flex-wrap:wrap;
}
.release-author:hover{ color:var(--accent-2); }

.release-gallery{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px; margin-bottom:24px;
}
.release-gallery img{
  width:100%; border-radius:12px; border:1px solid var(--line);
  transition:transform .3s ease, border-color .3s ease;
}
.release-gallery a:hover img{ transform:translateY(-3px); border-color:rgba(139,92,246,.45); }

/* ---------------- shop availability ---------------- */
.avail{
  display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 12px; border-radius:9px; white-space:nowrap;
}
.avail--soon{ color:var(--warn); background:rgba(251,191,36,.13); border:1px solid rgba(251,191,36,.34); }
.avail--ok{ color:var(--neon); background:rgba(74,222,128,.13); border:1px solid rgba(74,222,128,.32); }
.avail--bad{ color:var(--danger); background:rgba(244,63,94,.13); border:1px solid rgba(244,63,94,.32); }

.tag--soon{ color:var(--warn); background:rgba(251,191,36,.16); }

.avail-select{ width:auto; padding:6px 28px 6px 10px; font-size:.78rem; font-weight:700; }
.avail-select--soon{ color:var(--warn); border-color:rgba(251,191,36,.4); }
.avail-select--available{ color:var(--neon); border-color:rgba(74,222,128,.4); }
.avail-select--detected{ color:var(--danger); border-color:rgba(244,63,94,.4); }

/* ---------------- board icons ---------------- */
.forum-cat__icon svg, .board-ico svg{ width:22px; height:22px; color:var(--accent-2); }
.board-ico{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.25); }

/* ---------------- shoutbox ---------------- */
.chat{
  display:flex; flex-direction:column; gap:12px;
  max-height:420px; overflow-y:auto; padding:4px 4px 8px;
  margin-bottom:12px; scrollbar-width:thin;
  scrollbar-color:rgba(139,92,246,.55) transparent;
  overscroll-behavior:contain;
}
.chat--full{ max-height:min(62vh, 620px); }
.chat__msg{ display:flex; gap:10px; align-items:flex-start; }
.chat__body{ min-width:0; flex:1; }
.chat__meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.78rem; font-weight:700; }
.chat__meta a{ color:var(--text); }
.chat__meta a:hover{ color:var(--accent-2); }
.chat__time{ color:var(--text-mute); font-weight:500; }
.chat__text{
  font-size:.86rem; color:var(--text-dim); line-height:1.55;
  margin-top:3px; overflow-wrap:anywhere;
}
.chat__form{ display:flex; gap:8px; }
.chat__form input{ flex:1; min-width:0; }

/* ---------------- profile wall ---------------- */
.wall-form{ display:flex; gap:12px; align-items:flex-start; }
.wall-comment{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px; border-radius:13px;
  background:var(--surface-2); border:1px solid var(--line);
}
.wall-comment__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.82rem; font-weight:700; margin-bottom:6px; }
.wall-comment__meta a{ color:var(--text); }
.wall-comment__meta a:hover{ color:var(--accent-2); }
.wall-comment__text{ font-size:.9rem; color:var(--text-dim); line-height:1.65; overflow-wrap:anywhere; }
.wall-comment__del{
  background:none; border:0; cursor:pointer; padding:2px 4px;
  font-family:var(--font); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text-mute);
}
.wall-comment__del:hover{ color:var(--danger); }

/* ==================================================================
   Cursor - a macOS-shaped arrow drawn as SVG, so there is no external
   file to download and it stays sharp on any display. Every rule keeps a
   native keyword fallback: if a browser refuses the image (Safari does for
   SVG cursors) the pointer still behaves normally.
   ================================================================== */
body{
  cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2726%27%20height%3D%2726%27%20viewBox%3D%270%200%2026%2026%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27s%27%20x%3D%27-50%25%27%20y%3D%27-50%25%27%20width%3D%27200%25%27%20height%3D%27200%25%27%3E%3CfeDropShadow%20dx%3D%270%27%20dy%3D%271%27%20stdDeviation%3D%271.1%27%20flood-opacity%3D%270.45%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M5%202.2%20L5%2021.2%20L9.9%2016.6%20L12.9%2023.2%20L16.1%2021.7%20L13.1%2015.3%20L19.6%2015.3%20Z%27%20fill%3D%27%2315121f%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.6%27%20stroke-linejoin%3D%27round%27%20filter%3D%27url%28%23s%29%27%2F%3E%3C%2Fsvg%3E") 5 2, default;
}

a, button, summary, label[for], select, [role=button],
.btn, .chip, .tab, .plan, .reaction, .faq-q, .showcase__thumb,
.user-chip, .burger, [data-copy], [onclick], input[type=submit], input[type=file]{
  cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2726%27%20height%3D%2726%27%20viewBox%3D%270%200%2026%2026%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27s%27%20x%3D%27-50%25%27%20y%3D%27-50%25%27%20width%3D%27200%25%27%20height%3D%27200%25%27%3E%3CfeDropShadow%20dx%3D%270%27%20dy%3D%271%27%20stdDeviation%3D%271.1%27%20flood-opacity%3D%270.45%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M5%202.2%20L5%2021.2%20L9.9%2016.6%20L12.9%2023.2%20L16.1%2021.7%20L13.1%2015.3%20L19.6%2015.3%20Z%27%20fill%3D%27%238b5cf6%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271.6%27%20stroke-linejoin%3D%27round%27%20filter%3D%27url%28%23s%29%27%2F%3E%3C%2Fsvg%3E") 5 2, pointer;
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=url], input[type=search], textarea{
  cursor:text;
}

.showcase__main img, .release-gallery img{ cursor:zoom-in; }
.lightbox{ cursor:zoom-out; }
[disabled], .is-disabled{ cursor:not-allowed; }

/* Touch screens have no pointer to style, and a custom cursor there only
   costs bytes. */
@media (hover:none), (pointer:coarse){
  body, a, button, .btn, .chip, .tab, .plan, .reaction{ cursor:auto; }
}

/* ==================================================================
   Entry loader - shown once per browsing session, never twice.
   ================================================================== */
#zcLoader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center; gap:0;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(139,92,246,.22), transparent 60%),
    #07070b;
  transition:opacity .55s ease, visibility .55s ease;

  /* Backstop: with JavaScript broken or blocked this still uncovers the page,
     so the loader can never leave someone staring at a locked screen. */
  animation:zc-failsafe 0s linear 4.5s forwards;
}
@keyframes zc-failsafe{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}
.zc-loaded #zcLoader{ opacity:0; visibility:hidden; pointer-events:none; }
.zc-skip-loader #zcLoader{ display:none; }

.zc-load__inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }

.zc-load__mark{
  width:74px; height:auto;
  filter:drop-shadow(0 10px 30px rgba(139,92,246,.75));
  animation:zc-pulse 1.9s ease-in-out infinite;
}
@keyframes zc-pulse{
  0%,100%{ transform:translateY(0) scale(1); filter:drop-shadow(0 10px 26px rgba(139,92,246,.55)); }
  50%    { transform:translateY(-6px) scale(1.04); filter:drop-shadow(0 16px 38px rgba(139,92,246,.95)); }
}

.zc-load__name{
  font-family:var(--font-display); font-weight:800; font-size:1.15rem;
  letter-spacing:.02em; color:var(--text);
}
.zc-load__name span{ color:var(--accent-2); }

.zc-load__bar{
  width:180px; height:3px; border-radius:3px; overflow:hidden;
  background:rgba(255,255,255,.08);
}
.zc-load__bar i{
  display:block; height:100%; width:40%; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), var(--neon));
  animation:zc-slide 1.15s ease-in-out infinite;
}
@keyframes zc-slide{
  0%  { transform:translateX(-110%); }
  100%{ transform:translateX(320%); }
}

.zc-load__tag{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-mute);
}

@media (prefers-reduced-motion:reduce){
  .zc-load__mark, .zc-load__bar i{ animation:none; }
}

/* ---------------- unfinished-module warning ---------------- */
.warn-panel{
  margin-top:28px; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(251,191,36,.35);
  background:linear-gradient(180deg, rgba(251,191,36,.10), rgba(251,191,36,.03));
}
.warn-panel__head{
  display:flex; gap:16px; align-items:flex-start;
  padding:22px 24px; border-bottom:1px solid rgba(251,191,36,.2);
}
.warn-panel__icon{
  flex:none; width:34px; height:34px; border-radius:11px;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1.2rem;
  color:#2a1a00; background:linear-gradient(140deg,#fde68a,#f59e0b);
}
.warn-panel h3{ margin:0 0 6px; font-size:1.05rem; color:var(--warn); }
.warn-panel p{ margin:0; font-size:.9rem; color:var(--text-dim); line-height:1.65; max-width:68ch; }
.warn-panel__list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px; background:rgba(251,191,36,.18);
}
.warn-item{ background:#131018; padding:14px 18px; }
.warn-item b{
  display:block; font-size:.92rem; margin-bottom:3px; color:var(--warn);
}
.warn-item span{ font-size:.82rem; color:var(--text-dim); line-height:1.55; }

@media (max-width:620px){
  .warn-panel__head{ padding:18px; gap:12px; }
  .warn-panel__list{ grid-template-columns:1fr; }
}

/* ---------------- VirusTotal scan reference ----------------
   Green rather than the amber of .warn-panel: this one is the reassuring
   half of the pair, and the two often sit one above the other. */
.vt-panel{
  margin-top:28px; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(74,222,128,.30);
  background:linear-gradient(180deg, rgba(74,222,128,.085), rgba(74,222,128,.02));
}
.vt-panel__head{
  display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
  padding:22px 24px; border-bottom:1px solid rgba(74,222,128,.18);
}
.vt-panel__icon{
  flex:none; width:34px; height:34px; border-radius:11px;
  display:grid; place-items:center;
  color:#052e16; background:linear-gradient(140deg,#86efac,#22c55e);
}
.vt-panel__icon svg{ width:19px; height:19px; }
.vt-panel h3{ margin:0 0 6px; font-size:1.05rem; color:var(--neon); }
.vt-panel p{ margin:0; font-size:.9rem; color:var(--text-dim); line-height:1.65; max-width:66ch; }
.vt-panel__cta{ margin-left:auto; flex:none; }

.vt-file{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 24px; background:rgba(6,14,9,.55);
}
.vt-file__name{ font-weight:700; font-size:.9rem; color:var(--text); }
.vt-file__hash{
  flex:1 1 320px; min-width:0;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.76rem; letter-spacing:.2px; line-height:1.5;
  color:var(--text-dim); word-break:break-all;
}
.vt-panel__how{
  padding:15px 24px 18px; border-top:1px solid rgba(74,222,128,.14);
  font-size:.83rem; color:var(--text-dim); line-height:1.7;
}
.vt-panel__how code{
  background:rgba(74,222,128,.12); color:#bbf7d0;
  padding:2px 7px; border-radius:6px; font-size:.95em; word-break:break-all;
}

/* The chip used on cards and beside download buttons. */
.vt-hero-line{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.vt-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px;
  border:1px solid rgba(74,222,128,.34); background:rgba(74,222,128,.09);
  color:var(--neon); font-size:.78rem; font-weight:600; text-decoration:none;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.vt-chip:hover{
  background:rgba(74,222,128,.17); border-color:rgba(74,222,128,.6);
  transform:translateY(-1px);
}
.vt-chip__dot{
  width:7px; height:7px; border-radius:50%; background:var(--neon);
  box-shadow:0 0 0 3px rgba(74,222,128,.18);
}
.vt-chip svg{ width:12px; height:12px; opacity:.75; }

@media (max-width:620px){
  .vt-panel__head{ padding:18px; gap:12px; }
  .vt-panel__cta{ margin-left:0; width:100%; text-align:center; }
  .vt-file{ padding:14px 18px; }
  .vt-panel__how{ padding:14px 18px 16px; }
}

/* ==================================================================
   Scrollbars - the last piece of the page still wearing system chrome.
   Firefox takes the two-property form, WebKit the pseudo-elements, so
   both are declared.
   ================================================================== */
html{
  scrollbar-width:thin;
  scrollbar-color:var(--accent) var(--bg-2);
}

::-webkit-scrollbar{ width:12px; height:12px; }

::-webkit-scrollbar-track{
  background:var(--bg-2);
  border-left:1px solid var(--line);
}

::-webkit-scrollbar-thumb{
  border-radius:100px;
  background:linear-gradient(180deg, var(--accent-2), var(--accent) 55%, var(--accent-deep));
  /* A border in the track colour fakes padding, so the thumb reads as a
     floating pill rather than filling the gutter edge to edge. */
  border:3px solid var(--bg-2);
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #c4b5fd, var(--accent-2) 55%, var(--accent));
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:active{
  background:linear-gradient(180deg, var(--accent), var(--accent-deep));
  background-clip:padding-box;
}

::-webkit-scrollbar-corner{ background:var(--bg-2); }

/* Panels that scroll inside the page get a slimmer version. */
.chat::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
.dash-nav::-webkit-scrollbar{ width:8px; height:8px; }

.chat::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.tabs::-webkit-scrollbar-track,
.dash-nav::-webkit-scrollbar-track{ background:transparent; border:0; }

.chat::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.tabs::-webkit-scrollbar-thumb,
.dash-nav::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  background:rgba(139,92,246,.55);
  background-clip:padding-box;
}
.chat::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
.tabs::-webkit-scrollbar-thumb:hover,
.dash-nav::-webkit-scrollbar-thumb:hover{
  background:rgba(167,139,250,.85);
  background-clip:padding-box;
}

/* The image viewer sits on its own dark ground. */
.lightbox::-webkit-scrollbar-track{ background:#07070b; }

/* ---------------- captcha + honeypot ---------------- */
/* Pushed out of sight rather than display:none - some bots deliberately skip
   hidden inputs, but will happily fill one that is technically rendered. */
.zc-trap{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
}

.captcha__row{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
.captcha__box{
  flex:none; display:grid; place-items:center;
  border-radius:11px; overflow:hidden;
  border:1px solid var(--line-strong); background:#14141f;
  min-width:190px; min-height:60px;
}
.captcha__img{ display:block; border-radius:10px; }
.captcha__sum{
  font-family:var(--font-display); font-weight:800; font-size:1.35rem;
  letter-spacing:.06em; color:var(--accent-2); padding:0 22px;
}
.captcha__row input{
  flex:1; min-width:140px; text-align:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:1.1rem; letter-spacing:.24em; text-transform:uppercase;
}

@media (max-width:620px){
  .captcha__box{ width:100%; min-width:0; }
  .captcha__img{ width:100%; height:auto; }
  .captcha__row input{ width:100%; }
}

/* ---------------- Phone refinements (<=620px) ---------------- */
@media (max-width:620px){
  /* Forum categories: icon + name on one line, counters below */
  .forum-cat{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:10px 16px; padding:16px;
  }
  .forum-cat__icon{ width:38px; height:38px; border-radius:11px; font-size:1.05rem; }
  .forum-cat__body{ flex:1 1 200px; min-width:0; }
  .forum-cat__name{ font-size:.96rem; }
  .forum-cat__desc{ font-size:.8rem; }
  .forum-cat__stat{
    display:flex; align-items:baseline; gap:6px; text-align:left;
    padding-left:54px; flex:1 1 100%;
  }
  .forum-cat__stat + .forum-cat__stat{ padding-left:54px; margin-top:-6px; }
  .forum-cat__stat b{ display:inline; font-size:.92rem; }
  .forum-cat__stat span{ font-size:.68rem; }

  /* Header: auth buttons move into the burger menu so nothing overflows */
  .header-actions > .btn{ display:none; }
  .brand-mark{ height:25px; }
  .nav-auth{
    display:flex; flex-direction:column; gap:2px;
    margin-top:6px; padding-top:8px;
    border-top:1px solid var(--line);
  }
  .header-inner{ gap:12px; }

  .logos{ gap:14px 20px; padding:20px 0; }
  .logo-game{ font-size:.85rem; gap:7px; }
  .logo-game i{ font-size:.55rem; padding:2px 6px; }

  /* chat, wall and viewer on a phone */
  .chat{ max-height:280px; }
  .chat__form{ flex-direction:column; }
  .chat__form .btn{ width:100%; }
  .wall-form{ flex-direction:column; }
  .wall-form .btn{ width:100%; }
  .wall-comment{ padding:12px; gap:10px; }
  .lightbox__nav{ width:46px; height:46px; }
  .lightbox__nav--prev{ left:8px; }
  .lightbox__nav--next{ right:8px; }
  .lightbox__close{ top:10px; right:10px; }
  .lightbox img{ max-height:70vh; }
  .showcase__main{ aspect-ratio:16/10; }

  /* ---- touch targets: nothing smaller than a finger ---- */
  .btn{ min-height:46px; padding:13px 20px; font-size:.92rem; }
  .btn--sm{ min-height:40px; padding:10px 16px; font-size:.85rem; }
  .btn--lg{ min-height:52px; padding:16px 24px; font-size:1rem; }
  .nav-link{ padding:13px 14px; font-size:.95rem; }
  .user-menu a{ padding:12px 14px; font-size:.92rem; }
  .chip{ min-height:40px; display:inline-flex; align-items:center; }
  .reaction{ min-height:40px; padding:8px 14px; font-size:1.05rem; }
  .page{ min-width:44px; height:44px; }
  .tab{ min-height:46px; display:inline-flex; align-items:center; }
  .faq-q{ padding:20px 0; }

  /* 16px inputs stop iOS from zooming the page on focus */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=url], input[type=search], select, textarea, .input{
    font-size:16px; padding:13px 14px; min-height:48px;
  }
  textarea{ min-height:140px; }
  input[type=file]{ font-size:15px; }

  /* ---- text must never be clipped ---- */
  .thread-row__title, .mini-row__title, .product-card__title,
  .release-card__title, .forum-cat__name{
    white-space:normal; overflow:visible; overflow-wrap:anywhere;
  }
  .breadcrumb{ font-size:.8rem; row-gap:4px; }
  h1, h2, h3{ overflow-wrap:anywhere; }
  .key, .mono{ overflow-wrap:anywhere; }
  td, th{ white-space:normal; }

  /* ---- profile ---- */
  .profile__banner{ height:120px; }
  .profile__head{ padding:0 16px 14px; margin-top:-44px; gap:14px; }
  .profile__avatar .avatar{ width:88px !important; height:88px !important; font-size:30px !important; border-width:3px; }
  .profile__id h1{ font-size:1.3rem; }
  .profile__bio{ padding:0 16px 18px; font-size:.92rem; }
  .profile__stats{ grid-template-columns:repeat(2,1fr); }
  .profile__actions{ width:100%; }
  .profile__actions .btn{ width:100%; }

  /* ---- releases ---- */
  .release-gallery{ grid-template-columns:1fr; }
  .release-card__desc{ min-height:0; }

  /* ---- images stay inside the screen ---- */
  img, video, iframe{ max-width:100%; height:auto; }
  .showcase__main img{ width:100%; }

  /* Free cheats page */
  .free-hero{ padding:18px; }
  .showcase__thumb img{ height:44px; }
  .showcase__main figcaption{ font-size:.7rem; padding:18px 12px 8px; }
  .lightbox{ padding:14px; }
  .free-stats{ gap:18px 26px; margin-top:24px; padding-top:20px; }
  .free-stats > div{ flex:1 1 40%; }
  .free-stats b{ font-size:1.25rem; }
  .gui-stage{ padding:20px 12px; gap:12px; }
  .gui-panel{ width:100%; max-width:300px; }
  .module-grid{ grid-template-columns:1fr; }
  .step{ padding-top:22px; }

  /* Store filters */
  .filters__sep{ display:none; }
  .filters{ gap:8px; }
  .chip{ padding:7px 13px; font-size:.82rem; }
  .section-head form input[type=search]{ width:100% !important; }
  .section-head form{ width:100%; }

  /* Hero */
  .hero-stats{ gap:16px 26px; }
  .hero-stat{ flex:1 1 40%; }
  .hero-stat b{ font-size:1.4rem; }
  .hero-cta .btn{ flex:1 1 100%; }

  /* Thread list + posts */
  .thread-row{ padding:14px 16px; gap:12px; }
  .thread-row__title{ font-size:.92rem; }
  .post__main{ padding:18px 16px; }
  .post__side{ padding:12px 16px; }
  .post__head{ flex-wrap:wrap; gap:8px; }

  /* Dashboard nav scrolls sideways instead of wrapping */
  .dash-nav{ gap:6px; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .dash-nav a{ white-space:nowrap; flex:none; }
  .license-card{ padding:16px; gap:14px; }
  .license-card .key{ font-size:.78rem; word-break:break-all; }

  /* Buy box + product page */
  .plan{ padding:13px 14px; }
  .plan__price{ font-size:1.05rem; }
  .product-shot span{ font-size:1.8rem; }
  .tabs{ gap:2px; }
  .tab{ padding:11px 13px; font-size:.86rem; }

  /* Panels and cards */
  .panel__head{ padding:14px 16px; flex-wrap:wrap; gap:8px; }
  .panel__body{ padding:16px; }
  .card{ padding:18px; }
  .cta-band{ padding:40px 20px; }

  /* Checkout / key blocks never overflow the screen */
  .key{ word-break:break-all; font-size:.8rem; }

  /* Footer */
  .footer-bottom{ gap:10px; }
}

/* Very narrow phones */
@media (max-width:380px){
  .brand-text{ font-size:.98rem; }
  .btn--sm{ padding:7px 11px; font-size:.78rem; }
  .hero-stat{ flex:1 1 100%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}