/* ═══════════════════════════════════════════════════════════
   IMMUNO — play.immuno.fun · coming soon
   same locked palette as the landing: green #43e08a · cyan #57d0ff
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #101418; --bg-2: #151b21; --bg-3: #1b232b; --line: #232d37;
  --green: #43e08a; --green-dk: #1f9e5c; --cyan: #57d0ff; --cyan-dk: #2a89b8;
  --ink: #e8f1ee; --ink-dim: #93a6a0; --ink-faint: #5a6a66;
  --px: 6px;
  --disp: "Silkscreen", monospace;
  --body: "Chakra Petch", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--body);
  font-size: 17px; line-height: 1.6; overflow-x: hidden;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
}
::selection { background: var(--green); color: var(--bg); }
.mono { font-family: var(--mono); }
.t-green { color: var(--green); }
a { color: var(--cyan); text-decoration: none; }
img { max-width: 100%; height: auto; image-rendering: pixelated; }

/* atmosphere */
.scanlines {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.12) 3px 4px);
  mix-blend-mode: multiply;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(800px 600px at 50% -10%, rgba(67,224,138,.12), transparent 60%),
    radial-gradient(900px 700px at 85% 100%, rgba(87,208,255,.08), transparent 60%),
    var(--bg);
}
.bg-cells { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.bg-cells span {
  position: absolute; display: block; width: 9px; height: 9px;
  background: var(--green); opacity: .12;
  box-shadow: 14px 6px 0 rgba(87,208,255,.5);
  animation: drift 26s linear infinite;
}
.bg-cells span:nth-child(1) { left: 9%;  animation-delay: 0s; }
.bg-cells span:nth-child(2) { left: 24%; animation-delay: -8s; width: 6px; height: 6px; }
.bg-cells span:nth-child(3) { left: 41%; animation-delay: -14s; }
.bg-cells span:nth-child(4) { left: 63%; animation-delay: -4s; width: 7px; height: 7px; }
.bg-cells span:nth-child(5) { left: 78%; animation-delay: -19s; }
.bg-cells span:nth-child(6) { left: 91%; animation-delay: -11s; width: 6px; height: 6px; }
@keyframes drift {
  from { transform: translateY(105vh) rotate(0deg); }
  to   { transform: translateY(-8vh) rotate(360deg); }
}

/* layout */
.wrap {
  max-width: 660px; width: 100%; padding: 56px clamp(20px, 5vw, 32px);
  text-align: center;
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; }
.brand img { animation: bob 3.4s ease-in-out infinite; filter: drop-shadow(0 14px 34px rgba(67,224,138,.4)); }
@keyframes bob { 50% { transform: translateY(-10px); } }
.brand-word {
  font-family: var(--disp); font-size: 1.5rem; color: var(--ink); letter-spacing: .06em;
}

.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; letter-spacing: .12em; color: var(--green);
  border: 1.5px solid var(--green-dk); background: rgba(67,224,138,.07);
  padding: 6px 14px; border-radius: 2px; margin-bottom: 26px;
}
.dot {
  width: 7px; height: 7px; background: var(--green); border-radius: 50%;
  animation: blip 1.4s ease-in-out infinite;
}
@keyframes blip { 50% { opacity: .25; transform: scale(.8); } }

h1 {
  font-family: var(--disp); font-weight: 700; line-height: 1.16;
  font-size: clamp(1.6rem, 5.4vw, 2.6rem); letter-spacing: 0;
  margin-bottom: 18px; text-shadow: 0 0 40px rgba(67,224,138,.25);
}
.lede { color: var(--ink-dim); font-size: 1.02rem; margin-bottom: 34px; }
.lede em { color: var(--ink); font-style: normal; border-bottom: 2px solid var(--green); }

.ship-list {
  text-align: left; background: var(--bg-2); padding: 26px 24px; margin-bottom: 30px;
  box-shadow: inset 0 0 0 2px var(--line);
  clip-path: polygon(
    0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)),
    calc(100% - var(--px)) 100%, var(--px) 100%, var(--px) calc(100% - var(--px)),
    0 calc(100% - var(--px))
  );
}
.kicker { display: block; color: var(--green); font-size: .74rem; letter-spacing: .12em; margin-bottom: 12px; }
.ship-list ul { list-style: none; }
.ship-list li {
  position: relative; padding: 9px 0 9px 24px; font-size: .92rem;
  color: var(--ink-dim); border-top: 1px solid var(--line);
}
.ship-list li::before { content: "▸"; position: absolute; left: 0; color: var(--green); }
.ship-list b { color: var(--ink); }

.btn {
  display: inline-block; cursor: pointer; border: none;
  font-family: var(--disp); font-weight: 700; letter-spacing: .04em;
  padding: 14px 24px; font-size: .95rem; line-height: 1;
  transition: transform .08s ease, filter .15s ease;
  clip-path: polygon(
    0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)),
    calc(100% - var(--px)) 100%, var(--px) 100%, var(--px) calc(100% - var(--px)),
    0 calc(100% - var(--px))
  );
}
.btn:active { transform: translateY(2px); }
.btn-play {
  background: var(--green); color: #0a1410;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.28), 0 0 24px rgba(67,224,138,.35);
}
.btn-play:hover { filter: brightness(1.12); }
.btn-ghost { background: transparent; color: var(--cyan); box-shadow: inset 0 0 0 2px var(--cyan-dk); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--cyan); }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }

.socials { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.socials a { color: var(--ink-dim); font-size: .82rem; }
.socials a:hover { color: var(--green); }

.fineprint {
  font-size: .72rem; color: var(--ink-faint); line-height: 1.7;
  border-top: 1px solid var(--line); padding-top: 20px;
}

@media (max-width: 520px) { .cta .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .bg-cells, .scanlines, .brand img, .dot { animation: none; } }