/* ─────────────────────────────────────────────────────────────
   預覽場景的樣式 —— 跟 scene.js 一樣，原封取自 season.mcfallout.net 的 style.css，
   由 tools/port_scene.py 抽出。⛔ 不要手改，要改請改轉換腳本。
   ───────────────────────────────────────────────────────────── */
/* ── 預覽場景 ───────────────────────────────────────────────── */

.scene {
  position: relative; width: 100%; aspect-ratio: 4/3;
  overflow: hidden; background: #79a6ff; isolation: isolate;
  box-shadow: inset 2px 2px 0 var(--slot-lo), inset -2px -2px 0 var(--slot-hi);
}
@media (max-width: 960px) { .scene { aspect-ratio: 16/9; } }
.scene > * { position: absolute; inset: 0; pointer-events: none; }
/* 點一下放大：整個場景釘在畫面中央，後面壓一層黑；再點一下或 Esc 關掉 */
.scene { cursor: zoom-in; }
body.scene-big .scene {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(96vw, 1800px); max-height: 92vh; aspect-ratio: 4/3; z-index: 100; cursor: zoom-out;
  border: 3px solid var(--dark);
  /* 黑幕用場景自己的巨大陰影來做：預覽欄是 sticky、自成一個疊層，
     放在 body 上的黑幕 z-index 再高也會蓋到場景上面（截圖抓到整個場景變暗）。
     陰影跟場景在同一層，永遠在它後面、又蓋住頁面其他東西。 */
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .78);
}
body.scene-big .scene-label { font-size: 20px; }
@media (max-width: 960px) { body.scene-big .scene { aspect-ratio: 16/9; } }

.layer-clouds { image-rendering: pixelated; }
.layer-clouds .band {
  position: absolute; left: -20%; right: -20%;
  background-repeat: repeat-x;
  animation: bs-clouds 90s linear infinite;
}
@keyframes bs-clouds { to { background-position-x: 256px; } }
.layer-ground, .layer-trees, .layer-hills { image-rendering: pixelated; }

/* 草／樹葉：灰階貼圖 × 生態域色——跟遊戲同一套做法 */

/* 貼圖是 32×32，固定放大到 64px＝整數 2 倍。
   用百分比會算出非整數倍，像素就會糊掉——這頁的規矩是只准整數倍。 */
.celestial img { position: absolute; width: calc(64px * var(--sk, 1)); height: calc(64px * var(--sk, 1)); transform: translate(-50%,-50%);
  transition: left .45s ease, top .45s ease, opacity .45s ease; }
@media (max-width: 960px) { .celestial img { width: calc(48px * var(--sk, 1)); height: calc(48px * var(--sk, 1)); } }
.halo { position: absolute; width: calc(128px * var(--sk, 1)); height: calc(128px * var(--sk, 1)); transform: translate(-50%,-50%); border-radius: 50%;
  transition: left .45s ease, top .45s ease, opacity .45s ease; }

/* 天氣：數值出自 26.2 客戶端 WeatherEffectRenderer（貼圖 64×256＝1 格寬 × 4 格高）。
   雨：每 tick 往下捲 (3.0～4.0)/32 個貼圖高，沒有橫向漂移，頂點 alpha 1.0   → 4 格約 0.46 秒
   雪：每 tick 往下捲 1/512 個貼圖高、再加每欄各自的 0.001·高斯（標準差約是平均速度的一半，
       約 2.5% 的欄甚至往上飄），橫向另有每欄各自的 0.01·高斯 漂移；頂點 alpha 0.8
                                                                        → 平均 4 格約 25.6 秒
   兩者差 55 倍，不能共用同一組動畫。--wb 由腳本依畫面比例設定。
   ⚠️ 天氣層不用 pixelated：貼圖是 64px/格、畫面一格只有 20～60px，是縮小不是放大，
      最近鄰取樣會把 1px 寬的雨絲整條丟掉（比例還隨視窗大小變）。平滑取樣只會變淡，不會消失。 */
.weather { --wb: 24px; background-repeat: repeat; image-rendering: auto; opacity: 0; transition: opacity .4s;
  background-size: var(--wb) calc(var(--wb) * 4); }
.weather.rain { opacity: 1; animation: bs-rain .457s linear infinite; }
@keyframes bs-rain { to { background-position: 0 calc(var(--wb) * 4); } }
/* 雪疊兩層：第一層走平均速度、第二層走約兩倍（≈ 平均 +1σ 的那些欄）且起點錯開，
   兩層的高度才永遠不會鎖在一起。原本兩層同速只是左右錯開，每 3.2 秒會完全重合成一層，
   看起來是「雪花密度在脈動」而不是「每一欄各自飄」。 */
.weather.snow { opacity: .8; animation: bs-snow 25.6s linear infinite;
  background-position: 0 0, calc(var(--wb) * .5) calc(var(--wb) * 2); }
@keyframes bs-snow {
  to { background-position: calc(var(--wb) * 4) calc(var(--wb) * 4),
                            calc(var(--wb) * .5 - var(--wb) * 4) calc(var(--wb) * 2 + var(--wb) * 8); }
}

/* 粒子：每一顆都是一張真的粒子貼圖 */
.particles i {
  position: absolute; display: block;
  background-repeat: no-repeat; background-size: 100% 100%;
  image-rendering: pixelated; will-change: transform, opacity;
}

.scene-label {
  position: absolute; left: 8px; right: 8px; bottom: 6px; top: auto;
  font-family: var(--pixel); font-size: 13px; color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.85); z-index: 5; line-height: 1.5;
}
/* 場景右上角的文字提醒：「點一下放大」／放大後「再點一下或按 Esc 關掉」 */
.scene-hint {
  position: absolute; right: 8px; top: 6px; left: auto; bottom: auto;
  font-family: var(--pixel); font-size: 12px; color: #fff; opacity: .85;
  text-shadow: 2px 2px 0 rgba(0,0,0,.85); z-index: 5;
}
body.scene-big .scene-hint { font-size: 18px; }
/* 村民、鐵巨人、殭屍…：每隻都是用實體貼圖拼的正面像素圖（canvas，整數倍） */
.mobs .mob { position: absolute; left: 0; top: 0; inset: auto; will-change: transform; }
.mobs canvas { display: block; image-rendering: pixelated; }



/* 草／樹葉：灰階貼圖 × 生態域色——跟遊戲同一套做法 */
.tint-mul { mix-blend-mode: multiply; }