/* MEEZ ROYALE - MENU MOBILE (plan mobile, lot 4) : une vraie coque pour telephone, pas le site PC rapetisse.
   Actif avec body.touch (ecran tactile) : charge APRES compact.css / hero.css / anim.css (et apres m-controls.css / m-hud.css), il redessine la navigation et l'accueil ; les pages (boutique, pass...) gardent leur contenu, adapte plus bas.
   PORTRAIT  : barre du haut fine (reglages, compte, pieces, gemmes, amis, messages) + BARRE D'ONGLETS EN BAS (le pouce) ; le contenu defile entre les deux.
   PAYSAGE   : barre du haut fine + RAIL D'ONGLETS A GAUCHE ; l'accueil passe sur deux colonnes (titre + personnage | pseudo, JOUER, raccourcis), tout tient sans defiler.
   La partie elle-meme (HUD, commandes) est dans m-hud.css / m-controls.css. */
:root { --m-tab-h: 62px; --m-rail-w: 68px; --m-top-h: 52px; }

/* ---------------------------------------------------------------- commun (portrait + paysage) */
body.touch #topnav { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(180deg, rgba(22,18,15,.97), rgba(16,13,11,.88)); }   /* (un filtre ferait de la barre le repere de ses enfants « fixed » : la barre d'onglets en bas) */
body.touch #navLinks { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.touch .nav-sep { display: none; }
body.touch #navLinks > .navlink { flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px 4px; border-radius: 12px; font-size: 10.5px; letter-spacing: 0; }
body.touch #navLinks > .navlink svg { width: 22px; height: 22px; }
body.touch #navLinks > .navlink.on { box-shadow: 0 4px 16px rgba(240,200,105,.3); }
body.touch #navLinks > .navlink:hover { transform: none; }
body.touch .navlink .nav-badge { top: 2px; right: calc(50% - 20px); }
body.touch .icon-btn, body.touch .curr, body.touch #navOptionsBtn { min-height: 38px; }

/* ---------------------------------------------------------------- PORTRAIT */
@media (orientation: portrait) and (max-width: 900px) {
  body.touch #menu { padding-bottom: calc(var(--m-tab-h) + var(--sab)); }
  body.touch #topnav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px; padding: calc(7px + var(--sat)) calc(10px + var(--sar)) 7px calc(10px + var(--sal)); min-height: var(--m-top-h); }
  body.touch #navLeft { order: 1; flex: 1 1 auto; gap: 6px; min-width: 0; }
  body.touch #navRight { order: 2; gap: 5px; flex: none; }
  body.touch .lang-globe, body.touch #langSwitch { display: none; }
  body.touch #navAccount .account-info { display: none; }
  body.touch #navAccount .btn { padding: 8px 14px; font-size: 13px; }
  body.touch .avatar-dot { width: 34px; height: 34px; }
  body.touch #navRight .icon-btn { width: 36px; height: 36px; }
  body.touch .nav-right-sep { display: none; }
  body.touch .curr { padding: 5px 8px 5px 7px; font-size: 12.5px; gap: 5px; }
  body.touch #navLinks { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; order: 0; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; justify-self: stretch; overflow: visible;
    padding: 6px calc(6px + var(--sar)) calc(6px + var(--sab)) calc(6px + var(--sal)); background: linear-gradient(180deg, rgba(20,17,14,.93), rgba(10,8,6,.98)); border-top: 1px solid var(--card-line); box-shadow: 0 -10px 30px rgba(0,0,0,.4); }
  body.touch #navLinks > .navlink { min-height: 50px; }
  body.touch #menuStage { padding: 8px calc(12px + var(--sar)) 22px calc(12px + var(--sal)); }
  body.touch .extra-pane { padding: 16px 14px 20px; border-radius: 18px; margin-top: 2px; }
  body.touch .pane-title { font-size: 22px; }
  body.touch .pane-sub { font-size: 13px; }
  body.touch .prime-fab { bottom: calc(var(--m-tab-h) + 10px + var(--sab)); }
  /* accueil : la scene prend la hauteur qui reste, le gros bouton est dans la zone du pouce */
  body.touch .hero-stage { min-height: calc(100dvh - var(--m-top-h) - var(--m-tab-h) - var(--sat) - var(--sab) - 30px); gap: 10px; padding: 2px 0 8px; }
  body.touch #menuHero .logo { font-size: clamp(30px, 9vw, 40px); }
  body.touch #menuHero .tagline { font-size: 13px; }
  body.touch .char-showcase { --cv-h: clamp(140px, 27vh, 250px); }
  body.touch .play-zone { max-width: 440px; }
  body.touch #menuHero .btn-play { height: 64px; }
  body.touch #menuHero .btn-play-tuto { height: 76px; }
  body.touch .home-foot { padding-top: 4px; }
}

/* ---------------------------------------------------------------- PAYSAGE (telephone couche) */
@media (orientation: landscape) and (max-height: 520px) {
  body.touch #menu { padding-left: calc(var(--m-rail-w) + var(--sal)); }
  body.touch #topnav { position: sticky; margin-left: calc(-1 * (var(--m-rail-w) + var(--sal))); padding: calc(4px + var(--sat)) calc(10px + var(--sar)) 4px calc(10px + var(--sal)); min-height: 44px; }
  body.touch #navLinks { position: fixed; left: 0; top: calc(46px + var(--sat)); bottom: 0; z-index: 35; width: calc(var(--m-rail-w) + var(--sal)); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
    padding: 8px 6px calc(8px + var(--sab)) calc(6px + var(--sal)); overflow-y: auto; scrollbar-width: none; background: linear-gradient(90deg, rgba(20,17,14,.95), rgba(14,11,9,.9)); border-right: 1px solid var(--card-line); order: 0; justify-self: auto; }
  body.touch #navLinks::-webkit-scrollbar { display: none; }
  body.touch #navLinks > .navlink { min-height: 48px; flex: none; padding: 5px 0 3px; font-size: 10px; letter-spacing: -.2px; }
  body.touch #navRight .icon-btn { width: 38px; height: 38px; }
  body.touch #navLinks > .navlink svg { width: 20px; height: 20px; }
  body.touch #menuStage { padding: 6px calc(12px + var(--sar)) 14px 10px; }
  body.touch .prime-fab { right: calc(10px + var(--sar)); bottom: calc(8px + var(--sab)); }
  /* accueil sur deux colonnes : a gauche le titre et le personnage, a droite le pseudo, TUTO / JOUER, les raccourcis ; le pied de page dessous */
  body.touch .hero-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: auto 1fr auto auto; grid-template-areas: "brand play" "char play" "char bar" "foot foot"; align-items: center; justify-items: center; gap: 4px 18px; min-height: calc(100dvh - 60px - var(--sat) - var(--sab)); padding: 0; }
  body.touch .hero-brand { grid-area: brand; margin: 0; }
  body.touch .char-showcase { grid-area: char; --cv-h: clamp(96px, 38vh, 170px); max-width: 100%; }
  body.touch .play-zone { grid-area: play; margin: 0; width: 100%; max-width: 400px; align-self: end; }
  body.touch #homeBar { grid-area: bar; margin: 0; max-width: 400px; align-self: start; }
  body.touch .home-foot { grid-area: foot; margin: 0; padding: 0; max-width: none; }
  body.touch #menuHero .logo { font-size: 26px; }
  body.touch #menuHero .hero-m { width: 28px; height: 28px; }
  body.touch .hb-seg { flex-direction: column; gap: 2px; padding: 6px 4px 5px; font-size: 11.5px; }
  body.touch .hb-dot { position: absolute; top: 6px; left: calc(50% + 12px); }
}

/* ---------------------------------------------------------------- cibles tactiles (>= 40 px) et details communs */
body.touch .prime-fab { display: none !important; }                                              /* (il cachait le bouton d'achat : PRIME a son onglet dans la boutique) */
body.touch .btn, body.touch .small-btn, body.touch .btn-ghost, body.touch .btn-solid, body.touch .seg button, body.touch .tab, body.touch .jump, body.touch .m-tab { min-height: 42px; }
body.touch .seg button { padding-left: 14px; padding-right: 14px; }
body.touch .link-btn { padding: 10px 6px; }
body.touch .switch { transform: scale(1.14); transform-origin: right center; }
body.touch input[type=range] { height: 28px; }
body.touch input.field, body.touch .field { font-size: 16px; }                                      /* (16 px : iOS ne zoome pas la page quand on tape) */
body.touch a { -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------- « Joue en plein ecran » (mobile/install.js) : bandeau au-dessus de la barre d'onglets, jamais sur le gros bouton */
#installBanner { position: fixed; z-index: 60; left: calc(10px + var(--sal)); right: calc(10px + var(--sar)); bottom: calc(var(--m-tab-h) + 10px + var(--sab)); display: flex; align-items: center; gap: 11px; padding: 10px 10px 10px 12px;
  border-radius: 16px; background: linear-gradient(135deg, rgba(48,38,24,.97), rgba(24,19,14,.98)); border: 1px solid rgba(240,200,105,.5); box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 22px rgba(240,200,105,.18); animation: ibIn .45s var(--ease, ease-out) both; }
@keyframes ibIn { from { transform: translateY(24px); opacity: 0; } }
#installBanner .ib-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 900 22px var(--mono, monospace); color: #2a1710; background: var(--grad); }
#installBanner .ib-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#installBanner .ib-txt b { font: 800 14px var(--ui); }
#installBanner .ib-txt span { font: 600 12px/1.35 var(--ui); opacity: .85; }
#installBanner .ib-go { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 12px; font: 800 14px var(--ui); color: #2a1710; background: var(--grad); cursor: pointer; }
#installBanner .ib-x { flex: none; min-width: 40px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; font: 800 14px var(--ui); cursor: pointer; }
@media (orientation: landscape) and (max-height: 520px) {
  #installBanner { left: calc(var(--m-rail-w) + var(--sal) + 10px); bottom: calc(8px + var(--sab)); max-width: 520px; }
}

/* pas de zoom au double toucher, pas de selection de texte parasite (sauf dans les champs) */
body.touch { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
body.touch input, body.touch textarea, body.touch [contenteditable] { -webkit-user-select: text; user-select: text; }

/* ================================================================ MENU v2 (mobile/shell.js) ================================================================ */
/* ---- 5 onglets : Jouer · Boutique · Missions · Pass · Plus (Perso et Classement vivent dans « Plus » : leurs onglets d'origine restent dans le DOM, seulement masques) */
body.touch #navLinks > .navlink[data-nav="perso"], body.touch #navLinks > .navlink[data-nav="classement"] { display: none; }
body.touch #navLinks > .m-tab .nav-badge { top: 2px; right: calc(50% - 20px); }

/* ---- nouveau joueur (aucune vraie partie jouee, pas de compte) : son Meez et JOUER, rien d'autre sur l'accueil ; les onglets reviennent des qu'il quitte l'accueil (reglages, langue, Meez touche) */
body.touch.m-newbie #navRight, body.touch.m-newbie #playPerks, body.touch.m-newbie #homeBar, body.touch.m-newbie .home-foot, body.touch.m-newbie #charHint, body.touch.m-newbie #primeRibbon { display: none !important; }

body.touch.m-newbie:has(#navLinks > [data-nav="accueil"].on) #navLinks { display: none; }

body.touch.m-newbie:has(#navLinks > [data-nav="accueil"].on) { --m-tab-h: 0px; --m-rail-w: 0px; }

/* l'accueil du nouveau joueur est centre dans la hauteur (le reste de la page le poussait vers le bas) */
body.touch.m-newbie .hero-stage { justify-content: center; }

body.touch.m-newbie .hero-brand { margin-top: 0; }

@media (orientation: landscape) and (max-height: 520px) {
  body.touch.m-newbie .char-showcase { --cv-h: clamp(120px, 50vh, 200px); }
  body.touch.m-newbie #menuHero .logo { font-size: 32px; }
  body.touch.m-newbie #menuHero .hero-m { width: 34px; height: 34px; }
}

body.touch:not(.m-newbie) #mTrain { display: none; }

body.touch #mTrain { align-self: center; margin-top: 2px; min-height: 44px; padding: 8px 18px; font: 700 15px var(--ui); letter-spacing: .3px; color: var(--text); opacity: .82; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); }

body.touch #mTrain:active { opacity: 1; }

/* ---- fenetres : feuilles qui montent du bas en portrait ; en paysage (peu de hauteur) elles restent centrees et defilent */
@keyframes mSheetUp { from { transform: translateY(36%); opacity: 0; } }

@media (orientation: portrait) and (max-width: 900px) {
  body.touch .modal-overlay { align-items: flex-end; padding: 0; }
  body.touch .modal-panel, body.touch .hm-panel { width: 100%; max-width: none; margin: 0; border-radius: 24px 24px 0 0; max-height: min(90dvh, calc(var(--h100) - 40px)); overflow-y: auto; padding-bottom: calc(22px + var(--sab));
    animation: mSheetUp .28s var(--ease, ease-out) both; overscroll-behavior: contain; }
  body.touch .hm-head { touch-action: none; cursor: grab; }
}

.hm-panel > .m-grab { margin: -4px auto 8px; }

@media (orientation: landscape) and (max-height: 520px) {
  .hm-panel > .m-grab { display: none; }
  body.touch .modal-panel, body.touch .hm-panel { max-height: calc(var(--h100) - 12px); overflow-y: auto; overscroll-behavior: contain; }
  body.touch .gn-ico { font-size: 34px; line-height: 1.1; margin: 0; }                                              /* proposition de compte, partie quittee, deconnexion... : la coque se resserre pour tenir en 360 px */
  body.touch .modal-panel .modal-title { font-size: 19px; margin: 2px 0 4px; }
  body.touch .modal-panel .modal-sub { font-size: 13px; line-height: 1.35; margin: 0 0 6px; }
  body.touch .modal-panel .kicked-actions { margin-top: 6px; gap: 8px; }
}

/* champs et boutons de saisie : 44 px de haut (le champ « code » du groupe faisait 31 px) */
body.touch #joinCodeInput, body.touch .hm-group input, body.touch .modal-panel input.field, body.touch .modal-panel input[type=text], body.touch .modal-panel input[type=password] { min-height: 44px; }

/* croix de fermeture et petits liens : zones tactiles de 44 px (la croix faisait 30 px) */
body.touch .hm-x { width: 44px; height: 44px; font-size: 16px; }

body.touch .hm-head { gap: 8px; }

/* ---- feuille « Plus » */
.m-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(6,5,4,.74); animation: fadeIn .2s ease-out; }

.m-sheet.hidden { display: none; }

.m-sheet-panel { position: relative; width: 100%; max-width: 520px; max-height: min(88dvh, calc(var(--h100) - 20px)); overflow-y: auto; overscroll-behavior: contain; padding: 8px 14px calc(18px + var(--sab));
  border-radius: 24px 24px 0 0; background: linear-gradient(180deg, rgba(40,33,27,.99), rgba(20,17,14,.99)); border: 1px solid var(--card-line); border-bottom: 0; box-shadow: 0 -16px 50px rgba(0,0,0,.55); animation: mSheetUp .28s var(--ease, ease-out) both; }

.m-grab { display: block; width: 42px; height: 5px; margin: 4px auto 6px; border-radius: 3px; background: rgba(255,255,255,.28); }

.m-sheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; touch-action: none; cursor: grab; }

.m-sheet-head h3 { margin: 0; font: 900 20px var(--ui); letter-spacing: .5px; }

.m-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font: 800 16px var(--ui); color: var(--text); background: rgba(255,255,255,.09); }

.m-list { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 4px 0 10px; }

.m-row { position: relative; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 14px; border: 1px solid var(--card-line); border-radius: 16px; cursor: pointer; text-align: left; color: var(--text);
  font: 750 16px var(--ui); background: rgba(255,255,255,.05); }

.m-row svg { flex: none; width: 22px; height: 22px; color: var(--brand); }

.m-row span { flex: 1 1 auto; min-width: 0; }

.m-row:active { background: rgba(255,255,255,.14); }

.m-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 0 3px rgba(255,90,90,.25); }

.m-dot.hidden { display: none; }

.m-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }

.m-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 650 14px var(--ui); opacity: .92; }

.m-lang .seg button { min-width: 56px; }

.m-socials { display: flex; gap: 10px; }

.m-socials a { flex: 1 1 0; display: grid; place-items: center; min-height: 46px; border-radius: 14px; font: 750 14px var(--ui); color: var(--text); text-decoration: none; background: rgba(255,255,255,.07); border: 1px solid var(--card-line); }

@media (orientation: landscape) and (max-height: 520px) {
  .m-sheet { align-items: center; }
  .m-sheet-panel { max-width: 560px; border-radius: 22px; border-bottom: 1px solid var(--card-line); max-height: calc(var(--h100) - 12px); }
  .m-list { grid-template-columns: 1fr 1fr; }
  .m-grab { display: none; }
}

/* ---- allegement : pas de flou d'arriere-plan sur telephone (chaque flou est recalcule a chaque image du decor anime derriere : tres couteux sur un GPU de telephone) ; les fonds translucides restent */
body.touch.lite *, body.touch.lite *::before, body.touch.lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

body.touch.lite .modal-overlay { background: rgba(6,5,4,.84); }

body.touch.lite #navLinks { background: linear-gradient(180deg, rgba(20,17,14,.97), rgba(10,8,6,.99)); }

/* fond du menu : un voile un peu plus sombre qu'au PC (sans flou, le texte doit rester lisible sur les cartes claires : Desert, Neige) */
body.touch.lite #menu { background: radial-gradient(ellipse 70% 45% at 50% -5%, rgba(240,200,105,.15), transparent 70%), radial-gradient(ellipse 90% 80% at 50% 46%, rgba(8,7,6,.3) 30%, rgba(6,5,4,.74) 100%),
  linear-gradient(180deg, rgba(24,19,15,.62) 0%, rgba(9,8,7,.84) 100%); }

/* ---- lisibilite des pages du menu : rien en dessous de 11 px (les etiquettes de 8 a 10 px de la boutique, du Pass et du Perso sont illisibles a bout de bras) et des zones tactiles de 40 px
   (releve : tools/golden/audit_text.js) */
body.touch .ribbon.of-off, body.touch .of-kind, body.touch .new-tag, body.touch .pass-level > span, body.touch .pass-level > small, body.touch .pass-end, body.touch .pass-next > b, body.touch .pl.prem, body.touch .pl.free,
body.touch .rar-badge, body.touch .perso-skin > small, body.touch .tag-pill, body.touch #newsBadge { font-size: 11px; }

body.touch .rw-rar, body.touch .rar-badge > i { font-size: 10px; }

body.touch #homeFriendsBtn, body.touch .link-btn, body.touch #persoProfileBtn, body.touch .hf-btn { min-height: 40px; }