/* =====================================================
   MODUL LITERE – STYLE.CSS FINAL GARANTAT
   Compatibil cu:
   - view.php (ui-toggle + ui-grid-toggle)
   - ui.js toggle pe .ui-grid-toggle
   ===================================================== */


/* =====================================================
   CONTAINER GENERAL
   ===================================================== */

#letters-grid {
  width: 70%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}


/* =====================================================
   TOGGLE BAR
   ===================================================== */

.ui-toggle-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}


/* =====================================================
   TOGGLE BUTTONS
   ===================================================== */

.ui-toggle {
  font-size: 20px;
  font-weight: 700;
  padding: 14px 24px;

  border-radius: 14px;
  border: none;

  background-color: #5b7cff;
  color: #ffffff;

  cursor: pointer;
  user-select: none;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.1s ease,
    box-shadow 0.25s ease;
}

.ui-toggle:hover {
  background-color: #1e3fa3;
  color: #ffd54f;
  box-shadow: 0 6px 16px rgba(30, 63, 163, 0.35);
}

.ui-toggle.active {
  background-color: #ffd54f;
  color: #1e3fa3;
  box-shadow: 0 6px 18px rgba(255, 213, 79, 0.45);
  transform: translateY(-2px);
}


/* =====================================================
   GRID STRUCTURE
   ===================================================== */

#grid-upper,
#grid-lower,
#grid-groups {
  display: none;
}
#grid-upper.active,
#grid-lower.active,
#grid-groups.active {
  display: grid;
}


/* =====================================================
   CELULE LITERE / GRUPURI
   ===================================================== */

.cell {
  position: relative; /* necesar pentru hit-area extinsă */

  display: flex;
  align-items: center;
  justify-content: center;

  height: 60px;
  min-width: 105px;

  font-size: 30px;
  font-weight: 600;

  background-color: #ffffff;
  border: 2px solid #dcdcdc;
  border-radius: 20px;

  cursor: pointer;
  user-select: none;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.05s ease;
}


/* =====================================================
   HIT AREA EXTINSĂ (pentru copii)
   ===================================================== */

.cell::before {
  content: "";
  position: absolute;

  top: -14px;
  bottom: -14px;
  left: -14px;
  right: -14px;

  pointer-events: none; /* CRITIC */
}


/* =====================================================
   STATES CELULE
   ===================================================== */

.cell:hover {
  background-color: #eef3ff;
  border-color: #5b7cff;
}

.cell.active {
  background-color: #5b7cff;
  border-color: #3f5fe0;
  color: #ffffff;
}

.cell.correct {
  background-color: #2ecc71;
  border-color: #27ae60;
  color: #ffffff;
}

.cell.wrong {
  background-color: #e74c3c;
  border-color: #c0392b;
  color: #ffffff;
}

body.audio-running .cell:hover {
  background-color: #ffffff;
  border-color: #dcdcdc;
}
 .grid {
  display: none;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
  gap: 12px;
  max-width: 700px;
  margin: 20px auto;
}

.grid.active {
  display: grid;
}



/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {
  .cell {
    height: 52px;
    font-size: 22px;
  }
}

@media (max-width: 480px) {

 
 .grid {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 12px;
  max-width: 700px;
  margin: 20px auto;
}

.grid.active {
  display: grid;
}

  .cell {
    height: 48px;
    font-size: 20px;
  }

  .ui-toggle {
    font-size: 18px;
    padding: 12px 18px;
  }
}