/* =========================
   NeuroCalma / Ludi·K Games UI
   Responsive + spacing-friendly
   (DEFINITIVO - Mobile safe)
   ========================= */

/* Wrapper */
.ncg-wrap{
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  box-sizing: border-box;
}

/* Controls */
.ncg-controls{
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.ncg-controls label{
  font-size: 14px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

.ncg-controls select{
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 14px;
  min-width: 92px;
  background: #fff;
  box-sizing: border-box;
}

.ncg-btn{
  padding: 10px 14px;
  border: 1px solid #111;
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  box-sizing: border-box;
}

.ncg-btn[disabled]{
  opacity: .45;
  cursor: not-allowed;
}

.ncg-seed{
  margin-left: auto;
  font-size: 12px;
  color: #374151;
  padding: 6px 10px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  box-sizing: border-box;
}

/* Layout (Wordsearch) */
.ncg-board{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  align-items: start;
}

@media (max-width: 920px){
  .ncg-board{ grid-template-columns: 1fr; }
}

/* =========================
   Wordsearch grid (AJUSTADO)
   - Móvil: scroll vertical permitido
   - Celdas por variables (--ncg-cell / --ncg-font) desde JS
   ========================= */

.ncg-grid{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y; /* permite scroll vertical en móvil */
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
}

.ncg-grid table{
  border-collapse: collapse;
  width: 100% !important;
  table-layout: fixed;
  max-width: 100%;
  box-sizing: border-box;
}

.ncg-grid td.ncg-cell,
.ncg-grid td{
  border: 1px solid #111;
  width: var(--ncg-cell, 28px);
  height: var(--ncg-cell, 28px);
  font-size: var(--ncg-font, 16px);
  text-align: center;
  vertical-align: middle;
  font-weight: 800;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
}

/* Selection states */
.ncg-cell.sel{ background: #e5e7eb; }
.ncg-cell.found{ background: #d1d5db; }

/* Word list */
.ncg-words{
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  box-sizing: border-box;
}

.ncg-words h4{
  margin: 0 0 10px 0;
  font-size: 16px;
}

.ncg-wordlist{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 14px;
}

@media (max-width: 920px){
  .ncg-wordlist{ grid-template-columns: 1fr; }
}

.ncg-word{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px dashed #d1d5db;
  line-height: 1.1;
  box-sizing: border-box;
}

.ncg-word.found{
  text-decoration: line-through;
  opacity: .75;
}

/* Hint / status row */
.ncg-hint{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

.ncg-status{
  font-size: 14px;
  color: #111;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-sizing: border-box;
}

/* =========================
   Sudoku UI (DEFINITIVO)
   ========================= */

.ncg-sudoku-area{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.sdk{
  border: 1px solid #111;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
}

.sdk table{
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.sdk td{
  border: 1px solid #111;
  padding: 0;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  box-sizing: border-box;
}

.sdk td.thick-right{ border-right-width: 2px; }
.sdk tr.thick-bottom td{ border-bottom-width: 2px; }

.sdk input{
  width: 100%;
  height: 100%;
  border: 0 !important;
  outline: none !important;
  text-align: center;
  font-size: 18px !important;
  font-weight: 800;
  background: #fff !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.sdk input.given:disabled{
  opacity: 1 !important;
  background: rgba(0,0,0,.06) !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
}

.sdk input.wrong{
  background: rgba(255, 0, 0, 0.12) !important;
}

/* Mobile tweaks */
@media (max-width: 600px){
  .ncg-wrap{ padding: 14px; }
  .sdk{ padding: 12px; }
  .sdk td{ width: 34px; height: 34px; }
  .sdk input{ font-size: 16px !important; } /* iOS zoom fix */
}

/* Mobile-first controls layout */
@media (max-width: 600px){
  .ncg-controls{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .ncg-controls label{
    width: 100%;
    justify-content: space-between;
  }

  .ncg-controls select{ min-width: 120px; }
  .ncg-btn{ width: 100%; }
  .ncg-seed{
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  .ncg-hint{
    flex-direction: column;
    align-items: stretch;
  }

  .ncg-status{
    width: 100%;
    text-align: center;
  }
}

/* Botonera limpia Sudoku */
.ncg-controls-sudoku{
  justify-content: center;
  gap: 16px;
  padding: 10px 0 18px 0;
}

.ncg-controls-sudoku .ncg-btn{
  min-width: 160px;
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 14px;
  transition: all .2s ease;
}

.ncg-controls-sudoku .ncg-btn:hover{
  background:#111;
  color:#fff;
}

@media (max-width:600px){
  .ncg-controls-sudoku{
    flex-direction: column;
    align-items: stretch;
  }
  .ncg-controls-sudoku .ncg-btn{ width: 100%; }
}