/* ─────────────────────────── Battle Royale ─────────────────────────── */
body.br { --zone: #8E44E8; --gold: #FFD23F; }
.br-lobby { max-width: 1760px; margin: 0 auto; padding: 26px 44px 30px; display: flex; flex-direction: column; gap: 16px; min-height: 100vh; }
.br .brand h1 { font-size: 72px; }
.br .brand h1 .code { display: inline-block; margin-left: 10px; padding: 0 14px 4px; background: var(--ink); color: var(--gold); border-radius: 10px; font-style: normal; letter-spacing: 4px; }
.namebox { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 14px; border: 3px solid var(--ink); border-radius: 7px; background: var(--card); font: 700 17px var(--fc); letter-spacing: 1.5px; text-transform: uppercase; }
.namebox input { width: 170px; height: 30px; border: 0; border-left: 3px solid var(--ink); padding: 0 10px; background: #fff; font: 700 20px var(--fc); letter-spacing: 1px; color: var(--ink); outline: none; }
a.chip { text-decoration: none; color: var(--ink); }

/* la balle choisie + les deux modes */
.br-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.hero {
  position: relative; display: flex; align-items: center; gap: 24px;
  padding: 22px 26px 18px 18px; background: var(--card);
  border: 4px solid var(--ink); border-radius: 12px; box-shadow: 7px 7px 0 var(--ink);
}
.hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--c1); border-bottom: 3px solid var(--ink); border-radius: 8px 8px 0 0; }
.hero-cv { width: clamp(150px, 21vh, 250px); height: clamp(150px, 21vh, 250px); flex: none; }
.hero-txt { min-width: 0; padding-top: 6px; }
.hero h2 { margin: 6px 0 6px; font: italic 800 64px/0.92 var(--fc); text-transform: uppercase; }
.hero .pw { margin: 0 0 10px; font: 700 18px var(--fc); letter-spacing: 2px; text-transform: uppercase; }
.kit { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kit li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline; font: 500 16px/1.3 var(--fb); color: rgba(21, 21, 21, 0.8); }
.kit li b { display: inline-block; text-align: center; padding: 2px 6px; background: var(--ink); color: #fff; border-radius: 6px; font: 800 14px var(--fc); letter-spacing: 1.5px; }
.kit li b.u { background: var(--gold); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.kit li span strong { font: italic 800 19px var(--fc); text-transform: uppercase; color: var(--ink); margin-right: 6px; }

.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mode {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 20px 20px 18px; background: var(--card);
  border: 4px solid var(--ink); border-radius: 12px; box-shadow: 7px 7px 0 var(--ink);
}
.mode h3 { margin: 0; font: italic 800 46px/0.95 var(--fc); text-transform: uppercase; }
.mode p { margin: 0; color: rgba(21, 21, 21, 0.72); font-size: 15px; }
.mode .btn { margin-top: auto; align-self: stretch; }
.mode-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mode-row > span { font: 700 15px var(--fc); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); min-width: 64px; }
.mode-row .seg button { height: 36px; padding: 0 11px; font-size: 16px; }
.mode-row.join input { flex: 1; min-width: 0; height: 48px; padding: 0 12px; border: 4px solid var(--ink); border-radius: 10px; background: #fff; font: 800 26px var(--fc); letter-spacing: 4px; text-transform: uppercase; color: var(--ink); }
.mode-row.join input#serverUrl { font-size: 18px; letter-spacing: 0.5px; text-transform: none; }
.mode-row.join .btn { font-size: 22px; padding: 8px 16px 10px; }
.mode-note { font-size: 14px !important; }
.mapsel { height: 36px; padding: 0 10px; border: 3px solid var(--ink); border-radius: 7px; background: var(--card); font: 700 16px var(--fc); letter-spacing: 1px; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.mapsel:disabled { opacity: 0.6; cursor: default; }
.seg.off { opacity: 0.55; pointer-events: none; }
.lobby-team { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 6px 0 -4px; font: 800 18px var(--fc); letter-spacing: 2px; text-transform: uppercase; }
.lobby-team .btn { font-size: 16px; padding: 4px 12px 6px; box-shadow: 3px 3px 0 var(--ink); }
.lp.mate { border-color: #2A8BD4; }
.net-state { font: 700 14px var(--fc) !important; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted) !important; min-height: 17px; }
.net-state.bad { color: #C62A1F !important; }
#modeSolo::before, #modeOnline::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-bottom: 3px solid var(--ink); border-radius: 8px 8px 0 0; }
#modeSolo::before { background: repeating-linear-gradient(90deg, #E4352A 0 30px, #FFCF33 30px 60px, #169C85 60px 90px); }
#modeOnline::before { background: repeating-linear-gradient(90deg, var(--zone) 0 30px, #5865F2 30px 60px, #3DDC84 60px 90px); }

/* grille des balles : la balle choisie est marquée */
.br .card.sel { background: color-mix(in srgb, var(--c) 20%, var(--card)); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.br .card.sel::after { content: '✓'; position: absolute; top: -13px; right: 10px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--gold); font: 800 16px var(--fc); }
.br .card .minus, .br .card .badge { display: none; }
.roster.compact .group .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.roster.compact .card canvas { width: 56px; height: 56px; }
.roster.compact .card .n { font-size: 20px; }
.roster.compact .card .p { display: none; }

/* salon */
.lobby-body { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 22px; align-items: start; }
.lobby-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.lp {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px;
  background: var(--card); border: 3px solid var(--ink); border-radius: 10px;
}
.lp canvas { width: 64px; height: 64px; flex: none; }
.lp .n { font: italic 800 28px/1 var(--fc); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp .p { margin-top: 3px; font: 700 14px var(--fc); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.lp.me { background: color-mix(in srgb, var(--gold) 22%, var(--card)); }
.lp .host { position: absolute; top: -12px; right: 10px; padding: 2px 8px; background: var(--ink); color: var(--gold); border-radius: 6px; font: 800 13px var(--fc); letter-spacing: 1.5px; }
.lp.bot { border-style: dashed; background: rgba(251, 250, 247, 0.82); opacity: 0.8; }
.lobby-pick { margin: 6px 0 -6px; font: 700 16px var(--fc); letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.br-lobby .mode .btn[disabled] { opacity: 0.45; cursor: default; transform: none; }

/* la partie */
.br-game { position: fixed; inset: 0; background: #D4CDBF; overflow: hidden; }
/* le viseur : le vrai curseur (sans retard), en croix noire et blanche bien visible sur la carte */
.br-game canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='9' stroke='%23151515' stroke-width='5'/%3E%3Ccircle cx='16' cy='16' r='9' stroke='%23ffffff' stroke-width='2.2'/%3E%3Cpath d='M16 2v5M16 25v5M2 16h5M25 16h5' stroke='%23151515' stroke-width='5'/%3E%3Cpath d='M16 2v5M16 25v5M2 16h5M25 16h5' stroke='%23ffffff' stroke-width='2.2'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='2.6' fill='%23E4352A' stroke='%23151515' stroke-width='1.5'/%3E%3C/svg%3E") 16 16, crosshair; }
.br-game.cursor canvas { cursor: default; }
.br-panel { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(21, 21, 21, 0.45); z-index: 3; }
.panel-box {
  width: min(640px, 92vw); padding: 26px 30px 26px; background: var(--card);
  border: 5px solid var(--ink); border-radius: 14px; box-shadow: 10px 10px 0 var(--ink); text-align: center;
}
.panel-box.small { width: min(420px, 90vw); }
.panel-tag { margin: 0; font: 800 18px var(--fc); letter-spacing: 4px; text-transform: uppercase; color: var(--muted); }
.panel-box h2 { margin: 4px 0 2px; font: italic 800 84px/0.95 var(--fc); text-transform: uppercase; }
.panel-sub { margin: 0 0 12px; font: 600 18px var(--fb); color: rgba(21, 21, 21, 0.75); }
.panel-stats { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.panel-stats div { min-width: 118px; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; }
.panel-stats b { display: block; font: italic 800 40px/1 var(--fc); }
.panel-stats span { font: 700 13px var(--fc); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.panel-rank { list-style: none; margin: 0 auto 16px; padding: 0; max-width: 460px; text-align: left; }
.panel-rank li { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-bottom: 2px solid rgba(21, 21, 21, 0.1); font: 700 19px var(--fc); letter-spacing: 1px; text-transform: uppercase; }
.panel-rank li i { font-style: normal; width: 34px; font: italic 800 24px var(--fc); }
.panel-rank li em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 16px; }
.panel-rank li.me { background: color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 6px; }
.panel-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.panel-btns .btn { font-size: 26px; }
.net-bad { position: absolute; top: 140px; left: 50%; transform: translateX(-50%); padding: 8px 16px; background: #C62A1F; color: #fff; border-radius: 8px; font: 800 18px var(--fc); letter-spacing: 1.5px; text-transform: uppercase; z-index: 2; }

/* ─────────────── version web (page servie par le serveur : balldash.io) ─────────────── */
/* un texte « local » (fichier ouvert sur le PC) et un texte « web » : un seul des deux s'affiche */
.hosted .t-local, html:not(.hosted) .t-web { display: none !important; }
.hosted #toClassic, .hosted #onlineFar { display: none !important; }
.brand h1 .logo em { font-style: inherit; color: var(--zone); }
.n-balls { font-weight: inherit; }
.kicker { margin: 2px 0 -8px; font: 700 15px var(--fc); letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.hosted .br-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hosted #modeOnline { order: -1; }
/* le salon d'abord : gros bouton, puis « ou rejoins avec un code » (le tout calé en bas, comme « Jouer ») */
#onlineHere { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hosted #goCreate { font-size: 34px; padding: 14px 20px 16px; }
.mode .or { display: flex; align-items: center; gap: 10px; font: 700 14px var(--fc); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.mode .or::before, .mode .or::after { content: ''; flex: 1; height: 3px; border-radius: 2px; background: rgba(21, 21, 21, 0.14); }
.hosted #goSolo { background: var(--card); color: var(--ink); padding: 10px 26px 12px; box-shadow: 5px 5px 0 var(--ink); }
.hosted #goSolo:hover { box-shadow: 7px 7px 0 var(--ink); }
.hosted #goSolo:active { box-shadow: 2px 2px 0 var(--ink); }
/* joueurs en ligne en ce moment */
.live { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 13px; border: 3px solid var(--ink); border-radius: 20px; background: var(--card); font: 700 16px var(--fc); letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
.live i { width: 11px; height: 11px; border-radius: 50%; background: #22B573; animation: live 1.8s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(34, 181, 115, 0.55); } 100% { box-shadow: 0 0 0 9px rgba(34, 181, 115, 0); } }
@media (prefers-reduced-motion: reduce) { .live i { animation: none; } }
/* salon : le lien à partager, bien en vue */
.share { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; background: var(--card); border: 4px solid var(--ink); border-radius: 12px; box-shadow: 7px 7px 0 var(--ink); }
.share-lab { font: italic 800 28px/1 var(--fc); text-transform: uppercase; white-space: nowrap; }
.share input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border: 3px solid var(--ink); border-radius: 8px; background: #fff; font: 700 22px var(--fc); letter-spacing: 1px; color: var(--ink); cursor: text; }
.share input:focus { outline: none; box-shadow: 0 0 0 3px var(--gold); }
.share .btn { font-size: 24px; padding: 10px 20px 12px; white-space: nowrap; }
.share .btn.primary { padding: 10px 26px 12px; }
/* les messages (lien copié, erreurs…) : visibles partout, pas seulement en partie */
body.br > .toast { position: fixed; z-index: 20; left: 50%; bottom: 22px; transform: translateX(-50%); }
body.br[data-screen="game"] > .toast { left: 18px; bottom: 18px; transform: none; }
/* téléphone ou tablette sans souris */
.touch-note { display: none; }
.hosted.touch .touch-note { display: block; position: relative; z-index: 2; margin: 0; padding: 10px 16px; background: var(--ink); color: var(--paper); text-align: center; font: 700 15px/1.3 var(--fc); letter-spacing: 1.5px; text-transform: uppercase; }

/* ─────────────── les menus du jeu : écran titre, jouer, balles, paramètres ─────────────── */
/* le décor : une vraie partie de bots derrière les menus, sous un voile clair (plus léger sur l'écran titre) */
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--paper); }
.backdrop canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s ease; }
.backdrop.on canvas { opacity: 1; }
.backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 65% at 50% 48%, rgba(236, 232, 224, 0.5), rgba(236, 232, 224, 0.78) 72%, rgba(236, 232, 224, 0.9)); }
body[data-screen="title"] .backdrop::after { background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(236, 232, 224, 0.62), rgba(236, 232, 224, 0.34) 75%, rgba(236, 232, 224, 0.5)); }
body[data-screen="game"] .backdrop { display: none; }
.br-title, .br-menu, .br-lobby { position: relative; z-index: 1; }

.topbar { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.topbar .grow { flex: 1; }
.icon-btn { width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 0; border: 3px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 800 26px/1 var(--fc); cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.icon-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); background: #fff; }
.icon-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.icon-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chip.back { font-size: 18px; }
.btn.small { font-size: 20px; padding: 6px 14px 8px; box-shadow: 3px 3px 0 var(--ink); }

/* écran titre */
.br-title { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; padding: 18px 26px 16px; }
.title-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 8px 0 18px; text-align: center; }
.logo-big { margin: 0; font: italic 800 clamp(78px, 11.5vw, 172px)/0.8 var(--fc); letter-spacing: -1px; text-transform: uppercase; color: var(--ink); text-shadow: 5px 5px 0 var(--card), 9px 9px 0 var(--ink); }
.logo-big em { font-style: inherit; color: var(--zone); }
.tagline { margin: 14px 0 10px; padding: 7px 18px 8px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 clamp(15px, 1.4vw, 19px) var(--fc); letter-spacing: 2.5px; text-transform: uppercase; }
.tagline b { font-weight: inherit; }
.menu-card { width: min(540px, 94vw); box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--card); border: 4px solid var(--ink); border-radius: 16px; box-shadow: 9px 9px 0 var(--ink); text-align: left; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font: 700 14px var(--fc); letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.field input { height: 56px; box-sizing: border-box; padding: 0 16px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; font: 800 28px var(--fc); letter-spacing: 1px; color: var(--ink); outline: none; }
.field input:focus { box-shadow: 0 0 0 3px var(--gold); }
.field input::placeholder { color: rgba(21, 21, 21, 0.3); }
.me { display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 14px 8px 8px; border: 3px solid var(--ink); border-radius: 12px; background: color-mix(in srgb, var(--c1, #FFD23F) 14%, #fff); color: var(--ink); text-align: left; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.me:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.me:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.me canvas { width: 92px; height: 92px; flex: none; }
.me-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.me-txt small { font: 700 13px var(--fc); letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.me-txt b { font: italic 800 40px/0.95 var(--fc); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-txt em { margin-top: 2px; font: 700 15px var(--fc); font-style: normal; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.me-change { flex: none; padding: 7px 12px 8px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 800 17px/1 var(--fc); letter-spacing: 1.5px; text-transform: uppercase; }
.btn.play-btn { width: 100%; margin-top: 4px; padding: 14px 20px 18px; font-size: clamp(46px, 4.4vw, 62px); letter-spacing: 1px; }
.title-foot { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; font: 700 15px var(--fc); letter-spacing: 2px; text-transform: uppercase; color: rgba(21, 21, 21, 0.62); }
.title-foot i { font-style: normal; }
.linkish { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.hosted #toClassic { display: none !important; }

/* jouer / choisir sa balle */
.br-menu { max-width: 1440px; margin: 0 auto; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; padding: 18px 28px 30px; }
.br-menu > .topbar { justify-content: flex-start; }
.menu-title { margin: 0 0 0 6px; font: italic 800 58px/0.95 var(--fc); text-transform: uppercase; }
.me-mini { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 6px; border: 3px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; text-align: left; }
.me-mini:hover { background: #fff; }
.me-mini canvas { width: 44px; height: 44px; }
.me-mini small { display: block; font: 700 11px var(--fc); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.me-mini b { display: block; font: italic 800 22px/1 var(--fc); text-transform: uppercase; }
#play .modes { flex: 1; align-content: center; gap: 30px; max-width: 1180px; width: 100%; margin: 0 auto; padding-bottom: 6vh; }
#play .mode { padding: 24px 24px 22px; gap: 12px; }
#play .mode h3 { font-size: 52px; }
#play #goSolo { font-size: 34px; padding: 12px 20px 14px; }
#play #goCreate { font-size: 36px; padding: 14px 20px 16px; }
#play .kicker { margin: 4px 0 -6px; }

.chars-body { display: grid; grid-template-columns: minmax(330px, 32%) minmax(0, 1fr); gap: 26px; align-items: start; }
.chars-body .hero { position: sticky; top: 16px; flex-direction: column; align-items: stretch; gap: 10px; padding: 26px 22px 20px; }
.chars-body .hero-cv { align-self: center; width: clamp(150px, 24vh, 230px); height: clamp(150px, 24vh, 230px); }
.chars-body .hero h2 { font-size: 56px; }
.chars-body .kit li { grid-template-columns: 82px 1fr; font-size: 15px; }
#charsOk { margin-top: 6px; font-size: 36px; }
.chars-body .roster .group .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.chars-body .card { gap: 8px; padding: 6px 10px 6px 6px; }
.chars-body .card canvas { width: clamp(50px, 7vh, 76px); height: clamp(50px, 7vh, 76px); margin: 0; }
.chars-body .card .n { font-size: 23px; overflow-wrap: anywhere; }
.chars-body .card .p { font-size: 12px; letter-spacing: 1px; }

/* salon : ta balle au-dessus des réglages */
.lobby-side { display: flex; flex-direction: column; gap: 16px; }
.me-lobby { background: var(--card); box-shadow: 5px 5px 0 var(--ink); }
.me-lobby canvas { width: 64px; height: 64px; }
.me-lobby .me-txt b { font-size: 32px; }

/* fenêtres : paramètres, comment jouer */
.modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(21, 21, 21, 0.5); }
.modal-box { width: min(560px, 100%); max-height: calc(100vh - 32px); box-sizing: border-box; overflow: auto; display: flex; flex-direction: column; gap: 4px; padding: 18px 24px 24px; background: var(--card); border: 5px solid var(--ink); border-radius: 16px; box-shadow: 10px 10px 0 var(--ink); }
.modal-box.wide { width: min(780px, 100%); }
.modal-box > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.modal-box h2 { margin: 0; font: italic 800 50px/1 var(--fc); text-transform: uppercase; }
.modal-box > .btn { margin-top: 14px; align-self: stretch; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 2px solid rgba(21, 21, 21, 0.1); }
.set-row b { display: block; font: 800 23px/1.1 var(--fc); letter-spacing: 1px; text-transform: uppercase; }
.set-row small { display: block; margin-top: 2px; font: 500 14px/1.35 var(--fb); color: var(--muted); }
.set-row .seg button { height: 38px; padding: 0 12px; font-size: 16px; }
.switch { position: relative; width: 66px; height: 38px; flex: none; padding: 0; border: 3px solid var(--ink); border-radius: 20px; background: #fff; cursor: pointer; transition: background-color 0.15s ease; }
.switch i { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); transition: transform 0.15s ease; }
.switch[aria-pressed="true"] { background: #3DDC84; }
.switch[aria-pressed="true"] i { transform: translateX(28px); }
kbd { display: inline-block; min-width: 32px; box-sizing: border-box; padding: 3px 8px 4px; border: 3px solid var(--ink); border-bottom-width: 5px; border-radius: 8px; background: #fff; font: 800 18px/1 var(--fc); letter-spacing: 1px; text-transform: uppercase; text-align: center; }
.help-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; padding: 8px 0 14px; border-bottom: 2px solid rgba(21, 21, 21, 0.1); }
.help-keys > div { display: flex; align-items: center; gap: 12px; font: 500 16px/1.25 var(--fb); }
.help-keys .k { display: flex; gap: 4px; flex: none; min-width: 150px; }
.rules { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; font: 500 16px/1.4 var(--fb); }
.rules b { font-weight: 700; }

@media (max-width: 1300px) {
  .lobby-body { grid-template-columns: minmax(0, 1fr) 380px; }
  .chars-body .roster .group .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .chars-body { grid-template-columns: 1fr; }
  .chars-body .hero { position: static; }
  #play .modes { grid-template-columns: 1fr; }
  .help-keys { grid-template-columns: 1fr; }
}
@media (max-height: 760px) {
  .logo-big { font-size: clamp(64px, 9vw, 120px); }
  .menu-card { gap: 10px; padding: 16px; }
  .me canvas { width: 72px; height: 72px; }
  .btn.play-btn { font-size: 44px; padding: 10px 20px 14px; }
}
/* (le bouton « Lancer la partie » reste à côté des joueurs tant qu'il y a la place : visible sans défiler) */
@media (max-width: 1000px) {
  .lobby-body { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .br-lobby { padding: 16px; }
  .modes { grid-template-columns: 1fr; }
  .hero { flex-direction: column; text-align: center; }
  .br .brand h1 { font-size: 52px; }
  .br-title, .br-menu { padding: 12px 14px 16px; }
  .menu-title { font-size: 40px; }
  .me-mini { display: none; }
  .chars-body .roster .group .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .share { flex-wrap: wrap; padding: 12px; }
  .share-lab, .share input { flex-basis: 100%; }
  .share .btn { flex: 1; }
}

/* ─────────────── salon : prêt, décompte, dernière partie ; en partie : les commandes de l'hôte ─────────────── */
.ready-box { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ready-btn { width: 100%; font-size: 34px; padding: 12px 20px 14px; }
.ready-btn[aria-pressed="true"] { background: #3DDC84; }
.ready-btn[aria-pressed="true"]::after { content: ' ✓'; }
.ready-note { margin: 0 !important; font: 700 15px var(--fc) !important; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted) !important; text-align: center; }
.count { margin: 0 !important; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: var(--gold) !important; text-align: center; font: italic 800 30px/1 var(--fc) !important; letter-spacing: 1px; text-transform: uppercase; }
.count.fast { background: #3DDC84; color: var(--ink) !important; }
.lobby-side .mode > .btn + .btn { margin-top: 0; }
#lobbyStart, #lobbyWatch, #lobbyStop { width: 100%; }
.lp .ready { position: absolute; top: -12px; left: 10px; padding: 2px 8px; border-radius: 6px; background: #3DDC84; color: var(--ink); font: 800 13px var(--fc); letter-spacing: 1.5px; border: 2px solid var(--ink); }
.lp.is-ready { box-shadow: 0 0 0 3px #3DDC84; }
.lp .watching { color: #8E44E8; }
.lobby-last { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: var(--card); border: 3px solid var(--ink); border-radius: 12px; font: 700 17px var(--fc); letter-spacing: 1px; text-transform: uppercase; }
.lobby-last b { font: italic 800 22px var(--fc); }
.lobby-last .pl { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; background: rgba(21, 21, 21, 0.06); }
.lobby-last .pl.p1 { background: var(--gold); }
.host-bar { position: absolute; top: 132px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; background: var(--card); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 var(--ink); font: 800 17px var(--fc); letter-spacing: 1px; text-transform: uppercase; }
.host-bar .btn { font-size: 20px; }
/* (salon : le côté droit tient sans défiler sur un écran de portable) */
.lobby-side .mode { gap: 8px; padding: 16px 18px 16px; }
.lobby-side .mode h3 { font-size: 38px; }
.lobby-side .mode-row .seg button { height: 32px; }
.lobby-side .mapsel { height: 32px; }
.me-lobby { padding: 6px 12px 6px 6px; }
.me-lobby canvas { width: 50px; height: 50px; }
.me-lobby .me-txt b { font-size: 28px; }
.ready-btn { font-size: 30px; padding: 10px 18px 12px; }
.count { font-size: 26px !important; padding: 6px 12px; }
.lobby-side .mode .btn.primary, #lobbyWatch, #lobbyStop { font-size: 26px; padding: 9px 18px 11px; }
@media (max-height: 800px) {
  .lobby-side .mode-note { display: none; }
  .br-lobby { gap: 12px; padding-top: 16px; }
  .br-lobby .brand h1 { font-size: 56px; }
}