/* ============================================================================
 * pixel-sky-bg.css —— 像素风「蓝天 + 星光 + 草地/树/泥土」背景层
 * 用法：把 .pxbg 那一坨 HTML 放进任意容器（容器需 position:relative），
 *       容器里的业务内容给 position:relative;z-index:1 即可压在背景上。
 * 依赖：同级 assets/ 目录（ground-tile.png / deco-*.png / sparkle.png）
 * 调透明度：改容器上的 --pxbg-op（0=隐形，1=满强度），默认 .30
 * ========================================================================== */

.pxbg{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;               /* 关键：背景永远不吃鼠标事件 */
  overflow:hidden;
  opacity:var(--pxbg-op,.30);
}
.pxbg *{image-rendering:pixelated}   /* 关键：像素图放大不做插值，不糊 */

/* 天空：纯色，不是渐变 */
.pxbg__sky{position:absolute;inset:0;background:var(--pxbg-sky,#6CB6FA)}

/* 地面：一条 64×102 的草皮+泥土，横向 repeat-x，贴容器底部
   高度可改（--pxbg-ground-h），但要保持 102 的整数倍，否则像素会被拉花 */
.pxbg__ground{
  position:absolute; left:0; right:0; bottom:0;
  height:var(--pxbg-ground-h,102px);
  background:url(assets/ground-tile.png) repeat-x left bottom/auto 100%;
}

/* 装饰：左右两簇（树+灌木+花，整簇一张图，不拆件，避免从物体中间切开）
   贴容器底部；想挪就改 left/right，想只留一边就删掉另一张 */
.pxbg__deco{position:absolute;bottom:0;height:var(--pxbg-deco-h,341px);width:auto}
.pxbg__deco--l{left:0}
.pxbg__deco--r{right:0}

/* 星光：同一张图复用，位置写行内 style */
.pxbg__spark{position:absolute;width:16px;height:16px}