/* scenes.css — ฉากประจำศาสตร์ครบ 8 เมนู (29 ก.ย. · + Birth Chart 30 ก.ย.) · คู่กับ js/scenes.js
   1) แถบหัวหน้า .vb — กรอบทองสองชั้น + ลายมุม + ชื่อศาสตร์ตัวทองเรืองแสง + ภาพเคลื่อนไหวเบาๆ
   2) พื้นหลังทั้งหน้า — body::before ไล่สี + #sceneBg (ลายซ้ำ + ภาพใหญ่จางๆ หมุนช้ามาก)
   ธีม: หวานสว่าง / หวานมืด (prefers-color-scheme หรือ data-theme="dark") / เท่ (data-style="cool") */

/* ---------- 1) แถบหัวหน้า ---------- */
.vb { margin: 14px auto 2px; }
.vb[hidden] { display: none; }
.vb-in { position: relative; height: 184px; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  box-shadow: 0 10px 34px var(--sc-glow, rgba(0, 0, 0, .25)), 0 2px 6px rgba(0, 0, 0, .25); animation: fade .5s ease; }
.vb-in > svg.sc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }
.vb-in::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(243, 207, 107, .55); border-radius: calc(var(--radius) - 5px); pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .08), inset 0 0 40px rgba(0, 0, 0, .25); }
.vb-c { position: absolute; width: 30px; height: 30px; color: #f3cf6b; opacity: .9; pointer-events: none; filter: drop-shadow(0 0 4px rgba(243, 207, 107, .5)); }
.vb-c svg { width: 100%; height: 100%; display: block; }
.vb-c.tl { top: 3px; left: 3px; } .vb-c.tr { top: 3px; right: 3px; transform: scaleX(-1); }
.vb-c.bl { bottom: 3px; left: 3px; transform: scaleY(-1); } .vb-c.br { bottom: 3px; right: 3px; transform: scale(-1); }
.vb-t { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); max-width: 60%; color: #fff; }
.vb-k { display: block; font-size: .72rem; letter-spacing: .12em; color: #f6d98a; opacity: .9; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.vb-t b { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 700 1.75rem/1.15 var(--fh), sans-serif; }
.vb-ic { font-size: 1.55rem; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.vb-tt { background: linear-gradient(180deg, #fffaf0 0%, #ffe7a3 45%, #e9b949 70%, #c38a24 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(243, 207, 107, .45)); }
.vb-d { display: flex; align-items: center; gap: 6px; margin: 5px 0 3px; color: #f3cf6b; font-size: .7rem; width: 150px; max-width: 100%; }
.vb-d i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #f3cf6b); } .vb-d i:last-child { transform: scaleX(-1); }
.vb-s { display: block; font-size: .8rem; color: #fff; opacity: .9; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
/* มือถือ: ดันภาพหลักไปทางขวา ~12% ให้ชื่อศาสตร์มีที่ว่าง (ภาพชิดขวาอยู่แล้ว ส่วนที่เกินขอบถูกตัด) */
@media (max-width: 559px) { .vb-in > svg.sc-svg { left: auto; right: -12%; width: 112%; } .vb-t { max-width: 56%; } .vb-t b { font-size: 1.5rem; } .vb-ic { font-size: 1.3rem; } }
@media (min-width: 560px) { .vb-in { height: 224px; } .vb-t { left: 34px; } .vb-t b { font-size: 2.3rem; } .vb-ic { font-size: 2rem; } .vb-k { font-size: .8rem; } .vb-s { font-size: .9rem; } .vb-c { width: 40px; height: 40px; } }

.vb.paused svg, .vb.paused svg * { animation-play-state: paused !important; }
/* การเคลื่อนไหวในฉาก (SVG) — ตั้ง transform-origin เป็นพิกัดของภาพไว้ในแต่ละชิ้นแล้ว */
.sc-tw { animation: scTw 4s ease-in-out infinite; }
.sc-rot { animation: scRot 100s linear infinite; }
.sc-rot-r { animation: scRot 80s linear infinite reverse; }
.sc-float { animation: scFloat 5s ease-in-out infinite; }
.sc-sway { animation: scSway 5s ease-in-out infinite; }
.sc-drift { animation: scDrift 30s ease-in-out infinite alternate; }
.sc-wave { animation: scWave 8s ease-in-out infinite alternate; }
.sc-fall { animation: scFall 9s linear infinite; }
.sc-rise { animation: scRise 7s linear infinite; }
.sc-smoke { animation: scSmoke 6s ease-in-out infinite; }
.sc-pulse { animation: scPulse 3.6s ease-out infinite; }
.sc-shoot { animation: scShoot 9s ease-in infinite; opacity: 0; }
@keyframes scTw { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes scRot { to { transform: rotate(360deg); } }
@keyframes scFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes scSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes scDrift { from { transform: translateX(-12px); } to { transform: translateX(22px); } }
@keyframes scWave { from { transform: translateY(-3px); } to { transform: translateY(4px); } }
@keyframes scFall { from { transform: translateY(-20px) rotate(0); opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } to { transform: translate(-30px, 220px) rotate(260deg); opacity: 0; } }
@keyframes scRise { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translate(-10px, -140px); opacity: 0; } }
@keyframes scSmoke { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes scPulse { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.3); opacity: 0; } }
@keyframes scShoot { 0% { transform: translate(380px, 14px) rotate(18deg); opacity: 0; } 3% { opacity: 1; } 12% { transform: translate(600px, 86px) rotate(18deg); opacity: 0; } 100% { transform: translate(600px, 86px) rotate(18deg); opacity: 0; } }

/* ---------- 2) พื้นหลังทั้งหน้า ---------- */
#sceneBg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#sceneBg:empty { display: none; }
#sceneBg .sb-pat { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--scp); opacity: var(--scpo);
  -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .35) 30%, rgba(0, 0, 0, .35) 70%, #000); mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .35) 30%, rgba(0, 0, 0, .35) 70%, #000); }
#sceneBg .sb-wm { position: absolute; right: -14vmin; bottom: -14vmin; width: 78vmin; height: 78vmin; color: var(--scw); opacity: var(--scwo); animation: scRot 300s linear infinite; will-change: transform; } /* แยกเลเยอร์ให้การ์ดจอหมุน ไม่ต้องวาดใหม่ทั้งจอ */
@media print { .vb, #sceneBg { display: none !important; } }

:root:is([data-view="home"], [data-view="tarot"], [data-view="bazi"], [data-view="color"], [data-view="phone"], [data-view="mbti"], [data-view="seamsi"], [data-view="match"], [data-view="astro"]) body::before {
  background: radial-gradient(ellipse at 85% 0%, var(--sc-glow), transparent 55%), radial-gradient(ellipse at 0% 100%, var(--sc-glow), transparent 50%), linear-gradient(180deg, var(--sc1) 0%, var(--sc2) 100%);
}
:root:is([data-view="home"], [data-view="tarot"], [data-view="bazi"], [data-view="color"], [data-view="phone"], [data-view="mbti"], [data-view="seamsi"], [data-view="match"], [data-view="astro"]) #app .card {
  border-color: color-mix(in srgb, var(--scp) 30%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--scp) 12%, transparent), 0 10px 30px var(--sc-glow);
}

/* ---------- หน้าแรก: การ์ด 8 ศาสตร์มีภาพฉากของตัวเองเป็นพื้น ---------- */
.menu.scenic .tile { position: relative; overflow: hidden; isolation: isolate; min-height: 168px; justify-content: flex-end; color: #fff; border-color: rgba(243, 207, 107, .45);
  box-shadow: 0 8px 24px rgba(60, 20, 8, .28); }
.menu.scenic .tile > .ic, .menu.scenic .tile > b, .menu.scenic .tile > span.small { position: relative; z-index: 1; }
.tile-art { position: absolute; inset: 0; z-index: -1; display: block; }
.tile-art svg { width: 100%; height: 100%; display: block; }
.tile-art svg, .tile-art svg * { animation: none !important; } /* การ์ดเป็นภาพนิ่ง — เคลื่อนไหวเฉพาะแถบหัว */
.tile-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 8, 4, 0) 28%, rgba(22, 8, 4, .55) 58%, rgba(22, 8, 4, .88) 100%); }
.tile-art::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(243, 207, 107, .5); border-radius: calc(var(--radius) - 4px); }
.menu.scenic .tile .ic { font-size: 1.5rem; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; margin-bottom: auto;
  background: rgba(30, 10, 5, .55); border: 1px solid rgba(243, 207, 107, .6); box-shadow: 0 0 12px rgba(243, 207, 107, .35); }
.menu.scenic .tile b { font-size: 1.12rem; color: #ffe9a8; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.menu.scenic .tile span.small { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.menu.scenic .tile:hover, .menu.scenic .tile:focus-visible { box-shadow: 0 12px 30px rgba(60, 20, 8, .4), 0 0 0 2px rgba(243, 207, 107, .6); }
.menu.scenic .tile.locked .tile-art { filter: grayscale(.55) brightness(.62); }
/* การ์ดที่ล็อก: ชื่อเมนูอยู่หน้าโซ่ อ่านชัดเต็มตา (โซ่+กุญแจบอกสถานะอยู่แล้ว ไม่ต้องทำชื่อให้จาง) */
.menu.scenic .tile.locked > b, .menu.scenic .tile.locked > span.small, .menu.scenic .tile.locked > .ic { z-index: 3; opacity: 1; filter: none; }
.menu.scenic .tile.locked > span.small { opacity: .85; }
@media (min-width: 560px) { .menu.scenic .tile { min-height: 190px; } }

/* สีต่อศาสตร์ — สว่าง (ค่าเริ่มต้น) */
:root[data-view="home"]   { --sc1: #fbf5ea; --sc2: #f3e2c4; --scp: #b8322a; --scpo: .12; --scw: #b07a1a; --scwo: .10; --sc-glow: rgba(214, 150, 50, .18); }
:root[data-view="tarot"]  { --sc1: #f8f4ec; --sc2: #e4e6ee; --scp: #1f3a66; --scpo: .14; --scw: #b07a1a; --scwo: .09; --sc-glow: rgba(31, 58, 102, .14); }
:root[data-view="bazi"]   { --sc1: #fcf3e6; --sc2: #f2dcbd; --scp: #b3261e; --scpo: .13; --scw: #b3261e; --scwo: .07; --sc-glow: rgba(179, 38, 30, .13); }
:root[data-view="color"]  { --sc1: #f6f7ee; --sc2: #e1eddd; --scp: #146b54; --scpo: .15; --scw: #c07a2a; --scwo: .09; --sc-glow: rgba(20, 107, 84, .15); }
:root[data-view="phone"]  { --sc1: #eef7fb; --sc2: #d6ebf5; --scp: #1d7aa6; --scpo: .14; --scw: #1d7aa6; --scwo: .07; --sc-glow: rgba(29, 122, 166, .15); }
:root[data-view="mbti"]   { --sc1: #f5f5f2; --sc2: #e2e6ea; --scp: #3a4a5e; --scpo: .14; --scw: #3a4a5e; --scwo: .07; --sc-glow: rgba(58, 74, 94, .14); }
:root[data-view="seamsi"] { --sc1: #fdf2ea; --sc2: #f3d9c6; --scp: #a8321f; --scpo: .13; --scw: #a8321f; --scwo: .07; --sc-glow: rgba(168, 50, 31, .14); }
:root[data-view="match"]  { --sc1: #fdf0f4; --sc2: #f6d9e4; --scp: #d23a64; --scpo: .15; --scw: #d23a64; --scwo: .08; --sc-glow: rgba(210, 58, 100, .15); }
:root[data-view="astro"]  { --sc1: #f3f7f6; --sc2: #d9e8e8; --scp: #1d5a63; --scpo: .14; --scw: #b07a1a; --scwo: .09; --sc-glow: rgba(29, 90, 99, .15); }

/* สีต่อศาสตร์ — มืด (หวานมืด + ธีมเท่) · ลายเปลี่ยนเป็นทอง/สีสว่าง */
:root[data-view="home"]:is([data-theme="dark"], [data-style="cool"])   { --sc1: #140a06; --sc2: #2c130c; --scp: #f6d98a; --scpo: .12; --scw: #f6d98a; --scwo: .07; --sc-glow: rgba(230, 120, 50, .20); }
:root[data-view="tarot"]:is([data-theme="dark"], [data-style="cool"])  { --sc1: #050b18; --sc2: #0f2142; --scp: #f6d98a; --scpo: .13; --scw: #f6d98a; --scwo: .07; --sc-glow: rgba(70, 120, 220, .20); }
:root[data-view="bazi"]:is([data-theme="dark"], [data-style="cool"])   { --sc1: #170807; --sc2: #2c1210; --scp: #e9b949; --scpo: .12; --scw: #e9b949; --scwo: .07; --sc-glow: rgba(200, 50, 30, .20); }
:root[data-view="color"]:is([data-theme="dark"], [data-style="cool"])  { --sc1: #03140f; --sc2: #0b2e24; --scp: #e9b949; --scpo: .13; --scw: #e9b949; --scwo: .07; --sc-glow: rgba(40, 180, 130, .18); }
:root[data-view="phone"]:is([data-theme="dark"], [data-style="cool"])  { --sc1: #05111b; --sc2: #0c2436; --scp: #5fe0ff; --scpo: .11; --scw: #f3cf6b; --scwo: .07; --sc-glow: rgba(60, 180, 230, .18); }
:root[data-view="mbti"]:is([data-theme="dark"], [data-style="cool"])   { --sc1: #0a0d12; --sc2: #1a222d; --scp: #d6dde8; --scpo: .11; --scw: #f3cf6b; --scwo: .07; --sc-glow: rgba(130, 150, 180, .18); }
:root[data-view="seamsi"]:is([data-theme="dark"], [data-style="cool"]) { --sc1: #160507; --sc2: #2e0c12; --scp: #e9b949; --scpo: .12; --scw: #e9b949; --scwo: .07; --sc-glow: rgba(220, 80, 40, .20); }
:root[data-view="match"]:is([data-theme="dark"], [data-style="cool"])  { --sc1: #1a060c; --sc2: #360f1e; --scp: #ffb7cf; --scpo: .12; --scw: #ff6f91; --scwo: .07; --sc-glow: rgba(230, 70, 120, .20); }
:root[data-view="astro"]:is([data-theme="dark"], [data-style="cool"])  { --sc1: #03121a; --sc2: #0b2b35; --scp: #f6d98a; --scpo: .12; --scw: #f6d98a; --scwo: .07; --sc-glow: rgba(40, 160, 170, .18); }
@media (prefers-color-scheme: dark) {
  :root[data-view="home"]:not([data-theme="light"])   { --sc1: #140a06; --sc2: #2c130c; --scp: #f6d98a; --scpo: .12; --scw: #f6d98a; --scwo: .07; --sc-glow: rgba(230, 120, 50, .20); }
  :root[data-view="tarot"]:not([data-theme="light"])  { --sc1: #050b18; --sc2: #0f2142; --scp: #f6d98a; --scpo: .13; --scw: #f6d98a; --scwo: .07; --sc-glow: rgba(70, 120, 220, .20); }
  :root[data-view="bazi"]:not([data-theme="light"])   { --sc1: #170807; --sc2: #2c1210; --scp: #e9b949; --scpo: .12; --scw: #e9b949; --scwo: .07; --sc-glow: rgba(200, 50, 30, .20); }
  :root[data-view="color"]:not([data-theme="light"])  { --sc1: #03140f; --sc2: #0b2e24; --scp: #e9b949; --scpo: .13; --scw: #e9b949; --scwo: .07; --sc-glow: rgba(40, 180, 130, .18); }
  :root[data-view="phone"]:not([data-theme="light"])  { --sc1: #05111b; --sc2: #0c2436; --scp: #5fe0ff; --scpo: .11; --scw: #f3cf6b; --scwo: .07; --sc-glow: rgba(60, 180, 230, .18); }
  :root[data-view="mbti"]:not([data-theme="light"])   { --sc1: #0a0d12; --sc2: #1a222d; --scp: #d6dde8; --scpo: .11; --scw: #f3cf6b; --scwo: .07; --sc-glow: rgba(130, 150, 180, .18); }
  :root[data-view="seamsi"]:not([data-theme="light"]) { --sc1: #160507; --sc2: #2e0c12; --scp: #e9b949; --scpo: .12; --scw: #e9b949; --scwo: .07; --sc-glow: rgba(220, 80, 40, .20); }
  :root[data-view="match"]:not([data-theme="light"])  { --sc1: #1a060c; --sc2: #360f1e; --scp: #ffb7cf; --scpo: .12; --scw: #ff6f91; --scwo: .07; --sc-glow: rgba(230, 70, 120, .20); }
  :root[data-view="astro"]:not([data-theme="light"])  { --sc1: #03121a; --sc2: #0b2b35; --scp: #f6d98a; --scpo: .12; --scw: #f6d98a; --scwo: .07; --sc-glow: rgba(40, 160, 170, .18); }
}