/* 登入頁（GF Gaming）：手機優先；背景跟大廳同一個深藍紫色系，慢慢飄動的霓虹光暈 + 星光（prefers-reduced-motion 時不動） */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.login{min-height:100vh;min-height:100dvh;color:#f1ecff;font-family:system-ui,-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  background:radial-gradient(120% 70% at 50% 0%,#24125c,#0d0a2a 55%,#05040e);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(48px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.o1{width:70vmax;height:70vmax;left:-30vmax;top:-25vmax;background:radial-gradient(circle,#c026d3 0,transparent 62%)}
.o2{width:60vmax;height:60vmax;right:-28vmax;top:20vh;background:radial-gradient(circle,#0891b2 0,transparent 62%);animation-duration:23s;animation-delay:-6s}
.o3{width:55vmax;height:55vmax;left:10vw;bottom:-32vmax;background:radial-gradient(circle,#f59e0b 0,transparent 60%);opacity:.35;animation-duration:27s;animation-delay:-12s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.08)}100%{transform:translate(-4vw,7vh) scale(.95)}}
.grid{position:absolute;left:-20%;right:-20%;bottom:-10%;height:46%;transform:perspective(320px) rotateX(62deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(236,72,153,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.22) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(to top,#000 10%,transparent 85%);-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);
  animation:grid 6s linear infinite}
@keyframes grid{to{background-position:0 44px,0 0}}
.stars{position:absolute;inset:0;background-image:
  radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),radial-gradient(1.2px 1.2px at 78% 12%,#ffe9a8,transparent),
  radial-gradient(1.6px 1.6px at 62% 34%,#fff,transparent),radial-gradient(1.1px 1.1px at 28% 46%,#c4f1ff,transparent),
  radial-gradient(1.3px 1.3px at 88% 52%,#fff,transparent),radial-gradient(1.2px 1.2px at 8% 70%,#ffd6f5,transparent),
  radial-gradient(1.5px 1.5px at 46% 8%,#fff,transparent),radial-gradient(1.1px 1.1px at 70% 76%,#fff,transparent);
  animation:twinkle 4.5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.orb,.grid,.stars,.emblem{animation:none!important}}

.wrap{position:relative;z-index:1;max-width:420px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(24px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom))}
.brand{text-align:center;margin-bottom:18px}
.emblem{width:132px;height:132px;display:block;margin:0 auto 6px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.55));animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.word{margin:0;font:900 34px/1.25 "Arial Black",Impact,system-ui,sans-serif;letter-spacing:2px;padding:2px 0 4px}
.word span{background:linear-gradient(180deg,#fffbe0 0%,#ffe07a 30%,#f5b316 58%,#b86a05 82%,#ffd76a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #3a1a00) drop-shadow(0 0 10px rgba(255,190,60,.35))}
.word .gm{letter-spacing:5px}
.tag{margin:2px 0 0;font-size:11px;letter-spacing:3px;color:#9fe8ff;text-shadow:0 0 8px rgba(34,211,238,.6);opacity:.9}

.card{background:linear-gradient(180deg,rgba(40,22,86,.78),rgba(16,10,40,.82));border:1px solid rgba(255,214,120,.35);border-radius:22px;padding:22px 18px 20px;
  box-shadow:0 0 0 1px rgba(168,85,247,.25) inset,0 20px 50px rgba(0,0,0,.5),0 0 30px rgba(192,38,211,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card h2{margin:0 0 14px;text-align:center;font-size:19px;font-weight:800;letter-spacing:1px;color:#fff3cf}
.field{position:relative;display:flex;align-items:center;margin-bottom:12px;border-radius:14px;background:rgba(5,3,18,.55);border:1.5px solid rgba(160,140,220,.35);transition:border-color .15s,box-shadow .15s}
.field:focus-within{border-color:#ffd65c;box-shadow:0 0 0 3px rgba(255,214,92,.18),0 0 18px rgba(255,190,60,.2)}
.field .ic{width:44px;text-align:center;font-size:17px;opacity:.85;flex:none}
.field input{flex:1;min-width:0;height:52px;border:0;background:transparent;color:#fff;font-size:17px;outline:none;padding:0 12px 0 0}
.field input::placeholder{color:rgba(225,215,255,.45)}
.field input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px #120a2c inset;caret-color:#fff}
.eye{flex:none;width:46px;height:46px;margin-right:3px;border:0;border-radius:12px;background:transparent;color:#d8cdfa;cursor:pointer;display:grid;place-items:center}
.eye svg{width:23px;height:23px;fill:currentColor}.eye .shut{display:none}.eye[aria-pressed=true] .open{display:none}.eye[aria-pressed=true] .shut{display:inline}
.eye:active{background:rgba(255,255,255,.08)}
.remember{display:flex;align-items:center;gap:10px;margin:4px 2px 14px;font-size:14px;color:#dcd2f7;cursor:pointer;user-select:none}
.remember input{position:absolute;opacity:0;pointer-events:none}
.remember .box{width:22px;height:22px;border-radius:7px;border:1.5px solid rgba(255,214,120,.6);background:rgba(5,3,18,.5);display:grid;place-items:center;flex:none}
.remember input:checked+.box{background:linear-gradient(#ffe07a,#f59e0b);border-color:#ffd65c}
.remember input:checked+.box::after{content:"";width:6px;height:11px;border:solid #3a1a00;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.remember input:focus-visible+.box{box-shadow:0 0 0 3px rgba(255,214,92,.35)}
.err{margin:-2px 0 12px;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.45;color:#ffe1e6;background:rgba(190,18,60,.28);border:1px solid rgba(251,113,133,.55)}
.err::before{content:"⚠️ "}
.card.shake{animation:shake .38s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.note{margin:-4px 0 12px;padding:9px 12px;border-radius:12px;font-size:14px;color:#d9fbe6;background:rgba(16,185,129,.18);border:1px solid rgba(52,211,153,.45);text-align:center}
.go{position:relative;width:100%;height:54px;border:0;border-radius:16px;cursor:pointer;overflow:hidden;font:900 19px/1 system-ui,sans-serif;letter-spacing:6px;color:#3a1a00;
  background:linear-gradient(180deg,#fff3b0 0%,#ffd65c 40%,#f59e0b 75%,#d97706 100%);box-shadow:0 4px 0 #8a4a02,0 10px 24px rgba(245,158,11,.35),inset 0 1px 0 rgba(255,255,255,.7)}
.go::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.go:active{transform:translateY(2px);box-shadow:0 2px 0 #8a4a02,0 6px 16px rgba(245,158,11,.3)}
.go[disabled]{filter:saturate(.6) brightness(.85);cursor:wait}
.go[disabled] span::after{content:"…"}
.foot{text-align:center;font-size:12px;color:rgba(220,210,255,.55);margin:16px 0 0}
@media (max-height:640px){.emblem{width:96px;height:96px}.word{font-size:28px}.brand{margin-bottom:10px}}