/* The two front doors: the village password (server.js GATE_PAGE) and the Gaia sign-in (index.html #login). O2, 2026-10-16.
   Block-style sky and village skyline drawn in CSS, so nothing extra loads before the password. */
.lg{ position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:16px; overflow:auto;
  font:15px/1.5 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; color:#12303a; }
.lg-bg{ position:fixed; inset:0; overflow:hidden; z-index:-1;
  background:radial-gradient(circle at 82% 16%, rgba(255,236,170,.95) 0 46px, rgba(255,226,140,.35) 47px 90px, transparent 150px),
    linear-gradient(#6fbfdc 0%, #a9dcec 52%, #e6f5ee 100%); }
/* blocky clouds drifting */
.lg-bg::before{ content:""; position:absolute; left:0; top:6%; width:200%; height:46%; opacity:.9; animation:lgDrift 90s linear infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='260'%3E%3Cg fill='%23fff'%3E%3Crect x='60' y='40' width='120' height='22'/%3E%3Crect x='84' y='22' width='60' height='20'/%3E%3Crect x='40' y='60' width='170' height='18'/%3E%3Crect x='430' y='130' width='150' height='22'/%3E%3Crect x='462' y='110' width='70' height='22'/%3E%3Crect x='410' y='150' width='200' height='18'/%3E%3Crect x='720' y='60' width='90' height='18'/%3E%3Crect x='738' y='44' width='44' height='18'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 900px 260px; }
/* the village on the horizon: block houses, a few lit windows */
.lg-bg::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:min(32vh,240px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='240' preserveAspectRatio='none'%3E%3Cg%3E%3Crect x='0' y='150' width='96' height='90' fill='%23e3c08f'/%3E%3Crect x='96' y='118' width='70' height='122' fill='%23d79a68'/%3E%3Crect x='166' y='160' width='110' height='80' fill='%23efd6a8'/%3E%3Crect x='276' y='96' width='58' height='144' fill='%2310AEC2'/%3E%3Crect x='334' y='140' width='120' height='100' fill='%23e3c08f'/%3E%3Crect x='454' y='120' width='84' height='120' fill='%23cf8d5e'/%3E%3Crect x='538' y='158' width='100' height='82' fill='%23efd6a8'/%3E%3Crect x='638' y='108' width='66' height='132' fill='%23d79a68'/%3E%3Crect x='704' y='146' width='130' height='94' fill='%23e3c08f'/%3E%3Crect x='834' y='126' width='72' height='114' fill='%230d93a5'/%3E%3Crect x='906' y='156' width='54' height='84' fill='%23efd6a8'/%3E%3C/g%3E%3Cg fill='%23ffd76a'%3E%3Crect x='114' y='140' width='12' height='12'/%3E%3Crect x='290' y='118' width='12' height='12'/%3E%3Crect x='310' y='150' width='12' height='12'/%3E%3Crect x='472' y='142' width='12' height='12'/%3E%3Crect x='656' y='130' width='12' height='12'/%3E%3Crect x='852' y='150' width='12' height='12'/%3E%3C/g%3E%3Crect x='0' y='222' width='960' height='18' fill='%238fc77a'/%3E%3C/svg%3E") repeat-x 0 100% / auto 100%; }
@keyframes lgDrift{ to{ transform:translateX(-50%); } }
.lg-card{ width:min(380px,100%); padding:26px 24px 22px; border-radius:18px; background:rgba(255,255,255,.92); border:1px solid rgba(18,48,58,.12);
  box-shadow:0 18px 44px rgba(18,80,92,.22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); text-align:center; }
.lg-orb{ width:84px; height:84px; display:block; margin:-4px auto 6px; filter:drop-shadow(0 6px 16px rgba(255,200,60,.45)); animation:lgFloat 5s ease-in-out infinite; }
@keyframes lgFloat{ 50%{ transform:translateY(-5px); } }
.lg-card h1{ margin:0; font:700 26px/1.2 "Bricolage Grotesque","IBM Plex Sans",system-ui,sans-serif; letter-spacing:-.01em; }
.lg-sub{ margin:4px 0 18px; color:#5b6f76; font-size:14px; }
.lg-card form{ text-align:left; }
.lg-card label.lg-l{ display:block; font-size:13px; font-weight:600; margin:0 0 4px; }
.lg-f{ position:relative; margin-bottom:12px; }
.lg-card input[type=text],.lg-card input[type=password]{ width:100%; box-sizing:border-box; height:48px; margin:0; padding:0 14px; font:16px "IBM Plex Sans",system-ui,sans-serif; color:#12303a;
  background:#fff; border:1.5px solid rgba(18,48,58,.18); border-radius:12px; outline:none; transition:border-color .15s, box-shadow .15s; }
.lg-card input.pw{ padding-right:64px; }
.lg-card input:focus{ border-color:#10AEC2; box-shadow:0 0 0 4px rgba(16,174,194,.16); }
.lg-eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); height:36px; padding:0 10px; border:0; border-radius:9px; background:transparent;
  font:600 13px "IBM Plex Sans",system-ui,sans-serif; color:#0b7d8c; cursor:pointer; }
.lg-eye:hover{ background:rgba(16,174,194,.1); }
.lg-row{ display:flex; align-items:center; gap:8px; margin:2px 0 12px; font-size:14px; color:#3d555c; cursor:pointer; user-select:none; }
.lg-row input{ width:18px; height:18px; margin:0; accent-color:#10AEC2; }
.lg-caps{ font-size:12px; color:#9a6a00; margin:-6px 0 10px; }
.lg-err{ display:none; margin:0 0 12px; padding:10px 12px; border-radius:10px; background:#fdf0f1; border:1px solid #f3c4c8; color:#a3261a; font-size:14px; }
.lg-err.on{ display:block; }
.lg-go{ width:100%; height:48px; border:0; border-radius:12px; background:#0E7C8A; color:#fff; font:600 16px "IBM Plex Sans",system-ui,sans-serif; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px; transition:background .15s, transform .05s; }
.lg-go:hover{ background:#0a6b77; } .lg-go:active{ transform:translateY(1px); }
.lg-go:disabled{ opacity:.8; cursor:progress; }
.lg-go.busy::before{ content:""; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff; animation:lgSpin .8s linear infinite; }
@keyframes lgSpin{ to{ transform:rotate(360deg); } }
.lg-foot{ margin:14px 0 0; font-size:12px; color:#5b6f76; text-align:center; }
@media (prefers-reduced-motion:reduce){ .lg-bg::before,.lg-orb{ animation:none; } }
@media (max-height:560px){ .lg-orb{ width:56px; height:56px; } .lg-sub{ margin-bottom:12px; } }
/* contrast (O2, 2026-10-28, A1 A5): the button #0E7C8A 4.9:1 (hover #0a6b77), Show #0b7d8c 4.85:1, footnote #5b6f76 5.1:1 */