/* Shared visual language: antique gold, lacquer red and warm charcoal. */
:root {
  --bg: #111110;
  --bg-2: #0b0b0b;
  --surface: #191918;
  --surface-2: #222220;
  --surface-3: #2b2a27;
  --text: #f2ede3;
  --text-2: #cbc5b9;
  --muted: #a19a8d;
  --dim: #8b8478;
  --gold: #c6a86c;
  --gold-2: #e5cf9f;
  --gold-3: #9c804c;
  --gold-ink: #211a10;
  --gold-soft: rgba(198, 168, 108, .10);
  --gold-line: rgba(198, 168, 108, .30);
  --red: #8e1b2b;
  --red-2: #6c1321;
  --red-3: #d87579;
  --red-soft: rgba(142, 27, 43, .16);
  --orange: #d2a775;
  --orange-soft: rgba(210, 167, 117, .12);
  --grad-gold: linear-gradient(120deg, #dec68f, #b99455);
  --grad-red: linear-gradient(120deg, #a42a3c, #751625);
  --grad-ember: linear-gradient(120deg, #341b1b, #1b1413);
  --paper: #f3eee3;
  --hd-h: 88px;
  --r-lg: 4px;
  --r: 3px;
  --r-sm: 2px;
  --serif: Georgia, "Times New Roman", serif;
}

body { background: var(--bg); }
::selection { color: #fff; background: #8e1b2b; }
a, button, input, select, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Navigation retains the existing hover, account and mobile menu controls. */
.hd__bar {
  padding-left: clamp(20px, 3vw, 52px);
  background: rgba(14, 14, 13, .96);
  border-bottom: 1px solid rgba(198, 168, 108, .22);
  box-shadow: none;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.hd__bar::before, .hd__bar::after { display: none; }
.hd.is-stuck .hd__bar { background: rgba(14, 14, 13, .98); }
/* ตราโลโก้ (ไม่มีตัวหนังสือชื่อเกมข้างโลโก้แล้ว — โลโก้เป็นชื่อเกมในตัว) ไฟล์ต้นฉบับ 108×66 */
.wordmark { position: relative; gap: 0; transition: scale .25s; }
.wordmark__emblem { display: block; width: 118px; height: 72px; flex: none; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55)); transition: filter .15s; }
.wordmark:hover { scale: 1.05; }
.hd .wordmark { margin-right: 24px; }
.foot .wordmark__emblem { width: 144px; height: 88px; }
/* โลโก้ขยับ: ลอยขึ้นลงช้า ๆ + แสงวาววิ่งผ่านเฉพาะบนตัวโลโก้ (mask ด้วยรูปโลโก้) + เรืองแสงแวบตอนฟ้าผ่า (.is-struck จาก js/app.js) */
@media (prefers-reduced-motion: no-preference) {
  .wordmark { animation: logo-float 6s ease-in-out infinite; }
  .wordmark::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9; mix-blend-mode: screen;
    background: linear-gradient(110deg, rgba(255, 244, 214, 0) 42%, rgba(255, 244, 214, .95) 50%, rgba(255, 244, 214, 0) 58%) no-repeat;
    background-size: 300% 100%; background-position: 85% 0;
    -webkit-mask: url("../img/brand/logo_01.png") center / contain no-repeat;
            mask: url("../img/brand/logo_01.png") center / contain no-repeat;
    animation: logo-shine 7s ease-in-out 1.2s infinite;
  }
  .foot .wordmark { animation-delay: -3s; }
  .foot .wordmark::after { animation-delay: 4.5s; }
}
@keyframes logo-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-1.2deg); } }
@keyframes logo-shine { 0% { background-position: 85% 0; } 20%, 100% { background-position: 15% 0; } }
.wordmark.is-struck .wordmark__emblem { filter: drop-shadow(0 0 8px rgba(225, 215, 255, 1)) drop-shadow(0 0 20px rgba(150, 120, 255, .9)) brightness(1.5); }
@media (prefers-reduced-motion: no-preference) {
  .wordmark.is-struck .wordmark__emblem { animation: logo-jolt .42s ease-out; }
}
@keyframes logo-jolt { 0% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(-2px, 1px) rotate(-2deg); } 45% { transform: translate(2px, -1px) rotate(1.5deg); } 70% { transform: translate(-1px, 0) rotate(-.6deg); } 100% { transform: translate(0, 0) rotate(0); } }
.hnav__link { padding-inline: clamp(11px, 1.25vw, 22px); gap: 8px; }
.hnav__th { font-size: 15px; font-weight: 400; }
.hnav__en { font-family: var(--font); font-size: 8px; letter-spacing: .15em; color: #9e937f; }
.hnav__item + .hnav__item::before { display: none; }
.hnav__link::before { background: linear-gradient(0deg, rgba(198, 168, 108, .065), transparent 65%); }
.hnav__link::after { left: 16px; right: 16px; bottom: -1px; width: auto; height: 2px; margin: 0; border: 0; background: var(--gold); transform: scaleX(0); }
.hnav__item:hover > .hnav__link::after,
.hnav__item:focus-within > .hnav__link::after,
.hnav__item.is-active > .hnav__link::after { transform: scaleX(1); }
.acct { padding-inline: 15px; }
.acct__btn { width: 38px; height: 38px; border-radius: 2px; border-color: rgba(198, 168, 108, .22); background: transparent; color: var(--gold); }
.hd__dl { gap: 12px; padding-inline: clamp(22px, 2.2vw, 36px); color: #241b0f; background: var(--grad-gold); box-shadow: none; }
.hd__dl .ico { font-size: 21px; }
.hd__dl b { font-size: 16px; font-weight: 500; }
.hd__dl small { font-family: var(--font); margin-top: 6px; font-size: 8px; letter-spacing: .17em; }
.drop { background: #171715; border-color: rgba(198, 168, 108, .28); box-shadow: 0 22px 48px rgba(0, 0, 0, .42); }
.drop__head { padding: 20px 18px; background: #22201c; border-color: rgba(198, 168, 108, .18); }
.drop__han { background: transparent; outline: 0; border-color: rgba(198, 168, 108, .3); }
.drop__desc { color: #b2aa9c; }
.drop a { padding-block: 10px; }
.drop a:hover, .drop a:focus-visible { background: rgba(198, 168, 108, .08); }
.hd__menu, .msheet__close { color: #e6cda0; background: #25191a; }
.msheet__head { background: #151513; }
.msheet__head::before { display: none; }
.msheet__panel { background: #111110; }
.msheet__title { font-size: 17px; }
.mgroup h3 { background: #28201d; border-color: rgba(198, 168, 108, .2); }
.mgroup h3 small { font-size: 8px; }
.seal, .seal--sm { border-radius: 2px; background: #791d2c; box-shadow: inset 0 0 0 1px rgba(198, 168, 108, .28); }

/* Quiet surfaces keep the artwork and readable content in focus. */
.btn, .btn--sm, .btn--lg, .icon-btn, .search__key, .search__btn,
.pager a, .pager span, .to-top, .toast,
.lightbox__close, .lightbox__frame, .strip-btn, .lsuggest, .lsuggest__x { border-radius: 2px; }
.btn--gold, .btn--red { box-shadow: none; }
.btn--red { border-color: #b1525b; }
.btn--gold { border-color: #d2b67e; }
.btn--ghost { border-color: rgba(198, 168, 108, .24); }
.pills { gap: 6px; padding: 0; }
.pill { height: 42px; padding-inline: 20px; font-size: 15px; border-radius: 2px; }
.pill + .pill::before, .pill.is-active::before, .pill.is-active::after { display: none; }
.pill.is-active { margin-inline: 0; color: #ead8b4; background: #3c2023; border-color: rgba(198, 168, 108, .44); box-shadow: none; }
.frame { outline: 0; }
.frame::before, .frame::after { display: none; }
.ph__en { font-family: var(--serif); font-weight: 400; letter-spacing: .08em; }
.ph__title { margin-top: 12px; font-weight: 500; }
.ph__han { opacity: .5; }
.pcard.is-pinned, .post.is-pinned { border-color: rgba(198, 168, 108, .27); background: #231b1b; }
.tag, .new, .bubble, .qa__q, .hanbadge { border-radius: 2px; }
.search__key option { color: var(--text); background: var(--surface-2); }

/* Footer styles live in app.css (ท้ายเว็บ). */

@media (min-width: 1000px) and (max-width: 1279px) {
  .hd__bar { padding-left: 22px; }
  .hd .wordmark { margin-right: 15px; }
  .hd .wordmark__emblem { width: 102px; height: 62px; }
  .hnav__link { padding-inline: 15px; }
  .hd__dl { padding-inline: 24px; }
  .acct { padding-inline: 12px; }
}
@media (max-width: 999px) {
  :root { --hd-h: 68px; }
  .hd__bar { padding-left: 20px; }
  .hd .wordmark { margin-right: 10px; }
  .hd .wordmark__emblem { width: 92px; height: 56px; }
  .hd__dl { padding-inline: 24px; }
  .hd__dl small { display: block; }
}
@media (max-width: 767px) {
  .hd__dl { width: 60px; padding: 0; }
  .hd__menu { width: 60px; }
  .hd .wordmark__emblem { width: 88px; height: 54px; }
  .foot .wordmark__emblem { width: 128px; height: 78px; }
  .pill { padding-inline: 16px; }
}
@media (max-width: 380px) {
  .hd__bar { padding-left: 12px; }
  .hd .wordmark { margin-right: 5px; }
  .hd .wordmark__emblem { width: 80px; height: 49px; }
  .hd__dl, .hd__menu { width: 52px; }
}