:root{
  --ink:#08111f;--ink2:#0d1830;--paper:#f6efe2;--muted:rgba(246,239,226,.68);
  --gold:#dfba74;--gold2:#eccf98;--line:rgba(223,186,116,.18);--softline:rgba(255,255,255,.08);
  --panel:rgba(8,17,31,.88);--shadow:0 22px 52px rgba(0,0,0,.32);
  font-family:"Noto Sans Thai",system-ui,sans-serif
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#050d18;color:var(--paper)}body{overflow-x:hidden}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}.app-shell{min-height:100dvh;position:relative;overflow:hidden;background:var(--ink)}
.screen{min-height:100dvh;display:flex;flex-direction:column;position:relative;animation:fade .4s cubic-bezier(.2,.8,.2,1)}@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.scene{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}.scene:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,9,17,.10) 0%,rgba(5,11,20,.16) 28%,rgba(6,13,24,.72) 70%,#08111f 100%),linear-gradient(110deg,rgba(5,11,20,.58),rgba(5,11,20,.02) 54%,rgba(5,11,20,.34))}.scene-city{background-image:url('assets/photo-nongbua.jpg');background-position:50% 48%}.scene-forest{background-image:url('assets/photo-nong-pa-pong.jpg');background-position:50% 50%}.scene-river{background-image:url('assets/photo-wat-tai.jpg');background-position:50% 54%}.scene-plain{background:radial-gradient(circle at 78% 12%,rgba(223,186,116,.10),transparent 22%),radial-gradient(circle at 16% 18%,rgba(91,133,161,.12),transparent 26%),linear-gradient(180deg,#111f37,#08111f)}
.start-screen{background:#08111f}.start-screen .scene{position:relative;inset:auto;flex:0 0 49dvh;min-height:430px;border-radius:0 0 34px 34px;overflow:hidden;background-position:50% 49%}.start-screen .safe{position:absolute;inset:0 0 auto}.start-screen .hero-copy{position:absolute;top:145px;left:0;right:0;padding:0 20px;max-width:520px}.start-screen .hero-title{font-size:clamp(2.1rem,8.5vw,3.25rem);max-width:10ch}.start-screen .hero-copy p{display:none}.start-screen .sheet{margin-top:-54px}.start-screen .stack{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}.start-screen .choice{min-height:154px;padding:15px 14px;display:flex;flex-direction:column;justify-content:flex-end}.start-screen .choice::before{content:"";width:48px;height:48px;margin:0 0 auto;background:var(--gold2);mask:center/contain no-repeat;opacity:.9}.start-screen .choice:first-child::before{mask-image:url('assets/icon-temple.svg')}.start-screen .choice:nth-child(2)::before{mask-image:url('assets/icon-blessing.svg')}.start-screen .choice span{display:none}.start-screen .choice strong{font-size:1.08rem;margin-top:4px}.start-screen .choice .meta{margin-bottom:0}
.screen:not(.start-screen) .choice[onclick^="pickB("]{display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:center;padding:14px 15px}.screen:not(.start-screen) .choice[onclick^="pickB("]::before{content:"";grid-row:1 / span 3;width:42px;height:42px;background:var(--gold2);mask:center/contain no-repeat;opacity:.9}.screen:not(.start-screen) .choice[onclick="pickB('work')"]::before{mask-image:url('assets/icon-work.svg')}.screen:not(.start-screen) .choice[onclick="pickB('money')"]::before{mask-image:url('assets/icon-money.svg')}.screen:not(.start-screen) .choice[onclick="pickB('love')"]::before{mask-image:url('assets/icon-love.svg')}.screen:not(.start-screen) .choice[onclick="pickB('family')"]::before{mask-image:url('assets/icon-family.svg')}.screen:not(.start-screen) .choice[onclick="pickB('health')"]::before{mask-image:url('assets/icon-health.svg')}.screen:not(.start-screen) .choice[onclick="pickB('luck')"]::before{mask-image:url('assets/icon-luck.svg')}.screen:not(.start-screen) .choice[onclick="pickB('open')"]::before{mask-image:url('assets/icon-open.svg')}.screen:not(.start-screen) .choice[onclick="pickB('calm')"]::before{mask-image:url('assets/icon-calm.svg')}.screen:not(.start-screen) .choice[onclick="pickB('success')"]::before{mask-image:url('assets/icon-success.svg')}
.safe{position:relative;z-index:2;padding:max(18px,env(safe-area-inset-top)) 18px 0}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;align-items:center;gap:10px;color:var(--gold2);font-weight:600}.brand svg{width:26px;height:26px}.brand small{display:block;color:rgba(246,239,226,.52);font-size:.72rem;margin-top:2px;font-weight:400}.back{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);background:rgba(8,17,31,.32);backdrop-filter:blur(8px)}.back svg{width:19px;height:19px}
.hero-copy{position:relative;z-index:2;padding:11vh 20px 0;max-width:520px}.kicker{display:inline-flex;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(8,17,31,.34);backdrop-filter:blur(6px);color:var(--gold2);font-size:.76rem;margin-bottom:14px}.hero-title,h1,h2,h3{font-family:"Noto Serif Thai","Noto Sans Thai",serif;margin:0}.hero-title{font-size:clamp(2.25rem,10vw,3.8rem);line-height:1.03;letter-spacing:-.04em;max-width:9ch}.gold{color:var(--gold2)}.hero-copy p{color:rgba(246,239,226,.78);line-height:1.72;max-width:28ch;margin:14px 0 0}
.sheet{position:relative;z-index:2;margin-top:auto;border-radius:30px 30px 0 0;background:linear-gradient(180deg,rgba(9,18,33,.78),rgba(8,17,31,.98) 12%,#08111f);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -14px 38px rgba(0,0,0,.26);backdrop-filter:blur(14px);padding:17px 17px max(20px,env(safe-area-inset-bottom))}.handle{width:40px;height:4px;background:rgba(255,255,255,.16);border-radius:999px;margin:0 auto 17px}.progress{display:flex;justify-content:center;gap:6px;margin:4px 0 16px}.progress i{width:22px;height:4px;border-radius:999px;background:rgba(255,255,255,.10)}.progress i.on{width:44px;background:linear-gradient(90deg,#cda45f,#ead09a)}
.sheet h2{font-size:clamp(1.58rem,7vw,2.35rem);line-height:1.15;letter-spacing:-.03em}.sheet-copy{color:var(--muted);line-height:1.68;margin:10px 0 0}.stack{display:grid;gap:11px;margin-top:17px}.choice{width:100%;text-align:left;padding:15px 16px;border-radius:20px;border:1px solid var(--softline);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012));box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:.18s ease}.choice:active,.temple-card:active{transform:scale(.985)}.choice .meta{color:rgba(236,207,152,.72);font-size:.73rem;letter-spacing:.05em;margin-bottom:4px}.choice strong{display:block;font-size:1.02rem}.choice span{display:block;color:rgba(246,239,226,.57);font-size:.88rem;line-height:1.46;margin-top:5px}
.temple-card{width:100%;overflow:hidden;text-align:left;border:1px solid var(--softline);border-radius:22px;background:rgba(255,255,255,.02);box-shadow:var(--shadow);transition:.18s ease}.temple-media{height:116px;background-size:cover;background-position:center;position:relative}.temple-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(8,17,31,.16) 54%,rgba(8,17,31,.78))}.media-city{background-image:url('assets/photo-nongbua.jpg');background-position:50% 48%}.media-forest{background-image:url('assets/photo-nong-pa-pong.jpg');background-position:50% 50%}.media-river{background-image:url('assets/photo-wat-tai.jpg');background-position:50% 54%}.temple-body{padding:13px 15px 15px}.temple-num{color:rgba(236,207,152,.70);font-size:.74rem;letter-spacing:.08em}.temple-title{font-size:1.12rem;color:var(--gold2);margin-top:3px}.temple-note{color:rgba(246,239,226,.62);line-height:1.52;font-size:.9rem;margin-top:6px}.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}.chip{font-size:.78rem;padding:6px 9px;border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(255,255,255,.03);color:rgba(246,239,226,.68)}
.result-head{position:relative;z-index:2;min-height:38dvh;padding:18px 20px;display:flex;flex-direction:column}.result-intro{margin-top:auto;padding-bottom:10px}.result-intro h1{font-size:clamp(2rem,8.5vw,3rem);line-height:1.08;letter-spacing:-.035em}.result-intro p{color:rgba(246,239,226,.76);line-height:1.66;max-width:31ch;margin:10px 0 0}.summary{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}.tag{padding:7px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.025);font-size:.8rem;color:var(--gold2)}.route{position:relative;border:1px solid var(--softline);border-radius:22px;padding:15px;background:rgba(255,255,255,.018);overflow:hidden}.route:after{content:"";position:absolute;inset:0;background:url('assets/route-line.svg') center/cover no-repeat;opacity:.13;pointer-events:none}.step{position:relative;z-index:1;display:grid;grid-template-columns:34px 1fr;gap:11px;padding:11px 0}.step+.step{border-top:1px solid rgba(255,255,255,.06)}.dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(223,186,116,.28);background:rgba(223,186,116,.08);color:var(--gold2);font-weight:700}.step h3{font-size:1rem}.step p{margin:5px 0 0;color:rgba(246,239,226,.62);line-height:1.48;font-size:.88rem}.actions{display:grid;gap:10px;margin-top:17px}.primary,.secondary{width:100%;padding:15px 18px;border-radius:999px}.primary{background:linear-gradient(180deg,#e6c88e,#d5ab66);color:#24180a;font-weight:700;box-shadow:0 12px 24px rgba(213,171,102,.20)}.secondary{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025)}.micro{text-align:center;color:rgba(246,239,226,.43);font-size:.78rem;margin-top:12px}
.story-top{position:relative;z-index:2;min-height:46dvh;display:flex;flex-direction:column}.story-badge{margin:auto 18px 16px;align-self:flex-start}.story-sheet{position:relative;z-index:2;margin-top:auto;border-radius:30px 30px 0 0;background:linear-gradient(180deg,rgba(8,17,31,.82),#08111f 17%);border-top:1px solid rgba(255,255,255,.08);padding:18px 17px max(20px,env(safe-area-inset-bottom))}.story-panel{padding:15px;border:1px solid var(--softline);border-radius:20px;background:rgba(255,255,255,.018);margin-top:11px}.story-panel h3{font-size:.98rem;color:var(--gold2);margin-bottom:7px}.story-panel p{margin:0;color:rgba(246,239,226,.68);line-height:1.64}.question{margin-top:12px;padding:15px;border:1px solid var(--line);border-radius:20px;background:rgba(223,186,116,.07);line-height:1.64;color:rgba(246,239,226,.86)}
@media(min-width:780px){.app-shell{width:430px;margin:0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.04),0 20px 80px rgba(0,0,0,.46)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}