.timer {
      display:flex;
      justify-content: center;
      color: rgb(145, 93, 30);
      font-size: large;
      font-weight: 600;
      letter-spacing: 1px;
      gap:6px;
      align-items:center;
      background: var(--card);
      padding: 0.6rem 0.9rem;
      border-radius:8px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
      border: 2px solid rgba(168,140,59,0.12);
}


.time-display .colon{
    display:inline-block;
    animation: blink 1s steps(1, end) infinite;
}
@keyframes blink{
    0%,49%{opacity:1}
    50%,100%{opacity:0}
}


.board-card{
    background: var(--card);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.12);
    border: 2px solid rgba(168,140,59,0.08);
}
.sudoku {
    border-collapse: collapse;
    margin: 0 auto;
    user-select: none;
}
.sudoku td{
    width:45px;
    height:45px;
    padding:0;
    border:1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.6);
}


.sudoku td.box-right { border-right: 2px solid rgba(0,0,0,0.18); }
.sudoku td.box-left  { border-left: 2px solid rgba(0,0,0,0.18); }
.sudoku td.box-top   { border-top:  2px solid rgba(0,0,0,0.18); }
.sudoku td.box-bottom{ border-bottom: 2px solid rgba(0,0,0,0.18); }

.sudoku input{
    width:100%;
    height:100%;
    border:0;
    outline:none;
    text-align:center;
    font-size:1.12rem;
    font-weight:700;
    background:transparent;
    color:rgb(145, 93, 30);
}