/* tower-ui.css — หน้าต่างหอคอยร้อยชั้น แบบเกมหอคอย (ฟลอเรีย tower-preview) · ตั๊บ 2026-11-09
   ซ้าย: หอคอยดำซ้อนชั้น (หลังคา · 10 ชั้น · ประตู) · กลาง: มอน/พร/ดรอป · ขวา: รางวัล/ปุ่ม · ภาพชิ้น UI ของพี่ใน assets/ui/tower
   ใช้ #stage #modal นำหน้า เพราะ tower-theme.css ใส่กรอบให้ทุกปุ่มด้วย !important */
#stage #modal .tw2{display:grid;grid-template-columns:214px 1fr 300px;gap:8px;height:556px;font-size:13px;color:#e2d8c4}
#stage #modal .tw2>div{min-height:0;min-width:0}
/* ---- ซ้าย: หอคอย ---- */
#stage #modal .tw2-tw{position:relative;display:flex;flex-direction:column;align-items:center;padding:2px 0;border:16px solid transparent;border-image:url(assets/ui/tower/panel_sky_dark.webp) 52 fill / 16px stretch}
#stage #modal .tw2-roof{width:66px;flex:none;margin-bottom:-5px;position:relative;z-index:1;filter:drop-shadow(0 3px 4px #000a)}
#stage #modal .tw2-gate{width:100%;flex:none;margin-top:-3px;position:relative;z-index:1}
#stage #modal .tw2-floors{display:flex;flex-direction:column;width:100%;padding:0 6px}
#stage #modal .tw2 button.tw2-lv{position:relative;flex:none;width:100%;height:38px;min-height:0!important;margin:-1px 0;padding:0 18px 0 4px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:none!important;border:solid transparent!important;border-width:8px 13px!important;border-radius:0!important;border-image:url(assets/ui/tower/lv.webp) 58 90 fill / 8px 13px stretch!important;
  color:#fff!important;font-size:12px!important;text-shadow:0 1px 2px #000,0 0 4px #000;white-space:nowrap;cursor:pointer;filter:brightness(.9) saturate(.9)}
#stage #modal .tw2 button.tw2-lv.now{border-image-source:url(assets/ui/tower/lv_now.webp)!important;filter:none}
#stage #modal .tw2 button.tw2-lv.lock{border-image-source:url(assets/ui/tower/lv_lock.webp)!important;color:#b9bcc6!important}
#stage #modal .tw2 button.tw2-lv.sel{border-image-source:url(assets/ui/tower/lv_sel.webp)!important;filter:drop-shadow(0 0 6px #ffb84a99);z-index:2}
#stage #modal .tw2 button.tw2-lv:hover{filter:brightness(1.18)}
#stage #modal .tw2-lv b{font-size:12px;line-height:13px;color:#ffe9b0}
#stage #modal .tw2-lv small{font-size:10px;line-height:11px;opacity:.95}
#stage #modal .tw2-lv.bf small{color:#ffb0a0}
#stage #modal .tw2-badge{position:absolute;right:-9px;top:50%;width:20px;height:20px;transform:translateY(-50%);filter:drop-shadow(0 1px 2px #000)}
#stage #modal .tw2-lv.now .tw2-badge{animation:tw2Pin 1.2s ease-in-out infinite}@keyframes tw2Pin{50%{transform:translateY(-68%)}}
#stage #modal .tw2 button.tw2-pg{position:absolute;z-index:3;width:38px;height:28px;min-height:0!important;min-width:0!important;padding:0!important;border:1px solid #c9a35a!important;border-radius:14px!important;border-image:none!important;
  background:#120c1ae6!important;color:#ffd98a!important;font-size:11px!important;font-weight:700;box-shadow:0 2px 6px #000a}
#stage #modal .tw2 button.tw2-pg:hover:not(:disabled){background:#2a1830!important;box-shadow:0 0 8px #ff2a3a88}
#stage #modal .tw2 button.tw2-pg:disabled{opacity:.35;cursor:default}
#stage #modal .tw2-pg:nth-of-type(1){left:2px;top:4px}#stage #modal .tw2-pg:nth-of-type(2){right:2px;top:4px}
#stage #modal .tw2-pg:nth-of-type(3){right:2px;bottom:4px}#stage #modal .tw2-pg:nth-of-type(4){left:2px;bottom:4px}
/* ---- กลาง/ขวา: แผงกรมท่าขอบทอง ---- */
#stage #modal .tw2-mid,#stage #modal .tw2-side{display:flex;flex-direction:column;gap:5px;padding:0 2px;border:20px solid transparent;border-image:url(assets/ui/tower/panel.webp) 52 fill / 20px stretch}
#stage #modal .tw2-title{display:flex;align-items:center;gap:8px;margin:-4px 0 0;font-size:18px;color:#ffe9b0;text-shadow:0 2px 0 #1a0408,0 0 8px #ff2a3a66}
#stage #modal .tw2-title .k{font-style:normal;font-size:12px;padding:1px 8px;border-radius:10px;border:1px solid #c9a35a77;color:#d8ccb4;background:#0007}
#stage #modal .tw2-title .k.mini{color:#ffc08a;border-color:#ff9a4a88}#stage #modal .tw2-title .k.boss{color:#ff8a8a;border-color:#ff3a3a;box-shadow:0 0 8px #ff2a3a55}
#stage #modal .tw2-title small{margin-left:auto;font-size:12px;color:#c9b88f}#stage #modal .tw2-title small.done{color:#7dff8a}#stage #modal .tw2-title small.now{color:#ffd98a}
#stage #modal .tw2-sub{text-align:center;padding:0 10px;font-weight:700;color:#2a1a08;font-size:12px;line-height:17px;flex:none;border:solid transparent;border-width:4px 20px;border-image:url(assets/ui/tower/parch.webp) 30 60 fill / 4px 20px stretch}
/* มอน */
#stage #modal .tw2-mons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#stage #modal .tw2-mon,#stage #modal .tw2-boss{position:relative;display:flex;flex-direction:column;align-items:center;padding:4px 2px 5px;border-radius:6px;background:radial-gradient(ellipse at 50% 85%,#3a1a2a,#0b0712cc 70%);border:1px solid #c9a35a44;cursor:help;outline:none}
#stage #modal .tw2-mon:hover,#stage #modal .tw2-mon:focus,#stage #modal .tw2-boss:hover{border-color:#ffd98a}
#stage #modal .tw2-mon.boss{border-color:#ff6a4a77}
#stage #modal .tw2-art{position:relative;display:block;width:100%;height:140px;overflow:hidden}
#stage #modal .tw2-art .monster-art{position:absolute!important;inset:auto!important;left:50%!important;top:0!important;width:140px!important;height:140px!important;aspect-ratio:auto!important;max-width:none!important;transform:none!important;margin:0 0 0 -70px!important;background-repeat:no-repeat}
/* ภาพหันซ้าย (scale:-1 1) กลับด้านรอบกึ่งกลางตัวเอง จึงจัดกลางด้วย margin แทน transform */
#stage #modal .tw2-boss .tw2-art .monster-art{width:196px!important;height:196px!important;margin-left:-98px!important}
#stage #modal .tw2-mon>b,#stage #modal .tw2-mon>small{position:relative;z-index:1}
#stage #modal .tw2-mon b{font-size:12px;color:#ffe9b0;text-align:center;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#stage #modal .tw2-mon small,#stage #modal .tw2-boss small{font-size:11px;color:#c9b88f}
#stage #modal .tw2-boss{flex-direction:row;gap:12px;padding:4px 14px;background:radial-gradient(ellipse at 22% 80%,#5a1424,#0b0712cc 65%);border-color:#ff3a3a77}
#stage #modal .tw2-boss .tw2-art{width:210px;height:196px;flex:none}
#stage #modal .tw2-boss>div{display:flex;flex-direction:column;gap:2px}
#stage #modal .tw2-boss b{font-size:18px;color:#ffd98a;text-shadow:0 0 8px #ff2a3a88}
#stage #modal .tw2-boss p{margin:4px 0 0;font-size:12px;color:#d8ccb4;line-height:1.45}
#stage #modal .tw2-mon .bd-tip,#stage #modal .tw2-boss .bd-tip{bottom:auto;top:calc(100% + 6px)}
#stage #modal .tw2-mon:hover .bd-tip,#stage #modal .tw2-mon:focus .bd-tip,#stage #modal .tw2-boss:hover .bd-tip,#stage #modal .tw2-boss:focus .bd-tip{display:block!important}
#stage #modal .tw2-stats{display:flex;flex-wrap:wrap;gap:4px}
#stage #modal .tw2-stats span{padding:1px 8px;border-radius:4px;background:#0b0712cc;border:1px solid #c9a35a44;font-size:12px;color:#c9b88f}
#stage #modal .tw2-stats b{color:#fff}#stage #modal .tw2-stats .tm{color:#9fe8ff}
#stage #modal .tw2-affix small{display:block;font-size:12px;color:#c9b88f;margin-bottom:3px}#stage #modal .tw2-affix small b{color:#ff8a8a}
#stage #modal .tw2-affix>div{display:flex;flex-wrap:wrap;gap:4px}
#stage #modal .tw2-affix span{padding:1px 8px;border-radius:4px;background:#2a0c14cc;border:1px solid #ff5a5a66;color:#ffd0c0;font-size:12px}
#stage #modal .tw2-affix em{font-style:normal;color:#ffb08a;margin-left:5px;font-size:11px}
#stage #modal .tw2-drops{display:flex;flex-wrap:wrap;gap:4px}
#stage #modal .tw2-drops .bd-it{width:40px;height:40px}
/* ---- ขวา ---- */
#stage #modal .tw2-gain{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#stage #modal .tw2-gain span{display:flex;align-items:center;min-height:22px;padding:0 4px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;font-size:12px;
  border:solid transparent;border-width:6px 10px 6px 34px;border-image:url(assets/ui/tower/pill_star.webp) 30 30 30 110 fill / 6px 10px 6px 34px stretch}
#stage #modal .tw2-gain span.coin{border-image-source:url(assets/ui/tower/pill_coin.webp)}
#stage #modal .tw2-first{display:flex;flex-direction:column;gap:4px}
#stage #modal .tw2-rw{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:6px;background:#0b0712cc;border:1px solid #c9a35a55}
#stage #modal .tw2-rw.got{opacity:.6;filter:grayscale(.5)}
#stage #modal .tw2-ri{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:#1a1024;border:1px solid #c9a35a77}
#stage #modal .tw2-ri .vc-glyph{font-size:17px;-webkit-text-stroke:1px #3a1a06}
#stage #modal .tw2-rw b{display:block;font-size:12.5px;color:#ffe9b0}#stage #modal .tw2-rw small{display:block;font-size:11px;color:#c9b88f}
#stage #modal .tw2-rw.got small{color:#7dff8a}
#stage #modal .tw2-none{margin:0;text-align:center;font-size:12px;color:#c9b88f;line-height:1.5}
#stage #modal .tw2-sum{display:flex;flex-direction:column;gap:1px;font-size:12px;color:#c9b88f}#stage #modal .tw2-sum b{color:#ffd98a}
#stage #modal .tw2-rules{font-size:11px;line-height:1.5;color:#2a1a08;padding:2px 6px;border:solid transparent;border-width:6px 18px;border-image:url(assets/ui/tower/parch.webp) 30 60 fill / 6px 18px stretch}
#stage #modal .tw2-go{margin-top:auto;display:flex}
#stage #modal .tw2-go button{flex:1;font-size:15px!important;min-height:44px}
#stage #modal .tw2-btns{display:flex;gap:4px}
#stage #modal .tw2-btns button{flex:1;min-width:0!important;padding:2px 2px!important;font-size:11.5px!important;white-space:nowrap}
#stage #modal .tw2-note{margin:0;font-size:10.5px;color:#9a8c70;text-align:center;line-height:1.35}