/* ==================================================================
   base.css, jetons de design, mise en page, en-tête, lecteur, toasts
   ================================================================== */

:root {
  /* fond */
  --bg:        #07070c;
  --bg-2:      #0d0d16;
  --panel:     rgba(255,255,255,.045);
  --panel-2:   rgba(255,255,255,.075);
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.18);

  /* texte */
  --ink:       #f2f3f8;
  --ink-2:     #a7adbf;
  --ink-3:     #6e7488;

  /* accent */
  --accent:    #8b5cf6;
  --accent-2:  #22d3ee;
  --danger:    #ff4d6d;

  --radius:    18px;
  --radius-sm: 12px;
  --shadow:    0 24px 60px -20px rgba(0,0,0,.85);

  --head-h:    64px;
  /* La hauteur réservée en bas d'écran : la barre d'onglets sur
     téléphone, plus la zone de l'indicateur d'accueil. Tout ce qui se
     pose en bas (lecteur, toasts, fin de page) s'appuie dessus. */
  --tabbar-h:  0px;
  /* La marge du bas est plafonnée : en application installée, certains
     Android annoncent toute la barre de navigation (70 px et plus), et la
     barre d'onglets doublait de hauteur pour rien. */
  --safe-b:    min(env(safe-area-inset-bottom, 0px), 14px);
  --dock:      calc(var(--tabbar-h) + var(--safe-b));
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);

  --shake: 0px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Plusieurs composants (lecteur, détail d'album, toast) posent un `display`
   dans leur classe, qui l'emporte sur la règle navigateur `[hidden]`. Sans
   ça, un panneau « masqué » reste posé en plein écran et avale les clics. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* lueurs de fond, fixes et très douces */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 620px at 18% -8%,  rgba(139,92,246,.20), transparent 62%),
    radial-gradient(760px 560px at 88% 4%,   rgba(34,211,238,.14), transparent 60%),
    radial-gradient(1100px 800px at 50% 108%, rgba(255,80,140,.10), transparent 65%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 60%);
}

body.stage-open { overflow: hidden; }

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
p { margin: 0; }
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--panel-2);
  padding: .1em .4em;
  border-radius: 5px;
}

/* ---------------------------- secousse ---------------------------- */

@keyframes body-shake {
  0%,100% { transform: translate3d(0,0,0); }
  10% { transform: translate3d(calc(var(--shake) * -1), calc(var(--shake) * .4), 0) rotate(-.25deg); }
  25% { transform: translate3d(var(--shake), calc(var(--shake) * -.5), 0) rotate(.25deg); }
  40% { transform: translate3d(calc(var(--shake) * -.7), calc(var(--shake) * .2), 0); }
  55% { transform: translate3d(calc(var(--shake) * .6), var(--shake), 0) rotate(-.15deg); }
  70% { transform: translate3d(calc(var(--shake) * -.35), calc(var(--shake) * -.3), 0); }
  85% { transform: translate3d(calc(var(--shake) * .18), calc(var(--shake) * .12), 0); }
}
.is-shaking { animation: body-shake .52s cubic-bezier(.36,.07,.19,.97); }

/* --------------------------- couches FX --------------------------- */

#fx-flash {
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
#fx-canvas {
  position: fixed; inset: 0;
  z-index: 9001;
  pointer-events: none;
}

/* ----------------------------- en-tête ----------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(14px, 3vw, 32px);
  background: rgba(7,7,12,.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.02em; }
.brand-mark {
  font-size: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(139,92,246,.6));
}
.brand-name { font-size: 17px; }
.brand-name em { font-style: normal; color: var(--ink-2); }

.tabs {
  display: flex;
  gap: 2px;
  margin-inline: auto;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.tab:hover { color: var(--ink); }
.tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(139,92,246,.9), rgba(34,211,238,.55));
  box-shadow: 0 6px 20px -8px rgba(139,92,246,.9);
}

.wallet { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.wallet b { color: var(--ink); font-variant-numeric: tabular-nums; }
.wallet-sep { width: 1px; height: 16px; background: var(--line-2); }

/* ------------------------------ vues ------------------------------ */

main { padding: clamp(22px, 4vw, 48px) clamp(14px, 3vw, 32px) 120px; }

.view { display: none; max-width: 1280px; margin: 0 auto; }
.view.is-active { display: block; animation: view-in .38s var(--ease-out) both; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------- une page, pas de defilement -------------------------

   L'ecran d'ouverture doit tenir en entier : on choisit un booster et on
   l'ouvre, sans jamais chercher le bouton plus bas. Le corps devient donc
   une colonne de la hauteur de la fenetre, et le presentoir prend ce qui
   reste une fois la barre du haut, le rail et les boutons places.

   `dvh` plutot que `vh` : sur telephone la barre d'adresse du navigateur
   se retracte au defilement, et `vh` ignore ce mouvement, ce qui laisse
   toujours une centaine de pixels sous le pli.
   ------------------------------------------------------------------- */

/* `height: auto` sur le corps, et surtout pas 100 % : bloqué à la
   hauteur de la fenêtre, il laissait `main` rétrécir, le contenu
   débordait de sa boîte, et la marge du bas (celle qui dégage la barre
   d'onglets) se retrouvait au milieu de la page au lieu de la fin. C'est
   ce qui faisait passer le bas de chaque page sous la barre. */
body { height: auto; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }
/* Seul l'écran d'ouverture tient exactement dans la fenêtre : le sachet
   s'y dimensionne sur la place restante (unités de conteneur), ce qui
   demande une hauteur définie tout au long de la chaîne. */
body.is-fit { height: 100dvh; }
body.is-fit main { flex: 1 1 auto; min-height: 0; }
.view.is-active { flex: 1 1 auto; min-height: 0; width: 100%; }

/* ------------------------------ cotes ------------------------------ */

.odds-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.odds-label { width: 100%; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; font-size: 11px; }
.odds-item { display: inline-flex; align-items: center; gap: 6px; }
.odds-item i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
}
.odds-item b { color: var(--ink); font-variant-numeric: tabular-nums; }

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

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 22px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform .18s var(--ease-back), box-shadow .2s, background .2s, border-color .2s;
}
.btn:active { transform: scale(.96); }

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #6d28d9);
  box-shadow: 0 12px 30px -12px rgba(139,92,246,.95);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(139,92,246,1); }

.btn-ghost {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--line-2);
}
.btn-ghost:hover { background: var(--panel-2); }

.btn-danger { color: #fff; background: linear-gradient(135deg, #ff4d6d, #c81e4a); box-shadow: 0 12px 30px -14px rgba(255,77,109,.9); }
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -14px rgba(255,77,109,1); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* ------------------------------ infos ------------------------------ */

.about { max-width: 980px; margin: 0 auto; }
.about h1 { font-size: clamp(28px, 4.4vw, 40px); text-align: center; margin-bottom: 28px; }

.about-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.about-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.about-card h2 { font-size: 17px; margin-bottom: 10px; }
.about-card p { color: var(--ink-2); font-size: 14.2px; }
.about-card p + p { margin-top: 10px; }
.about-card b { color: var(--ink); font-weight: 600; }
.about-card .note {
  font-size: 13px;
  color: var(--ink-3);
  border-left: 2px solid var(--line-2);
  padding-left: 12px;
}

.rarity-legend { margin-top: 14px; display: grid; gap: 6px; }
.legend-row {
  display: grid;
  grid-template-columns: 10px 110px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.legend-row i {
  width: 10px; height: 10px; border-radius: 3px;
  background: var(--c); box-shadow: 0 0 10px var(--c);
}
.legend-row b { color: var(--ink); font-weight: 600; }

.about-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ----------------------------- lecteur ----------------------------- */

.player {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock) + 12px);
  z-index: 8000;
  transform: translate(-50%, 130%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 9px;
  width: min(520px, calc(100vw - 28px));
  background: rgba(14,14,22,.86);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: transform .42s var(--ease-back), opacity .3s;
}
.player.is-open { transform: translate(-50%, 0); opacity: 1; }

.player-art {
  width: 42px; height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid var(--line-2);
}
.player-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.player.is-playing .player-art { animation: spin-slow 7s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

.player-meta { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; }
.player-meta strong { font-size: 13.5px; }
.player-meta span { font-size: 12px; color: var(--ink-2); }
.player-meta strong, .player-meta span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.player-bar {
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.player-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.player-btn {
  appearance: none;
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.player-btn:hover { background: rgba(255,255,255,.16); transform: scale(1.06); }
.player-btn .i { width: 15px; height: 15px; }
.player-spotify .i { width: 19px; height: 19px; }
.player-spotify { color: #1ed760; border-color: rgba(30,215,96,.42); background: rgba(30,215,96,.12); }
.player-spotify:hover { background: rgba(30,215,96,.22); }
.ico-spotify { width: 19px; height: 19px; fill: currentColor; }

.player.is-loading .player-art { opacity: .45; }

/* ------------------------------ toast ------------------------------ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock) + 18px);
  z-index: 9600;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(460px, calc(100vw - 28px));
  transform: translate(-50%, 16px) scale(.96);
  padding: 11px 16px 11px 13px;
  background: rgba(22, 22, 34, .97);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.4;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9);
  opacity: 0;
  transition: opacity .22s, transform .35s var(--ease-back);
  pointer-events: none;
}
.toast .i { flex: 0 0 auto; width: 18px; height: 18px; color: #8bb4ff; }
.toast.is-ok .i { color: #2ee08a; }
.toast.is-error { border-color: rgba(255, 77, 109, .45); }
.toast.is-error .i { color: var(--danger); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* quand le lecteur est ouvert, le message se pose au-dessus de lui */
body.has-player .toast { bottom: calc(var(--dock) + 92px); }

/* ---------------------------- pictogrammes ---------------------------- */

.i {
  width: 1.15em; height: 1.15em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.2em;
}

.icon-btn {
  appearance: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, transform .25s var(--ease-back), border-color .2s;
}
.icon-btn .i { width: 16px; height: 16px; }
.icon-btn:hover { background: rgba(255, 255, 255, .14); }
.icon-btn:active { transform: scale(.92); }

/* ------------------------------ en-têtes de page ------------------------------ */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 18px;
  margin-bottom: 16px;
}
.page-head h1 {
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: -.03em;
  background: linear-gradient(180deg, #fff 30%, #c9c2e8);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.page-lead {
  max-width: 62ch;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ------------------------------ réglages ------------------------------ */

.settings {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
}
.set-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 14px 16px;
}
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 220px; }
.set-txt b { font-size: 14px; }
.set-txt span { font-size: 12px; line-height: 1.5; color: var(--ink-3); }

/* l'interrupteur */
.switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px; height: 26px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.switch i {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  transition: transform .3s var(--ease-back);
}
.switch[aria-checked="true"] {
  background: linear-gradient(135deg, var(--accent), #6d28d9);
  border-color: transparent;
}
.switch[aria-checked="true"] i { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid #8bb4ff; outline-offset: 2px; }

/* ------------------------------ boîte de dialogue ------------------------------ */

.dlg .dbzp-box { width: min(420px, 100%); }
.dlg h2 { font-size: 18px; margin-bottom: 8px; padding-right: 0; }
.dlg .dbzp-lead { margin-bottom: 14px; line-height: 1.55; }
.dlg-input {
  width: 100%;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: rgba(0, 0, 0, .3);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.dlg-input:focus {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .2);
}
.dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.dlg-actions .btn { min-width: 110px; }

/* --------------------------- responsive --------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Une fenêtre qui se ferme ne doit plus capter les clics pendant son
   fondu : on pouvait toucher un onglet et ne rien obtenir. */
.dbzp:not(.is-on), .haul:not(.is-on), .detail:not(.is-on) { pointer-events: none; }

/* Le logo n'est pas carré (2000 × 1091) : partout où on le pose dans une
   case carrée, il garde ses proportions au lieu d'être écrasé. */
img[src$="logo-mark.webp"] { object-fit: contain; }