/* หน้าจอ Get item — สไตล์ (Art Production 1 ต.ค. 2026) · ไฟล์เดียวกันใช้ทั้งต้นแบบ get-item/index.html และเว็บ (Head ก๊อบไม่แก้)
   เจ้าของเลือกแบบ B แล้วสั่งลำดับ: "ของ motion pop-up จาก 0" (แก้เป็น 500ms) · "แสงตามมาเมื่อของเข้าสุด" ขอบนุ่ม · "ตัวหนังสือมาพร้อมกับแสง fade in" · "เอาฐานออก"
   ต้องมีตัวแปรสี/ฟอนต์ของทะเบียน (tokens.css) อยู่ในหน้าแล้ว · ทุกกฎผูกที่ .ttgi (ไม่แตะ body) · อยู่เหนือทุกอย่างในหน้า
   ⚠ แสงขอบนุ่ม + จางด้วยความโปร่ง = ข้อยกเว้นของกฎ "dither แทนความโปร่ง" เฉพาะแสงหน้าจอนี้ (เจ้าของสั่ง) */
.ttgi { --ttgi-pop: cubic-bezier(.34, 1.56, .64, 1); --ttgi-art: 360ms; --ttgi-lit: calc(var(--ttgi-art) + 500ms);
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; box-sizing: border-box; padding: 24px 16px;
  background: var(--px-0); color: var(--px-12); overflow: auto; }
.ttgi *, .ttgi *::before, .ttgi *::after { box-sizing: border-box; }
/* พื้นมืดจางเข้าครั้งเดียวด้วยเม็ด (หมากรุก 2×2) ไม่ใช่ความโปร่ง */
.ttgi::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(var(--px-0) 0 25%, transparent 0 50%) 0 0 / 4px 4px; }
.ttgi[data-in] { animation: ttgi-bg 360ms steps(3) both; }
.ttgi[data-in]::before { animation: ttgi-dither 360ms steps(1) both; }
@keyframes ttgi-bg { 0%, 50% { background: transparent; } 100% { background: var(--px-0); } }
@keyframes ttgi-dither { 0% { opacity: 1; } 100% { opacity: 0; } }

.ttgi-stage { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; }
.ttgi-head { font: 400 14px var(--font-pixel); letter-spacing: .16em; color: var(--px-9); }
.ttgi-count { font: 400 11px var(--font-pixel); letter-spacing: .2em; color: var(--led-amber); }
.ttgi-altar { position: relative; width: 360px; max-width: 90vw; height: 330px; display: grid; place-items: end center; }
/* แสง LED อำพันหลังของ — ไล่นุ่ม (เจ้าของสั่ง "Fade ขอบนุ่ม") */
.ttgi-glow { position: absolute; left: 50%; bottom: 18px; width: 340px; max-width: 94vw; height: 300px; transform: translateX(-50%); opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--led-amber) 40%, var(--px-0)), color-mix(in srgb, var(--led-amber) 16%, var(--px-0)) 55%, var(--px-0)); }
.ttgi-art { position: relative; margin-bottom: 30px; transform-origin: 50% 100%; }
.ttgi-art img { display: block; }
.ttgi-art img[data-px] { image-rendering: pixelated; }
.ttgi-art img:not([data-px]) { box-shadow: 6px 6px 0 var(--px-1); }
.ttgi-kind { font: 400 11px var(--font-label); letter-spacing: .14em; color: var(--px-8); }
.ttgi-name { margin: 4px 0 0; font: 700 28px var(--font-display); letter-spacing: .06em; }
.ttgi-info { max-width: 560px; margin: 0; font: 400 17px/1.5 var(--font-pixel-body); color: var(--px-11); min-height: 3em; }
.ttgi-info:empty { display: none; }
.ttgi-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }

/* ปุ่มยาง (ภาษาเดียวกับปุ่มหน้าแรก) */
.ttgi-btn { margin: 0; padding: 12px 20px; border-radius: 0; cursor: pointer; font: 400 12px var(--font-label); letter-spacing: var(--tracking-button, .12em);
  color: var(--px-12); background: var(--px-2); border: 3px solid var(--px-6); box-shadow: 0 4px 0 var(--px-1); }
.ttgi-btn:hover { border-color: var(--px-9); }
.ttgi-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--px-1); }
.ttgi-btn:focus-visible { outline: 2px solid var(--px-blue); outline-offset: 3px; }
.ttgi-btn.ttgi-go { background: var(--red); border-color: var(--red-on-dark); }
.ttgi-btn.ttgi-go:hover { border-color: var(--px-12); }

/* ลำดับต่อชิ้น: ของ pop 0 → 100 ใน 500 ms (เลยเป้าแล้วเด้งกลับ โตจากขอบล่างของชิ้น) · ของเข้าสุด = แสง + ตัวหนังสือ + ปุ่ม จางเข้าพร้อมกัน 600 ms */
.ttgi-stage[data-play] .ttgi-art { animation: ttgi-pop 500ms var(--ttgi-pop) both var(--ttgi-art); }
.ttgi-stage[data-play] :is(.ttgi-glow, .ttgi-kind, .ttgi-name, .ttgi-info, .ttgi-row) { animation: ttgi-fade 600ms ease-out both var(--ttgi-lit); }
@keyframes ttgi-pop { from { transform: scale(0); } to { transform: none; } }
@keyframes ttgi-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ttgi[data-in], .ttgi[data-in]::before, .ttgi-stage[data-play] * { animation: none !important; }
  .ttgi-glow { opacity: 1; }
}