/* Terrashup web app - lecteur individuel. DA cartoon retro (comme le dashboard). */
:root {
  --primary: #FF9F1C;
  --primary-2: #FFB347;
  --secondary: #F4741E;
  --secondary-d: #C2410C;
  --ink: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --shadowc: #d1d5db;
  --danger: #dc2626;
  --ok: #15803d;
  --surface: color-mix(in srgb, #ffffff 90%, var(--primary));
  --surface-2: color-mix(in srgb, #ffffff 80%, var(--primary));
  --grid: 48px;
  --tabbar-h: 60px;
  --mini-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --curtain: var(--secondary);   /* couleur de la vague de chargement */
  --curtain-line: #ffffff;       /* liseré de la crête */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; max-width: 100%; overflow-x: hidden; }
body {
  color: var(--ink);
  font-family: "Inter", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background-color: var(--primary);
  background-image:
    linear-gradient(rgba(255, 255, 255, .30) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, .30) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, .15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .15) 1px, transparent 1px);
  background-size:
    calc(var(--grid) * 4) calc(var(--grid) * 4),
    calc(var(--grid) * 4) calc(var(--grid) * 4),
    var(--grid) var(--grid), var(--grid) var(--grid);
  background-attachment: fixed;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
.ic { width: 22px; height: 22px; fill: currentColor; display: block; flex: 0 0 auto; }
.hidden { display: none !important; }
.pixel { font-family: "Press Start 2P", "Nunito", system-ui, sans-serif; }

/* Scrollbars personnalisees (DA cartoon). Pilotees par les variables -> se
   neutralisent automatiquement en mode SFW (noir sur blanc). */
* { scrollbar-width: thin; scrollbar-color: var(--secondary) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--secondary); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--secondary-d); background-clip: padding-box; }

/* ----- Aide install iOS ----- */
.ios-hint {
  display: flex; align-items: center; gap: 10px;
  margin: calc(var(--safe-t) + 8px) 10px 0; padding: 10px 12px;
  background: var(--surface); border: 2px solid var(--secondary); box-shadow: 0 4px 0 var(--secondary);
  font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.4;
}
.ios-hint b { color: var(--secondary-d); }
.ios-hint button { flex: 0 0 auto; width: 30px; height: 30px; font-size: 20px; line-height: 1; color: var(--muted); }

/* ----- Ecrans ----- */
#screens { padding-top: var(--safe-t); }
.screen { padding: 12px 14px calc(var(--tabbar-h) + var(--mini-h) + var(--safe-b) + 28px); max-width: 720px; margin: 0 auto; }
.scr-head { display: flex; align-items: center; gap: 10px; padding: 12px 2px 8px; }
.scr-title {
  margin: 0; font-family: "Press Start 2P", "Nunito", system-ui, sans-serif;
  font-size: 17px; color: var(--secondary-d); line-height: 1.3;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .7), 0 4px 0 rgba(0, 0, 0, .10);
}
.scr-title span { color: #fff; text-shadow: 0 2px 0 var(--secondary-d); }
.sec-title {
  font-family: "Press Start 2P", "Nunito", system-ui, sans-serif; font-size: 12px; color: var(--ink);
  margin: 22px 2px 12px; text-shadow: 0 2px 0 rgba(255, 255, 255, .6);
}
/* Titre de section + action a droite (ex : "Voir plus"). */
.sec-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 2px 12px; }
.sec-row .sec-title { margin: 0; }

/* Parametres (onglet Profil) */
.settings { background: var(--surface); border: 2px solid var(--border); box-shadow: 0 4px 0 var(--shadowc); padding: 2px 12px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 2px; cursor: pointer; }
.setting-txt { display: flex; flex-direction: column; min-width: 0; }
.setting-txt b { font-size: 15px; }
.setting-txt small { color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.4; }
.switch { position: relative; width: 52px; height: 30px; flex: 0 0 auto; display: inline-block; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch .knob { position: absolute; inset: 0; background: #fff; border: 2px solid var(--secondary); box-shadow: 0 3px 0 var(--secondary); transition: background .15s; }
.switch .knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--secondary-d); transition: transform .15s; }
.switch input:checked + .knob { background: var(--secondary); }
.switch input:checked + .knob::after { transform: translateX(22px); background: #fff; }

/* Lien Changelog (bas du profil, centre) + modal */
.changelog-link { display: block; margin: 26px auto 6px; color: var(--secondary-d); font-weight: 700; font-size: 14px; text-align: center; text-decoration: underline; letter-spacing: .02em; }
.changelog-body { flex: 1; overflow-y: auto; margin-top: 8px; }
.cl-ver { background: var(--surface); border: 2px solid var(--border); box-shadow: 0 4px 0 var(--shadowc); padding: 12px 14px; margin-bottom: 14px; }
.cl-ver .cl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cl-ver h3 { margin: 0; font-family: "Press Start 2P", system-ui, sans-serif; font-size: 11px; color: var(--secondary-d); line-height: 1.4; }
.cl-ver .cl-date { color: var(--muted); font-weight: 700; font-size: 11px; flex: 0 0 auto; }
.cl-ver ul { margin: 0; padding-left: 18px; }
.cl-ver li { font-size: 14px; color: var(--ink); line-height: 1.5; margin: 5px 0; }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 0; color: var(--ink); }
.icon-btn:active { transform: translateY(1px); }

/* Boutons cartoon (chips, pills, seg, sort) */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink);
  border: 2px solid var(--secondary); border-radius: 0; box-shadow: 0 4px 0 var(--secondary);
  padding: 9px 15px; font-weight: 700; font-size: 13px;
}
.chip-btn .ic { width: 18px; height: 18px; color: var(--secondary-d); }
.chip-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--secondary); }

/* Scroll horizontal (cards) */
.hscroll { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; }
.hscroll::-webkit-scrollbar { display: none; }
.card { flex: 0 0 auto; width: 128px; cursor: pointer; }
.card .art {
  width: 128px; height: 128px; background: var(--surface); display: grid; place-items: center;
  border: 2px solid var(--border); box-shadow: 0 4px 0 var(--shadowc); overflow: hidden;
}
.card .art img { width: 100%; height: 100%; object-fit: cover; }
.card .art .ph { width: 44%; height: 44%; color: var(--secondary); }
.card.round .art { border-radius: 999px; box-shadow: 0 4px 0 var(--shadowc); }
.card .cap { margin-top: 9px; font-size: 13px; font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.card.round .cap { text-align: center; }

/* Listes (panneau creme facon dashboard) */
.list { display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--border); box-shadow: 0 4px 0 var(--shadowc); padding: 4px 12px; }
.list:empty { display: none; }
.trk { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--border); }
.trk:first-child { border-top: none; }
.trk:active { background: rgba(255, 255, 255, .5); }
.trk .thumb { position: relative; width: 44px; height: 44px; background: #fff; border: 2px solid var(--border); display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; }
/* Indicateur "en lecture" (egaliseur anime) sur la miniature (liste) et la pochette (grille/accueil). */
.card .art { position: relative; }
.eq { display: none; position: absolute; inset: 0; align-items: flex-end; justify-content: center; gap: 4px; padding: 16% 0; background: rgba(0, 0, 0, .45); }
.playing .eq { display: flex; }
.trk .eq { gap: 3px; padding: 9px 0; }
.eq i { width: 3px; height: 40%; background: #fff; animation: eqbar .9s ease-in-out infinite; }
.card .eq i { width: 5px; }
.eq i:nth-child(2) { animation-delay: .3s; }
.eq i:nth-child(3) { animation-delay: .6s; }
@keyframes eqbar { 0%, 100% { height: 22%; } 50% { height: 82%; } }
.trk .thumb .ph { width: 46%; height: 46%; color: var(--secondary); }
.trk .thumb img { width: 100%; height: 100%; object-fit: cover; }
.trk .m { min-width: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.trk .t { display: block; max-width: 100%; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk .s { display: block; max-width: 100%; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.trk.playing .t { color: var(--secondary-d); }
.trk .trk-dl { color: var(--secondary-d); }
.trk .kebab { color: var(--muted); }
.empty { color: var(--muted); padding: 20px 2px; text-align: center; font-size: 14px; }

/* Recherche */
.searchbar { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid var(--secondary); box-shadow: 0 4px 0 var(--secondary); padding: 11px 13px; margin: 6px 2px 16px; }
.searchbar .ic { color: var(--secondary-d); }
.searchbar input { flex: 1; background: none; border: none; outline: none; color: var(--ink); font-size: 16px; font-weight: 600; }
.res-h { font-family: "Press Start 2P", system-ui, sans-serif; font-size: 10px; color: var(--ink); margin: 18px 2px 10px; display: flex; justify-content: space-between; align-items: center; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.recent-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 2px; border-top: 1px solid rgba(255,255,255,.35); }
.recent-row span { color: var(--ink); font-size: 15px; font-weight: 600; }
.recent-row .ic { color: var(--secondary-d); }
.linkbtn { color: var(--secondary-d); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* Segmented / tri */
.segmented { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 4px; }
.segmented::-webkit-scrollbar { display: none; }
.seg { flex: 0 0 auto; padding: 8px 14px; background: #fff; border: 2px solid var(--secondary); box-shadow: 0 3px 0 var(--secondary); font-size: 12px; font-weight: 700; color: var(--ink); }
.seg.active { background: var(--secondary); border-color: var(--secondary-d); color: #fff; box-shadow: 0 3px 0 var(--secondary-d); }
.sortbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--ink); padding: 14px 2px 8px; font-weight: 600; }
.sort { color: var(--muted); font-weight: 700; }
.sort.active { color: var(--secondary-d); text-decoration: underline; }
.sort-dir { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; color: var(--secondary-d); background: #fff; border: 2px solid var(--secondary); box-shadow: 0 2px 0 var(--secondary); flex: 0 0 auto; }
.sort-dir .ic { width: 16px; height: 16px; transition: transform .15s; }
.sort-dir[data-dir="asc"] .ic { transform: rotate(180deg); }
.sort-dir:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--secondary); }

/* Detail auteur */
.author-hero { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 0 10px; }
.author-av { width: 120px; height: 120px; border-radius: 999px; background: var(--surface); border: 2px solid var(--border); box-shadow: 0 5px 0 var(--shadowc); display: grid; place-items: center; overflow: hidden; font-family: "Press Start 2P", system-ui, sans-serif; font-size: 30px; color: var(--secondary-d); }
.author-av img { width: 100%; height: 100%; object-fit: cover; }
.author-name { font-family: "Press Start 2P", system-ui, sans-serif; font-size: 15px; color: var(--secondary-d); text-align: center; max-width: 90vw; overflow-wrap: anywhere; text-shadow: 0 2px 0 rgba(255, 255, 255, .5); }
.author-sub { font-size: 13px; font-weight: 700; color: var(--muted); }
.author-actions { display: flex; gap: 12px; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--secondary); color: #fff; font-weight: 700; padding: 10px 20px; border: 2px solid var(--secondary-d); box-shadow: 0 4px 0 var(--secondary-d); }
.pill .ic { width: 18px; height: 18px; }
.pill.ghost { background: #fff; color: var(--ink); border-color: var(--secondary); box-shadow: 0 4px 0 var(--secondary); }
.pill:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--secondary-d); }
.pill.ghost:active { box-shadow: 0 2px 0 var(--secondary); }

/* ----- Mini-player ----- */
.mini {
  position: fixed; left: 8px; right: 8px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 6px); z-index: 30;
  display: flex; align-items: center; gap: 6px; height: var(--mini-h); padding: 0 8px;
  background: #fff; border: 2px solid var(--secondary); box-shadow: 0 4px 0 var(--secondary); overflow: visible;
}
.mini .icon-btn { width: 34px; height: 40px; flex: 0 0 auto; }
.mini-art { width: 44px; height: 44px; background: var(--surface); border: 2px solid var(--border); flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; }
.mini-art img { width: 100%; height: 100%; object-fit: cover; }
.mini-art .ph { width: 46%; height: 46%; color: var(--secondary); }
.mini-meta { flex: 1; min-width: 0; }
.mini-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-author { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-like.active { color: var(--secondary-d); }
.mini-play .ic { width: 26px; height: 26px; }
.mini-prog { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: rgba(0, 0, 0, .12); cursor: pointer; }
.mini-prog i { display: block; height: 100%; width: 0; background: var(--secondary); pointer-events: none; }
.mini-prog:hover i { background: var(--secondary-d); }
/* Popover volume du mini-player (au-dessus de la barre). */
.mini-vol-pop { position: absolute; right: 6px; bottom: calc(100% + 10px); z-index: 31; width: 170px; padding: 12px 14px; background: #fff; border: 2px solid var(--secondary); box-shadow: 0 4px 0 var(--secondary); }
.mini-vol-pop input[type="range"] { width: 100%; }

/* ----- Barre nav ----- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: flex; background: var(--surface); border-top: 2px solid var(--secondary);
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.tab .ic { width: 22px; height: 22px; }
.tab.active { color: var(--secondary-d); }
.tab.active .ic { color: var(--secondary); }

/* ----- Now Playing ----- */
.now {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; overflow: hidden;
  padding: calc(var(--safe-t) + 8px) 20px calc(var(--safe-b) + 16px);
  background-color: var(--primary);
  background-image:
    linear-gradient(rgba(255, 255, 255, .30) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, .30) 2px, transparent 2px);
  background-size: calc(var(--grid) * 4) calc(var(--grid) * 4);
  animation: sheetUp .28s cubic-bezier(.22, 1, .36, 1);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.now-head { display: flex; align-items: center; justify-content: space-between; }
.now-ctx { font-family: "Press Start 2P", system-ui, sans-serif; font-size: 9px; color: var(--secondary-d); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.now-art { flex: 1; display: grid; place-items: center; padding: 16px 0; }
.vinyl {
  width: min(72vw, 300px); aspect-ratio: 1; border-radius: 50%; position: relative;
  background: radial-gradient(circle at center, #171717 26%, #0f0f0f 27%), repeating-radial-gradient(circle at center, #0c0c0c 27%, #0c0c0c 28%, #161616 29%, #161616 30%);
  box-shadow: inset 0 0 40px #000, 0 10px 0 var(--secondary-d);
  animation: spin 4.5s linear infinite; animation-play-state: paused;
}
.vinyl.spinning { animation-play-state: running; }
.vinyl .vinyl-img { position: absolute; top: 50%; left: 50%; width: 40%; height: 40%; border-radius: 50%; transform: translate(-50%, -50%); object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--secondary-d); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Fond "cover floutee et estompee" quand on affiche la cover (clic sur le disque).
   z-index:-1 : au-dessus du quadrillage mais derriere le contenu (texte, controles). */
.now-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center;
  filter: blur(24px); transform: scale(1.15);
  opacity: 0; transition: opacity .35s ease;
}
.now.cover-mode .now-bg { opacity: .55; }

/* Carte cover fixe (comme l'embed Discord : cover + logo Terrashup en haut a gauche). */
.cover-card {
  display: none; position: relative; width: min(72vw, 300px); aspect-ratio: 1;
  border: 2px solid var(--secondary-d); box-shadow: 0 10px 0 var(--secondary-d); overflow: hidden; cursor: pointer;
}
.cover-card .cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-card .cover-logo { position: absolute; top: 8px; left: 8px; width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.now.cover-mode .vinyl { display: none; }
.now.cover-mode .cover-card { display: block; }
.vinyl { cursor: pointer; }

.now-info { text-align: center; padding: 6px 0 10px; }
.now-title { font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.now-author { font-size: 14px; color: var(--secondary-d); font-weight: 700; margin-top: 4px; }
.now-seek { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.now-controls { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px 10px; }
.now-controls .icon-btn { color: var(--ink); }
.now-controls .big .ic { width: 34px; height: 34px; }
.icon-btn.play { width: 66px; height: 66px; background: var(--secondary); color: #fff; border: 2px solid var(--secondary-d); box-shadow: 0 5px 0 var(--secondary-d); }
.icon-btn.play .ic { width: 32px; height: 32px; }
.icon-btn.play:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--secondary-d); }
.btn-on { color: var(--secondary-d) !important; }
.now-foot { display: flex; align-items: center; gap: 14px; padding-top: 6px; }
.now-foot .icon-btn { color: var(--ink); }
.now-vol { flex: 1; }
#btnLike.active, #btnDl.active { color: var(--secondary-d); }

/* Sur grand ecran : contenu du lecteur centre, grandes marges laterales
   (evite que les controles s'etalent d'un bord a l'autre). */
@media (min-width: 700px) {
  .now { align-items: center; }
  .now-head, .now-info, .now-seek, .now-controls, .now-foot { width: 100%; max-width: 460px; }
  .now-art { width: 100%; max-width: 460px; }
  .vinyl { width: 320px; }
  .cover-card { width: 320px; }
}

/* Sliders (piste orange, thumb carre) */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: rgba(0, 0, 0, .14); border: 2px solid var(--ink); outline: none; }
.now-seek input[type="range"], .now-vol input[type="range"] { background: linear-gradient(to right, var(--secondary) 0 var(--pct, 0%), rgba(255, 255, 255, .5) var(--pct, 0%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 18px; border-radius: 0; background: var(--secondary-d); }
input[type="range"]::-moz-range-thumb { width: 10px; height: 18px; border: none; border-radius: 0; background: var(--secondary-d); }

/* Sheets (queue) */
.sheet {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  padding: calc(var(--safe-t) + 12px) 16px calc(var(--safe-b) + 16px);
  background-color: var(--primary);
  background-image: linear-gradient(rgba(255, 255, 255, .22) 2px, transparent 2px), linear-gradient(90deg, rgba(255, 255, 255, .22) 2px, transparent 2px);
  background-size: calc(var(--grid) * 4) calc(var(--grid) * 4);
  animation: sheetUp .26s cubic-bezier(.22, 1, .36, 1);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { margin: 0; font-family: "Press Start 2P", system-ui, sans-serif; font-size: 14px; color: var(--secondary-d); text-shadow: 0 2px 0 rgba(255,255,255,.6); }
.sheet-sub { color: var(--ink); font-size: 13px; margin: 12px 0; font-weight: 600; }
.sheet-h3 { display: flex; align-items: center; justify-content: space-between; font-family: "Press Start 2P", system-ui, sans-serif; font-size: 10px; color: var(--ink); margin: 12px 0 10px; }
.sheet .list { overflow-y: auto; }

/* Menu contextuel piste */
.track-menu { position: fixed; z-index: 80; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 12px); background: var(--surface); border: 2px solid var(--secondary); box-shadow: 0 -2px 0 var(--secondary), 0 6px 24px rgba(0, 0, 0, .3); overflow: hidden; animation: sheetUp .2s ease; }
.track-menu .tm-head { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 2px solid var(--border); }
.track-menu .tm-head .thumb { width: 44px; height: 44px; background: #fff; border: 2px solid var(--border); display: grid; place-items: center; }
.track-menu .tm-head .thumb .ph { width: 46%; height: 46%; color: var(--secondary); }
.track-menu .mi { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; font-size: 15px; font-weight: 600; text-align: left; color: var(--ink); border-top: 1px solid rgba(255, 255, 255, .4); }
.track-menu .mi:first-of-type { border-top: none; }
.track-menu .mi:active { background: rgba(255, 255, 255, .5); }
.track-menu .mi .ic { color: var(--secondary-d); }
.track-menu .mi.on .ic { color: var(--secondary); }

/* Toast */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + var(--mini-h) + var(--safe-b) + 18px); z-index: 90; background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; padding: 10px 16px; border: 2px solid #000; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }

.install-btn { margin-left: auto; background: var(--secondary); color: #fff; font-weight: 700; padding: 8px 14px; border: 2px solid var(--secondary-d); box-shadow: 0 3px 0 var(--secondary-d); font-size: 12px; text-transform: uppercase; }
.install-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--secondary-d); }

/* ----- Dashboard embarque -----
   Pleine largeur (pas le gabarit 720px des autres ecrans) : l'iframe occupe toute
   la largeur -> la scrollbar et la vague de chargement interne sont au bord de
   l'ecran (comme une vraie page), et les bordures ne sont plus rognees. La mise en
   page PC (contenu centre) est geree par le dashboard lui-meme (main max-width). */
#scr-dashboard { padding: 0; max-width: none; }
.dash-frame { display: block; width: 100%; border: 0; background: var(--primary); height: calc(100svh - var(--tabbar-h) - var(--safe-b) - var(--safe-t)); }
/* Une piste joue -> le mini-player reste visible : on raccourcit l'iframe pour ne pas etre masque. */
body.has-track .dash-frame { height: calc(100svh - var(--tabbar-h) - var(--safe-b) - var(--safe-t) - var(--mini-h) - 8px); }

/* ----- Profil ----- */
.prof-card { background: var(--surface); border: 2px solid var(--border); box-shadow: 0 4px 0 var(--shadowc); padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prof-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prof-av { width: 52px; height: 52px; border-radius: 999px; background: var(--secondary); color: #fff; display: grid; place-items: center; font-family: "Press Start 2P", system-ui, sans-serif; font-size: 18px; flex: 0 0 auto; }
.prof-name { font-weight: 800; font-size: 17px; }
.prof-role { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.prof-hint { margin: 0 0 14px; font-size: 14px; color: var(--ink); line-height: 1.5; }
.prof-stats { display: flex; gap: 12px; }
.pstat { flex: 1; background: var(--surface); border: 2px solid var(--border); box-shadow: 0 4px 0 var(--shadowc); padding: 14px 6px; text-align: center; }
.pstat b { display: block; font-family: "Press Start 2P", system-ui, sans-serif; font-size: 18px; color: var(--secondary-d); }
.pstat span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* ----- Bascule grille / liste + covers ----- */
.scr-head .view-toggle { margin-left: auto; color: var(--secondary-d); background: #fff; border: 2px solid var(--secondary); box-shadow: 0 3px 0 var(--secondary); }
.scr-head .view-toggle .ic { width: 18px; height: 18px; }
.trk .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.list.as-grid { background: none; border: none; box-shadow: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.list.as-grid .card { width: auto; }
.list.as-grid .card .art { width: 100%; height: auto; aspect-ratio: 1; }

/* ----- Grand ecran : mieux exploiter l'espace (pas une version mobile etiree) ----- */
@media (min-width: 1000px) {
  .screen { max-width: 1040px; }
  /* Mini-player centre et borne (au lieu d'occuper toute la largeur). */
  .mini { left: 50%; right: auto; transform: translateX(-50%); width: min(1040px, calc(100% - 32px)); }
  .mini-vol-pop { right: 0; }
  /* Grilles plus denses. */
  .list.as-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; }
  /* Barre de nav basse centree et bornee. */
  .tabbar { justify-content: center; }
  .tab { flex: 0 1 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .vinyl { animation: none !important; }
  .now, .sheet, .track-menu { animation: none !important; }
  .panelWrap, .panelWrap.enter, .panelWrap.leave, .loading-logo { animation: none !important; }
  .eq i { animation: none !important; height: 60% !important; }
}

/* ================= Rideau de chargement (vague) ================= */
/* pointer-events:none : l'UI reste interactive autour. position:fixed inset:0 ->
   pleine largeur ecran (pas limite a la colonne de contenu). */
.loading-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.panelWrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(100%); will-change: transform;
  animation-fill-mode: forwards; overflow: hidden;
}
/* Prolonge le panneau vers le bas pour couvrir tout ecart (meme couleur que le fill). */
.panelWrap::after { content: ''; position: absolute; left: 0; right: 0; height: 16vh; bottom: -16vh; background: var(--curtain); }
.panelWrap.enter { animation: slideUpWobble 800ms cubic-bezier(.22, 1, .36, 1) both; }
.panelWrap.leave { animation: slideDownWobble 700ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes slideUpWobble { 0% { transform: translateY(100%); } 70% { transform: translateY(0%); } 85% { transform: translateY(1.2%); } 100% { transform: translateY(0%); } }
@keyframes slideDownWobble { 0% { transform: translateY(0%); } 30% { transform: translateY(0.8%); } 100% { transform: translateY(100%); } }
.loading-overlay .wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.loading-overlay .wave .wv-fill { fill: var(--curtain); }
.loading-overlay .wave .wv-line { fill: none; stroke: var(--curtain-line); }
.loading-logo { width: 160px; height: 160px; object-fit: contain; image-rendering: pixelated; opacity: .95; filter: drop-shadow(0 10px 20px rgba(194, 65, 12, .35)); animation: logoBob 1400ms ease-in-out infinite; }
.loading-logo--text { width: auto; height: auto; font-family: "Press Start 2P", monospace; font-size: 24px; color: #fff; letter-spacing: 1px; text-shadow: 0 3px 0 #C2410C, 0 5px 0 rgba(0, 0, 0, .2); }
@keyframes logoBob { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.02); } 100% { transform: translateY(0) scale(1); } }

/* == SFW-START ==
   Mode SFW (safe for work) : surcouche neutre activee par body.sfw.
   Principe : toute la DA est pilotee par des variables CSS + des classes generiques.
   On redefinit les variables et on neutralise images/ombres/quadrillage. Ainsi toute
   UI existante OU FUTURE qui utilise ces variables/classes herite du rendu SFW sans
   etre reecrite. Chaque regle est scopee sous body.sfw : le mode normal reste intact.
   (Un test verrouille ce scoping : test/sfwStyles.test.js.) */
body.sfw {
  --primary: #ffffff;
  --primary-2: #ffffff;
  --secondary: #000000;
  --secondary-d: #000000;
  --ink: #000000;
  --muted: #555555;
  --border: #000000;
  --shadowc: transparent;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --curtain: #000000;
  --curtain-line: #000000;
  background-color: #ffffff !important;
  background-image: none !important;
}
/* Plat : on supprime les ombres dures/echos et les fonds quadrilles cartoon. */
body.sfw * { box-shadow: none !important; text-shadow: none !important; }
/* SFW : pas d'image sur la vague (vague noire seule, minimaliste). */
body.sfw .loading-logo { display: none !important; }
body.sfw .now, body.sfw .sheet, body.sfw .tabbar { background-color: #ffffff !important; background-image: none !important; }
/* Le "shup" du titre est blanc en mode normal -> le repasser en noir sur fond blanc. */
body.sfw .scr-title span { color: #000000 !important; }
/* Boites media (pochettes/miniatures/vinyle) : pas d'image, une icone neutre + bordure. */
body.sfw .thumb, body.sfw .card .art, body.sfw .mini-art, body.sfw .track-menu .thumb, body.sfw .vinyl, body.sfw .cover-card {
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 17V5l10-2v11.5a3 3 0 1 1-2-2.83V6.3L11 7.5v9.7A3 3 0 1 1 9 17z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: 42% !important;
  border: 2px solid #000000 !important; border-radius: 0 !important; animation: none !important;
}
body.sfw .thumb img, body.sfw .card .art img, body.sfw .mini-art img, body.sfw .track-menu .thumb img,
body.sfw .vinyl .vinyl-img, body.sfw .author-av img, body.sfw .prof-av img, body.sfw .card.round .art img,
body.sfw .cover-card .cover-img, body.sfw .cover-card .cover-logo,
body.sfw .thumb .ph, body.sfw .card .art .ph, body.sfw .mini-art .ph { display: none !important; }
/* SFW : pas de fond image floute (l'interface reste neutre meme en mode cover). */
body.sfw .now-bg { display: none !important; }
/* Avatars (auteurs, profil) : cercle neutre, initiale conservee (texte). */
body.sfw .author-av, body.sfw .prof-av, body.sfw .card.round .art {
  background: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important;
}
/* == SFW-END == */