/* Style de page « Manga ». Chargé par le SPA et par les gabarits Django, comme
   les jetons et la typographie.

   Tout part de `data-style="manga"` posé sur la racine. Le gros du travail n'est
   qu'une redéfinition des jetons `--ud-*` : aucun composant n'est réécrit, et
   retirer l'attribut rend le site à son habillage d'origine.

   Quatre choses ne peuvent pas passer par les jetons et sont donc traitées à
   part : les bulles de dialogue, qui demandent une pointe ; les boutons, dont la
   forme change ; les illustrations, qui passent en bichrome par filtre ; et le
   décor de planche — lignes d'action, trames et onomatopées — qui n'existe
   nulle part ailleurs sur le site.

   Les onomatopées sont écrites en katakana dans une fonte japonaise réduite aux
   seuls signes employés : le `text=` de Google Fonts renvoie un fichier de
   quelques centaines d'octets au lieu de la fonte entière. */

@import url('https://fonts.googleapis.com/css2?family=Reggae+One&text=%E3%83%89%E3%82%B4%E3%83%B3%E3%83%90%E3%83%84&display=swap');

/* La palette sert deux fois : la page quand le style est équipé, et sa vignette
   dans « Ma collection », qui doit rester en manga même si un autre style est
   actif. Les deux partagent les jetons plutôt que de recopier les valeurs. */
:root[data-style="manga"],
[data-apercu="manga"] {
  color-scheme: light;

  /* Papier et encre. Le fond n'est pas blanc : une page de manga est imprimée
     sur du papier journal, légèrement chaud. */
  --ud-bg: #eae7de;
  --ud-surface: #ffffff;
  --ud-surface-raised: #f4f2eb;

  --ud-text: #16150f;
  --ud-text-strong: #000000;
  --ud-text-muted: #56544c;

  /* La bordure EST l'encre : c'est ce qui fait le trait épais du dessin. */
  --ud-border: #16150f;
  --ud-border-strong: #000000;

  --ud-accent: #16150f;
  --ud-on-color: #eae7de;
  --ud-accent-soft: rgba(22, 21, 15, .09);
  --ud-accent-2: #4a4840;

  /* Il n'y a plus de couleur pour distinguer un état : c'est la clarté qui s'en
     charge. Les quatre valeurs restent donc écartées les unes des autres. */
  --ud-success: #2e2c25;
  --ud-warning: #56544c;
  --ud-danger: #16150f;
  --ud-info: #3c3a33;

  --ud-rarity-common: #8a877e;
  --ud-rarity-rare: #6b6960;
  --ud-rarity-epic: #3c3a33;
  --ud-rarity-legendary: #16150f;

  --ud-portrait: linear-gradient(150deg, #cfccc3 0%, #6b6860 60%, #b8b5ac 100%);
  /* Un dégradé et non une couleur : la carte de combattant le sert en
     `background-image`, où un `#ffffff` seul est invalide et se fait jeter —
     le noir posé dessous reparaissait alors au milieu d'une page de papier. */
  --ud-carte-fond: linear-gradient(135deg, #ffffff 0%, #f1efe8 100%);

  /* Une ombre de manga ne diffuse pas : c'est un aplat d'encre décalé. */
  --ud-shadow-sm: 3px 3px 0 #16150f;
  --ud-shadow-md: 6px 6px 0 #16150f;

  --ud-radius-sm: 3px;
  --ud-radius: 6px;
  --ud-radius-lg: 10px;

  /* Réglable d'un seul endroit : les trames sont définies en clair dans le
     gabarit, ici on choisit seulement laquelle s'applique où. */
  --ud-manga-encrage: url(#ud-manga-points-fins);
  --ud-manga-encrage-fin: grayscale(1) contrast(1.5) brightness(1.04);
  --ud-manga-trait: 3px;
  --ud-manga-trame: radial-gradient(rgba(22, 21, 15, .13) 1px, transparent 1.1px);

  /* Les lignes d'action sont plus claires que la trame : elles traversent la
     page entière, à la densité de l'ombrage elles la rendraient illisible. */
  --ud-manga-ligne: rgba(22, 21, 15, .11);
  --ud-manga-onomatopee: rgba(22, 21, 15, .13);
  --ud-manga-onomatopee-choc: rgba(22, 21, 15, .18);
  --ud-manga-onomatopee-forte: rgba(22, 21, 15, .82);

  /* Derrière la fonte téléchargée, les fontes japonaises livrées avec les
     systèmes : si Google Fonts ne répond pas, les katakana s'affichent quand
     même au lieu de laisser des carrés vides. */
  --ud-manga-police-cri: 'Reggae One', 'Hiragino Sans', 'Yu Gothic',
    'Noto Sans JP', 'MS PGothic', sans-serif;
}

/* La trame de points : l'ombrage du manga. Assez discrète pour qu'on lise
   par-dessus, assez présente pour qu'on sache que c'est du papier. */
:root[data-style="manga"] body {
  background-color: var(--ud-bg);
  background-image: var(--ud-manga-trame);
  background-size: 7px 7px;
}

/* --- Les illustrations passent à la trame ------------------------------- */

/* Pas un bichrome : une vraie trame d'imprimeur. Le filtre ouvre le contraste
   puis rend chaque ton par un point dont la taille suit ce ton — le noir
   remplit, le blanc reste vide, et entre les deux le point grossit sans à-coup.
   C'est la définition même d'une trame, et c'est ce qui distingue une page de
   manga d'une photo passée en noir et blanc. */
:root[data-style="manga"] img {
  filter: var(--ud-manga-encrage);
}

/* Une photo de profil fait quarante pixels de côté : à six pixels le point,
   il n'en resterait sept en travers et plus personne ne s'y reconnaîtrait.
   Ces images gardent l'encre, sans la trame. */
:root[data-style="manga"] .ud-avatar-cadre img,
:root[data-style="manga"] .ud-avatar-cadre-photo,
:root[data-style="manga"] .ud-avatar-cadre-image {
  filter: var(--ud-manga-encrage-fin);
}

/* --- Les boutons -------------------------------------------------------- */

/* Tous les boutons, sans avoir à poser une classe sur chacun : le sélecteur
   d'attribut suffit à battre les utilitaires de Tailwind, qui n'ont qu'une
   classe de spécificité. */
:root[data-style="manga"] button,
:root[data-style="manga"] .ud-bouton {
  background: #ffffff;
  color: var(--ud-text);
  border: var(--ud-manga-trait) solid var(--ud-border);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--ud-border);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: transform .09s ease, box-shadow .09s ease;
}

/* On enfonce le bouton dans la page plutôt que de l'éclaircir : l'encre n'a pas
   de nuance à donner, le déplacement si. */
:root[data-style="manga"] button:hover:not(:disabled),
:root[data-style="manga"] .ud-bouton:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ud-border);
}

:root[data-style="manga"] button:active:not(:disabled) {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ud-border);
}

:root[data-style="manga"] button:disabled {
  box-shadow: 4px 4px 0 var(--ud-text-muted);
  border-color: var(--ud-text-muted);
  color: var(--ud-text-muted);
}

/* `clip-path` découperait l'anneau de focus : on le garde franc et à l'extérieur. */
:root[data-style="manga"] button:focus-visible {
  outline: 3px solid var(--ud-border);
  outline-offset: 3px;
}

/* Un bouton qui ne porte qu'une icône n'a rien à gagner au cadre épais : le
   trait et son ombre font une case vide de la taille d'un chevron, et c'est
   le cadre qu'on voit au lieu du signe. Ils gardent l'encre, pas la boîte. */
:root[data-style="manga"] .dropdown-toggle,
:root[data-style="manga"] .notification-bell,
:root[data-style="manga"] .theme-toggle {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--ud-text);
}

:root[data-style="manga"] .dropdown-toggle:hover,
:root[data-style="manga"] .notification-bell:hover,
:root[data-style="manga"] .theme-toggle:hover,
:root[data-style="manga"] .dropdown-toggle:active,
:root[data-style="manga"] .notification-bell:active,
:root[data-style="manga"] .theme-toggle:active {
  transform: none;
  box-shadow: none;
  color: var(--ud-accent-2);
}

/* Le cri de l'impact aussi : sur un chevron de barre de navigation, il sort
   du cadre et recouvre le menu qu'on vient d'ouvrir. */
:root[data-style="manga"] .dropdown-toggle:active::after,
:root[data-style="manga"] .notification-bell:active::after,
:root[data-style="manga"] .theme-toggle:active::after {
  content: none;
}

/* --- Les bulles de dialogue --------------------------------------------- */

/* Un commentaire n'est plus une boîte, c'est quelqu'un qui parle. La pointe se
   fait en deux triangles : celui d'encre derrière, celui de papier devant,
   décalé de l'épaisseur du trait. */
:root[data-style="manga"] .ud-bulle {
  position: relative;
  background: #ffffff;
  border: var(--ud-manga-trait) solid var(--ud-border);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ud-border);
}

:root[data-style="manga"] .ud-bulle::before,
:root[data-style="manga"] .ud-bulle::after {
  content: "";
  position: absolute;
  top: 16px;
  width: 0;
  height: 0;
  border: 11px solid transparent;
  border-right-color: var(--ud-border);
}

:root[data-style="manga"] .ud-bulle::before {
  left: calc(-22px - var(--ud-manga-trait));
}

:root[data-style="manga"] .ud-bulle::after {
  left: -22px;
  border-right-color: #ffffff;
}

/* Sous 640 px les bulles occupent presque toute la largeur : la pointe sortirait
   de l'écran. Elle passe alors sous la bulle, vers l'avatar. */
@media (max-width: 640px) {
  :root[data-style="manga"] .ud-bulle::before,
  :root[data-style="manga"] .ud-bulle::after {
    top: auto;
    left: 22px;
    border-right-color: transparent;
  }

  :root[data-style="manga"] .ud-bulle::before {
    bottom: calc(-22px - var(--ud-manga-trait));
    border-top-color: var(--ud-border);
  }

  :root[data-style="manga"] .ud-bulle::after {
    bottom: -22px;
    border-top-color: #ffffff;
  }
}

/* --- Ce qui doit rester lisible ----------------------------------------- */

/* Le champ de saisie garde le trait du dessin, sinon il flotte au milieu de
   bulles encrées. */
:root[data-style="manga"] textarea,
:root[data-style="manga"] input[type="text"],
:root[data-style="manga"] input[type="url"],
:root[data-style="manga"] input[type="password"],
:root[data-style="manga"] input[type="email"] {
  background: #ffffff;
  border: 2px solid var(--ud-border);
  border-radius: 3px;
  color: var(--ud-text);
}

/* La carte de combattant est le seul objet que le fichier de jetons déclare
   sombre dans les deux thèmes. En manga elle passe au papier comme le reste :
   une planche n'a pas de fenêtre noire au milieu. Son fond est posé en dur
   dans le composant, d'où ces reprises. */
:root[data-style="manga"] .pc-inside {
  background-color: #ffffff;
  color: var(--ud-text);
}

:root[data-style="manga"] .pc-card {
  box-shadow: 5px 5px 0 var(--ud-border);
  border: var(--ud-manga-trait) solid var(--ud-border);
}

/* Le nom et l'origine sont peints par un dégradé clair découpé sur le texte :
   sur du papier, ça donnait du blanc sur du blanc. */
:root[data-style="manga"] .pc-details h3,
:root[data-style="manga"] .pc-details p {
  background-image: none;
  -webkit-text-fill-color: var(--ud-text);
  color: var(--ud-text);
}

/* Le reflet et le halo de la carte n'ont plus de sens sur une planche encrée. */
:root[data-style="manga"] .pc-shine,
:root[data-style="manga"] .pc-glare,
:root[data-style="manga"] .pc-behind {
  display: none;
}

/* --- L'aperçu du style, dans « Ma collection » --------------------------- */

/* Un style de page n'a pas d'illustration : il en est une. Plutôt qu'une image
   à téléverser, sa propre feuille peint la vignette — elle est donc toujours
   fidèle à ce que le joueur obtiendra. Pas de `[data-style]` devant : la
   vignette reste en manga même quand un autre style habille la page. */
[data-apercu="manga"] {
  background-color: var(--ud-bg);
  background-image: var(--ud-manga-trame);
  background-size: 7px 7px;
  border-color: var(--ud-border);
}

[data-apercu="manga"] .ud-apercu-bulle {
  position: relative;
  background: var(--ud-surface);
  border: 2px solid var(--ud-border);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ud-border);
}

[data-apercu="manga"] .ud-apercu-bulle::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 18px;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top-color: var(--ud-border);
}

[data-apercu="manga"] .ud-apercu-bouton {
  background: var(--ud-surface);
  border: 2px solid var(--ud-border);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ud-border);
}


/* --- Les lignes d'action ------------------------------------------------ */

/* Les rayons partent d'un point haut, là où se tient le duel, et le masque les
   fait naître hors du texte : au centre il n'y a rien, elles n'apparaissent
   qu'en s'éloignant. Sans ça on lit une page rayée, pas une planche.

   `z-index: -1` place le calque au-dessus du fond du corps et sous tout le
   contenu : les lignes passent derrière les panneaux, jamais dessus. */
:root[data-style="manga"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg at 50% 38%,
    var(--ud-manga-ligne) 0deg .32deg,
    transparent .32deg 2.4deg
  );
  -webkit-mask-image: radial-gradient(circle at 50% 38%, transparent 34%, #000 78%);
  mask-image: radial-gradient(circle at 50% 38%, transparent 34%, #000 78%);
}

/* Le SPA peint un fond opaque sur sa coque — `bg-[var(--ud-bg)]` dans
   `App.jsx` — qui recouvrirait le calque. On le rend transparent : sa couleur
   est déjà celle du corps, rien ne change à l'œil. */
:root[data-style="manga"] [class*="bg-[var(--ud-bg)]"] {
  background-color: transparent;
}

/* --- Les onomatopées ---------------------------------------------------- */

/* ゴゴゴ : la tension sourde qui traîne dans une case sans que rien ne bouge.
   Fixée au coin bas-gauche de la fenêtre plutôt qu'à un élément : ce coin est
   vide sur toutes les pages, alors qu'accrochée au contenu elle finit sous un
   panneau dès que la mise en page change. Elle accompagne les lignes d'action,
   au même plan qu'elles. */
:root[data-style="manga"] body::before {
  content: "ゴゴゴ" / "";
  position: fixed;
  z-index: -1;
  bottom: 1.5rem;
  left: 1rem;
  font-family: var(--ud-manga-police-cri);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: .9;
  letter-spacing: -.06em;
  color: var(--ud-manga-onomatopee);
  writing-mode: vertical-rl;
  transform: rotate(-4deg);
  pointer-events: none;
  user-select: none;
}

/* ドドド : le choc, dans le coin bas-droit, en écho à ゴゴゴ à l'autre bout.

   Il a d'abord été posé dans la fente entre les deux cartes du duel, là où un
   manga l'écrirait. Sur le site il n'y a pas la place : la fente fait quatre-
   vingts pixels, le cri passe derrière les cartes qui le rognent des deux
   côtés, et le peu qui dépasse tombe pile sur le « VS ». Deux signes se
   disputaient le même centimètre carré. Les coins, eux, sont vides sur toutes
   les pages. */
:root[data-style="manga"]::after {
  content: "ドドド" / "";
  position: fixed;
  z-index: -1;
  bottom: 2rem;
  right: 1.2rem;
  font-family: var(--ud-manga-police-cri);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: .9;
  letter-spacing: -.06em;
  color: var(--ud-manga-onomatopee-choc);
  writing-mode: vertical-rl;
  transform: rotate(5deg);
  pointer-events: none;
  user-select: none;
}

/* Le coup part quand on appuie : l'onomatopée ne vit que le temps du clic. */
:root[data-style="manga"] button,
:root[data-style="manga"] .ud-bouton {
  position: relative;
}

:root[data-style="manga"] button:active:not(:disabled)::after {
  content: "ドン" / "";
  position: absolute;
  top: -1.1em;
  right: -.7em;
  font-family: var(--ud-manga-police-cri);
  font-size: 1.5em;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--ud-manga-onomatopee-forte);
  transform: rotate(-9deg);
  pointer-events: none;
}

/* --- La trame, en ombrage ----------------------------------------------- */

/* La carte de combattant est la seule case dessinée du site : on pose derrière
   elle un rectangle de trame décalé, comme l'ombrage qu'un encrage laisse au
   bord d'une case. Sur l'enveloppe et non sur la carte, qui coupe à ses
   bords. */
:root[data-style="manga"] .pc-card-wrapper::before {
  content: "";
  position: absolute;
  inset: .8rem -.8rem -.8rem .8rem;
  z-index: -1;
  background-image: var(--ud-manga-trame);
  background-size: 5px 5px;
  pointer-events: none;
}

/* Un lecteur qui coupe les animations coupe aussi le décor mouvant : ici rien
   ne bouge, mais les lignes d'action fatiguent, et il vaut mieux les rendre à
   la trame seule. */
@media (prefers-reduced-motion: reduce) {
  :root[data-style="manga"] body::after {
    opacity: .4;
  }
}