/* =========================================================
   account.css
   アカウントページ（account.html）専用のスタイル。
   配色・角丸・影は style.css の CSS変数をそのまま使い、
   トップページと同じ「ポップでカジュアル」な質感に揃える。
   ========================================================= */

/* ---------- 表示・非表示の共通クラス ----------
   account.html / reset.html の画面切り替えは JS が .hidden を
   付け外しして行う。style.css には個別セレクタごとの .hidden しか
   無く（.modal-overlay.hidden 等）、汎用の定義が抜けていたため
   ここで補う。これが無いと全セクションが同時に表示されてしまう。 */
.hidden { display: none !important; }

.account-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-home-link {
  display: inline-block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  text-decoration: none;
  margin-bottom: 6px;
}
.account-home-link:hover { color: var(--color-primary); }

.account-card {
  background: var(--color-card);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- ギャップカード(準備中プレースホルダー) ----------
   design_handoff の「ギャップヒーロー」の配色・表記ルールのみを流用。
   数値は未実装につき常にダッシュ("—")で、実データは表示しない。 */
.gap-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gap-card-eyebrow { font-size: .7rem; font-weight: 800; color: var(--color-ink-soft); letter-spacing: .12em; }
.gap-scale-badge {
  flex-shrink: 0;
  background: var(--color-ink);
  color: var(--color-bg);
  font-size: .72rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
}
.gap-placeholder {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-bg);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.gap-placeholder-track { flex: 1; height: 2px; background: var(--color-line-strong); }
.gap-placeholder-side { text-align: center; }
.gap-placeholder-label { font-size: .68rem; font-weight: 700; color: var(--color-ink-soft); white-space: nowrap; }
.gap-placeholder-value {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  color: var(--color-ink-faint);
  line-height: 1.2;
}

.account-section-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
  color: var(--color-ink);
}

/* ---------- 決済からの戻りを知らせる帯 ---------- */
.account-banner {
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.65;
  background: var(--color-bg-accent);
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
}
.account-banner.success {
  background: #d8f7ef;
  border-color: #a8e4d3;
  color: #14584c;
}

/* ---------- ログイン / 新規登録タブ ---------- */
.account-tabs { justify-content: center; }

.account-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* modal-field は style.css 側の定義を流用するが、
   モーダル外でも縦積みで綺麗に並ぶよう最小限だけ補う */
.account-form .modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
  font-size: .85rem;
  color: var(--color-ink);
}
.account-form input[type="email"],
.account-form input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
}
.account-form input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* ---------- 補足テキスト ---------- */
.account-hint,
.account-muted {
  font-size: .8rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  margin: 0;
}
.account-error {
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-primary-dark);
  background: #ffecea;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0;
}

.account-success {
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.6;
  color: #14584c;
  background: #e2f7f1;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0;
}

/* ---------- パスワードをお忘れの方 ---------- */
.account-forgot-row {
  margin: 0;
  text-align: center;
}
.link-btn {
  background: none;
  border: none;
  padding: 4px 2px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-secondary-dark, var(--color-primary));
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--color-primary); }

.account-forgot {
  border-top: 2px dashed var(--color-line);
  padding-top: 14px;
}
.account-forgot .account-section-title { font-size: .98rem; }

.account-note {
  border-top: 2px dashed var(--color-line);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--color-ink);
}
.account-note p { margin: 0; }
.account-note a { color: var(--color-primary); font-weight: 700; }

.account-disclaimer {
  font-size: .74rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0;
}

/* ---------- マイページの項目行 ---------- */
.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-line);
  font-size: .88rem;
}
.account-row-label { font-weight: 700; color: var(--color-ink-soft); flex-shrink: 0; }
.account-row-value { font-weight: 800; color: var(--color-ink); text-align: right; word-break: break-all; }

.plan-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-bg);
  font-size: .8rem;
  font-weight: 800;
}
.plan-badge.premium { background: var(--color-accent); color: var(--color-ink); }

/* ---------- ボタン ---------- */
/* reset.html では <a> にも .start-game-btn を付けるため、
   button 前提の既定値（中央寄せ・下線なし）を補う */
a.start-game-btn,
a.back-link {
  display: block;
  text-align: center;
  text-decoration: none;
}
a.back-link { text-decoration: underline; }

.start-game-btn.secondary { background: var(--grad-secondary); }
.start-game-btn:disabled {
  filter: grayscale(.7);
  opacity: .6;
  cursor: not-allowed;
}

#account-member .back-link,
#forgot-form .back-link { align-self: center; }