/* ============================================================
   base.css — CHỈ chứa những gì Tailwind không diễn đạt được.
   Kiểu dáng component nằm ở assets/js/ui-classes.js (Tailwind thuần).
   ⚠ KHÔNG viết @apply ở đây: Tailwind Play CDN không đọc @apply
     từ file .css ngoài, nó sẽ im lặng không chạy.
   ============================================================ */

/* --- Nền gốc: đặt sớm để tránh nháy trắng lúc CDN biên dịch --- */
html { background-color: rgb(var(--c-bg)); color-scheme: light; }
html.dark { color-scheme: dark; }
body {
  background-color: rgb(var(--c-bg));
  color: rgb(var(--c-fg));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Vùng an toàn iOS (notch / thanh gesture) ---------------- */
.safe-t { padding-top:    env(safe-area-inset-top, 0px); }
.safe-b { padding-bottom: env(safe-area-inset-bottom, 0px); }
.safe-l { padding-left:   env(safe-area-inset-left, 0px); }
.safe-r { padding-right:  env(safe-area-inset-right, 0px); }
/* Chừa chỗ cho thanh điều hướng dưới + vùng an toàn, tránh che nội dung */
.pb-nav { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }

/* --- Icon sprite --------------------------------------------- */
.icon { width: var(--icon-md); height: var(--icon-md); flex: none;
        fill: none; stroke: currentColor; stroke-width: 1.5;
        stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }

/* --- Chữ ----------------------------------------------------- */
/* Số liệu (điểm, XP, đếm giờ) không được nhảy ngang khi đổi giá trị */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* Tiêu đề ngắn ngắt dòng cân đối — heuristic tiến bộ, tự thoái lui an toàn */
h1, h2, h3, .balance { text-wrap: balance; }
/* URL / mã / nội dung người dùng nhập được phép xuống dòng, KHÔNG dùng
   break-all cho văn xuôi thường vì nó cắt giữa từ tiếng Việt */
.break-token { overflow-wrap: anywhere; }

/* --- Focus: luôn thấy được, không bao giờ gỡ ----------------- */
:focus-visible {
  outline: 2px solid rgb(var(--c-primary));
  outline-offset: 2px;
  border-radius: 4px;
}
/* Chỉ gỡ outline mặc định khi điều hướng bằng chuột, vẫn giữ cho bàn phím */
:focus:not(:focus-visible) { outline: none; }

/* --- Thanh cuộn mảnh ----------------------------------------- */
.scroll-thin { scrollbar-width: thin; scrollbar-color: rgb(var(--c-border-input)) transparent; }
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb {
  background: rgb(var(--c-border-input) / .5); border-radius: 3px;
}
.scroll-thin::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-border-input) / .8); }
/* Rail cuộn ngang: ẩn thanh cuộn nhưng GIỮ khả năng cuộn */
.rail { scrollbar-width: none; -ms-overflow-style: none; }
.rail::-webkit-scrollbar { display: none; }

/* --- Ngăn kéo (drawer) ---------------------------------------
   Khai báo thẳng transform ở đây thay vì ghép .-translate-x-full
   với lg:translate-x-0: trạng thái đóng/mở chỉ nằm ở một chỗ, đọc
   là hiểu ngay, không phải lần theo thứ tự ưu tiên của utility.
   main.js mở bằng style.transform và đóng bằng cách xoá style đó. */
.drawer { transform: translateX(-100%); }
.drawer.is-open { transform: translateX(0); }
@media (min-width: 1024px) { .drawer { transform: none; } }

/* --- Khối đóng/mở (disclosure) -------------------------------
   Mũi tên xoay khai báo thẳng ở đây thay vì group-open:rotate-180:
   biến transform của Tailwind không đổi theo trạng thái [open] một
   cách đáng tin trên bản CDN. */
.disclosure-chevron {
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1);
}
details[open] > summary .disclosure-chevron { transform: rotate(180deg); }
/* Chi cat tran luc dang chay hieu ung, de menu tha xuong ben trong khoi khong bi cat */
[data-disclosure-body][data-animating] { overflow: hidden; }

/* --- Skeleton đang tải --------------------------------------- */
.skeleton { position: relative; overflow: hidden; background: rgb(var(--c-surface-2)); }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(var(--c-fg) / .06), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* --- Giảm chuyển động: tôn trọng tuyệt đối ------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .skeleton::after { animation: none; }
}

/* --- Bảng xếp hạng: hạng 1 viền vàng phát sáng --------------- */
.podium-gold {
  background: linear-gradient(180deg, rgb(var(--c-accent-soft) / .22), rgb(var(--c-surface)) 70%);
  border-color: rgb(var(--c-accent-soft));
  box-shadow: 0 0 0 1px rgb(var(--c-accent-soft)), 0 10px 32px -8px rgb(var(--c-accent-soft) / .7);
}
.medal-gold { animation: medal-glow 2.4s ease-in-out infinite; }
@keyframes medal-glow {
  50% { filter: drop-shadow(0 0 10px rgb(251 191 36 / .85)); transform: translateY(-2px); }
}