/* ธีมหน้าต่อสู้ของ Poolto: โต๊ะพูลผ้าสักหลาด การ์ดเป็นป้ายลูกพูล คำสั่งเป็นลูกพูลหมายเลข */
/* ไฟล์นี้วางทับ turn.css ของหน้าต่อสู้เท่านั้น */

.battle {
  background:
    radial-gradient(ellipse at 50% 38%, #2fa397 0%, #1d7f74 48%, #135c55 100%);
  --wood: #6b4226;
  --navy: #14262e;
  --cream: #fff8ea;
}
/* ขอบไม้ของโต๊ะ */
.battle::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 0 10px var(--wood), inset 0 0 0 13px #3a2412, inset 0 0 40px rgba(0, 0, 0, .35);
}
/* จุดบอกระยะบนขอบโต๊ะ (diamond) */
/* ฉากแบ่งสองฝั่ง: ครึ่งบนเป็นสีของมอนศัตรู ครึ่งล่างเป็นสีของมอนเรา (ตั้งค่าจาก stage.js) */
.bt-arena {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .13) 0 3px, transparent 4px),
    linear-gradient(180deg, var(--foe-a, #3d6aa8) 0%, var(--foe-b, #162d52) 49%, var(--me-b, #162d52) 51%, var(--me-a, #3d6aa8) 100%);
  background-size: 16vmin 16vmin, 100% 100%;
  background-position: 50% 50%, 0 0;
  background-color: transparent;
}
/* เส้นชอล์กกลางโต๊ะแบ่งสองฝั่ง */
.bt-arena::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0;
  border-top: 2px dashed rgba(255, 255, 255, .3); pointer-events: none;
}
/* ชิปบัฟที่บินจากตัวมอนไปการ์ดสถานะ (อยู่บน body จึงใช้ตำแหน่งจอ) */
.bt-fly { position: fixed; z-index: 60; pointer-events: none; white-space: nowrap; will-change: transform, opacity; }
/* แสงวาบทั้งจอตอนอัลติโดน */
.bt-flash { position: absolute; inset: 0; pointer-events: none; z-index: 4; animation: btFlash .65s ease-out forwards; }
@keyframes btFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
#btStage { filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .22)); }
@media (max-width: 640px) { #btStage { filter: none; } }

/* เงาลูกบนผ้า */
.bt-foe-spot, .bt-me-spot { position: absolute; width: 180px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .25); filter: blur(4px); }

/* ---------- การ์ดข้อมูล = ป้ายลูกพูล ---------- */
.bt-card {
  background: var(--navy); color: var(--cream); border: 0; border-radius: 18px 18px 18px 40px;
  padding: 10px 14px 12px 42px; width: min(46vw, 300px); min-width: 0;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .08);
}
/* ลูกกลมเล็กทางซ้ายแสดงระดับของตัวนั้น */
.bt-card::before {
  content: attr(data-ball); position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--ball, #ffc93c) 13% 100%);
  color: var(--navy); font: 700 18px var(--display); border: 3px solid #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
}
.bt-foe { top: 16px; right: 16px; --ball: #ff6b57; }
/* การ์ดของเรา: ธีมเดียวกับการ์ดศัตรู ต่างแค่ลูกกลมสีฟ้า วางเหนือกล่องข้อความ ไม่บังตัวมอน */
.bt-me { left: 14px; bottom: calc(118px + var(--sb)); width: min(46vw, 300px); padding: 8px 14px 8px 48px; }
.bt-me .bt-row b { font-size: 14px; }
.bt-me .bt-row > span, .bt-me .bt-sub { font-size: 11px; }
.bt-me .bt-hp { height: 10px; margin-top: 5px; }
.bt-mini-row { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 6px; margin-top: 4px; font: 500 10px var(--display); color: #bfe9df; }
.bt-mini-row .bt-sta, .bt-mini-row .bt-gauge { height: 5px; }
.bt-me .bt-xp { margin-top: 5px; height: 3px; }
.bt-row b { font: 600 17px var(--display); color: var(--cream); }
.bt-row > span { font: 500 13px var(--display); color: #bfe9df; }
.bt-sub { color: #bfe9df; }
.diff { background: rgba(255, 255, 255, .14) !important; color: #fff !important; border-radius: 99px; padding: 1px 9px; }

/* HP แบบแท่งสนุกเกอร์: มีช่องแบ่งทุกสิบเปอร์เซ็นต์ */
.bt-hp { height: 14px; border-radius: 8px; background: #0b1820; border: 0; overflow: hidden; margin-top: 8px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); position: relative; }
.bt-hp i { background: linear-gradient(90deg, #7ff2d0, #2fd1b0); transition: width .8s cubic-bezier(.2, .9, .3, 1); }
.bt-hp i[data-low="1"] { background: linear-gradient(90deg, #ffab91, #ff5252); }
.bt-hp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(10, 24, 32, .75) calc(10% - 2px) 10%);
}
.bt-xp { height: 5px; background: #0b1820; border-radius: 3px; }
.bt-xp i { background: #ffd166; }
.bt-pips i { border-color: var(--navy); background: #2b3c44; }
.bt-pips i.on { background: #ffd166; box-shadow: 0 0 8px rgba(255, 209, 102, .7); }

/* ---------- กล่องข้อความ = กระดานคะแนนเล็ก ---------- */
.bt-log {
  background: rgba(20, 38, 46, .92); color: var(--cream); border: 0; border-radius: 16px;
  box-shadow: inset 0 3px 0 #ffd166, 0 10px 22px rgba(0, 0, 0, .3); font: 500 17px/1.45 var(--display);
  padding: 14px 18px; left: 14px; right: 210px; bottom: calc(14px + var(--sb)); min-height: 92px;
}
.bt-log.pop { animation: btSlide .35s cubic-bezier(.2, .9, .3, 1); }
@keyframes btSlide { from { transform: translateY(10px); opacity: 0; } }

/* ---------- คำสั่ง = ลูกพูลหมายเลข 1-4 ---------- */
/* เมนูคำสั่ง: ลูกพูลเรียงสี่ปุ่มโดยไม่มีกรอบ ปุ่มเล็กพอดีมือ */
.bt-menu {
  right: 14px; bottom: calc(14px + var(--sb)); width: auto; grid-template-columns: repeat(2, 88px); gap: 8px;
  max-height: none; padding: 0; background: none; box-shadow: none;
}
.bt-cmd {
  position: relative; width: 88px; height: 42px; border-radius: 12px; padding: 0; border: 2px solid #fff; color: #fff;
  font: 600 11px/1.15 var(--display); text-align: center; display: grid; place-items: center; align-content: center;
  background: var(--c, #e85d5d);
  box-shadow: 0 4px 0 rgba(10, 30, 30, .35), 0 6px 12px rgba(0, 0, 0, .2);
  transition: transform .12s, box-shadow .12s;
}
.bt-cmd span { font-size: 10.5px; white-space: nowrap; }
.bt-cmd small { display: block; font: 600 10px var(--display); opacity: .9; }
/* ป้ายหมายเลขเล็ก ๆ มุมซ้ายบน */
.bt-cmd::before {
  content: attr(data-n); position: absolute; top: -5px; left: -5px; width: 17px; height: 17px; border-radius: 6px;
  display: grid; place-items: center; background: var(--navy); color: #fff;
  font: 700 9px var(--display);
}
.bt-cmd:active:not(:disabled) { transform: translateY(3px) scale(.97); box-shadow: 0 1px 0 rgba(10, 30, 30, .35); }
/* ปุ่มที่ใช้ไม่ได้: เป็นสีเทาเข้มและตัวหนังสือยังอ่านออก */
.bt-cmd:disabled { background: #3d4d55; color: rgba(255, 255, 255, .55); box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.bt-cmd.yellow:disabled { color: rgba(20, 38, 46, .5); }
.bt-cmd.red { --c: #e85d5d; }
.bt-cmd.yellow { --c: #ffc93c; color: var(--navy); }
.bt-cmd.green { --c: #3fbf7f; }
.bt-cmd.blue { --c: #4f7cff; }
/* ปุ่มกลับในเมนูย่อยเป็นสีเทา แยกจากปุ่มหนี (สีน้ำเงิน) ที่อยู่ตำแหน่งเดียวกันในเมนูหลัก */
.bt-cmd.back { --c: #6f7f88; }

/* ---------- สตามินาและประจุอัลติ (บนการ์ดของเรา) ---------- */
.bt-meters { display: grid; gap: 5px; margin-top: 8px; }
.bt-sta, .bt-gauge { position: relative; height: 7px; border-radius: 4px; background: #0b1820; overflow: hidden; }
.bt-sta i { display: block; height: 100%; background: linear-gradient(90deg, #7fd9ff, #3fb6e8); transition: width .6s ease; }
.bt-gauge i { display: block; height: 100%; background: linear-gradient(90deg, #ffb74d, #ff7043); transition: width .4s ease; }
.bt-gauge.ready { animation: btGaugePulse .9s ease-in-out infinite; }
@keyframes btGaugePulse { 50% { box-shadow: 0 0 10px rgba(255, 183, 77, .9); } }

/* ---------- ชิปบัฟบนการ์ดของเรา ---------- */
.bt-buffs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; min-height: 0; }
.bt-buffs:empty { display: none; }
.bt-buff { font: 600 12px var(--display); padding: 3px 9px; border-radius: 99px; color: var(--navy); background: #ffe082;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3); animation: btBuffIn .35s cubic-bezier(.2, 1.4, .4, 1); }
.bt-buff.atk { background: #ff8a65; color: #fff; }
.bt-buff.spd { background: #7fd9ff; }
.bt-buff.def { background: #a5d6a7; }
@keyframes btBuffIn { from { transform: scale(.4); opacity: 0; } }

/* ---------- ข้อความดาเมจและสถานะ ---------- */
.bt-dmg { -webkit-text-stroke: 2px var(--navy); text-shadow: 0 3px 0 var(--navy); }

/* ---------- มือถือ: ป้ายบนและล่าง เมนูเป็นลูกพูลเรียงแถวเดียวตรงกลางล่าง ---------- */
@media (max-width: 640px) {
  .bt-card { width: min(56vw, 220px); padding: 8px 12px 10px 42px; }
  .bt-foe .bt-sub span:first-child { display: none; }
  .bt-card::before { width: 38px; height: 38px; font-size: 15px; left: -8px; }
  .bt-foe { top: 14px; right: 12px; }
  /* มือถือ: ปุ่มคำสั่งเป็นกริด 2 x 2 ขนาดใหญ่กดง่าย การ์ดของเราอยู่กลางซ้ายเหนือปุ่ม ไม่บังตัวมอน
     ขนาดปรับตามความกว้างและความสูงจอ (clamp) ไม่เล็กเกินไปบนจอเล็กและไม่ใหญ่เกินบนจอใหญ่ */
  .bt-me { left: 12px; bottom: calc(clamp(200px, 27vh, 236px) + var(--sb)); width: clamp(176px, 58vw, 240px); padding: 8px 10px 8px 44px; }
  .bt-me .bt-row b { font-size: clamp(14px, 4vw, 16px); }
  .bt-me .bt-row > span, .bt-me .bt-sub { font-size: clamp(11px, 3.2vw, 13px); }
  .bt-me .bt-mini-row { font-size: clamp(10px, 2.9vw, 12px); }
  .bt-log { left: 12px; right: 12px; bottom: calc(12px + var(--sb)); min-height: clamp(54px, 8.5vh, 72px); font-size: clamp(14px, 4.1vw, 16px); padding: 10px 14px; }
  .bt-menu {
    left: 12px; right: 12px; bottom: calc(clamp(72px, 10.5vh, 88px) + var(--sb)); display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; width: auto;
  }
  .bt-cmd { width: 100%; height: clamp(46px, 7vh, 58px); border-radius: 14px; font-size: clamp(14px, 4vw, 16px); }
  .bt-cmd span { font-size: clamp(13px, 3.6vw, 15px); }
  .bt-cmd small { font-size: clamp(11px, 3.1vw, 13px); }
  .bt-cmd::before { width: 20px; height: 20px; font-size: 11px; top: -6px; left: -6px; }
  /* ข้อความบอกวิธีเล่นมินิเกมอ่านง่ายขึ้นบนจอเล็ก */
  #btMini .gm-title { font-size: 19px; }
  #btMini .gm-how { font-size: 14px; line-height: 1.35; }
}

/* ---------- มินิเกมบนผ้าสักหลาดเดียวกัน ---------- */
#btMini.challenge { background: radial-gradient(ellipse at 50% 40%, rgba(47, 163, 151, .55), rgba(9, 41, 40, .92)); }
#btMini .gm-skip { background: var(--cream); color: var(--navy); }
#btMini .gm-score { background: var(--navy); color: var(--cream); }
#btMini .gm-bar { background: rgba(0, 0, 0, .35); }