/* Shieldfall · แมวออกสำรวจ (catgo.js) — หน้าต่างสมุดภาพ C + การ์ดโปสการ์ด A · ภาพทั้งหมด cge-* เจน · CSS จัดตำแหน่งเท่านั้น · ตัวอักษร cqw ของหน้ากระดาษ/การ์ด */
#b-pet.cg-dot::after { content: ''; position: absolute; right: 4px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #e23b2a; box-shadow: 0 0 0 2px #fff; }

/* ---------- หน้าต่างสมุด: จอแนวนอน = 2 หน้า (3:2) · จอแนวตั้ง = ทีละหน้า (3:4) พลิกด้วยปุ่มใต้สมุด ---------- */
#cgb { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; box-sizing: border-box; background: rgba(12, 8, 22, .78); font-family: Mitr, sans-serif; user-select: none; -webkit-user-select: none; }
#cgb[hidden] { display: none; }
#cgb button { border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#cgb img { max-width: none; max-height: none; pointer-events: none; }
.cgb-w { position: relative; flex: none; width: min(100%, calc((100dvh - 16px) * 1.5), 1500px); aspect-ratio: 3 / 2; background: url(img/cge-bg.webp) 0 0 / 100% 100% no-repeat; animation: cg-open .42s cubic-bezier(.3, 1.4, .5, 1); color: #4a2a10; line-height: 1.25; }
@keyframes cg-open { from { transform: scale(.86) translateY(18px); opacity: 0; } }
.cgb-w .cg-x { position: absolute; right: .4%; top: .6%; width: 5%; z-index: 9; pointer-events: auto; cursor: pointer; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.cg-pg { position: absolute; top: 0; bottom: 0; width: 50%; }
.cg-L { left: 0; } .cg-R { left: 50%; }
.cg-in { position: absolute; container-type: inline-size; }
.cg-L .cg-in { left: 13.5%; right: 6%; top: 7.5%; bottom: 10%; }
.cg-R .cg-in { left: 6%; right: 13.5%; top: 7.5%; bottom: 10%; }
.cg-in > * { position: absolute; }
.cg-fit { display: block; overflow: hidden; white-space: nowrap; padding-block: .24em .12em; } /* ไม่เว้นบน = สระบน+วรรณยุกต์ (ที่ นี่) ถูกตัด */
.cg-flip { display: none; position: relative; flex: none; width: min(62vw, 250px); aspect-ratio: 2.9; }
.cg-flip img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-flip span { position: relative; display: grid; place-items: center; height: 100%; color: #5a3410; font: 700 15px Mitr, sans-serif; text-shadow: 0 1px 0 #fff3c0; }
@media (max-aspect-ratio: 1 / 1) {
  .cgb-w { width: min(100%, calc((100dvh - 90px) * .75)); aspect-ratio: 3 / 4; background-size: 200% 100%; }
  .cgb-w.cg-pR { background-position: 100% 0; }
  .cg-pg { left: 0; width: 100%; } .cgb-w.cg-pL .cg-R, .cgb-w.cg-pR .cg-L { display: none; }
  .cgb-w .cg-x { width: 10%; right: -1%; top: -1%; }
  .cg-flip { display: block; }
}

/* หัวหน้ากระดาษ */
.cg-hd { left: 4%; right: 4%; top: 0; aspect-ratio: 5; }
.cg-hd img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-hd b { position: absolute; left: 16%; right: 16%; top: 22%; bottom: 26%; display: grid; place-items: center; color: #ffd75a; font-size: 5cqw; font-weight: 800; text-shadow: 0 .3cqw 0 #10183a, 0 0 1.2cqw rgba(255, 200, 80, .45); }
.cg-foot { left: 0; right: 0; bottom: 0; text-align: center; font-size: 2.6cqw; font-weight: 500; color: #7a5228; }

/* ซ้าย: แมวที่จะส่ง + ช่องออกสำรวจ + รูปแมวที่ออกไป */
.cg-who { left: 0; top: 15%; width: 34%; height: 21%; }
.cg-who .cg-cat { position: absolute; left: 6%; right: 6%; bottom: 22%; height: 74%; width: 88%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 .5cqw #fff) drop-shadow(0 0 .3cqw #fff) drop-shadow(0 .6cqw .6cqw rgba(60, 30, 6, .35)); animation: cg-bob 3s ease-in-out infinite; }
@keyframes cg-bob { 50% { transform: translateY(-2.5%); } }
.cg-nm { position: absolute; left: 4%; right: 4%; bottom: 0; aspect-ratio: 3.53; background: url(img/cge-name.webp) center / 100% 100% no-repeat; }
.cg-nm b { position: absolute; inset: 14% 12%; display: grid; place-items: center; font-size: 3.6cqw; font-weight: 700; color: #5a3410; }
.cg-sw { position: absolute; right: -6%; top: 4%; width: 30%; pointer-events: auto; }
.cg-sw img { width: 100%; filter: drop-shadow(0 .3cqw .4cqw rgba(0, 0, 0, .35)); transition: transform .15s; }
.cg-sw:hover img { transform: rotate(-25deg) scale(1.06); }
.cg-none { position: absolute; inset: 30% 0; display: grid; place-items: center; font-size: 3.4cqw; font-weight: 600; color: #7a5228; white-space: normal; text-align: center; }
.cg-slt { left: 34%; top: 16%; width: 18%; aspect-ratio: 1.09; }
.cg-slt img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-slt b { position: absolute; left: 14%; right: 14%; top: 38%; bottom: 14%; display: grid; place-items: center; text-align: center; white-space: normal; font-size: 3.1cqw; font-weight: 800; line-height: 1.05; color: #6a3a0e; }
.cg-trips { left: 53%; right: 0; top: 12%; height: 26%; }
.cg-tp { --w: calc(100% / (1 + (var(--n) - 1) * .92)); position: absolute; top: calc(var(--i) * 4%); width: var(--w); left: calc(var(--i) * .92 * var(--w)); aspect-ratio: 1.25; transform: rotate(calc(3deg - var(--i) * 5deg)); transform-origin: 50% 90%; pointer-events: auto; transition: transform .15s; }
.cg-tp:hover { transform: rotate(0deg) translateY(-3%); z-index: 3; }
.cg-tp > i { position: absolute; left: 5.3%; top: 13.5%; right: 5.3%; bottom: 22.2%; background: center / cover no-repeat; }
.cg-tp .cg-pf { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-tp .cg-tc { position: absolute; right: 2%; bottom: 22%; height: 52%; filter: drop-shadow(0 0 .3cqw #fff) drop-shadow(0 0 .3cqw #fff); }
.cg-tm { position: absolute; left: 2%; right: 2%; bottom: -4%; aspect-ratio: 3.54; }
.cg-tm img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-tm b { position: absolute; left: 29%; right: 5%; top: 12%; bottom: 12%; display: grid; align-items: center; font-size: calc(2.7cqw / (1 + (var(--n) - 1) * .45)); font-weight: 700; color: #234a8a; }
.cg-tp.cg-dn { animation: cg-dn 1.4s ease-in-out infinite; }
.cg-tp.cg-dn .cg-tm b { color: #1f7a1f; }
.cg-tp.cg-arm .cg-tm b { color: #b23a1e; }
@keyframes cg-dn { 50% { filter: drop-shadow(0 0 1.4cqw rgba(255, 214, 80, .95)); } }

/* ซ้าย: เลือกที่เที่ยว 5 ใบ */
.cg-pls { left: -1%; right: -1%; top: 39.5%; height: 21%; display: flex; justify-content: space-between; }
.cg-pl { position: relative; width: 20%; aspect-ratio: .73; flex: none; align-self: center; transform: rotate(calc((var(--i) - 2) * 2.5deg)); pointer-events: auto; transition: transform .15s; }
.cg-pl:hover { transform: translateY(-4%) rotate(0deg); }
.cg-pl.cg-on { transform: translateY(-5%) scale(1.07); z-index: 2; }
.cg-pl > i { position: absolute; left: 5%; right: 5%; top: 4.3%; bottom: 23.3%; background: center / cover no-repeat; }
.cg-pl > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-pl.cg-on > i { left: 9.2%; right: 9.6%; top: 11.8%; bottom: 27.9%; }
.cg-pl > b { position: absolute; left: 8%; right: 8%; bottom: 4%; height: 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 2.6cqw; font-weight: 700; color: #5a3410; line-height: 1.05; }
.cg-pl > b small { font-size: .82em; font-weight: 500; }
.cg-pl.cg-lk > i { filter: grayscale(.6) brightness(.6); }
.cg-pl .cg-lki { inset: auto; left: 30%; top: 22%; width: 40%; height: auto; }
.cg-pl .cg-ti { inset: auto; right: -6%; top: -5%; width: 30%; height: auto; }

/* ซ้าย: เวลา 3 ช่อง */
.cg-chs { left: 0; right: 0; top: 62.5%; display: flex; justify-content: space-between; }
.cg-ch { position: relative; width: 32%; aspect-ratio: 2.88; pointer-events: auto; transition: transform .12s; }
.cg-ch:hover { transform: translateY(-3%); }
.cg-ch .cg-cb { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-ch .cg-hg { position: absolute; left: 4%; top: 6%; height: 88%; }
.cg-ch > b { position: absolute; left: 36%; right: 6%; top: 10%; bottom: 10%; display: flex; flex-direction: column; justify-content: center; font-size: 3.6cqw; font-weight: 800; color: #4a2a10; line-height: 1.05; }
.cg-ch > b small { font-size: .62em; font-weight: 600; color: #7a5228; }
.cg-more { left: 0; right: 0; top: 72.5%; text-align: center; font-size: 2.6cqw; font-weight: 600; color: #8a5a20; }

/* ซ้าย: ปุ่มส่ง + ของที่มีโอกาสได้ */
.cg-go { left: 10%; right: 10%; top: 76%; aspect-ratio: 4.57; pointer-events: auto; transition: transform .12s, filter .12s; }
.cg-go:hover { transform: scale(1.03); filter: brightness(1.06); }
.cg-go:active { transform: scale(.97); }
.cg-go img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-go b { position: absolute; left: 13%; right: 13%; top: 16%; bottom: 22%; display: grid; place-items: center; font-size: 5.2cqw; font-weight: 800; color: #fff; text-shadow: 0 .3cqw 0 #1f6a12, 0 0 .6cqw #1f6a12; }
.cg-go.cg-off img { filter: grayscale(1) brightness(.85); }
.cg-go.cg-off b { font-size: 3.4cqw; text-shadow: 0 .2cqw 0 #444; }
.cg-rwl { left: 0; right: 0; top: 88%; height: 8.4%; display: flex; align-items: center; justify-content: space-between; gap: 1%; }
.cg-rwl > span { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.cg-rwl > span img { height: 62%; }
.cg-rwl > span b { width: 100%; text-align: center; font-size: 2.1cqw; font-weight: 600; color: #5a3410; }
.cg-rwl .cg-mini { flex: 1.5; justify-content: center; }
.cg-rwl .cg-mini img { position: absolute; inset: 18% 0; width: 100%; height: 64%; }
.cg-rwl .cg-mini b { position: absolute; left: 16%; right: 8%; top: 30%; bottom: 30%; display: grid; place-items: center; color: #5a3410; font-size: 2.4cqw; font-weight: 800; }
.cg-L .cg-foot { bottom: -.6%; }

/* ขวา: สมุดโปสการ์ด 5 แถว */
.cg-rows { left: 0; right: 0; top: 12%; bottom: 5.5%; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 1%; }
.cg-row { position: relative; min-height: 0; display: grid; grid-template-columns: 22.5cqw 22.5cqw 19.5cqw minmax(0, 1fr); align-items: end; column-gap: 2.6cqw; padding-top: 7.4cqw; }
.cg-row.cg-lk > :not(.cg-rr) { opacity: .5; }
.cg-rr { position: absolute; left: 0; top: 0; width: 56%; aspect-ratio: 7.3; }
.cg-rr > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-rr .cg-lki { inset: auto; left: -2%; top: -15%; width: auto; height: 125%; }
.cg-rr b { position: absolute; left: 8%; right: 14%; top: 12%; bottom: 16%; display: grid; align-items: center; font-size: 3cqw; font-weight: 700; color: #fff5d8; text-shadow: 0 .2cqw 0 rgba(60, 20, 0, .7); }
.cg-row.cg-lk .cg-rr b { padding-left: 6%; }
.cg-sl { position: relative; width: 100%; aspect-ratio: 1.55; pointer-events: auto; transition: transform .15s; }
.cg-sl.cg-r { aspect-ratio: 1.35; }
.cg-sl:hover { transform: scale(1.05) rotate(-1.5deg); z-index: 2; }
.cg-sl > i { position: absolute; left: 5%; right: 5%; top: 16.6%; bottom: 7.8%; background: center / cover no-repeat; }
.cg-sl:not(.cg-has) > i { filter: sepia(1) saturate(.5) brightness(1.08) blur(1.5px); opacity: .45; }
.cg-sl.cg-r > i { left: 10%; right: 10%; top: 16.5%; bottom: 18.1%; }
.cg-sl > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-sl .cg-q { inset: auto; left: 36%; top: 22%; width: 28%; height: auto; }
.cg-sl.cg-r .cg-q { top: 16%; }
.cg-sl.cg-r > b { position: absolute; left: 33%; right: 20%; bottom: 4%; height: 13%; display: grid; place-items: center; font-size: 1.8cqw; font-weight: 700; color: #ffe08a; }
.cg-sl.cg-has.cg-r { animation: cg-rare 2.4s ease-in-out infinite; }
@keyframes cg-rare { 50% { filter: drop-shadow(0 0 1cqw rgba(255, 210, 80, .9)); } }
.cg-tkt { position: relative; height: 14.5cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqw; }
.cg-tkt > img { width: 12cqw; filter: grayscale(.4) brightness(.92); }
.cg-row.cg-set .cg-tkt > img { filter: drop-shadow(0 0 1cqw rgba(255, 214, 80, .95)); animation: cg-dn 1.8s ease-in-out infinite; }
.cg-tkt > b { width: 100%; text-align: center; white-space: normal; font-size: 2.7cqw; font-weight: 600; color: #6a4420; line-height: 1.1; }
.cg-tkt .cg-ok { position: absolute; left: -4%; right: -4%; top: 30%; aspect-ratio: 2.5; transform: rotate(-10deg); }
.cg-tkt .cg-ok img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-tkt .cg-ok b { position: absolute; inset: 14% 10%; display: grid; place-items: center; font-size: 2.6cqw; font-weight: 800; color: #c62a1e; }

/* ---------- การ์ดโปสการ์ด (คอนเซ็ป A) · กรอบ cge-rframe 4:5 ---------- */
#cgo { position: fixed; inset: 0; z-index: 62; display: grid; place-items: center; padding: 8px; box-sizing: border-box; background: rgba(12, 8, 22, .74); font-family: Mitr, sans-serif; user-select: none; -webkit-user-select: none; }
#cgo[hidden] { display: none; }
#cgo button { border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#cgo img { max-width: none; max-height: none; }
.cgc { position: relative; width: min(100%, calc((100dvh - 16px) * .796), 600px); aspect-ratio: 1120 / 1407; container-type: inline-size; background: url(img/cge-rframe.webp) 0 0 / 100% 100% no-repeat; color: #4a2a10; line-height: 1.25; animation: cgo-in .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes cgo-in { from { transform: translateY(40px) rotate(-4deg) scale(.82); opacity: 0; } }
.cgc > * { position: absolute; }
.cgc .cg-cx { right: -1%; top: 9%; width: 10%; cursor: pointer; z-index: 6; filter: drop-shadow(0 .3cqw .4cqw rgba(0, 0, 0, .4)); }
.cgc .cg-tt { left: 26%; right: 26%; top: 8%; height: 5.4%; display: grid; place-items: center; }
.cgc .cg-tt b { max-width: 100%; color: #ffd75a; font-size: 5.6cqw; font-weight: 800; text-shadow: 0 .35cqw 0 #10183a, 0 0 1.2cqw rgba(255, 200, 80, .5); }
.cgc .cg-st { left: 34%; right: 34%; top: 14.6%; height: 3.5%; display: grid; place-items: center; }
.cgc .cg-st b { max-width: 100%; font-size: 3.3cqw; font-weight: 700; color: #5a3410; }
/* โปสการ์ด */
.cg-pc { left: 12%; right: 12%; top: 20%; aspect-ratio: 1.55; transform: rotate(-2.2deg); animation: cg-pcin .7s .1s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes cg-pcin { from { transform: rotate(-12deg) scale(.6) translateY(-20%); opacity: 0; } }
.cg-pc > * { position: absolute; }
.cg-pc .cg-ph { left: 2.8%; right: 2.7%; top: 4.2%; bottom: 31%; background: center / cover no-repeat; }
.cg-pc .cg-pp { inset: 0; width: 100%; height: 100%; }
.cg-psm { right: 4.5%; top: 7%; width: 13%; aspect-ratio: .826; transform: rotate(4deg); }
.cg-psm > i { position: absolute; left: 10.5%; right: 10.5%; top: 9.9%; bottom: 30.2%; background: center / cover no-repeat; }
.cg-psm img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-psm b { position: absolute; left: 12%; right: 12%; bottom: 8%; height: 18%; display: grid; place-items: center; font-size: 1.9cqw; font-weight: 700; color: #5a3410; }
.cg-pmk { right: 14%; top: 11%; width: 24%; aspect-ratio: 1.58; transform: rotate(-12deg); opacity: .9; }
.cg-pmk img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-pmk b { position: absolute; left: 36%; right: 6%; top: 14%; bottom: 14%; display: grid; place-items: center; text-align: center; font-size: 2.2cqw; font-weight: 800; line-height: 1.1; color: #3a1e0c; }
.cg-nt { left: 5%; right: 32%; bottom: 3%; height: 27%; margin: 0; display: flex; flex-direction: column; justify-content: center; white-space: normal; font-size: 4.1cqw; font-weight: 500; line-height: 1.2; color: #5a3410; transform: rotate(-1deg); }
.cg-nt small { display: block; margin-top: .3em; padding-left: 30%; font-size: .72em; font-weight: 500; color: #7a5228; }
.cg-nt small img { height: 1em; vertical-align: -.1em; }
.cg-ck { right: -2%; bottom: -3%; width: 29%; filter: drop-shadow(0 0 .45cqw #fff) drop-shadow(0 0 .45cqw #fff) drop-shadow(0 .8cqw .8cqw rgba(40, 20, 6, .45)); animation: cg-ck .6s .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes cg-ck { from { transform: translateY(30%) scale(.5); opacity: 0; } }
.cg-pc .cg-new { left: -5%; top: -3%; width: 30%; aspect-ratio: 2.79; transform: rotate(-12deg); background: url(img/cge-newrib.webp) center / 100% 100% no-repeat; animation: cg-ck .5s .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.cg-pc .cg-new b { position: absolute; inset: 16% 14% 26%; display: grid; place-items: center; color: #fff; font-size: 4cqw; font-weight: 800; text-shadow: 0 .25cqw 0 #7a120a; }
.cg-pc .cg-new.cg-r { filter: hue-rotate(38deg) saturate(1.2) brightness(1.1); }
/* ของที่ได้ */
.cg-rws { left: 7%; right: 7%; top: 59.6%; height: 13%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2%; background: url(img/cge-band.webp) center 62% / 112% 70% no-repeat; }
.cg-rw { position: relative; animation: cg-ck .45s calc(.8s + var(--i) * .12s) cubic-bezier(.3, 1.6, .5, 1) both; }
.cg-rw .cg-ri { position: absolute; left: 50%; top: -6%; height: 36%; transform: translateX(-50%); filter: drop-shadow(0 .4cqw .4cqw rgba(60, 30, 6, .35)); }
.cg-rl { position: absolute; left: 13%; right: 13%; top: 25%; aspect-ratio: 3.77; z-index: 1; background: url(img/cge-lbl.webp) center / 100% 100% no-repeat; }
.cg-rl b { position: absolute; inset: 4% 10%; display: grid; place-items: center; color: #ffe9b8; font-size: 2.3cqw; font-weight: 700; }
.cg-rv { position: absolute; left: 5%; right: 5%; bottom: 0; aspect-ratio: 2.86; background: url(img/cge-val.webp) center / 100% 100% no-repeat; }
.cg-rv b { position: absolute; inset: 10% 8%; display: grid; place-items: center; color: #3a220c; font-size: 3.9cqw; font-weight: 800; }
.cg-lvb { position: absolute; right: -12%; top: -18%; width: 50%; aspect-ratio: 1.52; z-index: 2; background: url(img/cge-lvb.webp) center / 100% 100% no-repeat; animation: cg-lv 1.2s 1.3s ease-in-out infinite; }
.cg-lvb b { position: absolute; inset: 22% 12%; display: grid; place-items: center; color: #fff; font-size: 3cqw; font-weight: 800; text-shadow: 0 .2cqw 0 #8a1208; }
@keyframes cg-lv { 50% { transform: scale(1.1) rotate(-4deg); } }
/* ชุดของที่นี้ */
.cgc > .cg-set { left: 13%; right: 13%; top: 73.2%; aspect-ratio: 3.8; background: url(img/cge-setp.webp) center / 100% 100% no-repeat; }
.cg-sh { position: absolute; left: 20%; right: 20%; top: 1.5%; height: 15%; display: grid; place-items: center; }
.cg-sh b { max-width: 100%; font-size: 2.9cqw; font-weight: 700; color: #5a3410; }
.cg-sr { position: absolute; left: 7%; right: 6%; top: 25%; height: 48%; display: flex; align-items: center; justify-content: space-between; }
.cg-ss { position: relative; height: 100%; aspect-ratio: 1.06; flex: none; }
.cg-ss > i { position: absolute; z-index: 1; left: 15%; right: 15%; top: 15%; bottom: 15%; background: center / cover no-repeat; }
.cg-ss > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-ss .cg-ok { inset: auto; z-index: 2; right: -14%; bottom: -12%; width: 40%; height: auto; }
.cg-ss.cg-new { animation: cg-ck .5s 1.4s cubic-bezier(.3, 1.6, .5, 1) both; }
.cg-sr > i.cg-sl { flex: 1; height: 6%; margin: 0 1.5%; background: url(img/cge-bar.webp) center / 100% 100% no-repeat; opacity: .6; }
.cg-sr .cg-ar { height: 34%; margin: 0 2% 0 3%; }
.cg-sr .cg-tk { height: 92%; filter: grayscale(.5) brightness(.9); }
.cg-sr .cg-tk.cg-on { filter: drop-shadow(0 0 1.2cqw rgba(255, 214, 80, 1)); animation: cg-lv 1.2s ease-in-out infinite; }
.cg-bar { position: absolute; left: 7%; right: 25%; bottom: 8%; height: 10%; background: url(img/cge-bar.webp) center / 100% 100% no-repeat; }
.cg-bar i { position: absolute; left: 1.2%; top: 18%; bottom: 18%; max-width: 97.6%; background: url(img/cge-barfill.webp) left center / auto 100% no-repeat; transition: width .6s 1.2s; }
/* ปุ่ม */
#cgo .cg-bs, #cgo .cg-bk { top: 89.2%; height: 6.4%; display: flex; align-items: center; justify-content: center; gap: 3%; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; transition: transform .12s, filter .12s; }
#cgo .cg-bs { left: 13%; width: 30%; background-image: url(img/cge-bshare.webp); }
#cgo .cg-bk { left: 46%; width: 41%; background-image: url(img/cge-bkeep.webp); }
.cgc .cg-bs:hover, .cgc .cg-bk:hover { transform: scale(1.04); filter: brightness(1.05); }
.cgc .cg-bs:active, .cgc .cg-bk:active { transform: scale(.97); }
.cgc .cg-bs img, .cgc .cg-bk img { height: 56%; }
.cgc .cg-bs b, .cgc .cg-bk b { max-width: 66%; font-size: 4.6cqw; font-weight: 800; color: #3a220c; }
/* เปิดดูจากสมุด: ไม่มีของ → โปสการ์ดใหญ่ขึ้น */
.cgc.cg-alb .cg-pc { left: 8%; right: 8%; top: 20.5%; }
.cgc.cg-alb > .cg-set { top: 70.5%; }
@media (prefers-reduced-motion: reduce) { .cgb-w, .cgc, .cg-pc, .cg-ck, .cg-pc .cg-new, .cg-rw, .cg-ss.cg-new, .cg-who .cg-cat, .cg-tp.cg-dn, .cg-lvb, .cg-sr .cg-tk.cg-on, .cg-sl.cg-has.cg-r, .cg-row.cg-set .cg-tkt > img { animation: none; } }