/* ===== 共通ナビ（<<, <, >） ===== */
.mh-navcluster {
  position: fixed;
  inset: 12px auto auto 12px; /* 左上固定 */
  z-index: 9999;
  display: inline-flex;
  gap: 8px;
  background: transparent;
  transition: opacity .2s ease, transform .2s ease;
}

.mh-navcluster.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-120%);
}

.mh-navbtn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px; height: 44px;      /* タップ領域 */
  border-radius: 10px;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  color: #111;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  backdrop-filter: blur(6px);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.mh-navbtn:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.12); }
.mh-navbtn:active { transform: translateY(1px); }

.mh-navbtn.is-disabled {
  opacity: .45;
  pointer-events: none;
}

.mh-navlevel {
  font-weight: 600;
  color: #1f2933;
}

/* 小さい横画面（スマホ横持ち等） */
@media (max-height: 480px) and (orientation: landscape) {
  .mh-navcluster { inset: 8px auto auto 8px; gap: 6px; }
  .mh-navbtn { width: 40px; height: 40px; font-size: 16px; }
}

/* ダーク */
@media (prefers-color-scheme: dark) {
  .mh-navbtn {
    color: #fff;
    background: rgba(18,18,18,0.75);
    border-color: rgba(255,255,255,0.08);
  }

  .mh-navlevel { color: #f9fafb; }
}

.mh-cleared-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}