/* =========================
   全体：近未来背景
========================= */
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at center, #0a1a24 0%, #02070b 70%);
  font-family: "Orbitron", "Segoe UI", monospace;
  color: #7ffcff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* スキャンライン */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03),
    rgba(255,255,255,.03) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

/* =========================
   コンテナ
========================= */
.sf-container {
  width: 90%;
  max-width: 420px;
  padding: 30px 20px 40px;
  position: relative;
}

/* ネオンフレーム */
.sf-container::before,
.sf-container::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(127,252,255,.4);
  box-shadow: 0 0 12px rgba(127,252,255,.4);
  pointer-events: none;
}

.sf-container::after {
  inset: 6px;
  border-color: rgba(127,252,255,.2);
}

/* =========================
   タイトル
========================= */
.sf-title {
  text-align: center;
  letter-spacing: .2em;
  margin: 0 0 6px;
  text-shadow: 0 0 10px #7ffcff;
}

.sf-sub {
  text-align: center;
  margin-bottom: 25px;
  font-size: 12px;
  opacity: .7;
}

/* =========================
   フォーム
========================= */
.sf-field {
  margin-bottom: 22px;
}
#loginMessage {
  position: relative;
  overflow: visible;
}
.sf-field label {
  display: block;
  font-size: 11px;
  margin-bottom: 6px;
  letter-spacing: .15em;
  opacity: .8;
}

.sf-field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(127,252,255,.4);
  padding: 10px 4px;
  color: #e6ffff;
  font-size: 14px;
  letter-spacing: .1em;
  outline: none;
  transition: .3s;
}

.sf-field input:focus {
  border-color: #7ffcff;
  box-shadow: 0 6px 0 -4px #7ffcff;
}

/* =========================
   ボタン
========================= */
.sf-btn {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  background: transparent;
  border: 2px solid #7ffcff;
  color: #7ffcff;
  letter-spacing: .2em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: .3s;
}

.sf-btn::before {
  content: "";
  position: absolute;
  top: -120%;
  left: 0;
  width: 100%;
  height: 120%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(127,252,255,.4),
    transparent
  );
  transition: .5s;
}

.sf-btn:hover::before {
  top: 120%;
}

.sf-btn:hover {
  background: rgba(127,252,255,.1);
  box-shadow: 0 0 20px rgba(127,252,255,.6);
}

/* =========================
   メッセージ
========================= */
.sf-message {
  display: none;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid;
  font-size: 13px;
  text-align: center;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: rgba(0,0,0,.6);
  position: relative;
}

/* 成功 */
.sf-message.success {
  color: #7CFF7C;
  border-color: #7CFF7C;
  box-shadow: 0 0 12px rgba(124,255,124,.6);
  animation: glowGreen .3s ease;
}

/* 失敗 */
.sf-message.error {
  color: #FF6B6B;
  border-color: #FF6B6B;
  box-shadow: 0 0 12px rgba(255,107,107,.6);
  animation: glitch .15s linear 2;
}

/* =========================
   戻る
========================= */
.sf-back {
  text-align: center;
  margin-top: 22px;
}

.sf-back a {
  color: #7ffcff;
  text-decoration: none;
  font-size: 12px;
  opacity: .7;
}

.sf-back a:hover {
  opacity: 1;
  text-shadow: 0 0 6px #7ffcff;
}

/* =========================
   アニメーション
========================= */
@keyframes glowGreen {
  from { box-shadow: 0 0 0 rgba(124,255,124,0); }
  to   { box-shadow: 0 0 12px rgba(124,255,124,.6); }
}

@keyframes glitch {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-2px); }
  50%  { transform: translateX(2px); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

/* =========================
   ログウィンドウ
========================= */
.sf-log {
  display: block;                 /* 最初から表示 */
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(127,252,255,.6);
  background: rgba(0,0,0,.5);
  color: #7ffcff;
  font-size: 12px;
  letter-spacing: .2em;
  text-align: left;
  min-height: 38px;
  box-shadow: inset 0 0 10px rgba(127,252,255,.3);
}

/* 成功 */
.sf-message.success {
  color: #7CFF7C;
  border-color: #7CFF7C;
  box-shadow:
    inset 0 0 10px rgba(124,255,124,.4),
    0 0 12px rgba(124,255,124,.6);
}

/* 失敗 */
.sf-message.error {
  color: #FF6B6B;
  border-color: #FF6B6B;
  box-shadow:
    inset 0 0 10px rgba(255,107,107,.4),
    0 0 12px rgba(255,107,107,.6);
}
/* =========================
   タイプカーソル
========================= */
.sf-log::after {
  content: "▌";
  margin-left: 4px;
  animation: cursorBlink 1s steps(1) infinite;
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
#loginMessage .char {
  display: inline-block;
  will-change: transform, opacity;
}
/* =========================
   レア演出：文字ランダム崩壊
========================= */
.chaos-letter {
  display: inline-block;
  position: relative;
  animation: fallRandom 1.4s ease-in forwards;
}

@keyframes fallRandom {
  0% {
    transform: translate(0,0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform:
      translate(var(--drift, 0px), 120vh)
      rotate(var(--rot, 0deg));
    opacity: 0;
  }
}
/* フィールド消失前フラッシュ */
.sf-field.vanish {
  animation: fieldVanish .3s ease forwards;
}

@keyframes fieldVanish {
  0%   { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(4px); }
}
/* =========================
   レア演出：中身だけ消失
========================= */
.sf-field .vanish-inner {
  animation: innerVanish .35s ease forwards;
}

@keyframes innerVanish {
  0% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    filter: blur(6px);
  }
}
.sf-field input {
  text-shadow: 0 0 6px rgba(127,252,255,.4);
}
/* =========================
   input 完全リセット
========================= */
.sf-field input {
  background-color: transparent !important;
  -webkit-appearance: none;
  appearance: none;

  box-shadow: none !important;
  outline: none;
}

/* Chrome / Edge オートフィルの白背景を殺す */
.sf-field input:-webkit-autofill,
.sf-field input:-webkit-autofill:hover,
.sf-field input:-webkit-autofill:focus,
.sf-field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #e6ffff !important;
  caret-color: #7ffcff;
  transition: background-color 9999s ease-out 0s;
}
#matrix-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: rgba(0,0,0,0.85);
  opacity: 0;
  transition: opacity 0.6s ease;
}

#fadeOverlay.fade-in {
  opacity: 1;
}
#fadeOverlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

#fadeOverlay.instant-black {
  opacity: 1;
  transition: none; /* ← 即時 */
}

#fadeOverlay.fade-in {
  opacity: 1;
}