/* MEEZ ROYALE - menu : cartes de verre, barre de navigation, accueil en 3 colonnes.
   Charge apres style.css (qui garde le HUD et les composants de panneaux). */

:root {
  --card-bg: linear-gradient(155deg, rgba(46,39,32,.74), rgba(22,19,16,.84));
  --card-solid: #1a1714;
  --card-line: rgba(255,255,255,.09);
  --grad: linear-gradient(90deg, var(--brand), var(--brand2));
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ui: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- police d'affichage : titres, gros boutons, logo, onglets — une police "jeu" condensee, distincte du texte courant (Inter) ---------- */
.logo, .pane-title, .card-title, .modal-title, .sub-title,
h1, h2, h3,
.btn, .btn-ghost, .btn-solid, .tab, .navlink, .navlink span,
.res-title, .guest-title, .lw-title, .lw-kicker, .lw-big, .party-title, .party-label,
.pm-title, .char-name, .chip, .prime-page-title, .hero-brand .logo,
.play-face span, .host-btn span, #playLabel {
  font-family: var(--ui-display);
  letter-spacing: .2px;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- composants de base (boutons, champs, onglets, pastilles) ---------- */
.field { width: 100%; margin-top: 12px; padding: 14px 16px; font-size: 16px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(8,7,6,.62); color: var(--text); outline: none;
  font-family: var(--ui); transition: border-color .15s, box-shadow .15s; }
.field::placeholder { color: #7d7669; }
.field:focus { border-color: var(--brand2); box-shadow: 0 0 0 3px rgba(240,160,192,.16); }

.btn { width: 100%; margin-top: 14px; padding: 14px 18px; font: 800 15px var(--ui); letter-spacing: .3px;
  border: none; border-radius: 12px; cursor: pointer; color: #2a1710; clip-path: none;
  background: var(--grad); transition: filter .15s, transform .12s var(--ease), box-shadow .2s;
  box-shadow: 0 8px 22px rgba(240,200,105,.18); text-transform: none; }
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(240,200,105,.28); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; filter: none; }
.btn-ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--text); box-shadow: none; }
.btn-ghost:hover { filter: none; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.28); box-shadow: none; }
.btn-solid { background: var(--grad); color: #2a1710; }
.small-btn { width: auto; margin-top: 0; padding: 8px 15px; font-size: 13px; border-radius: 10px; }
.link-btn { background: none; border: none; color: var(--brand); font: 600 12px var(--ui); cursor: pointer; padding: 2px 0;
  opacity: .85; text-decoration: none; }
.link-btn:hover { opacity: 1; text-decoration: underline; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding: 4px; border-radius: 14px;
  background: rgba(0,0,0,.3); border: 1px solid var(--card-line); }
.tab { flex: 1; min-width: 88px; padding: 9px 12px; font: 700 13px var(--ui); text-align: center; letter-spacing: .2px;
  text-transform: none; background: none; border: none; border-radius: 10px; cursor: pointer; color: var(--text);
  opacity: .6; transition: background .18s, opacity .18s, color .18s; }
.tab:hover { opacity: .95; background: rgba(255,255,255,.06); }
.tab.on { opacity: 1; color: #2a1710; background: var(--grad); border: none; }
.sub-tabs { margin-bottom: 14px; grid-template-columns: none; }
.sub-tabs .tab { padding: 8px 10px; font-size: 12.5px; }

.err { margin-top: 12px; font-size: 13px; color: #ff8d90; font-family: var(--ui); }
.hint { font-size: 12.5px; opacity: .6; margin-top: 8px; line-height: 1.45; }
.sep, .build { display: none; }
.sub-title { font: 700 11.5px var(--ui); text-transform: uppercase; letter-spacing: 1.2px; opacity: .6; margin: 18px 0 10px; }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font: 800 11.5px var(--mono);
  color: var(--brand); background: rgba(240,200,105,.12); border: 1px solid rgba(240,200,105,.28); white-space: nowrap; }
.chip.soft { color: var(--text); background: rgba(255,255,255,.06); border-color: var(--card-line); opacity: .85; font-weight: 600; }
.chip:empty { display: none; }

.ico-coin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #f0c869 45%, #b8862a);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset, 0 0 9px rgba(240,200,105,.45); }
.ico-gem { display: inline-block; width: 12px; height: 12px; margin: 0 2px; transform: rotate(45deg); border-radius: 3px; vertical-align: -1px;
  background: linear-gradient(135deg, #c9f5ff, #4cc3f0 50%, #2378c4); box-shadow: 0 0 9px rgba(76,195,240,.55); }

.nav-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff;
  font: 800 10.5px/17px var(--mono); text-align: center; font-style: normal; box-shadow: 0 2px 8px rgba(229,72,77,.5); }
.nav-badge.hidden { display: none; }

/* ---------- fond du menu ---------- */
#menu { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: stretch;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #3d3832 transparent;
  /* la carte du jeu, animee, se voit derriere : voile sombre + vignette (le canvas #game est dessine par client.js) */
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(240,200,105,.15), transparent 70%),
    radial-gradient(ellipse 55% 55% at 100% 100%, rgba(240,160,192,.10), transparent 70%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(240,200,105,.08), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 46%, rgba(8,7,6,.12) 30%, rgba(6,5,4,.62) 100%),
    linear-gradient(180deg, rgba(24,19,15,.5) 0%, rgba(9,8,7,.72) 100%);
  animation: none; }
#embers { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#embers span { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 7px 1px rgba(240,200,105,.65); animation: emberRise linear infinite; opacity: 0; }
@keyframes emberRise {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: .8; }
  85% { opacity: .35; }
  100% { transform: translate(var(--dx, 20px), -105vh); opacity: 0; }
}
#siteBanner { position: relative; z-index: 6; }

/* ---------- barre du haut ---------- */
#topnav { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 10px 26px; background: linear-gradient(180deg, rgba(24,20,17,.94), rgba(20,17,14,.78));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--card-line); }
#navLeft { display: flex; align-items: center; gap: 14px; justify-self: start; min-width: 0; }
#navRight { display: flex; align-items: center; gap: 8px; justify-self: end; }

#langSwitch { display: inline-flex; align-items: center; gap: 8px; padding: 4px 5px 4px 11px; border-radius: 999px; flex: none;
  background: rgba(255,255,255,.05); border: 1px solid var(--card-line); }
.lang-globe { opacity: .65; flex: none; }
.lang-opts { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 999px; background: rgba(0,0,0,.4); }
.lang-btn { position: relative; z-index: 1; width: 40px; height: 28px; border: none; background: none; color: var(--text);
  font: 800 12px var(--mono); letter-spacing: .6px; cursor: pointer; opacity: .6; border-radius: 999px; transition: color .2s, opacity .2s; }
.lang-btn:hover { opacity: 1; }
.lang-btn.on { opacity: 1; color: #2a1710; }
.lang-thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 999px; background: var(--grad);
  transition: transform .3s var(--ease); box-shadow: 0 3px 12px rgba(240,200,105,.35); }
#langSwitch[data-lang="en"] .lang-thumb { transform: translateX(100%); }

#navAccount { display: flex; align-items: center; gap: 10px; min-width: 0; }
.account-row { display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; padding: 4px 12px 4px 4px; border-radius: 999px;
  border: 1px solid transparent; transition: background .18s, border-color .18s; min-width: 0; }
.account-row:hover { background: rgba(255,255,255,.06); border-color: var(--card-line); }
.avatar-dot { width: 36px; height: 36px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: 2px solid rgba(255,255,255,.3); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.account-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#accountHello { font: 700 14px var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.level-row { display: flex; align-items: center; gap: 7px; }
.level-badge { font: 800 10px var(--mono); border-radius: 5px; padding: 1px 6px; color: #2a1710; background: var(--grad); }
.level-bar { width: 64px; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(0,0,0,.5); display: block; }
#levelFill { display: block; height: 100%; width: 0%; background: var(--grad); transition: width .8s var(--ease); }

#navLinks { display: flex; align-items: center; gap: 4px; justify-self: center; padding: 6px 0; }
.navlink { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; white-space: nowrap; border-radius: 999px;
  background: none; border: 1px solid transparent; color: var(--text); opacity: .68; font: 700 13.5px var(--ui); letter-spacing: .1px;
  text-transform: none; cursor: pointer; transition: background .18s, opacity .18s, transform .18s var(--ease), box-shadow .2s; }
.navlink svg { flex: none; }
.navlink:hover { opacity: 1; background: rgba(255,255,255,.07); transform: translateY(-1px); }
.navlink.on { opacity: 1; color: #2a1710; background: var(--grad); box-shadow: 0 6px 22px rgba(240,200,105,.24); border-bottom: 1px solid transparent; transform: none; }
.navlink .nav-badge { position: absolute; top: -4px; right: -3px; }
/* barre epinglee (Accueil/Boutique/Pass/Perso/Classement) : assez de place pour que le nom s'affiche a cote de sa petite icone */
#navLinks > .navlink { padding: 10px 18px; border-radius: 14px; font-size: 14px; }
#navLinks > .navlink svg { width: 16px; height: 16px; }

/* ---------- options (langue + reglages), en haut a gauche ---------- */
.nom-lang-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px 12px; font: 700 12.5px var(--ui); }
/* filet vertical entre deux zones de la barre du haut : ne touche ni le haut ni le bas de la barre */
.nav-sep, .nav-right-sep { width: 1px; height: 22px; background: var(--card-line); margin: 0 6px; flex: none; }


/* ---------- menu compact des options (langue / reglages / admin), en haut a gauche derriere l'icone engrenage ---------- */
.nav-more { position: relative; }
.nav-more-menu { position: fixed; z-index: 40; display: flex; flex-direction: column; gap: 2px; min-width: 178px; padding: 7px; border-radius: 16px;
  background: linear-gradient(155deg, rgba(30,26,21,.98), rgba(16,14,12,.98)); border: 1px solid var(--card-line);
  box-shadow: 0 18px 40px rgba(0,0,0,.5); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s; }
.nav-more-menu:not(.hidden) { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s; }
.nav-more-menu .navlink { width: 100%; justify-content: flex-start; border-radius: 10px; padding: 10px 12px; }
.nav-more-menu .navlink span { display: inline; }
.nav-more-menu .navlink.hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-more-menu, .nav-more-menu:not(.hidden) { transition: opacity .12s; transform: none; } }

/* ---------- reseaux sociaux (Discord / Instagram) : couleurs de marque, pas le gris uniforme des autres icones - doivent se voir tout de suite ---------- */
.social-btn { opacity: 1; color: #fff; border-color: transparent; transition: transform .15s var(--ease), box-shadow .15s, filter .15s; }
.social-btn:hover { filter: brightness(1.12); transform: translateY(-2px) scale(1.06); }
.social-discord { background: linear-gradient(155deg, #7a8bfc, #5865f2); box-shadow: 0 4px 14px rgba(88,101,242,.45); }
.social-discord:hover { box-shadow: 0 7px 22px rgba(88,101,242,.6); }
.social-insta { background: linear-gradient(140deg, #f9ce34, #ee2a7b 55%, #6228d7); box-shadow: 0 4px 14px rgba(238,42,123,.4); }
.social-insta:hover { box-shadow: 0 7px 22px rgba(238,42,123,.55); }

.curr { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 9px; border-radius: 999px; font: 700 13.5px var(--mono);
  background: rgba(255,255,255,.055); border: 1px solid var(--card-line); }
.curr b { color: #fff; font-weight: 800; }
.curr-btn { cursor: pointer; color: inherit; transition: background .15s, border-color .15s, transform .15s var(--ease); }
.curr-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.curr-btn:active { transform: none; }
.curr-plus { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 1px; border-radius: 50%;
  background: var(--grad); color: #2a1710; font: 800 12px/1 var(--ui); font-style: normal; flex: none; }
.icon-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.055); border: 1px solid var(--card-line); color: var(--text); opacity: .8; cursor: pointer; padding: 0;
  transition: opacity .15s, background .15s, transform .15s var(--ease), border-color .15s; }
.icon-btn:hover { opacity: 1; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); transform: translateY(-1px); }
.icon-btn.on { opacity: 1; color: var(--brand); background: rgba(240,200,105,.14); border-color: rgba(240,200,105,.4); }
.plus-btn { font: 800 20px/1 var(--ui); color: #2a1710; background: var(--grad); border: none; opacity: 1; width: 30px; height: 30px; margin-left: -2px; }
.plus-btn:hover { background: var(--grad); filter: brightness(1.12); }
.badge-dot { top: -4px; right: -4px; }

/* ---------- scene : accueil ou panneau ---------- */
#menuStage { position: relative; z-index: 2; width: 100%; max-width: 1300px; margin: 0 auto; padding: 22px 26px 64px;
  background: none; border: none; box-shadow: none; clip-path: none; display: block; text-align: left; }
#menuStage::before { display: none; }
.stage-pane { animation: paneIn .5s var(--ease) both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(12px); } }

/* ---------- cartes ---------- */
.card { position: relative; border-radius: 20px; padding: 16px 18px 18px; text-align: left;
  background: var(--card-bg); border: 1px solid var(--card-line);
  box-shadow: 0 18px 50px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07); overflow: hidden; }
.card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 0 0 3px 3px; opacity: .8;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand2), transparent); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 12px; }
.card-title { font: 800 12px var(--ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand); display: flex; align-items: center; gap: 8px; }
.card-title .nav-badge { margin-left: 2px; }
.card-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--brand); }

/* ---------- centre : logo, jouer ---------- */
.hero-crown { color: var(--brand2); margin: 6px auto 0; filter: drop-shadow(0 0 14px rgba(240,160,192,.5)); }
.logo { font: 900 clamp(44px, 5.4vw, 74px)/1.02 var(--mono); letter-spacing: 3px; margin-top: 2px; text-shadow: 0 8px 44px rgba(240,200,105,.22); }
.logo-a { color: #fff; }
.logo-b { background: linear-gradient(90deg, var(--brand), var(--brand2), var(--brand)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: logoShine 7s linear infinite; }
@keyframes logoShine { to { background-position: -200% 0; } }
.tagline { margin-top: 12px; font: 500 17px var(--ui); opacity: .88; letter-spacing: .2px; }
.prime-ribbon { margin: 10px 0 0; }

.pill { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 7px 15px 7px 12px; border-radius: 999px;
  font: 600 12.5px var(--ui); background: rgba(255,255,255,.055); border: 1px solid var(--card-line); }
.pill b { color: var(--brand); }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #57c25f; box-shadow: 0 0 0 0 rgba(87,194,95,.6); animation: livePulse 2s ease-out infinite; flex: none; }
.pill.off .pulse-dot { background: #8a8378; animation: none; box-shadow: none; }
.pill.warn .pulse-dot { background: #ff9d4d; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(87,194,95,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(87,194,95,0); } }

.play-zone { width: 100%; max-width: 400px; margin-top: 18px; }
#playGuest .field { text-align: center; font-size: 17px; margin-top: 0; padding: 15px 16px; }
#playGuest .hint { text-align: center; }
.hello { font: 700 18px var(--ui); margin-bottom: 2px; }
.play-wrap { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.btn-play { position: relative; display: block; width: 100%; height: 74px; border: none; border-radius: 22px; cursor: pointer; overflow: hidden;
  color: #2a1710; background: linear-gradient(100deg, var(--brand), var(--brand2) 55%, var(--brand)); background-size: 220% 100%;
  box-shadow: 0 16px 44px rgba(240,200,105,.28), inset 0 0 0 1px rgba(255,255,255,.28), inset 0 -5px 0 rgba(0,0,0,.14);
  transition: transform .2s var(--ease), box-shadow .2s, filter .2s; animation: playGlow 3.4s ease-in-out infinite; }
.btn-play:hover { transform: translateY(-3px) scale(1.025); filter: brightness(1.06); box-shadow: 0 22px 58px rgba(240,200,105,.42), inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -5px 0 rgba(0,0,0,.14); }
.btn-play:active { transform: translateY(1px) scale(.99); }
.btn-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn-play:disabled { filter: grayscale(.75) brightness(.7); animation: none; cursor: default; transform: none; box-shadow: none; }
.play-face { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; gap: 13px;
  font: 900 27px var(--mono); letter-spacing: 3px; }
.play-ico { flex: none; }
.btn-play .shine { position: absolute; top: -30%; bottom: -30%; width: 20%; left: -30%; transform: rotate(18deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: shineSweep 5s ease-in-out infinite; }
@keyframes shineSweep { 0%, 58% { left: -30%; } 82%, 100% { left: 135%; } }
@keyframes playGlow { 50% { box-shadow: 0 20px 56px rgba(240,200,105,.44), inset 0 0 0 1px rgba(255,255,255,.3), inset 0 -5px 0 rgba(0,0,0,.14); } }
.status { min-height: 20px; margin-top: 10px; font: 500 13px var(--ui); color: #ff9d9f; text-align: center; }
.status:empty { min-height: 0; margin: 0; }

/* groupe : une seule ligne discrete, la carte ne s'ouvre qu'une fois dans un groupe */
#partyArea { width: 100%; max-width: 440px; margin-top: 16px; }
#partyRow { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 11px 14px 12px;
  border-radius: 16px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.16); }
.party-label { font: 700 12.5px var(--ui); opacity: .75; }
.party-controls { display: flex; align-items: center; gap: 6px; }
#partyRow .field { width: 92px; margin-top: 0; padding: 7px 10px; font: 700 13px var(--mono); border-radius: 10px; text-align: center; letter-spacing: 3px; }
.party-title { font: 800 11px var(--ui); text-transform: uppercase; letter-spacing: 1.2px; opacity: .6; }
.party-code { font: 800 22px var(--mono); letter-spacing: 5px; color: var(--brand); flex: 1; }

/* ---------- effets : cartes 3D + reflet, entree ---------- */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .35s var(--ease), box-shadow .3s, border-color .2s; will-change: transform; }
.tilt.tilting { transition: transform .08s linear, box-shadow .3s, border-color .2s; }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.2), transparent 55%);
  opacity: var(--glare, 0); transition: opacity .3s; mix-blend-mode: soft-light; }
.tilt:hover { box-shadow: 0 26px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1); }
.rise { animation: rise .65s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.pop { animation: pop .45s var(--ease); }
@keyframes pop { 40% { transform: scale(1.14); } }
.fx-float { position: fixed; z-index: 96; pointer-events: none; font: 900 19px var(--mono); color: var(--brand); text-shadow: 0 2px 12px #000;
  animation: fxFloat 1.2s ease-out forwards; }
@keyframes fxFloat { from { opacity: 0; transform: translate(-50%, 0) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -12px) scale(1.12); }
  to { opacity: 0; transform: translate(-50%, -64px) scale(1); } }
body.no-fx .tilt, body.no-fx .tilt.tilting { transform: none; transition: none; }
body.no-fx .tilt::after { display: none; }
body.no-fx .rise, body.no-fx .stage-pane { animation: none; }
body.no-fx .btn-play, body.no-fx .logo-b, body.no-fx .pulse-dot, body.no-fx .btn-play .shine, body.no-fx #embers span,
body.no-fx .prime-name, body.no-fx .prime-card-in::before { animation: none; }
body.no-fx #embers { display: none; }

/* ---------- carte operateur ---------- */
.char-stage { position: relative; height: 192px; margin: 2px -4px 0; display: grid; place-items: center; }
.char-stage::before { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,200,105,.22), rgba(240,160,192,.1) 45%, transparent 70%); animation: charBreath 4.5s ease-in-out infinite; }
.char-stage::after { content: ""; position: absolute; width: 176px; height: 176px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.16);
  animation: spin 40s linear infinite; }
@keyframes charBreath { 50% { transform: scale(1.1); opacity: .8; } }
@keyframes spin { to { transform: rotate(360deg); } }
body.no-fx .char-stage::before, body.no-fx .char-stage::after, body.no-fx .perso-canvas-wrap::before, body.no-fx .perso-canvas-wrap::after { animation: none; }
#heroChar { position: relative; z-index: 1; width: 300px; height: 192px; max-width: 100%; }
.char-info { text-align: center; }
.char-name { font: 800 20px var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
#charHint { text-align: center; margin-top: 12px; }
#charHint:empty { display: none; }

/* ---------- missions du jour ---------- */
.dl-login { padding: 10px 12px 11px; border-radius: 14px; background: rgba(240,200,105,.07); border: 1px solid rgba(240,200,105,.2); margin-bottom: 10px; }
.dl-login-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dl-login-head b { font: 700 13px var(--ui); }
.dl-streak { font: 700 11.5px var(--mono); color: var(--brand); white-space: nowrap; }
.dl-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dl-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 5px; border-radius: 9px; background: rgba(0,0,0,.28);
  border: 1px solid transparent; font-family: var(--mono); position: relative; }
.dl-day i { font-style: normal; font-size: 9.5px; opacity: .55; font-weight: 700; }
.dl-day b { font-size: 12px; color: #fff; }
.dl-day.done { background: rgba(87,194,95,.16); border-color: rgba(87,194,95,.4); }
.dl-day.done b, .dl-day.done i { color: #8be493; opacity: 1; }
.dl-day.done::after { content: "✓"; position: absolute; top: -6px; right: -3px; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center;
  font: 800 9px var(--ui); color: #10240f; background: #57c25f; }
.dl-day.today { border-color: var(--brand); background: rgba(240,200,105,.16); box-shadow: 0 0 14px rgba(240,200,105,.3); }
.dl-day.today.ready { animation: readyPulse 1.7s ease-in-out infinite; }
.dl-day.big b { color: var(--brand2); }
.dl-day.big i::after { content: " ★"; }
.dl-claim { width: 100%; margin-top: 9px; padding: 9px; font-size: 13.5px; }
.dl-note { font-size: 12px; opacity: .7; margin-top: 9px; text-align: center; }
.dl-note.warn { color: #ffb08a; opacity: 1; }

.dl-missions { list-style: none; display: flex; flex-direction: column; gap: 7px; }
@media (min-width: 901px) { .dl-missions { max-height: 262px; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; scrollbar-color: #4a4238 transparent; } }
.dl-m { padding: 9px 11px 10px; border-radius: 14px; background: rgba(0,0,0,.24); border: 1px solid var(--card-line); transition: border-color .2s, background .2s; }
.dl-m.ready { border-color: rgba(240,200,105,.55); background: rgba(240,200,105,.08); }
.dl-m.claimed { opacity: .55; }
.dl-m-top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.tier { flex: none; font: 800 9.5px var(--mono); letter-spacing: .6px; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; }
.tier.t-easy { color: #8be493; background: rgba(87,194,95,.14); }
.tier.t-medium { color: #ffd166; background: rgba(255,209,102,.14); }
.tier.t-hard { color: #ff8f8f; background: rgba(229,72,77,.16); }
.tier.t-expert { color: #ff8fc0; background: rgba(255,77,141,.16); }
.tier.t-special { color: #c6b3ff; background: rgba(164,139,255,.18); }
.dl-m-text { font: 600 13px/1.25 var(--ui); flex: 1; min-width: 0; }
.dl-bar { position: relative; height: 15px; border-radius: 999px; background: rgba(0,0,0,.5); overflow: hidden; }
.dl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width .9s var(--ease); }
.dl-bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 10px var(--mono); color: #fff; text-shadow: 0 1px 2px #000; }
.dl-m-row { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.dl-m-row .dl-bar { flex: 1; min-width: 0; }
.dl-rew { flex: none; font: 700 11.5px var(--mono); opacity: .92; white-space: nowrap; }
.dl-rew em { font-style: normal; color: var(--brand2); }
.dl-m-row .small-btn { flex: none; padding: 5px 12px; font-size: 12px; }
.dl-check { font: 800 12px var(--ui); color: #8be493; }
.dl-guest { text-align: center; padding: 6px 4px 2px; }
.dl-guest .lock { font-size: 30px; opacity: .9; }
.dl-guest p { font-size: 13px; opacity: .75; margin: 6px 0 12px; line-height: 1.45; }
@keyframes readyPulse { 50% { box-shadow: 0 0 22px rgba(240,200,105,.55), inset 0 0 0 1px var(--brand); } }

/* ---------- nouveautes ---------- */
#newsBody { display: flex; flex-direction: column; }
.news-row { border-bottom: 1px solid rgba(255,255,255,.08); }
.news-row:last-child { border-bottom: 0; }
.news-head { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 2px; text-align: left; cursor: pointer; background: none; border: 0; color: var(--text); font: 700 14px/1.3 var(--ui); }
.news-head:hover .news-title { color: var(--brand2); }
.news-head:focus-visible { outline: 2px solid var(--brand2); outline-offset: 2px; border-radius: 6px; }
.news-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.news-dot.tag-event { background: #a48bff; } .news-dot.tag-update { background: #7fd0ff; } .news-dot.tag-tip { background: #8be493; }
.news-title { flex: 1; min-width: 0; transition: color .15s; }
.news-pin { font-size: 11px; opacity: .7; }
.news-caret { flex: none; font-style: normal; font-size: 18px; line-height: 1; opacity: .45; transition: transform .2s var(--ease); }
.news-row.open .news-caret { transform: rotate(90deg); opacity: .9; }
.news-more { display: none; padding: 0 2px 14px 19px; }
.news-row.open .news-more { display: block; animation: paneIn .28s var(--ease) both; }
.news-body { font-size: 13px; line-height: 1.55; opacity: .78; margin: 0 0 8px; }
.news-link { cursor: pointer; padding: 0; background: none; border: 0; font: 800 12.5px var(--ui); color: var(--brand); }
.news-link:hover { text-decoration: underline; }
.news-empty { font-size: 13px; opacity: .55; text-align: center; padding: 8px 0; }

kbd { background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.18); border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px; font: 700 11px var(--mono); color: var(--brand2); }

/* ---------- perso cliquable : un clic n'importe ou sur la carte ouvre la personnalisation ---------- */
#charCard { cursor: pointer; }
#charCard:hover { border-color: rgba(240,200,105,.42); }
#charCard:hover .link-btn { opacity: 1; text-decoration: underline; }
#charCard:focus-visible { outline: 2px solid var(--brand2); outline-offset: 3px; }
#charCard .link-btn::after { content: " \203A"; }

/* ---------- page Personnalisation ---------- */
.perso-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 26px; align-items: start; }
.perso-stage { padding: 18px 16px 20px; border-radius: 20px; text-align: center; background: rgba(0,0,0,.24); border: 1px solid var(--card-line); }
.perso-canvas-wrap { position: relative; height: 300px; display: grid; place-items: center; }
.perso-canvas-wrap::before { content: ""; position: absolute; width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,200,105,.22), rgba(240,160,192,.1) 45%, transparent 70%); animation: charBreath 4.5s ease-in-out infinite; }
.perso-canvas-wrap::after { content: ""; position: absolute; width: 236px; height: 236px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.16);
  animation: spin 40s linear infinite; }
#persoChar { position: relative; z-index: 1; width: 360px; height: 300px; max-width: 100%; }
.perso-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }
.perso-skin { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 11px; border-radius: 16px; overflow: hidden;
  background: rgba(0,0,0,.28); border: 2px solid rgba(var(--sk-a), .5); color: var(--text); cursor: pointer; font: 700 12.5px var(--ui);
  transition: transform .2s var(--ease), border-color .2s, background .2s, box-shadow .2s; }
.perso-skin::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% 34%, rgba(var(--sk-a), .2), transparent 70%); }
.perso-skin > * { position: relative; }
.perso-skin .swatch { width: 92px; height: 92px; display: grid; place-items: center; }
.perso-skin .swatch .skin-ico { position: relative; z-index: 1; width: 100%; height: 100%; }
.perso-skin small { font: 600 10.5px var(--ui); opacity: .7; min-height: 13px; }
.perso-skin:hover, .perso-skin:focus-visible { transform: translateY(-3px); background: rgba(255,255,255,.06); outline: none; }
.perso-skin.r-common { border-color: var(--card-line); }
.perso-skin.equipped { box-shadow: 0 0 0 2px var(--brand) inset, 0 0 22px rgba(240,200,105,.28); }
.perso-skin.equipped small { color: var(--brand); opacity: 1; }
.perso-skin.locked { opacity: .78; }
.perso-skin.locked::after { content: "\1F512"; position: absolute; top: 8px; right: 9px; font-size: 12px; }
.perso-skin.locked .skin-ico { filter: grayscale(.35) brightness(.8); }
.perso-skin.r-legendary { box-shadow: 0 0 18px rgba(255,197,49,.16); }
.perso-skin.r-mythic { border-color: transparent; background: linear-gradient(rgba(22,12,30,.94), rgba(22,12,30,.94)) padding-box, linear-gradient(135deg, #ff2d6f, #8b3dff) border-box;
  box-shadow: 0 0 22px rgba(255,45,111,.26), 0 0 34px rgba(139,61,255,.2); }
.perso-skin.r-mythic.equipped { box-shadow: 0 0 0 2px var(--brand) inset, 0 0 26px rgba(255,45,111,.34), 0 0 38px rgba(139,61,255,.26); }
.perso-stage { transition: border-color .3s, box-shadow .3s; }
.perso-stage.r-rare { border-color: rgba(75,155,230,.5); }
.perso-stage.r-epic { border-color: rgba(176,102,240,.55); box-shadow: 0 0 34px rgba(176,102,240,.14); }
.perso-stage.r-legendary { border-color: rgba(255,205,70,.6); box-shadow: 0 0 40px rgba(255,197,49,.16); }
.perso-stage.r-mythic { border-color: rgba(255,80,150,.65); box-shadow: 0 0 44px rgba(255,45,111,.2), 0 0 60px rgba(139,61,255,.16); }
.perso-rar { display: inline-flex; }
.perso-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.perso-soon { margin-top: 18px; padding: 10px 14px; border: 1px dashed rgba(255,255,255,.16); border-radius: 12px; font-size: 12.5px; opacity: .6; }
.perso-link { display: block; width: 100%; text-align: left; cursor: pointer; opacity: 1; color: var(--brand); font: 700 13px var(--ui); background: rgba(240,200,105,.06); transition: background .15s, border-color .15s; }
.perso-link:hover { background: rgba(240,200,105,.12); border-color: rgba(240,200,105,.5); }
@media (max-width: 900px) { .perso-grid { grid-template-columns: 1fr; } .perso-canvas-wrap { height: 260px; } #persoChar { height: 260px; } }

/* ---------- panneaux (profil, classement, equipement, boutique, pass, reglages) ---------- */
.extra-pane { max-width: 1500px; margin: 6px auto 0; padding: 26px clamp(28px, 3vw, 46px) 30px; text-align: left; min-height: 220px; position: relative;
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07); }
.extra-pane::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 2px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand2), transparent); opacity: .85; }
.pane-head { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--card-line); }
.pane-title { font: 900 30px var(--ui); letter-spacing: .2px; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
.pane-sub { margin-top: 5px; font-size: 14px; opacity: .68; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.stats-grid div { font-size: 13px; background: rgba(0,0,0,.26); border: 1px solid var(--card-line); border-radius: 14px; padding: 16px 10px; text-align: center; }
.stats-grid b { font: 800 26px var(--mono); display: block; color: #fff; }
.stats-grid span { opacity: .6; font: 600 11px var(--ui); text-transform: uppercase; letter-spacing: .7px; display: block; margin-top: 5px; }
.profil-head { gap: 16px; margin-bottom: 20px; }
.avatar { width: 54px; height: 54px; border-width: 3px; }
.profil-name { font: 800 20px var(--ui); }
.profil-sub { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--card-line); }
.profil-sub .small-btn { margin-top: 12px; }
.badges { gap: 9px; }
.badge { font: 700 12.5px var(--ui); padding: 7px 13px; border-radius: 999px; background: rgba(240,200,105,.1); border: 1px solid rgba(240,200,105,.4); color: var(--brand); }
.badge.locked { background: rgba(0,0,0,.25); border-color: var(--card-line); color: var(--text); opacity: .38; }
.hist-row { padding: 10px 4px; font-size: 13.5px; border-bottom: 1px solid var(--card-line); }
.hist-result { font: 800 13px var(--mono); }
.lb-row { padding: 11px 8px; border-radius: 12px; border-bottom: none; font-size: 14.5px; transition: background .15s; }
.lb-row:nth-child(odd) { background: rgba(255,255,255,.03); }
.lb-row:hover { background: rgba(255,255,255,.07); }
.lb-rank { font: 800 14px var(--mono); width: 34px; color: var(--brand2); }
.lb-row:nth-child(1) .lb-rank { color: #ffd45a; font-size: 17px; }
.lb-row:nth-child(2) .lb-rank { color: #d3dae2; }
.lb-row:nth-child(3) .lb-rank { color: #d99a6c; }
.lb-wins { font: 700 14px var(--mono); }
.lb-row.you { margin-top: 10px; border: 1px dashed rgba(240,160,192,.6); background: rgba(240,160,192,.07); border-radius: 12px; padding: 11px 8px; }
.skeleton-list { display: flex; flex-direction: column; gap: 8px; }
.skeleton-list i { display: block; height: 40px; border-radius: 12px; background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 70%);
  background-size: 250% 100%; animation: skel 1.4s linear infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.loadout-row { padding: 11px 6px; font-size: 14px; }
.stepper button { width: 28px; height: 28px; border-radius: 9px; background: rgba(255,255,255,.07); border: 1px solid var(--card-line); }
.stepper button:hover { border-color: var(--brand); }
#loadoutSummary { font-size: 12.5px; opacity: .6; }

.shop-crate { border-radius: 16px; background: rgba(0,0,0,.24); border: 1px solid var(--card-line); padding: 14px 16px; }
.shop-skins-grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; }
.shop-skin-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; border-radius: 16px; background: rgba(0,0,0,.28);
  border: 2px solid rgba(var(--sk-a), .55); padding: 12px 8px 12px; font: 700 12px var(--ui); transition: transform .2s var(--ease), border-color .2s, background .2s, box-shadow .2s; }
.shop-skin-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% 32%, rgba(var(--sk-a), .22), transparent 70%); }
.shop-skin-card > * { position: relative; }
.shop-skin-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.06); }
.shop-skin-card .rar-badge { margin-bottom: 8px; }
.shop-skin-card .swatch { width: 112px; height: 112px; margin: 0 auto 8px; display: grid; place-items: center; }
.shop-skin-card .swatch .skin-ico { position: relative; z-index: 1; width: 100%; height: 100%; }
.shop-skin-card .cname { font: 800 14px var(--ui); margin-bottom: 8px; }
.shop-skin-card.r-legendary { box-shadow: 0 0 20px rgba(255,197,49,.2); }
.shop-skin-card.r-mythic { border-color: transparent; background: linear-gradient(rgba(22,12,30,.94), rgba(22,12,30,.94)) padding-box, linear-gradient(135deg, #ff2d6f, #8b3dff) border-box;
  box-shadow: 0 0 24px rgba(255,45,111,.3), 0 0 38px rgba(139,61,255,.24); }
.shop-skin-card.locked { opacity: 1; }                       /* (en boutique « verrouille » = a acheter : on le montre en pleine couleur) */
.prime-card-in { border-radius: 18px; }
.pass-head { padding-bottom: 18px; border-bottom-color: var(--card-line); }
.pass-cell, .pass-num { border-radius: 10px; }
.pass-bar { border-radius: 999px; height: 12px; }

/* reglages */
.set-block { padding: 6px 0 4px; }
.set-block + .set-block { margin-top: 12px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border-radius: 16px; background: rgba(0,0,0,.22);
  border: 1px solid var(--card-line); margin-bottom: 10px; }
/* grand ecran : les 4 blocs (Langue/Affichage/Sons/Mode leger, Commandes, Compte, Confidentialite) deviennent des cartes cote a cote plutot qu'une longue colonne */
@media (min-width: 980px) {
  #extraParams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 22px 28px; }
  #extraParams > .pane-head { grid-column: 1 / -1; }
  #extraParams .set-block { margin-top: 0 !important; padding: 20px 22px 22px; border-radius: 20px; background: rgba(0,0,0,.18); border: 1px solid var(--card-line); }
}
.set-row b { font: 700 15px var(--ui); }
.set-row p { margin-top: 3px; max-width: 460px; line-height: 1.4; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.4); border: 1px solid var(--card-line); flex: none; }
.seg button { padding: 8px 18px; border: none; border-radius: 999px; background: none; color: var(--text); font: 700 13px var(--ui); cursor: pointer; opacity: .65; transition: background .2s, opacity .2s; }
.seg button:hover { opacity: 1; }
.seg button.on { background: var(--grad); color: #2a1710; opacity: 1; }
.switch { position: relative; display: inline-block; width: 52px; height: 30px; flex: none; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.switch-ui { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.14); transition: background .2s; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.45);
  transition: transform .25s var(--ease); }
.switch input:checked + .switch-ui { background: var(--grad); }
.switch input:checked + .switch-ui::after { transform: translateX(22px); }
.switch input:focus-visible + .switch-ui { outline: 2px solid var(--brand2); outline-offset: 2px; }
.controls-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; font-size: 13.5px; }
.controls-list > div { padding: 11px 14px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--card-line); }
.kb-list > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
/* touche cliquable : reappuie sur "..." puis attend la prochaine touche (reglages > commandes) */
.kb-bind { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; }
.kb-bind kbd { min-width: 22px; display: inline-block; text-align: center; transition: border-color .15s, color .15s, background .15s; }
.kb-bind:hover kbd { border-color: var(--brand); color: var(--brand); }
.kb-bind.listening kbd { border-color: var(--brand2); color: var(--brand2); background: rgba(240,160,192,.14); animation: readyPulse 1s ease-in-out infinite; }
#kbResetBtn { margin-top: 12px; }
.stats-optout { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--card-line); border-radius: 16px; background: rgba(0,0,0,.18); }
.stats-optout input { accent-color: var(--brand2); width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.stats-optout .ga-row { display: block; margin-top: 14px; cursor: pointer; }
.stats-optout .ga-row.hidden, .stats-optout .ga-row.hidden + p { display: none; }

/* bandeau de consentement Google Analytics (public/consent.js) : jamais par-dessus une partie */
#consentBar { position: fixed; z-index: 60; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom));
  width: min(400px, calc(100vw - 24px)); padding: 14px 16px; border-radius: 16px; background: var(--card-solid); border: 1px solid var(--card-line);
  box-shadow: 0 14px 40px rgba(0,0,0,.55); font-family: var(--ui); color: var(--text); }
#consentBar p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; opacity: .9; }
#consentBar .consent-row { display: flex; gap: 8px; justify-content: flex-end; }
#hud:not(.hidden) ~ #consentBar { display: none; }
@media (max-height: 460px) { #consentBar { width: min(340px, calc(100vw - 24px)); padding: 10px 12px; } #consentBar p { font-size: 12px; margin-bottom: 8px; } }

#adminLaunch .btn { max-width: 340px; }
#accountBlock:has(#logoutBtn.hidden) { display: none; }
.admin-mini > div { border-radius: 12px; background: rgba(0,0,0,.26); border-color: var(--card-line); }

/* ---------- fenetres, toasts ---------- */
.modal-overlay { background: rgba(6,5,4,.72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: fadeIn .2s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
.panel { width: 100%; display: flex; flex-direction: column; text-align: center; position: relative; z-index: 2; clip-path: none;
  background: linear-gradient(160deg, #241f1a, #15120f); border: 1px solid rgba(255,255,255,.11); border-radius: 24px; padding: 30px 28px 24px;
  box-shadow: 0 40px 100px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); }
.panel::before { content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 2px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand2), transparent); }
.modal-panel { max-width: 400px; animation: modalIn .35s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.modal-title { font: 900 24px var(--ui); margin-bottom: 4px; }
.modal-title span { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.modal-sub { margin-bottom: 14px; line-height: 1.45; }
.modal-panel .btn-ghost.small-btn { align-self: center; margin-top: 14px; }
#authForms .field { margin-top: 10px; }
.toast { border-radius: 14px; background: linear-gradient(160deg, #2a241e, #1a1714); border: 1px solid rgba(255,255,255,.12); border-left: 3px solid var(--brand); }
.toast.bad { border-left-color: var(--accent); }

/* ---------- boutique de devises unifiee : un onglet Gemmes / Pieces, des cartes (pas des lignes) avec une petite pile d'icones qui grossit avec le lot ---------- */
.currency-modal { max-width: 500px; }
.curr-tabs { margin: 2px 0 12px; justify-content: center; gap: 28px; }
.curr-tabs .m-tab { font-size: 15px; }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 12px; margin-bottom: 4px; }
.pack-grid.hidden { display: none; }
.pack-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 12px 14px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.24)); border: 1px solid var(--card-line); text-align: center;
  transition: transform .15s var(--ease), border-color .15s, box-shadow .15s; }
.pack-card:hover { transform: translateY(-3px); border-color: rgba(240,200,105,.45); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.pack-card.has-bonus { border-color: rgba(240,200,105,.5); background: linear-gradient(160deg, rgba(240,200,105,.16), rgba(0,0,0,.26)); }
.pack-bonus { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; font: 800 11px var(--ui); color: #2a1710;
  background: var(--grad); box-shadow: 0 4px 12px rgba(240,200,105,.45); white-space: nowrap; }
.pack-pile { display: flex; align-items: flex-end; justify-content: center; height: 32px; margin-top: 4px; }
.pack-pile i { flex: none; }
.pack-pile-1 i { width: 30px; height: 30px; }
.pack-pile-3 i { width: 22px; height: 22px; margin: 0 -3px; }
.pack-pile-3 i:nth-child(2) { transform: translateY(-7px) rotate(45deg); }
.pack-pile-5 i { width: 18px; height: 18px; margin: 0 -3px; }
.pack-pile-5 i:nth-child(2), .pack-pile-5 i:nth-child(4) { transform: translateY(-4px) rotate(45deg); }
.pack-pile-5 i:nth-child(3) { transform: translateY(-9px) rotate(45deg); }
.pack-amt { display: flex; align-items: center; gap: 5px; font: 800 17px var(--ui); }
.pack-amt .ico-gem, .pack-amt .ico-coin { width: 15px; height: 15px; }
.pack-price { font: 700 12.5px var(--mono); opacity: .78; }
.pack-card .btn { width: 100%; margin-top: 4px; }
.popup-panel.gold { border-color: rgba(255,212,90,.5); }
.reward-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }

/* ---------- theme PRIME (dore) ---------- */
body.is-prime #menu, body.is-prime .modal-overlay { --brand: #ffd45a; --brand2: #ffae2b; --card-line: rgba(255,212,90,.16); }
body.is-prime #menu { background:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(255,196,60,.22), transparent 70%),
    radial-gradient(ellipse 55% 55% at 100% 100%, rgba(255,174,43,.12), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 46%, rgba(12,9,4,.12) 30%, rgba(8,6,3,.66) 100%),
    linear-gradient(180deg, rgba(30,22,9,.52) 0%, rgba(11,9,5,.74) 100%); }
body.is-prime #topnav { background: linear-gradient(180deg, rgba(58,42,12,.94), rgba(27,21,12,.8)); border-bottom-color: rgba(255,212,90,.32);
  box-shadow: 0 10px 40px rgba(255,180,40,.08); }
body.is-prime .avatar-dot { border-color: #ffd45a; box-shadow: 0 0 0 2px rgba(255,212,90,.25), 0 0 16px rgba(255,190,50,.55); }
body.is-prime .hero-crown { color: #ffd45a; filter: drop-shadow(0 0 12px rgba(255,190,50,.75)); }
body.is-prime #embers span { background: #ffd45a; box-shadow: 0 0 8px 2px rgba(255,200,60,.8); }
body.is-prime .card, body.is-prime .extra-pane { background: linear-gradient(155deg, rgba(60,46,18,.66), rgba(24,19,11,.86)); }
body.is-prime .perso-skin.equipped { background: rgba(255,212,90,.12); border-color: rgba(255,212,90,.3); }

/* ---------- bouton JOUER : un vrai survol (halo, anneau qui pulse, reflet rapide, fleche qui avance) ---------- */
/* (l'anneau vit sur .btn-play lui-meme, pas sur .play-wrap : le wrap peut contenir 2 boutons empiles - TUTO + JOUER - chacun doit avoir son propre halo au survol) */
.btn-play::before { content: ""; position: absolute; inset: -5px; border-radius: 27px; border: 2px solid var(--brand); opacity: 0; pointer-events: none; }
.btn-play:hover:not(:disabled)::before { animation: playRing 1.1s ease-out infinite; }
@keyframes playRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.09, 1.28); } }

/* ---------- bouton TUTO (recommande) : prend la place principale au-dessus de JOUER, qui redescend en secondaire discret ---------- */
.btn-play-tuto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.btn-play-tuto .play-face { height: auto; }
.tuto-flag { position: relative; z-index: 1; padding: 2px 11px; border-radius: 999px; font: 900 9.5px var(--ui); letter-spacing: .8px; text-transform: uppercase;
  color: #2a1710; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.play-wrap:has(.btn-play-tuto:not(.hidden)) #play { height: 44px; background: rgba(10,8,6,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); animation: none; }
.play-wrap:has(.btn-play-tuto:not(.hidden)) #play:hover:not(:disabled) { transform: none; filter: none; background: rgba(40,32,22,.72); box-shadow: inset 0 0 0 1px var(--brand); }
.play-wrap:has(.btn-play-tuto:not(.hidden)) #play:hover:not(:disabled) .play-face { letter-spacing: 1px; }
.play-wrap:has(.btn-play-tuto:not(.hidden)) #play .play-face { font: 800 15px var(--ui); letter-spacing: 1px; color: var(--text); }
.play-wrap:has(.btn-play-tuto:not(.hidden)) #play .shine { display: none; }
body.no-fx .btn-play-tuto { animation: none; }
.play-face { transition: letter-spacing .28s var(--ease); }
.play-ico { transition: transform .28s var(--ease); }
.btn-play:hover:not(:disabled) { animation: none; transform: translateY(-4px) scale(1.04); filter: brightness(1.12) saturate(1.15); background-position: 100% 0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.2), 0 0 54px 8px rgba(240,200,105,.5), 0 28px 66px rgba(240,160,192,.4),
              inset 0 0 0 1px rgba(255,255,255,.42), inset 0 -5px 0 rgba(0,0,0,.12); }
.btn-play:hover:not(:disabled) .play-face { letter-spacing: 5px; }
.btn-play:hover:not(:disabled) .play-ico { transform: translateX(6px) scale(1.2); }
.btn-play:hover:not(:disabled) .shine { animation: shineFast .85s ease-out infinite; }
@keyframes shineFast { 0% { left: -30%; } 100% { left: 135%; } }
body.no-fx .btn-play::before { display: none; }
body.no-fx .btn-play:hover:not(:disabled) { transform: none; }

/* ---------- niveau et XP bien visibles : barre du haut + carte operateur ---------- */
.level-row { gap: 8px; }
.level-badge { flex: none; white-space: nowrap; font: 900 12.5px var(--mono); padding: 2px 9px; border-radius: 8px; letter-spacing: .2px; box-shadow: 0 0 14px rgba(240,200,105,.45); }
.level-bar { width: 98px; height: 8px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
#levelFill { border-radius: 5px; box-shadow: 0 0 10px rgba(240,200,105,.75); }
.level-xp { font: 700 10.5px var(--mono); opacity: .78; white-space: nowrap; }
.level-xp:empty { display: none; }
@media (max-width: 1480px) { .level-xp { display: none; } .level-bar { width: 76px; } }        /* (sinon « 62 / 240 XP » deborde sous le premier onglet des 1 366 px) */

.lvl-card { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; text-align: left;
  background: linear-gradient(135deg, rgba(240,200,105,.16), rgba(240,160,192,.08)); border: 1px solid rgba(240,200,105,.36);
  box-shadow: 0 10px 30px rgba(240,200,105,.1), inset 0 1px 0 rgba(255,255,255,.08); }
.lvl-ring { --p: 0; position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--brand) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); box-shadow: 0 0 22px rgba(240,200,105,.3); }
.lvl-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #1c1814; }
.lvl-ring b { position: relative; font: 900 25px var(--mono); color: #fff; text-shadow: 0 0 14px rgba(240,200,105,.65); }
.lvl-meta { flex: 1; min-width: 0; }
.lvl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lvl-label { font: 900 13px var(--mono); letter-spacing: 1.6px; color: var(--brand); text-shadow: 0 0 12px rgba(240,200,105,.4); }
.lvl-xp { font: 700 12px var(--mono); opacity: .9; white-space: nowrap; }
.lvl-bar { position: relative; height: 11px; border-radius: 6px; margin: 8px 0 6px; background: rgba(0,0,0,.55); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.lvl-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--grad); box-shadow: 0 0 14px rgba(240,200,105,.85); transition: width 1s var(--ease); }
.lvl-next { font: 600 11.5px var(--ui); opacity: .66; }

/* ---------- salle d'attente : rien que le decor anime et le compteur ---------- */
#hud.in-lobby #mini, #hud.in-lobby #vitals, #hud.in-lobby #weaponbox, #hud.in-lobby #help, #hud.in-lobby #topbar { display: none; }
#hud.in-ins #mini, #hud.in-ins #vitals, #hud.in-ins #weaponbox, #hud.in-ins #help { display: none; }

/* ---------- ecran de fin de partie ---------- */
#result { position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto;
  pointer-events: auto; background: radial-gradient(ellipse at 50% 42%, rgba(8,6,5,.6), rgba(6,5,4,.9));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeIn .35s ease-out; }
.res-card { --acc: var(--brand); position: relative; width: min(500px, 100%); margin: auto; padding: 26px 28px 24px; border-radius: 26px; text-align: center; overflow: hidden;
  background: linear-gradient(155deg, rgba(46,39,32,.94), rgba(20,17,14,.97)); border: 1px solid var(--card-line);
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset; animation: resIn .55s var(--ease) both; }
.res-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--acc), transparent); }
.res-card::after { content: ""; position: absolute; left: 50%; top: -40%; width: 120%; height: 70%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--acc) 26%, transparent), transparent 68%); }
#result.k-dead .res-card { --acc: #e5484d; }
#result.k-won .res-card { --acc: #57c25f; border-color: rgba(87,194,95,.35); }
#result.k-end .res-card { --acc: var(--brand); }
@keyframes resIn { from { opacity: 0; transform: translateY(26px) scale(.95); } }
.res-card > * { position: relative; z-index: 1; }
.res-kicker { font: 700 13px var(--ui); letter-spacing: .5px; opacity: .8; min-height: 18px; }
.res-title { margin: 6px 0 4px; font: 900 clamp(30px, 6vw, 44px)/1.05 var(--mono); letter-spacing: 3px; color: var(--acc); text-shadow: 0 0 34px color-mix(in srgb, var(--acc) 55%, transparent); }
.res-placebox { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 2px 0 14px; flex-wrap: wrap; }
.res-place-n { font: 900 58px/1 var(--mono); color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.5); }
.res-place-of { font: 700 17px var(--ui); opacity: .62; }
.res-pb { flex-basis: 100%; font: 800 12px var(--mono); font-style: normal; letter-spacing: 1.2px; text-transform: uppercase; color: #2a1710;
  background: var(--grad); border-radius: 999px; padding: 3px 12px; width: fit-content; margin: 4px auto 0; animation: pop .7s var(--ease) .5s both; }
.res-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.res-stat { padding: 12px 4px 10px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid var(--card-line); }
.res-stat b { display: block; font: 800 24px var(--mono); color: #fff; }
.res-stat span { display: block; margin-top: 3px; font: 600 10.5px var(--ui); text-transform: uppercase; letter-spacing: .7px; opacity: .6; }
.res-coins-stat b { color: var(--brand); }
.res-xp { padding: 13px 14px 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(240,200,105,.15), rgba(240,160,192,.07)); border: 1px solid rgba(240,200,105,.3); text-align: left; }
.res-xp.hidden { display: none; }
.res-xp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.res-lvl { font: 900 16px var(--mono); letter-spacing: 1.4px; color: var(--brand); }
.res-xp-gain { font: 900 19px var(--mono); color: #fff; text-shadow: 0 0 16px rgba(240,200,105,.55); }
.res-xpbar { height: 14px; border-radius: 8px; margin: 9px 0 9px; background: rgba(0,0,0,.55); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.res-xpbar i { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--grad); box-shadow: 0 0 16px rgba(240,200,105,.9); transition: width .9s cubic-bezier(.3, .7, .2, 1); }
.res-xpbar i.snap { transition: none; }
.res-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.res-part { font: 700 11.5px var(--ui); padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--card-line); opacity: 0; animation: partIn .45s var(--ease) both; }
@keyframes partIn { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.res-part b { color: var(--brand); font-family: var(--mono); }
.res-levelup { margin-top: 10px; text-align: center; font: 900 20px var(--mono); letter-spacing: 3px; color: #2a1710; background: var(--grad); border-radius: 12px; padding: 8px;
  box-shadow: 0 0 34px rgba(240,200,105,.6); animation: pop .8s var(--ease) both; }
.res-levelup.hidden { display: none; }
.res-note { margin: 12px 0 0; font: 500 12.5px var(--ui); opacity: .75; }
.res-note.hidden { display: none; }
.res-actions { margin-top: 18px; }
.res-replay { height: 78px; margin: 0; }
.res-replay .play-face { font-size: 27px; }
.res-kbd { margin-left: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(42,23,16,.16); border: 1px solid rgba(42,23,16,.4); font: 800 11px var(--mono);
  letter-spacing: 0; text-transform: uppercase; }
.res-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.res-secondary .btn { margin: 0; padding: 12px 10px; font-size: 14px; }
.res-secondary .btn.hidden { display: none; }
.res-secondary:has(.btn.hidden) { grid-template-columns: 1fr; }
.card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.card-actions .btn { margin: 0; pointer-events: auto; }
body.no-fx .res-card, body.no-fx #result { animation: none; }
body.no-fx .res-part, body.no-fx .res-pb, body.no-fx .res-levelup { animation: none; opacity: 1; }
@media (max-width: 520px) {
  .res-card { padding: 22px 16px 18px; border-radius: 22px; }
  .res-stats { grid-template-columns: repeat(2, 1fr); }
  .res-place-n { font-size: 48px; }
  .res-secondary { grid-template-columns: 1fr; }
  .res-replay .play-face { font-size: 23px; }
  .res-kbd { display: none; }
}

/* ---------- profil : banniere, niveau, titres, stats par arme ---------- */
.prof-hero { position: relative; border-radius: 22px; overflow: hidden; margin-bottom: 20px; border: 1px solid var(--card-line); background: rgba(0,0,0,.24);
  box-shadow: 0 18px 50px rgba(0,0,0,.34); }
.prof-banner { position: relative; height: 138px; }
.prof-banner::after { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, transparent 2px 22px), linear-gradient(180deg, transparent 45%, rgba(10,8,7,.7)); }
.prof-hero-body { position: relative; display: flex; align-items: flex-end; gap: 18px; padding: 0 22px 20px; margin-top: -58px; flex-wrap: wrap; }
.prof-avatar { flex: none; position: relative; width: 116px; height: 116px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #2c261f, #14110e); border: 4px solid rgba(255,255,255,.18); box-shadow: 0 12px 34px rgba(0,0,0,.55); }
.prof-avatar canvas { width: 116px; height: 116px; }
.prof-ident { flex: 1; min-width: 210px; padding-bottom: 4px; }
.prof-name { font: 900 28px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 4px 22px rgba(0,0,0,.6); }
.prof-sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.prof-title { font: 800 12px var(--mono); letter-spacing: 1px; text-transform: uppercase; padding: 3px 11px; border-radius: 999px; color: #2a1710; background: var(--grad); }
.prof-lvlrow { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.prof-lvlnum { flex: none; font: 900 13px var(--mono); letter-spacing: 1.4px; color: var(--brand); white-space: nowrap; }
.prof-lvlbar { flex: 1; min-width: 110px; height: 12px; border-radius: 7px; background: rgba(0,0,0,.55); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.prof-lvlbar i { display: block; height: 100%; border-radius: 7px; background: var(--grad); box-shadow: 0 0 14px rgba(240,200,105,.8); }
.prof-xp { flex: none; font: 700 11.5px var(--mono); opacity: .8; white-space: nowrap; }
.prof-edit-btn { margin-left: auto; align-self: flex-start; }
.prof-block { margin-top: 22px; }
.prof-block > .sub-title { margin-bottom: 12px; }

.bn-dusk { background: linear-gradient(120deg, #2b1d3a, #6b3f6f 45%, #e79a86); }
.bn-ember { background: linear-gradient(120deg, #2a1208, #a5471a 50%, #f0a84a); }
.bn-slate { background: linear-gradient(120deg, #15191e, #2e3a44 55%, #6a7f90); }
.bn-forest { background: linear-gradient(120deg, #0e1f14, #25543a 55%, #79b06b); }
.bn-storm { background: linear-gradient(120deg, #0b1424, #1d3f73 55%, #5ea3e0); }
.bn-crimson { background: linear-gradient(120deg, #1e0709, #7a1420 55%, #e2545e); }
.bn-aurora { background: linear-gradient(120deg, #0a1a24, #1b6b62 38%, #5fd39a 64%, #b58cf0); }
.bn-void { background: radial-gradient(circle at 72% 30%, #4a35a0, transparent 55%), linear-gradient(120deg, #07060d, #17122b); }
.bn-gold { background: linear-gradient(120deg, #3b2606, #b77b17 42%, #ffe08a 68%, #c98c1f); }

.pick-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--card-line); background: rgba(0,0,0,.26); color: var(--text);
  font: 700 12.5px var(--ui); cursor: pointer; text-align: left; transition: transform .15s var(--ease), border-color .15s, background .15s; }
.pick:hover:not(.locked) { transform: translateY(-2px); background: rgba(255,255,255,.07); }
.pick.on { border-color: var(--brand); background: rgba(240,200,105,.12); box-shadow: 0 0 18px rgba(240,200,105,.2); }
.pick.locked { opacity: .5; cursor: default; }
.pick small { display: block; margin-top: 2px; font: 600 10.5px var(--ui); opacity: .7; }
.pick-banner { width: 132px; padding: 0; overflow: hidden; }
.pick-banner i { display: block; height: 46px; }
.pick-banner span { display: block; padding: 6px 10px 7px; }
.pick-banner.locked i { filter: grayscale(.85) brightness(.6); }

.wp-list { display: flex; flex-direction: column; gap: 8px; }
.wp-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; background: rgba(0,0,0,.24); border: 1px solid var(--card-line); }
.wp-ico { width: 54px; height: 32px; object-fit: contain; opacity: .95; }
.wp-ico-txt { width: 54px; text-align: center; font-size: 22px; }
.wp-main { min-width: 0; }
.wp-name { font: 800 13.5px var(--ui); }
.wp-bar { height: 6px; margin-top: 6px; border-radius: 4px; background: rgba(0,0,0,.5); overflow: hidden; }
.wp-bar i { display: block; height: 100%; border-radius: 4px; background: var(--grad); }
.wp-nums { display: flex; gap: 14px; font: 700 12px var(--mono); text-align: right; }
.wp-nums span { display: flex; flex-direction: column; align-items: flex-end; }
.wp-nums em { font-style: normal; font: 600 9.5px var(--ui); text-transform: uppercase; letter-spacing: .6px; opacity: .55; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rec { padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.24); border: 1px solid var(--card-line); }
.rec b { display: block; font: 800 21px var(--mono); color: #fff; }
.rec span { display: block; margin-top: 3px; font: 600 11px var(--ui); opacity: .62; text-transform: uppercase; letter-spacing: .5px; }
.prof-modal { max-width: 640px; width: 94vw; max-height: 90vh; overflow-y: auto; padding: 16px; }
.prof-modal .prof-hero { margin-bottom: 14px; }
.prof-modal .prof-name { font-size: 24px; }
@media (max-width: 640px) {
  .prof-banner { height: 108px; }
  .prof-hero-body { padding: 0 14px 16px; margin-top: -46px; gap: 12px; }
  .prof-avatar, .prof-avatar canvas { width: 92px; height: 92px; }
  .prof-name { font-size: 22px; }
  .wp-row { grid-template-columns: 44px minmax(0, 1fr); }
  .wp-nums { grid-column: 1 / -1; justify-content: space-between; text-align: left; }
  .wp-nums span { align-items: flex-start; }
}

/* ---------- classement : bascule entre amis, niveau, noms cliquables ---------- */
.lb-scope { margin-bottom: 14px; }
/* grand ecran : la carte est large (comme les autres pages) mais une liste de lignes texte reste lisible en colonne, pas etiree bord a bord */
@media (min-width: 900px) {
  #leaderboardList, #leaderboardYou { max-width: 760px; margin-left: auto; margin-right: auto; }
}
.lb-name[data-u] { cursor: pointer; }
.lb-name[data-u]:hover { text-decoration: underline; }
.lb-lvl { display: inline-block; margin-right: 7px; padding: 1px 7px; border-radius: 6px; font: 800 10.5px var(--mono); color: #2a1710; background: var(--grad); vertical-align: 1px; }
.lb-row.me { border: 1px solid rgba(240,160,192,.55); background: rgba(240,160,192,.09); }
.lb-empty { text-align: center; padding: 26px 10px; }
.lb-empty .btn { width: auto; display: inline-block; margin-top: 12px; }

/* ---------- adaptation ecrans moyens et telephones ---------- */
@media (max-width: 1320px) {
  .navlink { padding: 9px 11px; }
  #navLinks > .navlink { padding: 9px 13px; font-size: 13px; }
}
@media (max-width: 900px) {
  #topnav { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px 14px; gap: 10px; }
  #navLeft { order: 1; }
  #navRight { order: 2; }
  #navLinks { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  #navLinks::-webkit-scrollbar { display: none; }
  #menuStage { padding: 16px 14px 48px; }
  .extra-pane { padding: 20px 16px 24px; border-radius: 20px; }
  .pane-title { font-size: 25px; }
}
@media (max-width: 640px) {
  .logo { font-size: 42px; letter-spacing: 2px; }
  .tagline { font-size: 15px; }
  #accountHello { max-width: 92px; }
  .level-bar { width: 44px; }
  .set-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  #navRight .icon-btn { width: 34px; height: 34px; }
  .curr { padding: 5px 10px 5px 8px; font-size: 12.5px; }
}
@media (max-width: 420px) {
  #langSwitch { padding-left: 8px; }
  .lang-globe { display: none; }
  #navAccount .account-info { display: none; }
  .play-face { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .tilt, .tilt.tilting { transform: none; transition: none; }
  .tilt::after { display: none; }
  .rise, .stage-pane, .btn-play, .logo-b, .pulse-dot, .btn-play .shine, #embers span, .char-stage::before, .char-stage::after,
  .perso-canvas-wrap::before, .perso-canvas-wrap::after { animation: none; }
  #embers { display: none; }
}

/* ---------- sac (armes + piles de soins), arme en main, ecran d'attente, choix du largage ---------- */
#weaponbox { position: absolute; right: 20px; bottom: 20px; width: 482px; text-align: right; }
#held { --rc: #6f7883; display: flex; align-items: center; gap: 14px; width: fit-content; min-width: 340px; margin: 0 0 10px auto; padding: 8px 20px 8px 12px; text-align: left;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--rc) 60%, #3d3832); border-left: 8px solid var(--rc);
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 26%, rgba(14,13,12,.92)), rgba(14,13,12,.9) 64%);
  box-shadow: 0 0 28px color-mix(in srgb, var(--rc) 30%, transparent), 0 8px 22px rgba(0,0,0,.5); transition: border-color .2s, box-shadow .2s; }
#held.r-common { --rc: #9aa4b0; } #held.r-rare { --rc: #4b9be6; } #held.r-epic { --rc: #a35be0; } #held.r-legendary { --rc: #e8b13a; }
#held.c-bandage { --rc: #d9dfe4; } #held.c-medkit { --rc: #e5484d; } #held.c-shield { --rc: #5c9dc4; } #held.c-grenade { --rc: #8fb25a; }
#heldIcon { width: 108px; height: 52px; display: flex; align-items: center; justify-content: center; flex: none; }
#heldIcon .slotIcon { width: 108px; height: 52px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.75)) drop-shadow(0 0 10px var(--rc)); animation: heldPop .3s var(--ease); }
@keyframes heldPop { from { transform: scale(.7) rotate(-6deg); opacity: .3; } }
#heldInfo { flex: 1; min-width: 0; }
#heldRar { font: 800 11px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--rc); min-height: 14px; text-shadow: 0 0 12px color-mix(in srgb, var(--rc) 65%, transparent); }
#wname { margin: 2px 0 0; font-size: 21px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; opacity: 1; white-space: nowrap; }
#ammo { flex: none; margin-left: 6px; font-weight: 800; font-family: var(--mono); text-align: right; }
#ammo b { font-size: 44px; line-height: 1; color: #fff; }
#ammo span { font-size: 18px; opacity: .6; }
#ammobar { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 10px; }
.ammochip { display: flex; align-items: center; gap: 4px; padding: 2px 7px 2px 4px; background: #0f0e0c; border: 1px solid var(--line); border-radius: 4px; font-family: var(--mono); font-size: 12.5px; }
.ammochip img { width: 24px; height: 24px; object-fit: contain; }
.ammochip.zero { opacity: .35; }
.ammochip.cur { opacity: 1; border-color: var(--brand); box-shadow: 0 0 8px rgba(240,200,105,.35); }

#slots { display: flex; gap: 6px; justify-content: flex-end; align-items: flex-end; padding-top: 12px; pointer-events: auto; touch-action: none; }
.slot { --rc: #4a4540; position: relative; flex: none; width: 68px; height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 3px 9px; overflow: hidden; border-radius: 11px; border: 2px solid #3d3832; cursor: grab; user-select: none;
  font-family: var(--mono); font-size: 10.5px; text-align: center; background: linear-gradient(180deg, #1b1815, #0d0c0a);
  transition: transform .13s var(--ease), box-shadow .15s, filter .15s, opacity .15s; }
.slot .key { position: absolute; top: 3px; left: 6px; font-size: 10px; font-weight: 800; opacity: .6; }
.slot .slotIcon { width: 58px; height: 36px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.slot .slotName { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; opacity: .9; }
.slot.empty { border-style: dashed; border-color: #2c2823; background: rgba(15,14,12,.5); opacity: .55; cursor: default; }
.slot.melee { margin-left: 10px; cursor: pointer; }
.slot.dragging { opacity: .3; transform: scale(.9); }
/* arme : cadre, halo et barre a la couleur de sa rarete ; losanges = niveau de rarete */
.slot.gun { border-color: var(--rc); background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--rc) 40%, transparent), #0d0c0a 74%); }
.slot.gun .slotIcon { filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 6px var(--rc)); }
.slot .rbar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--rc); }
.slot .pips { position: absolute; top: 3px; right: 5px; font-size: 8px; letter-spacing: -1px; color: var(--rc); text-shadow: 0 0 6px var(--rc); }
.slot.r-common { --rc: #9aa4b0; } .slot.r-rare { --rc: #4b9be6; } .slot.r-epic { --rc: #a35be0; } .slot.r-legendary { --rc: #e8b13a; } .slot.r-start { --rc: #6f7883; }
.slot:not(.on):not(.empty) { filter: brightness(.8) saturate(.9); }
.slot.on { transform: translateY(-11px) scale(1.1); z-index: 3; border-color: #fff; filter: none;
  box-shadow: 0 0 0 1px #fff inset, 0 0 26px color-mix(in srgb, var(--rc) 75%, transparent), 0 12px 20px rgba(0,0,0,.55); }
.slot.on .key { opacity: 1; color: #fff; }
/* pile de soins : meme place qu'une arme, quantite en pastille ; choisir la case l'utilise */
.slot.stack { border-color: var(--rc); background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--rc) 26%, transparent), #0d0c0a 74%); }
.slot.c-bandage { --rc: #d9dfe4; } .slot.c-medkit { --rc: #e5484d; } .slot.c-shield { --rc: #5c9dc4; } .slot.c-grenade { --rc: #8fb25a; }
.slot .qty { position: absolute; top: 2px; right: 3px; padding: 0 6px; border-radius: 9px; font-size: 12px; line-height: 16px; font-weight: 800; color: #fff; background: rgba(0,0,0,.78); border: 1px solid var(--rc); }
.slot .tag { position: absolute; top: 3px; left: 19px; padding: 0 4px; border: 1px solid var(--rc); border-radius: 4px; font-size: 9px; line-height: 12px; font-weight: 800; color: var(--rc); }
.slot .prog { position: absolute; left: 0; bottom: 0; height: 6px; width: 0; background: var(--rc); }
.slot.using { animation: useGlow .8s ease-in-out infinite; }
.slot.using .prog { width: calc(var(--p, 0) * 1%); transition: width .12s linear; }
@keyframes useGlow { 50% { box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 80%, transparent); } }
#slothint { margin-top: 6px; font-size: 10px; opacity: .35; }

/* choix du point de largage : bandeau en haut, la carte reste visible */
#dropctrl { position: absolute; top: 22px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 14px; padding: 10px 22px 10px 14px; border-radius: 999px;
  background: linear-gradient(155deg, rgba(46,39,32,.9), rgba(20,17,14,.94)); border: 1px solid var(--card-line); box-shadow: 0 14px 40px rgba(0,0,0,.55); backdrop-filter: blur(6px); animation: resIn .4s both; }
.dc-ring { position: relative; width: 46px; height: 46px; flex: none; }
.dc-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.dc-ring circle { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 4; }
.dc-ring .arc { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: stroke-dashoffset .3s linear; }
.dc-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 17px var(--mono); color: #fff; }
.dc-text { text-align: left; }
#dropbig { font: 800 clamp(15px, 2.6vw, 20px) var(--mono); letter-spacing: 1px; text-transform: uppercase; color: #fff; }
#dropsmall { margin-top: 2px; font-size: 13px; opacity: .7; }
#dropctrl.set .arc { stroke: var(--hp); }
#dropctrl.set #dropbig { color: var(--hp); }

/* ecran d'attente : carte centree au-dessus de la carte assombrie */
#lobbywait { position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none; }
.lw-card { position: relative; width: min(470px, 100%); padding: 26px 30px 22px; text-align: center; border-radius: 26px; overflow: hidden; pointer-events: auto;
  background: linear-gradient(155deg, rgba(46,39,32,.93), rgba(20,17,14,.97)); border: 1px solid var(--card-line);
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset; backdrop-filter: blur(6px); animation: resIn .5s var(--ease) both; }
.lw-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--brand), var(--brand2), transparent); }
.lw-kicker { font: 700 12px var(--mono); letter-spacing: 3px; text-transform: uppercase; opacity: .65; }
.lw-title { margin: 8px 0 16px; font: 900 clamp(21px, 4.4vw, 29px)/1.15 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: #fff; text-shadow: 0 0 30px rgba(240,200,105,.3); }
.lw-dots b { display: inline-block; animation: dotBlink 1.2s infinite both; }
.lw-dots b:nth-child(2) { animation-delay: .2s; } .lw-dots b:nth-child(3) { animation-delay: .4s; }
@keyframes dotBlink { 0%, 80%, 100% { opacity: .15; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.lw-pips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 10px; }
.lw-pip { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed rgba(255,255,255,.2); background: rgba(0,0,0,.25); font-size: 15px; color: transparent; transition: all .25s var(--ease); }
.lw-pip.on { border: 2px solid var(--brand); color: #2a1710; background: radial-gradient(circle at 35% 30%, #fff0bd, var(--brand) 55%, #b98a2a); box-shadow: 0 0 18px rgba(240,200,105,.55); animation: pop .5s var(--ease); }
.lw-count { font: 700 15px var(--ui); opacity: .85; }
.lw-count b { font: 900 26px var(--mono); color: var(--brand); }
.lw-bar { height: 8px; margin: 14px 4px 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.lw-bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--grad); transition: width .45s linear; }
.lw-timer { font-size: 14px; opacity: .85; }
.lw-timer b { font: 800 18px var(--mono); color: var(--brand2); }
.lw-hint { margin: 12px 0 16px; font-size: 13px; line-height: 1.45; opacity: .55; }
#lobbywait .btn { width: auto; margin: 0 auto; pointer-events: auto; }
@media (max-width: 720px) {
  #weaponbox { left: 6px; right: 6px; width: auto; }
  #held { min-width: 0; width: 100%; } #heldIcon { width: 76px; } #heldIcon .slotIcon { width: 76px; } #wname { font-size: 16px; } #ammo b { font-size: 32px; }
  .slot { flex: 1 1 0; width: auto; min-width: 0; height: 64px; } .slot .slotIcon { width: 100%; height: 30px; } .slot .slotName, .slot .pips { display: none; }
}
#vitals { width: clamp(200px, calc(100vw - 542px), 400px); }        /* ne passe jamais sous le sac quand la fenetre est etroite */

/* ---------- missions du jour : reduire / agrandir ---------- */
.dl-head-right { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
#dailyCard .card-head { flex-wrap: wrap; }
#dailyCard.collapsed #dailyReset { display: none; }        /* reduit : le compte a rebours des missions n'a plus de sens */
.dl-toggle { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--card-line); opacity: .85; transition: background .15s, transform .15s, opacity .15s; }
.dl-toggle:hover { opacity: 1; background: rgba(255,255,255,.14); }
.dl-toggle svg { transition: transform .2s var(--ease); }
#dailyCard.collapsed .dl-toggle svg { transform: rotate(-90deg); }
#dailyBody.collapsed .dl-mwrap { display: none; }
#dailyBody.collapsed .dl-login { margin-bottom: 0; }

/* ---------- skins (sprites) : raretes, pastilles, auras du menu ---------- */
.skin-ico { display: block; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
/* une rarete = une teinte (--sk-a / --sk-b en r,g,b ; --sk-c couleur du texte) : bleu, violet, or, rouge-violet */
.r-common    { --sk-c: #9aa4b0; --sk-a: 154,164,176; --sk-b: 120,130,145; }
.r-rare      { --sk-c: #4b9be6; --sk-a: 75,155,230;  --sk-b: 60,120,210; }
.r-epic      { --sk-c: #b066f0; --sk-a: 176,102,240; --sk-b: 126,60,208; }
.r-legendary { --sk-c: #f1bd3f; --sk-a: 255,205,70;  --sk-b: 255,150,30; }
.r-mythic    { --sk-c: #ff5d9a; --sk-a: 255,45,111;  --sk-b: 139,61,255; }
/* pastille de rarete : nom + losanges, dans la couleur de la rarete */
.rar-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap; font: 800 10.5px var(--ui);
  letter-spacing: .7px; text-transform: uppercase; color: var(--sk-c); background: rgba(var(--sk-a), .14); border: 1px solid rgba(var(--sk-a), .6); }
.rar-badge i { font-style: normal; font-size: 8px; letter-spacing: 1px; }
.rar-badge.r-legendary { color: #ffe08a; background: linear-gradient(90deg, rgba(255,205,70,.22), rgba(255,150,30,.16)); }
.rar-badge.r-mythic { color: #fff; background: linear-gradient(90deg, rgba(255,45,111,.5), rgba(139,61,255,.5)); border-color: rgba(255,120,190,.85); text-shadow: 0 0 8px rgba(255,60,140,.9); }
/* aura derriere un skin (menu seulement ; en jeu il n'y en a pas pour l'instant) */
.skin-aura { position: absolute; inset: -16%; border-radius: 50%; pointer-events: none; z-index: 0; opacity: .9;
  background: radial-gradient(circle, rgba(var(--sk-a), .62) 0%, rgba(var(--sk-b), .3) 44%, transparent 70%); animation: skinPulse 2.8s ease-in-out infinite; }
.r-common .skin-aura { display: none; }
.r-mythic .skin-aura { inset: -22%; background: conic-gradient(from 0deg, rgba(255,45,111,.75), rgba(139,61,255,.7), rgba(255,45,111,.75), rgba(139,61,255,.7), rgba(255,45,111,.75));
  -webkit-mask: radial-gradient(circle, #000 32%, transparent 68%); mask: radial-gradient(circle, #000 32%, transparent 68%); filter: blur(3px); animation: skinSpin 6s linear infinite; }
.r-legendary .skin-aura { inset: -20%; }
@keyframes skinPulse { 0%, 100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes skinSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .skin-aura { animation: none; } }
/* pass et cadeaux */
.pass-cell.skin { gap: 2px; border-color: rgba(var(--sk-a), .75); background: linear-gradient(180deg, rgba(var(--sk-a), .2), #141210); }
.pass-cell.skin.prem { border-color: rgba(var(--sk-a), .75); background: linear-gradient(180deg, rgba(var(--sk-a), .2), #141210); }
.pass-cell .rw-skin { width: 44px; height: 44px; margin: 0 auto; filter: drop-shadow(0 0 7px rgba(var(--sk-a), .85)); }
.pass-cell.r-mythic .rw-skin { filter: drop-shadow(0 0 8px rgba(255,45,111,.9)) drop-shadow(0 0 12px rgba(139,61,255,.8)); }
.pass-cell .rw-rar { font: 800 8px var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--sk-c); }
/* Pass : cases d'aura (canvas anime) et de caisse (or) */
.pass-cell.aura, .pass-cell.aura.prem { gap: 2px; border-color: rgba(var(--sk-a), .75); background: linear-gradient(180deg, rgba(var(--sk-a), .2), #141210); }
.pass-cell .rw-aura { width: 46px; height: 46px; margin: 0 auto; }
.pass-cell.crate, .pass-cell.crate.prem { gap: 2px; border-color: rgba(255,214,102,.6); background: linear-gradient(180deg, rgba(255,205,70,.16), #141210); }
.pass-cell.crate .rw-ico { font-size: 30px; filter: drop-shadow(0 0 8px rgba(255,205,70,.7)); }
.gift-chip.aura { border-color: rgba(var(--sk-a), .6); background: linear-gradient(90deg, rgba(var(--sk-a), .14), #1a1714); }
.gift-chip.skin { border-color: rgba(var(--sk-a), .6); background: linear-gradient(90deg, rgba(var(--sk-a), .14), #1a1714); }
.gift-chip .rar-badge { font-size: 9.5px; padding: 2px 8px 2px 6px; }

/* ---------- partie privee (hote) : bouton sous JOUER + salle d'attente privee ---------- */
.host-btn { display: inline-flex; align-items: center; gap: 8px; margin: 12px auto 0; padding: 9px 16px; border-radius: 999px; cursor: pointer; font: 700 13px var(--ui);
  color: var(--text); background: rgba(255,255,255,.06); border: 1px dashed rgba(240,200,105,.55); transition: background .15s, border-color .15s, transform .12s var(--ease); }
.host-btn:hover:not(:disabled) { background: rgba(240,200,105,.14); border-color: var(--brand); transform: translateY(-1px); }
.host-btn:disabled { opacity: .45; cursor: default; }
.host-btn.hidden { display: none; }
.host-btn svg { color: var(--brand); flex: none; }
.play-zone { text-align: center; }

.lw-card.pv { width: min(700px, 100%); max-height: calc(var(--h100) - 32px); display: flex; flex-direction: column; overflow: hidden; text-align: left; padding: 22px 26px 18px; }
.lw-card.pv .pv-room { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.lw-card.pv .pv-top, .lw-card.pv .pv-players, .lw-card.pv .pv-hint, .lw-card.pv .pv-actions, .lw-card.pv .pv-room > .lw-kicker, .lw-card.pv .pv-room > .lw-title { flex: none; }
.lw-card.pv > .lw-kicker, .lw-card.pv > #lobbybig, .lw-card.pv > .lw-pips, .lw-card.pv > .lw-count, .lw-card.pv > .lw-bar, .lw-card.pv > .lw-timer, .lw-card.pv > .lw-hint { display: none; }
.lw-card.pv > #lobbyLeaveBtn { display: block; margin: 6px auto 0; }
.pv-room .lw-kicker, .pv-room .lw-title { text-align: center; }
.pv-room .lw-title { margin: 6px 0 12px; }
.pv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pv-codebox { display: flex; align-items: center; gap: 10px; }
.pv-lbl { font: 700 11px var(--mono); letter-spacing: 2px; text-transform: uppercase; opacity: .6; }
.pv-code { font: 900 26px var(--mono); letter-spacing: 6px; padding: 6px 14px 6px 20px; border-radius: 12px; cursor: pointer; color: var(--brand);
  background: rgba(240,200,105,.09); border: 1px dashed rgba(240,200,105,.5); transition: background .15s; }
.pv-code:hover { background: rgba(240,200,105,.2); }
.pv-count { font: 700 14px var(--ui); opacity: .85; }
.pv-count b { font: 900 22px var(--mono); color: var(--brand); }
.pv-players { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pv-chip { padding: 5px 12px; border-radius: 99px; font: 700 12.5px var(--ui); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.pv-chip.host { border-color: var(--brand); color: var(--brand); }
.pv-chip.me { background: rgba(240,200,105,.14); }
.pv-summary { flex: 1 1 auto; min-height: 60px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.pv-link { white-space: nowrap; }
.pv-actions { gap: 10px; flex-wrap: wrap; }
.pv-chip .pv-kick { all: unset; cursor: pointer; margin: 0 -4px 0 6px; padding: 0 5px; border-radius: 99px; font: 800 13px var(--ui); opacity: .55; }
.pv-chip .pv-kick:hover { opacity: 1; background: rgba(255,90,90,.35); }
/* fenetre « Paramètres de la partie » (creee par tools.js : mountRoom) */
.pvs-panel { width: min(640px, calc(100vw - 24px)); max-height: calc(var(--h100) - 28px); display: flex; flex-direction: column; text-align: left; }
.pvs-panel > .btn { align-self: center; margin-top: 12px; padding: 10px 34px; }
.pvs-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 4px 2px 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.rs-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.rs-preset { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 14px; cursor: pointer; color: inherit; font: 800 12.5px var(--ui);
  background: rgba(255,255,255,.06); border: 1px solid var(--card-line); transition: transform .15s var(--ease), background .15s, border-color .15s; }
.rs-preset:hover { transform: translateY(-2px); background: rgba(240,200,105,.14); border-color: var(--brand); }
.rs-preset .ico { font-size: 22px; line-height: 1; }
.rs-preset small { font: 600 10.5px var(--ui); opacity: .65; text-align: center; }
.rs-sec { padding: 11px 13px; margin-bottom: 9px; border-radius: 14px; background: rgba(0,0,0,.24); border: 1px solid var(--card-line); }
.rs-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 800 12px var(--ui); text-transform: uppercase; letter-spacing: .9px; opacity: .8; margin-bottom: 8px; }
.rs-h output { font: 900 15px var(--mono); color: var(--brand); text-transform: none; letter-spacing: 0; opacity: 1; }
.rs-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-opt { flex: 1 1 auto; padding: 8px 12px; border-radius: 10px; cursor: pointer; color: inherit; font: 700 12.5px var(--ui); text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background .15s, border-color .15s; }
.rs-opt:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.rs-opt.on { background: linear-gradient(90deg, rgba(240,200,105,.3), rgba(255,140,120,.22)); border-color: var(--brand); color: #fff; }
.rs-opt:disabled { opacity: .4; cursor: default; }
.rs-row { display: flex; align-items: center; gap: 12px; }
.rs-row .pvf-range { flex: 1; min-width: 0; }
.rs-note { font: 600 11.5px var(--ui); opacity: .6; margin-top: 6px; }
.rs-adv { margin-top: 4px; }
.rs-adv > summary { cursor: pointer; font: 800 12px var(--ui); text-transform: uppercase; letter-spacing: .9px; opacity: .75; padding: 6px 2px; }
.rs-adv .pvf { padding: 10px 2px 2px; }
@media (max-width: 560px) { .rs-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---- mode duo : composition des equipes (mountRoom) : un groupe par equipe (au plus 2 puces), les seuls a la fin ---- */
.rs-teams { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.team-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.14); }
.team-group.solo { border-style: solid; opacity: .85; }
.tg-label { flex: none; font: 800 10.5px var(--mono); letter-spacing: .8px; text-transform: uppercase; opacity: .6; margin-right: 2px; }
.team-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; cursor: pointer; color: inherit; font: 700 12.5px var(--ui);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); transition: background .15s, border-color .15s; }
.team-chip:hover { background: rgba(255,255,255,.14); }
.team-chip.sel { background: linear-gradient(90deg, rgba(240,200,105,.32), rgba(255,140,120,.24)); border-color: var(--brand); color: #fff; }
.team-chip.away { opacity: .55; }
.tc-x { font-style: normal; opacity: .6; margin: -2px -4px -2px 0; padding: 0 2px; border-radius: 99px; }
.tc-x:hover { opacity: 1; background: rgba(255,90,90,.35); }
.rs-teams-random { display: block; width: 100%; margin-top: 2px; }
/* invitation par lien + proposition de compte */
.inv-panel, .gn-panel { text-align: center; max-width: 420px; }
.inv-code { font: 900 22px var(--mono); letter-spacing: 5px; color: var(--brand); margin-left: 6px; }
#invNameRow { margin: 10px 0 4px; text-align: left; }
.gn-ico { font-size: 44px; line-height: 1; margin-bottom: 4px; }
.gn-panel .modal-sub { margin: 8px 0 14px; }
.pv-pill { padding: 5px 11px; border-radius: 10px; font: 600 12px var(--ui); background: rgba(255,255,255,.06); border: 1px solid var(--card-line); }
.pv-pill i { font-style: normal; opacity: .6; margin-right: 6px; }
.pv-hint { text-align: center; margin: 12px 0 10px; }
.pv-actions { display: flex; justify-content: center; margin-bottom: 4px; }
#lobbywait .pv-actions .btn { padding: 12px 30px; font-size: 15px; }

/* ---- auras achetables : cartes de la boutique / de la page Personnalisation (le halo est dessine en canvas, voir skin.js) */
.aura-prev { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
.shop-skin-card.aura-card .swatch { overflow: visible; }
.shop-skin-card.aura-special { border-color: transparent; box-shadow: 0 0 24px rgba(255,45,111,.3), 0 0 38px rgba(139,61,255,.24);
  background: linear-gradient(rgba(22,12,30,.94), rgba(22,12,30,.94)) padding-box, linear-gradient(135deg, #ff2d6f, #ffb300, #35e0ff, #8b3dff) border-box; }
.aura-lock { font: 800 11px var(--ui); text-align: center; color: #ffb3d1; opacity: .9; padding: 6px 4px 2px; line-height: 1.35; }
.aura-lock small { font: 700 11px var(--mono); color: var(--text); opacity: .75; }
.aura-none { font-size: 40px; opacity: .4; line-height: 1; }
.perso-aura .swatch { overflow: visible; }
.perso-auras { margin-top: 2px; }

/* ---- boutique : pastilles rouges (nouveautes) */
.tdot { position: absolute; top: 6px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 10px #ff4d6d;
  animation: tdotPulse 1.6s ease-in-out infinite; }
.tdot.hidden { display: none; }
@keyframes tdotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.shop-auras-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.shop-auras-grid .shop-skin-card { padding: 9px 6px 10px; border-radius: 14px; }
.shop-auras-grid .shop-skin-card .swatch { width: 78px; height: 78px; margin-bottom: 6px; }
.shop-auras-grid .shop-skin-card .cname { font-size: 12.5px; margin-bottom: 6px; }
.shop-auras-grid .shop-skin-card .small-btn { padding: 6px 10px; font-size: 12px; }
.shop-auras-grid .shop-skin-card .price { display: flex; flex-direction: column; gap: 5px; }
.shop-skins-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.shop-skin-card .price { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

/* ---- objets reserves a la caisse : bandeau dore + bouton qui renvoie vers l'onglet Caisse */
.ribbon { position: absolute; top: 10px; left: -1px; z-index: 3; padding: 3px 11px 3px 9px; border-radius: 0 999px 999px 0; font: 900 9.5px var(--ui);
  letter-spacing: .9px; text-transform: uppercase; color: #2a1710; background: linear-gradient(90deg, #ffe38a, #ffa62e); box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.ribbon i { font-style: normal; margin-right: 4px; }
.shop-skin-card > .ribbon { position: absolute; }
.shop-skin-card.crate-only:not(.r-mythic) { border-color: rgba(255,214,102,.75); box-shadow: 0 0 18px rgba(255,205,70,.16); }
.shop-skin-card .find-crate { border-color: rgba(255,214,102,.5); color: #ffe38a; }
.shop-skin-card .find-crate:hover { background: rgba(255,214,102,.14); border-color: #ffd766; }
.perso-skin.locked small { color: #ffe38a; }

/* ---- couleurs par niveau de caisse : variables seulement (la caisse SVG, la lueur, les pastilles s'en servent) */
.lv-common    { --cA: #cfa468; --cB: #a3763f; --cC: #5e3f1f; --glow: 214,170,110; }
.lv-rare      { --cA: #78bbff; --cB: #3f80d6; --cC: #1d3f7a; --glow: 75,155,230; }
.lv-epic      { --cA: #cf9bff; --cB: #8b4be0; --cC: #45208a; --glow: 176,102,240; }
.lv-legendary { --cA: #ffdd72; --cB: #e2a51f; --cC: #7a520a; --glow: 255,205,70; }
.lv-mythic    { --cA: #ff77ad; --cB: #c12a6c; --cC: #4d1470; --glow: 255,45,111; }
.lv-ultra     { --cA: #ffa0ea; --cB: #8a63ff; --cC: #23106b; --glow: 255,110,230; }

/* ---- la caisse (SVG en relief : degrades + rivets + gemme facettee, les couleurs viennent des variables ci-dessus) */
.crate-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.crate-svg .cr-stop-a { stop-color: var(--cA); }
.crate-svg .cr-stop-b { stop-color: var(--cB); }
.crate-svg .cr-stop-c { stop-color: var(--cC); }
.crate-svg .cr-stop-hi { stop-color: #fff; }
.crate-svg .cr-stop-glow { stop-color: rgb(var(--glow)); }
.crate-svg .cr-stop-mlo { stop-color: var(--cC); }
.crate-svg .cr-stop-mhi { stop-color: #fff; stop-opacity: .6; }
.crate-svg .cr-shadow { fill: rgba(0,0,0,.42); }
.crate-svg .cr-body-main { fill: url(#crBodyGrad); stroke: rgba(0,0,0,.4); stroke-width: 2; }
.crate-svg .cr-plank { fill: none; stroke: rgba(0,0,0,.22); stroke-width: 2; stroke-linecap: round; }
.crate-svg .cr-strap { fill: url(#crMetalGrad); stroke: rgba(0,0,0,.3); stroke-width: 1; }
.crate-svg .cr-rivet { fill: #fff; opacity: .8; }
.crate-svg .cr-shine { fill: rgba(255,255,255,.22); }
.crate-svg .cr-lid-main { fill: url(#crLidGrad); stroke: rgba(0,0,0,.4); stroke-width: 2; }
.crate-svg .cr-lock-base { fill: url(#crMetalGrad); stroke: var(--cC); stroke-width: 1.5; stroke-linejoin: round; }
.crate-svg .cr-gem { fill: url(#crGemGrad); stroke: #fff; stroke-width: 1; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: crGemPulse 2.4s ease-in-out infinite; }
.crate-svg .cr-gem-facet { fill: none; stroke: rgba(255,255,255,.55); stroke-width: .8; }
@keyframes crGemPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }
.crate-svg .cr-seam { fill: #fff; opacity: calc(var(--tension, 0) * .95); filter: blur(2.5px); }
.crate-svg .cr-beam { fill: rgba(var(--glow), .5); opacity: 0; transition: opacity .35s; filter: blur(5px); }
.crate-svg .cr-sparks path { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.crate-svg .cr-lid { transform-box: view-box; transform-origin: 30px 92px; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }

/* ---- la caisse de la boutique : une grande carte, qui donne envie */
.shop-crates { display: grid; gap: 12px; }
.crate-hero { position: relative; display: grid; grid-template-columns: minmax(190px, 300px) 1fr; align-items: center; gap: 10px 30px; padding: 22px 30px; border-radius: 24px; overflow: hidden; border: 2px solid transparent;
  background: radial-gradient(70% 90% at 20% 40%, rgba(255,205,70,.2), transparent 70%) padding-box, radial-gradient(60% 80% at 92% 8%, rgba(176,102,240,.22), transparent 70%) padding-box,
    linear-gradient(rgba(26,20,15,.97), rgba(20,15,12,.97)) padding-box, linear-gradient(135deg, #f1bd3f, #ff5d9a, #b066f0, #4b9be6, #f1bd3f) border-box;
  box-shadow: 0 0 40px rgba(255,150,60,.16); }
.crate-hero-art { --cA: #78bbff; --cB: #3f80d6; --cC: #1d3f7a; --glow: 75,155,230; position: relative; width: min(100%, 268px); aspect-ratio: 200 / 196; justify-self: center; }
.crate-halo { position: absolute; inset: -16%; border-radius: 50%; opacity: .85; filter: blur(12px); animation: skinSpin 9s linear infinite;
  background: conic-gradient(from 0deg, rgba(255,45,111,.55), rgba(255,179,0,.55), rgba(53,224,255,.55), rgba(139,61,255,.55), rgba(255,45,111,.55));
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 66%); mask: radial-gradient(circle, #000 28%, transparent 66%); }
.crate-hero .crate-svg { position: relative; animation: heroFloat 3.4s ease-in-out infinite, hueCycle 10s linear infinite; }
.crate-hero:hover .cr-lid { transform: translateY(-11px) rotate(-7deg); }
.crate-hero .cr-sparks path { animation: crTwinkle 1.6s ease-in-out infinite; }
.crate-hero .cr-sparks path:nth-child(2) { animation-delay: .5s; }
.crate-hero .cr-sparks path:nth-child(3) { animation-delay: 1s; }
.crate-hero .cr-sparks path:nth-child(4) { animation-delay: .8s; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes hueCycle { to { filter: hue-rotate(360deg) drop-shadow(0 0 16px rgba(255,255,255,.35)); } }
.crate-hero-body { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; position: relative; }
.tag-pill { padding: 4px 13px; border-radius: 999px; font: 900 10.5px var(--ui); letter-spacing: 1.1px; text-transform: uppercase; color: #2a1710; background: linear-gradient(90deg, #ffe38a, #ffa62e); }
.crate-name { font: 900 17px var(--ui); letter-spacing: .3px; }
.crate-hero .crate-name { font-size: 30px; line-height: 1.1; }
.crate-pitch { font: 600 13px/1.5 var(--ui); opacity: .78; max-width: 48ch; }
.crate-holds { display: flex; flex-wrap: wrap; gap: 6px; }
.hold { padding: 4px 11px; border-radius: 999px; font: 700 12px var(--ui); background: rgba(255,255,255,.07); border: 1px solid var(--card-line); }
.hold i { font-style: normal; margin-right: 5px; }
.ladder { display: flex; align-items: center; gap: 8px; margin: 3px 0; padding: 0; list-style: none; }
.ladder li { width: 11px; height: 11px; transform: rotate(45deg); border-radius: 3px; background: rgb(var(--glow)); box-shadow: 0 0 8px rgba(var(--glow), .8); }
.ladder li:last-child { background: conic-gradient(#ff2d6f, #ffb300, #35e0ff, #8b3dff, #ff2d6f); box-shadow: 0 0 10px rgba(255,255,255,.7); }
.crate-ultra { font: 600 12px/1.4 var(--ui); opacity: .9; }
.crate-ultra b { font-weight: 900; letter-spacing: 1px; background: linear-gradient(90deg, #ff2d6f, #ffb300, #35e0ff, #8b3dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.crate-buy { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crate-hero .crate-buy { margin-top: 4px; }
.crate-hero .crate-buy .btn { width: auto; min-width: 150px; margin-top: 0; padding: 13px 26px; font-size: 17px; }
.crate-hero .crate-buy .btn:not(.btn-ghost) { animation: buyPulse 2.2s ease-in-out infinite; }
@keyframes buyPulse { 0%, 100% { box-shadow: 0 8px 22px rgba(240,200,105,.2); } 50% { box-shadow: 0 8px 34px rgba(255,190,70,.6), 0 0 0 4px rgba(255,205,70,.16); } }
.crate-hero .link-btn { margin-top: -2px; }

/* ---- bandeaux : caisse PRIME de la semaine, caisse en attente */
.crate-banner { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: rgba(0,0,0,.28); border: 1px solid var(--card-line); }
.crate-banner .crate-ico { font-size: 34px; line-height: 1; flex: none; }
.crate-banner .crate-info { flex: 1; min-width: 0; text-align: left; font-size: 12.5px; }
.crate-banner .crate-name { font-size: 15px; margin-bottom: 3px; }
.crate-banner .crate-buy { flex: none; }
.crate-banner.weekly { border-color: rgba(255,212,90,.4); background: linear-gradient(135deg, rgba(255,212,90,.1), rgba(0,0,0,.28)); }
.crate-banner.weekly .crate-name { color: #ffd766; }
.crate-banner.weekly.ready { border-color: rgba(255,212,90,.9); box-shadow: 0 0 22px rgba(255,212,90,.3); animation: bannerGlow 2.4s ease-in-out infinite; }
.crate-banner.pending { justify-content: space-between; border-color: rgba(53,224,255,.6); background: linear-gradient(135deg, rgba(53,224,255,.12), rgba(0,0,0,.28)); font: 700 13.5px var(--ui); }
@keyframes bannerGlow { 0%, 100% { box-shadow: 0 0 14px rgba(255,212,90,.22); } 50% { box-shadow: 0 0 30px rgba(255,212,90,.5); } }

/* ---- petit questionnaire (apres quelques parties) : note, equilibrage (boutons a choix unique), deux textes libres ---- */
.survey-q { margin-top: 16px; text-align: left; }
.survey-q:first-child { margin-top: 4px; }
.survey-q label { display: block; margin-bottom: 8px; font: 700 13.5px var(--ui); }
.survey-scale, .survey-choice { display: flex; gap: 8px; flex-wrap: wrap; }
.survey-scale button, .survey-choice button { flex: 1 1 0; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--card-line);
  color: var(--text); font: 700 13.5px var(--ui); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.survey-scale button:hover, .survey-choice button:hover { border-color: rgba(255,255,255,.3); }
.survey-scale button.on, .survey-choice button.on { background: var(--grad); border-color: transparent; color: #2a1710; }
.survey-q textarea.field { margin-top: 0; resize: vertical; font-size: 13.5px; }

/* ---- tableau des chances (fenetre) */
.popup-panel.wide { max-width: min(800px, 94vw); }
.popup-panel.wide .popup-body { max-height: 58vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.odds-scroll { overflow-x: auto; }
.odds-table { width: 100%; border-collapse: collapse; text-align: left; font: 600 12px/1.45 var(--ui); }
.odds-table th, .odds-table td { padding: 8px 8px; border-bottom: 1px solid var(--card-line); vertical-align: top; }
.odds-table thead th { font: 800 10.5px var(--ui); text-transform: uppercase; letter-spacing: .8px; opacity: .6; }
.odds-table td:nth-child(2), .odds-table td:nth-child(3) { font-family: var(--mono); white-space: nowrap; }
.lvpill { display: inline-block; padding: 2px 11px; border-radius: 999px; font: 900 11px var(--ui); letter-spacing: .5px; text-transform: uppercase; color: rgb(var(--glow));
  border: 1px solid rgba(var(--glow), .65); background: rgba(var(--glow), .13); }
.odds-table tr.lv-ultra .lvpill { color: #fff; background: linear-gradient(90deg, rgba(255,45,111,.5), rgba(139,61,255,.5)); }
.pz b { display: inline-block; min-width: 54px; margin-right: 4px; font-family: var(--mono); color: #fff; }

/* ---- ecran d'ouverture (plein ecran) */
.crate-stage { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; padding: 56px 16px 24px; overflow-x: hidden; overflow-y: auto;
  animation: csIn .35s ease-out; color: var(--text); }
.crate-stage.hidden { display: none; }
@keyframes csIn { from { opacity: 0; } to { opacity: 1; } }
.cs-shaker { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: auto; }
.cs-shaker.shake1 { animation: csS1 .3s linear; }
.cs-shaker.shake2 { animation: csS2 .4s linear; }
.cs-shaker.shake3 { animation: csS3 .55s linear; }
@keyframes csS1 { 0%, 100% { transform: none; } 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, 2px); } 80% { transform: translate(2px, -1px); } }
@keyframes csS2 { 0%, 100% { transform: none; } 15% { transform: translate(-7px, 3px) rotate(-.4deg); } 30% { transform: translate(7px, -4px) rotate(.4deg); } 45% { transform: translate(-6px, 4px); }
  60% { transform: translate(6px, -3px) rotate(.3deg); } 80% { transform: translate(-3px, 2px); } }
@keyframes csS3 { 0%, 100% { transform: none; } 10% { transform: translate(-13px, 6px) rotate(-.8deg); } 22% { transform: translate(12px, -7px) rotate(.8deg); } 34% { transform: translate(-11px, 6px) rotate(-.6deg); }
  46% { transform: translate(10px, -5px) rotate(.6deg); } 60% { transform: translate(-7px, 4px); } 75% { transform: translate(5px, -3px); } 88% { transform: translate(-2px, 1px); } }
.cs-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(70% 58% at 50% 46%, rgba(var(--glow), calc(.3 + .22 * var(--tension, 0))), transparent 72%), radial-gradient(130% 100% at 50% 110%, #1d1410, #080605 72%); }
.cs-bg::after { content: ""; position: absolute; inset: -40%; opacity: 0; transition: opacity .6s;
  background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(var(--glow), .16) 0 5deg, transparent 5deg 17deg);
  -webkit-mask: radial-gradient(circle at 50% 46%, #000 0, transparent 58%); mask: radial-gradient(circle at 50% 46%, #000 0, transparent 58%); animation: csRays 50s linear infinite; }
.crate-stage.lv-rare .cs-bg::after { opacity: .4; }
.crate-stage.lv-epic .cs-bg::after { opacity: .6; }
.crate-stage.lv-legendary .cs-bg::after { opacity: .8; }
.crate-stage.lv-mythic .cs-bg::after, .crate-stage.lv-ultra .cs-bg::after { opacity: 1; }
.crate-stage.lv-ultra .cs-bg::after { background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(255,45,111,.26) 0 6deg, transparent 6deg 18deg, rgba(53,224,255,.24) 18deg 24deg, transparent 24deg 36deg,
  rgba(255,179,0,.24) 36deg 42deg, transparent 42deg 54deg, rgba(139,61,255,.26) 54deg 60deg, transparent 60deg 72deg); }
@keyframes csRays { to { transform: rotate(360deg); } }
@keyframes csHue { to { filter: hue-rotate(360deg); } }
.cs-fx { position: fixed; inset: 0; width: 100vw; height: var(--h100); z-index: 3; pointer-events: none; }
.cs-flash { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 46%, #fff 0, rgba(var(--glow), .65) 28%, transparent 64%); }
.cs-flash.go { animation: csFlash .7s ease-out; }
@keyframes csFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
.cs-later, .cs-sound { position: fixed; top: 16px; z-index: 6; border-radius: 10px; cursor: pointer; font: 700 13px var(--ui); color: var(--text);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.cs-later { right: 16px; padding: 9px 16px; }
.cs-sound { left: 16px; width: 42px; height: 38px; font-size: 18px; line-height: 1; }
.cs-later:hover, .cs-sound:hover { background: rgba(255,255,255,.14); }
.cs-later.hidden { display: none; }
.cs-head { text-align: center; }
.cs-kind { font: 800 12px var(--ui); letter-spacing: 2.5px; text-transform: uppercase; opacity: .75; }
.cs-levelname { margin-top: 2px; font: 900 clamp(30px, 6vw, 46px)/1.1 var(--ui); letter-spacing: 2px; text-transform: uppercase; color: rgb(var(--glow)); text-shadow: 0 0 26px rgba(var(--glow), .8), 0 3px 0 rgba(0,0,0,.4); }
.cs-levelname.pop { animation: csName .6s var(--ease); }
.crate-stage.lv-ultra .cs-levelname { background: linear-gradient(90deg, #ff2d6f, #ffb300, #35e0ff, #8b3dff, #ff2d6f); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; animation: csName .6s var(--ease), csSlide 3s linear infinite; }
@keyframes csName { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes csSlide { to { background-position: -200% 0; } }

.cs-ladder { display: flex; align-items: flex-start; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; max-width: 96vw; }
.cs-ladder li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; width: clamp(48px, 11vw, 82px); opacity: .42; transition: opacity .3s; font: 800 10px var(--ui); letter-spacing: .7px; text-transform: uppercase; color: rgb(var(--glow)); }
.cs-ladder li + li::before { content: ""; position: absolute; top: 8px; right: 50%; width: 100%; height: 2px; background: rgba(255,255,255,.18); }
.cs-ladder li.done::before, .cs-ladder li.now::before { background: rgba(var(--glow), .8); }
.cs-ladder li i { position: relative; z-index: 1; width: 15px; height: 15px; transform: rotate(45deg); border-radius: 4px; background: rgba(0,0,0,.6); border: 2px solid rgba(var(--glow), .8); }
.cs-ladder li.done { opacity: .85; }
.cs-ladder li.done i { background: rgb(var(--glow)); }
.cs-ladder li.now { opacity: 1; }
.cs-ladder li.now i { background: rgb(var(--glow)); transform: rotate(45deg) scale(1.35); box-shadow: 0 0 16px 3px rgba(var(--glow), .9); animation: ladderPulse 1.2s ease-in-out infinite; }
@keyframes ladderPulse { 0%, 100% { box-shadow: 0 0 12px 2px rgba(var(--glow), .8); } 50% { box-shadow: 0 0 26px 7px rgba(var(--glow), 1); } }
.cs-ladder li.lv-ultra i { border-color: #fff; }
.cs-ladder li.lv-ultra.now i, .cs-ladder li.lv-ultra.done i { background: conic-gradient(#ff2d6f, #ffb300, #35e0ff, #8b3dff, #ff2d6f); }

.cs-play { position: relative; display: grid; place-items: center; }
.cs-crate { position: relative; display: block; width: min(64vw, 330px, 44vh); aspect-ratio: 200 / 196; padding: 0; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--ease), opacity .5s, width .5s var(--ease); }
.cs-crate::before { content: ""; position: absolute; inset: -3%; border-radius: 50%; border: 2px solid rgba(var(--glow), .55); pointer-events: none; animation: csPing 2s ease-out infinite; }
@keyframes csPing { 0% { transform: scale(.82); opacity: .9; } 100% { transform: scale(1.22); opacity: 0; } }
.crate-stage.opening .cs-crate::before, .crate-stage.showres .cs-crate::before { display: none; }
/* ---- dernier clic avant le niveau suivant : la caisse "menace" (anneau rouge plus rapide) - la tension habituelle (--glow) suffit deja aux autres clics,
   celui-ci est le seul qui peut faire RATER, il merite un signal a part */
.cs-crate.danger::before { border-color: rgba(255,70,70,.9); animation-duration: .8s; }
.cs-crate.danger .cs-crate-art { animation: csFloat calc(3.4s - 2.5s * var(--tension, 0)) ease-in-out infinite, csDanger .5s ease-in-out infinite alternate; }
@keyframes csDanger { from { filter: drop-shadow(0 0 30px rgba(255,70,70,.55)); } to { filter: drop-shadow(0 0 52px rgba(255,70,70,.9)); } }
.cs-crate:focus-visible { outline: 3px solid rgba(var(--glow), .9); outline-offset: 8px; border-radius: 20px; }
.cs-crate-art { display: block; width: 100%; height: 100%;
  animation: csFloat calc(3.4s - 2.5s * var(--tension, 0)) ease-in-out infinite;
  filter: drop-shadow(0 0 calc(24px + 36px * var(--tension, 0)) rgba(var(--glow), calc(.55 + .4 * var(--tension, 0)))); }
.cs-crate:hover .cs-crate-art { filter: drop-shadow(0 0 calc(38px + 30px * var(--tension, 0)) rgba(var(--glow), .95)); }
.cs-crate .cr-sparks path { animation: crTwinkle 1.6s ease-in-out infinite; opacity: .8; }
.cs-crate .cr-sparks path:nth-child(2) { animation-delay: .5s; }
.cs-crate .cr-sparks path:nth-child(3) { animation-delay: 1s; }
.cs-crate .cr-sparks path:nth-child(4) { animation-delay: .8s; }
.crate-stage.lv-ultra .cs-crate-art { animation: csFloat 3.2s ease-in-out infinite, csHue 4s linear infinite; }
@keyframes csFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes crTwinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(25deg); } }
.cs-crate.hit { animation: csHit .42s ease-out; }
.cs-crate.up { animation: csUp .9s var(--ease); }
@keyframes csHit { 0% { transform: scale(1); } 22% { transform: scale(1.14, .82) rotate(-2deg); } 50% { transform: scale(.9, 1.1) rotate(1.5deg); } 75% { transform: scale(1.04, .97); } 100% { transform: scale(1); } }
@keyframes csUp { 0% { transform: scale(1); } 25% { transform: scale(.82, 1.1) rotate(-5deg); } 55% { transform: scale(1.28) rotate(4deg); } 100% { transform: scale(1); } }
.crate-stage.charging .cs-crate-art { animation: csJitter .09s linear infinite; }
@keyframes csJitter { 0% { transform: translate(-3px, 1px); } 33% { transform: translate(3px, -2px); } 66% { transform: translate(-2px, -1px); } 100% { transform: translate(2px, 2px); } }
.crate-stage.opening .cs-crate { pointer-events: none; animation: csShake var(--openDur, 1s) linear; }
@keyframes csShake { 0% { transform: translate(0); } 10% { transform: translate(-3px, 1px) rotate(-1deg); } 20% { transform: translate(4px, -1px) rotate(1.4deg); } 30% { transform: translate(-5px, 2px) rotate(-1.8deg); }
  40% { transform: translate(6px, -2px) rotate(2deg); } 50% { transform: translate(-7px, 2px) rotate(-2.4deg); } 60% { transform: translate(8px, -3px) rotate(2.6deg); }
  70% { transform: translate(-9px, 3px) rotate(-3deg) scale(1.03); } 80% { transform: translate(10px, -3px) rotate(3deg) scale(1.05); } 90% { transform: translate(-6px, 2px) rotate(-2deg) scale(1.07); } 100% { transform: translate(0) scale(1.08); } }
.crate-stage.opening .cs-crate-art { filter: drop-shadow(0 0 70px rgba(var(--glow), 1)) brightness(1.18); }
.crate-stage.opened .cr-lid { transform: translate(-8px, -52px) rotate(-30deg); }
.crate-stage.opened .cr-beam { opacity: 1; }
.crate-stage.opened .cr-sparks path { animation-duration: .7s; }
.crate-stage.opened .cs-shaker { animation: csRevealPunch .5s var(--ease); }         /* petit "coup de camera" au moment ou tout explose, en plus de la secousse */
@keyframes csRevealPunch { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
.crate-stage.showres .cs-crate { opacity: 0; transform: scale(.35) translateY(-40px); width: 0; height: 0; margin: -6px; pointer-events: none; }
.cs-slam { position: absolute; left: 50%; top: 46%; z-index: 5; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
  font: 900 clamp(38px, 9vw, 86px) var(--ui); letter-spacing: 3px; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 30px rgba(var(--glow), 1), 0 0 64px rgba(var(--glow), .85), 0 5px 0 rgba(0,0,0,.4); }
.cs-slam.go { animation: csSlam 1.15s cubic-bezier(.2, .9, .3, 1) forwards; }
.cs-slam.go.lv-ultra { background: linear-gradient(90deg, #ff2d6f, #ffb300, #35e0ff, #8b3dff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 22px rgba(255,255,255,.7)); }
@keyframes csSlam { 0% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); filter: blur(12px); } 16% { opacity: 1; transform: translate(-50%, -50%) scale(.94); filter: blur(0); }
  28% { transform: translate(-50%, -50%) scale(1.1); } 42% { transform: translate(-50%, -50%) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -95%) scale(1); } }
.cs-float { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); z-index: 5; pointer-events: none; font: 900 22px var(--ui); letter-spacing: 1px; animation: csFloatUp .9s ease-out forwards; }
.cs-float.miss { color: #a3a9b8; text-shadow: 0 2px 10px #000; }
@keyframes csFloatUp { from { opacity: 1; transform: translate(-50%, 0) scale(1.2); } to { opacity: 0; transform: translate(-50%, -70px) scale(.9); } }

.cs-info { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 96px; text-align: center; }
.cs-info.hidden { display: none; }
.cs-pips { display: flex; gap: 11px; height: 24px; align-items: center; }
.pip { width: 20px; height: 20px; transform: rotate(45deg); border-radius: 5px; transition: background .2s, box-shadow .2s, opacity .2s; }
.pip.on { background: rgb(var(--glow)); box-shadow: 0 0 14px 2px rgba(var(--glow), .85); animation: pipBeat calc(1.4s - .9s * var(--tension, 0)) ease-in-out infinite; }
.pip.off { background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.2); }
.pip.off.pop { animation: pipPop .5s ease-out; }
@keyframes pipBeat { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.14); } }
@keyframes pipPop { 0% { transform: rotate(45deg) scale(2); background: #fff; box-shadow: 0 0 28px 8px rgba(var(--glow), 1); } 100% { transform: rotate(45deg) scale(1); background: rgba(255,255,255,.08); box-shadow: none; } }
.cs-hint { font: 800 clamp(17px, 3.4vw, 22px) var(--ui); letter-spacing: .3px; text-shadow: 0 2px 14px #000; }
.cs-hint.bump { animation: hintBump .35s ease-out; }
@keyframes hintBump { 0% { transform: scale(1.22); } 100% { transform: scale(1); } }
.cs-chance { font: 700 13.5px var(--mono); opacity: .82; }
.cs-chance:empty { display: none; }

.cs-result { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; max-width: 96vw; animation: csResIn .55s var(--ease); }
.cs-result.hidden { display: none; }
@keyframes csResIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
.cs-result-title { font: 900 clamp(18px, 3.6vw, 26px) var(--ui); letter-spacing: 1.5px; text-transform: uppercase; color: rgb(var(--glow)); text-shadow: 0 0 22px rgba(var(--glow), .7); }
.cs-rewards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 14px 0 12px; }
.rw { width: 158px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: 18px; background: rgba(8,6,5,.66);
  border: 2px solid rgba(var(--glow), .55); box-shadow: 0 0 24px rgba(var(--glow), .18); animation: rwIn .6s var(--ease) both; }
.rw b { font: 900 15px var(--ui); }
.rw small { font: 700 11.5px var(--ui); opacity: .82; }
.rw small.new { color: #7dffb0; opacity: 1; letter-spacing: 1.2px; font-weight: 900; animation: newBlink 1.1s ease-in-out infinite; }
.rw small.dup { color: #ffd766; }
.rw .rar-badge { margin-bottom: 2px; }
.rw-cur { border-color: rgba(255,212,90,.6); }
.rw-cur .rw-ico { font-size: 46px; line-height: 1; filter: drop-shadow(0 0 14px rgba(255,205,70,.75)); }
.rw-cur b { font: 900 27px var(--mono); color: #ffd766; }
.rw-item { border-color: rgba(var(--sk-a), .75); box-shadow: 0 0 30px rgba(var(--sk-a), .3); }
.rw-item.r-mythic { box-shadow: 0 0 34px rgba(255,45,111,.4), 0 0 50px rgba(139,61,255,.3); }
.rw-art { position: relative; width: 116px; height: 116px; display: grid; place-items: center; }
.rw-art .skin-ico { position: relative; z-index: 1; width: 100%; height: 100%; }
.rw-art .aura-prev { border-radius: 50%; }
@keyframes rwIn { from { opacity: 0; transform: translateY(26px) scale(.7) rotate(-3deg); } 60% { transform: translateY(-4px) scale(1.05); } to { opacity: 1; transform: none; } }
@keyframes newBlink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.cs-done { width: auto; min-width: 190px; margin-top: 8px; padding: 13px 34px; font-size: 16px; }

@media (max-width: 760px) {
  .crate-hero { grid-template-columns: 1fr; padding: 20px 18px; text-align: center; }
  .crate-hero-body { align-items: center; }
  .crate-hero-art { width: min(58vw, 220px); }
  .crate-hero .crate-name { font-size: 26px; }
}
@media (max-width: 520px) {
  .cs-ladder li span { display: none; }
  .cs-ladder li { width: 44px; }
  .rw { width: 138px; }
  .crate-banner { flex-wrap: wrap; }
}
@media (max-height: 640px) { .cs-shaker { gap: 6px; } .crate-stage { padding-top: 44px; } .cs-crate { width: min(52vw, 260px, 38vh); } }
@media (prefers-reduced-motion: reduce) {
  .cs-crate-art, .crate-stage.lv-ultra .cs-crate-art, .cs-bg::after, .pip.on, .cs-levelname, .tdot, .crate-banner.weekly.ready, .crate-halo, .crate-hero .crate-svg,
  .crate-hero .crate-buy .btn, .cs-crate::before, .cs-ladder li.now i, .crate-svg .cr-gem, .cs-crate.danger .cs-crate-art { animation: none !important; }
  .crate-stage.opening .cs-crate, .cs-shaker.shake1, .cs-shaker.shake2, .cs-shaker.shake3, .crate-stage.opened .cs-shaker { animation: none; }
}

/* ---- PRIME : onglet a part dans la barre du haut + bouton « Devenir PRIME » toujours visible dans la boutique */
.navlink-prime { color: #ffd45a; opacity: .95; border-color: rgba(255,212,90,.35); background: linear-gradient(90deg, rgba(255,212,90,.14), rgba(255,174,43,.05)); }
.navlink-prime svg { filter: drop-shadow(0 0 6px rgba(255,190,50,.7)); }
.navlink-prime:hover { background: linear-gradient(90deg, rgba(255,212,90,.24), rgba(255,174,43,.1)); }
.navlink-prime.on { color: #3a2606; border-color: transparent; background: linear-gradient(90deg, #ffe38a, #f2b632); box-shadow: 0 6px 22px rgba(255,190,50,.35); }
.navlink-prime.on svg { filter: none; }
.prime-page-title span { background: linear-gradient(90deg, #ffe9a0, #ffc93c, #f2b632); -webkit-background-clip: text; background-clip: text; color: transparent; }
#extraPrime .prime-card { margin-top: 0; }
#extraPrime .prime-card-in { padding: 26px 30px; border-radius: 20px; }
#extraPrime .prime-title { font-size: 26px; }
#extraPrime .prime-price b { font-size: 30px; }
#extraPrime .prime-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; margin: 20px 0 10px; }
#extraPrime .prime-perks li { font-size: 14.5px; }
#extraPrime .prime-buy { max-width: 420px; padding: 16px 22px; font-size: 17px; }
.prime-fab { display: none; position: fixed; right: 22px; bottom: 22px; z-index: 8; align-items: center; gap: 12px; padding: 12px 22px 12px 16px; border-radius: 999px; border: none; cursor: pointer;
  color: #3a2606; background: linear-gradient(90deg, #ffe38a, #f2b632); font-family: var(--ui); box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 3px rgba(255,212,90,.22);
  animation: fabPulse 2.4s ease-in-out infinite; transition: transform .15s var(--ease); }
body[data-pane="boutique"]:not(.is-prime) .prime-fab { display: inline-flex; }
.prime-fab:hover { transform: translateY(-2px) scale(1.03); }
.prime-fab:active { transform: scale(.97); }
.pf-crown { flex: none; }
.pf-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.pf-txt b { font: 900 15px var(--ui); letter-spacing: .3px; }
.pf-txt small { font: 700 11px var(--mono); opacity: .8; }
.pf-txt small:empty { display: none; }
@keyframes fabPulse { 0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 3px rgba(255,212,90,.2); } 50% { box-shadow: 0 10px 34px rgba(0,0,0,.45), 0 0 0 8px rgba(255,212,90,.08), 0 0 26px rgba(255,190,50,.55); } }
body.no-fx .prime-fab { animation: none; }
.perso-empty { grid-column: 1 / -1; margin: 4px 0 0; font: 600 12.5px/1.45 var(--ui); opacity: .6; }
@media (max-width: 760px) {
  #extraPrime .prime-perks { grid-template-columns: 1fr; }
  #extraPrime .prime-card-in { padding: 20px 18px; }
  .prime-fab { left: auto; right: 12px; bottom: 12px; padding: 8px 16px 8px 12px; gap: 8px; }          /* petite pastille : elle ne cache plus les boutons de prix */
  .prime-fab .pf-txt small { display: none; }
}
.btn.prime-buy { background: linear-gradient(90deg, #ffe38a, #f2b632); color: #3a2606; }

/* ---- garantie de la caisse : barres « legendaire garanti dans N caisses » + bandeau sur l'ecran d'ouverture */
.pity { display: grid; gap: 7px; width: min(100%, 360px); margin: 2px 0; }
.pity-row { display: grid; gap: 3px; }
.pity-txt { font: 700 11.5px var(--ui); color: rgb(var(--glow)); }
.pity-bar { display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.pity-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--glow), .55), rgb(var(--glow))); transition: width .6s var(--ease); }
.pity-row.ready .pity-txt { font-weight: 900; animation: newBlink 1.1s ease-in-out infinite; }
.pity-row.ready .pity-bar i { box-shadow: 0 0 12px 2px rgba(var(--glow), .9); }
.pity-note { margin: 10px 0 0; color: #ffe38a; line-height: 1.5; }
.cs-boost { margin-top: 6px; padding: 5px 16px; border-radius: 999px; font: 900 12px var(--ui); letter-spacing: 1.4px; text-transform: uppercase; color: #2a1710;
  background: linear-gradient(90deg, #ffe38a, #ffa62e); box-shadow: 0 0 22px rgba(255,190,70,.6); animation: bannerGlow 1.8s ease-in-out infinite; }
.cs-boost.hidden { display: none; }

/* ---- offres de la semaine (boutique) + caisses en stock */
.shop-offers { display: grid; gap: 10px; }
.offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 10px; }
.offer-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 10px 12px; border-radius: 18px; text-align: center; overflow: hidden;
  background: radial-gradient(90% 55% at 50% 30%, rgba(255,205,70,.16), transparent 70%), rgba(0,0,0,.3); border: 2px solid rgba(255,214,102,.45);
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.offer-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(255,190,70,.2); border-color: rgba(255,214,102,.8); }
.offer-card.of-pack { border-color: rgba(176,102,240,.6); background: radial-gradient(90% 55% at 50% 30%, rgba(176,102,240,.2), transparent 70%), rgba(0,0,0,.3); }
.offer-card.of-crates { border-color: rgba(75,155,230,.6); background: radial-gradient(90% 55% at 50% 30%, rgba(75,155,230,.2), transparent 70%), rgba(0,0,0,.3); }
.offer-card.of-gems { border-color: rgba(53,224,255,.55); background: radial-gradient(90% 55% at 50% 30%, rgba(53,224,255,.18), transparent 70%), rgba(0,0,0,.3); }
.offer-card.bought { opacity: .6; filter: saturate(.7); }
.of-off { top: 10px; color: #fff; background: linear-gradient(90deg, #ff5d9a, #ff2d6f); }
.of-kind { margin-top: 10px; font: 900 11.5px var(--ui); letter-spacing: .8px; text-transform: uppercase; opacity: .92; }
.of-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 116px; }
.of-art { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.of-art .skin-ico { position: relative; z-index: 1; width: 100%; height: 100%; }
.of-art .aura-prev, .of-mini .aura-prev { border-radius: 50%; }
.of-name { font: 800 13px var(--ui); }
.of-minis { display: flex; gap: 8px; justify-content: center; }
.of-mini { position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
.of-mini .skin-ico { position: relative; z-index: 1; width: 100%; height: 100%; }
.of-chips, .of-done-list { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.of-chip { padding: 3px 10px; border-radius: 999px; font: 800 12px var(--ui); background: rgba(255,255,255,.08); border: 1px solid var(--card-line); }
.of-big { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 46px; line-height: 1; }
.of-big b { font: 900 22px var(--mono); color: #ffd766; }
.of-vs { font: 600 11px var(--ui); opacity: .7; }
.of-price { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; }
.of-old { font: 700 12px var(--mono); opacity: .55; text-decoration: line-through; }
.of-done { font: 900 12.5px var(--ui); color: #7dffb0; padding: 8px 0; }
.of-done.own { color: #ffd766; }
.of-done-list { margin-top: 4px; }
.crate-banner.stock { border-color: rgba(125,255,176,.55); background: linear-gradient(135deg, rgba(125,255,176,.12), rgba(0,0,0,.28)); }

/* ---- sons : reglage (interrupteur + volume) et haut-parleur en jeu */
.set-vol { display: flex; align-items: center; gap: 14px; }
.set-vol input[type=range] { width: 130px; accent-color: var(--brand); }
.hud-sound { pointer-events: auto; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1;
  color: var(--text); background: var(--panel); border: 1px solid var(--line); }
.hud-sound:hover { border-color: var(--brand); }

/* ---- boutique : UNE page qui defile (offre vedette, caisse, skins, auras, PRIME) + raccourcis colles sous le menu du haut */
.shop-head { margin-bottom: 14px; padding-bottom: 12px; }
.shop-jump { position: sticky; top: var(--nav-h, 58px); z-index: 4; display: flex; gap: 4px; padding: 5px; margin: 0 0 18px; border-radius: 16px; overflow-x: auto; scrollbar-width: none;
  background: rgba(20,17,14,.95); border: 1px solid var(--card-line); box-shadow: 0 12px 26px rgba(0,0,0,.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.shop-jump::-webkit-scrollbar { display: none; }
.jump { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border: none; border-radius: 12px; cursor: pointer; white-space: nowrap;
  background: none; color: var(--text); font: 800 13.5px var(--ui); opacity: .62; transition: background .18s, opacity .18s, color .18s, transform .12s var(--ease); }
.jump:hover { opacity: 1; background: rgba(255,255,255,.07); }
.jump:active { transform: scale(.97); }
.jump.on { opacity: 1; color: #2a1710; background: var(--grad); }
.jump-prime { color: #ffd45a; opacity: .95; }
.jump-prime:hover { background: rgba(255,212,90,.14); }
.jump-prime.on { color: #3a2606; background: linear-gradient(90deg, #ffe38a, #f2b632); }
.jump .tdot { top: 6px; right: 8px; }
body.is-prime .shop-jump { background: rgba(38,29,12,.95); }
.shop-sec { scroll-margin-top: calc(var(--nav-h, 58px) + var(--bar-h, 54px) + 14px); margin-bottom: 36px; }
.shop-sec:last-child { margin-bottom: 4px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sec-head h3 { margin: 0; font: 900 21px var(--ui); letter-spacing: .3px; }
.sec-sub { margin: 0 0 14px; line-height: 1.5; max-width: 70ch; }
body[data-shop-sec="prime"] .prime-fab { display: none !important; }        /* la carte PRIME est deja a l'ecran : pas de doublon */

/* compte a rebours de la semaine : rouge et clignotant pendant la derniere journee */
.timer { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; white-space: nowrap; font: 800 12.5px var(--mono);
  color: #ffd766; background: rgba(255,205,70,.1); border: 1px solid rgba(255,205,70,.38); }
.timer.urgent { color: #fff; background: rgba(255,45,111,.26); border-color: rgba(255,100,150,.8); animation: newBlink 1.6s ease-in-out infinite; }

/* offre vedette : l'operateur anime avec le skin du pack, prix barre, economie, gros bouton */
.shop-offers { gap: 14px; }
.offer-hero { position: relative; display: grid; grid-template-columns: minmax(200px, 290px) 1fr; align-items: center; gap: 10px 32px; padding: 22px 30px 22px 22px; border-radius: 24px; overflow: hidden; border: 2px solid transparent;
  background: radial-gradient(70% 90% at 16% 50%, rgba(176,102,240,.3), transparent 70%) padding-box, radial-gradient(60% 80% at 96% 6%, rgba(255,205,70,.2), transparent 70%) padding-box,
    linear-gradient(rgba(26,20,15,.97), rgba(20,15,12,.97)) padding-box, linear-gradient(135deg, #f1bd3f, #ff5d9a, #b066f0, #f1bd3f) border-box;
  box-shadow: 0 0 40px rgba(176,102,240,.2); transition: transform .2s var(--ease), box-shadow .2s; }
.offer-hero[data-open] { cursor: pointer; }
.offer-hero[data-open]:hover { transform: translateY(-2px); box-shadow: 0 0 52px rgba(176,102,240,.34); }
.offer-hero.bought { opacity: .62; filter: saturate(.7); }
.offer-hero .of-off { top: 18px; padding: 6px 18px 6px 14px; font-size: 13px; }
.oh-art { position: relative; display: grid; place-items: center; height: 230px; border-radius: 18px; background: radial-gradient(circle at 50% 56%, rgba(var(--sk-a, 255,205,70), .3), transparent 66%); }
.oh-art canvas, .pv-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }        /* (absolu : la taille vient du cadre, pas du canvas) */
.oh-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.oh-name { font: 900 32px/1.08 var(--ui); }
.oh-list { justify-content: flex-start; }
.oh-price { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.oh-price s { font: 700 20px var(--mono); opacity: .6; }
.oh-save { font: 800 14px var(--ui); color: #7dffb0; }
.offer-hero .buy-col { align-items: flex-start; }
.pv-big { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 76px; line-height: 1; }
.pv-big b { font: 900 30px var(--mono); color: #ffd766; }
.offer-card[data-open] { cursor: pointer; }
.offer-card.bought { cursor: default; }
.offers-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* boutons de prix : UN seul par article. Or = pieces, bleu = gemmes (quand les pieces manquent), pointille = rien ne suffit (barre de progression + « il te manque N ») */
.buy-col { display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 100%; }
.buy-btn { width: auto; margin-top: 0; min-width: 118px; padding: 9px 18px; font-size: 14.5px; border-radius: 12px; }
.buy-btn.big { min-width: 210px; padding: 15px 34px; font-size: 19px; border-radius: 14px; animation: buyPulse 2.2s ease-in-out infinite; }
.buy-btn.with-gems { background: linear-gradient(90deg, #8ff4ff, #38b7ea); color: #04222c; }
.buy-btn.short, .crate-hero .crate-buy .buy-btn.short { color: var(--text); background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.32); box-shadow: none; animation: none; }
.buy-btn.short:hover { background: rgba(255,255,255,.12); }
.short-bar { display: block; width: 100%; min-width: 110px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.13); overflow: hidden; }
.short-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffe38a, #f2b632); }
.short-note { font: 700 11.5px var(--ui); color: #ffb3d1; text-align: center; }
.short-note.sim { color: var(--text); opacity: .6; }
.of-chip.dup { opacity: .72; border-style: dashed; }
.crate-hero .buy-col { align-items: flex-start; }
.card-act { display: flex; justify-content: center; width: 100%; margin-top: auto; }
.card-act .buy-col { width: 100%; }
.shop-skin-card .buy-btn { width: 100%; min-width: 0; padding: 8px 10px; font-size: 14px; }
.shop-skin-card.crate-only:not(.aura-card) { padding-top: 36px; }        /* le ruban « Caisse » ne masque plus la pastille de rarete */
.shop-skin-card[data-open] { cursor: pointer; }
.shop-skin-card .equip-tag { font-size: 11px; letter-spacing: .6px; color: var(--brand); padding: 8px 0; }
.shop-auras-grid .shop-skin-card .buy-btn { font-size: 13px; padding: 7px 8px; }

/* fenetre d'apercu d'un article (skin / aura / offre) + fete apres l'achat */
.popup-panel.pv { max-width: min(440px, 94vw); }
.popup-panel.pv .popup-title { font-size: 22px; }
.popup-panel.pv .popup-icon { font-size: 40px; }
.pv-stage { position: relative; display: grid; place-items: center; height: 250px; margin: 2px 0 10px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(circle at 50% 58%, rgba(var(--sk-a, 255,205,70), .34), transparent 68%), rgba(0,0,0,.3); border: 1px solid rgba(var(--sk-a, 255,255,255), .38); }
.pv-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 6px; }
.pv-price { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.pv-price s { font: 700 15px var(--mono); opacity: .55; }
.pv-price b { font: 900 28px var(--mono); color: #ffd766; }
.pv-price .save { font: 900 12px var(--ui); font-style: normal; padding: 3px 9px; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #ff5d9a, #ff2d6f); }
.pv-save { margin-top: 3px; font: 800 13px var(--ui); color: #7dffb0; }
.pv-short { margin-top: 3px; font: 700 12px var(--ui); color: #ffb3d1; }
.popup-actions .cta { min-width: 190px; padding: 13px 26px; font-size: 16px; }

/* PRIME : carte doree en bas de la boutique */
.shop-prime-in { display: grid; grid-template-columns: 1fr auto; gap: 14px 30px; align-items: center; padding: 22px 26px; border-radius: 22px; }
.shop-prime-in .prime-title { font-size: 26px; }
.shop-prime-in .prime-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin: 14px 0 4px; }
.shop-prime-in .sp-side { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 260px; text-align: center; }
.shop-prime-in .prime-price { text-align: center; }
.shop-prime-in .prime-price b { font-size: 30px; }
.shop-prime-in .prime-buy { width: 100%; margin-top: 4px; padding: 14px 18px; font-size: 15px; }

@media (max-width: 760px) {
  .shop-sec { margin-bottom: 28px; }
  .sec-head h3 { font-size: 19px; }
  .jump { padding: 9px 13px; }
  .offer-hero { grid-template-columns: 1fr; padding: 20px 18px; text-align: center; }
  .oh-art { height: 180px; }
  .oh-body { align-items: center; }
  #extraBoutique .shop-head { display: none; }                                  /* le raccourci « Boutique » du menu dit deja ou on est */
  .offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .offer-card { padding: 30px 8px 10px; }
  .of-body { min-height: 96px; }
  .of-art { width: 64px; height: 64px; }
  .of-mini { width: 48px; height: 48px; }
  .oh-list { justify-content: center; }
  .oh-name { font-size: 26px; }
  .offer-hero .buy-col, .crate-hero .buy-col { align-items: center; }
  .offer-hero .of-off { top: 14px; }
  .shop-skins-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .shop-auras-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .shop-prime-in { grid-template-columns: 1fr; padding: 18px 16px; }
  .shop-prime-in .sp-side { min-width: 0; }
  .shop-prime-in .prime-perks { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {                                                     /* petit ecran : seule la section en cours garde son libelle, les autres sont des icones */
  .jump { padding: 9px 11px; gap: 6px; }
  .jump:not(.on) > span:nth-child(2) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .buy-btn.big, .timer.urgent { animation: none !important; } }

/* ---- missions de la semaine (sous celles du jour, dans la meme carte) */
.dl-week { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--card-line); }
.dl-week-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dl-week-head b { font: 800 13px var(--ui); letter-spacing: .3px; }

/* ---- Pass : compte a rebours de la saison, « prochain gros lot » */
.pass-end { font: 800 10.5px var(--mono); font-style: normal; margin-left: 10px; padding: 2px 9px; border-radius: 999px; color: #ffd766; background: rgba(255,205,70,.1); border: 1px solid rgba(255,205,70,.38); white-space: nowrap; }
.pass-end.urgent, .chip.urgent { color: #fff; background: rgba(255,45,111,.26); border-color: rgba(255,100,150,.8); animation: newBlink 1.6s ease-in-out infinite; }
.pass-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 7px; font: 700 12.5px var(--ui); }
.pass-next b { font: 800 10.5px var(--ui); letter-spacing: .8px; text-transform: uppercase; opacity: .6; }
.pass-next-line em { font-style: normal; font-size: 11.5px; opacity: .65; margin-left: 4px; }
.pass-next-line.prem { color: #ffd766; }
@media (prefers-reduced-motion: reduce) { .pass-end.urgent, .chip.urgent { animation: none; } }

/* ---- bandeau « premier achat : une caisse offerte » (haut de la boutique, jusqu'au premier achat) */
.shop-promo { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 14px; border-radius: 16px; border: 1px solid rgba(125,255,176,.55);
  background: linear-gradient(135deg, rgba(125,255,176,.14), rgba(0,0,0,.28)); animation: bannerGlow 2.6s ease-in-out infinite; }
.shop-promo.hidden { display: none; }
.shop-promo .sp-ico { font-size: 32px; line-height: 1; flex: none; }
.shop-promo b { display: block; font: 900 15px var(--ui); color: #b9ffd2; }
.shop-promo small { display: block; margin-top: 2px; font: 600 12px/1.4 var(--ui); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .shop-promo { animation: none; } }

#menuStage { max-width: 1560px; padding: 18px 28px 30px; }
#menuHero { --hz: 1; }
/* (la mise en page de l'accueil - titre, perso, JOUER, barre, pied, fenetres - vit dans hero.css) */

@media (prefers-reduced-motion: reduce) { #menuHero .btn-play { animation: none; } }

/* carte du moment (pastille du pied de l'accueil, salle d'attente) */
.map-pill.hidden { display: none; }
.map-pill b { color: var(--brand2); }
.lw-map { opacity: .85; font-weight: 800; }

/* auras : marque « Animee » (une etincelle dans le coin du visuel ; avec son texte dans la fenetre d'apercu) ; le ruban « Caisse » se pousse comme sur un skin */
.shop-skin-card.aura-card .swatch { position: relative; }
.anim-tag { display: inline-flex; align-items: center; justify-content: center; font: 800 9px var(--ui); letter-spacing: .6px; text-transform: uppercase;
  color: #d8fff0; background: rgba(40,200,160,.22); border: 1px solid rgba(80,230,190,.55); border-radius: 999px; }
.shop-skin-card .anim-tag { position: absolute; top: -2px; right: -2px; z-index: 3; width: 22px; height: 22px; font-size: 11px; }
.anim-tag.txt { padding: 3px 9px; margin-left: 6px; vertical-align: middle; }
.shop-skin-card.crate-only.aura-card { padding-top: 36px; }

/* la carte change : la pastille s'illumine pendant la transition diagonale de l'arriere-plan */
.map-pill.changed { animation: mapPillPop 3.2s ease-out; }
@keyframes mapPillPop { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240,200,105,0); } 12% { transform: scale(1.09); box-shadow: 0 0 0 6px rgba(240,200,105,.4), 0 0 26px rgba(240,200,105,.55); }
  60% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(240,200,105,0), 0 0 22px rgba(240,200,105,.3); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240,200,105,0); } }
@media (prefers-reduced-motion: reduce) { .map-pill.changed { animation: none; } }
.kicked-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
/* telephone en paysage (peu de hauteur) : la fenetre des parametres garde le maximum de place pour les reglages */
@media (max-height: 480px) {
  .pvs-panel { max-height: calc(var(--h100) - 12px); padding: 12px 16px 10px; }
  .pvs-panel .modal-title { font-size: 17px; margin-bottom: 0; }
  .pvs-panel .modal-sub { display: none; }
  .pvs-panel > .btn { margin-top: 6px; padding: 7px 28px; }
  .rs-presets { gap: 6px; margin-bottom: 8px; }
  .rs-preset { padding: 6px 4px; }
  .rs-preset .ico { font-size: 17px; }
  .rs-preset small { display: none; }
  .rs-sec { padding: 8px 10px; margin-bottom: 6px; }
  .rs-h { margin-bottom: 5px; }
  .rs-opt { padding: 6px 10px; }
}

/* carte de la salle privee dans l'accueil (on y retourne apres sa mort / « Menu ») : meme habillage + meme pliage que la carte du groupe (.party-fold/.party-chev) */
#roomCard { position: relative; max-width: none; margin: 10px 0 0; border-radius: 16px; text-align: left; overflow: hidden; background: rgba(10, 8, 6, .68);
  border: 1px solid rgba(240, 200, 105, .32); box-shadow: 0 10px 30px rgba(0, 0, 0, .34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#roomCard.hidden { display: none; }
#roomCard.folded .party-chev { transform: rotate(180deg); }
#roomFoldBody { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s var(--ease), visibility 0s linear 0s; }
#roomCard.folded #roomFoldBody { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .32s var(--ease), visibility 0s linear .32s; }
#roomFoldBody .pb-in { min-height: 0; overflow: hidden; }
.room-state { margin: 0 0 8px; padding: 0 14px; font: 700 12.5px var(--ui); color: var(--brand); }
#roomFoldBody .party-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 14px 14px; }
#roomBackBtn:disabled { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: reduce) { #roomFoldBody, #roomCard.folded #roomFoldBody, #roomCard .party-chev { transition: none; } }
.pv-chip.away { opacity: .6; }
.pv-chip .pv-away { font: 700 10px var(--ui); font-style: normal; opacity: .75; margin-left: 6px; }

/* ---- accueil allege : recompense de connexion en 7 segments, missions en onglets (Aujourd'hui / Semaine), fines barres ---- */
.dl-dots { display: flex; gap: 6px; margin: 10px 0 12px; }
.dl-dot { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.14); }
.dl-dot.done { background: #57c25f; }
.dl-dot.today { background: var(--brand); box-shadow: 0 0 10px rgba(240,200,105,.5); }
.dl-dot.today.ready { animation: readyPulse 1.7s ease-in-out infinite; }
.m-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 0 0 6px; border-bottom: 1px solid rgba(255,255,255,.1); }
.m-tabs { display: flex; gap: 20px; }
.m-tab { position: relative; padding: 6px 0 9px; margin-bottom: -1px; cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text); font: 800 13.5px var(--ui); opacity: .55; transition: opacity .15s; }
.m-tab:hover { opacity: .85; }
.m-tab.on { opacity: 1; border-bottom-color: var(--brand); }
.m-tab i { margin-left: 7px; padding: 1px 6px; border-radius: 99px; font: 900 10px var(--mono); font-style: normal; background: var(--grad); color: #2a1710; }
.m-reset { padding-bottom: 9px; font: 600 11.5px var(--ui); opacity: .6; white-space: nowrap; }
.dl-m { padding: 9px 0 8px; border: 0; border-radius: 0; background: none; border-bottom: 1px solid rgba(255,255,255,.07); }
.dl-m:last-child { border-bottom: 0; }
.dl-m.ready { border-color: rgba(255,255,255,.07); background: none; box-shadow: inset 3px 0 0 var(--brand); padding-left: 12px; }
.dl-m-top { margin-bottom: 5px; gap: 10px; }
.tier-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.tier-dot.t-easy { background: #57c25f; } .tier-dot.t-medium { background: #ffd166; } .tier-dot.t-hard { background: #ff6f6f; } .tier-dot.t-special { background: #a48bff; }
.dl-m-text { font: 700 14px/1.3 var(--ui); }
.dl-m .dl-bar { height: 5px; background: rgba(255,255,255,.13); }
.dl-m-row { min-height: 0; gap: 12px; }
.dl-val { flex: none; font: 700 11.5px var(--mono); opacity: .7; }
.dl-m .dl-rew { margin: 5px 0 0 18px; font-size: 12px; opacity: .85; white-space: normal; }
@media (min-width: 901px) { .dl-missions { max-height: none; overflow: visible; padding-right: 0; } }
#roomMembers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding: 0 14px; }
#roomMembers .party-member { padding: 3px 0; min-width: 0; gap: 6px; }
#roomMembers .party-member .small-btn { padding: 0 6px; font-size: 11px; line-height: 20px; }
#roomMembers .party-member .tag-guest { display: none; }
.tier-dot.t-expert { background: #ff4d8d; }

/* ---- le logo « M » de l'accueil (a la place de la petite couronne) et le bloc « a propos » lisible par les moteurs de recherche (seo.py) ---- */
.hero-m { display: block; width: 56px; height: 56px; margin: 4px auto 0; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(240, 200, 105, .42)); }
body.is-prime .hero-m { filter: drop-shadow(0 6px 18px rgba(255, 190, 50, .8)); }
#menuHero .hero-m { margin: 0; width: 48px; height: 48px; }
.seo-about { position: relative; z-index: 1; margin: 56px auto 0; max-width: 980px; padding: 34px clamp(18px, 4vw, 44px) 26px; color: rgba(255, 255, 255, .82);
  background: linear-gradient(180deg, rgba(10, 8, 6, .72), rgba(10, 8, 6, .86)); border-top: 1px solid rgba(240, 200, 105, .18); border-radius: 22px 22px 0 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.seo-m { display: block; width: 64px; height: 64px; margin: 0 0 10px; }
.seo-about h2 { font: 800 clamp(20px, 2.4vw, 27px)/1.25 var(--ui); margin: 0 0 12px; color: #fff; }
.seo-about h3 { font: 800 13px var(--ui); letter-spacing: 1.6px; text-transform: uppercase; color: var(--brand); margin: 26px 0 10px; }
.seo-about p { font-size: 14.5px; line-height: 1.7; margin: 0 0 10px; }
.seo-about ul { margin: 0; padding-left: 20px; }
.seo-about li { font-size: 14.5px; line-height: 1.65; margin-bottom: 5px; }
.seo-faq details { border-bottom: 1px solid rgba(255, 255, 255, .09); }
.seo-faq summary { cursor: pointer; padding: 12px 2px; font: 700 14.5px/1.4 var(--ui); color: #fff; }
.seo-faq summary:hover { color: var(--brand2); }
.seo-faq details p { padding: 0 2px 12px; opacity: .85; }
.seo-lang { margin-top: 24px; font: 700 13px var(--ui); }
.seo-lang a, .seo-copy a { color: var(--brand); text-decoration: none; }
.seo-lang a:hover, .seo-copy a:hover { text-decoration: underline; }
.seo-lang a[aria-current="page"] { color: #fff; }
.seo-copy { margin: 18px 0 0; font-size: 12.5px !important; opacity: .6; }

/* ---- la carte du groupe : posee en bas du panneau gauche (creer / rejoindre restent au milieu), reduite en une ligne d'un clic ---- */
#partyCard { position: relative; margin: 0; border-radius: 16px; text-align: left; overflow: hidden; background: rgba(10, 8, 6, .68); border: 1px solid rgba(240, 200, 105, .32);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#partyCard.hidden { display: none; }
.party-fold { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; cursor: pointer; text-align: left; color: inherit; background: none; border: 0; font-family: var(--ui); }
.party-fold:hover { background: rgba(240, 200, 105, .07); }
.party-fold:focus-visible { outline: 2px solid var(--brand2); outline-offset: -2px; border-radius: 16px; }
.party-ico { font-size: 16px; line-height: 1; }
.party-fold .party-code { flex: 1 1 auto; font-size: 20px; letter-spacing: 4px; }
.party-count { flex: none; padding: 2px 8px; border-radius: 99px; font: 800 11.5px var(--mono); background: rgba(240, 200, 105, .16); color: var(--brand); }
.party-chev { flex: none; font-style: normal; font-size: 20px; line-height: 1; opacity: .7; transition: transform .35s var(--ease); }
#partyCard.folded .party-chev { transform: rotate(180deg); }
#partyBody { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s var(--ease), visibility 0s linear 0s; }
#partyCard.folded #partyBody { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .32s var(--ease), visibility 0s linear .32s; }
#partyBody .pb-in { min-height: 0; overflow: hidden; }
#partyBody #partyMembers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding: 0 14px; }
#partyBody .party-actions { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; padding: 4px 14px 14px; margin-top: 4px; }
#partyBody .party-actions .small-btn { padding: 6px 11px; font-size: 12px; white-space: nowrap; }
#partyBody .party-actions #partyLeaveBtn { margin-left: auto; }
#partyBody .party-member { padding: 3px 0; min-width: 0; gap: 6px; }
#partyBody .party-member .small-btn { padding: 0 6px; font-size: 11px; line-height: 20px; }
#partyBody .party-member .tag-guest, #partyBody .party-member .friend-st { display: none; }
.party-member canvas.op-mini { width: 26px; height: 26px; flex: none; }
.party-member .friend-name { font-family: var(--ui); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { #partyBody, #partyCard.folded #partyBody, .party-chev { transition: none; } }