:root {
  --bg: #0f1115;
  --fg: #e9eef7;
  --mut: #9aa4b2;
  --card: #171a21;
  --line: #2a2f3a;

  /* Mini Sudoku */
  --miniCell: clamp(56px, 10.5vw, 74px);
}
      body {
        margin: 0;
        font-family:
          system-ui,
          -apple-system,
          Segoe UI,
          Roboto,
          Arial;
        background: var(--bg);
        color: var(--fg);
      }
      .wrap {
        max-width: 520px;
        margin: 0 auto;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
      }
      .pill {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 14px;
        color: var(--mut);
      }
      .pill b {
        color: var(--fg);
        font-weight: 700;
      }
      .panel {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 12px;
        min-width: 0; /* evita overflow por contenido interno */
      }
      .row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* 50/50 real y encogible */
        gap: 12px;
        align-items: stretch;
      }

    .col {
        min-width: 0; /* CLAVE: permite que el contenido no empuje al otro panel */
      }

      /* Mini Sudoku DOM */
      .miniTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
      }
      .miniTitle .hint {
        font-size: 12px;
        color: var(--mut);
      }

      .miniGrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* sin min-width forzado */
        gap: 10px;
     }

      /* Mini Sudoku layout: teclado vertical a la izquierda */
      .miniInputRow {
        display: flex;
        gap: 12px;
        align-items: flex-start; /* evita estirado vertical feo */
      }

      .kbdMini {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 0 0 auto;
      }

      /* Forzar que el grid (números) ocupe todo el espacio sobrante */
.miniInputRow .miniGrid {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0; /* evita overflow raro en flex */
}

      /* Teclas del Sudoku: tamaño tocable y estable */
     .kbdMini .btn {
        width: 56px;
        height: 56px;
        font-size: 18px;
    }


      /* Acciones del Sudoku: separadas y con wrap para móvil */
      .miniActionsRow {
        margin-top: 10px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      /* “Pista” ocupa el espacio restante y evita desbordes */
      #btnBreakGiven {
        flex: 1 1 160px;
        padding: 0 10px;
        text-align: center;
      }

      /* Mini Sudoku: celdas cuadradas SOLO dentro del miniGrid */
      .miniGrid .cell {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 12px;
        border: 1px solid var(--line);
        background: #11131a;

        font-size: clamp(18px, 4vw, 24px);
        user-select: none;
        -webkit-tap-highlight-color: transparent;
      }

      .miniGrid .cell.given {
        background: #101521;
        color: #cfe1ff;
        border-color: #2b3a57;
      }
      .miniGrid .cell.sel {
        outline: 2px solid #cfe1ff;
      }
      .miniGrid .cell.conflict {
        border-color: #c85b5b;
      }
      .miniGrid .cell.empty {
        color: #556070;
      }
 
      .btn {
        height: 44px;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: #11131a;
        color: var(--fg);
        font-size: 16px;
        font-weight: 700;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .btn:active {
        transform: scale(0.98);
      }
      .btn.muted {
        color: var(--mut);
        font-weight: 600;
      }
      .btn.primary {
        background: #1b2440;
        border-color: #2b3a57;
      }
      .btn.danger {
        background: #3a1111;
        border-color: #6b2323;
        color: #ffd2d2;
      }
      .btn.danger.armed {
        outline: 2px solid #ff8f8f;
      }

      /* Board canvas */
      canvas {
        width: 100%;
        height: auto;
        border-radius: 14px;
        background: #0b0d12;
        border: 1px solid var(--line);
        touch-action: none;
      }
      .boardTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
      }
      .boardTitle .hint {
        font-size: 12px;
        color: var(--mut);
      }

      /* Controls */
      .controls {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
      }
      .miniGrid .cell.filled { opacity: 0.95; }