/* 約瑟管糧倉——教室投影優先:大字、高對比、觸控大目標。零相依、可離線。 */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  background: linear-gradient(#e8c07a, #c9a06a);
  color: #3a2a14;
  display: flex; align-items: center; justify-content: center;
}
.app { width: min(96vw, 880px); padding: 12px; }
.card {
  background: rgba(255, 251, 238, 0.97);
  border: 3px solid #c8a35a; border-radius: 18px;
  padding: 20px 26px; text-align: center;
  box-shadow: 0 8px 30px rgba(90, 50, 10, 0.25);
}
h1 { margin: 4px 0 2px; font-size: clamp(24px, 5vw, 40px); color: #8a5a1e; }
.sub { color: #8a6a33; margin: 0 0 10px; font-size: clamp(14px, 2.4vw, 19px); }
.verse { color: #7a5222; font-size: clamp(14px, 2.4vw, 18px); margin: 10px auto; max-width: 62ch; }
.body { font-size: clamp(15px, 2.6vw, 20px); margin: 8px auto; max-width: 58ch; line-height: 1.65; }
button.big {
  font-size: clamp(17px, 3vw, 24px); font-weight: 700;
  padding: 12px 34px; margin: 10px 6px 2px;
  border: 0; border-radius: 14px; cursor: pointer;
  background: #f0b23e; color: #5a3a10;
  box-shadow: 0 3px 0 #b9812a;
}
button.big:active { transform: translateY(2px); box-shadow: none; }
/* 年度儀表 */
.hud { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0 14px; }
.stat {
  background: #fdf3d7; border: 2px solid #d8c9a3; border-radius: 12px;
  padding: 6px 16px; font-size: clamp(14px, 2.4vw, 18px); font-weight: 700;
}
.stat b { display: block; font-size: clamp(19px, 3.4vw, 28px); color: #8a5a1e; }
.yearbar { font-size: clamp(15px, 2.6vw, 20px); letter-spacing: 2px; margin: 4px 0; }
.yearbar .now { font-size: 1.4em; }
/* 糧倉視覺 */
.granary {
  height: 34px; border: 3px solid #8a6a33; border-radius: 10px;
  background: #fffdf6; overflow: hidden; margin: 6px auto 2px; max-width: 520px;
  position: relative;
}
.granary > div { height: 100%; background: linear-gradient(#e8c95a, #c9a63a); transition: width 0.5s; }
.granary::after {
  content: attr(data-label); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #5a3a10;
}
/* 決策滑桿 */
.decide { margin: 14px auto 6px; max-width: 560px; }
.decide label { display: block; font-size: clamp(16px, 2.8vw, 21px); font-weight: 700; margin-bottom: 6px; }
input[type="range"] { width: 100%; height: 34px; accent-color: #b9812a; touch-action: pan-x; }
.decide .pick { font-size: clamp(20px, 4vw, 30px); font-weight: 900; color: #8a5a1e; }
.hintline { color: #8a6a33; font-size: clamp(13px, 2.2vw, 16px); margin-top: 4px; }
/* 百姓飽足表情列 */
.people { font-size: clamp(24px, 5vw, 38px); letter-spacing: 6px; margin: 8px 0 0; }
.mercy { border-color: #9c5a8a; background: #faf2fb; }
.stars { font-size: clamp(30px, 7vw, 52px); letter-spacing: 8px; }