/* =========================================================
   Sam Kido - Tinh chỉnh giao diện cho PC / iPad / Điện thoại
   Mục tiêu: nút đủ to cho ngón tay trẻ, chữ đủ lớn,
   thanh đầu trang không bị tràn trên máy tính bảng.
   (Nạp sau cùng để ghi đè các file CSS trước đó)
   ========================================================= */

/* ---------------------------------------------------------
   1. VÙNG CHẠM TỐI THIỂU 48px CHO NGÓN TAY TRẺ
   --------------------------------------------------------- */
.voice-btn,
.btn-back-home,
.diff-pill-btn,
.tab-btn,
.btn-opp-select,
.btn-mode-toggle,
.header-btn,
.pill-choice,
.writing-cat-btn,
.btn-en-speak,
.runner-pill-btn,
.pd-pill,
.btn-claim-chest,
.btn-tool-write,
.frame-choice-btn,
.btn-letter-act,
.btn-nav-letter,
.modal-btn-confirm,
.tone-play-btn {
  min-height: 48px;
}

.voice-btn {
  font-size: 1rem;
  padding: 10px 18px;
}

.diff-pill-btn {
  font-size: 0.95rem;
  padding: 9px 16px;
}

.diff-badge-star {
  font-size: 0.85rem;
}

.btn-en-speak {
  font-size: 1rem;
  padding: 10px 18px;
  min-height: 48px;
}

/* Bảng màu trong Xưởng Mỹ Thuật: chấm màu to hơn để bé chấm trúng */
.color-dot {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  flex: 0 0 auto !important;
}

.color-dot.active {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
}

.btn-coloring-action,
.btn-finish-coloring,
.btn-art-tool {
  min-height: 48px;
}

/* Màu mực luyện viết & avatar chọn sẵn: ô tròn to hơn */
.ink-btn {
  width: 46px !important;
  height: 46px !important;
}

.preset-avatar-btn {
  min-width: 56px;
  min-height: 56px;
  font-size: 1.9rem;
}

/* Dải chữ cái luyện viết: trước đây chỉ rộng ~15px, bé rất khó bấm */
.char-scroll-btn {
  width: 62px !important;
  height: 62px !important;
  border-radius: 18px;
}

.char-scroll-btn .char-symbol {
  font-size: 1.7rem;
  line-height: 1.1;
}

.char-scroll-btn .char-cap {
  font-size: 0.8rem;
}

/* Công cụ vẽ, con dấu, nút vào đảo */
.tool-btn,
.stamp-btn,
.btn-save-art,
.btn-play-island,
.btn-start-adventure,
.btn-clear-spell,
.pool-letter-btn {
  min-height: 48px !important;
}

.stamp-btn {
  min-width: 48px !important;
  font-size: 1.5rem;
}

/* ---------------------------------------------------------
   2. CHỮ ĐỦ LỚN (không dưới 12px)
   --------------------------------------------------------- */
.card-name {
  font-size: 0.8rem !important;
}

.template-card-title {
  font-size: 0.95rem;
}

.pin-avatar-tag {
  font-size: 0.78rem;
  padding: 3px 10px;
}

.b-nav-label {
  font-size: 0.78rem;
}

/* ---------------------------------------------------------
   3. BÀI TẬP TO - RÕ - DỄ BẤM
   --------------------------------------------------------- */
.game-opt-btn {
  min-height: 68px;
}

/* Hình để đếm: to hơn để bé nhìn và bấm dễ */
.count-item {
  width: 86px;
  height: 86px;
}

.count-icon {
  font-size: 3.1rem;
}

.counting-box {
  gap: 18px;
  min-height: 150px;
}

/* Số thứ tự chỉ hiện khi bé bấm vào hình (trước đây là chấm đỏ rỗng gây rối mắt) */
.count-number-tag:empty {
  display: none;
}

/* ---------------------------------------------------------
   4. THANH ĐẦU TRANG TRÊN MÁY TÍNH BẢNG (769px - 1200px)
   Trước đây các nút Sticker / Phụ Huynh bị đẩy ra ngoài màn hình
   --------------------------------------------------------- */
.brand-title {
  white-space: nowrap;
}

.rank-pill {
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .top-navbar {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 10px 16px;
  }

  .brand-title {
    font-size: 1.45rem;
  }

  /* Danh hiệu dài gây vỡ thanh nav - vẫn xem được ở Album Sticker & Góc Phụ Huynh */
  .rank-pill {
    display: none;
  }
}

/* Máy tính bảng dùng thanh điều hướng đáy giống điện thoại cho bé dễ bấm */
@media (max-width: 1024px) {
  .mobile-bottom-nav {
    display: flex;
    height: 74px;
  }

  .app-viewport {
    padding-bottom: 94px;
  }

  .mobile-sound-toggle-btn {
    display: flex;
  }

  /* Các nút này đã có sẵn ở thanh đáy */
  .header-actions #btn-open-stickers,
  .header-actions #btn-open-parent,
  .header-actions #btn-open-quests,
  .header-actions #btn-header-speed {
    display: none;
  }

  .b-nav-icon {
    font-size: 1.7rem;
  }
}

/* iPad: bài tập rộng rãi, dễ nhìn */
@media (min-width: 769px) and (max-width: 1024px) {
  .game-card {
    padding: 24px 22px;
  }

  .game-question {
    font-size: 1.5rem;
  }

  .game-opt-btn {
    min-height: 76px;
    font-size: 1.7rem;
  }

  .section-instruction {
    font-size: 1.05rem;
  }
}

/* ---------------------------------------------------------
   5. ĐIỆN THOẠI: ưu tiên nội dung bài tập
   --------------------------------------------------------- */
@media (max-width: 640px) {
  .game-opt-btn {
    min-height: 62px;
    font-size: 1.35rem;
  }

  .count-item {
    width: 68px;
    height: 68px;
  }

  .count-icon {
    font-size: 2.4rem;
  }

  .voice-btn {
    font-size: 0.95rem;
    padding: 9px 14px;
  }

  /* Thanh tab chế độ: viên to, dễ vuốt */
  .game-tabs-nav .tab-btn {
    min-height: 50px;
    font-size: 0.98rem;
  }

  /* Gom gọn phần đầu bài tập để câu hỏi + đáp án nằm trong màn hình đầu tiên */
  .game-card {
    padding: 14px 12px;
    margin-bottom: 14px;
  }

  .game-header {
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 10px;
  }

  .game-badge {
    font-size: 0.82rem;
    padding: 6px 10px;
    line-height: 1.25;
  }

  .voice-btn {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 0.88rem;
  }

  .sk-level-bar {
    margin-bottom: 10px !important;
  }

  .game-question {
    font-size: 1.18rem;
    margin: 8px 0 10px;
  }

  .counting-box {
    padding: 12px;
    min-height: auto;
    gap: 12px;
    margin-bottom: 14px;
  }

  .section-instruction,
  .game-hint {
    margin-bottom: 10px;
  }

  .view-top-header {
    padding: 8px 12px;
    margin-bottom: 10px;
  }

  /* Các hàng lựa chọn dài (đối thủ, bạn đồng hành, chế độ chơi): 1 hàng vuốt ngang */
  .opponent-picker-row,
  .runner-pills-row,
  .versus-mode-toggle-bar,
  .writing-cat-selector {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .opponent-picker-row::-webkit-scrollbar,
  .runner-pills-row::-webkit-scrollbar,
  .versus-mode-toggle-bar::-webkit-scrollbar,
  .writing-cat-selector::-webkit-scrollbar {
    display: none;
  }

  .opponent-picker-row > *,
  .runner-pills-row > *,
  .versus-mode-toggle-bar > *,
  .writing-cat-selector > * {
    flex-shrink: 0;
  }

  /* Trang bản đồ tổng quan: tiêu đề và các ô thông tin xếp dọc thay vì bị bóp mỗi dòng một chữ */
  .overworld-header-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 14px;
    margin-bottom: 18px;
  }

  .overworld-title {
    font-size: 1.3rem;
    text-align: center;
  }

  .overworld-subtitle {
    text-align: center;
    font-size: 0.92rem;
  }

  .overworld-stats-pill {
    justify-content: center;
    gap: 8px;
  }

  /* Màn hình trong đảo: tên đảo xuống hàng riêng, nút nghe đọc không bị đẩy ra ngoài */
  .stage-world-topbar {
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .stage-world-topbar .btn-back-stage {
    order: 1;
  }

  .stage-world-topbar .voice-btn {
    order: 2;
    margin-left: 0;
  }

  .stage-world-heading {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .stage-world-name {
    font-size: 1.05rem;
    text-align: center;
  }

  /* Hai nút chia đôi hàng đầu để luôn nằm chung một hàng */
  .btn-back-stage,
  .stage-world-topbar .voice-btn {
    font-size: 0.85rem;
    padding: 8px 10px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
  }

  .stage-world-topbar {
    gap: 8px;
  }

  /* Nhãn "Bé Đang Ở Đây" nằm phía trên nhân vật, không che trạm bên dưới */
  .avatar-walker-bob {
    top: -62px;
    flex-direction: column-reverse;
  }

  .walker-name {
    font-size: 0.58rem;
    padding: 2px 6px;
    margin-bottom: 2px;
  }

  .avatar-walker-inner {
    font-size: 1.9rem;
  }

  .stepping-stones-track {
    padding-top: 62px;
  }

  /* Đua tốc độ: thanh thông tin xuống hàng thay vì bị cắt mất chữ "Combo" */
  .speed-hud-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
    padding: 10px;
  }

  .speed-hud-bar .hud-item {
    font-size: 0.9rem;
  }

  /* Thanh đầu trang gọn trên 1 hàng: giữ logo sư tử làm nút về trang chủ */
  .brand-title {
    display: none;
  }

  .top-navbar {
    padding: 8px 12px;
    gap: 8px;
  }

  .logo-badge {
    font-size: 2rem;
  }

  /* Chấm màu trên điện thoại vẫn phải đủ to (ghi đè responsive.css) */
  .color-dot {
    width: 46px !important;
    height: 46px !important;
  }

  .color-dot.active {
    width: 50px !important;
    height: 50px !important;
  }
}

/* Máy tính bảng nhỏ & điện thoại: giữ chấm màu và tên thẻ đủ lớn */
@media (max-width: 820px) {
  .color-dot {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex: 0 0 auto !important;
  }

  .card-name {
    font-size: 0.78rem !important;
  }
}

/* ============================================================
   VÒNG RÀ SOÁT CUỐI — ẢNH & HIỂN THỊ
   ============================================================ */

/* 1. Chú thích đảo không bị cắt ở mép bản đồ (chỉ máy tính mới có hover) */
@media (min-width: 901px) {
  .panoramic-map-container,
  .map-artwork-wrapper {
    overflow: visible;
  }
}

/* Trên điện thoại/máy tính bảng không có hover: ẩn hẳn chú thích để không làm tràn trang */
@media (max-width: 900px) {
  .pin-tooltip { display: none; }
}

.pin-tooltip {
  width: max-content;
  max-width: min(78vw, 300px);
  white-space: normal;
}

/* 2. Trên điện thoại: thu nhỏ chốt đảo để không che hết tranh */
@media (max-width: 600px) {
  .pin-badge {
    width: 30px;
    height: 30px;
    border-width: 2px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  }
  /* Tranh nền đã in sẵn số, bỏ số của chốt cho đỡ rối mắt bé */
  .pin-num { display: none; }
  .pin-icon { font-size: 0.85rem; }
  .pin-avatar-bob { top: -26px; }
  .pin-avatar-face { font-size: 1.35rem; }
  /* Nhãn chữ che mất chốt đảo trên màn nhỏ: chỉ giữ hình bé đang chạy */
  .pin-avatar-tag { display: none; }
  .pin-current .pin-badge {
    box-shadow: 0 0 0 3px #F59E0B, 0 4px 12px rgba(245, 158, 11, 0.6);
  }
}

/* 3. Ảnh thu nhỏ chọn tranh tô màu: to hơn để bé nhìn rõ nét vẽ */
.template-card-img {
  width: 76px !important;
  height: 76px !important;
}

/* 4. Chữ đủ đậm để đọc rõ (đạt chuẩn tương phản WCAG AA) */
.btn-back-home { color: #C81E42; }
.tab-btn.active { background: #1273C4; }
.voice-btn { color: #015C8D; }
.game-hint { color: #55617A; }
.rs-btn-hint { background: #C2600B; }
.fl-net-btn { background: #78839A; }

/* 5. Tên app không dính sát thẻ hồ sơ của bé */
.brand-logo { margin-right: 14px; }

/* 6. Bản đồ: gợi ý ẩn đi, bé bấm mới hiện (nhiều gợi ý nói thẳng đáp án) */
.rpg-challenge-box button.challenge-hint-tag,
button.challenge-hint-tag {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #FFD54F, #FFB300);
  color: #4A3200;
  border: 2px solid #FFF3C4;
  border-radius: 999px;
  padding: 8px 18px;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 900;
  text-shadow: none;
  box-shadow: 0 4px 10px rgba(255, 179, 0, 0.35);
}

.rpg-challenge-box button.challenge-hint-tag:active,
button.challenge-hint-tag:active {
  transform: scale(0.96);
}

.challenge-hint-text {
  margin: 10px 0 2px;
  padding: 10px 14px;
  background: #FFF8E1;
  border: 2px dashed #F59E0B;
  border-radius: 14px;
  color: #92590B;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* ============================================================
   SỬA THEO ẢNH CHỤP TỪ ĐIỆN THOẠI THẬT (samkido.com)
   1) Hồ sơ bé tràn ngang + quá dài   2) Thanh tab vuốt ngang khó thấy
   ============================================================ */
@media (max-width: 600px) {
  /* --- Hồ sơ bé: không bao giờ tràn ngang --- */
  .profile-modal-card {
    padding: 18px 14px 16px;
    max-height: 92vh;
    overflow-x: hidden;
    border-width: 4px;
    border-radius: 22px;
  }
  .profile-modal-card .modal-header-badge { font-size: 0.78rem; padding: 3px 10px; margin-bottom: 4px; }
  .profile-modal-card .modal-title { font-size: 1.35rem; margin: 2px 0 2px; }
  .profile-modal-card .modal-desc { font-size: 0.85rem; margin-bottom: 10px; }
  .profile-modal-card .form-group { margin-bottom: 10px; }
  .profile-modal-card .form-label { font-size: 0.95rem; margin-bottom: 6px; }
  .profile-modal-card .form-sublabel { font-size: 0.82rem; margin: 8px 0 6px; }
  .profile-modal-card .form-input { padding: 10px 14px; font-size: 1rem; }

  /* Tuổi và giới tính xếp dọc, mỗi nhóm là lưới 2 cột gọn gàng */
  .profile-modal-card .form-row { grid-template-columns: 1fr; gap: 6px; }
  .profile-modal-card .form-col { min-width: 0; }
  .profile-modal-card .select-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .profile-modal-card .pill-choice {
    flex: none;
    min-width: 0;
    white-space: normal;
    line-height: 1.2;
    padding: 9px 6px;
    font-size: 0.88rem;
    min-height: 44px;
  }

  /* Khung xem trước avatar: nhỏ gọn, nằm ngang */
  .profile-modal-card .avatar-creation-section { margin-top: 4px; }
  .profile-modal-card .avatar-live-preview-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
  }
  .profile-modal-card .avatar-preview-wrapper {
    width: 64px;
    height: 64px;
    min-width: 64px;
    flex: none;
  }
  .profile-modal-card .preview-avatar-content { font-size: 2rem; }
  .profile-modal-card .avatar-preview-info { min-width: 0; flex: 1; }
  .profile-modal-card .preview-name-tag { font-size: 1rem; }
  .profile-modal-card .btn-upload-avatar { font-size: 0.82rem; padding: 8px 10px; }

  /* 8 avatar hoạt hình: lưới 4 cột, không còn hàng dài tràn ra ngoài */
  .profile-modal-card .preset-avatars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    overflow: visible;
  }
  .profile-modal-card .preset-avatar-btn {
    width: auto;
    min-width: 0;
    height: 52px;
    font-size: 1.6rem;
    padding: 0;
  }

  /* 6 khung viền: lưới 3 cột, chữ xuống dòng được */
  .profile-modal-card .frame-selector-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .profile-modal-card .frame-choice-btn {
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 6px 4px;
    font-size: 0.78rem;
    line-height: 1.15;
    min-height: 54px;
  }
  .profile-modal-card .frame-icon { font-size: 1.2rem; }

  .profile-modal-card .form-actions { margin-top: 12px; }
  .profile-modal-card .modal-btn-confirm { width: 100%; font-size: 1.05rem; padding: 13px 10px; }

  /* --- Thanh tab chế độ: lưới 2 cột, thấy hết mọi trò, không phải vuốt ngang --- */
  .game-tabs-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 8px;
    padding: 2px 0 6px;
  }
  .game-tabs-nav .tab-btn {
    flex: none;
    width: 100%;
    min-width: 0;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
    padding: 8px 8px;
    font-size: 0.9rem;
    min-height: 46px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Tab lẻ cuối cùng kéo rộng cả hàng cho cân */
  .game-tabs-nav .tab-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Máy tính bảng: 3 cột */
@media (min-width: 601px) and (max-width: 900px) {
  .game-tabs-nav {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible !important;
    gap: 10px;
  }
  .game-tabs-nav .tab-btn { width: 100%; white-space: normal; text-align: center; min-height: 48px; }
}