body {
  font-family: 'Inter', sans-serif;
}

.page-bg {
  background:
    radial-gradient(circle at top left, rgba(99,102,241,.16), transparent 34%),
    radial-gradient(circle at 85% 20%, rgba(20,184,166,.14), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #f8fafc 100%);
}

.brand-mark {
  background: conic-gradient(from 180deg, #2563eb, #14b8a6, #a78bfa, #2563eb);
}

.glass-card {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(15,23,42,.08);
  border: 1px solid rgba(148,163,184,.28);
}

.sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  border: 3px solid #172554;
  background: #172554;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 22px;
  overflow: hidden;
  touch-action: manipulation;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 18px 44px rgba(30,58,138,.12);
}

.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #1e3a5f;
  font-weight: 650;
  font-size: clamp(1.35rem, 5vw, 2.25rem);
  line-height: 1;
  border-right: 1px solid #d5deec;
  border-bottom: 1px solid #d5deec;
}

.cell:nth-child(3n) {
  border-right: 3px solid #172554;
}

.cell:nth-child(9n) {
  border-right: 0;
}

.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54) {
  border-bottom: 3px solid #172554;
}

.cell:nth-child(n+73) {
  border-bottom: 0;
}

.given {
  background: #f3f7fd;
  color: #172554;
}

.selected {
  background: #99f6e4;
}

.related {
  background: #e0f2fe;
}

.same {
  background: #eef6ff;
  color: #172554;
}

.user-filled {
  color: #2563eb;
  font-weight: 800;
}

.wrong {
  color: #dc2626;
  background: #fee2e2;
}

.tool-btn {
  height: 54px;
  border-radius: 18px;
  background: #ffffff;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 800;
  position: relative;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  border: 1px solid #e2e8f0;
}

.num-btn {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: #ffffff;
  color: #2563eb;
  font-weight: 800;
  font-size: clamp(1.55rem, 5vw, 2.35rem);
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.num-btn:hover {
  background: #eff6ff;
  transform: translateY(-1px);
  color: #1d4ed8;
}

.badge {
  position: absolute;
  top: -8px;
  right: 7px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #2563eb;
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.difficulty-pill {
  min-width: 60px;
  height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  padding: 0 1rem;

  font-weight: 800;
  font-size: .85rem;
  line-height: 1;

  white-space: nowrap;

  color: #64748b;
  background: transparent;

  transition:
    background .18s ease,
    color .18s ease,
    transform .15s ease;
}

.difficulty-pill:hover {
  background: rgba(255,255,255,.65);
  color: #0f172a;
}

.difficulty-pill.active {
  color: #0f172a;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15,23,42,.08);
}

.daily-pill {
  height: 44px;
  min-width: 82px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 .9rem;
  font-weight: 900;
  font-size: .85rem;
  white-space: nowrap;
  color: #ea580c;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.daily-pill:hover {
  background: #ffedd5;
  color: #c2410c;
}

.daily-pill.active {
  color: #ffffff;
  background: linear-gradient(135deg, #f97316, #ef4444);
  border-color: transparent;
}

.ad-box {
  min-height: 90px;
  border: 1px dashed #cbd5e1;
  background: repeating-linear-gradient(
    45deg,
    #f8fafc,
    #f8fafc 10px,
    #f1f5f9 10px,
    #f1f5f9 20px
  );
}

.notes-grid {
  position: absolute;
  inset: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  pointer-events: none;
}

.note {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: clamp(0.45rem, 1.6vw, 0.75rem);
  font-weight: 800;
  line-height: 1;
}

.cell.has-notes {
  align-items: stretch;
  justify-content: stretch;
}

.cell,
.num-btn,
.mobile-num-btn,
.tool-btn {
  -webkit-tap-highlight-color: transparent;
}

.cell:active,
.num-btn:active,
.mobile-num-btn:active,
.tool-btn:active {
  transform: scale(0.97);
}

.tool-btn {
  min-height: 58px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #475569;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  border: 1px solid #e2e8f0;
  transition: transform .1s ease, background .15s ease, border-color .15s ease;
}

.tool-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.tool-label {
  font-size: .65rem;
  font-weight: 900;
  color: #64748b;
}

.tool-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.tool-btn:active {
  transform: scale(.94);
  background: #dbeafe;
}

@media (max-width: 768px) {
  .tool-btn {
    height: 48px;
    border-radius: 16px;
    font-size: 1.15rem;
  }

  .badge {
    top: -7px;
    right: 4px;
    min-width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .sudoku-board {
    border-width: 2.5px;
  }

  .cell:nth-child(3n) {
    border-right-width: 2.5px;
  }

  .cell:nth-child(n+19):nth-child(-n+27),
  .cell:nth-child(n+46):nth-child(-n+54) {
    border-bottom-width: 2.5px;
  }
}

.mobile-num-btn {
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 16px;

  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

  color: #1d4ed8;

  font-size: 1.35rem;
  font-weight: 900;

  border: 1px solid #dbeafe;

  box-shadow:
    0 8px 18px rgba(37,99,235,.10),
    inset 0 1px 0 rgba(255,255,255,.9);

  transition:
    transform .08s ease,
    background .12s ease,
    box-shadow .12s ease,
    border-color .12s ease;
}

.mobile-num-btn:hover {
  background: #eff6ff;
}

.mobile-num-btn:active {
  transform: scale(.92);

  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);

  border-color: #60a5fa;

  box-shadow:
    inset 0 3px 10px rgba(37,99,235,.18),
    0 2px 6px rgba(37,99,235,.10);
}

@media (max-width: 768px) {
  .mobile-sticky-controls {
  	position: fixed;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	z-index: 40;
  	background: rgba(248,251,255,.94);
  	backdrop-filter: blur(16px);
  	padding-bottom: 10px;
  }

  .sudoku-board {
    border-radius: 16px;
  }

  .cell {
    font-size: clamp(1.25rem, 7vw, 2.05rem);
  }
}