/* Shieldfall · หน้าเริ่ม/ล็อกอิน — ภาพเจนทั้งหมด (00-HQ/outputs/2026-10-28-shieldfall-login-art) · CSS แค่จัดวาง/ขยับ/หมุน/จาง */
#title { justify-content: center; gap: 0; padding: 16px; background: #1c120c; overflow: hidden; }
#title .t-bg { position: absolute; inset: -3%; background: url(img/login-bg-wide.webp) center 40% / cover no-repeat; animation: t-drift 26s ease-in-out infinite alternate; }
#title .t-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#title .t-fx img { position: absolute; left: var(--x); top: var(--y); width: var(--w); opacity: 0; animation: t-float var(--d, 9s) linear var(--dl, 0s) infinite; will-change: transform, opacity; }
#title .t-fx img.glow { animation-name: t-pulse; }
#title .t-screen { mix-blend-mode: screen; }
#title .t-main { position: relative; display: flex; flex-direction: column; align-items: center; width: min(500px, 100%, 62vh); }
#title .t-logo { position: relative; z-index: 1; margin-bottom: -9%; animation: t-bob 4.5s ease-in-out infinite; }
#title .logo { display: block; width: min(560px, 96vw, 50vh); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
/* แสงวิ่งผ่านโลโก้: mask ด้วยภาพโลโก้เอง */
#title .shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: url(img/login-logo.webp) center / 100% 100% no-repeat; mask: url(img/login-logo.webp) center / 100% 100% no-repeat; mix-blend-mode: screen; }
#title .shine img { position: absolute; top: 50%; left: 0; width: 70%; transform: translate(-120%, -50%) rotate(-25deg) scaleY(3); opacity: .9; animation: t-shine 5.5s ease-in-out 1.6s infinite; }
/* แสงวิ่งผ่านปุ่ม */
#title #play { position: relative; }
#title .sweep { position: absolute; inset: 6px 14px; overflow: hidden; border-radius: 999px; pointer-events: none; mix-blend-mode: screen; }
#title .sweep img { position: absolute; top: 50%; left: 0; width: 60%; transform: translate(-120%, -50%) rotate(-20deg) scaleY(2.4); animation: t-shine 3.2s ease-in-out 2s infinite; }
#title #play:hover .sweep img { animation-duration: 1.1s; animation-delay: 0s; }
#title #play:hover { transform: scale(1.03); }
/* ชั้นเศษโล่/ประกายจาก title.js */
#title .t-burst { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
#title .t-burst img { position: absolute; will-change: transform, opacity; }
/* พารัลแลกซ์ตามเมาส์ (title.js ตั้ง --px --py) */
#title .t-bg { translate: calc(var(--px, 0) * -28px) calc(var(--py, 0) * -18px); transition: translate .4s ease-out; }
#title .t-fx { translate: calc(var(--px, 0) * 46px) calc(var(--py, 0) * 30px); transition: translate .4s ease-out; }
#title .t-main { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 6px); transition: translate .5s ease-out; }
#title.pre .t-main, #title.pre .t-fx { opacity: 0; }
#title.pre .t-bg { opacity: 0; }
/* เปิดหน้า: โลโก้กระแทกลง แผงลอยขึ้น */
#title.intro .t-logo { animation: t-slam .62s cubic-bezier(.3, 1.5, .5, 1) both; }
#title.intro .t-panel { animation: t-rise .7s cubic-bezier(.2, 1.3, .4, 1) .5s both; }
#title.intro .t-bg { animation: t-dawn 1.2s ease-out both; }
/* กดลุย: ทุกอย่างพุ่งเข้าจอแล้วจาง */
#title.leaving .t-main { animation: t-out .6s ease-in both; }
#title.leaving .t-bg { animation: t-zoom .6s ease-in both; }
#title .t-panel { position: relative; width: 100%; aspect-ratio: 1000 / 815; background: url(img/login-panel.webp) center / 100% 100% no-repeat; padding: 22.5% 11% 6.5%; display: flex; flex-direction: column; justify-content: center; gap: 2.2%; color: #fbe9cf; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5)); }
#title .lbl { text-align: center; color: #ffd98a; letter-spacing: .02em; text-shadow: 0 1px 0 #2a1608; }
#title #name { font-size: 18px; padding: 11px 14px; border-radius: 14px; background: rgba(255, 246, 228, .95); box-shadow: inset 0 2px 4px rgba(74, 46, 31, .35); text-align: center; }
#title #play { align-self: stretch; min-height: 62px; font-size: 22px; --cap: 38px; letter-spacing: .03em; animation: t-glow 2.4s ease-in-out infinite; }
#title #login { align-self: center; min-width: min(250px, 100%); }
#title .note { color: #e9cfa8; opacity: .85; }
#title .who { margin: 0; text-align: center; font-size: 14px; line-height: 1.4; color: #fbe9cf; text-shadow: 0 1px 0 #2a1608; word-break: break-all; }
#title .who b { color: #ffd98a; }
#title .t-namebox { display: flex; flex-direction: column; gap: 6px; }
#title .t-err { margin: 0; text-align: center; font-size: 14px; font-weight: 600; color: #ffb3a0; text-shadow: 0 1px 0 #2a1608; }
#title .t-gbtn { display: flex; justify-content: center; min-height: 40px; color-scheme: light; }
#title .t-link { align-self: center; padding: 2px 8px; border: 0; background: none; font: inherit; font-size: 13px; color: #ffd98a; text-decoration: underline; cursor: pointer; text-shadow: 0 1px 0 #2a1608; }
#title #t-bjform input { font-size: 16px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 246, 228, .95); box-shadow: inset 0 2px 4px rgba(74, 46, 31, .35); text-align: center; }
#title .bj-swap { color: #ffd98a; text-shadow: 0 1px 0 #2a1608; }
#title .bj-err { color: #ffb3a0; text-shadow: 0 1px 0 #2a1608; }
#title .t-foot { position: absolute; bottom: max(10px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: 11px; color: #fff; opacity: .75; text-shadow: 0 1px 2px #000; pointer-events: none; }

@keyframes t-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1%, -1%); } }
@keyframes t-bob { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-8px) rotate(.6deg); } }
@keyframes t-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 200, 80, 0)); } 50% { filter: drop-shadow(0 0 14px rgba(255, 200, 80, .85)); } }
@keyframes t-float {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.7); }
  12% { opacity: .95; }
  80% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--dx, 40px), var(--dy, -160px)) rotate(var(--r, 220deg)) scale(1.05); }
}
@keyframes t-shine { 0%, 55% { transform: translate(-120%, -50%) rotate(-25deg) scaleY(3); } 85%, 100% { transform: translate(260%, -50%) rotate(-25deg) scaleY(3); } }
@keyframes t-slam { 0% { transform: scale(2.4); opacity: 0; filter: blur(8px); } 70% { transform: scale(.94); opacity: 1; filter: none; } 100% { transform: scale(1); } }
@keyframes t-rise { from { transform: translateY(60px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes t-dawn { from { filter: brightness(.3) saturate(.6); transform: scale(1.12); } to { filter: none; transform: scale(1); } }
@keyframes t-out { to { transform: scale(1.35); opacity: 0; filter: blur(4px) brightness(1.6); } }
@keyframes t-zoom { to { transform: scale(1.25); filter: brightness(1.8); opacity: .2; } }
@keyframes t-pulse { 0%, 100% { opacity: .25; transform: scale(.9); } 50% { opacity: .8; transform: scale(1.1); } }

/* จอแนวตั้ง: ภาพแนวตั้ง */
@media (orientation: portrait) { #title .t-bg { background-image: url(img/login-bg-tall.webp); background-position: center 30%; } }
/* จอแคบ: ตัดป้ายชื่อ (มี placeholder แล้ว) ให้พอดีกรอบ */
@media (max-width: 520px) { #title .lbl { display: none; } #title .note { font-size: 10px; } #title .t-panel { gap: 8px; padding-top: 24%; } #title #play { min-height: 54px; font-size: 20px; } }
/* แนวนอนเตี้ย (มือถือ): โลโก้ซ้าย แผงขวา */
@media (max-height: 520px) and (orientation: landscape) {
  #title .t-main { flex-direction: row; width: min(820px, 100%); gap: 8px; }
  #title .t-logo { margin: 0; }
  #title .logo { width: min(360px, 44vw, 80vh); }
  #title .t-panel { width: min(420px, 54vw, calc((100vh - 16px) * 1.227)); flex: none; padding-top: 21%; padding-bottom: 5%; gap: 4px; }
  #title #play { min-height: 44px; font-size: 18px; --cap: 30px; }
  #title #login { min-height: 34px; }
  #title #name { padding: 6px 12px; font-size: 16px; }
  #title .t-foot { display: none; }
  #title .lbl, #title .note { display: none; }
}
@media (prefers-reduced-motion: reduce) { #title *, #title .t-bg { animation: none !important; } #title .t-fx { display: none; } }