/* =====================================================================================
   Aries World Map — Consolidated CSS (cleaned & de-duplicated)
   ===================================================================================== */

/* ---------- 0) Variables (central knobs) ---------- */
:root{
  /* Palette */
  --panel:#15121f;
  --tab:#2b2737;
  --tab-active:#462f7e;
  --muted:#9aa0af;

  /* Sidebar */
  --sidebar-w: 380px;
  --gap: 12px;
  --card-h: 128px;

  /* Sidebar “edge” toggle */
  --sb-gap:   12px;
  --sb-top:   96px;
  --sb-width: 380px;

  --edge-gap: 10px;
  --edge-top: 70px;
  --edge-w: 58px;
  --edge-h: 130px;
  --edge-radius: 14px;
  --edge-bg: rgba(20,20,40,.86);
  --edge-border: rgba(255,255,255,.10);
  --edge-glow: rgba(139,92,246,.45);
  --edge-open-shift: 19px;

  /* Monster card offsets */
  --sprite-shift: 20px;
  --name-shift:   10px;
  --level-shift:  12px;
}

/* ---------- 1) Global base & access ---------- */
*{ box-sizing:border-box }
html, body { user-select: none; -webkit-user-select:none; -ms-user-select:none; -moz-user-select:none; }
input, textarea, [contenteditable="true"] { user-select:text; caret-color:auto; }
body, button, input, select, textarea { font-family:'Kanit', system-ui, sans-serif !important; }

body{
  background:#0f0c1d;
  color:#eae6ff;
}
a, a:visited{ color:#a78bfa }
.header{ padding:16px 0; text-align:center }
.small{ font-size:.95em; color:#ccc; margin-top:8px }

/* ---------- 2) Map frame (world) ---------- */
.map-wrapper{ display:flex; justify-content:center; padding:16px 0 }
.map-outer{
  display:inline-block;
  padding:8px;
  width:min(100vw - 24px, 1200px);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.map-container{ position:relative }
.map-container>img{
  display:block; max-width:100%; height:auto;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  -webkit-user-drag:none; user-drag:none;
}

/* ---------- 3) Modal (map details) ---------- */
.modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(0,0,0,.6);
}
.modal.open{ display:flex }
.panel{ position:relative }
.modal .panel{
  width:min(1024px, 95vw);
  max-height:90vh; overflow-y:auto; overflow-x:hidden;
  background:#120d22;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:20px 18px;
}
.btn-close-circle{
  position:absolute; z-index:100; top:12px; right:12px;
  width:40px; height:40px; border-radius:50%;
  background:#d63031; display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; outline:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-close-circle svg{ width:20px; height:20px; stroke:#fff }
.btn-close-circle:hover{ transform:scale(1.15); box-shadow:0 4px 12px rgba(0,0,0,.3) }
.btn-close-circle:active{ transform:scale(.95) }
body.modal-open{ overflow:hidden }

/* ---------- 4) Hotspots (base + world-only hover) ---------- */
.map-hotspot{
  position:absolute; z-index:1;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 0 0 1px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.35);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  backface-visibility:hidden; outline:none;
  transform-origin:center;
  transition:transform .12s ease, box-shadow .15s ease, outline-color .15s ease;
}
.map-hotspot:hover{
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 0 1px rgba(255,213,79,.95);
}
.map-hotspot:focus{ outline:none }
.map-hotspot.selected,
.map-hotspot:focus-visible{
  z-index:10;
  outline:2px solid #FFD34F;
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 0 1px rgba(255,213,79,.60);
}
/* world-minimap hover fx only */
.minimap .map-hotspot:hover,
.minimap .map-hotspot:focus-visible{
  transform:scale(1.06); z-index:20;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    0 0 0 2px rgba(255,255,255,.95),
    0 6px 18px rgba(0,0,0,.45);
  animation:shine 1.6s ease-in-out infinite;
}
/* disable background effects when modal is open */
body.modal-open .map-container .map-hotspot{
  pointer-events:none !important;
  transform:none !important;
  animation:none !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.35) !important;
}
/* selection “shine” */
.map-hotspot.selected{
  z-index:21; outline:2px solid rgba(255,255,255,.9);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    0 0 0 2px rgba(255,255,255,.85),
    0 6px 18px rgba(0,0,0,.45);
  animation:shine 1.6s ease-in-out infinite;
}
@keyframes shine{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(0,0,0,.35),
      0 0 0 2px rgba(255,255,255,.70),
      0 0 16px rgba(255,255,255,.25);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(0,0,0,.35),
      0 0 0 2px rgba(255,255,255,1),
      0 0 28px rgba(255,255,255,.55),
      0 0 46px rgba(255,255,255,.35);
  }
}

/* Tooltip (generic) */
.map-hotspot[data-name]::after{
  content:attr(data-name);
  position:absolute; left:50%; top:-12px; transform:translate(-50%,-100%);
  background:rgba(30,27,22,.75); color:#fff;
  border:2px solid rgba(255,255,255,.35); border-radius:20px;
  padding:12px 26px; font-size:13px; font-weight:700; line-height:1; white-space:nowrap;
  pointer-events:none; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0; transition:opacity .12s ease, transform .12s ease; z-index:30;
}
.map-hotspot[data-name]::before{
  content:''; position:absolute; left:50%; top:-8px; width:8px; height:8px;
  transform:translate(-50%,-2px) rotate(45deg);
  background:rgba(30,27,22,.75);
  border:2px solid rgba(255,255,255,.50); border-top-color:transparent; border-left-color:transparent;
  border-radius:2px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 3px 8px rgba(0,0,0,.25); opacity:0; transition:opacity .12s ease; z-index:29;
}
.map-hotspot[data-name]:hover::after,
.map-hotspot[data-name]:focus-visible::after{ opacity:1; transform:translate(-50%,-112%) }
.map-hotspot[data-name]:hover::before,
.map-hotspot[data-name]:focus-visible::before{ opacity:1 }

/* ---------- 5) Pin highlight (world tiles) ---------- */
.map-container .map-hotspot.has-pins{
  outline:none; border-radius:8px; z-index:60;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.95),
    0 0 10px 4px rgba(255,255,255,.60),
    0 0 22px 10px rgba(255,255,255,.35);
  animation:pinAuraPulse 2.2s ease-in-out infinite;
}
.map-container .map-hotspot .pin-mob{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:32px; height:32px; image-rendering:pixelated; pointer-events:none; z-index:70;
}
.map-container .map-hotspot:hover,
.map-container .map-hotspot:focus,
.map-container .map-hotspot:focus-visible{ z-index:9999 }
@keyframes pinAuraPulse{
  0%,100%{
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.90),
      0 0 8px 3px rgba(255,255,255,.55),
      0 0 18px 9px rgba(255,255,255,.30);
  }
  50%{
    box-shadow:
      inset 0 0 0 1.5px rgba(255,255,255,1),
      0 0 14px 5px rgba(255,255,255,.80),
      0 0 28px 12px rgba(255,255,255,.45);
  }
}

/* ---------- 6) Dungeons (panel + canvas + tiles) ---------- */
.dj-panel{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
}
.dj-titlebar{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  background:linear-gradient(90deg, rgba(132,94,247,.20), rgba(132,94,247,0) 60%);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.dj-icon{ width:28px; height:28px; color:#c7b5ff; filter:drop-shadow(0 2px 6px rgba(132,94,247,.45)) }
.dj-title{ font-weight:700; letter-spacing:.2px }
.dj-sub{ font-size:12px; opacity:.7; margin-top:2px }
.dj-btn{
  appearance:none; border:none; cursor:pointer;
  padding:8px 12px; border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); color:#fff;
}
.dj-btn:hover{ background:rgba(255,255,255,.12) }

/* === Dungeon canvas === */
/* กล่องนอก: เป็นแค่ wrapper เฉยๆ */
.dungeon-canvas{
  position: relative;
  width: 100%;
  min-height: 140px;
  height: auto;
  overflow: hidden;
  box-sizing: content-box;
}

/* เวทีจริง (อ้างอิงพิกัด) = ตรงกับ #canvasDungeon ของแอดมิน */
.dj-stage{
  position: relative;         /* ⬅ ตัวอ้างอิง absolute ของไทล์ */
  width: 1080px;              /* เท่ากับ admin */
  height: auto;               /* จะถูกตั้งด้วย inline + JS */
  margin: 0;
  transform-origin: top left;
  will-change: transform;

  /* กลุ่ม box-model ต้องอยู่ที่ "เวที" เพื่อให้พิกัดตรงกัน */
  padding: 14px 14px 18px;    /* ⬅ ที่เคยอยู่ใน .dungeon-canvas */
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;

  /* ฉากหลัง (ถ้ามีในแอดมิน) */
  background:
    radial-gradient(1080px 600px at 15% -30%, rgba(132,94,247,.10), transparent 60%),
    radial-gradient(900px 500px at 85% 120%, rgba(0,220,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}

/* ไทล์ดันเจี้ยน: ขนาดจาก DB ต้องเป๊ะ */
.map-hotspot.dj{
  position: absolute;
  box-sizing: border-box;     /* รวม border เข้า width/height */
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  image-rendering: pixelated;
  box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.28);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, outline-color .2s ease;
  will-change: transform, box-shadow, filter;
  transform: translateZ(0);
}

/* แสดงชื่อเมื่อกดปุ่ม */
.dungeon-canvas.show-names .map-hotspot.dj::after{
  opacity: 1; top: calc(100% + 12px); transform: translateX(-50%);
}

.map-hotspot.dj::before{
  content:''; position:absolute; inset:-10px; border-radius:16px;
  background:radial-gradient(24px 24px at 50% 50%, rgba(132,94,247,.30), transparent 60%);
  filter:blur(12px); z-index:-1; opacity:.65;
}
.map-hotspot.dj:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(132,94,247,.55);
  outline:1px solid rgba(132,94,247,.65);
  filter:saturate(1.06) brightness(1.04);
}
.map-hotspot.dj::after{
  content:attr(data-name);
  position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%);
  padding:6px 12px; font-size:12px; line-height:1; color:#fff; white-space:nowrap;
  background:rgba(6,6,18,.86);
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,.35);
  backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:.18s ease; z-index:20;
}
.map-hotspot.dj:hover::after{ opacity:1 }

/* separators (optional) */
.sep{ border:0; border-top:1px solid rgba(255,255,255,.10); opacity:.6; margin:16px 0 8px }
.zone-title{ display:none }

/* ---------- 7) Sidebar (monster list) ---------- */
.wm-side{
  position:fixed; z-index:60;
  left:12px; top:96px; bottom:12px; width:var(--sidebar-w);
  background:var(--panel);
  border:1px solid rgba(255,255,255,.12); border-radius:14px;
  backdrop-filter:blur(6px); box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:flex; flex-direction:column; overflow:hidden;
}
.wm-head{
  background:linear-gradient(135deg, #3e2a63, #20162f);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.wm-search{
  width:100%; padding:10px 12px;
  background:#0f0e16; color:#fff;
  border:1px solid rgba(255,255,255,.12); border-radius:10px;
}
.wm-tabs{ display:flex; gap:8px; padding:10px 12px }
.wm-tab{
  display:inline-flex; gap:6px; align-items:center; justify-content:center;
  flex:1; padding:9px 10px; color:#fff; cursor:pointer;
  background:var(--tab); border:1px solid rgba(255,255,255,.1); border-radius:10px;
}
.wm-tab.active{ background:var(--tab-active); border-color:var(--tab-active) }
.wm-tab-icon{ width:20px; height:20px; margin-right:6px; vertical-align:middle }

.wm-topbar{
  position:sticky; top:0; z-index:3;
  padding:12px 12px 10px;
  background:
    radial-gradient(60% 50% at 50% -10%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, #0f0c1d 0%, #171327 70%, rgba(23,19,39,.92) 100%);
  border-top-left-radius:14px; border-top-right-radius:14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04), 0 6px 16px rgba(0,0,0,.35);
}
.wm-top-title{
  text-align:center; font-weight:700; font-size:18px; letter-spacing:.3px;
  color:#EDE9FF; text-shadow:0 1px 0 rgba(0,0,0,.35);
}

.wm-levels{
  padding:0 12px 10px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
}
.wm-levels button{
  position:relative; overflow:hidden; cursor:pointer;
  padding:8px 10px 8px 38px;
  color:#fff; background:#201c2b;
  border:1px solid rgba(255,255,255,.1); border-radius:10px;
  background-image:url('../sprites/monster_icon.png');
  background-repeat:no-repeat; background-size:20px 20px;
  background-position:12px center;
  transition:border-color .18s ease, background-color .18s ease, transform .12s ease;
}
.wm-levels button:hover{ border-color:rgba(255,255,255,.16) }
.wm-levels button:focus-visible{ outline:2px solid #FFD34F; outline-offset:2px }
.wm-levels button::after{
  content:""; position:absolute; left:10px; right:10px; top:-2px; height:3px;
  background:linear-gradient(90deg, rgba(255,255,255,.9), #fff 50%, rgba(255,255,255,.9));
  border-radius:999px; opacity:0; transform:scaleX(0);
  transition:transform .18s ease, opacity .18s ease;
}
.wm-levels button.active::after{ opacity:1; transform:scaleX(1) }
.wm-levels button::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 8px 30px rgba(255,255,255,.18);
  opacity:0; transform:scale(.96); transition:opacity .18s ease, transform .18s ease;
}
.wm-levels button.active{
  border-color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset, 0 8px 20px rgba(255,255,255,.20);
  transform:translateY(-1px);
  animation:wmLevelPulseWhite 1.8s ease-in-out infinite;
}
.wm-levels button.active::before{ opacity:1; transform:scale(1) }
@keyframes wmLevelPulseWhite{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,255,255,.35) inset, 0 10px 26px rgba(255,255,255,.20) }
  50%    { box-shadow:0 0 0 1px rgba(255,255,255,.6) inset, 0 14px 34px rgba(255,255,255,.28) }
}
/* hide levels when MVP tab active (no JS) */
.wm-tabs:has(.wm-tab[data-tab="boss"].active) + .wm-levels{ display:none !important }

/* list grid */
.wm-list{
  flex:1; padding:var(--gap);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--gap); align-content:start; align-items:start;
  grid-auto-rows:var(--card-h);
  overflow:auto; scrollbar-width:thin; scrollbar-color:#3a3646 #1a1724;
}
.wm-list::-webkit-scrollbar{ width:10px }
.wm-list::-webkit-scrollbar-track{ background:#1a1724; border-radius:10px }
.wm-list::-webkit-scrollbar-thumb{ background:#3a3646; border-radius:10px; border:2px solid #1a1724 }
.wm-list:hover::-webkit-scrollbar-thumb{ background:#454154 }

/* card (single, compact) */
.wm-side .card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:0; min-width:0; height:var(--card-h);
  padding:10px 8px 8px;
  background:#1b1827;
  border:1px solid rgba(255,255,255,.08); border-radius:12px;
  overflow:hidden;
}
.wm-side .card .sprite{
  margin-top:var(--sprite-shift);
  width:32px; height:32px; object-fit:contain; image-rendering:pixelated;
  background:#25223a; border:1px solid rgba(255,255,255,.08); border-radius:2px;
}
.wm-side .card .name{
  margin-top:var(--name-shift);
  font-size:10px; line-height:1.2; color:#ffcc00;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.wm-side .card .meta{
  margin-top:var(--level-shift);
  display:flex; align-items:center; gap:4px; font-size:10px; color:var(--muted);
}
.wm-side .badge{
  font-size:10px; padding:3px 7px; background:#262236;
  border:1px solid rgba(255,255,255,.08); border-radius:999px;
}
.wm-side .badge.mvp{ background:#473a1a; border-color:#70551a; color:#fff }
.wm-side .badge.el { background:#24313b }

/* single “Pin” button */
.wm-side .pin{
  position:absolute; top:1px; right:10px;
  padding:5px 8px; font-size:9px; color:#fff;
  background:#28243a; border:1px solid rgba(255,255,255,.12); border-radius:8px; cursor:pointer;
  left: auto;
  right: auto;
}
.wm-side .pin.active{ background:#ef4444; border-color:#b91c1c }

/* ---------- 8) Sidebar container (slide-in) & Edge toggle ---------- */
#wmSidebar{
  position:fixed; z-index:70;
  top:var(--sb-top); left:var(--sb-gap); right:auto; bottom:var(--sb-gap);
  width:min(92vw, var(--sb-width));
  border-radius:14px;

  transform:translateX(-110%); transition:transform .26s ease;

  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y;

  scrollbar-width:thin; scrollbar-color:#3a3646 #1a1724;
}
#wmSidebar.open, body.sb-open #wmSidebar{ transform:translateX(0) }
/* list itself should not have nested scrollbars */
#wmList{ overflow:visible !important }

#wmSidebar::-webkit-scrollbar{ width:12px }
#wmSidebar::-webkit-scrollbar-track{ background:#1a1724; border-radius:10px }
#wmSidebar::-webkit-scrollbar-thumb{ background:#3a3646; border-radius:10px; border:2px solid #1a1724 }
#wmSidebar:hover::-webkit-scrollbar-thumb{ background:#454154 }

/* Edge toggle button */
.edge-toggle{
  position:fixed; z-index:90;
  left:0; top:calc(var(--sb-top) + var(--edge-top));
  transform:translate(-32%, -50%);
  width:var(--edge-w); height:var(--edge-h); padding:12px 0;

  border:1px solid var(--edge-border); border-left:none;
  border-radius:0 var(--edge-radius) var(--edge-radius) 0;

  background:
    radial-gradient(70% 100% at 50% -20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(139,92,246,.12), rgba(139,92,246,0) 40%),
    var(--edge-bg);
  box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  color:#EDE9FF;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  will-change:left, top, transform;
  transition:left .26s ease, top .26s ease, transform .26s ease, box-shadow .26s ease;
}
.edge-toggle:hover{
  transform:translate(-28%, -50%);
  box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 0 1px var(--edge-glow);
}
.edge-toggle .lens{
  width:34px; height:34px;
  filter:drop-shadow(0 2px 6px rgba(139,92,246,.35));
  transition:transform .22s ease, opacity .22s ease;
}
.edge-toggle .ring{
  width:26px; height:26px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.10) inset, 0 0 0 8px rgba(139,92,246,.06);
  animation:ringPulse 2.2s ease-in-out infinite;
}
@keyframes ringPulse{
  0%,100%{ box-shadow:0 0 0 2px rgba(255,255,255,.10) inset, 0 0 0 8px rgba(139,92,246,.06) }
  50%    { box-shadow:0 0 0 2px rgba(255,255,255,.16) inset, 0 0 0 12px rgba(139,92,246,.12) }
}
/* move handle to the right when panel open */
body.sb-open .edge-toggle{
  left: calc(var(--sb-gap) + min(92vw, var(--sb-width)) + var(--edge-gap) + var(--edge-open-shift));
  top:  calc(var(--sb-top) + var(--edge-top));
  transform: translate(-50%, -50%);
}
body.sb-open .edge-toggle .lens{ transform:scale(.92) }

/* ---------- 9) Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .edge-toggle, .edge-toggle .lens, .edge-toggle .ring{ transition:none !important; animation:none !important }
}

/* ===== PRELOADER ===== */
:root{
  --bg: #0b0d17;
  --ring: rgba(255,255,255,.07);
  --bar-bg: #2a2f45;
  --bar-fg-1:#c7b5ff;
  --bar-fg-2:#8b5cf6;
  --text: #ffffff;
  --sub: #a78bfa;
}

/* กันสกอลล์ระหว่างโหลด */
body.loading { overflow: hidden; }

.wm-loader{
  position: fixed; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; color: var(--text);
  font-family: 'Kanit', system-ui, sans-serif;
  text-align: center;
}

.wm-loader-ring{
  position: relative;
  width: 420px; max-width: 92vw;
  padding: 24px 16px 8px;
}

/* วงกลมฮาโลด้านหลัง */
.wm-loader-ring::before{ content:none; display:none; }

.wm-loader-icon{
  width: 150px; height: 150px; object-fit: contain; display: block;
  margin: 0 auto 16px;
  filter: drop-shadow(0 4px 24px rgba(139,92,246,.55));
  animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

.wm-loader-title{
  font-weight: 700; font-size: 28px; line-height: 1.2;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.wm-loader-sub{
  margin-top: 4px; margin-bottom: 16px;
  color: var(--sub); font-weight: 500;
}

/* แถบเปอร์เซ็นต์ */
.wm-loader-bar{
  width: 360px; max-width: 84vw;
  height: 10px; border-radius: 999px;
  margin: 0 auto; background: var(--bar-bg); overflow: hidden;
}
.wm-loader-bar > span{
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--bar-fg-1), var(--bar-fg-2));
  transition: width .18s ease;
}
.wm-loader-pct{
  margin-top: 10px; font-weight: 700; letter-spacing: .2px;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* จบด้วย fade out */
.wm-fade-out{ animation: fadeOut .35s ease forwards; }
@keyframes fadeOut { to { opacity: 0; visibility: hidden } }

@keyframes fadeIn { from{ opacity:0 } to{ opacity:1 } }