/* ============================================================
 * base.css — 基础样式：reset、按钮、输入框、启动界面
 * v14
 * ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #1A0F08;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Courier New", monospace;
  color: #3A2818;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.hidden { display: none !important; }

#app {
  width: 100%; max-width: 430px;
  height: 100vh; height: 100dvh;
  max-height: 932px;
  margin: 0 auto; position: relative;
  background: #F5E6D3;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 0 4px #2D1B12, 0 0 40px rgba(0,0,0,.6);
}

/* ---------- 按钮 ---------- */
.pixel-btn {
  border: none; background: #FFE7C9; color: #7A4A28;
  font-family: inherit; font-weight: 700; font-size: 12px;
  padding: 9px 8px; border-radius: 0; cursor: pointer;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 3px; flex-direction: column; line-height: 1.15;
  box-shadow: inset -3px -3px 0 0 rgba(122,74,40,.18), inset 3px 3px 0 0 rgba(255,255,255,.55), 0 3px 0 0 #C9A07A;
  transition: transform .06s, box-shadow .06s;
}
.pixel-btn:active {
  transform: translateY(3px);
  box-shadow: inset -3px -3px 0 0 rgba(122,74,40,.18), inset 3px 3px 0 0 rgba(255,255,255,.55), 0 0 0 0 #C9A07A;
}
.pixel-btn.primary { background: #FFA95C; color: #fff; box-shadow: inset -3px -3px 0 0 rgba(180,90,30,.35), inset 3px 3px 0 0 rgba(255,255,255,.35), 0 3px 0 0 #B5642F; }
.pixel-btn.accent  { background: #E8703A; color: #fff; box-shadow: inset -3px -3px 0 0 rgba(150,50,10,.4), inset 3px 3px 0 0 rgba(255,255,255,.3), 0 3px 0 0 #A34A22; }
.pixel-btn.ghost   { background: #EFE0CE; color: #8A6A50; box-shadow: inset -3px -3px 0 0 rgba(140,110,80,.15), inset 3px 3px 0 0 rgba(255,255,255,.6), 0 3px 0 0 #C9A07A; }
.pixel-btn.big     { font-size: 14px; padding: 14px; flex-direction: row; }
.pixel-btn.tiny    { font-size: 11px; padding: 6px 10px; flex-direction: row; gap: 4px; }
.pixel-btn:disabled { opacity: .4; transform: none; cursor: not-allowed; }
.pixel-btn .btn-txt { font-size: 11px; }

/* ---------- 输入框 ---------- */
.pixel-input {
  width: 100%; padding: 13px 14px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: #3A2818; background: #FFFCF6;
  border: none; outline: none; text-align: center;
  box-shadow: inset -3px -3px 0 0 #D8C4A8, inset 3px 3px 0 0 #FFF, 0 0 0 3px #C9A07A;
  letter-spacing: 1px;
}
.pixel-input::placeholder { color: #C4A88A; font-weight: 400; letter-spacing: 0; }

/* ---------- 启动界面 ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }

#screen-start {
  background: repeating-linear-gradient(0deg, #2D1B12 0 8px, #241409 8px 16px), #2D1B12;
  align-items: center; justify-content: center; padding: 24px;
}
.start-card {
  width: 100%; max-width: 320px; background: #F5E6D3;
  padding: 26px 22px 22px;
  box-shadow: inset -4px -4px 0 0 #D8C0A0, inset 4px 4px 0 0 #FFF6E8, 0 0 0 4px #8B5E3C, 0 8px 0 0 #5A3A24;
  display: flex; flex-direction: column; align-items: center;
}
.logo-canvas {
  width: 80px; height: 80px;
  image-rendering: pixelated;
  margin-bottom: 10px;
  animation: logoBob 2.4s ease-in-out infinite;
}
@keyframes logoBob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
.pixel-title { font-size: 22px; color: #5A3A24; letter-spacing: 2px; margin-bottom: 4px; text-shadow: 2px 2px 0 #D8C0A0; }
.pixel-sub { font-size: 12px; color: #A88A6A; margin-bottom: 20px; letter-spacing: 1px; }
#input-shopname { margin-bottom: 14px; }
.pixel-btn.big { width: 100%; margin-top: 8px; }
.save-info { font-size: 11px; color: #8A6A50; text-align: center; margin-top: 12px; line-height: 1.7; min-height: 0; }
.save-info b { color: #C06030; }
.audio-toggle-start { margin-top: 14px; }

/* ---------- 游戏主体壳 ---------- */
#screen-game { background: #F5E6D3; overflow: hidden; }