/* ===========================
   Difficulty Menu — Space Survivor
   =========================== */

.difficulty-menu.hidden { display: none; }

.difficulty-menu {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vh 2vw;
  background: none;          
  backdrop-filter: none;
  overflow: hidden;
}

.dm-window {
  width: min(980px, 96vw);
  max-height: 96vh;
  margin: 0;
  background: rgba(18,22,28,.95);
  color: #e6f1ff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  box-shadow: 0 16px 60px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
.dm-header h2 {
  margin: 0;
  font: 700 16px/1.2 Inter, system-ui, Segoe UI, Roboto, sans-serif;
}
.dm-icon {
  margin-left: auto;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #e6f1ff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.dm-icon:hover {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
}

/* Presets */
.dm-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.dm-preset {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #a9bfd6;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 600;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.dm-preset:hover {
  color: #e6f1ff;
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
}

/* Corps */
.dm-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}

.dm-group {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px;
  overflow: hidden;
}
.dm-group-title {
  font-weight: 700;
  margin-bottom: 8px;
  color: #9bdcff;
}

/* === Lignes : 3 étages === */
.dm-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px dashed rgba(255,255,255,.07);
}
.dm-row:first-of-type { border-top: 0; }

.dm-row label {
  color: #cfe2f5;
  font-weight: 600;
  line-height: 1.2;
}


/* Valeur (%) */
.dm-row output {
  align-self: flex-end;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #e6f1ff;
  padding: .25rem .6rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
}

/* Footer & boutons */
.dm-footer {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
.dm-spacer { flex: 1; }

.dm-secondary,
.dm-primary {
  border-radius: 14px;
  padding: 12px 18px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.18);
  font: 700 15px/1 Inter, system-ui, Segoe UI, Roboto, sans-serif;
  min-height: 46px;
}

/* Boutons secondaires */
.dm-secondary {
  background: rgba(255,255,255,.06);
  color: #e6f1ff;
  transition: border-color .15s ease, background-color .15s ease;
}
.dm-secondary:hover {
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
}

/* Bouton principal : Appliquer */
.dm-primary {
    flex: 1;
    background: white;
    color: #000;
    font-size: 22px;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
    transition: .2s ease-in-out;
}
.dm-primary:hover {
    background: #004145;
    color:white;
    box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
}
.dm-primary:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}

.info-diff
{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* === Sliders difficulté : piste remplie à gauche === */
.dm-row input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, #00d9ff 0%, #2a3038 0%) no-repeat;
    background-size: 100% 100%;
    outline: none;
    cursor: pointer;
}

/* Thumb */
.dm-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #00d9ff;
}
.dm-row input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #00d9ff;
}

/* État disabled cohérent */
.dm-row[disabled] input[type="range"] {
    background: linear-gradient(to right, #8ea1b3 0%, #d5dce6 0%) no-repeat;
}
.dm-row[disabled] input[type="range"]::-webkit-slider-thumb,
.dm-row[disabled] input[type="range"]::-moz-range-thumb {
    background: #6b6f76;
    border-color: #4a4f55;
}


/* === Désactivation visuelle + blocage d'interaction === */
/* On peut désactiver une ligne (.dm-row) ou tout un groupe (.dm-group) */
.dm-row[disabled],
.dm-group[disabled]{
  position: relative;
  opacity: .55;
  filter: grayscale(.15) saturate(.8);
}

/* Léger voile pour bien marquer la désactivation */
.dm-row[disabled]::after,
.dm-group[disabled]::after{
  content: "";
  position: absolute;
  inset: -6px;                 /* couvre un peu plus grand que le contenu */
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  pointer-events: none;        /* purement visuel, on bloque les events ailleurs */
}

/* Bloque toute interaction des contrôles internes */
.dm-row[disabled] * ,
.dm-group[disabled] * {
  pointer-events: none;
}

/* Garde le texte lisible mais moins “actif” */
.dm-row[disabled] label,
.dm-group[disabled] .dm-group-title{
  color: #a8b7c8;
}

/* Apparence des sliders désactivés (plus ternes) */
.dm-row[disabled] input[type="range"] { background: #d5dce6; }
.dm-row[disabled] input[type="range"]::-webkit-slider-thumb{
  background: #6b6f76; border-color: #4a4f55;
}
.dm-row[disabled] input[type="range"]::-moz-range-thumb{
  background: #6b6f76; border-color: #4a4f55;
}

/* Le chiffre reste bien visible */
.dm-row[disabled] output{
  opacity: .9;
}


/* Responsif */
@media (max-width: 1100px) {
  .dm-body { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 780px) {
  .dm-body { grid-template-columns: 1fr; }
}

/* Micro-ajustements */
@media (max-height: 740px) {
  .dm-header, .dm-presets, .dm-footer { padding-block: 8px; }
  .dm-body { padding: 10px; }
}