/*
==============================================================
login-style.css
==============================================================
【分離元】login.html (Phase L8, 2026-05-14, セッション18)

【分離前の状態】
  login.html (204行) に <style> ブロック(約120行) と
  <script> ブロック(約60行) が inline で残っていた。
  Phase L5 で他10ファイルは inline 排除済みだったが、
  login.html だけ漏れていた。

【このファイルに入っているもの】
  - ページ全体のリセット + body レイアウト(グラデーション背景)
  - floating particles アニメーション
  - .card, .logo, .logo-sub スタイル
  - .name-input, .start-btn, .continue-btn, .rename-link
  - 初回/リターンビュー共通スタイル
  - レスポンシブ対応

【分離理由】
  Phase L5 で確定した「全 HTML から inline 排除」方針の完全適用。
  保守性向上、CSP 対応への布石。
==============================================================
*/
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif}
body{
  background:linear-gradient(160deg,#b8e4f9 0%,#cef2fb 28%,#daf6ee 52%,#d4edaa 68%,#bede8a 100%);
  display:flex;align-items:center;justify-content:center;min-height:100vh;
}

/* floating particles */
.particles{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.p{position:absolute;border-radius:50%;opacity:.55;animation:pfloat linear infinite}
@keyframes pfloat{
  0%{transform:translateY(110vh) rotate(0deg);opacity:0}
  10%{opacity:.55}
  90%{opacity:.55}
  100%{transform:translateY(-12vh) rotate(360deg);opacity:0}
}

/* card */
.card{
  position:relative;z-index:1;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px);
  border:2px solid rgba(201,184,255,.45);
  border-radius:28px;
  padding:44px 36px 40px;
  width:min(340px,90vw);
  text-align:center;
  box-shadow:0 24px 70px rgba(80,60,160,.14),0 0 0 1px rgba(255,255,255,.6) inset;
  animation:cardIn .5s cubic-bezier(.16,1,.3,1);
}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}

/* logo */
.logo{
  font-size:46px;font-weight:900;letter-spacing:.06em;
  background:linear-gradient(135deg,#ff8fa3,#c9b8ff,#7dd9d8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;margin-bottom:6px;
  text-shadow:none;
  filter:drop-shadow(0 2px 12px rgba(160,128,232,.35));
}
.logo-sub{font-size:16px;color:#a090c0;letter-spacing:.14em;text-transform:uppercase;margin-bottom:32px}

/* first-time view */
.prompt-lbl{font-size:16px;font-weight:700;color:#2d3561;margin-bottom:14px;letter-spacing:.03em}
.name-input{
  width:100%;padding:12px 16px;font-size:16px;
  background:rgba(201,184,255,.12);
  border:2px solid rgba(201,184,255,.5);
  border-radius:14px;color:#2d3561;outline:none;
  transition:.18s;text-align:center;letter-spacing:.06em;
}
.name-input:focus{border-color:#c9b8ff;background:rgba(201,184,255,.22);box-shadow:0 0 0 3px rgba(201,184,255,.25)}
.name-input::placeholder{color:#b0a0cc;letter-spacing:.04em}
.char-count{font-size:16px;color:#b0a0cc;margin-top:5px;text-align:right}

.start-btn{
  margin-top:20px;width:100%;
  padding:14px;font-size:16px;font-weight:800;
  background:linear-gradient(135deg,#ff8fa3,#ff6080);
  color:#fff;border:none;border-radius:18px;cursor:pointer;
  letter-spacing:.06em;
  box-shadow:0 6px 24px rgba(255,96,128,.42);
  transition:.2s;
}
.start-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 32px rgba(255,96,128,.56)}
.start-btn:active:not(:disabled){transform:scale(.97)}
.start-btn:disabled{background:linear-gradient(135deg,#d0c4e0,#c0b4d0);box-shadow:none;cursor:not-allowed}

/* return view */
.welcome-ico{font-size:44px;margin-bottom:10px;animation:wico .6s ease-out}
@keyframes wico{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
.welcome-txt{font-size:20px;font-weight:800;color:#2d3561;margin-bottom:6px}
.welcome-name{
  display:inline-block;
  background:linear-gradient(135deg,#ff8fa3,#c9b8ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.welcome-sub{font-size:16px;color:#8080a8;margin-bottom:28px}

.continue-btn{
  width:100%;padding:14px;font-size:16px;font-weight:800;
  background:linear-gradient(135deg,#c9b8ff,#a080e8);
  color:#fff;border:none;border-radius:18px;cursor:pointer;
  letter-spacing:.06em;
  box-shadow:0 6px 24px rgba(160,128,232,.42);
  transition:.2s;
}
.continue-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(160,128,232,.56)}
.continue-btn:active{transform:scale(.97)}

.rename-link{
  display:block;margin-top:14px;
  font-size:16px;color:#b0a0cc;cursor:pointer;
  text-decoration:underline;text-decoration-style:dotted;
  letter-spacing:.04em;transition:.15s;
}
.rename-link:hover{color:#8060b8}

/* hidden util */
.hidden{display:none!important}
.start-btn,.rename-link{touch-action:manipulation}
@media(max-width:700px){
  html,body{overflow-x:hidden}
  body{min-height:100dvh}
}

/* メール認証フォーム (L59) */
.auth-divider{
  display:flex;align-items:center;gap:10px;
  margin:20px 0 14px;color:#b0a0cc;font-size:13px;letter-spacing:.04em;
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;background:rgba(201,184,255,.4);
}
.auth-tabs{
  display:flex;border:1.5px solid rgba(201,184,255,.5);
  border-radius:12px;overflow:hidden;margin-bottom:10px;
}
.auth-tab{
  flex:1;padding:8px 4px;font-size:14px;font-weight:700;
  background:transparent;border:none;cursor:pointer;
  color:#b0a0cc;transition:.15s;
}
.auth-tab.active{background:rgba(201,184,255,.28);color:#5040a0}
.auth-tab:hover:not(.active){background:rgba(201,184,255,.10)}
.auth-msg{
  margin-top:8px;min-height:18px;font-size:13px;
  text-align:center;color:#8080a8;line-height:1.5;
}
.auth-msg.error{color:#e04060}
.auth-msg.success{color:#20a060}

/* conflict選択 (L62) */
.conflict-msg{font-size:14px;color:#5a4a80;text-align:center;line-height:1.7;margin-bottom:4px}
.conflict-date{font-size:12px;color:#806040;text-align:center;opacity:.8;margin-bottom:4px}