/* battle-gba.css — หน้าต่อสู้ + คัตซีน + ลูกเต๋า แบบเกมกระดาน GBA ที่พี่อัดมา ในธีมหอคอย · ตั๊บ 2026-11-08
   จอเกมตายตัว 1280×720 (stage.js) → ทุกขนาดเป็น px ไม่มี media query
   ภาพตัวละคร/มอนต้นฉบับช่องละ ~324px → แสดงไม่เกิน ~420px (ไม่ยืดจนแตก) */

/* ===== ลูกเต๋า (dice-gba.js) ===== */
.numeric-die.gdie{--die-size:58px;position:relative;width:var(--die-size);height:var(--die-size);perspective:none;flex-shrink:0;filter:none}
.gdie .gd-body{position:absolute;inset:0;display:grid;place-items:center;
  filter:drop-shadow(2px 0 0 #1c1724) drop-shadow(-2px 0 0 #1c1724) drop-shadow(0 2px 0 #1c1724) drop-shadow(0 -2px 0 #1c1724) drop-shadow(0 4px 3px #0008)}
.gdie .gd-body:before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,#ffffff 0 35%,#e3e6ee 55%,#a7aec0);
  clip-path:polygon(25% 4%,75% 4%,99% 50%,75% 96%,25% 96%,1% 50%)}
.gdie .gd-body:after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,transparent 48%,#0000001a 52%);clip-path:polygon(25% 4%,75% 4%,99% 50%,75% 96%,25% 96%,1% 50%)}
.numeric-die.gdie .die-result{position:relative;inset:auto;z-index:1;display:block;opacity:1!important;background:none;border:0;clip-path:none;transition:none;font:900 calc(var(--die-size)*.56)/1 'Noto Sans Thai',Arial,sans-serif;color:#1c1724}
.gdie.is-rolling .gd-body{animation:gdWobble .14s steps(2) infinite}
.numeric-die.gdie.is-rolling .die-result{color:#4a4558}
@keyframes gdWobble{0%{transform:rotate(-9deg) translateY(-2px)}100%{transform:rotate(9deg) translateY(1px)}}
/* หยุดแล้ว: กล่องสี่เหลี่ยมขาวมุมมน */
.gdie:not(.is-rolling) .gd-body:before{clip-path:inset(5% round 20%);background:linear-gradient(#ffffff,#eef0f5 70%,#d3d7e2)}
.gdie:not(.is-rolling) .gd-body:after{clip-path:inset(5% round 20%);background:linear-gradient(transparent 70%,#0000001a)}
.gdie.gd-land .gd-body{animation:gdLand .22s ease-out}
@keyframes gdLand{0%{opacity:.4}100%{opacity:1}}
/* ไฟลุก (เฉพาะเต๋าในฉากต่อสู้) */
.gdie .gd-fire{display:none}
.battle-dice .gdie .gd-fire{display:block;position:absolute;left:-34%;right:-34%;bottom:18%;height:140%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 92%,#fff6b0 0 14%,#ffc23a 30%,#ff6a1a 52%,#d8230a00 72%);
  clip-path:polygon(8% 100%,0 60%,12% 66%,10% 30%,26% 48%,30% 10%,44% 40%,52% 0,60% 38%,70% 12%,76% 46%,90% 26%,88% 62%,100% 56%,92% 100%);
  animation:gdFire .16s ease-in-out infinite alternate;transform-origin:50% 100%}
.battle-dice .gdie.is-rolling .gd-fire{opacity:.75}
@keyframes gdFire{to{transform:scaleY(1.12) scaleX(.94) skewX(3deg)}}
.move-roll-overlay .gdie{--die-size:76px}

/* ===== คัตซีน ===== */
#bfx-cutin{position:absolute;inset:0;z-index:85;overflow:hidden;pointer-events:none;background:#05060c}
#bfx-cutin.hidden{display:none}
.bfx-bg,.bfx-white,.bfx-black,.bfx-flash{position:absolute;inset:0}
.bfx-canvas{position:absolute;inset:0;width:100%;height:100%}
.bfx-art{position:absolute;background-repeat:no-repeat;filter:drop-shadow(0 0 2px #000) drop-shadow(0 10px 14px #000a)}
.bfx-name{position:absolute;left:0;right:0;bottom:40px;z-index:6;text-align:center;color:#fff6dc;text-shadow:0 3px 0 #000,0 0 18px var(--c);animation:bfxName .35s ease-out both}
.bfx-name small{display:block;font-size:14px;letter-spacing:4px;color:#ffe2a0}
.bfx-name b{font:700 50px 'Noto Serif Thai',serif}
@keyframes bfxName{from{opacity:0;transform:scale(1.4)}}
/* ไอคอนท่าในวงทอง (ไอคอนต้นฉบับ ~102px → แสดง 128px) */
.bfx-emblem{position:absolute;z-index:5;width:200px;height:200px;clip-path:inset(5% 0 0 0);background:url(assets/ui/tower/ring_gold.webp) center/100% 100% no-repeat;filter:drop-shadow(0 0 16px var(--c))}
.bfx-emblem-art{position:absolute;left:36px;top:36px;width:128px;height:128px;border-radius:50%;background-repeat:no-repeat;box-shadow:0 0 0 3px #1a0a10}
.bfx-emblem-side{right:120px;top:150px;animation:bfxIn .35s .1s cubic-bezier(.2,.9,.3,1.3) both}
.bfx-enemy .bfx-emblem-side{right:auto;left:120px}
.bfx-emblem-pop{left:540px;top:220px;animation:bfxIn .4s cubic-bezier(.2,.9,.3,1.3) both}
.bfx-emblem-rush{left:540px;top:220px;animation:bfxRush .55s cubic-bezier(.5,0,.9,.4) both}
@keyframes bfxIn{from{transform:scale(.2) rotate(-40deg);opacity:0}}
@keyframes bfxRush{from{transform:scale(.4)}to{transform:scale(1.7);opacity:.85}}
/* แบบ panels */
.bfx-panels .bfx-bg{background:radial-gradient(ellipse at 30% 50%,color-mix(in srgb,var(--c) 45%,#0a0e22),#05060c 75%)}
.bfx-enemy.bfx-panels .bfx-bg{background:radial-gradient(ellipse at 70% 50%,color-mix(in srgb,var(--c) 45%,#0a0e22),#05060c 75%)}
.bfx-panels .bfx-face{animation:bfxSlideL .32s cubic-bezier(.2,.9,.3,1.2) both}
.bfx-enemy .bfx-face{animation-name:bfxSlideR}
@keyframes bfxSlideL{from{transform:translateX(-420px);opacity:0}}
@keyframes bfxSlideR{from{transform:translateX(420px);opacity:0}}
.bfx-panel{position:absolute;top:-40px;bottom:-40px;left:calc(var(--i)*1280px/var(--n) - 70px);width:calc(1280px/var(--n) + 140px);overflow:hidden;z-index:3;
  clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,#140820),var(--c) 45%,color-mix(in srgb,var(--c) 60%,#fff));animation:bfxPanel .22s cubic-bezier(.2,.8,.3,1) both}
@keyframes bfxPanel{from{transform:translateX(1400px)}}
.bfx-speed{position:absolute;inset:-10% -60%;background:repeating-linear-gradient(0deg,transparent 0 9px,#ffffffd0 9px 11px,transparent 11px 19px,#ffffff70 19px 20px);animation:bfxSpeed .18s linear infinite}
@keyframes bfxSpeed{to{transform:translateX(-120px)}}
.bfx-shadow{filter:brightness(0) drop-shadow(3px 3px 0 #ffffffcc);opacity:.85}
.bfx-white{z-index:9;background:#fff;animation:bfxFade .22s ease-in both}
@keyframes bfxFade{from{opacity:0}}
/* แบบ radial */
.bfx-radial .bfx-bg{background:radial-gradient(circle at 50% 50%,#fff 0 20%,#eef6ff 60%,color-mix(in srgb,var(--c) 35%,#fff))}
.bfx-pulse{animation:bfxPulse .34s ease-in-out 3 alternate both}
@keyframes bfxPulse{to{transform:scale(1.05)}}
.bfx-out{animation:bfxOut .2s ease-in forwards}
@keyframes bfxOut{to{opacity:0}}
.bfx-black{z-index:8;background:#000;animation:bfxFade .08s both}
.bfx-black~.bfx-canvas{z-index:9}
.bfx-radial .bfx-name{color:#1a1030;text-shadow:0 2px 0 #fff,0 0 14px #fff}.bfx-radial .bfx-name small{color:#6a3a10}
/* แบบ zigzag */
.bfx-zigzag .bfx-bg{background:radial-gradient(circle at 30% 50%,#fff,var(--c) 30%,color-mix(in srgb,var(--c) 40%,#0a0420) 80%)}
.bfx-enemy.bfx-zigzag .bfx-bg{background:radial-gradient(circle at 70% 50%,#fff,var(--c) 30%,color-mix(in srgb,var(--c) 40%,#0a0420) 80%)}
.bfx-zigzag .bfx-face{animation:bfxZoomIn .3s ease-out both}
@keyframes bfxZoomIn{from{transform:scale(.8);opacity:0}}
.bfx-flash{z-index:8;background:radial-gradient(circle,color-mix(in srgb,var(--c) 60%,#fff),color-mix(in srgb,var(--c) 70%,#300010));animation:bfxFade .07s both}
.bfx-flash~.bfx-canvas{z-index:9}

/* ===== หน้าต่อสู้ ===== */
.bt{position:relative;height:720px;display:grid;grid-template-rows:96px 1fr 110px;gap:6px;padding:8px 14px 10px;
  background:radial-gradient(ellipse at 50% -20%,#7a102230,transparent 60%),linear-gradient(#120c1c,#07050b)}
.bt-top{display:grid;grid-template-columns:1fr 150px 1fr;gap:10px;align-items:center}
.bt .combat-status{padding:6px 16px 7px;border:14px solid transparent;border-width:10px 16px;border-image:url(assets/ui/tower/card.webp) 34 44 fill / 10px 16px stretch;background:none}
.bt .combat-status b{font-size:15px;color:#ffe9b0;text-shadow:0 1px 2px #000}
.bt .combat-status .badge{color:#ffd98a;border-color:#c9a35a88;background:#0008}
.bt .combat-status .meter{height:12px;border:1px solid #c9a35a77;background:#05040a;border-radius:2px}
.bt .combat-status .meter>i{background:linear-gradient(#ff9a6a,#e8553a 55%,#b8321e)}
.bt .combat-status .meter.mp{height:6px;margin-top:4px}.bt .combat-status .meter.mp>i{background:linear-gradient(#9ee6ff,#3e8fd8)}
.bt .hp-label{font:700 13px var(--font);color:#fff;min-width:96px;text-align:right;text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums}
/* ลูกศรกลาง */
.bt-arrows{display:flex;align-items:center;justify-content:center;gap:3px;height:40px}
.bt-arrows i{width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #ff7a5a;opacity:.25;animation:btArrow 1s linear infinite;filter:drop-shadow(0 0 4px #ff3a2a)}
.bt-arrows i:nth-child(2){animation-delay:.12s}.bt-arrows i:nth-child(3){animation-delay:.24s}.bt-arrows i:nth-child(4){animation-delay:.36s}.bt-arrows i:nth-child(5){animation-delay:.48s}
.bt-arrows.to-left{flex-direction:row-reverse}.bt-arrows.to-left i{border-width:9px 15px 9px 0;border-color:transparent #7ac8ff transparent transparent;filter:drop-shadow(0 0 4px #3a8aff)}
.bt-arrows.idle i{animation:none;opacity:.35}
@keyframes btArrow{0%,100%{opacity:.2}30%{opacity:1}}
/* แผงสองฝั่ง */
.bt .duel{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;min-height:0}
.bt .fighter-panel{position:relative;overflow:hidden;border-radius:0;border:16px solid transparent;border-image:url(assets/ui/tower/panel_wide.webp) 52 / 16px stretch;background-origin:border-box;isolation:isolate}
.bt .fighter-panel:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(transparent 62%,#0a0612a0)}
.bt .fighter-figure{position:absolute;z-index:2;background-repeat:no-repeat;filter:drop-shadow(0 6px 6px #000a);transition:filter .2s}
/* ภาพทั้งตัว ไม่เกิน 1.3 เท่าของต้นฉบับ วางชิดพื้นกลางแผง */
.bt .fighter-figure.portrait,.bt .fighter-figure.monster-art{width:410px!important;height:410px!important;aspect-ratio:auto!important;left:50%!important;top:auto!important;bottom:-46px!important;transform:translateX(-50%)!important;max-width:none!important}
.bt .fighter-panel.acting .fighter-figure{filter:drop-shadow(0 0 10px #ffd98a) drop-shadow(0 6px 6px #000a)}
.bt .panel-label{position:absolute;z-index:4;top:6px;left:8px;background:#0b0712d0;border:1px solid #c9a35a66;color:#ffe2a0;font-size:11px;letter-spacing:1px;padding:3px 8px}
.bt .status-tags{z-index:5;top:6px}
.bt .enemy-skill-strip{z-index:5;top:34px}
.bt .battle-statusline{z-index:5}
/* เต๋าเหนือหัวคนที่ลงมือ */
.bt .battle-dice{position:absolute;z-index:6;top:78px;left:50%;right:auto;transform:translateX(-50%);display:flex;gap:10px}
.bt .battle-dice .gdie{--die-size:62px}
/* บอลลูนชื่อท่า */
.bfx-bubble{position:absolute;z-index:7;left:30px;bottom:26px;max-width:84%;padding:8px 18px;background:#fffdf4;color:#1c1424;font:700 20px var(--font);border-radius:14px;border:3px solid #2a1a10;
  box-shadow:0 4px 0 #2a1a10,0 0 0 2px #e9c46a inset;animation:bfxBubble .2s cubic-bezier(.2,.9,.3,1.4) both;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bfx-bubble:after{content:'';position:absolute;top:-16px;left:28px;border:8px solid transparent;border-bottom:12px solid #2a1a10}
#enemy-panel .bfx-bubble{left:auto;right:30px}#enemy-panel .bfx-bubble:after{left:auto;right:28px}
@keyframes bfxBubble{from{transform:scale(.4);opacity:0}}
/* แตกพิกเซลตอนโดนตี */
.bfx-mosaic{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.fighter-figure.bfx-hidden-bg{background-image:none!important}
/* ตัวเลขดาเมจ */
.bt .damage-number{position:absolute;left:50%;top:40%;font:900 72px 'Noto Sans Thai',Arial,sans-serif;color:#fff;-webkit-text-stroke:3px #3a0a08;paint-order:stroke fill;
  text-shadow:0 5px 0 #3a0a08,0 0 22px #ff6a2a;animation:btDmg 1.3s cubic-bezier(.2,.8,.3,1) forwards;z-index:8}
.bt .damage-number.heal{color:#b8ffcf;-webkit-text-stroke-color:#0d3a24;text-shadow:0 5px 0 #0d3a24,0 0 20px #3aff8a}
.bt .damage-number small{font-size:14px;letter-spacing:2px;color:#ffe08a;-webkit-text-stroke:0;text-shadow:0 2px 2px #000}
@keyframes btDmg{0%{opacity:0;transform:translate(-50%,10%) scale(.3)}18%{opacity:1;transform:translate(-50%,-60%) scale(1.25)}32%{transform:translate(-50%,-45%) scale(1)}78%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-110%)}}
.bt .impact-star{position:absolute;left:50%;top:40%;z-index:7;width:150px;height:150px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,#fff 0 18%,#ffe36a 30%,transparent 62%);clip-path:polygon(50% 0,60% 35%,98% 20%,68% 50%,100% 78%,60% 64%,50% 100%,40% 64%,2% 80%,32% 50%,0 18%,40% 35%);animation:btStar .4s ease-out forwards}
@keyframes btStar{from{transform:translate(-50%,-50%) scale(.3) rotate(-20deg)}to{transform:translate(-50%,-50%) scale(1.3) rotate(10deg);opacity:0}}
/* ล่าง: กล่องข้อความแบบในคลิป */
.bt-bottom{display:flex;align-items:stretch;gap:10px}
.bt .battle-message{flex:1;max-width:none;display:flex;flex-direction:column;justify-content:center;padding:4px 22px;color:#2a1a08;font:600 16px/1.6 var(--font);
  border:12px solid transparent;border-width:12px 30px;border-image:url(assets/ui/tower/parch.webp) 30 60 fill / 12px 30px stretch}
.bt .battle-message .gold{color:#8a4a08;font-size:13px}
/* เมนูต่อสู้กลางจอ (แบบเมนู たたかう/にげる ในคลิป) */
.bt-commands{position:absolute;z-index:12;left:50%;top:150px;transform:translateX(-50%);width:236px;display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px;
  border:22px solid transparent;border-image:url(assets/ui/tower/panel.webp) 52 fill / 22px stretch}
html body .bt .bt-commands button:not(.ghost):not(.icon-button):not(.combat-skill-use):not(.combat-item-choice):not(.nav-item):not(.encounter-card),
html body .bt button.dice-button:not(.ghost){height:46px;min-height:0;padding:0 6px!important;font:700 16px var(--font);color:#fff!important;text-shadow:0 2px 2px #000;background:none!important;
  border:12px solid transparent!important;border-width:12px 16px!important;border-image:url(assets/ui/tower/btn_plain.webp) 40 50 fill / 12px 16px stretch!important;border-radius:0!important;text-align:left}
html body .bt .bt-commands button:not(.ghost):not(.icon-button):not(.combat-skill-use):not(.combat-item-choice):not(.nav-item):not(.encounter-card):hover:not(:disabled),
html body .bt button.dice-button:not(.ghost):hover{border-image-source:url(assets/ui/tower/btn_hover_plain.webp)!important;filter:brightness(1.15)}
.bt .dice-button{position:absolute;z-index:12;left:50%;top:300px;transform:none!important;margin:0 0 0 -118px!important;width:236px;height:56px!important;font-size:20px!important;text-align:center!important;animation:btPulse 1s ease-in-out infinite}
@keyframes btPulse{50%{filter:brightness(1.35) drop-shadow(0 0 8px #ffcf6a)}}

/* ===== ก่อนสู้: เทียบค่าพลัง ===== */
.bt-intro{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#07050bcc;animation:fadein .25s}
.bt-intro-box{position:relative;width:940px;padding:12px 18px 18px;border:26px solid transparent;border-image:url(assets/ui/tower/panel.webp) 52 fill / 26px stretch;isolation:isolate}
.bt-intro-box.boss{border-image-source:url(assets/ui/tower/panel_sky_dark.webp)}
.bt-intro-title{display:flex;align-items:center;justify-content:center;height:46px;margin:-6px auto 12px;width:420px;color:#ffd9a0;font:700 19px 'Noto Serif Thai',serif;letter-spacing:1px;
  text-shadow:0 2px 0 #1a0408,0 0 8px #ff2a3a88;background:url(assets/ui/tower/title_plain.webp) center/100% 100% no-repeat}
.bt-vs{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;gap:8px}
.bt-vs-mid{text-align:center;font:900 34px 'Noto Serif Thai',serif;color:#ffcf6a;text-shadow:0 0 14px #ff3a2a,0 2px 0 #000}
.bt-card{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:center;padding:8px 12px;border:14px solid transparent;border-width:12px 18px;border-image:url(assets/ui/tower/card.webp) 34 44 fill / 12px 18px stretch}
.bt-card.foe{border-image-source:url(assets/ui/tower/boss.webp);border-width:18px 24px 12px;border-image-slice:70 110 40 110 fill;min-width:0}.bt-card{min-width:0}.bt-card h3{overflow:hidden;text-overflow:ellipsis}
.bt-card .bt-face{position:relative;overflow:hidden;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3a2a5a,#0b0712);box-shadow:0 0 0 3px #c9a35a,0 0 0 5px #1a0a10}
.bt-face i{position:absolute;display:block;background-repeat:no-repeat}
.bt-face i.portrait{width:340px;height:340px;left:-115px;top:-14px;aspect-ratio:auto}
.bt-face.mob i{left:4px;top:4px;width:102px;height:102px;aspect-ratio:auto}
.bt-card h3{margin:0 0 4px;color:#ffe9b0;font-size:16px;display:flex;align-items:center;gap:8px;white-space:nowrap}.bt-card h3 small{flex:none}
.bt-order{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;font:800 13px var(--font);color:#fff;background:#c0392b;box-shadow:0 0 0 2px #ffd98a}
.bt-order.second{background:#5a3aa8}
.bt-stats{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:2px 10px;font-size:13px;white-space:nowrap}
.bt-stats span{color:#c9b88f}.bt-stats b{color:#fff;font-variant-numeric:tabular-nums}
.bt-reward{margin-top:5px;font-size:12px;color:#ffd98a}
.bt-intro-go{display:flex;justify-content:center;gap:14px;margin-top:14px}
.bt-intro-go button{width:210px}
.bt-intro .bfx-bolt{z-index:3}
.bfx-bolt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.bfx-bolt-hit{filter:brightness(1.18)}

/* ลูกเต๋า WebGL (dice-gl.js): canvas กว้าง 1.9 / สูง 2.2 เท่าของลูก กึ่งกลางลูกที่ 30% จากล่าง */
html body .gdie canvas.gd-cv{position:absolute;z-index:0;inset:auto;top:auto;right:auto;width:190%;height:220%;left:-45%;bottom:-16%;image-rendering:auto;pointer-events:none;background:none}
.gdie .gd-body{z-index:1}
.gdie.gl .gd-fire{display:none!important}
.gdie.gl.is-rolling .gd-body:before,.gdie.gl.is-rolling .gd-body:after,.gdie.gl.gd-landing .gd-body:before,.gdie.gl.gd-landing .gd-body:after{display:none}
.gdie.gl.is-rolling .gd-body{animation:none;filter:none}
.numeric-die.gdie.gl.is-rolling .die-result{color:#1c1724;text-shadow:0 0 2px #fff,0 0 4px #fff}
.gdie.gl.gd-landing .die-result{opacity:0!important}
/* โดนตี: กรอบแผงต้องอยู่นิ่ง (พี่: "กดหยุดเต๋าแล้ว UI เคลื่อนไปมา") → สั่นเฉพาะตัวละครด้วย translate */
html body .bt .fighter-panel.hit{animation:none!important;transform:none!important;translate:none!important}
html body .bt .fighter-panel.hit .fighter-figure{animation:btShake .42s ease-out,victim-flash .5s steps(1)!important}
@keyframes btShake{0%,100%{translate:0 0}20%{translate:-10px 0}40%{translate:9px 0}60%{translate:-6px 0}80%{translate:4px 0}}
/* ลูกเต๋า 3 มิติ (dice-gl รอบ 2): แสดงด้วยการ์ดจอทั้งตอนทอยและหยุด · ซ่อนกล่อง/ตัวเลข CSS */
.gdie.gl .gd-body{display:none!important}
.numeric-die.gdie.gl{animation:none!important}
/* รอบ 3: ไฟ CSS เก่า (.result-fire รูปหลายเหลี่ยม) ซ้อนหลังลูกเต๋า GPU → ปิด */
.gdie.gl.result-fire:before,.gdie.gl.result-fire:after,.gdie.gl:before,.gdie.gl:after{display:none!important}