/* v5 は星をやめたので、結果の画面の3つのますは「どの段までクリアしたか」を表す。
   しょきゅう・ちゅうきゅう・じょうきゅう の3つで、クリアしたますにチェックが入る。

   **星の絵（star-4.png）は使わない。** 星をやめたのに星の形で出すと、
   星がまだあるように見える。台（丸いメダル）と色の並び（緑→水色→ピンク）は
   そのまま引き継いで、絵だけチェックに差し替えている。

   ゲーム本体の <style> より後ろで読むこと（同じ強さの指定を上書きするため）。
   ゲーム4本と、地図のポップアップで共通。 */

.star-line i,
.star-burst__row i,
.sheet__stars i {
    /* 2ドットぶんの太さで描いたチェック。ぼかさない。 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='1' y='4' width='1' height='2' fill='%2333190e'/%3E%3Crect x='2' y='5' width='1' height='2' fill='%2333190e'/%3E%3Crect x='3' y='6' width='1' height='2' fill='%2333190e'/%3E%3Crect x='4' y='5' width='1' height='2' fill='%2333190e'/%3E%3Crect x='5' y='4' width='1' height='2' fill='%2333190e'/%3E%3Crect x='6' y='3' width='1' height='2' fill='%2333190e'/%3E%3Crect x='7' y='2' width='1' height='2' fill='%2333190e'/%3E%3C/svg%3E");
    background-size: 68% 68%;
    background-position: center;
    image-rendering: pixelated;
}

/* まだの段にも、**うすくチェックを出しておく**。
   台だけ灰色だと「ここに何が付くのか」が分からない。影のように
   出しておけば、クリアすると濃く付くことが見当で分かる。
   絵を薄くするのではなく、**うすい色で描いた別のチェック**に差し替える
   （背景の絵だけに opacity は効かせられないため）。 */
.star-line i.off,
.star-burst__row i.off,
.sheet__stars i.off {
    /* **位置も書き直すこと。** ゲーム側の `.off` が
       `background-position: 0 0`（シートの1コマ目を左上から出すための指定）を
       当てていて、ここで上書きしないとチェックが丸の左上に寄る。 */
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Crect x='1' y='4' width='1' height='2' fill='%23bdb8ae'/%3E%3Crect x='2' y='5' width='1' height='2' fill='%23bdb8ae'/%3E%3Crect x='3' y='6' width='1' height='2' fill='%23bdb8ae'/%3E%3Crect x='4' y='5' width='1' height='2' fill='%23bdb8ae'/%3E%3Crect x='5' y='4' width='1' height='2' fill='%23bdb8ae'/%3E%3Crect x='6' y='3' width='1' height='2' fill='%23bdb8ae'/%3E%3Crect x='7' y='2' width='1' height='2' fill='%23bdb8ae'/%3E%3C/svg%3E");
    background-color: #e4e2dd;
}

/* 色の並びは星のときと同じ（1つめ緑・2つめ水色・3つめピンク）。
   位置の指定（background-position）も同じ強さで打ち消すこと。 */
.star-line i.on:nth-child(1),
.star-burst__row i.on:nth-child(1),
.sheet__stars i.on:nth-child(1) { background-color: #17cf62; background-position: center; }
.star-line i.on:nth-child(2),
.star-burst__row i.on:nth-child(2),
.sheet__stars i.on:nth-child(2) { background-color: #35c7e8; background-position: center; }
.star-line i.on:nth-child(3),
.star-burst__row i.on:nth-child(3),
.sheet__stars i.on:nth-child(3) { background-color: #ff6fa0; background-position: center; }

/* ── ますの下に、どの段かを書く ──────────────────────
   まっさらだと、丸が3つ並んでいるだけで何のますか分からない。
   名前を出しておけば「クリアするとチェックが付く」と見当が付く。

   **漢字にして ふりがな を振る。** ひらがなだけの「ちゅうきゅう」は
   6文字あって、ますの幅に収めると つぶれて読めなかった。
   漢字2文字なら大きく出せる。ふりがなが要るので `::after` ではなく
   本物の要素（`clear-marks.js` が書き出す `.cm__name`）にしてある。

   **色は生成りに決め打ちして、濃い縁取りで浮かせる。** 画面から受けつぐと、
   ポップアップの板では濃い茶になって、縁取りと重なって沈む。 */
.star-line,
.sheet__stars {
    gap: 10px;
}
.star-line .cm,
.sheet__stars .cm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.star-line .cm__name,
.sheet__stars .cm__name {
    font-size: 12px;
    line-height: 1.1;
    /* **うすくしない。** 0.75 まで落としていたら、木の板の上でも
       集中線の上でも読めなかった。太字にして、濃い縁取りで浮かせる。 */
    font-weight: bold;
    white-space: nowrap;
    /* **色は受けつがず、生成りに決め打ちする。** ポップアップの板は
       文字色が濃い茶（`--ink`）で、濃い縁取りと重なって沈んでいた。
       生成り＋濃い縁取りなら、木の板・暗いむらさき・明るい橙 のどれでも読める。 */
    color: #fff6e8;
    /* ぼかさない。8方向の縁取り（ほかの字と同じやりかた） */
    text-shadow:
        1px 0 0 #33190e, -1px 0 0 #33190e, 0 1px 0 #33190e, 0 -1px 0 #33190e,
        1px 1px 0 #33190e, -1px 1px 0 #33190e, 1px -1px 0 #33190e, -1px -1px 0 #33190e;
}
/* ふりがなは、ただでさえ小さいので これ以上は縮めない */
.star-line .cm__name rt,
.sheet__stars .cm__name rt { font-size: 8px; font-weight: normal; }

/* **ますの色は `.cm` の順番で決めること。** `<i>` を包んだので、
   ゲーム側の `i.on:nth-child(1)` は どの ます にも当たってしまう。 */
.star-line .cm i,
.sheet__stars .cm i { background-position: center; }
.star-line .cm:nth-child(1) i.on,
.sheet__stars .cm:nth-child(1) i.on { background-color: #17cf62; background-position: center; }
.star-line .cm:nth-child(2) i.on,
.sheet__stars .cm:nth-child(2) i.on { background-color: #35c7e8; background-position: center; }
.star-line .cm:nth-child(3) i.on,
.sheet__stars .cm:nth-child(3) i.on { background-color: #ff6fa0; background-position: center; }
.star-line .cm i.off,
.sheet__stars .cm i.off { background-color: #e4e2dd; background-position: center; }

/* 取ったときの幕（star-burst）は大きく見せる場なので、名前は出さない。 */
.star-burst__row i::after { content: none; }

/* ── むずかしさのボタンの、えらび分け ─────────────────────
   **えらべる段は色を残し、かぎの掛かった段だけ灰色にする。**
   前は「えらんでいないもの」も灰色に沈めていたが、かぎも灰色なので
   「押せないのか、えらんでいないだけなのか」が見分けられなかった。
   いまどれをえらんでいるかは、外わく（ゲーム側の `aria-pressed="true"`）と
   少しの明るさの差で出す。**彩度は落とさない。**
   クラス2つで書くのは、ゲーム側の `.diff-btn[aria-pressed="false"]`
   （詳しさ 0,2,0）と並べるため。 */
.diff-btn.diff-btn[aria-pressed="false"] {
    filter: brightness(0.93);
    opacity: 1;
}
.diff-btn.diff-btn[aria-pressed="true"] { filter: none; }

/* ── むずかしさの かぎ ──────────────────────────────
   **前の段をクリアするまで えらべない。** 4本とも同じ。
   **暗くしすぎないこと**（遊べないのではなく、まだ ひらいていないだけ）。
   地図のお店の かぎ と同じ見せかた（灰色0.85・明るさ0.68＋南京錠）に
   そろえてある。クラス2つで書くのは、ゲーム側の
   `.diff-btn[aria-pressed="false"]` と詳しさを並べるため。 */
/* `[aria-pressed]` を足して、上の「えらんでいないもの」より詳しくする
   （同じ詳しさだと、後ろに書いたほうが勝つ。かぎは必ず勝たせたい）。 */
.diff-btn.diff-btn--lock[aria-pressed] {
    position: relative;
    filter: grayscale(0.85) brightness(0.68);
    opacity: 1;
}
.diff-btn.diff-btn--lock[aria-pressed]::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 3px;
    width: 12px;
    height: 15px;
    background: url("lock.png") no-repeat center / contain;
    image-rendering: pixelated;
}

/* ── 地図のポップアップでは「押せないもの」に見せる ─────────────
   丸い台にベベルと落ち影を付けていたので、すぐ下の「あそぶ」と
   同じ押しものに見えていた（押しても何も起きない）。

   **出っぱりではなく、へこみにする。** 板にほった ます に ハンコを
   押していく、という見立て。厚み（落ち影）を付けないので押しものには
   見えず、それでいて ただの色の四角よりは 絵として持つ。
     - 線は その ます の地色を暗く詰めた色（一律の濃い茶では囲わない）
     - 明暗は 左上を暗く・右下を明るく（出っぱりの逆）
     - 角は `--px-round` の段で落とす（なめらかな丸みは当てない）
   ゲームの結果の画面は、ボタンと離れていて紛れないのでメダルのまま。 */
/* 角を落とす段。地図の `--px-round` と同じ形だが、**ゲーム側には
   その変数が無い**ので、ここに自前で持っている（4本＋地図で同じ見た目）。 */
.star-line i,
.star-burst__row i,
.sheet__stars i {
    --cm-step: polygon(
        6px 0, calc(100% - 6px) 0,
        calc(100% - 6px) 3px, calc(100% - 3px) 3px,
        calc(100% - 3px) 6px, 100% 6px,
        100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px),
        calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px),
        calc(100% - 6px) 100%, 6px 100%,
        6px calc(100% - 3px), 3px calc(100% - 3px),
        3px calc(100% - 6px), 0 calc(100% - 6px),
        0 6px, 3px 6px, 3px 3px, 6px 3px);

    box-sizing: border-box;
    /* 元は「丸い台にのせたメダル」だった。台の padding とその中への
       絵の置きかたを、額に合わせて打ち消しておく。 */
    padding: 0;
    background-origin: padding-box;
    /* 額のぶん中が狭くなるので、チェックも少し小さく */
    background-size: 58% 58%;
    /* 太い外わくと、その内がわの細い明かりで二重の額にする。
       **厚み（落ち影）は付けない。** 付けると押しものに戻ってしまう。
       ゲーム2本は `* { border-radius:0 !important }` を当てていて、
       メダル側が `50% !important` で勝っているので、ここも !important が要る。 */
    border: 4px solid var(--cm-rim, #9a948a);
    border-radius: 0 !important;
    clip-path: var(--cm-step);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}
/* 幕の ます は大きい（最大84px）ので、額も太くしないと細く見える */
.star-burst__row i { border-width: 6px; }

/* 線は その ます の地色を暗く詰めた色。一律の濃い茶では囲わない。 */
.star-line i.off,
.star-burst__row i.off,
.sheet__stars i.off { --cm-rim: #9a948a; }
.star-line i.on:nth-child(1),
.star-burst__row i.on:nth-child(1),
.sheet__stars i.on:nth-child(1) { --cm-rim: #0a6b31; }
.star-line i.on:nth-child(2),
.star-burst__row i.on:nth-child(2),
.sheet__stars i.on:nth-child(2) { --cm-rim: #146b84; }
.star-line i.on:nth-child(3),
.star-burst__row i.on:nth-child(3),
.sheet__stars i.on:nth-child(3) { --cm-rim: #a83457; }

.sheet__stars i { width: 38px; height: 38px; }

/* ── 次のお店が ひらいた知らせ ─────────────────────────
   中級をクリアした回だけ、画面いっぱいに出す。結果の画面に1行書いても
   気づかれないので、**かぎ が外れて落ちるところ**を見せる。
   出すのは「クリア！」の幕が閉じてから（ゲーム側で1.9びょう待っている）。 */
.unlock-note {
    position: fixed;
    inset: 0;
    z-index: 2147482100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
    text-align: center;
    /* **濃くすること。** .82 では後ろのタイトルが透けて、
       お店の名前が 地の札と重なって読めなかった。 */
    background: rgba(18, 9, 3, 0.93);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.unlock-note p { margin: 0; }

/* 地図のお店に出しているのと同じ南京錠。38x48 の1.5倍で出す。 */
.unlock-note__lock {
    display: block;
    width: 57px;
    height: 72px;
    background: url("lock.png") no-repeat center / contain;
    image-rendering: pixelated;
    /* ふるえてから、外れて落ちる。**ぼかさず段で動かす。**
       落ちるほうは待ち時間のあいだ効かないので、ふるえと重ねてよい。 */
    animation: unlockShake 0.1s steps(2, end) 7,
               unlockOpen 0.5s steps(5, end) 0.72s forwards;
}
@keyframes unlockShake {
    from { transform: translateX(-3px); }
    to { transform: translateX(3px); }
}
@keyframes unlockOpen {
    to { transform: translate(16px, 130px) rotate(40deg); opacity: 0; }
}

/* 字は かぎ が落ちきってから、順に出す。 */
.unlock-note__ttl {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffd84d;
    text-shadow: 2px 0 #33190e, -2px 0 #33190e, 0 2px #33190e, 0 -2px #33190e,
                 4px 4px #c06a12;
    animation: unlockPop 0.36s steps(5, end) 1.05s backwards;
}
/* どの お店が ひらいたのか、名前だけでなく**絵でも見せる**。
   地図のポップアップに出しているのと同じサムネ。
   枠は 地図の `.sheet__thumb` と同じ考え（線は引くが、厚みは付けない）。 */
.unlock-note__thumb {
    display: block;
    width: min(74%, 260px);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 4px solid #8a5a24;
    background: #f8e4be;
    image-rendering: pixelated;
    animation: unlockPop 0.4s steps(5, end) 1.2s backwards;
}

.unlock-note__name {
    font-size: 1.15rem;
    font-weight: bold;
    color: #fff6e8;
    text-shadow: 2px 0 #33190e, -2px 0 #33190e, 0 2px #33190e, 0 -2px #33190e;
    animation: unlockPop 0.36s steps(5, end) 1.5s backwards;
}
.unlock-note__name rt { font-size: 9px; }
.unlock-note__tap {
    font-size: 0.82rem;
    color: #ffd9a8;
    animation: unlockPop 0.36s steps(5, end) 1.8s backwards;
}
@keyframes unlockPop {
    from { transform: scale(0.2); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* **動きが終わるまでは閉じられない。** 閉じられるようになったら、
   そう言ってあげる（言わないと、いつまで見ているのか分からない）。 */
.unlock-note__close {
    font-size: 0.78rem;
    color: #ffd9a8;
    opacity: 0;
}
.unlock-note.is-ready { cursor: pointer; }
.unlock-note.is-ready .unlock-note__close {
    opacity: 1;
    animation: blinkTap 1s steps(1, end) infinite;
}
@keyframes blinkTap { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
    .unlock-note__lock { animation: unlockOpen 0.01s steps(1, end) forwards; }
    .unlock-note__ttl,
    .unlock-note__thumb,
    .unlock-note__name,
    .unlock-note__tap,
    .unlock-note__close { animation: none; }
}

/* ── テスト用：むずかしさの解放ボタン（公開前に消すこと）─────────
   「どの段までクリアしたことにするか」を その場で切り替える。
   地図のテスト用ボタンと同じく、**ふだん押すものと見分けられるよう
   地を桃色に**してある。タイトルの中に置いてあるので、
   遊びはじめれば自然に消える（`position: fixed` にしないこと）。 */
.test-unlock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.test-unlock b {
    font-size: 10px;
    color: #ffd9a8;
    text-shadow: 1px 1px 0 #33190e;
}
.test-unlock button {
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    padding: 5px 7px;
    color: #5a1030;
    background: #ffc2d6;
    border: 2px solid #8c2250;
    border-radius: 0 !important;
    cursor: pointer;
}
.test-unlock button[aria-pressed="true"] { background: #ff6fa0; color: #fff6e8; }

/* ── 結果の前の ひと呼吸（おわりの幕）──────────────────
   いきなり結果になると、遊んでいた指がそのまま「もういちど あそぶ」を
   押してしまう。**タップでは閉じない**（閉じられると意味が無い）。 */
.end-curtain {
    position: fixed;
    inset: 0;
    z-index: 2147482050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    background: rgba(18, 9, 3, 0.9);
    animation: endFade 0.18s steps(3, end);
}
.end-curtain__ttl {
    margin: 0;
    font-size: clamp(26px, 9vw, 40px);
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.08em;
    color: #ffd84d;
    text-shadow: 2px 0 #33190e, -2px 0 #33190e, 0 2px #33190e, 0 -2px #33190e,
                 5px 5px #c06a12;
    animation: endPop 0.3s steps(5, end);
}
@keyframes endFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes endPop { from { transform: scale(0.3); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .end-curtain, .end-curtain__ttl { animation: none; }
}

/* ── ミッションの数に届いた瞬間 ───────────────────────
   音だけだと、音を切っている子には伝わらない。
   数の札を1回だけ光らせる。**ぼかさず `steps` で切り替える。**
   付け直す前に `void offsetWidth` を挟むこと（2回目から動かなくなる）。 */
.goal-hit { animation: goalHit 0.72s steps(2, end) 1; }
@keyframes goalHit {
    0%, 100% { filter: none; }
    50% { filter: brightness(1.6) saturate(1.4); }
}
@media (prefers-reduced-motion: reduce) { .goal-hit { animation: none; } }

/* ── 遊んでいる間、いまのむずかしさを小さく出す（4本とも同じ）──────
   遊びはじめると どの段で遊んでいるのか分からなくなる、という声から。

   **置き場所は HUD のすぐ下の右はし**（`top: 78px`）。4本とも HUD の
   下ばしが 64〜73px なので、ここなら どれともぶつからない。
   コロッケのフィーバーのゲージは まん中よせなので、右はしは空いている。

   **札にはしない。** 枠を付けると HUD と同じ重さになって、画面の上が
   札だらけになる。色と縁取りだけで読ませる（BEST やコンボと同じ考え）。
   **地は明るいところも暗いところもある**ので、明るい字＋濃い縁取りにする。
   色は むずかしさのボタンと同じ（初級=緑／中級=金／上級=橙）。 */
.level-tag {
    position: absolute;
    top: 78px;
    right: 12px;
    z-index: 6;
    display: none;
    font-weight: bold;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    pointer-events: none;
    white-space: nowrap;
    color: #ffe9c0;
    text-shadow:
        2px 0 0 var(--c-ink, #2b1a14), -2px 0 0 var(--c-ink, #2b1a14),
        0 2px 0 var(--c-ink, #2b1a14), 0 -2px 0 var(--c-ink, #2b1a14),
        1px 1px 0 var(--c-ink, #2b1a14), -1px 1px 0 var(--c-ink, #2b1a14),
        1px -1px 0 var(--c-ink, #2b1a14), -1px -1px 0 var(--c-ink, #2b1a14);
}
body.playing .level-tag { display: block; }
.level-tag--0 { color: #5bea8d; }
.level-tag--1 { color: #ffd400; }
.level-tag--2 { color: #ff9a3c; }