/* ===== Webフォント ===== */
@font-face {
  font-family:"DeterminationJP";
  src:url("fonts/DeterminationJP.ttf") format("truetype");
  font-display:swap;
}
@font-face {
  font-family:"MonsterFriendFore";
  src:url("fonts/MonsterFriendFore.otf") format("opentype");
  font-display:swap;
}

/* ===== 共通 ===== */
* { box-sizing: border-box; }
body { margin:0;
  font-family:"DeterminationJP","MS PGothic",Osaka,sans-serif; }
/* カスタムフォントは太字を持たず，合成太字だと潰れる．見出しの既定太字を無効化する */
h1, h2, h3, h4, h5, h6 { font-weight:normal; }
.header-logo, .header-nav, .index-title, .index-sub, .index-section-h,
.toc-item h2, .board-title, .section-title, .thread-bar, .ref-item {
  font-family:"MonsterFriendFore","DeterminationJP","MS PGothic",sans-serif;
}

/* ===== サイトヘッダー（黒背景＋白線白文字／スクロール追従） ===== */
.site-header { position:sticky; top:0; z-index:100;
  background:#000; color:#fff; border-bottom:1px solid #fff; }
.header-logo { color:#fff; font-size:20px;
  padding:8px 14px; letter-spacing:2px; }
.header-logo .dotcom { color:#fff; opacity:.55; }
.header-nav { display:flex; flex-wrap:wrap; border-top:1px solid #fff; }
.navtab { display:block; padding:6px 16px; font-size:12px; color:#fff; text-decoration:none;
  border-right:1px solid rgba(255,255,255,.4); }
.navtab:hover { background:#fff; color:#000; }
.navtab.current { background:#fff; color:#000; }

/* ===== インデックス（Toby Fox 風 黒背景＋黄色） ===== */
.index-page { background:#000; color:#fff; text-align:center; }
.index-page .site-header { text-align:left; }
.index-main { max-width:640px; margin:0 auto; padding:60px 16px 80px; }
.index-title { color:#ffe600; font-size:34px; margin:0 0 8px; line-height:1.3; }
/* サブページの見出しをロゴ画像で出す場合（PAGE_LOGOS） */
.page-logo-wrap { line-height:0; margin:0 0 16px; }
.page-logo { display:block; margin:0 auto; width:auto; max-width:100%;
  max-height:130px; height:auto; }
.index-sub { color:#fff; font-size:15px; margin:0 0 50px; }
/* アクセスカウンター／キリ番ゲッター */
#counter { margin:0 auto 40px; }
.counter-line { font-size:15px; color:#fff; margin:0; }
.hit-digits { display:inline-block; background:#000; color:#33ff66;
  font-family:"Courier New",monospace; font-weight:bold; font-size:22px;
  letter-spacing:4px; padding:3px 10px; border:2px solid #33ff66;
  border-radius:3px; vertical-align:middle; margin:0 4px; }
.kiriban-msg { min-height:1.2em; margin:14px 0 0; font-size:15px; color:#ffe600; }
#kiriban-extra { margin-top:10px; }
.nobody-door { display:block; width:120px; margin:0 auto; cursor:pointer;
  image-rendering:pixelated; animation:doorfade 2.4s ease-in; }
.nobody-door:hover { filter:brightness(1.25); }
@keyframes doorfade { 0% { opacity:0; } 100% { opacity:1; } }
/* カウンターと新着の間の画像（通常時：スージィ／-6666666時：Nobody） */
#interlude { margin:6px auto 40px; }
.interlude-img { display:block; margin:0 auto; max-width:240px; width:100%; height:auto; }
.haunted #interlude { display:none; }
.kiriban-msg.hit { color:#ff5fa2;
  animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:.3; } }

.index-section-h { color:#ffe600; font-size:18px; margin:60px 0 24px; letter-spacing:2px; }
.toc-item { display:block; max-width:380px; margin:0 auto 28px; text-decoration:none;
  color:#fff; }
.toc-item:hover { opacity:.85; }
.toc-item h2 { color:#ffe600; font-size:19px; margin:0 0 4px; }
.toc-item p { color:#ddd; font-size:13px; margin:0; }
.toc-text { display:block; }
/* 新着バッジはタイトルの隣にインライン表示し，少しだけ左に傾ける */
.toc-item h2 .new-badge { display:inline-block; width:auto; height:34px; vertical-align:middle;
  margin-left:8px; transform:rotate(-8deg); }
.ref-list { max-width:560px; margin:0 auto; text-align:left;
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:520px){ .ref-list { grid-template-columns:1fr; } }
.ref-item { display:block; border:2px solid #ffe600; color:#ffe600; text-decoration:none;
  padding:10px 14px; font-size:14px; }
.ref-item:hover { background:#ffe600; color:#000; }
.ref-item:hover .ref-url { color:#333; }
.ref-url { display:block; color:#7fb0ff; font-size:11px; word-break:break-all; margin-top:3px; }

/* ===== インデックスの「コンテンツ」ボタン（2列／テキスト2/3＋右にアイコン1/3） ===== */
.content-list { max-width:560px; margin:0 auto; display:grid;
  grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:520px){ .content-list { grid-template-columns:1fr; } }
.content-btn { display:flex; align-items:stretch; min-height:96px;
  border:2px solid #ffe600; color:#ffe600; text-decoration:none; overflow:hidden; }
.content-btn:hover { background:#ffe600; color:#000; }
.cb-text { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:16px 14px; }
.content-btn.has-icon .cb-text { flex:0 0 66.666%; }     /* テキスト2/3 */
.cb-icon { flex:0 0 33.333%; display:flex; align-items:center; justify-content:center;
  padding:8px; }                                         /* アイコン1/3（区切り線なし） */
.cb-icon img { max-width:100%; max-height:80px; height:auto; }
.cb-title { font-size:18px; letter-spacing:1px; }
.cb-sub { font-size:12px; margin-top:6px; opacity:.85; }

/* ===== 公式情報ページの広ボタン（画像配置可） ===== */
/* official-list=グループ縦積み（間隔広め）／oi-group=メイン＋サブを1かたまり（間隔狭め） */
.official-list { max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:30px; }
.oi-group { display:flex; flex-direction:column; gap:8px; }
.oi-subs { display:flex; flex-direction:column; gap:8px; }
.official-item { display:block; border:2px solid #ffe600; color:#ffe600; text-decoration:none;
  padding:16px 18px; text-align:left; }
.official-item:hover { background:#ffe600; color:#000; }
.official-item:hover .oi-url { color:#333; }
/* 画像付きボタン：テキスト左／画像右 の横並びサムネイル */
.official-item.has-img { display:flex; align-items:center; gap:14px; }
.official-item.has-img .oi-body { flex:1 1 auto; min-width:0; }
.oi-body { display:block; }
.oi-img { flex:0 0 auto; width:auto; max-width:500px; max-height:500px; height:auto;
  object-fit:contain; image-rendering:pixelated; }
.oi-label { display:block; font-size:17px; font-weight:normal; }
.oi-url { display:block; color:#7fb0ff; font-size:12px; word-break:break-all; margin-top:4px; }
/* ★txt由来のお役立ちリンク：注記・サブリンク・リンク無し項目 */
.oi-note { display:block; color:#ddd; font-size:12px; line-height:1.8; margin-top:6px; }
.official-item:hover .oi-note { color:#333; }
.official-item.oi-sub { margin-left:28px; padding:10px 14px; }
.official-item.oi-sub .oi-label { font-size:14px; font-weight:normal; }
.official-item.oi-plain { border-style:dashed; cursor:default; }
.official-item.oi-plain:hover { background:transparent; color:#ffe600; }

/* ===== 記事＝掲示板（sledpage_images.png 風・シンプル） ===== */
.article-page { background:#000; color:#fff; }
.board { max-width:840px; margin:0 auto; padding:18px 14px 40px; }
.board-title { font-size:21px; color:#ffe600; border-bottom:2px solid #ffe600;
  padding-bottom:6px; margin:6px 0 22px; }
.section-title { font-size:17px; color:#fff; border-left:5px solid #ffe600;
  padding:2px 0 2px 10px; margin:36px 0 12px; text-align:left; }
/* バックナンバーの区切り：page_02 のページタイトル（board-title）と同じ見た目．
   カード列幅に合わせて中央に置き，文字も中央寄せ（下線は board-title の border-bottom） */
.bn-divider { max-width:380px; margin:36px auto 24px; text-align:center; }

.thread { margin-bottom:24px; border:2px solid #888; }
.thread-bar { background:#fff; color:#000;
  font-size:16px; padding:6px 12px; border-bottom:2px solid #888; }

.post { padding:12px 14px; }
.post.reply { margin:0 14px; padding:12px 0 12px 24px; border-top:1px solid #777; }
.post-body { font-size:16px; line-height:1.8; color:#fff; }
.post-text { margin:0 0 10px; }

/* 埋め込み */
.embed { margin:12px 0; }
.embed img { max-width:100%; height:auto; border:1px solid #ccc; display:block; }
.embed-video video { max-width:100%; height:auto; display:block; border:1px solid #ccc; background:#000; }
.embed-src { font-size:12px; margin-top:3px; word-break:break-all; }
.embed-src a { color:#7fb0ff; }
.embed-yt a { position:relative; display:inline-block; }
.embed-yt .yt-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.7); color:#fff; font-size:28px; padding:6px 16px; border-radius:8px; }
.embed-tweet .tweet-ph { border:2px dashed #1da1f2; background:#f0f8ff; color:#1da1f2;
  padding:18px; text-align:center; font-size:14px; }
.embed-tweet .tweet-bird { font-size:20px; margin-right:6px; }
.embed-link a { color:#1a4fd6; word-break:break-all; }
/* 内部リンク（→タイトル）：他記事への案内リンク */
.page-ref { margin:8px 0; }
.page-ref a { display:inline-block; color:#1a4fd6; text-decoration:none;
  border:1px solid #1a4fd6; border-radius:3px; padding:4px 12px; background:#eef2ff; }
.page-ref a:hover { background:#1a4fd6; color:#fff; }

/* ===== 変身イベント（あんぽんたんガキンチョ） ===== */
@keyframes rainbow {
  0%   { color:#ff2d2d; }
  16%  { color:#ff9a00; }
  33%  { color:#ffee00; }
  50%  { color:#39ff5a; }
  66%  { color:#27b3ff; }
  83%  { color:#c46bff; }
  100% { color:#ff2d2d; }
}
.haunted .index-title,
.haunted .toc-item h2,
.haunted .ref-item { animation:rainbow 2.4s linear infinite; }
.haunted .ref-item { border-color:currentColor; }
.haunted .index-title { text-shadow:2px 0 #f0f, -2px 0 #0ff; }

/* 予備動作：画面表示が一瞬崩れる演出（ノイズ突入前のワンクッション） */
.glitch-pre { animation:glitchpre .36s steps(2) both; }
@keyframes glitchpre {
  0%   { transform:translate(0,0) skewX(0deg);    filter:none; }
  20%  { transform:translate(-14px,0) skewX(9deg); filter:hue-rotate(90deg) saturate(3); }
  40%  { transform:translate(12px,0) skewX(-7deg); filter:contrast(2.4); }
  60%  { transform:translate(-8px,0) skewX(5deg);  filter:invert(1); }
  80%  { transform:translate(10px,0) skewX(-3deg); filter:hue-rotate(-70deg) saturate(4); }
  100% { transform:translate(0,0) skewX(0deg);    filter:none; }
}

/* 砂嵐（TVノイズ）と画面の揺れ */
#noise { position:fixed; inset:0; z-index:9999; opacity:.92; pointer-events:none; }
.glitching { animation:shake .07s steps(2) infinite; }
@keyframes shake {
  0%   { transform:translate(0,0); }
  25%  { transform:translate(-4px,2px); }
  50%  { transform:translate(3px,-3px); }
  75%  { transform:translate(-2px,-1px); }
  100% { transform:translate(2px,3px); }
}

/* ===== フッター ===== */
.site-footer { text-align:center; font-size:12px; padding:24px 0; color:#666; }
.article-page .site-footer a { color:#ffe600; }
.index-page .site-footer { color:#888; }