@charset "UTF-8";

/* ==========================================================
   開墾ゲーム — 難易度えらび（まとめページ）

   U:MADMAX（mizuhiki-run.css）のトップ画面の指定をそのまま持ってきている。
   このページはゲームを読み込まないので、トップに要る分だけを抜いてある:
   - ページの地色・フォント
   - .mz-app--top（1 カラム 480px）
   - .mz-logo / .mz-loader / .mz-levels / .mz-lv
   ========================================================== */

:root {
  --mz-chrome: #3b2f24;        /* アプリの地色（トップバー）。線画と同じ色 */
  --mz-chrome-tint: #d9cdb0;   /* 画面外の余白 */
  --mz-soil: #7d6647;
  --mz-soil-deep: #4d3b26;
  --mz-accent: #c23c22;        /* 注意・強調の赤 */
  --mz-accent-deep: #8f2a14;
  --mz-gold: #f5b027;
  --mz-gold-deep: #d98a10;
  --mz-ink: #3b2d1e;
  --mz-ink-soft: #7a6850;
  --mz-line: rgba(59, 45, 30, .14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* display 指定を持つ要素でも hidden 属性を効かせる */
[hidden] { display: none !important; }

html, body { height: 100%; }

.mz-page {
  background: var(--mz-chrome-tint);
  color: var(--mz-ink);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* ---------- アプリ列 ---------- */

.mz-app {
  max-width: none;
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--mz-chrome);
  box-shadow: 0 0 24px rgba(0, 0, 0, .12);
  overflow: hidden;
}

/* ==========================================================
   トップ画面
   ローディング → ロゴ → 難易度えらび
   ========================================================== */

.mz-app--top {
  height: auto;
  min-height: 100%;
  min-height: 100dvh;
  max-width: 480px;         /* トップだけは開墾ランと同じ 1 カラム幅 */
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 28px 20px calc(40px + env(safe-area-inset-bottom));
  overflow: visible;
}

/* ---------- タイトル ---------- */

/* タイトル画像。左右の余白いっぱいまで広げる */
.mz-logo {
  display: block;
  align-self: stretch;
  width: auto;
  max-width: none;
  margin: 0 -20px;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .28));
}

/* 画像の下に置く説明。白地の上ではないので淡い白で置く */
.mz-top__lead {
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

/* ---------- ローディング画面 ---------- */

.mz-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--mz-chrome);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: opacity .4s ease;
}
.mz-loader.is-hidden { opacity: 0; pointer-events: none; }

.mz-spinner {
  width: 54px;
  height: 54px;
  border: 6px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mz-spin .9s linear infinite;
}
@keyframes mz-spin { to { transform: rotate(360deg); } }

.mz-loader__txt {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

/* ---------- 難易度えらび（index.html） ---------- */
.mz-levels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.mz-lv {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 248, 232, .95);
  border: 1px solid var(--mz-line);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
  color: var(--mz-ink);
  text-decoration: none;
  text-align: left;
  transition: transform .08s ease, box-shadow .08s ease;
}
.mz-lv:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.mz-lv__no {
  color: var(--mz-gold-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
}
.mz-lv__name {
  font-size: 19px;
  font-weight: 900;
  color: var(--mz-soil-deep);
}
/* 難易度が上がるほど、ふち色を赤へ寄せる */
.mz-lv--2 { border-left: 5px solid #cfa22a; }
.mz-lv--3 { border-left: 5px solid #c98122; }
.mz-lv--4 { border-left: 5px solid #c2561e; }
.mz-lv--5 { border-left: 5px solid var(--mz-accent); }
.mz-lv--1 { border-left: 5px solid #9bab5a; }