/* MIXING POT。v2.css に重ねる。舞台は r3.js の時計で描画。 */
.r3{
  --mix-yellow:#F7AC1D;
  --mix-ink:#2A2118;
  --mix-paper:#FFF8E6;
  --mix-chili:#D1382C;
  --mix-font:"DotGothic16","IBM Plex Mono",ui-monospace,monospace;
}

/* ---- ヒーローの枠：最小高さは720pxまで。中身が高い場合は自然に広がる ---- */
.r3 .hero-grid{height:auto;min-height:min(max(560px,calc(100svh - var(--header-h))),720px);grid-template-columns:1fr minmax(0,1.05fr);gap:40px;padding-block:12px}
/* 高さが足りない画面では舞台を縮め、操作まで収める。右端は .wrap に揃える。 */
.r3 .hero-art{--mix-w:min(100%,532px,max(440px,calc((100svh - var(--header-h) - 336px) * 520 / 415 + 32px)));align-self:center;align-items:flex-end;justify-content:center}
.r3 .art-caption{position:static;width:var(--mix-w);margin-top:10px;font-size:.82rem}
/* 8文字＋字間が左列に収まる上限。「薬膳」の判子も em で追従する。 */
.r3 .hero-copy>h1{font-size:clamp(3rem,4.6vw,4rem);line-height:1.42}

/* r4内だけの入口・フッターの余白。共通CSSの文字サイズと操作領域は維持。 */
.gates{padding-block:20px}
.site-footer{padding-block:28px 20px}
.site-footer .footer-grid{gap:20px 28px}

/* ---- MIXING POT の欄（スクショ1：黄の地・インクの線・ドットの書体） ---- */
.mix{position:relative;width:var(--mix-w,min(100%,532px));padding:10px 16px 4px;background:var(--mix-yellow);color:var(--mix-ink);border-radius:2px;
  font-family:var(--mix-font);box-shadow:0 34px 60px -34px rgba(0,0,0,.75)}
.mix-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:7px;border-block:1px solid var(--mix-ink);
  font-size:.7rem;letter-spacing:.1em;line-height:1.6}
.mix-count{font-variant-numeric:tabular-nums;white-space:nowrap}
.mix-stage{position:relative;margin-top:6px;aspect-ratio:520/415;overflow:hidden;isolation:isolate;background:var(--mix-yellow);
  --pot:#B4B2AD;--pot-rim:#E2E1DC;--pot-shade:#8A8882;--pot-edge:#F5EFE4}
.mix-stage > *{position:absolute;inset:0;width:100%;height:100%;display:block}
.mix-bg{overflow:hidden;background:#1D1A17}
/* ご飯の部分を舞台いっぱいに（写真 1000×667 を論理 1270 幅で置き、ご飯の山を中央へ） */
.mix-bg img{position:absolute;left:-129.4%;top:-13.4%;width:244.2%;max-width:none;height:auto;filter:brightness(.7) saturate(1.05)}
.mix-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(29,26,23,.96) 0%,rgba(29,26,23,.55) 45%,rgba(29,26,23,.25) 100%)}
html[data-mode="night"] .mix-bg img{filter:brightness(.56) saturate(1)}
.mix-yellow{background:var(--mix-yellow)}
.mix-dim{background:#1D1A17;opacity:0}
.mix-svg{overflow:hidden;visibility:hidden}
.mix-canvas{pointer-events:none}
.mix-stage[data-pot-on] .mix-svg{visibility:visible}
.mix-stage>.mix-preview{inset:auto 2.5% 5.5% auto;width:min(24%,120px);height:auto;pointer-events:none}
/* 小鍋の表示は r3.js の時計に合わせてフェードする（停止・静止コマも共通） */

/* 象は濃茶、鍋はステンレス色。縁取りはクリーム。 */
.mix .ele-rig{--ele-body:#4D3B30;--ele-turban:#F7AC1D}
/* 縁取りは2枚重ね：下の .ele-edge（同じ象のシルエットを filter で約3.5単位太らせたクリーム）＋上の塗り。
   ターバンの筋のすき間だけは塗りの側でも線を敷く（スクショ2と同じクリームの筋） */
.mix .ele-turban path{stroke:#F5EFE4;stroke-width:7px;stroke-linejoin:round;paint-order:stroke}
.mix .pot-front .stove{fill:#3A2B23;stroke:#F5EFE4;stroke-width:3px;stroke-linejoin:round;paint-order:stroke}
.mix .steam path{fill:none;stroke:#F5EFE4;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:220;opacity:0}

/* 場面1の操作と場面2の札を同じ升に重ね、高さを固定する。 */
.mix-ctl{display:grid;margin-top:8px}
.mix-a,.mix-b{grid-area:1/1;display:flex;flex-direction:column;gap:8px;min-width:0;transition:opacity .28s ease,transform .28s ease,visibility 0s}
.mix-b{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .28s ease,transform .28s ease,visibility 0s .28s}
.mix[data-scene="pour0"] .mix-a,.mix[data-scene="pour"] .mix-a,.mix[data-scene="pot"] .mix-a{opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .22s ease,transform .22s ease,visibility 0s .22s}
.mix[data-scene="pour"] .mix-b,.mix[data-scene="pot"] .mix-b{opacity:1;visibility:visible;transform:none;transition:opacity .32s ease,transform .32s ease,visibility 0s}
/* r4：注ぎ始めから札を重ねて出す（場面1の操作が消えるのと同時に下から上がる） */
.mix[data-scene="pour0"] .mix-b{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease .06s,transform .4s cubic-bezier(.22,1,.36,1) .06s,visibility 0s}
/* 戻るとき：札が消えてから、場面1の操作が出る（押せるのは戻り切ってから） */
.mix[data-scene="back"] .mix-a{transition:opacity .32s ease .24s,transform .32s ease .24s,visibility 0s .24s}
.mix-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mix-btn{display:flex;align-items:center;gap:9px;min-width:0;min-height:46px;padding:8px 11px;border:2px solid var(--mix-ink);border-radius:0;background:transparent;color:var(--mix-ink);
  font:400 .8125rem/1.35 var(--mix-font);text-align:left;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .25s}
.mix-btn .t{min-width:0}
.mix-btn .n{margin-left:auto;flex:none;font-size:.75rem;font-variant-numeric:tabular-nums}
.mix-btn:hover:enabled,.mix-btn.is-auto{background:var(--mix-chili);color:var(--mix-paper)}
.mix-btn.is-auto{box-shadow:0 0 0 3px var(--mix-paper),0 0 18px 6px rgba(255,248,230,.7)}
.mix-btn:active:enabled{transform:translateY(1px)}
.mix-btn:disabled{cursor:default;opacity:.45}
/* アイコンは素材の形（CSS の ::before だけ） */
.ico{position:relative;flex:none;width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center}
.ico::before,.ico::after{content:"";position:absolute}
.ico.spice::before{width:10px;height:10px;border-radius:50%;background:var(--mix-chili);border:1px solid var(--mix-ink)}
.ico.pork::before{width:13px;height:10px;border-radius:3px;background:#C98A6B;border:1px solid var(--mix-ink)}
.ico.pork::after{width:9px;height:2px;border-radius:1px;background:#EBD3C2;transform:rotate(-12deg)}
.ico.beef::before{width:12px;height:10px;border-radius:55% 40% 50% 45%/50% 60% 40% 50%;background:#7A4A3A;border:1px solid var(--mix-ink);transform:rotate(-8deg)}
.ico.veg::before{width:9px;height:9px;left:0;top:4px;border-radius:50%;background:#E8792B;border:1px solid var(--mix-ink)}
.ico.veg::after{width:10px;height:6px;right:-1px;top:1px;border-radius:100% 0 100% 0;background:#2FAF4A;transform:rotate(-25deg)}
.mix-btn:hover:enabled .ico::before,.mix-btn.is-auto .ico::before{border-color:var(--mix-paper)}
/* 主ボタン：インクの塗り・幅いっぱい */
.mix-pour,.mix-again{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:46px;padding:8px 14px;border:2px solid var(--mix-ink);border-radius:0;
  font:400 .9rem/1.3 var(--mix-font);letter-spacing:.12em;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,box-shadow .25s,opacity .2s}
.mix-pour{background:var(--mix-ink);color:var(--mix-yellow)}
.mix-pour:hover:enabled,.mix-pour.is-auto{background:var(--mix-chili);border-color:var(--mix-chili);color:var(--mix-paper)}
.mix-pour.is-auto{box-shadow:0 0 0 3px var(--mix-paper),0 0 20px 8px rgba(255,248,230,.7)}
.mix-pour:disabled{opacity:.4;cursor:default}
.mix-again{background:transparent;color:var(--mix-ink)}
.mix-again:hover:enabled{background:var(--mix-ink);color:var(--mix-yellow)}
.mix-again:disabled{opacity:.4;cursor:default}
/* 鍋にうつす：鍋の形／もう一度：戻る矢印 */
.ico.pour::before{width:14px;height:8px;bottom:2px;border-radius:0 0 6px 6px;background:currentColor}
.ico.pour::after{width:4px;height:4px;top:1px;left:5px;border-radius:50%;background:currentColor;box-shadow:4px -1px 0 -1px currentColor}
/* もう一度：右上が開いた輪（時計回り）と、12時の端で右を向く矢じり */
.ico.again::before{width:10px;height:10px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;transform:rotate(45deg)}
.ico.again::after{top:-2px;left:5.5px;border:4px solid transparent;border-left:6px solid currentColor;border-right:0}

/* 札（グランドアークの札：紙の地・2px の枠・左の帯・少し傾く・変わるとき跳ねる） */
.mix-tag-wrap{flex:1;display:flex;min-width:0;min-height:0}
/* 札は3行で固定（できあがり／料理名と値段／添え書きとリンク）。添え書きの有無で高さが変わらない */
.mix-tag{flex:1;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;align-items:baseline;gap:2px 14px;padding:9px 16px 8px 22px;
  border:2px solid var(--mix-ink);background:var(--mix-paper);color:var(--mix-ink);text-decoration:none;transform:rotate(-1deg);font-family:var(--mix-font)}
.mix-tag::before{content:"";position:absolute;left:-2px;top:-2px;bottom:-2px;width:6px;background:var(--mix-chili)}
.mix-tag .cap{grid-column:1/-1;color:var(--mix-chili);font-size:.72rem;letter-spacing:.06em;line-height:1.5}
.mix-tag .name{font-size:1.06rem;line-height:1.45}
.mix-tag .price{font-size:1.06rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.mix-tag .price small{font-size:.7em;margin-left:.15em}
.mix-tag .note{grid-area:3/1;font-size:.7rem;line-height:1.5;color:#5E5145}
.mix-tag .more{grid-area:3/2;justify-self:end;font-size:.72rem;line-height:1.5;text-decoration:underline;text-underline-offset:4px}
.mix-tag:hover .more{text-decoration-thickness:2px}
.mix[data-scene^="pour"] .mix-tag{pointer-events:none}
.mix[data-scene^="pour"] .mix-tag .more,.mix[data-scene^="pour"] .mix-tag .price{visibility:hidden}
.mix-tag.is-changing{animation:r3TagHop .34s ease-out}
@keyframes r3TagHop{0%,100%{transform:rotate(-1deg) translateY(0)}45%{transform:rotate(0deg) translateY(-6px)}}
.mix :focus-visible{outline:3px solid var(--mix-ink);outline-offset:3px}
.mix .mix-pour:focus-visible{outline-color:var(--mix-chili)}

/* 文字ボタン（動きを止める・空にする） */
.mix-utils{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:3px}
.mix-text{min-height:38px;padding:6px 3px;background:transparent;border:0;color:var(--mix-ink);font:400 .75rem/1.4 var(--mix-font);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.mix-text:hover:enabled{text-decoration-thickness:2px}
.mix-text:disabled{cursor:default;opacity:.6;text-decoration:none}
.mix:not([data-scene="flask"]) [data-empty]{visibility:hidden}
.mix-noscript{font-size:.75rem;margin:6px 0 0}

/* 検収の静止コマ・動きを減らす設定：切り替えの CSS も一コマで出す */
html[data-still="true"] .mix *,html[data-still="true"] .mix *::before,html[data-still="true"] .mix *::after{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){
  .mix *,.mix *::before,.mix *::after{transition:none!important;animation:none!important}
  .mix-btn:active:enabled{transform:none}
}

/* ---- タブレット ---- */
@media (min-width:761px) and (max-width:1000px){
  .r3 .hero-grid{grid-template-columns:1fr 1fr;gap:22px}
  .r3 .hero-copy>h1{font-size:clamp(2.4rem,5vw,3.25rem)}
  .mix{padding-inline:12px}
  .mix-btn{gap:5px;padding-inline:7px;font-size:clamp(11.5px,1.25vw,12px)}
  .ico{width:12px}
}

/* ---- スマホ：見出し → 札 → 舞台 → リード文・営業時間・ボタン。欄は横いっぱいの帯にする ---- */
@media (max-width:760px){
  .r3 .hero-grid{grid-template-columns:minmax(0,1fr);min-height:0;gap:0;padding-block:13px 32px}
  .r3 .hero-copy{display:contents}
  .r3 .hero-copy > .eyebrow{order:1;margin:0 0 10px}
  .r3 .hero-copy > h1{order:2;margin:0 0 10px;font-size:clamp(2.1rem,10.5vw,3.9rem)}
  .r3 .hero-copy > .r4h-tk{order:3;margin:-3px 0 10px}
  .r3 .hero-art{order:4;grid-row:auto;height:auto;margin:0 0 3px}
  .r3 .hero-copy > .lede{order:5;margin-top:0}
  .r3 .hero-copy > .facts{order:6;margin-block:16px}
  .r3 .hero-copy > .hero-actions{order:7;margin-bottom:30px;row-gap:8px}
  .mix{width:auto;align-self:stretch;margin-inline:-20px;padding:10px 12px 4px;border-radius:0;box-shadow:none}
  .mix-btns,.mix-a,.mix-b{gap:7px}
  .mix-btn{gap:5px;padding:7px 7px;font-size:clamp(11.5px,3.35vw,13px);min-height:46px}
  .ico{width:13px}
  .mix-tag .name,.mix-tag .price{font-size:.98rem}
  .r3 .art-caption{align-self:stretch;width:auto;margin-top:8px;font-size:.72rem}
  .gates{padding-block:12px}
  .site-footer .footer-grid{gap:18px}
}