/* Design v2 : boîte de jeu en 3D. Les dimensions suivent la largeur de .card (unités cqw) :
   largeur 100cqw, hauteur 140cqw (format 5:7, comme un boîtier), épaisseur --depth. */
.gbox { --depth: 9cqw; --turn: 0deg; --half-h: 70cqw; /* demi-hauteur : 70cqw pour le format 5:7 */ }
.gbox-inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--flip, 180deg) + var(--turn)));
  transition: transform .7s var(--ease);
}
/* Au survol, la boîte pivote pour montrer sa tranche. */
.gbox.gbox-tilt.flipped:hover { --turn: 26deg; }
/* Boîte qui vient de sortir du carton (data-still, js/ouvrir.js) : droite tant que la souris ne l'a pas quittée. */
.gbox.gbox-tilt[data-still]:hover { --turn: 0deg; --rx: 0deg; }
/* Rotation au cliquer-glisser (classe .gbox-drag, js/gamebox.js) : plus de pivot au survol ;
   curseur « main » pour montrer qu'on peut attraper la boîte. */
.gbox.gbox-tilt.gbox-drag:hover { --turn: 0deg; }
.gbox.gbox-drag { cursor: grab; touch-action: pan-y; }
/* Pas de sélection de texte (surlignage bleu) quand on fait glisser une boîte ou la scène de la vue en grand. */
.gbox, .zoom-stage, .turn-preview { -webkit-user-select: none; user-select: none; }
.gbox.gbox-drag.tracking { cursor: grabbing; }
.gbox.gbox-tilt.flipped:hover .gbox-inner { transition: transform .45s var(--ease); }

/* Ombre au sol (hors du plan 3D pour ne pas l'aplatir). */
.gbox::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: -5cqw; height: 9cqw; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(58, 44, 64, .32), transparent 70%); transition: transform .45s var(--ease); }
.gbox.gbox-tilt.flipped:hover::before { transform: translateX(-6%) scaleX(1.08); }

/* ---- Faces ------------------------------------------------------------------------------ */
.gbox-face { position: absolute; inset: 0; border-radius: 1.8cqw; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gbox-front { transform: translateZ(calc(var(--depth) / 2)); background: var(--r); display: flex; flex-direction: column;
  padding-left: 5.5cqw; /* charnière du boîtier */
  box-shadow: inset 0 0 0 .6cqw var(--ink); }
.gbox-back { transform: rotateY(180deg) translateZ(calc(var(--depth) / 2)); }
.gbox-side, .gbox-cap { position: absolute; }
.gbox-side { top: 0; height: 100%; width: var(--depth); left: calc(50% - var(--depth) / 2); }
.gbox-spine { transform: rotateY(-90deg) translateZ(50cqw); }
.gbox-right { transform: rotateY(90deg) translateZ(50cqw); }
.gbox-cap { left: 0; width: 100%; height: var(--depth); top: calc(var(--half-h) - var(--depth) / 2); }
.gbox-top { transform: rotateX(90deg) translateZ(var(--half-h)); }
.gbox-bottom { transform: rotateX(-90deg) translateZ(var(--half-h)); }

/* Charnière en plastique à gauche de la façade, avec ses nervures. */
.gbox-front::before { content: ''; position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 5.5cqw;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .22) 0 1cqw, transparent 1cqw 2.4cqw),
    linear-gradient(90deg, #CFC3D6, #F3EEF5 45%, #BBAEC3);
  box-shadow: inset -.5cqw 0 0 rgba(58, 44, 64, .25); }

/* Bandeau du haut, comme les bandeaux plate-forme des boîtes des années 90. */
.gb-band { display: flex; align-items: center; gap: 2cqw; padding: 1.8cqw 3cqw; background: var(--ink); color: var(--butter);
  font-weight: 800; font-size: 3.6cqw; line-height: 1; border-bottom: 1.2cqw solid var(--r-edge); }
.gb-platform { font-family: var(--font-display); font-weight: 400; background: var(--butter); color: var(--ink); padding: .8cqw 1.8cqw; border-radius: 1cqw; font-size: 3.4cqw; }
.gb-rarity { margin-left: auto; text-transform: none; }
.gb-band .pips { gap: .9cqw; }
.gb-band .pips i { width: 2.4cqw; height: 2.4cqw; box-shadow: inset 0 0 0 .5cqw var(--butter); }
.gb-band .pips i.on { background: var(--butter); }

/* Illustration de la jaquette. */
.gb-art { position: relative; flex: 1; min-height: 0; background: var(--surface); }
.gb-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; filter: saturate(.86) sepia(.08) contrast(.97); }
.gb-art img.banner { object-fit: contain; object-position: center; }
.gb-art::after { content: ''; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .3;
  background: radial-gradient(rgba(58, 44, 64, .35) .35cqw, transparent .5cqw) 0 0 / 2.4cqw 2.4cqw; }

/* Pastille ronde collée sur la jaquette (façon « Jeu de l'année »). */
.gb-sticker { position: absolute; z-index: 2; right: 3cqw; top: 17cqw; width: 21cqw; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.05;
  background: var(--butter); color: var(--ink); transform: rotate(12deg);
  box-shadow: 0 0 0 .6cqw var(--ink), .8cqw 1.2cqw 0 rgba(58, 44, 64, .3); }
.gb-sticker strong { font-family: var(--font-display); font-weight: 400; font-size: 5.4cqw; }
.gb-sticker span { font-size: 2.6cqw; font-weight: 800; max-width: 16cqw; }

/* Plaque du titre en bas de la jaquette. */
.gb-plate { position: relative; padding: 2.6cqw 3.4cqw 2.4cqw; background: var(--r); border-top: .9cqw solid var(--ink); }
.gb-title { font-size: 6.6cqw; line-height: 1.05; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gb-meta { font-size: 3.4cqw; font-weight: 700; color: var(--ink-soft); margin-top: .8cqw; padding-right: 17cqw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-num { position: absolute; right: 3.4cqw; bottom: 2.4cqw; font-size: 3cqw; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Reflet du film plastique ; plus marqué et irisé pour les raretés hautes. */
.gb-gloss { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(circle at var(--mx, 25%) var(--my, 15%), rgba(255, 255, 255, .4), transparent 40%),
    linear-gradient(115deg, rgba(255, 255, 255, .28) 0 12%, transparent 30% 62%, rgba(255, 255, 255, .16) 70%, transparent 80%);
  mix-blend-mode: soft-light; }
.gbox[data-rarity="epique"] .gb-gloss,
.gbox[data-rarity="legendaire"] .gb-gloss { mix-blend-mode: overlay; }
.gbox[data-rarity="mythique"] .gbox-front { background: linear-gradient(135deg, var(--rose), var(--butter) 25%, var(--mint) 50%, var(--sky) 75%, var(--lilac)); }
.gbox[data-rarity="mythique"] .gb-plate { background: transparent; }
.gbox[data-rarity="mythique"] .gb-gloss { mix-blend-mode: overlay;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .8), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255, 190, 220, .55) 0 6%, rgba(255, 240, 170, .55) 12%, rgba(180, 240, 210, .55) 18%, rgba(180, 210, 255, .55) 24%, rgba(220, 190, 255, .55) 30%);
  background-size: 100% 100%, 260% 260%; background-position: 0 0, var(--mx, 40%) var(--my, 40%); }

/* Film holographique identique sur toutes les boîtes (demande de l'utilisateur, 2026-09-29) : le réglage des
   boîtes PC (film irisé en « overlay », opacité .85) s'impose à tous les styles, qui l'atténuaient chacun à leur
   façon (cartons, Game Boy, Black Box…). Les Légendaires ont le même film, en version dorée. Le reflet suit la
   souris (--mx / --my). Retirer ces deux règles = revenir aux films propres à chaque style. */
.card.gbox[data-rarity="mythique"] .gbox-front .gb-gloss { mix-blend-mode: overlay; opacity: .85;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .8), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255, 190, 220, .55) 0 6%, rgba(255, 240, 170, .55) 12%, rgba(180, 240, 210, .55) 18%, rgba(180, 210, 255, .55) 24%, rgba(220, 190, 255, .55) 30%);
  background-size: 100% 100%, 260% 260%; background-position: 0 0, var(--mx, 40%) var(--my, 40%); }
.card.gbox[data-rarity="legendaire"] .gbox-front .gb-gloss { mix-blend-mode: overlay; opacity: .85;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 250, 225, .8), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255, 214, 110, .55) 0 6%, rgba(255, 246, 205, .55) 12%, rgba(214, 160, 50, .5) 18%, rgba(255, 228, 150, .55) 24%, rgba(190, 140, 40, .5) 30%);
  background-size: 100% 100%, 260% 260%; background-position: 0 0, var(--mx, 40%) var(--my, 40%); }

/* ---- Rareté Culte (2026-10-01) : le jeu le plus emblématique de chaque console. La boîte garde tout le rendu de
   la mythique (data-rarity="mythique", film holographique) et reçoit en plus : un double liseré doré autour de la
   jaquette, parcouru par un reflet lent ; une pastille de rareté noire à étoile dorée ; ses 6 points dorés. */
.gb-culte { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 .9cqw #C9A640, inset 0 0 0 1.3cqw rgba(30, 20, 5, .55), inset 0 0 0 1.8cqw #F2D67A, inset 0 0 4cqw rgba(242, 214, 122, .45); }
.gb-culte::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.8cqw;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 250, 220, .95) 50%, transparent 65%) 0 0 / 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: gb-culte-shine 4.5s linear infinite; }
@keyframes gb-culte-shine { from { background-position: 120% 120%; } to { background-position: -20% -20%; } }
@media (prefers-reduced-motion: reduce) { .gb-culte::after { animation: none; opacity: 0; } }
/* (Classe doublée : passe devant les règles mythiques de chaque style, chargées après ce fichier.) */
.card.gbox.is-culte.is-culte[data-rarity] .gb-rating--rarity strong { background: linear-gradient(135deg, #17110A, #3A2A0E); color: #F2D67A;
  box-shadow: inset 0 0 0 .35cqw #C9A640; }
.pips.pips--culte i.on { background: linear-gradient(135deg, #C9A640, #F7E7A6 50%, #B58C22) !important; box-shadow: inset 0 0 0 .3cqw rgba(60, 40, 5, .6) !important; }
/* (Pas de filter sur .gbox : il aplatirait la boîte en 3D.) */

/* Exemplaire d'import (colis d'import, js/gamebox.js) : autocollant du pays d'origine sur le film. */
.gb-import { position: absolute; z-index: 7; right: 3cqw; top: 3cqw; padding: 1cqw 2.2cqw; border-radius: 1.2cqw; pointer-events: none;
  font: 800 3.4cqw/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #C8102E;
  box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .35); transform: rotate(4deg); }
.gbox[data-variant="us"] .gb-import { background: #1F3E8C; }

/* Dos du boîtier : pareil pour toutes les boîtes. */
.gbox-back { background: var(--lilac); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8cqw 8cqw 6cqw;
  box-shadow: inset 0 0 0 .6cqw var(--ink), inset 0 0 0 3cqw var(--surface); }
.gb-back-lines { width: 100%; display: flex; flex-direction: column; gap: 2.4cqw; }
.gb-back-lines i { height: 2.2cqw; border-radius: 99px; background: rgba(58, 44, 64, .22); }
.gb-back-lines i:nth-child(2) { width: 85%; } .gb-back-lines i:nth-child(4) { width: 60%; }
.gb-barcode { align-self: flex-end; width: 26cqw; height: 11cqw; border: 1.2cqw solid var(--surface); background: repeating-linear-gradient(90deg, var(--ink) 0 .6cqw, transparent .6cqw 1.1cqw, var(--ink) 1.1cqw 2cqw, transparent 2cqw 2.6cqw) var(--surface); }

/* Tranche : couleur de rareté, titre à la verticale. */
.gbox-spine { background: var(--r); box-shadow: inset 0 0 0 .5cqw var(--ink), inset 0 14cqw 0 var(--ink); display: flex; justify-content: center; overflow: hidden; }
.gbox-spine span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); font-size: 5.4cqw; line-height: 1; color: var(--ink);
  padding: 4cqw 0; max-height: 120cqw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 14cqw; }
.gbox-right, .gbox-cap { background: linear-gradient(90deg, #D9CFDF, #F4EFF6 50%, #D2C7D9); box-shadow: inset 0 0 0 .4cqw rgba(58, 44, 64, .35); }

/* États partagés avec les pages : lueur à travers le dos avant la révélation. */
.gbox .card-count { top: -6px; right: -10px; }
.gbox .card-new { top: -8px; left: -10px; }

@media (prefers-reduced-motion: reduce) {
  .gbox.gbox-tilt.flipped:hover { --turn: 0deg; }
}

/* ---- Ajouts communs à tous les styles de boîte ---------------------------------------------- */
/* Suivi de la souris : rotation courte et fluide pendant le mouvement. */
.gbox.tracking .gbox-inner { transition: transform .15s ease-out; }
/* Encart de note : seulement pour les styles PS1, PS2 et NES. Ligne « Série » : seulement NES. */
.gb-rating { display: none; }
.gb-series { display: none; }
/* Côté ouvrant : jointure des deux coques et encoche pour le pouce. */
.gbox-right { overflow: hidden; }
.gb-seam { position: absolute; top: 0; bottom: 0; left: calc(50% - .25cqw); width: .5cqw; background: rgba(58, 44, 64, .35); }
.gb-notch { position: absolute; top: 50%; left: 50%; width: 6.5cqw; height: 18cqw; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse at 40% 50%, rgba(58, 44, 64, .35), rgba(58, 44, 64, .12) 70%); }

/* ---- Cadrage automatique des jaquettes (js/smartcrop.js) -------------------------------------- */
/* Fond d'ambiance : l'image entière, un peu agrandie, sur un fond flou tiré d'elle-même. */
/* Hors fond d'ambiance, une bannière de repli est recadrée comme les autres images. */
.gbox img.art-main.banner { object-fit: cover; }
/* Titre de la jaquette jamais coupé (js/smartcrop.js) : zones masquées par la boîte, en fraction
   de la hauteur de la fenêtre d'illustration, et fond visible si l'image doit être un peu réduite. */
.gbox .gb-art, .gbox .bb-art { --safe-top: 0; --safe-bottom: 0; }
.gbox--ps1 .gb-art { --safe-bottom: .3; }
.gbox--ps2 .gb-art { --safe-bottom: .27; }
.gbox .art-shrunk { background: #121117; }
.gbox--classic .art-shrunk { background: var(--r); }