/* Wreckbloom's site: the game's dusk colours, its pixel fonts (Pixelify Sans,
   Silkscreen), hard pixel shadows; long texts in the system font to read easily. */
@font-face { font-family: 'Pixelify'; src: url('fonts/PixelifySans-Medium.ttf?v=5') format('truetype'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('fonts/Silkscreen-Regular.ttf?v=5') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('fonts/Silkscreen-Bold.ttf?v=5') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --ink: #120b19;
  --night: #1b1024;
  --panel: #241730;
  --panel2: #2e1f3c;
  --line: #4a3a5a;
  --text: #f2efe6;
  --muted: #a99bb8;
  --gold: #f2c14e;
  --orange: #e8873a;
  --rust: #a8541f;
  --green: #7cc444;
  --green-d: #3e7a2c;
  --red: #e8463a;
  --pixel: 'Pixelify', 'Silkscreen', system-ui, sans-serif;
  --label: 'Silkscreen', 'Pixelify', system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--text); font: 17px/1.6 var(--body); }
img { max-width: 100%; display: block; image-rendering: pixelated; }
a { color: var(--gold); }
a:hover { color: #ffd97a; }
/* The pixel font is set in capitals, as in the game: its small Cyrillic letters read poorly (д like a, в like b) */
h1, h2, h3 { font-family: var(--pixel); font-weight: 600; line-height: 1.15; letter-spacing: .02em; margin: 0 0 .5em; text-transform: uppercase; }
h1 { font-size: clamp(34px, 6vw, 56px); }
h2 { font-size: clamp(26px, 4vw, 38px); }
h3 { font-size: 22px; }
p { margin: 0 0 1em; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.hidden { display: none !important; }
.small { font-size: 13px; color: var(--muted); }
.muted { color: var(--muted); }

/* ---- buttons: flat, a hard shadow under them, they sink when pressed ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 18px/1 var(--pixel); color: var(--ink);
  background: var(--gold); border: 3px solid var(--ink); padding: 14px 22px; cursor: pointer; text-decoration: none;
  box-shadow: 0 5px 0 #8a6a1e, 0 5px 0 3px var(--ink); transition: transform .08s, box-shadow .08s; text-transform: uppercase; }
.btn:hover { color: var(--ink); filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a6a1e, 0 1px 0 3px var(--ink); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.green { background: var(--green); box-shadow: 0 5px 0 var(--green-d), 0 5px 0 3px var(--ink); }
.btn.dark { background: var(--panel2); color: var(--text); box-shadow: 0 5px 0 #0c0710, 0 5px 0 3px var(--ink); }
.btn.danger { background: var(--red); color: #fff; box-shadow: 0 5px 0 #7a1e18, 0 5px 0 3px var(--ink); }

/* ---- the header ---- */
.top { position: sticky; top: 0; z-index: 30; background: rgba(18, 11, 25, .92); backdrop-filter: blur(6px); border-bottom: 2px solid var(--line); }
.top .bar { max-width: 1240px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .icon { width: 40px; height: 40px; border: 2px solid var(--ink); }
.brand .name { height: 28px; width: auto; }
.top .pages { display: flex; gap: 4px; margin-left: auto; }
.top .pages a { font: 600 15px/1 var(--label); color: var(--muted); text-decoration: none; padding: 10px 12px; text-transform: uppercase; }
.top .pages a:hover, .top .pages a.on { color: var(--gold); }
.lang { position: relative; }
.lang > button { font: 600 14px/1 var(--label); color: var(--text); background: var(--panel); border: 2px solid var(--line); padding: 8px 10px; cursor: pointer; }
.lang .flag { margin-right: 6px; }
.lang ul { display: none; position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 2px solid var(--line); min-width: 170px; }
.lang.open ul { display: block; }
.lang li button { width: 100%; text-align: left; font: 15px/1.2 var(--body); color: var(--text); background: none; border: 0; padding: 9px 10px; cursor: pointer; }
.lang li button:hover, .lang li button.on { background: var(--panel2); color: var(--gold); }
.burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; }
.burger span { display: block; width: 24px; height: 3px; margin: 5px 0; background: var(--text); }
@media (max-width: 760px) {
  .burger { display: block; }
  .brand .name { height: 20px; }
  .top .pages { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--ink); border-bottom: 2px solid var(--line); padding: 8px 12px; }
  .top.menu-open .pages { display: flex; }
  .lang { margin-left: auto; }
}

/* ---- the first screen, as Catoomi's: the words on the left, the game playing in a phone on the right,
   bits of its HUD floating round it, the dusk's colours glowing behind ---- */
.hero { position: relative; overflow: hidden; padding: 70px 0 120px; border-bottom: 3px solid var(--ink); background: var(--night); }
.hero .glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 55% at 76% 46%, rgba(232, 122, 68, .34), transparent 70%),
              radial-gradient(30% 40% at 84% 30%, rgba(255, 196, 96, .16), transparent 70%),
              radial-gradient(45% 50% at 12% 18%, rgba(124, 196, 68, .12), transparent 70%),
              radial-gradient(60% 60% at 30% 100%, rgba(90, 40, 80, .45), transparent 70%); }
/* faint pixel stars */
.hero .glow::after { content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(#e8c8b0 1px, transparent 1.5px), radial-gradient(#e8c8b0 1px, transparent 1.5px);
  background-size: 97px 89px, 151px 137px; background-position: 13px 21px, 71px 53px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center; }
.hero .logo { width: min(520px, 100%); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .55)); margin-bottom: 16px; }
.hero .tag { font: 700 clamp(13px, 1.6vw, 16px)/1.3 var(--label); text-transform: uppercase; color: var(--gold); letter-spacing: .04em; margin-bottom: 14px; }
.hero .lead { max-width: 560px; font-size: clamp(17px, 1.8vw, 19px); color: #e2dae6; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.stage { position: relative; padding: 40px 0; }
.stage .phone.land { width: 100%; }
.phone.land .screen video { position: absolute; left: 50%; top: 50%; width: auto; max-width: none; height: 46.03%; aspect-ratio: 1000 / 460; transform: translate(-50%, -50%) rotate(90deg); object-fit: cover; background: #000; }
/* the HUD's bits, in the game's dark glass */
.float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(18, 11, 25, .88);
  border: 2px solid var(--line); box-shadow: 0 6px 0 rgba(0, 0, 0, .45); animation: bob 5s ease-in-out infinite; font: 600 15px/1 var(--pixel); color: var(--text); text-transform: uppercase; }
.float.b2 { animation-delay: -2.5s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float .bar { display: block; width: 92px; height: 10px; background: var(--ink); box-shadow: 0 0 0 2px var(--line); }
.float .bar i { display: block; height: 100%; }
.f-hp { left: -2%; top: 6px; }
.f-hp .heart { width: 14px; height: 12px; background: var(--red); clip-path: polygon(0 20%, 20% 0, 40% 0, 50% 15%, 60% 0, 80% 0, 100% 20%, 100% 50%, 50% 100%, 0 50%); animation: beat 1.1s ease-in-out infinite; }
@keyframes beat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.25); } }
.f-hp .bar i { width: 85%; background: linear-gradient(90deg, #4fa83a, var(--green)); }
.f-hp b { color: var(--text); font-size: 14px; }
.f-part { right: 2%; top: 0; color: var(--gold); }
.f-part img { height: 26px; width: auto; }
.f-noise { left: 4%; bottom: 8px; }
.f-noise small { font: 700 11px/1 var(--label); color: var(--muted); }
.f-noise .bar i { width: 30%; background: var(--gold); animation: noise 3.2s ease-in-out infinite; }
@keyframes noise { 0%, 100% { width: 22%; } 40% { width: 64%; background: var(--orange); } 55% { width: 78%; background: var(--red); } }
.f-dog { right: -4%; bottom: -34px; padding: 0; background: none; border: 0; box-shadow: none; flex-direction: column; align-items: flex-end; gap: 4px; }
.f-dog img { height: 64px; width: auto; filter: drop-shadow(0 0 1px rgba(255, 236, 200, .55)) drop-shadow(0 4px 0 rgba(0, 0, 0, .4)); }
.f-dog .bubble { position: relative; background: var(--text); color: var(--ink); padding: 7px 11px; font: 600 14px/1 var(--pixel); border: 2px solid var(--ink); }
.f-dog .bubble::after { content: ''; position: absolute; right: 22px; bottom: -8px; border: 6px solid transparent; border-top-color: var(--text); border-bottom: 0; }
@media (max-width: 960px) {
  .hero { padding: 40px 0 110px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .stage { padding: 30px 0 20px; }
}
@media (max-width: 560px) { .f-noise, .f-part { display: none; } .float { font-size: 13px; } .f-dog img { height: 48px; } }
.soon { font: 700 13px/1.4 var(--label); text-transform: uppercase; color: var(--muted); margin-top: 16px; }
.notify .bell { display: inline-block; animation: ring 2.6s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(16deg); } 82% { transform: rotate(-14deg); } 89% { transform: rotate(8deg); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 22px; }
.chip { font: 600 14px/1 var(--body); color: #f4ecd8; background: rgba(46, 31, 60, .8); border: 1.5px solid rgba(242, 193, 78, .35); padding: 8px 12px; border-radius: 999px; }

/* the store badges, in the stores' own look */
.stores { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.stores.center-row { justify-content: center; margin: 26px 0 30px; }
.badge { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; background: #000; border-radius: 13px;
  padding: 9px 18px 9px 14px; min-width: 176px; height: 58px; border: 1.5px solid #a6a6a6; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); transition: transform .15s, box-shadow .15s; }
.badge:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0, 0, 0, .45); }
.badge svg { flex-shrink: 0; }
.badge.apple svg { width: 26px; height: 31px; }
.badge.google svg { width: 27px; height: 30px; }
.badge small { display: block; font: 600 11px/1.1 -apple-system, 'Segoe UI', sans-serif; letter-spacing: .02em; }
.badge b { display: block; font: 600 22px/1.1 -apple-system, 'Segoe UI', sans-serif; letter-spacing: -.01em; }

/* the hero and his dog running from the dead along the bottom of the first screen */
.chase { position: absolute; left: 0; right: 0; bottom: 6px; height: 72px; overflow: hidden; pointer-events: none; z-index: 1; }
.chase .pack { position: absolute; bottom: 0; display: flex; align-items: flex-end; gap: 10px; animation: chase 17s linear infinite; }
.chase img { height: 69px; width: auto; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45)); }
.chase img.d { height: 48px; }
.chase img.z { filter: brightness(.85) drop-shadow(0 3px 0 rgba(0, 0, 0, .45)); }
.chase .gap { width: 90px; }
@keyframes chase { from { transform: translateX(-560px); } to { transform: translateX(calc(100vw + 40px)); } }

/* ---- the loading screen: the game's own - its armoured pickup driving, its gauge of cells and the % ---- */
#loader { position: fixed; inset: 0; z-index: 100; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; transition: opacity .5s, visibility .5s; }
#loader.gone { opacity: 0; visibility: hidden; }
html:not(.js) #loader { display: none; }
#loader .car { position: relative; width: 252px; height: 168px; }
#loader .car img { position: absolute; left: 0; bottom: 0; width: 252px; height: 168px; filter: brightness(.92); }
#loader .car img.bump { transform: translateY(-3px); }
/* dust thrown up behind it, as on the game's road */
#loader .dust { position: absolute; left: 8px; bottom: 10px; width: 8px; height: 8px; background: rgba(120, 96, 100, .45); animation: dust 1.1s linear infinite; }
#loader .dust:nth-child(2) { animation-delay: -.22s; bottom: 14px; }
#loader .dust:nth-child(3) { animation-delay: -.44s; bottom: 6px; }
#loader .dust:nth-child(4) { animation-delay: -.66s; bottom: 16px; }
#loader .dust:nth-child(5) { animation-delay: -.88s; bottom: 9px; }
@keyframes dust { from { transform: translate(0, 0) scale(.6); opacity: 1; } to { transform: translate(-130px, -24px) scale(2.2); opacity: 0; } }
#loader .gauge { display: flex; align-items: center; gap: 12px; width: min(420px, 84vw); }
#loader .cells { flex: 1; display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 16px; padding: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--line); }
#loader .cells i { background: var(--panel); }
#loader .cells i.on { background: var(--gold); }
#loader .cells i.tip { background: #fff0a0; }
#loader .pct { width: 52px; text-align: right; font: 600 17px/1 var(--pixel); color: var(--gold); }

/* ---- the strip of numbers running across ---- */
.marquee { overflow: hidden; background: var(--gold); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.marquee .track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font: 700 18px/1 var(--pixel); text-transform: uppercase; color: var(--ink); padding: 14px 26px; white-space: nowrap; }
.marquee span::after { content: '✦'; margin-left: 52px; color: var(--rust); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- sections ---- */
section { padding: 84px 0; }
section.alt { background: var(--ink); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.center { text-align: center; }
.kicker { font: 700 14px/1 var(--label); text-transform: uppercase; color: var(--orange); letter-spacing: .05em; margin-bottom: 12px; }

/* The game in phones turned on their side (the game plays landscape) */
.phone.land.big { width: min(900px, 100%); }
.shots { display: grid; grid-template-columns: 1fr; gap: 22px; justify-items: center; }
.phone.land { position: relative; width: min(760px, 100%); aspect-ratio: 982 / 472; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.phone.land .turn { position: absolute; left: 50%; top: 50%; width: 48.07%; aspect-ratio: 472 / 982; transform: translate(-50%, -50%) rotate(-90deg); }
.phone.land .screen { position: absolute; left: 3.39%; top: 1.324%; width: 93.22%; height: 97.35%; border-radius: 12.5% / 5.75%; overflow: hidden; background: #000; }
/* the screen is a portrait box turned with the phone: a landscape shot turned back, its height
   the box's width (440/956 of its height), so it fills the glass exactly */
.phone.land .screen img { position: absolute; left: 50%; top: 50%; width: auto; max-width: none; height: 46.03%; transform: translate(-50%, -50%) rotate(90deg); opacity: 0; transition: opacity .8s; image-rendering: auto; }
.phone.land .screen img.on { opacity: 1; }
.phone.land .frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; image-rendering: auto; }
.dots { display: flex; gap: 10px; justify-content: center; }
.dots button { width: 14px; height: 14px; border: 2px solid var(--ink); background: var(--line); padding: 0; cursor: pointer; }
.dots button.on { background: var(--gold); }

/* How a day goes: three steps */
.steps { list-style: none; padding: 0; margin: 38px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.steps li { position: relative; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); padding: 22px; }
.steps li > b { position: absolute; top: -18px; left: 18px; width: 36px; height: 36px; display: grid; place-items: center; font: 700 20px/1 var(--pixel); color: var(--ink); background: var(--gold); border: 3px solid var(--ink); }
.steps .pic { height: 84px; display: flex; align-items: flex-end; gap: 10px; margin: 8px 0 14px; }
.steps .pic img { height: 69px; width: auto; }
.steps .pic img[src*="pickup"] { height: 84px; }
.steps .pic img[src*="dog"] { height: 48px; }
.steps h3 { color: var(--gold); font-size: 20px; }
.steps p { color: #d9d0dd; font-size: 16px; margin: 0; }
img.flip { transform: scaleX(-1); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; gap: 34px; } }

/* A text beside phones, the sides swapped every other section */
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.split.flip .txt { order: 2; }
.split .media .phone.land { width: 100%; }
.split .media .dots { margin-top: 16px; }
.points { list-style: none; padding: 0; margin: 18px 0 0; }
.points li { position: relative; padding: 0 0 0 30px; margin-bottom: 12px; color: #d9d0dd; font-size: 16px; }
.points li::before { content: ''; position: absolute; left: 4px; top: .5em; width: 10px; height: 10px; background: var(--green); box-shadow: 2px 2px 0 var(--ink); }
.points li b { color: var(--text); }
.narrow { max-width: 680px; margin-left: auto; margin-right: auto; color: #d9d0dd; }
.narrow-wrap { max-width: 820px; }
.head { margin-bottom: 34px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 30px; } .split.flip .txt { order: 0; } }

/* The night section: dark, a torch's light following the pointer */
section.night { position: relative; background: #07040b; overflow: hidden; }
section.night::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 360px at var(--mx, 70%) var(--my, 40%), rgba(255, 226, 150, .13), transparent 70%); pointer-events: none; }
section.night .wrap { position: relative; }

/* The enemies under the fight's phone */
.foes { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.foes figure { margin: 0; text-align: center; }
.foes img { height: 69px; width: auto; margin: 0 auto 8px; }
.foes figcaption { font: 600 13px/1.2 var(--label); text-transform: uppercase; color: var(--muted); }

/* Three phones fanned out */
.fan { display: flex; justify-content: center; align-items: center; margin: 10px 0 40px; }
.fan .phone.land { width: 40%; flex: none; transition: transform .5s; }
.fan .phone.land:nth-child(1) { transform: rotate(-6deg) translate(12%, 8%); z-index: 1; }
.fan .phone.land:nth-child(2) { z-index: 2; transform: scale(1.08); }
.fan .phone.land:nth-child(3) { transform: rotate(6deg) translate(-12%, 8%); z-index: 1; }
.fan:hover .phone.land:nth-child(1) { transform: rotate(-8deg) translate(4%, 6%); }
.fan:hover .phone.land:nth-child(3) { transform: rotate(8deg) translate(-4%, 6%); }
@media (max-width: 700px) { .fan { flex-direction: column; gap: 6px; } .fan .phone.land { width: 100%; transform: none !important; } }

.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mini { background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); padding: 18px; transition: transform .2s; }
.mini:hover { transform: translateY(-4px); }
.mini h3 { font-size: 18px; color: var(--gold); }
.mini p { font-size: 15px; color: #d9d0dd; margin: 0; }
@media (max-width: 900px) { .cards4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cards4 { grid-template-columns: 1fr; } }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.tags span { font: 600 13px/1 var(--label); text-transform: uppercase; color: var(--text); background: var(--panel2); border: 2px solid var(--line); padding: 8px 11px; }

/* The pickup growing with the garage */
.cars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 40px; }
.cars figure { margin: 0; background: linear-gradient(180deg, #2e1f3c 0%, #241730 70%, #3a2a1e 70%, #2a1e14 100%); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); padding: 18px 12px 12px; text-align: center; }
.cars img { width: 100%; max-width: 252px; margin: 0 auto; transition: transform .3s; }
.cars figure:hover img { transform: translateX(8px); }
.cars figcaption { display: flex; align-items: center; gap: 10px; margin-top: 10px; text-align: left; font-size: 14px; color: #d9d0dd; }
.cars figcaption b { flex: none; width: 34px; height: 30px; display: grid; place-items: center; font: 700 16px/1 var(--pixel); background: var(--gold); color: var(--ink); border: 2px solid var(--ink); }
.center-phone { max-width: 760px; margin: 0 auto; }
@media (max-width: 900px) { .cars { grid-template-columns: 1fr 1fr; } }

/* The dog's breeds, running on the spot */
.breeds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 44px; }
.breeds figure { margin: 0; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); padding: 18px 12px 14px; text-align: center; }
.breeds img { height: 64px; width: auto; margin: 0 auto 12px; filter: drop-shadow(0 0 1px rgba(255, 236, 200, .55)); }
.breeds b { display: block; font: 600 17px/1.2 var(--pixel); text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.breeds span { font-size: 14px; color: #d9d0dd; }
@media (max-width: 900px) { .breeds { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .breeds { grid-template-columns: 1fr 1fr; } }

/* Six heroes: the face and the run */
.heroes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.heroes figure { margin: 0; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); padding: 16px 12px; text-align: center; transition: transform .2s; }
.heroes figure:hover { transform: translateY(-5px) rotate(-1deg); }
.heroes .duo { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 78px; margin-bottom: 12px; }
.heroes .duo img:first-child { height: 72px; width: auto; border: 2px solid var(--ink); background: #3a2a4a; }
.heroes .duo img:last-child { height: 60px; width: auto; }
.heroes b { display: block; font: 600 19px/1.2 var(--pixel); text-transform: uppercase; color: var(--gold); }
.heroes span { font-size: 14px; color: #d9d0dd; }
@media (max-width: 1000px) { .heroes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .heroes { grid-template-columns: 1fr 1fr; } }

/* The guns, laid out like on a table */
.guns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 26px 34px; margin-top: 44px; padding: 26px; background: #2a1e14; border: 3px solid var(--ink); box-shadow: inset 0 0 0 3px #3a2a1e, 0 6px 0 var(--ink); }
.guns img { height: 36px; width: auto; transition: transform .2s; }
.guns img:hover { transform: scale(1.15) rotate(-4deg); }
.guns img.in:nth-child(odd) { transition-delay: .05s; }

/* The five worlds */
.worlds { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.worlds figure { margin: 0; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); overflow: hidden; transition: transform .25s; }
.worlds figure:hover { transform: translateY(-6px); }
.worlds img { width: 100%; aspect-ratio: 186 / 108; object-fit: cover; border-bottom: 3px solid var(--ink); }
.worlds figcaption { padding: 14px; position: relative; }
.worlds em { position: absolute; top: -34px; right: 8px; font: 700 13px/1 var(--label); font-style: normal; text-transform: uppercase; background: var(--ink); color: var(--gold); padding: 6px 8px; border: 2px solid var(--gold); }
.worlds em.free { color: var(--green); border-color: var(--green); }
.worlds b { display: block; font: 600 18px/1.2 var(--pixel); text-transform: uppercase; color: var(--text); margin-bottom: 4px; }
.worlds span { font-size: 14px; color: #d9d0dd; }
@media (max-width: 1000px) { .worlds { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .worlds { grid-template-columns: 1fr 1fr; } }

/* The last call: the street again, and the stores */
section.final { position: relative; overflow: hidden; padding: 110px 0; border-top: 3px solid var(--ink); }
section.final .bg { position: absolute; inset: 0; background: url('street.jpg?v=5') center 60% / cover no-repeat; image-rendering: pixelated; filter: brightness(.45) saturate(1.1); }
section.final .wrap { position: relative; }
section.final h2 { font-size: clamp(32px, 5vw, 52px); color: var(--gold); text-shadow: 0 4px 0 var(--ink); }
section.final .narrow { color: #f0e8ee; }

/* Fair to play */
.fair { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; list-style: none; padding: 0; }
.fair li { background: var(--panel); border: 2px solid var(--line); padding: 18px; font-size: 16px; color: #d9d0dd; }
.fair li b { display: block; font: 600 18px/1.2 var(--pixel); color: var(--green); margin-bottom: 6px; text-transform: uppercase; }
@media (max-width: 900px) { .fair { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fair { grid-template-columns: 1fr; } }

/* ---- the release list ---- */
.launch-box { max-width: 640px; margin: 0 auto; }
.launch-form { background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); padding: 24px; }
.launch-form.flash { animation: flash 1.2s; }
@keyframes flash { 0%, 100% { box-shadow: 0 6px 0 var(--ink); } 30% { box-shadow: 0 6px 0 var(--ink), 0 0 0 6px var(--gold); } }
.lf-t { display: block; font: 600 22px/1.2 var(--pixel); color: var(--gold); margin-bottom: 14px; text-transform: uppercase; }
.lf-row { display: flex; gap: 12px; }
.lf-row input { flex: 1; min-width: 0; }
.lf-note { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.launch-form.done .lf-row { display: none; }
@media (max-width: 520px) { .lf-row { flex-direction: column; } }

/* ---- forms ---- */
input, textarea, select { font: 17px/1.3 var(--body); color: var(--text); background: var(--ink); border: 2px solid var(--line); padding: 13px 14px; width: 100%; border-radius: 0; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); }
textarea { min-height: 150px; resize: vertical; }
label { display: block; font: 700 13px/1 var(--label); text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.form-row { margin-top: 20px; }
.msg { margin-top: 16px; padding: 12px 14px; border: 2px solid; font-size: 16px; }
.msg.ok { border-color: var(--green); color: #c8f0a8; background: rgba(124, 196, 68, .1); }
.msg.err { border-color: var(--red); color: #ffc0b8; background: rgba(232, 70, 58, .1); }

/* ---- the text pages (privacy, terms, contact...): every language in the page, one shown ---- */
.doc { padding-top: 54px; padding-bottom: 80px; max-width: 820px; }
.doc h1 { color: var(--gold); }
.doc h2 { font-size: 24px; margin-top: 1.6em; color: var(--text); }
.doc h3 { font-size: 20px; margin-top: 1.3em; }
.doc p, .doc li { color: #ddd5e0; }
.doc li { margin-bottom: .45em; }
[data-lang] { display: none; }
[data-lang].on { display: block; }
html:not(.js) [data-lang="en"] { display: block; }
.facts { display: grid; grid-template-columns: 220px 1fr; gap: 10px 20px; margin: 0; }
.facts dt { font: 700 13px/1.6 var(--label); text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; }
@media (max-width: 600px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: 8px; } }
details.faq { background: var(--panel); border: 2px solid var(--line); margin-bottom: 10px; }
details.faq summary { cursor: pointer; padding: 14px 16px; font: 600 17px/1.3 var(--pixel); color: var(--text); list-style: none; text-transform: uppercase; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before { content: '+'; color: var(--gold); margin-right: 10px; }
details.faq[open] summary::before { content: '–'; }
details.faq p { padding: 0 16px 14px; margin: 0; }
.card { background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); padding: 24px; margin-top: 24px; }

/* ---- the footer ---- */
#foot { background: var(--ink); border-top: 3px solid var(--line); padding: 46px 0 30px; }
#foot .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
#foot .made { margin-top: 14px; max-width: 420px; color: var(--muted); font-size: 15px; }
#foot .links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
#foot .links a { font: 700 14px/1.6 var(--label); text-transform: uppercase; color: var(--text); text-decoration: none; }
#foot .links a:hover { color: var(--gold); }
#foot .mail { margin-top: 14px; color: var(--muted); font-size: 15px; }
@media (max-width: 700px) { #foot .cols { grid-template-columns: 1fr; } }

/* ---- a window (the release list's word) ---- */
.w-pop { position: fixed; inset: 0; z-index: 50; background: rgba(10, 6, 14, .72); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .25s; }
.w-pop.on { opacity: 1; }
.welcome { position: relative; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); padding: 30px 26px 24px; max-width: 440px; text-align: center; }
.welcome h2 { color: var(--gold); font-size: 30px; }
.w-close { position: absolute; right: 8px; top: 4px; background: none; border: 0; color: var(--muted); font-size: 30px; cursor: pointer; }

/* Blocks slide in as they come into view */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s; }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.in:nth-child(2) { transition-delay: .08s; } .js .reveal.in:nth-child(3) { transition-delay: .16s; } .js .reveal.in:nth-child(4) { transition-delay: .24s; } .js .reveal.in:nth-child(5) { transition-delay: .32s; } .js .reveal.in:nth-child(6) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .marquee .track, .chase .pack, .notify .bell { animation: none; } .chase { display: none; } }