/* Widget trồng lúa trang chủ ("Knowledge Rice Field") – phong cách Cozy Oriental / Đông Hồ */
/* Không khung, không viền: widget đặt thẳng trên nền giấy điệp */
.portal-rice-card {
  padding: 4px 2px 0;
  user-select: none;
}

.rice-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 2px dashed #E6B422;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.rice-card-header h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  color: #1B4D3E; /* Xanh lá đậm điền viên */
}

.water-status-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  background: #E0F2FE;
  color: #0284C7;
  padding: 2px 9px;
  border-radius: 14px;
  border: 1px solid #0284C7;
  font-weight: 700;
  font-size: 0.75rem;
  white-space: nowrap;
}

.water-status-badge img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.rice-display-area {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* Ảnh giai đoạn lúa đặt thẳng trên thẻ, không khung viền */
.rice-stage-frame {
  width: 100px;
  height: 124px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.rice-stage-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 3px 3px rgba(91, 58, 33, 0.18));
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rice-stage-frame img.bounce {
  transform: scale(1.12) rotate(3deg);
}

.rice-stage-info {
  flex: 1;
  min-width: 0;
}

.stage-step-tag {
  font-size: 0.65rem;
  font-weight: 700;
  color: #C83228;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.rice-stage-info h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  line-height: 1.25;
  color: #1A1A1A;
}

.rice-stage-info p {
  margin: 0;
  font-size: 0.76rem;
  color: #666;
  line-height: 1.4;
}

.rice-progress-container {
  margin-bottom: 12px;
}

.rice-progress-bar {
  height: 14px;
  background: #6B3F1D;
  border: 2px solid #4A2A12;
  border-radius: 999px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  margin-bottom: 6px;
}

.rice-progress-fill {
  height: 100%;
  width: 10%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0 35%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(90deg, #FFD54F, #F5B30F);
  transition: width 0.4s ease-in-out;
}

.rice-stage-dots {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
}

.rice-stage-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #CBD5E1;
  transition: background 0.3s, transform 0.3s;
}

.rice-stage-dots span.active {
  background: #E6B422;
  transform: scale(1.3);
}

.rice-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* Tiến độ hôm nay: thời gian học và số bài quiz đạt 100% */
.rice-today {
  font-size: 0.76rem;
  font-weight: 700;
  color: #5B4632;
  background: #FFF6E3;
  border: 1.5px solid #D8C29A;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.rice-today b {
  color: #1B4D3E;
}

.rice-today.done {
  background: #E7F3E4;
  border-color: #2E7D3E;
}

.rice-today.done::after {
  content: " ✓";
  color: #2E7D3E;
}

.rice-harvest-btn {
  margin-left: auto;
  background: linear-gradient(135deg, #E6B422, #D97706);
  color: #FFFDF7;
  border: 2px solid #1A1A1A;
  border-radius: 999px;
  box-shadow: 0 3px 0 #1A1A1A;
  padding: 4px 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  animation: riceHarvestPulse 1.6s ease-in-out infinite;
}

.rice-harvest-btn[hidden] {
  display: none;
}

/* Cách kiếm nước (thu gọn mặc định) */
.rice-rules {
  margin-top: 10px;
  font-size: 0.76rem;
  color: #5B4632;
}

.rice-rules summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 700;
  color: #1B4D3E;
}

.rice-rules summary img {
  width: 22px;
  height: 20px;
  object-fit: contain;
}

.rice-rules ul {
  margin: 6px 0 0;
  padding-left: 18px;
  line-height: 1.55;
}

.rice-rules b {
  color: #0284C7;
}

/* "+N 💧" bay lên khi lúa vừa nhận thêm nước */
.water-gain {
  position: absolute;
  right: 0;
  bottom: 100%;
  font-size: 0.8rem;
  font-weight: 800;
  color: #0284C7;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.water-gain.show {
  animation: riceWaterGain 2s ease-out;
}

/* ---------- Thẻ chứng nhận Mùa Vàng Bội Thu ---------- */
.harvest-cert-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(26, 26, 26, 0.82);
  backdrop-filter: blur(5px);
}

.harvest-cert-overlay[hidden] {
  display: none;
}

.harvest-cert-card {
  position: relative;
  width: min(760px, 100%);
  margin: auto;
  padding: 14px;
  background: #FFFDF7;
  border: 3px solid #C83228;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  text-align: center;
  animation: certPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.harvest-cert-card canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.cert-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 2px solid #1A1A1A;
  border-radius: 50%;
  background: #FFF6E3;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.cert-name-field {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #5B4632;
}

.cert-name-field input {
  width: 220px;
  max-width: 100%;
  padding: 6px 10px;
  font: inherit;
  font-weight: 700;
  color: #1A1A1A;
  background: #FFFFFF;
  border: 1.5px solid #B08A4A;
  border-radius: 8px;
}

.cert-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.cert-download-btn,
.cert-close-btn {
  padding: 9px 18px;
  font: inherit;
  font-weight: 800;
  color: #FFFDF7;
  border: 2px solid #1A1A1A;
  border-radius: 999px;
  box-shadow: 0 3px 0 #1A1A1A;
  cursor: pointer;
}

.cert-download-btn {
  background: #1B4D3E;
}

.cert-close-btn {
  background: #C83228;
}

.rice-harvest-btn:focus-visible,
.cert-x:focus-visible,
.cert-download-btn:focus-visible,
.cert-close-btn:focus-visible,
.rice-rules summary:focus-visible {
  outline: 3px solid #E6B422;
  outline-offset: 2px;
}

@keyframes certPop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

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

@keyframes riceWaterGain {
  0% { opacity: 0; transform: translateY(6px); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-18px); }
}

@media (prefers-reduced-motion: reduce) {
  .harvest-cert-card,
  .rice-harvest-btn,
  .water-gain.show {
    animation: none;
  }
}