:root{
  --red:#b30f12; --red2:#7e0b0e;
  --gold:#ffd76a; --gold2:#fff0b5;
  --paper:#fff8e9; --paper2:#fdf3d9;
  --ink:#3b2200;
  --glass: rgba(0,0,0,.18);
  --glass2: rgba(0,0,0,.10);
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{margin:0}
a,button{font-family:inherit}
img{max-width:100%}

/* Accessibility */
.skip-link{
  position:absolute;
  left:-999px; top:auto;
  width:1px; height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px;
  width:auto; height:auto;
  padding:10px 12px;
  background:rgba(0,0,0,.75);
  border:1px solid rgba(255,215,106,.45);
  border-radius:12px;
  z-index:10000;
  color:#ffe9a8;
  text-decoration:none;
}
:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}

/* ---------- Base background ---------- */
body.seamsi-page{
  font-family:"Prompt",system-ui,sans-serif;
  color:#fff;
  min-height:100vh;
  text-align:center;
  overflow-x:hidden;
  position:relative;
  background:
    radial-gradient(120% 80% at 50% -10%, #e53b3e 0%, var(--red) 45%, var(--red2) 100%),
    repeating-linear-gradient(45deg, rgba(255,215,106,.05) 0 8px, rgba(0,0,0,0) 8px 22px);
}

/* =========================================================
   TOPBAR (Desktop + Mobile hamburger)
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.10));
  border-bottom:1px solid rgba(255,215,106,.35);
}

/* ✅ Brand รองรับโลโก้ + ข้อความ */
.topbar .brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--gold);
  font-weight:900;
  text-decoration:none;
  letter-spacing:.2px;
  white-space:nowrap;
}
.topbar .brand img{
  width:28px;
  height:28px;
  border-radius:8px;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

/* Desktop links */
.toplinks{
  display:flex;
  align-items:center;
  gap:10px;
}
.toplinks a{
  color:#ffe9a8;
  text-decoration:none;
  padding:6px 10px;
  border-radius:10px;
  transition:transform .12s ease, background .12s ease;
  white-space:nowrap;
}
.toplinks a:hover{
  transform:translateY(-1px);
  background:rgba(255,215,106,.12);
}
.toplinks a.active{
  background:rgba(255,215,106,.22);
  color:#6f100f;
  font-weight:800;
}

/* Hamburger */
.nav-toggle{
  display:none;
  width:44px; height:40px;
  border:1px solid rgba(255,215,106,.35);
  border-radius:12px;
  background:rgba(0,0,0,.18);
  cursor:pointer;
  padding:8px 10px;
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}
.nav-toggle span{
  display:block;
  height:3px;
  border-radius:999px;
  background:rgba(255,233,168,.95);
  margin:5px 0;
}

/* Mobile menu panel */
.navmenu{
  display:none;
}

/* =========================================================
   BG DECOR
   ========================================================= */
.bg-anim{position:fixed; inset:0; z-index:0; pointer-events:none}

/* Dragon */
.dragon-bg{
  position:absolute; left:50%; top:46%;
  width:min(1000px, 100vw);
  transform:translate(-50%,-50%) rotate(-4deg);
  opacity:.06;
  filter:grayscale(.15) drop-shadow(0 14px 24px rgba(0,0,0,.3));
  animation:dragonFloat 24s ease-in-out infinite;
}
@keyframes dragonFloat{
  0%,100%{ transform:translate(-50%,-50%) rotate(-4deg) scale(1) }
  50%{ transform:translate(calc(-50% + 8px),calc(-50% + 5px)) rotate(-2.5deg) scale(1.015) }
}

/* Lantern */
.lantern-img{
  position:absolute;
  width:clamp(56px, 8vw, 84px);
  height:auto;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));
  transform-origin:50% -18px;
  animation:swing 5s ease-in-out infinite;
  z-index:0;
}
.lantern-img.l1{ left:clamp(12px, 4vw, 64px);  top:clamp(40px, 10vh, 120px); animation-delay:.1s }
.lantern-img.l2{ right:clamp(12px, 4.5vw, 72px); top:clamp(48px, 11vh, 130px); animation-duration:5.6s }
@keyframes swing{ 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }

/* Mascot */
.mascot{
  position:absolute;
  width:clamp(68px, 11vw, 120px);
  height:auto;
  opacity:.95;
  pointer-events:none;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.45));
  z-index:0;
  animation:mascotBob 3.8s ease-in-out infinite;
  transform:rotate(var(--rot, 0deg));
}
@keyframes mascotBob{
  0%,100% { transform:translateY(0) rotate(var(--rot,0)) }
  50%     { transform:translateY(-6px) rotate(var(--rot,0)) }
}

/* Waves */
.waves{
  position:absolute; left:0; right:0; bottom:-1px; height:120px; opacity:.35;
  background:
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 120' preserveAspectRatio='none'>\
        <path fill='rgba(255,215,106,0.25)' d='M0,60 C120,20 240,100 360,60 C480,20 600,100 720,60 C780,40 800,40 800,40 L800,120 L0,120 Z'/>\
        <path fill='rgba(255,215,106,0.20)' d='M0,70 C120,30 240,110 360,70 C480,30 600,110 720,70 C780,50 800,50 800,50 L800,120 L0,120 Z'/>\
      </svg>") 0 0 / 800px 120px repeat-x;
  animation:wave-move 20s linear infinite;
}
@keyframes wave-move{ from{background-position-x:0} to{background-position-x:-800px} }

/* Gold light */
.bg-anim::before{
  content:""; position:absolute; inset:0;
  animation:float 16s ease-in-out infinite alternate;
  background:
   radial-gradient(200px 200px at 12% 18%, rgba(255,215,106,.18), transparent 60%),
   radial-gradient(240px 240px at 88% 22%, rgba(255,215,106,.12), transparent 65%);
}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(12px)}}

/* =========================================================
   HEADER (แก้ปัญหาโดนบัง/เบลอ)
   ========================================================= */
.header{
  position:relative;
  z-index:1;
  margin:14px 0 6px;
  padding-top:12px; /* กันชน topbar */
}

/* รองรับกรณีใช้ header--safe ใน index/slip */
.header--safe{
  padding-top:16px;
}

.header .gate{width:100%; height:140px; display:block}

.header h1{
  margin:12px 12px 0;   /* ✅ เดิมเป็น -96px ทำให้พังบนมือถือ */
  font-size:clamp(1.85rem, 4.8vw, 2.6rem);
  color:var(--gold);
  text-shadow:0 6px 16px rgba(0,0,0,.55);
}
.header p{
  margin:8px 12px 6px;
  opacity:.95;
  line-height:1.55;
}
.header .lead{max-width:980px; margin-left:auto; margin-right:auto}

.fret{
  height:10px; width:min(680px,92vw);
  margin:10px auto 0; opacity:.45;
  background:
    linear-gradient(90deg, rgba(255,215,106,.7) 0 10px, transparent 10px 12px) repeat-x,
    linear-gradient(90deg, transparent 0 6px, rgba(255,215,106,.35) 6px 12px) 0 6px / 12px 4px repeat-x;
}

/* =========================================================
   MAIN
   ========================================================= */
.main{position:relative; z-index:1; display:grid; place-items:center; padding-bottom:18px}

.ornate{
  position:relative; z-index:1;
  margin:18px auto 8px;
  padding:18px 22px;
  width:min(340px,92vw);
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.06));
  border:2px solid rgba(255,215,106,.35);
  border-radius:18px;
  box-shadow:0 16px 44px rgba(0,0,0,.4), inset 0 0 0 10px rgba(255,255,255,.02);
}
.cnr{position:absolute; width:28px; height:28px; border:3px solid var(--gold)}
.cnr.tl{left:8px; top:8px; border-right:none; border-bottom:none; border-radius:10px 0 0 0}
.cnr.tr{right:8px; top:8px; border-left:none; border-bottom:none; border-radius:0 10px 0 0}
.cnr.bl{left:8px; bottom:8px; border-right:none; border-top:none; border-radius:0 0 0 10px}
.cnr.br{right:8px; bottom:8px; border-left:none; border-top:none; border-radius:0 0 10px 0}

.cylinder-wrap{width:min(260px,78vw); margin:0 auto; position:relative}
.cylinder-btn{
  display:inline-block;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
}
.cylinder-btn:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:6px;
  border-radius:14px;
}
.cylinder-wrap img{
  width:100%; height:auto; outline:none;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.55));
  position:relative; z-index:2;
}
.tap-hint{
  position:absolute; left:50%; top:58%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.35);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.2px;
  z-index:3;
  animation:pulse 1.8s ease-in-out infinite;
}
.tap-hint.hidden{display:none}
@keyframes pulse{0%,100%{opacity:.35; filter:blur(.2px)} 50%{opacity:1; filter:none}}

.cta-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin:10px 0 18px;
}

.btn{
  padding:12px 20px;
  border:none;
  border-radius:14px;
  background:linear-gradient(180deg,var(--gold),var(--gold2));
  color:#7a0c10;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .12s ease, filter .12s ease;
}
.btn:hover{transform:translateY(-1px); filter:saturate(1.04)}
.btn:active{transform:translateY(0)}

.btn.btn-ghost{
  background:rgba(0,0,0,.18);
  color:#ffe9a8;
  border:1px solid rgba(255,215,106,.35);
}

/* noscript */
.noscript{
  width:min(980px,92vw);
  margin:6px auto 0;
  padding:12px 14px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,215,106,.35);
  border-radius:14px;
  line-height:1.6;
}

/* =========================================================
   INFO
   ========================================================= */
.info{width:min(980px,92vw); margin:10px auto 22px; content-visibility:auto; contain-intrinsic-size: 900px}
.info-card{
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,215,106,.35);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.info-title{color:var(--gold); margin:0 0 6px}
.info-desc{margin:0; line-height:1.65}
.info-desc.small{opacity:.9; font-size:.95rem; margin-top:10px}

.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  margin-top:12px;
}
.info-box{
  background:rgba(0,0,0,.12);
  border:1px solid rgba(255,215,106,.25);
  border-radius:14px;
  padding:12px;
  text-align:left;
}
.info-box h3{color:#ffe9a8; margin:0 0 6px}
.info-box ul, .info-box ol{margin:0; padding-left:18px}
.info-box li{margin:6px 0}

/* FAQ */
.faq{
  margin-top:14px;
  text-align:left;
  background:rgba(0,0,0,.10);
  border:1px solid rgba(255,215,106,.25);
  border-radius:16px;
  padding:12px;
}
.faq-title{
  margin:0 0 8px;
  color:var(--gold);
}
.faq details{
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,215,106,.18);
  border-radius:14px;
  padding:10px 12px;
  margin:10px 0;
}
.faq summary{
  cursor:pointer;
  font-weight:900;
  color:#ffe9a8;
  outline:none;
}
.faq-body{
  padding-top:10px;
  color:#fff;
  opacity:.95;
  line-height:1.65;
}
.faq code{
  color:#ffe9a8;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Related */
.related{
  width:min(980px,92vw);
  margin:0 auto 28px;
  content-visibility:auto;
  contain-intrinsic-size: 350px;
}
.related-title{
  color:var(--gold);
  margin:0 0 10px;
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}
.related-card{
  display:block;
  text-decoration:none;
  color:#ffe9a8;
  padding:14px 14px;
  border-radius:16px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,215,106,.25);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  transition:transform .12s ease, background .12s ease;
}
.related-card:hover{
  transform:translateY(-1px);
  background:rgba(255,215,106,.10);
  color:#fff;
}

/* Footer */
.footer{
  position:relative;
  z-index:1;
  padding:18px 0 22px;
  border-top:1px solid rgba(255,215,106,.22);
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18));
}
.footer-inner{
  width:min(980px,92vw);
  margin:0 auto;
  text-align:left;
}
.footer-brand{
  font-weight:900;
  color:var(--gold);
  margin-bottom:8px;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}
.footer-links a{
  color:#ffe9a8;
  text-decoration:none;
  padding:6px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,215,106,.18);
}
.footer-links a:hover{background:rgba(255,215,106,.10)}
.footer-note{
  opacity:.9;
  line-height:1.6;
}

/* =========================================================
   POPUP
   ========================================================= */
.popup[hidden]{display:none !important}
.popup{
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  padding:16px;
}

.popup-paper{
  position:relative;
  background:linear-gradient(180deg,var(--paper),var(--paper2));
  color:var(--ink);
  border-radius:18px;
  padding:14px 14px 10px;
  max-width:min(92vw,420px);
  width:100%;
  box-shadow:0 18px 48px rgba(0,0,0,.6);
  transform-origin:50% 60%;
  border:8px solid var(--gold);
  outline:6px solid #b20f12;
}
.popup-paper.pop-in{animation:popIn .6s cubic-bezier(.2,.9,.2,1.2)}
@keyframes popIn{
  0%{transform:scale(.85) rotate(-1.5deg); opacity:.3}
  70%{transform:scale(1.05) rotate(.4deg); opacity:1}
  100%{transform:scale(1) rotate(0)}
}

.paper-frame{margin:0}
.paper-frame img{
  max-width:100%; height:auto; display:block;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.paper-caption{
  margin-top:8px;
  text-align:center;
  font-weight:900;
  color:#b30f12;
  background:linear-gradient(180deg,#fff7d2,#ffe8a1);
  border:2px solid #b30f12;
  border-radius:999px;
  padding:6px 10px;
}

.popup-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}
.mini{
  appearance:none;
  border:1px solid rgba(179,15,18,.35);
  background:rgba(0,0,0,.06);
  color:#7a0c10;
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
}
.mini:hover{filter:saturate(1.05)}
.mini:focus-visible{outline:3px solid #b20f12; outline-offset:2px}
.popup-note{
  margin:10px 0 0;
  text-align:center;
  font-size:.95rem;
  color:#5b2b00;
}

.close{
  position:absolute; top:6px; right:10px;
  border:0; background:transparent;
  color:#b20f12;
  font-size:28px;
  cursor:pointer;
  line-height:1;
}

/* burst + coins */
.burst{
  position:absolute; left:50%; top:-18px;
  width:0; height:0; transform:translateX(-50%);
  pointer-events:none;
}
.burst span{
  position:absolute; width:6px; height:22px;
  background:linear-gradient(180deg,var(--gold),#fff8d2);
  border-radius:3px; top:0; left:0;
  transform-origin:50% 100%;
  opacity:0;
}
.popup-paper.pop-in .burst span{animation:ray .7s ease-out forwards}
.burst span:nth-child(1){transform:rotate(0deg) translateY(-18px)}
.burst span:nth-child(2){transform:rotate(30deg) translateY(-18px)}
.burst span:nth-child(3){transform:rotate(60deg) translateY(-18px)}
.burst span:nth-child(4){transform:rotate(90deg) translateY(-18px)}
.burst span:nth-child(5){transform:rotate(120deg) translateY(-18px)}
.burst span:nth-child(6){transform:rotate(150deg) translateY(-18px)}
.burst span:nth-child(7){transform:rotate(180deg) translateY(-18px)}
.burst span:nth-child(8){transform:rotate(210deg) translateY(-18px)}
.burst span:nth-child(9){transform:rotate(240deg) translateY(-18px)}
.burst span:nth-child(10){transform:rotate(270deg) translateY(-18px)}
.burst span:nth-child(11){transform:rotate(300deg) translateY(-18px)}
.burst span:nth-child(12){transform:rotate(330deg) translateY(-18px)}
@keyframes ray{
  0%{opacity:0; transform:translateY(-6px) scaleY(.2)}
  60%{opacity:1}
  100%{opacity:0; transform:translateY(-34px) scaleY(1)}
}

.coins{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.coin{
  position:absolute; top:-8px; left:var(--x);
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, #ffe69a 25%, #ffd76a 50%, #caa130 68%, #a27b12 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  transform:scale(var(--s));
  animation:drop var(--d) cubic-bezier(.25,.9,.2,1) forwards;
}
.coin::after{content:""; position:absolute; inset:4px; border:2px solid rgba(126,65,0,.35); border-radius:50%}
@keyframes drop{
  0%{transform:translateY(-10px) scale(var(--s)); opacity:0}
  10%{opacity:1}
  100%{transform:translateY(180px) scale(var(--s)); opacity:0}
}

/* Toast */
.toast[hidden]{display:none !important}
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:10000;
  background:rgba(0,0,0,.78);
  border:1px solid rgba(255,215,106,.35);
  color:#ffe9a8;
  padding:10px 12px;
  border-radius:14px;
  box-shadow:0 16px 44px rgba(0,0,0,.5);
  max-width:min(92vw, 520px);
  text-align:center;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 860px){
  .toplinks{display:none}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}

  .navmenu{
    position:absolute;
    left:10px; right:10px;
    top:calc(100% + 10px);
    display:none;
    flex-direction:column;
    gap:6px;
    background:rgba(0,0,0,.72);
    border:1px solid rgba(255,215,106,.30);
    border-radius:16px;
    padding:10px;
    box-shadow:0 18px 44px rgba(0,0,0,.55);
    z-index:1001;
  }
  .navmenu.open{display:flex}
  .navmenu a{
    color:#ffe9a8;
    text-decoration:none;
    padding:12px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.03);
    text-align:left;
  }
  .navmenu a.active{background:rgba(255,215,106,.26); color:#6f100f; font-weight:800}
}

@media (max-width: 420px){
  .topbar{padding:9px 10px}
  .topbar .brand img{width:26px; height:26px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* ====== DETAIL PAGE (slip.php) ====== */
.seamsi-detail .header{
  margin:18px 0 8px;
}
.detail-h1{
  margin:10px 12px 0;
  font-size:clamp(1.65rem, 4.2vw, 2.35rem);
  color:var(--gold);
  text-shadow:0 6px 16px rgba(0,0,0,.55);
}
.detail-sub{
  margin:8px 12px 0;
  opacity:.95;
  line-height:1.6;
}
.detail-actions{
  margin:12px auto 0;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.detail-main{padding-bottom:20px}

.detail-card{
  width:min(980px,92vw);
  margin:10px auto 18px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,215,106,.35);
  border-radius:18px;
  padding:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  text-align:left;
}
.detail-quick h2{margin:0 0 8px; color:var(--gold)}
.detail-quick p{margin:0; line-height:1.7}

.detail-figure{
  margin:14px auto 0;
  text-align:center;
}
.detail-figure img{
  max-width:min(520px, 92vw);
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.detail-figure figcaption{
  margin-top:8px;
  color:#ffe9a8;
  opacity:.95;
}

.detail-sections{
  margin-top:14px;
}
.detail-sections h2{
  margin:18px 0 8px;
  color:#ffe9a8;
}
.detail-sections p{
  margin:0;
  line-height:1.75;
  opacity:.98;
}
.detail-sections ul{
  margin:8px 0 0;
  padding-left:18px;
}
.detail-note{
  margin-top:12px;
  opacity:.9;
}

/* prev/next */
.detail-nav{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}

/* ชิปเลข 1–28 */
.slip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));
  gap:8px;
  margin-top:10px;
}
.slip-chip{
  display:block;
  text-decoration:none;
  text-align:center;
  padding:10px 10px;
  border-radius:14px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,215,106,.25);
  color:#ffe9a8;
  font-weight:800;
}
.slip-chip:hover{
  background:rgba(255,215,106,.10);
  color:#fff;
}
.slip-chip.active{
  background:rgba(255,215,106,.26);
  color:#6f100f;
  border-color:rgba(255,215,106,.45);
}

/* popup actions link button look */
.popup-actions a.mini{
  text-decoration:none;
  display:inline-block;
}