/* パスキーのログイン (#531) の画面の見た目。ログイン画面と端末の画面で共通。ログインしていなくても読める。
   配色は ccphone の星海 (紺黒・微かな星・銀白の細い線)。印の色は銀白 (--mk・#493 金はモチーフにしない)。
   操作は全部下端 (片手・親指)。閉じるは下端のバーの右端の × (#494)。
   ログイン画面の上半分はホームのボルツマン脳そのもの (参考は village.js と同じ neave「Big Bang」https://codepen.io/neave/full/auAcm)。
   端末の画面の参考 (CodePen・公開作品は MIT): jo_Geek「Night Sky (Pure CSS fx)」https://codepen.io/jo_Geek/pen/EOKvLE (CSS だけの星空)・
     jeycon「Dark minimalist card」https://codepen.io/jeycon/pen/zYzxyLM (暗い地の静かな札)。コードは写さず、形の考え方だけを借りた */
: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}}

/* FINAL AI のマーク。11/5 から赤いピル (#1576・wheel-mark.svg が赤いピルの絵。前は輪のある惑星を型にして銀白で塗った) */
.mark{display:block; width:var(--m,104px); height:var(--m,104px); background:url(/static/wheel-mark.svg?v=gloss1576) center/contain no-repeat}

/* ---- ログイン画面 ----
   上半分はホーム (村の玄関・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} }

/* ---- 端末の画面 ---- */
.ahead{display:flex; align-items:center; gap:10px; padding:18px 20px 6px}
.ahead h1{margin:0; font-size:19px; font-weight:600}
.ahead .mark{--m:24px}
.alist{flex:1; padding:6px 16px 16px; width:100%; max-width:560px; margin:0 auto}
.asub{margin:0 4px 12px; font-size:13px; color:var(--fg2)}
.dev{border:1px solid var(--line); border-radius:16px; background:rgba(12,19,34,.6); padding:12px 14px; margin-bottom:10px}
.dev-h{display:flex; align-items:center; gap:10px}
.dev-h svg{flex:none; width:22px; height:22px; fill:none; stroke:var(--mk); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.dev-t{flex:1; min-width:0}
.dev-t b{font-weight:600}
.dev-t small{display:block; color:var(--fg2); font-size:12.5px; line-height:1.45}
.tag{display:inline-block; margin-left:8px; padding:0 8px; border-radius:99px; font-size:11.5px; line-height:20px;
  color:var(--mk-ink); background:var(--mk); vertical-align:1px}
.dev-x{flex:none; height:36px; padding:0 14px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--fg2); font-size:14px}
.dev-c{margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.dev-c p{margin:0 0 10px; font-size:13.5px; color:var(--fg2)}
.dev-c .row{display:flex; gap:8px}
.dev-c .row button{flex:1; height:44px; border-radius:12px; font-size:15px}
.btn-danger{border:1px solid rgba(255,138,138,.55); background:rgba(255,107,107,.14); color:var(--err)}
.inv{border:1px solid rgba(var(--mk-rgb),.35); border-radius:18px; padding:16px; margin:4px 0 12px; background:rgba(12,19,34,.7)}
.inv p{margin:0 0 10px; font-size:13.5px; color:var(--fg2)}
.inv .code{font:600 23px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-align:center; padding:10px 0; user-select:all; -webkit-user-select:all}
.inv small{display:block; text-align:center; color:var(--fg2); font-size:12.5px; margin-bottom:10px}
.inv .btn-sub{width:100%}
.abar{position:sticky; bottom:0; display:flex; align-items:center; gap:10px; padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(5,7,15,0), rgba(5,7,15,.92) 30%); width:100%; max-width:560px; margin:0 auto}
.abar .btn-main{flex:1; height:50px; font-size:15.5px}
.abar .btn-sub{height:50px; padding:0 16px}
.xbtn{flex:none; position:relative; width:44px; height:44px; border-radius:50%; border:0; background:transparent; color:var(--x-fg, var(--fg)); -webkit-tap-highlight-color:transparent}   /* 線だけの×(#1530) */
.xbtn:active{background:color-mix(in srgb, currentColor 15%, transparent)}
@media (hover:hover){ .xbtn:hover{background:color-mix(in srgb, currentColor 9%, transparent)} }
.xbtn::before, .xbtn::after{content:""; position:absolute; left:50%; top:50%; width:19px; height:2px; border-radius:1px; background:currentColor}
.xbtn::before{transform:translate(-50%,-50%) rotate(45deg)}
.xbtn::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ---- 入り方 (#676 パスキーでログイン・案A: Face ID・認証アプリ・予備のコード) ----
   端末の画面と同じ札 (.dev) の形。状態は 2 行目の小さな文字、押す所は右端。開くと札の中に手順が出る */
.ah2{margin:18px 4px 8px; font-size:13px; font-weight:600; color:var(--fg2); letter-spacing:.04em}
.ah2:first-child{margin-top:4px}
.way{border:1px solid var(--line); border-radius:16px; background:rgba(12,19,34,.6); padding:12px 14px; margin-bottom:10px}
.way.done{border-color:rgba(90,209,154,.38)}
.way-h{display:flex; align-items:center; gap:10px}
.way-h svg{flex:none; width:22px; height:22px; fill:none; stroke:var(--mk); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.way.done .way-h svg{stroke:var(--ok)}
.way-t{flex:1; min-width:0}
.way-t b{font-weight:600}
.way-t small{display:block; color:var(--fg2); font-size:12.5px; line-height:1.45}
.way.done .way-t small{color:var(--ok)}
.way-b{flex:none; height:36px; padding:0 14px; border-radius:10px; border:1px solid rgba(var(--mk-rgb),.55); background:rgba(var(--mk-rgb),.08); color:var(--fg); font-size:14px}
.way.done .way-b{border-color:var(--line); background:transparent; color:var(--fg2)}
.way-c{margin-top:12px; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px}
.way-c p{margin:0; font-size:13.5px; color:var(--fg2)}
.way-c .btn-main{height:48px; font-size:15.5px}
.way-c .btn-sub{height:44px; display:flex; align-items:center; justify-content:center; text-decoration:none}
.qr{align-self:center; width:180px; height:180px; padding:8px; border-radius:12px; background:#fff}
.qr svg{width:100%; height:100%; display:block}
.key{font:600 15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em; text-align:center; color:var(--fg);
  user-select:all; -webkit-user-select:all; word-break:break-all}
.rc{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:6px 10px;
  font:600 15.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em; text-align:center; user-select:all; -webkit-user-select:all}
.rc li{border:1px solid var(--line); border-radius:8px; padding:3px 0; background:rgba(5,7,15,.5)}
.way-c .row{display:flex; gap:8px}
.way-c .row button{flex:1}
.sess{display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:10px 4px}
.sess:last-child{border-bottom:0}
.sess .way-t small{font-size:12px}
.steps{margin:2px 4px 12px; font-size:13px; color:var(--fg2); line-height:1.55}
.steps b{color:var(--fg)}
/* ログイン画面の「6 桁で入る」「予備のコードで入る」(#676)。文字のリンクの形で、主の「ログイン」より控えめに */
.alt{display:flex; gap:8px}
.alt .btn-sub{flex:1; height:44px; font-size:14px}
.sess svg{flex:none; width:22px; height:22px; fill:none; stroke:var(--mk); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.sess .dev-x{margin-left:auto}
.key span{display:inline-block; margin:0 .3em; white-space:nowrap}
body.acct .alist{padding-bottom:96px}   /* 下端の帯 (ログアウト・追加・×) の下に、最後の欄やボタンが隠れないように */
.abar .xbtn{margin-left:auto}          /* × はいつも下端の右端 (設定の途中で左のボタンが無くても・#494) */


/* ---- Apple・Google で続ける (tasks-final-ai #1380 Google・Appleログイン) ----
   ボタンはサーバが client ID を持つ窓口だけ出す。ロゴは 16×16 の升目の点 (auth-login.html の先頭の mx-apple・mx-google)。
   星空の見た目 (黒と緑を切った端末) では、ほかのボタンと同じ細い線の札に銀白の点のロゴ */
.mxdefs{position:absolute; width:0; height:0; overflow:hidden}
.mxl,.mxrain,.mxttl,.mxpr{display:none}
.idp{display:flex; flex-direction:column; gap:10px}
.btn-idp{position:relative; height:50px; border:1px solid var(--line); border-radius:14px; background:rgba(12,19,34,.55); color:var(--fg);
  font-size:15px; display:flex; align-items:center; justify-content:center}
.btn-idp .ico{position:absolute; left:16px; top:13px; width:24px; height:24px; fill:var(--mk); overflow:visible}
.btn-idp .ico .d2{opacity:.38}
.idp .or{margin:2px 0 0; text-align:center; font-size:12.5px; color:var(--fg2)}

/* 黒と緑の見た目 (#1363) のログインの画面。10/30 daiki が選んだ案1「縦に 2 本」: 黒い地に降るコード・FINAL AI・> NEW USER・
   Apple・Google・── OR ──・LOGIN・INVITE CODE。字は全部「CONTINUE WITH」と同じ等幅 (10/30 00:53 daiki「continue withのフォントで全体を揃えて」)・
   CONTINUE WITH の字は緑 (01:16「continue withは緑色でいい」)。色は matrix.css の --mx-* と同じ値 (ログインの前に matrix.css を読まないので値で書く) */
html.mx{background:#000}
/* 地は html に塗り、body は透かす (body に塗ると、後ろに置いた降るコードの板が隠れる) */
html.mx body.login{background:transparent; font-family:ui-monospace,"SF Mono",Menlo,"DejaVu Sans Mono",monospace}
html.mx .login .sky,html.mx .login .halo,html.mx .login .brainbox{display:none}
html.mx .mxrain{display:block; position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 0 38%, transparent 64%); mask-image:linear-gradient(#000 0 38%, transparent 64%)}
html.mx .mxttl{display:block; color:#c2dccb; font-size:26px; letter-spacing:.32em; padding-left:.32em; text-shadow:0 0 14px rgba(63,207,124,.35)}
html.mx .lbl{display:none}
html.mx .mxl{display:inline}
html.mx .login .lead{color:#5a9a72; font-size:13px}
html.mx .login .lead b{color:#c2dccb; font-weight:600}
html.mx body.login:not(.again) #dockLogin > .lead{display:none}
html.mx .mxpr{display:block; margin:0 0 2px; font-size:15px; color:#3fcf7c}
html.mx .mxpr em{display:inline-block; width:9px; height:16px; background:#3fcf7c; vertical-align:-3px; margin-left:4px; animation:mxblk 1.1s steps(1) infinite}
@keyframes mxblk{50%{opacity:0}}
html.mx .btn-idp{height:48px; border:1px solid #3fcf7c; border-radius:4px; background:#000; box-shadow:0 0 10px rgba(63,207,124,.35);
  color:#3fcf7c; font-size:14px; letter-spacing:.06em}
html.mx .btn-idp .mxl{font-weight:600; margin-left:22px}
html.mx .btn-idp .ico{left:14px; top:11px; fill:#3fcf7c; filter:drop-shadow(0 0 1.6px rgba(63,207,124,.95))}
html.mx .btn-idp .ico .p1,html.mx .btn-idp .ico .p2,html.mx .btn-idp .ico .p3,
html.mx .btn-idp .ico .p4,html.mx .btn-idp .ico .p5,html.mx .btn-idp .ico .p6{animation:mxpul 3.6s ease-in-out infinite}
html.mx .btn-idp .ico .p2{animation-delay:-.6s} html.mx .btn-idp .ico .p3{animation-delay:-1.2s} html.mx .btn-idp .ico .p4{animation-delay:-1.8s}
html.mx .btn-idp .ico .p5{animation-delay:-2.4s} html.mx .btn-idp .ico .p6{animation-delay:-3s}
@keyframes mxpul{0%,100%{fill:#3fcf7c} 50%{fill:#d9ffe7}}
html.mx .idp .or{color:#2f6b48; font-size:13px; margin:4px 0 2px}
html.mx .login .btn-main{height:48px; border:1px solid #3fcf7c; border-radius:4px; background:transparent; color:#3fcf7c; box-shadow:none;
  font-size:16px; font-weight:600; letter-spacing:.16em}
html.mx .login .btn-main svg{display:none}
html.mx .login .btn-sub{height:42px; border:1px solid #123020; border-radius:4px; background:transparent; color:#5a9a72; font-size:13px; letter-spacing:.06em}
html.mx .login #toReg{height:40px; border:1px dashed #1f7a47; letter-spacing:.1em}
html.mx .login #regLabel{font-size:0}
html.mx .login #regLabel::after{content:attr(data-mx); font-size:15px; letter-spacing:.1em}
html.mx .login .msg{color:#5a9a72}
html.mx .login .msg.ok{color:#3fcf7c}
html.mx .login .msg.err{color:#e06a6a}
html.mx .login .field{color:#5a9a72}
html.mx .login .field input{border-radius:4px; border-color:#1f7a47; background:#000; color:#c2dccb; font-family:inherit}
html.mx .login .field input:focus{border-color:#3fcf7c; box-shadow:0 0 0 3px rgba(63,207,124,.14)}
@media (prefers-reduced-motion: reduce){html.mx .mxpr em,html.mx .btn-idp .ico rect{animation:none}}
html.mx.mxrest .mxpr em,html.mx.mxrest .btn-idp .ico rect{animation-play-state:paused}   /* 窓から離れた間と 1 分触らない間 (auth-mx.js・#1042) */
/* ログインと端末の画面の Apple・Google の行 (#1380): 点のロゴは線ではなく塗り */
.way-h svg.ico{fill:var(--mk); stroke:none}
.way.done .way-h svg.ico{fill:var(--ok); stroke:none}
.way-h svg.ico .d2{opacity:.38}