/* ============ 回覧板が回ってきた — Papers, Please 風 UI ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  height:100%;
  background:#15130f;
  font-family:'DotGothic16', 'MS Gothic', monospace;
  color:#e6dec6;
  overscroll-behavior:none;
}

#app {
  max-width:480px;
  margin:0 auto;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#221f1b;
  border-left:2px solid #0c0b09;
  border-right:2px solid #0c0b09;
}

/* ---- 上部：マンション情景 ---- */
#scene {
  width:100%;
  height:auto;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border-bottom:3px solid #0c0b09;
  background:#11100d;
  flex-shrink:0;
}

/* ---- ステータスバー ---- */
#statbar {
  flex-shrink:0;
  background:#2c2823;
  border-bottom:3px solid #0c0b09;
  padding:5px 8px 6px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:3px 8px;
  font-size:11px;
}
#statbar.hidden { display:none; }
.stat { line-height:1.1; }
.stat .lbl { color:#9c937d; font-size:10px; display:flex; justify-content:space-between; }
.stat .lbl .delta { font-size:10px; }
.delta.up { color:#7fae5a; }
.delta.down { color:#c75b4a; }
.bar {
  height:7px; margin-top:2px;
  background:#171511;
  border:1px solid #0c0b09;
  position:relative;
}
.bar i {
  position:absolute; left:0; top:0; bottom:0;
  background:#7fae5a;
  transition:width .4s steps(8);
}
.bar i.warn { background:#caa84a; }
.bar i.bad  { background:#c75b4a; }
.moneyval { font-size:13px; color:#e6dec6; margin-top:1px; }
.moneyval.neg { color:#c75b4a; }

/* ---- メイン領域 ---- */
#main {
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  padding:10px;
  position:relative;
}

/* ---- 紙の書類 ---- */
.paper {
  background:#d9d0b2;
  color:#2b2620;
  border:3px solid #0c0b09;
  box-shadow:inset 0 0 0 2px #b9ae8e, 3px 4px 0 rgba(0,0,0,.45);
  padding:12px 14px;
  position:relative;
  animation:slidein .22s steps(5);
  margin-bottom:10px;
}
@keyframes slidein {
  from { transform:translateY(-14px) rotate(-1deg); opacity:0; }
  to   { transform:none; opacity:1; }
}
.paper .doctype {
  display:inline-block;
  font-size:11px;
  color:#7a3326;
  border:1px solid #7a3326;
  padding:0 5px;
  margin-bottom:6px;
}
/* 管轄バッジ（自治会／管理組合／管轄不明） */
.orgtag {
  display:inline-block;
  font-size:11px;
  padding:0 5px;
  margin:0 0 6px 4px;
  border:1px solid;
}
.orgtag.o-j { color:#3f6a35; border-color:#3f6a35; }
.orgtag.o-k { color:#34507a; border-color:#34507a; }
.orgtag.o-h { color:#8a6a30; border-color:#8a6a30; background:repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(138,106,48,.12) 3px, rgba(138,106,48,.12) 6px); }
.paper h2 {
  font-size:17px;
  border-bottom:2px solid #2b2620;
  padding-bottom:4px;
  margin-bottom:8px;
  letter-spacing:1px;
}
.paper .body { font-size:14px; line-height:1.75; white-space:pre-wrap; }
.paper .from {
  display:flex; align-items:center; gap:8px;
  margin-top:10px; padding-top:8px;
  border-top:1px dashed #8d8264;
  font-size:12px; color:#5a5140;
}
.from canvas { image-rendering:pixelated; border:2px solid #0c0b09; background:#c4b994; }

/* 押されたハンコ */
.stamp-mark {
  position:absolute;
  right:14px; top:34px;
  color:#a33327;
  border:3px solid #a33327;
  border-radius:4px;
  font-size:24px;
  padding:2px 10px;
  letter-spacing:4px;
  transform:rotate(-12deg);
  opacity:0;
  pointer-events:none;
  z-index:5;
}
.stamp-mark.slam {
  animation:slam .22s steps(4) forwards;
}
@keyframes slam {
  0%   { opacity:0; transform:rotate(-12deg) scale(2.6); }
  70%  { opacity:.95; transform:rotate(-12deg) scale(.95); }
  100% { opacity:.88; transform:rotate(-12deg) scale(1); }
}

/* ---- 選択肢 ---- */
.choices { display:flex; flex-direction:column; gap:7px; }
button {
  font-family:inherit;
  cursor:pointer;
}
.choice {
  text-align:left;
  background:#3d3831;
  color:#e6dec6;
  border:2px solid #0c0b09;
  box-shadow:0 3px 0 #0c0b09;
  padding:9px 11px;
  font-size:14px;
  line-height:1.4;
}
.choice:active { transform:translateY(3px); box-shadow:none; }
.choice .d { display:block; font-size:11px; color:#9c937d; margin-top:2px; }
.choice .cost { color:#cd8950; }
.choice:disabled {
  opacity:.45; cursor:not-allowed;
  box-shadow:none; transform:translateY(3px);
}

/* ---- 結果表示 ---- */
.outcome {
  background:#2c2823;
  border:2px solid #0c0b09;
  padding:12px 14px;
  font-size:14px;
  line-height:1.8;
  margin-bottom:10px;
  animation:slidein .2s steps(4);
}
.outcome .fx { margin-top:8px; font-size:13px; display:flex; flex-wrap:wrap; gap:4px 12px; }
.outcome .fx span.up   { color:#7fae5a; }
.outcome .fx span.down { color:#c75b4a; }

/* ---- 汎用ボタン ---- */
.btn-primary {
  align-self:center;
  background:#5a4a35;
  color:#f0e8cf;
  border:2px solid #0c0b09;
  box-shadow:0 3px 0 #0c0b09;
  padding:10px 28px;
  font-size:15px;
  letter-spacing:2px;
  margin-top:4px;
}
.btn-primary:active { transform:translateY(3px); box-shadow:none; }

/* ---- 月カード／タイトル ---- */
.monthcard, .titlecard {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
  animation:fadein .4s steps(6);
}
@keyframes fadein { from{opacity:0;} to{opacity:1;} }
.monthcard .m { font-size:34px; letter-spacing:6px; }
.monthcard .f { font-size:13px; color:#9c937d; line-height:1.8; max-width:300px; }
.titlecard h1 {
  font-size:30px;
  letter-spacing:3px;
  line-height:1.5;
  color:#e6dec6;
  text-shadow:3px 3px 0 #0c0b09;
}
.titlecard .sub { font-size:13px; color:#9c937d; line-height:2; }
.titlecard .ver { font-size:11px; color:#5e574a; margin-top:10px; }
.titlecard .btn-achievements {
  background:#364f48;
  padding-left:42px;
  padding-right:42px;
}

/* ---- 月末回覧板 ---- */
.report .row {
  display:flex; justify-content:space-between;
  font-size:13px; padding:3px 0;
  border-bottom:1px dotted #8d8264;
}
.report .row.total { font-weight:bold; border-bottom:2px solid #2b2620; }
.voices { margin-top:10px; }
.voices .vtitle { font-size:11px; color:#5a5140; margin-bottom:4px; }
.voice {
  background:#cdc3a0;
  border:1px solid #9a8f6e;
  border-radius:2px;
  font-size:12px;
  padding:5px 8px;
  margin-bottom:5px;
  line-height:1.6;
}
.voice b { color:#7a3326; font-weight:normal; }

/* ハンコ押下ボタン（月末確認） */
.hanko-btn {
  align-self:center;
  width:74px; height:74px;
  border-radius:50%;
  border:3px solid #7a3326;
  background:#a33327;
  color:#f0e8cf;
  font-size:20px;
  letter-spacing:1px;
  box-shadow:0 4px 0 #4d1812;
  margin:6px auto 2px;
  display:block;
}
.hanko-btn:active { transform:translateY(4px); box-shadow:none; }
.hanko-hint { text-align:center; font-size:11px; color:#9c937d; margin-bottom:6px; }

/* 月末の確認印：赤い〇をタップすると「確認」のはんこが押される */
.hanko-circle {
  position:relative;
  width:92px; height:92px;
  border-radius:50%;
  border:3px dashed #a33327;
  background:radial-gradient(circle, rgba(163,51,39,.10), transparent 72%);
  margin:8px auto 6px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .08s;
}
.hanko-circle:active { transform:scale(.95); }
.hanko-circle.done { border-style:solid; cursor:default; }
.hanko-guide {
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  color:#a33327; opacity:.42; font-size:32px; font-weight:bold;
}
.hanko-circle.done .hanko-guide { display:none; }
.hanko-stamp {
  width:74px; height:74px;
  border-radius:50%;
  border:3px solid #a33327;
  box-shadow:inset 0 0 0 2px #a33327;
  color:#a33327;
  writing-mode:vertical-rl;
  font-size:26px; font-weight:bold; letter-spacing:2px; line-height:1.05;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform:scale(2.6) rotate(-8deg);
  pointer-events:none;
}
.hanko-stamp.slam { animation:hankoSlam .28s steps(4) forwards; }
@keyframes hankoSlam {
  0%   { opacity:0;   transform:scale(2.6) rotate(-8deg); }
  70%  { opacity:.95; transform:scale(.94) rotate(-8deg); }
  100% { opacity:.9;  transform:scale(1)   rotate(-8deg); }
}

/* ---- エンディング演出 ---- */
.ending-blackout {
  position:fixed; inset:0; z-index:100;
  background:#050609;
  opacity:0;
  pointer-events:none;
  transition:opacity .72s steps(10);
}
.ending-blackout.active { opacity:1; }
.ending-blackout.release { opacity:0; transition-duration:1.05s; }
#app.ending-mode #topbar,
#app.ending-mode > #scene,
#app.ending-mode #statbar { display:none !important; }
#app.ending-mode #main { padding:0; overflow:hidden; }
.ending-film {
  position:absolute; inset:0;
  overflow:hidden;
  background:#090c18;
  color:#f0e8cf;
  user-select:none;
}
#ending-scene {
  position:absolute; inset:0;
  width:100%; height:100%;
  image-rendering:pixelated;
}
.ending-vignette {
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(5,7,15,.18), transparent 35%, rgba(5,6,10,.18) 72%, rgba(5,6,10,.65)),
    radial-gradient(ellipse at center, transparent 35%, rgba(3,4,9,.48) 100%);
  pointer-events:none;
}
.ending-curtain {
  position:absolute; inset:0; z-index:20;
  background:#08090c;
  opacity:1;
  transition:opacity 1.15s steps(12);
  pointer-events:none;
}
.ending-curtain.open { opacity:0; }
.ending-content {
  position:absolute;
  left:20px; right:20px; top:12%; bottom:16%;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  opacity:1;
  transform:translateY(0);
  transition:opacity .34s steps(5), transform .34s steps(5);
}
.ending-content.leaving { opacity:0; transform:translateY(-14px); }
.ending-content.entering { opacity:0; transform:translateY(14px); }
.ending-prologue {
  padding:22px 18px;
  max-width:340px;
  background:rgba(9,11,20,.68);
  border-top:1px solid rgba(230,222,198,.45);
  border-bottom:1px solid rgba(230,222,198,.45);
  text-shadow:0 2px #090b11;
}
.ending-year {
  color:#caa84a;
  font-size:13px;
  letter-spacing:6px;
  margin-bottom:18px;
}
.ending-prologue-text { font-size:15px; line-height:2.2; }
.ending-resident-card {
  width:100%;
  max-width:350px;
  padding:18px 16px 20px;
  background:rgba(13,15,23,.82);
  border:1px solid rgba(230,222,198,.38);
  box-shadow:0 8px 24px rgba(0,0,0,.42);
}
.ending-relation {
  display:inline-block;
  padding:2px 10px;
  margin-bottom:10px;
  border:1px solid currentColor;
  font-size:11px;
  letter-spacing:3px;
}
.ending-relation.friend { color:#9ac06a; }
.ending-relation.neutral { color:#caa84a; }
.ending-relation.hostile { color:#d66b58; }
.ending-portrait {
  display:flex;
  justify-content:center;
  margin:-4px auto 10px;
}
.ending-portrait canvas {
  image-rendering:pixelated;
  border:3px solid #171511;
  background:#c4b994;
  box-shadow:0 5px 0 rgba(0,0,0,.4);
}
.ending-resident-name { font-size:20px; letter-spacing:2px; }
.ending-resident-role { font-size:11px; color:#aaa18c; margin:4px 0 8px; }
.ending-resident-band {
  display:inline-block;
  font-size:11px;
  border:1px solid currentColor;
  padding:1px 8px;
  margin-bottom:13px;
}
.ending-after {
  font-size:13px;
  line-height:1.95;
  color:#ddd5bc;
  text-align:left;
}
.ending-final {
  width:100%;
  max-width:370px;
  padding:20px 15px;
  background:rgba(9,11,18,.86);
  border-top:2px solid #8d8264;
  border-bottom:2px solid #8d8264;
  text-shadow:0 2px #090b11;
}
.ending-final-label {
  font-size:11px;
  letter-spacing:6px;
  color:#aaa18c;
  margin-bottom:10px;
}
.ending-final-title {
  display:inline-block;
  font-size:26px;
  letter-spacing:4px;
  line-height:1.45;
  border:3px double #cfc6ab;
  padding:8px 15px;
}
.ending-final.good .ending-final-title { color:#e0bd50; border-color:#caa84a; }
.ending-final.bad .ending-final-title { color:#d66b58; border-color:#c75b4a; }
.ending-final.mid .ending-final-title { color:#e1d9c1; border-color:#8d8264; }
.ending-final-sub { font-size:12px; letter-spacing:2px; color:#aaa18c; margin:10px 0 0; }
.ending-final-text {
  font-size:13px;
  line-height:1.85;
  color:#d2cab3;
  white-space:pre-line;
  margin:16px auto 12px;
  max-width:330px;
}
.ending-final-score {
  font-size:11px;
  color:#aaa18c;
  line-height:1.85;
}
.ending-final-score b { color:#f0e8cf; font-size:15px; }
.ending-final.good .ending-final-score b { color:#e0bd50; }
.ending-final.bad .ending-final-score b { color:#d66b58; }
.ending-final .btn-primary { margin-top:16px; }
.ending-list-btn {
  display:block;
  margin:15px auto 0;
  padding:7px 13px;
  background:rgba(68,62,52,.86);
  color:#e6dec6;
  border:1px solid #8d8264;
  font-size:12px;
}
.ending-skip {
  position:absolute; z-index:10;
  top:12px; right:12px;
  background:rgba(20,21,27,.72);
  color:#cfc6ab;
  border:1px solid #6f6858;
  padding:6px 9px;
  font-size:11px;
}
.ending-progress {
  position:absolute; z-index:6;
  top:17px; left:16px;
  font-size:10px;
  color:rgba(230,222,198,.62);
  letter-spacing:1px;
}
.ending-hint {
  position:absolute; z-index:6;
  left:0; right:0; bottom:15px;
  text-align:center;
  font-size:10px;
  color:rgba(230,222,198,.68);
  animation:endingBlink 1.4s steps(2) infinite;
}
.ending-skip.hidden, .ending-hint.hidden { display:none; }
@keyframes endingBlink { 50% { opacity:.35; } }
.ending-all-panel {
  display:none;
  position:absolute; inset:0; z-index:30;
  padding:14px;
  overflow-y:auto;
  background:rgba(6,7,11,.96);
}
.ending-all-panel.show { display:block; }
.ending-all-box { max-width:410px; margin:0 auto; position:relative; }
.ending-all-title {
  font-size:18px;
  letter-spacing:4px;
  color:#caa84a;
  padding:8px 80px 10px 0;
  border-bottom:1px solid #5d574b;
  margin-bottom:10px;
}
.ending-all-close {
  position:absolute; top:3px; right:0;
  padding:6px 10px;
  background:#554b3e;
  color:#f0e8cf;
  border:1px solid #8d8264;
  font-size:11px;
}
.ending-all-card {
  display:flex;
  gap:10px;
  padding:9px;
  margin-bottom:8px;
  background:#25231f;
  border:1px solid #514b40;
}
.ending-all-port { display:flex; flex-shrink:0; }
.ending-all-port canvas {
  image-rendering:pixelated;
  border:2px solid #0c0b09;
  background:#c4b994;
}
.ending-all-copy { font-size:11px; line-height:1.65; color:#cfc6ab; }
.ending-all-head {
  display:flex; justify-content:space-between; gap:8px;
  font-size:12px; margin-bottom:3px; color:#e6dec6;
}
.ending-all-head span { flex-shrink:0; font-size:10px; }
.ending-all-empty { padding:30px; text-align:center; color:#9c937d; }

/* ---- トップバー（月・時間帯・年間進捗・入居者・音） ---- */
#topbar {
  display:none;
  align-items:center;
  gap:8px;
  padding:5px 8px;
  background:#23403a;
  border-bottom:3px solid #0c0b09;
  flex-shrink:0;
}
#topbar.show { display:flex; }
.tb-month { display:flex; align-items:baseline; gap:3px; flex-shrink:0; }
.tb-m { font-size:20px; color:#e6dec6; letter-spacing:1px; }
.tb-t { font-size:11px; color:#9fc0b0; }
.tb-prog { flex:1; min-width:36px; }
.tb-plabel { font-size:9px; color:#8fae9e; margin-bottom:1px; }
.tb-bar { height:7px; background:#15211d; border:1px solid #0c0b09; }
.tb-bar i { display:block; height:100%; background:#d9b04a; transition:width .4s steps(8); }
.tb-visit { font-size:11px; color:#cfe0d4; white-space:nowrap; flex-shrink:0; }
.tb-btn {
  font-family:inherit; font-size:12px;
  border:2px solid #0c0b09; padding:5px 9px;
  box-shadow:0 2px 0 #0c0b09; flex-shrink:0;
}
.tb-btn:active { transform:translateY(2px); box-shadow:none; }
.tb-home {
  width:31px;
  padding:3px 0 4px;
  background:#665744;
  color:#f0e8cf;
  font-size:20px;
  line-height:1;
}
.tb-res { background:#caa84a; color:#241c10; }
.tb-res b { background:#241c10; color:#e6dec6; padding:0 4px; margin-left:3px; font-weight:normal; }
.tb-snd { background:#3f6a55; color:#eaf0ea; }
.tb-snd.muted { background:#2a3a34; color:#7a8a82; text-decoration:line-through; }

/* ---- 入居者オーバーレイ ---- */
#overlay {
  position:absolute;
  inset:0;
  background:rgba(12,11,9,.97);
  z-index:30;
  display:none;
  overflow-y:auto;
  padding:12px;
}
#overlay.show { display:block; }
.rtitle {
  display:flex; justify-content:space-between; align-items:center;
  font-size:17px; letter-spacing:2px;
  padding-bottom:8px; margin-bottom:6px;
  border-bottom:2px solid #4a443b;
}
.rclose {
  background:#5a4a35; color:#f0e8cf;
  border:2px solid #0c0b09; box-shadow:0 2px 0 #0c0b09;
  font-family:inherit; font-size:12px; padding:4px 10px;
}
.rclose:active { transform:translateY(2px); box-shadow:none; }
.rnote { font-size:11px; color:#9c937d; line-height:1.7; margin-bottom:10px; }
.rcard {
  background:#2c2823;
  border:2px solid #0c0b09;
  padding:8px 9px;
  margin-bottom:8px;
}
.rcard.dim { opacity:.5; }
.rhead { display:flex; gap:9px; align-items:flex-start; }
.rhead canvas { image-rendering:pixelated; border:2px solid #0c0b09; flex-shrink:0; }
.rmeta { flex:1; min-width:0; }
.rname { font-size:14px; }
.rrole { font-size:10px; color:#9c937d; margin:1px 0 4px; }
.rfac { color:#caa84a; }
.rbar {
  height:7px; background:#171511; border:1px solid #0c0b09; position:relative;
}
.rbar i { position:absolute; left:0; top:0; bottom:0; transition:width .4s steps(8); }
.rbond { font-size:10px; margin-top:2px; }
.rnum { color:#9c937d; }
.rstatus {
  font-size:12px; line-height:1.6; color:#cfc6ab;
  margin-top:7px; padding-top:6px; border-top:1px dashed #4a443b;
}

/* ---- 称号コレクション ---- */
.achievement-panel { max-width:480px; margin:0 auto; }
.ach-sub { font-size:12px; color:#cbbfa3; line-height:1.65; margin:2px 2px 10px; }
.ach-sub b { color:#f0e8cf; }
.ach-progress {
  height:8px; background:#211e18; border:1px solid #4b4438;
  border-radius:4px; overflow:hidden; margin:0 2px 16px;
}
.ach-progress > span {
  display:block; height:100%;
  background:linear-gradient(90deg, #8d6d29, #caa84a);
  transition:width .4s ease;
}

.achievement-grid {
  display:grid;
  grid-template-columns:auto repeat(4, minmax(0, 1fr));
  gap:5px;
}
.ach-corner {
  font-size:9px; color:#8b8163; line-height:1.2; text-align:center;
  display:flex; align-items:center; justify-content:center;
}
.ach-corner i { font-style:normal; opacity:.55; margin:0 1px; }
.ach-col-head, .ach-row-head {
  font-size:11px; color:#cbbfa3; font-weight:bold;
  display:flex; align-items:center; justify-content:center;
}
.ach-row-head { writing-mode:vertical-rl; letter-spacing:3px; padding:0 2px; }
.ach-col-head { padding-bottom:2px; }

.ach-cell {
  min-height:74px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:5px 3px;
  background:#292620; border:2px solid #171511;
  box-shadow:inset 0 0 0 1px #3a352b;
  cursor:pointer; font-family:inherit; color:#f0e8cf; text-align:center;
  transition:transform .08s ease;
}
.ach-cell:hover { transform:translateY(-1px); }
.ach-cell.sel { outline:2px solid #f0e8cf; outline-offset:1px; z-index:1; }
.ach-cell.locked { color:#6f674f; background:#211e18; }
.ach-lock { font-size:22px; font-weight:bold; opacity:.55; }
.ach-name { font-size:11px; line-height:1.25; font-weight:bold; }

.ach-medal {
  width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f3d878, #caa84a 55%, #8d6d29);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.4);
  position:relative; flex:none;
}
.ach-medal::after {
  content:"★"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#6b521b;
}
.ach-medal.sm { width:20px; height:20px; display:inline-flex; vertical-align:middle; margin-right:7px; }
.ach-medal.sm::after { font-size:10px; }

.ach-cell.earned.good { border-color:#5f8d3a; box-shadow:inset 0 0 0 1px #7fae5a, 0 2px 0 #0c0b09; background:#2f3a26; }
.ach-cell.earned.mid  { border-color:#8d6d29; box-shadow:inset 0 0 0 1px #caa84a, 0 2px 0 #0c0b09; background:#3b3426; }
.ach-cell.earned.bad  { border-color:#7a4a44; box-shadow:inset 0 0 0 1px #b06b60, 0 2px 0 #0c0b09; background:#3a2a27; }
.ach-cell.earned.good .ach-medal { background:radial-gradient(circle at 35% 30%, #bfe68f, #7fae5a 55%, #4d7233); }
.ach-cell.earned.good .ach-medal::after { color:#34521f; }
.ach-cell.earned.bad .ach-medal { background:radial-gradient(circle at 35% 30%, #d9a59d, #b06b60 55%, #7a4a44); }
.ach-cell.earned.bad .ach-medal::after { color:#5e2c26; }

.ach-detail { margin-top:14px; min-height:78px; }
.ach-detail-empty {
  font-size:12px; color:#8b8163; text-align:center; padding:24px 8px;
  border:1px dashed #4b4438; border-radius:6px;
}
.ach-detail-card { padding:13px 15px; border-radius:6px; border:2px solid #4b4438; background:#211e18; }
.ach-detail-card.good { border-color:#5f8d3a; }
.ach-detail-card.mid  { border-color:#8d6d29; }
.ach-detail-card.bad  { border-color:#7a4a44; }
.ach-detail-card.locked { border-style:dashed; }
.ach-detail-card.good .ach-medal { background:radial-gradient(circle at 35% 30%, #bfe68f, #7fae5a 55%, #4d7233); }
.ach-detail-card.good .ach-medal::after { color:#34521f; }
.ach-detail-card.bad .ach-medal { background:radial-gradient(circle at 35% 30%, #d9a59d, #b06b60 55%, #7a4a44); }
.ach-detail-card.bad .ach-medal::after { color:#5e2c26; }
.ach-detail-title {
  font-size:16px; font-weight:bold; color:#f0e8cf;
  display:flex; align-items:center; margin-bottom:8px;
}
.ach-detail-title .ach-lock { font-size:18px; opacity:.5; margin-right:8px; }
.ach-detail-line { font-size:12.5px; line-height:1.75; color:#d8cdb2; }
.ach-detail-cond { font-size:10.5px; color:#8b8163; margin-top:10px; letter-spacing:1px; }

@media (max-width:390px) {
  #topbar { gap:4px; padding-left:5px; padding-right:5px; }
  .tb-btn { padding-left:6px; padding-right:6px; font-size:11px; }
  .tb-visit { font-size:9px; }
  .tb-home { width:28px; padding-left:0; padding-right:0; font-size:18px; }
  .achievement-grid { gap:3px; }
  .ach-cell { min-height:66px; gap:3px; padding:4px 1px; }
  .ach-name { font-size:10px; }
  .ach-medal { width:22px; height:22px; }
  .ach-col-head, .ach-row-head { font-size:10px; }
  .ach-row-head { letter-spacing:1px; }
}

/* 好感度バンド色 */
.b-best  { color:#7fae5a; } i.b-best  { background:#7fae5a; }
.b-good  { color:#9ac06a; } i.b-good  { background:#9ac06a; }
.b-mid   { color:#caa84a; } i.b-mid   { background:#caa84a; }
.b-bad   { color:#cd8950; } i.b-bad   { background:#cd8950; }
.b-worst { color:#c75b4a; } i.b-worst { background:#c75b4a; }

/* ---- 結果の住民好感度バッジ ---- */
.outcome .rel { margin-top:6px; font-size:12px; display:flex; flex-wrap:wrap; gap:3px 10px; }
.outcome .rel span.up   { color:#7fae5a; }
.outcome .rel span.down { color:#c75b4a; }

/* ---- エンディング後日談 ---- */
.epilogue { width:100%; max-width:360px; margin:10px auto 0; text-align:left; }
.epi-title { text-align:center; font-size:15px; letter-spacing:3px; color:#caa84a; margin-bottom:10px; }
.epi-card { background:#2c2823; border:2px solid #0c0b09; padding:7px 9px; margin-bottom:7px; }
.epi-head { display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.epi-port { display:inline-flex; }
.epi-port canvas { image-rendering:pixelated; border:1px solid #0c0b09; }
.epi-name { font-size:13px; flex:1; }
.epi-band { font-size:10px; border:1px solid currentColor; padding:0 5px; }
.epi-text { font-size:12px; line-height:1.7; color:#cfc6ab; }
.epi-happy { text-align:center; font-size:13px; margin:10px 0 6px; color:#e6dec6; }
.epi-happy b { color:#caa84a; font-size:16px; }
.epi-bitter { font-size:12px; line-height:1.9; color:#9c937d; text-align:center; padding:8px 4px 4px; border-top:1px dashed #4a443b; }

/* スクロールバー */
#main::-webkit-scrollbar, #overlay::-webkit-scrollbar { width:6px; }
#main::-webkit-scrollbar-thumb, #overlay::-webkit-scrollbar-thumb { background:#4a443b; }