:root { --acid: #d7ff3f; --blood: #ff3a2f; --paper: #ecebdd; --ink: #090b0a; }
html { background: var(--ink); }
.game-page { background: var(--ink); color: var(--paper); }
.game-header { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 86px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px,4vw,60px); background: rgba(9,11,10,.86); border-bottom: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(16px); }
.game-brand { display: flex; align-items: baseline; gap: 10px; color: inherit; text-decoration: none; font: 800 24px Manrope, sans-serif; letter-spacing: -.04em; }
.game-brand small { color: var(--acid); font: 500 9px "IBM Plex Mono", monospace; letter-spacing: .12em; }
.game-header nav { display: flex; gap: clamp(18px,3vw,42px); }
.game-header nav a { color: #bbbfb9; text-decoration: none; font-size: 13px; }
.game-header nav a:hover { color: var(--acid); }
.game-kicker { color: var(--acid); font: 600 10px "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.game-hero { position: relative; min-height: 100vh; display: grid; place-items: center start; overflow: hidden; padding: 150px clamp(20px,4vw,60px) 90px; }
.game-hero::before { content:""; position:absolute; inset:0; opacity:.18; background: repeating-linear-gradient(0deg,transparent 0 3px,rgba(215,255,63,.12) 4px); pointer-events:none; }
.game-hero-copy { position: relative; z-index: 3; width: min(850px,66vw); }
.game-hero h1 { margin: 25px 0 35px; font-size: clamp(56px,8.2vw,132px); line-height: .83; letter-spacing: -.075em; }
.game-hero h1 span { display:block; color:var(--acid); }
.game-hero-copy > p:not(.game-kicker) { max-width:650px; color:#c3c7c1; font-size:clamp(18px,2vw,26px); line-height:1.45; }
.game-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:42px; }
.game-actions a,.steam-button { display:inline-flex; justify-content:space-between; gap:35px; padding:15px 18px; border:1px solid #555b55; color:inherit; text-decoration:none; font-weight:700; }
.game-actions a:first-child,.steam-button { background:var(--acid); border-color:var(--acid); color:var(--ink); }
.hero-stack { position:absolute; right:-3vw; top:18%; width:38vw; height:62%; }
.hero-stack { transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .35s cubic-bezier(.16,1,.3,1); }
.hero-stack img { position:absolute; width:78%; box-shadow:0 35px 80px rgba(0,0,0,.55); transform:rotate(3deg); }
.hero-stack img { transition:transform .65s cubic-bezier(.16,1,.3,1),filter .4s ease; }
.hero-stack:hover img:first-child { transform:translate(-14px,-12px) rotate(1deg); }
.hero-stack:hover img:nth-child(2) { transform:translate(8px,-4px) rotate(-2deg); }
.hero-stack:hover img:nth-child(3) { transform:translate(18px,8px) rotate(3deg); }
.hero-stack img:nth-child(2) { top:28%; right:12%; transform:rotate(-4deg); }
.hero-stack img:nth-child(3) { top:56%; right:0; transform:rotate(5deg); }
.hero-ticker { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; gap:25px; padding:14px; overflow:hidden; background:var(--acid); color:var(--ink); font:600 10px "IBM Plex Mono",monospace; }
.hero-ticker span { animation:tickerDrift 8s ease-in-out infinite alternate; }
.hero-ticker span:nth-child(2){animation-delay:-2s}.hero-ticker span:nth-child(3){animation-delay:-4s}
@keyframes tickerDrift { to{transform:translateX(22px)} }
.game-showcase { position:relative; min-height:900px; display:grid; grid-template-columns:1.1fr .9fr; gap:0; align-items:stretch; border-bottom:1px solid #343834; }
.showcase-number { position:absolute; z-index:2; top:35px; left:clamp(20px,4vw,60px); color:var(--acid); font:10px "IBM Plex Mono",monospace; }
.showcase-art { position: relative; min-height:900px; overflow:hidden; display:grid; place-items:center; background:#101b20; }
.showcase-art::before { content:""; position:absolute; inset:-45px; background:var(--game-art) center / cover no-repeat; filter:blur(32px) brightness(.38) saturate(.9); transform:scale(1.15); }
.showcase-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,11,10,.08),rgba(9,11,10,.34)); }
.showcase-art img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; image-rendering:auto; }
.game-showcase:hover .showcase-art img { transform:scale(1.025); transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.wasteland .showcase-art { --game-art:url("../assets/games/wasteland-header.jpg"); }
.showcase-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(45px,7vw,110px); background:#111411; }
.showcase-copy h2 { margin:15px 0 25px; font-size:clamp(55px,7vw,108px); line-height:.78; letter-spacing:-.075em; }
.showcase-copy h3 { margin:20px 0; font-size:clamp(25px,3vw,43px); line-height:1.05; }
.showcase-copy > p:not(.game-kicker) { color:#b6bbb5; font-size:18px; line-height:1.6; }
.showcase-copy ul { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:25px 0 38px; padding:0; }
.showcase-copy li { border:1px solid #4a4f4a; padding:8px 10px; font:9px "IBM Plex Mono",monospace; text-transform:uppercase; }
.doomsday { --acid:#f24a33; }
.doomsday .showcase-art { --game-art:url("../assets/games/doomsday-header.jpg"); }
.doomsday .showcase-copy { background:#201b1a; }
.doomsday .game-kicker { color:#ff765d; }
.doomsday .steam-button { background:#ff674b; border-color:#ff674b; }
.beasts { --acid:#ff2d2d; }
.beasts .showcase-art { --game-art:url("../assets/games/beasts-hero.jpg"); }
.beasts .showcase-copy { background:#150e0e; }
.beasts .game-kicker { color:#ff4f4f; }
.beasts .steam-button { background:#ff3131; border-color:#ff3131; }
.beasts-art img { object-position:center; }
.game-expertise { padding:clamp(90px,10vw,155px) clamp(20px,4vw,60px); }
.game-expertise h2 { max-width:1100px; margin:25px 0 75px; font-size:clamp(48px,7vw,105px); line-height:.9; letter-spacing:-.065em; }
.expertise-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #3b403b; border-left:1px solid #3b403b; }
.expertise-grid span { min-height:150px; display:flex; align-items:flex-end; padding:22px; border-right:1px solid #3b403b; border-bottom:1px solid #3b403b; font:11px "IBM Plex Mono",monospace; text-transform:uppercase; }
.game-outro { min-height:700px; display:grid; grid-template-columns:1fr .6fr; gap:60px; align-content:center; padding:clamp(90px,10vw,155px) clamp(20px,4vw,60px); background:var(--acid); color:var(--ink); }
.game-outro .game-kicker { color:#3d480d; }
.game-outro h2 { margin:20px 0 0; font-size:clamp(65px,10vw,155px); line-height:.72; letter-spacing:-.08em; }
.game-outro h2 span { font-size:.42em; letter-spacing:.02em; }
.game-outro > p { align-self:center; max-width:440px; font-size:24px; font-weight:700; }
.game-outro .game-actions { grid-column:1/-1; }
.game-outro .game-actions a { border-color:var(--ink); }
.game-outro .game-actions a:first-child { background:var(--ink); color:var(--paper); }
.game-footer { display:flex; justify-content:space-between; padding:28px clamp(20px,4vw,60px); font:10px "IBM Plex Mono",monospace; }
.game-footer a { color:var(--acid); text-decoration:none; }
@media(max-width:800px){
  .game-header nav a:not(:last-child){display:none}
  .game-hero-copy{width:100%}
  .game-hero{align-items:start;padding-top:140px;padding-bottom:330px}
  .hero-stack{top:auto;bottom:60px;right:-5%;width:76vw;height:280px}
  .game-showcase{grid-template-columns:1fr;min-height:0}
  .showcase-art{min-height:430px}
  .showcase-copy{min-height:650px}
  .expertise-grid{grid-template-columns:repeat(2,1fr)}
  .game-outro{grid-template-columns:1fr}
  .game-outro .game-actions{grid-column:auto}
}