/* ============================================================
   CrazyViki — DUEL SUR SMARTPHONE (26/10/2026)
   S'applique seulement sous html.mode-tel (écran tactile, petit côté ≤ 500 px : Galaxy S21 = 360×800 / 800×360 ; voir scene.js).
   Même arène que sur PC (duel.js / duel.css) : aucune pièce du DOM n'est recréée, la mise en page est refaite en CSS GRID
   (les trois colonnes de l'arène passent en « display:contents » : chaque pièce se place elle-même dans la grille).
   → la rotation du téléphone en pleine partie garde l'état de la partie, les cartes volantes et les pseudos.
   Maquettes validées : dev\direction-artistique\duel-mobile\duel-mobile-portrait-v3.png et duel-mobile-paysage-v4.png
   Les tailles utilisent les unités de conteneur de l'arène (cqw / cqh) : elles suivent le vrai écran, barre d'état et gestes déduits.
   ============================================================ */

/* ---------- bouton « … » (menu : plein écran, abandonner) : caché hors smartphone ---------- */
.arene-menu-btn,.arene-menu{display:none}

html.mode-tel .arene{
  position:fixed;inset:0;z-index:40;container-type:size;touch-action:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
  padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  display:grid;
  /* carte de la main (portrait : 5 sur une rangée) et dos de la main adverse */
  --hw:calc((100cqw - 20px) / 5);
  --hh:calc(var(--hw) * 88 / 63);
  --dw:min(46px,calc((100cqw - 40px) / 5));
  --dh:calc(var(--dw) * 88 / 63);
  /* place restante pour la table : tout le reste a une hauteur fixe (voir grid-template-rows) */
  --fixe:calc(34px + var(--dh) + 54px + 10px + 54px + var(--hh) + 30px);
  --vres:136px;                                                              /* place gardée dans la table pour le verdict : titre en haut, caractères en bas */
  --sh:calc(100cqh - var(--fixe) - 24px - var(--vres));                                   /* hauteur d'une carte posée sur la table */
  --sw:min(calc(50cqw - 20px),calc(var(--sh) * 63 / 88));                   /* largeur d'une carte posée sur la table */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:34px var(--dh) 54px minmax(0,1fr) 10px 54px var(--hh);
  gap:5px 0;
  background:#10150f;
}
html.mode-tel .arene *{-webkit-user-select:none;user-select:none}
/* les trois colonnes de l'arène PC disparaissent du dessin : leurs pièces rejoignent la grille */
html.mode-tel .arene-gauche,html.mode-tel .arene-droite,html.mode-tel .arene-centre{display:contents}
html.mode-tel .arene-fond{position:absolute;inset:0}

/* ---------- en-tête ---------- */
html.mode-tel .arene-haut{grid-column:1/-1;grid-row:1;position:relative;left:auto;right:auto;top:auto;height:34px;padding:0;gap:6px;background:none;z-index:6}
html.mode-tel .arene-titre{font-size:15px;gap:5px;white-space:nowrap}
html.mode-tel .arene-titre .emo{font-size:17px}
html.mode-tel .arene-titre .pli-compteur{font-size:12px}
html.mode-tel .amb-nom{display:none}
html.mode-tel .arene-haut>[data-act="plein"],html.mode-tel .arene-haut>[data-act="abandon"]{display:none}
html.mode-tel .chrono{font-size:12px;gap:3px}
html.mode-tel .chrono>span:last-child{display:none}
html.mode-tel .chrono .anneau{width:34px;height:34px;font-size:13px}
html.mode-tel .chrono .anneau::before{inset:3px}
html.mode-tel .arene-menu-btn{display:grid;place-items:center;width:34px;height:34px;padding:0;font-size:20px;line-height:1;border-radius:50%}
html.mode-tel .arene-menu:not([hidden]){display:flex;flex-direction:column;gap:6px;position:absolute;right:0;top:38px;z-index:30;padding:8px;border-radius:14px;
  background:var(--ar-plaque-bg);border:2px solid var(--ar-plaque-bord);box-shadow:0 10px 24px rgba(0,0,0,.55);backdrop-filter:blur(6px)}
html.mode-tel .arene-menu .arene-btn{font-size:14px;padding:9px 14px;white-space:nowrap;min-height:40px}

/* ---------- main de l'adversaire (dos) ---------- */
html.mode-tel .main-ordi{grid-column:1/-1;grid-row:2;position:relative;left:auto;top:auto;width:auto;height:var(--dh);gap:6px;align-items:center;justify-content:center;pointer-events:none}
html.mode-tel .dos-main{width:var(--dw);transform:none!important;transition:none;direction:ltr}
html.mode-tel .dos-main.vacant{aspect-ratio:63/88;border:2px dashed rgba(255,255,255,.35);border-radius:7px;background:rgba(255,255,255,.04)}

/* ---------- plaques (avatar, pseudo, score) ---------- */
html.mode-tel .plaque{position:relative;left:auto;right:auto;top:auto;bottom:auto;height:54px;gap:6px;padding:4px 150px 4px 8px;border-width:2px;border-radius:14px}
html.mode-tel .plaque.ordi{grid-column:1/-1;grid-row:3}
html.mode-tel .plaque.joueur{grid-column:1/-1;grid-row:6}
html.mode-tel .plaque>div:nth-child(3){flex:1 1 0;min-width:0}
html.mode-tel .plaque .av{width:38px;height:38px;font-size:26px;border-width:1.5px}
html.mode-tel .plaque .av .av-img{width:30px;height:30px}
html.mode-tel .plaque .nom{font-size:13px;line-height:1.05;max-height:28px}
html.mode-tel .plaque .lib{font-size:10px;line-height:1.1}
html.mode-tel .plaque.ordi .lib{display:none}
html.mode-tel .plaque .etat{font-size:10px;margin-top:1px;gap:4px}
html.mode-tel .plaque .etat .pt{width:7px;height:7px}
html.mode-tel .plaque .score{position:absolute;right:10px;top:50%;margin:0;transform:translateY(-50%)}
html.mode-tel .plaque .score b{font-size:26px}
html.mode-tel .plaque .score i{font-size:8px}
html.mode-tel .plaque .premier-tag{white-space:nowrap;left:56px;right:auto;top:-9px;font-size:9px;padding:1px 8px;z-index:3}
html.mode-tel .plaque.ordi .premier-tag{top:auto;bottom:-9px}
html.mode-tel .plaque.premier{box-shadow:0 0 0 1px color-mix(in srgb,var(--jc,#fff) 70%,transparent),0 0 14px 3px color-mix(in srgb,var(--jc,#fff) 75%,transparent),0 0 30px 8px color-mix(in srgb,var(--jc,#fff) 35%,transparent)}

/* ---------- piles « pioche » et « plis » (dans la plaque en portrait) ---------- */
html.mode-tel .pioche,html.mode-tel .plis{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:42px;height:auto;padding:0;gap:2px;z-index:2;
  flex-direction:column;justify-content:center;align-items:center;align-self:center;justify-self:end;cursor:pointer}
html.mode-tel .pioche.ordi,html.mode-tel .plis.ordi{grid-column:1/-1;grid-row:3}
html.mode-tel .pioche.joueur,html.mode-tel .plis.joueur{grid-column:1/-1;grid-row:6}
html.mode-tel .plis{margin-right:62px}
html.mode-tel .pioche{margin-right:106px}
html.mode-tel .pioche .pile,html.mode-tel .plis .pile{width:24px;height:34px;margin-bottom:1px}
html.mode-tel .pile.vide{border-width:1.5px;border-radius:4px;padding:0;display:block}
html.mode-tel .pioche .lib,html.mode-tel .plis .lib{order:0;font:600 9px/1.1 var(--display,inherit);white-space:nowrap}
html.mode-tel .pioche .lib b,html.mode-tel .plis .lib b{font-size:12px;color:var(--ar-or)}
html.mode-tel .plis .cpt{display:none}
html.mode-tel .plis:hover .pile,html.mode-tel .plis:focus-visible .pile{transform:none}
html.mode-tel .pile .couche{transform-origin:50% 50%}

/* ---------- table : ma carte à gauche, celle de l'adversaire à droite ---------- */
html.mode-tel .tapis{grid-column:1/-1;grid-row:4;position:relative;left:auto;top:auto;width:auto;height:auto;border-radius:18px;border-width:2px;backdrop-filter:none;
  box-shadow:inset 0 0 30px rgba(0,0,0,.35),0 8px 20px var(--ar-tapis-ombre)}
html.mode-tel .emp{position:relative;left:auto;top:auto;width:var(--sw);height:auto;aspect-ratio:63/88;align-self:center;justify-self:center;margin-top:20px;border-width:2px;border-radius:9px;
  transition:box-shadow .2s,border-color .2s,background .2s}
html.mode-tel .emp-joueur{grid-column:1;grid-row:4}
html.mode-tel .emp-ordi{grid-column:2;grid-row:4}
html.mode-tel .emp::before{position:absolute;left:-10px;right:-10px;top:-24px;text-align:center;font:600 12px/1 var(--display,inherit);color:#fff;text-shadow:0 2px 4px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.mode-tel .emp-joueur::before{content:"Ta carte"}
html.mode-tel .emp-ordi::before{content:attr(data-nom)}
/* l'emplacement où l'on peut déposer ma carte : bordure dorée ; il s'illumine quand la carte passe dessus */
html.mode-tel .arene.en-glisse .emp-joueur,html.mode-tel .arene.carte-choisie .emp-joueur{border-color:var(--ar-or);background:rgba(247,215,116,.08)}
html.mode-tel .arene.sur-zone .emp-joueur{border-color:#fff;background:rgba(247,215,116,.26);box-shadow:0 0 0 3px rgba(247,215,116,.65),0 0 24px 6px rgba(247,215,116,.6)}
html.mode-tel .arene.en-glisse .tapis,html.mode-tel .arene.carte-choisie .tapis{border-color:var(--ar-or)}
html.mode-tel .arene.sur-zone .tapis{box-shadow:inset 0 0 40px rgba(247,215,116,.3),0 8px 20px var(--ar-tapis-ombre)}
html.mode-tel .vs{grid-column:1/-1;grid-row:4;position:relative;left:auto;top:auto;width:34px;height:34px;line-height:30px;justify-self:center;align-self:center;margin-top:20px;
  border-radius:50%;font-size:12px;letter-spacing:0;background:rgba(14,20,44,.92);border:2px solid var(--ar-tapis-bord);z-index:3;text-shadow:0 0 8px #ffd65a}
/* la carte de l'adversaire, de dos : pastille « a choisi » (comme sur la maquette) */
html.mode-tel .vol.adv:has(.flip.dos)::after{content:"✓ a choisi";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px 10px;border-radius:999px;white-space:nowrap;
  font:700 12px/1 var(--display,inherit);color:#7dffb2;background:rgba(10,24,22,.88);border:2px solid #7dffb2;box-shadow:0 0 10px rgba(125,255,178,.5);z-index:3;pointer-events:none}
/* tas d'égalité */
html.mode-tel .pot{grid-column:1/-1;grid-row:4;position:relative;left:auto;top:auto;width:auto;flex-direction:row;gap:6px;align-self:end;justify-self:center;margin-bottom:2px;padding:2px 8px;z-index:3;
  border-radius:10px;background:rgba(10,16,36,.82)}
html.mode-tel .pot .pile{width:20px;height:28px}
html.mode-tel .pot .lib{font-size:10px}
html.mode-tel .invite,html.mode-tel .attente-adv{display:none!important}   /* pas de rappel de règle à l'écran : l'état est dit par la plaque de l'adversaire */

/* ---------- verdict : tout est écrit en gros DANS le cadre de la table ----------
   en haut : qui gagne le pli et combien de points ; en bas : le nombre de caractères, sous la carte de chacun */
html.mode-tel .verdict{grid-column:1/-1;grid-row:4;position:relative;left:auto;top:auto;width:auto;height:auto;margin:8px 6px;z-index:4;pointer-events:none;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr);align-items:end}
html.mode-tel .verdict .v-ordi,html.mode-tel .verdict .v-joueur,html.mode-tel .verdict .v-res{position:static;left:auto;top:auto;width:auto}
html.mode-tel .verdict .v-res{grid-column:1/-1;grid-row:1;align-self:start;justify-self:center;text-align:center;font-size:clamp(20px,7.6cqw,34px);line-height:1.1;
  padding:6px 16px 7px;border-radius:16px;background:rgba(8,14,32,.8);border:2px solid currentColor;max-width:100%}
html.mode-tel .verdict .v-res small{font-size:.56em;margin-top:3px}
html.mode-tel .verdict .v-joueur,html.mode-tel .verdict .v-ordi{grid-row:2;align-self:end;justify-self:center;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:3px 16px 4px;border-radius:14px;background:rgba(8,14,32,.78);max-width:96%}
html.mode-tel .verdict .v-joueur{grid-column:1}
html.mode-tel .verdict .v-ordi{grid-column:2}
html.mode-tel .verdict .who{font-size:clamp(12px,3.8cqw,17px);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.mode-tel .verdict b{font-size:clamp(30px,11.5cqw,48px);line-height:1}
html.mode-tel .verdict i{font-size:clamp(11px,3.4cqw,15px)}
/* pendant le verdict, les étiquettes « Ta carte » / prénom laissent la place */
html.mode-tel .arene:has(.verdict.on) .emp::before{visibility:hidden}

/* ---------- ma main : on glisse une carte sur la table ---------- */
html.mode-tel .main-joueur{grid-column:1/-1;grid-row:7;position:relative;left:auto;top:auto;width:auto;height:var(--hh);gap:5px;align-items:flex-end;justify-content:center;pointer-events:none}
html.mode-tel .carte-main{width:var(--hw);touch-action:none;transition:transform .18s ease-out;-webkit-touch-callout:none}
html.mode-tel .carte-main::after{display:none}
html.mode-tel .carte-main:hover,html.mode-tel .carte-main:focus-visible{transform:none}
html.mode-tel .carte-main.vacant{aspect-ratio:63/88;height:auto;border:2px dashed rgba(255,255,255,.35);border-radius:7px;background:rgba(255,255,255,.04);pointer-events:none;cursor:default}
html.mode-tel .arene{--sel:1.6}   /* facteur d'agrandissement d'une carte de la main après un simple appui (le décalage est calculé dans duel.js) */
html.mode-tel .carte-main.choisie{transform:translateY(-10px) scale(1.06);transform-origin:50% 50%;z-index:60;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
html.mode-tel .carte-main.glisse{transition:none;transform-origin:50% 50%;z-index:50;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
html.mode-tel .carte-main.retour{transition:transform .25s ease-out}
/* la case « car. » (nombre de caractères) est agrandie ×2,1 directement sur la carte : c'est ce qui décide du pli */
html.mode-tel .carte-main .pied .ecusson:last-child{transform:scale(2.1);transform-origin:100% 100%;position:relative;z-index:3}
html.mode-tel .carte-main .pied .ecusson:last-child b{text-shadow:0 .6cqw 0 rgba(0,0,0,.7),0 0 2.5cqw rgba(0,0,0,.9)}

/* ---------- auras plus fines : les cartes sont petites ---------- */
html.mode-tel .arene .az .aura-d{box-shadow:0 0 4px 1px var(--aura),0 0 10px 3px color-mix(in srgb,var(--aura) 55%,transparent)!important}
html.mode-tel .arene .az.crazy .aura-d{box-shadow:0 0 5px 2px #fff,0 0 18px 6px var(--aura),0 0 32px 12px color-mix(in srgb,var(--aura) 70%,transparent)!important}
html.mode-tel .arene .az.super .aura-d::before{inset:-5px;padding:5px;filter:blur(1.5px)}
html.mode-tel .arene .vol .aura-d{box-shadow:0 0 5px 2px var(--aura),0 0 16px 5px color-mix(in srgb,var(--aura) 55%,transparent)!important}
html.mode-tel .arene .vol.crazy .aura-d{box-shadow:0 0 8px 3px #fff,0 0 28px 10px var(--aura),0 0 54px 20px color-mix(in srgb,var(--aura) 70%,transparent)!important}
html.mode-tel .arene .vol.gagnante .aura-d{box-shadow:0 0 10px 5px var(--aura),0 0 30px 14px color-mix(in srgb,var(--aura) 80%,transparent),0 0 60px 26px color-mix(in srgb,var(--aura) 42%,transparent)!important}
html.mode-tel .arene .vol.gagnante.crazy .aura-d{box-shadow:0 0 14px 6px #fff,0 0 50px 22px var(--aura),0 0 90px 40px color-mix(in srgb,var(--aura) 75%,transparent)!important}
html.mode-tel .arene .vol.super .aura-d::before{inset:-7px;padding:7px;filter:blur(2px)}

html.mode-tel .vol.gagnante .flip{transform:scale(1.025)}

/* ---------- aperçu du dernier pli (appui sur la pile) ---------- */
html.mode-tel .dernier-pli,html.mode-tel .dernier-pli.cote-o,html.mode-tel .dernier-pli.cote-j{left:50%;top:50%;right:auto;max-width:96cqw;padding:10px 12px;border-radius:16px;border-width:2px;
  animation:dp-entree-tel .22s ease-out both;transform:translate(-50%,-50%)}
html.mode-tel .dp-titre{font-size:14px;margin-bottom:6px}
html.mode-tel .dp-cartes{gap:12px}
html.mode-tel .dp-who{font-size:12px;max-width:min(120px,38cqw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.mode-tel .dp-carte{width:min(116px,36cqw)}
html.mode-tel .dp-col b{font-size:20px}
html.mode-tel .dp-col b i{font-size:10px}
html.mode-tel .dp-bas{font-size:13px;margin-top:6px}
@keyframes dp-entree-tel{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}

/* ---------- bandeaux, fin de partie, confirmation ---------- */
html.mode-tel .annonce-crazy{top:50%;max-width:92cqw;padding:9px 16px;font-size:14px;white-space:normal;text-align:center;border-width:2px}
html.mode-tel .deco{top:44px;max-width:94cqw;padding:8px 14px;gap:8px;font-size:13px;white-space:normal;border-width:2px}
html.mode-tel .deco b{font-size:20px;min-width:34px}
html.mode-tel .deco small{font-size:10px}
html.mode-tel .fin,html.mode-tel .confirmation{padding:12px}
html.mode-tel .fin-boite{width:min(100%,360px);padding:18px 16px;border-width:3px;border-radius:22px}
html.mode-tel .fin-boite h2{font-size:30px}
html.mode-tel .fin-sous{font-size:15px;margin-bottom:12px}
html.mode-tel .fin-score{gap:20px;margin:6px 0 14px}
html.mode-tel .fin-score span{font-size:14px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.mode-tel .fin-score b{font-size:52px}
html.mode-tel .fin-score i{font-size:12px}
html.mode-tel .fin-score .tiret{font-size:34px}
html.mode-tel .fin-note{font-size:12px;margin-bottom:12px}
html.mode-tel .fin-actions{flex-direction:column;gap:10px}
html.mode-tel .fin-actions .arene-btn{font-size:17px;padding:12px 20px;min-height:46px}

/* ================================================================
   PAYSAGE — reproduit la maquette « duel-mobile-paysage-v4 » (écran 20:9 ; toutes les cotes en % de l'écran : cqh / cqw).
   • ma main à gauche (2 colonnes × 3 rangées), celle de l'adversaire à droite, cartes de 26,4 % de la hauteur ;
   • au-dessus de la table : [ma plaque] [Duel en ligne / Pli · chrono · …] [plaque de l'adversaire], pseudos sur 2 lignes (animal / adjectif) ;
   • 6e case de chaque main : une boîte avec « ★ joue 1er » (ou l'état de l'adversaire), « pioche » et « plis » ;
   • table : deux emplacements de 71 % de la hauteur, étiquettes au-dessus, VS au centre.
   ================================================================ */
html.mode-tel .boite-piles{display:none}
@media (orientation:landscape){
  html.mode-tel .arene{
    --hh:29cqh;                                      /* carte de la main : hauteur (largeur = ×63/88) — agrandie de 10 % (26,4 → 29) */
    --hw:calc(var(--hh) * 63 / 88);
    --cg:2cqh;                                       /* écart entre les 2 colonnes de la main */
    --rg:2.8cqh;                                     /* écart entre les rangées */
    --hy:2.8cqh;                                     /* haut des mains */
    --by:calc(var(--hy) + 2 * (var(--hh) + var(--rg)));   /* haut de la 6e case = boîte des piles */
    --tw:calc(94.9cqw - 87cqh);                      /* largeur de la table (inchangée : 510 px sur 915 × 412) */
    --sh:71.2cqh;                                    /* emplacement d'une carte sur la table */
    --sw:min(calc(var(--sh) * 63 / 88),calc(var(--tw) / 2 - 3.4cqw));
    grid-template-columns:2.2% auto .6% minmax(0,1fr) minmax(0,1fr) .8% auto 1.5%;
    grid-template-rows:11.9fr 87.9fr .2fr;      /* le bas de la table s'aligne sur le bas des boîtes pioche / plis (99,8 % de la hauteur) */
    gap:0;padding:0 env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);
  }
  /* ----- bandeau : titre + chrono + menu au centre, plaques aux bords de la table */
  html.mode-tel .arene-haut{grid-column:4/6;grid-row:1;justify-self:center;align-self:start;margin-top:.6cqh;height:10.7cqh;gap:1.4cqh;align-items:center;z-index:6}
  html.mode-tel .arene-haut .espace{flex:0 0 .4cqh}
  html.mode-tel .arene-titre{display:block;font-size:3.4cqh;line-height:1.2;white-space:nowrap}
  html.mode-tel .arene-titre .emo{font-size:3.8cqh}
  html.mode-tel .arene-titre .pli-compteur{display:block;font-size:2.7cqh;opacity:.92}
  html.mode-tel .pli-compteur .sep{display:none}
  html.mode-tel .chrono .anneau{width:7.7cqh;height:7.7cqh;font-size:3.2cqh}
  html.mode-tel .chrono .anneau::before{inset:.7cqh}
  html.mode-tel .arene-menu-btn{width:7.1cqh;height:7.1cqh;font-size:4cqh}
  html.mode-tel .arene-menu:not([hidden]){top:8.2cqh}
  /* ----- plaques */
  html.mode-tel .plaque{height:10.7cqh;margin-top:.6cqh;align-self:start;box-sizing:border-box;padding:0 1.6cqh;gap:1.4cqh;border-radius:2.4cqh;width:auto}
  html.mode-tel .plaque.joueur{grid-column:4/6;grid-row:1;justify-self:start;width:calc(var(--tw) * .292)}
  html.mode-tel .plaque.ordi{grid-column:4/6;grid-row:1;justify-self:end;flex-direction:row-reverse;width:calc(var(--tw) * .285)}
  html.mode-tel .plaque .av{width:8.1cqh;height:8.1cqh;font-size:5.2cqh;flex:none}
  html.mode-tel .plaque .av .av-img{width:6.8cqh;height:6.8cqh}
  html.mode-tel .plaque>div:nth-child(3){flex:1 1 0;min-width:0;text-align:left}
  html.mode-tel .plaque .nom{max-height:none;line-height:1.12;font-weight:700}
  html.mode-tel .plaque .nom .n1,html.mode-tel .plaque .nom .n2{display:block;white-space:nowrap}
  html.mode-tel .plaque .lib,html.mode-tel .plaque .premier-tag{display:none!important}
  html.mode-tel .plaque .etat{display:none!important}
  html.mode-tel .plaque .score{position:static;transform:none;margin:0;flex:none;align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  html.mode-tel .plaque .score b{font-size:5.8cqh;line-height:1}
  html.mode-tel .plaque .score i{display:block;font-size:2.1cqh;line-height:1;margin-top:.3cqh}
  /* ----- mains : 2 colonnes × 3 rangées */
  html.mode-tel .main-joueur,html.mode-tel .main-ordi{grid-row:1/4;margin:var(--hy) 0 0;align-self:start;display:grid;grid-template-columns:repeat(2,var(--hw));grid-auto-rows:var(--hh);gap:var(--rg) var(--cg);align-content:start;align-items:start;height:auto;width:auto}
  html.mode-tel .main-joueur{grid-column:2;justify-content:start}
  html.mode-tel .main-ordi{grid-column:7;direction:rtl;justify-content:end}
  html.mode-tel .dos-main{width:var(--hw)}
  html.mode-tel .carte-main.vacant{height:var(--hh)}
  html.mode-tel .dos-main.vacant{width:var(--hw);height:var(--hh)}
  /* ----- 6e case : boîte « joue 1er / état », pioche, plis */
  html.mode-tel .boite-piles{display:flex;flex-direction:column;align-items:center;gap:.6cqh;box-sizing:border-box;grid-row:1/4;align-self:start;margin-top:var(--by);width:calc(var(--hw) + .8cqh);height:33.5cqh;padding-top:1.3cqh;
    border:2px solid var(--ar-plaque-bord);border-radius:2.2cqh;background:var(--ar-plaque-bg);z-index:1;pointer-events:none}
  html.mode-tel .boite-piles.joueur{grid-column:2;justify-self:end;margin-right:-.35cqh}
  html.mode-tel .boite-piles.ordi{grid-column:7;justify-self:start;margin-left:-.45cqh}
  html.mode-tel .boite-piles .tag-1er{font:700 2cqh/1 var(--display,inherit);padding:.7cqh 1.6cqh;border-radius:999px;background:#0b1430;border:1.5px solid var(--ar-plaque-bord);color:#fff;white-space:nowrap}
  html.mode-tel .boite-piles .tag-etat{display:flex;align-items:center;gap:.8cqh;font:600 2cqh/1 var(--display,inherit);color:#e8f0ff;white-space:nowrap;padding:.7cqh 0}
  html.mode-tel .boite-piles .tag-1er[hidden],html.mode-tel .boite-piles .tag-etat[hidden]{display:none}
  html.mode-tel .tag-etat .pt{width:1.7cqh;height:1.7cqh;border-radius:50%;background:#7dffb2;box-shadow:0 0 .8cqh #7dffb2;flex:none}
  html.mode-tel .tag-etat .pt.attend{background:#ffe08a;box-shadow:0 0 .8cqh #ffe08a;animation:pt-cligne 1s ease-in-out infinite}
  html.mode-tel .tag-etat .pt.hors{background:#ff9a9a;box-shadow:0 0 .8cqh #ff9a9a}
  html.mode-tel .pioche.joueur,html.mode-tel .plis.joueur,html.mode-tel .pioche.ordi,html.mode-tel .plis.ordi{grid-row:1/4;align-self:start;box-sizing:border-box;width:calc(var(--hw) + .8cqh);height:11cqh;padding:0 .7cqh;background:none;border:0;border-radius:0;
    flex-direction:row;gap:.8cqh;justify-content:center;align-items:center;z-index:2}
  html.mode-tel .pioche{margin-top:calc(var(--by) + 7.4cqh)!important;margin-bottom:0!important}
  html.mode-tel .plis{margin-top:calc(var(--by) + 19.9cqh)!important;margin-bottom:0!important}
  html.mode-tel .pioche.joueur,html.mode-tel .plis.joueur{grid-column:2;justify-self:end;margin-right:-.35cqh!important;margin-left:0!important}
  html.mode-tel .pioche.ordi,html.mode-tel .plis.ordi{grid-column:7;justify-self:start;margin-left:-.45cqh!important;margin-right:0!important}
  html.mode-tel .pioche .pile,html.mode-tel .plis .pile{width:5.8cqh;height:8.2cqh;margin:0 .5cqh 0 0;flex:none}
  html.mode-tel .pioche .lib,html.mode-tel .plis .lib{display:flex;flex-direction:column-reverse;align-items:center;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:visible;font:600 1.9cqh/1.1 var(--display,inherit);text-align:center}
  html.mode-tel .pioche .lib b,html.mode-tel .plis .lib b{font-size:4.6cqh;line-height:1;color:#fff}
  /* ----- table au centre */
  html.mode-tel .tapis{grid-column:4/6;grid-row:2}
  html.mode-tel .emp{align-self:start;margin:14cqh 0 0}     /* cartes descendues : le haut de la table reste libre pour le résultat du pli */
  html.mode-tel .emp-joueur{grid-column:4;grid-row:2}
  html.mode-tel .emp-ordi{grid-column:5;grid-row:2}
  html.mode-tel .emp::before{left:0;right:0;top:50%;transform:translateY(-50%);font-size:3.6cqh;line-height:1.1;overflow:visible;white-space:normal;padding:0 1cqh}   /* « Ta carte » / prénom au centre de l'emplacement */
  html.mode-tel .vs{grid-column:4/6;grid-row:2;align-self:start;margin:calc(14cqh + var(--sw) * 44 / 63 - 4.7cqh) 0 0;width:9.4cqh;height:9.4cqh;line-height:8.6cqh;font-size:3.4cqh}
  /* ----- verdict : bandeau en haut de la table (titre au centre, nombre de caractères de chacun de part et d'autre) */
  html.mode-tel .verdict{grid-column:4/6;grid-row:2;align-self:start;z-index:8;margin:.7cqh .8cqh 0;max-height:13cqh;height:auto;grid-template-columns:1fr 1.55fr 1fr;grid-template-rows:auto;align-items:stretch;gap:.8cqh}
  html.mode-tel .verdict .v-res{grid-column:2;grid-row:1;align-self:center;width:100%;max-width:none;box-sizing:border-box;font-size:4.2cqh;padding:.8cqh 1.2cqh;border-radius:2cqh}
  html.mode-tel .verdict .v-res small{display:block;font-size:2.8cqh;margin-top:.2cqh}
  html.mode-tel .verdict .v-joueur,html.mode-tel .verdict .v-ordi{flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;max-width:none;box-sizing:border-box;padding:.6cqh 1cqh;border-radius:2cqh;align-self:stretch}
  html.mode-tel .verdict .v-joueur{grid-column:1;grid-row:1}
  html.mode-tel .verdict .v-ordi{grid-column:3;grid-row:1}
  html.mode-tel .verdict .who{font-size:2.5cqh;max-width:100%}
  html.mode-tel .verdict b{font-size:6cqh;line-height:1.05}
  html.mode-tel .verdict i{font-size:2.3cqh}
  html.mode-tel .pot{grid-column:4/6;grid-row:2;align-self:end;margin-bottom:.8cqh}
  html.mode-tel .deco{top:12cqh}
  /* fin de partie : compacte pour tenir dans 360 px de haut */
  html.mode-tel .fin-boite{width:min(100%,620px);padding:10px 18px;border-radius:18px}
  html.mode-tel .fin-boite h2{font-size:22px;margin:0}
  html.mode-tel .fin-sous{font-size:12px;margin:0 0 4px}
  html.mode-tel .fin-score{margin:0 0 6px;gap:18px}
  html.mode-tel .fin-score b{font-size:34px}
  html.mode-tel .fin-score span{font-size:12px}
  html.mode-tel .fin-score i{font-size:10px}
  html.mode-tel .fin-note{display:none}
  html.mode-tel .fin-actions{flex-direction:row}
  html.mode-tel .fin-actions .arene-btn{flex:1;font-size:14px;padding:8px 12px;min-height:40px}
}

/* ---------- portrait court (< 700 px de haut) : verdict plus compact, caractères sur une ligne ---------- */
@media (orientation:portrait) and (max-height:699px){
  html.mode-tel .arene{--vres:100px}
  html.mode-tel .verdict .v-res{font-size:clamp(18px,6.2cqw,24px);padding:4px 12px 5px;border-radius:13px}
  html.mode-tel .verdict .v-res small{font-size:.58em;margin-top:1px}
  html.mode-tel .verdict .v-joueur,html.mode-tel .verdict .v-ordi{flex-direction:row;align-items:baseline;gap:6px;padding:2px 10px 3px}
  html.mode-tel .verdict .who{font-size:clamp(11px,3.3cqw,13px);max-width:7.5em}
  html.mode-tel .verdict b{font-size:clamp(24px,8cqw,32px)}
  html.mode-tel .verdict i{font-size:11px}
}

/* ---------- très petits écrans en hauteur (portrait < 600 px) : on resserre ---------- */
@media (orientation:portrait) and (max-height:600px){
  html.mode-tel .arene{--dw:min(36px,calc((100cqw - 40px) / 5))}
  html.mode-tel .plaque{height:48px}
}

/* ================================================================
   Onglet « Duel » et écrans autour de l'arène, sur smartphone
   ================================================================ */
html.mode-tel .duel-accueil{gap:10px}
html.mode-tel .duel-regles{columns:1;padding-left:18px;font-size:.9rem}
html.mode-tel .duel-deck{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
html.mode-tel .duel-actions{gap:8px}
html.mode-tel .duel-actions .btn{flex:1 1 140px;min-height:44px}
html.mode-tel .duel-ligne{display:flex;flex-direction:column;align-items:stretch}
html.mode-tel .duel-ligne>.duel-actions{flex-wrap:wrap}
html.mode-tel .duel-bloc{padding:10px 12px}
html.mode-tel .duel-version .puce{padding:9px 12px;font-size:.9rem;min-height:40px}
html.mode-tel .duel-ambiance h3{font-size:1.1rem}

/* recherche d'un adversaire */
html.mode-tel .recherche{position:fixed;inset:0;container-type:size;padding:12px}
html.mode-tel .recherche .boite{width:min(100%,360px);padding:18px 16px;border-width:3px;border-radius:22px;gap:10px}
html.mode-tel .recherche h2{font-size:22px}
html.mode-tel .radar{width:150px;height:150px}
html.mode-tel .radar::before{inset:24px}
html.mode-tel .radar::after{inset:50px}
html.mode-tel .radar .moi{width:52px;height:52px;margin:-26px;font-size:32px}
html.mode-tel .radar .moi .av-img{width:34px;height:34px}
html.mode-tel .radar .ping.p1{left:34px;top:40px}
html.mode-tel .radar .ping.p2{left:104px;top:88px}
html.mode-tel .recherche .rch-texte{font-size:17px}
html.mode-tel .recherche .temps{font-size:38px}
html.mode-tel .recherche .deck{font-size:13px;flex-direction:column;gap:6px}
html.mode-tel .recherche .mini-deck .dos-carte{width:34px;margin-left:-10px}
html.mode-tel .recherche .actions{flex-direction:column;width:100%;gap:10px}
html.mode-tel .recherche .actions .arene-btn{font-size:17px;padding:12px 18px;min-height:46px;width:100%}
html.mode-tel .recherche .long{font-size:14px}
html.mode-tel .recherche .erreur{font-size:13px}
@media (orientation:landscape){
  html.mode-tel .recherche .boite{flex-direction:row;flex-wrap:wrap;justify-content:center;width:min(100%,640px);padding:10px 16px;gap:8px 16px}
  html.mode-tel .recherche h2{flex:1 0 100%;font-size:18px}
  html.mode-tel .radar{width:100px;height:100px}
  html.mode-tel .radar::before{inset:16px}html.mode-tel .radar::after{inset:34px}
  html.mode-tel .radar .moi{width:36px;height:36px;margin:-18px;font-size:22px}
  html.mode-tel .radar .moi .av-img{width:24px;height:24px}
  html.mode-tel .recherche .temps{font-size:28px}
  html.mode-tel .recherche .deck{display:none}
  html.mode-tel .recherche .actions{flex-direction:row;width:auto}
  html.mode-tel .recherche .actions .arene-btn{width:auto;min-height:40px;font-size:15px}
}

/* ---------- onglets sur smartphone : 5 onglets principaux (avec « Duel ») et 3 sous-onglets du duel en ligne ---------- */
html.mode-tel .nav-jeu{gap:2px;padding:3px}
html.mode-tel .nav-jeu button{display:flex;flex-direction:column;align-items:center;gap:0;padding:5px 0 4px;font-size:.66rem;line-height:1.2;text-overflow:clip;border-radius:18px;position:relative}
html.mode-tel .nav-jeu button .ico{font-size:1.2rem;line-height:1.15}
html.mode-tel .nav-jeu button .lib{max-width:100%;overflow:hidden}
html.mode-tel .nav-jeu button .am-pastille,html.mode-tel .am-sous button .am-pastille{position:absolute;top:-3px;right:1px;margin:0;min-width:18px;height:18px;padding:0 4px;font-size:.66rem}
html.mode-tel .onglets.am-sous{gap:3px;padding:3px}
html.mode-tel .am-sous button{padding:8px 2px;font-size:.72rem;white-space:normal;line-height:1.15;position:relative}


/* ---------- loupe : un appui long sur une carte de la main l'agrandit pour la lire (portrait et paysage) ----------
   --loupe = facteur d'agrandissement (2 = +100 %) ; la carte agrandie s'affiche au centre de la table, loin du doigt */
html.mode-tel .arene{--loupe:2}
html.mode-tel .carte-main{-webkit-user-select:none;user-select:none}
html.mode-tel .carte-main.loupe-source{opacity:.35}
html.mode-tel .carte-main.loupe-carte{position:absolute;margin:0;z-index:70;pointer-events:none;transition:transform .16s ease-out;transform-origin:50% 50%;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.7));opacity:1}
html.mode-tel .carte-main.loupe-carte .pied .ecusson:last-child{transform:none}
html.mode-tel .carte-main.loupe-carte .pied .ecusson:last-child b{text-shadow:none}