/* いちごパフェメーカー (#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) */
.pf-page .sg-button > 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;
}

@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;
    }
}