/* ดันเจี้ยนปาร์ตี้หอระฆังเงียบ (belfry.js) — ชุดสีเดียวกับการ์ดไอเทม: กระดาษครีม · ขอบทอง · teal · ปุ่มหลักเขียว
   ฉากใหญ่ (วาร์ป · บอส · ชนะ) มืดลงรอบจอได้ แต่ตัวหนังสือ/ปุ่มยังเป็นกระดาษครีมอ่านง่าย */

/* ── หน้าต่างประตู ─────────────────────────────────────────────── */
.win[data-win="belfry"] { max-height: min(92vh, 760px); }
.win[data-win="belfry"] > .body { overflow: auto; }
.bfg { display: grid; gap: 9px; color: #3e2c16; }
.bfg-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(#fffaf0, #f8eed8); border: 1.5px solid #d9b56a; box-shadow: 0 0 0 3px #f3e3bd inset; }
.bfg-crest { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 30px;
  background: radial-gradient(circle at 40% 35%, #fff3c4, #e8b64a 70%, #b98a2a); box-shadow: 0 2px 0 #8a5a12, inset 0 -3px 0 #0000001a; }
html body .win .bfg-ht b { display: block; font: 700 21px/1.2 var(--font-head, inherit); color: #5a3a0e; }
html body .win .bfg-ht small { font-size: 13px; color: #7a6548; }
.bfg-story { position: relative; margin: 0; padding: 9px 12px 9px 44px; border-radius: 12px; background: #fffdf6; border: 1px solid #e3d4ae; font-size: 13.5px; line-height: 1.55; color: #4a3a26; }
.bfg-story i { position: absolute; left: 9px; top: 9px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font-head, inherit);
  font-style: normal; color: #fffdf4; background: linear-gradient(#3f8588, #2b686c); overflow: hidden; text-indent: -999px; }
.bfg-story i::after { content: 'Y'; position: absolute; inset: 0; display: grid; place-items: center; text-indent: 0; }
.bfg-req { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bfg-req li { display: flex; gap: 8px; align-items: center; padding: 5px 10px; border-radius: 9px; font-size: 13.5px; background: #fdf1ec; border: 1px solid #efcfc2; color: #8a3a2a; }
.bfg-req li.ok { background: #f1f9ec; border-color: #cfe6c4; color: #2f6a36; }
.bfg-req li i { font-style: normal; font-weight: 700; width: 16px; text-align: center; }
.bfg-mem { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.bfg-m { display: grid; gap: 1px; padding: 7px 10px; border-radius: 11px; background: #fffdf7; border: 1.5px solid #cfe6c4; }
.bfg-m.warn { border-color: #efcfc2; background: #fffaf7; }
html body .win .bfg-m b { font-size: 14px; }
.bfg-m small { font-size: 12.5px; color: #7a6548; }
.bfg-m em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #2f7a36; }
.bfg-m.warn em { color: #b0492a; }
.bfg-rw { display: grid; gap: 6px; }
.bfg-rwrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 12px; background: #fffdf7; border: 1px solid #efe3c8; }
.bfg-rwrow.gold { background: linear-gradient(#fff6dc, #fbe9bb); border-color: #e8cf8f; }
.bfg-lab { min-width: 76px; font: 700 13px/1.25 var(--font-head, inherit); color: #6b4a14; }
.bfg-lab small { font: 400 11.5px/1.2 inherit; color: #8a7050; }
.bfg-it { display: inline-grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 3px 9px 3px 3px;
  border-radius: 10px; background: #fff; border: 1px solid #e3d0a4; cursor: pointer; }
.bfg-it.plain { grid-template-columns: auto; padding: 4px 10px; cursor: default; }
.bfg-it > :first-child:not(b) { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; font-size: 20px; }
.bfg-it .ic3d { width: 32px; height: 32px; object-fit: contain; }
html body .win .bfg-it b { font-size: 13px; }
.bfg-it small { font-size: 12px; color: #7a6548; }
.bfg-note { font-size: 12.5px; color: #7a6548; }
.bfg-week { margin: 0; font-size: 13px; color: #6b4a14; text-align: center; }
html body .win .foot button.bfg-go { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid #3d8a45; color: #fff; font: 700 16px/1.2 var(--font-head, inherit);
  text-shadow: 0 1px 1px #1d4a2355; background: linear-gradient(#72c46a, #479a44); box-shadow: inset 0 1px 0 #ffffff55, 0 2px 0 #357a37; }
html body .win .foot button.bfg-go.alt { border-color: #285d61; background: linear-gradient(#3f8588, #2b686c); box-shadow: 0 2px 0 #1f4d50; }
html body .win .foot button.bfg-go:disabled { filter: saturate(.3); opacity: .6; }

/* ── ยืนยันความพร้อม ─────────────────────────────────────────── */
.bf-check { position: fixed; inset: 0; z-index: 9200; display: grid; place-items: center; background: radial-gradient(ellipse at center, #1a1206aa, #1a120666 60%, transparent);
  animation: bf-fade .25s ease-out; }
.bf-check.out { animation: bf-fade .3s reverse forwards; }
@keyframes bf-fade { from { opacity: 0; } }
.bfc-card { width: min(380px, calc(100vw - 24px)); display: grid; gap: 10px; justify-items: center; padding: 18px 18px 16px; border-radius: 18px; text-align: center;
  background: linear-gradient(#fffaf0, #f8eed8); border: 2px solid #d9b56a; box-shadow: 0 0 0 4px #f3e3bd, 0 0 0 5px #caa45e, 0 14px 40px #0008; color: #3e2c16;
  animation: bf-pop .3s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes bf-pop { from { transform: scale(.85); opacity: 0; } }
.bfc-bell { width: 62px; height: 62px; margin-top: -48px; border-radius: 50%; display: grid; place-items: center; font-size: 32px;
  background: radial-gradient(circle at 40% 35%, #fff3c4, #e8b64a 70%, #b98a2a); box-shadow: 0 3px 0 #8a5a12, 0 0 0 4px #fffaf0; animation: bf-swing 1.6s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes bf-swing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.bfc-t { font: 700 20px/1.25 var(--font-head, inherit); color: #5a3a0e; }
.bfc-s { font-size: 13.5px; color: #7a6548; }
.bfc-bar { position: relative; width: 100%; height: 26px; border-radius: 13px; background: #ece3cf; overflow: hidden; border: 1px solid #d8c49a; }
.bfc-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #72c46a, #9bd97a); transition: width .35s ease; }
.bfc-bar span { position: relative; display: grid; place-items: center; height: 100%; font: 700 13.5px/1 var(--font-head, inherit); color: #2f4a20; }
.bfc-mem { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 5px; }
.bfc-mem li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: #fffdf7; border: 1px solid #efe3c8; text-align: left; }
.bfc-mem li.ok { background: #f1f9ec; border-color: #cfe6c4; animation: bf-ok .35s ease-out; }
@keyframes bf-ok { 0% { transform: scale(1.04); box-shadow: 0 0 0 3px #9bd97a88; } }
.bfc-mem i { font-style: normal; text-align: center; }
.bfc-mem b { font-size: 14px; }
.bfc-mem em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #8a7050; }
.bfc-mem li.ok em { color: #2f7a36; }
.bfc-time { position: relative; width: 100%; height: 8px; border-radius: 4px; background: #ece3cf; overflow: hidden; }
.bfc-time i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #e0663a, #e8b64a); transition: width .5s linear; }
.bfc-time span { position: absolute; right: 0; top: 10px; font-size: 12px; color: #8a7050; }
.bfc-btns { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; width: 100%; margin-top: 10px; }
.bfc-btns button { min-height: 46px; border-radius: 12px; cursor: pointer; font: 700 16px/1.2 var(--font-head, inherit); }
.bfc-no { border: 1px solid #d8c49a; background: linear-gradient(#fffcf3, #ecddbc); color: #5a4020; }
.bfc-yes { border: 1px solid #3d8a45; color: #fff; text-shadow: 0 1px 1px #1d4a2355; background: linear-gradient(#72c46a, #479a44); box-shadow: inset 0 1px 0 #ffffff55, 0 2px 0 #357a37; }
.bfc-wait { margin: 10px 0 0; font-size: 13.5px; color: #7a6548; }
.bfc-card.going { border-color: #e8b64a; box-shadow: 0 0 0 4px #f3e3bd, 0 0 0 5px #caa45e, 0 0 60px #ffd76a88, 0 14px 40px #0008; }

/* ── วาร์ป: ม่านมืด + วงทองหมุน + อักษรระฆัง + แสงวาบ ─────────── */
.bf-warp { position: fixed; inset: 0; z-index: 9300; pointer-events: none; overflow: hidden; --warp: 2600ms; }
.bf-warp > i { position: absolute; }
.bfw-vig { inset: 0; background: radial-gradient(circle at 50% 55%, transparent 0 18%, #0d0a05ee 70%); opacity: 0; }
.bfw-ring { left: 50%; top: 55%; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg, transparent, #ffd76a 12%, transparent 25%, #7fd6c8 37%, transparent 50%, #ffd76a 62%, transparent 75%, #fff2b0 87%, transparent);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61% 66%, transparent 67%); mask: radial-gradient(circle, transparent 60%, #000 61% 66%, transparent 67%); }
.bfw-ring.r2 { width: 90vmin; height: 90vmin; margin: -45vmin 0 0 -45vmin; }
.bfw-ring.r3 { width: 34vmin; height: 34vmin; margin: -17vmin 0 0 -17vmin; }
.bfw-runes { left: 50%; top: 55%; width: 74vmin; height: 74vmin; margin: -37vmin 0 0 -37vmin; border-radius: 50%; border: 2px dashed #e8b64a99; opacity: 0; }
.bfw-flash { inset: 0; background: radial-gradient(circle at 50% 55%, #fffbe6, #ffe8a0 40%, #e8b64a00 80%); opacity: 0; }
.bf-warp.in .bfw-vig { animation: bfw-vig var(--warp) ease-in forwards; }
.bf-warp.in .bfw-ring.r1 { animation: bfw-spin var(--warp) ease-in forwards; }
.bf-warp.in .bfw-ring.r2 { animation: bfw-spin2 var(--warp) ease-in forwards; }
.bf-warp.in .bfw-ring.r3 { animation: bfw-spin var(--warp) .2s ease-in forwards; }
.bf-warp.in .bfw-runes { animation: bfw-runes var(--warp) linear forwards; }
.bf-warp.in .bfw-flash { animation: bfw-flash var(--warp) ease-in forwards; }
@keyframes bfw-vig { to { opacity: 1; } }
@keyframes bfw-spin { 0% { opacity: 0; transform: rotate(0) scale(1.4); } 30% { opacity: 1; } 100% { opacity: 1; transform: rotate(540deg) scale(.2); } }
@keyframes bfw-spin2 { 0% { opacity: 0; transform: rotate(0) scale(1.2); } 30% { opacity: .8; } 100% { opacity: 1; transform: rotate(-420deg) scale(.15); } }
@keyframes bfw-runes { 0% { opacity: 0; transform: rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(180deg) scale(.3); } }
@keyframes bfw-flash { 0%, 80% { opacity: 0; } 100% { opacity: 1; } }
/* เปิดตาในดัน: แสงวาบจางออก + ป้ายชื่อดันเจี้ยน */
.bfw-flash.on { opacity: 1; animation: bfw-out 1.4s ease-out forwards; }
@keyframes bfw-out { to { opacity: 0; } }
.bfw-title { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; text-align: center; white-space: nowrap;
  animation: bfw-title 3.4s ease-out forwards; }
.bfw-title small { font: 600 15px/1 var(--font-head, inherit); color: #fff2d0; letter-spacing: .3em; text-shadow: 0 2px 6px #000a; }
.bfw-title b { font: 700 clamp(34px, 7vw, 60px)/1.1 var(--font-head, inherit); color: #ffe7a0; text-shadow: 0 3px 0 #6b4510, 0 0 24px #ffd76a, 0 4px 18px #000c; }
.bfw-title em { font-style: normal; font: 600 16px/1.2 var(--font-head, inherit); color: #fffaf0; text-shadow: 0 2px 6px #000c; }
@keyframes bfw-title { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.9); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -56%); } }

/* ── แถบภารกิจในดัน (บนกลางจอ) ─────────────────────────────── */
.bf-hud { position: fixed; left: 50%; top: 8px; z-index: 30; transform: translateX(-50%); width: min(420px, calc(100vw - 20px)); display: grid; gap: 5px; padding: 8px 12px 9px;
  border-radius: 14px; background: linear-gradient(#fffaf0f2, #f8eed8f2); border: 1.5px solid #d9b56a; box-shadow: 0 0 0 3px #f3e3bdcc inset, 0 6px 18px #0005; color: #3e2c16; }
.bfh-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bfh-st { padding: 2px 9px; border-radius: 999px; background: linear-gradient(#3f8588, #2b686c); color: #fffdf4; font: 700 12.5px/1.5 var(--font-head, inherit); }
.bfh-top b { font: 700 16px/1.2 var(--font-head, inherit); color: #5a3a0e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bfh-time { font: 700 14px/1 var(--font-head, inherit); color: #8a5a12; font-variant-numeric: tabular-nums; }
.bfh-goal { margin: 0; font-size: 13.5px; line-height: 1.4; color: #4a3a26; }
.bfh-hold { position: relative; height: 22px; border-radius: 11px; background: #ece3cf; overflow: hidden; border: 1px solid #d8c49a; }
.bfh-hold i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #e8b64a, #ffd76a); transition: width .2s linear; }
.bfh-hold span { position: relative; display: grid; place-items: center; height: 100%; font: 700 12.5px/1 var(--font-head, inherit); color: #5a3a0e; }
.bfh-shield { margin: 0; padding: 4px 10px; border-radius: 9px; background: #e8f6f4; border: 1px solid #9cc9bd; font: 700 13px/1.4 var(--font-head, inherit); color: #1f5558; }
.bfh-shield.down { background: #fff0d6; border-color: #e8b64a; color: #8a3a12; animation: bf-blink .6s ease-in-out infinite alternate; }
@keyframes bf-blink { to { box-shadow: 0 0 0 3px #ffd76a88; } }
.bfh-pips { display: flex; gap: 5px; justify-content: center; }
.bfh-pips i { width: 30px; height: 6px; border-radius: 3px; background: #e3d6b8; }
.bfh-pips i.ok { background: #5cae57; }
.bfh-pips i.on { background: #e8b64a; box-shadow: 0 0 6px #e8b64a; }
.bfh-exit { justify-self: end; margin-top: -2px; padding: 2px 10px; min-height: 24px; border-radius: 999px; border: 1px solid #d8c49a; background: #fffcf3; color: #7a5a2a; font: 600 12px/1.2 inherit; cursor: pointer; }

/* ── บทพูด (ล่างกลางจอ แบบคำบรรยายหนัง) ─────────────────────── */
.bf-say { position: fixed; left: 50%; bottom: 150px; z-index: 31; transform: translateX(-50%); width: min(620px, calc(100vw - 24px)); display: grid; grid-template-columns: 40px 1fr;
  gap: 10px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 16px; background: linear-gradient(#fffaf0f5, #f8eed8f5); border: 1.5px solid #d9b56a;
  box-shadow: 0 0 0 3px #f3e3bdcc inset, 0 8px 22px #0006; animation: bf-up .35s ease-out; pointer-events: none; }
.bf-say.out { animation: bf-up .4s reverse forwards; }
@keyframes bf-up { from { opacity: 0; transform: translate(-50%, 14px); } }
.bfs-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: radial-gradient(circle at 40% 35%, #fff3c4, #e8b64a 70%, #b98a2a); }
.bf-say p { margin: 0; font: 600 15px/1.5 var(--font-head, inherit); color: #3e2c16; min-height: 1.5em; }
.bf-say.big { border-color: #e8b64a; box-shadow: 0 0 0 3px #f3e3bdcc inset, 0 0 30px #ffd76a66, 0 8px 22px #0006; }
.bf-say.big p { font-size: 16.5px; }
.bf-say.fail .bfs-ic { background: radial-gradient(circle at 40% 35%, #b8b0c8, #5a4a6a 70%, #2f2a3a); }

/* ── เปิดตัวบอส: แถบดำบนล่าง + ชื่อ ─────────────────────────── */
.bf-letter { position: fixed; inset: 0; z-index: 29; pointer-events: none; }
.bf-letter i { position: absolute; left: 0; right: 0; height: 0; background: #0d0a05; transition: height .5s ease; }
.bf-letter .top { top: 0; } .bf-letter .bot { bottom: 0; }
.bf-letter.on i { height: 11vh; }
.bfl-name { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: grid; justify-items: center; text-align: center; opacity: 0; transition: opacity .5s .3s; }
.bf-letter.on .bfl-name { opacity: 1; }
.bfl-name small { font: 600 15px/1.2 var(--font-head, inherit); color: #f3e3bd; letter-spacing: .25em; text-shadow: 0 2px 6px #000c; }
.bfl-name b { font: 700 clamp(32px, 6vw, 54px)/1.1 var(--font-head, inherit); color: #ffcf8a; text-shadow: 0 3px 0 #5a2a0e, 0 0 26px #e0663a, 0 4px 18px #000c; }

/* ── ชนะ: รัศมีทอง + ชื่อฉาก ───────────────────────────────── */
.bf-win { position: fixed; inset: 0; z-index: 9100; pointer-events: none; display: grid; place-items: center; opacity: 0; transition: opacity .6s; }
.bf-win.on { opacity: 1; }
.bfv-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg at 50% 50%, #ffd76a33 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 55%); mask: radial-gradient(circle, #000 0 20%, transparent 55%); animation: bfv-spin 12s linear infinite; }
@keyframes bfv-spin { to { transform: rotate(360deg); } }
.bfv-t { position: relative; display: grid; justify-items: center; text-align: center; margin-top: -12vh; animation: bf-pop .6s cubic-bezier(.2, 1.4, .4, 1); }
.bfv-t small { font: 600 18px/1.2 var(--font-head, inherit); color: #fff2d0; letter-spacing: .4em; text-shadow: 0 2px 6px #000b; }
.bfv-t b { font: 700 clamp(30px, 6vw, 56px)/1.15 var(--font-head, inherit); color: #ffe7a0; text-shadow: 0 3px 0 #6b4510, 0 0 30px #ffd76a, 0 4px 18px #000b; }

/* ── หีบรางวัล ─────────────────────────────────────────────── */
.bf-reward { position: fixed; inset: 0; z-index: 9150; display: grid; place-items: center; background: #1a120655; animation: bf-fade .3s ease-out; }
.bfr-card { position: relative; width: min(380px, calc(100vw - 24px)); display: grid; gap: 8px; justify-items: center; padding: 20px 18px 16px; border-radius: 18px; text-align: center;
  background: linear-gradient(#fffaf0, #f8eed8); border: 2px solid #d9b56a; box-shadow: 0 0 0 4px #f3e3bd, 0 0 0 5px #caa45e, 0 0 50px #ffd76a66, 0 14px 40px #0008;
  animation: bf-pop .4s cubic-bezier(.2, 1.4, .4, 1); color: #3e2c16; }
.bfr-rib { position: absolute; top: -14px; padding: 4px 14px; border-radius: 999px; font-style: normal; font: 700 13.5px/1.4 var(--font-head, inherit); color: #4a3008;
  background: linear-gradient(#f2c14e, #d99a26); box-shadow: 0 2px 0 #8a5a12; }
.bfr-chest { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: radial-gradient(circle at 40% 35%, #fff3c4, #e8b64a 70%, #b98a2a);
  box-shadow: 0 0 0 6px #fff3c466, 0 0 26px #ffd76a; animation: bf-swing 1.8s ease-in-out infinite; transform-origin: 50% 10%; }
.bfr-t { font: 700 19px/1.25 var(--font-head, inherit); color: #5a3a0e; }
.bfr-card ul { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 4px; }
.bfr-card li { padding: 6px 10px; border-radius: 9px; background: #fffdf7; border: 1px solid #efe3c8; font: 600 14px/1.35 var(--font-head, inherit); }
.bfr-card li:first-child { background: linear-gradient(#fff6dc, #fbe9bb); border-color: #e8cf8f; }
.bfr-note { margin: 2px 0 0; font-size: 12.5px; color: #7a6548; }
.bfr-ok { width: 100%; min-height: 44px; border-radius: 12px; cursor: pointer; border: 1px solid #3d8a45; color: #fff; font: 700 16px/1.2 var(--font-head, inherit);
  text-shadow: 0 1px 1px #1d4a2355; background: linear-gradient(#72c46a, #479a44); box-shadow: inset 0 1px 0 #ffffff55, 0 2px 0 #357a37; }

/* ── จอเล็ก / แนวนอน ───────────────────────────────────────── */
@media (max-width: 640px) {
  .bf-hud { top: auto; bottom: 200px; }
  .bf-say { bottom: 120px; }
  .bf-say p { font-size: 14px; }
}
html.touch-ui.land .bf-hud { top: 6px; bottom: auto; width: min(360px, 44vw); padding: 5px 9px 6px; gap: 3px; }
html.touch-ui.land .bf-hud .bfh-goal { font-size: 12.5px; }
html.touch-ui.land .bf-say { bottom: 70px; width: min(520px, 70vw); }
@media (max-height: 520px) { .bfc-card { gap: 6px; padding: 12px 14px; } .bfc-bell { width: 44px; height: 44px; margin-top: -30px; font-size: 22px; } .bfc-mem li { padding: 3px 8px; } }