/* ============================================================
   กระดานอันดับ (scr-board) — วาดจาก board.js
   ------------------------------------------------------------
   แบบ A "ตัวเราก่อน" ที่เจ้าของเลือก (9 ต.ค. 69) — รอบแรกเป็นฉากเกาะลอยพาสเทล
   ลอกจากภาพอ้างอิง แล้วถูกตีกลับว่า "ไม่สวยเลย อย่าก็อป"
   รอบนี้ไม่มีสีของตัวเองเลยสักสีนอกจากทองของที่ 1 — ทุกอย่างอ่านจากโทเคนของธีม
   หัวจอ/ปุ่มกลับ/ระยะห่างยืมจากจอเหรียญตรา (.bg-body · .page-head) ให้เป็นตระกูลเดียวกัน
   ============================================================ */

/* ---------- สลับ ทั้งหมด / เพื่อน — ก้อนเลื่อนได้ ---------- */
.bd-seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  padding: 4px; border-radius: 999px;
  background: var(--card2); border: 1px solid var(--line);
}
.bd-seg-k {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--card); box-shadow: var(--shadow);
  transition: transform .32s cubic-bezier(.3, 1.3, .5, 1);
}
.bd-seg.r .bd-seg-k { transform: translateX(100%); }
.bd-seg button {
  position: relative; min-height: 36px; border: none; background: none; cursor: pointer;
  color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 700;
  transition: color .2s;
}
.bd-seg button.on { color: var(--ink); }

/* ============================================================
   11 ต.ค. 69 · จัดลำดับสายตาใหม่ทั้งจอ
   เจ้าของ: "การ์ดไม่สวย ยังจัดลำดับสายตาผิดทั้งหมดอยู่ ข้อความอื่น ๆ ด้วย"
   ขนาดตัวอักษรบนจอนี้มีแค่สี่ชั้น และแต่ละชั้นมีหน้าที่เดียว:
     ใหญ่ 20–22 หนา  = ตัวเลขที่ต้องอ่าน (คะแนนบนแท่น · อันดับเรา)
     กลาง 16–17 หนา  = ประโยคที่ต้องอ่าน (เป้าถัดไป) · คะแนนในแถว
     ปกติ 15         = ชื่อคนในแถว
     เล็ก 12–12.5 จาง = ข้อมูลประกอบ (ชื่อบนแท่น · ซีซัน · วันติด · "งาน")
   ============================================================ */

/* ---------- แท่นสามอันดับแรก: รูป(+ช่อ) → คะแนน → ชื่อ → แท่นเปล่า ---------- */
.bd-podium {
  display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 8px;
  padding-top: 30px;
}
.bd-pc { --m: #B9C3D3; --m-ink: #3E4A5E; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.bd-pc.p1 { --m: var(--gold); --m-ink: #5A3D00; }
.bd-pc.p3 { --m: #D49464; --m-ink: #5A2E10; }
.bd-pc-av { position: relative; line-height: 0; }
.bd-pc-av .fr-av { width: 50px; height: 50px; font-size: 19px; }
.bd-pc.p1 .bd-pc-av .fr-av { width: 64px; height: 64px; font-size: 24px; }
.bd-medal {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-style: normal;
  background: var(--m); color: var(--m-ink); box-shadow: 0 0 0 2.5px var(--scr);
  font-size: 12px; font-weight: 900; line-height: 1;
}
.bd-crown {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%) rotate(-10deg);
  color: #E9B93C; line-height: 0; filter: drop-shadow(0 3px 4px rgba(150, 100, 0, .35));
}
.bd-crown svg { width: 26px; height: 26px; stroke-width: 2.6; }
.bd-pc-n {
  margin-top: 22px; line-height: 1.1; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.bd-pc-n b { font-size: 19px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bd-pc.p1 .bd-pc-n b { font-size: 23px; color: var(--gold-text); }
.bd-pc-nm {
  max-width: 100%; margin-top: 2px; padding: 0 2px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-pc.me .bd-pc-nm { color: var(--blue); font-weight: 800; }
.bd-pc-base {
  position: relative; width: 100%; margin-top: 10px; border-radius: 16px 16px 8px 8px; overflow: hidden;
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 var(--lg-hi, rgba(255, 255, 255, .8));
}
.bd-pc-base::before {   /* ขอบสีเหรียญด้านบนของแท่น — สีเดียวกับช่อ/วงแหวน */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--m);
}
.bd-pc.p1 .bd-pc-base { height: 58px; background: linear-gradient(180deg, var(--gold-soft), var(--card)); }
.bd-pc.p2 .bd-pc-base { height: 40px; }
.bd-pc.p3 .bd-pc-base { height: 28px; }
.bd-pc.empty { opacity: .6; }
.bd-pc.empty .fr-av { background: var(--card2); }

/* ---------- การ์ดของเรา: เป้าถัดไป → ลู่วิ่ง → ข้อมูลประกอบ ---------- */
.bd-me {
  padding: 16px 16px 14px; border-radius: 22px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.bd-me-hd { display: flex; align-items: center; gap: 12px; }
.bd-me-rk {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: var(--grad-brand); color: var(--on-accent); box-shadow: var(--shadow-brand);
}
.bd-me-rk b { font-size: 20px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bd-me-rk small { margin-top: 2px; font-size: 9.5px; font-weight: 700; opacity: .85; }
.bd-me-rk.gold { background: linear-gradient(160deg, #FFE38A, #E9B33A); color: #4E3400; box-shadow: 0 8px 18px -8px rgba(185, 132, 32, .7); }
.bd-me-goal { flex: 1; min-width: 0; font-size: 16.5px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.bd-me-prize {
  flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-text); font-size: 12.5px; font-weight: 800;
}
.bd-me-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; margin-top: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--faint);
}
.bd-me-meta svg { width: 12px; height: 12px; margin-right: 2px; vertical-align: -1px; color: #F0782C; }
.bd-dot { width: 3px; height: 3px; margin: 0 8px; border-radius: 50%; background: currentColor; opacity: .6; }

/* ลู่วิ่ง — บนพื้นการ์ดขาว: รางจุดสีจาง · แถบสีหลัก · รูปเราเกาะปลายแถบ · รูปเป้าหมายรอที่เส้นชัย */
.bd-race-track {
  position: relative; height: 6px; margin: 22px 18px 10px 14px; border-radius: 99px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px);
}
.bd-race-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--grad-brand); }
.bd-race-me, .bd-race-tg, .bd-race-flag { position: absolute; top: 50%; transform: translate(-50%, -50%); line-height: 0; }
.bd-race-me .fr-av { width: 28px; height: 28px; font-size: 12px; box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4.5px var(--blue); }
.bd-race-tg { left: 100%; }
.bd-race-tg .fr-av { width: 24px; height: 24px; font-size: 11px; opacity: .85; box-shadow: 0 0 0 2px var(--card); }
.bd-race-flag { left: 100%; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card2); color: var(--muted); }
.bd-race-flag svg { width: 13px; height: 13px; }
.bd-join {
  display: block; width: 100%; min-height: 44px; margin-top: 12px; border: none; border-radius: 999px;
  background: var(--grad-brand); color: var(--on-accent); box-shadow: var(--shadow-brand);
  font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}

/* ---------- ที่เหลือ: แถวเดียวจบ ---------- */
.bd-list { display: flex; flex-direction: column; gap: 7px; }
.bd-row {
  display: flex; align-items: center; gap: 12px; min-height: 60px;
  padding: 8px 16px 8px 12px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line);
}
.bd-row.me { background: var(--blue-soft); border-color: var(--blue); }
.bd-rk { width: 24px; flex: none; text-align: center; font-size: 14px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.bd-row.me .bd-rk { color: var(--blue); }
.bd-rav .fr-av { width: 38px; height: 38px; font-size: 15px; }
.bd-rnm {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-row.me .bd-rnm { font-weight: 800; }
.bd-rn { flex: none; font-size: 12px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.bd-rn b { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.bd-gap { display: flex; justify-content: center; gap: 5px; padding: 2px 0; }
.bd-gap i { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); opacity: .5; }

.bd-leave {
  align-self: center; margin-top: 2px; padding: 10px 14px;
  border: none; background: none; cursor: pointer;
  color: var(--faint); font-family: inherit; font-size: 12.5px;
}

/* ---------- ไล่ขึ้นทีละชิ้น (เฉพาะตอนเพิ่งเข้าจอ — ดู boardAnim) ---------- */
.bd-anim .bd-in { animation: bd-up .5s cubic-bezier(.2, .9, .3, 1.05) both; animation-delay: calc(min(var(--i, 0), 10) * 45ms); }
.bd-anim .bd-race-fill { animation: bd-grow .9s .3s cubic-bezier(.2, .8, .2, 1) both; }
.bd-anim .bd-race-me { animation: bd-run .9s .3s cubic-bezier(.2, .8, .2, 1) both; }
.bd-anim .bd-pc-base { animation: bd-rise .55s cubic-bezier(.2, .9, .3, 1.1) both; transform-origin: bottom; }
.bd-anim .bd-pc.p1 .bd-pc-base { animation-delay: .12s; }
.bd-anim .bd-pc.p3 .bd-pc-base { animation-delay: .06s; }
@keyframes bd-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bd-grow { from { width: 0; } }
@keyframes bd-run { from { left: 0; } }
@keyframes bd-rise { from { transform: scaleY(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .bd-anim .bd-in, .bd-anim .bd-race-fill, .bd-anim .bd-race-me, .bd-anim .bd-pc-base { animation: none; }
}

/* ---------- ยังไม่ล็อกอิน / ยังไม่เปิด / โหลดพลาด ---------- */
.bd-gate {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 30px 22px; border-radius: var(--r-card, 22px);
  background: var(--card); border: 1px solid var(--line);
}
.bd-gate > svg { width: 28px; height: 28px; color: var(--blue); }
.bd-gate b { font-size: 16px; color: var(--ink); }

/* โครงระหว่างรอ */
.bd-skel { background: var(--card2); box-shadow: none; border-color: transparent; }
.bd-podium.bd-skel { min-height: 230px; border-radius: 22px; }
.bd-me.bd-skel { min-height: 130px; }

/* ---------- ปุ่มถ้วยบนหัวหน้าแรก (ข้างกระดิ่ง) ---------- */
.th-rank {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 12px 0 10px; margin-right: 2px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, #E9B93C 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, #FFE9A8 55%, var(--card)), var(--card));
  color: var(--gold-text); font-family: inherit; font-size: 13px; font-weight: 800;
  box-shadow: 0 6px 14px -8px rgba(185, 132, 32, .55);
}
.th-rank svg { width: 17px; height: 17px; color: #D9A21F; }
.th-rank:active { transform: scale(.96); }

/* ---------- การ์ดทางเข้าในจอเพื่อน ---------- */
.bd-entry {
  width: 100%; display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; padding: 12px 14px; border-radius: 20px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  color: var(--ink); font-family: inherit; text-align: left;
}
.bd-entry-ic {
  width: 40px; height: 40px; flex: none; border-radius: 14px;
  display: grid; place-items: center; background: var(--blue-soft); color: var(--blue);
}
.bd-entry-ic svg { width: 21px; height: 21px; }
.bd-entry-tx { flex: 1; min-width: 0; }
.bd-entry-tx b { display: block; font-size: 15.5px; font-weight: 800; }
.bd-entry-tx i { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.bd-entry > svg { width: 18px; height: 18px; color: var(--faint); }
.bd-entry:active { transform: scale(.985); }

/* ============================================================
   11 ต.ค. 69 · กรอบรูปหรู + ป้ายไฟเรืองแสง
   ------------------------------------------------------------
   รอบ "เวทีเต็มจอ + น้องฮูกถือถ้วย" ถูกตีกลับว่า "แย่มาก" (ดูเด็ก สีจืด) → ถอยกลับมาที่แบบที่ขึ้นเว็บ
   แล้วเพิ่มเฉพาะสองอย่างที่เจ้าของเลือกว่าชอบจากภาพอ้างอิง: "กรอบรูปคนหรู ๆ" กับ "ป้ายเลเวล/ไฟเรืองแสง"
   ============================================================ */

/* รูปตัวอักษรย่อให้มีมิติ — เงาสว่างด้านบน เงาเข้มด้านล่าง (ทุกรูปบนจอนี้) */
.bd-body .fr-av { position: relative; overflow: hidden; }
.bd-body .fr-av::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .18) 100%);
}

/* ---- สามอันดับแรก: ช่อใบไม้โลหะ + วงแหวนโลหะเงาวาว ---- */
.bd-pc-av { isolation: isolate; }
.bd-laurel {
  position: absolute; left: 50%; top: 50%; width: 168%; height: 168%; z-index: -2;
  transform: translate(-50%, -46%);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25));
}
.bd-ring {
  position: absolute; inset: -6px; z-index: 1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, var(--m), #fff, var(--m), rgba(0, 0, 0, .25), var(--m), #fff, var(--m));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px));
  animation: bd-spin 7s linear infinite;
}
.bd-pc-av .fr-av { box-shadow: 0 10px 20px -8px rgba(15, 27, 45, .5); }
.bd-pc.p1 .bd-ring { inset: -7px; box-shadow: 0 0 22px 2px rgba(255, 200, 70, .55); }
.bd-pc-av .bd-medal { z-index: 2; }
.bd-crown { z-index: 3; top: -30px; }
.bd-pc-av .bd-fire { position: absolute; left: -14px; top: -4px; z-index: 3; min-width: 0; padding: 2px 7px 2px 5px; font-size: 11px; animation: none; box-shadow: 0 0 0 2px var(--card), 0 0 10px rgba(255, 94, 98, .5); }
@keyframes bd-spin { to { transform: rotate(360deg); } }

/* ---- ป้ายไฟวันติด: เรืองแสงแบบป้ายเลเวลในเกม ---- */
.bd-fire {
  display: inline-flex; align-items: center; gap: 2px; flex: none; font-style: normal;
  min-width: 34px; justify-content: center; padding: 3px 8px 3px 6px; border-radius: 999px;
  background: linear-gradient(135deg, #FFB547, #FF5E62 55%, #E0388A);
  color: #fff; font-size: 12px; font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  box-shadow: 0 0 0 2px var(--card), 0 0 14px rgba(255, 94, 98, .65);
  animation: bd-glow 2.2s ease-in-out infinite;
}
.bd-fire svg { width: 13px; height: 13px; color: #FFF3C4; fill: #FFD27A; }
@keyframes bd-glow { 50% { box-shadow: 0 0 0 2px var(--card), 0 0 22px rgba(255, 94, 98, .9); } }

/* ---- แถวที่เหลือ: วงแหวนสีหลักรอบรูป · 10 อันดับแรกเรืองแสง ---- */
.bd-rav { position: relative; line-height: 0; border-radius: 50%; padding: 2.5px;
  background: conic-gradient(var(--blue), color-mix(in srgb, var(--blue) 30%, #fff), var(--blue)); }
.bd-rav .fr-av { box-shadow: 0 0 0 2px var(--card); }


/* ในแถวรายชื่อ ป้ายอยู่ในช่องชื่อที่ตัดล้น (overflow: hidden) — แสงเรืองจะโดนตัดเป็นกรอบสี่เหลี่ยม
   จึงเหลือแค่วงขอบ ไม่มีแสงฟุ้ง */
.bd-row .bd-fire { box-shadow: none; animation: none; padding: 2px 7px 2px 5px; font-size: 11.5px; }

@media (prefers-reduced-motion: reduce) {
  .bd-ring, .bd-fire { animation: none; }
}

/* ============================================================
   11 ต.ค. 69 · สองชั้น: พื้นหลังสีสด + แผ่นทับครึ่งล่าง
   ------------------------------------------------------------
   เจ้าของ: "ดีขึ้นแต่ขาดสีสัน ลองจัดองค์ประกอบเหมือนรอบนั้นใหม่ ... มี 2 เลย์เยอร์ พื้นหลังกับที่ทับ
   พื้นหลังอยู่ด้านครึ่งจอล่าง ... อย่าก็อป เอามาประยุกต์กับเรา"
   สีพื้นหลังผูกกับสีหลักของธีม (--blue) แล้วเติมชมพูกับส้มอมทองเป็นแสงสามจุด
   — เปลี่ยนธีมแล้วพื้นเปลี่ยนตาม แต่ยังมีสีสันทุกธีม ไม่ใช่ฟ้าซีดสีเดียวแบบรอบเวทีเต็มจอ
   ============================================================ */
.bd-body { padding: 0 0 calc(88px + var(--tabgap, 0px)) !important; gap: 0 !important; position: relative; }

/* ---------- ชั้นหลัง ---------- */
.bd-bg {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 14px 16px 100px; color: #fff;
  background:
    radial-gradient(70% 55% at 12% 8%, color-mix(in srgb, var(--blue) 45%, transparent) 0%, transparent 60%),
    radial-gradient(70% 60% at 94% 20%, rgba(255, 111, 181, .78) 0%, transparent 64%),
    radial-gradient(90% 60% at 30% 100%, rgba(255, 168, 92, .6) 0%, transparent 66%),
    var(--grad-hero);   /* พื้นเข้มของธีม — ทุกธีมออกแบบให้ตัวหนังสือขาวอ่านได้บนนี้ (ธีม magic สีหลักเป็นทองอ่อน ใช้ --blue ตรง ๆ แล้วตัวขาวจม) */
}
/* เส้นโค้งจาง ๆ พาดฉาก — ให้พื้นมีชั้นมีจังหวะ ไม่ใช่สีไล่แผ่นเดียว */
.bd-bg-arc {
  position: absolute; left: -30%; right: -30%; top: 86px; height: 260px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05) 70%, transparent 71%);
}
.bd-bg-spark {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(2px 2px at 14% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 82% 14%, #fff, transparent),
    radial-gradient(2px 2px at 68% 40%, rgba(255, 236, 170, .95), transparent), radial-gradient(1.5px 1.5px at 30% 58%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 90% 62%, rgba(255, 255, 255, .8), transparent), radial-gradient(1.5px 1.5px at 8% 76%, rgba(255, 236, 170, .9), transparent);
  animation: bd-twinkle 3s ease-in-out infinite alternate;
}
@keyframes bd-twinkle { from { opacity: .35; } to { opacity: 1; } }

.bd-topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.bd-title { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.bd-swap {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border-radius: 999px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 800;
}
.bd-swap svg { width: 16px; height: 16px; }
.bd-swap:active { transform: scale(.97); }
.bd-bg .sh-btn { color: #fff !important; }

/* ---------- แท่นบนพื้นหลัง: ลำแสงสีเหรียญแทนแท่นกล่อง · ที่ 1 ยกสูงกว่า ---------- */
.bd-bg .bd-podium { padding-top: 58px; align-items: end; }
.bd-bg .bd-pc { position: relative; padding-bottom: 0; }
.bd-bg .bd-pc.p1 { padding-bottom: 30px; }
.bd-beam {
  position: absolute; left: 50%; bottom: -64px; width: 120%; height: 230px; transform: translateX(-50%); z-index: -1;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--m) 55%, transparent) 55%, transparent 100%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
          mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  opacity: .55; pointer-events: none;
}
.bd-pc.p1 .bd-beam { opacity: .8; height: 280px; }
.bd-bg .bd-medal { box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .9); }
.bd-bg .bd-pc-n {
  margin-top: 22px; padding: 4px 12px; border-radius: 999px;
  background: rgba(15, 20, 45, .32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, .85); border: 1px solid rgba(255, 255, 255, .22);
}
.bd-bg .bd-pc-n b { color: #fff; font-size: 18px; }
.bd-bg .bd-pc.p1 .bd-pc-n { background: linear-gradient(180deg, #FFE38A, #EDB93E); color: #6A4A00; border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(185, 132, 32, .8); }
.bd-bg .bd-pc.p1 .bd-pc-n b { color: #4E3400; font-size: 22px; }
.bd-bg .bd-pc-nm { margin-top: 6px; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
.bd-bg .bd-pc.me .bd-pc-nm { color: #FFE58A; }
.bd-bg .bd-pc.empty { opacity: .55; }
.bd-bg .bd-pc.empty .fr-av { background: rgba(255, 255, 255, .2); }
.bd-bg .bd-podium.bd-skel { min-height: 220px; background: none; }

/* ---------- ชั้นหน้า: แผ่นโค้งทับครึ่งล่าง · การ์ดของเราคร่อมขอบแผ่น ---------- */
.bd-sheet {
  position: relative; z-index: 1; margin-top: -34px; padding: 0 16px;
  display: flex; flex-direction: column; gap: 10px;
  border-radius: 30px 30px 0 0; background: var(--scr);
  box-shadow: 0 -12px 30px -14px rgba(15, 20, 45, .35);
}
.bd-sheet > .bd-me { margin-top: -26px; border: none;
  box-shadow: 0 18px 36px -18px rgba(15, 20, 45, .45), 0 0 0 1px var(--line); }
.bd-sheet > .bd-gate, .bd-sheet > .bd-me.bd-skel { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .bd-bg-spark { animation: none; } }

/* ============================================================
   11 ต.ค. 69 · แถบสถานะของตัวเอง + ปุ่มมีป้ายคำเต็ม
   เจ้าของ: "เอาพวกด้านบนจอของเขามาด้วย มันดูของตัวเองได้ และอธิบายชัดกว่า"
   ============================================================ */
.bd-status { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.bd-meter, .bd-mepill {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -12px rgba(0, 0, 0, .5);
  color: #fff; white-space: nowrap;
}
.bd-meter { flex: 1; min-width: 0; }
.bd-meter span { font-size: 11px; font-weight: 700; opacity: .85; }
.bd-meter b { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.bd-meter b.late { opacity: .8; }
.bd-meter b.na { font-size: 12.5px; font-weight: 700; opacity: .8; }
.bd-meter-bar { flex: 1; min-width: 24px; height: 7px; border-radius: 99px; background: rgba(10, 14, 40, .45); overflow: hidden; }
.bd-meter-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FFE7A0, #F4C24E); }
.bd-mepill { flex: none; gap: 7px; padding: 0 12px 0 10px; }
.bd-mepill .fr-av { width: 32px; height: 32px; font-size: 13px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.bd-mepill .fr-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bd-mp-st, .bd-mp-tok { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.bd-mp-st svg { width: 15px; height: 15px; color: #FFB25C; }

/* ปุ่มกลับแบบมีคำ — ทับกฎปุ่มกลับทรงสี่เหลี่ยมของทั้งแอป (alt.css · button[aria-label^="กลับ"])
   ยังใช้ aria-label "กลับ" ไว้ ปุ่มย้อนของเครื่อง (backOneScreen) จะได้หาเจอ */
.phone #scr-board button.bd-backpill {
  width: auto !important; height: 40px !important; min-width: 0; padding: 0 16px 0 10px !important;
  display: inline-flex !important; align-items: center; gap: 4px; border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  background: rgba(255, 255, 255, .18) !important; color: #fff !important;
  box-shadow: none !important; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.phone #scr-board button.bd-backpill svg { width: 18px !important; height: 18px !important; transform: rotate(180deg); }
.bd-topbar { grid-template-columns: auto 1fr auto; }
.bd-topbar .bd-swap { grid-column: 3; }
.bd-bg .bd-podium { padding-top: 40px; }

/* หัวการ์ดของเรา: บอกว่าเป็นกระดานไหน ซีซันไหน */
.bd-me-title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.bd-me-title b { font-size: 13px; font-weight: 900; color: var(--blue); letter-spacing: .01em; }
.bd-me-title span { font-size: 12px; font-weight: 600; color: var(--faint); }

/* ============================================================
   11 ต.ค. 69 · การ์ดตรงกลางรอบใหม่ — ขอบซ้ายเดียว · อันดับเป็นวงแหวนขวา
   ============================================================ */
.bd-me { padding: 18px 18px 16px; }
.bd-me-main { display: flex; align-items: center; gap: 14px; }
.bd-me-tx { flex: 1; min-width: 0; }
.bd-me .bd-me-title { display: block; margin: 0; font-size: 12.5px; font-weight: 800; color: var(--blue); letter-spacing: .01em; }
.bd-me-goal { margin-top: 3px; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.bd-me-sub { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--faint); }
.bd-me .bd-me-rk {
  width: 66px; height: 66px; flex: none; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  background: var(--card); color: var(--ink); box-shadow: none;
  border: 3px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad-brand) border-box;
}
.bd-me .bd-me-rk b { font-size: 22px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bd-me .bd-me-rk small { font-size: 9.5px; font-weight: 700; color: var(--faint); opacity: 1; margin: 0; }
.bd-me.top .bd-me-rk { background: linear-gradient(var(--gold-soft), var(--gold-soft)) padding-box, linear-gradient(160deg, #FFE38A, #E9B33A) border-box; }
.bd-me.top .bd-me-rk b { color: var(--gold-text); }

.bd-me-bar { position: relative; height: 8px; margin: 16px 12px 0 0; border-radius: 99px; background: var(--card2); }
.bd-me-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--grad-brand); }
.bd-me-bar > span { position: absolute; top: 50%; transform: translate(-50%, -50%); line-height: 0; }
.bd-me-bar > span .fr-av { width: 22px; height: 22px; font-size: 10px; box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4px var(--blue); }

.bd-me-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.bd-me-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue-deep, var(--blue)); font-size: 12px; font-weight: 700;
}
.bd-me-chip b { font-weight: 900; }
.bd-me-chip.gold { background: var(--gold-soft); color: var(--gold-text); }
.bd-anim .bd-me-bar > i { animation: bd-grow .9s .3s cubic-bezier(.2, .8, .2, 1) both; }
.bd-anim .bd-me-bar > span { animation: bd-run .9s .3s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .bd-anim .bd-me-bar > i, .bd-anim .bd-me-bar > span { animation: none; } }

/* ============================================================
   11 ต.ค. 69 · แผ่นชั้นหน้าเป็นสีอ่อน ไม่ใช่ขาวล้วน
   เจ้าของ: "ปรับสีให้หน่อย ขาว ๆ ที่เลเยอร์ 2 ให้มันเป็นสีอ่อน ๆ"
   แผ่นไล่จากชมพูอ่อน (รับแสงชมพูของพื้นหลัง) ลงไปหาสีหลักของธีมอ่อน ๆ
   การ์ดกับแถวบนแผ่นเป็นขาวโปร่งนิด ๆ + ขอบขาว — ยังแยกชั้นจากแผ่นได้โดยไม่กลับไปขาวโพลน
   ============================================================ */
/* ตัวแปรสีแผ่นอยู่ที่ตัวจอ ไม่ใช่ที่แผ่น — พื้นของจอ (ตอนเด้งเลยขอบล่าง) ต้องหยิบสีเดียวกันได้ */
#scr-board {
  /* สีแผ่นผสมจากสีหลักของธีมเป็นหลัก — เดิมกำหนดชมพู/ม่วงตายตัว แล้วธีมเขียวกับฟ้าได้แผ่นชมพูใต้พื้นหลังเขียว
     (เจ้าของถามว่าธีมอื่นเป็นยังไง → เจอตอนไล่ดูครบ 15 ธีม) ชมพูมีเฉพาะธีมที่สีหลักเป็นโทนชมพู-ม่วงอยู่แล้ว */
  --bd-s1: color-mix(in srgb, var(--blue) 20%, var(--scr));
  --bd-s2: color-mix(in srgb, var(--blue) 15%, var(--scr));
  --bd-s3: color-mix(in srgb, var(--blue) 10%, var(--scr));
}
.bd-sheet {
  background: linear-gradient(180deg, var(--bd-s1) 0%, var(--bd-s2) 340px, var(--bd-s3) 100%);
}
:root:is([data-theme="light"], [data-theme="warm"], [data-theme="sweet"]) #scr-board {
  --bd-s1: color-mix(in srgb, #FF6FB5 22%, var(--scr));
  --bd-s2: color-mix(in srgb, #A78BFA 20%, var(--scr));
  --bd-s3: color-mix(in srgb, var(--blue) 16%, var(--scr));
}
.bd-sheet .bd-row {
  background: color-mix(in srgb, var(--card) 62%, transparent);
  border-color: color-mix(in srgb, #fff 60%, transparent);
  box-shadow: 0 8px 20px -16px color-mix(in srgb, var(--blue) 60%, #000);
}
.bd-sheet .bd-row.me { background: color-mix(in srgb, var(--blue) 14%, var(--card)); border-color: var(--blue); }
.bd-sheet > .bd-me { background: var(--card); }   /* ทึบ — การ์ดคร่อมขอบแผ่น ส่วนบนอยู่บนพื้นหลังสีเข้ม ถ้าโปร่งจะเป็นแถบเทา */
.bd-sheet .bd-me-bar { background: color-mix(in srgb, var(--blue) 12%, var(--card2)); }

/* ============================================================
   11 ต.ค. 69 · เลื่อนลงล่างสุดแล้วสีไม่เท่ากัน
   เจ้าของ: "พอเลื่อนไปด้านล่างมันสีไม่เท่ากัน"
   ต้นเหตุ: แผ่นชั้นหน้าจบที่ปุ่ม "ซ่อนชื่อ" แต่ที่เว้นให้แถบเมนูล่าง (~90px) เป็น padding ของตัวจอ
   อยู่นอกแผ่น จึงเป็นแถบสีพื้นแอปคนละสีโผล่ใต้แผ่น · รายชื่อสั้นยิ่งเห็นเป็นแผ่นใหญ่
   ตอนนี้: ตัวจอสูงอย่างน้อยเต็มจอ · แผ่นยืดลงไปจนสุด และเป็นเจ้าของที่เว้นแถบเมนูเอง
   พื้นของจอครึ่งล่างเป็นสีปลายแผ่น — เด้งเลยขอบล่าง (iPhone) ก็ยังสีเดียวกัน
   ============================================================ */
#scr-board { background: linear-gradient(180deg, transparent 50%, var(--bd-s3) 50%); }
.bd-body { min-height: 100%; padding-bottom: 0 !important; }
.bd-sheet { flex: 1 0 auto; padding-bottom: calc(88px + var(--tabgap, 0px)); }
:root[data-nav="side"] .bd-sheet { padding-bottom: 28px; }   /* จอกว้าง: เมนูอยู่ข้าง ไม่มีแถบล่างให้หลบ */
/* มือถือ: ตัวจอเว้นที่ให้แถบเมนูไว้แล้ว (alt.css · .screens > .screen) — แผ่นเว้นซ้ำจะเป็นที่ว่างสองชั้น
   ที่เว้นของตัวจออยู่นอกแผ่นก็จริง แต่พื้นครึ่งล่างของจอเป็นสีปลายแผ่นแล้ว จึงต่อกันเนียน */
@media (max-width: 768px), (display-mode: standalone) {
  :root:not([data-nav="side"]) .bd-sheet { padding-bottom: 16px; }
}

/* ============================================================
   11 ต.ค. 69 · ตอนเข้าจอ "ค้างก่อน"
   ------------------------------------------------------------
   1) ระหว่างรอ: โครงรูปทรงเดียวกับจอจริง + แสงวิ่งผ่าน (board.js · renderBoard)
   2) เบาลงบนมือถือ: เบลอฉากหลัง (backdrop-filter) บนป้ายหกจุดต้องคำนวณใหม่ทุกเฟรม เพราะใต้ป้าย
      มีประกายดาวกะพริบอยู่ตลอด — พื้นข้างหลังเป็นสีไล่นุ่ม ๆ อยู่แล้ว เบลอแล้วหน้าตาแทบไม่ต่าง
      จึงถอดเบลอ แล้วเพิ่มความทึบพื้นป้ายนิดเดียวแทน · วงแหวนหมุนขอชั้นของตัวเอง (will-change)
   ============================================================ */
.bd-bg .bd-meter, .bd-bg .bd-mepill, .bd-bg .bd-swap, .bd-bg .bd-pc-n {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.bd-bg .bd-meter, .bd-bg .bd-mepill, .bd-bg .bd-swap { background: rgba(255, 255, 255, .2); }
.bd-ring { will-change: transform; }

.bd-sk .fr-av, .bd-sk-pill, .bd-sk-c, .bd-sk-l, .bd-me.bd-sk { position: relative; overflow: hidden; }
.bd-bg .bd-sk .fr-av { background: rgba(255, 255, 255, .2); }
.bd-sk-pill { display: block; width: 64px; height: 26px; margin-top: 18px; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.bd-pc.p1.bd-sk { padding-bottom: 30px; }
.bd-row.bd-sk { gap: 14px; }
.bd-sk-c { width: 38px; height: 38px; flex: none; margin-left: 30px; border-radius: 50%; background: var(--card2); }
.bd-sk-l { flex: 1; max-width: 140px; height: 12px; border-radius: 99px; background: var(--card2); }
.bd-sk .fr-av::before, .bd-sk-pill::after, .bd-sk-c::after, .bd-sk-l::after, .bd-me.bd-sk::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: bd-shim 1.3s ease-in-out infinite;
}
@keyframes bd-shim { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .bd-sk .fr-av::before, .bd-sk-pill::after, .bd-sk-c::after, .bd-sk-l::after, .bd-me.bd-sk::after { animation: none; }
}

/* ============================================================
   11 ต.ค. 69 · ยังไม่ได้เข้าบัญชี (boardGuestHTML ใน board.js)
   ------------------------------------------------------------
   เจ้าของ: "ลองตกแต่งหน้านี้ให้ดูหน่อย" — จอเดิม: การ์ดเล็กใบเดียว พื้นหลังสีสดว่างครึ่งจอ
   และแผ่นชั้นหน้าจบกลางจอ ข้างใต้เป็นพื้นจอสีเข้มอีกครึ่ง
   • ชั้นหลัง: ชื่อจอ + แท่นสามอันดับแบบโครง (รูปเส้นประ · เหรียญขาว · รางวัลจริงของแต่ละที่) ลอยขึ้นลงช้า ๆ
   • ชั้นหน้า: การ์ดคร่อมขอบแผ่น · ถ้วยลอยบนขอบการ์ด · กติกาจริงสามข้อ · ปุ่มเข้าสู่ระบบมีแสงวาบ
   ท่าเคลื่อนไหวทุกชิ้นใช้ transform/opacity (การ์ดจอทำ) · โหมดลื่นหยุดที่เฟรมแรก · ลดการเคลื่อนไหว = ไม่ขยับ
   ทองไม่ได้ใช้ที่ไหนเลยบนจอนี้ — ยังไม่มีใครทำอะไรสำเร็จบนจอนี้ (กฎทองของโปรเจกต์)
   ============================================================ */

/* สีปลายแผ่น (--bd-s3) ต้องประกาศที่ตัวจอด้วย — พื้นครึ่งล่างของจอข้างบน (#scr-board · linear-gradient … var(--bd-s3))
   อ่านตัวแปรนี้ แต่เดิมมันประกาศไว้ที่ .bd-sheet ซึ่งเป็นลูก ตัวแปรไม่ไหลขึ้นไปหาพ่อ → ค่าว่าง พื้นครึ่งล่างจึงโปร่งใส
   (เจอตอนรวมกับงานอีกสาย 12 ต.ค. 69) · ค่าเดียวกับที่ .bd-sheet ใช้ทุกธีม */
#scr-board { --bd-s3: color-mix(in srgb, var(--blue) 10%, var(--scr)); }
:root:is([data-theme="light"], [data-theme="warm"], [data-theme="sweet"]) #scr-board { --bd-s3: color-mix(in srgb, var(--blue) 16%, var(--scr)); }

/* ---------- ชั้นหลัง ---------- */
.bd-guest-head { margin-top: 4px; text-align: center; color: #fff; }
.bd-guest-head b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.02em; text-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.bd-guest-head span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; opacity: .82; }
.bd-bg .bd-guest-head + .bd-podium { padding-top: 46px; }

.bd-ghost .bd-pc-av .fr-av {
  display: grid; place-items: center; color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .14); border: 1.5px dashed rgba(255, 255, 255, .6);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .45);
}
.bd-ghost .bd-pc-av .fr-av svg { width: 52%; height: 52%; }
.bd-bg .bd-ghost .bd-medal { background: rgba(255, 255, 255, .92); color: #3E4A5E; box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .35); }
.bd-ghost .bd-crown { color: rgba(255, 255, 255, .92); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3)); }
.bd-ghost .bd-beam { --m: #fff; opacity: .26; }
.bd-ghost.p1 .bd-beam { opacity: .36; }
.bd-bg .bd-ghost .bd-pc-n, .bd-bg .bd-ghost.p1 .bd-pc-n {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; box-shadow: none;
}
.bd-bg .bd-ghost .bd-pc-n b, .bd-bg .bd-ghost.p1 .bd-pc-n b { color: #fff; font-size: 15px; }
.bd-bg .bd-ghost.p1 .bd-pc-n b { font-size: 17px; }
/* ลอยขึ้นลงคนละจังหวะ — แท่นที่นิ่งสนิทดูเป็นภาพตัวอย่างที่ค้าง ไม่ใช่ที่ว่างรอคน */
.bd-ghost .bd-pc-av { animation: bd-float 3.6s ease-in-out infinite; }
.bd-ghost.p1 .bd-pc-av { animation-delay: -1.2s; }
.bd-ghost.p3 .bd-pc-av { animation-delay: -2.4s; }
@keyframes bd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- ชั้นหน้า ---------- */
.bd-guest {
  position: relative; margin-top: -26px; padding: 0 18px 18px; border-radius: 26px; text-align: center;
  background: var(--card);
  box-shadow: 0 18px 36px -18px rgba(15, 20, 45, .45), 0 0 0 1px var(--line);
}
/* ถ้วยลอยคร่อมขอบบนของการ์ด + วงคลื่นแผ่ออกเป็นจังหวะ */
.bd-guest-ic {
  position: relative; width: 58px; height: 58px; margin: 0 auto 12px; transform: translateY(-26px); margin-bottom: -14px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--blue); color: var(--on-accent, #fff);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%);
  box-shadow: 0 0 0 5px var(--card), 0 14px 26px -10px color-mix(in srgb, var(--blue) 75%, transparent);
}
.bd-guest-ic svg { width: 28px; height: 28px; }
.bd-guest-ic::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--blue) 60%, transparent);
  animation: bd-ping 2.8s cubic-bezier(.23, 1, .32, 1) infinite;
}
@keyframes bd-ping { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.bd-guest-t { margin: 0; font-size: 19px; font-weight: 900; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.bd-guest-s { margin: 6px auto 0; max-width: 34ch; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

.bd-guest-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.bd-guest-list li {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--blue) 8%, var(--card2));
}
.bd-guest-list li > svg { flex: none; width: 22px; height: 22px; color: var(--blue); }
.bd-guest-list li > svg.tok { width: 22px; height: 22px; }
.bd-guest-list span { display: flex; flex-direction: column; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--faint); }
.bd-guest-list b { font-size: 14px; font-weight: 800; color: var(--ink); }

/* ปุ่มเข้าสู่ระบบ: แสงวาบพาดผ่านทุกราว 3.6 วิ (แบบ Shimmer Button ของ Magic UI แต่เลื่อนด้วย transform ล้วน) */
.bd-guest-go {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 50px; margin-top: 16px; border: none; border-radius: 999px; cursor: pointer;
  background: var(--blue); color: var(--on-accent, #fff);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%);
  font: inherit; font-size: 15.5px; font-weight: 800;
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--blue) 85%, transparent);
  transition: transform .16s cubic-bezier(.23, 1, .32, 1);
}
.bd-guest-go svg { width: 18px; height: 18px; }
.bd-guest-go:active { transform: scale(.97); }
.bd-guest-go::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: bd-sheen 3.6s cubic-bezier(.4, 0, .2, 1) 1.2s infinite;
}
@keyframes bd-sheen { 0% { transform: translateX(-120%); } 32%, 100% { transform: translateX(120%); } }
.bd-guest-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 12px; font-weight: 600; color: var(--faint); }
.bd-guest-note svg { width: 15px; height: 15px; flex: none; }

/* กดเข้า: ชื่อจอ → แท่น → การ์ด (ใช้ .bd-in ชุดเดิม) แล้วกติกาไล่ขึ้นทีละแถว */
.bd-anim .bd-guest-list li { animation: bd-up .5s cubic-bezier(.2, .9, .3, 1.05) both; animation-delay: calc(var(--i, 0) * 60ms + 200ms); }

:root[data-lite] .bd-ghost .bd-pc-av, :root[data-lite] .bd-guest-ic::after, :root[data-lite] .bd-guest-go::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .bd-ghost .bd-pc-av, .bd-guest-ic::after, .bd-guest-go::after, .bd-anim .bd-guest-list li { animation: none; }
}

/* Astral Black (ขาว ดำ เทา ล้วน) — แสงชมพู/ส้มของพื้นหลังกระดานเป็นแสงเงินแทน
   12 ต.ค. 69 · เจอตอนเจ้าของส่งภาพกระดานในธีมนี้มา (แสงชมพูมุมขวาบน · ส้มด้านล่าง หลุดจากกฎของธีม)
   ตัวพื้นยังเป็น --grad-hero ของธีม · เหรียญโทเคนบนป้ายรางวัลยังเป็นสีของเหรียญ (โลโก้ของเงินในแอป) */
:root[data-theme="astral"] .bd-bg {
  background:
    radial-gradient(70% 55% at 12% 8%, rgba(255, 255, 255, .16) 0%, transparent 60%),
    radial-gradient(70% 60% at 94% 20%, rgba(255, 255, 255, .2) 0%, transparent 64%),
    radial-gradient(90% 60% at 30% 100%, rgba(255, 255, 255, .09) 0%, transparent 66%),
    var(--grad-hero);
}