/* 好好小镇 · 像素 UI 基础 */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --grass: #4CAF50;
  --grass-dark: #3E9142;
  --wood: #8B5E3C;
  --wood-dark: #6B4A2F;
  --wood-light: #B0805A;
  --paper: #FFF8E7;
  --paper-dark: #E8DCC4;
  --ink: #3B2F23;
  --gold: #F1C40F;
  --red: #C0392B;
  --green: #27AE60;
  --blue: #5DADE2;
  --pink: #F49AC1;
  --shadow: rgba(0, 0, 0, .25);
}

html { -webkit-text-size-adjust: 100%; }
/* 手机端兜底:任何元素都不许把页面撑出横向滚动(微信内置浏览器会因此缩小整页) */
html, body { max-width: 100vw; overflow-x: hidden; }

/* 应用壳布局:页面本身不滚动,#app 内部滚动。
   这样底部导航是普通元素而非 fixed,微信/iOS 的工具条抽动不会再让它跟着躲猫猫 */
body {
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  background:
    repeating-conic-gradient(var(--grass) 0% 25%, #51b455 0% 50%) 0 0 / 48px 48px,
    var(--grass);
  color: var(--ink);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  letter-spacing: .02em;
}

canvas.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; max-width: 100%; height: auto; }

/* ---- 布局壳 ---- */
.topbar {
  flex-shrink: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  background: var(--wood);
  border-bottom: 4px solid var(--wood-dark);
  box-shadow: 0 3px 0 var(--shadow);
}
.topbar .logo {
  font-weight: 900; color: var(--paper); font-size: 17px;
  text-shadow: 2px 2px 0 var(--wood-dark);
}
.topbar .spacer { flex: 1; }
.sync-badge {
  font-size: 12px; color: var(--paper); background: var(--wood-dark);
  padding: 3px 8px; border: 2px solid var(--wood-light); cursor: default;
}
.sync-badge.offline { background: var(--red); }

#app {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  width: 100%; max-width: 860px; margin: 0 auto;
  padding: 14px 12px 28px;
}

.tabbar {
  flex-shrink: 0; z-index: 30;
  display: flex;
  background: var(--wood);
  border-top: 4px solid var(--wood-dark);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; text-align: center; padding: 10px 0 8px;
  color: #D9C7AE; text-decoration: none; font-size: 13px; font-weight: 700;
  min-height: 48px;
}
.tabbar a .tab-icon { font-size: 19px; display: block; line-height: 1.2; }
.tabbar a.active { color: #FFF; background: var(--wood-dark); }

/* ---- 像素面板与按钮 ---- */
.panel {
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 0 4px 0 var(--shadow), inset 0 0 0 2px var(--paper-dark);
  padding: 14px;
  margin-bottom: 14px;
}
.panel-wood {
  background: var(--wood-light);
  border: 4px solid var(--wood-dark);
  box-shadow: 0 4px 0 var(--shadow);
  color: #FFF8E7;
  padding: 12px;
}
.panel h2 { font-size: 16px; margin-bottom: 10px; }
.panel h3 { font-size: 14px; margin: 10px 0 6px; }

.btn {
  display: inline-block;
  font: inherit; font-weight: 800; font-size: 15px;
  color: #FFF; background: var(--green);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  padding: 10px 18px;
  cursor: pointer; user-select: none;
  transition: transform .05s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { background: #9AA0A6; cursor: default; opacity: .8; }
.btn-big { font-size: 18px; padding: 14px 26px; width: 100%; }
.btn-red { background: var(--red); }
.btn-blue { background: var(--blue); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-ghost {
  background: transparent; color: var(--ink);
  box-shadow: 0 3px 0 var(--shadow);
}
.btn-small { font-size: 12px; padding: 5px 10px; border-width: 2px; box-shadow: 0 2px 0 var(--ink); }

input, textarea, select {
  font: inherit;
  /* 必须 ≥16px:iOS 会对更小字号的输入框聚焦时自动放大整页且不复原 */
  font-size: 16px;
  width: 100%;
  padding: 10px;
  border: 3px solid var(--ink);
  background: #FFF;
  color: var(--ink);
}
input:focus, textarea:focus { outline: 3px solid var(--gold); }
label { display: block; font-size: 13px; font-weight: 700; margin: 10px 0 4px; }

.form-error { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 6px; font-weight: 700; }
.muted { color: #7A6B58; font-size: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* flex 里的输入框允许收缩,否则其固有最小宽度会撑破手机布局 */
.row > input, .row > textarea { min-width: 0; flex: 1; }
.wrap { flex-wrap: wrap; }
.center { text-align: center; }

/* ---- toast / sheet ---- */
.toast {
  position: fixed; left: 50%; top: 64px; transform: translateX(-50%);
  z-index: 100;
  background: var(--ink); color: #FFF;
  border: 3px solid #FFF; box-shadow: 0 4px 0 var(--shadow);
  padding: 10px 16px; font-weight: 700; font-size: 14px;
  animation: toast-in .18s steps(3);
  max-width: 90vw;
}
.toast-error { background: var(--red); }
.toast-success { background: var(--green); }
@keyframes toast-in { from { transform: translate(-50%, -12px); opacity: 0; } }

.sheet-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(26, 43, 74, .55);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-panel {
  width: 100%; max-width: 560px; max-height: 82dvh; overflow-y: auto;
  background: var(--paper);
  border: 4px solid var(--ink); border-bottom: none;
  box-shadow: 0 -4px 0 var(--shadow);
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  animation: sheet-in .2s steps(4);
}
.sheet-overlay.closing .sheet-panel { animation: sheet-out .18s steps(3) forwards; }
@keyframes sheet-in { from { transform: translateY(40%); } }
@keyframes sheet-out { to { transform: translateY(100%); opacity: 0; } }

/* ---- 动画元件 ---- */
.stamp {
  position: absolute; right: 8%; top: 18%;
  transform: rotate(-14deg) scale(3);
  opacity: 0;
  border: 4px solid var(--red); color: var(--red);
  background: rgba(255, 248, 231, .85);
  padding: 8px 14px; text-align: center;
  font-weight: 900; z-index: 20;
  animation: stamp-in .28s steps(4) forwards;
  pointer-events: none;
}
.stamp-check { font-size: 26px; line-height: 1; }
.stamp-day { font-size: 14px; }
.stamp-gold { border-color: var(--gold); color: #A67C00; }
@keyframes stamp-in {
  to { transform: rotate(-14deg) scale(1); opacity: 1; }
}
.shake { animation: shake .4s steps(6); }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(2px, -2px); }
  50% { transform: translate(-2px, 2px); }
  75% { transform: translate(2px, 2px); }
}

.star-particle {
  position: fixed; z-index: 90;
  width: 6px; height: 6px;
  pointer-events: none;
  animation: star-fly .85s steps(8) forwards;
}
@keyframes star-fly {
  to { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

.heart-float {
  position: fixed; z-index: 90;
  color: var(--red); font-size: 18px; font-weight: 900;
  pointer-events: none;
  animation: heart-up .8s steps(6) forwards;
}
@keyframes heart-up {
  to { transform: translateY(-46px) scale(1.6); opacity: 0; }
}

.bounce { animation: bounce .5s steps(4); }
@keyframes bounce {
  30% { transform: translateY(-8px); }
  60% { transform: translateY(0); }
  80% { transform: translateY(-3px); }
}

/* 夜幕 */
body.night::after {
  content: '';
  position: fixed; inset: 0; z-index: 5;
  background: rgba(26, 43, 74, .34);
  pointer-events: none;
}
/* z-index 对 flex 子项直接生效,顶栏底栏保持在夜幕之上 */
body.night .topbar, body.night .tabbar { z-index: 30; }

@media (min-width: 640px) {
  .tabbar a { font-size: 14px; }
}