/* =========================================================
 * 汉堡宇宙 · 移动端优先样式
 * ========================================================= */
:root {
  color-scheme: light;         /* 防止手机浏览器自动强制深色 */
  --bg1: #FFF9EE;
  --bg2: #FFEEDA;
  --card: #FFFDF6;
  --ink: #5B3A17;
  --ink-soft: #9C7A4B;
  --gold: #FF9F1C;
  --gold2: #FFC93C;
  --red: #FF5D5D;
  --green: #58B84E;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  color: var(--ink);
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
#app {
  max-width: 460px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: max(6px, env(safe-area-inset-top)) 10px max(6px, env(safe-area-inset-bottom));
}

/* ---------- 顶栏 ---------- */
#hud {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
}
#hudMain { flex: 1; text-align: center; min-width: 0; }
#money {
  font-size: clamp(26px, 7.5vw, 36px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: inline-block;
}
#money .cur { font-size: 0.62em; margin-right: 4px; }
#money.pop { animation: pop .16s ease-out; }
@keyframes pop { 50% { transform: scale(1.12); } }
#subStats {
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.iconBtn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: none;
  background: var(--card);
  font-size: 19px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(90, 60, 20, 0.08);
  position: relative;
  flex: 0 0 auto;
}
.iconBtn:active { transform: scale(0.92); }
#achBadge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 1px 4px rgba(255, 93, 93, 0.4);
}

/* ---------- 点击区 ---------- */
#stage {
  flex: 1;
  position: relative;
  min-height: 220px;
  cursor: pointer;
}
#burgerCanvas { position: absolute; inset: 0; }
#floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
#stage.boom { animation: boom .45s ease-out; }
@keyframes boom { 0% { filter: brightness(1.55); } 100% { filter: brightness(1); } }
.flt {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: 16px;
  color: #7A4A12;
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
  animation: fltUp .95s ease-out forwards;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.flt.crit { color: #FF8A00; font-size: 21px; }
.flt.auto {
  font-size: 15px;
  font-weight: 800;
  background: linear-gradient(180deg, #FFD75E, #FF8A00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: fltUp 1.5s ease-out forwards;
}

/* 震屏 */
#stage.shake { animation: shake .3s ease-out; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(5px, -2px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(3px, -1px); }
}

/* 金钱计数器上的 ✨ */
.moneySpark {
  position: fixed;
  z-index: 70;
  font-size: 16px;
  pointer-events: none;
  animation: moneySpark .7s ease-out forwards;
}
@keyframes moneySpark {
  0% { transform: translateY(0) scale(0.5); opacity: 1; }
  100% { transform: translateY(-16px) scale(1.5); opacity: 0; }
}

/* 全屏金光(转生/里程碑) */
#flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 240, 200, 0.95), rgba(255, 215, 90, 0.55));
  z-index: 65;
  pointer-events: none;
  opacity: 0;
}
#flash.on { animation: flashOut .8s ease-out forwards; }
@keyframes flashOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* 呼吸光晕: 全屏微微起伏的金色能量场 */
#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(255, 160, 40, 0.12) 100%);
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

/* 里程碑/进化 大字横幅 */
#banner {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  font-size: clamp(20px, 6vw, 30px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 #B96A00, 0 4px 14px rgba(0, 0, 0, 0.4);
  z-index: 10;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
}
#banner.show { animation: bannerPop 1.8s ease-out forwards; }
@keyframes bannerPop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.4); }
  12% { opacity: 1; transform: translateX(-50%) scale(1.15); }
  20% { transform: translateX(-50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.06) translateY(-20px); }
}

/* 连击徽章 */
#comboPill {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 93, 93, 0.92);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 18px;
  box-shadow: 0 3px 10px rgba(255, 93, 93, 0.4);
  z-index: 7;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
#comboPill.pop2 { animation: pop2 .14s ease-out; }
@keyframes pop2 { 50% { transform: translateX(-50%) scale(1.18); } }

/* 购买成功时金钱闪光 */
#money.buyFlash { animation: buyFlash .3s ease-out; }
@keyframes buyFlash {
  0% { text-shadow: 0 0 10px rgba(255, 159, 28, 0.95), 0 0 22px rgba(255, 200, 60, 0.6); }
  100% { text-shadow: none; }
}
@keyframes fltUp {
  0% { opacity: 1; }
  100% { transform: translate(-50%, -170%); opacity: 0; }
}

/* ---------- 进化条 ---------- */
#tierBar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 12px;
  color: var(--ink-soft);
}
#tierInfo { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
#tierName { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
#tierTrack {
  flex: 1;
  height: 8px;
  background: #F1D9AE;
  border-radius: 4px;
  overflow: hidden;
}
#tierFill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  border-radius: 4px;
  transition: width .3s;
}

/* ---------- 商店 ---------- */
#shopHead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 4px 2px;
}
#shopHint { font-weight: 400; color: var(--ink-soft); font-size: 11px; }
#shopWrap { position: relative; }
#shop {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px 8px;
  scrollbar-width: none;
  cursor: grab;
}
#shop::-webkit-scrollbar { display: none; }
#shop.dragging { cursor: grabbing; }
/* 左右翻页箭头(鼠标/触控板用户;触屏设备靠原生滑动,隐藏) */
.shopArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 253, 246, 0.95);
  color: var(--ink);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(90, 60, 20, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px 0;
  transition: opacity .2s;
}
.shopArrow.left { left: 2px; }
.shopArrow.right { right: 2px; }
.shopArrow.off { opacity: 0; pointer-events: none; }
.shopArrow:active { transform: translateY(-50%) scale(0.9); }
@media (hover: none) { .shopArrow { display: none; } }
.shopCard {
  flex: 0 0 116px;
  background: var(--card);
  border-radius: 16px;
  padding: 9px;
  box-shadow: 0 3px 8px rgba(90, 60, 20, 0.08);
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shopCard:active { transform: scale(0.95); }
.shopCard .scIcon { font-size: 23px; line-height: 1.1; }
.scName { font-weight: 700; font-size: 13px; }
.scDesc { font-size: 10.5px; color: var(--ink-soft); line-height: 1.3; }
.scCost { font-size: 12.5px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.scLv { font-size: 10px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.shopCard.can { border-color: var(--gold); animation: cardPulse 1.4s infinite; }
.shopCard.max .scLv { color: var(--green); font-weight: 700; }
.shopCard.max .scCost { color: var(--green); }
@keyframes cardPulse {
  0%, 100% { box-shadow: 0 3px 8px rgba(90, 60, 20, 0.08); }
  50% { box-shadow: 0 0 0 3px rgba(255, 159, 28, 0.3); }
}

/* ---------- 转生按钮 ---------- */
#prestigeBtn {
  margin: 2px 0 6px;
  border: none;
  border-radius: 16px;
  padding: 14px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  font-family: inherit;
  background: linear-gradient(90deg, #FF8A5C, var(--red));
  box-shadow: 0 4px 12px rgba(255, 93, 93, 0.35);
  cursor: pointer;
  line-height: 1.3;
}
#prestigeBtn:active { transform: scale(0.98); }
#prestigeBtn:disabled {
  background: #E8CBA8;
  color: #A98F6B;
  box-shadow: none;
}

/* ---------- 弹窗 ---------- */
.mask {
  position: fixed;
  inset: 0;
  background: rgba(40, 24, 8, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.mask[hidden] { display: none; }
.modal {
  width: min(92vw, 340px);
  background: var(--card);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  max-height: 80vh;
  overflow-y: auto;
}
.modalTitle { font-size: 17px; font-weight: 800; text-align: center; margin-bottom: 12px; }
.modalBody { display: flex; flex-direction: column; gap: 8px; }
.modalClose {
  width: 100%;
  margin-top: 12px;
  border: none;
  border-radius: 14px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  background: #F3E3C4;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
.modalClose:active { transform: scale(0.97); }
.modalClose.gold {
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  color: #fff;
  font-weight: 800;
}
.modalBtns { display: flex; gap: 8px; }
.modalBtns .half { flex: 1; margin-top: 12px; }
#prestigeInfo { font-size: 13px; line-height: 1.8; text-align: center; }

/* ---------- 成就 ---------- */
#achGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ach {
  background: #FFF3DC;
  border-radius: 12px;
  padding: 9px 6px;
  text-align: center;
  font-size: 11px;
}
.ach.locked { opacity: 0.45; filter: grayscale(1); }
.ach .aIcon { font-size: 21px; }
.ach .aName { font-weight: 700; margin: 3px 0 1px; }
.ach .aDesc { color: var(--ink-soft); font-size: 10px; }
#achCount { font-size: 12px; color: var(--ink-soft); }

/* ---------- 设置 ---------- */
.setRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 4px 0;
}
input[type="checkbox"] {
  width: 46px;
  height: 28px;
  accent-color: var(--gold);
}
.setBtn {
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  background: #FFF3DC;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
.setBtn:active { transform: scale(0.97); }
.setBtn.danger { background: #FFE3DE; color: #D64545; }
#exportArea {
  width: 100%;
  font-size: 11px;
  border: 1px solid #E5CDA3;
  border-radius: 8px;
  padding: 6px;
  background: #FFFDF6;
  font-family: monospace;
  resize: vertical;
}

/* ---------- Toast ---------- */
#toasts {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  pointer-events: none;
  width: 92vw;
  max-width: 420px;
}
.toast {
  background: rgba(60, 38, 12, 0.92);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  animation: toastIn .3s ease-out;
  text-align: center;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } }

/* ---------- 桌面适配 ---------- */
@media (min-width: 480px) {
  #app { box-shadow: 0 0 40px rgba(120, 80, 20, 0.12); }
  body { background: #FFF3DF; }
}