@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800&family=Inter:wght@400;500;600;700&display=swap");





:root {


  --bg-0: #070710;


  --bg-1: #0a0b16;


  --txt: #eae9ff;


  --muted: rgba(255, 255, 255, .72);





  --p1: #7c4dff;


  --p2: #ff4fd8;


  --p3: #57d6ff;





  --glass: rgba(255, 255, 255, .08);


  --glass2: rgba(255, 255, 255, .12);


  --stroke: rgba(255, 255, 255, .14);





  --shadow: 0 20px 60px rgba(0, 0, 0, .55);


  --shadow2: 0 12px 30px rgba(0, 0, 0, .35);





  --r-lg: 26px;


  --r-md: 18px;





  --container: 1200px;


  --gap: 18px;





  --ease: cubic-bezier(.2, .9, .2, 1);


}





* {


  box-sizing: border-box;


}





html,


body {


  margin: 0;


  padding: 0;


  overflow-x: hidden;


  scroll-behavior: smooth;


}





body {


  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;


  background: radial-gradient(1200px 900px at 20% -10%, rgba(124, 77, 255, .25), transparent 55%),


    radial-gradient(900px 700px at 90% 0%, rgba(255, 79, 216, .18), transparent 55%),


    radial-gradient(900px 700px at 20% 100%, rgba(87, 214, 255, .14), transparent 55%),


    linear-gradient(180deg, var(--bg-0), var(--bg-1));


  color: var(--txt);


}





a {


  color: inherit;


  text-decoration: none;


}





img {


  max-width: 100%;


  display: block;


}





.container {


  width: min(var(--container), calc(100% - 40px));


  margin: 0 auto;


  position: relative;


}





/* ---------- background ambient ---------- */


.bg {


  position: fixed;


  inset: 0;


  pointer-events: none;


  z-index: -1;


}





.bg__grain {


  position: absolute;


  inset: -40%;


  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");


  opacity: .03;


  /* Reduced from .08 */


  transform: translate3d(0, 0, 0);


  animation: grain 10s steps(3) infinite;


  /* Optimized steps */


}





@keyframes grain {


  0% {


    transform: translate(0, 0);


  }





  20% {


    transform: translate(-5%, -10%);


  }





  40% {


    transform: translate(-15%, 5%);


  }





  60% {


    transform: translate(7%, -8%);


  }





  80% {


    transform: translate(12%, 10%);


  }





  100% {


    transform: translate(0, 0);


  }


}





.bg__orbs .orb {


  position: absolute;


  border-radius: 999px;


  filter: blur(20px);


  /* Reduced blur for performance */


  opacity: .2;


  animation: float 15s linear infinite;


  /* Slower, simpler animation */


  will-change: transform;


}





.orb--1 {


  width: 420px;


  height: 420px;


  left: -80px;


  top: 120px;


  background: radial-gradient(circle, rgba(124, 77, 255, .85), transparent 65%);


}





.orb--2 {


  width: 520px;


  height: 520px;


  right: -160px;


  top: 180px;


  background: radial-gradient(circle, rgba(255, 79, 216, .65), transparent 65%);


  animation-duration: 12s;


}





.orb--3 {


  width: 520px;


  height: 520px;


  left: 25%;


  bottom: -220px;


  background: radial-gradient(circle, rgba(87, 214, 255, .55), transparent 65%);


  animation-duration: 14s;


}





@keyframes float {


  0% {


    transform: translate3d(0, 0, 0) scale(1);


  }





  50% {


    transform: translate3d(0, -18px, 0) scale(1.03);


  }





  100% {


    transform: translate3d(0, 0, 0) scale(1);


  }


}





/* ---------- reveal on scroll ---------- */


.reveal {


  opacity: 0;


  transform: translateY(18px) scale(.99);


  transition: opacity .4s var(--ease), transform .4s var(--ease);


  /* Faster transition */


  will-change: transform, opacity;


  backface-visibility: hidden;


}





.reveal.is-visible {


  opacity: 1;


  transform: translateY(0) scale(1);


}





@media (prefers-reduced-motion: reduce) {


  * {


    animation: none !important;


    transition: none !important;


    scroll-behavior: auto !important;


  }





  .reveal {


    opacity: 1 !important;


    transform: none !important;


  }


}





/* ---------- Buttons ---------- */


.btn {


  display: inline-flex;


  align-items: center;


  justify-content: center;


  gap: 10px;


  border-radius: 999px;


  padding: 11px 20px;


  border: 1px solid var(--stroke);


  background: rgba(255, 255, 255, 0.05);


  backdrop-filter: blur(14px);


  -webkit-backdrop-filter: blur(14px);


  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);


  transition: all .25s var(--ease);


  font-weight: 600;


  font-size: 0.95rem;


}





.btn:hover {


  transform: translateY(-2px);


  background: var(--glass2);


  border-color: rgba(255, 255, 255, .22);


}





.btn--primary {


  border-color: rgba(124, 77, 255, .35);


  background: linear-gradient(135deg, rgba(124, 77, 255, .95), rgba(255, 79, 216, .75));


}





.btn--ghost {


  background: rgba(255, 255, 255, .06);


}





.btn--xl {


  padding: 14px 22px;


  font-weight: 700;


}





.btn--sm {


  padding: 10px 14px;


  font-weight: 700;


}





.link {


  display: inline-flex;


  align-items: center;


  gap: 10px;


  opacity: .9;


  transition: opacity .2s var(--ease), transform .2s var(--ease);


}





.link:hover {


  opacity: 1;


  transform: translateX(2px);


}





/* ---------- NAV ---------- */


.nav {


  position: fixed;


  top: 0;


  left: 0;


  right: 0;


  z-index: 999;


  transition: background .3s var(--ease), border-color .3s var(--ease);


  border-bottom: 1px solid rgba(255, 255, 255, .08);


}





.nav.is-scrolled {


  background: rgba(10, 10, 20, .55);


  backdrop-filter: blur(18px);


  -webkit-backdrop-filter: blur(18px);


  border-bottom: 1px solid rgba(255, 255, 255, .12);


}





.nav__inner {


  height: 84px;


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 20px;


}





.brand {


  display: flex;


  align-items: center;


  gap: 12px;


  font-weight: 800;


}





.brand__icon {


  width: 52px;


  height: 52px;


  border-radius: 999px;


  border: 1px solid rgba(255, 255, 255, .18);


  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);


}





.brand__text {


  font-family: Cinzel, serif;


  letter-spacing: .8px;


  font-size: 1.1rem;


  line-height: 1.2;


}





.nav__toggle {


  display: none;


  width: 44px;


  height: 44px;


  border-radius: 12px;


  border: 1px solid rgba(255, 255, 255, .14);


  background: rgba(255, 255, 255, .06);


  color: var(--txt);


  cursor: pointer;


}





.nav__menu {


  display: flex;


  align-items: center;


  gap: 18px;


}





.nav__links {


  display: flex;


  align-items: center;


  gap: 4px;


  margin: 0;


  padding: 0;


}





.nav__links li {


  display: flex;


  align-items: center;


}





.nav__links li:not(:last-child)::after {


  content: "";


  display: block;


  width: 1px;


  height: 14px;


  background: rgba(255, 255, 255, 0.1);


  margin-left: 4px;


}





.nav__actions {


  display: flex;


  align-items: center;


  gap: 10px;


}





/* Dropdown */


.dd {


  position: relative;


}





.dd__btn {


  height: 46px;


  padding: 0 14px;


  border-radius: 999px;


  border: 1px solid transparent;


  background: transparent;


  color: var(--txt);


  cursor: pointer;


  display: flex;


  align-items: center;


  gap: 10px;


  transition: background .25s var(--ease), border-color .25s var(--ease);


}





.dd__btn i {


  opacity: .8;


  font-size: 12px;


  transition: transform .25s var(--ease);


}





/* hover/focus/open: เธ�เธธเน�เธก */


.dd:hover .dd__btn,


.dd:focus-within .dd__btn,


.dd.is-open .dd__btn {


  background: rgba(255, 255, 255, .07);


  border-color: rgba(255, 255, 255, .12);


}





.dd__menu {


  position: absolute;


  /* โ�… FIX: เน€เธ”เธดเธก top:56px เธ—เธณเน�เธซเน�เธกเธต gap ~10px โ�’ เน€เธกเธ�เธนเธซเธฒเธขเธ•เธญเธ�เน€เธฅเธทเน�เธญเธ�เน€เธกเธฒเธชเน�เธฅเธ�เน�เธ�เธ�เธ” */


  top: 46px;


  /* เธ�เธดเธ”เธ�เธญเธ�เธฅเน�เธฒเธ�เธ�เธธเน�เธก = เน�เธกเน�เน€เธ�เธดเธ”เธ�เน�เธญเธ�เธงเน�เธฒเธ� */


  left: 0;


  min-width: 220px;


  padding: 10px;


  border-radius: 16px;


  border: 1px solid rgba(255, 255, 255, .14);


  background: rgba(10, 10, 20, .7);


  backdrop-filter: blur(18px);


  -webkit-backdrop-filter: blur(18px);


  box-shadow: var(--shadow);


  opacity: 0;


  visibility: hidden;


  transform: translateY(10px);


  pointer-events: none;


  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);


  margin: 0;


  z-index: 2000;


  /* เธ�เธฑเธ�เน�เธ”เธ�เน€เธฅเน€เธขเธญเธฃเน�เธญเธทเน�เธ�เธ—เธฑเธ� */


}





.dd__menu li {


  list-style: none;


}





.dd__menu a {


  display: flex;


  padding: 10px 10px;


  border-radius: 12px;


  opacity: .9;


  transition: background .2s var(--ease), opacity .2s var(--ease);


}





.dd__menu a:hover {


  background: rgba(255, 255, 255, .08);


  opacity: 1;


}





/* hover/focus/open: เน€เธกเธ�เธน */


.dd:hover .dd__menu,


.dd:focus-within .dd__menu,


.dd.is-open .dd__menu {


  opacity: 1;


  visibility: visible;


  transform: translateY(0);


  pointer-events: auto;


}





/* เธฅเธนเธ�เธจเธฃ */


.dd:hover .dd__btn i,


.dd:focus-within .dd__btn i,


.dd.is-open .dd__btn i {


  transform: rotate(180deg);


}





/* Mobile drawer */


.nav__menuTop {


  display: none;


}





.nav__close {


  display: none;


}





.nav__backdrop {


  display: none;


  position: fixed;


  inset: 0;


  background: rgba(0, 0, 0, .55);


  opacity: 0;


  pointer-events: none;


  transition: opacity .25s var(--ease);


}





/* ---------- HERO ---------- */


.hero {


  position: relative;


  min-height: 100vh;


  padding-top: 100px;


  display: flex;


  align-items: center;


}





.hero__media {


  position: absolute;


  inset: 0;


  overflow: hidden;


}





.hero__video {


  width: 100%;


  height: 100%;


  object-fit: cover;


  opacity: .55;


  transform: scale(1.02);


}





.hero__overlay {


  position: absolute;


  inset: 0;


  background:


    radial-gradient(800px 600px at 20% 20%, rgba(124, 77, 255, .35), transparent 60%),


    radial-gradient(700px 600px at 80% 10%, rgba(255, 79, 216, .24), transparent 55%),


    linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .85));


}





.hero__glow {


  position: absolute;


  inset: -40%;


  background: radial-gradient(circle at 50% 50%, rgba(87, 214, 255, .12), transparent 60%);


  animation: float 12s var(--ease) infinite;


  opacity: .65;


}





.hero__content {


  position: relative;


  z-index: 2;


  text-align: center;


  padding: 60px 0 40px;


}





.hero__badge {


  display: inline-flex;


  align-items: center;


  gap: 10px;


  padding: 10px 14px;


  border-radius: 999px;


  border: 1px solid rgba(255, 255, 255, .14);


  background: rgba(255, 255, 255, .06);


  backdrop-filter: blur(14px);


  -webkit-backdrop-filter: blur(14px);


  opacity: .95;


}





.hero__logo {


  width: clamp(340px, 60vw, 850px);


  margin: -40px auto 10px;


  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.7));


  animation: logoPulse 12s ease-in-out infinite;


  max-width: 95%;


  z-index: 10;


  position: relative;


  will-change: transform;


  transform: translateZ(0);


}





@keyframes logoPulse {





  0%,


  100% {


    transform: translateY(0) scale(1);


  }





  50% {


    transform: translateY(-12px) scale(1.03);


  }


}





.hero__title {


  font-family: Cinzel, serif;


  font-size: clamp(34px, 4.2vw, 68px);


  line-height: 1.05;


  margin: 10px auto 10px;


  letter-spacing: -.6px;


  text-shadow: 0 18px 40px rgba(0, 0, 0, .55);


}





.hero__title span {


  background: linear-gradient(90deg, rgba(124, 77, 255, 1), rgba(255, 79, 216, 1), rgba(87, 214, 255, 1));


  -webkit-background-clip: text;


  background-clip: text;


  color: transparent;


}





.hero__subtitle {


  max-width: 860px;


  margin: 0 auto;


  color: rgba(255, 255, 255, .82);


  font-size: clamp(14px, 1.6vw, 18px);


  line-height: 1.7;


}





.hero__cta {


  display: flex;


  gap: 12px;


  justify-content: center;


  flex-wrap: wrap;


  margin-top: 22px;


}





.hero__quick {


  display: flex;


  gap: 10px;


  justify-content: center;


  flex-wrap: wrap;


  margin-top: 18px;


}





.pill {


  display: flex;


  align-items: baseline;


  gap: 10px;


  padding: 10px 14px;


  border-radius: 999px;


  border: 1px solid rgba(255, 255, 255, .14);


  background: rgba(255, 255, 255, .06);


  backdrop-filter: blur(14px);


  -webkit-backdrop-filter: blur(14px);


}





.pill span {


  opacity: .8;


  font-size: 12px;


  text-transform: uppercase;


  letter-spacing: 1.6px;


}





.pill b {


  font-size: 16px;


}





.hero__scroll {


  margin-top: 34px;


  display: inline-flex;


  flex-direction: column;


  gap: 8px;


  align-items: center;


  opacity: .85;


  transition: opacity .2s var(--ease), transform .2s var(--ease);


}





.hero__scroll i {


  animation: bounce 1.4s var(--ease) infinite;


}





@keyframes bounce {


  0% {


    transform: translateY(0);


  }





  50% {


    transform: translateY(6px);


  }





  100% {


    transform: translateY(0);


  }


}





.hero__scroll:hover {


  opacity: 1;


  transform: translateY(-2px);


}





/* ---------- Sections ---------- */


.section {


  padding: 86px 0;


  content-visibility: auto;


  /* Browse rendering optimization */


}





.section--alt {


  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0));


  border-top: 1px solid rgba(255, 255, 255, .06);


  border-bottom: 1px solid rgba(255, 255, 255, .06);


}





.section__head {


  display: flex;


  align-items: flex-end;


  justify-content: space-between;


  gap: 14px;


  flex-wrap: wrap;


  margin-bottom: 22px;


}





.section__title {


  font-family: Cinzel, serif;


  font-size: clamp(26px, 3.2vw, 44px);


  margin: 0;


  letter-spacing: -.3px;


}





.section__desc {


  margin: 0;


  color: rgba(255, 255, 255, .78);


  max-width: 560px;


  line-height: 1.7;


}





/* ---------- Cards (News) ---------- */


.cards {


  display: grid;


  gap: var(--gap);


}





.cards--4 {


  grid-template-columns: repeat(4, 1fr);


}





.card {


  border-radius: var(--r-lg);


  overflow: hidden;


  border: 1px solid rgba(255, 255, 255, .14);


  background: rgba(255, 255, 255, .06);


  box-shadow: var(--shadow2);


  transform-style: preserve-3d;


  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);


}





.card:hover {


  transform: translateY(-6px);


  border-color: rgba(255, 255, 255, .22);


  background: rgba(255, 255, 255, .08);


}





.card__media {


  position: relative;


  aspect-ratio: 16/10;


  overflow: hidden;


}





.card__media img {


  width: 100%;


  height: 100%;


  object-fit: cover;


  transform: scale(1.05);


  transition: transform .6s var(--ease);


}





.card:hover .card__media img {


  transform: scale(1.12);


}





.card__media::after {


  content: "";


  position: absolute;


  inset: 0;


  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));


}





.card__tag {


  position: absolute;


  left: 12px;


  top: 12px;


  z-index: 2;


  padding: 8px 12px;


  border-radius: 999px;


  border: 1px solid rgba(255, 255, 255, .14);


  background: rgba(10, 10, 20, .55);


  backdrop-filter: blur(14px);


  -webkit-backdrop-filter: blur(14px);


  font-weight: 800;


  font-size: 12px;


  letter-spacing: .6px;


}





.card__body {


  padding: 14px 14px 16px;


}





.card__meta {


  color: rgba(255, 255, 255, .65);


  font-size: 12px;


}





.card__title {


  margin-top: 8px;


  font-weight: 800;


  line-height: 1.35;


  display: -webkit-box;


  -webkit-line-clamp: 2;


  line-clamp: 2;


  -webkit-box-orient: vertical;


  overflow: hidden;


}





/* ---------- Stats ---------- */


.stats {


  display: grid;


  grid-template-columns: repeat(3, 1fr);


  gap: var(--gap);


}





.stat {


  border-radius: var(--r-lg);


  padding: 18px;


  border: 1px solid rgba(255, 255, 255, .14);


  background: rgba(255, 255, 255, .06);


  box-shadow: var(--shadow2);


  position: relative;


  overflow: hidden;


  transition: transform .25s var(--ease), border-color .25s var(--ease);


}





.stat::before {


  content: "";


  position: absolute;


  inset: -2px;


  background: radial-gradient(600px 260px at 20% 0%, rgba(124, 77, 255, .22), transparent 60%),


    radial-gradient(520px 260px at 80% 10%, rgba(255, 79, 216, .16), transparent 60%);


  opacity: .9;


  pointer-events: none;


}





.stat:hover {


  transform: translateY(-4px);


  border-color: rgba(255, 255, 255, .22);


}





.stat__icon {


  width: 46px;


  height: 46px;


  border-radius: 16px;


  display: flex;


  align-items: center;


  justify-content: center;


  background: rgba(255, 255, 255, .08);


  border: 1px solid rgba(255, 255, 255, .12);


  margin-bottom: 12px;


  position: relative;


  z-index: 2;


}





.stat__label {


  opacity: .8;


  font-size: 13px;


  letter-spacing: .8px;


  text-transform: uppercase;


  position: relative;


  z-index: 2;


}





.stat__value {


  font-family: Cinzel, serif;


  font-size: 34px;


  margin-top: 6px;


  position: relative;


  z-index: 2;


  text-shadow: 0 18px 40px rgba(0, 0, 0, .35);


}





/* Notice */


.notice {


  margin-top: 18px;


  display: flex;


  gap: 12px;


  align-items: flex-start;


  padding: 14px 16px;


  border-radius: var(--r-lg);


  border: 1px solid rgba(255, 255, 255, .14);


  background: rgba(255, 255, 255, .06);


  box-shadow: var(--shadow2);


  color: rgba(255, 255, 255, .88);


  line-height: 1.6;


}





/* ---------- Server Accordion ---------- */


.server {


  border-radius: calc(var(--r-lg) + 4px);


  border: 1px solid rgba(255, 255, 255, .12);


  background: rgba(255, 255, 255, .06);


  box-shadow: var(--shadow);


  overflow: hidden;


}





.server__top {


  padding: 16px;


  display: flex;


  justify-content: space-between;


  gap: 12px;


  flex-wrap: wrap;


  border-bottom: 1px solid rgba(255, 255, 255, .10);


  background: rgba(0, 0, 0, .12);


}





.chips {


  display: flex;


  gap: 10px;


  flex-wrap: wrap;


}





.chip {


  padding: 8px 12px;


  border-radius: 999px;


  border: 1px solid rgba(255, 255, 255, .14);


  background: rgba(255, 255, 255, .06);


  font-weight: 800;


  font-size: 12px;


}





.server__tools {


  display: flex;


  gap: 10px;


  flex-wrap: wrap;


  align-items: center;


}





.search {


  display: flex;


  align-items: center;


  gap: 10px;


  padding: 10px 12px;


  border-radius: 999px;


  border: 1px solid rgba(255, 255, 255, .14);


  background: rgba(255, 255, 255, .06);


  min-width: min(520px, 80vw);


}





.search input {


  background: transparent;


  border: none;


  outline: none;


  color: var(--txt);


  width: 100%;


}





.accordion {


  padding: 12px;


}





.acc {


  border-radius: var(--r-md);


  border: 1px solid rgba(255, 255, 255, .12);


  background: rgba(255, 255, 255, .06);


  overflow: hidden;


  margin-bottom: 10px;


}





.acc summary {


  list-style: none;


  cursor: pointer;


  padding: 14px 14px;


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 12px;


  font-weight: 900;


}





.acc summary::-webkit-details-marker {


  display: none;


}





.acc summary::after {


  content: "โ–พ";


  opacity: .9;


  transition: transform .25s var(--ease);


}





.acc[open] summary::after {


  transform: rotate(180deg);


}





.acc__hint {


  opacity: .7;


  font-weight: 700;


  font-size: 12px;


}





.acc__body {


  padding: 0 14px 14px;


  color: rgba(255, 255, 255, .86);


  line-height: 1.85;


}





.acc__body ul {


  margin: 10px 0 0;


  padding-left: 18px;


}





.acc__body li {


  margin: 0 0 6px;


}





.muted {


  color: rgba(255, 255, 255, .72);


}





.twoCol {


  columns: 2;


  column-gap: 36px;


}





/* ---------- Swiper Feature ---------- */


.slider {


  border-radius: var(--r-lg);


  border: 1px solid rgba(255, 255, 255, .12);


  background: rgba(255, 255, 255, .06);


  box-shadow: var(--shadow);


  padding: 14px;


}





.feature {


  height: 560px;


  border-radius: calc(var(--r-lg) - 4px);


  overflow: hidden;


  position: relative;


  background-size: cover;


  background-position: center;


}





.feature__overlay {


  position: absolute;


  inset: 0;


  background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .75));


}





.feature__text {


  position: absolute;


  left: 28px;


  right: 28px;


  bottom: 26px;


}





.feature__text h3 {


  font-family: Cinzel, serif;


  font-size: clamp(18px, 2.4vw, 34px);


  line-height: 1.15;


  margin: 0 0 14px;


}





.swiper-button-prev,


.swiper-button-next {


  width: 52px;


  height: 52px;


  border-radius: 999px;


  background: rgba(255, 255, 255, .10);


  border: 1px solid rgba(255, 255, 255, .14);


  backdrop-filter: blur(14px);


  -webkit-backdrop-filter: blur(14px);


  color: #fff !important;


}





.swiper-button-prev:after,


.swiper-button-next:after {


  font-size: 16px !important;


  font-weight: 900;


}





.swiper-pagination-bullet {


  background: rgba(255, 255, 255, .5) !important;


  opacity: .8 !important;


}





.swiper-pagination-bullet-active {


  background: rgba(255, 255, 255, 1) !important;


}





/* ---------- Footer ---------- */


.footer {


  padding: 44px 0 64px;


  border-top: 1px solid rgba(255, 255, 255, .08);


  background: rgba(0, 0, 0, .18);


  backdrop-filter: blur(14px);


  -webkit-backdrop-filter: blur(14px);


}





.footer__top {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 14px;


  flex-wrap: wrap;


  margin-bottom: 16px;


}





.footer__brand {


  display: flex;


  align-items: center;


  gap: 12px;


}





.footer__brand img {


  width: 52px;


  height: 52px;


  border-radius: 999px;


  border: 1px solid rgba(255, 255, 255, .14);


}





.footer__social {


  display: flex;


  gap: 12px;


}





.footer__social a {


  width: 44px;


  height: 44px;


  border-radius: 14px;


  border: 1px solid rgba(255, 255, 255, .14);


  background: rgba(255, 255, 255, .06);


  display: flex;


  align-items: center;


  justify-content: center;


  transition: transform .2s var(--ease), background .2s var(--ease);


}





.footer__social a:hover {


  transform: translateY(-2px);


  background: rgba(255, 255, 255, .10);


}





.footer__links {


  display: flex;


  gap: 16px;


  flex-wrap: wrap;


  margin-bottom: 10px;


  opacity: .92;


}





.footer__links a {


  opacity: .85;


}





.footer__links a:hover {


  opacity: 1;


  text-decoration: underline;


  text-underline-offset: 4px;


}





.footer__copy {


  margin: 0;


  color: rgba(255, 255, 255, .65);


  line-height: 1.7;


  max-width: 980px;


}





/* ---------- Responsive ---------- */


@media (max-width: 1100px) {


  .cards--4 {


    grid-template-columns: repeat(2, 1fr);


  }





  .stats {


    grid-template-columns: repeat(2, 1fr);


  }





  .twoCol {


    columns: 1;


  }





  .feature {


    height: 520px;


  }





  .wmap {


    grid-template-columns: repeat(3, 1fr);


  }


}





@media (max-width: 720px) {


  .nav__toggle {


    display: inline-flex;


    align-items: center;


    justify-content: center;


  }





  .nav__menu {


    position: fixed;


    top: 0;


    right: 0;


    height: 100vh;


    width: min(420px, 90vw);


    padding: 14px;


    flex-direction: column;


    align-items: stretch;


    gap: 12px;


    background: rgba(10, 10, 20, .78);


    border-left: 1px solid rgba(255, 255, 255, .12);


    backdrop-filter: blur(18px);


    -webkit-backdrop-filter: blur(18px);


    transform: translateX(105%);


    transition: transform .28s var(--ease);


    z-index: 1001;


  }





  .nav__menuTop {


    display: flex;


    align-items: center;


    justify-content: space-between;


    gap: 12px;


  }





  .nav__logo {


    width: 180px;


    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .45));


  }





  .nav__close {


    display: inline-flex;


    width: 44px;


    height: 44px;


    border-radius: 14px;


    border: 1px solid rgba(255, 255, 255, .14);


    background: rgba(255, 255, 255, .06);


    color: var(--txt);


    cursor: pointer;


    align-items: center;


    justify-content: center;


  }





  .nav__links {


    flex-direction: column;


    align-items: stretch;


    gap: 10px;


    padding: 6px 0;


  }





  .dd__btn {


    width: 100%;


    justify-content: space-between;


    border: 1px solid rgba(255, 255, 255, .12);


    background: rgba(255, 255, 255, .06);


  }





  .dd__menu {


    position: static;


    opacity: 1;


    visibility: visible;


    pointer-events: auto;


    transform: none;


    margin-top: 8px;


    display: none;


  }





  .dd.is-open .dd__menu {


    display: block;


  }





  .dd.is-open .dd__btn i {


    transform: rotate(180deg);


  }





  .nav__actions {


    width: 100%;


    justify-content: space-between;


  }





  .nav__backdrop {


    display: block;


  }





  body.nav-open .nav__menu {


    transform: translateX(0);


  }





  body.nav-open .nav__backdrop {


    opacity: 1;


    pointer-events: auto;


  }





  .cards--4 {


    grid-template-columns: 1fr;


  }





  .stats {


    grid-template-columns: 1fr;


  }





  .feature {


    height: 460px;


  }





  .hero__logo {


    width: 260px;


  }





  .wmap {


    grid-template-columns: repeat(2, 1fr);


  }





  .wmap-filters {


    order: 3;


    width: 100%;


  }


}





/* ---------- AI Language Loader ---------- */


.lang-loader {


  position: fixed;


  inset: 0;


  z-index: 9999;


  background: rgba(7, 7, 16, 0.85);


  backdrop-filter: blur(12px);


  -webkit-backdrop-filter: blur(12px);


  display: grid;


  place-items: center;


  opacity: 0;


  visibility: hidden;


  pointer-events: none;


  transition: opacity .4s var(--ease), visibility .4s var(--ease);


}





.lang-loader.is-active {


  opacity: 1;


  visibility: visible;


  pointer-events: auto;


}





.lang-loader__content {


  text-align: center;


  display: flex;


  flex-direction: column;


  gap: 15px;


}





.lang-loader__content i {


  font-size: 42px;


  background: linear-gradient(135deg, var(--p1), var(--p2));


  -webkit-background-clip: text;


  background-clip: text;


  color: transparent;


}





.lang-loader__content span {


  font-weight: 700;


  letter-spacing: 1px;


  text-transform: uppercase;


  font-size: 14px;


  opacity: .9;


}





/* Language Options */


.lang-option {


  display: flex !important;


  align-items: center !important;


  gap: 12px !important;


  cursor: pointer;


}





.lang-option img {


  width: 20px !important;


  height: 14px !important;


  border-radius: 2px !important;


  object-fit: cover;


}





/* โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�


   World Map & Monsters โ€” Dark Premium UI


   โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•�โ•� */





#world-map {


  background: #06060e;


  border-top: 1px solid rgba(124, 77, 255, 0.15);


  border-bottom: 1px solid rgba(124, 77, 255, 0.15);


  padding: 90px 0 100px;


  position: relative;


  overflow: hidden;


}





#world-map::before {


  content: '';


  position: absolute;


  top: -30%;


  left: -5%;


  width: 55%;


  height: 70%;


  background: radial-gradient(ellipse, rgba(124, 77, 255, 0.07) 0%, transparent 65%);


  pointer-events: none;


}





#world-map::after {


  content: '';


  position: absolute;


  bottom: -20%;


  right: -5%;


  width: 45%;


  height: 60%;


  background: radial-gradient(ellipse, rgba(255, 79, 216, 0.05) 0%, transparent 65%);


  pointer-events: none;


}





/* Section head */


#world-map .section__head {


  display: flex;


  align-items: center;


  justify-content: space-between;


  gap: 20px;


  flex-wrap: wrap;


  margin-bottom: 36px;


}





#world-map .section__title {


  font-family: 'Cinzel', serif;


  font-size: clamp(28px, 3.5vw, 44px);


  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 50%, #a78bfa 100%);


  -webkit-background-clip: text;


  background-clip: text;


  color: transparent;


  letter-spacing: 1.5px;


  font-weight: 800;


  margin: 0;


}





#world-map .section__desc {


  color: rgba(255,255,255,0.55);


  font-size: 15px;


  margin: 6px 0 0;


  line-height: 1.6;


}





/* Tabs */


.wmap-tabs {


  display: flex;


  gap: 8px;


  background: rgba(255,255,255,0.04);


  border: 1px solid rgba(255,255,255,0.08);


  border-radius: 99px;


  padding: 5px;


  backdrop-filter: blur(12px);


}





.wmap-tab {


  display: inline-flex;


  align-items: center;


  gap: 8px;


  padding: 10px 22px;


  border-radius: 99px;


  border: none;


  background: transparent;


  color: rgba(255,255,255,0.5);


  font-size: 13px;


  font-weight: 700;


  cursor: pointer;


  transition: all .25s var(--ease);


  letter-spacing: 0.3px;


}





.wmap-tab i { font-size: 14px; }





.wmap-tab:hover {


  color: rgba(255,255,255,0.85);


  background: rgba(255,255,255,0.06);


}





.wmap-tab.active {


  background: linear-gradient(135deg, var(--p1), var(--p2));


  color: #fff;


  box-shadow: 0 4px 16px rgba(124, 77, 255, 0.35);


}





/* Legend */


.wmap-legend {


  display: flex;


  gap: 18px;


  flex-wrap: wrap;


  align-items: center;


  margin-bottom: 20px;


  padding: 10px 20px;


  background: rgba(255,255,255,0.04);


  border: 1px solid rgba(255,255,255,0.07);


  border-radius: 99px;


  width: fit-content;


}





.wmap-legend__item {


  display: flex;


  align-items: center;


  gap: 8px;


  font-size: 12px;


  font-weight: 600;


  color: rgba(255,255,255,0.7);


  letter-spacing: 0.3px;


}





.wmap-legend__dot {


  width: 10px;


  height: 10px;


  border-radius: 50%;


}





.wmap-legend__dot--town    { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,0.6); }


.wmap-legend__dot--field   { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,0.6); }


.wmap-legend__dot--dungeon { background: #f87171; box-shadow: 0 0 8px rgba(248,113,113,0.6); }





/* Map frame */


.wmap-frame {


  background: rgba(5, 5, 12, 0.85);


  border: 1px solid rgba(255,255,255,0.07);


  border-radius: 16px;


  box-shadow:


    0 0 0 1px rgba(124, 77, 255, 0.08),


    0 40px 80px rgba(0,0,0,0.7),


    inset 0 1px 0 rgba(255,255,255,0.05);


  padding: 20px;


  overflow-x: auto;


  position: relative;


}





.wmap-frame::before {


  content: '';


  position: absolute;


  top: 0; left: 0; right: 0;


  height: 1px;


  background: linear-gradient(90deg, transparent, rgba(124,77,255,0.4), rgba(255,79,216,0.3), transparent);


}





/* Free-position continent canvas */


.wmap-pixel {


  position: relative;


  width: 100%;


  max-width: 1280px;


  aspect-ratio: 1280 / 1024;


  margin: 0 auto;


  background-image: url('/img/worldmap_bg.jpg');


  background-size: 100% 100%;


  background-position: center;


  background-repeat: no-repeat;


  border-radius: 10px;


  overflow: visible;


}





/* Tile - absolutely positioned over the continent background */


.wt {


  display: block;


  position: absolute;


  overflow: visible;


  border-radius: 5px;


  border: 1px solid rgba(255,255,255,0.04);


  background: rgba(255,255,255,0.02);


  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), z-index 0s;


  cursor: pointer;


}





.wt img:first-child {


  width: 100%;


  height: 100%;


  object-fit: cover;


  image-rendering: pixelated;


  border-radius: 4px;


  transition: opacity .25s var(--ease), filter .25s var(--ease);


  opacity: 1;


  display: block;


}





.wt__boss {


  position: absolute;


  top: 50%;


  left: 50%;


  transform: translate(-50%, -50%);


  width: 78%;


  height: 78%;


  object-fit: contain !important;


  z-index: 5;


  pointer-events: none;


  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.9));


  image-rendering: pixelated;


  transition: transform .25s var(--ease), filter .25s var(--ease);


}





.wt:hover {


  transform: scale(1.45) translateY(-6px);


  z-index: 200;


  border-color: rgba(255,255,255,0.7);


  box-shadow: 0 12px 32px rgba(0,0,0,0.95), 0 0 16px rgba(255,255,255,0.15);


}





.wt:hover img:first-child {


  opacity: 1;


  filter: brightness(1.25) saturate(1.1);


}





.wt:hover .wt__boss {


  transform: translate(-50%, -50%) scale(1.15);


  filter: drop-shadow(0 0 6px rgba(255,255,255,0.35));


}





.wt--town {


  border-color: rgba(251, 191, 36, 0.18);


}


.wt--town:hover {


  border-color: #fbbf24;


  box-shadow: 0 12px 32px rgba(0,0,0,0.9), 0 0 14px rgba(251,191,36,0.35);


}





.wt--dungeon {


  border-color: rgba(248, 113, 113, 0.18);


}


.wt--dungeon:hover {


  border-color: #f87171;


  box-shadow: 0 12px 32px rgba(0,0,0,0.9), 0 0 14px rgba(248,113,113,0.35);


}





/* Tooltip -- superseded by the fuller rules in the inline <style>
   block (position/background/table layout etc). The old opacity:0 gated
   behind .is-visible (never toggled by current JS, which uses
   display:block/none instead) silently forced the tooltip invisible. */





/* Map cards (PNG previews) */


.mob-cards {


  display: grid;


  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));


  gap: 14px;


}





.mob-card {


  display: flex;


  flex-direction: column;


  align-items: center;


  gap: 10px;


  padding: 18px 12px 16px;


  border-radius: 14px;


  border: 1px solid rgba(255,255,255,0.07);


  background: rgba(255,255,255,0.03);


  cursor: pointer;


  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);


  text-align: center;


  position: relative;


  overflow: hidden;


}





.mob-card::after {


  content: '';


  position: absolute;


  inset: 0;


  background: linear-gradient(135deg, rgba(124,77,255,0.08), rgba(255,79,216,0.06));


  opacity: 0;


  transition: opacity .3s var(--ease);


  pointer-events: none;


}





.mob-card:hover {


  transform: translateY(-6px) scale(1.02);


  border-color: rgba(124,77,255,0.4);


  box-shadow: 0 16px 36px rgba(0,0,0,0.5), 0 0 20px rgba(124,77,255,0.12);


  background: rgba(124,77,255,0.06);


}





.mob-card:hover::after { opacity: 1; }





.mob-card img {


  width: 72px;


  height: 72px;


  object-fit: contain;


  image-rendering: pixelated;


  z-index: 1;


  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));


  transition: transform .3s var(--ease), filter .3s var(--ease);


}





.mob-card:hover img {


  transform: scale(1.12) translateY(-2px);


  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6)) brightness(1.1);


}





.mob-card span {


  font-size: 12px;


  font-weight: 600;


  color: rgba(255,255,255,0.75);


  line-height: 1.4;


  word-break: break-word;


  z-index: 1;


  transition: color .3s var(--ease);


}





.mob-card:hover span { color: #fff; }





.mob-card.hidden { display: none; }





.mob-card .wt__boss {


  position: absolute;


  bottom: 28px;


  right: 8px;


  width: 44px;


  height: 44px;


  top: auto;


  left: auto;


  transform: none;


}





.mob-card:hover .wt__boss {


  transform: scale(1.1) translateY(-4px);


}





/* Monster grid */


.mob-grid { background: transparent; }





.mob-search-bar {


  display: flex;


  align-items: center;


  gap: 12px;


  padding: 13px 22px;


  border-radius: 99px;


  border: 1px solid rgba(255,255,255,0.1);


  background: rgba(255,255,255,0.04);


  margin: 0 auto 32px;


  max-width: 480px;


  color: #fff;


  backdrop-filter: blur(12px);


  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);


}





.mob-search-bar:focus-within {


  border-color: rgba(124,77,255,0.5);


  box-shadow: 0 0 0 3px rgba(124,77,255,0.1);


}





.mob-search-bar i { color: rgba(255,255,255,0.4); font-size: 14px; }





.mob-search-bar input {


  background: transparent;


  border: none;


  outline: none;


  color: #fff;


  font-size: 14px;


  font-weight: 500;


  width: 100%;


}





.mob-search-bar input::placeholder { color: rgba(255,255,255,0.35); }





/* Responsive */


@media (max-width: 900px) {


  .wmap-pixel {


    grid-template-columns: repeat(16, minmax(38px, 1fr));


    gap: 4px;


  }


  .mob-cards {


    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));


    gap: 12px;


  }


}





@media (max-width: 600px) {


  #world-map { padding: 60px 0 70px; }


  #world-map .section__head { flex-direction: column; align-items: flex-start; }


  .wmap-tabs { align-self: stretch; justify-content: stretch; }


  .wmap-tab { flex: 1; justify-content: center; padding: 10px 14px; font-size: 12px; }


  .wmap-pixel {


    grid-template-columns: repeat(16, minmax(28px, 1fr));


    gap: 3px;


  }


  .mob-cards {


    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));


    gap: 10px;


  }


  .mob-card { padding: 14px 10px 12px; }


  .mob-card img { width: 58px; height: 58px; }


  .mob-card span { font-size: 11px; }


}