/* ============================================================
   background.css — 全画面共通の背景（空 / 砂 / 茂み / テクスチャ）
   Figma: bg コンポーネント (45:546)
============================================================ */
.bg{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }

/* 砂地: 地平線（空の下端 = 幅 × 383/420）から画面下端までを sand.png で cover。
   margin-top の % は幅基準なので、空の aspect-ratio と同じ位置に地平線が来る */
.bg-ground{
  position:absolute; left:0; right:0; top:0; bottom:0;
  margin-top:calc(383 / 420 * 100%);
  background:
    url("../assets/img/sand.png") center top / cover no-repeat,
    linear-gradient(to bottom, var(--sand-top) 0%, var(--cream) 100%);
}

/* 空: 幅に対して 420:383 の比率で上端に置く（地平線の位置はここで決まる） */
.bg-skywrap{
  position:absolute; top:0; left:0; width:100%;
  aspect-ratio:420 / 383;
}
.bg-sky{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bg-tree{ position:absolute; bottom:0; height:39.2%; width:auto; }   /* 150/383 */
.bg-tree-l{ left:0; }
.bg-tree-r{ right:0; }

/* 画面下の角の茂み */
.bg-corner{ position:absolute; bottom:0; width:90px; height:auto; }
.bg-corner-l{ left:0; }
.bg-corner-r{ right:0; width:81px; }

/* 紙の質感 */
.bg-texture{
  position:absolute; inset:0;
  background:url("../assets/img/ui/texture.jpg") 0 0 / 614px 614px repeat;
  mix-blend-mode:color-burn; opacity:.3;
}

.copyright{
  position:absolute; left:0; right:0;
  bottom:calc(26px + var(--safe-bottom));
  text-align:center; font-size:10px; font-weight:400;
  font-family:'Nunito',sans-serif;   /* 言語によらず Nunito Regular（LINE Seed JP は 800 のみ読み込んでいる） */
  color:var(--copyright); opacity:.6; white-space:nowrap;
}