@import url('responsive.css?v=1');

:root {
  --ink: #19395a;
  --blue: #2c83c5;
  --gold: #e4a836;
  --cream: #fff8e7;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Kanit", sans-serif;
  background: #f7f2e8;
}

body.popup-open { overflow: hidden; }

.system-page { min-height:100vh; padding:35px 16px; display:grid; place-items:center; background:linear-gradient(145deg,#eaf8ff,#fff 55%,#dceff8); }
.system-card { width:min(460px,100%); padding:28px 32px 30px; border:1px solid #d2e9f4; border-radius:22px; background:rgba(255,255,255,.95); box-shadow:0 22px 55px rgba(44,126,166,.17); }
.system-card > img { width:145px; max-height:110px; display:block; margin:0 auto; object-fit:contain; }.system-card h1 { margin:4px 0 20px; text-align:center; color:#315c74; font-size:27px; }.system-card form { display:grid; gap:13px; }.system-card label { display:grid; gap:6px; color:#567487; font-size:12px; }.system-card input,.system-card select { width:100%; height:44px; padding:0 12px; color:#294e63; border:1px solid #c8e1ed; border-radius:9px; background:#f9fdff; font:400 14px "Kanit",sans-serif; outline:none; }.system-card input:focus,.system-card select:focus { border-color:#5fb2d8; box-shadow:0 0 0 3px rgba(82,169,211,.12); }.system-card button { height:48px; margin-top:5px; color:#fff; border:0; border-radius:10px; background:linear-gradient(135deg,#72c2e4,#378fbd); font:600 14px "Kanit",sans-serif; cursor:pointer; }.system-card > p:last-child { margin:18px 0 0; text-align:center; color:#7592a2; font-size:11px; }.system-card > p:last-child a { color:#388db8; }.system-error,.system-success { padding:10px 12px; border-radius:8px; font-size:12px; }.system-error { color:#a64141; background:#fff0f0; }.system-success { color:#277d55; background:#eafaf3; }
.public-content-page { min-height:100vh; padding:40px 16px; background:linear-gradient(180deg,#eaf8ff,#fff); }.public-content-shell { width:min(980px,100%); margin:0 auto; padding:30px; border:1px solid #d5eaf4; border-radius:20px; background:#fff; box-shadow:0 18px 42px rgba(45,125,163,.13); }.public-content-shell h1 { color:#315c74; }.public-content-shell .back-link { color:#388fba; font-size:12px; }
.member-page { min-height:100vh; padding:22px; background:linear-gradient(145deg,#e9f8ff,#fff 54%,#dceff8); }
.member-topbar { width:min(1180px,100%); height:78px; margin:0 auto 18px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border:1px solid #d2e8f2; border-radius:17px; background:rgba(255,255,255,.94); box-shadow:0 12px 30px rgba(49,126,163,.12); }.member-topbar img { width:112px; max-height:70px; object-fit:contain; }.member-topbar > div { display:flex; align-items:center; gap:10px; color:#76909e; font-size:11px; }.member-topbar strong { color:#315f78; font-size:14px; }.member-topbar > div a { margin-left:8px; padding:8px 12px; color:#fff; border-radius:8px; background:#4b9fc9; }
.member-shell { width:min(1180px,100%); margin:0 auto; display:grid; grid-template-columns:235px minmax(0,1fr); gap:18px; }.member-sidebar,.member-content { border:1px solid #d5e9f2; border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 16px 36px rgba(47,124,159,.12); }.member-sidebar { padding:22px 13px; }.member-sidebar h2 { margin:0 10px 16px; color:#3b718e; font:700 12px "Chakra Petch",sans-serif; }.member-sidebar a { height:43px; margin:4px 0; padding:0 13px; display:flex; align-items:center; color:#6d8795; border-radius:9px; font-size:12px; }.member-sidebar a:hover,.member-sidebar a.active { color:#fff; background:linear-gradient(135deg,#72c0e2,#3d94c0); }
.member-content { min-width:0; padding:26px; }.member-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:17px; border-bottom:1px solid #deedf4; }.member-heading small { color:#54a0c6; font:700 8px "Chakra Petch",sans-serif; letter-spacing:1.5px; }.member-heading h1 { margin:3px 0 0; color:#315e77; font-size:25px; }.member-heading > span { padding:8px 11px; color:#4689ab; border:1px solid #c8e2ee; border-radius:8px; background:#f4fbfe; font-size:10px; }
.member-stats { margin:20px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.member-stats article { min-width:0; padding:18px; border:1px solid #d9ebf3; border-radius:12px; background:linear-gradient(145deg,#fbfeff,#eef8fc); }.member-stats small { display:block; margin-bottom:6px; color:#7d99a7; font:700 8px "Chakra Petch",sans-serif; }.member-stats strong { display:block; overflow:hidden; color:#3a667e; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.member-characters h2 { margin:0 0 12px; color:#3b647a; font-size:17px; }.character-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.character-list article { padding:15px; border:1px solid #dbeaf1; border-radius:11px; background:#fafdfd; }.character-list article > div { display:flex; align-items:center; justify-content:space-between; gap:10px; }.character-list strong { color:#365f75; }.character-list span { color:#3aa36d; font-size:8px; }.character-list p { margin:6px 0 2px; color:#718b99; font-size:11px; }.character-list small,.member-empty { color:#91a3ad; font-size:10px; }
@media(max-width:760px){.member-page{padding:10px}.member-topbar{height:66px}.member-topbar > div span{display:none}.member-shell{grid-template-columns:1fr}.member-sidebar{display:flex;overflow-x:auto;padding:9px}.member-sidebar h2{display:none}.member-sidebar a{flex:0 0 auto}.member-content{padding:17px}.member-stats{grid-template-columns:1fr}.character-list{grid-template-columns:1fr}}
.admin-form{padding:18px;border:1px solid #d9ebf3;border-radius:14px;background:#f8fcfe}.admin-table-wrap{margin-top:22px;overflow:auto;border:1px solid #d9ebf3;border-radius:12px}.admin-table{width:100%;border-collapse:collapse;color:#58788a;font-size:12px}.admin-table th,.admin-table td{padding:11px;border-bottom:1px solid #e4f0f5;text-align:left;white-space:nowrap}.admin-table th{color:#387596;background:#eef8fc}.admin-table form{margin:0}.danger-button{padding:7px 11px;color:#fff;border:0;border-radius:7px;background:#d95f6a;cursor:pointer}.admin-ticket{margin-top:18px;padding:18px;border:1px solid #d9ebf3;border-radius:14px;background:#fbfeff}.admin-ticket h3{margin:0;color:#315e77}.admin-ticket p{color:#7894a2;font-size:12px}
.member-form { max-width:620px; margin:22px 0; display:grid; gap:14px; }.member-form label { display:grid; gap:7px; color:#58788a; font-size:12px; }.member-form input,.member-form select,.member-form textarea { width:100%; padding:11px 12px; color:#315d73; border:1px solid #cbe2ed; border-radius:9px; background:#f9fdff; font:400 13px "Kanit",sans-serif; }.member-form button,.service-list button { min-height:42px; padding:0 17px; color:#fff; border:0; border-radius:8px; background:linear-gradient(135deg,#72c0e2,#3e93bf); font:600 12px "Kanit",sans-serif; cursor:pointer; }.member-form button:disabled,.service-list button:disabled { opacity:.45; cursor:not-allowed; }
.service-list { margin-top:20px; display:grid; gap:9px; }.service-list article { padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:15px; border:1px solid #d9eaf2; border-radius:10px; background:#fafdfe; }.service-list h3 { margin:0; color:#38657c; font-size:14px; }.service-list p { margin:4px 0 0; color:#7c96a3; font-size:10px; }

a { color: inherit; text-decoration: none; }

.hero {
  position: relative;
  min-height: 790px;
  height: 100svh;
  max-height: 1080px;
  overflow: hidden;
  isolation: isolate;
  background: #75c9ed url("assets/bg.webp") center 42% / cover no-repeat;
}

.hero-video {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(225,247,255,.12), transparent 25%, transparent 75%, rgba(225,247,255,.12)),
    linear-gradient(180deg, rgba(54,151,207,.12), rgba(255,255,255,0) 40%, rgba(255,243,215,.16));
}

.nav {
  position: relative;
  z-index: 20;
  width: min(1280px, calc(100% - clamp(370px, 22vw, 430px) - 28px));
  max-width: none;
  height: 86px;
  margin: 18px 18px 0 clamp(370px, 22vw, 430px);
  padding: 0 14px 0 22px;
  display: flex;
  align-items: center;
  gap: 28px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 17px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 15px 40px rgba(29,96,138,.14), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(13px);
}

.brand { width: 126px; align-self: stretch; display: grid; place-items: center; flex: 0 0 auto; }
.brand img { width: 116px; max-height: 78px; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(28,73,106,.14)); }

.nav-links { margin: auto; display: flex; align-items: stretch; align-self: stretch; gap: clamp(22px, 3vw, 54px); }
.nav-links a { position: relative; display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: 14px; font-weight: 500; color: #37516b; white-space: nowrap; }
.nav-links small { font: 700 10px/1.4 "Chakra Petch", sans-serif; letter-spacing: 1.5px; color: #9aa9b5; }
.nav-links a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); transform: translateX(-50%); transition: width .25s; }
.nav-links a:hover::after, .nav-links a.active::after { width: 32px; }
.nav-links a.active, .nav-links a.active small { color: #c78b20; }

.account-btn { flex: 0 0 auto; min-width: 132px; height: 52px; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 12px; color: white; font-size: 14px; font-weight: 600; border-radius: 11px; background: linear-gradient(135deg,#e8b64a,#c9881e); box-shadow: 0 8px 20px rgba(176,114,15,.28), inset 0 1px rgba(255,255,255,.35); transition: transform .2s, box-shadow .2s; }
.account-btn:hover { transform: translateY(-2px); box-shadow: 0 11px 25px rgba(176,114,15,.35); }
.account-btn span { font-size: 18px; }
.sound-btn {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  margin-left: -14px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  box-shadow: 0 8px 20px rgba(39,101,137,.18);
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.sound-btn:hover { transform: translateY(-2px); }
.sound-btn img { display:block; width:100%; height:100%; object-fit:cover; border-radius:11px; transition:filter .2s, opacity .2s; }
.sound-btn.is-muted img { filter: grayscale(.65); opacity: .68; }
.menu-toggle { display: none; }

.hero-quick-menu {
  position: absolute;
  z-index: 18;
  top: 44%;
  right: clamp(20px, 2.4vw, 46px);
  width: 166px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateY(-50%);
  filter: drop-shadow(0 8px 18px rgba(27, 105, 159, .18));
}
.quick-menu-items { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.quick-menu-toggle { display: none; }
.quick-menu-line {
  width: 2px;
  height: 50px;
  margin-bottom: -4px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.95));
}
.quick-menu-item {
  position: relative;
  width: 100%;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .15px;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 24px;
  background: linear-gradient(100deg, rgba(89,177,237,.68), rgba(78,150,225,.52));
  box-shadow: inset 0 0 16px rgba(255,255,255,.2), 0 4px 13px rgba(35,117,175,.16);
  backdrop-filter: blur(7px);
  text-shadow: 0 1px 4px rgba(31,91,139,.36);
  transition: transform .2s, background .2s, box-shadow .2s;
}
.quick-menu-item::before,
.quick-menu-item::after {
  content: "✦";
  position: absolute;
  top: 50%;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  transform: translateY(-50%);
  text-shadow: 0 0 7px rgba(255,255,255,.9);
}
.quick-menu-item::before { left: -7px; }
.quick-menu-item::after { right: -7px; }
.quick-menu-item:hover,
.quick-menu-item:focus-visible {
  transform: translateX(-5px);
  background: linear-gradient(100deg, rgba(97,190,245,.88), rgba(75,143,220,.76));
  box-shadow: inset 0 0 18px rgba(255,255,255,.28), 0 8px 20px rgba(31,111,170,.24);
  outline: none;
}
.quick-menu-dots {
  height: 10px;
  color: rgba(255,255,255,.95);
  font: 700 14px/7px "Chakra Petch", sans-serif;
  letter-spacing: 2px;
}
.quick-menu-gem {
  width: 11px;
  height: 11px;
  margin-top: 2px;
  border: 2px solid rgba(255,255,255,.96);
  background: rgba(112,192,240,.68);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(255,255,255,.9);
}

.welcome-popup {
  position: fixed;
  z-index: 1000;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  background: rgba(14,46,71,.48);
  backdrop-filter: blur(10px);
  transition: opacity .45s, visibility .45s;
}
.welcome-popup.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.welcome-card {
  position: relative;
  width: min(460px, 100%);
  padding: 34px 42px 40px;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 24px;
  background: linear-gradient(155deg,rgba(255,255,255,.96),rgba(235,247,253,.92));
  box-shadow: 0 30px 80px rgba(14,46,71,.3), inset 0 1px white;
}
.welcome-card::before { content:""; position:absolute; inset:-100px -80px auto; height:220px; background:radial-gradient(circle,rgba(103,191,232,.22),transparent 66%); pointer-events:none; }
.welcome-logo { position: relative; width: 180px; max-height: 145px; object-fit: contain; margin: -8px auto -2px; filter: drop-shadow(0 8px 10px rgba(40,87,115,.15)); }
.welcome-kicker { margin: 0 0 9px; color: #ba8120; font: 700 10px "Chakra Petch",sans-serif; letter-spacing: 2.7px; }
.welcome-card h1 { margin: 0; color: #285675; font-size: clamp(24px,4vw,32px); line-height: 1.25; font-weight: 600; }
.welcome-text { margin: 13px 0 24px; color: #688092; font-size: 14px; line-height: 1.65; }
.welcome-enter { width: 100%; height: 57px; padding: 0 22px; display:flex; align-items:center; justify-content:center; gap:14px; border:0; border-radius:12px; color:white; font:600 15px "Kanit",sans-serif; background:linear-gradient(135deg,#eab23e,#c9851b); box-shadow:0 11px 27px rgba(172,109,14,.3), inset 0 1px rgba(255,255,255,.4); cursor:pointer; transition:transform .2s, box-shadow .2s; }
.welcome-enter:hover { transform:translateY(-2px); box-shadow:0 14px 31px rgba(172,109,14,.37); }
.welcome-enter b { font-size:20px; font-weight:400; }

.hero-content {
  position: relative;
  z-index: 8;
  width: min(570px, 42vw);
  margin: clamp(70px, 10vh, 118px) auto 0;
  text-align: center;
  filter: drop-shadow(0 3px 10px rgba(255,255,255,.35));
}

.eyebrow { margin: 0 0 5px; display: flex; justify-content: center; align-items: center; gap: 11px; color: #3978a4; font: 700 11px "Chakra Petch",sans-serif; letter-spacing: 2.5px; }
.eyebrow span { width: 34px; height: 1px; background: #77b0d3; }
.hero-logo { display: block; width: clamp(210px, 17vw, 300px); margin: -2px auto -5px; filter: drop-shadow(0 8px 10px rgba(26,76,110,.18)); }
.hero-content h1 { margin: 0; font-size: clamp(30px, 2.55vw, 46px); line-height: 1.14; font-weight: 400; color: #265679; text-shadow: 0 2px 0 white, 0 8px 22px rgba(255,255,255,.85); }
.hero-content h1 strong { color: #bc7e18; font-size: 1.16em; font-weight: 700; }
.intro { margin: 14px 0 22px; color: #49697f; font-size: clamp(13px, 1vw, 16px); line-height: 1.65; text-shadow: 0 1px 6px white; }
.hero-actions { display: flex; justify-content: center; gap: 12px; }
.btn { min-width: 160px; height: 51px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-3px); }
.btn-primary { color: white; background: linear-gradient(135deg,#eba934,#c98319); box-shadow: 0 9px 24px rgba(158,99,9,.28), inset 0 1px rgba(255,255,255,.4); }
.btn-primary b { font-size: 20px; font-weight: 400; }
.btn-secondary { color: #2f6082; border: 1px solid rgba(65,129,167,.35); background: rgba(255,255,255,.68); box-shadow: 0 8px 24px rgba(55,120,160,.12); backdrop-filter: blur(8px); }
.play { width: 27px; height: 27px; padding-left: 2px; display: grid; place-items: center; border-radius: 50%; color: white; font-size: 9px; background: #56a9d4; }

.characters { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.character { position: absolute; bottom: -5%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 13px rgba(34,92,117,.23)); }
.acolyte { z-index: 1; left: -2.5%; width: clamp(275px, 22vw, 420px); bottom: -2%; }
.merchant { z-index: 3; left: 12%; width: clamp(310px, 26vw, 500px); bottom: -8%; }
.novice-girl { z-index: 4; left: 28%; width: clamp(245px, 18vw, 350px); bottom: -13%; transform: rotate(1deg); }
.novice-boy { z-index: 4; right: 26.5%; width: clamp(235px, 18vw, 345px); bottom: -13%; transform: rotate(-1deg); }
.swordsman { z-index: 3; right: 8%; width: clamp(340px, 27vw, 520px); bottom: -8%; }

.cloud { position: absolute; z-index: 2; width: 45vw; height: 180px; border-radius: 50%; opacity: .6; filter: blur(25px); background: rgba(255,255,255,.76); }
.cloud-one { left: -12%; top: 25%; }.cloud-two { right: -13%; top: 33%; }
.bottom-mist { position: absolute; z-index: 6; left: 0; right: 0; bottom: -45px; height: 150px; filter: blur(12px); background: linear-gradient(180deg,transparent 0%,rgba(255,250,236,.75) 56%,#f7f2e8 88%); pointer-events: none; }

.scroll { position: absolute; z-index: 10; bottom: 25px; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 7px; transform: translateX(-50%); }
.mouse { width: 22px; height: 34px; border: 2px solid rgba(50,93,116,.62); border-radius: 12px; }
.mouse i { display: block; width: 3px; height: 7px; margin: 6px auto; border-radius: 3px; background: #b27a21; animation: scroll 1.8s infinite; }
.scroll em { color: rgba(49,83,104,.7); font: 700 8px "Chakra Petch",sans-serif; letter-spacing: 1.5px; font-style: normal; }
@keyframes scroll { 0% { transform: translateY(0); opacity: 1 } 70% { transform: translateY(9px); opacity: 0 } 100% { transform: translateY(0); opacity: 0 } }

.content-world { position:relative; background:linear-gradient(180deg,#eef9ff 0%,#fff 22%,#eaf7fd 52%,#f8fcff 76%,#e6f4fb 100%); }
.content-world::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 8% 18%,rgba(91,181,224,.1),transparent 21%),radial-gradient(circle at 92% 66%,rgba(116,198,232,.12),transparent 24%); pointer-events:none; }
.content-world > section { position:relative; z-index:1; }
.updates-section { position: relative; z-index: 12; padding: 30px 22px 82px; background: transparent; }
.updates-shell { width: min(1280px,100%); min-height: 540px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.18fr) minmax(390px,.82fr); overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 24px; background: rgba(255,252,245,.94); box-shadow: 0 22px 55px rgba(45,91,117,.16), inset 0 1px #fff; }
.news-panel, .server-panel { padding: 28px 30px; }
.news-panel { border-right: 1px solid #eadfce; }
.section-heading { min-height: 106px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e8dccb; }
.section-heading > div { position: relative; padding-left: 31px; }
.heading-icon { position: absolute; left: 0; top: 0; color: #c78b29; font-size: 23px; }
.section-heading h2 { margin: 0; color: #3d5163; font: 700 21px/1.25 "Chakra Petch","Kanit",sans-serif; letter-spacing: -.4px; }
.section-heading p { margin: 5px 0 0; color: #8a8277; font-size: 12px; }
.news-categories { margin-top: 13px; display: flex; align-items: center; gap: 5px; }
.news-category { position: relative; height: 29px; padding: 0 12px; color: #85919a; border: 0; border-radius: 7px; background: transparent; font: 600 10px "Chakra Petch","Kanit",sans-serif; cursor: pointer; transition: color .2s,background .2s; }
.news-category::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -8px; height: 2px; border-radius: 2px; background: #d09a3e; transition: left .2s,right .2s; }
.news-category:hover { color: #bd852b; background: rgba(231,178,75,.08); }
.news-category.active { color: #fff; background: linear-gradient(135deg,#e0ad4d,#be8124); box-shadow: 0 4px 10px rgba(170,105,16,.18); }
.news-category.active::after { left: 18%; right: 18%; }
.view-all { height: 34px; min-width: 84px; padding: 0 14px; display: grid; place-items: center; color: #8d682c; font-size: 12px; border: 1px solid #dfc9a7; border-radius: 9px; background: #fffaf2; transition: background .2s,color .2s; }
.view-all:hover { color: #fff; background: #c89135; }
.news-list { padding-top: 5px; }
.news-item { min-height: 101px; display: grid; grid-template-columns: 138px minmax(0,1fr) 18px; align-items: center; gap: 18px; border-bottom: 1px solid #ece3d6; transition: background .2s,transform .2s; }
.news-item:last-child { border-bottom: 0; }
.news-item:hover { background: rgba(236,246,251,.58); transform: translateX(4px); }
.news-item > img { width: 138px; height: 76px; border-radius: 8px; object-fit: cover; object-position: center 30%; background: #dceaf1; }
.news-copy { min-width: 0; }
.news-copy > div { display: flex; align-items: center; gap: 9px; }
.news-copy strong { overflow: hidden; color: #3f474d; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.news-copy p { margin: 5px 0 1px; overflow: hidden; color: #8b8b88; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.news-copy time { color: #a09282; font-size: 10px; }
.news-tag { flex: 0 0 auto; padding: 3px 7px; color: #fff; font: 700 9px "Chakra Petch",sans-serif; border-radius: 4px; }
.news-tag.event { background: #735cc0; }.news-tag.update { background: #318bd2; }.news-tag.system { background: #48a477; }
.news-item.is-filtered { display: none; }
.news-item > i { color: #c69547; font: normal 28px/1 sans-serif; }
.server-panel { position: relative; min-width: 0; overflow: hidden; background: linear-gradient(135deg,rgba(255,255,255,.82),rgba(230,243,249,.7)); }
.server-heading { position: relative; z-index: 2; min-height: 67px; }
.server-stats { position: relative; z-index: 2; width: 58%; margin: 13px 0 14px; }
.server-stats > div { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(218,209,196,.75); }
.server-stats dt { color: #675d53; font: 600 11px "Chakra Petch","Kanit",sans-serif; }
.server-stats dd { margin: 0; color: #59636b; font-size: 12px; }
.server-stats .online { color: #39a46d; font-weight: 600; }
.server-stats .online span { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #43bd7d; box-shadow: 0 0 0 4px rgba(67,189,125,.13); }
.server-stats .server-state { font-weight:600; }.server-stats .server-state span { display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%; }
.server-stats .server-state.online { color:#39a46d; }.server-stats .server-state.online span { background:#43bd7d;box-shadow:0 0 0 4px rgba(67,189,125,.13); }
.server-stats .server-state.offline { color:#d75555; }.server-stats .server-state.offline span { background:#e25b5b;box-shadow:0 0 0 4px rgba(226,91,91,.13); }
.server-stats .server-state.under-construction,.server-stats .server-state.under-maintenance { color:#c58a1b; }.server-stats .server-state.under-construction span,.server-stats .server-state.under-maintenance span { background:#e9a928;box-shadow:0 0 0 4px rgba(233,169,40,.15); }
.content-world .server-status-btn { background:linear-gradient(135deg,#70c3e4,#3f98c3);box-shadow:0 9px 20px rgba(54,143,185,.25),inset 0 1px rgba(255,255,255,.4); }
.server-status-btn { position: relative; z-index: 3; width: 190px; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; border-radius: 9px; background: linear-gradient(135deg,#e8b34a,#c88824); box-shadow: 0 9px 20px rgba(166,105,16,.25),inset 0 1px rgba(255,255,255,.4); transition: transform .2s; }
.server-status-btn { width:230px; }
.server-status-btn:hover { transform: translateY(-2px); }
.server-status-btn strong { font-size: 14px; font-weight: 600; }.server-status-btn small { font: 700 9px "Chakra Petch",sans-serif; letter-spacing: .6px; }
.server-character { position: absolute; z-index: 1; right: -42px; bottom: -66px; width: 58%; max-height: 470px; object-fit: contain; object-position: bottom right; filter: drop-shadow(-10px 10px 10px rgba(40,88,114,.16)); pointer-events: none; }

.guide-section { margin-top: -54px; padding: 0 22px 38px; background: transparent; }
.guide-shell { position: relative; z-index: 13; width: min(1280px,100%); margin: 0 auto; padding: 27px 28px 31px; overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 24px; background: radial-gradient(circle at 30% 0,rgba(92,145,172,.22),transparent 30%),linear-gradient(135deg,#213c50,#172b3b 56%,#112331); box-shadow: 0 24px 55px rgba(39,65,78,.24),inset 0 1px rgba(255,255,255,.12); }
.guide-shell::before { content:""; position:absolute; inset:0; opacity:.12; background-image:linear-gradient(120deg,transparent 0 35%,rgba(255,255,255,.16) 35.2%,transparent 35.5%),radial-gradient(circle at 75% 40%,#65b5df 0,transparent 30%); pointer-events:none; }
.guide-heading { position: relative; z-index: 2; min-height: 65px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid rgba(224,178,100,.25); }
.guide-heading > div:first-child { position: relative; padding-left: 32px; }
.guide-star { position: absolute; left: 0; top: -1px; color: #e1ab52; font-size: 23px; text-shadow: 0 0 12px rgba(230,177,82,.5); }
.guide-heading h2 { margin: 0; color: #fff8eb; font: 700 21px/1.25 "Chakra Petch","Kanit",sans-serif; letter-spacing: -.3px; }
.guide-heading p { margin: 5px 0 0; color: #b7c7d0; font-size: 12px; }
.guide-arrows { display: flex; gap: 8px; }
.guide-arrows button { width: 34px; height: 34px; display: grid; place-items: center; color: #e8bb6a; border: 1px solid rgba(227,179,96,.5); border-radius: 50%; background: rgba(255,255,255,.04); font: 300 24px/1 sans-serif; }
.guide-grid { position: relative; z-index: 2; padding-top: 22px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 14px; }
.guide-card { min-width: 0; padding: 9px 9px 15px; text-align: center; border: 1px solid rgba(255,255,255,.72); border-radius: 15px; background: linear-gradient(160deg,#fffdf7,#f4e9d7); box-shadow: 0 10px 22px rgba(4,19,28,.18); transition: transform .22s,box-shadow .22s; }
.guide-card:hover { transform: translateY(-7px); box-shadow: 0 16px 28px rgba(4,19,28,.27); }
.guide-picture { position: relative; height: 145px; overflow: hidden; border-radius: 10px; background: linear-gradient(145deg,#d4e9f2,#ead9bc); }
.guide-picture::after { content:""; position:absolute; inset:auto 0 0; height:45%; background:linear-gradient(transparent,rgba(18,49,69,.28)); }
.guide-picture img { width:100%; height:100%; object-fit:cover; object-position:center 20%; transition:transform .3s; }
.guide-card:hover .guide-picture img { transform:scale(1.06); }
.guide-picture span { position:absolute; z-index:2; left:9px; bottom:9px; width:30px; height:30px; display:grid; place-items:center; color:#fff5d8; border:1px solid rgba(255,239,194,.75); border-radius:50%; background:rgba(126,85,28,.78); font-size:14px; box-shadow:0 4px 9px rgba(60,39,11,.25); }
.guide-card h3 { margin: 13px 2px 3px; overflow:hidden; color:#37434b; font-size:14px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.guide-card p { margin:0; min-height:32px; color:#928779; font-size:10px; line-height:1.55; }

.cross-platform { padding: 0 22px 88px; background: transparent; }
.cross-platform-shell { position: relative; width: min(1280px,100%); height: 300px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.52); border-radius: 24px; background: linear-gradient(100deg,rgba(25,59,80,.96),rgba(35,81,108,.9) 51%,rgba(18,47,68,.96)),url("assets/bg.webp") center/cover; box-shadow: 0 24px 48px rgba(52,70,76,.25),inset 0 1px rgba(255,255,255,.18); isolation:isolate; }
.cross-platform-shell::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(232,179,86,.25),transparent 37%,rgba(96,185,225,.12)),radial-gradient(circle at 47% 30%,rgba(255,255,255,.13),transparent 35%); }
.cross-platform-shell::after { content:""; position:absolute; z-index:-1; left:0; right:0; bottom:0; height:7px; background:linear-gradient(90deg,#d59c3b,#f0c779 45%,#65b9dd 78%,#367aa4); }
.platform-character { position:absolute; left:-14px; bottom:-96px; width:34%; height:390px; pointer-events:none; }
.platform-character::after { content:""; position:absolute; inset:15% -30% 0 0; z-index:-1; background:radial-gradient(circle,rgba(234,184,95,.35),transparent 62%); }
.platform-character img { width:100%; height:100%; object-fit:contain; object-position:left bottom; filter:drop-shadow(13px 8px 10px rgba(5,27,41,.28)); }
.platform-copy { position:absolute; z-index:3; top:50%; left:30%; width:38%; text-align:center; transform:translateY(-50%); }
.platform-copy > span { color:#e7b960; font:700 10px "Chakra Petch",sans-serif; letter-spacing:3px; }
.platform-copy h2 { margin:4px 0 0; color:#fff8e7; font:700 clamp(31px,3vw,47px)/1.05 "Chakra Petch","Kanit",sans-serif; letter-spacing:-1.5px; text-shadow:0 4px 15px rgba(2,22,35,.35); }
.platform-copy p { margin:9px 0 18px; color:#e4edf2; font-size:16px; font-weight:500; }
.platform-buttons { display:flex; justify-content:center; gap:9px; }
.platform-btn { min-width:148px; height:53px; padding:0 16px; display:flex; align-items:center; justify-content:center; gap:9px; color:#273c49; border:1px solid rgba(255,255,255,.75); border-radius:9px; background:linear-gradient(160deg,#fffefa,#eadcc7); box-shadow:0 8px 18px rgba(5,25,38,.23),inset 0 1px white; transition:transform .2s,box-shadow .2s; }
.platform-btn:hover { transform:translateY(-3px); box-shadow:0 12px 23px rgba(5,25,38,.3),inset 0 1px white; }
.platform-btn b { font:700 26px/1 sans-serif; }.platform-btn span { display:flex; flex-direction:column; align-items:flex-start; font:600 14px/1.1 "Chakra Petch","Kanit",sans-serif; }.platform-btn small { margin-bottom:2px; color:#92836e; font-size:7px; letter-spacing:.6px; }
.platform-btn-main { min-width:238px; color:#fff; border-color:rgba(255,234,185,.8); background:linear-gradient(135deg,#e7b34c,#bd7d20); box-shadow:0 9px 21px rgba(8,27,37,.28),inset 0 1px rgba(255,255,255,.38); }
.platform-btn-main b { color:#fff8e3; }.platform-btn-main small { color:#fff0cd; }.platform-btn-main span { align-items:center; font-size:15px; }
.platform-devices { position:absolute; right:2.5%; bottom:22px; width:32%; height:240px; }
.desktop-device { position:absolute; right:7%; bottom:25px; width:84%; height:190px; padding:10px 10px 17px; border:4px solid #14232c; border-radius:11px; background:linear-gradient(#4b555b,#192a34); box-shadow:-12px 15px 25px rgba(5,24,35,.32); transform:perspective(700px) rotateY(-7deg); }
.desktop-device > div { width:100%; height:100%; overflow:hidden; border-radius:3px; }.desktop-device img,.mobile-device img { width:100%; height:100%; object-fit:cover; }
.desktop-device i { position:absolute; left:38%; bottom:-24px; width:24%; height:24px; border-radius:0 0 4px 4px; background:#253944; }.desktop-device i::after { content:""; position:absolute; left:-30%; bottom:0; width:160%; height:5px; border-radius:5px; background:#172832; }
.mobile-device { position:absolute; z-index:3; right:-2%; bottom:12px; width:49%; height:auto; aspect-ratio:1280/590; padding:5px 8px; border:4px solid #152630; border-radius:11px; background:#233844; box-shadow:-7px 9px 16px rgba(5,24,35,.34); transform:rotate(3deg); }.mobile-device > div { width:100%; height:100%; overflow:hidden; border-radius:5px; }
.platform-poring { position:absolute; z-index:5; left:-12%; bottom:-52px; width:110px; height:130px; object-fit:contain; filter:drop-shadow(0 6px 6px rgba(5,25,38,.28)); }

.community-data-section { padding:0 22px 92px; background:transparent; }
.community-data-grid { width:min(1280px,100%); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.guild-war-panel,.credit-partner-panel { min-width:0; padding:25px 26px 24px; overflow:hidden; border:1px solid rgba(255,255,255,.88); border-radius:22px; background:rgba(255,252,245,.95); box-shadow:0 18px 42px rgba(63,78,83,.16),inset 0 1px #fff; }
.data-panel-heading { min-height:69px; display:flex; align-items:flex-start; justify-content:space-between; gap:15px; border-bottom:1px solid #e9ddcd; }
.data-panel-heading > div:first-child { position:relative; padding-left:32px; }
.data-panel-heading > div:first-child > span { position:absolute; left:0; top:-2px; color:#c88b2c; font-size:23px; }
.data-panel-heading h2 { margin:0; color:#3a5060; font:700 20px/1.25 "Chakra Petch","Kanit",sans-serif; }
.data-panel-heading p { margin:5px 0 0; color:#94897c; font-size:11px; }
.live-label { padding:6px 9px; color:#3b9e6c; border:1px solid rgba(63,169,112,.25); border-radius:7px; background:rgba(63,169,112,.08); font:700 8px "Chakra Petch",sans-serif; white-space:nowrap; }.live-label i { display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:#41b878; box-shadow:0 0 0 3px rgba(65,184,120,.13); }
.guild-heading-actions { display:flex; align-items:center; gap:8px; }
.guild-controls { display:flex; gap:6px; }.guild-controls button { width:34px; height:34px; display:grid; place-items:center; color:#bd8429; border:1px solid #dcc49e; border-radius:50%; background:#fffbf3; font:300 24px/1 sans-serif; cursor:pointer; transition:color .2s,background .2s; }.guild-controls button:hover { color:#fff; background:#c58d34; }
.guild-slider { position:relative; height:295px; margin-top:17px; }
.guild-result { position:absolute; inset:0; height:295px; overflow:hidden; opacity:0; visibility:hidden; transform:translateX(18px); border-radius:15px; background:#22465d; transition:opacity .28s,visibility .28s,transform .28s; }.guild-result.active { opacity:1; visibility:visible; transform:translateX(0); }
.castle-picture { width:100%; height:100%; object-fit:cover; object-position:center 38%; transition:transform .4s; }.guild-result:hover .castle-picture { transform:scale(1.035); }
.castle-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,34,49,.02),rgba(11,28,39,.18) 43%,rgba(10,28,41,.92)); }
.guild-owner { position:absolute; z-index:2; left:21px; right:21px; bottom:19px; display:flex; align-items:center; gap:15px; color:#fff; }
.guild-emblem { flex:0 0 auto; width:74px; height:74px; padding:5px; display:grid; place-items:center; border:2px solid #e5b45d; border-radius:14px; background:rgba(255,255,255,.9); box-shadow:0 7px 17px rgba(3,18,28,.35); }.guild-emblem img { width:100%; height:100%; object-fit:contain; }
.guild-owner small { color:#e8ba68; font:700 8px "Chakra Petch",sans-serif; letter-spacing:1.6px; }.guild-owner h3 { margin:2px 0 4px; font:700 22px/1 "Chakra Petch","Kanit",sans-serif; }.guild-owner p { margin:0; display:flex; flex-direction:column; color:#e8eef1; font-size:11px; }.guild-owner p span { color:#9eb0bb; font-size:9px; }
.castle-badge { position:absolute; top:14px; right:14px; padding:7px 10px; color:#fff2cd; border:1px solid rgba(243,203,129,.7); border-radius:7px; background:rgba(25,53,70,.74); backdrop-filter:blur(6px); font:700 8px "Chakra Petch",sans-serif; letter-spacing:1px; }
.guild-pagination { height:17px; display:flex; align-items:flex-end; justify-content:center; gap:6px; }.guild-pagination i { width:6px; height:6px; border-radius:50%; background:#d5c6b0; transition:width .2s,background .2s; }.guild-pagination i.active { width:18px; border-radius:5px; background:#c58c32; }
.guild-report-link { width:max-content; margin:8px auto 0; display:flex; align-items:center; gap:10px; color:#99702f; font-size:12px; font-weight:500; }.guild-report-link span { font-size:17px; }
.partner-controls { display:flex; gap:7px; }.partner-controls button { width:34px; height:34px; display:grid; place-items:center; color:#bd8429; border:1px solid #dcc49e; border-radius:50%; background:#fffbf3; font:300 24px/1 sans-serif; cursor:pointer; transition:color .2s,background .2s; }.partner-controls button:hover { color:#fff; background:#c58d34; }
.partner-slider { position:relative; height:342px; margin-top:17px; }
.partner-card { position:absolute; inset:0; padding:26px 26px 22px; display:grid; grid-template-columns:128px minmax(0,1fr); grid-template-rows:1fr auto; gap:16px 22px; opacity:0; visibility:hidden; transform:translateX(18px); border:1px solid #e8dac5; border-radius:15px; background:linear-gradient(145deg,#f8fbfc,#f7ead6); transition:opacity .28s,visibility .28s,transform .28s; }.partner-card.active { opacity:1; visibility:visible; transform:translateX(0); }
.partner-logo { width:128px; height:128px; padding:12px; display:grid; place-items:center; align-self:center; overflow:hidden; border:1px solid #dfcba9; border-radius:19px; background:#fff; box-shadow:0 9px 18px rgba(83,69,45,.12); }.partner-logo img { width:100%; height:100%; object-fit:contain; }
.partner-info { align-self:center; min-width:0; }.partner-info small { color:#bf862d; font:700 8px "Chakra Petch",sans-serif; letter-spacing:1.2px; }.partner-info h3 { margin:5px 0 6px; overflow:hidden; color:#3d505c; font-size:20px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }.partner-info p { margin:0 0 15px; color:#8f8981; font-size:11px; line-height:1.55; }.partner-info > div { padding-top:11px; display:flex; flex-direction:column; border-top:1px solid #e6d8c5; }.partner-info > div span { color:#9a9084; font-size:9px; }.partner-info > div strong { color:#b77921; font-size:14px; font-weight:600; }
.visit-store { grid-column:1/-1; height:46px; display:flex; align-items:center; justify-content:center; gap:12px; color:#fff; border-radius:9px; background:linear-gradient(135deg,#e4ae48,#bd7e21); box-shadow:0 8px 16px rgba(158,96,11,.19); font-size:12px; font-weight:600; }.visit-store span { font-size:17px; }
.partner-pagination { height:18px; display:flex; align-items:flex-end; justify-content:center; gap:6px; }.partner-pagination i { width:6px; height:6px; border-radius:50%; background:#d5c6b0; transition:width .2s,background .2s; }.partner-pagination i.active { width:18px; border-radius:5px; background:#c58c32; }

/* Content theme: white & soft blue */
.content-world .updates-shell,
.content-world .guild-war-panel,
.content-world .credit-partner-panel { border-color:#d8ecf6; background:rgba(255,255,255,.94); box-shadow:0 18px 45px rgba(50,130,174,.13),inset 0 1px #fff; }
.content-world .section-heading,
.content-world .data-panel-heading { border-color:#dcecf4; }
.content-world .heading-icon,
.content-world .guide-star,
.content-world .data-panel-heading > div:first-child > span { color:#55a9d4; }
.content-world .view-all { color:#438eb6; border-color:#b9ddec; background:#f7fcff; }
.content-world .view-all:hover { color:#fff; background:#56a9d4; }
.content-world .news-category:hover { color:#378ebc; background:rgba(79,169,213,.09); }
.content-world .news-category.active { background:linear-gradient(135deg,#75c5e8,#3e94c4); box-shadow:0 4px 10px rgba(52,143,189,.2); }
.content-world .news-category::after { background:#4ba2cf; }
.content-world .news-item > i,
.content-world .guild-report-link { color:#4f9dc4; }
.content-world .server-panel { background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(224,244,252,.8)); }
.content-world .server-status-btn,
.content-world .visit-store { background:linear-gradient(135deg,#70bee1,#378dbc); box-shadow:0 9px 20px rgba(47,137,183,.23),inset 0 1px rgba(255,255,255,.42); }
.content-world .guide-shell { border-color:rgba(255,255,255,.9); background:radial-gradient(circle at 28% 0,rgba(133,208,238,.27),transparent 32%),linear-gradient(145deg,#f9fdff,#dff2fa 58%,#cde9f5); box-shadow:0 21px 48px rgba(48,127,164,.17),inset 0 1px #fff; }
.content-world .guide-shell::before { opacity:.25; background-image:linear-gradient(120deg,transparent 0 35%,rgba(71,161,203,.13) 35.2%,transparent 35.5%),radial-gradient(circle at 75% 40%,#a7ddf1 0,transparent 30%); }
.content-world .guide-heading { border-color:rgba(80,161,199,.2); }
.content-world .guide-heading h2 { color:#315b73; text-shadow:none; }
.content-world .guide-heading p { color:#7492a2; }
.content-world .guide-arrows button,
.content-world .guild-controls button,
.content-world .partner-controls button { color:#438fb8; border-color:#b8dae9; background:#f9fdff; }
.content-world .guide-arrows button:hover,
.content-world .guild-controls button:hover,
.content-world .partner-controls button:hover { color:#fff; background:#54a6cf; }
.content-world .guide-card { border-color:#d5eaf3; background:linear-gradient(160deg,#fff,#eef8fc); box-shadow:0 9px 21px rgba(46,119,152,.13); }
.content-world .guide-picture span { color:#fff; border-color:#ccecf8; background:rgba(55,142,184,.82); }
.content-world .cross-platform-shell { border-color:#cde8f3; background:linear-gradient(105deg,rgba(232,247,253,.97),rgba(171,221,240,.94) 53%,rgba(112,188,222,.94)),url("assets/bg.webp") center/cover; box-shadow:0 21px 45px rgba(46,127,165,.19),inset 0 1px #fff; }
.content-world .cross-platform-shell::before { background:linear-gradient(90deg,rgba(255,255,255,.5),transparent 40%,rgba(45,145,191,.1)),radial-gradient(circle at 47% 30%,rgba(255,255,255,.55),transparent 36%); }
.content-world .cross-platform-shell::after { background:linear-gradient(90deg,#b7e3f3,#71c2e3 48%,#3e98c4); }
.content-world .platform-copy > span { color:#397fa6; }
.content-world .platform-copy h2 { color:#255c7a; text-shadow:0 2px 0 rgba(255,255,255,.7); }
.content-world .platform-copy p { color:#426e84; }
.content-world .platform-btn-main { color:#fff; border-color:#d6eff8; background:linear-gradient(135deg,#71c3e5,#378fbe); box-shadow:0 9px 21px rgba(38,121,163,.25),inset 0 1px rgba(255,255,255,.45); }
.content-world .platform-btn-main small { color:#e5f7ff; }
.content-world .guild-emblem { border-color:#75bddd; }
.content-world .castle-badge { color:#eaf9ff; border-color:rgba(171,224,245,.75); background:rgba(31,103,139,.76); }
.content-world .guild-pagination i,
.content-world .partner-pagination i { background:#c1dae6; }
.content-world .guild-pagination i.active,
.content-world .partner-pagination i.active { background:#4da2cc; }
.content-world .partner-card { border-color:#d5e8f1; background:linear-gradient(145deg,#fbfeff,#e9f6fb); }
.content-world .partner-logo { border-color:#c8e2ee; }
.content-world .partner-info small,
.content-world .partner-info > div strong { color:#398fbc; }

.site-footer { position:relative; overflow:hidden; color:#aebec8; background:linear-gradient(145deg,#122a3a,#0b1d29 58%,#071720); border-top:4px solid #d59b3b; }
.site-footer::before { content:""; position:absolute; inset:0; opacity:.22; background:radial-gradient(circle at 18% -20%,#5caed5,transparent 32%),radial-gradient(circle at 85% 130%,#b77d27,transparent 28%); pointer-events:none; }
.footer-main { position:relative; z-index:2; width:min(1280px,calc(100% - 44px)); min-height:270px; margin:0 auto; padding:45px 0 38px; display:grid; grid-template-columns:1.55fr repeat(3,.75fr) 1.05fr; gap:45px; }
.footer-brand img { display:block; width:160px; max-height:115px; object-fit:contain; object-position:left center; filter:drop-shadow(0 8px 9px rgba(0,0,0,.28)); }
.footer-brand p { margin:8px 0 14px; color:#9db0bc; font-size:11px; line-height:1.7; }.footer-brand small { color:#6f8795; font:500 8px "Chakra Petch",sans-serif; letter-spacing:.35px; }
.footer-column,.footer-social { padding-top:13px; }
.footer-column h2,.footer-social h2 { position:relative; margin:0 0 17px; padding-bottom:10px; color:#f6e9d2; font:700 11px "Chakra Petch",sans-serif; letter-spacing:.8px; }.footer-column h2::after,.footer-social h2::after { content:""; position:absolute; left:0; bottom:0; width:24px; height:2px; border-radius:2px; background:#d09a41; }
.footer-column a { width:max-content; margin:0 0 8px; display:block; color:#aebdc6; font-size:11px; transition:color .2s,transform .2s; }.footer-column a:hover { color:#e4b865; transform:translateX(4px); }
.footer-social > div { display:flex; gap:9px; }.footer-social > div a { width:40px; height:40px; display:grid; place-items:center; color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:50%; background:#255e91; box-shadow:0 6px 13px rgba(0,0,0,.2); font:700 17px Arial,sans-serif; transition:transform .2s,filter .2s; }.footer-social > div a:nth-child(2) { background:#5865a8; }.footer-social > div a:nth-child(3) { background:#c54139; }.footer-social > div a:hover { transform:translateY(-3px); filter:brightness(1.13); }
.footer-social p { margin:15px 0 0; color:#78909d; font-size:9px; line-height:1.65; }
.footer-bottom { position:relative; z-index:2; min-height:54px; padding:0 max(22px,calc((100% - 1280px)/2)); display:flex; align-items:center; justify-content:space-between; gap:22px; border-top:1px solid rgba(255,255,255,.07); background:rgba(3,15,22,.28); color:#6f8693; font-size:9px; }.footer-bottom span { color:#c99a4c; font:700 8px "Chakra Petch",sans-serif; letter-spacing:1.5px; }.footer-bottom p { margin:0; }.footer-bottom a { color:#93a8b3; transition:color .2s; }.footer-bottom a:hover { color:#e1b15d; }

@media (max-width: 1120px) {
  .nav {
    width: calc(100% - 32px);
    margin: 16px auto 0;
  }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 12px; }
  .account-btn { min-width: 118px; }
  .merchant { left: 7%; }.swordsman { right: 3%; }
  .updates-shell { grid-template-columns: minmax(0,1.08fr) minmax(350px,.92fr); }
  .news-item { grid-template-columns: 115px minmax(0,1fr) 14px; gap: 13px; }
  .news-item > img { width: 115px; }
  .guide-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .platform-copy { left:27%; width:42%; }
  .platform-devices { right:1%; width:31%; }
  .partner-card { grid-template-columns:105px minmax(0,1fr); gap:14px; padding:22px; }.partner-logo { width:105px; height:105px; }
}

@media (max-width: 860px) {
  .hero { min-height: 720px; height: 100svh; background-position: center 35%; }
  .hero-video { object-position: 50% center; }
  .nav { width: calc(100% - 24px); height: 70px; margin-top: 12px; padding: 0 12px 0 15px; }
  .brand { width: 90px; }.brand img { width: 86px; max-height: 64px; }
  .menu-toggle { margin-left: auto; width: 42px; height: 42px; border: 0; border-radius: 9px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: rgba(60,129,170,.1); }
  .menu-toggle span { width: 20px; height: 2px; border-radius: 2px; background: #39759b; transition: .25s; }
  .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .account-btn { min-width: auto; height: 43px; padding: 0 13px; font-size: 12px; }
  .sound-btn { width: 43px; height: 43px; margin-left: 0; }
  .nav-links { position: absolute; top: 78px; left: 0; right: 0; padding: 12px; display: grid; gap: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 13px; background: rgba(255,255,255,.92); box-shadow: 0 16px 30px rgba(31,91,127,.18); backdrop-filter: blur(15px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .22s; }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links a { min-height: 46px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 16px; border-bottom: 1px solid #edf1f2; text-align: left; }
  .nav-links a:last-child { border: 0; }
  .nav-links a::after { display:none; }
  .hero-content { width: min(500px, 90vw); margin-top: clamp(52px, 9vh, 86px); }
  .hero-logo { width: 220px; }
  .acolyte { left: -13%; width: 280px; opacity: .95; }
  .merchant { left: -2%; width: 315px; bottom: -9%; }
  .novice-girl { display:none; }
  .novice-boy { display:none; }
  .swordsman { right: -11%; width: 350px; bottom: -9%; }
  .hero-quick-menu { top: 43%; right: 18px; width: 148px; transform: translateY(-50%); gap: 6px; }
  .quick-menu-line { height: 34px; }
  .quick-menu-item { height: 43px; border-radius: 22px; font-size: 13px; }
  .updates-shell { grid-template-columns: 1fr; }
  .news-panel { border-right: 0; border-bottom: 1px solid #eadfce; }
  .server-panel { min-height: 500px; }
  .guide-section { margin-top: -45px; }
  .guide-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cross-platform-shell { height:420px; }
  .platform-character { left:-40px; bottom:-105px; width:48%; opacity:.78; }
  .platform-copy { top:37%; left:8%; width:58%; }
  .platform-devices { width:41%; right:0; bottom:5px; transform:scale(.82); transform-origin:bottom right; }
  .community-data-grid { grid-template-columns:1fr; }
  .footer-main { grid-template-columns:1.35fr repeat(2,1fr); gap:30px; }.footer-brand { grid-row:span 2; }.footer-social { grid-column:2/-1; }
}

@media (max-width: 560px) {
  .hero { min-height: 700px; max-height: 850px; background-position: 50% 20%; }
  .hero-video { object-position: 50% center; }
  .nav { height: 62px; gap: 5px; padding: 0 8px; }
  .brand { width: 64px; }
  .brand img { width: 62px; max-height: 56px; }
  .menu-toggle { width: 38px; height: 38px; }
  .sound-btn { width: 39px; height: 39px; }
  .account-btn { height: 39px; padding: 0 9px; font-size: 11px; }
  .account-btn span { display: none; }
  .welcome-card { padding: 27px 22px 28px; border-radius: 20px; }
  .welcome-logo { width: 150px; }
  .hero-content { margin-top: 70px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.4px; }
  .eyebrow span { width: 18px; }
  .hero-logo { width: 190px; margin-bottom: 2px; }
  .hero-content h1 { font-size: 29px; }
  .intro { max-width: 340px; margin: 12px auto 18px; font-size: 12px; }
  .hero-actions { gap: 8px; }.btn { min-width: 138px; height: 46px; font-size: 12px; }
  .acolyte { display:none; }
  .merchant { left: -24%; width: 310px; bottom: -5%; }
  .swordsman { right: -24%; width: 330px; bottom: -6%; }
  .hero-quick-menu { top: 88px; right: 10px; bottom: auto; width: 142px; display: block; transform: none; filter: none; }
  .quick-menu-toggle { width: 100%; height: 42px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; color: #fff; border: 1.5px solid rgba(255,255,255,.95); border-radius: 22px; background: linear-gradient(100deg,rgba(89,177,237,.88),rgba(78,150,225,.78)); box-shadow: 0 7px 18px rgba(29,105,160,.22), inset 0 0 14px rgba(255,255,255,.18); font: 500 13px "Kanit",sans-serif; cursor: pointer; }
  .quick-menu-toggle b { font-size: 19px; font-weight: 400; transition: transform .22s; }
  .hero-quick-menu.is-open .quick-menu-toggle b { transform: rotate(45deg); }
  .quick-menu-items { position: absolute; top: 49px; right: 0; width: 142px; padding: 8px; gap: 5px; border: 1px solid rgba(255,255,255,.78); border-radius: 18px; background: rgba(219,241,253,.82); box-shadow: 0 12px 26px rgba(26,91,136,.2); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translateY(-7px) scale(.97); transform-origin: top right; transition: opacity .2s, visibility .2s, transform .2s; }
  .hero-quick-menu.is-open .quick-menu-items { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  .quick-menu-line, .quick-menu-dots, .quick-menu-gem { display: none; }
  .quick-menu-item { height: 38px; border-width: 1.5px; font-size: 11px; }
  .quick-menu-item:hover, .quick-menu-item:focus-visible { transform: none; }
  .scroll { bottom: 18px; }
  .updates-section { padding: 18px 10px 48px; }
  .updates-shell { border-radius: 17px; }
  .news-panel, .server-panel { padding: 20px 15px; }
  .section-heading h2 { font-size: 17px; }
  .news-categories { gap: 2px; }
  .news-category { padding: 0 7px; font-size: 9px; }
  .news-item { min-height: 86px; grid-template-columns: 86px minmax(0,1fr) 10px; gap: 9px; }
  .news-item > img { width: 86px; height: 61px; }
  .news-copy p { display: none; }
  .news-copy > div { display: block; }
  .news-tag { display: inline-block; margin-bottom: 3px; }
  .server-stats { width: 67%; }
  .server-character { right: -60px; width: 64%; opacity: .86; }
  .guide-section { margin-top: -32px; padding: 0 10px 56px; }
  .guide-shell { padding: 21px 14px 22px; border-radius: 17px; }
  .guide-heading h2 { font-size: 17px; }
  .guide-arrows { display:none; }
  .guide-grid { gap: 9px; padding-top: 15px; }
  .guide-card { padding: 7px 7px 12px; border-radius: 12px; }
  .guide-picture { height: 116px; }
  .guide-card h3 { font-size: 12px; }
  .cross-platform { padding:0 10px 56px; }
  .cross-platform-shell { height:430px; border-radius:17px; }
  .platform-character { left:-88px; width:82%; opacity:.42; }
  .platform-copy { top:31%; left:5%; width:90%; }
  .platform-copy h2 { font-size:31px; }.platform-copy p { font-size:13px; }
  .platform-btn { min-width:126px; padding:0 10px; }
  .platform-btn-main { min-width:220px; }
  .platform-devices { width:74%; right:-4%; bottom:1px; transform:scale(.7); }
  .community-data-section { padding:0 10px 56px; }
  .guild-war-panel,.credit-partner-panel { padding:20px 14px; border-radius:17px; }
  .data-panel-heading h2 { font-size:17px; }
  .guild-result { height:260px; }.guild-owner { left:13px; right:13px; }.guild-emblem { width:62px; height:62px; }.guild-owner h3 { font-size:17px; }
  .partner-card { padding:16px; grid-template-columns:80px minmax(0,1fr); gap:12px; }.partner-logo { width:80px; height:80px; }.partner-info h3 { font-size:16px; }.partner-slider { height:330px; }
  .footer-main { width:calc(100% - 28px); padding:34px 0 28px; grid-template-columns:1fr 1fr; gap:28px 20px; }.footer-brand { grid-column:1/-1; grid-row:auto; }.footer-brand img { width:135px; }.footer-social { grid-column:1/-1; }.footer-bottom { min-height:78px; padding:13px 14px; flex-direction:column; justify-content:center; gap:5px; text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mouse i { animation: none; }
  * { transition: none !important; }
}

/* Public news and guide pages */
.guide-page-shell {
  align-items: start;
}
.public-page-wide {
  width: min(1180px, 100%);
  margin: 0 auto;
}
.public-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}
.public-filter a {
  padding: 9px 15px;
  color: #4c829e;
  border: 1px solid #cce4ef;
  border-radius: 20px;
  background: #f7fcff;
}
.public-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.public-card-grid > a {
  overflow: hidden;
  color: #456d83;
  border: 1px solid #d7eaf3;
  border-radius: 14px;
  background: #fbfeff;
  box-shadow: 0 8px 20px rgba(52, 126, 160, .08);
}
.public-card-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.public-card-grid > a > div {
  padding: 16px;
}
.public-card-grid h2 {
  margin: 4px 0;
  color: #315e77;
  font-size: 18px;
}
.public-card-grid p {
  margin: 0;
  color: #7992a0;
  font-size: 12px;
}
.guide-cover {
  width: 100%;
  max-height: 420px;
  margin-top: 20px;
  object-fit: cover;
  border-radius: 14px;
}
.guide-article {
  padding: 24px 4px;
  color: #4f7183;
  line-height: 1.85;
}
@media (max-width: 760px) {
  .public-card-grid {
    grid-template-columns: 1fr;
  }
}
.public-article-cover {
  width: 100%;
  max-height: 460px;
  margin: 20px 0;
  object-fit: cover;
  border-radius: 14px;
}
.public-article-body {
  margin-top: 22px;
  color: #4f7183;
  line-height: 1.85;
}
.public-article-body img,
.guide-article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 18px auto;
  border-radius: 10px;
}
.download-page-shell {
  width: min(1080px, 100%);
}
.download-title {
  margin: 24px 0;
  text-align: center;
}
.download-title small {
  color: #54a0c6;
  font-weight: 700;
  letter-spacing: 2px;
}
.download-title h1 {
  margin: 5px 0;
}
.download-title p {
  margin: 0;
  color: #7893a1;
}
.download-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.download-platform-card {
  padding: 18px;
  border: 1px solid #d5e9f2;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #f1faff);
}
.download-platform-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}
.download-platform-heading > b {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(135deg, #72c0e2, #3e93bf);
  font-size: 22px;
}
.download-platform-heading h2,
.download-platform-heading p {
  margin: 0;
}
.download-platform-heading h2 {
  color: #315e77;
  font-size: 18px;
}
.download-platform-heading p {
  color: #7d97a4;
  font-size: 11px;
}
.download-links {
  margin-top: 15px;
  display: grid;
  gap: 9px;
}
.download-links > a {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d7eaf3;
  border-radius: 10px;
  background: #fff;
}
.download-links > a > div {
  min-width: 0;
  flex: 1;
}
.download-links strong,
.download-links span {
  display: block;
}
.download-links strong {
  color: #396a83;
}
.download-links span {
  color: #8199a6;
  font-size: 10px;
}
.download-links small {
  color: #d89321;
  font-size: 8px;
}
.download-links i {
  color: #4a9fc8;
  font-size: 20px;
  font-style: normal;
}
.download-empty {
  color: #92a5af;
  font-size: 11px;
}
@media (max-width: 760px) {
  .download-platform-grid {
    grid-template-columns: 1fr;
  }
}

/* Story-style inner pages */
.inner-page { margin:0; background:linear-gradient(180deg,#eaf8ff,#fff 45%,#eef9fd); }
.inner-hero { position:relative; height:430px; overflow:hidden; color:#fff; background:#248fcf; }
.inner-hero>video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.inner-hero-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,57,86,.28),rgba(16,45,64,.72)); }
.inner-nav { position:relative; z-index:2; width:min(1180px,calc(100% - 30px)); height:82px; margin:18px auto 0; padding:0 18px; display:flex; align-items:center; gap:35px; border:1px solid rgba(255,255,255,.72); border-radius:17px; background:rgba(245,252,255,.9); box-shadow:0 14px 34px rgba(8,45,70,.18); }
.inner-brand img { width:112px; max-height:72px; object-fit:contain; }.inner-nav>div { margin:auto; display:flex; gap:38px; }.inner-nav>div a { color:#3e657b; font-size:13px; }.inner-login { padding:12px 18px; color:#fff!important; border-radius:9px; background:#e5a32b; }
.inner-hero-copy { position:relative; z-index:2; width:min(1000px,calc(100% - 30px)); margin:82px auto 0; text-align:center; text-shadow:0 3px 18px rgba(6,31,48,.5); }.inner-hero-copy small { font:700 10px "Chakra Petch",sans-serif; letter-spacing:3px; }.inner-hero-copy h1 { margin:8px 0; font-size:44px; }.inner-hero-copy p { margin:0; font-size:14px; }
.inner-content { position:relative; z-index:3; width:min(1180px,calc(100% - 30px)); margin:-38px auto 65px; padding:34px; border:1px solid #d6eaf3; border-radius:22px; background:rgba(255,255,255,.98); box-shadow:0 22px 55px rgba(38,112,148,.16); }
.inner-footer { margin-top:0; }.inner-news-content .public-filter { justify-content:center; }.inner-news-content .public-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.inner-news-content .public-card-grid>a { transition:transform .25s,box-shadow .25s; }.inner-news-content .public-card-grid>a:hover { transform:translateY(-5px); box-shadow:0 16px 34px rgba(45,123,160,.16); }.inner-news-content .public-card-grid time { display:block; margin:10px 0; color:#91a6b0; font-size:10px; }.inner-news-content .public-card-grid span { color:#4596be; font-size:11px; font-weight:600; }
.inner-article { width:100%; box-shadow:none; }.general-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:25px; }.general-sidebar { padding:22px; border-radius:15px; background:linear-gradient(160deg,#eaf8ff,#fdfefe); }.general-sidebar>small,.general-main>small { color:#4b9fc9; font-size:9px; font-weight:700; letter-spacing:2px; }.general-sidebar h2 { margin:4px 0 18px; }.general-sidebar>a { padding:11px 8px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #dbeaf1; }.general-sidebar>a>b { width:37px; height:37px; display:grid; place-items:center; color:#fff; border-radius:9px; background:#55a8cf; }.general-sidebar strong,.general-sidebar span small { display:block; }.general-sidebar span small { color:#849ba7; font-size:9px; }.general-main>h1 { max-width:700px; color:#315e77; font-size:30px; }.general-main>p { color:#718b99; line-height:1.8; }.general-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:25px; }.general-guide-grid>a { padding:19px; border:1px solid #d7eaf3; border-radius:13px; background:#fafeff; }.general-guide-grid i { color:#4b9fc9; font-size:25px; font-style:normal; }.general-guide-grid h3 { margin:7px 0; }.general-guide-grid p { color:#7d95a2; font-size:11px; }.general-guide-grid span { color:#4697be; font-size:10px; }
.account-video-page { position:relative; isolation:isolate; background:#173f59!important; }.account-bg-video { position:fixed; z-index:-3; inset:0; width:100%; height:100%; object-fit:cover; }.account-video-shade { position:fixed; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(23,68,96,.48),rgba(240,250,255,.2),rgba(23,68,96,.48)); }.account-video-page .system-card { position:relative; z-index:2; }.empty-castle-icon { color:#74aeca; font-size:40px; }
@media(max-width:850px){.inner-hero{height:350px}.inner-nav>div{display:none}.inner-hero-copy{margin-top:75px}.inner-hero-copy h1{font-size:34px}.inner-content{padding:20px}.inner-news-content .public-card-grid{grid-template-columns:1fr}.general-layout{grid-template-columns:1fr}.general-guide-grid{grid-template-columns:1fr}}
.ticket-thread {
  display: grid;
  gap: 12px;
  margin: 22px 0;
}
.ticket-thread article {
  max-width: 78%;
  padding: 14px 16px;
  border: 1px solid #d8eaf2;
  border-radius: 14px;
  background: #f8fcfe;
}
.ticket-thread article.staff {
  margin-left: auto;
  background: #eaf7fd;
}
.ticket-thread p {
  margin: 7px 0;
  color: #55798b;
}
.ticket-thread small {
  color: #8ba1ad;
}
.cms-paragraph-gap{height:16px}.cms-text-line{min-height:1.6em}.cms-table-wrap{overflow-x:auto;margin:16px 0;border:1px solid #d3e7f0;border-radius:12px}.cms-table-wrap table{width:100%;border-collapse:collapse}.cms-table-wrap th,.cms-table-wrap td{padding:12px 14px;border-bottom:1px solid #e0edf3;text-align:left}.cms-table-wrap th{color:#fff;background:#53a5cc}
.cms-align-left{display:block;text-align:left}.cms-align-center{display:block;text-align:center}.cms-table-wrap th,.cms-table-wrap td{text-align:center}.cms-table-wrap th:first-child,.cms-table-wrap td:first-child{text-align:left;font-weight:700}.cms-table-wrap th{color:#39718d;background:#dff3fc}
.cms-text-line img,.cms-align-left img,.cms-align-center img{display:inline-block!important;width:auto;max-width:100%;height:auto;margin:0 5px!important;vertical-align:middle}.cms-align-left img{margin-left:0!important}.cms-align-center{text-align:center}