/* ============================================
   Varmundt's Biosphere Deep 1st Floor
   ============================================ */
:root {
  --bg: #05070d;
  --frame: #7d9be0;
  --frame-soft: rgba(125, 155, 224, .55);
  --text: #f2f4fa;
  --text-dim: #c9d0e3;
  --pink: #d9a0c8;
  --blue: #8ea8e8;
  --panel: #1c1f27;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }

body {
  font-family: "Anuphan", "Kanit", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ---------- Page & frame ---------- */
.page {
  max-width: 650px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(40, 52, 110, .35), transparent 70%),
    linear-gradient(#090c17, #04060b);
  overflow: hidden;
}

.frame {
  position: relative;
  margin: 0 10px 24px;
  padding: 10px 3px 50px;
}

/* Frame line is an overlay above the content, so the hero image
   can't cover it and the line runs unbroken around the whole page */
.frame__line {
  position: absolute;
  inset: 10px 0 0;
  z-index: 5;
  border: 3px solid var(--frame);
  border-radius: 40px;
  pointer-events: none;
}
/* thin inner line */
.frame__line::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--frame-soft);
  border-radius: 33px;
}
/* sparkle at each of the 4 corners */
.frame__line i {
  position: absolute;
  color: var(--frame);
  font-size: 18px;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 8px var(--frame);
}
.frame__line i::before { content: "✦"; }
.frame__line i:nth-child(1) { top: -12px;    left: -12px; }
.frame__line i:nth-child(2) { top: -12px;    right: -12px; }
.frame__line i:nth-child(3) { bottom: -12px; left: -12px; }
.frame__line i:nth-child(4) { bottom: -12px; right: -12px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* bleed out to the page edges (above and to the sides of the frame) */
  margin: -10px -13px 0;
  /* top padding scales with width so the logo always overlaps the character's waist */
  padding: 88% 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background:
    linear-gradient(to bottom, rgba(5, 7, 13, 0) 55%, var(--bg) 100%),
    url("../assets/images/bg.jpg") center top / cover no-repeat;
}

.hero__char {
  position: absolute;
  top: 17%;
  left: 50%;
  width: 82%;
  max-width: 622px;
  transform: translateX(-52%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.hero__title,
.hero__date { position: relative; z-index: 2; }

.hero__tagline {
  position: absolute;
  z-index: 1;
  top: 9%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(22px, 5.4vw, 34px);
  font-weight: 700;
  font-style: italic;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
  transform: rotate(-4deg);
}

.hero__title img { width: min(544px, 92%); margin: 0 auto; }
.hero__date { width: min(360px, 66%); margin-top: 14px; }

/* ---------- Shortcut button ---------- */
.shortcut { padding: 30px 30px 0; }

.btn-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 530px;
  aspect-ratio: 530 / 105;
  margin: 0 auto;
  padding: 0 40px;
  background: url("../assets/images/btn-main.png") center / 100% 100% no-repeat;
  font-size: clamp(16px, 3.7vw, 23px);
  font-weight: 600;
  color: var(--text-dim);
  text-align: center;
  transition: filter .2s, transform .2s;
}
.btn-main:hover { filter: brightness(1.25); transform: translateY(-2px); }

/* ---------- Back to main page (top-left of hero) ---------- */
.btn-home {
  position: absolute;
  z-index: 6;
  top: 34px;
  left: 34px;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(20, 28, 55, .75);
  border: 1px solid var(--frame-soft);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(80, 120, 230, .3);
  transition: background .2s, color .2s;
}
.btn-home:hover { background: var(--frame); color: #fff; }

/* ---------- Back to main page (bottom) ---------- */
.back-home { padding: 50px 30px 0; }
.btn-main--back { max-width: 340px; padding: 0 30px; }

/* ---------- Section ---------- */
.section {
  position: relative;
  padding: 70px 50px 20px;
  text-align: center;
}
/* glowing divider line */
.section::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 30px;
  background:
    radial-gradient(ellipse 30% 3px at 50% 50%, rgba(220, 230, 255, .95), transparent),
    radial-gradient(ellipse 50% 14px at 50% 50%, rgba(80, 120, 230, .45), transparent),
    linear-gradient(to right, transparent, rgba(80, 110, 200, .25), transparent) center / 100% 1px no-repeat;
}

.section__title {
  font-size: clamp(22px, 5vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 24px;
  background: linear-gradient(90deg, var(--pink) 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Info rows / NPC ---------- */
.info { list-style: none; margin-bottom: 26px; }
.info__row,
.npc {
  display: flex;
  align-items: center;
  gap: 0;
  text-align: left;
}
.info__row + .info__row { margin-top: 12px; }

.info__label {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 113px;
  height: 36px;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  text-align: center;
  white-space: nowrap;
  background: url("../assets/images/bg-topic.png") center / 100% 100% no-repeat;
  margin-right: 48px;
}
/* connector line + dot */
.info__label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 2px);
  width: 34px;
  height: 1px;
  background: var(--blue);
}
.info__label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 34px);
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff;
}

.info__value { font-size: 17px; font-weight: 600; }

.npc { margin-bottom: 30px; }
.npc__text { display: flex; flex-direction: column; line-height: 1.25; }
.npc__text strong { font-size: 23px; font-weight: 700; }
.npc__text span { font-size: 16px; font-weight: 500; }

/* ---------- Screenshot & text ---------- */
.shot { margin: 0 auto 22px; max-width: 530px; }

.desc {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 26px;
}

.sub-title {
  font-size: clamp(20px, 4.4vw, 26px);
  font-weight: 600;
  margin: 10px 0 12px;
  background: linear-gradient(90deg, var(--pink), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rules {
  list-style: none;
  counter-reset: rule;
  font-size: 15px;
  font-weight: 500;
}
.rules li { counter-increment: rule; }
.rules li::before { content: counter(rule) ". "; }

/* ---------- Image buttons ---------- */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 30px;
}
.btn-img { display: block; width: 220px; max-width: calc(50% - 15px); transition: filter .2s, transform .2s; }
.btn-img:hover { filter: brightness(1.2) drop-shadow(0 0 8px rgba(142, 168, 232, .6)); transform: translateY(-2px); }
.section .btn-img { width: 300px; max-width: 100%; }

/* ---------- Bottom panels ---------- */
.panel {
  margin: 50px 50px 0;
  background: linear-gradient(to bottom, rgba(32, 36, 46, .9), rgba(22, 25, 32, .9));
  padding-bottom: 30px;
}
.panel + .panel { margin-top: 40px; }

.panel__title {
  padding: 16px 20px;
  margin-bottom: 30px;
  font-size: clamp(17px, 3.6vw, 22px);
  font-weight: 600;
  text-align: center;
  color: var(--text-dim);
  background: linear-gradient(to bottom, #1e2a52, #161d36);
}

button.btn-img { padding: 0; border: 0; background: none; cursor: pointer; }

/* ---------- Popup ---------- */
html.no-scroll,
html.no-scroll body { overflow: hidden; }

.popup {
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: 90vh;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}
.popup::backdrop { background: rgba(2, 4, 10, .78); backdrop-filter: blur(2px); }
.popup[open] { animation: popup-in .25s ease-out; }
@keyframes popup-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }

.popup__box {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  padding: 26px 22px 30px;
  background: linear-gradient(to bottom, #1d2236, #141828);
  border: 3px solid var(--frame);
  border-radius: 30px;
  box-shadow: inset 0 0 0 5px #141828, inset 0 0 0 6px var(--frame-soft), 0 10px 40px rgba(0, 0, 0, .6);
}
/* sparkle at each of the 4 corners */
.popup { position: relative; }
.popup__box::before,
.popup__box::after,
.popup::before,
.popup::after {
  content: "✦";
  position: absolute;
  z-index: 1;
  color: var(--frame);
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 0 8px var(--frame);
  pointer-events: none;
}
.popup__box::before { top: -8px;    left: -8px; }
.popup__box::after  { top: -8px;    right: -8px; }
.popup::before      { bottom: -8px; left: -8px; }
.popup::after       { bottom: -8px; right: -8px; }

.popup__close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--frame-soft);
  border-radius: 50%;
  background: rgba(20, 28, 55, .8);
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.popup__close:hover { background: var(--frame); color: #fff; }

.popup__head { margin: 4px 0 18px; }
.popup__head img { width: min(297px, 70%); margin: 0 auto; }
/* short title images (Armor / ETC Item): show at natural size */
.popup__head--img img { width: auto; max-width: 70%; height: auto; }

.popup__body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--frame) transparent;
}

.reward-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: center;
}
.reward-table th {
  position: sticky;
  padding: 8px 10px;
  font-weight: 600;
  color: #fff;
  background: #3e5291;
  border: 1px solid #6a7fbd;
}
.reward-table thead tr:first-child th { top: 0; background: #4d64a6; }
.reward-table thead tr:last-child th { top: 39px; width: 50%; }
.reward-table td {
  padding: 7px 10px;
  color: #262a36;
  font-weight: 500;
  background: #e4e6ed;
  border: 1px solid #fff;
}
.reward-table tbody tr:hover td { background: #d3d9ec; }

/* Enchant popup: several tables stacked, so the headers don't stick */
.reward-table--enchant + .reward-table--enchant { margin-top: 24px; }
.reward-table--enchant th { position: static; }
.reward-table--enchant thead tr:last-child th { width: auto; }
.reward-table--enchant thead tr:last-child th:nth-child(1) { width: 26%; }
.reward-table--enchant thead tr:last-child th:nth-child(2) { width: 30%; }
.reward-table--enchant td { padding: 10px; line-height: 1.45; }
.reward-table__mat { text-align: left; }

/* Enchant Option popup */
.opt-table + .opt-table { margin-top: 24px; }
.opt-table th { position: static; }
.opt-table thead tr:last-child th { width: auto; }
.opt-table thead tr:last-child th:first-child { width: 30%; }
.opt-table td { padding: 8px 10px; line-height: 1.45; }
.opt-table td:first-child { font-weight: 600; }
.opt-table .opt-table__slot {
  padding: 6px 10px;
  color: #2c3b6b;
  background: #b9c6ea;
  border-color: #fff;
}
.opt-table__eff { text-align: left; }

/* ---------- Popup : item (armor) ---------- */
.popup--wide { max-width: 620px; }

.popup__head--text {
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  padding: 0 40px;
  background: linear-gradient(90deg, var(--pink), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.item-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
  color: #3a3f4d;
  background: #dedee6;
}
.item-table + .item-table { margin-top: 24px; }

.item-table th {
  padding: 8px 10px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: #4c6596;
  text-align: center;
}
.item-table thead th:first-child { width: 27%; border-right: 1px solid #6a80ad; }

.item-table__item {
  vertical-align: middle;
  text-align: center;
  padding: 12px 6px;
  border-right: 1px solid #c4c6d2;
}
/* multiply blends the images' white background into the cell colour
   (isolation keeps the blend inside the table, never the page behind) */
.item-table { isolation: isolate; }
.item-table__item img { width: 90px; margin: 0 auto 4px; mix-blend-mode: multiply; }
.item-table__item span {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: #3a3f4d;
}

.item-table__desc {
  padding: 18px 14px 18px 20px;
  font-weight: 600;
  line-height: 1.45;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.item-table__desc p + p { margin-top: 14px; }

/* ---------- Popup : ETC item list ---------- */
.item-table--etc .item-table__item,
.item-table--etc .item-table__desc { border-top: 2px solid #fff; }
.item-table--etc .item-table__item { border-right: 2px solid #fff; padding: 14px 6px; }
.item-table--etc .item-table__item img {
  width: auto;
  max-width: 64px;
  max-height: 64px;
  margin-bottom: 6px;
}
.item-table--etc .item-table__item span { font-size: 15px; }
.item-table--etc .item-table__desc { vertical-align: middle; padding: 14px 14px 14px 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .shortcut { padding: 24px 12px 0; }
  .btn-main { padding: 0 24px; font-size: 14px; line-height: 1.35; }
  .back-home { padding: 40px 16px 0; }
  .btn-home { top: 26px; left: 26px; height: 28px; padding: 0 12px; font-size: 12px; }
  .btn-main--back { max-width: 260px; font-size: 16px; }
  .section { padding: 60px 18px 10px; }
  .panel { margin-left: 16px; margin-right: 16px; }
  .info__row, .npc { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .info__label { margin-right: 0; }
  .info__label::before, .info__label::after { display: none; }
  .desc br { display: none; }
  .btn-group { gap: 14px; }
  .popup__box { padding: 22px 12px 24px; }
  .item-table { font-size: 12px; }
  .item-table th { font-size: 14px; }
  .item-table__item img { width: 64px; }
  .item-table__item span { font-size: 13px; }
  .item-table__desc { padding: 14px 10px; }
  .item-table--etc .item-table__item img { max-width: 48px; max-height: 48px; }
  .item-table--etc .item-table__item span { font-size: 12px; }
  .item-table--etc .item-table__desc { padding: 12px 10px; }
}

/* extra-wide popup for long option text (Enchant Option) */
.popup--xwide { max-width: 760px; }

/* อัปเกรด Enchant popup: Slot column spans its levels (rowspan) */
.upg-table + .upg-table { margin-top: 24px; }
.upg-table th { position: static; }
.upg-table thead tr:last-child th { width: auto; }
.upg-table thead tr:last-child th:nth-child(1) { width: 11%; }
.upg-table thead tr:last-child th:nth-child(2),
.upg-table thead tr:last-child th:nth-child(3) { width: 26%; }
.upg-table td { padding: 8px; line-height: 1.45; }
.upg-table .upg-table__slot { font-size: 18px; font-weight: 700; background: #d3d9ec; }
.upg-table tbody tr:hover td.upg-table__slot { background: #d3d9ec; }
@media (max-width: 560px) {
  .upg-table { font-size: 12px; }
  .upg-table td { padding: 6px 4px; }
  .upg-table .upg-table__slot { font-size: 15px; }
}

/* ============================================
   TOPBAR — ported from the landingpage project
   (self-contained, no Bootstrap; desktop ≥992px, mobile = burger menu)
   ============================================ */
.mainTopbarLayout {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  font-family: "Noto Sans Thai", sans-serif;
  line-height: 1.5;
}

.topbarBanner {
  position: relative;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000 100%);
  overflow: hidden;
}
.topbarBanner img {
  width: 1200px;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.navbar-ggt {
  position: relative;
  width: 100%;
  height: 48px;
  font-size: 14px;
  background: #f8f9fa;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
}
.navbar-ggt__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 12px;
}
.navbar-ggt__brand { display: block; margin-right: 16px; }
.navbar-ggt__brand img { height: 30px; width: auto; }

.navbar-ggt__menu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-ggt__nav { display: flex; list-style: none; margin: 0; padding: 0; }
.navbar-ggt .nav-link {
  display: block;
  padding: 8px;
  font-weight: 500;
  color: #2b2b2b;
  text-decoration: none;
  transition: color .25s ease;
}
.navbar-ggt .nav-link:hover,
.navbar-ggt .nav-item.active .nav-link { color: #d32f2f; }

/* Login / Register pill buttons */
.navbar-ggt .login-box { display: flex; align-items: center; gap: 8px; }
.navbar-ggt .login-box a {
  display: inline-flex;
  align-items: center;
  padding: 4px 16px;
  border-radius: 999px;
  border: 1.5px solid #d32f2f;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: all .2s ease;
}
.navbar-ggt .login-box__login { color: #d32f2f; background: transparent; }
.navbar-ggt .login-box__login:hover { color: #fff; background: #d32f2f; }
.navbar-ggt .login-box__register { color: #fff; background: #d32f2f; }
.navbar-ggt .login-box__register:hover { background: #b71c1c; border-color: #b71c1c; }

/* burger button (mobile only) */
.navbar-ggt__toggler {
  display: none;
  width: 44px;
  height: 34px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.navbar-ggt__toggler-icon {
  display: block;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33,37,41,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% no-repeat;
}

@media (max-width: 991.98px) {
  .navbar-ggt__toggler { display: block; }
  .navbar-ggt__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 8px 12px 16px;
    background: #f8f9fa;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .18);
  }
  .navbar-ggt__menu.is-open { display: flex; }
  .navbar-ggt__nav { flex-direction: column; text-align: center; width: 100%; }
  .navbar-ggt .login-box { padding-top: 8px; }
}
@media (max-width: 768px) {
  .topbarBanner { height: 60px; }
}
@media (max-width: 505px) {
  .topbarBanner { height: 42px; }
  .topbarBanner img { width: 700px; }
}

/* ============================================
   FOOTER — ported from the landingpage project (no Bootstrap)
   ============================================ */
.footerMainLayout {
  position: relative;
  width: 100%;
  min-height: 120px;
  padding: 24px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-family: "Noto Sans Thai", sans-serif;
  background: linear-gradient(180deg, #23262b 0%, #17181c 100%);
  color: #e9e9e9;
  border-top: 2px solid #c8912a;
}
.footerLogo { width: 150px; flex: 0 0 auto; }
.footerLogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}
.footerInfo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.footerLinks { display: flex; align-items: center; gap: 4px; }
.footerLinks__sep { padding: 0 8px; color: #fff; }
.footerMainLayout a { color: #fff; transition: color .25s ease; }
.footerMainLayout a:hover,
.footerMainLayout a:hover small { color: #f0c366; }
.footerMainLayout small { font-size: 14px; color: #b6b6b6; line-height: 1.6; }
.footerMainLayout a small { color: inherit; }

@media (max-width: 768px) {
  .footerMainLayout { flex-direction: column; padding: 20px; }
  .footerInfo { align-items: center; text-align: center; }
  .footerLinks { margin-bottom: 8px; }
}
@media (max-width: 575.98px) {
  .footerLinks { flex-direction: column; gap: 0; }
  .footerLinks__sep { display: none; }
}
@media (max-width: 450px) {
  .footerMainLayout { min-height: 180px; }
}