/* =========================================================
   Sam Kido - 🧠 Phòng Suy Luận (Reason Lab)
   Mọi lớp đều có tiền tố "rs-" để không đụng vào các màn khác.
   Dùng lại các lớp sẵn có: game-card, game-header, game-badge,
   voice-btn, section-instruction, game-question, game-hint,
   options-grid, game-opt-btn, feedback-msg, bounce-in, pop-in.
   Mục tiêu: vùng chạm >= 48px, chạy đẹp từ 360px tới màn hình lớn.
   ========================================================= */

.rs-card {
  border-color: #E4DAFF;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF8FF 100%);
}

.rs-card .rs-sub {
  margin-bottom: 16px;
}

/* ---------------------------------------------------------
   1. MA TRẬN HÌNH BÍ ẨN
   --------------------------------------------------------- */
.rs-matrix-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
}

.rs-matrix-grid {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #F4F0FF;
  border: 4px solid #E0D4FF;
  border-radius: 28px;
  box-shadow: inset 0 3px 10px rgba(110, 80, 190, 0.08);
}

.rs-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.rs-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.rs-cell {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 3px solid #D9CCFA;
  border-radius: 20px;
  box-shadow: 0 3px 0 #D3C4F7;
  overflow: hidden;
}

.rs-cols-2 .rs-cell {
  width: 116px;
  height: 116px;
}

.rs-cell-q {
  background: repeating-linear-gradient(45deg, #FFF8E1, #FFF8E1 10px, #FFF2CC 10px, #FFF2CC 20px);
  border-color: #FFC94D;
  border-style: dashed;
  box-shadow: 0 3px 0 #F0BE4A;
  animation: rsPulse 1.5s ease-in-out infinite;
}

.rs-qmark {
  font-family: var(--font-display, sans-serif);
  font-size: 2.8rem;
  font-weight: 800;
  color: #D98E00;
  line-height: 1;
}

@keyframes rsPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Cụm hình trong một ô (1-3 hình xếp cạnh nhau) */
.rs-fig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 0;
  max-width: 100%;
}

.rs-fig-n3 {
  gap: 2px;
}

.rs-svg {
  display: block;
  flex: 0 0 auto;
}

/* Nút đáp án chứa hình SVG */
.rs-options {
  max-width: 560px;
}

.rs-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 10px;
}

.rs-matrix-opt {
  flex-direction: column;
  gap: 4px;
}

/* ---------------------------------------------------------
   2. GIỐNG NHAU THẾ NÀO? (loại suy)
   --------------------------------------------------------- */
.rs-ana-board {
  max-width: 480px;
  margin: 0 auto 20px;
  padding: 16px 12px;
  background: #EAF7FF;
  border: 4px solid #C9E9FF;
  border-radius: 28px;
}

.rs-ana-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rs-ana-link {
  font-size: 1.6rem;
  flex: 0 0 auto;
}

.rs-ana-eq {
  text-align: center;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 1rem;
  color: #0077B6;
  margin: 10px 0;
  letter-spacing: 0.5px;
}

.rs-ana-eq::before,
.rs-ana-eq::after {
  content: '⬇️';
  margin: 0 8px;
}

.rs-tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  min-height: 92px;
  background: #FFFFFF;
  border: 3px solid #BFE3FF;
  border-radius: 22px;
  box-shadow: 0 4px 0 #BFE3FF;
}

.rs-tile-emoji {
  font-size: 2.4rem;
  line-height: 1.1;
}

.rs-tile-word {
  font-family: var(--font-body, sans-serif);
  font-size: 0.86rem;
  font-weight: 700;
  color: #2D3748;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

.rs-tile-q {
  background: repeating-linear-gradient(45deg, #FFF8E1, #FFF8E1 10px, #FFF2CC 10px, #FFF2CC 20px);
  border-color: #FFC94D;
  border-style: dashed;
  box-shadow: 0 4px 0 #F0BE4A;
  animation: rsPulse 1.5s ease-in-out infinite;
}

.rs-tile-q .rs-tile-word {
  color: #B47600;
}

.rs-ana-opt {
  flex-direction: column;
  gap: 2px;
  min-height: 104px;
}

.rs-opt-emoji {
  font-size: 2.3rem;
  line-height: 1.1;
}

.rs-opt-word {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}

/* ---------------------------------------------------------
   3. THÁM TỬ MANH MỐI
   --------------------------------------------------------- */
.rs-clue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 540px;
  margin: 0 auto 18px;
}

.rs-clue {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #FFF9E6;
  border: 3px solid #FFE49C;
  border-radius: 18px;
  font-size: 1.02rem;
  font-weight: 600;
  color: #4A3B10;
  line-height: 1.4;
  text-align: left;
  transition: all 0.2s ease;
}

.rs-clue-no {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFC94D;
  color: #4A3B10;
  border-radius: 50%;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 0.95rem;
}

.rs-clue-text {
  flex: 1 1 auto;
  min-width: 0;
}

.rs-clue-hl {
  background: #FFF0C2;
  border-color: #FF9F1C;
  box-shadow: 0 0 0 4px rgba(255, 159, 28, 0.25);
  transform: scale(1.02);
}

/* Manh mối bằng hình cho bé 3-4 tuổi */
.rs-clue-pic {
  justify-content: center;
}

.rs-clue-pic-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rs-clue-pic-em {
  font-size: 2.6rem;
  line-height: 1;
}

.rs-clue-pic-name {
  font-family: var(--font-display, sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
}

.rs-clue-pic-heart {
  font-size: 1.5rem;
}

/* Hàng các bạn nhỏ */
.rs-kid-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 16px;
  padding: 14px 10px;
  background: #EFFBF5;
  border: 4px solid #CCF2E2;
  border-radius: 26px;
}

.rs-kid {
  flex: 0 0 auto;
  width: 98px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rs-seat {
  font-size: 0.74rem;
  font-weight: 800;
  color: #1C8F69;
  background: #D6F7E8;
  border-radius: 10px;
  padding: 2px 8px;
}

.rs-kid-face {
  font-size: 2.3rem;
  line-height: 1.1;
}

.rs-kid-name {
  font-family: var(--font-display, sans-serif);
  font-size: 1rem;
  font-weight: 800;
  color: #2D3748;
}

.rs-slot {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 3px dashed #9AD9BE;
  border-radius: 18px;
  font-family: var(--font-display, sans-serif);
  font-size: 1.7rem;
  font-weight: 800;
  color: #6FB89C;
  cursor: pointer;
  box-shadow: 0 4px 0 #BEEBD8;
  transition: all 0.15s ease;
}

.rs-slot:hover {
  transform: translateY(-3px);
  border-color: #38D39F;
}

.rs-slot:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #BEEBD8;
}

.rs-slot-filled {
  border-style: solid;
  border-color: #38D39F;
  background: #F4FFFA;
}

.rs-slot-em {
  font-size: 2.1rem;
  line-height: 1;
}

.rs-slot-sel {
  border-color: #FF9F1C;
  background: #FFF6E6;
  box-shadow: 0 0 0 4px rgba(255, 159, 28, 0.25);
}

.rs-slot-bad {
  border-color: #F56565 !important;
  background: #FFF0F0 !important;
}

.rs-slot-ok {
  border-color: #2F855A !important;
  background: #DEF7EC !important;
}

/* Khay đồ để bé chọn */
.rs-tray-label {
  margin-top: 0;
  margin-bottom: 10px;
}

.rs-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.rs-item-btn {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 8px;
  background: #FFFFFF;
  border: 3px solid #CBD5E0;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 5px 0 #A0AEC0;
  transition: all 0.15s ease;
}

.rs-item-btn:hover {
  transform: translateY(-4px);
  border-color: #3AA8F7;
  box-shadow: 0 9px 0 #3AA8F7;
}

.rs-item-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #A0AEC0;
}

.rs-item-em {
  font-size: 2.2rem;
  line-height: 1.1;
}

.rs-item-word {
  font-family: var(--font-body, sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: #2D3748;
  text-align: center;
  line-height: 1.2;
}

.rs-item-sel {
  border-color: #FF9F1C;
  background: #FFF6E6;
  box-shadow: 0 5px 0 #E08A00, 0 0 0 4px rgba(255, 159, 28, 0.25);
  transform: translateY(-3px);
}

.rs-item-placed {
  opacity: 0.4;
}

/* Hàng nút hành động */
.rs-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.rs-btn {
  min-height: 48px;
  padding: 12px 20px;
  border: none;
  border-radius: 18px;
  font-family: var(--font-display, sans-serif);
  font-size: 1.02rem;
  font-weight: 800;
  color: #FFFFFF;
  background: #9D65FF;
  cursor: pointer;
  box-shadow: 0 5px 0 #6A35C4;
  transition: all 0.15s ease;
}

.rs-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #6A35C4;
}

.rs-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #6A35C4;
}

.rs-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.rs-btn-check {
  background: #38D39F;
  box-shadow: 0 5px 0 #1C8F69;
}

.rs-btn-check:hover:not(:disabled) {
  box-shadow: 0 8px 0 #1C8F69;
}

.rs-btn-check:active:not(:disabled) {
  box-shadow: 0 2px 0 #1C8F69;
}

.rs-btn-hint {
  background: #FF9F1C;
  box-shadow: 0 5px 0 #C06B00;
}

.rs-btn-hint:hover:not(:disabled) {
  box-shadow: 0 8px 0 #C06B00;
}

.rs-btn-hint:active:not(:disabled) {
  box-shadow: 0 2px 0 #C06B00;
}

.rs-btn-reset {
  background: #90A4C0;
  box-shadow: 0 5px 0 #5E7794;
}

.rs-btn-reset:hover:not(:disabled) {
  box-shadow: 0 8px 0 #5E7794;
}

.rs-btn-reset:active:not(:disabled) {
  box-shadow: 0 2px 0 #5E7794;
}

.rs-btn-next {
  margin-top: 12px;
  background: #3AA8F7;
  box-shadow: 0 5px 0 #1C6FAE;
}

.rs-btn-next:hover:not(:disabled) {
  box-shadow: 0 8px 0 #1C6FAE;
}

/* ---------------------------------------------------------
   4. PHẢN HỒI & HIỆU ỨNG
   --------------------------------------------------------- */
.rs-feedback.rs-info {
  background: #E8F4FF;
  color: #0B4A6F;
  border: 2px solid #A9D8F7;
}

.rs-feedback small {
  font-weight: 600;
  opacity: 0.85;
}

.rs-shake {
  animation: rsShake 0.5s ease;
}

@keyframes rsShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* ---------------------------------------------------------
   5. MÁY TÍNH BẢNG & ĐIỆN THOẠI
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .rs-cell {
    width: 88px;
    height: 88px;
  }

  .rs-cols-2 .rs-cell {
    width: 104px;
    height: 104px;
  }
}

@media (max-width: 640px) {
  .rs-matrix-grid {
    gap: 7px;
    padding: 9px;
    border-radius: 22px;
  }

  .rs-cell {
    width: 76px;
    height: 76px;
    border-radius: 16px;
  }

  .rs-cols-2 .rs-cell {
    width: 100px;
    height: 100px;
  }

  .rs-qmark {
    font-size: 2.2rem;
  }

  .rs-opt {
    min-height: 82px;
    padding: 6px;
  }

  .rs-ana-board {
    padding: 12px 8px;
    border-radius: 22px;
  }

  .rs-ana-row {
    gap: 5px;
  }

  .rs-ana-link {
    font-size: 1.2rem;
  }

  .rs-tile {
    min-height: 82px;
    padding: 8px 4px;
    border-radius: 18px;
  }

  .rs-tile-emoji {
    font-size: 2rem;
  }

  .rs-tile-word {
    font-size: 0.76rem;
  }

  .rs-ana-opt {
    min-height: 92px;
  }

  .rs-opt-emoji {
    font-size: 2rem;
  }

  .rs-opt-word {
    font-size: 0.82rem;
  }

  .rs-clue {
    font-size: 0.95rem;
    padding: 9px 11px;
    gap: 8px;
    border-radius: 15px;
  }

  .rs-clue-no {
    width: 25px;
    height: 25px;
    font-size: 0.86rem;
  }

  .rs-clue-pic-em {
    font-size: 2.2rem;
  }

  .rs-kid-row {
    gap: 7px;
    padding: 10px 7px;
    border-radius: 20px;
  }

  .rs-kid {
    width: 78px;
  }

  /* 4 bạn phải nằm trên MỘT hàng: manh mối "ngồi bên trái" chỉ đúng khi thứ tự ghế thẳng hàng */
  .rs-kids-4 {
    flex-wrap: nowrap;
    gap: 5px;
    padding: 10px 5px;
  }

  .rs-kids-4 .rs-kid {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .rs-kids-4 .rs-seat {
    font-size: 0.64rem;
    padding: 2px 5px;
  }

  .rs-kids-4 .rs-kid-face {
    font-size: 1.6rem;
  }

  .rs-kids-4 .rs-kid-name {
    font-size: 0.78rem;
  }

  .rs-kids-4 .rs-slot {
    min-height: 50px;
    font-size: 1.2rem;
  }

  .rs-kids-4 .rs-slot-em {
    font-size: 1.5rem;
  }

  .rs-kid-face {
    font-size: 1.9rem;
  }

  .rs-kid-name {
    font-size: 0.88rem;
  }

  .rs-slot {
    min-height: 54px;
    font-size: 1.4rem;
    border-radius: 15px;
  }

  .rs-slot-em {
    font-size: 1.8rem;
  }

  .rs-tray {
    gap: 8px;
  }

  .rs-item-btn {
    min-width: 78px;
    min-height: 82px;
    padding: 8px 5px;
    border-radius: 17px;
  }

  .rs-item-em {
    font-size: 1.9rem;
  }

  .rs-item-word {
    font-size: 0.74rem;
  }

  .rs-actions {
    gap: 8px;
  }

  .rs-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 10px;
    font-size: 0.94rem;
    white-space: nowrap;
  }

  .rs-btn-next {
    flex: 0 0 auto;
  }
}

/* Máy rất hẹp (360px): 4 bạn vẫn nằm gọn trên 2 hàng, không tràn ngang */
@media (max-width: 380px) {
  .rs-kid {
    width: 72px;
  }

  .rs-item-btn {
    min-width: 72px;
  }

  .rs-cell {
    width: 70px;
    height: 70px;
  }

  .rs-cols-2 .rs-cell {
    width: 92px;
    height: 92px;
  }
}

/* iPad trở lên: chữ và hình thoáng hơn */
@media (min-width: 769px) {
  .rs-clue {
    font-size: 1.1rem;
  }

  .rs-tile-word {
    font-size: 0.95rem;
  }

  .rs-opt-word {
    font-size: 1rem;
  }
}