:root {
  --tile: 56px;
  --gap: 2px;
  --fog: #6b7280;
  --open: #cfe8b8;
  --bg: #1f2937;
}

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

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  touch-action: none;              /* 手势全部自己处理，禁掉浏览器默认滚动缩放 */
  user-select: none;
}

#viewport { position: absolute; inset: 0; overflow: hidden; }

#board {
  position: absolute;
  display: grid;
  gap: var(--gap);
  transform-origin: 0 0;
  will-change: transform;
}

.tile {
  width: var(--tile); height: var(--tile);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--tile) * 0.6);
  line-height: 1;
  background: var(--open);
  transition: background-color .18s ease;
}

.tile.fog {
  background: var(--fog);
  box-shadow: inset 0 0 12px rgba(0,0,0,.35);
}

.tile .art {
  pointer-events: none;
  transition: transform .18s ease;
}

.tile.dragging .art { transform: scale(1.25); }

.tile.shake { animation: shake .2s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  75%     { transform: translateX(4px); }
}

.tile.pop .art { animation: pop .28s ease; }
@keyframes pop {
  0%   { transform: scale(.4); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

#hud {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 14px;
}

#btn-zoom {
  padding: 6px 14px; border: 0; border-radius: 6px;
  background: #4b5563; color: #fff; font-size: 14px;
}

#toast {
  position: absolute; left: 50%; top: 12%;
  transform: translateX(-50%);
  max-width: min(90vw, 320px);
  padding: 8px 16px; border-radius: 6px;
  background: rgba(0,0,0,.8); color: #fff; font-size: 14px;
  white-space: pre-wrap; word-break: break-word; text-align: center;
  pointer-events: none;
}

#ghost {
  position: absolute; left: 0; top: 0;
  pointer-events: none; z-index: 10;
  font-size: calc(var(--tile) * 0.75);
  line-height: 1;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45));
  transition: none;
}
#ghost.returning { transition: transform .2s ease; }
.tile.source-hidden .art { opacity: 0; }

/* ── 第二版档一：枯萎地与阳光 ── */

.tile { position: relative; }

.tile.withered {
  background: #6b5b4a;
  box-shadow: inset 0 0 10px rgba(0,0,0,.4);
}
/* 右下角显示还需多少阳光。hp 由 render.js 写进 data-hp */
.tile.withered::after {
  content: attr(data-hp);
  position: absolute;
  right: 3px; bottom: 1px;
  font-size: 11px; line-height: 1;
  color: rgba(255,255,255,.75);
}

.tile.healed { animation: healed .45s ease; }
@keyframes healed {
  0%   { background: #6b5b4a; }
  50%  { background: #ffe9a3; }
  100% { background: var(--open); }
}

/* 飞行中的阳光。挂在 body 上，不在渲染树里，所以必须自己负责移除 */
.sun {
  position: absolute; left: 0; top: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6c2, #ffc93c);
  box-shadow: 0 0 8px rgba(255,201,60,.9);
  pointer-events: none; z-index: 9;
  transition: transform .38s cubic-bezier(.4,.1,.3,1), opacity .38s ease;
}

/* ── 档二：心心 ── */
/* 心心是可以双击兑换的，给它一点光晕暗示「这个能点」 */
.tile.has-heart .art { filter: drop-shadow(0 0 5px rgba(255,120,160,.85)); }
.tile.has-heart { background: #e8dcc8; }

/* ── 迷雾上的等级提示 ── */
/* 在此之前迷雾完全没有提示，玩家只能拖着物品一格格试。
   规则清楚但看不见，对玩家来说等于不存在。 */
.tile.fog::after {
  content: attr(data-need);
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--tile) * 0.34);
  font-weight: 700;
  color: rgba(255,255,255,.42);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  pointer-events: none;
}
/* 拖着物品时，够得着的雾片亮起来——省得玩家自己数等级 */
#board.dragging-lv1 .tile.fog[data-need="1"],
#board.dragging-lv2 .tile.fog[data-need="1"],
#board.dragging-lv2 .tile.fog[data-need="2"],
#board.dragging-lv3 .tile.fog[data-need="1"],
#board.dragging-lv3 .tile.fog[data-need="2"],
#board.dragging-lv3 .tile.fog[data-need="3"],
#board.dragging-lv4 .tile.fog[data-need="1"],
#board.dragging-lv4 .tile.fog[data-need="2"],
#board.dragging-lv4 .tile.fog[data-need="3"],
#board.dragging-lv4 .tile.fog[data-need="4"],
#board.dragging-lv5 .tile.fog:not([data-need=""]) {
  background: #8a9a72;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45);
}
#board.dragging-lv1 .tile.fog[data-need="1"]::after,
#board.dragging-lv2 .tile.fog[data-need="1"]::after,
#board.dragging-lv2 .tile.fog[data-need="2"]::after,
#board.dragging-lv3 .tile.fog[data-need="3"]::after,
#board.dragging-lv4 .tile.fog[data-need="4"]::after {
  color: rgba(255,255,255,.9);
}

/* ── 枯萎地里埋着的植物 ── */
/* 暗淡、去色，一眼能认出是什么，又明确表示「还没长出来」 */
.tile.withered .art {
  opacity: .38;
  filter: grayscale(.7) brightness(.7);
}
/* 血量数字挪到右下角，别压住植物 */
.tile.withered::after {
  content: attr(data-hp);
  position: absolute;
  right: 3px; bottom: 1px;
  font-size: 11px; line-height: 1;
  font-weight: 700;
  color: #ffd97a;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
/* 越贵的枯萎地颜色越深，远看就能分出档次 */
.tile.withered[data-hp="3"]  { background: #5d4a38; }
.tile.withered[data-hp="10"] { background: #4a3729; }

/* ── 「阳光会飞向这里」的标记 ── */
/* 「把合成做在枯萎地旁边就能指定治哪一格」这个机制一直存在，
   但玩家没有任何办法知道。拖动时实时标出来，机制才算真的存在。 */
.tile.sun-target {
  box-shadow: inset 0 0 0 3px #ffc93c, 0 0 12px rgba(255,201,60,.7);
  z-index: 2;
}
.tile.sun-target .art { opacity: .75; filter: none; }