/* Lucius II – ward-clinic identity: cold fluorescent teal on near-black, blood-red calls to action */
@font-face {
  font-family: "Impact";
  src: url("../fonts/impact.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer components {
  :root {
    --bg: #0b0a0a; --bg-2: #141312; --surface: #1c1a18;
    --text: #e8e6dc; --muted: #b8b3a7;
    --accent: #b3101c; --accent-2: #f0ebd8;
    --radius: 4px; --max: 70rem;
    --font-display: "Impact", Haettenschweiler, "Arial Narrow Bold", sans-serif;
  }
  h1, h2, h3, h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-weight: 400; }
  .section.tint { background: var(--bg-2); border-block: 1px solid color-mix(in srgb, var(--accent-2) 14%, transparent); }
  .eyebrow { font-family: var(--font-display); letter-spacing: .12em; font-weight: 400; font-size: .95rem; }
  .section h2 { font-size: clamp(1.9rem, 5vw, 3.25rem); }
  .section h2::after { content: ""; display: block; width: 4rem; height: 3px; margin-top: .6rem; background: var(--accent); }

  .brand { display: block; line-height: 0; }
  .site-header nav { align-items: center; }
  .site-header nav a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; font-weight: 400; padding-block: .5rem; }
  .site-header nav a:hover { color: var(--accent-2); }
  .site-header nav a.nav-buy { background: var(--accent); color: #fff; padding: .45rem .9rem; border-radius: 2px; }
  .site-header nav a.nav-buy:hover { color: #fff; background: color-mix(in srgb, var(--accent) 80%, white); }

  .hero { min-height: min(92svh, 56rem); background: #000; }
  .hero > img.hero-bg { object-position: 50% 30%; filter: saturate(.9); }
  .hero::after { background: linear-gradient(to right, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .35) 55%, transparent 80%), linear-gradient(to top, var(--bg) 2%, transparent 40%); }
  .hero .wrap { max-width: var(--max); }
  .hero h1 { font-size: clamp(2.75rem, 9vw, 6.5rem); line-height: .95; text-shadow: 0 2px 24px #000; }
  .hero h1 span { display: block; color: #fff; font-size: .55em; letter-spacing: 0; margin-top: .18em; font-weight: 400; }
  .hero p.lead { max-width: 38rem; text-shadow: 0 1px 12px #000; }

  .btn { border-radius: 2px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; font-weight: 400; }
  .btn.ghost { border-color: var(--accent-2); color: var(--accent-2); }
  .btn.ghost:hover { background: color-mix(in srgb, var(--accent-2) 14%, transparent); }

  .split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: center; }
  .prose { display: grid; gap: 1rem; }
  .prose p { max-width: 60ch; }
  .story-shot img { border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); box-shadow: 14px 14px 0 -2px color-mix(in srgb, var(--accent) 60%, transparent); }

  .intro { color: var(--muted); margin-bottom: 2rem; }
  .features { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); counter-reset: f; }
  .features li { counter-increment: f; position: relative; background: var(--surface); padding: 1.5rem 1.25rem 1.25rem; border-top: 3px solid var(--accent); }
  .features li::before { content: counter(f, decimal-leading-zero); position: absolute; top: .5rem; right: .9rem; font: 400 2rem/1 var(--font-display); color: color-mix(in srgb, var(--accent-2) 30%, transparent); }
  .features h3 { font-size: 1.15rem; margin-bottom: .5rem; color: var(--accent-2); padding-right: 2.5rem; }
  .features p { color: var(--muted); }

  .video { border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); border-radius: 2px; }

  .gallery { list-style: none; margin: 0; padding: 0; gap: .6rem; }
  .gallery a { border-radius: 2px; border: 1px solid color-mix(in srgb, var(--accent-2) 20%, transparent); }
  .gallery a:hover { border-color: var(--accent-2); }

  .facts div { background: var(--surface); padding: 1rem; border-left: 3px solid var(--accent-2); }
  .facts { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .facts .wide { grid-column: 1 / -1; }
  .note { color: var(--muted); font-size: .9rem; margin-top: 1rem; }
  .note a, .links a, .site-footer a, .prose a { color: var(--accent-2); }
  .sub { margin-block: 2.5rem 1rem; font-size: 1.4rem; }
  .reqs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .reqs section { background: var(--surface); padding: 1.25rem; }
  .reqs h4 { margin: 0 0 .6rem; font-size: 1rem; color: var(--accent-2); }
  .reqs ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .95rem; line-height: 1.6; }
  .reqs b { color: var(--text); font-weight: 600; }

  .card { border-radius: 2px; border-left: 3px solid var(--accent); }
  .card h3 { color: var(--text); }
  .card .btn-row { margin-top: 1rem; }

  .links { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
  .links span { color: var(--muted); font-size: .85rem; margin-left: .4rem; }
  .links a { display: inline-block; padding-block: .25rem; }
  .site-footer a { display: inline-block; padding-block: .25rem; }

  .lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; overflow: visible; }
  .lightbox::backdrop { background: rgb(0 0 0 / .92); }
  .lightbox[open] { display: grid; place-items: center; }
  .lightbox img { max-width: min(94vw, 120rem); max-height: 88dvh; width: auto; height: auto; object-fit: contain; }
  .lb-btn { position: fixed; display: grid; place-items: center; min-width: 3rem; min-height: 3rem; font-size: 2rem; line-height: 1; border: 2px solid var(--accent-2); border-radius: 50%; background: rgb(0 0 0 / .7); color: var(--accent-2); cursor: pointer; }
  .lb-btn:hover { background: var(--accent-2); color: #000; }
  .lb-prev { left: .75rem; top: 50%; translate: 0 -50%; }
  .lb-next { right: .75rem; top: 50%; translate: 0 -50%; }
  .lb-close { right: .75rem; top: .75rem; }

  @media (max-width: 40rem) {
    .site-header nav { gap: .25rem .9rem; }
    .brand img { width: 120px; height: auto; }
  }
}

@layer components {
  @media (max-width: 40rem) {
    .site-header .wrap { flex-direction: column; align-items: flex-start; gap: .25rem; }
    .brand img { width: 130px; height: auto; }
  }
}
.hero h1 .logo-title { width: min(100%, 38rem); height: auto; filter: drop-shadow(0 4px 24px #000); }

@layer components {
  .trailers { display: grid; gap: 2rem; }
  .trailer h3 { font-size: 1.25rem; margin-bottom: .75rem; color: var(--accent-2); }
  .yt { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); overflow: clip; }
  .yt img, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
  .yt-play { position: absolute; inset: 0; width: 100%; border: 0; background: rgb(0 0 0 / .25); cursor: pointer; display: grid; place-items: center; }
  .yt-play span { display: grid; place-items: center; width: 5rem; height: 5rem; padding-left: .3rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 2rem; border: 3px solid #fff; transition: transform .15s; }
  .yt-play:hover span { transform: scale(1.08); }
}

.game-links { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.game-link { display: grid; gap: .5rem; text-decoration: none; }
.game-link img { width: 100%; height: auto; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); transition: transform .2s, border-color .2s; }
.game-link:hover img, .game-link:focus-visible img { transform: translateY(-3px); border-color: var(--accent-2); }
.game-link span { font-family: var(--font-display); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; font-size: 1rem; }
.facts dt { font-family: var(--font-display); font-weight: 400; letter-spacing: .06em; font-size: .9rem; }
.manual { margin-top: 1rem; }
.hero .wrap { grid-template-columns: minmax(0, 1fr); } .hero h1 .logo-title { max-width: 100%; }
/* Official Steam widget shown through a small window: only the price block and Buy button. */
.widget-mini { width: 230px; height: 32px; overflow: hidden; border-radius: 3px; background: transparent; box-shadow: none; border: 0; outline: none; }
.widget-mini .steam-widget { display: block; width: 450px; max-width: none; height: 190px; margin: -153px 0 0 -208px; border: 0; outline: none; color-scheme: normal; background: transparent; }
.site-header .widget-mini { flex: none; }