/* ─────────────────────────────────────────────
   MÕ CỐC CỐC — Brand styling
   Dark wooden temple aesthetic with gold accents
   ───────────────────────────────────────────── */

:root {
  --bg-deep: #0d0907;
  --bg-mid: #1a1410;
  --bg-card: #221a14;
  --wood-light: #a87b54;
  --wood-mid: #7a5235;
  --wood-dark: #3a2515;
  --gold: #d4a857;
  --gold-light: #f0d28e;
  --red-seal: #a01923;
  --cream: #faf6ec;
  --text: #e8d8c0;
  --text-dim: #a89580;
  --text-faint: #6a5840;
  --shadow-glow: 0 0 30px rgba(212, 168, 87, 0.3);
  --bg-glow: #2a1a10;
}

/* ─── Ngũ Hành Theme: Kim (Metal) — silver/white/cool gold ─── */
body[data-element="kim"] {
  --bg-deep: #0a0e14;
  --bg-mid: #161e28;
  --bg-card: #1c2632;
  --gold: #c8d4e0;
  --gold-light: #e8eef6;
  --text: #e0e8f0;
  --text-dim: #94a4b8;
  --bg-glow: #2a3848;
  --shadow-glow: 0 0 30px rgba(200, 212, 224, 0.35);
}
/* ─── Mộc (Wood) — emerald/jade green ─── */
body[data-element="moc"] {
  --bg-deep: #07120c;
  --bg-mid: #0e2018;
  --bg-card: #142e22;
  --gold: #5cd68a;
  --gold-light: #98e8b8;
  --text: #d8eee0;
  --text-dim: #88b89a;
  --bg-glow: #1a3a2a;
  --shadow-glow: 0 0 30px rgba(92, 214, 138, 0.35);
}
/* ─── Thủy (Water) — deep blue/midnight cyan ─── */
body[data-element="thuy"] {
  --bg-deep: #060a14;
  --bg-mid: #0c1828;
  --bg-card: #142440;
  --gold: #5cb8e8;
  --gold-light: #a0d8f0;
  --text: #d4e4f0;
  --text-dim: #7ca0c0;
  --bg-glow: #1c3458;
  --shadow-glow: 0 0 30px rgba(92, 184, 232, 0.4);
}
/* ─── Hỏa (Fire) — crimson/ember red ─── */
body[data-element="hoa"] {
  --bg-deep: #140404;
  --bg-mid: #2a0a08;
  --bg-card: #3a1208;
  --gold: #ff7a4a;
  --gold-light: #ffb088;
  --text: #f4dcc8;
  --text-dim: #c89880;
  --bg-glow: #4a1408;
  --shadow-glow: 0 0 30px rgba(255, 122, 74, 0.4);
}
/* ─── Thổ (Earth) — ochre/warm amber (default-like) ─── */
body[data-element="tho"] {
  --bg-deep: #100a04;
  --bg-mid: #1e1608;
  --bg-card: #2a1e0c;
  --gold: #e8b04a;
  --gold-light: #ffd478;
  --text: #f0e0c0;
  --text-dim: #b09870;
  --bg-glow: #3a2810;
  --shadow-glow: 0 0 30px rgba(232, 176, 74, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  font-family: "Inter", "Be Vietnam Pro", system-ui, sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent iOS pull-to-refresh while tapping mõ */
  overscroll-behavior-y: contain;
}

body {
  background:
    radial-gradient(ellipse at top, var(--bg-glow) 0%, var(--bg-deep) 70%),
    var(--bg-deep);
  min-height: 100vh;
  min-height: 100svh; /* iOS Safari: tránh thanh địa chỉ che nội dung/mõ + layout nhảy */
  position: relative;
}

/* Background: Vietnamese Buddhist temple photo + dark vignette overlay so UI
   stays readable. Photo is webp (≈100KB mobile, ≈330KB desktop). */
.incense-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* center vignette — darker at edges, lighter at middle for mõ focus */
    radial-gradient(ellipse at center, rgba(13, 9, 7, 0.55) 0%, rgba(13, 9, 7, 0.78) 60%, rgba(13, 9, 7, 0.93) 100%),
    /* warm gold + seal-red ambient glows (preserved from old subtle bg) */
    radial-gradient(circle at 20% 80%, rgba(212, 168, 87, 0.10), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(160, 25, 35, 0.06), transparent 55%),
    /* the temple */
    url('/og/bg-temple.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: incense-drift 20s ease-in-out infinite;
  will-change: transform, opacity; /* promote GPU layer → composite thay vì repaint */
}
@media (max-width: 768px) {
  .incense-bg {
    background-image:
      radial-gradient(ellipse at center, rgba(13, 9, 7, 0.62) 0%, rgba(13, 9, 7, 0.82) 55%, rgba(13, 9, 7, 0.94) 100%),
      radial-gradient(circle at 20% 80%, rgba(212, 168, 87, 0.10), transparent 55%),
      radial-gradient(circle at 80% 20%, rgba(160, 25, 35, 0.06), transparent 55%),
      url('/og/bg-temple-mobile.webp');
  }
}
@keyframes incense-drift {
  0%, 100% { opacity: 0.85; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-6px); }
}

/* ─── Hào quang toả quanh đầu đức Phật (trên ảnh nền temple) ───
   Vị trí chỉnh bằng biến --halo-x / --halo-y; mặc định ngay đầu tượng Phật. */
.buddha-halo {
  position: fixed;
  left: var(--halo-x, 50%);
  top: var(--halo-y, 35%);
  width: var(--halo-size, 19vmin);
  height: var(--halo-size, 19vmin);
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  /* Vòng sáng quanh đầu — TÂM TRONG SUỐT để không che mặt Phật */
  background: radial-gradient(circle,
    transparent 0%,
    transparent 36%,
    rgba(255, 240, 180, 0.42) 48%,
    rgba(255, 212, 122, 0.26) 61%,
    rgba(255, 190, 90, 0.09) 74%,
    transparent 83%);
  animation: halo-breathe 5.5s ease-in-out infinite;
  will-change: opacity, transform;
}
/* Tia sáng toả ra (mỏng, quay rất chậm như ánh sáng lung linh) */
.buddha-halo::before {
  content: '';
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  /* Ảnh tia nung sẵn (alpha đã bo vành) quay bằng transform → Safari cache 1 LỚP rồi
     compositor xoay (gần như miễn phí). Thay conic-gradient + mask cũ vốn bắt re-raster
     mỗi khung → nóng/treo trên iPhone 120Hz. Nhìn y hệt, GPU nhẹ hẳn. */
  background: url('/halo-rays.png') center / contain no-repeat;
  animation: halo-rays 120s linear infinite;
  opacity: 0.3;
  will-change: transform;
}
@keyframes halo-breathe {
  0%, 100% { opacity: 0.78; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes halo-rays {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .buddha-halo, .buddha-halo::before { animation: none; }
}
@media (max-width: 768px) {
  .buddha-halo { top: var(--halo-y-m, 38%); width: var(--halo-size-m, 28vmin); height: var(--halo-size-m, 28vmin); }
}

/* ─── Skin aura layer (premium creatures floating + sparkles) ─── */
.skin-aura-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aura-creature {
  position: absolute;
  font-size: 130px;
  opacity: 0;
  will-change: transform, opacity;
  filter: blur(0.3px) drop-shadow(0 0 28px rgba(255, 220, 130, 0.55)) drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  animation-fill-mode: both;
  line-height: 1;
}
.aura-creature.size-large { font-size: 180px; }
.aura-creature.size-small { font-size: 90px; opacity: 0.65; }

/* Inner span for behavior animation (flap/bob/wave) — independent of flight path */
.aura-inner {
  display: inline-block;
  transform-origin: 50% 70%;
  animation-fill-mode: both;
  will-change: transform;
}

/* Wing flap — for flying creatures (phượng, rồng, hạc) */
.aura-inner.flap {
  animation: aura-flap 0.34s ease-in-out infinite alternate;
}
@keyframes aura-flap {
  0%   { transform: scaleY(1) scaleX(1) rotate(-4deg); }
  100% { transform: scaleY(0.8) scaleX(1.08) rotate(4deg); }
}

/* Slower wing flap — for larger gliding creatures (kỳ lân) */
.aura-inner.glide {
  animation: aura-glide 0.55s ease-in-out infinite alternate;
}
@keyframes aura-glide {
  0%   { transform: scaleY(1) rotate(-2deg); }
  100% { transform: scaleY(0.9) rotate(3deg); }
}

/* Stride — for ground creatures (hổ) */
.aura-inner.stride {
  animation: aura-stride 0.5s ease-in-out infinite alternate;
}
@keyframes aura-stride {
  0%   { transform: scaleX(1) translateY(0) rotate(-1deg); }
  100% { transform: scaleX(1.04) translateY(-3px) rotate(2deg); }
}

/* Serpentine body wave — for dragons */
.aura-inner.wave {
  animation: aura-wave 1.2s ease-in-out infinite;
}
@keyframes aura-wave {
  0%, 100% { transform: skewX(-6deg) rotate(-2deg); }
  50%      { transform: skewX(6deg) rotate(2deg); }
}

/* Pulse — for static items (jewel, pagoda, lotus) */
.aura-inner.pulse {
  animation: aura-pulse 2.4s ease-in-out infinite;
}
@keyframes aura-pulse {
  0%, 100% { transform: scale(1) rotate(-3deg); filter: brightness(1); }
  50%      { transform: scale(1.1) rotate(3deg); filter: brightness(1.25); }
}

/* ─── Hắc Long ice dragon — flies left → right ─── */
.dragon-img-wrap {
  display: inline-block;
  position: relative;
  z-index: 2;
}
.dragon-img {
  width: 380px;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 10px 26px rgba(0,0,0,0.55))
    drop-shadow(0 0 32px rgba(120, 200, 255, 0.7))
    drop-shadow(0 0 56px rgba(80, 170, 240, 0.5));
  transform-origin: 60% 60%;
  animation: dragon-glide 0.8s ease-in-out infinite alternate;
  will-change: transform, filter;
}
.aura-creature.size-large .dragon-img { width: 480px; }
.aura-creature.size-small .dragon-img { width: 240px; }
@keyframes dragon-glide {
  0%   { transform: scaleY(1) rotate(-3deg) translateY(0); filter: drop-shadow(0 10px 26px rgba(0,0,0,0.55)) drop-shadow(0 0 32px rgba(120, 200, 255, 0.7)) drop-shadow(0 0 56px rgba(80, 170, 240, 0.5)); }
  100% { transform: scaleY(0.92) rotate(3deg) translateY(-6px); filter: drop-shadow(0 10px 26px rgba(0,0,0,0.55)) drop-shadow(0 0 40px rgba(160, 220, 255, 0.85)) drop-shadow(0 0 70px rgba(100, 190, 250, 0.6)); }
}

/* ─── Phoenix real image with wing-flap illusion ─── */
.phoenix-img-wrap {
  display: inline-block;
  position: relative;
  z-index: 2;
}
.phoenix-img {
  width: 320px;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 8px 24px rgba(0,0,0,0.5))
    drop-shadow(0 0 28px rgba(255, 120, 40, 0.7))
    drop-shadow(0 0 50px rgba(255, 80, 30, 0.45));
  transform-origin: 50% 70%;
  animation: phoenix-flap 0.55s ease-in-out infinite alternate;
  will-change: transform, filter;
}
.aura-creature.size-large .phoenix-img { width: 440px; }
.aura-creature.size-small .phoenix-img { width: 220px; }
@keyframes phoenix-flap {
  0%   { transform: scaleY(1) scaleX(1) rotate(-2deg); filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)) drop-shadow(0 0 28px rgba(255, 120, 40, 0.7)) drop-shadow(0 0 50px rgba(255, 80, 30, 0.45)); }
  100% { transform: scaleY(0.86) scaleX(1.04) rotate(2deg); filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)) drop-shadow(0 0 36px rgba(255, 160, 60, 0.85)) drop-shadow(0 0 60px rgba(255, 100, 40, 0.55)); }
}

/* ─── SVG creatures (with separate part animations) ─── */
.aura-creature {
  --halo-color: rgba(255, 220, 130, 0.4);
  --elem-color: #ffd478;
}
.aura-svg-wrap.has-svg, .aura-creature.has-svg {
  font-size: 0;
}
.aura-svg {
  width: 220px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5)) drop-shadow(0 0 18px var(--elem-color));
  position: relative;
  z-index: 2;
}
.aura-creature.size-large .aura-svg { width: 320px; }
.aura-creature.size-small .aura-svg { width: 150px; }

/* Halo glow behind creature */
.aura-halo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 130%; height: 130%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--halo-color) 0%, transparent 65%);
  filter: blur(12px);
  z-index: 1;
  animation: halo-breathe 3s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes halo-breathe {
  0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

/* Elemental trail container (positioned around creature) */
.aura-trail {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 1;
}
.elem-particle {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  will-change: transform, opacity;
}

/* ─── FIRE (Long, Phụng) — orange→red rising flames ─── */
.elem-particle.elem-fire {
  background: radial-gradient(circle, rgba(255,200,80,1) 0%, rgba(255,90,30,0.85) 40%, rgba(160,20,20,0.4) 70%, transparent 100%);
  animation: elem-fire-rise 2.4s ease-out infinite;
  width: 18px; height: 26px;
  border-radius: 50% 50% 30% 30%;
}
@keyframes elem-fire-rise {
  0%   { transform: translateY(20px) scale(0.4); opacity: 0; }
  20%  { opacity: 0.95; }
  100% { transform: translateY(-60px) scale(1.3); opacity: 0; }
}

/* ─── CLOUD (Kỳ Lân) — soft white puffs drifting ─── */
.elem-particle.elem-cloud {
  background: radial-gradient(circle, rgba(255,248,220,0.95) 0%, rgba(255,232,144,0.5) 50%, transparent 80%);
  animation: elem-cloud-drift 3.5s ease-in-out infinite;
  width: 28px; height: 18px;
  border-radius: 50%;
  filter: blur(4px);
}
@keyframes elem-cloud-drift {
  0%   { transform: translate(0, 10px) scale(0.6); opacity: 0; }
  30%  { opacity: 0.85; }
  100% { transform: translate(40px, -30px) scale(1.4); opacity: 0; }
}

/* ─── ICE (Bạch Hổ) — cyan crystal sparkles ─── */
.elem-particle.elem-ice {
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(168,212,255,0.85) 40%, rgba(100,160,220,0.3) 70%, transparent 100%);
  animation: elem-ice-drift 2.8s ease-out infinite;
  width: 12px; height: 12px;
  filter: blur(1px);
  box-shadow: 0 0 12px rgba(168, 212, 255, 0.7);
}
@keyframes elem-ice-drift {
  0%   { transform: translate(0, -10px) scale(0.4) rotate(0deg); opacity: 0; }
  30%  { opacity: 0.95; }
  100% { transform: translate(-20px, 50px) scale(1) rotate(180deg); opacity: 0; }
}
/* Ice crystal shape via clip-path */
.elem-particle.elem-ice::before,
.elem-particle.elem-ice::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  border-radius: inherit;
  filter: inherit;
}

/* ─── LIGHTNING (Hắc Long, Cửu Trùng) — purple/gold flashes ─── */
.elem-particle.elem-lightning {
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, var(--elem-color) 40%, transparent 75%);
  animation: elem-lightning-flash 1.2s ease-out infinite;
  width: 14px; height: 14px;
  filter: blur(1.5px);
  box-shadow: 0 0 16px var(--elem-color);
}
@keyframes elem-lightning-flash {
  0%, 80%, 100% { opacity: 0; transform: scale(0.4); }
  10%, 12%      { opacity: 1; transform: scale(1.2); }
  20%, 22%      { opacity: 1; transform: scale(0.9); }
  35%           { opacity: 0.4; transform: scale(0.7); }
}

/* ─── LIGHT (Phật Tối Thượng) — golden divine rays ─── */
.elem-particle.elem-light {
  background: radial-gradient(circle, rgba(255,248,216,1) 0%, rgba(255,212,96,0.7) 40%, transparent 80%);
  animation: elem-light-twinkle 2.6s ease-in-out infinite;
  width: 14px; height: 14px;
  filter: blur(0.8px);
  box-shadow: 0 0 18px rgba(255, 212, 96, 0.7);
}
@keyframes elem-light-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  40%      { opacity: 1; transform: scale(1.4) rotate(180deg); }
  60%      { opacity: 0.9; transform: scale(1) rotate(270deg); }
}

/* ─── CRYSTAL (Bạch Ngọc) — sharp blue crystal shards ─── */
.elem-particle.elem-crystal {
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(168,224,255,0.85) 50%, transparent 100%);
  animation: elem-crystal-shimmer 2.2s ease-out infinite;
  width: 10px; height: 16px;
  border-radius: 2px;
  transform: rotate(45deg);
  filter: blur(0.5px);
  box-shadow: 0 0 10px rgba(168, 224, 255, 0.6);
}
@keyframes elem-crystal-shimmer {
  0%   { opacity: 0; transform: rotate(45deg) translateY(0) scale(0.4); }
  40%  { opacity: 1; transform: rotate(135deg) translateY(-15px) scale(1.2); }
  100% { opacity: 0; transform: rotate(225deg) translateY(-40px) scale(0.6); }
}

/* ─── Phụng — flapping wings ─── */
.aura-svg .aura-wing {
  animation: phx-wing 0.34s ease-in-out infinite alternate;
  transform-box: fill-box;
}
.aura-svg .aura-wing-left  { animation-name: phx-wing-left; }
.aura-svg .aura-wing-right { animation-name: phx-wing-right; }
@keyframes phx-wing-left {
  0%   { transform: rotate(20deg) translateY(-4px); }
  100% { transform: rotate(-30deg) translateY(2px); }
}
@keyframes phx-wing-right {
  0%   { transform: rotate(-20deg) translateY(-4px); }
  100% { transform: rotate(30deg) translateY(2px); }
}
.aura-svg .aura-tail {
  animation: phx-tail 1.2s ease-in-out infinite alternate;
  transform-origin: 120px 95px;
  transform-box: fill-box;
}
@keyframes phx-tail {
  0%   { transform: rotate(-2deg); }
  100% { transform: rotate(3deg); }
}

/* ─── Long / Hắc Long — body wave ─── */
.aura-svg .aura-body-wave {
  animation: drag-wave 1.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes drag-wave {
  0%, 100% { transform: skewX(-3deg) scaleY(1); }
  50%      { transform: skewX(3deg) scaleY(1.04); }
}
.aura-svg .aura-head {
  animation: drag-head 2s ease-in-out infinite alternate;
  transform-origin: 34px 80px;
  transform-box: fill-box;
}
@keyframes drag-head {
  0%   { transform: rotate(-4deg) translateY(-2px); }
  100% { transform: rotate(4deg) translateY(2px); }
}

/* ─── Kỳ Lân + Hổ — galloping legs ─── */
.aura-svg .aura-legs .leg {
  transform-box: fill-box;
  transform-origin: top center;
}
.aura-svg .leg-fl { animation: leg-front 0.4s ease-in-out infinite alternate; }
.aura-svg .leg-fr { animation: leg-front 0.4s ease-in-out infinite alternate-reverse; }
.aura-svg .leg-bl { animation: leg-back 0.4s ease-in-out infinite alternate-reverse; }
.aura-svg .leg-br { animation: leg-back 0.4s ease-in-out infinite alternate; }
@keyframes leg-front {
  0%   { transform: rotate(-18deg) translateY(-2px); }
  100% { transform: rotate(20deg) translateY(2px); }
}
@keyframes leg-back {
  0%   { transform: rotate(18deg) translateY(-2px); }
  100% { transform: rotate(-20deg) translateY(2px); }
}
.aura-svg .aura-tail {
  animation: tail-wag 0.5s ease-in-out infinite alternate;
  transform-box: fill-box;
}
@keyframes tail-wag {
  0%   { transform: rotate(-6deg); }
  100% { transform: rotate(8deg); }
}
.aura-svg .aura-mane {
  animation: mane-flow 1.6s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes mane-flow {
  0%   { transform: translateY(-1px) rotate(-1deg); }
  100% { transform: translateY(2px) rotate(1.5deg); }
}

/* 4 distinct flight paths for variety */
@keyframes aura-fly-1 {
  0%   { transform: translate(-15vw, 50vh) rotate(-6deg) scale(0.8); opacity: 0; }
  10%  { opacity: 0.55; }
  50%  { transform: translate(50vw, 25vh) rotate(4deg) scale(1.05); opacity: 0.7; }
  90%  { opacity: 0.4; }
  100% { transform: translate(115vw, 60vh) rotate(-3deg) scale(0.85); opacity: 0; }
}
@keyframes aura-fly-2 {
  0%   { transform: translate(110vw, 70vh) rotate(8deg) scale(0.9); opacity: 0; }
  15%  { opacity: 0.5; }
  50%  { transform: translate(40vw, 35vh) rotate(-3deg) scale(1.0); opacity: 0.65; }
  85%  { opacity: 0.45; }
  100% { transform: translate(-15vw, 80vh) rotate(2deg) scale(0.85); opacity: 0; }
}
@keyframes aura-fly-3 {
  0%   { transform: translate(50vw, 105vh) rotate(-12deg) scale(0.85); opacity: 0; }
  20%  { opacity: 0.6; }
  50%  { transform: translate(70vw, 40vh) rotate(6deg) scale(1.1); opacity: 0.75; }
  100% { transform: translate(20vw, -15vh) rotate(-8deg) scale(0.9); opacity: 0; }
}
@keyframes aura-fly-4 {
  0%   { transform: translate(80vw, -10vh) rotate(15deg) scale(0.9); opacity: 0; }
  20%  { opacity: 0.55; }
  60%  { transform: translate(20vw, 55vh) rotate(-8deg) scale(1.05); opacity: 0.7; }
  100% { transform: translate(60vw, 110vh) rotate(4deg) scale(0.85); opacity: 0; }
}

/* Sparkle dots — twinkle in place */
.aura-sparkle {
  position: absolute;
  width: 6px; height: 6px;
  background: radial-gradient(circle, rgba(255, 232, 144, 0.9) 0%, rgba(255, 200, 100, 0.4) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(0.5px);
  animation: aura-twinkle 3.5s ease-in-out infinite;
  will-change: opacity, transform;
}
.aura-sparkle.large {
  width: 10px; height: 10px;
  background: radial-gradient(circle, rgba(255, 244, 220, 1) 0%, rgba(255, 212, 96, 0.6) 35%, transparent 70%);
}
@keyframes aura-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  40%      { opacity: 0.85; transform: scale(1.2); }
  60%      { opacity: 0.95; transform: scale(1); }
}

/* Drift sparkle — moves in addition to twinkle */
.aura-sparkle.drift { animation: aura-sparkle-drift 18s linear infinite; }
@keyframes aura-sparkle-drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.7; }
  100% { transform: translate(var(--dx, 50px), var(--dy, -200px)); opacity: 0; }
}

/* ─── TOPBAR ─── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 14px 20px;
  /* iOS notch / Dynamic Island — push content below safe-area inset */
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  background: rgba(13, 9, 7, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(212, 168, 87, 0.15);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-mark {
  font-size: 22px;
  color: var(--gold);
}
.brand-name {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 0;
}

/* Prominent, LABELLED toolbar buttons — override base square .icon-btn.
   Scoped to .topbar-actions so modal close (✕) / back buttons stay unchanged. */
.topbar-actions .icon-btn {
  flex-shrink: 0;
  flex-direction: column;
  gap: 3px;
  width: auto;
  height: auto;
  min-width: 60px;
  padding: 7px 9px 6px;
  font-size: 23px;
  line-height: 1;
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.20), rgba(212, 168, 87, 0.06));
  border: 1px solid rgba(212, 168, 87, 0.5);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 235, 180, 0.14);
}
.topbar-actions .icon-btn[data-label]::after {
  content: attr(data-label);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1;
  color: var(--gold-light);
  white-space: nowrap;
}
.topbar-actions .icon-btn:hover,
.topbar-actions .icon-btn:focus-visible {
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.34), rgba(212, 168, 87, 0.14));
  border-color: rgba(212, 168, 87, 0.8);
}

/* Feature/destination buttons — extra emphasis to drive discovery. */
.topbar-actions .icon-btn.ib-feature {
  background: linear-gradient(135deg, rgba(224, 178, 96, 0.62), rgba(190, 142, 60, 0.32));
  border-color: rgba(255, 224, 160, 0.95);
  box-shadow: 0 3px 18px rgba(212, 168, 87, 0.45), inset 0 1px 0 rgba(255, 240, 195, 0.4);
  animation: ibPulse 2.6s ease-in-out infinite;
}
.topbar-actions .icon-btn.ib-feature::after { color: #fff4d0; }
@keyframes ibPulse {
  0%, 100% { box-shadow: 0 3px 16px rgba(212, 168, 87, 0.4), inset 0 1px 0 rgba(255, 235, 180, 0.35); }
  50%      { box-shadow: 0 4px 30px rgba(255, 214, 124, 0.78), inset 0 1px 0 rgba(255, 240, 195, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-actions .icon-btn.ib-feature { animation: none; }
}

/* "Hỷ cúng tác giả" CTA — shown on the Bảng Vàng tab of the leaderboard */
.bxh-donate-btn {
  display: block; width: fit-content; margin: 0 auto 14px;
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  font-family: "Cormorant Garamond", "Noto Serif", serif; font-size: 13px; font-style: italic;
  color: var(--gold, #d4a857); text-decoration: underline; text-underline-offset: 3px;
  opacity: 0.82; transition: opacity .15s ease;
}
.bxh-donate-btn:hover { opacity: 1; }

/* VIP / Cửa hàng — the SINGLE most prominent button on the toolbar:
   solid gold fill, red "VIP" badge, larger, brighter glow. */
.topbar-actions .icon-btn.ib-vip {
  color: #2a160a;
  min-width: 66px;
  background: linear-gradient(135deg, #ffe9a8 0%, #f4cf72 42%, #d9a23e 100%);
  border: 1.5px solid #fff0c4;
  box-shadow:
    0 4px 16px rgba(212, 168, 87, 0.55),
    0 0 0 1px rgba(184, 137, 58, 0.5),
    inset 0 1px 2px rgba(255, 252, 235, 0.9),
    inset 0 -3px 6px rgba(150, 100, 30, 0.35);
  animation: ibVipPulse 2.2s ease-in-out infinite;
  overflow: visible;
  z-index: 1;
}
.topbar-actions .icon-btn.ib-vip::after {            /* label */
  color: #3a1e08;
  font-weight: 700;
}
.topbar-actions .icon-btn.ib-vip::before {           /* "VIP" badge */
  content: "VIP";
  position: absolute;
  top: -7px; right: -7px;
  background: linear-gradient(135deg, #c0202e, #8a121d);
  color: #fff3d0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 6px;
  border: 1px solid rgba(255, 224, 168, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.topbar-actions .icon-btn.ib-vip:hover,
.topbar-actions .icon-btn.ib-vip:focus-visible {
  background: linear-gradient(135deg, #fff0be 0%, #f8d77e 42%, #e0ad48 100%);
  border-color: #fff;
}
@keyframes ibVipPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(212,168,87,0.50), 0 0 0 1px rgba(184,137,58,0.5), inset 0 1px 2px rgba(255,252,235,0.9), inset 0 -3px 6px rgba(150,100,30,0.35); }
  50%      { box-shadow: 0 4px 26px rgba(255,214,128,0.85), 0 0 0 1px rgba(244,208,142,0.7), inset 0 1px 2px rgba(255,252,235,1.0), inset 0 -3px 6px rgba(150,100,30,0.30); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-actions .icon-btn.ib-vip { animation: none; }
}

/* Mobile: let the toolbar drop to a full-width row that WRAPS — every button
   visible at once instead of hidden behind a horizontal scroll. */
@media (max-width: 600px) {
  .topbar { padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); row-gap: 8px; }
  .topbar-actions { flex-basis: 100%; justify-content: center; gap: 6px; }
  .topbar-actions .icon-btn { min-width: 52px; font-size: 21px; padding: 6px 7px 5px; }
  .topbar-actions .icon-btn[data-label]::after { font-size: 9.5px; }
}
@media (max-width: 380px) {
  .topbar-actions { gap: 5px; }
  .topbar-actions .icon-btn { min-width: 46px; font-size: 19px; padding: 5px 5px 4px; }
  .topbar-actions .icon-btn[data-label]::after { font-size: 9px; letter-spacing: 0; }
}

.icon-btn {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.08), rgba(212, 168, 87, 0.02));
  border: 1px solid rgba(212, 168, 87, 0.25);
  border-radius: 14px;
  color: var(--gold-light);
  font-size: 26px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 235, 180, 0.08);
  position: relative;
}
.icon-btn:hover, .icon-btn:focus-visible {
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.22), rgba(212, 168, 87, 0.08));
  color: var(--gold);
  border-color: rgba(212, 168, 87, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(212, 168, 87, 0.25);
}
.icon-btn:active { transform: translateY(0); }
@media (max-width: 480px) {
  .icon-btn { width: 46px; height: 46px; font-size: 24px; border-radius: 12px; }
  .topbar-actions { gap: 6px; }
}
@media (max-width: 380px) {
  .icon-btn { width: 42px; height: 42px; font-size: 22px; }
  .topbar-actions { gap: 4px; }
}

/* ─── GAME LAYOUT ─── */
.game {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: calc(100vh - 60px);
  min-height: calc(100svh - 60px); /* iOS: dùng small-viewport để mõ không lọt dưới thanh công cụ */
}

/* ─── RANK CARD ─── */
.rank-card {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-mid));
  border: 1px solid rgba(212, 168, 87, 0.2);
  border-radius: 16px;
  padding: 16px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ── Live community presence bar ── */
.live-bar {
  margin: 8px 0 10px;
  background: linear-gradient(145deg, rgba(212, 168, 87, 0.08), rgba(40, 28, 16, 0.35));
  border: 1px solid rgba(212, 168, 87, 0.20);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.live-stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.live-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}
.live-stat-num {
  font-weight: 700;
  color: var(--gold-light);
  font-family: "Inter", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
.live-stat-lbl {
  color: var(--text-dim);
  font-size: 12px;
}
.live-stat-icon { width: 17px; height: 17px; border-radius: 5px; object-fit: cover; vertical-align: -3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.live-online .live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
/* Activity ticker — horizontal scrolling community feed */
.live-ticker-wrap {
  position: relative;
  height: 22px;
  overflow: hidden;
  border-top: 1px dashed rgba(212, 168, 87, 0.18);
  padding-top: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.live-ticker {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: ticker-scroll 60s linear infinite;
  font-size: 12px;
  color: var(--text-dim);
}
.live-ticker .ticker-item {
  flex-shrink: 0;
  padding: 0 12px;
}
.live-ticker .ticker-item strong {
  color: var(--gold-light);
  font-weight: 600;
}
.live-ticker .ticker-sep {
  color: rgba(212, 168, 87, 0.4);
  flex-shrink: 0;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.live-bar:hover .live-ticker { animation-play-state: paused; }

@media (max-width: 480px) {
  .live-bar { padding: 8px 12px; gap: 6px; }
  .live-stat { font-size: 12px; gap: 5px; }
  .live-stat-num { font-size: 14px; }
  .live-stat-lbl { font-size: 11px; }
  .live-stats { gap: 8px; }
  .live-ticker { font-size: 11.5px; animation-duration: 70s; }
  .live-ticker-wrap { height: 20px; }
}
.rank-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 87, 0.04), transparent);
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer { 50% { opacity: 0.5; } }

.rank-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.rank-name {
  font-family: "Noto Serif", serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 12px;
  letter-spacing: 1px;
  text-shadow: 0 0 15px rgba(212, 168, 87, 0.4);
}
.rank-progress {
  height: 6px;
  background: rgba(212, 168, 87, 0.1);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.rank-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 999px;
  transition: width 0.5s ease;
  box-shadow: 0 0 8px rgba(212, 168, 87, 0.5);
}
.rank-progress-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-faint);
}

/* ─── COUNTER ─── */
.counter {
  text-align: center;
  padding: 8px 0;
}
.counter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.counter-value {
  font-family: "Noto Serif", serif;
  font-size: clamp(38px, 9vw, 64px);
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.05;
  text-shadow: 0 0 24px rgba(212, 168, 87, 0.55), 0 2px 0 rgba(40,20,8,0.4);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  word-break: break-all;
  padding: 0 8px;
}
.counter-rate {
  font-size: 15px;
  color: var(--gold-light);
  opacity: 0.85;
  margin-top: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.counter-value.pulse {
  animation: counter-pulse 0.2s ease;
}
@keyframes counter-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ─── MO BUTTON ─── */
.mo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  position: relative;
  /* Push mõ + counter down so the mõ sits at Buddha's feet level
     instead of overlapping the torso. Responsive to viewport height. */
  margin-top: clamp(140px, 26vh, 280px);
}

.dui-wrap {
  position: absolute;
  top: 0;
  right: 8%;
  width: 70px;
  height: 200px;
  z-index: 3;
  pointer-events: none;
  transform: rotate(-25deg) translateY(0);
  transform-origin: 50% 95%;
  transition: transform 0.08s ease-out;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.dui-svg {
  width: 100%;
  height: 100%;
}

.dui-wrap.striking {
  animation: dui-strike 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dui-strike {
  0%   { transform: rotate(-25deg) translateY(0); }
  40%  { transform: rotate(20deg) translate(-12px, 30px); }
  60%  { transform: rotate(15deg) translate(-8px, 24px); }
  100% { transform: rotate(-25deg) translateY(0); }
}

@media (max-width: 380px) {
  .dui-wrap { width: 56px; height: 170px; right: 4%; }
}

.mo {
  position: relative;
  width: 280px;
  height: 280px;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  /* Prevent iOS double-tap zoom + tap delay */
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.mo-area {
  /* Prevent iOS back-swipe / pull-to-refresh interfering with tap */
  touch-action: manipulation;
  overscroll-behavior: contain;
}

.mo-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.6));
  transition: transform 0.06s ease-out;
}

.mo:active .mo-svg {
  transform: scale(0.92);
}

/* ─────────────────────────────────────────────
   MÕ PRIME RINGS — Hỏa Phụng / Thanh Long / Phật
   3-layer rings + 6 orbiting emojis around the mõ
   ───────────────────────────────────────────── */

.mo.mo-fire-ring,
.mo.mo-ice-ring,
.mo.mo-rainbow-ring {
  position: relative;
  overflow: visible;
}

/* Outer rotating element ring */
.mo.mo-fire-ring::before,
.mo.mo-ice-ring::before,
.mo.mo-rainbow-ring::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  z-index: -1;
  filter: blur(4px) saturate(1.2);
  animation: mo-ring-spin 6s linear infinite;
  pointer-events: none;
}
/* Mid dashed ring */
.mo.mo-fire-ring::after,
.mo.mo-ice-ring::after,
.mo.mo-rainbow-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  z-index: -1;
  animation: mo-ring-spin 11s linear infinite reverse;
  pointer-events: none;
}

@keyframes mo-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 🔥 Hỏa Phụng — fire ring */
.mo.mo-fire-ring::before {
  background: conic-gradient(
    from 0deg,
    #ff2020, #ff7020, #ffc040, #fff080, #ffc040, #ff7020, #ff2020,
    #ff5010, #ffaa30, #fff8b0, #ffaa30, #ff5010, #ff2020
  );
  box-shadow: 0 0 60px rgba(255, 120, 40, 0.85), 0 0 120px rgba(255, 80, 30, 0.4);
}
.mo.mo-fire-ring::after {
  border: 3px dashed rgba(255, 220, 120, 0.95);
  box-shadow: 0 0 24px rgba(255, 200, 80, 0.85);
}

/* ❄️ Thanh Long — ice ring */
.mo.mo-ice-ring::before {
  background: conic-gradient(
    from 0deg,
    #50a8e8, #80c8ff, #c8e8ff, #ffffff, #c8e8ff, #80c8ff, #50a8e8,
    #3098d8, #80b8e8, #e0f0ff, #80b8e8, #3098d8, #50a8e8
  );
  box-shadow: 0 0 60px rgba(140, 210, 255, 0.85), 0 0 120px rgba(80, 170, 240, 0.4);
}
.mo.mo-ice-ring::after {
  border: 3px dashed rgba(220, 240, 255, 0.95);
  box-shadow: 0 0 24px rgba(180, 220, 255, 0.85);
}

/* 🌈 Phật Tối Thượng — rainbow ring */
.mo.mo-rainbow-ring::before {
  background: conic-gradient(
    from 0deg,
    #ff3b3b, #ff8a3b, #ffd93b, #3bff7e, #3bb6ff, #5b3bff, #c83bff, #ff3b3b
  );
  box-shadow: 0 0 60px rgba(255, 200, 100, 0.85), 0 0 120px rgba(200, 150, 255, 0.4);
  animation-duration: 9s;
}
.mo.mo-rainbow-ring::after {
  border: 3px dashed rgba(255, 245, 200, 0.95);
  box-shadow: 0 0 24px rgba(255, 240, 180, 0.85);
}

/* ─── 6 orbiting emojis around the mõ ─── */
.mo-orbits {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.mo-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 28px;
  filter: drop-shadow(0 0 10px currentColor);
  will-change: transform;
}
.mo.mo-fire-ring .mo-orbit { color: rgba(255, 200, 80, 0.95); }
.mo.mo-ice-ring .mo-orbit { color: rgba(180, 230, 255, 0.95); }
.mo.mo-rainbow-ring .mo-orbit { color: rgba(255, 230, 180, 0.95); }

/* 6 orbits at different radii + speeds + starting angles */
.mo-orbit-1 { animation: mo-orbit-1 11s linear infinite; }
.mo-orbit-2 { animation: mo-orbit-2 13s linear infinite reverse; font-size: 18px; }
.mo-orbit-3 { animation: mo-orbit-3 12s linear infinite; font-size: 22px; }
.mo-orbit-4 { animation: mo-orbit-4 15s linear infinite reverse; font-size: 16px; }
.mo-orbit-5 { animation: mo-orbit-5 10s linear infinite; font-size: 24px; }
.mo-orbit-6 { animation: mo-orbit-6 16s linear infinite reverse; font-size: 14px; }

@keyframes mo-orbit-1 {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(170px) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateX(170px) rotate(-360deg); }
}
@keyframes mo-orbit-2 {
  from { transform: translate(-50%, -50%) rotate(60deg) translateX(195px) rotate(-60deg); }
  to   { transform: translate(-50%, -50%) rotate(420deg) translateX(195px) rotate(-420deg); }
}
@keyframes mo-orbit-3 {
  from { transform: translate(-50%, -50%) rotate(120deg) translateX(160px) rotate(-120deg); }
  to   { transform: translate(-50%, -50%) rotate(480deg) translateX(160px) rotate(-480deg); }
}
@keyframes mo-orbit-4 {
  from { transform: translate(-50%, -50%) rotate(180deg) translateX(205px) rotate(-180deg); }
  to   { transform: translate(-50%, -50%) rotate(540deg) translateX(205px) rotate(-540deg); }
}
@keyframes mo-orbit-5 {
  from { transform: translate(-50%, -50%) rotate(240deg) translateX(155px) rotate(-240deg); }
  to   { transform: translate(-50%, -50%) rotate(600deg) translateX(155px) rotate(-600deg); }
}
@keyframes mo-orbit-6 {
  from { transform: translate(-50%, -50%) rotate(300deg) translateX(215px) rotate(-300deg); }
  to   { transform: translate(-50%, -50%) rotate(660deg) translateX(215px) rotate(-660deg); }
}

/* Mobile mode — keep visuals but cut GPU cost */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  /* Static rings (no rotation) — saves continuous repaint each frame */
  .mo.mo-fire-ring::before,
  .mo.mo-ice-ring::before,
  .mo.mo-rainbow-ring::before {
    inset: -10px !important;
    filter: blur(1.5px) !important;
    box-shadow: 0 0 20px rgba(255, 200, 100, 0.4) !important;
    animation: none !important;
  }
  .mo.mo-fire-ring::after,
  .mo.mo-ice-ring::after,
  .mo.mo-rainbow-ring::after { display: none; }

  /* Slow orbit speed + làm nhẹ filter drop-shadow (chi phí repaint THẬT trên
     mobile) — vừa chậm vừa rẻ hơn mỗi frame */
  .mo-orbit { animation-duration: 18s !important; filter: drop-shadow(0 0 4px currentColor) !important; }

  /* Lighter mõ shadow */
  .mo-svg { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)) !important; }

  /* Lighter sparkles */
  .aura-sparkle { animation-duration: 5s !important; filter: blur(0.4px) !important; }

  /* Lighter ripple/halo on tap */
  .mo-ripple { border-width: 1.5px !important; }
}

/* Tôn trọng "giảm chuyển động" của hệ điều hành — tắt animation trang trí liên
   tục (đỡ hao pin/CPU, tốt cho người nhạy cảm chuyển động). */
@media (prefers-reduced-motion: reduce) {
  .mo-orbit,
  .mo.mo-fire-ring::before, .mo.mo-ice-ring::before, .mo.mo-rainbow-ring::before,
  .mo.mo-fire-ring::after, .mo.mo-ice-ring::after, .mo.mo-rainbow-ring::after,
  .aura-sparkle, .hint, .buddha-halo, .btn-donate-dev::before { animation: none !important; }
}

/* Idle-pause: khi "treo" (body.idle do game.js bật sau ~7s không tương tác),
   ĐÓNG BĂNG mọi animation trang trí liên tục → GPU ~0 → máy mát. Chạm lại chạy ngay. */
body.idle .incense-bg,
body.idle .buddha-halo,
body.idle .buddha-halo::before,
body.idle .skin-aura-layer,
body.idle .mo-orbit,
body.idle .aura-sparkle,
body.idle .mo.mo-fire-ring::before,
body.idle .mo.mo-ice-ring::before,
body.idle .mo.mo-rainbow-ring::before,
body.idle .mo.mo-fire-ring::after,
body.idle .mo.mo-ice-ring::after,
body.idle .mo.mo-rainbow-ring::after,
body.idle .btn-donate-dev::before { animation-play-state: paused !important; }

/* Thanh "Đi chùa online" trên trang chủ */
.chua-bar {
  display: flex; align-items: center; gap: 14px;
  max-width: 480px; margin: 8px auto 4px; padding: 14px 18px;
  text-decoration: none; border-radius: 16px;
  background: linear-gradient(135deg, rgba(212,168,87,0.18), rgba(160,40,30,0.10));
  border: 1px solid rgba(212,168,87,0.4);
  box-shadow: 0 6px 22px rgba(0,0,0,0.3);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.chua-bar:hover { transform: translateY(-2px); border-color: #ffd87a; box-shadow: 0 10px 28px rgba(0,0,0,0.4), 0 0 18px rgba(212,168,87,0.22); }
.chua-bar-ic { font-size: 32px; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(212,168,87,0.5)); }
.chua-bar-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chua-bar-txt strong { font-family: "Noto Serif", serif; color: #fff4d0; font-size: 17px; }
.chua-bar-txt span { color: #a89580; font-size: 12.5px; line-height: 1.4; }
.chua-bar-arrow { color: #d4a857; font-size: 22px; flex-shrink: 0; }

/* Lightweight rainbow burst — used on mobile when Phật equipped */
.mo-halo-ring.rainbow-mobile {
  inset: 30%;          /* start small, contained */
  border-width: 1.5px;
  filter: none;
  animation: mo-halo-ring-light 0.7s ease-out forwards;
}
@keyframes mo-halo-ring-light {
  0%   { transform: scale(0.4); opacity: 0.95; }
  60%  { opacity: 0.55; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Mobile — smaller orbits */
@media (max-width: 480px) {
  .mo-orbit { font-size: 22px; }
  .mo-orbit-2 { font-size: 14px; }
  .mo-orbit-4 { font-size: 13px; }
  .mo-orbit-6 { font-size: 12px; }
  @keyframes mo-orbit-1 { from { transform: translate(-50%,-50%) rotate(0deg) translateX(140px) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg) translateX(140px) rotate(-360deg); } }
  @keyframes mo-orbit-2 { from { transform: translate(-50%,-50%) rotate(60deg) translateX(160px) rotate(-60deg); } to { transform: translate(-50%,-50%) rotate(420deg) translateX(160px) rotate(-420deg); } }
  @keyframes mo-orbit-3 { from { transform: translate(-50%,-50%) rotate(120deg) translateX(132px) rotate(-120deg); } to { transform: translate(-50%,-50%) rotate(480deg) translateX(132px) rotate(-480deg); } }
  @keyframes mo-orbit-4 { from { transform: translate(-50%,-50%) rotate(180deg) translateX(170px) rotate(-180deg); } to { transform: translate(-50%,-50%) rotate(540deg) translateX(170px) rotate(-540deg); } }
  @keyframes mo-orbit-5 { from { transform: translate(-50%,-50%) rotate(240deg) translateX(128px) rotate(-240deg); } to { transform: translate(-50%,-50%) rotate(600deg) translateX(128px) rotate(-600deg); } }
  @keyframes mo-orbit-6 { from { transform: translate(-50%,-50%) rotate(300deg) translateX(178px) rotate(-300deg); } to { transform: translate(-50%,-50%) rotate(660deg) translateX(178px) rotate(-660deg); } }
}

.mo.struck .mo-svg {
  animation: mo-strike 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mo-strike {
  0% { transform: scale(1); }
  35% { transform: scale(0.92) rotate(-1deg); }
  70% { transform: scale(1.02) rotate(0.5deg); }
  100% { transform: scale(1); }
}

.mo-shadow {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 18px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 70%);
  filter: blur(4px);
  z-index: -1;
}

.mo-ripple-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.mo-ripple {
  position: absolute;
  inset: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: mo-ripple 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes mo-ripple {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ─── Halo light burst on tap ─── */
.mo-halo-ring {
  position: absolute;
  inset: -10%;
  border: 2px solid;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: mo-halo-ring 1s ease-out forwards;
  filter: blur(0.4px);
}
@keyframes mo-halo-ring {
  0%   { transform: scale(0.5); opacity: 0.8; border-width: 3px; }
  60%  { opacity: 0.45; }
  100% { transform: scale(2.4); opacity: 0; border-width: 0.5px; }
}

.mo-halo-flash {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: mo-halo-flash 0.65s ease-out forwards;
  filter: blur(8px);
  mix-blend-mode: screen;
}
@keyframes mo-halo-flash {
  0%   { transform: scale(0.4); opacity: 0; }
  20%  { opacity: 0.85; }
  100% { transform: scale(2.2); opacity: 0; }
}

.mo-halo-beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 80%;
  transform-origin: 50% 100%;
  opacity: 0;
  pointer-events: none;
  animation: mo-halo-beam 0.55s ease-out forwards;
  filter: blur(1px);
  mix-blend-mode: screen;
}
@keyframes mo-halo-beam {
  0%   { transform: translate(-50%, -100%) rotate(var(--angle, 0deg)) scaleY(0.3); opacity: 0; }
  30%  { opacity: 0.9; }
  100% { transform: translate(-50%, -100%) rotate(var(--angle, 0deg)) scaleY(1.4); opacity: 0; }
}

/* ─── 🌈 RAINBOW BURST — Mõ Phật Tối Thượng (siêu vip) ─── */
.mo-halo-ring.rainbow {
  border-width: 3px;
  filter: blur(0.6px);
  animation-name: mo-halo-ring-rainbow;
}
@keyframes mo-halo-ring-rainbow {
  0%   { transform: scale(0.4); opacity: 0.95; border-width: 4px; }
  30%  { transform: scale(1.2) rotate(60deg); opacity: 1; }
  60%  { transform: scale(2.0) rotate(120deg); opacity: 0.6; }
  100% { transform: scale(2.8) rotate(180deg); opacity: 0; border-width: 0.5px; }
}
.mo-halo-flash.rainbow {
  filter: blur(10px);
  animation: mo-halo-flash-rainbow 0.9s ease-out forwards;
}
@keyframes mo-halo-flash-rainbow {
  0%   { transform: scale(0.3) rotate(0deg); opacity: 0; }
  20%  { transform: scale(1.0) rotate(60deg); opacity: 0.9; }
  60%  { transform: scale(1.8) rotate(180deg); opacity: 0.5; }
  100% { transform: scale(2.6) rotate(360deg); opacity: 0; }
}
.mo-rainbow-petal {
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-left: -6px; margin-top: -6px;
  opacity: 0;
  pointer-events: none;
  animation: mo-rainbow-petal 1.2s cubic-bezier(.2,.5,.3,1) forwards;
  filter: blur(0.5px);
}
@keyframes mo-rainbow-petal {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  20%  { opacity: 1; transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) scale(1.4); }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.6); opacity: 0; }
}

.hint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
  animation: hint-fade 2s ease-in-out infinite;
}
.hint.hidden { display: none; }
@keyframes hint-fade {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ─── FLOATING +N TEXT ─── */
.float-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.float-text {
  position: absolute;
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--gold-light);
  text-shadow: 0 0 12px rgba(212, 168, 87, 0.8), 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  animation: float-up 1s ease-out forwards;
  white-space: nowrap;
}
@keyframes float-up {
  0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  20% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); }
  100% { transform: translate(-50%, -100px) scale(1); opacity: 0; }
}

/* ─── STATS ─── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 0;
}

/* ─── Unified "Cảnh giới" panel — replaces old rank-card + stats-strip ─── */
.rank-stats {
  position: relative;
  background: linear-gradient(145deg, var(--bg-card), var(--bg-mid));
  border: 1px solid rgba(212, 168, 87, 0.22);
  border-radius: 16px;
  padding: 18px 20px 14px;
  text-align: center;
  box-shadow:
    0 1px 0 rgba(255, 244, 208, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Counter inside the panel — scaled slightly down vs the old standalone */
.rs-counter { position: relative; }
.rs-counter .counter-value {
  font-family: "Noto Serif", serif;
  font-size: clamp(34px, 7.5vw, 52px);
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.05;
  text-shadow: 0 0 20px rgba(212, 168, 87, 0.5), 0 2px 0 rgba(40, 20, 8, 0.4);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  margin: 4px 0 6px;
}
.rs-counter .counter-rate {
  font-size: 13px;
  color: var(--gold-light);
  opacity: 0.8;
  font-weight: 600;
  letter-spacing: 1px;
}
.rank-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(212, 168, 87, 0.05), transparent);
  pointer-events: none;
  animation: shimmer 4s ease-in-out infinite;
}

.rs-header { position: relative; }
.rs-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--text-faint);
  margin-bottom: 6px;
}

/* Divider — gold hairline with diamond center, temple/altar feel */
.rs-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0 12px;
  height: 12px;
}
.rs-divider::before,
.rs-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  width: calc(50% - 14px);
  background: linear-gradient(90deg, transparent, rgba(212, 168, 87, 0.5), transparent);
}
.rs-divider::before { left: 0; }
.rs-divider::after  { right: 0; }
.rs-diamond {
  position: relative;
  z-index: 1;
  color: var(--gold);
  font-size: 8px;
  letter-spacing: 0;
  opacity: 0.85;
  text-shadow: 0 0 6px rgba(212, 168, 87, 0.45);
}

/* 3-column stats inside the unified panel */
.rs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  position: relative;
}
.rs-stat {
  padding: 6px 4px;
  text-align: center;
  position: relative;
}
.rs-stat + .rs-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(212, 168, 87, 0.18), transparent);
}

.stat {
  background: var(--bg-card);
  border: 1px solid rgba(212, 168, 87, 0.1);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}
.stat-value {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─── CTA ─── */
.cta-share {
  display: flex;
  justify-content: center;
  margin-top: auto;
}

.btn-share {
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(212, 168, 87, 0.3);
  transition: all 0.2s ease;
  font-family: inherit;
}
.btn-share:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(212, 168, 87, 0.5);
}
.btn-share:active {
  transform: translateY(0);
}

/* ─── MODAL ─── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modal-in 0.2s ease;
}
.modal[hidden] { display: none !important; }
/* Payment modal must always sit above other modals */
#modal-auto, .audio-mixer-modal, .share-modal { z-index: 200; }

@keyframes modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
}

.modal-card {
  position: relative;
  background: var(--bg-mid);
  border: 1px solid rgba(212, 168, 87, 0.25);
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), var(--shadow-glow);
  animation: modal-card-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-card-in {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(212, 168, 87, 0.15);
}
.modal-header h2 {
  font-family: "Noto Serif", serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.3px;
  text-shadow: 0 0 18px rgba(212, 168, 87, 0.35);
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(212, 168, 87, 0.15);
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}

/* ─── TABS (thanh dashboard) ─── */
.tabs {
  display: flex;
  gap: 5px;
  padding: 14px 16px 4px;
}
.tab {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 168, 87, 0.12);
  color: var(--text-dim);
  padding: 9px 6px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.tab:hover { color: var(--text); border-color: rgba(212, 168, 87, 0.3); }
.tab.active {
  background: linear-gradient(180deg, rgba(212, 168, 87, 0.24), rgba(212, 168, 87, 0.10));
  border-color: rgba(212, 168, 87, 0.5);
  color: #fff2d4;
  box-shadow: 0 2px 10px rgba(212, 168, 87, 0.2), inset 0 1px 0 rgba(255, 244, 208, 0.15);
}
/* Bảng Vàng = tab VIP NHẤT — vàng kim nổi bật cả khi chưa chọn */
.tab[data-tab="donate"] {
  background: linear-gradient(180deg, rgba(226, 188, 110, 0.20), rgba(184, 137, 58, 0.07));
  border-color: rgba(212, 168, 87, 0.5);
  color: #f3dca2;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 244, 208, 0.12);
}
.tab[data-tab="donate"]:hover { border-color: rgba(212, 168, 87, 0.78); color: #ffeec0; }
.tab[data-tab="donate"].active {
  background: linear-gradient(168deg, #fbe7ab 0%, #ecc878 50%, #dca94f 100%);
  border-color: rgba(150, 110, 55, 0.6);
  color: #3a2410;
  box-shadow: 0 3px 16px rgba(212, 168, 87, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
@media (max-width: 480px) {
  .tabs { gap: 4px; padding: 12px 12px 4px; }
  .tab { font-size: 11.5px; padding: 8px 4px; border-radius: 9px; }
}

/* ─── LEADERBOARD ─── */
.leaderboard-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 20px;
}
.lb-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 4px;
}
.lb-row:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.lb-row.me {
  background: rgba(212, 168, 87, 0.1);
  border: 1px solid rgba(212, 168, 87, 0.3);
}
.lb-rank {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  color: var(--text-dim);
}
.lb-row:nth-child(1) .lb-rank { color: #ffd700; font-size: 20px; text-shadow: 0 0 12px rgba(255, 215, 0, 0.5); }
.lb-row:nth-child(2) .lb-rank { color: #c0c0c0; font-size: 18px; text-shadow: 0 0 10px rgba(192, 192, 192, 0.4); }
.lb-row:nth-child(3) .lb-rank { color: #cd7f32; font-size: 18px; text-shadow: 0 0 10px rgba(205, 127, 50, 0.4); }
/* Bục vinh danh — top 3 nổi bật như podium */
.lb-row:nth-child(1) { background: linear-gradient(90deg, rgba(255, 215, 0, 0.13), rgba(255, 215, 0, 0.02) 60%, transparent); border: 1px solid rgba(255, 215, 0, 0.22); }
.lb-row:nth-child(2) { background: linear-gradient(90deg, rgba(200, 200, 200, 0.10), transparent 60%); border: 1px solid rgba(200, 200, 200, 0.16); }
.lb-row:nth-child(3) { background: linear-gradient(90deg, rgba(205, 127, 50, 0.10), transparent 60%); border: 1px solid rgba(205, 127, 50, 0.16); }

.lb-name { color: var(--text); font-weight: 500; }
.lb-tier { font-size: 11px; color: var(--text-faint); }
.lb-score {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  color: var(--gold-light);
}
/* keyframe giữ lại — tab Bảng Vàng donate (.db-row--new) còn dùng */
@keyframes lbSweep { 0%, 100% { left: -55%; } 55% { left: 130%; } }

/* ─── BẢNG VÀNG (tab tri ân trong modal xếp hạng) — mọi mạnh thường quân là thẻ vàng VIP ─── */
.db-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  margin-bottom: 7px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(212,168,87,0.3);
  background: linear-gradient(135deg, rgba(212,168,87,0.14), rgba(212,168,87,0.04) 60%, rgba(255,215,0,0.07));
  box-shadow: inset 0 0 20px rgba(212,168,87,0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.db-row:hover {
  transform: translateY(-1px);
  border-color: rgba(212,168,87,0.5);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 14px rgba(212,168,87,0.12);
}
.db-icon { font-size: 20px; text-align: center; filter: drop-shadow(0 0 7px rgba(212,168,87,0.65)); }
.db-info { min-width: 0; }
.db-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; }
.db-name-text {
  font-weight: 700;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #e9d6a0; /* fallback nếu không hỗ trợ background-clip:text */
  background: linear-gradient(90deg, #e9d6a0 0%, #d4a857 30%, #fff3cf 50%, #d4a857 70%, #e9d6a0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kbGoldShimmer 6.5s linear infinite;
}
.db-prov { color: var(--gold); font-size: 11px; font-weight: 500; flex-shrink: 0; }
.db-sub { font-size: 10.5px; color: var(--text-dim); font-style: italic; margin-top: 2px; }
/* Người vừa hỷ cúng — sáng hơn + sao lấp lánh + dải vàng quét */
.db-row--new {
  border-color: rgba(255,224,150,0.6);
  background: linear-gradient(135deg, rgba(255,224,150,0.18), rgba(212,168,87,0.06) 60%, rgba(255,215,0,0.10));
  box-shadow: 0 0 20px rgba(255,224,150,0.2), inset 0 0 22px rgba(255,224,150,0.05);
}
.db-row--new .db-icon { animation: kbSparkle 1.9s ease-in-out infinite; }
.db-row--new::before {
  content: '';
  position: absolute; top: -30%; left: -55%;
  width: 42%; height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255,246,205,0.22), transparent);
  transform: skewX(-18deg);
  animation: lbSweep 5.5s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
.db-row--new > * { position: relative; z-index: 1; }
.db-new-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: .3px;
  color: #2a1e0c;
  background: linear-gradient(90deg, #f6e6b4, #d4a857);
  padding: 1px 7px; border-radius: 999px;
  vertical-align: middle;
}
/* ─── 2 KHUNG VIP Bảng Vàng: 👑 Đại Thí Chủ + 🪔 Vừa Thắp Đèn (sang trọng, gọn, chuyên nghiệp) ─── */
.db-top2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 6px 0 13px; }
.db-top2-single { grid-template-columns: 1fr; max-width: 280px; margin-left: auto; margin-right: auto; }
.db-top2-card {
  position: relative; overflow: hidden; text-align: center;
  padding: 14px 11px 12px; border-radius: 15px; min-width: 0;
  border: 1px solid rgba(231,196,120,0.5);
  background:
    radial-gradient(130% 80% at 50% -12%, rgba(255,238,190,0.16), transparent 62%),
    linear-gradient(158deg, #4a371d 0%, #382816 50%, #2a1e10 100%);
  box-shadow: 0 9px 26px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,238,200,0.28);
}
.db-top2-card::after {                 /* viền vàng kim mảnh bên trong (gold-leaf frame) */
  content: ''; position: absolute; inset: 3px; border-radius: 12px;
  border: 1px solid rgba(231,196,120,0.26); pointer-events: none;
}
.db-top2-card > * { position: relative; z-index: 1; }
.db-top2-most {
  border-color: rgba(255,224,150,0.72);
  box-shadow: 0 11px 30px rgba(0,0,0,0.52), 0 0 22px rgba(255,214,130,0.20), inset 0 1px 0 rgba(255,245,210,0.40);
}
.db-top2-most::before {                /* vệt sáng quét chậm, sang trọng */
  content: ''; position: absolute; top: -40%; left: -60%; width: 42%; height: 180%;
  background: linear-gradient(105deg, transparent, rgba(255,248,214,0.16), transparent);
  transform: skewX(-18deg); animation: lbSweep 6.5s ease-in-out infinite; pointer-events: none; z-index: 0;
}
.db-top2-label {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: #2c1f0c; background: linear-gradient(90deg, #ffe9b0, #d8b262);
  padding: 2.5px 12px; border-radius: 999px; margin-bottom: 7px; box-shadow: 0 2px 7px rgba(0,0,0,0.28);
}
.db-top2-recent .db-top2-label { color: #0c2c18; background: linear-gradient(90deg, #c4ead2, #84c79b); }
.db-top2-name {
  font-family: "Cormorant Garamond","Noto Serif",serif;
  font-weight: 700; font-size: 19px; line-height: 1.15; letter-spacing: .2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff3cf;
  background: linear-gradient(90deg, #e7cf95, #d4a857 32%, #fff6d6 50%, #d4a857 68%, #e7cf95);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: kbGoldShimmer 7s linear infinite;
}
.db-top2-recent .db-top2-name { background: none; -webkit-text-fill-color: #eaf7ef; color: #eaf7ef; animation: none; }
.db-top2-prov { font-size: 11px; color: #e7c478; margin-top: 3px; font-style: italic; }
.db-top2-recent .db-top2-prov { color: #9fd9b0; }
@media (prefers-reduced-motion: reduce) {
  .db-name-text, .db-row--new .db-icon, .db-row--new::before, .db-top2-name, .db-top2-most::before { animation: none; }
}
.loading { text-align: center; padding: 40px 20px; color: var(--text-dim); }

.my-rank { text-align: center; color: var(--text-dim); }
.my-rank strong { color: var(--gold); }

/* ─── SKINS ─── */
.skin-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.skin-card {
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.15);
  border-radius: 14px;
  padding: 14px 10px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: visible;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.skin-card:hover {
  border-color: rgba(212, 168, 87, 0.4);
  transform: translateY(-2px);
}
.skin-card.equipped {
  border-color: var(--gold);
  background: rgba(212, 168, 87, 0.1);
}
.skin-card.equipped::after {
  content: "✓ Đang dùng";
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--gold);
  color: var(--bg-deep);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}
.skin-card.locked { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.4); }
.skin-card.exclusive {
  background: linear-gradient(145deg, rgba(255,232,144,0.08), rgba(212,168,87,0.04));
  border-color: rgba(255,232,144,0.4);
  box-shadow: 0 0 24px rgba(255,232,144,0.15);
}
.skin-card.exclusive.locked {
  filter: none;
  opacity: 0.85;
  background: linear-gradient(145deg, rgba(255,232,144,0.08), rgba(80,40,40,0.5));
}
.skin-card.exclusive .skin-preview {
  background: radial-gradient(ellipse at center, rgba(255,232,144,0.18), rgba(0,0,0,0.3));
  box-shadow: inset 0 0 20px rgba(255,232,144,0.15);
}

/* ─── Premium tier visual effects (subtle, dignified, not flashy) ─── */
.skin-card { overflow: hidden; }

/* Premium animated emoji float */
.skin-emoji-anim {
  display: inline-block;
  animation: skin-float 4s ease-in-out infinite;
}
@keyframes skin-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-3px) rotate(1deg); }
}

/* Tier badge — top-right corner */
.skin-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d4a857, #b8893a);
  color: #1a0e07;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.tier-vip .skin-badge {
  background: linear-gradient(135deg, #c8d4f0, #8a9cc8);
  color: #1a1a2a;
}
.tier-supreme .skin-badge {
  background: linear-gradient(135deg, #fff8d8, #ffd460);
  color: #4a2c10;
  box-shadow: 0 2px 8px rgba(255, 212, 96, 0.5);
  animation: badge-pulse 2.4s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(255, 212, 96, 0.5); }
  50%      { box-shadow: 0 2px 14px rgba(255, 212, 96, 0.85); }
}

/* Standard tier — subtle warm border glow */
.tier-standard {
  background: linear-gradient(145deg, rgba(212, 168, 87, 0.06), rgba(212, 168, 87, 0.02));
  border-color: rgba(212, 168, 87, 0.28);
}
.tier-standard:hover { border-color: rgba(212, 168, 87, 0.5); }

/* Premium (100K-200K): soft halo + slow rotating golden ring */
.tier-premium {
  background: linear-gradient(145deg, rgba(212, 168, 87, 0.1), rgba(255, 232, 144, 0.04));
  border: 1.5px solid rgba(212, 168, 87, 0.4);
}
.tier-premium .skin-preview {
  background: radial-gradient(ellipse at center, rgba(255, 232, 144, 0.18), rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 0 18px rgba(255, 232, 144, 0.2), 0 0 14px rgba(212, 168, 87, 0.25);
  position: relative;
}
.tier-premium .skin-preview::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px dashed rgba(255, 232, 144, 0.4);
  border-radius: 14px;
  animation: ring-spin 14s linear infinite;
  pointer-events: none;
}
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* VIP (200K-500K): dual ring + sparkle particles + shimmer sweep */
.tier-vip {
  background: linear-gradient(145deg, rgba(168, 200, 232, 0.08), rgba(212, 168, 87, 0.06));
  border: 1.5px solid rgba(212, 168, 87, 0.55);
  box-shadow: 0 0 24px rgba(212, 168, 87, 0.18);
}
.tier-vip .skin-preview {
  background: radial-gradient(ellipse at center, rgba(255, 232, 144, 0.22), rgba(50, 30, 50, 0.5));
  box-shadow: inset 0 0 22px rgba(255, 232, 144, 0.28), 0 0 18px rgba(212, 168, 87, 0.4);
  position: relative;
  overflow: visible;
}
.tier-vip .skin-preview::before,
.tier-vip .skin-preview::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  pointer-events: none;
}
.tier-vip .skin-preview::before {
  border: 1.5px solid rgba(255, 232, 144, 0.6);
  animation: ring-spin 16s linear infinite;
}
.tier-vip .skin-preview::after {
  inset: -8px;
  border: 1px dashed rgba(212, 168, 87, 0.45);
  animation: ring-spin 24s linear infinite reverse;
}
.tier-vip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 240, 200, 0.18) 50%, transparent 70%);
  animation: card-shimmer 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes card-shimmer {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}

/* Supreme (≥500K + Phật Tối Thượng): full effect — gold halo + breathing glow + falling petals */
.tier-supreme {
  background: linear-gradient(145deg, rgba(255, 240, 200, 0.12), rgba(255, 200, 100, 0.06));
  border: 2px solid rgba(255, 232, 144, 0.7);
  box-shadow: 0 0 32px rgba(255, 212, 96, 0.3), inset 0 0 24px rgba(255, 232, 144, 0.08);
  animation: supreme-breathe 4s ease-in-out infinite;
}
@keyframes supreme-breathe {
  0%, 100% { box-shadow: 0 0 28px rgba(255, 212, 96, 0.28), inset 0 0 20px rgba(255, 232, 144, 0.08); }
  50%      { box-shadow: 0 0 44px rgba(255, 212, 96, 0.5), inset 0 0 28px rgba(255, 232, 144, 0.16); }
}
.tier-supreme .skin-preview {
  background: radial-gradient(ellipse at center, rgba(255, 244, 208, 0.32), rgba(80, 40, 20, 0.6));
  box-shadow: inset 0 0 28px rgba(255, 232, 144, 0.5), 0 0 28px rgba(255, 200, 100, 0.55);
  position: relative;
  overflow: visible;
}
.tier-supreme .skin-preview::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  border: 2px solid rgba(255, 232, 144, 0.7);
  animation: ring-spin 12s linear infinite;
  pointer-events: none;
}
.tier-supreme .skin-preview::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 14px;
  border: 1.5px dashed rgba(255, 200, 100, 0.55);
  animation: ring-spin 22s linear infinite reverse;
  pointer-events: none;
}
.tier-supreme .skin-emoji-anim {
  filter: drop-shadow(0 0 12px rgba(255, 212, 96, 0.7)) drop-shadow(0 4px 8px rgba(80, 40, 10, 0.4));
  animation: supreme-float 4s ease-in-out infinite;
}
@keyframes supreme-float {
  0%, 100% { transform: translateY(0) scale(1) rotate(-2deg); }
  50%      { transform: translateY(-4px) scale(1.05) rotate(2deg); }
}
.tier-supreme::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 2px at 22% 38%, rgba(255, 232, 144, 0.85) 50%, transparent 60%),
    radial-gradient(circle 2px at 78% 28%, rgba(255, 232, 144, 0.7) 50%, transparent 60%),
    radial-gradient(circle 1.5px at 38% 72%, rgba(255, 232, 144, 0.8) 50%, transparent 60%),
    radial-gradient(circle 2px at 88% 78%, rgba(255, 232, 144, 0.7) 50%, transparent 60%),
    radial-gradient(circle 1.5px at 12% 82%, rgba(255, 232, 144, 0.85) 50%, transparent 60%);
  pointer-events: none;
  animation: supreme-sparkle 3s ease-in-out infinite alternate;
}
@keyframes supreme-sparkle {
  0%   { opacity: 0.4; }
  100% { opacity: 1; }
}

/* Equipped tier extras — golden inner ring */
.skin-card.tier-premium.equipped,
.skin-card.tier-vip.equipped,
.skin-card.tier-supreme.equipped {
  border-color: var(--gold);
  background: linear-gradient(145deg, rgba(255, 232, 144, 0.16), rgba(212, 168, 87, 0.08));
}
.skin-preview {
  width: 80px;
  height: 80px;
  margin: 0 auto 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  overflow: hidden;
  position: relative;
}
.skin-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
  animation: preview-float 4s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}
@keyframes preview-float {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.06) translateY(-2px); }
}

/* ─── Element rings around skin preview (fire / ice / rainbow) ─── */
.skin-preview.has-fire-ring,
.skin-preview.has-ice-ring,
.skin-preview.has-rainbow-ring {
  overflow: visible;
  background: rgba(0, 0, 0, 0.5);
}
.skin-preview.has-fire-ring::before,
.skin-preview.has-ice-ring::before,
.skin-preview.has-rainbow-ring::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  z-index: 0;
  animation: ring-spin-fast 6s linear infinite;
  filter: blur(2px);
}
.skin-preview.has-fire-ring::after,
.skin-preview.has-ice-ring::after,
.skin-preview.has-rainbow-ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  z-index: 0;
  animation: ring-spin-slow 12s linear infinite reverse;
}
.skin-preview.has-fire-ring,
.skin-preview.has-ice-ring,
.skin-preview.has-rainbow-ring {
  border-radius: 50%;
}

/* 🔥 Fire ring (Hỏa Phụng) */
.skin-preview.has-fire-ring::before {
  background: conic-gradient(
    from 0deg,
    #ff3030, #ff8030, #ffd040, #ff8030, #ff3030,
    #ff5020, #ffaa30, #fff080, #ffaa30, #ff5020, #ff3030
  );
  box-shadow: 0 0 28px rgba(255, 120, 40, 0.8), inset 0 0 20px rgba(255, 80, 30, 0.6);
}
.skin-preview.has-fire-ring::after {
  border: 2px solid rgba(255, 200, 80, 0.9);
  box-shadow: 0 0 16px rgba(255, 200, 80, 0.7);
}

/* ❄️ Ice ring (Thanh Long) */
.skin-preview.has-ice-ring::before {
  background: conic-gradient(
    from 0deg,
    #80d0ff, #b0e0ff, #ffffff, #b0e0ff, #80d0ff,
    #50a8e8, #80c8ff, #e0f0ff, #80c8ff, #50a8e8, #80d0ff
  );
  box-shadow: 0 0 28px rgba(120, 200, 255, 0.8), inset 0 0 20px rgba(80, 170, 240, 0.6);
}
.skin-preview.has-ice-ring::after {
  border: 2px solid rgba(200, 230, 255, 0.95);
  box-shadow: 0 0 16px rgba(180, 220, 255, 0.8);
}

/* 🌈 Rainbow ring (Phật Tối Thượng) */
.skin-preview.has-rainbow-ring::before {
  background: conic-gradient(
    from 0deg,
    #ff3b3b, #ff8a3b, #ffd93b, #3bff7e, #3bb6ff, #5b3bff, #c83bff, #ff3b3b
  );
  box-shadow: 0 0 32px rgba(255, 200, 100, 0.9), inset 0 0 24px rgba(255, 200, 100, 0.5);
  animation-duration: 8s;
}
.skin-preview.has-rainbow-ring::after {
  border: 2px solid rgba(255, 255, 200, 0.95);
  box-shadow: 0 0 18px rgba(255, 240, 180, 0.85);
}

@keyframes ring-spin-fast {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ring-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Enlarge preview slightly when has ring (for visual breathing room) */
.tier-supreme .skin-preview.has-fire-ring,
.tier-supreme .skin-preview.has-ice-ring,
.tier-supreme .skin-preview.has-rainbow-ring {
  width: 90px; height: 90px;
}

/* ─────────────────────────────────────────────
   PRIME skins — Hỏa Phụng & Thanh Long
   3-layer rings + orbiting particles + breathing card aura
   ───────────────────────────────────────────── */

.skin-card.prime-skin {
  padding-top: 22px;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}

/* Animated fire/ice gradient border on card */
.skin-card.prime-skin {
  border-width: 2px;
}
.skin-card.prime-fire-card {} /* placeholder for variant */

.skin-card.prime-skin[data-skin="phung"] {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 100, 30, 0.18), transparent 70%),
    linear-gradient(165deg, rgba(60, 12, 8, 0.5), rgba(20, 8, 6, 0.95));
  border-color: rgba(255, 130, 60, 0.65);
  box-shadow:
    0 0 32px rgba(255, 100, 30, 0.35),
    inset 0 0 20px rgba(255, 80, 30, 0.12);
  animation: prime-fire-breathe 3.2s ease-in-out infinite;
}
@keyframes prime-fire-breathe {
  0%, 100% { box-shadow: 0 0 28px rgba(255, 100, 30, 0.32), inset 0 0 18px rgba(255, 80, 30, 0.1); }
  50%      { box-shadow: 0 0 48px rgba(255, 130, 50, 0.6), inset 0 0 26px rgba(255, 100, 40, 0.18); }
}

.skin-card.prime-skin[data-skin="haclong"] {
  background:
    radial-gradient(circle at 50% 35%, rgba(120, 200, 255, 0.18), transparent 70%),
    linear-gradient(165deg, rgba(8, 30, 60, 0.55), rgba(6, 18, 32, 0.95));
  border-color: rgba(140, 210, 255, 0.65);
  box-shadow:
    0 0 32px rgba(120, 200, 255, 0.35),
    inset 0 0 20px rgba(80, 170, 240, 0.12);
  animation: prime-ice-breathe 3.6s ease-in-out infinite;
}
@keyframes prime-ice-breathe {
  0%, 100% { box-shadow: 0 0 28px rgba(120, 200, 255, 0.32), inset 0 0 18px rgba(80, 170, 240, 0.1); }
  50%      { box-shadow: 0 0 48px rgba(160, 220, 255, 0.6), inset 0 0 26px rgba(100, 190, 250, 0.2); }
}

/* Bigger preview area */
.skin-card.prime-skin .skin-preview {
  width: 140px !important;
  height: 140px !important;
  margin-bottom: 10px;
  position: relative;
  overflow: visible;
  background: transparent;
}
.skin-card.prime-skin .skin-preview-img {
  border-radius: 50%;
  position: relative;
  z-index: 3;
}
.skin-card.prime-skin[data-skin="phung"] .skin-preview-img {
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6))
          drop-shadow(0 0 22px rgba(255, 130, 50, 0.85))
          drop-shadow(0 0 38px rgba(255, 80, 30, 0.55));
}
.skin-card.prime-skin[data-skin="haclong"] .skin-preview-img {
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.6))
          drop-shadow(0 0 22px rgba(140, 220, 255, 0.85))
          drop-shadow(0 0 38px rgba(80, 170, 240, 0.55));
}

/* 3-layer rings — outer thick element gradient, middle dashed, inner solid */
.skin-card.prime-skin .skin-preview.has-fire-ring::before {
  inset: -10px;
  background: conic-gradient(
    from 0deg,
    #ff2020, #ff7020, #ffc040, #fff080, #ffc040, #ff7020, #ff2020,
    #ff5010, #ffaa30, #fff8b0, #ffaa30, #ff5010, #ff2020
  );
  filter: blur(3px) saturate(1.2);
  box-shadow: 0 0 36px rgba(255, 120, 40, 0.9);
  animation-duration: 5s;
}
.skin-card.prime-skin .skin-preview.has-fire-ring::after {
  inset: -2px;
  border: 2px dashed rgba(255, 220, 120, 0.95);
  box-shadow: 0 0 18px rgba(255, 200, 80, 0.85);
  animation-duration: 9s;
}
.skin-card.prime-skin .skin-preview.has-ice-ring::before {
  inset: -10px;
  background: conic-gradient(
    from 0deg,
    #50a8e8, #80c8ff, #c8e8ff, #ffffff, #c8e8ff, #80c8ff, #50a8e8,
    #3098d8, #80b8e8, #e0f0ff, #80b8e8, #3098d8, #50a8e8
  );
  filter: blur(3px) saturate(1.2);
  box-shadow: 0 0 36px rgba(140, 210, 255, 0.9);
  animation-duration: 6s;
}
.skin-card.prime-skin .skin-preview.has-ice-ring::after {
  inset: -2px;
  border: 2px dashed rgba(220, 240, 255, 0.95);
  box-shadow: 0 0 18px rgba(180, 220, 255, 0.85);
  animation-duration: 10s;
}

/* 4 orbiting decorative emojis (fire sparks / ice crystals) */
.skin-card.prime-skin .skin-preview .orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 22px;
  pointer-events: none;
  filter: drop-shadow(0 0 6px currentColor);
  z-index: 4;
  will-change: transform;
}
.skin-card.prime-skin[data-skin="phung"] .orbit { color: rgba(255, 200, 80, 0.95); }
.skin-card.prime-skin[data-skin="haclong"] .orbit { color: rgba(180, 230, 255, 0.95); }

.skin-card.prime-skin .skin-preview .orbit-1 {
  animation: orbit-1 4.5s linear infinite;
}
.skin-card.prime-skin .skin-preview .orbit-2 {
  animation: orbit-2 6s linear infinite reverse;
  font-size: 14px;
}
.skin-card.prime-skin .skin-preview .orbit-3 {
  animation: orbit-3 5.5s linear infinite;
  font-size: 16px;
}
.skin-card.prime-skin .skin-preview .orbit-4 {
  animation: orbit-4 7s linear infinite reverse;
  font-size: 13px;
}
@keyframes orbit-1 {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(82px) rotate(0deg) scale(1); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateX(82px) rotate(-360deg) scale(1); }
}
@keyframes orbit-2 {
  from { transform: translate(-50%, -50%) rotate(120deg) translateX(95px) rotate(-120deg); }
  to   { transform: translate(-50%, -50%) rotate(480deg) translateX(95px) rotate(-480deg); }
}
@keyframes orbit-3 {
  from { transform: translate(-50%, -50%) rotate(240deg) translateX(78px) rotate(-240deg); }
  to   { transform: translate(-50%, -50%) rotate(600deg) translateX(78px) rotate(-600deg); }
}
@keyframes orbit-4 {
  from { transform: translate(-50%, -50%) rotate(60deg) translateX(105px) rotate(-60deg); }
  to   { transform: translate(-50%, -50%) rotate(420deg) translateX(105px) rotate(-420deg); }
}

/* Skin name with element-color gradient */
.skin-card.prime-skin .skin-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: name-shimmer 3s linear infinite;
}
.skin-card.prime-skin[data-skin="phung"] .skin-name {
  background-image: linear-gradient(90deg, #ffd070, #ff7030, #fff8a0, #ff8030, #ffd070);
  filter: drop-shadow(0 1px 4px rgba(255, 100, 30, 0.6));
}
.skin-card.prime-skin[data-skin="haclong"] .skin-name {
  background-image: linear-gradient(90deg, #c0e8ff, #6098e8, #f0f8ff, #80b8e8, #c0e8ff);
  filter: drop-shadow(0 1px 4px rgba(120, 200, 255, 0.6));
}
@keyframes name-shimmer {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* Price with subtle glow */
.skin-card.prime-skin .skin-price {
  font-weight: 700;
  font-size: 14px;
}
.skin-card.prime-skin[data-skin="phung"] .skin-price { color: #ffb060; text-shadow: 0 0 10px rgba(255, 140, 50, 0.5); }
.skin-card.prime-skin[data-skin="haclong"] .skin-price { color: #98c8ff; text-shadow: 0 0 10px rgba(120, 200, 255, 0.5); }
.skin-name {
  font-family: "Noto Serif", serif;
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
  margin: 4px 0 4px;
  line-height: 1.3;
  display: block;
  width: 100%;
}
.skin-price {
  font-size: 12px;
  color: var(--text-dim);
  display: block;
  width: 100%;
  line-height: 1.3;
}
.skin-price.free { color: #6dbf6d; font-weight: 600; }
.skin-price.locked { color: var(--text-faint); font-weight: 500; }
.skin-price.exclusive { color: #ffd478; font-weight: 600; letter-spacing: 0.5px; }

/* ─── INFO ─── */
.info-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  line-height: 1.7;
}
.info-content h3 {
  font-family: "Noto Serif", serif;
  color: var(--gold);
  margin: 16px 0 8px;
  font-size: 16px;
}
.info-content p, .info-content li { color: var(--text); font-size: 14px; }
.info-content ul, .info-content ol { padding-left: 22px; }
.info-content ul li, .info-content ol li { margin-bottom: 4px; }
.info-tagline {
  text-align: center;
  font-size: 16px !important;
  color: var(--gold-light) !important;
  margin-bottom: 16px;
}
.info-credit {
  text-align: center;
  margin-top: 24px;
  color: var(--text-faint) !important;
  font-size: 12px !important;
}
.info-credit a { color: var(--gold); text-decoration: none; }

.ranks-list {
  list-style: none;
  padding: 0 !important;
  margin: 8px 0;
}
.ranks-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px dashed rgba(212, 168, 87, 0.1);
  font-size: 14px;
}
.ranks-list .rank-name-li {
  font-family: "Noto Serif", serif;
  color: var(--gold);
  font-weight: 600;
}
.ranks-list .rank-cost-li {
  color: var(--text-faint);
  font-family: "JetBrains Mono", monospace;
}
.ranks-list li.unlocked .rank-name-li { color: var(--gold-light); }
.ranks-list li.locked { opacity: 0.4; }

/* ─── STUDIO ─── */
.studio-content {
  flex: 1;
  overflow-y: auto;
}
.studio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.studio-tpl {
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.2);
  border-radius: 12px;
  padding: 14px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  font-family: inherit;
}
.studio-tpl:hover {
  border-color: var(--gold);
  background: rgba(212, 168, 87, 0.08);
  transform: translateY(-1px);
}
.studio-tpl-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.studio-tpl-title {
  font-family: "Noto Serif", serif;
  font-weight: 600;
  color: var(--gold-light);
  font-size: 14px;
}
.studio-tpl-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* ─── FORTUNE MODAL ─── */
.fortune-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  text-align: center;
}
.fortune-locked {
  padding: 40px 20px;
}
.fortune-locked .icon-big {
  font-size: 64px;
  margin-bottom: 12px;
  filter: grayscale(0.7);
}
.fortune-locked h3 {
  font-family: "Noto Serif", serif;
  color: var(--gold);
  margin-bottom: 8px;
}
.fortune-locked .progress {
  margin: 16px auto;
  max-width: 280px;
  height: 8px;
  background: rgba(212, 168, 87, 0.15);
  border-radius: 999px;
  overflow: hidden;
}
.fortune-locked .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 999px;
  transition: width 0.6s ease;
}

.fortune-card {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-mid));
  border: 1.5px solid var(--gold);
  border-radius: 16px;
  padding: 24px 20px;
  margin: 0 auto;
  max-width: 360px;
  position: relative;
  box-shadow: 0 0 40px rgba(212, 168, 87, 0.2);
  animation: fortune-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── RICH FORTUNE CARD ─── */
.fortune-rich {
  text-align: left;
  animation: fortune-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 4px;
}

.fortune-hero {
  text-align: center;
  padding: 24px 16px;
  background: linear-gradient(145deg, rgba(212, 168, 87, 0.1), transparent);
  border: 1.5px solid var(--gold);
  border-radius: 16px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.fortune-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(212, 168, 87, 0.15), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(160, 25, 35, 0.08), transparent 40%);
  pointer-events: none;
}
.fortune-hero .hexagram {
  font-size: 28px;
  color: var(--gold);
  letter-spacing: 4px;
  margin-bottom: 8px;
  opacity: 0.6;
}
.fortune-hero .emoji-large {
  font-size: 64px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 12px rgba(212, 168, 87, 0.4));
}
.fortune-hero .badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(212, 168, 87, 0.18);
  color: var(--gold);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.fortune-title {
  font-family: "Noto Serif", serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--gold-light);
  text-shadow: 0 0 20px rgba(212, 168, 87, 0.5);
  margin: 0 0 8px;
  line-height: 1.2;
}
.fortune-meaning {
  font-style: italic;
  font-size: 14px;
  color: var(--text-dim);
  margin: 0;
}

.fortune-section {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-left: 3px solid var(--gold);
}
.fortune-section.advice {
  border-left-color: #6dbf6d;
  background: rgba(109, 191, 109, 0.05);
}
.fortune-section.avoid {
  border-left-color: var(--seal);
  background: rgba(160, 25, 35, 0.05);
}
.fortune-section .section-icon {
  font-size: 22px;
  margin-bottom: 4px;
}
.fortune-section .section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 6px;
}
.fortune-section.advice .section-label { color: #6dbf6d; }
.fortune-section.avoid .section-label { color: #e8a5a5; }
.fortune-section .section-body {
  color: var(--text);
  line-height: 1.7;
  font-size: 14px;
  margin: 0;
}

.fortune-mantra {
  text-align: center;
  padding: 18px 16px;
  margin: 14px 0;
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.1), rgba(160, 25, 35, 0.05));
  border-radius: 12px;
  border-top: 1px solid rgba(212, 168, 87, 0.3);
  border-bottom: 1px solid rgba(212, 168, 87, 0.3);
  font-family: "Noto Serif", serif;
  font-size: 18px;
  color: var(--gold-light);
  position: relative;
}
.fortune-mantra .quote-mark {
  font-size: 36px;
  color: var(--gold);
  opacity: 0.6;
  font-family: serif;
  margin: 0 4px;
  vertical-align: middle;
}

.fortune-lucky {
  background: rgba(212, 168, 87, 0.08);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
  border: 1px dashed rgba(212, 168, 87, 0.4);
}
.fortune-lucky .lucky-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 12px;
}
.fortune-lucky .lucky-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.fortune-lucky .lucky-item {
  text-align: center;
  padding: 10px 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.fortune-lucky .lucky-icon {
  font-size: 22px;
}
.fortune-lucky .lucky-name {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}
.fortune-lucky .lucky-value {
  font-family: "Noto Serif", serif;
  color: var(--gold-light);
  font-weight: 600;
  font-size: 14px;
  margin-top: 4px;
}

.fortune-footer {
  text-align: center;
  padding: 12px 4px;
  margin-top: 8px;
  border-top: 1px dashed rgba(212, 168, 87, 0.2);
}
.fortune-disclaimer {
  font-size: 11.5px;
  color: #8a7860;
  font-style: italic;
  text-align: center;
  line-height: 1.5;
  margin: 16px 8px 4px;
  padding: 10px 14px;
  border-top: 1px dashed rgba(212, 168, 87, 0.15);
  opacity: 0.85;
}
.fortune-footer p {
  color: var(--gold);
  font-size: 13px;
  margin-bottom: 12px;
}
.btn-share-fortune {
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(212, 168, 87, 0.3);
  transition: all 0.2s ease;
}
.btn-share-fortune:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 168, 87, 0.5);
}

/* Cross-feature CTA: "Gõ mõ X nhịp để..." after fortune draw */
.fortune-knock-cta {
  margin: 16px 0 4px;
  padding: 14px 16px;
  background:
    radial-gradient(ellipse at top, rgba(212, 168, 87, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(40, 28, 16, 0.6), rgba(20, 14, 8, 0.6));
  border: 1px solid rgba(212, 168, 87, 0.42);
  border-radius: 14px;
  text-align: center;
}
.fortune-knock-cta.done {
  background: linear-gradient(180deg, rgba(120, 200, 100, 0.18), rgba(80, 140, 60, 0.10));
  border-color: rgba(120, 200, 100, 0.55);
  padding: 12px 14px;
}
.fortune-knock-cta .knock-cta-head {
  font-family: "Noto Serif", serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.fortune-knock-cta.done .knock-cta-head {
  color: #c8e8a8; margin-bottom: 0;
}
.knock-cta-bar {
  width: 100%; height: 6px;
  background: rgba(212, 168, 87, 0.16);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.knock-cta-fill {
  height: 100%;
  background: #d4a857;
  transition: width 0.4s ease;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(212, 168, 87, 0.45);
}
.knock-cta-progress {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 10px;
  font-family: "Inter", monospace;
  letter-spacing: 0.5px;
}
.btn-fortune-tap {
  width: 100%;
  background: linear-gradient(180deg, rgba(212, 168, 87, 0.22), rgba(180, 130, 50, 0.18));
  color: var(--gold-light);
  border: 1px solid rgba(212, 168, 87, 0.55);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}
.btn-fortune-tap:hover {
  background: linear-gradient(180deg, rgba(212, 168, 87, 0.35), rgba(180, 130, 50, 0.25));
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212, 168, 87, 0.30);
}

/* History button + secondary action */
.btn-fortune-history {
  background: transparent;
  color: var(--gold-light);
  border: 1px solid rgba(212, 168, 87, 0.4);
  border-radius: 10px;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s ease;
}
.btn-fortune-history:hover { background: rgba(212, 168, 87, 0.12); border-color: rgba(212, 168, 87, 0.7); }

/* Streak / total stat pills */
.fortune-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 4px;
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(212, 168, 87, 0.10);
  border: 1px solid rgba(212, 168, 87, 0.30);
  border-radius: 999px;
  font-size: 12px;
  color: var(--gold-light);
  font-weight: 500;
}
.stat-pill > span:first-child { font-size: 14px; }

/* History view */
.fortune-history-view {
  padding: 14px 16px 20px;
}
.hist-back {
  background: transparent;
  color: var(--gold-light);
  border: 1px solid rgba(212, 168, 87, 0.30);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 14px;
  transition: all 0.2s ease;
}
.hist-back:hover { background: rgba(212, 168, 87, 0.12); }
.hist-list {
  display: flex; flex-direction: column;
  gap: 8px;
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 4px;
}
.hist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(212, 168, 87, 0.06);
  border: 1px solid rgba(212, 168, 87, 0.18);
  border-radius: 10px;
}
.hist-emoji { font-size: 24px; flex-shrink: 0; }
.hist-meta { flex: 1; min-width: 0; }
.hist-title {
  font-family: "Noto Serif", serif;
  font-size: 14px;
  color: var(--gold-light);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hist-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
@keyframes fortune-reveal {
  from { transform: scale(0.85) rotateY(20deg); opacity: 0; }
  to { transform: scale(1) rotateY(0); opacity: 1; }
}
.fortune-card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold);
  margin-bottom: 8px;
}
.fortune-card .title {
  font-family: "Noto Serif", serif;
  font-size: 26px;
  color: var(--gold-light);
  margin-bottom: 16px;
}
.fortune-card .body {
  color: var(--text);
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 16px;
}
.fortune-card .category {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(212, 168, 87, 0.15);
  color: var(--gold);
  border-radius: 999px;
  font-size: 12px;
  margin-bottom: 12px;
}
.fortune-action {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-faint);
}
.btn-draw-fortune {
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
  border: none;
  border-radius: 12px;
  padding: 14px 32px;
  font-family: "Noto Serif", serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 16px;
  box-shadow: 0 4px 20px rgba(212, 168, 87, 0.4);
  transition: all 0.2s ease;
}
.btn-draw-fortune:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(212, 168, 87, 0.6); }
.btn-draw-fortune:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── DONATE DEV ─── */
.dev-footer {
  position: relative;
  z-index: 2;
  padding: 28px 16px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.btn-donate-dev {
  background:
    radial-gradient(ellipse at top, rgba(212, 168, 87, 0.10), rgba(212, 168, 87, 0.02) 70%),
    linear-gradient(180deg, rgba(40, 28, 16, 0.32), rgba(20, 14, 8, 0.28));
  border: 1px solid rgba(212, 168, 87, 0.32);
  color: rgba(244, 228, 180, 0.92);
  padding: 13px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-family: "Cormorant Garamond", "Noto Serif", serif;
  font-style: italic;
  letter-spacing: 0.4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.btn-donate-icon {
  font-size: 23px;
  filter: drop-shadow(0 1px 2px rgba(90, 50, 10, 0.45));
}
.btn-donate-text {
  font-style: italic;
  font-size: 16.5px;
  font-weight: 700;
  color: #43290f;
  text-shadow: 0 1px 0 rgba(255, 250, 224, 0.45);
}
.btn-donate-icon, .btn-donate-text { position: relative; z-index: 1; }
.btn-donate-dev:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 12px 32px rgba(212, 168, 87, 0.6),
    0 3px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -3px 8px rgba(150, 100, 30, 0.35);
}
.btn-donate-dev:active {
  transform: translateY(0);
}
.dev-footer-sub {
  font-family: "Cormorant Garamond", "Noto Serif", serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(212, 168, 87, 0.55);
  letter-spacing: 0.3px;
  max-width: 320px;
  line-height: 1.4;
}
.dev-footer-disclaimer {
  font-size: 10.5px;
  color: rgba(244, 228, 180, 0.32);
  font-style: italic;
  letter-spacing: 0.2px;
  max-width: 560px;
  line-height: 1.55;
  margin: 14px auto 0;
  padding: 0 12px;
  text-align: center;
}
@media (max-width: 480px) {
  .btn-donate-dev { font-size: 12px; padding: 10px 22px; }
  .dev-footer-sub { font-size: 11px; }
}

.donate-content {
  padding: 20px;
  text-align: center;
  /* BUG FIX: là flex-child duy nhất của .modal-card{max-height:85vh;overflow:hidden}
     mà thiếu vùng cuộn → nội dung dài (QR + bank + Bảng Vàng) bị cắt, không lướt
     xuống được. Thêm flex:1 + overflow-y:auto như .auto-content. */
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Nút "Lưu / Chia sẻ ảnh QR" (skins/auto/donate) — full-width cho đồng nhất */
.btn-save-qr { display: block; width: 100%; margin: 8px 0 4px; }
.donate-message {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 16px;
}
.donate-amounts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0;
}
.donate-custom-input {
  margin: 12px 0;
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.25);
  border-radius: 10px;
  padding: 12px;
}
.donate-custom-input label {
  display: block;
  font-size: 11px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  font-weight: 600;
}
.donate-custom-input input {
  width: 100%;
  height: 44px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(212, 168, 87, 0.2);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--gold-light);
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.donate-custom-input input:focus {
  outline: none;
  border-color: var(--gold);
}
.donate-custom-hint {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  margin-top: 6px;
}
.donate-amount-btn {
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.2);
  color: var(--text);
  padding: 10px 6px;
  border-radius: 10px;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.donate-amount-btn:hover, .donate-amount-btn.active {
  border-color: var(--gold);
  background: rgba(212, 168, 87, 0.1);
  color: var(--gold-light);
}
.donate-qr {
  max-width: 280px;
  width: 100%;
  border: 1px solid rgba(212, 168, 87, 0.2);
  border-radius: 12px;
  margin: 12px 0;
  background: white;
}
.donate-thanks {
  font-style: italic;
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 12px;
}

/* ─── Bảng Vàng Tri Ân ─── */
/* ─── BẢNG VÀNG TRI ÂN — tấm bảng vàng khắc tên, VIP & lấp lánh ─── */
.kim-bang-wrap {
  margin-top: 20px;
  padding: 18px 14px 12px;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(212,168,87,0.36);
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(212,168,87,0.14), transparent 70%),
    linear-gradient(180deg, rgba(30,23,14,0.60), rgba(20,16,10,0.32));
  box-shadow: inset 0 0 42px rgba(212,168,87,0.08), 0 8px 28px rgba(0,0,0,0.34);
}
/* Dải vàng quét ngang — cảm giác "lấp lánh" sang trọng */
.kim-bang-wrap::before {
  content: '';
  position: absolute;
  top: -20%; left: -60%;
  width: 42%; height: 140%;
  background: linear-gradient(105deg, transparent, rgba(255,243,206,0.13), transparent);
  transform: skewX(-18deg);
  animation: kbSweep 7.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes kbSweep { 0%, 100% { left: -60%; } 55% { left: 125%; } }
.kim-bang-wrap > * { position: relative; z-index: 1; }
.kim-bang-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,228,150,0.85), rgba(212,168,87,0.5), transparent);
  margin: 0 0 14px;
  box-shadow: 0 0 10px rgba(212,168,87,0.4);
}
.kim-bang-title {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  text-align: center;
  color: #f0d68a;
  letter-spacing: 1.6px;
  margin-bottom: 4px;
  animation: kbTitleGlow 3.4s ease-in-out infinite;
}
@keyframes kbTitleGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(212,168,87,0.35); }
  50% { text-shadow: 0 0 20px rgba(255,228,150,0.7), 0 0 34px rgba(212,168,87,0.32); }
}
.kim-bang-sub {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 14px;
}
.kim-bang-total {
  text-align: center;
  font-size: 12px;
  color: #f0d68a;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(212,168,87,0.12), rgba(212,168,87,0.04));
  border: 1px solid rgba(212,168,87,0.3);
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.kim-bang-list {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.kim-bang-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  margin: 6px 0;
  border-radius: 11px;
  border: 1px solid rgba(212,168,87,0.16);
  background: linear-gradient(180deg, rgba(212,168,87,0.06), rgba(212,168,87,0.015));
  font-size: 13px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kim-bang-row:hover {
  border-color: rgba(212,168,87,0.42);
  box-shadow: 0 0 16px rgba(212,168,87,0.15);
  transform: translateY(-1px);
}
.kim-bang-rank {
  font-size: 18px;
  text-align: center;
  filter: drop-shadow(0 0 6px rgba(212,168,87,0.6));
}
/* Tên khắc vàng — gradient shimmer chạy ngang (chỉ tên, không phải tỉnh) */
.kim-bang-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.kb-name-text {
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e9d6a0; /* fallback nếu trình duyệt không hỗ trợ background-clip:text */
  background: linear-gradient(90deg, #e9d6a0 0%, #d4a857 30%, #fff3cf 50%, #d4a857 70%, #e9d6a0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kbGoldShimmer 6.5s linear infinite;
}
@keyframes kbGoldShimmer { to { background-position: 200% center; } }
.kim-bang-prov {
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: var(--text-dim);
}
/* Người vừa hỷ cúng — nổi bật, sao lấp lánh + nhãn vàng */
.kim-bang-row--new {
  border-color: rgba(255,224,150,0.55);
  background: linear-gradient(180deg, rgba(255,224,150,0.15), rgba(212,168,87,0.05));
  box-shadow: 0 0 20px rgba(255,224,150,0.2);
}
.kim-bang-row--new .kim-bang-rank { animation: kbSparkle 1.9s ease-in-out infinite; }
@keyframes kbSparkle {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,224,150,0.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 13px rgba(255,238,180,0.95)); transform: scale(1.14); }
}
.kim-bang-new-tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #2a1e0c;
  -webkit-text-fill-color: #2a1e0c;
  background: linear-gradient(90deg, #f6e6b4, #d4a857);
  padding: 1px 8px;
  border-radius: 999px;
}
.kim-bang-amount {
  color: #d4a857;
  font-family: monospace;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.kim-bang-empty,
.kim-bang-loading {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-dim);
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .kim-bang-wrap::before, .kim-bang-title, .kim-bang-name, .kim-bang-row--new .kim-bang-rank { animation: none; }
}

/* ─── PROVINCE LEADERBOARD ─── */
.lb-province-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.02);
}
.lb-province-row .province-name {
  font-family: "Noto Serif", serif;
  color: var(--text);
  font-weight: 600;
}
.lb-province-row .province-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.lb-province-row.me {
  background: rgba(212, 168, 87, 0.1);
  border: 1px solid rgba(212, 168, 87, 0.3);
}

/* ─── PARTICLE FALL ─── */
@keyframes particle-fall {
  0% { transform: translateY(-40px) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.6; }
  100% { transform: translateY(110vh) translateX(30px) rotate(360deg); opacity: 0; }
}

/* ─── AUTO CLICKER BAR ─── */
.auto-clicker-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0;
}

.auto-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #3a2818, #4a3320 55%, #2e2010);
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .25s ease, border-color .15s ease;
  text-align: left;
  color: var(--text);
  font-family: inherit;
  width: 100%;
  position: relative;
  box-shadow: 0 0 0 0 rgba(212, 168, 87, 0.55), 0 4px 16px rgba(0,0,0,.35);
  animation: autoCtaPulse 2.6s ease-in-out infinite;
}
@keyframes autoCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 87, 0.55), 0 4px 16px rgba(0,0,0,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(212, 168, 87, 0.00), 0 4px 22px rgba(212, 168, 87, .25); }
}
.auto-cta:hover {
  transform: translateY(-2px);
  border-color: #f4d484;
  animation-play-state: paused;
  box-shadow: 0 0 0 4px rgba(212, 168, 87, .25), 0 6px 22px rgba(212, 168, 87, .35);
}
.auto-cta:active { transform: translateY(0); }
.auto-icon {
  font-size: 30px;
  color: var(--gold);
  filter: drop-shadow(0 0 10px rgba(212, 168, 87, 0.7));
  animation: autoIconShine 3.2s ease-in-out infinite;
}
@keyframes autoIconShine {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(-6deg) scale(1.08); }
}
.auto-text {
  flex: 1;
  min-width: 0;
}
.auto-title {
  font-family: "Noto Serif", serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff4d0;
  letter-spacing: .2px;
}
.auto-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 3px;
  line-height: 1.45;
}
.auto-price-chip {
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: #1a1108;
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(212,168,87,.35);
  min-width: 78px;
}
.auto-price-amount {
  font-family: "Noto Serif", serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -.3px;
}
.auto-price-amount > span { font-size: 13px; font-weight: 600; margin-left: 1px; }
.auto-price-label {
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 2px;
  opacity: .85;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.auto-active-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(26, 127, 90, 0.12);
  border: 1px solid rgba(26, 127, 90, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
}
.btn-auto-toggle {
  background: #1a7f5a;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn-auto-toggle.active {
  background: var(--red-seal);
}
.auto-expires {
  flex: 1;
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
}

/* AUTO PURCHASE MODAL */
.auto-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* ─── Auto package picker ─── */
.pkg-intro {
  text-align: center;
  padding: 16px 18px 8px;
}
.pkg-intro h3 {
  font-family: "Noto Serif", serif;
  font-size: 22px;
  color: var(--gold-light);
  margin-bottom: 4px;
}
.pkg-intro p {
  font-size: 13px;
  color: var(--text-dim);
}
/* ─── "Vì sao có phí" note — sincere, low-pressure ─── */
.pkg-why {
  margin: 6px 16px 14px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, rgba(212, 168, 87, 0.08), rgba(160, 25, 35, 0.04));
  border: 1px solid rgba(212, 168, 87, 0.22);
  border-radius: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.6;
}
.pkg-why-title {
  font-family: 'Noto Serif', serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--gold-light);
  margin-bottom: 6px;
}
.pkg-why p {
  margin: 6px 0;
  color: var(--text);
}
.pkg-why strong { color: var(--gold-light); font-weight: 600; }
.pkg-why-thanks {
  margin-top: 8px !important;
  font-style: italic;
  color: var(--text-dim);
  font-size: 12.5px;
  text-align: center;
}
.pkg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 16px 16px;
}
@media (min-width: 480px) { .pkg-grid { grid-template-columns: 1fr 1fr 1fr; } }
.pkg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 14px 14px;
  background: linear-gradient(160deg, rgba(212, 168, 87, 0.08), rgba(255, 255, 255, 0.02));
  border: 1.5px solid rgba(212, 168, 87, 0.25);
  border-radius: 14px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
}
.pkg-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(212, 168, 87, 0.2);
}
.pkg-card.pkg-best {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(212, 168, 87, 0.18), rgba(212, 168, 87, 0.05));
  box-shadow: 0 4px 18px rgba(212, 168, 87, 0.25);
}
.pkg-ribbon {
  position: absolute;
  top: 8px;
  right: -22px;
  transform: rotate(28deg);
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
  padding: 3px 24px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}
.pkg-save {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--red-seal);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.pkg-badge {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--gold);
  font-weight: 700;
  margin-top: 6px;
}
.pkg-price {
  font-family: "Noto Serif", serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
  margin: 6px 0 2px;
}
.pkg-currency { font-size: 16px; color: var(--text-dim); margin-left: 1px; }
.pkg-perday {
  font-size: 11px;
  color: var(--text-faint);
}
.pkg-hint {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 4px;
}
.pkg-cta {
  margin-top: 10px;
  padding: 8px 14px;
  background: rgba(212, 168, 87, 0.15);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
}
.pkg-card.pkg-best .pkg-cta {
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
}
.pkg-foot {
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
  padding: 0 16px 14px;
}
.pkg-back {
  background: transparent;
  border: 1px dashed rgba(212, 168, 87, 0.3);
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  margin-top: 8px;
}
.pkg-back:hover { border-color: var(--gold); color: var(--gold); }

.auto-pricing-card {
  background: linear-gradient(145deg, var(--bg-card), var(--bg-mid));
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}
.auto-pricing-card .auto-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--bg-deep);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.auto-pricing-card h3 {
  font-family: "Noto Serif", serif;
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 4px;
}
.auto-price {
  font-family: "Noto Serif", serif;
  font-size: 36px;
  color: var(--gold-light);
  margin: 12px 0 4px;
}
.auto-price-sub {
  font-size: 12px;
  color: var(--text-dim);
}
.auto-features {
  list-style: none;
  padding: 16px 0;
  margin: 12px 0;
  border-top: 1px solid rgba(212, 168, 87, 0.15);
  border-bottom: 1px solid rgba(212, 168, 87, 0.15);
  text-align: left;
}
.auto-features li {
  padding: 6px 0;
  color: var(--text);
  font-size: 14px;
}
.auto-features li::before { content: "✓ "; color: #6dbf6d; font-weight: 700; }

.auto-qr-section {
  text-align: center;
}
.auto-qr-section img {
  max-width: 280px;
  width: 100%;
  border: 1px solid rgba(212, 168, 87, 0.2);
  border-radius: 12px;
  background: white;
  margin: 12px 0;
}
.auto-bank-info {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  text-align: left;
  margin: 12px 0;
}
.auto-bank-info .row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(212, 168, 87, 0.1);
}
.auto-bank-info .row:last-child { border: none; }
.auto-bank-info .label { color: var(--text-dim); }
.auto-bank-info .val { color: var(--text); font-family: "JetBrains Mono", monospace; font-weight: 600; }

/* Copy actions row above bank info */
.copy-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 8px;
  margin: 14px 0 4px;
}
.btn-copy-pay {
  background: rgba(212, 168, 87, 0.12);
  border: 1px solid rgba(212, 168, 87, 0.4);
  color: var(--gold-light);
  padding: 10px 8px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.3px;
}
.btn-copy-pay:hover {
  background: rgba(212, 168, 87, 0.25);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.btn-copy-pay.primary {
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
  border-color: var(--gold);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(212, 168, 87, 0.3);
}
.btn-copy-pay.primary:hover { box-shadow: 0 6px 16px rgba(212, 168, 87, 0.45); }
.btn-copy-pay.copied,
.copyable.copied {
  background: rgba(95, 214, 124, 0.2) !important;
  border-color: #5fd67c !important;
  color: #b8f5c8 !important;
}
.btn-copy-pay.copied::after, .copyable.copied .copy-hint::after { content: ' ✓'; }

/* Copyable rows in bank info */
.auto-bank-info .row.copyable {
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 6px;
  margin: 0 -4px;
  padding: 6px 8px;
}
.auto-bank-info .row.copyable:hover {
  background: rgba(212, 168, 87, 0.12);
}
.auto-bank-info .row.copyable:active {
  background: rgba(212, 168, 87, 0.2);
}
.copy-hint {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.6;
  font-style: normal;
}
@media (max-width: 380px) {
  .copy-actions { grid-template-columns: 1fr 1fr; }
  .copy-actions .btn-copy-pay.primary { grid-column: 1 / -1; }
}
.auto-bank-info .val.highlight { color: var(--gold-light); }

.auto-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(26, 127, 90, 0.1);
  border: 1px solid rgba(26, 127, 90, 0.3);
  border-radius: 10px;
  font-size: 13px;
  color: #6dbf6d;
  margin-top: 10px;
}
.auto-status .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6dbf6d;
  animation: pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* LOGIN BADGE */
.login-status {
  margin-bottom: 8px;
}
.login-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.login-badge.anonymous {
  background: rgba(160, 25, 35, 0.1);
  border: 1px solid rgba(160, 25, 35, 0.3);
  color: #e8a5a5;
}
.login-badge.logged-in {
  background: rgba(26, 127, 90, 0.1);
  border: 1px solid rgba(26, 127, 90, 0.3);
  color: #6dbf6d;
}

/* ─── PROFILE MODAL ─── */
.profile-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.profile-section {
  margin-bottom: 8px;
}
.profile-divider {
  height: 1px;
  background: rgba(212, 168, 87, 0.15);
  margin: 16px 0;
}
.profile-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 6px;
  font-weight: 600;
}
.profile-help {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 10px;
  line-height: 1.5;
}
.profile-input {
  width: 100%;
  height: 44px;
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.2);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  margin-bottom: 8px;
}
.profile-input:focus {
  outline: none;
  border-color: var(--gold);
}
.btn-profile-save {
  background: var(--gold);
  color: var(--bg-deep);
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.btn-profile-save:hover { background: var(--gold-light); }
.btn-profile-save.danger-btn {
  background: transparent;
  color: var(--red-seal);
  border: 1.5px solid var(--red-seal);
}
.btn-profile-save.danger-btn:hover { background: var(--red-seal); color: var(--cream); }

.profile-code-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
/* QR đồng bộ giữa máy */
.sync-qr-wrap {
  display: flex; justify-content: center;
  margin: 6px 0 12px;
}
.sync-qr-img {
  width: 180px; height: 180px;
  border-radius: 12px;
  background: #fff; /* nền trắng để QR luôn quét được dù theme tối */
  padding: 10px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}
.sync-link-row { flex-wrap: wrap; }
.sync-link-row .btn-profile-save { flex: 1; min-width: 150px; }
.profile-code {
  flex: 1;
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.2);
  border-radius: 8px;
  padding: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  color: var(--gold-light);
  text-align: center;
  letter-spacing: 1px;
  word-break: break-all;
}
.btn-profile-copy {
  background: rgba(212, 168, 87, 0.15);
  color: var(--gold);
  border: 1px solid rgba(212, 168, 87, 0.3);
  border-radius: 8px;
  padding: 0 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.btn-profile-copy:hover { background: rgba(212, 168, 87, 0.25); }

.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.profile-stat {
  background: var(--bg-card);
  border: 1px solid rgba(212, 168, 87, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.profile-stat-value {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-light);
}
.profile-stat-label {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* ─── SHARE MODAL ─── */
/* ─── Ngũ Hành badge in profile ─── */
.nguhanh-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.12), rgba(212, 168, 87, 0.04));
  border: 1px solid rgba(212, 168, 87, 0.3);
  border-radius: 10px;
  margin-bottom: 10px;
}
.nguhanh-icon { font-size: 28px; }
.nguhanh-text { font-size: 13px; color: var(--text); flex: 1; }

/* ─── Lịch âm widget ─── */
.lich-am-widget {
  margin: 14px 16px 4px;
  background: linear-gradient(145deg, rgba(40, 28, 16, 0.7), rgba(20, 15, 10, 0.85));
  border: 1px solid rgba(212, 168, 87, 0.3);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.lich-am-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.la-emoji {
  font-size: 28px;
  flex-shrink: 0;
}
.la-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.la-line1 {
  font-family: "Noto Serif", serif;
  color: var(--gold-light);
  font-size: 15px;
  font-weight: 600;
}
.la-line2 {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.la-chevron {
  color: var(--gold);
  font-size: 14px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.lich-am-toggle[aria-expanded="true"] .la-chevron { transform: rotate(180deg); }
.lich-am-detail {
  padding: 4px 16px 14px;
  border-top: 1px dashed rgba(212, 168, 87, 0.2);
}
.la-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.la-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.la-status-item { grid-column: 1 / -1; }
.la-label {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.la-val {
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 600;
}
.la-val.lucky { color: #5fd67c; }
.la-val.unlucky { color: #ff8a8a; }
.la-tip {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(212, 168, 87, 0.1);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  font-style: italic;
  line-height: 1.5;
}
.la-tip:empty { display: none; }

/* ─── PWA install banner ─── */
.install-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(40,28,16,0.96), rgba(20,15,10,0.96));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(212, 168, 87, 0.45);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 32px rgba(212, 168, 87, 0.18);
  max-width: calc(100vw - 24px);
  animation: install-slide-up 0.4s cubic-bezier(.4,0,.2,1);
}
@keyframes install-slide-up {
  from { opacity: 0; transform: translateX(-50%) translateY(40px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.install-banner[hidden] { display: none !important; }
.install-info { display: flex; align-items: center; gap: 12px; }
.install-icon {
  font-size: 32px;
  color: var(--gold);
  background: rgba(212, 168, 87, 0.12);
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(212, 168, 87, 0.3);
}
.install-title { font-size: 14px; font-weight: 700; color: var(--gold-light); margin-bottom: 1px; }
.install-sub   { font-size: 11px; color: var(--text-dim); }
.install-actions { display: flex; gap: 6px; flex-shrink: 0; }
.install-dismiss {
  background: transparent;
  border: 1px solid rgba(244, 236, 220, 0.2);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.install-dismiss:hover { color: var(--gold); border-color: var(--gold); }
.install-cta {
  background: linear-gradient(135deg, var(--gold), #b8893a);
  color: var(--bg-deep);
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(212, 168, 87, 0.35);
  transition: transform 0.15s;
}
.install-cta:hover, .install-cta:active { transform: translateY(-1px); }
@media (max-width: 480px) {
  .install-banner { left: 12px; right: 12px; transform: none; max-width: none; padding: 10px 12px; }
  @keyframes install-slide-up {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .install-icon { width: 42px; height: 42px; font-size: 26px; }
  .install-title { font-size: 13px; }
  .install-sub   { font-size: 10px; }
  .install-cta   { padding: 8px 14px; font-size: 12px; }
  .install-dismiss { padding: 8px 10px; font-size: 11px; }
}

/* ─── Audio Mixer modal ─── */
.audio-mixer-card { max-width: 460px; }
.audio-mixer-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mix-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(212, 168, 87, 0.12);
}
.mix-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 1.5px dashed rgba(212, 168, 87, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.mix-toggle.no-toggle { cursor: default; }
.mix-toggle:hover:not(.no-toggle) { border-color: var(--gold); color: var(--gold); }
.mix-toggle.on {
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.15), rgba(212, 168, 87, 0.05));
  border-color: var(--gold);
  border-style: solid;
  color: var(--gold);
}
.mix-icon { font-size: 22px; }
.mix-label { flex: 1; text-align: left; font-weight: 600; }
.mix-state {
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
}
.mix-toggle.on .mix-state { background: var(--gold); color: var(--bg-deep); }
.mix-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(90deg, rgba(212, 168, 87, 0.3), rgba(212, 168, 87, 0.6));
  border-radius: 3px;
  outline: none;
}
.mix-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--gold);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(212, 168, 87, 0.6);
}
.mix-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--gold);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.mix-hint {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
  margin-top: 4px;
  opacity: 0.85;
}

.share-modal-card {
  max-width: 480px;
}
.share-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.share-preview {
  width: 100%;
  max-height: 50vh;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(212, 168, 87, 0.2);
  margin-bottom: 16px;
  display: block;
  background: rgba(20, 14, 8, 0.6);
}

/* ─── Native Web Share button (1-tap mobile) ─── */
.btn-share-native {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: linear-gradient(135deg, #d4a857 0%, #b88a44 100%);
  color: #1a0e07;
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 14px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(212, 168, 87, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-share-native:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 168, 87, 0.35);
}
.btn-share-native .sn-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.btn-share-native .sn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.btn-share-native .sn-text strong {
  font-size: 15px;
  font-weight: 700;
}
.btn-share-native .sn-text small {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.78;
  margin-top: 2px;
}
.share-or {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 12px;
  position: relative;
}

/* ─── Platform grid (Facebook, Zalo, Messenger, X, Telegram, WhatsApp) ─── */
.share-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.share-platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(40, 28, 18, 0.6);
  border: 1px solid rgba(212, 168, 87, 0.18);
  border-radius: 10px;
  padding: 12px 6px;
  text-decoration: none;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
  cursor: pointer;
}
.share-platform:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  background: rgba(60, 42, 24, 0.7);
  text-decoration: none;
}
.share-platform .sp-icon {
  font-size: 24px;
  line-height: 1;
}
.share-platform .sp-label {
  font-size: 11px;
  color: var(--text-dim);
}
.share-platform.sp-fb .sp-icon { color: #1877f2; }
.share-platform.sp-zalo .sp-icon { color: #0068ff; }
.share-platform.sp-msg .sp-icon { color: #0084ff; }
.share-platform.sp-x .sp-icon { color: #fff; font-weight: 800; }
.share-platform.sp-tg .sp-icon { color: #0088cc; }
.share-platform.sp-wa .sp-icon { color: #25d366; }

.share-tip {
  font-size: 11.5px;
  color: var(--text-dim);
  background: rgba(212, 168, 87, 0.08);
  border: 1px dashed rgba(212, 168, 87, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 4px 0 12px;
  line-height: 1.45;
}

.share-caption-details {
  margin-top: 8px;
}
.share-caption-details summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--gold);
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
.share-caption-details summary::-webkit-details-marker { display: none; }
.share-caption-details summary::after {
  content: ' ▾';
  font-size: 10px;
  color: var(--text-dim);
}
.share-caption-details[open] summary::after { content: ' ▴'; }

.btn-download {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

@media (max-width: 480px) {
  .share-platforms { grid-template-columns: repeat(3, 1fr); }
  .share-platform { padding: 10px 4px; }
  .share-platform .sp-icon { font-size: 22px; }
  .share-platform .sp-label { font-size: 10.5px; }
}
.share-hint {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 12px;
}
.share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.btn-share-action {
  background: var(--gold);
  color: var(--bg-deep);
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
}
.btn-share-action:hover { background: var(--gold-light); }
.share-text {
  width: 100%;
  height: 80px;
  background: var(--bg-card);
  border: 1.5px solid rgba(212, 168, 87, 0.15);
  border-radius: 8px;
  padding: 10px;
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  resize: none;
}

/* ─── BREAKTHROUGH OVERLAY ─── */
.breakthrough-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: radial-gradient(circle at center, rgba(212, 168, 87, 0.4), rgba(0, 0, 0, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bt-overlay-in 0.4s ease;
}
.breakthrough-overlay[hidden] { display: none !important; }
@keyframes bt-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.breakthrough-content {
  text-align: center;
  position: relative;
  animation: bt-content 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bt-content {
  0% { transform: scale(0.5) rotate(-5deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.breakthrough-rays {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(212, 168, 87, 0.4) 5deg, transparent 10deg,
    transparent 30deg, rgba(212, 168, 87, 0.3) 35deg, transparent 40deg,
    transparent 60deg, rgba(212, 168, 87, 0.4) 65deg, transparent 70deg,
    transparent 90deg, rgba(212, 168, 87, 0.3) 95deg, transparent 100deg,
    transparent 120deg, rgba(212, 168, 87, 0.4) 125deg, transparent 130deg,
    transparent 150deg, rgba(212, 168, 87, 0.3) 155deg, transparent 160deg,
    transparent 180deg, rgba(212, 168, 87, 0.4) 185deg, transparent 190deg,
    transparent 210deg, rgba(212, 168, 87, 0.3) 215deg, transparent 220deg,
    transparent 240deg, rgba(212, 168, 87, 0.4) 245deg, transparent 250deg,
    transparent 270deg, rgba(212, 168, 87, 0.3) 275deg, transparent 280deg,
    transparent 300deg, rgba(212, 168, 87, 0.4) 305deg, transparent 310deg,
    transparent 330deg, rgba(212, 168, 87, 0.3) 335deg, transparent 340deg,
    transparent 360deg);
  animation: bt-rays-spin 4s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes bt-rays-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.breakthrough-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212, 168, 87, 0.6), transparent 70%);
  filter: blur(20px);
  animation: bt-glow-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes bt-glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.breakthrough-title {
  font-family: "Noto Serif", serif;
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 8px;
  margin-bottom: 16px;
  text-shadow: 0 0 20px rgba(212, 168, 87, 0.8);
}
.breakthrough-rank {
  font-family: "Noto Serif", serif;
  font-size: 56px;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 4px;
  text-shadow: 0 0 30px rgba(212, 168, 87, 1), 0 0 60px rgba(212, 168, 87, 0.6);
  margin-bottom: 16px;
}
.breakthrough-sub {
  font-size: 14px;
  color: var(--text);
  letter-spacing: 1px;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 380px) {
  .mo { width: 240px; height: 240px; }
  .counter-value { font-size: clamp(34px, 11vw, 56px); }
  .rank-name { font-size: 24px; }
  .breakthrough-rank { font-size: 44px; }
}

@media (min-width: 600px) {
  .game { padding: 32px 24px 48px; }
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* iOS safe area */
@supports (padding: env(safe-area-inset-bottom)) {
  .game { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* iOS perf: reduce backdrop-filter blur (very expensive GPU op on Safari).
   Apply only on Safari/iOS (-webkit-touch-callout: none feature query). */
@supports (-webkit-touch-callout: none) {
  .topbar {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(13, 9, 7, 0.96);
  }
  /* Modal backdrop — opaque-ish bg, cheap blur */
  .modal-backdrop, .modal {
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
  /* Disable expensive saturate() filter on iOS */
  .auto-modal, [class*="-overlay"], [class*="-card"] {
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
  /* Mõ button drop-shadow — keep but lighter */
  .mo-svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45)) !important;
  }
  /* Reduce halo burst opacity on iOS to lighten compositing load */
  .mo-halo-ring, .mo-halo-flash, .mo-halo-beam {
    will-change: auto;
  }
  /* Disable will-change on long-running animations to avoid GPU memory thrash */
  .clouds .cloud, .firefly, .dust div {
    will-change: auto;
  }
}

/* PWA standalone (when added to home screen) — no browser chrome */
@media (display-mode: standalone) {
  body { -webkit-tap-highlight-color: transparent; }
  .game { padding-top: env(safe-area-inset-top); }
}

/* ─── SEO: visually-hidden H1, fully crawlable ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── SEO H1 banner — visible, low-key, supports ranking signal ─── */
.seo-h1-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px auto 28px;
  padding: 10px 18px;
  font-family: 'Noto Serif', serif;
  text-align: center;
  font-weight: normal;
  line-height: 1.4;
  /* Frosted-glass card so text holds contrast on top of temple photo */
  max-width: max-content;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(40, 28, 16, 0.72), rgba(20, 14, 8, 0.82));
  border: 1px solid rgba(212, 168, 87, 0.30);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 244, 208, 0.05);
}
.seo-h1-main {
  font-size: 15px;
  color: #f0d28e;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-shadow: 0 0 8px rgba(212, 168, 87, 0.45), 0 1px 2px rgba(0, 0, 0, 0.75);
}
.seo-h1-sub {
  font-size: 11px;
  color: rgba(232, 216, 188, 0.88);
  font-weight: 500;
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
@media (max-width: 600px) {
  .seo-h1-banner { padding: 8px 14px; margin: 8px 12px 0; }
  .seo-h1-main { font-size: 13px; }
  .seo-h1-sub { font-size: 10px; }
}

/* ─── SEO: collapsible intro/content section ─── */
.seo-intro {
  margin: 36px 16px 24px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(180deg, rgba(40, 28, 18, 0.6), rgba(20, 14, 8, 0.5));
  border: 1px solid rgba(212, 168, 87, 0.18);
  border-radius: 14px;
  padding: 18px 22px;
  color: #d4c4a8;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.65;
}
.seo-intro summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: #e8c878;
  user-select: none;
  padding: 4px 0;
  list-style: none;
}
.seo-intro summary::-webkit-details-marker { display: none; }
.seo-intro summary::after {
  content: ' ▾';
  color: #a87b54;
  font-size: 12px;
}
.seo-intro[open] summary::after { content: ' ▴'; }
.seo-intro .seo-content { margin-top: 14px; font-size: 14px; }
.seo-intro h2 {
  font-family: 'Noto Serif', serif;
  font-size: 19px;
  color: #f0d28e;
  margin: 6px 0 12px;
  font-weight: 700;
}
.seo-intro h3 {
  font-family: 'Noto Serif', serif;
  font-size: 16px;
  color: #e0b56a;
  margin: 18px 0 8px;
  font-weight: 600;
}
.seo-intro p { margin: 8px 0; }
.seo-intro ul { margin: 6px 0 12px 20px; padding: 0; }
.seo-intro li { margin: 4px 0; }
.seo-intro strong { color: #f8e0a8; }
.seo-intro a { color: #f0d28e; text-decoration: none; }
.seo-intro a:hover { text-decoration: underline; }
.seo-foot {
  margin-top: 18px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(212, 168, 87, 0.15);
  font-size: 13px;
  color: #a89580;
}
@media (max-width: 600px) {
  .seo-intro { margin: 24px 10px 16px; padding: 14px 16px; }
  .seo-intro h2 { font-size: 17px; }
  .seo-intro h3 { font-size: 15px; }
}

/* ─── SEO footer — text internal links for Googlebot ─── */
.seo-footer {
  margin: 48px auto 0;
  max-width: 1100px;
  padding: 28px 20px 20px;
  border-top: 1px solid rgba(212, 168, 87, 0.18);
  background: linear-gradient(180deg, rgba(20, 14, 8, 0.4), rgba(13, 9, 7, 0.7));
  font-family: 'Inter', system-ui, sans-serif;
  color: #a89580;
  font-size: 13px;
  line-height: 1.65;
}
.seo-footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.seo-footer-col h2.seo-footer-title {
  font-family: 'Noto Serif', serif;
  font-size: 18px;
  color: #d4a857;
  margin: 0 0 6px;
  font-weight: 700;
}
.seo-footer-tag {
  font-size: 12px;
  color: #8a7660;
  line-height: 1.55;
  margin: 0;
  font-style: italic;
}
.seo-footer-h {
  font-family: 'Noto Serif', serif;
  font-size: 13px;
  color: #d4a857;
  margin: 0 0 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.seo-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.seo-footer-col li {
  margin: 4px 0;
}
.seo-footer-col a {
  color: #a89580;
  text-decoration: none;
  font-size: 12.5px;
  border-bottom: 1px dotted transparent;
  transition: color 0.15s, border-color 0.15s;
}
.seo-footer-col a:hover {
  color: #f0d28e;
  border-bottom-color: rgba(240, 210, 142, 0.4);
}
.seo-footer-bottom {
  max-width: 1100px;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(212, 168, 87, 0.1);
  text-align: center;
  font-size: 11px;
  color: #6a5840;
}
.seo-footer-bottom p { margin: 4px 0; }
.seo-footer-bottom a {
  color: #a89580;
  text-decoration: none;
}
.seo-footer-bottom a:hover { color: #d4a857; }
.seo-footer-disclaimer {
  font-style: italic;
  opacity: 0.75;
  max-width: 560px;
  margin: 6px auto 0 !important;
}
@media (max-width: 600px) {
  .seo-footer { padding: 24px 16px 16px; margin-top: 32px; }
  .seo-footer-inner { gap: 20px; }
  .seo-footer-col h2.seo-footer-title { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   READABILITY ON TEMPLE BACKGROUND
   Sections that float on top of the photo (live-bar, dev-footer,
   seo-footer) need heavier backdrops + brighter text + text-shadow so
   they don't dissolve into the chùa image.
   ════════════════════════════════════════════════════════════════════ */

/* Live bar — frosted glass over photo */
.live-bar {
  background:
    linear-gradient(145deg, rgba(212, 168, 87, 0.10), rgba(20, 14, 8, 0.78)),
    rgba(13, 9, 7, 0.55);
  border-color: rgba(212, 168, 87, 0.35);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 244, 208, 0.05);
}
.live-stat-lbl {
  color: rgba(240, 220, 180, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.live-stat-num {
  text-shadow: 0 0 8px rgba(212, 168, 87, 0.45), 0 1px 2px rgba(0, 0, 0, 0.7);
}
.live-ticker .ticker-item {
  color: rgba(232, 216, 192, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.live-ticker .ticker-item strong {
  color: var(--gold-light);
  text-shadow: 0 0 6px rgba(212, 168, 87, 0.5), 0 1px 2px rgba(0, 0, 0, 0.7);
}
.live-ticker .ticker-sep {
  color: rgba(212, 168, 87, 0.65);
}

/* Dev footer (donate prompt + disclaimer) — wrap in a soft card */
.dev-footer {
  margin: 34px 14px 18px;
  padding: 26px 20px 18px;
  border-radius: 18px;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(212, 168, 87, 0.13), transparent 62%),
    linear-gradient(180deg, rgba(46, 31, 16, 0.66), rgba(13, 9, 7, 0.86));
  border: 1px solid rgba(212, 168, 87, 0.42);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(244, 228, 180, 0.12);
}
.dev-footer-sub {
  color: rgba(238, 210, 158, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.dev-footer-disclaimer {
  color: rgba(244, 228, 180, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* Nút Hỷ cúng = vàng kim NHẠT, sang trọng + lấp lánh nhẹ */
.btn-donate-dev {
  color: #4a3416;
  text-shadow: none;
  background:
    linear-gradient(168deg, #fdf1d2 0%, #f3dca2 46%, #e6c67e 100%);
  border: 1px solid rgba(150, 110, 55, 0.45);
  box-shadow:
    0 6px 22px rgba(226, 190, 120, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -3px 8px rgba(170, 125, 55, 0.3);
}
/* Lấp lánh nhẹ — vệt sáng quét ngang (chỉ animate transform → rẻ GPU) */
.btn-donate-dev::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  transform: translateX(-200%) skewX(-18deg);
  animation: donateShine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes donateShine {
  0% { transform: translateX(-200%) skewX(-18deg); }
  16% { transform: translateX(320%) skewX(-18deg); }
  100% { transform: translateX(320%) skewX(-18deg); }
}

/* SEO footer — heavier backdrop + brighter children for readability */
.seo-footer {
  background:
    linear-gradient(180deg, rgba(20, 14, 8, 0.82), rgba(13, 9, 7, 0.94));
  border-top: 1px solid rgba(212, 168, 87, 0.30);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.seo-footer-tag {
  color: rgba(216, 200, 168, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.seo-footer-col h2.seo-footer-title,
.seo-footer-col h3.seo-footer-h {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.seo-footer-col a {
  color: rgba(216, 200, 168, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.seo-footer-col a:hover {
  color: var(--gold-light);
}
.seo-footer-bottom {
  color: rgba(200, 184, 152, 0.80);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.seo-footer-disclaimer {
  color: rgba(216, 200, 168, 0.70);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ─── INTRO SPLASH — 3 giây: GIỌT NƯỚC RƠI XUỐNG HỒ. Đổ-bóng 3D nung sẵn (ripple-ring.png)
   + chuyển động bằng transform/opacity → mượt, KHÔNG nặng GPU. Tự vào sau 3s, không
   chuông, chỉ hiện 1 lần/phiên. ─── */
html.no-intro #intro-splash { display: none !important; }
#intro-splash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 82% 62% at 50% 30%, #16242e 0%, #0b1118 50%, #05070a 100%),
    #05070a;
  overflow: hidden;
  transition: opacity 0.6s ease;
  -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#intro-splash.intro-out { opacity: 0; pointer-events: none; }
#intro-splash::after { /* sheen mặt nước + vignette cho chiều sâu */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 20% at 50% 37%, rgba(70, 98, 122, 0.28), transparent 70%),
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.55) 100%);
}
.intro-water { position: relative; width: 240px; height: 240px; margin-bottom: 8px; }
.intro-water > * { position: absolute; left: 50%; top: 50%; }
.ripple {
  width: 240px; height: 240px; margin: -120px 0 0 -120px;
  background: url('/ripple-ring.png') center / contain no-repeat;
  opacity: 0; transform: scale(0.12); will-change: transform, opacity;
}
.ripple-1 { animation: introRipple 1.8s ease-out 0.70s both; }
.ripple-2 { animation: introRipple 1.8s ease-out 1.15s both; }
.ripple-3 { animation: introRipple 1.8s ease-out 1.60s both; }
.intro-core {
  width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, 0.85) 0%, rgba(255, 214, 140, 0.28) 42%, transparent 70%);
  opacity: 0; animation: introCore 1.1s ease-out 0.72s both;
}
.intro-glint {
  width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 234, 0.95) 0%, rgba(255, 228, 168, 0.4) 32%, transparent 70%);
  opacity: 0; transform: scale(0.2); will-change: transform, opacity;
  animation: introGlint 0.6s ease-out 0.6s both;
}
.intro-drop {
  width: 19px; height: 27px; margin: -13px 0 0 -9.5px;
  border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%;
  background: radial-gradient(at 38% 28%, #ffffff 0%, #ffedc6 42%, #9a7d4e 100%);
  box-shadow: 0 0 13px rgba(255, 236, 190, 0.55);
  opacity: 0; will-change: transform, opacity;
  animation: introDrop 0.72s cubic-bezier(0.5, 0, 0.85, 1) both;
}
.intro-words { text-align: center; position: relative; z-index: 1; }
.intro-line {
  font-family: "Cormorant Garamond", "Noto Serif", Georgia, serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(28px, 8vw, 38px); line-height: 1.25; color: #eee4cf; opacity: 0;
}
.intro-l1 { animation: introRise 0.9s ease-out 1.25s both; }
.intro-l2 { animation: introRise 0.9s ease-out 1.5s both; color: #f6eeda; }
.intro-ornament {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 16px; color: #c2b48f; font-size: 14px;
  opacity: 0; animation: introRise 0.9s ease-out 1.9s both;
}
.intro-ornament span { width: 56px; height: 1px; background: linear-gradient(90deg, transparent, rgba(159, 176, 196, 0.55)); }
.intro-ornament span:last-child { background: linear-gradient(90deg, rgba(159, 176, 196, 0.55), transparent); }
.intro-wordmark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 13px; letter-spacing: 5px; color: #cdb88f;
  margin-top: 16px; opacity: 0; animation: introRise 0.9s ease-out 2.1s both;
}
@keyframes introDrop {
  0%   { opacity: 0; transform: translateY(-96px) scaleY(1.35); }
  16%  { opacity: 1; }
  82%  { opacity: 1; transform: translateY(-4px) scaleY(1.25); }
  100% { opacity: 0; transform: translateY(2px) scaleY(0.5); }
}
@keyframes introGlint {
  0%   { opacity: 0; transform: scale(0.2); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes introRipple {
  0%   { opacity: 0; transform: scale(0.12); }
  16%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.25); }
}
@keyframes introCore { from { opacity: 0; } to { opacity: 0.9; } }
@keyframes introRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .intro-drop, .intro-glint { display: none; }
  .ripple { animation: none; opacity: 0.4; transform: scale(0.8); }
  .ripple-2, .ripple-3 { display: none; }
  .intro-core { animation: introCore 0.4s ease-out both; }
  .intro-line, .intro-ornament, .intro-wordmark { animation: introRise 0.4s ease-out both; }
}