@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');

/* ============================================
   Glimmerテンプレート追加CSS（キャラ投稿枠）
   使い方: <head> 内で style.css の直後にこのファイルを
   読み込んでください。
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="character-theme.css">

   背景の星・流れ星はテンプレート本体(script.js + .star)
   にお任せしているので、ここでは重複させていません。
============================================ */

/* ============================================
   単体投稿ページ対応
   「info」ボタンなどで飛ぶ単体投稿ページ
   (/スレ番号/投稿番号 のURL) では、投稿全体が
   <section class="post-anchor-posts"> に囲まれる。
   style.css の section{display:flex} に巻き込まれて
   中身(header/nav/info-boxなど)が横並びに潰れてしまう
   ため、このページだけ通常の縦積みに戻す。
============================================ */
.post-anchor-posts {
  display: block !important;
}

/* ============================================
   投稿フォーム保護
   style.css 側で input/textarea/button の見た目を
   全面リセットしているため、このサイトの投稿フォーム
   （メッセージ入力欄・文字色ピッカーなど）まで巻き込まれて
   見づらくなるのを防ぐ。フォーム部品はブラウザ標準の
   見た目に戻す。
   ただし class="copy-box" が付いた textarea（コピペ用の
   表示ボックス）は対象から除外し、下の専用スタイルを使う。
============================================ */
input, textarea:not(.copy-box), select, option, button {
  all: revert !important;
}

/* コピペ用テキストボックス（投稿の中に埋め込んで使う場合） */
.copy-box {
  display: block;
  width: 100%;
  max-width: var(--main-width);
  margin: 1em auto;
  background: rgba(var(--black), 0.3);
  border: 1px solid rgba(var(--white), 0.2);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--font);
  resize: vertical;
  box-sizing: border-box;
}

/* ============================================
   インフォメーション枠(テンプレート情報・サイト情報用)
   キャラの色に依存しない、テンプレ本来の水色(--point)を
   使った中立デザイン。
============================================ */
.info-box {
  max-width: var(--main-width);
  width: 100%;
  margin: 40px auto;
  padding: 2em 1.5em;
  position: relative;
  border: 1.5px solid var(--point);
  background:
    linear-gradient(rgba(var(--white), 0.05), rgba(var(--white), 0.05)),
    rgba(var(--black), 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 3px 3px 7px var(--shadow-color),
    inset -3px -3px 7px rgba(var(--black), 0.2),
    0 0 18px rgba(20, 255, 247, 0.25);
  border-radius: 10px;
  color: var(--font);
  line-height: 2;
}

.info-box::after {
  content: "✦";
  position: absolute;
  top: -14px;
  right: 14px;
  font-size: 20px;
  color: rgba(20, 255, 247, 0.7);
  animation: charSparkle 2.5s ease-in-out infinite;
  pointer-events: none;
}

.info-box .info-title {
  font-family: var(--heading-font-family), "Cinzel", serif;
  font-weight: 600;
  font-size: var(--h3-font-size);
  text-align: center;
  letter-spacing: 0.08em;
  color: var(--point);
  text-shadow: 0 0 8px rgba(20, 255, 247, 0.5);
  margin-bottom: 0.7em;
}

.info-box p {
  font-size: var(--body-font-size);
  margin: 0.5em 0;
}

/* owner/site name/urlなどの対応リスト用（style.cssの.link_listと組み合わせて使用可） */
.info-box .link_list dt {
  color: var(--point);
}

/* テンプレートのクレジット表記用 */
.info-box .info-credit {
  text-align: center;
  font-size: 0.85em;
  opacity: 0.8;
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: 1px solid rgba(var(--white), 0.15);
}

/* ============================================
   吹き出し(チャット風の会話表示)
   .mlk / .ktm / .sho / .skk と組み合わせて使う。
   アイコンは画像不使用、頭文字を丸背景で表示。
============================================ */
.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 0.7em;
  margin: 1.4em 0;
  max-width: var(--main-width);
}

.chat-msg.flip {
  flex-direction: row-reverse;
}

.chat-avatar {
  flex-shrink: 0;
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2em;
  font-family: var(--heading-font-family);
  color: #fff;
  background: var(--char-border, var(--char-color, var(--point)));
  box-shadow: 0 0 10px rgba(var(--char-rgb), 0.5);
}

.chat-bubble-wrap {
  max-width: 75%;
}

.chat-name-label {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--char-color, var(--point));
  margin: 0 0 0.3em 0.3em;
}

.chat-msg.flip .chat-name-label {
  text-align: right;
  margin: 0 0.3em 0.3em 0;
}

.chat-bubble {
  position: relative;
  background:
    linear-gradient(rgba(var(--char-rgb), 0.12), rgba(var(--char-rgb), 0.12)),
    rgba(var(--black), 0.25);
  border: 1.5px solid var(--char-border, var(--char-color, var(--point)));
  border-radius: 14px;
  padding: 0.8em 1.1em;
  color: var(--font);
  line-height: 1.7;
  box-shadow: 0 0 12px rgba(var(--char-rgb), 0.25);
}

.chat-bubble::before {
  content: "";
  position: absolute;
  bottom: 10px;
  left: -8px;
  border-width: 6px 8px 6px 0;
  border-style: solid;
  border-color: transparent var(--char-border, var(--char-color, var(--point))) transparent transparent;
}

.chat-msg.flip .chat-bubble::before {
  left: auto;
  right: -8px;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent var(--char-border, var(--char-color, var(--point)));
}

/* ============================================
   引用ブロック(セリフの引用用)
   .mlk / .ktm / .sho / .skk と組み合わせるとキャラの色になる。
   単体でも使用可（テンプレ本来の水色になる）。
============================================ */
.quote-block {
  position: relative;
  margin: 1.5em auto;
  max-width: var(--main-width);
  padding: 1.2em 1.8em 1.2em 2.6em;
  font-style: italic;
  color: var(--font);
  border-left: 3px solid var(--char-border, var(--char-color, var(--point)));
  background:
    linear-gradient(rgba(var(--char-rgb, 20, 255, 247), 0.08), rgba(var(--char-rgb, 20, 255, 247), 0.08));
  border-radius: 0 8px 8px 0;
}

.quote-block::before {
  content: "“";
  font-family: Georgia, serif;
  font-style: normal;
  font-size: 3em;
  line-height: 0;
  position: absolute;
  top: 0.55em;
  left: 0.2em;
  color: rgba(var(--char-rgb, 20, 255, 247), 0.4);
}

.quote-block p {
  margin: 0;
}

.quote-block .quote-source {
  display: block;
  text-align: right;
  font-style: normal;
  font-size: 0.85em;
  opacity: 0.75;
  margin-top: 0.6em;
}

/* ============================================
   区切り線・セクション見出し装飾
============================================ */

/* 文字入りの区切り(セクションタイトル代わりに) */
.section-divider {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin: 2.5em auto;
  max-width: var(--main-width);
  color: var(--point);
  font-family: var(--heading-font-family);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.section-divider::before,
.section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--point), transparent);
  opacity: 0.6;
}

/* 文字なし、星マークだけの区切り線 */
.divider-plain {
  position: relative;
  height: 1px;
  max-width: var(--main-width);
  margin: 2.5em auto;
  background: linear-gradient(90deg, transparent, var(--point), transparent);
  opacity: 0.5;
}

.divider-plain::after {
  content: "✦";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--body-color);
  padding: 0 0.6em;
  color: var(--point);
  font-size: 0.9em;
  opacity: 1;
}

/* ---- ナビアイコン(絵文字版) ----
   Material Symbolsフォントが読み込めない環境向けの代替。
   フォント依存せず、どの環境でも同じ見た目で表示される。 */
.nav-icon {
  font-size: var(--nav-icon-size, 3rem);
  display: block;
  line-height: 1;
}

/* ---- キャラ投稿枠の共通デザイン ---- */
.char-box {
  --char-rgb: 255, 255, 255; /* 各キャラのクラスで上書きされる */
  max-width: var(--main-width);
  width: 100%;
  margin: 0 auto;
  padding: 2em 1.5em;
  position: relative;
  border: 1.5px solid var(--char-border, var(--char-color, var(--point)));
  background:
    linear-gradient(rgba(var(--char-rgb), 0.08), rgba(var(--char-rgb), 0.08)),
    rgba(var(--black), 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 3px 3px 7px var(--shadow-color),
    inset -3px -3px 7px rgba(var(--black), 0.2),
    0 0 20px rgba(var(--char-rgb), 0.4);
  border-radius: 10px;
  color: var(--font);
  line-height: 2.2;
}

.char-box + .char-box {
  margin-top: 40px;
}

.char-box::after {
  content: "✦";
  position: absolute;
  top: -14px;
  right: 14px;
  font-size: 20px;
  color: rgba(var(--char-rgb), 0.7);
  animation: charSparkle 2.5s ease-in-out infinite;
  pointer-events: none;
}

.char-box .char-name {
  font-family: var(--heading-font-family), "Cinzel", serif;
  font-weight: 600;
  font-size: var(--h3-font-size);
  text-align: center;
  letter-spacing: 0.08em;
  color: var(--char-color, var(--point));
  text-shadow: 0 0 8px rgba(var(--char-rgb), 0.5);
  margin-bottom: 0.6em;
}

.char-box p:not(.char-name) {
  font-size: var(--body-font-size);
  margin: 0.5em 0;
}

.char-box details {
  margin: 1em 0 0;
  padding: 1em;
  border-radius: 8px;
  background: rgba(var(--char-rgb), 0.06);
  transition: background .6s;
}
.char-box details[open] {
  background: rgba(var(--char-rgb), 0.14);
}
.char-box details summary {
  cursor: pointer;
  outline: none;
  font-size: .9em;
  color: var(--char-color, var(--point));
}

@keyframes charSparkle {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%      { opacity: .9; transform: scale(1.2); }
}

/* ---- 開閉フェードイン ---- */
@keyframes charOpenDetail {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.char-box details[open] > *:not(summary) {
  animation: charOpenDetail .8s ease forwards;
}

/* ---- スクロールで文字が浮かび上がる演出（Chrome系のみ対応） ---- */
@supports (animation-timeline: view()) {
  .char-box .char-name,
  .char-box p {
    animation: charScrollReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
}
@keyframes charScrollReveal {
  from { opacity: 0; transform: translateY(20px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ============================================
   キャラ別カラー指定（にじさんじ公式カラー準拠）
============================================ */
.mlk { --char-color: #2C35BD; --char-border: #7B85E8; --char-rgb: 123, 133, 232; } /* ミラン・ケストレル */
.ktm { --char-color: #FF6E1E; --char-border: #FF6E1E; --char-rgb: 255, 110, 30; }  /* 北見遊征 */
.sho { --char-color: #A58CDC; --char-border: #A58CDC; --char-rgb: 165, 140, 220; } /* 星導ショウ */
.skk { --char-color: #C2AAE6; --char-border: #C2AAE6; --char-rgb: 194, 170, 230; } /* 榊ネス */

/* ---- マーカータグ ----
   背景を薄いパステル調に統一し、文字色も1色に揃えることで
   キャラごとの見た目の差(白文字/黒文字が混在する問題)を解消 */
mlktag, ktmtag, shotag, skktag {
  display: inline-block;
  align-self: flex-start;
  line-height: 2em;
  padding: 0 .3em;
  border-radius: 3px;
  color: #1A1A2E;
  font-weight: 600;
}
mlktag { background: #C7CCF2; } /* ミランの薄紫 */
ktmtag { background: #FFD3B8; } /* 北見の薄オレンジ */
shotag { background: #E2D8F5; } /* 星導の薄藤 */
skktag { background: #EAD9F2; } /* 榊の薄藤色 */

/* 汎用マーカー(名前だけ出てくる他キャラ用) */
rb, ri, kg {
  display: inline-block;
  align-self: flex-start;
  line-height: 2em;
  padding: 0 .3em;
  border-radius: 3px;
  color: #1A1A2E;
  font-weight: 600;
}
rb { background: #E2D8F5; }
ri { background: #C7F0EA; }
kg { background: #C9E4EE; }