/* Spirit of TNT : les couleurs et les polices du jeu (scripts/skin.gd). */

@font-face {
  font-family: "Russian Spring";
  src: url("fonts/RussianSpring.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Nouveau IBM";
  src: url("fonts/Nouveau_IBM.ttf") format("truetype");
  font-display: swap;
}

:root {
  --navy: #021431;      /* fond (BG_DEEP) */
  --field: #031d42;     /* case vide (BG) */
  --grid: #0b2c5e;      /* quadrillage */
  --wall: #5e087b;      /* murs */
  --edge: #15acff;      /* liseré des murs */
  --red: #e31b23;       /* titre */
  --gold: #ffd66b;      /* score */
  --cream: #fffbd6;     /* fond du logo */
  --text: #e8eefc;
  --muted: #b4c0dc;
  --display: "Russian Spring", "Arial Black", sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --hud: "Nouveau IBM", ui-monospace, monospace;
  --measure: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--cream); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

code, kbd { font-family: var(--hud); font-size: .95em; }
code { color: #9fdcff; }
kbd {
  display: inline-block;
  min-width: 1.9em;
  padding: .05em .45em;
  text-align: center;
  color: var(--text);
  background: var(--field);
  border: 1px solid rgba(21, 172, 255, .45);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .12), inset -2px -2px 0 rgba(0, 0, 0, .45);
  border-radius: 2px;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0 0 .6em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.12; color: var(--cream); padding-top: .12em; }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--cream); margin-top: 1.4em; }
p { margin: 0 0 1em; }

/* accents dessinés au-dessus des lettres de la police des titres (voir script.js) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.acc { position: relative; }
.acc::before, .acc::after { position: absolute; background: currentColor; }
.acc.acute::after { content: ""; width: .3em; height: .09em; left: 32%; top: -.04em; transform: rotate(-24deg); }
.acc.grave::after { content: ""; width: .3em; height: .09em; left: 8%; top: -.04em; transform: rotate(24deg); }
.acc.circ::before { content: ""; width: .22em; height: .09em; left: 6%; top: -.03em; transform: rotate(-32deg); }
.acc.circ::after { content: ""; width: .22em; height: .09em; left: 36%; top: -.03em; transform: rotate(32deg); }
.acc.trema::before { content: ""; width: .11em; height: .11em; left: 12%; top: -.06em; }
.acc.trema::after { content: ""; width: .11em; height: .11em; left: 58%; top: -.06em; }
.acc.ced::after { content: ""; width: .1em; height: .15em; left: 42%; bottom: .02em; }

/* ------------------------------------------------------------ barre du haut */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .55rem clamp(1rem, 3vw, 2.5rem);
  background: rgba(2, 20, 49, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--grid);
}
.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--red);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--red); }
.bar nav {
  display: flex;
  gap: 1.15rem;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: .95rem;
}
.bar nav a { color: var(--muted); text-decoration: none; white-space: nowrap; padding: .2rem 0; }
.bar nav a:hover { color: var(--cream); }
.bar nav .nav-dl { color: var(--gold); }

/* ------------------------------------------------------------ accueil */

/* le texte à gauche ; la capture à droite, qui file jusqu'au bord de l'écran */
.hero {
  display: grid;
  grid-template-columns: minmax(18rem, 25rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem) max(clamp(1rem, 4vw, 3rem), calc((100vw - 1240px) / 2 + 3rem));
}
.hero h1 {
  font-size: clamp(3.4rem, 6.4vw, 6rem);
  line-height: .86;
  color: var(--red);
  margin-bottom: .4em;
}
.lead { font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.5; max-width: 34em; color: var(--text); }
.facts { color: var(--muted); font-size: .95rem; max-width: 40em; margin-top: 1.6rem; }

.actions, .downloads { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* les boutons ont le biseau des blocs du jeu */
.btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: .75rem 1.15rem;
  min-height: 3.2rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
  background: var(--field);
  border: 1px solid rgba(21, 172, 255, .45);
  border-radius: 2px;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .10), inset -3px -3px 0 rgba(0, 0, 0, .40);
}
.btn small { font-weight: 400; font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.btn:hover { color: var(--cream); border-color: var(--edge); }
.btn:active { box-shadow: inset -3px -3px 0 rgba(255, 255, 255, .10), inset 3px 3px 0 rgba(0, 0, 0, .40); }
.btn-main {
  color: #1f1300;
  background: var(--gold);
  border-color: #fff0b8;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .55), inset -3px -3px 0 rgba(120, 72, 0, .45);
}
.btn-main small { color: #4d3800; }
.btn-main:hover { color: #000; background: #ffe08a; }
.btn-main:active { box-shadow: inset -3px -3px 0 rgba(255, 255, 255, .55), inset 3px 3px 0 rgba(120, 72, 0, .45); }

/* la capture : un vrai duel en Néon, à la largeur de la page */
.hero-shot { margin: 0; }
.hero-shot a {
  display: block;
  line-height: 0;
  background: var(--field);
  border: 1px solid rgba(21, 172, 255, .55);
  border-right: 0;
  box-shadow: 0 0 56px rgba(46, 180, 255, .2), 0 24px 60px rgba(0, 0, 0, .55);
}
.hero-shot a:hover { border-color: var(--edge); }
.hero-shot img { display: block; width: 100%; height: auto; }
.hero-shot figcaption { margin-top: .9rem; padding-right: clamp(1rem, 4vw, 3rem); font-size: .92rem; color: var(--muted); }

/* le terrain jouable, à côté des touches */
.try {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: 2rem;
}
.try .keys { margin-top: 0; }
.try-field { margin: 0; }
.field-wrap { width: min(340px, 88vw); }
#field { display: block; margin: 0 auto; cursor: pointer; }
#field:focus-visible { outline-offset: 6px; }
.try-field figcaption {
  max-width: 21rem;
  margin: 1rem auto 0;
  font-size: .88rem;
  color: var(--muted);
  text-align: center;
}

/* le sol du terrain, en briques des murs, sous l'accueil */
.hero + .band::before {
  content: "";
  display: block;
  height: 12px;
  margin: 0 calc(50% - 50vw) clamp(3rem, 6vw, 4.5rem);
  background:
    repeating-linear-gradient(90deg, var(--wall) 0 22px, rgba(21, 172, 255, .35) 22px 24px);
}

/* ------------------------------------------------------------ sections */

.band {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem);
}
.text { max-width: var(--measure); }
.notes { margin-top: 2rem; }
.notes strong, .text strong { color: var(--cream); }

.shots { display: grid; gap: clamp(.8rem, 2vw, 1.5rem); margin: 2rem 0; }
.shots.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shots.one { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.shots a { display: block; line-height: 0; border: 1px solid var(--grid); background: var(--field); }
.shots a:hover { border-color: var(--edge); }
.shots img { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------ les jeux */

.strip {
  display: flex;
  gap: clamp(.6rem, 2vw, 1.4rem);
  align-items: flex-end;
  margin: 2rem 0;
  overflow-x: auto;
}
.strip img { height: clamp(220px, 32vw, 340px); width: auto; flex: none; }

.table-wrap { overflow-x: auto; }
.games { border-collapse: collapse; width: 100%; max-width: 980px; }
.games th, .games td { text-align: left; vertical-align: top; padding: .7rem 1.2rem .7rem 0; border-bottom: 1px solid var(--grid); }
.games thead th { font-weight: 600; color: var(--muted); font-size: .9rem; }
.games tbody th { font-weight: 600; color: var(--cream); white-space: nowrap; }
.games td:nth-child(2) { color: var(--gold); font-family: var(--hud); font-size: .95rem; white-space: nowrap; }

/* ------------------------------------------------------------ le fichier .sts */

.sts-box {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr);
  gap: 1.5rem;
  margin: 2rem 0;
  align-items: start;
}
.sts {
  margin: 0;
  padding: 1.1rem 0;
  overflow-x: auto;
  background: var(--field);
  border: 1px solid var(--grid);
  font: 400 .98rem/1.6 var(--hud);
  color: var(--muted);
}
.sts code { color: inherit; font-size: inherit; display: block; }
.sts [data-note] { display: block; padding: 0 1.2rem; cursor: help; border-left: 3px solid transparent; }
.sts [data-note]:hover, .sts [data-note].on { background: rgba(21, 172, 255, .14); border-left-color: var(--edge); }
.sts [data-note]:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.sts .sec { color: var(--gold); }
.sts .gap { display: block; height: .8em; }
.sts b { font-weight: 400; color: #9fdcff; }
.sts i { font-style: normal; color: var(--cream); }
.sts-note {
  position: sticky;
  top: 5rem;
  margin: 0;
  padding: 1rem 1.2rem;
  min-height: 7rem;
  background: var(--field);
  border: 1px solid var(--wall);
  box-shadow: inset 0 0 0 1px rgba(21, 172, 255, .25);
  color: var(--text);
}

/* ------------------------------------------------------------ 1996 */

.band-1996 { max-width: none; background: #000; }
.band-1996 > * { max-width: calc(1240px - 2 * clamp(1rem, 4vw, 3rem)); margin-left: auto; margin-right: auto; }
.band-1996 h2 { color: #ffcd63; }
.band-1996 .shots a { border-color: #3a0d0d; }

/* ------------------------------------------------------------ touches */

.keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.keys table {
  border-collapse: collapse;
  width: 100%;
  background: var(--field);
  border: 1px solid var(--grid);
}
.keys caption {
  caption-side: top;
  text-align: left;
  font-family: var(--hud);
  color: var(--gold);
  padding: 0 0 .5rem;
}
.keys th, .keys td { text-align: left; vertical-align: top; padding: .5rem .8rem; border-bottom: 1px solid var(--grid); font-size: .95rem; }
.keys tbody th { font-weight: 400; white-space: nowrap; }
.keys thead th { color: var(--muted); font-weight: 600; font-size: .85rem; }

/* ------------------------------------------------------------ téléchargement, pied */

.band-dl .downloads .btn { min-width: 12rem; }

.foot {
  max-width: 1240px;
  margin: 0 auto;
  padding: 3rem clamp(1rem, 4vw, 3rem) 4rem;
  border-top: 1px solid var(--grid);
  color: var(--muted);
  font-size: .92rem;
}
.foot p { max-width: 72ch; }
.foot img { display: block; }
.foot .small { font-size: .82rem; }

/* ------------------------------------------------------------ loupe */

dialog#loupe {
  max-width: 96vw;
  max-height: 96vh;
  padding: 0;
  border: 1px solid var(--edge);
  background: var(--navy);
  color: var(--text);
  cursor: zoom-out;
}
dialog#loupe::backdrop { background: rgba(2, 20, 49, .9); }
dialog#loupe img { display: block; max-width: 96vw; max-height: calc(96vh - 3rem); }
dialog#loupe p { margin: 0; padding: .6rem 1rem; font-size: .92rem; }
a.zoom { cursor: zoom-in; }

/* ------------------------------------------------------------ petits écrans */

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-right: clamp(1rem, 4vw, 3rem); }
  .hero h1 { font-size: clamp(3.4rem, 13vw, 6rem); }
  .hero-shot a { border-right: 1px solid rgba(21, 172, 255, .55); }
  .hero-shot figcaption { padding-right: 0; }
  .try { grid-template-columns: minmax(0, 1fr); }
  .try-field { justify-self: center; }
  .sts-box { grid-template-columns: minmax(0, 1fr); }
  .sts-note { position: static; min-height: 0; order: -1; }
}
@media (max-width: 640px) {
  .bar { gap: .8rem; }
  .brand { font-size: 1.1rem; }
  .shots.two { grid-template-columns: minmax(0, 1fr); }
  .actions .btn, .downloads .btn { flex: 1 1 100%; }
  /* le tableau des jeux devient une liste */
  .games thead { display: none; }
  .games tr { display: block; padding: .8rem 0; border-bottom: 1px solid var(--grid); }
  .games th, .games td { display: block; padding: 0; border: 0; }
  .games tbody th { white-space: normal; }
  .games td:nth-child(2) { margin: .15rem 0 .3rem; }
}

.table-wrap + .text { margin-top: 2rem; }