/* ==========================================================================
   Page d'une caisse — jeux.php?view=caisse&id=...
   --------------------------------------------------------------------------
   La grille des caisses présente les caisses ; cette page-là montre ce qu'il y
   a DEDANS, en grand, et c'est de là qu'on ouvre. Une carte par objet : sa
   chance en clair, le visuel officiel de l'arme, son nom et sa valeur.
   ========================================================================== */

.casepage { display: block; }

/* ---- barre du haut ---- */
.casepage-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 4px 0 16px;
}
.casepage-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted, #a7adb5); text-decoration: none; font-size: 13.5px;
}
.casepage-back svg { width: 16px; height: 16px; }
.casepage-back:hover { color: var(--accent, #ff8a00); }
.casepage-title {
  margin: 0; font-size: clamp(20px, 3vw, 30px); line-height: 1.15; flex: 1 1 240px;
}
.casepage-top-right { margin-left: auto; }
.fav-star.casepage-fav { position: static; width: 34px; height: 34px; }

/* ---- bannière : la caisse en grand + de quoi l'ouvrir ---- */
.case-card.casepage-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 22px; align-items: center; padding: 20px; margin-bottom: 26px;
}
.casepage-hero-art {
  position: relative; display: grid; place-items: center; min-height: 220px;
  border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(70% 80% at 50% 46%, rgba(255,255,255,.09), transparent 72%),
    linear-gradient(160deg, #12161f, #080a0f);
  border: 1px solid var(--border, #232a37);
}
/* Un halo qui tourne lentement derrière la caisse : la bannière ne doit pas être morte. */
.casepage-hero-art::before {
  content: ''; position: absolute; inset: -30%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(255,138,0,.16) 78%, transparent 92%);
  animation: casepage-sweep 9s linear infinite;
}
@keyframes casepage-sweep { to { transform: rotate(360deg); } }
.casepage-hero-art .case-card-house { position: absolute; top: 10px; left: 10px; z-index: 2; }
.item-thumb.casepage-crate {
  position: relative; z-index: 1;
  width: min(320px, 76%); height: auto; aspect-ratio: 4 / 3;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.6));
}
.item-thumb.casepage-crate img { width: 100%; height: 100%; object-fit: contain; }

.casepage-hero-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.casepage-hero-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.casepage-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: #0b0d10; border: 1px solid var(--border, #232a37); color: var(--muted, #a7adb5);
}
.casepage-odds { display: grid; gap: 5px; }
.casepage-buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.casepage-buy .case-card-price { font-size: 19px; }
.case-open-btn.casepage-open { padding: 11px 30px; font-size: 15px; }
.casepage-batches { justify-content: flex-start; }
.casepage-locked {
  font-size: 12.5px; color: #ffb457;
  padding: 8px 11px; border-radius: 9px;
  background: rgba(255,180,87,.08); border: 1px solid rgba(255,180,87,.28);
}
.casepage-ev {
  font-size: 11.5px; line-height: 1.6; color: var(--faint, #7d858f);
  padding-top: 10px; border-top: 1px solid var(--border, #232a37);
}
.casepage-ev b { color: var(--muted, #a7adb5); }

/* ---- titre de la section contenu ---- */
.casepage-contents-head {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px;
}
.casepage-contents-head h2 { margin: 0; font-size: 19px; }
.casepage-contents-count { font-size: 12.5px; color: var(--faint, #7d858f); }

/* ---- la grille d'objets ---- */
.casepage-items {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
}
.casepage-item {
  position: relative; display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rarity-color) 16%, transparent), transparent 58%),
    var(--card, #141821);
  border: 1px solid var(--border, #232a37);
  border-top: 2px solid var(--rarity-color);
  transition: transform .14s ease, border-color .14s ease, box-shadow .18s ease;
}
.casepage-item:hover {
  transform: translateY(-3px);
  border-color: var(--rarity-color);
  box-shadow: 0 14px 34px -16px var(--rarity-color);
}
/* Repli sans color-mix : on garde le liseré de rareté, on perd juste le dégradé. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .casepage-item { background: var(--card, #141821); }
}

.casepage-item-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 9px 0;
}
.casepage-item-chance { font-size: 10.5px; color: var(--faint, #7d858f); white-space: nowrap; }
.casepage-item-chance b { color: var(--muted, #a7adb5); font-size: 11.5px; }
/* Le bouton « Inspecter » n'est plus qu'une loupe dans le coin : le nom de l'objet
   occupe déjà toute la largeur en bas de la carte. */
.casepage-item .inspect-btn {
  padding: 4px; min-width: 0; border-radius: 7px; line-height: 0;
  background: transparent; border: 1px solid var(--border, #232a37); color: var(--faint, #7d858f);
}
.casepage-item .inspect-btn svg { width: 14px; height: 14px; }
.casepage-item .inspect-btn:hover { color: var(--accent, #ff8a00); border-color: var(--accent, #ff8a00); }

.casepage-item-art {
  display: grid; place-items: center; padding: 4px 10px 2px; min-height: 108px;
}
.item-thumb.casepage-item-thumb {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
}
.item-thumb.casepage-item-thumb img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.55));
}

.casepage-item-foot { padding: 0 10px 9px; }
.casepage-item-weapon {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--faint, #7d858f);
}
.casepage-item-skin {
  font-weight: 800; font-size: 13.5px; line-height: 1.25; margin-top: 1px;
  overflow-wrap: anywhere;
}
.casepage-item-value {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px; font-size: 12px; color: var(--muted, #a7adb5);
}
.casepage-item-value .jeton-icon { width: 13px; height: 13px; }

.casepage-item-rarity {
  padding: 5px 10px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--rarity-color);
  background: color-mix(in srgb, var(--rarity-color) 12%, transparent);
  border-top: 1px solid var(--border, #232a37);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .casepage-item-rarity { background: #0b0d10; }
}

/* ---- « Voir la caisse » sur les cartes de la grille ---- */
a.case-card-media { display: block; text-decoration: none; color: inherit; }
a.case-card-name  { display: block; text-decoration: none; color: inherit; }
a.case-card-name:hover { color: var(--accent, #ff8a00); }
a.case-open-btn.case-enter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}

/* ---- petits écrans ---- */
@media (max-width: 860px) {
  .case-card.casepage-hero { grid-template-columns: 1fr; gap: 16px; }
  .casepage-hero-art { min-height: 170px; }
}
@media (max-width: 560px) {
  .casepage-items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
  .casepage-item-art { min-height: 88px; }
  .casepage-title { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .casepage-hero-art::before { animation: none; }
  .casepage-item:hover { transform: none; }
}

/* ==========================================================================
   Pictogrammes de monnaie : deux règles trop larges les écrasaient
   ==========================================================================
   1. Les onglets de filtre portent leur compteur dans un <span> stylé en pastille
      (« .case-currency-tab span { padding: 1px 7px } »). Or currency_icon_html() et
      jeton_icon_html() renvoient EUX AUSSI un <span> : le pictogramme héritait donc de
      14 px de padding horizontal sur une boîte de 16 px — il ne restait que 2 px de
      gemme, et rien du tout de la pièce. C'est ça, les icônes « invisibles » à côté de
      Gemmes et Clés. On ne touche pas à la règle d'origine (elle sert au compteur), on
      rend juste au pictogramme sa boîte. */
.case-currency-tab > .currency-icon,
.case-currency-tab > .jeton-icon,
.case-family-tab > .currency-icon,
.case-family-tab > .jeton-icon {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: inherit;
}

/* 2. Le <svg> de repli (celui qu'on voit si assets/jeton.png manque) s'étirait en
      ovale : dans un conteneur flex, « height: 100% » ne borne pas un enfant qui peut
      grandir. On lui interdit de s'étirer et on le cale sur la boîte du pictogramme. */
.jeton-icon > svg,
.currency-icon > svg {
  flex: none;
  align-self: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

/* ==========================================================================
   Détail des chances : trois colonnes alignées, et la couleur dans la barre
   ==========================================================================
   Deux défauts d'origine :

   1. La grille était « 1fr 68px auto ». La dernière colonne, en « auto », prenait la
      largeur du nombre — or « 0,280 % » n'a pas la largeur de « 80,0 % ». Résultat : la
      barre ne commençait pas au même endroit d'une ligne à l'autre, et les pourcentages
      ne formaient pas une colonne. Les trois largeurs sont maintenant fixes, et les
      chiffres sont en chasse tabulaire, alignés à droite.

   2. La piste restait grise. Sur un palier à 0,8 %, le remplissage coloré faisait moins
      d'un pixel : on ne voyait qu'une barre grise, sans savoir de quelle rareté on
      parlait. La piste est désormais teintée à la couleur du palier (en sourdine), et le
      remplissage a une largeur plancher pour rester visible même à 0,066 %.
   ========================================================================== */

/* Le détail des chances vit dans des largeurs très différentes : environ 150 px dans une
   carte de capsule, environ 500 px sur la page d'une caisse. Trois colonnes n'entrent pas
   dans 150 px — le libellé s'écrasait à zéro et le pourcentage débordait de la carte. On
   mesure donc le CONTENEUR, pas la fenêtre : au repos la ligne s'empile (libellé et
   pourcentage sur une ligne, barre pleine largeur dessous), et dès qu'il y a la place elle
   s'aligne en trois colonnes. Un navigateur sans requêtes de conteneur garde la version
   empilée partout : moins compacte, mais toujours lisible. */
.case-odds-panel,
.casepage-odds { container-type: inline-size; }

.odds-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "track track";
  gap: 3px 8px;
  font-size: 11px;
  padding: 2px 0;
}
.odds-row-label {
  grid-area: label;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.odds-row-value {
  grid-area: value;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.odds-row-track { grid-area: track; }

/* La piste ne reste plus grise : elle porte la couleur de son palier, en sourdine.
   Sur un palier à 0,8 %, le remplissage faisait moins d'un pixel — on ne voyait qu'une
   barre grise sans savoir de quelle rareté on parlait. Le remplissage a donc aussi une
   largeur plancher, pour rester visible jusqu'à 0,066 %. */
.odds-row-track {
  height: 7px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--rarity-color) 24%, transparent),
    color-mix(in srgb, var(--rarity-color) 10%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rarity-color) 30%, transparent);
}
.odds-row-fill {
  min-width: 5px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--rarity-color) 62%, #05070b),
    var(--rarity-color));
  box-shadow: 0 0 9px -1px var(--rarity-color);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .odds-row-track { background: rgba(255, 255, 255, .1); box-shadow: none; }
  .odds-row-fill  { background: var(--rarity-color); }
}

/* La ligne de détail se cale sous la colonne du libellé, pas sous la barre. */
.odds-row-each { padding-left: 0; }

@container (min-width: 300px) {
  .odds-row {
    grid-template-columns: minmax(0, 1fr) minmax(84px, 150px) 5.4em;
    grid-template-areas: "label track value";
    gap: 10px;
    padding: 1px 0;
  }
}

/* Sur la page d'une caisse, le détail des chances est affiché en permanence : il n'y a
   pas de panneau à déplier, donc le script des cartes (qui pose la largeur à
   l'ouverture) ne passe jamais. Les barres prennent donc leur valeur directement, et
   se remplissent une fois à l'arrivée, ligne après ligne. */
.casepage-odds .odds-row-fill {
  width: var(--w);
  animation: odds-grow .75s cubic-bezier(.22, 1, .36, 1) both;
}
.casepage-odds .odds-row:nth-child(2) .odds-row-fill { animation-delay: .07s; }
.casepage-odds .odds-row:nth-child(3) .odds-row-fill { animation-delay: .14s; }
.casepage-odds .odds-row:nth-child(4) .odds-row-fill { animation-delay: .21s; }
.casepage-odds .odds-row:nth-child(5) .odds-row-fill { animation-delay: .28s; }
.casepage-odds .odds-row:nth-child(6) .odds-row-fill { animation-delay: .35s; }
@keyframes odds-grow { from { width: 0; } to { width: var(--w); } }

@media (prefers-reduced-motion: reduce) {
  .casepage-odds .odds-row-fill { animation: none; width: var(--w); }
}