/* mc-world-bg.css — サイト共通の「ワールド断面」背景 (背景A 採用・2026-09-08)
 * 使い方: <link rel="stylesheet" href="mc-world-bg.css"> を読み込み、body 直下に
 *   <div class="mc-bg depth-0">…</div> を置く (雛形は mc-world-bg.html を参照)。
 * depth-0 = TOP (ほぼ地上)  / depth-1 = カタログ・一覧 (地表が上がり土と石が見える)
 * depth-2 = 各コンテンツ詳細 (ほぼ地中・鉱石多め)。ページ遷移で少しずつ潜っていく演出。
 * 画像ファイル不使用 (SVG data URI のみ)。
 */
body { background: #a8d4ff !important; }
.mc-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
          --surface: 72%; --grass-h: 8%; --dirt-h: 20%; }
.mc-bg.depth-1 { --surface: 40%; --grass-h: 8%; --dirt-h: 20%; }
.mc-bg.depth-2 { --surface: 12%; --grass-h: 6%; --dirt-h: 17%; }
.mc-bg .band { position: absolute; left: 0; right: 0; image-rendering: pixelated; }
.mc-bg .band.sky { top: 0; height: var(--surface);
  background: linear-gradient(to bottom, #7cbfff 0%, #a8d4ff 100%); }
.mc-bg .band.grass { top: var(--surface); height: var(--grass-h); background-color: #8bc34a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='1' y='1' width='1' height='1' fill='%234f8a38'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23a3d66b'/%3E%3Crect x='6' y='1' width='1' height='1' fill='%234f8a38'/%3E%3Crect x='2' y='4' width='1' height='1' fill='%23a3d66b'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%234f8a38'/%3E%3Crect x='7' y='6' width='1' height='1' fill='%23a3d66b'/%3E%3Crect x='0' y='6' width='1' height='1' fill='%234f8a38'/%3E%3Crect x='3' y='7' width='1' height='1' fill='%23a3d66b'/%3E%3C/svg%3E"); background-size: 48px 48px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25); }
.mc-bg .band.dirt { top: calc(var(--surface) + var(--grass-h)); height: var(--dirt-h); background-color: #8b5a3c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='1' fill='%235e3c25'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%23a1714f'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%235e3c25'/%3E%3Crect x='7' y='3' width='1' height='1' fill='%23a1714f'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%235e3c25'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%23a1714f'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%235e3c25'/%3E%3Crect x='4' y='7' width='1' height='1' fill='%23a1714f'/%3E%3C/svg%3E"); background-size: 48px 48px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.3); }
.mc-bg .band.stone { top: calc(var(--surface) + var(--grass-h) + var(--dirt-h)); bottom: 0; background-color: #7a7a7a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%235b5b5b'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23949494'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%235b5b5b'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%23949494'/%3E%3Crect x='3' y='5' width='1' height='1' fill='%235b5b5b'/%3E%3Crect x='7' y='5' width='1' height='1' fill='%23949494'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%235b5b5b'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23949494'/%3E%3C/svg%3E"); background-size: 48px 48px; }
.mc-bg .block-grid { position: absolute; left: 0; right: 0; top: var(--surface); bottom: 0; opacity: .5;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 2px, transparent 2px 48px),
                    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 48px); }
.mc-bg .cloud { position: absolute; width: 128px; height: 64px; opacity: .85; image-rendering: pixelated;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='4' width='12' height='3' fill='white'/%3E%3Crect x='4' y='2' width='4' height='2' fill='white'/%3E%3Crect x='8' y='1' width='5' height='3' fill='white'/%3E%3Crect x='0' y='5' width='3' height='2' fill='white'/%3E%3C/svg%3E"); background-size: 100% 100%; }
.mc-bg.depth-2 .cloud { display: none; }
/* 鉱石: 石の帯の中に置く (top は石の帯に対する %) */
.mc-bg .ore { position: absolute; width: 36px; height: 36px; border: 3px solid #000; background-color: #7a7a7a;
  background-size: 100% 100%; image-rendering: pixelated;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.35), inset 2px 2px 0 rgba(255,255,255,.15); }
.mc-bg .ore.coal    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%237a7a7a'/%3E%3Crect x='1' y='1' width='2' height='2' fill='%232b2b2b'/%3E%3Crect x='4' y='2' width='2' height='2' fill='%232b2b2b'/%3E%3Crect x='2' y='5' width='2' height='2' fill='%232b2b2b'/%3E%3Crect x='5' y='5' width='2' height='2' fill='%232b2b2b'/%3E%3C/svg%3E"); }
.mc-bg .ore.iron    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%237a7a7a'/%3E%3Crect x='1' y='1' width='2' height='2' fill='%23e0c9a6'/%3E%3Crect x='4' y='2' width='2' height='2' fill='%23c9a97a'/%3E%3Crect x='2' y='5' width='2' height='2' fill='%23e0c9a6'/%3E%3Crect x='5' y='5' width='2' height='2' fill='%23c9a97a'/%3E%3C/svg%3E"); }
.mc-bg .ore.diamond { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%237a7a7a'/%3E%3Crect x='1' y='1' width='2' height='2' fill='%236fe8e0'/%3E%3Crect x='4' y='2' width='2' height='2' fill='%23bffaf6'/%3E%3Crect x='2' y='5' width='2' height='2' fill='%236fe8e0'/%3E%3Crect x='5' y='5' width='2' height='2' fill='%23bffaf6'/%3E%3C/svg%3E"); }
.mc-bg .ore.gold    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect width='8' height='8' fill='%237a7a7a'/%3E%3Crect x='1' y='1' width='2' height='2' fill='%23ffd93d'/%3E%3Crect x='4' y='2' width='2' height='2' fill='%23ffe98a'/%3E%3Crect x='2' y='5' width='2' height='2' fill='%23ffd93d'/%3E%3Crect x='5' y='5' width='2' height='2' fill='%23ffe98a'/%3E%3C/svg%3E"); }
.mc-bg .ore.deep { display: none; }
.mc-bg.depth-2 .ore.deep { display: block; }
.mc-bg.depth-0 .ore { display: none; }