/* ═══════════════════════════════════════════════════════════════
   Combo24HR — สไตล์กลางของเว็บชุมชน
   โทนเดียวกับเว็บแอป: พื้นครีม การ์ดขาวมุมมน accent teal
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cream:   #fdf6e6;
  --cream-2: #f7edd8;
  --card:    #ffffff;
  --ink:     #2b2622;
  --ink-2:   #5c554c;
  --muted:   #8b8378;
  --line:    #ece0c8;
  --line-2:  #f4ebd8;

  --teal:    #17808c;
  --teal-d:  #0f6772;
  --teal-l:  #37b6c6;
  --teal-bg: #e6f4f5;

  --gold:    #f2b441;
  --gold-d:  #b47c10;
  --red:     #d9534f;
  --red-bg:  #fdeceb;
  --green:   #3d9e63;
  --green-bg:#e8f5ec;

  --r:    14px;
  --r-sm: 10px;
  --pill: 999px;
  --sh:   0 1px 2px rgba(80,60,20,.05), 0 2px 10px rgba(80,60,20,.05);
  --sh-2: 0 4px 20px rgba(80,60,20,.10);

  --sans: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --head: "Kanit", var(--sans);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  /* ภาษาไทยตัวเล็กมากถ้าไม่ขยาย — 15px คือขั้นต่ำที่อ่านสบายบนมือถือ */
}

img { max-width: 100%; height: auto; }
a { color: var(--teal-d); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; line-height: 1.35; margin: 0 0 .5em; }
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 18px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--teal); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.hide-sm { display: inline; }
.mt { margin-top: 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }

/* ═══════════════ แถบเมนูบน ═══════════════ */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  max-width: 1120px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 14px; height: 58px;
}

.brand { font-family: var(--head); font-weight: 700; font-size: 21px; letter-spacing: -.4px; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-c { color: var(--ink); }
.brand-h { color: var(--teal); }

.nav-links { display: flex; gap: 2px; flex: 1; min-width: 0; }
.nav-links a {
  font-family: var(--head); font-weight: 500; font-size: 15px;
  color: var(--ink-2); padding: 7px 13px; border-radius: var(--pill); white-space: nowrap;
}
.nav-links a:hover { background: var(--cream-2); text-decoration: none; }
.nav-links a.on { background: var(--teal); color: #fff; }

.nav-me { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.nav-toggle { display: none; }

.bell { position: relative; font-size: 19px; padding: 4px 6px; line-height: 1; text-decoration: none; }
.bell .dot {
  position: absolute; top: -2px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--red); color: #fff; border-radius: var(--pill);
  font-size: 10px; font-style: normal; font-weight: 700; line-height: 17px; text-align: center;
}

/* เมนูผู้ใช้ */
.menu { position: relative; }
.menu-btn {
  display: flex; align-items: center; gap: 7px;
  background: var(--cream-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--pill); padding: 4px 12px 4px 4px; cursor: pointer;
  font-family: var(--head); font-weight: 500; font-size: 14px;
}
.menu-btn:hover { background: var(--line-2); }
.menu-pop {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-2); padding: 6px; z-index: 50;
}
.menu.open .menu-pop { display: block; }
.menu-pop a, .menu-pop button {
  display: block; width: 100%; text-align: right; padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--ink); background: none; border: 0; font: inherit; cursor: pointer;
}
.menu-pop a:hover, .menu-pop button:hover { background: var(--cream-2); text-decoration: none; }
.menu-pop .staff { color: var(--teal-d); font-weight: 600; }
.menu-pop form { margin: 0; border-top: 1px solid var(--line-2); padding-top: 4px; margin-top: 4px; }
.menu-pop form button { color: var(--red); }

/* ═══════════════ โครงหน้า ═══════════════ */

.wrap { max-width: 880px; margin: 0 auto; padding: 22px 16px 60px; min-height: 62vh; }
.wrap.wide { max-width: 1120px; }

.phead { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.phead h1 { margin: 0; }
.phead .sub { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.phead-act { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ═══════════════ การ์ด ═══════════════ */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh); padding: 18px;
}
.card + .card { margin-top: 14px; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.sec { margin-bottom: 28px; }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sec-head h2 { margin: 0; font-size: 19px; }
.sec-head .more { margin-left: auto; font-size: 14px; color: var(--muted); }
.sec-head .more:hover { color: var(--teal-d); }

/* กล่องรายการแบบเว็บบอร์ด: การ์ดใหญ่ใบเดียว แถวคั่นด้วยเส้น */
.list {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh); overflow: hidden;
}
.list > * + * { border-top: 1px solid var(--line-2); }

/* ⭐ ชื่อคลาสต้องไม่ใช่ .empty เฉย ๆ — จะไปชนกับ .slot.empty (ช่องคอมโบที่ยังว่าง)
   แล้ว padding 44px ของกล่องนี้จะไปยืดช่องคอมโบให้สูงผิดรูป */
.emptybox {
  background: var(--card); border: 1px dashed var(--line);
  border-radius: var(--r); padding: 44px 20px; text-align: center; color: var(--muted);
}
.emptybox b { display: block; color: var(--ink); font-family: var(--head); font-size: 17px; margin-bottom: 4px; }
.emptybox p { margin: 0; font-size: 14px; }

/* ═══════════════ ปุ่ม ═══════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--teal); color: #fff; border: 1px solid var(--teal);
  border-radius: var(--pill); padding: 9px 20px; cursor: pointer;
  font-family: var(--head); font-weight: 600; font-size: 15px; line-height: 1.2;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--teal-d); border-color: var(--teal-d); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.off { opacity: .5; pointer-events: none; }

.btn.sm  { padding: 6px 15px; font-size: 14px; }
.btn.lg  { padding: 12px 30px; font-size: 17px; }
.btn.block { display: flex; width: 100%; }

.btn.ghost { background: var(--card); color: var(--teal-d); border-color: var(--line); }
.btn.ghost:hover { background: var(--cream-2); color: var(--teal-d); }

.btn.gold { background: var(--gold); border-color: var(--gold); color: #4a3406; }
.btn.gold:hover { background: #e5a52f; border-color: #e5a52f; color: #4a3406; }

.btn.danger { background: var(--red); border-color: var(--red); }
.btn.danger:hover { background: #c1443f; border-color: #c1443f; }

.btn.tiny { padding: 3px 11px; font-size: 13px; font-weight: 500; }

/* ═══════════════ ชิปตัวกรอง ═══════════════ */

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.chip {
  background: var(--card); border: 1px solid var(--line); color: var(--ink-2);
  border-radius: var(--pill); padding: 5px 15px;
  font-family: var(--head); font-weight: 500; font-size: 14px; white-space: nowrap;
}
.chip:hover { background: var(--cream-2); text-decoration: none; }
.chip.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.chip.on:hover { background: var(--teal-d); }

.chips.sub .chip { padding: 3px 12px; font-size: 13px; }
.chips.gold .chip.on { background: var(--gold-d); border-color: var(--gold-d); }

.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar .spacer { margin-left: auto; }
.toolbar .count { color: var(--muted); font-size: 13px; }

/* ═══════════════ ฟอร์ม ═══════════════ */

.field { margin-bottom: 15px; }
.field > label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.field .hint { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.field .err  { font-size: 12.5px; color: var(--red); margin: 4px 0 0; }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=url], select, textarea {
  width: 100%; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 13px; font-family: inherit; font-size: 15px; line-height: 1.5;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--teal-l); outline-offset: -1px; border-color: var(--teal-l);
}
input.bad, textarea.bad { border-color: var(--red); }
textarea { resize: vertical; min-height: 120px; }
select { appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b8378' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
select.mini, input.mini { width: auto; padding: 6px 30px 6px 12px; font-size: 14px; border-radius: var(--pill); }

.searchbar { position: relative; margin-bottom: 12px; }
.searchbar input { padding-left: 38px; border-radius: var(--pill); }
.searchbar::before {
  content: "🔍"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 14px; opacity: .55; pointer-events: none;
}

.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.form-actions .spacer { margin-left: auto; }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; }
.check input { width: auto; margin-top: 3px; flex: none; }

/* ═══════════════ ข้อความแจ้ง ═══════════════ */

.flash, .note {
  border-radius: var(--r-sm); padding: 11px 15px; margin-bottom: 14px; font-size: 14px;
  border: 1px solid var(--line); background: var(--card);
}
.flash.ok,   .note.ok   { background: var(--green-bg); border-color: #c4e3ce; color: #23663f; }
.flash.err,  .note.err  { background: var(--red-bg);   border-color: #f4c9c7; color: #8f2b28; }
.flash.warn, .note.warn { background: #fdf3dd;         border-color: #f0dcae; color: #7a5610; }
.flash.info, .note.info { background: var(--teal-bg);  border-color: #bfe0e3; color: #0d5b64; }

/* ═══════════════ ป้ายชื่อผู้ใช้ ═══════════════ */

.uchip { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13.5px; }
.uchip:hover { text-decoration: none; color: var(--teal-d); }
.uav { border-radius: 50%; background: var(--cream-2); object-fit: cover; flex: none; }
.uav.ghost { display: inline-block; width: 24px; height: 24px; }
.unm { font-weight: 600; }

.ubadge {
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--pill);
  font-family: var(--head); line-height: 1.6;
}
.ubadge.admin { background: var(--red); color: #fff; }
.ubadge.mod   { background: var(--teal); color: #fff; }

/* ═══════════════ แถวโพสต์ในบอร์ด ═══════════════ */

.prow { display: block; padding: 13px 18px; color: inherit; }
.prow:hover { background: var(--cream-2); text-decoration: none; }
.prow.pin { background: #fffaf0; box-shadow: inset 3px 0 0 var(--gold); }

.prow-top { display: flex; align-items: baseline; gap: 8px; }
.prow-tag {
  font-size: 11px; font-weight: 700; font-family: var(--head);
  background: var(--gold); color: #4a3406; border-radius: var(--pill); padding: 1px 9px; flex: none;
}
.prow-tag.board { background: var(--teal-bg); color: var(--teal-d); }
.prow h3 {
  margin: 0; font-size: 15.5px; font-weight: 600; font-family: var(--sans);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.prow .cc { color: var(--teal); font-weight: 700; font-size: 13px; flex: none; }
.prow-meta {
  display: flex; align-items: center; gap: 12px; margin-top: 4px;
  color: var(--muted); font-size: 12.5px; flex-wrap: wrap;
}
.prow-meta .stats { margin-left: auto; display: flex; gap: 11px; }
.prow .thumb {
  float: left; width: 56px; height: 56px; border-radius: var(--r-sm);
  object-fit: cover; margin: 2px 12px 0 0; background: var(--cream-2);
}

/* ═══════════════ การ์ดคอมโบ ═══════════════ */

.combo {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh); padding: 12px 14px; margin-bottom: 12px; color: inherit;
}
.combo:hover { border-color: var(--gold); text-decoration: none; box-shadow: var(--sh-2); }

.combo-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.combo-name { font-family: var(--head); font-weight: 600; font-size: 16px; }
.combo-goal {
  font-size: 11.5px; font-family: var(--head); font-weight: 500;
  background: var(--teal-bg); color: var(--teal-d); border-radius: var(--pill); padding: 1px 10px;
}
.combo-ep { font-size: 11.5px; background: var(--cream-2); color: var(--ink-2);
  border-radius: var(--pill); padding: 1px 10px; font-family: var(--head); }

.slots { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 8px; flex-wrap: wrap; }
.slots .sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 6px; }
.slots .plus { align-self: center; color: var(--muted); font-size: 14px; }

.slot { position: relative; width: 62px; text-align: center; flex: none; }
.slot .box {
  position: relative; width: 62px; height: 62px; border-radius: 12px;
  background: var(--cream-2) center/contain no-repeat; display: flex; align-items: center; justify-content: center;
}
.slot.round .box { border-radius: 50%; }
.slot .box img { width: 84%; height: 84%; object-fit: contain; }
.slot .nm {
  display: block; font-size: 10.5px; line-height: 1.3; margin-top: 3px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot .lv {
  position: absolute; right: -2px; bottom: 20px; z-index: 2;
  background: var(--gold); color: #4a3406; border: 1.5px solid #fff;
  border-radius: var(--pill); font-size: 10px; font-weight: 700; padding: 0 5px; line-height: 15px;
}
.slot .tag {
  position: absolute; left: 50%; transform: translateX(-50%); top: -6px;
  background: var(--ink-2); color: #fff; font-size: 9.5px; border-radius: var(--pill); padding: 0 7px;
}
.slot.empty .box { border: 2px dashed var(--line); background: none; color: var(--line); font-size: 20px; }

.combo-foot { display: flex; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.combo-nums { margin-left: auto; text-align: right; line-height: 1.35; }
.combo-nums b { font-family: var(--head); font-size: 17px; }
.combo-nums span { color: var(--muted); font-size: 11.5px; margin-right: 4px; }
.combo-stats { display: flex; gap: 11px; color: var(--muted); font-size: 12.5px; }

/* ⭐ ไอคอนบูสต์ต้องใหญ่พอให้ดูออกว่าอันไหนคืออันไหน — 24px เล็กเกินไป มองไม่ออกบนมือถือ */
.boost-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.boost-row img { width: 40px; height: 40px; object-fit: contain; }

/* ═══ Power+ ═══
   Power+ ทำงานแม้ไม่ได้เอาคุกกี้ตัวนั้นลงวิ่ง — เซ็ตคอมโบจึงระบุว่าตัวไหน "ต้องเปิด/ต้องปิด"
   สามสถานะ: ✓ เปิด (เขียว) · ✕ ปิด (แดง) · ? ไม่ระบุ (เหลือง) */
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 6px; }

.pp-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 2px solid var(--line); border-radius: 12px; padding: 12px 5px 7px;
  background: var(--card); font: inherit; color: inherit; text-align: center;
}
button.pp-card { cursor: pointer; }
button.pp-card:hover { border-color: var(--gold); }
.pp-card img { width: 44px; height: 44px; object-fit: contain; }
.pp-card .pp-nm {
  font-size: 11px; line-height: 1.3; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.pp-card .pp-mark {
  position: absolute; top: -1px; right: -1px;
  width: 21px; height: 21px; border-radius: 0 10px 0 10px;
  font-size: 12px; font-weight: 700; line-height: 21px; color: #fff;
}
.pp-card.on  { border-color: var(--green); background: var(--green-bg); }
.pp-card.on  .pp-mark { background: var(--green); }
.pp-card.off { border-color: var(--red); background: var(--red-bg); }
.pp-card.off .pp-mark { background: var(--red); }
.pp-card.off img { filter: grayscale(1); opacity: .55; }
.pp-card.any { border-color: #f0cf9d; background: #fff8ec; }
.pp-card.any .pp-mark { background: var(--gold); color: #4a3406; }

/* ป้าย ⚡ มุมรูปในกระดานเลือกคุกกี้ — บอกว่าตัวนี้มี Power+ */
.pk-it .pp {
  position: absolute; left: 2px; top: 2px; z-index: 2;
  background: var(--gold); color: #4a3406; border: 1.5px solid #fff;
  border-radius: 999px; font-size: 10px; line-height: 16px; padding: 0 5px; font-weight: 700;
}

/* ในการ์ดคอมโบ: แถวบูสต์กับผลที่เล็งไว้อยู่บรรทัดเดียวกันถ้าที่พอ */
.boost-line { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; }

/* ผลที่เล็งไว้จากบูสต์สุ่ม — ไอคอนซ้ำกันหมด เลยโชว์เป็นชื่อ */
.rnd-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.rnd-chip {
  background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--pill);
  padding: 2px 11px; font-size: 12.5px; color: var(--ink-2);
}

/* ═══════════════ เนื้อหาที่ผู้ใช้เขียน ═══════════════ */

.prose { line-height: 1.8; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 .9em; }
.prose h3 { font-size: 18px; margin: 1.4em 0 .5em; }
.prose h4 { font-size: 16px; margin: 1.3em 0 .4em; }
.prose ul, .prose ol { margin: 0 0 .9em; padding-right: 0; padding-left: 1.4em; }
.prose li { margin-bottom: .25em; }
.prose blockquote {
  margin: 0 0 .9em; padding: 8px 14px; border-left: 3px solid var(--teal-l);
  background: var(--teal-bg); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--ink-2);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  background: var(--cream-2); border: 1px solid var(--line-2); border-radius: 5px;
  padding: 1px 5px; font-size: .9em; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.prose pre {
  background: #2f2b26; color: #f5efe3; border-radius: var(--r-sm);
  padding: 13px 15px; overflow-x: auto; font-size: 13px; line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
.prose .md-img { margin: 1em 0; text-align: center; }
.prose .md-img img { border-radius: var(--r-sm); box-shadow: var(--sh); }

/* ═══════════════ ปุ่มไลก์ / บุ๊กมาร์ก ═══════════════ */

.react { display: flex; gap: 8px; align-items: center; }
.rb {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink-2);
  border-radius: var(--pill); padding: 5px 14px; cursor: pointer;
  font-family: inherit; font-size: 14px;
}
.rb:hover { background: var(--cream-2); }
.rb .ic { font-size: 15px; line-height: 1; }
.rb.like.on { background: var(--red-bg); border-color: #f0c0be; color: var(--red); }
.rb.mark.on { background: #fdf3dd; border-color: #f0dcae; color: var(--gold-d); }
.rb.report { padding: 5px 11px; color: var(--muted); }
.rb.busy { opacity: .5; pointer-events: none; }

/* ═══════════════ คอมเมนต์ ═══════════════ */

.cmt { display: flex; gap: 11px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.cmt:first-of-type { border-top: 0; }
.cmt.reply { margin-right: 34px; }
.cmt .body { flex: 1; min-width: 0; }
.cmt .head { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; flex-wrap: wrap; }
.cmt .head time { color: var(--muted); font-size: 12.5px; }
.cmt .acts { display: flex; gap: 10px; margin-top: 5px; font-size: 12.5px; }
.cmt .acts button {
  background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; font: inherit;
}
.cmt .acts button:hover { color: var(--teal-d); text-decoration: underline; }
.cmt.gone .prose { color: var(--muted); font-style: italic; }

/* ═══════════════ เปลี่ยนหน้า ═══════════════ */

.pager { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 24px; flex-wrap: wrap; }
.pager a, .pager b, .pager .gap {
  min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 11px; border-radius: var(--pill); font-size: 14px; font-family: var(--head); font-weight: 500;
}
.pager a { background: var(--card); border: 1px solid var(--line); color: var(--ink-2); }
.pager a:hover { background: var(--cream-2); text-decoration: none; }
.pager b { background: var(--teal); color: #fff; }
.pager .gap { color: var(--muted); }

/* ═══════════════ ท้ายเว็บ ═══════════════ */

.foot { border-top: 1px solid var(--line); background: var(--cream-2); margin-top: 40px; }
.foot-in { max-width: 1120px; margin: 0 auto; padding: 26px 16px 34px; }
.foot-brand b { font-family: var(--head); font-size: 18px; }
.foot-brand p { margin: 2px 0 14px; color: var(--muted); font-size: 13.5px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
.foot-links a { color: var(--ink-2); font-size: 14px; }
.foot-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; }

/* ═══════════════ เลือกของด้วยรูป (หน้าเพิ่ม/แก้ไขคอมโบ) ═══════════════
   ชื่อของในเกมเป็นอังกฤษล้วน คนไทยจำไม่ได้ว่าตัวไหนคือตัวไหน
   ทุกตัวเลือกจึงเป็นรูป — ชื่อเป็นแค่ตัวกำกับใต้รูป                        */

.pickline { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }

.pick { text-align: center; }
.pick .picklab { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pickbtn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit;
  border-radius: 14px;
}
.pickbtn:hover .box { box-shadow: 0 0 0 2px var(--gold) !important; }
.pickbtn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.pickbtn .slot, .pickbtn .slot .box { width: 78px; }
.pickbtn .slot .box { height: 78px; }
.pickbtn .slot.empty .box { border-color: var(--gold); color: var(--gold-d); }
.pickbtn .slot .nm { max-width: 78px; }

/* กระดานรูปให้เลือก */
.pk-back {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(40,32,20,.45); padding: 0;
}
.pk-panel {
  background: var(--cream); width: 100%; max-width: 720px; max-height: 92vh;
  border-radius: var(--r) var(--r) 0 0; box-shadow: var(--sh-2);
  display: flex; flex-direction: column; overflow: hidden;
}
.pk-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--teal); color: #fff;
}
.pk-head b { font-family: var(--head); font-weight: 600; font-size: 16px; }
.pk-head .x {
  margin-left: auto; background: rgba(255,255,255,.2); border: 0; color: #fff;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1;
}
.pk-head .x:hover { background: rgba(255,255,255,.34); }
.pk-tools { padding: 10px 14px 6px; border-bottom: 1px solid var(--line); background: var(--card); }
.pk-tools input[type=search] {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 11px; font: inherit; font-size: 15px; background: #fffdf6;
}
.pk-body { overflow-y: auto; padding: 12px 14px 20px; -webkit-overflow-scrolling: touch; }
.pk-foot { padding: 10px 14px; border-top: 1px solid var(--line); background: var(--card); }
.pk-count { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }

.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.pk-grid.tr { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }

.pk-it {
  position: relative; background: none; border: 0; padding: 4px 2px; cursor: pointer;
  border-radius: var(--r-sm); font: inherit; color: inherit; text-align: center;
}
.pk-it:hover, .pk-it:focus-visible { background: var(--cream-2); outline: none; }
.pk-it .bx {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 12px;
  background: var(--cream-2) center/contain no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.pk-it.round .bx { border-radius: 50%; }
.pk-it .bx img { width: 84%; height: 84%; object-fit: contain; }
.pk-it .nm {
  display: block; font-size: 10.5px; line-height: 1.3; margin-top: 3px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pk-it.on .bx { box-shadow: 0 0 0 3px var(--teal); }

/* เลือกระดับอัปเกรดของสมบัติ */
.pk-lv { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.pk-lv button {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--pill);
  padding: 6px 15px; cursor: pointer; font-family: var(--head); font-weight: 500; font-size: 14px;
  color: var(--ink-2);
}
.pk-lv button:hover { background: var(--cream-2); }
.pk-lv button.on { background: var(--gold); border-color: var(--gold); color: #4a3406; }
.pk-pick { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.pk-pick .nm { font-family: var(--head); font-weight: 600; }

/* ═══════════════ บูสต์แบบรูป ═══════════════ */

.boostgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
.boostpick { cursor: pointer; }
.boostpick input { position: absolute; opacity: 0; width: 0; height: 0; }
.boostpick .bp-in {
  display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 6px 7px; text-align: center;
}
.boostpick .bp-in img { width: 46px; height: 46px; object-fit: contain; }
.boostpick .bp-n { font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.boostpick .bp-p { font-size: 11px; color: var(--muted); font-family: var(--head); }
.boostpick:hover .bp-in { border-color: var(--gold); }
.boostpick input:checked + .bp-in {
  border-color: var(--teal); background: var(--teal-bg); box-shadow: inset 0 0 0 1px var(--teal);
}
.boostpick input:focus-visible + .bp-in { outline: 2px solid var(--teal); outline-offset: 2px; }
.boost-total { color: var(--muted); font-size: 12.5px; margin: 9px 0 0; }

.rndlist { display: flex; flex-direction: column; gap: 6px; }
.rndrow { cursor: pointer; }
.rndrow input { position: absolute; opacity: 0; width: 0; height: 0; }
.rndrow .rr-in {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 12px;
}
.rndrow .rr-bx {
  width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--cream-2); color: transparent; font-size: 13px; line-height: 19px; text-align: center; flex: none;
}
.rndrow .rr-n { font-size: 13.5px; }
.rndrow .rr-c { margin-left: auto; color: var(--muted); font-size: 12px; font-family: var(--head); }
.rndrow:hover .rr-in { border-color: var(--gold); }
.rndrow input:checked + .rr-in { border-color: var(--teal); background: var(--teal-bg); }
.rndrow input:checked + .rr-in .rr-bx { background: var(--teal); border-color: var(--teal); color: #fff; }
.rndrow input:focus-visible + .rr-in { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ═══════════════ จอเล็ก ═══════════════ */

@media (max-width: 860px) {
  .nav-in { height: 54px; gap: 10px; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 38px; height: 34px; padding: 0 8px; order: 3;
    background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 54px;
    flex-direction: column; gap: 0; padding: 8px;
    background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--sh-2);
  }
  .nav-links.open { display: flex; }
  .nav-links a { border-radius: var(--r-sm); padding: 11px 14px; font-size: 16px; }
  .nav-me { order: 2; }
  .hide-sm { display: none; }
  .wrap { padding: 16px 12px 48px; }
  .grid-2 { grid-template-columns: 1fr; }
  h1 { font-size: 22px; }
  .prow { padding: 12px 14px; }
  .prow-meta .stats { gap: 9px; }
  .slot, .slot .box { width: 54px; }
  .slot .box { height: 54px; }
  .combo-nums b { font-size: 15px; }
}

@media (max-width: 560px) {
  /* จอแคบ: ให้เลื่อนแถวช่องในแนวนอนแทนการตัดขึ้นบรรทัดใหม่
     ไม่งั้นกลุ่ม "คุกกี้ │ เพ็ท │ สมบัติ 3 ชิ้น" จะขาดกลาง อ่านไม่ออกว่าอะไรอยู่กลุ่มไหน */
  .slots {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 420px) {
  .slot, .slot .box { width: 48px; }
  .slot .box { height: 48px; }
  .slot .nm { font-size: 9.5px; }
  /* ช่องเลือกต้องยังกดง่ายบนจอเล็ก — ย่อได้แต่ไม่ต่ำกว่านิ้วโป้ง */
  .pickbtn .slot, .pickbtn .slot .box { width: 64px; }
  .pickbtn .slot .box { height: 64px; }
  .pickbtn .slot .nm { max-width: 64px; }
  .pickline { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}