@charset "utf-8";

/* ==================================================================
   百物語　――　怪談提出窓口
   暗がりと蝋燭。明朝体主体。差し色は炎の橙と朱。
   ================================================================== */

:root{
  --ink:    #0a0908;   /* 座敷の闇 */
  --ink-2:  #121010;   /* 一段浮いた面 */
  --ink-3:  #1a1614;   /* さらに浮いた面（紙） */
  --line:   #2b2420;
  --line-2: #3a312b;

  /* 文字色。暗い背景では想像より沈むので、白に寄せて明るめに取る。
     暖色の気配だけ残して、色味は付けない（生成り色は読みにくかった） */
  --txt:    #f7f4ef;   /* 本文・見出し。ほぼ白 */
  --txt-2:  #ded8cd;   /* 一段落とす */
  --dim:    #b3aa9c;   /* 補足・抜粋 */
  --faint:  #8b8275;   /* 投稿者名・日付などの細字 */

  --flame:  #f2a63b;
  --flame-h:#fff0c0;
  --flame-l:#e2662a;
  --verm:   #a33228;   /* 朱 */

  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","MS PMincho",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--serif);
  font-size:16px;
  line-height:2.0;
  font-feature-settings:"palt";
  letter-spacing:.03em;
}

/* 座敷の周辺減光。画面の四隅を落として、中央だけに灯が届いている感じ */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 78% 58% at 50% 32%, rgba(242,166,59,.055) 0%, rgba(242,166,59,0) 62%),
    radial-gradient(ellipse 120% 92% at 50% 46%, rgba(0,0,0,0) 42%, rgba(0,0,0,.72) 100%);
}
/* ごく薄い紙の目 */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:
    repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 4px);
}
.shell{position:relative;z-index:1}

a{color:inherit;text-decoration:none}

/* ---------- 蝋燭 ---------- */
.candle{display:inline-flex;flex-direction:column;align-items:center;gap:2px;vertical-align:middle}
.candle .flame{
  width:9px;height:17px;border-radius:50% 50% 42% 42% / 64% 64% 36% 36%;
  background:radial-gradient(ellipse at 50% 74%,
      var(--flame-h) 0%, var(--flame) 34%, var(--flame-l) 68%, rgba(226,102,42,0) 74%);
  box-shadow:0 0 10px rgba(242,166,59,.55), 0 0 26px rgba(226,102,42,.3);
  transform-origin:50% 100%;
  animation:flicker 2.9s infinite ease-in-out;
}
.candle .stick{width:5px;height:16px;background:linear-gradient(#e6dcc6,#b9ac91);border-radius:1px}
.candle.sm .flame{width:7px;height:13px}
.candle.sm .stick{width:4px;height:11px}

/* 消えた灯 */
.candle.out .flame{
  background:none;box-shadow:none;animation:none;
  width:3px;height:7px;border-radius:0;
  background-image:linear-gradient(rgba(120,110,98,.5), rgba(120,110,98,0));
}
.candle.out .stick{background:linear-gradient(#6a6353,#4a463c)}

@keyframes flicker{
  0%,100%{transform:scaleY(1)   scaleX(1)    translateX(0);   opacity:1}
  18%    {transform:scaleY(1.1) scaleX(.94)  translateX(-.6px);opacity:.9}
  35%    {transform:scaleY(.94) scaleX(1.04) translateX(.5px); opacity:1}
  58%    {transform:scaleY(1.06)scaleX(.97)  translateX(.3px); opacity:.94}
  78%    {transform:scaleY(.97) scaleX(1.02) translateX(-.4px);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .candle .flame{animation:none}
}

/* 灯が並ぶ帯 */
.candle-row{display:flex;justify-content:center;gap:.75rem;padding:1.1rem 0 .2rem;flex-wrap:wrap}

/* ---------- 運営用バー（公開ページを見ているときだけ上部に出る） ---------- */
.adminbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding:.5rem 1.4rem;
  background:linear-gradient(rgba(163,50,40,.22), rgba(20,14,13,.96));
  border-bottom:1px solid var(--verm);
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;
}
.adminbar .ab-back{color:#e0a79c;font-weight:600}
.adminbar .ab-back:hover{color:var(--flame)}
.adminbar .ab-links{display:flex;gap:1.1rem}
.adminbar .ab-links a{color:#a2988a}
.adminbar .ab-links a:hover{color:var(--flame)}
.adminbar .ab-me{margin-left:auto;color:#8d7a74;font-size:10px}
@media (max-width:700px){
  .adminbar{gap:.8rem;padding:.45rem 1rem;font-size:10.5px}
  .adminbar .ab-me{display:none}
}

/* ---------- 上下の縁 ---------- */
.bar{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding:.9rem 1.4rem;
  border-bottom:1px solid var(--line);
  font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;color:var(--dim);
}
.bar-l,.bar-r{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.brand{font-family:var(--serif);font-size:19px;letter-spacing:.5em;color:var(--txt);text-indent:.5em}
.brand:hover{color:var(--flame)}
.bar a:hover{color:var(--flame)}
.bar .me{color:var(--txt-2)}

.badge{
  display:inline-block;font-family:var(--serif);font-size:10.5px;letter-spacing:.14em;
  padding:.14em .6em;border:1px solid var(--line-2);color:var(--dim);white-space:nowrap;
}
/* 灯守（運営）：朱 */
.badge.o{border-color:#a33228;color:#d8887c;text-shadow:0 0 8px rgba(163,50,40,.45);
  background:linear-gradient(rgba(163,50,40,.12), transparent)}
/* 青火：青白い炎の色 */
.badge.s{border-color:#5f9cc9;color:#a8dcf2;text-shadow:0 0 8px rgba(150,210,245,.4)}
/* 灯火：橙の炎の色 */
.badge.a{border-color:#9a7f4e;color:#c3a068}

.wrap{max-width:840px;margin:0 auto;padding:2.4rem 1.4rem 4rem}
.wrap.narrow{max-width:660px}

/* ---------- 見出し ---------- */
.head{text-align:center;margin-bottom:2.6rem;position:relative}

/* 見出しの背後にサムネイルをうっすら敷く（記事ページと同じ見せ方） */
.head.has-bg{padding:3.4rem 1.5rem 2.6rem;margin-left:-1.1rem;margin-right:-1.1rem}
.head.has-bg::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--th);background-size:cover;background-position:center 38%;
  opacity:.3;filter:saturate(.85);
  -webkit-mask-image:radial-gradient(ellipse 92% 92% at 50% 45%, #000 15%, rgba(0,0,0,.5) 52%, transparent 86%);
  mask-image:radial-gradient(ellipse 92% 92% at 50% 45%, #000 15%, rgba(0,0,0,.5) 52%, transparent 86%);
}
.head.has-bg::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 55% at 50% 50%, rgba(10,9,8,.45), transparent 75%);
}
.head > *{position:relative;z-index:1}
.head.has-bg h1{text-shadow:0 2px 20px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.8)}
.head.has-bg .lead{text-shadow:0 1px 10px rgba(0,0,0,.9)}
.head h1{
  font-size:23px;font-weight:400;letter-spacing:.42em;margin:.7rem 0 .6rem;
  text-indent:.42em;color:var(--txt);
}
.head .lead{font-size:13.5px;color:var(--dim);line-height:2.1;letter-spacing:.1em;margin:0}
.head-links{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
.head-links .btn{border-color:var(--line);color:var(--dim)}
.head-links .btn:hover{border-color:var(--flame);color:var(--flame)}
.rule{border:0;border-top:1px solid var(--line);margin:2.2rem 0}
.rule.orn{
  border:0;height:1px;margin:2.6rem 0;
  background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent);
}

h2.sec{
  font-size:15px;font-weight:400;letter-spacing:.3em;color:var(--txt-2);
  margin:0 0 1.4rem;padding-bottom:.7rem;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
h2.sec .n{font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--faint)}

/* ---------- お知らせ ---------- */
.notice{border:1px solid var(--line);padding:1rem 1.3rem;margin-bottom:2.4rem}
.notice ul{list-style:none;margin:0;padding:0}
.notice li{display:flex;gap:1.1rem;font-size:13px;line-height:2.1}
.notice .d{font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:var(--faint);white-space:nowrap;padding-top:.2rem}
.notice a{color:var(--txt-2)}
.notice a:hover{color:var(--flame)}
.notice .t{font-family:var(--sans);font-size:10px;letter-spacing:.2em;color:var(--faint);margin-bottom:.3rem}
/* 記事や外部リンクがあるお知らせだけ、押せることが分かるように印を付ける */
.notice a{border-bottom:1px solid rgba(242,166,59,.28)}
.notice a .more{
  display:inline-block;margin-left:.7em;padding:.05em .5em;
  border:1px solid var(--line-2);border-radius:0;
  font-family:var(--sans);font-size:9.5px;letter-spacing:.14em;color:var(--faint);
  vertical-align:.12em;
}
.notice a:hover .more{border-color:var(--flame);color:var(--flame)}

/* ---------- お知らせの記事ページ ---------- */
.news-head{text-align:center;padding:2.6rem 0 2rem;border-bottom:1px solid var(--line);margin-bottom:2.4rem}
.news-head .nh-label{font-family:var(--sans);font-size:10px;letter-spacing:.28em;color:var(--flame);margin-bottom:1rem}
.news-head h1{margin:0;font-size:24px;font-weight:400;letter-spacing:.1em;line-height:1.8;color:var(--txt)}
.news-head .nh-date{font-family:var(--sans);font-size:11px;letter-spacing:.12em;color:var(--faint);margin-top:1rem}
.news-list{list-style:none;margin:0;padding:0}
.news-list li{border-bottom:1px solid var(--line)}
.news-list li a{display:block;padding:1.2rem .3rem;color:inherit}
.news-list li a:hover{background:var(--ink-2)}
.news-list .nl-date{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;color:var(--faint)}
.news-list .nl-title{display:block;font-size:17px;color:var(--txt);margin-top:.3rem;line-height:1.7}
.news-list li a:hover .nl-title{color:var(--flame)}
.news-list .nl-ex{display:block;font-size:12.5px;color:var(--dim);margin-top:.35rem;line-height:1.9}

/* カテゴリ絞り込みページの説明文（管理画面で書いたカテゴリだけ出る） */
.genre-note{
  margin:.2rem 0 1.2rem;font-family:var(--sans);font-size:12.5px;line-height:2;
  color:var(--dim);letter-spacing:.04em;
}

/* ---------- 並べ替え・絞り込み ---------- */
.tabs{display:flex;gap:1.6rem;align-items:baseline;flex-wrap:wrap;
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  padding-bottom:.75rem;border-bottom:1px solid var(--line);margin-bottom:.2rem}
.tabs a{color:var(--faint);padding-bottom:.75rem;margin-bottom:-1px;border-bottom:1px solid transparent}
.tabs a:hover{color:var(--txt-2)}
.tabs a.on{color:var(--flame);border-bottom-color:var(--flame)}
.tabs .sp{margin-left:auto;display:flex;gap:1.4rem}
/* ---------- 管理画面のレイアウト（左メニュー＋内容） ---------- */
/* 管理ページでは .wrap を広げて2カラムにする */
body.admin-body .wrap{max-width:1180px}
.admin-layout{display:flex;gap:2.2rem;align-items:flex-start}
.admin-side{
  flex:0 0 168px;position:sticky;top:1.2rem;
  display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--ink-2);
  font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;
}
.admin-side a{
  display:flex;align-items:center;gap:.5rem;
  padding:.7rem 1rem;color:var(--dim);border-bottom:1px solid var(--line);
}
.admin-side a:last-child{border-bottom:0}
.admin-side a:hover{color:var(--txt);background:var(--ink-3)}
.admin-side a.on{color:var(--flame);border-left:2px solid var(--flame);padding-left:calc(1rem - 2px);background:var(--ink-3)}
.admin-side .as-site{color:var(--faint);font-size:11px}
.as-badge{
  margin-left:auto;min-width:1.6em;padding:0 .4em;text-align:center;
  border:1px solid var(--line-2);border-radius:1em;font-size:10px;color:var(--dim);
}
.as-badge.warn{border-color:var(--verm);color:#c96e5f}
.admin-main{flex:1;min-width:0}
.admin-title{
  margin:0 0 1.4rem;font-size:19px;font-weight:400;letter-spacing:.2em;color:var(--txt);
  padding-bottom:.8rem;border-bottom:1px solid var(--line);
}
/* 統計カード（ダッシュボード用） */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;margin-bottom:1.8rem}
.stat-card{border:1px solid var(--line);background:var(--ink-2);padding:.9rem 1.1rem;display:block;color:inherit}
a.stat-card:hover{border-color:var(--line-2);background:var(--ink-3)}
.stat-card .sc-n{font-family:var(--serif);font-size:26px;color:var(--flame);line-height:1.2}
.stat-card .sc-n.quiet{color:var(--txt-2)}
.stat-card .sc-l{font-family:var(--sans);font-size:11px;letter-spacing:.12em;color:var(--dim);margin-top:.3rem}
@media (max-width:700px){
  .admin-layout{display:block}
  .admin-side{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:1.4rem}
  .admin-side a{border-bottom:0;padding:.55rem .7rem}
  .admin-side a.on{border-left:0;padding-left:.7rem;border-bottom:2px solid var(--flame)}
  .admin-side .as-site{flex-basis:100%;border-bottom:1px solid var(--line)}
}

.gfilter{display:flex;gap:1.3rem;flex-wrap:wrap;margin:1rem 0 .4rem;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;color:var(--faint)}
.gfilter a{color:var(--dim)}
.gfilter a:hover,.gfilter a.on{color:var(--flame)}
.gfilter b{font-weight:400;color:var(--faint);margin-left:.3em}

/* ---------- カテゴリから選ぶ ---------- */
.cat-pick{margin:1rem 0 .4rem;border:1px solid var(--line)}
.cat-pick > summary{
  list-style:none;cursor:pointer;padding:.7rem 1rem;
  font-family:var(--sans);font-size:12px;letter-spacing:.16em;color:var(--txt-2);
  display:flex;align-items:center;gap:.6rem;
}
.cat-pick > summary::-webkit-details-marker{display:none}
.cat-pick > summary::before{content:"▸";color:var(--flame);font-size:11px;transition:transform .15s}
.cat-pick[open] > summary::before{transform:rotate(90deg)}
.cat-pick > summary:hover{color:var(--flame)}
.cp-body{padding:.2rem 1rem 1rem;border-top:1px solid var(--line)}
.cp-sec{font-family:var(--sans);font-size:10px;letter-spacing:.22em;color:var(--faint);margin:.9rem 0 .6rem}
.cp-list{display:flex;flex-wrap:wrap;gap:.5rem}
.cp-list a{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;
  padding:.4rem .8rem;border:1px solid var(--line-2);color:var(--txt-2);transition:.15s;
}
.cp-list a:hover{border-color:var(--flame);color:var(--flame)}
.cp-list a.on{border-color:var(--flame);color:var(--flame);background:rgba(242,166,59,.08)}
.cp-list a.zero{opacity:.34}
.cp-list b{font-weight:400;color:var(--faint);margin-left:.45em;font-size:10.5px}
.cp-list a.on b{color:var(--flame)}
.cp-now{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--dim)}
.cp-now .chip{margin:0 .3em}
.cp-now a{color:var(--flame);margin-left:.6em;border-bottom:1px solid rgba(242,166,59,.4)}

/* ---------- 小ラベル ---------- */
.chip{display:inline-block;font-family:var(--sans);font-size:10px;letter-spacing:.14em;
  padding:.1em .55em;border:1px solid var(--line-2);color:var(--dim);white-space:nowrap}
a.chip:hover{border-color:var(--flame);color:var(--flame)}
.chip.fame{border-color:var(--verm);color:#c96e5f}        /* 殿堂入り：朱 */
.chip.feat{border-color:var(--txt-2);color:var(--txt)}    /* 運営より：生成り */
.chip.pick{border-color:var(--flame);color:var(--flame)}  /* メンバー推薦：橙 */

/* ---------- カテゴリ選択（投稿フォーム） ---------- */
.genre-pick{display:flex;flex-wrap:wrap;gap:.5rem}
.gp-item{position:relative;cursor:pointer}
.gp-item input{position:absolute;opacity:0;pointer-events:none}
.gp-item span{
  display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.08em;
  padding:.45rem .9rem;border:1px solid var(--line-2);color:var(--txt-2);transition:.15s;
}
.gp-item:hover span{border-color:var(--flame);color:var(--flame)}
.gp-item.on span{border-color:var(--flame);color:var(--flame);
  background:rgba(242,166,59,.08);box-shadow:0 0 12px rgba(242,166,59,.12)}
.gp-item.disabled{cursor:not-allowed}
.gp-item.disabled span{opacity:.32;border-color:var(--line)}
.gp-item.disabled:hover span{border-color:var(--line);color:var(--txt-2)}

/* ---------- 検索 ---------- */
.search{display:flex;gap:.6rem}
.search input{background:#080707;border:1px solid var(--line);color:var(--txt);
  font-family:var(--serif);font-size:13.5px;padding:.45rem .8rem;width:180px;border-radius:0}
.search input:focus{outline:none;border-color:var(--flame)}
.search button{background:transparent;border:1px solid var(--line-2);color:var(--dim);
  font-family:var(--sans);font-size:11px;letter-spacing:.1em;padding:.45rem .9rem;cursor:pointer}
.search button:hover{border-color:var(--flame);color:var(--flame)}

/* ---------- 怪談の一覧 ---------- */
.tales{list-style:none;margin:0;padding:0}
.tale{border-bottom:1px solid var(--line);transition:background .15s}
.tale:hover{background:rgba(242,166,59,.035)}
/* 筆者（メタ行の先頭・日付の前） */
.tale .t-by{display:inline-flex;align-items:center;gap:.45rem;margin-right:.2rem}
.tale .t-by .avatar-by{width:28px;height:28px;font-size:13px;border-color:#463b33}
.tale .t-by-name{
  font-family:var(--serif);font-size:13.5px;letter-spacing:.08em;color:var(--txt-2);
  border-bottom:1px solid transparent;
}
.tale .t-by:hover .t-by-name{color:var(--flame);border-bottom-color:rgba(242,166,59,.45)}
.tale .t-by:hover .avatar-by{border-color:var(--flame)}

/* 行の骨組み：サムネを左の列に置き、その右にタイトル・あらすじ・メタを積む。
   サムネは2行ぶんをまたいで伸び、右側の文字の高さにぴったり合う */
.tale.has-th{
  display:grid;grid-template-columns:150px 1fr;column-gap:1.2rem;
  padding:1.4rem .4rem;
}
.tale.has-th .th{grid-row:1 / span 2}
.tale.has-th .t-main{grid-column:2}
.tale.has-th .meta{grid-column:2}
/* サムネが無い話は、これまでどおり文字だけを縦に積む */
.tale:not(.has-th) .t-main{display:block;padding:1.5rem .4rem .1rem}

.tale h3{
  margin:0 0 .4rem;font-size:18px;font-weight:400;letter-spacing:.06em;
  color:var(--txt);line-height:1.7;
}
.tale:hover h3{color:var(--flame)}
.tale .ex{margin:0;font-size:13.5px;color:var(--dim);line-height:1.95;letter-spacing:.02em}
.tale .meta{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;
  color:var(--faint);display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;
}
.tale:not(.has-th) .meta{padding:.7rem .4rem 1.3rem .4rem}
.tale.has-th .meta{padding-top:.7rem;align-content:end}
.by .avatar-by{vertical-align:-.7em;margin-right:.25em}

.empty{text-align:center;color:var(--faint);font-size:13.5px;padding:4rem 0;letter-spacing:.12em}

/* ---------- 注目枠 ---------- */
/* タイトルを大きくし、サムネもひとまわり大きく取る。あらすじはサムネの横に出す */
.tales.feat .tale.has-th{grid-template-columns:200px 1fr}
.tales.feat .tale h3{font-size:22px;line-height:1.6}

/* ---------- サムネイル ---------- */
/* 幅は列で決まり、高さは行いっぱい。はみ出す分は切り取る */
.tale .th img{
  display:block;width:100%;height:100%;min-height:84px;object-fit:cover;
  border:1px solid var(--line-2);filter:brightness(.92);
}
.tale:hover .th img{filter:brightness(1.05)}

/* 記事ページ：タイトル・投稿者の背後にうっすら敷く */
.tale-head{position:relative}
.tale-head.has-bg{padding:3.4rem 1.5rem 2.6rem;margin:0 -1.1rem 2.4rem}
.tale-head.has-bg::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--th);background-size:cover;background-position:center 38%;
  opacity:.3;filter:saturate(.85);
  -webkit-mask-image:radial-gradient(ellipse 92% 92% at 50% 45%, #000 15%, rgba(0,0,0,.5) 52%, transparent 86%);
  mask-image:radial-gradient(ellipse 92% 92% at 50% 45%, #000 15%, rgba(0,0,0,.5) 52%, transparent 86%);
}
/* 文字周りだけ一段沈めて可読性を確保 */
.tale-head.has-bg::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 55% at 50% 58%, rgba(10,9,8,.45), transparent 75%);
}
.tale-head > *{position:relative;z-index:1}
.tale-head.has-bg h1{text-shadow:0 2px 20px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.8)}

/* 投稿フォームの選択グリッド */
.thumb-pick{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));gap:.6rem;
  max-height:19rem;overflow-y:auto;padding:.6rem;border:1px solid var(--line);
  scrollbar-width:thin;scrollbar-color:#3a312b transparent;
}
.tp-item{position:relative;cursor:pointer;display:block}
.tp-item input{position:absolute;opacity:0;pointer-events:none}
.tp-item img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border:2px solid var(--line);filter:brightness(.8);transition:.15s}
.tp-item:hover img{filter:brightness(1)}
.tp-item:has(input:checked) img{border-color:var(--flame);filter:brightness(1.05);
  box-shadow:0 0 14px rgba(242,166,59,.25)}
.tp-none{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;
  border:2px solid var(--line);font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--dim)}
.tp-item:has(input:checked) .tp-none{border-color:var(--flame);color:var(--flame)}

/* ---------- メンバー限定エリア（非メンバーから見た立入禁止の見せ方） ---------- */
.locked-area{
  position:relative;border:1px solid #3a2b28;background:rgba(163,50,40,.02);
  padding:0 .8rem .6rem;margin-top:.6rem;
}
/* 上端の規制テープ */
.la-tape{
  margin:0 -.8rem 1rem;padding:.5rem 0;overflow:hidden;white-space:nowrap;
  font-family:var(--sans);font-size:10px;letter-spacing:.5em;color:#c98a80;
  background:repeating-linear-gradient(-45deg,
    rgba(163,50,40,.30) 0 12px, rgba(20,14,13,.55) 12px 24px);
  border-top:1px solid rgba(163,50,40,.5);border-bottom:1px solid rgba(163,50,40,.5);
  text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.9);
}

.tale.locked-row{cursor:pointer}
.tale.locked-row .t-main{filter:grayscale(.85)}
.tale.locked-row h3{color:var(--dim)}
.tale.locked-row:hover h3{color:#c98a80}
/* 本文は読めないように伏せる */
.tale.locked-row .ex{filter:blur(3.5px);opacity:.5;user-select:none}
.tale.locked-row .th img{filter:grayscale(1) brightness(.4) contrast(.9)}
.tale.locked-row .t-by{cursor:pointer}
.tale.locked-row:hover{background:rgba(163,50,40,.05)}
.chip.lock{border-color:#7e2622;color:#c98a80}

/* タップしたときの案内 */
.gate-modal{
  position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:1.2rem;background:rgba(6,5,4,.86);backdrop-filter:blur(3px);
}
.gate-modal[hidden]{display:none}
.gm-box{
  max-width:27rem;width:100%;background:var(--ink-3);
  border:1px solid var(--line-2);border-top:2px solid var(--verm);
  padding:2rem 1.9rem 1.6rem;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.gm-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-bottom:1rem;
  border:1px solid var(--verm);color:#c98a80;
  font-family:var(--serif);font-size:20px;letter-spacing:0;
  background:linear-gradient(rgba(163,50,40,.14), transparent);
}
.gm-box h2{font-size:16px;font-weight:400;letter-spacing:.2em;margin:0 0 1rem;color:var(--txt)}
.gm-box p{font-size:13.5px;line-height:2.05;color:var(--txt-2);margin:0 0 1.6rem}
.gm-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* ---------- ページ送り ---------- */
.pager{
  display:flex;justify-content:center;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin:2.4rem 0 .6rem;
}
.pager .pg-num,.pager .pg-edge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.4rem;height:2.4rem;padding:0 .5rem;
  border:1px solid var(--line-2);color:var(--txt-2);
  font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;transition:.15s;
}
.pager .pg-num:hover,.pager .pg-edge:hover{
  border-color:var(--flame);color:var(--flame);
  box-shadow:0 0 14px rgba(242,166,59,.14);
}
/* 現在のページ：灯がともっているように */
.pager .pg-num.on{
  border-color:var(--flame);color:var(--flame);
  background:linear-gradient(rgba(242,166,59,.14), transparent);
  box-shadow:0 0 16px rgba(242,166,59,.18), inset 0 0 14px rgba(242,166,59,.06);
}
.pager .pg-edge{font-size:14px;color:var(--dim)}
.pager .pg-edge.off{opacity:.22;border-color:var(--line);cursor:default}
.pager .pg-edge.off:hover{border-color:var(--line);color:var(--dim);box-shadow:none}
.pager .pg-gap{color:var(--faint);padding:0 .1rem;font-family:var(--sans);font-size:12px}
.pg-info{
  text-align:center;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
  color:var(--faint);margin-bottom:1rem;
}

/* ---------- 一話 ---------- */
.tale-head{text-align:center;margin-bottom:2.4rem}
.tale-head h1{
  font-size:25px;font-weight:400;letter-spacing:.14em;line-height:1.75;
  margin:1rem 0 .9rem;color:var(--txt);
}
.tale-head .by{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--dim)}

/* 記事ページの投稿者（タイトル下・大きめ） */
.tale-by{
  display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;
  margin:.4rem 0 1rem;
}
.tale-by .tale-by-name{font-family:var(--serif);font-size:16px;letter-spacing:.14em;color:var(--txt)}
.tale-by:hover .tale-by-name{color:var(--flame)}
.tale-by:hover .avatar-lg{border-color:var(--flame);box-shadow:0 0 20px rgba(242,166,59,.2)}
.tale-head.has-bg .avatar-lg{box-shadow:0 4px 20px rgba(0,0,0,.7)}
.tale-head.has-bg .tale-by-name{text-shadow:0 2px 12px rgba(0,0,0,.9)}

.sheet{
  background:var(--ink-3);
  border:1px solid var(--line);
  border-top:2px solid var(--line-2);
  padding:3rem 3.2rem;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 20px 50px rgba(0,0,0,.55),
             inset 0 0 70px rgba(242,166,59,.028);
  font-size:16.5px;line-height:2.25;color:var(--txt);
}
/* 字下げはしない。投稿によっては一文ごとに改行されており、
   段落の1行目だけ下がると不揃いに見えるため */
.sheet p{margin:0 0 1.5rem}
.sheet p:last-child{margin-bottom:0}

/* ---------- 「怖い」 ---------- */
.reaction{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin:3rem 0 1rem}
.btn-fear{
  display:inline-flex;align-items:center;gap:.7rem;
  background:transparent;border:1px solid var(--line-2);color:var(--txt-2);
  font-family:var(--serif);font-size:15px;letter-spacing:.28em;text-indent:.28em;
  padding:.85rem 2.2rem;cursor:pointer;transition:.18s;
}
.btn-fear:hover{border-color:var(--flame);color:var(--flame);
  box-shadow:0 0 22px rgba(242,166,59,.14), inset 0 0 22px rgba(242,166,59,.05)}
.btn-fear.done{border-color:var(--faint);color:var(--faint);cursor:default;box-shadow:none}
.btn-fear.done:hover{border-color:var(--faint);color:var(--faint)}
.reaction .tally{font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--faint)}
.reaction .tally b{font-family:var(--serif);font-size:17px;color:var(--flame);font-weight:400}

/* 押した状態（いいね型トグル）：血判のように掠れた赤、斜めに押された跡 */
.btn-fear.on{
  transform:rotate(-5deg);
  border-color:#7e2622;
  color:#c25048;
  letter-spacing:.24em;text-indent:.24em;
  text-shadow:.7px .3px 0 rgba(122,20,20,.4), -.5px -.3px 0 rgba(122,20,20,.28);
  background:
    radial-gradient(ellipse 62% 55% at 30% 70%, rgba(143,29,29,.18), transparent 72%),
    radial-gradient(ellipse 42% 62% at 74% 26%, rgba(143,29,29,.12), transparent 70%);
  box-shadow:inset 0 0 24px rgba(122,20,20,.14);
  -webkit-mask-image:repeating-linear-gradient(37deg,
    #000 0 6px, transparent 6px 6.7px, #000 6.7px 12px,
    rgba(0,0,0,.5) 12px 13px, #000 13px 20px, transparent 20px 20.5px, #000 20.5px 27px);
  mask-image:repeating-linear-gradient(37deg,
    #000 0 6px, transparent 6px 6.7px, #000 6.7px 12px,
    rgba(0,0,0,.5) 12px 13px, #000 13px 20px, transparent 20px 20.5px, #000 20.5px 27px);
}
.btn-fear.on:hover{border-color:#a33228;color:#d0625a;box-shadow:inset 0 0 24px rgba(122,20,20,.2)}

/* 押した瞬間の演出：持ち上げて、斜めに叩きつける（血判） */
.btn-fear.hit{animation:fear-stamp .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes fear-stamp{
  0%  {transform:scale(1) rotate(0deg)}
  22% {transform:scale(1.3) rotate(3deg);border-color:#a33228;color:#e0857b}
  42% {transform:scale(.88) rotate(-7deg);border-color:#c0392b;color:#f0a297;
       box-shadow:0 0 44px rgba(163,50,40,.55), inset 0 0 34px rgba(143,29,29,.4)}
  58% {transform:scale(1.07) rotate(-4deg)}
  74% {transform:scale(.97) rotate(-5.5deg)}
  100%{transform:scale(1) rotate(-5deg)}
}

/* 叩きつけの衝撃で周囲が揺れる */
.reaction.shake{animation:zone-shake .45s .16s ease-out}
@keyframes zone-shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(2px,-2px)}
  38%{transform:translate(-3px,2px)}
  54%{transform:translate(2px,1px)}
  70%{transform:translate(-2px,-1px)}
  85%{transform:translate(1px,0)}
}

/* 画面の縁が一瞬赤く染まる */
.fear-vignette{
  position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0;
  background:radial-gradient(ellipse at 50% 55%, rgba(143,29,29,0) 42%, rgba(90,8,8,.34) 100%);
  animation:vignette-fade .65s ease-out .12s forwards;
}
@keyframes vignette-fade{0%{opacity:0}22%{opacity:1}100%{opacity:0}}

/* 血溜まりの染み（ボタン周辺に一瞬残る） */
.blood-splat{
  position:absolute;pointer-events:none;
  border-radius:45% 60% 50% 55% / 55% 45% 60% 50%;
  background:radial-gradient(circle at 40% 35%, rgba(143,29,29,.55), rgba(92,14,14,.35) 60%, transparent 82%);
  animation:splat-fade 1.5s ease-out forwards;
}
@keyframes splat-fade{
  0%{opacity:0;transform:scale(.35)}
  12%{opacity:.95;transform:scale(1)}
  65%{opacity:.65}
  100%{opacity:0;transform:scale(1.04)}
}
.tally.bump b{display:inline-block;animation:count-bump .34s ease-out}
@keyframes count-bump{
  0%{transform:scale(1)} 40%{transform:scale(1.35);color:#c25048} 100%{transform:scale(1)}
}

/* 血飛沫：散ってから重力で落ちる */
.blood{
  position:absolute;pointer-events:none;
  width:6px;height:6px;border-radius:52% 48% 55% 45% / 55% 52% 48% 45%;
  background:radial-gradient(circle at 38% 32%, #c0392b, #8f1d1d 55%, #5c0e0e 85%);
  animation:blood-fall .85s cubic-bezier(.3,.1,.7,1) forwards;
}
@keyframes blood-fall{
  0%  {opacity:1;transform:translate(0,0) scale(1)}
  25% {opacity:1;transform:translate(calc(var(--dx,0) * .6), -6px) scale(1.05)}
  100%{opacity:0;transform:translate(var(--dx,0), 74px) scale(.55) }
}
/* ボタン下から一筋垂れる */
.blood-drip{
  position:absolute;pointer-events:none;width:2px;
  background:linear-gradient(#8f1d1d, #5c0e0e 70%, transparent);
  transform-origin:top;
  animation:blood-drip 1.1s ease-out forwards;
}
@keyframes blood-drip{
  0%  {opacity:.9;height:0}
  60% {opacity:.85;height:26px}
  100%{opacity:0;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .btn-fear.hit,.tally.bump b,.reaction.shake{animation:none}
  .blood,.blood-drip,.fear-vignette,.blood-splat{display:none}
}

/* ---------- 奥の間の壁 ---------- */
.gate{
  text-align:center;border:1px solid var(--line);padding:3rem 2rem;
  background:linear-gradient(rgba(163,50,40,.035), transparent);
}
.gate h2{font-size:17px;font-weight:400;letter-spacing:.34em;margin:1.2rem 0 1rem;color:var(--txt)}
.gate p{font-size:13.5px;color:var(--dim);line-height:2.1;margin:0 auto 1.6rem;max-width:30em}

/* ---------- 釦・入力 ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:12.5px;letter-spacing:.2em;
  padding:.8rem 2rem;border:1px solid var(--line-2);color:var(--txt-2);
  background:transparent;cursor:pointer;transition:.18s;
}
.btn:hover{border-color:var(--flame);color:var(--flame)}
.btn.primary{border-color:var(--verm);color:#d8907f}
.btn.primary:hover{border-color:var(--flame);color:var(--flame);
  box-shadow:0 0 20px rgba(163,50,40,.2)}
.btn.sm{font-size:11px;padding:.5rem 1.2rem;letter-spacing:.14em}

.field{margin-bottom:1.8rem}
.field label{
  display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;
  color:var(--dim);margin-bottom:.6rem;
}
.field input[type=text],.field textarea,.field select{
  width:100%;background:#080707;border:1px solid var(--line);color:var(--txt);
  font-family:var(--serif);font-size:16px;line-height:2.0;padding:.85rem 1rem;
  border-radius:0;-webkit-appearance:none;
}
.field textarea{min-height:26rem;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--flame);box-shadow:0 0 18px rgba(242,166,59,.1)
}
.field .note{font-family:var(--sans);font-size:11px;color:var(--faint);margin-top:.5rem;line-height:1.9}
.actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:2.4rem}

.check{display:flex;gap:.7rem;align-items:flex-start;font-size:13px;color:var(--txt-2);line-height:1.9}
.check input{margin-top:.55rem;accent-color:var(--verm)}
.check a{color:var(--flame);border-bottom:1px solid rgba(242,166,59,.35)}

/* ---------- クレジット・コピー欄 ---------- */
.credit-box{border:1px solid var(--line-2);background:#080707;margin-top:1.4rem}
.credit-box .cb-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem .9rem;border-bottom:1px solid var(--line);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;color:var(--dim);
}
.credit-box pre{
  margin:0;padding:1.1rem 1.2rem;overflow-x:auto;
  font-family:var(--mono,"SFMono-Regular",Menlo,Consolas,monospace);
  font-size:12.5px;line-height:2;color:var(--txt-2);white-space:pre-wrap;word-break:break-all;
}

/* ---------- 報せ ---------- */
.msg{border:1px solid var(--line-2);border-left:2px solid var(--flame);
  padding:.95rem 1.2rem;font-size:13px;color:var(--txt-2);margin-bottom:2rem;line-height:1.95}
.msg.err{border-left-color:var(--verm);color:#d8a79c}

/* ---------- 蝋燭ミニ（コメント欄・ランクで炎の色が変わる） ---------- */
.candle-mini{
  position:relative;display:inline-block;width:9px;height:14px;flex:none;
}
.candle-mini::after{             /* 蝋 */
  content:"";position:absolute;left:2.5px;bottom:0;width:4px;height:7px;
  background:linear-gradient(#d9cfb9,#a99c82);border-radius:1px;
}
.candle-mini::before{            /* 炎 */
  content:"";position:absolute;left:1.5px;top:0;width:6px;height:8px;
  border-radius:50% 50% 42% 42% / 62% 62% 38% 38%;
  animation:flicker 2.7s infinite ease-in-out;transform-origin:50% 100%;
}
.candle-mini.f-a::before{        /* Ａメンバー：橙の炎 */
  background:radial-gradient(ellipse at 50% 72%, var(--flame-h) 0%, var(--flame) 40%, var(--flame-l) 72%, transparent 78%);
  box-shadow:0 0 6px rgba(242,166,59,.6);
}
.candle-mini.f-s::before{        /* Ｓメンバー：青白い炎（人魂の色） */
  background:radial-gradient(ellipse at 50% 72%, #eafcff 0%, #a8dcf2 42%, #5f9cc9 72%, transparent 78%);
  box-shadow:0 0 7px rgba(150,210,245,.65);
}

/* ---------- 初回説明ポップアップ ---------- */
.intro-overlay{
  position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:1.2rem;background:rgba(6,5,4,.84);backdrop-filter:blur(3px);
}
.intro-overlay[hidden]{display:none}
.intro{
  max-width:31rem;width:100%;background:var(--ink-3);border:1px solid var(--line-2);
  border-top:2px solid var(--flame);padding:2rem 1.9rem 1.7rem;
  box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 0 60px rgba(242,166,59,.03);
  max-height:88vh;overflow-y:auto;
}
.intro h2{font-size:16px;font-weight:400;letter-spacing:.26em;margin:.2rem 0 1.2rem;text-align:center;color:var(--txt)}
.intro ol{margin:0 0 1.4rem;padding-left:1.5em;font-size:13.5px;line-height:2.05;color:var(--txt-2)}
.intro ol li{margin-bottom:.55rem}
.intro ol li::marker{color:var(--flame)}
.intro b{color:var(--txt);font-weight:600}
.intro .i-actions{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap}
.intro .i-note{font-family:var(--sans);font-size:11px;color:var(--faint);text-align:center;margin-top:1rem;line-height:1.9}

/* ---------- 言伝（コメント） ---------- */
.comments{margin-top:3.4rem}
.comment{border-top:1px solid var(--line);padding:1.3rem .2rem}
.comment .c-head{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
  color:var(--faint);margin-bottom:.5rem;display:flex;gap:.9rem;align-items:center}
.comment .c-head .nm{color:var(--dim)}
.comment p{margin:0;font-size:14.5px;line-height:2.0;color:var(--txt-2)}
/* 返信は親の下に字下げして置く。左の縦線でつながりを見せる */
.comment.reply{margin-left:1.6rem;border-top:0;border-left:1px solid var(--line-2);padding-left:1.1rem}
.comment .c-head .chip.author{border-color:var(--flame-l);color:var(--flame);letter-spacing:.1em}
.c-reply{margin-top:.7rem}
.c-reply>summary{font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--dim);cursor:pointer}
.c-reply>summary:hover{color:var(--flame)}
.c-reply form{margin-top:.7rem}
.c-deny{margin-top:1.6rem;border:1px solid var(--line);background:var(--ink-2);padding:1.2rem 1.3rem;
  font-family:var(--sans);font-size:12.5px;line-height:2;color:var(--dim);text-align:center}
.c-deny .btn{margin-top:.8rem}

/* ---------- 手順（投稿するまでの案内） ---------- */
.steps{list-style:none;counter-reset:step;margin:0 0 1.8rem;padding:0}
.steps li{counter-increment:step;position:relative;padding:1.2rem 0 1.2rem 3.2rem;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:1.15rem;
  width:2.1rem;height:2.1rem;line-height:2.1rem;text-align:center;
  border:1px solid var(--flame-l);border-radius:50%;
  font-family:var(--sans);font-size:12px;color:var(--flame);
}
.steps b{display:block;font-weight:400;font-size:16px;color:var(--txt);margin-bottom:.4rem;letter-spacing:.04em}
.steps span{display:block;font-size:13px;line-height:2;color:var(--dim)}
.fine{font-family:var(--sans);font-size:11.5px;line-height:1.9;color:var(--faint);margin:1rem auto 0;max-width:34em}
.fine a{color:var(--flame)}

/* ---------- 通知 ---------- */
.notif{position:relative}
.n-badge{display:inline-block;margin-left:.35em;min-width:1.5em;padding:0 .35em;
  background:var(--verm);color:#fff;border-radius:1em;text-align:center;
  font-family:var(--sans);font-size:10px;line-height:1.6}
.notes{list-style:none;margin:0;padding:0}
.notes li{border-bottom:1px solid var(--line)}
.notes li a{display:block;padding:1rem .3rem;color:inherit}
.notes li a:hover{background:var(--ink-2)}
.notes .n-t{display:block;font-family:var(--sans);font-size:12px;color:var(--dim);letter-spacing:.06em}
.notes .n-t b{font-weight:400;color:var(--txt)}
.notes .n-new{display:inline-block;margin-right:.5em;padding:.1em .5em;
  border:1px solid var(--flame-l);color:var(--flame);font-size:9.5px;letter-spacing:.14em}
.notes .n-p{display:block;font-size:13.5px;color:var(--txt-2);margin-top:.35rem}
.notes .n-b{display:block;font-size:12.5px;color:var(--faint);margin-top:.25rem;line-height:1.9}
.notes .n-d{display:block;font-family:var(--sans);font-size:10.5px;color:var(--faint);margin-top:.35rem;letter-spacing:.1em}
.notes li.unread{background:rgba(242,166,59,.045)}

/* ---------- 朗読動画 ---------- */
.video-box{margin:-.6rem 0 1.8rem}
.video-note{
  text-align:center;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
  color:var(--faint);margin-top:.6rem;
}
.video-frame{
  margin:.2rem auto 0;max-width:760px;aspect-ratio:16/9;
  border:1px solid var(--line-2);background:#000;
}
.video-frame[hidden]{display:none}
.video-frame iframe{display:block;width:100%;height:100%;border:0}

/* 運営だけに見える、その場で朗読動画を付け外しする欄 */
.admin-video{
  max-width:760px;margin:0 auto 1.8rem;padding:.9rem 1.1rem 1rem;
  border:1px dashed #4a3a36;background:rgba(163,50,40,.05);
}
.admin-video .av-head{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;color:#c98a80;margin-bottom:.6rem;
}
.admin-video .av-head span{margin-left:.8em;color:var(--faint);letter-spacing:.1em}
.admin-video .av-row{display:flex;gap:.6rem;align-items:center}
.admin-video input{
  flex:1;min-width:0;background:#080707;border:1px solid var(--line-2);color:var(--txt);
  font-family:var(--sans);font-size:12.5px;padding:.5rem .7rem;border-radius:0;
}
.admin-video input:focus{outline:none;border-color:var(--flame)}
.admin-video .av-note{
  font-family:var(--sans);font-size:10.5px;line-height:1.9;color:var(--faint);margin-top:.55rem;
}
.admin-video .av-note b{color:var(--dim);font-weight:400}
@media (max-width:700px){
  .admin-video .av-row{flex-wrap:wrap}
  .admin-video input{flex-basis:100%}
}

/* ---------- 表 ---------- */
.tbl{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:12.5px;line-height:1.8}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:.8rem .7rem;text-align:left;vertical-align:top}
.tbl th{color:var(--dim);font-weight:400;letter-spacing:.12em;font-size:11px}
.tbl th .n{display:block;margin-top:.25rem;color:var(--faint);font-size:10px;letter-spacing:.06em}
.tbl a{color:var(--txt)}
.tbl a:hover{color:var(--flame)}

/* ---------- 人魂（月間投票の残数） ---------- */
.wisp{
  position:relative;display:inline-block;width:12px;height:12px;
  border-radius:60% 100% 55% 55% / 55% 55% 100% 60%;
  transform:rotate(40deg);
  background:radial-gradient(circle at 42% 42%, #eafcff 0%, #a8dcf2 40%, rgba(110,170,215,.35) 72%, transparent 88%);
  box-shadow:0 0 8px rgba(150,210,245,.75), 0 0 18px rgba(110,180,230,.35);
  animation:wisp-bob 2.6s infinite ease-in-out;
}
.wisp:nth-child(2n){animation-delay:-.9s}
.wisp:nth-child(3n){animation-delay:-1.7s}
.wisp.used{
  background:radial-gradient(circle at 42% 42%, rgba(140,140,140,.35), rgba(90,90,90,.15) 60%, transparent 85%);
  box-shadow:none;animation:none;opacity:.4;
}
@keyframes wisp-bob{
  0%,100%{transform:rotate(40deg) translateY(0)}
  50%    {transform:rotate(46deg) translateY(-2.5px)}
}
@media (prefers-reduced-motion:reduce){ .wisp{animation:none} }

/* ---------- 画面下の常駐バー ---------- */
.dock{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:.8rem;
  padding:.5rem 1.1rem .5rem .6rem;
  background:rgba(14,12,11,.88);backdrop-filter:blur(6px);
  border:1px solid var(--line-2);border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  font-family:var(--sans);
}
.dock .avatar{
  width:30px;height:30px;border-radius:50%;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:#241f1b;border:1px solid var(--line-2);
  font-family:var(--serif);font-size:14px;color:var(--txt-2);
}
.dock .avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* 汎用アバター（アイコン画像 or 頭文字） */
.avatar{
  width:30px;height:30px;border-radius:50%;flex:none;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  background:#241f1b;border:1px solid var(--line-2);
  font-family:var(--serif);font-size:14px;color:var(--txt-2);vertical-align:middle;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.avatar-mini{width:26px;height:26px;font-size:12px}
.avatar.avatar-by{width:34px;height:34px;font-size:15px}
.avatar.avatar-lg{width:76px;height:76px;font-size:30px;border-color:var(--line-2)}

/* アイコン選択（階層ごとのセクション） */
.icon-group{margin-bottom:1.8rem}
.icon-group .ig-head{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  padding-bottom:.5rem;margin-bottom:.7rem;border-bottom:1px solid var(--line);
}
.icon-group .ig-title{font-family:var(--serif);font-size:14.5px;letter-spacing:.18em;color:var(--txt)}
.icon-group .ig-who{font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:var(--dim)}
.icon-group .ig-count{margin-left:auto;font-family:var(--sans);font-size:10.5px;color:var(--faint)}
.icon-group.locked .ig-title{color:var(--dim)}
.icon-group.locked .ig-who{color:var(--faint)}

.icon-group .ig-lock{
  margin-top:.7rem;padding:.7rem .9rem;border:1px solid var(--line);border-left:2px solid var(--flame);
  font-family:var(--sans);font-size:11.5px;line-height:1.9;color:var(--dim);
}
.icon-group .ig-lock a{color:var(--flame);margin-left:.6em;border-bottom:1px solid rgba(242,166,59,.4)}

.icon-pick{grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));max-height:none}
.icon-pick .tp-item img{aspect-ratio:1/1;border-radius:50%}
.icon-pick .tp-none{aspect-ratio:1/1;border-radius:50%;text-align:center;line-height:1.5}
.icon-group.locked .icon-pick{border-color:#241f1b}
/* 運営から個別付与されたアイコンの印 */
.icon-pick .tp-item .lock.granted{
  position:absolute;inset:auto 0 3px 0;text-align:center;
  font-family:var(--sans);font-size:9px;letter-spacing:.06em;
  color:var(--flame);text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.icon-pick .tp-item.locked{cursor:not-allowed;position:relative}
.icon-pick .tp-item.locked img{filter:brightness(.34) grayscale(.55);border-color:#2b2420}
.icon-pick .tp-item.locked::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(6,5,4,.35);
}
.dock .d-name{font-size:11.5px;letter-spacing:.1em;color:var(--txt-2);white-space:nowrap}
.dock .d-wisps{display:flex;gap:6px;align-items:center;padding:0 .2rem}
.dock .d-label{font-size:9.5px;letter-spacing:.12em;color:var(--faint);white-space:nowrap}
body.has-dock{padding-bottom:72px}

/* ---------- 下 ---------- */
.foot{
  border-top:1px solid var(--line);margin-top:4rem;padding:1.8rem 1.4rem 3rem;
  text-align:center;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;
  color:var(--faint);line-height:2.2;
}
.foot a{color:var(--dim)}
.foot a:hover{color:var(--flame)}

/* ==================================================================
   百物語モード
   ================================================================== */
.mode-body{
  margin:0;background:#000;color:#ddd3c2;min-height:100vh;
  font-family:var(--serif);overflow-x:hidden;
}
.mode-body::before,.mode-body::after{content:none}   /* 通常ページの減光は使わない */

.m-bg{
  position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(.44) saturate(.85);
}
.m-shade{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, transparent 30%, rgba(0,0,0,.8) 100%),
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.45));
}

/* 冒頭のタイトル */
.m-intro{
  position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.1rem;text-align:center;
  padding:2rem;transition:opacity 1.4s ease;
}
.m-intro.gone{opacity:0;pointer-events:none}
.m-i-genre{font-family:var(--sans);font-size:11px;letter-spacing:.5em;text-indent:.5em;color:#8d8272;
  opacity:0;animation:m-rise 2.2s .3s ease forwards}
.m-i-title{font-size:30px;font-weight:400;letter-spacing:.2em;line-height:1.8;margin:0;color:#e8ddc9;
  text-shadow:0 0 30px rgba(0,0,0,.9);
  opacity:0;animation:m-rise 2.6s .8s ease forwards}
.m-i-author{font-family:var(--sans);font-size:12.5px;letter-spacing:.3em;color:#a99c86;
  opacity:0;animation:m-rise 2.4s 1.6s ease forwards}
@keyframes m-rise{
  0%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(0)}
}

/* 本文 */
.m-scroll{position:relative;z-index:3;max-width:38rem;margin:0 auto;
  padding:38vh 1.6rem 46vh}
.m-para{
  margin:0 0 2.1rem;font-size:18.5px;line-height:2.5;letter-spacing:.04em;
  color:#e2d8c6;text-shadow:0 1px 14px rgba(0,0,0,.85);
  opacity:0;transform:translateY(14px);
  transition:opacity 1.1s ease, transform 1.1s ease;
}
.m-para.show{opacity:1;transform:translateY(0)}

/* 終わり */
.m-end{text-align:center;padding-top:2.5rem;opacity:0;transition:opacity 1.4s ease}
.m-end.show{opacity:1}
.m-e-fin{font-size:15px;letter-spacing:.4em;color:#8d8272;margin-bottom:1.8rem}
.m-end .btn{margin:0 .4rem .8rem}
.m-e-note{font-size:13px;line-height:2;color:#8d8272;margin:1.4rem 0 1rem}

/* 操作 */
.m-hint{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;color:#7d7263;
  animation:m-blink 2.6s infinite ease-in-out;transition:opacity 1s;
}
.m-hint.dim{opacity:.45;animation:none}
.m-hint.gone{opacity:0}
@keyframes m-blink{0%,100%{opacity:.75}50%{opacity:.25}}

.m-ui{position:fixed;top:14px;right:14px;z-index:10;display:flex;gap:.6rem;align-items:flex-start}
.m-x,.m-gear{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  background:rgba(10,9,8,.6);border:1px solid #3a312b;border-radius:50%;
  color:#a99c86;font-family:var(--sans);font-size:15px;cursor:pointer;text-decoration:none;
}
.m-x:hover,.m-gear:hover{color:var(--flame);border-color:var(--flame)}
.m-panel{
  position:fixed;top:62px;right:14px;z-index:10;width:210px;
  background:rgba(12,10,9,.94);border:1px solid #3a312b;padding:1rem;
}
.m-p-sec{font-family:var(--sans);font-size:10px;letter-spacing:.24em;color:#7d7263;margin:.2rem 0 .55rem}
.m-p-list{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.8rem}
.m-p-list button{
  background:transparent;border:1px solid #3a312b;color:#a99c86;
  font-family:var(--sans);font-size:11px;letter-spacing:.08em;padding:.35rem .7rem;cursor:pointer;
}
.m-p-list button:hover,.m-p-list button.on{border-color:var(--flame);color:var(--flame)}

@media (max-width:700px){
  .m-i-title{font-size:22px}
  .m-para{font-size:16.5px;line-height:2.35}
  .m-scroll{padding-top:32vh}
}
@media (prefers-reduced-motion:reduce){
  .m-para{transition:opacity .3s;transform:none}
  .m-hint{animation:none}
}

/* ---------- 狭い画面 ---------- */
@media (max-width:700px){
  body{font-size:15px}
  .wrap{padding:1.8rem 1.1rem 3rem}
  .brand{font-size:16px;letter-spacing:.36em}
  .bar{padding:.75rem 1rem;gap:.6rem}
  .bar-l,.bar-r{gap:.9rem}
  .search{order:9;flex-basis:100%}
  .search input{width:100%;flex:1}
  .bar .me{display:none}   /* 名前とランクは下のバーに出ている */
  .head h1{font-size:19px;letter-spacing:.3em}
  .sheet{padding:1.9rem 1.3rem;font-size:15.5px;line-height:2.1}
  /* 画面が狭いぶんサムネを詰める。並び（サムネ左・文字右）は広い画面と同じ */
  .tale.has-th{grid-template-columns:124px 1fr;column-gap:.9rem;padding:1.1rem .4rem}
  .tale.has-th .th img{min-height:70px}
  .tale h3{font-size:16.5px;margin-bottom:.25rem}
  /* メタ行は折り返しが増えて縦に伸びやすいので、狭い画面では一段小さく詰める。
     ここが縮むぶんだけサムネの切り取りも穏やかになる */
  .tale .meta{gap:.38rem .55rem;font-size:9.5px;letter-spacing:.06em;padding-top:.5rem}
  .tale .meta .chip{font-size:9.5px;letter-spacing:.08em;padding:.1em .42em}
  .tale .t-by{gap:.3rem}
  .tale .t-by .avatar-by{width:19px;height:19px;font-size:9px}
  .tale .t-by-name{font-size:11.5px;letter-spacing:.04em}
  /* 狭い画面ではあらすじは1行だけ。行数が揃って一覧を追いやすくなる */
  .tale .ex{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;
    overflow:hidden;
  }
  .tales.feat .tale.has-th{grid-template-columns:150px 1fr}
  .tales.feat .tale h3{font-size:18px}
}