/* 魔理沙のほうき爆走！ 0.1.0（2026-09-24）
   遊ぶ画面は 16:9（基準 1280x720）。大きさは js/game.js の fitScreen() が測って決め、
   .mhb-screen の left/top/width/height と --u（画面の幅の1%）を書く。
   ★画面ごとの罠は Obsidian の「画面レイアウトで壊れるCSSの書き方」「WordPress埋め込みゲームの落とし穴」。
   - hidden は display を書いた要素に負ける → .mhb-app [hidden] を !important で消す
   - 重ね板の中央ぞろえははみ出すと上が切れる → safe center と、中身だけスクロール
   - 長押しで字が選ばれる・タップが青く光る → わく全体で user-select と tap-highlight を止める
   - 遊ぶ所は touch-action:none（ページが動かない）。スクロールしたい板だけ pan-y に戻す
   - 高さは svh（アドレス欄の出入りで縮まない）。古い端末用に同じ宣言を vh で1行前に書く
   - calc の中に 0px のフォールバックを書かない（WordPress の縮小で壊れる） */

html { background: #0d0a1c; }
body { margin: 0; color: #fff; background: transparent;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif; }
html.is-embed, html.is-embed body { height: 100%; overflow: hidden; }

.mhb-app, .mhb-app * { box-sizing: border-box; }
.mhb-app [hidden] { display: none !important; }

/* ---------- わく ---------- */
.mhb-app {
  position: relative;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.mhb-app * { -webkit-tap-highlight-color: transparent; }
.mhb-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 300px;
  overflow: hidden;
  touch-action: manipulation;
  overscroll-behavior: none;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(120, 80, 190, .35), rgba(0, 0, 0, 0) 65%),
    linear-gradient(180deg, #1c1438 0%, #0d0a1c 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
html.is-embed .mhb-app { position: absolute; inset: 0; }
html.is-embed .mhb-stage { position: absolute; inset: 0; height: auto; min-height: 0; }
.mhb-app.is-full .mhb-stage { height: 100%; }

/* 16:9 の遊ぶ画面。JS が測る前は CSS だけで収める（JS の値が入ったら上書きされる） */
.mhb-screen {
  position: absolute;
  left: 50%; top: 50%;
  width: min(100%, calc(100vh * 16 / 9));
  width: min(100%, calc(100svh * 16 / 9));
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #120d26;
  --u: 12.8px;
  border-radius: 2px;
}
.mhb-screen.is-fit { transform: none; aspect-ratio: auto; }
.mhb-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}
.mhb-screen.is-menu .mhb-canvas { cursor: default; }

/* ---------- ボタン共通 ---------- */
.mhb-btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: clamp(40px, calc(5.2 * var(--u)), 58px);
  padding: .35em 1.1em;
  border: 2px solid rgba(255, 236, 170, .55);
  border-radius: 999px;
  background: linear-gradient(180deg, #3a2a6e, #231847);
  color: #fff;
  font: inherit; font-weight: 700;
  font-size: clamp(14px, calc(1.75 * var(--u)), 21px);
  line-height: 1.25;
  word-break: keep-all;                /* 語の途中で折らない（「遊／ぶ」にしない） */
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
  transition: transform .08s, filter .15s;
}
.mhb-btn:hover { filter: brightness(1.15); }
.mhb-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.mhb-btn:focus-visible, .mhb-hudbtn:focus-visible, .mhb-evbtn:focus-visible, .mhb-spark:focus-visible, .mhb-card:focus-visible {
  outline: 3px solid #ffe066; outline-offset: 2px;
}
.mhb-btn-main {
  background: linear-gradient(180deg, #ffe27a, #f5b52e);
  color: #2a1606;
  border-color: #fff4c4;
}
.mhb-btn-sub { background: rgba(20, 14, 40, .9); }
.mhb-btn[disabled] { opacity: .45; cursor: default; filter: grayscale(.4); }
.mhb-btn small { font-size: .72em; font-weight: 700; opacity: .9; }

/* ---------- タイトル ---------- */
.mhb-title {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.mhb-title-bg {
  position: absolute; inset: 0; z-index: -1;
  background: #1b2340 url(img/title_key.webp) center / cover no-repeat;
}
/* 魔理沙は絵の左側にいるので、題と操作は右（家の側）に置く。右側は暗いガラスで、字の下が真っ白でも 4.5:1 を保つ */
.mhb-title-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 10, 32, 0) 0%, rgba(14, 10, 32, 0) 44%, rgba(14, 10, 32, .86) 56%, rgba(14, 10, 32, .9) 100%);
}
.mhb-title-in {
  position: relative;
  margin-left: auto;
  width: 46%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: safe center;
  padding: calc(2.2 * var(--u)) calc(2.6 * var(--u)) calc(1.4 * var(--u));
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.mhb-title-sub { margin: 0 0 .3em; font-size: clamp(12px, calc(1.35 * var(--u)), 17px); font-weight: 700; color: #f3ecff; letter-spacing: .08em; }
.mhb-title-main {
  margin: 0; line-height: 1.05;
  font-size: clamp(26px, calc(5.4 * var(--u)), 76px);
  font-weight: 900; color: #fff;
  text-shadow: 0 3px 0 #2b1a55, 0 0 18px rgba(255, 210, 90, .45);
  letter-spacing: .02em;
}
.mhb-title-main b { color: #ffd84a; font-weight: 900; font-size: 1.12em; }
.mhb-title-lead { margin: .5em 0 1em; font-size: clamp(13px, calc(1.6 * var(--u)), 21px); font-weight: 700; color: #fff; }
.mhb-title-btns { display: flex; flex-direction: column; align-items: stretch; gap: calc(.9 * var(--u)); max-width: 28em; }
.mhb-title-btns .mhb-row { display: flex; gap: calc(.9 * var(--u)); }
.mhb-title-btns .mhb-row > * { flex: 1 1 0; min-width: 0; padding-left: .6em; padding-right: .6em; }   /* 「ほかのゲームで遊ぶ」が1行に入るように */
.mhb-title-btns .mhb-btn { width: 100%; }
.mhb-title-note { margin: .8em 0 0; min-height: 1.2em; font-size: clamp(12px, calc(1.25 * var(--u)), 16px); color: #efe8ff; }
/* ★クレジットは重ねずに縦の並びへ入れる（重ねると、低い画面でタイトルのボタンの下の段がもぐる。568x320 で踏んだ） */
.mhb-credit {
  position: relative; flex: 0 0 auto;
  margin: 0; padding: .35em .8em;
  font-size: clamp(12px, calc(1.05 * var(--u)), 14px);
  color: #fff; background: rgba(14, 10, 32, .82);
  text-align: right;
}
.mhb-link-btn { text-decoration: none; }

/* ---------- 全画面のボタン（2026-09-25 naoko さん「全画面表示できるようにして」「他のゲームのように」） ----------
   ほかのゲームと同じ ⛶（四すみのマーク）。押すと全画面、もう一度押すともどる（そのあいだはマークが内向きになる）。
   タイトルは右上（右側の題と操作はまん中ぞろえなので、上があいている）。遊ぶ画面は Ⅱ のとなり（.mhb-fullbtn）。
   低い画面（横持ちの電話）は右側がいっぱいなので、左上（絵の上）に置く。★PC では左に置かない（自動広告の左のレールの下になる） */
.mhb-full-ico { width: 1.2em; height: 1.2em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mhb-full-ico .mhb-ico-out { display: none; }
[aria-pressed="true"] > .mhb-full-ico .mhb-ico-in { display: none; }
[aria-pressed="true"] > .mhb-full-ico .mhb-ico-out { display: inline; }
.mhb-title-full {
  position: absolute; z-index: 2;
  top: calc(1.2 * var(--u)); right: calc(1.2 * var(--u));
  min-height: clamp(40px, calc(4.6 * var(--u)), 52px);
  padding: .2em .95em .2em .75em;
  font-size: clamp(13px, calc(1.45 * var(--u)), 18px);
}
.mhb-screen.is-short .mhb-title-full { right: auto; left: calc(1.2 * var(--u)); }

/* ---------- HUD（遊んでいる間） ---------- */
.mhb-hud {
  position: absolute; inset: 0;
  pointer-events: none;
  font-size: clamp(12px, calc(1.55 * var(--u)), 20px);
  font-weight: 700;
  line-height: 1.2;
}
.mhb-hud-row {
  position: absolute; left: calc(.8 * var(--u)); right: calc(.8 * var(--u)); top: calc(.7 * var(--u));
  display: flex; align-items: flex-start; gap: calc(.7 * var(--u));
}
.mhb-pill {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .3em .7em;
  border-radius: 999px;
  background: rgba(16, 11, 34, .86);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .22);
  color: #fff;
  white-space: nowrap;
}
.mhb-hud-left { flex: 0 1 auto; min-width: 0; }
.mhb-stagename { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mhb-lives { display: inline-flex; gap: .12em; color: #ff6f98; font-size: 1.1em; letter-spacing: 0; }
.mhb-lives .is-empty { color: rgba(255, 255, 255, .28); }
.mhb-hud-goal { margin-left: auto; flex: 0 0 auto; }
.mhb-icon { width: 1.9em; height: 1.9em; margin: -.35em -.1em; }
.mhb-goal-count { font-size: 1.15em; font-variant-numeric: tabular-nums; }
.mhb-goal-count.is-done { color: #9dffb0; }
.mhb-sep { width: 1px; height: 1.1em; background: rgba(255, 255, 255, .35); }
.mhb-time { font-variant-numeric: tabular-nums; }
.mhb-time.is-done { color: #9dffb0; }
.mhb-k { font-size: max(12px, .82em); color: #ddd3ff; margin-right: .25em; }   /* ★字は 12px より小さくしない（日本語の 11px は小さい） */
.mhb-hud-score { flex: 0 0 auto; margin-left: auto; font-variant-numeric: tabular-nums; }
.mhb-hudbtn {
  pointer-events: auto;
  flex: 0 0 auto;
  width: clamp(40px, calc(4.6 * var(--u)), 56px);
  height: clamp(40px, calc(4.6 * var(--u)), 56px);
  margin-top: -.15em;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .6);
  background: rgba(16, 11, 34, .86);
  color: #fff; font: inherit; font-weight: 900; font-size: 1.05em;
  cursor: pointer; touch-action: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.mhb-fullbtn .mhb-full-ico { width: 52%; height: 52%; }
.mhb-gauge {
  position: absolute; left: calc(.8 * var(--u)); bottom: calc(.9 * var(--u));
  width: min(40%, 22em);
}
.mhb-bar { position: relative; flex: 1 1 auto; height: .7em; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.mhb-bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #7b5cff, #c86bff, #ffd35a); }
.mhb-gauge-val { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.mhb-gauge.is-full { box-shadow: 0 0 0 2px #ffe27a, 0 0 18px rgba(255, 226, 122, .75); }
.mhb-gauge.is-full .mhb-gauge-val { color: #ffe27a; }
.mhb-tip {
  position: absolute; left: 0; right: 0; top: max(calc(6.4 * var(--u)), calc(.7 * var(--u) + 44px));   /* HUD のボタン（小さな画面でも 40px）の下 */
  width: fit-content; margin: 0 auto; max-width: 78%;          /* ★left:50% と translate だと幅が画面の半分で頭打ち（字幕と同じ。2026-09-25） */
  padding: .45em 1em;
  border-radius: .8em;
  background: rgba(16, 11, 34, .88);
  box-shadow: 0 0 0 1.5px rgba(255, 226, 122, .6);
  text-align: center;
  white-space: normal;
  opacity: 0; transition: opacity .25s;
}
.mhb-tip.is-on { opacity: 1; }
.mhb-banner {
  position: absolute; left: 50%; top: 40%;
  margin: 0; padding: .1em .7em; text-align: center; white-space: nowrap;
  font-size: clamp(22px, calc(4.4 * var(--u)), 60px); font-weight: 900;
  color: #fff; text-shadow: 0 3px 0 #2b1a55;
  background: rgba(16, 11, 34, .72); border-radius: .4em;     /* 下が真っ白でも大きな字の 3:1 を保つ */
  opacity: 0; transform: translateX(-50%) scale(.9); transition: opacity .2s, transform .2s;
}
.mhb-banner.is-on { opacity: 1; transform: translateX(-50%) scale(1); }
.mhb-banner.is-gold { color: #ffe066; }

/* マスタースパークのボタン（右下・大きく） */
.mhb-spark {
  position: absolute;
  right: calc(1.1 * var(--u)); bottom: calc(1.1 * var(--u));
  width: clamp(76px, calc(11 * var(--u)), 128px);
  height: clamp(76px, calc(11 * var(--u)), 128px);
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .45);
  /* ★ボタン全体を半透明（opacity）にすると字も薄くなる。地だけ半透明にして、字は濃く保つ */
  background: radial-gradient(circle at 50% 38%, rgba(64, 48, 112, .86), rgba(22, 15, 44, .9));
  color: #e8e2ff;
  font: inherit; font-weight: 900;
  font-size: clamp(12px, calc(1.45 * var(--u)), 18px);
  line-height: 1.15;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em;
  cursor: pointer;
  touch-action: none;
  transition: transform .1s;
}
.mhb-spark small { font-size: max(12px, .78em); opacity: .85; }
.mhb-spark.is-ready {
  opacity: 1;
  color: #2a1606;
  border-color: #fff8d0;
  background: radial-gradient(circle at 50% 40%, #fff7c2 0%, #ffd84a 45%, #f59a1e 100%);
  box-shadow: 0 0 0 4px rgba(255, 216, 74, .45), 0 0 26px rgba(255, 200, 60, .9);
  animation: mhbPulse 1s ease-in-out infinite;
}
.mhb-spark.is-final.is-ready { width: clamp(88px, calc(13 * var(--u)), 150px); height: clamp(88px, calc(13 * var(--u)), 150px); }
.mhb-spark:active { transform: scale(.95); }
@keyframes mhbPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 216, 74, .45), 0 0 18px rgba(255, 200, 60, .7); } 50% { box-shadow: 0 0 0 9px rgba(255, 216, 74, .25), 0 0 34px rgba(255, 200, 60, 1); } }
.mhb-pc-only { display: none; }
@media (hover: hover) and (pointer: fine) { .mhb-pc-only { display: revert; } .mhb-touch-only { display: none; } }

/* ---------- かぶせ画面 ---------- */
.mhb-veil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  padding: calc(1.6 * var(--u));
  background: rgba(8, 5, 20, .72);
  overflow: hidden;
  z-index: 20;
}
.mhb-veil.is-light { background: rgba(8, 5, 20, .45); }
.mhb-panel {
  margin: auto;
  width: min(100%, 44em);
  max-height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 1.1em;
  background: rgba(20, 14, 42, .95);
  box-shadow: 0 0 0 2px rgba(255, 226, 122, .55), 0 10px 40px rgba(0, 0, 0, .5);
  font-size: clamp(13px, calc(1.5 * var(--u)), 19px);
  line-height: 1.55;
}
.mhb-panel.is-wide { width: min(100%, 60em); }
.mhb-panel-title {
  flex: 0 0 auto;
  margin: 0; padding: .7em 1.1em .35em;
  font-size: clamp(18px, calc(2.6 * var(--u)), 34px);
  font-weight: 900; line-height: 1.2;
  color: #ffe066;
  text-align: center;
}
.mhb-panel-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding: .2em 1.3em .6em;
}
.mhb-panel-body p { margin: .35em 0; }
.mhb-panel-btns {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6em;
  padding: .55em 1em .9em;
}
.mhb-panel-btns .mhb-btn { flex: 0 1 auto; min-width: 7.5em; }

/* ステージ説明 */
.mhb-brief { display: flex; gap: 1.1em; align-items: center; }
.mhb-brief-icon { flex: 0 0 auto; width: clamp(64px, calc(10 * var(--u)), 128px); height: clamp(64px, calc(10 * var(--u)), 128px);
  border-radius: 1em; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); }
.mhb-brief-main { flex: 1 1 auto; min-width: 0; }
.mhb-brief-goal { margin: 0 0 .3em !important; font-size: 1.3em; font-weight: 900; }
.mhb-brief-goal em { font-style: normal; color: #ffe066; }
.mhb-brief-list { margin: .2em 0 0; padding-left: 1.2em; }
.mhb-brief-list li { margin: .15em 0; }
.mhb-note { color: #e6ddff; font-size: max(12px, .92em); }
.mhb-update { display: inline-block; margin-bottom: .4em !important; padding: .15em .7em; border-radius: 999px; background: #ff7aa8; color: #2a0716; font-weight: 900; }

/* 結果 */
.mhb-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mhb-table td { padding: .2em .3em; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mhb-table td:last-child { text-align: right; font-weight: 700; }
.mhb-table tr.is-total td { border-bottom: 0; font-size: 1.2em; color: #ffe066; font-weight: 900; }
.mhb-new { display: inline-block; margin-left: .4em; padding: 0 .5em; border-radius: 999px; background: #ff7aa8; color: #2a0716; font-size: .8em; font-weight: 900; }

/* ステージえらび・イベント一覧 */
.mhb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr)); gap: .6em; }
.mhb-card {
  appearance: none; -webkit-appearance: none;
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: .15em;
  min-height: 4.6em;
  padding: .55em .7em .55em 3.4em;
  border-radius: .8em;
  border: 2px solid rgba(255, 255, 255, .25);
  background: rgba(40, 28, 80, .92);
  color: #fff; font: inherit; text-align: left;
  cursor: pointer; touch-action: manipulation;
}
.mhb-card:hover { border-color: #ffe066; }
.mhb-card[disabled] { cursor: default; opacity: .55; border-style: dashed; }
.mhb-card canvas { position: absolute; left: .45em; top: 50%; transform: translateY(-50%); width: 2.6em; height: 2.6em; }
.mhb-card b { font-size: 1em; line-height: 1.25; }
.mhb-card span { font-size: max(12px, .82em); color: #e6ddff; }
.mhb-card .mhb-stars { color: #ffe066; }
.mhb-star-note { color: #ffe066; }   /* ★が増えた・ファイナルスパークの一言（2026-09-25） */

/* 設定 */
.mhb-set { display: grid; grid-template-columns: auto 1fr; gap: .55em .9em; align-items: center; }
.mhb-set label { font-weight: 700; }
.mhb-toggle { justify-self: start; min-width: 6em; }
.mhb-toggle[aria-pressed="true"] { background: linear-gradient(180deg, #5fd08a, #2f9c5a); border-color: #c9ffd9; color: #07230f; }
.mhb-range { width: 100%; accent-color: #ffd84a; min-height: 32px; touch-action: pan-x; }

/* お祝い */
.mhb-clear-art {
  position: relative; border-radius: .8em; overflow: hidden;
  aspect-ratio: 16 / 9; width: min(100%, 26em); margin: 0 auto .5em;
  background: #20183c center / cover no-repeat;
  box-shadow: 0 0 0 2px rgba(255, 226, 122, .6);
}
.mhb-clear-art p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 !important; padding: .4em; text-align: center;
  font-size: 1.9em; font-weight: 900; color: #ffe066; background: rgba(14, 10, 32, .82); text-shadow: 0 2px 0 #2b1a55; }
/* 旅の記録: 左（42%）に絵と合計・評価、右（58%）に7つのステージを1行ずつ。送らずに全部見える並び（2026-09-24） */
.mhb-jwrap { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: .5em 1.1em; align-items: start; }
.mhb-jside .mhb-clear-art { width: 100%; margin: 0 0 .25em; }
.mhb-jside .mhb-clear-art p { font-size: 1.5em; padding: .25em; }
.mhb-jnote { text-align: center; margin: .15em 0 0 !important; word-break: keep-all; overflow-wrap: anywhere; }   /* 読点で折る（語の途中で折らない） */
.mhb-jhead { display: flex; align-items: baseline; justify-content: space-between; gap: .6em; margin: 0 0 .3em !important; font-weight: 900; }
.mhb-jhead span { font-size: max(12px, .85em); font-weight: 700; color: #ffe066; }
.mhb-journey { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2em; }
.mhb-jrow {
  display: grid; grid-template-columns: 1.7em minmax(0, 1fr) auto auto; align-items: center; gap: .55em;
  padding: .15em .7em .15em .35em; border-radius: .5em; line-height: 1.45;
  background: rgba(40, 28, 80, .92); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16);
  opacity: 0; transform: translateX(8px); transition: opacity .35s, transform .35s;
}
.mhb-jrow.is-on { opacity: 1; transform: none; }
.mhb-jrow canvas { width: 1.7em; height: 1.7em; }
.mhb-jrow b { display: flex; min-width: 0; white-space: nowrap; }
.mhb-jrow b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }         /* 名前は省略しても、★は残す */
.mhb-jrow .mhb-stars { flex: 0 0 auto; font-style: normal; color: #ffe066; margin-left: .2em; }
.mhb-jrow > span { white-space: nowrap; color: #e6ddff; font-variant-numeric: tabular-nums; }
.mhb-jrow > .mhb-jscore { min-width: 4.4em; text-align: right; color: #fff; font-weight: 700; }
.mhb-screen.is-tiny .mhb-journey { gap: .12em; }                                       /* とても低い画面: 7段が送らずに入るように */
.mhb-screen.is-tiny .mhb-jrow { padding-top: .05em; padding-bottom: .05em; }
.mhb-screen.is-tiny .mhb-jitem { display: none; }                                       /* アイテムの名前は省く（左の絵で分かる）。ステージ名を省略させない */
.mhb-screen.is-tiny .mhb-jside .mhb-clear-art { width: 88%; margin-left: auto; margin-right: auto; }
.mhb-screen.is-tiny .mhb-jnote { display: none; }                                       /* 評価が2行になると入らないので、ヒントの一言は省く */
.mhb-rank { margin: .1em 0 .1em !important; text-align: center; font-size: 1.35em; font-weight: 900; color: #ffe066; opacity: 0; transition: opacity .5s; }
.mhb-rank.is-on { opacity: 1; }
.mhb-total { margin: .15em 0 0 !important; text-align: center; font-size: 1.1em; font-weight: 700; }

/* ---------- イベント ---------- */
.mhb-event {
  position: absolute; inset: 0; z-index: 40;
  background: #000;
  overflow: hidden;
}
.mhb-ev-media { position: absolute; inset: 0; }
.mhb-ev-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.mhb-ev-video.is-off { visibility: hidden; }
.mhb-ev-slides { position: absolute; inset: 0; overflow: hidden; }
.mhb-slide {
  position: absolute; inset: 0;
  background: #000 center / cover no-repeat;
  opacity: 0;
  transition: opacity .45s linear;
}
.mhb-slide.is-on { opacity: 1; }
.mhb-slide.is-move { animation: mhbKen 5.2s linear both; }
@keyframes mhbKen { from { transform: scale(1.0) translateX(0); } to { transform: scale(1.07) translateX(-1.2%); } }
/* ★まん中ぞろえは left:0・right:0・margin:auto（left:50% と translate だと、字幕の幅が画面の半分で頭打ちになり、
   せまい画面で「これで終わりだ／ぜ！」と折れた。2026-09-25） */
.mhb-ev-sub {
  position: absolute; left: 0; right: 0; bottom: calc(3.2 * var(--u));
  width: fit-content; margin: 0 auto;
  max-width: 86%;
  display: flex; align-items: baseline; gap: .6em;
  padding: .45em 1.1em;
  border-radius: .7em;
  background: rgba(10, 7, 22, .84);
  font-size: clamp(15px, calc(2.4 * var(--u)), 32px);
  font-weight: 700; line-height: 1.35;
  color: #fff;
  pointer-events: none;
}
.mhb-ev-who { flex: 0 0 auto; font-size: max(12px, .7em); color: #ffe066; }
.mhb-ev-line { white-space: normal; }
/* ★ボタンの列は、一時停止・「再生する」の暗い幕（.mhb-ev-state）より上。幕の下に入ると、止めている間はスキップが押せない（2026-09-24 tools/check.mjs で見つけた） */
.mhb-ev-ui {
  position: absolute; right: calc(1 * var(--u)); top: calc(1 * var(--u));
  z-index: 2;
  display: flex; gap: .5em;
}
.mhb-evbtn {
  min-height: clamp(40px, calc(4.4 * var(--u)), 52px);
  padding: .2em 1em;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .6);
  background: rgba(10, 7, 22, .84);
  color: #fff; font: inherit; font-weight: 700;
  font-size: clamp(13px, calc(1.45 * var(--u)), 18px);
  cursor: pointer; touch-action: manipulation;
}
.mhb-evbtn-skip { border-color: #ffe066; }
.mhb-ev-hint {
  position: absolute; left: calc(1 * var(--u)); top: calc(1.2 * var(--u));
  margin: 0; padding: .25em .8em; border-radius: 999px;
  background: rgba(10, 7, 22, .78); color: #fff;
  font-size: clamp(12px, calc(1.3 * var(--u)), 16px);
  pointer-events: none;
}
.mhb-ev-hint:empty { display: none; }
.mhb-ev-state {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em;
  background: rgba(0, 0, 0, .45);
}
.mhb-ev-statetext { margin: 0; padding: .3em .9em; border-radius: .6em; background: rgba(10, 7, 22, .84); font-weight: 700;
  font-size: clamp(13px, calc(1.5 * var(--u)), 19px); text-align: center; }
.mhb-ev-cover { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s ease-out; }
.mhb-ev-cover.is-white { background: #fffbe8; }
.mhb-ev-cover.is-on { opacity: 1; transition: none; }

/* ---------- 縦持ち ---------- */
.mhb-rotate {
  position: absolute; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, #1c1438, #0d0a1c);
  text-align: center;
}
.mhb-rotate-in { max-width: 22em; }
.mhb-rotate-main { margin: 18px 0 8px; font-size: 22px; font-weight: 900; color: #ffe066; }
.mhb-rotate-sub { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #fff; }
.mhb-rotate .mhb-btn { min-height: 44px; font-size: 16px; }   /* ★回転の案内は遊ぶ画面の外なので --u が届かない。大きさを直に書く */
.mhb-rotate-phone { width: 64px; height: 104px; margin: 0 auto; border: 5px solid #fff; border-radius: 14px; position: relative; animation: mhbTurn 2.2s ease-in-out infinite; }
.mhb-rotate-phone i { position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; margin-left: -7px; border-radius: 2px; background: #fff; }
@keyframes mhbTurn { 0%, 25% { transform: rotate(0); } 55%, 90% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .mhb-slide.is-move { animation: none; }
  .mhb-spark.is-ready { animation: none; }
  .mhb-rotate-phone { animation: none; transform: rotate(-90deg); }
}
.mhb-app.is-lowfx .mhb-slide.is-move { animation: none; }
.mhb-app.is-lowfx .mhb-spark.is-ready { animation: none; }

/* ---------- 低い画面（横持ちのスマホ） ---------- */
.mhb-screen.is-short .mhb-title-sub { display: none; }        /* 低い画面: 「非公式二次創作」の表記は下のクレジットに任せる（ボタンを送らずに押せるように） */
.mhb-screen.is-short .mhb-title-lead { margin: .3em 0 .6em; }
/* とても低い画面（高さ380未満）: 題を1行に。1行に入る大きさ＝題の幅（約10.7字ぶん）が右側の幅に入る大きさ */
.mhb-screen.is-tiny .mhb-title-in { padding-top: calc(1.2 * var(--u)); }
.mhb-screen.is-tiny .mhb-title-main { font-size: calc(3.7 * var(--u)); white-space: nowrap; }
.mhb-screen.is-tiny.is-narrow .mhb-title-main { font-size: calc(4.6 * var(--u)); }
.mhb-screen.is-tiny .mhb-title-main br { display: none; }
.mhb-screen.is-tiny .mhb-title-note { margin-top: .4em; }
.mhb-screen.is-short .mhb-title-btns { gap: 6px; }
.mhb-screen.is-short .mhb-title-btns .mhb-btn { min-height: 40px; padding-top: .2em; padding-bottom: .2em; }
.mhb-screen.is-short .mhb-panel-title { padding-top: .45em; }
.mhb-screen.is-short .mhb-veil { padding: 8px; }
.mhb-screen.is-narrow .mhb-title-in { width: 60%; }
.mhb-screen.is-narrow .mhb-title-bg::after {
  background: linear-gradient(90deg, rgba(14, 10, 32, 0) 0%, rgba(14, 10, 32, 0) 30%, rgba(14, 10, 32, .86) 41%, rgba(14, 10, 32, .9) 100%);
}
.mhb-screen.is-narrow .mhb-stagename { display: none; }

/* ---------- とても小さな遊ぶ画面（2026-09-25） ----------
   WordPress の中の横持ちの電話は、下の固定広告と、ブラウザのアドレス欄のぶん、遊ぶ画面が 230〜300px の高さになる
   （単体のページの検査は 568x319 までしか見ていなかった。tools/check.mjs の 552x230e・651x285e・828x300e で見つけた）。
   is-slim＝幅 460 未満、is-mini＝高さ 262 未満（js/game.js の fitScreen） */
.mhb-screen.is-slim .mhb-hide-slim { display: none; }                        /* 「ほかのゲームで遊ぶ」→「ほかのゲーム」（2つならんだボタンに入らない） */
.mhb-screen.is-slim .mhb-ev-hint { top: calc(1 * var(--u) + 46px); }         /* イベントの左上の案内は、ボタンの列にとどくので、その下へ */
.mhb-screen.is-mini .mhb-title-lead,
.mhb-screen.is-mini .mhb-title-note { display: none; }                      /* 題の下の一言と「全ステージクリア」の一言は省く（ボタンを送らずに押せるように） */
.mhb-screen.is-mini .mhb-title-btns { gap: 5px; }
.mhb-screen.is-mini .mhb-credit { padding-top: .15em; padding-bottom: .15em; }
/* 旅の記録（低い画面）: 題を小さく、7段の絵と行を詰め、ボタンを1列に */
.mhb-screen.is-tiny .mhb-panel[data-veil="clear2"] .mhb-panel-title { padding: .35em 1em .05em; font-size: clamp(16px, calc(2.2 * var(--u)), 24px); }
.mhb-screen.is-tiny .mhb-panel[data-veil="clear2"] .mhb-panel-body { padding-bottom: .2em; }
.mhb-screen.is-tiny .mhb-panel[data-veil="clear2"] .mhb-panel-btns { padding: .3em .8em .5em; gap: .45em; }
.mhb-screen.is-tiny .mhb-panel[data-veil="clear2"] .mhb-panel-btns .mhb-btn { min-width: 0; padding-left: .85em; padding-right: .85em; }
.mhb-screen.is-tiny .mhb-jhead { margin-bottom: .15em !important; }
.mhb-screen.is-tiny .mhb-jrow { line-height: 1.25; }
.mhb-screen.is-tiny .mhb-jrow canvas { width: 1.3em; height: 1.3em; }
.mhb-screen.is-tiny .mhb-rank { font-size: 1.2em; line-height: 1.3; }
/* とても低い画面: 「おめでとう！」の題は省き（左に「全ステージ クリア！」がある）、絵は帯にする。
   それでも7段は入りきらないので、7段だけを送れるようにする（合計・評価・ボタンは送らずに見える） */
.mhb-screen.is-mini .mhb-panel[data-veil="clear2"] .mhb-panel-title { display: none; }
.mhb-screen.is-mini .mhb-panel[data-veil="clear2"] .mhb-panel-body { display: flex; flex-direction: column; overflow: hidden; padding-top: .5em; }
.mhb-screen.is-mini .mhb-jwrap { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.mhb-screen.is-mini .mhb-jmain { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.mhb-screen.is-mini .mhb-journey { flex: 1 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; padding-right: 2px; }
.mhb-screen.is-mini .mhb-jside .mhb-clear-art { aspect-ratio: auto; width: 100%; }
.mhb-screen.is-mini .mhb-jside .mhb-clear-art p { position: static; font-size: 1.15em; }
.mhb-screen.is-slim .mhb-jrow > span:not(.mhb-jscore) { display: none; }       /* とてもせまい: 集めた数は省いて、ステージ名を「魔…」にしない */

/* ---------- ゲームの外の説明文 ---------- */
.mhb-doc {
  width: min(100%, 820px);
  margin: 0 auto;
  padding: 28px 18px 60px;
  color: #efeaff;
  line-height: 1.8;
  font-size: 16px;
  box-sizing: border-box;
}
.mhb-doc h2 { margin: 1.6em 0 .5em; font-size: 20px; color: #ffe066; }
.mhb-doc dt { font-weight: 700; margin-top: .6em; }
.mhb-doc dd { margin: 0 0 0 1em; }
.mhb-doc-note { margin-top: 2em; font-size: 14px; color: #d8cff5; }
html.is-embed .mhb-doc { display: none; }