/* ============================================================================
 * GamePanel — Biseau
 *
 * La signature visuelle du panel. Destiny ne dessine pas des rectangles
 * arrondis : il coupe les angles. C'est le seul écart qui se voit au premier
 * coup d'œil, et le panel n'utilisait jusqu'ici aucun `clip-path` — tout était
 * en `border-radius`.
 *
 * SOUS LE MODE IMMERSIF. Rien de tout cela ne s'applique tant que « Effets
 * immersifs » est éteint dans le sélecteur de thème : la classe `gp-immersif`
 * commande l'ensemble. Elle est POSITIVE à dessein — avec une classe de
 * désactivation, la géométrie s'appliquerait pendant le court instant qui
 * précède l'init, et le panel apparaîtrait biseauté avant de se redresser.
 *
 * COUCHE À PART, CHARGÉE EN DERNIER. Toute la géométrie tient dans ce fichier :
 * le retirer de index.html rend au panel ses coins arrondis, sans toucher à
 * rien d'autre. C'est ce qui permet d'essayer la direction sans s'y enfermer.
 *
 * ---------------------------------------------------------------------------
 * DEUX TECHNIQUES, ET POURQUOI IL EN FAUT DEUX
 *
 * Un `border` reste RECTANGULAIRE sous un `clip-path` : le trait disparaît le
 * long de la diagonale. Sur un bouton de 34px avec une coupe de 6, les deux
 * bouts manquants se lisent comme un biseau — c'est même ce qu'on veut. Sur un
 * panneau de 300px avec une coupe de 13, le cadre paraît cassé.
 *
 *   - petites surfaces (boutons, badges, vignettes) : `clip-path` seul ;
 *   - grandes surfaces (panneaux, cartes, modales)  : deux pseudo-éléments,
 *     celui du dessous portant la couleur de bordure, celui du dessus le fond
 *     en retrait d'un pixel. Le trait suit alors la coupe.
 *
 * Les deux pseudo-éléments sont en z-index négatif, et l'élément porte
 * `isolation: isolate` : sans elle, ils passeraient derrière le fond de la page
 * au lieu de rester derrière leur propre contenu.
 * ========================================================================== */

:root {
  /* La coupe, en un seul endroit. `--gp-forme` la lit au moment où elle est
     utilisée : redéfinir `--gp-coupe` sur un bouton suffit à lui donner une
     coupe plus courte, sans redéclarer le polygone. */
  --gp-coupe: 13px;
  --gp-forme: polygon(
    var(--gp-coupe) 0,
    100% 0,
    100% calc(100% - var(--gp-coupe)),
    calc(100% - var(--gp-coupe)) 100%,
    0 100%,
    0 var(--gp-coupe)
  );

  /* Le fond des surfaces biseautées. Surchargeable sur un composant précis. */
  --gp-fond: var(--bg-1);
  --gp-trait: var(--border);
}

/* ---------------------------------------------------------------------------
   Grandes surfaces — le trait suit la coupe
   --------------------------------------------------------------------------- */

body.ui-v3.gp-immersif :is(.vg2-panel, .card, .modal, .lib-card) {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: transparent;
  clip-path: var(--gp-forme);
}

body.ui-v3.gp-immersif :is(.vg2-panel, .card, .modal, .lib-card)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--gp-trait);
  clip-path: var(--gp-forme);
}

body.ui-v3.gp-immersif :is(.vg2-panel, .card, .modal, .lib-card)::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  /* Un dégradé très court plutôt qu'un aplat : c'est ce qui donne à la surface
     l'impression d'être éclairée par le haut, comme les panneaux du jeu. */
  /* Un APLAT, et non un degrade eclairci.

     La premiere version montait le fond de 12% de blanc en haut de la surface.
     Sur un bleu nuit tres sombre, ajouter du blanc ne l eclaire pas : ca le
     DESATURE. Le panneau virait au gris, et la modale — la plus grande surface
     du panel — le montrait le plus. Le fond reste donc exactement celui du
     theme ; la geometrie suffit a signer. */
  background: var(--gp-fond);
  clip-path: var(--gp-forme);
}

/* La bibliothèque coupe son illustration au bord de la carte : sans
   `overflow: hidden`, l'image dépasse dans les angles rognés. */
body.ui-v3.gp-immersif .lib-card { overflow: hidden; }

/* ---------------------------------------------------------------------------
   Petites surfaces — le trait est coupé, et c'est voulu
   --------------------------------------------------------------------------- */

body.ui-v3.gp-immersif :is(.btn, .lib-cta, .lib-chip, .status-badge, .loader-badge, .tab, .form-input, .form-select) {
  --gp-coupe: 6px;
  border-radius: 0;
  clip-path: var(--gp-forme);
}

/* Les puces de la bibliothèque étaient des gélules de 17px de rayon : une coupe
   de 6px sur une hauteur de 34 les rend anguleuses sans les alourdir. */
body.ui-v3.gp-immersif .lib-chip { --gp-coupe: 7px; }

/* ---------------------------------------------------------------------------
   Cartes de serveur et tuiles — elles ont déjà leur couche de fond
   --------------------------------------------------------------------------- */

/* `.server-card` porte `.server-card-bg` pour son illustration, et six
   pseudo-éléments ailleurs : on ne lui impose pas la technique en deux couches.
   Le `clip-path` seul suffit, l'illustration étant coupée avec la carte. */
body.ui-v3.gp-immersif :is(.server-card, .mini-tile) {
  border-radius: 0;
  clip-path: var(--gp-forme);
}

body.ui-v3.gp-immersif :is(.server-card, .mini-tile) .server-card-bg { border-radius: 0; }

body.ui-v3.gp-immersif .mini-tile { --gp-coupe: 10px; }

/* ---------------------------------------------------------------------------
   Repli
   --------------------------------------------------------------------------- */

/* `clip-path` coupe aussi ce qui dépasse. Un menu ou une infobulle posés DANS
   une surface biseautée seraient rognés : ces conteneurs gardent donc leurs
   angles. */
body.ui-v3.gp-immersif :is(.dropdown, .popover, .tooltip, .gp-menu) {
  clip-path: none;
}