/* 自動化王国 — レトロRPG村スタイル
   本家DQ素材は一切不使用。窓枠・スプライトはすべてCSS自作（box-shadowドット絵）。
   フォント: DotGothic16（Google Fonts・SIL OFL） */

:root {
  --u: 5px;                 /* スプライトの1ドット */
  --grass1: #2e8b2e; --grass2: #278227;
  --path:   #c8a05a; --path2: #b8904a;
  --sky1:   #7ec8e8; --sky2: #a8dcf0;
  --win-bg: #000; --win-fg: #fff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #101418;
  font-family: 'DotGothic16', monospace;
  color: var(--win-fg);
  display: flex; justify-content: center;
  min-height: 100vh;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
}

#stage { width: min(960px, 100vw); padding: 8px; position: relative; }

/* ===== DQ風ウィンドウ（自作: 黒地+白二重枠+角丸なし） ===== */
.dqwin {
  background: var(--win-bg);
  border: 3px solid var(--win-fg);
  box-shadow: 0 0 0 3px var(--win-bg), inset 0 0 0 2px var(--win-bg), inset 0 0 0 4px var(--win-fg);
  padding: 6px;
  margin-bottom: 8px;
}
.dq-inner { padding: 8px 10px; font-size: 15px; line-height: 1.7; letter-spacing: 1px; }
.hidden { display: none !important; }

#win-title { position: absolute; top: 16px; left: 16px; z-index: 30; opacity: .95; }
#win-title .dq-inner { padding: 4px 12px; font-size: 14px; }
#win-meta  { position: absolute; top: 16px; right: 16px; z-index: 30; opacity: .95; }
#win-meta .dq-inner { padding: 4px 12px; font-size: 13px; }
#win-stalled { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); z-index: 40; }
#win-stalled .dq-inner { color: #ff8080; }

/* ===== 村 ===== */
#village {
  position: relative;
  width: 100%; aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 3px solid var(--win-fg);
  box-shadow: 0 0 0 3px var(--win-bg);
  background: var(--grass1);
}
#sky {
  position: absolute; inset: 0 0 auto 0; height: 14%;
  background: repeating-linear-gradient(180deg, var(--sky1) 0 8px, var(--sky2) 8px 16px);
}
#field {
  position: absolute; inset: 14% 0 0 0;
  background:
    conic-gradient(var(--grass2) 90deg, transparent 0 180deg, var(--grass2) 0 270deg, transparent 0) 0 0/24px 24px,
    var(--grass1);
}
#path-h { position: absolute; left: 0; right: 0; top: 58%; height: 9%;
  background: repeating-linear-gradient(90deg, var(--path) 0 20px, var(--path2) 20px 40px); }
#path-v { position: absolute; top: 14%; bottom: 0; left: 46%; width: 7%;
  background: repeating-linear-gradient(180deg, var(--path) 0 20px, var(--path2) 20px 40px); }

/* ===== 建物（stepped roof = ピクセル屋根） ===== */
.bld { position: absolute; width: 108px; height: 96px; z-index: 5; }
.bld .wall {
  position: absolute; bottom: 14px; left: 8px; right: 8px; height: 44px;
  background: #e8d8b0;
  box-shadow: inset -6px -6px 0 #c9b98e, inset 0 0 0 2px #6b5a3a;
}
.bld .w-wood  { background: #c89058; box-shadow: inset -6px -6px 0 #a87038, inset 0 0 0 2px #5a3a1a; }
.bld .w-stone { background: #b8b8c0; box-shadow: inset -6px -6px 0 #9898a0, inset 0 0 0 2px #4a4a55; }
.bld .roof { position: absolute; top: 6px; left: 0; right: 0; height: 36px; }
.bld .roof::before, .bld .roof::after, .bld .roof {
  --rc: #b03030;
}
.bld .roof {
  background:
    linear-gradient(var(--rc) 0 0) 50% 0 / 36% 12px,
    linear-gradient(var(--rc) 0 0) 50% 12px / 68% 12px,
    linear-gradient(var(--rc) 0 0) 50% 24px / 100% 12px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35));
}
.bld .r-red   { --rc: #b03030; }
.bld .r-blue  { --rc: #3050a8; }
.bld .r-straw { --rc: #c9a94e; }
.bld .r-gray  { --rc: #707880; }
.bld .door {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 26px; background: #5a3a1a;
  box-shadow: inset 0 0 0 2px #3a2410;
}
.bld .cross { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  color: #ffd860; font-size: 18px; text-shadow: 1px 1px 0 #6b5a00; }
.bld .bsign {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; color: #fff;
  background: rgba(0,0,0,.55); padding: 0 6px; letter-spacing: 1px;
}
.bld-tall { height: 128px; }
.bld-tall .wall { height: 76px; }

/* 建物配置（村マップ・承認プレビュー準拠） */
#bld-press  { left: 6%;  top: 24%; }
#bld-farm   { left: 24%; top: 20%; }
#bld-tavern { left: 6%;  top: 62%; }
#bld-post   { left: 62%; top: 20%; }
#bld-church { left: 78%; top: 58%; }
#bld-cart   { left: 62%; top: 66%; }
#bld-tower  { left: 82%; top: 12%; }

/* ===== キャラクター（box-shadowドット絵・currentColorレイヤ方式） ===== */
.char { position: absolute; width: calc(var(--u) * 10); height: calc(var(--u) * 12);
  z-index: 10; cursor: pointer;
  transition: left var(--wd, 2s) linear, top var(--wd, 2s) linear; }
.flip { width: 100%; height: 100%; }
.face-left .flip { transform: scaleX(-1); }
.spr { position: relative; width: 100%; height: 100%;
  animation: bob 1.6s steps(1) infinite; }
.spr > i { position: absolute; top: 0; left: 0; width: var(--u); height: var(--u); }
.walking .spr { animation: bob .3s steps(1) infinite; }

/* ドットマップ（x,y をvar(--u)倍でbox-shadowに展開） */
.px-hat { color: var(--hat); box-shadow:
  calc(var(--u)*3) 0, calc(var(--u)*4) 0, calc(var(--u)*5) 0, calc(var(--u)*6) 0,
  calc(var(--u)*2) var(--u), calc(var(--u)*3) var(--u), calc(var(--u)*4) var(--u),
  calc(var(--u)*5) var(--u), calc(var(--u)*6) var(--u), calc(var(--u)*7) var(--u),
  calc(var(--u)*1) calc(var(--u)*2), calc(var(--u)*2) calc(var(--u)*2), calc(var(--u)*3) calc(var(--u)*2),
  calc(var(--u)*4) calc(var(--u)*2), calc(var(--u)*5) calc(var(--u)*2), calc(var(--u)*6) calc(var(--u)*2),
  calc(var(--u)*7) calc(var(--u)*2), calc(var(--u)*8) calc(var(--u)*2); }
.px-skin { color: var(--skin); box-shadow:
  calc(var(--u)*2) calc(var(--u)*3), calc(var(--u)*3) calc(var(--u)*3), calc(var(--u)*4) calc(var(--u)*3),
  calc(var(--u)*5) calc(var(--u)*3), calc(var(--u)*6) calc(var(--u)*3), calc(var(--u)*7) calc(var(--u)*3),
  calc(var(--u)*2) calc(var(--u)*4), calc(var(--u)*3) calc(var(--u)*4), calc(var(--u)*4) calc(var(--u)*4),
  calc(var(--u)*5) calc(var(--u)*4), calc(var(--u)*6) calc(var(--u)*4), calc(var(--u)*7) calc(var(--u)*4); }
.px-eye { color: #202020; box-shadow:
  calc(var(--u)*3) calc(var(--u)*4), calc(var(--u)*6) calc(var(--u)*4); }
.px-cloak { color: var(--cloak); box-shadow:
  calc(var(--u)*2) calc(var(--u)*5), calc(var(--u)*3) calc(var(--u)*5), calc(var(--u)*4) calc(var(--u)*5),
  calc(var(--u)*5) calc(var(--u)*5), calc(var(--u)*6) calc(var(--u)*5), calc(var(--u)*7) calc(var(--u)*5),
  var(--u) calc(var(--u)*6), calc(var(--u)*2) calc(var(--u)*6), calc(var(--u)*3) calc(var(--u)*6),
  calc(var(--u)*4) calc(var(--u)*6), calc(var(--u)*5) calc(var(--u)*6), calc(var(--u)*6) calc(var(--u)*6),
  calc(var(--u)*7) calc(var(--u)*6), calc(var(--u)*8) calc(var(--u)*6),
  var(--u) calc(var(--u)*7), calc(var(--u)*2) calc(var(--u)*7), calc(var(--u)*3) calc(var(--u)*7),
  calc(var(--u)*4) calc(var(--u)*7), calc(var(--u)*5) calc(var(--u)*7), calc(var(--u)*6) calc(var(--u)*7),
  calc(var(--u)*7) calc(var(--u)*7), calc(var(--u)*8) calc(var(--u)*7),
  calc(var(--u)*2) calc(var(--u)*8), calc(var(--u)*3) calc(var(--u)*8), calc(var(--u)*4) calc(var(--u)*8),
  calc(var(--u)*5) calc(var(--u)*8), calc(var(--u)*6) calc(var(--u)*8), calc(var(--u)*7) calc(var(--u)*8); }
.px-boot { color: var(--boot); box-shadow:
  calc(var(--u)*3) calc(var(--u)*9), calc(var(--u)*4) calc(var(--u)*9),
  calc(var(--u)*5) calc(var(--u)*9), calc(var(--u)*6) calc(var(--u)*9),
  calc(var(--u)*2) calc(var(--u)*10), calc(var(--u)*3) calc(var(--u)*10),
  calc(var(--u)*6) calc(var(--u)*10), calc(var(--u)*7) calc(var(--u)*10); }

/* 職業パレット */
.p-writer  { --hat:#3050a8; --skin:#f0c8a0; --cloak:#4060c0; --boot:#303030; }
.p-farmer  { --hat:#c9a94e; --skin:#e8b888; --cloak:#3a8a3a; --boot:#5a3a1a; }
.p-bard    { --hat:#8040a8; --skin:#f0c8a0; --cloak:#a060c8; --boot:#303030; }
.p-courier { --hat:#c03030; --skin:#f0c8a0; --cloak:#d05040; --boot:#303030; }
.p-priest  { --hat:#e8e8f0; --skin:#f0c8a0; --cloak:#f8f8ff; --boot:#8888a0; }
.p-porter  { --hat:#7a5230; --skin:#e8b888; --cloak:#9a7040; --boot:#3a2a10; }
.p-sage    { --hat:#203078; --skin:#e8d8c8; --cloak:#283890; --boot:#202020; }

/* キャラ名ラベル */
.cname {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 10px; letter-spacing: 0;
  color: #fff; text-shadow: 1px 1px 0 #000;
}

/* ===== 状態演出 ===== */
@keyframes bob      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -0.4)); } }
@keyframes bob-fast { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -0.8)); } }
@keyframes blink    { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes sparkle  { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.35); } }

.st-working .spr { animation: bob-fast .45s steps(1) infinite; }
.st-idle    .spr { animation: bob 1.8s steps(1) infinite; }
.st-success .spr { animation: bob 1.2s steps(1) infinite; }
.st-error   .spr { animation: none; transform: rotate(90deg) translateY(calc(var(--u) * 2)); filter: saturate(.7); }
.st-stale   .spr { animation: none; filter: grayscale(.9) brightness(.75); }

.badge { position: absolute; top: calc(var(--u) * -3.2); left: 50%; transform: translateX(-50%);
  font-size: 16px; line-height: 1; z-index: 12; }
.st-success .badge::before { content: "✨"; animation: sparkle 1.2s infinite; display: inline-block; }
.st-error   .badge::before { content: "❗"; color: #ff4040; animation: blink .5s steps(1) infinite; display: inline-block; font-weight: bold; }
.st-stale   .badge::before { content: "💤"; opacity: .85; display: inline-block; }

/* 吹き出し（working / error 時に自動表示。独り言 .chatter は一時表示） */
.bubble {
  position: absolute; bottom: calc(100% + var(--u) * 3.5); left: 50%; transform: translateX(-50%);
  background: #fff; color: #000; border: 2px solid #000;
  font-size: 11px; line-height: 1.4; padding: 3px 6px; white-space: nowrap;
  display: none; z-index: 20;
}
.bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px;
  border: 4px solid transparent; border-top-color: #000; }
.st-working .bubble, .st-error .bubble, .bubble.chatter { display: block; }

/* やりとげたジャンプ */
@keyframes jump {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(calc(var(--u) * -3)); }
  40% { transform: translateY(0); }
  60% { transform: translateY(calc(var(--u) * -2)); }
  80% { transform: translateY(0); }
}
.celebrate .flip { animation: jump 1.3s steps(4) 2; }

/* ===== 環境: 雲・煙・昼夜 ===== */
.cloud {
  position: absolute; left: -20%; width: 64px; height: 16px;
  background: #fff; opacity: .85;
  box-shadow: 12px -8px 0 #fff, 28px -6px 0 #fff, 40px -10px 0 #ffffffcc, 20px 2px 0 #ffffffee;
  animation: drift linear infinite;
  z-index: 2;
}
@keyframes drift { from { left: -20%; } to { left: 115%; } }

.smoke { position: absolute; top: -6px; left: 62%; z-index: 6; }
.smoke span {
  position: absolute; width: 8px; height: 8px; background: #e8e8e8; opacity: 0;
  animation: puff 2.4s linear infinite;
}
.smoke span:nth-child(2) { animation-delay: .8s; }
.smoke span:nth-child(3) { animation-delay: 1.6s; }
@keyframes puff {
  0%   { opacity: 0;  transform: translate(0, 0) scale(1); }
  15%  { opacity: .9; }
  100% { opacity: 0;  transform: translate(6px, -34px) scale(1.8); }
}

/* 昼夜サイクル（実時刻・#village に t-* クラス） */
#village::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 25;
  transition: background 2s;
}
.t-day::after   { background: transparent; }
.t-dusk::after  { background: rgba(200, 90, 30, .18); }
.t-dawn::after  { background: rgba(120, 140, 220, .15); }
.t-night::after { background: rgba(10, 15, 60, .42); }
.t-night #sky { filter: brightness(.35) saturate(.6); }
.t-dusk  #sky { filter: brightness(.75) sepia(.4); }
/* 夜は窓（ドア）に灯り */
.t-night .bld .door { background: #ffd860; box-shadow: inset 0 0 0 2px #a87820, 0 0 10px 2px rgba(255, 216, 96, .5); }

/* ===== つうこくのしょ ===== */
#win-log .dq-inner { min-height: 120px; }
.log-title { color: #ffd860; margin-bottom: 4px; animation: blink 1.6s steps(1) infinite; }
#log-list { list-style: none; font-size: 14px; }
#log-list li { padding: 1px 0; }
#log-list li::before { content: "＊「"; color: #a0c8ff; }
#log-list li::after  { content: "」"; color: #a0c8ff; }
#log-list li.ev-error { color: #ff8080; }
#log-list li.ev-success { color: #a8ffa8; }
#log-list li .ev-time { color: #888; font-size: 11px; margin-left: 6px; }

/* ===== 詳細モーダル ===== */
#modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100;
  display: flex; align-items: center; justify-content: center; }
#win-detail { width: min(560px, 92vw); margin: 0; }
#d-name { color: #ffd860; margin-bottom: 6px; }
#d-lines div { font-size: 14px; }
#d-recovery { margin-top: 10px; }
.d-label { color: #a0c8ff; font-size: 13px; }
#d-cmd { display: block; background: #101820; border: 1px solid #445; color: #b8e0b8;
  font-size: 12px; padding: 6px 8px; margin-top: 4px; user-select: all;
  font-family: Consolas, monospace; white-space: pre-wrap; word-break: break-all; }
.d-close { margin-top: 10px; text-align: right; cursor: pointer; animation: blink 1.6s steps(1) infinite; }

/* ===== スマホ ===== */
@media (max-width: 640px) {
  #win-title, #win-meta { position: static; margin-bottom: 6px; }
  #village { aspect-ratio: 4 / 5; }
  .bld { transform: scale(.8); transform-origin: top left; }
  :root { --u: 4px; }
  #bld-tower { left: 74%; }
  #bld-church { left: 70%; }
}