/* =========================================================================
   †觸レルナ†  style.css  ―  2000年代個人サイト＋レンタル掲示板/チャットの再現
   - トップ系（index/top/nikki/404）… 黒地・ジオシティーズ風のちょいダサ装飾
   - 掲示板（bbs）… 昔の2ちゃんねる風（クリーム色）
   - なりきりチャット（chat）… 昔のレンタルチャット風（クリーム色）
   点滅は一切入れない。動きは prefers-reduced-motion で止める。
   ========================================================================= */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: #05070c; }

body {
  margin: 0; padding: 0;
  font-family: "MS PGothic", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
  font-size: 15px; line-height: 1.65; color: #c7cfdb;

  /* 横に長く・縦に短い飾り帯を repeat-y。幅が足りないので右側は地色のまま
     ＝当時の「狭い画面用の背景を広い画面で見たら右が切れてる」あの感じ。 */
  background-color: #05070c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='128'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='%235b4a8c' stroke-width='2.4' opacity='.55'%3E%3Cpath d='M10 -6 C46 20 8 44 34 64 C58 82 22 104 44 134'/%3E%3Cpath d='M34 64 C70 52 84 78 62 96 C50 106 66 120 84 112'/%3E%3Cpath d='M22 20 C54 8 70 32 46 44'/%3E%3Cpath d='M20 96 C-6 86 2 116 26 108'/%3E%3C/g%3E%3Cg stroke='%233f639c' stroke-width='1.6' opacity='.5'%3E%3Cpath d='M4 8 C34 26 6 50 26 70 C44 86 14 108 30 132'/%3E%3Cpath d='M46 44 C66 40 74 56 60 66'/%3E%3C/g%3E%3Cg fill='%236a58a0' opacity='.5' stroke='none'%3E%3Ccircle cx='62' cy='96' r='3.4'/%3E%3Ccircle cx='46' cy='44' r='2.6'/%3E%3Ccircle cx='26' cy='108' r='2.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-position: left top;
  background-attachment: fixed;
}

a       { color:#6c9fff; }
a:visited { color:#b58cff; }
a:hover  { color:#ff6b6b; }
a:active { color:#ff0000; }

/* ---- 中央の固定幅コンテナ ---- */
.wrap{
  width: 800px; margin: 0 auto; background: #0b0f17;
  border-left: 1px solid #223; border-right: 1px solid #223; min-height: 100vh;
}

/* ---- タイトルバー（ロゴは "画像っぽい" 立体ボックス） ---- */
.titlebar{ padding: 14px 12px 10px; text-align: center; background: #080b12;
  border-bottom: 3px double #4a6ea5; }
.titlebar .logo{
  display:inline-block; padding: 5px 24px;
  background: linear-gradient(#2c406b, #0c1526);
  border-top: 2px solid #5f86bf; border-left: 2px solid #5f86bf;
  border-right: 2px solid #0a1220; border-bottom: 2px solid #0a1220;
  font-size: 32px; font-weight: bold; letter-spacing: 3px; color: #d7e8ff;
  text-shadow: 2px 2px 0 #b81a7c, -1px -1px 0 #00a7cc;
}
.titlebar .sub  { font-size: 13px; color: #9fb6d6; margin-top: 6px; }
.titlebar .sub2 { font-size: 12px; color: #6f86a6; }

/* ---- カウンタ（右寄せ・LCD風。Total / 本日 / 昨日） ---- */
.counter{
  text-align: right; padding: 6px 14px; background:#0a0e16;
  border-bottom: 1px dotted #33405c; font-size: 12px; color:#7f93b4;
  font-family: "Courier New", monospace;
}
.counter b, .counter [data-counter], .counter [data-c-today],
.counter [data-c-yesterday], .counter [data-c-total]{
  display:inline-block; background:#000; color:#7dff69; padding: 0 5px;
  border:1px solid #1c3a1c; letter-spacing: 2px; font-weight: bold;
  box-shadow: inset 0 0 4px #041a04;
}

/* ---- 2カラム（左メニュー + 右本文） ---- */
table.layout{ width:100%; border-collapse: collapse; }
table.layout > tbody > tr > td{ vertical-align: top; }
td.menu{
  width: 160px; background:#0a0f1a; border-right: 2px ridge #2f3d5e;
  padding: 10px 8px; font-size: 13px;
}
td.main{ padding: 12px 16px 20px; }

.menu ul{ list-style: none; margin: 0 0 14px; padding: 0; }
.menu li{ margin: 4px 0; padding-left: 14px; text-indent: -14px; }
.menu li::before{ content: "■"; color:#e04141; margin-right: 4px; font-size: 10px; }
.menu .mtitle{
  text-align: center; font-weight: bold; color:#ffe14d; font-size: 12px;
  background:#1b1230; border: 1px solid #46356e; padding: 2px 0; margin: 12px 0 5px;
  letter-spacing: 1px;
}
.menu .mtitle::before{ content: "★ "; }
.menu .mtitle::after { content: " ★"; }

/* ---- 見出しバー（ちょいダサ・原色ベタ） ---- */
h2.page{
  font-size: 17px; color:#fff; font-weight:bold; text-align:center;
  background:#a80f0f; border-top:1px solid #e05a5a; border-bottom:2px solid #5a0606;
  padding: 4px 4px; margin: 2px 0 12px; letter-spacing: 2px;
}
.bar-blue{
  font-size: 14px; color:#fff; font-weight:bold; text-align:center;
  background:#0d0dbd; border-top:1px solid #6a6aff; border-bottom:2px solid #05055c;
  padding: 3px 4px; margin: 12px 0 8px; letter-spacing: 2px;
}
.kanri{
  background: #10182a; border: 2px groove #33477a;
  padding: 9px 11px; font-size: 13px; color:#aab6c9; margin: 10px 0;
}
hr.rule{ border:0; border-top:1px solid #2a3958; margin: 14px 0; }

/* ---- 工事中バー ---- */
.construction{
  background: repeating-linear-gradient(45deg,#3a3200,#3a3200 8px,#1c1800 8px,#1c1800 16px);
  color:#ffe14d; font-size: 13px; text-align:center; padding: 4px;
  border: 1px solid #665a00; margin: 8px 0;
}

/* ---- Win95風ボタン ---- */
.btn95{
  font-family: inherit; font-size: 14px; cursor: pointer; background: #c0c0c0; color:#000;
  border-top: 2px solid #fff; border-left: 2px solid #fff;
  border-right: 2px solid #404040; border-bottom: 2px solid #404040; padding: 3px 14px;
}
.btn95:active{
  border-top: 2px solid #404040; border-left: 2px solid #404040;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}

/* ---- 偽ファイル一覧（/top） ---- */
table.files{ width:100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
table.files th, table.files td{ border:1px solid #33435f; padding: 4px 6px; }
table.files th{ background:#152036; color:#c1e0fa; text-align:left; }
table.files td.size{ text-align:right; font-family:"Courier New",monospace; color:#9fb6d6; }
table.files td.up{ font-family:"Courier New",monospace; color:#6f86a6; font-size:12px; }
table.files a{ text-decoration: underline; }
table.files tr:hover td{ background:#101a2c; }

/* ---- 88x31 バナー（CSS描画のミニバナー） ---- */
.banners{ margin: 12px 0 4px; }
.b88{
  display:inline-block; width:88px; height:31px; margin:2px;
  border:1px solid #000; font-size:10px; line-height:31px; text-align:center;
  color:#fff; background:#204; vertical-align: middle; overflow:hidden; text-shadow: 1px 1px #000;
}

/* ---- フッター ---- */
.foot{
  border-top: 2px groove #26324c; margin-top: 18px; padding: 10px 12px 12px;
  font-size: 12px; color: #6f86a6; text-align: center;
}
.foot .dis{ display:block; margin-bottom: 4px; }
.foot .nushi{ color:#556; letter-spacing: .5px; }

/* ---- リンク関連ゾーン（バナー / リンクリレー / 相互リンク / 直リン禁止） ---- */
.linkzone{
  border-top: 2px groove #26324c; margin-top: 4px; padding: 14px 14px 26px;
  font-size: 12px; color:#8a9ab8; text-align: center; line-height: 1.9;
}
.linkzone p{ margin: 7px 0; }
.linkzone .lz-banner{ font-size: 12px; }
.linkzone .lz-banner img{ vertical-align: middle; margin-right: 8px; border: 0; image-rendering: pixelated; }
.linkzone .lz-relay{ color:#c1a3e0; letter-spacing: .5px; font-size: 12px; }
.linkzone .lz-relay a{ margin: 0 5px; white-space: nowrap; }
.linkzone .lz-rules{ color:#9a8; font-size: 11px; line-height: 1.8; }
.linkzone b{ color:#ff9a9a; }

body.bbs2ch .linkzone, body.chatd .linkzone{
  border-top: 1px dashed #bba; color:#666;
}
body.bbs2ch .linkzone b, body.chatd .linkzone b{ color:#c00; }
body.bbs2ch .linkzone .lz-relay, body.chatd .linkzone .lz-relay{ color:#606; }
body.bbs2ch .linkzone .lz-rules, body.chatd .linkzone .lz-rules{ color:#888; }

/* ---- 隠しテキスト（選択反転でだけ読める） ---- */
.hidden-note{
  color: #05070c; background: #05070c;
  font-size: 12px; user-select: text; display:block; margin: 12px 0; padding: 2px;
}
.hidden-note::selection { color:#fff; background:#334; }
.hidden-note *::selection{ color:#fff; background:#334; }

/* ---- マウス追尾の☆ ---- */
.trail{
  position: fixed; top:0; left:0; pointer-events:none; z-index: 9998;
  color:#c1e0fa; font-size:13px; text-shadow: 0 0 3px #82abde; transform: translate(-50%,-50%);
}

/* ---- 暗転オーバーレイ ---- */
.blackout{
  position: fixed; inset:0; background:#000; z-index: 9999;
  opacity: 0; transition: opacity 1.6s ease;
  display:flex; align-items:center; justify-content:center;
  color:#7a0f0f; font-size: 28px; letter-spacing: 4px; font-family: serif; pointer-events: none;
}
.blackout.on{ opacity: 1; pointer-events: auto; }

/* ---- 文字化けオーバーレイ（掲示板：初回書き込みの一瞬だけ） ---- */
.b2-glitchout{
  position: fixed; inset:0; background:#0a0e14; z-index: 9999;
  color:#6f86a6; font-family:"MS Gothic","ＭＳ ゴシック",monospace;
  font-size: 12px; line-height: 1.4; letter-spacing: 1px;
  padding: 14px; overflow:hidden; word-break: break-all;
  opacity: 0; transition: opacity .12s ease; pointer-events:none;
}
.b2-glitchout.on{ opacity: 1; }

/* ---- スプラッシュ（/） ---- */
.splash{
  min-height: 100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  background: radial-gradient(circle at 50% 40%, #0d1626, #05070c 70%); padding: 20px;
}
.splash .logo{
  display:inline-block; padding: 8px 30px; margin-bottom: 4px;
  background: linear-gradient(#2c406b, #0c1526);
  border-top: 3px solid #5f86bf; border-left: 3px solid #5f86bf;
  border-right: 3px solid #0a1220; border-bottom: 3px solid #0a1220;
  font-size: 44px; font-weight:bold; letter-spacing: 4px; color:#d7e8ff;
  text-shadow: 3px 3px 0 #b81a7c, -2px -2px 0 #00a7cc;
}
.splash .sub{ color:#9fb6d6; font-size: 14px; margin-top: 8px; }
.splash .warn{ color:#c98; font-size: 13px; margin: 18px 0; max-width: 420px; line-height:1.75;
  border: 2px groove #444; padding: 12px 16px; background: rgba(0,0,0,.3); }
.splash .enter{ margin-top: 10px; }
.splash .enter .btn95{ margin: 0 6px; }
.splash .linkzone{ border-top: 1px solid #2a3958; margin-top: 22px; }

/* ---- about（現代の可読レイアウト） ---- */
.about-page{
  max-width: 760px; margin: 0 auto; padding: 22px 18px 40px;
  color: #d7deea; line-height: 1.85; font-size: 16px;
}
.about-page h1{ font-size: 22px; color:#c1e0fa; }
.about-page h2{ font-size: 17px; color:#a9c4e6; margin-top: 28px; border-bottom:1px solid #2a3958; padding-bottom:4px; }
.about-page dt{ font-weight: bold; color:#c1e0fa; margin-top: 10px; }
.about-page dd{ margin: 2px 0 0; }
.about-page a{ color:#6c9fff; }
.about-page .linkzone{ text-align: left; }
@media (max-width: 820px){ .about-page{ padding: 16px 12px 40px; } }

/* ---- 資料室（怪異一覧） ---- */
.shiryo-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#10182a; border:2px groove #33477a; padding:8px 10px; margin:10px 0 14px;
  font-size:13px; color:#aab6c9;
}
.shiryo-toolbar .btn95.active{
  background:#3a5a9a; color:#fff;
  border-top-color:#7fa0e0; border-left-color:#7fa0e0;
  border-right-color:#0c1830; border-bottom-color:#0c1830;
}
.shiryo-toolbar .shiryo-count{ margin-left:auto; color:#6f86a6; font-size:12px; }
.shiryo-entry{
  border:1px solid #2a3958; border-radius:2px; background:#0b1120;
  padding:9px 14px; margin:0 0 8px;
}
.shiryo-entry[open]{ padding-bottom:14px; margin-bottom:14px; }
.shiryo-title{
  font-size:15px; color:#ffe14d; font-weight:bold; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:baseline;
}
.shiryo-title::-webkit-details-marker, .shiryo-label::-webkit-details-marker{ display:none; }
.shiryo-entry[open] > .shiryo-title{ margin:0 0 8px; padding-bottom:5px; border-bottom:1px dashed #33477a; }
.shiryo-title .shiryo-name::before{ content:"▶"; font-size:10px; color:#6f86a6; margin-right:7px; vertical-align:2px; }
.shiryo-entry[open] > .shiryo-title .shiryo-name::before{ content:"▼"; }
.shiryo-title:hover .shiryo-name{ text-decoration:underline; }
.shiryo-title .shiryo-date{ font-size:11px; color:#6f86a6; font-family:"Courier New",monospace; }
.shiryo-title .shiryo-pin{ font-size:11px; color:#82abde; margin-left:8px; }
.shiryo-b{ margin:0 0 4px; }
.shiryo-sep{ border:0; border-top:1px dotted #33477a; margin:10px 0; }
.shiryo-label{
  font-size:11px; color:#a9c4e6; font-weight:bold; letter-spacing:1px;
  margin:10px 0 3px; cursor:pointer; list-style:none;
}
.shiryo-sec:first-of-type > .shiryo-label{ margin-top:2px; }
.shiryo-label::before{ content:"▶"; font-size:8px; margin-right:6px; vertical-align:1px; }
.shiryo-sec[open] > .shiryo-label::before{ content:"▼"; }
.shiryo-label:hover{ color:#ffe14d; }
.shiryo-entry p{ color:#d7deea; font-size:14px; line-height:1.85; margin:0 0 8px; }
.shiryo-a{
  color:#c1a3e0; font-size:13.5px; line-height:1.85; margin:10px 0 0; padding:2px 0 2px 12px;
  border-left:3px solid #614a8f;
}
.shiryo-entry .hidden-note{ margin-top:10px; }
.shiryo-entry p.shiryo-add{ color:#a9bcd8; font-size:13.5px; }
.shiryo-wip .shiryo-title{ color:#9a8a4a; margin-bottom:4px; }
.shiryo-entry p.shiryo-wip-note{ color:#6f86a6; font-size:12.5px; margin:0; }
/* 五十音順の索引と行見出し */
.shiryo-index{
  display:flex; flex-wrap:wrap; gap:4px; margin:0 0 14px;
  font-size:13px;
}
.shiryo-index a, .shiryo-index span{
  display:inline-block; min-width:26px; text-align:center; padding:3px 4px;
  border:1px solid #33477a; background:#10182a;
}
.shiryo-index a{ color:#ffe14d; text-decoration:none; }
.shiryo-index a:hover{ background:#3a5a9a; color:#fff; }
.shiryo-index .shiryo-index-empty{ color:#3a4660; border-color:#1d2740; }
.shiryo-gyo{
  font-size:13px; color:#a9c4e6; letter-spacing:2px; margin:18px 0 8px;
  padding:2px 8px; border-left:4px solid #3a5a9a; background:#10182a;
  display:flex; justify-content:space-between; align-items:baseline;
}
.shiryo-gyo-top{ font-size:11px; letter-spacing:0; color:#6f86a6; text-decoration:none; }
.shiryo-gyo-top:hover{ color:#ffe14d; }
/* 百物語：段が進むほど暗くなる */
.momo-entry{ transition: background-color 1.2s ease, border-color 1.2s ease; }
.momo-stage-1{ background:#060913; border-color:#1c2640; }
.momo-stage-2{ background:#010205; border-color:#10151f; }
.momo-stage-done{ background:#05070d; }
.momo-link{ color:inherit; text-decoration:none; border-bottom:1px dotted rgba(200,211,232,.18); }
.momo-link:hover{ color:#8fd0ff; border-bottom-color:#8fd0ff; }
.momo-line{ opacity:0; animation: momoFade 1.6s ease forwards; }
@keyframes momoFade{ to{ opacity:1; } }
@media (max-width: 600px){
  .shiryo-title{ flex-direction:column; align-items:flex-start; gap:2px; }
}


/* =========================================================================
   BBS ―― 昔の2ちゃんねる風（クリーム色・別サイトから間借りしてる体）
   ========================================================================= */
body.bbs2ch{
  background: #efefef; color:#000; font-size: 15px; min-height: 100vh;
  font-family: "MS PGothic","ＭＳ Ｐゴシック","Osaka",sans-serif;
}
html:has(body.bbs2ch), html:has(body.chatd){ background: #dcdcdc; }
body.bbs2ch a       { color:#0000ee; }
body.bbs2ch a:visited { color:#551a8b; }
body.bbs2ch a:hover  { color:#ee0000; }

.b2-top{
  background:#efefef; border-bottom:1px solid #ccc; padding: 4px 8px;
  font-size: 13px; color:#888;
}
.b2-top a{ margin-right: 10px; }
.b2-wrap{ max-width: 920px; margin: 0 auto; padding: 6px 12px 20px; }

.b2-title{
  color:#ff0000; font-size: 20px; font-weight: bold; margin: 6px 0 2px;
  font-family: "MS PGothic", sans-serif;
}
.b2-sub{ font-size: 13px; color:#008000; margin-bottom: 6px; }
.b2-nav{ font-size: 13px; margin: 4px 0 10px; color:#555; }
.b2-nav a{ margin-right: 10px; }

.b2-kanri{
  background:#ffffcc; border:1px solid #cebb66; padding: 7px 10px;
  font-size: 13px; color:#333; margin: 6px 0 10px;
}

/* 自動リロード行（2ちゃんっぽく素朴に） */
.b2-auto{
  font-size: 13px; color:#555; margin: 4px 0 8px; padding: 4px 6px;
  background:#e6e6e6; border:1px solid #ccc;
}
.b2-auto #bbsClock{ float:right; color:#333; font-family:"Courier New",monospace; }

#thread{ margin: 6px 0; }
#thread .res{ margin: 0 0 13px; line-height: 1.55; }
#thread .res-h{ font-size: 13px; color:#000; }
#thread .res-n{ color:#000; font-weight: bold; }
#thread .res-name{ color:#008000; font-weight: bold; }   /* 名無しさん＝緑 */
#thread .res-d{ color:#000; }
#thread .res-id{ color:#000; }
#thread .res-b{ margin: 3px 0 0 2em; color:#000; word-wrap: break-word; }
#thread .res-b .host{ color:#888; font-size: 12px; }
#thread .res-b .anchor{ color:#0000ee; text-decoration: underline; cursor: pointer; }
#thread .res.glitch .res-b, #thread .res .g{ color:#b00000; letter-spacing: 1px; }
#thread .res.mine .res-name{ color:#ff0000; }             /* 自分の書き込みは赤 */

.b2-form{
  margin-top: 18px; padding: 9px; background:#ffffee; border:1px solid #cebb66;
}
.b2-form .r{ margin-bottom: 5px; font-size: 13px; }
.b2-form input[type=text]{
  border:1px solid #999; padding: 2px 3px; font: inherit; font-size: 14px; background:#fff; color:#000;
}
.b2-form textarea{
  width: 100%; height: 76px; margin: 4px 0; resize: vertical;
  border:1px solid #999; padding: 3px; font: inherit; font-size: 14px; background:#fff; color:#000;
}
.b2-hint{ font-size: 12px; color:#888; margin-top: 6px; }

body.bbs2ch #relay{
  position: fixed; inset:0; background:#efefef; z-index: 9997;
  display:flex; align-items:center; justify-content:center; color:#008000; font-size: 15px;
}

/* decay（ほんの少しおかしい） */
#thread.decay1 .res-d{ color:#555; }
#thread.decay2{ letter-spacing: .3px; }
#thread.decay2 .res-name{ color:#0a7d0a; }
#thread.decay3{ color:#222; }
#thread.decay3 .res-b{ margin-left: 1.7em; }

/* 偽404 */
#bbs404{
  position: fixed; inset:0; background:#fff; color:#5f6368; z-index: 10000;
  display:flex; align-items:center; justify-content:center; padding: 24px;
  font-family: "Segoe UI","Helvetica Neue",Arial,"MS PGothic",sans-serif; overflow:auto;
}
#bbs404 .b404.chrome{ text-align:center; max-width: 380px; }
#bbs404 .b404.chrome .b404-dino{ font-size: 60px; line-height:1; filter: grayscale(1); }
#bbs404 .b404.chrome .b404-code{ font-size: 50px; font-weight:700; letter-spacing:6px; color:#3c4043; margin: 10px 0 6px; }
#bbs404 .b404.chrome .b404-t{ font-size: 15px; margin: 4px 0; color:#3c4043; }
#bbs404 .b404.chrome .b404-s{ font-size: 12px; color:#9aa0a6; letter-spacing: 1px; }
#bbs404 .b404.chrome .b404-b{ margin-top: 18px; font-size: 13px; }
#bbs404 .b404.chrome a{ color:#1a73e8; }
#bbs404 .b404.ie{
  max-width: 540px; color:#000; font-family: "Times New Roman","MS PGothic",serif;
  font-size: 13px; line-height: 1.5;
}
#bbs404 .b404.ie .ie-title{ font-size: 20px; font-weight: bold; margin-bottom: 12px; display:flex; align-items:center; gap: 8px; }
#bbs404 .b404.ie .ie-ico{ font-size: 20px; filter: grayscale(1); }
#bbs404 .b404.ie hr{ border:0; border-top:1px solid #999; margin: 12px 0; }
#bbs404 .b404.ie .ie-strong{ font-weight: bold; margin: 8px 0 4px; }
#bbs404 .b404.ie ul{ margin: 4px 0; padding-left: 22px; }
#bbs404 .b404.ie li{ margin: 3px 0; }
#bbs404 .b404.ie .ie-foot{ margin-top: 10px; }
#bbs404 .b404.ie a{ color:#00e; }


/* =========================================================================
   なりきりチャット ―― 昔のレンタルチャット風（dochat 系）
   ========================================================================= */
body.chatd{
  background: #ffffdd; color:#000; font-size: 15px; min-height: 100vh;
  font-family: "MS PGothic","ＭＳ Ｐゴシック","Osaka",sans-serif;
}
body.chatd a       { color:#0000ee; }
body.chatd a:visited { color:#551a8b; }
body.chatd a:hover  { color:#ee0000; }

.cd-wrap{ max-width: 760px; margin: 0 auto; padding: 8px 12px 20px; }
.cd-title{ text-align:center; font-size: 21px; font-weight: bold; margin: 6px 0 10px; }
.cd-top{ font-size: 13px; color:#666; margin-bottom: 8px; }
.cd-top a{ margin-right: 10px; }

.cd-formbox{
  background:#ffffcc; border:1px solid #cc9; padding: 9px 11px; margin-bottom: 8px;
}
.cd-formbox table{ border-collapse: collapse; margin: 0 auto; }
.cd-formbox th{ text-align: right; padding: 3px 6px; font-weight: normal; white-space: nowrap; font-size: 13px; }
.cd-formbox td{ padding: 3px 4px; }
.cd-formbox input[type=text]{ border:1px solid #999; padding: 2px 3px; font: inherit; font-size: 14px; }
.cd-formbox select{ font: inherit; font-size: 14px; }
.cd-swatch{ display:inline-block; width: 36px; height: 15px; border:1px solid #666; vertical-align: middle; margin-left: 6px; }

.cd-links{ font-size: 13px; color:#666; text-align:center; margin: 6px 0; }
.cd-links a{ margin: 0 4px; }

.cd-status{ font-size: 13px; color:#333; margin: 6px 0 4px; }
.cd-status a{ color:#0000ee; }

#chatLog{
  height: 360px; overflow-y: scroll; background:#fff; border:1px solid #999;
  padding: 9px; font-size: 14px; line-height: 1.75;
}
#chatLog .cl{ margin: 0 0 3px; }
#chatLog .cl .cl-name{ font-weight: bold; }
#chatLog .cl .cl-arrow{ color:#666; margin: 0 4px; }
#chatLog .cl .cl-role{ color:#555; }
#chatLog .cl .cl-msg{ color:#000; }
#chatLog .cl .cl-t{ color:#999; font-size: 12px; margin-left: 6px; }
#chatLog .cl .cl-pl{ color:#888; }
#chatLog .cl.bot .cl-name{ color:#0a6ebd; }
#chatLog .cl.wolf .cl-name, #chatLog .cl.wolf .cl-msg{ color:#6a6aa8; }
#chatLog .sys{ color:#c00; margin: 3px 0; }

.cd-send{ margin-top: 8px; }

body.chatd #chatResetModal{
  position: fixed; inset:0; background: rgba(0,0,0,.4); z-index: 10001;
  display:flex; align-items:center; justify-content:center;
}


/* =========================================================================
   百物語（momonogatari.html）―― 謎解き・チャットログ風
   ========================================================================= */
.mg-wrap{ max-width: 640px; margin: 40px auto; padding: 0 16px 60px; }
.mg-title{ text-align:center; font-size: 20px; color:#c1e0fa; letter-spacing: 3px; margin-bottom: 4px; }
.mg-sub{ text-align:center; font-size: 12px; color:#6f86a6; margin-bottom: 22px; }
.mg-log{ font-size: 15px; line-height: 1.9; }
.mg-log .mg-q{ color:#c1a3e0; margin: 16px 0 4px; }
.mg-log .mg-a{ color:#8fd6a0; margin: 0 0 4px; padding-left: 1.4em; }
.mg-log .mg-r{ color:#7f93b4; margin: 0 0 4px; }
.mg-log .mg-final{ color:#c1e0fa; margin: 10px 0 4px; }
.mg-form{ margin-top: 18px; display:flex; gap:8px; }
.mg-form input[type=text]{
  flex:1; background:#0b0f17; border:1px solid #33405c; color:#d7deea;
  padding:6px 8px; font: inherit; font-size:14px;
}
.mg-back{ text-align:center; margin-top:26px; font-size:13px; }

/* decay（段階2・3でじわり不穏に） */
.mg-log.decay1 .mg-q{ color:#a98fc9; }
.mg-log.decay2{ letter-spacing:.3px; }
.mg-log.decay2 .mg-q{ color:#8a5a9c; }
.mg-log.decay2 .mg-a{ color:#5f9a72; }
.mg-log.decay3{ color:#8a95ac; }
.mg-log.decay3 .mg-q{ color:#6a3a6c; }

/* ---- 動きを減らす設定の人には演出を止める ---- */
@media (prefers-reduced-motion: reduce){
  .trail{ display:none !important; }
  .blackout{ transition: none; }
  .titlebar .logo, .splash .logo{ text-shadow: none; }
  .momo-line{ opacity:1; animation:none; }
  .momo-entry{ transition:none; }
}