/* ═══════════════ LE THÈME TÉLÉPHONE (Js', 1er/10 : « toute la version mobile doit être dans ce style, le style du lobby,
   toutes les pages… ça veut pas dire à chaque fois tu remets le même fond… je veux ce thème-là ») ═══════════════
   Au doigt seulement (html.tel : un téléphone ou une tablette dès l'arrivée, posé par br.html — pas un PC tactile qu'on
   touche en partie) : sur ordinateur, rien ne change. Le thème du lobby : des fonds de couleur vive, des
   cartes blanches au gros trait d'encre avec leur ombre décalée, des boutons épais (le principal en or, comme JOUER), des
   titres en capitales italiques blanches cerclées d'encre. Chaque écran a SA couleur et SON motif (dégradés CSS, blanc
   très léger) ; les rayons qui tournent restent à la recherche de partie (et au lobby, css/home.css). */

html.tel {
  --tout: 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);
  --tband: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0 10px, rgba(255, 255, 255, 0) 10px 20px);
  background: none;   /* (le fond du body couvre alors tout l'écran, encoche comprise) */
}
html.tel body { background: #241A5C; }
/* (fini la partie de bots derrière les menus : chaque écran a son fond) */
html.tel .backdrop { display: none !important; }

/* ─── les titres sur la couleur : blancs, cerclés d'encre ─── */
html.tel .br-menu .menu-title, html.tel .br-lobby .brand h1 .salon-w { color: #fff; text-shadow: var(--tout); }

/* ─── le bouton principal : en or, comme JOUER ─── */
html.tel .btn.primary { background: var(--gold); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
html.tel .btn.primary:hover { box-shadow: 5px 5px 0 var(--ink); }
html.tel .btn.primary:active { box-shadow: 1px 1px 0 var(--ink); }
html.tel .btn.primary:disabled, html.tel .btn.primary[disabled] { background: #DCD6C8; color: rgba(21, 21, 21, 0.45); }

/* ═══ PARTIES PERSO (#play) : vert → bleu, un quadrillage de points ═══ */
html.tel body[data-screen="play"] {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.13) 0 2.4px, transparent 3px) 0 0 / 26px 26px,
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.16), transparent 62%),
    linear-gradient(140deg, #22C77A 0%, #11A79C 45%, #3456DB 100%);
}
/* (au doigt, on arrive ici par « Parties perso » du lobby : l'écran ne parle que des salons — le groupe, ta balle et le
   matchmaking sont dans le lobby) */
html.tel #play #party, html.tel #play .me-mini, html.tel #play #modeMM, html.tel #play #modeOnline > h3 { display: none !important; }
/* (le titre de l'écran : « Parties perso », dans la barre du haut comme les autres écrans) */
html.tel #play .menu-title { font-size: 0; }
html.tel #play .menu-title::after { content: 'Parties perso'; font: italic 800 clamp(30px, 10vh, 58px)/0.95 var(--fc); }
html.tel #play .modes { display: flex !important; justify-content: center; align-items: center; flex: 1; min-height: 0; padding: 0 0 4px; }
html.tel #play #modeOnline { width: min(720px, 100%); max-height: 100%; box-sizing: border-box; }
html.tel #play #onlineHere { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "art or" "art join" "create rooms"; gap: 10px 18px; align-items: center; }
html.tel #play #onlineHere > p { display: none; }
html.tel #play #onlineHere .fr-art { grid-area: art; align-self: stretch; height: auto; min-height: 0; }
html.tel #play #onlineHere .or { grid-area: or; }
html.tel #play #onlineHere .join { grid-area: join; }
html.tel #play #goCreate { grid-area: create; background: var(--gold); }
html.tel #play #goRooms { grid-area: rooms; }

/* ═══ CHOISIS TA BALLE (#chars) : bleu roi, des chevrons ═══ */
html.tel body[data-screen="chars"] {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07) 25%, transparent 25%) -18px 0 / 36px 36px,
    linear-gradient(225deg, rgba(255, 255, 255, 0.07) 25%, transparent 25%) -18px 0 / 36px 36px,
    linear-gradient(315deg, rgba(255, 255, 255, 0.07) 25%, transparent 25%) 0 0 / 36px 36px,
    linear-gradient(45deg, rgba(255, 255, 255, 0.07) 25%, transparent 25%) 0 0 / 36px 36px,
    linear-gradient(160deg, #3D8BFF 0%, #2453D6 50%, #1A2C8F 100%);
}
/* (la liste des balles dans une carte blanche, comme la fiche à côté) */
html.tel .br-chars .roster-col { box-sizing: border-box; padding: 0 10px 10px; background: var(--card); border: 4px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); }
html.tel .br-chars .roster-tools { margin: 0 -10px; padding-left: 10px; padding-right: 10px; background: linear-gradient(var(--card) 84%, rgba(251, 250, 247, 0)); }

/* ═══ LE SALON (#lobby) : magenta → violet, un damier ═══ */
html.tel body[data-screen="lobby"] {
  background:
    conic-gradient(rgba(255, 255, 255, 0.07) 25%, transparent 0 50%, rgba(255, 255, 255, 0.07) 0 75%, transparent 0) 0 0 / 56px 56px,
    radial-gradient(ellipse at 40% 40%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(150deg, #F05BC8 0%, #B33BD6 45%, #6A27C2 100%);
}
html.tel .lobby-tools span, html.tel .lobby-team { color: #fff; text-shadow: var(--tout); }
html.tel .lp.empty { border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.14); }
html.tel .lp.empty:hover { background: rgba(255, 255, 255, 0.24); }
html.tel .lp.empty .add-bot { color: #fff; text-shadow: var(--tout); }
html.tel .lp.empty .free { color: rgba(255, 255, 255, 0.9); }
/* (300 px de haut : le résumé des options et la note sur une ligne — « Lancer la partie » reste visible) */
@media (max-height: 340px) {
  html.tel #lobbySumTxt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tel .lobby-side .ready-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.tel .lobby-side .mode { gap: 5px; }
}
@media (max-height: 600px) {
  /* (les options de la partie, par-dessus le salon : leur bandeau de titre) */
  html.tel .lobby-opts.open > .lo-head { margin: -10px -18px 6px; padding: 8px 12px 8px 18px; background: var(--tband), #B33BD6; border-bottom: 4px solid var(--ink); border-radius: 11px 11px 0 0; }
  html.tel .lobby-opts.open > .lo-head h3 { color: #fff; text-shadow: var(--tout); }
}

/* ═══ PAUSE : bleu nuit, des cercles ═══ */
html.tel #pause .ovs-rays, html.tel #over .ovs-rays { display: none; }
html.tel #pause.pause-screen { --ov1: #6F7BFF; --ov2: #2C2A9E; --ov3: #110D45; }
html.tel #pause .ovs-bg::before { content: ''; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.07) 0 10px, rgba(255, 255, 255, 0) 10px 34px); }
html.tel #pause .btn.primary { background: var(--gold); color: var(--ink); }

/* ═══ FIN DE PARTIE : victoire (or, des étoiles), éliminé (rouge, des rayures), fin (bleu, des points) ═══ */
html.tel #over.over-screen { --ov1: #8FE3FF; --ov2: #1F7AE0; --ov3: #0A2A66; }
html.tel #over.over-screen[data-res="won"] { --ov1: #FFE58A; --ov2: #F2A900; --ov3: #7A3D00; }
html.tel #over.over-screen[data-res="out"] { --ov1: #FF9A8A; --ov2: #D8352A; --ov3: #430A14; }
html.tel #over .ovs-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, 0.13) 0 2.4px, transparent 3px) 0 0 / 26px 26px; }
html.tel #over[data-res="won"] .ovs-bg::before { background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0 2.2px, transparent 3px) 0 0 / 38px 38px, radial-gradient(circle, rgba(255, 255, 255, 0.16) 0 1.4px, transparent 2px) 19px 19px / 38px 38px; }
html.tel #over[data-res="out"] .ovs-bg::before { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 16px, rgba(255, 255, 255, 0) 16px 32px); }
html.tel #over.over-screen .btn.primary { background: var(--gold); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }

/* ═══ LES FENÊTRES : un bandeau de titre de couleur (une par fenêtre), le reste en carte blanche ═══ */
html.tel .modal { background: rgba(14, 9, 38, 0.66); --band: #8E44E8; }
html.tel #settings { --band: #4C5FD9; }
html.tel #help { --band: #1FB873; }
html.tel #news { --band: #8E44E8; }
html.tel #partyModal { --band: #12A99C; }
html.tel #nameModal { --band: #F29A00; }
html.tel #rooms { --band: #1E9BF0; }
html.tel #mapPick { --band: #F26B1D; }
html.tel #emoteEdit { --band: #E8479A; }
html.tel #confirmKick, html.tel #confirmStart { --band: #E5484D; }
html.tel #iosFs { --band: #2D6BFF; }
html.tel #credits { --band: #B33BD6; }
html.tel #cpModal { --band: #5B4BDB; }
html.tel #cpTop { --band: #E0A100; }
html.tel .modal-box { --mbx: 24px; padding-top: 0; padding-left: var(--mbx); padding-right: var(--mbx); border-width: 4px; box-shadow: 8px 8px 0 var(--ink); }
html.tel .modal-box > header:first-child { flex: none; margin: 0 calc(-1 * var(--mbx)) 12px; padding: 9px calc(var(--mbx) - 6px) 9px var(--mbx); background: var(--tband), var(--band); border-bottom: 4px solid var(--ink); border-radius: 12px 12px 0 0; }
html.tel .modal-box > header:first-child h2 { color: #fff; text-shadow: var(--tout); }
@media (max-height: 520px) {
  /* (téléphone en paysage : un bandeau mince — la fenêtre tient toujours sans défiler) */
  html.tel .modal { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  html.tel .modal-box { --mbx: 16px; padding-bottom: 12px; }
  html.tel .modal-box > header:first-child { padding-top: 5px; padding-bottom: 5px; margin-bottom: 8px; }
  html.tel .modal-box > header:first-child h2 { font-size: 27px; }
  html.tel .modal-box > header:first-child .icon-btn { width: 36px; height: 36px; font-size: 20px; border-width: 3px; box-shadow: 2px 2px 0 var(--ink); }
}

/* (les fenêtres chargées, en paysage : tout tient sans défiler) */
@media (max-height: 520px) {
  html.tel .credits { gap: 2px; padding: 0 0 4px; }
  html.tel .credits .cr-role { margin-top: 4px; font-size: 12px; }
  html.tel .credits .cr-boss { font-size: 40px; }
  html.tel .credits .cr-team { margin-top: 2px; }
  html.tel .credits .cr-team li { padding: 4px 12px 6px; font-size: 19px; }
  html.tel .credits .cr-thanks { margin-top: 8px; font-size: 15px; }
  html.tel .credits .cr-legal { margin-top: 4px; font-size: 11px; }
  html.tel #credits .modal-box > .btn { margin-top: 6px; }
  /* (« Quitter le groupe » : un petit bouton à droite, pas un bouton géant) */
  html.tel .modal-box > .party-quit { align-self: flex-end; margin-top: 8px; font-size: 16px; padding: 5px 14px 7px; box-shadow: 3px 3px 0 var(--ink); }
}
/* (Android avec la barre du navigateur : 300 px de haut — encore plus serré) */
@media (max-height: 340px) {
  html.tel .modal-box > header:first-child { padding-top: 3px; padding-bottom: 3px; margin-bottom: 6px; }
  html.tel .modal-box > header:first-child h2 { font-size: 22px; }
  html.tel .modal-box > header:first-child .icon-btn { width: 30px; height: 30px; font-size: 17px; }
  html.tel .modal-box { padding-bottom: 9px; }
  html.tel .modal-box > .btn { margin-top: 7px; font-size: 19px; padding: 5px 16px 7px; }
  html.tel #settings .set-row { padding: 4px 0; }
  html.tel #settings .set-row b { font-size: 16px; }
  html.tel #settings .switch { width: 52px; height: 28px; }
  html.tel #settings .switch i { width: 16px; height: 16px; }
  html.tel #settings .switch[aria-pressed="true"] i { transform: translateX(24px); }
  html.tel #settings .set-row .seg button { height: 30px; font-size: 14px; }
  html.tel #settings .set-row .btn.small { font-size: 16px; padding: 4px 12px 6px; }
  html.tel .set-links { margin-top: 4px; padding-top: 5px; font-size: 12px; }
  html.tel .ht-tip { display: none; }
  html.tel .help-touch { gap: 5px; }
  html.tel .ht-ico { width: 44px; height: 32px; }
  html.tel .ht-row p, html.tel .help-game > p { font-size: 12px; line-height: 1.3; }
  html.tel .help-tabs { margin-bottom: 5px; }
  html.tel .help-tabs button { height: 28px; }
  /* (les crédits sur deux colonnes : Js' à gauche, la team à droite) */
  html.tel .credits { display: grid; grid-template-columns: auto auto; grid-template-areas: "r1 r2" "boss team" "thx thx" "legal legal"; justify-content: center; align-items: center; column-gap: 34px; }
  html.tel .credits .cr-role:nth-of-type(1) { grid-area: r1; }
  html.tel .credits .cr-boss { grid-area: boss; font-size: 36px; }
  html.tel .credits .cr-role:nth-of-type(3) { grid-area: r2; }
  html.tel .credits .cr-team { grid-area: team; }
  html.tel .credits .cr-thanks { grid-area: thx; margin-top: 4px; font-size: 14px; }
  html.tel .credits .cr-legal { grid-area: legal; justify-self: center; }
  html.tel .credits .cr-team li { font-size: 16px; padding: 3px 10px 5px; }
}
/* (le classement, invité : la ligne « Crée ton compte… » prend toute sa largeur) */
html.tel .cp-r.cp-join { grid-template-columns: auto minmax(0, 1fr); }

/* ─── tout tient sans défiler (mesuré à 844×390, 740×330 et 667×300) ─── */
@media (max-height: 520px) {
  html.tel .modal-box > header:first-child { margin-bottom: 6px; }
  html.tel .help-touch { gap: 6px; }
  html.tel .lobby-opts.open > .lo-head { padding-top: 4px !important; padding-bottom: 4px !important; margin-bottom: 4px !important; }
}
@media (max-height: 360px) {
  html.tel .modal-box > header:first-child { margin-bottom: 4px; }
  /* Comment jouer */
  html.tel .help-touch { gap: 3px; }
  html.tel .ht-row { gap: 10px; }
  html.tel .ht-ico { height: 28px; }
  html.tel .ht-row p, html.tel .help-game > p { line-height: 1.25; }
  /* Paramètres */
  html.tel #settings .set-row { padding: 3px 0; }
  html.tel #settings .set-links { margin-top: 2px; padding-top: 4px; }
  html.tel #settings .modal-box > .btn { margin-top: 5px; }
  /* Tes émotes : la roue et les émotes plus petites, les boutons en dessous */
  html.tel .ee-body { gap: 12px; }
  html.tel .ee-wheel { --R: 55px; --D: 36px; width: 158px; height: 158px; }
  html.tel .ee-mid { width: 66px; }
  html.tel .ee-mid b { font-size: 13px; }
  html.tel .ee-all { gap: 6px 6px; }
  html.tel .ee-emo { height: 50px; }
  html.tel .ee-emo canvas { width: 58px; height: 58px; margin-left: -29px; top: -9px; }
  html.tel .ee-emo span { bottom: 3px; font-size: 9px; }
  html.tel .ee-btns { margin-top: 6px; }
  html.tel .ee-btns .btn { font-size: 16px; padding: 4px 12px 6px; }
  /* Ton compte (créer, se connecter) : les champs plus serrés */
  html.tel .cp-box { gap: 5px; }
  html.tel .cp-g-left, html.tel .cp-form { gap: 4px; }
  html.tel .cp-gtabs button { height: 28px; min-height: 28px; font-size: 13px; }
  html.tel .cp-field { gap: 1px; }
  html.tel .cp-field > span:first-child { font-size: 12px; line-height: 1; }
  html.tel .cp-field > span:first-child em { font-size: 11px; line-height: 1; }
  html.tel .cp-box input:not([type="checkbox"]) { height: 30px; font-size: 16px; }
  html.tel .cp-form .btn.primary { font-size: 16px; padding: 3px 16px 5px; }
  html.tel .cp-g-right { gap: 5px; padding: 8px 10px; }
  html.tel .cp-pitch { font-size: 12px; line-height: 1.3; }
  html.tel .cp-pitch b { font-size: 17px; margin-bottom: 2px; }
  html.tel .cp-perks { gap: 4px; }
  html.tel .cp-perks li { font-size: 13px; }
}
/* les options du salon (300 px de haut) : des lignes plus basses */
@media (max-height: 340px) {
  html.tel #lobbySumTxt { max-width: 100%; }
  html.tel .lobby-opts.open { gap: 3px !important; padding: 6px 14px 8px !important; }
  html.tel .lobby-opts.open > .lo-head { margin: -6px -14px 3px !important; padding: 2px 8px 2px 14px !important; }
  html.tel .lobby-opts.open > .lo-head h3 { font-size: 20px !important; }
  html.tel .lobby-opts.open > .lo-head .icon-btn { width: 30px; height: 30px; font-size: 17px; border-width: 2.5px; box-shadow: 2px 2px 0 var(--ink); }
  html.tel .lobby-opts .mode-row .seg button { height: 30px; min-height: 30px; padding: 0 9px; font-size: 13px; }
  html.tel .lobby-opts.open { padding-bottom: 6px !important; }
  html.tel .lobby-opts .mode-row > span { min-width: 54px; font-size: 12px; }
  html.tel .lobby-opts .map-btn { height: 30px; padding: 1px 8px 1px 2px; gap: 7px; border-width: 2.5px; }
  html.tel .lobby-opts .map-btn canvas { width: 26px; height: 26px; }
  html.tel .lobby-opts .map-btn .mb-t { gap: 1px; }
  html.tel .lobby-opts .map-btn .mb-t b { font-size: 14px; }
  html.tel .lobby-opts .map-btn .mt { font-size: 9px; padding: 1px 5px 2px; }
  html.tel .lobby-opts.open .lo-ok { font-size: 16px; padding: 2px 12px 4px; margin-top: 1px; border-width: 3px; box-shadow: 3px 3px 0 var(--ink); }
}

/* ═══ « TOURNE TON TÉLÉPHONE » (en portrait) : violet → rose, des zigzags ═══ */
@media (orientation: portrait) {
  html.tel .rotate-hint {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%) -20px 0 / 40px 40px,
      linear-gradient(225deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%) -20px 0 / 40px 40px,
      linear-gradient(315deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%) 0 0 / 40px 40px,
      linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%) 0 0 / 40px 40px,
      linear-gradient(160deg, #8E44E8 0%, #C13FD8 55%, #F05BC8 100%);
  }
  html.tel .rotate-hint::before { display: none; }
  html.tel .rh-logo { color: #fff; text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 5px 6px 0 var(--ink); }
  html.tel .rh-logo em { color: var(--gold); }
  html.tel .rh-phone { box-sizing: border-box; padding: 10px; border: 4px solid var(--ink); border-radius: 50%; background: var(--card); box-shadow: 4px 4px 0 var(--ink); }
  html.tel .rotate-hint b { color: #fff; text-shadow: var(--tout); }
  html.tel .rotate-hint small { color: rgba(255, 255, 255, 0.9); }
}

/* ═══ « ? » COMMENT JOUER, au doigt (Js', 1er/10 : « refais tout ce qui est dans ? c'est trop gros, trop bizarre ») : une
   fenêtre plus petite au milieu ; les onglets en pastilles ; les commandes en trois cartes côte à côte (l'icône dessus) ;
   les règles sur deux colonnes ; plus de gros bouton en bas (la croix ferme) ═══ */
html.tel #help .modal-box { width: min(660px, 100%); }
html.tel #help .modal-box > .btn.primary[data-close] { display: none; }
html.tel #help .help-tabs { flex: none; align-self: center; width: auto; margin: 0 0 10px; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 2px 2px 0 var(--ink); }
html.tel #help .help-tabs button { flex: none; height: 34px; padding: 0 16px; border: 0; border-left: 2.5px solid var(--ink); font-size: 14px; letter-spacing: 1px; }
html.tel #help .help-tabs button:first-child { border-left: 0; }
html.tel #help .help-touch { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 10px; padding: 0 0 2px; }
html.tel #help .ht-row { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 10px 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: #F2EEE6; text-align: center; }
html.tel #help .ht-row p { font-size: 13px; line-height: 1.35; }
html.tel #help .ht-tip { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 13px; }
html.tel #help .rules { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px 22px; margin: 0; font-size: 13px; line-height: 1.35; }
html.tel #help .help-game > p { margin-bottom: 6px; font-size: 13px; line-height: 1.4; }
html.tel #help .help-game .rules { grid-template-columns: minmax(0, 1fr); gap: 5px; }
html.tel #help .help-more .btn { font-size: 16px; padding: 4px 14px 6px; }
@media (max-height: 520px) {
  html.tel #help .help-tabs { margin-bottom: 8px; }
  html.tel #help .help-tabs button { height: 30px; font-size: 13px; padding: 0 14px; }
  html.tel #help .ht-row { gap: 4px; padding: 6px 8px 8px; border-width: 2.5px; border-radius: 12px; }
  html.tel #help .ht-row p { font-size: 12.5px; line-height: 1.3; }
  html.tel #help .ht-tip { padding: 5px 10px; font-size: 12px; }
  html.tel #help .rules { gap: 5px 18px; font-size: 12.5px; line-height: 1.3; }
}
@media (max-height: 340px) {
  html.tel #help .help-tabs button { height: 26px; font-size: 12px; padding: 0 12px; }
  html.tel #help .ht-row p { font-size: 11.5px; }
  html.tel #help .rules { gap: 3px 14px; font-size: 11.5px; line-height: 1.25; }
  html.tel #help .help-game > p { font-size: 11.5px; }
  html.tel #help .help-more { margin-top: 6px !important; }
}
/* (« Crée ton compte » au lancement : son image va jusqu'au bord de la fenêtre — plus de bande blanche à gauche) */
html.tel .modal-box.cp-hello-box { padding: 0; }
/* (l'écran de fin au doigt : « Quitter » puis « Rejouer », en bas à droite, sous le pouce — js/br/app.js overBtnsTel) */
html.tel #over.over-screen .over-btns { justify-content: flex-end; }
html.tel #over.over-screen .over-btns #btnCont { order: 1; }
html.tel #over.over-screen .over-btns #btnAgain, html.tel #over.over-screen .over-btns #btnNext { order: 2; }

/* « Images/s max » (60 · 120) : au doigt seulement ; la note dessous (écran bloqué à 60 : Safari sur iPhone…) sur toute la
   largeur de la fenêtre */
.set-fps, .set-hint { display: none; }
html.tel #settings .set-fps { display: flex; }
html.tel #settings .set-hint:not([hidden]) { display: block; grid-column: 1 / -1; margin: 4px 0 2px; padding: 6px 10px 7px; border-radius: 8px; background: #FFF4D0; color: var(--ink); font: 600 12.5px/1.35 var(--fb); }
html.tel #settings .set-hint b { font-weight: 800; }
/* (la note affichée : on retire les liens du bas — Comment jouer, Nouveautés, Crédits — pour que tout tienne sans défiler) */
html.tel #settings .modal-box:has(#fpsHint:not([hidden])) .set-links { display: none; }