/* ct-sticker.css — สติกเกอร์ 3D ในกรอบทองบาง (แบบที่ 1) ของตัวเลือกประเภทสัญญา (มือถือเท่านั้น)
   โหลดท้ายสุดใน index.html · ปรับค่าที่ตัวแปรด้านล่าง (ทุกกรอบขนาดเท่ากัน)
   ปิดทั้งชุด: ลบบรรทัด <link ... ct-sticker.css> */
:root{
  --ct-frame:76px;      /* ขนาดกรอบ */
  --ct-pad:7px;         /* ระยะขอบถึงภาพ (6–8) */
  --ct-radius:18px;     /* ความโค้ง (18–20) */
  --ct-bw:1.2px;        /* ความหนาขอบ (1–1.5) */
  --ct-gold:170,173,178;
}

.ct-ico{
  position:relative;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  flex:none;
  width:var(--ct-frame);
  height:var(--ct-frame);
  padding:var(--ct-pad);
  border:var(--ct-bw) solid rgba(var(--ct-gold),.5);
  border-radius:var(--ct-radius);
  background:linear-gradient(160deg,#242a35,#191d26);
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.ct-ico svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  transform-origin:50% 85%;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.38));
}

/* ทุกกรอบขนาดเท่ากัน รวมถึง "ไม่แน่ใจ" (ต้องเขียนซ้ำเพราะ mobile.css ตั้งเฉพาะไว้) */
.ct-list li .ct-ico,
.ct-list li[data-value="unsure"] .ct-ico{
  width:var(--ct-frame);
  height:var(--ct-frame);
  border-radius:var(--ct-radius);
}
.ct-list li .ct-ico svg,
.ct-list li[data-value="unsure"] .ct-ico svg{width:100%;height:100%}
/* ปุ่มบนหน้าหลักใช้กรอบเล็กลงแต่สัดส่วนเดิม */
.ct-trigger .ct-ico{--ct-frame:58px;--ct-pad:6px;--ct-radius:16px;width:58px;height:58px;border-radius:16px}

/* แตะหรือชี้: ภาพขยาย 4% ลอยขึ้น 3px ใน 220ms */
.ct-list li:active .ct-ico,
.ct-trigger:active .ct-ico{transform:translateY(-3px) scale(1.04)}
@media (hover:hover){
  .ct-list li:hover .ct-ico{transform:translateY(-3px) scale(1.04)}
}

/* เลือกแล้ว: ขอบทองเต็ม + แสงเรืองบาง + พื้นสว่างขึ้นเล็กน้อย */
.ct-list li.is-on .ct-ico{
  border-color:rgb(var(--ct-gold));
  background:linear-gradient(160deg,#2f3441,#202532);
  box-shadow:0 0 0 1px rgba(var(--ct-gold),.35),0 0 18px rgba(var(--ct-gold),.35),0 6px 14px rgba(0,0,0,.35);
}
/* แสงวิ่งผ่านกรอบครั้งเดียวตอนกดเลือก (ไม่วนซ้ำ) */
.ct-ico::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(210,212,215,.55) 50%,transparent 65%);
  transform:translateX(-120%);
}
.ct-list li.pick .ct-ico::after{animation:ctSweep .55s ease-out 1}
@keyframes ctSweep{to{transform:translateX(120%)}}

/* ไอคอนเด้งตอนเปิดแผน/เลื่อนผ่านเข้าจอ (JS ใส่ .seen) */
.ct-list.ct-anim li[data-value] .ct-ico svg{opacity:0}
.ct-list.ct-anim li.seen .ct-ico svg{
  opacity:1;
  animation:ctSpawn .5s cubic-bezier(.34,1.56,.64,1) var(--d,0ms) backwards;
}
@keyframes ctSpawn{
  0%{opacity:0;transform:translateY(10px) scale(.55) rotate(-8deg)}
  100%{opacity:1;transform:none}
}
.ct-list.ct-anim li.seen.pick .ct-ico svg{animation:ctPick .42s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ctPick{
  0%{transform:scale(.92)}
  45%{transform:translateY(-4px) scale(1.12) rotate(5deg)}
  100%{transform:none}
}
.ct-trigger .ct-ico svg{animation:ctSpawn .5s cubic-bezier(.34,1.56,.64,1) backwards}

@media (prefers-reduced-motion:reduce){
  .ct-ico{transition:none}
  .ct-trigger .ct-ico svg,
  .ct-list.ct-anim li.seen .ct-ico svg,
  .ct-list.ct-anim li.seen.pick .ct-ico svg,
  .ct-list li.pick .ct-ico::after{animation:none}
  .ct-list.ct-anim li[data-value] .ct-ico svg{opacity:1}
  .ct-list li:active .ct-ico{transform:none}
}

/* ---------- ไอคอนส่วนอื่น (ตราชั่งหน้าแรก, Privacy Shield, เมนูบัญชี) ในกรอบทองบางแบบเดียวกัน ---------- */
.hero-art,.ps-ico,.menu-ico{
  box-sizing:border-box;
  border:var(--ct-bw) solid rgba(var(--ct-gold),.5) !important;
  background:linear-gradient(160deg,#242a35,#191d26) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  overflow:visible;
  transition:transform .22s ease,border-color .22s ease;
}
.hero-art{border-radius:var(--ct-radius)}
.ps-ico{width:48px;height:48px;padding:6px;border-radius:15px}
#authLoggedIn .menu-ico,.menu-ico{width:48px;height:48px;flex:0 0 48px;padding:6px;border-radius:15px}
.ps-ico svg,.menu-ico svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.38))}
.menu-item:active .menu-ico,.ps-head:active .ps-ico{transform:translateY(-2px) scale(1.04)}
.hero-art{filter:drop-shadow(0 3px 3px rgba(0,0,0,.2))}
@media (prefers-reduced-motion:reduce){
  .hero-art,.ps-ico,.menu-ico{transition:none}
  .menu-item:active .menu-ico{transform:none}
}

/* ---------- สติกเกอร์ในแถบบน แถบล่าง คลังเอกสาร และเครดิต ---------- */
.brand-logo{width:30px;height:30px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.bn-item svg{width:30px;height:30px;stroke:none;transition:transform .22s ease,filter .22s ease}
.bn-item:not(.is-on) svg{filter:grayscale(.9) brightness(.85) opacity(.7)}
.bn-item.is-on svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));transform:translateY(-2px)}
.vault-badge,.cred-ico,.ph-ico{
  border:var(--ct-bw) solid rgba(var(--ct-gold),.5) !important;
  background:linear-gradient(160deg,#242a35,#191d26) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
.vault-badge svg{width:42px;height:42px}
.cred-ico svg{width:30px;height:30px}
.ph-ico svg{width:30px;height:30px}
#authLoggedIn .cred-card .ws-ico{width:30px;height:30px}
#authLoggedIn .cred-card .ws-ico svg{width:30px;height:30px}
.ld-period svg{width:24px;height:24px}
.ls-cell svg{width:28px;height:28px}
.lib-seg-b svg{width:22px;height:22px}
.brand-logo,.vault-badge svg,.cred-ico svg,.ph-ico svg,.ws-ico svg,.ld-period svg,.ls-cell svg,.lib-seg-b svg{filter:drop-shadow(0 2px 2px rgba(0,0,0,.38))}
@media (prefers-reduced-motion:reduce){.bn-item svg{transition:none;transform:none !important}}

/* ---------- สติกเกอร์รอบ 4: แผนสิทธิ์การใช้งาน, หน้าต่างเติมเครดิต, รูปโปรไฟล์ที่ยังไม่มีรูป ---------- */
.cs-ico,.cs-r-ico,#paymentCard .pay-head-ic,#paymentCard .pkg-ic{
  box-sizing:border-box;
  border:var(--ct-bw) solid rgba(var(--ct-gold),.5) !important;
  background:linear-gradient(160deg,#242a35,#191d26) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  display:grid;place-items:center;
}
.cs-ico{width:56px;height:56px;padding:6px;border-radius:16px;animation:none}
.cs-r-ico{width:48px;height:48px;padding:6px;border-radius:14px}
.cs-ico svg,.cs-r-ico svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.38))}
.cs-fine svg{width:20px;height:20px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
#paymentCard .pay-head-ic{width:58px;height:58px;padding:7px;border-radius:16px}
#paymentCard .pay-head-ic svg{width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.38))}
#paymentCard .pkg-ic{width:46px;height:46px;padding:5px;border-radius:14px}
#paymentCard .pkg-ic svg{width:100%;height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.38))}
#paymentCard .pay-trust b svg{width:22px;height:22px;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
/* รูปโปรไฟล์: ยังไม่มีรูป = สติกเกอร์คนแทนตัวอักษร (มีรูปแล้วซ่อนสติกเกอร์) */
#authLoggedIn .acct-avatar{background:linear-gradient(160deg,#242a35,#191d26) !important}
#authLoggedIn .acct-avatar #acctInitial{display:none}
#authLoggedIn .acct-avatar .acct-sticker{display:block;width:78%;height:78%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
#authLoggedIn .acct-avatar img:not([hidden]) ~ .acct-sticker{display:none}

/* ---------- แอนิเมชันสติกเกอร์ 3 ชั้น (รอบ 5) ----------
   ชั้น 1 Ambient: ลอยช้า ๆ เอียงนิดเดียว วนทุก ~5-7 วินาที (ใช้ translate/rotate แยกจาก transform เดิม)
   ชั้น 2 Light Sweep: แสงวิ่งผ่านกรอบเป็นช่วง ๆ ทุก ~8-10 วินาที
   ชั้น 3 Interactive: กดแล้วย่อ ปล่อยแล้วเด้งกลับ + กรอบทองเรืองตอนเลือก
   ปิดทั้งหมด: ลบบล็อกนี้ · ปิดอัตโนมัติเมื่อผู้ใช้ตั้งลดการเคลื่อนไหว หรือ data-calm */
@media (prefers-reduced-motion:no-preference){
:root:not([data-calm]){
  --fr-sel:1;
}
/* --- ชั้น 1: ลอย --- */
:root:not([data-calm]) .ct-list.ct-anim li.seen .ct-ico svg{
  animation:ctSpawn .5s cubic-bezier(.34,1.56,.64,1) var(--d,0ms) backwards, ctFloat 9s ease-in-out calc(.5s + var(--d,0ms)) infinite;
}
:root:not([data-calm]) .ct-list.ct-anim li.seen.pick .ct-ico svg{
  animation:ctPick .42s cubic-bezier(.34,1.56,.64,1) both, ctFloat 9s ease-in-out .42s infinite;
}
:root:not([data-calm]) .ct-trigger .ct-ico svg{
  animation:ctSpawn .5s cubic-bezier(.34,1.56,.64,1) backwards, ctFloat 9.5s ease-in-out .5s infinite;
}
:root:not([data-calm]) .hero-art svg,
:root:not([data-calm]) .ps-ico svg,
:root:not([data-calm]) .menu-ico svg,
:root:not([data-calm]) .vault-badge svg,
:root:not([data-calm]) .cred-ico svg,
:root:not([data-calm]) .ph-ico svg,
:root:not([data-calm]) .cs-ico svg,
:root:not([data-calm]) .cs-r-ico svg,
:root:not([data-calm]) #paymentCard .pay-head-ic svg,
:root:not([data-calm]) #paymentCard .pkg-ic svg,
:root:not([data-calm]) .bn-item.is-on svg,
:root:not([data-calm]) .brand-logo,
:root:not([data-calm]) .acct-sticker{
  animation:ctFloat 10s ease-in-out var(--ad,0s) infinite;
}
/* กระจายจังหวะไม่ให้ลอยพร้อมกัน */
:root:not([data-calm]) .menu-item:nth-child(2) .menu-ico svg,
:root:not([data-calm]) .bn-item:nth-child(2) svg,
:root:not([data-calm]) #paymentCard .pkg:nth-child(2) .pkg-ic svg,
:root:not([data-calm]) .cs-row:nth-child(2) .cs-r-ico svg{animation-delay:-1.7s}
:root:not([data-calm]) .menu-item:nth-child(3) .menu-ico svg,
:root:not([data-calm]) .bn-item:nth-child(3) svg,
:root:not([data-calm]) #paymentCard .pkg:nth-child(3) .pkg-ic svg{animation-delay:-3.1s}
:root:not([data-calm]) .menu-item:nth-child(4) .menu-ico svg{animation-delay:-4.3s}
:root:not([data-calm]) .menu-item:nth-child(5) .menu-ico svg{animation-delay:-2.4s}
:root:not([data-calm]) .menu-item:nth-child(6) .menu-ico svg{animation-delay:-5.2s}
:root:not([data-calm]) .ct-list li:nth-child(even) .ct-ico svg{animation-delay:0s,-2.2s}
/* เครื่องหมายคำถาม: ส่ายมากกว่าตัวอื่นเล็กน้อย */
:root:not([data-calm]) .ct-list li[data-value="unsure"].seen .ct-ico svg,
:root:not([data-calm]) .ct-trigger[data-value="unsure"] .ct-ico svg{
  animation-name:ctSpawn,ctSway;
  animation-duration:.5s,9s;
}
/* โล่ Privacy Shield: แสงเรืองหายใจเบา ๆ */
:root:not([data-calm]) .ps-ico svg,
:root:not([data-calm]) .cs-ico svg{
  animation:ctFloat 10s ease-in-out infinite, ctShieldGlow 8s ease-in-out infinite;
}

/* --- ชั้น 2: แสงวิ่ง --- */
.hero-art,.ps-ico,.menu-ico,.vault-badge,.cred-ico,.ph-ico,.cs-ico,.cs-r-ico,
#paymentCard .pay-head-ic,#paymentCard .pkg-ic{position:relative;overflow:hidden}
.hero-art::after,.ps-ico::after,.menu-ico::after,.vault-badge::after,.cred-ico::after,.ph-ico::after,
.cs-ico::after,.cs-r-ico::after,#paymentCard .pay-head-ic::after,#paymentCard .pkg-ic::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 38%,rgba(210,212,215,.28) 50%,transparent 62%);
  transform:translateX(-130%);
}
:root:not([data-calm]) .ct-ico::after,
:root:not([data-calm]) .hero-art::after,
:root:not([data-calm]) .ps-ico::after,
:root:not([data-calm]) .menu-ico::after,
:root:not([data-calm]) .vault-badge::after,
:root:not([data-calm]) .cred-ico::after,
:root:not([data-calm]) .ph-ico::after,
:root:not([data-calm]) .cs-ico::after,
:root:not([data-calm]) .cs-r-ico::after,
:root:not([data-calm]) #paymentCard .pay-head-ic::after,
:root:not([data-calm]) #paymentCard .pkg-ic::after{
  animation:ctGlint 18s ease-in-out var(--gd,0s) infinite;
}
:root:not([data-calm]) .ct-list li.pick .ct-ico::after{animation:ctSweep .55s ease-out 1}
:root:not([data-calm]) .ct-list li:nth-child(2) .ct-ico::after,
:root:not([data-calm]) .menu-item:nth-child(2) .menu-ico::after,
:root:not([data-calm]) #paymentCard .pkg:nth-child(2) .pkg-ic::after{--gd:-2.4s}
:root:not([data-calm]) .ct-list li:nth-child(3) .ct-ico::after,
:root:not([data-calm]) .menu-item:nth-child(3) .menu-ico::after,
:root:not([data-calm]) #paymentCard .pkg:nth-child(3) .pkg-ic::after{--gd:-4.8s}
:root:not([data-calm]) .ct-list li:nth-child(4) .ct-ico::after,
:root:not([data-calm]) .menu-item:nth-child(4) .menu-ico::after{--gd:-6.9s}
:root:not([data-calm]) .ct-list li:nth-child(5) .ct-ico::after,
:root:not([data-calm]) .menu-item:nth-child(5) .menu-ico::after{--gd:-1.1s}
:root:not([data-calm]) .ct-list li:nth-child(6) .ct-ico::after,
:root:not([data-calm]) .menu-item:nth-child(6) .menu-ico::after{--gd:-3.6s}
:root:not([data-calm]) .ct-list li:nth-child(7) .ct-ico::after{--gd:-5.7s}
:root:not([data-calm]) .ct-list li:nth-child(8) .ct-ico::after{--gd:-7.8s}
:root:not([data-calm]) .ct-list li:nth-child(9) .ct-ico::after{--gd:-8.5s}

/* --- ชั้น 3: ตอบสนองการแตะ --- */
.ct-ico svg,.ps-ico svg,.menu-ico svg,.cs-r-ico svg,.cs-ico svg,.hero-art svg,
#paymentCard .pkg-ic svg,#paymentCard .pay-head-ic svg,.acct-sticker{
  transition:scale .2s cubic-bezier(.34,1.56,.64,1);
}
.ct-list li:active .ct-ico svg,.ct-trigger:active .ct-ico svg,
.menu-item:active .menu-ico svg,.ps-head:active .ps-ico svg,
#paymentCard #packageButtons .pkg:active .pkg-ic svg,
#authLoggedIn .acct-avatar:active .acct-sticker,.hero-art:active svg{scale:.9}
#paymentCard #packageButtons .pkg{transition:background .2s ease,border-color .2s ease,box-shadow .25s ease,transform .15s ease}
#paymentCard #packageButtons .pkg.is-selected .pkg-ic{
  border-color:rgb(var(--ct-gold)) !important;
  box-shadow:0 0 0 1px rgba(var(--ct-gold),.35),0 0 16px rgba(var(--ct-gold),.4),0 6px 14px rgba(0,0,0,.35);
}
#paymentCard #packageButtons .pkg.is-selected .pkg-ic svg{animation:ctPick .42s cubic-bezier(.34,1.56,.64,1) both, ctFloat 9s ease-in-out .42s infinite}
}
@keyframes ctFloat{
  0%,100%{translate:0 0;rotate:-1deg}
  50%{translate:0 -1.6px;rotate:1deg}
}
@keyframes ctSway{
  0%,100%{translate:0 0;rotate:-2.5deg}
  50%{translate:0 -2px;rotate:2.5deg}
}
@keyframes ctGlint{
  0%,82%{transform:translateX(-130%)}
  100%{transform:translateX(130%)}
}
@keyframes ctShieldGlow{
  0%,100%{filter:drop-shadow(0 2px 2px rgba(0,0,0,.38))}
  50%{filter:drop-shadow(0 2px 2px rgba(0,0,0,.38)) drop-shadow(0 0 6px rgba(80,225,205,.55))}
}

/* ---------- สติกเกอร์ขยับจริง รอบ 6: ตราชั่งแกว่ง / ? เด้ง / โล่เอียง+วาดถูก / เอกสารพลิกมุม+เส้นปรากฏ ---------- */
@media (prefers-reduced-motion:no-preference){
:root:not([data-calm]) .st-beam,
:root:not([data-calm]) .st-pan,
:root:not([data-calm]) .st-q,
:root:not([data-calm]) .st-sh,
:root:not([data-calm]) .st-shield,
:root:not([data-calm]) .st-corner,
:root:not([data-calm]) .st-ln{transform-box:view-box}
/* ตราชั่ง: คานเอียงซ้ายขวา ~5 องศา ถาดสวนกันเล็กน้อย กลับสู่สมดุลแล้วหยุดพัก */
:root:not([data-calm]) .st-beam{transform-origin:32px 19.5px;animation:ctBeam 12s ease-in-out infinite}
:root:not([data-calm]) .st-pl{transform-origin:12px 22px;animation:ctPanL 12s ease-in-out infinite}
:root:not([data-calm]) .st-pr{transform-origin:52px 22px;animation:ctPanR 12s ease-in-out infinite}
/* เครื่องหมายคำถาม: เด้งเป็นช่วง ๆ เอียงซ้ายขวา เงาหดขยายตามจังหวะ */
:root:not([data-calm]) .st-q{transform-origin:32px 56px;animation:ctQHop 10s ease-in-out infinite}
:root:not([data-calm]) .st-sh{transform-origin:32px 58.5px;animation:ctQShadow 10s ease-in-out infinite}
/* โล่: เอียงและย่อขยายนุ่ม ๆ + วาดเครื่องหมายถูกเมื่อปรากฏ/เปิดใช้งาน */
:root:not([data-calm]) .st-shield{transform-origin:32px 34px;animation:ctShieldTilt 10s ease-in-out infinite}
:root:not([data-calm]) .st-check{stroke-dasharray:1;animation:ctCheckDraw .8s ease-out .25s both}
:root:not([data-calm]) .ps-ico.st-redraw .st-check{animation:ctCheckDraw .8s ease-out both}
/* เอกสาร: มุมกระดาษยกคล้ายพลิก เส้นข้อความปรากฏทีละเส้น */
:root:not([data-calm]) .st-corner{transform-origin:37px 20px;animation:ctCorner 12s ease-in-out infinite}
:root:not([data-calm]) .st-ln{transform-box:fill-box;transform-origin:0 50%;animation:ctLine 18s ease-out infinite both}
:root:not([data-calm]) .st-ln:nth-of-type(2){animation-delay:.25s}
:root:not([data-calm]) .st-ln:nth-of-type(3){animation-delay:.5s}
:root:not([data-calm]) .ct-list li.pick .st-corner{animation:ctCornerPop .6s ease-out 1}
}
@keyframes ctBeam{
  0%,86%,100%{transform:rotate(0)}
  16%{transform:rotate(3.5deg)}
  38%{transform:rotate(-3.5deg)}
  56%{transform:rotate(2deg)}
  72%{transform:rotate(-.8deg)}
}
@keyframes ctPanL{
  0%,86%,100%{transform:rotate(0)}
  16%{transform:rotate(-5deg)}
  38%{transform:rotate(4.5deg)}
  56%{transform:rotate(-3deg)}
  72%{transform:rotate(1.2deg)}
}
@keyframes ctPanR{
  0%,86%,100%{transform:rotate(0)}
  16%{transform:rotate(-1.5deg)}
  38%{transform:rotate(2deg)}
  56%{transform:rotate(-2.5deg)}
  72%{transform:rotate(1deg)}
}
@keyframes ctQHop{
  0%,52%,100%{transform:none}
  58%{transform:translateY(1px) scale(1.04,.94)}
  68%{transform:translateY(-5px) rotate(-5deg) scale(.98,1.03)}
  78%{transform:translateY(0) rotate(3.5deg) scale(1.04,.95)}
  88%{transform:rotate(-1.5deg)}
}
@keyframes ctQShadow{
  0%,52%,100%{transform:none}
  58%{transform:scale(1.08,1)}
  68%{transform:scale(.7,.8)}
  78%{transform:scale(1.14,1.05)}
  88%{transform:scale(.97)}
}
@keyframes ctShieldTilt{
  0%,100%{transform:rotate(-2deg) scale(1)}
  50%{transform:rotate(2deg) scale(1.04)}
}
@keyframes ctCheckDraw{
  from{stroke-dashoffset:1}
  to{stroke-dashoffset:0}
}
@keyframes ctCorner{
  0%,58%,100%{transform:none}
  70%{transform:translate(-1.2px,1.2px) rotate(-7deg) scale(1.08)}
  84%{transform:translate(-.3px,.3px) rotate(-1.5deg)}
}
@keyframes ctCornerPop{
  0%{transform:none}
  40%{transform:translate(-2px,2px) rotate(-14deg) scale(1.15)}
  100%{transform:none}
}
@keyframes ctLine{
  0%{transform:scaleX(0)}
  8%,100%{transform:scaleX(1)}
}

/* ---------- รอบ 7: สติกเกอร์ประเภทสัญญา + ทำให้ช้าลง (แต่ละชิ้นขยับสั้น ๆ แล้วนิ่งนาน คนละจังหวะ) ---------- */
@media (prefers-reduced-motion:no-preference){
:root:not([data-calm]) .st-roof,
:root:not([data-calm]) .st-cart,
:root:not([data-calm]) .st-handle,
:root:not([data-calm]) .st-wrench,
:root:not([data-calm]) .st-coin,
:root:not([data-calm]) .st-slice,
:root:not([data-calm]) .st-shackle{transform-box:view-box}
:root:not([data-calm]) .st-roof{animation:ctRoof 14s ease-in-out -2s infinite}
:root:not([data-calm]) .st-cart{animation:ctCart 14s ease-in-out -5s infinite}
:root:not([data-calm]) .st-handle{animation:ctHandle 14s ease-in-out -8s infinite}
:root:not([data-calm]) .st-wrench{transform-origin:32px 32px;animation:ctWrench 14s ease-in-out -11s infinite}
:root:not([data-calm]) .st-coin{animation:ctCoin 14s ease-in-out -3s infinite}
:root:not([data-calm]) .st-coin.c2{animation-delay:-2.85s}
:root:not([data-calm]) .st-coin.c1{animation-delay:-2.7s}
:root:not([data-calm]) .st-slice{animation:ctSlice 14s ease-in-out -6s infinite}
:root:not([data-calm]) .st-shackle{transform-origin:21px 30px;animation:ctShackle 14s ease-in-out -9s infinite}
}
@keyframes ctRoof{0%,60%,100%{transform:none}68%{transform:translateY(-2px)}76%{transform:translateY(.4px)}84%{transform:none}}
@keyframes ctCart{0%,55%,100%{transform:none}65%{transform:translateX(2px)}75%{transform:translateX(-1px)}85%{transform:none}}
@keyframes ctHandle{0%,60%,100%{transform:none}68%{transform:translateY(-2px)}78%{transform:none}}
@keyframes ctWrench{0%,58%,100%{transform:none}66%{transform:rotate(-8deg)}76%{transform:rotate(4deg)}86%{transform:none}}
@keyframes ctCoin{0%,60%,100%{transform:none}68%{transform:translateY(-2.5px)}77%{transform:none}}
@keyframes ctSlice{0%,56%,100%{transform:none}66%{transform:translate(2px,-2px)}80%{transform:none}}
@keyframes ctShackle{0%,58%,100%{transform:none}68%{transform:translateY(-2.5px) rotate(-7deg)}80%{transform:none}}

/* ---------- รอบ 8: จังหวะตามไอคอน (บ้านเด้ง+เงา, รถเข็นสะดุ้ง, กระเป๋ายกแล้วกระแทก, กองเหรียญยุบ-เด้ง, พายขยาย, แม่กุญแจเด้ง, เอกสารเอียง) + ตอบสนองเมื่อเลือกการ์ด ---------- */
@media (prefers-reduced-motion:no-preference){
:root:not([data-calm]) .st-house,:root:not([data-calm]) .st-bag,:root:not([data-calm]) .st-lockbody,
:root:not([data-calm]) .st-pie,:root:not([data-calm]) .st-docbody,:root:not([data-calm]) .st-gsh{transform-box:view-box}
:root:not([data-calm]) .st-roof{animation:none}
:root:not([data-calm]) .st-house{transform-origin:32px 55px;animation:ctHouse 14s ease-in-out -2s infinite}
:root:not([data-calm]) .ct-list li[data-value="rent"] .st-gsh,:root:not([data-calm]) .ct-trigger[data-value="rent"] .st-gsh{transform-origin:32px 55.5px;animation:ctGsh 14s ease-in-out -2s infinite}
:root:not([data-calm]) .st-cart{transform-origin:32px 50px;animation:ctCart 14s ease-in-out -5s infinite}
:root:not([data-calm]) .st-bag{transform-origin:32px 54px;animation:ctBag 14s ease-in-out -8s infinite}
:root:not([data-calm]) .st-handle{transform-origin:32px 21px;animation:ctHandle 14s ease-in-out -7.8s infinite}
:root:not([data-calm]) .st-coin{transform-origin:32px 56px;animation:ctCoin 14s ease-in-out -3s infinite}
:root:not([data-calm]) .st-coin.c3{transform-origin:32px 30px;animation-name:ctCoinTop}
:root:not([data-calm]) .st-pie{transform-origin:31px 36px;animation:ctPie 14s ease-in-out -6s infinite}
:root:not([data-calm]) .st-lockbody{transform-origin:32px 55px;animation:ctLockBody 14s ease-in-out -9s infinite}
:root:not([data-calm]) .st-docbody{transform-origin:32px 56px;animation:ctDocTilt 14s ease-in-out -4s infinite}
/* เงาใต้ชิ้นที่ลอย/เด้ง หดตามจังหวะ */
:root:not([data-calm]) .ct-list li[data-value="employment"] .st-gsh{animation:ctGsh 14s ease-in-out -8s infinite}
:root:not([data-calm]) .ct-list li[data-value="nda"] .st-gsh{animation:ctGsh 14s ease-in-out -9s infinite}
:root:not([data-calm]) .ct-list li[data-value="other"] .st-gsh{animation:ctGsh 14s ease-in-out -4s infinite}
:root:not([data-calm]) .st-gsh{transform-origin:32px 58.5px}
/* เมื่อแตะเลือกการ์ด: ตอบสนองสั้น ๆ ครั้งเดียว */
:root:not([data-calm]) .ct-list li.pick .st-wrench{animation:ctWrenchPick .8s ease-out 1}
:root:not([data-calm]) .ct-list li.pick .st-slice{animation:ctSlicePick .7s cubic-bezier(.34,1.56,.64,1) 1}
:root:not([data-calm]) .ct-list li.pick .st-shackle{animation:ctShacklePick .6s cubic-bezier(.34,1.56,.64,1) 1}
:root:not([data-calm]) .ct-list li.pick .st-house{animation:ctHouse2 .6s ease-out 1}
}
@keyframes ctHouse{0%,60%,100%{transform:none}66%{transform:translateY(-3px) rotate(-2deg)}74%{transform:translateY(0) rotate(1.5deg)}82%{transform:rotate(-.6deg)}90%{transform:none}}
@keyframes ctHouse2{0%{transform:none}40%{transform:translateY(-4px) rotate(-2deg)}100%{transform:none}}
@keyframes ctGsh{0%,60%,100%{transform:none}66%{transform:scale(.85)}74%{transform:scale(1.06)}90%{transform:none}}
@keyframes ctCart{0%,55%,100%{transform:none}65%{transform:translateX(2.2px)}75%{transform:translateX(-.8px) rotate(-1.2deg)}82%{transform:rotate(.8deg)}90%{transform:none}}
@keyframes ctBag{0%,60%,100%{transform:none}68%{transform:translateY(-2px)}76%{transform:translateY(1px) scale(1.02,.97)}84%{transform:none}}
@keyframes ctHandle{0%,60%,100%{transform:none}68%{transform:translateY(-1.5px) rotate(-3deg)}74%{transform:rotate(3deg)}80%{transform:rotate(-1.5deg)}88%{transform:none}}
@keyframes ctCoin{0%,58%,100%{transform:none}64%{transform:translateY(1px) scale(1.02,.96)}72%{transform:translateY(-2px)}80%{transform:none}}
@keyframes ctCoinTop{0%,58%,100%{transform:none}64%{transform:translateY(1px) scale(1.02,.96)}72%{transform:translateY(-3px) rotate(-4deg)}80%{transform:rotate(2deg)}88%{transform:none}}
@keyframes ctPie{0%,56%,100%{transform:none}66%{transform:scale(1.04)}80%{transform:none}}
@keyframes ctLockBody{0%,58%,100%{transform:none}68%{transform:translateY(-1.5px)}76%{transform:translateY(.5px)}84%{transform:none}}
@keyframes ctShackle{0%,58%,100%{transform:none}64%{transform:rotate(-2deg)}68%{transform:translateY(-2.5px) rotate(-7deg)}72%{transform:translateY(-2.5px) rotate(-4deg)}80%{transform:none}}
@keyframes ctDocTilt{0%,56%,100%{transform:none}66%{transform:rotate(-4deg) skewY(-2deg)}80%{transform:none}}
@keyframes ctWrenchPick{0%{transform:none}55%{transform:rotate(28deg)}100%{transform:none}}
@keyframes ctSlicePick{0%{transform:translate(3px,-3px)}100%{transform:none}}
@keyframes ctShacklePick{0%{transform:translateY(-4px)}100%{transform:none}}