/* ─────────────────────────────────────────────────────────────
   領地景色選擇器 — Minecraft 皮

   規則：
   • 所有圖都是從遊戲檔案抽出來的原始貼圖，一律 image-rendering: pixelated，
     而且只用整數倍放大（16→32／16→48），才不會出現半格模糊。
   • 面板／按鈕用 Minecraft 那套「亮邊在左上、暗邊在右下」的立體邊，
     不用圓角、不用模糊陰影、不用漸層按鈕。
   • 草與樹葉的貼圖在遊戲裡本來就是灰階，顏色是生態域染上去的；
     這裡用 multiply 疊色重現同一件事，所以預覽的顏色跟遊戲會是同一個顏色。
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'minecraftfont';
  src: url('assets/fonts/minecraftfont.woff') format('woff');
  font-display: swap;
}

:root {
  --panel: #c6c6c6;
  --panel-hi: #ffffff;
  --panel-lo: #555555;
  --slot: #8b8b8b;
  --slot-hi: #ffffff;
  --slot-lo: #373737;
  --ink: #3f3f3f;
  --ink-dim: #6f6f6f;
  --green: #40621f;
  --green-hi: #557f28;
  --dark: #1d1d1d;
  --pixel: 'minecraftfont', 'Courier New', monospace;
  --sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}

* { box-sizing: border-box; }

/* ⚠️ 一定要放在最前面：底下有好幾個規則寫了 display:flex／grid，
   那會蓋掉瀏覽器內建的 [hidden]{display:none}，讓該藏的區塊照樣顯示出來。 */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

/* 所有貼圖一律像素化——放大縮小都不能糊 */
img, .tex { image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: #eaeaea;
  background-color: #0f0f10;
  /* 泥土磚壓到很暗只留質感——原色太亮，白字整片糊在上面看不清楚 */
  background-image:
    linear-gradient(rgba(10,10,12,.80), rgba(10,10,12,.80)),
    url('assets/mc/block/dirt.png');
  background-size: auto, 48px 48px;
  background-repeat: repeat, repeat;
  background-attachment: fixed, fixed;
}

/* 頂部草地帶：用真的草方塊側面貼圖鋪一條 */
body::before {
  content: '';
  position: fixed; left: 0; right: 0; top: 0; height: 48px;
  background: url('assets/mc/block/grass_block_side.png') repeat-x;
  background-size: 48px 48px;
  image-rendering: pixelated;
  filter: brightness(.62);
  z-index: 1; pointer-events: none;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 62px 16px 150px; position: relative; z-index: 2; }

/* ── Minecraft 立體邊 ───────────────────────────────────────── */

.mc-panel {
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--dark);
  box-shadow: inset -4px -4px 0 var(--panel-lo), inset 4px 4px 0 var(--panel-hi);
  padding: 4px;
}

.mc-btn {
  font-family: var(--pixel);
  font-size: 15px;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--dark);
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.30), inset 3px 3px 0 rgba(255,255,255,.55);
  padding: 8px 14px;
  cursor: pointer;
  transition: filter .08s;
}
.mc-btn:hover { filter: brightness(1.1); }
.mc-btn:active { box-shadow: inset 3px 3px 0 rgba(0,0,0,.30), inset -3px -3px 0 rgba(255,255,255,.4); }
.mc-btn.primary { background: var(--green); color: #fff; text-shadow: 2px 2px 0 #2c4318; }
.mc-btn.primary:hover { background: var(--green-hi); }

/* ── 標頭 ───────────────────────────────────────────────────── */

header.top { margin-bottom: 14px; }
header.top h1 {
  font-family: var(--pixel);
  font-size: 30px; margin: 0; color: #fff;
  text-shadow: 3px 3px 0 rgba(0,0,0,.9);
  letter-spacing: 1px;
}
header.top p { margin: 8px 0 0; color: #cfcfcf; text-shadow: 2px 2px 0 rgba(0,0,0,.9); font-size: 13.5px; }

/* 「只是看起來不一樣」那條，要一眼看到 */
.vis-note {
  margin: 14px 0 0; padding: 10px 12px;
  background: rgba(28,28,28,.86);
  border: 2px solid var(--dark);
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.35), inset 3px 3px 0 rgba(255,255,255,.10);
  color: #f0e2b8; font-size: 13px; line-height: 1.8;
  display: flex; gap: 10px; align-items: flex-start;
}
.vis-note img { width: 32px; height: 32px; flex: none; margin-top: 2px; }
.vis-note b { color: #ffd76e; }

/* ── 版面 ───────────────────────────────────────────────────── */

.layout { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 16px; align-items: start; margin-top: 16px; }
.preview-col { position: sticky; top: 62px; }

@media (max-width: 960px) {
  /* 手機上預覽要在最上面：一邊挑一邊看，不能把它排到整頁最底下。 */
  .layout { grid-template-columns: 1fr; display: flex; flex-direction: column; }
  /* ⚠️ 改成 flex 之後子項會照內容縮寬，一定要補這行，否則預覽會塌成一個小方塊。 */
  .layout > * { width: 100%; }
  .preview-col { order: -1; position: sticky; top: 48px; z-index: 30; }
  .preview-col .mc-panel { box-shadow: inset -4px -4px 0 var(--panel-lo), inset 4px 4px 0 var(--panel-hi), 0 6px 0 rgba(0,0,0,.35); }
  .scene { aspect-ratio: 2/1; }
  .scene-note { display: none; }
  .wrap { padding-bottom: 180px; }
}

/* ── 區段 ───────────────────────────────────────────────────── */

section.card { margin-bottom: 12px; }
section.card > h2 {
  font-family: var(--pixel);
  margin: 0; padding: 9px 12px 6px;
  font-size: 17px; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
section.card > h2 .n {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  font-size: 14px; color: #fff; background: var(--slot);
  box-shadow: inset 2px 2px 0 var(--slot-lo), inset -2px -2px 0 var(--slot-hi);
}
section.card > h2 small { margin-left: auto; font-size: 12px; color: var(--ink-dim); font-family: var(--sans); font-weight: 400; }
.card-body { padding: 4px 12px 12px; color: var(--ink); }

.hint { color: #4c4c4c; font-size: 12.5px; margin: 0 0 10px; line-height: 1.75; }
.hint.warn { color: #8a5a12; }
.label { font-family: var(--pixel); font-size: 14px; color: var(--ink); margin: 14px 0 6px; }

/* ── 選項：做成物品欄格子 ──────────────────────────────────── */

.grid { display: grid; gap: 6px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 640px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.opt {
  display: flex; align-items: center; gap: 9px;
  background: var(--slot);
  box-shadow: inset 2px 2px 0 var(--slot-lo), inset -2px -2px 0 var(--slot-hi);
  border: 0; padding: 7px 9px; cursor: pointer;
  font: inherit; color: #fff; text-align: left;
  text-shadow: 1px 1px 0 rgba(0,0,0,.55);
  min-height: 50px;
}
.opt:hover { background: #9a9a9a; }
.opt[aria-pressed="true"] { background: var(--green); }
.opt[aria-pressed="true"]:hover { background: var(--green-hi); }
.opt .txt { display: flex; flex-direction: column; min-width: 0; }
.opt .t { font-family: var(--pixel); font-size: 14px; line-height: 1.35; }
.opt .d { font-size: 11px; color: #ececec; opacity: 1; line-height: 1.45; margin-top: 2px; }

/* 格子裡的貼圖：16px 原圖放大到 32px＝整數 2 倍 */
.opt .ico { width: 32px; height: 32px; flex: none; display: block; background-size: 100% 100%; background-repeat: no-repeat; }
/* 圖示現在是 canvas（整數倍最近鄰自己畫），不靠 CSS 縮放 */
canvas.ico { image-rendering: pixelated; }
/* 場景裡的草地與樹葉：不透明貼圖 × 顏色，用 multiply 疊色（同遊戲的染法） */
.tint-mul { mix-blend-mode: multiply; }

/* 色票 */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px,1fr)); gap: 4px; }
.swatch {
  aspect-ratio: 1; border: 0; cursor: pointer; padding: 0;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.35), inset -2px -2px 0 rgba(255,255,255,.35);
}
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--green), inset 2px 2px 0 rgba(0,0,0,.35); }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.row input[type="text"] {
  font-family: var(--pixel); font-size: 15px;
  background: #000; color: #e0e0e0; border: 2px solid #a0a0a0;
  padding: 7px 9px; width: 130px;
}
.row input[type="color"] { width: 44px; height: 38px; padding: 0; border: 2px solid var(--dark); background: var(--panel); cursor: pointer; }
.quant { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); }
.quant .chip { width: 24px; height: 24px; box-shadow: inset 2px 2px 0 rgba(0,0,0,.35), inset -2px -2px 0 rgba(255,255,255,.35); }

/* 月相：真貼圖擺在夜空色的格子裡 */
.moons { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
@media (max-width: 640px) { .moons { grid-template-columns: repeat(5, 1fr); } }
.moon {
  border: 0; cursor: pointer; padding: 6px 2px 5px; text-align: center;
  background: #10131f;
  box-shadow: inset 2px 2px 0 #05070d, inset -2px -2px 0 #2a3350;
  color: #cfd6e6; font-size: 10.5px; font-family: var(--sans);
}
.moon:hover { background: #1b2135; }
.moon[aria-pressed="true"] { background: var(--green); box-shadow: inset 2px 2px 0 #2c4318, inset -2px -2px 0 #8bc34a; color: #fff; }
.moon img, .moon svg { display: block; margin: 0 auto 4px; width: 32px; height: 32px; }

/* 時間滑桿 */
.slider-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
input[type="range"] { flex: 1; accent-color: var(--green); }
.timeval { font-family: var(--pixel); font-size: 14px; color: var(--ink); min-width: 122px; text-align: right; }

/* ── 預覽場景 ───────────────────────────────────────────────── */

.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: 64px; height: 64px; transform: translate(-50%,-50%);
  transition: left .45s ease, top .45s ease, opacity .45s ease; }
@media (max-width: 960px) { .celestial img { width: 48px; height: 48px; } }
.halo { position: absolute; width: 128px; height: 128px; 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; }

.scene-note { margin: 8px 2px 0; font-size: 11.5px; color: #a8a8a8; text-shadow: 1px 1px 0 rgba(0,0,0,.9); line-height: 1.7; }

/* ── 指令區（就放在預覽下面，看完馬上複製）────────────────── */

.cmdbox { margin-top: 10px; }
.cmdbox code {
  display: block; font-family: var(--pixel); font-size: 13px;
  background: #000; color: #55ff55; border: 2px solid #6f6f6f;
  padding: 9px 10px; white-space: pre-wrap; overflow-wrap: break-word; line-height: 1.6; margin-bottom: 8px;
  /* 像素字型的空白只有 3px、一個字元卻有 10px，指令看起來會變成
     「season=followtime=none」這種黏成一團的樣子。補寬字距才讀得出來哪裡分段。 */
  word-spacing: 5px;
}
.cmdbox .btns { display: flex; gap: 8px; }
.cmdbox .btns .mc-btn { flex: 1; }
.cmdbox .note { font-size: 11.5px; color: #4c4c4c; margin: 8px 0 0; line-height: 1.7; }
.cmdbox .note b { color: #8a5a12; }

/* 目前設定一覽：預覽底下把每一項攤開，不用捲回去看自己選了什麼 */
.summary { margin-top: 8px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; }
.summary dt { color: #3f3f3f; font-family: var(--pixel); font-size: 13px; }
.summary dd { margin: 0; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.summary dd .ico { width: 16px; height: 16px; background-size: 100% 100%; flex: none; }


footer.bottom { color: #c4c4c4; font-size: 12px; padding: 14px 4px 0; text-shadow: 1px 1px 0 rgba(0,0,0,.9); line-height: 1.9; }
footer.bottom code { font-family: var(--pixel); color: #9fe36b; }
footer.bottom .disclaimer { color: #9a9a9a; font-size: 11px; margin-top: 10px; line-height: 1.7; }

/* 「不設定／不鎖／不改／無」一律換到新的一列的最左邊——每個區塊位置都一樣，
   玩家要取消什麼永遠往左下角找。（服主 2026-09-02 指定） */
.grid > .none-opt { grid-column: 1; }
.row-break { flex-basis: 100%; height: 0; }
.moons .none-opt { margin-left: 0; }

/* 分享網址：跟指令用同一個框，只是字小一點、會自己斷行 */
.cmdbox.share { margin-top: 8px; }
.cmdbox.share code { font-size: 11px; word-break: break-all; white-space: normal; }