/* Rapverse — « bitume et néon » : affiche de concert, cartes à collectionner, disques. */
@font-face { font-family: 'Anton'; src: url('/anton.woff2') format('woff2'); font-display: swap; }
:root {
  color-scheme: dark;
  --bitume: #15161b;
  --dalle: #1e2027;
  --dalle-2: #282b34;
  --dalle-3: #323642;
  --joint: #363a46;
  --papier: #f2ede3;
  --gris: #a3a7b2;
  --gris-2: #767b88;
  --neon: #ff3d7f;
  --or: #f5c542;
  --vert: #44d18a;
  --rouge: #ff5c5c;
  --affiche: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --texte: 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
}
.r-C { --rar: #9aa1ab; } .r-U { --rar: #3ecf8e; } .r-R { --rar: #3b9cff; }
.r-E { --rar: #a46bff; } .r-L { --rar: #ffb020; } .r-M { --rar: #ff2e4d; }

* { box-sizing: border-box; }
html { background: var(--bitume); }
body {
  margin: 0; min-height: 100vh; color: var(--papier); font: 14px/1.5 var(--texte);
  background:
    radial-gradient(1000px 500px at 10% -10%, #ff3d7f1a, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, #3b9cff14, transparent 60%),
    var(--bitume);
  background-attachment: fixed;
}
h1, h2, h3 { margin: 0; font-weight: 400; font-family: var(--affiche); letter-spacing: .01em; }
h1 { font-size: clamp(38px, 5vw, 64px); line-height: .95; }
h2 { font-size: 26px; line-height: 1.05; }
h3 { font-size: 19px; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 4px; }
.muted { color: var(--gris); font-size: 13px; }
.small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }

/* --- Barre du haut ------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px; padding: 12px 28px;
  background: #15161be6; backdrop-filter: blur(10px); border-bottom: 1px solid var(--joint);
}
.logo { font: 26px/1 var(--affiche); color: var(--papier); text-decoration: none; white-space: nowrap; }
.logo span { color: var(--neon); }
.tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tab {
  border: 0; background: none; color: var(--gris); font: 600 14px var(--texte); padding: 9px 13px; border-radius: 8px;
  cursor: pointer; white-space: nowrap; position: relative;
}
.tab:hover { color: var(--papier); background: #ffffff0a; }
.tab.on { color: var(--papier); }
.tab.on::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--neon); }
.tab .badge { margin-left: 6px; background: var(--neon); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }
.coins { display: inline-flex; align-items: center; gap: 8px; font: 20px var(--affiche); color: var(--or); white-space: nowrap; }
.disc { width: 20px; height: 20px; border-radius: 50%; flex: none; background: radial-gradient(circle, var(--or) 0 3px, #15161b 3.5px 5px, #2a2b31 5.5px 100%); box-shadow: 0 0 0 1.5px var(--or); }
.who { display: flex; align-items: center; gap: 8px; border: 1px solid var(--joint); background: var(--dalle); color: var(--papier); padding: 5px 10px 5px 5px; border-radius: 999px; cursor: pointer; font: 600 13px var(--texte); }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 15px var(--affiche); color: #15161b; background: var(--c, var(--neon)); flex: none; }
.sound-toggle { border: 1px solid var(--joint); background: var(--dalle); color: var(--papier); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 15px; }

main { max-width: 1320px; margin: 0 auto; padding: 30px 28px 60px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head p { color: var(--gris); max-width: 62ch; margin-top: 10px; }

/* --- Boutons et champs --------------------------------------------------------- */
button, .btn { font: 600 14px var(--texte); cursor: pointer; border-radius: 10px; padding: 10px 16px; border: 1px solid var(--joint); background: var(--dalle-2); color: var(--papier); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
button:hover { background: var(--dalle-3); }
button:disabled { opacity: .45; cursor: not-allowed; }
.primary { background: var(--neon); border-color: transparent; color: #fff; }
.primary:hover { background: #ff5a93; }
.ghost { background: none; border-color: transparent; color: var(--gris); }
.ghost:hover { color: var(--papier); background: #ffffff0d; }
.danger { color: var(--rouge); }
.small-btn { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
input, select { font: 14px var(--texte); color: var(--papier); background: var(--dalle); border: 1px solid var(--joint); border-radius: 8px; padding: 9px 11px; }
input[type=number] { width: 110px; }
input::placeholder { color: var(--gris-2); }
input[type=checkbox] { accent-color: var(--neon); width: 16px; height: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--gris); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--joint); background: var(--dalle); color: var(--gris); padding: 6px 12px; border-radius: 999px; font: 600 13px var(--texte); }
.chip.on { color: var(--papier); border-color: var(--rar, var(--neon)); background: color-mix(in srgb, var(--rar, var(--neon)) 18%, var(--dalle)); }
.panel { background: var(--dalle); border: 1px solid var(--joint); border-radius: 16px; padding: 20px 22px; }
.empty { border: 1px dashed var(--joint); border-radius: 16px; padding: 34px; text-align: center; color: var(--gris); }
.empty b { display: block; font: 24px var(--affiche); color: var(--papier); margin-bottom: 6px; }

/* --- Carte de rappeur --------------------------------------------------------- */
.rc {
  --w: 200px; position: relative; width: var(--w); aspect-ratio: 5 / 7.2; border-radius: calc(var(--w) * .07); overflow: hidden; flex: none;
  background: var(--dalle-2); border: calc(var(--w) * .018 + 1px) solid var(--rar); color: var(--papier); text-align: left; padding: 0;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; box-shadow: 0 10px 24px #0007; cursor: pointer; font-size: calc(var(--w) * .062);
}
.rc.r-L, .rc.r-M { box-shadow: 0 10px 24px #0007, 0 0 22px color-mix(in srgb, var(--rar) 40%, transparent); }
.rc .ph { position: relative; flex: 1 1 62%; min-height: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--rar) 45%, #1e2027), #15161b); overflow: hidden; }
.rc .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rc .ph .initials { position: absolute; inset: 0; display: grid; place-items: center; font: calc(var(--w) * .3) var(--affiche); color: #ffffff30; }
.rc .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, #0d0e12e8); }
.rc .rar { position: absolute; z-index: 2; top: 6%; left: 6%; min-width: 1.9em; height: 1.9em; padding: 0 .45em; border-radius: .45em; display: grid; place-items: center; background: #0d0e12d9; color: var(--rar); border: 1px solid var(--rar); font: 1.15em var(--affiche); }
.rc .flag { position: absolute; z-index: 2; top: 6%; right: 6%; padding: .1em .45em; border-radius: .4em; background: #0d0e12b3; font: 700 .78em var(--texte); color: var(--gris); }
.rc .name { position: absolute; z-index: 2; left: 7%; right: 7%; bottom: 4%; font: 1.75em/1 var(--affiche); text-shadow: 0 2px 10px #000; overflow-wrap: anywhere; }
.rc .stats { flex: 0 0 auto; padding: 6% 7% 7%; display: grid; gap: .45em; background: #17181dde; border-top: 1px solid color-mix(in srgb, var(--rar) 50%, transparent); }
.rc .stat { display: grid; grid-template-columns: 1.3em 1fr 2em; gap: .45em; align-items: center; font-size: .92em; }
.rc .stat i { font-style: normal; text-align: center; }
.rc .bar { height: .42em; border-radius: 1em; background: #ffffff14; overflow: hidden; }
.rc .bar b { display: block; height: 100%; border-radius: 1em; background: var(--rar); }
.rc .stat span { font: 1.15em var(--affiche); text-align: right; }
.rc .count { position: absolute; z-index: 3; top: 6%; right: 6%; background: var(--neon); color: #fff; border-radius: 999px; padding: .05em .55em; font: 1em var(--affiche); }
.rc.gold { border-color: transparent; background: linear-gradient(var(--dalle-2), var(--dalle-2)) padding-box, linear-gradient(135deg, #fff6c9, #f5c542 30%, #a87a12 55%, #ffe58a 80%, #c8961a) border-box; }
.rc.gold .rar { color: var(--or); border-color: var(--or); }
.rc.gold .name::before { content: 'Édition or'; display: block; font: 700 .55em var(--texte); color: var(--or); text-shadow: none; margin-bottom: .2em; }
.rc.missing { filter: grayscale(1) brightness(.45); box-shadow: none; }
.rc.missing .stats { opacity: .5; }
.rc .lock { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font: 3.5em var(--affiche); color: #ffffff40; }
/* Inclinaison au survol (variables posées par core.js) */
.tilt { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.tilt::before { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .4s; border-radius: inherit; background: radial-gradient(circle at var(--mx) var(--my), #ffffff30, transparent 55%); }
.tilt.tilting { transition: transform .12s ease-out; transform: perspective(800px) rotateX(var(--ry)) rotateY(var(--rx)) translateY(-4px); }
.tilt.tilting::before { opacity: 1; }
.gold.tilting::before { background: radial-gradient(circle at var(--mx) var(--my), #fff3b866, transparent 50%); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 20px 16px; justify-items: center; }
.grid .rc { --w: 176px; }

/* --- Boosters : le bac à disques ----------------------------------------------- */
.daily { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-radius: 16px; margin-bottom: 26px; background: linear-gradient(100deg, #f5c54226, #f5c5420a 60%); border: 1px solid #f5c54255; }
.daily b { font: 22px var(--affiche); color: var(--or); }
.crate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-bottom: 40px; }
.offer-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 22px 22px; border-radius: 22px; border: 1px solid var(--joint);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--k1) 22%, transparent), transparent 70%), var(--dalle); }
.offer-pack h2 { font-size: 34px; text-align: center; }
.offer-pack .tagline { color: var(--gris); font-size: 13px; text-align: center; min-height: 20px; margin-top: -10px; }
.offer-pack .qty { display: inline-flex; background: var(--bitume); border: 1px solid var(--joint); border-radius: 12px; padding: 3px; }
.offer-pack .qty button { border: 0; background: none; padding: 7px 14px; border-radius: 9px; color: var(--gris); font: 16px var(--affiche); }
.offer-pack .qty button small { font: 600 12px var(--texte); margin-right: 1px; }
.offer-pack .qty button.on { background: var(--dalle-3); color: var(--papier); }
.offer-pack .buy { width: 100%; font-size: 17px; padding: 13px 18px; }
.offer-pack details { width: 100%; font-size: 13px; color: var(--gris); }
.offer-pack summary { cursor: pointer; text-align: center; }
.odds { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin-top: 10px; }
.odds span:nth-child(odd) { display: flex; align-items: center; gap: 8px; }
.odds span:nth-child(odd)::before { content: ''; width: 9px; height: 9px; border-radius: 2px; background: var(--rar); }
.odds span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; color: var(--papier); }

/* Le paquet : sachet métallisé à bords crantés, tête d'affiche en couverture */
.pack {
  --pw: 200px; --k1: #ff3d7f; --k2: #6b1d8f; --k3: #1a0b26; --ink: #fff;
  position: relative; width: var(--pw); aspect-ratio: 5 / 7.6; flex: none; isolation: isolate; filter: drop-shadow(0 22px 26px #000b);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.pack.k-premium { --k1: #ffd66b; --k2: #b8820f; --k3: #2b1900; --ink: #1d1300; }
.pack.k-platine { --k1: #eef3ff; --k2: #8b98b8; --k3: #1b2030; --ink: #0f1422; }
.pack .foil { position: absolute; inset: 0; clip-path: var(--crimp); overflow: hidden;
  background: linear-gradient(160deg, var(--k1), var(--k2) 48%, var(--k3)); }
.pack .foil::before { content: ''; position: absolute; inset: 0; z-index: 3; mix-blend-mode: overlay; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, #ffffffaa 45%, transparent 52%, transparent 60%, #ffffff55 66%, transparent 72%);
  background-size: 250% 100%; animation: sheen 4.5s ease-in-out infinite; }
.pack .foil::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(90deg, #ffffff10 0 1px, transparent 1px 4px); }
.pack .cover { position: absolute; left: 9%; right: 9%; top: 15%; height: 48%; border-radius: 10px; overflow: hidden; z-index: 1;
  background: linear-gradient(160deg, color-mix(in srgb, var(--k3) 60%, var(--k2)), var(--k3)); box-shadow: inset 0 0 0 2px #ffffff30; }
.pack .cover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: luminosity; opacity: .95; }
.pack .cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--k1) 35%, transparent), color-mix(in srgb, var(--k2) 70%, transparent)); mix-blend-mode: color; }
.pack .cover .vinyl-art { position: absolute; right: -18%; bottom: -22%; width: 70%; aspect-ratio: 1; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle, var(--k1) 0 9%, #111 9.5% 12%, #1b1b1f 12.5% 40%, #2a2a30 40.5% 41.5%, #151518 42% 100%); box-shadow: -6px -6px 18px #0008; animation: spin 9s linear infinite; }
.pack .brand { position: absolute; top: 6.5%; left: 0; right: 0; z-index: 4; text-align: center; font: 700 calc(var(--pw) * .052) var(--texte); letter-spacing: .14em; color: var(--ink); opacity: .85; }
.pack .title { position: absolute; left: 8%; right: 8%; bottom: 17%; z-index: 4; font: calc(var(--pw) * .2)/0.85 var(--affiche); color: var(--ink); text-shadow: 0 2px 0 #00000030; }
.pack .sub { position: absolute; left: 8%; right: 8%; bottom: 9.5%; z-index: 4; display: flex; justify-content: space-between; font: 700 calc(var(--pw) * .052) var(--texte); color: var(--ink); opacity: .9; }
.pack .stamp { position: absolute; top: 58%; left: 6%; z-index: 4; transform: rotate(-8deg); padding: .25em .6em; border-radius: 6px; font: calc(var(--pw) * .06) var(--affiche);
  background: var(--ink); color: var(--k2); }
.offer-pack .pack:hover { transform: translateY(-8px) rotate(-1.5deg); }

/* --- Ouverture ------------------------------------------------------------------ */
.stage { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 50% 42%, #2b1b3a, #0d0b12 72%); animation: fade .3s both; padding: 24px; }
.stage::before { content: ''; position: absolute; left: 50%; top: -20%; width: 70vw; height: 90vh; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at top, #ffffff14, transparent 65%); }
.stage.shake { animation: quake .6s linear; }
.stage-top { position: absolute; top: 18px; left: 24px; right: 24px; display: flex; justify-content: space-between; align-items: center; color: var(--gris); font-size: 14px; z-index: 3; }
.stage-top b { font: 22px var(--affiche); color: var(--papier); }
.stage-hint { color: var(--gris); font-size: 14px; min-height: 21px; text-align: center; z-index: 2; }
.stage-title { font: clamp(28px, 4vw, 46px)/1 var(--affiche); text-align: center; min-height: 46px; color: var(--rar, var(--papier)); text-shadow: 0 0 34px var(--rar, transparent); z-index: 2; }
.stage-title.pop { animation: titlepop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.stage-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; min-height: 46px; z-index: 2; }
/* Le sachet à déchirer (pack-open.js) */
.tear-zone { position: relative; z-index: 2; --pack-w: min(250px, 52vw, 36vh); --halo: #ff3d7f; cursor: grab; touch-action: none; perspective: 900px; outline: none; user-select: none; }
.tear-zone.k-premium { --halo: #ffc845; }
.tear-zone.k-platine { --halo: #cfd9ff; }
.tear-zone:active { cursor: grabbing; }
.tear-zone.opened { cursor: default; }
.pack-float { animation: float 3.4s ease-in-out infinite; }
.tear-zone.opened .pack-float { animation-play-state: paused; }
.pack-enter { animation: pack-in .85s cubic-bezier(.2, 1.25, .35, 1) both; }
.pack-3d { position: relative; will-change: transform; }
.pack-3d .pack { --pw: var(--pack-w); filter: none; transition: none; }
.pack-3d .pack-body { z-index: 2; }
.pack-3d .pack-strip { position: absolute; left: 0; top: 0; z-index: 3; }
.pack-halo { position: absolute; inset: -22% -30%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 30%, transparent), transparent); animation: halo 3.4s ease-in-out infinite; transition: background .4s; }
.tear-zone:hover .pack-halo { background: radial-gradient(closest-side, color-mix(in srgb, var(--halo) 42%, transparent), transparent); }
.tear-zone.opened .pack-halo { background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 55%, transparent), transparent); animation: none; }
.pack-glare { position: absolute; inset: 2% 0; z-index: 4; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), #ffffffd0, transparent 45%); }
.tear-zone:hover .pack-glare { opacity: 1; }
.tear-zone.opened .pack-glare { opacity: 0; }
.pack-shadow { position: absolute; left: 12%; right: 12%; bottom: -38px; height: 26px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #000000c0, transparent); animation: shadow-float 3.4s ease-in-out infinite; }
.tear-zone.opened .pack-shadow { opacity: 0; transition: opacity .5s .6s; }
.tear-guide { position: absolute; left: 0; right: 0; top: 13%; height: 0; z-index: 5; pointer-events: none; transition: opacity .2s; }
.tear-dots { position: absolute; left: 7%; right: 3%; top: -1px; height: 2px; opacity: .8;
  background: repeating-linear-gradient(90deg, #ffffffd9 0 6px, transparent 6px 11px); background-size: 11px 2px; animation: dots-march .9s linear infinite;
  filter: drop-shadow(0 0 3px #000a); }
.tear-dots::after { content: ''; position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffffff00 70%); animation: dots-run 1.8s cubic-bezier(.5, 0, .5, 1) infinite; }
.tear-notch { position: absolute; left: -3px; top: -8px; width: 0; height: 0; border: 8px solid transparent; border-left: 11px solid #fff;
  filter: drop-shadow(0 0 6px #fffa); animation: notch 1.8s ease-in-out infinite; }
.tear-zone:active .tear-guide, .tear-zone.opened .tear-guide { opacity: 0; }
.emerge { position: absolute; left: 8%; top: 15%; width: 84%; z-index: 1; pointer-events: none; }
.emerge .emerge-card { position: absolute; left: 0; top: 0; animation: none; transition: none; cursor: default; box-shadow: 0 -6px 26px #0008; border-radius: calc(var(--w) * .07); }
.emerge .emerge-card .back { position: absolute; inset: 0; }
.pack-ghost { position: fixed; z-index: 1; pointer-events: none; }
.open-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.open-fx.behind { z-index: 1; }
@keyframes pack-in { from { opacity: 0; transform: translateY(40vh) rotate(-14deg) scale(.55); } 55% { opacity: 1; } }
@keyframes shadow-float { 50% { transform: scale(.82); opacity: .7; } }
@keyframes halo { 50% { opacity: .65; transform: scale(.94); } }
@keyframes dots-march { to { background-position: 11px 0; } }
@keyframes dots-run { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes notch { 50% { transform: translateX(5px); } }
.pile { display: flex; gap: 10px; align-items: flex-end; z-index: 2; }
.pile .pack { --pw: 74px; filter: drop-shadow(0 8px 10px #0009); opacity: .55; }
.pile .pack.done { opacity: .18; }
.pile .pack.now { opacity: 1; transform: translateY(-6px); }

.deal { position: relative; display: grid; grid-template-columns: repeat(5, var(--w)); gap: 16px; perspective: 1400px; z-index: 2; --w: clamp(120px, 14vw, 186px); }
.deal.ten { --w: clamp(92px, 9.6vw, 140px); }
.slot { position: relative; width: var(--w); aspect-ratio: 5 / 7.2; transform-style: preserve-3d; cursor: pointer;
  transition: transform .75s cubic-bezier(.3, 1.35, .5, 1); animation: rise-out .7s cubic-bezier(.2, .9, .3, 1) backwards; }
.slot:not(.flipped):hover { transform: translateY(-8px) rotateZ(-1deg); }
.slot.flipped { transform: rotateY(180deg); cursor: default; }
.slot.flipped.big { transform: rotateY(180deg) scale(1.1); z-index: 5; }
.slot .back, .slot .rc { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.slot .rc { --w: inherit; width: 100%; transform: rotateY(180deg); }
.slot .back, .cx-back { border-radius: calc(var(--w) * .07); overflow: hidden; border: 2px solid #ffffff2a;
  background:
    radial-gradient(circle at 50% 44%, #ff3d7f 0 5%, #15161b 5.5% 7%, transparent 7.5%),
    repeating-radial-gradient(circle at 50% 44%, #ffffff0d 0 1px, transparent 1px 5px),
    radial-gradient(circle at 50% 44%, #26262e 0 34%, transparent 34.5%),
    linear-gradient(160deg, #2a2d38, #121318); }
.slot .back::after, .cx-back::after { content: 'RAPVERSE'; position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font: calc(var(--w) * .075) var(--affiche); letter-spacing: .08em; color: #ffffff4d; }
.slot .back.hint { border-color: color-mix(in srgb, var(--rar) 75%, transparent); animation: pulse 1.3s ease-in-out infinite; }
.slot .back.hint.r-L, .slot .back.hint.r-M { animation: pulse .8s ease-in-out infinite, wobble 1.6s ease-in-out infinite; }
.slot .tag-new { position: absolute; z-index: 6; top: -11px; left: 50%; transform: translateX(-50%) rotateY(180deg); background: var(--neon); color: #fff; font: calc(var(--w) * .085) var(--affiche); padding: 2px 10px; border-radius: 6px; opacity: 0; transition: opacity .3s .55s; white-space: nowrap; }
.slot.flipped .tag-new { opacity: 1; }
.rays { position: absolute; inset: -45%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, transparent 0 9deg, color-mix(in srgb, var(--rar) 40%, transparent) 11deg 13deg, transparent 15deg 26deg);
  mask: radial-gradient(circle, #000 18%, transparent 66%); -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); animation: spin 14s linear infinite, fade .6s both; }
.flash { position: fixed; inset: 0; z-index: 101; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--rar) 70%, white), transparent 72%); animation: flash 1s ease-out both; }
.fx { position: fixed; inset: 0; z-index: 102; pointer-events: none; }

.recap { width: min(1100px, 92vw); max-height: 62vh; overflow: auto; z-index: 2; padding: 10px; }
.recap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 12px; justify-items: center; }
.recap-grid .rc { --w: 118px; }
.recap-grid .cell { position: relative; }
.recap-grid .cell .tag-new { position: absolute; z-index: 6; top: -9px; left: 50%; transform: translateX(-50%); background: var(--neon); color: #fff; font: 12px var(--affiche); padding: 1px 8px; border-radius: 5px; }
.recap-sum { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; z-index: 2; font-size: 14px; color: var(--gris); }
.recap-sum b { font: 22px var(--affiche); color: var(--rar); margin-right: 4px; }

.history { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 10px; }
.history .rc { --w: 118px; }

/* --- Lecteur ------------------------------------------------------------------ */
.now-playing { position: fixed; left: 20px; bottom: 20px; z-index: 120; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #1e2027f2; border: 1px solid var(--joint); box-shadow: 0 10px 30px #0009; animation: rise .3s both; max-width: calc(100vw - 40px); }
.now-playing .vinyl { width: 38px; height: 38px; border-radius: 50%; flex: none; background: radial-gradient(circle, var(--neon) 0 18%, #111 19% 22%, #222 23% 100%); background-size: cover; animation: spin 2.2s linear infinite; box-shadow: inset 0 0 0 3px #00000088; }
.now-playing b { display: block; font-size: 13px; }
.now-playing small { color: var(--gris); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* --- Fenêtre ------------------------------------------------------------------ */
dialog.modal { max-width: min(860px, 94vw); max-height: 92vh; overflow: auto; border: 1px solid var(--joint); border-radius: 22px; background: var(--dalle); color: var(--papier); padding: 26px; }
dialog.modal::backdrop { background: #0b0b0ecc; backdrop-filter: blur(6px); }
dialog.modal[open] { animation: rise .25s ease-out; }
.modal-close { float: right; }
.detail { display: grid; grid-template-columns: 250px 1fr; gap: 28px; clear: both; }
.detail .rc { --w: 250px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.facts div { background: var(--bitume); border-radius: 10px; padding: 10px 12px; }
.facts b { display: block; font: 22px var(--affiche); }
.facts span { font-size: 12px; color: var(--gris); }
.copies { display: grid; gap: 6px; margin: 10px 0 16px; }
.copy { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bitume); border-radius: 10px; font-size: 13px; }
.copy span { flex: 1; }

/* --- Collection ---------------------------------------------------------------- */
.progress { height: 10px; border-radius: 10px; background: var(--dalle-2); overflow: hidden; margin: 10px 0 4px; }
.progress b { display: block; height: 100%; background: linear-gradient(90deg, var(--neon), var(--or)); border-radius: 10px; }
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 18px 0 22px; }
.toolbar input[type=search] { min-width: 220px; }
.toolbar .spacer { flex: 1; }
.rarity-sum { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--gris); }
.rarity-sum span b { color: var(--rar); font: 18px var(--affiche); margin-right: 4px; }

/* --- Clash --------------------------------------------------------------------- */
.opponents { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.opponent { text-align: left; justify-content: start; justify-items: start; align-content: start; padding: 18px; border-radius: 16px; background: var(--dalle); border: 1px solid var(--joint); display: grid; gap: 4px; }
.opponent.on { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon) inset; }
.opponent b { font: 22px var(--affiche); }
.opponent small { color: var(--gris); }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; justify-items: center; max-height: 560px; overflow: auto; padding: 6px; }
.picker .rc { --w: 132px; }
.picker .rc.picked { outline: 3px solid var(--neon); outline-offset: 3px; }
.picker .rc .order { position: absolute; z-index: 5; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 2em; height: 2em; border-radius: 50%; background: var(--neon); color: #fff; display: grid; place-items: center; font: 1.6em var(--affiche); }
.arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: center; justify-items: center; padding: 24px 0; }
.arena .rc { --w: 230px; }
.arena .side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.arena .side h3 { font-size: 22px; }
.vs { font: 60px var(--affiche); color: var(--neon); text-shadow: 0 0 30px #ff3d7f88; }
.score { font: 44px var(--affiche); text-align: center; }
.score small { display: block; font: 13px var(--texte); color: var(--gris); }
.choose { display: flex; gap: 12px; justify-content: center; margin-top: 8px; min-height: 48px; }
.choose button { font-size: 16px; padding: 12px 22px; }
.rc.win { animation: win .7s ease-out both; }
.rc.lose { filter: grayscale(.8) brightness(.6); transition: filter .5s; }
.rc .stat.hl { color: #fff; }
.rc .stat.hl span { color: var(--or); }
.facedown { --w: 230px; width: var(--w); aspect-ratio: 5 / 7.2; border-radius: 16px; background: radial-gradient(circle at 50% 42%, #ffffff10 0 22%, transparent 23%), repeating-radial-gradient(circle at 50% 42%, #ffffff0c 0 2px, transparent 2px 7px), linear-gradient(160deg, #2c2f3a, #15161b); border: 3px solid #ffffff22; display: grid; place-items: center; font: 34px var(--affiche); color: #ffffff38; }
.rounds { display: flex; gap: 8px; justify-content: center; }
.rounds i { width: 14px; height: 14px; border-radius: 50%; background: var(--dalle-3); }
.rounds i.win { background: var(--vert); } .rounds i.lose { background: var(--rouge); } .rounds i.draw { background: var(--gris); }
.result-banner { text-align: center; padding: 20px; }
.result-banner h2 { font-size: 54px; }

/* --- Marché, échanges, classement, réglages ------------------------------------ */
.offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 22px 16px; justify-items: center; }
.offer { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.offer .rc { --w: 176px; }
.offer .meta { text-align: center; font-size: 12px; color: var(--gris); }
.offer .price { font: 22px var(--affiche); color: var(--or); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-weight: 600; color: var(--gris); font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--joint); }
.table td { padding: 10px; border-bottom: 1px solid var(--joint); }
.table td.num, .table th.num { text-align: right; }
.table tr.me td { background: #ff3d7f12; }
.rank { font: 26px var(--affiche); color: var(--gris); width: 50px; }
.rank.top { color: var(--or); }
.mini-cards { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-cards .rc { --w: 92px; }
.trade { display: grid; gap: 12px; }
.trade-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.editor input[type=number] { width: 64px; padding: 6px; }
.editor select { padding: 6px; }
.colors { display: flex; gap: 8px; }
.colors button { width: 30px; height: 30px; border-radius: 50%; padding: 0; background: var(--c); border: 2px solid transparent; }
.colors button.on { border-color: var(--papier); }

/* --- Choix du profil ------------------------------------------------------------ */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 30px 20px; }
.gate-inner { width: min(900px, 100%); }
.gate h1 { font-size: clamp(54px, 9vw, 110px); line-height: .9; }
.gate h1 span { color: var(--neon); display: block; }
.gate > .gate-inner > p { color: var(--gris); margin: 16px 0 30px; max-width: 52ch; font-size: 15px; }
.profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.profile-card { text-align: left; display: grid; justify-content: start; justify-items: start; align-content: start; gap: 8px; padding: 18px; border-radius: 16px; background: var(--dalle); border: 1px solid var(--joint); }
.profile-card:hover { border-color: var(--c); }
.profile-card .avatar { width: 46px; height: 46px; font-size: 24px; }
.profile-card b { font: 24px var(--affiche); }
.profile-card small { color: var(--gris); }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 130; max-width: 380px; padding: 12px 16px; border-radius: 12px; background: var(--dalle-3); border: 1px solid #4a4f5e; box-shadow: 0 10px 30px #0009; animation: rise .25s both; }
.toast.error { border-color: var(--rouge); }

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes float { 50% { transform: translateY(-12px) rotate(-1.2deg); } }
@keyframes charge { 0% { transform: none; } 20% { transform: rotate(-3deg) scale(1.02); } 40% { transform: rotate(3deg) scale(1.04); } 60% { transform: rotate(-2deg) scale(1.06); } 80% { transform: rotate(2deg) scale(1.07); } 100% { transform: scale(1.08); } }
@keyframes rip { 0% { transform: none; } 30% { transform: translate(6px, -14px) rotate(4deg); } 100% { transform: translate(140px, -320px) rotate(38deg); opacity: 0; } }
@keyframes sink { to { transform: translateY(70vh) rotate(-6deg); opacity: 0; } }
@keyframes leak { 0% { opacity: 0; transform: scale(.4, .2); } 25% { opacity: 1; transform: scale(1, 1); } 100% { opacity: 0; transform: scale(1.4, 3.5); } }
@keyframes rise-out { from { opacity: 0; transform: translateY(240px) scale(.55) rotate(var(--r0, 0deg)); } }
@keyframes wobble { 25% { rotate: -1.2deg; } 75% { rotate: 1.2deg; } }
@keyframes sheen { 0% { background-position: 150% 0; } 60%, 100% { background-position: -100% 0; } }
@keyframes titlepop { from { transform: scale(.4); opacity: 0; } }
@keyframes quake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-6px, 3px); } 40%, 60% { transform: translate(6px, -3px); } }
@keyframes countpop { 50% { transform: scale(1.25); } }
@keyframes pulse { 50% { box-shadow: 0 0 34px color-mix(in srgb, var(--rar) 70%, transparent); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
@keyframes win { 40% { transform: scale(1.08); box-shadow: 0 0 40px var(--vert); } }

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .tabs { order: 3; flex-basis: 100%; }
  main { padding: 22px 14px 50px; }
  .crate { grid-template-columns: 1fr; }
  .deal { grid-template-columns: repeat(3, var(--w)); --w: clamp(100px, 28vw, 160px); }
  .deal.ten { grid-template-columns: repeat(4, var(--w)); --w: clamp(72px, 21vw, 120px); }
  .detail, .cols { grid-template-columns: 1fr; }
  .detail .rc { --w: 220px; margin: 0 auto; }
  .arena { grid-template-columns: 1fr; gap: 12px; }
  .arena .rc, .facedown { --w: 180px; }
  .vs { font-size: 34px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .grid .rc { --w: 150px; }
}
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

.coins.bump { animation: countpop .5s ease-out; }
/* --- Admin -------------------------------------------------------------------- */
.admin-grid { display: grid; gap: 20px; }
.admin-row td { vertical-align: middle; }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.state-ok { color: var(--vert); }
.state-ko { color: var(--rouge); }
.thumb { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; background: var(--dalle-2); display: block; }
.thumb.none { display: grid; place-items: center; color: var(--gris-2); font: 18px var(--affiche); }
.admin-note { font-size: 13px; color: var(--gris); margin-top: 6px; }
.test-result { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bitume); font-size: 13px; overflow-wrap: anywhere; }
.tabs .tab.admin { color: var(--or); }

/* --- Révélation carte par carte : la pile en main ------------------------------- */
.hold { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.stack { --w: min(clamp(200px, 22vw, 290px), 36vh); position: relative; width: var(--w); aspect-ratio: 5 / 7.2; perspective: 1600px; }
.stack .slot { position: absolute; inset: 0; width: 100%; animation: none; transition: transform .55s cubic-bezier(.25, 1.25, .45, 1), opacity .4s; cursor: pointer;
  transform: translate(calc(var(--depth) * 5px), calc(var(--depth) * -4px)) rotate(calc(var(--depth) * 1.2deg)); z-index: calc(50 - var(--depth)); }
.stack .slot.entering { animation: stack-in .7s cubic-bezier(.2, .9, .3, 1) backwards; animation-delay: calc(var(--i) * 70ms); }
.stack .slot:not(.flipped):not(.top) { pointer-events: none; }
.stack .slot.top:not(.flipped):hover { transform: translateY(-10px) rotate(-1deg); }
.stack .slot.flipped { transform: rotateY(180deg); }
.stack .slot.flipped.big { transform: rotateY(180deg) scale(1.06); z-index: 60; }   /* au-dessus des cartes encore dans la pile */
.stack .slot.gone { transform: translate(-70vw, 10vh) rotate(-28deg) !important; opacity: 0; pointer-events: none; }
.stack .slot .rc { --w: inherit; }
.stack-count { font: 20px var(--affiche); color: var(--gris); }
.stack-count b { color: var(--papier); }
.hand { display: flex; gap: 8px; min-height: 88px; justify-content: center; flex-wrap: wrap; max-width: min(900px, 92vw); z-index: 2; }
.hand .rc { --w: 62px; animation: drop-in .45s cubic-bezier(.2, 1.3, .4, 1) both; box-shadow: 0 6px 14px #0008; cursor: pointer; }
.hand .rc .stats, .hand .rc .flag, .hand .rc .count { display: none; }
.hand .rc .name { font-size: 1.35em; }
/* Le dos de la carte du dessus annonce une rare */
.stack .slot.top .back.hint.r-E { box-shadow: 0 0 24px #a46bff88; }
.stack .slot.top .back.hint.r-L { animation: pulse .7s ease-in-out infinite, tremble .35s linear infinite; }
.stack .slot.top .back.hint.r-M { animation: pulse .5s ease-in-out infinite, tremble .18s linear infinite; border-color: #ff2e4d; }

/* --- Cinématique Légendaire ---------------------------------------------------- */
.cine { position: fixed; inset: 0; z-index: 99; pointer-events: none; overflow: hidden; }
.stage > .cine { z-index: 1; }
.cine .veil { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .5s; }
.cine.on .veil { opacity: .72; }
.cine.black .veil { opacity: .96; transition-duration: .35s; }
.cine .photo { position: absolute; inset: -8%; background-size: cover; background-position: center 25%; opacity: 0; transition: opacity 1.2s;
  filter: blur(26px) saturate(1.5) brightness(.55); }
.cine .photo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 10%, #000 75%), color-mix(in srgb, var(--rar) 35%, transparent); mix-blend-mode: multiply; }
.cine.show-photo .photo { opacity: 1; }
.cine .beams { position: absolute; left: 50%; top: 45%; width: 220vmax; height: 220vmax; transform: translate(-50%, -50%) scale(0); opacity: 0;
  background: repeating-conic-gradient(from 0deg, transparent 0 7deg, color-mix(in srgb, var(--rar) 55%, transparent) 9deg 11deg, transparent 13deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 4%, transparent 45%); mask: radial-gradient(circle, #000 4%, transparent 45%); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), opacity .8s; }
.cine.beams-on .beams { transform: translate(-50%, -50%) scale(1); opacity: 1; animation: spin-c 18s linear infinite; }
.cine .pillar { position: absolute; left: 50%; top: -10%; width: 8px; height: 0; transform: translateX(-50%); border-radius: 6px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--rar) 80%, white), #fff); box-shadow: 0 0 40px 18px color-mix(in srgb, var(--rar) 70%, transparent); opacity: 0; }
.cine.pillar-on .pillar { animation: pillar 1.3s cubic-bezier(.5, 0, .3, 1) forwards; }
.shock { position: fixed; left: var(--x); top: var(--y); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; z-index: 104; pointer-events: none;
  border: 6px solid color-mix(in srgb, var(--rar) 80%, white); box-shadow: 0 0 30px var(--rar), inset 0 0 30px var(--rar); animation: shock 1.1s cubic-bezier(.1, .7, .3, 1) forwards; }
.whiteout { position: fixed; inset: 0; z-index: 105; pointer-events: none; background: #fff; animation: whiteout 1.3s ease-out forwards; }
.big-title { position: fixed; left: 0; right: 0; top: 3vh; z-index: 106; pointer-events: none; text-align: center; font: clamp(48px, 8.5vw, 124px)/.9 var(--affiche);
  color: var(--rar); text-shadow: 0 0 40px var(--rar), 0 0 120px var(--rar); letter-spacing: .02em; }
.big-title.legend { animation: stamp .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.big-title small { display: block; font: clamp(22px, 3vw, 38px) var(--affiche); color: #fff; text-shadow: 0 2px 20px #000; margin-top: 10px; }
.big-title.fade { animation: fade-out .8s ease-in forwards; }
.big-title.mythic span { display: inline-block; animation: glitch-in .5s cubic-bezier(.2, 1.4, .4, 1) both, chroma 1.6s steps(2) infinite; animation-delay: calc(var(--k) * 70ms), calc(var(--k) * 70ms + .5s); }
.stack .slot.legend-spin { animation: legend-spin 1.7s cubic-bezier(.45, 0, .2, 1) forwards !important; z-index: 80; }
.stack .slot.mythic-rise { animation: mythic-rise 1.4s cubic-bezier(.6, 0, .3, 1) forwards !important; z-index: 80; }
.stack .slot.aura::before { content: ''; position: absolute; inset: -14px; z-index: -1; border-radius: 22px; transform: rotateY(180deg);
  background: conic-gradient(from var(--a, 0deg), var(--rar), #fff, var(--rar), #000, var(--rar)); filter: blur(14px); animation: aura 2.4s linear infinite; }
.stage.dark-mode { background: radial-gradient(ellipse 60% 55% at 50% 42%, #2a0408, #050203 72%); transition: background 1s; }
.stage.gold-mode { background: radial-gradient(ellipse 60% 55% at 50% 42%, #3a2a08, #0b0904 72%); transition: background 1s; }

@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes aura { to { --a: 360deg; } }
@keyframes stack-in { from { opacity: 0; transform: translateY(60vh) scale(.6) rotate(-10deg); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-40px) scale(1.4); } }
@keyframes tremble { 0%, 100% { translate: 0 0; } 25% { translate: -2px 1px; } 50% { translate: 2px -1px; } 75% { translate: -1px -2px; } }
@keyframes spin-c { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes pillar { 0% { height: 0; opacity: 1; } 70% { height: 120vh; opacity: 1; width: 14px; } 100% { height: 120vh; opacity: 0; width: 160px; } }
@keyframes shock { to { width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; opacity: 0; border-width: 1px; } }
@keyframes whiteout { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stamp { from { transform: scale(3); opacity: 0; filter: blur(12px); } }
@keyframes fade-out { to { opacity: 0; transform: translateY(-20px); } }
@keyframes glitch-in { 0% { opacity: 0; transform: translate(calc((var(--k) - 3) * 30px), -80px) scale(2.4) skewX(-20deg); filter: blur(10px); } 60% { opacity: 1; transform: translate(4px, 4px) scale(.95) skewX(6deg); filter: blur(0); } }
@keyframes chroma { 0% { text-shadow: -4px 0 #00e5ff, 4px 0 #ff2e4d, 0 0 60px var(--rar); } 50% { text-shadow: 3px 1px #00e5ff, -3px -1px #ff2e4d, 0 0 90px var(--rar); } }
@keyframes legend-spin { 0% { transform: translateY(0) rotateY(0) scale(1); } 35% { transform: translateY(-40px) rotateY(360deg) scale(1.15); } 100% { transform: translateY(0) rotateY(900deg) scale(1.08); } }
@keyframes mythic-rise { 0% { transform: translateY(0) rotateY(0) scale(1); filter: brightness(1); } 40% { transform: translateY(-50px) rotateY(540deg) scale(1.2); filter: brightness(1.6) blur(1px); } 100% { transform: translateY(0) rotateY(1980deg) scale(1.08); filter: brightness(1) blur(0); } }
@media (max-width: 900px) { .stack { --w: clamp(180px, 56vw, 260px); } }

/* Grand titre des Légendaires et Mythiques, dans l'emplacement réservé au-dessus de la pile */
.stage.holding .stage-title { min-height: clamp(72px, 12vh, 124px); display: flex; flex-direction: column; justify-content: flex-end; }
.stage-title.headline { font: clamp(44px, 7vw, 100px)/.88 var(--affiche); color: var(--rar); text-shadow: 0 0 40px var(--rar), 0 0 110px var(--rar); letter-spacing: .02em; }
.stage-title.headline small { display: block; font: clamp(18px, 2.2vw, 28px) var(--affiche); color: #fff; text-shadow: 0 2px 16px #000; margin: 6px 0 12px; letter-spacing: .04em; }
.stage-title.headline.legend .word { display: inline-block; animation: stamp .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.stage-title.headline.mythic .word span { display: inline-block; animation: glitch-in .5s cubic-bezier(.2, 1.4, .4, 1) both, chroma 1.6s steps(2) infinite; animation-delay: calc(var(--k) * 70ms), calc(var(--k) * 70ms + .5s); }
.stage-title.headline small { animation: fade .6s .5s both; }
.hand.done { gap: 14px; }
.hand.done .rc { --w: clamp(110px, 12vw, 150px); }
.hand.done .rc .stats { display: grid; }
.hand.done .rc .name { font-size: 1.75em; }

/* --- Cinématiques sur mesure des Mythiques (cine-*.js) ------------------------------ */
.cx { position: fixed; inset: 0; z-index: 200; background: #000; opacity: 0; transition: opacity .2s; overflow: hidden; pointer-events: auto; cursor: default; }
.cx.on { opacity: 1; }
.cx.leaving { background: transparent; transition: background .7s; pointer-events: none; }
.cx.leaving .cx-canvas { opacity: 0; transition: opacity .75s ease-in; }
.cx.gone { opacity: 0; transition: opacity .35s; }
.cx-cam { position: absolute; inset: 0; will-change: transform; }
.cx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cx-card { position: absolute; left: 0; top: 0; width: var(--w); aspect-ratio: 5 / 7.2; perspective: 1400px; opacity: 0; will-change: transform, filter, opacity; }
.cx-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.cx-back, .cx-inner .rc { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cx-back { position: absolute; }
.cx-inner .rc { --w: inherit; width: 100%; transform: rotateY(180deg); cursor: default; }
.cx-skip { position: absolute; right: 26px; bottom: 22px; z-index: 5; background: #00000080; border: 1px solid #ffffff30; color: #ffffffb0; font: 600 13px var(--texte);
  padding: 7px 14px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .4s; backdrop-filter: blur(6px); }
.cx-skip.show { opacity: 1; pointer-events: auto; }
.cx-skip:hover { color: #fff; border-color: #ffffff70; }
body:has(.cx:not(.leaving)) .now-playing { opacity: 0; }
.now-playing { transition: opacity .6s; cursor: pointer; }
.cine-grid { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0 22px; }
.cine-pick { display: grid; gap: 6px; justify-items: center; }
.cine-pick .rc { --w: 150px; }
.cine-pick small { color: var(--gris); font-size: 12px; }
.cine-vars { display: grid; gap: 4px; }
.cine-var { display: flex; gap: 4px; justify-content: center; }
.cine-var .small-btn { font-size: 11px; padding: 3px 7px; }
.cine-var.on .small-btn:first-child { border-color: var(--rose, #ff4f9a); }
@media (max-height: 820px) {
  .stage { gap: 12px; }
  .stack { --w: min(clamp(180px, 22vw, 290px), 31vh); }
  .stage.holding .stage-title { min-height: clamp(56px, 10vh, 96px); }
  .stage-title.headline { font-size: clamp(34px, min(7vw, 9vh), 100px); }
  .stage-title.headline small { font-size: clamp(15px, 2.4vh, 24px); margin: 4px 0 6px; }
  .hand { min-height: 64px; }
  .hand .rc { --w: 46px; }
  .hold { gap: 10px; }
}
.cx-hint { position: absolute; left: 0; right: 0; bottom: max(8px, 1.6vh); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none;
  animation: fade .8s .2s both; text-shadow: 0 2px 10px #000; }
.cx-hint b { font: 15px var(--affiche); letter-spacing: .3em; text-transform: uppercase; color: #ff2e4d; text-shadow: 0 0 14px #ff2e4d88; }
.cx-hint span { font: 600 13px var(--texte); color: #ffffffa0; animation: pulse-text 2s ease-in-out infinite; }
.cx.idle { cursor: pointer; }
@keyframes pulse-text { 50% { opacity: .45; } }
.cx-hint.r-L b { color: #ffb020; text-shadow: 0 0 14px #ffb02088; }
.cx-inner .rc::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; opacity: var(--sheen, 0);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #ffffff38, transparent 55%), linear-gradient(115deg, transparent 35%, #ffffff14 50%, transparent 65%); }
/* Admin → Sélection */
.sel-tools { margin-top: 12px; flex-wrap: wrap; gap: 10px; align-items: center; }
.sel-tools input[type=search] { min-width: 220px; }
.sel-list { display: grid; gap: 6px; margin-top: 14px; }
.sel-row { display: grid; grid-template-columns: 46px 22px 40px minmax(140px, 1.2fr) minmax(120px, 2fr) 90px 100px; gap: 12px; align-items: center;
  padding: 6px 12px; border-radius: 10px; background: var(--dalle); border: 1px solid var(--joint); cursor: pointer; opacity: .55; transition: opacity .15s, border-color .15s; }
.sel-row.on { opacity: 1; border-color: color-mix(in srgb, var(--rar) 45%, var(--joint)); }
.sel-row:hover { opacity: 1; }
.sel-row input { width: 18px; height: 18px; accent-color: var(--neon); }
.sel-rank { font: 15px var(--affiche); color: var(--gris-2); text-align: right; }
.sel-ph { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--dalle-3); display: grid; place-items: center; font: 14px var(--affiche); color: var(--gris); }
.sel-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sel-name { display: grid; line-height: 1.2; min-width: 0; }
.sel-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-name small { color: var(--gris-2); font-size: 12px; }
.sel-bar { height: 8px; border-radius: 99px; background: #ffffff10; overflow: hidden; }
.sel-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--neon), var(--or)); }
.sel-fans { text-align: right; font: 15px var(--affiche); color: var(--papier); }
.sel-rar { font-size: 12px; color: var(--rar); text-align: right; }
@media (max-width: 760px) { .sel-row { grid-template-columns: 34px 20px 36px 1fr 70px; } .sel-bar, .sel-rar { display: none; } }
.table.editor tr.dirty td { background: color-mix(in srgb, var(--or) 12%, transparent); }
.table.editor tr.dirty td:first-child { box-shadow: inset 3px 0 var(--or); }
.save-bar { position: fixed; left: 50%; bottom: 18px; z-index: 60; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 20px;
  border-radius: 999px; background: #1e2027f5; border: 1px solid var(--or); box-shadow: 0 14px 40px #000a; transition: transform .3s cubic-bezier(.2, 1.3, .4, 1); }
.save-bar.show { transform: translate(-50%, 0); }
.save-bar span { font-weight: 600; }

.react-opts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 8px 0 14px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; }
.react-opt { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.react-card { display: flex; gap: 5px; align-items: center; font-size: 12px; color: var(--gris); cursor: pointer; }

.music-btn { font-size: 11px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-start { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 14px; }
.music-start input[type=range] { width: 180px; }
.music-list { display: grid; gap: 6px; }
.music-row { display: grid; grid-template-columns: auto minmax(140px, 1fr) 300px 130px auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,0.03); }
.music-row.on { outline: 1px solid var(--rose, #ff4f9a); }
.music-info { display: grid; min-width: 0; }
.music-info b, .music-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kick-strip { width: 300px; height: 26px; border-radius: 4px; cursor: pointer; }
.kick-badge { font-size: 12px; color: var(--gris); }
.kick-badge.ok { color: #5dff7a; } .kick-badge.mid { color: #ffd23f; } .kick-badge.low { color: #ff6b6b; }
@media (max-width: 760px) { .music-row { grid-template-columns: auto 1fr auto; } .kick-strip { grid-column: 1 / -1; width: 100%; } .kick-badge { grid-column: 2; } }

/* ================================================================================
   1.13 — dialogues, barre mobile, succès, classement, réglages, fiche artiste
   ================================================================================ */

/* --- Icônes des onglets --------------------------------------------------------- */
.tab { display: inline-flex; align-items: center; gap: 7px; }
.tab-ico { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.tab.on .tab-ico { opacity: 1; color: var(--neon); }
.tab.admin .tab-ico { color: var(--or); }
.tab .badge { margin-left: 0; }
@media (max-width: 1099px) and (min-width: 761px) {   /* les onglets passent sur leur propre ligne */
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .logo { flex: 1; }
  .tabs { order: 3; flex-basis: 100%; justify-content: safe center; }
}
@media (max-width: 980px) and (min-width: 761px) { .tabs .tab-ico { display: none; } .tab { padding: 9px 10px; } }
.tab[data-view=reglages] { display: none; }   /* la pastille du profil y mène */
.who .who-ico { width: 15px; height: 15px; margin-right: 2px; color: var(--gris); }
.who:hover .who-ico, .who.on .who-ico { color: var(--neon); opacity: 1; }
.who.on { border-color: var(--neon); }

/* --- Dialogues (confirmer, demander, code) -------------------------------------- */
dialog.modal.ask { width: min(440px, 94vw); padding: 24px 24px 20px; }
.ask h2 { margin-bottom: 10px; }
.ask-text { color: var(--gris); margin-bottom: 14px; white-space: pre-line; }
.ask .field { margin-top: 4px; }
.ask .field input { width: 100%; }
.ask-error { min-height: 1.4em; margin-top: 6px; color: var(--rouge); font-size: 13px; }
.ask-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.danger-btn { background: color-mix(in srgb, var(--rouge) 16%, var(--dalle-2)); border-color: color-mix(in srgb, var(--rouge) 55%, transparent); color: #ffd0d0; }
.danger-btn:hover { background: var(--rouge); color: #fff; }
dialog.modal.pin-modal { width: min(340px, 94vw); text-align: center; }
.pin-modal .ask-text { margin-bottom: 8px; }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin: 14px 0 18px; min-height: 16px; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gris-2); transition: background .15s, border-color .15s, transform .15s; }
.pin-dots i.on { background: var(--neon); border-color: var(--neon); transform: scale(1.1); }
.pin-dots.shake { animation: shake .35s; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-pad button { height: 56px; font: 24px var(--affiche); border-radius: 14px; background: var(--dalle-2); }
.pin-pad button:active { transform: scale(.96); }
.pin-pad button.primary { background: var(--neon); }
.pin-hint { margin-top: 12px; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* --- Fiche artiste : qui l'a, le marché ------------------------------------------ */
.social { display: grid; gap: 10px; margin-top: 18px; }
.social:empty { display: none; }
.social > button { justify-self: start; }
.social h3 { margin-top: 6px; }
.owners { display: grid; gap: 6px; }
.owner { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--bitume); }
.owner b { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner .muted { flex: 1; }

/* --- Marché et échanges ---------------------------------------------------------- */
.deal-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--vert) 20%, transparent); color: var(--vert); font: 700 11px var(--texte); text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.trade-summary { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--bitume); color: var(--gris); font-size: 13px; }

/* --- Boosters : série de paies et jauge anti-malchance ---------------------------- */
.streak { display: flex; gap: 6px; margin-top: 10px; }
.streak i { width: 22px; height: 6px; border-radius: 3px; background: #f5c54233; }
.streak i.on { background: var(--or); box-shadow: 0 0 8px #f5c54288; }
.pity { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; margin: -18px 0 36px; color: var(--gris); font-size: 13px; cursor: help; }
.pity .progress { margin: 0; width: 220px; }
.pity .progress b { background: linear-gradient(90deg, #ffb02088, var(--or)); }
.progress.thin { height: 6px; margin: 6px 0 2px; }
.slot .tag-pity { position: absolute; z-index: 6; bottom: -12px; left: 50%; transform: translateX(-50%) rotateY(180deg); background: var(--or); color: #15161b; font: calc(var(--w) * .06) var(--affiche); padding: 2px 10px; border-radius: 6px; opacity: 0; transition: opacity .3s .55s; white-space: nowrap; }
.slot.flipped .tag-pity { opacity: 1; }

/* --- Succès ---------------------------------------------------------------------- */
.ach-group { margin: 30px 0 12px; font-size: 22px; color: var(--gris); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ach { display: flex; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--dalle); border: 1px solid var(--joint); transition: border-color .2s, transform .2s; }
.ach-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--dalle-2); color: var(--gris-2); }
.ach-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ach-body b { font-size: 15px; }
.ach-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; min-height: 30px; }
.ach-reward { font: 17px var(--affiche); color: var(--or); white-space: nowrap; }
.ach-reward.got { font: 600 12px var(--texte); color: var(--vert); }
.ach.ready { border-color: #f5c54299; background: linear-gradient(120deg, #f5c5421f, var(--dalle) 70%); }
.ach.ready .ach-ico { background: var(--or); color: #15161b; animation: glowgold 1.8s ease-in-out infinite; }
.ach.claimed { opacity: .72; }
.ach.claimed .ach-ico { background: color-mix(in srgb, var(--vert) 22%, var(--dalle-2)); color: var(--vert); }
.ach.claimed .progress b { background: var(--vert); }
@keyframes glowgold { 50% { box-shadow: 0 0 18px #f5c542aa; } }

/* --- Classement ------------------------------------------------------------------ */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 18px 0 34px; }
.podium .step { flex: 0 1 220px; min-width: 0; }
.step { --c: var(--neon); position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 12px 18px; border-radius: 18px 18px 8px 8px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, var(--dalle)), var(--dalle)); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--joint)); }
.step:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 26%, var(--dalle)), var(--dalle-2)); transform: translateY(-3px); }
.step { transition: transform .2s; }
.step.s1 { min-height: 230px; order: 2; }
.step.s2 { min-height: 200px; order: 1; }
.step.s3 { min-height: 180px; order: 3; }
.step b { font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step .value { font: 28px var(--affiche); color: var(--papier); }
.step.s1 .value { font-size: 34px; color: var(--or); }
.step.me { box-shadow: 0 0 0 2px var(--neon); }
.medal { position: absolute; top: -14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 17px var(--affiche); color: #15161b; background: #c9ced8; box-shadow: 0 4px 12px #0008; }
.s1 .medal { background: linear-gradient(135deg, #fff2b0, var(--or)); }
.s3 .medal { background: linear-gradient(135deg, #f0b98a, #b8733e); }
.avatar.big { width: 64px; height: 64px; font-size: 32px; box-shadow: 0 0 0 3px #15161b, 0 0 0 5px var(--c, var(--neon)); }
.step.s1 .avatar.big { width: 78px; height: 78px; font-size: 40px; }
.table.ranking td { vertical-align: middle; }
.table.ranking td.rank { font: 20px var(--affiche); color: var(--gris); width: 44px; }
.table.ranking td.rank.top { color: var(--or); }
.table.ranking .progress { width: 110px; margin: 4px 0 0 auto; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #ffffff08; }
dialog.modal.wide-modal { width: min(1000px, 96vw); max-width: min(1000px, 96vw); }
.grid.mini { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px 10px; }
.grid.mini .rc { --w: 124px; }
.rc.want { box-shadow: 0 0 0 3px var(--neon), 0 10px 24px #0007; }
.rc.want::after { content: 'Te manque'; position: absolute; z-index: 5; left: 50%; bottom: 3%; transform: translateX(-50%); padding: 1px 8px; border-radius: 6px; background: var(--neon); color: #fff; font: 11px var(--affiche); letter-spacing: .03em; white-space: nowrap; }

/* --- Réglages -------------------------------------------------------------------- */
.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.settings .panel.wide { grid-column: 1 / -1; }
.settings .panel h2 { margin-bottom: 4px; }
.settings input[type=range] { flex: 1; min-width: 160px; accent-color: var(--neon); padding: 0; }
.settings .field input:not([type=range]) { min-width: 200px; }
.id-card { display: flex; align-items: center; gap: 18px; }
.id-card h2 { font-size: 32px; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.tile { padding: 14px 16px; border-radius: 12px; background: var(--bitume); }
.tile b { display: block; font: 28px/1.1 var(--affiche); }
.tile span { color: var(--gris); font-size: 12px; }
.best-card { display: flex; align-items: center; gap: 22px; margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--bitume); }
.best-card .rc { --w: 130px; }
.best-card h3 { font-size: 30px; margin: 2px 0; }
.danger-zone { border-color: color-mix(in srgb, var(--rouge) 40%, var(--joint)); background: linear-gradient(160deg, #ff5c5c10, var(--dalle) 60%); }
.danger-zone h2 { color: #ffb0b0; }
.react-opt { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* --- Téléphone : barre d'onglets en bas ------------------------------------------ */
@media (max-width: 760px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .topbar { flex-wrap: nowrap; }
  .logo { font-size: 22px; flex: 1; }
  .tabs { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; order: 0; flex-basis: auto; gap: 0; overflow: visible;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: #15161bf2; backdrop-filter: blur(12px); border-top: 1px solid var(--joint); }
  .tab { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; padding: 6px 2px 4px; border-radius: 10px; font-size: 10px; letter-spacing: -.01em; }
  .tab-ico { display: block; width: 21px; height: 21px; }
  .tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab.on { background: #ff3d7f14; }
  .tab.on::after { display: none; }
  .tab .badge { position: absolute; top: 2px; left: calc(50% + 6px); padding: 0 5px; font-size: 10px; line-height: 16px; }
  .topbar { backdrop-filter: none; background: #15161bf7; }   /* sinon la barre fixe reste accrochée au bandeau */
  .who { padding: 3px; }
  .who > :not(.avatar) { display: none; }
  .toast { left: 14px; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); max-width: none; }
  .now-playing { left: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  .ranking .hide-s { display: none; }
  .table.ranking .progress { width: 70px; }
  .podium { gap: 8px; }
  .step { padding: 20px 6px 14px; }
  .step.s1 { min-height: 190px; } .step.s2 { min-height: 168px; } .step.s3 { min-height: 150px; }
  .avatar.big, .step.s1 .avatar.big { width: 48px; height: 48px; font-size: 24px; }
  .step .value, .step.s1 .value { font-size: 22px; }
  .step .muted { display: none; }
  .settings { grid-template-columns: 1fr; }
  .ach-grid { grid-template-columns: 1fr; }
  .pity { margin-top: -26px; }
  .pity .progress { width: 100%; }
  .best-card { gap: 14px; }
  .best-card .rc { --w: 100px; }
  .grid.mini { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .grid.mini .rc { --w: 100px; }
  dialog.modal { padding: 20px 16px; }
}


/* ================================================================================
   1.14 — mise en page : menu latéral sur PC, en-têtes d'affiche, album plus pratique
   ================================================================================ */
:root { --bar-h: 0px; --side: 236px; }
body { font-size: 14.5px; }
/* grain d'affiche sur tout le site (très léger) */
body::after { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
main { overflow-x: clip; }
h1 { font-size: clamp(46px, 5.2vw, 76px); }
.page-head { position: relative; isolation: isolate; margin-bottom: 28px; }
.page-head p { font-size: 15px; line-height: 1.55; }
/* le nom de la section en très grand, en creux, comme une affiche collée derrière */
.page-head[data-ghost]::before { content: attr(data-ghost); position: absolute; z-index: -1; right: -1.5%; top: 50%; transform: translateY(-58%);
  font: clamp(110px, 15vw, 230px)/1 var(--affiche); color: transparent; -webkit-text-stroke: 1.5px #ffffff0f; white-space: nowrap; pointer-events: none; }
.panel { background: linear-gradient(180deg, #1f2128, #1a1b21); }
.empty { display: grid; justify-items: center; gap: 10px; }
.empty p { max-width: 46ch; margin: 0 auto; }
.empty b { margin-bottom: 0; }
.wide-btn { width: 100%; }
.sound-toggle { display: inline-grid; place-items: center; padding: 0; color: var(--papier); }
.sound-toggle .tab-ico { display: block; width: 18px; height: 18px; opacity: 1; }
.sound-toggle.muted-on { color: var(--gris-2); }

/* --- PC : le menu passe sur le côté ---------------------------------------------- */
@media (min-width: 1100px) {
  #app { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); }
  .topbar { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "logo logo" "tabs tabs" "coins coins" "who sound"; align-items: center; gap: 12px; padding: 28px 16px 18px;
    border-bottom: 0; border-right: 1px solid var(--joint); background: linear-gradient(180deg, #17181fee, #111216f5); }
  .logo { grid-area: logo; font-size: 38px; line-height: .86; padding: 0 8px; }
  .logo span { display: block; }
  .tabs { grid-area: tabs; align-self: start; flex-direction: column; gap: 2px; overflow-y: auto; margin-top: 22px; }
  .tab { justify-content: flex-start; gap: 13px; width: 100%; padding: 10px 12px; font-size: 14.5px; border-radius: 10px; }
  .tabs .tab-ico { display: block; width: 19px; height: 19px; }
  .tab.on { background: linear-gradient(90deg, #ff3d7f24, #ff3d7f08); }
  .tab.on::after { left: 0; right: auto; top: 9px; bottom: 9px; width: 3px; height: auto; box-shadow: 0 0 10px var(--neon), 0 0 2px var(--neon); }
  .tab .badge { margin-left: auto; }
  .coins { grid-area: coins; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: var(--bitume); border: 1px solid var(--joint); font-size: 25px; }
  .coins::before { content: 'Disques'; font: 600 12.5px var(--texte); color: var(--gris); order: 3; margin-left: auto; }
  .who { grid-area: who; min-width: 0; justify-content: flex-start; }
  .who .who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .who .who-ico { margin-left: auto; }
  .sound-toggle { grid-area: sound; }
  main { margin: 0; max-width: 1400px; width: 100%; padding: 44px clamp(28px, 4vw, 60px) 80px; }
  .now-playing { left: calc(var(--side) + 20px); }
}

/* --- Album : barre de filtres collée en haut, puces de rareté avec le compte ------- */
.toolbar.sticky { position: sticky; top: var(--bar-h); z-index: 20; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin: 18px -16px 22px; padding: 12px 16px;
  background: #15161bdd; backdrop-filter: blur(14px); border-radius: 0 0 16px 16px; }
.toolbar-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar.sticky > * { min-width: 0; }
.toolbar-row input[type=search] { flex: 1 1 240px; max-width: 420px; }
.rarity-chips .chip { display: inline-flex; align-items: baseline; gap: 8px; }
.rarity-chips .chip b { font: 15px var(--affiche); color: var(--rar, var(--papier)); letter-spacing: .02em; }
.rarity-chips .chip.full { border-color: color-mix(in srgb, var(--rar) 60%, var(--joint)); }
.rarity-chips .chip.full b::after { content: ' ✓'; }
.seg { display: inline-flex; background: var(--bitume); border: 1px solid var(--joint); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: none; padding: 6px 11px; border-radius: 7px; color: var(--gris); font: 15px var(--affiche); }
.seg button.on { background: var(--dalle-3); color: var(--papier); }
.grid.size-s { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 16px 12px; }
.grid.size-s .rc { --w: 132px; }
.grid.size-l { grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 26px 20px; }
.grid.size-l .rc { --w: 226px; }

/* --- Marché ---------------------------------------------------------------------- */
.offers { grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 22px 18px; justify-items: stretch; }
.offer { align-items: stretch; gap: 0; padding: 16px 14px 14px; border-radius: 18px; background: linear-gradient(180deg, var(--dalle), #18191f); border: 1px solid var(--joint); }
.offer-card { position: relative; display: flex; justify-content: center; }
.offer .rc { --w: 170px; }
.offer-flag { position: absolute; z-index: 5; top: -9px; right: -2px; padding: 2px 9px; border-radius: 7px; font: 14px var(--affiche); letter-spacing: .02em; transform: rotate(4deg); box-shadow: 0 4px 12px #0009; }
.offer-flag.new { background: var(--neon); color: #fff; }
.offer-flag.deal { background: var(--vert); color: #05200f; }
.offer-flag.second { top: 22px; transform: rotate(-3deg); }
.offer-plate { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 2px 12px; }
.offer .price { display: inline-flex; align-items: center; gap: 8px; font: 26px/1 var(--affiche); color: var(--or); }
.seller { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--gris); }
.seller span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seller .avatar { width: 20px; height: 20px; font-size: 11px; }

/* --- Choix du profil --------------------------------------------------------------- */
.gate { overflow: hidden; }
.gate-inner { width: min(1200px, 100%); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(20px, 4vw, 60px); }
.gate h1 { font-size: clamp(66px, 9.5vw, 150px); line-height: .84; }
.gate .gate-intro > p { color: var(--gris); margin: 20px 0 40px; max-width: 42ch; font-size: 16.5px; line-height: 1.55; }
.gate-who { font-size: 24px; margin-bottom: 14px; }
.profiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.profile-card { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-items: center;
  justify-content: stretch; justify-items: stretch; padding: 16px 18px 16px 20px; border-radius: 16px; transition: transform .2s, border-color .2s; }
.profile-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--neon)); }
.profile-card .avatar { grid-row: 1 / 3; width: 48px; height: 48px; font-size: 25px; }
.profile-card > b { font: 25px/1 var(--affiche); }
.profile-card > small { font-size: 12.5px; }
.profile-card .progress { grid-column: 1 / -1; margin: 10px 0 0; }
.profile-card .progress b { background: var(--c, var(--neon)); }
.profile-card .lock { position: absolute; top: 10px; right: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--joint); font-size: 11px; color: var(--gris); }
.profile-card:hover { transform: translateY(-2px); }
.profile-card.add { border-style: dashed; background: transparent; }
.profile-card.add::before { display: none; }
.profile-card.add .avatar { background: var(--dalle-2); color: var(--papier); }
.gate-fan { position: relative; height: min(540px, 66vh); }
.gate-fan .rc { --w: clamp(150px, 14vw, 216px); position: absolute; left: 50%; top: 50%; z-index: calc(10 - var(--fa)); cursor: default;
  transform: translate(-50%, -50%) translateX(calc(var(--i) * 36%)) translateY(calc(var(--fa) * 7%)) rotate(calc(var(--i) * 7deg));
  animation: fan-in .9s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--fa) * 90ms + 150ms); }
@keyframes fan-in { from { opacity: 0; transform: translate(-50%, -42%) scale(.92); } }
@media (max-width: 860px) {
  .gate-inner { grid-template-columns: 1fr; }
  .gate-fan { order: -1; height: 230px; margin-bottom: -10px; }
  .gate-fan .rc { --w: 112px; }
  .gate .gate-intro > p { margin: 14px 0 28px; }
}

/* --- Téléphone --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid.size-s { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .grid.size-s .rc { --w: 104px; }
  .grid.size-l { grid-template-columns: 1fr 1fr; }
  .grid.size-l .rc { --w: min(200px, 44vw); }
  .page-head[data-ghost]::before { font-size: 120px; }
}
@media (max-width: 760px) {
  h1 { font-size: 46px; }
  .toolbar.sticky { margin: 14px -14px 18px; padding: 10px 14px; border-radius: 0; }
  .toolbar-row input[type=search] { flex-basis: 100%; max-width: none; min-width: 0; }
  .toolbar-row .spacer { display: none; }
  .toolbar-row select { flex: 1 1 0; min-width: 0; }
  .rarity-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
  .rarity-chips .chip { flex: none; }
  .offers { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px 10px; }
  .offer { padding: 12px 10px 10px; }
  .offer .rc { --w: min(150px, 40vw); }
  .offer .price { font-size: 22px; }
}
html.reduce-motion .gate-fan .rc { animation: none; }
@media (min-width: 641px) and (max-width: 900px) {
  .crate { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .offer-pack { padding: 22px 12px 16px; }
  .offer-pack .pack { --pw: min(170px, 24vw); }
  .offer-pack h2 { font-size: 26px; }
}

/* --- Polices des thèmes --- */
@font-face { font-family: 'Instrument Serif'; src: url('/serif.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/serif-italic.woff2') format('woff2'); font-style: italic; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/archivo-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/archivo-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/archivo-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/archivo-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ================= Thème « Platine » (noir chaud, or, sérif) ================= */
html[data-theme="platine"] {--bitume: #0e0c0a; --dalle: #16130f; --dalle-2: #201c17; --dalle-3: #2b251f; --joint: #322b24;
  --papier: #efe7d8; --gris: #a39a8b; --gris-2: #6f675c;
  --neon: #c9a24b; --or: #e8c97c; --vert: #8fbf8a; --rouge: #d4574f; --sang: #7d1a26;
  --affiche: 'Instrument Serif', 'Times New Roman', serif;
  --texte: 'Archivo', 'Segoe UI', system-ui, sans-serif;}
html[data-theme="platine"] .r-C {--rar: #a39a8b;}
html[data-theme="platine"] .r-U {--rar: #7fb08f;}
html[data-theme="platine"] .r-R {--rar: #7fa6d6;}
html[data-theme="platine"] .r-E {--rar: #ab92da;}
html[data-theme="platine"] .r-L {--rar: #d9a441;}
html[data-theme="platine"] .r-M {--rar: #cf3e55;}
html[data-theme="platine"] {background: var(--bitume);}
html[data-theme="platine"] body {font-family: var(--texte); background: radial-gradient(1100px 620px at 78% -12%, #2a2016b0, transparent 62%), radial-gradient(900px 600px at -10% 110%, #1f0f12aa, transparent 60%), var(--bitume); background-attachment: fixed;}
html[data-theme="platine"] body::after {opacity: .055;}
html[data-theme="platine"] ::selection {background: #c9a24b55;}
html[data-theme="platine"] :focus-visible {outline-color: var(--neon);}
html[data-theme="platine"] h1, html[data-theme="platine"] h2, html[data-theme="platine"] h3 {font-family: var(--affiche); font-weight: 400; letter-spacing: -.01em;}
html[data-theme="platine"] h1 {font-size: clamp(56px, 6.2vw, 96px); line-height: .92; letter-spacing: -.02em;}
html[data-theme="platine"] h2 {font-size: 32px; line-height: 1;}
html[data-theme="platine"] h3 {font-size: 23px;}
html[data-theme="platine"] .page-head[data-ghost]::before {display: none;}
html[data-theme="platine"] .page-head p {color: var(--gris);}
html[data-theme="platine"] button, html[data-theme="platine"] .btn {font: 600 13.5px var(--texte); border-radius: 999px; padding: 10px 18px; border: 1px solid var(--joint); background: transparent; color: var(--papier); transition: border-color .2s, background .2s, color .2s;}
html[data-theme="platine"] button:hover {background: #ffffff07; border-color: #5a4f43;}
html[data-theme="platine"] .primary {background: var(--neon); color: #1a1206; border-color: transparent;}
html[data-theme="platine"] .primary:hover {background: #dcb862; border-color: transparent;}
html[data-theme="platine"] .ghost {border-color: transparent; background: none; color: var(--gris);}
html[data-theme="platine"] .ghost:hover {color: var(--papier); background: #ffffff07; border-color: transparent;}
html[data-theme="platine"] .small-btn {padding: 6px 13px; font-size: 12.5px; border-radius: 999px;}
html[data-theme="platine"] .danger-btn {background: #7d1a2633; border-color: #a33a48; color: #f3c9cd;}
html[data-theme="platine"] .danger-btn:hover {background: var(--sang); color: #fff;}
html[data-theme="platine"] input, html[data-theme="platine"] select {font: 14px var(--texte); background: #ffffff05; border: 1px solid var(--joint); border-radius: 10px; color: var(--papier);}
html[data-theme="platine"] input:focus, html[data-theme="platine"] select:focus {border-color: #6b5b3c; outline: none;}
html[data-theme="platine"] input[type=checkbox] {accent-color: var(--neon);}
html[data-theme="platine"] input[type=range] {accent-color: var(--neon);}
html[data-theme="platine"] .chip {border-radius: 999px; border: 1px solid var(--joint); background: transparent; color: var(--gris); font: 500 13px var(--texte); padding: 6px 13px;}
html[data-theme="platine"] .chip.on {color: var(--papier); border-color: var(--rar, var(--neon)); background: color-mix(in srgb, var(--rar, var(--neon)) 10%, transparent);}
html[data-theme="platine"] .rarity-chips .chip b {font: 17px/1 var(--affiche); color: var(--papier); letter-spacing: 0;}
html[data-theme="platine"] .rarity-chips .chip.on b {color: var(--rar, var(--or));}
html[data-theme="platine"] .seg {border-radius: 999px; background: transparent;}
html[data-theme="platine"] .seg button {border-radius: 999px; font: 16px var(--affiche); padding: 4px 11px;}
html[data-theme="platine"] .seg button.on {background: #c9a24b22; color: var(--or);}
html[data-theme="platine"] .panel {background: #15120f; border: 1px solid var(--joint); border-radius: 6px;}
html[data-theme="platine"] .empty {border-radius: 6px; border-color: var(--joint);}
html[data-theme="platine"] .empty b {font: 30px var(--affiche);}
html[data-theme="platine"] .progress {height: 2px; border-radius: 0; background: var(--joint);}
html[data-theme="platine"] .progress b {border-radius: 0; background: linear-gradient(90deg, #a07a2c, var(--or));}
html[data-theme="platine"] .progress.thin {height: 2px;}
html[data-theme="platine"] .toast {background: #1d1914; border: 1px solid var(--joint); border-radius: 8px;}
html[data-theme="platine"] .toast.error {border-color: var(--rouge);}
html[data-theme="platine"] dialog.modal {background: #15120f; border: 1px solid var(--joint); border-radius: 8px;}
html[data-theme="platine"] dialog.modal::backdrop {background: #080706d9;}
html[data-theme="platine"] .avatar {font: 17px var(--affiche);}
html[data-theme="platine"] .badge {color: #1a1206;}
html[data-theme="platine"] .table th {color: var(--gris-2); font-weight: 500;}
html[data-theme="platine"] .table tr.me td {background: #c9a24b0f;}
html[data-theme="platine"] .table.ranking td.rank {font-family: var(--affiche); font-size: 24px;}
html[data-theme="platine"] .topbar {background: #0e0c0af2; border-color: var(--joint);}
html[data-theme="platine"] .logo {font-family: var(--affiche); color: var(--papier); letter-spacing: -.01em;}
html[data-theme="platine"] .logo span {color: var(--neon); font-style: italic;}
html[data-theme="platine"] .tab {font: 500 14px var(--texte); color: var(--gris); border-radius: 0;}
html[data-theme="platine"] .tab:hover {background: none; color: var(--papier);}
html[data-theme="platine"] .tab.on::after {background: var(--neon); height: 1px; box-shadow: none;}
html[data-theme="platine"] .tab .badge {background: var(--sang); color: #f6e9d6;}
html[data-theme="platine"] .coins {font-family: var(--affiche); color: var(--or); letter-spacing: 0;}
html[data-theme="platine"] .disc {background: radial-gradient(circle, #0e0c0a 0 3px, var(--neon) 3.5px 4.5px, #0e0c0a 5px 100%); box-shadow: 0 0 0 1px var(--neon);}
html[data-theme="platine"] .who {background: transparent; border-color: var(--joint); font: 500 13px var(--texte);}
html[data-theme="platine"] .sound-toggle {background: transparent; border-color: var(--joint);}
html[data-theme="platine"] .tabs .tab.admin, html[data-theme="platine"] .tab.admin {color: #b49a6a;}
@media (min-width: 1100px){html[data-theme="platine"] .topbar {background: #0c0a09; padding: 34px 26px 22px;}
html[data-theme="platine"] .logo {font-size: 48px; line-height: .86; padding: 0;}
html[data-theme="platine"] .tabs {margin-top: 30px; gap: 0;}
html[data-theme="platine"] .tabs .tab-ico {display: none;}
html[data-theme="platine"] .tab {padding: 10px 0; font-size: 14.5px; border-bottom: 1px solid #ffffff08; border-radius: 0;}
html[data-theme="platine"] .tab.on {background: none; color: var(--papier); padding-left: 30px;}
html[data-theme="platine"] .tab.on::after {left: 0; top: 50%; bottom: auto; width: 18px; height: 1px; box-shadow: none;}
html[data-theme="platine"] .tab .badge {background: none; color: var(--neon); font: 600 12px var(--texte); padding: 0;}
html[data-theme="platine"] .coins {background: none; border: 0; padding: 0 2px; font-size: 32px; justify-content: flex-start; gap: 12px;}
html[data-theme="platine"] .coins::before {content: none;}
html[data-theme="platine"] .who {border: 0; padding: 4px 0;}}
@media (max-width: 1099px){html[data-theme="platine"] .tab.on::after {height: 1px;}}
@media (max-width: 760px){html[data-theme="platine"] .tabs {background: #0c0a09f5;}
html[data-theme="platine"] .tab.on {background: #c9a24b14; color: var(--or);}
html[data-theme="platine"] .tab .badge {background: var(--sang);}}
html[data-theme="platine"] .rc {container-type: inline-size; background: #15110e; border: 1px solid color-mix(in srgb, var(--rar) 50%, #3a3229); border-radius: calc(var(--w) * .018);
  padding: calc(var(--w) * .05) calc(var(--w) * .05) calc(var(--w) * .045); gap: 0;
  box-shadow: inset 0 0 0 calc(var(--w) * .022) #15110e, inset 0 0 0 calc(var(--w) * .022 + 1px) color-mix(in srgb, var(--rar) 32%, transparent), 0 calc(var(--w) * .07) calc(var(--w) * .16) #000b;}
html[data-theme="platine"] .rc.r-M {background: linear-gradient(170deg, #22101a, #130a0c 60%); box-shadow: inset 0 0 0 calc(var(--w) * .022) #170b0e, inset 0 0 0 calc(var(--w) * .022 + 1px) #d4a64a90, 0 calc(var(--w) * .07) calc(var(--w) * .16) #000b, 0 0 calc(var(--w) * .14) #cf3e5526;}
html[data-theme="platine"] .rc.r-L {box-shadow: inset 0 0 0 calc(var(--w) * .022) #15110e, inset 0 0 0 calc(var(--w) * .022 + 1px) #d9a44170, 0 calc(var(--w) * .07) calc(var(--w) * .16) #000b, 0 0 calc(var(--w) * .12) #d9a44122;}
html[data-theme="platine"] .rc .ph {flex: 1 1 auto; border-radius: 0; background: linear-gradient(170deg, #2a241e, #120f0c);}
html[data-theme="platine"] .rc .ph::after {background: linear-gradient(180deg, transparent 70%, #0e0c0a66);}
html[data-theme="platine"] .rc .ph img {filter: saturate(.6) sepia(.18) contrast(1.05) brightness(.97); transition: filter .5s;}
html[data-theme="platine"] .rc:hover .ph img, html[data-theme="platine"] .slot .rc .ph img, html[data-theme="platine"] .cx-inner .rc .ph img, html[data-theme="platine"] .detail .rc .ph img, html[data-theme="platine"] .arena .rc .ph img {filter: none;}
html[data-theme="platine"] .rc .ph .initials {font-family: var(--affiche); color: #ffffff1c;}
html[data-theme="platine"] .rc .rar {display: block; min-width: 0; height: auto; top: 5%; left: 5%; padding: .12em .55em; border: 0; border-radius: 0; background: #0e0c0ad9;
  font: italic 1.05em/1.25 var(--affiche); color: color-mix(in srgb, var(--rar) 60%, #f1d48a);}
html[data-theme="platine"] .rc .rar::before {content: attr(data-l);}
@container (min-width: 150px){html[data-theme="platine"] .rc .rar::before {content: attr(data-n);}}
html[data-theme="platine"] .rc .flag {top: 5%; right: 5%; border-radius: 0; background: #0e0c0ab3; font: 600 .7em var(--texte); color: var(--gris);}
html[data-theme="platine"] .rc .count {top: 5%; right: 5%; border-radius: 0; background: var(--neon); color: #1a1206; font: 1.05em/1.3 var(--affiche); padding: 0 .5em;}
html[data-theme="platine"] .rc .name {position: static; flex: none; margin: .32em .08em .22em; font: 2.05em/1 var(--affiche); color: var(--papier); text-shadow: none; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
html[data-theme="platine"] .rc.gold .name::before {font: 600 .32em var(--texte); color: var(--or); letter-spacing: .02em; margin-bottom: .15em;}
html[data-theme="platine"] .rc .stats {flex: none; padding: 0 .08em; gap: .32em; background: none; border-top: 0;}
html[data-theme="platine"] .rc .stat {grid-template-columns: 1.1em 1fr 1.7em; gap: .5em;}
html[data-theme="platine"] .rc .stat i {color: var(--neon); font-size: .9em;}
html[data-theme="platine"] .rc .bar {height: 1px; background: #ffffff1a; border-radius: 0; overflow: visible;}
html[data-theme="platine"] .rc .bar b {border-radius: 0; background: linear-gradient(90deg, #a07a2c, var(--or)); height: 1px;}
html[data-theme="platine"] .rc .stat span {font: 1.35em/1 var(--affiche); color: var(--papier);}
html[data-theme="platine"] .rc .stat.hl span {color: var(--or);}
html[data-theme="platine"] .rc.gold {border: 1px solid #e8c97c; background: linear-gradient(165deg, #2b2213, #15110e 55%);
  box-shadow: inset 0 0 0 calc(var(--w) * .022) #17130d, inset 0 0 0 calc(var(--w) * .022 + 1px) #e8c97caa, 0 calc(var(--w) * .07) calc(var(--w) * .16) #000b, 0 0 calc(var(--w) * .14) #e8c97c26;}
html[data-theme="platine"] .rc.gold .rar {color: var(--or);}
html[data-theme="platine"] .rc.missing {filter: grayscale(1) brightness(.42); box-shadow: none;}
html[data-theme="platine"] .rc .lock {font-family: var(--affiche); color: #ffffff30;}
html[data-theme="platine"] .tilt::before {background: radial-gradient(circle at var(--mx) var(--my), #fff1d024, transparent 55%);}
html[data-theme="platine"] .slot .back, html[data-theme="platine"] .cx-back {border: 1px solid #c9a24b55; border-radius: calc(var(--w) * .018);
  background: radial-gradient(circle at 50% 44%, var(--neon) 0 4.5%, #0e0c0a 5% 6.5%, transparent 7%),
    repeating-radial-gradient(circle at 50% 44%, #c9a24b12 0 1px, transparent 1px 6px),
    radial-gradient(circle at 50% 44%, #1d1813 0 34%, transparent 34.5%),
    linear-gradient(160deg, #1b1713, #0d0b09); box-shadow: inset 0 0 0 calc(var(--w) * .022) #0f0d0a, inset 0 0 0 calc(var(--w) * .022 + 1px) #c9a24b44;}
html[data-theme="platine"] .slot .back::after, html[data-theme="platine"] .cx-back::after {content: 'Rapverse'; font: italic calc(var(--w) * .085) var(--affiche); letter-spacing: 0; color: #c9a24b99;}
html[data-theme="platine"] .facedown {border-radius: 6px; border: 1px solid #c9a24b44; background: radial-gradient(circle at 50% 42%, #c9a24b22 0 22%, transparent 23%), repeating-radial-gradient(circle at 50% 42%, #c9a24b0f 0 2px, transparent 2px 7px), linear-gradient(160deg, #1b1713, #0d0b09); color: #c9a24b55; font-family: var(--affiche);}
html[data-theme="platine"] .rc.want {box-shadow: 0 0 0 2px var(--neon), 0 10px 24px #0008;}
html[data-theme="platine"] .rc.want::after {background: var(--neon); color: #1a1206; font: italic 13px var(--affiche); border-radius: 0;}
html[data-theme="platine"] .pack:not(.k-premium):not(.k-platine) {--k1: #c4475a; --k2: #5a1220; --k3: #1c0609; --ink: #f6e9d6;}
html[data-theme="platine"] .pack .title {font-family: var(--affiche); letter-spacing: -.01em;}
html[data-theme="platine"] .pack .stamp {font-family: var(--affiche); font-style: italic; border-radius: 0;}
html[data-theme="platine"] .daily {border-radius: 6px; border-color: #c9a24b55; background: linear-gradient(100deg, #c9a24b1c, #c9a24b05 60%);}
html[data-theme="platine"] .daily b {font: 28px var(--affiche); color: var(--or);}
html[data-theme="platine"] .streak i {border-radius: 0; height: 2px; background: #c9a24b33;}
html[data-theme="platine"] .streak i.on {background: var(--or); box-shadow: none;}
html[data-theme="platine"] .offer-pack {border-radius: 6px; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--k1) 16%, transparent), transparent 70%), #15120f;}
html[data-theme="platine"] .offer-pack h2 {font-size: 40px;}
html[data-theme="platine"] .offer-pack .qty {border-radius: 999px; background: transparent;}
html[data-theme="platine"] .offer-pack .qty button {border-radius: 999px; font: 18px var(--affiche);}
html[data-theme="platine"] .offer-pack .qty button.on {background: #c9a24b22; color: var(--or);}
html[data-theme="platine"] .offer-pack .buy {font-size: 15px;}
html[data-theme="platine"] .stage {background: radial-gradient(ellipse 60% 55% at 50% 42%, #2a2016, #0a0908 72%);}
html[data-theme="platine"] .stage-title {font-family: var(--affiche);}
html[data-theme="platine"] .slot .tag-new, html[data-theme="platine"] .recap-grid .cell .tag-new {background: var(--neon); color: #1a1206; font-family: var(--affiche); font-style: italic; border-radius: 0;}
html[data-theme="platine"] .tear-zone {--halo: #c4475a;}
html[data-theme="platine"] .vs {font-family: var(--affiche); font-style: italic; color: var(--neon); text-shadow: 0 0 30px #c9a24b55;}
html[data-theme="platine"] .opponent {border-radius: 6px; background: #15120f;}
html[data-theme="platine"] .opponent b {font-size: 26px;}
html[data-theme="platine"] .opponent.on {border-color: var(--neon); box-shadow: inset 0 0 0 1px var(--neon);}
html[data-theme="platine"] .picker .rc.picked {outline: 2px solid var(--neon);}
html[data-theme="platine"] .picker .rc .order {background: var(--neon); color: #1a1206; font-family: var(--affiche);}
html[data-theme="platine"] .offer {border-radius: 6px; background: #15120f;}
html[data-theme="platine"] .offer .price {font: 30px/1 var(--affiche); color: var(--or);}
html[data-theme="platine"] .offer-flag {border-radius: 0; font: italic 15px var(--affiche);}
html[data-theme="platine"] .offer-flag.new {background: var(--neon); color: #1a1206;}
html[data-theme="platine"] .offer-flag.deal {background: var(--vert); color: #10200d;}
html[data-theme="platine"] .ach {border-radius: 6px; background: #15120f;}
html[data-theme="platine"] .ach-ico {border-radius: 50%; font-family: var(--affiche);}
html[data-theme="platine"] .ach-reward {font-family: var(--affiche); font-size: 20px;}
html[data-theme="platine"] .ach-group {font-size: 30px; color: var(--papier);}
html[data-theme="platine"] .step {border-radius: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, #15120f), #15120f);}
html[data-theme="platine"] .step .value {font-family: var(--affiche);}
html[data-theme="platine"] .medal {font-family: var(--affiche);}
html[data-theme="platine"] .tile, html[data-theme="platine"] .facts div, html[data-theme="platine"] .copy, html[data-theme="platine"] .owner, html[data-theme="platine"] .trade-summary, html[data-theme="platine"] .best-card {border-radius: 6px; background: #100e0b;}
html[data-theme="platine"] .tile b, html[data-theme="platine"] .facts b {font-family: var(--affiche); font-size: 32px;}
html[data-theme="platine"] .id-card h2 {font-size: 40px;}
html[data-theme="platine"] .profile-card {border-radius: 6px; background: #15120f;}
html[data-theme="platine"] .profile-card > b {font: 30px/1 var(--affiche);}
html[data-theme="platine"] .gate h1 {font-size: clamp(84px, 10.5vw, 168px); line-height: .82; letter-spacing: -.03em;}
html[data-theme="platine"] .gate h1 span {color: var(--neon); font-style: italic;}
html[data-theme="platine"] .gate-who {font-size: 28px;}
html[data-theme="platine"] .pin-pad button {font-family: var(--affiche); font-size: 28px; border-radius: 50%; aspect-ratio: 1; height: auto;}
html[data-theme="platine"] .pin-dots i.on {background: var(--neon); border-color: var(--neon);}
html[data-theme="platine"] .ask h2 {font-size: 34px;}
html[data-theme="platine"] .now-playing {background: #15120ff2; border-color: var(--joint);}
html[data-theme="platine"] .now-playing .vinyl {background: radial-gradient(circle, var(--neon) 0 18%, #111 19% 22%, #1d1a16 23% 100%);}
html[data-theme="platine"] .music-modal h2, html[data-theme="platine"] .artist-modal h2 {font-size: 40px;}
html[data-theme="platine"] .toolbar.sticky {background: #0e0c0ae0; border-bottom: 1px solid transparent;}
html[data-theme="platine"] .avatar {color: #120f0c;}

@font-face { font-family: 'Unbounded'; src: url('/unbounded-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url('/unbounded-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url('/familjen-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url('/familjen-600.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Bungee'; src: url('/bungee.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/space-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/space-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/space-700.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
/* couleur du halo du paquet Mixtape selon le thème */
.offer-pack.kind-standard { --k1: var(--pack-std, #ff3d7f); } .offer-pack.kind-premium { --k1: #e3b95a; } .offer-pack.kind-platine { --k1: #cfd8ff; }
html[data-theme="platine"] { --pack-std: #c4475a; } html[data-theme="holo"] { --pack-std: #ff5ad8; } html[data-theme="arcade"] { --pack-std: #ff2bd6; }

/* ================= Thème « Holo » (carte holographique, indigo) ================= */
html[data-theme="holo"] {--bitume: #0d0b2a; --dalle: #16133a; --dalle-2: #1f1b4b; --dalle-3: #2a2562; --joint: #2f2a68;
  --papier: #f4f2ff; --gris: #aaa6d8; --gris-2: #706ca6;
  --neon: #ff5ad8; --cy: #3ff0ff; --vi: #7b5cff; --or: #ffd36e; --vert: #5ef2b5; --rouge: #ff5a6e;
  --holo: conic-gradient(from 210deg, #3ff0ff, #7b5cff, #ff5ad8, #ffd36e, #3ff0ff);
  --affiche: 'Unbounded', 'Arial Black', sans-serif;
  --texte: 'Familjen Grotesk', 'Segoe UI', system-ui, sans-serif;}
html[data-theme="holo"] .r-C {--rar: #aaa6d8;}
html[data-theme="holo"] .r-U {--rar: #5ef2b5;}
html[data-theme="holo"] .r-R {--rar: #4fb4ff;}
html[data-theme="holo"] .r-E {--rar: #a98bff;}
html[data-theme="holo"] .r-L {--rar: #ffd36e;}
html[data-theme="holo"] .r-M {--rar: #ff5ad8;}
html[data-theme="holo"] {background: var(--bitume);}
html[data-theme="holo"] body {font-family: var(--texte); font-size: 15px;
  background: radial-gradient(900px 520px at 12% -5%, #3b1e8a88, transparent 62%), radial-gradient(800px 620px at 98% 18%, #0f6a8a66, transparent 60%), radial-gradient(760px 520px at 55% 112%, #8a1e7a55, transparent 62%), var(--bitume);
  background-attachment: fixed;}
html[data-theme="holo"] body::after {opacity: .045;}
html[data-theme="holo"] ::selection {background: #7b5cff66;}
html[data-theme="holo"] :focus-visible {outline-color: var(--cy);}
html[data-theme="holo"] h1, html[data-theme="holo"] h2, html[data-theme="holo"] h3 {font-family: var(--affiche); font-weight: 700; letter-spacing: -.03em;}
html[data-theme="holo"] h1 {font-size: clamp(40px, 4.6vw, 68px); line-height: 1; background: linear-gradient(180deg, #fff 35%, #bcb6ff); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em;}
html[data-theme="holo"] h2 {font-size: 24px; line-height: 1.1;}
html[data-theme="holo"] h3 {font-size: 17px;}
html[data-theme="holo"] .page-head[data-ghost]::before {display: none;}
html[data-theme="holo"] .page-head p {color: var(--gris);}
html[data-theme="holo"] .muted {color: var(--gris);}
html[data-theme="holo"] button, html[data-theme="holo"] .btn {font: 600 14px var(--texte); border-radius: 999px; padding: 10px 18px; border: 1px solid #ffffff22; background: #ffffff0c; color: var(--papier); transition: background .2s, border-color .2s, box-shadow .2s;}
html[data-theme="holo"] button:hover {background: #ffffff18; border-color: #ffffff38;}
html[data-theme="holo"] .primary {border: 0; color: #0d0b2a; background: linear-gradient(90deg, var(--cy), #b4fff5); font-weight: 700; box-shadow: 0 6px 22px #3ff0ff33;}
html[data-theme="holo"] .primary:hover {background: linear-gradient(90deg, #7ff6ff, #d6fffa);}
html[data-theme="holo"] .ghost {background: none; border-color: transparent; color: var(--gris);}
html[data-theme="holo"] .ghost:hover {background: #ffffff10; color: var(--papier); border-color: transparent;}
html[data-theme="holo"] .small-btn {padding: 6px 13px; font-size: 13px;}
html[data-theme="holo"] .danger-btn {background: #ff5a6e22; border-color: #ff5a6e88; color: #ffd0d6;}
html[data-theme="holo"] .danger-btn:hover {background: var(--rouge); color: #fff;}
html[data-theme="holo"] input, html[data-theme="holo"] select {font: 14.5px var(--texte); background: #ffffff0d; border: 1px solid #ffffff1f; border-radius: 999px; color: var(--papier); padding: 9px 15px;}
html[data-theme="holo"] select {padding-right: 30px;}
html[data-theme="holo"] select option {background: var(--dalle);}
html[data-theme="holo"] input:focus, html[data-theme="holo"] select:focus {border-color: #3ff0ff88; outline: none; box-shadow: 0 0 0 3px #3ff0ff22;}
html[data-theme="holo"] input[type=checkbox], html[data-theme="holo"] input[type=range] {accent-color: var(--cy);}
html[data-theme="holo"] .chip {border-radius: 999px; border: 1px solid #ffffff1a; background: #ffffff0a; color: var(--gris); font: 600 13px var(--texte); padding: 6px 13px;}
html[data-theme="holo"] .chip.on {color: var(--papier); background: #ffffff1c; border-color: color-mix(in srgb, var(--rar, #ffffff) 70%, transparent);}
html[data-theme="holo"] .rarity-chips .chip b {font: 700 12px var(--affiche); color: var(--rar, var(--papier)); letter-spacing: 0;}
html[data-theme="holo"] .seg {border-radius: 999px; background: #ffffff0a; border-color: #ffffff1a;}
html[data-theme="holo"] .seg button {border-radius: 999px; font: 700 12px var(--affiche); border: 0; background: none;}
html[data-theme="holo"] .seg button.on {background: #ffffff22; color: var(--papier);}
html[data-theme="holo"] .panel {background: #ffffff08; border: 1px solid #ffffff16; border-radius: 22px; backdrop-filter: blur(10px);}
html[data-theme="holo"] .empty {border-radius: 22px; border-color: #ffffff22;}
html[data-theme="holo"] .empty b {font: 700 22px var(--affiche);}
html[data-theme="holo"] .progress {height: 8px; border-radius: 99px; background: #ffffff14;}
html[data-theme="holo"] .progress b {border-radius: 99px; background: linear-gradient(90deg, var(--cy), var(--vi), var(--neon));}
html[data-theme="holo"] .progress.thin {height: 5px;}
html[data-theme="holo"] .toast {background: #1d1a48f0; border: 1px solid #ffffff22; border-radius: 16px; backdrop-filter: blur(12px);}
html[data-theme="holo"] dialog.modal {background: #15123af2; border: 1px solid #ffffff20; border-radius: 26px; backdrop-filter: blur(16px);}
html[data-theme="holo"] dialog.modal::backdrop {background: #06051acc;}
html[data-theme="holo"] .avatar {font: 700 14px var(--affiche); color: #0d0b2a;}
html[data-theme="holo"] .badge {color: #fff;}
html[data-theme="holo"] .table th {color: var(--gris-2);}
html[data-theme="holo"] .table td {border-color: #ffffff12;}
html[data-theme="holo"] .table tr.me td {background: #7b5cff1c;}
html[data-theme="holo"] .table.ranking td.rank {font: 700 18px var(--affiche);}
html[data-theme="holo"] .table.ranking td.rank.top {background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent;}
html[data-theme="holo"] .topbar {background: #0d0b2ae6; border-color: #ffffff14;}
html[data-theme="holo"] .logo {font: 700 22px var(--affiche); letter-spacing: -.03em; color: var(--papier);}
html[data-theme="holo"] .logo span {background: linear-gradient(90deg, var(--cy), var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent;}
html[data-theme="holo"] .tab {font: 600 14px var(--texte); color: var(--gris); border-radius: 999px;}
html[data-theme="holo"] .tab:hover {background: #ffffff0c; color: var(--papier);}
html[data-theme="holo"] .tab.on {background: linear-gradient(90deg, #3ff0ff1f, #ff5ad81f); color: var(--papier); box-shadow: inset 0 0 0 1px #ffffff26;}
html[data-theme="holo"] .tab.on::after {display: none;}
html[data-theme="holo"] .tab.on .tab-ico {color: var(--cy);}
html[data-theme="holo"] .tab .badge {background: var(--neon); color: #fff;}
html[data-theme="holo"] .tabs .tab.admin, html[data-theme="holo"] .tab.admin {color: var(--or);}
html[data-theme="holo"] .coins {font: 700 17px var(--affiche); color: var(--papier); letter-spacing: -.02em;}
html[data-theme="holo"] .disc {background: conic-gradient(var(--or), #fff6c8, var(--or), #b88a1c, var(--or)); box-shadow: none;}
html[data-theme="holo"] .who {background: #ffffff0f; border-color: #ffffff1a; border-radius: 999px;}
html[data-theme="holo"] .sound-toggle {background: #ffffff0f; border-color: #ffffff1a;}
@media (min-width: 1100px){html[data-theme="holo"] .topbar {background: #0b0924d9; backdrop-filter: blur(16px); padding: 28px 16px 18px;}
html[data-theme="holo"] .logo {font-size: 26px; line-height: 1; padding: 0 10px;}
html[data-theme="holo"] .tabs {margin-top: 26px; gap: 4px;}
html[data-theme="holo"] .tab {padding: 11px 14px; font-size: 14.5px;}
html[data-theme="holo"] .tab .badge {margin-left: auto;}
html[data-theme="holo"] .coins {background: #ffffff0a; border: 1px solid #ffffff16; border-radius: 16px; padding: 12px 14px; font-size: 20px;}
html[data-theme="holo"] .coins::before {content: 'Disques'; font: 600 12px var(--texte); color: var(--gris);}}
@media (max-width: 760px){html[data-theme="holo"] .tabs {background: #0b0924f2;}
html[data-theme="holo"] .tab {border-radius: 14px;}
html[data-theme="holo"] .tab.on {background: linear-gradient(180deg, #3ff0ff22, #ff5ad822);}}
html[data-theme="holo"] .rc {container-type: inline-size; border: calc(var(--w) * .012 + 1.5px) solid transparent; border-radius: calc(var(--w) * .09); padding: calc(var(--w) * .045); gap: 0;
  background: linear-gradient(#15123a, #15123a) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--rar) 80%, #fff), color-mix(in srgb, var(--rar) 40%, #15123a)) border-box;
  box-shadow: 0 calc(var(--w) * .06) calc(var(--w) * .16) #04031299;}
html[data-theme="holo"] .rc.r-L, html[data-theme="holo"] .rc.r-M {background: linear-gradient(#15123a, #15123a) padding-box, var(--holo) border-box; box-shadow: 0 calc(var(--w) * .06) calc(var(--w) * .16) #04031299, 0 0 calc(var(--w) * .12) color-mix(in srgb, var(--rar) 35%, transparent);}
html[data-theme="holo"] .rc.r-M {border-width: calc(var(--w) * .016 + 2px);}
html[data-theme="holo"] .rc .ph {flex: 1 1 auto; border-radius: calc(var(--w) * .06); background: linear-gradient(160deg, color-mix(in srgb, var(--rar) 40%, #1f1b4b), #0d0b2a);}
html[data-theme="holo"] .rc .ph::after {background: linear-gradient(115deg, transparent 30%, #ffffff26 44%, #3ff0ff22 50%, #ff5ad81c 56%, transparent 70%), linear-gradient(180deg, transparent 72%, #0d0b2a88);}
html[data-theme="holo"] .rc .ph .initials {font-family: var(--affiche); color: #ffffff22;}
html[data-theme="holo"] .rc .rar {display: block; min-width: 0; height: auto; top: 6%; left: 6%; padding: .3em .75em; border: 0; border-radius: 999px; background: #0d0b2acc; font: 700 .72em/1.2 var(--affiche); color: var(--rar); letter-spacing: .01em;}
html[data-theme="holo"] .rc .rar::before {content: attr(data-l);}
@container (min-width: 150px){html[data-theme="holo"] .rc .rar::before {content: attr(data-n);}}
html[data-theme="holo"] .rc .flag {top: 6%; right: 6%; border-radius: 999px; background: #0d0b2aaa; font: 600 .7em var(--texte); color: var(--gris); padding: .2em .6em;}
html[data-theme="holo"] .rc .count {top: 6%; right: 6%; border-radius: 999px; background: var(--neon); color: #fff; font: 700 .78em/1.3 var(--affiche); padding: .15em .6em;}
html[data-theme="holo"] .rc .name {position: static; flex: none; margin: .45em .15em .35em; font: 700 1.38em/1.05 var(--affiche); letter-spacing: -.03em; color: var(--papier); text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
html[data-theme="holo"] .rc.gold .name::before {font: 600 .5em var(--texte); color: var(--or); letter-spacing: 0; margin-bottom: .2em;}
html[data-theme="holo"] .rc .stats {flex: none; padding: 0 .15em .1em; gap: .38em; background: none; border-top: 0;}
html[data-theme="holo"] .rc .stat {grid-template-columns: 1.1em 1fr 1.6em; gap: .5em;}
html[data-theme="holo"] .rc .stat i {color: var(--gris); font-size: .9em;}
html[data-theme="holo"] .rc .bar {height: .36em; background: #ffffff14; border-radius: 9px;}
html[data-theme="holo"] .rc .bar b {border-radius: 9px; background: linear-gradient(90deg, var(--cy), var(--neon));}
html[data-theme="holo"] .rc .stat span {font: 700 .95em var(--affiche); color: var(--papier);}
html[data-theme="holo"] .rc .stat.hl span {color: var(--or);}
html[data-theme="holo"] .rc.gold {border-color: transparent; background: linear-gradient(160deg, #2b2440, #15123a 60%) padding-box, conic-gradient(from 200deg, #fff3c0, #ffd36e, #b88a1c, #ffe9a0, #ffd36e, #fff3c0) border-box;}
html[data-theme="holo"] .rc.gold .rar {color: var(--or);}
html[data-theme="holo"] .rc.missing {filter: grayscale(1) brightness(.45); box-shadow: none; background: linear-gradient(#15123a, #15123a) padding-box, linear-gradient(#3a3570, #3a3570) border-box;}
html[data-theme="holo"] .rc .lock {font-family: var(--affiche); color: #ffffff30;}
html[data-theme="holo"] .tilt::before {background: radial-gradient(circle at var(--mx) var(--my), #ffffff40, #3ff0ff14 30%, transparent 55%); border-radius: calc(var(--w) * .09);}
html[data-theme="holo"] .slot .back, html[data-theme="holo"] .cx-back {border: 2px solid transparent; border-radius: calc(var(--w) * .09);
  background: radial-gradient(circle at 50% 44%, #fff 0 4%, var(--neon) 4.5% 6%, transparent 6.5%), repeating-radial-gradient(circle at 50% 44%, #ffffff10 0 1px, transparent 1px 6px), radial-gradient(circle at 50% 44%, #241f5c 0 34%, transparent 34.5%), linear-gradient(160deg, #221d58, #0d0b2a) padding-box, var(--holo) border-box;}
html[data-theme="holo"] .slot .back::after, html[data-theme="holo"] .cx-back::after {content: 'RAPVERSE'; font: 700 calc(var(--w) * .052) var(--affiche); letter-spacing: .04em; color: #ffffff55;}
html[data-theme="holo"] .facedown {border-radius: 20px; border: 2px solid #ffffff22; background: radial-gradient(circle at 50% 42%, #ffffff12 0 22%, transparent 23%), linear-gradient(160deg, #221d58, #0d0b2a); color: #ffffff40; font-family: var(--affiche);}
html[data-theme="holo"] .rc.want {box-shadow: 0 0 0 2px var(--neon), 0 0 18px #ff5ad866;}
html[data-theme="holo"] .rc.want::after {background: var(--neon); color: #fff; font: 700 10px var(--affiche); border-radius: 999px;}
html[data-theme="holo"] .pack .title {font-family: var(--affiche); font-weight: 700; letter-spacing: -.04em; font-size: calc(var(--pw) * .15);}
html[data-theme="holo"] .pack .stamp {font: 700 calc(var(--pw) * .045) var(--affiche); border-radius: 999px;}
html[data-theme="holo"] .pack:not(.k-premium):not(.k-platine) {--k1: #ff5ad8; --k2: #7b5cff; --k3: #1a0b40; --ink: #fff;}
html[data-theme="holo"] .daily {border-radius: 22px; border-color: #ffd36e55; background: linear-gradient(100deg, #ffd36e22, #ff5ad80e 60%);}
html[data-theme="holo"] .daily b {font: 700 19px var(--affiche); color: var(--or);}
html[data-theme="holo"] .streak i {background: #ffffff1a; height: 6px;}
html[data-theme="holo"] .streak i.on {background: linear-gradient(90deg, var(--or), #fff1b8); box-shadow: 0 0 8px #ffd36e88;}
html[data-theme="holo"] .offer-pack {border-radius: 26px; border-color: #ffffff16; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--k1) 26%, transparent), transparent 70%), #ffffff08;}
html[data-theme="holo"] .offer-pack h2 {font-size: 28px;}
html[data-theme="holo"] .offer-pack .qty {border-radius: 999px; background: #ffffff0a; border-color: #ffffff18;}
html[data-theme="holo"] .offer-pack .qty button {border-radius: 999px; font: 700 14px var(--affiche); border: 0;}
html[data-theme="holo"] .offer-pack .qty button.on {background: #ffffff24;}
html[data-theme="holo"] .stage {background: radial-gradient(ellipse 60% 55% at 50% 42%, #2a1d6b, #07061a 72%);}
html[data-theme="holo"] .stage-title {font-family: var(--affiche); letter-spacing: -.03em;}
html[data-theme="holo"] .slot .tag-new, html[data-theme="holo"] .recap-grid .cell .tag-new {background: var(--neon); color: #fff; font: 700 calc(var(--w) * .06) var(--affiche); border-radius: 999px;}
html[data-theme="holo"] .tear-zone {--halo: #7b5cff;}
html[data-theme="holo"] .vs {font-family: var(--affiche); background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;}
html[data-theme="holo"] .opponent, html[data-theme="holo"] .offer, html[data-theme="holo"] .ach, html[data-theme="holo"] .tile, html[data-theme="holo"] .facts div, html[data-theme="holo"] .copy, html[data-theme="holo"] .owner, html[data-theme="holo"] .trade-summary, html[data-theme="holo"] .best-card, html[data-theme="holo"] .profile-card {border-radius: 20px; background: #ffffff08; border-color: #ffffff16;}
html[data-theme="holo"] .opponent b {font-size: 17px;}
html[data-theme="holo"] .opponent.on {border-color: var(--cy); box-shadow: 0 0 0 1px var(--cy) inset, 0 0 22px #3ff0ff33;}
html[data-theme="holo"] .picker .rc.picked {outline: 3px solid var(--cy);}
html[data-theme="holo"] .picker .rc .order {background: var(--neon); font-family: var(--affiche);}
html[data-theme="holo"] .offer .price {font: 700 22px/1 var(--affiche); color: var(--or);}
html[data-theme="holo"] .offer-flag {border-radius: 999px; font: 700 11px var(--affiche); padding: 4px 10px;}
html[data-theme="holo"] .offer-flag.new {background: var(--neon); color: #fff;}
html[data-theme="holo"] .offer-flag.deal {background: var(--vert); color: #06261a;}
html[data-theme="holo"] .ach-ico {border-radius: 50%;}
html[data-theme="holo"] .ach-reward {font: 700 15px var(--affiche);}
html[data-theme="holo"] .ach-group {font-size: 20px; color: var(--papier);}
html[data-theme="holo"] .ach.ready {border-color: #ffd36e88; background: linear-gradient(120deg, #ffd36e1f, #ffffff06 70%);}
html[data-theme="holo"] .step {border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, #ffffff08), #ffffff06);}
html[data-theme="holo"] .step .value {font: 700 24px var(--affiche);}
html[data-theme="holo"] .step.s1 .value {font-size: 30px; background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent;}
html[data-theme="holo"] .medal {font-family: var(--affiche); font-size: 14px;}
html[data-theme="holo"] .tile b, html[data-theme="holo"] .facts b {font: 700 22px var(--affiche); letter-spacing: -.02em;}
html[data-theme="holo"] .id-card h2 {font-size: 28px;}
html[data-theme="holo"] .profile-card > b {font: 700 19px/1.1 var(--affiche);}
html[data-theme="holo"] .gate h1 {font-size: clamp(60px, 8vw, 128px); line-height: .9; letter-spacing: -.05em;}
html[data-theme="holo"] .gate h1 span {background: linear-gradient(90deg, var(--cy), var(--vi), var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent;}
html[data-theme="holo"] .gate-who {font-size: 20px;}
html[data-theme="holo"] .pin-pad button {font: 700 22px var(--affiche); border-radius: 18px;}
html[data-theme="holo"] .pin-dots i.on {background: var(--cy); border-color: var(--cy);}
html[data-theme="holo"] .ask h2 {font-size: 22px;}
html[data-theme="holo"] .now-playing {background: #1d1a48f2; border-color: #ffffff22;}
html[data-theme="holo"] .now-playing .vinyl {background: radial-gradient(circle, var(--neon) 0 18%, #111 19% 22%, #222 23% 100%);}
html[data-theme="holo"] .toolbar.sticky {background: #0d0b2ad9;}

/* ================= Thème « Arcade » (néons, salle d’arcade) ================= */
html[data-theme="arcade"] {--bitume: #07030f; --dalle: #0e0719; --dalle-2: #160c27; --dalle-3: #221338; --joint: #3a2a5a;
  --papier: #fff6ff; --gris: #b1a6cc; --gris-2: #77699a;
  --neon: #ff2bd6; --cy: #22f3ff; --jaune: #ffe600; --or: #ffe600; --vert: #39ff88; --rouge: #ff3b5c;
  --affiche: 'Bungee', 'Impact', sans-serif;
  --texte: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;}
html[data-theme="arcade"] .r-C {--rar: #a99fc4;}
html[data-theme="arcade"] .r-U {--rar: #39ff88;}
html[data-theme="arcade"] .r-R {--rar: #22f3ff;}
html[data-theme="arcade"] .r-E {--rar: #b06bff;}
html[data-theme="arcade"] .r-L {--rar: #ffe600;}
html[data-theme="arcade"] .r-M {--rar: #ff2bd6;}
html[data-theme="arcade"] {background: var(--bitume);}
html[data-theme="arcade"] body {font-family: var(--texte); font-size: 15px;
  background: radial-gradient(1200px 520px at 50% -12%, #5a12a8aa, transparent 70%),
    linear-gradient(180deg, transparent 64%, #ff2bd612 64.2%, transparent 100%),
    repeating-linear-gradient(90deg, #22f3ff10 0 1px, transparent 1px 90px), var(--bitume);
  background-attachment: fixed;}
html[data-theme="arcade"] body::after {opacity: .05;}
html[data-theme="arcade"] ::selection {background: #ff2bd666;}
html[data-theme="arcade"] :focus-visible {outline-color: var(--jaune);}
html[data-theme="arcade"] h1, html[data-theme="arcade"] h2, html[data-theme="arcade"] h3 {font-family: var(--affiche); font-weight: 400; letter-spacing: .01em;}
html[data-theme="arcade"] h1 {font-size: clamp(40px, 4.8vw, 72px); line-height: 1; color: #fff; text-shadow: 0 0 6px #fff8, 0 0 22px var(--neon), 0 0 54px var(--neon);}
html[data-theme="arcade"] h2 {font-size: 22px; line-height: 1.1; color: var(--cy); text-shadow: 0 0 14px #22f3ff88;}
html[data-theme="arcade"] h3 {font-size: 16px;}
html[data-theme="arcade"] .page-head[data-ghost]::before {display: none;}
html[data-theme="arcade"] .page-head p {color: var(--gris);}
html[data-theme="arcade"] .muted {color: var(--gris);}
html[data-theme="arcade"] button, html[data-theme="arcade"] .btn {font: 700 14px var(--texte); border-radius: 4px; padding: 10px 17px; border: 2px solid #4a3a6e; background: #0e0719; color: var(--papier); transition: box-shadow .2s, border-color .2s, color .2s;}
html[data-theme="arcade"] button:hover {border-color: var(--cy); color: #fff; box-shadow: 0 0 14px #22f3ff55; background: #120a22;}
html[data-theme="arcade"] .primary {border-color: var(--neon); background: var(--neon); color: #fff; box-shadow: 0 0 18px #ff2bd677, inset 0 0 0 1px #ffffff55; text-shadow: 0 0 6px #fff8;}
html[data-theme="arcade"] .primary:hover {background: #ff55e0; border-color: #ff55e0; box-shadow: 0 0 28px #ff2bd6aa; color: #fff;}
html[data-theme="arcade"] .ghost {border-color: transparent; background: none; color: var(--gris);}
html[data-theme="arcade"] .ghost:hover {border-color: transparent; background: #ffffff0a; box-shadow: none;}
html[data-theme="arcade"] .small-btn {padding: 6px 12px; font-size: 13px;}
html[data-theme="arcade"] .danger-btn {border-color: var(--rouge); color: #ffd0d8; background: #ff3b5c18;}
html[data-theme="arcade"] .danger-btn:hover {background: var(--rouge); color: #fff; box-shadow: 0 0 18px #ff3b5c88;}
html[data-theme="arcade"] input, html[data-theme="arcade"] select {font: 14.5px var(--texte); background: #0e0719; border: 2px solid #3a2a5a; border-radius: 4px; color: var(--papier);}
html[data-theme="arcade"] select option {background: #0e0719;}
html[data-theme="arcade"] input:focus, html[data-theme="arcade"] select:focus {border-color: var(--cy); outline: none; box-shadow: 0 0 12px #22f3ff44;}
html[data-theme="arcade"] input[type=checkbox], html[data-theme="arcade"] input[type=range] {accent-color: var(--neon);}
html[data-theme="arcade"] .chip {border-radius: 4px; border: 2px solid #3a2a5a; background: #0e0719; color: var(--gris); font: 700 13px var(--texte); padding: 5px 11px;}
html[data-theme="arcade"] .chip.on {color: #fff; border-color: var(--rar, var(--neon)); box-shadow: 0 0 12px color-mix(in srgb, var(--rar, var(--neon)) 55%, transparent); background: #120a22;}
html[data-theme="arcade"] .rarity-chips .chip b {font: 12px var(--affiche); color: var(--rar, #fff); letter-spacing: .02em; text-shadow: 0 0 8px color-mix(in srgb, var(--rar, #fff) 60%, transparent);}
html[data-theme="arcade"] .seg {border-radius: 4px; background: #0e0719; border: 2px solid #3a2a5a;}
html[data-theme="arcade"] .seg button {border: 0; border-radius: 2px; font: 13px var(--affiche); background: none; box-shadow: none;}
html[data-theme="arcade"] .seg button.on {background: var(--jaune); color: #07030f;}
html[data-theme="arcade"] .panel {background: #0e0719e6; border: 2px solid #3a2a5a; border-radius: 6px;}
html[data-theme="arcade"] .empty {border-radius: 6px; border: 2px dashed #3a2a5a;}
html[data-theme="arcade"] .empty b {font: 20px var(--affiche); color: var(--jaune); text-shadow: 0 0 12px #ffe60077;}
html[data-theme="arcade"] .progress {height: 12px; border-radius: 0; border: 2px solid var(--neon); background: #0e0719; padding: 2px; box-shadow: 0 0 10px #ff2bd655;}
html[data-theme="arcade"] .progress b {border-radius: 0; background: repeating-linear-gradient(90deg, var(--neon) 0 12px, transparent 12px 16px); box-shadow: 0 0 8px var(--neon);}
html[data-theme="arcade"] .progress.thin {height: 8px; padding: 1px; border-width: 1px;}
html[data-theme="arcade"] .progress.thin b {background: var(--cy); box-shadow: 0 0 6px var(--cy);}
html[data-theme="arcade"] .toast {background: #0e0719f2; border: 2px solid var(--cy); border-radius: 4px; box-shadow: 0 0 20px #22f3ff44;}
html[data-theme="arcade"] .toast.error {border-color: var(--rouge); box-shadow: 0 0 20px #ff3b5c55;}
html[data-theme="arcade"] dialog.modal {background: #0e0719f5; border: 2px solid var(--neon); border-radius: 6px; box-shadow: 0 0 40px #ff2bd644;}
html[data-theme="arcade"] dialog.modal::backdrop {background: #03010acc;}
html[data-theme="arcade"] .avatar {font: 13px var(--affiche); color: #07030f; border-radius: 4px;}
html[data-theme="arcade"] .badge {color: #07030f;}
html[data-theme="arcade"] .table th {color: var(--gris-2); font-weight: 700;}
html[data-theme="arcade"] .table td {border-color: #ffffff12;}
html[data-theme="arcade"] .table tr.me td {background: #ff2bd61a;}
html[data-theme="arcade"] .table.ranking td.rank {font: 18px var(--affiche); color: var(--gris);}
html[data-theme="arcade"] .table.ranking td.rank.top {color: var(--jaune); text-shadow: 0 0 10px #ffe60099;}
html[data-theme="arcade"] .topbar {background: #0b0516f0; border-color: var(--neon); box-shadow: 0 0 18px #ff2bd633;}
html[data-theme="arcade"] .logo {font: 20px var(--affiche); color: var(--cy); text-shadow: 0 0 10px var(--cy), 0 0 26px var(--cy); letter-spacing: .02em;}
html[data-theme="arcade"] .logo span {color: var(--neon); text-shadow: 0 0 10px var(--neon), 0 0 26px var(--neon);}
html[data-theme="arcade"] .tab {font: 700 14px var(--texte); color: var(--gris); border-radius: 4px; border: 2px solid transparent;}
html[data-theme="arcade"] .tab:hover {background: none; color: #fff;}
html[data-theme="arcade"] .tab.on {color: var(--jaune); border-color: var(--jaune); box-shadow: 0 0 12px #ffe60066, inset 0 0 10px #ffe60033; text-shadow: 0 0 8px var(--jaune); background: none;}
html[data-theme="arcade"] .tab.on::after {display: none;}
html[data-theme="arcade"] .tab.on .tab-ico {color: var(--jaune); filter: drop-shadow(0 0 4px var(--jaune));}
html[data-theme="arcade"] .tab .badge {background: var(--neon); color: #fff; border-radius: 2px; box-shadow: 0 0 8px var(--neon);}
html[data-theme="arcade"] .tabs .tab.admin, html[data-theme="arcade"] .tab.admin {color: var(--cy);}
html[data-theme="arcade"] .coins {font: 17px var(--affiche); color: var(--jaune); text-shadow: 0 0 10px #ffe60088;}
html[data-theme="arcade"] .disc {border-radius: 2px; background: var(--jaune); box-shadow: 0 0 10px var(--jaune);}
html[data-theme="arcade"] .who {background: #0e0719; border: 2px solid #3a2a5a; border-radius: 4px; font: 700 13px var(--texte);}
html[data-theme="arcade"] .sound-toggle {background: #0e0719; border: 2px solid #3a2a5a; border-radius: 4px;}
@media (min-width: 1100px){html[data-theme="arcade"] .topbar {border-right: 2px solid var(--neon); border-bottom: 0; box-shadow: 0 0 24px #ff2bd633; padding: 28px 16px 18px;}
html[data-theme="arcade"] .logo {font-size: 25px; line-height: 1.05; padding: 0 6px;}
html[data-theme="arcade"] .tabs {margin-top: 26px; gap: 6px;}
html[data-theme="arcade"] .tab {padding: 10px 12px; font-size: 14.5px;}
html[data-theme="arcade"] .tab .badge {margin-left: auto;}
html[data-theme="arcade"] .coins {background: #0e0719; border: 2px solid #4a3a6e; border-radius: 4px; padding: 11px 13px; font-size: 19px;}
html[data-theme="arcade"] .coins::before {content: 'Disques'; font: 700 12px var(--texte); color: var(--gris); text-shadow: none;}}
@media (max-width: 760px){html[data-theme="arcade"] .tabs {background: #0b0516f5; border-top: 2px solid var(--neon); box-shadow: 0 0 18px #ff2bd655;}
html[data-theme="arcade"] .tab.on {border-color: transparent; box-shadow: none; background: #ffe60014;}}
html[data-theme="arcade"] .rc {container-type: inline-size; background: #0e0719; border: calc(var(--w) * .014 + 1.5px) solid var(--rar); border-radius: calc(var(--w) * .025); padding: calc(var(--w) * .045); gap: 0;
  box-shadow: 0 0 calc(var(--w) * .08) color-mix(in srgb, var(--rar) 55%, transparent), inset 0 0 calc(var(--w) * .08) color-mix(in srgb, var(--rar) 22%, transparent);}
html[data-theme="arcade"] .rc.r-C, html[data-theme="arcade"] .rc.r-U {box-shadow: 0 0 calc(var(--w) * .04) color-mix(in srgb, var(--rar) 35%, transparent);}
html[data-theme="arcade"] .rc.r-M {box-shadow: 0 0 calc(var(--w) * .12) #ff2bd6aa, 0 0 calc(var(--w) * .3) #ff2bd633, inset 0 0 calc(var(--w) * .1) #ff2bd644;}
html[data-theme="arcade"] .rc .ph {flex: 1 1 auto; border-radius: calc(var(--w) * .012); background: linear-gradient(160deg, color-mix(in srgb, var(--rar) 35%, #160c27), #07030f);}
html[data-theme="arcade"] .rc .ph img {filter: saturate(1.35) contrast(1.08);}
html[data-theme="arcade"] .rc .ph::after {background: repeating-linear-gradient(0deg, #0000004d 0 2px, transparent 2px 4px), linear-gradient(180deg, transparent 70%, #07030faa);}
html[data-theme="arcade"] .rc .ph .initials {font-family: var(--affiche); color: #ffffff22;}
html[data-theme="arcade"] .rc .rar {display: block; min-width: 0; height: auto; top: 6%; left: 6%; padding: .25em .6em; border: 0; border-radius: 0; background: var(--rar); color: #07030f; font: .7em/1.2 var(--affiche);}
html[data-theme="arcade"] .rc .rar::before {content: attr(data-l);}
@container (min-width: 150px){html[data-theme="arcade"] .rc .rar::before {content: attr(data-n);}}
html[data-theme="arcade"] .rc .flag {top: 6%; right: 6%; border-radius: 0; background: #07030fcc; border: 1px solid #ffffff33; font: 700 .68em var(--texte); color: #fff; padding: .1em .45em;}
html[data-theme="arcade"] .rc .count {top: 6%; right: 6%; border-radius: 0; background: #07030f; border: 2px solid var(--rar); color: #fff; font: .8em/1.3 var(--affiche); padding: 0 .45em;}
html[data-theme="arcade"] .rc .name {position: static; flex: none; margin: .45em .1em .35em; font: 1.42em/1.05 var(--affiche); color: #fff; text-shadow: 0 0 .5em var(--rar); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
html[data-theme="arcade"] .rc.gold .name::before {font: 700 .45em var(--texte); color: var(--jaune); text-shadow: 0 0 6px #ffe60099; margin-bottom: .2em;}
html[data-theme="arcade"] .rc .stats {flex: none; padding: 0 .1em; gap: .4em; background: none; border-top: 0;}
html[data-theme="arcade"] .rc .stat {grid-template-columns: 1.1em 1fr 1.7em; gap: .5em;}
html[data-theme="arcade"] .rc .stat i {color: var(--gris); font-size: .9em;}
html[data-theme="arcade"] .rc .bar {height: .45em; background: #ffffff12; border-radius: 0;}
html[data-theme="arcade"] .rc .bar b {border-radius: 0; background: var(--rar); box-shadow: 0 0 .5em var(--rar);}
html[data-theme="arcade"] .rc .stat span {font: .95em var(--affiche); color: #fff;}
html[data-theme="arcade"] .rc .stat.hl span {color: var(--jaune);}
html[data-theme="arcade"] .rc.gold {border-color: var(--jaune); background: linear-gradient(165deg, #2a2208, #0e0719 55%); box-shadow: 0 0 calc(var(--w) * .12) #ffe600aa, inset 0 0 calc(var(--w) * .1) #ffe60033;}
html[data-theme="arcade"] .rc.gold .rar {background: var(--jaune);}
html[data-theme="arcade"] .rc.missing {filter: grayscale(1) brightness(.4); box-shadow: none; border-color: #3a2a5a;}
html[data-theme="arcade"] .rc .lock {font-family: var(--affiche); color: #ffffff30;}
html[data-theme="arcade"] .tilt::before {background: radial-gradient(circle at var(--mx) var(--my), #ffffff38, transparent 55%);}
html[data-theme="arcade"] .slot .back, html[data-theme="arcade"] .cx-back {border: 2px solid var(--cy); border-radius: calc(var(--w) * .025); box-shadow: 0 0 18px #22f3ff55, inset 0 0 18px #22f3ff22;
  background: radial-gradient(circle at 50% 44%, var(--jaune) 0 4.5%, #07030f 5% 6.5%, transparent 7%), repeating-radial-gradient(circle at 50% 44%, #22f3ff14 0 1px, transparent 1px 6px), radial-gradient(circle at 50% 44%, #1a0f30 0 34%, transparent 34.5%), repeating-linear-gradient(0deg, #ffffff06 0 2px, transparent 2px 4px), linear-gradient(160deg, #1a0f30, #07030f);}
html[data-theme="arcade"] .slot .back::after, html[data-theme="arcade"] .cx-back::after {content: 'RAPVERSE'; font: calc(var(--w) * .065) var(--affiche); letter-spacing: .02em; color: var(--neon); text-shadow: 0 0 8px var(--neon);}
html[data-theme="arcade"] .facedown {border-radius: 6px; border: 2px solid var(--cy); box-shadow: 0 0 18px #22f3ff44; background: repeating-linear-gradient(0deg, #ffffff06 0 2px, transparent 2px 4px), linear-gradient(160deg, #1a0f30, #07030f); color: var(--cy); font-family: var(--affiche); text-shadow: 0 0 10px var(--cy);}
html[data-theme="arcade"] .rc.want {box-shadow: 0 0 0 2px var(--jaune), 0 0 18px #ffe60088;}
html[data-theme="arcade"] .rc.want::after {background: var(--jaune); color: #07030f; font: 10px var(--affiche); border-radius: 0;}
html[data-theme="arcade"] .pack .title {font-family: var(--affiche); font-size: calc(var(--pw) * .15); letter-spacing: .01em;}
html[data-theme="arcade"] .pack .stamp {font: calc(var(--pw) * .045) var(--affiche); border-radius: 0;}
html[data-theme="arcade"] .pack {--k1: #ff2bd6; --k2: #5a12a8; --k3: #12051f; --ink: #fff;}
html[data-theme="arcade"] .pack.k-premium {--k1: #ffe600; --k2: #ff8a00; --k3: #2b1200; --ink: #1a0b00;}
html[data-theme="arcade"] .pack.k-platine {--k1: #22f3ff; --k2: #3b5cff; --k3: #070a2b; --ink: #fff;}
html[data-theme="arcade"] .daily {border-radius: 6px; border: 2px solid var(--jaune); background: #ffe6000f; box-shadow: 0 0 18px #ffe60033;}
html[data-theme="arcade"] .daily b {font: 18px var(--affiche); color: var(--jaune); text-shadow: 0 0 10px #ffe60099;}
html[data-theme="arcade"] .streak i {border-radius: 0; height: 8px; background: #ffffff14;}
html[data-theme="arcade"] .streak i.on {background: var(--jaune); box-shadow: 0 0 8px var(--jaune);}
html[data-theme="arcade"] .offer-pack {border-radius: 6px; border: 2px solid #3a2a5a; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--k1) 22%, transparent), transparent 70%), #0e0719;}
html[data-theme="arcade"] .offer-pack:hover {border-color: var(--k1); box-shadow: 0 0 22px color-mix(in srgb, var(--k1) 40%, transparent);}
html[data-theme="arcade"] .offer-pack h2 {font-size: 26px; color: #fff; text-shadow: 0 0 14px var(--k1);}
html[data-theme="arcade"] .offer-pack .qty {border-radius: 4px; background: #07030f; border: 2px solid #3a2a5a;}
html[data-theme="arcade"] .offer-pack .qty button {border: 0; border-radius: 2px; font: 14px var(--affiche); box-shadow: none;}
html[data-theme="arcade"] .offer-pack .qty button.on {background: var(--jaune); color: #07030f;}
html[data-theme="arcade"] .stage {background: radial-gradient(ellipse 60% 55% at 50% 42%, #3a0d5e, #05020b 72%);}
html[data-theme="arcade"] .stage-title {font-family: var(--affiche);}
html[data-theme="arcade"] .slot .tag-new, html[data-theme="arcade"] .recap-grid .cell .tag-new {background: var(--jaune); color: #07030f; font: calc(var(--w) * .065) var(--affiche); border-radius: 0; box-shadow: 0 0 12px var(--jaune);}
html[data-theme="arcade"] .tear-zone {--halo: #ff2bd6;}
html[data-theme="arcade"] .vs {font-family: var(--affiche); color: var(--jaune); text-shadow: 0 0 12px var(--jaune), 0 0 30px #ff8a00;}
html[data-theme="arcade"] .opponent, html[data-theme="arcade"] .offer, html[data-theme="arcade"] .ach, html[data-theme="arcade"] .tile, html[data-theme="arcade"] .facts div, html[data-theme="arcade"] .copy, html[data-theme="arcade"] .owner, html[data-theme="arcade"] .trade-summary, html[data-theme="arcade"] .best-card, html[data-theme="arcade"] .profile-card {border-radius: 6px; background: #0e0719; border: 2px solid #3a2a5a;}
html[data-theme="arcade"] .opponent b {font-size: 16px;}
html[data-theme="arcade"] .opponent.on {border-color: var(--cy); box-shadow: 0 0 16px #22f3ff55;}
html[data-theme="arcade"] .picker .rc.picked {outline: 3px solid var(--jaune);}
html[data-theme="arcade"] .picker .rc .order {background: var(--jaune); color: #07030f; font-family: var(--affiche); border-radius: 0;}
html[data-theme="arcade"] .offer .price {font: 21px/1 var(--affiche); color: var(--jaune); text-shadow: 0 0 10px #ffe60077;}
html[data-theme="arcade"] .offer-flag {border-radius: 0; font: 11px var(--affiche); padding: 4px 8px;}
html[data-theme="arcade"] .offer-flag.new {background: var(--neon); color: #fff; box-shadow: 0 0 10px var(--neon);}
html[data-theme="arcade"] .offer-flag.deal {background: var(--vert); color: #032a12; box-shadow: 0 0 10px var(--vert);}
html[data-theme="arcade"] .ach-ico {border-radius: 4px; font-family: var(--affiche);}
html[data-theme="arcade"] .ach-reward {font: 15px var(--affiche); color: var(--jaune);}
html[data-theme="arcade"] .ach-group {font-size: 19px;}
html[data-theme="arcade"] .ach.ready {border-color: var(--jaune); box-shadow: 0 0 16px #ffe60044; background: #ffe60008;}
html[data-theme="arcade"] .step {border-radius: 6px; border: 2px solid var(--c); background: #0e0719; box-shadow: 0 0 18px color-mix(in srgb, var(--c) 40%, transparent);}
html[data-theme="arcade"] .step .value {font: 22px var(--affiche);}
html[data-theme="arcade"] .step.s1 .value {color: var(--jaune); text-shadow: 0 0 12px #ffe60099; font-size: 28px;}
html[data-theme="arcade"] .medal {font-family: var(--affiche); font-size: 13px; border-radius: 4px;}
html[data-theme="arcade"] .tile b, html[data-theme="arcade"] .facts b {font: 22px var(--affiche);}
html[data-theme="arcade"] .id-card h2 {font-size: 26px;}
html[data-theme="arcade"] .profile-card > b {font: 19px/1.1 var(--affiche);}
html[data-theme="arcade"] .gate h1 {font-size: clamp(56px, 7.6vw, 120px); line-height: .95;}
html[data-theme="arcade"] .gate h1 span {color: var(--neon); text-shadow: 0 0 10px var(--neon), 0 0 40px var(--neon);}
html[data-theme="arcade"] .gate-who {font-size: 19px;}
html[data-theme="arcade"] .pin-pad button {font: 22px var(--affiche); border-radius: 4px;}
html[data-theme="arcade"] .pin-dots i.on {background: var(--jaune); border-color: var(--jaune); box-shadow: 0 0 8px var(--jaune);}
html[data-theme="arcade"] .ask h2 {font-size: 21px;}
html[data-theme="arcade"] .now-playing {background: #0e0719f2; border: 2px solid var(--neon); border-radius: 6px; box-shadow: 0 0 18px #ff2bd655;}
html[data-theme="arcade"] .now-playing .vinyl {background: radial-gradient(circle, var(--cy) 0 18%, #111 19% 22%, #222 23% 100%);}
html[data-theme="arcade"] .toolbar.sticky {background: #07030fe0;}

/* --- Choix du thème (Réglages) : chaque option montre ses propres couleurs --- */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 14px; }
.theme-opt { display: grid; justify-items: start; text-align: left; gap: 4px; padding: 12px 14px; border-radius: 14px; }
.theme-opt b { font-size: 15px; }
.theme-opt small { color: var(--gris); font-weight: 400; font-size: 12px; line-height: 1.35; }
.theme-opt.on { outline: 2px solid var(--neon); outline-offset: 2px; }
.theme-swatch { display: flex; gap: 0; width: 100%; height: 34px; border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.theme-swatch i { flex: 1; }
.theme-opt[data-preview="holo"] .theme-swatch { background: #0d0b2a; box-shadow: inset 0 0 0 2px transparent; border: 2px solid transparent; background: linear-gradient(#0d0b2a, #0d0b2a) padding-box, conic-gradient(from 210deg, #3ff0ff, #7b5cff, #ff5ad8, #ffd36e, #3ff0ff) border-box; }
.theme-opt[data-preview="holo"] .theme-swatch i:nth-child(1) { background: #3ff0ff; margin: 8px 0 8px 8px; border-radius: 4px; }
.theme-opt[data-preview="holo"] .theme-swatch i:nth-child(2) { background: #7b5cff; margin: 8px 0; }
.theme-opt[data-preview="holo"] .theme-swatch i:nth-child(3) { background: #ff5ad8; margin: 8px 8px 8px 0; border-radius: 4px; }
.theme-opt[data-preview="arcade"] .theme-swatch { background: #07030f; border: 2px solid #ff2bd6; box-shadow: 0 0 10px #ff2bd666; }
.theme-opt[data-preview="arcade"] .theme-swatch i:nth-child(1) { background: #ff2bd6; margin: 9px 4px 9px 9px; box-shadow: 0 0 8px #ff2bd6; }
.theme-opt[data-preview="arcade"] .theme-swatch i:nth-child(2) { background: #22f3ff; margin: 9px 4px; box-shadow: 0 0 8px #22f3ff; }
.theme-opt[data-preview="arcade"] .theme-swatch i:nth-child(3) { background: #ffe600; margin: 9px 9px 9px 4px; box-shadow: 0 0 8px #ffe600; }
.theme-opt[data-preview="platine"] .theme-swatch { background: #0e0c0a; border: 1px solid #c9a24b; }
.theme-opt[data-preview="platine"] .theme-swatch i:nth-child(1) { background: #c9a24b; margin: 14px 0 14px 10px; height: 2px; flex: 2; }
.theme-opt[data-preview="platine"] .theme-swatch i:nth-child(2) { background: #efe7d8; margin: 10px 8px; border-radius: 50%; flex: 0 0 12px; }
.theme-opt[data-preview="platine"] .theme-swatch i:nth-child(3) { background: #7d1a26; margin: 10px 10px 10px 0; flex: 0 0 12px; border-radius: 50%; }
/* pastilles de couleur : toujours leur vraie couleur, quel que soit le thème */
html[data-theme] .colors button { background: var(--c); border: 2px solid transparent; border-radius: 50%; padding: 0; box-shadow: none; }
html[data-theme] .colors button.on { border-color: var(--papier); box-shadow: 0 0 0 2px var(--bitume) inset; }
html[data-theme="holo"] .gate h1 { font-size: clamp(50px, 6.4vw, 108px); }
html[data-theme="arcade"] .gate h1 { font-size: clamp(46px, 5.8vw, 96px); }
/* téléphone : la barre du haut et la barre d'onglets restent compactes dans tous les thèmes */
@media (max-width: 760px) {
  html[data-theme] .tab { font-size: 10px; letter-spacing: -.01em; padding: 6px 2px 4px; border-width: 0; }
  html[data-theme="arcade"] .tab { font-size: 9.5px; }
  html[data-theme] .logo { font-size: 17px; }
  html[data-theme="platine"] .logo { font-size: 24px; }
  html[data-theme] .coins { font-size: 15px; }
  html[data-theme] .topbar { gap: 8px; padding: 8px 12px; }
  html[data-theme] .sound-toggle { width: 32px; height: 32px; }
}

/* ================================================================================
   1.16.1 — raretés lisibles d'un coup d'œil dans tous les thèmes :
   Commune gris, Peu commune vert, Rare bleu, Épique violet, Légendaire or,
   Mythique multicolore (holographique).
   ================================================================================ */
html[data-theme] .r-C { --rar: #a3a9b5; } html[data-theme] .r-U { --rar: #3ecf8e; } html[data-theme] .r-R { --rar: #3b9cff; }
html[data-theme] .r-E { --rar: #a46bff; } html[data-theme] .r-L { --rar: #ffb020; } html[data-theme] .r-M { --rar: #ff3d9a; }
@property --holo-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes holo-spin { to { --holo-a: 360deg; } }

/* Holo : bord plein de la couleur de la rareté, or pour les Légendaires, arc-en-ciel pour les Mythiques */
html[data-theme="holo"] .rc { background: linear-gradient(#15123a, #15123a) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--rar) 85%, #fff), var(--rar) 45%, color-mix(in srgb, var(--rar) 60%, #000)) border-box; }
html[data-theme="holo"] .rc.r-L { background: linear-gradient(#15123a, #15123a) padding-box, linear-gradient(135deg, #fff1b8, #ffb020 35%, #b86e00 60%, #ffd36e 85%) border-box;
  box-shadow: 0 calc(var(--w) * .06) calc(var(--w) * .16) #04031299, 0 0 calc(var(--w) * .12) #ffb02055; }
html[data-theme="holo"] .rc.r-M { background: linear-gradient(#15123a, #15123a) padding-box, conic-gradient(from var(--holo-a), #3ff0ff, #7b5cff, #ff5ad8, #ffd36e, #3ff0ff) border-box;
  animation: holo-spin 4s linear infinite; box-shadow: 0 calc(var(--w) * .06) calc(var(--w) * .16) #04031299, 0 0 calc(var(--w) * .14) #ff5ad855; }
html[data-theme="holo"] .rc.r-M .rar { background: linear-gradient(90deg, #3ff0ff, #7b5cff, #ff5ad8); color: #fff; }
html[data-theme="holo"] .rc .ph { background: linear-gradient(160deg, color-mix(in srgb, var(--rar) 45%, #1f1b4b), #0d0b2a); }
html[data-theme="holo"] .rc.gold { background: linear-gradient(160deg, #2b2440, #15123a 60%) padding-box, conic-gradient(from 200deg, #fff3c0, #ffd36e, #b88a1c, #ffe9a0, #ffd36e, #fff3c0) border-box; }
html[data-theme="holo"] .rc.missing { background: linear-gradient(#15123a, #15123a) padding-box, linear-gradient(#3a3570, #3a3570) border-box; animation: none; }

/* Arcade : néon de la couleur de la rareté, Mythique en néon arc-en-ciel */
html[data-theme="arcade"] .rc.r-M { border-color: transparent; background: linear-gradient(#0e0719, #0e0719) padding-box, conic-gradient(from var(--holo-a), #22f3ff, #b06bff, #ff2bd6, #ffe600, #39ff88, #22f3ff) border-box;
  animation: holo-spin 3s linear infinite; box-shadow: 0 0 calc(var(--w) * .12) #ff2bd699, 0 0 calc(var(--w) * .28) #22f3ff33; }
html[data-theme="arcade"] .rc.r-M .rar { background: linear-gradient(90deg, #22f3ff, #ff2bd6, #ffe600); }
html[data-theme="arcade"] .rc.gold.r-M { border-color: transparent; }
html[data-theme="arcade"] .rc.missing { animation: none; background: #0e0719; border-color: #3a2a5a; }

/* Platine : cadre net dans la couleur de la rareté, Mythique au cadre irisé */
html[data-theme="platine"] .rc { border: 2px solid var(--rar); }
html[data-theme="platine"] .rc .rar { color: var(--rar); }
html[data-theme="platine"] .rc.r-M { border-color: transparent; background: linear-gradient(170deg, #22101a, #130a0c 60%) padding-box, conic-gradient(from var(--holo-a), #3ff0ff, #7b5cff, #ff5ad8, #ffd36e, #3ff0ff) border-box; animation: holo-spin 5s linear infinite; }
html[data-theme="platine"] .rc.r-M .rar { color: #ff8fc8; }
html[data-theme="platine"] .rc.gold { border-color: #e8c97c; }
html[data-theme="platine"] .rc.missing { border-color: #3a3229; animation: none; }

/* la même lecture dans les puces de rareté et les dos qui pulsent à l'ouverture */
html[data-theme] .rarity-chips .chip.r-M b { background: linear-gradient(90deg, #3ff0ff, #ff5ad8, #ffd36e); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.reduce-motion[data-theme] .rc.r-M { animation: none; }
/* édition or : le cadre garde la couleur de la rareté, un filet doré intérieur et un fond doré la signalent */
html[data-theme="holo"] .rc.gold { background: linear-gradient(160deg, #3a2f18, #15123a 55%) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--rar) 85%, #fff), var(--rar) 45%, color-mix(in srgb, var(--rar) 60%, #000)) border-box;
  box-shadow: inset 0 0 0 2px #ffd36e, 0 0 calc(var(--w) * .12) #ffd36e66; }
html[data-theme="holo"] .rc.gold.r-L { background: linear-gradient(160deg, #3a2f18, #15123a 55%) padding-box, linear-gradient(135deg, #fff1b8, #ffb020 35%, #b86e00 60%, #ffd36e 85%) border-box; }
html[data-theme="holo"] .rc.gold.r-M { background: linear-gradient(160deg, #3a2f18, #15123a 55%) padding-box, conic-gradient(from var(--holo-a), #3ff0ff, #7b5cff, #ff5ad8, #ffd36e, #3ff0ff) border-box; }
html[data-theme="holo"] .rc.gold .rar { color: var(--rar); }
html[data-theme="holo"] .rc.r-M.gold .rar { color: #fff; }
html[data-theme="arcade"] .rc.gold { border-color: var(--rar); background: linear-gradient(165deg, #2a2208, #0e0719 55%); box-shadow: inset 0 0 0 2px #ffe600, 0 0 calc(var(--w) * .1) color-mix(in srgb, var(--rar) 60%, transparent); }
html[data-theme="arcade"] .rc.gold.r-M { border-color: transparent; background: linear-gradient(165deg, #2a2208, #0e0719 55%) padding-box, conic-gradient(from var(--holo-a), #22f3ff, #b06bff, #ff2bd6, #ffe600, #39ff88, #22f3ff) border-box; }
html[data-theme="arcade"] .rc.gold .rar { background: var(--rar); }
html[data-theme="platine"] .rc.gold { border-color: var(--rar); }
html[data-theme="platine"] .rc.gold.r-M { border-color: transparent; }
html[data-theme="platine"] .rc.gold .rar { color: var(--rar); }

/* ================================================================================
   1.16.2 — la pile de l'ouverture : chaque carte se détache bien
   ================================================================================ */
/* cartes plus écartées (jusqu'à 6 de profondeur), les plus enfouies un peu plus sombres */
.stack .slot { transform: translate(calc(var(--depth) * var(--gap, 10px)), calc(var(--depth) * var(--gap, 10px) * -.8)) rotate(calc(var(--depth) * var(--tilt, 2deg))); }
.stack .slot .back { filter: brightness(calc(1 - min(var(--depth, 0), 6) * .07)); }
.stack .slot .back.hint { filter: none; }
.stack .slot.top .back { filter: none; }
/* dos neutres : un liseré sombre sépare chaque carte de celle du dessous */
html[data-theme] .stack .slot .back { border: 2px solid #ffffff2e; background-clip: padding-box; box-shadow: 0 0 0 2px #05040cd9, 0 10px 22px #000c; }
html[data-theme="holo"] .stack .slot .back { background: radial-gradient(circle at 50% 44%, #fff 0 4%, var(--neon) 4.5% 6%, transparent 6.5%), repeating-radial-gradient(circle at 50% 44%, #ffffff10 0 1px, transparent 1px 6px), radial-gradient(circle at 50% 44%, #241f5c 0 34%, transparent 34.5%), linear-gradient(160deg, #221d58, #0d0b2a); }
html[data-theme="arcade"] .stack .slot .back { border-color: #4a3a6e; }
html[data-theme="platine"] .stack .slot .back { border-color: #4a3f33; }
/* les dos qui annoncent une belle carte : cadre épais et halo de la couleur de la rareté */
html[data-theme] .stack .slot .back.hint { border: 4px solid var(--rar); box-shadow: 0 0 0 2px #05040cd9, 0 0 18px color-mix(in srgb, var(--rar) 70%, transparent), 0 10px 22px #000c; }
html[data-theme] .stack .slot .back.hint::before { content: ''; position: absolute; inset: 6px; border-radius: inherit; border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent); pointer-events: none; }
/* Mythique : le cadre passe par toutes les couleurs */
@keyframes rainbow-edge {
  0% { border-color: #3ff0ff; box-shadow: 0 0 0 2px #05040cd9, 0 0 22px #3ff0ffaa, 0 10px 22px #000c; }
  25% { border-color: #7b5cff; box-shadow: 0 0 0 2px #05040cd9, 0 0 22px #7b5cffaa, 0 10px 22px #000c; }
  50% { border-color: #ff5ad8; box-shadow: 0 0 0 2px #05040cd9, 0 0 22px #ff5ad8aa, 0 10px 22px #000c; }
  75% { border-color: #ffd36e; box-shadow: 0 0 0 2px #05040cd9, 0 0 22px #ffd36eaa, 0 10px 22px #000c; }
  100% { border-color: #3ff0ff; box-shadow: 0 0 0 2px #05040cd9, 0 0 22px #3ff0ffaa, 0 10px 22px #000c; }
}
html[data-theme] .stack .slot .back.hint.r-M { animation: rainbow-edge 1.6s linear infinite, wobble 1.6s ease-in-out infinite; }
html[data-theme] .stack .slot.top .back.hint.r-M { animation: rainbow-edge .9s linear infinite, tremble .18s linear infinite; }
html[data-theme] .stack .slot .back.hint.r-M::before { border-color: #ffffff66; }
html[data-theme] .stack .slot.top .back.hint.r-L { animation: pulse .7s ease-in-out infinite, tremble .35s linear infinite; }
html.reduce-motion[data-theme] .stack .slot .back.hint.r-M { animation: none; border-color: #ff5ad8; }

/* --- Version en ligne : connexion par Discord --- */
.online-gate { grid-template-columns: minmax(0, 640px); justify-content: center; }
.discord-btn { display: inline-flex; align-items: center; gap: 12px; margin: 28px 0 14px; padding: 15px 26px; font-size: 16px; text-decoration: none; border-radius: 999px; }
html[data-theme] .discord-btn { background: #5865f2; color: #fff; border: 0; box-shadow: 0 8px 26px #5865f255; }
html[data-theme] .discord-btn:hover { background: #6d78f5; }
.discord-ico { width: 22px; height: 22px; }
.auth-error { margin-top: 18px; padding: 10px 14px; border-radius: 12px; background: #ff5a6e1f; border: 1px solid #ff5a6e66; color: #ffd0d6; }
.welcome-form { display: grid; gap: 16px; margin: 22px 0 34px; max-width: 420px; }
.welcome-form input { width: 100%; }
.online-gate .gate-intro h1 + .gate-who { margin-top: 22px; }
.online-gate .gate-who { margin-top: 8px; }
.discord-who { display: block; flex-basis: 100%; margin-top: 4px; }
.legal-foot { margin-top: 34px; font-size: 13px; opacity: .75; }
.legal-foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.welcome-note { margin: 0; }
.lock-note { display: grid; gap: 4px; margin: 4px 0 22px; padding: 14px 18px; border-radius: 16px; border: 1px solid #ffb02055; background: #ffb02014; }
.lock-note b { color: #ffd27a; }
.lock-note span { opacity: .85; font-size: 14px; }
.pick-search { display: block; width: min(420px, 100%); margin-top: 14px; }
.admin-search { margin: 4px 0 14px; }
.admin-search input { width: min(380px, 100%); }
.admin-more { margin-top: 12px; }
.admin-row.banned td { opacity: .55; }
.admin-row.banned td:last-child { opacity: 1; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.tag-ban { background: #ff5a6e2e; color: #ff9aa7; border: 1px solid #ff5a6e66; }
.tag-new { background: #ffb0202a; color: #ffd27a; border: 1px solid #ffb02055; }
.ban-row { gap: 12px; padding: 10px 0; border-top: 1px solid #ffffff14; flex-wrap: wrap; }
/* Admin sur téléphone : une fiche par joueur au lieu d'un tableau trop large */
@media (max-width: 760px) {
  .table:has(.admin-row) tr:not(.admin-row) { display: none; }
  .table tr.admin-row { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid #ffffff14; }
  .table tr.admin-row td { display: block; padding: 0; border: 0; text-align: left; }
  .table tr.admin-row td:first-child, .table tr.admin-row td:last-child { grid-column: 1 / -1; }
  .table tr.admin-row td[data-l]::before { content: attr(data-l) ' '; opacity: .6; font-size: 12px; }
  .table tr.admin-row .admin-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
}
.takedown h3 { margin: 22px 0 4px; }

/* Rapverse : le logo tient sur un seul mot, « Rap » + « verse » */
html[data-theme] .logo span, html[data-theme] .gate h1 span, .logo span, .gate h1 span { display: inline; }

.motion-opt { display: flex; gap: 10px; align-items: center; margin-top: 16px; }