/* danielemarino.net/nerd — campo di Space Invaders.
   Un mondo a parte rispetto al vocabolario: nero profondo, pixel interi, un solo carattere bitmap.
   L'arancio del logo resta: è il colore dell'astronave (il fumetto dm) e dei colpi. */

@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/press-start-2p.woff2) format("woff2"); }

:root {
  --space: #07070d;
  --pixel: #e9e6ff;      /* bianco fosforo */
  --dim: #8d89b3;        /* testo secondario, 6.4:1 sul nero */
  --ship: #dd5236;       /* arancio del logo */
  --alien-a: #6ef2c9;    /* verde acqua */
  --alien-b: #ffd166;    /* giallo */
  --alien-c: #ff7ad9;    /* magenta */
  --px: clamp(3px, 0.42vw, 6px); /* lato di un pixel degli sprite */
  --font: "Press Start 2P", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--space);
  color: var(--pixel);
  font: 400 0.75rem/1.8 var(--font);
  overflow: hidden;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* cielo: stelle fisse da un piccolo SVG ripetuto */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="420" height="420"%3E%3Crect x="50" y="76" width="1" height="1" fill="%23fff"/%3E%3Crect x="302" y="38" width="1" height="1" fill="%23fff"/%3E%3Crect x="160" y="260" width="1" height="1" fill="%23cfcaff"/%3E%3Crect x="370" y="185" width="1" height="1" fill="%23fff"/%3E%3Crect x="231" y="126" width="1" height="1" fill="%239e98d6"/%3E%3Crect x="92" y="336" width="1" height="1" fill="%23fff"/%3E%3Crect x="269" y="361" width="1" height="1" fill="%239e98d6"/%3E%3Crect x="17" y="202" width="1" height="1" fill="%23cfcaff"/%3E%3C/svg%3E") 0 0 / 420px 420px;
  opacity: 0.8;
}

::selection { background: var(--ship); color: var(--space); }
:focus-visible { outline: 2px dashed var(--pixel); outline-offset: 4px; }
a { color: var(--pixel); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- HUD ---------- */

.hud {
  position: fixed; inset: 0 0 auto; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 3rem) 0;
  text-transform: uppercase;
}
.back { text-decoration: none; color: var(--dim); }
.back:hover { color: var(--pixel); }
.score { margin: 0; }
.score span { color: var(--ship); }

/* ---------- campo ---------- */

.field { position: fixed; inset: 0; }

.fleet {
  position: absolute; left: 50%; top: clamp(5rem, 14vh, 9rem);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.5rem, 4vh, 3rem) clamp(1.25rem, 4vw, 4rem);
  width: min(92vw, 62rem);
  translate: calc(-50% + var(--sway, 0px)) 0;
}

.alien {
  display: grid; justify-items: center; gap: 0.9rem;
  padding: 0.5rem; border: 0; background: none; cursor: pointer;
  color: var(--pixel); font: inherit; text-transform: uppercase;
}
.alien svg { width: calc(var(--px) * 12); height: calc(var(--px) * 8); fill: currentColor; shape-rendering: crispEdges; overflow: visible; }
.alien[data-sprite="a"] svg { color: var(--alien-a); }
.alien[data-sprite="b"] svg { color: var(--alien-b); }
.alien[data-sprite="c"] svg { color: var(--alien-c); }
.alien .f2 { display: none; }
.fleet.is-step .alien .f1 { display: none; }
.fleet.is-step .alien .f2 { display: inline; }
.alien-name { font-size: 0.7rem; white-space: nowrap; }
.alien:hover .alien-name, .alien:focus-visible .alien-name { color: var(--ship); }

.alien.is-hit { pointer-events: none; }
.alien.is-hit svg { color: #fff !important; animation: pop 0.28s steps(3) forwards; }
.alien.is-hit .alien-name { visibility: hidden; }
.alien.is-gone { visibility: hidden; }
@keyframes pop { 0% { scale: 1; } 60% { scale: 1.5; opacity: 1; } 100% { scale: 1.8; opacity: 0; } }
.alien.is-back { animation: warp 0.4s steps(4) both; }
@keyframes warp { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }

/* astronave: il fumetto dm in pixel */
.ship {
  position: absolute; bottom: clamp(5.5rem, 13vh, 7rem); left: 0;
  width: calc(var(--px) * 15); height: calc(var(--px) * 10);
  translate: calc(var(--x, 50vw) - 50%) 0;
  color: var(--ship);
}
.ship svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }

.shot {
  position: absolute; left: 0; top: 0;
  width: var(--px); height: calc(var(--px) * 4);
  background: var(--ship);
  box-shadow: 0 0 0 1px rgb(221 82 54 / 0.35);
}

.hint {
  position: absolute; left: 0; right: 0; bottom: clamp(2rem, 5vh, 3rem); margin: 0;
  text-align: center; color: var(--dim); font-size: 0.65rem; text-transform: uppercase;
  transition: opacity 0.6s;
}
.hint.is-done { opacity: 0; }

/* comandi touch, solo dove serve */
.pad { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hint { display: none; }
  .pad {
    position: fixed; inset: auto 0 0; z-index: 3;
    display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 0.75rem;
    padding: 0.75rem clamp(1rem, 4vw, 2rem) max(1rem, env(safe-area-inset-bottom));
  }
  .pad button {
    display: grid; place-items: center; height: 3.75rem;
    border: 2px solid var(--dim); background: var(--space); color: var(--pixel);
    font: inherit; text-transform: uppercase; touch-action: none;
  }
  .pad svg { width: 1.5rem; height: 1.5rem; fill: currentColor; shape-rendering: crispEdges; }
  .pad .pad-fire { border-color: var(--ship); color: var(--ship); }
  .pad button.is-held { background: var(--pixel); color: var(--space); }
  .ship { bottom: 7rem; }
}

/* ---------- finestra (lightbox) ---------- */

.box {
  width: min(92vw, 34rem); max-height: 82vh; overflow: auto;
  padding: 2rem clamp(1.25rem, 4vw, 2.25rem) 1.5rem;
  border: 4px solid var(--pixel); background: var(--space); color: var(--pixel);
  box-shadow: 0 0 0 4px var(--space), 0 0 0 8px var(--ship);
  font: inherit; line-height: 2;
}
.box::backdrop { background: rgb(7 7 13 / 0.8); }
.box[open] { animation: boxin 0.18s steps(3) both; }
@keyframes boxin { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
.box-close { position: absolute; top: 0.75rem; right: 0.75rem; margin: 0; }
.box-close button { width: 2.25rem; height: 2.25rem; border: 2px solid var(--dim); background: none; color: var(--pixel); font: inherit; cursor: pointer; }
.box-close button:hover { border-color: var(--ship); color: var(--ship); }
.box-title { margin: 0 2.5rem 1.25rem 0; font-size: 1rem; line-height: 1.5; color: var(--ship); text-transform: uppercase; }
.box-body p { margin: 0 0 1.25rem; }
.box-foot { margin: 1.5rem 0 0; color: var(--dim); font-size: 0.6rem; text-transform: uppercase; }

.row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn {
  display: inline-block; padding: 0.6rem 0.9rem;
  border: 2px solid var(--pixel); background: none; color: var(--pixel);
  font: inherit; text-decoration: none; text-transform: uppercase; cursor: pointer;
}
.btn:hover { background: var(--pixel); color: var(--space); }

.yoda { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-left: 4px solid var(--alien-a); color: var(--alien-a); font-size: 0.85rem; line-height: 2.1; }
.ip { display: block; width: 100%; height: 4.5rem; margin: 0 0 1.25rem; border: 2px dashed var(--dim); background: #fff; }
.griffin { margin: 0; display: grid; justify-items: center; gap: 1rem; text-align: center; }
.griffin img { width: 7rem; height: auto; image-rendering: auto; }

@media (prefers-reduced-motion: reduce) {
  .alien.is-hit svg, .alien.is-back, .box[open] { animation: none; }
  .hint { transition: none; }
}