/* Interface téléphone (largeur < 1024 px : téléphones et tablettes en portrait), chargée seulement dans cette plage. Même style Dock que le PC, pensée pour le pouce. */
html,body{overscroll-behavior:none}
body{display:block;padding:0;height:100vh;height:100dvh;overflow:hidden;-webkit-text-size-adjust:100%;-webkit-touch-callout:none;--bar:64px}
.pc-only{display:none!important}
#tel{display:grid;grid-template-rows:minmax(0,1fr) auto auto;height:100%}
.ecrans{min-height:0;position:relative}
.ecran{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top) + 12px) max(14px,env(safe-area-inset-right)) 14px max(14px,env(safe-area-inset-left))}
.ecran[hidden]{display:none}
#ecran-jouer{overflow:hidden}
.ecran-titre{margin:0;font-size:26px;font-weight:800;letter-spacing:-.02em;flex:1}

/* jouer */
.tel-stats{display:grid;grid-template-columns:1.6fr 1fr 1fr;align-items:end;text-align:center}
.tstat small{display:block;font-size:11px;font-weight:500;opacity:.65}
.tstat b{font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tscore b{font-size:40px;font-weight:800;letter-spacing:-.04em}
.tel-scene{flex:1;min-height:0;position:relative}
/* zone de jeu : ni zoom, ni défilement, ni sélection, ni menu de pression longue pendant qu'on claque */
.tel-scene .arena{touch-action:none;border-radius:28px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tel-scene .arena *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tel-scene .facewrap{height:min(96%,100vw)}
.voisins{padding:10px 12px}
.voisins .rt{display:flex;gap:8px;align-items:center;margin:0 0 4px}
.voisins .row{font-size:15px;padding:.45em .5em}
@media (max-height:700px){.voisins .row.loin{display:none}}

/* classements */
.tel-entete{display:flex;align-items:center;gap:8px}
.icone{width:48px;height:48px;border-radius:16px;border:0;background:rgba(255,255,255,.55);display:grid;place-items:center;padding:0;box-shadow:0 4px 10px rgba(120,50,40,.18)}
.icone svg,.tel-nav svg{width:26px;height:26px;fill:none;stroke:#3d2217;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.puces{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;padding:4px;border-radius:18px;background:rgba(255,255,255,.28);border:.5px solid rgba(255,255,255,.7)}
.puce{min-height:44px;padding:0 6px;border:0;border-radius:14px;background:none;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.puce[aria-pressed=true]{background:rgba(255,255,255,.8);box-shadow:0 2px 8px rgba(120,50,40,.2)}
.filtre{margin:0;font-size:13px;font-weight:600;display:flex;gap:8px;align-items:center;opacity:.85}
.liste-classement{padding:6px}
.liste-classement .row{font-size:15px;padding:.6em .6em;min-height:48px}
.liste-classement .row .rk{font-size:.8em}
#tel-moi{position:sticky;bottom:-14px;padding-bottom:14px;background:#fff3ec;border-radius:14px}
#tel-moi .mon-rang{margin-top:0;border-top:0}
#tel-moi .row{font-size:15px;min-height:0}

/* boutique et profil */
.vide{padding:28px 18px;text-align:center;font-size:16px;font-weight:600}
.vide p{margin:0}
.prof-tete{display:flex;align-items:center;gap:14px;padding-top:6px}
.av.grand{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.6);display:grid;place-items:center;flex:none}
.av.grand svg{width:42px;height:42px;fill:none;stroke:#3d2217;stroke-width:1.5;stroke-linecap:round;opacity:.7}
.groupe{padding:4px 14px;display:flex;flex-direction:column}
.champ{display:flex;flex-direction:column;gap:6px;padding:10px 0;font-size:13px;font-weight:600}
.champ input{height:48px;border-radius:14px;border:.5px solid rgba(255,255,255,.8);background:rgba(255,255,255,.4);padding:0 14px;font:inherit;font-size:16px;color:inherit}
.champ input:disabled{opacity:.6}
.ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0;border:0;background:none;font-size:16px;font-weight:600;text-align:start;width:100%;border-bottom:.5px solid rgba(61,34,23,.12)}
.ligne:last-child{border-bottom:0}
a.ligne{color:inherit;text-decoration:none}
.bientot{font-size:13px;font-weight:500;opacity:.65;text-align:end}
.lien::after{content:"";width:9px;height:9px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg);opacity:.5}
[dir=rtl] .lien::after{transform:rotate(135deg)}
.interrupteur{width:56px;height:34px;border-radius:999px;border:0;background:rgba(61,34,23,.25);position:relative;padding:0;transition:background .2s}
.interrupteur::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:inset-inline-start .2s}
.interrupteur[aria-checked=true]{background:#e0643f}
.interrupteur[aria-checked=true]::after{inset-inline-start:25px}
#tel-langue .lst-bouton{background:rgba(255,255,255,.5);border:0;border-radius:12px;min-height:44px;padding:0 10px;font-size:16px;font-weight:600;max-width:12em}

/* menu fixe en bas */
.tel-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  background:rgba(255,255,255,.3);border-top:.5px solid rgba(255,255,255,.8);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%)}
.tel-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border:0;border-radius:16px;background:none;font-size:10.5px;font-weight:600;padding:4px 0;min-width:0}
.tel-nav .tel-partager svg{stroke:#e0643f;stroke-width:2}
.tel-nav .tel-partager{color:#b8431f}
.tel-nav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tel-nav button[aria-current=page]{background:rgba(255,255,255,.7);box-shadow:0 2px 8px rgba(120,50,40,.18)}

/* feuille de choix (planète, horloge) */
.feuille{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.feuille[hidden]{display:none}
.feuille .fond{position:absolute;inset:0;background:rgba(61,34,23,.35)}
.feuille .contenu{position:relative;width:100%;padding:18px 16px calc(16px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:rgba(255,236,224,.92);backdrop-filter:blur(30px);box-shadow:0 -10px 40px rgba(120,50,40,.25);animation:feuille .25s ease-out}
.feuille h2{margin:0 0 10px;font-size:18px}
.option{display:flex;align-items:center;width:100%;min-height:52px;padding:0 14px;border:0;border-radius:14px;background:none;font-size:16px;font-weight:600;text-align:start}
.option[aria-checked=true]{background:rgba(255,255,255,.8)}
.fermer{width:100%;min-height:52px;margin-top:8px;border:0;border-radius:14px;background:rgba(61,34,23,.9);color:#fff;font-size:16px;font-weight:700}
@keyframes feuille{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* bandeau serveur injoignable : au-dessus du menu du bas */
.hors-ligne{bottom:calc(var(--bar) + 16px + env(safe-area-inset-bottom))}
.invite-bandeau{margin:0 8px 8px;padding:8px 12px;gap:6px 12px;font-size:12.5px}
#tel-recherche[hidden]{display:none}
#tel-recherche .rech-champ{font-size:16px;padding:10px 12px}
#tel-recherche .rech-resultats{max-height:40vh}
#tel-recherche .rech-item{font-size:15px;min-height:44px}
#tel-recherche .rech-item{grid-template-columns:auto minmax(0,1fr) auto auto}
#tel-recherche .rech-item .sc{grid-column:auto}