/* Couche mobile du cœur de jeu. Le bureau reste régi par main.css. */
.mobile-game-controls,
.mobile-rotate-overlay { display: none; }

.device-phone.playing .game-canvas-base {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.device-phone.playing .mobile-game-controls:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: block;
  pointer-events: none;
}

.mobile-action-btn {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  font-weight: 900;
  letter-spacing: .06em;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  box-shadow: 0 10px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-tap-highlight-color: transparent;
}

.mobile-pulse-btn {
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: clamp(86px, 15vw, 118px);
  height: clamp(86px, 15vw, 118px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9f83 0%, #ff654f 44%, #bd2f2a 100%);
  font-size: clamp(16px, 3vw, 22px);
}
.mobile-pulse-btn::after {
  content: 'maintenir = fort';
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  width: 120px;
  font-size: 9px;
  letter-spacing: .02em;
  font-weight: 700;
  color: rgba(255,255,255,.78);
  text-transform: none;
}
.mobile-pulse-btn.is-pressing { transform: scale(.94); }
.mobile-pulse-btn.is-heavy { box-shadow: 0 0 0 8px rgba(255,215,94,.18), 0 0 34px rgba(255,215,94,.52); }

.mobile-pour-btn {
  right: max(14px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  min-width: 132px;
  min-height: 58px;
  padding: 12px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, #5bc0ff, #2479bb);
  font-size: 16px;
}
.mobile-pour-btn:disabled {
  opacity: .48;
  filter: saturate(.55);
}

.device-phone.playing .hud-top {
  top: max(6px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  pointer-events: none;
}
.device-phone.playing .hud-card {
  border-radius: 14px;
  padding: 8px 10px;
  backdrop-filter: blur(7px);
}
.device-phone.playing .objective-card { min-width: 0; }
.device-phone.playing #objectiveTitle,
.device-phone.playing #bestText,
.device-phone.playing #progressText,
.device-phone.playing #countdownLabel { display: none; }
.device-phone.playing .objective-text {
  margin: 0 0 3px;
  font-size: clamp(11px, 2.7vw, 15px);
  line-height: 1.18;
  max-height: 2.45em;
  overflow: hidden;
}
.device-phone.playing .stage-text {
  font-size: clamp(9px, 2.1vw, 12px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-phone.playing .timer-card {
  min-width: 92px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.device-phone.playing .countdown {
  margin: 0;
  font-size: clamp(24px, 7vw, 36px);
  letter-spacing: -.03em;
}
.device-phone.playing .bottom-bar { display: none !important; }
.device-phone.playing .phase-portrait { width: 8vw; max-width: 8vw; opacity: .7; }

.device-phone .mobile-disabled-choice {
  opacity: .42;
  pointer-events: none;
}

.device-phone.playing.mobile-portrait .mobile-rotate-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 25%, #223a56 0%, #0c1622 70%);
  text-align: center;
}
.mobile-rotate-card {
  width: min(420px, calc(100vw - 36px));
  padding: 28px 22px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: rgba(7,14,23,.9);
  box-shadow: 0 20px 60px rgba(0,0,0,.42);
}
.mobile-rotate-icon { font-size: 54px; line-height: 1; margin-bottom: 10px; }
.mobile-rotate-card strong { display: block; font-size: 22px; margin-bottom: 8px; }
.mobile-rotate-card span { display: block; color: #b6c4d9; line-height: 1.45; }

@media (orientation: landscape) and (max-height: 520px) {
  .device-phone.playing .stage-preview-card { transform: scale(.82); }
  .device-phone.playing .stage-preview { padding: 8px; }
}


/* Correctif téléphone : l'accueil doit rester navigable même sur les petits écrans.
   Le bouton principal reste toujours atteignable ; le bureau n'est pas concerné. */
.device-phone #startScreen.home-overlay {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    calc(104px + env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}

.device-phone #startScreen .home-shell {
  width: min(100%, 560px);
  margin: 0 auto;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 10px;
}

/* Sur téléphone la vidéo décorative de l'accueil consomme presque tout l'écran.
   On la retire seulement de cet écran pour aller directement aux choix utiles. */
.device-phone #startScreen .home-left-panel {
  display: none;
}

.device-phone #startScreen .home-right-panel {
  width: 100%;
  gap: 12px;
  padding-bottom: 12px;
}

.device-phone #startScreen .home-brand-wrap {
  margin: 0 auto 2px;
  max-height: 84px;
}

.device-phone #startScreen .home-brand-image {
  width: min(92vw, 470px);
  max-height: 84px;
  object-fit: contain;
}

.device-phone #startScreen .home-top-actions {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.device-phone #startScreen .home-top-actions .home-options-btn,
.device-phone #startScreen .home-top-actions .home-class-mode-btn {
  min-width: 0;
  min-height: 42px;
  padding: 8px 7px;
  font-size: 12px;
  line-height: 1.15;
}

.device-phone #startScreen .home-group {
  width: 100%;
  gap: 8px;
}

.device-phone #startScreen .home-heading {
  font-size: 15px;
}

.device-phone #startScreen .home-mode-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.device-phone #startScreen .home-mode-toggle .home-choice {
  min-height: 44px;
  padding: 7px 6px;
  font-size: 13px;
}

.device-phone #startScreen .home-questionnaire-group {
  gap: 8px;
}

.device-phone #startScreen .home-special-row-wrap,
.device-phone #startScreen .specialized-spotlight {
  width: 100%;
}

/* Le lancement est toujours visible sur téléphone, même si le contenu de l'accueil
   dépasse la hauteur disponible. */
.device-phone #startScreen #startBtn {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(84vw, 360px);
  min-width: 0;
  min-height: 58px;
  padding: 12px 22px;
  border-radius: 18px;
  font-size: 21px;
  touch-action: manipulation;
}

.device-phone #startScreen #startBtn::after {
  content: ' · DÉMARRER';
  font-size: .72em;
  letter-spacing: .035em;
}

.device-phone #startScreen #resetBtn {
  margin-bottom: 4px;
}

@media (orientation: landscape) and (max-height: 560px) {
  .device-phone #startScreen.home-overlay {
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }
  .device-phone #startScreen .home-brand-wrap,
  .device-phone #startScreen .home-brand-image {
    max-height: 56px;
  }
  .device-phone #startScreen .home-right-panel {
    gap: 8px;
  }
  .device-phone #startScreen #startBtn {
    min-height: 48px;
    width: min(58vw, 330px);
    font-size: 18px;
    bottom: max(6px, env(safe-area-inset-bottom));
  }
}

/* Secours pour navigateurs mobiles atypiques : même si les media queries tactiles
   sont mal rapportées, un écran étroit ne doit jamais emprisonner le bouton de lancement. */
@media (max-width: 740px) {
  #startScreen.home-overlay {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
  #startScreen #startBtn {
    position: fixed;
    z-index: 4;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(84vw, 360px);
    min-width: 0;
    min-height: 58px;
    touch-action: manipulation;
  }
}