/* simba9 — Royal Blue & Gold / Rounded Soft Cards */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: 5.5rem; }
body { background: #f8f7f2; color: #101f5a; }

/* พื้นหลัง Hero: วงแสงฟ้า-ทองแบบนุ่ม */
.halo {
  background:
    radial-gradient(42rem 26rem at 50% -6rem, rgba(53,87,212,.18), transparent 70%),
    radial-gradient(22rem 16rem at 88% 30%, rgba(230,184,68,.20), transparent 70%),
    radial-gradient(20rem 14rem at 8% 70%, rgba(53,87,212,.10), transparent 70%);
}
.gold-ink {
  background: linear-gradient(100deg, #a67a12 0%, #e6b844 45%, #cf9b1f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* การ์ดโค้งมนเงาละมุน */
.soft-card {
  background: #fff; border-radius: 1.75rem; border: 1px solid #e4eafc;
  box-shadow: 0 1px 2px rgba(16,31,90,.04), 0 12px 32px -12px rgba(16,31,90,.14);
  transition: transform .25s ease, box-shadow .25s ease;
}
a.soft-card:hover, .soft-card.is-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(16,31,90,.05), 0 24px 48px -16px rgba(16,31,90,.22);
}
.soft-icon {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem;
  background: linear-gradient(145deg, #e4eafc, #f3f6ff); color: #2443b8;
}

/* ปุ่ม */
.btn-gold, .btn-royal, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 9999px; padding: .8rem 1.6rem; font-weight: 600; line-height: 1.2;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-gold { background: linear-gradient(180deg, #f2d077, #e6b844); color: #0a143d; box-shadow: 0 8px 20px -8px rgba(207,155,31,.7); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(207,155,31,.8); }
.btn-royal { background: #1c3596; color: #fff; box-shadow: 0 8px 20px -10px rgba(16,31,90,.6); }
.btn-royal:hover { background: #162a78; transform: translateY(-1px); }
.btn-ghost { background: #fff; color: #1c3596; border: 1px solid #c7d3f8; }
.btn-ghost:hover { background: #f3f6ff; }
:focus-visible { outline: 3px solid #e6b844; outline-offset: 2px; }

/* ป้ายลอย (Floating Badge) */
.float-badge {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  background: rgba(255,255,255,.92); border: 1px solid #f9e5ad; border-radius: 9999px;
  padding: .55rem 1rem; font-size: .85rem; font-weight: 600; color: #101f5a;
  box-shadow: 0 14px 30px -14px rgba(16,31,90,.35);
  animation: drift 6s ease-in-out infinite;
}
.float-badge.delay { animation-delay: -3s; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .float-badge { animation: none; } html { scroll-behavior: auto; } }

/* ชิป/แท็บ */
.chip { border-radius: 9999px; padding: .5rem 1.1rem; font-size: .9rem; font-weight: 500; background: #fff; border: 1px solid #e4eafc; color: #1c3596; }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: #1c3596; border-color: #1c3596; color: #fff; }

/* เนื้อหาบทความ */
.regal-prose { font-size: 1.0625rem; line-height: 1.95; color: #23305f; }
.regal-prose h2 { font-family: "Noto Serif Thai", serif; font-size: 1.6rem; font-weight: 700; color: #0a143d; line-height: 1.45; margin: 2.4rem 0 .9rem; scroll-margin-top: 5.5rem; }
.regal-prose h3 { font-size: 1.2rem; font-weight: 600; color: #101f5a; margin: 1.6rem 0 .5rem; }
.regal-prose p { margin: 0 0 1.1rem; }
.regal-prose ul, .regal-prose ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.regal-prose ul { list-style: disc; }
.regal-prose ol { list-style: decimal; }
.regal-prose li { margin: .35rem 0; }
.regal-prose a { color: #2443b8; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #e6b844; }
.regal-prose strong { color: #0a143d; }
.regal-prose blockquote { margin: 1.6rem 0; padding: 1.1rem 1.4rem; border-radius: 1.25rem; background: #fdf4dc; border-left: 4px solid #e6b844; color: #4a3a0c; }

/* FAQ */
details.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: #cf9b1f; font-size: 1.4rem; line-height: 1; }
details.faq[open] summary::after { content: "–"; }

/* แถบโลโก้ค่ายเกม (Provider Logo Slider) */
.providers-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.providers-track {
  display: flex; gap: 16px; width: max-content; margin: 0; padding: 8px 0 22px; list-style: none;
  animation: providers-scroll 50s linear infinite; animation-play-state: paused;
}
/* เล่นเฉพาะตอนอยู่ในจอ (สลับคลาสโดย regal.js) */
.providers-marquee.is-active .providers-track { animation-play-state: running; }
.providers-marquee.is-active:hover .providers-track { animation-play-state: paused; }
.providers-track li {
  flex: none; border-radius: 1.1rem; overflow: hidden; background: #fff; border: 1px solid #e4eafc;
  box-shadow: 0 10px 22px -12px rgba(16,31,90,.35); transition: transform .2s ease;
}
.providers-track li:hover { transform: translateY(-3px); }
.providers-track img { width: 220px; height: 141px; display: block; }
/* แทร็กมีโลโก้ 2 ชุดซ้ำกัน เลื่อนไป 1 ชุด (+ 1 gap) เพื่อให้วนต่อเนื่อง */
@keyframes providers-scroll { to { transform: translateX(calc(-50% - 8px)); } }
@media (max-width: 600px) {
  .providers-track { gap: 12px; animation-duration: 35s; }
  .providers-track img { width: 170px; height: 109px; }
  @keyframes providers-scroll { to { transform: translateX(calc(-50% - 6px)); } }
}
@media (prefers-reduced-motion: reduce) {
  .providers-track { animation-duration: 100s; }
  .providers-track li { transition: none; }
}

/* แถบเมนูล่างบนมือถือ */
.dock {
  position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 45;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid #e4eafc; border-radius: 1.5rem; padding: .4rem .25rem;
  box-shadow: 0 18px 40px -14px rgba(16,31,90,.4);
}
.dock a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .3rem 0; font-size: .7rem; font-weight: 500; color: rgba(16,31,90,.6); }
.dock a[aria-current="page"] { color: #1c3596; font-weight: 600; }
.dock a[aria-current="page"] svg { color: #cf9b1f; }
.dock .dock-main span:first-child {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; border-radius: 9999px;
  background: linear-gradient(180deg, #f2d077, #e6b844); color: #0a143d; border: 4px solid #fff;
  box-shadow: 0 10px 20px -8px rgba(207,155,31,.8);
}
.dock .dock-main { color: #101f5a; font-weight: 600; }
@media (min-width: 768px) { .dock { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 6rem; } }

/* แบนเนอร์สไลด์หน้าแรก */
.slides { scrollbar-width: none; scroll-behavior: smooth; }
.slides::-webkit-scrollbar { display: none; }
.slide-nav {
  position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgba(255,255,255,.9); color: #101f5a;
  box-shadow: 0 8px 18px -8px rgba(10,20,61,.6);
}
.slide-dot { width: .55rem; height: .55rem; border-radius: 9999px; background: rgba(255,255,255,.55); transition: width .25s ease, background-color .25s ease; }
.slide-dot[aria-current="true"] { width: 1.6rem; background: #e6b844; }
@media (max-width: 600px) { .slide-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .slides { scroll-behavior: auto; } }