/* ==========================================================================
   MU DIMINION S6 — DARK FANTASY THEME (2026-09-23)
   ไฟล์นี้โหลดเป็นสไตล์ชีตสุดท้ายของทุกหน้า → ทับธีมสว่าง (SOFT THEME) ทั้งหมด
   วิธีคืนธีมสว่างเดิม: ลบ <link rel="stylesheet" href="dark-theme.css..."> ออกจากทุกหน้า
   ========================================================================== */

/* ---------- 1. PALETTE ---------- */
:root{
  color-scheme:dark;
  --bg:#070b11;
  --bg-2:#0a1018;
  --panel:#111a25;
  --panel-2:#0d151f;
  --gold:#e3b970;
  --gold-strong:#f6dda6;
  --gold-deep:#a9823c;
  --blood:#c0391c;
  --steel:#5d7488;
  --muted:#97a7b8;
  --ink:#e9f0f7;
  --line:#ffffff14;
  --line-gold:#e3b97033;
  --shadow:0 22px 60px rgba(0,0,0,.55);
  --shadow-sm:0 8px 26px rgba(0,0,0,.40);
  --glow:0 0 0 1px #e3b97045, 0 18px 44px rgba(0,0,0,.55), 0 0 34px #e3b97012;
}

/* ---------- 2. BASE — IRON / WARRIOR BACKGROUND ---------- */
html{scroll-behavior:smooth}

/* หมุดย้ำมุมแผ่นเกราะ + ขอบแผ่น (ใช้ซ้ำบนทุกพื้นผิว · ไม่มีลายขวาง) */
:root{
  --rivet:
    radial-gradient(circle 3px at 14px 14px,rgba(255,255,255,.42) 0 55%,rgba(0,0,0,.7) 70%,rgba(0,0,0,0) 100%),
    radial-gradient(circle 3px at calc(100% - 14px) 14px,rgba(255,255,255,.42) 0 55%,rgba(0,0,0,.7) 70%,rgba(0,0,0,0) 100%),
    radial-gradient(circle 3px at 14px calc(100% - 14px),rgba(255,255,255,.42) 0 55%,rgba(0,0,0,.7) 70%,rgba(0,0,0,0) 100%),
    radial-gradient(circle 3px at calc(100% - 14px) calc(100% - 14px),rgba(255,255,255,.42) 0 55%,rgba(0,0,0,.7) 70%,rgba(0,0,0,0) 100%);
  --rim:0 0 0 1px #ffffff14,0 0 0 2px #00000070,0 0 0 3px #e3b97022;
}
html{background:#05080c!important}
body{
  background-color:#080d14!important;
  color:var(--ink)!important;
  background:
    /* มุมมืด (vignette) หนัก */
    radial-gradient(150% 115% at 50% 6%,rgba(0,0,0,0) 30%,rgba(0,0,0,.78) 100%),
    /* แสงคมดาบพาดทแยง */
    linear-gradient(112deg,rgba(0,0,0,0) 44%,rgba(214,236,255,.075) 50%,rgba(0,0,0,0) 56%),
    /* เพลิงสีโลหิตใต้สมรภูมิ */
    radial-gradient(820px 500px at 2% 108%,rgba(192,57,28,.34),rgba(192,57,28,0) 62%),
    radial-gradient(700px 420px at 98% 102%,rgba(150,44,18,.26),rgba(150,44,18,0) 64%),
    /* แสงเย็นจากเหล็กกล้า */
    radial-gradient(1000px 620px at 92% -8%,rgba(84,124,166,.22),rgba(84,124,166,0) 60%),
    radial-gradient(780px 520px at 8% -4%,rgba(58,88,124,.16),rgba(58,88,124,0) 62%),
    /* เหล็กกล้าฐาน (ไม่มีลายขวาง) */
    linear-gradient(180deg,#0c1119 0%,#101820 32%,#0a0f16 64%,#05080c 100%)!important;
  background-attachment:fixed!important;
  -webkit-font-smoothing:antialiased;
}
body,p,li,dd,dt,td,th,label,small,span,strong,em{letter-spacing:.2px}
::selection{background:#e3b97055;color:#fff}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#080d14}
*::-webkit-scrollbar-thumb{background:#26384a;border-radius:8px;border:2px solid #080d14}
*::-webkit-scrollbar-thumb:hover{background:#e3b97077}
a{color:inherit}
h1,h2,h3,h4,h5{color:#f2f6fa!important;text-shadow:0 2px 14px #0006}
p,li,dd,dt{line-height:1.9}
.eyebrow{color:var(--gold)!important}
.muted,.sample,.rank-foot,.news-row p{color:var(--muted)!important}
hr{border:0;border-top:1px solid var(--line)}

/* ---------- 3. HEADER + NAV ---------- */
header{
  background:linear-gradient(180deg,rgba(9,14,22,.94),rgba(9,14,22,.74))!important;
  border-bottom:1px solid var(--line-gold)!important;
  backdrop-filter:blur(14px);
  box-shadow:0 10px 34px rgba(0,0,0,.45);
}
header .brand img{filter:drop-shadow(0 3px 12px rgba(0,0,0,.65))}
header nav{color:#a8b6c4!important}
html body header nav a{
  color:#cdd8e5!important;
  border:1px solid #ffffff1f!important;
  background:linear-gradient(180deg,#1b2532,#0b1119)!important;
  border-radius:2px!important;
  letter-spacing:.6px!important;
  text-shadow:0 1px 0 #000a!important;
  box-shadow:inset 0 1px 0 #ffffff14,inset 0 -2px 0 #00000060;
  transition:color .18s,border-color .18s,background .18s,box-shadow .18s;
}
html body header nav a:hover,
html body header nav a:focus-visible{
  color:#fff!important;
  border-color:#e3b970aa!important;
  background:linear-gradient(180deg,#2c2a1e,#141a24)!important;
  box-shadow:inset 0 1px 0 #ffffff20,inset 0 -2px 0 #00000060;
}
html body header nav a.active,
html body header nav a[aria-current]{
  color:#fff2d4!important;
  border-color:#e3b970aa!important;
  background:linear-gradient(180deg,#2c2a1e,#141a24)!important;
  /* ขนาด/เงา/เส้นเหมือนปุ่มธรรมดา แยกสถานะด้วยแถบทองใต้ */
  box-shadow:inset 0 1px 0 #ffffff20,inset 0 -3px 0 #e3b970d0,inset 0 -2px 0 #00000060;
}
.outline{
  border:1px solid #e3b97070!important;
  color:var(--gold-strong)!important;
  background:linear-gradient(180deg,#1a232f,#101922)!important;
  border-radius:8px;
}
.outline:hover{box-shadow:0 0 0 1px #e3b97055,0 10px 26px rgba(0,0,0,.5),0 0 24px #e3b97020}
.register-cta{
  background:linear-gradient(135deg,#2b93c0,#0f3f6d)!important;
  border-color:#8fe3ffaa!important;
  box-shadow:0 0 26px #41bbff40,inset 0 1px 0 #ffffff30!important;
}

/* ---------- 4. BUTTONS ---------- */
.gold{
  background:linear-gradient(120deg,#f0d49a,#c09447)!important;
  border:1px solid #f2dca8!important;
  color:#1b1408!important;
  border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.45),inset 0 1px 0 #fff6;
}
.gold:hover,.gold:focus-visible{filter:brightness(1.08);box-shadow:0 14px 36px rgba(0,0,0,.55),0 0 26px #e3b97045}
.text-link{color:#dfe8f2!important}
.text-link span{color:var(--gold)!important}
button,input,select,textarea{font-family:inherit}
input,select,textarea{
  background:#0b131c!important;
  border:1px solid #2d3f52!important;
  color:var(--ink)!important;
  border-radius:8px;
}
input::placeholder,textarea::placeholder{color:#5f7488}
input:focus,select:focus,textarea:focus{
  border-color:#e3b97099!important;
  box-shadow:0 0 0 3px #e3b9701f!important;
  background:#0e1822!important;
  outline:none;
}
:focus-visible{outline:3px solid #e3b970;outline-offset:3px}

/* ---------- 5. HERO (หน้าแรก) — ผู้ใช้ขอ "ขอให้เห็นรูปเต็ม" 2026-09-25 ---------- */
.hero-art{
  background:
    /* แค่เงาทแยงบางๆ ที่มุมบนซ้าย — อ่าน h1 ได้แต่ไม่ทาบปิดครึ่งจอ */
    linear-gradient(135deg,rgba(5,8,12,.40) 0%,rgba(5,8,12,0) 35%),
    /* เลือดใต้สมรภูมิ (เบาลง) */
    radial-gradient(130% 100% at 50% 108%,rgba(192,57,28,.28),rgba(192,57,28,0) 60%),
    /* คมดาบพาด — บางลง */
    linear-gradient(112deg,rgba(0,0,0,0) 42%,rgba(226,240,255,.06) 50%,rgba(0,0,0,0) 58%),
    /* เงาทอดจากด้านบน (เน้นให้อ่าน h1 ได้ — เฉพาะส่วนบนเท่านั้น) */
    linear-gradient(0deg,rgba(5,8,12,0) 55%,rgba(5,8,12,.55) 100%),
    /* รูปภาพเต็ม ไม่ครอป ไม่ทึบ */
    url('hero.png') center 35%/cover!important;
  filter:saturate(.85) contrast(1.12) brightness(.92);
}
/* vignette เบาๆ ตรงกลาง — ลด opacity ลง ไม่ทำให้มืดทั้งภาพ */
.hero::after{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 110% at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%);
  mix-blend-mode:normal;
}
/* ขอบล่างของ hero = คมเหล็ก */
.hero{border-bottom:3px solid #e3b97030;box-shadow:inset 0 -30px 60px rgba(0,0,0,.7)}
.season{color:#cfd9e4!important}
.season span{color:var(--gold)!important;border-left-color:#e3b97055!important}
h1,h1 em{text-shadow:0 2px 24px #000a}
.intro{color:#b6c4d3!important}
.hero-note{color:#8b9aa9!important}
.hero-note b{color:var(--gold)!important}
.vertical,.scroll{color:#9aa9b8!important}

/* ---------- 6. STATS / LIVE STATS ---------- */
.stats,.live-stats{
  background:linear-gradient(180deg,rgba(19,27,38,.92),rgba(10,16,24,.92))!important;
  border:1px solid var(--line-gold)!important;
  border-radius:16px;
  box-shadow:var(--shadow),0 0 40px #e3b9700d;
}
.stats>div,.live-stats>div{border-right:1px solid var(--line)!important}
.stats>div:last-child,.live-stats>div:last-child{border-right:0}
.stats small,.live-stats small{color:var(--gold)!important}
.stats strong,.live-stats strong{color:#f4f8fc!important}
.stats em,.live-stats strong em{color:var(--gold)!important}
.stats span,.live-stats>div>span{color:var(--muted)!important}
.stats strong.status,.live-stats .status[data-online="true"]{color:#6fd79c!important}
.live-stats .status[data-online="false"]{color:#ff9c8a!important}
.live-stats>div::after{background:linear-gradient(90deg,#f0d49a,#a9823c)!important}

/* ---------- 7. NEWS / FEATURED / RANKING ---------- */
.featured{
  background:radial-gradient(ellipse at right,#e3b9701a,transparent 68%),linear-gradient(135deg,#141e2a,#0b121a)!important;
  border:1px solid var(--line-gold)!important;
  border-radius:18px;
  box-shadow:var(--shadow);
}
.featured h3{color:#f4f8fc!important}
.featured p{color:#b3c2d1!important}
.roman{color:#e3b97014!important}
.news-row{border-bottom:1px solid var(--line)!important}
.news-row:hover{background:#e3b9700a}
.news-row h3{color:#eef4fa!important}
.news-row>span:last-child,.news-row>a:last-child{color:var(--muted)!important}
.neutral{background:#ffffff08!important;border:1px solid var(--line-gold)!important;color:var(--gold-strong)!important}
aside{border-left:1px solid var(--line)!important}
.crest{color:var(--gold)!important}
.rank-head{color:var(--muted)!important;border-bottom:1px solid var(--line)!important}
.ranking li{border-bottom:1px solid var(--line)!important}
.ranking li:hover{background:#e3b9700a}
.ranking b{color:#64748b!important}
.ranking strong{color:#eef4fa!important}
.ranking small{color:var(--muted)!important}
.ranking em{color:#cdd8e4!important}
.section-title h2::after{background:linear-gradient(90deg,#ffe0a0,#d5a34b00)!important}

/* ---------- 8. CLASSES PAGE ---------- */
.classes-hero{
  background:
    linear-gradient(90deg,#070b11e8 0%,#070b11c0 38%,#070b1168 72%,#070b1100 100%),
    linear-gradient(0deg,#070b11,rgba(7,11,17,.2)),
    url('hero.png') center 35%/cover!important;
  border-bottom:1px solid var(--line-gold)!important;
}
.classes-hero-inner h1,.class-detail h3,.classes-detail-body h3{color:#f4f8fc!important}
.classes-hero-sub,.classes-detail-body>p{color:#b6c4d3!important}
.classes-pills li{
  border:1px solid var(--line-gold)!important;
  background:rgba(19,27,38,.82)!important;
  color:#d5dfe9!important;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.classes-pills li b{background:linear-gradient(135deg,#f0d49a,#b98f45)!important;color:#241a06!important}
.class-grid-wrap,.classes-grid-wrap{color:var(--ink)}
.class-card,.class-card:not(.selected){
  border:1px solid #ffffff14!important;
  background:linear-gradient(160deg,#141e2a,#0c131b)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.45)!important;
}
.class-card:hover{border-color:#e3b97066!important;box-shadow:0 16px 38px rgba(0,0,0,.55),0 0 26px #e3b97018!important}
.class-card.selected{border-color:#e3b970!important;background:linear-gradient(160deg,#2b2416,#111a24)!important;box-shadow:var(--glow)!important}
.class-card-no,.class-card-role,.classes-detail-body .eyebrow,.class-quick-label{color:var(--gold)!important}
.class-card-ico{border:2px solid #ffffff1a!important;background:radial-gradient(ellipse at 50% 40%,#18222e,#0c131b)!important;box-shadow:inset 0 2px 8px #0008}
.class-card.selected .class-card-ico{border-color:#e3b970!important;box-shadow:0 0 0 3px #e3b97022,inset 0 2px 8px #000a}
.class-card-name{color:#f4f8fc!important}
.classes-detail{
  background:linear-gradient(120deg,rgba(20,29,41,.95),rgba(11,18,26,.9))!important;
  border:1px solid var(--line-gold)!important;
  border-radius:22px;
  box-shadow:var(--shadow),inset 0 1px 0 #ffffff0a!important;
}
.class-number{color:#e3b9701f!important}
.classes-meta>div{background:rgba(255,255,255,.04)!important;border:1px solid #ffffff14!important;border-radius:10px}
.classes-meta dt{color:var(--gold)!important}
.classes-meta dd{color:#f4f8fc!important}
.classes-tags li{border:1px solid var(--line-gold)!important;background:rgba(255,255,255,.04)!important;color:#d5dfe9!important}
.class-quick{border:1px solid var(--line-gold)!important;background:linear-gradient(160deg,#182231,#0d151f)!important;box-shadow:0 12px 30px rgba(0,0,0,.5)!important}
.class-quick p{color:#e6edf5!important}
.classes-step,.classes-empty{color:var(--gold)!important}
.classes-empty{color:var(--muted)!important}
.classes-step button{border:1px solid #e3b97055!important;background:linear-gradient(160deg,#1c2734,#111a24)!important;color:var(--gold-strong)!important;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.classes-step button:hover{box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 22px #e3b97025}
.class-portrait{border:2px solid #e3b97077!important;background:#0b121a!important;box-shadow:0 18px 44px rgba(0,0,0,.6)!important}
.class-portrait::after{background:linear-gradient(180deg,#ffffff0a 0%,#ffffff00 42%,rgba(4,8,13,.65) 100%)!important}
.class-portrait .class-number{color:#f6dda6!important;text-shadow:0 2px 12px #000c!important}
.class-detail{background:linear-gradient(100deg,#151f2b,#0b1219)!important;border:1px solid var(--line-gold)!important;border-radius:18px}
.class-detail p{color:#b3c2d1!important}
.class-label{color:var(--muted)!important}
.class-list{border-bottom:1px solid var(--line)!important}
.class-list button{color:#9fadc0!important}
.class-list button:hover,.class-list button:focus-visible{color:var(--gold-strong)!important;background:#e3b97010!important;text-shadow:0 0 18px #e3b97066}
.class-list button.selected{color:var(--gold)!important;border-color:var(--gold)!important}

/* ---------- 9. LADDER PAGE ---------- */
.ladder-tiers,.ladder-rules>div,.ladder-col,.ladder-note,.ladder-howto{
  background:linear-gradient(180deg,rgba(19,27,38,.92),rgba(11,17,25,.92))!important;
  border:1px solid var(--line-gold)!important;
  color:#c3cfdb!important;
  box-shadow:var(--shadow-sm);
}
.ladder-tier{background:linear-gradient(160deg,#2b2416,#151b23)!important;border:1px solid #e3b97055!important;border-radius:8px}
.ladder-tier b{color:var(--gold)!important;opacity:1}
.ladder-tier+.ladder-tier,.ladder-arrow+.ladder-tier{color:#e8eef5!important}
.ladder-arrow{color:#6d7d8e!important}
.ladder-howto{border-left-color:var(--gold)!important}
.ladder-howto b,.ladder-rules b,.ladder-col-head h3,.ladder-eyebrow{color:var(--gold-strong)!important}
.ladder-rule-label{color:var(--muted)!important}
.ladder-step{border-bottom:1px dashed var(--line)!important}
.ladder-step>b{color:#12190f!important;background:linear-gradient(135deg,#f0d49a,#b98f45)!important;border-color:#f0d49a!important}
.ladder-step.is-first>b{background:linear-gradient(135deg,#9aa6b4,#5a6572)!important;border-color:#8b949d!important;color:#0d1319!important}
.ladder-step.is-last>b{background:linear-gradient(135deg,#ffe6b8,#d59a35)!important;border-color:#ffe5b1!important;box-shadow:0 0 18px #e5b86366!important;color:#241a06!important}
.ladder-flow .from{color:#e9eff6!important}
.ladder-flow .plus{color:#8798a9!important}
.ladder-flow .to{color:#ffe6b4!important}
.mat{color:#e3ecf5!important;background:#0f1822!important;border:1px solid #33404d!important}
.ladder-mix,.ladder-page-sub{color:var(--muted)!important}
.ladder-ico{border:1px solid #33404d!important;background:#0f1822!important}
.ladder-col-head,.items-title{border-bottom:1px solid var(--line)!important}

/* ---------- 10. FOOTER ---------- */
body footer{
  background:radial-gradient(ellipse at 50% 0%,#1b2532 0%,#0e161f 55%,#080d13 100%)!important;
  border-top:2px solid #e3b97080!important;
  box-shadow:inset 0 1px 0 #ffffff10,0 -18px 40px rgba(0,0,0,.5)!important;
  color:#e7eef6!important;
}
body footer p{color:#c3cfdb!important}
body footer .social-heading{color:var(--gold)!important}
body footer .social-link{
  border:1px solid #ffffff1f!important;
  background:linear-gradient(180deg,#1a2534,#111a25)!important;
  color:#dae6f2!important;
  box-shadow:inset 0 1px 0 #ffffff12,0 6px 16px rgba(0,0,0,.45);
}
body footer .social-link.discord{background:linear-gradient(180deg,#2a2c4a,#191d31)!important;border-color:#6f74a8!important;color:#e6e7ff!important}
body footer .social-link.facebook{background:linear-gradient(180deg,#1877F2,#0e5fc7)!important;border-color:#1877F2cc!important;color:#fff!important}
body footer .social-link:not(:disabled):hover{border-color:#e3b970aa!important;box-shadow:0 10px 24px rgba(0,0,0,.55),0 0 22px #e3b97025}
body footer .social-link.facebook:not(:disabled):hover{border-color:#42a5f5!important;box-shadow:0 10px 24px rgba(0,0,0,.55),0 0 22px #1877f244}
body footer>span{color:#9aa9b8!important;border-top:1px solid var(--line)!important}
footer .brand img{filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}

/* ---------- 11. SHOP (shop.php) ---------- */
.shop-page,.item-grid{color:var(--ink)}
.back-link,.refresh-link{color:var(--muted)!important}
.shop-heading h1{color:#f4f8fc!important}
.shop-heading h1 em,.shop-heading p:last-child{color:var(--gold)!important}
.shop-heading p:last-child{color:#b3c2d1!important}
.shop-seal{color:var(--gold)!important;text-shadow:0 0 45px #e3b97055!important}
.account-panel{
  border:1px solid var(--line-gold)!important;
  background:linear-gradient(120deg,#16202d,#0d151f)!important;
  box-shadow:var(--shadow)!important;
}
.account-label{color:var(--muted)!important}
.account-panel strong{color:#f4f8fc!important}
.account-panel .balance{color:var(--gold)!important}
.catalog-heading span,.items-title span{color:var(--muted)!important}
.catalog-heading h2,.items-title h2{color:#f4f8fc!important}
.category{
  border:1px solid #ffffff12!important;
  background:linear-gradient(135deg,#16202d,#0d151f)!important;
  color:#c3cfdb!important;
}
.category-number{color:#7c8ea1!important}
.category:hover,.category.selected{
  color:var(--gold-strong)!important;
  border-color:#e3b97088!important;
  background:linear-gradient(135deg,#2e2616,#141c26)!important;
  box-shadow:0 0 22px #e3b9701f,0 12px 26px rgba(0,0,0,.5)!important;
}
.category.selected .category-number{color:var(--gold)!important}
.items-panel{border:1px solid var(--line-gold)!important;background:linear-gradient(180deg,#131c27,#0b1219)!important;box-shadow:var(--shadow)!important}
.empty-crest{color:var(--gold)!important}
.empty-state h3{color:#f4f8fc!important}
.empty-state p{color:var(--muted)!important}
.shop-policy{
  border:1px solid var(--line-gold)!important;
  background:radial-gradient(ellipse at top right,#e3b97018,transparent 70%),linear-gradient(120deg,#151e29,#0c131c)!important;
  box-shadow:var(--shadow-sm)!important;
}
.shop-policy h2{color:var(--gold-strong)!important}
.shop-policy p,.shop-policy small{color:#b3c2d1!important}
.shop-policy li{background:#e3b97012!important;border:1px solid #e3b97045!important;color:var(--gold-strong)!important}
.wing-product,.item-product{
  border:1px solid var(--line-gold)!important;
  background:linear-gradient(150deg,#151f2b,#0b1219)!important;
  box-shadow:var(--shadow)!important;
}
.wing-visual,.item-visual{border:1px solid var(--line-gold)!important;background:radial-gradient(ellipse,#e3b9701a,transparent 70%),#080e15!important}
.wing-badge,.item-badge{color:var(--gold-strong)!important;border:1px solid #e3b97055!important;background:#121a24!important}
.wing-info h3,.item-info h3{color:#f4f8fc!important}
.wing-info h3 span,.item-info h3 span{color:var(--gold)!important}
.wing-subtitle,.wing-options,.item-subtitle,.item-options,.item-base-options{color:#b3c2d1!important}
.wing-stats>div,.item-stats>div{background:#ffffff06!important;border:1px solid #ffffff10!important}
.wing-stats dt,.item-stats dt{color:var(--muted)!important}
.wing-stats dd,.item-stats dd{color:var(--gold)!important}
.wing-details summary,.item-text-options summary{color:#cfe0ef!important}
.wing-text-options,.item-text-options{border:1px solid var(--line)!important;background:#0b121b!important}
.wing-text-options h4,.item-text-options h4{color:#eef4fa!important}
.item-text-options h4:not(:first-child){border-top:1px solid var(--line)!important}
.wing-price,.item-price{border-top:1px solid var(--line)!important}
.wing-price strong,.item-price strong{color:var(--gold)!important}
.wing-price>span,.item-price>span{color:var(--muted)!important}
.item-gold-options{color:var(--gold-strong)!important}
.item-blue-options{color:#8fc7ff!important}

/* ---------- 12. SHOP (shop-item.php — Cathedral of Items) ---------- */
.shop-hero{
  border:1px solid var(--line-gold)!important;
  background:linear-gradient(160deg,#16202d,#101823 58%,#0b1119)!important;
  box-shadow:var(--shadow)!important;
}
.shop-hero::before{background:radial-gradient(520px 300px at 88% 0%,#e3b97033,transparent 68%),radial-gradient(420px 260px at 4% 100%,#5fa9d91f,transparent 70%)!important}
.shop-crumb{color:var(--muted)!important}
.shop-crumb:hover{color:var(--gold)!important}
.shop-hero h1{color:#f4f8fc!important}
.shop-hero h1 em,.shop-hero-sub b,.shop-notice b,.shop-dialog-body h4,.shop-toast b{color:var(--gold)!important}
.shop-hero-sub{color:#b6c4d3!important}
.shop-hero-pills li{border:1px solid var(--line-gold)!important;background:rgba(255,255,255,.05)!important;color:#d5dfe9!important;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.shop-wallet{
  border:1px solid var(--line-gold)!important;
  background:linear-gradient(160deg,#1a2431,#0e1620)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.55),inset 0 1px 0 #ffffff10!important;
}
.shop-wallet-top span,.shop-wallet-bal,.shop-wallet-top i{color:var(--gold)!important}
.shop-wallet-id,.shop-wallet-hint{color:var(--muted)!important}
.shop-wallet-id b{color:#f4f8fc!important}
.shop-wallet-bal small{color:#c0a878!important}
.shop-wallet-actions a,.shop-wallet-actions button{
  border:1px solid #e3b97066!important;
  background:linear-gradient(160deg,#1e2a38,#131c27)!important;
  color:var(--gold-strong)!important;
}
.shop-wallet-actions .primary{background:linear-gradient(160deg,#f0d49a,#c09447)!important;border-color:#f0d49a!important;color:#1b1408!important}
.shop-wallet-actions a:hover,.shop-wallet-actions button:hover{box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 20px #e3b97025!important}
.shop-notice{border:1px solid var(--line-gold)!important;border-left:5px solid var(--gold)!important;background:rgba(255,255,255,.04)!important;color:#c3cfdb!important}
.shop-toolbar h2{color:#f4f8fc!important}
.shop-count{border:1px solid var(--line-gold)!important;background:rgba(255,255,255,.05)!important;color:var(--gold-strong)!important}
.shop-filter{
  border:1px solid #ffffff1a!important;
  background:linear-gradient(160deg,#18222f,#111a24)!important;
  color:#cbd7e4!important;
}
.shop-filter:hover{border-color:#e3b97088!important;color:var(--gold-strong)!important}
.shop-filter[aria-pressed=true]{
  border-color:#e3b970!important;
  background:linear-gradient(160deg,#2f2717,#141c26)!important;
  color:var(--gold-strong)!important;
  box-shadow:0 6px 20px rgba(0,0,0,.5),0 0 22px #e3b97020!important;
}
.shop-card{
  border:1px solid #ffffff12!important;
  background:linear-gradient(165deg,#151f2b,#0c131b)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.5)!important;
}
.shop-card:hover{transform:translateY(-4px);border-color:#e3b97077!important;box-shadow:0 20px 46px rgba(0,0,0,.6),0 0 30px #e3b9701c!important}
.shop-card-tag{border:1px solid #e3b97066!important;background:linear-gradient(160deg,#2e2616,#191f28)!important;color:var(--gold-strong)!important}
.shop-card-tag.soon{background:linear-gradient(160deg,#1b2430,#141b24)!important;border-color:#ffffff1a!important;color:var(--muted)!important}
.shop-card-art{border-bottom:1px solid var(--line)!important;background:radial-gradient(ellipse at 50% 34%,#1d2836,#101823 72%,#0b1119)!important}
.shop-card-art svg,.shop-card-art img.shop-card-img,.shop-dialog-art img.shop-card-img{filter:drop-shadow(0 10px 20px rgba(0,0,0,.6))!important}
.shop-card-cat{color:#c0a878!important}
.shop-card-name,.shop-empty h3{color:#f4f8fc!important}
.shop-card-sub,.shop-card-note,.shop-price span,.shop-price .soon,.shop-empty p{color:var(--muted)!important}
.shop-card-stats li,.shop-dialog-stats li{border:1px solid #ffffff10!important;background:rgba(255,255,255,.045)!important}
.shop-card-stats dt{color:var(--muted)!important}
.shop-card-stats dd,.shop-dialog-stats b,.shop-price b,.shop-dialog-foot .price b{color:var(--gold)!important}
.shop-price b small,.shop-dialog-foot .price b small{color:#c0a878!important}
.shop-card-chips li{border:1px solid var(--line-gold)!important;background:rgba(255,255,255,.05)!important;color:#cfdae6!important}
.shop-card-foot{border-top:1px dashed var(--line)!important}
.shop-buy,.shop-detail{border:1px solid #e3b97066!important}
.shop-buy{background:linear-gradient(160deg,#f0d49a,#c09447)!important;border-color:#f0d49a!important;color:#1b1408!important;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.shop-buy:hover:not(:disabled){filter:brightness(1.08)}
.shop-buy:disabled{background:linear-gradient(160deg,#1a222c,#141a23)!important;border-color:#ffffff14!important;color:#6b7c8e!important;box-shadow:none}
.shop-detail{background:linear-gradient(160deg,#1e2a38,#131c27)!important;color:var(--gold-strong)!important}
.shop-detail:hover{filter:brightness(1.12)}
.shop-empty{border:1px dashed var(--line-gold)!important;background:rgba(255,255,255,.03)!important}
.shop-empty span{color:var(--gold)!important}
dialog.shop-dialog{
  border:1px solid #e3b97088!important;
  background:linear-gradient(165deg,#16202d,#0b1119)!important;
  color:#e9f0f7!important;
  box-shadow:0 30px 80px rgba(0,0,0,.7)!important;
}
dialog.shop-dialog::backdrop{background:rgba(3,7,12,.72)!important;backdrop-filter:blur(4px)}
.shop-dialog-head,.shop-dialog-foot{border-color:var(--line)!important}
.shop-dialog-art{border:1px solid var(--line-gold)!important;background:radial-gradient(ellipse at 50% 36%,#1d2836,#0f1720)!important}
.shop-dialog-head h2{color:#f4f8fc!important}
.shop-dialog-head p,.shop-dialog-foot .price span{color:var(--muted)!important}
.shop-dialog-list.base{color:#c3cfdb!important}
.shop-dialog-list.gold{color:var(--gold-strong)!important}
.shop-dialog-list.blue{color:#8fc7ff!important}
.shop-dialog-list li{border-bottom:1px dashed var(--line)!important}
.shop-dialog-foot button{border:1px solid #e3b97066!important;background:linear-gradient(160deg,#1e2a38,#131c27)!important;color:var(--gold-strong)!important}
.shop-dialog-foot button.primary{background:linear-gradient(160deg,#f0d49a,#c09447)!important;border-color:#f0d49a!important;color:#1b1408!important}
.shop-toast{border:1px solid #e3b97088!important;background:linear-gradient(160deg,#1a2431,#0e1620)!important;color:#e9f0f7!important;box-shadow:0 20px 50px rgba(0,0,0,.6)!important}
.shop-toast.err{border-color:#d4705a!important;background:linear-gradient(160deg,#33202a,#1a1218)!important}
.shop-toast.err b{color:#ffb3a2!important}

/* ---------- 13. REGISTER / LOGIN ---------- */
.registration-page,.signup-main{background:radial-gradient(ellipse at 15% 35%,#16283a66,transparent 58%),linear-gradient(180deg,#070b11,#0a1018)!important}
.signup-shell{border:1px solid var(--line-gold)!important;background:#101923!important;box-shadow:0 26px 90px rgba(0,0,0,.7),0 0 50px #e3b9700d!important}
.signup-art{background:linear-gradient(0deg,#070e16 2%,#070e1630 70%),url('hero.png') 72% center/cover!important}
.signup-art-copy h2{color:#f5f1e7!important}
.signup-art-copy em{color:var(--gold)!important}
.signup-art-copy p{color:#a5b8c9!important}
.signup-panel{background:linear-gradient(145deg,#172330,#0c141e)!important;border-left:1px solid var(--line-gold)!important}
.signup-panel h1,.signup-panel label{color:#eef4fa!important}
.signup-intro,.signup-field small,.signup-bottom,.signup-back{color:var(--muted)!important}
.signup-bottom{border-top:1px solid var(--line)!important}
.signup-bottom a,.signup-back:hover{color:var(--gold)!important}
.signup-message{border:1px solid #e3b97055!important;background:#e3b97012!important;color:var(--gold-strong)!important}
.signup-message[data-kind="error"]{color:#ffb3a2!important;border-color:#c0705f!important;background:#c0705f18!important}
.signup-message[data-kind="success"]{color:#8fe3b4!important;border-color:#4b9d76!important;background:#4b9d7618!important}
.login-box{
  background:linear-gradient(160deg,rgba(20,29,41,.95),rgba(11,17,25,.95))!important;
  border:1px solid var(--line-gold)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.7)!important;
  backdrop-filter:blur(10px);
}
.login-box h1{color:#f4f8fc!important}
.login-box p,.login-box label{color:#c3cfdb!important}
.login-box .gold{width:100%}

/* ---------- 14. TOPUP ---------- */
.topup-heading>a{color:var(--muted)!important}
.topup-heading .eyebrow{color:var(--gold)!important}
.topup-heading h1{color:#f4f8fc!important}
.topup-heading h1 span,.topup-heading>p:last-child{color:#b3c2d1!important}
.topup-card,.topup-help{
  border:1px solid var(--line-gold)!important;
  background:linear-gradient(135deg,#151f2b,#0c131c)!important;
  box-shadow:var(--shadow)!important;
}
.topup-card:before{background:linear-gradient(90deg,transparent,#e3b970,transparent)!important}
.topup-card>.eyebrow,.topup-help>.eyebrow{color:var(--gold)!important}
.topup-card h2,.topup-help h2,.topup-help h3{color:#f4f8fc!important}
.topup-card>p,.topup-help p{color:#b3c2d1!important}
.topup-status{background:#e3b97014!important;color:var(--gold-strong)!important;border:1px solid #e3b97045!important}
.topup-status:before{background:var(--gold)!important;box-shadow:0 0 10px #e3b97099!important}
.topup-details>div,.topup-help>div{border-bottom:1px solid var(--line)!important}
.topup-details span{color:var(--muted)!important}
.topup-details strong{color:#e9f0f7!important}
.topup-help b{border:1px solid #e3b97045!important;background:#e3b97010!important;color:var(--gold)!important}
.wc-packages legend{color:var(--muted)!important}
.wc-package>span{border:1px solid #ffffff18!important;background:#121b25!important;color:#cbd7e4!important}
.wc-package input:checked+span{border-color:#e3b970!important;background:#2b2416!important;box-shadow:0 0 18px #e3b97025!important;color:var(--gold-strong)!important}
.wc-package input:focus-visible+span{outline:2px solid #e3b970!important}
.transfer-message{border:1px solid #4b9d76!important;background:#4b9d7618!important;color:#8fe3b4!important}
.transfer-error{border:1px solid #c0705f!important;background:#c0705f18!important;color:#ffb3a2!important}
.transfer-fields label,.transfer-fields h3{color:#e9f0f7!important}
.transfer-fields small{color:var(--muted)!important}
.transfer-fields input[type=datetime-local],.transfer-fields input[type=file]{background:#0b131c!important;border:1px solid #2d3f52!important;color:var(--ink)!important}
.topup-page>div>span{color:#c3cfdb!important}

/* ---------- 15. DOWNLOAD ---------- */
.download-back{color:var(--muted)!important}
.download-back:hover{color:var(--gold)!important}
.download-heading .eyebrow,.download-heading em{color:var(--gold)!important}
.download-heading>p:last-child{color:#b3c2d1!important}
.client-card{border:1px solid var(--line-gold)!important;background:#101a23!important;box-shadow:0 26px 80px rgba(0,0,0,.7)!important}
.client-art{background:linear-gradient(180deg,#07101d20 25%,#050b14f2 100%),url('hero.png') 58% center/cover!important}
.client-art-caption>span{color:var(--gold)!important}
.client-art-caption p{color:#9db4c8!important}
.client-content{background:radial-gradient(ellipse at top right,#29405566,transparent 65%)!important}
.client-topline .eyebrow{color:var(--gold)!important}
.client-status{background:#e3b97014!important;color:var(--gold-strong)!important;border:1px solid #e3b97045!important}
.client-status i{background:var(--gold)!important}
.client-content h2{color:#f4f8fc!important}
.client-intro{color:#b3c2d1!important}
.client-details>div{border-bottom:1px solid var(--line)!important}
.client-details dt{color:var(--muted)!important}
.client-details dd{color:#e9f0f7!important}
.client-details dd span{color:var(--gold)!important}
.client-download{background:linear-gradient(120deg,#f0d49a,#b98f45)!important;border:1px solid #f6dda6!important;color:#1b1408!important;box-shadow:0 12px 30px rgba(0,0,0,.5)}
a.client-download:hover{filter:brightness(1.1);box-shadow:0 0 28px #e3b97055}
.client-note,.client-register{color:var(--muted)!important;border-color:var(--line)!important}
.client-register a{color:var(--gold)!important}
.client-register a:hover{color:var(--gold-strong)!important}

/* ---------- 16. MODAL / DIALOG ---------- */
dialog{
  color:#e9f0f7!important;
  background:linear-gradient(135deg,#18232e,#0b1118)!important;
  border:1px solid #e3b97070!important;
  box-shadow:0 24px 100px rgba(0,0,0,.75)!important;
}
dialog::backdrop{background:rgba(2,7,13,.78)!important;backdrop-filter:blur(6px)}
dialog p{color:#b6c4d3!important}
dialog h2{color:#f4f8fc!important}
dialog .close{color:var(--gold)!important}
dialog .close-action{background:linear-gradient(120deg,#f0d49a,#c09447)!important;border:1px solid #f2dca8!important;color:#1b1408!important}

/* ---------- 17. ARMOR-PLATE SURFACES (ความแข็งแกร่งของพื้นผิว) ---------- */
.stats,.live-stats,.featured,.shop-card,.shop-hero,.shop-wallet,.shop-notice,
.class-card,.classes-detail,.class-quick,.items-panel,.category,.shop-count,
.ladder-col,.ladder-tiers,.ladder-rules>div,.ladder-note,.ladder-howto,
.topup-card,.topup-help,.client-card,.login-box,.signup-panel,.account-panel,
.wing-product,.item-product,.wing-text-options,.item-text-options,.shop-toast{
  background-image:
    var(--rivet),
    linear-gradient(158deg,#1a2431,#080d13)!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -2px 0 rgba(0,0,0,.65),
    inset 0 0 0 3px #05080c,
    inset 0 0 0 4px #e3b97026,
    0 24px 58px rgba(0,0,0,.72)!important;
  border-radius:3px!important;
  border:1px solid #e3b97038!important;
}
/* แถบเหล็กด้านบน (header) — หนา มีหมุด ขอบทอง */
header{
  background-image:
    linear-gradient(90deg,rgba(227,185,112,.22),rgba(227,185,112,0) 30%,rgba(227,185,112,0) 70%,rgba(227,185,112,.22)),
    linear-gradient(180deg,#141c26 0%,#0a0f16 100%)!important;
  border-bottom:3px solid #e3b97070!important;
  box-shadow:inset 0 -1px 0 #00000090,0 16px 46px rgba(0,0,0,.75),0 2px 0 #000!important;
  backdrop-filter:blur(6px);
}
/* แผ่นเกราะท้ายหน้า (footer) */
body footer{
  background-image:
    radial-gradient(100% 120% at 50% 0%,rgba(192,57,28,.16),rgba(192,57,28,0) 52%),
    radial-gradient(ellipse at 50% 0%,#1e2937 0%,#0c141d 55%,#05080c 100%)!important;
  border-top:4px solid #e3b97090!important;
  box-shadow:inset 0 2px 0 #ffffff16,inset 0 4px 0 #00000080,0 -22px 52px rgba(0,0,0,.7)!important;
}
/* เส้นทองใต้หัวเรื่อง = คมดาบ */
.section-title h2::after{
  height:3px!important;width:88px!important;
  background:linear-gradient(90deg,#f6dda6,#c0391c88,#0000)!important;
  box-shadow:0 0 16px #e3b97070;
}
.ladder-eyebrow{text-shadow:0 0 14px #e3b97066}
/* หัวเรื่อง: ตัวหนา มีสันนูนแบบโลหะ */
h1,h2,.shop-hero h1,.shop-heading h1,.download-heading h1,.classes-hero-inner h1{
  font-weight:800!important;
  letter-spacing:.2px;
  text-shadow:0 2px 0 #000,0 4px 22px rgba(0,0,0,.95),0 0 34px #b98f4520!important;
}
/* ปุ่มหลัก: เหลี่ยมคม มีสันนูน */
.gold,.shop-buy,.shop-wallet-actions .primary,.shop-dialog-foot button.primary,.client-download{
  border-radius:2px!important;
  box-shadow:inset 0 1px 0 #fff8,inset 0 -3px 0 #00000055,0 4px 0 #00000080,0 14px 34px rgba(0,0,0,.6)!important;
  letter-spacing:.8px!important;
}
.gold:active,.shop-buy:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #fff6,0 0 0 #0000,0 6px 14px rgba(0,0,0,.6)!important}

/* ---------- 18. RESPONSIVE POLISH ---------- */
@media(max-width:700px){
  html body header nav a{font-size:13px!important;padding:0 12px!important;height:44px!important}
  .stats,.live-stats{box-shadow:var(--shadow-sm)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .shop-card:hover{transform:none}
}

/* ---------- 19. HALL OF FAME CARDS (เพิ่ม 2026-09-24) — ทำเป็นแผ่นเกราะ ---------- */
.rank-card{
  background-color:transparent!important;
  background-image:
    var(--rivet),
    linear-gradient(158deg,#1a2431,#080d13)!important;
  border:1px solid #e3b97038!important;
  border-radius:3px!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -2px 0 rgba(0,0,0,.65),
    inset 0 0 0 3px #05080c,
    inset 0 0 0 4px #e3b97026,
    0 20px 46px rgba(0,0,0,.62)!important;
  transition:border-color .25s,box-shadow .25s;
}
.rank-card:hover{border-color:#e3b97066!important}
.rank-card+.rank-card{border-left:1px solid #e3b97038!important}
.rank-card-eyebrow{
  color:#f6dda6!important;
  font-weight:800!important;
  letter-spacing:1px!important;
  text-shadow:0 2px 0 #000,0 4px 18px rgba(0,0,0,.9);
}
.rank-card-meta{color:var(--muted)!important}
@media(max-width:900px){
  .rank-card+.rank-card{border-left:1px solid #e3b97038!important}
}

/* ---------- 20. LIVE STATS — ตัวเลขทองไล่เฉดบนพื้นมืด ---------- */
html body .stats em,html body .stats strong em{
  background:linear-gradient(180deg,#fff6da 0%,#e3b970 55%,#8a6a2c 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:0 0 26px rgba(227,185,112,.55)!important;
}
.stats strong{text-shadow:0 2px 0 #000,0 4px 22px rgba(0,0,0,.8)}
.stats>div::after{box-shadow:0 0 14px rgba(227,185,112,.50)!important}

/* ---------- 21. MU-RETRO (effects-muretro.css — ไฟล์เพิ่มหลังธีมมืด) ---------- */
.countdown-mu{
  background-color:transparent!important;
  background-image:
    var(--rivet),
    linear-gradient(158deg,#1a2431,#080d13)!important;
  border:1px solid #e3b97038!important;
  border-radius:3px!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -2px 0 rgba(0,0,0,.65),
    inset 0 0 0 3px #05080c,
    inset 0 0 0 4px #e3b97026,
    0 24px 58px rgba(0,0,0,.72)!important;
}
.countdown-mu:hover{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.65),
    inset 0 0 0 3px #05080c,
    inset 0 0 0 4px #e3b97045,
    0 26px 62px rgba(0,0,0,.78)!important;
}
.cd-title{color:var(--gold)!important}
.cd-box{
  background:linear-gradient(180deg,#18222e,#0a1017)!important;
  border:1px solid #e3b97045!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 0 rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.5)!important;
}
.cd-num{color:#f4f8fc!important;text-shadow:0 2px 0 #000,0 4px 18px rgba(0,0,0,.8)}
.cd-label{color:var(--muted)!important}
.cd-sep{color:var(--gold)!important}
.countdown-mu.is-open .cd-title::after{color:#6fd79c!important}
.showcase-head p{color:var(--muted)!important}
.slide-card{background:#0b121a!important;border:1px solid #e3b97038!important;box-shadow:0 22px 50px rgba(0,0,0,.7)!important}

/* หมอก / ประกายไฟ — ลดความสว่างให้กลมกลืนกับพื้นมืด */
.fog-layer{filter:blur(7px) brightness(.60) saturate(1.15)}
.fog-layer.n2{filter:blur(11px) brightness(.72) saturate(1.15)}
.fog-layer.n3{filter:blur(15px) brightness(.56) saturate(1.15)}

/* พื้นฐานทึบแสง — กันขอบขาวตอน overscroll */
html body{background-color:#080d14!important}