/* หน้า Login (2026-10-29) — ทอง+เขียว แบบ iOS · คลื่นน้ำ + กลิตเตอร์ทอง (CSS ล้วน) · ปิดเอฟเฟกต์ได้ (body.fx-off) */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: -apple-system, "SF Pro Text", "Sarabun", sans-serif; -webkit-font-smoothing: antialiased; background: var(--bg); color: #1c1c1e; overflow-x: hidden; }

.stage { min-height: 100vh; position: relative; overflow: hidden; display: flex; flex-wrap: wrap; }
.bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--g) 0%, var(--g-mid) 55%, var(--g-deep) 100%); clip-path: inset(0 50% 0 0); transition: clip-path .85s cubic-bezier(.7,0,.2,1); }
.col { position: relative; z-index: 1; flex: 1 1 480px; }
.left { color: #fff; padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 100vh; transition: opacity .45s, transform .6s; }
.right { display: flex; align-items: center; justify-content: center; padding: 48px 24px; transition: transform .85s cubic-bezier(.7,0,.2,1); }

.brand { display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 700; }
.brand .mark { width: 52px; height: 52px; border-radius: 15px; background: var(--gold); color: var(--g); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.hl { font-size: 44px; font-weight: 700; line-height: 1.2; letter-spacing: -.5px; margin: 0; }
.hl span { color: var(--gold); }
.sub { font-size: 17px; color: var(--on-g-2); margin-top: 14px; max-width: 440px; line-height: 1.6; white-space: pre-line; }
.stats { display: flex; gap: 28px; flex-wrap: wrap; }
.stats b { display: block; font-size: 28px; color: var(--gold); }
.stats small { font-size: 14px; color: var(--on-g-2); }

.card { width: 100%; max-width: 420px; background: #fff; border-radius: 24px; padding: 40px; box-shadow: 0 20px 60px rgba(var(--g-rgb),.12); animation: cardIn .7s cubic-bezier(.2,1.1,.3,1) both; }
.card h1 { margin: 0; font-size: 28px; color: var(--g); }
.card .hint { font-size: 15px; color: var(--muted); margin: 6px 0 22px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-soft); color: var(--gold-t); border-radius: 14px; padding: 5px 12px; font-size: 13px; margin-bottom: 14px; }
.alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 14px; }
.alert.err { background: var(--rust-soft); color: var(--rust); }
.alert.ok { background: var(--g-soft); color: var(--g); }
.box { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg); border-radius: 12px; border: 2px solid transparent; transition: border-color .2s, background .2s; margin-bottom: 12px; }
.box:focus-within { border-color: var(--gold); background: #fff; }
.box i { color: var(--sage); width: 18px; text-align: center; }
.box input { border: 0; background: transparent; font: inherit; font-size: 16px; color: #1c1c1e; flex-grow: 1; outline: none; padding: 0; min-width: 0; }
.eye { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; font-size: 15px; }
.caps { display: none; color: var(--rust); font-size: 13px; margin: -4px 4px 10px; }
.caps.on { display: block; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 22px; font-size: 14px; color: var(--muted); }
.row label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #1c1c1e; }
.row input { width: 18px; height: 18px; accent-color: var(--g); }
.cta { display: block; width: 100%; text-align: center; background: var(--g); color: #fff; border: 0; border-radius: 12px; padding: 15px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s; }
.cta:hover { background: var(--g-d); }
.cta:active { transform: scale(.97); }
.cta:disabled { opacity: .6; cursor: not-allowed; }
.foot { text-align: center; font-size: 12px; color: var(--muted); margin-top: 22px; }

.fxbtn { position: absolute; top: 20px; right: 24px; z-index: 3; display: flex; align-items: center; gap: 8px; background: #fff; color: var(--g); border: 1px solid #d9dccf; border-radius: 20px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; transition: transform .15s, opacity .3s; }
.fxbtn:active { transform: scale(.94); }
.fxbtn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
body.fx-off .fxbtn .dot { background: #b8bbb0; box-shadow: none; }

/* คลื่น */
.waves { position: absolute; inset: 0; transition: transform 1.1s cubic-bezier(.6,0,.9,.4), opacity 1s; }
.wave { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }
.wave svg { position: absolute; top: 0; left: 0; width: 200%; height: 100%; animation: slide linear infinite; }
.wave.rev svg { animation-direction: reverse; }
.bob { animation: bob 6s ease-in-out infinite alternate; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(10px); } }

/* กลิตเตอร์ 3 ชั้นความลึก (JS สร้างจุด + ขยับตามเมาส์) */
.layer { position: absolute; inset: -70px; transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s; }
.layer.boost { filter: brightness(1.8) saturate(1.2); }
.g { position: absolute; top: -4%; animation: fall linear infinite; }
.g i { display: block; border-radius: 50%; animation: sway ease-in-out infinite alternate, twinkle ease-in-out infinite alternate; }
.g.big i { box-shadow: 0 0 6px 1px rgba(255,225,140,.85); position: relative; }
.g.big i::before, .g.big i::after { content: ""; position: absolute; left: 50%; top: 50%; background: #FFF1B8; transform: translate(-50%,-50%); }
.g.big i::before { width: 500%; height: 1px; }
.g.big i::after { width: 1px; height: 500%; }
@keyframes fall { 0% { top: -4%; opacity: 0; } 6% { opacity: 1; } 62% { opacity: 1; } 100% { top: 104%; opacity: .25; } }
@keyframes sway { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
@keyframes twinkle { 0% { opacity: .25; scale: .7; } 50% { opacity: 1; scale: 1.15; } 100% { opacity: .45; scale: .85; } }
.glow { position: absolute; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold2-rgb),.24) 0%, rgba(var(--gold-rgb),.08) 40%, rgba(var(--gold-rgb),0) 68%); transition: left .35s ease-out, top .35s ease-out, opacity .5s; opacity: 0; }
.ripple { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 1.5px solid rgba(255,225,140,.9); box-shadow: 0 0 12px rgba(255,225,140,.6); animation: ripple 1.1s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(16); opacity: 0; } }

/* วาร์ปตอนกดเข้าสู่ระบบ */
.ws { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.ws i { position: absolute; left: 0; top: -1px; width: 6px; height: 2px; border-radius: 2px; transform-origin: left center; animation: warpOut cubic-bezier(.55,0,1,.6) infinite both; }
.ws.b i { height: 3px; top: -1.5px; box-shadow: 0 0 6px rgba(255,225,140,.9); }
@keyframes warpOut { 0% { transform: translateX(10px) scaleX(.3); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(1100px) scaleX(26); opacity: .9; } }

body.p1 .bg { clip-path: inset(0 0 0 0); }
body.p1 .left { opacity: 0; transform: translateX(-30px); }
body.p1 .right { transform: translateX(-50%); }
body.p1 .fxbtn { opacity: 0; pointer-events: none; }
body.p2 .card { animation: cardGo 1s cubic-bezier(.6,0,.9,.45) forwards; }
body.p2 .waves { transform: translateY(45%); opacity: .4; }
body.p2 .layer { transform: scale(3.6) !important; filter: brightness(2.6) saturate(1.3); transition: transform 1.3s cubic-bezier(.55,0,.9,.35), filter .5s; }
body.p2 .layer .g i { scale: 1.6 4; }
@keyframes cardIn { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes cardGo { 0% { transform: scale(1); } 25% { transform: scale(1.05); box-shadow: 0 0 60px rgba(var(--gold2-rgb),.6); } 100% { transform: scale(.15); opacity: 0; filter: blur(6px); } }

.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ปิดเอฟเฟกต์ (เผื่อเครื่องช้า) */
body.fx-off .wave svg, body.fx-off .bob { animation: none; }
body.fx-off .layer, body.fx-off .glow, body.fx-off .ripple, body.fx-off .ws { display: none; }

/* มือถือ: แผงเขียวอยู่บน การ์ดอยู่ล่าง */
@media (max-width: 960px) {
  .bg { clip-path: inset(0 0 calc(100% - var(--left-h)) 0); }
  .left { min-height: var(--left-h); padding: 28px 24px; gap: 18px; justify-content: center; }
  .hl { font-size: 30px; }
  .sub { font-size: 15px; margin-top: 8px; }
  .stats { display: none; }
  .right { padding: 24px 16px 40px; align-items: flex-start; }
  .card { padding: 28px 22px; }
  .fxbtn { top: 14px; right: 14px; background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.25); }
  body.p1 .right { transform: translateY(-40px); }
  body.p1 .card { opacity: 0; transition: opacity .4s; }
  .ws i { animation-name: warpOutS; }
  @keyframes warpOutS { 0% { transform: translateX(8px) scaleX(.3); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(560px) scaleX(20); opacity: .9; } }
}