/* 0) Fonts & Tokens */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Rye&display=swap');

:root{
  /* palette */
  --bg:#0b0b0b;
  --bg-2:#171616;
  --bg-3:#0e0d0d;
  --ink:#f3efe6;
  --ink-2:#e7dfcd;
  --muted:#cfc9b9;
  --line:#ffffff1a;
  --red:#c0392b;
  --red-2:#8b281d;
  --amber:#b88933;

  /* layout */
  --container: 1200px;
  --radius: 14px;
  --shadow: 0 10px 28px rgba(0,0,0,.55);
}

/* 1) Reset / Base / Utilities */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid #fff3;outline-offset:2px}

body{background:var(--bg);color:var(--ink);font-family:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:400}
.container{width:92%;max-width:min(var(--container),92vw);margin-inline:auto}
.display{font-family:'Rye',cursive;letter-spacing:.02em}

.hide{display:none !important}
.center{text-align:center}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}

/* 2) Buttons — single source of truth (no jump/no grow) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1rem;border-radius:12px;border:1px solid var(--line);
  background:#141313;color:var(--ink);font-weight:800;letter-spacing:.02em;
  text-decoration:none;user-select:none;
  /* กันกระตุก/ยืด */
  min-height:48px; line-height:1; white-space:nowrap; box-sizing:border-box;
  transform:none; transition:background-color .18s,border-color .18s,box-shadow .18s,color .18s;
  position:relative;                 /* สำคัญ: ให้ ripple วางแบบ absolute ได้ */
  overflow:hidden;          
}
.btn:hover{ box-shadow:0 12px 26px rgba(0,0,0,.55); transform:none; }
.btn:active{ transform:none; }
.btn .ripple{
  position:absolute; left:0; top:0;
  border-radius:50%; pointer-events:none;
  transform:scale(0); opacity:.35;
  background:#fff; mix-blend-mode:overlay;
  animation:btn-ripple .6s linear forwards;
}
@keyframes btn-ripple{
  to{ transform:scale(4); opacity:0; }
}
.btn > *{ flex:0 0 auto; }
.btn--solid{background:linear-gradient(180deg,#b02a1b,#7d1f16);border-color:transparent;color:#fff}
.btn--ghost{background:#141313;border-color:var(--line);color:#fff}
.btn--steam{background:linear-gradient(180deg,#2a475e,#1b2838);border-color:transparent;color:#fff}
.btn--discord{background:#23272a;border-color:transparent;color:#fff}
.btn--white-text{color:#fff !important;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn__icon{display:inline-block;width:18px;height:18px}

/* spinner helper (fixed size – won’t stretch button) */
.btn__spin{
  width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;flex:0 0 18px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* 3) HEADER — Announcement, Topbar, Drawer */
/* 3.1 Announcement bar */
.rd-ann{
  background:linear-gradient(180deg,#151414,#100f0f);
  border-bottom:1px solid var(--line); color:var(--ink);
  font-weight:700; font-size:.95rem;
}
.rd-ann__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.45rem 0;
}
.rd-ann__msg a{color:#ffd0d0;text-decoration:underline}
.rd-ann__close{
  border:1px solid var(--line); background:#0000; color:var(--ink);
  width:28px; height:28px; border-radius:8px;
}

/* Top-right social: icon-only, no border, bigger icons */
.rd-top-actions{display:flex;align-items:center;gap:.9rem}
.rd-top-social{display:flex;align-items:center;gap:.6rem}

/* ปุ่มเป็นทรงใส ไม่มีกรอบ */
.rd-top-social a{
  display:inline-grid;place-items:center;
  width:40px;height:40px;                 /* ใหญ่ขึ้น */
  border:none;background:transparent;
  border-radius:10px;                     /* ไว้สำหรับ focus ring */
  transition:transform .15s, filter .15s, background-color .15s;
  outline:none;
}
.rd-top-social a:hover{transform:translateY(-1px);filter:brightness(1.06)}
.rd-top-social a:active{transform:translateY(0)}
.rd-top-social a:focus-visible{
  box-shadow:0 0 0 2px #ffffff33;        /* วงแหวนโฟกัสเพื่อการเข้าถึง */
}

/* ไอคอนใหญ่ขึ้น */
.rd-top-social img{width:24px;height:24px;display:block;opacity:.92}
.rd-top-social a:hover img{opacity:1}

/* ซ่อนทั้งกลุ่มบนจอเล็ก (ให้ Drawer ดูสะอาด) */
@media (max-width:980px){ .rd-top-actions{display:none} }


/* 3.2 Topbar */
.topbar{position:sticky;top:0;z-index:70}
.rd-topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(14,13,13,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
:root{ --header-h: 64px; }
body{ padding-top: var(--header-h); }
.rd-topbar.is-stuck{box-shadow:0 10px 24px rgba(0,0,0,.35)}
.rd-topbar__inner{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:.55rem 0}
.rd-brand{display:inline-flex;align-items:center;gap:.6rem}
.rd-brand__badge{height:44px;width:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
.rd-brand__wordmark{height:22px;width:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}

/* nav (desktop) */
.rd-nav__list{display:flex;gap:.45rem;list-style:none;margin:0;padding:0;justify-content:center}
.rd-nav__link{position:relative;display:inline-block;padding:.64rem .8rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;opacity:.95}
.rd-nav__link::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.35rem;height:2px;background:transparent;transition:background .18s,height .18s,transform .18s}
.rd-nav__link:hover::after,.rd-nav__link.is-active::after{background:var(--red);height:3px}

/* topbar accent line */
.rd-topbar__accent{height:2px;overflow:hidden}
.rd-topbar__accent>span{display:block;height:100%;background:linear-gradient(90deg,#0000,var(--red),#0000);animation:redline 3s linear infinite}
@keyframes redline{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* CTAs */
.rd-cta .btn{margin-left:.5rem}

/* Burger */
.rd-burger{display:none;appearance:none;background:transparent;border:0;cursor:pointer;width:44px;height:44px;border-radius:10px;position:relative}
.rd-burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s,top .2s}
.rd-burger span:nth-child(1){top:14px}
.rd-burger span:nth-child(2){top:21px}
.rd-burger span:nth-child(3){top:28px}
html.nav-open .rd-burger span:nth-child(1){top:21px;transform:rotate(45deg)}
html.nav-open .rd-burger span:nth-child(2){opacity:0}
html.nav-open .rd-burger span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* 3.3 Drawer (mobile menu) */
.rd-drawer{position:fixed;inset:0;z-index:80;pointer-events:none}
.rd-drawer__scrim{position:absolute;inset:0;background:#000a;backdrop-filter:blur(1px);opacity:0;transition:opacity .2s}
.rd-drawer__panel{position:absolute;top:0;bottom:0;left:0;width:min(92vw,360px);background:linear-gradient(180deg,#141313,#0f0e0e);border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .25s;box-shadow:var(--shadow)}
.rd-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:.8rem .9rem;border-bottom:1px solid var(--line)}
.rd-drawer__nav{display:flex;flex-direction:column;padding:.4rem}
.rd-drawer__nav a{padding:.9rem .9rem;border-bottom:1px dashed #ffffff14;text-transform:uppercase;font-weight:800;letter-spacing:.06em}
.rd-drawer__nav a.is-active{background:#ffffff08}
.rd-drawer__cta{display:flex;flex-wrap:wrap;gap:.6rem;padding:1rem;border-top:1px solid var(--line)}
.rd-drawer__close{background:transparent;border:1px solid var(--line);color:var(--ink);width:32px;height:32px;border-radius:10px}

/* toggle open */
html.nav-open .rd-drawer{pointer-events:auto}
html.nav-open .rd-drawer__scrim{opacity:1}
html.nav-open .rd-drawer__panel{transform:translateX(0)}

@media (max-width:980px){
  .rd-burger{display:inline-block}
  .rd-topbar__inner{grid-template-columns:auto 1fr auto}
  .rd-cta{display:none}
  .rd-nav{display:none}
}

/* 4) HERO */
.hero{position:relative;min-height:92dvh;display:grid;place-items:center;isolation:isolate;overflow-x:clip}
.hero__bg{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero__slide{position:absolute;inset:0;background:#000 center/cover no-repeat;opacity:0;transform:scale(1.05);transition:opacity 1.2s ease, transform 9s linear;transform-origin:center}
.hero__slide.is-active{opacity:1;transform:scale(1)}
.hero__vignette{position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 70% at 50% 40%, rgba(0,0,0,.25), rgba(0,0,0,.9)),linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.85))}
.hero__inner{width:min(1140px,92%);text-align:center;padding:1.2rem}
.hero__logo{width:min(720px,84%);margin:0 auto .6rem;filter:drop-shadow(0 18px 38px rgba(0,0,0,.75))}
.hero__title{font-family:'Rye',cursive;font-size:clamp(40px,7.8vw,110px);line-height:.88;margin:.12em 0 .15em;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 14px 32px rgba(0,0,0,.6)}
.hero__title span{display:block}
.hero__subtitle{font-size:clamp(15px,2.2vw,20px);max-width:780px;margin:0 auto 1.1rem;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

/* 5) PROMOS */
.promos{padding:1.2rem 0;border-top:1px solid var(--line);border-bottom:1px solid #000}
.promos__grid{display:grid;gap:1rem;grid-template-columns:2fr 1fr 1fr}
.promo{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .2s}
.promo__media{aspect-ratio:16/9;background:#222 center/cover no-repeat}
.promo__body{padding:.95rem 1rem}
.promo__eyebrow{font:700 .8rem/1 'Roboto',sans-serif;color:#ffdede;letter-spacing:.12em}
.promo__title{font-family:'Rye',cursive;font-size:1.3rem;margin:.22rem 0 .25rem}
.promo p{opacity:.92;margin:.1rem 0}
.promo:hover{transform:translateY(-2px)}
@media (max-width:980px){.promos__grid{grid-template-columns:1fr 1fr}.promo:first-child{grid-column:span 2}}
@media (max-width:640px){.promos__grid{grid-template-columns:1fr}}

/* 6) HUB */
.hub{padding:2.2rem 0}
.hub__title{font-family:'Rye',cursive;font-size:clamp(26px,3.6vw,46px);margin-bottom:.2rem}
.hub__grid{display:grid;gap:1rem;grid-template-columns:repeat(6,minmax(0,1fr))}
.hub__card{border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--line);text-align:center;padding:1rem;transition:transform .2s, box-shadow .2s, border-color .2s}
.hub__card:hover{transform:translateY(-2px);border-color:#ffffff40;box-shadow:var(--shadow)}
.hub__svg{width:54px;height:54px;margin:.15rem auto .45rem;display:block;color:var(--ink);opacity:.92}
.hub__label{font-weight:800}
@media (max-width:1100px){.hub__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.hub__grid{grid-template-columns:repeat(2,1fr)}}

/* 7) FEED */
.feed{padding:2rem 0;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg-3),#111)}
.feed__head{display:flex;justify-content:space-between;align-items:end;margin-bottom:.8rem}
.feed__grid{display:grid;gap:1rem;grid-template-columns:2fr 1fr 1fr}
.article{border-radius:var(--radius);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow)}
.article__media{aspect-ratio:16/9;background:#222 center/cover no-repeat}
.article__body{padding:1rem}
.article__title{font-family:'Rye',cursive;font-size:1.18rem;margin:.25rem 0 .35rem}
@media (max-width:980px){.feed__grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.feed__grid{grid-template-columns:1fr}}

/* 8) FOOTER */
.rd-footer{
  position: relative;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-3), #0f0c0f);
  color: var(--ink);
  isolation: isolate;
}

.rd-footer::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg,#0000,var(--red),#0000);
  opacity:.75; pointer-events:none;
}

.rd-footer__grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.4rem;
  padding: 1.6rem 0;
}
.rd-copy{
  text-align:center;
  padding:1rem;
  border-top:1px solid var(--line);
  background:#0b0b0b;
  color:var(--muted);
  font-weight:700;
  /* ไม่ต้องมี .container เพื่อให้เต็มความกว้างทั้งแถบ */
}

.rd-footer h4{ 
  margin:.2rem 0 .6rem;
  font-family:'Rye',cursive;
  letter-spacing:.02em;
}
.rd-footer h5{
  margin:.2rem 0 .6rem;
  font-family:'Rye',cursive;
  font-size:1.15rem;
}

/* คำบรรยายและเมทาดาต้า */
.rd-foot-about p{ 
  color: var(--muted);
  margin:.35rem 0 .9rem;
  line-height:1.6;
}
.rd-foot-meta{
  list-style:none; margin:0; padding:0; color:#e7dfcd; opacity:.95;
}
.rd-foot-meta li{ margin:.28rem 0 }

/* ลิงก์รายการแบบมีหัวลูกศร */
.rd-foot-links{ list-style:none; margin:0; padding:0 }
.rd-foot-links li{ margin:.3rem 0 }
.rd-foot-links a{
  position:relative; padding-left:1rem;
  color:var(--ink); opacity:.95; text-decoration:none;
  transition:opacity .15s ease, transform .15s ease;
}
.rd-foot-links a::before{
  content:"›"; position:absolute; left:0; top:0; color:var(--red); opacity:.95;
}
.rd-foot-links a:hover{ opacity:1; transform:translateX(2px) }

/* ปุ่มโซเชียลทรง pill */
.rd-foot-social { display: flex; gap: .75rem; flex-wrap: wrap; }
.rd-social-link { display: inline-flex; align-items: center; gap: .4rem; }
.rd-social-link img { display: inline-block; }
.rd-social-link:hover{ filter:brightness(1.06); transform:translateY(-1px) }

/* แถวลิขสิทธิ์ล่าง + ลิงก์คุกกี้ */
.rd-copy{
  text-align:center;
  padding:1rem;
  border-top:1px solid var(--line);
  background:#0b0b0b;
  color:var(--muted);
  font-weight:700;
}
.cookie-open-link, .cookie-policy{
  color:#cfe6ff; text-decoration:underline; font-weight:800;
}
.cookie-open-link{ background:transparent; border:0; padding:0; cursor:pointer }

/* responsive */
@media (max-width:960px){
  .rd-footer__grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:560px){
  .rd-footer__grid{ grid-template-columns:1fr }
}
.rd-foot-badge{
  width:40px; height:40px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0d0c0c;
  display:block;
  box-shadow:0 8px 18px rgba(0,0,0,.45);
  margin:.1rem 0 .5rem; 
  object-fit:cover;
}


/* 9) Sticky Bottom Bar*/
.sticky-bottom{
  position:fixed;left:0;right:0;bottom:0;
  z-index:60;background:linear-gradient(180deg,#0e0e0e,#0b0b0b);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.sticky-bottom__in{
  max-width:min(var(--container),92vw);margin:0 auto;
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:10px 0;
}
.sticky-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#141414;border:1px solid var(--line);border-radius:999px;
  padding:.35rem .7rem;font-weight:800
}
/* กันโดนทับ: เผื่อพื้นที่ให้เนื้อหาหลัก */
body.has-sticky{padding-bottom:72px}
@supports(padding:max(0px)){
  body.has-sticky{padding-bottom:max(72px, env(safe-area-inset-bottom))}
}

/* 10) Modal */
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:90}
.modal.hide{display:none}
.modal__overlay{position:absolute;inset:0;background:#0008;backdrop-filter:blur(2px)}
.modal__content{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;z-index:1;max-width:420px;width:92%;text-align:center;box-shadow:var(--shadow)}
.modal__close{position:absolute;top:.4rem;right:.6rem;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink)}

/* 11) Cookie (banner + modal) */
.cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 90;
}
.cookie-banner__inner{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(24,27,31,.9);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.cookie-banner__icon{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:linear-gradient(180deg,#243447,#1b2838);border:1px solid #ffffff20}
.cookie-banner__title{margin:.1rem 0 .25rem;font-weight:900;color:#fff;font-size:1.05rem}
.cookie-banner__desc{margin:0;color:#e7dfcd;line-height:1.5}
.cookie-banner__actions{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
@media (max-width:640px){
  .cookie-banner__actions{width:100%;justify-content:flex-end}
  .cookie-banner__icon{width:40px;height:40px}
}
.cookie-open-link{
  background:none;border:0;padding:0;cursor:pointer;
  color:#cfe6ff;text-decoration:underline;
}
.cookie-open-link:hover{opacity:.9}
.cookie-modal{position:fixed;inset:0;z-index:120;display:block}
.cookie-modal[hidden]{display:none}
.cookie-modal__overlay{position:absolute;inset:0;background:#000a;backdrop-filter:blur(2px)}
.cookie-modal__panel{position:relative;z-index:1;max-width:720px;width:92%;margin:6vh auto 0;background:linear-gradient(180deg,#171a1f,#111214);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 48px rgba(0,0,0,.6);padding:16px 18px}
.cookie-modal__close{position:absolute;top:.6rem;right:.7rem;width:36px;height:36px;border-radius:10px;border:1px solid #ffffff22;background:#0000;color:#fff}
.cookie-desc{color:var(--muted);margin:.25rem 0 1rem}
.cookie-card{border:1px solid var(--line);border-radius:12px;background:#141518;padding:.9rem .95rem;margin:.7rem 0}
.cookie-card__head{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem}
.cookie-card__head strong{font-weight:900;color:#fff}
.cookie-chip{margin-left:auto;background:linear-gradient(180deg,#2a475e,#1b2838);border:1px solid #ffffff24;border-radius:999px;padding:.2rem .6rem;font-size:.8rem;color:#cfe6ff}
.cookie-card__desc{margin:.1rem 0 .3rem;color:var(--muted)}
.cookie-choices{display:flex;gap:1rem;flex-wrap:wrap}
.radio{display:inline-flex;align-items:center;gap:.45rem}
.radio input{appearance:none;width:18px;height:18px;border-radius:50%;border:2px solid #7f8ca1;position:relative}
.radio input:checked{border-color:#2f76ff}
.radio input:checked::after{content:"";position:absolute;inset:3px;background:#2f76ff;border-radius:50%}
.radio span{color:#eae7dc}
.cookie-actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end;margin-top:.6rem}
.cookie-actions .btn{transform:none}
.cookie-actions .btn:active{transform:none}
.cookie-noscript{background:#2a0000;color:#ffb4b4;border:1px solid #5a0000;padding:.6rem .8rem;text-align:center}

/* 12) Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}