/* ═══════════════ L'ENTRÉE DU JEU (#hub) : le menu à 4 onglets, le choix du format, le lobby, « Tous les rangs » ═══════════
   Max, 02/10 : un parcours clair comme celui de Brawlhalla, le même sur ordinateur et au téléphone (« la version tel est
   mieux que la version PC, ça devrait se valoir »), et poussé au maximum (« mettre des trucs dans le fond, stylé, travailler
   tout, tout »). La patte de BallDash : gros traits d'encre, ombres décalées sans flou, titres en capitales italiques, l'or
   pour l'action principale (« Prêt », « Jouer »). Les versions et ce qui a changé : conception-ranked/lobby/VERSIONS.md.
   Deux mises en page, et les mêmes mots :
     • LARGE (ordinateur, de 1 366 × 768 à 2 560 × 1 440) : tout est mesuré en --u, qui vaut 10 px à 1 920 × 1 080 et suit
       la plus petite des deux dimensions (pas de zoom sur la page : de vraies tailles, recalculées) ;
     • COMPACTE (téléphone en paysage, et toute fenêtre de 520 px de haut ou moins) : des tailles en pixels, des cibles de
       44 px, aucun texte sous 12 px, les encoches respectées (--sa-*).
   La file se voit sans lire : vert pour Standard, rouge et or pour Ranked, violet pour la battle royale, bleu pour les
   parties perso (data-file sur #hub). Au lobby Ranked, tout l'écran prend l'AMBIANCE DE TON RANG (data-rk : ses couleurs
   --t1 vive, --t2 profonde, --t3 claire, et son décor). Ce fichier vient en dernier : il l'emporte sur les styles d'avant. */

:root {
  /* (les marges des encoches ; les captures les simulent en les fixant sur <html>) */
  --sa-l: env(safe-area-inset-left, 0px); --sa-r: env(safe-area-inset-right, 0px);
  --sa-t: env(safe-area-inset-top, 0px); --sa-b: env(safe-area-inset-bottom, 0px);
}
/* L'AMBIANCE DE CHAQUE RANG (les couleurs de son emblème) : --t1 la couleur vive (le nom, la barre, l'éclaboussure), --t2 la
   profonde (le fond, la bannière), --t3 la claire (les reflets, les petits textes) */
.bd-hub, [data-rk] { --t1: #FFD23F; --t2: #241A55; --t3: #FFF1A6; }
[data-rk="place"] { --t1: #AEB9CE; --t2: #1C2036; --t3: #E3EAF6; }
[data-rk="bronze"] { --t1: #E8955A; --t2: #3A1A0A; --t3: #FFCF9E; }
[data-rk="silver"] { --t1: #D3DCE8; --t2: #222A3A; --t3: #FFFFFF; }
[data-rk="gold"] { --t1: #FFD23F; --t2: #45290A; --t3: #FFF1A6; }
[data-rk="platinum"] { --t1: #5FD0FF; --t2: #0A2748; --t3: #D2F4FF; }
[data-rk="diamond"] { --t1: #B07DFF; --t2: #1E0D46; --t3: #E8DAFF; }
[data-rk="elite"] { --t1: #FF3B30; --t2: #210303; --t3: #FFA149; }
[data-rk="top"] { --t1: #FF2E93; --t2: #06030D; --t3: #45ECFF; }

.bd-hub {
  --u: clamp(6px, min(0.521vw, 0.926vh), 15px);
  --out: 2px 2px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 0 2px 0 var(--ink);
  --out3: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 3px 0 var(--ink), 3px 0 0 var(--ink);
  --c-std: #1FB873; --c-std-d: #0E6B47;
  --c-rk: #E5484D; --c-rk-d: #8E1B2B;
  --c-br: #8E44E8; --c-br-d: #4B1F8A;
  --c-pp: #2D8CFF; --c-pp-d: #15479A;
  --fc-c: var(--c-std); --fc-d: var(--c-std-d);
  position: relative; z-index: 1; box-sizing: border-box; min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: auto auto 1fr; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2.4 + var(--sa-t)) calc(var(--u) * 3.2 + var(--sa-r)) calc(var(--u) * 2.8 + var(--sa-b)) calc(var(--u) * 3.2 + var(--sa-l));
  color: #fff; overflow: hidden; overflow: clip;   /* (clip : le champ du chat qui prend le focus ne fait jamais défiler l'écran) */
  background:
    radial-gradient(ellipse 70% 60% at 64% 46%, color-mix(in srgb, var(--fc-c) 30%, transparent), transparent 72%),
    radial-gradient(ellipse 120% 90% at 50% 120%, rgba(0, 0, 0, 0.45), transparent 60%),
    linear-gradient(160deg, #2E2368, #17123F 58%, #0D0A25);
}
.bd-hub[data-file="rk"] { --fc-c: var(--c-rk); --fc-d: var(--c-rk-d); }
.bd-hub[data-file="br"] { --fc-c: var(--c-br); --fc-d: var(--c-br-d); }
.bd-hub[data-file="pp"] { --fc-c: var(--c-pp); --fc-d: var(--c-pp-d); }
/* au lobby, tout l'écran prend la couleur de sa file ; en Ranked, celle de ton rang */
.bd-hub[data-view="lobby"] {
  background:
    radial-gradient(ellipse 60% 70% at 40% 46%, color-mix(in srgb, var(--fc-c) 62%, transparent), transparent 74%),
    radial-gradient(ellipse 120% 80% at 50% 115%, rgba(0, 0, 0, 0.4), transparent 60%),
    linear-gradient(160deg, var(--fc-d), color-mix(in srgb, var(--fc-d) 50%, #0B0820));
}
.bd-hub[data-view="lobby"][data-rk] {
  background:
    radial-gradient(ellipse 46% 60% at 64% 44%, color-mix(in srgb, var(--t1) 40%, transparent), transparent 72%),
    radial-gradient(ellipse 50% 60% at 24% 50%, color-mix(in srgb, var(--t1) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 118%, rgba(0, 0, 0, 0.6), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--t2) 80%, #3A3270), var(--t2) 46%, color-mix(in srgb, var(--t2) 55%, #000));
}
.bd-hub .grow { flex: 1; min-width: 0; }
.bd-hub[data-view="menu"] .hub-lobby, .bd-hub[data-view="lobby"] .hub-menu { display: none; }
.hub-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ─── LE FOND VIVANT : de grands rayons qui tournent lentement, des poussières qui montent, et le décor de la file ou du
   rang (paillettes d'or, éclats, braises, glitch). Tout bouge par transform (le GPU) : rien ne se repeint. ─── */
.hub-deco { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.hub-deco i { position: absolute; display: block; }
.hd-rays { left: 62%; top: 46%; width: max(190vw, 190vh); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--fc-c) 30%, rgba(255, 255, 255, 0.05)) 0 4.5deg, transparent 4.5deg 12deg);
  -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 0.9) 0, rgba(0, 0, 0, 0.45) 14%, transparent 34%); mask: radial-gradient(circle, rgba(0, 0, 0, 0.9) 0, rgba(0, 0, 0, 0.45) 14%, transparent 34%);
  opacity: 0.5; animation: hdSpin 200s linear infinite; }
.bd-hub[data-view="lobby"] .hd-rays { left: 40%; }
.bd-hub[data-view="lobby"][data-rk] .hd-rays { left: 64%; top: 44%; opacity: 0.75; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--t1) 34%, transparent) 0 4.5deg, transparent 4.5deg 12deg); }
@keyframes hdSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* (les poussières : des points de tailles et d'éclats différents, posés au hasard dans une grande tuile de 720 px — l'œil
   n'y voit pas de grille ; un masque : leur couleur vient de la file ou du rang) */
.hd-dust { left: 0; right: 0; top: 0; height: calc(100% + 720px); background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='0' cy='322' r='2.0' fill-opacity='0.59'/%3E%3Ccircle cx='224' cy='33' r='0.7' fill-opacity='0.72'/%3E%3Ccircle cx='620' cy='294' r='1.0' fill-opacity='0.48'/%3E%3Ccircle cx='373' cy='337' r='1.2' fill-opacity='0.95'/%3E%3Ccircle cx='340' cy='203' r='1.0' fill-opacity='0.46'/%3E%3Ccircle cx='157' cy='514' r='2.3' fill-opacity='0.89'/%3E%3Ccircle cx='101' cy='274' r='1.8' fill-opacity='0.51'/%3E%3Ccircle cx='423' cy='595' r='0.8' fill-opacity='0.50'/%3E%3Ccircle cx='276' cy='61' r='0.9' fill-opacity='0.95'/%3E%3Ccircle cx='426' cy='399' r='1.7' fill-opacity='0.72'/%3E%3Ccircle cx='222' cy='573' r='1.0' fill-opacity='0.68'/%3E%3Ccircle cx='8' cy='139' r='1.1' fill-opacity='0.83'/%3E%3Ccircle cx='415' cy='513' r='0.7' fill-opacity='0.86'/%3E%3Ccircle cx='10' cy='277' r='2.0' fill-opacity='0.36'/%3E%3Ccircle cx='639' cy='376' r='2.0' fill-opacity='0.67'/%3E%3Ccircle cx='70' cy='440' r='1.5' fill-opacity='0.36'/%3E%3Ccircle cx='690' cy='231' r='2.3' fill-opacity='0.98'/%3E%3Ccircle cx='649' cy='13' r='2.5' fill-opacity='0.51'/%3E%3Ccircle cx='517' cy='582' r='0.7' fill-opacity='0.59'/%3E%3Ccircle cx='120' cy='576' r='1.1' fill-opacity='1.00'/%3E%3Ccircle cx='683' cy='527' r='1.9' fill-opacity='0.66'/%3E%3Ccircle cx='720' cy='576' r='0.8' fill-opacity='0.72'/%3E%3Ccircle cx='443' cy='17' r='1.5' fill-opacity='1.00'/%3E%3Ccircle cx='685' cy='599' r='0.9' fill-opacity='0.41'/%3E%3Ccircle cx='253' cy='629' r='1.1' fill-opacity='0.97'/%3E%3Ccircle cx='1' cy='480' r='2.2' fill-opacity='0.40'/%3E%3Ccircle cx='685' cy='396' r='1.4' fill-opacity='0.82'/%3E%3Ccircle cx='489' cy='367' r='2.3' fill-opacity='0.67'/%3E%3Ccircle cx='306' cy='584' r='0.9' fill-opacity='0.47'/%3E%3Ccircle cx='366' cy='162' r='2.6' fill-opacity='0.78'/%3E%3Ccircle cx='34' cy='37' r='0.7' fill-opacity='0.71'/%3E%3Ccircle cx='596' cy='78' r='0.9' fill-opacity='0.77'/%3E%3Ccircle cx='253' cy='397' r='2.3' fill-opacity='0.37'/%3E%3Ccircle cx='271' cy='340' r='1.3' fill-opacity='0.92'/%3E%3Ccircle cx='126' cy='413' r='2.1' fill-opacity='0.85'/%3E%3Ccircle cx='397' cy='666' r='0.7' fill-opacity='0.49'/%3E%3Ccircle cx='71' cy='705' r='1.9' fill-opacity='0.85'/%3E%3Ccircle cx='407' cy='266' r='0.7' fill-opacity='0.82'/%3E%3Ccircle cx='620' cy='465' r='2.3' fill-opacity='0.60'/%3E%3Ccircle cx='655' cy='106' r='0.9' fill-opacity='0.68'/%3E%3Ccircle cx='115' cy='692' r='0.8' fill-opacity='0.40'/%3E%3Ccircle cx='497' cy='208' r='1.3' fill-opacity='0.86'/%3E%3Ccircle cx='595' cy='262' r='2.9' fill-opacity='0.70'/%3E%3Ccircle cx='72' cy='575' r='2.8' fill-opacity='0.92'/%3E%3Ccircle cx='629' cy='189' r='1.0' fill-opacity='0.94'/%3E%3Ccircle cx='545' cy='245' r='1.1' fill-opacity='0.78'/%3E%3Ccircle cx='1' cy='15' r='1.7' fill-opacity='0.89'/%3E%3Ccircle cx='24' cy='401' r='0.7' fill-opacity='0.92'/%3E%3Ccircle cx='228' cy='460' r='0.7' fill-opacity='0.56'/%3E%3Ccircle cx='545' cy='124' r='3.0' fill-opacity='0.80'/%3E%3Ccircle cx='176' cy='191' r='2.7' fill-opacity='0.86'/%3E%3Ccircle cx='358' cy='448' r='0.7' fill-opacity='0.36'/%3E%3Ccircle cx='588' cy='357' r='1.2' fill-opacity='0.35'/%3E%3Ccircle cx='403' cy='154' r='1.2' fill-opacity='0.74'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 720px 720px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='0' cy='322' r='2.0' fill-opacity='0.59'/%3E%3Ccircle cx='224' cy='33' r='0.7' fill-opacity='0.72'/%3E%3Ccircle cx='620' cy='294' r='1.0' fill-opacity='0.48'/%3E%3Ccircle cx='373' cy='337' r='1.2' fill-opacity='0.95'/%3E%3Ccircle cx='340' cy='203' r='1.0' fill-opacity='0.46'/%3E%3Ccircle cx='157' cy='514' r='2.3' fill-opacity='0.89'/%3E%3Ccircle cx='101' cy='274' r='1.8' fill-opacity='0.51'/%3E%3Ccircle cx='423' cy='595' r='0.8' fill-opacity='0.50'/%3E%3Ccircle cx='276' cy='61' r='0.9' fill-opacity='0.95'/%3E%3Ccircle cx='426' cy='399' r='1.7' fill-opacity='0.72'/%3E%3Ccircle cx='222' cy='573' r='1.0' fill-opacity='0.68'/%3E%3Ccircle cx='8' cy='139' r='1.1' fill-opacity='0.83'/%3E%3Ccircle cx='415' cy='513' r='0.7' fill-opacity='0.86'/%3E%3Ccircle cx='10' cy='277' r='2.0' fill-opacity='0.36'/%3E%3Ccircle cx='639' cy='376' r='2.0' fill-opacity='0.67'/%3E%3Ccircle cx='70' cy='440' r='1.5' fill-opacity='0.36'/%3E%3Ccircle cx='690' cy='231' r='2.3' fill-opacity='0.98'/%3E%3Ccircle cx='649' cy='13' r='2.5' fill-opacity='0.51'/%3E%3Ccircle cx='517' cy='582' r='0.7' fill-opacity='0.59'/%3E%3Ccircle cx='120' cy='576' r='1.1' fill-opacity='1.00'/%3E%3Ccircle cx='683' cy='527' r='1.9' fill-opacity='0.66'/%3E%3Ccircle cx='720' cy='576' r='0.8' fill-opacity='0.72'/%3E%3Ccircle cx='443' cy='17' r='1.5' fill-opacity='1.00'/%3E%3Ccircle cx='685' cy='599' r='0.9' fill-opacity='0.41'/%3E%3Ccircle cx='253' cy='629' r='1.1' fill-opacity='0.97'/%3E%3Ccircle cx='1' cy='480' r='2.2' fill-opacity='0.40'/%3E%3Ccircle cx='685' cy='396' r='1.4' fill-opacity='0.82'/%3E%3Ccircle cx='489' cy='367' r='2.3' fill-opacity='0.67'/%3E%3Ccircle cx='306' cy='584' r='0.9' fill-opacity='0.47'/%3E%3Ccircle cx='366' cy='162' r='2.6' fill-opacity='0.78'/%3E%3Ccircle cx='34' cy='37' r='0.7' fill-opacity='0.71'/%3E%3Ccircle cx='596' cy='78' r='0.9' fill-opacity='0.77'/%3E%3Ccircle cx='253' cy='397' r='2.3' fill-opacity='0.37'/%3E%3Ccircle cx='271' cy='340' r='1.3' fill-opacity='0.92'/%3E%3Ccircle cx='126' cy='413' r='2.1' fill-opacity='0.85'/%3E%3Ccircle cx='397' cy='666' r='0.7' fill-opacity='0.49'/%3E%3Ccircle cx='71' cy='705' r='1.9' fill-opacity='0.85'/%3E%3Ccircle cx='407' cy='266' r='0.7' fill-opacity='0.82'/%3E%3Ccircle cx='620' cy='465' r='2.3' fill-opacity='0.60'/%3E%3Ccircle cx='655' cy='106' r='0.9' fill-opacity='0.68'/%3E%3Ccircle cx='115' cy='692' r='0.8' fill-opacity='0.40'/%3E%3Ccircle cx='497' cy='208' r='1.3' fill-opacity='0.86'/%3E%3Ccircle cx='595' cy='262' r='2.9' fill-opacity='0.70'/%3E%3Ccircle cx='72' cy='575' r='2.8' fill-opacity='0.92'/%3E%3Ccircle cx='629' cy='189' r='1.0' fill-opacity='0.94'/%3E%3Ccircle cx='545' cy='245' r='1.1' fill-opacity='0.78'/%3E%3Ccircle cx='1' cy='15' r='1.7' fill-opacity='0.89'/%3E%3Ccircle cx='24' cy='401' r='0.7' fill-opacity='0.92'/%3E%3Ccircle cx='228' cy='460' r='0.7' fill-opacity='0.56'/%3E%3Ccircle cx='545' cy='124' r='3.0' fill-opacity='0.80'/%3E%3Ccircle cx='176' cy='191' r='2.7' fill-opacity='0.86'/%3E%3Ccircle cx='358' cy='448' r='0.7' fill-opacity='0.36'/%3E%3Ccircle cx='588' cy='357' r='1.2' fill-opacity='0.35'/%3E%3Ccircle cx='403' cy='154' r='1.2' fill-opacity='0.74'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 720px 720px repeat; opacity: 0.5; animation: hdRise 90s linear infinite; }
@keyframes hdRise { to { transform: translateY(-720px); } }
.hd-fx { inset: 0; display: none !important; }
/* (une vignette : le centre éclairé, les bords dans l'ombre) */
.hub-deco::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 55% 50%, transparent 55%, rgba(5, 3, 15, 0.5)); }
/* le décor de chaque rang, au lobby Ranked : les poussières prennent ses couleurs */
.bd-hub[data-rk] .hd-dust { background: linear-gradient(to bottom, var(--t3), var(--t1)); opacity: 0.6; }
/* (Hellborn : des braises qui montent vite en ondulant — un cœur clair, une lueur orange qui s'éteint, de deux tailles pour
   la profondeur —, et la lueur du feu en bas) */
.bd-hub[data-rk="elite"] .hd-fx { display: block !important; inset: 0 0 auto; height: calc(100% + 900px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='900'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFC24A'/%3E%3Cstop offset='.35' stop-color='%23FF6A1F' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FF2A10' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='translate(0 733) rotate(-4) scale(0.57)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(584 271) rotate(3) scale(0.55)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(288 315) rotate(11) scale(0.87)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(233 618) rotate(-6) scale(0.62)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(448 95) rotate(-11) scale(0.76)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(78 57) rotate(6) scale(1.62)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(297 201) rotate(9) scale(1.26)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(76 845) rotate(9) scale(0.62)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(345 253) rotate(1) scale(0.60)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(427 867) rotate(-2) scale(1.56)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(41 301) rotate(-11) scale(1.34)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(256 93) rotate(2) scale(1.01)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(391 339) rotate(-8) scale(0.74)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(222 467) rotate(2) scale(0.87)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(222 842) rotate(11) scale(0.69)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(474 535) rotate(-1) scale(0.91)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(105 445) rotate(5) scale(1.18)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(572 97) rotate(8) scale(0.57)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(581 590) rotate(-2) scale(0.59)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(146 769) rotate(-8) scale(1.08)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(573 875) rotate(7) scale(1.21)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(268 746) rotate(11) scale(1.09)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(150 568) rotate(-12) scale(0.57)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(333 126) rotate(2) scale(1.29)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(23 451) rotate(11) scale(0.63)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(185 407) rotate(-7) scale(0.67)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 640px 900px repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='900'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFC24A'/%3E%3Cstop offset='.35' stop-color='%23FF6A1F' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FF2A10' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg transform='translate(0 733) rotate(-4) scale(0.57)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(584 271) rotate(3) scale(0.55)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(288 315) rotate(11) scale(0.87)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(233 618) rotate(-6) scale(0.62)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(448 95) rotate(-11) scale(0.76)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(78 57) rotate(6) scale(1.62)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(297 201) rotate(9) scale(1.26)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(76 845) rotate(9) scale(0.62)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(345 253) rotate(1) scale(0.60)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(427 867) rotate(-2) scale(1.56)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(41 301) rotate(-11) scale(1.34)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(256 93) rotate(2) scale(1.01)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(391 339) rotate(-8) scale(0.74)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(222 467) rotate(2) scale(0.87)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(222 842) rotate(11) scale(0.69)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(474 535) rotate(-1) scale(0.91)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(105 445) rotate(5) scale(1.18)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(572 97) rotate(8) scale(0.57)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(581 590) rotate(-2) scale(0.59)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(146 769) rotate(-8) scale(1.08)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(573 875) rotate(7) scale(1.21)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(268 746) rotate(11) scale(1.09)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(150 568) rotate(-12) scale(0.57)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(333 126) rotate(2) scale(1.29)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(23 451) rotate(11) scale(0.63)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3Cg transform='translate(185 407) rotate(-7) scale(0.67)'%3E%3Cellipse rx='9' ry='15' fill='url(%23g)'/%3E%3Cellipse rx='2.2' ry='4.4' fill='%23FFF1C2'/%3E%3C/g%3E%3C/svg%3E") 210px 330px / 320px 450px repeat; animation: hdRise2 9s linear infinite; }
@keyframes hdRise2 { 0% { transform: translate(0, 0); } 25% { transform: translate(10px, -225px); } 50% { transform: translate(0, -450px); } 75% { transform: translate(-10px, -675px); } 100% { transform: translate(0, -900px); } }
.bd-hub[data-rk="elite"] .hub-deco::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255, 70, 20, 0.42), transparent 70%); animation: hdFire 2.4s ease-in-out infinite alternate; }
@keyframes hdFire { from { opacity: 0.7; } to { opacity: 1; } }
/* (Gold : des paillettes d'or qui montent doucement et scintillent — deux nappes qui s'allument chacune à son tour) */
.bd-hub[data-rk="gold"] .hd-fx { display: block !important; inset: 0 0 auto; height: calc(100% + 760px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cg fill='%23FFE27A' stroke='%237A4A00' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath transform='translate(0 299)' d='M0 -10.8Q2.4 -2.4 10.8 0Q2.4 2.4 0 10.8Q-2.4 2.4 -10.8 0Q-2.4 -2.4 0 -10.8Z'/%3E%3Cpath transform='translate(745 612)' d='M0 -6.2Q1.4 -1.4 6.2 0Q1.4 1.4 0 6.2Q-1.4 1.4 -6.2 0Q-1.4 -1.4 0 -6.2Z'/%3E%3Cpath transform='translate(641 743)' d='M0 -10.1Q2.2 -2.2 10.1 0Q2.2 2.2 0 10.1Q-2.2 2.2 -10.1 0Q-2.2 -2.2 0 -10.1Z'/%3E%3Cpath transform='translate(647 245)' d='M0 -13Q2.9 -2.9 13.0 0Q2.9 2.9 0 13.0Q-2.9 2.9 -13 0Q-2.9 -2.9 0 -13Z'/%3E%3Cpath transform='translate(146 545)' d='M0 -5.9Q1.3 -1.3 5.9 0Q1.3 1.3 0 5.9Q-1.3 1.3 -5.9 0Q-1.3 -1.3 0 -5.9Z'/%3E%3Cpath transform='translate(393 240)' d='M0 -12Q2.6 -2.6 12.0 0Q2.6 2.6 0 12.0Q-2.6 2.6 -12 0Q-2.6 -2.6 0 -12Z'/%3E%3Cpath transform='translate(547 563)' d='M0 -15.6Q3.4 -3.4 15.6 0Q3.4 3.4 0 15.6Q-3.4 3.4 -15.6 0Q-3.4 -3.4 0 -15.6Z'/%3E%3Cpath transform='translate(89 120)' d='M0 -8.1Q1.8 -1.8 8.1 0Q1.8 1.8 0 8.1Q-1.8 1.8 -8.1 0Q-1.8 -1.8 0 -8.1Z'/%3E%3Cpath transform='translate(246 190)' d='M0 -9.6Q2.1 -2.1 9.6 0Q2.1 2.1 0 9.6Q-2.1 2.1 -9.6 0Q-2.1 -2.1 0 -9.6Z'/%3E%3Cpath transform='translate(136 348)' d='M0 -9.6Q2.1 -2.1 9.6 0Q2.1 2.1 0 9.6Q-2.1 2.1 -9.6 0Q-2.1 -2.1 0 -9.6Z'/%3E%3Cpath transform='translate(481 744)' d='M0 -7.7Q1.7 -1.7 7.7 0Q1.7 1.7 0 7.7Q-1.7 1.7 -7.7 0Q-1.7 -1.7 0 -7.7Z'/%3E%3Cpath transform='translate(138 679)' d='M0 -5.1Q1.1 -1.1 5.1 0Q1.1 1.1 0 5.1Q-1.1 1.1 -5.1 0Q-1.1 -1.1 0 -5.1Z'/%3E%3Cpath transform='translate(324 446)' d='M0 -6.3Q1.4 -1.4 6.3 0Q1.4 1.4 0 6.3Q-1.4 1.4 -6.3 0Q-1.4 -1.4 0 -6.3Z'/%3E%3Cpath transform='translate(402 570)' d='M0 -11.2Q2.5 -2.5 11.2 0Q2.5 2.5 0 11.2Q-2.5 2.5 -11.2 0Q-2.5 -2.5 0 -11.2Z'/%3E%3Cpath transform='translate(715 106)' d='M0 -14.3Q3.2 -3.2 14.3 0Q3.2 3.2 0 14.3Q-3.2 3.2 -14.3 0Q-3.2 -3.2 0 -14.3Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 760px 760px repeat; animation: hdRise3 70s linear infinite, hdTw 2.6s ease-in-out infinite alternate; }
.bd-hub[data-rk="gold"] .hub-deco::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cg fill='%23FFE27A' stroke='%237A4A00' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath transform='translate(1 577)' d='M0 -5.3Q1.2 -1.2 5.3 0Q1.2 1.2 0 5.3Q-1.2 1.2 -5.3 0Q-1.2 -1.2 0 -5.3Z'/%3E%3Cpath transform='translate(223 372)' d='M0 -15.1Q3.3 -3.3 15.1 0Q3.3 3.3 0 15.1Q-3.3 3.3 -15.1 0Q-3.3 -3.3 0 -15.1Z'/%3E%3Cpath transform='translate(516 182)' d='M0 -11.5Q2.5 -2.5 11.5 0Q2.5 2.5 0 11.5Q-2.5 2.5 -11.5 0Q-2.5 -2.5 0 -11.5Z'/%3E%3Cpath transform='translate(428 646)' d='M0 -14.6Q3.2 -3.2 14.6 0Q3.2 3.2 0 14.6Q-3.2 3.2 -14.6 0Q-3.2 -3.2 0 -14.6Z'/%3E%3Cpath transform='translate(377 469)' d='M0 -13.1Q2.9 -2.9 13.1 0Q2.9 2.9 0 13.1Q-2.9 2.9 -13.1 0Q-2.9 -2.9 0 -13.1Z'/%3E%3Cpath transform='translate(99 192)' d='M0 -12.9Q2.8 -2.8 12.9 0Q2.8 2.8 0 12.9Q-2.8 2.8 -12.9 0Q-2.8 -2.8 0 -12.9Z'/%3E%3Cpath transform='translate(700 327)' d='M0 -14.9Q3.3 -3.3 14.9 0Q3.3 3.3 0 14.9Q-3.3 3.3 -14.9 0Q-3.3 -3.3 0 -14.9Z'/%3E%3Cpath transform='translate(267 12)' d='M0 -5.7Q1.2 -1.2 5.7 0Q1.2 1.2 0 5.7Q-1.2 1.2 -5.7 0Q-1.2 -1.2 0 -5.7Z'/%3E%3Cpath transform='translate(304 637)' d='M0 -9.7Q2.1 -2.1 9.7 0Q2.1 2.1 0 9.7Q-2.1 2.1 -9.7 0Q-2.1 -2.1 0 -9.7Z'/%3E%3Cpath transform='translate(99 333)' d='M0 -6.5Q1.4 -1.4 6.5 0Q1.4 1.4 0 6.5Q-1.4 1.4 -6.5 0Q-1.4 -1.4 0 -6.5Z'/%3E%3Cpath transform='translate(75 57)' d='M0 -14Q3.1 -3.1 14.0 0Q3.1 3.1 0 14.0Q-3.1 3.1 -14 0Q-3.1 -3.1 0 -14Z'/%3E%3Cpath transform='translate(344 252)' d='M0 -10.6Q2.3 -2.3 10.6 0Q2.3 2.3 0 10.6Q-2.3 2.3 -10.6 0Q-2.3 -2.3 0 -10.6Z'/%3E%3Cpath transform='translate(645 115)' d='M0 -7.6Q1.7 -1.7 7.6 0Q1.7 1.7 0 7.6Q-1.7 1.7 -7.6 0Q-1.7 -1.7 0 -7.6Z'/%3E%3Cpath transform='translate(147 665)' d='M0 -5.1Q1.1 -1.1 5.1 0Q1.1 1.1 0 5.1Q-1.1 1.1 -5.1 0Q-1.1 -1.1 0 -5.1Z'/%3E%3Cpath transform='translate(571 713)' d='M0 -6.6Q1.4 -1.4 6.6 0Q1.4 1.4 0 6.6Q-1.4 1.4 -6.6 0Q-1.4 -1.4 0 -6.6Z'/%3E%3C/g%3E%3C/svg%3E") 130px 70px / 760px 760px repeat; animation: hdTw 2.6s ease-in-out infinite alternate-reverse; }
@keyframes hdRise3 { to { transform: translateY(-760px); } }
@keyframes hdTw { from { opacity: 0.2; } to { opacity: 1; } }
/* (Platinum : du givre — des cristaux à six branches qui tombent lentement et scintillent, une lueur glacée en haut) */
.bd-hub[data-rk="platinum"] .hd-fx { display: block !important; inset: -700px 0 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%230A2748' stroke-width='4.2'%3E%3Cpath transform='translate(0 680)' d='M0 0L4.4 5.3M2.4 2.9l-0.1 2.2M2.4 2.9l2.2 0.3M0 0L-2.4 6.5M-1.3 3.6l-2.0 1.0M-1.3 3.6l0.9 2.0M0 0L-6.8 1.2M-3.7 0.6l-1.8 -1.2M-3.7 0.6l-1.3 1.8M0 0L-4.4 -5.3M-2.4 -2.9l0.1 -2.2M-2.4 -2.9l-2.2 -0.3M0 0L2.4 -6.5M1.3 -3.6l2.0 -1.0M1.3 -3.6l-0.9 -2.0M0 0L6.8 -1.2M3.7 -0.6l1.8 1.2M3.7 -0.6l1.3 -1.8'/%3E%3Cpath transform='translate(33 216)' d='M0 0L9.8 7.1M5.4 3.9l0.7 3.8M5.4 3.9l3.8 -0.5M0 0L-1.3 12.0M-0.7 6.6l-2.9 2.5M-0.7 6.6l2.3 3.1M0 0L-11.0 4.9M-6.1 2.7l-3.6 -1.3M-6.1 2.7l-1.5 3.5M0 0L-9.8 -7.1M-5.4 -3.9l-0.7 -3.8M-5.4 -3.9l-3.8 0.5M0 0L1.3 -12.0M0.7 -6.6l2.9 -2.5M0.7 -6.6l-2.3 -3.1M0 0L11.0 -4.9M6.1 -2.7l3.6 1.3M6.1 -2.7l1.5 -3.5'/%3E%3Cpath transform='translate(166 423)' d='M0 0L6.5 0.1M3.6 0.1l1.5 1.4M3.6 0.1l1.5 -1.4M0 0L3.1 5.7M1.7 3.1l-0.5 2.0M1.7 3.1l2.0 0.6M0 0L-3.3 5.5M-1.8 3.1l-2.0 0.6M-1.8 3.1l0.4 2.0M0 0L-6.5 -0.1M-3.6 -0.1l-1.5 -1.4M-3.6 -0.1l-1.5 1.4M0 0L-3.1 -5.7M-1.7 -3.1l0.5 -2.0M-1.7 -3.1l-2.0 -0.6M0 0L3.3 -5.5M1.8 -3.1l2.0 -0.6M1.8 -3.1l-0.4 -2.0'/%3E%3Cpath transform='translate(345 686)' d='M0 0L5.5 6.1M3.0 3.3l-0.0 2.6M3.0 3.3l2.6 0.2M0 0L-2.5 7.8M-1.4 4.3l-2.3 1.3M-1.4 4.3l1.1 2.4M0 0L-8.0 1.7M-4.4 0.9l-2.2 -1.3M-4.4 0.9l-1.5 2.1M0 0L-5.5 -6.1M-3.0 -3.3l0.0 -2.6M-3.0 -3.3l-2.6 -0.2M0 0L2.5 -7.8M1.4 -4.3l2.3 -1.3M1.4 -4.3l-1.1 -2.4M0 0L8.0 -1.7M4.4 -0.9l2.2 1.3M4.4 -0.9l1.5 -2.1'/%3E%3Cpath transform='translate(2 377)' d='M0 0L5.4 2.8M3.0 1.5l0.7 1.8M3.0 1.5l1.9 -0.5M0 0L0.3 6.1M0.2 3.3l-1.3 1.5M0.2 3.3l1.4 1.4M0 0L-5.1 3.3M-2.8 1.8l-1.9 -0.3M-2.8 1.8l-0.5 1.9M0 0L-5.4 -2.8M-3.0 -1.5l-0.7 -1.8M-3.0 -1.5l-1.9 0.5M0 0L-0.3 -6.1M-0.2 -3.3l1.3 -1.5M-0.2 -3.3l-1.4 -1.4M0 0L5.1 -3.3M2.8 -1.8l1.9 0.3M2.8 -1.8l0.5 -1.9'/%3E%3Cpath transform='translate(583 52)' d='M0 0L5.3 1.7M2.9 0.9l0.9 1.6M2.9 0.9l1.6 -0.8M0 0L1.2 5.5M0.6 3.0l-0.9 1.5M0.6 3.0l1.5 1.0M0 0L-4.2 3.8M-2.3 2.1l-1.8 -0.0M-2.3 2.1l-0.2 1.8M0 0L-5.3 -1.7M-2.9 -0.9l-0.9 -1.6M-2.9 -0.9l-1.6 0.8M0 0L-1.2 -5.5M-0.6 -3.0l0.9 -1.5M-0.6 -3.0l-1.5 -1.0M0 0L4.2 -3.8M2.3 -2.1l1.8 0.0M2.3 -2.1l0.2 -1.8'/%3E%3Cpath transform='translate(400 286)' d='M0 0L6.1 6.1M3.4 3.4l0.1 2.8M3.4 3.4l2.8 0.1M0 0L-2.3 8.4M-1.2 4.6l-2.4 1.5M-1.2 4.6l1.3 2.5M0 0L-8.4 2.2M-4.6 1.2l-2.4 -1.3M-4.6 1.2l-1.5 2.4M0 0L-6.1 -6.1M-3.4 -3.4l-0.1 -2.8M-3.4 -3.4l-2.8 -0.1M0 0L2.3 -8.4M1.2 -4.6l2.4 -1.5M1.2 -4.6l-1.3 -2.5M0 0L8.4 -2.2M4.6 -1.2l2.4 1.3M4.6 -1.2l1.5 -2.4'/%3E%3Cpath transform='translate(173 278)' d='M0 0L6.2 2.9M3.4 1.6l0.8 2.0M3.4 1.6l2.1 -0.7M0 0L0.6 6.8M0.3 3.8l-1.4 1.7M0.3 3.8l1.6 1.5M0 0L-5.6 3.9M-3.1 2.2l-2.2 -0.3M-3.1 2.2l-0.5 2.1M0 0L-6.2 -2.9M-3.4 -1.6l-0.8 -2.0M-3.4 -1.6l-2.1 0.7M0 0L-0.6 -6.8M-0.3 -3.8l1.4 -1.7M-0.3 -3.8l-1.6 -1.5M0 0L5.6 -3.9M3.1 -2.2l2.2 0.3M3.1 -2.2l0.5 -2.1'/%3E%3Cpath transform='translate(211 650)' d='M0 0L7.5 6.2M4.1 3.4l0.4 3.1M4.1 3.4l3.1 -0.2M0 0L-1.6 9.6M-0.9 5.3l-2.5 1.9M-0.9 5.3l1.7 2.6M0 0L-9.1 3.4M-5.0 1.9l-2.9 -1.2M-5.0 1.9l-1.4 2.8M0 0L-7.5 -6.2M-4.1 -3.4l-0.4 -3.1M-4.1 -3.4l-3.1 0.2M0 0L1.6 -9.6M0.9 -5.3l2.5 -1.9M0.9 -5.3l-1.7 -2.6M0 0L9.1 -3.4M5.0 -1.9l2.9 1.2M5.0 -1.9l1.4 -2.8'/%3E%3Cpath transform='translate(550 403)' d='M0 0L7.3 1.6M4.0 0.9l1.3 2.0M4.0 0.9l2.1 -1.2M0 0L2.2 7.1M1.2 3.9l-1.0 2.1M1.2 3.9l2.1 1.2M0 0L-5.0 5.5M-2.8 3.0l-2.4 0.2M-2.8 3.0l0.0 2.4M0 0L-7.3 -1.6M-4.0 -0.9l-1.3 -2.0M-4.0 -0.9l-2.1 1.2M0 0L-2.2 -7.1M-1.2 -3.9l1.0 -2.1M-1.2 -3.9l-2.1 -1.2M0 0L5.0 -5.5M2.8 -3.0l2.4 -0.2M2.8 -3.0l-0.0 -2.4'/%3E%3Cpath transform='translate(663 518)' d='M0 0L4.3 3.3M2.4 1.8l0.3 1.7M2.4 1.8l1.7 -0.2M0 0L-0.7 5.4M-0.4 3.0l-1.3 1.1M-0.4 3.0l1.0 1.4M0 0L-5.0 2.1M-2.8 1.1l-1.6 -0.6M-2.8 1.1l-0.7 1.6M0 0L-4.3 -3.3M-2.4 -1.8l-0.3 -1.7M-2.4 -1.8l-1.7 0.2M0 0L0.7 -5.4M0.4 -3.0l1.3 -1.1M0.4 -3.0l-1.0 -1.4M0 0L5.0 -2.1M2.8 -1.1l1.6 0.6M2.8 -1.1l0.7 -1.6'/%3E%3Cpath transform='translate(204 127)' d='M0 0L7.8 2.3M4.3 1.3l1.3 2.2M4.3 1.3l2.3 -1.2M0 0L1.9 7.9M1.0 4.3l-1.3 2.3M1.0 4.3l2.2 1.4M0 0L-5.9 5.6M-3.2 3.1l-2.6 0.0M-3.2 3.1l-0.2 2.6M0 0L-7.8 -2.3M-4.3 -1.3l-1.3 -2.2M-4.3 -1.3l-2.3 1.2M0 0L-1.9 -7.9M-1.0 -4.3l1.3 -2.3M-1.0 -4.3l-2.2 -1.4M0 0L5.9 -5.6M3.2 -3.1l2.6 -0.0M3.2 -3.1l0.2 -2.6'/%3E%3Cpath transform='translate(423 142)' d='M0 0L7.2 10.2M4.0 5.6l-0.5 4.0M4.0 5.6l3.9 0.8M0 0L-5.2 11.4M-2.9 6.3l-3.7 1.5M-2.9 6.3l1.3 3.8M0 0L-12.5 1.1M-6.9 0.6l-3.2 -2.5M-6.9 0.6l-2.7 3.0M0 0L-7.2 -10.2M-4.0 -5.6l0.5 -4.0M-4.0 -5.6l-3.9 -0.8M0 0L5.2 -11.4M2.9 -6.3l3.7 -1.5M2.9 -6.3l-1.3 -3.8M0 0L12.5 -1.1M6.9 -0.6l3.2 2.5M6.9 -0.6l2.7 -3.0'/%3E%3C/g%3E%3Cg stroke='%23D2F4FF' stroke-width='1.8'%3E%3Cpath transform='translate(0 680)' d='M0 0L4.4 5.3M2.4 2.9l-0.1 2.2M2.4 2.9l2.2 0.3M0 0L-2.4 6.5M-1.3 3.6l-2.0 1.0M-1.3 3.6l0.9 2.0M0 0L-6.8 1.2M-3.7 0.6l-1.8 -1.2M-3.7 0.6l-1.3 1.8M0 0L-4.4 -5.3M-2.4 -2.9l0.1 -2.2M-2.4 -2.9l-2.2 -0.3M0 0L2.4 -6.5M1.3 -3.6l2.0 -1.0M1.3 -3.6l-0.9 -2.0M0 0L6.8 -1.2M3.7 -0.6l1.8 1.2M3.7 -0.6l1.3 -1.8'/%3E%3Cpath transform='translate(33 216)' d='M0 0L9.8 7.1M5.4 3.9l0.7 3.8M5.4 3.9l3.8 -0.5M0 0L-1.3 12.0M-0.7 6.6l-2.9 2.5M-0.7 6.6l2.3 3.1M0 0L-11.0 4.9M-6.1 2.7l-3.6 -1.3M-6.1 2.7l-1.5 3.5M0 0L-9.8 -7.1M-5.4 -3.9l-0.7 -3.8M-5.4 -3.9l-3.8 0.5M0 0L1.3 -12.0M0.7 -6.6l2.9 -2.5M0.7 -6.6l-2.3 -3.1M0 0L11.0 -4.9M6.1 -2.7l3.6 1.3M6.1 -2.7l1.5 -3.5'/%3E%3Cpath transform='translate(166 423)' d='M0 0L6.5 0.1M3.6 0.1l1.5 1.4M3.6 0.1l1.5 -1.4M0 0L3.1 5.7M1.7 3.1l-0.5 2.0M1.7 3.1l2.0 0.6M0 0L-3.3 5.5M-1.8 3.1l-2.0 0.6M-1.8 3.1l0.4 2.0M0 0L-6.5 -0.1M-3.6 -0.1l-1.5 -1.4M-3.6 -0.1l-1.5 1.4M0 0L-3.1 -5.7M-1.7 -3.1l0.5 -2.0M-1.7 -3.1l-2.0 -0.6M0 0L3.3 -5.5M1.8 -3.1l2.0 -0.6M1.8 -3.1l-0.4 -2.0'/%3E%3Cpath transform='translate(345 686)' d='M0 0L5.5 6.1M3.0 3.3l-0.0 2.6M3.0 3.3l2.6 0.2M0 0L-2.5 7.8M-1.4 4.3l-2.3 1.3M-1.4 4.3l1.1 2.4M0 0L-8.0 1.7M-4.4 0.9l-2.2 -1.3M-4.4 0.9l-1.5 2.1M0 0L-5.5 -6.1M-3.0 -3.3l0.0 -2.6M-3.0 -3.3l-2.6 -0.2M0 0L2.5 -7.8M1.4 -4.3l2.3 -1.3M1.4 -4.3l-1.1 -2.4M0 0L8.0 -1.7M4.4 -0.9l2.2 1.3M4.4 -0.9l1.5 -2.1'/%3E%3Cpath transform='translate(2 377)' d='M0 0L5.4 2.8M3.0 1.5l0.7 1.8M3.0 1.5l1.9 -0.5M0 0L0.3 6.1M0.2 3.3l-1.3 1.5M0.2 3.3l1.4 1.4M0 0L-5.1 3.3M-2.8 1.8l-1.9 -0.3M-2.8 1.8l-0.5 1.9M0 0L-5.4 -2.8M-3.0 -1.5l-0.7 -1.8M-3.0 -1.5l-1.9 0.5M0 0L-0.3 -6.1M-0.2 -3.3l1.3 -1.5M-0.2 -3.3l-1.4 -1.4M0 0L5.1 -3.3M2.8 -1.8l1.9 0.3M2.8 -1.8l0.5 -1.9'/%3E%3Cpath transform='translate(583 52)' d='M0 0L5.3 1.7M2.9 0.9l0.9 1.6M2.9 0.9l1.6 -0.8M0 0L1.2 5.5M0.6 3.0l-0.9 1.5M0.6 3.0l1.5 1.0M0 0L-4.2 3.8M-2.3 2.1l-1.8 -0.0M-2.3 2.1l-0.2 1.8M0 0L-5.3 -1.7M-2.9 -0.9l-0.9 -1.6M-2.9 -0.9l-1.6 0.8M0 0L-1.2 -5.5M-0.6 -3.0l0.9 -1.5M-0.6 -3.0l-1.5 -1.0M0 0L4.2 -3.8M2.3 -2.1l1.8 0.0M2.3 -2.1l0.2 -1.8'/%3E%3Cpath transform='translate(400 286)' d='M0 0L6.1 6.1M3.4 3.4l0.1 2.8M3.4 3.4l2.8 0.1M0 0L-2.3 8.4M-1.2 4.6l-2.4 1.5M-1.2 4.6l1.3 2.5M0 0L-8.4 2.2M-4.6 1.2l-2.4 -1.3M-4.6 1.2l-1.5 2.4M0 0L-6.1 -6.1M-3.4 -3.4l-0.1 -2.8M-3.4 -3.4l-2.8 -0.1M0 0L2.3 -8.4M1.2 -4.6l2.4 -1.5M1.2 -4.6l-1.3 -2.5M0 0L8.4 -2.2M4.6 -1.2l2.4 1.3M4.6 -1.2l1.5 -2.4'/%3E%3Cpath transform='translate(173 278)' d='M0 0L6.2 2.9M3.4 1.6l0.8 2.0M3.4 1.6l2.1 -0.7M0 0L0.6 6.8M0.3 3.8l-1.4 1.7M0.3 3.8l1.6 1.5M0 0L-5.6 3.9M-3.1 2.2l-2.2 -0.3M-3.1 2.2l-0.5 2.1M0 0L-6.2 -2.9M-3.4 -1.6l-0.8 -2.0M-3.4 -1.6l-2.1 0.7M0 0L-0.6 -6.8M-0.3 -3.8l1.4 -1.7M-0.3 -3.8l-1.6 -1.5M0 0L5.6 -3.9M3.1 -2.2l2.2 0.3M3.1 -2.2l0.5 -2.1'/%3E%3Cpath transform='translate(211 650)' d='M0 0L7.5 6.2M4.1 3.4l0.4 3.1M4.1 3.4l3.1 -0.2M0 0L-1.6 9.6M-0.9 5.3l-2.5 1.9M-0.9 5.3l1.7 2.6M0 0L-9.1 3.4M-5.0 1.9l-2.9 -1.2M-5.0 1.9l-1.4 2.8M0 0L-7.5 -6.2M-4.1 -3.4l-0.4 -3.1M-4.1 -3.4l-3.1 0.2M0 0L1.6 -9.6M0.9 -5.3l2.5 -1.9M0.9 -5.3l-1.7 -2.6M0 0L9.1 -3.4M5.0 -1.9l2.9 1.2M5.0 -1.9l1.4 -2.8'/%3E%3Cpath transform='translate(550 403)' d='M0 0L7.3 1.6M4.0 0.9l1.3 2.0M4.0 0.9l2.1 -1.2M0 0L2.2 7.1M1.2 3.9l-1.0 2.1M1.2 3.9l2.1 1.2M0 0L-5.0 5.5M-2.8 3.0l-2.4 0.2M-2.8 3.0l0.0 2.4M0 0L-7.3 -1.6M-4.0 -0.9l-1.3 -2.0M-4.0 -0.9l-2.1 1.2M0 0L-2.2 -7.1M-1.2 -3.9l1.0 -2.1M-1.2 -3.9l-2.1 -1.2M0 0L5.0 -5.5M2.8 -3.0l2.4 -0.2M2.8 -3.0l-0.0 -2.4'/%3E%3Cpath transform='translate(663 518)' d='M0 0L4.3 3.3M2.4 1.8l0.3 1.7M2.4 1.8l1.7 -0.2M0 0L-0.7 5.4M-0.4 3.0l-1.3 1.1M-0.4 3.0l1.0 1.4M0 0L-5.0 2.1M-2.8 1.1l-1.6 -0.6M-2.8 1.1l-0.7 1.6M0 0L-4.3 -3.3M-2.4 -1.8l-0.3 -1.7M-2.4 -1.8l-1.7 0.2M0 0L0.7 -5.4M0.4 -3.0l1.3 -1.1M0.4 -3.0l-1.0 -1.4M0 0L5.0 -2.1M2.8 -1.1l1.6 0.6M2.8 -1.1l0.7 -1.6'/%3E%3Cpath transform='translate(204 127)' d='M0 0L7.8 2.3M4.3 1.3l1.3 2.2M4.3 1.3l2.3 -1.2M0 0L1.9 7.9M1.0 4.3l-1.3 2.3M1.0 4.3l2.2 1.4M0 0L-5.9 5.6M-3.2 3.1l-2.6 0.0M-3.2 3.1l-0.2 2.6M0 0L-7.8 -2.3M-4.3 -1.3l-1.3 -2.2M-4.3 -1.3l-2.3 1.2M0 0L-1.9 -7.9M-1.0 -4.3l1.3 -2.3M-1.0 -4.3l-2.2 -1.4M0 0L5.9 -5.6M3.2 -3.1l2.6 -0.0M3.2 -3.1l0.2 -2.6'/%3E%3Cpath transform='translate(423 142)' d='M0 0L7.2 10.2M4.0 5.6l-0.5 4.0M4.0 5.6l3.9 0.8M0 0L-5.2 11.4M-2.9 6.3l-3.7 1.5M-2.9 6.3l1.3 3.8M0 0L-12.5 1.1M-6.9 0.6l-3.2 -2.5M-6.9 0.6l-2.7 3.0M0 0L-7.2 -10.2M-4.0 -5.6l0.5 -4.0M-4.0 -5.6l-3.9 -0.8M0 0L5.2 -11.4M2.9 -6.3l3.7 -1.5M2.9 -6.3l-1.3 -3.8M0 0L12.5 -1.1M6.9 -0.6l3.2 2.5M6.9 -0.6l2.7 -3.0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 700px 700px repeat; animation: hdFall 80s linear infinite, hdTw 3.2s ease-in-out infinite alternate; }
@keyframes hdFall { to { transform: translateY(700px); } }
.bd-hub[data-rk="platinum"] .hub-deco::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 55%; background: radial-gradient(ellipse 70% 100% at 55% 0%, rgba(160, 230, 255, 0.28), transparent 70%); }
/* (Diamond : des éclats taillés, violets, qui montent lentement — deux nappes qui brillent chacune à son tour) */
.bd-hub[data-rk="diamond"] .hd-fx { display: block !important; inset: 0 0 auto; height: calc(100% + 760px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cg stroke='%231E0D46' stroke-width='1.6' stroke-linejoin='round'%3E%3Cg transform='translate(0 18) rotate(-15)'%3E%3Cpath d='M0 -15.5L9.6 -2.3L0 15.5L-9.6 -2.3Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -15.5L9.6 -2.3L0 1.6Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(379 271) rotate(9)'%3E%3Cpath d='M0 -7.1L4.4 -1.1L0 7.1L-4.4 -1.1Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -7.1L4.4 -1.1L0 0.7Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(661 312) rotate(-10)'%3E%3Cpath d='M0 -8.6L5.4 -1.3L0 8.6L-5.4 -1.3Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -8.6L5.4 -1.3L0 0.9Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(332 12) rotate(5)'%3E%3Cpath d='M0 -6.1L3.8 -0.9L0 6.1L-3.8 -0.9Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -6.1L3.8 -0.9L0 0.6Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(299 520) rotate(-8)'%3E%3Cpath d='M0 -6.5L4.0 -1.0L0 6.5L-4.0 -1.0Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -6.5L4.0 -1.0L0 0.7Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(524 83) rotate(-8)'%3E%3Cpath d='M0 -8.8L5.5 -1.3L0 8.8L-5.5 -1.3Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -8.8L5.5 -1.3L0 0.9Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(198 237) rotate(2)'%3E%3Cpath d='M0 -12.8L8.0 -1.9L0 12.8L-8.0 -1.9Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -12.8L8.0 -1.9L0 1.3Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(705 575) rotate(19)'%3E%3Cpath d='M0 -9.7L6.0 -1.5L0 9.7L-6.0 -1.5Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -9.7L6.0 -1.5L0 1.0Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(463 676) rotate(19)'%3E%3Cpath d='M0 -8.3L5.2 -1.2L0 8.3L-5.2 -1.2Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -8.3L5.2 -1.2L0 0.8Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(483 472) rotate(-24)'%3E%3Cpath d='M0 -15.2L9.4 -2.3L0 15.2L-9.4 -2.3Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -15.2L9.4 -2.3L0 1.5Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(140 590) rotate(-5)'%3E%3Cpath d='M0 -10.7L6.6 -1.6L0 10.7L-6.6 -1.6Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -10.7L6.6 -1.6L0 1.1Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(141 101) rotate(7)'%3E%3Cpath d='M0 -7.5L4.6 -1.1L0 7.5L-4.6 -1.1Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -7.5L4.6 -1.1L0 0.7Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(178 406) rotate(-8)'%3E%3Cpath d='M0 -13.6L8.4 -2.0L0 13.6L-8.4 -2.0Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -13.6L8.4 -2.0L0 1.4Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(691 190) rotate(-7)'%3E%3Cpath d='M0 -6.4L4.0 -1.0L0 6.4L-4.0 -1.0Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -6.4L4.0 -1.0L0 0.6Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 760px 760px repeat; animation: hdRise3 90s linear infinite, hdTw 2.8s ease-in-out infinite alternate; }
.bd-hub[data-rk="diamond"] .hub-deco::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cg stroke='%231E0D46' stroke-width='1.6' stroke-linejoin='round'%3E%3Cg transform='translate(0 697) rotate(-15)'%3E%3Cpath d='M0 -6.3L3.9 -1.0L0 6.3L-3.9 -1.0Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -6.3L3.9 -1.0L0 0.6Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(544 52) rotate(13)'%3E%3Cpath d='M0 -15.3L9.5 -2.3L0 15.3L-9.5 -2.3Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -15.3L9.5 -2.3L0 1.5Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(167 132) rotate(-4)'%3E%3Cpath d='M0 -8.1L5.0 -1.2L0 8.1L-5.0 -1.2Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -8.1L5.0 -1.2L0 0.8Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(688 263) rotate(5)'%3E%3Cpath d='M0 -6.5L4.0 -1.0L0 6.5L-4.0 -1.0Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -6.5L4.0 -1.0L0 0.6Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(290 440) rotate(-14)'%3E%3Cpath d='M0 -6.2L3.8 -0.9L0 6.2L-3.8 -0.9Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -6.2L3.8 -0.9L0 0.6Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(332 733) rotate(17)'%3E%3Cpath d='M0 -6.9L4.3 -1.0L0 6.9L-4.3 -1.0Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -6.9L4.3 -1.0L0 0.7Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(536 486) rotate(-1)'%3E%3Cpath d='M0 -8.1L5.0 -1.2L0 8.1L-5.0 -1.2Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -8.1L5.0 -1.2L0 0.8Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(176 559) rotate(17)'%3E%3Cpath d='M0 -10.6L6.6 -1.6L0 10.6L-6.6 -1.6Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -10.6L6.6 -1.6L0 1.1Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(481 209) rotate(15)'%3E%3Cpath d='M0 -13.7L8.5 -2.1L0 13.7L-8.5 -2.1Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -13.7L8.5 -2.1L0 1.4Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(387 594) rotate(-3)'%3E%3Cpath d='M0 -12.6L7.8 -1.9L0 12.6L-7.8 -1.9Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -12.6L7.8 -1.9L0 1.3Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(745 402) rotate(12)'%3E%3Cpath d='M0 -10.6L6.6 -1.6L0 10.6L-6.6 -1.6Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -10.6L6.6 -1.6L0 1.1Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(559 621) rotate(-6)'%3E%3Cpath d='M0 -8.2L5.1 -1.2L0 8.2L-5.1 -1.2Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -8.2L5.1 -1.2L0 0.8Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(156 705) rotate(-20)'%3E%3Cpath d='M0 -7.6L4.7 -1.1L0 7.6L-4.7 -1.1Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -7.6L4.7 -1.1L0 0.8Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(49 192) rotate(22)'%3E%3Cpath d='M0 -6.1L3.8 -0.9L0 6.1L-3.8 -0.9Z' fill='%23B07DFF'/%3E%3Cpath d='M0 -6.1L3.8 -0.9L0 0.6Z' fill='%23F2E8FF' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 210px 90px / 760px 760px repeat; animation: hdTw 2.8s ease-in-out infinite alternate-reverse; }
/* (Hatred : des blocs de pixels arrachés, magenta et cyan, qui sautent d'une place à l'autre — l'image se déchire) */
.bd-hub[data-rk="top"] .hub-deco::before { content: ''; position: absolute; inset: -320px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='820'%3E%3Crect x='0.5' y='278.1' width='7.5' height='4.6' fill='%23FF2E93' fill-opacity='0.78'/%3E%3Crect x='531.3' y='462.6' width='23.7' height='9.8' fill='%23FF2E93' fill-opacity='0.92'/%3E%3Crect x='538.4' y='474.4' width='11.8' height='5.9' fill='%2345ECFF' fill-opacity='0.92'/%3E%3Crect x='677.7' y='447.8' width='38.9' height='3.9' fill='%23FF2E93' fill-opacity='0.57'/%3E%3Crect x='689.4' y='453.7' width='19.5' height='2.3' fill='%2345ECFF' fill-opacity='0.57'/%3E%3Crect x='278.9' y='163.5' width='35.7' height='5.4' fill='%23FF2E93' fill-opacity='0.82'/%3E%3Crect x='289.7' y='170.9' width='17.9' height='3.2' fill='%2345ECFF' fill-opacity='0.82'/%3E%3Crect x='188.6' y='297.8' width='17.4' height='6.5' fill='%23FF2E93' fill-opacity='0.66'/%3E%3Crect x='187.5' y='720.4' width='14.7' height='7.1' fill='%23FF2E93' fill-opacity='0.87'/%3E%3Crect x='818.8' y='372.8' width='50.1' height='5.1' fill='%2345ECFF' fill-opacity='0.64'/%3E%3Crect x='833.8' y='379.9' width='25.0' height='3.0' fill='%23FF2E93' fill-opacity='0.64'/%3E%3Crect x='182.5' y='611.6' width='20.6' height='6.4' fill='%23FF2E93' fill-opacity='0.80'/%3E%3Crect x='188.6' y='619.9' width='10.3' height='3.8' fill='%2345ECFF' fill-opacity='0.80'/%3E%3Crect x='526.0' y='623.9' width='43.9' height='8.8' fill='%23FF2E93' fill-opacity='0.71'/%3E%3Crect x='670.2' y='50.0' width='6.0' height='3.5' fill='%23FF2E93' fill-opacity='0.90'/%3E%3Crect x='434.2' y='351.2' width='47.6' height='4.7' fill='%2345ECFF' fill-opacity='0.54'/%3E%3Crect x='518.9' y='95.2' width='28.9' height='10.0' fill='%23FF2E93' fill-opacity='0.52'/%3E%3Crect x='527.5' y='107.1' width='14.4' height='6.0' fill='%2345ECFF' fill-opacity='0.52'/%3E%3Crect x='520.0' y='303.4' width='24.2' height='8.8' fill='%2345ECFF' fill-opacity='0.67'/%3E%3Crect x='527.3' y='314.2' width='12.1' height='5.3' fill='%23FF2E93' fill-opacity='0.67'/%3E%3Crect x='752.2' y='578.2' width='6.0' height='5.0' fill='%23FF2E93' fill-opacity='0.59'/%3E%3Crect x='754.0' y='585.2' width='3.0' height='3.0' fill='%2345ECFF' fill-opacity='0.59'/%3E%3Crect x='298.2' y='770.0' width='11.7' height='9.2' fill='%23FF2E93' fill-opacity='0.71'/%3E%3Crect x='301.7' y='781.2' width='5.9' height='5.5' fill='%2345ECFF' fill-opacity='0.71'/%3E%3Crect x='253.3' y='400.4' width='47.1' height='9.8' fill='%2345ECFF' fill-opacity='0.75'/%3E%3Crect x='267.4' y='412.1' width='23.5' height='5.9' fill='%23FF2E93' fill-opacity='0.75'/%3E%3Crect x='693.8' y='667.6' width='37.9' height='3.8' fill='%23FF2E93' fill-opacity='0.52'/%3E%3Crect x='705.1' y='673.4' width='19.0' height='2.3' fill='%2345ECFF' fill-opacity='0.52'/%3E%3Crect x='416.4' y='674.0' width='10.7' height='4.8' fill='%23FF2E93' fill-opacity='0.83'/%3E%3Crect x='419.6' y='680.8' width='5.4' height='2.9' fill='%2345ECFF' fill-opacity='0.83'/%3E%3Crect x='42.3' y='59.3' width='17.4' height='9.5' fill='%2345ECFF' fill-opacity='0.47'/%3E%3Crect x='451.2' y='224.8' width='38.1' height='6.8' fill='%2345ECFF' fill-opacity='0.55'/%3E%3Crect x='551.7' y='722.5' width='45.4' height='9.0' fill='%23FF2E93' fill-opacity='0.83'/%3E%3Crect x='501.9' y='800.0' width='21.2' height='4.1' fill='%23FF2E93' fill-opacity='0.62'/%3E%3Crect x='508.3' y='806.1' width='10.6' height='2.5' fill='%2345ECFF' fill-opacity='0.62'/%3E%3Crect x='55.4' y='561.3' width='47.7' height='4.7' fill='%23FF2E93' fill-opacity='0.86'/%3E%3Crect x='99.7' y='404.3' width='37.5' height='9.0' fill='%23FF2E93' fill-opacity='0.78'/%3E%3Crect x='110.9' y='415.2' width='18.8' height='5.4' fill='%2345ECFF' fill-opacity='0.78'/%3E%3C/svg%3E") 0 0 / 820px 820px repeat; animation: hdPix 1.9s steps(1) infinite; }
@keyframes hdPix { 0% { transform: translate(0, 0); opacity: 0.9; } 18% { transform: translate(-37px, 120px); opacity: 0.5; } 21% { transform: translate(52px, -60px); opacity: 1; } 46% { transform: translate(0, 300px); opacity: 0.7; } 63% { transform: translate(-90px, 40px); opacity: 0.95; } 66% { transform: translate(14px, -210px); opacity: 0.4; } 85% { transform: translate(70px, 160px); opacity: 0.85; } }
/* (Hatred : la réalité qui glitche — des bandes qui sautent, en magenta et en cyan) */
.bd-hub[data-rk="top"] .hd-fx { display: block !important; inset: -10% 0;
  background: repeating-linear-gradient(to bottom, transparent 0 37px, rgba(255, 46, 147, 0.2) 37px 40px, transparent 40px 91px, rgba(69, 236, 255, 0.16) 91px 93px, transparent 93px 160px);
  animation: hdGlitch 2.2s steps(1) infinite; }
@keyframes hdGlitch { 0% { transform: translate(0, 0); } 12% { transform: translate(-14px, 23px); } 14% { transform: translate(9px, -40px); } 30% { transform: translate(0, 61px); } 47% { transform: translate(-22px, 7px); } 49% { transform: translate(18px, -18px); } 70% { transform: translate(0, 33px); } 88% { transform: translate(-6px, -70px); } }
/* (le décor s'arrête avec le réglage « Fond animé », et pour qui ne veut pas de mouvement) */
.bd-hub.still .hub-deco i, .bd-hub.still .hub-deco::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .hub-deco i, .hub-deco::before { animation: none !important; } }

/* (ordinateur, sur le menu : les pages du site, discrètes, tout en bas — à la place du lien « Le jeu en bref ↓ », retiré
   avec son bloc le 02/10 ; pas au doigt, ni hors ligne, ni au lobby) */
.hub-seo { position: absolute; left: 50%; bottom: calc(var(--u) * 1.4 + var(--sa-b)); transform: translateX(-50%); display: flex; gap: calc(var(--u) * 0.8); white-space: nowrap; font: 700 max(12px, calc(var(--u) * 1.5)) var(--fc); letter-spacing: 1.5px; text-transform: uppercase; }
.hub-seo a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.hub-seo a + a::before { content: '·'; margin-right: calc(var(--u) * 0.8); color: rgba(255, 255, 255, 0.3); }
.hub-seo a:hover, .hub-seo a:focus-visible { color: #fff; }
.hub-seo a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
html:not(.hosted) .hub-seo, html.touch .hub-seo, .bd-hub[data-view="lobby"] .hub-seo { display: none; }
html.hosted:not(.touch) .bd-hub[data-view="menu"] { padding-bottom: calc(var(--u) * 5.4 + var(--sa-b)); }
body[data-screen="hub"] .wm { display: none !important; }
/* AVANT LE DÉMARRAGE (les scripts se chargent : après une mise en ligne, ils sont tous retéléchargés) : l'entrée est déjà
   là, sans le badge balldash.io par-dessus, avec une fine barre d'or en haut qui dit que ça charge (br.html, html.booting) */
body:not([data-screen]) .wm { display: none !important; }
html.booting .bd-hub::after { content: ''; position: fixed; z-index: 30; left: -30%; top: 0; width: 30%; height: 4px; background: #FFD23F; box-shadow: 0 0 10px rgba(255, 210, 63, 0.7); pointer-events: none; animation: bootbar 1.1s ease-in-out infinite; }
body[data-screen="hub"] { background: #100C2C; }
html:has(body[data-screen="hub"]) { background: #100C2C; }
/* les messages : en haut, sous la barre, jamais sur le bouton principal */
body.br[data-screen="hub"] > .toast, html.touch body.br[data-screen="hub"] > .toast { top: calc(var(--sa-t) + 74px); bottom: auto; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); text-align: center; }

/* ─── les boutons de l'entrée ─── */
.hub-go {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 0.2);
  min-height: 44px; box-sizing: border-box; padding: calc(var(--u) * 1) calc(var(--u) * 3) calc(var(--u) * 1.2); overflow: hidden;
  border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.4); background: var(--gold); color: var(--ink);
  box-shadow: inset 0 calc(var(--u) * -0.6) 0 rgba(180, 110, 0, 0.35), calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); cursor: pointer; text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;
}
.hub-go b { position: relative; font: italic 800 calc(var(--u) * 3.6)/0.95 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; padding: 0 calc(var(--u) * 0.3) calc(var(--u) * 0.2) 0; }
.hub-go small { position: relative; font: 700 max(12px, calc(var(--u) * 1.5))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; opacity: 0.75; }
.hub-go:hover { transform: translate(calc(var(--u) * -0.2), calc(var(--u) * -0.2)); box-shadow: inset 0 calc(var(--u) * -0.6) 0 rgba(180, 110, 0, 0.35), calc(var(--u) * 0.8) calc(var(--u) * 0.8) 0 var(--ink); background: #FFDC5E; }
.hub-go:active { transform: translate(calc(var(--u) * 0.4), calc(var(--u) * 0.4)); box-shadow: calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0 var(--ink); }
.hub-go.on { background: #3DDC84; box-shadow: inset 0 calc(var(--u) * -0.6) 0 rgba(0, 110, 50, 0.3), calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); }
.hub-go.on:hover { background: #5BE596; }
.hub-go-s { flex-direction: row; padding: calc(var(--u) * 0.8) calc(var(--u) * 2.4) calc(var(--u) * 1); font: italic 800 calc(var(--u) * 2.6)/1 var(--fc); text-transform: uppercase; }
.hub-go kbd { position: absolute; right: calc(var(--u) * 1.2); top: calc(var(--u) * 1); min-width: 0; padding: 2px 6px 3px; border-width: 2px; border-bottom-width: 3px; border-radius: 6px; font-size: max(12px, calc(var(--u) * 1.3)); opacity: 0.7; }
html.touch .hub-go kbd, html.tel .hub-go kbd { display: none; }
.hub-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 0.8); min-height: 44px; box-sizing: border-box;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1.8) calc(var(--u) * 0.8); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1);
  background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); cursor: pointer;
  font: italic 800 max(14px, calc(var(--u) * 2.1))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.hub-btn:hover { transform: translate(-1px, -1px); background: #fff; box-shadow: calc(var(--u) * 0.5 + 1px) calc(var(--u) * 0.5 + 1px) 0 var(--ink); }
.hub-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.hub-btn svg { width: 1.2em; height: 1.2em; flex: none; }
.hub-seg { display: inline-flex; border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1); background: var(--card); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); overflow: hidden; }
.hub-seg button { min-height: 44px; min-width: 44px; padding: 0 calc(var(--u) * 2); border: 0; border-left: calc(var(--u) * 0.3) solid var(--ink); background: none; color: var(--ink); cursor: pointer; font: italic 800 max(14px, calc(var(--u) * 2.2))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; }
.hub-seg button:first-child { border-left: 0; }
.hub-seg button[aria-pressed="true"] { background: var(--ink); color: var(--gold); }
.hub-seg button.off { color: rgba(21, 21, 21, 0.3); text-decoration: line-through; }

/* ─── la barre du haut ─── */
.hub-top { position: relative; z-index: 3; display: flex; align-items: center; gap: calc(var(--u) * 1.4); min-width: 0; min-height: calc(var(--u) * 6); }
.hub-logo { flex: none; margin: 0 calc(var(--u) * 1) 0 0; font: italic 800 calc(var(--u) * 5.4)/1 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; color: #fff; text-shadow: var(--out3), calc(var(--u) * 0.45) calc(var(--u) * 0.55) 0 var(--ink); padding: 0 calc(var(--u) * 0.4) calc(var(--u) * 0.3) 0; white-space: nowrap; transform: rotate(-2deg); }
.hub-logo em { color: var(--gold); }
.hub-back { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.6); min-height: 44px; height: calc(var(--u) * 5.6); box-sizing: border-box; padding: 0 calc(var(--u) * 2); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.2); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); cursor: pointer; font: italic 800 max(15px, calc(var(--u) * 2.3))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; }
.hub-back:hover { background: #fff; transform: translate(-1px, -1px); }
.hub-back:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* l'étiquette de la file (au lobby) : sa couleur, son nom, le format */
.hub-q { flex: none; display: inline-flex; align-items: stretch; height: calc(var(--u) * 5.6); min-height: 44px; box-sizing: border-box; border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.2); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); overflow: hidden; }
.hub-q b, .hub-q i { display: grid; place-items: center; padding: 0 calc(var(--u) * 1.8); font: italic 800 max(16px, calc(var(--u) * 2.8))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.hub-q b { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 calc(var(--u) * 0.8), transparent calc(var(--u) * 0.8) calc(var(--u) * 1.6)), var(--fc-c); color: #fff; text-shadow: var(--out); }
.bd-hub[data-file="rk"] .hub-q b { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 calc(var(--u) * 0.8), transparent calc(var(--u) * 0.8) calc(var(--u) * 1.6)), linear-gradient(#D93445, #9E1A2C); color: #FFE27A; }
.hub-q i { background: var(--card); color: var(--ink); border-left: calc(var(--u) * 0.35) solid var(--ink); }
.hub-me { flex: 0 1 auto; display: flex; align-items: center; gap: calc(var(--u) * 1.1); min-width: 0; height: calc(var(--u) * 5.6); min-height: 44px; box-sizing: border-box; padding: 0 calc(var(--u) * 1.8) 0 calc(var(--u) * 0.6); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.2); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); cursor: pointer; text-align: left; }
.hub-me:hover { background: #fff; }
.hub-me .hm-ava { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); min-width: 34px; min-height: 34px; }
.hub-me .hm-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-me .hm-txt b { font: italic 800 max(15px, calc(var(--u) * 2.3))/1 var(--fc); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--u) * 26); padding-right: 2px; }
.hub-me .hm-txt small { font: 700 max(12px, calc(var(--u) * 1.4))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: rgba(21, 21, 21, 0.58); white-space: nowrap; }
.hub-grp { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.7); height: calc(var(--u) * 5.6); min-height: 44px; box-sizing: border-box; padding: 0 calc(var(--u) * 1.6); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.2); background: #12A99C; color: #fff; box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); cursor: pointer; font: italic 800 max(14px, calc(var(--u) * 2.1))/1 var(--fc); text-transform: uppercase; text-shadow: var(--out); white-space: nowrap; }
.hub-grp svg { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); min-width: 20px; min-height: 20px; }
.hub-tools { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 1); }
.hub-tool { position: relative; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.8); height: calc(var(--u) * 5.6); min-height: 44px; min-width: 44px; box-sizing: border-box; padding: 0 calc(var(--u) * 1.6) 0 calc(var(--u) * 0.7); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.2); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); cursor: pointer; transition: transform 0.1s ease; }
.hub-tool:hover { background: #fff; transform: translate(-1px, -1px); }
.hub-tool:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.hub-tool .hub-ti { display: grid; place-items: center; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); min-width: 28px; min-height: 28px; font-style: normal; }
.hub-tool .hub-ti img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--ink); box-sizing: border-box; object-fit: cover; background: #fff; }
.hub-tool .hub-ti svg { width: 100%; height: 100%; }
.hub-tool b { font: italic 800 max(14px, calc(var(--u) * 2.1))/1 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.hub-tool .dot { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; border: 2.5px solid var(--ink); border-radius: 50%; background: #FF3B30; }
.hub-ib { width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); min-width: 44px; min-height: 44px; border-width: calc(var(--u) * 0.35); border-radius: calc(var(--u) * 1.2); font-size: max(22px, calc(var(--u) * 2.8)); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); }
.hub-ib svg { width: 52%; height: 52%; }
/* au lobby : « ← Retour » et l'étiquette de la file à la place du logo */
.bd-hub[data-view="lobby"] .hub-logo { display: none; }

/* l'invitation (arrivé par un lien) */
.hub-inv { display: flex; align-items: center; gap: calc(var(--u) * 1.4); justify-self: start; max-width: 100%; box-sizing: border-box; padding: calc(var(--u) * 0.6) calc(var(--u) * 0.8) calc(var(--u) * 0.6) calc(var(--u) * 2); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.4); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); }
.hub-inv span { min-width: 0; font: italic 800 max(14px, calc(var(--u) * 2.2))/1.1 var(--fc); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-inv-x { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; font-size: 20px; }
.hub-inv[hidden] { display: none; }
.bd-hub > .hub-inv:not([hidden]) ~ .hub-menu, .bd-hub > .hub-inv:not([hidden]) ~ .hub-lobby { grid-row: 3; }
.bd-hub > .hub-inv[hidden] ~ .hub-menu, .bd-hub > .hub-inv[hidden] ~ .hub-lobby { grid-row: 2 / 4; }

/* ═══ LE MENU : les 4 onglets à gauche (des bandeaux, comme chez Brawlhalla), le contenu à droite ═══ */
.hub-menu { position: relative; z-index: 1; min-height: 0; display: grid; grid-template-columns: calc(var(--u) * 54) minmax(0, 1fr); gap: calc(var(--u) * 4.6); align-items: stretch; }
.hub-tabs { display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); min-height: 0; padding-top: calc(var(--u) * 1.4); }
.hub-tab {
  --tc: var(--c-std); --td: var(--c-std-d);
  position: relative; flex: 1 1 0; min-height: 44px; max-height: calc(var(--u) * 19); display: flex; align-items: center; gap: calc(var(--u) * 1.6);
  box-sizing: border-box; padding: calc(var(--u) * 1.2) calc(var(--u) * 2) calc(var(--u) * 1.2) calc(var(--u) * 1.8);
  border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.6);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0 calc(var(--u) * 1), rgba(255, 255, 255, 0) calc(var(--u) * 1) calc(var(--u) * 2)), linear-gradient(to bottom, color-mix(in srgb, var(--td) 82%, #fff), var(--td));
  color: #fff; box-shadow: inset 0 calc(var(--u) * -0.7) 0 rgba(0, 0, 0, 0.22), calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); cursor: pointer; text-align: left;
  transform: skewX(-7deg); transition: transform 0.16s cubic-bezier(0.2, 1.4, 0.4, 1), filter 0.15s ease, box-shadow 0.14s ease;
}
.hub-tab > * { transform: skewX(7deg); }
/* (Max, 02/10 : l'onglet choisi « dépasse un peu » : il s'avance de 2,4 u, grossit de 4 % et prend un liseré blanc. On lui
   réserve cette place à droite de tous les onglets, pour qu'il ne sorte jamais de sa colonne) */
.hub-tab { margin-right: calc(var(--u) * 4.2); }
.hub-tab[data-tab="std"], .hub-tab[data-tab="rk"] { flex-grow: 1.3; max-height: calc(var(--u) * 21); }
.hub-tab[data-tab="br"] { --tc: var(--c-br); --td: var(--c-br-d); }
.hub-tab[data-tab="pp"] { --tc: var(--c-pp); --td: var(--c-pp-d); }
.hub-tab[aria-selected="false"] { filter: saturate(0.85) brightness(0.92); }
.hub-tab:hover { transform: translateX(calc(var(--u) * 0.8)) skewX(-7deg); filter: none; }
.hub-tab[aria-selected="true"] {
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 calc(var(--u) * 1), rgba(255, 255, 255, 0) calc(var(--u) * 1) calc(var(--u) * 2)), radial-gradient(ellipse 60% 120% at 85% 50%, rgba(255, 255, 255, 0.35), transparent 70%), linear-gradient(to bottom, color-mix(in srgb, var(--tc) 80%, #fff), var(--tc));
  transform: translateX(calc(var(--u) * 2.4)) skewX(-7deg) scale(1.04);
  box-shadow: inset 0 calc(var(--u) * -0.7) 0 rgba(0, 0, 0, 0.2), 0 0 0 calc(var(--u) * 0.45) #fff, calc(var(--u) * 1.1) calc(var(--u) * 1.1) 0 calc(var(--u) * 0.45) var(--ink);
}
/* (Standard et Ranked, les deux grands choix ; la battle royale et les parties perso, en dessous, plus petits) */
.hub-tab[data-tab="br"] { margin-top: calc(var(--u) * 1.4); }
.hub-tab[data-tab="br"]::before { transform: none; content: ''; position: absolute; left: calc(var(--u) * 2); right: calc(var(--u) * 2); top: calc(var(--u) * -1.9); border-top: calc(var(--u) * 0.3) dashed rgba(255, 255, 255, 0.35); }
.htb-ico { position: relative; z-index: 1; flex: none; width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); min-width: 30px; min-height: 30px; display: grid; place-items: center; }
.htb-ico svg, .htb-ico .rk-emb { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(2px 2px 0 var(--ink)); }
.htb-t { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.5); }
.htb-t b { font: italic 800 calc(var(--u) * 4.4)/0.95 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; text-shadow: var(--out), calc(var(--u) * 0.3) calc(var(--u) * 0.35) 0 var(--ink); padding: 0 calc(var(--u) * 0.4) calc(var(--u) * 0.3) 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htb-t small { font: 700 max(12px, calc(var(--u) * 1.7))/1.15 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-tab kbd { position: relative; z-index: 1; flex: none; min-width: 0; padding: 2px 7px 3px; border-width: 2px; border-bottom-width: 4px; border-radius: 7px; font-size: max(12px, calc(var(--u) * 1.6)); color: var(--ink); }
html.touch .hub-tab kbd, html.tel .hub-tab kbd { display: none; }
/* (l'illustration de l'onglet choisi : ses balles, ou ton emblème, qui sortent par le haut — comme l'onglet survolé de
   Brawlhalla et sa légende) */
.htb-art { display: none; position: absolute; z-index: 0; right: calc(var(--u) * 1.6); top: 50%; align-items: center; pointer-events: none; transform: skewX(7deg) translateY(-50%); }
.htb-art i { display: block; width: calc(var(--u) * 8.4); aspect-ratio: 1; margin-left: calc(var(--u) * -2.6); margin-top: calc(var(--u) * 3); filter: drop-shadow(calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink)); }
.htb-art i:first-child { margin: 0; width: calc(var(--u) * 10.4); position: relative; z-index: 1; }
.htb-art i img { display: block; width: 100%; height: 100%; box-sizing: border-box; border: calc(var(--u) * 0.4) solid var(--ink); border-radius: 50%; background: #fff; object-fit: cover; }
.hub-tab[aria-selected="true"] .htb-art { display: flex; animation: htbArt 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes htbArt { from { transform: skewX(7deg) translateY(-20%) scale(0.6); opacity: 0; } }
/* (le titre ne se coupe jamais : l'illustration lui laisse sa place — « PARTIES PERSO » est le plus long) */
.hub-tab[aria-selected="true"] .htb-t { padding-right: calc(var(--u) * 15.4); }
.hub-tab[aria-selected="true"] kbd { display: none; }
.hub-tab[data-tab="br"][aria-selected="true"] .htb-t, .hub-tab[data-tab="rk"][aria-selected="true"] .htb-t { padding-right: calc(var(--u) * 14); }
.hub-tab[data-tab="br"] .htb-art i { box-shadow: 0 0 0 calc(var(--u) * 0.5) rgba(255, 255, 255, 0.9), 0 0 0 calc(var(--u) * 1.2) rgba(255, 255, 255, 0.3); border-radius: 50%; }
.htb-art-rk { width: calc(var(--u) * 14); height: calc(var(--u) * 14); right: calc(var(--u) * 1); }
.htb-art-rk .rk-emb, .htb-art-rk > svg { display: block; width: 100%; height: 100%; filter: drop-shadow(calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink)) drop-shadow(0 0 calc(var(--u) * 1.6) color-mix(in srgb, var(--t1) 70%, transparent)); }
.htb-art-rk img.rk-emb.rk-vrai { filter: drop-shadow(0 0 calc(var(--u) * 1.6) color-mix(in srgb, var(--t1) 75%, transparent)); }
/* L'ONGLET RANKED : le plus précieux — un rouge profond, un double liseré d'or, ton rang en or, et un reflet qui passe */
.hub-tab[data-tab="rk"] { --tc: #D93445; --td: #6E1424; box-shadow: inset 0 0 0 calc(var(--u) * 0.4) #E9B949, inset 0 calc(var(--u) * -0.7) 0 rgba(0, 0, 0, 0.22), calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); overflow: hidden; }
.hub-tab[data-tab="rk"][aria-selected="true"] { overflow: visible; box-shadow: inset 0 0 0 calc(var(--u) * 0.4) #FFE27A, 0 0 0 calc(var(--u) * 0.45) #FFE27A, calc(var(--u) * 1.1) calc(var(--u) * 1.1) 0 calc(var(--u) * 0.45) var(--ink); }
.hub-tab[data-tab="rk"] .htb-t small { color: #FFE27A; }
.hub-tab[data-tab="rk"] .htb-t b { color: #fff; }
.hub-tab[data-tab="rk"] .htb-ico svg, .hub-tab[data-tab="rk"] .htb-ico .rk-emb { filter: drop-shadow(2px 2px 0 var(--ink)) drop-shadow(0 0 calc(var(--u) * 1) rgba(255, 210, 63, 0.6)); }
.hub-tab[data-tab="rk"]::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, transparent 38%, rgba(255, 240, 180, 0.42) 48%, transparent 58%) no-repeat; background-size: 260% 100%; background-position: 160% 0; animation: hubShine 5s ease-in-out infinite 1s; }
@keyframes hubShine { 0%, 62% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.hub-tab[data-tab="rk"][aria-selected="true"]::after { border-radius: calc(var(--u) * 1.2); clip-path: inset(0 round calc(var(--u) * 1.2)); }

/* LE CONTENU DE L'ONGLET : une scène à la couleur de la file (plus de carte blanche de formulaire) — ses rayons, sa lumière
   en haut, un cadre d'encre ; le titre en blanc cerné d'encre */
.hub-panel { position: relative; min-width: 0; min-height: 0; display: flex; box-sizing: border-box; border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2.2); color: #fff; box-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--ink); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255, 255, 255, 0.28), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 115%, rgba(255, 255, 255, 0.07) 0 5deg, transparent 5deg 13deg),
    linear-gradient(170deg, color-mix(in srgb, var(--fc-c) 92%, #fff), var(--fc-c) 40%, var(--fc-d));
}
.bd-hub[data-tab="rk"] .hub-panel {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 210, 63, 0.28), transparent 72%),
    repeating-conic-gradient(from 0deg at 50% -10%, rgba(255, 210, 63, 0.07) 0 4deg, transparent 4deg 11deg),
    linear-gradient(175deg, #3A2470, #1A123D 50%, #0C0820);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.45) #0C0820, inset 0 0 0 calc(var(--u) * 0.75) #C99A2E, calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--ink);
}
/* (une trame de points de BD dans les coins) */
.hub-panel::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(0, 0, 0, 0.16) 0 calc(var(--u) * 0.22), transparent calc(var(--u) * 0.3)) 0 0 / calc(var(--u) * 1.4) calc(var(--u) * 1.4);
  -webkit-mask: radial-gradient(ellipse 70% 70% at 50% 45%, transparent 55%, #000 100%); mask: radial-gradient(ellipse 70% 70% at 50% 45%, transparent 55%, #000 100%); }
.hp-pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 2.2); padding: calc(var(--u) * 2.8) calc(var(--u) * 3.4) calc(var(--u) * 2.8); box-sizing: border-box; }
.hp-head { display: flex; align-items: center; gap: calc(var(--u) * 1.6); min-width: 0; }
.hp-head h2 { margin: 0; min-width: 0; font: italic 800 calc(var(--u) * 5.6)/1 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; padding: 0 calc(var(--u) * 0.5) calc(var(--u) * 0.4) 0; color: #fff; text-shadow: var(--out3), calc(var(--u) * 0.45) calc(var(--u) * 0.55) 0 var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-tag { flex: none; padding: calc(var(--u) * 0.6) calc(var(--u) * 1.3) calc(var(--u) * 0.7); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 0.9); background: var(--ink); color: color-mix(in srgb, var(--fc-c) 55%, #fff); font: italic 800 max(13px, calc(var(--u) * 1.8))/1 var(--fc); letter-spacing: 1.2px; text-transform: uppercase; box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 rgba(0, 0, 0, 0.35); transform: rotate(-3deg); }
.bd-hub[data-tab="rk"] .hp-tag { color: #FFD23F; }
.hp-season { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.7) calc(var(--u) * 1.6) calc(var(--u) * 0.8); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: 99px; background: linear-gradient(#FFE27A, #E9A928); color: var(--ink); font: italic 800 max(14px, calc(var(--u) * 2.1))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); }
.hp-season[hidden] { display: none; }
.hp-help { margin: 0; font: 600 max(12px, calc(var(--u) * 1.75))/1.3 var(--fb); color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.hp-help.net-state:empty { display: none; }
.hp-help.net-state.bad { color: #FFD0CC; }

/* ─── LES DEUX FORMATS (1 VS 1, 2 VS 2) : de grandes cartes cliquables ─── */
.hp-fmts { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); }
.hp-fmt {
  position: relative; min-height: 0; display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; padding: 0;
  border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2); background: var(--card); color: var(--ink);
  box-shadow: calc(var(--u) * 0.8) calc(var(--u) * 0.8) 0 var(--ink); cursor: pointer; text-align: left; overflow: hidden; isolation: isolate;
  transition: transform 0.14s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.12s ease;
}
.hp-fmt:hover { transform: translate(calc(var(--u) * -0.3), calc(var(--u) * -0.5)) rotate(-0.6deg); box-shadow: calc(var(--u) * 1.1) calc(var(--u) * 1.3) 0 var(--ink); }
.hp-fmt[data-fmt="2v2"]:hover { transform: translate(calc(var(--u) * -0.3), calc(var(--u) * -0.5)) rotate(0.6deg); }
.hp-fmt:active { transform: translate(calc(var(--u) * 0.4), calc(var(--u) * 0.4)); box-shadow: calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0 var(--ink); }
/* STANDARD (« léger et fun ») : une affiche de combat — un soleil de BD jaune et orange (1 VS 1) ou cyan et bleu (2 VS 2),
   des confettis, des traits de vitesse, deux camps qui se foncent dessus et un « VS » rouge qui claque */
.hpf-art {
  position: relative; flex: 1; min-height: calc(var(--u) * 8); display: flex; align-items: center; justify-content: center; border-bottom: calc(var(--u) * 0.5) solid var(--ink); overflow: hidden; isolation: isolate;
  background:
    repeating-conic-gradient(from 0deg at 50% 56%, rgba(255, 255, 255, 0.3) 0 6deg, rgba(255, 255, 255, 0) 6deg 15deg),
    radial-gradient(circle at 50% 56%, #FFF6C4, #FFD23F 34%, #FF9D2E 72%, #F06A24);
}
.hp-fmt[data-fmt="2v2"] .hpf-art { background:
    repeating-conic-gradient(from 0deg at 50% 56%, rgba(255, 255, 255, 0.3) 0 6deg, rgba(255, 255, 255, 0) 6deg 15deg),
    radial-gradient(circle at 50% 56%, #E3FDFF, #6FE2FF 34%, #3A9BFF 72%, #2A62E8); }
/* (la trame de points dans les coins, et les traits de vitesse des deux côtés) */
.hpf-art::before { content: ''; position: absolute; z-index: -1; inset: 0; background:
    linear-gradient(to right, transparent 0 4%, rgba(255, 255, 255, 0.7) 4% 5%, transparent 5%) 0 30% / 100% calc(var(--u) * 0.5) no-repeat,
    linear-gradient(to right, transparent 0 2%, rgba(255, 255, 255, 0.7) 2% 3.5%, transparent 3.5%) 0 64% / 100% calc(var(--u) * 0.5) no-repeat,
    radial-gradient(circle, rgba(21, 21, 21, 0.2) 0 calc(var(--u) * 0.24), transparent calc(var(--u) * 0.32)) 0 0 / calc(var(--u) * 1.3) calc(var(--u) * 1.3);
  -webkit-mask: radial-gradient(ellipse 60% 60% at 50% 56%, transparent 60%, #000 100%); mask: radial-gradient(ellipse 60% 60% at 50% 56%, transparent 60%, #000 100%); }
/* (le sol de l'arène, une ellipse claire sous les balles) */
.hpf-art::after { content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: 7%; height: 20%; border-radius: 50%; background: rgba(255, 255, 255, 0.32); border: calc(var(--u) * 0.4) solid rgba(21, 21, 21, 0.3); }
/* (les confettis : de vrais morceaux de papier — rectangles, triangles, serpentins — cernés d'encre, autour des bords,
   jamais sur les balles ; ils flottent doucement) */
.hpf-fx { position: absolute; z-index: -1; inset: -4%; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%23151515' stroke-width='2.6' stroke-linejoin='round'%3E%3Cg transform='translate(14 358) rotate(38)' fill='%233DDC84'%3E%3Cpath d='M0 -10.1L9.1 6.1H-9.1Z'/%3E%3C/g%3E%3Cg transform='translate(413 32) rotate(84)'%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%23151515' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(476 58) rotate(166)' fill='%238E44E8'%3E%3Cpath d='M0 -10.6L9.5 6.3H-9.5Z'/%3E%3C/g%3E%3Cg transform='translate(534 152) rotate(151)' fill='%233DDC84'%3E%3Crect x='-7.2' y='-3.4' width='14.4' height='6.9' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(550 222) rotate(158)' fill='%23FF8A1F'%3E%3Crect x='-7.7' y='-3.8' width='15.5' height='7.7' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(45 149) rotate(120)'%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%23151515' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%233DDC84' stroke-width='4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(308 74) rotate(51)' fill='%233DDC84'%3E%3Crect x='-8.4' y='-3.5' width='16.8' height='7.0' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(247 70) rotate(179)' fill='%23FF3B5C'%3E%3Crect x='-9.3' y='-3.2' width='18.7' height='6.4' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(93 359) rotate(160)'%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%23151515' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%23FFE45C' stroke-width='4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(533 298) rotate(2)' fill='%232D8CFF'%3E%3Crect x='-6.8' y='-3.0' width='13.7' height='6.0' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(519 100) rotate(161)' fill='%233DDC84'%3E%3Crect x='-8.7' y='-3.0' width='17.4' height='6.0' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(541 20) rotate(34)'%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%23151515' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%23FFE45C' stroke-width='4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(44 301) rotate(129)' fill='%23FFFFFF'%3E%3Crect x='-6.6' y='-3.2' width='13.3' height='6.3' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(507 385) rotate(138)' fill='%23FFE45C'%3E%3Crect x='-7.6' y='-4.1' width='15.2' height='8.2' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(578 386) rotate(157)'%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%23151515' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(91 199) rotate(139)'%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%23151515' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%238E44E8' stroke-width='4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(35 63) rotate(19)' fill='%23FF3B5C'%3E%3Crect x='-6.5' y='-3.9' width='13.1' height='7.8' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(90 88) rotate(44)' fill='%23FFFFFF'%3E%3Crect x='-11.0' y='-3.6' width='21.9' height='7.3' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(112 41) rotate(116)' fill='%232D8CFF'%3E%3Cpath d='M0 -9.9L8.9 6.0H-8.9Z'/%3E%3C/g%3E%3Cg transform='translate(582 40) rotate(57)' fill='%233DDC84'%3E%3Crect x='-6.5' y='-3.6' width='13.1' height='7.2' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(579 177) rotate(172)'%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%23151515' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M-9 0q4.5-7 9 0t9 0' fill='none' stroke='%238E44E8' stroke-width='4' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(241 20) rotate(162)' fill='%23FFFFFF'%3E%3Crect x='-7.5' y='-4.4' width='14.9' height='8.8' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(414 78) rotate(113)' fill='%23FF3B5C'%3E%3Crect x='-10.2' y='-3.9' width='20.3' height='7.8' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(356 50) rotate(110)' fill='%23FF3B5C'%3E%3Crect x='-9.1' y='-3.4' width='18.2' height='6.8' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(44 13) rotate(157)' fill='%23FF8A1F'%3E%3Crect x='-10.0' y='-3.5' width='19.9' height='7.0' rx='1.6'/%3E%3C/g%3E%3Cg transform='translate(582 89) rotate(77)' fill='%23FFFFFF'%3E%3Crect x='-7.3' y='-4.1' width='14.6' height='8.3' rx='1.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat; animation: hpfConf 6s ease-in-out infinite alternate; }
@keyframes hpfConf { from { transform: translateY(-1.5%) rotate(-0.6deg); } to { transform: translateY(1.5%) rotate(0.6deg); } }
.bd-hub.still .hpf-fx { animation: none; }
@media (prefers-reduced-motion: reduce) { .hpf-fx { animation: none; } }
.hpf-side { position: relative; z-index: 1; top: 13%; flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; }
.hpf-side.a { justify-content: flex-end; padding-right: 5%; } .hpf-side.b { justify-content: flex-start; padding-left: 5%; }
.hpf-b { position: relative; flex: none; height: min(46%, calc(var(--u) * 18)); aspect-ratio: 1; transition: transform 0.22s cubic-bezier(0.2, 1.4, 0.4, 1); }
.hpf-b canvas { position: absolute; left: 50%; top: 50%; width: calc(100% * var(--k, 1.7)); height: calc(100% * var(--k, 1.7)); transform: translate(-50%, -50%); pointer-events: none; }
.hpf-b::after { content: ''; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: -6%; height: 14%; border-radius: 50%; background: rgba(21, 21, 21, 0.3); }
.hp-fmt[data-fmt="2v2"] .hpf-b { height: min(30%, calc(var(--u) * 12)); }
.hp-fmt[data-fmt="2v2"] .hpf-b + .hpf-b { margin-left: -22%; margin-top: 22%; }
.hp-fmt[data-fmt="2v2"] .hpf-side.a { padding-right: 3%; } .hp-fmt[data-fmt="2v2"] .hpf-side.b { padding-left: 3%; }
.hp-fmt[data-fmt="2v2"] .hpf-side .hpf-b:first-child { margin-bottom: 10%; }
.hpf-side.a .hpf-b { transform: rotate(-4deg); } .hpf-side.b .hpf-b { transform: rotate(4deg); }
.hp-fmt:not(.off):hover .hpf-side.a .hpf-b { transform: translateX(10%) rotate(-8deg); }
.hp-fmt:not(.off):hover .hpf-side.b .hpf-b { transform: translateX(-10%) rotate(8deg); }
/* (le « VS » : un éclat rouge, le mot en blanc cerné d'encre) */
.hpf-art em { position: relative; z-index: 3; top: 7%; flex: none; display: grid; place-items: center; width: calc(var(--u) * 11); aspect-ratio: 1; font: italic 800 max(18px, calc(var(--u) * 4.6))/1 var(--fc); color: #fff; text-shadow: var(--out3); transform: rotate(-8deg); }
.hpf-art em::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--ink); clip-path: polygon(50% 0, 61% 26%, 90% 12%, 76% 40%, 100% 52%, 74% 62%, 86% 90%, 58% 75%, 46% 100%, 38% 74%, 10% 88%, 24% 60%, 0 46%, 26% 38%, 14% 10%, 40% 24%); transform: translate(calc(var(--u) * 0.5), calc(var(--u) * 0.6)); }
.hpf-art em::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(#FF5C6E, #E0243F); clip-path: polygon(50% 0, 61% 26%, 90% 12%, 76% 40%, 100% 52%, 74% 62%, 86% 90%, 58% 75%, 46% 100%, 38% 74%, 10% 88%, 24% 60%, 0 46%, 26% 38%, 14% 10%, 40% 24%); }
.hp-fmt:not(.off):hover .hpf-art em { animation: hpfVs 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes hpfVs { 0% { transform: rotate(-8deg) scale(1); } 40% { transform: rotate(-14deg) scale(1.25); } 100% { transform: rotate(-8deg) scale(1); } }
.hpf-emb, .hpf-lau, .hpf-pod { display: none; }
/* (le bas de la carte : le format en grand, ce qu'il est en petit) */
.hpf-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(var(--u) * 0.4) calc(var(--u) * 1.4); padding: calc(var(--u) * 1.6) calc(var(--u) * 2.2) calc(var(--u) * 0.4); }
.hpf-t b { font: italic 800 calc(var(--u) * 6.4)/0.95 var(--fc); text-transform: uppercase; padding-right: 3px; white-space: nowrap; }
.hpf-t small { font: 700 max(12px, calc(var(--u) * 1.7))/1.2 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: rgba(21, 21, 21, 0.62); }
.hpf-rk { display: flex; align-items: center; gap: calc(var(--u) * 1.2); margin: calc(var(--u) * 0.6) calc(var(--u) * 2.2) 0; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.4); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 1.1); background: #F3EFE6; }
.hpf-rk[hidden] { display: none; }
.hpf-rk .rk-emb { width: calc(var(--u) * 5); height: calc(var(--u) * 5); min-width: 30px; min-height: 30px; }
.rkl-t { display: flex; flex-direction: column; gap: calc(var(--u) * 0.4); min-width: 0; }
.rkl-t b { font: italic 800 max(15px, calc(var(--u) * 2.5))/1 var(--fc); text-transform: uppercase; white-space: nowrap; }
.rkl-t small { font: 700 max(12px, calc(var(--u) * 1.7))/1 var(--fc); letter-spacing: 0.8px; }
.hpf-why { min-height: calc(var(--u) * 2.2); padding: calc(var(--u) * 0.8) calc(var(--u) * 2.2) calc(var(--u) * 1.6); font: 700 max(12px, calc(var(--u) * 1.6))/1.1 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: #C62A1F; }
.hpf-why:empty { min-height: 0; padding-bottom: calc(var(--u) * 1.6); }
.hp-fmt.off { cursor: not-allowed; box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); transform: none; }
.hp-fmt.off .hpf-art, .hp-fmt.off .hpf-t, .hp-fmt.off .hpf-rk { filter: grayscale(1); opacity: 0.5; }

/* RANKED (Max : « l'aspect compétitif, l'aspect trophée : t'es le gagnant ») : la nuit, un faisceau de lumière, ton
   emblème dans ce format au centre de sa couronne de laurier d'or, ta balle (et ton coéquipier) sur la plus haute marche
   du podium ; en bas, le format en or, ton rang à sa couleur et ton Elo comme sur un tableau de score */
.bd-hub[data-tab="rk"] .hp-fmt { background: #0E0A20; color: #fff; box-shadow: inset 0 0 0 calc(var(--u) * 0.5) #0E0A20, inset 0 0 0 calc(var(--u) * 0.8) #C99A2E, calc(var(--u) * 0.8) calc(var(--u) * 0.8) 0 var(--ink); }
.bd-hub[data-tab="rk"] .hp-fmt:hover { box-shadow: inset 0 0 0 calc(var(--u) * 0.5) #0E0A20, inset 0 0 0 calc(var(--u) * 0.8) #FFE27A, calc(var(--u) * 1.1) calc(var(--u) * 1.3) 0 var(--ink); }
.bd-hub[data-tab="rk"] .hpf-art {
  border-bottom-color: #C99A2E;
  background:
    radial-gradient(ellipse 34% 40% at 50% 34%, color-mix(in srgb, var(--t1) 55%, transparent), transparent 72%),
    conic-gradient(from 180deg at 50% -6%, transparent 0 152deg, rgba(255, 236, 160, 0.3) 166deg, rgba(255, 236, 160, 0.08) 180deg, rgba(255, 236, 160, 0.3) 194deg, transparent 208deg),
    repeating-conic-gradient(from 0deg at 50% 34%, color-mix(in srgb, var(--t1) 14%, transparent) 0 5deg, transparent 5deg 13deg),
    linear-gradient(175deg, color-mix(in srgb, var(--t2) 70%, #3A2C74), #150F33 60%, #0A0718);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.5) #0E0A20;
}
.bd-hub[data-tab="rk"] .hpf-art::before { -webkit-mask: none; mask: none; background:
    radial-gradient(circle, #FFE27A 0 calc(var(--u) * 0.25), transparent calc(var(--u) * 0.32)) 14% 20% / calc(var(--u) * 3) calc(var(--u) * 3) no-repeat,
    radial-gradient(circle, #fff 0 calc(var(--u) * 0.2), transparent calc(var(--u) * 0.28)) 84% 16% / calc(var(--u) * 3) calc(var(--u) * 3) no-repeat,
    radial-gradient(circle, #FFE27A 0 calc(var(--u) * 0.3), transparent calc(var(--u) * 0.38)) 78% 46% / calc(var(--u) * 3) calc(var(--u) * 3) no-repeat,
    radial-gradient(circle, #fff 0 calc(var(--u) * 0.2), transparent calc(var(--u) * 0.28)) 20% 52% / calc(var(--u) * 3) calc(var(--u) * 3) no-repeat,
    radial-gradient(circle, #FFE27A 0 calc(var(--u) * 0.2), transparent calc(var(--u) * 0.28)) 30% 8% / calc(var(--u) * 3) calc(var(--u) * 3) no-repeat; }
.bd-hub[data-tab="rk"] .hpf-art::after { display: none; }
.bd-hub[data-tab="rk"] .hpf-fx { display: none; }
.bd-hub[data-tab="rk"] .hpf-lau { display: block; position: absolute; z-index: 1; left: 50%; top: 29%; height: min(56%, calc(var(--u) * 25)); aspect-ratio: 200 / 142; transform: translate(-50%, -47%); filter: drop-shadow(calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 rgba(0, 0, 0, 0.4)); }
.bd-hub[data-tab="rk"] .hpf-emb { display: block; position: absolute; z-index: 2; left: 50%; top: 28%; height: min(38%, calc(var(--u) * 17)); aspect-ratio: 1; transform: translate(-50%, -50%); transition: transform 0.22s cubic-bezier(0.2, 1.4, 0.4, 1); }
.bd-hub[data-tab="rk"] .hpf-emb .rk-emb { width: 100%; height: 100%; filter: drop-shadow(calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 #151515) drop-shadow(0 0 calc(var(--u) * 2.4) color-mix(in srgb, var(--t1) 70%, transparent)); }
.bd-hub[data-tab="rk"] .hpf-emb img.rk-emb.rk-vrai { filter: drop-shadow(0 0 calc(var(--u) * 2.2) color-mix(in srgb, var(--t1) 65%, transparent)); }
.bd-hub[data-tab="rk"] .hpf-art em, .bd-hub[data-tab="rk"] .hpf-side.b { display: none; }
.bd-hub[data-tab="rk"] .hpf-side.a { position: absolute; top: auto; left: 0; right: 0; bottom: 18.2%; height: 26%; justify-content: center; padding: 0; gap: 2%; z-index: 3; }
.bd-hub[data-tab="rk"] .hpf-b, .bd-hub[data-tab="rk"] .hp-fmt[data-fmt="2v2"] .hpf-b { height: 100%; margin: 0; transform: none; }
.bd-hub[data-tab="rk"] .hpf-b::after { display: none; }
.bd-hub[data-tab="rk"] .hp-fmt:not(.off):hover .hpf-b { transform: translateY(-6%); }
.bd-hub[data-tab="rk"] .hp-fmt:not(.off):hover .hpf-emb { transform: translate(-50%, -50%) scale(1.07); }
/* (LE PODIUM : trois marches posées sur le bas de la scène — la plus haute, en or, porte ta balle et son « 1 » en grand ;
   l'argent « 2 » et le bronze « 3 », plus bas, de chaque côté : on lit « le gagnant » sans lire) */
.bd-hub[data-tab="rk"] .hpf-pod { --pw: 0.78; display: grid; place-items: center; position: absolute; z-index: 2; left: 50%; bottom: calc(var(--u) * -0.5); width: min(28%, calc(var(--u) * 17)); height: 21%; transform: translateX(-50%); box-sizing: border-box;
  border: calc(var(--u) * 0.45) solid var(--ink); border-bottom: 0; border-radius: calc(var(--u) * 0.8) calc(var(--u) * 0.8) 0 0;
  background: linear-gradient(to bottom, #FFF3B8 0 17%, #151515 17% calc(17% + var(--u) * 0.3), #FFD23F calc(17% + var(--u) * 0.3) 58%, #E9A928 58%); box-shadow: inset calc(var(--u) * -1) 0 0 rgba(140, 80, 0, 0.28), inset calc(var(--u) * 0.6) 0 0 rgba(255, 255, 255, 0.35), 0 0 calc(var(--u) * 3) color-mix(in srgb, var(--t1) 45%, transparent); }
.bd-hub[data-tab="rk"] .hp-fmt[data-fmt="2v2"] .hpf-pod { --pw: 0.6; width: min(46%, calc(var(--u) * 28)); }
.bd-hub[data-tab="rk"] .hpf-pod::before, .bd-hub[data-tab="rk"] .hpf-pod::after { content: '2'; position: absolute; z-index: -1; bottom: 0; right: calc(100% - var(--u) * 0.45); width: calc(100% * var(--pw)); height: 62%; display: grid; place-items: center; box-sizing: border-box; padding-top: calc(var(--u) * 0.5);
  border: calc(var(--u) * 0.45) solid var(--ink); border-bottom: 0; border-radius: calc(var(--u) * 0.7) 0 0 0;
  background: linear-gradient(to bottom, #F4F7FB 0 22%, #151515 22% calc(22% + var(--u) * 0.3), #C3CCD8 calc(22% + var(--u) * 0.3) 64%, #98A3B3 64%);
  font: italic 800 calc(var(--u) * 2.8)/1 var(--fc); color: #4A5363; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7); }
.bd-hub[data-tab="rk"] .hpf-pod::after { content: '3'; right: auto; left: calc(100% - var(--u) * 0.45); height: 50%; border-radius: 0 calc(var(--u) * 0.7) 0 0;
  background: linear-gradient(to bottom, #FFD2A8 0 24%, #151515 24% calc(24% + var(--u) * 0.3), #D9894A calc(24% + var(--u) * 0.3) 66%, #A9612C 66%); color: #5A2C0C; text-shadow: 1px 1px 0 rgba(255, 220, 190, 0.7); }
/* (le « 1 » au milieu de la face avant de la marche, sous son dessus clair) */
.hpf-pod i { position: absolute; left: 0; right: 0; top: 17%; bottom: 0; display: grid; place-items: center; font: italic 800 calc(var(--u) * 5.4)/1 var(--fc); font-style: italic; color: #7A4A00; text-shadow: calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0 #FFF6CF; }
/* (les confettis de la carte 2 VS 2 : les mêmes, retournés — jamais deux cartes identiques) */
.hp-fmt[data-fmt="2v2"] .hpf-fx { scale: -1 1; }
.bd-hub[data-tab="rk"] .hpf-t { background: transparent; padding-top: calc(var(--u) * 1.4); }
.bd-hub[data-tab="rk"] .hpf-t b { color: #FFD23F; text-shadow: var(--out3), calc(var(--u) * 0.3) calc(var(--u) * 0.4) 0 var(--ink); }
.bd-hub[data-tab="rk"] .hpf-t small { color: rgba(255, 255, 255, 0.72); }
.bd-hub[data-tab="rk"] .hpf-rk { background: rgba(0, 0, 0, 0.35); border-color: color-mix(in srgb, var(--t1) 70%, #000); color: #fff; box-shadow: inset 0 0 calc(var(--u) * 2) color-mix(in srgb, var(--t1) 18%, transparent); }
.bd-hub[data-tab="rk"] .hpf-rk .rk-emb { display: none; }
.bd-hub[data-tab="rk"] .hpf-rk .rkl-t { flex: 1; flex-direction: row; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1); }
.bd-hub[data-tab="rk"] .hpf-rk .rkl-t b { color: var(--t1); font-size: max(16px, calc(var(--u) * 3)); text-shadow: var(--out); }
.bd-hub[data-tab="rk"] .hpf-rk .rkl-t small { font: italic 800 max(15px, calc(var(--u) * 2.8))/1 var(--fc); letter-spacing: 0.5px; color: #fff; text-shadow: var(--out); }
.bd-hub[data-tab="rk"] .hpf-why { color: #FF8A8E; }
/* les pastilles du placement */
.rk-dots { display: inline-flex; gap: max(3px, calc(var(--u) * 0.4)); }
.rk-dots i { width: max(8px, calc(var(--u) * 1.1)); height: max(8px, calc(var(--u) * 1.1)); box-sizing: border-box; border: 2px solid var(--ink); border-radius: 50%; background: #fff; }
.rk-dots i.on { background: var(--gold); }
/* l'emblème : trait d'encre et ombre décalée sans flou */
.rk-emb { display: block; overflow: visible; filter: drop-shadow(3px 3px 0 #151515); }
/* les vrais emblèmes ont déjà leur contour et leur ombre (ou leur noir, en haut de l'échelle) : pas d'ombre en plus */
img.rk-emb.rk-vrai { filter: none; object-fit: contain; -webkit-user-drag: none; user-select: none; }

/* L'ÉCHELLE DES RANGS (Ranked) : sous les cartes, chaque rang avec son emblème et son nom, de plus en plus grands ; le seuil
   des rangs propres au jeu (Hellborn, Hatred) marqué d'un trait de feu ; un appui ouvre « Tous les rangs » */
.hp-ladder { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 2); min-width: 0; box-sizing: border-box; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.4) calc(var(--u) * 0.8) calc(var(--u) * 2.2);
  border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.6); background: linear-gradient(to bottom, rgba(10, 7, 26, 0.75), rgba(4, 3, 12, 0.85)); color: #fff; cursor: pointer; text-align: left;
  box-shadow: inset 0 0 0 calc(var(--u) * 0.3) rgba(233, 185, 73, 0.55), calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 var(--ink); transition: transform 0.12s ease; }
.hp-ladder[hidden] { display: none; }
.hp-ladder:hover { transform: translateY(calc(var(--u) * -0.3)); }
.hpl-k { flex: none; font: italic 800 max(13px, calc(var(--u) * 2))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: #FFD23F; writing-mode: vertical-rl; transform: rotate(180deg); }
.hpl-row { flex: 1; min-width: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 0.6); }
.hpl-step { flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.2); min-width: 0; }
.hpl-step .rk-emb { width: calc(var(--u) * var(--es, 6)); height: calc(var(--u) * var(--es, 6)); filter: drop-shadow(0 0 calc(var(--u) * 0.8) color-mix(in srgb, var(--t1) 45%, transparent)); }
.hpl-step b { font: italic 800 max(12px, calc(var(--u) * 1.7))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; color: var(--t1); text-shadow: var(--out); padding: 0 2px 2px 0; white-space: nowrap; }
.hpl-step[data-rk="bronze"] { --es: 5.2; } .hpl-step[data-rk="silver"] { --es: 5.6; } .hpl-step[data-rk="gold"] { --es: 6; }
.hpl-step[data-rk="platinum"] { --es: 6.4; } .hpl-step[data-rk="diamond"] { --es: 6.8; } .hpl-step[data-rk="elite"] { --es: 7.4; } .hpl-step[data-rk="top"] { --es: 8; }
.hpl-sep { flex: 1 1 0; min-width: calc(var(--u) * 0.8); max-width: calc(var(--u) * 4); align-self: center; height: calc(var(--u) * 0.5); margin-bottom: calc(var(--u) * 2); border-radius: 99px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 calc(var(--u) * 0.6), transparent calc(var(--u) * 0.6) calc(var(--u) * 1.2)); }
.hpl-seuil { flex: none; align-self: stretch; width: calc(var(--u) * 0.5); margin: 0 calc(var(--u) * 0.6); border-radius: 99px; background: linear-gradient(to bottom, transparent, #FF7A1A 20%, #FF3B30 60%, transparent); box-shadow: 0 0 calc(var(--u) * 1.2) #FF5A1F; }
.hpl-go { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.6); min-height: 44px; box-sizing: border-box; padding: 0 calc(var(--u) * 1.6); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1); background: linear-gradient(#FFE27A, #E9A928); color: var(--ink); font: italic 800 max(14px, calc(var(--u) * 2))/1 var(--fc); text-transform: uppercase; box-shadow: calc(var(--u) * 0.35) calc(var(--u) * 0.35) 0 var(--ink); white-space: nowrap; }
.hpl-go i { font-style: normal; font-size: 1.3em; }

/* la battle royale : la zone (deux anneaux en pointillés qui se resserrent) et des balles du jeu qui s'y battent */
.hpb-card { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2); overflow: hidden; isolation: isolate;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) calc(var(--u) * 0.18), transparent calc(var(--u) * 0.22)) 0 0 / calc(var(--u) * 1.6) calc(var(--u) * 1.6),
    radial-gradient(ellipse 60% 70% at 50% 42%, #D7B5FF, #8E44E8 58%, #3A1470); box-shadow: calc(var(--u) * 0.8) calc(var(--u) * 0.8) 0 var(--ink); color: #fff; }
.hpb-art { position: absolute; inset: 0; z-index: -1; }
.hpb-zone { position: absolute; left: 50%; top: 44%; height: 84%; aspect-ratio: 1; transform: translate(-50%, -50%); border: calc(var(--u) * 0.7) dashed rgba(255, 255, 255, 0.85); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 70%); box-shadow: 0 0 0 100vmax rgba(48, 10, 90, 0.38); animation: hpbZone 9s ease-in-out infinite; }
@keyframes hpbZone { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(0.94); } }
.hpb-zone.z2 { height: 48%; border-style: solid; border-color: rgba(255, 255, 255, 0.5); border-width: calc(var(--u) * 0.4); background: none; box-shadow: none; animation: none; }
.hpb-art .hpf-b { position: absolute; height: min(24%, calc(var(--u) * 13)); transform: translate(-50%, -50%); }
.hpb-art .hpf-b:nth-of-type(1) { left: 26%; top: 30%; }
.hpb-art .hpf-b:nth-of-type(2) { left: 72%; top: 24%; }
.hpb-art .hpf-b:nth-of-type(3) { left: 50%; top: 46%; height: min(32%, calc(var(--u) * 17)); }
.hpb-art .hpf-b:nth-of-type(4) { left: 30%; top: 64%; }
.hpb-art .hpf-b:nth-of-type(5) { left: 74%; top: 58%; }
.hpb-txt { position: relative; margin: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 2) calc(var(--u) * 2.6) calc(var(--u) * 2.2); background: linear-gradient(to top, rgba(28, 8, 56, 0.88), rgba(28, 8, 56, 0)); }
.hpb-txt b { font: italic 800 calc(var(--u) * 5.6)/0.95 var(--fc); text-transform: uppercase; text-shadow: var(--out3), calc(var(--u) * 0.35) calc(var(--u) * 0.45) 0 var(--ink); padding-right: 3px; }
.hpb-txt span { font: 700 max(13px, calc(var(--u) * 2))/1.3 var(--fb); text-shadow: 0 2px 0 rgba(21, 21, 21, 0.5); max-width: 60ch; }
.hpb-row { display: flex; align-items: center; gap: calc(var(--u) * 2); flex-wrap: wrap; }
.hpb-note { flex: 1; min-width: 0; font: 700 max(12px, calc(var(--u) * 1.7))/1.2 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.hpb-row .hub-go { margin-left: auto; min-width: calc(var(--u) * 26); }

/* les parties perso : trois cartes blanches sur la scène bleue */
.hpp-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2.4); }
.hpp-card { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 2.2); box-sizing: border-box; border: calc(var(--u) * 0.45) solid var(--ink); border-radius: calc(var(--u) * 1.8); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.7) calc(var(--u) * 0.7) 0 var(--ink); overflow: hidden; }
.hpp-card > b { font: italic 800 calc(var(--u) * 3.6)/1 var(--fc); text-transform: uppercase; padding-right: 3px; }
.hpp-card > p { flex: none; margin: 0; font: 600 max(12px, calc(var(--u) * 1.75))/1.35 var(--fb); color: rgba(21, 21, 21, 0.7); }
.hpp-art { display: grid; place-items: center; flex: 1; min-height: 0; margin: calc(var(--u) * -2.2) calc(var(--u) * -2.2) calc(var(--u) * 0.6); padding: calc(var(--u) * 1.6); border-bottom: calc(var(--u) * 0.45) solid var(--ink);
  background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255, 255, 255, 0.18) 0 6deg, transparent 6deg 15deg), radial-gradient(circle at 50% 50%, #B8DCFF, #2D8CFF 75%); }
.hpp-card:nth-child(2) .hpp-art { background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255, 255, 255, 0.18) 0 6deg, transparent 6deg 15deg), radial-gradient(circle at 50% 50%, #A8F5E8, #12A99C 75%); }
.hpp-card:nth-child(3) .hpp-art { background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255, 255, 255, 0.18) 0 6deg, transparent 6deg 15deg), radial-gradient(circle at 50% 50%, #DCC6FF, #6B4FD8 75%); }
.hpp-art svg { width: min(100%, calc(var(--u) * 30)); max-height: 100%; overflow: visible; filter: drop-shadow(calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 #151515); transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1); }
.hpp-card:hover .hpp-art svg { transform: scale(1.06) rotate(-2deg); }
.hpp-join { display: flex; gap: calc(var(--u) * 1); min-width: 0; }
.hpp-join input { flex: 1; min-width: 0; width: 0; min-height: 44px; box-sizing: border-box; padding: 0 calc(var(--u) * 1.2); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1); background: #fff; color: var(--ink); font: italic 800 max(18px, calc(var(--u) * 2.8))/1 var(--fc); letter-spacing: 3px; text-transform: uppercase; outline: none; }
.hpp-join input:focus { box-shadow: 0 0 0 3px var(--gold); }
#hub #goCreate { font: italic 800 max(16px, calc(var(--u) * 2.6))/1 var(--fc); padding: calc(var(--u) * 1) calc(var(--u) * 2) calc(var(--u) * 1.2); text-transform: uppercase; }
#hub #goJoin, #hub #goRooms { margin: 0; }
.hpp-off .hpp-card { color: var(--ink); }

/* ═══ LE LOBBY : comme le salon classé de Brawlhalla — toi sur ton socle à gauche, ton coéquipier à droite, le grand
   panneau de rang au milieu, « Prêt » en bas à droite. Le même dessin sert à un salon nombreux (data-layout="many"). ═══ */
.hub-lobby {
  position: relative; z-index: 1; min-height: 0; display: grid; column-gap: calc(var(--u) * 4); row-gap: calc(var(--u) * 2);
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--u) * 94)); grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "p1 plate" "foot go";
}
.hub-lobby[data-layout="duo"] { grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--u) * 82)) minmax(0, 1fr); grid-template-areas: "p1 plate p2" "foot foot go"; }
.hub-lobby[data-layout="many"] { grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--u) * 50)); grid-template-areas: "players plate" "foot go"; }
.hub-lobby:not([data-layout="many"]) .hl-players { display: contents; }
.hub-lobby:not([data-layout="many"]) .hl-p:nth-child(1) { grid-area: p1; }
.hub-lobby:not([data-layout="many"]) .hl-p:nth-child(2) { grid-area: p2; }
.hub-lobby[data-layout="many"] .hl-players { grid-area: players; }
.hl-plate, .hl-std { grid-area: plate; align-self: center; }
.hl-foot { grid-area: foot; display: flex; align-items: center; gap: calc(var(--u) * 2); min-width: 0; }
.hl-go { grid-area: go; align-self: end; display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 1); }
.hub-lobby.in .hl-p { animation: hlIn 0.36s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.hub-lobby.in .hl-p:nth-child(2) { animation-delay: 0.07s; }
/* (« backwards » : une fois l'entrée finie, le panneau n'est plus un calque à part — son éclaboussure repasse derrière lui) */
.hub-lobby.in .hl-plate, .hub-lobby.in .hl-std { animation: hlPlate 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) 0.08s backwards; }
@keyframes hlIn { from { transform: translateY(calc(var(--u) * 3)) scale(0.94); opacity: 0; } }
@keyframes hlPlate { from { transform: scale(0.9); opacity: 0; } }
.hub-lobby > * { position: relative; z-index: 1; }
.hub-lobby > .hl-mark { position: absolute; z-index: 0; }
.hub-lobby > .hl-ready { position: absolute; z-index: 8; }
/* (le panneau n'est pas un calque à part : son éclaboussure passe DERRIÈRE lui, et ne déborde qu'autour) */
.hub-lobby > .hl-plate, .hub-lobby > .hl-std { z-index: auto; }
/* le nom de la file en très grand, derrière tout : on sait où on est sans lire */
.hl-mark { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-6deg); font: italic 800 calc(var(--u) * 28)/1 var(--fc); text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.07); -webkit-text-stroke: calc(var(--u) * 0.3) rgba(255, 255, 255, 0.06); white-space: nowrap; pointer-events: none; user-select: none; }
.bd-hub[data-rk] .hl-mark { color: color-mix(in srgb, var(--t1) 9%, transparent); -webkit-text-stroke-color: color-mix(in srgb, var(--t1) 14%, transparent); }
.hl-sub { min-width: 0; margin: 0; font: italic 800 max(13px, calc(var(--u) * 2.3))/1.15 var(--fc); letter-spacing: 1px; text-transform: uppercase; text-shadow: var(--out); }
.hl-players { --s: calc(var(--u) * 35); position: relative; }
/* UNE CARTE DE JOUEUR : sa balle en grand sur son socle, dans un faisceau de lumière (animée à sa façon), son nom, sa balle.
   Standard : la scène à la couleur de la file, la plaque claire. Ranked : la nuit de ton rang, la plaque sombre, le socle
   doré. */
.hl-p {
  --stage: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 62%), repeating-conic-gradient(from 0deg at 50% 40%, rgba(255, 255, 255, 0.13) 0 7deg, transparent 7deg 17deg), linear-gradient(to bottom, color-mix(in srgb, var(--fc-c) 85%, #fff), var(--fc-c));
  --np: var(--card);
  position: relative; justify-self: center; align-self: center; width: min(100%, calc(var(--s) * 1.5)); min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.6);
  box-sizing: border-box; padding: 0 0 calc(var(--u) * 1.8); border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2.2);
  background: linear-gradient(to bottom, transparent calc(var(--s) * 1.18), var(--np) calc(var(--s) * 1.18)), var(--stage);
  color: var(--ink); box-shadow: calc(var(--u) * 0.9) calc(var(--u) * 0.9) 0 var(--ink); cursor: pointer;
}
.bd-hub[data-rk] .hl-p { --stage: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--t1) 55%, transparent), transparent 62%), conic-gradient(from 180deg at 50% -4%, transparent 0 158deg, rgba(255, 255, 255, 0.16) 170deg, rgba(255, 255, 255, 0.04) 180deg, rgba(255, 255, 255, 0.16) 190deg, transparent 202deg), repeating-conic-gradient(from 0deg at 50% 42%, rgba(255, 255, 255, 0.05) 0 7deg, transparent 7deg 17deg), linear-gradient(to bottom, color-mix(in srgb, var(--t2) 70%, #3A3270), var(--t2) 70%, color-mix(in srgb, var(--t2) 50%, #000)); --np: #14112A; color: #fff; box-shadow: inset 0 0 0 calc(var(--u) * 0.3) color-mix(in srgb, var(--t1) 50%, transparent), calc(var(--u) * 0.9) calc(var(--u) * 0.9) 0 var(--ink); }
.hl-p::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--s) * 1.18); border-top: calc(var(--u) * 0.5) solid var(--ink); pointer-events: none; }
/* (le socle : un disque cerclé d'encre sous la balle — neutre, réservé plus tard aux podiums à débloquer ; doré en Ranked) */
/* (LE SOCLE : un vrai piédestal en volume — le dessus clair et sa lèvre d'encre, le flanc arrondi et ombré comme un cylindre ;
   blanc et couleur de la file en Standard, en or en Ranked. C'est la place des podiums à débloquer, plus tard) */
.hl-p::before { --top: #fff; --sd: color-mix(in srgb, var(--fc-c) 50%, #6E675A); --sm: color-mix(in srgb, var(--fc-c) 30%, #DCD6C8); --sl: #F6F3EC;
  content: ''; position: absolute; z-index: 0; left: 50%; top: calc(var(--s) * 0.8); width: calc(var(--s) * 0.92); height: calc(var(--s) * 0.33); transform: translateX(-50%); box-sizing: border-box;
  border: calc(var(--u) * 0.45) solid var(--ink); border-radius: 50% / 36%;
  background: radial-gradient(ellipse 50% 36% at 50% 31%, var(--top) 0 98%, transparent 100%), radial-gradient(ellipse 50% 36% at 50% 36%, var(--ink) 0 98%, transparent 100%),
    linear-gradient(to right, var(--sd), var(--sm) 20%, var(--sl) 46%, var(--sm) 72%, var(--sd));
  box-shadow: 0 calc(var(--u) * 0.8) 0 rgba(0, 0, 0, 0.28); }
.bd-hub[data-rk] .hl-p::before { --top: #FFF0A6; --sd: #9A6408; --sm: #E9A928; --sl: #FFE27A; }
.hl-p.mine { outline: calc(var(--u) * 0.5) solid var(--gold); outline-offset: calc(var(--u) * 0.35); }
/* (toutes les cartes d'une rangée ont la même hauteur : les balles sont à la même hauteur, comme sur des socles alignés) */
.hub-lobby:not([data-layout="many"]) .hl-p { height: calc(var(--s) * 1.18 + var(--u) * 21); }
.hl-ball { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: var(--s); height: var(--s); margin: calc(var(--s) * 0.12) 0 calc(var(--s) * 0.06); }
.hl-ball.hs-ball { cursor: pointer; transform-origin: 50% 92%; }
/* (au lobby à 1 ou 2, la balle se tient SUR son socle : un peu plus petite et plus haute, le flanc du socle se voit dessous) */
.hub-lobby:not([data-layout="many"]) .hl-ball { width: calc(var(--s) * 0.84); height: calc(var(--s) * 0.84); margin: calc(var(--s) * 0.05) 0 calc(var(--s) * 0.29); }
.hl-ball img:not(.hl-cercle) { width: 80%; height: 80%; border: calc(var(--u) * 0.35) solid var(--ink); border-radius: 50%; background: #fff; object-fit: cover; box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); }
.hl-name { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 0.6); max-width: calc(100% - var(--u) * 2); margin-top: calc(var(--u) * 0.6); font: italic 800 max(15px, calc(var(--u) * 3.2))/1 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.bd-hub[data-rk] .hl-name { text-shadow: var(--out); }
.hl-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 2px 2px 0; }
.hl-name .hs-crown { flex: none; width: 1em; height: 1em; }
.hl-name .cp-badge { flex: none; }
.hl-bn { max-width: calc(100% - var(--u) * 2); font: 700 max(12px, calc(var(--u) * 1.7))/1.1 var(--fc); letter-spacing: 1.2px; text-transform: uppercase; color: rgba(21, 21, 21, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-hub[data-rk] .hl-bn { color: var(--t3); opacity: 0.85; }
.hl-tag { position: absolute; z-index: 3; left: calc(var(--u) * 1.2); right: auto; width: max-content; top: calc(var(--u) * 1.2); padding: calc(var(--u) * 0.4) calc(var(--u) * 1) calc(var(--u) * 0.5); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 0.8); background: #fff; color: var(--ink); font: italic 800 max(12px, calc(var(--u) * 1.7))/1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; box-shadow: 2px 2px 0 var(--ink); transform: rotate(-3deg); }
.hl-tag.ok { background: #3DDC84; }
.hl-tag.wait { background: #FFB547; }
.hl-tag.bot { background: #C9C2B4; }
.hl-tag.me { background: var(--gold); }
/* (l'état d'un coéquipier, en grand en bas de sa carte : vert « Prêt ✓ », orange s'il choisit sa balle, en pointillés s'il
   n'est pas prêt) */
.hl-p.has-st > .hl-tag { display: none; }
.hl-st { position: relative; z-index: 1; margin: auto calc(var(--u) * 2) 0; align-self: stretch; display: grid; place-items: center; min-height: calc(var(--u) * 5.6); box-sizing: border-box; padding: calc(var(--u) * 0.6) calc(var(--u) * 1);
  border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.2); font: italic 800 max(15px, calc(var(--u) * 2.8))/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-st.ok { background: linear-gradient(#5BE596, #2FBF6E); color: var(--ink); }
.hl-st.wait { background: linear-gradient(#FFC870, #F59A1C); color: var(--ink); animation: hlSt 1.4s ease-in-out infinite; }
@keyframes hlSt { 50% { filter: brightness(1.12); } }
.hl-st.no { background: rgba(21, 21, 21, 0.06); color: rgba(21, 21, 21, 0.6); border-style: dashed; border-color: rgba(21, 21, 21, 0.45); box-shadow: none; }
.bd-hub[data-rk] .hl-st.no { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.45); }
.bd-hub.still .hl-st.wait { animation: none; }
.hl-pick { margin-top: calc(var(--u) * 0.8); font-size: max(13px, calc(var(--u) * 1.9)); }
.hl-p.away .hl-ball { filter: grayscale(1) brightness(0.85); opacity: 0.6; animation: none; }
/* la place du coéquipier auto (2 VS 2 seul) : en pointillés, avec « + Inviter un pote » */
.hl-p.auto { border-style: dashed; background: linear-gradient(to bottom, transparent calc(var(--s) * 1.18), rgba(251, 250, 247, 0.94) calc(var(--s) * 1.18)), rgba(255, 255, 255, 0.1); box-shadow: none; color: var(--ink); }
.bd-hub[data-rk] .hl-p.auto { background: linear-gradient(to bottom, transparent calc(var(--s) * 1.18), rgba(20, 17, 42, 0.92) calc(var(--s) * 1.18)), rgba(255, 255, 255, 0.06); color: #fff; box-shadow: none; }
.hl-p.auto::after { border-top-style: dashed; }
.bd-hub .hl-p.auto::before { background: rgba(255, 255, 255, 0.16); border-style: dashed; border-color: rgba(255, 255, 255, 0.7); box-shadow: none; }
.hl-q { display: grid; place-items: center; width: 74%; height: 74%; box-sizing: border-box; border: calc(var(--u) * 0.6) dashed rgba(255, 255, 255, 0.9); border-radius: 50%; background: rgba(255, 255, 255, 0.12); font: italic 800 calc(var(--s) * 0.42)/1 var(--fc); color: #fff; text-shadow: var(--out); animation: hlQ 2.4s ease-in-out infinite; }
@keyframes hlQ { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.hl-inv { margin-top: calc(var(--u) * 0.8); font-size: max(13px, calc(var(--u) * 1.9)); }
/* la bulle d'un message et l'émote, au-dessus de la balle */
.hl-p .hs-say { top: calc(var(--s) * 0.5); left: 56%; transform: translateY(-100%); }
.hl-p .hs-emo { left: 74%; top: calc(var(--s) * 0.3); }
/* un salon nombreux (jusqu'à 24, bots compris) : des cartes plus petites, en grille, toujours lisibles ; la grille défile
   si elle ne tient pas (jamais l'écran) */
.hub-lobby[data-layout="many"] .hl-players { --s: calc(var(--u) * 15); display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: calc(var(--u) * 2); min-height: 0; overflow-y: auto; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.4) calc(var(--u) * 1.4) calc(var(--u) * 0.8); }
/* (--cw : la largeur d'une carte de la grille ; .many et .lots la remplacent) */
.hl-players { --cw: calc(var(--s) * 1.45); }
.hub-lobby[data-layout="many"] .hl-p { width: var(--cw); flex: none; }
.hl-players.many { --s: calc(var(--u) * 10.5) !important; --cw: calc(var(--u) * 17); gap: calc(var(--u) * 1.6) !important; }
.hl-players.many .hl-p { width: var(--cw); padding-bottom: calc(var(--u) * 1.1); border-width: calc(var(--u) * 0.4); border-radius: calc(var(--u) * 1.4); box-shadow: calc(var(--u) * 0.5) calc(var(--u) * 0.5) 0 var(--ink);
  background: linear-gradient(to bottom, transparent calc(var(--s) * 1.43), var(--np) calc(var(--s) * 1.43)), var(--stage); }
.hl-players.many .hl-p::after { top: calc(var(--s) * 1.43); border-top-width: calc(var(--u) * 0.4); }
.hl-players.many .hl-p::before { display: none; }
.hl-players.many .hl-name { font-size: max(13px, calc(var(--u) * 2)); margin-top: calc(var(--u) * 0.3); }
.hl-players.many .hl-tag { left: 50%; top: calc(var(--u) * 0.6); transform: translateX(-50%); font-size: max(12px, calc(var(--u) * 1.4)); white-space: nowrap; }
.hl-players.many .hl-ball { margin: calc(var(--s) * 0.32) 0 calc(var(--s) * 0.08); }
.hl-players.lots { --s: calc(var(--u) * 7.5) !important; --cw: calc(var(--u) * 14.5); gap: calc(var(--u) * 1.2) !important; }
/* (de 5 à 8 joueurs : de plus grandes cartes, 4 par rangée — deux rangées pleines plutôt qu'une longue et une orpheline) */
.hl-players.many.mid { --s: calc(var(--u) * 14.6) !important; --cw: calc(var(--u) * 24); max-width: calc(var(--u) * 103.2); }
.hl-players.many.mid .hl-name { font-size: max(14px, calc(var(--u) * 2.7)); }
.hl-players.many.mid .hl-bn { font-size: max(12px, calc(var(--u) * 1.6)); }
.hl-players.lots .hl-bn { display: none; }

/* ─── LE GRAND PANNEAU DE RANG (Ranked) : la bannière du rang qui pend au-dessus du panneau, sur l'éclaboussure de sa
   couleur (Brawl Stars) ; le rang en lettres énormes à sa couleur ; VICTOIRES · ELO · MEILLEUR ELO (Brawlhalla) ; la marche
   suivante en divisions ; le bilan du jour et « Tous les rangs » ─── */
.hl-plate {
  --rk: #9AA3B2; position: relative; width: 100%; display: grid; grid-template-columns: calc(var(--u) * 27) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: calc(var(--u) * 3); row-gap: calc(var(--u) * 2.2);
  box-sizing: border-box; padding: calc(var(--u) * 2.8) calc(var(--u) * 3) calc(var(--u) * 2.4) calc(var(--u) * 2.6); border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2.4);
  background: radial-gradient(ellipse 60% 80% at 15% 30%, color-mix(in srgb, var(--t1) 22%, transparent), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 calc(var(--u) * 1), rgba(255, 255, 255, 0) calc(var(--u) * 1) calc(var(--u) * 2)), linear-gradient(165deg, color-mix(in srgb, var(--t2) 70%, #2A2450), #0D0A1E);
  color: #fff; box-shadow: inset 0 0 0 calc(var(--u) * 0.4) color-mix(in srgb, var(--t1) 65%, #000), calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--ink);
}
.hl-plate[hidden], .hl-std[hidden] { display: none; }
.hlp-splash { position: absolute; z-index: -1; left: calc(var(--u) * -9); top: calc(var(--u) * -12); width: calc(var(--u) * 40); height: calc(var(--u) * 40); color: var(--t1); fill: currentColor; opacity: 0.95; pointer-events: none; filter: drop-shadow(calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 rgba(0, 0, 0, 0.55)); animation: hlpSplash 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both 0.1s; }
@keyframes hlpSplash { from { transform: scale(0.4) rotate(-20deg); opacity: 0; } }
/* (la bannière : un fanion à la couleur profonde du rang, liseré de sa couleur vive, qui pend au-dessus du panneau ; l'emblème
   dedans, dans sa lueur) */
.hlp-ban { position: relative; z-index: 1; grid-row: 1 / 3; align-self: start; width: 100%; aspect-ratio: 100 / 150; margin-top: calc(var(--u) * -7.5); padding: 0; border: 0; background: none; cursor: pointer; transition: transform 0.16s cubic-bezier(0.2, 1.4, 0.4, 1); }
.hlp-ban:hover { transform: translateY(calc(var(--u) * -0.6)) rotate(-1deg); }
.hlp-flag { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 #151515); }
.hlp-flag path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hlp-flag .f0 { fill: color-mix(in srgb, var(--t2) 85%, var(--t1)); stroke: #151515; stroke-width: 5; }
.hlp-flag .f1 { fill: none; stroke: var(--t1); stroke-width: 3; opacity: 0.85; }
.hlp-flag .f2 { fill: var(--t1); stroke: #151515; stroke-width: 4; }
.hlp-emb { position: absolute; left: 50%; top: 45%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.hlp-emb::before { content: ''; position: absolute; z-index: -1; inset: -12%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--t1) 60%, transparent), transparent 66%); animation: hlpGlow 2.8s ease-in-out infinite alternate; }
@keyframes hlpGlow { from { transform: scale(0.9); opacity: 0.7; } to { transform: scale(1.06); opacity: 1; } }
.hlp-emb .rk-emb { width: 100%; height: 100%; }
/* (le texte du panneau au milieu de la hauteur de la bannière, qui pend plus bas que lui : pas de vide sous la marche) */
.hlp-box { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.2); align-self: center; }
.hlp-k { display: flex; align-items: center; gap: calc(var(--u) * 1); flex-wrap: wrap; font: 700 max(12px, calc(var(--u) * 2))/1.1 var(--fc); letter-spacing: 1.6px; text-transform: uppercase; color: color-mix(in srgb, var(--t3) 80%, #fff); }
.hlp-pos { padding: calc(var(--u) * 0.3) calc(var(--u) * 0.9) calc(var(--u) * 0.4); border: calc(var(--u) * 0.25) solid var(--ink); border-radius: 99px; background: var(--gold); color: var(--ink); font: italic 800 max(12px, calc(var(--u) * 1.7))/1 var(--fc); letter-spacing: 0.5px; font-style: italic; }
.hlp-pos[hidden] { display: none; }
.hlp-pos { display: inline-flex; align-items: center; gap: 0.25em; text-transform: none; }
.hlp-pos svg { width: 1.25em; height: 1.25em; margin: -0.2em 0; }
.hlp-pos b { font-weight: inherit; margin-right: -0.12em; }
.hlp-name { font: italic 800 calc(var(--u) * 9.4)/0.92 var(--fc); text-transform: uppercase; padding: 0 calc(var(--u) * 0.6) calc(var(--u) * 0.4) 0; color: var(--t1); text-shadow: var(--out3), calc(var(--u) * 0.5) calc(var(--u) * 0.6) 0 var(--ink); overflow-wrap: anywhere; letter-spacing: 0.5px; }
.hl-plate[data-rk="place"] .hlp-name { font-size: calc(var(--u) * 7.2); color: #fff; }
.hlp-stats { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: calc(var(--u) * 0.8); }
.hlp-stats > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 0.4); padding: calc(var(--u) * 1) calc(var(--u) * 0.4) calc(var(--u) * 1.1); min-width: 0; border: calc(var(--u) * 0.3) solid rgba(0, 0, 0, 0.6); border-radius: calc(var(--u) * 1.1); background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 calc(var(--u) * 0.2) rgba(255, 255, 255, 0.08); }
.hlp-stats small { font: 700 max(12px, calc(var(--u) * 1.7))/1 var(--fc); letter-spacing: 1.4px; text-transform: uppercase; color: color-mix(in srgb, var(--t3) 75%, #fff); white-space: nowrap; }
.hlp-stats b { font: italic 800 max(16px, calc(var(--u) * 4.9))/1 var(--fc); white-space: nowrap; text-shadow: var(--out); padding-right: 2px; }
.hlp-stats .hlp-elo { background: linear-gradient(to bottom, rgba(255, 210, 63, 0.2), rgba(0, 0, 0, 0.3)); border-color: #151515; box-shadow: inset 0 0 0 calc(var(--u) * 0.25) rgba(255, 210, 63, 0.55); }
.hlp-stats .hlp-elo b { font-size: max(18px, calc(var(--u) * 6.2)); color: #FFD23F; }
.hlp-prog { display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); min-width: 0; }
.hlp-bar { display: flex; align-items: center; gap: calc(var(--u) * 0.7); min-width: 0; }
.hlp-bar[hidden], .hlp-dots[hidden] { display: none; }
.hlp-bar .seg { position: relative; flex: 1; height: max(14px, calc(var(--u) * 2.6)); box-sizing: border-box; border: calc(var(--u) * 0.3) solid var(--ink); border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.hlp-bar .seg b { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--t1) 60%, #fff), var(--t1)); }
.hlp-bar .seg.on b { box-shadow: 0 0 calc(var(--u) * 1) var(--t1); }
.hlp-bar .seg em { position: absolute; inset: 0; display: grid; place-items: center; font: italic 800 max(12px, calc(var(--u) * 1.7))/1 var(--fc); font-style: italic; color: #fff; text-shadow: var(--out); letter-spacing: 1px; }
.hlp-bar .seg.top b { background: linear-gradient(90deg, var(--t1), var(--t3), var(--t1)); }
.hlp-bar .nx { flex: none; width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); margin: calc(var(--u) * -1.5) 0; }
.hlp-bar .nx .rk-emb { width: 100%; height: 100%; }
.hlp-dots .rk-dots i { width: max(12px, calc(var(--u) * 2)); height: max(12px, calc(var(--u) * 2)); border-width: calc(var(--u) * 0.3); }
.hlp-dots .rk-dots { gap: calc(var(--u) * 0.6); }
.hlp-next { font: 700 max(12px, calc(var(--u) * 2.1))/1.15 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; color: #FFE27A; }
.hlp-foot { grid-column: 1 / 3; display: flex; align-items: center; gap: calc(var(--u) * 1.6); min-width: 0; padding-top: calc(var(--u) * 1.6); border-top: calc(var(--u) * 0.25) dashed rgba(255, 255, 255, 0.2); }
.hlp-day { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: calc(var(--u) * 1.2); white-space: nowrap; }
.hlp-day small { font: 700 max(12px, calc(var(--u) * 1.5))/1 var(--fc); letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
.hlp-day b { font: italic 800 max(15px, calc(var(--u) * 3))/1 var(--fc); }
.hlp-day b.up { color: #5BE596; } .hlp-day b.down { color: #FF8A8E; }
.hlp-day i { font: italic 800 max(13px, calc(var(--u) * 2))/1 var(--fc); color: rgba(255, 255, 255, 0.8); }
.hlp-all { flex: none; }
/* (un panneau étroit — le 2 VS 2 et les petits téléphones — : le bilan du jour laisse toute la ligne à « Tous les rangs »,
   plutôt que d'être coupé par lui) */
.hl-plate { container: hlplate / inline-size; }
.hk-sh { display: none; }
@container hlplate (max-width: 289px) {
  .hlp-day { display: none; }
  .hlp-all { flex: 1; justify-content: center; }
  .hk-f, .hk-lg { display: none; }
  .hk-sh { display: inline; }
  .hlp-stats { grid-template-columns: 1fr 1.15fr 1fr; }
}
/* LE PANNEAU DU STANDARD (« léger et fun »), à la même place : une affiche — « Pour le fun », ce que promet le mode, et
   « Jouer en Ranked » pour qui veut de la compétition */
.hl-std { position: relative; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 1.8); box-sizing: border-box; padding: calc(var(--u) * 3.6) calc(var(--u) * 3.4) calc(var(--u) * 3.2);
  border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2.4); color: #fff; box-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--ink);
  background: repeating-conic-gradient(from 0deg at 85% 10%, rgba(255, 255, 255, 0.12) 0 6deg, transparent 6deg 15deg), radial-gradient(ellipse 80% 90% at 85% 10%, #8CF5BE, #1FB873 55%, #0B7A4F); }
/* (l'éclaboussure jaune : DANS le coin du panneau, coupée par son bord — elle ne déborde jamais sur la carte d'un coéquipier) */
.hl-std { overflow: hidden; isolation: isolate; }
.hl-std .hlp-splash { left: auto; right: calc(var(--u) * -9); top: calc(var(--u) * -11); width: calc(var(--u) * 32); height: calc(var(--u) * 32); color: #FFD23F; z-index: -1; opacity: 0.9; filter: none; }
.hls-emb[hidden] { display: none; }
.hls-t { display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); }
.hls-t small { align-self: flex-start; padding: calc(var(--u) * 0.5) calc(var(--u) * 1.2) calc(var(--u) * 0.6); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 0.8); background: var(--ink); color: #8CF5BE; font: italic 800 max(12px, calc(var(--u) * 1.7))/1 var(--fc); letter-spacing: 1.2px; text-transform: uppercase; transform: rotate(-3deg); }
.hls-t b { font: italic 800 calc(var(--u) * 9.4)/0.92 var(--fc); text-transform: uppercase; color: #fff; text-shadow: var(--out3), calc(var(--u) * 0.5) calc(var(--u) * 0.6) 0 var(--ink); padding: 0 calc(var(--u) * 0.6) calc(var(--u) * 0.4) 0; }
.hls-t span { font: 700 max(13px, calc(var(--u) * 2.1))/1.2 var(--fc); letter-spacing: 1px; text-transform: uppercase; text-shadow: var(--out); }
.hls-chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1); margin: 0; padding: 0; list-style: none; }
.hls-chips li { padding: calc(var(--u) * 0.7) calc(var(--u) * 1.4) calc(var(--u) * 0.8); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: 99px; background: var(--card); color: var(--ink); font: italic 800 max(13px, calc(var(--u) * 1.9))/1 var(--fc); text-transform: uppercase; box-shadow: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0 var(--ink); }
.hls-chips li:nth-child(2) { background: #FFD23F; } .hls-chips li:nth-child(3) { background: #8EC5FF; }
.hls-rk { align-self: stretch; background: linear-gradient(#3A1622, #1A0A12); color: #FFE27A; border-color: var(--ink); }
.hls-rk:hover { background: linear-gradient(#4E1C2D, #24101A); }
.hls-rk svg { width: 1.5em; height: 1.5em; }
/* le rang de chaque joueur (Ranked) : un ruban posé sur le bord de sa carte, sous sa balle */
.hl-rk { position: absolute; z-index: 2; left: 50%; top: calc(var(--s) * 1.18); transform: translate(-50%, -50%); display: flex; align-items: center; gap: calc(var(--u) * 0.6); max-width: calc(100% - var(--u) * 2); box-sizing: border-box; padding: calc(var(--u) * 0.4) calc(var(--u) * 1.3) calc(var(--u) * 0.4) calc(var(--u) * 0.6); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 1); background: #1D1838; color: #fff; box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
.hl-rk .rk-emb { flex: none; width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); min-width: 20px; min-height: 20px; filter: drop-shadow(1px 1px 0 #151515); }
.hl-rk b { min-width: 0; font: italic 800 max(12px, calc(var(--u) * 1.9))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; padding-right: 2px; }
.hl-rk ~ .hl-name { margin-top: calc(var(--u) * 2.8); }
/* « PRÊT AU COMBAT ! » en travers du lobby, un instant */
.hl-ready { position: absolute; z-index: 8; left: -6%; right: -6%; top: 38%; display: grid; place-items: center; height: calc(var(--u) * 11); transform: rotate(-4deg); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 calc(var(--u) * 1.2), rgba(255, 255, 255, 0) calc(var(--u) * 1.2) calc(var(--u) * 2.4)), var(--gold); border-top: calc(var(--u) * 0.6) solid var(--ink); border-bottom: calc(var(--u) * 0.6) solid var(--ink); pointer-events: none; }
.hl-ready[hidden] { display: none; }
.hl-ready b { font: italic 800 calc(var(--u) * 7.4)/1 var(--fc); text-transform: uppercase; letter-spacing: 2px; color: #fff; text-shadow: var(--out), calc(var(--u) * 0.4) calc(var(--u) * 0.5) 0 var(--ink); }
.hl-ready.go { animation: hlReady 1.3s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.hl-ready.go b { animation: hlReadyT 1.3s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes hlReady { 0% { transform: rotate(-4deg) scaleY(0); opacity: 0; } 14% { transform: rotate(-4deg) scaleY(1); opacity: 1; } 80% { transform: rotate(-4deg) scaleY(1); opacity: 1; } 100% { transform: rotate(-4deg) scaleY(0.6); opacity: 0; } }
@keyframes hlReadyT { 0%, 8% { transform: translateX(-60%); opacity: 0; } 24% { transform: translateX(0); opacity: 1; } 82% { transform: translateX(4%); opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hl-ready.go, .hl-ready.go b { animation: hlFade 1.3s both; } @keyframes hlFade { 0%, 100% { opacity: 0; } 20%, 80% { opacity: 1; } } }
.hl-state { margin: 0; font: italic 800 max(13px, calc(var(--u) * 2))/1.15 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; text-shadow: var(--out); text-align: right; }
.hl-state[hidden] { display: none; }
/* (« Prêt » : le gros bouton d'or, un reflet passe dessus) */
.hub-go-l { min-height: calc(var(--u) * 12); min-width: calc(var(--u) * 34); }
.hub-go-l b { font-size: calc(var(--u) * 6.8); }
.hub-go-l small { font-size: max(12px, calc(var(--u) * 1.8)); }
.hub-go-l::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 47%, transparent 56%) no-repeat; background-size: 260% 100%; background-position: 160% 0; animation: hubShine 3.6s ease-in-out infinite; }
.hub-go-l.on::after { display: none; }
/* le chat du groupe, en bas à gauche du lobby */
.hl-chat { position: relative; flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 0.8); min-height: 44px; height: calc(var(--u) * 6); box-sizing: border-box; padding: 0 calc(var(--u) * 1.8) 0 calc(var(--u) * 1); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.2); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); cursor: pointer; }
.hl-chat svg { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); min-width: 26px; min-height: 26px; }
.hl-chat b { font: italic 800 max(14px, calc(var(--u) * 2.2))/1 var(--fc); text-transform: uppercase; }
.hl-chat .hsd-n { top: -8px; right: -8px; }
/* la fenêtre du chat : par-dessus le lobby, depuis la droite */
.bd-hub .home-chat { z-index: 12; width: min(calc(var(--u) * 46), 48vw); padding-right: max(12px, var(--sa-r)); padding-bottom: max(8px, var(--sa-b)); }

/* ═══ LE SALON PERSO (#lobby.bd-salon) : le même lobby, en bleu ; à droite le salon, en bas à droite « Lancer la partie »
   (l'hôte) ou « Prêt » (les autres) ═══ */
body[data-screen="lobby"] .wm { display: none !important; }
body[data-screen="lobby"] { background: #100C2C; }
html:has(body[data-screen="lobby"]) { background: #100C2C; }
body.br[data-screen="lobby"] > .toast, html.touch body.br[data-screen="lobby"] > .toast { top: calc(var(--sa-t) + 74px); bottom: auto; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); text-align: center; }
.bd-salon .hub-q .hq-code { display: grid; place-items: center; padding: 0 calc(var(--u) * 1.8); border: 0; border-left: calc(var(--u) * 0.35) solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; font: italic 800 max(16px, calc(var(--u) * 2.8))/1 var(--fc); letter-spacing: 3px; }
.bd-salon .hub-q .hq-code:hover { background: #fff; }
.bd-salon .hub-q .hq-code.copied { background: #3DDC84; }
/* le panneau du salon (à la place de la plaque de rang) */
.hl-salon { grid-area: plate; align-self: center; width: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * 1.4); box-sizing: border-box; padding: calc(var(--u) * 3) calc(var(--u) * 2.6) calc(var(--u) * 2.4);
  border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2.2); color: #fff; box-shadow: inset 0 0 0 calc(var(--u) * 0.35) rgba(142, 197, 255, 0.55), calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--ink);
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(142, 197, 255, 0.3), transparent 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 calc(var(--u) * 1), transparent calc(var(--u) * 1) calc(var(--u) * 2)), linear-gradient(170deg, #1A4C9C, #0F2A5E 60%, #0A1C40); }
.hls-k { font: italic 800 max(14px, calc(var(--u) * 3.2))/1 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; color: #fff; text-shadow: var(--out), calc(var(--u) * 0.3) calc(var(--u) * 0.4) 0 var(--ink); }
.hls-hint { margin: 0; font: 600 max(12px, calc(var(--u) * 1.8))/1.35 var(--fb); color: rgba(255, 255, 255, 0.88); }
.hls-share { display: flex; gap: calc(var(--u) * 1); min-width: 0; }
.hls-share input { flex: 1; min-width: 0; width: 0; min-height: 44px; box-sizing: border-box; padding: 0 calc(var(--u) * 1.2); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.1); background: #fff; color: var(--ink); font: 600 max(12px, calc(var(--u) * 1.6)) var(--fb); }
.hls-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: calc(var(--u) * 1); align-items: center; min-height: 44px; box-sizing: border-box; padding: calc(var(--u) * 1) calc(var(--u) * 1.6); border: calc(var(--u) * 0.35) solid var(--ink); border-radius: calc(var(--u) * 1.2); background: #fff; color: var(--ink); box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); cursor: pointer; text-align: left; }
.hls-sum:hover { background: #F3F8FF; }
.hls-sum b { font: italic 800 max(15px, calc(var(--u) * 2.4))/1 var(--fc); text-transform: uppercase; }
.hls-sum span { grid-row: 2; font: 700 max(12px, calc(var(--u) * 1.6))/1.25 var(--fc); letter-spacing: 0.5px; text-transform: uppercase; color: rgba(21, 21, 21, 0.62); }
.hls-sum i { grid-row: 1 / 3; grid-column: 2; font: 800 max(22px, calc(var(--u) * 3.4))/1 var(--fc); font-style: normal; }
.hls-note { margin: 0; font: 600 max(12px, calc(var(--u) * 1.6))/1.3 var(--fb); color: rgba(255, 255, 255, 0.72); }
.hls-note:empty { display: none; }
.bd-salon .lobby-last { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.6); padding: 0; border: 0; background: none; box-shadow: none; }
.bd-salon .lobby-last[hidden] { display: none; }
.bd-salon .lobby-last > span:first-child { flex: 1 1 100%; font: 700 max(12px, calc(var(--u) * 1.6))/1 var(--fc); letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.bd-salon .lobby-last .pl { color: var(--ink); }
.bd-salon .lobby-last .pl { display: flex; flex-direction: column; gap: 1px; padding: calc(var(--u) * 0.5) calc(var(--u) * 1) calc(var(--u) * 0.6); border: calc(var(--u) * 0.3) solid var(--ink); border-radius: calc(var(--u) * 0.8); background: #fff; }
.bd-salon .lobby-last .pl.p1 { background: var(--gold); }
.bd-salon .lobby-last .pl b { font: italic 800 max(13px, calc(var(--u) * 1.8))/1.1 var(--fc); text-transform: uppercase; }
.bd-salon .lobby-last .pl i { font: 600 max(12px, calc(var(--u) * 1.4))/1.1 var(--fb); font-style: normal; color: rgba(21, 21, 21, 0.65); }
/* les cartes du salon : une place libre, l'hôte qui exclut, les outils d'un bot */
.hl-p.free { border-style: dashed; background: linear-gradient(to bottom, transparent calc(var(--s) * 1.18), rgba(251, 250, 247, 0.92) calc(var(--s) * 1.18)), rgba(255, 255, 255, 0.08); box-shadow: none; cursor: default; }
.hl-players.many .hl-p.free { background: linear-gradient(to bottom, transparent calc(var(--s) * 1.43), rgba(251, 250, 247, 0.92) calc(var(--s) * 1.43)), rgba(255, 255, 255, 0.08); }
.hl-p.free::after { border-top-style: dashed; }
.hl-p.free::before { display: none; }
.hl-p.bot.pickable { cursor: pointer; }
.hl-p.bot.pickable:hover { transform: translateY(-2px); }
.hl-x { position: absolute; z-index: 4; top: calc(var(--u) * 0.8); right: calc(var(--u) * 0.8); display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: calc(var(--u) * 0.3) solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; font: 800 18px/1 var(--fc); }
.hl-x:hover { background: #FFE3DF; }
.hl-bt { position: absolute; z-index: 4; top: calc(var(--u) * 0.8); right: calc(var(--u) * 0.8); display: flex; gap: 4px; }
.hl-bt .hl-x { position: static; }
.hl-pick.locked { opacity: 0.55; }
/* (une équipe : un bloc — son nom et « Rejoindre » au-dessus, puis ses cartes —, qui ne se coupe pas d'une rangée à l'autre) */
.hl-players .hl-team { flex: none; display: grid; grid-template-columns: repeat(var(--k, 2), var(--cw)); align-content: start; gap: calc(var(--u) * 1.2); max-width: 100%; box-sizing: border-box; padding: calc(var(--u) * 1) calc(var(--u) * 1.2) calc(var(--u) * 1.4); border: calc(var(--u) * 0.3) dashed rgba(255, 255, 255, 0.45); border-radius: calc(var(--u) * 1.6); background: rgba(10, 20, 60, 0.22); }
.hl-players .hl-head { grid-column: 1 / -1; flex-wrap: wrap; display: flex; align-items: center; gap: calc(var(--u) * 1.2); min-width: 0; padding: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0; font: italic 800 max(14px, calc(var(--u) * 2.4))/1 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; color: #fff; text-shadow: var(--out); }
.hl-players .hl-head .hub-btn { min-height: 36px; padding: 2px 12px 4px; font-size: max(13px, calc(var(--u) * 1.8)); text-shadow: none; }
.hl-players .hl-tools { flex: 1 1 100%; display: flex; align-items: center; gap: calc(var(--u) * 1); flex-wrap: wrap; min-width: 0; padding: 0 calc(var(--u) * 0.4); }
.hl-players .hl-tools > span { margin-right: auto; font: italic 800 max(14px, calc(var(--u) * 2.2))/1 var(--fc); text-transform: uppercase; color: #fff; text-shadow: var(--out); }
.hl-players .hl-tools .hub-btn { min-height: 38px; padding: 2px 12px 4px; font-size: max(13px, calc(var(--u) * 1.8)); }
.hl-players.many .hl-x { width: 28px; height: 28px; font-size: 15px; top: 3px; right: 3px; }
.hl-players.many .hl-bt { top: 3px; right: 3px; gap: 3px; }
.hl-players.many .hl-pick { min-height: 30px; padding: 1px 8px 3px; font-size: max(12px, calc(var(--u) * 1.5)); margin-top: 2px; }
/* (dans un salon nombreux, « Changer » de ta carte devient un bouton rond dans son coin, comme le × des bots : ta carte a la
   même hauteur que les autres, et deux rangées de 4 tiennent sans défiler ; toute ta carte ouvre aussi le choix des balles) */
.hl-players.many .hl-p.mine .hl-pick { position: absolute; z-index: 4; top: calc(var(--s) * 1.43 - max(28px, calc(var(--u) * 3.4)) - calc(var(--u) * 0.6)); right: calc(var(--u) * 0.6); width: max(28px, calc(var(--u) * 3.4)); height: max(28px, calc(var(--u) * 3.4)); min-height: 0; margin: 0; padding: 0; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 10a7 7 0 0 1 12.2-3.6L19 8M19 3.6V8h-4.4M19 14a7 7 0 0 1-12.2 3.6L5 16M5 20.4V16h4.4' fill='none' stroke='%23151515' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 64% no-repeat; box-shadow: 2px 2px 0 var(--ink); }
.hl-players.many .hl-p.mine .hl-pick:hover { background-color: #FFF3B8; }
.hl-players.many .hl-p.mine .hl-pick .hl-pk { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hl-players.many .hl-p.free .hl-pick { font-size: max(12px, calc(var(--u) * 1.4)); }
.hl-players.many .hl-q { font-size: calc(var(--s) * 0.5); border-width: calc(var(--u) * 0.35); }
/* « Lancer la partie » (l'hôte) ou « Prêt » (les autres), en bas à droite ; les autres boutons au-dessus */
.bd-salon .hl-go > .hub-go, .bd-salon .hlg-ready.hub-go { font: italic 800 calc(var(--u) * 5.6)/1 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; }
.bd-salon .hl-go > .hub-go[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.bd-salon .hl-go > .hub-go::after { display: none; }
.hlg-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--u) * 1); }
.hlg-row > [hidden] { display: none; }
.hlg-row .hub-go-l { flex: 1 1 100%; }
.hlg-ready.hub-btn.on { background: #3DDC84; }
.hl-dice.locked { opacity: 0.5; }
#lobby #lobbyRandom { flex: none; width: auto; height: calc(var(--u) * 6); min-height: 44px; padding: 0 calc(var(--u) * 1.6); font-size: max(14px, calc(var(--u) * 2.1)); }
#lobby #lobbyRandom span { display: inline; white-space: nowrap; }
/* (le salon : l'écran a la hauteur de la fenêtre — une grille trop grande défile dedans, jamais la page) ; ses cartes partent
   de la gauche, sans carte orpheline au milieu */
.bd-salon { height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); }
#lobbyPlayers { justify-content: flex-start; align-content: flex-start; }
.hl-count { color: var(--gold); }
.hl-count.fast { color: #3DDC84; }
/* les options de la partie : un panneau par-dessus le salon (l'hôte les règle, les autres les voient) */
.sl-opts { display: none; position: absolute; z-index: 20; right: 0; top: 50%; transform: translateY(-50%); width: min(calc(var(--u) * 64), 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box;
  flex-direction: column; gap: calc(var(--u) * 1.2); padding: 0 calc(var(--u) * 2.4) calc(var(--u) * 2.2); border: calc(var(--u) * 0.5) solid var(--ink); border-radius: calc(var(--u) * 2); background: var(--card); color: var(--ink); box-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--ink); }
.sl-opts.open { display: flex; }
.sl-opts .lo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 calc(var(--u) * -2.4) calc(var(--u) * 0.6); padding: calc(var(--u) * 1) calc(var(--u) * 1.6) calc(var(--u) * 1) calc(var(--u) * 2.4); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0 10px, rgba(255, 255, 255, 0) 10px 20px), var(--c-pp); border-bottom: calc(var(--u) * 0.4) solid var(--ink); border-radius: calc(var(--u) * 1.5) calc(var(--u) * 1.5) 0 0; }
.sl-opts .lo-head h3 { margin: 0; font: italic 800 max(20px, calc(var(--u) * 3.2))/1 var(--fc); text-transform: uppercase; color: #fff; text-shadow: var(--out); }
.sl-opts .lo-head .icon-btn { width: 40px; height: 40px; font-size: 20px; }
.sl-opts .mode-row { gap: calc(var(--u) * 1.2); flex-wrap: nowrap; }
.sl-opts .mode-row > span { flex: none; min-width: calc(var(--u) * 9); font: 700 max(12px, calc(var(--u) * 1.6)) var(--fc); letter-spacing: 1.4px; }
.sl-opts .seg { flex-wrap: wrap; }
.sl-opts .seg button { height: 40px; padding: 0 calc(var(--u) * 1.4); font-size: max(14px, calc(var(--u) * 2)); }
.sl-opts .seg.off { opacity: 0.6; pointer-events: none; }
.sl-opts .map-btn { height: 48px; }
.sl-opts .lo-ok { align-self: flex-end; margin-top: calc(var(--u) * 0.4); }
/* le jeu hors ligne (la page ouverte comme fichier) : le solo et le serveur */
.hpp-off .hpp-solo .mode-row { flex-wrap: wrap; gap: 6px 10px; }
.hpp-off .seg button { height: 38px; padding: 0 10px; font-size: 15px; }
.hpp-off .map-btn { height: 44px; }
/* le nombre de joueurs en ligne, dans la barre de l'entrée (sur ordinateur) */
.bd-hub .hub-top .live { flex: none; height: calc(var(--u) * 5.6); min-height: 44px; box-shadow: calc(var(--u) * 0.4) calc(var(--u) * 0.4) 0 var(--ink); color: var(--ink); }
.bd-hub[data-view="lobby"] .hub-top .live { display: none; }

/* ═══ LA CARTE D'ATTENTE : le bandeau, en haut au milieu (entre la mini-carte et les boutons de droite : le HUD reste
   libre) ; la couleur de sa file sur le côté ═══ */
.att-ban { --fq: #1FB873; position: fixed; z-index: 11; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100vw - 640px)); min-width: 300px; box-sizing: border-box; padding: 6px 6px 6px 14px; border: 3px solid var(--ink); border-left: 10px solid var(--fq); border-radius: 14px;
  background: rgba(21, 18, 46, 0.9); color: #fff; box-shadow: 4px 4px 0 var(--ink); pointer-events: auto; }
.att-ban[data-file="rk"] { --fq: #E5484D; }
.att-ban[hidden] { display: none; }
.att-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--fq); box-shadow: 0 0 0 0 var(--fq); animation: attDot 1.4s ease-out infinite; }
@keyframes attDot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fq) 70%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.att-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.att-t b { font: italic 800 22px/1 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2px; }
.att-t small { font: 700 14px/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#attTime { color: var(--gold); font-variant-numeric: tabular-nums; }
.att-x { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; box-sizing: border-box; padding: 0 12px 0 14px; border: 3px solid var(--ink); border-radius: 10px; background: var(--card); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; font: italic 800 18px/1 var(--fc); text-transform: uppercase; }
.att-x:hover { background: #fff; }
.att-x:active { transform: translate(2px, 2px); box-shadow: none; }
.att-x kbd { min-width: 0; padding: 2px 5px 3px; border-width: 2px; border-bottom-width: 3px; border-radius: 6px; font-size: 12px; }
html.touch .att-x kbd, html.tel .att-x kbd { display: none; }
/* (les messages, sur la carte d'attente : sous le bandeau, jamais dessus) */
html.attente body.br[data-screen="game"] > .toast { top: calc(84px + env(safe-area-inset-top, 0px)); bottom: auto; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); text-align: center; }
@media (max-width: 1100px) { .att-ban { max-width: calc(100vw - 340px); min-width: 0; } }
@media (max-height: 520px) {
  .att-ban { top: calc(6px + env(safe-area-inset-top, 0px)); gap: 8px; max-width: min(380px, calc(100vw - 300px)); padding: 3px 4px 3px 10px; border-left-width: 7px; border-radius: 11px; }
  .att-t b { font-size: 16px; }
  .att-t small { font-size: 12px; letter-spacing: 0.5px; }
  .att-x { height: 40px; padding: 0 10px; font-size: 15px; }
  .att-dot { width: 9px; height: 9px; }
  html.attente body.br[data-screen="game"] > .toast { top: calc(60px + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .att-dot { animation: none; } }

/* ═══ « TOUS LES RANGS » : la nuit, chaque rang dans sa lumière, les emblèmes qui grandissent de Bronze au sommet ; le seuil
   des rangs propres au jeu marqué d'un trait de feu ═══ */
.rk-modal { --band: #E5484D; }
.rk-box { width: min(1260px, 100%); gap: 10px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 210, 63, 0.16), transparent 70%), linear-gradient(175deg, #2A1E5C, #140F33 55%, #0A0718); color: #fff; }
.rk-box > header { gap: 14px; flex-wrap: wrap; }
.rk-box > header h2 { white-space: nowrap; }
.rk-me { margin: 4px 0 0; font: italic 800 22px/1.2 var(--fc); text-transform: uppercase; letter-spacing: 0.5px; }
.rk-track { --n: 7; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; align-items: end; margin: 8px 0 0; padding: 0; list-style: none; }
.rk-track li { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 14px; box-sizing: border-box; border: 4px solid var(--ink); border-radius: 16px;
  background: radial-gradient(ellipse 80% 50% at 50% 26%, color-mix(in srgb, var(--t1) 36%, transparent), transparent 75%), linear-gradient(to bottom, color-mix(in srgb, var(--t2) 80%, #2A2450), #0D0A1E 78%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t1) 55%, transparent), 4px 4px 0 var(--ink); text-align: center; color: #fff; }
.rk-track li.me { outline: 5px solid var(--gold); outline-offset: 2px; }
/* (les rangs montent : chaque carte un peu plus haute que la précédente, l'emblème un peu plus grand) */
.rk-track li:nth-child(1) { min-height: 78%; } .rk-track li:nth-child(2) { min-height: 82%; } .rk-track li:nth-child(3) { min-height: 86%; }
.rk-track li:nth-child(4) { min-height: 90%; } .rk-track li:nth-child(5) { min-height: 94%; } .rk-track li:nth-child(6) { min-height: 97%; } .rk-track li:nth-child(7) { min-height: 100%; }
.rk-track li.top { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t1) 70%, transparent), 0 0 18px color-mix(in srgb, var(--t1) 40%, transparent), 4px 4px 0 var(--ink); }
/* (le seuil : à partir de Hellborn, les noms et les dessins propres au jeu — un trait de feu avant lui) */
.rk-track li.seuil::before { content: ''; position: absolute; left: -10px; top: 4%; bottom: 4%; width: 4px; border-radius: 99px; background: linear-gradient(to bottom, transparent, #FF7A1A 20%, #FF3B30 60%, transparent); box-shadow: 0 0 10px #FF5A1F; }
.rka-emb { width: min(130px, 88%); aspect-ratio: 1; display: grid; place-items: center; }
.rka-emb .rk-emb { width: 100%; height: 100%; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--t1) 50%, transparent)); }
.rka-n { font: italic 800 30px/1 var(--fc); text-transform: uppercase; padding: 0 2px 2px 0; color: var(--t1); text-shadow: var(--out3, 2px 2px 0 #151515); }
.rka-from { font: 700 15px/1.1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; color: color-mix(in srgb, var(--t3) 80%, #fff); }
.rka-divs { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.rka-divs i { display: flex; justify-content: space-between; gap: 6px; padding: 2px 8px 3px; border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 7px; background: rgba(0, 0, 0, 0.3); font-style: normal; font: 700 14px/1.1 var(--fc); letter-spacing: 0.5px; color: #fff; }
.rka-divs i b { font-weight: 800; color: var(--t1); }
.rka-divs i em { font-style: normal; color: rgba(255, 255, 255, 0.82); }
.rka-divs i.on { border-color: var(--ink); background: var(--gold); color: var(--ink); }
.rka-divs.rka-none { align-items: center; font: 700 13px/1.1 var(--fc); letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.rka-me { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); padding: 2px 9px 3px; border: 3px solid var(--ink); border-radius: 8px; background: var(--gold); color: var(--ink); font: italic 800 14px/1 var(--fc); text-transform: uppercase; white-space: nowrap; }
.rk-how { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 16px 0 0; padding: 0; list-style: none; }
.rk-how li { position: relative; padding-left: 16px; font: 600 15px/1.3 var(--fb); color: rgba(255, 255, 255, 0.86); }
.rk-how li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.rk-prov { margin: 2px 0 0; font: 700 13px/1.2 var(--fc); letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
/* (le bandeau de titre, sur ordinateur aussi : la fenêtre du classé a la même tête partout) */
#rkAll .rk-box { --mbx: 24px; padding-top: 0; }
/* (sur ordinateur, la fenêtre prend la place qu'elle a au téléphone : grande, des emblèmes qu'on admire — elle suit la
   taille de l'écran, de 1 366 × 768 à 2 560 × 1 440) */
@media (min-height: 521px) {
  #rkAll .rk-box { width: min(1700px, 100%); }
  #rkAll .rk-box > header:first-child h2 { font-size: clamp(30px, min(2.3vw, 4.1vh), 50px); }
  #rkAll .rk-track { gap: clamp(12px, 1.1vw, 24px); margin-top: clamp(8px, 1.4vh, 20px); }
  #rkAll .rk-track li { gap: clamp(6px, 0.9vh, 12px); padding: clamp(14px, 2vh, 26px) clamp(8px, 0.6vw, 14px) clamp(14px, 1.8vh, 24px); border-radius: clamp(16px, 1.1vw, 22px); }
  #rkAll .rka-emb { width: min(clamp(110px, min(9.6vw, 17vh), 220px), 94%); }
  #rkAll .rka-n { font-size: clamp(26px, min(2vw, 3.6vh), 44px); }
  #rkAll .rka-from { font-size: clamp(14px, min(0.95vw, 1.7vh), 20px); }
  #rkAll .rka-divs { gap: clamp(3px, 0.4vh, 6px); }
  #rkAll .rka-divs i { font-size: clamp(14px, min(0.92vw, 1.65vh), 19px); padding: clamp(2px, 0.35vh, 5px) clamp(8px, 0.6vw, 12px); }
  #rkAll .rka-divs.rka-none { font-size: clamp(13px, min(0.85vw, 1.5vh), 17px); }
  #rkAll .rk-how { margin-top: clamp(14px, 2vh, 26px); }
  #rkAll .rk-how li { font-size: clamp(15px, min(0.9vw, 1.6vh), 19px); }
}
#rkAll .rk-box > header:first-child { flex: none; margin: 0 calc(-1 * var(--mbx)) 12px; padding: 10px calc(var(--mbx) - 6px) 10px var(--mbx); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 10px, rgba(255, 255, 255, 0) 10px 20px), linear-gradient(#D93445, #9E1A2C); border-bottom: 4px solid var(--ink); border-radius: 10px 10px 0 0; }
#rkAll .rk-box > header:first-child h2 { color: #FFE27A; text-shadow: 2px 2px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 0 2px 0 var(--ink), 4px 4px 0 var(--ink); }
html.tel #rkAll { --band: #D93445; }

/* ═══════════════ LA MISE EN PAGE COMPACTE : téléphone en paysage (667 × 300 au pire, 844 × 390 avec encoche) ═══════════════ */
@media (max-height: 520px) {
  .bd-hub { height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); }
  .hub-menu, .hub-lobby, .hub-panel { min-height: 0; }
  .bd-hub { --u: 4px; gap: 8px; padding: calc(8px + var(--sa-t)) max(10px, var(--sa-r)) max(8px, var(--sa-b)) max(10px, var(--sa-l)); }
  body.br[data-screen="hub"] > .toast, html.touch body.br[data-screen="hub"] > .toast { top: calc(var(--sa-t) + 58px); }
  .hub-top { gap: 8px; min-height: 44px; }
  .hub-logo { font-size: 27px; margin-right: 2px; }
  .hub-back { height: 44px; padding: 0 12px; font-size: 16px; border-width: 3px; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
  .hub-q { height: 44px; border-width: 3px; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
  .hub-q b, .hub-q i { padding: 0 10px; font-size: 18px; }
  .hub-q i { border-left-width: 3px; }
  .hub-me { height: 44px; padding: 0 10px 0 4px; gap: 8px; border-width: 3px; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
  .hub-me .hm-ava { width: 34px; height: 34px; }
  .hub-me .hm-txt b { font-size: 16px; max-width: 150px; }
  .hub-me .hm-txt small { font-size: 12px; }
  .hub-grp { height: 44px; padding: 0 10px; font-size: 15px; border-width: 3px; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
  .hub-tools { gap: 6px; }
  /* (au téléphone, les outils sont des icônes de 44 px : leur nom est dans l'infobulle et pour les lecteurs d'écran) */
  .hub-tool { width: 44px; height: 44px; padding: 0; justify-content: center; border-width: 3px; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
  .hub-tool b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hub-tool .hub-ti { width: 30px; height: 30px; }
  .hub-ib { width: 44px; height: 44px; border-width: 3px; border-radius: 12px; font-size: 22px; box-shadow: 3px 3px 0 var(--ink); }
  .hub-go { border-width: 3px; border-radius: 12px; box-shadow: inset 0 -3px 0 rgba(180, 110, 0, 0.35), 4px 4px 0 var(--ink); padding: 4px 16px 6px; }
  .hub-go b { font-size: 24px; }
  .hub-go small { font-size: 12px; }
  .hub-go-s { font-size: 18px; padding: 6px 14px 8px; }
  .hub-btn { border-width: 3px; border-radius: 11px; box-shadow: 3px 3px 0 var(--ink); padding: 4px 12px 6px; font-size: 15px; }
  .hub-seg { border-width: 3px; border-radius: 11px; box-shadow: 3px 3px 0 var(--ink); }
  .hub-seg button { padding: 0 12px; font-size: 16px; border-left-width: 3px; }
  .hub-inv { padding: 0 4px 0 12px; gap: 8px; border-width: 3px; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
  .hub-inv span { font-size: 15px; }

  /* le menu : les onglets à gauche, le contenu à droite */
  .hub-menu { grid-template-columns: clamp(186px, 30vw, 262px) minmax(0, 1fr); gap: 14px; }
  .hub-tabs { gap: 6px; padding-top: 4px; }
  .hub-tab { gap: 8px; padding: 4px 8px 4px 7px; border-width: 3px; border-radius: 12px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), 3px 3px 0 var(--ink); max-height: 74px; }
  .hub-tab[data-tab="std"], .hub-tab[data-tab="rk"] { max-height: 80px; }
  .hub-tab { margin-right: 12px; }
  .hub-tab[aria-selected="true"] { transform: translateX(8px) skewX(-7deg); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 0 0 3px #fff, 5px 5px 0 3px var(--ink); }
  .hub-tab[data-tab="rk"] { box-shadow: inset 0 0 0 2px #E9B949, inset 0 -3px 0 rgba(0, 0, 0, 0.22), 3px 3px 0 var(--ink); }
  .hub-tab[data-tab="rk"][aria-selected="true"] { box-shadow: inset 0 0 0 2px #FFE27A, 0 0 0 3px #FFE27A, 5px 5px 0 3px var(--ink); }
  .hub-tab:hover { transform: skewX(-7deg); }
  .hub-tab[aria-selected="true"]:hover { transform: translateX(8px) skewX(-7deg); }
  .hub-tab[data-tab="br"] { margin-top: 5px; }
  .hub-tab[data-tab="br"]::before { top: -7px; left: 12px; right: 12px; border-top-width: 2px; }
  .htb-ico { width: 30px; height: 30px; }
  .htb-t { gap: 2px; }
  .htb-t b { font-size: clamp(17px, 5.6vh, 24px); }
  .htb-t small { font-size: 12px; white-space: normal; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .htb-art { right: 6px; }
  .htb-art i { width: clamp(26px, 9vh, 32px); margin-left: -8px; margin-top: 12px; }
  .htb-art i:first-child { width: clamp(32px, 11vh, 40px); }
  .htb-art i + i { display: none; }   /* (au téléphone, une seule balle : le titre garde sa place) */
  .htb-art i img { border-width: 2px; }
  .htb-art-rk { width: clamp(40px, 14vh, 54px); height: clamp(40px, 14vh, 54px); right: 4px; }
  .hub-tab[aria-selected="true"] .htb-t { padding-right: clamp(36px, 12vh, 44px); }
  .hub-tab[data-tab="rk"][aria-selected="true"] .htb-t { padding-right: clamp(40px, 14vh, 54px); }
  .bd-hub[data-view="lobby"] .hub-me { display: none; }
  .hub-panel { border-width: 3px; border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); }
  .bd-hub[data-tab="rk"] .hub-panel { box-shadow: inset 0 0 0 2px #0C0820, inset 0 0 0 4px #C99A2E, 5px 5px 0 var(--ink); }
  .hp-pane { gap: 7px; padding: 9px 11px 9px; }
  .hp-head { gap: 8px; }
  .hp-head h2 { font-size: clamp(18px, 6.4vh, 26px); text-shadow: var(--out), 2px 3px 0 var(--ink); }
  .hp-tag { font-size: 12px; padding: 3px 7px 4px; border-width: 2px; border-radius: 7px; }
  .hp-season { font-size: 13px; padding: 3px 9px 4px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
  .hp-help { font-size: 12px; }
  .hp-fmt-pane .hp-help { display: none; }   /* (au téléphone, la place va aux cartes : la phrase d'aide est dans les onglets) */
  .hp-fmts { gap: 12px; }
  .hp-fmt { border-width: 3px; border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); }
  .bd-hub[data-tab="rk"] .hp-fmt { box-shadow: inset 0 0 0 2px #0E0A20, inset 0 0 0 4px #C99A2E, 4px 4px 0 var(--ink); }
  .hpf-art { min-height: 34px; border-bottom-width: 3px; }
  .hpf-art em { width: 44px; font-size: 18px; }
  .hpf-art::after { border-width: 2px; }
  .hp-fmt { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto auto; }
  .hpf-art { grid-column: 1 / 3; }
  .hpf-t { grid-column: 1; align-self: center; padding: 4px 8px 4px 10px; gap: 2px 8px; }
  .hpf-rk { grid-column: 2; align-self: center; justify-self: end; max-width: calc(100% - 8px); min-width: 0; }
  .hpf-rk:not([hidden]) ~ .hpf-why { grid-column: 1 / 3; }
  .hpf-why { grid-column: 1 / 3; }
  .hpf-t { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; min-width: 0; }
  .hpf-t small { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .bd-hub[data-tab="rk"] .hpf-t small { display: none; }
  .hpf-t b { font-size: clamp(22px, 8vh, 32px); }
  .hpf-t small { font-size: 12px; }
  .hpf-rk { margin: 4px 8px 0 0; padding: 3px 8px; gap: 8px; border-width: 2px; border-radius: 9px; }
  .hpf-rk .rk-emb { width: 28px; height: 28px; min-width: 0; min-height: 0; }
  .bd-hub[data-tab="rk"] .hpf-rk .rkl-t { flex-direction: column; align-items: flex-end; gap: 2px; }
  .bd-hub[data-tab="rk"] .hpf-rk .rkl-t b { font-size: 15px; }
  .bd-hub[data-tab="rk"] .hpf-rk .rkl-t small { font-size: 14px; }
  /* (au téléphone, la scène est basse : le podium, la balle et la couronne se resserrent, le podium reste lisible) */
  .bd-hub[data-tab="rk"] .hpf-pod { border-width: 2.5px; border-bottom: 0; border-radius: 5px 5px 0 0; bottom: -3px; height: 27%; min-height: 22px; }
  .bd-hub[data-tab="rk"] .hpf-pod::before, .bd-hub[data-tab="rk"] .hpf-pod::after { border-width: 2.5px; border-bottom: 0; font-size: 12px; color: transparent; text-shadow: none; right: calc(100% - 2.5px); padding-top: 0; }   /* (au téléphone, seul le « 1 » est écrit : les petites marches sont trop basses pour un chiffre) */
  .bd-hub[data-tab="rk"] .hpf-pod::after { right: auto; left: calc(100% - 2.5px); }
  .hpf-pod i { font-size: clamp(14px, 5vh, 20px); top: 19%; }
  .bd-hub[data-tab="rk"] .hpf-side.a { bottom: calc(27% - 6px); height: 30%; }
  .bd-hub[data-tab="rk"] .hpf-lau { top: 27%; height: 52%; }
  .bd-hub[data-tab="rk"] .hpf-emb { top: 26%; height: 36%; }
  .rk-emb { filter: drop-shadow(2px 2px 0 #151515); }
  .rkl-t { gap: 2px; }
  .rkl-t b { font-size: 15px; }
  .rkl-t small { font-size: 12px; }
  .hpf-why { padding: 3px 10px 5px; font-size: 12px; min-height: 0; }
  .hpf-why:empty { padding: 0 0 5px; }
  .rk-dots { gap: 2px; }
  .rk-dots i { width: 8px; height: 8px; border-width: 1.5px; }
  .hp-ladder { gap: 8px; padding: 3px 6px 3px 8px; border-width: 3px; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(233, 185, 73, 0.5), 3px 3px 0 var(--ink); }
  .hpl-k { display: none; }
  .hpl-row { gap: 2px; }
  .hpl-step { gap: 1px; }
  .hpl-step .rk-emb { width: calc(var(--es, 6) * 4.6px); height: calc(var(--es, 6) * 4.6px); }
  .hpl-step b { font-size: 12px; letter-spacing: 0; }
  .hpl-sep { min-width: 3px; height: 2px; margin-bottom: 10px; }
  .hpl-seuil { width: 3px; margin: 0 2px; }
  .hpl-go { min-height: 36px; padding: 0 8px; font-size: 13px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
  .hpb-card { padding: 0; border-width: 3px; border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); }
  .hpb-txt { font-size: 13px; padding: 6px 10px 6px; }
  .hpb-row { gap: 8px; flex-wrap: nowrap; }
  .hpb-note { font-size: 12px; }
  .hpb-row .hub-go { min-width: 0; }
  .hpb-txt b { font-size: 21px; text-shadow: var(--out), 2px 3px 0 var(--ink); }
  .hpb-txt span { font-size: 12px; }
  .hpb-zone { border-width: 3px; }
  .hpb-zone.z2 { border-width: 2px; }
  .hpp-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); gap: 6px; }
  .hpp-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 1px; padding: 6px 8px 6px 10px; border-width: 3px; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
  .hpp-card > b { grid-column: 1; grid-row: 1; font-size: 18px; }
  .hpp-art { display: none; }
  .hpp-card > p { grid-column: 1; grid-row: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 1.25; }
  .hpp-card > .hub-go, .hpp-card > .hub-btn, .hpp-card > .hpp-join { grid-column: 2; grid-row: 1 / 3; }
  .hpp-join input { width: 92px; flex: none; }
  #hub #goCreate { font-size: 16px; padding: 4px 12px 6px; }
  .hpp-card .hub-go-s, .hpp-card .hub-btn { padding-left: 6px; padding-right: 6px; font-size: 15px; }
  .hpp-join { gap: 6px; }
  .hpp-join input { font-size: 18px; letter-spacing: 1.5px; padding: 0 6px; border-width: 3px; }
  .hpp-join .hub-btn { padding: 4px 8px 6px; }

  /* le lobby : toi, le panneau de rang, ton coéquipier ; « Prêt » en bas à droite */
  .hub-lobby { column-gap: 12px; row-gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(250px, 44vw, 380px)); }
  .hub-lobby[data-layout="duo"] { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(236px, 38vw, 320px)) minmax(0, 1fr); }
  .hub-lobby[data-layout="many"] { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(196px, 31vw, 260px)); }
  .hl-mark { font-size: clamp(70px, 26vh, 120px); -webkit-text-stroke-width: 1.5px; }
  .hl-foot { gap: 8px; }
  .hl-sub { font-size: 12px; letter-spacing: 0.5px; }
  .hl-players { --s: clamp(62px, 25vh, 110px); }
  /* (toutes les cartes d'une rangée à la même hauteur, la tienne et celle de ton coéquipier : la hauteur de la place, sans
     dépasser celle qu'il leur faut) */
  .hub-lobby:not([data-layout="many"]) .hl-p { height: min(100%, calc(var(--s) * 1.18 + 116px)); align-self: center; margin: 0; }
  .hl-rk { padding: 1px 7px 1px 3px; gap: 4px; border-width: 2px; border-radius: 6px; }
  .hl-rk .rk-emb { width: 18px; height: 18px; min-width: 0; min-height: 0; }
  .hl-rk b { font-size: 12px; }
  .hl-rk ~ .hl-name { margin-top: 12px; }
  .hub-grp .hg-w { display: none; }
  .bd-hub .hub-top .live { display: none; }   /* (au téléphone, la barre garde ses boutons) */
  .hl-p { width: min(100%, 206px); padding-bottom: 6px; gap: 1px; border-width: 3px; border-radius: 13px; box-shadow: 4px 4px 0 var(--ink); }
  .bd-hub[data-rk] .hl-p { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t1) 50%, transparent), 4px 4px 0 var(--ink); }
  .hl-p::after { border-top-width: 3px; }
  .hl-p::before { border-width: 2.5px; }
  .hl-p.mine { outline-width: 3px; outline-offset: 2px; }
  .hl-name { margin-top: 2px; font-size: 16px; }
  .hl-bn { font-size: 12px; }
  .hl-tag { left: 5px; top: 5px; font-size: 12px; padding: 2px 5px 3px; border-width: 2px; border-radius: 6px; }
  .hl-st { margin: auto 8px 0; min-height: 30px; font-size: 14px; border-width: 2px; border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); padding: 2px 6px; }
  .bd-hub .hl-st.no { box-shadow: none; }
  .hl-pick, .hl-inv { margin-top: 3px; font-size: 13px; padding: 2px 8px 4px; min-height: 36px; }
  .hl-q { border-width: 3px; }
  .hub-lobby[data-layout="many"] .hl-players { gap: 6px; padding: 2px 6px 6px 2px; }
  .hl-players.many { --s: 40px !important; gap: 6px !important; }
  .hl-players.many .hl-p { border-width: 2.5px; border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); padding-bottom: 3px; }
  .hl-players.many .hl-name { font-size: 13px; }
  .hl-players.many .hl-tag { font-size: 12px; padding: 1px 4px 2px; top: 3px; }
  .hl-players.lots { --s: 34px !important; }
  .hl-players.many.mid { --s: 36px !important; --cw: 86px; max-width: none; }
  .hl-players.many.mid .hl-ball { margin: 22px 0 4px; }   /* (deux rangées de 4 ou 5 tiennent dans la hauteur, sans défiler) */
  .hl-players.many.mid .hl-name { font-size: 13px; }
  .hl-players.many.mid .hl-bn { font-size: 12px; }
  /* (le panneau de rang au téléphone : la bannière à gauche sur toute la hauteur du haut, le rang et les trois chiffres à
     droite ; la marche en dessous ; le bilan et « Tous les rangs » en bas) */
  .hl-plate { grid-template-columns: clamp(58px, 21vh, 84px) minmax(0, 1fr); column-gap: 10px; row-gap: 5px; padding: 8px 9px 7px 8px; border-width: 3px; border-radius: 13px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t1) 60%, #000), 4px 4px 0 var(--ink); }
  .hlp-splash { left: -22px; top: -26px; width: clamp(120px, 44vh, 170px); height: clamp(120px, 44vh, 170px); }
  .hlp-box { display: contents; }
  .hlp-ban { grid-column: 1; grid-row: 1 / 4; margin-top: -16px; align-self: start; }
  .hlp-flag { filter: drop-shadow(2px 2px 0 #151515); }
  .hlp-flag .f0 { stroke-width: 3; } .hlp-flag .f1 { stroke-width: 2; } .hlp-flag .f2 { stroke-width: 2.5; }
  .hlp-k, .hlp-name, .hlp-stats { grid-column: 2; }
  .hlp-prog { grid-column: 1 / 3; margin-top: 2px; }
  .hlp-k { font-size: 12px; letter-spacing: 0.4px; gap: 5px; }
  .hlp-pos { font-size: 12px; padding: 1px 6px 2px; border-width: 2px; }
  .hlp-name { font-size: clamp(20px, 7.4vh, 30px); text-shadow: var(--out), 2px 3px 0 var(--ink); }
  .hl-plate[data-rk="place"] .hlp-name { font-size: clamp(18px, 6vh, 24px); }
  .hlp-stats { gap: 4px; }
  .hlp-stats > span { padding: 3px 2px 4px; gap: 1px; border-width: 2px; border-radius: 7px; }
  .hlp-stats small { font-size: 12px; letter-spacing: 0; line-height: 1.05; text-align: center; }
  .hlp-stats b { font-size: 17px; }
  .hlp-stats .hlp-elo b { font-size: 20px; }
  .hlp-prog { gap: 3px; }
  .hlp-bar { gap: 4px; }
  .hlp-bar .seg { height: 13px; border-width: 2px; }
  .hlp-bar .seg em { font-size: 12px; line-height: 9px; }
  .hlp-bar .nx { width: 22px; height: 22px; margin: -5px 0; }
  .hlp-dots .rk-dots i { width: 11px; height: 11px; border-width: 2px; }
  .hlp-dots .rk-dots { gap: 3px; }
  .hlp-next { font-size: 12px; letter-spacing: 0.3px; }
  .hlp-foot { grid-column: 1 / 3; gap: 8px; padding-top: 5px; border-top-width: 1.5px; }
  .hlp-day { gap: 5px; }
  .hlp-day small { font-size: 12px; letter-spacing: 0.4px; }
  .hlp-day b { font-size: 15px; }
  .hlp-day i { font-size: 13px; }
  .hlp-all { min-height: 36px; padding: 2px 10px 4px; font-size: 14px; }
  .hl-std { gap: 7px; padding: 12px 11px 10px; border-width: 3px; border-radius: 13px; box-shadow: 4px 4px 0 var(--ink); }
  .hl-std .hlp-splash { right: -24px; top: -28px; width: 120px; height: 120px; }
  .hls-t { gap: 4px; }
  .hls-t small { font-size: 12px; padding: 2px 6px 3px; border-width: 2px; }
  .hls-t b { font-size: clamp(24px, 9vh, 36px); text-shadow: var(--out), 2px 3px 0 var(--ink); }
  .hls-t span { font-size: 12px; }
  .hls-chips { gap: 4px; }
  .hls-chips li { font-size: 12px; padding: 3px 8px 4px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
  .hls-rk { min-height: 38px; font-size: 14px; }
  .hl-ready { height: 58px; border-top-width: 4px; border-bottom-width: 4px; }
  .hl-ready b { font-size: 34px; }
  .hl-go { gap: 3px; }
  .hl-state { font-size: 12px; }
  .hub-go-l { min-height: 50px; min-width: 0; padding-top: 2px; padding-bottom: 4px; }
  .hub-go-l b { font-size: clamp(24px, 8.4vh, 34px); }
  .hl-chat { height: 44px; padding: 0 12px 0 8px; gap: 6px; border-width: 3px; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
  .hl-chat svg { width: 26px; height: 26px; }
  .hl-chat b { font-size: 16px; }
  .bd-hub .home-chat { width: min(390px, 52vw); }

  /* le salon au téléphone : le panneau du salon serré, les options en plein panneau */
  /* (la grille du salon : les joueurs prennent toute la hauteur à gauche ; à droite le panneau du salon, puis « Prêt » et
     « Lancer » ; le chat et le dé sous les joueurs) */
  .bd-salon .hub-lobby { grid-template-columns: minmax(0, 1fr) clamp(214px, 34vw, 280px); grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "players plate" "players go" "foot go"; }
  .bd-salon .hub-lobby[data-layout="duo"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(214px, 34vw, 280px); grid-template-areas: "p1 p2 plate" "p1 p2 go" "foot foot go"; }
  .bd-salon .hub-lobby[data-layout="solo"] { grid-template-areas: "p1 plate" "p1 go" "foot go"; }
  .bd-salon .hl-salon { align-self: stretch; justify-content: flex-start; min-height: 0; overflow-y: auto; }
  .bd-salon .hl-go { align-self: end; }
  .bd-salon .hl-state { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* (les petites cartes au téléphone : l'état en haut à gauche, × en haut à droite, la balle dessous — rien ne se chevauche) */
  .hl-players.many { --cw: 86px; }
  .hl-players.lots { --cw: 78px; }
  .hl-players.many .hl-p { --bh: calc(var(--s) + 30px); background: linear-gradient(to bottom, transparent var(--bh), var(--np) var(--bh)), var(--stage); }
  .hl-players.many .hl-p.free { background: linear-gradient(to bottom, transparent var(--bh), rgba(251, 250, 247, 0.92) var(--bh)), rgba(255, 255, 255, 0.08); }
  .hl-players.many .hl-p::after { top: var(--bh); border-top-width: 2.5px; }
  .hl-players.many .hl-ball { margin: 24px 0 6px; }
  .hl-players.many .hl-tag { left: 3px; top: 3px; transform: none; padding: 1px 4px 2px; }
  .hl-players.many .hl-x { width: 24px; height: 24px; font-size: 14px; top: 2px; right: 2px; border-width: 2px; box-shadow: 1px 1px 0 var(--ink); }
  .hl-players.many .hl-bt { top: 2px; right: 2px; gap: 2px; }
  .hl-players.many .hl-bt .hl-x { width: 24px; height: 24px; }
  .hl-players .hl-tools .hub-btn, .hl-players .hl-head .hub-btn { min-height: 32px; }
  body.br[data-screen="lobby"] > .toast, html.touch body.br[data-screen="lobby"] > .toast { top: calc(var(--sa-t) + 58px); }
  .bd-salon .hub-q .hq-code { padding: 0 10px; font-size: 18px; border-left-width: 3px; letter-spacing: 2px; }
  .hl-salon { gap: 5px; padding: 8px 8px 7px; border-width: 3px; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(142, 197, 255, 0.5), 4px 4px 0 var(--ink); }
  .hls-k, .hls-hint, .hls-share input { display: none; }
  .hls-share .hub-btn { flex: 1; }
  .hls-sum { padding: 4px 8px; border-width: 3px; border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); }
  .hls-sum b { font-size: 15px; }
  .hls-sum span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hls-note { font-size: 12px; line-height: 1.2; }
  .bd-salon .lobby-last .pl { padding: 2px 6px 3px; border-width: 2px; }
  .bd-salon .lobby-last .pl b { font-size: 13px; }
  .bd-salon .lobby-last .pl i { font-size: 12px; }
  .bd-salon .hl-go > .hub-go, .bd-salon .hlg-ready.hub-go { font-size: clamp(22px, 7.4vh, 30px); }
  .hlg-row { gap: 6px; }
  .hlg-row .hub-btn { min-height: 40px; }
  .hl-x { width: 30px; height: 30px; font-size: 16px; top: 4px; right: 4px; border-width: 2px; }
  .hl-bt { top: 4px; right: 4px; }
  .hl-players .hl-head { font-size: 14px; }
  .hl-players .hl-head .hub-btn, .hl-players .hl-tools .hub-btn { min-height: 34px; font-size: 13px; }
  .hl-players .hl-tools > span { font-size: 14px; }
  .hl-players.many .hl-pick { min-height: 28px; font-size: 12px; }
  .hl-players.many .hl-p.mine .hl-pick { width: 26px; height: 26px; min-height: 0; top: calc(var(--bh) - 29px); right: 3px; border-width: 2px; box-shadow: 1px 1px 0 var(--ink); }
  #lobby #lobbyRandom span { display: none; }
  .hl-players .hl-team { gap: 5px; padding: 4px 5px 6px; border-width: 2px; border-radius: 10px; }
  .sl-opts { left: 0; right: 0; width: auto; top: 0; bottom: 0; transform: none; max-height: none; gap: 5px; padding: 0 12px 8px; border-width: 3px; border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); }
  .sl-opts .lo-head { margin: 0 -12px 2px; padding: 4px 8px 4px 12px; border-bottom-width: 3px; border-radius: 9px 9px 0 0; }
  .sl-opts .lo-head h3 { font-size: 20px; }
  .sl-opts .lo-head .icon-btn { width: 36px; height: 36px; font-size: 17px; }
  .sl-opts .mode-row > span { min-width: 54px; font-size: 12px; letter-spacing: 0.6px; }
  .sl-opts .seg button { height: 32px; padding: 0 9px; font-size: 13px; }
  .sl-opts .map-btn { height: 36px; }
  .sl-opts .lo-ok { margin-top: 0; }
  /* « Tous les rangs » : plein écran, sans défilement, les rangs sur une rangée */
  #rkAll { padding: max(6px, var(--sa-t)) max(10px, var(--sa-r)) max(6px, var(--sa-b)) max(10px, var(--sa-l)); }
  .rk-box { width: 100%; max-height: 100%; height: auto; gap: 4px; padding-bottom: 10px; }
  html.tel .rk-box { --mbx: 14px; }
  .rk-box > header { gap: 8px; flex-wrap: nowrap; }
  .rk-box > header h2 { font-size: 24px; }
  .rk-x { width: 40px; height: 40px; }
  .rk-me { margin: 0; font-size: 15px; }
  .rk-track { gap: 6px; margin-top: 2px; }
  .rk-track li { gap: 2px; padding: 5px 3px 7px; border-width: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t1) 55%, transparent), 3px 3px 0 var(--ink); }
  .rk-track li.me { outline-width: 3px; }
  .rk-track li.seuil::before { left: -5px; width: 2px; }
  .rka-emb { width: clamp(30px, 12vh, 46px); }
  .rka-n { font-size: 15px; text-shadow: var(--out); }
  .rka-from { font-size: 12px; letter-spacing: 0.3px; }
  .rka-divs { gap: 1px; }
  .rka-divs i { padding: 0 4px 1px; font-size: 12px; border-width: 1.5px; border-radius: 5px; gap: 2px; }
  .rka-divs.rka-none { font-size: 12px; }
  .rka-me { bottom: -11px; font-size: 12px; padding: 1px 5px 2px; border-width: 2px; }
  .rk-how { gap: 0 14px; margin-top: 8px; }
  .rk-how li { font-size: 12px; padding-left: 11px; }
  .rk-how li::before { width: 5px; height: 5px; }
  .rk-prov { font-size: 12px; }
}
/* (un téléphone très bas : on gagne la hauteur des petits textes secondaires) */
@media (max-height: 340px) {
  .hl-bn { display: none; }
  .hpf-t small { display: none; }
  .hpb-txt { font-size: 12px; }
  .rk-how li:nth-child(n+2) { display: none; }
  .rk-prov { display: none; }
  .rk-track li { padding-top: 4px; padding-bottom: 5px; }
  .hpl-step b { display: none; }
  .hpl-sep { margin-bottom: 0; }
  .hls-chips li:nth-child(3) { display: none; }
  /* (les onglets choisis gardent leur titre entier : l'illustration en balles s'efface, l'emblème du Ranked reste) */
  .hub-tab:not([data-tab="rk"]) .htb-art { display: none !important; }
  .hub-tab:not([data-tab="rk"])[aria-selected="true"] .htb-t { padding-right: 0; }
  /* (le panneau de rang tient dans la hauteur : des chiffres plus serrés, « Tous les rangs » sans filet au-dessus) */
  .hl-plate { row-gap: 3px; padding: 6px 8px 6px 7px; }
  .hlp-k { line-height: 1; }
  .hlp-stats > span { padding: 1px 2px 2px; gap: 0; }
  .hlp-stats b { font-size: 15px; }
  .hlp-stats .hlp-elo b { font-size: 18px; }
  .hlp-prog { gap: 2px; }
  .hlp-foot { padding-top: 0; border-top: 0; }
  .hlp-all { min-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-lobby.in .hl-p, .hub-lobby.in .hl-plate, .hub-lobby.in .hl-std { animation: none; }
  .hub-tab, .hub-go, .hp-fmt { transition: none; }
  .hub-tab[data-tab="rk"]::after, .hub-go-l::after, .hlp-emb::before, .hl-q, .hpb-zone, .hlp-splash { animation: none; }
}
.bd-hub.still .hl-ball { animation: none !important; }
.bd-hub.still .hub-tab[data-tab="rk"]::after, .bd-hub.still .hub-go-l::after, .bd-hub.still .hlp-emb::before, .bd-hub.still .hpb-zone { animation: none; }