/* 既読・変数・条件 */
/* ══ 閉じた部屋：読まれたら濃くなる ══
   「既読」という文字は出さない。濃さだけで伝える。 */
.msg.me .bub{transition:opacity .35s ease}
.msg.me.unread .bub{opacity:.5}
.msg.me.partread .bub{opacity:.78}
.msg.me.read .bub{opacity:1}

/* ══ チャットのタブと、閉じた部屋 ══ */
#chattabs{display:flex;gap:6px;margin:0 0 10px;flex-wrap:wrap}
.ctab{flex:1;min-width:104px;background:var(--sur);border:1px solid var(--line2);color:var(--dim);
 border-radius:11px;padding:9px 8px;font-size:12.5px;font-weight:800;cursor:pointer;position:relative}
.ctab.on{background:var(--sur2);color:var(--tx);border-color:var(--irm)}
.ctab i{position:absolute;top:-5px;right:-4px;background:var(--irm);color:#fff;font-style:normal;
 font-size:10px;font-weight:900;border-radius:999px;padding:1px 6px}
.dmnote{background:var(--sur2);border:1px dashed var(--line2);border-radius:11px;padding:10px 12px;
 margin-bottom:12px;font-size:12px;line-height:1.65}
.dmnote b{color:var(--tx)}
.dmnote span{display:block;color:var(--dim);margin-top:4px}
.dmneed{text-align:center;padding:22px 14px}
.dmneed b{display:block;font-size:15px;margin-bottom:6px}
.dmneed span{display:block;color:var(--dim);font-size:12px;line-height:1.7;margin-bottom:12px}
.thlist{display:flex;flex-direction:column;gap:6px}
.thcard{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
 gap:1px 10px;align-items:center;text-align:left;background:var(--sur);border:1px solid var(--line2);
 border-radius:11px;padding:10px 12px;cursor:pointer;color:var(--tx)}
.thcard.on{border-color:var(--irm);background:var(--sur2)}
.thcard.new b{color:var(--irm)}
.thcard .thi{grid-row:1/3;font-size:19px}
.thcard b{font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:6px}
.thcard b em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--dim)}
.thcard .thl{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thcard .tht{grid-column:2;font-size:10.5px;color:var(--dim)}
.thdot{position:absolute;top:10px;right:11px;width:8px;height:8px;border-radius:999px;background:var(--irm)}
.dmpref{margin-top:12px;padding-top:10px;border-top:1px solid var(--line2);font-size:12px}
.dmpref label{display:flex;align-items:center;gap:7px;font-weight:700;cursor:pointer}
.dmpref span{display:block;color:var(--dim);font-size:11px;margin-top:3px;padding-left:24px}
.frme{background:var(--sur2);border-radius:9px;padding:9px 12px;font-size:12px;margin-bottom:12px}
.frrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 2px;border-bottom:1px solid var(--line2)}
.frrow b{font-size:13px}
.frrow>span{font-size:11.5px;color:var(--dim)}
.frrow>span.no{font-style:italic}
.frrow .frb{margin-left:auto;display:flex;gap:5px}

/* ══ エディタ：変数と条件 ══ */
.sedvars{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.sedvar{display:inline-flex;align-items:center;gap:5px;background:var(--sur2);
 border:1px solid var(--line2);border-radius:999px;padding:4px 6px 4px 11px}
.sedvar b{font-size:12px;font-weight:800}
.sedvar input{width:62px!important;margin:0!important;padding:3px 6px!important;font-size:12px!important}
.sedvar.add input{width:130px!important}
.sedvar .sedx{margin:0!important;padding:2px 7px!important}
.sedcond{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--sur2);
 border:1px dashed var(--line2);border-radius:9px;padding:7px 10px;margin-bottom:8px}
.sedcond>span{font-size:10.5px;font-weight:800;color:var(--irm)}
.sedcond select,.sedcond input{margin:0!important;width:auto!important;min-width:96px}
.sedcond input[type=number]{min-width:64px}
.sedeff{background:var(--sur);border-radius:9px;padding:7px 9px;margin-top:6px}

/* ══ 物語：覚えているもの ══ */
.scvars{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.scv{background:var(--sur2);border:1px solid var(--line2);border-radius:999px;
 padding:3px 11px;font-size:11px;font-weight:800;color:var(--dim);display:inline-flex;gap:5px;align-items:baseline}
.scv i{font-style:normal}
.scv b{color:var(--irm);font-size:13px}
.scv.item{border-color:var(--irm);color:var(--tx)}
.sceff{font-size:12px;font-weight:800;color:var(--good);margin-bottom:9px}

/* ══ 物語エディタ ══ */
.sedhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sedhead b{font-size:16px;font-weight:900}
.sedrow2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.sedrow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px;align-items:end}
.sedfull{display:block;margin-bottom:8px}
#rbscen label{display:block;font-size:10.5px;font-weight:800;color:var(--dim)}
#rbscen label input,#rbscen label select,#rbscen label textarea,#rbscen .sedres textarea{
 display:block;width:100%;margin-top:3px;background:var(--sur2);color:var(--tx);
 border:1px solid var(--line2);border-radius:8px;padding:7px 9px;font-size:13px;
 font-family:inherit;font-weight:600}
#rbscen textarea{min-height:52px;resize:vertical;line-height:1.7}
#rbscen input:focus,#rbscen textarea:focus,#rbscen select:focus{outline:0;border-color:var(--irm)}
.sedchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.sedchip{background:var(--sur2);border:1px solid var(--line2);color:var(--dim);border-radius:999px;
 padding:6px 12px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit}
.sedchip.on{background:var(--irm);color:var(--bg);border-color:var(--irm)}
.sedchip.add{border-style:dashed}
.sedscene{border:1px solid var(--line2);border-radius:11px;padding:12px;background:var(--sur2)}
.sedopt{border:1px solid var(--line2);border-radius:10px;padding:10px;margin:10px 0;background:var(--sur)}
.sedoh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.sedoh b{font-size:12.5px;font-weight:900;color:var(--irm)}
.sedchk{display:flex!important;align-items:center;gap:5px;font-size:10.5px;color:var(--faint)}
.sedchk input{width:auto!important;margin:0!important}
.sedx{background:none;border:1px solid var(--line2);color:var(--faint);border-radius:7px;
 padding:3px 9px;font-size:10.5px;font-weight:800;cursor:pointer;margin-left:auto;font-family:inherit}
.sedx:hover{border-color:var(--bad);color:var(--bad)}
.sedx.tall{margin-left:0;align-self:end;padding:8px 10px}
.sedres{border-left:3px solid var(--line2);padding-left:9px;margin-top:8px}
.sedres.ok{border-color:var(--good)}
.sedres.ng{border-color:var(--bad)}
.sedres>span{display:block;font-size:10.5px;font-weight:900;margin-bottom:3px}
.sedres.ok>span{color:var(--good)}
.sedres.ng>span{color:var(--bad)}
.scb.mine{border-color:rgba(255,194,71,.45)}
.minetag{font-style:normal;background:var(--irm);color:var(--bg);border-radius:4px;padding:0 5px;font-size:9.5px}
@media(max-width:560px){.sedrow2,.sedrow3{grid-template-columns:1fr}}

/* ══ 利用規約 ══ */
#terms{margin:24px 0 6px;border:1px solid var(--line);border-radius:11px;background:var(--sur2)}
#terms summary{cursor:pointer;padding:11px 14px;font-size:13px;font-weight:800;color:var(--dim);list-style:none}
#terms summary::-webkit-details-marker{display:none}
#terms summary::before{content:"▸ ";color:var(--irm)}
#terms[open] summary::before{content:"▾ "}
#terms summary:hover{color:var(--tx)}
.termsbody{padding:2px 16px 16px;font-size:12.5px;line-height:1.95;color:var(--dim)}
.termsbody h3{font-size:12.5px;font-weight:900;color:var(--tx);margin:14px 0 4px}
.termsbody p{margin:0 0 7px}
.termsbody b{color:var(--tx)}
.termsbody a{color:var(--irm);font-weight:800}
.tldr{background:var(--sur);border:1px solid var(--irm);border-radius:10px;padding:11px 14px;margin:10px 0 4px}
.tldr>b{display:block;color:var(--irm);font-size:12px;margin-bottom:5px}
.tldr ul{margin:0;padding-left:18px}
.tldr li{margin-bottom:3px}

.scb .sccov{width:100%;height:64px;object-fit:cover;border-radius:8px;margin-bottom:5px}
.scendcov{display:flex;align-items:center;gap:10px;margin-top:12px}
.scendcov img{width:52px;height:52px;object-fit:cover;border-radius:8px}
.scendcov span{font-size:11.5px;font-weight:700;color:var(--faint)}
.sartby{font-size:10px;font-weight:800;color:var(--faint);margin-top:2px}

/* ══ 共有画像 ══ */
#sharepanel{position:fixed;inset:0;background:rgba(8,10,14,.9);z-index:66;display:grid;place-items:center;padding:18px}
#sharebox{background:var(--sur);border:1px solid var(--line2);border-radius:14px;padding:16px;
 max-width:660px;width:100%;max-height:88vh;overflow:auto}
.shimg{width:100%;border-radius:10px;border:1px solid var(--line2);display:block;margin-bottom:12px}
.sheetwrap{display:flex;flex-direction:column;gap:6px}
.sheetwrap .shbtn{align-self:stretch}

/* ══ 作品を見る ══ */
.glink{position:absolute;bottom:6px;left:6px;width:22px;height:22px;border-radius:50%;
 background:var(--sur);border:1px solid var(--line2);color:var(--faint);font-size:11px;
 display:grid;place-items:center;cursor:pointer;z-index:2}
.glink:hover{border-color:var(--irm);color:var(--irm)}
#workpanel{position:fixed;inset:0;background:rgba(8,10,14,.88);z-index:64;display:grid;place-items:center;padding:18px}
#workbox{background:var(--sur);border:1px solid var(--line2);border-radius:14px;padding:16px;
 max-width:640px;width:100%;max-height:86vh;overflow:auto}
.wkhd{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.wkhd b{font-size:12.5px;color:var(--dim)}
.wkcov,.wkimg{width:100%;max-height:280px;object-fit:contain;border-radius:10px;background:var(--sur2)}
.wkby2{font-size:11px;color:var(--faint);font-weight:700;margin-top:4px}
.wkt{font-size:19px;font-weight:900;margin:12px 0 8px}
.wkbody{font-size:14.5px;line-height:2.15;color:var(--tx);white-space:pre-wrap;word-break:break-word}
.wkpost{font-size:16px;line-height:2;color:var(--tx);white-space:pre-wrap;padding:10px 0}
/* ボタンが6つに増えたので、折り返さないと文字が1字ずつ縦に割れる。
   ボタン自体は縮ませず、入らなければ次の行へ落とす。 */
.wkfoot{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:11px;
 border-top:1px solid var(--line);flex-wrap:wrap}
.wkfoot button{flex:none;white-space:nowrap}
.wklic{margin-left:auto;font-size:10.5px;color:var(--faint);font-weight:800;white-space:nowrap}
@media (max-width:560px){.wklic{margin-left:0;flex-basis:100%}}

/* ══ 注意が要る内容 ══ */
.veil{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
 min-height:96px;padding:14px;border-radius:9px;background:repeating-linear-gradient(45deg,
 var(--sur),var(--sur) 9px,var(--sur2) 9px,var(--sur2) 18px);cursor:pointer;text-align:center}
.veil b{font-size:12.5px;font-weight:900;color:var(--bad)}
.veil span{font-size:10.5px;color:var(--faint)}
.veil em{font-style:normal;font-size:11px;font-weight:800;color:var(--irm);margin-top:3px}
.pbflag{display:flex!important;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
 color:var(--dim);margin-top:8px;cursor:pointer}
.pbflag input{width:auto!important;margin:0!important}

/* ══ 通報 ══ */
.grep{position:absolute;bottom:6px;right:6px;width:22px;height:22px;border-radius:50%;
 background:var(--sur);border:1px solid var(--line2);color:var(--faint);font-size:11px;
 display:grid;place-items:center;cursor:pointer;z-index:2}
.grep:hover{border-color:var(--bad);color:var(--bad)}
#reppanel{position:fixed;inset:0;background:rgba(8,10,14,.86);z-index:62;display:grid;place-items:center;padding:18px}
#repbox{background:var(--sur);border:1px solid var(--line2);border-radius:14px;padding:16px;
 max-width:640px;width:100%;max-height:84vh;overflow:auto}
.repsec{font-size:12px;font-weight:900;color:var(--dim);margin-bottom:8px}
.repsec b{color:var(--bad);font-size:14px}
.repit{background:var(--sur2);border:1px solid var(--line2);border-radius:10px;padding:11px;margin-bottom:8px}
.rephd{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.repwhy{background:var(--bad);color:#fff;border-radius:5px;padding:1px 8px;font-size:11px;font-weight:900}
.repwhen{font-size:10.5px;color:var(--faint);margin-left:auto}
.repnote{font-size:12.5px;color:var(--dim);line-height:1.8;margin-bottom:6px}
.reptgt{display:flex;gap:9px;background:var(--sur);border-radius:8px;padding:8px;margin-bottom:7px}
.reptgt img{width:44px;height:44px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.reptgt b{display:block;font-size:12.5px;font-weight:800}
.reptgt span{display:block;font-size:10.5px;color:var(--faint)}
.reptgt .repbody2{color:var(--dim);font-size:11.5px;line-height:1.7;margin-top:3px}
.repgone{font-size:12px;color:var(--faint);font-style:italic;margin-bottom:7px}
.reprow{display:flex;gap:6px;flex-wrap:wrap}
.banit{display:flex;align-items:center;gap:10px}
.banit b{font-size:12px;font-family:ui-monospace,monospace}
.banit span{display:block;font-size:10.5px;color:var(--faint)}
.banit button{margin-left:auto}

/* ══ 個人投稿 ══ */
.postbox{background:var(--sur2);border:1px solid var(--line2);border-radius:11px;padding:11px;margin-bottom:10px}
.postbox textarea{width:100%;min-height:64px;background:var(--sur);color:var(--tx);
 border:1px solid var(--line2);border-radius:9px;padding:9px 11px;font-size:14px;
 font-family:inherit;line-height:1.85;resize:vertical}
.postbox textarea:focus{outline:0;border-color:var(--irm)}
.pbrow{display:flex;align-items:center;gap:9px;margin-top:8px;flex-wrap:wrap}
.pbn{font-size:11.5px;font-weight:800;color:var(--faint)}
.pbn.over{color:var(--bad)}
.pbnote{font-size:10.5px;color:var(--faint);flex:1;min-width:120px}
.postbox .btn{margin-left:auto}
.gpost{font-size:14px!important;line-height:1.95;color:var(--tx);white-space:pre-wrap;word-break:break-word}