/* ==========================================================
   RESET & BASE
   ========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft Yahei", sans-serif;
  background-color: #8b0000;
  background-image: url("../assets/bg-pattern-chinese");
  background-repeat: repeat-x;
  background-position: bottom;
  color: #3a241a;
}

/* ==========================================================
   APP CONTAINER
   ========================================================== */

.app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px 0 40px;
}

/* Dải nội dung chính (menu + game) */
.main-wrapper {
  flex: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 16px;
}

/* ==========================================================
   TOP BAR (LOGO + NGÔN NGỮ + NHẠC)
   ========================================================== */

.top-bar {
  max-width: 1280px;
  margin: 0 auto 12px;
  padding: 8px 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-text {
  background: linear-gradient(135deg, #ff7b4a, #ffb36b);
  padding: 10px 18px;
  border-radius: 24px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: #fff9f1;
}

.logo-text h1 {
  font-size: 20px;
  margin-bottom: 4px;
}

.logo-text p {
  font-size: 12px;
  opacity: 0.9;
}

.top-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-switch {
  display: inline-flex;
  gap: 4px;
}

.lang-btn {
  border: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  color: #7a3a20;
}

.lang-btn.active {
  background: #f5b400;
  color: #3a241a;
  font-weight: 600;
}

.music-btn {
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ==========================================================
   SCENES (MENU / GAME / HOWTO)
   ========================================================== */

.scene {
  display: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.scene.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================
   MENU SCENE
   ========================================================== */

.menu-card {
  max-width: 420px;
  margin-top: 36px;
  padding: 18px 18px 20px;
  border-radius: 26px;
  background: linear-gradient(135deg, #ffe2c1, #ffd1a0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.menu-card h2 {
  font-size: 22px;
  margin-bottom: 6px;
  color: #5a3020;
}

.menu-card .subtitle {
  font-size: 13px;
  color: #7c5b47;
  margin-bottom: 14px;
}

.level-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.btn-level {
  border-radius: 18px;
  border: 1px solid #f2c58f;
  padding: 10px 8px;
  background: linear-gradient(135deg, #fff7e2, #ffe0b3);
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  color: #5a3020;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(222, 170, 100, 0.6);
}

.btn-level span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #94654a;
  font-weight: 400;
}

.btn-level:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}

.menu-actions {
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn-primary,
.btn-secondary,
.btn-small,
.btn-ghost {
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 8px 16px;
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    background-color 0.12s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #ff5959, #ff8c4a);
  color: #fffdf7;
  box-shadow: 0 4px 12px rgba(255, 90, 90, 0.6);
}

.btn-secondary {
  background: #fff7e2;
  color: #7a3a20;
  border: 1px solid #f0c895;
}

.btn-small {
  background: #fff;
  color: #7a3a20;
  border: 1px solid #e0c0a0;
  padding: 4px 12px;
  font-size: 12px;
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-small:hover,
.btn-ghost:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ==========================================================
   GAME SCENE – LAYOUT
   ========================================================== */

.scene#scene-game {
  margin-top: 20px;
}

/* Bố cục chính của game: đặt giữa, thật to */
.game-layout {
  display: flex;
  justify-content: center;
}

/* Khối trung tâm của game (HUD + board) */
.game-main {
  width: min(1000px, 92vw);  /* to và gần full màn hình */
}

/* ==========================================================
   HUD (ĐIỂM / HP / THỜI GIAN)
   ========================================================== */

.hud-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.hud-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  font-size: 12px;
}

.hud-item span {
  color: #7a3a20;
  margin-bottom: 2px;
}

.hud-item strong {
  font-size: 16px;
  color: #3a241a;
}

/* ==========================================================
   GAME BOARD – KHU VỰC CHƠI CHÍNH
   ========================================================== */

.game-board-wrapper {
  position: relative;
  width: 100%;
  min-height: 65vh; /* CHIẾM PHẦN LỚN MÀN HÌNH */
  border-radius: 24px;
  border: 2px solid #d8b58a;
  background:
    url("../assets/paper-texture.png"),
    #fffef8;
  background-blend-mode: multiply;
  background-size: cover;
  padding: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

#game-board {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 60vh;
}

/* Thông báo placeholder khi chưa chơi */
.placeholder-msg {
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #9b6c4a;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Layer vẽ line cho Level 2 */
#line-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ==========================================================
   NOTE PANEL (NẾU DÙNG)
   ========================================================== */

.note-panel {
  margin-top: 14px;
  border-radius: 18px;
  background: #fff8ec;
  padding: 12px 14px;
  border: 1px solid #f3d5ad;
  box-shadow: 0 4px 12px rgba(150, 100, 60, 0.1);
}

.note-panel h3 {
  font-size: 15px;
  margin-bottom: 6px;
  color: #5a3020;
}

.note-panel p {
  font-size: 13px;
  color: #7d5d47;
  line-height: 1.5;
}

/* ==========================================================
   LEVEL 1 – BỘ THỦ RƠI
   ========================================================== */

.level1-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.level1-center-char {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 72px;
  color: #b8201a;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* Bộ thủ rơi */
.radical-drop {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d8, #f3c56b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #7a3a20;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

/* ==========================================================
   LEVEL 2 – GHÉP 2 BỘ
   ========================================================== */

.level2-container {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.level2-target {
  font-size: 60px;
  color: #b8201a;
}

.level2-eq {
  font-size: 28px;
  margin: 0 6px;
}

.level2-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.level2-tile {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7dd, #f5c97e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #7a3a20;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  border: 2px solid transparent;
}

.level2-tile.selected {
  border-color: #f15a24;
  box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.3);
}

/* Line nối 2 ô */
.line-connection {
  position: absolute;
  height: 4px;
  background: linear-gradient(90deg, #f4b000, #f15a24);
  transform-origin: left center;
}

/* Chữ hợp bộ (hiệu ứng) */
.fusion-char {
  font-size: 76px;
  color: #b8201a;
  text-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

/* ==========================================================
   LEVEL 3 – GHÉP 3 BỘ + CHỌN NGHĨA
   ========================================================== */

.level3-quiz {
  margin-top: 16px;
}

.level3-quiz.hidden {
  display: none;
}

.level3-quiz-option {
  display: block;
  margin: 6px 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e0c28f;
  background: #fffaf0;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.level3-quiz-option.correct {
  background: #e3ffd7;
  border-color: #46a046;
}

.level3-quiz-option.wrong {
  background: #ffe2df;
  border-color: #d9534f;
}

/* ==========================================================
   HOW TO SCENE
   ========================================================== */

.howto-card {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 20px 22px;
  border-radius: 24px;
  background: #fff8ec;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.howto-card h2 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #5a3020;
}

.howto-card p {
  font-size: 14px;
  color: #7d5d47;
  line-height: 1.7;
  white-space: pre-line;
  margin-bottom: 12px;
}

/* ==========================================================
   OVERLAY THẮNG GAME
   ========================================================== */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 14, 6, 0.35);
  z-index: 999;
}

.overlay.hidden {
  display: none;
}

.overlay-content {
  background: #fff8ec;
  border-radius: 26px;
  padding: 20px 26px 18px;
  width: min(420px, 92vw);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.overlay-content h2 {
  font-size: 22px;
  margin-bottom: 6px;
  color: #c02d1a;
}

.overlay-content p {
  font-size: 14px;
  color: #7d5d47;
  margin-bottom: 14px;
}

.overlay-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {
  .top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .menu-card {
    margin-top: 20px;
  }

  .game-main {
    width: 96vw;
  }

  .level2-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .radical-drop {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }
}