/* État des boîtes (prototype, js/wear.js) : calque d'usure posé sur la face et la tranche, couleurs passées.
   data-wear = mint | tres-bon | correct | abime ; data-material = plastique | carton. */
.gb-wear { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: center / 100% 100% no-repeat; }
.gbox-spine .gb-wear { z-index: 2; }

/* Rayures en texture (plastique) : blanc sur noir en mode « éclaircir » ; le carreau est tourné (d'où le calque
   intérieur plus grand que la face). Le masque les fait briller autour du reflet qui suit la souris (--mx / --my,
   posées par js/gamebox.js) et les laisse à peine visibles ailleurs. --strength : intensité selon l'état. */
.gb-scratch { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; border-radius: inherit;
  mix-blend-mode: screen; opacity: var(--strength, .6);
  -webkit-mask-image: radial-gradient(circle at var(--mx, 30%) var(--my, 22%), #000 0, rgba(0, 0, 0, .78) 35%, rgba(0, 0, 0, .42) 80%);
          mask-image: radial-gradient(circle at var(--mx, 30%) var(--my, 22%), #000 0, rgba(0, 0, 0, .78) 35%, rgba(0, 0, 0, .42) 80%); }
/* Zone de rayures (un défaut) : texture visible dans une ellipse --zw × --zh autour de --px / --py (tirés au
   hasard ; plus grande en Correct et Abîmé), toujours plus visible dans le reflet. */
.gb-scratch--few {
  -webkit-mask-image: radial-gradient(ellipse var(--zw, 17%) var(--zh, 12%) at var(--px, 50%) var(--py, 50%), #000 20%, transparent 100%),
                      radial-gradient(circle at var(--mx, 30%) var(--my, 22%), #000 0, rgba(0, 0, 0, .78) 35%, rgba(0, 0, 0, .42) 80%);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(ellipse var(--zw, 17%) var(--zh, 12%) at var(--px, 50%) var(--py, 50%), #000 20%, transparent 100%),
                      radial-gradient(circle at var(--mx, 30%) var(--my, 22%), #000 0, rgba(0, 0, 0, .78) 35%, rgba(0, 0, 0, .42) 80%);
          mask-composite: intersect; }
/* Les fines rayures de la texture sont très sombres : on les éclaircit fortement (le noir reste noir). */
.gb-scratch i { position: absolute; inset: -60%; background-repeat: repeat; filter: brightness(2.6) contrast(1.5); }

/* Mint : film neuf bien tendu, reflet net en diagonale et petit pli du film au coin (boîte « sous blister »).
   N'est plus utilisé : une Mint n'a aucune trace (js/wear.js ne crée plus ce calque). */
.gb-wear--mint { background:
    linear-gradient(118deg, transparent 0 20%, rgba(255, 255, 255, .22) 20.5% 21.5%, transparent 22% 58%, rgba(255, 255, 255, .12) 58.5% 59%, transparent 59.5%),
    linear-gradient(225deg, rgba(255, 255, 255, .5) 0 3%, transparent 3.5%); mix-blend-mode: screen; }

/* Cartons : le style de base (css/gamebox-nes.css, .gbox-front::before) dessine une usure fixe — faux pli en
   diagonale et coins râpés — sur toutes les boîtes. Quand l'état est géré ici (data-wear), elle est retirée :
   seuls les défauts tirés s'affichent, et une Mint reste impeccable. */
.gbox.gbox--nes[data-wear] .gbox-front::before { background: none; }

/* Couleurs qui passent avec l'usure (lumière, frottements) : illustration et bandeau seulement, pas la pastille. */
.gbox[data-wear="correct"] :is(.gb-art, .bb-art) img, .gbox[data-wear="correct"] .gb-band { filter: saturate(.86) brightness(1.03); }
.gbox[data-wear="abime"] :is(.gb-art, .bb-art) img, .gbox[data-wear="abime"] .gb-band { filter: saturate(.66) sepia(.16) brightness(1.04); }
/* Plastique abîmé : le boîtier devient mat, le reflet s'éteint en partie. */
.card.gbox[data-wear="abime"][data-material="plastique"] .gbox-front .gb-gloss { opacity: .35; }
.card.gbox[data-wear="correct"][data-material="plastique"] .gbox-front .gb-gloss { opacity: .6; }

/* ---- Pastille de l'état (collection, albums, carton…) : sous la boîte, au milieu -------------------------- */
.card-wear { position: absolute; z-index: 3; left: 50%; bottom: -9px; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  padding: .28em .75em; border-radius: 999px; font: 800 .72rem/1 var(--font-body); letter-spacing: .02em; color: #2A2230;
  background: #E9E3EC; box-shadow: 0 0 0 1.5px rgba(42, 34, 48, .75), 1px 2px 0 rgba(0, 0, 0, .25); }
.card-wear[data-wear="mint"] { background: #BFEBD2; }
.card-wear[data-wear="tres-bon"] { background: #CFE2F8; }
.card-wear[data-wear="correct"] { background: #F6E3AE; }
.card-wear[data-wear="abime"] { background: #F2BDB2; }
/* Boîte restaurée (objets de réparation, 2026-10-08) : petit « R » cerclé après l'état. */
.card-restored { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-left: .35em; border-radius: 50%; font-style: normal;
  font-size: .85em; line-height: 1; color: #fff; background: #7A5A3A; vertical-align: -.1em; }
.card-wear[data-wear="scellee"] { background: linear-gradient(135deg, #F4F8FF, #C9D6EA 45%, #F4F8FF 70%, #B8C7DE); }
/* ---- Boîte scellée (sous plastique, js/gamebox.js) ----------------------------------------------------------
   Film rétractable : voile légèrement bleuté, gros reflet qui suit la souris (--mx / --my), bande de lumière en
   diagonale, plis froissés aux coins et soudure du film le long d'un bord. */
.gb-shrink { position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit; mix-blend-mode: screen;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 22%), rgba(255, 255, 255, .75), transparent 34%),
    linear-gradient(118deg, transparent 0 14%, rgba(255, 255, 255, .55) 19%, rgba(255, 255, 255, .15) 23%, transparent 27% 54%, rgba(255, 255, 255, .38) 59%, transparent 66%),
    linear-gradient(90deg, transparent 88%, rgba(255, 255, 255, .28) 93%, transparent 97%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none' fill='none' stroke='white' stroke-linecap='round'%3E%3Cg stroke-opacity='.9' stroke-width='.8'%3E%3Cpath d='M0 9q6-2 9-9M0 15q9-3 14-15M3 4l5 3M96 0q-3 7 4 11M90 0q-1 9 10 16M100 131q-7 1-9 9M100 124q-11 3-15 16M0 128q8 2 10 12M0 121q12 4 16 19'/%3E%3C/g%3E%3Cg stroke-opacity='.6' stroke-width='.55'%3E%3Cpath d='M5 0q2 5-1 9M12 2q-3 6 2 10M94 6q-4 3-1 8M97 133q-5-2-8 2M6 133q4-2 6 3M2 138q5-6 11-4'/%3E%3C/g%3E%3Cpath d='M98.6 0V140' stroke-opacity='.45' stroke-width='.6' stroke-dasharray='1.5 1'/%3E%3C/svg%3E") 0 0 / 100% 100%,
    linear-gradient(rgba(225, 235, 255, .16), rgba(225, 235, 255, .16));
  box-shadow: inset 0 0 0 .6cqw rgba(255, 255, 255, .45), inset 0 0 4cqw rgba(255, 255, 255, .3); }
.gbox-spine .gb-shrink, .gbox-top .gb-shrink { background:
    linear-gradient(180deg, rgba(255, 255, 255, .3), transparent 30% 70%, rgba(255, 255, 255, .25)), linear-gradient(rgba(225, 235, 255, .12), rgba(225, 235, 255, .12)); }
/* Plis du film (2026-10-01, texture CC0 calculée depuis ambientCG Foil001 : scripts/make-shrinkwrap.ps1) : reflets des
   plis en mode « écran », plus marqués près des bords (le film se tend au milieu, se froisse sur les côtés) et dans
   le reflet qui suit la souris. */
.gb-shrink-folds { position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: screen; opacity: .7;
  background: url("../assets/textures/shrinkwrap.jpg") 0 0 / 140% auto repeat;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0, 0, 0, .3) 30%, #000 95%), radial-gradient(circle at var(--mx, 30%) var(--my, 22%), #000, transparent 45%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0, 0, 0, .3) 30%, #000 95%), radial-gradient(circle at var(--mx, 30%) var(--my, 22%), #000, transparent 45%);
  -webkit-mask-composite: source-over; mask-composite: add; }
.gbox-spine .gb-shrink-folds, .gbox-top .gb-shrink-folds { background-size: 600% auto; -webkit-mask-image: none; mask-image: none; opacity: .5; }
/* Sous le plastique, le reflet d'origine du boîtier s'efface au profit de celui du film. */
.gbox.is-sealed .gbox-front .gb-gloss { opacity: .35; }

/* Boîte de dos (révélation) ou en grand : pas de pastille (l'état est dans la fiche et le scan). */
.gbox:not(.flipped) .card-wear, .zoom-stage .card-wear, .shelf-slot .card-wear { display: none; }
/* Ouverture d'un carton : pas d'état affiché quand on retourne une boîte (demande de l'utilisateur, 2026-10-01) ;
   il apparaît dans le récapitulatif. */
.reveal-slot .card-wear { display: none; }

/* Sélecteur d'exemplaire (fiche du jeu, js/detail.js) : une petite boîte par exemplaire, avec son état. */
.copy-picker { margin: 4px 0 8px; }
.copy-picker h3 { font-size: 1rem; margin: 0 0 10px; }
.copy-list { display: flex; flex-wrap: wrap; gap: 18px 12px; margin: 0; padding: 0; list-style: none; }
.copy-list button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 64px; cursor: pointer;
  padding: 6px 4px 4px; border-radius: 12px; font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.15; }
.copy-list button .card { --w: 48px; }
.copy-list button .card-wear { display: none; }
.copy-list button:hover { background: rgba(255, 255, 255, .06); }
.copy-list button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px currentColor; }
.copy-list button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.copy-list .copy-state { display: inline-block; padding: .2em .55em; border-radius: 999px; color: #2A2230; background: #E9E3EC; font-size: .7rem; }
.copy-list .copy-state[data-wear="mint"] { background: #BFEBD2; }
.copy-list .copy-state[data-wear="tres-bon"] { background: #CFE2F8; }
.copy-list .copy-state[data-wear="correct"] { background: #F6E3AE; }
.copy-list .copy-state[data-wear="abime"] { background: #F2BDB2; }
.copy-list .copy-state[data-wear="scellee"] { background: linear-gradient(135deg, #F4F8FF, #C9D6EA 45%, #F4F8FF 70%, #B8C7DE); }

/* ---- Scan de la boîte (plein écran, js/wear.js scanBox) ------------------------------------------------ */
/* Faisceau qui balaie la face de haut en bas. */
.gb-scan-beam { position: absolute; left: -4%; right: -4%; height: 18%; z-index: 8; pointer-events: none; top: -20%;
  background: linear-gradient(180deg, transparent, rgba(120, 230, 255, .18) 40%, rgba(170, 245, 255, .9) 50%, rgba(120, 230, 255, .18) 60%, transparent);
  box-shadow: 0 0 2cqw rgba(120, 230, 255, .5); animation: gb-scan-sweep 1.3s cubic-bezier(.45, 0, .55, 1) forwards; }
@keyframes gb-scan-sweep { to { top: 102%; } }
.gbox.is-scanning .gbox-front { box-shadow: 0 0 0 .5cqw rgba(120, 230, 255, .6), 0 0 6cqw rgba(120, 230, 255, .35); }
/* Après le scan : un voile sombre passe sous les dégâts (z-index 4 : au-dessus de la façade, sous les calques
   d'usure), qui ressortent. Première version : filtre sur l'image, sans effet sur les façades Black Box. */
.gb-scan-dim { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: rgba(12, 10, 16, .62);
  animation: gb-scan-in .4s ease-out; }
.gbox.is-scanned .gb-gloss { opacity: 0 !important; }
.gbox.is-scanned .gb-scratch { opacity: 1; -webkit-mask-image: none; mask-image: none; }
.gbox.is-scanned .gb-scratch--few { -webkit-mask-image: radial-gradient(ellipse var(--zw, 17%) var(--zh, 12%) at var(--px, 50%) var(--py, 50%), #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--zw, 17%) var(--zh, 12%) at var(--px, 50%) var(--py, 50%), #000 20%, transparent 100%); }
.gbox.is-scanned .gb-wear { filter: brightness(1.5) drop-shadow(0 0 .6cqw rgba(255, 210, 110, .8)); }
/* Défauts entourés, avec leur nom. */
.gb-scan { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.gb-scan-mark { position: absolute; border: .45cqw dashed #FFC857; border-radius: 1.2cqw; background: rgba(255, 200, 87, .08);
  box-shadow: 0 0 1.6cqw rgba(255, 200, 87, .35); opacity: 0; animation: gb-scan-in .35s ease-out var(--delay, 0ms) forwards; }
.gb-scan-mark--whole { border-style: solid; border-color: rgba(255, 200, 87, .55); background: none; border-radius: inherit; }
/* Pastille numérotée (légende dans le bilan, sous la boîte). */
.gb-scan-pin { position: absolute; display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 50%;
  background: #FFC857; color: #2A1E12; font: 800 2.8cqw/1 var(--font-body); box-shadow: 0 0 0 .4cqw rgba(20, 16, 24, .85), 0 .4cqw 1cqw rgba(0, 0, 0, .5); }
/* Légende du scan (sous la boîte) : mêmes pastilles numérotées. */
.scan-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 6px 0 0; padding: 0; list-style: none; font-size: .9rem; }
.scan-legend li { display: flex; align-items: center; gap: 6px; }
.scan-legend b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #FFC857; color: #2A1E12; font-size: .75rem; }
@keyframes gb-scan-in { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: none; } }

/* Barre d'outils de la vue en grand (bouton « Scanner la boîte » et bilan). */
.zoom-tools { position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column;
  align-items: center; gap: 10px; max-width: min(640px, 92vw); text-align: center; }
.zoom-tools:empty { display: none; }
.zoom-tools .scan-result { margin: 0; padding: 8px 16px; border-radius: 12px; background: rgba(20, 16, 24, .82); color: #F6EADB; font-size: .95rem; }
.zoom-tools .scan-result:empty { display: none; }
/* Objets de réparation (2026-10-08) : « Scanner » et « Réparer » côte à côte ; la liste des défauts s'ouvre dessous. */
.zoom-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.repair-panel { width: min(520px, 92vw); max-height: 42vh; overflow: auto; padding: 12px 14px; border-radius: 14px; text-align: left;
  background: rgba(20, 16, 24, .9); color: #F6EADB; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.repair-head { margin: 0 0 8px; display: grid; gap: 2px; }
.repair-head small { color: #CDBBA8; font-size: .85rem; }
.repair-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.repair-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(246, 234, 219, .14); }
.repair-defect { display: grid; gap: 1px; min-width: 0; }
.repair-defect small { color: #CDBBA8; font-size: .82rem; }
.repair-list .btn { flex: none; }
.repair-shop { display: inline-block; margin-top: 10px; color: #FFC857; font-weight: 800; font-size: .9rem; }

/* Décoloration (soleil) : dégradé elliptique centré sur un bord (--cx / --cy, rayons --rx / --ry, force --k).
   1er calque : retire la couleur (mode « saturation ») ; 2e : éclaircit et jaunit légèrement (mode « écran »). */
.gb-fade { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse var(--rx) var(--ry) at var(--cx) var(--cy),
    rgba(128, 128, 128, var(--k)) 0, rgba(128, 128, 128, calc(var(--k) * .7)) 40%, transparent 100%);
  mix-blend-mode: saturation; }
.gb-fade--tint { mix-blend-mode: screen;
  background: radial-gradient(ellipse var(--rx) var(--ry) at var(--cx) var(--cy),
    rgba(120, 100, 60, calc(var(--k) * .55)) 0, rgba(120, 100, 60, calc(var(--k) * .3)) 45%, transparent 100%); }
.gbox.is-scanned .gb-fade { z-index: 5; }