/* fonts are served from this website (no Google requests) - SIL Open Font License */
@font-face{font-family:'Oxanium';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/oxanium-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/oxanium-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/oxanium-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Oxanium';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/oxanium-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format('woff2')}
/* ghst.network - purple / black / red */
:root {
  --bg: #07060b;
  --bg-2: #0c0a13;
  --card: #110d1a;
  --card-2: #171124;
  --line: #2a2140;
  --line-2: #3a2d5a;
  --text: #ece8f5;
  --muted: #9d93b5;
  --dim: #6b6285;
  --purple: #a86efc;
  --purple-2: #7c3aed;
  --purple-3: #4c1d95;
  --red: #ff2e4d;
  --red-soft: rgba(255, 46, 77, .14);
  --ok: #a86efc;
  --radius: 14px;
  --shadow: 0 20px 60px -20px rgba(124, 58, 237, .35);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  background-image:
    radial-gradient(900px 500px at 85% -10%, rgba(124, 58, 237, .22), transparent 60%),
    radial-gradient(700px 400px at -10% 10%, rgba(255, 46, 77, .07), transparent 60%);
  background-repeat: no-repeat;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
a { color: var(--purple); text-decoration: none; }
a:hover { color: #c9a5ff; }
h1, h2, h3, h4 { font-family: Oxanium, Inter, sans-serif; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
code, kbd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; padding: .1em .4em; color: #d9c4ff; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.red { color: var(--red); }
.section { padding: 64px 0; }
.section-sm { padding: 36px 0; }
.eyebrow { font-family: Oxanium, sans-serif; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--purple); font-weight: 600; display: inline-flex; align-items: center; gap: .6em; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--red); }

/* ---------- header */
.top { position: sticky; top: 0; z-index: 50; background: rgba(7, 6, 11, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: Oxanium, sans-serif; font-weight: 800; font-size: 1.2rem; letter-spacing: .02em; }
.brand b { color: var(--red); }
.brand:hover { color: var(--text); }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a:not(.btn) { color: var(--muted); padding: 8px 12px; border-radius: 8px; font-weight: 500; font-size: .95rem; }
.nav a:not(.btn):hover { color: var(--text); background: var(--card); }
.nav a.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--red); border-radius: 0; }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; transition: .2s; }
@media (max-width: 1080px) {
  .burger { display: block; }
  .nav { position: fixed; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 12px 20px 20px; background: var(--bg-2); border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .25s; gap: 2px; }
  .nav-open .nav { transform: none; }
  .nav a.on { box-shadow: inset 3px 0 0 var(--red); padding-left: 14px; }
  .nav .btn { margin-top: 8px; }
}

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: .95rem; cursor: pointer; border: 1px solid transparent; transition: transform .12s, box-shadow .2s, background .2s; font-family: inherit; color: var(--text); white-space: nowrap; }
.btn:hover { transform: translateY(-1px); color: var(--text); }
.btn-solid { background: linear-gradient(135deg, var(--purple-2), #9b5cff); box-shadow: 0 8px 24px -8px rgba(124, 58, 237, .8); }
.btn-solid:hover { box-shadow: 0 10px 30px -6px rgba(124, 58, 237, 1); }
.btn-red { background: linear-gradient(135deg, #e11d48, var(--red)); box-shadow: 0 8px 24px -8px rgba(255, 46, 77, .7); }
.btn-ghost { background: transparent; border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--purple); }
.btn-sm { padding: 8px 14px; font-size: .88rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; box-shadow: none; }

/* ---------- hero */
.hero { padding: 72px 0 40px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero h1 .accent { background: linear-gradient(90deg, #c9a5ff, var(--purple) 40%, var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 1.12rem; color: var(--muted); max-width: 560px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.ip-box { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--card); }
.ip-box span { padding: 11px 16px; font-family: ui-monospace, Consolas, monospace; color: #d9c4ff; }
.ip-box button { border: 0; border-left: 1px solid var(--line-2); background: var(--card-2); color: var(--text); padding: 11px 14px; cursor: pointer; font: inherit; font-weight: 600; font-size: .88rem; }
.ip-box button:hover { background: var(--purple-3); }
.ip-box { max-width: 100%; }
.ip-box span { min-width: 0; overflow-wrap: anywhere; }
.ip-box button { flex: none; }
.card:has(> .ip-box) { container-type: inline-size; }
.card .ip-box { display: flex; width: 100%; }
.card .ip-box span { flex: 1; padding: 10px 12px; font-size: .86rem; white-space: nowrap; }
.card .ip-box button { padding: 10px 12px; }
@container (max-width: 280px) {
  .card .ip-box { flex-direction: column; align-items: stretch; }
  .card .ip-box span { text-align: center; }
  .card .ip-box button { border-left: 0; border-top: 1px solid var(--line-2); }
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 48px; } }

/* ---------- cards */
.card { background: linear-gradient(180deg, rgba(23, 17, 36, .9), rgba(17, 13, 26, .88)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card-hover { transition: border-color .2s, transform .2s, box-shadow .2s; }
.card-hover:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ---------- server status */
.srv { position: relative; overflow: hidden; }
.srv::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(124, 58, 237, .25), transparent 70%); pointer-events: none; }
.srv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.srv-game { font-family: Oxanium, sans-serif; font-weight: 700; font-size: 1.15rem; }
.srv-tag { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.srv-count { font-family: Oxanium, sans-serif; font-size: 2.6rem; font-weight: 800; line-height: 1; }
.srv-count small { font-size: 1rem; color: var(--muted); font-weight: 600; }
.bar { height: 6px; background: var(--bg); border-radius: 99px; overflow: hidden; margin: 14px 0; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--purple-2), var(--red)); border-radius: 99px; transition: width .6s; }
.srv.soon { opacity: .7; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 99px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pill i { width: 7px; height: 7px; border-radius: 50%; }
.pill-on { background: rgba(168, 110, 252, .15); color: #d3b6ff; border: 1px solid rgba(168, 110, 252, .4); }
.pill-on i { background: var(--purple); box-shadow: 0 0 0 0 rgba(168, 110, 252, .7); animation: pulse 1.8s infinite; }
.pill-off { background: var(--red-soft); color: #ff8a9c; border: 1px solid rgba(255, 46, 77, .35); }
.pill-off i { background: var(--red); }
.pill-soon { background: var(--card-2); color: var(--muted); border: 1px solid var(--line); }
.pill-soon i { background: var(--dim); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(168, 110, 252, .7); } 70% { box-shadow: 0 0 0 8px rgba(168, 110, 252, 0); } 100% { box-shadow: 0 0 0 0 rgba(168, 110, 252, 0); } }
.who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-height: 130px; overflow: auto; }
.who span { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: .8rem; color: var(--muted); }

/* ---------- features */
.feat .ico { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(124, 58, 237, .35), rgba(124, 58, 237, .08)); border: 1px solid var(--line-2); margin-bottom: 14px; color: #d3b6ff; }
.feat .ico svg { width: 22px; height: 22px; }
.feat p { color: var(--muted); font-size: .95rem; margin: 0; }
.feat h3 { margin-bottom: 6px; }
.steps { counter-reset: s; }
.step { position: relative; padding-left: 56px; }
.step::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-family: Oxanium, sans-serif; font-weight: 800; background: var(--red-soft); color: var(--red); border: 1px solid rgba(255, 46, 77, .35); }

/* ---------- store */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.tabs a { padding: 12px 16px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); border-color: var(--red); }
.prod { display: flex; flex-direction: column; }
.prod h3 { margin-bottom: 2px; }
.prod .sub { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.prod .price { font-family: Oxanium, sans-serif; font-size: 1.7rem; font-weight: 800; }
.prod .price small { font-size: .85rem; color: var(--muted); font-weight: 500; }
.prod ul { list-style: none; padding: 0; margin: 14px 0 20px; flex: 1; }
.prod li { padding: 6px 0 6px 24px; position: relative; color: #d8d1e8; font-size: .92rem; border-bottom: 1px dashed var(--line); }
.prod li:last-child { border: 0; }
.prod li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 8px; height: 8px; border-radius: 2px; background: var(--purple); transform: rotate(45deg); }
.prod li.inh { color: var(--muted); }
.prod li.inh::before { background: var(--dim); }
.prod li.perk-h { padding: 12px 0 4px; color: #FFD24D; font-family: Oxanium, sans-serif; font-weight: 700; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 0; }
.prod li.perk-h:first-child { padding-top: 0; }
.prod li.perk-h::before { display: none; }
.prod .img { aspect-ratio: 4/3; border-radius: 10px; background: radial-gradient(circle at 50% 70%, rgba(124, 58, 237, .35), var(--bg) 70%); border: 1px solid var(--line); margin-bottom: 16px; display: grid; place-items: center; overflow: hidden; }
.prod .img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.prod .img.car img { width: 100%; height: 100%; object-fit: cover; }
.prod .why { font-size: .82rem; color: var(--muted); text-align: center; margin-top: 8px; }
.vip-card { position: relative; }
.vip-card .lvl { position: absolute; top: 18px; right: 18px; font-family: Oxanium, sans-serif; font-weight: 800; font-size: 2.4rem; color: rgba(168, 110, 252, .14); line-height: 1; }
.term { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--bg); padding: 4px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 14px; }
.term label { text-align: center; padding: 8px 4px; border-radius: 7px; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--muted); }
.term input { display: none; }
.term input:checked + span { color: var(--text); }
.term label:has(input:checked) { background: var(--card-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.save { display: inline-block; background: var(--red); color: #fff; font-size: .7rem; font-weight: 700; padding: 1px 6px; border-radius: 5px; margin-left: 4px; letter-spacing: .03em; }
.ribbon { position: absolute; top: 14px; left: -1px; background: var(--red); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 0 6px 6px 0; }
.vip-card.best { border-color: rgba(255, 46, 77, .45); }
.vip-card .body-pad { padding-top: 12px; }
.vip-card.best .body-pad { padding-top: 26px; }

/* ---------- forms */
.form { max-width: 440px; margin: 0 auto; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; color: #d8d1e8; }
.input { width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; color: var(--text); font: inherit; outline: none; transition: border-color .2s, box-shadow .2s; }
.input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(168, 110, 252, .2); }
.hint { font-size: .8rem; color: var(--muted); margin-top: 5px; }
.flash { margin: 20px 0 0; padding: 12px 16px; border-radius: 10px; font-weight: 500; }
.flash-ok { background: rgba(168, 110, 252, .12); border: 1px solid rgba(168, 110, 252, .4); color: #e2d2ff; }
.flash-err { background: var(--red-soft); border: 1px solid rgba(255, 46, 77, .4); color: #ffb3bf; }

/* ---------- account */
.code-big { font-family: Oxanium, sans-serif; font-size: 2.4rem; font-weight: 800; letter-spacing: .2em; color: #fff; background: var(--bg); border: 1px dashed var(--purple); border-radius: 12px; padding: 12px 20px; display: inline-block; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stat b { display: block; font-family: Oxanium, sans-serif; font-size: 1.25rem; }
.stat span { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
table.t { width: 100%; border-collapse: collapse; font-size: .92rem; }
.t th { text-align: left; color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; padding: 10px; border-bottom: 1px solid var(--line); }
.t td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.t-wrap { overflow-x: auto; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: .78rem; font-weight: 600; }
.b-ok { background: rgba(168, 110, 252, .15); color: #d3b6ff; }
.b-wait { background: rgba(255, 210, 77, .12); color: #ffd24d; }
.b-bad { background: var(--red-soft); color: #ff8a9c; }

/* ---------- guide */
.guide { display: grid; grid-template-columns: 230px 1fr; gap: 40px; align-items: start; }
.toc { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 2px; }
.toc a { color: var(--muted); padding: 7px 12px; border-left: 2px solid var(--line); font-size: .92rem; }
.toc a:hover { color: var(--text); border-color: var(--red); }
.guide section { margin-bottom: 48px; scroll-margin-top: 90px; }
.guide h2 { display: flex; align-items: center; gap: 12px; }
.guide h2::before { content: ""; width: 6px; height: 26px; border-radius: 3px; background: linear-gradient(var(--purple), var(--red)); }
.cmds { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.cmds div { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font-size: .9rem; color: var(--muted); }
.cmds code { margin-right: 6px; }
@media (max-width: 860px) { .guide { grid-template-columns: 1fr; } .toc { position: static; flex-direction: row; flex-wrap: wrap; } .toc a { border: 1px solid var(--line); border-radius: 8px; } }
.gang-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.gang-dots span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; font-weight: 600; font-size: .9rem; }
.gang-dots i { width: 10px; height: 10px; border-radius: 50%; }

/* ---------- footer */
.foot { border-top: 1px solid var(--line); margin-top: 60px; padding: 36px 0; background: var(--bg-2); }
.foot-in { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--text); }
.foot p { margin-top: 10px; }

.center { text-align: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.space { justify-content: space-between; }
.divider { height: 1px; background: var(--line); margin: 22px 0; border: 0; }

/* ---------- background art + side characters */
.scene { position: fixed; inset: 0; z-index: -2; background: #07060b url(bg.jpg) center top / cover no-repeat; }
.scene::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(ellipse 70% 60% at 50% 35%, rgba(7, 6, 11, .55), rgba(7, 6, 11, .8) 70%),
  linear-gradient(180deg, rgba(7, 6, 11, .35), rgba(7, 6, 11, .92) 75%); }
.side { position: fixed; top: 66px; bottom: 0; z-index: -1; pointer-events: none; display: none; width: calc((100vw - 1180px) / 2 + 60px); background-size: cover; background-repeat: no-repeat; }
.side-l { left: 0; background-image: url(side-left.jpg); background-position: 35% 20%;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent), linear-gradient(180deg, #000 70%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 55%, transparent), linear-gradient(180deg, #000 70%, transparent); mask-composite: intersect; }
.side-r { right: 0; background-image: url(side-6.jpg); background-position: 45% 16%;
  -webkit-mask-image: linear-gradient(270deg, #000 55%, transparent), linear-gradient(180deg, #000 70%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(270deg, #000 55%, transparent), linear-gradient(180deg, #000 70%, transparent); mask-composite: intersect; }
.side::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(76, 29, 149, .15), rgba(7, 6, 11, .35)); }
.side { overflow: hidden; }
.side .slide { position: absolute; inset: -4%; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 2.6s ease; animation: kenburns 26s ease-in-out infinite alternate; will-change: transform, opacity; }
.side .slide.on { opacity: 1; }
.side-r .slide { animation-delay: -13s; }
@keyframes kenburns { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.09) translate(-1.5%, -2%); } }
.side::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 45%; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(201, 165, 255, .16) 40%, rgba(255, 46, 77, .12) 55%, transparent);
  transform: translateX(-160%) skewX(-12deg); animation: sweep 11s ease-in-out infinite; mix-blend-mode: screen; }
.side-r::before { animation-delay: 5.5s; }
@keyframes sweep { 0%, 62% { transform: translateX(-160%) skewX(-12deg); } 100% { transform: translateX(330%) skewX(-12deg); } }
.scene { animation: drift 60s ease-in-out infinite alternate; }
@keyframes drift { from { background-position: 45% top; } to { background-position: 55% 8%; } }
.embers { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .side .slide, .side::before, .scene { animation: none; } .embers { display: none; } }
@media (min-width: 1500px) { .side { display: block; } }
.foot { background: rgba(12, 10, 19, .94); }

/* legal pages + checkout consent */
.legal h3 { margin-top: 1.6em; scroll-margin-top: 90px; }
.legal h3:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--muted); }
.legal .card li { margin: .35em 0; }
.legal b { color: var(--text); }
.toc { margin: 18px 0; padding: 16px 20px; }
.toc ol { columns: 2; margin: 8px 0 0; padding-left: 20px; }
.toc li { color: var(--muted); margin: 0 0 .35em; break-inside: avoid; }
.toc ol li:first-child { margin-top: 0; }
@media (max-width: 600px) { .toc ol { columns: 1; } }
.consent { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; margin: 0 0 22px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(168,110,252,.06); font-size: .9rem; color: var(--muted); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.consent input { margin-top: 3px; accent-color: #a86efc; width: 16px; height: 16px; flex: none; }
.consent b { color: var(--text); font-weight: 600; }
.consent.need { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.foot-legal { margin-top: 10px; }

.prod .img { position: relative; }
.tuned-tag { position: absolute; top: 10px; left: 10px; z-index: 1; font-family: Oxanium, sans-serif; font-weight: 800; font-size: .72rem; letter-spacing: .14em; padding: 3px 9px; border-radius: 6px; background: linear-gradient(135deg, var(--purple), var(--purple-2)); color: #fff; }
.garage-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.garage-car { padding: 0; overflow: hidden; }
.garage-car .img { aspect-ratio: 4/3; position: relative; background: radial-gradient(circle at 50% 70%, rgba(124, 58, 237, .35), var(--bg) 70%); border-bottom: 1px solid var(--line); }
.garage-car .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.garage-car .body { padding: 14px 16px 16px; }
.garage-car h3 { margin: 0 0 4px; }

.event-card { border-color: rgba(255, 210, 77, .4); background: linear-gradient(135deg, rgba(124, 58, 237, .18), rgba(255, 46, 77, .08)), var(--card); padding: 26px; }
.event-top { display: flex; gap: 20px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.event-count { display: flex; gap: 10px; }
.event-count div { min-width: 64px; text-align: center; padding: 10px 6px; border-radius: 10px; background: rgba(7, 6, 11, .6); border: 1px solid var(--line-2); }
.event-count b { display: block; font-family: Oxanium, sans-serif; font-size: 1.9rem; font-weight: 800; line-height: 1; }
.event-count span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.event-live { font-family: Oxanium, sans-serif; font-weight: 800; font-size: 1.6rem; color: #ffd24d; padding: 8px 16px; }
.event-perk { padding: 14px 16px; border-radius: 12px; background: rgba(7, 6, 11, .45); border: 1px solid var(--line); }
.event-perk b { display: block; font-family: Oxanium, sans-serif; font-size: 1.15rem; color: #ffd24d; }
.event-perk span { color: var(--muted); font-size: .88rem; }
.steps { counter-reset: st; display: grid; gap: 14px; }
.steps > div { position: relative; padding: 16px 18px 16px 58px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.steps > div::before { counter-increment: st; content: counter(st); position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: Oxanium, sans-serif; font-weight: 800; background: linear-gradient(135deg, var(--purple), var(--purple-2)); color: #fff; }
@media (max-width: 560px) { .event-count div { min-width: 54px; } .event-count b { font-size: 1.5rem; } }
@media (max-width: 560px) { .ip-box span { padding: 11px 10px; font-size: .82rem; } }

/* ---------- vehicle customizer ---------- */
.cz { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; padding-bottom: 40px; }
@media (max-width: 960px) { .cz { grid-template-columns: 1fr; } }
.cz-left { }
@media (max-width: 960px) { .cz-left { position: static; } }
.cz-stage { position: relative; padding: 0; overflow: hidden; aspect-ratio: 16 / 10;
  background: radial-gradient(70% 60% at 50% 70%, rgba(168,110,252,.20), transparent 70%), linear-gradient(180deg, #120d1d, #0a0811); }
.cz-stage img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; z-index: 1; transition: opacity .25s; }
.cz-glow { position: absolute; left: 10%; right: 10%; bottom: 10%; height: 18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168,110,252,.35), transparent); filter: blur(10px); }
.cz-busy { position: absolute; right: 14px; top: 12px; z-index: 2; display: flex; gap: 8px; align-items: center; font-size: .82rem;
  color: var(--muted); background: rgba(10,8,17,.75); border: 1px solid var(--line); padding: 5px 10px; border-radius: 99px; opacity: 0; transition: opacity .2s; }
.cz-busy.on { opacity: 1; }
.cz-busy span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--purple); border-right-color: transparent; animation: czspin .7s linear infinite; }
@keyframes czspin { to { transform: rotate(360deg); } }
.cz-err { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-size: .8rem; color: var(--muted); }
.cz-switch .input { min-width: 200px; }
.cz-panel { max-height: calc(100vh - 110px); min-height: 320px; overflow: auto; position: sticky; top: 84px; }
@media (max-width: 960px) { .cz-panel { max-height: none; } }
.cz-h { font-size: .95rem; margin: 18px 0 10px; letter-spacing: .02em; }
.cz-panel > .cz-h:first-child { margin-top: 0; }
.cz-coltabs { display: flex; gap: 8px; margin-bottom: 10px; }
.cz-coltabs button, .cz-opts button { font: inherit; color: var(--text); background: var(--card-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 11px; cursor: pointer; font-size: .86rem; display: inline-flex; gap: 8px; align-items: center; }
.cz-coltabs button.on, .cz-opts button.on { border-color: var(--purple); background: rgba(168,110,252,.16); box-shadow: 0 0 0 1px var(--purple) inset; }
.cz-coltabs i { width: 16px; height: 16px; border-radius: 5px; display: inline-block; border: 1px solid rgba(255,255,255,.25); }
.cz-palette { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.cz-palette button { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; cursor: pointer; padding: 0; }
.cz-palette button.on { outline: 2px solid #fff; outline-offset: 1px; }
.cz-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.cz-opts small { color: var(--muted); font-size: .74rem; }
.cz-sum { margin-top: 16px; }
.cz-lines div { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; color: var(--muted); padding: 3px 0; }
.cz-lines div span:first-child { color: var(--text); }
.cz-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.cz-total b { font-family: Oxanium, Inter, sans-serif; font-size: 1.8rem; }
.carpick { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.carpick .pic { aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(70% 60% at 50% 72%, rgba(168,110,252,.18), transparent 70%), linear-gradient(180deg, #120d1d, #0a0811); }
.carpick .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.carpick .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.carpick h3 { margin: 0; }
.carpick .from { color: var(--muted); font-size: .88rem; }
.carpick .from b { color: var(--text); }
@media (max-width: 960px) {
  .cz-left { display: contents; }
  .cz-stage { order: 1; } .cz-left > p { order: 2; margin-top: -10px !important; } .cz-right { order: 3; } .cz-sum { order: 4; margin-top: 0; }
}
.cz-stage { touch-action: pan-y; cursor: grab; user-select: none; }
.cz-stage.drag { cursor: grabbing; }
.cz-spin { position: absolute; inset: 0; z-index: 1; background-repeat: no-repeat; background-size: 2400% 100%; }
.cz-rot { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 10px;
  background: rgba(10,8,17,.72); border: 1px solid var(--line); border-radius: 99px; padding: 4px 6px; font-size: .8rem; color: var(--muted); }
.cz-rot button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); cursor: pointer; font-size: 1rem; line-height: 1; }
.cz-rot button:hover { border-color: var(--purple); }
.cz-rot i { display: none; font-style: normal; }
.cz-rot.wait b { display: none; } .cz-rot.wait i { display: inline; }
.cz-err { bottom: 56px; }

/* car names: the tag in the middle of the car (customizer, garage, thanks) and the form */
.cname-car { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  font: 800 clamp(.95rem, 2.4vw, 1.45rem)/1.1 Oxanium, Inter, sans-serif; letter-spacing: .02em; white-space: nowrap;
  max-width: 90%; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.garage-car .img { position: relative; }
.garage-car .cname-car { font-size: 1rem; }
.cname-car.bad { opacity: .35; text-decoration: line-through; }
.cn0 { color: #161616; } .cname-car.cn0 { text-shadow: 0 0 3px rgba(255,255,255,.85), 0 0 1px #fff; }
.cn1 { color: #ff3030; } .cn2 { color: #3a86ff; } .cn3 { color: #ffd21e; } .cn4 { color: #a86efc; }
.cname { font-weight: 700; } .cname.cn0 { color: #9a9a9a; }
.cz-name { margin: 4px 0 14px; }
.cz-name label { display: block; font-weight: 700; margin-bottom: 6px; }
.cz-name .input { width: 100%; }
.cz-name .input.bad { border-color: #ff4d4d; }
.cz-ncols { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.cz-ncols button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; }
.cz-ncols button i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.cz-ncols button.on { border-color: var(--accent, #a86efc); background: rgba(168,110,252,.16); }
.cz-nmsg { color: var(--muted); } .cz-nmsg.err { color: #ff6b6b; }

/* ---------- forum */
.ftitle { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 6px 0 4px; }
.ftitle .accent, .accent-t { background: linear-gradient(90deg, #c9a5ff, var(--purple) 40%, var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; color: var(--muted); }
.fcrumbs i { font-style: normal; color: var(--dim); }
.fcrumbs span { color: var(--text); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsearch .input { padding: 9px 12px; width: 220px; font-size: .9rem; }
.fcat-h { font-family: Oxanium, sans-serif; text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 700; color: var(--purple); margin: 0 0 10px 4px; display: flex; align-items: center; gap: 10px; }
.fcat-h::before { content: ""; width: 18px; height: 2px; background: var(--red); }
.flist-card { padding: 0; overflow: hidden; }
.fboard, .ftopic { display: grid; grid-template-columns: 48px 1fr 80px 80px 210px; gap: 16px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--line); position: relative; transition: background .15s; }
.fboard:first-child, .ftopic:first-child { border-top: 0; }
.fboard:hover, .ftopic:hover { background: rgba(168, 110, 252, .05); }
.fboard.is-new::before, .ftopic.is-new::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: linear-gradient(var(--purple), var(--red)); }
.ftopic.is-pin { background: rgba(255, 210, 77, .04); }
.fboard-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--purple); background: rgba(168, 110, 252, .1); border: 1px solid rgba(168, 110, 252, .3); }
.fboard-ico svg, .fgang-ico svg { width: 22px; height: 22px; }
.fboard.is-new .fboard-ico { box-shadow: 0 0 18px -4px currentColor; }
.fboard-title { font-family: Oxanium, sans-serif; font-weight: 700; font-size: 1.08rem; color: var(--text); }
.fboard-title:hover { color: #c9a5ff; }
.ftopic-num { text-align: center; line-height: 1.2; }
.ftopic-num b { display: block; font-family: Oxanium, sans-serif; font-size: 1.05rem; }
.ftopic-num span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.ftopic-last { font-size: .88rem; line-height: 1.35; min-width: 0; overflow: hidden; }
.ftopic-lt { color: var(--text); font-weight: 600; }
.ftopic-title { font-weight: 600; font-size: 1.02rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ftopic-title a { color: var(--text); }
.ftopic-title a:hover { color: #c9a5ff; }
.ftopic.is-new .ftopic-title a { color: #fff; }
.ftopic-main .muted a { color: var(--muted); }
.ftag { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--muted); vertical-align: middle; }
.ftag-pin { color: #ffd24d; border-color: rgba(255, 210, 77, .45); background: rgba(255, 210, 77, .08); }
.ftag-new { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--purple-2), var(--red)); }
.ftag-roster { color: #8ff0c0; border-color: rgba(46, 204, 113, .45); background: rgba(46, 204, 113, .08); }
.fpager { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.fpager a, .fpager b, .fpager span { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: var(--card); font-size: .9rem; padding: 0 8px; }
.fpager b { background: linear-gradient(135deg, var(--purple-2), #9b5cff); border-color: transparent; }
.fpager span { border: 0; background: none; color: var(--dim); }

/* names, avatars, badges */
.fav { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-family: Oxanium, sans-serif; font-weight: 800; flex: none; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.fn { font-weight: 600; color: var(--text); }
.fn:hover { color: #c9a5ff; }
.fn-owner { color: var(--red); text-shadow: 0 0 12px rgba(255, 46, 77, .45); }
.fn-staff { color: #ff8a9c; }
.fn-vip { color: #ffd24d; }
.fn-legend { color: #ffd24d; font-weight: 800; text-shadow: 0 0 10px rgba(255, 210, 77, .55); }
.fn-legend::before { content: "\2605  "; font-size: .8em; }
.fbadges { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.fb { font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.fb-owner { color: #fff; border-color: transparent; background: linear-gradient(135deg, #e11d48, var(--red)); }
.fb-staff { color: #ff8a9c; border-color: rgba(255, 46, 77, .45); background: var(--red-soft); }
.fb-vip { color: #ffd24d; border-color: rgba(255, 210, 77, .45); background: rgba(255, 210, 77, .08); }
.fb-legend { color: #1a1206; border-color: #ffd24d; background: linear-gradient(135deg, #ffe58a, #ffd24d 55%, #e0a91c); font-weight: 800; box-shadow: 0 0 12px rgba(255, 210, 77, .35); }
.fdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .18); vertical-align: middle; }
.fdot.off { background: var(--dim); box-shadow: none; }

/* posts */
.fpost { display: grid; grid-template-columns: 190px 1fr; padding: 0; overflow: hidden; margin-top: 14px; scroll-margin-top: 84px; }
.fpost:target { border-color: var(--purple); box-shadow: var(--shadow); }
.fpost.is-first { border-color: var(--line-2); }
.fpost-who { padding: 20px 16px; text-align: center; border-right: 1px solid var(--line); background: rgba(7, 6, 11, .35); }
.fpost-who .fbadges { justify-content: center; }
.fpost-name { margin-top: 10px; font-size: 1.02rem; word-break: break-word; }
.fpost-main { padding: 16px 22px 14px; min-width: 0; display: flex; flex-direction: column; }
.fpost-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.fpost-meta a { color: var(--muted); }
.fbody { line-height: 1.7; overflow-wrap: anywhere; flex: 1; }
.fbody img.fimg { max-width: 100%; max-height: 520px; border-radius: 10px; border: 1px solid var(--line); display: block; margin: 8px 0; }
.fbody .fyt { position: relative; aspect-ratio: 16 / 9; max-width: 640px; margin: 10px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.fbody .fyt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fq { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--purple); background: rgba(168, 110, 252, .07); border-radius: 0 10px 10px 0; color: #d8d1e8; }
.fq cite { display: block; font-style: normal; font-weight: 700; font-size: .82rem; color: var(--purple); margin-bottom: 4px; }
.fsp { margin: 10px 0; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); }
.fsp summary { cursor: pointer; padding: 8px 12px; font-weight: 600; color: var(--purple); }
.fsp > div { padding: 0 12px 10px; }
.fcode { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; overflow-x: auto; margin: 10px 0; }
.fcode code { background: none; border: 0; padding: 0; white-space: pre; }
.flist { margin: 6px 0; padding-left: 22px; }
.fsig { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .85rem; color: var(--muted); }
.fsig img.fimg { max-height: 120px; }
.fpost-act { display: flex; gap: 6px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.fpost-act form { display: inline; }
.flike { background: var(--bg); border: 1px solid var(--line-2); color: var(--muted); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: .9rem; cursor: pointer; transition: .15s; }
.flike:not(:disabled):hover { border-color: var(--red); color: var(--text); }
.flike.on { border-color: rgba(255, 46, 77, .6); background: var(--red-soft); color: #ffb3bf; }
.flike:disabled { cursor: default; opacity: .75; }
.flike.pop { animation: fpop .35s; }
@keyframes fpop { 40% { transform: scale(1.25); } }
.fmodbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border: 1px dashed rgba(255, 46, 77, .4); border-radius: 12px; background: rgba(255, 46, 77, .04); }
.fmodbar form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* editor */
.fed-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--line-2); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--card-2); }
.fed-bar button { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 7px; padding: 4px 9px; font: inherit; font-size: .82rem; cursor: pointer; min-width: 32px; }
.fed-bar button:hover { border-color: var(--purple); }
.fed-emo { display: inline-flex; gap: 2px; margin-left: auto; }
.fed-emo button { background: none; border-color: transparent; padding: 2px 5px; font-size: 1rem; }
.fed-ta { border-radius: 0 0 10px 10px; resize: vertical; min-height: 120px; line-height: 1.6; }

/* gang roster */
.froster { border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 10%, transparent), transparent); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.froster h3 { color: var(--gc); }
.froster-grp { font-family: Oxanium, sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 700; color: var(--gc); margin: 14px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.froster-m { display: flex; align-items: center; gap: 8px; padding: 5px 2px; flex-wrap: wrap; }
.froster-h, .froster-row { display: grid; grid-template-columns: 1.1fr 1fr 1.6fr 44px; gap: 8px; margin-bottom: 8px; }
.froster-h span { font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.froster-row .input { padding: 9px 11px; }
.fgang { display: flex; gap: 18px; align-items: center; border-color: color-mix(in srgb, var(--gc) 40%, var(--line)); }
.fgang-ico { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; color: var(--gc); background: color-mix(in srgb, var(--gc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent); flex: none; }
.fgang-ico svg { width: 30px; height: 30px; }

/* profile + search */
.fprof { grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.fprof-card { text-align: center; }
.fres { padding: 10px 0; border-top: 1px solid var(--line); }
.fres:first-of-type { border-top: 0; }

/* community counters */
.cstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.cstat { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.cstat b { display: flex; align-items: center; gap: 8px; font-family: Oxanium, sans-serif; font-size: 1.5rem; line-height: 1.2; }
.cstat span { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cstat-on { border-color: rgba(61, 220, 132, .35); }
.cstat-on i { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: pulse 1.8s infinite; }
.conline { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7, 6, 11, .4); }

@media (max-width: 860px) {
  .fboard, .ftopic { grid-template-columns: 42px 1fr; gap: 12px; padding: 14px; }
  .fboard .ftopic-num, .ftopic .ftopic-num { display: none; }
  .ftopic-last { grid-column: 2; font-size: .8rem; }
  .fboard-ico { width: 40px; height: 40px; }
  .fpost { grid-template-columns: 1fr; }
  .fpost-who { display: flex; align-items: center; gap: 12px; text-align: left; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 14px; flex-wrap: wrap; }
  .fpost-who .fav { width: 44px !important; height: 44px !important; font-size: 17px !important; }
  .fpost-who .fpost-name { margin: 0; }
  .fpost-who .fbadges { justify-content: flex-start; margin: 0; }
  .fpost-main { padding: 14px; }
  .fprof { grid-template-columns: 1fr; }
  .fsearch .input { width: 100%; }
  .froster-h { display: none; }
  .froster-row { grid-template-columns: 1fr 1fr 40px; }
  .froster-row .input:nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .fgang { flex-direction: column; align-items: stretch; }
}
.legend-btn { margin-top: 10px; color: #1a1206; font-weight: 800; border: 0; background: linear-gradient(135deg, #ffe58a, #ffd24d 55%, #e0a91c); box-shadow: 0 6px 22px rgba(255, 210, 77, .25); }
.legend-btn:hover:not(:disabled) { filter: brightness(1.06); }
.legend-btn:disabled { opacity: .45; cursor: not-allowed; }

/* change log */
.cl-v { display: inline-block; padding: 2px 9px; margin-right: 6px; border-radius: 6px; background: rgba(168, 110, 252, .16); color: #c9a5ff; font-size: .9em; }
.cl-new { border-color: rgba(168, 110, 252, .55); box-shadow: 0 0 30px rgba(168, 110, 252, .12); }
.cl-list { margin: 6px 0 4px; padding-left: 20px; color: #d8d1e8; }
.cl-list li { margin: 5px 0; line-height: 1.5; }

/* v1.6 live feed, league, goal */
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.feed li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.025); border-left: 3px solid var(--gc); font-size: .93rem; }
.feed-ico { text-align: center; }
.feed-t { min-width: 0; overflow-wrap: anywhere; }
.feed-ago { color: var(--muted, #9d93b5); font-size: .8rem; white-space: nowrap; }
.lg-gang { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.lg-gang i { width: 10px; height: 10px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 8px var(--gc); flex: none; }
.gold-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: linear-gradient(135deg, #ffd24d, #c99a1a); color: #1a1205; font-size: .72rem; font-weight: 800; letter-spacing: .04em; vertical-align: middle; }
.goal { display: grid; gap: 8px; }
.goal-bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; border: 1px solid var(--line); }
.goal-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a86efc, #ffd24d); border-radius: 999px; }
.pres-stars { color: #ffd24d; letter-spacing: 1px; }
@media (max-width: 560px) { .feed li { grid-template-columns: 22px 1fr; } .feed-ago { grid-column: 2; } }
.nav a { white-space: nowrap; }
@media (min-width: 1081px) and (max-width: 1400px) { .nav { gap: 2px; } .nav a:not(.btn) { padding: 8px 8px; font-size: .9rem; } }

/* store pictures (v1.6.1): 16:9 in-game renders + thumbnails */
.prod .img { aspect-ratio: 16/9; }
.prod .img img { width: 100%; height: 100%; object-fit: cover; }
.prod .thumbs { display: flex; gap: 6px; margin: -8px 0 12px; }
.prod .thumbs a { flex: 1; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; aspect-ratio: 16/9; }
.prod .thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod .thumbs a:hover { border-color: var(--accent, #7c3aed); }
.prod ul.mini { margin: 0 0 12px; padding-left: 18px; font-size: .82rem; color: var(--muted, #a99fc4); }
.prod ul.mini li { margin: 2px 0; }
.prod ul.mini li { padding: 3px 0 3px 16px; border: 0; font-size: .8rem; line-height: 1.35; }
.prod ul.mini li::before { width: 6px; height: 6px; top: .62em; }
.prod p.small { line-height: 1.45; }

/* first-visit welcome popup */
.wel{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,3,8,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.wel.on{opacity:1}
.wel[hidden]{display:none}
.wel-box{position:relative;overflow:hidden;width:100%;max-width:460px;max-height:calc(100vh - 32px);overflow-y:auto;background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line-2);border-radius:18px;padding:30px 26px 20px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(168,110,252,.08),0 0 60px rgba(124,58,237,.25);transform:translateY(16px) scale(.97);transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
.wel.on .wel-box{transform:none}
.wel-glow{position:absolute;left:50%;top:-140px;width:360px;height:260px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(168,110,252,.45),transparent);pointer-events:none}
.wel-x{position:absolute;right:10px;top:8px;background:none;border:0;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;padding:6px}
.wel-x:hover{color:var(--text)}
.wel-logo{position:relative;filter:drop-shadow(0 0 18px rgba(168,110,252,.6))}
.wel-kick{position:relative;margin-top:10px;font:600 12px/1 Oxanium,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--purple)}
.wel h2{position:relative;margin:6px 0 4px;font:800 34px/1.1 Oxanium,sans-serif}
.wel h2 b{color:var(--purple)}
.wel-lead{position:relative;color:var(--muted);margin:0 0 18px}
.wel-gift{display:flex;gap:14px;align-items:center;text-align:left;padding:14px;border-radius:12px;background:rgba(168,110,252,.1);border:1px solid rgba(168,110,252,.35)}
.wel-gift-ic{font-size:30px;flex:none}
.wel-gift b{display:block;font-family:Oxanium,sans-serif;font-size:16px;margin-bottom:2px}
.wel-gift span{font-size:14px;color:var(--muted)}
.wel-gift em{font-style:normal;color:#ffd24d;font-weight:600}
.wel-gift code{color:var(--text)}
.wel-list{list-style:none;padding:0;margin:16px 0;text-align:left;font-size:14px;color:var(--muted)}
.wel-list li{position:relative;padding:4px 0 4px 22px}
.wel-list li:before{content:'';position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--purple);transform:rotate(45deg)}
.wel-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.wel-cta .btn{flex:1 1 180px}
.wel-later{margin-top:12px;background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;text-decoration:underline}
@media (prefers-reduced-motion:reduce){.wel,.wel-box{transition:none}}

.dl-btns { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.dl-btns .btn { white-space: normal; min-width: 0; text-align: center; line-height: 1.3; }

/* the server tag next to the logo (SA-MP / FiveM) */
.fv-tag { flex: none; white-space: nowrap; margin-left: 4px; padding: 3px 7px; font: 800 .62rem/1 Oxanium, sans-serif; font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, var(--red), #b3122c); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }