/*
 * Sam Kido - 🔢 Phòng Cảm Nhận Số (number-lab.js)
 * Mọi lớp mới đều có tiền tố nb-
 * Nguyên tắc: số thật to, vùng chạm >= 48px, chạy tốt từ 360px đến màn hình lớn.
 */

/* ================= KHUNG CHUNG ================= */
.game-card.nb-card {
  overflow: hidden;
  max-width: 100%;
}

.nb-card .nb-instruction {
  margin-bottom: 16px;
}

.nb-card .nb-question {
  margin: 18px 0 14px;
}

.nb-card .feedback-msg.nb-info {
  background: #E8F7FF;
  color: #075985;
  border: 2px solid #90E0EF;
}

.nb-btn {
  min-height: 52px;
  padding: 10px 22px;
  border-radius: 20px;
  border: 3px solid #CBD5E0;
  background: white;
  color: #2D3748;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 0 #A0AEC0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  touch-action: manipulation;
}

.nb-btn:hover:not(:disabled) { transform: translateY(-2px); }
.nb-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #A0AEC0; }
.nb-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.nb-btn-go {
  background: linear-gradient(180deg, #4ADE80, #22C55E);
  border-color: #16A34A;
  color: white;
  box-shadow: 0 5px 0 #15803D;
}
.nb-btn-go:active:not(:disabled) { box-shadow: 0 2px 0 #15803D; }

.nb-btn-next {
  margin-top: 12px;
  background: linear-gradient(180deg, #60C5FF, var(--primary-blue));
  border-color: #1E88D8;
  color: white;
  box-shadow: 0 5px 0 #1569A8;
}
.nb-btn-next:active:not(:disabled) { box-shadow: 0 2px 0 #1569A8; }

.nb-footer {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.nb-btn-new {
  background: linear-gradient(180deg, #FFE28A, var(--primary-yellow));
  border-color: #E6B800;
  color: #6B4E00;
  box-shadow: 0 5px 0 #C99A00;
}
.nb-btn-new:active:not(:disabled) { box-shadow: 0 2px 0 #C99A00; }

.nb-card .nb-options {
  margin-top: 6px;
}

.nb-card .nb-opt {
  min-height: 62px;
  font-size: 1.9rem;
}

.nb-card .nb-hint {
  margin-top: 14px;
}

/* ================= 1. TIA SỐ KỲ DIỆU ================= */
.nb-target-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #FFFDF0;
  border: 3px dashed #FFD966;
  border-radius: 24px;
  padding: 10px 18px;
  margin: 0 auto 10px;
  max-width: 280px;
}

.nb-target-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: #8A6D00;
  letter-spacing: 0.04em;
}

.nb-target-num {
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--primary-orange);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
}

.nb-line-track {
  position: relative;
  padding: 0 26px;
  margin-top: 6px;
}

.nb-line-plot {
  position: relative;
  height: 152px;
  touch-action: none;
  cursor: pointer;
  outline: none;
}

.nb-line-plot:focus-visible {
  outline: 3px solid var(--primary-blue);
  outline-offset: 4px;
  border-radius: 18px;
}

.nb-line-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 84px;
  height: 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, #BEE3F8, #90CDF4);
  border: 3px solid #4299E1;
  box-sizing: border-box;
}

.nb-tick {
  position: absolute;
  top: 76px;
  width: 4px;
  height: 32px;
  margin-left: -2px;
  border-radius: 2px;
  background: #5BA7E8;
}

.nb-tick-major {
  top: 70px;
  width: 5px;
  height: 44px;
  margin-left: -2.5px;
  background: #2B6CB0;
}

.nb-line-labels {
  position: relative;
  height: 34px;
  margin: 0 26px;
}

.nb-tick-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #2B6CB0;
}

/* Con vật đánh dấu của bé */
.nb-marker {
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transition: left 0.12s ease-out;
}

.nb-marker-hidden { display: none; }

.nb-marker-pet {
  font-size: 2.6rem;
  line-height: 1;
  animation: nbBob 1.4s ease-in-out infinite;
}

.nb-marker-stem {
  width: 5px;
  height: 46px;
  border-radius: 3px;
  background: var(--primary-coral);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.nb-marker-locked .nb-marker-pet { animation: none; }
.nb-marker-locked .nb-marker-stem { background: #718096; }

/* Vị trí đúng được hé lộ sau khi bé chốt - nằm dưới tia số để không che con vật của bé */
.nb-truth {
  position: absolute;
  top: 100px;
  transform: translateX(-50%);
  width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 4;
}

.nb-truth-hidden { display: none; }

.nb-truth-num {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: #1B7F4F;
  background: #DEF7EC;
  border: 2px solid #84E1BC;
  border-radius: 12px;
  padding: 0 8px;
  margin-top: 2px;
}

.nb-truth-stem {
  width: 6px;
  height: 18px;
  border-radius: 3px;
  background: #1B7F4F;
}

.nb-truth-in { animation: nbDropIn 0.6s cubic-bezier(0.22, 1.4, 0.4, 1) both; }

.nb-tapzone {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  text-align: center;
  font-weight: 800;
  font-size: 1rem;
  color: #A0AEC0;
  pointer-events: none;
  animation: nbBob 1.6s ease-in-out infinite;
}

.nb-tapzone-off { display: none; }

.nb-line-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

/* ================= 2. TÁCH GỘP SỐ ================= */
.nb-bond-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #F7FBFF;
  border: 3px solid #D8ECFF;
  border-radius: 26px;
  padding: 16px 10px;
}

.nb-bond-whole,
.nb-bond-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: white;
  border: 3px solid #CBD5E0;
  border-radius: 22px;
  padding: 10px 14px;
  min-width: 96px;
}

.nb-bond-whole {
  border-color: var(--primary-blue);
  box-shadow: 0 5px 0 rgba(58, 168, 247, 0.25);
}

.nb-bond-cap {
  font-size: 0.85rem;
  font-weight: 800;
  color: #4A5568;
  letter-spacing: 0.04em;
}

.nb-bond-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.05;
  color: #2D3748;
}

.nb-bond-num-big { font-size: 3.1rem; color: var(--primary-blue); }

.nb-arrow {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: #3AA8F7;
  line-height: 1;
}

.nb-bond-link {
  display: flex;
  gap: 54px;
  font-size: 1.5rem;
  line-height: 1;
}

.nb-bond-parts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nb-bond-plus {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: #718096;
}

.nb-bond-have { border-color: var(--primary-orange); }

.nb-bond-ask {
  border-color: #A0AEC0;
  border-style: dashed;
  background: #F8FAFC;
}

.nb-bond-ask .nb-bond-num { color: var(--primary-coral); }

.nb-bond-abstract .nb-bond-num { font-size: 2.7rem; }

.nb-bond-visual { margin-top: 4px; }

/* Khung 10 ô */
.nb-frame {
  display: grid;
  grid-template-columns: repeat(var(--nb-cols, 5), 1fr);
  gap: 5px;
  margin: 4px auto;
  width: max-content;
}

.nb-cell {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: white;
  border: 2px solid #CBD5E0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #A0AEC0;
  font-size: 1rem;
}

.nb-cell-on { border-color: rgba(0, 0, 0, 0.12); }
.nb-cell-ask { border-style: dashed; }

/* Chấm tròn */
.nb-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 190px;
}

.nb-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}

.nb-dots-ghost .nb-dot { opacity: 0.55; }
.nb-dots-ask .nb-dot { border: 2px dashed #A0AEC0; box-sizing: border-box; }

.nb-pop-num { animation: nbPop 0.45s cubic-bezier(0.22, 1.4, 0.4, 1) both; }

/* ================= 3. ƯỚC LƯỢNG NHANH ================= */
.nb-est-stage {
  position: relative;
  min-height: 250px;
  background: #FFFDF5;
  border: 3px dashed #FFE066;
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nb-est-ready {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: #8A6D00;
  text-align: center;
  line-height: 1.5;
  animation: nbPop 0.4s ease-out both;
}

.nb-est-ready.nb-est-gone { color: #718096; }

.nb-est-cluster {
  position: absolute;
  inset: 10px;
  animation: nbFlashIn 0.18s ease-out both;
}

.nb-est-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
}

.nb-est-pair {
  position: absolute;
  inset: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.nb-est-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid #FFE066;
  border-radius: 18px;
  overflow: hidden;
}

/* ================= 4. SO SÁNH CHỚP NHOÁNG ================= */
.nb-cmp-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #4A5568;
  font-size: 1rem;
  margin-bottom: 8px;
}

.nb-cmp-top strong { color: var(--primary-blue); font-size: 1.15rem; }

.nb-cmp-bar {
  height: 14px;
  border-radius: 8px;
  background: #EDF2F7;
  border: 2px solid #CBD5E0;
  overflow: hidden;
  box-sizing: border-box;
}

.nb-cmp-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #38D39F, #FFD13B, #FF8A6B);
  transform-origin: left center;
}

.nb-cmp-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 12px;
}

.nb-cmp-side {
  flex: 1 1 0;
  min-width: 0;
  min-height: 160px;
  background: white;
  border: 4px solid #CBD5E0;
  border-radius: 26px;
  box-shadow: 0 6px 0 #A0AEC0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  touch-action: manipulation;
}

.nb-cmp-side:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--primary-blue); }
.nb-cmp-side:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #A0AEC0; }
.nb-cmp-side:disabled { cursor: default; }

.nb-cmp-hit {
  background: #DEF7EC !important;
  border-color: #38D39F !important;
  box-shadow: 0 6px 0 #1B7F4F !important;
}

.nb-cmp-miss {
  background: #FDE8E8 !important;
  border-color: #F56565 !important;
  box-shadow: 0 6px 0 #9B1C1C !important;
}

.nb-cmp-num {
  font-family: var(--font-display);
  font-size: 4.2rem;
  font-weight: 800;
  line-height: 1;
  color: #2D3748;
}

.nb-cmp-expr { font-size: 2.5rem; white-space: nowrap; }

.nb-cmp-wait {
  font-size: 2.2rem;
  opacity: 0.45;
}

.nb-cmp-vs {
  align-self: center;
  font-weight: 800;
  color: #A0AEC0;
  font-size: 0.95rem;
}

.nb-cmp-eqwrap {
  display: flex;
  justify-content: center;
}

.nb-cmp-equal {
  min-width: 190px;
  background: #F7FAFC;
}

/* Chấm kiểu mặt xúc xắc */
.nb-pips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 124px;
  height: 124px;
}

.nb-pip {
  border-radius: 50%;
  background: transparent;
}

.nb-pip-on { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12); }

/* Bánh pizza thể hiện phân số */
.nb-pizza {
  position: relative;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 5px solid #E9A13B;
  background: conic-gradient(#FF9F1C 0 var(--nb-pct), #FFF3DC var(--nb-pct) 100%);
  box-sizing: border-box;
}

.nb-pizza-cut {
  position: absolute;
  left: 50%;
  top: 0;
  width: 3px;
  height: 50%;
  margin-left: -1.5px;
  background: rgba(176, 108, 20, 0.55);
  transform-origin: bottom center;
}

/* ================= HIỆU ỨNG ================= */
@keyframes nbPop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes nbBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes nbDropIn {
  0% { transform: translateX(-50%) translateY(18px) scale(0.6); opacity: 0; }
  60% { transform: translateX(-50%) translateY(-4px) scale(1.1); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

@keyframes nbFlashIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes nbTimerBar {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nb-marker-pet,
  .nb-truth-in,
  .nb-pop-num,
  .nb-est-ready,
  .nb-est-cluster { animation: none !important; }
}

/* ================= MÀN HÌNH NHỎ (<= 480px) ================= */
@media (max-width: 480px) {
  .game-card.nb-card { padding: 16px 12px; border-radius: 24px; }

  .nb-target-num { font-size: 3rem; }

  .nb-line-track { padding: 0 22px; }
  .nb-line-plot { height: 142px; }
  .nb-line-rail { top: 78px; }
  .nb-tick { top: 72px; height: 26px; }
  .nb-tick-major { top: 64px; height: 42px; }
  .nb-line-labels { margin: 0 22px; }
  .nb-tick-label { font-size: 1.25rem; }
  .nb-marker-pet { font-size: 2.2rem; }
  .nb-marker-stem { height: 42px; }
  .nb-truth { top: 94px; }
  .nb-truth-num { font-size: 1.25rem; }

  .nb-bond-num { font-size: 2.1rem; }
  .nb-bond-num-big { font-size: 2.6rem; }
  .nb-bond-whole, .nb-bond-part { min-width: 78px; padding: 8px 10px; }
  .nb-bond-link { gap: 40px; }
  .nb-cell { width: 25px; height: 25px; border-radius: 7px; }
  .nb-dot { width: 20px; height: 20px; }
  .nb-dots { max-width: 150px; }

  .nb-est-stage { min-height: 215px; }

  .nb-cmp-side { min-height: 132px; border-radius: 22px; padding: 6px; }
  .nb-cmp-num { font-size: 3.1rem; }
  .nb-cmp-expr { font-size: 1.8rem; }
  .nb-cmp-wait {
  font-size: 2.2rem;
  opacity: 0.45;
}

.nb-cmp-vs { font-size: 0.8rem; }
  .nb-pips { width: 96px; height: 96px; gap: 6px; }
  .nb-pizza { width: 92px; height: 92px; }
  .nb-cmp-equal { min-width: 0; width: 100%; max-width: 320px; }
  .nb-card .nb-opt { font-size: 1.6rem; min-height: 58px; }
}

@media (max-width: 380px) {
  .nb-cmp-num { font-size: 2.7rem; }
  .nb-cmp-expr { font-size: 1.55rem; }
  .nb-bond-link { gap: 30px; }
  .nb-cell { width: 22px; height: 22px; }
  .nb-tick-label { font-size: 1.1rem; }
}

/* ================= MÀN HÌNH LỚN ================= */
@media (min-width: 900px) {
  .nb-line-plot { height: 176px; }
  .nb-line-rail { top: 100px; }
  .nb-truth { top: 116px; }
  .nb-tick { top: 94px; height: 30px; }
  .nb-tick-major { top: 84px; height: 48px; }
  .nb-marker-stem { height: 58px; }
  .nb-cell { width: 36px; height: 36px; }
  .nb-cmp-side { min-height: 200px; }
  .nb-cmp-num { font-size: 5rem; }
  .nb-cmp-expr { font-size: 3rem; }
}