/* ─────────────────────────────────────────────────────────────────
   player.css
   Extracted from kurtezy-v2.html on 2026-04-19 (Item 7 of audit
   2026-04-19 — see docs/PLAYING-CARD-UNIFICATION-2026-04-19.md).
   Loaded from kurtezy-v2.html via <link rel="stylesheet">.
   ───────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   PERSISTENT AUDIO PLAYER (bottom bar)
   — stays alive across all view transitions
   ════════════════════════════════════════════════════════════════ */
#player-bar {
  position:fixed; bottom:0; left:0; right:0;
  height:var(--player-h);
  background:var(--v-dk);
  border-top:1px solid rgba(255,255,255,.07);
  box-shadow:0 -2px 14px rgba(0,0,0,.22);
  display:grid;
  grid-template-columns:minmax(220px,240px) 1fr minmax(140px,160px);
  align-items:center;
  gap:0;
  z-index:600;
}
#player-bar.hidden { transform:translateY(100%); }

/* Now playing section */
.np {
  display:flex; align-items:center; gap:12px;
  padding:0 20px;
  border-right:1px solid rgba(255,255,255,.06);
  height:100%;
}
.np-art {
  width:44px; height:44px; flex-shrink:0;
  position:relative; overflow:hidden;
  /* Ben 2026-04-18: "contour noir, pas blanc" — le label (macaron) doit être
     encerclé par le vinyle noir pour ressembler à un vrai disque en mini. */
  background:#000;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
.np-art-label {
  padding:0;
  width:80% !important; height:80% !important;
  inset:10% !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}
.np-art-disc {
  width:44px; height:44px; border-radius:50%;
  background:repeating-radial-gradient(circle at center,
    #0f0f0f 0px,#1a1a1a 1.5px,#080808 3px);
  animation:disc-spin 1.5s linear infinite;
  animation-play-state:paused;
}
#player-bar.playing .np-art-disc {
  animation-play-state:running;
}
.np-art::after {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:6px; height:6px; border-radius:50%;
  background:#000; border:1px solid rgba(255,255,255,.3);
  z-index:2;
}
/* Real macaron image overlay (label_a for A-side, label_b for B-side).
   Ben vocal 2026-04-18: le mini-thumb DOIT afficher le vrai macaron, pas
   un disque procédural. Switch A↔B suit la face du track en cours. */
.np-art-label {
  position:absolute; inset:0;
  width:44px; height:44px; border-radius:50%;
  object-fit:cover; display:none;
  animation:disc-spin 1.5s linear infinite;
  animation-play-state:paused;
}
.np-art.has-label .np-art-label { display:block; }
.np-art.has-label .np-art-disc { display:none; }
#player-bar.playing .np-art.has-label .np-art-label { animation-play-state:running; }
.np-info { min-width:0; flex:1; }
.np-title {
  font-family:var(--ff-h); font-size:11px; font-weight:600;
  color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.np-artist {
  font-size:10px; color:rgba(255,255,255,.45);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-top:2px;
}
.np-label-tag {
  font-family:var(--ff-h); font-size:7px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--v-mid); margin-top:3px;
}

/* Central: controls + waveform side-by-side (yoyaku.io style) */
.player-center {
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center; gap:16px;
  padding:0 24px;
  height:100%;
}
.player-controls {
  display:flex; align-items:center; gap:8px;
}
.ctrl-btn {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55); font-size:12px; cursor:pointer;
  transition:color .15s, background .15s;
}
.ctrl-btn:hover { color:#fff; background:rgba(255,255,255,.07); }
/* SVG icons inside controls are decorative — force clicks through to the
   <button> so mousedown/mouseup always match even when innerHTML of the
   play button is swapped on play/pause transitions. Ben 2026-04-20:
   "le bouton pause ne marche pas" — root cause was click-target drift on
   innerHTML replacement. */
.ctrl-btn svg { pointer-events: none; }
.ctrl-play {
  width:38px; height:38px;
  background:var(--v); color:#fff; border-radius:50%;
  transition:background .15s, transform .15s;
  box-shadow:0 2px 8px rgba(var(--v-rgb),.35);
  line-height:1;
  font-family:-apple-system, "Segoe UI", "Noto Sans Symbols 2", sans-serif;
  padding:0;
}
.ctrl-play:hover { background:var(--v-mid); transform:scale(1.06); }

/* Waveform canvas — 56px = beefy. Reads clearly as audio, not a hairline. */
.waveform-wrap {
  position:relative; height:56px; cursor:pointer;
  display:flex; align-items:center;
}
#waveform-canvas {
  width:100%; height:56px; cursor:pointer; display:block;
}
.time-row {
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-size:10px; color:rgba(255,255,255,.55);
  letter-spacing:.04em; font-family:var(--ff-h); font-weight:600;
  font-variant-numeric: tabular-nums;
  min-width:72px;
}
.time-row #time-dur { font-size:9px; color:rgba(255,255,255,.32); }

/* Right: volume + queue */
.player-right {
  display:flex; align-items:center; gap:12px;
  padding:0 18px;
  border-left:1px solid rgba(255,255,255,.06);
  height:100%;
}
.vol-wrap {
  display:flex; align-items:center; gap:6px;
}
.vol-icon { color:rgba(255,255,255,.4); font-size:12px; }
.vol-slider {
  -webkit-appearance:none;
  width:70px; height:3px;
  background:rgba(255,255,255,.15);
  outline:none; cursor:pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:10px; height:10px; border-radius:50%;
  background:var(--v-mid); cursor:pointer;
}
.queue-btn {
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.4); font-size:13px; cursor:pointer;
  transition:color .15s;
}
.queue-btn:hover { color:#fff; }

/* ═══ TOAST ═══ */
#toast {
  position:fixed; bottom:calc(var(--player-h) + 14px); left:50%;
  transform:translateX(-50%) translateY(10px);
  background:var(--text); color:var(--bg);
  font-family:var(--ff-h); font-size:9px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  padding:9px 18px; z-index:2000;
  opacity:0; pointer-events:none;
  transition:opacity .22s, transform .22s var(--ease);
  white-space:nowrap;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* ═══ KURTEZY RESTYLE — modern shell + ocre direction ═══ */
body {
  position:relative;
  background:
    radial-gradient(circle at top left, rgba(var(--v-mid-rgb),.18), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(var(--v-rgb),.10), transparent 20%),
    linear-gradient(180deg, #F1EADF 0%, var(--bg) 42%, #E7DECE 100%);
}
body::before {
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,0)),
    repeating-linear-gradient(90deg, rgba(122,100,69,.03) 0, rgba(122,100,69,.03) 1px, transparent 1px, transparent 6px);
  mix-blend-mode:multiply;
  opacity:.45;
}
header,
#weeknav,
.filter-bar,
.stats,
.detail-header {
  background:rgba(243,237,225,.88);
  backdrop-filter:blur(18px);
}
.topbar,
.preorder-band,
footer,
#player-bar {
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 42%),
    radial-gradient(circle at 24% 18%, rgba(var(--v-mid-rgb),.12), transparent 22%),
    linear-gradient(180deg, #241B10 0%, var(--v-dk) 100%);
}

/* Hero + detail viewer — scene surface, lifted 18% from the frame gradient.
   Keeps the editorial mood but makes the 3D composition pop without feeling black. */
.hero-r,
.detail-viewer-wrap {
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 42%),
    radial-gradient(circle at 28% 22%, rgba(var(--v-mid-rgb),.18), transparent 30%),
    linear-gradient(180deg, #3a2e1f 0%, #1e2740 100%);
}
.topbar {
  border-bottom:1px solid rgba(var(--v-mid-rgb),.14);
  box-shadow:0 10px 28px rgba(26,20,8,.16);
}
.tb-login,
.btn-cart,
.btn-v,
.c-btn.on,
.detail-add,
.ctrl-play {
  background:var(--v);
  color:#fff;
  border-radius:999px;
  font-weight:600;
}
.tb-login:hover,
.btn-cart:hover,
.btn-v:hover,
.detail-add:hover,
.ctrl-play:hover {
  background:var(--v-mid);
}
.logo {
  font-weight:500;
  letter-spacing:-.04em;
}
.logo-dot {
  width:8px;
  height:8px;
  margin-left:7px;
  background:linear-gradient(135deg, var(--v-mid) 0%, var(--v) 100%);
  box-shadow:0 0 0 4px rgba(var(--v-rgb),.14);
}
.logo-sub {
  letter-spacing:.24em;
  color:#8A7A66;
}
.hdr-search,
.btn-back,
.btn-blk,
.btn-play-hero,
.filter-chip,
.hero-label,
.hero-genre-tag,
.week-cnt,
.pchip,
.pbadge,
.pgenre,
.detail-label,
.detail-genre-chip,
.detail-play-all,
.cart-count {
  border-radius:999px;
}
.hdr-search {
  background:rgba(251,246,237,.92);
}
.hdr-search:focus {
  border-color:var(--v);
  box-shadow:0 0 0 4px rgba(var(--v-rgb),.12);
}
.week-tab.on .week-cnt,
.filter-chip.on,
.hero-genre-tag:hover,
.pchip:hover,
.detail-genre-chip:hover,
.detail-play-all:hover {
  background:var(--v);
  color:var(--text);
}
.filter-chip:hover,
.btn-play-hero:hover,
.hero-artist-name:hover,
.hero-artist:hover,
.part:hover,
.detail-artist:hover {
  color:var(--v);
  border-color:var(--v);
}
.hero-r,
.detail-viewer-wrap,
.preorder-band,
footer,
#player-bar {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.hero-artist-name,
.hero-title,
.stat-n,
.detail-title,
.sec-hd h2,
.preorder-hd h3,
.ft-logo {
  font-weight:500;
}
.sec-hd h2,
.preorder-hd h3 {
  text-transform:none;
  letter-spacing:-.02em;
}
.vsp-disc::before {
  background:radial-gradient(circle, var(--v-mid) 0%, var(--v) 58%, #8F6517 100%);
}
.face-btn.active {
  background:rgba(var(--v-rgb),.16);
}
.face-btn.active .fb-label {
  color:var(--v-mid);
}
.face-btn.active .fb-thumb,
.face-btn.active .fb-disc,
.face-btn.active .fb-placeholder {
  border-color:rgba(var(--v-mid-rgb),.72);
}
.label-lbx img {
  box-shadow:0 0 80px rgba(var(--v-rgb),.45);
}
.pcard {
  transition:background .18s, transform .18s, box-shadow .18s;
}
.pcard:hover {
  background:#FFFAF0;
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(73,52,22,.08);
}
.pgenre {
  background:rgba(26,20,8,.72);
  color:rgba(255,248,236,.88);
}
.b-new {
  background:var(--v);
  color:var(--text);
}
.b-pre {
  background:rgba(26,20,8,.88);
  color:var(--v-mid);
  border:1px solid rgba(var(--v-mid-rgb),.32);
}
.pcard.playing {
  outline-color:var(--v);
  box-shadow:0 0 0 1px rgba(var(--v-rgb),.18);
}
.pcard.playing .pthumb::after {
  background:rgba(var(--v-rgb),.08);
}
.pcard.playing .pgenre {
  background:var(--v);
  color:var(--text);
}
.g1 { background:linear-gradient(145deg,#101827,#1B3F7A,#0B1220); }
.g2 { background:linear-gradient(135deg,#111D34,#2D4C82,#0D1526); }
.g3 { background:linear-gradient(160deg,#17233B,#516A94,#0D1628); }
.g4 { background:linear-gradient(145deg,#0F192C,#27456F,#0A1321); }
.g5 { background:linear-gradient(135deg,#1A2335,#3B5278,#101625); }
.g6 { background:linear-gradient(145deg,#141C2B,#364962,#0C1220); }
.g7 { background:linear-gradient(135deg,#111A2C,#445A7F,#0B1220); }
.g8 { background:linear-gradient(160deg,#261909,#6A4C16,#130D05); }
.g9 { background:linear-gradient(145deg,#1C1110,#5B2E2A,#0E0707); }
.g10{ background:linear-gradient(135deg,#101417,#284452,#091015); }
.g11{ background:linear-gradient(145deg,#161310,#3A2B1C,#0B0907); }
.g12{ background:linear-gradient(145deg,#24120C,#6B2D16,#120806); }
.preorder-hd span {
  color:var(--v-mid);
  background:rgba(var(--v-rgb),.12);
  border-color:rgba(var(--v-mid-rgb),.18);
}
.pcard.pre-card .ppri {
  color:var(--v-mid);
}
.pcard.pre-card .pchip {
  background:rgba(var(--v-rgb),.20);
  color:var(--v-mid);
}
.pcard.pre-card .pchip:hover {
  background:var(--v-mid);
  color:var(--text);
}
.ft-logo span,
.attr-v.acc,
.track.now-playing .track-title,
.np-label-tag {
  color:var(--v-mid);
}
.track-play,
.track.now-playing .track-play {
  color:var(--text);
}
.detail-play-all {
  color:var(--v);
  border-color:rgba(var(--v-rgb),.5);
}
#cart-drawer {
  box-shadow:-12px 0 42px rgba(26,20,8,.18);
}
.vol-slider::-webkit-slider-thumb {
  background:var(--v);
}

/* Empty-state landing — shown when no products tagged kurtezy yet */
.empty-state-landing{display:none;padding:80px 24px 64px;max-width:960px;margin:0 auto;text-align:center;color:#F7F9FC;font-family:var(--ff-b);animation:eslFade .7s var(--ease) both}
@keyframes eslFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.esl-badge{display:inline-block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border:1px solid rgba(var(--v-mid-rgb),.5);border-radius:2px;color:var(--v-mid);margin-bottom:28px}
.esl-title{font-family:var(--ff-h);font-size:clamp(36px,6vw,64px);font-weight:600;line-height:1.05;margin:0 0 18px;letter-spacing:-.02em}
.esl-title .acc{color:var(--v-mid);font-style:italic;font-weight:400}
.esl-sub{font-size:clamp(14px,1.6vw,17px);color:rgba(255,255,255,.65);max-width:560px;margin:0 auto 56px;line-height:1.5}
.esl-props{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:56px}
.esl-prop{padding:28px 20px;background:rgba(var(--v-rgb),.14);border:1px solid rgba(var(--v-mid-rgb),.18);border-radius:4px;transition:all .4s var(--ease)}
.esl-prop:hover{background:rgba(var(--v-rgb),.22);border-color:rgba(var(--v-mid-rgb),.4);transform:translateY(-2px)}
.esl-prop svg{width:28px;height:28px;color:var(--v-mid);margin-bottom:14px}
.esl-prop h3{font-family:var(--ff-h);font-size:15px;font-weight:600;margin:0 0 6px;color:#F7F9FC}
.esl-prop p{font-size:13px;color:rgba(255,255,255,.55);margin:0;line-height:1.45}
.esl-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:48px}
.esl-btn-primary{display:inline-block;padding:14px 36px;background:var(--v-mid);color:var(--v-dk);font-family:var(--ff-h);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:all .3s var(--ease);box-shadow:0 0 0 1px rgba(var(--v-mid-rgb),.4),0 8px 24px rgba(var(--v-rgb),.4)}
.esl-btn-primary:hover{background:#fff;transform:translateY(-1px);box-shadow:0 0 0 1px #fff,0 12px 32px rgba(var(--v-rgb),.55)}
.esl-hint{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(110,134,175,.7)}
.esl-foot{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);padding-top:32px;border-top:1px solid rgba(var(--v-mid-rgb),.12)}
@media(max-width:720px){.empty-state-landing{padding:48px 16px}.esl-props{grid-template-columns:1fr;gap:14px}.esl-prop{padding:20px 16px}}