/* ═══════════ SGC SHELL — Chrome mobile/tablette ═══════════
   Fondation de la refonte « vraie app » mobile/tablette.
   RÈGLE D'OR : tout sélecteur ici est préfixé body.dev-phone ou
   body.dev-tablet → le bureau (body.dev-desktop) n'est JAMAIS affecté.
   ───────────────────────────────────────────────────────────── */

/* ── Phase 0 : Bandeau d'avertissement chantier ── */
body.dev-phone .sgc-maint-banner,
body.dev-tablet .sgc-maint-banner {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 9600;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: #0d1424;
  border-top: 2px solid #ffd766;
  box-shadow: 0 -8px 28px var(--shade-6);
  color: #dce6f7;
  font-size:var(--fs-base);
  line-height: 1.4;
}
body.dev-phone .sgc-maint-banner .sgc-maint-txt,
body.dev-tablet .sgc-maint-banner .sgc-maint-txt { flex: 1 1 auto; min-width: 0; }
body.dev-phone .sgc-maint-banner strong,
body.dev-tablet .sgc-maint-banner strong { color: #ffd766; }
body.dev-phone .sgc-maint-banner .sgc-maint-ok,
body.dev-tablet .sgc-maint-banner .sgc-maint-ok {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(120,170,255,0.5);
  border-radius:var(--radius-md);
  background: rgba(120,170,255,0.16);
  color: #eaf2ff;
  font-weight: 700;
  font-size:var(--fs-base);
  cursor: pointer;
  touch-action: manipulation;
}
body.dev-phone .sgc-maint-banner .sgc-maint-ok:active,
body.dev-tablet .sgc-maint-banner .sgc-maint-ok:active { background: rgba(120,170,255,0.3); }

/* Animation d'entrée UNIQUEMENT si l'utilisateur n'a pas réduit les
   animations. Base (sans animation) = bandeau visible : pas de piège
   opacity:0 bloqué (cf. lesson_css_animation_fill_mode_both_opacity_0). */
@media (prefers-reduced-motion: no-preference) {
  body.dev-phone .sgc-maint-banner,
  body.dev-tablet .sgc-maint-banner { animation: sgcMaintRise .3s ease-out; }
}
@keyframes sgcMaintRise {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ════════════ Phase 1 : Coquille téléphone (active si body.shell-on) ════════════ */

/* Masque la chrome de bureau quand la coquille mobile est active. */
body.dev-phone.shell-on .left-nav,
body.dev-phone.shell-on #breadcrumbBar { display: none !important; }

/* Espace en bas pour la barre d'onglets fixe (+ safe-area). */
body.dev-phone.shell-on .sec-full,
body.dev-phone.shell-on .planet-section {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* ── Barre d'onglets bas ── */
body.dev-phone.shell-on .sgc-tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 9500;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: #0b1120;
  border-top: 1px solid rgba(120,170,255,0.22);
  box-shadow: 0 -4px 18px rgba(0,0,0,0.55);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.dev-phone.shell-on .sgc-tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 56px; padding: 6px 2px;
  background: none; border: 0; cursor: pointer;
  color: #8b9bb8; font: inherit; touch-action: manipulation;
  transition: color 0.15s ease;
}
/* Icône dans une pastille circulaire (fill currentColor : les SVG sans fill
   étaient noirs/invisibles). Redesign 01/06. */
body.dev-phone.shell-on .sgc-tab-ico {
  display: flex; width: 36px; height: 36px; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.15s ease;
}
body.dev-phone.shell-on .sgc-tab-ico svg { width: 22px; height: 22px; fill: currentColor !important; }
body.dev-phone.shell-on .sgc-tab-ico svg * { fill: currentColor !important; stroke: none !important; }
body.dev-phone.shell-on .sgc-tab-ico-fallback { font-size: 20px; line-height: 1; }
body.dev-phone.shell-on .sgc-tab-lbl { font-size: 10px; letter-spacing: .3px; }
body.dev-phone.shell-on .sgc-tab:active .sgc-tab-ico { background: var(--tint-5); }
/* État actif : couleur or + pastille lumineuse + indicateur haut + label gras */
body.dev-phone.shell-on .sgc-tab.active { color: #ffd766; }
body.dev-phone.shell-on .sgc-tab.active .sgc-tab-lbl { font-weight: 700; }
body.dev-phone.shell-on .sgc-tab.active .sgc-tab-ico {
  background: radial-gradient(circle at 50% 42%, rgba(255,215,102,0.26), rgba(255,215,102,0.04) 72%);
}
body.dev-phone.shell-on .sgc-tab.active .sgc-tab-ico svg { filter: drop-shadow(0 0 5px rgba(255,215,102,0.55)); }
body.dev-phone.shell-on .sgc-tab.active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: 0 0 4px 4px;
  background: #ffd766; box-shadow: 0 0 8px rgba(255,215,102,0.7);
}

/* La coquille mobile (barre d'onglets + hub « Plus ») ne doit JAMAIS s'afficher
   sur la landing marketing : un visiteur déconnecté n'a pas de base, et la barre
   #sgcTabBar (position:fixed, z-index 9500) recouvrait le bas du hero sur
   téléphone. landing-active tombe à l'entrée en jeu → la barre réapparaît seule.
   Le !important bat la règle d'affichage (display:grid sans !important). */
body.landing-active .sgc-tab-bar,
body.landing-active .sgc-more-hub { display: none !important; }

/* ── Bouton d'action fixe des panneaux de détail (Lancer la recherche /
   Améliorer le bâtiment). La barre d'onglets bas est position:fixed, opaque
   (#0b1120) et z-index:9500 ; le bouton détail était à bottom:10px / z-index:960
   → la barre le RECOUVRAIT entièrement (« le bouton n'apparaît pas » sur
   téléphone depuis l'activation par défaut de la coquille en v5.3).
   Parade : on le remonte au-dessus de la barre (~64px) et on lui donne un
   z-index supérieur (9550 < hub Plus 9800), puis on agrandit le padding bas du
   contenu pour qu'il ne masque pas les dernières lignes. ── */
body.dev-phone.shell-on .right-panel.rp-mobile-open .rp-upgrade-btn {
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  z-index: 9550;
}
body.dev-phone.shell-on .right-panel.rp-mobile-open #rpBldDetailContent {
  padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
}

/* ── Hub « Plus » plein écran ── */
body.dev-phone .sgc-more-hub {
  position: fixed; inset: 0; z-index: 9990;
  display: flex; flex-direction: column;
  background: #060a14;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.dev-phone .sgc-more-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid rgba(120,170,255,0.18);
}
body.dev-phone .sgc-more-title { font-size: 18px; font-weight: 800; color: #eaf2ff; letter-spacing: 1px; }
body.dev-phone .sgc-more-close {
  width: 40px; height: 40px; border-radius:var(--radius-md); border: 1px solid rgba(120,170,255,0.3);
  background: rgba(120,170,255,0.1); color: #eaf2ff; font-size: 18px; cursor: pointer;
}
body.dev-phone .sgc-more-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px 24px; }
body.dev-phone .sgc-more-group { margin-bottom: 18px; }
body.dev-phone .sgc-more-group-lbl { font-size:var(--fs-xs); letter-spacing: 1.5px; text-transform: uppercase; color: #6f7f9c; margin: 8px 4px; }
body.dev-phone .sgc-more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
/* Cellules « Plus » redesign (01/06) : avant = cartes plates + icônes noires
   (SVG sans fill = noir par défaut, invisibles). Maintenant = carte dégradée
   avec profondeur, icône accent dans une pastille circulaire lumineuse, feedback
   d'appui. */
body.dev-phone .sgc-more-cell {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 86px; padding: 12px 4px;
  background: linear-gradient(158deg, rgba(30,44,72,0.95) 0%, rgba(15,23,42,0.96) 100%);
  border: 1px solid rgba(120,170,255,0.22); border-radius: 14px;
  color: #e3ecfb; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
body.dev-phone .sgc-more-cell:active {
  transform: scale(0.95);
  border-color: rgba(140,185,255,0.55);
  box-shadow: 0 0 16px rgba(120,170,255,0.35), inset 0 1px 0 var(--tint-5);
  background: linear-gradient(158deg, rgba(42,60,96,0.98) 0%, rgba(20,30,54,0.98) 100%);
}
body.dev-phone .sgc-more-ico {
  display: flex; width: 46px; height: 46px; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(120,170,255,0.22), rgba(120,170,255,0.045) 70%);
  border: 1px solid rgba(120,170,255,0.25);
  color: #aaccff;
}
body.dev-phone .sgc-more-ico svg { width: 24px; height: 24px; fill: currentColor !important; }
body.dev-phone .sgc-more-ico svg * { fill: currentColor !important; stroke: none !important; }
body.dev-phone .sgc-more-lbl { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; letter-spacing: 0.3px; color: #e8effb; }

/* ════════════ Phase 2 : Bottom sheet ════════════ */
/* (Les transitions de section utilisent les animations d'entrée existantes —
   secEnter + animation factionnelle — déjà cohérentes et thématisées.) */

/* ── Bottom sheet (window.SGCSheet) ── */
body.dev-phone .sgc-sheet-backdrop {
  position: fixed; inset: 0; z-index: 9800;
  display: flex; align-items: flex-end;
  background: var(--shade-4);
}
body.dev-phone .sgc-sheet {
  width: 100%; max-height: 88vh;
  display: flex; flex-direction: column;
  background: #0d1424;
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  border-top: 1px solid rgba(120,170,255,0.22);
  box-shadow: 0 -10px 40px var(--shade-5);
  transform: translateY(100%);
  transition: transform 0.28s ease;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.dev-phone .sgc-sheet.open { transform: translateY(0); }
body.dev-phone .sgc-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--tint-10); margin: 10px auto 4px; }
body.dev-phone .sgc-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 10px; }
body.dev-phone .sgc-sheet-title { font-size: 16px; font-weight: 700; color: #eaf2ff; }
body.dev-phone .sgc-sheet-close {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid rgba(120,170,255,0.3);
  background: rgba(120,170,255,0.1); color: #eaf2ff; font-size: 16px; cursor: pointer; touch-action: manipulation;
}
body.dev-phone .sgc-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 18px 18px; color: #cdd7ea; }

/* Badge « Serveur 2 » dans la top-bar (multi-monde — affiché seulement sur s2.gateciv.com) */
.server-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; margin-left: 4px;
  font-family: 'Share Tech Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  color: #1a1206; border-radius: 5px; white-space: nowrap;
  background: linear-gradient(135deg, #ffc040, #ffe890); box-shadow: 0 0 14px rgba(255,192,64,0.45);
}
@media (max-width: 640px) { .server-badge { font-size: 10px; padding: 2px 7px; letter-spacing: 1px; } }