/* Version mobile (téléphone en paysage) : body.mobile (js/mobile.js). La scène fait 460 de haut et la largeur de
   l'écran (≈ 860 à 1120) : tout est environ deux fois plus gros que la version ordinateur réduite. Ici, uniquement
   des réglages de place et de taille ; les couleurs et le dessin restent ceux de style.css. */

/* ---------------------------------------------------------------- téléphone tenu en hauteur */
#m-rotate { display: none; }
@media (orientation: portrait) {
  body.mobile #m-rotate { display: flex; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; text-align: center; background: #121116; color: #ece6d6; }
}
#m-rotate div { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; }
#m-rotate svg { width: 70px; height: 70px; color: #c8e20a; animation: mRot 1.8s ease-in-out infinite; }
#m-rotate b { font: 400 24px Rowdies, sans-serif; }
#m-rotate span { font-size: 15px; color: #a9a4b4; }
@keyframes mRot { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }

/* ---------------------------------------------------------------- partie : barre du haut (stage, manches, chrono) */
body.mobile #topbar { width: 100%; height: 44px; padding: 0 6px 0 10px; gap: 8px; }
body.mobile .tb-round { width: auto; gap: 6px; align-items: center; }
body.mobile .tb-round b { font-size: 22px; }
body.mobile .tb-round > span { display: none; }
body.mobile #tb-rounds { gap: 3px; min-width: 0; }
body.mobile #tb-rounds span { padding: 4px 6px; font-size: 12px; gap: 3px; white-space: nowrap; }
body.mobile #topbar .icon-btn[data-audio] { display: none; }   /* volumes : dans les paramètres */
body.mobile #tb-rounds .rt, body.mobile #tb-rounds .tb-phase-name { display: none; }
body.mobile #d-timer { position: static; flex: none; width: auto; height: 36px; flex-direction: row; gap: 6px; padding: 0 10px; border-radius: 9px; }
body.mobile #d-timer .tm-label, body.mobile #d-timer .tm-sub { display: none; }
body.mobile #d-timer .tm-sec b, body.mobile #d-timer.fighting .tm-sec b { font-size: 24px; }
body.mobile #d-timer .tm-sec span { font-size: 13px; }
body.mobile #d-timer .tm-bar { width: 46px; height: 6px; }
body.mobile .tb-right { width: auto; gap: 5px; }
body.mobile #topbar .btn-grey { height: 34px; padding: 0 10px; font-size: 13px; }
body.mobile .icon-btn { width: 36px; height: 36px; }

/* ---------------------------------------------------------------- colonne de gauche : perso (toujours visible), kamas, synergies, objets */
body.mobile #m-left { position: absolute; left: 0; top: 44px; bottom: 0; width: 180px; z-index: 6; display: flex; flex-direction: column; gap: 5px; padding: 5px;
  background: linear-gradient(180deg, #1d1c23, #16151b); border-right: 2px solid #000; }
body.mobile #m-left > .dock-block { position: relative; left: auto; top: auto; width: auto; height: auto; flex: none; }

body.mobile #d-char { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 5px 6px; padding: 5px 5px 6px; }
body.mobile #d-char .hp-col { width: 20px; gap: 2px; }
body.mobile #d-char .hp-col b { font-size: 13px; }
body.mobile #d-char .hp-col img { width: 18px; }
body.mobile .char-info { gap: 3px; }
body.mobile .char-top { gap: 6px; }
body.mobile .portrait-wrap { width: 40px; height: 40px; border-radius: 8px; }
body.mobile .char-top { align-items: flex-start; }
body.mobile .char-id { flex: 1; flex-direction: row; align-items: baseline; gap: 6px; padding-top: 2px; }
body.mobile .char-name { flex: 1; min-width: 0; font-size: 12.5px; }
body.mobile .char-lvl b { font-size: 17px; }
body.mobile .char-lvl b::before { font-size: 10px; }
body.mobile .char-cls { display: none; }
body.mobile .char-xptext { margin: -18px 0 4px 46px; font-size: 10px; }   /* sous le nom, à côté du portrait */
body.mobile #xp-btn { width: 100%; height: 32px; font-size: 13px; }
body.mobile #stat-points { position: absolute; right: 5px; bottom: 6px; width: calc((100% - 14px) / 2); height: 28px; padding: 0 4px; display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; font-size: 10px; line-height: 1.05; }   /* dans la 6e case (vide) de la grille des caractéristiques */
body.mobile #stat-points:empty { display: none; }
body.mobile #stats-list { grid-column: 1 / -1; width: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
body.mobile .stat-row { min-width: 0; height: 28px; gap: 3px; padding: 0 2px 0 4px; }
body.mobile .stat-row .sn { display: none; }   /* le nom est dans la bulle (toucher) */
body.mobile .stat-row img { width: 16px; flex: none; }
body.mobile .stat-row .sv { flex: 1; min-width: 0; width: auto; text-align: left; font-size: 15px; }
body.mobile .stat-row .sg { right: 30px; }
body.mobile .btn-plus { flex: none; width: 28px; height: 24px; font-size: 18px; }

body.mobile #d-eco { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3px 8px; padding: 4px 8px 6px; }
body.mobile #d-eco .eco-kamas { grid-column: 1 / -1; min-width: 0; gap: 5px; height: 25px; }
body.mobile #d-eco .eco-kamas img { width: 24px; }
body.mobile #d-eco .eco-kamas b { font-size: 24px; }
body.mobile #d-eco .eco-line, body.mobile #d-eco .eco-pods span { display: none; }
body.mobile #d-eco .eco-streak { height: 24px; padding: 0 8px 0 5px; gap: 3px; }
body.mobile #d-eco .eco-streak img { width: 15px; height: 15px; }
body.mobile #d-eco .eco-streak b { font-size: 14px; }
body.mobile #d-eco .eco-pods { margin: 0; gap: 4px; }
body.mobile #d-eco .eco-pods img { width: 17px; }
body.mobile #d-eco .eco-pods b { margin: 0; font-size: 15px; }
body.mobile #d-eco .bar.pods { height: 8px; margin: 0; }

/* synergies : petites pastilles (icône + compte), trois par ligne ; le détail est dans la bulle */
body.mobile #traits { position: relative; top: auto; left: auto; width: auto; height: auto; flex: 1; min-height: 0; padding: 3px 4px; border: 0; border-radius: 9px; background: rgba(0,0,0,.22); }
body.mobile #traits-title { font-size: 10px; margin: 0 0 2px 2px; letter-spacing: .5px; }
body.mobile #traits-list { height: calc(100% - 15px); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; scrollbar-width: none; }
body.mobile .trait { width: calc((100% - 6px) / 3); height: 34px; margin: 0; padding: 0 2px; gap: 0; justify-content: center; border-radius: 8px; overflow: hidden; }
body.mobile .trait .tn { flex: none; justify-content: center; font-size: 0; gap: 2px; }
body.mobile .trait .tn img, body.mobile .trait .tn canvas { width: 22px; height: 22px; }
body.mobile .trait .tn em { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: -.5px; }
body.mobile .trait:active { border-color: #c8e20a; }
body.mobile .trait .steps { display: none; }

#m-items { display: none; }
body.mobile #m-items { display: flex; flex: none; height: 36px; }
.m-tool { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 8px; border-radius: 9px; border: 2px solid #000; background: linear-gradient(180deg, #34333d, #24232b); color: #ece6d6; font-size: 13px; font-weight: 700; }
.m-tool img { width: 24px; height: 24px; object-fit: cover; border-radius: 5px; flex: none; }
.m-tool i { position: absolute; right: -4px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; border: 2px solid #000; background: #c8e20a; color: #1c2300; font: 400 12px Rowdies, sans-serif; font-style: normal; display: flex; align-items: center; justify-content: center; }
#game[data-drawer="items"] #m-items { background: linear-gradient(180deg, #d9f13a, #a7bf00); color: #1c2300; }
#m-items.warm { border-color: #8fa30a; box-shadow: inset 0 0 0 1px #c8e20a; }
#m-items.hot { border-color: #000; background: linear-gradient(180deg, #4d5a10, #2f3709); color: #f4ff9a; animation: mItemsHot 1.1s ease-in-out infinite; }
#game[data-drawer="items"] #m-items.hot { animation: none; }
@keyframes mItemsHot {
  0%, 100% { box-shadow: 0 0 0 2px #c8e20a, 0 0 8px 2px rgba(200,226,10,.55); }
  50% { box-shadow: 0 0 0 3px #f4ff9a, 0 0 22px 8px rgba(200,226,10,.95); }
}

/* tiroir des objets : par-dessus le plateau, à côté de la colonne */
body.mobile #items { display: none; left: 184px; top: 48px; width: 236px; height: auto; bottom: 8px; max-height: none; overflow-y: auto; z-index: 25; border: 2px solid #000; border-radius: 10px; box-shadow: 0 0 0 2px #3a3946; touch-action: pan-y; }
body.mobile #game[data-drawer="items"] #items { display: block; }
#m-sell { display: none; }
body.mobile #game[data-drawer="items"] #m-sell.on { display: flex; position: absolute; z-index: 25; left: 424px; top: 48px; bottom: 8px; width: 96px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px;
  border-radius: 10px; border: 2px dashed #6b4a46; background: rgba(40,18,16,.86); color: #d9b9b3; text-align: center; pointer-events: none; transition: background .12s, border-color .12s; }
#m-sell img { width: 30px; }
#m-sell span { font: 400 16px Rowdies, sans-serif; color: #ffd6d0; }
#m-sell b { font-size: 11.5px; line-height: 1.25; color: #fff; }
#m-sell em { font-style: normal; font-size: 10.5px; line-height: 1.3; }
#m-sell.on { border-color: #ff9a8f; background: rgba(90,25,20,.92); animation: mSellIn .14s ease-out; }
#m-sell.hot { border-style: solid; border-color: #fff; background: #d8321f; color: #fff; box-shadow: 0 0 0 3px #ff9a8f, 0 0 22px 6px rgba(255,90,60,.7); }
#m-sell.hot span, #m-sell.hot em { color: #fff; }
@keyframes mSellIn { from { opacity: 0; transform: translateX(-8px); } }
body.mobile #bag-grid .res.cons { animation: mConsHot 1.1s ease-in-out infinite; }
@keyframes mConsHot { 0%, 100% { box-shadow: inset 0 0 0 2px var(--cc), 0 0 0 2px #c8e20a; } 50% { box-shadow: inset 0 0 0 2px var(--cc), 0 0 0 3px #f4ff9a, 0 0 0 6px rgba(200,226,10,.5); } }

/* le dock ne garde que le marché : surcouche transparente */
body.mobile #dock { top: 0; left: 0; width: 100%; height: 100%; background: none; border: 0; box-shadow: none; pointer-events: none; z-index: 7; }
body.mobile #dock > .dock-block { pointer-events: auto; }

/* ---------------------------------------------------------------- colonne de droite : portraits des joueurs (la flèche déplie noms et PV) */
body.mobile #players { left: auto; right: 0; top: 44px; bottom: 0; width: 58px; height: auto; padding: 4px 4px 0; z-index: 8; overflow-y: auto; scrollbar-width: none; transition: width .16s ease; }
body.mobile #game.pl-open #players, body.mobile #game.pl-duel #players { width: 212px; box-shadow: -3px 0 0 var(--bn-ink); }
body.mobile #players h3, body.mobile .tag, body.mobile .score .scls { display: none; }
#m-pl { display: none; }
body.mobile #m-pl { display: flex; width: 100%; height: 22px; margin-bottom: 3px; align-items: center; justify-content: center; border: 2px solid #000; border-radius: 7px; background: linear-gradient(180deg, #34333d, #24232b); }
body.mobile #m-pl::before { content: ''; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 8px solid #c8e20a; }
body.mobile #game.pl-open #m-pl::before { border-right: 0; border-left: 8px solid #c8e20a; }
body.mobile #game.pl-duel #m-pl { visibility: hidden; height: 0; margin: 0; }   /* Défi : la liste reste dépliée pour choisir */
body.mobile .score { height: 44px; gap: 6px; padding: 2px; margin-bottom: 2px; }
body.mobile .score .shead { width: 40px; height: 38px; border-radius: 7px; }
body.mobile .score .sname { font-size: 12px; }
body.mobile .score .sbar { height: 6px; margin-top: 4px; }
body.mobile .score .shp { width: 26px; font-size: 14px; }
body.mobile .score .sst { left: 26px; top: 26px; width: 18px; height: 18px; }
body.mobile .score .sst img { width: 11px; height: 11px; }
body.mobile .sduel { left: -3px; top: -3px; height: 16px; font-size: 10px; padding: 0 4px; }
/* Défi : grande touche « épées » sur toute la hauteur de la ligne, à droite ; les PV restent devant elle, la liste s'élargit */
body.mobile #game.pl-open:where(.duel-prep) #players, body.mobile #game.pl-duel #players { width: 232px; }
body.mobile .duel-btn { right: 2px; top: 2px; bottom: 2px; left: auto; width: 50px; height: auto; border-radius: 8px; transform: none; }
body.mobile .duel-btn::before { content: ''; position: absolute; top: -3px; bottom: -3px; left: -26px; right: -4px; }   /* zone de toucher élargie (PV compris, invisible) */
body.mobile .duel-btn img { width: 24px; height: 24px; }
body.mobile #game:not(.pl-open):not(.pl-duel) .score .si, body.mobile #game:not(.pl-open):not(.pl-duel) .duel-btn { display: none; }
.smob { display: none; }
body.mobile .score .smob { display: flex; align-items: center; gap: 8px; margin-top: 1px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
body.mobile .smob span { display: flex; align-items: center; gap: 2px; }
body.mobile .smob b { color: #ece6d6; font-weight: 700; }
body.mobile .smob img { width: 12px; }
body.mobile .score .sbar { margin-top: 2px; }
body.mobile #game:not(.pl-open):not(.pl-duel) .score .sst { left: 28px; top: 1px; }   /* état du combat en haut à droite du portrait, les PV en bas */
body.mobile #game:not(.pl-open):not(.pl-duel) .score .shp { position: absolute; right: 1px; bottom: 1px; width: auto; min-width: 20px; padding: 0 3px; border-radius: 5px; background: rgba(8,8,11,.85); font-size: 12px; line-height: 15px; text-align: center; }

/* ---------------------------------------------------------------- marché : volet bas entre les deux colonnes, les 7 cartes (replié en combat) */
body.mobile #d-market { left: 180px; right: 58px; width: auto; top: auto; bottom: 0; height: 128px; padding: 6px 6px 4px; display: flex; flex-direction: column;
  border-radius: 12px 12px 0 0; border-bottom: 0; z-index: 7; transition: height .2s ease, padding .2s ease; }
body.mobile #game.mk-closed:not(.mk-peek) #d-market { height: 0; padding: 0 6px; border-top-width: 0; }
body.mobile #game.mk-closed:not(.mk-peek) #d-market > :not(#mk-handle) { visibility: hidden; }
body.mobile .mk-head { display: none; }
#mk-handle { display: none; }
body.mobile #mk-handle { display: flex; position: absolute; left: 50%; top: -28px; transform: translateX(-50%); height: 28px; padding: 0 20px; align-items: center; gap: 8px; border: 2px solid var(--edge); border-bottom: 0; border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, #2b2a33, #25242c); color: #d9d1b9; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
body.mobile #mk-handle::after { content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #c8e20a; }
body.mobile #game.mk-closed #mk-handle::after { border-top: 0; border-bottom: 7px solid #c8e20a; }
body.mobile #mk-cards { flex: 1; min-height: 0; gap: 5px; margin: 0; }
body.mobile .mslot { flex: 1 1 0; min-width: 0; width: auto; gap: 3px; }
body.mobile .mcard { width: 100%; height: auto; flex: 1; border-width: 2px; }
body.mobile .mcard:hover { transform: none; }
body.mobile .mcard canvas { left: 50%; right: auto; top: 3px; width: auto; height: calc(100% - 6px); transform: translateX(-50%); }
body.mobile .mtags { left: 3px; right: 3px; top: 3px; bottom: auto; flex-direction: column; align-items: flex-start; gap: 2px; z-index: 1; }
body.mobile .mtag, body.mobile .mtag.fam { max-width: 100%; font-size: 9.5px; line-height: 15px; text-overflow: ellipsis; }
body.mobile .mtag:first-child { max-width: calc(100% - 22px); padding-right: 3px; letter-spacing: -.2px; }   /* à côté du cadenas */
body.mobile .mtag .rb { width: 12px; height: 12px; }
body.mobile .mtag.fam { display: block; padding: 0 5px; }
body.mobile .mbottom { left: 3px; right: 3px; top: auto; bottom: 3px; z-index: 1; }
body.mobile .mcard .cn { display: none; }
body.mobile .mrow { justify-content: space-between; gap: 3px; margin: 0; }
body.mobile .skipbtn, body.mobile .skip-space { height: 24px; font-size: 11px; padding: 0 3px; gap: 2px; }
body.mobile .skipbtn b { margin-left: 1px; }
body.mobile .skipbtn > img { display: none; }
body.mobile .lockbtn { right: 2px; top: 2px; width: 24px; height: 20px; }

/* ---------------------------------------------------------------- panneaux par-dessus le plateau */
body.mobile #fight-hud { left: auto; right: 64px; top: 50px; transform: scale(.9); transform-origin: top right; }
body.mobile #recap { right: 64px; top: 50px; width: 260px; }
body.mobile #game.pl-open #recap, body.mobile #game.pl-duel #recap, body.mobile #game.pl-open #fight-hud, body.mobile #game.pl-duel #fight-hud { right: 218px; }
body.mobile #game.pl-open:where(.duel-prep) #recap, body.mobile #game.pl-duel #recap, body.mobile #game.pl-open:where(.duel-prep) #fight-hud, body.mobile #game.pl-duel #fight-hud { right: 238px; }   /* Défi : liste à 232 px */
body.mobile #toast { left: calc(var(--bx) + 8px); right: 66px; width: auto; top: calc(var(--evy, 60px) + 70px); }   /* sous la ligne « Prochain adversaire » et le cadre des pods */
body.mobile #game.pl-open #toast, body.mobile #game.pl-duel #toast { right: 222px; }
body.mobile #game.pl-open:where(.duel-prep) #toast, body.mobile #game.pl-duel #toast { right: 242px; }
body.mobile #game.rc-on #toast { right: 334px; }
body.mobile #game[data-drawer="items"] #toast { left: 528px; }
body.mobile #toast, body.mobile #m-toast { --u: .65px; --fmin: 16px; }   /* notifs : même dessin, à l'échelle du téléphone (rien sous 12 px à l'écran) */
body.mobile .ev-toast { max-width: 100%; }
body.mobile #m-toast { top: 56px; }
body.mobile #tooltip, body.mobile #tooltip2 { max-height: 412px; overflow-y: auto; scrollbar-width: none; }
/* sous-bulle d'un élément : ses deux grilles (Monstres, Faibles) tiennent dans la hauteur du téléphone */
body.mobile #tooltip2 .el-note { display: none; }
body.mobile #tooltip2 .el-sp { padding: 6px 11px; }
body.mobile #tooltip2 .el-sp .sp-grid { gap: 4px; }
body.mobile #tooltip2 .el-sp .sp { width: 32px; height: 32px; border-radius: 6px; }
body.mobile #tooltip2 .el-sp .sp i { width: 13px; height: 13px; right: -4px; top: -4px; }
/* boutons d'action en bas de la bulle (« Acheter », « Passer », « Garder ») : toujours visibles même si la bulle défile */
.tt-acts { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 7px; background: #19181e; border-top: 1px solid #34333d; }
.tt-acts button { flex: 1 1 0; min-width: 0; height: 36px; padding: 0 6px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; white-space: nowrap; }
.tt-acts button img { flex: none; }
.tt-acts button:first-child { flex: 1 1 100%; height: 40px; font-size: 15px; }
.tt-acts button img { width: 16px; }
.tt-acts button:disabled { opacity: .45; }
/* surcouches de la taille du plateau (Sanctuaire, top 4, élimination) : posées sur le plateau, à son échelle */
body.mobile #top4, body.mobile #elim { left: var(--bx); top: var(--by); transform: scale(var(--bk)); transform-origin: 0 0; }
body.mobile .t4-head, body.mobile .el-box { --u: calc(.66px / var(--bk)); --fmin: calc(13px / var(--bk)); }   /* titres des scènes : à l'échelle du téléphone (posés sur le plateau réduit) */
body.mobile #elim .el-btns button { height: auto; min-height: calc(42px / var(--bk)); font-size: calc(14px / var(--bk)); padding: 0 calc(14px / var(--bk)); }
body.mobile #top4 .t4-head { top: calc(14px / var(--bk)); }
/* plaques des noms : sous les pieds des persos, textes plus gros (le plateau est réduit) */
body.mobile .t4-plates { top: 472px; --pu: 1.12px; --pw: 190; }
body.mobile .t4-pl { height: calc(44 * var(--pu)); }
/* portrait plus étroit, nom −10 %, marge droite réduite : le nom tient (sinon la police rétrécit, showTop4) */
body.mobile .t4-pf { width: calc(42 * var(--pu)); }
body.mobile .t4-pf img { width: calc(46 * var(--pu)); height: calc(46 * var(--pu)); margin-left: calc(-23 * var(--pu)); top: calc(-1 * var(--pu)); }
body.mobile .t4-tx { gap: calc(4 * var(--pu)); padding: 0 calc(15 * var(--pu)) calc(2 * var(--pu)) calc(5 * var(--pu)); }
body.mobile .t4-tx b { font-size: calc(19 * var(--pu)); }
body.mobile .t4-plate.first .t4-tx b { font-size: calc(21.5 * var(--pu)); }
body.mobile .t4-crown { width: calc(19 * var(--pu)); height: calc(19 * var(--pu)); }
body.mobile .t4-sub { height: calc(24 * var(--pu)); margin: calc(2 * var(--pu)) 0 0 calc(6 * var(--pu)); max-width: calc(100% - 6 * var(--pu)); padding: 0 calc(10 * var(--pu)) 0 calc(8 * var(--pu)); gap: .3em; font-size: calc(14 * var(--pu)); }   /* « Osamodas · ♥ 100 PV » tient dans la plaque */
body.mobile .t4-toi { top: calc(-17 * var(--pu)); height: calc(22 * var(--pu)); font-size: calc(15 * var(--pu)); line-height: calc(22 * var(--pu)); }
body.mobile #top4 .t4-foot { top: calc(8px / var(--bk)); right: calc(8px / var(--bk)); bottom: auto; padding: 0 calc(8px / var(--bk)); border-radius: calc(9px / var(--bk)); font-size: calc(10px / var(--bk)); line-height: calc(18px / var(--bk)); }   /* en haut à droite : jamais sur la 4e plaque */
body.mobile #ev-frame { left: var(--bx); top: var(--by); --fw: var(--bw); --fh: var(--bh); --fk: .6; --fs: var(--bk); --fv: 44px; --hw: 0px; }   /* téléphone : flammes à 0,6 (la plus haute 24 px, encre 1 px), le combat garde la place */

/* ================================================================ menu */
body.mobile #mh { height: 50px; gap: 6px; padding: 0 8px; }
body.mobile .mh-brand { width: auto; }
body.mobile .mh-brand img { width: 50px; }
body.mobile .mh-words { display: none; }
body.mobile #mnav { gap: 0; }
body.mobile #mnav button { gap: 5px; font-size: 13px; letter-spacing: 0; }
body.mobile #mnav button img { width: 18px; }
body.mobile #mnav button.dot::before { top: 10px; right: 3px; }
body.mobile .mh-right { gap: 5px; }
body.mobile .cur { height: 34px; padding: 0 8px 0 5px; gap: 4px; }
body.mobile .cur img { width: 20px; }
body.mobile .cur b { font-size: 14px; }
body.mobile .mh-id, body.mobile #mh-rank { display: none; }
body.mobile #mh-profile { height: 40px; padding: 0 3px; }
body.mobile #mh-avatar { width: 32px; height: 32px; }
body.mobile #pages { top: 50px; bottom: 18px; }
body.mobile #m-legal { height: 18px; gap: 14px; font-size: 10.5px; }
body.mobile #p-ladder .col.left { overflow-y: auto; scrollbar-width: none; }   /* trop haute pour l'écran (avant le pied de page aussi) : elle défile */
body.mobile .page { padding: 8px 10px; gap: 10px; }
body.mobile .col { gap: 8px; }
body.mobile .card-head h3 { font-size: 13px; }

/* accueil : missions et coffre à gauche, le perso au milieu, rang et JOUER à droite */
body.mobile .home-l { width: 280px !important; overflow-y: auto; scrollbar-width: none; padding-bottom: 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); }   /* la suite est plus bas : le bas s'efface, la dernière carte finit au-dessus du fondu */
body.mobile .home-l .season, body.mobile .home-r .recent { display: none; }
body.mobile .home-r { width: 290px !important; }
body.mobile .home-stage { justify-content: flex-start; }
body.mobile .home-stage canvas { width: auto; }
body.mobile .home-stage .stage-plate { margin-top: -10px; }
body.mobile .qs { width: 100%; margin-top: 6px; padding: 6px 8px; }
body.mobile .play-box { padding: 8px; gap: 6px; }
body.mobile .play-box #play-btn { height: 74px; font-size: 34px; letter-spacing: 4px; }
body.mobile .mp-btn { height: 40px; }
body.mobile .mp-pop { top: -2px; left: auto; right: 0; width: min(360px, 92vw); }   /* téléphone : la liste part du sélecteur et s'élargit vers la gauche (colonne étroite) */
body.mobile .mp-opt { padding: 6px 8px; }
body.mobile .mp-opt em { font-size: 11px; }

/* personnages : presets et perso à gauche, classes / apparence à droite (défile) */
body.mobile .chs-left { width: 330px; gap: 6px; }
body.mobile .chs-explain { display: none; }
body.mobile .chs-tiles { gap: 6px; flex-wrap: wrap; }
body.mobile .chs-stage canvas { width: auto; height: 220px; }
body.mobile .chs-name h2 { font-size: 28px; }
body.mobile .chs-act .btn-green.big { height: 46px; }
body.mobile .chs-panel { padding: 8px 10px; gap: 8px; overflow-y: auto; }

/* boutique, classement, profil : la page défile */
body.mobile #p-shop, body.mobile #p-ladder, body.mobile #p-profile { overflow-y: auto; }
body.mobile #p-ladder .col.left, body.mobile #p-profile .col.left { width: 290px; }
body.mobile #p-ladder .tiers { display: none; }
body.mobile .lad-row { grid-template-columns: 30px minmax(0, 1fr) 96px 44px 52px 48px; gap: 6px; padding: 0 8px; font-size: 12.5px; }
body.mobile .lad-row .who img { width: 30px; height: 30px; }
body.mobile .lad-row.head { font-size: 9.5px; letter-spacing: .3px; }
body.mobile .my-rank .ch-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
body.mobile .lad-row .who em { display: none; }   /* la classe : le portrait suffit, le pseudo garde la place */
body.mobile .my-rank .ch-stats > div { padding: 6px 2px; }
body.mobile .my-rank .ch-stats b { font-size: 16px; white-space: nowrap; }
body.mobile .my-rank .ch-stats span { font-size: 11px; text-align: center; line-height: 1.15; }
body.mobile #mh .icon-btn[data-audio] { display: none; }   /* volumes : dans les paramètres */
body.mobile .home-r .rank-card { display: none; }   /* le rang : page Classement */
body.mobile .ms-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 7px; padding: 5px 6px 5px 5px; }
body.mobile .ms-ring { width: 36px; height: 36px; }
body.mobile .ms-ring img { width: 17px; }
body.mobile .ms-t b { font-size: 12px; }
body.mobile .ms-claim { min-width: 54px; height: 36px; padding: 0 6px; font-size: 13.5px; }
body.mobile .qs-head .hint { display: none; }
/* presets : la rangée défile, « Classe » et « Au hasard » restent collés à droite (ils ne bougent plus quand les presets s'ajoutent) */
body.mobile .qs-row { overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
body.mobile .qs-t { flex: none; }
body.mobile .qs-sep { flex: 1 0 0; min-width: 0; }
body.mobile .qs-t.tool { position: sticky; right: 0; background: #211f28; box-shadow: -8px 0 8px #211f28; }
body.mobile #qs-class { right: 74px; box-shadow: none; }
body.mobile .cls-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
body.mobile .cls-t { min-width: 0; padding-right: 4px; }
body.mobile .cls-t b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mobile .home-stage canvas { height: 190px; }
body.mobile .stage-plate h2 { font-size: 24px; }
body.mobile .stage-plate .kicker { font-size: 11.5px; }

/* Sanctuaire : les cartes des dieux à leur taille, posées sur le plateau (le plateau, lui, est réduit) */
body.mobile .m-box { padding: 12px 16px; max-height: calc(100% - 10px); overflow-y: auto; scrollbar-width: none; touch-action: pan-y; }

/* évolution du sort : fenêtre opaque, titre sur une ligne, sort actuel en bandeau, deux cartes avec leur bouton */
body.mobile #evo { padding: 8px 12px; background: rgba(8,6,16,.88); }
body.mobile .evo-box { width: min(900px, 100%); max-height: 100%; gap: 8px; padding: 10px 14px 10px; border-radius: 14px; overflow-y: auto; touch-action: pan-y; scrollbar-width: none;
  background: linear-gradient(180deg, #25242d, #18171d); border: 2px solid #000; box-shadow: 0 0 0 2px #3a3946; }
body.mobile .evo-title { margin: 0; --u: .5px; --fmin: 12px; }   /* une ligne : plaque puis sous-titre, sans ruban */
body.mobile .evo-title .sct { flex-direction: row; justify-content: center; gap: 6px; }
body.mobile .evo-title .sct-l { align-self: center; }
body.mobile .evo-title .ev-rb, body.mobile .evo-title .ev-rbl, body.mobile .evo-title .ev-ln { display: none; }
body.mobile .evo-title .bn-sub { --sx: 0px; margin-top: 0; }
body.mobile .evo-title .sct, body.mobile .evo-title .sct *, body.mobile .evo-title .sct *::before, body.mobile .evo-title .sct *::after { animation: none !important; }
body.mobile .evo-title .ev-px, body.mobile .evo-title .ev-sw, body.mobile .evo-title .ev-fl { display: none; }   /* fenêtre modale qui défile : titre posé d'emblée (les ouvertures en clip-path n'y finissaient pas) */
body.mobile .evo-cur { width: 100%; max-width: none; justify-content: flex-start; gap: 4px 8px; padding: 6px 10px; border-radius: 9px; background: rgba(0,0,0,.32); border: 1px solid #2d2c35; font-size: 12.5px; line-height: 1.35; text-align: left; }
body.mobile .evo-cur img.spi { width: 22px; height: 22px; }
body.mobile .evo-cur em { font-size: 10px; }
body.mobile .evo-cur b { font-size: 13px; }
body.mobile .evo-pick { font-size: 13px; }
body.mobile .evo-opts { gap: 10px; }
body.mobile .eo-or { font-size: 11px; letter-spacing: 1.5px; }
body.mobile .evo-opt { gap: 5px; padding: 10px 12px 10px; border-radius: 12px; background: linear-gradient(180deg, #302f3b, #22212a); border: 2px solid var(--oc);
  animation: evNudge .3s var(--ease-pop) calc(.08s + var(--i, 0) * 60ms) backwards; }   /* entrée sans fondu : les cartes restent visibles même si l'animation n'avance pas */
@keyframes evNudge { from { transform: translateY(10px) scale(.92); } to { transform: none; } }
body.mobile .evo-opt:hover { transform: none; }
body.mobile .evo-opt:active { transform: scale(.98); }
body.mobile .evo-opt img.spi.big { width: 50px; height: 50px; }
body.mobile .evo-opt b { font-size: 19px; }
body.mobile .eo-bar { display: none; }
body.mobile .eo-txt { max-width: none; font-size: 13px; line-height: 1.38; }
body.mobile .evo-opt::after { content: attr(data-cta); margin-top: auto; width: 100%; padding: 8px 0; border-radius: 8px; border: 2px solid #000; background: var(--oc); color: #fff; font: 700 14px Lexend, sans-serif; letter-spacing: .5px; }
body.mobile .evo-must { font-size: 11px; }

/* paramètres : volumes seulement (pas de raccourcis clavier sur téléphone) */
body.mobile .set-sec:has(.kg), body.mobile .set-foot [data-reset] { display: none; }
body.mobile .set-box { max-height: 440px; overflow-y: auto; }

/* guide « Comment jouer ? » : feuille plein écran ; en-tête 44, bande d'onglets 52 (défile au doigt), contenu (défile), pied 48.
   Tout texte ≥ 17 px de scène (≈ 13,3 px à 360 de haut), cibles ≥ 44 */
body.mobile #help.guide { align-items: stretch; justify-content: stretch; }
body.mobile .gd-box { width: 100%; height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px 52px minmax(0, 1fr) 48px; border: 0; border-radius: 0; box-shadow: none; }
body.mobile .gd-head { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 56px 0 10px; }
body.mobile .gd-plate { height: 34px; }
body.mobile .gd-plate .gd-cell { width: 40px; }
body.mobile .gd-cell .gd-ico { width: 20px; height: 20px; }
body.mobile .gd-plate > b { padding: 0 18px 0 10px; font-size: 19px; }
body.mobile .gd-status { height: 30px; margin-left: auto; padding: 0 14px; font-size: 17px; }
body.mobile .gd-x { top: 0; right: 0; width: 46px; height: 42px; border-radius: 0; border-width: 0 0 0 2px; }
body.mobile .gd-tabs { grid-row: 2; grid-column: 1; flex-direction: row; align-items: center; gap: 6px; padding: 0 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-right: 0; border-bottom: 2px solid #000; touch-action: none; }
body.mobile .gd-tabs::-webkit-scrollbar { display: none; }
body.mobile .gd-tc { width: 40px; }
body.mobile .gd-tab .gd-ico { width: 24px; height: 24px; }
body.mobile .gd-tab b { padding: 0 12px 0 8px; font-size: 17px; }
body.mobile .gd-tab.last { margin: 0 0 0 4px; }
body.mobile .gd-main { grid-row: 3; grid-column: 1; padding: 10px 16px 12px; overflow-y: auto; scrollbar-width: none; touch-action: pan-y; }
body.mobile .gd-page { height: auto; }
body.mobile .gd-main.more { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent); }   /* la suite est plus bas */
body.mobile .gd-top { flex-direction: row; align-items: center; }
body.mobile .gd-tp { height: 34px; }
body.mobile .gd-tp .gd-cell { width: 40px; }
body.mobile .gd-tp > b { padding: 0 20px 0 10px; font-size: 20px; }
body.mobile .gd-strip { height: 30px; margin: 0 0 0 10px; padding: 0 16px; font-size: 17px; }
body.mobile .gd-cols { grid-template-columns: 40% minmax(0, 1fr); gap: 18px; margin-top: 10px; }
body.mobile .gd-art { width: 100%; height: auto; min-height: 0; padding: 14px 6px; font-size: 17px; }
body.mobile .gd-cap { font-size: 17px; line-height: 1.3; }
body.mobile .gd-lcol .gd-cap { margin: 12px 0 0 42px; }
body.mobile .gd-list { gap: 12px; padding-top: 2px; }
body.mobile .gd-list li { gap: 12px; }
body.mobile .gd-list p { font-size: 17px; line-height: 1.32; }
body.mobile .gd-ti { width: 30px; height: 30px; margin-top: -3px; }
body.mobile .gd-ti > img { width: 20px; height: 20px; }
body.mobile .gd-ti > canvas { width: 28px; height: 28px; }
body.mobile .gd-foot { grid-row: 4; gap: 12px; padding: 0 12px; }
body.mobile .gd-foot .gd-prev, body.mobile .gd-foot .gd-next { height: 44px; min-width: 150px; font-size: 17px; }
body.mobile .gd-dots { gap: 11px; }
/* illustrations au téléphone : textes à 17, les rangées passent à la ligne */
body.mobile .ga-role i, body.mobile .ga-stats span, body.mobile .ga-pod, body.mobile .ga-price, body.mobile .ga-u em, body.mobile .ga-god em, body.mobile .ga-lv, body.mobile .ga-spell em, body.mobile .ga-hp { font-size: 17px; }
body.mobile .ga-god { width: 108px; padding: 10px 4px; }
body.mobile .ga-gh { width: 60px; height: 60px; }
body.mobile .ga-god b { font-size: 17px; }
body.mobile .ga-syn { gap: 12px; }
body.mobile .ga-mk { gap: 8px; }
body.mobile .ga-card { height: 92px; }
body.mobile .ga-roles { flex-wrap: nowrap; gap: 8px; }
body.mobile.rules-v3 .ga-roles { flex-wrap: wrap; gap: 6px; }   /* v3 : 9 rôles sur 2 rangées */
body.mobile.rules-v3 .ga-role .rb.big { width: 34px; height: 34px; }
body.mobile .ga-role .rb.big { width: 40px; height: 40px; }
body.mobile .ga-fam, body.mobile .ga-fam canvas { width: 34px; height: 34px; }
body.mobile .ga-fams { flex-wrap: nowrap; }
body.mobile .ga-h.big { width: 80px; height: 80px; }
body.mobile .ga-obj { gap: 10px; }
body.mobile .ga-win { padding-top: 30px; }
body.mobile .ga-perso { gap: 10px; }
body.mobile .ga-stats span { height: 28px; }
body.mobile .ga-stats i { display: none; }   /* téléphone : le nom seul (l'effet est dans la bulle de chaque caractéristique) */
body.mobile .ga-spell { margin-top: 2px; padding: 5px 10px; }
body.mobile .ga-pod { height: 26px; line-height: 26px; }
/* Défi : la ligne de joueur garde sa forme d'ordinateur (la liste du téléphone est compacte) */
/* Sanctuaire : le bouton du guide en carré « ? » */

/* toucher : pas de défilement ni de zoom de la page pendant qu'on glisse un monstre, pas de double-tap qui zoome */
body.mobile, body.mobile #viewport { overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.mobile button, body.mobile .score, body.mobile .trait, body.mobile .mcard { touch-action: manipulation; }   /* ressources et objets : glissables (touch-action: none, style.css) */
body.mobile #board { touch-action: none; }
body.mobile #traits-list, body.mobile #traits-list *, body.mobile #players, body.mobile #players * { touch-action: none; }   /* défilement géré en JS (mobile.js dragScroll) */
body.mobile #traits-list.more, body.mobile #players.more { -webkit-mask-image: linear-gradient(180deg, #000 78%, rgba(0,0,0,.25)); mask-image: linear-gradient(180deg, #000 78%, rgba(0,0,0,.25)); }   /* la suite est plus bas */
body.mobile .page, body.mobile .home-l, body.mobile .chs-panel, body.mobile #traits-list, body.mobile #tooltip, body.mobile #help, body.mobile .set-box, body.mobile .skin-grid, body.mobile .history, body.mobile .lad-body { touch-action: pan-y; }
/* écrans étroits (scène de 860 à 1000 de large) : le menu du haut tient sur une ligne */
body.mobile #mnav button img, body.mobile .cur-plus { display: none; }
body.mobile #mnav button { padding: 0 8px; }

/* top 1 : le titre à l'échelle du téléphone */
body.mobile .ch-title { top: 8px; gap: 8px; --u: .55px; --fmin: 13px; }
body.mobile #champion .ch-foot { top: 8px; right: 8px; bottom: auto; padding: 0 8px; border-radius: 9px; font-size: 10px; line-height: 18px; }   /* en haut à droite : loin des unités du plateau */

/* résultats de fin de partie : la fenêtre défile (les boutons Rejouer / Menu restent atteignables) */
body.mobile #results { align-items: flex-start; overflow-y: auto; padding: 10px 0 14px; touch-action: pan-y; }
body.mobile .rs-box { width: 720px; gap: 8px; padding: 14px 18px; }
body.mobile .rs-place { width: 84px; height: 84px; }
body.mobile .rs-place b { font-size: 34px; }
body.mobile .rs-box h2 { font-size: 26px; }
body.mobile #quit { overflow-y: auto; }
/* fin de partie au téléphone : deux colonnes, tout sur un écran (place, rang, gains, boutons | courbe, meilleures unités, plateau) */
body.mobile #results:has(.rs-m) { align-items: center; overflow: hidden; padding: 8px; }
body.mobile .rs-box.rs-m { width: min(980px, 100%); max-height: 100%; flex-direction: row; align-items: stretch; gap: 18px; padding: 12px 16px; text-align: left; }
body.mobile .rs-main { width: 300px; flex: none; display: flex; flex-direction: column; gap: 8px; }
body.mobile .rs-side { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
body.mobile .rs-side:empty { display: none; }
body.mobile .rs-head { display: grid; grid-template-columns: 76px 1fr; column-gap: 12px; align-items: center; }
body.mobile .rs-head .rs-place { grid-row: 1 / 3; width: 76px; height: 76px; border-width: 3px; }
body.mobile .rs-head .rs-place b { font-size: 30px; }
body.mobile .rs-head .rs-place span { font-size: 11px; }
body.mobile .rs-head h2 { align-self: end; font-size: 25px; }
body.mobile .rs-head .rs-sub { align-self: start; font-size: 11.5px; }
body.mobile .rs-m .rs-rank { gap: 10px; padding: 6px 10px; }
body.mobile .rs-m .rs-rank img { width: 46px; }
body.mobile .rs-m .rs-rank b { font-size: 16px; }
body.mobile .rs-m .rs-rank span { font-size: 11.5px; }
body.mobile .rs-m .rs-delta { font-size: 20px; }
body.mobile .rs-m .rs-promo { padding: 4px 10px; font-size: 12.5px; text-align: center; }
body.mobile .rs-m .rs-rewards { gap: 6px; }
body.mobile .rs-m .rs-rewards > div { padding: 6px 4px; }
body.mobile .rs-m .rs-rewards img { width: 22px; }
body.mobile .rs-m .rs-rewards b { font-size: 18px; }
body.mobile .rs-m .rs-rewards span { font-size: 11.5px; }
body.mobile .rs-m .rs-missions { font-size: 11.5px; }
body.mobile .rs-m .rs-btns { margin-top: auto; gap: 8px; }
body.mobile .rs-m .rs-btns { flex-wrap: wrap; }
body.mobile .rs-m .rs-btns .btn-green.big { flex: 1 1 100%; height: 42px; font-size: 19px; }
body.mobile .rs-m .rs-btns .btn-grey { flex: 1 1 0; height: 34px; padding: 0 8px; font-size: 12px; white-space: nowrap; }
/* téléphone : les 4 cartes du résumé (écran de fin v2) dans la colonne de droite, plus serrées ; elle défile si besoin */
body.mobile .rs-m .rs-side { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; }
body.mobile .rs-m .rs2 { gap: 8px; }
body.mobile .rs-m .rs2-card { padding: 9px 10px 10px; border-radius: 11px; }
body.mobile .rs-m .rs2-card h4 { margin-bottom: 9px; font-size: 10.5px; }
body.mobile .rs-m .rs2-u { width: 48px; height: 48px; border-radius: 10px; }
body.mobile .rs-m .rs2-u.sm { width: 38px; height: 38px; }
body.mobile .rs-m .rs2-units { gap: 10px 8px; }
body.mobile .rs-m .rs2-bench { margin-top: 12px; padding-top: 9px; }
body.mobile .rs-m .rs2-d { grid-template-columns: 12px 32px minmax(0, 1fr) auto; gap: 7px; padding: 4px 0; }
body.mobile .rs-m .rs2-pt { width: 32px; height: 32px; }
body.mobile .rs-m .rs2-dn b { font-size: 11.5px; }
body.mobile .rs-m .rs2-v { font-size: 15px; }
body.mobile .rs-m .rs2-s { height: 28px; padding-right: 8px; }
body.mobile .rs-m .rs2-si { width: 22px; height: 22px; }
body.mobile .rs-m .rs2-s b, body.mobile .rs-m .rs2-i em { font-size: 11px; }
body.mobile .rs-m .rs2-i { height: 32px; }
body.mobile .rs-m .rs2-i img { width: 26px; height: 26px; }
/* bannières (niveau, Défi, mort subite…) : au-dessus du plateau, à sa taille */
body.mobile .banner { left: var(--bx); width: var(--bw); top: var(--evy, var(--by)); height: var(--evh, 180px); --u: .65px; --fmin: 16px; }   /* Esport + Ruban à l'échelle (--u), dans la partie visible du plateau */
body.mobile #game.pl-open #banner, body.mobile #game.pl-duel #banner { width: calc(var(--bw) - 154px); }
body.mobile #game.pl-open:where(.duel-prep) #banner, body.mobile #game.pl-duel #banner { width: calc(var(--bw) - 174px); }
body.mobile .banner.duel, body.mobile .banner.prep { box-sizing: border-box; padding-top: 58px; --u: .58px; }   /* Défi : la bande d'en-tête sous la ligne « Prochain adversaire » et le cadre des pods */
body.mobile .ev-chip { font-size: 13px; }
body.mobile #game.bn-on #recap { opacity: .35; }
body.mobile .rc-res { font-size: 15px; } body.mobile #recap .rc-tac { display: none; }
body.mobile #new-version { top: 48px; font-size: 12px; padding: 5px 12px; }
body.mobile #m-modal .m-box { max-height: calc(100% - 12px); overflow-y: auto; touch-action: pan-y; }

/* tutoriel (carte coach) : textes à 17 px de scène au moins (≈ 13,3 px à l'écran à 360 de haut), cibles de 44 px */
body.mobile #coach { width: 340px; }
body.mobile .co-box { max-height: calc(var(--evh, 400px) - 16px); }
body.mobile .co-body { overflow-y: auto; scrollbar-width: none; touch-action: pan-y; }
body.mobile .co-title { padding: 0 6px 0 10px; font-size: 17px; letter-spacing: 0; }
body.mobile .co-n { padding-right: 14px; font-size: 17px; }
body.mobile .co-x { padding: 8px 12px 4px; font-size: 17px; line-height: 1.35; }
body.mobile .co-foot { padding: 2px 20px 8px 4px; gap: 6px; }
body.mobile .co-skip { height: 44px; padding: 0 6px; font-size: 17px; }
body.mobile .co-foot .btn-green, body.mobile .co-foot .btn-grey { height: 44px; padding: 0 14px; font-size: 17px; }
/* Sanctuaire : la carte en bande entre les 3 dieux et la poignée du marché (aucun dieu caché), texte à côté des boutons */
body.mobile .lb-rec { top: -6px; right: 10px; padding: 3px 8px; font-size: 17px; }
body.mobile .evo-tuto { height: auto; min-height: 34px; padding: 6px 14px; font-size: 17px; white-space: normal; }
body.mobile .welcome.how { width: auto; gap: 8px; }
body.mobile .welcome.how h2 { font-size: 26px; }
body.mobile .welcome.how .kicker, body.mobile .welcome.how .hint, body.mobile .welcome.how .wl-how { font-size: 17px; }
body.mobile .wh-cards { gap: 10px; }
body.mobile .wh-card { width: 240px; min-height: 0; }
body.mobile .wh-plate { height: 44px; }
body.mobile .wh-card p { padding: 8px 12px 10px; font-size: 17px; line-height: 1.3; }
body.mobile .wh-btns .btn-grey, body.mobile .wh-btns .btn-green { min-height: 44px; font-size: 17px; }

/* colonne de gauche (Scott 2026-10-21) : AFFINITÉS (règles v3) puis, tout en bas, le bouton des objets et le gros bouton d'XP */
#m-aff, #m-bottom { display: none; }
body.mobile.rules-v3 #m-aff { display: flex; flex: none; flex-direction: column; gap: 3px; }
body.mobile #m-aff .aff-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
body.mobile .aff-tile { position: relative; height: 38px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 0 4px; box-sizing: border-box; overflow: hidden; background: rgba(0,0,0,.3); border-radius: 6px; }
body.mobile .aff-tile img { width: 17px; height: 17px; object-fit: contain; }
body.mobile .aff-tile[data-tier="0"] img { filter: grayscale(1); opacity: .55; }
body.mobile .aff-tile .aff-nm { display: none; }
body.mobile .aff-tile .aff-v { font: 700 13px/1 Lexend, sans-serif; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.mobile .aff-tile .aff-v small { font-size: 9.5px; font-weight: 600; color: #9a94a8; }
body.mobile .aff-tile .aff-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); }
body.mobile .aff-tile .aff-bar i { display: block; height: 100%; background: var(--ec); }
body.mobile .aff-tile[data-tier="1"] { box-shadow: inset 0 0 0 1.5px #c0742e; }
body.mobile .aff-tile[data-tier="2"] { box-shadow: inset 0 0 0 1.5px #c9d3e0; }
body.mobile .aff-tile[data-tier="3"] { box-shadow: inset 0 0 0 1.5px #ffd23f; }
body.mobile .aff-tile[data-tier="3"] .aff-bar i { background: #ffd23f; }
body.mobile #m-bottom { display: flex; flex: none; gap: 6px; height: 46px; }
body.mobile #m-bottom #m-items { flex: none; width: 54px; height: 46px; flex-direction: column; justify-content: center; gap: 1px; padding: 0; }
body.mobile #m-bottom #m-items span { font-size: 10.5px; line-height: 1; }
body.mobile #m-bottom #xp-btn { flex: 1; min-width: 0; width: auto; height: 46px; margin: 0; position: static; font-size: 15px; }

/* ================================================================ menu sur téléphone, passe « facile d'accès et pratique » (Scott 2026-10-23).
   Règles sous #menu : elles passent devant celles de l'interface v2 (ui-v2-menu.css). */
/* Boutique : en-tête sur une ligne, offres et cartes entières à l'écran (la page défile) */
body.mobile #menu #p-shop { flex-direction: column; gap: 8px; padding: 6px 8px 8px; }
body.mobile #menu .shop-head { flex: none; gap: 8px; }
body.mobile #menu .sh-title .kicker { display: none; }
body.mobile #menu .sh-title h2 { font-size: 20px; white-space: nowrap; }
body.mobile #menu .sh-chip { height: 32px; padding: 0 10px; gap: 5px; font-size: 0; }   /* l'icône et le temps seuls */
body.mobile #menu .sh-chip b { font-size: 13px; }
body.mobile #menu .sh-wallet { gap: 6px; }
body.mobile #menu .sh-wallet > span, body.mobile #menu .sh-get { height: 32px; padding: 0 10px; font-size: 13px; }
body.mobile #menu .sh-wallet > span img { width: 18px; }
body.mobile #menu .offers { flex: none; gap: 8px; }
body.mobile #menu .skin-card.offer { height: 196px; }
body.mobile #menu .skin-card.offer canvas { width: 176px; height: 176px; margin-left: -88px; }
body.mobile #menu .skin-card.offer .sc-info { gap: 6px; padding: 6px 8px; }
body.mobile #menu .skin-card.offer .sc-name b { font-size: 17px; }
body.mobile #menu .skin-card.offer .sc-price { height: 30px; padding: 0 10px; font-size: 14px; }
body.mobile #menu .shop-bar { flex: none; flex-wrap: wrap; gap: 6px; }
body.mobile #menu .rar-chips button { height: 32px; padding: 0 11px; }
body.mobile #menu .skin-grid { flex: none; overflow: visible; gap: 8px; }
body.mobile #menu .skin-card.grid { width: 152px; height: 214px; }
body.mobile #menu .skin-card.grid canvas { width: 152px; height: 158px; margin-left: -76px; }
/* Héros : les 7 classes sur 2 rangs de 4 (sans quinconce), « Nouveau » en pastille ; classes et sorts tiennent dans la colonne */
body.mobile #menu .hs-cls { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 4px; padding-bottom: 0; }
body.mobile #menu .hs-cls { grid-auto-rows: 60px; }
body.mobile #menu .hs-cls .hs-hex, body.mobile #menu .hs-cls .hs-hex[data-cls] { grid-area: auto; width: 100%; height: 60px; top: 0; }   /* herosheet.css place chaque classe en quinconce */
body.mobile #menu .hs-cls .hs-hex .hx { inset: 0 4px 14px; }
body.mobile #menu .hs-cls .hs-hex b { left: -2px; right: -2px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
body.mobile #menu .hs-spells { row-gap: 15px; padding-bottom: 12px; }   /* « Niv. 6 » sous chaque sort, sans chevaucher la rangée suivante */
body.mobile #menu .hs-spell .hs-lv { font-size: 10px; }
body.mobile #menu .hs-cls .cls-new { right: 2px; top: -1px; width: 10px; height: 10px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; }
/* Profil : avatar plus petit, la colonne de gauche défile si besoin ; Classement : emblème plus petit (les chiffres tiennent dessous) */
body.mobile #menu #p-profile .col.left { overflow-y: auto; scrollbar-width: none; }
body.mobile #menu #p-profile .id-avatar { width: 84px; height: 84px; }
body.mobile #menu #p-profile .id-av-btn .id-av-edit { top: -6px; right: -6px; width: 28px; height: 28px; }
body.mobile #menu #p-ladder .rank-emblem.big { width: 96px; }
body.mobile #menu #p-ladder .ch-stats b { font-size: 17px; white-space: nowrap; }
body.mobile #menu .lad-row { grid-template-columns: 30px minmax(0, 1fr) 92px 40px 58px 50px; }
body.mobile #menu .lad-row.head { font-size: 10px; letter-spacing: .04em; }
body.mobile #menu .lad-row > :nth-child(n+4) { justify-self: center; text-align: center; }   /* PC, parties, top 4 : centrés sous leur titre */
/* Paramètres : la fenêtre tient dans l'écran et défile (la règle v2 « max-height 840, overflow hidden » la coupait en haut) ;
   pas de raccourcis clavier sur un téléphone */
body.mobile #settings .set-box { max-height: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain; }
body.mobile #settings .set-sec:has(.keys-list), body.mobile #settings .set-foot .btn-grey[data-reset] { display: none; }
/* Accueil (Scott 2026-10-23 : « le moins de menus à faire défiler, les bonnes infos visibles tout de suite ») : la colonne de gauche
   tient sans défiler — plus de bandeau de saison (titre seul sur téléphone), missions, coffre, dernières parties et Mode Dofus serrés */
body.mobile #menu #p-home .home-l { gap: 5px; overflow: hidden; }
body.mobile #menu #p-home .season { display: none; }
body.mobile #menu #p-home .home-l .card { padding: 6px 8px; }
body.mobile #menu #p-home .home-l .card-head { margin-bottom: 4px; }
body.mobile #menu #p-home .ms-list { gap: 4px; }
body.mobile #menu #p-home .ms-row { height: 47px; }
body.mobile #menu #p-home .ms-t b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12.5px; line-height: 1.12; }   /* le titre entier, sur 2 lignes */
body.mobile #menu #p-home .ms-t em { font-size: 12px; line-height: 1.1; }
body.mobile #menu #p-home .gift { height: 54px; gap: 8px; }
body.mobile #menu #p-home .gift-ic { width: 40px; height: 48px; }
body.mobile #menu #p-home .gift .btn-green { height: 34px; }
body.mobile #menu #p-home .recent { height: auto; }
body.mobile #menu #p-home .v-last { flex: none; }
body.mobile #menu #p-home .v-lg { flex-direction: row; gap: 5px; height: 34px; }
body.mobile #menu #p-home .v-lg small { display: none; }
body.mobile #menu #p-home .v-pl b { height: 26px; min-width: 32px; font-size: 14px; }
body.mobile #menu #p-home .v-pl img { width: 26px; height: 26px; }
body.mobile #menu #p-home .mode-switch { height: 42px; }
body.mobile #menu #p-home .mode-switch .ms-logo { width: 30px; height: 30px; }
body.mobile #menu #p-home .mode-switch .ms-t b { font-size: 14px; }
/* Héros (Scott 2026-10-24) : le sort touché s'explique dans une bulle à sa gauche, par-dessus le héros (herosheet.js .hs-pop) :
   rien ne bouge, le texte est entier ; la bénédiction a toujours son icône (elle s'écrasait à 0 px quand le texte était long) */
body.mobile #menu .hs-pop { position: absolute; z-index: 20; width: 300px; max-height: calc(100% - 12px); overflow-y: auto; margin: 0; min-height: 0; padding: 9px 11px;
  border: 1.5px solid var(--v-edge-hi, rgba(176, 156, 244, .55)); border-radius: 12px; background: rgba(18, 12, 38, .96); scrollbar-width: none; }
body.mobile #menu .hs-pop[hidden] { display: none; }
body.mobile #menu .hs-bless .hx { flex: none; width: 28px; height: 32px; }
body.mobile #menu .hs-bless p { -webkit-line-clamp: 2; }
/* Profil : chiffres en tuiles basses, l'historique gagne la place */
body.mobile #menu #p-profile .pf-stats { gap: 5px; }
body.mobile #menu #p-profile .card.stat { min-height: 0; padding: 5px 4px; gap: 1px; }
body.mobile #menu #p-profile .card.stat b { font-size: 18px; line-height: 1.1; }
body.mobile #menu #p-profile .card.stat span { font-size: 11px; line-height: 1.15; }
/* Terrains : aperçu plus étroit, catalogue sur 3 colonnes (les 9 terrains presque tous visibles d'un coup) */
body.mobile #menu .hs.tp { grid-template-columns: 370px minmax(0, 1fr); }
body.mobile #menu .tp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 5px; }
body.mobile #menu .tp-grid .ter-card .ter-img { aspect-ratio: auto; height: 42px; }
body.mobile #menu .tp-grid .ter-rar { top: 3px; left: 3px; padding: 0 5px; font-size: 9px; }
body.mobile #menu .tp-grid .ter-info { gap: 0; padding: 2px 6px 3px; }
body.mobile #menu .tp-grid .ter-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
body.mobile #menu .tp-grid .ter-foot { margin-top: 0; font-size: 11px; }
body.mobile #menu .tp-grid .ter-card.tp-on { border-color: var(--v-lime, #c8e20a); box-shadow: 0 0 0 2px var(--v-lime, #c8e20a); }
/* Sélection rapide (Scott 2026-10-24 : « inutilisable sur mobile ») : les outils rétrécissent (icône 38 px + mot court), la bande des
   presets prend toute la place restante et se fait glisser au doigt ; plus de flèches posées sur le premier preset */
body.mobile #menu .qs-row { gap: 6px; }
body.mobile #menu .qs-scroll { --qs-img: 44px; flex: 1 1 auto; }
body.mobile #menu .qs-scroll .qs-arr { display: none; }
body.mobile #menu .qs-list { gap: 6px; touch-action: pan-x; overscroll-behavior-x: contain; }
body.mobile #menu .qs-list .qs-t { width: 48px; }
body.mobile #menu .qs-list .qs-t > img { width: 44px; height: 44px; }
body.mobile #menu .qs-t span { max-width: 50px; font-size: 10px; }
body.mobile #menu .qs-sep { margin: 0; }
body.mobile #menu .qs-tools { gap: 5px; }
body.mobile #menu .qs-tools .qs-t { width: 50px; }
body.mobile #menu .qs-tools .qs-t > img { width: 38px; height: 38px; padding: 9px; }