/* ============================================================
   Tiệm Tarot — Design System "Mộng Mơ Tím Hồng"
   Vintage tarot × pastel kawaii. Nền kem trùng tông artwork lá bài;
   tím/hồng chỉ làm khung & nút, không đè lên vùng hiển thị bài.
   ============================================================ */

:root {
  /* màu */
  --bg: #fff8f0;
  --bg-soft: #fdedf3;
  --surface: #fffdf9;
  --primary: #a78bc9;
  --primary-deep: #7c5da6;
  --primary-soft: #ede4f7;
  --pink: #f7b8cd;
  --pink-soft: #fbe3ec;
  --mint: #bde8d9;
  --mint-deep: #2e7d64;
  --butter: #ffe3a3;
  --butter-deep: #8a6a1f;
  --ink: #4a3f5c;
  --ink-soft: #8b7fa0;
  --line: #eaddf2;
  --gold: #c9a86b; /* khung vintage quanh vùng bài, lấy từ artwork */
  --gold-soft: #e8d9bc;

  /* chữ */
  --font-head: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Quicksand', system-ui, sans-serif;

  /* nhịp */
  --radius: 20px;
  --radius-lg: 28px;
  --radius-sm: 12px;
  --shadow: 0 8px 24px rgba(167, 139, 201, 0.18);
  --shadow-soft: 0 4px 14px rgba(167, 139, 201, 0.12);
  --container: 1080px;
  --card-ratio: 293 / 512;

  /* con trỏ dấu chân mèo — dùng biến để mọi nơi cùng một nguồn, tránh chỗ nào đó
     khai báo cursor:pointer rồi vô tình đè mất. Hotspot 10 6 = giữa hai ngón trên. */
  --cursor-paw: image-set(url('/assets/cursors/paw.png') 1x, url('/assets/cursors/paw@2x.png') 2x) 10 6,
    url('/assets/cursors/paw.png') 10 6, auto;
  --cursor-paw-pointer: image-set(url('/assets/cursors/paw-pointer.png') 1x, url('/assets/cursors/paw-pointer@2x.png') 2x)
      10 6,
    url('/assets/cursors/paw-pointer.png') 10 6, pointer;
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

/* ---------- con trỏ dấu chân mèo ----------
   Hotspot 10 6 nằm giữa hai ngón trên cùng — điểm mà người dùng cảm giác là
   "đang trỏ vào". Luôn kèm từ khoá dự phòng (auto/pointer/text) phòng khi ảnh
   không tải được hoặc trình duyệt từ chối con trỏ tuỳ chỉnh. */
body {
  cursor: var(--cursor-paw);
}
a,
button,
summary,
label,
[role='button'],
input[type='checkbox'],
input[type='radio'],
input[type='submit'],
select {
  cursor: var(--cursor-paw-pointer);
}
/* Ô nhập chữ giữ con trỏ chuẩn: dấu chân che mất vị trí chèn text, gõ rất khó chịu */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='date'],
input[type='datetime-local'],
textarea {
  cursor: text;
}
:disabled,
[aria-disabled='true'] {
  cursor: not-allowed;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--bg);
  /* hoạ tiết sao · trăng · dấu chân mèo (Gemini render, đã tách nền) trên giấy kem */
  background-image: url('/assets/generated/bg-pattern.png');
  background-size: 440px;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--primary-deep);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 4px;
}
button {
  font-family: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  font-weight: 800;
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}
h3 {
  font-size: 1.2rem;
}
p {
  margin: 0 0 1em;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--ink);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  z-index: 100;
}
.skip-link:focus {
  left: 8px;
}

/* ---------- trời sao trang trí (rất nhạt, không lấn nội dung) ---------- */
.sky-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  color: var(--primary);
}
.sky-decor .star,
.sky-decor .moon {
  position: absolute;
  opacity: 0.18;
  font-size: 18px;
  animation: twinkle 4s ease-in-out infinite;
}
.sky-decor .moon {
  font-size: 34px;
  top: 10%;
  right: 6%;
  opacity: 0.15;
  animation-duration: 7s;
}
.sky-decor .s1 { top: 16%; left: 5%; }
.sky-decor .s2 { top: 32%; right: 12%; animation-delay: 1.2s; }
.sky-decor .s3 { top: 62%; left: 9%; animation-delay: 2.1s; font-size: 13px; }
.sky-decor .s4 { top: 48%; left: 46%; animation-delay: 0.6s; font-size: 22px; }
.sky-decor .s5 { top: 78%; right: 8%; animation-delay: 1.7s; font-size: 14px; }
.sky-decor .s6 { top: 8%; left: 38%; animation-delay: 2.8s; font-size: 20px; }
@keyframes twinkle {
  0%, 100% { opacity: 0.1; transform: scale(0.9); }
  50% { opacity: 0.3; transform: scale(1.05); }
}

main {
  position: relative;
  z-index: 1;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 248, 240, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0;
}
.logo:hover {
  text-decoration: none;
}
.logo-mark {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 6px rgba(167, 139, 201, 0.35));
  transition: transform 0.25s ease;
}
.logo:hover .logo-mark {
  transform: rotate(-8deg) scale(1.06);
}
.site-footer .logo-mark {
  width: 44px;
  height: 44px;
}
.logo-text em {
  font-style: normal;
  color: var(--primary-deep);
}
.site-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-weight: 600;
}
.site-nav a:hover {
  color: var(--primary-deep);
  background: var(--primary-soft);
  text-decoration: none;
}
.site-nav a.active {
  color: var(--primary-deep);
  background: var(--primary-soft);
}
/* khối tài khoản trên header */
.header-account {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-user {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px 5px 6px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
}
.header-user:hover {
  text-decoration: none;
  box-shadow: inset 0 0 0 2px var(--primary);
}
.header-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--primary-soft);
}
.header-avatar-fallback {
  display: grid;
  place-items: center;
  color: var(--primary-deep);
}
/* ảnh thật đè lên icon dự phòng; ảnh 404 tự gỡ mình và để lộ icon bên dưới */
.header-user {
  position: relative;
}
.header-avatar-img {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}
.header-user-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.header-user-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
}
.header-user-balance {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary-deep);
}
.header-admin {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--butter);
  color: var(--butter-deep);
}
.header-admin:hover {
  text-decoration: none;
  filter: brightness(0.96);
}
.header-login {
  font-weight: 600;
  color: var(--ink-soft);
  padding: 8px 12px;
  border-radius: 999px;
}
.header-login:hover {
  color: var(--primary-deep);
  background: var(--primary-soft);
  text-decoration: none;
}

/* nút trông như link (đăng xuất trong footer) */
.link-button {
  border: 0;
  background: none;
  padding: 0;
  cursor: var(--cursor-paw-pointer);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--primary-deep);
}
.link-button:hover {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 4px;
}
.footer-logout {
  margin: 0;
}

@media (max-width: 860px) {
  .header-user-balance { display: none; }
}
@media (max-width: 720px) {
  .header-cta { display: none; }
  .header-inner { gap: 10px; }
  .site-nav a { padding: 8px 10px; font-size: 0.92rem; }
  .site-nav a .icon { display: none; }
  .header-user-text { display: none; }
  .header-user { padding: 5px; }
}

/* Máy hẹp: logo + 3 mục nav + khối tài khoản không đủ chỗ trên một hàng, nhồi
   vào là chữ xuống dòng lởm chởm. Cho nav thành hàng riêng bên dưới, căn giữa. */
@media (max-width: 560px) {
  .header-inner {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 10px;
    padding-top: 8px;
    padding-bottom: 6px;
  }
  .logo {
    font-size: 1.15rem;
  }
  .logo-mark {
    width: 32px;
    height: 32px;
  }
  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: center;
    gap: 2px;
    border-top: 1px solid var(--line);
    padding-top: 4px;
  }
  .site-nav a {
    padding: 6px 12px;
    font-size: 0.88rem;
  }
  .header-login {
    padding: 6px 10px;
    font-size: 0.92rem;
  }
}

/* ---------- nút kẹo ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: var(--cursor-paw-pointer);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 13px 28px;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none !important;
}
.btn:active {
  transform: translateY(1px) scale(0.98);
}
.btn-primary {
  background: var(--primary-deep);
  color: #fff;
  box-shadow: 0 6px 18px rgba(124, 93, 166, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}
.btn-primary:hover {
  background: #6d4f96;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(124, 93, 166, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}
.btn-secondary {
  background: var(--pink-soft);
  color: #a04c6e;
  box-shadow: inset 0 0 0 2px var(--pink);
}
.btn-secondary:hover {
  background: var(--pink);
  color: #7d3253;
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: var(--primary-deep);
  box-shadow: inset 0 0 0 2px var(--line);
}
.btn-ghost:hover {
  background: var(--primary-soft);
}
.btn-lg {
  font-size: 1.15rem;
  padding: 16px 36px;
}
.btn-sm {
  font-size: 0.92rem;
  padding: 9px 18px;
}
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* ---------- khung & thẻ ---------- */
.frame-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 28px;
}
.frame-vintage {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--gold-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.frame-vintage::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--gold-soft);
  border-radius: calc(var(--radius) - 7px);
  pointer-events: none;
}

/* hoa văn ngăn cách */
.ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold);
  margin: 34px 0;
  font-size: 0.95rem;
}
.ornament::before,
.ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to var(--dir, right), transparent, var(--gold-soft));
}
.ornament::before { --dir: right; }
.ornament::after { --dir: left; }

/* nhãn nhỏ đầu section */
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-deep);
  background: var(--primary-soft);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ---------- icon SVG (Lucide) ---------- */
.icon {
  display: inline-block;
  vertical-align: -0.18em;
  flex: none;
  color: currentColor;
  /* Phải khai lại NÉT VẼ ở đây, không dựa vào thuộc tính trên thẻ <svg> gốc của
     sprite.svg: <use href="file.svg#id"> chỉ nhân bản đúng cái <symbol>, mọi
     thuộc tính trình bày đặt ở phần tử cha trong file ngoài đều không theo sang.
     Thiếu dòng này thì icon Lucide (vốn chỉ có nét, không có mảng đặc) rơi về
     mặc định SVG là fill đen — nên trước đó cả site hiện icon thành khối đen
     đặc và không ăn màu theo token (SPEC §9.3 yêu cầu bám currentColor). */
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-lg {
  width: 28px;
  height: 28px;
}
.btn .icon {
  vertical-align: -0.2em;
}
/* icon tròn trong khung tròn — dùng cho các bước hướng dẫn, trạng thái */
.icon-badge {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-deep);
}
.icon-badge .icon {
  width: 26px;
  height: 26px;
  vertical-align: 0;
}
.icon-badge-pink {
  background: var(--pink-soft);
  color: #a04c6e;
}
.icon-badge-mint {
  background: var(--mint);
  color: var(--mint-deep);
}
.icon-badge-butter {
  background: var(--butter);
  color: var(--butter-deep);
}

/* ---------- khuyến mại & đếm ngược ---------- */
.sale-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, var(--butter) 0%, var(--pink-soft) 100%);
  box-shadow: inset 0 0 0 1px rgba(201, 168, 107, 0.35);
}
.sale-banner-badge {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--primary-deep);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.sale-banner-body {
  min-width: 0;
}
.sale-banner-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.sale-banner-time {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--butter-deep);
}
.sale-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--primary-deep);
}
.sale-countdown.is-ended {
  color: var(--ink-soft);
  font-weight: 600;
}
.price-strike {
  opacity: 0.55;
  font-weight: 600;
}
.section-sale-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--butter);
  color: var(--butter-deep);
  font-weight: 600;
  font-size: 0.94rem;
}
/* Cùng lý do với .premium-note: câu có <strong> chen giữa, dùng flex là mỗi đoạn
   chữ thành một item rồi ngắt dòng lung tung. Để chảy như văn bản thường. */
.premium-save {
  margin: 10px 0 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--mint-deep);
  font-weight: 600;
}
.premium-save .icon {
  color: var(--pink);
  vertical-align: -3px;
  margin-right: 6px;
}
@media (max-width: 520px) {
  .sale-banner {
    gap: 10px;
    padding: 10px 12px;
  }
  .sale-banner-title {
    font-size: 0.95rem;
  }
}

/* ---------- chip từ khoá ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
}
.chip {
  font-size: 0.86rem;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--mint-deep);
}
.chip:nth-child(2n) {
  background: var(--pink-soft);
  color: #a04c6e;
}
.chip:nth-child(3n) {
  background: var(--butter);
  color: var(--butter-deep);
}

/* ---------- lá bài tarot ---------- */
.tarot-card {
  position: relative;
  aspect-ratio: var(--card-ratio);
  border-radius: var(--radius-sm);
  perspective: 900px;
}
.tarot-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.tarot-card.flipped .tarot-card-inner {
  transform: rotateY(180deg);
}
.tarot-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--gold-soft);
  box-shadow: var(--shadow-soft);
  background: var(--surface);
}
.tarot-card-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tarot-card-back {
  /* mặt lưng tạm bằng CSS — thay bằng card-back.png khi có asset */
  background: linear-gradient(150deg, #b9a3d6 0%, #a78bc9 45%, #8d6fb3 100%);
  display: grid;
  place-items: center;
}
.tarot-card-back::after {
  content: '☾ ✦ ☾';
  font-size: 1.3rem;
  color: rgba(255, 248, 240, 0.9);
  letter-spacing: 0.4em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
.tarot-card-back.has-asset {
  background: none;
}
.tarot-card-back.has-asset::after {
  content: none;
}
.tarot-card-front {
  transform: rotateY(180deg);
}
.tarot-card-front.reversed img {
  transform: rotate(180deg);
}

/* badge xuôi / ngược */
.orientation-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--mint-deep);
}
.orientation-badge.reversed {
  background: var(--butter);
  color: var(--butter-deep);
}

/* ---------- form ---------- */
.input,
textarea.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  resize: vertical;
}
.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(167, 139, 201, 0.18);
}
.input::placeholder {
  color: var(--ink-soft);
  opacity: 0.75;
}
label {
  font-weight: 600;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- prose (markdown luận giải premium) ---------- */
.prose {
  font-size: 1.04rem;
}
.prose h3 {
  font-size: 1.25rem;
  margin: 1.6em 0 0.5em;
  color: var(--primary-deep);
}
.prose h3:first-child {
  margin-top: 0;
}
.prose ul {
  padding-left: 1.3em;
}
.prose li {
  margin-bottom: 0.5em;
}
.prose li::marker {
  color: var(--primary);
}
.prose strong {
  color: var(--primary-deep);
}
.prose blockquote {
  margin: 1em 0;
  padding: 10px 18px;
  border-left: 4px solid var(--pink);
  background: var(--pink-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---------- footer ---------- */
.site-footer {
  margin-top: 90px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1.2fr;
  gap: 36px;
  padding: 48px 20px 40px;
}
.footer-tagline {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-top: 10px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-weight: 600;
  align-items: flex-start;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-note {
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.footer-copy {
  margin-top: 12px;
  font-weight: 600;
}
.mascot-toggle {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--primary-deep);
  border-radius: 999px;
  padding: 5px 9px;
  cursor: var(--cursor-paw-pointer);
  margin-left: 8px;
  transition: transform 0.15s ease;
  vertical-align: -0.35em;
}
.mascot-toggle:hover {
  transform: scale(1.12);
}
.mascot-toggle[aria-pressed='false'] {
  filter: grayscale(1);
  opacity: 0.6;
}
@media (max-width: 820px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ---------- mascot đi dạo ---------- */
.mascot {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 60;
  width: 96px;
  height: 96px;
  pointer-events: none; /* chỉ .mascot-hit nhận click */
  will-change: transform;
}
.mascot-hit {
  position: absolute;
  inset: 10% 12%;
  pointer-events: auto;
  cursor: var(--cursor-paw-pointer);
  background: transparent;
  border: 0;
  border-radius: 50%;
}
.mascot-sprite {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: auto 100%;
  image-rendering: -webkit-optimize-contrast;
}
.mascot.facing-left .mascot-sprite {
  transform: scaleX(-1);
}
.mascot-dust {
  position: absolute;
  bottom: 8px;
  left: -14px;
  width: 26px;
  height: 18px;
  opacity: 0;
}
.mascot.fleeing .mascot-dust {
  opacity: 1;
  animation: dust 0.35s linear infinite;
}
@keyframes dust {
  0% { transform: translateX(0) scale(0.7); opacity: 0.7; }
  100% { transform: translateX(-16px) scale(1.2); opacity: 0; }
}
.mascot-dust::before,
.mascot-dust::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(139, 127, 160, 0.35);
}
.mascot-dust::before {
  width: 10px;
  height: 10px;
  left: 0;
  bottom: 0;
}
.mascot-dust::after {
  width: 7px;
  height: 7px;
  right: 2px;
  bottom: 6px;
}

/* ---------- tiện ích ---------- */
.text-center { text-align: center; }
.text-soft { color: var(--ink-soft); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.section {
  padding: 64px 0;
}
.section-tight {
  padding: 40px 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* toast copy link */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 80;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* spinner mèo chờ */
.paw-spinner {
  display: inline-block;
  font-size: 1.6rem;
  animation: pawspin 1.1s ease-in-out infinite;
}
@keyframes pawspin {
  0%, 100% { transform: rotate(-14deg) scale(1); }
  50% { transform: rotate(14deg) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}