/* ===============================
   SCREEN SIZE GUARD
   Overlay informant l'utilisateur quand son affichage est insuffisant :
     - Largeur < 360px (toutes pages)
     - Hauteur < 640px sur table.html
     - Orientation paysage sur mobile/tablette
   Toujours dismissible — objectif : informer, pas bloquer.
   z-index: 110000 — au-dessus de tout (y compris les modales critiques à 100000)
   =============================== */

#screen-size-guard {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 110000;
  padding: 1.25rem;
  box-sizing: border-box;
}

#screen-size-guard.ssg-visible {
  display: flex;
}

.ssg-box {
  background: linear-gradient(
    var(--panel-bg-start, rgba(10, 35, 10, 0.97)),
    var(--panel-bg-end, rgba(6, 18, 6, 0.99))
  );
  color: var(--white-1, rgb(200, 200, 200));
  border-radius: var(--radius-s, 10px);
  border: 1px solid var(--panel-border-color, rgba(255, 215, 0, 0.2));
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.8);
  padding: 2rem 1.75rem 1.75rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
}

.ssg-icon {
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: 0.85rem;
}

.ssg-title {
  font-size: var(--font-l, 1.1rem);

  margin: 0 0 0.85rem;
  color: #f5a623;
  line-height: 1.3;
}

.ssg-message {
  font-size: var(--font-s, 0.9rem);
  margin: 0 0 1.5rem;
  line-height: 1.55;
  opacity: 0.88;
  color: var(--white-1, rgb(200, 200, 200));
}

.ssg-btn {
  display: inline-block;
  padding: 0.55rem 1.6rem;
  border-radius: var(--radius-xs, 6px);
  background: var(--gradient-green, linear-gradient(rgb(0, 80, 0), rgb(0, 80, 0)));
  color: var(--white-1, rgb(200, 200, 200));
  border: 0.15rem solid var(--white-1, rgb(200, 200, 200));
  cursor: pointer;
  font-size: var(--font-s, 0.9rem);

  transition: opacity 0.15s ease;
}

.ssg-btn:hover {
  opacity: 0.82;
}

.ssg-btn:active {
  opacity: 0.65;
}