/* =====================================================================
   ALT HOLD ONLINE — Game landing (distinct from ArxVast studio site)
   Warm ember gold + siege crimson on deep stone. No build step.
   ===================================================================== */

:root {
  /* --- Game palette (siege / ember — NOT studio steel) --- */
  --bg-0: #070504;
  --bg-1: #0f0c09;
  --surface: #16110d;
  --surface-2: #1e1712;
  --border: #3d2e1e;
  --border-strong: #5c4528;

  --gold: #c9a45c;
  --gold-bright: #e8cc82;
  --gold-dim: #8a7044;
  --blood: #8b1e1e;
  --blood-bright: #b83232;
  --steel: #6a5a48;
  --green: #5a8a42;
  --green-bright: #7cb858;

  --text: #f2ebe0;
  --text-dim: #b8a894;
  --text-faint: #8a7d6c;

  /* --- Typography (Marcellus + Source Sans — not Cinzel/Inter) --- */
  --font-display: "Marcellus", "Palatino Linotype", Georgia, serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --container: 1160px;
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 20px 55px -22px rgba(0,0,0,.85);
  --shadow-gold: 0 0 0 1px rgba(201,164,92,.28), 0 14px 44px -18px rgba(139,30,30,.35);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ------------------------------ Reset ------------------------------ */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--gold-bright); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--gold); }
ul, ol { padding-left: 1.2em; }

/* Subtle parchment/vignette texture on the whole page */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 50% -5%, rgba(201,164,92,.09), transparent 55%),
    radial-gradient(700px 600px at 0% 40%, rgba(139,30,30,.07), transparent 50%),
    radial-gradient(600px 500px at 100% 80%, rgba(201,164,92,.05), transparent 45%),
    linear-gradient(180deg, var(--bg-0), #050403 85%);
}

/* ------------------------------ Typography ------------------------------ */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: .5px; color: #eef2f6; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
h3 { font-size: 1.35rem; letter-spacing: .3px; }
h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); }
p { color: var(--text-dim); }
.lead { font-size: 1.2rem; color: var(--text); }
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 4px;
  font-size: .8rem; color: var(--gold); font-weight: 600;
  display: inline-block; margin-bottom: 1rem;
}
.muted { color: var(--text-faint); }
.gold { color: var(--gold-bright); }

/* ------------------------------ Layout ------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(56px, 9vw, 120px) 0; position: relative; }
.section--alt { background: var(--bg-1); border-block: 1px solid var(--border); }
.section__head { max-width: 720px; margin-bottom: 3rem; }
.section__head.center { margin-inline: auto; text-align: center; }
/* Nagłówek sekcji + przycisk obok (blog) — zawijanie, bez ucinania tekstu PL/DE */
.section__head--split {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 1.25rem 1.5rem; max-width: none;
}
.section__head--split > div:first-child { flex: 1 1 16rem; min-width: 0; }
.section__head--split .btn {
  flex: 0 1 auto; overflow: visible; max-width: 100%;
  white-space: normal; text-align: center; line-height: 1.35;
  hyphens: auto;
}
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); border: 0; margin: 0; }

/* Ornamental rule (medieval flourish) */
.flourish { display: flex; align-items: center; gap: 14px; color: var(--gold-dim); }
.flourish::before, .flourish::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold-dim)); }
.flourish::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }
.flourish svg { width: 18px; height: 18px; fill: var(--gold); }

/* ------------------------------ Buttons ------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-display); font-weight: 600; letter-spacing: 1px;
  font-size: .95rem; text-transform: uppercase;
  padding: .85em 1.6em; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: all .2s var(--ease); white-space: nowrap;
}
.btn--primary { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #121820; box-shadow: var(--shadow-gold); }
.btn--primary:hover { color: #121820; transform: translateY(-2px); box-shadow: 0 0 0 1px var(--gold-bright), 0 16px 36px -12px rgba(201,164,92,.5); }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(201,164,92,.06); }
.btn--blood { background: linear-gradient(180deg, var(--blood-bright), var(--blood)); color: #fff; }
.btn--blood:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 16px 36px -12px rgba(155,47,47,.6); }
.btn--lg { padding: 1.05em 2em; font-size: 1.05rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ------------------------------ Badges / pills ------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 600; padding: .35em .8em; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--gold); background: rgba(201,164,92,.06);
}
.badge--wip {
  color: var(--gold-bright);
  border-color: rgba(184, 193, 204, .42);
  background: linear-gradient(135deg, rgba(184, 193, 204, .14), rgba(111, 126, 140, .08));
}
.badge--live { color: var(--green); border-color: #3f5230; background: rgba(111,146,85,.1); }

/* W produkcji — tetniace zycie (kropka + napis) */
.badge--alive {
  position: relative;
  animation: badge-alive 2.8s ease-in-out infinite;
}
.badge--alive .badge__text {
  animation: badge-text-glow 2.8s ease-in-out infinite;
}
.badge--alive .dot {
  position: relative;
  flex-shrink: 0;
  width: 9px; height: 9px;
  background: var(--green-bright);
  box-shadow: 0 0 10px rgba(142, 196, 106, .9);
  animation: heart-beat 1.35s ease-in-out infinite;
}
.badge--alive .dot::before,
.badge--alive .dot::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  border: 1px solid rgba(142, 196, 106, .65);
  pointer-events: none;
  animation: heart-ring 1.35s ease-out infinite;
}
.badge--alive .dot::after { animation-delay: .18s; }

@keyframes heart-beat {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(142, 196, 106, .7); }
  12% { transform: scale(1.45); box-shadow: 0 0 16px rgba(160, 220, 120, 1), 0 0 0 5px rgba(111, 146, 85, .28); }
  24% { transform: scale(1); box-shadow: 0 0 8px rgba(142, 196, 106, .7); }
  36% { transform: scale(1.22); box-shadow: 0 0 12px rgba(160, 220, 120, .9), 0 0 0 3px rgba(111, 146, 85, .2); }
  48%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(142, 196, 106, .65); }
}
@keyframes heart-ring {
  0% { opacity: .8; transform: scale(1); border-color: rgba(142, 196, 106, .7); }
  70% { opacity: 0; transform: scale(2.6); border-color: rgba(111, 146, 85, .2); }
  100% { opacity: 0; transform: scale(2.6); }
}
@keyframes badge-alive {
  0%, 100% {
    border-color: rgba(111, 146, 85, .35);
    box-shadow: 0 0 14px -6px rgba(111, 146, 85, .18);
  }
  50% {
    border-color: rgba(142, 196, 106, .5);
    box-shadow: 0 0 22px -2px rgba(111, 146, 85, .32);
  }
}
@keyframes badge-text-glow {
  0%, 100% { opacity: .88; text-shadow: none; }
  12%, 36% { opacity: 1; text-shadow: 0 0 12px rgba(227, 233, 240, .35); }
  50% { opacity: .95; text-shadow: 0 0 8px rgba(184, 193, 204, .2); }
}

.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* ------------------------------ Cards ------------------------------ */
.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-1));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; position: relative; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card__icon {
  width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 18px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: radial-gradient(circle at 30% 20%, rgba(201,164,92,.18), transparent 70%);
}
.card__icon svg { width: 26px; height: 26px; fill: var(--gold); }
.card h3 { margin-bottom: .5rem; color: #eef2f6; }
.card p { font-size: .98rem; }

/* Feature card top accent line */
.card--feature::before {
  content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .25s var(--ease);
}
.card--feature:hover::before { opacity: 1; }

/* ------------------------------ Navbar ------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12,10,8,.72); backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.nav.scrolled { border-bottom-color: var(--border); background: rgba(10,8,6,.92); }
.nav__inner { display: flex; align-items: center; gap: 28px; height: 96px; }
.brand {
  display: flex; align-items: center; flex-shrink: 0;
  text-decoration: none;
}
.brand:hover { color: #fff; }
.brand__text { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .5px; color: #f4ecdd; white-space: nowrap; }
.brand .brand__mark { flex-shrink: 0; }


/* Logo naglowek — holograf + tilt 3D + aura (tylko .brand__logo-wrap--nav) */
.brand__logo-wrap {
  position: relative; display: block; line-height: 0;
  padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0;
}
.brand__logo-wrap--nav {
  perspective: 920px;
  transform-style: preserve-3d;
}
.brand__logo-aura {
  position: absolute; z-index: 0;
  inset: -6px -10px;
  border-radius: 10px;
  background: conic-gradient(
    from 0deg,
    rgba(184, 193, 204, 0) 0deg,
    rgba(142, 196, 106, .45) 80deg,
    rgba(227, 233, 240, .35) 160deg,
    rgba(111, 146, 85, .4) 240deg,
    rgba(184, 193, 204, 0) 360deg
  );
  filter: blur(14px);
  opacity: .55;
  animation: brand-aura-spin 10s linear infinite;
  pointer-events: none;
}
.brand__logo-stage {
  position: relative; z-index: 1; display: block;
  overflow: hidden;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .2s var(--ease), filter .35s var(--ease), box-shadow .35s var(--ease);
  animation: brand-float 6s ease-in-out infinite;
  will-change: transform;
}
.brand:hover .brand__logo-stage,
.brand:focus-visible .brand__logo-stage {
  animation: none;
  filter: brightness(1.12) saturate(1.08);
  box-shadow:
    0 16px 40px -14px rgba(184, 193, 204, .35),
    0 0 28px -6px rgba(142, 196, 106, .22);
}
.brand__logo {
  height: 92px; width: auto; max-width: min(420px, 52vw);
  display: block; border: 0; border-radius: 0; box-shadow: none;
  image-rendering: -webkit-optimize-contrast;
}
.brand__logo-holo {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 28%,
    rgba(255, 255, 255, .22) 42%,
    rgba(184, 193, 204, .18) 48%,
    rgba(142, 196, 106, .14) 54%,
    transparent 68%
  );
  background-size: 220% 220%;
  mix-blend-mode: soft-light;
  animation: brand-holo 5.5s ease-in-out infinite;
}
.brand__logo-glint {
  position: absolute; top: 0; left: -70%; z-index: 3;
  width: 38%; height: 100%; pointer-events: none;
  transform: skewX(-16deg);
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .42), transparent);
  animation: brand-glint 4.8s ease-in-out infinite;
}
@keyframes brand-float {
  0%, 100% { transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(0); }
  50% { transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-5px); }
}
@keyframes brand-aura-spin { to { transform: rotate(360deg); } }
@keyframes brand-holo {
  0%, 100% { background-position: 0% 40%; opacity: .75; }
  50% { background-position: 100% 60%; opacity: 1; }
}
@keyframes brand-glint {
  0%, 58% { left: -70%; opacity: 0; }
  62% { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

.brand__logo-wrap--footer { padding: 0; }
.brand__logo-wrap--footer .brand__logo { height: 72px; max-width: 320px; }

@media (max-width: 780px) {
  .nav__inner { height: 86px; }
  .brand__logo { height: 74px; max-width: min(300px, 68vw); }
  .brand__logo-wrap--footer .brand__logo { height: 58px; }
}
.nav__links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav__links a { color: var(--text-dim); font-weight: 500; font-size: .98rem; position: relative; }
.nav__links a:hover, .nav__links a.active { color: var(--gold-bright); }
.nav__links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -30px; height: 2px; background: var(--gold); }
.nav__cta { display: flex; align-items: center; gap: 14px; }

/* Language switcher */
.lang { position: relative; z-index: 200; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim);
  border-radius: var(--radius-sm); padding: .5em .75em; font-family: var(--font-body); font-size: .9rem;
}
.lang__btn:hover { color: var(--gold); border-color: var(--gold-dim); }
.lang__btn svg { width: 16px; height: 16px; fill: currentColor; }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 210;
  min-width: 360px; width: max-content; max-width: min(calc(100vw - 24px), 420px);
  max-height: min(320px, 50vh); overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px; display: none;
  grid-template-columns: repeat(2, minmax(168px, 1fr)); gap: 2px;
  scrollbar-gutter: stable;
}
.lang__menu.open { display: grid; }
.lang__menu button {
  text-align: left; background: transparent; border: 0; color: var(--text-dim);
  padding: .55em .75em; border-radius: var(--radius-sm); cursor: pointer; font-size: .88rem;
  font-family: var(--font-body), "Segoe UI", system-ui, sans-serif;
  line-height: 1.35; white-space: normal; overflow: visible; text-overflow: clip;
  word-break: break-word;
}
.lang__tag {
  display: inline-block; min-width: 1.5em; margin-right: .35em;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  color: var(--gold-dim); vertical-align: baseline;
}
.lang__menu button:lang(el), .lang__menu button:lang(bg), .lang__menu button:lang(uk),
.lang__menu button:lang(ru), .lang__menu button:lang(sr) {
  font-family: var(--font-body), "Segoe UI", "Noto Sans", sans-serif;
}
.lang__menu button:hover { background: rgba(201,164,92,.1); color: var(--gold-bright); }
.lang__menu button[aria-current="true"] { color: var(--gold); font-weight: 600; }

/* Dim page behind nav when language menu is open (below .lang z-index 200) */
html.lang-open::before {
  content: ""; position: fixed; inset: 0; z-index: 150;
  background: rgba(8, 6, 4, .45); pointer-events: none;
}
html.lang-open .nav { z-index: 180; overflow: visible; }
html.lang-open .nav__cta { overflow: visible; }

/* Hamburger */
.nav__burger { display: none; background: transparent; border: 0; cursor: pointer; padding: 6px; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; transition: .25s; }

/* ------------------------------ Hero ------------------------------ */
.hero { position: relative; padding: clamp(80px, 14vw, 170px) 0 clamp(60px, 9vw, 120px); overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 500px at 70% 10%, rgba(201,164,92,.12), transparent 60%),
    radial-gradient(700px 600px at 10% 90%, rgba(155,47,47,.1), transparent 55%);
}
.hero__bg::after { /* faux castle silhouette via gradient mountains */
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.6) 100%);
}
.hero h1 { max-width: 14ch; margin-bottom: 1.2rem; }
.hero .lead { max-width: 56ch; margin-bottom: 2rem; }

/* Hero: 2-column layout (text left, logo right — modern indie studio pattern) */
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr min(42vw, 520px);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero__copy { min-width: 0; }
.hero__copy .eyebrow { margin-bottom: 1.2rem; }
.hero__visual { display: flex; justify-content: center; align-items: center; }
.hero__visual .hero__logo-wrap { width: 100%; max-width: min(720px, 100%); margin: 0; }

.hero__meta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 2.5rem; color: var(--text-faint); font-size: .9rem; }
.hero__meta b { color: var(--gold); font-family: var(--font-display); font-size: 1.4rem; display: block; font-variant-numeric: tabular-nums; }
.hero__meta b[data-count] { min-width: 2.5ch; }
.hero__meta b.stat-pop { animation: stat-pop .45s var(--ease) both; }
.hero__meta b.stat-zero-glow { animation: stat-zero-glow 1.2s ease-out both; }
@keyframes stat-pop { from { transform: scale(1.12); color: var(--gold-bright); } to { transform: scale(1); color: var(--gold); } }
@keyframes stat-zero-glow { 0%, 100% { text-shadow: none; } 35% { text-shadow: 0 0 18px rgba(227,233,240,.55); color: var(--gold-bright); } }

/* Media frame placeholder (screenshots/trailer) */
.frame {
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(201,164,92,.03) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, var(--surface-2), var(--bg-1));
  aspect-ratio: 16/9; display: grid; place-items: center; text-align: center;
  color: var(--text-faint); position: relative; overflow: hidden;
}
.frame__label { font-family: var(--font-display); letter-spacing: 2px; text-transform: uppercase; font-size: .85rem; }
.frame--tall { aspect-ratio: 3/4; }
.frame--wide { aspect-ratio: 21/9; }

/* ------------------------------ Stat band ------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--bg-1); padding: 28px; text-align: center; }
.stat b { font-family: var(--font-display); font-size: 2.2rem; color: var(--gold-bright); display: block; }
.stat span { font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); }

/* ------------------------------ CTA band ------------------------------ */
.cta-band { text-align: center; background: linear-gradient(180deg, var(--surface), var(--bg-1)); border-block: 1px solid var(--border-strong); }
.cta-band h2 { margin-bottom: 1rem; }
.cta-band p { max-width: 50ch; margin: 0 auto 2rem; }

/* ------------------------------ Accordion (FAQ) ------------------------------ */
.accordion { max-width: 820px; margin-inline: auto; }
.acc { border-bottom: 1px solid var(--border); }
.acc__q {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  padding: 22px 44px 22px 0; color: var(--text); font-family: var(--font-display);
  font-size: 1.12rem; position: relative; transition: color .2s;
}
.acc__q:hover { color: var(--gold-bright); }
.acc__q::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--gold); transition: transform .25s; }
.acc.open .acc__q::after { content: "–"; }
/* grid-rows technique: never clips long answers in verbose languages */
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.acc__a > div { overflow: hidden; min-height: 0; padding: 0 0 22px; color: var(--text-dim); }
.acc.open .acc__a { grid-template-rows: 1fr; }

/* ------------------------------ Timeline / roadmap (blog & roadmap) ------------------------------ */
.timeline { position: relative; max-width: 820px; margin-inline: auto; padding-left: 32px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--gold), var(--border)); }
.tl-item { position: relative; padding-bottom: 40px; }
.tl-item::before { content: ""; position: absolute; left: -32px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-0); border: 2px solid var(--gold); }
.tl-item.done::before { background: var(--gold); }
.tl-item .date { font-family: var(--font-display); color: var(--gold); letter-spacing: 1px; font-size: .85rem; text-transform: uppercase; }

/* Blog post cards */
.post { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .2s, transform .2s; }
.post:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.post__thumb { aspect-ratio: 4/3; border-radius: var(--radius-sm); }
.post__meta { display: flex; gap: 14px; font-size: .82rem; color: var(--text-faint); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: 1px; }
.post h3 { margin-bottom: .4rem; }

/* ------------------------------ Press kit fact table ------------------------------ */
.facts { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.facts th, .facts td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); vertical-align: top; }
.facts th { width: 32%; color: var(--gold); font-family: var(--font-display); font-weight: 600; background: var(--bg-1); }
.facts td { color: var(--text-dim); }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }

/* Asset download grid (press kit) */
.assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 16px; }
.asset { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.asset .frame { aspect-ratio: 1; border: 0; border-radius: 0; }
.asset__foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-size: .82rem; color: var(--text-faint); border-top: 1px solid var(--border); }

/* ------------------------------ Forms (contact) ------------------------------ */
.form { display: grid; gap: 18px; max-width: 640px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); font-family: var(--font-display); }
.field input, .field textarea, .field select {
  background: var(--bg-1); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text); padding: .85em 1em; font-family: var(--font-body); font-size: 1rem; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,164,92,.15); }
.field textarea { min-height: 150px; resize: vertical; }
.form__note { font-size: .85rem; color: var(--text-faint); }

/* Contact method cards */
.contact-card { display: flex; gap: 16px; align-items: flex-start; }
.contact-card .card__icon { flex: 0 0 auto; margin: 0; }

/* ------------------------------ Legal / long-form prose ------------------------------ */
.prose { max-width: 820px; margin-inline: auto; }
.prose h2 { font-size: 1.6rem; margin: 2.4rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.prose h3 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; color: var(--gold); }
.prose p, .prose li { color: var(--text-dim); margin-bottom: 1rem; }
.prose ul, .prose ol { margin-bottom: 1rem; }
.prose a { text-decoration: underline; }
.toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 2.5rem; }
.toc h4 { margin-bottom: .8rem; }
.toc ol { columns: 2; column-gap: 32px; font-size: .95rem; }
.notice { border-left: 3px solid var(--blood-bright); background: rgba(155,47,47,.08); padding: 16px 20px; border-radius: var(--radius-sm); margin-bottom: 1.6rem; font-size: .95rem; color: var(--text-dim); }
.notice.info { border-left-color: var(--gold); background: rgba(201,164,92,.07); }
.updated { color: var(--text-faint); font-size: .9rem; margin-bottom: 1.5rem; }

/* ------------------------------ Page header (interior pages) ------------------------------ */
.page-head { padding: clamp(70px, 11vw, 130px) 0 clamp(30px, 5vw, 60px); text-align: center; position: relative; }
.page-head .eyebrow { margin-bottom: .6rem; }
.page-head p { max-width: 60ch; margin: 1rem auto 0; }

/* ------------------------------ Footer ------------------------------ */
.footer { background: #080605; border-top: 1px solid var(--border); padding: 64px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer__brand p { font-size: .92rem; margin-top: 14px; max-width: 32ch; }
.footer h5 { font-family: var(--font-display); color: var(--gold); font-size: .85rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer a { color: var(--text-dim); font-size: .94rem; }
.footer a:hover { color: var(--gold-bright); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: .85rem; }
.socials { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Footer social grid (podpisane kafelki) --- */
.footer__social-title {
  font-family: var(--font-display); color: var(--gold); font-size: .85rem;
  letter-spacing: 2px; text-transform: uppercase; margin: 18px 0 12px;
}
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; max-width: 340px;
}
.social-tile {
  --brand: #8b939d; --brand-glow: rgba(139,147,157,.35);
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 12px; text-decoration: none; color: #fff;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.35));
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s;
}
.social-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 65%, #fff);
  box-shadow: 0 8px 22px -8px var(--brand-glow);
}
.social-tile__icon {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
}
.social-tile__icon svg { width: 18px; height: 18px; fill: currentColor; }
.social-tile__label {
  font-size: .72rem; font-weight: 600; line-height: 1.2;
  color: var(--text-dim); letter-spacing: .2px;
}
.social-tile:hover .social-tile__label { color: var(--text); }
.social-tile[data-social="discord"]   { --brand: #5865F2; --brand-glow: rgba(88,101,242,.45); }
.social-tile[data-social="instagram"] { --brand: #E4405F; --brand-glow: rgba(228,64,95,.4); }
.social-tile[data-social="tiktok"]    { --brand: #25F4EE; --brand-glow: rgba(37,244,238,.3); }
.social-tile[data-social="youtube"]   { --brand: #FF0000; --brand-glow: rgba(255,0,0,.4); }
.social-tile[data-social="x"]         { --brand: #e7e9ea; --brand-glow: rgba(255,255,255,.2); }
.social-tile[data-social="steamStudio"],
.social-tile[data-social="steamGame"] { --brand: #66c0f4; --brand-glow: rgba(102,192,244,.4); }
.social-tile[data-social="steamGame"] { --brand: #a4d007; --brand-glow: rgba(164,208,7,.35); }
.social-tile[data-social="reddit"]    { --brand: #FF4500; --brand-glow: rgba(255,69,0,.4); }
.social-tile.social--live .social-tile__icon {
  background: linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #000));
  color: #fff;
}
.social-tile[data-social="x"].social--live .social-tile__icon { color: #0f1419; }
.social-tile.social--soon { opacity: .55; border-style: dashed; }

/* ------------------------------ Utilities ------------------------------ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.hidden { display: none !important; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(201,164,92,.3); color: #fff; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
  .hero__visual .hero__logo-wrap { max-width: min(680px, 96vw); }
  .hero h1 { max-width: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 780px) {
  body { font-size: 16px; }
  .nav__links, .nav__cta .btn { display: none; }
  .nav__burger { display: block; }
  .nav.open .nav__links {
    display: flex; flex-direction: column; gap: 0; position: fixed; inset: 70px 0 auto 0;
    background: var(--bg-1); border-bottom: 1px solid var(--border); padding: 8px 24px 24px;
  }
  .nav.open .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--border); width: 100%; }
  .nav.open .nav__links a.active::after { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .post { grid-template-columns: 1fr; }
  .post__thumb { aspect-ratio: 16/9; }
  .toc ol { columns: 1; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__meta { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   ENHANCEMENTS v2 — a11y, mobile robustness & cinematic visuals
   ===================================================================== */

/* --- Skip-to-content link (visible only on focus) --- */
.skip-link {
  position: fixed; top: -64px; left: 12px; z-index: 200;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #121820;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .5px;
  padding: .7em 1.2em; border-radius: var(--radius-sm); box-shadow: var(--shadow);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: #121820; outline: 2px solid #fff; outline-offset: 2px; }

/* --- Anchor targets clear the 70px sticky header --- */
:where([id]) { scroll-margin-top: 90px; }

/* --- backdrop-filter fallback (older/unsupported browsers) --- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(10,8,6,.97); }
}

/* --- Hero: layered living backdrop ---------------------------------- */
.hero__bg { will-change: transform; }
.hero__bg::before {                /* slow-drifting gradient mesh */
  content: ""; position: absolute; inset: -25%; z-index: -1;
  background:
    radial-gradient(38% 38% at 20% 30%, rgba(201,164,92,.12), transparent 60%),
    radial-gradient(34% 34% at 82% 22%, rgba(155,47,47,.11), transparent 60%),
    radial-gradient(44% 44% at 62% 82%, rgba(111,126,140,.09), transparent 60%);
  animation: mesh 24s ease-in-out infinite alternate;
}
@keyframes mesh { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-3%,0) scale(1.08); } }

/* Starfield — twinkling dots, behind embers */
.hero__stars { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__stars span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,232,239,.95) 0%, rgba(226,232,239,0) 70%);
  animation: star-twinkle ease-in-out infinite alternate;
}
@keyframes star-twinkle {
  from { opacity: var(--op, .3); }
  to   { opacity: calc(var(--op, .3) * .08); }
}

/* Embers — unoszące się srebrne iskry */
.hero__embers { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__embers span {
  position: absolute; bottom: -12px; border-radius: 50%;
  background: radial-gradient(circle, var(--ecol, #e3e9f0), transparent 72%);
  opacity: 0; animation: ember linear infinite;
}
@keyframes ember {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  12%  { opacity: .85; }
  85%  { opacity: .3; }
  100% { transform: translateY(-85vh) scale(.2); opacity: 0; }
}

/* CTA / section floating dust — srebrne kropki */
.sec__dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sec__dust span {
  position: absolute; bottom: -8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,232,239,.9), transparent 72%);
  opacity: 0; animation: dust-rise linear infinite;
}
@keyframes dust-rise {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  15%  { opacity: .3; }
  80%  { opacity: .1; }
  100% { transform: translateY(-50vh) scale(.3); opacity: 0; }
}
.hero::after {                     /* cinematic vignette */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 85% at 50% 0%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* --- Stat / meta numerals: molten-gold ink --- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat b, .hero__meta b {
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* --- Card pointer-tracking glow --- */
.card { overflow: hidden; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(201,164,92,.14), transparent 45%);
  transition: opacity .3s var(--ease);
}
.card:hover::after { opacity: 1; }
.card:hover { box-shadow: var(--shadow-gold); }

/* --- Frame placeholders: slow shimmer sweep --- */
.frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(201,164,92,.07) 50%, transparent 70%);
  background-size: 220% 100%; animation: shimmer 7s linear infinite;
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* --- Primary button sheen on hover --- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .55s var(--ease); pointer-events: none;
}
.btn--primary:hover::after { left: 150%; }

/* --- Decorative flourish atop alt sections --- */
.section--alt::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 160px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* --- Mobile CTA shown inside the open dropdown menu --- */
.nav__cta-mobile { display: none; }

@media (max-width: 780px) {
  .nav.open .nav__links .nav__cta-mobile {
    display: inline-flex; width: 100%; justify-content: center; margin-top: 16px;
  }
  .nav__links a { min-height: 44px; align-items: center; }          /* comfortable tap targets */
  .lang__btn { min-height: 40px; }
  .lang__menu {                                                      /* never clipped on narrow screens */
    position: fixed; left: 12px; right: 12px; top: 72px; z-index: 210;
    min-width: 0; width: auto; max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: min(65vh, 480px);
  }
  .lang__menu button { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
}

/* --- Silence ambient animations under reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .hero__embers span, .hero__stars span, .sec__dust span, .hero__fog span,
  .hero__logo-shine, .hero__bg::before, .frame::after, .btn--primary::after,
  .brand__logo-stage, .brand__logo-holo, .brand__logo-glint, .brand__logo-aura,
  .badge--alive, .badge--alive .dot, .badge--alive .dot::before, .badge--alive .dot::after,
  .badge--alive .badge__text,
  .hero__meta b.stat-pop, .hero__meta b.stat-zero-glow { animation: none !important; }
}

/* =====================================================================
   ENHANCEMENTS v3 — atmosphere, social, motion & modern web tech
   ===================================================================== */

/* --- Hero drifting fog (soft depth) --- */
.hero__fog { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__fog span {
  position: absolute; left: -35%; width: 65%; height: 42%; border-radius: 50%;
  filter: blur(70px);
  background: radial-gradient(circle, rgba(201,164,92,.09), transparent 70%);
  animation: fog-drift linear infinite;
}
@keyframes fog-drift {
  from { transform: translateX(0) scale(var(--fs,1)); }
  to   { transform: translateX(240%) scale(var(--fs,1)); }
}

/* --- Cinematic cursor spotlight on the hero --- */
.hero { --sx: 50%; --sy: 28%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(199,209,222,.14), transparent 62%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.hero:hover::before, body.has-cursor-fx .hero::before { opacity: 1; }

/* --- Global cursor aura + srebrne iskry (canvas) --- */
body.has-cursor-fx { --mx: 50vw; --my: 40vh; }
.cursor-aura {
  position: fixed; left: 0; top: 0; width: 400px; height: 400px; z-index: 1;
  pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(199,209,222,.12) 0%, rgba(201,164,92,.04) 38%, transparent 68%);
  mix-blend-mode: screen;
  will-change: transform;
}
.chem-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  mix-blend-mode: screen;
}
.hero__stars span, .hero__embers span, .sec__dust span {
  --cursor-boost: 0;
  transition: opacity .15s ease, filter .15s ease, transform .15s ease;
}
body.has-cursor-fx .hero__stars span {
  opacity: calc(var(--op, .35) + var(--cursor-boost) * .6);
  filter: brightness(calc(1 + var(--cursor-boost) * .7));
}
body.has-cursor-fx .hero__embers span {
  opacity: calc(.25 + var(--cursor-boost) * .6);
  filter: brightness(calc(1 + var(--cursor-boost) * .9));
  transform: scale(calc(1 + var(--cursor-boost) * .4));
}
body.has-cursor-fx .sec__dust span {
  opacity: calc(.2 + var(--cursor-boost) * .55);
}

/* --- Premium social links (rail + footer — unified) --- */

/* --- Animated nav underline (non-active links) --- */
.nav__links a:not(.active)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0); transition: transform .25s var(--ease); pointer-events: none;
}
.nav__links a:not(.active):hover::after { transform: scaleX(1); }

/* --- Top scroll-progress bar --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 300;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  box-shadow: 0 0 10px rgba(201,164,92,.5);
}

/* --- Back-to-top button --- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; width: 46px; height: 46px; z-index: 250;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-strong); background: rgba(20,17,12,.8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--gold-bright); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: rgba(30,25,18,.95); transform: translateY(-2px); }
.to-top svg { width: 22px; height: 22px; }

/* --- Button ripple --- */
.btn__ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.35); transform: scale(0);
  animation: ripple .6s var(--ease);
}
@keyframes ripple { to { transform: scale(2.4); opacity: 0; } }

/* --- Hero logo: metallic shine sweep (clip tylko na logo — overflow:hidden) --- */
.hero__logo-wrap {
  position: relative; display: block; width: 100%; max-width: min(720px, 100%);
  margin: 0; padding: 0; border: 0; border-radius: 0;
  overflow: hidden; /* błysk NIE może wylewać się na tekst obok */
  box-shadow: none; background: none;
  isolation: isolate;
}
.hero__logo {
  display: block; width: 100%; height: auto; margin: 0;
  border: 0; border-radius: 0; box-shadow: none;
  vertical-align: top;
}
.hero__logo-shine {
  position: absolute; top: 0; left: -60%; width: 45%; height: 100%; z-index: 2;
  transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.38), transparent);
  animation: logo-shine 6.5s ease-in-out infinite;
  will-change: left;
}
@keyframes logo-shine { 0%, 62% { left: -60%; } 100% { left: 135%; } }
@media (max-width: 780px) { .hero__logo-wrap { margin-bottom: 26px; } }

/* --- Pro details: nicer text wrapping & scrollbars --- */
h1, h2, h3, h4 { text-wrap: balance; }
p, .lead { text-wrap: pretty; }
html { scrollbar-color: var(--gold-dim) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold-dim), #454c54); border-radius: 8px; border: 3px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* --- Modern cross-document View Transitions (Chromium; graceful fallback) --- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .34s var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* --- Press kit: downloadable brand assets --- */
a.asset { display: block; text-decoration: none; color: inherit; transition: border-color .2s var(--ease), transform .2s var(--ease); }
a.asset:hover { border-color: var(--gold); transform: translateY(-3px); }
.asset__thumb { aspect-ratio: 16/10; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, var(--surface-2), var(--bg-1)); }
.asset__thumb img { max-width: 86%; max-height: 86%; width: auto; height: auto; }
.asset__thumb--icon { aspect-ratio: 1; }
.asset__thumb--icon img { max-width: 58%; }

/* =====================================================================
   v4 — announcement bar, sticky social rail, hero grid
   ===================================================================== */

/* --- Top announcement bar (dev status + Discord CTA) --- */
.announce {
  background: linear-gradient(90deg, rgba(88,101,242,.12), rgba(201,164,92,.06), rgba(88,101,242,.08));
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}
.announce__inner {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; padding: 10px 24px; text-align: center;
}
.announce__badge {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--font-display); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px; padding: .3em .75em;
  border-radius: 999px; border: 1px solid rgba(184, 193, 204, .42);
  color: var(--gold-bright);
  background: linear-gradient(135deg, rgba(184, 193, 204, .14), rgba(111, 126, 140, .08));
  white-space: nowrap;
}
.announce__badge .dot { width: 7px; height: 7px; }
.announce__badge.badge--alive .dot::before,
.announce__badge.badge--alive .dot::after { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
.announce__text { color: var(--text-dim); }
.announce__text b { color: var(--text); }
.announce__link {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .5px;
  color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px;
}
.announce__link:hover { color: #fff; }

/* --- Sticky social rail (left edge, all pages) --- */
.social-rail {
  position: fixed; left: 0; top: 50%; z-index: 120;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 12px;
  background: linear-gradient(180deg, rgba(16,13,10,.96), rgba(8,6,5,.92));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(201,164,92,.12); border-left: 0;
  border-radius: 0 16px 16px 0;
  box-shadow: 8px 0 32px -12px rgba(0,0,0,.85), inset -1px 0 0 rgba(201,164,92,.06);
}
.social-rail::before {
  content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px; width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(201,164,92,.2), transparent);
  pointer-events: none;
}

/* --- Shared social-link button (glass + brand glow) --- */
.social-link {
  --brand: #8b939d;
  --brand-glow: rgba(139,147,157,.35);
  position: relative; z-index: 1;
  width: 50px; height: 50px; display: grid; place-items: center;
  border-radius: 14px; text-decoration: none; color: #fff;
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--brand) 28%, transparent), transparent 55%),
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.35));
  box-shadow: 0 4px 16px -6px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), filter .25s;
}
.social-link svg {
  width: 23px; height: 23px; fill: currentColor;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
.social-link::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(-6px);
  padding: .45em .85em; border-radius: 8px; white-space: nowrap;
  font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .3px;
  color: #fff; background: rgba(12,10,8,.95); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.social-link:hover::after,
.social-link:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 28px -8px var(--brand-glow), 0 0 0 1px color-mix(in srgb, var(--brand) 50%, transparent);
}
.social-rail .social-link:hover,
.social-rail .social-link:focus-visible { transform: translateX(4px) scale(1.06); }

/* Brand colours — always tinted, not flat gray */
.social-link[data-social="discord"]   { --brand: #5865F2; --brand-glow: rgba(88,101,242,.55); }
.social-link[data-social="instagram"] { --brand: #E4405F; --brand-glow: rgba(228,64,95,.5); }
.social-link[data-social="tiktok"]    { --brand: #25F4EE; --brand-glow: rgba(37,244,238,.35); color: #fff; }
.social-link[data-social="youtube"]   { --brand: #FF0000; --brand-glow: rgba(255,0,0,.5); }
.social-link[data-social="x"]         { --brand: #e7e9ea; --brand-glow: rgba(255,255,255,.25); }
.social-link[data-social="steam"],
.social-link[data-social="steamStudio"],
.social-link[data-social="steamGame"] { --brand: #66c0f4; --brand-glow: rgba(102,192,244,.45); }
.social-link[data-social="steamGame"] { --brand: #a4d007; --brand-glow: rgba(164,208,7,.35); }
.social-link[data-social="reddit"]    { --brand: #FF4500; --brand-glow: rgba(255,69,0,.5); }

/* Active link = full brand gradient + pulse ring */
.social-link.social--live {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), transparent 50%),
    linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #000));
  border-color: color-mix(in srgb, var(--brand) 70%, #fff);
  animation: social-pulse 3s ease-in-out infinite;
}
.social-link[data-social="x"].social--live { color: #0f1419; }
@keyframes social-pulse {
  0%, 100% { box-shadow: 0 4px 18px -4px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.2); }
  50%      { box-shadow: 0 6px 26px -2px var(--brand-glow), 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
}

/* No link yet = muted glass, dashed hint */
.social-link.social--soon {
  opacity: .62; filter: saturate(.65);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}
.social-link.social--soon:hover { opacity: 1; filter: saturate(1); }

.social-link__tag { display: none; }

.socials .social-link { width: 46px; height: 46px; border-radius: 12px; }
.socials .social-link svg { width: 21px; height: 21px; }
.socials .social-link::after { display: none; }

@media (max-width: 780px) {
  .social-rail {
    top: auto; bottom: 88px; left: 0; right: 0; transform: none;
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    justify-content: flex-start; align-items: stretch;
    padding: 10px 12px; gap: 6px; max-width: 100vw;
    border-radius: 0; border-left: 0; border-right: 0;
    border-top: 1px solid rgba(201,164,92,.14);
    scrollbar-width: none;
  }
  .social-rail::-webkit-scrollbar { display: none; }
  .social-rail::before { display: none; }
  .social-rail .social-link {
    width: auto; min-width: 62px; height: auto; flex: 0 0 auto;
    flex-direction: column; gap: 5px; padding: 8px 6px 6px;
    border-radius: 12px;
  }
  .social-rail .social-link svg { width: 20px; height: 20px; }
  .social-rail .social-link::after { display: none; }
  .social-rail .social-link__tag {
    display: block; font-size: .58rem; font-weight: 600; line-height: 1.1;
    color: var(--text-faint); text-align: center; max-width: 72px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .social-rail .social-link:hover .social-link__tag { color: var(--text); }
  .social-rail .social-link:hover { transform: translateY(-3px) scale(1.04); }
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; }
  .announce__inner { padding: 8px 16px; font-size: .82rem; }
  .to-top { bottom: 168px; }
}
@media (prefers-reduced-motion: reduce) {
  .social-link.social--live { animation: none; }
  .cursor-aura, .chem-canvas { display: none !important; }
  body.has-cursor-fx .hero__stars span,
  body.has-cursor-fx .hero__embers span,
  body.has-cursor-fx .sec__dust span { opacity: unset; filter: none; transform: none; }
}

/* Long URLs/emails wrap on mobile */
a, .legal-body, .toc { overflow-wrap: anywhere; word-break: break-word; }

/* =====================================================================
   ALT HOLD ONLINE — layout, brand, hero overrides
   ===================================================================== */

.site-game .nav {
  background: rgba(7,5,4,.88);
  border-bottom: 1px solid rgba(201,164,92,.12);
}
.site-game .nav.scrolled {
  background: rgba(5,4,3,.96);
  border-bottom-color: rgba(201,164,92,.22);
}

/* Game wordmark — crest + stacked title (no studio PNG / holo) */
.brand__crest {
  flex-shrink: 0;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.brand__stack {
  display: flex; flex-direction: column; line-height: 1.05; margin-left: 10px;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 400; letter-spacing: 2px;
  color: var(--gold-bright); text-transform: uppercase;
}
.brand__tag {
  font-family: var(--font-body);
  font-size: .62rem; font-weight: 600; letter-spacing: 4px;
  color: var(--blood-bright); text-transform: uppercase;
}
.brand__name--full {
  font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: 1px;
  color: var(--gold-bright); margin-left: 10px;
}
.brand--nav { gap: 0; max-width: none; }
.brand--footer { margin-bottom: 1rem; }

.nav--game .nav__inner { height: 64px; gap: 12px; }
.nav--game .nav__links { gap: 18px; min-width: 0; }
.nav--game .nav__links a {
  font-size: .9rem; white-space: nowrap; letter-spacing: .4px;
  text-transform: uppercase; font-family: var(--font-body); font-weight: 600;
}
.nav--game .nav__links a.active::after {
  bottom: -22px; background: linear-gradient(90deg, var(--blood), var(--gold));
}
.nav--game .nav__cta .btn--nav-cta {
  font-size: .72rem; padding: .65em 1em; letter-spacing: .8px;
  max-width: 11rem; line-height: 1.25; text-align: center; white-space: normal;
  background: linear-gradient(135deg, var(--blood), #6b1515);
  border-color: var(--blood-bright);
}
.nav--game .nav__cta .btn--nav-cta:hover {
  background: linear-gradient(135deg, var(--blood-bright), var(--blood));
}
.nav--game .brand--nav { min-width: 0; flex-shrink: 0; }

@media (max-width: 1120px) {
  .nav--game .nav__links,
  .nav--game .nav__cta .btn--nav-cta { display: none; }
  .nav--game .nav__burger { display: block; }
  .nav--game.open .nav__links {
    display: flex; flex-direction: column; gap: 0; align-items: stretch;
    position: fixed; inset: 64px 0 auto 0; z-index: 150;
    background: var(--bg-1); border-bottom: 1px solid var(--border);
    padding: 8px 24px 24px; margin-left: 0;
  }
  .nav--game.open .nav__links a {
    padding: 14px 0; border-bottom: 1px solid var(--border); width: 100%;
    white-space: normal;
  }
  .nav--game.open .nav__links a.active::after { display: none; }
}

/* Announce — crimson status strip */
.site-game .announce {
  background: linear-gradient(90deg, rgba(139,30,30,.35), rgba(15,12,9,.95) 40%);
  border-bottom: 1px solid rgba(201,164,92,.15);
}
.site-game .announce__badge { border-color: rgba(201,164,92,.35); color: var(--gold-bright); }
.site-game .announce__link { color: var(--gold-bright); font-weight: 600; }

/* Hero — cinematic game landing */
.hero--game {
  text-align: center;
  padding: clamp(72px, 12vw, 140px) 0 clamp(48px, 8vw, 96px);
  border-bottom: 1px solid var(--border);
}
.hero--game .hero__bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,30,30,.18), transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(201,164,92,.08), transparent 55%),
    linear-gradient(180deg, #120e0a 0%, var(--bg-0) 70%);
}
.hero--game .hero__bg::after {
  background: linear-gradient(180deg, transparent 40%, var(--bg-0));
  opacity: 1;
}
.hero--game h1 {
  max-width: none;
  font-size: clamp(2.8rem, 7vw, 5rem);
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff8ec 20%, var(--gold) 70%, var(--gold-dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
}
.hero--game .lead { max-width: 52ch; margin-inline: auto; color: var(--text-dim); }
.hero--game .btn-row { justify-content: center; margin-top: .5rem; }

/* Buttons — ember primary, not studio chrome */
.site-game .btn--primary {
  background: linear-gradient(135deg, #a82828, var(--blood) 45%, #5a1212);
  border-color: var(--blood-bright);
  color: #fff8f0;
  box-shadow: 0 4px 24px -6px rgba(139,30,30,.55);
}
.site-game .btn--primary:hover {
  background: linear-gradient(135deg, var(--blood-bright), #a82828);
  color: #fff;
}
.site-game .btn--ghost {
  border-color: var(--gold-dim);
  color: var(--gold-bright);
}
.site-game .btn--ghost:hover {
  border-color: var(--gold);
  background: rgba(201,164,92,.08);
  color: var(--gold-bright);
}

/* Cards — angular panels with gold top bar */
.site-game .card {
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border-color: var(--border);
}
.site-game .card--feature::before {
  background: linear-gradient(90deg, transparent, var(--gold), var(--blood-bright), transparent);
}
.site-game .card__icon {
  border-radius: var(--radius-sm);
  background: radial-gradient(circle at 30% 20%, rgba(201,164,92,.15), transparent 70%);
  color: var(--gold);
}
.site-game .card__icon svg { fill: none; stroke: currentColor; }

/* Feature grid icons */
.site-game .card__icon svg path { stroke: currentColor; }

/* Timeline — siege accent */
.site-game .tl-item.done .date { color: var(--gold-bright); }
.site-game .tl-item::before { background: var(--gold-dim); }
.site-game .tl-item.done::before { background: var(--blood-bright); box-shadow: 0 0 12px rgba(184,50,50,.4); }

/* CTA band — battle banner */
.site-game .cta-band {
  background:
    linear-gradient(135deg, rgba(139,30,30,.25), rgba(15,12,9,.9)),
    var(--bg-1);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

/* Social rail — warm glass */
.site-game .social-rail {
  border-color: rgba(201,164,92,.18);
  background: rgba(10,8,6,.72);
}
.site-game .social-rail .social-link:hover { color: var(--gold-bright); }

/* Footer */
.site-game .footer {
  background: var(--bg-0);
  border-top: 2px solid var(--border);
}
.site-game .footer h5 { color: var(--gold); letter-spacing: 3px; }

/* Frames / trailer placeholder */
.site-game .frame {
  border-color: var(--border-strong);
  background: linear-gradient(145deg, var(--surface), var(--bg-1));
}
.site-game .frame__label { color: var(--gold-dim); }

/* Facts table */
.site-game .facts th { color: var(--gold); }
.site-game .facts td { border-color: var(--border); }

/* Eyebrow labels */
.site-game .eyebrow { color: var(--blood-bright); letter-spacing: 5px; }

/* Badges */
.site-game .badge--wip { border-color: rgba(201,164,92,.4); color: var(--gold-bright); }
.site-game .badge--alive .dot { background: var(--green-bright); }

@media (max-width: 780px) {
  .brand__name { font-size: 1rem; letter-spacing: 1.5px; }
  .brand__crest { width: 32px; height: 32px; }
}