/* いちごパフェメーカー (#570)。game.css (sg- の部品) と一緒に、パフェのページだけで読む */

.pf-page {
    --pf-pink: #ffe4e6;
    --pf-border: #f3d3d8;
    --pf-panel: #ffffff;
    padding-top: 20px;
}

/* ボタンのアイコンの幅を先に取っておく。Font Awesome の CSS はあとから読む (template.html の media-swap) ので、
 * 読む前は幅 0 で、読んだときにボタンが広がる。作品のページのシェアの行は、それで「画像にする」が
 * 次の行へ折り返し、下の「自分のパフェを作る」とレシピが 54px ずれた (1280px)。
 * 真ん中に寄せた見出しと 3D の上の案内も、アイコンが広がると文字が横にずれるので同じにする */
.pf-page .sg-button > i,
.pf-challenge-entry-title > i,
.pf-today-title > i,
.pf-stage-hint > i {
    display: inline-block;
    width: 1em;
    text-align: center;
}

/* ── 見出し ── */
.pf-hero {
    max-width: 72rem;
    margin: 0 auto 12px;
    text-align: center;
}

.pf-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.3;
}

.pf-lead {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--sg-muted);
}

/* ── 並べ方 ──
 * スマホ: 3D の下に具を並べ、具を押しながら落ちるところが見えるよう 1 画面に収める
 * PC (1024px から): 左に 3D を大きく、右に具を並べる */
.pf-layout {
    display: grid;
    gap: 12px;
    /* タブレットでは横に広がりすぎないようにする (具のボタンが間のびする) */
    max-width: 40rem;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .pf-page {
        padding-top: 16px;
    }

    .pf-hero {
        margin-bottom: 16px;
    }

    .pf-title {
        font-size: 1.875rem;
    }

    .pf-lead {
        font-size: 0.9375rem;
    }

    .pf-layout {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 32px;
        align-items: start;
        max-width: 72rem;
    }
}

/* ── 3D のパフェ ── */
.pf-stage {
    position: relative;
}

.pf-canvas {
    display: block;
    width: 100%;
    /* 描く前から高さを決めて、レイアウトがずれないようにする。具を選ぶ場所が同じ画面に入る高さ。
     * svh を知らないブラウザ (iOS 15.3 まで) は、前の行の vh を使う */
    height: clamp(240px, calc(100vh - 470px), 460px);
    height: clamp(240px, calc(100svh - 470px), 460px);
    border-radius: 24px;
    background:
        radial-gradient(ellipse 60% 45% at 50% 42%, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(180deg, #fff7f8 0%, #ffe4e6 100%);
    /* 縦のスクロールと、2 本指の拡大はブラウザに任せる。横に動かしたら回す */
    touch-action: pan-y pinch-zoom;
    cursor: grab;
}

/* 作品のページは具のボタンが無いので、スマホでも 3D を高くする */
.pf-layout--work .pf-canvas {
    height: clamp(300px, 56vh, 520px);
    height: clamp(300px, 56svh, 520px);
}

@media (min-width: 1024px) {
    .pf-stage {
        position: sticky;
        top: 72px;
    }

    /* サイトのヘッダー・見出しの下に、画面の高さいっぱい */
    .pf-canvas {
        height: clamp(460px, calc(100vh - 176px), 700px);
        height: clamp(460px, calc(100svh - 176px), 700px);
        border-radius: 32px;
    }
}

.pf-canvas:active {
    cursor: grabbing;
}

.pf-canvas:focus-visible {
    outline: 3px solid var(--sg-red);
    outline-offset: 3px;
}

.pf-stage-hint {
    position: absolute;
    left: 50%;
    top: 12px;
    margin: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sg-muted);
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.pf-stage-hint.is-hidden {
    opacity: 0;
}

.pf-stage-note {
    margin: 12px 0 0;
    padding: 12px 16px;
    border-radius: 16px;
    background: #fff;
    font-size: 0.875rem;
    line-height: 1.7;
    text-align: center;
}

.pf-stage-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* ── 右の板 (PC) ── */
.pf-panel {
    min-width: 0;
}

.pf-panel-title {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--sg-muted);
}

@media (min-width: 1024px) {
    .pf-panel {
        padding: 24px;
        border-radius: 28px;
        background: var(--pf-panel);
        box-shadow: 0 10px 30px rgba(190, 18, 60, 0.08);
    }
}

/* ── グラスの中 (入れた具) ──
 * スマホ: 下の段から左へ並ぶ 6 つの帯。名前は読み上げだけ (下の「どの具を入れたか」は 3D と案内の文で分かる)
 * PC: グラスと同じく下から上へ積み、段の名前と具を出す */
.pf-slots {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

.pf-panel > .pf-panel-title:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.pf-slot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px dashed #e8b7c0;
}

.pf-slot--next {
    border-style: solid;
    border-color: var(--sg-red);
    animation: pf-blink 1.4s ease-in-out infinite;
}

.pf-slot--filled {
    border-style: solid;
    border-color: transparent;
}

.pf-slot-icon,
.pf-slot-label,
.pf-slot-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@keyframes pf-blink {
    50% { box-shadow: 0 0 0 3px rgba(190, 18, 60, 0.18); }
}

@media (min-width: 1024px) {
    .pf-panel > .pf-panel-title:first-child {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .pf-slots {
        display: flex;
        flex-direction: column-reverse;
        gap: 4px;
        margin-bottom: 14px;
    }

    .pf-slot {
        height: 34px;
        padding: 0 12px 0 6px;
        border-radius: 10px;
    }

    .pf-slot-icon,
    .pf-slot-label,
    .pf-slot-name {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .pf-slot-icon {
        width: 28px;
        height: 28px;
    }

    .pf-slot-label {
        width: 4.5em;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--sg-muted);
    }

    .pf-slot-name {
        font-size: 0.875rem;
        font-weight: 800;
    }

    .pf-slot--filled {
        background: #fff7f8;
    }

    .pf-slot--next .pf-slot-name {
        color: var(--sg-red);
    }
}

/* 3D を描けない端末 (JS が .is-flat を付ける) では、スマホでもグラスの中を名前の一覧で出す */
.pf-layout.is-flat .pf-panel > .pf-panel-title:first-child,
.pf-layout.is-flat .pf-slot-icon,
.pf-layout.is-flat .pf-slot-label,
.pf-layout.is-flat .pf-slot-name {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
}

.pf-layout.is-flat .pf-slots {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
    margin-bottom: 14px;
}

.pf-layout.is-flat .pf-slot {
    height: 34px;
    padding: 0 12px 0 6px;
    border-radius: 10px;
    background: #fff;
}

.pf-layout.is-flat .pf-slot-icon {
    width: 28px;
    height: 28px;
}

.pf-layout.is-flat .pf-slot-label {
    width: 4.5em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sg-muted);
}

.pf-layout.is-flat .pf-slot-name {
    font-size: 0.875rem;
    font-weight: 800;
}

/* 帯の色 (スマホ)。具の色に合わせる */
@media (max-width: 1023.98px) {
    .pf-layout:not(.is-flat) .pf-slot--cut-strawberry { background: linear-gradient(90deg, #d4122f, #ffc2c8 50%, #d4122f); }
    .pf-layout:not(.is-flat) .pf-slot--cream { background: #fffaf1; border-color: #eadfcc; }
    .pf-layout:not(.is-flat) .pf-slot--cornflakes { background: #e2a54c; }
    .pf-layout:not(.is-flat) .pf-slot--vanilla-ice { background: #fbe6ad; }
    .pf-layout:not(.is-flat) .pf-slot--strawberry-ice { background: #f8b4c3; }
    .pf-layout:not(.is-flat) .pf-slot--strawberry-sauce { background: #c3122f; }
    .pf-layout:not(.is-flat) .pf-slot--sponge { background: #f6d690; }
    .pf-layout:not(.is-flat) .pf-slot--strawberry-jelly { background: #e0233f; }
    .pf-layout:not(.is-flat) .pf-slot--topping.pf-slot--filled { background: linear-gradient(90deg, #fffaf0, #d4122f); }
}

/* ── 案内 ── */
.pf-status {
    min-height: 1.5em;
    margin: 0 0 10px;
    font-size: 0.875rem;
    font-weight: 800;
    text-align: center;
}

@media (min-width: 1024px) {
    .pf-status {
        font-size: 1rem;
        text-align: left;
    }
}

/* ── 具とてっぺんのボタン ── */
.pf-step-title {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--sg-muted);
}

.pf-choices {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

/* てっぺんは 2 列 × 2 段。具 (4 列 × 2 段) と入れ替わっても、下の「ひとつ戻す」「仕上げる」が動かない */
.pf-choices--topping {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pf-choice {
    /* 名前の字の大きさをボタンの幅から決める (cqi) */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 76px;
    padding: 6px 2px 8px;
    border: 1px solid var(--pf-border);
    border-radius: 16px;
    background: #fff;
    color: var(--sg-text);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pf-choice:hover:not(:disabled) {
    border-color: var(--sg-red);
    box-shadow: 0 6px 16px rgba(190, 18, 60, 0.12);
    transform: translateY(-2px);
}

.pf-choice:active:not(:disabled) {
    transform: scale(0.96);
}

.pf-choice:focus-visible {
    outline: 3px solid var(--sg-red);
    outline-offset: 2px;
}

.pf-choice:disabled {
    opacity: 0.45;
    cursor: default;
}

.pf-choice[aria-pressed="true"] {
    border-color: var(--sg-red);
    background: #fff1f2;
    box-shadow: inset 0 0 0 2px var(--sg-red);
}

.pf-choice-icon {
    display: block;
    width: 44px;
    height: 44px;
    /* 白い具 (生クリーム) が白いボタンに溶けないよう、淡いピンクの丸を敷く */
    border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, #ffe4e6 0%, #fff1f2 62%, rgba(255, 241, 242, 0) 72%);
}

.pf-choice-name {
    max-width: 100%;
    font-size: 0.6875rem;
    /* 7 文字 (コーンフレーク・いちごの山盛り) がボタンに収まる大きさまで小さくする。
     * 360px の画面でボタンは約 78px、320px では約 68px */
    font-size: min(0.6875rem, 12.5cqi);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .pf-choices {
        gap: 10px;
    }

    .pf-choice {
        min-height: 96px;
        gap: 4px;
        padding: 8px 4px 10px;
    }

    .pf-choice-icon {
        width: 56px;
        height: 56px;
    }

    .pf-choice-name {
        font-size: 0.75rem;
    }
}

/* 1024〜1279px は右の板が狭く、7 文字の名前 (コーンフレーク・いちごの山盛り) が 12px では入らない */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .pf-choice-name {
        font-size: 0.6875rem;
        font-size: min(0.75rem, 13cqi);
        letter-spacing: -0.03em;
    }
}

.pf-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    margin-top: 12px;
}

.pf-actions .sg-button {
    width: 100%;
}

@media (min-width: 1024px) {
    .pf-actions {
        margin-top: 20px;
        gap: 12px;
    }

    .pf-actions .sg-button {
        min-height: 52px;
        font-size: 1rem;
    }
}

/* ── 作品のページ ──
 * スマホ: 名前 → 3D → シェアとレシピ
 * PC: 3D を左に (2 行ぶん)、名前を右上、シェアとレシピを右下 */
@media (min-width: 1024px) {
    .pf-layout--work {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-areas:
            "stage head"
            "stage body";
        grid-template-rows: auto 1fr;
        row-gap: 24px;
    }

    .pf-layout--work .pf-stage { grid-area: stage; }
    .pf-layout--work .pf-canvas {
        height: clamp(460px, calc(100vh - 120px), 720px);
        height: clamp(460px, calc(100svh - 120px), 720px);
    }
    .pf-layout--work .pf-work-head { grid-area: head; }
    .pf-layout--work .pf-work-body { grid-area: body; }
}

.pf-work-head {
    text-align: center;
}

.pf-work-title {
    margin: 0 0 8px;
    font-size: 1.625rem;
    font-weight: 900;
    line-height: 1.3;
}

.pf-rate {
    max-width: 16rem;
    margin: 0 auto 8px;
}

.pf-rate-text {
    margin: 0 0 4px;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--sg-red);
}

.pf-rate-value {
    font-size: 1.75rem;
}

.pf-rate-meter {
    height: 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--pf-border);
    overflow: hidden;
}

.pf-rate-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #fb7185, var(--sg-red));
}

.pf-work-message {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--sg-muted);
}

@media (min-width: 1024px) {
    .pf-work-head {
        padding-top: 24px;
        text-align: left;
    }

    .pf-work-title {
        font-size: 2.25rem;
    }

    .pf-rate {
        margin: 0 0 12px;
    }
}

.pf-work-body .sg-share {
    margin-top: 4px;
}

.pf-share-status {
    min-height: 1.25em;
    margin: 8px 0 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--sg-red);
    text-align: center;
}

@media (min-width: 1024px) {
    .pf-share-status {
        text-align: left;
    }
}

.pf-make {
    display: flex;
    width: fit-content;
    margin: 16px auto 0;
}

.pf-work-body .pf-panel-title {
    margin-top: 28px;
}

.pf-recipe-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--pf-border);
}

.pf-recipe-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px;
    border-bottom: 1px solid var(--pf-border);
}

.pf-recipe-icon {
    flex: none;
    width: 36px;
    height: 36px;
}

.pf-recipe-label {
    flex: none;
    width: 4.5em;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--sg-muted);
}

.pf-recipe-name {
    font-size: 0.9375rem;
    font-weight: 800;
}

@media (min-width: 1024px) {
    .pf-work-body .sg-share {
        justify-content: flex-start;
    }

    .pf-make {
        margin-left: 0;
    }
}

/* ── ストーリーズ向けの画像 (<dialog>。showModal で開く) ── */
.pf-sheet {
    width: auto;
    max-width: min(22rem, calc(100vw - 32px));
    /* スマホではアドレスバーを除いた高さ (dvh) に収める。dvh を知らないブラウザは前の行の vh */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 0;
    pointer-events: auto;
    border: 0;
    border-radius: 20px;
    background: #fff;
}

/* <dialog> を知らないブラウザ (iOS 15.3 まで) では、閉じているときもふつうの要素として描かれるので隠す */
.pf-sheet:not([open]) {
    display: none;
}

.pf-sheet::backdrop {
    background: rgba(17, 24, 39, 0.6);
}

/* showModal を知らないブラウザ (iOS 15.3 まで) では、JS が open 属性とこのクラスで開く。そのときも画面の上に重ねる */
.pf-sheet.is-open-without-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    /* 上下に引き伸ばさず、中身の高さで真ん中に置く */
    height: -webkit-fit-content;
    height: fit-content;
    margin: auto;
    box-shadow: 0 0 0 100vmax rgba(17, 24, 39, 0.6);
}

/* 開いているあいだは、後ろのページをスクロールさせず、押させない (showModal の無いブラウザでも)。
 * スクロールバーの幅は残す (消えると幅が変わり、3D を描き直す) */
html.pf-sheet-open {
    overflow: hidden;
    scrollbar-gutter: stable;
}

html.pf-sheet-open body {
    pointer-events: none;
}

.pf-sheet-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.pf-sheet-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
}

.pf-sheet-image {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 12px;
    /* 長押しで保存できるように、選択を止めない */
    -webkit-touch-callout: default;
}

.pf-sheet-actions {
    display: flex;
    gap: 8px;
}

/* ── 記憶チャレンジ (#587) ──
 * hidden は game.css の .sg-page [hidden] (!important) が効くので、display を書いても隠れる */
/* 「もう一度」で 3D まで戻すとき、固定のヘッダー (48px) の下に入らないようにする */
.pf-stage {
    scroll-margin-top: 60px;
}

/* はじめる前はグラスを覆う (お手本の具が見えないように)。Tab の順のため HTML では 3D より前に置くので、
 * あとに置いた「なぞると回せます」(position: absolute) より上に重ねる */
.pf-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255, 247, 248, 0.86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-align: center;
}

.pf-cover-text {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--sg-text);
}

.pf-cover-text strong {
    margin: 0 2px;
    font-size: 1.375em;
    color: var(--sg-red);
}

.pf-cover-note {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sg-muted);
}

@media (min-width: 1024px) {
    /* 3D の角丸 (PC は 32px) にそろえる */
    .pf-cover {
        border-radius: 32px;
    }
}

/* お手本を見せている残りの秒数。上の「なぞると回せます」と重ならないよう下に置く */
.pf-countdown {
    position: absolute;
    left: 50%;
    bottom: 16px;
    margin: 0;
    padding: 6px 18px;
    border-radius: 999px;
    background: var(--sg-red);
    box-shadow: 0 6px 18px rgba(190, 18, 60, 0.25);
    font-size: 0.9375rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    transform: translateX(-50%);
}

.pf-countdown span {
    margin: 0 3px;
    font-size: 1.375em;
    font-variant-numeric: tabular-nums;
}

/* 答え合わせのあと、3D に出すパフェ (あなた・お手本) を切り替える */
.pf-compare-toggle {
    position: absolute;
    left: 50%;
    bottom: 16px;
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 6px 18px rgba(190, 18, 60, 0.12);
    transform: translateX(-50%);
}

.pf-compare-toggle-button {
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--sg-muted);
    white-space: nowrap;
    cursor: pointer;
}

.pf-compare-toggle-button[aria-pressed="true"] {
    background: var(--sg-red);
    color: #fff;
}

.pf-compare-toggle-button:focus-visible {
    outline: 3px solid var(--sg-red);
    outline-offset: 2px;
}

/* 3D を描けない端末では、覆いと残りの秒数をふつうの並びに置く */
.pf-layout.is-flat .pf-cover {
    position: static;
    margin-top: 12px;
}

.pf-layout.is-flat .pf-countdown {
    position: static;
    display: block;
    width: fit-content;
    margin: 12px auto 0;
    transform: none;
}

/* 答え合わせのあとは、グラスの中 (くらべの一覧と重なる) を隠し、案内の文は読み上げだけにする */
.pf-layout.is-result .pf-slots,
.pf-layout.is-result .pf-panel > .pf-panel-title:first-child {
    display: none;
}

.pf-layout.is-result .pf-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* お手本を見せているあいだのグラスの中 (「？」) */
.pf-slot--hidden .pf-slot-name {
    color: var(--sg-muted);
}

.pf-result:focus {
    outline: none;
}

.pf-result-score {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--sg-muted);
    text-align: center;
}

.pf-result-score strong {
    margin: 0 4px;
    font-size: 3rem;
    line-height: 1.1;
    color: var(--sg-red);
    font-variant-numeric: tabular-nums;
}

.pf-result-rank {
    margin: 2px 0 0;
    font-size: 1.125rem;
    font-weight: 900;
    text-align: center;
}

.pf-result-message {
    margin: 6px 0 16px;
    font-size: 0.875rem;
    line-height: 1.7;
    text-align: center;
}

/* お手本とのくらべ (作品のページのレシピと同じく、上のてっぺんから) */
.pf-compare-list {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--pf-border);
}

.pf-compare-item {
    display: grid;
    /* 段の名前 (「てっぺん」0.75rem で 4 文字) の幅。em だとこの行の 16px で数えて広すぎ、320px で具の名前が折れる */
    grid-template-columns: 28px 3.25rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--pf-border);
}

.pf-compare-icon {
    width: 28px;
    height: 28px;
}

.pf-compare-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sg-muted);
}

.pf-compare-name {
    font-size: 0.875rem;
    font-weight: 800;
}

.pf-compare-mark {
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

/* 白地で 4.5:1 を超える緑と橙 */
.pf-compare-item--exact .pf-compare-mark {
    color: #15803d;
}

.pf-compare-item--moved .pf-compare-mark {
    color: #b45309;
}

.pf-compare-item--extra .pf-compare-mark,
.pf-compare-item--miss .pf-compare-mark {
    color: var(--sg-muted);
}

.pf-compare-model {
    grid-column: 3 / -1;
    font-size: 0.75rem;
    color: var(--sg-muted);
}

.pf-result-model {
    margin: 0;
    font-size: 0.875rem;
    text-align: center;
}

.pf-result-model a {
    font-weight: 800;
    color: var(--sg-red);
}

/* 「もう一度」「自分で作る」は同じ幅にして、320px でも折れないようにする */
.pf-result .pf-actions {
    grid-template-columns: 1fr 1fr;
}

.pf-result .pf-actions .sg-button {
    padding-inline: 12px;
    white-space: nowrap;
}

.pf-challenge-share {
    max-width: 40rem;
    margin: 28px auto 0;
    text-align: center;
}

.pf-challenge-share-title {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 800;
}

/* 作品のページの入口 */
.pf-challenge-entry {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--pf-border);
    border-radius: 20px;
    background: #fff;
    text-align: center;
}

.pf-challenge-entry-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 900;
    color: var(--sg-red);
}

.pf-challenge-entry-text {
    margin: 6px 0 12px;
    font-size: 0.8125rem;
    line-height: 1.7;
}

/* 出題のボタンは枠の真ん中に (作品のページの PC のシェアの行は左寄せ) */
.pf-challenge-entry .sg-share {
    justify-content: center;
}

/* サイトの CSS のリセットで下線と色が消えるので、文の中のリンクと分かるように付け直す */
.pf-challenge-entry-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--sg-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 名前の下の枠 (作った本人だけ)。仕上げた直後の 3D を画面の外へ押し出さないように、枠を描かず、
   見出しとボタンの行だけにする (320px でもボタンが 1 行に収まる大きさ) */
.pf-challenge-entry--compact {
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
}

.pf-challenge-entry--compact .pf-challenge-entry-title {
    margin-bottom: 8px;
}

.pf-challenge-entry-hint {
    margin-left: 0.25em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sg-muted);
}

.pf-challenge-entry--compact .sg-share {
    gap: 8px;
}

/* 押しやすさはサイトのボタンと同じ 44px にそろえ、文字と左右の余白だけ小さくする */
.pf-challenge-entry--compact .sg-button {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 0.875rem;
}

/* PC (lg) では名前・いちご率と同じ左寄せにする。すぐ下に作品のシェアの行 (同じ形のボタン) が来るので、
   線で分けて、どちらが出題のボタンか分かるようにする (スマホでは 2 つの行のあいだに 3D がある) */
@media (min-width: 1024px) {
    .pf-challenge-entry--compact {
        padding-bottom: 20px;
        border-bottom: 1px solid var(--pf-border);
        /* 枠の角丸が残ると、線の両端が曲がる */
        border-radius: 0;
        text-align: left;
    }

    .pf-challenge-entry--compact .sg-share {
        justify-content: flex-start;
    }
}

/* メーカーのページの今日のお題 */
.pf-today {
    max-width: 40rem;
    margin: 28px auto 0;
    padding: 20px 16px;
    border: 1px solid var(--pf-border);
    border-radius: 20px;
    background: #fff;
    text-align: center;
}

.pf-today-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    color: var(--sg-red);
}

.pf-today-text {
    margin: 6px 0 14px;
    font-size: 0.8125rem;
    line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
    .pf-choice,
    .pf-stage-hint {
        transition: none;
    }

    .pf-choice:hover:not(:disabled),
    .pf-choice:active:not(:disabled) {
        transform: none;
    }

    .pf-slot--next {
        animation: none;
    }
}