/* =========================================================
   HASHY — original look. Dark asphalt, hazard amber, Barlow.
   Road-sign notches, road stripes, uppercase display.
   Full coverage incl. every feature. Light + dark.
   ========================================================= */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html { background:var(--bg); }
body { margin:0; background:transparent; color:var(--text); font:400 1rem/1.6 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .35s var(--ease), color .35s var(--ease); }
img,svg,video { display:block; max-width:100%; } img { height:auto; }
a { color:inherit; text-decoration:none; } a:hover { color:var(--accent-ink); }
::selection { background:var(--accent); color:var(--accent-text); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:-.03em; line-height:.95; margin:0 0 .4em; }
h1 { font-size:clamp(26px,3vw,40px); } h2 { font-size:clamp(22px,3vw,32px); } h3 { font-size:1.3rem; }
p { margin:0 0 1em; }
.wrap { width:min(1240px, calc(100% - 32px)); margin-inline:auto; }
.narrow { max-width:560px; } .muted { color:var(--muted); } .small { font-size:.85rem; }
.section { padding:clamp(56px,8vw,112px) 0; } .section--tight { padding:clamp(32px,5vw,64px) 0; }
.section--alt { background:var(--surface); border-block:1px solid var(--border); }
.skip { position:absolute; left:-9999px; } .skip:focus { left:16px; top:16px; z-index:200; background:var(--accent); color:var(--accent-text); padding:8px 12px; }
.visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.eyebrow { display:inline-flex; align-items:center; gap:10px; font:700 .78rem/1 var(--font); letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 16px; }
.eyebrow::before { content:""; width:28px; height:3px; background:currentColor; }
.sh { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:36px; }
.sh h2 { margin:0; } .sh__text, .page-head__desc { color:var(--muted); max-width:60ch; margin:12px 0 0; }
.page-head { margin-bottom:32px; }
.roadline { height:5px; background:repeating-linear-gradient(90deg, var(--accent) 0 56px, transparent 56px 96px); background-size:96px 100%; animation:drive 1.8s linear infinite; }
@keyframes drive { to { background-position:-96px 0; } }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 22px; border:0; cursor:pointer;
  font:700 1.02rem/1 var(--font-head); letter-spacing:.02em; text-transform:uppercase; border-radius:10px;
  transition:translate .18s var(--ease), filter .18s, box-shadow .22s var(--ease), border-color .2s, background .2s; }
.btn svg { width:18px; height:18px; flex-shrink:0; }
.btn:hover { translate:0 -2px; filter:brightness(1.06); }
.btn:active { translate:0 0; }
.btn--accent { background:var(--accent); color:var(--accent-text,#04120f); box-shadow:0 8px 24px -10px color-mix(in srgb,var(--accent) 60%,transparent); }
.btn--accent:hover { filter:brightness(1.06); background:var(--accent); box-shadow:0 14px 30px -10px color-mix(in srgb,var(--accent) 78%,transparent); }
.btn--light,.btn--light:hover { background:#fff; color:#111; }
.btn--ghost { background:color-mix(in srgb,var(--text) 4%,transparent); color:var(--text); border:1px solid rgba(120,170,255,.22); }
.btn--ghost:hover { border-color:var(--accent); color:#fff; background:color-mix(in srgb,var(--accent) 12%,transparent); }
.btn--discord,.btn--discord:hover { background:var(--discord); color:#fff; }
.btn--lg { padding:18px 28px; font-size:1.2rem; } .btn--sm { padding:10px 14px; font-size:.95rem; border-radius:8px; }
.btn--block { width:100%; } .btn[disabled] { opacity:.45; cursor:not-allowed; translate:none; filter:none; }
.btn[hidden] { display:none; } /* .btn display would otherwise override the UA [hidden] rule */
.btn.is-added { background:var(--ok); color:#07130c; }
.link-arrow { display:inline-flex; align-items:center; gap:8px; font:800 1rem/1 var(--font-head); letter-spacing:.08em; text-transform:uppercase; }
.link-arrow svg { width:18px; height:18px; transition:translate .2s; } .link-arrow:hover svg { translate:4px 0; }

/* announcement + switch + header */
.announce { background:var(--accent); color:var(--accent-text); text-align:center; font:700 .78rem/1.3 var(--font); letter-spacing:.12em; text-transform:uppercase; }
.announce__inner { padding:10px 0; } .announce p,.announce a { margin:0; color:inherit; }
.switch { background:var(--switch-bg); border-bottom:1px solid var(--border); } .switch--home { display:none; }
.switch__inner { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; } .switch__inner::-webkit-scrollbar { display:none; }
.switch__tab { --tab:var(--muted); display:inline-flex; align-items:center; gap:8px; padding:10px 14px; white-space:nowrap; color:var(--muted); font:600 .86rem/1 var(--font); border-bottom:2px solid transparent; }
.switch__tab:hover { color:var(--text); } .switch__tab.is-active { color:var(--text); border-bottom-color:var(--tab); }
.switch__tab .gdot { background:var(--tab); }
.gdot { display:inline-block; width:8px; height:8px; background:var(--accent); transform:skewX(-18deg); }
.hdr { position:sticky; top:0; z-index:50; background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); transition:transform .4s var(--ease); }
.hdr.is-hidden { transform:translateY(-100%); }
.hdr__inner { position:relative; display:flex; align-items:center; gap:32px; min-height:74px; transition:min-height .3s var(--ease); }
.hdr.is-scrolled .hdr__inner { min-height:62px; }
.hdr__logo { flex-shrink:0; } .hdr__logo img { width:var(--logo-w); }
.wordmark { display:inline-flex; align-items:center; gap:10px; } .wordmark__mark { height:54px; width:auto; transition:height .3s var(--ease); }
.hdr.is-scrolled .wordmark__mark { height:44px; } .hdr .wordmark__text, .hdr .wordmark__game { display:none; }
.wordmark__text { font-family:var(--font-head); font-weight:800; font-size:1.55rem; text-transform:uppercase; }
.hdr__nav { flex:1; } .hdr__nav ul { display:flex; gap:22px; list-style:none; margin:0; padding:0; }
.hdr__nav a { position:relative; padding:8px 0; color:var(--muted); font:600 .98rem/1 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
.hdr__nav a:hover,.hdr__nav a[aria-current] { color:var(--text); }
.hdr__nav a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .3s var(--ease); }
.hdr__nav a:hover::after,.hdr__nav a[aria-current]::after { transform:scaleX(1); transform-origin:left; }
.hdr__actions { display:flex; align-items:center; gap:4px; margin-left:auto; } .hdr__actions .btn { margin-right:8px; }
.icon-btn { position:relative; display:grid; place-items:center; width:42px; height:42px; background:none; border:0; color:var(--accent-ink); cursor:pointer; transition:color .15s, transform .15s; }
.icon-btn:hover { color:var(--accent); transform:translateY(-1px); } .icon-btn svg { width:22px; height:22px; }
.cart-count { position:absolute; top:3px; right:0; min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center; border-radius:9px; background:var(--accent); color:var(--accent-text); font:800 .68rem/1 var(--font); }
.cart-count.bump { animation:bump .5s var(--ease-spring); } @keyframes bump { 40% { transform:scale(1.5); } }
.hdr__toggle { display:none; }
.mode-btn span { position:absolute; display:grid; place-items:center; transition:transform .5s var(--ease-spring), opacity .3s; } .mode-btn span svg { width:20px; height:20px; }
:root[data-theme="dark"] .mode-btn__sun, :root[data-theme="light"] .mode-btn__moon { transform:rotate(90deg) scale(.4); opacity:0; }
@media (max-width:960px){ .hdr__toggle { display:grid; } .hdr__nav { position:absolute; left:-16px; right:-16px; top:100%; background:var(--bg); border-bottom:1px solid var(--border); display:none; } .hdr__nav.is-open { display:block; } .hdr__nav ul { flex-direction:column; gap:0; padding:4px 16px 16px; } .hdr__nav a { display:block; padding:15px 0; font-size:1.3rem; border-bottom:1px solid var(--border); } .hdr__nav a::after { display:none; } .hdr__actions .btn { display:none; } }

/* bell + settings */
.bell,.settings { position:relative; }
.bell__dot { position:absolute; top:7px; right:7px; width:9px; height:9px; border-radius:50%; background:var(--bad); box-shadow:0 0 0 2px var(--bg); }
.bell__panel,.settings__panel { position:absolute; right:0; top:calc(100% + 8px); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); z-index:60; overflow:hidden; animation:pop .2s var(--ease); }
@keyframes pop { from { opacity:0; transform:translateY(-6px);} } .bell__panel { width:min(360px,92vw); }
.bell__head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border); font-weight:600; }
.bell__read { background:none; border:0; color:var(--accent-ink); cursor:pointer; font:inherit; font-size:.85rem; }
.bell__list { max-height:60vh; overflow-y:auto; } .bell__item { display:block; padding:13px 16px; border-bottom:1px solid var(--border); }
.bell__item:hover { background:var(--surface-2); } .bell__item.is-unread { background:color-mix(in srgb,var(--accent) 10%,transparent); }
.bell__item b { display:block; font-weight:600; font-size:.92rem; } .bell__item span { color:var(--muted); font-size:.82rem; } .bell__item time { color:var(--muted); font-size:.72rem; }
.bell__empty { padding:28px 16px; text-align:center; color:var(--muted); } .bell__all { display:block; padding:12px; text-align:center; font-size:.85rem; border-top:1px solid var(--border); }
.settings__panel { width:290px; padding:6px; } .settings__head { padding:11px 12px 6px; font-weight:600; }
.settings__group { padding:8px 12px; display:grid; gap:8px; } .settings__group>span { font-size:.85rem; color:var(--muted); }
.seg { display:flex; gap:4px; background:var(--surface-2); padding:4px; } .seg button { flex:1; padding:8px; border:0; background:none; color:var(--muted); cursor:pointer; font:700 .82rem/1 var(--font-head); text-transform:uppercase; }
.seg button.on { background:var(--accent); color:var(--accent-text); }
.settings__row { display:flex; justify-content:space-between; align-items:center; padding:11px 12px; cursor:pointer; font-size:.92rem; }
.settings__note { padding:6px 12px 10px; margin:0; font-size:.76rem; color:var(--muted); }
.sw { appearance:none; -webkit-appearance:none; width:42px; height:24px; border-radius:999px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
.sw::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgb(0 0 0 /.3); transition:transform .25s var(--ease-spring); }
.sw:checked { background:var(--accent); box-shadow:none; } .sw:checked::after { transform:translateX(18px); }
.scrollbar { position:fixed; top:0; left:0; height:3px; width:0; z-index:100; background:var(--accent); } .no-motion .scrollbar { display:none; }

/* homepage hero (gen2) */
.hero { position:relative; overflow:hidden; isolation:isolate; min-height:min(86vh,820px); display:flex; align-items:flex-end; }
.hero__bg { position:absolute; inset:0; z-index:-2; } .hero__bg img { width:100%; height:100%; object-fit:cover; animation:kb 22s var(--ease) both; }
@keyframes kb { from { transform:scale(1.12);} }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgb(0 0 0 / var(--overlay,.7)) 0%, rgb(0 0 0 / calc(var(--overlay,.7)*.6)) 50%, transparent 100%), linear-gradient(0deg, var(--bg) 0%, transparent 40%); }
.hero--noimg { --text:#f4f6f8; }
.hero--noimg::before { background:radial-gradient(900px 420px at 88% 12%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 65%), repeating-linear-gradient(115deg, transparent 0 22px, rgb(255 255 255 /.022) 22px 23px), var(--bg); }
.hero__inner { width:min(1240px, calc(100% - 32px)); margin-inline:auto; padding:120px 0 64px; position:relative; z-index:1; }
.hero__title { font-size:clamp(1.8rem,4.5vw,3.4rem); max-width:16ch; margin-bottom:22px; overflow-wrap:break-word; } .hero__title em { font-style:normal; color:var(--accent); }
.hero__sub { font-size:clamp(1.05rem,1.6vw,1.25rem); color:color-mix(in srgb,var(--text) 82%, transparent); max-width:56ch; margin-bottom:32px; }
.hero__ctas { display:flex; flex-wrap:wrap; gap:12px; }
.stats { display:flex; flex-wrap:wrap; margin-top:56px; border-top:1px solid color-mix(in srgb,var(--text) 18%,transparent); }
.stat { padding:20px 32px 0 0; margin-right:32px; border-right:1px solid color-mix(in srgb,var(--text) 18%,transparent); }
.stat:last-child { border-right:0; margin-right:0; } .stat__v { font:800 2.1rem/1 var(--font-head); text-transform:uppercase; }
.stat__l { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:6px; }

/* game picker (store entrances) */
.picker { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:20px; }
.pick { --accent:#ffb21a; --n:26px; position:relative; display:flex; flex-direction:column; min-height:440px; overflow:hidden; isolation:isolate; color:#f4f6f8; background:var(--surface); border-bottom:4px solid var(--accent);
  clip-path:polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, 0 100%); transition:transform .5s var(--ease), box-shadow .4s var(--ease); }
.pick:hover { color:#f4f6f8; transform:translateY(-4px); box-shadow:0 30px 70px -30px color-mix(in srgb,var(--accent) 55%, transparent); }
.pick__media { position:absolute; inset:0; z-index:-2; background:radial-gradient(500px 300px at 80% 0%, color-mix(in srgb,var(--accent) 30%, transparent), transparent 70%), repeating-linear-gradient(115deg, transparent 0 22px, rgb(255 255 255 /.03) 22px 23px), var(--surface); }
.pick__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .pick:hover .pick__media img { transform:scale(1.05); }
.pick::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgb(0 0 0 /.9) 15%, rgb(0 0 0 /.25) 70%, transparent); }
.pick__body { margin-top:auto; padding:28px; } .pick__tag { display:inline-block; padding:6px 10px; margin-bottom:14px; background:var(--accent); color:#111; font:800 .9rem/1 var(--font-head); letter-spacing:.08em; }
.pick__name { font-size:clamp(2rem,3.4vw,2.8rem); margin-bottom:10px; } .pick__line { color:rgb(244 246 248 /.78); margin-bottom:20px; }
.pick__go { display:inline-flex; align-items:center; gap:8px; color:var(--accent); font:800 1.05rem/1 var(--font-head); letter-spacing:.08em; text-transform:uppercase; }
.pick__go svg { width:18px; height:18px; transition:translate .2s; } .pick:hover .pick__go svg { translate:5px 0; }

/* features */
.features { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); }
.feature { background:var(--bg); padding:34px 28px; } .feature__icon { width:50px; height:50px; display:grid; place-items:center; margin-bottom:22px; background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent-ink); }
.feature__icon svg { width:24px; height:24px; } .feature h3 { font-size:1.55rem; } .feature p { color:var(--muted); margin:0; }

/* discord cta (steps) */
.dcta { --n:28px; display:grid; grid-template-columns:1fr 1.2fr; background:var(--surface); border:1px solid var(--border);
  clip-path:polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, var(--n) 100%, 0 calc(100% - var(--n))); }
.dcta__lead { padding:clamp(32px,5vw,56px); color:#fff; background:linear-gradient(140deg, var(--discord), color-mix(in srgb,var(--discord) 50%, #000)); }
.dcta__lead .eyebrow { color:#fff; } .dcta__lead p { color:rgb(255 255 255 /.86); } .dcta__lead .hero__ctas { margin-top:28px; }
.dcta__steps { list-style:none; margin:0; padding:clamp(24px,4vw,48px); counter-reset:s; }
.dcta__step { counter-increment:s; display:grid; grid-template-columns:64px 1fr; gap:16px; padding:20px 0; border-bottom:1px dashed var(--border); } .dcta__step:last-child { border-bottom:0; }
.dcta__step::before { content:counter(s,decimal-leading-zero); font:800 2.7rem/1 var(--font-head); color:var(--accent-ink); }
.dcta__step h3 { margin:4px 0 6px; font-size:1.4rem; } .dcta__step p { margin:0; color:var(--muted); }
@media (max-width:860px){ .dcta { grid-template-columns:1fr; } }

/* faq / collapsibles */
.faq { max-width:880px; } .faq details,.collapse { border-top:1px solid var(--border); } .faq details:last-of-type,.collapse:last-of-type { border-bottom:1px solid var(--border); }
.faq summary,.collapse summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; font:800 1.35rem/1.1 var(--font-head); text-transform:uppercase; }
.collapse summary { padding:18px 0; font-size:1.15rem; } .faq summary::-webkit-details-marker,.collapse summary::-webkit-details-marker { display:none; }
.faq summary::after,.collapse summary::after { content:"+"; font-size:1.8rem; color:var(--accent-ink); transition:transform .2s; } .faq details[open] summary::after,.collapse[open] summary::after { transform:rotate(45deg); }
.faq .rte,.collapse .rte { padding:0 0 22px; color:var(--muted); }

/* rich text */
.richtext { max-width:820px; } .richtext--center { margin-inline:auto; text-align:center; } .richtext--center .eyebrow { justify-content:center; }
.rte>*:last-child { margin-bottom:0; } .rte a { color:var(--accent-ink); } .rte h2,.rte h3 { margin-top:1.4em; } .rte ul,.rte ol { padding-left:22px; }
.rte blockquote { margin:1.5em 0; padding-left:18px; border-left:3px solid var(--accent); color:var(--muted); }

/* product cards + grid */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:20px; }
.card { position:relative; display:flex; flex-direction:column; background:var(--surface); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:translate .2s var(--ease), background .2s, box-shadow .3s var(--ease), border-color .2s; }
.card::after { content:""; position:absolute; inset:0; border-radius:10px; pointer-events:none; }
.card:hover { translate:0 -4px; box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); color:inherit; } .card:hover .card__title { color:var(--accent-ink); }
.card__media { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2); } .card__media img,.card__media svg { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .card__media img { transform:scale(1.05); } .card__badges { position:absolute; left:12px; top:12px; display:flex; gap:6px; }
.badge { padding:6px 8px; background:var(--accent); color:var(--accent-text); font:800 .76rem/1 var(--font-head); letter-spacing:.08em; text-transform:uppercase; }
.badge--free { background:var(--ok); color:#07130c; } .badge--sale { background:var(--bad); color:#fff; } .badge--sub { background:var(--discord); color:#fff; } .badge--alt { background:var(--text); color:var(--bg); }
.card__body { flex:1; display:flex; flex-direction:column; gap:6px; padding:18px 18px 20px; } .card__type { margin:0; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:7px; }
.card__title { margin:0; font-family:var(--font-head); font-size:1.5rem; } .card__meta { margin-top:auto; padding-top:14px; display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px dashed var(--border); }
.price { font:800 1.35rem/1 var(--font-head); } .chip { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid var(--border); color:var(--muted); font:600 .7rem/1 var(--font); letter-spacing:.08em; text-transform:uppercase; }
.chip--accent { border-color:var(--accent); color:var(--accent-ink); } .card--ph .card__title { color:var(--muted); } .ph { background:var(--surface-2); fill:var(--muted); opacity:.22; width:100%; height:100%; }

/* coming soon */
.soon { text-align:center; max-width:560px; margin:0 auto; padding:clamp(40px,8vw,90px) 20px; }
.soon__mark { display:inline-flex; margin-bottom:24px; } .soon__mark .wordmark__mark { height:84px; } .soon__mark .wordmark__text { display:none; }
.soon h2 { font-size:clamp(2.2rem,4vw,3.2rem); } .soon p { color:var(--muted); font-size:1.1rem; max-width:42ch; margin:0 auto 28px; }

/* discord band */
.dband { background:var(--discord); color:#fff; } .dband__inner { display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:center; padding:48px 0; }
.dband__logo { width:92px; filter:drop-shadow(0 8px 20px rgb(0 0 0 /.35)); } .dband h2 { margin:0 0 8px; font-size:clamp(1.7rem,3vw,2.3rem); } .dband p { margin:0; color:rgb(255 255 255 /.85); max-width:56ch; }
.dband__actions { display:grid; gap:10px; justify-items:start; } .dband__link { color:#fff; font-size:.92rem; }
@media (max-width:820px){ .dband__inner { grid-template-columns:1fr; } }

/* ticker */
.ticker { overflow:hidden; border-block:1px solid var(--border); background:var(--surface); } .ticker__track { display:flex; width:max-content; animation:ticker var(--dur,36s) linear infinite; } .ticker:hover .ticker__track { animation-play-state:paused; }
.ticker__set { display:flex; align-items:center; } .ticker span { padding:16px 22px; white-space:nowrap; font:800 1.25rem/1 var(--font-head); letter-spacing:.08em; text-transform:uppercase; } .ticker i { width:10px; height:10px; background:var(--accent); transform:skewX(-18deg); }
@keyframes ticker { to { transform:translateX(-50%); } }

/* product page + gallery */
.crumbs { font-size:.8rem; color:var(--muted); margin-bottom:18px; }
.pdp { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start; }
.gal__stage { --n:24px; position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface); clip-path:polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, 0 100%); }
.gal__slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s var(--ease); } .gal__slide.is-active { opacity:1; visibility:visible; }
.gal__slide img,.gal__slide video,.gal__slide iframe,.gal__slide model-viewer,.gal__slide svg { width:100%; height:100%; object-fit:cover; border:0; }
.gal__hint { position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; background:rgb(0 0 0 /.6); color:#fff; font:700 .85rem/1 var(--font-head); letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(8px); } .gal__hint svg { width:18px; height:18px; }
.spin { cursor:grab; touch-action:pan-y; user-select:none; } .spin.is-dragging { cursor:grabbing; } .spin__f { position:absolute; inset:0; opacity:0; } .spin__f.is-on { opacity:1; }
.gal__thumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(90px,1fr)); gap:8px; margin-top:8px; }
.gal__thumb { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface); border:2px solid transparent; cursor:pointer; padding:0; } .gal__thumb img { width:100%; height:100%; object-fit:cover; } .gal__thumb.is-active { border-color:var(--accent); }
.gal__badge { position:absolute; right:4px; bottom:4px; min-width:22px; height:22px; padding:0 5px; display:grid; place-items:center; background:var(--accent); color:var(--accent-text); font:800 .72rem/1 var(--font-head); } .gal__badge svg { width:12px; height:12px; }
.pdp__info { position:sticky; top:100px; } .pdp__title { font-size:clamp(2.4rem,4.5vw,3.8rem); } .pdp__chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px; }
.pdp__price { font:800 2.5rem/1 var(--font-head); margin-bottom:24px; } .pdp__price s { font-size:1.35rem; color:var(--muted); margin-left:8px; } .pdp__price small { font-size:.5em; color:var(--muted); }
.pdp__form { display:grid; gap:12px; margin-bottom:8px; } .pdp__desc { margin-top:clamp(48px,7vw,88px); max-width:880px; } .own-dl { margin:6px 0; }
.delivery { margin:20px 0; padding:20px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--discord); }
.delivery__title { display:flex; align-items:center; gap:10px; margin:0 0 12px; font:800 1.15rem/1 var(--font-head); text-transform:uppercase; color:color-mix(in srgb,var(--discord) 55%,#fff); } .delivery__title svg { width:20px; height:20px; }
.delivery__steps { margin:0; padding-left:20px; display:grid; gap:6px; color:var(--muted); } .delivery__steps strong { color:var(--text); }
@media (max-width:900px){ .pdp { grid-template-columns:1fr; } .pdp__info { position:static; } }

/* purchase options */
.plans { border:0; margin:0; padding:0; display:grid; gap:8px; } .plans legend { font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; padding:0; }
.plan { position:relative; display:grid; grid-template-columns:20px 1fr auto; gap:14px; align-items:center; padding:16px; background:var(--surface); border:1px solid var(--border); cursor:pointer; transition:border-color .15s, background .15s; } .plan:hover { border-color:color-mix(in srgb,var(--accent) 50%,var(--border)); }
.plan input { position:absolute; opacity:0; } .plan__dot { width:20px; height:20px; border:2px solid var(--muted); border-radius:50%; display:grid; place-items:center; } .plan__dot::after { content:""; width:10px; height:10px; border-radius:50%; background:var(--accent); transform:scale(0); transition:transform .15s; }
.plan:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); } .plan:has(input:checked) .plan__dot { border-color:var(--accent); } .plan:has(input:checked) .plan__dot::after { transform:scale(1); }
.plan__body { display:grid; gap:3px; } .plan__name { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font:800 1.2rem/1 var(--font-head); text-transform:uppercase; } .plan__desc { font-size:.82rem; color:var(--muted); }
.plan__price { font:800 1.5rem/1 var(--font-head); } .plan__price small { font-size:.55em; color:var(--muted); } .plan__tag { font:800 .68rem/1 var(--font); font-style:normal; letter-spacing:.06em; padding:4px 6px; background:var(--accent); color:var(--accent-text); } .plan__tag--save { background:var(--ok); color:#07130c; }

/* tiers */
.tiers { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; align-items:stretch; }
.tier { --n:22px; position:relative; display:flex; flex-direction:column; padding:32px 28px; background:var(--bg); border:1px solid var(--border); clip-path:polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, 0 100%); }
.tier--hot { border-color:var(--accent); background:linear-gradient(170deg, color-mix(in srgb,var(--accent) 12%,var(--bg)), var(--bg) 60%); }
.tier__flag { position:absolute; top:0; left:28px; padding:6px 10px; background:var(--accent); color:var(--accent-text); font:800 .78rem/1 var(--font-head); letter-spacing:.08em; text-transform:uppercase; }
.tier__label { margin:14px 0 10px; font:700 .78rem/1 var(--font); letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink); } .tier__price { font:800 3.4rem/1 var(--font-head); margin:0 0 8px; } .tier__price small { font-size:.3em; color:var(--muted); } .tier__note { color:var(--muted); font-size:.9rem; }
.tier__perks { list-style:none; margin:8px 0 28px; padding:0; display:grid; gap:10px; flex:1; } .tier__perks li { display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; font-size:.95rem; } .tier__perks svg { width:18px; height:18px; color:var(--accent-ink); margin-top:3px; } .tiers__hint { grid-column:1/-1; color:var(--muted); }

/* forms */
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=tel],select,textarea { width:100%; padding:13px 14px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:0; font:inherit; transition:border-color .2s, box-shadow .25s var(--ease); }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent); }
.form { display:grid; gap:14px; } .form label,.field-label { display:grid; gap:6px; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .errors { background:#2a1214; border:1px solid var(--bad); padding:12px 14px; color:#ffb4b4; } .errors ul { margin:0; padding-left:18px; } .form-ok { background:#0f2a1b; border:1px solid var(--ok); padding:12px 14px; }
.pw-wrap { position:relative; } .pw-wrap input { padding-right:46px; } .pw-eye { position:absolute; right:6px; top:50%; translate:0 -50%; width:36px; height:36px; display:grid; place-items:center; background:none; border:0; color:var(--muted); cursor:pointer; } .pw-eye svg { width:18px; height:18px; }

/* collection / toolbar / pagination */
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; margin-bottom:24px; border-block:1px solid var(--border); } .toolbar p { margin:0; }
.toolbar__sort { display:flex; align-items:center; gap:10px; } .toolbar__sort label { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .toolbar__sort select { width:auto; padding:9px 12px; }
.searchbar { display:flex; gap:8px; margin-bottom:32px; } .pagination { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:44px; }
.pagination a,.pagination span { min-width:44px; padding:11px 12px; text-align:center; border:1px solid var(--border); font:700 1rem/1 var(--font-head); } .pagination .is-current { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.empty { text-align:center; padding:64px 16px; border:1px dashed var(--border); } .empty h2 { margin-bottom:12px; } .coll-card .card__media { aspect-ratio:4/3; }

/* modgrid tabs */
.modgrid__bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-bottom:26px; } .modgrid__bar h2 { margin:0; }
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); } .tab { --t:var(--accent); position:relative; background:none; border:0; padding:12px 16px 14px; margin-bottom:-1px; color:var(--muted); font:700 .98rem/1 var(--font-head); letter-spacing:.04em; text-transform:uppercase; border-bottom:2px solid transparent; cursor:pointer; }
.tab:hover { color:var(--text); } .tab.is-active { color:var(--text); border-bottom-color:var(--t); } .tab .gdot { width:7px; height:7px; margin-right:7px; background:var(--t); opacity:0; } .tab[data-filter]:not([data-filter="all"]) .gdot { opacity:.9; }
.tab[data-filter="ats"]{--t:#ffb21a;} .tab[data-filter="beamng"]{--t:#ff5b2e;} .tab[data-filter="fs25"]{--t:#8fd14f;}
.grid .card.is-out { display:none; } .modgrid__empty { text-align:center; color:var(--muted); padding:40px 0; } .modgrid__more { display:flex; justify-content:center; margin-top:36px; }

/* slider */
.slider { position:relative; height:min(78vh,720px); min-height:460px; overflow:hidden; background:#000; color:#f4f6f8; } .slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s var(--ease); display:flex; align-items:flex-end; } .slide.is-active { opacity:1; visibility:visible; }
.slide__img { position:absolute; inset:0; } .slide__img img,.slide__img svg { width:100%; height:100%; object-fit:cover; } .slide::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgb(0 0 0 /.88) 0%, transparent 70%); }
.slide__info { position:relative; z-index:2; padding-bottom:96px; max-width:1240px; margin-inline:auto; } .slide__info>* { max-width:640px; } .slide__game { display:inline-block; padding:5px 9px; margin-bottom:14px; background:var(--accent); color:var(--accent-text); font:800 .9rem/1 var(--font-head); }
.slide__title { font-size:clamp(2.4rem,5.6vw,4.8rem); margin-bottom:12px; } .slide__title a { color:inherit; } .slide__desc { color:rgb(244 246 248 /.82); margin-bottom:22px; } .slide__buy { display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .slide__price { font:800 2rem/1 var(--font-head); margin-right:8px; }
.slider__controls { position:absolute; left:0; right:0; bottom:28px; z-index:3; display:flex; justify-content:space-between; align-items:center; width:min(1240px, calc(100% - 32px)); margin-inline:auto; } .slider__dots { display:flex; gap:8px; } .slider__dot { width:46px; height:18px; padding:0; background:none; border:0; cursor:pointer; display:grid; align-items:center; } .slider__dot span { height:3px; background:rgb(255 255 255 /.3); position:relative; overflow:hidden; } .slider__dot.is-active span { background:#fff; }
.slider__arrows { display:flex; gap:8px; } .slider__arrow { width:46px; height:46px; display:grid; place-items:center; background:rgb(255 255 255 /.1); border:1px solid rgb(255 255 255 /.25); color:#fff; cursor:pointer; } .slider__arrow svg { width:20px; height:20px; }

/* cart + drawer */
.cart { display:grid; grid-template-columns:1fr 370px; gap:32px; align-items:start; }
.citem { display:grid; grid-template-columns:128px 1fr auto auto; gap:20px; align-items:center; padding:18px 0; border-bottom:1px solid var(--border); } .citem:first-child { border-top:1px solid var(--border); }
.citem__img { aspect-ratio:16/10; overflow:hidden; background:var(--surface); } .citem__img img { width:100%; height:100%; object-fit:cover; } .citem__title { font:800 1.35rem/1.05 var(--font-head); text-transform:uppercase; } .citem__info p { margin:4px 0 0; } .citem__remove { color:var(--muted); } .citem__remove svg { width:18px; height:18px; }
.qty { display:inline-flex; border:1px solid var(--border); } .qty button { width:38px; background:var(--surface); border:0; color:var(--text); font-size:1.1rem; cursor:pointer; } .qty input { width:52px; text-align:center; border:0; background:var(--surface); -moz-appearance:textfield; } .qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.cart__sum { position:sticky; top:100px; display:grid; gap:12px; padding:24px; background:var(--surface); border:1px solid var(--border); } .sumrow { display:flex; justify-content:space-between; align-items:baseline; font:800 1.45rem/1 var(--font-head); text-transform:uppercase; }
.note-discord { display:flex; gap:10px; padding:14px; font-size:.88rem; background:color-mix(in srgb,var(--discord) 14%,transparent); border-left:3px solid var(--discord); } .note-discord svg { width:20px; height:20px; flex-shrink:0; color:color-mix(in srgb,var(--discord) 55%,#fff); } .note-discord p { margin:0; }
@media (max-width:860px){ .cart { grid-template-columns:1fr; } .cart__sum { position:static; } .citem { grid-template-columns:96px 1fr auto; gap:12px 16px; } .citem__img { grid-row:span 2; } .citem .qty { grid-column:2; grid-row:2; justify-self:start; } .citem__remove { grid-column:3; grid-row:1; } }
.drawer { position:fixed; inset:0; z-index:90; visibility:hidden; } .drawer.is-open { visibility:visible; } .drawer__scrim { position:absolute; inset:0; background:rgb(0 0 0 /.55); backdrop-filter:blur(3px); opacity:0; transition:opacity .35s var(--ease); } .drawer.is-open .drawer__scrim { opacity:1; }
.drawer__panel { position:absolute; top:0; right:0; bottom:0; width:min(440px,100%); display:flex; flex-direction:column; background:var(--bg); border-left:1px solid var(--border); box-shadow:var(--shadow); transform:translateX(100%); transition:transform .5s var(--ease); } .drawer.is-open .drawer__panel { transform:none; }
.drawer__head { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--border); } .drawer__head h2 { margin:0; font-size:2rem; } .drawer__body { flex:1; overflow-y:auto; padding:8px 20px; }
.dline { position:relative; display:grid; grid-template-columns:96px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); } .dline__img { aspect-ratio:16/10; overflow:hidden; background:var(--surface); } .dline__img img { width:100%; height:100%; object-fit:cover; } .dline__info { display:grid; gap:4px; padding-right:26px; } .dline__title { font:800 1.2rem/1.05 var(--font-head); text-transform:uppercase; } .dline__plan { display:inline-flex; align-items:center; gap:6px; margin:0; font-size:.8rem; color:var(--accent-ink); } .dline__plan svg { width:14px; height:14px; } .dline__row { display:flex; justify-content:space-between; align-items:center; margin-top:6px; } .dline__rm { position:absolute; right:0; top:16px; background:none; border:0; color:var(--muted); cursor:pointer; } .dline__rm svg { width:16px; height:16px; }
.qty--sm button { width:32px; height:32px; } .qty--sm span { min-width:30px; text-align:center; font-weight:700; } .drawer__foot { display:grid; gap:12px; padding:18px 20px; border-top:1px solid var(--border); background:var(--surface); } .drawer__foot form { margin:0; } .drawer__link { text-align:center; font-size:.9rem; color:var(--muted); } .drawer.is-busy .drawer__body { opacity:.5; pointer-events:none; }
.drawer__empty { flex:1; display:grid; place-content:center; text-align:center; gap:6px; padding:32px; } .drawer__road { width:180px; height:5px; margin:0 auto 26px; overflow:hidden; } .drawer__road span { display:block; height:100%; background:repeating-linear-gradient(90deg, var(--accent) 0 30px, transparent 30px 52px); background-size:52px 100%; animation:drive 1.2s linear infinite; } .drawer__stores { display:flex; justify-content:center; gap:4px; margin-top:18px; }
.toast { position:fixed; left:50%; bottom:24px; z-index:110; padding:14px 18px; background:var(--text); color:var(--bg); font-weight:600; box-shadow:var(--shadow); transform:translate(-50%,150%); transition:transform .45s var(--ease-spring); } .toast.is-on { transform:translate(-50%,0); }

/* account + garage */
.acct__top { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:32px; } .box { background:var(--surface); border:1px solid var(--border); padding:24px; } .box+.box { margin-top:20px; }
.garage { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; } .garage__main { display:grid; gap:20px; } .garage__side { display:grid; gap:20px; position:sticky; top:100px; }
.owns { display:grid; gap:10px; margin-top:14px; } .own { display:grid; grid-template-columns:1fr auto; gap:8px 14px; align-items:center; padding:14px; border:1px solid var(--border); } .own__t { font-family:var(--font-head); font-weight:700; text-transform:uppercase; } .own__meta { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.82rem; } .own__right { display:flex; align-items:center; gap:10px; }
.own__badge { font-size:.72rem; padding:3px 9px; background:var(--surface-2); color:var(--muted); box-shadow:inset 0 0 0 1px var(--border); white-space:nowrap; } .own__badge.is-active { background:#16351f; color:#4fd98a; box-shadow:none; } :root[data-theme="light"] .own__badge.is-active { background:#e4f8ec; color:#157a43; }
.toggle { display:flex; gap:10px; align-items:flex-start; margin:12px 0; font-size:.92rem; cursor:pointer; } .toggle input { width:18px; height:18px; margin-top:2px; accent-color:var(--accent); }
.table-wrap { overflow-x:auto; } .table { width:100%; border-collapse:collapse; font-size:.95rem; } .table th { text-align:left; padding:12px 10px; border-bottom:1px solid var(--border); font:700 .7rem/1 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .table td { padding:14px 10px; border-bottom:1px solid var(--border); }
.rw { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; } .rw__tier { font:800 1.3rem/1 var(--font-head); text-transform:uppercase; } .rw__pts { color:var(--muted); font-size:.9rem; } .rw__bar { height:8px; background:var(--surface-2); overflow:hidden; margin:6px 0; } .rw__bar span { display:block; height:100%; background:var(--accent); }
.code { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px dashed var(--border); margin-bottom:8px; } .code__v { font-family:ui-monospace, Menlo, monospace; font-weight:600; letter-spacing:1px; } .code.is-used { opacity:.5; text-decoration:line-through; }
.dpanel { display:grid; grid-template-columns:auto 1fr; gap:20px; padding:28px; background:linear-gradient(140deg, color-mix(in srgb,var(--discord) 24%,var(--surface)), var(--surface)); border:1px solid color-mix(in srgb,var(--discord) 45%,var(--border)); } .dpanel__icon { width:56px; height:56px; display:grid; place-items:center; background:var(--discord); color:#fff; } .dpanel__icon svg { width:28px; height:28px; } .dpanel h3 { margin-bottom:8px; } .dpanel p { color:var(--muted); } .dpanel__actions { display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:880px){ .garage,.acct { grid-template-columns:1fr; } .garage__side { position:static; } .dpanel { grid-template-columns:1fr; } .form-row { grid-template-columns:1fr; } }

/* community */
.comm { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; } .comm__feed { display:grid; gap:16px; }
.composer textarea { } .composer__row { display:flex; align-items:center; gap:10px; margin-top:10px; } .composer__img { display:inline-flex; align-items:center; gap:7px; cursor:pointer; color:var(--muted); font-size:.88rem; } .composer__img svg { width:18px; height:18px; } .composer__game { width:auto; margin-left:auto; padding:8px 10px; } .composer__preview { margin-top:12px; max-height:240px; }
.comm__gate { display:flex; justify-content:space-between; align-items:center; gap:14px; } .post { padding:16px; } .post__head { display:flex; align-items:center; gap:10px; margin-bottom:10px; } .post__ava { width:36px; height:36px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; font:800 1rem/1 var(--font-head); } .post__who b { font-family:var(--font-head); text-transform:uppercase; } .post__who time { display:block; color:var(--muted); font-size:.76rem; } .post__game { margin-left:auto; }
.post__body { white-space:pre-wrap; word-break:break-word; } .post__img { margin-top:12px; max-height:460px; width:100%; object-fit:cover; } .post__actions { display:flex; gap:16px; align-items:center; margin-top:12px; color:var(--muted); font-size:.9rem; } .post__btn { display:inline-flex; align-items:center; gap:6px; background:none; border:0; color:var(--muted); cursor:pointer; font:inherit; } .post__btn svg { width:18px; height:18px; } .post__btn.on,.post__btn.on svg { color:var(--bad); fill:var(--bad); } .post__report { margin-left:auto; font-size:.78rem; } .post__mod { margin-left:auto; display:flex; gap:10px; }
.comments { margin-top:12px; display:grid; gap:8px; border-top:1px solid var(--border); padding-top:12px; } .comment { font-size:.9rem; } .comment b { font-family:var(--font-head); text-transform:uppercase; } .comment__form { display:flex; gap:8px; margin-top:8px; } .comment__form input { padding:9px 12px; }
.comm__chat { position:sticky; top:100px; display:flex; flex-direction:column; max-height:72vh; } .chat { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin:12px 0; } .chat__msg { font-size:.9rem; line-height:1.4; } .chat__msg b { font-family:var(--font-head); text-transform:uppercase; margin-right:6px; } .chat__msg.me b { color:var(--accent-ink); } .chat__del { background:none; border:0; color:var(--muted); cursor:pointer; margin-left:4px; opacity:0; } .chat__msg:hover .chat__del { opacity:1; } .chat__form { display:flex; gap:8px; }
.mod-badge { display:inline-block; padding:1px 6px; margin:0 3px; background:var(--accent); color:var(--accent-text); font:800 .64rem/1.6 var(--font); letter-spacing:.06em; } .tier-badge { display:inline-block; padding:1px 6px; background:var(--surface-2); color:var(--muted); font:700 .64rem/1.6 var(--font); }
@media (max-width:880px){ .comm { grid-template-columns:1fr; } .comm__chat { position:static; max-height:none; } }

/* merch */
.card__media--merch { aspect-ratio:1/1; } .merch-sold { position:absolute; top:12px; right:12px; background:var(--text); color:var(--bg); padding:5px 9px; font:800 .74rem/1 var(--font-head); text-transform:uppercase; } .delivery--ship { border-left-color:var(--accent); } .delivery--ship .delivery__title { color:var(--accent-ink); }

/* auth */
.authsec { padding:0; } .authwrap { display:grid; grid-template-columns:1.05fr 1fr; min-height:calc(100vh - 120px); } .authcol { display:grid; align-content:center; gap:16px; padding:clamp(32px,6vw,80px); max-width:600px; width:100%; margin-inline:auto; }
.auth { background:var(--surface); border:1px solid var(--border); padding:clamp(26px,4vw,40px); } .auth+.auth { margin-top:16px; } .auth__links { margin:16px 0 0; font-size:.9rem; color:var(--muted); } #recover { display:none; } #recover:target { display:block; }
.authart { position:relative; overflow:hidden; isolation:isolate; display:grid; align-items:end; padding:clamp(32px,5vw,64px); color:#f4f6f8; background:#0c0e12; } .authart__grid { position:absolute; inset:-50%; z-index:-2; transform:perspective(600px) rotateX(58deg); transform-origin:50% 0; background-image:linear-gradient(color-mix(in srgb,var(--accent) 35%,transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb,var(--accent) 35%,transparent) 1px, transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom, transparent, #000 45%); -webkit-mask-image:linear-gradient(to bottom, transparent, #000 45%); animation:gridrun 3s linear infinite; }
@keyframes gridrun { to { background-position:0 64px; } } .authart::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 50% at 50% 0%, color-mix(in srgb,var(--accent) 35%,transparent), transparent), linear-gradient(0deg, #0c0e12 10%, transparent 60%); } .authart__road { display:none; }
.authart .wordmark__mark { height:64px; } .authart .wordmark__text { display:none; } .authart__big { font:800 clamp(2.8rem,5vw,4.6rem)/.92 var(--font-head); text-transform:uppercase; margin:24px 0 22px; } .authart__list { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px; color:#d6dbe1; } .authart__list li { display:flex; gap:10px; align-items:center; } .authart__list svg { width:18px; height:18px; color:var(--accent); } .authart__chips { display:flex; gap:6px; } .authart__chips span { padding:6px 10px; background:var(--c); color:#111; font:800 .85rem/1 var(--font-head); }
@media (max-width:900px){ .authwrap { grid-template-columns:1fr; } .authart { min-height:240px; } .authart__list { display:none; } }

/* blog + footer + password */
.article { max-width:820px; margin-inline:auto; } .article__img { margin:24px 0 32px; }
.ftr { background:var(--surface); border-top:1px solid var(--border); } .ftr__grid { display:flex; flex-wrap:wrap; gap:40px 72px; padding:64px 0 48px; } .ftr__brand { flex:1 1 320px; } .ftr__brand p { color:var(--muted); max-width:42ch; margin:18px 0 22px; } .ftr .wordmark__mark { height:56px; } .ftr .wordmark__text { display:inline; } .ftr__col { flex:0 1 180px; } .ftr h4 { font-size:1rem; letter-spacing:.14em; color:var(--muted); margin-bottom:16px; } .ftr ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; } .ftr ul a { color:var(--muted); } .ftr ul a:hover { color:var(--text); }
.socials { display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; } .socials a { color:var(--muted); font:700 .9rem/1 var(--font-head); letter-spacing:.1em; text-transform:uppercase; } .ftr__bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:20px 0 28px; border-top:1px solid var(--border); font-size:.8rem; color:var(--muted); } .ftr__bottom p { margin:0; } .pay-icons { display:flex; flex-wrap:wrap; gap:6px; } .pay-icons svg { width:38px; height:24px; }
.pw { min-height:100vh; display:grid; place-items:center; text-align:center; padding:32px 16px; } .pw .wordmark { flex-direction:column; gap:14px; margin-bottom:28px; } .pw .wordmark__mark { height:120px; } .pw .wordmark__text { display:none; }

/* reveal + motion */
.js .reveal { opacity:0; transform:translateY(12px); transition:opacity .38s var(--ease), transform .55s var(--ease); transition-delay:var(--d,0ms); } .js .reveal.in { opacity:1; transform:none; }
.no-motion .js .reveal, .no-motion.js .reveal { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } .js .reveal { opacity:1; transform:none; } .roadline,.ticker__track { animation:none; } }

/* Header back to the old lockup: logo + wordmark text */
.hdr .wordmark__text { display: inline; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .01em; color: var(--text); }
.hdr .wordmark { gap: 11px; }
.hdr .wordmark__mark { height: 48px; }
.hdr.is-scrolled .wordmark__mark { height: 40px; }
@media (max-width: 560px) { .hdr .wordmark__text { display: none; } }

/* Original text wordmark: MODS BY / HASHY with amber slash (no logo image) */
.wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; font-family: var(--font-head); font-weight: 800; line-height: .85; }
.wordmark__mark { display: none; }
.wordmark__small { display: block; font-size: .68rem; letter-spacing: .34em; color: var(--muted); text-transform: uppercase; margin: 0 0 4px 2px; }
.wordmark__text, .hdr .wordmark__text { display: inline-flex; align-items: center; font-size: 1.5rem; letter-spacing: .02em; color: var(--text); text-transform: uppercase; }
.wordmark__text::before { content: ""; display: inline-block; width: .32em; height: .72em; margin-right: .2em; background: var(--accent); transform: skewX(-18deg); }
.hdr .wordmark { gap: 0; }
.wordmark__game { margin: 6px 0 0 2px; font-size: .95rem; padding: .25em .4em; background: var(--accent); color: var(--accent-text); align-self: flex-start; }
.hdr.is-scrolled .wordmark__text { font-size: 1.32rem; }
.ftr .wordmark__text { font-size: 1.85rem; } .ftr .wordmark__small { font-size: .74rem; }
.pw .wordmark { align-items: center; } .pw .wordmark__text { font-size: 3rem; }
@media (max-width: 560px) { .hdr .wordmark__text { display: inline-flex; font-size: 1.6rem; } }

/* promo bar */
.promo { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #ff7a00)); color: var(--accent-text); }
.promo[hidden] { display: none; }
.promo__inner { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.promo__inner p { margin: 0; flex: 1; font-weight: 600; font-size: .92rem; }
.promo__inner strong { font-family: var(--font-head); letter-spacing: .06em; margin-right: 6px; padding: 2px 7px; background: rgba(0,0,0,.25); }
.promo__inner a { color: inherit; text-decoration: underline; margin-left: 8px; white-space: nowrap; }
.promo__x { background: none; border: 0; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: .8; }
.promo__x:hover { opacity: 1; }
/* product download panel: amber for brand cohesion (was Discord blue) */
.delivery { border-left: 3px solid var(--accent); }
.delivery__title { color: var(--accent-ink); }
.delivery__title svg { color: var(--accent-ink); }
:root[data-theme="light"] .delivery__title { color: color-mix(in srgb, var(--accent) 80%, #000); }
/* ad slot */
.adslot { position: relative; display: grid; place-items: center; padding: 14px; border: 1px dashed var(--border); background: var(--surface); overflow: hidden; }
.adslot img { max-width: 100%; max-height: 250px; width: auto; height: auto; }
.adslot__tag { position: absolute; top: 6px; left: 8px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.adslot--empty { min-height: 120px; color: var(--muted); text-align: center; }
/* verify banner (garage) */
.verify-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; margin-top: 8px; background: color-mix(in srgb, var(--discord) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--discord) 40%, var(--border)); }
.verify-banner[hidden] { display: none; }
.verify-banner span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.verify-banner svg { width: 18px; height: 18px; }
/* legal pages */
.legal__body { font-size: 1.02rem; line-height: 1.7; } .legal__body h2 { margin-top: 1.6em; font-size: 1.4rem; }
.contact__ways { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.contact__way { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); } .contact__way svg { width: 18px; height: 18px; }