/* UI v11（data/ui_prototype.html）から移設。見た目の正はプロトタイプ側 */
:root {
  --paper:#FCFBF5; --ink:#2A332C; --ink2:#5A6455; --mute:#8B9383;
  --amber:#D9A03C; --amberdim:#B0801E; --cline:#E0E4D4;
  --dusk:#3E4450; --dusktx:#AEB3C0; --duskdim:#787E8E;
  --sys:#15161A; --sysline:#D9A03C; --systx:#D9DCE3;
  --nbg:#171008; --ntx:#DCD2BC; --ndim:#8F8268; --gold:#C9A24B;
  --candle:#E2A94F; --shu:#B0402F; --nline:#2E2415;
  --mincho:"Hiragino Mincho ProN","Yu Mincho",serif;
  --goth:"Hiragino Sans","Yu Gothic",sans-serif;
  --mono:"SF Mono",Menlo,"Osaka-Mono",monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; }
body { font-family:var(--goth); background:var(--paper); color:var(--ink); }
a { color:inherit; text-decoration:none; }

/* ══════════ 読者側 ══════════ */
.fieldbg { min-height:100vh;
  background:linear-gradient(180deg, #9DC3DC 0%, #B5D5E1 46%, #DCE9E9 70%,
    #E7EDDC 82%, #DAE3BD 93%, #CFDCAD 100%);
  background-attachment:fixed; }
.sky { position:relative; overflow:hidden; padding:38px 24px 20px; }
.sun { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle 320px at 80% 0%, rgba(244,216,150,.55), transparent 70%); }
.cl { position:absolute; background:rgba(255,255,255,.75); border-radius:50%;
  filter:blur(22px); }
.cl1 { width:280px; height:66px; top:30px; right:13%; }
.cl2 { width:180px; height:48px; top:106px; right:34%; opacity:.6; }
.cl3 { width:150px; height:40px; top:52px; left:6%; opacity:.5; }
.skyin { position:relative; max-width:1020px; margin:0 auto; }
.sky h1 { font-family:var(--mincho); font-weight:600; margin-top:12px;
  font-size:clamp(22px,3.2vw,32px); line-height:1.5; letter-spacing:.06em;
  color:#243440; text-wrap:balance; }
.sky .lede { margin-top:12px; font-size:13.5px; line-height:2.05; color:#3D5261;
  max-width:38em; min-height:4.1em; }
.statrow { display:flex; align-items:center; gap:26px; margin-top:20px; flex-wrap:wrap; }
.stat { display:flex; align-items:baseline; gap:9px; }
.stat .num { font-family:var(--mincho); font-weight:600; font-size:38px; line-height:1;
  color:#243440; font-variant-numeric:tabular-nums; }
.stat .cap { font-size:13px; color:#3D5261; }
.dayb { font-family:var(--mono); font-size:12px; color:#54677A;
  font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.player { display:flex; align-items:center; gap:12px; flex:1; min-width:240px;
  max-width:420px; }
.player input[type=range] { -webkit-appearance:none; appearance:none; flex:1; height:6px;
  border-radius:3px; background:#3A3F4B; outline:none; transition:background .2s; }
.player input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px;
  height:16px; border-radius:50%; background:var(--sc,#3A3F4B); border:none;
  box-shadow:0 1px 3px rgba(30,40,50,.35); cursor:pointer; transition:background .2s; }
.player .phint { font-size:10.5px; color:#6B7E8E; white-space:nowrap; }

.field { padding:14px 24px 72px; }
.boardnotice { max-width:1020px; margin:0 auto 20px;
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.7);
  border-radius:6px; font-family:var(--mono); font-size:12.5px; line-height:2;
  padding:15px 18px; color:#2F3A42; }
.boardnotice .st { display:block; font-size:10px; letter-spacing:.18em; color:#6B7E8E;
  margin-bottom:5px; }
.boardnotice b { color:#16222C; font-weight:600; }
.board { max-width:1020px; margin:0 auto; display:grid;
  grid-template-columns:repeat(9,1fr); gap:9px; }
.t { position:relative; background:rgba(253,252,246,.95); border:1px solid rgba(255,255,255,.5);
  border-radius:5px; padding:20px 8px 11px; text-align:center; cursor:pointer;
  box-shadow:0 1px 5px rgba(35,55,25,.16);
  transition:background .8s ease, box-shadow .25s, transform .18s; }
.t:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(35,55,25,.24); }
.win { position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 7px 1.5px rgba(217,160,60,.65); transition:all .8s; }
.pin { position:absolute; top:5px; right:6px; font-style:normal; line-height:0;
  color:#9AA08F; opacity:.3; cursor:pointer; transition:opacity .15s, color .15s; }
.t:hover .pin { opacity:.75; }
.t.pinned { border-color:var(--amberdim); box-shadow:0 1px 6px rgba(176,128,30,.35); }
.t.pinned .pin { color:var(--amberdim); opacity:1; }
.t.pinned:hover .pin { opacity:.85; }
.t.pinned .win { width:9px; height:9px; top:7px; }
.board.hueon .t .win { background:hsl(var(--h) 58% 52%);
  box-shadow:0 0 7px 1.5px hsl(var(--h) 58% 52% / .6); }
.board.hueon .t.pinned .pin { color:hsl(var(--h) 58% 40%); }
.board.hueon .t.off .win { background:#292D38; box-shadow:none; }
.t.fresh, .board.hueon .t.off.fresh { background:#282C38; }
.t.fresh .tn { color:#C9CDDA; }
.t.fresh .td { color:#8E93A6; }
.t .tn { display:block; font-family:var(--mincho); font-weight:600; font-size:12.5px;
  line-height:1.4; letter-spacing:.03em; transition:color .8s; }
.t .tw { display:block; font-size:9px; color:var(--mute); margin-top:3px;
  letter-spacing:.06em; transition:color .8s; }
.t .td { display:block; visibility:hidden; font-family:var(--mono); font-size:8.5px;
  color:var(--duskdim); margin-top:5px; letter-spacing:.1em; }
.t .td u { text-decoration:none; }
.t .rchk { display:none; position:absolute; right:5px; bottom:4px; font-size:10px;
  color:var(--gold, #C9A24B); opacity:.85; }
.t.read .rchk { display:block; }
.t.off .rchk { color:var(--duskdim); }
.readbtn:disabled { opacity:.4; cursor:default; }

.t.off { background:var(--dusk); border-color:rgba(255,255,255,.06);
  box-shadow:0 1px 4px rgba(15,25,15,.3); cursor:default; transform:none; }
.t.off .win { background:#292D38; box-shadow:none; }
.t.off .pin { display:none; }
.t.off .tn { color:var(--dusktx); }
.t.off .tw { color:var(--duskdim); }
.t.off .td { visibility:visible; }
@media (max-width:840px) { .board { grid-template-columns:repeat(6,1fr); } }
@media (max-width:560px) { .board { grid-template-columns:repeat(4,1fr); gap:7px; } }

.sysnote { background:var(--sys); color:var(--systx); border-left:3px solid var(--sysline);
  font-family:var(--mono); font-size:12.5px; line-height:2; padding:16px 18px;
  border-radius:3px; }
.sysnote .st { display:block; font-size:10px; letter-spacing:.18em; color:#8E93A0;
  margin-bottom:6px; }
.sysnote b { color:#fff; font-weight:600; }

/* ── 話ページ（世界ごとの色相 --wc を纏う） ── */
.epwrap { max-width:680px; margin:0 auto; padding:36px 24px 72px; }
.crumb { font-size:11.5px; color:var(--mute); letter-spacing:.05em; margin-bottom:26px; }
.crumb a { border-bottom:1px solid var(--cline); padding-bottom:1px; }
.eptitle { font-family:var(--mincho); font-weight:600; font-size:25px; line-height:1.6; }
.epmeta { display:flex; gap:18px; margin:13px 0 4px; font-size:11.5px;
  color:var(--mute); font-variant-numeric:tabular-nums; }
.eprule { height:2px; margin:22px 0 36px; border-radius:1px;
  background:linear-gradient(90deg, var(--wc), var(--cline) 55%, transparent); }
.body p { font-size:16px; line-height:2.15; margin-bottom:1.5em; color:#333B33; }
.epnav { display:flex; justify-content:space-between; gap:8px; margin:46px 0 0;
  font-size:13px; flex-wrap:wrap; }
.epnav a { color:var(--wcd); }
.epnav a:hover { border-bottom:1px solid var(--wcd); }
/* 旧・案内板ブロック（ボタン横の .tob に移動） */
.toboard { text-align:center; margin:26px 0 0; }
.toboard a { font-size:12px; color:var(--mute); border-bottom:1px solid var(--cline);
  padding-bottom:1px; }
.cmt { margin-top:54px; border-top:1px solid var(--cline); padding-top:30px; }
.cmt h3 { font-family:var(--mincho); font-weight:600; font-size:15.5px; }
.cmt .chint { font-size:12px; color:var(--ink2); line-height:1.9; margin:8px 0 14px; }
.cmt textarea { width:100%; height:76px; border:1px solid var(--cline); border-radius:5px;
  padding:12px; font-size:13.5px; font-family:var(--goth); background:#fff; resize:vertical; }
.cmt textarea:focus { outline:2px solid var(--wc); outline-offset:-1px; }
.crow { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.cnote { font-size:11px; color:var(--mute); }
.csend { border:0; background:var(--ink); color:var(--paper); font-size:12.5px;
  padding:10px 26px; border-radius:99px; cursor:pointer; }
.cothers { margin-top:24px; }
.cothers summary { font-size:12.5px; color:var(--ink2); cursor:pointer;
  list-style-position:inside; }
.rcmt { font-size:13px; line-height:1.9; color:#4A5248; border-left:2px solid var(--cline);
  padding:5px 12px; margin:12px 0 0 4px; }
.rcmt .rwho { font-size:10.5px; color:var(--mute); margin-top:2px; }
.spines { max-width:680px; margin:0 auto; padding:0 24px 64px; }
.spines h3 { font-family:var(--mincho); font-weight:600; font-size:15.5px;
  margin-bottom:16px; }
.wcard { position:relative; display:block; background:transparent;
  border:1px solid var(--cline); border-radius:6px; padding:17px 18px 14px 30px;
  margin-bottom:11px; transition:background .18s, transform .15s, box-shadow .15s; }
a.wcard:hover { background:#fff; transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(60,80,40,.12); }
.wwin { position:absolute; top:22px; left:14px; width:5px; height:5px; border-radius:50%;
  background:#C9CFC0; transition:background .18s; }
a.wcard:hover .wwin { background:var(--wc); }
.wname { font-family:var(--mincho); font-weight:600; font-size:15px; }
.whero { font-size:11px; color:var(--mute); margin-top:3px; }
.wspine { font-size:13px; line-height:1.9; color:var(--ink2); margin-top:8px; }
.rfoot { border-top:1px solid var(--cline); padding:26px 24px 42px; text-align:center; }
.rfoot .seal { font-family:var(--mono); font-size:10px; color:var(--mute); }
.bfoot { text-align:center; padding:34px 24px 46px; }
.bfoot a { font-size:13.5px; color:var(--ink2);
  text-decoration:underline; text-underline-offset:3px; }
.rfoot .flink { display:inline-block; margin-top:12px; font-size:13.5px;
  color:var(--ink2); text-decoration:underline; text-underline-offset:3px; }
.body b { font-weight:700; }

/* 読了トースト */
.toast { position:fixed; left:50%; bottom:36px; z-index:65; pointer-events:none;
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--cline); border-radius:99px;
  padding:11px 24px; box-shadow:0 8px 24px rgba(50,60,30,.2);
  opacity:0; transform:translate(-50%,16px) scale(.88);
  transition:all .3s cubic-bezier(.34,1.56,.64,1); }
.toast.pop { opacity:1; transform:translate(-50%,0) scale(1); }
.toast .tdot { width:7px; height:7px; border-radius:50%; background:var(--wc, var(--amber)); }
.toast .tst { font-family:var(--mincho); font-weight:600; font-size:14px;
  letter-spacing:.2em; color:var(--ink); }
.toast .ttx { font-size:12px; color:var(--ink2); }

/* ══════════ 仕掛け人側 ══════════ */
.op { background:var(--nbg); color:var(--ntx); font-family:var(--mincho); min-height:100vh;
  position:relative; }
.op::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 460px 340px at 24% 90px, rgba(226,169,79,.16), transparent 70%),
    radial-gradient(ellipse 800px 600px at 80% 100%, rgba(120,70,20,.08), transparent 70%); }
.op > * { position:relative; z-index:1; }
.opin { max-width:620px; margin:0 auto; padding:0 24px; }
.ophdr { padding:58px 0 8px; }
.flame { display:inline-block; width:8px; height:11px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%, #FFE9B0, var(--candle) 60%, #B06A20);
  box-shadow:0 0 26px 9px rgba(226,169,79,.45); vertical-align:middle; margin-right:14px; }
.ophdr h1 { display:inline; font-size:19px; font-weight:600; letter-spacing:.3em;
  color:#EDE3CB; vertical-align:middle; }
.ophdr .osub { margin-top:16px; font-size:12.5px; color:var(--ndim); letter-spacing:.08em;
  line-height:2.2; }
.orn { text-align:center; color:rgba(201,162,75,.5); font-size:11px; padding:26px 0 2px;
  letter-spacing:1em; text-indent:1em; }
.op .sysnote { margin:26px 0 6px; background:#1E1810; border-left-color:var(--candle);
  color:#D8CDB6; }
.op .sysnote .st { color:#9C8B67; }
.oart { padding:26px 0 4px; }
.oart h2 { font-size:13px; font-weight:600; color:var(--gold); letter-spacing:.3em;
  margin-bottom:22px; }
.oart p { font-size:15.5px; line-height:2.5; margin-bottom:1.55em; color:var(--ntx); }
.owill { margin-top:4px; padding:24px 26px; background:rgba(226,169,79,.05);
  border:1px solid rgba(201,162,75,.22); border-radius:4px; }
.owill p { font-size:14.5px; line-height:2.4; color:#CFC4AA; margin-bottom:1.3em; }
.owill .wfrom { font-size:11.5px; color:var(--ndim); letter-spacing:.08em; }
.opnav { display:flex; justify-content:space-between; margin:44px 0 60px; font-size:13px; }
.opnav a { color:var(--gold); letter-spacing:.08em; }
.opnav a:hover { border-bottom:1px solid var(--gold); }
.opfoot { text-align:center; padding:0 24px 44px; }
.opfoot .seal { font-family:var(--mono); font-size:10px; color:#57503C; }
.opfoot .flink { display:block; margin-top:12px; font-size:13.5px; color:#8F8268;
  text-decoration:underline; text-underline-offset:3px; }

/* 窓口 */
.winarea { position:fixed; right:26px; bottom:26px; z-index:60;
  display:flex; align-items:center; gap:10px; }
.winstatus { font-family:var(--mincho); font-size:11.5px; color:#8F8268;
  letter-spacing:.08em; opacity:0; transition:opacity .6s; }
.winstatus.on { opacity:1; }
.winbtn { width:54px; height:54px;
  border-radius:50%; border:1px solid rgba(201,162,75,.5); background:#1E1810;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,.5); }
.winbtn .flame { margin:0; }
/* 不在（電気を消して出かけ中）：部屋の灯りを落とし、導線を消す */
body.op.away .opin, body.op.away .opfoot { filter:brightness(.55) saturate(.7); }
body.op.away .winbtn { display:none; }
.modal { position:fixed; inset:0; z-index:70; display:none; align-items:flex-end;
  justify-content:flex-end; padding:26px; background:rgba(10,7,3,.55); }
.modal.open { display:flex; }
.mbox { width:min(420px, 100%); background:#1B140B; border:1px solid rgba(201,162,75,.35);
  border-radius:6px; padding:22px 22px 18px; font-family:var(--mincho); color:var(--ntx);
  box-shadow:0 10px 40px rgba(0,0,0,.6); }
.mhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.mhead h3 { font-size:13px; font-weight:600; color:var(--gold); letter-spacing:.3em; }
.mhead button { border:0; background:none; color:var(--ndim); font-size:16px; cursor:pointer; }
.mlog { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.msg { max-width:85%; padding:10px 14px; border-radius:4px; font-size:13px; line-height:2; }
.msg.you { align-self:flex-end; background:rgba(201,162,75,.12); color:#E4D9BE; }
.msg.kakari { align-self:flex-start; background:rgba(255,255,255,.04); color:#C9BFA6; }
.morow { display:flex; gap:8px; }
.morow input { flex:1; background:#221A0F; border:1px solid var(--nline); color:var(--ntx);
  padding:11px 13px; font-size:13px; font-family:var(--mincho); border-radius:3px; }
.morow input:focus { outline:1px solid var(--candle); outline-offset:-1px; }
.morow button { border:1px solid rgba(201,162,75,.4); background:transparent;
  color:var(--gold); padding:0 18px; font-size:12.5px; cursor:pointer; border-radius:3px;
  font-family:var(--mincho); }
.mnote { font-size:10.5px; color:#7D7156; margin-top:10px; line-height:1.9; }
/* 読了ボタン（UI v12） */
.donewrap { display:flex; align-items:center; justify-content:center;
  gap:16px; margin:30px 0 0; }
.donewrap .tob { font-size:11.5px; color:var(--mute);
  border-bottom:1px solid var(--cline); padding-bottom:1px; }
.epnav:empty { display:none; }
.readbtn { border:1px solid var(--wc, var(--amber)); background:#fff;
  color:var(--wcd, var(--amber)); font-family:var(--mincho); font-weight:600;
  font-size:14.5px; letter-spacing:.1em; padding:12px 34px; border-radius:99px;
  cursor:pointer; transition:background .15s; }
.readbtn:hover { background:rgba(0,0,0,.03); }
.done { display:none; align-items:center; gap:12px; justify-content:center;
  margin:0 auto; width:fit-content; background:#fff; border:1px solid var(--cline);
  border-radius:99px; padding:11px 24px; box-shadow:0 4px 14px rgba(50,60,30,.1); }
.done .tdot { width:7px; height:7px; border-radius:50%; background:var(--wc, var(--amber)); }
.done .tst { font-family:var(--mincho); font-weight:600; font-size:14px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

/* 話ページの脳内通知（管理人の部屋と同じ黒様式） */
.epnote { margin:2.2em 0; }

/* コメント取り消し */
.cdel { border:0; background:none; color:var(--mute); font-size:11px; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; margin-right:12px; }
.cdel:disabled { text-decoration:none; cursor:default; }