/*! (c) SAMAKOM-SF THAI COMMUNITY  https://www.samakom-sf.com
    สงวนลิขสิทธิ์ ห้ามคัดลอกไปใช้ต่อหรือใช้เป็นต้นแบบ อ่านเงื่อนไขที่ /LICENSE
    Copyright, all rights reserved. Do not copy or reuse. See /LICENSE */
/* ฟอนต์ Sarabun (Cadson Demak) หน้าตาตระกูลเดียวกับ TH Sarabun แต่ทำมาสำหรับจอ
   เก็บไฟล์ไว้ในเว็บเอง ไม่ได้ลิงก์ Google Fonts เพราะกฎของโปรเจกต์ห้ามพึ่ง CDN ภายนอก
   สัญญาอนุญาต SIL OFL 1.1 ตัวสัญญาอยู่ที่ fonts/OFL.txt (ห้ามลบ)
   แยกไทยกับละตินคนละไฟล์และกำกับ unicode-range ไว้ เบราว์เซอร์จะโหลดเฉพาะชุดที่ใช้
   ทั้งหมด 6 ไฟล์ รวม 63 KB */
@font-face{
  font-family:Sarabun; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/sarabun-400-thai.woff2) format('woff2');
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face{
  font-family:Sarabun; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/sarabun-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:Sarabun; font-style:normal; font-weight:600; font-display:swap;
  src:url(fonts/sarabun-600-thai.woff2) format('woff2');
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face{
  font-family:Sarabun; font-style:normal; font-weight:600; font-display:swap;
  src:url(fonts/sarabun-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:Sarabun; font-style:normal; font-weight:700; font-display:swap;
  src:url(fonts/sarabun-700-thai.woff2) format('woff2');
  unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face{
  font-family:Sarabun; font-style:normal; font-weight:700; font-display:swap;
  src:url(fonts/sarabun-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================= ธีม =================

   มีสองโหมด ปุ่มสลับอยู่มุมขวาบนของทุกหน้า (ตัวจัดการอยู่ใน theme.js)
   กติกาการเขียนสีในไฟล์นี้ (ห้ามลบข้อไหนออก ไม่งั้นจะมีสีที่หายไปในโหมดใดโหมดหนึ่ง)

   1. :root ธรรมดา = ชุดสีโหมดสว่างครบทุกตัว ถือเป็นค่าตั้งต้น
   2. @media (prefers-color-scheme: dark) ที่กัน [data-theme="light"] ไว้
      = คนที่ตั้งเครื่องเป็นโหมดมืดและยังไม่เคยกดปุ่มเอง
   3. :root[data-theme="dark"] = คนที่กดปุ่มเลือกเอง ต้องชนะข้อ 2 เสมอ

   สีทุกตัวต้องมีค่าตั้งต้นในข้อ 1 ห้ามประกาศสีครั้งแรกในข้อ 2 หรือ 3

   **ธีมมืดห้ามมีสีส้มเจือปน** (เจ้าของสั่ง 2026-08-13) สีหลักของธีมมืดคือเขียว
   #49BC74 เส้นขอบของที่ถูกเลือกคือ #3AAA64 พื้นหลัง #17191a หัวเว็บ #2a2c2e
   สีส้มยังใช้อยู่ในธีมสว่างเท่านั้น เวลาเพิ่มสีใหม่ให้เช็คด้วยว่าฝั่งมืดไม่ได้ส้มตามมา */
:root{
  color-scheme:light;

  --bg:#eceef2;             /* พื้นหลังหน้า */
  --panel:#ffffff;          /* การ์ดใหญ่ */
  --panel2:#fbfcfd;         /* ไล่สีด้านบนของการ์ด */
  --sunk:#f3f5f8;           /* ช่องที่จมลงไปในการ์ด ปุ่ม แถบค้นหา */
  --sunk2:#e9edf3;          /* จมลึกอีกชั้น เช่นรางหลอดสถานะ */
  --line:rgba(15,23,42,.07);
  --line2:rgba(15,23,42,.045);
  --hdrBg:#ffffff;          /* พื้นหัวเว็บ แยกจาก --panel เพราะสองธีมไม่เท่ากัน */
  --navTrack:#f3f5f8;       /* รางของเมนู */
  --navOn:#ffffff;          /* เมนูอันที่เปิดอยู่ */

  --txt:#101828;
  --txt2:#344054;
  --dim:#667085;

  --acc:#ef7f2e;            /* สีแบรนด์ ส้ม */
  --accInk:#c2570d;         /* ส้มเข้มพอสำหรับตัวหนังสือบนพื้นสว่าง */
  /* ตัวหนังสือบนปุ่มสีส้มต้องเป็นสีเข้ม ไม่ใช่สีขาว
     ขาวบนส้ม #ef7f2e ได้อัตราส่วนความต่างแค่ 2.7 ต่อ 1 ซึ่งตกเกณฑ์ AA (ต้อง 4.5)
     ใช้สีน้ำตาลเกือบดำแทน ได้ 6.1 ต่อ 1 และยังคงสีส้มสดของแบรนด์ไว้ได้ */
  --accOn:#2b1708;
  --accSoft:rgba(239,127,46,.12);
  --accLine:#ef7f2e;        /* เส้นขอบของสิ่งที่ถูกเลือก */
  --accGlow:rgba(239,127,46,.70);   /* เงาเรือง ๆ ใต้ปุ่มที่เปิดอยู่ */
  --acc2:#2563eb;
  --acc2Soft:rgba(37,99,235,.10);
  --ok:#12a150;
  --warn:#c0392b;

  /* หลอดสถานะ แยกเป็นตัวแปรเพราะธีมมืดใช้คนละชุดสี (ห้ามมีส้ม) */
  --g1:linear-gradient(90deg,#ef7f2e,#ffc46b);
  --g2:linear-gradient(90deg,#2f7fe6,#7cc0ff);
  --g3:linear-gradient(90deg,#16a34a,#66dd94);
  --g4:linear-gradient(90deg,#8b5cf6,#c4a8ff);

  /* เงานุ่มซ้อนชั้น ใกล้ ๆ คมนิดเดียว ไกล ๆ ฟุ้งและจาง */
  --sh1:0 1px 2px rgba(16,24,40,.05);
  --sh2:0 1px 2px rgba(16,24,40,.05), 0 12px 28px -14px rgba(16,24,40,.28);
  --sh3:0 2px 4px rgba(16,24,40,.04), 0 28px 56px -28px rgba(16,24,40,.38);
  --shInset:inset 0 1px 0 rgba(255,255,255,.7);

  /* แสงฟุ้งบาง ๆ ของพื้นหลังและเวที 3D */
  --glow1:rgba(239,127,46,.16);
  --glow2:rgba(37,99,235,.10);
  --logoGlow:0 6px 14px rgba(239,127,46,.30);
  --stage1:#ffffff;
  --stage2:#eef1f6;
  --stageGlow:rgba(239,127,46,.20);

  /* ลายเส้นตารางบนพื้นหลัง (ดัดแปลงจาก uiverse.io/adamgiebl/curvy-earwig-79 สัญญา MIT)
     ต้นฉบับเป็นชุดสีมืดอย่างเดียว ฝั่งสว่างจึงต้องคิดค่าขึ้นเองให้จางกว่ามาก
     ไม่งั้นบนพื้นสว่างเส้นจะเข้มจนอ่านตัวหนังสือลำบาก */
  --grid:rgba(15,23,42,.055);
  --gridStep:55px;          /* ระยะห่างของเส้น ใช้ค่าเดียวกันทั้งสองธีม */

  /* แสงฟุ้งของการ์ดไอเทมตอนเอาเมาส์ไปชี้หรือกดเลือก
     (จาก uiverse.io/LightAndy1/empty-catfish-94 สัญญา MIT)

     **ใช้สีของต้นฉบับตรง ๆ ทั้งสองธีม** (เจ้าของสั่ง 2026-08-14)
     ตั้งที่นี่ที่เดียวและ **ไม่มีชุดของธีมมืด** เพราะสองโหมดใช้ค่าเดียวกัน
     ถือเป็นข้อยกเว้นข้อเดียวของกติกา "ธีมมืดห้ามมีสีนอกชุดแบรนด์" ข้างบน
     สีนี้ใช้ได้เฉพาะกับแสงฟุ้งของการ์ดเท่านั้น ห้ามลามไปที่อื่น

     เคยมี --cardRing1 กับ --cardRing2 เป็นขอบไล่สีคู่กับตัวนี้ด้วย
     เจ้าของสั่งเอาออกทั้งคู่ 2026-08-14 เหลือแค่แสงฟุ้ง */
  --cardGlow:rgba(204,0,255,.30);

  /* ป้ายระยะการป้องกันบนการ์ดไอเทมและในตารางราคา (เจ้าของสั่ง 2026-08-18)
     ฝั่งสว่างเน้นตัวหนังสือสีดำบนพื้นเหลืองอ่อน ฝั่งมืดเป็นตัวหนังสือสีเหลือง
     **นี่คือข้อยกเว้นของกติกา "ธีมมืดห้ามมีสีส้ม"** เหลืองตัวนี้เจ้าของสั่งมาเอง
     ใช้ได้เฉพาะกับป้ายระยะเท่านั้น ห้ามลามไปที่อื่น */
  /* เส้นกรอบบางของปุ่มเมนูที่เปิดอยู่ (.btn-wrapper) ต้องเป็นโทนกลาง ห้ามมีสี
     เพราะปุ่มทั้งก้อนโดน filter อยู่ สีที่อิ่มจะเพี้ยน */
  --bwRing:rgba(15,23,42,.22);

  --rngBg:#fdf0b8;
  --rngInk:#1b1503;
  --rngLine:rgba(146,109,4,.28);

  --r:12px;                 /* ปุ่มเล็ก ช่องกรอก */
  --r2:18px;                /* การ์ดย่อย */
  --r3:26px;                /* การ์ดใหญ่ */
  --hdr:76px;               /* ความสูงหัวเว็บ ใช้เป็นจุดหยุดของหัวตาราง (วัดจากของจริง) */
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#191a1a; --panel:#202325; --panel2:#24282a;
    --sunk:#1a1d1e; --sunk2:#141617;
    --line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.05);
    --hdrBg:#2a2c2e; --navTrack:#1e2122; --navOn:#3a3e40;
    --txt:#e9eded; --txt2:#c4cac9; --dim:#8e9694;
    --acc:#49BC74; --accInk:#6fd396; --accOn:#0c1f14;
    --accSoft:rgba(73,188,116,.16); --accLine:#3AAA64;
    --accGlow:rgba(73,188,116,.55);
    --acc2:#6cb1ff; --acc2Soft:rgba(108,177,255,.14);
    --ok:#49BC74; --warn:#ff9a9a;
    --sh1:0 1px 2px rgba(0,0,0,.4);
    --sh2:0 1px 2px rgba(0,0,0,.4), 0 16px 36px -16px rgba(0,0,0,.7);
    --sh3:0 2px 6px rgba(0,0,0,.45), 0 34px 64px -30px rgba(0,0,0,.85);
    --shInset:inset 0 1px 0 rgba(255,255,255,.04);
    --glow1:rgba(73,188,116,.10); --glow2:rgba(108,177,255,.07);
    --logoGlow:0 6px 16px rgba(0,0,0,.55);
    --stage1:#1d2122; --stage2:#121414; --stageGlow:rgba(73,188,116,.16);
    --g1:linear-gradient(90deg,#49BC74,#8ee0ab);
    --g2:linear-gradient(90deg,#4a9fe0,#8fcaf5);
    --g3:linear-gradient(90deg,#3fb8b0,#88ded8);
    --g4:linear-gradient(90deg,#9b7ff0,#c9b4ff);
    --grid:rgba(114,114,114,.30);
    --rngBg:rgba(250,204,21,.14); --rngInk:#f2cf5b; --rngLine:rgba(250,204,21,.30);
    --bwRing:rgba(0,0,0,.38);
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#191a1a; --panel:#202325; --panel2:#24282a;
  --sunk:#1a1d1e; --sunk2:#141617;
  --line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.05);
  --hdrBg:#2a2c2e; --navTrack:#1e2122; --navOn:#3a3e40;
  --txt:#e9eded; --txt2:#c4cac9; --dim:#8e9694;
  --acc:#49BC74; --accInk:#6fd396; --accOn:#0c1f14;
  --accSoft:rgba(73,188,116,.16); --accLine:#3AAA64;
  --accGlow:rgba(73,188,116,.55);
  --acc2:#6cb1ff; --acc2Soft:rgba(108,177,255,.14);
  --ok:#49BC74; --warn:#ff9a9a;
  --sh1:0 1px 2px rgba(0,0,0,.4);
  --sh2:0 1px 2px rgba(0,0,0,.4), 0 16px 36px -16px rgba(0,0,0,.7);
  --sh3:0 2px 6px rgba(0,0,0,.45), 0 34px 64px -30px rgba(0,0,0,.85);
  --shInset:inset 0 1px 0 rgba(255,255,255,.04);
  --glow1:rgba(73,188,116,.10); --glow2:rgba(108,177,255,.07);
  --logoGlow:0 6px 16px rgba(0,0,0,.55);
  --stage1:#1d2122; --stage2:#121414; --stageGlow:rgba(73,188,116,.16);
  --g1:linear-gradient(90deg,#49BC74,#8ee0ab);
  --g2:linear-gradient(90deg,#4a9fe0,#8fcaf5);
  --g3:linear-gradient(90deg,#3fb8b0,#88ded8);
  --g4:linear-gradient(90deg,#9b7ff0,#c9b4ff);
  --grid:rgba(114,114,114,.30);
  --rngBg:rgba(250,204,21,.14); --rngInk:#f2cf5b; --rngLine:rgba(250,204,21,.30);
  --bwRing:rgba(0,0,0,.38);
}

/* ================= พื้นฐาน ================= */
*{box-sizing:border-box}
/* พื้นหลังเป็นลายเส้นตาราง (เจ้าของสั่ง 2026-08-14)
   ดัดแปลงจาก uiverse.io/adamgiebl/curvy-earwig-79 (สัญญา MIT)
   ต้นฉบับวาดเส้นด้วย linear-gradient สองชั้น ตั้ง background-size เท่ากับระยะห่างของเส้น
   ตัวเลข 24% ถึง 27% กับ 74% ถึง 77% คือตำแหน่งของเส้นสองเส้นในหนึ่งช่อง
   ทำให้ได้ตารางถี่กว่าที่ background-size บอกหนึ่งเท่า

   ต้องเขียนเป็น background-color กับ background-image แยกกัน ห้ามยุบเป็น background ตัวเดียว
   ไม่งั้นจะไปทับค่า background-image ที่ประกาศไว้บรรทัดถัดไปในบางเบราว์เซอร์
   และตรึงไว้ด้วย fixed เพื่อไม่ให้ลายเลื่อนตามตอนสกรอลล์หน้ายาว ๆ อย่างหน้าระดับยศ */
body{
  margin:0; color:var(--txt);
  background-color:var(--bg);
  background-image:
    linear-gradient(0deg, transparent 24%, var(--grid) 25%, var(--grid) 26%,
      transparent 27%, transparent 74%, var(--grid) 75%, var(--grid) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, var(--grid) 25%, var(--grid) 26%,
      transparent 27%, transparent 74%, var(--grid) 75%, var(--grid) 76%, transparent 77%, transparent);
  background-size:var(--gridStep) var(--gridStep);
  background-attachment:fixed;
  font-family:Sarabun,"TH Sarabun New","Noto Sans Thai","Segoe UI",system-ui,sans-serif;
  line-height:1.6; -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{
  /* แสงฟุ้งของพื้นหลัง แยกเป็นชั้นของตัวเองเพื่อไม่ให้ชนกับสีพื้นตอนสลับธีม */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(920px 540px at 10% -10%, var(--glow1), transparent 62%),
    radial-gradient(780px 500px at 92% 2%, var(--glow2), transparent 60%);
}
.wrap{width:min(1180px,94vw); margin-inline:auto}
a{color:var(--acc2); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acc2); outline-offset:2px; border-radius:6px}
h1,h2,h3{letter-spacing:-.015em}

/* ================= หัวเว็บ ================= */
.top{
  position:sticky; top:0; z-index:20;
  background:var(--hdrBg);   /* สำรองไว้ให้เบราว์เซอร์ที่ไม่รู้จัก color-mix */
  background:color-mix(in srgb, var(--hdrBg) 88%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line2);
}
@supports not (backdrop-filter:blur(2px)){ .top{background:var(--hdrBg)} }
.top .wrap{display:flex; align-items:center; gap:18px; min-height:var(--hdr); padding:12px 0}

.brand{
  display:flex; align-items:center; gap:12px; min-width:0;
  color:var(--txt); text-decoration:none;
}
.brand:hover{text-decoration:none}
.logo{
  width:44px; height:44px; flex:none; object-fit:contain; border-radius:12px;
  filter:drop-shadow(var(--logoGlow));
  transition:transform .25s ease;
}
.brand:hover .logo{transform:scale(1.04)}
.brandname{display:flex; flex-direction:column; min-width:0; line-height:1.18}
.brandname b{font-size:16px; font-weight:800; letter-spacing:.01em; white-space:nowrap}
.tagline{
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:10.5px; font-weight:600; color:var(--dim); letter-spacing:.16em;
}

/* เอฟเฟกต์พิมพ์ดีด (ตัวขับอยู่ใน brand.js)
   ghost คือข้อความเต็มแบบมองไม่เห็น ทำหน้าที่จองความกว้างไว้เฉย ๆ
   ส่วน live วางทับแบบ absolute จึงไม่กินพื้นที่ ทำให้หัวเว็บไม่ขยับตอนตัวหนังสือสั้นลง */
.tw{position:relative; display:inline-block}
.tw-ghost{visibility:hidden; font-style:normal}
.tw-live{position:absolute; left:0; top:0; font-style:normal; white-space:nowrap}
.tw-live.typing::after{content:"_"; color:var(--acc); margin-left:1px}

/* ธงไทยวาดเป็น SVG ไม่ใช้ emoji เพราะวินโดวส์ไม่มีฟอนต์ธงในตัว
   ถ้าใช้ emoji คนเล่นบนวินโดวส์จะเห็นเป็นตัวอักษร TH สองตัวแทนรูปธง */
.flagth{
  width:15px; height:10px; flex:none; display:block; border-radius:2px;
  box-shadow:0 0 0 1px var(--line);
}

/* เมนูเป็นรางมนแบบเดียวกับกลุ่มปุ่มในแอป ตัวที่เปิดอยู่ลอยขึ้นมาเป็นการ์ดเล็ก */
.top nav{
  display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; align-items:center;
  background:var(--navTrack); border-radius:99px; padding:5px;
}
.top nav a{
  padding:8px 15px; border-radius:99px; color:var(--dim); font-size:14.5px;
  font-weight:600; white-space:nowrap; transition:color .18s ease, background .18s ease;
}
.top nav a:hover{color:var(--txt); text-decoration:none}
/* เมนูอันที่เปิดอยู่ไม่ใช้กฎนี้แล้ว ไปใช้ปุ่มไล่สีข้างล่างแทน (เจ้าของสั่ง 2026-08-14)
   ตัวคลาส active ย้ายไปอยู่ที่ .btn-wrapper ที่ครอบ ไม่ได้อยู่ที่ <a> แล้ว
   ถ้าจะกลับมาใช้แบบเดิม ให้เอา active กลับไปไว้ที่ <a> แล้วเปิดกฎนี้
   .top nav a.active{background:var(--navOn); color:var(--txt); box-shadow:var(--sh1)} */

/* ---- ปุ่มไล่สีของเมนูอันที่เปิดอยู่ ----
   ดัดแปลงจาก uiverse.io/dexter-st/breezy-zebra-94 (สัญญาอนุญาต MIT)

   หลักการของต้นฉบับ: ซ้อนวงกลมไล่สีที่หมุนอยู่ 7 ชั้น แล้วผสมสีกันด้วย
   mix-blend-mode (difference กับ color-dodge) จึงได้สีรุ้งที่ไหลไปเรื่อย ๆ
   ตัวหนังสือถูกวาดสองรอบ รอบแรกอยู่ใน <a> (จมอยู่ z-index -1) รอบสองเป็น
   .text-overlay ที่ลอยอยู่ชั้นบนสุดแบบ multiply **ห้ามลบอันใดอันหนึ่งออก**
   ไม่งั้นตัวหนังสือจะหายหรือกลายเป็นสีเดียวกับพื้น

   **ที่แก้จากต้นฉบับ**
   1. ย่อขนาด ต้นฉบับ font-size 1.5rem padding 12px 36px ใหญ่เกินหัวเว็บมาก
   2. letter-spacing จาก .15rem เหลือ .02em ตัวเลขเดิมทำให้สระและวรรณยุกต์ไทยลอยห่างคำ
   3. ย้ายค่า animation-delay กับ duration ของแต่ละชั้นจาก style ในแท็กมาไว้ใน CSS
      HTML จะได้ไม่ต้องมี inline style 7 ที่ต่อหนึ่งหน้า
   4. ตัวปุ่มเป็น <a> ไม่ใช่ <button> เพราะเป็นลิงก์เมนูจริงที่ Google ต้องเดินตามได้
      (โครงเมนูเป็นเงื่อนไขของ sitelinks ห้ามเปลี่ยนเป็นปุ่ม) */
.btn-wrapper{
  --rad:99px;
  --color-wrapper-border:#fff;
  --color-btn-bg:#f00;
  --color-btn-text:#000;
  --color-btn-text-shadow:#fff;
  --color-btn-inset-shadow:#558;
  --color-layer-a:#fff;
  --color-layer-b:#00f;
  --color-overlay-text:#000;
  --color-overlay-glow:#fff;
  --color-overlay-shadow:#0004;
  --color-overlay-highlight:#fff5;

  position:relative; display:flex; align-items:center; justify-content:center;
  /* ต้นฉบับมี overflow-clip-margin:4px กับ border 2px สีขาวรอบนอก
     เจ้าของสั่งให้เอาออกทั้งคู่ 2026-08-14 แล้วสั่งให้เอากลับ 2026-08-18
     แต่ **ขอบางที่สุดเท่าที่จะทำได้ เอาไว้กันกรอบเฉย ๆ ไม่ใช่เป็นลูกเล่น**
     จึงไม่ได้ใช้ border จริงแบบต้นฉบับ (2px ขาวทึบ หนาเกินไปมาก)
     แต่วาดเป็นเส้น 1px ด้วย ::before ทับข้างบนแทน ดูที่ .btn-wrapper::before */
  overflow:clip;
  /* **ต้องมี clip-path ด้วย ห้ามพึ่ง overflow อย่างเดียว** (เจ้าของแจ้งจากมือถือ 2026-08-18)
     ข้างในมีชั้นไล่สีขนาด 363px ที่ใช้ mix-blend-mode:difference และตัวปุ่มเองก็โดน filter
     พอซ้อนกันแบบนี้ เบราว์เซอร์บนมือถือตัดขอบตาม border-radius ไม่สำเร็จ
     กลายเป็นตัดเป็นสี่เหลี่ยม มุมทั้งสี่จึงโผล่วงไล่สีออกมาเป็นแผ่นสี่เหลี่ยมรอบปุ่ม
     clip-path บังคับรูปทรงได้ตรง ๆ ไม่ขึ้นกับว่า overflow จะไปตีกับ blend mode ยังไง */
  clip-path:inset(0 round var(--rad));
  border-radius:var(--rad);
  font-family:inherit; font-size:14.5px; font-weight:600;
  /* ต้นฉบับใช้ saturate(.65) brightness(1.8) ซึ่งได้สีรุ้งจัดจนตัวหนังสือสีดำอ่านไม่ออก
     เจ้าของสั่งให้ลดลงเหลือพอเป็นกิมมิค 2026-08-14 ลดความอิ่มสีลงและคุมความสว่างไว้
     **สองค่านี้กับ --veil ข้างล่างคือปุ่มปรับความจัดของเอฟเฟกต์ทั้งหมด**
     อยากให้สีจัดขึ้น เพิ่ม saturate หรือลด --veil อยากให้จางลง ทำกลับกัน */
  filter:saturate(.5) brightness(1.45);
  --veil:.45;
}
/* ม่านสีขาวจาง ๆ คั่นระหว่างวงไล่สีกับตัวหนังสือ
   เป็นตัวรับประกันว่าพื้นหลังจะไม่เข้มเกินไปไม่ว่าวงสีจะหมุนมาอยู่จังหวะไหน
   ตัวหนังสือสีดำจึงอ่านออกเสมอ ซึ่งเป็นปัญหาเดิมที่เจ้าของแจ้งมา
   **z-index ต้องเป็น 1** คืออยู่เหนือวงไล่สี (auto) แต่ต่ำกว่า .text-overlay (2) */
.btn-wrapper::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:var(--rad); background:rgba(255,255,255,var(--veil));
}
/* เส้นกรอบบาง ๆ รอบปุ่ม (เจ้าของสั่งเอากลับ 2026-08-18 แต่ขอบางที่สุด)

   **ต้องอยู่ z-index สูงกว่าม่านสีขาว (1) และตัวหนังสือ (2)** ไม่งั้นจะถูกม่านกลบ
   ใช้ inset box-shadow แทน border เพราะ border จะไปกินพื้นที่ข้างในปุ่ม
   ทำให้วงไล่สีขยับตำแหน่งและปุ่มโตขึ้นจากปุ่มอื่นในเมนู

   **สีต้องเป็นโทนกลางเท่านั้น** ทั้งก้อนโดน filter:saturate(.5) brightness(1.45) อยู่
   สีที่มีความอิ่มสีจะเพี้ยนคาดเดาไม่ได้ ส่วนสีเทาโดนแค่สว่างขึ้นนิดเดียว */
.btn-wrapper::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:var(--rad); box-shadow:inset 0 0 0 1px var(--bwRing);
}
.gradient-btn{
  position:relative; z-index:-1;
  padding:8px 15px; border:none; border-radius:var(--rad);
  font-family:inherit; font-size:inherit; font-weight:inherit; letter-spacing:.02em;
  white-space:nowrap; text-decoration:none;
  color:var(--color-btn-text); background-color:var(--color-btn-bg); background-size:200% 200%;
  box-shadow:inset 0 0 10px 9px var(--color-btn-inset-shadow);
  text-shadow:0 1px 3px var(--color-btn-text-shadow);
  cursor:pointer; mix-blend-mode:color-dodge;
  transition:color .3s ease, text-shadow .3s ease;
}
.gradient-btn::after{
  content:""; position:absolute; pointer-events:none; left:0; top:0; width:100%; height:100%;
  border-radius:var(--rad); background-size:200% 200%; mix-blend-mode:difference; z-index:1;
}
.gradient-layer{
  position:absolute; pointer-events:none; left:-160px; width:500%; aspect-ratio:1;
  background:radial-gradient(ellipse at 65% 180%,
    var(--color-layer-a), var(--color-layer-b), var(--color-layer-a), var(--color-layer-b),
    var(--color-layer-a), var(--color-layer-b), var(--color-layer-a), var(--color-layer-b),
    var(--color-layer-a), var(--color-layer-b), var(--color-layer-a));
  mix-blend-mode:difference;
  animation:bwRotate 8s linear infinite;
}
/* จังหวะหมุนของแต่ละชั้น ตัวเลขชุดนี้ยกมาจากต้นฉบับตรง ๆ
   ที่ไม่ลงตัวกันนี่แหละคือเหตุผลที่สีไม่วนซ้ำรอบเดิม ห้ามปัดให้เท่ากัน */
.btn-wrapper > .gradient-layer:nth-child(2){animation-delay:0s;    animation-duration:25s}
.btn-wrapper > .gradient-layer:nth-child(3){animation-delay:.15s;  animation-duration:15.9s}
.btn-wrapper > .gradient-layer:nth-child(4){animation-delay:.53s;  animation-duration:26.4s}
.btn-wrapper > .gradient-layer:nth-child(5){animation-delay:.45s;  animation-duration:17.8s}
.btn-wrapper > .gradient-layer:nth-child(6){animation-delay:1.6s;  animation-duration:19.2s}
.btn-wrapper > .gradient-layer:nth-child(7){animation-delay:1.6s;  animation-duration:29.2s}
.btn-wrapper > .gradient-layer:nth-child(8){animation-delay:1.6s;  animation-duration:20.2s}
@keyframes bwRotate{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
.text-overlay{
  position:absolute; pointer-events:none; z-index:2;
  padding:8px 15px; border-radius:var(--rad);
  font-family:inherit; font-size:inherit; font-weight:inherit; letter-spacing:.02em;
  white-space:nowrap;
  color:var(--color-overlay-text); text-shadow:0 0 4px var(--color-overlay-glow);
  box-shadow:inset 0 -4px 4px 0 var(--color-overlay-shadow),
             inset 0 4px 4px 0 var(--color-overlay-highlight);
  mix-blend-mode:multiply;
  transition:transform .3s ease;
  animation:bwOpacityPulse 5s ease infinite;
}
.btn-wrapper:hover .text-overlay{transform:scale(1.1)}
.btn-wrapper:active .text-overlay{transform:scale(.95)}
.btn-wrapper:hover .gradient-btn,
.btn-wrapper:active .gradient-btn{color:#0000; text-shadow:0 0 0 #0000}
.light{
  position:absolute; pointer-events:none; z-index:1; border-radius:50px;
  width:80%; height:1.9rem; aspect-ratio:1; background-color:#fff5;
  filter:blur(5px); animation:bwPulse 3s ease-in-out infinite;
}
@keyframes bwPulse{ 0%,100%{opacity:1} 50%{opacity:.1} }
@keyframes bwOpacityPulse{ 0%,100%{opacity:1} 50%{opacity:.5} }

/* กฎของเมนูปกติ (.top nav a) มี specificity สูงกว่าคลาสเดี่ยว ๆ ของคอมโพเนนต์
   จึงต้องย้ำค่าที่โดนทับอีกรอบโดยเจาะจงว่าอยู่ในเมนู */
.top nav .gradient-btn{
  padding:8px 15px; font-size:14.5px;
  color:var(--color-btn-text); background-color:var(--color-btn-bg);
}
.top nav .gradient-btn:hover{color:#0000; text-decoration:none}

/* คนที่ตั้งเครื่องว่าไม่เอาภาพเคลื่อนไหว ให้หยุดวงหมุนไว้เฉย ๆ
   ยังเห็นเป็นปุ่มสีรุ้งเหมือนเดิม แค่ไม่ขยับ */
@media (prefers-reduced-motion: reduce){
  .gradient-layer,.light,.text-overlay{animation:none}
  .btn-wrapper:hover .text-overlay{transform:none}
}

/* ================= สวิตช์สลับกลางวัน / กลางคืน =================

   ดัดแปลงจาก uiverse.io/Galahhad/strong-squid-82 (สัญญาอนุญาต MIT)
   ต้นฉบับวัดทุกอย่างเป็น em ขนาดจึงคุมได้ที่ --toggle-size ตัวเดียว
   ต้นฉบับตั้ง 30px ซึ่งใหญ่เกินหัวเว็บ (168 x 75 px) ที่นี่ใช้ 12px ได้ 67 x 30 px
   **ห้ามย่อด้วย transform:scale** เพราะเงาและขอบมนจะเบลอ

   ก้อนเมฆกับดวงดาวไม่ได้เป็นรูป แต่เป็น box-shadow หลายชั้นของกล่องเดียว
   เวลาแก้อย่าไปยุ่งกับตัวเลขในนั้น มันคือพิกัดของเมฆแต่ละก้อน

   **จุดที่แก้จากต้นฉบับ** ต้นฉบับสลับรูปด้วย :checked อย่างเดียว
   แต่ธีมของเว็บนี้มาจาก data-theme และ prefers-color-scheme ด้วย
   ถ้าอิง :checked อย่างเดียว คนที่เครื่องเป็นโหมดมืดจะเห็นสวิตช์เป็นดวงอาทิตย์แวบหนึ่ง
   แล้ววิ่งไปเป็นดวงจันทร์หลัง theme.js ทำงาน จึงเขียนสามชุดตามกติกาสีข้างบน
   และเปลี่ยน display:none ของ checkbox เป็นซ่อนแบบยังโฟกัสได้ ไม่งั้นกด Tab ไม่ถึงปุ่ม */
.theme-switch{
  --toggle-size:12px;
  --container-width:5.625em;
  --container-height:2.5em;
  --container-radius:6.25em;
  --container-light-bg:#3D7EAE;
  --container-night-bg:#1D1F2C;
  --circle-container-diameter:3.375em;
  --sun-moon-diameter:2.125em;
  --sun-bg:#ECCA2F;
  --moon-bg:#C4C9D1;
  --spot-color:#959DB1;
  --circle-container-offset:calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color:#fff;
  --clouds-color:#F3FDFF;
  --back-clouds-color:#AACADF;
  --transition:.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition:.3s cubic-bezier(0, -0.02, 0.35, 1.17);
  flex:none; position:relative; display:block;
}
.theme-switch,.theme-switch *,.theme-switch *::before,.theme-switch *::after{
  box-sizing:border-box; margin:0; padding:0; font-size:var(--toggle-size);
}
.theme-switch__container{
  width:var(--container-width); height:var(--container-height);
  background-color:var(--container-light-bg); border-radius:var(--container-radius);
  overflow:hidden; cursor:pointer; position:relative;
  box-shadow:0em -0.062em 0.062em rgba(0,0,0,.25), 0em 0.062em 0.125em rgba(255,255,255,.94);
  transition:var(--transition);
}
.theme-switch__container::before{
  content:""; position:absolute; z-index:1; inset:0; border-radius:var(--container-radius);
  box-shadow:0em 0.05em 0.187em rgba(0,0,0,.25) inset, 0em 0.05em 0.187em rgba(0,0,0,.25) inset;
}
/* ซ่อนช่องติ๊กแต่ยังโฟกัสด้วยคีย์บอร์ดได้ (ต้นฉบับใช้ display:none ซึ่งทำให้กด Tab ไม่ถึง) */
.theme-switch__checkbox{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.theme-switch__checkbox:focus-visible + .theme-switch__container{
  outline:2px solid var(--acc2); outline-offset:3px;
}
.theme-switch__circle-container{
  width:var(--circle-container-diameter); height:var(--circle-container-diameter);
  background-color:rgba(255,255,255,.1); position:absolute;
  left:var(--circle-container-offset); top:var(--circle-container-offset);
  border-radius:var(--container-radius); display:flex; pointer-events:none;
  box-shadow:inset 0 0 0 3.375em rgba(255,255,255,.1), inset 0 0 0 3.375em rgba(255,255,255,.1),
             0 0 0 0.625em rgba(255,255,255,.1), 0 0 0 1.25em rgba(255,255,255,.1);
  transition:var(--circle-transition);
}
.theme-switch__sun-moon-container{
  pointer-events:auto; position:relative; z-index:2; margin:auto;
  width:var(--sun-moon-diameter); height:var(--sun-moon-diameter);
  border-radius:var(--container-radius); background-color:var(--sun-bg); overflow:hidden;
  box-shadow:0.062em 0.062em 0.062em 0em rgba(254,255,239,.61) inset,
             0em -0.062em 0.062em 0em #a1872a inset;
  filter:drop-shadow(0.062em 0.125em 0.125em rgba(0,0,0,.25))
         drop-shadow(0em 0.062em 0.125em rgba(0,0,0,.25));
  transition:var(--transition);
}
.theme-switch__moon{
  transform:translateX(100%); width:100%; height:100%; position:relative;
  background-color:var(--moon-bg); border-radius:inherit;
  box-shadow:0.062em 0.062em 0.062em 0em rgba(254,255,239,.61) inset,
             0em -0.062em 0.062em 0em #969696 inset;
  transition:var(--transition);
}
.theme-switch__spot{
  position:absolute; top:0.75em; left:0.312em; width:0.75em; height:0.75em;
  border-radius:var(--container-radius); background-color:var(--spot-color);
  box-shadow:0em 0.0312em 0.062em rgba(0,0,0,.25) inset;
}
.theme-switch__spot:nth-of-type(2){width:0.375em; height:0.375em; top:0.937em; left:1.375em}
.theme-switch__spot:nth-last-of-type(3){width:0.25em; height:0.25em; top:0.312em; left:0.812em}
.theme-switch__clouds{
  width:1.25em; height:1.25em; background-color:var(--clouds-color);
  border-radius:var(--container-radius); position:absolute; bottom:-0.625em; left:0.312em;
  box-shadow:0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color),
    1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color),
    2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color),
    2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color),
    3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color),
    4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color),
    4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color),
    4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition:.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}
.theme-switch__stars-container{
  position:absolute; color:var(--stars-color); top:-100%; left:0.312em;
  width:2.75em; height:auto; transition:var(--transition);
}
.theme-switch__circle-container:hover{left:calc(var(--circle-container-offset) + 0.187em)}

/* ---- ชุดกลางคืน เขียนสามชุดตามกติกาเดียวกับสีของธีม ----
   1) ติ๊กช่องอยู่  2) ผู้ใช้เลือกโหมดมืดเอง  3) เครื่องเป็นมืดและยังไม่เคยเลือก */
.theme-switch__checkbox:checked + .theme-switch__container,
:root[data-theme="dark"] .theme-switch__container{
  background-color:var(--container-night-bg);
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container,
:root[data-theme="dark"] .theme-switch__circle-container{
  left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover,
:root[data-theme="dark"] .theme-switch__circle-container:hover{
  left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon,
:root[data-theme="dark"] .theme-switch__moon{transform:translate(0)}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds,
:root[data-theme="dark"] .theme-switch__clouds{bottom:-4.062em}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container,
:root[data-theme="dark"] .theme-switch__stars-container{top:50%; transform:translateY(-50%)}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-switch__container{
    background-color:var(--container-night-bg);
  }
  :root:not([data-theme="light"]) .theme-switch__circle-container{
    left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
  }
  :root:not([data-theme="light"]) .theme-switch__circle-container:hover{
    left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
  }
  :root:not([data-theme="light"]) .theme-switch__moon{transform:translate(0)}
  :root:not([data-theme="light"]) .theme-switch__clouds{bottom:-4.062em}
  :root:not([data-theme="light"]) .theme-switch__stars-container{top:50%; transform:translateY(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .theme-switch *{transition-duration:.01ms !important}
}

/* ================= หัวเรื่องของหน้า ================= */
.hero{padding:38px 0 22px}
.hero h1{margin:0 0 8px; font-size:clamp(24px,3.6vw,34px); font-weight:800}
.hero p{margin:0; color:var(--dim); font-size:15.5px; max-width:70ch}
.hero strong{color:var(--accInk); font-weight:700}

/* ================= แถบค้นหาและตัวกรอง ================= */
.controls{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0 0 20px}
/* ช่องค้นหาของหน้าอาวุธ หน้าชุดและไอเทม และหน้าคะแนนชุด
   **#cq เคยตกหล่นจากกฎนี้** หน้าคะแนนเลยได้ช่องค้นหาหน้าตาดิบของเบราว์เซอร์
   (Arial ขอบ inset สูง 21px) มาตั้งแต่เปิดระบบโหวต เจอตอนเพิ่มปุ่มวิธีประกวด 2026-08-19 */
#q,#cq{
  flex:1 1 300px; min-width:0; padding:13px 18px; font-size:15px; font-family:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:99px;
  color:var(--txt); box-shadow:var(--sh1); transition:box-shadow .2s ease, border-color .2s ease;
}
#q::placeholder,#cq::placeholder{color:var(--dim)}
#q:focus,#cq:focus{outline:none; border-color:var(--accLine); box-shadow:var(--sh2)}
select{
  font:inherit; font-size:14.5px; padding:12px 16px; border-radius:99px;
  background:var(--panel); border:1px solid var(--line); color:var(--txt);
  box-shadow:var(--sh1); cursor:pointer;
}
/* ปุ่มกรองประเภทอาวุธ หน้าตาอยู่ในหมวด "ปุ่มกดยุบ" ข้างล่าง (เจ้าของสั่ง 2026-08-14) */
.cats{display:flex; gap:8px; flex-wrap:wrap}
.cats button{font-size:14px}
.catn{font-style:normal; opacity:.6}

/* ================= ตาราง ================= */
.tablebox{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r3);
  overflow-x:auto; box-shadow:var(--sh2);
}
table{border-collapse:collapse; width:100%; min-width:820px; font-size:14.5px}
th,td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line2); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
/* **top ต้องเป็น 0 ไม่ใช่ var(--hdr)** เพราะทุกตารางอยู่ใน `.tablebox`
   ซึ่งตั้ง `overflow-x:auto` ไว้ กล่องนั้นจึงเป็น "กรอบเลื่อน" ของตัวเอง
   sticky วัดระยะจากขอบบนของกรอบ ไม่ใช่จากขอบจอ ใส่ 76px เข้าไปหัวตาราง
   จึงถูกดันลงมา 76px ทับแถวแรกไว้ตลอดเวลา (ทับ 58 จาก 67 พิกเซล = 87%)

   เจ้าของแจ้ง 2026-08-25 ว่า VINTAGE SUNGLASSES ไม่โผล่ในหน้าชุด&ไอเทม
   บนคอม แต่บนมือถือเห็นปกติ และพิมพ์ค้นแล้วเจอ ตรงกับอาการนี้พอดี
   เพราะของใหม่ถูกปักหมุดไว้แถวแรก ซึ่งเป็นแถวเดียวที่โดนบัง
   **บั๊กนี้มีมาตลอดและกินทั้งสามหน้า** (ชุด&ไอเทม อาวุธ ระดับยศ)
   แค่ไม่มีใครสังเกตเพราะปกติแถวแรกไม่ใช่ของที่ตามหา

   ตาราง `.ranktable` เคยเจอปัญหานี้แล้วและแก้เฉพาะตัวเองด้วย `top:0`
   ตอนนี้ยกมาแก้ที่ต้นทางให้ครบทุกตาราง */
th{
  background:var(--panel); position:sticky; top:0; z-index:5; cursor:pointer;
  font-size:12.5px; color:var(--dim); font-weight:700; user-select:none;
  letter-spacing:.02em; border-bottom-color:var(--line);
}
th small{font-weight:400; opacity:.75; font-size:11px}
th:hover{color:var(--txt)}
th.sorted{color:var(--accInk)}
th.sorted::after{content:" ▾"} th.sorted.asc::after{content:" ▴"}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:var(--sunk)}
.wname{font-weight:700; white-space:normal; min-width:280px}
.item{display:flex; align-items:center; gap:12px}
.ico{
  width:76px; height:40px; object-fit:contain; flex:none;
  background:var(--sunk); border:1px solid var(--line2); border-radius:10px; padding:3px;
}
/* ของที่ยังไม่มีไอคอนในเกม แสดงกรอบว่างพร้อมข้อความสั้น ๆ แทนลายทาง */
.ico.noico{
  display:grid; place-items:center; font-size:9.5px; color:var(--dim);
  letter-spacing:.3px; background:var(--sunk);
}
.ico.noico::after{content:"ไม่มีรูป"}
.tag{
  display:inline-block; padding:3px 11px; border-radius:99px; font-size:12px; font-weight:600;
  background:var(--sunk); border:1px solid var(--line2); color:var(--dim);
}
.bar{position:relative}
.bar i{
  position:absolute; left:0; top:50%; transform:translateY(-50%); height:64%;
  background:linear-gradient(90deg,var(--acc),transparent); opacity:.18; border-radius:6px;
}
.bar span{position:relative}
.more{padding:16px; margin:0; color:var(--dim); text-align:center; font-size:14px}

/* ================= หน้าระดับยศ =================
   สองตารางวางคู่กัน ซ้าย Rank 1 ขวา Rank 2 (เจ้าของกำหนด)
   ตารางยาวมาก (75 กับ 100 แถว) จึงให้เลื่อนอยู่ในกรอบตัวเองและหัวตารางลอยตาม */
.rankgrid{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
.ranktable{min-width:0}
.ranktable h2{
  margin:0 0 12px; font-size:19px; font-weight:800;
  display:flex; align-items:center; gap:9px;
}
.ranktable h2::before{
  content:""; width:5px; height:19px; border-radius:99px; background:var(--acc);
}
.ranktable .tablebox{max-height:min(72vh,760px); overflow-y:auto}
.ranktable table{min-width:0; width:100%; font-size:14px}
.ranktable th{top:0}      /* หัวตารางเกาะกรอบของตัวเอง ไม่ใช่หัวเว็บ */
.ranktable td{padding:7px 14px}
.rankgrid .rlv{font-weight:700; white-space:nowrap}
.rankgrid .rexp{
  text-align:right; font-variant-numeric:tabular-nums; color:var(--txt2);
  font-size:13px; white-space:nowrap;
}
.rankgrid .rico{width:56px; text-align:center; padding:5px 10px}
/* บังคับขนาดเท่ากันทุกใบ ต้นฉบับมีทั้ง 31x32 และ 64x64 ปนกัน */
.rankgrid .rico img{
  width:32px; height:32px; display:block; margin:0 auto; border-radius:6px;
  background:var(--sunk);
}
.ranknote{margin-top:16px; text-align:center}

@media(max-width:900px){
  .rankgrid{grid-template-columns:1fr; gap:26px}
  .ranktable .tablebox{max-height:none}
  /* บีบให้ทั้งแถวพอดีจอ 360px จะได้ไม่ต้องเลื่อนตารางไปทางขวาเพื่ออ่าน EXP */
  .ranktable table{font-size:13px}
  .ranktable td,.ranktable th{padding:6px 9px}
  .rankgrid .rexp{font-size:12px}
  .rankgrid .rico{width:46px; padding:4px 6px}
}

/* ================= ท้ายเว็บ ================= */
.foot{padding:40px 0 48px; color:var(--dim); font-size:13.5px; text-align:center}
.foot p{margin:6px 0}

/* ================= หน้าเนื้อหา ================= */
.prose{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r3);
  padding:30px 34px; margin:0 0 24px; box-shadow:var(--sh2); max-width:78ch;
}
.prose h2{margin-top:28px; font-size:20px} .prose h2:first-child{margin-top:0}
.prose p{color:var(--txt2)}
.prose li{margin:6px 0; color:var(--txt2)}

/* ================= แถวคลิกได้ และป้าย 3D ================= */
tr.clickable{cursor:pointer}
tr.clickable:focus-visible{outline:2px solid var(--acc2); outline-offset:-2px}
.tag3d{
  margin-left:8px; font-size:10.5px; font-weight:800; letter-spacing:.4px;
  padding:2px 7px; border-radius:6px; background:var(--acc); color:var(--accOn);
  vertical-align:middle;
}

/* ================= แผงรายละเอียด ================= */
.detail{
  width:min(920px,94vw); max-height:92vh; padding:0; border:1px solid var(--line);
  border-radius:var(--r3); background:var(--panel); color:var(--txt); overflow:visible;
  box-shadow:var(--sh3);
}
.detail::backdrop{background:rgba(10,13,19,.55); backdrop-filter:blur(3px)}
#dbody{padding:28px 30px 30px; overflow:auto; max-height:92vh}
.dclose{
  position:absolute; top:14px; right:16px; z-index:2; width:36px; height:36px;
  border-radius:12px; border:1px solid var(--line); background:var(--sunk); color:var(--dim);
  font-size:22px; line-height:1; cursor:pointer; transition:color .18s ease, border-color .18s ease;
}
.dclose:hover{color:var(--txt); border-color:var(--accLine)}

.dhead{display:flex; align-items:center; gap:16px; margin-bottom:22px; padding-right:44px}
.dico{
  width:112px; height:58px; object-fit:contain; flex:none;
  background:var(--sunk); border:1px solid var(--line2); border-radius:12px; padding:4px;
}
.dhead h2{margin:0 0 5px; font-size:clamp(18px,2.6vw,23px); font-weight:800}
.dcat{margin:0; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.dcode{font-size:12px; color:var(--dim); font-family:ui-monospace,Consolas,monospace}

.dgrid{display:grid; grid-template-columns:1.05fr .95fr; gap:22px}
@media(max-width:720px){ .dgrid{grid-template-columns:1fr} }

.dstage{
  min-height:270px; border-radius:var(--r2); border:1px solid var(--line2);
  background:
    radial-gradient(ellipse at 50% 32%, var(--stageGlow), transparent 66%),
    linear-gradient(180deg, var(--stage1), var(--stage2));
  position:relative; overflow:hidden;
}
.dstage.live{touch-action:none; cursor:grab}
.dstage.live.drag{cursor:grabbing}
.dstage canvas{display:block; width:100%; height:100%}
.noview{position:absolute; inset:0; display:grid; place-items:center; color:var(--dim); font-size:14px}

/* หลอดสถานะแบบในเกม */
.srow{display:grid; grid-template-columns:120px 1fr 46px; align-items:center; gap:12px; margin-bottom:12px}
.slab{font-size:13.5px; line-height:1.25; font-weight:600}
.slab small{display:block; font-size:10.5px; color:var(--dim); font-weight:400}
.strack{
  height:12px; border-radius:99px; background:var(--sunk2);
  border:1px solid var(--line2); overflow:hidden;
}
.strack i{display:block; height:100%; border-radius:99px; transition:width .35s cubic-bezier(.4,0,.2,1)}
.strack i.g1{background:var(--g1)}
.strack i.g2{background:var(--g2)}
.strack i.g3{background:var(--g3)}
.strack i.g4{background:var(--g4)}
.sval{text-align:right; font-variant-numeric:tabular-nums; font-weight:700; font-size:14px}

.dnums{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:20px;
  border-top:1px solid var(--line); padding-top:18px;
}
.dnums div{
  text-align:center; background:var(--sunk); border-radius:var(--r); padding:10px 6px;
}
.dnums b{display:block; font-size:17px; font-variant-numeric:tabular-nums; font-weight:800}
.dnums span{font-size:10.5px; color:var(--dim)}
.dinfo{margin:20px 0 0; color:var(--dim); font-size:13.5px; line-height:1.65}

/* แสดงภาพ 2D แทนเมื่อยังไม่มีโมเดล 3D */
.dstage.flat{display:grid; place-items:center; gap:10px; padding:18px}
.flatimg{max-width:88%; max-height:200px; object-fit:contain}

/* ================= หน้าแรก Dashboard ================= */
/* สามคอลัมน์: ตัวละคร | ชุดและไอเทม | (ป้ายและฉายา ทับ สถานะรวม)

   **align-items ต้องเป็น stretch (ค่าตั้งต้น) ห้ามกลับไปใช้ start**
   เจ้าของสั่ง 2026-08-14 ให้สามคอลัมน์สูงเท่ากันหมด ซึ่งได้มาจาก stretch
   แล้วในแต่ละแผงค่อยให้รายการข้างในยืดเติมที่ว่างเอง (ดู .gearmain กับ .badgepanel)

   ความสูงของแถวมาจากแผงที่สูงที่สุด ซึ่งก็คือแผงตัวละคร (เวที 3D ตรึงความสูงไว้)
   แผงอื่นจึงต้อง **ไม่เอาความสูงของรายการข้างในไปนับ** ไม่งั้นรายการที่มีของ
   เป็นพันชิ้นจะดันแถวสูงเป็นหมื่นพิกเซล วิธีกันคือให้กล่องรายการเป็น flex:1 1 0
   ซึ่งแปลว่าเนื้อในไม่มีสิทธิ์ออกเสียงเรื่องความสูงเลย */
.dashwrap{
  width:min(1560px,96vw); margin:24px auto 0;
  display:grid; grid-template-columns:minmax(300px,1.05fr) minmax(340px,1.35fr) minmax(300px,.95fr);
  gap:22px;
}
.panel{
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--line); border-radius:var(--r3); padding:22px 22px 24px;
  box-shadow:var(--sh2), var(--shInset);
  /* ห้ามลบ: grid item มี min-width:auto มาโดยปริยาย ซึ่งเท่ากับ min-content
     แถบเลือกไอเทมที่กว้าง 4,480px จึงดันพาเนลจนทั้งหน้าล้นออกไป 4,793px
     บนจอ 1,280px แทนที่จะเลื่อนอยู่ในกรอบตัวเอง */
  min-width:0;
}
.phead{display:flex; align-items:flex-start; gap:12px; margin-bottom:18px}
.phead.tight{margin-bottom:12px}
.phead > div:first-child{min-width:0}
.phead h2{margin:0; font-size:20px; font-weight:800}
.phead h3{margin:0; font-size:16px; font-weight:700}
.phead .sub{margin:3px 0 0; color:var(--dim); font-size:12.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* แถวปุ่มของแผงตัวละคร ใช้เฉพาะหน้าแรกกับสองหน้าสุ่ม
   **ต้องขึ้นบรรทัดใหม่ได้** ตั้งแต่เพิ่มปุ่มโหวตเข้าไปเป็น 6 ปุ่ม (2026-08-18)
   ถ้าคง flex:none ไว้ ปุ่มจะดันแผงจนกว้างเกินจอบนโน้ตบุ๊กจอแคบ */
.pactions{margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; min-width:0}
/* บีบระยะขอบในของหกปุ่มนี้ลงนิดหนึ่ง ให้อยู่แถวเดียวได้บนจอ 1280 แบบมีที่เหลือ
   **ห้ามลดความสูง** ปุ่มต้องสูงเท่าปุ่มอื่นทั้งเว็บ ลดเฉพาะแนวนอน */
.pactions .chip .button_top{padding-left:.85em; padding-right:.85em}

/* ชื่อหน่วยลอยอยู่มุมซ้ายบนของเวที (ย้ายมาจากแถวปุ่ม เจ้าของสั่ง 2026-08-18)
   ต้อง pointer-events:none ไม่งั้นจะไปกินการลากหมุนตัวละครตรงมุมนั้น
   เงาข้อความมีไว้ให้อ่านออกทั้งตอนพื้นเวทีสว่างและตอนตัวละครหมุนมาบัง */
.stagename{
  position:absolute; z-index:2; top:12px; left:16px; margin:0; pointer-events:none;
  font-size:18px; font-weight:800; letter-spacing:.01em; color:var(--txt);
  text-shadow:0 1px 2px var(--stage1), 0 0 10px var(--stage1);
}
.badge{
  margin-left:auto; flex:none; align-self:center; font-size:12px; font-weight:600; color:var(--dim);
  background:var(--sunk); border:1px solid var(--line2); border-radius:99px; padding:5px 13px;
}
/* ================= ปุ่มกดยุบ =================

   ดัดแปลงจาก uiverse.io/Voxybuns/lucky-fireant-71 (สัญญาอนุญาต MIT)
   ใช้กับปุ่มทั่วเว็บตามที่เจ้าของสั่ง 2026-08-14 คือ .chip (หมุน / ถอดหมด),
   ปุ่มเลือกหน่วยใน .forcebar, แท็บกลุ่มใน .slottabs และปุ่มกรองประเภทอาวุธใน .cats
   (ก่อนหน้านี้เป็นปุ่มทองขอบไหลของ vinodjangid07 เจ้าของบอกว่าไม่สวย เลยเปลี่ยน)

   หลักการ: ตัว <button> ข้างนอกเป็นแผ่นสีเข้มอยู่เฉย ๆ ส่วนหน้าปุ่มจริงคือ
   <span class="button_top"> ที่ถูกดันขึ้นไป .2em ส่วนที่โผล่ด้านล่างจึงกลายเป็นขอบหนา
   ตอนชี้ดันขึ้นอีกเป็น .33em (ลอยสูงขึ้น) ตอนกดดันลงเป็น 0 (ยุบลงไปสนิท)
   **ทุกปุ่มต้องมี <span class="button_top"> ครอบข้อความ** ไม่งั้นจะเหลือแค่แผ่นสีเข้ม

   **ที่แก้จากต้นฉบับ**
   1. ต้นฉบับใช้สีเดียว (--button_outline_color) เป็นทั้งขอบ แผ่นล่าง และสีตัวหนังสือ
      ที่นี่แยกสีตัวหนังสือออกมาเป็น --btn_ink ต่างหาก เพราะธีมมืดต้องใช้ขอบสีเทา
      (ขอบดำบนพื้น #191a1a จะจมหายไปจนไม่เห็นมิติ) แต่ตัวหนังสือสีเทาบนหน้าปุ่ม #e8e8e8
      จะได้ contrast แค่ 2.2 ต่อ 1 ซึ่งตกเกณฑ์ AA **ห้ามยุบกลับเป็นตัวแปรเดียว**
   2. ต้นฉบับ font-size 17px padding .75em 1.5em ใหญ่เกินไปสำหรับปุ่มในแผง จึงย่อลง
   3. เพิ่มสถานะ .on ซึ่งต้นฉบับไม่มี ปุ่มที่เลือกอยู่จะยุบลงสนิทและเปลี่ยนหน้าปุ่ม
      เป็นสีหลักของธีม อ่านออกทันทีว่าอันไหนถูกเลือกโดยไม่ต้องพึ่งสีอย่างเดียว */
.chip,.forcebar button,.cats button,.slottabs button{
  --button_radius:.75em;
  --btn_face:#e8e8e8;       /* หน้าปุ่ม เทาอ่อนออกขาว เหมือนกันทั้งสองธีม (เจ้าของสั่ง) */
  --btn_ink:#101828;        /* ตัวหนังสือบนหน้าปุ่ม เข้มเสมอเพื่อให้อ่านออก */
  --btn_edge:#101828;       /* ขอบและแผ่นล่าง ธีมมืดใช้คนละค่า (ดูบล็อกข้างล่าง) */

  /* ปุ่มที่เลือกอยู่ใช้สีส้มของธีมสว่าง **ทั้งสองธีม** (เจ้าของสั่ง 2026-08-14)
     ก่อนหน้านี้ผูกกับ var(--acc) ซึ่งทำให้ธีมมืดกลายเป็นเขียว เจ้าของขอส้มเหมือนกันหมด
     **นี่คือข้อยกเว้นของกติกา "ธีมมืดห้ามมีสีส้ม"** ที่เขียนไว้หัวไฟล์
     ใช้ได้เฉพาะหน้าปุ่มที่ถูกเลือกเท่านั้น ห้ามลามไปที่อื่นในธีมมืด
     ตัวหนังสือใช้น้ำตาลเกือบดำเหมือน --accOn ของธีมสว่าง (contrast 6.1 ต่อ 1 ผ่าน AA) */
  --btn_on_face:#ef7f2e;
  --btn_on_ink:#2b1708;

  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  padding:0; border:none; border-radius:var(--button_radius);
  background:var(--btn_edge);
  min-width:0;
}
.chip .button_top,.forcebar button .button_top,.cats button .button_top,
.slottabs button .button_top{
  display:block; box-sizing:border-box;
  border:2px solid var(--btn_edge); border-radius:var(--button_radius);
  padding:.6em 1.2em;
  background:var(--btn_face); color:var(--btn_ink);
  transform:translateY(-.2em);
  transition:transform .1s ease, background .18s ease, color .18s ease;
}
.chip:hover .button_top,.forcebar button:hover .button_top,
.cats button:hover .button_top,.slottabs button:hover .button_top{transform:translateY(-.33em)}
.chip:active .button_top,.forcebar button:active .button_top,
.cats button:active .button_top,.slottabs button:active .button_top{transform:translateY(0)}
/* ปุ่มที่เลือกอยู่ = ยุบลงสนิทและเปลี่ยนเป็นสีส้ม (เหมือนกันทั้งสองธีม)
   **ห้ามเปลี่ยนกลับไปใช้ var(--acc)** ธีมมืดจะกลายเป็นเขียวซึ่งเจ้าของไม่เอา */
.chip.on .button_top,.forcebar button.on .button_top,.cats button.on .button_top,
.slottabs button.on .button_top{
  transform:translateY(0); background:var(--btn_on_face); color:var(--btn_on_ink);
}
/* ปุ่มราคากระพริบตอนมีของใส่อยู่ (เจ้าของสั่ง 2026-09-03)
   ยังไม่ใส่อะไรเลย = ปุ่มธรรมดา ใส่ชิ้นเดียวก็เริ่มวิ๊บ ๆ เรียกให้ไปกดดูราคา
   ตัวติดคลาส .nudge อยู่ที่ hintPrice() ใน dashboard.js เรียกจาก refresh()

   สองชั้น วงแหวนขยายออกจากตัวปุ่ม กับหน้าปุ่มสลับเป็นสีส้มเป็นจังหวะ
   ใช้สีส้มชุดเดียวกับปุ่มที่ถูกเลือก (--btn_on_face) จะได้ไม่มีสีใหม่โผล่มาในธีมมืด
   **หน้าปุ่มต้องกลับมาเป็นสีเดิมทุกจังหวะ** ถ้าค้างสีส้มจะอ่านเป็นปุ่มที่ถูกเลือกอยู่ */
@keyframes pricering{
  0%   {box-shadow:0 0 0 0 rgba(239,127,46,.55)}
  70%  {box-shadow:0 0 0 .55em rgba(239,127,46,0)}
  100% {box-shadow:0 0 0 0 rgba(239,127,46,0)}
}
@keyframes priceface{
  0%,100%{background:var(--btn_face); color:var(--btn_ink)}
  50%    {background:var(--btn_on_face); color:var(--btn_on_ink)}
}
.chip#price.nudge{animation:pricering 1.7s ease-out infinite}
.chip#price.nudge .button_top{animation:priceface 1.7s ease-in-out infinite}
/* คนที่ตั้งเครื่องว่าไม่เอาภาพเคลื่อนไหว ให้เป็นไฮไลต์นิ่ง ๆ แทน ไม่ใช่ไม่มีอะไรเลย
   ไม่งั้นคนกลุ่มนั้นจะไม่ได้สัญญาณว่ากดดูราคาได้แล้ว */
@media (prefers-reduced-motion: reduce){
  .chip#price.nudge{animation:none; box-shadow:0 0 0 .18em rgba(239,127,46,.45)}
  .chip#price.nudge .button_top{
    animation:none; background:var(--btn_on_face); color:var(--btn_on_ink);
  }
}

/* ธีมมืด: ขอบดำจะจมหายไปกับพื้น #191a1a ใช้เทากลางแทนถึงจะเห็นมิติ
   เขียนสามชุดตามกติกาสีข้างบน (ค่าตั้งต้นของโหมดสว่างอยู่ในกฎรวมข้างบนแล้ว) */
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .forcebar button,
:root[data-theme="dark"] .cats button,
:root[data-theme="dark"] .slottabs button{--btn_edge:#5f6664}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .chip,
  :root:not([data-theme="light"]) .forcebar button,
  :root:not([data-theme="light"]) .cats button,
  :root:not([data-theme="light"]) .slottabs button{--btn_edge:#5f6664}
}

/* เวที 3D */
.stage3d{
  position:relative; height:clamp(420px,58vh,660px); border-radius:var(--r2);
  border:1px solid var(--line2); overflow:hidden; touch-action:none; cursor:grab;
  background:
    radial-gradient(ellipse 62% 42% at 50% 96%, var(--stageGlow), transparent 70%),
    linear-gradient(180deg, var(--stage1), var(--stage2));
  box-shadow:inset 0 1px 2px rgba(16,24,40,.06);
}
.stage3d.drag{cursor:grabbing}
.stage3d canvas{display:block; width:100%; height:100%}
.stagemsg{
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--dim); font-size:13.5px; pointer-events:none; text-align:center; padding:18px;
}

/* แถบเลือกหน่วย
   ใช้ grid ให้ทุกปุ่มกว้างเท่ากันเป๊ะ (เจ้าของขอให้เรียงเป็นระเบียบ)
   ถ้าใช้ flex ปุ่มจะกว้างตามความยาวชื่อ FORCERECON กับ SRG เลยไม่เท่ากัน */
.forcebar{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:8px; margin-top:18px;
}
/* หน้าตาปุ่มหน่วยอยู่ในหมวด "ปุ่มกดยุบ" ข้างล่าง (เจ้าของสั่ง 2026-08-14)
   เหลือไว้ตรงนี้เฉพาะเรื่องขนาดกับการตัดคำที่เป็นของแถบหน่วยโดยเฉพาะ
   การตัดคำต้องไปอยู่ที่ .button_top ไม่ใช่ที่ตัวปุ่ม เพราะหน้าปุ่มจริงคือ span ตัวนั้น */
.forcebar button{font-size:11.5px; letter-spacing:.02em}
.forcebar button .button_top{
  padding:.7em .6em; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* ช่องใส่ของ */
/* คอลัมน์ขวา เรียงบนลงล่าง: สถานะรวม > ป้ายและฉายา > ที่ใส่อยู่ (เจ้าของสั่ง 2026-08-15)
   สามแผงรวมกันแล้วต้องสูงเท่าแผงตัวละคร สถานะรวมกับที่ใส่อยู่กินตามเนื้อจริง
   ที่เหลือเท่าไหร่ยกให้แผงป้ายและฉายาทั้งหมด (เดิมคลาสนี้ชื่อ .midcol) */
.rightcol{display:flex; flex-direction:column; gap:22px; min-width:0}

/* แผงที่ต้องยืดเต็มความสูงคอลัมน์ แล้วให้กล่องรายการข้างในกินที่ว่างที่เหลือ */
.gearmain,.badgepanel,.rightcol > .side{display:flex; flex-direction:column}
/* **flex-basis ต้องเป็น auto ห้ามใช้ 0**
   ถ้าเป็น 0 flexbox จะคิดว่าแผงนี้ไม่ต้องการที่เลย แล้วยกที่ทั้งหมดให้แผงสถานะรวม
   แผงป้ายและฉายาจะเหลือ 150px แล้วเนื้อในล้นออกนอกกรอบ (เจอมาแล้ว)
   พอเป็น auto ความต้องการของมันคือหัวแผงบวก min-height ของรายการ ซึ่งกันที่ไว้ได้จริง
   ส่วน grow 1 มีไว้ให้มันเป็นตัวรับที่ว่างที่เหลือ ถ้าจอสูงกว่าที่ทุกแผงต้องการ */
.badgepanel{flex:1 1 auto; min-height:0}
.gearmain #slotList,.badgepanel #badgeList{
  /* flex-basis 0 คือหัวใจ มันทำให้เนื้อในไม่ถูกนับตอนคิดความสูงของแถว
     min-height ไว้กันแผงยุบจนไม่เหลือที่ให้เลื่อนดูของ เวลาจอเตี้ยมาก */
  flex:1 1 0; max-height:none;
}
.gearmain #slotList{min-height:150px}
/* ป้ายและฉายามีสองช่อง Emblem สูงราว 210px และ Title สูงราว 190px รวมขอบล่างแล้ว
   ตั้ง 440px เพื่อให้เห็นครบทั้งสองช่องพร้อมกันโดยไม่ต้องเลื่อน (เจ้าของสั่ง 2026-08-14)

   **ค่านี้เป็นตัวกำหนดความสูงของทั้งแถว** เพราะคอลัมน์ขวาต้องการที่มากกว่าแผงตัวละคร
   ไปแล้ว แผงตัวละครกับแผงชุดจึงถูกยืดตามมาให้เท่ากัน ที่ว่างที่แผงตัวละครได้มาเพิ่ม
   ถูกยกให้เวที 3D ทั้งหมด (ดู .doll กับ .stage3d) จะได้ไม่เหลือช่องว่างเปล่า ๆ
   ถ้าอยากให้หน้าสั้นลง ลดเลขนี้ลง แล้วทุกอย่างจะเตี้ยตามกันหมด */
.badgepanel #badgeList{min-height:440px}

/* แผงตัวละครเป็น flex column เพื่อคุมว่าที่ว่างที่ได้มาเพิ่มจะไปลงตรงไหน

   **เวที 3D ผูกความสูงไว้กับความกว้างของตัวเองด้วย aspect-ratio ห้ามเปลี่ยนเป็น max-height เป็น px**
   กล้องใน viewer.js ตั้ง field of view แนวตั้งไว้ตายตัวที่ Math.PI/4 (M.persp)
   ตัวละครถูกย่อให้ด้านยาวสุดเป็น 2.4 หน่วย (fit = 2.4 / span) กล้องอยู่ห่าง 4.2
   จึงเห็นโลกสูงครึ่งหนึ่ง 1.74 หน่วย ส่วนกว้างครึ่งหนึ่งเท่ากับ 1.74 คูณสัดส่วนกว้าง/สูง
   ที่สัดส่วน 0.62 ได้ครึ่งความกว้าง 1.08 ซึ่งกินช่วงแขนของท่า A-pose สบาย ๆ
   ถ้าสัดส่วนลงไปต่ำกว่าราว 0.5 ปลายแขนจะเริ่มโดนขอบตัด

   เคยลองใช้ max-height เป็น px มาแล้วและใช้ไม่ได้ เพราะคอลัมน์แคบลงตามความกว้างจอ
   ที่จอ 1400px สัดส่วนตกไปเหลือ 0.486 ทั้งที่ตอนทดสอบบนจอ 1600px ยังดูดีอยู่
   ผูกกับความกว้างแบบนี้แล้วสัดส่วนคงที่ทุกขนาดจอโดยไม่ต้องเดา */
.panel.doll{display:flex; flex-direction:column}
.panel.doll .stage3d{
  flex:0 0 auto; height:auto; aspect-ratio:.62; min-height:420px; max-height:none;
}
/* **แถบเลือกหน่วยต้องไม่ยืด** (เจ้าของสั่ง 2026-09-11 ทับของเดิม 2026-08-14)

   ความสูงของทั้งแถวถูกกำหนดโดย **คอลัมน์ขวา** ไม่ใช่แผงนี้
   (สถานะรวม + ป้ายและฉายาที่ตรึงไว้ที่ `#badgeList{min-height:440px}` + ที่ใส่อยู่)
   วัดบนจอ 1600x1000 ได้แถว 1143px ส่วนแผงตัวละครต้องการเองแค่ราว 900px
   ที่เหลืออีกราว 240px จึงเป็นที่ว่างที่ต้องเอาไปลงที่ไหนสักแห่ง

   ของเดิมยกให้แถบหน่วยด้วย `flex:1 1 auto` + `align-content:space-between`
   ปุ่มไม่ได้สูงขึ้นก็จริง แต่สี่แถวถูกดันห่างกันจนแถบสูง 340px แทนที่จะเป็น 156px
   เจ้าของดูของจริงบนจอเต็มแล้วบอกว่าแบบชิดสวยกว่า จึงไม่ยืดแล้ว
   ที่ว่างไปกองอยู่ท้ายแผงแทน ซึ่งเป็นสิ่งที่คำสั่งเดิมพยายามเลี่ยง

   **ห้ามแก้ด้วยการยกที่ว่างให้เวที 3D** เวทีผูกความสูงไว้กับความกว้างด้วย
   aspect-ratio:.62 ถ้าปล่อยให้สูงขึ้นอีก 240px สัดส่วนจะตกไปราว 0.46
   ซึ่งต่ำกว่า 0.5 แล้วปลายแขนท่า A-pose จะโดนขอบตัด (ดูเหตุผลเต็มข้างบน)
   ถ้าอยากให้ที่ว่างหายไปจริง ๆ ต้องไปลดความสูงของคอลัมน์ขวาที่เป็นต้นเหตุ
   ซึ่งหมายถึงลด min-height 440px ของแผงป้าย ที่เจ้าของตั้งไว้เองเมื่อ 2026-08-14 */
.panel.doll .forcebar{flex:0 0 auto}

/* **สถานะรวมต้องยอมหด แต่ต้องไม่โต** คือ flex:0 1 auto
   คอลัมน์นี้มีที่ให้แบ่งกันเท่ากับความสูงของแผงตัวละคร ไม่มีมากกว่านั้น
   แผงสถานะรวมกินตามเนื้อจริงคือ 667px ซึ่งเกือบหมดคอลัมน์

   ถ้าตั้ง grow เป็น 1 มันจะแย่งที่ว่างที่เหลือไปจากแผงป้ายและฉายาจนล้นออกนอกกรอบ
   ถ้าตั้ง shrink เป็น 0 มันก็จะไม่ยอมคืนที่ให้เลย ผลเหมือนกัน (เจอมาแล้วทั้งสองแบบ)

   ตัวที่ยอมหดจริง ๆ คือแผงหลอดค่าสถานะ เพราะเป็นก้อนที่ใหญ่ที่สุด (9 แถว รวม 378px)
   หดแล้วยังเลื่อนดูต่อได้ครบทุกแถว ส่วนรายการ "ที่ใส่อยู่" ไม่หด */
.rightcol > .side{flex:0 1 auto; min-height:0}
/* แผง "ที่ใส่อยู่" ถูกแยกออกมาเป็นแผงของตัวเองและย้ายไปล่างสุด (เจ้าของสั่ง 2026-08-15)
   ลำดับใหม่ของคอลัมน์ขวาคือ สถานะรวม > ป้ายและฉายา > ที่ใส่อยู่
   กติกา flex เหมือนแผงสถานะรวมเป๊ะ คือยอมหดแต่ห้ามโต ไม่งั้นพอใส่ของเยอะ ๆ
   มันจะไปแย่งที่ของแผงป้ายจนป้ายหดลงทุกครั้งที่ใส่ของเพิ่ม */
.rightcol > .wornpanel{flex:0 1 auto; min-height:0; display:flex; flex-direction:column}
.rightcol > .wornpanel .wornlist{flex:1 1 0; min-height:90px; max-height:none; overflow-y:auto}
/* **flex-basis ต้องเป็น 0 ห้ามใช้ auto** หลอดค่าสถานะ 9 แถวสูงตามเนื้อจริง 378px
   ถ้าเป็น auto ความสูงก้อนนั้นจะถูกนับเป็นความต้องการของคอลัมน์ขวา แล้วดันทั้งแถวสูงขึ้น
   จนแผงตัวละครมีที่เหลือเกินกว่าที่เวที 3D จะรับไหว (เวทีมี max-height กันแขนโดนตัด)
   ผลคือเกิดช่องโหว่ 237px คั่นระหว่างเวทีกับแถบเลือกหน่วย ซึ่งเจ้าของทักมา 2026-08-14
   พอเป็น basis 0 ก้อนนี้ก็แค่ไหลไปเติมที่ว่างที่เหลือ ไม่ไปกำหนดความสูงของใคร */
.rightcol > .side .totals{flex:1 1 0; min-height:200px; overflow-y:auto; padding-right:4px}

.gearpick .psearch{
  margin-left:auto; flex:0 1 220px; min-width:0; align-self:center;
  padding:9px 15px; font-size:13.5px; font-family:inherit;
  background:var(--sunk); border:1px solid var(--line); border-radius:99px; color:var(--txt);
}
.gearpick .psearch::placeholder{color:var(--dim)}
.gearpick .psearch:focus{outline:none; border-color:var(--accLine)}
/* ---- แท็บกลุ่มช่องใส่ของ ----
   ใช้ปุ่มกดยุบชุดเดียวกับปุ่มหน่วยและปุ่มหมุน (เจ้าของสั่ง 2026-08-14 ให้สีเหมือนกันเลย)
   หน้าตาและสีทั้งหมดอยู่ในหมวด "ปุ่มกดยุบ" ข้างบน ตรงนี้เหลือแค่การจัดวางของแถบ

   เดิมเป็นเม็ดยาไฟวิ่งรอบขอบของ uiverse.io/MuhammadHasann/mean-bird-62
   ซึ่งมี .dots_border กับ .text_button อยู่ข้างใน ถ้าจะเอากลับดูได้จาก git history
   (ตอนนี้ในโครงสร้าง HTML เหลือแค่ span.button_top เหมือนปุ่มอื่นแล้ว) */
.slottabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
/* แถบย่อยเลือกช่องภายในกลุ่ม (เจ้าของสั่ง 2026-09-11)
   ใช้คลาส .slottabs ร่วมด้วยเพื่อให้ได้ปุ่มกดยุบหน้าตาเดียวกับแท็บกลุ่มทั้งชุด
   แล้วย่อขนาดลงตรงนี้ให้อ่านออกว่าเป็นชั้นรอง ไม่ใช่แท็บหลักอีกแถว
   margin-top ติดลบไว้ดึงขึ้นไปชิดแท็บกลุ่ม ให้อ่านเป็นของคู่กัน ไม่ใช่คนละส่วน */
/* **แถวเดียวเลื่อนซ้ายขวา ห้ามตัดขึ้นบรรทัดใหม่** (เจ้าของสั่ง 2026-09-11 รอบสอง)
   กลุ่ม "หัว" มี 11 ช่อง ปล่อยให้ตัดบรรทัดแล้วกินสองถึงสามแถว ดูรกกว่าที่ควร
   ตรงนี้จึงทับ flex-wrap:wrap ที่ได้มาจาก .slottabs

   **ต้องมี padding บน-ล่างเผื่อไว้** หน้าปุ่ม (.button_top) ถูกดันขึ้น .2em
   และตอนชี้ดันขึ้นอีกเป็น .33em พอ overflow-x เป็น auto แล้ว overflow-y
   จะกลายเป็น auto ตามไปด้วยตามสเปก ถ้าไม่เผื่อที่ ขอบปุ่มจะโดนตัด
   หรือมีแถบเลื่อนแนวตั้งจิ๋ว ๆ โผล่มาแทน

   ลากด้วยเมาส์ได้เหมือนรายการอื่นในหน้า ตัวขับคือ dragScroll() ใน dashboard.js */
.subtabs{
  gap:6px; margin:-8px 0 14px;
  flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
  padding:5px 2px 7px; scrollbar-width:thin;
}
.subtabs button{flex:none}
/* ย่อให้สูงใกล้เคียงเม็ด .slotcount (เจ้าของสั่ง 2026-09-11)
   อ่านเป็นชั้นรองของแท็บกลุ่มชัดขึ้นด้วย ไม่ใช่แท็บหลักอีกแถว */
.subtabs button{font-size:11px}
.subtabs button .button_top{padding:.3em .75em; border-width:1px}
/* ตัวเลขจำนวนชิ้นต่อท้ายชื่อช่อง จางลงเพื่อไม่ให้แย่งสายตาไปจากชื่อ */
.subtabs button i{font-style:normal; font-size:.88em; opacity:.62; margin-left:5px}
.subtabs button.on .button_top i{opacity:.75}
.slotlist{max-height:clamp(420px,58vh,660px); overflow-y:auto; padding-right:6px}
/* ตอนกำลังลากเลื่อนด้วยเมาส์ (ตัวขับอยู่ใน dashboard.js)
   ต้องปิดการเลือกข้อความ ไม่งั้นลากทีเดียวได้ข้อความไฮไลต์ทั้งแผง
   และเปลี่ยนเคอร์เซอร์ทั้งการ์ดด้วย เพราะ .gcard ตั้ง cursor:pointer ทับไว้ */
.slotlist.dragging{cursor:grabbing; user-select:none}
.slotlist.dragging .strip,.slotlist.dragging .gcard{cursor:grabbing}
/* แถบย่อยก็ลากได้เหมือนกัน ใช้ตัวขับตัวเดียวกัน */
.subtabs.dragging{cursor:grabbing; user-select:none}
.subtabs.dragging button{cursor:grabbing}
/* ป้ายและฉายามีแค่ 2 ช่อง ความสูงจริงคุมด้วย min-height ของ .badgepanel #badgeList
   ที่ตั้งไว้ 440px เพื่อให้เห็นครบทั้ง Emblem และ Title โดยไม่ต้องเลื่อน
   บรรทัดนี้เป็นค่าสำรองสำหรับกรณีที่กล่องไม่ได้อยู่ในแผง .badgepanel เท่านั้น */
.badgelist{max-height:clamp(250px,32vh,400px)}
.slot{margin-bottom:20px; min-width:0}
.slothead{display:flex; align-items:center; gap:9px; margin-bottom:9px}
.slotname{font-size:13.5px; font-weight:700}
.slotcount{font-size:11px; color:var(--dim); background:var(--sunk);
  border:1px solid var(--line2); border-radius:99px; padding:2px 9px}
.unequip{
  margin-left:auto; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer;
  padding:4px 11px; border-radius:99px; background:transparent;
  border:1px solid var(--line); color:var(--dim);
  transition:color .18s ease, border-color .18s ease;
}
.unequip:hover{color:var(--warn); border-color:var(--warn)}

/* ตารางเลือกไอเทม **เดิมเป็นแถบเลื่อนซ้ายขวา เปลี่ยนเป็นไหลลงมา (เจ้าของสั่ง 2026-09-11)**

   ของเดิมเป็น flex + overflow-x:auto ช่องหนึ่งจึงเป็นแถบยาวเส้นเดียว
   ช่อง "หมวก" ของ PSU มี 134 ชิ้น ซึ่งแปลว่าต้องลากไปทางขวาสิบกว่าหน้าจอถึงจะเห็นครบ
   ของที่อยู่ท้ายแถบจึงแทบไม่มีใครเคยเห็น ตอนนี้ไหลลงมาเป็นตารางแล้วเห็นทุกชิ้น
   โดยเลื่อนลงอย่างเดียว ซึ่งเป็นทิศที่ล้อเมาส์กับนิ้วปัดทำได้อยู่แล้ว

   คู่กับปุ่มกรองช่องบนแถบย่อย (.subtabs) ไว้ตัดให้เหลือช่องเดียวถ้าของเยอะเกินไป

   **ต้องมี minmax(0, 1fr) ไม่ใช่ 1fr เฉย ๆ** และ .gcard ต้อง width:auto ทับค่าเดิม
   ที่ตั้งไว้ 132px ตายตัว ไม่งั้นการ์ดจะไม่ยืดเต็มช่อง (กติกาเดียวกับ .bgrid)
   เผื่อที่ว่างรอบ ๆ ไว้ 3px ให้แสงฟุ้งของการ์ดตอนชี้ไม่โดนกรอบตัด */
.strip{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(126px, 1fr));
  gap:10px; padding:3px 3px 10px;
}
.strip .gcard{width:auto; flex:auto}

/* การ์ดไอเทม: ตอนชี้หรือกดเลือกจะย่อลงนิดหนึ่งแล้วมีแสงฟุ้งขึ้นมา
   ดัดแปลงจาก uiverse.io/LightAndy1/empty-catfish-94 (สัญญาอนุญาต MIT)
   ต้นฉบับเป็นกล่องสองชั้นซ้อนกัน (ชั้นนอกไล่สี ชั้นในเป็นเนื้อการ์ดที่ย่อลงตอนชี้)

   **เอาขอบไล่สีออกแล้ว (เจ้าของสั่ง 2026-08-14)** เดิมเป็น ::after ที่ไล่สีจาก
   --cardRing1 ไป --cardRing2 วางไว้หลังการ์ด ตอนนี้เหลือแค่แสงฟุ้ง --cardGlow
   กับการย่อขนาด ตัวแปร --cardRing1 กับ --cardRing2 ถูกลบทิ้งแล้ว
   ถ้าจะเอากลับ ต้องเพิ่มทั้งตัวแปรใน :root และกฎ .gcard::after กลับมาพร้อมกัน */
.gcard{
  position:relative; flex:none; width:132px; cursor:pointer; text-align:left;
  font:inherit; padding:8px; border-radius:var(--r2);
  background:var(--panel); border:1px solid var(--line); color:var(--txt);
  box-shadow:var(--sh1);
  transition:transform .25s cubic-bezier(0,0,0,1), box-shadow .25s cubic-bezier(0,0,0,1),
             border-color .18s ease, border-radius .25s cubic-bezier(0,0,0,1);
}
.gcard:hover,.gcard:focus-visible{
  transform:scale(.97); border-radius:calc(var(--r2) + 4px);
  box-shadow:var(--sh2), 0 0 26px 1px var(--cardGlow);
}
.gcard.on{
  border-color:var(--accLine); background:var(--accSoft);
  box-shadow:var(--sh2), 0 0 22px 1px var(--cardGlow);
}
@media (prefers-reduced-motion: reduce){
  .gcard:hover,.gcard:focus-visible{transform:none}
}
.gcard img,.gcard .noimg{
  display:block; width:100%; height:54px; object-fit:contain; border-radius:12px;
  background:var(--sunk); margin-bottom:7px;
}
.gcard b{display:block; font-size:11.5px; font-weight:700; line-height:1.3;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.gcard .mini{display:block; margin-top:4px; font-size:10px; color:var(--dim); line-height:1.4}
.gcard .d3{
  position:absolute; top:6px; right:6px; font-style:normal; font-size:9px; font-weight:800;
  padding:2px 6px; border-radius:6px; background:var(--acc); color:var(--accOn);
}
/* Title เป็นแบนเนอร์แนวยาว ไม่ใช่ไอคอนสี่เหลี่ยมเหมือน Emblem */
.gcard img.wide{height:32px; object-fit:contain}

/* ของที่ไฟล์เกมไม่มีรูปทรง 3D ใส่ได้และได้ค่าสถานะ แต่ตัวละครจะไม่เปลี่ยน
   ทำให้ดูจางลงนิดเดียวและติดป้ายบอกไว้ ไม่ได้ห้ามกด */
.gcard.flat img,.gcard.flat .noimg{opacity:.62}
.gcard.flat b{color:var(--dim)}
.gcard.flat.on b{color:var(--txt)}
.d3.no3d{
  background:var(--sunk2); color:var(--dim); font-weight:700;
  border:1px solid var(--line); font-size:8.5px; letter-spacing:.02em;
}
/* ป้ายระยะการป้องกัน อยู่มุมซ้ายบนเพื่อไม่ให้ชนกับป้าย "ไม่มี 3D" ที่มุมขวาบน
   ชิ้นที่ไม่มี 3D จึงมีสองป้ายพร้อมกันได้โดยไม่ทับกัน */
.gcard .d3.rng{
  right:auto; left:6px;
  background:var(--rngBg); color:var(--rngInk); border:1px solid var(--rngLine);
  font-size:8.5px; font-weight:800; letter-spacing:.02em;
}
.slotflat{
  font-size:10.5px; color:var(--dim); background:var(--sunk);
  border:1px solid var(--line2); border-radius:99px; padding:1px 8px; white-space:nowrap;
}

/* สถานะรวม */
.totals{margin-bottom:6px}
.totals .srow{grid-template-columns:120px 1fr 54px}
.srow.tight{grid-template-columns:56px 1fr 34px; margin-bottom:8px}
.worn{border-top:1px solid var(--line); margin-top:18px; padding-top:18px}
/* แผงที่ใส่อยู่เป็นแผงของตัวเองแล้ว ไม่ต้องมีเส้นคั่นหรือหัวข้อซ้อนอีกชั้น */
.wornpanel .wornlist{max-height:none}
.worn h3{margin:0 0 11px; font-size:15px; font-weight:700}
.wornlist{max-height:230px; overflow-y:auto}
.wrow{display:flex; align-items:center; gap:9px; padding:7px 0; font-size:12.5px;
  border-bottom:1px solid var(--line2)}
.wrow:last-child{border-bottom:0}
.wslot{color:var(--dim); flex:none; width:92px; font-size:11.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wrow .wname{flex:1; min-width:0; font-weight:700; font-size:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.flag{font-style:normal; font-size:9.5px; padding:2px 7px; border-radius:6px; flex:none;
  background:var(--acc2Soft); color:var(--acc2)}
.flag.dim{background:var(--sunk); color:var(--dim)}
.note{margin:10px 0 0; color:var(--dim); font-size:12px}

/* แถบเลื่อนให้เข้ากับธีม (WebKit) */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--line); border-radius:99px; border:2px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--dim); background-clip:content-box}

/* ================= ลูกเล่นแซวคนเปิด DevTools =================
   ตัวขับอยู่ใน guard.js ป้ายจะโผล่มุมขวาล่างแล้วหายเองใน 4 วินาที
   z-index สูงกว่าหัวเว็บ (20) และแผงรายละเอียดที่เป็น <dialog> วาดอยู่ชั้นบนสุดอยู่แล้ว */
.jab{
  position:fixed; right:18px; bottom:18px; z-index:9999; max-width:min(340px,86vw);
  padding:12px 18px; border-radius:var(--r2); pointer-events:none;
  background:var(--panel); border:1px solid var(--accLine); color:var(--txt);
  font-size:15px; font-weight:700; line-height:1.5;
  /* ใช้ --accGlow ไม่ใช่ --cardGlow เพราะสีชมพูอมม่วงสงวนไว้ให้กรอบการ์ดอย่างเดียว */
  box-shadow:var(--sh3), 0 0 30px 1px var(--accGlow);
  opacity:0; transform:translateY(14px) scale(.96);
  transition:opacity .3s ease, transform .3s cubic-bezier(0,-0.02,.35,1.17);
}
.jab.show{opacity:1; transform:translateY(0) scale(1)}

/* ทักทายคนที่เปิดแผง Elements มาส่องด้วย ตัวนี้ไม่ได้แสดงบนหน้าเว็บ
   แต่จะเห็นเป็น ::before ในผังของแผง Elements */
html::before{content:"จุ๊กกรุ๊ววว...หาไรหย๋อ"; display:none}

@media(max-width:1280px){
  /* เหลือสองคอลัมน์: ตัวละคร | ชุดและไอเทม แล้วคอลัมน์ขวาลงมาเต็มความกว้างข้างล่าง
     พอลงมาอยู่แถวของตัวเองก็เรียงป้ายและฉายากับสถานะรวมเป็นซ้ายขวาแทน
     จะได้ไม่ยาวลงไปเรื่อย ๆ */
  .dashwrap{grid-template-columns:1fr 1fr}
  .rightcol{grid-column:1 / -1; flex-direction:row}
  .rightcol > .panel{flex:1 1 0; min-width:0}
  /* พอลงมาเรียงซ้ายขวา คอลัมน์ขวามีสามแผงแล้ว (สถานะรวม ป้าย ที่ใส่อยู่)
     ป้ายและฉายาต้องได้ที่มากกว่าเพื่อน เพราะการ์ด Emblem กับ Title กว้างกว่าเนื้อหาอีกสองแผง
     ถ้าแบ่งเท่ากันสามส่วน การ์ดป้ายจะถูกบีบจนอ่านชื่อไม่ออก */
  .rightcol > .badgepanel{flex:2 1 0}
  /* max-height ของ .badgelist ใช้ไม่ได้แล้วเพราะ min-height:440px ชนะเสมอ
     ป้ายมีแค่สอง ช่อง เนื้อในสูงราว 439px จึงพอดีกรอบอยู่แล้วทุกขนาดจอ */
  .badgepanel #badgeList{flex:none}
}
@media(max-width:900px){
  .top .wrap{flex-wrap:wrap; gap:12px}
  .top nav{order:3; width:100%; margin-left:0; justify-content:center}
  .theme-switch{margin-left:auto}
  th{top:0}
}
@media(max-width:820px){
  .dashwrap{grid-template-columns:1fr; width:94vw; gap:18px}
  .rightcol{grid-column:auto; flex-direction:column; gap:18px}
  /* **ต้องล้าง flex:1 1 0 ของบล็อก 1280px ทิ้ง** เพราะ max-width:1280 ครอบจอเล็กด้วย
     พอกลับมาเรียงเป็นแนวตั้ง flex-basis 0 จะกลายเป็น "ไม่ขอความสูงเลย"
     ทั้งแผงป้ายและฉายาและแผงสถานะรวมจะยุบเหลือ 40px แล้วเนื้อในล้นทะลุออกมา */
  .rightcol > .panel{flex:0 0 auto}
  /* กฎนี้ไม่มีผลแล้ว เพราะ .panel.doll .stage3d ข้างบนแรงกว่าและผูกความสูงไว้กับ
     สัดส่วนความกว้างแทน เก็บไว้เป็นค่าสำรองเผื่อมีเวทีที่ไม่ได้อยู่ในแผงตัวละคร */
  .stage3d{height:clamp(340px,52vh,480px)}
  /* จอเดียวคอลัมน์เดียว แต่ละแผงเป็นแถวของตัวเอง จึงไม่ต้องยืดให้เท่ากันอีกแล้ว
     **ต้องปลด flex:1 1 0 ออก** ไม่งั้นกล่องรายการจะยุบเหลือ 150px ตามค่า min-height */
  .gearmain #slotList{flex:none; max-height:none}
  .badgepanel #badgeList{flex:none}
  .slotlist{max-height:none}
  .phead{flex-wrap:wrap}
  .gearpick .psearch{flex:1 1 100%; margin-left:0}
  .panel{padding:18px 16px 20px; border-radius:22px}
  .prose{padding:22px 20px}
  .hero{padding:26px 0 18px}
}
@media(max-width:560px){
  .brandname b{font-size:14px}
  .brandname span{font-size:9.5px; letter-spacing:.12em}
  .logo{width:38px; height:38px}
  .top nav a{padding:7px 12px; font-size:13.5px}
  /* ปุ่มไล่สีของเมนูที่เปิดอยู่ต้องย่อตามด้วย ไม่งั้นมันจะโดดกว่าเพื่อนบนจอแคบ
     (กฎ .top nav .gradient-btn ข้างบนแรงกว่า .top nav a จึงต้องเขียนย้ำตรงนี้) */
  .top nav .gradient-btn,.top nav .text-overlay{padding:7px 12px; font-size:13.5px}
  .top nav .btn-wrapper{font-size:13.5px}
  /* จอแคบ เมนูขึ้นบรรทัดใหม่จนหัวเว็บสูงเกือบ 170px แล้วกินพื้นที่จอไปเปล่า ๆ
     เปลี่ยนเป็นเลื่อนแนวนอนแถวเดียวแทน หัวเว็บจะเหลือราว 120px
     **ปุ่มไล่สีของเมนูที่เปิดอยู่ต้องไม่ถูกบีบ** ไม่งั้นตัวหนังสือจะซ้อนกัน */
  .top nav .btn-wrapper{flex:none}
  .top nav{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; justify-content:flex-start}
  .top nav::-webkit-scrollbar{display:none}
}

/* คนที่ตั้งเครื่องว่าไม่ชอบภาพเคลื่อนไหว ให้ตัดทรานซิชันทิ้งทั้งหมด */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* ============================================================
   กล่องลอย (ui.js) ปุ่ม Custom แผงกติกา 5-5 และตารางราคา
   เพิ่ม 2026-08-15 พร้อมหน้าชุดสุ่ม 5-5 / 8-8 และปุ่มดูราคา

   กติกาสีเหมือนเดิมทุกอย่าง คือห้ามเขียนค่าสีลงไปตรง ๆ ในกฎ
   ทุกสีที่ใช้ตรงนี้เป็นตัวแปรที่ประกาศไว้แล้วทั้งสองธีม
   ============================================================ */

/* ---------- กล่องลอยกลางจอ ---------- */
.modalbg{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(8,12,18,.55); backdrop-filter:blur(3px);
  animation:modalIn .16s ease-out;
}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
.modalbox{
  width:min(560px,100%); max-height:min(82vh,720px); display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:22px; box-shadow:var(--sh3);
}
.modalbox.wide{width:min(760px,100%)}
/* flex-wrap ที่หัวกล่องมีไว้เผื่อกล่องที่มีปุ่มเยอะ (กล่องโหวตมีช่องป้ายสองช่อง
   ปุ่มแชร์ และปุ่มกากบาท) บนมือถือแถวปุ่มจะตกลงไปอยู่บรรทัดล่างเอง
   ไม่ไปบีบชื่อกล่องจนเหลือบรรทัดละคำ ส่วนกล่องที่มีแค่ปุ่มกากบาทยังอยู่แถวเดียวเหมือนเดิม
   เพราะมันกว้างแค่ 36px จึงไม่มีวันดันจนต้องขึ้นบรรทัดใหม่ */
.modalhead{
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:12px;
  padding:20px 22px 14px; border-bottom:1px solid var(--line);
}
.modalhead h2{margin:0; font-size:18px; font-weight:700}
.modalhead .sub{margin:4px 0 0; font-size:12.5px; color:var(--dim)}
/* **flex:none ไม่ได้แล้ว** พอหัวกล่องมีปุ่มเยอะ (ช่องป้ายสองช่อง ปุ่มแชร์ กากบาท)
   ความกว้างรวมของแถวนี้เกินตัวกล่องบนมือถือ ถ้าล็อกเป็น flex:none มันจะยืนกรานใช้
   ความกว้างเต็มของตัวเองแล้วล้นออกนอกกล่อง ต้องยอมให้หดได้ ตัวมันเองมี flex-wrap
   อยู่แล้ว ปุ่มข้างในจึงตกลงบรรทัดใหม่แทนที่จะถูกบีบ */
.modalhead .dacts{
  margin-left:auto; flex:0 1 auto; max-width:100%;
  display:flex; align-items:center; gap:8px;
}
/* **ต้องล้าง position:absolute ทิ้ง** `.dclose` ตัวกลางเขียนไว้ให้กล่อง `.detail`
   ของหน้าอาวุธ ซึ่งปักมุมขวาบนของกล่องนั้น พอเอามาใช้ในกล่องลอย `.modalbox`
   ที่ไม่ได้ตั้ง position มันจะไปยึดกับ `.modalbg` คือมุมขวาบนของ **จอ** แทน
   ผลคือบนมือถือปุ่มกากบาทซ้อนทับปุ่มแชร์อยู่ ในกล่องนี้ให้มันเป็นปุ่มธรรมดาในแถวไปเลย
   (เจอตอนเพิ่มช่องป้ายลงหัวกล่อง 2026-08-19 ของเดิมทับกันอยู่ก่อนแล้ว) */
.modalhead .dclose{flex:none; position:static}
.modalbody{padding:18px 22px 22px; overflow-y:auto}

/* ---------- กล่องโหวต (เจ้าของสั่ง 2026-08-18) ----------
   เวที 3D เต็มความกว้างของกล่อง ปุ่มอยู่ใต้ตัวละครตามที่สั่งไว้
   ส่วนปุ่มแชร์ไปอยู่บนหัวกล่องข้างปุ่มกากบาท ผ่าน actions ของ openModal */
.votewrap{display:flex; flex-direction:column; gap:14px}
.votestage{height:clamp(380px,52vh,560px)}
.voteacts{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
/* .chip เป็น <button> อยู่แล้ว ปุ่มไปหน้าคะแนนเป็น <a> จึงต้องบังคับให้สูงเท่ากัน */
a.chip{display:inline-flex; align-items:center; text-decoration:none}
/* ปุ่มแชร์ตอนคัดลอกสำเร็จ เปลี่ยนเป็นติ๊กถูกชั่วคราว (เจ้าของสั่ง 2026-08-18)
   ใช้สีเดียวกับสถานะสำเร็จของเว็บ ไม่ได้เพิ่มสีใหม่เข้ามาในชุดสี */
.chip.done .button_top{
  background:var(--ok); color:#fff; border-color:var(--ok);
}
.vnote{text-align:center; min-height:1.2em; margin:0}
.vnote a{color:var(--accInk); font-weight:700}
.vlink{width:100%; margin-top:8px; font-size:12px}
.voteform{
  display:flex; flex-direction:column; gap:10px; margin:0;
  padding:16px; border-radius:var(--r2); background:var(--sunk); border:1px solid var(--line2);
}
.voteform label{font-size:13.5px; font-weight:700}
.voteform .psearch{width:100%}
.vwarn{margin:0; color:var(--warn); font-weight:600; text-align:center}
/* คำเตือนว่าคะแนนประกวดไม่นับป้ายและฉายา (เจ้าของสั่ง 2026-08-19)
   อยู่ใต้ตัวละครเหนือปุ่มส่งประกวด ต้องอ่านออกแต่ไม่แย่งสายตาไปจากตัวละคร
   ถ้าใส่ป้ายอยู่จริง จะได้คลาส .vwarn มาทับสีให้เป็นสีเตือนแทน */

/* ---------- ช่องป้ายบนหัวกล่องโหวต และแผงเลือกป้าย (เจ้าของสั่ง 2026-08-19) ----------

   ช่องป้ายอยู่ใน .dacts ร่วมกับปุ่มแชร์และปุ่มกากบาท ต้องใส่ flex-wrap ให้แถวนั้นด้วย
   ไม่งั้นบนจอแคบมันจะไปบีบหัวข้อกล่องจนชื่อหน่วยหายไป */
.modalhead .dacts{flex-wrap:wrap; justify-content:flex-end}
.vbadge{
  flex:none; width:auto; min-width:56px; min-height:57px; padding:5px 8px 4px; cursor:pointer;
  font:inherit; color:var(--txt);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border-radius:12px; background:var(--sunk); border:1px solid var(--line2);
  transition:border-color .18s ease;
}
.vbadge:hover,.vbadge:focus-visible{border-color:var(--accLine)}
/* ช่องที่ยังไม่ได้ใส่ป้ายใช้เส้นประ บอกว่ายังว่างอยู่โดยไม่ต้องมีข้อความ */
.vbadge.empty{border-style:dashed}
.vbadge img,.vbadge .noimg,.vbadge .vbadd{
  display:block; width:34px; height:34px; object-fit:contain;
}
/* **รูปป้ายกับฉายามีสัดส่วนไม่เหมือนกันเลย ห้ามใช้กล่องเดียวกัน** (เจ้าของสั่ง 2026-08-19)
   Emblem ทุกใบเป็น 64x64 คือสี่เหลี่ยมจัตุรัส ส่วน Title ทุกใบเป็น 128x17
   คือแบนเนอร์ยาวอัตราส่วน 7.5 ต่อ 1 ถ้ายัดลงกล่องกว้าง 54px เท่ากันทั้งคู่
   ฉายาจะถูกย่อจนสูงแค่ 7px อ่านไม่ออกเลย ช่องฉายาจึงกว้างตามแบนเนอร์จริง
   (136px กว้างกว่าของจริงนิดเดียว) ส่วนช่องที่ยังว่างยังแคบเหมือนเดิม
   เพราะข้างในเป็นเครื่องหมายบวกไม่ใช่รูป */
.vbadge[data-badge="title"] img{width:136px; height:auto; aspect-ratio:128/17}
/* จอแคบ ๆ ย่อแบนเนอร์ลงหน่อยเพื่อให้ทั้งแถว (ช่องป้าย ปุ่มแชร์ กากบาท) อยู่บรรทัดเดียวได้
   93px คือความกว้างสูงสุดที่ยังพอดีบนจอ 375px ซึ่งยังใหญ่กว่าของเดิมที่โดนบีบเหลือ 44px */
@media (max-width: 560px){
  .vbadge[data-badge="title"] img{width:93px}
}
.vbadge .vbadd{
  display:flex; align-items:center; justify-content:center; line-height:1;
  font-size:18px; font-weight:700; color:var(--dim);
}
.vbtag{font-size:8.5px; font-weight:800; letter-spacing:.04em; color:var(--dim); line-height:1}

/* แผงเลือกป้าย แทรกอยู่ใน .votewrap ไม่ได้เป็นกล่องซ้อน (กล่องลอยเปิดได้ทีละอัน) */
.bpick{
  display:flex; flex-direction:column; gap:10px; padding:14px;
  border-radius:var(--r2); background:var(--sunk); border:1px solid var(--line2);
}
.bprevrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.bprev{
  flex:none; width:76px; height:54px; padding:4px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:var(--sunk2); border:1px solid var(--line);
}
/* ตัวอย่างของฉายาต้องเป็นกล่องแนวนอน ไม่งั้นแบนเนอร์จะจิ๋วจนดูไม่ออกว่าเลือกอะไรอยู่
   และต้องสั่ง width เต็มกล่อง เพราะ max-width อย่างเดียวจะไม่ขยายรูปให้ใหญ่ขึ้น
   ไฟล์จริงกว้างแค่ 128px ปล่อยไว้จะเหลือช่องว่างรอบ ๆ เยอะเกินไป */
.bpick[data-kind="title"] .bprev{width:172px; height:46px}
.bpick[data-kind="title"] .bprev img{width:100%; height:auto; aspect-ratio:128/17}
.bprev img{max-width:100%; max-height:100%; object-fit:contain}
.bprev .noimg{display:block; width:100%; height:100%; border-radius:8px; background:var(--sunk)}
.bprevtxt{flex:1; min-width:120px}
.bprevtxt b{display:block; font-size:14px; font-weight:700; overflow-wrap:anywhere}
.bprevtxt .note{margin:3px 0 0; font-size:11.5px; line-height:1.5}
.bprevrow .chip{margin-left:auto; flex:none}
/* รายชื่อป้ายเป็นตารางที่ขึ้นบรรทัดใหม่เอง ไม่ใช่แถบเลื่อนแนวนอนแบบหน้าแรก
   เพราะในกล่องลอยการลากแถบแนวนอนบนมือถือจะไปชนกับการเลื่อนตัวกล่องเอง */
.bgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px;
  max-height:min(46vh,330px); overflow-y:auto; padding:2px;
}
.bgrid .gcard{width:auto; flex:auto}
.bgrid .gcard img,.bgrid .gcard .noimg{height:42px; margin-bottom:6px}
/* ตารางฉายาใช้ช่องกว้างกว่าตารางป้าย แบนเนอร์จะได้เต็มความกว้างการ์ดพอดี
   **ต้องมี aspect-ratio ด้วย** รูปในตารางเป็น lazy ตอนยังไม่โหลดมันสูง 0
   ถ้าไม่จองสัดส่วนไว้ การ์ดจะกระตุกทั้งตารางตอนรูปทยอยโหลดเข้ามา */
.bpick[data-kind="title"] .bgrid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.bgrid .gcard img.wide{
  width:100%; height:auto; aspect-ratio:128/17; max-height:28px; margin-bottom:8px;
}
.bgrid .note{grid-column:1 / -1; margin:6px 0}

/* ---------- ป้ายในหน้าคะแนน (เจ้าของสั่ง 2026-08-19) ----------
   อยู่ใต้หลอดสรุปในคอลัมน์กลาง Emblem เป็นไอคอนสี่เหลี่ยม Title เป็นแบนเนอร์แนวยาว
   จึงคุมความสูงคนละค่า ไม่งั้นแบนเนอร์จะสูงเท่าไอคอนแล้วกว้างจนล้นแถว */
.cbadges{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:2px}
.cbadge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 8px; border-radius:10px; background:var(--sunk); border:1px solid var(--line2);
}
.cbadge img{display:block; width:32px; height:32px; object-fit:contain}
/* กติกาเดียวกับช่องป้ายในกล่องโหวต Emblem 64x64 เป็นจัตุรัส Title 128x17 เป็นแบนเนอร์
   ให้ฉายากว้าง 168px (สูงราว 22px) จะได้อ่านชื่อบนแบนเนอร์ออกจริง ๆ */
.cbadge img.wide{width:168px; height:auto; aspect-ratio:128/17}
.cdetail .cbadges{justify-content:center}

/* ---------- กล่องวิธีส่งชุดเข้าประกวด (เจ้าของสั่ง 2026-08-19) ----------
   ไอคอนเป็น SVG ฝังในโค้ด วาดด้วย currentColor จึงเปลี่ยนสีตามธีมให้เอง */
.howto{display:flex; flex-direction:column; gap:16px}
.hwsteps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.hwsteps li{
  display:flex; align-items:flex-start; gap:13px; min-width:0;
  padding:12px 14px; border-radius:var(--r2); background:var(--sunk); border:1px solid var(--line2);
}
.hwnum{
  position:relative; flex:none; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accSoft); border:1px solid var(--accLine); color:var(--accInk);
}
.hwico{width:21px; height:21px}
.hwnum i{
  position:absolute; top:-6px; right:-6px; width:19px; height:19px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--acc); color:var(--accOn); font-style:normal; font-size:10.5px; font-weight:800;
}
.hwsteps b{display:block; margin-bottom:3px; font-size:14px; font-weight:700}
.hwsteps .note{margin:0; line-height:1.65}
.hwrules{padding:14px 16px; border-radius:var(--r2); background:var(--sunk); border:1px solid var(--line2)}
.hwrules b{display:block; margin-bottom:9px; font-size:14px; font-weight:700}
.hwrules ul{
  margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px;
  font-size:13px; color:var(--txt2); line-height:1.65;
}

.vbadgenote{
  margin:0; text-align:center; line-height:1.55;
  padding:8px 12px; border-radius:var(--r2);
  background:var(--sunk); border:1px solid var(--line2);
}

/* ---------- ปุ่ม Custom ---------- */
.csect{margin:0 0 10px; font-size:14px; font-weight:700}
.csect + .cks{margin-bottom:6px}
.cks{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; margin-bottom:14px}
.ck{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:9px 12px; border-radius:12px; font-size:13.5px; font-weight:600;
  background:var(--sunk); border:1px solid var(--line2);
}
.ck:hover{border-color:var(--accLine)}
.ck input{accent-color:var(--acc); width:16px; height:16px; flex:none; cursor:pointer}
.ck small{display:block; font-size:10.5px; color:var(--dim); font-weight:400}
.cfoot{display:flex; justify-content:flex-end; margin-top:16px}

/* ---------- แผงกติกาห้อง 5-5 ---------- */
.rules{padding:4px 2px 2px}
.rrow{display:grid; grid-template-columns:118px 1fr 92px; align-items:center; gap:12px; margin-bottom:14px}
.rlab{font-size:13.5px; line-height:1.25; font-weight:600}
.rlab small{display:block; font-size:10.5px; color:var(--dim); font-weight:400}
.rrow .strack i{background:var(--g3)}
.rval{text-align:right; font-variant-numeric:tabular-nums; font-weight:700; font-size:14px}
.rval small{color:var(--dim); font-weight:400; font-size:12px}
/* เกินเพดานเมื่อไหร่ให้เห็นชัด ๆ ทั้งหลอดและตัวเลข */
.rrow.over .strack i,.srow.over .strack i{background:var(--warn)}
.rrow.over .rval,.srow.over .sval{color:var(--warn)}
.badge.bad{color:var(--warn); border-color:var(--warn)}
.rulenote{margin:18px 0 0; padding:16px 0 0 18px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--dim); line-height:1.75}
.rulenote li{margin-bottom:4px}


/* ไอคอนเว็บ MyArena ติดข้างลิงก์ทุกอันที่พาออกไปที่ตลาด
   ฝังเป็น data URI เพราะ CSP ของเราไม่ยอมให้โหลดรูปจากโดเมนอื่น
   และเว็บเขาเป็น http ล้วน ถ้าลิงก์รูปตรง ๆ จะโดนบล็อกทั้ง CSP และ mixed content
   ต้นฉบับคือ favicon-32x32.png ของ market.myarenaonline.com ย่อไว้ที่ 32px = 1.1 KB */
.myicon{
  display:inline-block; width:14px; height:14px; vertical-align:-2px; margin-right:5px;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAELUlEQVR42u2Xy29UVRzHP+fcmXunMyO184AZWqbT8iigSCrGyMvQCBI2CkSNOxdE2bhx439g3LkwLlgYF2qMK4NBsZSHJIRHqVWeba3U8ijS2k5neqftzL137jku6gsKoYXQxsRvcrfn9znf873fkyO01pp5lGSe9d8G0BUffH/+AFShgNt/dX4AtFJ4pRJe/9WHcuGBASZ+7mWsuwe3qwf3St/cAxQOtoLr4o/ZTJ44NbcA6tYg/tlOosuWYmYzlNqOoOzi3AFMfv0NcjSPlU5jrViO7urGPdM+NwDKtplobSNUvwTjsSiBJXWYkQjO0eOg1KMHGG87SqnzJ0KrVyGkRMZiOPUZfjvYynh7B36+gLJt9GQJ7Thox0G5Ltr34S6tH5jNcPfWIGNf7QfHIRCPASCqQoynF5FvO0xw79sEYzGMqhChmhqsxWkq9Rn0yhWE1zyJlUwgDGOWAJUKlYuXsL9t5cbRY+QuXCJlmsg/AQDMhiwLn9/EgqYmgo1ZjHAEc3GKQCaDSMYR0SgyGAQhpi0v7nUb+iMjTB7+HvfYcfTZDibsIqOxxyll6oivfYple9/ESKemcjExAV4FYZpo20amFs3Y1dsAtO/j/dpP6UwHbl8flB1CdbUE4jFEfQaZWYKRiGOEQqihIXS+gBrJoa5eQ7seaI1cnMLcsX3GALcdgS6V0aUy1qomoju2YcTjd7UNoPzJZ+ixMSiXkek0KpdDRCJYr+568L9ARiNYa55AxmqYOHAQ+4MPcU+eRhXGbkuwdlx0LofO56n09GKsWY2oqiK4cT1iwYJZAUwPoRCYjQ3IQIDSp19QeOddxmM1OE3LiTSvpfb112DgJtrzUCM5jMYGjIYs6tp1Auua73Jr6alPyvtnYHoSfSZPnOLae+9jn/2B5O6dZPd9hDp3Hr/3CjK1CLEwibFyBbgumCZ4HtouooZHEJaFd7odI1NH8IWWGTrwbxkG4S2biX93iODlHhbufAlpmch1zQSeeRpt2/i/9KGuD1C5cBFdHIfJCbxTZzCyWWQ2g7v/AOYruwjO+AjudNBxEDcGiD73LOEtm9GlEuV9HxNoXkvlcjf+hYuIZAKK41h73sA7dAQ1nEPW1qIGh8A0p5XPrKrYHxyCvn6qd7+MrK7GO3ES5/Mv8Xt68S93/RNO0wSvAlIi0yl0vgCuiwiHEdHoLEJ4h4pd3YwlYsS2tky1Yuc5ZGMWNTiEiEbRhQLqxgAykUANDyOTCcytLWivQnDjeggGkNXVDw5ws7MTa1sLRipFpb0DPTqKjMVQIyMEN21AWBZEwujiOMbSRuSG9VM7FtyzQ2YMoJXCC1nUbn/xb5tDb+1BmFO9LpIJRCg0o0EzquI75RQK/N75I3UtWxBSzsO7QGlqVjY9suH3dUBrjYCHsvihMiAe4eD/H6d/6Q90RsMz6bnQqQAAAABJRU5ErkJggg==") center/contain no-repeat;
  border-radius:3px; flex:none;
}
/* ไอคอนร้านค้าทางการ (shop.myarenaonline.com) คนละรูปกับของตลาดมือสอง
   ต้นฉบับคือ assets/images/logo.ico ขนาด 128px ย่อเหลือ 32px = 1.4 KB */
.myicon.shop{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFNklEQVR42u2WTWxdVxHHfzPnfdmOS+zGTmKb+MXYJHUDSpWmLQ0J14gCTaNWpX1RQF2FBVWXSF1ECN7FLFiwohIVrVQ5iCxQRKEUVW1ACjZQBRTSxGljaNIYO47z4pf4I+89+33dew6LPNcOTrsolLDISKNzr3TOzH9mzpn/iHNOuIWi3GK5DeA2gP9/AL7vf7zP1DknH6jptAIMtyU3ne3uvgORD9//EVQ/JHTB990LTU2fKFaCHVq09+Icg55nPlKk1+0Jvi/Lsxr5oP2Dg4PaJxKcWtv5RFmZdZY9OP7g+Z5dYRhgZEQGs1nxFs8DnudZ6e+3i7mGpWr29/djrRW5WSv2r6N00z33N+bmsy+Px1yqs6K/NhF5dsPEtpPnuk9Geu65J+DwYSuqDudWRiCAGv751FOJ+Uymfv7di7FsPmfmitNSamys5mKx3LcnJkorAfi+jB08GEuOj5fPtXV9K+Z4OpkZ3TrV3v2Kde7y+kvnn15yIly4/6Hmariwxk3PtkRtdY0EtlmLC4mEk2glf62Uj9aV5hauTBVXr18ox81s/Wc25zLDwzOpZ55ZwPfdEoC9e3Uwm5W+oaFg0f5oW9ffo05OdWTOf+P02s60Qjou8hOMdrjQ3iEi9bZQyIf5wtVoQ8M1jUYuRdHxxOe2F+o29VxOfD1lovfdlwF6gN8DfwSeF5GfO+ciQBgBqKUxBJjq7F1HtfL4aLW0nzDcbNW8IOBerhbf6IrGP19nYqvDfP5vcufqMVusvtt+6GDjqkd3dwFHgSbgB8AlYBz4JvBTrF2NtQGRyANhGB5cViQi+L68c9ddDbFr81tcaB4Lq+WdBqIq8vbxUu7FjkTsN1c2bWqMF00u0tK0v+7Em3mc2wc8Ion4Iffo7mOA2mr4ODaYU/TY2LE3f5Tctes5IIbqZ1F9BdVdwDvGmGB5xSOMjEh8utxp1WzEmF+0TZ478H6P6H2geTZ/9YAthFoV21memLhW7PvyS81wwJbLU256Zqu1dlKt/ZlGI0+AaQYak563FqivZWEL8FtrbVRVTwDRRfPXO2Fvr+uZOn8msHI6gX1ytqPn2dPrP7UtDfUzuSvbnaUP6CIe+QuzM3PNR48YGwTTGo8P09DQrqr3WtXvAb8EPglsBDpqTsZqQO4EvgZ4wMyNrdj33eFUytw9df5M3OjAvA23iK3+9Sut7d9PYOocrg1xBUGzrlo8Cjyo1h6pnb8bOKWq82EYbgXeE5EUUAHCWgYqwE5V/WEN0A0lWHoFnmdkaCj4cXd3/KuFoKBinmw2pmzEbrUmcqw6H1xsfOShSt3A869iLaieqV2k14HdwIK19mFVfQO4EIZhzhhzBngQeEtEXnXOtQM5oLCiEw5eL4pcLenDFdWRs5c6XuthKBhoaTnVtWGzfGHsTxk3cG4f1o6iehz4IjAJXAROAydV9S3gPeC4MWZBRMrA72qcoyIyucg/KwA0Fgoi4E5US9vjmBf7GAqGW5OPZarFgXWZi9Wx1g3fKc9Nz8XrVn2XePwfwK+ACREp1vDfjOi0liUBwtr/+xfwBgDb9uwJD3d1mbdfP1K5HDWHLnR07w+CYF9WzN4Y9ioRs+PPTWtGvgQjDkTg7LJodBm9O8DWVrfc2b99L9FxOp1WRHhp1bqW5yKJnZPrP71jtH1jasVmozjnjHNOl63/ER3fwAV+Mhn3Fhoiyd6WYOPQUMk5J4OeZ7zWVkc2K3iexffdxzaQIMKiulTK/LeHj5vpigknnU7r/8LxTUtweyq+DeBWyL8AnguEk7qC8hAAAAAASUVORK5CYII=")}

/* ---------- ตารางราคา ---------- */
/* ============ กล่องดูราคา (เปลี่ยนจากตารางเป็นการ์ด 2026-09-03 เจ้าของสั่ง) ============

   ของเดิมเป็นตารางสามคอลัมน์ ช่อง / ไอเทม / ราคาถูกที่สุด รูปเป็นไอคอนจิ๋ว 34px
   เจ้าของสั่งให้ **เอารูปขึ้นเป็นพระเอก** เปิดมาแล้วต้องมองรูปแล้วรู้เลยว่าชิ้นไหน
   ตอนนี้เป็นกริดการ์ด รูปเต็มความกว้างการ์ด ราคาอยู่ใต้รูป ป้ายว่า "ราคาใน Myarena"

   **ข้อบังคับเดิมยังอยู่ ห้ามมีแถบเลื่อนซ้ายขวา** (เจ้าของสั่ง 2026-08-16)
   ตอนเป็นตารางคุมด้วย table-layout:fixed พอเป็นกริดต้องคุมด้วยของสามอย่างนี้แทน
   ขาดอย่างใดอย่างหนึ่งแถบเลื่อนกลับมาทันที

   1. `minmax(0, 1fr)` ที่คอลัมน์ ไม่ใช่ `1fr` เฉย ๆ
   2. `min-width:0` ที่การ์ดกับกล่องข้างใน เพราะ **grid item มี min-width:auto
      มาโดยปริยาย ซึ่งเท่ากับ min-content** (เคยดันแถบเลือกไอเทมเป็น 19,848px มาแล้ว
      ดูหัวข้อกับดักใน CLAUDE.md) ข้อนี้สำคัญกว่าเพื่อนเพราะไม่มีอาการให้เห็นตอนจอกว้าง
   3. `overflow-wrap:anywhere` ที่ข้อความทุกก้อน ชื่อไอเทมภาษาไทยไม่มีช่องว่างคั่น
      เบราว์เซอร์จึงถือว่าทั้งประโยคเป็นคำเดียวยาว ๆ ที่ตัดไม่ได้

   auto-fill กับ 146px ทำให้จอกว้าง 708px (ความกว้างกล่องลอยแบบ wide) ได้ 4 ใบต่อแถว
   จอมือถือ 360px ได้ 2 ใบ ซึ่งยังเห็นรูปใหญ่พอที่จะรู้ว่าเป็นของชิ้นไหน */
.pgrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(146px, 1fr));
  gap:12px; min-width:0;
}
.pcard{
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r2);
  box-shadow:var(--sh1);
}
/* กรอบรูปเป็นจัตุรัสเสมอ รูปทางการของตลาดเป็น 300x300 ทุกใบอยู่แล้ว
   **ต้องเป็น contain ไม่ใช่ cover** ของบางชิ้นเป็นทรงยาว (ปืน ผ้าคลุม)
   ถ้า crop จะเหลือแต่ตรงกลางจนดูไม่ออกว่าเป็นของชิ้นไหน */
/* เป็น grid เพื่อให้ไอคอนสำรองที่เล็กกว่ากรอบวางกลางได้ด้วย margin:auto
   ตัวรูปปกติที่ตั้ง width/height 100% ยังเต็มกรอบเหมือนเดิม */
.pshot{
  display:grid; aspect-ratio:1; min-width:0; padding:6px;
  background:var(--sunk); border-bottom:1px solid var(--line2);
}
a.pshot{cursor:pointer}
a.pshot:hover .pbig{transform:scale(1.06)}
.pbig{width:100%; height:100%; object-fit:contain; display:block; transition:transform .18s ease}
/* ชิ้นที่ยังไม่มีรูปทางการ ตกมาใช้ไอคอนของเว็บซึ่งเป็น 160x80
   **ห้ามยืดให้เต็มกรอบ** ขยายจาก 160 เป็น 300 แล้วเบลอจนดูไม่ออกว่าเป็นของอะไร
   ให้วางไว้ขนาดจริงกลางกรอบแทน คมชัดแต่เล็กกว่า ดีกว่าใหญ่แล้วเบลอ */
.pbig.small{width:auto; height:auto; max-width:100%; max-height:100%; margin:auto}
.pbig.noimg{background:var(--sunk2); border-radius:8px}
/* flex:1 คู่กับ margin-top:auto ที่ .pcprice คือตัวที่ดันราคาไปชิดก้นการ์ด
   ขาดตัวนี้ margin-top:auto จะไม่มีที่ว่างให้ดัน ราคาของการ์ดที่ชื่อสั้นกับชื่อยาวจะไม่ตรงแนวกัน */
.pcbody{display:flex; flex-direction:column; flex:1; padding:9px 10px 11px; min-width:0}
/* ชื่อช่องที่ย้ายมาจากคอลัมน์ที่ตัดทิ้ง เก็บไว้เพราะของหน้าตาใกล้กันในชุดเดียวมีหลายชิ้น */
.pcslot{font-size:10.5px; color:var(--dim); line-height:1.5; overflow-wrap:anywhere}
.pcname{
  margin:0; font-size:12.5px; font-weight:700; line-height:1.45;
  overflow-wrap:anywhere; word-break:break-word;
}
/* บอกว่าชิ้นนี้ไม่มีขายเดี่ยว ราคาที่เห็นเป็นราคาทั้งกล่อง */
.ppack{margin-top:4px; font-size:10.5px; font-weight:400; color:var(--dim); line-height:1.5;
  overflow-wrap:anywhere}
/* ป้ายระยะการป้องกันกับ "ไม่มี 3D" ใช้ชื่อคลาสเดียวกับบนการ์ดไอเทมในหน้าแรก
   แต่ที่นี่ไหลไปกับข้อความ ไม่ได้ลอยอยู่มุมการ์ด จึงต้องล้าง position ทิ้ง */
.ptags{display:flex; flex-wrap:wrap; gap:5px; margin-top:5px}
.ptags .d3{
  position:static; font-style:normal; font-size:9.5px; font-weight:800;
  padding:2px 7px; border-radius:6px; line-height:1.5;
}
.ptags .d3.rng{background:var(--rngBg); color:var(--rngInk); border:1px solid var(--rngLine)}
.ptags .d3.no3d{background:var(--sunk2); color:var(--dim); border:1px solid var(--line)}
/* ราคาอยู่ใต้รูปตามที่เจ้าของสั่ง คั่นด้วยเส้นบาง ๆ ให้แยกจากชื่อไอเทมชัด ๆ
   margin-top:auto ดันราคาไปชิดก้นการ์ดเสมอ การ์ดที่ชื่อสั้นกับชื่อยาวจะได้ราคาตรงแนวกัน */
.pcprice{margin-top:auto; padding-top:8px; min-width:0}
.pclabel{display:block; font-size:10px; font-weight:600; color:var(--dim);
  letter-spacing:.2px; margin-bottom:1px}
.plink{color:var(--accInk); font-weight:800; font-size:14px; text-decoration:none;
  font-variant-numeric:tabular-nums; display:inline-block; overflow-wrap:anywhere}
.plink:hover{text-decoration:underline}
.plink small{display:block; font-size:10.5px; color:var(--dim); font-weight:400}
/* จำนวนร้านที่ขายอยู่ ตลาดนับมาให้บนการ์ดของเขาเอง โชว์เฉพาะตอนมีมากกว่าหนึ่งร้าน
   ของที่มีร้านเดียวขายมักหายไปเร็ว ส่วนของที่มีหลายร้านราคานิ่งกว่าและกดเข้าไปเทียบได้ */
.pshops{display:block; font-size:10px; color:var(--dim); margin-top:2px}
.pnone{display:block; color:var(--dim); font-size:11.5px; line-height:1.5;
  overflow-wrap:anywhere}
.psearch2{display:inline-block; margin-top:3px; color:var(--accInk); font-size:11.5px;
  font-weight:600; text-decoration:none}
.psearch2:hover{text-decoration:underline}
.psum{margin:16px 0 0; text-align:right; font-size:15px}
.psum small{display:block; font-size:12px; color:var(--dim); font-weight:400; margin-top:2px}
.pfoot{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.pfoot .note{margin:0; flex:1 1 200px}
.pdis{margin:14px 0 0; font-size:11.5px; line-height:1.7}

@media(max-width:560px){
  .modalbg{padding:12px}
  .modalbody{padding:16px 16px 20px}
  .modalhead{padding:16px 16px 12px}
  .rrow{grid-template-columns:96px 1fr 78px; gap:8px}
  /* จอมือถือให้การ์ดแคบลงหน่อย จะได้ยังเห็นสองใบต่อแถวบนจอ 360px
     ถ้าปล่อยไว้ที่ 146px จอ 340px จะเหลือใบเดียวต่อแถวแล้วต้องเลื่อนยาวมาก */
  .pgrid{grid-template-columns:repeat(auto-fill, minmax(124px, 1fr)); gap:10px}
  .pcname{font-size:12px}
  .plink{font-size:13px}
}

/* ================= หน้าคะแนนชุดที่ส่งประกวด (เจ้าของสั่ง 2026-08-18) =================

   แต่ละแถวเป็นสามคอลัมน์ตามที่สั่งไว้ ซ้ายภาพ กลางหลอดสรุป ขวาดาวโหวต
   จอแคบยุบเหลือคอลัมน์เดียว ภาพกับดาวไปอยู่บนล่างแทน */
.clist{display:flex; flex-direction:column; gap:12px; margin-bottom:18px}
.crow{
  display:grid; grid-template-columns:132px 1fr 150px; gap:16px; align-items:center;
  padding:14px; border-radius:var(--r2); min-width:0;
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--sh1);
}
.cshot{
  padding:0; border:1px solid var(--line2); border-radius:12px; overflow:hidden;
  background:var(--sunk); cursor:pointer; aspect-ratio:36/46; width:100%;
}
.cshot img{display:block; width:100%; height:100%; object-fit:cover}
.cshot .noimg{display:block; width:100%; height:100%; background:var(--sunk2)}
.cshot:hover,.cshot:focus-visible{border-color:var(--accLine)}
.cmid{min-width:0}
.cmid h3{margin:0 0 2px; font-size:15px; font-weight:700}
.cmid .note{margin:0 0 8px}
.clink{
  padding:0; border:0; background:none; font:inherit; color:var(--txt);
  font-weight:700; cursor:pointer; text-align:left;
}
.clink:hover{color:var(--accInk); text-decoration:underline}
.cvote{display:flex; flex-direction:column; align-items:center; gap:6px}
.stars{display:flex; gap:2px}
.star{
  padding:2px 1px; border:0; background:none; cursor:pointer; line-height:1;
  font-size:20px; color:var(--sunk2); transition:color .15s ease, transform .15s ease;
}
/* ธีมสว่างพื้นหลอดจางมาก ดาวที่ยังไม่ถูกเลือกเลยแทบมองไม่เห็น ต้องมีขอบสีช่วย */
.star{color:var(--dim); opacity:.35}
.star.on{color:#f5b301; opacity:1}
.star:hover,.star:focus-visible{transform:scale(1.15); opacity:1}
.star:disabled{cursor:default; transform:none}
.cscore{margin:0; text-align:center; line-height:1.35}
.cscore b{display:block; font-size:17px; font-variant-numeric:tabular-nums}
.cscore small{display:block; font-size:11px; color:var(--dim)}

.cpages{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:26px}
.cpg{
  min-width:38px; padding:7px 11px; border-radius:10px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600;
  background:var(--sunk); border:1px solid var(--line2); color:var(--txt2);
}
.cpg:hover:not(:disabled){border-color:var(--accLine)}
.cpg.on{background:var(--accSoft); border-color:var(--accLine); color:var(--txt)}
.cpg:disabled{opacity:.4; cursor:default}
.cgap{align-self:center; color:var(--dim); padding:0 2px}

.cdetail{display:flex; flex-direction:column; gap:14px}
.cbig{
  display:block; width:100%; max-width:320px; margin:0 auto; border-radius:var(--r2);
  border:1px solid var(--line2); background:var(--sunk);
}
.citems{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.citems li{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0;
  padding:8px 11px; border-radius:12px; font-size:13px;
  background:var(--sunk); border:1px solid var(--line2);
}
.citems .cslot{color:var(--dim); font-size:11.5px; min-width:56px}
.citems b{font-weight:700; min-width:0; overflow-wrap:anywhere}
/* ป้ายในรายการนี้ไหลไปกับข้อความ ไม่ได้ลอยมุมการ์ดเหมือนบน .gcard */
.citems .d3{
  position:static; margin-left:auto; font-style:normal; font-size:9.5px; font-weight:800;
  padding:2px 7px; border-radius:6px; line-height:1.5; flex:none;
}
.citems .d3.rng{background:var(--rngBg); color:var(--rngInk); border:1px solid var(--rngLine)}
.citems .d3.no3d{
  margin-left:0; background:var(--sunk2); color:var(--dim); border:1px solid var(--line);
}

@media (max-width: 720px){
  .crow{grid-template-columns:96px 1fr; gap:12px}
  .cvote{grid-column:1 / -1; flex-direction:row; justify-content:space-between}
}

/* ---------- หัวข้อ h1 ที่มีไว้ให้โปรแกรมอ่านหน้าจอกับ Google เท่านั้น ----------
   หน้าจำลองชุดทั้งสามหน้าเดิมไม่มี h1 เลย โครงหัวข้อเริ่มที่ h2 ซึ่งผิดทั้ง
   หลักการเข้าถึง (โปรแกรมอ่านหน้าจอหาหัวข้อหลักของหน้าไม่เจอ) และทำให้
   Google เดาไม่ออกว่าหน้านี้เรื่องอะไร แต่หน้าพวกนี้เป็นเครื่องมือ
   ไม่ใช่บทความ จะเอาหัวข้อตัวโต ๆ มาแปะกินที่ก็ผิดที่ผิดทาง
   จึงซ่อนด้วยวิธีมาตรฐาน คือยังอยู่ใน DOM และยังอ่านออกเสียงได้
   ห้ามเปลี่ยนไปใช้ display:none หรือ visibility:hidden
   เพราะสองตัวนั้นโปรแกรมอ่านหน้าจอจะข้ามไปเลย และ Google ก็ลดน้ำหนักให้ */
.a11y-title{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------- รายการของที่ฝังไว้ให้ Google อ่าน (tools/inject_seo_items.py) ----------
   JS จะเขียนทับกล่องนี้ด้วยรายการจริงที่กดได้ทันทีที่โหลดข้อมูลเสร็จ (ราว 700ms)
   ระหว่างนั้นและกรณีที่ JS พัง คนใช้จะเห็นรายการนี้แทนหน้าเปล่า
   จัดหน้าให้ใกล้ของจริงพอที่จะไม่ดูพัง แต่ไม่ต้องเป๊ะเพราะอยู่บนจอไม่ถึงวินาที */
.seolist .note{margin:0 0 14px}
/* เป็นตารางไหลลงเหมือน .strip ของจริงแล้ว (ตามที่เปลี่ยน 2026-09-11)
   ถ้าปล่อยเป็นแถบเลื่อนซ้ายขวาไว้ คนที่ JS ยังทำงานไม่เสร็จจะเห็นหน้าตาคนละแบบ
   กับที่โผล่มาแทนอีกครึ่งวินาทีถัดมา ซึ่งกระตุกตาโดยไม่จำเป็น */
.seolist .seostrip{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(126px, 1fr)); gap:9px}
.seolist .seostrip li{
  min-width:0; padding:10px 11px; border-radius:var(--r2);
  background:var(--sunk); border:1px solid var(--line2);
}
.seolist .seostrip b{display:block; font-size:12px; overflow-wrap:anywhere}
.seolist .seostrip .mini{display:block; margin-top:5px; font-size:10.5px; color:var(--dim)}

/* ================= ปุ่มเฟซบุ๊กลอยมุมขวาล่าง =================
   ดัดแปลงจาก uiverse.io/wilsondesouza/ancient-yak-5 (MIT)
   แผ่นสีน้ำเงินไหลขึ้นจากล่างตอนเอาเมาส์ชี้ แล้วไอคอนเปลี่ยนเป็นสีขาว

   เดิมปุ่มนี้อยู่ในแถบหัวเว็บข้างสวิตช์ธีม แต่ไปเบียดปุ่มเมนูที่เปิดอยู่
   (.btn-wrapper.active ซึ่งกว้างกว่าลิงก์เมนูปกติเพราะมีวงไล่สีซ้อนอยู่ข้างใน)
   เจ้าของจึงสั่งย้ายลงมาลอยมุมขวาล่าง 2026-08-25

   **z-index ต้องต่ำกว่า 60** ซึ่งเป็นชั้นของกล่องลอยกลางจอ (กล่องโหวต ตารางราคา)
   ไม่งั้นปุ่มจะลอยทับกล่องพวกนั้นตอนเปิดอยู่ ส่วน 30 ที่ใช้อยู่สูงกว่าเนื้อหา
   และหัวเว็บ (20) พอที่จะไม่ถูกอะไรบัง

   ป้าย .jab (ลูกเล่นแซวคนเปิด DevTools) อยู่มุมเดียวกันที่ z-index 9999
   แต่มันโผล่แค่ 4 วินาทีแล้วหาย และตั้ง pointer-events:none ไว้ จึงไม่บังการกด */
.fb-float{
  position:fixed; right:18px; bottom:18px; z-index:30;
  display:flex; align-items:center; gap:9px;
  transition:transform .35s ease, opacity .35s ease;
}
/* ตัวขับอยู่ใน fbfloat.js ติด .hide ตอนเลื่อนลง เอาออกตอนเลื่อนขึ้น
   **pointer-events:none สำคัญ** ไม่ใช่แค่ทำให้มองไม่เห็น แต่ทำให้กดของข้างใต้ได้จริง
   ระยะ 96px มากกว่าความสูงปุ่มบวกระยะขอบ ปุ่มจึงเลื่อนพ้นขอบจอไปเลย ไม่โผล่ครึ่งใบ */
.fb-float.hide{transform:translateY(96px); opacity:0; pointer-events:none}
/* เคยหรี่ไว้ที่ opacity .62 ตอนไม่ได้ชี้ เพื่อลดการกวนตาเวลาปุ่มคร่อมเนื้อหา
   เอาออกแล้วเพราะตอนนี้ซ่อนปุ่มตอนเลื่อนลงแทน (fbfloat.js) ซึ่งแก้ได้ตรงจุดกว่า
   ปุ่มที่จาง ๆ ค้างอยู่ดูเหมือนใช้ไม่ได้ ทั้งที่กดได้ปกติ */
.fb-float a{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  color:var(--txt2); background:var(--panel);
  border:1px solid var(--line2); box-shadow:var(--sh2);
  transition:color .3s ease-in-out, box-shadow .3s ease-in-out,
             border-color .3s ease-in-out, transform .3s ease-in-out;
}
/* ไอคอนต้องอยู่เหนือแผ่นสี ไม่งั้นพอแผ่นไหลขึ้นเต็มวงจะกลบไอคอนหายไปเลย */
.fb-float a svg{position:relative; z-index:1; width:23px; height:23px; fill:currentColor}
.fb-float .filled{
  position:absolute; left:0; bottom:0; width:100%; height:0;
  background:#1877f2; transition:height .3s ease-in-out;
}
.fb-float a:hover,
.fb-float a:focus-visible{color:#fff; border-color:#1877f2; transform:translateY(-2px)}
.fb-float a:hover{box-shadow:var(--sh3), 0 0 24px 1px rgb(24 119 242 / 45%)}
.fb-float a:hover .filled,
.fb-float a:focus-visible .filled{height:100%}
.fb-float a:focus-visible{outline:2px solid #1877f2; outline-offset:3px}

/* ป้ายชื่อโผล่ทางซ้ายของปุ่ม ไม่ใช่ด้านบนตามต้นฉบับ
   เพราะปุ่มอยู่ติดขอบล่างขวา ด้านบนเป็นเนื้อหาเว็บที่ไม่ควรไปบัง */
.fb-float .fb-tip{
  order:-1; pointer-events:none;
  padding:5px 11px; border-radius:8px; font-size:12.5px; line-height:1.4; white-space:nowrap;
  color:#fff; background:#1877f2; box-shadow:var(--sh2);
  opacity:0; visibility:hidden; transform:translateX(8px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.fb-float:hover .fb-tip,
.fb-float a:focus-visible ~ .fb-tip{opacity:1; visibility:visible; transform:translateX(0)}

@media (max-width: 720px){
  /* ย่อลงและขยับเข้ามุมกว่าเดิม จอมือถือพื้นที่น้อย ปุ่มใหญ่จะไปบังเนื้อหา */
  .fb-float{right:12px; bottom:12px}
  .fb-float a{width:44px; height:44px}
  .fb-float a svg{width:21px; height:21px}
  /* แตะบนมือถือไม่มีสถานะ hover ป้ายจะโผล่ค้างหลังกดแล้วบังของอื่น */
  .fb-float .fb-tip{display:none}
}

/* คนที่ตั้งเครื่องให้ลดการเคลื่อนไหว ไม่ต้องมีปุ่มขยับขึ้นลงตอนชี้
   และตอนซ่อน/โผล่ให้ตัดจบเลย ไม่ต้องไถลขึ้นลง แต่ยังซ่อนอยู่เหมือนเดิม
   (ซ่อนด้วย opacity กับ pointer-events ซึ่งไม่ใช่การเคลื่อนไหว) */
@media (prefers-reduced-motion: reduce){
  .fb-float{transition:none}
  .fb-float.hide{transform:none}
  .fb-float a:hover,
  .fb-float a:focus-visible{transform:none}
}

/* ================= ป้าย New! ของที่มากับแพตช์ล่าสุด =================
   เจ้าของสั่ง 2026-08-25: ตัวหนังสือสีแดง พื้นเหลืองเข้ม และกระพริบ

   เรื่องสี: แดงสดบนเหลืองเข้มอ่านไม่ออกจริง ๆ (#e53935 บน #b8860b ได้คอนทราสต์
   แค่ 1.2 ซึ่งแทบมองไม่เห็น) จึงเลือกแดงเข้ม #8b0000 บนเหลืองทอง #e6b800
   ได้คอนทราสต์ 5.3 ผ่านเกณฑ์ AA และยังอ่านว่าเป็นแดงบนเหลืองอยู่
   **ห้ามเปลี่ยนไปใช้แดงสดหรือเหลืองอ่อนกว่านี้** ป้ายจะอ่านไม่ออกทันที

   ป้ายนี้วางแบบไหลไปกับข้อความ ไม่ใช่ลอยมุมการ์ดเหมือน .d3.rng
   เพราะมุมการ์ดถูกจองไว้หมดแล้ว (ซ้ายบน = ระยะป้องกัน ขวาบน = ไม่มี 3D)
   ถ้าไปลอยทับกันจะอ่านไม่ออกทั้งคู่ */
.tagnew{
  margin-left:6px; vertical-align:middle;
  display:inline-block; font-style:normal; font-weight:900;
  font-size:9.5px; letter-spacing:.03em; line-height:1.5;
  padding:1px 6px; border-radius:6px;
  color:#8b0000; background:#e6b800; border:1px solid #b8860b;
  animation:tagnewblink 1.1s ease-in-out infinite;
}
/* กระพริบที่ตัวหนังสือ ไม่ใช่ทั้งป้าย พื้นเหลืองจึงอยู่นิ่ง ๆ ให้ตายังจับตำแหน่งได้
   ถ้าให้ทั้งป้ายหายไปเลยจะกลายเป็นของกะพริบทั้งแผงจนลายตา */
@keyframes tagnewblink{
  0%,100%{color:#8b0000}
  50%{color:rgba(139,0,0,.28)}
}
/* ในการ์ดของแต่งตัวพื้นที่แคบกว่าตาราง ย่อป้ายลงนิดหนึ่งไม่ให้ดันชื่อของตกบรรทัด */
.gcard .tagnew{font-size:8.5px; padding:1px 5px; margin-left:5px}

/* คนที่ตั้งเครื่องให้ลดการเคลื่อนไหว ป้ายยังอยู่และยังเห็นชัด แค่ไม่กระพริบ
   (การกระพริบเป็นสิ่งที่คนไวต่อการเคลื่อนไหวหรือเป็นลมชักบางแบบทนไม่ได้) */
@media (prefers-reduced-motion: reduce){
  .tagnew{animation:none}
}

/* ================= เว็บบอร์ด (เจ้าของสั่งทำ 2026-09-03) =================

   ใช้โทเคนสีชุดเดียวกับทั้งเว็บ ไม่มีสีใหม่ ธีมมืดจึงตามอัตโนมัติ
   **ห้ามใส่สีส้มให้อะไรที่ไม่ใช่ปุ่มที่ถูกเลือก** ตามกติกาสีในหัวไฟล์นี้

   ของที่ขึ้นต้นด้วย .bb คือ HTML ที่ Worker แปลงมาจาก BBCode ของคนเขียน
   (ดู worker/bbcode.js) จึงต้องเผื่อไว้ว่าจะมีอะไรแปลก ๆ มาแล้วต้องไม่ดันหน้าพัง */
.bh1{font-size:22px; margin:0 0 14px}

.bbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:16px}
.bbaracts{display:flex; gap:8px; align-items:center; margin-left:auto}
.bsearch{flex:1 1 220px; min-width:0; max-width:340px}

/* ช่องกรอกทุกชนิดในเว็บบอร์ดหน้าตาเหมือนกันหมด */
.binput{
  width:100%; box-sizing:border-box; font:inherit; font-size:13.5px;
  padding:9px 12px; border-radius:10px; min-width:0;
  background:var(--sunk); color:var(--txt);
  border:1px solid var(--line);
}
.binput:focus{outline:2px solid var(--accLine); outline-offset:1px}
textarea.binput{resize:vertical; line-height:1.7}

/* ---------------- รายการกระทู้ ---------------- */
.blist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.brow{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; min-width:0;
  padding:14px 16px; border-radius:var(--r2);
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--sh1);
}
/* กระทู้ปักหมุดลอยอยู่บนสุดอยู่แล้วจากฝั่ง Worker ตรงนี้แค่ทำให้เห็นชัดว่าต่างกัน */
.brow.pin{border-color:var(--accLine); background:linear-gradient(180deg,var(--accSoft),var(--panel))}
.btitle-link{flex:1 1 260px; min-width:0; text-decoration:none; color:inherit}
.btitle-link:hover .bt{text-decoration:underline}
.bt{display:block; font-weight:700; font-size:15px; overflow-wrap:anywhere}
.bex{display:block; margin-top:3px; color:var(--dim); font-size:12px; overflow-wrap:anywhere}
.bpin{
  font-style:normal; font-size:10px; font-weight:800; vertical-align:2px;
  padding:2px 7px; margin-right:6px; border-radius:6px;
  background:var(--acc); color:var(--accOn);
}
.bmeta{display:flex; gap:14px; align-items:center; flex-wrap:wrap; min-width:0}
.bnums{display:flex; gap:12px; font-size:11.5px; color:var(--dim); white-space:nowrap}

/* ---------------- การ์ดคนเขียน ---------------- */
.bwho{display:flex; gap:9px; align-items:center; min-width:0}
.bavatar{
  width:38px; height:38px; flex:none; border-radius:50%; object-fit:cover;
  background:var(--sunk2); border:1px solid var(--line);
}
/* คนที่ยังไม่ได้ตั้งรูป ใช้ตัวอักษรแรกของชื่อแทน จะได้ไม่เป็นกรอบว่าง ๆ */
.bavatar.noimg{
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; color:var(--dim);
}
.bwhotext{min-width:0}
/* ชื่อกับป้ายระดับอยู่บรรทัดเดียวกัน (เจ้าของทักมา 2026-09-03)
   ของเดิม <b> เป็น display:block ป้ายเลยตกไปบรรทัดใหม่ กลายเป็นสามบรรทัดซ้อน
   wrap ไว้เผื่อชื่อยาวมากบนจอแคบ จะได้ตกบรรทัดแทนที่จะดันกรอบ */
.bname{display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0}
.bwhotext b{font-size:13px; overflow-wrap:anywhere}
.bwhotext small{display:flex; align-items:center; gap:5px; font-size:11px; color:var(--dim);
  margin-top:1px}
.brank{flex:none; image-rendering:auto}
.brole{
  font-style:normal; font-size:9.5px; font-weight:800; flex:none;
  padding:1px 6px; border-radius:5px;
  background:var(--acc2Soft); color:var(--acc2); border:1px solid var(--line);
}
.brole.boss{background:var(--accSoft); color:var(--accInk); border-color:var(--accLine)}

/* ---------------- กระทู้และคำตอบ ---------------- */
.bpost{
  padding:16px 18px; border-radius:var(--r2); margin-bottom:12px; min-width:0;
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--sh1);
}
.bpost.bhead{border-color:var(--line); background:linear-gradient(180deg,var(--panel2),var(--panel))}
/* โพสต์ที่ถูกซ่อน แอดมินยังเห็นอยู่ ทำให้จางลงจะได้รู้ว่าคนอื่นไม่เห็นแล้ว */
.bpost.dead{opacity:.55}
.bpost.dead::before{
  content:'ถูกซ่อนอยู่ คนอื่นมองไม่เห็น'; display:block; margin-bottom:8px;
  font-size:11px; font-weight:700; color:var(--warn);
}
.bth{font-size:19px; margin:0 0 12px; overflow-wrap:anywhere}
.bbody-html{margin:14px 0; line-height:1.85; overflow-wrap:anywhere; font-size:14px}
.bfoot{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding-top:11px; border-top:1px solid var(--line2);
}
.bstamp{font-size:11px; color:var(--dim)}
.bstamp.edited::before{content:'· '}
.bacts{display:flex; gap:10px; margin-left:auto}
.blink{
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  background:none; border:none; padding:0; color:var(--accInk);
}
.blink:hover{text-decoration:underline}

/* ---------------- ผลลัพธ์ที่แปลงมาจาก BBCode ----------------
   **ทุกอย่างในนี้มาจากคนอื่น ต้องกันไม่ให้ดันหน้าพังทุกกรณี** */
/* **min-height ต้องมี ห้ามเอาออก** (แก้ 2026-09-03 หลังเจ้าของโพสต์รูปจริง)
   รูปในกระทู้เป็น loading=lazy และไม่มี width/height ติดมาจากฝั่งเซิร์ฟเวอร์
   ก่อนโหลดกล่องจึงสูง 0 ซึ่งแปลว่ามันไม่เคยตัดกับ viewport ของใครเลย
   เบราว์เซอร์จึงไม่เริ่มโหลด แล้วก็สูง 0 ต่อไปเรื่อย ๆ วนอยู่แบบนั้น
   บนมือถือรูปเลยไม่ขึ้นสักใบ (เดสก์ท็อปขึ้นเพราะบังเอิญอยู่ในจอพอดี)
   เป็นบั๊กตระกูลเดียวกับที่เคยเจอในตารางราคาเมื่อ 2026-08-15
   ให้กล่องมีความสูงตั้งต้นไว้ ตัวเฝ้าดูจึงมีอะไรให้จับ แล้วรูปก็โหลดตามปกติ

   ความกว้างที่คนเขียนตั้งมาอยู่ใน inline style เป็น width ส่วน max-width:100%
   ตรงนี้เป็นคนคุมเพดานไม่ให้ล้นกรอบบนจอแคบ */
.bbimg{
  max-width:100%; height:auto; border-radius:10px; display:block; margin:8px 0;
  min-height:48px; background:var(--sunk);
}
.bbquote{
  margin:10px 0; padding:10px 14px; border-radius:10px;
  background:var(--sunk); border-left:3px solid var(--accLine);
}
.bbquote cite{display:block; font-size:11.5px; font-weight:700; color:var(--dim); font-style:normal}
.bbcode{
  margin:10px 0; padding:12px 14px; border-radius:10px; overflow-x:auto;
  background:var(--sunk2); font-size:12.5px; line-height:1.6;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.bblist{margin:8px 0; padding-left:22px}

/* ---------------- กล่องเขียน ---------------- */
.bcompose{margin-bottom:12px}
.btools{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0}
.btool{
  font:inherit; font-size:12px; font-weight:700; cursor:pointer;
  padding:5px 10px; border-radius:8px; line-height:1.5;
  background:var(--sunk); color:var(--txt2); border:1px solid var(--line);
}
.btool:hover{background:var(--sunk2)}
select.btool{padding:5px 6px}
.bcolor{display:flex; align-items:center; gap:5px}
.bcolor input{width:22px; height:22px; padding:0; border:none; background:none; cursor:pointer}
.bpic{display:inline-flex; align-items:center}
.bnote{
  margin:8px 0 0; font-size:12.5px; color:var(--warn); line-height:1.6;
  overflow-wrap:anywhere;
}
.bnote.good{color:var(--ok)}
.breply{
  margin-top:20px; padding:16px 18px; border-radius:var(--r2);
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--sh1);
}
.breply h3{margin:0 0 10px; font-size:15px}

/* ---------------- แบบฟอร์ม บัญชี และหน้าบอส ---------------- */
.bform{display:flex; flex-direction:column; gap:12px; max-width:420px}
.bform label{display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--dim)}
.bform .chip{align-self:flex-start}
.bacct{display:flex; flex-direction:column; gap:18px}
.bacct .bwho{padding-bottom:14px; border-bottom:1px solid var(--line)}
.bpicbig{
  display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--dim);
  padding:12px 14px; border-radius:10px; background:var(--sunk); border:1px dashed var(--line);
}
.bme .button_top{display:flex; align-items:center; gap:6px}
.bossnew{margin:0 0 22px}
.bossnew h2{margin:0; font-size:16px}
.bosstable td{vertical-align:middle}
.bosstable .num{text-align:right; white-space:nowrap}
.bosstable .brole-sel{padding:5px 8px; font-size:12px}
.bossacts{display:flex; gap:10px; white-space:nowrap}

/* ---------------- หน้าถัดไป ---------------- */
/* **[hidden] ต้องชนะทุกกฎ ห้ามเอาออก** (แก้ด่วน 2026-09-03 เจ้าของทักมา)
   attribute `hidden` สั่ง display:none มาจาก UA stylesheet ซึ่งน้ำหนักต่ำกว่ากฎของเราเสมอ
   ที่ไหนก็ตามที่ตั้ง display ให้ element นั้น hidden จะไม่มีผลเลย

   เคสจริงที่เจอคือฟอร์มสร้างบัญชีในหน้า /BOSS ตั้ง hidden ไว้ตั้งแต่แรก
   แต่ `.bform{display:flex}` ไปทับ คนที่ไม่ได้ล็อกอินจึงเห็นฟอร์มโผล่มาเต็มหน้า
   (ยิงจริงแล้วสร้างบัญชีไม่ได้ ได้ 403 ทุกเส้น และไม่มีรายชื่อใครหลุด
   แต่การโชว์ฟอร์มให้คนแปลกหน้าเห็นก็ไม่ควรอยู่ดี)

   ตั้งเป็นกฎรวมทั้งเว็บเลย ไม่ได้แก้เฉพาะ .bform เพราะที่อื่นก็ใช้ hidden กันอยู่
   (stagemsg, slotNote, bnote) วันหลังใครเผลอเติม display ให้ตัวไหนก็จะไม่พังซ้ำ */
[hidden]{display:none !important}

/* แถบให้ดาวใต้กระทู้ ใช้ .stars/.star ชุดเดียวกับหน้าคะแนนชุด ไม่ได้ทำสีใหม่ */
.bvote{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line2);
}
.bscore{font-size:12px; color:var(--txt2); font-weight:600}
.bscore.none{color:var(--dim); font-weight:400}
/* ดาวย่อในหน้ารายการ บอกคะแนนเฉลี่ยแบบสั้น ๆ ไม่ต้องกดเข้าไปดู */
.bstar1{color:#f5b301; font-weight:700; white-space:nowrap}

.bpager{display:flex; gap:6px; flex-wrap:wrap; margin:18px 0; align-items:center}
.bpage{
  min-width:32px; text-align:center; padding:6px 9px; border-radius:8px;
  font-size:12.5px; font-weight:700; text-decoration:none;
  background:var(--sunk); color:var(--txt2); border:1px solid var(--line);
}
.bpage.on{background:var(--acc); color:var(--accOn); border-color:var(--accLine)}
.bgap{color:var(--dim); padding:0 2px}

@media(max-width:560px){
  .brow{gap:10px}
  .bmeta{width:100%; justify-content:space-between}
  .bpost{padding:14px}
  .bth{font-size:17px}
}