/* ===== Mystic layer — bầu trời, astrolabe, khung vàng, Cú Nguyệt, hiệu ứng lá bài ===== */
:root {
  --serif: "Cormorant Garamond", "Playfair Display", serif;
  --gold-line: rgba(232,200,116,.38);
  --ink: #120d24;
}

/* ---- Chữ: Cormorant cho tiêu đề — thanh, cổ điển, hỗ trợ tiếng Việt ---- */
.hero h1, .section-title, .g-name, .result-card h4, .daily-info h3, .horo-head h3,
.journal-head h3, .astro-head h3, .big3-card h4, .num-body h4, .m-detail-card h4, .logo {
  font-family: var(--serif);
  letter-spacing: .3px;
}
.hero h1 { font-weight: 700; font-size: clamp(3rem, 9vw, 5.6rem); line-height: 1; }
.hero h1 em { background: linear-gradient(120deg, #c9b6ff, #9b7bff 45%, #e8c874); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-title { font-weight: 700; font-size: clamp(2rem, 5vw, 2.8rem); }
.section-title::after {
  content: ""; width: 180px; height: 14px; margin: 12px auto 0;
  background:
    radial-gradient(circle, var(--gold) 0 2.5px, transparent 3px) center / 14px 14px no-repeat,
    linear-gradient(90deg, transparent, var(--gold-line) 30%, transparent 46%, transparent 54%, var(--gold-line) 70%, transparent) center / 100% 1px no-repeat;
}
.g-name { font-size: 1.35rem; }
.result-card h4 { font-size: 1.45rem; }
.logo { font-size: 1.45rem; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.logo .ico { width: 26px; height: 26px; color: var(--gold); filter: drop-shadow(0 0 6px rgba(232,200,116,.5)); }

/* ---- Icon SVG ---- */
.ico { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.2em; flex: 0 0 auto; }
.sound-toggle .ico, .nav-toggle .ico { width: 19px; height: 19px; vertical-align: 0; }
.sound-toggle.off { color: var(--muted); border-color: rgba(169,159,199,.3); }
.sound-toggle.playing { animation: haloPulse 2.8s ease-in-out infinite; }
@keyframes haloPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,200,116,.0); }
  50% { box-shadow: 0 0 0 5px rgba(232,200,116,.14), 0 0 18px rgba(232,200,116,.3); }
}
.btn .ico { margin-right: 6px; }
.home-fab .ico { width: 24px; height: 24px; color: var(--ink); }

/* ---- Bầu trời canvas ---- */
.stars { z-index: -2; }
.sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nebula {
  background:
    radial-gradient(ellipse 55% 42% at 12% 8%, rgba(155,123,255,.20), transparent 62%),
    radial-gradient(ellipse 50% 36% at 88% 22%, rgba(232,200,116,.11), transparent 60%),
    radial-gradient(ellipse 45% 35% at 70% 70%, rgba(43,155,152,.10), transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 105%, rgba(76,42,133,.38), transparent 65%),
    var(--bg);
}
.nebula::after { /* sương mù trôi rất chậm */
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 30% 18% at 30% 40%, rgba(201,182,255,.07), transparent 70%),
    radial-gradient(ellipse 26% 16% at 70% 58%, rgba(232,200,116,.05), transparent 70%);
  animation: mist 60s ease-in-out infinite alternate;
}
@keyframes mist { to { transform: translate(6%, -4%) rotate(4deg); } }
.stardust {
  position: fixed; z-index: 60; pointer-events: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #fff9ea, rgba(232,200,116,.6) 45%, transparent 70%);
}

/* ---- Hero + astrolabe xoay ---- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-astro {
  position: absolute; z-index: -1; left: 50%; top: 50%;
  width: min(640px, 130vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: .5; pointer-events: none;
  mask-image: radial-gradient(circle, #000 45%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, #000 45%, transparent 72%);
}
.astrolabe { width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: .7; overflow: visible; }
.astrolabe .al-outer { stroke-opacity: .45; transform-origin: 200px 200px; animation: spin 240s linear infinite; }
.astrolabe .al-mid { stroke-opacity: .35; transform-origin: 200px 200px; animation: spin 180s linear infinite reverse; }
.astrolabe .al-inner { stroke: #b9a4ff; stroke-opacity: .45; transform-origin: 200px 200px; animation: spin 120s linear infinite; }
.astrolabe .al-glyphs { fill: var(--gold); fill-opacity: .7; stroke: none; font-size: 17px; text-anchor: middle; dominant-baseline: central; font-family: "Segoe UI Symbol", "Noto Sans Symbols", serif; }
.astrolabe .al-dot { fill: var(--gold); }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; }
.hero-kicker::before, .hero-kicker::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--purple)); }
.hero-kicker::after { transform: scaleX(-1); }

/* ---- Cú Nguyệt — người dẫn chuyện ---- */
.narrator {
  display: flex; align-items: flex-start; gap: 14px;
  max-width: 620px; margin: 0 auto 26px; text-align: left;
}
.narrator.center { margin-top: 28px; }
.owl {
  position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 210deg, #7a5a1c, #f7e3a1, #b8862f, #fff4c8, #9c7426, #e9c874, #7a5a1c);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 8px 26px rgba(0,0,0,.55), 0 0 30px rgba(233,183,79,.22);
  animation: owlBreath 6s ease-in-out infinite;
}
.owl-img {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; object-position: 50% 38%;
  border: 2px solid #0b0817;
  filter: saturate(.92) contrast(1.05);
}
/* vòng quỹ đạo xoay quanh chân dung */
.owl::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px dashed rgba(233,183,79,.35);
  animation: spin 40s linear infinite;
}
.owl::after {
  content: ""; position: absolute; top: -10px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: #fff4c8; box-shadow: 0 0 8px 2px rgba(247,227,161,.8);
  transform-origin: 2.5px 48px; animation: spin 14s linear infinite;
}
/* viền tối mờ trong ảnh cho có chiều sâu */
.owl .owl-img { box-shadow: inset 0 0 12px rgba(0,0,0,.6); }
.narrator:has(.caret) .owl { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 8px 26px rgba(0,0,0,.55), 0 0 38px rgba(233,183,79,.5); }
@keyframes owlBreath { 50% { transform: translateY(-2px) scale(1.015); } }
.narrator .bubble { margin-top: 6px; }
.bubble::before {
  content: ""; position: absolute; left: -7px; top: 14px; width: 12px; height: 12px;
  background: rgba(38,28,74,.95); border-left: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line);
  transform: rotate(45deg);
}
.bubble {
  position: relative; flex: 1;
  background: linear-gradient(160deg, rgba(42,31,82,.78), rgba(18,13,36,.82));
  border: 1px solid var(--gold-line);
  border-radius: 4px 18px 18px 18px;
  padding: 12px 18px 13px;
  font-size: .95rem; line-height: 1.7; color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  min-height: 3.2em;
}
.bubble .who { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.02rem; color: var(--gold); letter-spacing: .5px; margin-bottom: 2px; }
.bubble .say b { color: var(--gold-2); font-weight: 600; }
.bubble .say.pop { animation: bubblePop .35s ease; }
@keyframes bubblePop { from { opacity: .3; transform: translateY(4px); } }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.15em; background: var(--gold); animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ---- Khung vàng kiểu thẻ bài cổ (dùng chung) ---- */
.game-card, .result-card, .horo-result {
  position: relative;
  background:
    linear-gradient(var(--gold), var(--gold)) top 8px left 8px / 14px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top 8px left 8px / 1px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top 8px right 8px / 14px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top 8px right 8px / 1px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom 8px left 8px / 14px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom 8px left 8px / 1px 14px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom 8px right 8px / 14px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom 8px right 8px / 1px 14px no-repeat,
    linear-gradient(165deg, rgba(42,31,82,.55), rgba(14,10,30,.7));
  border: 1px solid rgba(232,200,116,.2);
  box-shadow: inset 0 0 40px rgba(155,123,255,.07), 0 10px 30px rgba(0,0,0,.25);
}

/* ---- Thẻ trò chơi ---- */
.games-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.game-card { padding: 26px 22px 24px; align-items: flex-start; overflow: hidden; }
.game-card::before { /* vệt sáng quét khi hover */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,244,214,.12) 50%, transparent 65%);
  transform: translateX(-100%); transition: transform .8s ease;
}
.game-card:hover::before { transform: translateX(100%); }
.game-card:hover { border-color: rgba(232,200,116,.6); box-shadow: 0 16px 40px rgba(232,200,116,.16), inset 0 0 40px rgba(155,123,255,.12); }
.g-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 6px;
  color: var(--gold);
  background: radial-gradient(circle at 50% 40%, rgba(232,200,116,.16), rgba(155,123,255,.06) 60%, transparent 72%);
  border: 1px solid var(--gold-line);
  box-shadow: 0 0 0 5px rgba(232,200,116,.04);
  transition: transform .5s ease, box-shadow .3s;
}
.g-icon .ico { width: 30px; height: 30px; }
.game-card:hover .g-icon { transform: rotate(18deg) scale(1.06); box-shadow: 0 0 0 5px rgba(232,200,116,.08), 0 0 24px rgba(232,200,116,.35); }
.g-tag { font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--purple); font-weight: 600; }

/* ---- Lá bài: nghiêng 3D + ánh bóng ---- */
.daily-card, .picked-cards .tarot-card { transition: rotate .25s ease-out; }
.card-front .shine {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.35), transparent 45%),
              linear-gradient(115deg, transparent 30%, rgba(232,200,116,.14) 48%, rgba(155,123,255,.12) 55%, transparent 70%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s;
}
.tarot-card:hover .shine { opacity: 1; }
.card-back {
  background: #0d0a24;
  border: 1px solid rgba(233,200,116,.7);
  box-shadow: 0 10px 28px rgba(0,0,0,.6), inset 0 0 26px rgba(120,90,220,.25);
}
/* ánh lá vàng lướt qua mặt sau khi rê chuột */
.card-back::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,244,200,.22) 48%, rgba(255,244,200,.05) 55%, transparent 65%);
  background-size: 250% 100%; background-position: 120% 0;
  transition: background-position .9s ease;
}
.deck .tarot-card:hover .card-back::after, .daily-card:hover .card-back::after { background-position: -20% 0; }
.tarot-card.flipped .card-front { box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(232,200,116,.45), 0 0 30px rgba(232,200,116,.12); }
.fx-ring {
  position: absolute; left: 50%; top: 50%; z-index: 3; pointer-events: none;
  width: 140%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--fx, #D7A94A);
  box-shadow: 0 0 24px var(--fx, #D7A94A), inset 0 0 24px var(--fx, #D7A94A);
  transform: translate(-50%, -50%) scale(.2); opacity: .9;
  animation: fxRing 1.1s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes fxRing { to { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } }
.tarot-card { position: relative; }

/* Lá bài trong quạt: lấp lánh viền khi rê */
.deck .tarot-card:hover .card-back { box-shadow: 0 14px 34px rgba(232,200,116,.35), 0 0 0 1px var(--gold); }

/* ---- Nghi thức xào bài ---- */
.shuffle-stack { position: relative; width: var(--card-w); aspect-ratio: 2 / 3.35; margin: 10px auto 40px; }
.shuffle-card {
  position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(232,200,116,.55);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  animation: riffle 1.25s cubic-bezier(.5,.05,.3,1) both;
  animation-delay: calc(var(--i) * 18ms);
}
@keyframes riffle {
  0%   { transform: translate(0, calc(var(--i) * -1px)); }
  30%  { transform: translate(calc(var(--side) * 62%), calc(var(--i) * -1px)) rotate(calc(var(--side) * 9deg)); }
  55%  { transform: translate(calc(var(--side) * 62%), calc(var(--i) * -1px)) rotate(calc(var(--side) * 9deg)); }
  85%  { transform: translate(0, calc(var(--i) * -2px)) rotate(calc(var(--side) * -2deg)); }
  100% { transform: translate(0, calc(var(--i) * -1px)); }
}

/* ---- Ảnh thu nhỏ lá bài trong kết quả ---- */
.card-thumb {
  flex: 0 0 auto; display: block;
  width: 74px; aspect-ratio: 2 / 3.35;
  padding: 3px; border-radius: 9px;
  background: linear-gradient(170deg, #FFF9EA, #F5E8D1);
  box-shadow: 0 8px 20px rgba(0,0,0,.45), 0 0 0 1px rgba(232,200,116,.5);
}
.card-thumb img { width: 100%; height: 100%; display: block; border-radius: 6px; object-fit: fill; }
.card-thumb.rev img { transform: rotate(180deg); }
.result-card { padding: 24px 28px; gap: 22px; }
.result-card p { line-height: 1.75; }

/* ---- Tóm tắt trải bài ---- */
.reading-summary {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 4px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 99px; font-size: .82rem;
  border: 1px solid var(--gold-line); color: var(--gold-2);
  background: rgba(232,200,116,.06);
}
.chip .ico { width: 15px; height: 15px; color: var(--gold); }

.deck-hint .muted { color: var(--muted); }
.moon-chip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.moon-svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(245,224,163,.4)); }
.verdict-card .card-thumb { width: 64px; }
.result-card > .g-icon, .result-card > .owl { margin: 0 6px 0 0; }

/* ---- Tử vi ---- */
.z-icon { font-family: "Segoe UI Symbol", "Noto Sans Symbols", serif; font-size: 1.9rem; text-shadow: 0 0 14px rgba(232,200,116,.45); }
.zodiac-btn { transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; }
.zodiac-btn:hover { box-shadow: 0 0 22px rgba(155,123,255,.25); }
.horo-row .k { display: inline-flex; align-items: center; gap: 6px; }
.horo-row .k .ico { color: var(--gold); }
.horo-head .big-icon { font-family: "Segoe UI Symbol", "Noto Sans Symbols", serif; color: var(--gold); text-shadow: 0 0 16px rgba(232,200,116,.5); }

/* ---- Câu chuyện Hành trình Kẻ Ngố ---- */
.story-title {
  text-align: center; font-family: var(--serif); font-weight: 700; font-style: italic;
  font-size: clamp(1.6rem, 4.5vw, 2.3rem); color: var(--gold-2);
  text-shadow: 0 0 30px rgba(232,200,116,.25);
}
.story-title small { display: block; font-style: normal; font-family: "Be Vietnam Pro", sans-serif; font-size: .75rem; letter-spacing: 3px; text-transform: uppercase; color: var(--purple); margin-bottom: 6px; }
.chapter { animation: rise .6s ease both; }
.chapter .story-text { line-height: 1.85; }
.chapter .story-text::first-letter { font-family: var(--serif); font-size: 2.6em; float: left; line-height: .9; margin: 4px 8px 0 0; color: var(--gold); }
.story-controls { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.story-ending { text-align: center; padding: 30px 26px; }
.story-ending h4 { font-family: var(--serif); font-size: 1.7rem; color: var(--gold-2); margin-bottom: 10px; }
.story-ending .card-row { display: flex; justify-content: center; gap: 8px; margin: 16px 0 6px; flex-wrap: wrap; }
.story-ending .card-thumb { width: 52px; }

@media (max-width: 640px) {
  .hero-astro { opacity: .35; }
  .card-thumb { width: 58px; }
  .result-card { padding: 20px 18px; gap: 14px; }
  .owl { width: 58px; height: 58px; }
  .owl::after { transform-origin: 2.5px 39px; }
  .bubble { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .astrolabe g, .nebula::after, .sound-toggle.playing, .owl, .owl::before, .owl::after { animation: none !important; }
}

/* Story mode: highlight lá đang được kể */
.picked-cards .tarot-card { transition: transform .4s ease, filter .4s ease; }
.picked-cards.reading-on .tarot-card:not(.reading) { filter: brightness(.6) saturate(.7); }
.picked-cards .tarot-card.reading { transform: translateY(-10px) scale(1.04); filter: drop-shadow(0 0 18px rgba(233,183,79,.55)); }
.guide summary .ico { vertical-align: -3px; }
.num-badge { flex-direction: column; gap: 2px; }
.num-badge .ico { width: 16px; height: 16px; opacity: .75; }
.m-detail-card .card-thumb { float: right; margin: 0 0 10px 14px; }
.m-hint .ico, .big3-icon .ico, .astro-head h3 .ico { vertical-align: -3px; }
.big3-icon { display: flex; gap: 8px; justify-content: center; align-items: center; color: var(--gold); }
/* Cú Nguyệt to hơn ở hero & đầu mỗi trò chơi */
.hero .narrator .owl, .game-hero > .narrator .owl { width: 96px; height: 96px; }
.hero .narrator .owl::after, .game-hero > .narrator .owl::after { transform-origin: 2.5px 58px; }
.hero .narrator .bubble, .game-hero > .narrator .bubble { margin-top: 14px; }
@media (max-width: 640px) {
  .hero .narrator .owl, .game-hero > .narrator .owl { width: 70px; height: 70px; }
  .hero .narrator .owl::after, .game-hero > .narrator .owl::after { transform-origin: 2.5px 45px; }
}

/* ---- Mobile: phản hồi khi chạm ---- */
.tap-ripple {
  position: fixed; z-index: 61; pointer-events: none;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 1.5px solid rgba(247,227,161,.55);
  box-shadow: 0 0 14px rgba(232,200,116,.35), inset 0 0 10px rgba(185,164,255,.25);
  animation: tapRipple .55s cubic-bezier(.2,.7,.3,1) forwards;
}
.tap-ripple.strong { border-color: rgba(247,227,161,.9); animation-duration: .7s; }
@keyframes tapRipple {
  from { transform: scale(.2); opacity: 1; }
  to { transform: scale(1.6); opacity: 0; }
}
.owl { cursor: pointer; -webkit-user-select: none; user-select: none; }
.owl-poke { animation: owlPoke .6s cubic-bezier(.3,1.6,.5,1) !important; }
@keyframes owlPoke {
  0% { transform: scale(1); } 30% { transform: scale(.86) rotate(-8deg); }
  60% { transform: scale(1.1) rotate(6deg); } 100% { transform: scale(1); }
}
.owl-hoot {
  position: fixed; z-index: 62; pointer-events: none; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; font: 600 .78rem/1.3 "Be Vietnam Pro", sans-serif;
  color: #1a1030; background: linear-gradient(135deg, #f7e3a1, #e9c874);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 14px rgba(232,200,116,.4);
  animation: owlHoot 1.5s ease-out forwards;
}
@keyframes owlHoot {
  0% { transform: translate(-50%, 0) scale(.5); opacity: 0; }
  15% { transform: translate(-50%, -26px) scale(1.05); opacity: 1; }
  75% { transform: translate(-50%, -34px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -48px) scale(.9); opacity: 0; }
}
@media (hover: none) {
  button, .btn, a, summary, [role=button] { touch-action: manipulation; }
  .game-card { transition: rotate .3s ease-out, transform .18s ease, box-shadow .25s; }
  .game-card:active { transform: scale(.97); box-shadow: 0 0 0 1px rgba(232,200,116,.5), 0 0 28px rgba(232,200,116,.28); }
  .game-card:active .g-icon { transform: rotate(18deg) scale(1.08); }
  .deck .tarot-card:active:not(.chosen) { --lift: -18px; z-index: 5; filter: brightness(1.15) drop-shadow(0 0 12px rgba(232,200,116,.55)); }
  .deck .tarot-card:active .card-back::after { background-position: -20% 0; }
  .zodiac-grid > *:active { transform: scale(.94); }
  .sound-toggle:active, .home-fab:active, .nav-toggle:active { transform: scale(.88); }
  .gyro-on .tarot-card .shine { opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .owl-poke { animation: none !important; }
}