/* =========================================================
   見えるオリパ 盤面（現在の状況）
   - 賞別サマリー / フィルタ / 100番ブロックナビ / タイルグリッド
   ========================================================= */

:root {
    --mb-blue: #0062eb;
    --mb-blue-light: #89d0ff;
    --mb-blue-pale: #eef7ff;
    --mb-red: #e50012;
    --mb-gray: #9a9a9a;
    --mb-gray-light: #f1f1f1;
    --mb-header-h: 50px;
}
@media screen and (max-width: 768px) {
    :root { --mb-header-h: 85px; }
}

.mieru-board { position: relative; }

/* ---------- 賞別サマリー ---------- */
.mieru-summary { margin-top: 1rem; }
.mieru-summary__head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 14px; margin-bottom: .5rem;
}
.mieru-summary__head b { font-size: 20px; color: var(--mb-red); }
.mieru-summary__list {
    display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.mieru-summary__item {
    flex: 0 0 auto; width: 104px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 6px; border: 2px solid #ddd; border-radius: 10px; background: #fff;
    font-size: 12px; line-height: 1.2; text-align: center; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.mieru-summary__item:hover { border-color: var(--mb-blue-light); }
.mieru-summary__item.is-active { border-color: var(--mb-blue); background: var(--mb-blue-pale); }
.mieru-summary__item.is-empty { opacity: .5; }
.mieru-summary__item.is-empty .mieru-summary__count { color: var(--mb-gray); }
.mieru-summary__thumb {
    width: 56px; height: 78px; display: flex; align-items: center; justify-content: center;
    background: var(--mb-gray-light); border-radius: 4px; overflow: hidden;
}
.mieru-summary__thumb img { width: 100%; height: 100%; object-fit: contain; }
.mieru-summary__thumb--all {
    font-size: 22px; font-weight: 700; color: var(--mb-blue);
}
.mieru-summary__label {
    font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; max-width: 100%; word-break: break-all;
}
.mieru-summary__label--rank { color: var(--mb-red); }
.mieru-summary__count { font-size: 12px; }
.mieru-summary__count b { font-size: 15px; color: var(--mb-red); }
.mieru-summary__kinds { font-size: 10px; color: #666; }
.mieru-scroll-hint { text-align: center; font-size: 11px; color: #777; margin: 0 0 4px; letter-spacing: .05em; }
.mieru-scroll-hint--compact { margin: 0; font-size: 10px; }
.mieru-scroll-hint[hidden] { display: none !important; }

/* ---------- ツールバー（追従） ---------- */
.mieru-toolbar {
    position: sticky; top: var(--mb-header-h); z-index: 5;
    background: rgba(255,255,255,.96); backdrop-filter: blur(4px);
    border-bottom: 1px solid #e3e3e3; margin: 0 -15px; padding: 6px 15px 6px;
}
.mieru-toolbar__row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; font-size: 13px;
}
.mieru-toolbar__row label { display: inline-flex; align-items: center; gap: 4px; margin: 0; cursor: pointer; font-size: 13px; color: #333; }
.mieru-toolbar__row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--mb-blue); }
.mieru-toolbar__count { margin-left: auto; color: #555; white-space: nowrap; }
.mieru-toolbar__blocks {
    display: flex; gap: 6px; overflow-x: auto; padding: 6px 0 4px; scrollbar-width: none;
}
.mieru-toolbar__blocks::-webkit-scrollbar { display: none; }
.mieru-block-chip {
    flex: 0 0 auto; border: 1px solid #cfd8e3; border-radius: 999px; background: #fff;
    padding: 3px 10px; font-size: 12px; line-height: 1.2; cursor: pointer; white-space: nowrap;
    display: inline-flex; flex-direction: column; align-items: center;
}
.mieru-block-chip small { font-size: 10px; color: #666; }
.mieru-block-chip.is-current { border-color: var(--mb-blue); background: var(--mb-blue); color: #fff; }
.mieru-block-chip.is-current small { color: #dbeeff; }
.mieru-block-chip.is-empty { opacity: .4; }
.mieru-block-chip .hit { color: var(--mb-red); font-weight: 700; }
.mieru-block-chip.is-current .hit { color: #ffe08a; }
.mieru-next-hit {
    border: 2px solid var(--mb-red); color: var(--mb-red); background: #fff; border-radius: 999px;
    padding: 3px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.mieru-next-hit:disabled { opacity: .4; cursor: default; }

/* ---------- グリッド ---------- */
/* 従来どおり 5 列・全番号を画像付きで表示する */
.mieru-grid {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 8px; margin-top: 10px; align-items: end;
}

.mieru-block-head {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--mb-blue);
    margin-top: 6px; scroll-margin-top: calc(var(--mb-header-h) + 92px);
}
.mieru-block-head::after { content: ""; flex: 1; height: 2px; background: var(--mb-blue-light); }
.mieru-block-head small { font-weight: 400; color: #666; }

.mieru-tile {
    text-align: center; position: relative; cursor: pointer; min-width: 0;
    scroll-margin-top: calc(var(--mb-header-h) + 100px);
}
.mieru-tile[hidden], .mieru-block-head[hidden] { display: none !important; }
.mieru-tile__img { position: relative; width: 100%; aspect-ratio: 600 / 840; background: #f7f7f7; border-radius: 4px; overflow: hidden; }
.mieru-tile__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mieru-tile__label {
    position: absolute; left: 4px; top: 4px; background: #ff0; color: var(--mb-red);
    font-size: 11px; font-weight: 700; line-height: 1; padding: .2em .4em; border-radius: 2px;
    max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mieru-tile__no { display: block; font-size: 13px; line-height: 1.3; margin-top: 2px; }
.mieru-tile.is-got .mieru-tile__no { color: var(--mb-gray); }
.mieru-tile.is-flash .mieru-tile__img { outline: 3px solid var(--mb-red); outline-offset: 1px; animation: mieru-flash 1.2s ease-out 1; }
@keyframes mieru-flash { 0% { box-shadow: 0 0 0 0 rgba(229,0,18,.6);} 100% { box-shadow: 0 0 0 14px rgba(229,0,18,0);} }

/* 該当なし */
.mieru-empty { text-align: center; color: #666; padding: 2rem 0; font-size: 14px; }

/* ---------- 画像プレビュー ---------- */
.mieru-preview {
    position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.75);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.mieru-preview[hidden] { display: none !important; }
.mieru-preview__body {
    background: #fff; border-radius: 12px; max-width: 360px; width: 100%; padding: 14px; text-align: center;
    max-height: 90vh; overflow: auto;
}
.mieru-preview__body img { max-width: 100%; max-height: 60vh; object-fit: contain; }
.mieru-preview__no { font-size: 20px; font-weight: 700; margin-top: 6px; }
.mieru-preview__rank { color: var(--mb-red); font-weight: 700; }
.mieru-preview__name { font-size: 13px; color: #333; margin-top: 2px; word-break: break-all; }
.mieru-preview__close { margin-top: 10px; border: 1px solid #ccc; border-radius: 999px; padding: 6px 20px; background: #fff; font-size: 14px; }

/* ---------- 封筒選択 ---------- */
.mieru-env-toolbar { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid #e3e3e3; padding: 6px 0; }
.mieru-env-toolbar__row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mieru-env-toolbar__count { margin-left: auto; white-space: nowrap; }
.mieru-env-toolbar__count b { color: var(--mb-red); font-size: 18px; }
.mieru-env-block { scroll-margin-top: calc(var(--mb-header-h) + 80px); }
.mieru-env-block__head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--mb-blue); margin: 14px 0 6px; }
.mieru-env-block__head::after { content: ""; flex: 1; height: 2px; background: var(--mb-blue-light); }
.mieru_envelope img { width: 100%; height: auto; display: block; }