/* Pokémon Hardlife — site de l'alpha.
   Une rue de nuit sous un réverbère au sodium, et la boîte de dialogue de
   Pokémon Rouge Feu / Vert Feuille, reprise telle quelle du jeu. */

@font-face {
  font-family: "Power Green";
  src: url("fonts/power-green.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: dark;

  --night: #141b2d;
  --night-raised: #1b2439;
  --night-line: #2c3752;
  --ink: #ece7dc;
  --ink-muted: #a3abbf;
  --sodium: #f0a53a;
  --sodium-hot: #ffbe5c;
  --sodium-ink: #22160a;
  --ink-bright: #fff3dc;

  /* Couleurs de la boîte FRLG (MessageConfig::DARK_TEXT du jeu). */
  --box-text: #505058;
  --box-shadow: #a0a0a8;

  --mafia: #c8463a;

  /* Provisoire : les polices du système, en attendant des fichiers de police
     servis par le site lui-même (aucune police chargée depuis Google, pour
     ne transmettre l'adresse IP des visiteurs à personne). Bahnschrift,
     livrée avec Windows 10 et 11, a une largeur variable : --display-stretch
     la resserre pour les titres. */
  --display: "Bahnschrift", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --display-stretch: 75%;
  --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --pixel: "Power Green", ui-monospace, monospace;

  --measure: 68ch;
  --page: 70rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img { max-width: 100%; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a { color: var(--sodium); text-underline-offset: 0.18em; }
a:hover { color: var(--sodium-hot); }

:focus-visible {
  outline: 3px solid var(--sodium);
  outline-offset: 3px;
}

::selection { background: var(--sodium); color: var(--sodium-ink); }

/* Firefox lit par la même teinte que le reste du site ; Chrome et Safari
   suivent leur propre syntaxe pour la même barre. */
html { scrollbar-color: var(--night-line) var(--night); }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--night); }
::-webkit-scrollbar-thumb {
  background: var(--night-line);
  border: 3px solid var(--night);
  border-radius: 7px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--sodium);
  color: var(--sodium-ink);
  font-weight: 700;
}
.skip:focus { top: 0.75rem; }

/* --- En-tête -------------------------------------------------------------- */

.site-head {
  position: relative;
  z-index: 2;
  padding-block: 1.1rem;
}

.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

/* Accueil : l'en-tête flotte sur la rue, qui commence en haut de la page quelle
   que soit la hauteur de l'en-tête (une ligne sur ordinateur, deux sur téléphone). */
.site-head.over {
  position: absolute;
  inset: 0 0 auto 0;
}

.brand {
  font-family: var(--display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 700;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--sodium);
}

/* --- Titres et texte ------------------------------------------------------ */

h1, h2, h3 {
  font-family: var(--display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.005em;
  margin: 0;
}

h2 {
  font-size: clamp(2.6rem, 6vw, 4.25rem);
  margin-bottom: 1.5rem;
}

h3 {
  font-size: 1.75rem;
  margin-bottom: 0.4rem;
}

p { margin: 0 0 1rem; max-width: var(--measure); }

.lede {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink);
}

.muted { color: var(--ink-muted); }

/* --- Boutons -------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.6rem 1.35rem;
  border: 2px solid var(--sodium);
  border-radius: 4px;
  background: var(--sodium);
  color: var(--sodium-ink);
  font: 700 1.05rem/1.2 var(--body);
  text-decoration: none;
  cursor: pointer;
}
.button:hover {
  background: var(--sodium-hot);
  border-color: var(--sodium-hot);
  color: var(--sodium-ink);
}

.button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--night-line);
}
.button.secondary:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
}

.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Accueil : le réverbère ----------------------------------------------- */

.street {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 4.2rem;
  min-height: min(100svh, 62rem);
  display: flex;
  flex-direction: column;
}

.street::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, #111726 0%, var(--night) 45%, #10162a 100%);
}

/* Le réverbère : la tête en pixels (x3, comme la boîte), le poteau en CSS
   jusqu'au trottoir, derrière la boîte de dialogue. */
.lamp {
  --lamp-top: 5.5rem;
  position: absolute;
  top: 0;
  bottom: 0;
  right: max(var(--gutter), calc((100% - var(--page)) / 2 + 3rem));
  width: 120px;
  z-index: -1;
  pointer-events: none;
}

.lamp svg {
  position: absolute;
  top: var(--lamp-top);
  right: 0;
}

.lamp::after {
  content: "";
  position: absolute;
  top: calc(var(--lamp-top) + 72px);
  bottom: 0;
  right: 6px;
  width: 12px;
  background: linear-gradient(90deg, #34415f 0 3px, #1f2940 3px);
}

/* La lumière, centrée sur le verre (à 66 px du bord droit de la tête), et la
   flaque qu'elle pose sur le trottoir. */
.lamp::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 66px;
  width: min(140vw, 80rem);
  transform: translateX(50%);
  background:
    radial-gradient(ellipse 34% 42% at 50% calc(var(--lamp-top) + 40px), rgba(255, 196, 110, 0.36), rgba(240, 165, 58, 0.1) 55%, transparent 78%),
    radial-gradient(ellipse 30% 9% at 50% 100%, rgba(240, 165, 58, 0.2), transparent 72%);
}

.street-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 3rem 2rem;
}

.street-title h1 {
  font-size: clamp(4.5rem, 17vw, 12.5rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  /* La lueur du réverbère (.lamp::before) éclaire déjà la scène derrière le
     mot ; une couleur pleine, plus chaude que le texte courant, suffit à le
     poser dedans sans lui faire porter un dégradé. */
  color: var(--ink-bright);
}

.street-title h1 small {
  display: block;
  font-size: 0.3em;
  line-height: 1;
  letter-spacing: 0.04em;
  margin-bottom: 0.08em;
}

.street-title .lede { max-width: 38ch; }

.lede-punch {
  max-width: 38ch;
  margin-top: -0.5rem;
  font-weight: 700;
  color: var(--ink-bright);
}

/* --- La boîte de dialogue FRLG -------------------------------------------- */
/* textbox.png : le cadre « speech frlg » du jeu à mi-échelle (40 x 30),
   coins de 15 x 14. Agrandi en pixels francs, x3, x2 sur téléphone. */

.dialogue {
  --scale: 3;
  position: relative;
  display: block;
  /* L'image a une marge transparente (5 px de côté, 3 en haut) : on la
     déborde pour que le cadre visible s'aligne sur la colonne de texte. */
  width: calc(100% + var(--scale) * 10px);
  margin: 0 calc(var(--scale) * -5px) clamp(1.5rem, 5vh, 3.5rem);
  padding: 0;
  min-height: calc(var(--scale) * 30px + 2 * 1.35em);
  border: 0;
  border-style: solid;
  border-width: calc(var(--scale) * 14px) calc(var(--scale) * 15px);
  /* Largeur 1 = celle de border-width, donc la tranche agrandie x --scale.
     (auto garderait la taille d'origine, en pixels de l'image.) */
  border-image: url("textbox.png") 14 15 14 15 fill / 1 / 0 stretch;
  image-rendering: pixelated;
  background: none;
  color: var(--box-text);
  font-family: var(--pixel);
  font-size: calc(var(--scale) * 13.5px);
  line-height: 1.2;
  text-align: left;
  text-shadow: calc(var(--scale) * 1px) calc(var(--scale) * 1px) 0 var(--box-shadow);
  cursor: pointer;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

.dialogue:focus-visible { outline-offset: 6px; }

.dialogue-text {
  display: block;
  /* Deux lignes, comme en jeu : la boîte ne change pas de taille en tapant. */
  min-height: 2.4em;
  padding-right: 0.8em;
}

.dialogue-text.is-stacked { display: grid; }
.dialogue-text.is-stacked > * { grid-area: 1 / 1; }
.dialogue-ghost { visibility: hidden; }

/* La flèche « suite » du jeu, qui se décale par paliers une fois la ligne
   écrite — un mouvement franc, pixel par pixel, pas un rebond élastique. */
.dialogue-next {
  position: absolute;
  right: 0;
  bottom: calc(var(--scale) * 1px);
  width: 0;
  height: 0;
  border-left: calc(var(--scale) * 4px) solid transparent;
  border-right: calc(var(--scale) * 4px) solid transparent;
  border-top: calc(var(--scale) * 5px) solid #e05838;
  filter: drop-shadow(calc(var(--scale) * 1px) calc(var(--scale) * 1px) 0 var(--box-shadow));
  opacity: 0;
}

.dialogue.is-done .dialogue-next {
  opacity: 1;
  animation: next-nudge 0.8s steps(2, jump-none) infinite;
}

@keyframes next-nudge {
  from { transform: translateY(0); }
  to { transform: translateY(calc(var(--scale) * 2px)); }
}

.dialogue-hint {
  margin: -0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* --- Sections ------------------------------------------------------------- */

.section {
  padding-block: clamp(4rem, 10vw, 7rem);
  border-top: 1px solid var(--night-line);
}

.split {
  display: grid;
  gap: 2.5rem 4rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* Les compétences : un tableau, puisque c'en est un. */
.skills {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.skills th,
.skills td {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--night-line);
  text-align: left;
  vertical-align: top;
}
.skills th {
  width: 9.5rem;
  padding-right: 1.5rem;
  font-family: var(--display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.2;
}
.skills td { color: var(--ink-muted); }

@media (max-width: 34rem) {
  .skills th,
  .skills td { display: block; width: auto; }
  .skills th { border-bottom: 0; padding-bottom: 0; }
}

.roll {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  background: var(--night-raised);
  border-radius: 4px;
}
.roll p { margin: 0; }
.roll strong { color: var(--sodium); }

/* Ce que contient l'alpha : un parcours, donc numéroté. */
.route {
  list-style: none;
  counter-reset: quest;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }
}
.route li {
  counter-increment: quest;
  position: relative;
  padding-top: 3.2rem;
}
.route li::before {
  content: counter(quest);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  color: var(--sodium);
}

.alpha-notes { margin-top: 2.75rem; }

.warning {
  margin-top: 3rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

/* Les retours : trois portes. */
.doors {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 48rem) {
  .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.doors a {
  display: block;
  height: 100%;
  padding: 1.4rem 1.4rem 1.5rem;
  border: 2px solid var(--night-line);
  border-radius: 4px;
  color: var(--ink);
  text-decoration: none;
}
.doors a:hover { border-color: var(--sodium); color: var(--ink); }
.doors a strong {
  display: block;
  font-family: var(--display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.doors a span { color: var(--ink-muted); }

/* --- Pages intérieures ---------------------------------------------------- */

.page {
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(4rem, 10vw, 6rem);
}

.page-head {
  max-width: 44rem;
  margin-bottom: 2.5rem;
}
.page-head h1 {
  font-size: clamp(3rem, 9vw, 5.5rem);
  margin-bottom: 1rem;
}

/* Téléchargement */
.release {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: 3.5rem;
}
.release p { margin: 0; }

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 3rem;
  padding: 0;
  max-width: 44rem;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--night-line);
}
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  font-family: var(--display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--sodium);
}
.steps h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.25rem;
}
.steps p { margin: 0; color: var(--ink-muted); }

.facts {
  max-width: 44rem;
  margin: 0;
}
.facts dt {
  font-weight: 700;
  margin-top: 1.25rem;
}
.facts dd {
  margin: 0.2rem 0 0;
  color: var(--ink-muted);
}

code, kbd {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  padding: 0.05em 0.35em;
  border-radius: 3px;
  background: var(--night-raised);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Formulaires */
.form {
  max-width: 40rem;
  display: grid;
  gap: 1.4rem;
}

.field { display: grid; gap: 0.35rem; }

.field label {
  font-weight: 700;
}
.field .help {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink-muted);
}
.field .optional {
  font-weight: 400;
  color: var(--ink-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--night-line);
  border-radius: 4px;
  background: var(--night-raised);
  color: var(--ink);
  font: 1rem/1.5 var(--body);
}
.field select { cursor: pointer; }
.field textarea { min-height: 9rem; resize: vertical; }
.field textarea.log {
  min-height: 7rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.88rem;
}
.field input,
.field textarea { caret-color: var(--sodium); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sodium);
}
.field [aria-invalid="true"] { border-color: var(--mafia); }
.field-error {
  margin: 0;
  font-weight: 700;
  color: #ff9a8c;
}

/* Le champ piège : hors écran, jamais rempli par un humain. */
.trap {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 0;
  padding: 1rem 1.2rem;
  border-radius: 4px;
  background: var(--night-raised);
  max-width: 40rem;
}
.form-status.is-error { background: color-mix(in srgb, var(--mafia) 18%, var(--night-raised)); }
.form-status.is-above { margin-bottom: 2rem; }
.form + .form-status { margin-top: 1.5rem; }
.form-status p { margin: 0; }
.form-status p + p { margin-top: 0.5rem; }

/* --- Pied de page --------------------------------------------------------- */

.site-foot {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--night-line);
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.site-foot p { max-width: 60ch; }
.site-foot ul { max-width: 60ch; margin: 0.5rem 0 0; padding-left: 1.25rem; }
.site-foot li + li { margin-top: 0.25rem; }

.foot-grid {
  display: grid;
  gap: 1.5rem 3rem;
}
@media (min-width: 40rem) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --- Téléphone ------------------------------------------------------------ */

@media (max-width: 40rem) {
  .dialogue { --scale: 2; font-size: calc(var(--scale) * 13.5px); }
  .street-title .lede { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dialogue.is-done .dialogue-next { animation: none; }
}