/* playblackcat.com : la nuit du jeu. L'écran vient de la maquette « Lien BlackCat » de la session de brainstorm :
   le titre écrit comme l'écran titre du jeu, l'icône sous la lune, les toits de la ville en ombre, puis la
   guirlande de polaroïds des Souvenirs. La palette et les polices sont celles du jeu (src/ui/theme.ts). */

@font-face {
  font-family: "Lilita One";
  src: url("/fonts/lilita-one.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Permanent Marker";
  src: url("/fonts/permanent-marker.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sky-top: #2b1658;
  --sky-mid: #170b36;
  --sky-end: #0b0716;
  --base: #0a0618;
  --surface: #17102a;
  --border: rgba(255, 255, 255, .1);
  --text: #f3ede4;
  --soft: #e4daf0;
  --muted: #a99fb8;
  --faint: #6b6580;
  --gold: #f2b531;
  --gold-bright: #ffd34d;
  --on-gold: #1a1206;
  --outline: #2a1206;
  --ink: #1d2257;
  --paper: #fbf8f1;
  --display: "Lilita One", "Arial Rounded MT Bold", "Helvetica Neue", sans-serif;
  --marker: "Permanent Marker", "Bradley Hand", cursive;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 24px;
}

* { box-sizing: border-box; }
html { background: var(--base); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--base); color: var(--text); font: 17px/1.6 var(--body); }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold); color: var(--on-gold); }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p, ul { margin: 0; }

.wrap { width: min(100% - 32px, 1040px); margin-inline: auto; }
.narrow { width: min(100% - 32px, 720px); margin-inline: auto; }

/* Le ciel : les étoiles, la lune derrière l'icône, et le dégradé de la nuit jusqu'aux toits. */
.sky {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(2px 2px at 12% 14%, #fff 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 27% 6%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 44% 20%, rgba(255, 255, 255, .8) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 57% 9%, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 93% 16%, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 6% 40%, rgba(255, 255, 255, .7) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 66% 32%, rgba(255, 255, 255, .7) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 36% 48%, rgba(255, 255, 255, .6) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 84% 46%, rgba(255, 255, 255, .6) 50%, transparent 52%),
    radial-gradient(circle at 76% 30%, rgba(255, 214, 110, .3), transparent 36%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 58%, var(--sky-end) 100%);
}

/* L'en-tête : la marque BlackCat Labs de l'écran de lancement (icons/labs-logo.ts) : la lune, « BLACK CAT » et
   « LABS » à 62/128 de sa taille, espacé de 40/62 ; deux liens. */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.wordmark { display: inline-flex; flex-direction: column; align-items: center; font-family: var(--display); line-height: 1; }
.wordmark .name { font-size: 1.05rem; letter-spacing: .094em; padding-left: .094em; }
.wordmark .labs { margin-top: .3em; font-size: .508rem; letter-spacing: .645em; padding-left: .645em; }
.top .links { display: flex; gap: 20px; font-size: .95rem; }
.top .links a { color: var(--soft); opacity: .8; }
.top .links a:hover, .top .links a[aria-current] { color: #fff; opacity: 1; text-decoration: none; }

/* Le haut de page : le titre comme l'écran titre du jeu, l'accroche, et l'image à côté. */
.hero { position: relative; display: grid; gap: 28px; align-items: center; padding: 28px 0 8px; }
.pitch { min-width: 0; }
.logo { display: flex; flex-direction: column; align-items: flex-start; text-transform: uppercase; }
.logo .big {
  font-size: clamp(3rem, 9vw, 5.6rem);
  line-height: .92;
  letter-spacing: 1px;
  color: var(--gold-bright);
  text-shadow: -2px -2px 0 var(--outline), 2px -2px 0 var(--outline), -2px 2px 0 var(--outline), 2px 2px 0 var(--outline), 0 4px 0 var(--outline), 0 7px 0 var(--outline), 0 12px 22px rgba(0, 0, 0, .55);
}
.logo .small {
  margin-top: 12px;
  font-size: clamp(.95rem, 2.3vw, 1.5rem);
  letter-spacing: .24em;
  color: #fff;
  text-shadow: -1.5px -1.5px 0 var(--outline), 1.5px -1.5px 0 var(--outline), -1.5px 1.5px 0 var(--outline), 1.5px 1.5px 0 var(--outline), 0 3px 0 var(--outline);
}
/* Le titre de l'accueil : la marque BlackCat Labs en grand, aux proportions de l'écran de lancement (la lune fait
   524/128 de « BLACK CAT »). */
.labs-lockup { display: inline-flex; flex-direction: column; align-items: center; font-size: clamp(2.2rem, 4.4vw, 3rem); line-height: 1; color: #fff; }
.labs-lockup img { width: 4.1em; height: 4.1em; }
.labs-lockup .name { margin-top: .5em; letter-spacing: .094em; padding-left: .094em; }
.labs-lockup .labs { margin-top: .3em; font-size: .484em; letter-spacing: .645em; padding-left: .645em; }
.tag { margin-top: 22px; max-width: 36ch; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.5; color: var(--soft); }
.soon { display: inline-block; margin-top: 20px; padding: 9px 16px; border: 1px solid rgba(255, 211, 77, .55); border-radius: 999px; background: rgba(255, 211, 77, .12); color: var(--gold-bright); font-weight: 600; font-size: .95rem; }
.free { margin-top: 14px; font-size: .88rem; letter-spacing: .04em; color: #b8accb; }

/* Les boutons des stores, pour le jour de la sortie (le balisage attend dans slot/index.html). */
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.store { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 10px; background: #000; color: #fff; text-align: left; }
.store:hover { border-color: #fff; text-decoration: none; }
.store i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-style: normal; font-weight: 800; font-size: 13px; }
.store i.a { background: linear-gradient(#1fb6ff, #0a66e6); }
.store i.g { background: linear-gradient(135deg, #00d97e, #00a4ff); }
.store small { display: block; font-size: 9px; letter-spacing: .4px; }
.store b { display: block; font-size: 15px; font-weight: 600; line-height: 1.05; }

/* L'icône du jeu, penchée, cerclée d'or sous la lune ; sur l'accueil, BlackCat et son sac de pièces. */
.art { justify-self: center; width: min(100%, 340px); border-radius: 22%; transform: rotate(3deg); box-shadow: 0 0 0 3px rgba(255, 211, 77, .6), 0 0 70px rgba(255, 196, 80, .35), 0 30px 60px rgba(0, 0, 0, .6); }
.hero-art { position: relative; justify-self: center; }
.hero-art::before { content: ""; position: absolute; inset: 15% 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 80, .35), transparent); filter: blur(24px); }
.hero-art img { position: relative; width: min(64vw, 340px); }
@media (min-width: 760px) {
  .hero { grid-template-columns: 1.15fr .85fr; padding: 40px 0 8px; }
}
@media (max-width: 759px) {
  .hero { justify-items: center; text-align: center; }
  .logo { align-items: center; }
  .tag { margin-inline: auto; }
  .art, .hero-art { order: -1; }
  .art { width: 170px; }
  .hero-art img { width: 210px; }
}

/* Les toits de la ville en ombre, quelques fenêtres allumées : la fin du ciel. */
.town {
  height: 74px;
  margin-top: 22px;
  background-color: var(--base);
  background-image:
    radial-gradient(3px 4px at 15% 50%, #ffd98a 60%, transparent 64%),
    radial-gradient(3px 4px at 18% 72%, #ffd98a 60%, transparent 64%),
    radial-gradient(3px 4px at 51% 66%, #ffc867 60%, transparent 64%),
    radial-gradient(3px 4px at 79% 60%, #ffd98a 60%, transparent 64%),
    radial-gradient(3px 4px at 82% 82%, #ffc867 60%, transparent 64%),
    radial-gradient(3px 4px at 95% 68%, #ffd98a 60%, transparent 64%),
    radial-gradient(3px 4px at 2.5% 80%, #ffd98a 60%, transparent 64%);
  clip-path: polygon(0 100%, 0 58%, 5% 58%, 5% 40%, 7% 40%, 7% 58%, 12% 58%, 12% 30%, 21% 30%, 21% 52%, 26% 52%, 26% 64%, 31% 64%, 31% 36%, 33% 36%, 33% 18%, 39% 18%, 39% 36%, 41% 36%, 41% 58%, 48% 58%, 48% 44%, 56% 44%, 56% 60%, 61% 60%, 61% 34%, 63% 34%, 63% 24%, 66% 24%, 66% 34%, 69% 34%, 69% 52%, 76% 52%, 76% 40%, 85% 40%, 85% 56%, 89% 56%, 89% 32%, 92% 32%, 92% 46%, 100% 46%, 100% 100%);
}
@media (max-width: 759px) {
  .town { height: 56px; margin-top: 16px; }
}

/* La guirlande de polaroïds, comme celle des Souvenirs : un fil, des pinces à linge, des photos qui se balancent. */
.garland { position: relative; padding-bottom: 40px; }
.garland .line { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.string { position: absolute; left: 4%; right: 4%; top: -6px; height: 40px; border-bottom: 2px solid rgba(255, 214, 140, .6); border-radius: 0 0 50% 50% / 0 0 100% 100%; filter: drop-shadow(0 0 3px rgba(255, 200, 90, .6)); }
.pola { position: relative; margin: 0; padding: 6px 6px 28px; background: var(--paper); box-shadow: 0 10px 22px rgba(0, 0, 0, .5); transform: translateY(var(--drop, 0)) rotate(var(--tilt, 0deg)); transform-origin: 50% -8px; }
.pola::before { content: ""; position: absolute; top: -12px; left: 50%; width: 9px; height: 18px; margin-left: -4.5px; border-radius: 2px; background: linear-gradient(90deg, #b98a4e, #ddb27a 50%, #b98a4e); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.pola img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pola figcaption { position: absolute; left: 0; right: 0; bottom: 4px; font-family: var(--marker); font-size: clamp(.8rem, 1.5vw, 1.05rem); line-height: 1.2; text-align: center; color: var(--ink); }
.f1 { --drop: 14px; --tilt: -5deg; }
.f2 { --drop: 30px; --tilt: 3deg; }
.f3 { --drop: 34px; --tilt: -2deg; }
.f4 { --drop: 30px; --tilt: 4deg; }
.f5 { --drop: 14px; --tilt: -3deg; }
@media (prefers-reduced-motion: no-preference) {
  .pola { animation: sway 5s ease-in-out infinite alternate; }
  .f2 { animation-delay: -1.2s; }
  .f3 { animation-delay: -2.4s; }
  .f4 { animation-delay: -3.1s; }
  .f5 { animation-delay: -4s; }
  @keyframes sway {
    from { transform: translateY(var(--drop, 0)) rotate(calc(var(--tilt, 0deg) - 1.5deg)); }
    to { transform: translateY(var(--drop, 0)) rotate(calc(var(--tilt, 0deg) + 1.5deg)); }
  }
}
@media (max-width: 640px) {
  .garland { overflow-x: auto; padding: 16px 0 36px; scrollbar-width: none; }
  .garland .line { display: flex; width: max-content; gap: 14px; padding: 0 18px; }
  .garland .pola { flex: 0 0 150px; }
}

.section { padding: 40px 0; }
.section-lead { margin-top: 10px; color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

/* La carte d'un jeu sur l'accueil. */
.game { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin-top: 20px; padding: 20px; color: var(--text); transition: border-color .2s, transform .2s; }
.game:hover { text-decoration: none; border-color: var(--gold); transform: translateY(-2px); }
.game img { width: 88px; border-radius: 20px; }
.game p { margin-top: 6px; color: var(--muted); }
.game .tag { margin-top: 6px; max-width: none; font-size: 1rem; color: var(--muted); }
.game .when { margin-top: 10px; font-size: .88rem; color: var(--gold); }
.game .arrow { display: none; font-family: var(--display); font-size: 2rem; color: var(--gold); }
@media (min-width: 600px) {
  .game { grid-template-columns: auto 1fr auto; gap: 28px; padding: 24px 28px; }
  .game img { width: 120px; border-radius: 26px; }
  .game .arrow { display: block; }
}

/* Les captures du jeu : une bande qui défile. */
.screens { display: flex; gap: 16px; overflow-x: auto; margin-top: 24px; padding: 8px 0 20px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--surface) transparent; }
.screens img { flex: 0 0 auto; width: 230px; border: 1px solid var(--border); border-radius: 24px; scroll-snap-align: start; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }

/* Comment on joue. */
.grid { display: grid; gap: 16px; margin-top: 16px; }
.feature { padding: 24px; }
.feature h3 { color: var(--gold-bright); }
.feature p { margin-top: 10px; color: var(--muted); }
@media (min-width: 700px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* Jamais d'argent réel. */
.note { padding: 28px; }
.note p { margin-top: 12px; max-width: 60ch; }
.note .links { color: var(--faint); }
/* La fiche en faits clairs (« At a glance »), pour les joueurs comme pour les moteurs et les IA. */
.facts { padding: 28px; }
.facts dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 18px 0 0; }
.facts dt { font-family: var(--display); color: var(--gold); }
.facts dd { margin: 0; color: var(--soft); }
@media (max-width: 480px) {
  .facts dl { grid-template-columns: 1fr; gap: 4px; }
  .facts dd { margin-bottom: 10px; }
}

/* Les pages de texte : la politique de confidentialité, le support. */
.doc { padding-top: 32px; }
.doc .eyebrow { margin-bottom: 12px; font-family: var(--display); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.doc h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
.doc .meta { margin-top: 12px; color: var(--muted); }
.doc h2 { margin-top: 40px; font-size: 1.45rem; color: var(--gold); }
.doc h2 + p, .doc p + p, .doc h2 + ul { margin-top: 12px; }
.doc ul { padding-left: 1.25rem; }
.doc li + li { margin-top: 8px; }
.doc strong { color: var(--gold-bright); font-weight: 600; }
/* Le compte des visites, à arrêter ou reprendre, sous « This website » de la politique (visits.js). */
.choice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.choice button { padding: 7px 16px; border: 1px solid var(--gold); border-radius: 999px; background: none; color: var(--gold); font: 600 .95rem var(--body); cursor: pointer; }
.choice button:hover { background: var(--gold); color: var(--on-gold); }
.choice button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* La page introuvable. */
.center { display: grid; justify-items: center; padding: 64px 0; text-align: center; }
.center img { width: 120px; }
.center h1 { margin-top: 24px; font-size: clamp(2.4rem, 6vw, 3.6rem); }
.center .lead { margin-top: 14px; font-size: 1.2rem; color: var(--muted); }

/* La page d'un lien cadeau, dans 404.html : /slot/<mot>-<mot>-<mot> montre le haut de la fiche du jeu avec le
   cadeau, puis la suite de la fiche ; toute autre adresse, la page introuvable (docs/site.md, « Le lien cadeau »). */
.when-gift { display: none; }
html[data-gift] .when-gift { display: block; }
html[data-gift] .when-missing { display: none; }
.gift-card { display: flex; align-items: center; gap: 14px; max-width: 26rem; margin-top: 24px; padding: 14px 20px 14px 14px; border: 1px solid rgba(255, 211, 77, .55); border-radius: 20px; background: rgba(255, 211, 77, .1); color: var(--soft); text-align: left; }
.gift-card img { flex: none; width: 64px; }
.gift-card b { display: block; margin-bottom: 2px; font-family: var(--display); font-weight: 400; font-size: 1.45rem; line-height: 1.1; color: var(--gold-bright); text-wrap: balance; }
.hint { margin-top: 14px; font-weight: 600; color: #fff; }
@media (max-width: 759px) {
  .gift-card { margin-inline: auto; }
}

/* Le pied de page. */
.foot { display: grid; gap: 14px; margin-top: 56px; padding: 32px 0 56px; border-top: 1px solid var(--border); font-size: .92rem; color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot p { max-width: 70ch; }