* {
  box-sizing: border-box;
}

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

body {
  font-family: 'Merriweather', serif;
  text-align: center;
  color: #062a4d;
  background: #f8fafc;
  margin: 0;
  padding: clamp(10px, 3vw, 20px);
  min-height: -webkit-fill-available;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  color: #062a4d;
  margin: 10px 0;
  font-size: clamp(1.3rem, 5vw, 1.8rem);
}

hr {
  width: 100%;
  max-width: 450px;
  border-color: #c69214;
  margin: 10px 0;
}

#errors {
  color: #ef4444;
  font-size: clamp(0.9rem, 3vw, 1rem);
  margin-bottom: 10px;
}

#board {
  width: min(90vw, 450px);
  height: min(90vw, 450px);
  margin: 10px auto;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  background: #fff;
  border: 2px solid #062a4d;
  touch-action: manipulation;
}

.tile {
  width: 100%;
  height: 100%;
  border: 1px solid #e2e8f0;
  font-size: clamp(14px, 4vw, 20px);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

.tile:active {
  background: #dbeafe !important;
}

.tile:hover {
  background: #f0f9ff;
}

/* Thicker borders for 3x3 sections */
.horizontal-line {
  border-bottom: 2px solid #062a4d;
}

.vertical-line {
  border-right: 2px solid #062a4d;
}

#digits {
  width: min(90vw, 450px);
  margin: 10px auto;
  display: flex;
  justify-content: center;
  gap: clamp(3px, 1vw, 5px);
  flex-wrap: wrap;
}

.number {
  width: clamp(36px, 9vw, 44px);
  height: clamp(36px, 9vw, 44px);
  border: 1px solid #062a4d;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  font-size: clamp(16px, 4vw, 20px);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.1s, background 0.15s;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.number:active {
  transform: scale(0.95);
  background-color: #cbd5e1;
}

.number:hover {
  background-color: #e2e8f0;
}

.number-selected {
  background-color: #062a4d;
  color: #c69214;
}

.tile-start {
  background-color: #f1f5f9;
  color: #64748b;
}

.tile-selected {
  background-color: #dbeafe;
}

/* Small mobile */
@media (max-width: 380px) {
  body { padding: 8px; }
  h1 { font-size: 1.2rem; margin: 8px 0; }
  #board {
    width: min(95vw, 320px);
    height: min(95vw, 320px);
  }
  .tile { font-size: 13px; }
  #digits { width: min(95vw, 320px); gap: 3px; }
  .number { width: 32px; height: 32px; font-size: 14px; }
}

/* Very small screens */
@media (max-width: 320px) {
  #board {
    width: 280px;
    height: 280px;
  }
  .tile { font-size: 12px; }
  #digits { width: 280px; }
  .number { width: 28px; height: 28px; font-size: 13px; }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  body {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 8px;
  }
  h1 { width: 100%; margin: 5px 0; font-size: 1.1rem; }
  hr { display: none; }
  #board {
    width: min(50vh, 300px);
    height: min(50vh, 300px);
  }
  #digits {
    width: auto;
    flex-direction: column;
    gap: 4px;
  }
  .number { width: 34px; height: 34px; font-size: 15px; }
}