/* ═══════════════════════════════════════════
   MMO Page Shell — ธีมเดียวกับหน้าหลัก
   Header โปร่ง + Hero video + Content dark
═══════════════════════════════════════════ */

:root {
  --mmo-header-h: 72px;
  --mmo-hero-gap: 96px;
  /* เมนูพันธมิตร — โทนเดียวกับ header / hero */
  --nav-drop-bg: rgba(18, 0, 3, 0.94);
  --nav-drop-border: rgba(184, 115, 51, 0.26);
  --nav-drop-accent: rgba(212, 148, 74, 0.75);
  --nav-drop-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);
  --nav-drop-divider: rgba(184, 115, 51, 0.22);
  --nav-drop-hover: rgba(255, 255, 255, 0.06);
  --nav-drop-active: rgba(184, 115, 51, 0.16);
  --nav-drop-label: rgba(255, 240, 210, 0.9);
  --nav-drop-label-hover: #fff0d2;
  --nav-drop-sub: rgba(255, 240, 210, 0.48);
  --nav-drop-sub-hover: rgba(255, 240, 210, 0.7);
  --nav-drop-sep: rgba(212, 148, 74, 0.42);
}
@media (max-width: 640px) {
  :root {
    --mmo-header-h: 60px;
    --mmo-hero-gap: 80px;
  }
}

/* ── Header: fixed transparent over hero ── */
.header {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: background .35s, backdrop-filter .35s, box-shadow .35s, border-color .35s;
}
.header.scrolled {
  background: rgba(18,0,3,.82) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 2px 28px rgba(0,0,0,.4) !important;
  border-bottom: 1px solid rgba(184,115,51,.2) !important;
}
.header .logo-text-main { color: #FFF0D2 !important; transition: color .35s; }
.header .logo-text-sub  { color: var(--copper-light) !important; }
.header .nav-link       { color: rgba(255,240,210,.75) !important; }
.header .nav-link:hover,
.header .nav-link.active { color: #FFF0D2 !important; border-bottom-color: var(--copper-light) !important; }
.header .nav-cta {
  color: #3D0000 !important;
  background: linear-gradient(135deg, #C8892E, #F0D080) !important;
}
.header .nav-cta i { color: #3D0000 !important; opacity: 1; }
.header .nav-cta:hover {
  color: #3D0000 !important;
  background: linear-gradient(135deg, #D4944A, #FFE4A0) !important;
}
.header .nav-cta.active {
  color: #FFF8E0 !important;
  background: linear-gradient(135deg, #A0661C, #C8892E) !important;
}
.header .nav-cta.active i { color: #FFF8E0 !important; }
.header .header-right a.ah-login-btn {
  color: rgba(255, 240, 210, .82) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.header .header-right a.ah-login-btn:hover {
  color: #FFF0D2 !important;
  background: rgba(255, 255, 255, .08) !important;
}
.header .header-right a.ah-login-btn i {
  color: inherit !important;
  opacity: .85;
}
.header .hamburger {
  color: rgba(255, 240, 210, .88) !important;
  border-color: rgba(184, 115, 51, .35) !important;
  background: rgba(255, 255, 255, .06) !important;
}
.header .hamburger:hover {
  color: #FFF0D2 !important;
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(212, 160, 64, .5) !important;
}
.header.scrolled .hamburger {
  color: #6A4020 !important;
  background: transparent !important;
  border-color: rgba(184, 115, 51, .2) !important;
}
.header.scrolled .hamburger:hover {
  color: var(--copper) !important;
  background: rgba(184, 115, 51, .1) !important;
}
.header.scrolled .header-right a.ah-login-btn {
  color: rgba(255, 240, 210, .88) !important;
}
.header .hdr-btn        { color: rgba(255,240,210,.8) !important; }
.header .coin-pill      { border-color: rgba(184,115,51,.4) !important; background: rgba(255,255,255,.08) !important; }
.header .coin-num       { color: #FFF0D2 !important; }
.header a.coin-pill     { text-decoration: none !important; color: inherit !important; }
.header .ah-desk-profile-btn {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(212, 148, 74, .38) !important;
}
.header .ah-desk-profile-btn:hover,
.header .ah-desk-profile-btn.is-open {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(212, 148, 74, .55) !important;
}
.header .ah-desk-profile-coin { background: rgba(212, 148, 74, .14) !important; }
.header .ah-desk-profile-coin .coin-num { color: #FFF0D2 !important; }
.header .ah-desk-profile-name { color: rgba(255, 248, 230, .92) !important; }
.header .ah-desk-profile-caret { color: rgba(255, 240, 210, .5) !important; }
.header.scrolled .ah-desk-profile-btn {
  background: rgba(255, 255, 255, .92) !important;
}
.header.scrolled .ah-desk-profile-name { color: #3D0000 !important; }
.header .ah-admin-pill { border-color: rgba(212,148,74,.42) !important; }
.header .ah-admin-pill-badge {
  background: rgba(212,148,74,.14) !important;
  border-right-color: rgba(212,148,74,.22) !important;
  color: #F0D080 !important;
}
.header .ah-admin-pill-label { color: rgba(255,248,230,.92) !important; }
.header .ah-admin-pill:hover {
  border-color: rgba(240,208,128,.55) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.22) !important;
}
.header .ah-logout-luxe   { color: rgba(255,240,210,.4) !important; }
.header .ah-logout-luxe:hover { color: rgba(255,180,180,.85) !important; }

/* ธงภาษา — วงกลมล้วน ไม่มีกรอบ */
.header #headerLangMount,
.header #adminLangMount,
.header #headerLangMount .gt_switcher,
.header #adminLangMount .gt_switcher,
.header #headerLangMount .gt_selected,
.header #adminLangMount .gt_selected,
.header #headerLangMount .gt_selected a,
.header #adminLangMount .gt_selected a {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  pointer-events: auto !important;
}
.header #headerLangMount .gt_selected a:hover,
.header #adminLangMount .gt_selected a:hover {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Nav dropdown — ปุ่มบน header (panel ทึบ luxe ใน header.css) */
.header .nav-dropdown-toggle {
  color: rgba(255, 240, 210, 0.88) !important;
}
.header .nav-dropdown-toggle:hover,
.header .nav-dropdown.open .nav-dropdown-toggle,
.header .nav-dropdown.active .nav-dropdown-toggle {
  color: #ffe4a0 !important;
  text-shadow: 0 0 20px rgba(240, 208, 128, 0.35);
}
.header.scrolled .nav-dropdown-toggle {
  color: rgba(255, 240, 210, 0.88) !important;
  text-shadow: none !important;
}
.header.scrolled .nav-dropdown-toggle:hover,
.header.scrolled .nav-dropdown.open .nav-dropdown-toggle,
.header.scrolled .nav-dropdown.active .nav-dropdown-toggle {
  color: #ffe4a0 !important;
}
.header.scrolled .nav-dropdown-panel {
  --nav-drop-bg: rgba(18, 0, 3, 0.97);
  --nav-drop-border: rgba(184, 115, 51, 0.3);
}

/* Mobile header — login / profile บน hero โปร่ง */
.header .ah-mob-profile-btn {
  background: rgba(255, 255, 255, .14) !important;
  border-color: rgba(212, 160, 64, .4) !important;
}
.header .ah-mob-profile-name { color: #FFF0D2 !important; }
.header .ah-mob-profile-caret { color: rgba(255, 240, 210, .55) !important; }
.header .ah-mob-profile-btn--admin {
  background: linear-gradient(135deg, rgba(200, 137, 46, .25), rgba(240, 208, 128, .12)) !important;
}
.header.scrolled .ah-mob-profile-btn {
  background: rgba(255, 255, 255, .92) !important;
}
.header.scrolled .ah-mob-profile-name { color: #3D0000 !important; }
.header.scrolled .ah-mob-profile-caret { color: rgba(106, 64, 32, .55) !important; }

/* ── Subpage Hero (full-width video) ── */
.page-hero,
.reg-hero,
.news-hero,
.rules-hero {
  position: relative;
  width: 100%;
  min-height: 320px;
  margin-top: calc(-1 * var(--mmo-header-h));
  overflow: hidden;
  background-color: #0E0002;
  background-image: var(--bg-poster, none);
  background-size: cover;
  background-position: center;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.page-hero .hero-video,
.reg-hero .hero-video,
.news-hero .hero-video,
.rules-hero .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.mmo-bg-video {
  opacity: 0;
  transition: opacity 0.35s ease-out;
}
.mmo-bg-video.is-ready {
  opacity: 1;
}
.page-hero-overlay,
.reg-hero-overlay,
.news-hero-overlay,
.rules-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,0,2,.5) 0%,
    rgba(10,0,2,.2) 40%,
    rgba(10,0,2,.35) 70%,
    rgba(15,0,3,.85) 100%
  );
  pointer-events: none;
}
.page-hero-content,
.reg-hero-content,
.news-hero-content,
.rules-hero-content {
  position: relative; z-index: 5;
  padding:
    calc(var(--mmo-header-h) + var(--mmo-hero-gap) + env(safe-area-inset-top, 0px))
    24px
    56px;
  text-align: center;
}
.page-hero-eyebrow,
.reg-hero-eyebrow,
.news-hero-eyebrow,
.rules-hero-eyebrow {
  font-family: 'Prompt', sans-serif;
  font-size: clamp(10px, 1.2vw, 12px);
  letter-spacing: 3.5px; font-weight: 500;
  color: rgba(212,148,74,.9);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.page-hero-title,
.reg-hero-event,
.news-hero-title,
.rules-hero-title {
  font-family: 'Prompt', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  color: #FFF0D2;
  line-height: 1.25;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
  letter-spacing: 0.5px;
}
.page-hero-sub,
.reg-hero-sub,
.news-hero-sub,
.rules-hero-sub {
  font-family: 'Prompt', sans-serif;
  font-size: clamp(13px, 1.6vw, 15px);
  color: rgba(255,240,210,.7);
  margin-top: 10px;
}

/* hide old decorative flowers on subpages */
.page-hero-flower, .page-hero-glow,
.reg-hero-flower, .reg-hero-glow,
.news-hero-flower, .news-hero-glow,
.rules-hero-flower, .rules-hero-glow { display: none !important; }

/* ── Dark content section (like news-section on index) ── */
.page-body-section {
  position: relative;
  overflow: hidden;
  padding: 48px 0 56px;
  background-color: #020412;
  background-image: var(--bg-poster, none);
  background-size: cover;
  background-position: center;
}
.page-body-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}
.page-body-overlay {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(2,4,18,.78) 0%,
    rgba(2,4,18,.68) 55%,
    rgba(2,4,18,.82) 100%
  );
}
.page-body-inner {
  position: relative; z-index: 1;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
}
.page { max-width: none; margin: 0; padding: 0; }

/* ── Shared UI on dark bg ── */
.page-body-section .filter-chip {
  border: 1.5px solid rgba(212,160,64,.35);
  background: rgba(255,255,255,.08);
  color: rgba(255,240,210,.85);
  backdrop-filter: blur(6px);
}
.page-body-section .filter-chip:hover {
  border-color: var(--copper-light);
  color: #FFF0D2;
  background: rgba(212,160,64,.15);
}
.page-body-section .filter-chip.active {
  background: linear-gradient(135deg, #C8892E, #A0661C);
  color: #fff;
  border-color: transparent;
}

.page-body-section .cand-stat,
.page-body-section .stat-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(212,160,64,.22);
  backdrop-filter: blur(8px);
}
.page-body-section .cand-stat-num,
.page-body-section .stat-num { color: #FFE4A0; }
.page-body-section .cand-stat-label,
.page-body-section .stat-label { color: rgba(255,240,210,.55); }

.page-body-section .cand-card,
.page-body-section .news-card-item,
.page-body-section .rank-row,
.page-body-section .province-card,
.page-body-section .rules-card,
.page-body-section .main-card,
.page-body-section .coming-soon {
  background: rgba(255,255,255,.07);
  border-color: rgba(212,160,64,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.page-body-section .cand-card:hover,
.page-body-section .province-card:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(212,160,64,.45);
}

.page-body-section .cand-name,
.page-body-section .news-card-title,
.page-body-section h2,
.page-body-section h3 { color: rgba(255,255,255,.92); }
.page-body-section .cand-province,
.page-body-section .cand-num,
.page-body-section .cand-vote-row,
.page-body-section p,
.page-body-section .news-card-date { color: rgba(255,240,210,.55); }
.page-body-section .coming-soon { border-style: solid; border-color: rgba(212,160,64,.25); }
.page-body-section .coming-soon h3 { color: rgba(255,255,255,.9); }
.page-body-section .coming-soon p { color: rgba(255,240,210,.55); }
.page-body-section .coming-soon i { color: rgba(212,160,64,.4); }

.page-body-section .sec-title,
.page-body-section .section-title {
  color: rgba(255,255,255,.92);
  font-family: 'Prompt', sans-serif;
}
.page-body-section .sec-title i { color: var(--copper-light); }

.page-body-section .vote-status {
  background: rgba(255,255,255,.06);
  border-color: rgba(212,160,64,.28);
  backdrop-filter: blur(8px);
}

.page-body-section .reg-intro,
.page-body-section .reg-intro-box {
  background: rgba(255,255,255,.07);
  border-color: rgba(212,160,64,.22);
  color: rgba(255,240,210,.8);
}
.page-body-section .reg-intro h2,
.page-body-section .reg-intro-box h2 { color: #FFE4A0; }

.page-body-section .search-box input,
.page-body-section .form-input,
.page-body-section .form-select,
.page-body-section .form-textarea {
  background: rgba(255,255,255,.08);
  border-color: rgba(212,160,64,.3);
  color: rgba(255,255,255,.9);
}
.page-body-section .search-box input::placeholder { color: rgba(255,240,210,.35); }

.page-body-section .no-result,
.page-body-section .cand-loading p { color: rgba(255,240,210,.5); }

/* Ranking */
.page-body-section .podium-card,
.page-body-section .rank-item {
  background: rgba(255,255,255,.08);
  border-color: rgba(212,160,64,.25);
  backdrop-filter: blur(8px);
}
.page-body-section .podium-name,
.page-body-section .rank-name { color: rgba(255,255,255,.92); }
.page-body-section .podium-province,
.page-body-section .rank-province,
.page-body-section .podium-score-label,
.page-body-section .rank-score-label { color: rgba(255,240,210,.55); }
.page-body-section .rank-section-title { color: rgba(255,255,255,.9); }
.page-body-section .rank-bar-bg { background: rgba(255,255,255,.12); }

/* News */
.page-body-section .news-card {
  background: rgba(255,255,255,.08);
  border-color: rgba(212,160,64,.25);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.page-body-section .news-card:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(212,160,64,.5);
}
.page-body-section .news-title { color: rgba(255,255,255,.92); }
.page-body-section .news-date { color: rgba(212,160,64,.75); }
.page-body-section .btn-more {
  background: rgba(212,160,64,.1);
  border-color: rgba(212,160,64,.3);
  color: rgba(212,160,64,.9);
}
.page-body-section .news-section-title { color: rgba(255,255,255,.9); }
.page-body-section .news-section-title::after { background: rgba(212,160,64,.25); }
.page-body-section .featured-card {
  background: rgba(255,255,255,.08);
  border-color: rgba(212,160,64,.25);
}

/* Rules */
.page-body-section .rules-section-title { color: rgba(255,255,255,.92); border-bottom-color: rgba(212,160,64,.25); }
.page-body-section .rule-card,
.page-body-section .qual-card {
  background: rgba(255,255,255,.08);
  border-color: rgba(212,160,64,.25);
  backdrop-filter: blur(8px);
}
.page-body-section .rule-text,
.page-body-section .qual-val { color: rgba(255,240,210,.75); }
.page-body-section .rule-text strong,
.page-body-section .qual-label { color: rgba(255,255,255,.92); }
.page-body-section .timeline-section {
  background: rgba(255,255,255,.06);
  border-color: rgba(212,160,64,.22);
}
.page-body-section .timeline-title { color: rgba(255,255,255,.92); }
.page-body-section .timeline-subtitle,
.page-body-section .timeline-tagline { color: rgba(255,240,210,.6); }
.page-body-section .tl-item { border-color: rgba(212,160,64,.15); }
.page-body-section .tl-title { color: rgba(255,255,255,.9); }
.page-body-section .tl-desc { color: rgba(255,240,210,.6); }
.page-body-section .tl-reg-box {
  background: rgba(255,255,255,.08);
  border-color: rgba(212,160,64,.3);
}

/* Register */
.page-body-section .main-card,
.page-body-section .reg-intro {
  background: rgba(255,255,255,.07);
  border-color: rgba(212,160,64,.22);
  backdrop-filter: blur(8px);
}
.page-body-section .reg-intro h2,
.page-body-section .main-card h2 { color: rgba(255,255,255,.92); }
.page-body-section .reg-intro-content h2 {
  font-family: 'Prompt', sans-serif;
  color: #FFF0D2;
}
.page-body-section .reg-intro-content h2 i { color: #F0D060; }
.page-body-section .reg-intro-content > p { color: rgba(255,255,255,.85); }
.page-body-section .intro-province-name { color: #FFE4A0; }
.page-body-section .province-card {
  background: rgba(255,255,255,.08);
  border-color: rgba(212,160,64,.22);
}
.page-body-section .province-card:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(212,160,64,.45);
}
.page-body-section .province-name { color: rgba(255,255,255,.9); }
.page-body-section .province-region { color: rgba(255,240,210,.5); }

/* คุณสมบัติผู้สมัคร — อ่านง่ายบนพื้นมืด */
.page-body-section .reg-intro-quals-label {
  display: block;
  font-family: 'Prompt', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: .4px;
  margin-bottom: 10px;
}
.page-body-section .quals-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.page-body-section .qual-chip {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  font-family: 'Prompt', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  color: #FFFFFF;
  background: rgba(212,160,64,.18);
  border: 1px solid rgba(212,160,64,.42);
  border-radius: 10px;
  padding: 12px 14px;
}
.page-body-section .qual-chip i {
  color: #F0D060;
  font-size: 13px;
  margin-top: 3px;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .page-body-section .quals-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .page-body-section .quals-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .page-body-section .qual-chip {
    font-size: 13px;
    padding: 11px 14px;
  }
  .page-body-section .reg-intro-quals-label { font-size: 13px; }
}

.page-body-section .region-chip {
  background: rgba(255,255,255,.08);
  border-color: rgba(212,160,64,.25);
  color: rgba(255,240,210,.8);
}
.page-body-section .region-chip.active {
  background: linear-gradient(135deg, #C8892E, #A0661C);
  color: #fff;
}

/* Register apply form */
.page-body-section .form-section,
.page-body-section .form-card,
.page-body-section .step-panel {
  background: rgba(255,255,255,.07);
  border-color: rgba(212,160,64,.22);
}
.page-body-section .form-label { color: rgba(255,240,210,.75); }
.page-body-section .form-hint { color: rgba(255,240,210,.45); }

.page-body-section .card-head h2 { color: #FFF0D2; }
.page-body-section .card-head h2 i { color: #F0D060; }
.page-body-section .card-head p { color: #FFFFFF; }
.page-body-section .card-head p strong { color: #FFE4A0; }

.page-body-section .page-hero-title,
.page-body-section .reg-hero-title { color: #FFF0D2; }

/* Hero register title mapping */
.page-hero .reg-hero-content,
.page-hero .reg-hero-event,
.page-hero .reg-hero-title,
.page-hero .reg-hero-deadline,
.page-hero .reg-hero-eyebrow {
  /* typography overrides below */
}
.page-hero .reg-hero-event {
  font-family: 'Prompt', sans-serif;
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 600;
  color: #FFF0D2;
  line-height: 1.25;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
  white-space: nowrap;
  letter-spacing: .01em;
}
@media (max-width: 640px) {
  .page-hero .reg-hero-event {
    font-size: clamp(11px, 2.65vw, 24px);
    letter-spacing: 0;
  }
}
.page-hero .reg-hero-title {
  font-family: 'Prompt', sans-serif;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  color: rgba(255,240,210,.75);
  margin-top: 10px;
}
.page-hero .reg-hero-title span { display: block; font-size: 0.9em; margin-top: 6px; }
.page-hero .reg-hero-deadline {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 18px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(201,152,26,.35);
  border-radius: 8px;
  font-family: 'Prompt', sans-serif;
  font-size: 14px;
  color: rgba(255,240,210,.65);
}
.page-hero .reg-hero-deadline strong { color: #FFE4A0; }

@media (max-width: 960px) {
  .page-hero-content,
  .reg-hero-content,
  .news-hero-content,
  .rules-hero-content {
    padding:
      calc(var(--mmo-header-h) + 80px + env(safe-area-inset-top, 0px))
      20px
      48px;
  }
}

@media (max-width: 640px) {
  .page-hero-content,
  .reg-hero-content,
  .news-hero-content,
  .rules-hero-content {
    padding:
      calc(var(--mmo-header-h) + 72px + env(safe-area-inset-top, 0px))
      16px
      44px;
  }
  .page-body-section { padding: 32px 0 40px; }
  .page-body-inner { padding: 0 16px; }
}