:root { --bg: #070b16; --panel: #0f172acc; --text: #eef4ff; --muted: #8ea3c7; --accent: #2f7bff; --accent2: #5cb8ff; }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif; cursor: none; }
  canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

  /* Toute l'UI DOM est posée dans un "stage" 1920x1080 mis à l'échelle comme le canvas */
  #ui { position: fixed; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center; pointer-events: none; }
  .screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
  .screen.on { opacity: 1; visibility: visible; }
  .logo { margin: 0; font-weight: 900; letter-spacing: 1px; display: flex; align-items: center; gap: .18em; }
  .logo b { color: var(--accent); }
  .logo svg { height: 1em; width: auto; filter: drop-shadow(0 0 .25em #2f7bffaa); }

  /* ---- Accueil (personne dans la salle) ---- */
  #lobby { display: grid; grid-template-columns: 1fr 640px; gap: 90px; align-items: center; padding: 0 150px 40px; box-sizing: border-box; }
  #lobby .logo { font-size: 150px; line-height: 1; }
  #lobby .tag { font-size: 34px; color: #b4c4e2; margin: 18px 0 52px; line-height: 1.35; max-width: 820px; }
  #lobby .tag b { color: var(--text); }
  .steps { display: flex; flex-direction: column; gap: 18px; }
  .step { display: flex; align-items: center; gap: 22px; font-size: 32px; font-weight: 700; padding: 18px 26px; border-radius: 22px;
    background: linear-gradient(90deg, #0a1226f2, #0a1226b0); border-left: 4px solid var(--accent); }
  .step i { font-style: normal; width: 54px; height: 54px; flex: none; border-radius: 16px; display: grid; place-items: center; font-size: 30px;
    background: var(--accent); color: #fff; box-shadow: 0 6px 20px #2f7bff66; }
  .step span { color: var(--muted); font-weight: 500; font-size: 26px; margin-left: auto; }
  .qrcard { position: relative; border-radius: 40px; padding: 4px; background: conic-gradient(from var(--ang), #2f7bff, #5cb8ff, #22d3ee, #7c9cff, #2f7bff);
    animation: spin 6s linear infinite; box-shadow: 0 30px 90px #2f7bff40; }
  @property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  @keyframes spin { to { --ang: 360deg; } }
  .qrcard > div { border-radius: 36px; background: #0a1124f2; padding: 44px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
  #qr { width: 380px; height: 380px; background: #fff; border-radius: 24px; padding: 16px; box-sizing: border-box; }
  #qr svg, #qrMini svg { width: 100%; height: 100%; display: block; }
  .codeLbl { font-size: 24px; color: var(--muted); }
  .tiles { display: flex; gap: 14px; }
  .tiles b { width: 96px; height: 112px; border-radius: 20px; display: grid; place-items: center; font-size: 76px; font-weight: 900;
    background: linear-gradient(#17254a, #0f1a33); border: 2px solid #2b3d66; box-shadow: inset 0 -6px 0 #0004; }
  #joinUrl { font-size: 24px; color: var(--accent2); font-family: ui-monospace, monospace; }

  /* ---- Menu (des joueurs sont là) ---- */
  #menu { display: flex; flex-direction: column; align-items: center; padding: 34px 60px 26px; box-sizing: border-box; gap: 22px; }
  .topbar { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .topbar .logo { font-size: 58px; }
  #who { font-size: 30px; color: var(--muted); text-align: center; }
  #who b { color: var(--text); }
  .join { justify-self: end; display: flex; align-items: center; gap: 18px; padding: 10px 14px 10px 22px; border-radius: 22px; background: #0f172acc; border: 2px solid #1e2b4a; }
  .join .t { text-align: right; font-size: 20px; color: var(--muted); line-height: 1.25; }
  .join .t b { display: block; color: var(--text); font-size: 40px; letter-spacing: 8px; }
  #qrMini { width: 104px; height: 104px; background: #fff; border-radius: 12px; padding: 6px; box-sizing: border-box; }
  #tourBar { display: none; align-items: center; gap: 16px; padding: 10px 22px; border-radius: 99px; background: linear-gradient(90deg, #2f7bff33, #22d3ee22);
    border: 2px solid #2f7bff66; font-size: 24px; font-weight: 800; }
  #tourBar.on { display: flex; }
  /* quand il y a la barre du tournoi et/ou des équipes, les cartes rétrécissent pour que tout tienne */
  #menu.dense { gap: 16px; padding-top: 26px; }
  #menu.dense .card { width: 372px; }
  #menu.dense .card .body { padding: 10px 18px 12px; }
  #menu.dense .card h3 { font-size: 28px; }
  #menu.dense .card p { -webkit-line-clamp: 1; }
  #tourBar .sc { display: flex; gap: 10px; font-weight: 700; }
  #tourBar .sc span { padding: 4px 14px; border-radius: 99px; background: #0008; }
  #cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; max-width: 1560px; }
  .card { width: 404px; flex: none; border-radius: 28px; overflow: hidden; background: #0f172a; border: 5px solid #1e2b4a;
    transition: transform .25s, border-color .25s, box-shadow .25s; }
  .card.sel { transform: scale(1.06); border-color: var(--accent); box-shadow: 0 0 60px #2f7bff66; }
  .card .cover { width: 100%; aspect-ratio: 16 / 9; background: #15223f center / cover no-repeat; display: block; }
  .card .body { padding: 12px 22px 16px; }
  .card h3 { margin: 0 0 4px; font-size: 32px; }
  .card p { margin: 0; color: var(--muted); font-size: 19px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card .opts { margin-top: 6px; font-size: 19px; }
  #roster { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 1700px; margin-top: auto; }
  .chip { display: flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 99px; background: #0b1428cc; border: 2px solid transparent; font-size: 25px; font-weight: 700; }
  .chip i { width: 18px; height: 18px; border-radius: 6px; display: block; }
  .chip.off { opacity: .4; }
  .team { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 18px; border-radius: 22px; background: #0b1428cc; border: 3px solid; }
  .team > b { font-size: 24px; margin-right: 6px; }
  .team .chip { background: #ffffff10; padding: 6px 14px; font-size: 22px; }

  /* ---- Entre deux jeux / champion ---- */
  #inter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: #050912cc; backdrop-filter: blur(6px); }
  #inter h2 { margin: 0; font-size: 34px; color: var(--muted); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
  #inter .big { font-size: 96px; font-weight: 900; text-align: center; line-height: 1.05; text-shadow: 0 8px 40px #0008; }
  #inter .sub { font-size: 32px; color: var(--muted); }
  #standings { display: flex; flex-direction: column; gap: 14px; width: 1100px; margin-top: 10px; }
  .row { display: grid; grid-template-columns: 60px 300px 1fr 90px; align-items: center; gap: 18px; font-size: 32px; font-weight: 800; }
  .row .rk { color: var(--muted); text-align: right; }
  .row .bar { height: 34px; border-radius: 99px; background: #ffffff10; overflow: hidden; }
  .row .bar div { height: 100%; border-radius: 99px; width: 0; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
  .row .pts { text-align: right; }
  .row.up .pts { animation: pop .6s .9s both; }
  @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.6); color: #ffd43b; } 100% { transform: scale(1); } }
  #inter .next { font-size: 26px; color: var(--muted); margin-top: 8px; }
  #inter .trophy { font-size: 170px; line-height: 1; filter: drop-shadow(0 10px 40px #ffd43b88); animation: float 2.4s ease-in-out infinite; }
  @keyframes float { 50% { transform: translateY(-16px) rotate(-3deg); } }

  /* ---- En jeu ---- */
  #joinChip { position: absolute; left: 24px; bottom: 20px; padding: 10px 18px; border-radius: 14px; background: #0009;
    font-size: 22px; color: var(--muted); opacity: 0; transition: opacity .4s; }
  #joinChip b { color: var(--text); letter-spacing: 4px; }
  #joinChip.on { opacity: 1; }
  #tourChip { position: absolute; right: 24px; bottom: 64px; padding: 8px 16px; border-radius: 14px; background: #000a; font-size: 21px; font-weight: 700; opacity: 0; transition: opacity .4s; }
  #tourChip.on { opacity: 1; }

  /* ---- Son ---- */
  #soundGate { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 20; display: none; align-items: center; gap: 14px;
    padding: 16px 28px; border-radius: 99px; background: #2f7bff; color: #fff; font-size: 24px; font-weight: 800; box-shadow: 0 10px 40px #2f7bff66;
    cursor: pointer; }
  #soundGate.on { display: flex; }
  .lobbyOn #soundGate { display: none; }
  #lobbyGate { display: none; margin-top: 26px; justify-content: center; align-items: center; gap: 12px; padding: 18px 26px; border-radius: 22px;
    background: #0a1124f2; border: 2px solid #2f7bff88; color: var(--text); font-size: 26px; font-weight: 800; }
  #lobbyGate.on { display: flex; }
  #lobbyGate span { color: var(--accent2); }
  #soundChip { position: fixed; right: 18px; bottom: 16px; z-index: 5; padding: 8px 14px; border-radius: 12px; background: #0009; color: var(--muted);
    font-size: 16px; opacity: 0; transition: opacity .4s; }
  #soundChip.on { opacity: 1; }
  #conn { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); color: #ff8787; font-size: 18px; }

/* indication pour les TV d'amis (écran invité) */
.otherTv { font-size: 21px; color: var(--muted); text-align: center; margin-top: 4px; }
.otherTv b { color: var(--accent2); font-family: ui-monospace, monospace; }
.join .t small { display: block; font-size: 15px; color: var(--accent2); margin-top: 4px; }

/* plus de 6 jeux : 5 + 4 cartes compactes */
#menu.many #cards { max-width: 1800px; gap: 22px; }
#menu.many .card { width: 316px; border-width: 4px; border-radius: 22px; }
#menu.many .card .body { padding: 10px 16px 12px; }
#menu.many .card h3 { font-size: 26px; margin: 0; }
#menu.many .card p { font-size: 17px; -webkit-line-clamp: 1; }
#menu.many .card .opts { font-size: 17px; }
#menu.many.dense .card { width: 300px; }

/* ---- cartes = jaquettes seules (le titre est déjà dessus) ---- */
#cards { max-width: 1640px; gap: 28px; }
.card { position: relative; width: 500px; border-radius: 26px; border-width: 5px; }
.card .opts { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 14px; border-radius: 14px; background: #050914d9;
  backdrop-filter: blur(6px); font-size: 20px; text-align: center; margin: 0; }
#menu.dense .card { width: 450px; }
#menu.many #cards { max-width: 1500px; gap: 20px; }
#menu.many .card { width: 410px; border-width: 4px; border-radius: 22px; }
#menu.many.dense .card { width: 372px; }
/* jaquettes plus grandes maintenant qu'il n'y a plus de texte */
#cards { max-width: 1820px; }
.card { width: 560px; }
#menu.dense .card { width: 500px; }
#menu.many .card { width: 430px; }
#menu.many.dense .card { width: 390px; }

/* rayon choisi par le chef */
#catTitle { font-size: 30px; font-weight: 900; color: var(--accent2); letter-spacing: 1px; margin: -6px 0 -6px; }
#catTitle:empty { display: none; }
#menu.many .card { width: 330px; }
#menu.many.dense .card { width: 300px; }

/* Bouton plein écran : visible tant que la souris bouge, puis s'efface (et le curseur aussi) */
#fsBtn { position: fixed; top: 18px; right: 18px; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border: 1px solid #2f7bff66; border-radius: 14px; background: #0f172acc; color: #dbe7ff; font: 600 17px/1 inherit; font-family: inherit;
  cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 6px 24px #0008; transition: opacity .4s, transform .2s, background .2s; }
#fsBtn:hover { background: #2f7bff; color: #fff; transform: scale(1.05); }
#fsBtn .fsOut { display: none; }
body.isFs #fsBtn .fsIn { display: none; }
body.isFs #fsBtn .fsOut { display: inline; }
body.isFs #fsBtn span { display: none; }
body.idle #fsBtn { opacity: 0; pointer-events: none; }
body.idle { cursor: none; }