/* ============ 守夜人社区 · 卡塞尔学院 月夜主题（三页共享） ============ */
:root {
  --bg: #060a14;
  --bg-deep: #04060d;
  --card: rgba(16, 24, 44, 0.55);
  --card-solid: #0c1424;
  --gold: #9db8dd;
  --gold-bright: #eaf1fb;
  --gold-dim: #6d829f;
  --moon: #cfe0ff;
  --text: #d5ddf0;
  --text-dim: #8791a8;
  --red: #a01f2e;
  --border: rgba(140,175,235, 0.30);
  --border-cool: rgba(140, 170, 220, 0.18);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: "Noto Serif SC", "Songti SC", serif;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(140,175,235,0.3); color: #fff; }

/* 背景层 */
#bg-layer { position: fixed; inset: 0; z-index: -3; background: url("bg-castle-user.jpg") center 46%/cover no-repeat; transform: scale(1.12); filter: saturate(1.08) contrast(1.03); will-change: transform; }
#bg-overlay { position: fixed; inset: 0; z-index: -2; background:
  radial-gradient(ellipse at 50% 8%, rgba(120,150,220,0.14), transparent 45%),
  radial-gradient(ellipse at 50% 120%, rgba(6,10,20,0.85), transparent 60%),
  linear-gradient(180deg, rgba(4,8,18,0.52) 0%, rgba(4,8,18,0.16) 34%, rgba(4,8,18,0.80) 100%); }
#particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* 通用排版 */
.serif-en { font-family: "Cinzel", serif; }
.gradient-text {
  background: linear-gradient(180deg, #fff 0%, var(--moon) 45%, #93a6cc 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(160,190,255,0.25);
}
.divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px auto 26px; max-width: 340px; color: var(--gold-dim); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim)); }
.divider::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }
.divider .diamond { font-size: 10px; color: var(--gold); }

/* 玻璃卡片 */
.card {
  position: relative; background: var(--card);
  border: 1px solid var(--border-cool); border-radius: 14px; padding: 30px;
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: 14px; padding: 1px;
  background: linear-gradient(135deg, rgba(140,175,235,0.4), transparent 40%, transparent 60%, rgba(160,190,255,0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* 按钮 */
.btn {
  display: block; width: 100%; padding: 15px; background: rgba(140,175,235,0.06);
  border: 1px solid var(--gold); border-radius: 10px; color: var(--gold-bright);
  font-family: "Cinzel","Noto Serif SC",serif; font-size: 16px; letter-spacing: 0.3em; text-indent: 0.3em;
  cursor: pointer; transition: all .3s; position: relative; overflow: hidden; text-align: center;
}
.btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(180,210,250,0.35), transparent); transform: skewX(-20deg); transition: left .6s; }
.btn:hover { background: rgba(140,175,235,0.16); box-shadow: 0 0 28px rgba(140,175,235,0.35); }
.btn:hover::after { left: 130%; }
.btn:active { transform: scale(0.985); }
.btn-ghost { border-color: var(--border-cool); color: var(--text-dim); font-size: 13px; padding: 11px; letter-spacing: .2em; }
.btn-ghost:hover { border-color: var(--text-dim); background: rgba(255,255,255,0.04); box-shadow: none; }

.hidden { display: none !important; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); background: rgba(12,20,36,.95);
  border: 1px solid var(--gold); color: var(--gold-bright); padding: 12px 22px; border-radius: 10px;
  z-index: 300; font-size: 14px; letter-spacing: .05em; box-shadow: 0 8px 30px rgba(0,0,0,.5);
  display: flex; align-items: center; }
.toast-anim { opacity: 0; visibility: hidden; transform: translate(-50%, 16px); transition: opacity .3s, transform .3s, visibility .3s; }
.toast-anim.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* 校徽 */
.crest-img { display: block; border-radius: 50%; }

/* 城堡背景在窄屏上保持月亮与主楼的视觉焦点，并为文字留出安全对比度 */
@media (max-width: 640px) {
  body { min-height: 100dvh; }
  #bg-layer { background-position: 50% 42%; transform: scale(1.12); }
  #bg-overlay { background:
    linear-gradient(180deg, rgba(4,8,18,0.72) 0%, rgba(4,8,18,0.24) 28%, rgba(4,8,18,0.56) 58%, rgba(4,8,18,0.90) 100%),
    radial-gradient(ellipse at 50% 34%, rgba(20,42,82,0.16), transparent 56%); }
  .card { padding: 20px; border-radius: 12px; }
  .btn { min-height: 48px; padding: 13px 12px; font-size: 15px; }
  input, select, textarea, button { font-size: 16px; }
  .toast { left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); transform: none; justify-content: center; text-align: center; }
  .toast-anim { transform: translateY(16px); }
  .toast-anim.show { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #bg-layer { transform: none; }
}