/* Supplemental styles for the self-hosted storefront components (ported pages). */

/* layout helpers */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
.section { padding: clamp(40px, 6vw, 80px) 0; }
.section--tight { padding: 18px 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.section__head h2 { font: 800 clamp(1.6rem, 3vw, 2.3rem)/1 var(--font-head); text-transform: uppercase; margin: 0; }
.link { color: var(--accent-ink); font-weight: 600; }
.muted { color: var(--muted); } .small { font-size: .9rem; }

/* hero */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(24px, 3vw, 44px); position: relative; }
.hero--home { background: radial-gradient(1200px 500px at 70% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); }
.hero__title { font: 800 clamp(2rem, 4.2vw, 3.05rem)/1.04 var(--font-head); text-transform: uppercase; margin: 0 0 16px; letter-spacing: -.01em; }
.hero__accent { color: var(--accent); }
.hero__lead { max-width: 560px; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.6; margin: 0 0 26px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* game picker */
.gpick__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gpick { position: relative; display: block; padding: 22px 22px 20px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--tab, var(--accent)); transition: transform .25s var(--ease), border-color .25s; }
.gpick:hover { transform: translateY(-4px); border-color: var(--tab, var(--accent)); }
.gpick__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--tab, var(--accent)); display: inline-block; }
.gpick__name { display: block; font: 800 1.8rem/1 var(--font-head); text-transform: uppercase; margin: 8px 0 2px; }
.gpick__sub { display: block; color: var(--muted); font-size: .9rem; }
.gpick__from { display: block; margin-top: 12px; font-weight: 700; color: var(--accent-ink); }

/* product grid + cards */
.grid--mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.card { display: block; background: var(--surface); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border: 1px solid var(--border); border-radius:10px; overflow: hidden; transition: transform .25s var(--ease), border-color .25s, box-shadow .3s var(--ease); }
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.card__media { position: relative; aspect-ratio: 16/10; background: linear-gradient(135deg, var(--surface-2), var(--surface)); display: grid; place-items: center; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__ph { opacity: .25; } .card__ph svg, .pview__ph svg { width: 64px; height: 64px; }
.card__game { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font: 700 .72rem/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; background: var(--glass); border: 1px solid var(--border); }
.card__game .gdot { width: 8px; height: 8px; border-radius: 50%; background: var(--tab, var(--accent)); }
.card__body { padding: 16px; }
.card__title { font: 700 1.2rem/1.1 var(--font-head); text-transform: uppercase; margin: 0 0 8px; }
.card__meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; min-height: 4px; }
.card__foot { display: flex; align-items: center; justify-content: space-between; }
.card__price { font-weight: 800; font-size: 1.1rem; }
.card__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); font-weight: 600; font-size: .9rem; }
.card__cta svg { width: 16px; height: 16px; }

/* empty states */
.empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--border); background: var(--surface); }
.empty h3 { font: 800 1.8rem/1 var(--font-head); text-transform: uppercase; margin: 0 0 8px; }
.empty p { color: var(--muted); max-width: 440px; margin: 0 auto 16px; }

/* product page */
.product__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.product__media { position: sticky; top: 90px; }
.pview { position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; }
.pview img { width: 100%; height: 100%; object-fit: cover; }
.pview__ph { opacity: .25; }
.pview__hint { position: absolute; bottom: 12px; left: 12px; font-size: .8rem; color: var(--muted); background: var(--glass); padding: 5px 10px; border: 1px solid var(--border); }
.pgal { display: flex; gap: 10px; margin-top: 10px; }
.pgal__thumb { width: 86px; height: 60px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; }
.pgal__thumb.is-active { border-color: var(--accent); }
.product__title { font: 800 clamp(1.8rem, 3.6vw, 2.8rem)/1.05 var(--font-head); text-transform: uppercase; margin: 6px 0 14px; letter-spacing: -.01em; }
.product__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.product__price { font: 800 2.2rem/1 var(--font-head); margin-bottom: 18px; }
.product__desc { color: var(--muted); line-height: 1.7; margin-bottom: 22px; }
.choose { font: 700 .78rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }

/* plans (buy tiers) */
.plans { display: grid; gap: 10px; margin-bottom: 16px; }
.plan { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: border-color .2s, background .2s; }
.plan.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.plan input { position: absolute; opacity: 0; }
.plan__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); flex: none; position: relative; }
.plan.is-selected .plan__radio { border-color: var(--accent); }
.plan.is-selected .plan__radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.plan__main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.plan__main strong { font: 700 1.05rem/1.1 var(--font-head); letter-spacing: .03em; text-transform: uppercase; }
.plan__main span { color: var(--muted); font-size: .88rem; }
.plan__badge { font-size: .65rem; background: var(--accent); color: var(--accent-text); padding: 2px 6px; letter-spacing: .08em; vertical-align: middle; }
.plan__price { font-weight: 800; font-size: 1.15rem; white-space: nowrap; }

/* buttons added */
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--ok { background: var(--ok); color: #06240f; border-color: var(--ok); }
.btn--ok:hover { filter: brightness(1.08); }
.btn .ico svg, .btn svg { width: 18px; height: 18px; }

/* delivery wide */
.delivery--wide { max-width: 760px; }

/* garage / account */
.garage__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.gcard { background: var(--surface); border: 1px solid var(--border); padding: 20px; margin-bottom: 18px; }
.gcard h3 { font: 800 1.3rem/1 var(--font-head); text-transform: uppercase; margin: 0 0 14px; }
.gcard h4 { margin: 16px 0 8px; font-size: .95rem; }
.gside .gcard:last-child { margin-bottom: 0; }
.gitems { display: grid; gap: 12px; }
.gitem { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.gitem__ph { width: 52px; height: 52px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); opacity: .5; flex: none; }
.gitem__ph svg { width: 26px; height: 26px; }
.gitem__body { flex: 1; } .gitem__body h4 { margin: 0 0 2px; font-size: 1rem; }
.gitem__act { flex: none; }
.badge { font: 700 .66rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; margin-left: 6px; vertical-align: middle; }
.badge--own { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-ink); }
.badge--ok { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.badge--off { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }
.tier { font-size: 1.05rem; margin: 0 0 6px; }
.code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px dashed var(--border); margin-bottom: 8px; }
.code code { font-weight: 800; letter-spacing: .05em; }

/* legal */
.legal__h { font: 800 clamp(1.8rem, 3.6vw, 2.8rem)/1.05 var(--font-head); text-transform: uppercase; margin: 8px 0 6px; letter-spacing: -.01em; }
.legal__body { line-height: 1.75; } .legal__body h2 { font: 800 1.5rem/1 var(--font-head); text-transform: uppercase; margin: 1.8em 0 .5em; }
.legal__body p { margin: 0 0 1em; } .legal__body a { color: var(--accent-ink); }

/* contact */
.contact__ways { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.contact__way { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); background: var(--surface); }
.contact__way svg { width: 18px; height: 18px; }

/* reveal — only hidden when JS is present (so content is never invisible without JS) */
html.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .38s var(--ease), transform .55s var(--ease); }
html.js .reveal.in, html.no-motion .reveal { opacity: 1; transform: none; }

/* responsive */
@media (max-width: 900px) {
  .gpick__row { grid-template-columns: 1fr; }
  .product__grid { grid-template-columns: 1fr; }
  .product__media { position: static; }
  .garage__grid { grid-template-columns: 1fr; }
}

/* ---- footer polish + 5 selectable line/glow FX (admin-controlled, site-wide) ---- */
.ftr__grid { padding-top: 76px; } /* breathing room under the line */
@media (max-width: 600px) { .ftr__grid { padding-top: 52px; } }
.roadline { height: 2px; border: 0; }

/* fx: Amber Sheen (default) — glow sweeps across */
html[data-fx="sheen"] .roadline { background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%); background-size: 45% 100%; background-repeat: no-repeat; box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 65%, transparent); animation: roadsheen 3.4s linear infinite; }
@keyframes roadsheen { 0% { background-position: -45% 0; } 100% { background-position: 145% 0; } }

/* fx: Neon Pulse — whole line breathes */
html[data-fx="pulse"] .roadline { background: var(--accent); animation: roadpulse 2.4s ease-in-out infinite; }
@keyframes roadpulse { 0%,100% { opacity: .45; box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent); } 50% { opacity: 1; box-shadow: 0 0 18px var(--accent), 0 0 34px color-mix(in srgb, var(--accent) 50%, transparent); } }

/* fx: Scanline — bright segment races across */
html[data-fx="scan"] .roadline { background: linear-gradient(90deg, transparent 0%, #fff 48%, var(--accent) 50%, transparent 60%); background-size: 22% 100%; background-repeat: no-repeat; box-shadow: 0 0 16px var(--accent); animation: roadscan 2.2s linear infinite; }
@keyframes roadscan { 0% { background-position: -22% 0; } 100% { background-position: 122% 0; } }

/* fx: Steady Glow — calm, no motion */
html[data-fx="glow"] .roadline { background: var(--accent); opacity: .85; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 4px var(--accent); }

/* fx: Hazard Stripes — classic moving road stripes */
html[data-fx="hazard"] .roadline { height: 5px; background: repeating-linear-gradient(90deg, var(--accent) 0 56px, transparent 56px 96px); background-size: 96px 100%; animation: roaddrive 1.8s linear infinite; }
@keyframes roaddrive { to { background-position: 96px 0; } }

/* glowing animated slash next to the HASHY wordmark (all fx except steady) */
.wordmark__text::before { border-radius: 1px; }
html[data-fx]:not([data-fx="glow"]) .wordmark__text::before { animation: slashGlow 2.6s ease-in-out infinite; }
html[data-fx="glow"] .wordmark__text::before { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); }
@keyframes slashGlow {
  0%, 100% { box-shadow: 0 0 5px color-mix(in srgb, var(--accent) 50%, transparent); filter: brightness(1); }
  50% { box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 95%, transparent), 0 0 30px color-mix(in srgb, var(--accent) 45%, transparent); filter: brightness(1.3); }
}
.hdr__logo:hover .wordmark__text::before { box-shadow: 0 0 20px var(--accent), 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent); }
html.no-motion .roadline, html.no-motion .wordmark__text::before { animation: none !important; }
html.no-motion .roadline, html.no-motion .wordmark__text::before { animation: none; }

/* ===== expanded theme options (admin-controlled, site-wide) ===== */

/* glow strength */
html[data-glow="off"] .roadline, html[data-glow="off"] .wordmark__text::before { box-shadow: none !important; animation: none !important; }
html[data-glow="subtle"] .roadline { box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent); }
html[data-glow="subtle"] .wordmark__text::before { animation: none; box-shadow: 0 0 5px color-mix(in srgb, var(--accent) 40%, transparent); }
html[data-glow="intense"] .roadline { box-shadow: 0 0 22px var(--accent), 0 0 40px color-mix(in srgb, var(--accent) 55%, transparent); }
html[data-glow="intense"] .hero--home { background: radial-gradient(1200px 520px at 70% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%); }

/* button styles */
html[data-btn="outline"] .btn--accent { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
html[data-btn="outline"] .btn--accent:hover { background: var(--accent); color: var(--accent-text); }
html[data-btn="glow"] .btn--accent { box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); }
html[data-btn="glow"] .btn--accent:hover { box-shadow: 0 0 28px var(--accent); }

/* card hover effects */
html[data-hover="glow"] .card:hover, html[data-hover="glow"] .gpick:hover { box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 30%, transparent); transform: translateY(-3px); }
html[data-hover="tilt"] .card { transition: transform .25s var(--ease), border-color .25s; }
html[data-hover="tilt"] .card:hover { transform: perspective(700px) rotateX(3deg) translateY(-4px); }
html[data-hover="none"] .card:hover, html[data-hover="none"] .gpick:hover { transform: none; box-shadow: none; }

/* background textures */
html[data-bg="grid"] body { background-image: linear-gradient(color-mix(in srgb, var(--border) 50%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--border) 50%, transparent) 1px, transparent 1px); background-size: 44px 44px; }
html[data-bg="diagonal"] body { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--border) 28%, transparent) 0 1px, transparent 1px 22px); }
html[data-bg="noise"] body { background-image: radial-gradient(color-mix(in srgb, var(--border) 45%, transparent) .5px, transparent .5px); background-size: 7px 7px; }

/* density */
html[data-density="compact"] .section { padding: clamp(28px, 4vw, 52px) 0; }
html[data-density="compact"] .grid--mods { gap: 12px; }
html[data-density="compact"] .hero { padding: clamp(36px, 6vw, 72px) 0 clamp(20px, 3vw, 36px); }
html[data-density="compact"] .ftr__grid { padding-top: 56px; gap: 28px 56px; }

/* hero style: solid (no glow wash) */
html[data-hero="solid"] .hero--home { background: var(--surface); border-bottom: 1px solid var(--border); }

/* ===== cookie banner, chat bubble, FAQ accordion ===== */
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--border); animation: cookieUp .5s var(--ease); }
.cookie[hidden] { display: none; }
@keyframes cookieUp { from { transform: translateY(100%); } to { transform: none; } }
.cookie__inner { display: flex; align-items: center; gap: 18px; padding: 14px 24px; }
.cookie__inner > div:first-child { flex: 1; font-size: .9rem; color: var(--muted); }
.cookie__inner strong { color: var(--text); }
.cookie__inner a { color: var(--accent-ink); }
.cookie__btns { display: flex; gap: 10px; flex: none; }
@media (max-width: 640px) { .cookie__inner { flex-direction: column; align-items: flex-start; gap: 10px; } }

.adblock-notice { position: fixed; left: 0; right: 0; top: 0; z-index: 97; background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border-bottom: 1px solid var(--accent); animation: cookieUp .4s var(--ease); }
.adblock-notice[hidden] { display: none; }
.adblock-notice__inner { display: flex; align-items: center; gap: 16px; padding: 10px 24px; font-size: .88rem; color: var(--text); }
.adblock-notice__inner > span { flex: 1; }
.adblock-notice__inner strong { color: var(--accent-ink); }
@media (max-width: 640px) { .adblock-notice__inner { flex-direction: column; align-items: flex-start; gap: 8px; } }

.chatbubble { position: fixed; right: 20px; bottom: 20px; z-index: 95; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 28px -8px rgba(0,0,0,.5); transition: transform .2s var(--ease), box-shadow .2s, bottom .3s var(--ease); }
/* lift the bubble above the cookie banner while it's showing */
body:has(.cookie:not([hidden])) .chatbubble { bottom: 96px; }
body:has(.cookie:not([hidden])) .chatpanel { bottom: 164px; }
.chatbubble:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent); }
.chatbubble svg { width: 26px; height: 26px; }
.chatbubble__dot { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bad); border: 2px solid var(--bg); }
.chatpanel { position: fixed; right: 20px; bottom: 88px; z-index: 81; width: 340px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; animation: chatIn .25s var(--ease); }
.chatpanel[hidden] { display: none; }
@keyframes chatIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.chatpanel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); font: 800 1.05rem/1 var(--font-head); text-transform: uppercase; }
.chatpanel__head button { background: none; border: 0; color: var(--muted); font-size: 1.3rem; cursor: pointer; line-height: 1; }
.chatpanel__body { padding: 14px 16px; display: grid; gap: 10px; max-height: 320px; overflow-y: auto; }
.chatmsg { padding: 9px 12px; border-radius: 10px; font-size: .9rem; max-width: 85%; }
.chatmsg--admin { background: var(--surface-2); align-self: flex-start; }
.chatmsg--me { background: var(--accent); color: var(--accent-text); align-self: flex-end; }
.chatpanel__foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.chatpanel__foot input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; font: inherit; }
.chatpanel__foot button { background: var(--accent); color: var(--accent-text); border: 0; padding: 0 14px; cursor: pointer; }
.chatpanel__note { font-size: .78rem; color: var(--muted); padding: 0 16px 12px; }

.faq { display: grid; gap: 10px; }
.faq__item { background: var(--surface); border: 1px solid var(--border); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: none; border: 0; color: var(--text); font: 700 1.08rem/1.3 var(--font-head); text-transform: uppercase; letter-spacing: .01em; cursor: pointer; text-align: left; }
.faq__ic { flex: none; width: 26px; height: 26px; display: grid; place-items: center; font-size: 1.4rem; color: var(--accent-ink); transition: transform .3s var(--ease); }
.faq__item.open .faq__ic { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a > div > * , .faq__item .faq__a { color: var(--muted); }
.faq__item.open .faq__a > div { padding: 0 20px 20px; line-height: 1.7; color: var(--muted); }

/* ===== ratings/reviews + wishlist ===== */
.stars{display:inline-flex;gap:2px;color:var(--muted);line-height:1}
.stars .star.on{color:var(--accent)}
.stars--sm{font-size:.9rem}
a.stars{text-decoration:none;margin-bottom:10px}
.product__actions{display:flex;gap:10px;align-items:stretch;margin-top:2px}
.wishbtn{flex:0 0 auto;font-size:1.25rem;line-height:1;padding:0 16px}
.wishbtn.on{color:var(--bad);border-color:var(--bad)}
.review{padding:14px 0;border-top:1px solid var(--border)}
.review__head{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.review p{margin:0;color:var(--muted);line-height:1.6}
.reviewform{background:var(--surface);border:1px solid var(--border);padding:16px;margin-bottom:18px}
.reviewform .rate{display:inline-flex;gap:4px;font-size:1.6rem;cursor:pointer}
.reviewform .rate .star{color:var(--muted);transition:color .1s}
.reviewform .rate .star.on{color:var(--accent)}
.reviewform textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:10px;margin:10px 0;font:inherit;min-height:70px}
.wishcard .gitem__act .on{color:var(--bad)}

/* ===== community ===== */
.comm{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
.comm__compose{margin-bottom:16px}
.postbox{background:var(--surface);border:1px solid var(--border);padding:14px}
.postbox textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:10px;font:inherit;min-height:70px;resize:vertical}
.postbox__foot{display:flex;align-items:center;gap:10px;margin-top:10px}
.comm__feed{display:grid;gap:14px}
.post{background:var(--surface);border:1px solid var(--border);padding:16px}
.post__head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.post__body{margin:0 0 10px;line-height:1.6}
.post__img{width:100%;max-height:460px;object-fit:cover;border:1px solid var(--border)}
.post__actions{display:flex;align-items:center;gap:14px;margin-top:10px}
.post__like{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;display:inline-flex;gap:5px;align-items:center}
.post__like.on{color:var(--bad)}
.post__mod{margin-left:auto;display:flex;gap:6px}
.post__mod button{background:var(--surface-2);border:1px solid var(--border);color:var(--muted);font-size:.74rem;padding:3px 8px;cursor:pointer}
.post__comments{margin-top:10px;display:grid;gap:6px}
.cmt{font-size:.9rem;color:var(--muted)}.cmt strong{color:var(--text)}
.cmt-form{display:flex;gap:8px;margin-top:10px}
.cmt-form input{flex:1;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:8px 10px;font:inherit}
.comm__chat{background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:90px;height:70vh}
.comm__chat-head{padding:12px 14px;border-bottom:1px solid var(--border);font:800 1.05rem/1 var(--font-head);text-transform:uppercase}
.comm__chat-msgs{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.cmsg{font-size:.9rem;color:var(--muted)}.cmsg strong{color:var(--text)}
.comm__chat-foot{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border)}
.comm__chat-foot input{flex:1;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:9px 11px;font:inherit}
.comm__chat-foot button{background:var(--accent);color:var(--accent-text);border:0;padding:0 14px;cursor:pointer;font-weight:700}
.badge--ok{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
@media(max-width:860px){.comm{grid-template-columns:1fr}.comm__chat{height:60vh;position:static}}
.badge--fs25{background:color-mix(in srgb,#6bbf3a 24%,transparent);color:#6bbf3a}
/* ---- community W3: reactions, mentions, lightbox, infinite scroll ---- */
.post__img{cursor:zoom-in;max-height:360px;transition:filter .15s ease}
.post__img:hover{filter:brightness(1.05)}
.post__react{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rbtn{background:var(--surface-2);border:1px solid var(--border);color:var(--muted);cursor:pointer;font:inherit;font-size:.85rem;padding:3px 9px;border-radius:999px;display:inline-flex;gap:5px;align-items:center;line-height:1.4;transition:border-color .12s ease,background .12s ease}
.rbtn:hover{border-color:var(--accent)}
.rbtn.on{background:color-mix(in srgb,var(--accent) 20%,transparent);border-color:var(--accent);color:var(--text)}
.rbtn__n{font-variant-numeric:tabular-nums;font-weight:700}
.rbtn.on .rbtn__n{color:var(--accent)}
.mention{color:var(--accent);font-weight:600;text-decoration:none}
.mention:hover{text-decoration:underline}
.feed__sentinel{min-height:1px}
.feed__more{text-align:center;color:var(--muted);font-size:.85rem;padding:14px 0}
.feed__end{text-align:center;color:var(--muted);font-size:.82rem;padding:16px 0;opacity:.75}
.feed__spin{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:feedspin .7s linear infinite;vertical-align:-3px;margin-right:7px}
@keyframes feedspin{to{transform:rotate(360deg)}}
.no-motion .feed__spin{animation:none}
.postbox__preview{position:relative;margin-top:10px;max-width:220px}
.postbox__preview img{width:100%;border:1px solid var(--border);border-radius:6px;display:block}
.postbox__preview button{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.6);color:#fff;border:0;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1}
.comm__ro{color:var(--muted);font-size:.85rem;padding:10px 14px;border-top:1px solid var(--border);text-align:center}
.comm__ro a{color:var(--accent)}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center;padding:28px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lightbox__close{position:absolute;top:16px;right:20px;background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.mention-ac{position:absolute;z-index:40;background:var(--surface);border:1px solid var(--border);border-radius:8px;min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,.3);overflow:hidden}
.mention-ac button{display:flex;gap:7px;align-items:center;width:100%;text-align:left;background:none;border:0;color:var(--text);font:inherit;padding:8px 11px;cursor:pointer}
.mention-ac button:hover,.mention-ac button.on{background:var(--surface-2)}
.postbox{position:relative}
.badge--sup{background:linear-gradient(95deg,#ffb347,#ff7eb3);color:#1a1200;font-weight:700}

/* ===== search / filter / game pills ===== */
.filterwrap{margin-bottom:22px}
.gpills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.gpill{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;background:var(--surface);border:1px solid var(--border);border-radius:6px;font:700 .82rem/1 var(--font-head);letter-spacing:.06em;text-transform:uppercase;color:var(--text);transition:transform .18s var(--ease),border-color .18s,color .18s,background .18s;position:relative;overflow:hidden}
.gpill .gdot{width:9px;height:9px;border-radius:50%;background:var(--tab,var(--accent));transition:transform .18s var(--ease)}
.gpill:hover{transform:translateY(-2px);color:var(--text);border-color:var(--tab,var(--accent))}
.gpill:hover .gdot{transform:scale(1.35)}
.gpill.is-on{color:#fff;background:var(--tab,var(--accent));border-color:var(--tab,var(--accent));text-shadow:0 1px 2px rgba(0,0,0,.4)}
.gpill.is-on .gdot{background:rgba(0,0,0,.55)}
.gpill::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--tab,var(--accent));transition:width .22s var(--ease)}
.gpill:hover::after{width:100%}
.gpill.is-on::after{width:0}
.filterbar{display:flex;gap:10px;flex-wrap:wrap}
.filterbar input[type=search]{flex:1;min-width:180px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:10px 14px;font:inherit}
.filterbar select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:10px 12px;font:inherit}

/* product media: gallery swap + 3D/video */
.pview video, .pview model-viewer{width:100%;height:100%;object-fit:cover;background:#000}
.pgal__thumb{overflow:hidden;position:relative;display:grid;place-items:center;font:800 .8rem/1 var(--font-head);color:var(--accent-ink)}
.pgal__thumb img{width:100%;height:100%;object-fit:cover}
.changelog-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--accent-ink);font-weight:600;font-size:.9rem}

/* ===== mod-request board ===== */
.reqs{display:grid;gap:10px}
.req{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);padding:14px 16px}
.req__vote{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);padding:6px 12px;cursor:pointer;font:700 .8rem/1 var(--font-head);min-width:48px}
.req__vote.on{color:var(--accent-ink);border-color:var(--accent)}
.req__vote span{font-size:1rem;color:var(--text)}
.req__body{flex:1}.req__body h4{margin:0 0 3px;font-size:1.02rem}

/* gift box */
.giftbox{margin-top:10px;background:var(--surface);border:1px solid var(--border);padding:12px 14px}
.giftbox .inline{display:flex;align-items:center;gap:8px;cursor:pointer}
.giftbox input[type=email]{width:100%;margin-top:10px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:9px 11px;font:inherit}
.coupon{margin-top:8px}
.coupon__toggle{background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer}
.coupon__toggle:hover{color:var(--text)}
.coupon__body{margin-top:10px}
.coupon__row{display:flex;gap:8px}
.coupon__input{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:9px 11px;font:inherit;text-transform:uppercase}
.coupon__input::placeholder{text-transform:none;color:var(--muted)}
.coupon__msg{margin:8px 0 0;font-size:.85rem;color:var(--muted)}
.coupon__msg.is-ok{color:var(--ok)}
.coupon__msg.is-err{color:var(--bad)}

/* ======================================================================
   CLEAN INDUSTRIAL REDESIGN  (home + product)  — ci- prefixed, scoped
   Appended; does not modify existing rules. New markup uses ci- classes.
   ====================================================================== */
.ci-home, .ci-product{
  --ci-bg:#07090d; --ci-bg2:#0a0e16; --ci-surface:rgba(10,15,25,.78); --ci-surface2:rgba(18,26,43,.72);
  --ci-line:rgba(120,170,255,.14); --ci-line2:rgba(120,170,255,.22);
  --ci-fg:#f5f7fb; --ci-muted:#b9c2d2; --ci-faint:#6f7b93;
  --ci-amber:#38e1d6; --ci-amber-ink:#5ff0e6;
  --ci-grad:var(--grad);
  --ci-ats:#4d9dff; --ci-beamng:#ff5b4a; --ci-fs25:#5be49b;
  --ci-ink:#04120f; --ci-ease:cubic-bezier(.22,.61,.36,1);
  background:var(--ci-bg); color:var(--ci-fg); font-family:var(--font);
}
.ci-home *, .ci-product *{ box-sizing:border-box; }
.ci-wrap{ width:100%; max-width:1180px; margin:0 auto; padding-inline:24px; }
.ci-home h1,.ci-home h2,.ci-home h3,.ci-product h1,.ci-product h2,.ci-product h3{
  font-family:var(--font-head); font-weight:800; letter-spacing:-.01em; margin:0; text-wrap:balance;
}
.ci-eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ci-amber-ink); display:inline-flex; align-items:center; gap:10px; }
.ci-eyebrow::before{ content:""; width:3px; height:15px; background:var(--ci-amber); }

/* buttons (Lifestyle: solid blue primary, outlined secondary) */
.ci-btn{ position:relative; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700; font-size:.9rem; letter-spacing:.03em; text-transform:uppercase; padding:13px 24px; border:0; cursor:pointer; text-decoration:none; border-radius:10px; transition:transform .22s var(--ci-ease), box-shadow .22s var(--ci-ease), background .28s var(--ci-ease), color .28s var(--ci-ease), border-color .2s, filter .22s; }
.ci-btn__arr{ display:inline-block; max-width:0; overflow:hidden; opacity:0; transform:translateX(-5px); transition:max-width .28s var(--ci-ease), opacity .28s var(--ci-ease), transform .28s var(--ci-ease); }
.ci-btn:hover .ci-btn__arr{ max-width:1.4em; opacity:1; transform:translateX(0); }
.ci-btn--amber{ background:var(--ci-amber); color:var(--ci-ink); box-shadow:0 6px 16px -12px rgba(0,0,0,.6); }
.ci-btn--amber:hover{ transform:translateY(-2px); box-shadow:0 0 22px -2px color-mix(in srgb,var(--ci-amber) 55%,transparent), 0 14px 32px -10px color-mix(in srgb,var(--ci-amber) 70%,transparent); filter:brightness(1.07); }
.ci-btn--ghost{ background:color-mix(in srgb,var(--ci-fg) 4%,transparent); color:var(--ci-fg); border:1px solid var(--ci-line2); }
.ci-btn--ghost:hover{ border-color:var(--ci-amber); color:#fff; background:color-mix(in srgb,var(--ci-amber) 14%,transparent); transform:translateY(-2px); }
.ci-btn--discord{ background-image:linear-gradient(90deg,#7a85ff 0 50%,#5865f2 50% 100%); color:#fff; }
.ci-btn--discord:hover{ background-position:0 0; transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(88,101,242,.6); }
.ci-btn--sm{ padding:10px 16px; font-size:.78rem; }
.ci-btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
.ci-btn svg{ width:20px; height:20px; }

/* promo — milky-way (drifting aurora + twinkling stars, no sliding gradient) */
.ci-promo{ position:relative; overflow:hidden; background:linear-gradient(100deg,#070b1e,#140c30 45%,#07222b); color:#eaf1ff; text-align:center; font-family:var(--font-head); font-weight:700; font-size:.82rem; letter-spacing:.05em; padding:10px 16px; text-transform:uppercase; }
.ci-promo__aurora{ position:absolute; inset:-60%; z-index:0; filter:blur(14px); background:radial-gradient(42% 160% at 18% 50%,color-mix(in srgb,var(--ci-amber) 55%,transparent),transparent 60%),radial-gradient(42% 160% at 52% 50%,rgba(155,91,255,.45),transparent 60%),radial-gradient(42% 160% at 84% 50%,rgba(77,157,255,.4),transparent 60%); animation:ci-milky 16s ease-in-out infinite alternate; }
@keyframes ci-milky{ 0%{ transform:translateX(-5%) translateY(2%); } 100%{ transform:translateX(5%) translateY(-2%); } }
.ci-promo__stars{ position:absolute; inset:0; z-index:1; background-image:radial-gradient(1.3px 1.3px at 12% 40%,#fff,transparent),radial-gradient(1px 1px at 28% 70%,#fff,transparent),radial-gradient(1.4px 1.4px at 44% 30%,#fff,transparent),radial-gradient(1px 1px at 62% 60%,#cfe3ff,transparent),radial-gradient(1.2px 1.2px at 78% 45%,#fff,transparent),radial-gradient(1px 1px at 91% 72%,#fff,transparent),radial-gradient(1.1px 1.1px at 36% 55%,#fff,transparent); opacity:.7; animation:ci-twinkle 4s ease-in-out infinite; }
@keyframes ci-twinkle{ 0%,100%{ opacity:.35; } 50%{ opacity:.85; } }
.ci-promo__txt{ position:relative; z-index:2; }
.ci-promo a{ position:relative; z-index:2; color:var(--ci-amber-ink); text-decoration:none; font-weight:800; }
.ci-promo a:hover{ text-decoration:underline; }
.no-motion .ci-promo__aurora, .no-motion .ci-promo__stars{ animation:none !important; }
@media(prefers-reduced-motion:reduce){ .ci-promo__aurora, .ci-promo__stars{ animation:none !important; } }

/* ---------- hero slideshow ---------- */
.ci-hero{ position:relative; height:min(76vh,640px); min-height:440px; overflow:hidden; background:var(--ci-bg2); }
.ci-hero__particles{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; opacity:.92; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 86%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 9%,#000 86%,transparent 100%); }
.ci-slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ci-ease); display:grid; align-items:center; }
.ci-slide.on{ opacity:1; }
.ci-slide__bg{ position:absolute; inset:0; z-index:0; }
.ci-slide__bg--ats{ background:radial-gradient(80% 110% at 80% 6%,color-mix(in srgb,var(--ci-ats) 24%,#000),#0b0a09 52%); }
.ci-slide__bg--beamng{ background:radial-gradient(80% 110% at 80% 6%,color-mix(in srgb,var(--ci-beamng) 24%,#000),#0b0a09 52%); }
.ci-slide__bg--fs25{ background:radial-gradient(80% 110% at 80% 6%,color-mix(in srgb,var(--ci-fs25) 22%,#000),#0b0a09 52%); }
.ci-slide__grid{ position:absolute; inset:0; z-index:1; background-image:linear-gradient(color-mix(in srgb,var(--sg,#fff) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--sg,#fff) 7%,transparent) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(120% 90% at 20% 20%,#000 20%,transparent 75%); mask-image:radial-gradient(120% 90% at 20% 20%,#000 20%,transparent 75%); }
.ci-slide__scrim{ position:absolute; inset:0; z-index:2; background:linear-gradient(90deg,rgba(8,7,6,.92) 0%,rgba(8,7,6,.55) 40%,rgba(8,7,6,0) 72%),linear-gradient(0deg,rgba(8,7,6,.55),transparent 42%); }
.ci-slide__content{ position:relative; z-index:3; max-width:1180px; margin:0 auto; padding:0 24px; width:100%; }
.ci-slide__inner{ max-width:620px; }
.ci-slide .ci-eyebrow{ color:var(--sg); }
.ci-slide .ci-eyebrow::before{ background:var(--sg); }
.ci-slide .ci-slide__title{ font-size:clamp(1.7rem,4vw,3rem); line-height:.98; margin:12px 0 14px; max-width:14ch; overflow-wrap:break-word; }
.ci-slide p{ color:var(--ci-muted); font-size:1.12rem; max-width:46ch; margin:0 0 26px; }
.ci-slide__tag{ position:absolute; right:0; bottom:-4%; max-width:100%; z-index:1; font-family:var(--font-head); font-weight:800; font-size:clamp(6rem,20vw,17rem); line-height:.8; color:color-mix(in srgb,var(--sg) 12%,transparent); letter-spacing:-.03em; pointer-events:none; white-space:nowrap; }
.ci-hero__dots{ position:absolute; z-index:5; bottom:22px; left:50%; transform:translateX(-50%); display:flex; gap:10px; }
.ci-hero__dots button{ width:32px; height:4px; border:0; background:color-mix(in srgb,#fff 22%,transparent); cursor:pointer; padding:0; transition:background .3s; }
.ci-hero__dots button.on{ background:var(--ci-amber); }
.ci-hero__arrow{ position:absolute; z-index:5; top:50%; transform:translateY(-50%); width:46px; height:46px; border:1px solid var(--ci-line2); background:color-mix(in srgb,#000 40%,transparent); color:var(--ci-fg); cursor:pointer; display:grid; place-items:center; font-size:1.5rem; line-height:1; transition:background .2s,border-color .2s; }
.ci-hero__arrow:hover{ background:var(--ci-amber); color:var(--ci-ink); border-color:var(--ci-amber); }
.ci-hero__arrow.prev{ left:18px; } .ci-hero__arrow.next{ right:18px; }
@media(max-width:680px){ .ci-hero__arrow{ display:none; } }

/* ---------- cursor-follow glow (site-wide, injected by ANIM_JS) ---------- */
#hashy-cursor{ position:fixed; width:340px; height:340px; border-radius:50%; pointer-events:none; z-index:0; transform:translate(-50%,-50%); background:radial-gradient(circle,color-mix(in srgb,var(--accent) 7%,transparent),transparent 60%); opacity:0; transition:opacity .4s; mix-blend-mode:screen; will-change:left,top; }
.no-motion #hashy-cursor{ display:none; }
@media(prefers-reduced-motion:reduce){ #hashy-cursor{ display:none; } }
@media(hover:none){ #hashy-cursor{ display:none; } }

/* ---------- 3D tilt + magnetic (JS adds inline transform) ---------- */
.ci-plan, .ci-gcard, .card{ transform-style:preserve-3d; will-change:transform; }

/* ---------- staggered slide text reveal ---------- */
.ci-slide .ci-eyebrow, .ci-slide .ci-slide__title, .ci-slide p, .ci-slide .ci-btn-row{ opacity:0; transform:translateY(20px); }
.ci-slide.on .ci-eyebrow{ opacity:1; transform:none; transition:opacity .6s .15s var(--ci-ease),transform .6s .15s var(--ci-ease); }
.ci-slide.on .ci-slide__title{ opacity:1; transform:none; transition:opacity .7s .28s var(--ci-ease),transform .7s .28s var(--ci-ease); }
.ci-slide.on p{ opacity:1; transform:none; transition:opacity .7s .42s var(--ci-ease),transform .7s .42s var(--ci-ease); }
.ci-slide.on .ci-btn-row{ opacity:1; transform:none; transition:opacity .7s .55s var(--ci-ease),transform .7s .55s var(--ci-ease); }
.no-motion .ci-slide .ci-eyebrow, .no-motion .ci-slide .ci-slide__title, .no-motion .ci-slide p, .no-motion .ci-slide .ci-btn-row{ opacity:1; transform:none; }

/* ---------- dot progress fill ---------- */
.ci-hero__dots button{ position:relative; overflow:hidden; }
.ci-hero__dots button.on::after{ content:""; position:absolute; inset:0; background:var(--ci-amber); transform-origin:left; animation:ci-barfill 5s linear; }
.no-motion .ci-hero__dots button.on::after{ animation:none; }
@keyframes ci-barfill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ---------- trust strip ---------- */
.ci-trust{ border-bottom:1px solid var(--ci-line); background:var(--ci-bg2); }
.ci-trust__in{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 34px; padding:18px 24px; max-width:1180px; margin:0 auto; }
.ci-trust span{ display:inline-flex; align-items:center; gap:9px; color:var(--ci-muted); font-size:.9rem; }
.ci-trust b{ color:var(--ci-fg); font-weight:600; }
.ci-trust .ci-dot{ width:6px; height:6px; border-radius:50%; background:var(--ci-amber); }

/* ---------- section shell ---------- */
.ci-block{ padding:72px 0; }
.ci-shead{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:30px; }
.ci-shead h2{ font-size:clamp(1.7rem,4vw,2.5rem); margin-top:8px; }
.ci-shead a{ font-family:var(--font-head); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ci-amber-ink); white-space:nowrap; text-decoration:none; }
.ci-shead a:hover{ color:var(--ci-amber); }

/* ---------- featured 3D showcase ---------- */
.ci-show3d{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; }
.ci-viewer{ position:relative; aspect-ratio:16/11; background:radial-gradient(80% 80% at 50% 40%,#141a38,#0a0b14); border:1px solid var(--ci-line); overflow:hidden; }
.ci-viewer canvas{ width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
.ci-viewer canvas:active{ cursor:grabbing; }
.ci-viewer__hint{ position:absolute; bottom:12px; left:12px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ci-faint); background:color-mix(in srgb,#000 55%,transparent); padding:5px 9px; }
.ci-viewer__badge{ position:absolute; top:12px; left:12px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ci-amber); border:1px solid color-mix(in srgb,var(--ci-amber) 40%,transparent); padding:4px 9px; }
.ci-show3d h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:12px; }
.ci-specs{ list-style:none; padding:0; margin:20px 0 26px; display:grid; gap:1px; background:var(--ci-line); border:1px solid var(--ci-line); }
.ci-specs li{ display:flex; justify-content:space-between; padding:11px 14px; background:var(--ci-surface); font-size:.9rem; }
.ci-specs li span:first-child{ color:var(--ci-muted); }
.ci-specs li span:last-child{ font-family:var(--font-mono); color:var(--ci-fg); }
.ci-show3d p{ color:var(--ci-muted); }
@media(max-width:820px){ .ci-show3d{ grid-template-columns:1fr; } }

/* ---------- video spot ---------- */
.ci-videospot{ position:relative; aspect-ratio:16/9; max-height:460px; margin:0 auto; background:radial-gradient(70% 90% at 50% 40%,#1b150c,#0a0908); border:1px solid var(--ci-line); overflow:hidden; display:grid; place-items:center; }
.ci-videospot::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 45%,color-mix(in srgb,var(--ci-amber) 10%,transparent),transparent 70%); }
.ci-videospot::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 120px rgba(0,0,0,.6); }
.ci-videospot__play{ position:relative; z-index:1; display:grid; place-items:center; gap:14px; text-align:center; }
.ci-playbtn{ width:78px; height:78px; border-radius:50%; background:var(--ci-amber); color:var(--ci-ink); display:grid; place-items:center; box-shadow:0 0 0 0 color-mix(in srgb,var(--ci-amber) 50%,transparent); animation:ci-pulse 2.6s var(--ci-ease) infinite; }
@keyframes ci-pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--ci-amber) 45%,transparent); } 70%{ box-shadow:0 0 0 26px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
.ci-videospot__play span{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ci-muted); }

/* ---------- showcase tiles ---------- */
.ci-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ci-tile{ position:relative; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--ci-line); background:var(--ci-surface); }
.ci-tile__img{ position:absolute; inset:0; transition:transform 1.1s var(--ci-ease); }
.ci-tile:hover .ci-tile__img{ transform:scale(1.08); }
.ci-tile__img.a{ background:radial-gradient(70% 70% at 40% 30%,color-mix(in srgb,var(--ci-ats) 40%,#000),#0c0a08); }
.ci-tile__img.b{ background:radial-gradient(70% 70% at 60% 30%,color-mix(in srgb,var(--ci-beamng) 40%,#000),#0c0a08); }
.ci-tile__img.c{ background:radial-gradient(70% 70% at 40% 60%,color-mix(in srgb,var(--ci-fs25) 40%,#000),#0c0a08); }
.ci-tile__img.d{ background:radial-gradient(70% 70% at 60% 60%,color-mix(in srgb,var(--ci-amber) 36%,#000),#0c0a08); }
.ci-tile__cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:14px; background:linear-gradient(0deg,#000d,transparent); }
.ci-tile__cap small{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ci-amber-ink); }
.ci-tile__cap b{ display:block; font-family:var(--font-head); font-weight:700; font-size:1rem; }
@media(max-width:820px){ .ci-tiles{ grid-template-columns:repeat(2,1fr); } }

/* ---------- game picker ---------- */
.ci-picker{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ci-gcard{ position:relative; display:block; padding:26px 24px 24px; background:var(--ci-surface); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--ci-line); border-left:3px solid var(--g,var(--ci-amber)); border-radius:10px; overflow:hidden; text-decoration:none; color:var(--ci-fg); transition:transform .28s var(--ci-ease),border-color .28s; }
.ci-gcard:hover{ transform:translateY(-5px); }
.ci-gcard::after{ content:""; position:absolute; top:0; right:0; width:120px; height:120px; background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--g) 22%,transparent),transparent 70%); }
.ci-gcard .ci-gd{ width:11px; height:11px; border-radius:50%; background:var(--g); margin-bottom:18px; }
.ci-gcard h3{ font-size:1.9rem; }
.ci-gcard p{ color:var(--ci-muted); margin:4px 0 16px; font-size:.92rem; }
.ci-gcard .ci-from{ font-family:var(--font-head); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ci-amber-ink); }
@media(max-width:820px){ .ci-picker{ grid-template-columns:1fr; } }

/* ---------- latest mods grid (reuse existing .card) ---------- */
.ci-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.ci-empty{ border:1px dashed var(--ci-line2); padding:56px 24px; text-align:center; background:var(--ci-bg2); }
.ci-empty h3{ font-size:1.6rem; margin-bottom:10px; }
.ci-empty p{ color:var(--ci-muted); max-width:44ch; margin:0 auto 22px; }

/* ---------- all-access plans ---------- */
.ci-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ci-plan{ position:relative; background:var(--ci-surface); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--ci-line); border-radius:10px; padding:30px 24px 26px; display:flex; flex-direction:column; transition:transform .28s var(--ci-ease),border-color .28s; }
.ci-plan:hover{ transform:translateY(-5px); }
.ci-plan--best{ border-color:var(--ci-amber); box-shadow:0 0 0 1px var(--ci-amber),0 24px 56px -24px color-mix(in srgb,var(--ci-amber) 45%,transparent); }
.ci-plan__tag{ position:absolute; top:-11px; left:24px; background:var(--ci-amber); color:var(--ci-ink); font-family:var(--font-head); font-weight:800; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; padding:4px 11px; clip-path:polygon(0 0,100% 0,100% 70%,calc(100% - 8px) 100%,0 100%); }
.ci-plan h3{ font-size:1.3rem; }
.ci-plan__price{ font-family:var(--font-head); font-weight:800; font-size:2.7rem; line-height:1; margin:12px 0 4px; }
.ci-plan__price .per{ font-family:var(--font); font-weight:400; font-size:1rem; color:var(--ci-muted); }
.ci-plan__save{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ci-fs25); margin-bottom:18px; min-height:1em; }
.ci-plan ul{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:9px; font-size:.9rem; color:var(--ci-muted); }
.ci-plan li::before{ content:"✓"; color:var(--ci-amber); font-weight:800; margin-right:8px; }
.ci-plan .ci-btn{ margin-top:auto; justify-content:center; }
.ci-billtoggle{ display:inline-flex; border:1px solid var(--ci-line2); padding:4px; gap:4px; margin-bottom:26px; border-radius:999px; }
.ci-billtoggle button{ border:0; background:transparent; color:var(--ci-muted); font-family:var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; padding:8px 20px; border-radius:999px; cursor:pointer; transition:background .2s var(--ci-ease),color .2s; }
.ci-billtoggle button.on{ background:var(--ci-amber); color:var(--ci-ink); }
.ci-lead{ color:var(--ci-muted); max-width:62ch; margin:-14px 0 20px; }
.ci-lead b{ color:var(--ci-fg); }
@media(max-width:820px){ .ci-plans{ grid-template-columns:1fr; } }

/* ====================  PRODUCT PAGE  ==================== */
.ci-product__grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:34px; padding-block:34px 20px; }
@media(max-width:860px){ .ci-product__grid{ grid-template-columns:1fr; } }
.ci-gal{ display:flex; flex-direction:column; gap:12px; }
.ci-gal__main{ position:relative; aspect-ratio:4/3; border:1px solid var(--ci-line); border-radius:14px; overflow:hidden; background:#0a0908; }
.ci-gslide{ position:absolute; inset:0; opacity:0; transition:opacity 1s var(--ci-ease); }
.ci-gslide.on{ opacity:1; }
.ci-gslide__img{ position:absolute; inset:0; background-size:cover; background-position:center; }
.ci-gslide.on .ci-gslide__img.kb{ animation:ci-kb 7s var(--ci-ease) both; }
@keyframes ci-kb{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }
.ci-gslide img,.ci-gslide video,.ci-gslide model-viewer{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.ci-ph{ position:absolute; inset:0; display:grid; place-items:center; gap:10px; color:var(--ci-faint); overflow:hidden; }
.ci-ph svg{ width:46px; height:46px; opacity:.5; position:relative; z-index:2; }
.ci-ph span{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; position:relative; z-index:2; }
/* animated sheen sweeping across every placeholder */
.ci-ph::after{ content:""; position:absolute; inset:-40% -60%; background:linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--ci-amber) 22%,transparent) 50%,transparent 58%); transform:translateX(-30%); animation:ci-sheen 3.6s var(--ci-ease) infinite; z-index:1; }
@keyframes ci-sheen{ 0%{ transform:translateX(-45%);} 60%,100%{ transform:translateX(45%);} }
.ci-ph--a{ background:radial-gradient(70% 70% at 40% 30%,#1a2246,#0a0b14); }
.ci-ph--b{ background:radial-gradient(70% 70% at 60% 35%,#241a46,#0a0b14); }
.ci-ph--c{ background:radial-gradient(70% 70% at 45% 60%,#14233f,#0a0b14); }
.ci-ph--d{ background:radial-gradient(70% 70% at 60% 55%,#1d2a52,#0a0b14); }
.ci-ph--e{ background:radial-gradient(70% 70% at 50% 40%,#191f44,#0a0b14); }
.ci-gal__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 18px; background:linear-gradient(0deg,#000c,transparent); font-size:.85rem; color:var(--ci-muted); }
.ci-gal__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:40px; height:40px; border:1px solid var(--ci-line2); background:color-mix(in srgb,#000 45%,transparent); color:var(--ci-fg); cursor:pointer; display:grid; place-items:center; border-radius:8px; font-size:1.3rem; line-height:1; transition:.15s var(--ci-ease); }
.ci-gal__arrow:hover{ background:var(--ci-amber); color:var(--ci-ink); border-color:var(--ci-amber); }
.ci-gal__arrow.prev{ left:12px; } .ci-gal__arrow.next{ right:12px; }
.ci-gal__thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.ci-thumb{ position:relative; aspect-ratio:4/3; border:1px solid var(--ci-line); border-radius:9px; overflow:hidden; cursor:pointer; background-size:cover; background-position:center; transition:border-color .15s var(--ci-ease),transform .15s var(--ci-ease); }
.ci-thumb__img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s var(--ci-ease); }
.ci-thumb:hover{ transform:translateY(-2px); }
.ci-thumb:hover .ci-thumb__img{ transform:scale(1.12); }
.ci-thumb.on{ border-color:var(--ci-amber); box-shadow:0 0 0 1px var(--ci-amber); }
.ci-thumb__n{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; color:var(--ci-faint); }

.ci-info .ci-price{ font-family:var(--font-head); font-weight:800; font-size:2.4rem; margin:8px 0 2px; }
.ci-info .ci-price span{ font-family:var(--font); font-weight:400; font-size:1rem; color:var(--ci-muted); }
.ci-info h1{ font-size:clamp(1.8rem,4vw,2.6rem); margin:6px 0 10px; }
.ci-info .ci-sub{ color:var(--ci-muted); margin:0 0 18px; }
.ci-info .ci-desc{ color:var(--ci-muted); margin:0 0 6px; }
.ci-allaccess{ margin-top:12px; font-size:.88rem; color:var(--ci-muted); }
.ci-allaccess a{ color:var(--ci-amber-ink); text-decoration:underline; }
.ci-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.ci-tag{ font-family:"Barlow Condensed",var(--font-mono); font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#6fb0ff; background:rgba(77,157,255,.14); border:0; padding:4px 9px; border-radius:3px; }
.ci-choose{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ci-faint); margin:22px 0 10px; }
.ci-section{ padding-block:30px; border-top:1px solid var(--ci-line); }
.ci-section h2{ font-size:1.4rem; margin-bottom:14px; }
.ci-feat{ columns:2; column-gap:40px; color:var(--ci-muted); font-size:.94rem; list-style:none; padding:0; margin:0; }
.ci-feat li{ margin:4px 0; break-inside:avoid; padding-left:18px; position:relative; }
.ci-feat li::before{ content:"›"; position:absolute; left:0; color:var(--ci-amber); font-weight:800; }
@media(max-width:620px){ .ci-feat{ columns:1; } }
.ci-note{ border-left:3px solid var(--ci-amber); background:var(--ci-surface2); border-radius:0 8px 8px 0; padding:12px 16px; margin-top:16px; font-size:.9rem; color:var(--ci-muted); }
.ci-note b{ color:var(--ci-fg); }

/* the existing .plans/.plan radios inside the CI product info still styled by base/store rules */
.ci-product .plans{ margin:0 0 14px; }

@media (prefers-reduced-motion: reduce){ .ci-home *, .ci-product *{ animation:none !important; } .ci-slide,.ci-gslide{ transition:none; } }

/* footer social icon buttons (override the text-link default) */
.ftr .socials{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.ftr .socials a{ display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid var(--border); border-radius:9px; color:var(--muted); transition:color .2s var(--ease),border-color .2s,transform .2s var(--ease); }
.ftr .socials a:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.ftr .socials svg{ width:20px; height:20px; }

/* ===== LIFESTYLE SKIN — gradient wordmark + headline (match mylifestylemod.com) ===== */
.wordmark__text{
  background-image:var(--grad);
  background-size:100% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  letter-spacing:-.03em;
}
/* keep the accent slash readable on the gradient */
.wordmark__text::before{ background:var(--accent); }
/* big hero headline gets the same signature gradient sweep */
.ci-slide .ci-slide__title{
  background-image:var(--grad);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  letter-spacing:-.03em;
  padding-right:.06em;
  animation:lsGradSlide 5s ease-in-out infinite alternate;
}
@keyframes lsGradSlide{ 0%{ background-position:0% 50%; } 100%{ background-position:100% 50%; } }
html.no-motion .wordmark__text, html.no-motion .ci-slide .ci-slide__title{ animation:none; }
@media (prefers-reduced-motion:reduce){ .wordmark__text, .ci-slide .ci-slide__title{ animation:none; } }
/* eyebrow bar + viewer badge pick up the gradient instead of a flat bar */
.ci-eyebrow::before{ background:var(--ci-grad); }

/* ===== cleaner footer (Lifestyle-style) ===== */
.ftr__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:36px 40px; align-items:start; }
.ftr__brand{ max-width:320px; }
.ftr__col h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
.ftr__col ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.ftr__col a{ color:var(--text); opacity:.8; font-size:.94rem; }
.ftr__col a:hover{ opacity:1; color:var(--accent-ink); }
.ftr__bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px 28px; flex-wrap:wrap; border-top:1px solid var(--border); margin-top:40px; padding-top:20px; }
.ftr__legal{ display:flex; gap:20px; flex-wrap:wrap; }
.ftr__legal a{ color:var(--muted); font-size:.85rem; }
.ftr__legal a:hover{ color:var(--text); }
.ftr__bottom p{ margin:0; color:var(--muted); font-size:.82rem; }
@media (max-width:820px){ .ftr__grid{ grid-template-columns:1fr 1fr; } .ftr__brand{ grid-column:1 / -1; max-width:none; } }
@media (max-width:480px){ .ftr__grid{ grid-template-columns:1fr; } }

/* accent color picker swatches in settings */
.seg--color{ display:flex; gap:9px; flex-wrap:wrap; }
.seg--color button{ width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; outline:1px solid var(--border); transition:transform .15s var(--ease); }
.seg--color button:hover{ transform:scale(1.15); }
.seg--color button.on{ border-color:var(--text); }

/* ===== Lifestyle header (centered nav + active pill) ===== */
.hdr__nav ul{ justify-content:center; gap:4px; }
.hdr__nav a{ padding:8px 15px; border-radius:999px; }
.hdr__nav a::after{ display:none; }
.hdr__nav a.is-active{ background:color-mix(in srgb,var(--text) 9%,transparent); color:var(--text); }
.hdr__nav a:hover{ color:var(--text); }

/* ===== Lifestyle footer (5 columns, accent-bar headings, LOOK row) ===== */
.ftr .roadline{ display:none; }
.ftr__grid{ display:grid !important; grid-template-columns:repeat(5,1fr); gap:30px 26px; align-items:start; }
.ftr__col h4{ display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 15px; }
.ftr__col h4::before{ content:""; width:16px; height:3px; border-radius:2px; background:var(--accent); flex:none; }
.ftr__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.ftr__col a{ color:var(--text); opacity:.82; font-size:.92rem; }
.ftr__col a:hover{ opacity:1; color:var(--accent-ink); }
.ftr__look{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:40px; padding-top:22px; border-top:1px solid var(--border); }
.ftr__looklbl{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.ftr__look .socials{ margin-left:auto; display:flex; gap:10px; }
.ftr__bottom{ display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-top:20px; border-top:0; padding-top:0; }
.ftr__bottom p{ margin:0; color:var(--muted); font-size:.82rem; }
.ftr__brandmark{ text-decoration:none; }
.ftr__brandmark .wordmark__small{ display:none; }
.ftr__brandmark .wordmark__text{ font-size:1.4rem; }
@media (max-width:860px){ .ftr__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .ftr__grid{ grid-template-columns:1fr; } }

/* ============================================================
   LIFESTYLE POLISH — secondary pages + site-wide animation pass
   Presentation only. Appended (no existing rules rewritten).
   All motion is gated behind html.no-motion + prefers-reduced-motion.
   Accents use var(--accent)/var(--grad) so the picker re-themes it.
   ============================================================ */

/* --- signature gradient headlines on the secondary pages (match .ci-slide .ci-slide__title) --- */
.hero--game .hero__title,
.legal__h{
  background-image:var(--grad); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  letter-spacing:-.03em; padding-right:.06em;
}
html.js:not(.no-motion) .hero--game .hero__title,
html.js:not(.no-motion) .legal__h{ animation:lsGradSlide 6s ease-in-out infinite alternate; }
html.no-motion .hero--game .hero__title, html.no-motion .legal__h{ animation:none; }
@media (prefers-reduced-motion:reduce){ .hero--game .hero__title, .legal__h{ animation:none; } }

/* --- accent glow wash + gradient eyebrow bar on secondary heroes (match hero--home) --- */
.hero--game{ background:radial-gradient(1100px 460px at 72% -14%, color-mix(in srgb,var(--accent) 15%,transparent), transparent 60%); }
.hero--game .eyebrow::before{ background:var(--grad); }
html[data-glow="intense"] .hero--game{ background:radial-gradient(1100px 480px at 72% -14%, color-mix(in srgb,var(--accent) 24%,transparent), transparent 62%); }
html[data-glow="off"] .hero--game, html[data-hero="solid"] .hero--game{ background:none; }

/* --- legal / info body rendered as a translucent card (was bare text) --- */
.legal__body{
  background:var(--surface); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--border); border-radius:var(--radius,10px);
  padding:clamp(20px,3vw,34px); margin-top:22px; box-shadow:var(--shadow-sm);
}
.legal__body > :first-child{ margin-top:0; }
.legal__body > :last-child{ margin-bottom:0; }
.legal__body h2:first-child{ margin-top:0; }

/* contact chips: rounded + lift to match card micro-interactions */
.contact__way{ border-radius:var(--radius-sm,8px); transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.contact__way:hover{ transform:translateY(-2px); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
html.no-motion .contact__way:hover{ transform:none; }

/* empty state + faq items: match card radius, add a gentle hover accent */
.empty{ border-radius:var(--radius,10px); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.faq__item{ border-radius:var(--radius,10px); overflow:hidden; transition:border-color .2s var(--ease), box-shadow .25s var(--ease); }
.faq__item:hover{ border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); }
.faq__item.open{ border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); box-shadow:0 10px 30px -18px color-mix(in srgb,var(--accent) 60%,transparent); }

/* --- page-load: a subtle fade/slide of the main content --- */
html.js:not(.no-motion) main{ animation:lsMainIn .5s var(--ease) both; }
@keyframes lsMainIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
html.no-motion main{ animation:none; }
@media (prefers-reduced-motion:reduce){ main{ animation:none; } }

/* --- nav active-pill + hover animate smoothly --- */
.hdr__nav a{ transition:background .25s var(--ease), color .2s var(--ease); }
.hdr__nav a:hover{ background:color-mix(in srgb,var(--text) 6%,transparent); }
.hdr__nav a.is-active:hover{ background:color-mix(in srgb,var(--text) 12%,transparent); }

/* --- button + card micro-interaction consistency (lift + glow) --- */
.btn--accent{ transition:translate .18s var(--ease), filter .18s var(--ease), box-shadow .22s var(--ease), background .2s var(--ease); }
.btn--accent:hover{ box-shadow:0 14px 30px -10px color-mix(in srgb,var(--accent) 80%,transparent), 0 0 20px -6px color-mix(in srgb,var(--accent) 45%,transparent); }
html.no-motion .btn:hover, html.no-motion .btn--accent:hover{ translate:none; }
.card:hover{ box-shadow:0 20px 44px -22px rgba(0,0,0,.7); }

/* --- reveal: per-item stagger delay + paint hint (base behaviour unchanged) --- */
html.js .reveal{ transition-delay:var(--d,0ms); }
html.js .reveal:not(.in){ will-change:opacity, transform; }
html.no-motion .reveal, html.no-motion .reveal.in{ transition-delay:0ms; }

/* mobile: keep gradient headlines + glow readable, no overflow at 390px */
@media (max-width:480px){
  .hero--game{ background:radial-gradient(760px 320px at 60% -12%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 60%); }
  .legal__body{ padding:18px 16px; }
}

/* ===================== v3 features ===================== */
/* toned-down promo bar (Lifestyle-restrained, keeps teal accent) */
.ci-promo{ background:color-mix(in srgb,var(--accent) 12%,var(--bg)); color:var(--text); border-bottom:1px solid color-mix(in srgb,var(--accent) 24%,transparent); font-size:.74rem; letter-spacing:.06em; }
.ci-promo a{ color:var(--accent); }

/* ad-block bar — normal flow, above header, never overlaps */
.adbar{ position:relative; z-index:1; background:color-mix(in srgb,var(--accent) 10%,var(--bg)); border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,transparent); color:var(--text); font-size:.85rem; }
.adbar__in{ display:flex; align-items:center; gap:14px; padding:9px 16px; justify-content:center; }
.adbar__x{ background:transparent; border:1px solid var(--border,rgba(255,255,255,.2)); color:var(--muted); border-radius:8px; padding:4px 10px; cursor:pointer; font:inherit; }
.adbar__x:hover{ color:var(--text); }

/* stat cards (Lifestyle-style numbers row) */
.statcards{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.statcard{ background:var(--surface); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:12px; padding:22px 16px; text-align:center; }
.statcard__n{ display:block; font-family:var(--font-head); font-size:2rem; line-height:1; font-weight:800; background:var(--grad,linear-gradient(95deg,#4d9dff,#9b5bff,#ff9ad5)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.statcard__l{ display:block; margin-top:8px; font-family:var(--font-mono,inherit); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
@media(max-width:640px){ .statcards{ grid-template-columns:repeat(2,1fr); } }

/* featured viewer as photo/brand */
.ci-viewer--photo{ display:block; text-decoration:none; }
.ci-viewer__img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s ease; }
.ci-viewer--photo:hover .ci-viewer__img{ transform:scale(1.04); }
.ci-viewer__brand{ position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(80% 80% at 50% 40%,color-mix(in srgb,var(--accent) 16%,#0a0b14),#0a0b14); }
.ci-viewer__wm{ opacity:.5; transform:scale(1.2); }

/* mod badges */
.mbadges{ display:flex; gap:7px; margin:0 0 8px; flex-wrap:wrap; }
.mbadge{ font-family:var(--font-mono,inherit); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:6px; }
.mbadge--new{ background:color-mix(in srgb,var(--accent) 22%,transparent); color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); }
.mbadge--upd{ background:rgba(120,200,120,.16); color:#7fde7f; border:1px solid rgba(120,200,120,.4); }
.mbadge--hot{ background:rgba(255,140,80,.16); color:#ff9a5b; border:1px solid rgba(255,140,80,.4); }

/* video embed */
.ci-video{ position:relative; aspect-ratio:16/9; border:1px solid var(--ci-line,rgba(120,170,255,.14)); border-radius:12px; overflow:hidden; background:#000; }
.ci-video iframe,.ci-video video{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* credits */
.credits{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.credit{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--text); transition:border-color .2s,transform .2s; }
a.credit:hover{ border-color:color-mix(in srgb,var(--accent) 50%,transparent); transform:translateY(-2px); }
.credit__av{ width:42px; height:42px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.credit__av--ph{ display:grid; place-items:center; background:var(--grad,linear-gradient(135deg,#4d9dff,#9b5bff)); color:#fff; font-weight:700; }
.credit__meta{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.credit__meta strong{ font-size:.95rem; } .credit__meta span{ font-size:.75rem; color:var(--muted); }
.credit__go{ margin-left:auto; font-size:1rem; opacity:.7; }

/* share bar + bug */
.sharebar{ display:flex; align-items:center; gap:8px; margin-top:16px; flex-wrap:wrap; }
.sharebar__lbl{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.sharebtn{ display:inline-grid; place-items:center; min-width:34px; height:34px; padding:0 10px; border-radius:8px; background:var(--surface); border:1px solid var(--border); color:var(--text); text-decoration:none; cursor:pointer; font:inherit; font-size:.85rem; }
.sharebtn:hover{ border-color:color-mix(in srgb,var(--accent) 50%,transparent); color:var(--accent); }
.sharebtn--bug{ margin-left:auto; }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:9000; background:rgba(2,4,8,.92); display:grid; place-items:center; padding:30px; }
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:94vw; max-height:90vh; border-radius:10px; box-shadow:0 20px 80px rgba(0,0,0,.6); }
.lightbox__x{ position:absolute; top:18px; right:22px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:1.6rem; cursor:pointer; }

/* generic modal (bug report) */
.modal{ position:fixed; inset:0; z-index:9000; background:rgba(2,4,8,.8); display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal__card{ position:relative; width:min(480px,100%); background:var(--bg,#0b0d12); border:1px solid rgba(120,170,255,.2); border-radius:16px; padding:26px; }
.modal__x{ position:absolute; top:12px; right:14px; background:transparent; border:0; color:var(--muted); font-size:1.5rem; cursor:pointer; }
.modal__card textarea,.modal__card input{ width:100%; margin-top:10px; background:var(--surface-2,rgba(255,255,255,.04)); border:1px solid var(--border,rgba(255,255,255,.14)); color:var(--text); padding:11px; border-radius:9px; font:inherit; }
.modal__card .btn{ margin-top:12px; }

/* news */
.newsgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.newscard{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--text); transition:transform .2s,border-color .2s; }
.newscard:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.newscard__img{ aspect-ratio:16/9; background-size:cover; background-position:center; }
.newscard__img--ph{ display:grid; place-items:center; color:color-mix(in srgb,var(--accent) 60%,transparent); background:var(--surface-2); }
.newscard__img--ph svg{ width:40%; opacity:.4; }
.newscard__body{ padding:16px; } .newscard__body h3{ margin:0 0 6px; } .newscard__body p{ margin:0 0 10px; color:var(--muted); font-size:.9rem; }
.newscard__date{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.newspost__cover{ aspect-ratio:16/7; background-size:cover; background-position:center; border-radius:12px; margin:16px 0; }

/* giveaways */
.ggrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.gcard{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; }
.gcard h3{ margin:0 0 8px; } .gcard p{ color:var(--muted); font-size:.92rem; }
.gcard__prize{ color:var(--text) !important; font-weight:600; margin:10px 0; }
.gcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }

/* footer newsletter + tip */
.ftr__news{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:22px 16px; border-bottom:1px solid rgba(120,170,255,.1); }
.ftr__newscopy h4{ margin:0 0 3px; } .ftr__newscopy p{ margin:0; color:var(--muted); font-size:.88rem; }
.ftr__newsform{ display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.ftr__newsform input{ background:var(--surface-2,rgba(255,255,255,.05)); border:1px solid var(--border,rgba(255,255,255,.14)); color:var(--text); padding:10px 12px; border-radius:9px; font:inherit; min-width:220px; }
.ftr__newsmsg{ width:100%; text-align:right; color:var(--accent); margin:6px 0 0; }
.ftr__tip{ text-align:center; padding:4px 16px 10px; } .tipjar{ font-size:.9rem; }
@media(max-width:640px){ .ftr__newsform{ margin-left:0; } .ftr__newsform input{ flex:1; min-width:0; } .ftr__newsmsg{ text-align:left; } }

/* mobile bottom nav */
.botnav{ display:none; }
@media(max-width:720px){
  .botnav{ display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:800; background:color-mix(in srgb,var(--bg) 92%,#000); backdrop-filter:blur(12px); border-top:1px solid rgba(120,170,255,.16); padding-bottom:env(safe-area-inset-bottom,0); }
  .botnav a{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0 7px; color:var(--muted); text-decoration:none; font-size:.64rem; letter-spacing:.04em; }
  .botnav a.on{ color:var(--accent); }
  .botnav__i{ font-size:1.15rem; line-height:1; }
  body{ padding-bottom:62px; }
  .chatbubble{ bottom:72px !important; }
}

/* ============================================================
   v4 — Lifestyle-exact pass (header, topo bg, lightbox, sort)
   ============================================================ */

/* Header: logo left, nav + CTA pushed right (Lifestyle layout) */
.hdr__inner{ display:flex; align-items:center; gap:20px; }
.hdr__nav{ margin-left:auto; }
.hdr__nav ul{ display:flex; justify-content:flex-end; align-items:center; gap:2px; }
.hdr__nav a{ padding:8px 12px; border-radius:8px; background:transparent;
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em; font-size:.8rem; color:var(--muted); }
.hdr__nav a:hover{ color:var(--text); background:transparent; }
.hdr__nav a.is-active{ color:var(--text); background:transparent; }
.hdr__nav a.is-active::after{ content:''; display:block; height:2px; margin-top:5px; border-radius:2px;
  background:var(--accent); box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent); }
.hdr__cta{ display:inline-flex; align-items:center; gap:7px; padding:9px 17px; white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius:10px; color:var(--text);
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; font-weight:600;
  transition:background .18s var(--ease), border-color .18s var(--ease); }
.hdr__cta:hover{ background:color-mix(in srgb,var(--accent) 16%,transparent); border-color:var(--accent); }
.hdr__actions{ display:flex; align-items:center; gap:4px; }
@media(max-width:1080px){ .hdr__cta{ display:none; } }

/* Game switch row flows with the header width/typography */
.switch__inner{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.switch__tab{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.07em; font-size:.72rem; }

/* Custom-styled sort dropdown (no raw OS select) */
.sortsel{ position:relative; display:inline-flex; }
.sortsel select{ appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:color-mix(in srgb,var(--text) 5%,var(--bg)); color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent); border-radius:10px;
  padding:10px 36px 10px 14px; font:inherit; font-size:.9rem; cursor:pointer; }
.sortsel select:hover{ border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.sortsel select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent); }
.sortsel select option{ background:var(--surface); color:var(--text); }
.sortsel__arr{ position:absolute; right:13px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--muted); font-size:.75rem; }

/* Lightbox: viewport-fit image + visible close & nav, always on top */
.lightbox{ z-index:99999 !important; }
.lightbox img{ max-width:90vw !important; max-height:88vh !important; object-fit:contain; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; font-size:2rem; line-height:1;
  cursor:pointer; display:grid; place-items:center; transition:.15s var(--ease); }
.lightbox__nav.prev{ left:18px; } .lightbox__nav.next{ right:18px; }
.lightbox__nav:hover,.lightbox__x:hover{ background:var(--accent); color:#00121a; border-color:var(--accent); }

/* Feature strip (One account / Discord login / …) — tidy spacing */
.ci-trust__in{ gap:12px 26px; padding:15px 24px; }
.ci-trust span{ font-size:.86rem; }
@media(max-width:700px){ .ci-trust__in{ gap:9px 16px; } .ci-trust span{ font-size:.78rem; } }

/* Real gallery tiles are <a> now — keep hover zoom, caption readable */
a.ci-tile{ display:block; text-decoration:none; color:inherit; }
a.ci-tile .ci-tile__img{ background-size:cover; background-position:center; }

/* Topographic contour background — site-wide, subtle, accent-tinted, slow drift */
.topo{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  animation:topoDrift 46s ease-in-out infinite alternate; }
.topo__svg{ position:absolute; top:-6%; left:-6%; width:112%; height:112%; }
.topo__lines path{ fill:none; stroke:rgba(190,205,240,.09); stroke-width:1.1; }
.topo__dots{ position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; }
:root[data-theme="light"] .topo__lines path{ stroke:rgba(40,60,110,.1); }
@keyframes topoDrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-2.5%,-1.5%,0) scale(1.05); } }
@keyframes topoPulse{ 0%,100%{ opacity:.2; } 50%{ opacity:.55; } }
.no-motion .topo, .no-motion .topo-dot{ animation:none !important; }
@media(prefers-reduced-motion:reduce){ .topo, .topo-dot{ animation:none !important; } }

/* Subtle Ken-Burns on the mod-page main gallery + homepage featured photo */
.ci-gal__main .ci-gslide.on .ci-gslide__img{ animation:kenburns 16s ease-in-out infinite alternate; }
.ci-viewer--photo .ci-viewer__img{ animation:kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1.01) translate(0,0); } to{ transform:scale(1.09) translate(-1.6%,-1.1%); } }
.no-motion .ci-gal__main .ci-gslide__img, .no-motion .ci-viewer--photo .ci-viewer__img{ animation:none !important; }
@media(prefers-reduced-motion:reduce){ .ci-gal__main .ci-gslide__img, .ci-viewer--photo .ci-viewer__img{ animation:none !important; } }

/* ============================================================
   v4.1 — aligned to the REAL Lifestyle source (site.html)
   Blue→teal kept (Hashy accent); Lifestyle's Inter scale,
   .wrap, .navb, hero + button values copied exactly.
   ============================================================ */
:root{ --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
body{ font:15px/1.55 var(--font); }

/* Lifestyle .wrap */
.wrap{ max-width:1120px; padding:0 20px; }
@media(max-width:600px){ .wrap{ padding:0 16px; } }

/* Lifestyle type scale: Inter, weight 900, -.03em (keep Hashy uppercase brand) */
.hero__title{ font-family:"Inter",var(--font-head); font-weight:900; letter-spacing:-.02em; line-height:1.05; font-size:clamp(2rem,4.2vw,3.05rem); }
.ci-slide .ci-slide__title{ font-family:"Inter",var(--font-head); font-weight:900; letter-spacing:-.03em; line-height:1.05; }
.ci-shead h2, .hi h1, .ci-plan h3, .legal__h{ font-family:"Inter",var(--font-head); font-weight:900; letter-spacing:-.03em; }
.hero__lead, .ci-slide p{ font-size:19px; line-height:1.5; }
@media(max-width:600px){ .hero__lead, .ci-slide p{ font-size:17px; } }

/* Header nav links — exact Lifestyle .navb a.l (14px/600, radius 10, hover bg) */
.hdr__nav a{ font-family:"Inter",var(--font); text-transform:none; font-weight:600; font-size:14px; letter-spacing:0;
  padding:8px 12px; border-radius:10px; color:var(--muted); }
.hdr__nav a:hover{ background:color-mix(in srgb,var(--text) 10%,transparent); color:var(--text); }
.hdr__nav a.is-active{ color:var(--text); background:transparent; }
.hdr__nav a.is-active::after{ display:none; }

/* CTA like Lifestyle .navb a.sup (solid, bold, soft shadow). Uses --accent-text so the
   label always contrasts the accent (even after a color-picker change) — fixes the blank button. */
.hdr__cta{ font-family:"Inter",var(--font); text-transform:none; font-weight:800; font-size:14px; letter-spacing:0;
  background:var(--accent); color:var(--accent-text,#fff); border:0; box-shadow:0 4px 14px rgba(0,0,0,.2); padding:9px 16px; border-radius:10px; }
.hdr__cta:hover{ filter:brightness(1.08); background:var(--accent); border:0; }

/* Badge/pill row like Lifestyle .badge */
.badge, .chip{ font-weight:600; font-size:13px; }

/* --- AI mod helper chatbot (bottom-left, own widget) --- */
.aibot{position:fixed;left:18px;bottom:18px;z-index:60}
.aibot__bubble{width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;font-size:22px;background:var(--grad,linear-gradient(135deg,var(--accent),var(--accent)));color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.aibot__bubble:hover{filter:brightness(1.08)}
.aibot__panel{position:absolute;left:0;bottom:64px;width:min(340px,86vw);background:var(--surface,rgba(10,15,25,.96));border:1px solid var(--border,rgba(120,170,255,.16));border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5);backdrop-filter:blur(10px)}
.aibot__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border,rgba(255,255,255,.08));background:color-mix(in srgb,var(--accent) 12%,transparent)}
.aibot__x{background:none;border:0;color:var(--text,#fff);font-size:22px;cursor:pointer;line-height:1}
.aibot__log{height:300px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.aibot__msg{max-width:85%;padding:8px 11px;border-radius:12px;font-size:.88rem;line-height:1.4;white-space:pre-wrap}
.aibot__msg--bot{align-self:flex-start;background:var(--surface-2,rgba(255,255,255,.06));color:var(--text,#eef1f5)}
.aibot__msg--me{align-self:flex-end;background:var(--accent,#45d0c8);color:#06240f;font-weight:600}
.aibot__form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border,rgba(255,255,255,.08))}
.aibot__form input{flex:1;background:var(--surface-2,rgba(255,255,255,.06));border:1px solid var(--border,rgba(255,255,255,.1));border-radius:10px;color:var(--text,#fff);padding:9px 11px;font:inherit}
@media(max-width:560px){.aibot{left:12px;bottom:12px}}

/* --- mod quiz form --- */
.qf{margin:0 0 14px}
.qf label{display:block;font-weight:700;margin-bottom:6px}
.qf select,.qf input{width:100%;background:var(--surface-2,rgba(255,255,255,.06));border:1px solid var(--border,rgba(255,255,255,.12));border-radius:10px;color:var(--text,#fff);padding:11px 12px;font:inherit}

/* ---- v6: crowdfund, mystery, currency, PWA ---- */
.cfgrid,.mysgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.cf{background:var(--card,rgba(10,15,25,.78));border:1px solid var(--border,rgba(120,170,255,.16));border-radius:14px;padding:18px}
.cf__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.cf__top h3{margin:0;font-size:18px}
.cf__bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:12px 0 8px}
.cf__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent,#4d9dff),#9b5bff);border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.cf__meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:14px}
.cf__meta .muted{margin-left:auto;font-size:12.5px}
.cf__form{display:flex;gap:8px;margin-top:14px}
.cf__form input{flex:1;min-width:0;background:var(--surface-2,rgba(255,255,255,.06));border:1px solid var(--border,rgba(255,255,255,.12));border-radius:10px;color:var(--text,#fff);padding:10px 12px;font:inherit}
.cf__funded{color:var(--ok,#46d17f);font-weight:800;margin:14px 0 0}
.cf__msg{margin:8px 0 0;min-height:1em}
.cf-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:linear-gradient(100deg,color-mix(in srgb,var(--accent,#4d9dff) 16%,transparent),transparent),var(--card,rgba(10,15,25,.78));border:1px solid var(--border,rgba(120,170,255,.16));border-radius:14px;padding:14px 16px;margin:0 0 18px}
.cf-banner .cf__bar{flex:1;min-width:160px;margin:0}
.mys{position:relative;overflow:hidden;background:radial-gradient(400px 200px at 80% -10%,color-mix(in srgb,#9b5bff 20%,transparent),transparent),var(--card,rgba(10,15,25,.78));border:1px solid var(--border,rgba(120,170,255,.16));border-radius:16px;padding:22px;text-align:center}
.mys__q{font-size:46px;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--accent,#4d9dff),#9b5bff,#ff9ad5);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px;animation:mysFloat 4s ease-in-out infinite}
@keyframes mysFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.mys__q{animation:none}}
.mys h3{margin:4px 0}
.mys__price{font-size:26px;font-weight:900;letter-spacing:-.02em;margin:10px 0}
.mys__out{margin-top:12px}
.mys__win{background:rgba(70,209,127,.12);border:1px solid rgba(70,209,127,.3);border-radius:12px;padding:12px;font-size:15px}
.curswitch select{background:var(--surface-2,rgba(255,255,255,.06));border:1px solid var(--border,rgba(255,255,255,.14));border-radius:9px;color:var(--text,#fff);padding:7px 10px;font:inherit;font-weight:700;font-size:13px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pwa-install{white-space:nowrap}

/* ===== v8 gamification + UX ===== */
/* quick-view */
.card__media{ position:relative; }
.qvbtn{ position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:color-mix(in srgb,var(--surface) 88%,transparent); color:var(--text); font-size:16px; cursor:pointer; opacity:0; transform:translateY(-4px); transition:opacity .2s,transform .2s,background .2s; display:grid; place-items:center; }
.card:hover .qvbtn, .qvbtn:focus-visible{ opacity:1; transform:none; }
.qvbtn:hover{ background:var(--accent); color:var(--accent-text,#fff); }
.qvmodal{ position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); display:grid; place-items:center; padding:20px; }
.qvmodal__card{ width:100%; max-width:460px; background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); position:relative; }
.qvmodal__x{ position:absolute; top:10px; right:12px; z-index:2; background:rgba(0,0,0,.4); color:#fff; border:0; width:30px; height:30px; border-radius:50%; font-size:20px; cursor:pointer; }
.qvmodal__img{ aspect-ratio:16/10; background:var(--surface-2) center/cover no-repeat; position:relative; }
.qvmodal__game{ position:absolute; left:12px; top:12px; font:800 11px/1 var(--font-head); text-transform:uppercase; letter-spacing:.05em; background:var(--accent); color:var(--accent-text,#fff); padding:4px 9px; border-radius:6px; }
.qvmodal__body{ padding:18px; }
.qvmodal__body h3{ margin:0 0 8px; font-size:1.25rem; }
.qvmodal__body p{ color:var(--muted); margin:0 0 16px; font-size:.95rem; }
.qvmodal__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.qvmodal__price{ font:800 1.2rem/1 var(--font-head); color:var(--accent-ink); }
/* price filter */
.pricefilter{ display:flex; align-items:center; gap:12px; margin-top:10px; font-size:.9rem; color:var(--muted); flex-wrap:wrap; }
.pricefilter input[type=range]{ accent-color:var(--accent); flex:1; min-width:140px; max-width:260px; }
.pricefilter strong{ color:var(--text); }
/* live viewers + meta row */
.ci-meta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:4px 0 2px; }
.liveview{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:var(--muted); font-weight:600; }
.liveview__dot{ width:8px; height:8px; border-radius:50%; background:#5be49b; box-shadow:0 0 0 0 rgba(91,228,155,.6); animation:livePulse 2s infinite; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(91,228,155,.55); } 70%{ box-shadow:0 0 0 7px rgba(91,228,155,0); } 100%{ box-shadow:0 0 0 0 rgba(91,228,155,0); } }
.milestone{ display:inline-block; margin:10px 0; padding:8px 14px; border-radius:10px; background:color-mix(in srgb,var(--accent) 16%,var(--surface)); border:1px solid var(--border); font-weight:700; font-size:.95rem; }
/* reviews: verified + votes */
.vbadge{ display:inline-block; margin-left:8px; font-size:.72rem; font-weight:800; color:var(--ok); background:color-mix(in srgb,var(--ok) 16%,transparent); border-radius:6px; padding:2px 7px; letter-spacing:.02em; }
.rvote{ display:flex; gap:8px; margin-top:8px; }
.rvote button{ background:var(--surface-2); border:1px solid var(--border); color:var(--muted); border-radius:8px; padding:4px 10px; font:inherit; font-size:.82rem; cursor:pointer; transition:border-color .2s,color .2s; }
.rvote button:hover{ color:var(--text); border-color:var(--accent); }
.rvote button.voted{ color:var(--accent-ink); border-color:var(--accent); }
/* XP / level */
.xpcard .xpbar{ height:10px; border-radius:6px; background:var(--surface-2); overflow:hidden; margin:4px 0 8px; border:1px solid var(--border); }
.xpcard .xpbar span{ display:block; height:100%; background:var(--grad); transition:width .6s var(--ease); }
/* streak */
.streaknum{ font:800 1.8rem/1 var(--font-head); margin:4px 0 10px; }
.streaknum b{ color:var(--accent-ink); }
/* spin wheel */
.spincard .wheel{ width:72px; height:72px; margin:6px 0 10px; border-radius:50%; border:4px dashed var(--accent); background:conic-gradient(from 0deg,color-mix(in srgb,var(--accent) 30%,transparent),transparent 40%,color-mix(in srgb,var(--accent) 30%,transparent) 60%,transparent); }
.spinout{ min-height:1.2em; }
/* achievements */
.achgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:10px; }
.ach{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:10px 6px; border:1px solid var(--border); border-radius:12px; background:var(--surface-2); opacity:.45; filter:grayscale(.7); transition:opacity .2s,transform .2s; }
.ach--on{ opacity:1; filter:none; border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); }
.ach--on:hover{ transform:translateY(-2px); }
.ach__ic{ font-size:1.5rem; }
.ach__nm{ font-size:.72rem; font-weight:700; color:var(--muted); line-height:1.1; }
.ach--on .ach__nm{ color:var(--text); }
@media (prefers-reduced-motion:reduce){ .liveview__dot,.xpcard .xpbar span{ animation:none; transition:none; } }
/* W5: daily login calendar */
.calcard .calgrid{ --cell:30px; }
.calcell{ display:grid; place-items:center; aspect-ratio:1/1; min-height:28px; border-radius:7px; font-size:.78rem; font-weight:700; border:1px solid var(--border); background:var(--surface-2); color:var(--muted); }
.calcell--pad{ border:0; background:transparent; }
.calcell--claimed{ background:color-mix(in srgb,var(--accent) 24%,var(--surface-2)); border-color:var(--accent); color:var(--accent-ink,var(--text)); }
.calcell--available{ background:var(--surface); border-color:var(--accent); color:var(--text); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent); animation:calPulse 1.8s var(--ease) infinite; }
.calcell--missed{ opacity:.4; }
.calcell--future{ opacity:.65; }
@keyframes calPulse{ 0%,100%{ box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent); } 50%{ box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent); } }
/* W5: quests */
.questcard .quest:first-of-type{ border-top:0 !important; }
.questcard .xpbar{ height:7px; border-radius:5px; background:var(--surface-2); overflow:hidden; border:1px solid var(--border); }
.questcard .xpbar span{ display:block; height:100%; background:var(--grad); transition:width .5s var(--ease); }
.pbadge--event{ box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent); }
@media (prefers-reduced-motion:reduce){ .calcell--available{ animation:none; } }

/* ===== W6: known issues block (mod page) ===== */
.kissues { display: flex; flex-direction: column; gap: 10px; }
.kissue { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; padding: 13px 15px; }
.kissue--pin { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.kissue--fixed { opacity: .72; }
.kissue__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kissue__pin { font-size: 13px; }
.kissue__title { color: var(--text); font-size: 15px; }
.kissue__body { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 7px 0 0; }
.kchip { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.kchip.ki-open { color: #ffb020; border-color: color-mix(in srgb, #ffb020 50%, var(--border)); background: color-mix(in srgb, #ffb020 12%, transparent); }
.kchip.ki-inv { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.kchip.ki-fixed { color: #27c08a; border-color: color-mix(in srgb, #27c08a 50%, var(--border)); background: color-mix(in srgb, #27c08a 12%, transparent); }

/* ===== W6: store credit + referral cards (garage) ===== */
.creditcard .credbal { font: 800 30px/1 Impact, system-ui, sans-serif; color: var(--accent); margin: 4px 0 2px; }
.credredeem { display: flex; gap: 8px; margin-top: 10px; }
.credredeem input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 9px 10px; border-radius: 8px; font: inherit; text-transform: uppercase; }
.credledger { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.credledger .cl { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); }
.credledger .cl b { color: var(--text); }
.credledger .cl .pos { color: #27c08a; }
.credledger .cl .neg { color: var(--muted); }
.refstats { display: flex; gap: 14px; margin: 8px 0; }
.refstats .rs { text-align: center; }
.refstats .rs b { display: block; font: 800 20px/1 Impact, system-ui, sans-serif; color: var(--accent); }
.refstats .rs span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ===== W8 AI features (#45 smart search, #46 review summary) ===== */
.aisearch { margin: 0 0 20px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.aisearch__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aisearch__spark { font-size: 1.1rem; }
.aisearch__bar input[type="search"] { flex: 1 1 240px; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 11px 14px; border-radius: 10px; font: inherit; }
.aisearch__bar input[type="search"]:focus { outline: none; border-color: var(--accent); }
.aisearch__hint { margin: 10px 0 0; }
.aisearch__results { margin-top: 18px; }
.aisearch__count { margin: 0 0 12px; }
.ownersay { margin: 0 0 24px; padding: 18px 20px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; }
.ownersay__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ownersay__head h3 { margin: 0; font: 800 1.05rem/1.1 var(--font-head); text-transform: uppercase; letter-spacing: .04em; }
.ownersay__meta { color: var(--muted); font-size: .88rem; }
.ownersay__sum { margin: 10px 0 0; line-height: 1.6; }
.ownersay__basic { margin: 8px 0 0; color: var(--muted); }
.ownersay__basic .stars, .ownersay__meta .stars { color: var(--accent); }
.ownersay__pc { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.ownersay__pc li { font-size: .92rem; line-height: 1.4; }
.ownersay__pro { color: var(--text); }
.ownersay__con { color: var(--muted); }
.ownersay__ai { margin: 12px 0 0; }

/* ===================== W10 (#75 announcement banner, #63 spec, #85 help) ===================== */
/* #75 site-wide announcement banner — a dismissible strip above the header, admin-controlled. */
.annbar { position: relative; z-index: 60; border-bottom: 1px solid var(--border); font: 600 14px/1.4 var(--font); }
.annbar__in { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 44px 9px 16px; min-height: 20px; text-align: center; }
.annbar__msg { color: var(--text); }
.annbar__link { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.annbar__x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; opacity: .6; padding: 4px 8px; border-radius: 8px; }
.annbar__x:hover { opacity: 1; background: color-mix(in srgb, var(--text) 12%, transparent); }
.annbar--info { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.annbar--info .annbar__msg { color: var(--text); }
.annbar--sale { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface))); }
.annbar--warning { background: color-mix(in srgb, var(--bad, #e2554e) 22%, var(--surface)); }
.annbar--warning .annbar__link { color: var(--text); }

/* #63 download size + file count spec row on the mod page */
.ci-spec { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.ci-spec__item { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font: 600 13px/1 var(--font); color: var(--muted); }
.ci-spec__item b { color: var(--text); font-weight: 800; font-size: 14px; }
.ci-spec__item svg { width: 15px; height: 15px; }

/* #85 help center */
.help-search { max-width: 520px; margin: 18px auto 0; }
.help-search input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; color: var(--text); font: 500 15px/1.3 var(--font); }
.help-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.help-cat { margin: 0 0 30px; }
.help-cat > h2 { font: 800 20px/1.1 var(--font-head); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 14px; color: var(--text); }
.help-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.help-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; text-decoration: none; transition: border-color .15s, transform .15s; }
.help-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.help-card h3 { margin: 0 0 6px; font: 700 15.5px/1.3 var(--font); color: var(--text); }
.help-card p { margin: 0; }
.help-article h2 { font: 800 19px/1.2 var(--font-head); margin: 22px 0 8px; color: var(--text); }
.help-article h3 { font: 700 16px/1.3 var(--font); margin: 18px 0 6px; color: var(--text); }
.help-article ul { margin: 8px 0 8px 2px; padding-left: 20px; }
.help-article li { margin: 4px 0; color: var(--muted); }
.help-article p { color: var(--muted); }
.help-article a { color: var(--accent); }
.help-more { margin-top: 30px; border-top: 1px solid var(--border); padding-top: 18px; }
.help-more h3 { font: 800 15px/1 var(--font-head); text-transform: uppercase; margin: 0 0 10px; }
.help-more ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }