/* FINAL AI の確認の画面 (id.final-ai.com・tasks-final-ai #676)。FINAL AI のログイン画面 (ccphone の static/auth.css・#531) の
   見た目をそのまま写した。配色は星海 (紺黒・微かな星・銀白の細い線)・印の色は銀白 (金はモチーフにしない #493)。操作は全部下端。
   参考 (auth.css と同じ): neave「Big Bang」https://codepen.io/neave/full/auAcm (形の考え方だけ・コードは写していない) */

:root{
  --bg:#05070f; --bg2:#0c1322; --bg3:#16203a; --line:rgba(150,182,228,.20);
  --fg:#eef3fb; --fg2:#a9bad4; --mk:#dde5f2; --mk-rgb:221,229,242; --mk-ink:#0b1120;
  --err:#ff8a8a; --ok:#5ad19a; --warn:#f0a34a;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0; min-height:100%; background:var(--bg); color:var(--fg)}
body{min-height:100dvh; display:flex; flex-direction:column; overflow-x:hidden;
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif; -webkit-text-size-adjust:100%;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
button{font:inherit; color:inherit; -webkit-tap-highlight-color:transparent; cursor:pointer}
button:disabled{opacity:.45; cursor:default}
[hidden]{display:none !important}

/* 星空: 小さな点を 3 層のタイルで散らし、1 層だけゆっくり瞬く (動きを減らす設定では止める) */
.sky{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(var(--mk-rgb),.55), transparent 60%),
    radial-gradient(1px 1px at 72% 9%, rgba(var(--mk-rgb),.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 38% 64%, rgba(var(--mk-rgb),.35), transparent 60%),
    radial-gradient(1px 1px at 88% 52%, rgba(var(--mk-rgb),.4), transparent 60%),
    radial-gradient(1px 1px at 22% 86%, rgba(var(--mk-rgb),.3), transparent 60%),
    radial-gradient(ellipse 120% 70% at 50% 0%, #0b1428 0%, var(--bg) 62%);
  background-size:260px 260px,310px 310px,370px 370px,230px 230px,410px 410px,100% 100%}
.sky::after{content:""; position:absolute; inset:0;
  background:radial-gradient(1.4px 1.4px at 55% 30%, rgba(var(--mk-rgb),.8), transparent 60%),
             radial-gradient(1.2px 1.2px at 8% 45%, rgba(var(--mk-rgb),.7), transparent 60%);
  background-size:330px 330px,290px 290px; animation:twinkle 5.5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.15} to{opacity:.9}}

/* ---- ログイン画面 ----
   上半分はホーム (村の玄関・village.js #504) のボルツマン脳をそのまま使う (09-26 daiki「ボルツマン脳は、宇宙に浮いてる状態。
   つまり今のホームの状態。あれをそのまんま転用して」)。地・淡い星・脳の後ろで呼吸する光・脳の大きさは村の .vil.home.vx と同じ値。
   脳は static/brain3d.js (three.js の同梱版)。WebGL が無い端末は村と同じ線画 (village-mark/p000.svg) のまま */
body.login{background:#02030a}
.login .sky{background:none}
.login .sky::before{content:""; position:absolute; inset:0; opacity:.35;
  background-image:radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 78% 12%, #fff, transparent),
    radial-gradient(1px 1px at 33% 64%, #fff, transparent), radial-gradient(1.2px 1.2px at 88% 72%, #fff, transparent),
    radial-gradient(1px 1px at 55% 88%, #fff, transparent), radial-gradient(1px 1px at 6% 83%, #fff, transparent),
    radial-gradient(1px 1px at 64% 33%, #fff, transparent), radial-gradient(1px 1px at 22% 42%, #fff, transparent)}
.login .sky::after{display:none}
.stage{flex:1; position:relative; display:flex; align-items:center; justify-content:center; min-height:300px}
.halo{position:absolute; left:50%; top:50%; width:260px; height:260px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(150,180,255,.10), rgba(150,180,255,0)); animation:breath 3.6s ease-in-out infinite}
@keyframes breath{50%{transform:translate(-50%,-50%) scale(1.12); opacity:.55}}
.brainbox{position:relative; display:block; width:calc(min(52vw, 26dvh, 250px) * 1.69); height:calc(min(52vw, 26dvh, 250px) * 1.69)}
.brainbox .fallback{width:100%; height:100%; display:block}
.brainbox.has3d .fallback{display:none}
.brainbox canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab}
body.reg .brainbox{width:calc(min(52vw, 20dvh, 220px) * 1.69); height:calc(min(52vw, 20dvh, 220px) * 1.69)}
.dock{padding:6px 20px calc(18px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:10px; width:100%; max-width:480px; margin:0 auto}
.lead{margin:0; text-align:center; font-size:14px; line-height:1.6; color:var(--fg2)}
.lead b{display:block; margin-bottom:2px; font-size:18px; font-weight:600; color:var(--fg)}
.btn-main{height:54px; border:0; border-radius:16px; background:var(--mk); color:var(--mk-ink);
  font-size:16.5px; font-weight:650; display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 0 0 1px rgba(var(--mk-rgb),.4), 0 10px 30px -12px rgba(var(--mk-rgb),.45)}
.btn-main svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.btn-main:active{transform:scale(.985)}
.btn-sub{height:48px; border:1px solid var(--line); border-radius:14px; background:rgba(12,19,34,.55); color:var(--fg); font-size:15px}
.msg{margin:0; min-height:1.5em; font-size:13.5px; line-height:1.5; color:var(--fg2); text-align:center}
.msg:empty{min-height:0}
.msg.err{color:var(--err)}
.msg.ok{color:var(--ok)}
.field{display:flex; flex-direction:column; gap:4px; text-align:left; font-size:12.5px; color:var(--fg2)}
.field input{height:50px; border-radius:12px; border:1px solid var(--line); background:rgba(12,19,34,.72); color:var(--fg);
  padding:0 14px; font-size:17px; outline:none}
.field input:focus{border-color:rgba(var(--mk-rgb),.7); box-shadow:0 0 0 3px rgba(var(--mk-rgb),.12)}
.field input.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase}
@media (prefers-reduced-motion: reduce){ .halo{animation:none} }

.to{margin:-4px 0 0; text-align:center; font-size:12.5px; color:var(--fg2); font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.to:empty{display:none}
.foot{margin:2px 0 0; text-align:center; font-size:11.5px; line-height:1.5; color:rgba(169,186,212,.7)}