/** Shopify CDN: Minification failed

Line 424:0 All "@import" rules must come first

**/
/* ============================================================
   cdm-lobby.css — Écran d'accueil CDM by Nawhal's
   v3 — fixes + bracket + onboarding
   ============================================================ */

/* ═══════════════════════════════════════════════
   ONBOARDING — Booster 4 clics + Reveal
   ═══════════════════════════════════════════════ */

:root {
  --ob-ease:     cubic-bezier(.2,.8,.2,1);
  --ob-ease-out: cubic-bezier(.16,1,.3,1);
  --ob-gold:     #ffbc27;
  --ob-gold-hot: #ff8d00;
}

.cdm-ob {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  font-family: 'Nunito', 'Trebuchet MS', Arial, sans-serif;
  background: #060f1c;
  display: grid;
  place-items: center;
}

/* Bouton PASSER */
.cdm-ob-skip {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 60;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-family: inherit;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.cdm-ob-skip:hover { background: rgba(255,255,255,.28); transform: scale(1.05); }

/* Fond chaud booster */
.cdm-ob-warm-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,244,214,.95), transparent 25%),
    radial-gradient(circle at 15% 20%, rgba(255,211,106,.36), transparent 18%),
    linear-gradient(180deg, #fff9ed 0%, #f7e8cb 58%, #f0c66c 100%);
  z-index: 0;
  opacity: 1;
  transition: opacity .5s ease;
  pointer-events: none;
  /* Stabilité GPU — évite le flickering pendant les animations de shake */
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.cdm-ob.done .cdm-ob-warm-bg { opacity: 0; }

/* Scene booster */
.cdm-ob-scene {
  position: relative;
  width: min(86vw, calc(88svh * 535 / 1100), 380px);
  aspect-ratio: 535 / 1100;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  user-select: none;
  -webkit-user-select: none;
}
.cdm-ob-scene.idle .cdm-ob-booster-wrap { animation: ob-hover-bob 3.2s ease-in-out infinite; }
.cdm-ob.done .cdm-ob-scene { pointer-events: none; }

@keyframes ob-hover-bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.cdm-ob-ground {
  position: absolute; bottom: 4%; width: 78%; height: 8%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,170,26,.42), rgba(255,170,26,0));
  filter: blur(12px); z-index: 0;
  transition: opacity .35s var(--ob-ease);
}
.cdm-ob-back-stars {
  position: absolute; inset: 14% 16% 16%; border-radius: 40px;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.9) 0 1.2%, transparent 1.7%),
    radial-gradient(circle at 72% 24%, rgba(255,233,168,.9) 0 1.3%, transparent 1.8%),
    radial-gradient(circle at 64% 64%, rgba(255,210,98,.86) 0 1.2%, transparent 1.7%);
  opacity: .3; filter: blur(.2px); z-index: 1; pointer-events: none;
  transition: opacity .35s var(--ob-ease);
}
.cdm-ob-booster-wrap {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 8;
}
.cdm-ob-booster-shake {
  position: absolute; inset: 0; display: grid; place-items: center;
  transform-origin: 50% 60%;
}
.cdm-ob-booster-shot {
  width: 100%; height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 26px 34px rgba(124,72,0,.18));
  transition: opacity .45s var(--ob-ease), transform .55s var(--ob-ease);
}
.cdm-ob-glow-shell {
  position: absolute; inset: 5% 6% 6%; border-radius: 40px;
  background: radial-gradient(circle at 50% 48%, rgba(255,235,162,.55), rgba(255,189,44,.12) 58%, transparent 72%);
  opacity: .3; z-index: 2; pointer-events: none;
  transition: opacity .28s var(--ob-ease), transform .28s var(--ob-ease);
}
.cdm-ob-pulse-ring {
  position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1;
  border-radius: 999px; transform: translate(-50%,-50%) scale(.76);
  border: 3px solid rgba(255,215,110,.82);
  opacity: 0; z-index: 2; box-shadow: 0 0 26px rgba(255,191,35,.36);
  transition: opacity .25s var(--ob-ease), transform .34s var(--ob-ease);
  pointer-events: none;
}
.cdm-ob-energy-bar {
  position: absolute; left: -14%; top: 22%; bottom: 22%;
  width: 10px; border-radius: 999px;
  background: rgba(255,255,255,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
  overflow: hidden; z-index: 8; pointer-events: none;
  transition: opacity .3s;
}
.cdm-ob-energy-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(180deg, #ffe27a, var(--ob-gold) 50%, var(--ob-gold-hot));
  box-shadow: 0 0 14px rgba(255,180,30,.85);
  transition: height .35s var(--ob-ease-out);
}
.cdm-ob-click-pop {
  position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1;
  border-radius: 999px; transform: translate(-50%,-50%) scale(.4);
  border: 2px solid rgba(255,222,140,.85); opacity: 0; z-index: 3; pointer-events: none;
}
.cdm-ob-click-pop--fire { animation: ob-click-pop .55s var(--ob-ease-out) forwards; }
.cdm-ob-sparkles { position: absolute; inset: 18% 10% 12%; z-index: 6; pointer-events: none; }
.cdm-ob-spark {
  position: absolute; width: 8px; height: 8px; border-radius: 999px;
  background: radial-gradient(circle, #fff8d8 0 40%, rgba(255,210,90,.85) 60%, transparent 75%);
  box-shadow: 0 0 10px rgba(255,210,90,.85); opacity: 0;
}
.cdm-ob-spark--fire { animation: ob-spark-rise 1s var(--ob-ease-out) forwards; }
.cdm-ob-flash {
  position: absolute; inset: 12%; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,251,239,1), rgba(255,214,102,.95) 34%, transparent 80%);
  opacity: 0; transform: scale(.15); filter: blur(10px); z-index: 3; pointer-events: none;
  mix-blend-mode: screen;
}
.cdm-ob-fullscreen-light {
  position: fixed; inset: -25vmax;
  background: radial-gradient(circle,
    rgba(255,255,255,1) 0%, rgba(255,224,140,.98) 48%, rgba(255,166,20,.6) 82%, transparent 100%);
  opacity: 0; transform: scale(.1); z-index: 50; pointer-events: none;
  transition: opacity .35s var(--ob-ease), transform .55s var(--ob-ease);
}

/* Indicateur de clics */
.cdm-ob-hint {
  position: absolute;
  bottom: -14%;
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 10; pointer-events: none;
  transition: opacity .3s;
}
.cdm-ob-hint.clicking { opacity: 0; }
.cdm-ob-hint-text {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ob-gold);
  text-shadow: 0 0 12px rgba(255,188,39,.5);
  animation: ob-hint-pulse 1.4s ease-in-out infinite;
}
.cdm-ob-hint-pips {
  display: flex; gap: 6px;
}
.cdm-ob-hint-pips span {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(255,188,39,.5);
  transition: background .2s, border-color .2s;
}
.cdm-ob-hint-pips span.active {
  background: var(--ob-gold);
  border-color: var(--ob-gold);
  box-shadow: 0 0 8px rgba(255,188,39,.6);
}

/* Charges (shake) */
.cdm-ob-scene.charge-1 .cdm-ob-booster-shake { animation: ob-shake1 .3s linear; }
.cdm-ob-scene.charge-2 .cdm-ob-booster-shake { animation: ob-shake2 .35s linear; }
.cdm-ob-scene.charge-3 .cdm-ob-booster-shake { animation: ob-shake3 .42s linear; }
.cdm-ob-scene.charge-4 .cdm-ob-booster-shake { animation: ob-shake4 .55s linear; }
.cdm-ob-scene.charge-1 .cdm-ob-glow-shell { opacity: .5; transform: scale(1.03); }
.cdm-ob-scene.charge-2 .cdm-ob-glow-shell { opacity: .68; transform: scale(1.06); }
.cdm-ob-scene.charge-3 .cdm-ob-glow-shell { opacity: .85; transform: scale(1.1); }
.cdm-ob-scene.charge-4 .cdm-ob-glow-shell { opacity: 1; transform: scale(1.16); }
.cdm-ob-scene.charge-1 .cdm-ob-pulse-ring { opacity: .35; transform: translate(-50%,-50%) scale(.92); }
.cdm-ob-scene.charge-2 .cdm-ob-pulse-ring { opacity: .55; transform: translate(-50%,-50%) scale(1.02); }
.cdm-ob-scene.charge-3 .cdm-ob-pulse-ring { opacity: .8;  transform: translate(-50%,-50%) scale(1.12); }
.cdm-ob-scene.charge-4 .cdm-ob-pulse-ring { opacity: 1;   transform: translate(-50%,-50%) scale(1.22); }
.cdm-ob-scene.charge-2 .cdm-ob-back-stars { opacity: .5; }
.cdm-ob-scene.charge-3 .cdm-ob-back-stars { opacity: .68; }
.cdm-ob-scene.charge-4 .cdm-ob-back-stars { opacity: .85; }
.cdm-ob-scene.charge-4 .cdm-ob-flash { opacity: .35; transform: scale(.95); transition: opacity .18s linear, transform .22s linear; }
.cdm-ob-scene.reveal .cdm-ob-booster-shot { opacity: 0; transform: scale(.55); filter: none; }
.cdm-ob-scene.reveal .cdm-ob-glow-shell,
.cdm-ob-scene.reveal .cdm-ob-pulse-ring,
.cdm-ob-scene.reveal .cdm-ob-back-stars,
.cdm-ob-scene.reveal .cdm-ob-ground,
.cdm-ob-scene.reveal .cdm-ob-energy-bar { opacity: 0; }
.cdm-ob-scene.reveal .cdm-ob-fullscreen-light { opacity: 1; transform: scale(1.4); }
.cdm-ob-scene.reveal .cdm-ob-flash { opacity: 1; transform: scale(2.1); transition: opacity .2s var(--ob-ease), transform .42s var(--ob-ease); }
.cdm-ob-scene.done .cdm-ob-booster-shot,
.cdm-ob-scene.done .cdm-ob-glow-shell,
.cdm-ob-scene.done .cdm-ob-pulse-ring,
.cdm-ob-scene.done .cdm-ob-back-stars,
.cdm-ob-scene.done .cdm-ob-ground,
.cdm-ob-scene.done .cdm-ob-energy-bar { opacity: 0; transition: opacity .3s; }
.cdm-ob-scene.done .cdm-ob-fullscreen-light { opacity: 0; transform: scale(2); transition: opacity 1s var(--ob-ease), transform 1.4s var(--ob-ease); }
.cdm-ob-scene.done .cdm-ob-flash { opacity: 0; transition: opacity .4s var(--ob-ease); }

/* Unlock screen */
.cdm-ob-unlock {
  position: absolute; inset: 0; z-index: 15;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #060f1c;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .01s;
}
.cdm-ob.done .cdm-ob-unlock {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.cdm-ob-unlock-inner {
  position: relative; flex-shrink: 0; line-height: 0;
  width: min(100vw, calc(72svh * 3 / 4));
  height: min(72svh, calc(100vw * 4 / 3));
}
.cdm-ob-unlock-bg {
  display: block; width: 100%; height: 100%; object-fit: contain;
}
.cdm-ob-unlock-overlay { position: absolute; inset: 0; z-index: 1; }

/* Titre */
.cdm-ob-unlock-title {
  position: absolute; top: 0; left: 0; right: 0;
  padding-top: 3%; text-align: center; z-index: 10;
  opacity: 0; transform: translateY(-28px) scale(.94);
  transition: opacity .6s var(--ob-ease-out) .2s, transform .7s var(--ob-ease-out) .2s;
}
.cdm-ob.done .cdm-ob-unlock-title { opacity: 1; transform: translateY(0) scale(1); }
.cdm-ob-unlock-sub {
  display: block;
  font-size: clamp(.6rem, 2.4vw, .84rem);
  font-weight: 900; letter-spacing: .3em; text-transform: uppercase;
  color: #ffca4a; text-shadow: 0 0 20px rgba(255,180,30,.8);
  margin-bottom: 2px;
}
.cdm-ob-unlock-sub::before { content: "★ "; }
.cdm-ob-unlock-sub::after  { content: " ★"; }
.cdm-ob-unlock-main {
  display: block;
  font-size: clamp(2rem, 10vw, 5rem);
  font-weight: 900; text-transform: uppercase; line-height: .88;
  color: #fff8dc;
  text-shadow: 0 0 28px rgba(255,215,74,1), 0 3px 0 rgba(185,115,0,.9), 0 14px 30px rgba(0,0,0,.6);
  -webkit-text-stroke: 1px rgba(180,110,0,.35);
}

/* Mascotte */
.cdm-ob-mascot-wrap {
  position: absolute; left: 50%; bottom: 28%;
  width: 56%; height: 52%;
  transform: translateX(-50%);
  z-index: 10; pointer-events: none;
}
.cdm-ob-mascot {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  opacity: 0; transform: translateY(60px) scale(.45);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 40px rgba(255,200,80,.65)) drop-shadow(0 20px 30px rgba(0,0,0,.55));
}
.cdm-ob-mascot.show { animation: ob-mascot-reveal 1.1s var(--ob-ease-out) forwards; }
.cdm-ob-mascot.idle-bob {
  opacity: 1; transform: translateY(0) scale(1);
  animation: ob-mascot-bob 3.4s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(255,200,80,.65)) drop-shadow(0 20px 30px rgba(0,0,0,.55));
}

/* Plaque pays */
.cdm-ob-country-plate {
  position: absolute; bottom: 4%; left: 50%;
  transform: translateX(-50%) translateY(22px);
  z-index: 11; display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity .55s var(--ob-ease-out) .65s, transform .65s var(--ob-ease-out) .65s;
}
.cdm-ob.done .cdm-ob-country-plate { opacity: 1; transform: translateX(-50%) translateY(0); }

.cdm-ob-flag {
  width: 52px; height: 38px;
  border-radius: 6px;
  border: 2px solid rgba(255,202,74,.5);
  overflow: hidden;
  box-shadow: 0 0 14px rgba(255,180,30,.4);
}
.cdm-ob-country-name {
  background: linear-gradient(175deg, #18304e, #0d1f35);
  border: 1.5px solid rgba(255,202,74,.44);
  border-radius: 14px;
  padding: 12px 28px;
  color: #fff7ea;
  font-weight: 900; text-transform: uppercase;
  letter-spacing: .1em;
  font-size: clamp(.85rem, 3vw, 1.3rem);
  text-align: center;
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
  min-width: 140px;
}

/* CTA */
.cdm-ob-cta {
  position: absolute;
  bottom: calc(4% + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%);
  width: min(88%, 320px);
  height: 52px;
  background: linear-gradient(175deg, #ffe040 0%, #f5c518 35%, #d97800 100%);
  border: 3px solid #4a1e00;
  border-radius: 20px;
  color: #fff;
  font-family: inherit;
  font-size: 1rem; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 0 2px 0 #4a1e00;
  box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 0 28px rgba(245,197,24,.3);
  cursor: pointer;
  animation: ob-cta-pulse 2s ease-in-out infinite;
  z-index: 20;
  opacity: 0;
  transition: opacity .5s ease .8s;
}
.cdm-ob.done .cdm-ob-cta { opacity: 1; }

/* Confetti canvas */
.cdm-ob-confetti {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 55;
  opacity: 0; transition: opacity .25s;
}
.cdm-ob-confetti.active { opacity: 1; }

/* ── Keyframes onboarding ── */
@keyframes ob-hint-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: .45; }
}
@keyframes ob-shake1 {
  0%,100% { transform: translate(0,0) rotate(0); }
  25% { transform: translate(-3px,1px) rotate(-1deg); }
  75% { transform: translate(-2px,1px) rotate(-.6deg); }
}
@keyframes ob-shake2 {
  0%,100% { transform: translate(0,0) rotate(0) scale(1); }
  20% { transform: translate(-6px,2px) rotate(-2deg) scale(1.02); }
  60% { transform: translate(-5px,1px) rotate(-1.4deg) scale(1.015); }
}
@keyframes ob-shake3 {
  0%,100% { transform: translate(0,0) rotate(0) scale(1); }
  15% { transform: translate(-9px,3px) rotate(-3deg) scale(1.04); }
  45% { transform: translate(-8px,2px) rotate(-2.4deg) scale(1.035); }
}
@keyframes ob-shake4 {
  0%,100% { transform: translate(0,0) rotate(0) scale(1); }
  10% { transform: translate(-13px,4px) rotate(-5deg) scale(1.06); }
  34% { transform: translate(-12px,3px) rotate(-4deg) scale(1.07); }
  72% { transform: translate(8px,-2px) rotate(2.5deg) scale(1.05); }
}
@keyframes ob-click-pop {
  0% { opacity: .9; transform: translate(-50%,-50%) scale(.4); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); }
}
@keyframes ob-spark-rise {
  0% { opacity: 0; transform: translate(0,20px) scale(.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx,0),-120px) scale(1.1); }
}
@keyframes ob-mascot-reveal {
  0%  { opacity: 0; transform: translateY(70px) scale(.4); }
  45% { opacity: 1; transform: translateY(-14px) scale(1.08); }
  70% { transform: translateY(4px) scale(.98); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ob-mascot-bob {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.012); }
}
@keyframes ob-cta-pulse {
  0%,100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.02); }
}

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap');

/* ── Fix critique : l'attribut hidden doit toujours masquer,
   même si une règle CSS a display:flex sur l'élément ── */
[hidden] { display: none !important; }

/* -------------------------------------------------------
   Variables
   ------------------------------------------------------- */
#cdm-menu-section {
  --lobby-yellow:      #f5c518;
  --lobby-yellow-glow: rgba(245,197,24,.35);
  --lobby-orange:      #d97800;
  --lobby-orange-dk:   #4a1e00;
  --lobby-green:       #13a84e;
  --lobby-green-d:     #0c7a35;
  --lobby-sky:         #060e1a;
  --lobby-white:       #ffffff;
  --lobby-muted:       #8db89e;
  --lobby-card-bg:     rgba(5, 14, 22, 0.92);
  --lobby-card-bd:     rgba(255,255,255,0.16);
  --lobby-font:        'Nunito', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --lobby-r-xs:        8px;
  --lobby-r-sm:        12px;
  --lobby-r-md:        16px;
  --lobby-r-lg:        20px;
  --lobby-r-xl:        26px;
  --lobby-r-pill:      999px;
  --lobby-safe-top:    env(safe-area-inset-top, 0px);
  --lobby-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* -------------------------------------------------------
   Wrapper principal
   ------------------------------------------------------- */
#cdm-menu-section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  font-family: var(--lobby-font);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cdm-phone {
  position: relative;
  width: min(420px, 100vw);
  height: 100vh;
  height: 100dvh;
  max-height: calc(420px * 19.5 / 9);
  overflow: hidden;
  background: var(--lobby-sky);
  color: var(--lobby-white);
}

/* Écrase l'ancienne règle de cdm-arcade.css qui limitait
   le téléphone à min(744px, 100svh) — causait une ligne noire
   sur mobile quand la barre Safari réduisait 100svh ≈ 715px */
#cdm-menu-section .cdm-phone {
  height: 100vh;
  height: 100dvh;
  max-height: calc(420px * 19.5 / 9);
  background: var(--lobby-sky);
}

/* -------------------------------------------------------
   Fond — stade
   ------------------------------------------------------- */
.cdm-lobby-bg-stadium {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* -------------------------------------------------------
   Header gradient
   ------------------------------------------------------- */
.cdm-lobby-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22%;
  z-index: 18;
  background: linear-gradient(to bottom, rgba(4,12,18,.9) 0%, transparent 100%);
  pointer-events: none;
}

/* -------------------------------------------------------
   Logo
   ------------------------------------------------------- */
.cdm-lobby-logo {
  position: absolute;
  top: calc(var(--lobby-safe-top) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: auto;
  display: block;
  z-index: 20;
  pointer-events: none;
}

/* -------------------------------------------------------
   Chips haut — plus visibles
   ------------------------------------------------------- */
.cdm-lobby-chip {
  position: absolute;
  top: calc(var(--lobby-safe-top) + 8px);
  display: flex;
  align-items: center;
  height: 38px;
  background: rgba(4,14,10,.88);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: var(--lobby-r-sm);
  box-shadow: 0 3px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 0 10px;
  font-weight: 800;
  font-size: .68rem;
  gap: 6px;
  z-index: 22;
  backdrop-filter: blur(8px);
  font-family: var(--lobby-font);
}

.cdm-lobby-chip--profile {
  left: 3%;
  gap: 7px;
  padding: 3px 11px 3px 5px;
  height: 42px;
}

.cdm-lobby-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid var(--lobby-yellow);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--lobby-green-d);
  display: grid;
  place-items: center;
  box-shadow: 0 0 8px var(--lobby-yellow-glow);
}

.cdm-lobby-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  display: block;
  opacity: 0;
  transition: opacity .3s ease;
}
.cdm-lobby-avatar-img.loaded { opacity: 1; }

.cdm-lobby-chip-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.cdm-lobby-chip-pseudo {
  font-size: .72rem;
  font-weight: 900;
  color: var(--lobby-white);
  letter-spacing: .02em;
}

.cdm-lobby-chip-level {
  font-size: .56rem;
  font-weight: 800;
  color: #4de88a;
  letter-spacing: .04em;
}

.cdm-lobby-chip--tickets {
  right: 21%;
  gap: 4px;
  font-size: .72rem;
}

.cdm-lobby-chip--currency {
  right: 3%;
  gap: 6px;
  font-size: .72rem;
}

.cdm-lobby-coin-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe066, #d6a000);
  border: 1.5px solid #a07800;
  display: grid;
  place-items: center;
  font-size: .5rem;
  font-weight: 900;
  color: #4a1e00;
}

/* -------------------------------------------------------
   Scène mascotte — abaissée pour ne pas toucher les chips
   ------------------------------------------------------- */
.cdm-lobby-mascot-stage {
  position: absolute;
  top: 17%;        /* plus bas qu'avant (était 14%) */
  left: 8%;
  right: 8%;
  bottom: 40%;     /* laisse plus de place en bas */
  z-index: 5;
  pointer-events: none;
}

.cdm-lobby-mascot-halo {
  position: absolute;
  top: 5%; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 80%;
  background: radial-gradient(circle at 50% 45%,
    rgba(255,220,60,.28) 0%, rgba(30,200,80,.18) 35%, transparent 68%);
  filter: blur(18px);
}

.cdm-lobby-mascot-spotlight {
  position: absolute;
  bottom: -2%; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 30%;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255,220,80,.22) 0%, rgba(20,180,70,.12) 50%, transparent 80%);
  filter: blur(10px);
}

.cdm-lobby-mascot-shadow {
  position: absolute;
  bottom: 1%; left: 50%;
  transform: translateX(-50%);
  width: 50%; height: 6%;
  background: rgba(0,0,0,.45);
  border-radius: 50%;
  filter: blur(10px);
}

.cdm-lobby-mascot-img {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 88%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.5));
  animation: cdm-lobby-idle 3.2s ease-in-out infinite;
  opacity: 0;
  transition: opacity .35s ease;
}
.cdm-lobby-mascot-img.loaded { opacity: 1; }

@keyframes cdm-lobby-idle {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-5px); }
}

/* Fix vestiaire mascot opacity (l'original est géré par inline styles) */
.cdm-ves-mascot {
  transition: opacity .25s ease !important;
}

/* -------------------------------------------------------
   Carte prochain match
   ------------------------------------------------------- */
.cdm-lobby-match-card {
  position: absolute;
  left: 4%; right: 4%;
  bottom: 22%;
  background: var(--lobby-card-bg);
  border: 1.5px solid var(--lobby-card-bd);
  border-radius: var(--lobby-r-xl);
  padding: 10px 14px 11px;
  box-shadow: 0 8px 24px rgba(0,0,0,.48);
  z-index: 15;
  backdrop-filter: blur(10px);
  animation: cdm-lobby-slide-up .48s cubic-bezier(.22,1,.36,1) both .15s;
  font-family: var(--lobby-font);
}

@keyframes cdm-lobby-slide-up {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.cdm-lobby-match-header {
  text-align: center;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lobby-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 9px;
}
.cdm-lobby-match-header span { color: var(--lobby-green); font-weight: 900; }

.cdm-lobby-match-row {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 88px;
  align-items: center;
  gap: 4px;
}

.cdm-lobby-match-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cdm-lobby-match-flag {
  width: 38px; height: 28px;
  border-radius: var(--lobby-r-xs);
  border: 2px solid rgba(255,255,255,.25);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
}

.cdm-lobby-match-team-name {
  font-size: .52rem;
  font-weight: 800;
  text-align: center;
  color: rgba(255,255,255,.85);
  letter-spacing: .02em;
}

.cdm-lobby-match-vs {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--lobby-yellow);
  text-align: center;
  text-shadow: 0 0 12px var(--lobby-yellow-glow);
  line-height: 1;
}

.cdm-lobby-match-reward {
  background: rgba(10,40,20,.7);
  border: 1px solid rgba(50,200,80,.35);
  border-radius: var(--lobby-r-sm);
  padding: 6px 8px;
  text-align: center;
}

.cdm-lobby-match-round {
  font-size: .56rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lobby-white);
  line-height: 1.2;
}

.cdm-lobby-match-gain {
  font-size: .5rem;
  font-weight: 700;
  color: var(--lobby-yellow);
  margin-top: 2px;
}

.cdm-lobby-match-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 9px;
  padding: 0 2px;
  gap: 4px;
}

.cdm-lobby-progress-line {
  flex: 1; height: 2px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
}
.cdm-lobby-progress-line.done { background: var(--lobby-green); }

.cdm-lobby-progress-dot {
  font-size: .4rem;
  font-weight: 800;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.cdm-lobby-progress-dot.active {
  color: var(--lobby-white);
  font-weight: 900;
}
.cdm-lobby-progress-dot.active::after {
  content: '';
  display: block;
  margin-top: 3px;
  width: 100%; height: 2px;
  background: var(--lobby-yellow);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--lobby-yellow-glow);
}

/* -------------------------------------------------------
   Bottom action — JOUER / Changer / Gain
   ------------------------------------------------------- */
.cdm-lobby-bottom {
  position: absolute;
  left: 4%; right: 4%;
  bottom: calc(9.5% + 8px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: stretch;
  z-index: 15;
  animation: cdm-lobby-slide-up .48s cubic-bezier(.22,1,.36,1) both .28s;
}

.cdm-lobby-btn-change {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255,255,255,.09);
  border: 1.5px solid rgba(255,255,255,.16);
  border-radius: var(--lobby-r-md);
  padding: 6px 10px;
  cursor: pointer;
  color: rgba(255,255,255,.7);
  font-family: var(--lobby-font);
  font-size: .42rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  min-width: 56px;
  transition: transform .1s ease;
}
.cdm-lobby-btn-change:active { transform: scale(.88); }

.cdm-lobby-btn-change-avatar {
  width: 40px; height: 40px;
  border-radius: var(--lobby-r-sm);
  border: 2px solid rgba(255,255,255,.22);
  overflow: hidden;
  background: var(--lobby-green-d);
}
.cdm-lobby-btn-change-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.cdm-lobby-btn-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(245,197,24,.1);
  border: 1.5px solid rgba(245,197,24,.28);
  border-radius: var(--lobby-r-md);
  padding: 6px 10px;
  min-width: 56px;
}
.cdm-lobby-btn-reward-icon { width: 22px; height: 22px; }
.cdm-lobby-btn-reward-coins {
  font-family: var(--lobby-font);
  font-size: .58rem;
  font-weight: 900;
  color: var(--lobby-yellow);
  text-shadow: 0 0 8px var(--lobby-yellow-glow);
}
.cdm-lobby-btn-reward-label {
  font-family: var(--lobby-font);
  font-size: .37rem;
  font-weight: 700;
  color: rgba(245,197,24,.55);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* JOUER */
.cdm-lobby-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg,
    #c95e00 0%,
    #e07a00 15%,
    #f5a500 30%,
    #ffd540 50%,
    #f5a500 70%,
    #e07a00 85%,
    #c95e00 100%);
  border: 3px solid #7a3300;
  border-radius: var(--lobby-r-lg);
  color: #fff;
  font-family: var(--lobby-font);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(80,30,0,.85), 0 0 14px rgba(0,0,0,.35);
  box-shadow:
    0 14px 36px rgba(0,0,0,.55),
    0 0 32px rgba(245,165,0,.35),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.2);
  cursor: pointer;
  animation: cdm-lobby-play-pulse 2.2s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  transition: transform .1s ease;
}
.cdm-lobby-play-btn::after {
  content: '';
  position: absolute;
  top: -40%; left: -60%;
  width: 50%; height: 180%;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  animation: cdm-lobby-btn-shine 2.8s ease-in-out infinite;
}
@keyframes cdm-lobby-btn-shine {
  0% { transform: translateX(-30%) skewX(-15deg); }
  60%, 100% { transform: translateX(280%) skewX(-15deg); }
}
@keyframes cdm-lobby-play-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
.cdm-lobby-play-btn:active { transform: scale(.9) !important; animation: none; }

/* -------------------------------------------------------
   Navigation basse
   ------------------------------------------------------- */
.cdm-lobby-nav {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(9.5% + var(--lobby-safe-bottom));
  padding: 4px 4px var(--lobby-safe-bottom);
  background: linear-gradient(180deg, #0d1c30 0%, #060e1a 100%);
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -6px 24px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  align-items: center;
  z-index: 25;
}

.cdm-lobby-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: var(--lobby-r-sm);
  background: transparent;
  color: rgba(255,255,255,.38);
  font-family: var(--lobby-font);
  font-weight: 700;
  font-size: .44rem;
  padding: 5px 2px 4px;
  cursor: pointer;
  transition: color .15s, background .15s, transform .1s;
  text-transform: uppercase;
  letter-spacing: .04em;
  min-height: 44px;
}
.cdm-lobby-nav-btn .cdm-lobby-nav-icon {
  width: 22px; height: 22px;
  display: block;
  opacity: .42;
  transition: opacity .15s;
}
.cdm-lobby-nav-btn .cdm-lobby-nav-icon-img {
  filter: brightness(0) invert(1);
  object-fit: contain;
}
.cdm-lobby-nav-btn.active {
  background: rgba(245,197,24,.14);
  color: var(--lobby-yellow);
  border: 1.5px solid rgba(245,197,24,.4);
  box-shadow: 0 0 12px rgba(245,197,24,.22);
}
.cdm-lobby-nav-btn.active .cdm-lobby-nav-icon {
  opacity: 1;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.55));
}
.cdm-lobby-nav-btn.active .cdm-lobby-nav-icon-img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.55));
}
.cdm-lobby-nav-btn:active { transform: scale(.88); }

/* -------------------------------------------------------
   ════════════════════════════════════════
   BRACKET TOURNOI
   ════════════════════════════════════════
   ------------------------------------------------------- */
.cdm-bracket-panel {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: linear-gradient(180deg, #050e18 0%, #081520 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--lobby-font);
  animation: cdm-bracket-in .32s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cdm-bracket-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Header */
.cdm-bracket-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.cdm-bracket-close {
  width: 32px; height: 32px;
  border-radius: var(--lobby-r-sm);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.6);
  font-size: .85rem;
  cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.cdm-bracket-title {
  flex: 1;
  text-align: center;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lobby-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Zone champion */
.cdm-bracket-champion-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 10px;
  gap: 3px;
  flex-shrink: 0;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(245,197,24,.18) 0%, transparent 65%);
}
.cdm-bracket-champion-cup {
  font-size: 2.2rem;
  filter: drop-shadow(0 0 12px rgba(245,197,24,.6));
  line-height: 1;
}
.cdm-bracket-champion-label {
  font-size: .44rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lobby-yellow);
  opacity: .65;
}
.cdm-bracket-champion-flag {
  width: 44px; height: 32px;
  border-radius: var(--lobby-r-xs);
  border: 2px solid rgba(245,197,24,.5);
  overflow: hidden;
  box-shadow: 0 0 10px var(--lobby-yellow-glow);
  margin-top: 3px;
}
.cdm-bracket-champion-name {
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--lobby-yellow);
  text-shadow: 0 0 12px var(--lobby-yellow-glow);
}

/* Liste des rounds */
.cdm-bracket-rounds-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.cdm-bracket-rounds-list::-webkit-scrollbar { display: none; }

/* Carte round */
.cdm-bracket-round {
  border-radius: var(--lobby-r-lg);
  padding: 11px 14px;
  border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  position: relative;
  transition: border-color .2s, background .2s;
}
.cdm-bracket-round--won {
  border-color: rgba(50,200,80,.35);
  background: rgba(10,60,20,.45);
}
.cdm-bracket-round--current {
  border-color: rgba(245,197,24,.5);
  background: rgba(50,35,0,.45);
  box-shadow: 0 0 18px rgba(245,197,24,.2);
}
.cdm-bracket-round--locked {
  opacity: .45;
}

.cdm-bracket-round-label {
  font-size: .48rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--lobby-muted);
  margin-bottom: 8px;
}
.cdm-bracket-round--current .cdm-bracket-round-label {
  color: var(--lobby-yellow);
}
.cdm-bracket-round--won .cdm-bracket-round-label {
  color: #4de88a;
}

.cdm-bracket-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.cdm-bracket-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cdm-bracket-team--right { align-items: center; }

.cdm-bracket-flag {
  width: 38px; height: 28px;
  border-radius: var(--lobby-r-xs);
  border: 1.5px solid rgba(255,255,255,.2);
  overflow: hidden;
  display: block;
}
.cdm-bracket-team-name {
  font-size: .5rem;
  font-weight: 800;
  color: rgba(255,255,255,.8);
  text-align: center;
}
.cdm-bracket-team--me .cdm-bracket-team-name {
  color: var(--lobby-white);
}

.cdm-bracket-score {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--lobby-font);
  font-size: 1.4rem;
  font-weight: 900;
  color: rgba(255,255,255,.15);
  min-width: 52px;
  justify-content: center;
}
.cdm-bracket-score.played { color: var(--lobby-white); }
.cdm-bracket-score .sep { font-size: 1rem; opacity: .5; }
.cdm-bracket-score .score-me   { color: #4de88a; }
.cdm-bracket-score .score-opp  { color: #ff6b6b; }

.cdm-bracket-vs-lock {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--lobby-yellow);
  text-align: center;
  min-width: 52px;
}
.cdm-bracket-round--locked .cdm-bracket-vs-lock { color: rgba(255,255,255,.2); }

.cdm-bracket-gain {
  margin-top: 7px;
  text-align: center;
  font-size: .44rem;
  font-weight: 700;
  color: var(--lobby-yellow);
  opacity: .65;
}
.cdm-bracket-round--won .cdm-bracket-gain { opacity: 1; }

/* Badge statut */
.cdm-bracket-status {
  position: absolute;
  top: 10px; right: 12px;
  font-size: .38rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--lobby-r-pill);
}
.cdm-bracket-round--won    .cdm-bracket-status { background: rgba(50,200,80,.25); color: #4de88a; border: 1px solid rgba(50,200,80,.4); }
.cdm-bracket-round--current .cdm-bracket-status { background: rgba(245,197,24,.2); color: var(--lobby-yellow); border: 1px solid rgba(245,197,24,.4); }
.cdm-bracket-round--lost   .cdm-bracket-status { background: rgba(200,50,50,.25); color: #ff6b6b; border: 1px solid rgba(200,50,50,.4); }
.cdm-bracket-round--locked .cdm-bracket-status { display: none; }

/* Pied de page bracket */
.cdm-bracket-footer {
  padding: 10px 14px calc(var(--lobby-safe-bottom) + 10px);
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.cdm-bracket-cta {
  width: 100%;
  height: 52px;
  font-size: 1.1rem;
}
.cdm-bracket-cta:disabled {
  opacity: .35;
  cursor: not-allowed;
  animation: none;
}