/* ===== ベース設定 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  font-family: "Courier New", "MS Gothic", monospace;
  line-height: 1.6;
  word-break: break-word;
  -webkit-text-size-adjust: 100%;
  background-color: #000;
  color: #fff;
}


#age-check-overlay {
  display: none; /* 最初は非表示 */
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: #000;
  color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}




body {
  padding: 1rem;
  max-width: 100%;
  overflow-x: hidden;
}

/* ===== ヘッダー / フッター（背景色はつけない） ===== */
header, footer {
  text-align: center;
  padding: 1rem 0;
  color: #fff;
}

/* ===== メインコンテンツ ===== */
main {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

/* ===== 見出し ===== */
h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

h3 {
  font-size: 1.25rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* ===== テキスト ===== */
p {
  font-size: 1rem;
  text-indent: 1em;
  margin-bottom: 1rem;
}

ul, ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

dl {
  margin-bottom: 1rem;
}

dt {
  font-weight: bold;
  margin-top: 0.5rem;
}

dd {
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
}
/* ===== リンク ===== */
a {
  color: #4eaaff;               /* 青色文字 */
  text-decoration: underline;   /* 下線あり */
}
a:hover {
  color: #82cfff;
}

/* ===== 画像 / メディア ===== */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== 表（document.html用など）===== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  color: #fff;
}
th, td {
  border: 1px solid #444;
  padding: 0.5rem;
  text-align: left;
}
th {
  background-color: #111;
}

/* ===== レスポンシブ対応（モバイル向け） ===== */
@media screen and (max-width: 600px) {
  html {
    font-size: 14px;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  h3 {
    font-size: 1.1rem;
  }

  p, li, td, th {
    font-size: 0.95rem;
  }

  body {
    padding: 0.5rem;
  }

  main {
    padding: 0.5rem;
  }
}


/* ===== ===== */
table.profile-table {
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

header h1 a {
  color: inherit;             /* 親要素の色を引き継ぐ（＝白） */
  text-decoration: none;     /* 下線を消す（必要に応じて） */
}

details.char-details1 summary {
  /* font-size: 1.25rem;     h3 相当 */
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;             /* テキストと矢印の間隔 */
}

details.char-details1 summary::after {
  content: "▶";
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

details.char-details1[open] summary::after {
  content: "▼";
}

details.char-details2 summary {
  font-size: 1.25rem;     /* h3 相当 */
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;             /* テキストと矢印の間隔 */
}

details.char-details2 summary::after {
  content: "▷";
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

details.char-details2[open] summary::after {
  content: "▽";
}

/* enemy-profile.h2, enemy-profile.h3 {
  border-bottom: 1px solid #fff;
  padding-bottom: 0.2rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

enemy-profile.dl {
  margin-left: 1rem;
}

enemy-profile.dt {
  font-weight: bold;
  margin-top: 1rem;
}

enemy-profile.dd {
  margin-left: 1rem;
  white-space: pre-wrap;
} */

/*きゃた紹介欄*/
.wide-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.char-side-image {
  width: 240px;
  height: auto;
  object-fit: cover;
  border: 2px solid white;
  border-radius: 8px;
  flex-shrink: 0;
}

.char-text {
  flex: 1;
  min-width: 200px;
}

.tags {
  margin-bottom: 0.5em;
}
.tag {
  display: inline-block;
  background: #fff;
  color: #000;
  border: 1px solid #aaa;
  padding: 2px 6px;
  font-size: 0.85em;
  border-radius: 4px;
  margin-right: 0.3em;
}

/* スマホなど画面幅600px以下で縦並びに切り替え */
@media screen and (max-width: 600px) {
  .wide-layout {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .char-side-image {
    width: 100%;
    max-width: 300px;
  }

  .char-text {
    width: 100%;
  }
}


    /* 必要なCSSをページ内にも記述 */
    .enemy-intro {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .intro-image img {
      width: 200px;
      height: auto;
      border: 2px solid white;
      border-radius: 8px;
    }

    .intro-text {
      flex: 1;
      min-width: 250px;
    }

    .tags {
      margin-top: 0.5em;
      margin-bottom: 1em;
    }

    .tag {
      display: inline-block;
      background: #fff;
      color: #000;
      border: 1px solid #aaa;
      padding: 2px 6px;
      font-size: 0.85em;
      border-radius: 4px;
      margin-right: 0.3em;
    }

    .enemy-profile .section {
      margin-bottom: 1.5rem;
    }

    .enemy-profile h4 {
      border-bottom: 1px solid #ccc;
      padding-bottom: 0.3rem;
      margin-bottom: 0.5rem;
      font-size: 1.1rem;
    }

    @media (max-width: 600px) {
      .enemy-intro {
        flex-direction: column;
        align-items: center;
        text-align: left;
      }

      .intro-image img {
        width: 80%;
        max-width: 300px;
      }
    }



  /*敵の攻撃ページ*/
  .attack-img {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1.5rem auto;
    padding-bottom: 1rem;
  }

  .character-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  }

  .episode-result {
  border: 1px solid #ccc;       /* 薄いグレーの枠線 */
  padding: 0.5rem 0.5rem;         /* 内側余白 */
  margin-top: 2rem;             /* 上側マージンで前の要素と離す */

}

.episode-result .character-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.character-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border: 1px solid #aaa;
}

.indent {
  display: inline-block;
  width: 1em; /* または 2em で全角字下げ */
}


main .episode-text p {
  text-indent: 0;
}



/*ゲージ系*/
.status-label {
  font-weight: bold;
  font-family: monospace;
  margin-top: 1em;
  margin-bottom: 0.25em;
}

/* ステータスバー全体 */
.status-bar {
  width: 200px;
  height: 16px;
  background-color: black; /* 最大値を表す黒背景 */
  border: 2px solid #666;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

/* 減少部分の赤 */
.hp-loss, .spirit-loss {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #d00; /* 赤 */
  z-index: 2;
  /* 右端基準ではなく左から残量幅の後ろに配置 */
}

/* 残量部分 */
.hp-fill, .spirit-fill {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 3;
  border-radius: 3px 0 0 3px;
}

/* HPは緑 */
.hp-fill {
  background-color: #0f0;
  left: 0;
}

/* 青: 回復分 */
.hp-heal {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #00f;     /* はっきり見える青 */
  opacity: 0.6;
  z-index: 2;               /* 他より前面に */
  left: 0;
  border-radius: 3px 0 0 3px;
}

/* 精神力は黄色 */
.spirit-fill {
  background-color: #ff0;
  left: 0;
}
.status-effects {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.status-icon {
  width: 24px;
  height: 24px;
  background-color: #333;
  border: 1px solid #999;
  box-shadow: inset 0 0 3px #000;
  position: relative;
}


/* 状態別の色やマークを変える */
.status-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.effect-badge {
  font-family: monospace;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  background-color: #222;
  color: #fff;
  border: 1px solid #555;
  box-shadow: inset 0 0 2px #000;
}

/* 色分け */
.effect-badge.red {
  background-color: #400;
  color: #f88;
  border-color: #a00;
}

.effect-badge.blue {
  background-color: #003366;
  color: #aaddff;
  border-color: #227;
}

.effect-badge.yellow {
  background-color: #664400;
  color: #ffe08a;
  border-color: #aa7700;
}


/* コメント欄全体 */
#comment-section {
  margin-top: 2rem;
  font-family: "Courier New", "MS Gothic", monospace;
  color: #fff;
}

/* コメントフォーム */
#comment-form {
  background-color: #111;
  padding: 1rem;
  border: 1px solid #444;
  border-radius: 8px;
  max-width: 600px;
}

#comment-form input[type="text"],
#comment-form textarea {
  width: 100%;
  background-color: #000;
  color: #fff;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 0.5rem;
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: 0.8rem;
  resize: vertical;
}

#comment-form input[type="text"]:focus,
#comment-form textarea:focus {
  outline: none;
  border-color: #4eaaff;
  background-color: #111;
}

#comment-form button {
  color: #000;
  border: none;
  padding: 0.6rem 1.2rem;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.3s ease;
}

#comment-form button:hover {
  background-color: #82cfff;
}

/* コメント表示 */
#comments-display ul {
  list-style-type: none;
  margin-top: 1rem;
  padding-left: 0;
  max-width: 600px;
}

#comments-display li {
  background-color: #111;
  border: 1px solid #444;
  padding: 0.8rem 1rem;
  margin-bottom: 0.8rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

#comments-display li strong {
  color: #4eaaff;
  font-weight: bold;
}

#comments-display li small {
  color: #888;
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

/* モバイル対応 */
@media screen and (max-width: 600px) {
  #comment-form, #comments-display ul {
    max-width: 100%;
  }
}

.novel-prologue {
  background-color: #111;
  border-left: 4px solid #4eaaff;
  padding: 1rem;
  margin-bottom: 2rem;
}

.novel-prologue h3 {
  margin-bottom: 0.5rem;
  color: #82cfff;
}