/* tower-theme.css — ธีม UI จากเกมหอคอย (ฟลอเรีย) : แผงกรมท่าขอบทองโกธิก หัวหน้าต่างหอคอย ปุ่มฟ้าเทอร์ควอยซ์ กระดาษหัวข้อ · ตั๊บ 2026-11-08
   ภาพชิ้น UI ยกมาจาก D:\Tower-Card-RPG\assets\img\ui\tower → assets/ui/tower (ภาพของพี่เอง)
   โหลดหลัง css เดิมทั้งหมด จึงทับ painted.css (ปุ่มแดง/กรอบภาพวาด) */
:root{--ink:#07050b;--gold:#ffd98a;--white:#e9e3d4;--muted:#c9b88f;--line:#c9a35a33;--font:'Noto Sans Thai',Tahoma,sans-serif}
body{background:#07050b;color:#e9e3d4}
/* ---- หน้าต่าง (modal) ---- */
html body .modal-box{position:relative;isolation:isolate;background:none!important;border:26px solid transparent!important;border-radius:0!important;border-image:url(assets/ui/tower/panel.webp) 52 fill / 26px stretch!important;
  box-shadow:0 18px 60px #000c,0 0 40px #ff1a2a1a;padding:0}
html body .modal-head{background:none!important;border:0;padding:0 46px 6px;justify-content:center;position:relative}
html body .modal-head h2{display:flex;align-items:center;justify-content:center;min-width:min(340px,80%);height:46px;margin-top:-14px;padding:0 34px 0 70px;
  background:url(assets/ui/tower/title_plain.webp) center/100% 100% no-repeat;font-size:18px;color:#ffd9a0;letter-spacing:.5px;text-shadow:0 2px 0 #1a0408,0 0 8px #ff2a3a88;white-space:nowrap}
html body .modal-head button.ghost,html body .modal-head button{position:absolute;right:-6px;top:-12px;width:38px;height:38px;min-height:0;padding:0!important;border:0!important;border-radius:50%;
  background:url(assets/ui/tower/x1.webp) center/100% 100% no-repeat!important;color:transparent!important;font-size:0!important;text-shadow:none!important}
html body .modal-head button.ghost:hover,html body .modal-head button:hover{filter:brightness(1.2) drop-shadow(0 0 6px #ff3a3a)}
html body .modal-body{background:none!important;padding:8px 10px 6px}
#modal{background:#05030acc!important}
/* ---- ปุ่ม ---- */
html body button:not(.ghost):not(.icon-button):not(.combat-skill-use):not(.combat-item-choice):not(.nav-item):not(.encounter-card){
  background:none!important;border:12px solid transparent!important;border-width:10px 14px!important;border-radius:0!important;border-image:url(assets/ui/tower/card.webp) 34 44 fill / 10px 14px stretch!important;
  color:#ffe9b0!important;text-shadow:0 1px 2px #000;padding:3px 10px!important}
html body button:not(.ghost):not(.icon-button):not(.combat-skill-use):not(.combat-item-choice):not(.nav-item):not(.encounter-card):hover:not(:disabled){border-image-source:url(assets/ui/tower/card_hover.webp)!important;filter:brightness(1.1)}
html body button.primary:not(.ghost):not(.icon-button):not(.combat-skill-use):not(.combat-item-choice):not(.nav-item):not(.encounter-card){border-width:12px 16px!important;border-image:url(assets/ui/tower/btn_plain.webp) 40 50 fill / 12px 16px stretch!important;color:#fff!important;font-weight:700;padding:4px 12px!important;text-shadow:0 2px 2px #000}
html body button.primary:not(.ghost):not(.icon-button):not(.combat-skill-use):not(.combat-item-choice):not(.nav-item):not(.encounter-card):hover:not(:disabled){border-image-source:url(assets/ui/tower/btn_hover_plain.webp)!important}
html body button.primary:not(.ghost):not(.icon-button):not(.combat-skill-use):not(.combat-item-choice):not(.nav-item):not(.encounter-card):disabled{border-image-source:url(assets/ui/tower/btn_off_plain.webp)!important}
/* พี่ 2026-11-09: "ทำไมมันเป็นหอคอยเต็มไปหมด ปุ่มสร้างไม่ควรมี" → ปุ่ม/หัวหน้าต่างทั่วไปไม่มีหอคอย (ภาพ *_plain = ครึ่งขวากลับด้าน) · หอคอยเหลือแค่หน้าต่างหอคอย */
html body .modal-head h2{padding:0 34px!important}
html body .tower-box .modal-head h2{background-image:url(assets/ui/tower/title.webp)!important;padding:0 34px 0 70px!important}
html body button.ghost{background:#0b0712c0!important;border:1px solid #c9a35a77!important;border-radius:4px!important;color:#ffe9b0}
html body button.ghost:hover{border-color:#ffd98a!important;background:#1a1024!important}
html body button.small{font-size:12px}
/* ---- การ์ด/กล่อง ---- */
html body .card{background:none!important;border:14px solid transparent!important;border-width:12px 16px!important;border-radius:0!important;border-image:url(assets/ui/tower/card.webp) 34 44 fill / 12px 16px stretch!important;padding:6px 8px}
html body .card h3{color:#ffe9b0;text-shadow:0 1px 2px #000}
html body .notice{background:none;border:8px solid transparent;border-width:8px 26px;border-image:url(assets/ui/tower/parch.webp) 30 60 fill / 8px 26px stretch;color:#2a1a08;border-radius:0}
html body .eyebrow{color:#ffcf6a}
html body .badge{border-color:#c9a35a88;color:#ffd98a;background:#0007}
html body .pill{border-color:#c9a35a66;background:#0b0712b0}
html body .line{background:linear-gradient(90deg,transparent,#c9a35a88,transparent)}
html body .meter{border-color:#c9a35a55;background:#05040a}
html body .meter>i{background:linear-gradient(#ff9a6a,#e8553a 55%,#b8321e)}
html body .meter.mp>i{background:linear-gradient(#9ee6ff,#3e8fd8)}
/* ---- หน้าแผนที่ ---- */
html body .topbar,html body .bottom-bar{background:linear-gradient(#150e20,#0a0610)!important;border:0!important;box-shadow:inset 0 -2px 0 #c9a35a55,inset 0 2px 0 #c9a35a55}
html body .avatar-frame{border:2px solid #c9a35a;border-radius:50%;box-shadow:0 0 0 2px #1a0a10,0 0 10px #ff2a3a33;background:radial-gradient(circle at 50% 35%,#3a2a5a,#0b0712)}
html body .avatar-frame .portrait{transform:scale(2.6);transform-origin:50% 14%}
html body .place-strip h3{color:#ffd9a0;text-shadow:0 2px 0 #1a0408,0 0 8px #ff2a3a66}
html body .world-tag,html body .side-journal,html body .world-help,html body .path-choice,html body #toast{background:none!important;border:12px solid transparent!important;border-width:10px 14px!important;border-radius:0!important;
  border-image:url(assets/ui/tower/card.webp) 34 44 fill / 10px 14px stretch!important}
html body .side-journal{padding:4px 6px}
html body .side-journal h4{color:#ffd98a}
html body .event-log p{background:#0b0712d0;border-left:2px solid #c9a35a}
html body .nav-item{background:none!important;border:0!important;color:#ffe9b0}
html body .nav-item span{display:grid;place-items:center;width:42px;height:42px;font-size:20px;color:#ffd98a;background:url(assets/ui/tower/ring_gold.webp) center/100% 100% no-repeat;clip-path:inset(5% 0 0 0)}
html body .nav-item:hover span{filter:brightness(1.25) drop-shadow(0 0 6px #ffcf6a)}
/* ---- หน้าต่างหอคอย: พื้นปราสาทยามค่ำ + ฟ้าผ่าแดง (แบบเมนูหอคอยของเกมหอคอย) ---- */
html body .modal-box.tower-box{border-image-source:url(assets/ui/tower/panel_sky_dark.webp)!important}
.tower-box>.bfx-bolt{z-index:0}
.tower-box>.modal-head,.tower-box>.modal-body{position:relative;z-index:1}
.tower-box .tower-floor{color:#ffd98a;text-shadow:0 0 18px #ff2a3a,0 3px 0 #1a0408}
/* ---- เมนูสกิล/ไอเทมในการต่อสู้ ---- */
html body .combat-skill-use,html body .combat-item-choice{background:none!important;border:12px solid transparent!important;border-width:10px 14px!important;border-radius:0!important;border-image:url(assets/ui/tower/card.webp) 34 44 fill / 10px 14px stretch!important;color:#ffe9b0}
html body .combat-skill-use:hover:not(:disabled),html body .combat-item-choice:hover:not(:disabled){border-image-source:url(assets/ui/tower/card_hover.webp)!important}
/* ---- หน้าแรก ---- */
.title-screen .sigil{border-color:#ffd98a;box-shadow:0 0 14px #ff2a3a55}
.title-copy h1 em{color:#ffd98a;text-shadow:0 0 18px #ff6a3a66}

/* ฉากเทพธิดา: ข้อความต้องอยู่ในกรอบลายทอง ไม่ทับลายมุม (พี่ 2026-11-08) */
html body .goddess-dialogue{width:600px;padding:58px 66px 48px;box-sizing:border-box}
html body .goddess-dialogue .eyebrow{display:block;margin-bottom:4px}
html body .goddess-scene{min-height:470px}

/* ---- หน้าต่างพอดีกรอบ ไม่มีแถบเลื่อน (พี่ 2026-11-08) · ยาวเกิน = แบ่งหน้า (stage.js FitModal) ---- */
html body .modal-box{width:1000px;max-height:680px}
html body .modal-body{overflow:hidden}
.fit-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 2px}
.fit-pager b{min-width:60px;text-align:center;color:#ffd98a;font-size:14px}
html body .fit-pager button.ghost{width:44px;height:32px;padding:0!important;font-size:14px}
/* การ์ดสกิลแบบกะทัดรัด: ไอคอน | ชื่อ+คำอธิบาย 2 บรรทัด (ชี้ดูเต็ม) | ปุ่ม */
html body .modal-body .cards:has(.sk-compact){grid-template-columns:repeat(2,1fr);gap:6px}
html body .sk-compact{display:grid;grid-template-columns:56px 1fr;gap:2px 10px;align-items:start;padding:2px 6px!important}
html body .sk-compact .skill-art{width:56px;height:56px;margin:0}
html body .sk-compact h3{font-size:14px;margin:0 0 1px;display:flex;gap:6px;align-items:center}
html body .sk-compact p{font-size:11.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#d2c6d6}
html body .sk-compact .skill-meta{font-size:10px;margin:1px 0}
html body .sk-compact .row{margin-top:2px;gap:6px}
/* บันทึกโลก 5 คอลัมน์ */
html body .journal-grid{grid-template-columns:repeat(5,1fr);gap:6px}
html body .journal-grid .card p{font-size:11px;line-height:1.55}
html body .journal-grid .card h3{font-size:14px}
/* แถวไอเทม/ร้าน/จารึก 2 คอลัมน์ */
html body .rows-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
html body .rows-grid .inventory-row{grid-template-columns:44px 1fr auto auto;padding:6px 2px;gap:8px}
html body .rows-grid .inventory-row .item-art{width:40px;height:40px}
html body .rows-grid .inventory-row p{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* ค่าพลัง 2 คอลัมน์ */
html body .stats-table{grid-template-columns:1fr 1fr;gap:4px 14px}
html body .stat-row{padding:6px 8px}/* การ์ดสกิล: ปุ่มไปอยู่ขวา การ์ดเตี้ยลง */
html body .sk-compact .sk-main{display:grid;grid-template-columns:1fr auto;column-gap:8px}
html body .sk-compact .sk-main>h3,html body .sk-compact .sk-main>p,html body .sk-compact .sk-main>.skill-meta{grid-column:1}
html body .sk-compact .sk-main>.row{grid-column:2;grid-row:1/4;flex-direction:column;align-self:center;margin:0;gap:4px}
html body .sk-compact .sk-main>.row:empty{display:none}
/* เส้นทางอาชีพ 2 คอลัมน์ */
.rw-cols{display:grid;grid-template-columns:380px 1fr;gap:16px;align-items:start}
html body .rw-left .cards{grid-template-columns:1fr;gap:6px}
html body .modal-body .cards.rw-skills{grid-template-columns:1fr;gap:6px}
.rw-left .class-reward{grid-template-columns:90px 1fr}.rw-left .class-reward .portrait{width:90px;height:90px}
.rw-left h3{font-size:15px}
/* ---- หน้าต่างค่าพลังแบบเกม MMO (stats ใน app.js) ---- */
.st-win{display:grid;grid-template-columns:190px 1fr 250px;gap:12px;align-items:start}
.st-left{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.st-face{position:relative;overflow:hidden;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3a2a5a,#0b0712);box-shadow:0 0 0 3px #c9a35a,0 0 0 6px #1a0a10,0 0 18px #ff2a3a33}
.st-face i{position:absolute;width:370px;height:370px;left:-120px;top:-16px;background-repeat:no-repeat;aspect-ratio:auto}
.st-left h3{margin:6px 0 0;color:#ffe9b0;font-size:18px}.st-left p{margin:0;font-size:13px}
.st-exp{width:100%;margin-top:4px}.st-exp small{font-size:11px}
.st-pts{width:100%;display:flex;align-items:center;justify-content:space-between;margin:6px 0;padding:6px 14px;border:10px solid transparent;border-width:8px 16px;border-image:url(assets/ui/tower/card.webp) 34 44 fill / 8px 16px stretch}
.st-pts b{font-size:26px;color:#ffd98a;text-shadow:0 0 10px #ff9a3a88}
.st-head{display:flex;align-items:baseline;justify-content:space-between;padding:2px 14px;margin-bottom:6px;color:#2a1a08;font-weight:700;border:8px solid transparent;border-width:5px 22px;border-image:url(assets/ui/tower/parch.webp) 30 60 fill / 5px 22px stretch}
.st-head small{font-weight:400;color:#5a3a18;font-size:11px}
.st-row{display:grid;grid-template-columns:40px minmax(0,1fr) 54px 54px 86px 74px;align-items:center;gap:6px;padding:4px 8px;margin-bottom:3px;border-radius:4px;background:#0b071299;border:1px solid #c9a35a33}
.st-row.pending{border-color:#7dff8a88;background:#0e1a12cc}
.st-ab{font:800 14px var(--font);color:#ffd98a;letter-spacing:1px}
.st-nm{font-size:14px;color:#ffe9b0;line-height:1.3;white-space:nowrap}.st-nm small{display:block;font-size:10.5px;color:#c9b88f;white-space:nowrap}
.st-gr{font-weight:800;font-size:14px;white-space:nowrap}
.st-val{font:700 15px var(--font);color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.st-add{font:700 13px var(--font);color:#7dff8a;white-space:nowrap;font-variant-numeric:tabular-nums}
.st-btns{display:flex;gap:4px;justify-content:flex-end}
html body .st-btns button.ghost{width:34px;height:30px;padding:0!important;font:800 18px/1 var(--font)}
html body .st-btns .st-plus:not(:disabled){color:#7dff8a;border-color:#7dff8a88!important}
.st-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.st-actions button{min-width:150px}
.st-d{display:grid;grid-template-columns:minmax(0,1fr) auto 58px;gap:6px;align-items:center;padding:6px 8px;margin-bottom:3px;border-radius:4px;background:#0b071299;border:1px solid #c9a35a33;font-size:13.5px}
.st-d span{color:#c9b88f}.st-now{color:#fff;font-variant-numeric:tabular-nums}.st-new{color:#7dff8a;font-variant-numeric:tabular-nums;min-width:0}
.st-d.up{border-color:#7dff8a66}
.st-row.st-flash{animation:stFlash .6s ease-out}
@keyframes stFlash{0%{background:#3a6a2acc;border-color:#9dff9a}100%{}}
/* ประวัติอาชีพผู้กล้า (hero-classes.js) · ตั๊บ 2026-11-09 */
.class-bio{margin:6px 0;font-size:13.5px;line-height:1.55;color:#e9e3d4;opacity:.92}

/* หน้าตัวละคร: รูปอาชีพทรงสี่เหลี่ยมใหญ่ขึ้น (พี่ 2026-11-09 "ภาพที่ 2 มีที่ว่าง ปรับรูปอาชีพใหญ่ขึ้นเป็นทรงสี่เหลี่ยม") */
.st-face{width:100%;max-width:230px;height:270px;border-radius:10px;margin:0 auto}
.st-face i{width:560px;height:560px;left:-165px;top:-14px}
/* คำอธิบายค่าพลังตอนเอาเมาส์ชี้ (stat-tips.js) */
#st-tip{position:fixed;z-index:9999;max-width:300px;padding:8px 11px;border-radius:6px;background:#0b0712f2;border:1px solid #c9a35a;color:#e9e3d4;font-size:12.5px;line-height:1.5;white-space:pre-line;pointer-events:none;box-shadow:0 6px 20px #000a}
.st-d[data-d],.st-row[data-k]{cursor:help}
/* กล่องรายละเอียดตอนชี้เมาส์แบบ MMO (tooltip.js) · พี่ 2026-11-09 */
#tt{position:fixed;z-index:10000;width:max-content;max-width:300px;padding:9px 12px 8px;border-radius:6px;background:linear-gradient(#141022f7,#0a0712f7);border:1px solid #c9a35a;box-shadow:0 0 0 1px #000,0 8px 24px #000c;color:#e9e3d4;font:13px/1.5 var(--font);pointer-events:none}
#tt.tt-plain{max-width:280px;white-space:pre-line}
#tt .tt-text{margin:0}
#tt .tt-head{margin:-1px 0 6px;padding-bottom:5px;border-bottom:1px solid #c9a35a55}
#tt .tt-head b{display:block;font-size:15px;color:var(--tc,#ffd98a);text-shadow:0 1px 2px #000}
#tt .tt-head small{display:block;font-size:11.5px;color:#c9b88f}
#tt .tt-row{display:flex;justify-content:space-between;gap:18px;font-size:12.5px}
#tt .tt-row span{color:#c9b88f}#tt .tt-row b{color:#fff;font-variant-numeric:tabular-nums}
#tt .tt-main{font-size:14px}#tt .tt-main b{color:#7dff8a}
#tt .tt-sub b{color:#9fd8ff}
#tt .tt-sep{margin:5px 0 1px;font-size:11px;color:#c9a35a;letter-spacing:.5px}
#tt .tt-desc{margin:6px 0 0;font-size:12.5px;color:#e9e3d4}
#tt .tt-use{margin:4px 0 0;font-size:11.5px;color:#7dff8a}
#tt .tt-foot{margin-top:6px;padding-top:4px;border-top:1px solid #c9a35a33;font-size:11.5px;color:#ffd98a}