/* ====== Theme base ====== */
:root{
  --bg:#08090c;
  --panel:#101216;
  --panel-2:#0c0e12;
  --text:#e9e9ef;
  --muted:#cfd1d7;

  --gold:#e8c982;
  --gold-2:#b89347;
  --ring:rgba(232,201,130,.48);

  --stroke:rgba(255,255,255,.06);
  --glass:rgba(12,14,18,.68);
  --shadow-lg:0 30px 80px rgba(0,0,0,.55);
  --shadow-md:0 14px 40px rgba(0,0,0,.45);
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(232,201,130,.08), transparent 60%),
    radial-gradient(800px 400px at 15% 10%, rgba(135,80,245,.08), transparent 50%),
    #000 url('bg.png') center/cover no-repeat fixed;
  font:16px/1.65 "Noto Sans Thai","K2D",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  letter-spacing:.15px;
}
[hidden]{display:none !important}
.sr-only{position:absolute;left:-9999px}

/* ====== Topbar ====== */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:18px;
  padding:10px 18px; border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(5,6,8,.75), rgba(5,6,8,.45));
  backdrop-filter: blur(10px);
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.brand-text{
  font-weight:700; letter-spacing:.4px;
  opacity:.9; color:#fff; display:none;
}
.mainnav{
  display:flex; gap:18px; margin-left:8px;
}
.mainnav a{
  color:#dcdde3; text-decoration:none;
  opacity:.86; position:relative;
  padding:6px 10px;
  border-radius:999px;
}
.mainnav a:is(:hover,.is-active){
  color:#0f0f12;
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
}
.hamburger{
  margin-left:auto; background:none; border:0;
  width:38px; height:28px; display:none; cursor:pointer;
}
.hamburger span{
  display:block; height:2px; background:var(--gold);
  margin:6px 0; border-radius:2px; transition:transform .2s ease;
}

/* mobile menu */
.mobile-menu{
  position:absolute;
  top:56px; right:12px;
  background:rgba(8,9,12,.96);
  border-radius:14px;
  padding:8px 10px;
  border:1px solid var(--stroke);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mobile-menu a{
  color:#e0e0ea;
  text-decoration:none;
  padding:6px 10px;
  border-radius:10px;
}
.mobile-menu a.is-active,
.mobile-menu a:hover{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#111;
}

/* ====== Layout ====== */
.wrap{
  max-width:1150px;
  margin:0 auto;
  padding:26px 18px 120px;
}

/* ====== Hero ====== */
.hero{
  text-align:center;
  margin-top:6px;
}
.hero-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:28px 18px 26px;
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.hero-glow{
  position:absolute; inset:-1px;
  background:
    radial-gradient(500px 220px at 50% -60px, rgba(232,201,130,.16), transparent 60%),
    radial-gradient(380px 160px at 80% 10%, rgba(153,110,255,.15), transparent 60%);
  pointer-events:none; z-index:0;
}
.title-gradient{
  position:relative; z-index:1;
  font-size:46px; margin:6px 0 10px; letter-spacing:.4px;
  background:linear-gradient(180deg,#fff, #e8e8ef 60%, #c7c7d3);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.06);
}
.hero .sub{
  position:relative; z-index:1;
  max-width:940px; margin:0 auto 18px;
  color:#e7e8ed; opacity:.92;
}
.btn{
  cursor:pointer; border:0;
  border-radius:14px; font-weight:700;
}
.btn-xl{
  padding:14px 22px; font-size:1.05rem;
}

/* ปุ่มทองหรู */
.btn-grad{
  position:relative;
  background:linear-gradient(180deg, var(--gold), var(--gold-2));
  color:#1a1407;
  border:1px solid rgba(232,201,130,.6);
  border-radius:14px;
  padding:12px 20px;
  font-weight:700;
  box-shadow:
    0 10px 30px rgba(232,201,130,.28),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.15);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-grad::after{
  content:"";
  position:absolute; inset:2px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03));
  pointer-events:none;
}
.btn-grad:hover{
  transform:translateY(-2px);
  box-shadow:
    0 16px 42px rgba(232,201,130,.33),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.18);
  filter:saturate(106%);
}
.btn-grad:active{
  transform:translateY(0);
  filter:saturate(102%);
}
.btn-grad:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px;
}

.btn-dark{
  background:#1a1c21; color:#eee;
  border:1px solid var(--stroke);
  padding:10px 16px;
  border-radius:12px;
}

/* ====== Tarot Carousel (ตัวอย่างไพ่แบบ 3D) ====== */
.carousel-wrap{
  margin:28px auto 10px;
  max-width:1000px;
  position:relative;
}

/* panel โปร่ง ให้การ์ดลอยบนพื้นหลังเว็บ */
.carousel{
  position:relative;
  padding:18px 10px 24px;
  border-radius:22px;
  background:transparent;
  border:none;
  box-shadow:none;
  display:flex;
  align-items:center;
  gap:12px;
  overflow:hidden;
}
.carousel > *{
  position:relative;
  z-index:1;
}

.car-arrow{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(12,14,18,.9);
  color:#f5f5f7;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  flex-shrink:0;
}
.car-arrow:hover{
  border-color:var(--gold);
  color:var(--gold);
}
.car-window{
  flex:1;
  position:relative;
  height:260px;
  perspective:1200px;
}
.car-track{
  position:relative;
  width:100%;
  height:100%;
}
.car-card{
  position:absolute;
  top:50%; left:50%;
  width:230px;
  max-width:56vw;
  padding:14px 14px 16px;
  border-radius:20px;
  transform-origin:center center;
  background:linear-gradient(180deg, rgba(15,15,20,.98), rgba(5,5,9,.98));
  border:1px solid var(--stroke);
  box-shadow:0 18px 45px rgba(0,0,0,.65);
  transform:translate(-50%,-50%) scale(.7) translateZ(0);
  opacity:0;
  pointer-events:none;
  transition:
    transform .32s ease,
    opacity .22s ease,
    box-shadow .32s ease,
    filter .32s ease;
}
.car-card h3{
  margin:8px 0 4px;
  font-size:1.02rem;
}
.car-card p{
  margin:0;
  font-size:0.9rem;
  color:var(--muted);
}
.car-img-wrap{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 38px rgba(0,0,0,.72);
}
.car-img-wrap img{
  display:block;
  width:100%;
  height:190px;
  object-fit:cover;
}

/* ตำแหน่งแต่ละใบ */
.car-card.is-center{
  opacity:1;
  pointer-events:auto;
  transform:
    translate(-50%,-52%)
    translateZ(80px)
    scale(1.06);
  z-index:3;
}
.car-card.is-left{
  opacity:.9;
  transform:
    translate(-116%,-50%)
    rotateY(16deg)
    translateZ(10px)
    scale(.9);
  z-index:2;
}
.car-card.is-right{
  opacity:.9;
  transform:
    translate(16%,-50%)
    rotateY(-16deg)
    translateZ(10px)
    scale(.9);
  z-index:2;
}
.car-card.is-back{
  opacity:0;
  z-index:1;
}

/* จุดบอกตำแหน่ง */
.car-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}
.car-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.25);
  padding:0;
  cursor:pointer;
}
.car-dot.is-active{
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(232,201,130,.34);
}

/* ====== Board / Deck (สำหรับเลือกไพ่จริง) ====== */
.board{
  margin-top:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow-md);
  perspective:900px;
}
.board-head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:10px;
}
.mode-chip{
  margin-left:auto; color:#d9d9d9; opacity:.95; font-size:.95rem;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.02);
}
.deck{
  list-style:none; margin:10px 0 0; padding:0;
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:16px;
}

/* การ์ดกองไพ่ + 3D */
.card{
  width:152px; height:216px; border-radius:14px;
  background:#111 url('b.png') center/cover no-repeat;
  border:1px solid var(--stroke);
  position:relative; cursor:pointer; user-select:none;
  transition:transform .18s ease, box-shadow .18s ease, outline .18s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  outline:0;
  transform-style:preserve-3d;
}
.card:focus-visible{
  outline:3px solid var(--ring);
}
.card img{
  display:block; width:100%; height:100%;
  object-fit:cover; border-radius:14px;
}

/* hover ปกติ: เด้ง+เอียง */
.card:hover{
  transform:translateY(-6px) rotateX(8deg) rotateY(-8deg);
  box-shadow:0 22px 46px rgba(0,0,0,.55);
}

/* ตอนสุ่ม: ยกสูง+เอียงแรงขึ้น */
.card.is-raise{
  transform:translateY(-18px) rotateX(12deg) rotateY(-10deg) !important;
  box-shadow:0 26px 56px rgba(0,0,0,.6), 0 0 0 4px var(--ring) inset;
}

/* ====== Warning Popup (คำเตือนไพ่ยิปซีรายวัน) ====== */
.warning-popup{
  position:fixed;
  left:50%; bottom:-140px;
  transform:translateX(-50%);
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:transform .35s ease, opacity .35s ease;
}
.warning-popup.is-show{
  bottom:70px;
  opacity:1;
  pointer-events:auto;
}
.warning-inner{
  min-width:min(540px, 90vw);
  background:rgba(12,12,18,.96);
  border-radius:16px;
  border:1px solid rgba(232,201,130,.6);
  box-shadow:0 18px 46px rgba(0,0,0,.85);
  padding:10px 14px 10px;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.warning-inner strong{
  color:var(--gold);
  margin-top:2px;
  flex-shrink:0;
}
.warning-inner p{
  margin:0;
  font-size:.9rem;
  color:#f4f0da;
}
.warning-close{
  margin-left:auto;
  align-self:flex-start;
  background:transparent;
  border:0;
  color:#f8f5e6;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}

/* ====== Bottombar ====== */
.bottombar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.85));
  border-top:1px solid var(--stroke);
}
.bottombar .inner{
  max-width:1150px; margin:auto; padding:10px 16px;
  display:flex; gap:16px; align-items:center;
  justify-content:space-between;
}
.foot-left,.foot-right{
  display:flex; gap:10px; align-items:center;
}
.dot{
  width:5px; height:5px; border-radius:999px;
  background:#cfcfcf; display:inline-block;
}

/* ====== Modals ====== */
.overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index:40;
}
.modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  z-index:45; padding:10px;
}
.modal-card{
  width:min(920px, 100%);
  border:1px solid rgba(232,201,130,.35);
  background:
    radial-gradient(1200px 500px at 50% -200px, rgba(232,201,130,.06), transparent 60%),
    #101113;
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  max-height:90vh;
  overflow:auto;
}
.md-compact{width:min(520px, 100%)}
.md-wide{width:min(980px, 100%)}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 8px;
  position:sticky; top:0;
  background:linear-gradient(180deg, rgba(16,17,19,.98), rgba(16,17,19,.92));
  border-bottom:1px solid var(--stroke);
}
.modal-head h3{
  margin:0; font-size:22px;
}
.modal-head .x{
  background:#1c1d20; color:#fff; border:0;
  border-radius:999px; width:34px; height:34px; cursor:pointer;
}
.modal-body{
  padding:12px 16px 18px;
}
.modal-body.center{text-align:center}
.actions-row{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.head-with-logo{
  display:flex; align-items:center; gap:10px;
}
.head-logo{
  height:18px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.hint{opacity:.9}

.pray{margin:6px 0 10px}
.hourglass{
  width:28px; height:28px;
  margin:12px auto 8px;
  border:3px solid rgba(232,201,130,.7);
  border-top-color:transparent;
  border-radius:50%;
  animation:spin 1.1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.muted{
  opacity:.86; text-align:center;
  margin:2px 0 14px;
}

/* ====== Result ====== */
.result-no-scroll{max-height:unset}
.result-title{
  display:flex; align-items:center; gap:12px;
}
.readtime{
  margin-left:auto;
  display:flex; align-items:center;
  gap:10px; opacity:.95;
}
.brand-mini{
  height:20px; width:auto; display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.result-body{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:16px;
  padding:12px 16px 18px;
}

/* หุ้มการ์ดหลักให้พร้อมโชว์ 3D */
.result-left{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px;
}

/* การ์ดเงาซ้อนด้านหลังซ้ายขวา */
.result-left::before,
.result-left::after{
  content:"";
  position:absolute;
  width:78%;
  aspect-ratio:3/4;
  border-radius:14px;
  background:#05060a;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.7);
  z-index:0;
}

/* ใบซ้าย */
.result-left::before{
  transform:
    translateX(-32px)
    translateY(18px)
    rotateY(-22deg)
    rotateX(4deg)
    scale(.9);
  opacity:.85;
}

/* ใบขวา */
.result-left::after{
  transform:
    translateX(32px)
    translateY(22px)
    rotateY(22deg)
    rotateX(4deg)
    scale(.9);
  opacity:.85;
}

/* ใบหลัก (รูปไพ่จริง) */
.card-front{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  max-width:320px;
  height:auto;
  border-radius:14px;
  box-shadow:0 24px 55px rgba(0,0,0,.7);
  object-fit:contain;
  transform:
    translateZ(40px)
    rotateX(6deg);
  transition:transform .25s ease, box-shadow .25s ease;
}

/* hover แล้วการ์ดเด้งแบบ 3D สไลด์ */
.result-left:hover .card-front{
  transform:
    translateY(-8px)
    translateZ(70px)
    rotateX(8deg)
    rotateY(-4deg);
  box-shadow:0 32px 70px rgba(0,0,0,.85);
}

.result-right{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.field{
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.field h4{
  margin:0 0 6px;
  color:var(--gold);
}

/* ====== SEO / FAQ Blocks ====== */
.seo-card,
.faq-card{
  margin-top:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:18px 16px 20px;
  box-shadow:var(--shadow-md);
}
.seo-card h2,
.faq-card h2{
  margin:4px 0 10px;
  font-size:1.25rem;
  color:#fff;
}
.seo-card p,
.faq-card p{
  margin:4px 0 10px;
  color:var(--muted);
}
.faq-card h3{
  margin:14px 0 4px;
  font-size:1rem;
  color:var(--gold);
}
.seo-card a,
.faq-card a{
  color:var(--gold);
  text-decoration:none;
}
.seo-card a:hover,
.faq-card a:hover{
  text-decoration:underline;
}

/* ====== Responsive ====== */
@media (max-width:1200px){
  .deck{grid-template-columns:repeat(6,1fr);}
}
@media (max-width:992px){
  .mainnav{display:none;}
  .hamburger{display:block;}
  .deck{grid-template-columns:repeat(3,1fr);}
  .card{width:120px; height:170px;}
  .result-body{grid-template-columns:1fr;}
  .result-right{grid-template-columns:1fr;}
  .brand-text{display:inline;}
  .carousel-wrap{max-width:100%; margin-top:22px;}
}
@media (max-width:600px){
  .title-gradient{font-size:34px;}
  .modal-card{
    width:calc(100% - 14px);
    max-height:92vh;
  }
  .result-body{
    grid-template-columns:1fr;
    gap:12px;
  }
  .result-left::before,
  .result-left::after{
    width:82%;
    transform:translateY(10px) scale(.9);
  }
  .card-front{
    max-width:260px;
    max-height:58vh;
    width:auto;
    height:auto;
    margin:0 auto;
    object-fit:contain;
    transform:translateZ(30px) rotateX(4deg);
  }
  .deck{grid-template-columns:repeat(2,1fr);}
  .card{width:118px; height:168px;}
  .car-window{height:230px;}
  .warning-inner{min-width:min(440px, 92vw);}
}
@media (prefers-reduced-motion: reduce){
  .hourglass{animation:none;}
  .btn-grad, .card, .car-card{transition:none;}
}

/* ====== Utilities ====== */
.theme-luxe :focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px;
}