/* Shieldfall · หน้าจัดทีมแมว C1 (catteam.js) · ตำแหน่งเป็น % ของฉาก ctw-bg 3:2 (วัดจากภาพ 1536×1024) · ตัวอักษร cqw */
#modal:has(.catwin) { padding: 0; background: rgba(8, 6, 18, .86); z-index: 41; } /* เปิดจากบ้านแมว (#petr z 40) ต้องลอยเหนือ */
#modal .card:has(.catwin) { width: auto; max-width: none; max-height: none; padding: 0; border: 0; border-image: none; background: none; box-shadow: none; gap: 0; }
#modal .card:has(.catwin) #mtitle, #modal .card:has(.catwin) > #mok { display: none; }
#modal .card:has(.catwin) #mbody { overflow: visible; padding: 0; }
.catwin { position: relative; width: min(100vw, calc(100vh * 1.5), calc(100dvh * 1.5)); aspect-ratio: 3 / 2; container-type: inline-size; overflow: hidden; background: url(img/ctw-bg.webp) center / 100% 100% no-repeat; font-family: Mitr, sans-serif; color: #4a2a10; text-align: left; line-height: 1.3; user-select: none; -webkit-user-select: none; }
.catwin > * { position: absolute; }
#modal .card .catwin img { max-height: none; max-width: none; } /* มือถือ: เกมจำกัดภาพในหน้าต่าง 56px */
.catwin button { border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.catwin .k-ttl { left: 38%; right: 38%; top: 1.4%; height: 5.2%; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; color: #ffd75a; font-weight: 800; font-size: 2.7cqw; line-height: 1; text-shadow: 0 .2cqw 0 #10183a, 0 0 1cqw rgba(255, 200, 80, .5); }
.catwin .k-x { right: 1%; top: 1.2%; width: 5%; cursor: pointer; z-index: 9; filter: drop-shadow(0 .2cqw .3cqw rgba(0, 0, 0, .5)); transition: transform .12s; }
.catwin .k-x:hover { transform: scale(1.06); }
.catwin .k-none { left: 10%; right: 10%; top: 40%; text-align: center; font-size: 2.2cqw; font-weight: 800; color: #ffe08a; text-shadow: 0 .2cqw 0 #10183a; }

/* แท่น: a = ตัวหลัก (ศูนย์กลาง x 17%) · b = ตัวรอง (x 53.5%) */
.catwin .k-crown { left: 13.2%; top: 1.6%; width: 7.6%; z-index: 3; animation: ctBob 3.2s ease-in-out infinite; filter: drop-shadow(0 0 .8cqw rgba(255, 210, 80, .7)); }
.catwin .k-rb { top: 9%; width: 13.5%; aspect-ratio: 3 / 1; display: grid; place-items: center; padding-top: .55%; box-sizing: border-box; background: url(img/ctw-ribmain.webp) center / 100% 100% no-repeat; z-index: 3; }
.catwin .k-rb.k-b { background-image: url(img/ctw-ribsub.webp); width: 12%; }
.catwin .k-rb.k-a { left: 10.25%; } .catwin .k-rb.k-b { left: 47.5%; }
.catwin .k-rb span { color: #ffe08a; font-weight: 800; font-size: 1.65cqw; text-shadow: 0 .15cqw 0 #10183a; white-space: nowrap; }
.catwin .k-rb.k-b span { color: #eef3ff; }
.catwin .k-cat { bottom: 59%; height: 27%; z-index: 4; transform: translateX(-50%); cursor: pointer; filter: drop-shadow(0 .5cqw .4cqw rgba(20, 10, 40, .45)); animation: ctIn .55s cubic-bezier(.2, 1.5, .45, 1) backwards; }
.catwin .k-cat.k-a { left: 17%; } .catwin .k-cat.k-b { left: 53.6%; height: 24%; animation-delay: .08s; }
.catwin .k-cat:hover { filter: drop-shadow(0 0 1cqw rgba(255, 220, 120, .9)); }
.catwin .k-emp { bottom: 59%; height: 22%; width: 15%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4cqw; cursor: pointer; text-align: center; color: #ffe9b0; font-weight: 700; font-size: 1.3cqw; line-height: 1.25; text-shadow: 0 .15cqw 0 #10183a; }
.catwin .k-emp b { display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 50%; border: .3cqw dashed rgba(255, 224, 138, .8); font-size: 3.4cqw; color: #ffe08a; animation: ctPulse 1.6s ease-in-out infinite; }
.catwin .k-emp.k-a { left: 17%; } .catwin .k-emp.k-b { left: 53.6%; }
.catwin .k-np { top: 44.6%; width: 17%; height: 5.4%; display: flex; align-items: center; z-index: 5; background: url(img/ctw-nameplate.webp) center / 100% 100% no-repeat; }
.catwin .k-np.k-a { left: 8.5%; } .catwin .k-np.k-b { left: 45.1%; }
.catwin .k-np .k-el { position: absolute; left: -6%; top: 50%; width: 22%; transform: translateY(-50%); filter: drop-shadow(0 .1cqw .2cqw rgba(0, 0, 0, .5)); }
.catwin .k-np .k-ctfit { flex: 1; margin: 0 7% 0 17%; display: block; white-space: nowrap; overflow: hidden; text-align: center; color: #fff1d0; font-weight: 800; font-size: 1.65cqw; line-height: 1.6; text-shadow: 0 .12cqw 0 #2a1408; }
.catwin .k-sr { top: 50.4%; display: flex; justify-content: center; gap: .15cqw; z-index: 5; transform: translateX(-50%); }
.catwin .k-sr.k-a { left: 17%; } .catwin .k-sr.k-b { left: 53.6%; }
.catwin .k-sr img { width: 1.9cqw; filter: drop-shadow(0 .1cqw .1cqw rgba(60, 30, 0, .6)); }
.catwin .k-pl { top: 54.6%; width: 9%; height: 4.2%; display: grid; place-items: center; z-index: 5; transform: translateX(-50%); background: url(img/ctw-pill.webp) center / 100% 100% no-repeat; }
.catwin .k-pl.k-a { left: 17%; } .catwin .k-pl.k-b { left: 53.6%; }
.catwin .k-pl span { color: #5a3414; font-weight: 700; font-size: 1.3cqw; white-space: nowrap; }
.catwin .k-bd { z-index: 3; object-fit: fill; pointer-events: none; mix-blend-mode: screen; opacity: 1; animation: ctFlow 3.4s ease-in-out infinite; }
.catwin .k-bd.k-a { left: 21%; top: 26%; width: 19%; height: 13%; rotate: -16deg; }
.catwin .k-bd.k-b { left: 37%; top: 26%; width: 16%; height: 13%; transform: scaleX(-1); rotate: 16deg; animation-delay: -1.7s; }

/* เหรียญคู่หู (วงแดงในฉาก x 30.4–44.9% y 14.6–33.7%) */
.catwin .k-md { left: 30.6%; top: 15.2%; width: 14%; height: 18%; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.catwin .k-md .k-mdk { color: #ffd75a; font-weight: 800; font-size: 1.5cqw; line-height: 1.1; text-shadow: 0 .12cqw 0 #2a0808; }
.catwin .k-md .k-mdn { display: block; width: 100%; overflow: hidden; white-space: nowrap; color: #fff3c4; font-weight: 800; font-size: 2.3cqw; line-height: 1.25; text-shadow: 0 .15cqw 0 #2a0808, 0 0 1cqw rgba(255, 180, 60, .7); }
.catwin .k-md .k-mdd { display: block; width: 92%; margin-top: .2cqw; padding: .25cqw .4cqw; box-sizing: border-box; overflow: hidden; background: url(img/ctw-pill.webp) center / 100% 100% no-repeat; color: #7a2408; font-weight: 800; font-size: 1.15cqw; line-height: 1.25; }
.catwin .k-md .k-mde.k-off { margin-top: .6cqw; opacity: .85; }
.catwin .k-md .k-mde.k-off b { color: #ffe2b0; font-weight: 800; font-size: 3cqw; line-height: 1; text-shadow: 0 .15cqw 0 #2a0808; }
.catwin .k-md .k-mde { display: flex; align-items: center; gap: .3cqw; margin-top: .3cqw; }
.catwin .k-md .k-mde img { width: 2.5cqw; } .catwin .k-md .k-mde i { color: #ffe08a; font-style: normal; font-weight: 800; font-size: 1.6cqw; }
.catwin .k-md.k-on { animation: ctGlow 2.4s ease-in-out infinite; }
.catwin .k-all { left: 31.4%; top: 38.9%; width: 12.4%; height: 4.4%; z-index: 5; display: grid; place-items: center; background: url(img/ctw-pillgold.webp) center / 100% 100% no-repeat; }
.catwin .k-all .k-ctfit { display: block; width: 84%; overflow: hidden; white-space: nowrap; text-align: center; color: #fff; font-weight: 800; font-size: 1.35cqw; text-shadow: 0 .12cqw 0 #7a3a0a; }
.catwin .k-all:hover { filter: brightness(1.08); }

/* ท่าไม้ตาย */
.catwin .k-uf { left: 28%; top: 44%; width: 6%; aspect-ratio: 1; z-index: 4; background: url(img/ctw-ultframe.webp) center / 100% 100% no-repeat; display: grid; place-items: center; }
.catwin .k-uf img { width: 68%; filter: drop-shadow(0 0 .5cqw rgba(255, 140, 40, .8)); }
.catwin .k-ul { left: 34.4%; top: 44.4%; width: 8.8%; height: 3.7%; display: grid; place-items: center; z-index: 4; background: url(img/ctw-ultlabel.webp) center / 100% 100% no-repeat; }
.catwin .k-ul span { color: #ffe08a; font-weight: 800; font-size: 1.1cqw; white-space: nowrap; }
.catwin .k-un { left: 34%; top: 48.2%; width: 9.6%; height: 4%; display: block; overflow: hidden; white-space: nowrap; text-align: center; z-index: 4; color: #fff1d0; font-weight: 800; font-size: 1.55cqw; line-height: 1.6; text-shadow: 0 .15cqw 0 #2a1408, 0 0 .6cqw rgba(0, 0, 0, .6); }

/* ปุ่ม */
.catwin .k-bt { top: 60.6%; width: 19%; height: 7.4%; z-index: 5; display: grid; place-items: center; background: url(img/ctw-btn.webp) center / 100% 100% no-repeat; transition: transform .12s, filter .12s; }
.catwin .k-bt.k-a { left: 7.5%; } .catwin .k-bt.k-b { left: 44.1%; }
.catwin .k-bt .k-ctfit { display: block; width: 78%; overflow: hidden; white-space: nowrap; text-align: center; color: #ffe9a0; font-weight: 800; font-size: 1.75cqw; text-shadow: 0 .15cqw 0 #0a1030; }
.catwin .k-bt:hover, .catwin .k-sw:hover { filter: brightness(1.1); transform: translateY(-.15cqw); }
.catwin .k-bt.k-hl { filter: drop-shadow(0 0 1cqw rgba(255, 210, 80, .95)); animation: ctPulse 1.2s ease-in-out infinite; }
.catwin .k-sw { left: 30.4%; top: 59.4%; width: 6.4%; aspect-ratio: 1; z-index: 5; transition: transform .2s; }
.catwin .k-sw img { width: 100%; display: block; }
.catwin .k-sw:disabled { filter: grayscale(.8) brightness(.8); cursor: default; }
.catwin .k-sw:not(:disabled):active img { transform: rotate(180deg); transition: transform .3s; }

/* ม้วนกระดาษขวา x 69.5–95% */
.catwin .k-sh { left: 71.5%; width: 21.8%; height: 5%; display: grid; place-items: center; z-index: 4; background: url(img/ctw-secrib.webp) center / 100% 100% no-repeat; }
.catwin .k-sh span { color: #ffe08a; font-weight: 800; font-size: 1.5cqw; white-space: nowrap; text-shadow: 0 .12cqw 0 #0a1030; }
.catwin .k-sh.k-a { top: 8.4%; } .catwin .k-sh.k-b { top: 38.8%; }
.catwin .k-bf { left: 70.6%; width: 23.6%; top: 14%; height: 17%; z-index: 4; display: flex; flex-direction: column; justify-content: center; gap: .35cqw; }
.catwin .k-bf .k-r { display: flex; align-items: center; gap: .6cqw; font-size: 1.45cqw; line-height: 1.15; }
.catwin .k-bf .k-r img { width: 2.3cqw; flex: none; }
.catwin .k-bf .k-r b { flex: 1; font-weight: 700; color: #4a2a10; white-space: nowrap; overflow: hidden; }
.catwin .k-bf .k-r em { font-style: normal; font-weight: 800; color: #b5480f; white-space: nowrap; }
.catwin .k-bf .k-r.k-hit em { color: #1d7c8c; }
.catwin .k-bf.k-two { display: grid; grid-template-columns: 1fr 1fr; column-gap: .9cqw; row-gap: .25cqw; align-content: center; }
.catwin .k-bf.k-two .k-r { font-size: 1.2cqw; gap: .35cqw; } .catwin .k-bf.k-two .k-r img { width: 1.85cqw; }
.catwin .k-spr { left: 70.6%; width: 23.6%; top: 31.6%; height: 6.8%; z-index: 4; display: flex; align-items: center; gap: .4cqw; border-top: .12cqw solid rgba(160, 110, 40, .35); }
.catwin .k-spr img { width: 4cqw; flex: none; filter: drop-shadow(0 .1cqw .2cqw rgba(0, 0, 0, .35)); }
.catwin .k-spr i { font-style: normal; font-weight: 800; color: #c88a2a; font-size: 1.6cqw; }
.catwin .k-spr span { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: right; }
.catwin .k-spr small { font-size: 1.1cqw; font-weight: 700; color: #7a5020; }
.catwin .k-spr .k-ctfit { display: block; overflow: hidden; white-space: nowrap; font-size: 1.4cqw; font-weight: 800; color: #4a2a10; }
.catwin .k-tl { left: 70.8%; width: 23.2%; top: 43.8%; height: 4.8%; z-index: 4; display: flex; justify-content: space-between; align-items: center; }
.catwin .k-tl img { height: 100%; filter: grayscale(1) brightness(.75) opacity(.45); transition: filter .3s; }
.catwin .k-tl img.k-on { filter: drop-shadow(0 0 .4cqw rgba(255, 170, 60, .7)); animation: ctTail 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
.catwin .k-stp { left: 70.8%; width: 23.2%; top: 50.6%; height: 14.6%; z-index: 4; display: flex; flex-direction: column; justify-content: space-between; }
.catwin .k-stp .k-s { position: relative; display: flex; align-items: center; gap: .7cqw; height: 18%; font-size: 1.4cqw; line-height: 1; opacity: .5; }
.catwin .k-stp .k-s.k-on { opacity: 1; }
.catwin .k-stp .k-s img { height: 100%; aspect-ratio: 1; flex: none; }
.catwin .k-stp .k-s .k-cn { position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 1.1cqw; font-weight: 800; color: #6b3d0a; }
.catwin .k-stp .k-s .k-ctfit { flex: 1; min-width: 0; display: block; overflow: hidden; white-space: nowrap; font-weight: 700; color: #4a2a10; }

/* แตะแมวเพื่อสลับ + การ์ดล่าง (แผงล่าง x 2–98% y 74–97.7%) */
.catwin .k-tb { left: 41%; top: 70.4%; width: 20%; height: 5.4%; z-index: 6; display: grid; place-items: center; background: url(img/ctw-tapbar.webp) center / 100% 100% no-repeat; }
.catwin .k-tb .k-ctfit { display: block; width: 82%; overflow: hidden; white-space: nowrap; text-align: center; color: #ffe08a; font-weight: 800; font-size: 1.5cqw; text-shadow: 0 .12cqw 0 #0a1030; }
.catwin .k-hd { left: 37.2%; top: 69.4%; width: 4%; z-index: 7; animation: ctTap 1.4s ease-in-out infinite; }
.catwin .k-ar { top: 71%; width: 7%; z-index: 6; }
.catwin .k-ar.k-l { left: 33%; transform: scaleX(-1); } .catwin .k-ar.k-r { left: 61.6%; }
.catwin.k-pm .k-tb { filter: drop-shadow(0 0 .8cqw rgba(255, 210, 80, .95)); }
.catwin .k-rs { left: 2.6%; right: 2.6%; top: 78.2%; height: 17.8%; z-index: 5; display: flex; justify-content: center; align-items: center; gap: .55%; }
.catwin .k-cd { position: relative; height: 100%; aspect-ratio: 3 / 4; flex: none; container-type: inline-size; transition: transform .14s; animation: ctIn .45s cubic-bezier(.2, 1.5, .45, 1) backwards; animation-delay: calc(.05s + var(--i) * .035s); }
.catwin .k-cd:hover { transform: translateY(-.5cqw); }
.catwin .k-cd > * { position: absolute; }
.catwin .k-cd .k-fr { inset: 0; width: 100%; height: 100%; }
.catwin .k-cd .k-ct { left: 50%; bottom: 33%; height: 56%; transform: translateX(-50%); }
.catwin .k-cd .k-el { left: 4%; top: 3%; width: 28%; }
.catwin .k-cd .k-nm { left: 8%; right: 8%; top: 71.5%; height: 12%; display: block; overflow: hidden; white-space: nowrap; text-align: center; color: #fff1d0; font-weight: 800; font-size: 12cqw; line-height: 1.45; text-shadow: 0 .8cqw 0 #2a1408; }
.catwin .k-cd .k-sr { left: 50%; top: 85%; display: flex; gap: 0; transform: translateX(-50%); }
.catwin .k-cd .k-sr img { width: 13cqw; }
.catwin .k-cd.k-on { z-index: 1; }
.catwin .k-cd .k-tg { left: 6%; top: 52%; width: 52%; aspect-ratio: 2.5; display: grid; place-items: center; background: url(img/ctw-tagmain.webp) center / 100% 100% no-repeat; }
.catwin .k-cd .k-tg.k-s { background-image: url(img/ctw-tagsub.webp); }
.catwin .k-cd .k-tg span { color: #5a2a00; font-weight: 800; font-size: 11cqw; line-height: 1; }
.catwin .k-cd .k-tg.k-s span { color: #eef3ff; text-shadow: 0 .8cqw 0 #10183a; }
.catwin .k-cd .k-tk { right: 4%; top: 51%; width: 30%; }
.catwin .k-cd.k-ow .k-ct, .catwin .k-cd.k-ow .k-fr, .catwin .k-cd.k-ow .k-el { filter: grayscale(.9) brightness(.7); }
.catwin .k-cd .k-aw { left: 5%; right: 5%; top: 38%; aspect-ratio: 3; display: grid; place-items: center; background: url(img/ctw-away.webp) center / 100% 100% no-repeat; }
.catwin .k-cd .k-aw span { color: #f2f2f2; font-weight: 800; font-size: 11cqw; white-space: nowrap; }
.catwin.k-pm .k-cd:not(.k-ow) { animation: ctPick 1s ease-in-out infinite; }
.catwin .k-tw { width: var(--s, 2cqw); z-index: 3; pointer-events: none; mix-blend-mode: screen; animation: ctTw var(--t, 3s) ease-in-out var(--d, 0s) infinite; opacity: 0; }

/* วงธาตุคู่หูทั้งหมด */
.catwin .k-wv { inset: 0; z-index: 20; background: rgba(8, 6, 22, .72); display: grid; place-items: center; animation: ctFade .2s ease-out; }
.catwin .k-wb { position: relative; width: 92%; height: 88%; border-radius: 2cqw; background: linear-gradient(#fff6dc, #f1dcaa); border: .35cqw solid #d9a536; box-shadow: 0 0 0 .3cqw #6b3d0a, 0 1.5cqw 3cqw rgba(0, 0, 0, .5); display: flex; align-items: center; gap: 2%; padding: 3% 3% 2%; box-sizing: border-box; }
.catwin .k-wb .k-ttl2 { position: absolute; left: 50%; top: -3.2%; transform: translateX(-50%); padding: .5cqw 4cqw; background: url(img/ctw-secrib.webp) center / 100% 100% no-repeat; color: #ffe08a; font-weight: 800; font-size: 1.9cqw; white-space: nowrap; text-shadow: 0 .12cqw 0 #0a1030; }
.catwin .k-wb .k-x { right: -1.5%; top: -4%; width: 5.4%; position: absolute; }
.catwin .k-wh { position: relative; height: 100%; aspect-ratio: 1; flex: none; }
.catwin .k-wh .k-wi { position: absolute; inset: 0; width: 100%; height: 100%; }
.catwin .k-wt { position: absolute; transform: translate(-50%, -50%); padding: .3cqw 1cqw; border-radius: 3cqw; background: rgba(255, 246, 220, .92); border: .15cqw solid #c88a2a; color: #5a3414; font-weight: 800; font-size: 1.15cqw; white-space: nowrap; }
.catwin .k-wt.k-on { background: linear-gradient(#ffd86a, #f2a531); color: #5a1d00; box-shadow: 0 0 1cqw rgba(255, 200, 60, .95); font-size: 1.35cqw; z-index: 1; }
.catwin .k-wl { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; gap: .35cqw; overflow: hidden; }
.catwin .k-wl .k-lgs { display: flex; flex-wrap: wrap; gap: .3cqw 0; }
.catwin .k-wl .k-lg { display: inline-flex; align-items: center; gap: .3cqw; margin-right: 1cqw; font-weight: 700; font-size: 1.2cqw; }
.catwin .k-wl .k-lg img { width: 2cqw; }
.catwin .k-wl small { font-size: 1.05cqw; color: #7a5020; margin-bottom: .2cqw; }
.catwin .k-wl .k-wr { display: flex; align-items: center; gap: .7cqw; padding: .3cqw .6cqw; border-radius: 1cqw; font-size: 1.3cqw; }
.catwin .k-wl .k-wr .k-e { display: flex; flex: none; } .catwin .k-wl .k-wr .k-e img { width: 2.2cqw; } .catwin .k-wl .k-wr .k-e img + img { margin-left: -.5cqw; }
.catwin .k-wl .k-wr b { flex: none; width: 8cqw; font-weight: 800; color: #b5480f; white-space: nowrap; }
.catwin .k-wl .k-wr .k-ctfit { flex: 1; min-width: 0; display: block; overflow: hidden; white-space: nowrap; font-weight: 600; }
.catwin .k-wl .k-wr.k-on { background: rgba(255, 200, 80, .45); box-shadow: inset 0 0 0 .15cqw #e0a030; }

@keyframes ctIn { from { opacity: 0; scale: .6; } }
@keyframes ctBob { 50% { translate: 0 -.5cqw; } }
@keyframes ctPulse { 50% { scale: 1.06; } }
@keyframes ctGlow { 50% { filter: drop-shadow(0 0 1.2cqw rgba(255, 180, 60, .9)); } }
@keyframes ctFlow { 50% { opacity: .55; translate: 0 -.4cqw; } }
@keyframes ctTail { 50% { translate: 0 -.25cqw; } }
@keyframes ctTap { 50% { translate: .4cqw .6cqw; scale: .92; } }
@keyframes ctPick { 50% { translate: 0 -.4cqw; filter: drop-shadow(0 0 .6cqw rgba(255, 210, 80, .9)); } }
@keyframes ctTw { 0%, 100% { opacity: 0; scale: .5; } 50% { opacity: 1; scale: 1; } }
@keyframes ctFade { from { opacity: 0; } }