/**
 * Theory Rewards UI — P5 "Vương Quốc Cờ".
 * 1) Thẻ lễ (huy hiệu mới / mở rương / khoe hình dán) — overlay giữa màn.
 * 2) Trang "Hồ sơ của em" (.ckpp) — ví cấp độ, lưới huy hiệu, album hình dán.
 * Motion: transform/opacity only; prefers-reduced-motion → tĩnh hoàn toàn.
 */

/* ------------------------------------------------------------- thẻ lễ */

.ckrw-overlay {
  position: fixed;
  inset: 0;
  z-index: 10060; /* trên .ckhud-levelup không bao giờ chồng (queue chờ), nhưng trên toast thường */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  animation: ckrwFade 0.22s ease-out;
  padding: 16px;
}

.ckrw-overlay.ckrw-out {
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

.ckrw-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 26px 30px 22px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.3);
  animation: ckrwPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ckrw-emoji {
  font-size: 58px;
  line-height: 1.1;
  margin-bottom: 8px;
}

.ckrw-badge .ckrw-emoji {
  animation: ckrwBounce 0.7s ease-out;
}

.ckrw-chest {
  animation: ckrwShake 0.9s ease-in-out infinite;
}

.ckrw-reveal-emoji {
  animation: ckrwBounce 0.7s ease-out;
}

.ckrw-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #f59e0b;
  margin-bottom: 4px;
}

.ckrw-title {
  font-size: 20px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 6px;
}

.ckrw-sub {
  font-size: 14px;
  color: #475569;
  margin-bottom: 14px;
}

.ckrw-btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  padding: 11px 26px;
  min-height: 48px; /* touch target trẻ em */
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.35);
}

.ckrw-btn:hover { filter: brightness(1.06); }
.ckrw-btn:disabled { opacity: 0.6; cursor: default; }

.ckrw-later {
  display: block;
  margin: 10px auto 0;
  border: 0;
  background: none;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  min-height: 40px;
}

@keyframes ckrwFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ckrwPop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes ckrwBounce {
  0% { transform: scale(0.4); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes ckrwShake {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-7deg); }
  40% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(3deg); }
}

/* --------------------------------------------------- trang Hồ sơ của em */

.ckpp {
  max-width: 860px;
  margin: 0 auto;
  padding: 18px 14px 40px;
  font-family: 'Inter', sans-serif;
  color: #1e293b;
}

.ckpp-hero {
  background: linear-gradient(135deg, #eef2ff 0%, #fef3c7 100%);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.ckpp-ring {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
}

.ckpp-ring svg { transform: rotate(-90deg); }

.ckpp-ring-piece {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
}

.ckpp-hero-main { flex: 1 1 240px; min-width: 0; }

.ckpp-level {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 2px;
}

.ckpp-xpline {
  font-size: 13px;
  color: #475569;
  margin-bottom: 8px;
}

.ckpp-bar {
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  max-width: 340px;
}

.ckpp-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.ckpp-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.ckpp-stat {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.ckpp-stat b { color: #1e293b; font-size: 15px; }

.ckpp-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 16px;
}

.ckpp-section h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ckpp-count {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 2px 10px;
}

/* rương chưa mở */
.ckpp-chests {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ckpp-chest {
  border: 2px dashed #fbbf24;
  background: #fffbeb;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.ckpp-chest-emoji { font-size: 34px; }

.ckpp-chest-src {
  font-size: 12px;
  color: #92400e;
  font-weight: 600;
}

.ckpp-chest .ckrw-btn {
  font-size: 13px;
  padding: 8px 16px;
  min-height: 44px;
}

.ckpp-empty {
  font-size: 13px;
  color: #64748b;
}

/* lưới huy hiệu */
.ckpp-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

.ckpp-badge {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
  background: #f8fafc;
}

.ckpp-badge-emoji { font-size: 32px; line-height: 1.2; }

.ckpp-badge-title {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-top: 6px;
}

.ckpp-badge.is-earned {
  background: linear-gradient(180deg, #fffbeb, #fef3c7);
  border-color: #fcd34d;
}

.ckpp-badge.is-locked .ckpp-badge-emoji {
  filter: grayscale(1);
  opacity: 0.45;
}

.ckpp-badge.is-locked .ckpp-badge-title { color: #94a3b8; }

/* album hình dán */
.ckpp-stickers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.ckpp-sticker {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px 6px;
  text-align: center;
  background: #f8fafc;
}

.ckpp-sticker-emoji { font-size: 34px; }

.ckpp-sticker-title {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  margin-top: 4px;
}

.ckpp-sticker-rarity {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-top: 2px;
  color: #64748b;
}

.ckpp-sticker.rarity-rare.is-owned { border-color: #a855f7; background: #faf5ff; }
.ckpp-sticker.rarity-rare.is-owned .ckpp-sticker-rarity { color: #9333ea; }
.ckpp-sticker.rarity-legendary.is-owned { border-color: #f59e0b; background: #fffbeb; }
.ckpp-sticker.rarity-legendary.is-owned .ckpp-sticker-rarity { color: #d97706; }

.ckpp-sticker.is-missing .ckpp-sticker-emoji {
  filter: grayscale(1);
  opacity: 0.3;
}

.ckpp-sticker.is-missing .ckpp-sticker-title { color: #cbd5e1; }

.ckpp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #3b82f6;
  text-decoration: none;
  margin-bottom: 12px;
  min-height: 40px;
}

.ckpp-back:hover { text-decoration: underline; }

/* ------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .ckrw-overlay,
  .ckrw-card,
  .ckrw-badge .ckrw-emoji,
  .ckrw-chest,
  .ckrw-reveal-emoji {
    animation: none !important;
  }
}

.ckrw-reduced .ckrw-card,
.ckrw-reduced .ckrw-emoji,
.ckrw-reduced .ckrw-chest {
  animation: none !important;
}

/* ---- P9 "Lớn rồi!" — công tắc chế độ bé lớn trên Hồ sơ của em ---- */
.ckpp-agemode-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.ckpp-agemode-row input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: #8b5cf6;
  flex: 0 0 auto;
}
.ckpp-agemode-text b { display: block; font-size: 14px; color: #1e293b; }
.ckpp-agemode-text small { display: block; font-size: 12px; color: #64748b; margin-top: 2px; line-height: 1.5; }