/* ============================================================
   Climax RO — Main Stylesheet
   ============================================================ */
:root{
  --gold:#d9a940;
  --gold-hi:#ffe9ad;
  --gold-lo:#8f6a1e;
  --crimson:#8e1f26;
  --crimson-deep:#4d0e12;
  --night:#0b0d16;
  --night-2:#10131f;
  --panel:#161a2a;
  --panel-2:#1c2136;
  --line:#2a3050;
  --ink:#e8e9f0;
  --dim:#9aa0b8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Prompt',sans-serif;background:var(--night);color:var(--ink);line-height:1.65;
  background-image:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(142,31,38,.14), transparent),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.006) 2px 4px)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 18px}
.en{font-family:'Cinzel',serif;letter-spacing:3px}

/* ══════════ แถบประกาศวิ่ง ══════════ */
.ticker{background:linear-gradient(90deg,var(--crimson-deep),var(--crimson) 50%,var(--crimson-deep));border-bottom:1px solid rgba(217,169,64,.4);overflow:hidden;white-space:nowrap;font-size:.82rem;padding:5px 0;color:#f5d9a0}
.ticker-inner{display:inline-block;padding-left:100%;animation:tick 28s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}
.ticker b{color:#fff}

/* ══════════ NAV ══════════ */
header.top{position:sticky;top:0;z-index:300;background:rgba(11,13,22,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.55)}
.top-in{display:flex;align-items:center;height:74px;gap:10px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand img{width:48px;height:48px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.brand .nm{font-weight:800;font-size:1.18rem;line-height:1.1}
.brand .nm i{font-style:normal;color:var(--gold)}
.brand .nm small{display:block;font-size:.58rem;font-weight:500;letter-spacing:2.5px;color:var(--dim)}
.mainmenu{display:flex;align-items:center}
.mainmenu>a{padding:8px 13px;text-align:center;line-height:1.2;font-size:.9rem;font-weight:600;color:#cdd2e4;border-radius:6px;transition:.18s}
.mainmenu>a small{display:block;font-size:.56rem;letter-spacing:2px;color:#6d7490;font-family:'Cinzel',serif;text-transform:uppercase;margin-top:2px}
.mainmenu>a:hover{color:var(--gold-hi)}
.mainmenu>a:hover small{color:var(--gold)}
.hbtns{display:flex;gap:8px;margin-left:8px}
.gbtn{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;
  padding:8px 20px;border-radius:6px;font-weight:700;font-size:.9rem;cursor:pointer;transition:.18s;overflow:hidden;
  border:1px solid;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.gbtn small{font-size:.55rem;letter-spacing:1.6px;font-family:'Cinzel',serif;opacity:.8;font-weight:600}
.gbtn::after{content:"";position:absolute;top:0;left:-80%;width:45%;height:100%;transform:skewX(-24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transition:left .45s}
.gbtn:hover::after{left:130%}
.gbtn:hover{transform:translateY(-1px)}
.gbtn.gold{background:linear-gradient(180deg,#f4cf7a 0%,#cf9a33 48%,#9c7120 52%,#c79437 100%);border-color:#ffe7ae;color:#33230a;box-shadow:0 3px 10px rgba(207,154,51,.4), inset 0 1px 0 rgba(255,255,255,.5)}
.gbtn.red{background:linear-gradient(180deg,#c04b52 0%,#8e1f26 48%,#5c1216 52%,#8e242b 100%);border-color:#d98a8f;color:#ffecec;box-shadow:0 3px 10px rgba(142,31,38,.45), inset 0 1px 0 rgba(255,255,255,.22)}
/* Discord = สีม่วง blurple (สีแบรนด์จริง) */
.gbtn.blue{background:linear-gradient(180deg,#8b9bf7 0%,#5865F2 48%,#4650d6 52%,#5865F2 100%);border-color:#b3bdff;color:#fff;box-shadow:0 3px 12px rgba(88,101,242,.5), inset 0 1px 0 rgba(255,255,255,.28)}
/* Facebook = สีน้ำเงินสว่าง */
.gbtn.fb{background:linear-gradient(180deg,#4a9bff 0%,#1877F2 48%,#0d5fd0 52%,#1877F2 100%);border-color:#9ec8ff;color:#fff;box-shadow:0 3px 12px rgba(24,119,242,.5), inset 0 1px 0 rgba(255,255,255,.28)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--gold);font-size:1.35rem;border-radius:6px;padding:4px 12px;cursor:pointer}

/* ══════════ HERO ══════════ */
.hero{position:relative;overflow:hidden;text-align:center;padding:64px 0 74px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 30%, rgba(142,31,38,.28), transparent 70%),
    radial-gradient(ellipse 45% 40% at 50% 38%, rgba(217,169,64,.16), transparent 70%),
    linear-gradient(180deg,#151022 0%,#0e1020 55%,var(--night) 100%)}
.rays{position:absolute;top:-22%;left:50%;width:1200px;height:1200px;transform:translateX(-50%);opacity:.16;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,215,130,.5) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 62%);
  mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 62%);
  animation:spin 90s linear infinite}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.dust{position:absolute;border-radius:50%;background:#ffd982;opacity:0;pointer-events:none;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:.85}88%{opacity:.5}100%{transform:translateY(-460px);opacity:0}}
.hero-logo{width:min(460px,84vw);margin:0 auto;position:relative;z-index:2;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.6)) drop-shadow(0 6px 30px rgba(217,169,64,.35))}
.hero-tag{position:relative;z-index:2;margin:10px auto 34px;color:#c9b98d;font-size:.98rem;letter-spacing:.4px}
.hero-tag::before,.hero-tag::after{content:"— ✦ —";color:var(--gold-lo);margin:0 12px;font-size:.8rem}
.hero-btns{position:relative;z-index:2;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-btns .gbtn{padding:15px 38px;font-size:1.22rem;border-radius:9px;border-width:2px}
.hero-btns .gbtn small{font-size:.62rem}
.server-strip{position:relative;z-index:2;margin:44px auto 0;max-width:680px;display:flex;border:1px solid rgba(217,169,64,.35);background:rgba(16,14,24,.72);border-radius:8px;overflow:hidden;backdrop-filter:blur(4px)}
.server-strip .cell{flex:1;padding:13px 6px;border-right:1px solid rgba(217,169,64,.18)}
.server-strip .cell:last-child{border-right:none}
.server-strip b{display:block;color:var(--gold);font-size:1.28rem;font-weight:800}
.server-strip span{font-size:.74rem;color:var(--dim)}
.online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#57d977;margin-right:6px;box-shadow:0 0 8px #57d977;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}

/* ══════════ กรอบหน้าต่างเกม ══════════ */
.gframe{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04)}
.gframe::before,.gframe::after,
.gframe .c3::before,.gframe .c3::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--gold);pointer-events:none}
.gframe::before{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:8px 0 0 0}
.gframe::after{top:-2px;right:-2px;border-left:none;border-bottom:none;border-radius:0 8px 0 0}
.gframe .c3::before{bottom:-2px;left:-2px;border-right:none;border-top:none;border-radius:0 0 0 8px}
.gframe .c3::after{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 8px 0}
.gtitle{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(217,169,64,.12),rgba(217,169,64,.03))}
.gtitle .gem{width:10px;height:10px;transform:rotate(45deg);background:linear-gradient(135deg,var(--gold-hi),var(--gold-lo));box-shadow:0 0 8px rgba(217,169,64,.7);flex-shrink:0}
.gtitle h2{font-size:1.06rem;font-weight:700;color:#f0e2bb}
.gtitle .sub-en{margin-left:auto;font-size:.62rem;color:#6d7490;letter-spacing:2.5px}

/* ══════════ เมนูลัด ══════════ */
.quick{margin-top:-30px;position:relative;z-index:5}
.quick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.q{position:relative;background:linear-gradient(180deg,#1e2338,#141827);border:1px solid var(--line);border-radius:8px;padding:16px 8px 13px;text-align:center;transition:.2s;overflow:hidden}
.q:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.5)}
.q:hover svg{filter:drop-shadow(0 0 6px rgba(217,169,64,.8))}
.q svg{width:30px;height:30px;margin:0 auto 8px;display:block;transition:.2s}
.q b{display:block;font-size:.84rem;font-weight:600;color:#dfe3f2}
.q small{font-size:.54rem;letter-spacing:1.8px;color:#6d7490;font-family:'Cinzel',serif;text-transform:uppercase}

/* ══════════ SECTION ══════════ */
section{padding:56px 0 0}
.sec-h{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.sec-h .orn{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(217,169,64,.55));position:relative}
.sec-h .orn.r{background:linear-gradient(90deg,rgba(217,169,64,.55),transparent)}
.sec-h .orn::after{content:"";position:absolute;right:-5px;top:-4px;width:9px;height:9px;transform:rotate(45deg);border:1.5px solid var(--gold)}
.sec-h .orn.r::after{right:auto;left:-5px}
.sec-h .tt{text-align:center}
.sec-h h2{font-size:1.5rem;font-weight:800;color:#f3e6c0;text-shadow:0 2px 12px rgba(217,169,64,.25)}
.sec-h .tt small{font-size:.66rem;letter-spacing:4px;color:#77683f;font-family:'Cinzel',serif;text-transform:uppercase}

/* ══════════ SLIDER ══════════ */
.slider{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.55)}
.slides{display:flex;transition:transform .55s cubic-bezier(.6,.05,.28,.91)}
.slide{min-width:100%;aspect-ratio:24/9;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.slide .txt{position:relative;z-index:2;padding:26px 34px;background:linear-gradient(0deg,rgba(5,6,12,.88),transparent);width:100%;text-align:left}
.slide h3{font-size:1.35rem;font-weight:700;color:#ffe9ad;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.slide p{font-size:.88rem;color:#c9cede;max-width:560px}
.slide{background-size:cover;background-position:center}
.sl-1{background-image:url('../image/banner-event.png?v=2')}
.sl-2{background-image:url('../image/banner-woe.png?v=2')}
.sl-3{background-image:url('../image/banner-mvp.png?v=2')}
.s-ctl{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:52px;border:1px solid rgba(217,169,64,.4);background:rgba(8,9,16,.62);color:var(--gold);font-size:1.25rem;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center}
.s-ctl:hover{background:var(--gold);color:#241a05}
.s-prev{left:0;border-radius:0 8px 8px 0;border-left:none}
.s-next{right:0;border-radius:8px 0 0 8px;border-right:none}
.s-dots{position:absolute;bottom:10px;right:18px;z-index:3;display:flex;gap:7px}
.s-dots i{width:22px;height:5px;background:rgba(255,255,255,.25);cursor:pointer;transition:.2s;border-radius:2px}
.s-dots i.on{background:var(--gold)}

/* ══════════ NEWS ══════════ */
.news-wrap{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.ntabs{display:flex;border-bottom:1px solid var(--line);background:rgba(217,169,64,.04)}
.ntab{flex:1;padding:11px 4px;text-align:center;font-family:inherit;font-size:.84rem;font-weight:600;color:var(--dim);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:.18s}
.ntab:hover{color:var(--gold-hi)}
.ntab.on{color:var(--gold);border-bottom-color:var(--gold);background:linear-gradient(0deg,rgba(217,169,64,.1),transparent)}
.nlist{padding:6px 0}
.nrow{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px dashed rgba(255,255,255,.06);transition:.15s}
.nrow:last-child{border-bottom:none}
.nrow:hover{background:rgba(217,169,64,.06)}
.nrow:hover h3{color:var(--gold-hi)}
.ntag{flex-shrink:0;width:74px;text-align:center;font-size:.66rem;font-weight:700;padding:3px 0;border-radius:3px;letter-spacing:.5px;border:1px solid}
.tg-up{color:#6fdc93;border-color:rgba(111,220,147,.45);background:rgba(111,220,147,.08)}
.tg-ev{color:#ffcf6f;border-color:rgba(255,207,111,.45);background:rgba(255,207,111,.08)}
.tg-pr{color:#ff8d8d;border-color:rgba(255,141,141,.45);background:rgba(255,141,141,.08)}
.tg-sy{color:#87aaff;border-color:rgba(135,170,255,.45);background:rgba(135,170,255,.08)}
.nrow h3{flex:1;font-size:.92rem;font-weight:500;color:#d4d8e6;transition:.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nrow .new{font-size:.6rem;color:#ff6b6b;font-weight:800;animation:blink 1.2s infinite}
.nrow time{flex-shrink:0;font-size:.76rem;color:#606880}
.nrow.hide{display:none}
/* side: server info */
.side-info{padding:4px 0}
.irow{display:flex;justify-content:space-between;padding:9px 18px;border-bottom:1px dashed rgba(255,255,255,.06);font-size:.88rem}
.irow:last-child{border-bottom:none}
.irow span{color:var(--dim)}
.irow b{color:var(--gold);font-weight:600}
.side-note{margin:10px 16px 14px;padding:9px 12px;border:1px dashed rgba(217,169,64,.3);border-radius:6px;font-size:.72rem;color:#8d8460;text-align:center}

/* ══════════ GUILD ══════════ */
.gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;padding:18px}
.gcard{text-align:center;padding:16px 8px 12px;background:linear-gradient(180deg,#191e31,#121524);border:1px solid var(--line);border-radius:8px;transition:.2s;position:relative}
.gcard::before{content:"";position:absolute;top:6px;left:6px;right:6px;height:1px;background:linear-gradient(90deg,transparent,rgba(217,169,64,.4),transparent)}
.gcard:hover{border-color:var(--gold);transform:translateY(-3px)}
.gcard .emb{width:52px;height:58px;margin:0 auto 8px;clip-path:polygon(50% 0,100% 18%,100% 72%,50% 100%,0 72%,0 18%);background:linear-gradient(160deg,#2a3050,#141827);display:flex;align-items:center;justify-content:center;position:relative}
.gcard .emb::after{content:"";position:absolute;inset:3px;clip-path:polygon(50% 0,100% 18%,100% 72%,50% 100%,0 72%,0 18%);background:linear-gradient(160deg,#1d2338,#0f1220)}
.gcard .emb svg{position:relative;z-index:1;width:24px;height:24px}
.gcard b{display:block;font-size:.82rem;font-weight:600}
.gcard small{font-size:.68rem;color:#606880}

/* ══════════ DONATE ══════════ */
/* ---------- แถบแพ็กเกจแบบเลื่อนแนวนอน ---------- */
.dwrap{position:relative;padding:18px 0}
.dgrid{display:flex;gap:14px;padding:4px 18px 14px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--gold-lo) transparent}
.dgrid::-webkit-scrollbar{height:8px}
.dgrid::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:4px}
.dgrid::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--gold-lo),var(--gold));border-radius:4px}
.dgrid>.dcard{flex:0 0 210px;scroll-snap-align:start}
/* ปุ่มเลื่อนซ้าย/ขวา */
.dnav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:38px;height:52px;
  border:1px solid rgba(217,169,64,.45);background:rgba(10,12,20,.85);color:var(--gold);
  font-size:1.3rem;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center}
.dnav:hover{background:var(--gold);color:#241a05}
.dnav.prev{left:-6px;border-radius:0 8px 8px 0}
.dnav.next{right:-6px;border-radius:8px 0 0 8px}
.dnav[disabled]{opacity:.25;cursor:default}
.dnav[disabled]:hover{background:rgba(10,12,20,.85);color:var(--gold)}
@media(max-width:600px){.dnav{display:none}.dgrid>.dcard{flex:0 0 78%}}
.dcard{position:relative;text-align:center;padding:22px 14px 18px;border-radius:8px;border:1px solid var(--line);background:linear-gradient(180deg,#1b2033,#131727);transition:.2s}
.dcard:hover{transform:translateY(-4px);border-color:var(--gold)}
.dcard h3{font-size:.92rem;font-weight:600;color:#cfd4e4}
.dcard .amt{font-size:1.65rem;font-weight:800;color:var(--gold);margin:4px 0 0;text-shadow:0 2px 10px rgba(217,169,64,.35)}
.dcard .bns{font-size:.76rem;color:#6fdc93;margin-bottom:14px}
.dcard .gbtn{width:100%;padding:9px 0;font-size:.88rem}
.dcard.hot{border-color:rgba(217,169,64,.65);background:linear-gradient(180deg,#241f2e,#161320)}
.dcard.hot::before{content:"แนะนำ";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#f4cf7a,#9c7120);color:#33230a;font-size:.66rem;font-weight:800;padding:3px 16px;border-radius:3px;letter-spacing:1px}
/* การ์ด Airtime — โทนน้ำเงินแยกจากการ์ด Cash สีทอง */
.dcard.air{border-color:rgba(111,154,255,.6);background:linear-gradient(180deg,#19203a,#121727)}
.dcard.air:hover{border-color:#6f9aff}
.dcard.air .amt{color:#9db9ff;text-shadow:0 2px 10px rgba(90,139,255,.35)}
.dcard.air .bns{color:#9db9ff}
.dcard.air::before{content:"เวลาเล่น";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,#6f9aff,#33549c);color:#fff;font-size:.66rem;font-weight:800;padding:3px 16px;border-radius:3px;letter-spacing:1px}
.paynote{text-align:center;font-size:.8rem;color:#606880;padding:0 18px 18px}

/* ══════════ FOOTER ══════════ */
footer{margin-top:64px;border-top:1px solid var(--line);background:linear-gradient(180deg,#0d0f19,#07080e);padding:40px 0 22px;position:relative}
footer::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:280px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px;margin-bottom:28px}
.fgrid h4{font-size:.92rem;color:#e6d9ac;margin-bottom:10px;font-weight:700}
.fgrid a{display:block;font-size:.84rem;color:#7b8199;margin-bottom:7px;transition:.15s}
.fgrid a:hover{color:var(--gold-hi)}
.fbrand{display:flex;gap:14px;align-items:flex-start}
.fbrand img{width:74px}
.fbrand p{font-size:.82rem;color:#7b8199;margin-top:4px}
.legal{text-align:center;font-size:.72rem;color:#4d5268;border-top:1px solid rgba(255,255,255,.05);padding-top:18px}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:1020px){.quick-grid{grid-template-columns:repeat(3,1fr)}.news-wrap{grid-template-columns:1fr}}
@media(max-width:760px){
  .mainmenu{display:none;position:absolute;top:74px;left:0;right:0;background:var(--night-2);flex-direction:column;align-items:stretch;padding:10px;border-bottom:1px solid var(--line)}
  .mainmenu.open{display:flex}
  .mainmenu>a{text-align:left;padding:12px 16px}
  .burger{display:block}
  .hbtns .gbtn:not(.gold){display:none}
  .slide{aspect-ratio:16/10}
  .server-strip{flex-wrap:wrap}.server-strip .cell{min-width:50%}
  .fgrid{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
}