/* "Sudoku Vui" — chủ đề góc học bài kiểu Nhật, đi theo ảnh nền
   background.jpg (bàn gỗ sáng, núi Phú Sĩ, hoa anh đào, chén trà xanh, sách
   bìa chàm). Không theo format thẻ trắng của trang host: thanh trên là dải
   kính mờ màu trời, bàn Sudoku là tờ giấy washi kẻ mực chàm, bàn phím số là
   các nút sứ trắng viền chàm như chén trà. Ô điền đúng màu trà xanh (matcha),
   ô gợi ý màu hoa anh đào. Bundle chạy độc lập trong iframe nên bảng màu khai
   bằng biến CSS ở đây. */
:root {
  --ink: #1f2f57;
  --indigo: #2c4a8a;
  --indigo-dark: #1b2f5e;
  --indigo-soft: #dfe7f7;
  --indigo-mist: #eef3fc;
  --paper: #fffdf7;
  --paper-shade: #f4ecdc;
  --sakura: #f49ab8;
  --sakura-dark: #d4537f;
  --sakura-soft: #ffe4ee;
  --matcha: #5e8f3a;
  --matcha-soft: #edf5e3;
  --wood: #d9a86c;
  --wood-dark: #a8743c;
  --error: #d64545;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family:
    'Be Vietnam Pro',
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  background: #f3e2c4;
  color: var(--ink);
  overflow: hidden;
}

body {
  /* Ảnh nền góc học bài; màu gỗ ở html là nền dự phòng lúc ảnh chưa tải. */
  background: url('background.jpg') center / cover no-repeat;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  user-select: none;
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ---- Thanh trên: dải kính mờ màu trời, số liệu là các thẻ giấy nhỏ ---- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(236, 244, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(27, 47, 94, 0.18);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.stats,
.status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.65em 0.15em 0.2em;
  border-radius: 999px;
  border: 2px solid var(--indigo-soft);
  background: var(--paper);
  box-shadow: 0 3px 0 var(--indigo-soft);
  font-size: clamp(14px, 3.4vmin, 30px);
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stat-icon {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.8em;
}

.stat--level .stat-icon {
  background: var(--indigo);
}

.stat--score .stat-icon {
  background: var(--sakura-dark);
}

.stat--mistakes .stat-icon {
  background: var(--error);
}

.stat--time .stat-icon {
  background: var(--matcha);
}

.stat-label {
  font-size: 0.75em;
  font-weight: 700;
  color: var(--indigo);
}

/* Nút gợi ý CHỈ có icon (không chữ) — bấm tự điền 1 ô trống ngẫu nhiên và
   trừ điểm (xem onHintClick() trong game.js). Hồng anh đào, nổi khối như
   con dấu. */
.hint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.9em;
  height: 1.9em;
  padding: 0;
  border: 2px solid var(--sakura-dark);
  border-radius: 50%;
  color: var(--sakura-dark);
  background: var(--sakura-soft);
  box-shadow: 0 3px 0 var(--sakura-dark);
  font-size: clamp(16px, 3.6vmin, 32px);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.hint-btn:hover {
  transform: translateY(-2px) rotate(-8deg);
}

.hint-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--sakura-dark);
}

/* ---- Khu chơi ---- */

.play-area {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Toast dùng chung cho báo "qua cấp" và "hoàn thành" (xem showToast() trong
   game.js) — dải ruy băng chàm viền hồng. */
.round-banner {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 2;
  padding: 10px 22px;
  border-radius: 999px;
  border: 3px solid var(--sakura);
  background: var(--indigo);
  color: #ffffff;
  font-size: clamp(14px, 3vmin, 24px);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 5px 0 var(--indigo-dark);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -14px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.round-banner.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Tờ giấy washi đặt trên bàn gỗ — hơi nghiêng bóng đổ như giấy thật.
   padding 16px + gap 14px khớp phần layoutBoard() trong game.js chừa ra. */
.board-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
  padding: 16px;
  border-radius: 20px;
  border: 2px solid #ffffff;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.9), transparent 45%),
    linear-gradient(180deg, var(--paper), var(--paper-shade));
  box-shadow:
    0 4px 0 #e6d5b5,
    0 16px 30px rgba(110, 70, 30, 0.3);
}

/* Kích thước THẬT của lưới (px vuông, giữ đúng tỉ lệ 1:1) đặt bởi
   layoutBoard() trong game.js — luôn vừa khít `.play-area`, không bao giờ
   tràn. Kẻ mực chàm: nét mảnh giữa các ô (gap), nét dày giữa khối 3x3
   (`.box-r`/`.box-b`). */
.sudoku-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 1px;
  background: #b9c8e6;
  border: 3px solid var(--indigo);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 4px var(--indigo-soft);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: calc(var(--cell-size, 40px) * 0.52);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.12s ease,
    box-shadow 0.12s ease;
}

.cell:hover:not(:disabled) {
  background: var(--indigo-mist);
}

/* Viền dày phân tách 3 khối 3x3 — thêm bằng class ở giữa mỗi khối (buildGrid()
   trong game.js), không dùng nth-child để khỏi phụ thuộc thứ tự DOM cụ thể. */
.cell.box-r {
  border-right: 3px solid var(--indigo);
}

.cell.box-b {
  border-bottom: 3px solid var(--indigo);
}

/* Ô cho sẵn từ đầu — khoá, mực chàm đậm như chữ in sẵn trên đề. */
.cell.given {
  color: var(--indigo-dark);
  background: #f6f1e4;
  cursor: default;
}

/* Ô người chơi điền ĐÚNG — khoá lại vĩnh viễn, màu trà xanh. */
.cell.filled {
  color: var(--matcha);
  background: var(--matcha-soft);
  cursor: default;
  animation: cell-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Ô được điền qua nút "Gợi ý" — màu hoa anh đào, phân biệt với ô tự giải. */
.cell.hint {
  color: var(--sakura-dark);
  background: var(--sakura-soft);
  cursor: default;
  animation: cell-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Cùng hàng/cột/khối với ô đang chọn — xanh trời nhạt gợi phạm vi ràng buộc. */
.cell.peer {
  background: var(--indigo-soft);
}

/* Cùng giá trị với ô đang chọn — đậm hơn peer để dễ soi trùng số. */
.cell.same-value {
  background: #b9cdf0;
}

.cell.selected {
  background: var(--sakura-soft);
  box-shadow: inset 0 0 0 3px var(--sakura-dark);
}

.cell.wrong {
  background: #fde3e3;
  color: var(--error);
  box-shadow: inset 0 0 0 3px var(--error);
  animation: shake 0.3s ease;
}

/* ---- Bàn phím số: nút sứ trắng viền chàm ---- */

.numpad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}

.num-btn {
  width: clamp(36px, 7vmin, 64px);
  height: clamp(36px, 7vmin, 64px);
  border-radius: 50%;
  border: 3px solid var(--indigo);
  background: radial-gradient(circle at 35% 30%, #ffffff, #eef2fa 70%);
  color: var(--indigo-dark);
  box-shadow:
    inset 0 0 0 3px #ffffff,
    inset 0 0 0 5px var(--indigo-soft),
    0 4px 0 var(--indigo-dark);
  font-family: inherit;
  font-size: clamp(16px, 3.4vmin, 30px);
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.12s ease;
}

.num-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  background: radial-gradient(circle at 35% 30%, #ffffff, var(--sakura-soft) 70%);
}

.num-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    inset 0 0 0 3px #ffffff,
    inset 0 0 0 5px var(--indigo-soft),
    0 1px 0 var(--indigo-dark);
}

/* Số đã dùng đủ 9 lần trên toàn bảng — mờ đi + khoá, gợi ý số nào đã "xong". */
.num-btn.used {
  border-color: #c9d2e3;
  background: #f1f3f7;
  color: #b3bccd;
  box-shadow: 0 2px 0 #c9d2e3;
  cursor: default;
}

/* ---- Hộp thoại kết thúc: thiệp giấy washi ---- */

.dialog {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(27, 47, 94, 0.4);
}

.dialog[hidden] {
  display: none;
}

.dialog-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 34px 26px;
  max-width: 80%;
  border-radius: 24px;
  border: 3px solid var(--indigo);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.9), transparent 50%),
    linear-gradient(180deg, var(--paper), var(--paper-shade));
  box-shadow:
    inset 0 0 0 5px var(--paper),
    inset 0 0 0 7px var(--sakura),
    0 7px 0 var(--indigo-dark),
    0 16px 30px rgba(0, 0, 0, 0.3);
  animation: float-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.dialog-trophy {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  border: 4px solid var(--sakura-dark);
  background: var(--sakura-soft);
  color: var(--sakura-dark);
  font-size: clamp(40px, 10vmin, 88px);
  animation: sway 1.6s ease-in-out infinite;
}

.dialog-card p {
  margin: 0;
  text-align: center;
}

#game-over-text {
  font-size: clamp(17px, 3.4vmin, 30px);
  font-weight: 800;
  color: var(--indigo-dark);
}

#game-over-detail {
  font-size: clamp(13px, 2.4vmin, 20px);
  font-weight: 600;
  color: var(--indigo);
}

.dialog-card button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 4px;
  border: 3px solid var(--indigo-dark);
  border-radius: 999px;
  padding: 0.45em 1.4em;
  font-family: inherit;
  font-size: clamp(15px, 2.8vmin, 24px);
  font-weight: 800;
  color: #ffffff;
  background: var(--indigo);
  box-shadow: 0 4px 0 var(--indigo-dark);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.dialog-card button:hover {
  transform: translateY(-2px);
}

.dialog-card button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--indigo-dark);
}

/* ---- Hiệu ứng ---- */

@keyframes cell-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  70% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

@keyframes float-in {
  from {
    transform: translateY(40px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes sway {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before {
    animation: none !important;
    transition: none !important;
  }
}