/* "Săn Từ Tiếng Anh" — chủ đề phiêu lưu trong rừng nhiệt đới, đi theo ảnh
   nền background.jpg (không theo format thẻ trắng của trang host): thanh
   trên là tấm biển gỗ, bàn chữ là khung gỗ chứa các viên đá khắc chữ, danh
   sách từ là cuộn giấy bản đồ. Bundle chạy độc lập trong iframe nên khai báo
   bảng màu riêng bằng biến CSS ở đây. */
:root {
  --ink: #3b2a1a;
  --wood: #9a5b2e;
  --wood-dark: #6b3a1a;
  --wood-light: #c9844a;
  --paper: #fff4d6;
  --paper-edge: #e8c98a;
  --stone: #fffaf0;
  --stone-shadow: #d9c7a3;
  --leaf: #4caf50;
  --leaf-dark: #2e7d32;
  --sun: #ffc93c;
  --sun-dark: #e39b00;
  --berry: #e8513d;
}

* {
  box-sizing: border-box;
}

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

body {
  /* Nền rừng nhiệt đới (background.jpg); màu kem ở html là nền dự phòng lúc
     ảnh chưa tải xong. `cover` + canh giữa-dưới: giữ lối mòn/thác nước ở
     giữa khung, cắt bớt trời khi khung dẹt. */
  background: url('background.jpg') center bottom / cover no-repeat;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 12px;
  /* Kéo chọn ô trong lưới là thao tác chính của game — bắt buộc tắt bôi đen
     văn bản/con trỏ hệ thống khi rê chuột, khác các game "click" trước đó
     (fruit-box vẫn cần kéo nhưng chọn ô rời rạc, ở đây kéo LIÊN TỤC qua
     nhiều ô nên nguy cơ bôi đen text cao hơn hẳn). */
  user-select: none;
  touch-action: none;
}

/* ---- Thanh trên: tấm biển gỗ, 2 huy hiệu số liệu ---- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 18px;
  border: 3px solid var(--wood-dark);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0) 0 9px,
      rgba(0, 0, 0, 0.06) 9px 11px
    ),
    linear-gradient(180deg, var(--wood-light), var(--wood));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    0 5px 0 var(--wood-dark),
    0 8px 14px rgba(0, 0, 0, 0.25);
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.12em 0.6em 0.12em 0.25em;
  border-radius: 999px;
  border: 3px solid var(--wood-dark);
  background: var(--paper);
  box-shadow: 0 3px 0 var(--wood-dark);
  /* Theo cỡ khung (vmin) để đọc được khi chiếu lên màn hình lớn/fullscreen
     — giáo viên và cả lớp cần nhìn số từ đã tìm + thời gian từ xa. */
  font-size: clamp(18px, 4.6vmin, 42px);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

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

.stat--found .stat-icon {
  background: var(--leaf);
}

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

.stat-label {
  font-size: 0.75em;
  font-weight: 700;
}

.stat--found .stat-value {
  color: var(--leaf-dark);
}

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

.play-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.board-area {
  flex: 3 1 260px;
  align-self: stretch;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Bàn chữ = khung gỗ dày (vẽ bằng box-shadow để không chiếm layout —
   layoutBoard() trong game.js đã chừa BOARD_FRAME cho phần này) bao quanh
   các viên đá khắc chữ. */
.board {
  display: grid;
  gap: 5px;
  border-radius: 10px;
  background: #5a3418;
  box-shadow:
    0 0 0 5px #5a3418,
    0 0 0 10px var(--wood),
    0 0 0 12px var(--wood-dark),
    0 8px 0 12px var(--wood-dark),
    0 12px 22px 12px rgba(0, 0, 0, 0.3);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22%;
  border: none;
  background: linear-gradient(180deg, #ffffff, var(--stone));
  color: var(--ink);
  box-shadow:
    inset 0 -4px 0 var(--stone-shadow),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);
  /* `--cell-size` (đặt bởi `layoutBoard()` trong game.js) là kích thước ô
     thật đo được — chữ cái scale đúng theo kích thước ô, không cố định. */
  font-size: calc(var(--cell-size, 32px) * 0.52);
  font-weight: 800;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    transform 0.12s ease;
}

.cell:hover {
  transform: translateY(-1px);
}

.cell.selecting {
  background: linear-gradient(180deg, #ffe27a, var(--sun));
  color: var(--ink);
  box-shadow:
    inset 0 -4px 0 var(--sun-dark),
    0 0 0 3px #fff3b0,
    0 0 14px 2px rgba(255, 201, 60, 0.9);
  transform: scale(1.06);
  z-index: 1;
}

.cell.found {
  background: linear-gradient(180deg, #43a047, var(--leaf-dark));
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 -4px 0 #1b5e20;
  animation: pop 0.35s ease;
}

.cell.wrong {
  background: linear-gradient(180deg, #ff8a78, var(--berry));
  color: #ffffff;
  box-shadow: inset 0 -4px 0 #b3321f;
  animation: shake 0.3s ease;
}

/* ---- Danh sách từ: cuộn giấy bản đồ ---- */

.clues-panel {
  flex: 1 1 170px;
  min-width: 160px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 14px;
  border-radius: 16px;
  border: 3px solid var(--wood-dark);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.6), transparent 40%),
    linear-gradient(180deg, var(--paper), #f9e3b0);
  box-shadow:
    inset 0 0 0 4px var(--paper-edge),
    0 5px 0 var(--wood-dark),
    0 8px 14px rgba(0, 0, 0, 0.25);
}

.clues-title {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0 4px;
  padding-bottom: 6px;
  border-bottom: 2px dashed var(--paper-edge);
  font-size: clamp(14px, 2.8vmin, 26px);
  font-weight: 800;
  color: var(--wood-dark);
}

.clues {
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

/* Icon Lucide (https://lucide.dev, ISC) chép nguyên SVG gốc từ gói
   lucide-react của web — bundle game tĩnh không import được gói npm. */
.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.clue {
  position: relative;
  margin-top: 6px;
  padding: 6px 10px 6px 2em;
  border-radius: 12px;
  border: 2px solid var(--paper-edge);
  background: rgba(255, 255, 255, 0.7);
  font-size: clamp(14px, 2.6vmin, 24px);
  font-weight: 700;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.clue::before {
  content: '';
  position: absolute;
  left: 0.55em;
  top: 50%;
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  background: var(--leaf);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z%22 /%3E%3Cpath d=%22M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12%22 /%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z%22 /%3E%3Cpath d=%22M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12%22 /%3E%3C/svg%3E") center / contain no-repeat;
}

.clue.done {
  border-color: var(--leaf);
  background: #e3f6dc;
  color: var(--leaf-dark);
  animation: pop 0.35s ease;
}

.clue.done::before {
  background: var(--leaf-dark);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpath d=%22m9 12 2 2 4-4%22 /%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpath d=%22m9 12 2 2 4-4%22 /%3E%3C/svg%3E");
}

.clue .clue-word {
  display: block;
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wood-dark);
}

/* ---- Màn kết thúc: tấm biển gỗ thả xuống ---- */

.game-over {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 50, 20, 0.5);
}

.game-over[hidden] {
  display: none;
}

.game-over-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 36px 26px;
  border-radius: 24px;
  border: 4px solid var(--wood-dark);
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.7), transparent 50%),
    linear-gradient(180deg, var(--paper), #f6dca0);
  box-shadow:
    0 7px 0 var(--wood-dark),
    0 14px 30px rgba(0, 0, 0, 0.35);
  animation: drop-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.game-over-trophy {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  border: 4px solid var(--sun-dark);
  background: var(--sun);
  color: var(--wood-dark);
  font-size: clamp(40px, 10vmin, 90px);
  line-height: 1;
  animation: wiggle 1.4s ease-in-out infinite;
}

.game-over-title {
  font-size: clamp(22px, 5vmin, 44px);
  font-weight: 900;
  color: var(--leaf-dark);
}

.game-over p {
  margin: 0;
  font-size: clamp(16px, 3vmin, 26px);
  font-weight: 800;
  text-align: center;
}

.game-over button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 4px;
  border: 3px solid var(--leaf-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: linear-gradient(180deg, #7ed67f, var(--leaf));
  box-shadow: 0 4px 0 var(--leaf-dark);
  text-shadow: 0 1px 0 var(--leaf-dark);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.game-over button:hover {
  transform: translateY(-2px);
}

.game-over button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--leaf-dark);
}

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

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

@keyframes pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes drop-in {
  from {
    transform: translateY(-60px) rotate(-4deg);
    opacity: 0;
  }
  to {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
}

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

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