:root{
  --board:#F0E0D6;
  --paper:#FFFFEE;
  --paper-alt:#FBF6E4;
  --ink:#7A1E1E;
  --ink-soft:#9E6B5C;
  --ink-faint:#B79285;
  --rule:#C9A79B;
  --rule-soft:#E0C6BC;
  --quote:#4F7A21;
  --ok:#2F7D4F;
  --ng:#B3261E;
  --chaos:#B07C12;
  --shadow:rgba(90,45,35,.22);

  /* キャラクターの見え方はテーマで変えない */
  --char-bg:#FDF3E3;
  --blood:#9C2A2A;
  --blood-bright:#E01B10;
  --glow-bright:#D9A83E;

  --accent:var(--ok);

  --f-round:"Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro","BIZ UDPGothic","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  --f-body:"Hiragino Sans","Yu Gothic","Noto Sans JP","Meiryo",system-ui,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,"BIZ UDGothic",monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --board:#171110;
    --paper:#221816;
    --paper-alt:#2A1E1B;
    --ink:#EDCCBF;
    --ink-soft:#B58F81;
    --ink-faint:#8A6A5F;
    --rule:#4B322C;
    --rule-soft:#3A2723;
    --quote:#9DC66D;
    --ok:#6FC08A;
    --ng:#F08A80;
    --chaos:#E3B551;
    --shadow:rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --board:#171110; --paper:#221816; --paper-alt:#2A1E1B;
  --ink:#EDCCBF; --ink-soft:#B58F81; --ink-faint:#8A6A5F;
  --rule:#4B322C; --rule-soft:#3A2723; --quote:#9DC66D;
  --ok:#6FC08A; --ng:#F08A80; --chaos:#E3B551; --shadow:rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  --board:#F0E0D6; --paper:#FFFFEE; --paper-alt:#FBF6E4;
  --ink:#7A1E1E; --ink-soft:#9E6B5C; --ink-faint:#B79285;
  --rule:#C9A79B; --rule-soft:#E0C6BC; --quote:#4F7A21;
  --ok:#2F7D4F; --ng:#B3261E; --chaos:#B07C12; --shadow:rgba(90,45,35,.22);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:var(--board);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.6;
  display:flex;
  justify-content:center;
  padding:clamp(10px,3vw,32px) 10px 56px;
  -webkit-font-smoothing:antialiased;
}
h1{margin:0;text-wrap:balance}
button{font:inherit;color:inherit}

.board{width:100%;max-width:480px;display:flex;flex-direction:column;gap:10px}

.board-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:6px;border-bottom:2px solid var(--rule);
}
.board-name{font-family:var(--f-round);font-weight:700;font-size:17px;letter-spacing:.02em}

.thread{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:4px;
  box-shadow:0 1px 0 var(--rule-soft),0 14px 34px -24px var(--shadow);
  padding:14px 14px 4px;
  display:flex;flex-direction:column;gap:14px;
}

.posts{display:flex;flex-direction:column;gap:14px}

.post{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.post-head{grid-column:1/-1;font-family:var(--f-mono);font-size:11px;color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:8px}
.post-head .who{color:var(--quote);font-weight:700}
.post-head .no{font-variant-numeric:tabular-nums}
.post-figure{grid-column:1;grid-row:2;width:124px}
.post-body{grid-column:2;grid-row:2;min-width:0}
.post.no-image .post-body{grid-column:1/-1}
.post-body p{margin:0 0 2px}
.post-body .say{font-family:var(--f-round);font-size:17px;font-weight:700;line-height:1.5}
.post-body .q{color:var(--quote);word-break:break-word;white-space:pre-wrap}
.post-body .aside{color:var(--ink-soft);font-size:13px}
.post-body .deco{font-family:var(--f-mono);font-size:14px;color:var(--ok);letter-spacing:.02em;word-break:break-all;margin-top:2px}

.filename{font-family:var(--f-mono);font-size:10px;color:var(--ink-faint);margin-bottom:3px;text-decoration:underline;text-underline-offset:2px}

/* ---- キャラクター ---- */
.avatar{
  position:relative;display:block;width:100%;isolation:isolate;
  border:1px solid var(--rule-soft);background:var(--char-bg);border-radius:2px;
  overflow:hidden;
}
.avatar img{display:block;width:100%;height:auto}

/* ころしたときは、そのまま真っ赤にする */
.avatar .wash{position:absolute;inset:0;background:var(--blood-bright);mix-blend-mode:multiply;opacity:0}
.avatar.mood-kill img{filter:grayscale(1) brightness(1.18) contrast(1.05)}
.avatar.mood-kill .wash{opacity:1}
.avatar.mood-kill{border-color:var(--blood)}

.avatar.mood-glow{filter:saturate(1.15) drop-shadow(0 0 10px var(--glow-bright));border-color:var(--glow-bright)}

/* ---- 判定の帯 ---- */
.verdict{
  display:none;margin:0 -14px;padding:12px 14px;
  border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--paper));
  text-align:center;
}
.verdict.show{display:block}
.verdict .face{font-family:var(--f-mono);font-size:16px;color:var(--accent);letter-spacing:.05em}
.verdict .main{font-family:var(--f-round);font-weight:700;font-size:15px;color:var(--accent);margin-top:2px}
.verdict .sub{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.verdict.kill{--accent:var(--ng)}
.verdict.safe{--accent:var(--ok)}
.verdict.chaos{--accent:var(--chaos)}

/* ---- 書きこみ欄 ---- */
.dock{border-top:1px dashed var(--rule-soft);padding:12px 0 14px;display:flex;flex-direction:column;gap:9px}
.row{display:flex;gap:7px;align-items:flex-start}
.field{
  flex:1;min-width:0;padding:9px 11px;border:1px solid var(--rule);border-radius:3px;
  background:var(--paper-alt);color:var(--ink);font-family:var(--f-body);font-size:15px;
  line-height:1.5;outline:none;resize:none;overflow:hidden;
}
.field::placeholder{color:var(--ink-faint)}
.field:focus-visible{border-color:var(--quote);box-shadow:0 0 0 3px color-mix(in srgb,var(--quote) 22%,transparent)}

.btn{
  padding:9px 14px;border:1px solid var(--rule);border-radius:3px;background:var(--paper-alt);
  cursor:pointer;font-size:13.5px;font-family:var(--f-round);font-weight:700;white-space:nowrap;
  transition:background .18s ease,border-color .18s ease;
}
.btn:hover{background:color-mix(in srgb,var(--quote) 12%,var(--paper-alt));border-color:var(--quote)}
.btn:focus-visible{outline:2px solid var(--quote);outline-offset:2px}
.btn.primary{background:var(--quote);border-color:var(--quote);color:var(--paper)}
.btn.primary:hover{filter:brightness(1.08);background:var(--quote)}

.actions{display:flex;flex-wrap:wrap;gap:7px}
.actions .btn{flex:1 1 auto}

/* ---- 異議申し立てのリンク ---- */
.appeal-row{display:flex}
.appeal{
  background:none;border:0;padding:2px 0;cursor:pointer;
  font-family:var(--f-round);font-size:13.5px;font-weight:700;
  color:var(--ng);text-decoration:underline;text-underline-offset:3px;
}
.appeal:hover{filter:brightness(1.15)}
.appeal:focus-visible{outline:2px solid var(--ng);outline-offset:2px}

/* ---- 要望と投票 ---- */
.requests{
  background:var(--paper);border:1px solid var(--rule);border-radius:4px;
  padding:12px 14px 14px;display:flex;flex-direction:column;gap:9px;
}
/* display を指定したぶん、hidden 属性が効かなくなるので打ち消す */
.requests[hidden]{display:none}
.requests-head{
  margin:0;font-family:var(--f-round);font-size:13px;font-weight:700;
  color:var(--ink-soft);letter-spacing:.02em;
}
.requests-body{display:flex;flex-direction:column;gap:9px}
.requests-empty,.requests-note{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.7}

.requests-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.requests-item{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:7px 0;border-bottom:1px dashed var(--rule-soft);
}
.requests-item:last-child{border-bottom:0}
.requests-word{font-family:var(--f-round);font-size:14.5px;min-width:0;word-break:break-word}
.requests-tag{
  display:inline-block;margin-left:8px;padding:1px 6px;border-radius:2px;
  font-family:var(--f-mono);font-size:10px;color:var(--ink-faint);
  border:1px solid var(--rule-soft);white-space:nowrap;
}
.btn.vote{padding:5px 10px;font-size:12px;flex:0 0 auto}
.btn.vote.done{background:color-mix(in srgb,var(--ok) 18%,var(--paper-alt));border-color:var(--ok);color:var(--ok)}
.btn.vote:disabled{cursor:default;opacity:.85}

.requests-form{display:flex;flex-direction:column;gap:9px}

.foot{margin:0;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-faint);text-align:center;line-height:1.8}

.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px);
  background:var(--ink);color:var(--paper);padding:9px 16px;border-radius:3px;
  font-family:var(--f-mono);font-size:12px;opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;z-index:50;max-width:calc(100% - 32px);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:400px){
  .post-figure{width:98px}
  .post-body .say{font-size:16px}
}