/* パズルの一覧・解くページ(メッセージ欄・採点のマーク・成る駒のポップアップは lesson/css/lesson.css を使う) */

.puzzle-list {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 16px;
}

.puzzle-list-note {
    text-align: center;
}

.puzzle-pagination {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 20px 0;
}

/* カードの名前の右の「解いた」 */
.puzzle-solved {
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: normal;
}

.puzzle-heading {
    text-align: center;
}

/* 盤の下の「もう一度最初から」(前・一覧・次と並べる。並びは common/css/base.css の .page-navigation) */
.puzzle-icon-btn {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.puzzle-icon-btn:disabled {
    cursor: default;
    opacity: 0.4;
}

/* プレイヤーのパズルの一覧の「マイページへ」 */
.puzzle-back {
    margin: 20px 0;
    text-align: center;
}

/* 盤: board.css の #play-wrapper は height: 90vmin(対局画面向け)。このページは .content の幅(480px まで)で止まるので、
   PC・タブレットで高さだけ伸びて盤が縦長になる。解析ページ(replay.css)と同じく幅から高さを決める */
#play-wrapper {
    height: auto;
}

/* メッセージ欄の下の注記(再生されるのは読み筋)。下の .page-navigation(上の margin 20px)より 10px 離す */
.puzzle-note {
    max-width: 380px;
    margin: 1em auto 30px;
}