/* ห้องอัญเชิญ (หน้ากาชา) + ฉากเปิดกาชา — โหลดหลัง ui-fit.css
   ภาพเจนทั้งหมด (00-HQ/outputs/2026-10-28-shieldfall-gacha-art) · CSS แค่จัดวาง/ย่อ/หมุน/ย้อมสี */

/* ---------- ห้องอัญเชิญ: แผงเต็มจอ ไม่ใช้กรอบกระดาษ ---------- */
body #panel.ghall-on { padding: 0; background: #0d0a1c url(img/gacha-hall.webp) center / cover no-repeat; }
body #panel.ghall-on .card { width: 100%; height: 100%; max-height: none; padding: 0; border: 0; border-image: none; background: none; }
body #panel.ghall-on #ptitle { display: none; }
body #panel.ghall-on .x { right: 14px; top: 12px; z-index: 6; }
body #panel.ghall-on #pbody { height: 100%; overflow: hidden; gap: 0; }
.ghall { position: relative; flex: 1; min-height: 0; display: flex; align-items: stretch; color: #fff4d6; font-family: Mitr, sans-serif; }
.ghall::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 38% 55%, transparent 40%, rgba(8, 6, 20, .55) 100%); }

/* เวที: วงเวทหมุน + เสาแสง + ฮีโร่บนแท่น */
.gstage { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 0 9vh; overflow: hidden; }
.gring { position: absolute; left: 50%; bottom: 17vh; width: min(52vh, 70%); aspect-ratio: 1; margin-left: calc(min(52vh, 70%) / -2); background: url(img/gacha-ring.webp) center / contain no-repeat; opacity: .8; pointer-events: none; animation: g-spin 40s linear infinite; }
.gbeam { position: absolute; left: 50%; bottom: 20vh; width: min(16vh, 20%); height: 82%; translate: -50% 0; background: url(img/gacha-beam.webp) center bottom / 100% 100% no-repeat; opacity: .55; pointer-events: none; animation: g-pulse 4s ease-in-out infinite; }
.gspark { position: absolute; width: 46px; aspect-ratio: 1; background: url(img/gacha-spark.webp) center / contain no-repeat; pointer-events: none; opacity: 0; animation: g-twinkle 3.2s ease-in-out infinite; }
.gspark.s1 { left: 22%; top: 30%; } .gspark.s2 { left: 74%; top: 22%; animation-delay: 1.1s; width: 34px; } .gspark.s3 { left: 60%; top: 52%; animation-delay: 2.1s; width: 28px; }

/* ป้ายหัว: ภาพ 900×160 แผงน้ำเงิน y 57–141 แต่เพชรกลางยื่นลงถึง y ~86 → ชื่ออยู่ในแผงช่วง y 88–139 · บรรทัดรองย้ายไปใต้ป้าย (ในแผงไม่พอสองบรรทัด) */
.gtitle { position: absolute; top: 3.5vh; left: 50%; translate: -50% 0; --w: min(560px, 86vw); width: var(--w); aspect-ratio: 900 / 160; box-sizing: border-box; padding: calc(var(--w) * .098) 17% calc(var(--w) * .023); display: flex; flex-direction: column; align-items: center; justify-content: center; background: url(img/gacha-ribbon.webp) center / 100% 100% no-repeat; text-align: center; }
.gtitle b { font-size: calc(var(--w) * .043); line-height: 1.2; letter-spacing: .04em; color: #ffe9a8; text-shadow: 0 2px 0 #6a3a08, 0 0 12px rgba(255, 200, 90, .7); white-space: nowrap; }
.gtitle small { position: absolute; top: 100%; left: 50%; translate: -50% 0; margin-top: 2px; padding: 2px 12px; border-radius: 999px; background: rgba(10, 16, 48, .55); font-size: max(11px, calc(var(--w) * .024)); line-height: 1.4; color: #cfe6ff; text-shadow: 0 1px 2px #0a1030; white-space: nowrap; }

.gheroes { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2vw; width: 100%; }
.ghero { --h: 26vh; position: relative; width: calc(var(--h) * 1.1); display: flex; flex-direction: column; align-items: center; border: 0; padding: 0; background: none; cursor: pointer; color: inherit; font: inherit; }
.ghero.c { --h: 40vh; z-index: 2; margin: 0 -1vw; }
.ghero img { position: relative; z-index: 1; height: var(--h); max-width: 100%; object-fit: contain; object-position: bottom; animation: g-float 3.6s ease-in-out infinite; }
.ghero::before { content: ''; position: absolute; left: 10%; right: 10%; bottom: 14%; height: calc(var(--h) * .8); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tc) 55%, transparent), transparent); pointer-events: none; }
.ghero.l img { animation-delay: -1.2s; } .ghero.r img { animation-delay: -2.4s; }
.ghero .gped { position: absolute; bottom: 34px; left: 50%; width: 100%; aspect-ratio: 2.3; translate: -50% 42%; background: url(img/gacha-ped.webp) center / contain no-repeat; }
.ghero .gnm { position: relative; z-index: 2; margin-top: 6px; display: flex; flex-direction: column; align-items: center; padding: 2px 14px 3px; border-radius: 99px; background: linear-gradient(rgba(14, 12, 40, .85), rgba(14, 12, 40, .65)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 80%, #fff 0%), 0 0 14px color-mix(in srgb, var(--tc) 50%, transparent); white-space: nowrap; }
.ghero .gnm b { font-size: clamp(13px, 2vh, 18px); color: #fff; }
.ghero .gnm small { font-size: clamp(10px, 1.4vh, 12px); color: var(--tc); filter: brightness(1.35); }
.ghero.c .gnm b { font-size: clamp(16px, 2.6vh, 24px); }
.ghero.in img { animation: g-in .7s cubic-bezier(.2, 1.4, .4, 1), g-float 3.6s ease-in-out .7s infinite; }
.ghero.in::before { animation: g-fade 1s ease-out; }
.ghero.in .gnm { animation: g-fade .7s ease-out; }
.ghero:hover img { translate: 0 -6px; }

/* แผงขวา: เงิน · การันตี · ปุ่มอัญเชิญ */
.gctl { position: relative; z-index: 2; flex: none; align-self: center; max-height: calc(100% - 86px); box-sizing: border-box; width: min(380px, 36vw); margin: 40px 22px 0 0; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; overflow: hidden auto; border: 26px solid transparent; border-image: url(img/gacha-glass.webp) 70 fill / 26px stretch; }
.gcur { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 5px; } /* 4 ช่อง (Joo/Boo/ตั๋ว/เงิน) ในแผงกว้าง ~280px: แถวเดียวพอดี เลขยาวตกแถวเอง ไม่ล้น */
.gcur span { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 3px; border-radius: 99px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 220, 140, .35); font-size: 14px; font-weight: 600; white-space: nowrap; }
.gcur img { width: 22px; height: 22px; object-fit: contain; }
.gpity .gpl { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.gpity .gpl b { color: #ffe9a8; } .gpity .gpl span { color: #cfe6ff; } .gpity .gpl span b { font-size: 18px; color: #fff; }
.gbar { position: relative; height: 26px; margin-top: 4px; padding: 7px 22px; box-sizing: border-box; background: url(img/gacha-bar.webp) center / 100% 100% no-repeat; }
.gpity.p5 .gpl b { color: #ffc6f2; } .gpity.p5 .gbar i { background: linear-gradient(90deg, #c77dff, #ffd36e); box-shadow: 0 0 8px #e0a8ff; }
.gbar i { display: block; height: 100%; min-width: 4px; border-radius: 99px; background: linear-gradient(90deg, #5fd3ff, #ffe27a); box-shadow: 0 0 8px #8fe0ff; }
.gbtn { --bp: url(img/kit-btn-primary-plain.webp); --bg: url(img/kit-btn-primary-gem.webp); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; padding: 2px 40px 4px; border: 0; border-image: var(--bp) 0 80 fill / 0 36px stretch; background: var(--bg) center / auto 100% no-repeat; color: #4a2e1f; font: inherit; font-weight: 600; cursor: pointer; transition: transform .12s, filter .12s; }
.gbtn b { font-size: 20px; line-height: 1.2; }
.gbtn span { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; }
.gbtn span img { width: 20px; height: 20px; object-fit: contain; }
.gbtn em { font-style: normal; font-size: 11px; margin-left: 4px; padding: 0 6px; border-radius: 99px; background: rgba(0, 0, 0, .28); color: #fff; }
.gbtn.one { --bp: url(img/kit-btn-secondary-plain.webp); --bg: url(img/kit-btn-secondary-gem.webp); }
.gbtn.ten { --bp: url(img/kit-btn-accent-plain.webp); --bg: url(img/kit-btn-accent-gem.webp); min-height: 80px; color: #fff; text-shadow: 0 1px 0 #8a3a0a, 0 0 3px #8a3a0a; animation: g-glow 2.4s ease-in-out infinite; }
.gbtn.ten b { font-size: 26px; }
.gbtn:not(:disabled):hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.1); }
.gbtn:not(:disabled):active { transform: scale(.97); }
.gbtn:disabled { filter: grayscale(.75) brightness(.8); cursor: default; animation: none; }
.gbtn.short { filter: grayscale(.75) brightness(.8); animation: none; } /* ตั๋ว/Joo ไม่พอ: เทาเหมือนปิด แต่กดได้ = ไปเติม Joo */
.gbtn.short:hover { filter: grayscale(.4) brightness(.95); }
.gtrade { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 10px; background: rgba(255, 220, 140, .12); box-shadow: inset 0 0 0 1px rgba(255, 220, 140, .35); color: #ffe9a8; font: inherit; font-size: 14px; cursor: pointer; }
.gtrade img { width: 22px; } .gtrade small { opacity: .75; }
.gtrade:disabled { opacity: .5; cursor: default; }
.gnote { font-size: 12px; line-height: 1.5; color: #c8c2e0; text-align: center; }
.gnote b { color: #ffe9a8; }
.gpay { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 4px 0 6px; font-size: 16px; }
.gpay span { display: inline-flex; align-items: center; gap: 6px; } .gpay img { width: 28px; height: 28px; object-fit: contain; } .gpay b { font-size: 20px; }
.gpayn { font-size: 13px; line-height: 1.4; text-align: center; opacity: .85; }
.gdetb { align-self: center; border: 0; background: none; color: #8fd8ff; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* รายละเอียดอัตรา: กระจกมืดทับเวที */
.gdet { position: absolute; inset: 64px 22px 22px; z-index: 5; background: rgba(10, 12, 32, .9); background-clip: padding-box; display: flex; flex-direction: column; border: 26px solid transparent; border-image: url(img/gacha-glass.webp) 70 fill / 26px stretch; padding: 4px 10px; }
.gdet[hidden] { display: none; }
.gdh { display: flex; justify-content: space-between; align-items: center; padding: 0 0 8px; font-size: 18px; color: #ffe9a8; }
.gdx { border: 0; border-radius: 99px; padding: 4px 14px; background: rgba(255, 220, 140, .16); color: #fff4d6; font: inherit; cursor: pointer; }
.gds { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 6px; }
.gds .rates { color: #c8c2e0; }
.gds .grates td { border-top-color: rgba(255, 255, 255, .1); color: #fff4d6; }
.gds .grates th { color: #c8c2e0; }
body #panel .gds .gtier { border: 2px solid color-mix(in srgb, var(--tc) 70%, transparent); border-image: none; border-radius: 10px; background: rgba(0, 0, 0, .25); }
body #panel .gds .gcl { border: 0; border-image: none; border-radius: 8px; padding: 4px 6px; background: rgba(255, 255, 255, .08); color: #fff4d6; }
body #panel .gds .gcl i { color: #7fe08a; }

@keyframes g-spin { to { rotate: z 360deg; } }
@keyframes g-pulse { 50% { opacity: .85; } }
@keyframes g-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes g-float { 50% { translate: 0 -8px; } }
@keyframes g-in { from { opacity: 0; transform: translateY(24px) scale(.85); } }
@keyframes g-fade { from { opacity: 0; } }
@keyframes g-glow { 50% { filter: brightness(1.15); } }

/* จอเตี้ย (มือถือแนวนอน) */
@media (max-height: 520px) {
  .gtitle { top: 6px; --w: min(380px, 70vw); }
  .gctl { margin: 8px 8px 8px 0; padding: 4px 6px; gap: 6px; width: min(300px, 42vw); border-width: 18px; }
  .gbtn, .gbtn.ten { min-height: 44px; padding: 0 30px; } .gbtn b, .gbtn.ten b { font-size: 15px; line-height: 1.1; } .gbtn span { font-size: 12px; } .gbtn span img { width: 16px; height: 16px; } .gbtn em { display: none; }
  .gpity .gpl { font-size: 12px; } .gbar { height: 20px; padding: 5px 18px; }
  .gnote { display: none; }
  .ghero { --h: 22vh; } .ghero.c { --h: 36vh; }
  .gdet { inset: 8px; border-width: 18px; }
  body #panel.ghall-on .x { right: auto; left: max(8px, env(safe-area-inset-left)); top: 6px; }
}
/* จอแนวตั้ง: เวทีบน แผงล่าง */
@media (max-aspect-ratio: 1/1) {
  .ghall { flex-direction: column; }
  .gstage { flex: 1 1 50%; padding-bottom: 2vh; }
  .gctl { width: auto; margin: 0 10px 10px; max-height: 50%; }
  .ghero { --h: 16vh; } .ghero.c { --h: 24vh; }
  .ghero .gnm { max-width: 100%; white-space: normal; text-align: center; }
  .gdet { inset: 56px 8px 8px; }
  /* iPhone แนวตั้ง: แถบสถานะกินแตะมุมบน ปุ่มปิดต้องอยู่ใต้แถบ */
  .gtitle { top: max(3.5vh, calc(env(safe-area-inset-top) + 6px)); }
  body #panel.ghall-on .x { right: max(10px, env(safe-area-inset-right)); top: calc(env(safe-area-inset-top) + 6px); width: 44px; height: 44px; }
}

/* ---------- ฉากเปิดกาชา ---------- */
body #reveal { background: #0b0818 url(img/gacha-hall.webp) center / cover no-repeat; }
body #reveal::before { content: ''; position: fixed; inset: 0; background: rgba(6, 4, 16, .62); pointer-events: none; }
#reveal > #cards, #reveal > #rvrow, #reveal > #rvgot { position: relative; z-index: 2; }
.rv-fx { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } /* fixed: เสาแสงสูงเกินจอไม่ทำให้ฉากเลื่อน */
.rv-fx i { position: absolute; left: 50%; top: 50%; }
.rv-ring { width: min(90vh, 90vw); aspect-ratio: 1; margin: calc(min(90vh, 90vw) / -2) 0 0 calc(min(90vh, 90vw) / -2); background: url(img/gacha-ring.webp) center / contain no-repeat; opacity: .35; animation: g-spin 30s linear infinite; }
.rv-beam { z-index: 0; width: min(30vh, 26vw); height: 120vh; margin: -60vh 0 0 calc(min(30vh, 26vw) / -2); background: url(img/gacha-beam.webp) center / 100% 100% no-repeat; opacity: 0; }
.rv-beam::before { content: ''; position: absolute; z-index: -1; inset: 0 -90%; background: radial-gradient(closest-side, var(--tc, #fff), transparent); opacity: .7; } /* แสงสีตามระดับสูงสุดรอบเสาแสง */
.rv-orb { width: 30vh; aspect-ratio: 1; margin: -15vh 0 0 -15vh; background: url(img/gacha-orb.webp) center / contain no-repeat; opacity: 0; }
.rv-flash { inset: 0; left: 0; top: 0; background: #fff; opacity: 0; }
.rv-ban { position: fixed; z-index: 3; left: 50%; top: 4vh; translate: -50% 0; display: none; flex-direction: column-reverse; padding-top: 1.5%; gap: 2px; align-items: center; justify-content: center; width: min(560px, 86vw); aspect-ratio: 5 / 1; background: url(img/gacha-ribbon.webp) center / 100% 100% no-repeat; pointer-events: none; font-family: Mitr, sans-serif; }
.rv-ban b { font-size: clamp(12px, 1.8vh, 17px); color: var(--tc); filter: brightness(1.4); text-shadow: 0 0 10px var(--tc); letter-spacing: .1em; line-height: 1; }
.rv-ban span { font-size: clamp(18px, 3.4vh, 32px); color: #ffe9a8; text-shadow: 0 2px 0 #6a3a08, 0 0 12px rgba(255, 200, 90, .8); }

/* ชาร์จ: วงเวทหมุนเร็ว ขยาย · ลูกแสงโตขึ้น · เสาแสงสีตามระดับสูงสุดลงมา */
#reveal.charging #cards, #reveal.charging #rvrow, #reveal.charging #rvgot { visibility: hidden; }
#reveal.charging { cursor: pointer; }
#reveal.charging .rv-ring { opacity: .95; animation: g-spin 2.2s linear infinite, rv-ring-in 1.3s ease-in forwards; }
#reveal.charging .rv-orb { animation: rv-orb 1.3s ease-in forwards; }
#reveal.charging .rv-beam { animation: rv-beam 1.3s ease-in forwards; }
#reveal.opened .rv-flash { animation: rv-flash .6s ease-out; }
#reveal.opened .rv-beam { opacity: .6; animation: g-pulse 3s ease-in-out infinite; }
#reveal.opened .rv-ring { opacity: .45; }
#reveal.epic.opened { animation: rv-shake .5s; }
#reveal.epic.opened .rv-ban { display: flex; animation: rv-ban .7s cubic-bezier(.2, 1.5, .4, 1); }
#reveal.legend.opened .rv-beam { opacity: .9; }
body #cards.solo .rc { width: min(340px, 62vw, 50vh); }
#reveal #cards .rc { animation: rv-card .45s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * .2s); }
#reveal.charging #cards .rc { animation: none; }
#cards .rc[data-r="4"].open, #cards .rc[data-r="5"].open { box-shadow: 0 0 26px 4px var(--tc); border-radius: 14px; }
/* เอฟเฟกต์แตกแสงหลังพลิก: ภาพพื้นดำ → ใช้ภาพ -a ที่อบความโปร่งใสแล้ว (เดิม mix-blend ขึ้นกล่องดำ) */
body #cards .rc .burst { background: var(--g) center / contain no-repeat; mix-blend-mode: normal; }
body #cards .rc .new { background: rgba(14, 12, 40, .8); }

@keyframes rv-ring-in { from { transform: scale(.4); } to { transform: scale(1.15); } }
@keyframes rv-orb { 0% { opacity: 0; transform: scale(.2); } 80% { opacity: 1; transform: scale(1.4); } 100% { opacity: 1; transform: scale(2.2); } }
@keyframes rv-beam { 0%, 40% { opacity: 0; transform: scaleX(.1); } 100% { opacity: 1; transform: scaleX(1); } }
@keyframes rv-flash { from { opacity: .95; } to { opacity: 0; } }
@keyframes rv-shake { 20% { translate: -8px 4px; } 40% { translate: 7px -5px; } 60% { translate: -5px 3px; } 80% { translate: 3px -2px; } }
@keyframes rv-ban { from { opacity: 0; transform: scale(.4); } }
@keyframes rv-card { from { opacity: 0; transform: translateY(-40px) scale(.6); } }
@media (max-height: 520px) { .rv-ban { top: 4px; width: min(300px, 60vw); } body #reveal.epic.opened { padding-top: 66px; } }
@media (prefers-reduced-motion: reduce) { #reveal.epic.opened { animation: none; } .gring, .rv-ring { animation: none; } }
/* กรอบ "ได้อาชีพ…" ใต้การ์ด + ปุ่มดูค่าพลัง/สกิลคู่ปุ่มตกลง */
#rvgot { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: min(380px, 86vw); padding: 2px 18px; border: 22px solid transparent; border-image: url(img/gacha-glass.webp) 70 fill / 22px stretch; text-align: center; line-height: 1.25; color: #fff4d6; font-family: Mitr, sans-serif; animation: rv-card .45s .35s cubic-bezier(.2, 1.4, .4, 1) both; }
#rvgot small { font-size: 14px; color: #ffe08a; }
#rvgot b { font-size: clamp(22px, 3.4vh, 30px); color: var(--tc); filter: brightness(1.5); text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
#rvgot span { font-size: 13px; opacity: .85; }
#rvrow { gap: 12px; }
#reveal #rvrow .btn { min-width: 150px; }
@media (max-height: 560px) { #rvgot { border-width: 14px; padding: 0 10px; } #rvgot b { font-size: 20px; } #rvgot span { display: none; } }
body:has(#reveal:not([hidden])) #modal { z-index: 14; } /* ดูค่าพลัง/สกิลจากจอกาชา: หน้าต่างต้องอยู่เหนือจอกาชา */
/* แก้ตาม QA หน้ากาชา 28 ต.ค. (qa-reports/shieldfall-gacha-20261028-2246.md) */
.rv-fx .rv-flash { inset: 0; left: 0; top: 0; } /* B1: .rv-fx i ตั้ง left/top 50% → แฟลชเหลือกล่องขาวครึ่งขวาล่าง */
#cards .rc .new { transition: opacity .25s .2s; } #cards .rc:not(.open) .new { opacity: 0; transition: none; } /* B3: ไม่บอกผลก่อนพลิกการ์ด */
.ghall.busy .gring { opacity: 1; animation-duration: 1.2s; } .ghall.busy .gbeam { opacity: .9; } .ghall.busy .gctl button { pointer-events: none; } .ghall.busy .gbtn { filter: brightness(.9); } /* B11 */
.gtrade:disabled small { opacity: 1; color: #ffb08a; } /* B9 */
@media (max-height: 520px) { /* B5/B6: แนวนอนเตี้ย ให้แผงขวาพอดีไม่ต้องเลื่อน · หน้าอัตราออกไม่ชนปุ่ม X */
  .gctl { gap: 4px; padding: 2px 4px; }
  .gcur { gap: 4px; } .gcur span { font-size: 12px; padding: 0 8px 0 3px; } .gcur img { width: 18px; height: 18px; }
  .gpity .gbar { margin-top: 2px; }
  .gtrade { padding: 2px 6px; font-size: 12px; } .gtrade img { width: 16px; }
  .gdetb { font-size: 12px; }
  .gdet { top: 52px; }
}
@media (min-height: 521px) and (max-height: 860px) { .rv-ban { top: 1.5vh; width: min(420px, 70vw); } body #reveal.epic.opened { padding-top: 100px; } } /* จอ 720–860: ป้ายประกาศไม่ทับการ์ดแถวบน */
/* ตั๋ว: เปิด 1 ใบ | เปิดทั้งหมด (ครั้งละไม่เกิน 10) */
.gtk { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gtk .gbtn { padding: 2px 14px 4px; border-image-width: 0 28px; min-width: 0; }
.gtk .gbtn b { font-size: 17px; } .gtk .gbtn span { font-size: 12px; white-space: nowrap; }
.gtk .gbtn.all:not(:disabled):not(.short) { animation: g-glow 2.4s ease-in-out infinite; }
@media (max-height: 400px) { .gctl { max-height: calc(100% - 16px); margin-top: 8px; margin-bottom: 8px; } .gbtn, .gbtn.ten, .gtk .gbtn { min-height: 36px !important; } } /* 667x375 / 844x390: แผงสูงไม่พอ ปุ่ม ×10 ถูกตัดครึ่ง แตะกลางปุ่มไม่โดน */
@media (max-height: 520px) { .gtk { gap: 4px; } .gbtn, .gbtn.ten, .gtk .gbtn { min-height: 40px; } .gtk .gbtn { padding: 0 10px; } .gtk .gbtn b { font-size: 14px; } .gtk .gbtn span { font-size: 11px; } }
/* ตั๋วเลือก ★5 (game.js t5Pick) */
.gt5p p { margin: 0 0 8px; font-size: 13px; }
.gt5p .glist { max-height: 52vh; overflow-y: auto; padding: 2px; }
.gt5p .gcl img { filter: none; }
.gt5p .gcl.pick { outline: 3px solid #ffd76a; outline-offset: -1px; }
.gt5p .row { margin-top: 8px; }

/* ---------- หน้าอัตราออก แบบ A "ชั้นวางตามดาว" (game.js gRates · Stamp 5 พ.ย.) ---------- */
.gar-p { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; padding: 0 6px 10px; }
.gar-p .gpl { font-size: 13px; } .gar-p .gpl span b { font-size: 16px; }
.gar { flex: 1; min-height: 0; display: grid; grid-template-columns: clamp(150px, 21%, 240px) minmax(0, 1fr); gap: 12px; }
.gar-t { display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 6px 8px; }
.gat { flex: 1 1 0; min-height: 56px; max-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; padding: 2px 16%; background: center / 100% 100% no-repeat; color: #fff4d6; font: inherit; line-height: 1.12; cursor: pointer; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); filter: saturate(.7) brightness(.8); transition: transform .15s, filter .15s; }
.gat span { font-size: 13px; white-space: nowrap; } .gat span i { font-style: normal; } .gat b { font-size: 22px; color: #fff; } .gat small { font-size: 11px; opacity: .9; }
.gat:hover:not(.on) { filter: saturate(.9) brightness(.95); }
.gat.on { position: relative; z-index: 1; transform: scale(1.07); filter: drop-shadow(0 0 10px var(--tc)) brightness(1.08); } .gat.on b { font-size: 27px; }
.gar-r { min-height: 0; display: flex; flex-direction: column; }
.gar-g { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(84px, 8.4vw, 132px), 1fr)); gap: 8px; align-content: start; padding: 4px 6px 6px 2px; }
.gak { position: relative; container-type: inline-size; aspect-ratio: 3 / 4; border: 0; padding: 0; background: center / 100% 100% no-repeat; color: #fff4d6; font: inherit; cursor: pointer; transition: translate .12s, filter .12s; }
.gak:hover { translate: 0 -2px; filter: brightness(1.08); }
.gak img { position: absolute; left: 12%; width: 76%; bottom: var(--gak-fb, 24%); height: 58%; object-fit: contain; object-position: 50% 100%; pointer-events: none; }
.gak:not(.own) img { filter: brightness(0) invert(.16) sepia(1) hue-rotate(185deg) saturate(2.6); opacity: .85; } /* ยังไม่มี = เงาน้ำเงินเข้ม */
.gak-st { position: absolute; left: 0; right: 0; top: var(--gak-st, 4%); text-align: center; font-size: clamp(9px, .9vw, 12px); letter-spacing: -1px; color: #ffd76a; text-shadow: 0 1px 0 #6a3a08, 0 0 4px rgba(0, 0, 0, .7); pointer-events: none; }
.gak-n { position: absolute; top: -2%; right: -4%; min-width: 30%; height: 13%; z-index: 1; display: flex; align-items: center; justify-content: center; background: center / 100% 100% no-repeat; font: normal clamp(10px, .9vw, 12px) Mitr, sans-serif; color: #fff; pointer-events: none; }
.gak-lk { position: absolute; left: 50%; top: 50%; width: 28%; aspect-ratio: 1; translate: -50% -50%; background: center / contain no-repeat; pointer-events: none; }
.gak b { position: absolute; left: 9%; right: 9%; bottom: var(--gak-nb, 4%); height: var(--gak-nh, 14%); display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: clamp(8px, calc(112cqw / var(--nl, 8)), 13px); line-height: 1; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); pointer-events: none; }
.gar-f { padding: 8px 4px 0; text-align: center; font-size: 14px; color: #ffe9a8; } .gar-f b { font-weight: 400; color: #fff; }
.gar-f small { display: block; margin-top: 2px; font-size: 11px; color: #c8c2e0; }
/* จอเตี้ย (มือถือแนวนอน) */
@media (max-height: 520px) {
  .gar-p { padding-bottom: 4px; gap: 2px 16px; } .gar-p .gpity { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
  .gar-p .gpl { font-size: 11px; gap: 6px; } .gar-p .gpl span b { font-size: 12px; } .gar-p .gbar { height: 14px; padding: 3px 14px; margin-top: 0; }
  .gar { grid-template-columns: clamp(112px, 17%, 160px) minmax(0, 1fr); gap: 6px; }
  .gar-t { gap: 2px; padding: 2px 6px; } .gat { min-height: 0; line-height: 1; padding: 0 15%; } .gat span { font-size: 9px; } .gat b { font-size: 14px; } .gat.on b { font-size: 16px; } .gat small { font-size: 8px; }
  .gar-g { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 5px; }
  .gar-f { padding-top: 4px; font-size: 11px; } .gar-f small { display: none; }
}
/* จอแนวตั้ง: ป้ายดาวเรียงแถวบน */
@media (max-aspect-ratio: 1/1) {
  .gar-p { grid-template-columns: 1fr; }
  .gar { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
  .gdet .gdh b { font-size: 15px; } .gdet .gdx { white-space: nowrap; font-size: 13px; padding: 4px 10px; }
  .gar-t { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 4px 2px; }
  .gat { min-width: 0; min-height: 0; height: 34px; padding: 0 12%; line-height: 1; } .gat span { font-size: 8px; letter-spacing: -1px; } .gat span i, .gat small { display: none; } .gat b { font-size: 12px; } .gat.on b { font-size: 13px; }
  .gat.on { transform: scale(1.05); }
  .gar-g { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .gar-f small { font-size: 10px; }
}