/* Hématome - univers Atari (1977). Woodgrain, arc-en-ciel, CRT 8-bit. */

:root {
  --at-bg: #101018;
  --at-fg: #f4f1e8;
  --at-dim: #b8b2a2;
  --at-red: #d94f2b;
  --at-orange: #e8862d;
  --at-yellow: #ecc340;
  --at-green: #4f9d55;
  --at-blue: #3f6fb5;
  --at-purple: #7a4fa0;
  --at-wood-1: #5a3a24;
  --at-wood-2: #7a4f2e;
  --at-black: #17171f;
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--at-bg);
  color: var(--at-fg);
  font-family: "Press Start 2P", "Courier New", monospace;
  line-height: 1.7;
  font-size: 13px;
}

.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 5px),
    radial-gradient(ellipse at center, transparent 65%, rgba(0, 0, 0, 0.5) 100%);
}

/* -- Console woodgrain ------------------ */
.at-woodgrain {
  background:
    repeating-linear-gradient(93deg,
      var(--at-wood-1) 0 14px, var(--at-wood-2) 14px 22px,
      #6b432a 22px 36px, var(--at-wood-1) 36px 52px);
  padding: 22px 16px;
  border-bottom: 6px solid var(--at-black);
}

.at-faceplate {
  max-width: 960px;
  margin: 0 auto;
  background: var(--at-black);
  border: 3px solid #000;
  padding: 20px 24px;
  box-shadow: inset 0 0 0 2px #33333d, 0 6px 0 rgba(0, 0, 0, 0.4);
}

.at-brand { font-size: clamp(18px, 4vw, 28px); letter-spacing: 0.1em; }
.at-tm { font-size: 0.5em; vertical-align: super; }
.at-model { color: var(--at-dim); font-size: 10px; margin-top: 10px; letter-spacing: 0.08em; }

.at-switches {
  display: flex;
  gap: 24px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.at-switch {
  font-size: 8px;
  color: var(--at-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.1em;
}

.at-switch i {
  width: 26px;
  height: 12px;
  background: #444450;
  border: 2px solid #000;
  display: inline-block;
  position: relative;
}

.at-switch i::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 10px;
  height: 6px;
  background: #c9c4b4;
}

.at-switch:first-child i::after { left: auto; right: 1px; background: var(--at-red); }

/* -- Sections écran --------------------- */
.at-screen {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 24px;
  text-align: center;
}

.at-hero { padding-top: 56px; }

.at-rainbow {
  display: flex;
  flex-direction: column;
  max-width: 420px;
  margin: 0 auto 36px;
}

.at-rainbow i { height: 8px; }
.at-rainbow i:nth-child(1) { background: var(--at-red); width: 100%; }
.at-rainbow i:nth-child(2) { background: var(--at-orange); width: 92%; margin: 0 auto; }
.at-rainbow i:nth-child(3) { background: var(--at-yellow); width: 84%; margin: 0 auto; }
.at-rainbow i:nth-child(4) { background: var(--at-green); width: 76%; margin: 0 auto; }
.at-rainbow i:nth-child(5) { background: var(--at-blue); width: 68%; margin: 0 auto; }
.at-rainbow i:nth-child(6) { background: var(--at-purple); width: 60%; margin: 0 auto; }

.at-score { font-size: 10px; color: var(--at-dim); margin-bottom: 28px; letter-spacing: 0.15em; }

.at-logo {
  font-size: clamp(26px, 7vw, 56px);
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--at-yellow);
  text-shadow:
    3px 3px 0 var(--at-red),
    6px 6px 0 rgba(0, 0, 0, 0.6);
}

.at-logo-small { font-size: clamp(20px, 5vw, 36px); }

.at-sub {
  margin-top: 22px;
  font-size: clamp(10px, 2.4vw, 13px);
  color: var(--at-fg);
  letter-spacing: 0.1em;
}

.at-pitch {
  max-width: 640px;
  margin: 26px auto 0;
  font-family: "Courier New", monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--at-dim);
  line-height: 1.6;
}

.at-start {
  display: inline-block;
  margin-top: 36px;
  padding: 16px 22px;
  min-height: 44px;
  background: var(--at-red);
  color: var(--at-fg);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  border: 3px solid #000;
  box-shadow: 0 6px 0 #7c2c15;
  cursor: pointer;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.at-start:hover { transform: translateY(2px); box-shadow: 0 4px 0 #7c2c15; }
.at-start:active { transform: translateY(6px); box-shadow: 0 0 0 #7c2c15; }
.at-start:focus-visible { outline: 4px solid var(--at-yellow); outline-offset: 3px; }

.at-start-alt { background: var(--at-blue); box-shadow: 0 6px 0 #24406b; }
.at-start-alt:hover { box-shadow: 0 4px 0 #24406b; }
.at-start-alt:active { box-shadow: 0 0 0 #24406b; }

.at-blink {
  margin-top: 44px;
  font-size: 9px;
  color: var(--at-dim);
  letter-spacing: 0.15em;
  animation: at-blink 1.4s steps(1) infinite;
}

@keyframes at-blink { 50% { opacity: 0.25; } }

/* -- Cartouches ------------------------- */
.at-cartridges {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 24px 72px;
}

.at-section-title {
  font-size: clamp(12px, 3vw, 16px);
  color: var(--at-fg);
  text-align: center;
  margin-bottom: 44px;
  letter-spacing: 0.1em;
  line-height: 1.8;
}

.at-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.at-cart {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--at-black);
  border: 3px solid #000;
  box-shadow: inset 0 0 0 2px #33333d, 0 8px 0 rgba(0, 0, 0, 0.45);
  text-decoration: none;
  color: var(--at-fg);
  padding: 14px;
  cursor: pointer;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

.at-cart:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 2px #33333d, 0 14px 0 rgba(0, 0, 0, 0.45); }
.at-cart:focus-visible { outline: 4px solid var(--at-yellow); outline-offset: 3px; }

.at-cart-label {
  background:
    linear-gradient(140deg,
      hsl(var(--cart-hue), 62%, 46%) 0%,
      hsl(var(--cart-hue), 62%, 34%) 100%);
  border: 2px solid #000;
  padding: 16px 14px;
  text-align: left;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.at-cart-num { font-size: 9px; opacity: 0.85; letter-spacing: 0.2em; }
.at-cart-name { font-size: 13px; line-height: 1.6; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }

.at-cart-desc {
  font-family: "Courier New", monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--at-dim);
  text-align: left;
  padding: 14px 4px 10px;
  flex-grow: 1;
  line-height: 1.5;
}

.at-cart-url {
  font-size: 9px;
  color: var(--at-yellow);
  text-align: left;
  padding: 0 4px 4px;
  letter-spacing: 0.08em;
}

/* -- Player 1 --------------------------- */
.at-player { text-align: left; }

.at-player-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 36px;
  align-items: start;
}

.at-sprite { display: flex; justify-content: center; padding-top: 8px; }

/* Bonhomme pixel en box-shadow (sprite 8-bit) */
.at-pixelman {
  width: 12px;
  height: 12px;
  background: transparent;
  box-shadow:
    24px 0 var(--at-yellow), 36px 0 var(--at-yellow), 48px 0 var(--at-yellow),
    24px 12px var(--at-yellow), 36px 12px var(--at-yellow), 48px 12px var(--at-yellow),
    36px 24px var(--at-orange),
    12px 36px var(--at-red), 24px 36px var(--at-red), 36px 36px var(--at-red), 48px 36px var(--at-red), 60px 36px var(--at-red),
    0 48px var(--at-red), 36px 48px var(--at-red), 72px 48px var(--at-red),
    36px 60px var(--at-red),
    24px 72px var(--at-blue), 48px 72px var(--at-blue),
    24px 84px var(--at-blue), 48px 84px var(--at-blue),
    12px 96px var(--at-blue), 60px 96px var(--at-blue);
}

.at-player p {
  font-family: "Courier New", monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--at-dim);
  margin-bottom: 16px;
  line-height: 1.6;
}

.at-player strong { color: var(--at-yellow); }

.at-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.at-stats div {
  border: 2px solid #33333d;
  background: var(--at-black);
  padding: 14px 18px;
  min-width: 140px;
}

.at-stats dt { font-size: 8px; color: var(--at-dim); letter-spacing: 0.12em; margin-bottom: 10px; }
.at-stats dd { font-size: 20px; color: var(--at-green); }

/* -- Game over / contact ---------------- */
.at-gameover { padding-bottom: 90px; }
.at-gameover .at-logo { color: var(--at-red); text-shadow: 3px 3px 0 var(--at-purple), 6px 6px 0 rgba(0,0,0,0.6); }

.at-cta-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.at-footer {
  border-top: 4px solid var(--at-black);
  padding: 22px 16px calc(80px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 8px;
  color: var(--at-dim);
  letter-spacing: 0.15em;
  line-height: 1.9;
}

@media (max-width: 640px) {
  .at-player-grid { grid-template-columns: 1fr; }
  .at-sprite { justify-content: flex-start; padding-left: 8px; }
  .at-switches { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .at-blink { animation: none; }
  .at-start, .at-cart { transition: none; }
}