/* คัมภีร์สกิลพาสซีฟ (tome-window.js) — แท็บในหน้าต่างสกิล · ป๊อปอัปชั้น Popup (#tome-pop)
   ชุดสีเดียวกับหน้าต่าง Astra: ครีม #fff9ed · ขอบทอง #d8bd86 · teal #2f6f73 · ทอง #e8b64a · ตัวหนังสือ #443629
   ภาพ Astra (design-briefs/42-skill-tomes) ตั้งเป็นตัวแปร --tome-<ชื่อ> ตอนโหลดเจอไฟล์ — ไม่มี = กรอบ CSS ชั่วคราว
   ไม่มีแสงขาวจ้า: แสงฉากเผย Lv ใช้ทอง/teal ทึบปานกลาง (กฎสไตล์ข้อ 2) */

/* ── แท็บ สกิล | คัมภีร์ ── */
.tm-tabs { position: sticky; top: -10px; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: -4px 0 10px; padding: 6px;
  background: linear-gradient(#f6ecd4, #efe1bf); border: 1px solid #dcc69a; border-radius: 12px; box-shadow: 0 2px 0 #e4d3ae; }
.tm-tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 4px 10px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: #6f5c40; font: 500 14px Mitr, sans-serif; cursor: pointer; position: relative; }
.tm-tabs button:hover { background: #fff6e2; }
.tm-tabs button.on { background: linear-gradient(#fffdf5, #fbf1da); border-color: #d8bd86; color: #245d60; box-shadow: 0 2px 0 #dcc69a, inset 0 1px 0 #fff; }
.tm-tabs em { font-style: normal; font: 600 11px/1 system-ui, sans-serif; padding: 3px 6px; border-radius: 99px; background: #2f6f73; color: #fff8e6; }
.tm-tab-ic { width: 22px; height: 22px; flex: none; background: center/contain no-repeat; }
.tm-tab-ic.sk { background-image: url("assets/ui/kit/menu/skill.webp"); }
.tm-dot { position: absolute; top: 5px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #d9573f; box-shadow: 0 0 0 2px #fffaf0; }

/* ── แผงคัมภีร์ ── */
.tm { color: #443629; }
.tm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tm-head-tx { display: grid; gap: 2px; min-width: 0; flex: 1; }
.tm-head-tx b { font: 500 16px Mitr, sans-serif; color: #245d60; }
.tm-head-tx span { font-size: 12.5px; color: #7a6649; line-height: 1.45; }
.tm-odds-btn, .cw-odds { flex: none; min-height: 34px; padding: 4px 12px; border: 1px solid #c9b07c; border-radius: 99px; background: linear-gradient(#fffdf5, #f3e6c6);
  color: #6b4f22; font: 500 13px Mitr, sans-serif; cursor: pointer; box-shadow: 0 2px 0 #dcc69a; }
.tm-odds-btn::before, .cw-odds::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 3px;
  background: radial-gradient(circle at 30% 30%, #2f6f73 18%, transparent 20%), radial-gradient(circle at 70% 70%, #2f6f73 18%, transparent 20%), #fff; border: 1.5px solid #2f6f73; }
.tm-odds-btn:hover, .cw-odds:hover { background: #eaf1e8; border-color: #76a19a; }

.tm-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tm-slot { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 82px; padding: 8px 10px 8px 8px;
  border-radius: 14px; border: 1px solid #dcc69a; background: var(--tome-slot-filled, none) center/100% 100% no-repeat, linear-gradient(#fffdf6, #f8eed6); box-shadow: 0 2px 0 #e4d3ae; }
.tm-frame { position: relative; width: 64px; height: 58px; display: grid; place-items: center;
  background: var(--tome-slot-filled, url("assets/ui/kit/slot.webp")) center/contain no-repeat; }   /* กรอบช่องชุด kit (ภาพ Astra) */
.tm-frame img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 2px #1a100860); }
.tm-lv { position: absolute; bottom: -9px; left: 50%; translate: -50% 0; padding: 3px 10px 4px; background: url("assets/ui/kit/pill-teal.webp") center/100% 100% no-repeat; color: #fff8e6;
  font: 600 11px/1.2 system-ui, sans-serif; white-space: nowrap; text-shadow: 0 1px 0 #163c3e; }
.tm-slot.t3 .tm-lv, .tm-slot.t4 .tm-lv { background-image: url("assets/ui/kit/pill-gold.webp"); color: #3f2a0c; text-shadow: 0 1px 0 #f8e2a8; }
.tm-item.t3 .tm-lvtag { background: linear-gradient(#f3c85e, #c9922e); color: #3f2a0c; }
.tm-item.t4 .tm-lvtag { background: linear-gradient(#f6d27a, #d9573f); color: #fffaf0; }
.tm-slot.t3 .tm-frame, .tm-slot.t4 .tm-frame { background-image: var(--tome-slot-filled, url("assets/ui/kit/slot-active.webp")); }
.tm-tx { display: grid; gap: 3px; min-width: 0; padding-right: 30px; }
.tm-tx b { font: 500 14px Mitr, sans-serif; color: #3e3120; line-height: 1.25; overflow-wrap: anywhere; }
.tm-tx span { font-size: 12.5px; color: #6f5c40; line-height: 1.35; }
.tm-tx small { font-size: 11.5px; color: #9a7b45; }
.tm-fx { color: #245d60 !important; font-weight: 600; }
.tm-tier { justify-self: start; font-style: normal; font: 600 10.5px system-ui, sans-serif; padding: 1px 8px; border-radius: 99px; background: #f6e2a8; color: #7a4f12; }
.tm-pips { display: flex; gap: 2px; margin-top: 2px; }
.tm-pips i { width: 7px; height: 7px; rotate: 45deg; border-radius: 1.5px; background: #e6d8b8; }
.tm-pips i.on { background: #2f6f73; }
.tm-pips i.on.hi { background: #e8b64a; box-shadow: 0 0 0 1px #c9922e; }
.tm-erase { position: absolute; top: 6px; right: 6px; width: 30px !important; height: 30px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border-radius: 50%; border: 1px solid #d6c3a0; background: #fffaf0; cursor: pointer;
  display: grid; place-items: center; opacity: .85; }
.tm-erase span { width: 16px; height: 16px; background: var(--tome-fading-scroll, none) center/contain no-repeat; }
.tm-erase span:empty { background-image: var(--tome-fading-scroll, linear-gradient(transparent, transparent)); }
.tm-erase::after { content: ''; position: absolute; width: 12px; height: 2px; background: #9a6a3a; rotate: 45deg; box-shadow: 0 0 0 0 #9a6a3a; }
.tm-erase::before { content: ''; position: absolute; width: 12px; height: 2px; background: #9a6a3a; rotate: -45deg; }
.tm-erase:hover { background: #f8e8df; border-color: #c98f73; opacity: 1; }

.tm-slot[data-st="empty"] { background: var(--tome-slot-empty, none) center/100% 100% no-repeat, #fffaf0; border: 2px dashed #d8bd86; box-shadow: none; }
.tm-slot[data-st="empty"] .tm-frame { background-image: var(--tome-slot-empty, url("assets/ui/kit/slot-item.webp")); }
.tm-plus { width: 30px; height: 30px; opacity: .35; background: center/contain no-repeat; filter: grayscale(.4); }
.tm-slot[data-st="locked"] { background: var(--tome-slot-locked, none) center/100% 100% no-repeat, linear-gradient(#efe6d2, #e6dac0); border-color: #d5c6a6; box-shadow: none; }
.tm-slot[data-st="locked"] .tm-frame { background-image: var(--tome-slot-locked, url("assets/ui/kit/slot-locked.webp")); }
.tm-slot[data-st="locked"] .tm-lock { display: none; }
.tm-slot[data-st="locked"] .tm-tx b { color: #7f6d52; }
.tm-lock { width: 22px; height: 26px; position: relative; }
.tm-lock::before { content: ''; position: absolute; left: 4px; top: 0; width: 14px; height: 14px; border: 3px solid #9b8762; border-bottom: 0; border-radius: 8px 8px 0 0; }
.tm-lock::after { content: ''; position: absolute; left: 0; bottom: 0; width: 22px; height: 15px; border-radius: 4px; background: linear-gradient(#b8a27a, #8f7b55); box-shadow: inset 0 0 0 1px #d8c79f; }

.tm-slot.flash { animation: tm-flash 1.3s ease-out; }
@keyframes tm-flash { 0% { box-shadow: 0 0 0 0 #e8b64acc, 0 2px 0 #e4d3ae; background-color: #fff3cc; } 60% { box-shadow: 0 0 0 8px #e8b64a00, 0 2px 0 #e4d3ae; } 100% { box-shadow: 0 2px 0 #e4d3ae; } }

.tm-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 10px 0 2px; padding: 7px 9px; border-radius: 10px; background: #eef4ee; border: 1px solid #c6dccf; }
.tm-sum > span { font: 500 12.5px Mitr, sans-serif; color: #245d60; margin-right: 2px; }
.tm-chip { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; color: #3e3120; background: #fffdf6;
  border: 1px solid color-mix(in srgb, var(--c, #d8bd86) 55%, #fff); box-shadow: inset 3px 0 0 var(--c, #d8bd86); }

.tm-h { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; padding: 5px 10px; border-radius: 8px; background: #f3e8cf; color: #5d4a2e; font: 500 13px Mitr, sans-serif; }
.tm-h small { font: 600 11px system-ui; padding: 1px 6px; border-radius: 99px; background: #fffaf0; color: #7a6649; }
.tm-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; margin-bottom: 6px; border-radius: 12px;
  border: 1px solid #e0cfab; background: #fffdf6; }
.tm-item.t3, .tm-item.t4 { background: linear-gradient(90deg, #fff6dc, #fffdf6 60%); border-color: #e4c77e; }
.tm-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fffaf0, #f1e4c5); box-shadow: inset 0 0 0 1.5px #e3cd96; }
.tm-ic img { width: 42px; height: 42px; object-fit: contain; }
.tm-it-tx { display: grid; gap: 2px; min-width: 0; }
.tm-it-tx b { font: 500 13.5px Mitr, sans-serif; color: #3e3120; }
.tm-it-tx span { font-size: 12.5px; color: #245d60; }
.tm-it-tx small { font-size: 11.5px; color: #8a7451; }
.tm-it-tx small.warn { color: #a3532f; }
.tm-lvtag { font-style: normal; font: 600 11px system-ui, sans-serif; padding: 1px 6px; border-radius: 99px; background: #2f6f73; color: #fff8e6; vertical-align: 1px; }
.tm-read { min-width: 74px; min-height: 36px; padding: 4px 12px; border-radius: 10px; border: 1px solid #245d60; background: linear-gradient(#3f8589, #2f6f73);
  color: #fff8e6; font: 500 13.5px Mitr, sans-serif; cursor: pointer; box-shadow: 0 2px 0 #1f4c4f; }
.tm-read.over { background: linear-gradient(#e7b85a, #c8902f); border-color: #a87526; color: #3a2508; box-shadow: 0 2px 0 #95672a; }
.tm-read:disabled { background: #e8dfcc; border-color: #ccbd9e; color: #8b7c63; box-shadow: none; cursor: default; }
.tm-empty { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; border: 1px dashed #d8bd86; background: #fffaf0; }
.tm-empty img { width: 54px; height: 54px; opacity: .9; }
.tm-empty p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #6f5c40; }
.tm-foot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.tm-foot img { width: 22px; height: 22px; }
.cw-tome { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: #eef4ee; border: 1px solid #c6dccf; font-size: 12.5px; color: #245d60; line-height: 1.45; }

/* หน้าสถานะ: แถวคัมภีร์ */
.tm-status { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 8px 0 0; padding: 7px 9px; border-radius: 10px; background: #f6efdf; border: 1px solid #e0cfab; }
.tm-status > b { font: 500 12.5px Mitr, sans-serif; color: #245d60; margin-right: 2px; }
.tm-status-go { margin-left: auto; width: auto !important; min-width: 56px !important; min-height: 30px !important; height: auto !important; padding: 2px 12px !important; border-radius: 99px !important; border: 1px solid #c9b07c; background: #fffaf0; color: #6b4f22; font-size: 12px; cursor: pointer; }

/* จอกว้าง (หน้าต่างสกิลแบบเต็มจอบนแท็บเล็ต/มือถือแนวนอน): ช่องซ้าย กระเป๋าขวา · แคบมาก: ช่องเรียงเดี่ยว */
.tm-wrap { container-type: inline-size; }
@container (min-width: 640px) {
  .tm { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: 'head head' 'slots bag' 'sum bag'; column-gap: 14px; align-items: start; }
  .tm-head { grid-area: head; }
  .tm-slots { grid-area: slots; }
  .tm-sum { grid-area: sum; }
  .tm-bag { grid-area: bag; }
  .tm-bag .tm-h { margin-top: 0; }
}
@container (max-width: 340px) {
  .tm-slots { grid-template-columns: 1fr; }
}

/* ── ป๊อปอัป (ชั้น Popup 300) ── */
#tome-pop { position: fixed; inset: 0; z-index: var(--z-popup, 300); display: grid; place-items: center; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
#tome-pop[hidden] { display: none; }
.tp-back { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(40, 30, 18, .45), rgba(18, 22, 28, .62)); animation: tp-in .2s ease-out; }
.tp-card { position: relative; width: min(400px, 100%); max-height: 100%; overflow: auto; padding: 18px 18px 14px; border-radius: 18px; text-align: center; color: #443629;
  background: linear-gradient(#fffdf6, #f8eed6); border: 1px solid #d8bd86; box-shadow: 0 0 0 4px #fff7e2, 0 0 0 5px #e3cd96, 0 18px 40px #2a1a0a55; animation: tp-pop .26s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes tp-in { from { opacity: 0; } }
@keyframes tp-pop { from { opacity: 0; transform: scale(.9) translateY(8px); } }
.tp-card h4 { margin: 4px 0 6px; font: 500 18px Mitr, sans-serif; color: #245d60; }
.tp-card p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: #5d4a2e; }
.tp-art { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 4px 3px #6a4a2033); }
.tp-name { font-weight: 600; color: #245d60 !important; }
.tp-list { margin: 6px 0 10px; padding: 8px 12px 8px 26px; text-align: left; border-radius: 10px; background: #fff6e4; border: 1px solid #ead7ae; font-size: 13px; line-height: 1.6; }
.tp-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.tp-btns button { min-width: 108px; min-height: 42px; padding: 6px 16px; border-radius: 12px; font: 500 14px Mitr, sans-serif; cursor: pointer; }
.tp-no { border: 1px solid #d0bb92; background: linear-gradient(#fffdf5, #f1e4c5); color: #5d4a2e; box-shadow: 0 2px 0 #dcc69a; }
.tp-ok { border: 1px solid #245d60; background: linear-gradient(#3f8589, #2f6f73); color: #fff8e6; box-shadow: 0 2px 0 #1f4c4f; }
.tp-ok.warn { border-color: #a87526; background: linear-gradient(#e7b85a, #c8902f); color: #3a2508; box-shadow: 0 2px 0 #95672a; }
.tp-ok.danger { position: relative; overflow: hidden; border-color: #8d3f2a; background: linear-gradient(#c56a4c, #a24a33); color: #fff4e6; box-shadow: 0 2px 0 #74311f; }
.tp-ok.danger:disabled { opacity: .75; cursor: default; }
.tp-ok.danger.arming::before { content: ''; position: absolute; inset: 0; background: #ffffff33; transform-origin: left; animation: tp-arm 1s linear forwards; }
.tp-ok.danger > span { position: relative; }
@keyframes tp-arm { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tp-fade { position: relative; width: 120px; height: 90px; margin: 0 auto; }
.tp-fade .tp-art { position: absolute; left: 10px; top: 2px; animation: tp-fade 2.4s ease-in-out infinite; }
.tp-fade .tp-art2 { position: absolute; right: 0; bottom: 0; width: 52px; height: 52px; }
@keyframes tp-fade { 50% { opacity: .35; filter: grayscale(.6) drop-shadow(0 4px 3px #6a4a2033); transform: translateY(-3px); } }

/* ดูโอกาส */
.to-sub { font-size: 12.5px !important; color: #7a6649 !important; }
.to-list { display: grid; gap: 4px; margin: 6px 0 8px; text-align: left; }
.to-row { display: grid; grid-template-columns: 50px 1fr 46px; gap: 8px; align-items: center; font-size: 13px; }
.to-row b { font: 600 12.5px system-ui, sans-serif; color: #5d4a2e; }
.to-row em { font-style: normal; text-align: right; font: 600 12.5px system-ui, sans-serif; color: #245d60; }
.to-bar { height: 10px; border-radius: 99px; background: #efe3c6; overflow: hidden; }
.to-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5b9a9c, #2f6f73); }
.to-row.t3 .to-bar i { background: linear-gradient(90deg, #f0cf7a, #d39a35); }
.to-row.t4 .to-bar i { background: linear-gradient(90deg, #f0cf7a, #d9573f); }
.to-note { font-size: 12px !important; color: #7a6649 !important; padding: 6px 8px; border-radius: 8px; background: #fff6e4; }

/* ── ฉากเปิดคัมภีร์ (เผย Lv) ── */
#tome-pop.tp-reveal .tp-card { width: min(440px, 100%); padding-top: 6px; background: linear-gradient(#fffdf6, #f6ead0); }
#tome-pop.tp-reveal .tp-back { background: radial-gradient(ellipse at 50% 42%, rgba(70, 50, 22, .5), rgba(14, 20, 26, .72)); }
.tr-stage { --c1: #8fc7c4; --c2: #2f6f73; position: relative; height: 210px; margin: 0 -18px; display: grid; place-items: center; overflow: hidden; border-radius: 16px 16px 0 0;
  background: radial-gradient(ellipse at 50% 55%, #fff6dc 0, #f3e3bb 45%, #e9d5a6 100%); }
.tr-stage.t2 { --c1: #f0d58e; --c2: #2f6f73; }
.tr-stage.t3 { --c1: #f3c85e; --c2: #d39a35; background: radial-gradient(ellipse at 50% 55%, #fff1c8 0, #f2d996 45%, #e4c27a 100%); }
.tr-stage.t4 { --c1: #f6d27a; --c2: #d9573f; background: radial-gradient(ellipse at 50% 55%, #fff0c4 0, #f4cf86 40%, #e3a86a 100%); }
.tr-rays { position: absolute; width: 520px; height: 520px; border-radius: 50%; opacity: 0; transition: opacity .5s;
  background: var(--tr-glow, repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c1) 70%, transparent) 0 8deg, transparent 8deg 22deg)) center/contain no-repeat;
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); animation: tr-spin 14s linear infinite; }
.tr-ring { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--c1); opacity: 0; }
.tr-motes { position: absolute; inset: 0; }
.tr-motes i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; rotate: 45deg; border-radius: 2px; background: var(--c1); box-shadow: 0 0 0 1px var(--c2); opacity: 0; }
.tr-book { position: relative; width: 132px; height: 132px; object-fit: contain; filter: drop-shadow(0 8px 6px #5a3a1844); animation: tr-book 1.1s cubic-bezier(.2, 1.3, .4, 1) both, tr-float 3s ease-in-out 1.2s infinite; }
.tr-lv { position: absolute; bottom: 10px; left: 50%; translate: -50% 0; display: flex; align-items: baseline; gap: 4px; padding: 7px 26px 10px;
  background: url("assets/ui/kit/pill-teal.webp") center/100% 100% no-repeat; color: #fff8e6; text-shadow: 0 1px 0 #163c3e; filter: drop-shadow(0 4px 5px #2a1a0a44); }
.tr-lv small { font: 600 13px system-ui, sans-serif; opacity: .85; }
.tr-lv b { font: 600 26px/1 Mitr, sans-serif; min-width: 1.2ch; text-align: center; }
.tr-stage.t3 .tr-lv, .tr-stage.t4 .tr-lv { background-image: url("assets/ui/kit/pill-gold.webp"); color: #3f2a0c; text-shadow: 0 1px 0 #f8e2a8; }
#tome-pop.done .tr-rays { opacity: .85; }
#tome-pop.done .tr-ring { animation: tr-ring .9s ease-out; }
#tome-pop.done .tr-lv { animation: tr-stamp .45s cubic-bezier(.2, 1.6, .4, 1); }
#tome-pop.done .tr-motes i { animation: tr-mote 1.4s ease-out var(--d) both; }
#tome-pop.done.t3 .tr-motes i, #tome-pop.done.t4 .tr-motes i { animation: tr-mote 1.6s ease-out var(--d) infinite; }
@keyframes tr-spin { to { rotate: 360deg; } }
@keyframes tr-book { 0% { opacity: 0; transform: scale(.4) rotate(-14deg); } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes tr-float { 50% { transform: translateY(-5px); } }
@keyframes tr-ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes tr-stamp { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes tr-mote { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-30px); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-118px); } }
.tr-info { padding-top: 10px; }
.tr-tier { display: inline-block; min-width: 200px; margin-bottom: 2px; padding: 6px 34px 9px; font: 600 14px Mitr, sans-serif; letter-spacing: .5px;
  background: url("assets/ui/kit/banner.webp") center/100% 100% no-repeat; color: #6b420c; opacity: 0; transition: opacity .3s .2s; }
#tome-pop.done .tr-tier { opacity: 1; }
.tr-info h4 { margin-top: 4px; }
.tr-fx { font: 600 15px Mitr, sans-serif !important; color: #245d60 !important; }
.tr-info .tm-pips { justify-content: center; margin: 2px 0 8px; }
.tr-info .tm-pips i { width: 9px; height: 9px; }
.tr-odds { font-size: 12px !important; color: #8a7451 !important; }
.tr-info .tr-fx, .tr-info .tm-pips, .tr-info .tr-odds, .tr-info .tp-btns { opacity: 0; transition: opacity .35s; }
#tome-pop.done .tr-info .tr-fx, #tome-pop.done .tr-info .tm-pips, #tome-pop.done .tr-info .tr-odds, #tome-pop.done .tr-info .tp-btns { opacity: 1; }

/* จอเตี้ย (มือถือแนวนอน 360–430px สูง): แท็บ/หัวแผงบางลง · ฉากเผย Lv วางซ้าย-ขวา ไม่ต้องเลื่อน */
@media (max-height: 520px) {
  .tm-tabs { margin: -6px 0 6px; padding: 3px; }
  .tm-tabs button { min-height: 32px !important; font-size: 13px; }
  .tm-head { margin-bottom: 6px; }
  .tm-head-tx span { display: none; }
  .tm-slot { min-height: 72px; padding: 6px 8px 8px 6px; }
  .tm-slots { gap: 6px; }
  .tp-card { padding: 12px 14px 10px; }
  .tp-art { width: 64px; height: 64px; }
  #tome-pop.tp-reveal .tp-card { width: min(640px, 100%); display: grid; grid-template-columns: 230px 1fr; gap: 12px; align-items: center; padding: 8px; }
  .tr-stage { height: 220px; margin: 0; border-radius: 12px; }
  .tr-info { padding-top: 0; }
  .tp-btns button { min-height: 40px; min-width: 92px; padding: 4px 12px; }
  .to-list { gap: 2px; }
  .to-row { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-rays, .tr-book, .tr-motes i { animation: none !important; }
}