/* Mobile navigation and card library. Desktop rules are deliberately untouched. */
.mobile-decks { display: none; }
.mobile-card-gallery { width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); box-sizing: border-box; border: 1px solid #b98b42; border-radius: 12px; background: #15110b; color: #e8dfcf; padding: 16px; }
.mobile-card-gallery::backdrop { background: rgb(0 0 0 / .75); }
.mobile-gallery-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mobile-gallery-header h2 { margin: 0; font: 20px Georgia, serif; }
.mobile-gallery-header button { min-width: 44px; min-height: 44px; color: #e8dfcf; background: #292014; border: 1px solid #b98b42; border-radius: 6px; font-size: 26px; }
.mobile-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mobile-gallery-card { border: 0; background: transparent; color: #e8dfcf; padding: 0; min-width: 0; cursor: pointer; }
.mobile-gallery-card img { display: block; width: 100%; aspect-ratio: 1311 / 1819; object-fit: contain; border-radius: 5px; }
.mobile-gallery-card span { display: block; font-size: 13px; margin-top: 5px; }
.mobile-date { white-space: nowrap; }
@media (max-width: 699px), (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .workspace { grid-template-rows: auto minmax(0, 1fr) !important; }
  .topbar { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px; padding: 10px 8px !important; min-height: 60px !important; height: auto !important; box-sizing: border-box; }
  .topbar-identity { flex: 1; min-width: 0; }
  .topbar-title-row h1 { margin: 0; font-size: clamp(15px, 4.3vw, 22px) !important; }
  .treasure-trigger { gap: 6px !important; }
  .treasure-trigger img { width: 44px !important; height: auto !important; }
  .topbar .mobile-title-break, .topbar .restricted-access, .topbar-motto { display: none !important; }
  .mobile-nav-toggle { flex: 0 0 44px; width: 44px !important; height: 44px !important; }
  .topbar #openCartographerHelp { position: static !important; flex: 0 0 44px; width: 44px !important; height: 44px !important; margin: 0 !important; }
  #mobileSidebar .top-actions { display: flex !important; flex-direction: column; gap: 8px; margin: 12px 0; }
  #mobileSidebar .top-actions > * { width: 100%; box-sizing: border-box; }
  /* Le flex-basis de 150 px du bandeau devient une hauteur dans ce menu en colonne. */
  #mobileSidebar .top-actions > .gateway-button { flex: 0 0 auto; }
  body.is-authenticated #mobileSidebar .top-actions > .button { width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 44px !important; height: auto !important; padding: 10px !important; display: flex !important; justify-content: center; font-size: 13px !important; }
  body.is-authenticated #mobileSidebar .top-actions > .button > span:last-child { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; }
  .bottom-bar { display: none !important; }
  .hunt-start-notice { padding: 10px 8px !important; }
  .hunt-start-copy p { font-size: 13px !important; margin: 4px 0 !important; }
  .hunt-start-side { display: none !important; }
  #board > .enigma-card, .pile-label, .pile-shelve { display: none !important; }
  .mobile-decks { display: flex; position: fixed; bottom: calc(41px + env(safe-area-inset-bottom)); left: 12px; right: 12px; z-index: 900; justify-content: center; gap: 12px; pointer-events: none; transform: translateY(var(--mobile-decks-drag-y, 0px)); }
  .mobile-deck-button { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; max-width: 180px; padding: 10px; background: rgb(16 12 7 / .94); color: #e5c487; border: 1px solid #b98b42; border-radius: 10px; font: 14px Georgia, serif; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; }
  .mobile-decks.is-dragging .mobile-deck-button { cursor: grabbing; }
  .mobile-deck-button img { width: 58px; height: 80px; object-fit: contain; }
  body.mobile-nav-open .mobile-decks { visibility: hidden; }
  .devz-environment-label { top: auto !important; bottom: 0 !important; left: 50% !important; font-size: 9px !important; padding: 2px 5px !important; }
}

/* Discretio : séparer l’action des miniatures et contenir les neuf signes. */
.mobile-card-gallery > .button {
  margin-bottom: 20px;
}
@media (max-width: 699px),
       (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .clue-unlock-dialog .egypt-slot {
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  .clue-unlock-dialog .egypt-slot-content {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .clue-unlock-dialog .egypt-placed-symbol {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    padding: 1px;
  }
  .clue-unlock-dialog .egypt-placed-symbol img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

/* Le cadre suit la hauteur visible, même avec les barres du navigateur mobile.
   100vh pouvait laisser la fin de la zone de défilement sous ces barres. */
@media (max-width: 699px),
       (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .app-shell,
  .workspace {
    height: 100dvh;
    min-height: 0;
  }
}