/* ========================================================= 進站密碼閘門 —— 獨立的一層，不碰 #stage 縮放與遊戲邏輯 - 預設就是鎖住的（靜態 CSS 規則），js/gate.js 只在密碼正確時替加上 .gate-open 解鎖。JS 掛掉或沒載到時是「鎖住」而不是「放行」。 - #app 用 visibility 而不是 display:none 藏起來：visibility 會保留版面， game.js 的 fitStage / ResizeObserver 在閘門期間量到的尺寸仍然是對的，解鎖那一刻不需要重排。改成 display:none 會讓 clientHeight 變 0， fitStage 直接 return，解鎖後舞台縮放就是錯的。 - #gate 必須掛在直屬層、不能放進 #stage：#stage 有 transform，它底下的 position:fixed 會改以 #stage 為定位基準，閘門就不再貼齊視窗。 ========================================================= */ :root { --gate-bg: #12352c; --gate-card: #1b463a; --gate-accent: #1f9973; --gate-line: rgba(255, 255, 255, .18); } /* ---- 鎖 / 解鎖 ---- */ #app { visibility: hidden; } html.gate-open #app { visibility: visible; } html.gate-open #gate { display: none; } /* ---- 覆蓋層 ---- */ #gate { position: fixed; inset: 0; z-index: 2147483647; /* 站內既有最大 z-index 是 20，這裡直接拉到頂 */ display: flex; align-items: center; justify-content: center; background: var(--gate-bg); font-family: var(--font, system-ui, sans-serif); /* 安全區域：跟站上其他地方一樣不用 viewport-fit=cover，這裡補內距即可 */ padding: 24px calc(20px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px)); padding-top: calc(24px + env(safe-area-inset-top, 0px)); } .gate__box { width: 100%; max-width: 320px; min-width: 0; /* flex 子層預設 min-width:auto，長字串會撐爆 */ display: flex; flex-direction: column; gap: 14px; padding: 26px 22px; border: 1px solid var(--gate-line); border-radius: 16px; background: var(--gate-card); text-align: center; } .gate__title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.4; color: #fff; } .gate__hint { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .62); } .gate__input { width: 100%; min-width: 0; box-sizing: border-box; height: 50px; padding: 0 14px; border: 1px solid var(--gate-line); border-radius: 10px; background: rgba(0, 0, 0, .28); color: #fff; /* 至少 16px，否則 iOS Safari 一聚焦就把整頁放大 */ font-size: 18px; font-family: inherit; text-align: center; letter-spacing: .35em; text-indent: .35em; /* 補回 letter-spacing 造成的右偏，讓字真的置中 */ /* body 有全域 user-select:none，這裡要放行，否則選字／貼上會怪 */ -webkit-user-select: text; user-select: text; } .gate__input::placeholder { color: rgba(255,255,255,.35); letter-spacing: normal; text-indent: 0; } .gate__input:focus { outline: none; border-color: var(--gate-accent); } .gate__btn { width: 100%; min-width: 0; height: 48px; border: 0; border-radius: 10px; background: var(--gate-accent); color: #fff; font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer; } .gate__btn:active { filter: brightness(.9); } .gate__msg { margin: 0; min-height: 18px; font-size: 13px; line-height: 18px; color: #ff8a90; } /* 密碼錯誤時的搖晃提示（依專案規範不用 emoji，全部用文字與動畫） */ @keyframes gate-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } #gate.is-shake .gate__box { animation: gate-shake .38s ease; } @media (prefers-reduced-motion: reduce) { #gate.is-shake .gate__box { animation: none; } }