:root {
  --bg: #0d0d12;
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --border: rgba(255, 255, 255, .08);
  --text: #f2f2f5;
  --muted: #8d8da0;
  --accent: #8b5cf6;
  --accent-2: #f97316;
  --hi: #ddd6fe; --mid: #8b5cf6; --lo: #3b1a7a; --glow: 139, 92, 246;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(139, 92, 246, .16), transparent 70%),
    radial-gradient(700px 400px at -10% 60%, rgba(249, 115, 22, .07), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #a78bfa; }
.muted { color: var(--muted); }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(13, 13, 18, .7); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.nav-in { display: flex; align-items: center; gap: 32px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: "Space Grotesk"; font-weight: 700; font-size: 19px; letter-spacing: .05em; }
.logo img { width: 34px; height: 34px; image-rendering: pixelated; }
.links { display: flex; gap: 24px; font-size: 14px; color: var(--muted); }
.links a { transition: color .15s; }
.links a:hover, .links a.on { color: var(--text); }
.bal { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; }
.mini-coin { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ddd6fe, #8b5cf6 45%, #3b1a7a); }

/* Coins */
.coin {
  --s: 40px;
  width: var(--s); height: var(--s); border-radius: 50%; flex: none; position: relative;
  display: grid; place-items: center; font-family: "Space Grotesk"; font-weight: 700; font-size: calc(var(--s) * .34); color: rgba(255, 255, 255, .92);
  background: radial-gradient(circle at 32% 28%, var(--hi) 0, var(--mid) 45%, var(--lo) 100%);
  box-shadow: inset 0 0 0 calc(var(--s) * .05) rgba(255, 255, 255, .18), inset 0 -6px 12px rgba(0, 0, 0, .35), 0 8px 22px -6px rgba(var(--glow), .7);
}
.coin::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .35); }

/* Jeton en image (pixel art) */
.coin-img { flex: none; image-rendering: pixelated; filter: drop-shadow(0 6px 14px rgba(var(--glow), .6)); }
.type .coin-img { width: 30px; height: 30px; }

/* Stage (hero) */
.stage { display: grid; grid-template-columns: 260px 1fr 260px; gap: 24px; align-items: center; min-height: calc(100vh - 64px - 110px); padding-top: 28px; padding-bottom: 28px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; align-self: center; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.panel-head b { font-family: "Space Grotesk"; font-size: 16px; }
.panel-head a { font-size: 12px; color: #a78bfa; }
.group { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; display: flex; justify-content: space-between; }
.group:first-child { margin-top: 0; }
.type { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; text-align: left; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.type:hover { background: var(--surface-2); }
.type.on { background: rgba(var(--glow), .14); border-color: rgba(var(--glow), .5); }
.type .coin { --s: 30px; }
.type div { flex: 1; min-width: 0; }
.type b { display: block; font-size: 14px; font-weight: 600; }
.type small { font-size: 12px; color: var(--muted); }
.badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.badge.lim { background: rgba(236, 72, 153, .16); color: #f472b6; }
.badge.we { background: rgba(245, 158, 11, .16); color: #fbbf24; }

.center { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 0; }
.coin-wrap { position: relative; display: grid; place-items: center; margin-bottom: 26px; }
.orbit { position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .08); animation: spin 60s linear infinite; pointer-events: none; }
.glow { position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--glow), .45), rgba(var(--glow), .12) 55%, transparent); pointer-events: none; }
.float { position: absolute; width: 40px; height: 40px; border-radius: 50%; opacity: .5; filter: blur(3px); pointer-events: none;
  background: radial-gradient(circle at 32% 28%, var(--hi), var(--mid) 45%, var(--lo)); animation: bob 6s ease-in-out infinite; }
.float.has-img { background: none; border-radius: 0; }
.float img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.f1 { left: 6%; top: 14%; width: 64px; height: 64px; filter: blur(5px); opacity: .4; }
.f2 { right: 9%; top: 10%; width: 36px; height: 36px; animation-delay: -2s; filter: blur(2px); }
.f3 { left: 13%; bottom: 20%; width: 30px; height: 30px; animation-delay: -4s; filter: blur(2px); }
.f4 { right: 4%; bottom: 26%; width: 72px; height: 72px; animation-delay: -1s; filter: blur(6px); opacity: .35; }
.hero-coin { --s: clamp(160px, 22vw, 230px); width: var(--s); height: var(--s); border-radius: 50%; position: relative; display: grid; place-items: center;
  font-family: "Space Grotesk"; font-weight: 700; font-size: calc(var(--s) * .34); color: rgba(255, 255, 255, .92);
  background: radial-gradient(circle at 32% 28%, var(--hi) 0, var(--mid) 45%, var(--lo) 100%);
  box-shadow: inset 0 0 0 calc(var(--s) * .04) rgba(255, 255, 255, .2), inset 0 -14px 30px rgba(0, 0, 0, .4), 0 30px 80px -20px rgba(var(--glow), .9);
  animation: bob 5s ease-in-out infinite; transition: background .4s, box-shadow .4s; }
.hero-coin::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .3); animation: spin 30s linear infinite; }
.center h1 { font-family: "Space Grotesk"; font-size: clamp(34px, 4.5vw, 52px); line-height: 1; margin: 8px 0 6px; }
.timer { font-size: 14px; color: var(--muted); min-height: 21px; }
.timer b { color: #f472b6; font-variant-numeric: tabular-nums; }
.actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.btn { padding: 14px 24px; border-radius: 99px; font-weight: 600; font-size: 15px; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: var(--mid); box-shadow: 0 10px 30px -10px rgba(var(--glow), .9); transition: background .4s, transform .15s; }
.btn.ghost { background: var(--surface); border: 1px solid var(--border); }

.h-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.h-row:first-child { border-top: 0; }
.h-row .coin { --s: 26px; }
.h-row div { flex: 1; }
.h-row small { display: block; color: var(--muted); font-size: 12px; }

.hero-coin.has-img { background: none; box-shadow: none; perspective: 700px; cursor: pointer; }
.hero-coin.has-img::before { display: none; }
.hero-coin.has-img .tilt { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  will-change: transform; }
.hero-coin.has-img img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.glare { position: absolute; inset: 0; pointer-events: none; opacity: var(--gl, 0);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .6), rgba(255, 255, 255, .12) 30%, transparent 55%);
  mix-blend-mode: screen; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* Live */
.live { display: flex; align-items: center; gap: 16px; }
.live-head { display: flex; align-items: center; gap: 8px; font-family: "Space Grotesk"; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 10px #ef4444; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.ticker { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.track { display: flex; gap: 10px; width: max-content; animation: scroll 40s linear infinite; }
.ticker:hover .track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.lv { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; white-space: nowrap; }
.lv .coin { --s: 24px; }
.av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: linear-gradient(135deg, #334155, #64748b); }

/* Leaderboard */
.board { padding-top: 90px; padding-bottom: 60px; }
.board-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.board h2 { font-family: "Space Grotesk"; font-size: clamp(28px, 4vw, 40px); margin-top: 6px; }
.seg { display: flex; padding: 4px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); }
.seg button { padding: 8px 16px; border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--muted); transition: background .15s, color .15s; }
.seg button.on { background: var(--accent); color: #fff; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.chip { padding: 9px 16px; border-radius: 99px; font-size: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); transition: all .15s; }
.chip:hover { color: var(--text); }
.chip.on { color: var(--text); border-color: rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .14); }

.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; align-items: end; max-width: 820px; margin: 0 auto 28px; }
.pod { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pod .av { width: 64px; height: 64px; font-size: 22px; margin-bottom: 10px; border: 3px solid var(--ring); box-shadow: 0 0 30px -6px var(--ring); }
.pod.p1 .av { width: 84px; height: 84px; font-size: 28px; }
.pod b { font-size: 16px; }
.pod small { color: var(--muted); font-size: 13px; }
.step { width: 100%; margin-top: 14px; border-radius: 18px 18px 6px 6px; border: 1px solid var(--border); display: grid; place-items: center;
  font-family: "Space Grotesk"; font-weight: 700; font-size: 44px; color: var(--ring); background: linear-gradient(rgba(139, 92, 246, .18), rgba(255, 255, 255, .02)); }
.p1 { --ring: #f59e0b; } .p1 .step { height: 170px; }
.p2 { --ring: #cbd5e1; } .p2 .step { height: 130px; }
.p3 { --ring: #f97316; } .p3 .step { height: 100px; }

.list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; }
.li .rank { width: 24px; font-family: "Space Grotesk"; font-weight: 700; color: var(--muted); }
.li span:nth-child(3) { flex: 1; font-weight: 500; }
.li .val { font-variant-numeric: tabular-nums; font-weight: 600; }
.li.me { border-color: rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .1); }

.foot { border-top: 1px solid var(--border); padding-top: 28px; padding-bottom: 28px; color: var(--muted); font-size: 13px; text-align: center; }

/* Responsive */
@media (max-width: 1000px) {
  .stage { grid-template-columns: 1fr; min-height: 0; }
  .center { order: -1; }
}
@media (max-width: 640px) {
  .links { display: none; }
  .live { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ticker { width: 100%; }
  .podium { gap: 8px; }
  .pod .av { width: 48px; height: 48px; font-size: 18px; }
  .pod.p1 .av { width: 60px; height: 60px; }
  .step { font-size: 30px; }
  .p1 .step { height: 120px; } .p2 .step { height: 90px; } .p3 .step { height: 70px; }
  .pod b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; }
}

/* Écran d'ouverture : compteur 1/1 → 1/X, pause finale, révélation + fiche */
.opening { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--bg); visibility: hidden; opacity: 0; user-select: none; overflow: hidden; --ease: cubic-bezier(.65, 0, .35, 1); }
.opening.on { visibility: visible; opacity: 1; }
.opening > * { position: relative; }
.op-glow { position: absolute !important; left: 50%; top: 50%; width: 760px; max-width: 160vw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--tier), .35), transparent); pointer-events: none; transition: background .4s, translate .8s var(--ease); }
.op-vignette, .op-rays { position: absolute !important; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.op-vignette { inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .8) 100%); }
.op-rays { left: 50%; top: 50%; width: 160vmax; height: 160vmax; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(var(--tier), .12) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000, transparent 70%); mask: radial-gradient(closest-side, #000, transparent 70%); animation: spin 40s linear infinite; }
.opening.t1000 .op-vignette { opacity: 1; }
.opening.t2500 .op-rays { opacity: 1; }
.opening.revealed .op-rays { opacity: 0; }

/* Fond de la révélation : pixel art dessiné en direct, qui dérive très lentement */
.op-bg { position: absolute !important; inset: -3%; opacity: 0; pointer-events: none; background: rgb(35, 32, 52);
  transition: opacity .25s ease-out; animation: drift 11s ease-in-out infinite alternate; }
.op-bg canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.opening.revealed .op-bg, .opening.t2500 .op-bg { opacity: 1; }
.op-rays { display: none; }
@keyframes drift {
  0% { transform: translate(-.6%, .4%) rotate(-.3deg); }
  100% { transform: translate(.6%, -.4%) rotate(.3deg); }
}

/* Jamais statique : tout le contenu flotte très lentement */
.op-main { animation: sway 7s ease-in-out infinite; }
@keyframes sway { 0%, 100% { translate: 0 0; rotate: 0deg; } 33% { translate: 2px -3px; rotate: .25deg; } 66% { translate: -2px 2px; rotate: -.2deg; } }

.op-top { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.op-tag-hide #op-tag, .opening.hold #op-tag, .opening.revealed .op-top { opacity: 0; transform: translateY(-12px); }
#op-tag { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.op-odds { font-family: "Space Grotesk"; font-weight: 700; font-size: clamp(48px, 9vw, 96px); line-height: 1; font-variant-numeric: tabular-nums;
  color: rgb(var(--tier)); text-shadow: 0 0 40px rgba(var(--tier), .5); margin: 6px 0 26px; transition: color .3s; }
.op-odds.bump { animation: bump .18s ease-out; }
@keyframes bump { 40% { transform: scale(1.12); } }

.op-main { --info: 340px; --gap: 56px; display: flex; align-items: center; gap: var(--gap); }
.op-coin-col { display: flex; flex-direction: column; align-items: center; transform: translateX(calc((var(--info) + var(--gap)) / 2)); }
.opening.revealed .op-coin-col { transition: transform .3s cubic-bezier(.8, 0, .9, .3); }
.opening.revealed .op-coin-col { transform: none; }
.op-coin { position: relative; width: clamp(180px, 26vw, 240px); aspect-ratio: 1; perspective: 800px; cursor: pointer; -webkit-tap-highlight-color: transparent; --boost: 0; }
.op-coin::before { content: ""; position: absolute; inset: -35%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--tier), calc(.25 + var(--boost) * .45)), transparent); transition: background .3s; }
.opening.hold .op-coin::before { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .8; } }
.op-coin .zoom { width: 100%; height: 100%; transition: scale .7s var(--ease); animation: bob 5s ease-in-out infinite; }
.opening.hold .op-coin .zoom { scale: 1.25; }
.opening.hold.rare .op-coin .zoom { scale: 1.45; }
.opening.revealed .op-coin .zoom { scale: 1.1; transition: scale .3s cubic-bezier(.8, 0, .9, .3); }
.op-coin .spin { width: 100%; height: 100%; transform-style: preserve-3d; }
.op-coin img { width: 100%; height: 100%; display: block; image-rendering: pixelated; pointer-events: none; }
.op-coin.hit .spin { animation: hit .14s ease-out; }
@keyframes hit { 30% { transform: scale(.9) rotate(-4deg); } 70% { transform: scale(1.04) rotate(2deg); } }
.opening.hold .op-coin .spin { animation: tremble .1s linear infinite; }
.opening.hold.rare .op-coin .spin { animation-duration: .07s; }
@keyframes tremble { 0% { translate: 0 0; } 25% { translate: 1.5px -1px; } 50% { translate: -1px 1.5px; } 75% { translate: 1px 1px; } 100% { translate: 0 0; } }
.op-coin.done { cursor: default; }
.jeton { image-rendering: pixelated; flex: none; }
.op-hint { color: var(--muted); font-size: 14px; margin-top: 18px; min-height: 21px; transition: opacity .3s; }
.opening.hold .op-hint { color: var(--text); animation: pulse 1.4s ease-in-out infinite; }

.op-info { width: var(--info); text-align: left; opacity: 0; transform: translateX(40px) scale(.96); pointer-events: none;
  transition: none; }
.opening.revealed .op-info { transition: opacity .18s ease-out .28s, transform .35s cubic-bezier(.2, 1.4, .4, 1) .28s; }
.opening.revealed .op-info { opacity: 1; transform: none; pointer-events: auto; }
.op-name { font-family: "Space Grotesk"; font-size: 44px; line-height: 1; margin: 8px 0 6px; }
.op-rarity { font-family: "Space Grotesk"; font-weight: 700; font-size: 22px; color: rgb(var(--tier)); margin-bottom: 18px; }
.op-stats { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: rgba(20, 18, 30, .8); border: 1px solid var(--border); }
.stat { display: grid; grid-template-columns: 70px 1fr 36px; align-items: center; gap: 10px; font-size: 13px; }
.stat .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.stat .bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: rgb(var(--tier)); transition: width .6s cubic-bezier(.2, .8, .3, 1) .35s; }
.stat b { text-align: right; font-variant-numeric: tabular-nums; }
.op-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.op-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.op-spark { position: fixed !important; pointer-events: none; z-index: 55; }

@media (max-width: 760px) {
  .op-main { flex-direction: column; gap: 20px; }
  .op-coin-col { transform: none; }
  .op-info { width: min(340px, calc(100vw - 32px)); transform: translateY(20px); text-align: center; position: absolute; }
  .opening.revealed .op-info { position: static; }
  .op-actions { justify-content: center; }
  .op-name { font-size: 34px; }
  .opening.revealed .op-coin .zoom { scale: .8; }
}

/* Couche des transitions */
.fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.fx > * { position: absolute; }

/* Menu debug */
.debug { position: fixed; right: 16px; bottom: 16px; z-index: 70; width: 280px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto;
  padding: 14px; border-radius: 16px; background: rgba(20, 20, 28, .95); border: 1px solid var(--border); backdrop-filter: blur(12px); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); font-size: 13px; }
.debug[hidden] { display: none; }
.debug-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.debug-head b { font-family: "Space Grotesk"; font-size: 15px; }
.debug-head button { width: 28px; height: 28px; border-radius: 8px; color: var(--muted); }
.debug-head button:hover { background: var(--surface-2); color: var(--text); }
.debug .muted { font-size: 12px; margin-bottom: 10px; }
.dbg-sec { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.dbg-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dbg-row button { padding: 6px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; }
.dbg-row button:hover { background: var(--surface-2); }
.dbg-row button.on { border-color: rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .2); }
.debug select { width: 100%; padding: 8px; border-radius: 8px; background: #1a1a24; color: var(--text); border: 1px solid var(--border); font: inherit; }
.dbg-go { width: 100%; margin-top: 16px; padding: 10px; font-size: 13px; }
.dbg { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-align: left; border: 1px solid transparent; }
.dbg:hover { background: var(--surface-2); }
.dbg.on { border-color: rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .14); }
.dbg b { width: 20px; font-family: "Space Grotesk"; color: var(--muted); }
.dbg small { display: block; color: var(--muted); font-size: 11px; }
/* Pendant la pause, on écarte le compteur et le texte pour laisser la place au zoom */
.opening.hold .op-top { transform: translateY(-36px); }
.opening.hold.rare .op-top { transform: translateY(-60px); }
.op-hint { transition: opacity .3s, transform .7s var(--ease); }
.opening.hold .op-hint { transform: translateY(30px); }
.opening.hold.rare .op-hint { transform: translateY(54px); }

/* Pendant une ouverture, la page derrière ne défile plus */
html.lock, html.lock body { overflow: hidden; }

/* Boutons cachés */
.op-actions [hidden] { display: none; }

/* Récap du Pull ×10 */
.op-recap-view { display: none; flex-direction: column; align-items: center; gap: 6px; width: min(900px, calc(100vw - 32px)); }
.opening.recap .op-main, .opening.recap .op-top { display: none; }
.opening.recap .op-recap-view { display: flex; }
.op-recap-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; width: 100%; margin: 18px 0 6px; }
.rc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 12px; border-radius: 16px;
  background: rgba(20, 18, 30, .8); border: 1px solid var(--border); animation: rc-in .35s cubic-bezier(.2, 1.3, .4, 1) both; }
.rc b { font-size: 14px; }
.rc small { color: rgb(var(--g)); font-weight: 600; font-size: 12px; }
.rc.best { border-color: rgb(var(--g)); box-shadow: 0 0 0 1px rgb(var(--g)), 0 10px 40px -10px rgba(var(--g), .8); }
.rc-tag { position: absolute; top: -10px; padding: 2px 10px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgb(var(--g)); color: #0d0d12; }
@keyframes rc-in { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@media (max-width: 640px) { .op-recap-grid { grid-template-columns: repeat(2, 1fr); } .rc img { width: 56px !important; height: 56px !important; } }

/* Écran de chargement */
.loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); transition: opacity .5s ease; }
.loader.out { opacity: 0; pointer-events: none; }
.ld-box { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ld-box .logo { font-size: 24px; }
.ld-box .logo img { width: 40px; height: 40px; }
.ld-bar { width: 200px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s ease-out; }

/* Récap sur petit écran : on peut faire défiler */
@media (max-height: 760px), (max-width: 640px) { .opening.recap { justify-content: flex-start; overflow-y: auto; padding: 32px 0; } }

/* Jeton du pull : couche d'inclinaison + reflet */
.op-coin .tilt3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.op-coin .glare { position: absolute; inset: 0; pointer-events: none; opacity: var(--gl, 0); mix-blend-mode: screen;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), rgba(255, 255, 255, .1) 30%, transparent 55%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.rc img { transition: transform .35s cubic-bezier(.2, .8, .3, 1); }

/* Jeton en volume */
.op-coin .zoom { perspective: 800px; }
.op-coin .spin { position: relative; }
.op-coin .spin img.face { position: relative; }
.op-coin .spin img.edge, .op-coin .spin img.back { position: absolute; inset: 0; filter: brightness(.45) saturate(.8); }
.op-coin .spin img.back { filter: none; } /* le dos est aussi clair que la face */

/* Pendant la rotation finale : les boutons attendent */
.opening.spinning .op-actions { opacity: .35; pointer-events: none; transition: opacity .3s; }
.op-actions { transition: opacity .3s; }

/* ===== Mythiques (1/100 000+) et 1/1 000 000 ===== */
/* Halo du compteur qui grandit (sans couleur) */
.op-coin::before { transform: scale(calc(1 + var(--boost) * .35)); }

/* Bandes noires façon film + battement de cœur pendant la pause */
.op-bars { position: absolute !important; inset: 0; pointer-events: none; }
.op-bars::before, .op-bars::after { content: ""; position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .9s cubic-bezier(.65, 0, .35, 1); }
.op-bars::before { top: 0; } .op-bars::after { bottom: 0; }
.opening.cinema .op-bars::before, .opening.cinema .op-bars::after { height: 11vh; }
.opening.cinema.hold .op-vignette { opacity: 1; animation: heartbeat 1.1s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { opacity: .75; } 12% { opacity: 1; } 24% { opacity: .8; } 36% { opacity: 1; } }
.opening.cinema.hold .op-coin .spin { animation-duration: .05s; }

/* Jeton animé : halo qui pulse, reflet qui traverse, petites étincelles qui clignotent */
.opening.mythic .op-coin .spin img.face { animation: mythglow 2.2s ease-in-out infinite; }
@keyframes mythglow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
.opening.god .op-coin .spin img.face { animation: godglow 2.6s ease-in-out infinite; }
@keyframes godglow { 0%, 100% { filter: brightness(1.05) contrast(1.05); } 50% { filter: brightness(1.3) contrast(1.1); } }
/* Le halo des mythiques pulse derrière le jeton (jamais coupé : c'est un dégradé, pas une ombre) */
.opening.mythic.revealed .op-coin::before { animation: halo 2.2s ease-in-out infinite; }
.opening.god.revealed .op-coin::before { animation: halo 1.8s ease-in-out infinite; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, .15) 55%, transparent); }
@keyframes halo { 50% { transform: scale(1.35); opacity: .85; } }
@keyframes godhue { to { filter: hue-rotate(360deg); } }
.op-coin .shine { position: absolute; inset: 0; pointer-events: none; display: none; mix-blend-mode: screen; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%) 0 0 / 300% 100%; animation: shine 2.4s ease-in-out infinite; }
.opening.mythic .op-coin .shine { display: block; }
@keyframes shine { 0% { background-position: 100% 0; } 60%, 100% { background-position: -50% 0; } }
.op-coin .tw { position: absolute; width: 6px; height: 6px; background: #fff; display: none; pointer-events: none; animation: tw 1.6s steps(2) infinite; }
.opening.mythic .op-coin .tw { display: block; }
.op-coin .tw:nth-of-type(1) { left: 18%; top: 22%; } .op-coin .tw:nth-of-type(2) { left: 72%; top: 14%; animation-delay: -.3s; }
.op-coin .tw:nth-of-type(3) { left: 84%; top: 58%; animation-delay: -.7s; } .op-coin .tw:nth-of-type(4) { left: 30%; top: 78%; animation-delay: -1.1s; }
.op-coin .tw:nth-of-type(5) { left: 55%; top: 40%; animation-delay: -.5s; } .op-coin .tw:nth-of-type(6) { left: 8%; top: 52%; animation-delay: -1.3s; }
.op-coin .tw:nth-of-type(7) { left: 62%; top: 86%; animation-delay: -.9s; }
@keyframes tw { 0% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.5); } }

/* Onde de choc */
.op-wave { position: fixed !important; border-radius: 50%; border: 6px solid #fff; pointer-events: none; z-index: 56; box-shadow: 0 0 30px rgba(255, 255, 255, .6), inset 0 0 30px rgba(255, 255, 255, .4); }

/* Nom en arc-en-ciel animé pour 1/1 000 000, scintillant pour les mythiques */
.opening.mythic .op-name { background: linear-gradient(90deg, #fff, var(--jg), #fff) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: namefx 3s linear infinite; }
.opening.god .op-name { background-image: linear-gradient(90deg, #ffffff, #94a3b8, #ffffff, #e2e8f0, #ffffff); text-shadow: 0 0 30px rgba(255, 255, 255, .35); }
@keyframes namefx { to { background-position: -200% 0; } }

/* Sortie vers l'accueil : les bandes noires repartent vite */
.opening.leaving .op-bars::before, .opening.leaving .op-bars::after { transition-duration: .4s; transition-timing-function: cubic-bezier(.6, 0, .85, .2); }
.opening.leaving { pointer-events: none; }

/* Stock de pulls Takoras */
.actions { flex-direction: column; align-items: center; gap: 12px; }
.stock { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.stock b { color: var(--text); }
.pips { display: flex; gap: 4px; }
/* Stock : de mini jetons Takoras, éteints quand ils sont vides */
.pips img { width: 24px; height: 24px; image-rendering: pixelated; filter: grayscale(1) brightness(.35); opacity: .45; transition: filter .4s, opacity .4s, transform .4s; }
.pips img.on { filter: none; opacity: 1; }

.row-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }
.btn.upgrade { padding: 9px 18px; font-size: 13px; background: var(--surface); border: 1px dashed rgba(255, 255, 255, .2); }
.small { font-size: 13px; }

/* Le jeton de l'ouverture pile au centre de l'écran : le compteur et le texte d'aide ne le poussent plus */
.opening { --coin: clamp(180px, 26vw, 240px); }
.op-coin { width: var(--coin); }
.op-top { position: absolute !important; left: 0; right: 0; bottom: calc(50% + var(--coin) / 2 + 30px); }
.op-top .op-odds { margin: 6px 0 0; }
.op-coin-col { position: relative; }
.op-hint { position: absolute; top: 100%; left: 50%; translate: -50% 0; white-space: nowrap; }
.opening.recap .op-top { display: none; }

/* Bouton son */
.mute { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--surface); border: 1px solid var(--border); }
.mute:hover { color: var(--text); }
.nav-in .bal { margin-left: 0; }

/* Cinématique 1/1 000 000 */
.op-black { position: absolute !important; inset: 0; z-index: 58; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.cine-line { height: 2px; width: 0; background: #fff; box-shadow: 0 0 20px #fff, 0 0 60px rgba(255, 255, 255, .6); }
.cine-text { font-family: "Space Grotesk"; font-weight: 700; font-size: clamp(16px, 2.4vw, 24px); color: #fff; opacity: 0; letter-spacing: .2em; padding-left: .9em; }

/* Listes vides (pas encore de vrais joueurs) */
.empty { color: var(--muted); font-size: 13px; text-align: center; padding: 18px 8px; }
.board-empty { max-width: 420px; margin: 0 auto; padding: 28px 16px; border: 1px dashed var(--border); border-radius: 14px; }
.live-empty { font-size: 13px; padding: 10px 0; }
.track.still { animation: none; }

/* Paramètres */
.settings { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.settings.on { opacity: 1; visibility: visible; }
.set-card { width: min(460px, 100%); padding: 22px; border-radius: 20px; background: #16151f; border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transform: translateY(14px) scale(.98); transition: transform .3s cubic-bezier(.2, 1, .3, 1); }
.settings.on .set-card { transform: none; }
.set-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.set-head b { font-family: "Space Grotesk"; font-size: 20px; }
.set-close { width: 32px; height: 32px; border-radius: 10px; color: var(--muted); }
.set-close:hover { background: var(--surface-2); color: var(--text); }
.set-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--border); }
.set-row b { font-size: 14px; font-weight: 600; }
.set-row small { font-size: 12px; }
.set-seg { align-self: flex-start; }
.set-row input[type=range] { width: 100%; accent-color: var(--accent); }

/* Compte */
.acc-btn { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 99px; font-size: 14px; font-weight: 600; background: var(--accent); color: #fff; white-space: nowrap; transition: transform .15s; }
.acc-btn:hover { transform: translateY(-1px); }
.acc-btn.in { padding: 0 14px 0 5px; background: var(--surface); border: 1px solid var(--border); font-weight: 500; }
.acc-btn .av { width: 28px; height: 28px; background: linear-gradient(135deg, #6d28d9, #a78bfa); }
.acc-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.acc-form { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.acc-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.acc-field input { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font: inherit; font-weight: 400; font-size: 15px; outline: none; transition: border-color .15s; }
.acc-field input:focus { border-color: rgba(139, 92, 246, .7); }
.acc-code { letter-spacing: .4em; font-family: "Space Grotesk" !important; font-size: 22px !important; text-align: center; }
.acc-hint { margin-top: -6px; font-size: 12px; }
.acc-p { font-size: 14px; }
.acc-p b { color: var(--text); }
.acc-form .btn { margin-top: 4px; background: var(--accent); }
.acc-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.acc-links a { color: #a78bfa; cursor: pointer; }
.acc-links a:hover { text-decoration: underline; }
.acc-msg { font-size: 13px; color: #fb7185; min-height: 1px; }
.acc-msg.ok { color: #4ade80; }
.acc-me { display: flex; align-items: center; gap: 14px; }
.acc-me .av { width: 52px; height: 52px; font-size: 20px; background: linear-gradient(135deg, #6d28d9, #a78bfa); }
.acc-me div { display: flex; flex-direction: column; }
.acc-me b { font-size: 17px; }
.pod .gain, .li .gain { display: inline-flex; align-items: center; gap: 6px; }
.li .gain .jeton, .pod .gain .jeton { width: 20px; height: 20px; image-rendering: pixelated; }
@media (max-width: 640px) {
  .nav-in { gap: 10px; }
  .acc-name { display: none; }
  .acc-btn.in { padding: 0 5px; }
}
.nav-in #mute, .nav-in .bal, .nav-in .acc-btn { margin-left: -22px; }
@media (max-width: 640px) { .nav-in #mute, .nav-in .bal, .nav-in .acc-btn { margin-left: 0; } }

/* Panel admin */
.debug.admin { width: 360px; max-height: calc(100vh - 32px); }
.mpx-in, .debug select { width: 100%; padding: 8px 10px; border-radius: 8px; background: #1a1a24; color: var(--text); border: 1px solid var(--border); font: inherit; font-size: 13px; }
.mpx-list { max-height: 190px; overflow: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.mpx-p { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 7px 10px; border-radius: 8px; text-align: left; background: var(--surface); border: 1px solid transparent; font-size: 12px; }
.mpx-p:hover { background: var(--surface-2); }
.mpx-p.on { border-color: rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .14); }
.mpx-p b { font-size: 13px; } .mpx-p small { color: var(--muted); grid-column: 1 / -1; }
.mpx-sel { margin-top: 10px; padding: 10px; border-radius: 10px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.mpx-row { display: flex; gap: 6px; margin-top: 6px; }
.mpx-row .mpx-in { min-width: 0; }
.mpx-row button, .mpx-danger { flex: none; padding: 8px 12px; border-radius: 8px; background: var(--accent); font-size: 12px; font-weight: 600; }
.mpx-danger { width: 100%; margin-top: 8px; background: rgba(239, 68, 68, .15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, .35); }
.mpx-msg { font-size: 12px; color: #86efac; min-height: 16px; margin: 6px 0 0; }
.mpx-msg.err { color: #fca5a5; }

/* Connexion Discord / Google */
.acc-oauth { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; padding: 13px; }
.acc-oauth.discord { background: #5865f2; }
.acc-oauth.google { background: #fff; color: #1f1f1f; }

/* Bouton admin caché tant que le compte n'est pas admin */
.mute[hidden] { display: none; }

/* ===================== Pages : inventaire, boutique, profil ===================== */
.piece { width: 1.15em; height: 1.15em; vertical-align: -.22em; image-rendering: pixelated; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .35)); }
.bal .piece { width: 18px; height: 18px; vertical-align: middle; }
.pix { image-rendering: pixelated; display: block; }
.page { padding-top: 34px; padding-bottom: 120px; min-height: calc(100vh - 64px); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-title { font-family: "Space Grotesk"; font-size: clamp(28px, 4vw, 40px); margin-top: 6px; }
.page-empty { text-align: center; padding: 80px 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.center { text-align: center; }
.btn.sm { padding: 8px 14px; font-size: 13px; }
a.btn { display: inline-flex; justify-content: center; }
.plink { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, .25); }
.plink:hover { color: #c4b5fd; }

/* Couleurs de rareté */
.tier { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); }
.t-r_common { color: #cbd5e1; } .t-r_rare { color: #38bdf8; } .t-r_epic { color: #a78bfa; } .t-r_legend { color: #fbbf24; } .t-r_myth { color: #f0abfc; }

/* Inventaire */
.inv-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.inv-tools .chips { margin: 0; }
.inv-right { display: flex; gap: 8px; }
.inv-search { width: 180px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ic { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 12px; border-radius: 16px; cursor: pointer; text-align: center;
  background: radial-gradient(120px 90px at 50% 30%, rgba(var(--g), .16), transparent 70%), var(--surface); border: 1px solid var(--border); transition: transform .15s, border-color .15s; user-select: none; }
.ic:hover { transform: translateY(-3px); border-color: rgba(var(--g), .55); }
.ic img { width: 76px; height: 76px; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(var(--g), .55)); }
.ic b { font-size: 14px; } .ic small { font-size: 12px; color: var(--muted); }
.ic.sel { border-color: #8b5cf6; background: rgba(139, 92, 246, .16); box-shadow: 0 0 0 1px #8b5cf6 inset; }
.ic.locked { opacity: .75; }
.ic-n { position: absolute; top: 8px; right: 10px; font-family: "Space Grotesk"; font-weight: 700; font-size: 13px; color: #c4b5fd; }
.ic-lock { position: absolute; top: 7px; left: 9px; font-size: 13px; }
.ic-step { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12px; }
.ic-step button { width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); font-weight: 700; }
.sell-bar { position: fixed; left: 50%; bottom: 18px; translate: -50% 140%; z-index: 30; width: min(980px, calc(100vw - 24px)); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 18px; background: rgba(22, 21, 31, .96); border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); transition: translate .35s cubic-bezier(.2, 1, .3, 1); }
.sell-bar.on { translate: -50% 0; }
.sb-left { font-size: 14px; } .sb-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* Fenêtre d'aperçu d'un jeton / édition du profil */
.modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.modal.on { opacity: 1; visibility: visible; }
.modal-card { position: relative; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 26px; border-radius: 22px; background: #16151f; border: 1px solid var(--border);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 80px -30px rgba(var(--g, 139, 92, 246), .6); transform: scale(.96); transition: transform .25s cubic-bezier(.2, 1, .3, 1); }
.modal.on .modal-card { transform: none; }
.jm-close { position: absolute; top: 14px; right: 14px; }
.jm-card { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.jm-coin { width: 220px; height: 220px; flex: none; display: grid; place-items: center; margin: 0 auto; transition: transform .15s;
  background: radial-gradient(closest-side, rgba(var(--g), .45), transparent); }
.jm-coin img { width: 190px; height: 190px; image-rendering: pixelated; }
.jm-info { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.jm-info h2 { font-family: "Space Grotesk"; font-size: 36px; line-height: 1; }
.jm-odds { font-family: "Space Grotesk"; font-weight: 700; font-size: 20px; color: rgb(var(--g)); }
.jm-power { font-size: 14px; color: var(--muted); } .jm-power b { color: #fde68a; font-size: 18px; }
.jm-val { font-size: 14px; }
.jm-info .stat .bar i { background: rgb(var(--g)); }
.jm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* Petits messages */
.toast { position: fixed; left: 50%; bottom: 96px; translate: -50% 0; z-index: 200; padding: 11px 18px; border-radius: 12px; background: #1f1d2b; border: 1px solid rgba(139, 92, 246, .5);
  font-size: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); animation: toast-in .3s cubic-bezier(.2, 1.3, .4, 1); transition: opacity .4s, translate .4s; }
.toast.bad { border-color: rgba(239, 68, 68, .6); }
.toast.out { opacity: 0; translate: -50% 10px; }
@keyframes toast-in { from { opacity: 0; translate: -50% 16px; } }

/* Boutique */
.shop-bal { font-family: "Space Grotesk"; font-size: 24px; font-weight: 700; }
.fx-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.page .fx-row { justify-content: flex-start; }
.fx-chip { padding: 6px 12px; border-radius: 99px; font-size: 13px; background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .4); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.si { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); transition: transform .15s, border-color .15s; }
.si:hover { transform: translateY(-3px); border-color: rgba(139, 92, 246, .5); }
.si-icon { height: 76px; display: grid; place-items: center; margin-bottom: 4px; }
.si-banner { width: 180px; height: 45px; image-rendering: pixelated; border-radius: 8px; }
.si b { font-size: 16px; } .si p { font-size: 13px; flex: 1; }
.si-foot { display: flex; justify-content: space-between; align-items: center; }
.si-price { font-family: "Space Grotesk"; font-weight: 700; font-size: 18px; }

/* Profil */
.prof { max-width: 900px; margin: 0 auto; }
.prof-banner { height: clamp(120px, 22vw, 220px); border-radius: 20px; overflow: hidden; border: 1px solid var(--border); }
.banner-cv { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.prof-head { display: flex; align-items: flex-end; gap: 18px; margin: -48px 0 18px 24px; flex-wrap: wrap; position: relative; }
.prof-pp .pp { border-radius: 24px; border: 4px solid var(--bg); background: #1c1830; object-fit: cover; }
.pp { border-radius: 50%; object-fit: cover; flex: none; }
.pp.jeton-pp { image-rendering: pixelated; background: #1c1830; }
.prof-id { flex: 1; min-width: 200px; padding-bottom: 6px; }
.prof-id h2 { font-family: "Space Grotesk"; font-size: 32px; }
.prof-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
.prof-stats div, .mp-mini div, .mp-stats div { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.prof-stats b, .mp-mini b, .mp-stats b { font-family: "Space Grotesk"; font-size: 20px; }
.prof-stats span, .mp-mini span, .mp-stats span { font-size: 12px; color: var(--muted); }
.prof-h { font-family: "Space Grotesk"; font-size: 20px; margin-bottom: 12px; }
.showcase { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.sc { aspect-ratio: .8; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-align: center;
  background: radial-gradient(100px 80px at 50% 35%, rgba(var(--g, 255, 255, 255), .18), transparent 70%), var(--surface); border: 1px solid var(--border); transition: transform .15s; }
.sc:hover { transform: translateY(-3px); }
.sc img { width: 64%; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(var(--g), .5)); }
.sc b { font-size: 13px; } .sc small { font-size: 11px; color: var(--muted); }
.sc.empty { border-style: dashed; color: var(--muted); font-size: 28px; cursor: default; }
.pe h2 { font-family: "Space Grotesk"; font-size: 26px; margin-bottom: 6px; }
.pe h4 { margin: 16px 0 8px; font-size: 14px; }
.pe-banners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pe-b { height: 46px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; }
.pe-b.on { border-color: #8b5cf6; } .pe-b.lock { opacity: .3; }
.pe-pps, .pe-show { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow: auto; }
.pe-pp, .pe-s { width: 52px; height: 52px; border-radius: 12px; background: var(--surface); border: 2px solid transparent; display: grid; place-items: center; font-size: 11px; padding: 4px; }
.pe-pp img, .pe-s img { width: 100%; height: 100%; image-rendering: pixelated; border-radius: 8px; object-fit: cover; }
.pe-pp.on, .pe-s.on { border-color: #8b5cf6; background: rgba(139, 92, 246, .18); }
.pe-bio { width: 100%; resize: none; }
.acc-btn .pp { margin-right: 6px; }

/* ===================== Panel admin grand format ===================== */
.debug.admin2 { left: 50%; top: 50%; right: auto; bottom: auto; translate: -50% -50%; width: min(1180px, calc(100vw - 32px)); height: min(820px, calc(100vh - 32px)); max-height: none;
  padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; z-index: 115; }
.mp-head { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.mp-head > b { font-family: "Space Grotesk"; font-size: 20px; }
.mp-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); margin-right: auto; }
.mp-tabs button { padding: 7px 16px; border-radius: 99px; font-size: 13px; color: var(--muted); }
.mp-tabs button.on { background: var(--accent); color: #fff; }
.mp-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px; }
.mp-tab[data-tab="players"]:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; height: 100%; }
.mp-left { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.mp-table { flex: 1; overflow: auto; border-radius: 14px; border: 1px solid var(--border); }
.mp-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mp-table th { position: sticky; top: 0; background: #1b1a26; text-align: left; padding: 10px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.mp-table td { padding: 10px; border-top: 1px solid var(--border); white-space: nowrap; }
.mp-table tr[data-id] { cursor: pointer; } .mp-table tr[data-id]:hover { background: var(--surface); }
.mp-table tr.on { background: rgba(139, 92, 246, .16); }
.mp-right { overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.mp-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.mp-banner { height: 70px; }
.mp-who { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; }
.mp-who h3 { font-family: "Space Grotesk"; font-size: 20px; }
.mp-mini, .mp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 14px 14px; }
.mp-stats { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); padding: 0; margin-bottom: 14px; }
.mp-box { padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 12px; }
.mp-box h4 { font-size: 14px; margin-bottom: 8px; }
.mp-box.danger { border-color: rgba(239, 68, 68, .4); }
.mpx-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mpx-quick button { padding: 7px 11px; border-radius: 9px; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.mpx-quick button:hover { border-color: rgba(139, 92, 246, .6); }
.mp-jetons { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.mp-jetons button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; background: var(--surface-2); border: 1px solid transparent; }
.mp-jetons button:hover { border-color: rgba(var(--g), .8); }
.mp-jetons img { width: 38px; height: 38px; image-rendering: pixelated; }
.mp-jetons small { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-2col .mp-box { margin: 0; }
.mp-inv { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow: auto; font-size: 13px; }
.mp-inv span { display: flex; align-items: center; gap: 6px; } .mp-inv img { width: 22px; height: 22px; image-rendering: pixelated; }
.mp-recent { display: flex; flex-direction: column; gap: 6px; max-height: 210px; overflow: auto; font-size: 13px; }
.mp-recent div { display: flex; justify-content: space-between; gap: 6px; }
.debug.admin2 .mpx-msg { padding: 0 20px 12px; margin: 0; }
.debug.admin2 .dbg-go { width: auto; }

@media (max-width: 860px) {
  .mp-tab[data-tab="players"]:not([hidden]) { grid-template-columns: 1fr; height: auto; }
  .mp-table { max-height: 300px; }
  .mp-2col, .mp-mini { grid-template-columns: 1fr 1fr; }
  .prof-stats { grid-template-columns: 1fr 1fr; }
  .showcase { grid-template-columns: repeat(3, 1fr); }
  .jm-coin { width: 160px; height: 160px; } .jm-coin img { width: 140px; height: 140px; }
}
@media (max-width: 640px) { .links { display: flex; gap: 12px; font-size: 13px; overflow-x: auto; } .acc-name { display: none; } .inv-search { width: 120px; } }

/* Un élément caché reste caché, quel que soit son style */
[hidden] { display: none !important; }
.sc.empty { background: var(--surface); }
.si-price { white-space: nowrap; }
.si-foot { gap: 8px; flex-wrap: wrap; }

/* ===================== Interface agrandie + nouveautés profil ===================== */
.nav-in { height: 74px; gap: 26px; }
.logo { font-size: 22px; } .logo img { width: 40px; height: 40px; }
.links { font-size: 16px; gap: 26px; }
.bal { font-size: 16px; padding: 9px 16px; } .bal .piece { width: 22px; height: 22px; }
.mute { width: 44px; height: 44px; } .mute svg { width: 21px; height: 21px; }
.acc-btn { font-size: 15px; padding: 6px 14px 6px 6px; }
.panel { padding: 20px; } .panel-head b { font-size: 18px; }
.type b { font-size: 16px; } .type small { font-size: 13px; } .type .coin, .type .coin-img { --s: 36px; width: 36px; height: 36px; }
.h-row { font-size: 15px; } .h-row small { font-size: 13px; }
.btn { font-size: 16px; padding: 15px 26px; }
.btn.sm { font-size: 14px; padding: 9px 16px; }
.chip { font-size: 15px; padding: 10px 18px; }
.stock { font-size: 15px; } .pips img { width: 28px; height: 28px; }
.page { font-size: 16px; }
.page-title { font-size: clamp(32px, 4.5vw, 46px); }
.eyebrow { font-size: 13px; }
.inv-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.ic { padding: 20px 12px 14px; } .ic img { width: 96px; height: 96px; } .ic b { font-size: 16px; } .ic small { font-size: 13px; }
.ic-n { font-size: 15px; }
.mpx-in { font-size: 15px; padding: 10px 12px; }
.sb-left { font-size: 16px; }
.si { padding: 22px; } .si b { font-size: 18px; } .si p { font-size: 14px; } .si-price { font-size: 20px; } .si-icon { height: 96px; }
.prof-stats b { font-size: 24px; } .prof-stats span { font-size: 13px; }
.prof-id h2 { font-size: 36px; } .prof-id p { font-size: 16px; }
.prof-h { font-size: 22px; } .prof-h small { font-size: 13px; font-weight: 400; margin-left: 6px; }
.sc b { font-size: 15px; } .sc small { font-size: 13px; }
.sc.can { cursor: pointer; } .sc.can:hover { border-color: rgba(139, 92, 246, .6); color: #c4b5fd; }
.op-stats .stat { font-size: 14px; }
.toast { font-size: 15px; }
.mp-table table { font-size: 14px; } .mp-box h4 { font-size: 15px; }
.debug .dbg-row button, .mpx-quick button { font-size: 13px; }

/* Avatar par défaut (initiale) */
.pp.av { display: grid; place-items: center; font-family: "Space Grotesk"; font-weight: 700; color: #fff; background: linear-gradient(135deg, #8b5cf6, #f97316); border-radius: 50%; }
.prof-pp .pp.av { border-radius: 26px; border: 4px solid var(--bg); }
.acc-btn .pp { margin-right: 8px; }

/* Bannière absente */
.prof-banner.none { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #15141d 0 14px, #18171f 14px 28px); }

/* Zone privée en bas du profil */
.prof-private { margin-top: 30px; padding: 20px; border-radius: 18px; border: 1px dashed rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .05); display: flex; flex-direction: column; gap: 10px; }
.pv-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.pv-row span { color: var(--muted); }
.prof-private > .btn { align-self: flex-start; margin-top: 6px; }

/* Fenêtre de choix pour la vitrine */
.pk-wrap { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.pk-wrap h2 { font-family: "Space Grotesk"; font-size: 26px; }
.pk-tools { display: flex; gap: 8px; } .pk-tools input { flex: 1; }
.pk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 52vh; overflow: auto; padding: 2px; }
.pk { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; text-align: center;
  background: radial-gradient(80px 60px at 50% 30%, rgba(var(--g), .16), transparent 70%), var(--surface); border: 1px solid var(--border); }
.pk:hover { border-color: rgba(var(--g), .7); transform: translateY(-2px); }
.pk img { width: 64px; height: 64px; image-rendering: pixelated; }
.pk b { font-size: 14px; } .pk small { font-size: 12px; color: var(--muted); }
.pk.off { opacity: .35; }
.pe-b.none { display: grid; place-items: center; font-size: 13px; color: var(--muted); background: var(--surface); }
.jm-coin { cursor: grab; }
@media (max-width: 1000px) { .nav-in { gap: 14px; } .links { gap: 14px; font-size: 15px; } .acc-name { display: none; } .logo { font-size: 18px; } }

.potion { width: 84px; height: 84px; }
img.banner-cv { object-fit: cover; }
.si-banner { width: 100%; max-width: 220px; height: 55px; object-fit: cover; image-rendering: pixelated; border-radius: 8px; }

/* Soulignement du menu qui glisse d'une page à l'autre */
.links { position: relative; }
.links a { padding: 6px 0; }
.nav-ink { position: absolute; left: 0; bottom: -4px; height: 3px; width: 0; border-radius: 3px; background: linear-gradient(90deg, #8b5cf6, #f97316); opacity: 0;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), width .45s cubic-bezier(.16, 1, .3, 1), opacity .3s; pointer-events: none; }

/* La croix de la fenêtre ne chevauche plus la rareté */
.jm-card { padding-top: 54px; }
.jm-close { top: 12px; right: 12px; }

.items-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 26px; }
.it-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.it-card .ic-n { position: static; } .it-card p { font-size: 13px; flex: 1; }

/* Probas & infos */
.link-btn { font-size: 14px; color: #c4b5fd; text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
.link-btn:hover { color: #fff; }
.shop-right { display: flex; align-items: center; gap: 14px; }
.fx-chip.total { background: rgba(250, 204, 21, .14); border-color: rgba(250, 204, 21, .5); font-weight: 600; }
.info { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.info h2 { font-family: "Space Grotesk"; font-size: 28px; }
.info h3 { font-family: "Space Grotesk"; font-size: 20px; margin-top: 6px; }
.info-luck { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.info-luck .muted { margin-right: 4px; font-size: 14px; }
.info-luck .chip { padding: 7px 12px; font-size: 13px; }
.info-table { max-height: 46vh; overflow: auto; border-radius: 14px; border: 1px solid var(--border); }
.info-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.info-table th { position: sticky; top: 0; background: #1b1a26; text-align: left; padding: 10px; font-size: 12px; color: var(--muted); }
.info-table td { padding: 8px 10px; border-top: 1px solid var(--border); white-space: nowrap; }
.info-table td:first-child { display: flex; align-items: center; gap: 8px; }
.info-table img { width: 26px; height: 26px; image-rendering: pixelated; }
.info-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.info-rules div { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.info-rules b { font-size: 15px; } .info-rules p { font-size: 13px; margin-top: 4px; line-height: 1.5; }
.modal-card:has(.info) { width: min(900px, 100%); }

/* ===== Boutique v2 : catégories, stock, cartes ===== */
.shop-cats { margin-bottom: 8px; }
.shop-sec { margin-top: 26px; }
.shop-h { font-family: "Space Grotesk"; font-size: 22px; margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px; }
.shop-h small { font-size: 13px; font-weight: 400; }
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.si { position: relative; overflow: hidden; background: radial-gradient(160px 110px at 50% 18%, rgba(var(--g), .16), transparent 70%), var(--surface);
  transition: transform .2s cubic-bezier(.2, 1, .3, 1), border-color .2s, box-shadow .2s; }
.si:hover { transform: translateY(-4px); border-color: rgba(var(--g), .55); box-shadow: 0 14px 40px -18px rgba(var(--g), .8); }
.si .si-icon img { filter: drop-shadow(0 6px 14px rgba(var(--g), .45)); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.si:hover .si-icon img { transform: scale(1.08) rotate(-4deg); }
.si.epic { border-color: rgba(var(--g), .45); }
.si.epic::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(var(--g), .18), transparent 30%); animation: spin 6s linear infinite; pointer-events: none; }
.si > * { position: relative; }
.si-stock { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: rgba(var(--g), .16); color: rgb(var(--g)); border: 1px solid rgba(var(--g), .35); }
.si-stock.none { background: rgba(148, 163, 184, .12); color: #94a3b8; border-color: rgba(148, 163, 184, .25); }
.si-stock.ok { background: rgba(74, 222, 128, .14); color: #86efac; border-color: rgba(74, 222, 128, .35); }
.si-btn { width: 100%; justify-content: center; margin-top: 4px; }
.si-btn.poor { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.si-btn[disabled] { opacity: 1; cursor: default; color: var(--muted); }
.si-btn .si-timer { font-variant-numeric: tabular-nums; color: var(--text); }
/* Épuisé : l'objet reste beau, juste plus calme (icône désaturée, pas de survol) */
.si.out { background: var(--surface); }
.si.out .si-icon img { filter: grayscale(.85) brightness(.7); }
.si.out:hover { transform: none; box-shadow: none; border-color: var(--border); }
.si.out:hover .si-icon img { transform: none; }
.si.out.epic::before { display: none; }

/* Probas & infos : l'en-tête du tableau passe au-dessus des pièces */
.info-table th { z-index: 2; }
.info-table td .piece { vertical-align: -.25em; }
@media (max-width: 860px) { .logo { font-size: 0; gap: 0; } .links { gap: 12px; font-size: 14px; } }

/* ===== Effet doodle : tes pixel arts « vivent » un peu (déformation minuscule qui change ~6 fois par seconde) ===== */
.ic img { --df: drop-shadow(0 0 10px rgba(var(--g), .55)); }
.sc img { --df: drop-shadow(0 0 10px rgba(var(--g), .5)); }
.si .si-icon img { --df: var(--tint, saturate(1)) drop-shadow(0 6px 14px rgba(var(--g), .45)); }
.si.out .si-icon img { --df: var(--tint, saturate(1)) grayscale(.85) brightness(.7); }
.it-card .si-icon img, .pk img, .jm-coin img, .hero-coin.has-img img, .si-banner, .prof-banner img, .info-table img { --df: var(--tint, saturate(1)); }
.ic img, .sc img, .si-icon img, .it-card .si-icon img, .pk img, .jm-coin img, .hero-coin.has-img img, .si-banner, .prof-banner img, .info-table img {
  filter: var(--df); animation: doodle .9s steps(1) infinite; }
@keyframes doodle {
  0% { filter: url(#dd0) var(--df); }
  33% { filter: url(#dd1) var(--df); }
  66% { filter: url(#dd2) var(--df); }
}
html.reduce-fx .ic img, html.reduce-fx .sc img, html.reduce-fx .si-icon img, html.reduce-fx .pk img, html.reduce-fx .jm-coin img,
html.reduce-fx .hero-coin.has-img img, html.reduce-fx .si-banner, html.reduce-fx .prof-banner img, html.reduce-fx .info-table img { animation: none; }

/* Doodle aussi sur le jeton de l'ouverture (face et dos ; la tranche reste fixe pour ne pas casser la 3D) */
.op-coin .spin img.face, .op-coin .spin img.back { --df: saturate(1); filter: var(--df); animation: doodle .9s steps(1) infinite; }
.op-coin .spin img.back { --df: saturate(1); }
.opening.mythic .op-coin .spin img.face { --df: brightness(1.12); animation: doodle .9s steps(1) infinite; }
.opening.god .op-coin .spin img.face { --df: brightness(1.2) contrast(1.05); animation: doodle .9s steps(1) infinite; }
html.reduce-fx .op-coin .spin img.face, html.reduce-fx .op-coin .spin img.back { animation: none; }

/* ===================== Annonces, amis, chat ===================== */
.nbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; font-style: normal; line-height: 1; box-shadow: 0 0 0 2px var(--bg); }
.links a .nbadge { margin-left: 6px; vertical-align: 2px; }
.mute { position: relative; }
.mute .nbadge { position: absolute; top: -4px; right: -4px; }
.nav-in .mute:not([hidden]) ~ .mute { margin-left: -22px; }
@media (max-width: 640px) { .nav-in .mute:not([hidden]) ~ .mute { margin-left: 0; } }

.ann-bar { position: sticky; top: 74px; z-index: 19; background: linear-gradient(90deg, rgba(139, 92, 246, .22), rgba(249, 115, 22, .2)); border-bottom: 1px solid rgba(249, 115, 22, .35); backdrop-filter: blur(12px); animation: annIn .4s cubic-bezier(.16, 1, .3, 1); transition: opacity .25s, transform .25s; }
.ann-bar.out { opacity: 0; transform: translateY(-100%); }
@keyframes annIn { from { opacity: 0; transform: translateY(-100%); } }
.ann-in { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.ann-in p { flex: 1; font-weight: 500; overflow-wrap: anywhere; }
.ann-in small { white-space: nowrap; }
.ann-ico { font-size: 20px; }
.ann-x { width: 30px; height: 30px; border-radius: 8px; color: var(--muted); flex: none; }
.ann-x:hover { background: var(--surface-2); color: var(--text); }
.ban-bar { padding: 10px 16px; text-align: center; background: rgba(239, 68, 68, .16); border-bottom: 1px solid rgba(239, 68, 68, .4); color: #fca5a5; font-weight: 500; }
@media (max-width: 640px) { .ann-in small { display: none; } .ann-bar { top: 64px; } }

.ann-full { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: rgba(6, 5, 12, .82); backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s; }
.ann-full.on { opacity: 1; }
.annf-card { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 36px 32px 28px; border-radius: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(249, 115, 22, .2), transparent 60%), #15131f; border: 1px solid rgba(249, 115, 22, .45); box-shadow: 0 30px 120px -20px rgba(249, 115, 22, .55);
  transform: scale(.85) translateY(20px); transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.ann-full.on .annf-card { transform: none; }
.annf-tag { font-family: "Space Grotesk"; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fdba74; font-size: 14px; animation: annPulse 1.2s ease-in-out infinite; }
@keyframes annPulse { 50% { opacity: .55; } }
.annf-body { font-family: "Space Grotesk"; font-size: clamp(22px, 4vw, 32px); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; white-space: pre-line; }
.annf-more { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; }
.annf-more p { overflow-wrap: anywhere; }
.annf-card .btn { margin-top: 6px; }
.ann-hist { width: min(560px, 80vw); display: flex; flex-direction: column; gap: 10px; }
.ann-hist h2 { font-family: "Space Grotesk"; margin-bottom: 6px; }
.ah { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.ah p { overflow-wrap: anywhere; white-space: pre-line; margin-bottom: 4px; }
.ah.new { border-color: rgba(249, 115, 22, .5); }
.ah.new b { color: #fdba74; }

/* Page amis */
.fr-add { display: flex; gap: 10px; margin-bottom: 26px; max-width: 520px; }
.fr-add .mpx-in { flex: 1; padding: 12px 16px; font-size: 15px; border-radius: 99px; }
.fr-add .btn { white-space: nowrap; padding: 12px 20px; }
.fr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin: 12px 0 28px; }
.fr { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); transition: border-color .15s, transform .15s; }
.fr:hover { border-color: rgba(139, 92, 246, .45); transform: translateY(-2px); }
.fr .av { font-size: 18px; }
.fr-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fr-who a { font-weight: 600; font-size: 16px; align-self: flex-start; }
.fr-who small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-act { display: flex; gap: 6px; }
.fr-empty { grid-column: 1 / -1; }
.prof-fr { margin-left: auto; }
@media (max-width: 640px) { .fr-list { grid-template-columns: 1fr; } .fr-add { flex-direction: column; } }

/* Chat */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--accent); box-shadow: 0 12px 34px -8px rgba(139, 92, 246, .9); transition: transform .15s; }
.chat-fab:hover { transform: translateY(-3px) scale(1.04); }
.chat-fab .nbadge { position: absolute; top: -2px; right: -2px; animation: annPulse 1.2s ease-in-out infinite; }
.chat-dock { position: fixed; right: 22px; bottom: 90px; z-index: 61; width: min(360px, calc(100vw - 32px)); height: min(500px, calc(100vh - 140px)); display: flex; flex-direction: column;
  border-radius: 20px; background: #15131f; border: 1px solid rgba(139, 92, 246, .35); box-shadow: 0 24px 80px -16px rgba(0, 0, 0, .8); overflow: hidden; animation: dockIn .3s cubic-bezier(.16, 1, .3, 1); }
.chat-dock.min { height: auto; }
.chat-dock.min .cd-msgs, .chat-dock.min .cd-form { display: none; }
@keyframes dockIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.cd-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--border); background: rgba(139, 92, 246, .1); cursor: default; }
.cd-head > b { flex: 1; font-family: "Space Grotesk"; }
.cd-head a { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; }
.cd-x, .cd-back { width: 28px; height: 28px; border-radius: 8px; color: var(--muted); flex: none; font-size: 14px; }
.cd-back { font-size: 22px; line-height: 1; }
.cd-x:hover, .cd-back:hover { background: var(--surface-2); color: var(--text); }
.cd-pick { flex: 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.cd-pick > p { padding: 12px; }
.cd-f { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; text-align: left; }
.cd-f:hover { background: var(--surface-2); }
.cd-f span { flex: 1; font-weight: 500; }
.cd-msgs { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.cd-empty { margin: auto; }
.cd-day { align-self: center; font-size: 11px; color: var(--muted); padding: 4px 0; }
.cd-m { max-width: 78%; align-self: flex-start; padding: 8px 12px 6px; border-radius: 16px 16px 16px 4px; background: var(--surface-2); animation: msgIn .25s cubic-bezier(.16, 1, .3, 1); }
.cd-m.me { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--accent); }
.cd-m p { overflow-wrap: anywhere; white-space: pre-line; font-size: 14px; }
.cd-m small { display: block; text-align: right; font-size: 10px; opacity: .6; margin-top: 2px; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.cd-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.cd-form input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 99px; background: #1a1a24; border: 1px solid var(--border); color: var(--text); font: inherit; font-size: 14px; outline: none; }
.cd-form input:focus { border-color: rgba(139, 92, 246, .6); }
.cd-form button { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; flex: none; }
.chat-notifs { position: fixed; right: 22px; bottom: 90px; z-index: 62; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.chat-notif { pointer-events: auto; display: flex; gap: 10px; align-items: center; width: 300px; padding: 12px 14px; border-radius: 16px; text-align: left; color: var(--text);
  background: #1f1d2b; border: 1px solid rgba(139, 92, 246, .55); box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .7); animation: notifIn .35s cubic-bezier(.2, 1.4, .4, 1); transition: opacity .35s, transform .35s; }
.chat-notif.out { opacity: 0; transform: translateX(30px); }
.chat-notif div { min-width: 0; } .chat-notif p { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
@keyframes notifIn { from { opacity: 0; transform: translateX(40px); } }
.chat-dock:not([hidden]) ~ .chat-notifs { bottom: calc(min(500px, 100vh - 140px) + 100px); }
@media (max-width: 640px) { .chat-fab { right: 14px; bottom: 14px; } .chat-dock { right: 16px; bottom: 80px; } .chat-notifs { right: 16px; } .chat-notif { width: calc(100vw - 32px); } }

/* Admin : modération, collection, objets, boutique, annonces */
.mpx-quick button.red, .mp-cr button.red { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .4); color: #fca5a5; }
.mp-banned { margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: rgba(239, 68, 68, .18); color: #fca5a5; font-size: 12px; }
.mp-coll { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; }
.mp-cr { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; font-size: 13px; }
.mp-cr:hover { background: var(--surface-2); }
.mp-cr img { width: 28px; height: 28px; image-rendering: pixelated; }
.mp-cr > span:first-of-type { flex: 1; min-width: 0; }
.mp-cn { color: var(--muted); white-space: nowrap; }
.mp-cr button { padding: 5px 9px; border-radius: 8px; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.mp-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.mp-items label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.mp-msgs { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; margin-top: 10px; }
.mp-mm { position: relative; padding: 8px 40px 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.mp-mm b { display: block; } .mp-mm p { overflow-wrap: anywhere; white-space: pre-line; }
.mp-mm button { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px; }
.mp-mm button:hover { background: rgba(239, 68, 68, .2); }
#mpann-list { display: flex; flex-direction: column; gap: 6px; }
.mpann-opts { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0; font-size: 14px; }
.mpann-opts input { accent-color: var(--accent); margin-right: 6px; }
#mpann-body { resize: vertical; font-size: 15px; }
.mp-shop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
#mpshop-list td { padding: 8px 10px; border-top: 1px solid var(--border); vertical-align: middle; }
#mpshop-list .mpx-in { width: 100px; }
#mpshop-list tr.off { opacity: .5; }
.mpshop-ic { width: 60px; } .mpshop-ic .pix, .mpshop-ic img { max-width: 44px; max-height: 44px; width: auto !important; height: auto !important; image-rendering: pixelated; }
.mpshop-ic .si-banner { max-width: 56px; border-radius: 4px; }
.mpshop-sw input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Prix modifié par l'admin */
.si-deal { position: absolute; top: 12px; left: 12px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: #16a34a; color: #fff; box-shadow: 0 0 18px -2px rgba(34, 197, 94, .8); animation: annPulse 1.4s ease-in-out infinite; }
.si-deal.up { background: #dc2626; box-shadow: 0 0 18px -2px rgba(239, 68, 68, .8); }
.si-btn s { opacity: .6; font-weight: 500; margin-right: 2px; }
.price-notif.down { border-color: rgba(34, 197, 94, .6); } .price-notif.up { border-color: rgba(249, 115, 22, .6); }
.price-notif p b { color: var(--text); } .price-notif p s { opacity: .7; }
.pn-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; }
.pn-ic .pix, .pn-ic img { max-width: 40px; max-height: 40px; width: auto !important; height: auto !important; image-rendering: pixelated; }
.mpshop-tmp { color: #fdba74; }

/* Identifiant + voile sombre sur la bannière pour bien lire le pseudo */
.prof-num { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); opacity: .55; letter-spacing: .04em; vertical-align: middle; }
.prof-banner { position: relative; }
.prof-banner:not(.none)::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .18); pointer-events: none; }
.pe-pseudo:disabled { opacity: .5; cursor: not-allowed; }

/* Bannières claires : le bas fonce en dégradé et le pseudo a une ombre, pour toujours bien le lire */
.prof-banner:not(.none)::after { background: linear-gradient(to bottom, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .15) 45%, rgba(8, 6, 14, .72) 100%); }
.prof-id h2 { text-shadow: 0 2px 4px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .6); }
.prof-num { text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }

/* (Le nom « Takoras » n'a plus de typo spéciale : même police que les autres jetons) */

/* ===================== Combat ===================== */
/* Menu : deck de 3 jetons, debug, capacités */
.cb-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0 18px; }
.cb-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px 16px; border-radius: 20px; text-align: center; color: var(--text);
  background: radial-gradient(180px 120px at 50% 20%, rgba(var(--g, 139, 92, 246), .18), transparent 70%), var(--surface); border: 1px solid var(--border); transition: transform .2s, border-color .2s; }
.cb-slot:hover { transform: translateY(-4px); border-color: rgba(var(--g, 139, 92, 246), .6); }
.cb-slot.empty { justify-content: center; min-height: 300px; border-style: dashed; color: var(--muted); }
.cb-slot.empty span { font-size: 44px; line-height: 1; }
.cb-coin { height: 104px; display: grid; place-items: center; }
.cb-slot > b { font-family: "Space Grotesk"; font-size: 20px; }
.cb-stats { display: flex; gap: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; justify-content: center; }
.cb-abil { width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(var(--g, 139, 92, 246), .25); }
.cb-abil b { font-size: 14px; } .cb-abil p { font-size: 13px; color: var(--muted); margin: 4px 0 2px; }
.cb-go { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 26px; }
.cb-fight { font-size: 17px; padding: 16px 30px; }
.cb-debug { margin-bottom: 26px; }
.cb-dbg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.cb-dbg-row > span { width: 110px; color: var(--muted); }
.cb-dbg-row select { width: auto; flex: 1; min-width: 150px; }
.cb-codex { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin: 12px 0 30px; }
.cb-cx { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.cb-cx img { width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(var(--g), .6)); }
.cb-cx b { font-size: 14px; } .cb-cx p { font-size: 13px; }
@media (max-width: 760px) { .cb-slots { grid-template-columns: 1fr; } .cb-slot.empty { min-height: 120px; } }

.cb-coin img { width: 104px; height: 104px; image-rendering: pixelated; filter: drop-shadow(0 0 14px rgba(var(--g), .6)); }
.cb-stats { gap: 6px; }
.cb-stats span { display: flex; flex-direction: column; align-items: center; min-width: 54px; padding: 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, .04); color: var(--text); font-weight: 600; }
.cb-stats i { font-style: normal; font-size: 10px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ===================== Arène plein écran ===================== */
.battle { position: fixed; inset: 0; z-index: 70; overflow: hidden; background: #07060c; opacity: 0; transition: opacity .4s; user-select: none; --ease: cubic-bezier(.2, .9, .3, 1); }
.battle.on { opacity: 1; }
.bt-bg { position: absolute; inset: 0; pointer-events: none; transition: background 1.2s;
  background:
    radial-gradient(70% 45% at 50% 105%, rgba(139, 92, 246, .28), transparent 70%),
    radial-gradient(60% 40% at 50% -5%, rgba(148, 163, 184, .12), transparent 70%),
    linear-gradient(180deg, #0b0a14, #07060c 50%, #0b0916); }
.bt-bg::after { content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent); }
.battle.their .bt-bg { background:
    radial-gradient(70% 45% at 50% 105%, rgba(139, 92, 246, .14), transparent 70%),
    radial-gradient(60% 45% at 50% -5%, rgba(239, 68, 68, .25), transparent 70%),
    linear-gradient(180deg, #120a0e, #07060c 50%, #0b0916); }
.bt-stage { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto 1fr; padding: 18px 24px 120px; }
.bt-top { display: flex; align-items: center; gap: 16px; }
.bt-ghost { width: 42px; height: 42px; border-radius: 12px; color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--border); font-size: 16px; }
.bt-ghost:hover { color: var(--text); }
.bt-turn { display: flex; flex-direction: column; line-height: 1.15; }
.bt-turn b { font-family: "Space Grotesk"; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.bt-turn span { font-family: "Space Grotesk"; font-weight: 700; font-size: 18px; }
.bt-turn .good { color: #c4b5fd; } .bt-turn .bad { color: #fca5a5; }
.bt-step { margin-left: auto; margin-right: 300px; font-size: 15px; color: var(--muted); }

.bt-row { display: flex; justify-content: center; align-items: center; gap: clamp(30px, 8vw, 120px); }
.bt-row.foes { align-items: flex-start; padding-top: 8px; }
.bt-row.mine { align-items: flex-end; }
.bt-mid { position: relative; display: grid; place-items: center; min-height: 40px; }

/* Un jeton : sans cadre, il flotte au-dessus d'une ombre lumineuse */
.bu { position: relative; display: flex; flex-direction: column; align-items: center; width: clamp(130px, 15vw, 190px); transition: opacity .4s, filter .5s; }
.bu-float { position: relative; animation: bob 3.2s ease-in-out infinite; animation-delay: calc(var(--d) * -1); transition: transform .3s var(--ease); }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.bu-img { display: block; width: clamp(110px, 12vw, 160px); height: clamp(110px, 12vw, 160px); image-rendering: pixelated; position: relative;
  filter: drop-shadow(0 0 14px rgba(var(--g), .55)); transition: filter .3s, transform .3s var(--ease); }
.bu-aura { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--g), .35), transparent 70%); opacity: .55; transition: opacity .3s, transform .3s; }
.bu-ground { width: 70%; height: 16px; margin-top: 4px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--g), .45), transparent); filter: blur(2px); animation: groundPulse 3.2s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes groundPulse { 50% { transform: scale(.85); opacity: .7; } }
.bu-info { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; margin-top: 6px; }
.bu-name { font-family: "Space Grotesk"; font-weight: 700; font-size: 16px; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.bu-hp { position: relative; width: 100%; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.bu-hp i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #22c55e, #86efac); transition: width .6s var(--ease); }
.foes .bu-hp i { background: linear-gradient(90deg, #ef4444, #fda4af); }
.bu-hp.low i { animation: lowHp .8s ease-in-out infinite; }
@keyframes lowHp { 50% { filter: brightness(1.6); } }
.bu-hp s { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #7dd3fc, #e0f2fe); transition: all .6s var(--ease); }
.bu-hp b { position: absolute; right: 0; top: -20px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bu-info .bu-hp { margin-top: 18px; }
.bu-hp b { left: 0; right: 0; text-align: center; text-shadow: 0 1px 4px #000; }
.bu-cd { display: flex; gap: 4px; height: 6px; }
.bu-cd i { width: 14px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.bu-cd i.on { background: rgb(var(--g)); box-shadow: 0 0 6px rgba(var(--g), .8); }
.bu-cd.ready i { animation: cdReady 1.6s ease-in-out infinite; }
@keyframes cdReady { 50% { opacity: .5; } }

/* Effets (pastilles pixel) sur le côté du jeton */
.bu-st { position: absolute; top: 10px; right: -14px; display: flex; flex-direction: column; gap: 5px; }
.st { position: relative; display: flex; align-items: center; gap: 3px; padding: 3px 6px 3px 4px; border-radius: 8px; background: rgba(13, 12, 20, .85); border: 1px solid rgba(255, 255, 255, .12); animation: stIn .35s var(--ease); }
.st .pix { width: 21px !important; height: 21px !important; }
.st b { font-size: 11px; font-weight: 700; }
@keyframes stIn { from { opacity: 0; transform: scale(.4); } }
.st:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; translate: 0 -50%; width: 200px; padding: 8px 10px; border-radius: 10px; font-size: 12px; line-height: 1.35;
  background: #1a1826; border: 1px solid var(--border); color: var(--text); z-index: 5; pointer-events: none; }

/* États */
.bu.can { cursor: pointer; }
.bu.can:hover .bu-float { transform: translateY(-6px) scale(1.04); }
.bu.sel .bu-float { transform: translateY(-14px) scale(1.12); }
.bu.sel .bu-aura { opacity: 1; transform: scale(1.15); animation: auraPulse 1.4s ease-in-out infinite; }
@keyframes auraPulse { 50% { opacity: .6; transform: scale(1.3); } }
.bu.sel .bu-img { filter: drop-shadow(0 0 22px rgba(var(--g), .95)) brightness(1.1); }
.bu.tgt .bu-float::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, #f87171 0 8%, transparent 8% 25%, #f87171 25% 33%, transparent 33% 50%, #f87171 50% 58%, transparent 58% 75%, #f87171 75% 83%, transparent 83%);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 90%, #000 100%, transparent 101%); mask: radial-gradient(closest-side, transparent 88%, #000 90%, #000 100%, transparent 101%);
  animation: aim 3s linear infinite; }
@keyframes aim { to { rotate: 360deg; } }
.foes .bu.can:not(.tgt):hover .bu-img { filter: drop-shadow(0 0 18px rgba(248, 113, 113, .8)); }
.bu.look .bu-name { color: #fff; text-decoration: underline; text-decoration-color: rgba(var(--g), .8); text-underline-offset: 4px; }
.bu.frozen .bu-img { filter: drop-shadow(0 0 16px rgba(125, 211, 252, .9)) grayscale(1) sepia(1) hue-rotate(165deg) saturate(2.2) brightness(1.15); }
.bu.frozen .bu-float { animation-play-state: paused; }
.bu.ko { opacity: .35; filter: grayscale(1); }
.bu.ko .bu-float { animation: none; transform: translateY(18px) rotate(-12deg) scale(.85); }
.bu.ko .bu-ground, .bu.ko .bu-cd { opacity: 0; }

/* Chiffres et textes qui montent */
.bu-num { position: absolute; top: 18%; translate: -50% 0; font-family: "Space Grotesk"; font-weight: 800; font-size: 30px; pointer-events: none; z-index: 3; white-space: nowrap;
  animation: numUp 1.3s var(--ease) forwards; text-shadow: 0 3px 0 rgba(0, 0, 0, .6), 0 0 18px rgba(0, 0, 0, .7); }
.bu-num.hit { color: #fecaca; } .bu-num.heal { color: #86efac; } .bu-num.shield { color: #7dd3fc; font-size: 22px; } .bu-num.dodge, .bu-num.miss { color: #cbd5e1; font-size: 22px; letter-spacing: .1em; }
.bu-num.crit { color: #fde047; font-size: 46px; animation-name: numCrit; }
.bu-num.crit-tag { top: -6%; color: #fff; font-size: 18px; letter-spacing: .2em; padding: 4px 10px; border-radius: 8px; background: linear-gradient(90deg, #f59e0b, #ef4444); text-shadow: none; animation-name: numCrit; }
@keyframes numUp { 0% { opacity: 0; transform: translateY(14px) scale(.5); } 18% { opacity: 1; transform: translateY(0) scale(1.15); } 30% { transform: scale(1); } 100% { opacity: 0; transform: translateY(-60px); } }
@keyframes numCrit { 0% { opacity: 0; transform: scale(2.4) rotate(-8deg); } 15% { opacity: 1; transform: scale(1) rotate(-4deg); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50px) rotate(-4deg); } }
.bu-callout { position: absolute; bottom: 100%; left: 50%; translate: -50% 0; padding: 6px 14px; border-radius: 99px; white-space: nowrap; z-index: 4; pointer-events: none;
  font-family: "Space Grotesk"; font-weight: 700; font-size: 15px; background: rgba(var(--g), .25); border: 1px solid rgba(var(--g), .7); box-shadow: 0 0 30px -4px rgba(var(--g), .8);
  backdrop-filter: blur(6px); animation: callout 1.5s var(--ease) forwards; }
@keyframes callout { 0% { opacity: 0; transform: translateY(10px) scale(.7); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* Bandeau de tour au centre */
.bt-banner { font-family: "Space Grotesk"; font-weight: 800; font-size: clamp(28px, 4vw, 44px); letter-spacing: .04em; opacity: 0; pointer-events: none; white-space: nowrap; }
.bt-banner.on { animation: bannerSweep 1.5s var(--ease) forwards; }
.bt-banner.good { color: #ddd6fe; text-shadow: 0 0 30px rgba(139, 92, 246, .8); } .bt-banner.bad { color: #fecaca; text-shadow: 0 0 30px rgba(239, 68, 68, .8); }
@keyframes bannerSweep { 0% { opacity: 0; transform: translateX(-60px); letter-spacing: .4em; } 25% { opacity: 1; transform: none; letter-spacing: .04em; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(60px); } }

/* Panneau d'infos (à gauche) */
.bt-ins { position: absolute; left: 24px; top: 50%; translate: -20px -50%; width: 270px; padding: 16px; border-radius: 20px; display: flex; flex-direction: column; gap: 12px; z-index: 2;
  background: rgba(16, 14, 24, .82); border: 1px solid rgba(var(--g, 139, 92, 246), .35); backdrop-filter: blur(14px); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .9);
  opacity: 0; pointer-events: none; transition: opacity .25s, translate .3s var(--ease), border-color .3s; }
.bt-ins.on { opacity: 1; translate: 0 -50%; pointer-events: auto; }
.bi-head { display: flex; gap: 12px; align-items: center; }
.bi-head img { width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(var(--g), .6)); }
.bi-head div { display: flex; flex-direction: column; }
.bi-head b { font-family: "Space Grotesk"; font-size: 20px; }
.bi-head small { font-size: 12px; } .bi-head .good { color: #a78bfa; } .bi-head .bad { color: #f87171; }
.bi-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bi-stats div { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.bi-stats span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.bi-stats b { font-family: "Space Grotesk"; font-size: 16px; } .bi-stats small { font-size: 10px; color: var(--muted); }
.bi-k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.bi-k em { font-style: normal; color: #fca5a5; text-transform: none; letter-spacing: 0; } .bi-k em.ok { color: #86efac; }
.bi-abil { padding: 10px 12px; border-radius: 12px; background: rgba(var(--g), .1); border: 1px solid rgba(var(--g), .3); }
.bi-abil b { display: block; margin-top: 4px; } .bi-abil p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.bi-fx { display: flex; flex-direction: column; gap: 6px; }
.bi-fx > p { font-size: 13px; }
.bi-st { display: flex; gap: 8px; align-items: center; }
.bi-st .pix { width: 21px !important; height: 21px !important; flex: none; }
.bi-st b { font-size: 13px; } .bi-st p { font-size: 12px; color: var(--muted); }

/* Journal (à droite, discret) */
.bt-log { position: absolute; right: 24px; top: 80px; width: 260px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.bl { padding: 6px 10px; border-radius: 10px; font-size: 12px; background: rgba(255, 255, 255, .04); color: var(--muted); animation: msgIn .3s ease-out; }
.bl:nth-child(n+4) { opacity: .45; }
.bl.good { color: #bbf7d0; } .bl.bad { color: #fecaca; } .bl.abil { color: #ddd6fe; } .bl.ko { color: #fca5a5; font-weight: 700; } .bl.curse { color: #f0abfc; } .bl.sys { color: var(--text); } .bl.miss { color: #94a3b8; }

/* Barre d'action */
.bt-actions { position: absolute; left: 50%; bottom: 22px; translate: -50% 160%; display: flex; gap: 12px; align-items: stretch; width: min(640px, calc(100% - 32px)); z-index: 3;
  transition: translate .45s var(--ease); }
.bt-actions.on { translate: -50% 0; }
.bt-abil { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 44px 10px 12px; border-radius: 18px; text-align: left; color: var(--text);
  background: rgba(20, 18, 30, .9); border: 1px solid rgba(var(--g), .35); backdrop-filter: blur(12px); transition: all .25s var(--ease); }
.bt-abil img { width: 46px; height: 46px; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(var(--g), .7)); }
.bt-abil b { display: flex; gap: 8px; align-items: baseline; font-size: 15px; }
.bt-abil em { font-style: normal; font-size: 11px; font-weight: 600; color: #86efac; text-transform: uppercase; letter-spacing: .06em; }
.bt-abil small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.bt-abil:hover:not(:disabled) { border-color: rgba(var(--g), .8); transform: translateY(-2px); }
.bt-abil.on { background: rgba(var(--g), .2); border-color: rgb(var(--g)); box-shadow: 0 0 34px -6px rgba(var(--g), .9); }
.bt-abil:disabled { opacity: .5; cursor: not-allowed; } .bt-abil:disabled em { color: #fca5a5; }
.bt-check { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; border-radius: 6px; border: 2px solid rgba(var(--g), .7); }
.bt-abil.on .bt-check { background: rgb(var(--g)); box-shadow: inset 0 0 0 3px rgba(20, 18, 30, .9); }
.bt-go { flex: none; padding: 0 34px; border-radius: 18px; font-family: "Space Grotesk"; font-weight: 800; font-size: 20px; letter-spacing: .04em; color: #fff;
  background: linear-gradient(180deg, #f97316, #dc2626); box-shadow: 0 14px 40px -10px rgba(239, 68, 68, .9); transition: transform .15s, filter .15s; }
.bt-go:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.1); }
.bt-go:disabled { background: rgba(255, 255, 255, .08); box-shadow: none; color: var(--muted); cursor: not-allowed; }

.bt-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; image-rendering: pixelated; }
.bt-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 5; }
.battle.slowmo .bt-stage { filter: saturate(1.3) contrast(1.05); }

/* Fin */
.bt-end { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(6, 5, 12, .7); backdrop-filter: blur(8px); animation: fadeIn .4s; }
@keyframes fadeIn { from { opacity: 0; } }
.bt-end-card { padding: 36px 44px; border-radius: 28px; text-align: center; background: #13111c; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 20px; align-items: center; animation: dockIn .5s cubic-bezier(.2, 1.4, .4, 1); }
.bt-end-card h2 { font-family: "Space Grotesk"; font-size: 52px; }
.bt-end-card.win { border-color: rgba(134, 239, 172, .5); box-shadow: 0 30px 120px -20px rgba(34, 197, 94, .5); } .bt-end-card.win h2 { color: #bbf7d0; }
.bt-end-card.lose { border-color: rgba(252, 165, 165, .35); } .bt-end-card.lose h2 { color: #fecaca; }
.bt-end-row { display: flex; gap: 18px; }
.bt-end-row div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.bt-end-row img { width: 64px; height: 64px; image-rendering: pixelated; } .bt-end-row .ko { opacity: .35; filter: grayscale(1); }
.bt-end-btns { display: flex; gap: 10px; }

@media (max-width: 1100px) {
  .bt-ins { left: 50%; top: auto; bottom: 110px; translate: -50% 20px; width: min(360px, calc(100% - 32px)); }
  .bt-ins.on { translate: -50% 0; }
  .bt-ins { z-index: 5; }
  .bt-log { display: none; }
  .bt-step { margin-right: 0; }
}
@media (max-width: 640px) {
  .bt-stage { padding: 12px 12px 110px; }
  .bt-row { gap: 6px; } .bu { width: 31vw; }
  .bu-img { width: 22vw; height: 22vw; } .bu-name { font-size: 12px; }
  .bu-st { right: -4px; } .st .pix { width: 15px !important; height: 15px !important; }
  .bt-step { display: none; }
  .bt-abil small { display: none; } .bt-go { padding: 0 20px; font-size: 17px; }
}
.bu-hp { overflow: visible; }
.bu-hp s { border-radius: 0 99px 99px 0; }

/* Doodle aussi en combat : les filtres d'état (choisi, gelé, visé) passent par --df pour se cumuler avec la déformation */
.bu-img { --df: drop-shadow(0 0 14px rgba(var(--g), .55)); }
.bu.sel .bu-img { --df: drop-shadow(0 0 22px rgba(var(--g), .95)) brightness(1.1); }
.foes .bu.can:not(.tgt):hover .bu-img { --df: drop-shadow(0 0 18px rgba(248, 113, 113, .8)); }
.bu.frozen .bu-img { --df: drop-shadow(0 0 16px rgba(125, 211, 252, .9)) grayscale(1) sepia(1) hue-rotate(165deg) saturate(2.2) brightness(1.15); }
.cb-coin img { --df: drop-shadow(0 0 14px rgba(var(--g), .6)); }
.bi-head img, .bt-abil img { --df: drop-shadow(0 0 10px rgba(var(--g), .6)); }
.bt-end-row img, .cb-cx img { --df: saturate(1); }
.bu-img, .cb-coin img, .bi-head img, .bt-abil img, .bt-end-row img { filter: var(--df); animation: doodle .9s steps(1) infinite; }
html.reduce-fx .bu-img, html.reduce-fx .cb-coin img, html.reduce-fx .bi-head img, html.reduce-fx .bt-abil img, html.reduce-fx .bt-end-row img { animation: none; }

/* Calque des particules des animations de listes */
.mo-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 300; image-rendering: pixelated; }
.mo-ghost { transition: none !important; }

/* Code promo (boutique) */
.redeem { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 30px 0 10px; padding: 20px 22px; border-radius: 20px;
  background: radial-gradient(300px 140px at 0% 0%, rgba(249, 115, 22, .14), transparent 70%), var(--surface); border: 1px dashed rgba(249, 115, 22, .45); }
.redeem .shop-h { margin: 0 0 4px; }
.redeem-form { display: flex; gap: 10px; flex: 1; max-width: 460px; min-width: 260px; }
.redeem-form input { flex: 1; padding: 12px 16px; border-radius: 99px; font-size: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.redeem-form .btn { padding: 12px 22px; }
/* Codes (admin) */
.mpcode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.mpcode-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.mpcode-grid .mpx-row { margin: 0; }
.mpcode-items { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mpcode-it { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 99px; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.mpcode-it button { width: 20px; height: 20px; border-radius: 50%; font-size: 10px; color: var(--muted); }
.mpcode-it button:hover { background: rgba(239, 68, 68, .25); color: #fca5a5; }
.mpx-quick .mpcode-save { background: var(--accent); border-color: transparent; font-weight: 600; }
#mpcode-list td { padding: 8px 10px; border-top: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
#mpcode-list tr.off { opacity: .5; }
.mpcode-code { font-family: ui-monospace, monospace; letter-spacing: .06em; }
.mpcode-btns { white-space: nowrap; } .mpcode-btns button { width: 30px; height: 30px; border-radius: 8px; } .mpcode-btns button:hover { background: var(--surface-2); }

/* ===================== Téléphone : barre d'onglets + menu « Plus » ===================== */
.tabbar, .sheet { display: none; }
@media (max-width: 760px) {
  :root { --tabh: calc(64px + env(safe-area-inset-bottom)); }
  body { padding-bottom: var(--tabh); }
  /* Barre du haut allégée : logo, pièces, cloche, compte */
  .nav-in { height: 58px !important; gap: 8px !important; padding-top: env(safe-area-inset-top); }
  .nav .links, .nav #open-settings, .nav #mute, .nav #open-admin { display: none !important; }
  .logo { font-size: 0 !important; gap: 0 !important; margin-right: auto; }
  .logo img { width: 34px; height: 34px; }
  .nav-in .mute:not([hidden]) ~ .mute, .nav-in #mute, .nav-in .bal, .nav-in .acc-btn { margin-left: 0 !important; }
  .nav-in .mute { margin-left: 0; width: 36px; height: 36px; }
  .nav-in .bal { height: 36px; padding: 0 12px; font-size: 14px; }
  .acc-btn { height: 36px; padding: 0 14px; font-size: 13px; }
  .acc-btn.in { padding: 0 4px; width: 36px; justify-content: center; }
  .acc-btn .acc-name { display: none; }
  .ann-bar { top: 58px !important; }

  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 47; height: var(--tabh); padding: 6px 6px env(safe-area-inset-bottom);
    background: rgba(13, 13, 18, .88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--border); }
  .tabbar > * { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 14px;
    color: var(--muted); font-size: 11px; font-weight: 600; -webkit-tap-highlight-color: transparent; transition: color .2s; }
  .tabbar > * svg { transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
  .tabbar > .on { color: #fff; }
  .tabbar > .on svg { transform: translateY(-2px) scale(1.08); color: #c4b5fd; filter: drop-shadow(0 0 8px rgba(139, 92, 246, .8)); }
  .tabbar > .on::before { content: ""; position: absolute; top: -6px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #8b5cf6, #f97316); }
  .tabbar > *:active svg { transform: scale(.9); }
  .tabbar .nbadge { position: absolute; top: 2px; left: calc(50% + 6px); }

  .sheet { display: block; position: fixed; inset: 0; z-index: 46; background: rgba(0, 0, 0, 0); transition: background .28s; }
  .sheet.on { background: rgba(0, 0, 0, .55); }
  .sh-card { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(var(--tabh) + 12px); border-radius: 22px 22px 0 0; background: #15131f; border-top: 1px solid var(--border);
    transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .9, .3, 1); }
  .sheet.on .sh-card { transform: none; }
  .sh-grab { width: 40px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); margin: 0 auto 14px; }
  .sh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .sh-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px; border-radius: 16px; font-size: 12px; font-weight: 600; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); }
  .sh-tile svg { color: #c4b5fd; }
  .sh-tile:active { transform: scale(.96); }
  .sh-tile .nbadge { position: absolute; top: 8px; right: 10px; }

  /* Tout ce qui est fixé en bas remonte au-dessus de la barre d'onglets */
  .toast { bottom: calc(var(--tabh) + 16px) !important; max-width: calc(100vw - 32px); }
  .sell-bar { bottom: calc(var(--tabh) + 10px) !important; }
  .chat-fab { bottom: calc(var(--tabh) + 14px) !important; right: 14px !important; width: 50px; height: 50px; }
  .chat-dock { left: 8px !important; right: 8px !important; width: auto !important; bottom: calc(var(--tabh) + 8px) !important; height: min(560px, calc(100dvh - var(--tabh) - 80px)) !important; }
  .chat-notifs { bottom: calc(var(--tabh) + 74px) !important; }
  .chat-dock:not([hidden]) ~ .chat-notifs { bottom: calc(100dvh - 140px) !important; }
}

/* ===================== Téléphone : chaque page ===================== */
@media (max-width: 760px) {
  .wrap { padding-left: 14px; padding-right: 14px; }
  .page { padding-top: 18px; }
  .page-head { flex-wrap: nowrap; align-items: flex-end; margin-bottom: 14px; }
  .page-title { font-size: 30px !important; }
  .page-head .btn { padding: 10px 16px; font-size: 14px; flex: none; }

  /* Rangées de pastilles : une seule ligne qui défile au doigt */
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: -14px; margin-right: -14px; padding: 2px 14px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; padding: 8px 14px; font-size: 13px; }

  /* Accueil */
  .stage { min-height: 0; padding-top: 14px; padding-bottom: 10px; gap: 18px; }
  .hero-coin { --s: 168px !important; }
  .live { overflow: hidden; }
  .board { padding-top: 40px; }
  .podium { gap: 8px; }

  /* Inventaire */
  .inv-tools { gap: 10px; margin-bottom: 14px; }
  .inv-tools .chips { width: calc(100% + 28px); }
  .inv-right { width: 100%; }
  .inv-right .inv-search { flex: 1; width: auto !important; }
  .inv-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .ic { padding: 12px 6px 10px !important; border-radius: 14px; }
  .ic img { width: 64px !important; height: 64px !important; }
  .ic b { font-size: 13px !important; } .ic small { font-size: 11px !important; }
  .ic-n { font-size: 11px; } .ic-step button { width: 26px; height: 26px; }
  /* Objets : petites cartes en ligne qui défilent */
  .items-row { display: flex !important; overflow-x: auto; gap: 10px; margin: 0 -14px 20px; padding: 2px 14px; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .items-row::-webkit-scrollbar { display: none; }
  .it-card { flex: none; width: 78%; display: grid !important; grid-template-columns: 64px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; text-align: left !important; padding: 12px !important; scroll-snap-align: start; }
  .it-card .si-icon { grid-row: 1 / 4; height: 64px !important; margin: 0; }
  .it-card .si-icon img { max-width: 56px; max-height: 56px; width: auto !important; height: auto !important; }
  .it-card b { font-size: 14px; } .it-card p { font-size: 12px; margin: 2px 0 6px; }
  .it-card .btn { justify-self: start; padding: 6px 16px; }
  .sell-bar { padding: 10px 12px; gap: 8px; }
  .sb-btns { width: 100%; display: grid !important; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 6px; }
  .sb-btns .btn { padding: 8px 4px; font-size: 12px; }

  /* Boutique */
  .shop-right { gap: 8px; }
  .shop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .si { padding: 14px 10px 12px !important; border-radius: 16px; }
  .si .si-icon { height: 64px !important; }
  .si b { font-size: 14px !important; } .si p { font-size: 12px !important; line-height: 1.35; }
  .si-stock { top: 8px !important; right: 8px !important; font-size: 10px !important; padding: 3px 7px !important; }
  .si-deal { top: 8px !important; left: 8px !important; font-size: 10px !important; }
  .si-btn { padding: 9px 6px !important; font-size: 12px !important; }
  .shop-h { font-size: 17px; }
  .redeem { padding: 16px; }
  .redeem-form { min-width: 0; max-width: none; width: 100%; }
  .redeem-form input { min-width: 0; }

  /* Profil */
  .prof-banner { border-radius: 16px; height: 130px !important; }
  .prof-head { margin: -40px 0 14px 10px; gap: 12px; align-items: flex-end; flex-wrap: nowrap; }
  .prof-pp .pp, .prof-pp .av { width: 76px !important; height: 76px !important; font-size: 30px !important; border-radius: 20px; }
  .prof-id { min-width: 0; } .prof-id h2 { font-size: 24px !important; overflow-wrap: anywhere; }
  .prof-id p { font-size: 14px !important; }
  .prof-head > .btn, .prof-fr { position: absolute; top: 46px; right: 0; }
  .prof-head > .btn, .prof-fr .btn { padding: 8px 12px; font-size: 13px; }
  .prof-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .prof-stats div { padding: 12px; }
  .showcase { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .sc { padding: 8px 4px !important; border-radius: 12px; } .sc img { width: 44px !important; height: 44px !important; }
  .sc b { font-size: 10px !important; } .sc small { font-size: 9px !important; }
  .pv-row { font-size: 14px; }

  /* Amis */
  .fr-add { flex-direction: row !important; }
  .fr-add .btn { padding: 12px 14px; font-size: 13px; }
  .fr { padding: 10px 12px; } .fr-act .btn { padding: 8px 10px; font-size: 12px; }

  /* Combat (menu) */
  .cb-slots { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .cb-slot { padding: 12px 6px 10px; border-radius: 14px; }
  .cb-slot.empty { min-height: 150px !important; }
  .cb-coin { height: 64px; } .cb-coin img { width: 60px !important; height: 60px !important; }
  .cb-slot > b { font-size: 14px; } .cb-stats { display: none; }
  .cb-abil { padding: 6px; } .cb-abil b { font-size: 11px; } .cb-abil p, .cb-abil small { display: none; }
  .cb-go .btn { flex: 1; } .cb-dbg-row > span { width: 100%; }

  /* Fenêtres : elles montent du bas comme sur une appli */
  .modal, .settings { place-items: end stretch !important; padding: 0 !important; }
  .modal-card, .set-card { width: 100% !important; max-height: 90dvh !important; border-radius: 22px 22px 0 0 !important; padding: 22px 16px calc(18px + env(safe-area-inset-bottom)) !important;
    transform: translateY(40px); transition: transform .3s cubic-bezier(.2, .9, .3, 1); }
  .modal-card::before, .set-card::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); margin: -10px auto 12px; }
  .jm-card { padding-top: 22px !important; gap: 14px !important; justify-content: center; }
  .jm-coin { width: 160px !important; height: 160px !important; } .jm-coin img { width: 140px !important; height: 140px !important; }
  .jm-info { min-width: 0 !important; width: 100%; } .jm-info h2 { font-size: 28px !important; }
  .jm-actions { display: grid !important; grid-template-columns: 1fr; gap: 8px; } .jm-actions .btn { width: 100%; }
  .pk-list { grid-template-columns: repeat(3, 1fr) !important; max-height: 55dvh; }
  .info-table { overflow-x: auto; } .info-table table { font-size: 12px; min-width: 520px; }

  /* Ouverture */
  .op-main { --gap: 18px !important; flex-direction: column; }
  .op-info { width: min(100%, 360px) !important; text-align: center; transform: translateY(20px) scale(.96); }
  .op-recap-grid { gap: 8px !important; }

  /* Panel admin : plein écran */
  .debug.admin2 { width: 100vw !important; height: 100dvh !important; border-radius: 0 !important; }
  .mp-head { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .mp-tabs { order: 3; width: 100%; overflow-x: auto; margin: 0; }
  .mp-tabs button { flex: none; padding: 7px 12px; }
  .mp-body { padding: 12px; }
  .mp-tab[data-tab="players"]:not([hidden]) { grid-template-columns: 1fr !important; height: auto !important; }
  .mp-table { max-height: 45dvh; } .mp-mini { grid-template-columns: repeat(2, 1fr) !important; }

  /* Annonces */
  .annf-card { padding: 28px 18px 20px; }
}
@media (hover: none) {
  .ic:hover, .si:hover, .cb-slot:hover, .fr:hover { transform: none; }
}
@media (max-width: 760px) { .items-row { padding: 2px 14px !important; scroll-padding: 0 14px; } .ic small { white-space: nowrap; font-size: 10px !important; } }
@media (max-width: 760px) {
  .shop-bal { display: none !important; }
  .page-head:has(.shop-right) { flex-wrap: wrap; }
  .shop-right .btn { padding: 8px 12px; font-size: 12px; }
  .fx-row .fx-chip { font-size: 12px; padding: 6px 10px; }
}
@media (max-width: 760px) {
  /* bouton « Modifier » / « Ajouter en ami » posé en haut à droite de la bannière */
  .prof-head > .btn, .prof-fr { top: -76px !important; right: 10px !important; }
  .prof-head > .btn, .prof-fr .btn { background: rgba(13, 13, 18, .7); backdrop-filter: blur(8px); }
  .prof-fr .btn.primary { background: var(--accent); }
  .showcase { gap: 5px !important; }
  .sc { min-width: 0; overflow: hidden; }
  .sc b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
@media (max-width: 760px) {
  html, body { overflow-x: clip; }
  .fr-list { grid-template-columns: 1fr !important; }
  .fr { min-width: 0; gap: 10px; }
  .fr .av { width: 40px !important; height: 40px !important; }
  .fr-act { flex: none; }
  .fr-act .btn.primary { padding: 8px 12px; }
}
@media (max-width: 760px) {
  /* iPhone : en dessous de 16px, Safari zoome sur le champ quand on tape */
  input, select, textarea, .mpx-in, .cd-form input { font-size: 16px !important; }
  button, a { -webkit-tap-highlight-color: transparent; }
}
/* Pendant une ouverture ou un combat : pas de bulle de chat ni de barre d'onglets par-dessus */
html.lock .chat-fab, html.lock .tabbar { display: none !important; }
@media (max-width: 760px) {
  .cb-go { flex-direction: column; align-items: stretch; gap: 8px; }
  .cb-go .btn { width: 100%; padding: 14px; font-size: 15px; }
  .cb-dbg-row select { min-width: 0; flex: 1 1 30%; font-size: 13px !important; }
}
@media (max-width: 640px) {
  .bt-stage { padding-top: calc(12px + env(safe-area-inset-top)) !important; padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
  .bt-row.foes { padding-top: 22px; }
  .bt-actions { bottom: calc(14px + env(safe-area-inset-bottom)) !important; }
  .bt-abil { padding: 8px 34px 8px 8px !important; gap: 8px; }
  .bt-abil img { width: 36px; height: 36px; }
  .bt-abil b { font-size: 13px; flex-direction: column; gap: 0; }
  .bt-check { right: 10px; width: 18px; height: 18px; }
  .bt-ins { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 760px) {
  .jm-card { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; }
  .modal-card::before, .set-card::before { flex: none; align-self: center; margin: -10px auto 4px !important; }
  .jm-coin { align-self: center; }
  .jm-info { align-items: stretch; }
  .jm-close { top: 12px !important; right: 12px !important; }
}

/* Fenêtre de confirmation du site (remplace confirm() du navigateur) */
.askbox { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.askbox.on { opacity: 1; }
.ask-card { width: min(420px, 100%); padding: 22px; border-radius: 20px; background: #16151f; border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; gap: 16px; transform: scale(.94); transition: transform .25s cubic-bezier(.2, 1.3, .4, 1); }
.askbox.on .ask-card { transform: none; }
.ask-card p { font-size: 16px; line-height: 1.45; }
.ask-card.danger { border-color: rgba(239, 68, 68, .45); }
.ask-card.danger .btn.primary { background: #dc2626; box-shadow: 0 10px 30px -10px rgba(239, 68, 68, .9); }
.ask-btns { display: flex; justify-content: flex-end; gap: 8px; }
.ask-btns .btn { padding: 10px 20px; }
@media (max-width: 760px) { .askbox { place-items: end stretch; padding: 0; } .ask-card { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); } .ask-btns .btn { flex: 1; } }

/* Combat en ligne : défis, chrono, bilan */
.bt-vs { margin-left: 12px; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.bt-timer { --p: 1; position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-family: "Space Grotesk"; font-size: 16px;
  background: conic-gradient(#a78bfa calc(var(--p) * 360deg), rgba(255, 255, 255, .08) 0); }
.bt-timer::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #0d0c14; z-index: -0; }
.bt-timer { isolation: isolate; } .bt-timer::before { z-index: -1; }
.bt-timer.hurry { background: conic-gradient(#f87171 calc(var(--p) * 360deg), rgba(255, 255, 255, .08) 0); color: #fecaca; animation: annPulse .8s ease-in-out infinite; }
.duel-box .ask-card { align-items: center; text-align: center; }
.duel-vs { font-size: 46px; animation: duelPop .6s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes duelPop { from { transform: scale(.3) rotate(-30deg); opacity: 0; } }
.duel-in { border-color: rgba(249, 115, 22, .5); box-shadow: 0 30px 100px -20px rgba(249, 115, 22, .5); }
.duel-bar { width: 100%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.duel-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8b5cf6, #f97316); }
.duel-box .ask-btns { width: 100%; justify-content: center; }
.cb-record { display: grid; grid-template-columns: auto auto; gap: 0 8px; align-items: baseline; padding: 10px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.cb-record b { font-family: "Space Grotesk"; font-size: 22px; text-align: right; } .cb-record span { font-size: 12px; color: var(--muted); }
.cb-record b:first-child { color: #86efac; } .cb-record b:nth-child(3) { color: #fca5a5; }
.cb-modes { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin: 6px 0 26px; }
.cb-mode { padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.cb-mode .shop-h { margin: 0; }
.cb-friends { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.cb-fr { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.cb-fr b { flex: 1; }
.cb-need { margin-top: -6px; margin-bottom: 14px; color: #fca5a5; }
@media (max-width: 760px) { .cb-modes { grid-template-columns: 1fr; } .bt-vs span { display: none; } .page-head:has(.cb-record) { flex-wrap: wrap; } }

/* Cinématique des jetons rares : plein écran au-dessus de l'ouverture, en gros pixels */
.cine { position: fixed; inset: 0; z-index: 95; background: #000; overflow: hidden; cursor: pointer; transition: opacity .6s; }
.cine.out { opacity: 0; pointer-events: none; }
.cine-cv { position: absolute; inset: -2%; width: 104%; height: 104%; image-rendering: pixelated; }
.cine-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.cine-skip { position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); translate: -50% 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45); opacity: 0; transition: opacity .4s; pointer-events: none; }
.cine-skip.on { opacity: 1; }

/* Jetons transparents (ex. Astra) : on ne voit jamais le dos en miroir à travers la face, ni l'inverse */
.op-coin .spin img.face, .op-coin .spin img.back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* Photos de profil en image (pixel art, GIF animé possible) */
.av.has-img { background: none !important; overflow: hidden; padding: 0; }
.av.has-img img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.pod .av { border-radius: 50%; }
.prof-pp .av.has-img { border-radius: 26px; }
.pod .av { width: 64px !important; height: 64px !important; } .pod.p1 .av { width: 84px !important; height: 84px !important; }
@media (max-width: 640px) { .pod .av, .pod.p1 .av { width: 48px !important; height: 48px !important; } }

/* Choix de la photo de profil */
.pe-pps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.pe-pp { position: relative; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; border: 2px solid var(--border); background: linear-gradient(135deg, #8b5cf6, #f97316); transition: transform .15s, border-color .15s; }
.pe-pp img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.pe-pp span { display: grid; place-items: center; height: 100%; font-family: "Space Grotesk"; font-weight: 700; font-size: 26px; color: #fff; }
.pe-pp:hover { transform: translateY(-2px); }
.pe-pp.on { border-color: #fff; box-shadow: 0 0 0 3px rgba(139, 92, 246, .7); }
.pe-pp.locked img { filter: grayscale(.8) brightness(.5); }
.pe-pp i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 20px; }
.si-pp { width: 76px; height: 76px; border-radius: 18px; image-rendering: pixelated; box-shadow: 0 8px 24px -8px rgba(var(--g), .8); }
/* Bouton « Annuler » des fenêtres : il ferme comme la croix mais reste à sa place */
.btn.jm-close { position: static !important; }

/* ===================== Variantes : Doré, Glitch, Prisme ===================== */
.vtag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; vertical-align: middle; line-height: 1.5; white-space: nowrap; -webkit-text-fill-color: currentColor; }
.vtag.v-gold { color: #3b2400; background: linear-gradient(135deg, #fef08a, #f59e0b 60%, #fde68a); box-shadow: 0 0 12px -2px rgba(250, 204, 21, .8); }
.vtag.v-celeste { color: #1e1b4b; background: linear-gradient(135deg, #ffffff, #e0e7ff 50%, #c7d2fe); box-shadow: 0 0 14px -2px rgba(224, 231, 255, .9); }
.vtag.v-ombre { color: #e9d5ff; background: #0b0614; border: 1px solid #a855f7; box-shadow: 0 0 12px -2px rgba(168, 85, 247, .9); }
@keyframes vPrismBg { to { background-position: 300% 0; } }

/* L'image du jeton prend l'effet de sa variante (en gardant l'effet doodle) */
img.v-gold, .opening.v-gold .op-coin .spin img.face, .opening.v-gold .op-coin .spin img.back { animation: vGold .9s steps(1) infinite !important; }
@keyframes vGold {
  0% { filter: url(#dd0) sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.12) drop-shadow(0 0 9px rgba(250, 204, 21, .85)); }
  33% { filter: url(#dd1) sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.12) drop-shadow(0 0 9px rgba(250, 204, 21, .85)); }
  66% { filter: url(#dd2) sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.12) drop-shadow(0 0 9px rgba(250, 204, 21, .85)); }
}
/* Céleste : nacre blanche, halo doux, scintille */
img.v-celeste, .opening.v-celeste .op-coin .spin img.face, .opening.v-celeste .op-coin .spin img.back { animation: vCeleste .9s steps(1) infinite !important; }
@keyframes vCeleste {
  0% { filter: url(#dd0) grayscale(.55) brightness(1.35) sepia(.15) hue-rotate(195deg) saturate(1.4) drop-shadow(0 0 7px #fff) drop-shadow(0 0 18px rgba(199, 210, 254, .85)); }
  33% { filter: url(#dd1) grayscale(.55) brightness(1.35) sepia(.15) hue-rotate(195deg) saturate(1.4) drop-shadow(0 0 7px #fff) drop-shadow(0 0 18px rgba(199, 210, 254, .85)); }
  66% { filter: url(#dd2) grayscale(.55) brightness(1.35) sepia(.15) hue-rotate(195deg) saturate(1.4) drop-shadow(0 0 7px #fff) drop-shadow(0 0 18px rgba(199, 210, 254, .85)); }
}
/* Ombre : jeton noir, contour violet qui pulse */
img.v-ombre, .opening.v-ombre .op-coin .spin img.face, .opening.v-ombre .op-coin .spin img.back { animation: vOmbre .9s steps(1) infinite !important; }
@keyframes vOmbre {
  0% { filter: url(#dd0) grayscale(.6) brightness(.55) sepia(.45) hue-rotate(225deg) saturate(1.7) contrast(1.3) drop-shadow(0 0 2px #c084fc) drop-shadow(0 0 11px rgba(124, 58, 237, .9)); }
  33% { filter: url(#dd1) grayscale(.6) brightness(.55) sepia(.45) hue-rotate(225deg) saturate(1.7) contrast(1.3) drop-shadow(0 0 2px #c084fc) drop-shadow(0 0 11px rgba(124, 58, 237, .9)); }
  66% { filter: url(#dd2) grayscale(.6) brightness(.55) sepia(.45) hue-rotate(225deg) saturate(1.7) contrast(1.3) drop-shadow(0 0 2px #c084fc) drop-shadow(0 0 11px rgba(124, 58, 237, .9)); }
}
html.reduce-fx img.v-celeste, html.reduce-fx img.v-ombre { animation-duration: 6s !important; }
.ic-v, .sc-v { position: absolute; top: 8px; left: 6px; z-index: 2; } .ic-v .vtag, .sc-v .vtag { margin: 0; font-size: 9px; padding: 1px 6px; }
.ic:has(.v-gold) { border-color: rgba(250, 204, 21, .5); } .ic:has(.v-celeste) { border-color: rgba(224, 231, 255, .6); } .ic:has(.v-ombre) { border-color: rgba(168, 85, 247, .6); }

/* Ouverture : annonce de variante, épurée (texte lumineux, sans cadre) qui apparaît puis s'efface */
.v-pop { position: absolute; left: 50%; top: calc(16% + env(safe-area-inset-top)); translate: -50% 0; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none; white-space: nowrap; animation: vPop 1.8s cubic-bezier(.2, .8, .3, 1) forwards; }
.v-pop b { font-family: "Space Grotesk"; font-size: clamp(22px, 4.5vw, 34px); font-weight: 700; letter-spacing: .42em; padding-left: .42em; text-transform: uppercase;
  background: var(--vg); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px var(--vc)); }
.v-pop small { font-size: 12px; font-weight: 600; letter-spacing: .3em; color: var(--vc); opacity: .9; }
.v-pop i { width: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--vc), transparent); animation: vLine 1.8s cubic-bezier(.2, .8, .3, 1) forwards; }
.v-pop.v-gold { --vg: linear-gradient(90deg, #fef3c7, #fbbf24, #fef3c7); --vc: rgba(251, 191, 36, .9); }
.v-pop.v-celeste { --vg: linear-gradient(90deg, #ffffff, #c7d2fe, #ffffff); --vc: rgba(199, 210, 254, .95); }
.v-pop.v-ombre { --vg: linear-gradient(90deg, #f3e8ff, #a855f7, #f3e8ff); --vc: rgba(168, 85, 247, .95); }
@keyframes vPop { 0% { opacity: 0; filter: blur(8px); transform: translateY(10px); } 14% { opacity: 1; filter: blur(0); transform: none; } 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes vLine { 0% { width: 0; } 30% { width: 220px; } 100% { width: 260px; opacity: 0; } }
.op-rarity small, #op-rarity small { font-size: .6em; opacity: .8; }

/* Quêtes du jour (accueil) */
.quests { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.q-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.q-head b { font-family: "Space Grotesk"; }
.q-head small { font-size: 11px; font-variant-numeric: tabular-nums; }
.q { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); transition: border-color .3s, background .3s; }
.q.ok:not(.claimed) { border-color: rgba(134, 239, 172, .5); background: rgba(34, 197, 94, .08); animation: qGlow 1.6s ease-in-out infinite; }
@keyframes qGlow { 50% { box-shadow: 0 0 18px -4px rgba(134, 239, 172, .6); } }
.q.claimed { opacity: .55; }
.q-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.q-rew { flex: none; font-weight: 700; font-size: 12px; color: #fde68a; display: inline-flex; align-items: center; gap: 4px; }
.q-rew .piece { width: 14px; height: 14px; }
.q-bar { position: relative; height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.q-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #8b5cf6, #f97316); transition: width .6s cubic-bezier(.2, .9, .3, 1); }
.q.ok .q-bar i { background: linear-gradient(90deg, #22c55e, #86efac); }
.q-bar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.q-claim { align-self: flex-start; padding: 6px 14px !important; }
.q-check { position: absolute; top: 8px; right: 10px; color: #86efac; font-weight: 800; }

/* ===================== Bestiaire ===================== */
.inv-tabs { display: inline-flex; margin: 0 0 18px; }
.inv-tabs button { padding: 10px 20px; font-size: 14px; }
.bst-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.bst-head > div { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 10px; }
.bst-head b { font-family: "Space Grotesk"; font-size: 24px; } .bst-head span { color: var(--muted); font-size: 13px; }
.bst-bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bst-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8b5cf6, #f97316); transition: width .8s cubic-bezier(.2, .9, .3, 1); }
.bst-bar.v i { background: linear-gradient(90deg, #facc15, #e0e7ff, #a855f7); }
.bst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.bc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 12px; border-radius: 18px; text-align: center; color: var(--text);
  background: radial-gradient(130px 90px at 50% 25%, rgba(var(--g), .16), transparent 70%), var(--surface); border: 1px solid var(--border); transition: transform .2s, border-color .2s; }
.bc:hover { transform: translateY(-3px); border-color: rgba(var(--g), .55); }
.bc img { width: 84px; height: 84px; image-rendering: pixelated; --df: drop-shadow(0 0 10px rgba(var(--g), .55)); filter: var(--df); animation: doodle .9s steps(1) infinite; }
.bc b { font-size: 15px; } .bc small { font-size: 12px; }
.bc-num { position: absolute; top: 8px; left: 10px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bc-own { position: absolute; top: 8px; right: 10px; font-size: 11px; font-weight: 700; color: #c4b5fd; }
.bc.unk { background: var(--surface); }
.bc.unk b { color: var(--muted); }
/* silhouette : la forme en noir avec un fin contour, sans le dessin */
img.sil { --df: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, .5)) !important; opacity: .75; }
.bc-vars { display: flex; gap: 5px; margin-top: 2px; }
.v-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); vertical-align: middle; }
.v-dot.on.gold { background: #facc15; border-color: #fde68a; box-shadow: 0 0 6px #facc15; }
.v-dot.on.celeste { background: #e0e7ff; border-color: #fff; box-shadow: 0 0 6px #e0e7ff; }
.v-dot.on.ombre { background: #7c3aed; border-color: #c084fc; box-shadow: 0 0 6px #a855f7; }
.bst-vlist { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; font-size: 13px; color: var(--muted); }
.bst-vlist .vtag { margin: 0; }
.bst-unk { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
@media (max-width: 760px) {
  .bst-head { grid-template-columns: 1fr; gap: 8px; } .bst-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bc { padding: 14px 4px 10px; border-radius: 14px; } .bc img { width: 60px; height: 60px; } .bc b { font-size: 12px; } .bc small { font-size: 10px; }
  .inv-tabs { display: flex; } .inv-tabs button { flex: 1; }
}

/* Mes jetons : onglets par variante */
.inv-vtabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ivt { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); transition: all .2s; }
.ivt small { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: var(--text); }
.ivt:hover { color: var(--text); }
.ivt.on { color: var(--text); border-color: rgba(139, 92, 246, .6); background: rgba(139, 92, 246, .15); }
.ivt.v-gold.on { border-color: rgba(250, 204, 21, .7); background: rgba(250, 204, 21, .12); }
.ivt.v-celeste.on { border-color: rgba(224, 231, 255, .8); background: rgba(224, 231, 255, .1); }
.ivt.v-ombre.on { border-color: rgba(168, 85, 247, .8); background: rgba(124, 58, 237, .15); }
@media (max-width: 760px) { .inv-vtabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .ivt { flex-direction: column; gap: 3px; padding: 8px 4px; font-size: 12px; } }

/* Survol des jetons : léger reflet holographique qui suit la souris (discret).
   La couleur du holo suit la variante : arc-en-ciel pâle (normal), or, nacre (céleste), violet (ombre). */
.glare, .op-coin .glare {
  --h1: #ff9ecf; --h2: #ffe39a; --h3: #9dffd8; --h4: #9ccfff; --h5: #d3a8ff;
  background:
    linear-gradient(115deg, transparent 20%, var(--h1) 32%, var(--h2) 41%, var(--h3) 50%, var(--h4) 59%, var(--h5) 68%, transparent 80%) !important;
  background-size: 280% 280% !important;
  background-position: var(--mx, 50%) var(--my, 50%) !important;
  mix-blend-mode: soft-light !important;
  opacity: calc(var(--gl, 0) * .7) !important;
  transition: opacity .4s ease;
}
.glare.hv-gold, .opening.v-gold .op-coin .glare { --h1: #fff3c4; --h2: #ffd36b; --h3: #ffb938; --h4: #ffe9a3; --h5: #fff8de; }
.glare.hv-celeste, .opening.v-celeste .op-coin .glare { --h1: #ffffff; --h2: #e6e9ff; --h3: #cfd8ff; --h4: #f2e8ff; --h5: #ffffff; }
.glare.hv-ombre, .opening.v-ombre .op-coin .glare { --h1: #c084fc; --h2: #7c3aed; --h3: #a855f7; --h4: #6d28d9; --h5: #e9d5ff; }
.jm-coin { position: relative; }
.jm-coin .glare { position: absolute; inset: 15px; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
@media (max-width: 760px) { .jm-coin .glare { inset: 10px; } }

/* Jeton de l'ouverture : il tourne autour du milieu de son épaisseur (sinon le dos passe devant les effets),
   et le reflet / l'éclat / les étincelles restent toujours devant le jeton */
.op-coin .spin { transform-origin: 50% 50% -9px; }
.op-coin .tilt3d > .tw { translate: 0 0 12px; }
/* reflet et éclat collés sur la face du jeton (ils tournent avec lui, invisibles quand il est de dos) */
.op-coin .spin > .glare, .op-coin .spin > .shine { transform: translateZ(1px); backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* Profil : collection (bestiaire compact) */
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 18px; }
.pc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 14px; color: var(--text);
  background: radial-gradient(70px 50px at 50% 30%, rgba(var(--g), .16), transparent 70%), var(--surface); border: 1px solid var(--border); transition: transform .15s, border-color .15s; }
.pc:hover { transform: translateY(-2px); border-color: rgba(var(--g), .55); }
.pc img { width: 52px; height: 52px; image-rendering: pixelated; --df: drop-shadow(0 0 6px rgba(var(--g), .5)); filter: var(--df); animation: doodle .9s steps(1) infinite; }
.pc small { font-size: 10px; color: var(--muted); }
.pc.unk { background: var(--surface); }
.pc .bc-vars { gap: 3px; } .pc .v-dot { width: 6px; height: 6px; }
@media (max-width: 760px) { .pc-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; } .pc img { width: 40px; height: 40px; } }

/* ===================== Retours (bêta) ===================== */
.fb-btn { position: fixed; left: 18px; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 11px 18px 11px 14px; border-radius: 99px;
  font-weight: 700; font-size: 14px; color: #1a0b2e; background: linear-gradient(135deg, #fde68a, #f9a8d4 55%, #c4b5fd); box-shadow: 0 10px 30px -8px rgba(249, 168, 212, .8);
  transition: transform .2s; animation: fbPulse 3s ease-in-out infinite; }
.fb-btn:hover { transform: translateY(-3px) scale(1.03); }
.fb-ico { font-size: 18px; }
@keyframes fbPulse { 0%, 100% { box-shadow: 0 10px 30px -8px rgba(249, 168, 212, .8); } 50% { box-shadow: 0 10px 40px -4px rgba(249, 168, 212, 1), 0 0 0 6px rgba(249, 168, 212, .15); } }
html.lock .fb-btn { display: none; }
.fb-card { position: relative; width: min(520px, 100%); }
.fb-card h3 { font-family: "Space Grotesk"; font-size: 22px; }
.fb-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); }
.fb-x:hover { background: var(--surface-2); color: var(--text); }
.fb-kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fb-k { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; font-size: 13px; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border); transition: all .2s; }
.fb-k span { font-size: 22px; }
.fb-k.on { color: var(--text); border-color: rgba(249, 168, 212, .8); background: rgba(249, 168, 212, .12); }
.fb-text { width: 100%; resize: vertical; min-height: 110px; font-size: 15px; line-height: 1.45; }
.fb-foot { display: flex; justify-content: space-between; align-items: center; }
.fb-card.beta { text-align: center; align-items: center; }
.beta-ico { font-size: 46px; animation: duelPop .6s cubic-bezier(.2, 1.5, .4, 1); }
.fb-card.beta p { color: var(--muted); }
.fb-card.beta .ask-btns { width: 100%; justify-content: center; }
@media (max-width: 760px) {
  .fb-btn { display: none !important; } /* sur téléphone : « Donner un avis » est dans le menu Plus */
  .page { padding-bottom: calc(var(--tabh) + 96px); } /* le bas des listes passe au-dessus de la bulle de chat*/
}
/* Panel : retours */
.mpfb-filter { margin: 0 0 12px !important; }
.mpfb-list { display: flex; flex-direction: column; gap: 10px; }
.mpfb { padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.mpfb.new { border-color: rgba(249, 168, 212, .5); } .mpfb.done { opacity: .55; }
.mpfb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.mpfb-kind { padding: 3px 10px; border-radius: 99px; font-weight: 700; font-size: 12px; background: var(--surface-2); }
.mpfb-kind.k-bug { background: rgba(239, 68, 68, .18); color: #fca5a5; } .mpfb-kind.k-idea { background: rgba(250, 204, 21, .15); color: #fde68a; }
.mpfb-kind.k-add { background: rgba(139, 92, 246, .18); color: #c4b5fd; }
.mpfb-st { margin-left: auto; font-size: 12px; color: var(--muted); }
.mpfb p { white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.mp-tabs .nbadge { margin-left: 4px; vertical-align: 1px; }

/* ===================== Bêta ===================== */
.logo { position: relative; }
.beta-chip { margin-left: -6px; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #1a0b2e; background: linear-gradient(135deg, #fde68a, #f9a8d4 55%, #c4b5fd); box-shadow: 0 0 14px -2px rgba(249, 168, 212, .7); transition: transform .15s; flex: none; }
.beta-chip:hover { transform: translateY(-1px) scale(1.05); }
.bt-tag { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 4px; border-radius: 5px; font-style: normal; font-size: 10px; font-weight: 800;
  color: #1a0b2e; background: linear-gradient(135deg, #fde68a, #f9a8d4); vertical-align: 1px; cursor: help; }
.bt-tag.big { width: 22px; height: 22px; font-size: 14px; border-radius: 7px; margin-left: 8px; vertical-align: 4px; }
.bt-tag[hidden] { display: none !important; }
.tester-btn { color: #f9a8d4 !important; border-color: rgba(249, 168, 212, .4) !important; }
@media (max-width: 760px) { .beta-chip { margin-left: -4px; font-size: 10px; padding: 2px 7px; } .nav .tester-btn { display: none !important; } }
/* Menu testeur */
.tester-card { position: relative; width: min(620px, 100%); max-height: 88vh; overflow: auto; }
.tester-card h3 { font-family: "Space Grotesk"; font-size: 22px; }
.ts-sec { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.ts-sec h4 { font-size: 14px; }
.ts-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ts-row button { padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); }
.ts-row button:hover { border-color: rgba(249, 168, 212, .6); }
.ts-row button.on, .ts-row button.primary { background: linear-gradient(135deg, #f9a8d4, #c4b5fd); color: #1a0b2e; border-color: transparent; }
.ts-row select { flex: 1; min-width: 130px; width: auto; }
.ts-qty { width: 70px !important; flex: none; }
.ts-lbl { font-size: 12px; color: var(--muted); width: 54px; }
/* Patch notes */
.pn-page { width: min(640px, 82vw); display: flex; flex-direction: column; gap: 14px; }
.pn-page h2 { font-family: "Space Grotesk"; }
.pn { padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.pn.latest { border-color: rgba(249, 168, 212, .5); }
.pn-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pn-head b { font-family: "Space Grotesk"; font-size: 17px; }
.pn-group h5 { font-size: 13px; margin-bottom: 4px; }
.pn-group ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--muted); }
.pn-new h5 { color: #86efac; } .pn-change h5 { color: #93c5fd; } .pn-fix h5 { color: #fde68a; } .pn-removed h5 { color: #fca5a5; }
.pn-card { width: min(540px, 100%); max-height: 86vh; overflow: auto; }
.pn-card h3 { font-family: "Space Grotesk"; font-size: 22px; }
.pn-pop-tag { align-self: flex-start; padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1a0b2e; background: linear-gradient(135deg, #fde68a, #f9a8d4 55%, #c4b5fd); }
.pn-pop-body { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 760px) { .pn-page { width: 100%; } }
@media (max-width: 760px) { .nav .logo { margin-right: 0 !important; } .beta-chip { margin-right: auto; } }

/* Profil : petite mention « bêta testeur » (discrète, pour remercier) */
.beta-thanks { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 14px 8px 10px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(253, 230, 138, .07), rgba(249, 168, 212, .07) 55%, rgba(196, 181, 253, .07)); border: 1px solid rgba(249, 168, 212, .2); }
.beta-thanks span { font-size: 18px; }
.beta-thanks b { display: block; font-size: 13px; background: linear-gradient(90deg, #fde68a, #f9a8d4, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.beta-thanks small { font-size: 12px; color: var(--muted); }

/* Chevauchements : la croix des fenêtres ne passe plus sur le titre, les boutons flottants ne cachent plus le bas des pages */
.modal-card h2, .pk-wrap h2, .pe h2, .info h2, .ann-hist h2, .pn-page h2 { padding-right: 44px; }
main { padding-bottom: 90px; }
@media (max-width: 760px) { main { padding-bottom: 76px; } }
/* quand une barre ou une fenêtre est ouverte, les boutons flottants s'effacent */
body:has(.sell-bar.on) .fb-btn, body:has(.sell-bar.on) .chat-fab,
body:has(#jeton-modal.on) .fb-btn, body:has(#jeton-modal.on) .chat-fab,
body:has(.settings.on) .fb-btn, body:has(.settings.on) .chat-fab,
body:has(.askbox) .fb-btn, body:has(.sheet.on) .fb-btn, body:has(.chat-dock:not([hidden])) .fb-btn { opacity: 0; pointer-events: none; transform: translateY(12px); }
.fb-btn, .chat-fab { transition: opacity .25s, transform .25s; }

/* Ouverture : bouton « Tout ouvrir d'un coup » */
.op-auto { margin-top: 10px; padding: 8px 16px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--text); background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .15); backdrop-filter: blur(8px); transition: all .2s; pointer-events: auto; }
.op-auto:hover { background: rgba(255, 255, 255, .12); }
.op-auto.on { background: linear-gradient(135deg, #8b5cf6, #f97316); border-color: transparent; color: #fff; animation: annPulse 1.2s ease-in-out infinite; }
.op-autobar { position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 50%; translate: -50% 0; z-index: 8; display: flex; gap: 8px; }
.op-autobar .op-auto { margin: 0; white-space: nowrap; }
.op-skip { background: rgba(255, 255, 255, .04); color: var(--muted); }
.op-skip:hover { color: var(--text); }
.opening.recap .op-autobar { display: none; }

/* ===================== Mode turbo (Tout ouvrir d'un coup) ===================== */
.opening.turbo::before, .opening.turbo::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* Flou radial : net au centre (le jeton), de plus en plus flou vers les bords */
.opening.turbo::before { z-index: 1; -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  -webkit-mask: radial-gradient(circle at var(--cx, 50%) var(--cy, 40%), transparent calc(var(--coinr, 120px) * 1.1), rgba(0, 0, 0, .5) calc(var(--coinr, 120px) * 1.6), #000 calc(var(--coinr, 120px) * 2.8));
  mask: radial-gradient(circle at var(--cx, 50%) var(--cy, 40%), transparent calc(var(--coinr, 120px) * 1.1), rgba(0, 0, 0, .5) calc(var(--coinr, 120px) * 1.6), #000 calc(var(--coinr, 120px) * 2.8)); }
/* Traînées de zoom floues qui partent du jeton, à la couleur du dernier tiré */
.opening.turbo::after { z-index: 1; opacity: .55; mix-blend-mode: screen; filter: blur(7px);
  background: repeating-conic-gradient(from 0deg at var(--cx, 50%) var(--cy, 40%), rgba(var(--tier), .55) 0 1.2deg, transparent 1.2deg 9deg),
              radial-gradient(circle at var(--cx, 50%) var(--cy, 40%), transparent 14%, rgba(var(--tier), .25) 40%, rgba(0, 0, 0, .55) 85%);
  -webkit-mask: radial-gradient(circle at var(--cx, 50%) var(--cy, 40%), transparent calc(var(--coinr, 120px) * 1.05), #000 calc(var(--coinr, 120px) * 2.4));
  mask: radial-gradient(circle at var(--cx, 50%) var(--cy, 40%), transparent calc(var(--coinr, 120px) * 1.05), #000 calc(var(--coinr, 120px) * 2.4));
  transform-origin: var(--cx, 50%) var(--cy, 40%); animation: warp .2s ease-out infinite; }
@keyframes warp { 0% { transform: scale(1) rotate(0); opacity: .7; } 100% { transform: scale(1.18) rotate(2deg); opacity: .35; } }
.opening.turbo .op-info { transition: none !important; }
.opening.turbo .op-coin::before { animation: turboGlow .23s ease-out infinite; }
@keyframes turboGlow { 0% { opacity: 1; transform: scale(1.25); } 100% { opacity: .6; transform: scale(1); } }
.op-combo { position: absolute; top: 72px; left: 50%; translate: -50% 0; z-index: 7; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.op-combo b { font-family: "Space Grotesk"; font-weight: 800; font-size: clamp(40px, 7vw, 64px); line-height: 1; color: #fff;
  text-shadow: 0 0 24px rgba(var(--cg, 255, 255, 255), .9), 0 4px 0 rgba(0, 0, 0, .4); }
.op-combo small { font-size: 13px; font-weight: 600; color: rgb(var(--cg, 255, 255, 255)); letter-spacing: .06em; }
.op-combo.pop b { animation: comboPop .22s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes comboPop { 0% { transform: scale(1.6) rotate(-6deg); } 100% { transform: none; } }
html.reduce-fx .opening.turbo::before, html.reduce-fx .opening.turbo::after { display: none; }
.opening.turbo #op-next { visibility: hidden; }
.opening.turbo .op-bg { opacity: .35; transition: opacity .2s; }

/* ===================== Effets allégés (réglage « Allégés », ou « Auto » sur un appareil lent) =====================
   Les plus gros coûts sur un vieux PC : les flous d'arrière-plan, les filtres « dessin » animés sur chaque jeton,
   les boules floues de l'accueil et les décors qui tournent en boucle. On les coupe et on garde un rendu fixe équivalent. */
html.reduce-fx *, html.reduce-fx *::before, html.reduce-fx *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.reduce-fx .nav { background: rgba(13, 13, 18, .96); }
html.reduce-fx .tabbar { background: rgba(13, 13, 18, .98) !important; }
html.reduce-fx .float, html.reduce-fx .orbit, html.reduce-fx .si.epic::before { display: none; }
html.reduce-fx .hero-coin::before, html.reduce-fx .op-main, html.reduce-fx .op-coin .zoom, html.reduce-fx .bu-float, html.reduce-fx .fb-btn, html.reduce-fx .q.ok:not(.claimed) { animation: none; }
/* Jetons : plus de tremblement « dessin » (filtre SVG animé), juste leur lueur fixe */
html.reduce-fx .ic img, html.reduce-fx .sc img, html.reduce-fx .bc img, html.reduce-fx .pc img, html.reduce-fx .jm-coin img, html.reduce-fx .rc img,
html.reduce-fx .op-coin .spin img.face, html.reduce-fx .op-coin .spin img.back, html.reduce-fx .bu-img, html.reduce-fx .cb-coin img { animation: none !important; }
html.reduce-fx img.v-gold, html.reduce-fx .opening.v-gold .op-coin .spin img.face { animation: none !important; filter: sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.12) drop-shadow(0 0 8px rgba(250, 204, 21, .8)) !important; }
html.reduce-fx img.v-celeste, html.reduce-fx .opening.v-celeste .op-coin .spin img.face { animation: none !important; filter: grayscale(.55) brightness(1.35) sepia(.15) hue-rotate(195deg) saturate(1.4) drop-shadow(0 0 10px rgba(199, 210, 254, .9)) !important; }
html.reduce-fx img.v-ombre, html.reduce-fx .opening.v-ombre .op-coin .spin img.face { animation: none !important; filter: grayscale(.6) brightness(.55) sepia(.45) hue-rotate(225deg) saturate(1.7) contrast(1.3) drop-shadow(0 0 8px rgba(192, 132, 252, .8)) !important; }
/* Turbo : traînées sans flou (le flou plein écran est le plus lourd de tous) */
html.reduce-fx .opening.turbo::after { display: block; filter: none; opacity: .35; mix-blend-mode: normal; }
html.reduce-fx .opening.turbo::before { display: none; }

/* ===================== Fluidité pour tout le monde ===================== */
/* Les pages hors écran (longues listes) ne sont pas dessinées tant qu'on n'y descend pas */
.inv-grid > .ic, .list > .li { content-visibility: auto; contain-intrinsic-size: auto 200px; }
.list > .li { contain-intrinsic-size: auto 52px; }
/* Le ruban « En direct » ne bouge plus quand il est hors écran / onglet caché */
.track { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .track, .float, .orbit, .hero-coin::before { animation: none !important; } }
/* Les boules décoratives de l'accueil restent derrière le texte et les boutons */
.center > .float { z-index: 0; }
.center > :not(.float):not(.coin-wrap) { position: relative; z-index: 1; }
/* Toasts : largeur selon le texte (avant, left:50% les écrasait sur une demi-largeur d'écran) */
.toast { width: max-content; max-width: min(460px, calc(100vw - 32px)); text-align: center; }
/* Turbo : le jeton et sa fiche passent au-dessus du flou (certains téléphones ignorent le masque du flou et floutaient tout) */
.opening.turbo .op-main { position: relative; z-index: 2; }
@media (pointer: coarse) { .opening.turbo::before { display: none; } }
/* Réglages de l'ouverture auto (sous les pulls, sur l'accueil) */
.auto-cfg { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.auto-cfg h4 { font-family: "Space Grotesk"; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.auto-cfg p { font-size: 12.5px; color: var(--muted); }
.ac-lbl { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ac-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-row button { padding: 6px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid var(--border); transition: all .15s; }
.ac-row button:hover { color: var(--text); }
.ac-row button.on { color: #fff; background: rgba(139, 92, 246, .25); border-color: rgba(139, 92, 246, .7); }
.ac-row button.v-gold.on { background: rgba(250, 204, 21, .18); border-color: rgba(250, 204, 21, .7); color: #fde68a; }
.ac-row button.v-celeste.on { background: rgba(224, 231, 255, .14); border-color: rgba(224, 231, 255, .7); color: #e0e7ff; }
.ac-row button.v-ombre.on { background: rgba(168, 85, 247, .2); border-color: rgba(168, 85, 247, .75); color: #e9d5ff; }
.ac-hint { font-size: 11.5px !important; opacity: .8; }
/* Stock de pulls au-delà de 10 : une barre au lieu des petits jetons */
.stock-bar { width: min(260px, 70vw); height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid var(--border); overflow: hidden; }
.stock-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #c084fc); box-shadow: 0 0 10px rgba(139, 92, 246, .6); transition: width .4s; }
/* ===================== Bestiaire (tous les jetons + vente) ===================== */
.bst-grid2 .ic-lock { top: 26px; }
.bst-grid2 .ic.unk { background: var(--surface); cursor: pointer; }
.bst-grid2 .ic.unk b { color: var(--muted); }
.bst-grid2 .ic.gone img { opacity: .4; filter: grayscale(.6) drop-shadow(0 0 6px rgba(var(--g), .3)); animation: none; }
.bst-grid2 .ic.gone b, .bst-grid2 .ic.gone small { opacity: .6; }
#bst-series { margin-bottom: 14px; }
#bst-own.on { color: #fff; background: rgba(34, 197, 94, .18); border-color: rgba(34, 197, 94, .6); }
@media (max-width: 760px) { .tabbar > * { min-width: 0; font-size: 10px !important; } .tabbar > * span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
/* Onglets Bestiaire / Objets du menu Inventaire (liens) */
.inv-tabs a { padding: 10px 20px; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--muted); transition: background .15s, color .15s; text-align: center; }
.inv-tabs a.on { background: var(--accent); color: #fff; }
@media (max-width: 760px) { .inv-tabs a { flex: 1; } }
/* Icônes de la barre du bas : jamais écrasées */
.tabbar svg { flex-shrink: 0; width: 22px; height: 22px; }
/* Stock de pulls : juste le nombre, bien lisible (x/50) */
.stock-count { font-family: "Space Grotesk"; line-height: 1; }
.stock-count b { font-size: 30px; font-weight: 700; color: #fff; }
.stock-count span { font-size: 18px; color: var(--muted); font-weight: 600; }

/* ===================== Téléphone : rien de coupé ===================== */
/* Sur iPhone / Android, 100vh est plus grand que l'écran visible (barre d'adresse) : on utilise la vraie hauteur visible (dvh) */
@supports (height: 100dvh) {
  .modal-card, .annf-card { max-height: calc(100dvh - 32px); }
  .debug, .debug.admin { max-height: calc(100dvh - 32px); }
  .debug.admin2 { height: min(820px, calc(100dvh - 32px)); }
  .chat-dock { height: min(500px, calc(100dvh - 140px)); }
  .page { min-height: calc(100dvh - 64px); }
  .mo-fx { height: 100dvh; }
}
@media (max-width: 760px) {
  /* Fenêtres qui montent du bas : jamais plus hautes que l'écran, elles défilent à l'intérieur */
  .ask-card { max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .modal-card, .set-card, .sh-card, .annf-card { overscroll-behavior: contain; }
  /* iPhone zoome tout seul sur les champs de moins de 16 px (et la page paraît coupée) : 16 px partout */
  input, select, textarea, .mpx-in { font-size: 16px !important; }
  /* Rien ne dépasse sur les côtés */
  html, body { max-width: 100%; overflow-x: clip; }
  .float { display: none; }
  .fx-row { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 760px) {
  .askbox, .modal, .settings { padding-bottom: var(--kb, 0px) !important; transition: padding-bottom .15s; }
  .ask-card { max-height: calc(88dvh - var(--kb, 0px)); }
  .chat-dock { bottom: calc(var(--tabh) + 10px + var(--kb, 0px)) !important; }
}
@media (max-width: 760px) {
  /* Filtres : sur plusieurs lignes au lieu d'une rangée qui sort de l'écran (on croyait que c'était coupé) */
  .chips { flex-wrap: wrap !important; overflow: visible !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; gap: 6px !important; }
  .inv-tools .chips { width: auto !important; }
  .chips .chip { padding: 7px 12px; font-size: 13px; }
}
@media (max-width: 760px) {
  /* Ouverture : jeton plus petit sur les petits écrans, rien caché sous les boutons du haut, et on peut défiler si ça ne tient pas */
  .opening { --coin: clamp(130px, 27dvh, 210px); justify-content: flex-start; overflow-y: auto; overflow-x: hidden;
    padding: calc(72px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); }
  .opening > .op-main, .opening > .op-recap-view { margin-block: auto; }
  .op-coin-col { gap: 6px; }
  .op-stats .stat { padding-block: 2px; }
  .op-note { display: none; }
  /* Récap : 3 colonnes compactes, boutons toujours visibles en bas */
  .op-recap-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .rc { padding: 12px 4px 8px !important; border-radius: 12px !important; gap: 3px !important; }
  .rc img { width: 46px !important; height: 46px !important; }
  .rc b { font-size: 12px !important; } .rc small { font-size: 11px !important; } .rc .vtag { font-size: 8px; padding: 1px 4px; }
  .rc-tag { font-size: 8px !important; padding: 1px 6px !important; top: -8px !important; }
  .op-recap-view h2 { font-size: 26px !important; }
  .op-recap-view .op-actions { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); width: calc(100% + 32px); margin: 0 -16px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bg) 70%, transparent); z-index: 3; }
}
@media (max-width: 760px) {
  /* Menu testeur : les listes prennent toute la largeur, la quantité et le bouton en dessous */
  .ts-row { flex-wrap: wrap; }
  .ts-row select { flex: 1 1 100%; min-width: 0; }
  .ts-row .ts-qty { flex: 1; }
}

/* Récap : nombre de doublons sur la carte, et croix pour fermer toujours visible en haut à droite */
.rc-n { position: absolute; top: 6px; right: 8px; font-family: "Space Grotesk"; font-weight: 700; font-size: 13px; color: #c4b5fd; }
.op-recap-x { display: none; position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 9; width: 42px; height: 42px; border-radius: 50%;
  font-size: 18px; color: #fff; background: rgba(20, 18, 30, .85); border: 1px solid rgba(255, 255, 255, .18); }
.op-recap-x:hover { background: rgba(255, 255, 255, .14); }
.opening.recap .op-recap-x { display: grid; place-items: center; }
/* Chance du tirage (🍀 ×2) à côté de la rareté */
.op-luck { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; font-size: .6em; vertical-align: middle; color: #bbf7d0; background: rgba(34, 197, 94, .15); border: 1px solid rgba(34, 197, 94, .45); }
/* Objets : quantité en pastille, utiliser plusieurs d'un coup */
.it-card { position: relative; }
.it-qty { position: absolute; top: 10px; right: 12px; padding: 2px 9px; border-radius: 99px; font-family: "Space Grotesk"; font-weight: 700; font-size: 13px; color: #ddd6fe; background: rgba(139, 92, 246, .2); border: 1px solid rgba(139, 92, 246, .45); }
.it-card b { padding-right: 52px; }
.it-use { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.it-step { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 99px; overflow: hidden; }
.it-step button { width: 30px; height: 32px; font-weight: 700; color: var(--text); }
.it-step button:hover { background: var(--surface-2); }
.it-step input { width: 46px; height: 32px; text-align: center; background: transparent; border: 0; color: var(--text); font-weight: 600; -moz-appearance: textfield; }
.it-step input::-webkit-outer-spin-button, .it-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 760px) { .it-card .it-use { grid-column: 2; } .it-card b { padding-right: 44px; } }
/* Bonus du jour (au-dessus des quêtes) */
.daily { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.daily > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.daily small { font-size: 12px; }
.daily.on { border-color: rgba(250, 204, 21, .55); background: linear-gradient(135deg, rgba(250, 204, 21, .12), rgba(249, 115, 22, .08)); animation: qGlow 1.6s ease-in-out infinite; }
.daily .btn { flex: none; }
html.reduce-fx .daily.on { animation: none; }
/* ===================== Tuto de première visite ===================== */
.tuto-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 420px; padding-top: 30px !important; }
.tuto-ico { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(closest-side, rgba(139, 92, 246, .35), transparent); }
.tuto-ico img { width: 80px; height: 80px; image-rendering: pixelated; filter: drop-shadow(0 0 12px rgba(139, 92, 246, .6)); }
.tuto-ico span { font-size: 52px; line-height: 1; }
.tuto-card h3 { font-family: "Space Grotesk"; font-size: 24px; }
.tuto-card p { color: var(--muted); font-size: 15px; line-height: 1.55; min-height: 96px; }
.tuto-card p b { color: var(--text); }
.tuto-dots { display: flex; gap: 6px; margin: 4px 0 2px; }
.tuto-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); transition: all .2s; }
.tuto-dots i.on { width: 20px; border-radius: 4px; background: var(--accent); }
.tuto-card .ask-btns { width: 100%; }
.tuto-card .ask-btns .btn { flex: 1; }

/* ===================== Combat (arena.js) ===================== */
.ar-page { display: flex; flex-direction: column; gap: 18px; }
.ar-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ar-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 8px 14px; border-radius: 18px; text-align: center; color: var(--text);
  background: linear-gradient(180deg, rgba(var(--g, 139, 92, 246), .14), var(--surface)); border: 1px solid rgba(var(--g, 139, 92, 246), .35); transition: transform .2s, border-color .2s; }
.ar-slot:hover { transform: translateY(-3px); }
.ar-slot.empty { background: var(--surface); border: 1px dashed var(--border); min-height: 190px; justify-content: center; color: var(--muted); }
.ar-slot.empty b { font-size: 34px; font-weight: 300; }
.ar-slot img { width: 84px; height: 84px; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(var(--g), .5)); }
.ar-slot b { font-size: 15px; } .ar-slot small { font-size: 12px; color: var(--muted); }
.ar-slot .ar-ab { color: var(--el); font-weight: 600; }
.ar-pos { position: absolute; top: 8px; left: 10px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ar-el { position: absolute; top: 6px; right: 8px; font-size: 16px; }
.ar-go { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ar-go .ar-train { min-width: min(100%, 320px); padding: 14px 22px; font-size: 16px; }
.ar-ranked { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 6px; padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--border); color: var(--muted); text-align: center; width: min(100%, 420px); }
.ar-ranked b { color: var(--text); }
.ar-help { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ar-help > div { padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.ar-help h4 { font-family: "Space Grotesk"; margin-bottom: 4px; } .ar-help p { font-size: 13px; line-height: 1.5; }
@media (max-width: 760px) { .ar-team { gap: 6px; } .ar-slot { padding: 22px 4px 10px; } .ar-slot img { width: 58px; height: 58px; } .ar-slot b { font-size: 12px; } .ar-slot small { font-size: 10px; } .ar-help { grid-template-columns: 1fr; } }

/* Choix d'un jeton */
.ar-pick h2 { font-family: "Space Grotesk"; font-size: 22px; margin-bottom: 8px; }
.ar-plist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 60dvh; overflow-y: auto; }
.ar-pi { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--border); }
.ar-pi:hover { border-color: rgba(var(--g), .6); } .ar-pi.off { opacity: .35; }
.ar-pi img { width: 56px; height: 56px; image-rendering: pixelated; flex: none; filter: drop-shadow(0 0 8px rgba(var(--g), .5)); }
.ar-pi > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-pi small { font-size: 12px; color: var(--muted); } .ar-pi small b { color: var(--el); }
.ar-elc { font-size: 11px; font-weight: 600; color: var(--el); margin-left: 4px; }

/* Fiche combat dans le Bestiaire */
.ar-info { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-left: 3px solid var(--el); text-align: left; }
.ar-info-h { display: flex; justify-content: space-between; font-weight: 700; color: var(--el); }
.ar-info p { font-size: 13px; color: var(--muted); } .ar-info p b { color: var(--text); }
.ar-lvl { align-self: flex-start; }

/* Écran de combat */
.arena { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: calc(12px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 30%, #2a1f4a, #0d0b16 70%); opacity: 0; transition: opacity .25s; overflow: hidden; user-select: none; }
.arena.on { opacity: 1; }
.ar-top { width: min(640px, 100%); display: flex; justify-content: space-between; align-items: center; }
.ar-x, .ar-speed { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); color: #fff; font-weight: 700; }
.ar-time { font-family: "Space Grotesk"; font-size: 20px; }
.ar-name { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ar-row { width: min(640px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ar-u { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 6px 8px; border-radius: 16px; background: rgba(20, 18, 32, .85);
  border: 1px solid rgba(var(--g), .35); transition: transform .2s, box-shadow .2s, opacity .3s, filter .3s; }
.ar-row.me .ar-u { cursor: pointer; }
.ar-u.ready { border-color: var(--el); box-shadow: 0 0 0 2px var(--el), 0 0 24px var(--el); animation: arReady 1s ease-in-out infinite; }
@keyframes arReady { 50% { transform: translateY(-4px); } }
.ar-u.ko { opacity: .35; filter: grayscale(1); }
.ar-u.frozen .ar-uimg { filter: hue-rotate(160deg) brightness(1.3) saturate(.6); }
.ar-uel { position: absolute; top: 4px; right: 6px; font-size: 14px; } .ar-ulv { position: absolute; top: 5px; left: 7px; font-size: 10px; font-weight: 700; color: var(--muted); }
.ar-uimg img { width: clamp(52px, 15vw, 84px); height: clamp(52px, 15vw, 84px); image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(var(--g), .55)); }
.ar-un { font-size: 13px; }
.ar-hp { position: relative; width: 100%; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ar-hp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #22c55e, #86efac); transition: width .2s; }
.ar-row.foe .ar-hp i { background: linear-gradient(90deg, #ef4444, #fca5a5); }
.ar-hp s { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(125, 211, 252, .65); transition: width .2s; }
.ar-hp em { position: absolute; inset: 0; font-style: normal; font-size: 9px; font-weight: 700; line-height: 12px; text-align: center; color: #fff; text-shadow: 0 1px 2px #000; }
.ar-en { width: 100%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ar-en i { display: block; height: 100%; background: var(--el); transition: width .15s; }
.ar-u .ar-ab { font-size: 10px; color: var(--el); font-weight: 600; min-height: 12px; }
.ar-st { position: absolute; bottom: -8px; left: 50%; translate: -50% 0; font-size: 13px; white-space: nowrap; }
.ar-mid { flex: 1; width: min(640px, 100%); display: grid; place-items: center; min-height: 60px; }
.ar-call { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 99px; background: rgba(0, 0, 0, .5); border: 1px solid var(--el); box-shadow: 0 0 30px var(--el);
  animation: arCall 1.1s cubic-bezier(.2, .9, .3, 1) forwards; }
.ar-call img { width: 34px; height: 34px; image-rendering: pixelated; } .ar-call b { font-family: "Space Grotesk"; font-size: 20px; color: var(--el); letter-spacing: .04em; }
@keyframes arCall { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1.05); } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.ar-tip { font-size: 12px; color: var(--muted); text-align: center; max-width: 420px; }
.ar-f { position: absolute; top: 30%; z-index: 3; font-style: normal; font-weight: 800; font-size: 15px; pointer-events: none; white-space: nowrap; translate: -50% 0;
  text-shadow: 0 2px 4px #000; animation: arFloat .9s ease-out forwards; }
.ar-f.dmg { color: #fff; } .ar-f.crit { color: #fbbf24; font-size: 19px; } .ar-f.reflect { color: #86efac; font-size: 12px; } .ar-f.dot { color: #c084fc; font-size: 12px; }
.ar-f.heal { color: #4ade80; } .ar-f.shield { color: #7dd3fc; } .ar-f.info { color: #cbd5e1; font-size: 12px; }
.ar-f.eff { color: #fb923c; font-size: 11px; top: 52%; } .ar-f.weakf { color: #94a3b8; font-size: 11px; top: 52%; }
@keyframes arFloat { 0% { opacity: 0; transform: translateY(8px) scale(.7); } 20% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-34px) scale(1); } }
.ar-proj { position: fixed; left: -5px; top: -5px; width: 10px; height: 10px; z-index: 95; pointer-events: none; image-rendering: pixelated; }
.ar-spark { position: fixed; left: -3px; top: -3px; width: 6px; height: 6px; z-index: 95; pointer-events: none; }
.ar-end { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(6, 5, 12, .72); animation: fadeIn .3s; }
.ar-endc { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px; border-radius: 22px; background: #16151f; border: 1px solid var(--border); width: min(380px, calc(100% - 32px)); text-align: center; }
.ar-end h2 { font-family: "Space Grotesk"; font-size: 34px; }
.ar-end.win h2 { color: #fde68a; text-shadow: 0 0 24px rgba(250, 204, 21, .6); } .ar-end.lose h2 { color: #fca5a5; }
.ar-mvp { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface); }
.ar-mvp img { width: 48px; height: 48px; image-rendering: pixelated; } .ar-mvp div { display: flex; flex-direction: column; text-align: left; }
.ar-endc .ask-btns { width: 100%; } .ar-endc .ask-btns .btn { flex: 1; }
html.reduce-fx .ar-u.ready { animation: none; }
/* Flamme 🔥 (jours de suite) à côté des pièces */
.streak { display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 11px; border-radius: 99px; background: rgba(249, 115, 22, .14); border: 1px solid rgba(249, 115, 22, .45);
  font-family: "Space Grotesk"; font-weight: 700; color: #fdba74; }
.streak span { font-size: 15px; filter: drop-shadow(0 0 6px rgba(249, 115, 22, .8)); }
.streak.cold { background: rgba(255, 255, 255, .05); border-color: var(--border); color: var(--muted); }
.streak.cold span { filter: grayscale(1) opacity(.6); }
.prof-streak { font-size: 15px; font-weight: 700; color: #fdba74; white-space: nowrap; }
@media (max-width: 760px) { .streak { height: 32px; padding: 0 8px; } }
/* Téléphone : le bouton « Donner un avis » revient en bas à gauche, en petit rond au-dessus de la barre d'onglets */
@media (max-width: 760px) {
  .fb-btn { display: flex !important; left: 12px !important; bottom: calc(var(--tabh) + 12px) !important; width: 44px; height: 44px; padding: 0 !important; justify-content: center; border-radius: 50%; }
  .fb-btn .fb-txt { display: none; }
}
@media (max-width: 760px) {
  /* barre du haut : la cloche des annonces est déjà dans le menu Plus (avec sa pastille) → plus de place pour la flamme */
  #open-notifs { display: none !important; }
  .nav-in { gap: 6px !important; }
}
/* Choix de la version (normale / mutation) d'un jeton pour l'équipe */
.ar-vpick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ar-vpick button { padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid var(--border); }
.ar-vpick button:hover { border-color: rgba(255, 255, 255, .35); }
.ar-vpick button.on { box-shadow: 0 0 0 2px var(--accent); }
.ar-vpick .v-gold { color: #3b2400; background: linear-gradient(135deg, #fef08a, #f59e0b); border: 0; }
.ar-vpick .v-celeste { color: #1e1b4b; background: linear-gradient(135deg, #fff, #c7d2fe); border: 0; }
.ar-vpick .v-ombre { color: #e9d5ff; background: #0b0614; border-color: #a855f7; }
.ar-pi { cursor: default; }
/* ----- Combat « 3 endroits » ----- */
.ar-round { font-family: "Space Grotesk"; font-size: 18px; }
.ar-pl { width: min(640px, 100%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; position: relative; }
.ar-pl b { font-size: 13px; letter-spacing: .04em; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-life { position: relative; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ar-life i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #22c55e, #86efac); transition: width .35s; }
.ar-pl.foe .ar-life i { background: linear-gradient(90deg, #ef4444, #fca5a5); }
.ar-life em { position: absolute; inset: 0; font-style: normal; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; color: #fff; text-shadow: 0 1px 2px #000; }
.ar-guard { font-size: 12px; font-weight: 700; color: #7dd3fc; min-width: 34px; text-align: right; }
.ar-u { cursor: pointer; padding-top: 16px; }
.ar-u.sel { border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 26px rgba(var(--g), .8); transform: translateY(-6px); }
.ar-u.foepick { border-color: var(--el); box-shadow: 0 0 0 2px var(--el), 0 0 22px var(--el); }
.ar-u.tired { opacity: .45; }
.ar-u.used .ar-uab { opacity: .25; }
.ar-uab { position: absolute; top: 4px; left: 50%; translate: -50% 0; font-size: 12px; color: var(--el); text-shadow: 0 0 8px var(--el); }
.ar-ust { font-size: 11px; min-height: 14px; }
.ar-row.foe .ar-uimg img, .ar-row.me .ar-uimg img { width: clamp(46px, 13vw, 72px); height: clamp(46px, 13vw, 72px); }
.ar-lanes { position: relative; flex: 1; width: min(640px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-height: 150px; }
.ar-lane { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 8px 4px; border-radius: 16px; color: var(--muted);
  background: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 255, 255, .14); transition: background .2s, border-color .2s, transform .2s; }
.ar-lane span { position: absolute; top: 50%; left: 50%; translate: -50% -50%; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.ar-lane:not(:disabled):hover { background: rgba(139, 92, 246, .1); border-color: rgba(139, 92, 246, .6); }
.ar-lane.pick { background: rgba(139, 92, 246, .22); border: 1px solid #a78bfa; box-shadow: 0 0 22px rgba(139, 92, 246, .5); transform: translateY(-3px); }
.ar-lane.frozen { background: rgba(125, 211, 252, .12); border-color: rgba(125, 211, 252, .6); }
.ar-lane.frozen span::after { content: " ❄️"; }
.ar-lane.clash { animation: arClash .7s ease-out; border-color: #fbbf24; }
@keyframes arClash { 0% { background: rgba(251, 191, 36, .45); transform: scale(1.04); } 100% { background: rgba(255, 255, 255, .03); transform: none; } }
.ar-slotf, .ar-slotm { position: relative; width: 56px; height: 56px; display: grid; place-items: center; }
.ar-slotf img, .ar-slotm img { width: 52px; height: 52px; image-rendering: pixelated; filter: drop-shadow(0 0 10px var(--el)); }
.ar-slotf i, .ar-slotm i { position: absolute; top: -4px; right: -4px; font-style: normal; font-size: 14px; color: var(--el); text-shadow: 0 0 8px var(--el); }
.ar-lanes .ar-call { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 4; white-space: nowrap; }
.ar-lanes .ar-f.clashf { top: 42%; left: 50% !important; font-size: 18px; color: #fbbf24; }
.ar-pl .ar-f { top: -6px; }
.ar-bar { width: min(640px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 92px; text-align: center; }
.ar-bar p { font-size: 14px; color: var(--muted); } .ar-bar p b { color: var(--text); }
.ar-bar .btn { min-width: 180px; }
.ar-barr { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; justify-content: center; }
.ar-abil { display: flex; flex-direction: column; align-items: flex-start; max-width: 220px; padding: 8px 12px; border-radius: 12px; text-align: left; font-weight: 700; font-size: 13px; color: var(--text);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--border); }
.ar-abil small { font-weight: 500; font-size: 11px; color: var(--muted); }
.ar-abil.on { background: rgba(250, 204, 21, .16); border-color: #facc15; box-shadow: 0 0 18px rgba(250, 204, 21, .45); }
.ar-abil.on::before { content: "✓ "; }
.ar-abil.off { opacity: .45; justify-content: center; }
@media (max-width: 760px) { .ar-lanes { min-height: 130px; } .ar-u { padding: 14px 4px 6px; } .ar-un { font-size: 11px; } .arena { gap: 6px; } }
/* ----- Fiche complète d'un jeton ----- */
.tk-sheet { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.tk-top { display: flex; gap: 16px; align-items: center; }
.tk-img { flex: none; width: 110px; height: 110px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--g), .35), transparent); }
.tk-img img { width: 100px; height: 100px; image-rendering: pixelated; filter: drop-shadow(0 0 14px rgba(var(--g), .7)); }
.tk-top h2 { font-family: "Space Grotesk"; font-size: 26px; margin: 4px 0; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; } .tk-chips span { padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .06); border: 1px solid var(--border); }
.tk-stats { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); }
.tk-bar { display: grid; grid-template-columns: 96px 1fr 56px; align-items: center; gap: 10px; font-size: 13px; }
.tk-bar span { color: var(--muted); } .tk-bar b { text-align: right; }
.tk-bar div { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; } .tk-bar i { display: block; height: 100%; background: linear-gradient(90deg, rgba(var(--g), .6), rgb(var(--g))); }
.tk-sk { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-left: 3px solid var(--el); }
.tk-sk small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--el); }
.tk-sk b { font-size: 16px; } .tk-sk p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.tk-sk.p { border-left-color: rgba(255, 255, 255, .35); } .tk-sk.p small { color: var(--muted); }
.tk-sk.done { opacity: .5; }
.tk-status { display: flex; flex-wrap: wrap; gap: 6px; } .tk-status span { padding: 4px 10px; border-radius: 99px; font-size: 12px; background: rgba(255, 255, 255, .06); }
.tk-vp small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tk-choose { width: 100%; padding: 14px; font-size: 16px; }
.tk-back { align-self: flex-start; margin-bottom: 6px; padding: 6px 12px; border-radius: 99px; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, .05); }
/* Choix : grille façon Bestiaire */
.ar-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; max-height: 62dvh; overflow-y: auto; padding: 4px; }
.ar-pc { cursor: pointer; } .ar-pc.off { opacity: .35; cursor: not-allowed; } .ar-pc.cur { box-shadow: 0 0 0 2px var(--accent); }
.ar-inteam { font-size: 10px !important; color: var(--muted); }
@media (max-width: 760px) { .ar-pgrid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .tk-img { width: 86px; height: 86px; } .tk-img img { width: 76px; height: 76px; } .tk-top h2 { font-size: 22px; } .tk-bar { grid-template-columns: 84px 1fr 50px; } }
/* ----- Combat : cartes, glisser, envol ----- */
.ar-ui { position: absolute; top: 3px; left: 50%; translate: -50% 0; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800; font-style: italic; font-family: Georgia, serif;
  color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); line-height: 16px; z-index: 2; }
.ar-sk { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; line-height: 1.3; }
.ar-sk.a { color: var(--el); } .ar-sk.p { color: var(--muted); }
.ar-u.used .ar-sk.a { text-decoration: line-through; opacity: .5; }
.ar-u.out .ar-uimg { opacity: .2; transform: scale(.85); transition: opacity .2s, transform .2s; }
.ar-u.lifted .ar-uimg { opacity: .25; }
.ar-u.sel.can-drag { cursor: grab; }
.ar-ghost { position: fixed; z-index: 97; pointer-events: none; image-rendering: pixelated; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(255, 255, 255, .35)); }
.ar-lane.hover { background: rgba(139, 92, 246, .3); border: 1px solid #c4b5fd; box-shadow: 0 0 28px rgba(139, 92, 246, .7); transform: scale(1.03); }
.ar-bar small { font-size: 11px; opacity: .8; }
.ar-row.me .ar-u { touch-action: none; }
.fx { will-change: transform, opacity; }
.jm-lvl { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 99px; vertical-align: middle; color: #c4b5fd; background: rgba(139, 92, 246, .18); border: 1px solid rgba(139, 92, 246, .45); }
/* Combat sur petits écrans (en hauteur) : tout doit tenir, la barre d'action toujours visible */
.arena { overflow-y: auto; }
.ar-lanes { flex: 1 1 auto; }
@media (max-height: 780px) {
  .arena { gap: 4px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .ar-top .ar-x { width: 34px; height: 34px; }
  .ar-round { font-size: 16px; }
  .ar-u { padding: 13px 4px 4px; gap: 2px; }
  .ar-row.foe .ar-uimg img, .ar-row.me .ar-uimg img { width: 42px; height: 42px; }
  .ar-un { font-size: 11px; }
  .ar-hp { height: 10px; } .ar-hp em { line-height: 10px; font-size: 8px; }
  .ar-lanes { min-height: 84px; }
  .ar-slotf, .ar-slotm { width: 40px; height: 40px; } .ar-slotf img, .ar-slotm img { width: 38px; height: 38px; }
  .ar-bar { min-height: 0; gap: 6px; }
  .ar-bar p { font-size: 12px; line-height: 1.35; }
  .ar-bar p small:not(.ar-foeoff) { display: none; }
  .ar-abil small { display: none; }
  .ar-abil { padding: 8px 12px; justify-content: center; }
  .ar-bar .btn { min-width: 140px; padding: 10px 16px; }
}
@media (max-height: 680px) { .ar-sk.p { display: none; } .ar-ust { display: none; } }
/* Fiche d'un jeton dans la fenêtre : pleine largeur */
.jm-card.sheetmode { display: block !important; max-width: 560px; margin-inline: auto; }
.jm-card.sheetmode .tk-sheet { margin-top: 8px; }

/* ===================== Choix d'un jeton pour l'équipe (grande fenêtre) ===================== */
.tp-box { position: fixed; inset: 0; z-index: 115; display: grid; place-items: center; padding: 20px; background: rgba(5, 4, 10, .72); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .25s; }
.tp-box.on { opacity: 1; }
.tp-panel { width: min(1080px, 100%); height: min(760px, calc(100dvh - 40px)); display: flex; flex-direction: column; border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, #1b1830, #121019); border: 1px solid rgba(139, 92, 246, .3); box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(139, 92, 246, .45);
  transform: translateY(16px) scale(.98); transition: transform .3s cubic-bezier(.2, .9, .3, 1); }
.tp-box.on .tp-panel { transform: none; }
.tp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.tp-head h2 { font-family: "Space Grotesk"; font-size: 26px; }
.tp-hbtn { display: flex; gap: 8px; align-items: center; }
.tp-x { width: 40px; height: 40px; border-radius: 50%; font-size: 16px; color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid var(--border); }
.tp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 400px; }
.tp-left { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.tp-els { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 18px 4px; }
.tp-els button { padding: 7px 13px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--border); }
.tp-els button.on { color: #fff; background: rgba(139, 92, 246, .25); border-color: rgba(139, 92, 246, .7); }
.tp-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; padding: 12px 18px 20px; align-content: start; }
.tp-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 22px 8px 12px; border-radius: 18px; color: var(--text);
  background: radial-gradient(circle at 50% 30%, rgba(var(--g), .22), rgba(255, 255, 255, .02) 65%); border: 1px solid rgba(var(--g), .3); transition: transform .18s, border-color .18s, box-shadow .18s; }
.tp-c:hover { transform: translateY(-3px); border-color: rgba(var(--g), .7); }
.tp-c.sel { border-color: var(--el); box-shadow: 0 0 0 2px var(--el), 0 0 28px -4px var(--el); transform: translateY(-3px); }
.tp-c.off { opacity: .4; }
.tp-c img { width: 76px; height: 76px; image-rendering: pixelated; filter: drop-shadow(0 0 12px rgba(var(--g), .6)); transition: transform .2s; }
.tp-c:hover img, .tp-c.sel img { transform: scale(1.08); }
.tp-c b { font-size: 14px; } .tp-c small { font-size: 11px; color: var(--muted); }
.tp-el { position: absolute; top: 7px; left: 9px; font-size: 14px; }
.tp-lv { position: absolute; top: 8px; right: 10px; font-size: 11px; font-weight: 700; color: #c4b5fd; }
.tp-vd { display: flex; gap: 3px; min-height: 7px; }
.tp-right { min-height: 0; overflow-y: auto; padding: 20px 22px; background: rgba(0, 0, 0, .15); }
.tp-right .tk-img { width: 130px; height: 130px; } .tp-right .tk-img img { width: 118px; height: 118px; }
.tp-back { display: none; }
.tp-empty { padding: 40px 0; text-align: center; }
@media (max-width: 860px) {
  .tp-box { padding: 0; place-items: stretch; }
  .tp-panel { width: 100%; height: 100dvh; border-radius: 0; border: 0; }
  .tp-head { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; } .tp-head h2 { font-size: 22px; }
  .tp-body { grid-template-columns: 1fr; position: relative; }
  .tp-left { border: 0; }
  .tp-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 12px calc(20px + env(safe-area-inset-bottom)); }
  .tp-c { padding: 20px 4px 10px; border-radius: 14px; } .tp-c img { width: 56px; height: 56px; } .tp-c b { font-size: 12px; }
  .tp-els { padding: 10px 12px 2px; } .tp-els button { padding: 6px 10px; font-size: 12px; }
  /* la fiche glisse par-dessus la grille */
  .tp-right { position: absolute; inset: 0; z-index: 2; background: #141221; transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .9, .3, 1); padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); }
  .tp-box.detail .tp-right { transform: none; }
  .tp-back { display: inline-block; margin-bottom: 10px; padding: 7px 14px; border-radius: 99px; font-weight: 700; color: var(--text); background: rgba(255, 255, 255, .07); }
}
/* Onglets des collections dans le choix des jetons (dès qu'il y en a plus d'une) */
.tp-series { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 18px 0; }
.tp-series button { padding: 8px 16px; border-radius: 12px; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--border); }
.tp-series button.on { color: #fff; background: linear-gradient(135deg, rgba(139, 92, 246, .35), rgba(249, 115, 22, .2)); border-color: rgba(139, 92, 246, .7); }
/* ----- Combat : infos et transitions ----- */
.ar-rest { position: absolute; left: 50%; top: 42%; translate: -50% -50%; z-index: 3; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; white-space: nowrap;
  color: #e2e8f0; background: rgba(15, 23, 42, .85); border: 1px solid rgba(148, 163, 184, .5); }
.ar-u.tired { opacity: .55; filter: grayscale(.6); }
.ar-recap { font-size: 12px; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid var(--border); color: var(--text); }
.ar-foeoff { color: #fca5a5; }
.ar-vs { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; background: radial-gradient(ellipse at center, rgba(42, 31, 74, .96), rgba(8, 6, 14, .98)); }
.ar-vsside { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: vsIn .6s cubic-bezier(.2, 1.1, .4, 1) both; }
.ar-vsside.s1 { --dx: -120vw; } .ar-vsside.s0 { --dx: 120vw; animation-delay: .1s; }
.ar-vsside b { font-family: "Space Grotesk"; font-size: 20px; letter-spacing: .04em; }
.ar-vsside div { display: flex; gap: 14px; }
.ar-vsside img { width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(0 0 12px rgba(167, 139, 250, .7)); }
.ar-vsmid { font-family: "Space Grotesk"; font-size: 64px; font-weight: 800; font-style: italic; background: linear-gradient(135deg, #fde68a, #f97316, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(249, 115, 22, .6)); animation: vsPop .5s .35s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes vsIn { from { transform: translateX(var(--dx)); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vsPop { from { transform: scale(3) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ar-banner { position: absolute; left: 50%; top: 50%; translate: none; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; padding: 10px 34px; white-space: nowrap;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .85), transparent); }
.ar-banner b { font-family: "Space Grotesk"; font-size: 30px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 0 16px rgba(196, 181, 253, .9); }
.ar-banner.rv { background: linear-gradient(90deg, transparent, rgba(249, 115, 22, .85), transparent); }
.ar-play { position: absolute; left: 50%; top: 10px; translate: -50% 0; z-index: 5; padding: 6px 16px; border-radius: 99px; font-size: 14px; white-space: nowrap;
  background: rgba(0, 0, 0, .6); border: 1px solid var(--el); box-shadow: 0 0 18px var(--el); animation: arCall 1.6s ease forwards; }
.ar-lanes.suspense .ar-lane { animation: susp .55s ease-in-out; }
@keyframes susp { 30% { transform: scale(.96); border-color: rgba(249, 115, 22, .8); } 60% { transform: scale(1.02); } }
.ar-ghost { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px var(--c, rgba(255, 255, 255, .35))); }
@media (max-height: 780px) { .ar-vsside img { width: 48px; height: 48px; } .ar-vsmid { font-size: 48px; } .ar-banner b { font-size: 22px; } .ar-recap { font-size: 11px; padding: 4px 10px; } }
/* ----- Combat : guidage (étapes ① ②), moins de clics ----- */
.ar-step { display: flex; align-items: center; gap: 10px; justify-content: center; }
.ar-step span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: "Space Grotesk"; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #ec4899); box-shadow: 0 0 16px rgba(139, 92, 246, .7); animation: stepPulse 1.6s ease-in-out infinite; }
.ar-step b { font-family: "Space Grotesk"; font-size: 17px; }
@keyframes stepPulse { 50% { transform: scale(1.12); box-shadow: 0 0 26px rgba(236, 72, 153, .8); } }
.ar-vsline { font-size: 12px; color: var(--muted); } .ar-vsline b { color: var(--text); }
.ar-abil.big { width: min(100%, 340px); align-items: center; text-align: center; padding: 10px 16px; border-radius: 14px; font-size: 14px; }
.ar-abil.big span { font-weight: 600; } .ar-abil.big span b { color: var(--text); }
.ar-abil.big.on { background: linear-gradient(135deg, rgba(250, 204, 21, .28), rgba(249, 115, 22, .18)); }
.ar-abil.on::before { content: none; }
/* étape ① : mes jetons jouables respirent et brillent */
.arena.ph-token .ar-row.me .ar-u:not(.tired):not(.ko) { border-color: rgba(var(--g), .8); box-shadow: 0 0 0 1px rgba(var(--g), .5), 0 0 22px -4px rgba(var(--g), .8); animation: pickMe 1.4s ease-in-out infinite; cursor: pointer; }
.arena.ph-token .ar-row.me .ar-u:not(.tired):not(.ko):hover { transform: translateY(-6px) scale(1.04); }
@keyframes pickMe { 50% { transform: translateY(-3px); } }
/* étape ② : les endroits s'allument, mon jeton choisi flotte */
.arena.ph-lane .ar-lane:not(:disabled) { border: 1px solid rgba(167, 139, 250, .55); background: linear-gradient(180deg, rgba(139, 92, 246, .06), rgba(139, 92, 246, .16)); animation: laneGlow 1.5s ease-in-out infinite; cursor: pointer; }
.arena.ph-lane .ar-lane:not(:disabled):hover { background: rgba(139, 92, 246, .3); transform: translateY(-3px); }
@keyframes laneGlow { 50% { box-shadow: inset 0 0 26px rgba(139, 92, 246, .45), 0 0 18px rgba(139, 92, 246, .25); } }
.arena.ph-lane .ar-row.me .ar-u.sel { animation: floatSel 1.2s ease-in-out infinite; cursor: grab; }
@keyframes floatSel { 50% { transform: translateY(-10px); } }
.ar-lhint { position: absolute; left: 50%; top: calc(50% + 16px); translate: -50% 0; font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: .04em; color: var(--muted); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.arena.ph-lane .ar-lhint { opacity: .8; }
/* Mini-tuto du premier combat */
.ar-tuto { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; padding: 20px; background: rgba(8, 6, 14, .9); backdrop-filter: blur(6px); }
.ar-tutoc { width: min(400px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 22px 22px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, #221c3b, #15121f); border: 1px solid rgba(139, 92, 246, .4); box-shadow: 0 0 60px -10px rgba(139, 92, 246, .6); }
.ar-tutoi { font-size: 54px; line-height: 1; animation: stepPulse 1.6s ease-in-out infinite; }
.ar-tutoc small { color: var(--muted); font-weight: 700; letter-spacing: .1em; }
.ar-tutoc h3 { font-family: "Space Grotesk"; font-size: 24px; }
.ar-tutoc p { color: var(--muted); line-height: 1.5; } .ar-tutoc p b { color: var(--text); }
.ar-tutoc .btn { width: 100%; padding: 14px; font-size: 16px; }
html.reduce-fx .arena.ph-token .ar-row.me .ar-u, html.reduce-fx .arena.ph-lane .ar-lane, html.reduce-fx .ar-step span { animation: none !important; }

/* ===================== Ring (arena.js, ring-ui.js) ===================== */
/* Menu Combat */
.fm { max-width: 640px; margin: 0 auto; width: 100%; }
.fm-rank { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(139, 92, 246, .16), var(--surface)); border: 1px solid rgba(139, 92, 246, .3); }
.fm-ico { font-size: 34px; line-height: 1; filter: drop-shadow(0 0 10px rgba(253, 230, 138, .35)); }
.fm-rank > div { display: flex; flex-direction: column; } .fm-rank small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.fm-rank b { font-family: "Space Grotesk"; font-size: 20px; }
.fm-elo { margin-left: auto; align-items: flex-end; } .fm-elo b { font-size: 26px; }
.fm-play { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 20px; border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #ec4899); box-shadow: 0 10px 30px rgba(139, 92, 246, .35); transition: transform .15s, filter .2s; }
.fm-play b { font-family: "Space Grotesk"; font-size: 26px; letter-spacing: .06em; } .fm-play small { font-size: 12px; opacity: .85; }
.fm-play:not(:disabled):hover { transform: translateY(-2px); } .fm-play:disabled { filter: saturate(.35) brightness(.7); cursor: default; box-shadow: none; }
.fm-train { width: 100%; padding: 14px; font-size: 16px; font-weight: 700; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); }
.fm-train:not(:disabled):hover { border-color: rgba(139, 92, 246, .6); } .fm-train:disabled { opacity: .5; }
.fm-need { text-align: center; margin-top: -10px; }
.fm-team { display: flex; flex-direction: column; gap: 10px; }
.fm-th { display: flex; align-items: center; justify-content: space-between; } .fm-th h3 { font-family: "Space Grotesk"; font-size: 18px; }
.ar-slot .ar-ab.passive, .tp-c .ar-ab.passive { color: var(--muted); }
.sy { display: flex; flex-wrap: wrap; gap: 6px; }
.sy > span { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 6px 10px; border-radius: 10px; font-size: 13px; background: var(--surface); border: 1px solid var(--border); }
.sy small { color: var(--muted); font-size: 11.5px; }
.sy .sy-re { border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.sy .sy-fam { border-color: rgba(253, 230, 138, .35); }
.sy-none { font-size: 12.5px; }
details.ar-help { display: block; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
details.ar-help summary { cursor: pointer; font-weight: 700; }
details.ar-help > * + * { margin-top: 10px; } details.ar-help h4 { font-family: "Space Grotesk"; }

/* Fiche : passif / abilité */
.tk-sk { padding: 10px 12px; border-radius: 12px; background: rgba(var(--g), .08); border: 1px solid rgba(var(--g), .3); text-align: left; }
.tk-sk.p { border-style: dashed; background: var(--surface); }
.tk-sk small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tk-sk b { display: block; } .tk-sk p { font-size: 13px; color: var(--muted); }

/* Modifier l'équipe */
.te .tp-panel { display: flex; flex-direction: column; }
.te-top { display: flex; flex-direction: column; gap: 8px; padding: 0 18px 10px; }
.te-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.te-s { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; background: linear-gradient(180deg, rgba(var(--g, 139, 92, 246), .14), var(--surface)); border: 1px solid rgba(var(--g, 139, 92, 246), .35); min-height: 112px; }
.te-s.empty { border-style: dashed; border-color: var(--border); background: var(--surface); justify-content: center; color: var(--muted); }
.te-s.empty b { font-size: 26px; font-weight: 300; }
.te-s img { width: 52px; height: 52px; image-rendering: pixelated; } .te-s > b { font-size: 12.5px; }
.te-rm { position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; color: var(--muted); background: rgba(0, 0, 0, .35); }
.te-v { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.te-v.v-gold { color: #fde68a; border-color: rgba(253, 230, 138, .5); } .te-v.v-celeste { color: #a5f3fc; border-color: rgba(165, 243, 252, .5); } .te-v.v-ombre { color: #c4b5fd; border-color: rgba(196, 181, 253, .5); }
.te-v:disabled { opacity: .7; cursor: default; }
.te-info { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.te-pts { font-weight: 800; color: #4ade80; } .te-pts.over { color: #fb7185; } .te-info small { font-size: 11.5px; }
.te-filt { padding: 0 18px 8px; display: flex; flex-direction: column; gap: 6px; }
.te-grid { flex: 1; overflow-y: auto; padding: 4px 18px 12px; align-content: start; }
.te-grid .tp-c { position: relative; }
.te-grid .tp-c.sel { border-color: #4ade80; box-shadow: 0 0 0 2px rgba(74, 222, 128, .35); }
.te-i { position: absolute; bottom: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; background: rgba(0, 0, 0, .35); color: var(--muted); }
.te-ok { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #4ade80; color: #0d0d12; }
.te-cost { font-size: 10.5px; color: var(--muted); }
.te-foot { padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.te-foot .btn { width: 100%; }

.ar-slot .ar-ab, .te-grid .ar-ab { color: var(--c); }
.te-pd { font-size: 10px; color: var(--muted); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.te-bars { display: flex; flex-direction: column; gap: 2px; width: 80%; margin: 2px 0; }
.te-bars i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.te-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 2px; background: #a78bfa; }
.te-bars i:nth-child(2)::after { background: #fb923c; } .te-bars i:nth-child(3)::after { background: #38bdf8; }

/* Écran du Ring : le ring prend presque tout l'écran, boutons gros et en bas (pouce) */
.rg { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 6px; padding: calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 45%, #221a3d, #0b0914 72%); opacity: 0; transition: opacity .25s; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
.rg.on { opacity: 1; }
.rg-top { display: grid; grid-template-columns: 40px 1fr 52px; align-items: center; gap: 8px; }
.rg-x { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .07); color: var(--muted); }
.rg-score { display: flex; align-items: center; justify-content: center; gap: 10px; }
.rg-score b { font-family: "Space Grotesk"; font-size: 14px; color: var(--muted); white-space: nowrap; }
.rg-score span { display: flex; gap: 4px; } .rg-score i { width: 12px; height: 12px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; transition: .3s; }
.rg-score .foe i { background: #fb7185; box-shadow: 0 0 8px #fb7185; } .rg-score i.off { background: rgba(255, 255, 255, .12); box-shadow: none; transform: scale(.7); }
.rg-timer { position: relative; width: 48px; height: 48px; justify-self: end; }
.rg-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rg-timer circle { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 3.5; }
.rg-timer circle.p { stroke: #a78bfa; stroke-dasharray: calc(var(--p, 1) * 100) 100; transition: stroke-dasharray .1s linear; }
.rg-timer b { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Space Grotesk"; font-size: 18px; font-weight: 800; }
.rg-timer.low circle.p { stroke: #fb7185; } .rg-timer.low b { color: #fb7185; animation: rgPulse .5s infinite alternate; }
.rg-names { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); padding: 0 4px; }
.rg-names > span:first-child { color: #4ade80; } .rg-names > span:last-child { color: #fb7185; }
.rg-ok { opacity: 0; transform: scale(.8); transition: .25s cubic-bezier(.2, 1.4, .4, 1); padding: 2px 10px; border-radius: 999px; background: rgba(74, 222, 128, .12); color: #86efac !important; font-weight: 700; }
.rg-ok.on { opacity: 1; transform: none; }
.rg-stage { position: relative; display: grid; place-items: center; min-height: 0; }
.rg-stage canvas { display: block; touch-action: none; cursor: crosshair; }
.rg-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; white-space: nowrap; font-family: "Space Grotesk"; font-weight: 900; font-size: 40px;
  color: var(--c, #fff); text-shadow: 0 0 22px var(--c, #fff), 0 3px 0 rgba(0, 0, 0, .5); }
.rg-banner.sm { font-size: 24px; top: 30%; }
.rg-hint { text-align: center; font-size: 13px; color: var(--muted); min-height: 18px; }
.rg-bot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rg-pw, .rg-go { min-height: 64px; border-radius: 18px; padding: 8px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; transition: transform .12s, filter .2s, background .2s; }
.rg-pw { background: rgba(255, 255, 255, .05); border: 2px dashed rgba(255, 255, 255, .14); }
.rg-pw b { font-size: 15px; } .rg-pw small { font-size: 11px; color: var(--muted); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rg-pw.ready { border-style: solid; border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.rg-pw.on { background: var(--c); color: #0b0914; border-color: var(--c); box-shadow: 0 0 22px var(--c); animation: rgOn 1s ease-in-out infinite; }
.rg-pw.on small { color: #0b0914; font-weight: 700; }
.rg-pw:disabled { opacity: .5; cursor: default; }
.rg-go { font-family: "Space Grotesk"; font-size: 20px; font-weight: 800; background: rgba(255, 255, 255, .08); color: var(--muted); }
.rg-go.ready { color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); box-shadow: 0 8px 26px rgba(139, 92, 246, .45); }
.rg-go.done { background: rgba(74, 222, 128, .15); color: #86efac; }
.rg-go:not(:disabled):active, .rg-pw:not(:disabled):active { transform: scale(.95); }
.rg-flash { position: fixed; inset: 0; pointer-events: none; mix-blend-mode: screen; z-index: 3; }
.rg-hl { position: relative; z-index: 6; outline: 3px solid #fde68a; outline-offset: 3px; border-radius: 18px; animation: rgHl 1s ease-in-out infinite; }
.rg-tip { position: fixed; left: 50%; z-index: 7; transform: translateX(-50%); width: min(92vw, 380px); padding: 14px 16px; border-radius: 16px; text-align: center; background: #1c1530; border: 1px solid rgba(253, 230, 138, .5); box-shadow: 0 12px 40px rgba(0, 0, 0, .6); }
.rg-tip p { font-weight: 600; margin-bottom: 10px; } .rg-tip div { display: flex; gap: 8px; justify-content: center; }
.rg-tip.top { top: calc(96px + env(safe-area-inset-top)); } .rg-tip.low { bottom: calc(110px + env(safe-area-inset-bottom)); }
.rg-res { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 20px; background: rgba(6, 4, 12, .78); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; overflow: hidden; }
.rg-res.on { opacity: 1; }
.rg-rbox { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(100%, 360px); padding: 26px 22px; border-radius: 22px; background: #15111f; border: 1px solid var(--border); text-align: center; }
.rg-rbox h2 { font-family: "Space Grotesk"; font-size: 44px; line-height: 1; }
.rg-res.win h2 { color: #fde68a; text-shadow: 0 0 30px rgba(253, 230, 138, .5); } .rg-res.lose h2 { color: #fb7185; }
.rg-rleft { display: flex; align-items: center; gap: 12px; } .rg-rleft span { display: flex; gap: 4px; } .rg-rleft img { width: 34px; height: 34px; image-rendering: pixelated; border-radius: 50%; }
.rg-rleft .me img { box-shadow: 0 0 0 2px #4ade80; } .rg-rleft .foe img { box-shadow: 0 0 0 2px #fb7185; }
.rg-rbtn { display: flex; gap: 8px; width: 100%; margin-top: 6px; } .rg-rbtn .btn { flex: 1; }
.rg-conf { position: absolute; top: 0; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; }
@keyframes rgPulse { to { transform: scale(1.12); } }
@keyframes rgOn { 50% { box-shadow: 0 0 34px var(--c); } }
@keyframes rgHl { 50% { outline-color: rgba(253, 230, 138, .25); } }
@media (min-width: 900px) { .rg { max-width: 760px; margin: 0 auto; } .rg::before { content: ""; position: fixed; inset: 0; z-index: -1; background: #0b0914; } }

/* Ring : stats expliquées (mêmes couleurs partout : poids violet, puissance orange, taille bleu) */
.rs { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.rs-row { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 4px 8px; }
.rs-row small { grid-column: 1 / -1; font-size: 11px; color: var(--muted); line-height: 1.3; margin-top: -2px; }
.rs-l { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rs-b { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.rs-b i { display: block; height: 100%; border-radius: 4px; }
.rs-row.mass .rs-b i { background: linear-gradient(90deg, #7c3aed, #a78bfa); } .rs-row.pow .rs-b i { background: linear-gradient(90deg, #ea580c, #fb923c); } .rs-row.size .rs-b i { background: linear-gradient(90deg, #0284c7, #38bdf8); }
.rs-row b { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.rs.compact { gap: 3px; width: 100%; padding: 0 2px; }
.rs.compact .rs-row { grid-template-columns: 16px 1fr; gap: 4px; }
.rs.compact .rs-l { font-size: 10px; } .rs.compact .rs-l { overflow: hidden; width: 14px; } .rs.compact .rs-b { height: 5px; } .rs.compact b { display: none; }
.te-legend { padding: 0 18px 6px; font-size: 11px; color: var(--muted); line-height: 1.4; }

/* Ring : les équipes dans les coins (la sienne en haut à droite, la tienne en bas à gauche) */
.rg-team { position: absolute; display: flex; gap: 6px; z-index: 2; }
.rg-team.foe { top: 4px; right: 4px; } .rg-team.me { bottom: 4px; left: 4px; }
.rg-tc { position: relative; width: 42px; height: 42px; border-radius: 50%; padding: 3px; background: radial-gradient(circle at 35% 30%, #3a2f5a, #120d20); box-shadow: 0 0 0 2px #22c55e, 0 4px 12px rgba(0, 0, 0, .5); transition: transform .15s, filter .3s; }
.rg-team.foe .rg-tc { box-shadow: 0 0 0 2px #f43f5e, 0 4px 12px rgba(0, 0, 0, .5); }
.rg-tc img { width: 100%; height: 100%; border-radius: 50%; image-rendering: pixelated; object-fit: cover; }
.rg-tc:hover { transform: scale(1.08); } .rg-tc.sel { box-shadow: 0 0 0 3px #fff, 0 0 14px rgba(255, 255, 255, .5); }
.rg-tc.ko { filter: grayscale(1) brightness(.4); }
.rg-tcp { position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #0b0914; background: var(--c); box-shadow: 0 0 8px var(--c); }
.rg-tc.ko .rg-tcp { background: #444; color: #fff; box-shadow: none; }
/* Ring : fiche d'un jeton pendant le match */
.rg-info { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; padding: 20px; background: rgba(5, 3, 12, .6); backdrop-filter: blur(3px); }
.rg-ic { position: relative; width: min(100%, 340px); display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(var(--g), .16), #15111f 45%); border: 2px solid #22c55e; }
.rg-ic.foe { border-color: #f43f5e; }
.rg-icx { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .07); color: var(--muted); }
.rg-ih { display: flex; gap: 12px; align-items: center; } .rg-ih img { width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(var(--g), .6)); }
.rg-ih b { display: block; font-size: 18px; font-family: "Space Grotesk"; } .rg-ih small { color: var(--muted); font-size: 12px; }
.rg-ip { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.rg-ip b { color: var(--c); } .rg-ip p { font-size: 13.5px; margin: 2px 0; } .rg-ip small { font-size: 11.5px; color: var(--muted); }
.rg-banner { font-size: clamp(26px, 8.5vw, 40px); text-align: center; line-height: 1.05; }
.rg-banner small { display: block; font-size: .45em; font-weight: 700; opacity: .85; letter-spacing: .04em; }