/* =============================
   Reset/di base
   ============================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: #1f2937; /* grigio scuro bluastro */
  color: #ecf0f1;
}

/* Utility */
.hidden { display: none !important; }
hr { border: none; border-top: 1px solid #374151; margin: 12px 0; }

/* =============================
   Layout principale
   ============================= */
#game-container { display: flex; min-height: 100vh; }

#sidebar {
  width: 240px;
  background-color: #2c3e50;
  padding: 18px 14px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
#title { font-size: 1.2rem; margin: 0 0 8px; }
#date-info p { margin: 4px 0; font-size: .95rem; }

#content-area { flex: 1; padding: 18px; }

/* Titoli sezione */
.section-title { font-size: 1.25rem; margin: 0 0 12px; }

/* =============================
   Pulsanti menu laterale
   ============================= */
.menu-btn {
  display: block; width: 100%;
  margin: 6px 0; padding: 12px 10px; text-align: left;
  background-color: #34495e; border: none; color: #ecf0f1;
  font-size: 1rem; cursor: pointer;
  transition: background-color .2s, color .2s, transform .05s;
  border-radius: 6px;
}
.menu-btn:hover { background: #007bff; color: #fff; }
.menu-btn:active { transform: translateY(1px); }
.menu-btn.active { background: #1abc9c; font-weight: 600; color: #fff; }

/* =============================
   Modale iniziale
   ============================= */
#modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 50;
}
.modal-content {
  background: #ffffff; color: #111827; padding: 20px; border-radius: 12px;
  width: min(560px, 94vw); box-shadow: 0 15px 50px rgba(0,0,0,.35);
}
.modal-content h2 { margin-top: 0; }
.action-btn { padding: 10px 12px; border: none; border-radius: 8px; cursor: pointer; margin: 6px 4px 0 0; font-weight: 600; }
.action-btn.primary { background: #2563eb; color: #fff; }
.action-btn.secondary { background: #6b7280; color: #fff; }
.action-btn.danger { background: #dc2626; color: #fff; }
.action-btn:disabled { opacity: .6; cursor: not-allowed; }

/* =============================
   Palette condizione / stati (riutilizzabile)
   ============================= */
.cond-low { color: #ef4444; font-weight: 600; }
.cond-medium { color: #f59e0b; font-weight: 600; }
.cond-high { color: #10b981; font-weight: 600; }
.infortunato { color: #f59e0b; font-weight: 600; }
.player-injured td { opacity: .9; }

/* opzionale: variabili per tattiche */
:root {
  --tactics-pane: 600px;  /* larghezza viewer tattico consigliata */
}



/* NEWS styling */
.news-list { list-style: none; padding: 0; margin: 0; }
.news-item { display: grid; grid-template-columns: 84px 1fr; gap: 8px; padding: 6px 4px; border-bottom: 1px dashed #1e2a45; }
.news-item:last-child { border-bottom: none; }
.news-item .when { color: #8aa0bf; font-size: 12px; }
.news-item .txt  { color: #e5efff; }
.news-item.injury .txt { color: #f87171; font-weight: 600; } /* rosso vivo per infortuni */