/* LES ORNEMENTS « TAROT » : un cadre intérieur doré, façon carte de tarot Art nouveau, mais en pixels.
   On garde le style du site (fond nuit, bordure fine) et on ajoute PAR-DESSUS, avec un pseudo-élément ::after :
     - un filet doré intérieur, à 6 px du bord ;
     - dans chaque coin : un angle coupé, un arc intérieur, un losange et une petite volute terminée par un point ;
     - sur les arches : un second arc intérieur et une clé de voûte ornée au sommet.
   Les ornements sont de petits SVG dessinés avec des carrés (shape-rendering: crispEdges), affichés à 150 % :
   ils restent nets comme le reste du pixel art. Le ::after ne capte pas la souris (pointer-events: none). */

:root {
  --orn-tl: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22 viewBox=%220 0 28 28%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%228%22 y=%220%22 width=%2220%22 height=%221%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%220%22 y=%228%22 width=%221%22 height=%2220%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%226%22 y=%220%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%224%22 y=%222%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%222%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%220%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2216%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2214%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2212%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2210%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%228%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%226%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%224%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%224%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%224%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%224%22 y=%2216%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2220%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%224%22 y=%2220%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2212%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2210%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2214%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2212%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2212%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23fffdf1%22/%3E%3C/svg%3E");
  --orn-tr: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22 viewBox=%220 0 28 28%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%220%22 y=%220%22 width=%2220%22 height=%221%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2227%22 y=%228%22 width=%221%22 height=%2220%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2220%22 y=%220%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2222%22 y=%222%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2224%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2226%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2210%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2212%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2214%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2216%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2218%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2220%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2222%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2222%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2222%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2222%22 y=%2216%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%226%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2222%22 y=%2220%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2214%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2216%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2212%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2214%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2214%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23fffdf1%22/%3E%3C/svg%3E");
  --orn-bl: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22 viewBox=%220 0 28 28%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%228%22 y=%2227%22 width=%2220%22 height=%221%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%220%22 y=%220%22 width=%221%22 height=%2220%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%226%22 y=%2226%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%224%22 y=%2224%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%222%22 y=%2222%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%220%22 y=%2220%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2216%22 y=%2222%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2214%22 y=%2222%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2212%22 y=%2222%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2210%22 y=%2222%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%228%22 y=%2220%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%226%22 y=%2218%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%224%22 y=%2216%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%224%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%224%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%224%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2220%22 y=%2222%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%224%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2212%22 y=%2216%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2210%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2214%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2212%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2212%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23fffdf1%22/%3E%3C/svg%3E");
  --orn-br: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22 viewBox=%220 0 28 28%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%220%22 y=%2227%22 width=%2220%22 height=%221%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2227%22 y=%220%22 width=%221%22 height=%2220%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2220%22 y=%2226%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2222%22 y=%2224%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2224%22 y=%2222%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2226%22 y=%2220%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.7%22/%3E%3Crect x=%2210%22 y=%2222%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2212%22 y=%2222%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2214%22 y=%2222%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2216%22 y=%2222%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2218%22 y=%2220%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2220%22 y=%2218%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2222%22 y=%2216%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2222%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2222%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2222%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%226%22 y=%2222%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2222%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22 opacity=%220.85%22/%3E%3Crect x=%2214%22 y=%2216%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2216%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2212%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2214%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2214%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23fffdf1%22/%3E%3C/svg%3E");
  --orn-key: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2226%22 height=%2212%22 viewBox=%220 0 26 12%22 shape-rendering=%22crispEdges%22%3E%3Crect x=%2212%22 y=%220%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2210%22 y=%222%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2214%22 y=%222%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2212%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23e6bd80%22/%3E%3Crect x=%2212%22 y=%222%22 width=%222%22 height=%222%22 fill=%22%23fffdf1%22/%3E%3Crect x=%228%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.85%22/%3E%3Crect x=%226%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.85%22/%3E%3Crect x=%224%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.85%22/%3E%3Crect x=%222%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.85%22/%3E%3Crect x=%2216%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.85%22/%3E%3Crect x=%2218%22 y=%224%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.85%22/%3E%3Crect x=%2220%22 y=%226%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.85%22/%3E%3Crect x=%2222%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.85%22/%3E%3Crect x=%220%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.85%22/%3E%3Crect x=%2224%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23f1db9e%22 opacity=%220.85%22/%3E%3C/svg%3E");
  --orn-line: color-mix(in srgb, var(--accent) 55%, transparent);
  --orn-inset: 6px;
}

/* 1) LES CADRES : seulement les deux grandes scènes (système solaire, route).
   Les cartes ordinaires n'en ont plus : trop d'or partout fatiguait l'œil (voir docs/09-lisibilite.md). */
.card, .system, .journey-scene { position: relative; }
.system::after,
.journey-scene::after {
  content: "";
  position: absolute;
  inset: var(--orn-inset);
  pointer-events: none;
  z-index: 2;
  background:
    var(--orn-tl) top left / 42px 42px no-repeat,
    var(--orn-tr) top right / 42px 42px no-repeat,
    var(--orn-bl) bottom left / 42px 42px no-repeat,
    var(--orn-br) bottom right / 42px 42px no-repeat,
    /* les filets entre les coins : ils commencent pile où le coin s’arrête (42 px) */
    linear-gradient(var(--orn-line), var(--orn-line)) top center / calc(100% - 84px) 1px no-repeat,
    linear-gradient(var(--orn-line), var(--orn-line)) bottom center / calc(100% - 84px) 1px no-repeat,
    linear-gradient(var(--orn-line), var(--orn-line)) left center / 1px calc(100% - 84px) no-repeat,
    linear-gradient(var(--orn-line), var(--orn-line)) right center / 1px calc(100% - 84px) no-repeat;
}

/* 2) LES ARCHES : un second arc intérieur et une clé de voûte */
.arch::after {
  content: "";
  position: absolute;
  inset: 5px 5px -1px;
  border: 1px solid var(--orn-line);
  border-bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}
.arch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 39px;
  height: 18px;
  transform: translateX(-50%);
  background:
    var(--orn-key) center / 39px 18px no-repeat;
  pointer-events: none;
  z-index: 3;
}

/* les boutons posés sur les scènes passent au-dessus des ornements */
.system-controls, .system-hint { z-index: 3; }
.jl { z-index: 3; }

/* téléphone : des coins plus petits, et un peu plus de marge dans les cartes pour que rien ne les touche */
@media (max-width: 767px) {
  .system::after, .journey-scene::after {
    --orn-inset: 4px;
    background-size: 28px 28px, 28px 28px, 28px 28px, 28px 28px,
      calc(100% - 56px) 1px, calc(100% - 56px) 1px, 1px calc(100% - 56px), 1px calc(100% - 56px);
  }
}