/* Login page (login.html): one card over the blurred home room, like a Google sign-in page: "Sign in with Google" on top, "หรือ",
   then the Guest name + button. Same dark-green / gold language as the game (#222B20 plaques, #A58A55 trim, cream text, brown buttons). */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; background: #141a12; color: #F2EBD9; font: 15px/1.5 "Segoe UI", Tahoma, sans-serif; position: relative; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: -24px; z-index: -1; background: url("../../assets/ui/brand/login-forest-bg.png?v=1") center / cover no-repeat #141a12; filter: blur(3px) brightness(.8); }
.gl-card { width: min(400px, 100%); display: grid; gap: 16px; padding: 30px 26px 22px; background: rgba(28, 36, 26, .95); border: 3px solid #A58A55; border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(228, 189, 104, .25); }
.gl-head { text-align: center; } .gl-head .gl-logo { display: block; width: 100%; max-width: 330px; height: auto; margin: -6px auto 4px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); } .gl-head h1 { margin: 0; color: #ffd45a; font-size: 34px; letter-spacing: 1px; text-shadow: 2px 2px #4b2113; } .gl-head p { margin: 2px 0 0; color: #e9dfc4; font-size: 17px; font-weight: 700; }
.gl-box { display: grid; gap: 10px; padding: 14px; background: #2b3626; border: 2px solid rgba(165, 138, 85, .7); border-radius: 12px; }
.gl-box p { margin: 0; text-align: center; } .gl-box b { color: #ffd45a; }
label { font-weight: 700; color: #e4bc68; font-size: 14px; }
input { width: 100%; height: 46px; padding: 0 14px; font: inherit; color: #F2EBD9; background: #1b2319; border: 2px solid #A58A55; border-radius: 10px; }
input { font-size: 16px; }   /* iPhone zooms the whole page into a field under 16 px and stays zoomed (login looked cut off, user 2026-10-26) */
input:focus { outline: 2px solid #e4bc68; outline-offset: 1px; }
button, .gl-primary { height: 46px; padding: 0 14px; font: inherit; font-weight: 700; color: #F2EBD9; background: #34412D; border: 2px solid #A58A55; border-radius: 10px; cursor: pointer; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }
.gl-primary { font-size: 16px; color: #fff0c6; background: linear-gradient(#a8693a, #6b3c1d); border-color: #e4bc68; box-shadow: inset 0 0 0 1px rgba(228, 189, 104, .8); }
button:disabled { opacity: .5; cursor: not-allowed; }
.gl-row { display: flex; gap: 8px; } .gl-row button { flex: 1 1 0; min-width: 0; font-size: 13px; }
/* Google button: white, the four-colour G, dark text (Google's sign-in button style) */
.gl-google { width: 100%; gap: 12px; color: #1f1f1f; background: #fff; border: 1px solid #dadce0; border-radius: 999px; font-family: Roboto, "Segoe UI", Tahoma, sans-serif; font-size: 15px; font-weight: 600; }
.gl-google .gl-g { width: 20px; height: 20px; flex: none; }
.gl-google:disabled { opacity: .55; }
.gl-or { display: flex; align-items: center; gap: 12px; color: #B7C59A; font-size: 13px; }
.gl-or::before, .gl-or::after { content: ""; flex: 1; height: 1px; background: rgba(165, 138, 85, .55); }
.gl-guest { display: grid; gap: 8px; } .gl-guest button { margin-top: 4px; }
.gl-status { margin: 0; min-height: 1.5em; text-align: center; color: #fff0c6; font-weight: 700; }
.gl-restore { display: flex; gap: 8px; } .gl-restore input { flex: 1 1 auto; min-width: 0; height: 40px; text-transform: uppercase; letter-spacing: 2px; } .gl-restore button { flex: none; height: 40px; }

/* settings gear, top right (same settings page as in the game) */
.settings-gear { position: fixed; }