/* Sudoku CSS - robuste Handy-Version.
   Wichtig: Diese Datei funktioniert auch dann, wenn JavaScript beim Tippen
   die Klasse "sudoku-cell" entfernt und nur "number-1" bis "number-9" setzt.
*/

/* Grundaufbau */
.sudoku-top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.levelbar select{
  padding:8px 10px;
  border:2px solid #111;
  border-radius:8px;
  background:#fff;
  font-weight:bold;
}

.sudoku-wrap{
  overflow:auto;
  padding:10px;
}

/* Für beide möglichen Sudoku-Tabellen: .sudoku-grid und .sudoku */
.sudoku-grid,
.sudoku{
  border-collapse:collapse;
  margin:auto;
  background:#fff;
  border:4px solid #111;
}

.sudoku-grid td,
.sudoku td{
  width:54px;
  height:54px;
  border:1px solid #777;
  text-align:center;
  padding:0;
  box-sizing:border-box;
  overflow:hidden;
  position:relative;
}

.sudoku-grid tr:nth-child(3n) td,
.sudoku tr:nth-child(3n) td{
  border-bottom:4px solid #111;
}

.sudoku-grid td:nth-child(3n),
.sudoku td:nth-child(3n){
  border-right:4px solid #111;
}

.sudoku-grid tr:last-child td,
.sudoku tr:last-child td{
  border-bottom:0;
}

.sudoku-grid td:last-child,
.sudoku td:last-child{
  border-right:0;
}

/* Feste Zahlen */
.sudoku-fixed,
.numcell{
  width:100%;
  height:100%;
  border:0;
  text-align:center;
  font-size:24px;
  font-weight:700;
  background:#fff;
  color:#000;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* Eingabefelder, egal welche Klasse JS danach setzt */
.sudoku-cell,
.sudoku-grid input,
.sudoku input,
.sudoku-grid input[class^="number-"],
.sudoku input[class^="number-"],
.sudoku-grid input[class*=" number-"],
.sudoku input[class*=" number-"]{
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  max-width:100% !important;

  display:block !important;
  box-sizing:border-box !important;

  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;

  text-align:center !important;
  vertical-align:middle !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:22px !important;
  font-weight:600 !important;
  line-height:1 !important;

  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  opacity:1 !important;
  caret-color:#000 !important;

  -webkit-appearance:none !important;
  appearance:none !important;
  outline:none;
}

.sudoku-cell:focus,
.sudoku-grid input:focus,
.sudoku input:focus{
  outline:3px solid #f2c94c !important;
  outline-offset:-3px !important;
}

.sudoku-solution,
.solution-cell{
  background:#fff4bf!important;
  color:#111!important;
}

.sudoku-error{
  background:#ffd6d6!important;
}

/* Farben */
.number-1{background:#e0e0e0!important;}
.number-2{background:#c9a3e6!important;}
.number-3{background:#a9df78!important;}
.number-4{background:#bde7fb!important;}
.number-5{background:#e8a3d2!important;}
.number-6{background:#ffe44f!important;}
.number-7{background:#b6e97d!important;}
.number-8{background:#76d7d9!important;}
.number-9{background:#ffc84d!important;}

.sudoku-legend{
  max-width:520px;
  margin:16px auto 0;
  text-align:center;
  font-weight:bold;
}

.sudoku-legend span{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border:2px solid #111;
  margin:4px;
  border-radius:7px;
}

/* Handy: Sudoku tek ekrana oturur, saga sola kaydirma olmaz */
@media(max-width:650px){

  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .sudoku-panel{
    overflow:hidden;
  }

  .sudoku-wrap{
    width:100%;
    max-width:100%;
    padding:0;
    margin:0 auto;
    overflow:hidden !important;
    box-sizing:border-box;
  }

  .sudoku-grid,
  .sudoku{
    width:92vw !important;
    max-width:360px !important;
    min-width:0 !important;
    table-layout:fixed !important;
    margin:0 auto !important;
    border-collapse:collapse !important;
    box-sizing:border-box !important;
    border:3px solid #111 !important;
  }

  .sudoku-grid td,
  .sudoku td{
    width:calc(92vw / 9) !important;
    max-width:40px !important;
    min-width:0 !important;
    height:calc(92vw / 9) !important;
    max-height:40px !important;
    min-height:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .sudoku-grid tr:nth-child(3n) td,
  .sudoku tr:nth-child(3n) td{
    border-bottom:3px solid #111 !important;
  }

  .sudoku-grid td:nth-child(3n),
  .sudoku td:nth-child(3n){
    border-right:3px solid #111 !important;
  }

  .sudoku-grid tr:last-child td,
  .sudoku tr:last-child td{
    border-bottom:0 !important;
  }

  .sudoku-grid td:last-child,
  .sudoku td:last-child{
    border-right:0 !important;
  }

  .sudoku-cell,
  .sudoku-grid input,
  .sudoku input,
  .sudoku-grid input[class^="number-"],
  .sudoku input[class^="number-"],
  .sudoku-grid input[class*=" number-"],
  .sudoku input[class*=" number-"],
  .sudoku-fixed,
  .numcell{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    padding:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    font-size:18px !important;
    line-height:1 !important;
  }

  .sudoku-fixed,
  .numcell{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .sudoku-legend{
    max-width:92vw !important;
    margin:12px auto 0 !important;
  }

  .sudoku-legend span{
    width:28px !important;
    height:28px !important;
    font-size:15px !important;
    margin:2px !important;
  }

  .toolbar{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  .toolbar button{
    flex:1 1 calc(50% - 8px) !important;
    min-height:44px !important;
    font-size:15px !important;
  }
}

/* Cok dar telefonlar */
@media(max-width:370px){

  .sudoku-grid,
  .sudoku{
    width:88vw !important;
    max-width:330px !important;
  }

  .sudoku-grid td,
  .sudoku td{
    width:calc(88vw / 9) !important;
    height:calc(88vw / 9) !important;
  }

  .sudoku-cell,
  .sudoku-grid input,
  .sudoku input,
  .sudoku-fixed,
  .numcell{
    font-size:16px !important;
  }
}