@charset "UTF-8";

/* 共通トークンと最小限のリセット。各画面 (chat / site / blog / ending) は個別の CSS で見た目を決める */

:root {
  color-scheme: dark;
  --bg: #0b0e12;
  --panel: #11161d;
  --ink: #dce8f5;
  --muted: #8291a1;
  --line: #263442;
  --blue: #9fc9e9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.9 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }

button, input { font: inherit; }
button {
  border: 1px solid var(--line);
  background: #121a23;
  color: var(--ink);
  padding: .6rem 1.1rem;
  cursor: pointer;
  border-radius: 2px;
}
button:hover { border-color: var(--blue); color: var(--blue); }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.linklike { border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; }
.linklike:hover { color: var(--blue); }
.quiet-link { color: var(--blue); }

.avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #2a3b4c, #14202c); flex: none; display: inline-block; }
.avatar.unknown { background: #1a1f26; border: 1px dashed var(--line); }
.avatar.nagi { background: linear-gradient(135deg, #3a3f46, #1c2128); }

/* パスワードフォーム (site / blog 共通) */
.pw { max-width: 380px; margin: 2rem 0; }
.pw label { display: block; font-size: .8rem; letter-spacing: .12em; color: var(--muted); }
.pw-hint { margin: .2rem 0 .6rem; color: var(--muted); font-size: .9rem; }
.pw input { display: block; width: 100%; background: #0e141b; border: 1px solid var(--line); color: var(--ink); padding: .75rem; margin: 0 0 .8rem; }
.pw-error { color: #d7b9b9; margin: .8rem 0 0; }

/* デバッグ */
.debug { width: 100%; font-size: .75rem; color: var(--muted); margin-top: 1rem; }
.debug pre { white-space: pre-wrap; background: #0e141b; padding: .6rem; border: 1px solid var(--line); }
.debug input { width: 3em; background: #0e141b; border: 1px solid var(--line); color: var(--ink); padding: .2rem .4rem; }
.debug button { padding: .2rem .6rem; font-size: .75rem; }

.notfound { min-height: 100vh; display: grid; place-content: center; text-align: center; }
.notfound h1 { font-weight: 300; font-size: 3rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}