/* 料理ブログ風の見た目。ux。スクロールは window（内側に overflow の箱を作らない）。 */
:root {
  --bg: #fbf6ee; --ink: #2b2420; --muted: #7a6c60; --line: #e6dccb;
  --tomato: #c8452d; --sage: #6f8f5f; --sand: #f1e3c8;
  --ad-orange: #ff6a00; --ad-green: #1fa84f; --ad-blue: #2a6df0;
  --surface: #fff; --head: #c8452d;
  --serif: "Hiragino Mincho ProN", "Noto Serif JP", Georgia, serif;
}
/* 地の色: Stage.blog.theme（warm / fresh / night）。上部バーと結果画面は常に warm */
#topbar, #result { --bg: #fbf6ee; --ink: #2b2420; --muted: #7a6c60; --line: #e6dccb; --sand: #f1e3c8; --surface: #fff; --head: #c8452d; }
body[data-theme="fresh"] { --bg: #eef5e4; --ink: #22301f; --muted: #5f6f58; --line: #d0e0bf; --sand: #dcebc8; --head: #2f7a3d; }
body[data-theme="night"] { --bg: #2a2421; --ink: #f2e8dc; --muted: #bcad9d; --line: #4b3f37; --sand: #43372d; --surface: #382e29; --head: #f0a35e; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-anchor: none; }
html.scroll-locked { overflow: hidden; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink); font: 17px/1.8 system-ui, -apple-system, "Hiragino Sans", sans-serif;
  touch-action: pan-y; overflow-wrap: anywhere;
}
button { font: inherit; color: inherit; }

/* ---- 上部バー ---- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 30;
  display: flex; align-items: center; gap: 0; padding: 0;
  background: #fffdf8; color: var(--ink); border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1;
}
#hud-time { flex: 0 0 33.333%; padding-left: 14px; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
#hud-bar { flex: 1 1 auto; margin-right: 8px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; min-width: 40px; }
#hud-fill { display: block; height: 100%; width: 0; background: var(--tomato); }
#hud-pct { flex: 0 0 2.9em; margin-right: 10px; font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); font-size: 13px; }
#lang-switch { flex: 0 0 33.333%; display: flex; justify-content: flex-end; padding-right: 4px; }
#lang-switch button {
  min-width: 44px; min-height: 44px; border: 0; background: none; cursor: pointer; padding: 0 6px; font-size: 14px; color: var(--muted);
}
#lang-switch button[aria-pressed="true"] { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
#penalty {
  position: fixed; top: 52px; right: 12px; z-index: 31; background: var(--tomato); color: #fff; font-weight: 700;
  padding: 4px 12px; border-radius: 14px; font-size: 15px; line-height: 1.6;
}
#penalty.pop { animation: pop 1.2s ease-out both; }
@keyframes pop { 0% { transform: translateY(-6px); opacity: 0; } 15% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---- ページ本体 ---- */
#page { max-width: 716px; margin: 0 auto; padding: 56px 18px 40px; }
#cue {
  margin: 0 0 14px; padding: 6px 12px; background: var(--sand); border-radius: 6px; font-size: 14px; line-height: 1.5; text-align: center;
}
#site-head { text-align: center; padding: 6px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.site-logo { font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: .04em; color: var(--head); line-height: 1.3; }
.site-tag { font-size: 13px; color: var(--muted); line-height: 1.5; }
.site-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 14px; line-height: 1.5; }
.site-nav a { color: var(--ink); border-bottom: 1px solid transparent; }
.article-title { text-wrap: balance; font-family: var(--serif); font-size: 30px; line-height: 1.4; margin: 8px 0 8px; }
.meta { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.rating { margin: 12px 0 4px; font-size: 15px; line-height: 1.5; }
.stars { color: #e0a030; letter-spacing: 2px; margin-right: 8px; }
.affiliate { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); font-style: italic; line-height: 1.6; }
.social { display: flex; gap: 8px; margin-bottom: 22px; }
.social-btn { padding: 4px 16px; border: 1px solid var(--line); border-radius: 16px; font-size: 13px; background: var(--surface); line-height: 1.6; }
.block-p { margin: 0 0 1.25em; font-size: 17.5px; }
.block-heading { color: var(--head); font-family: var(--serif); font-size: 23px; line-height: 1.5; margin: 1.6em 0 .6em; }

/* 写真の枠: 文字なし。グラデーションと図形で皿を暗示 */
.photo { margin: 0 0 22px; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg, #e8c9a0, #c99a6b); position: relative; }
.photo-hero { height: 250px; margin-top: 4px; }
.photo-a, .photo-b { margin: 8px 0 26px; }
.photo-b { background: linear-gradient(160deg, #cfdcc0, #92aa80); }
.plate {
  position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffaf0 0 55%, #efe4d0 56% 100%); box-shadow: 0 8px 18px rgba(60, 35, 15, .3);
}
.photo-a, .photo-b { height: 190px; padding-bottom: 0; }
.photo-a .plate, .photo-b .plate { margin-top: -82px; width: 150px; height: 150px; margin-left: -75px; top: 46%; }
.photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 12px; font-size: 12.5px; line-height: 1.5;
  background: rgba(43, 36, 32, .55); color: #fff;
}
.cookie { position: absolute; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9a05c, #b2753a); box-shadow: inset -3px -4px 6px rgba(80, 40, 10, .3); }
.cookie::after { content: ""; position: absolute; left: 18px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: #4b2c18; box-shadow: 14px 10px 0 #4b2c18, -2px 16px 0 #4b2c18; }
.c1 { left: 22px; top: 40px; } .c2 { left: 100px; top: 28px; } .c3 { left: 60px; top: 100px; } .c4 { left: 112px; top: 100px; }
.small .cookie { width: 44px; height: 44px; }
.small .cookie::after { left: 13px; top: 12px; width: 5px; height: 5px; box-shadow: 11px 8px 0 #4b2c18, -1px 12px 0 #4b2c18; }
.small .c1 { left: 20px; top: 32px; } .small .c2 { left: 86px; top: 26px; } .small .c3 { left: 52px; top: 82px; }

/* ---- ジャンプ（本物と偽物。手がかり 3 つを同時に置く） ---- */
.block-jump { margin: 8px 0 28px; display: flex; }
.jump {
  min-height: 48px; min-width: 150px; padding: 0 18px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 16px; line-height: 1.3; text-align: center;
}
/* 本物: 地味なリンク色の枠線。右に ↓、下線 */
.jump-real { background: transparent; border: 2px solid var(--sage); color: #4a6a3c; }
.jump-real .jump-label { text-decoration: underline; text-underline-offset: 4px; }
.jump-real .jump-mark { font-size: 18px; line-height: 1; }
/* 偽物: 派手な塗りつぶし（広告色）。▶ か AD のしるし */
.jump-fake { background: var(--ad-orange); border: 2px solid var(--ad-orange); color: #fff; font-weight: 700; box-shadow: 0 3px 0 rgba(150, 60, 0, .4); }
.jump-fake .jump-mark { font-size: 11px; font-weight: 700; letter-spacing: .06em; background: rgba(0, 0, 0, .28); padding: 1px 6px; border-radius: 3px; line-height: 1.5; }

/* ---- 広告: 「読み込み中…」→ 広がる ---- */
.ad {
  position: relative; color: #1d2433; margin: 8px 0 28px; border: 1px solid #cfd8ec; border-radius: 6px; background: #eef2fb; overflow: hidden;
  height: var(--ad-loading, 64px); transition: height .9s ease-out; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ad.is-loaded { height: var(--ad-full, 300px); }
.ad-badge { position: absolute; top: 4px; right: 6px; z-index: 2; font-size: 10px; line-height: 1.4; padding: 0 5px; background: rgba(255, 255, 255, .85); color: #555; border-radius: 3px; }
.ad-body { position: relative; height: 100%; }
.ad-loading { position: absolute; inset: 0 0 auto 0; height: 62px; display: flex; align-items: center; justify-content: center; color: #6b7794; font-size: 14px; }
.ad-content { opacity: 0; transition: opacity .5s ease-out .35s; padding: 22px 14px 14px; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.ad.is-loaded .ad-content { opacity: 1; }
.ad.is-loaded .ad-loading { display: none; }
.ad-art { flex: 1; min-height: 80px; position: relative; border-radius: 6px; background: linear-gradient(135deg, var(--ad-blue), #7aa0ff); overflow: hidden; }
.ad-trick .ad-art { background: linear-gradient(135deg, var(--ad-green), #8fe0a8); }
.ad-art-a { position: absolute; left: 12%; top: 18%; width: 90px; height: 90px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.ad-art-b { position: absolute; right: 10%; bottom: 14%; width: 120px; height: 46px; border-radius: 23px; background: rgba(255, 255, 255, .5); }
.ad-art-c { position: absolute; right: 22%; top: 12%; width: 40px; height: 40px; transform: rotate(20deg); background: rgba(255, 106, 0, .85); border-radius: 8px; }
.ad-text { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ad-copy { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.4; flex: 1; }
.ad-cta { background: var(--ad-orange); color: #fff; padding: 8px 14px; border-radius: 6px; font-weight: 700; font-size: 14px; line-height: 1.3; white-space: nowrap; }

/* ---- 材料表（ゴール） ---- */
.ingredients {
  margin: 30px 0 0; padding: 18px 20px 20px; background: var(--surface); position: relative; border: 3px solid var(--sage); border-radius: 10px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(60, 40, 20, .1);
}
.ingredients.in-view { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(111, 143, 95, .55); } 50% { box-shadow: 0 0 0 9px rgba(111, 143, 95, 0); } }
.ing-title { font-family: var(--serif); font-size: 22px; margin: 0 0 8px; line-height: 1.5; border-bottom: 2px solid var(--head); padding-bottom: 4px; }
.ing-list { margin: 0 0 12px; padding-left: 22px; line-height: 2; }
.ing-tap { margin: 0; text-align: center; font-weight: 700; color: #fff; background: var(--tomato); padding: 8px; border-radius: 8px; line-height: 1.5; }

/* ---- ポップアップ ---- */
#popup-root { position: relative; z-index: 40; }
.popup-backdrop {
  position: fixed; inset: 0; background: rgba(20, 14, 10, .62); display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fade .15s ease-out both; touch-action: none;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.popup-card {
  position: relative; width: 100%; max-width: 420px; color: #2b2420; background: #fff; border-radius: 10px; padding: 26px 22px 18px; text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
/* × は見た目が小さく薄い。押せる範囲は 44×44px 以上 */
.popup-x {
  position: absolute; left: clamp(22px, var(--x, 94%), calc(100% - 22px)); top: clamp(22px, var(--y, 6%), calc(100% - 22px));
  width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 2;
}
.popup-x i { position: absolute; left: 14px; top: 21px; width: 16px; height: 1.5px; background: #b6b0aa; transform: rotate(45deg); }
.popup-x i::after { content: ""; position: absolute; inset: 0; background: inherit; transform: rotate(90deg); }
.popup-art { height: 90px; border-radius: 8px; margin-bottom: 14px; background: linear-gradient(135deg, #ffd59a, #ff9d6b); position: relative; overflow: hidden; }
.popup-title { text-wrap: balance; font-family: var(--serif); font-size: 22px; line-height: 1.4; margin: 0 0 8px; }
.popup-body { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: #4a3f38; }
.popup-cta {
  display: block; width: 100%; min-height: 54px; border: 0; border-radius: 8px; background: var(--ad-green); color: #fff; font-size: 19px; font-weight: 700;
  box-shadow: 0 4px 0 #14793a, 0 8px 16px rgba(31, 168, 79, .4); cursor: pointer;
}
.popup-newsletter .popup-cta { background: var(--ad-orange); box-shadow: 0 4px 0 #b34a00, 0 8px 16px rgba(255, 106, 0, .4); }
.popup-rating .popup-cta { background: var(--ad-blue); box-shadow: 0 4px 0 #1a47a8, 0 8px 16px rgba(42, 109, 240, .4); }
.popup-skip { margin-top: 8px; min-height: 44px; padding: 0 16px; border: 0; background: none; color: #9a8f86; font-size: 12px; text-decoration: underline; cursor: pointer; }

/* ---- 覆い、ゴール演出、通知 ---- */
#overlay { position: fixed; inset: 0; z-index: 50; background: rgba(20, 14, 10, .78); display: flex; align-items: center; justify-content: center; padding: 24px; }
#overlay[hidden], #goal-flash[hidden], #toast[hidden], #penalty[hidden], #result[hidden] { display: none; }
.overlay-box { color: #2b2420; background: #fff; border-radius: 12px; padding: 26px 24px; max-width: 340px; width: 100%; text-align: center; }
.overlay-box h2 { font-family: var(--serif); font-size: 22px; margin: 8px 0 4px; line-height: 1.4; }
.overlay-box p { margin: 0; line-height: 1.6; }
.overlay-count { margin-top: 8px !important; font-weight: 700; color: var(--tomato); font-variant-numeric: tabular-nums; }
.overlay-spinner { width: 34px; height: 34px; margin: 0 auto; border: 4px solid var(--line); border-top-color: var(--tomato); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#goal-flash { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; background: rgba(111, 143, 95, .85); color: #fff; font-family: var(--serif); font-size: 52px; font-weight: 700; }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 45; max-width: calc(100vw - 32px); background: #2b2420; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 15px; line-height: 1.5; text-align: center; }

/* ---- 結果画面（S2）。上部バーは見えたまま ---- */
#result { color: var(--ink); position: fixed; top: 44px; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.result-inner { max-width: 560px; margin: 0 auto; padding: 18px 18px 36px; }
.result-kicker { margin: 0; font-size: 12px; letter-spacing: .12em; color: var(--muted); line-height: 1.5; }
.result-title { font-family: var(--serif); font-size: 46px; line-height: 1.2; margin: 2px 0 4px; color: var(--tomato); }
.result-title-cond { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.result-sentence { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: #4a3f38; }
.result-seconds { margin: 0; font-family: var(--serif); font-size: 36px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.result-best-banner { display: inline-block; margin: 4px 0 0; padding: 3px 12px; background: var(--sage); color: #fff; border-radius: 14px; font-size: 14px; font-weight: 700; line-height: 1.6; }
.result-breakdown { margin: 18px 0 6px; font-size: 14px; color: var(--muted); font-weight: 600; line-height: 1.5; }
.rows { list-style: none; margin: 0; padding: 0; }
.rrow { padding: 8px 0 9px; border-top: 1px solid var(--line); }
.rrow-head { display: flex; align-items: baseline; gap: 8px; line-height: 1.5; }
.rrow-name { flex: 1; font-weight: 700; font-size: 15px; }
.rrow-value { font-size: 14px; color: #4a3f38; }
.rrow-effect { min-width: 4.8em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tomato); font-size: 15px; }
.rrow.is-zero .rrow-effect { color: var(--sage); }
.rrow-reason { margin: 2px 0 0; font-size: 13.5px; line-height: 1.55; color: #4a3f38; }
.result-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.btn { min-height: 52px; border-radius: 10px; font-size: 17px; font-weight: 700; cursor: pointer; border: 2px solid var(--tomato); }
.btn-primary { background: var(--tomato); color: #fff; }
.btn-secondary { background: transparent; color: var(--tomato); }
.copied { margin: 0; text-align: center; color: var(--sage); font-weight: 700; line-height: 1.5; }
.manual { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.manual textarea { width: 100%; font: 14px/1.5 system-ui, sans-serif; border: 0; resize: none; background: transparent; color: var(--ink); }
.manual p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.result-best-small { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.5; }
.noscript { padding: 16px; text-align: center; }

@media (min-width: 700px) {
  #page { padding-top: 64px; }
  .article-title { font-size: 34px; }
  .photo-hero { height: 300px; }
}
@media (max-width: 360px) {
  .site-logo { font-size: 26px; } .article-title { font-size: 26px; } .result-title { font-size: 38px; } .result-seconds { font-size: 32px; }
  .rrow-head { flex-wrap: wrap; }
}

/* ---- 周回1 ux: 料理ごとの皿の絵（CSS の図形だけ。dsh- 接頭辞）。plate の font-size が 1em の基準（ヒーロー 10px、小 7.9px） ---- */
.plate { font-size: 10px; }
.plate.small { font-size: 7.9px; }
.photo-curry { background: linear-gradient(160deg, #efd890, #cfa955); }
.photo-curry.photo-b { background: linear-gradient(160deg, #dde6b8, #a9b97a); }
.photo-pancake { background: linear-gradient(160deg, #f5d3c8, #e1a899); }
.photo-pancake.photo-b { background: linear-gradient(160deg, #f6e2b0, #e6bf72); }
.plate i { position: absolute; display: block; }
/* カレー: 左にごはん、右にルウ、具 */
.dsh-rice { left: 2.4em; top: 3.2em; width: 7.6em; height: 12.6em; border-radius: 48% 38% 44% 52%; background: radial-gradient(circle at 40% 30%, #fff 0 45%, #f3eee0 100%); box-shadow: inset -.3em -.4em .8em rgba(120, 100, 60, .18); }
.dsh-curry { left: 7.6em; top: 3.6em; width: 9.2em; height: 12em; border-radius: 40% 52% 50% 44%; background: radial-gradient(circle at 40% 30%, #d8872a, #a9560f); box-shadow: inset -.4em -.5em .9em rgba(60, 25, 0, .35); }
.dsh-chunk { width: 2.2em; height: 2.2em; border-radius: .5em; background: #ecc365; box-shadow: inset -.2em -.2em .3em rgba(120, 70, 0, .3); }
.dsh-k1 { left: 10em; top: 5.6em; transform: rotate(12deg); } .dsh-k2 { left: 12.6em; top: 9.4em; transform: rotate(-18deg); } .dsh-k3 { left: 9.4em; top: 11.6em; transform: rotate(30deg); }
.dsh-carrot { left: 13.4em; top: 5.6em; width: 2em; height: 2em; border-radius: 50%; background: #ee7a2a; box-shadow: inset -.2em -.2em .3em rgba(120, 40, 0, .35); }
/* パンケーキ: 重ねた3枚、バター、シロップ */
.dsh-cake { left: 2.6em; width: 13.8em; height: 4.4em; border-radius: 50%; background: linear-gradient(#f0c273, #d99a45); box-shadow: 0 .5em 0 #b87628, 0 .7em .6em rgba(60, 30, 0, .25); }
.dsh-cake3 { top: 9.6em; } .dsh-cake2 { top: 6.8em; } .dsh-cake1 { top: 4em; background: linear-gradient(#f6cf86, #e2a655); }
.dsh-syrup { left: 4.6em; top: 3.6em; width: 9.8em; height: 4.4em; border-radius: 50% 50% 46% 54% / 60% 60% 40% 40%; background: radial-gradient(circle at 45% 35%, #b8631a, #8a4310); opacity: .92; box-shadow: 1.4em 1.4em 0 -.5em #8a4310, -1.6em 1.8em 0 -.7em #8a4310; }
.dsh-butter { left: 7.4em; top: 2.2em; width: 3.6em; height: 2.4em; border-radius: .4em; background: linear-gradient(#fff0a0, #f7d54e); box-shadow: 0 .3em .5em rgba(80, 50, 0, .3); transform: rotate(-8deg); }

/* ---- 周回1 ux: 手ざわり（山場の動き） ---- */
/* ゴール: 秒数が止まって大きくなり、材料表に「発見！」の判が押される */
#hud-time { transform-origin: 14px 50%; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), color .25s; }
#hud-time.is-found { transform: scale(1.55); color: var(--tomato); }
.ingredients.is-found { animation: none; cursor: default; }
.ing-stamp {
  position: absolute; right: 12px; bottom: 8px; transform: rotate(-14deg); z-index: 2; pointer-events: none; opacity: 0;
  padding: 2px 14px; border: 4px solid #d6322a; border-radius: 8px; color: #d6322a; background: rgba(255, 255, 255, .88);
  font-family: var(--serif); font-size: 34px; font-weight: 900; letter-spacing: .06em; line-height: 1.25; white-space: nowrap;
  box-shadow: inset 0 0 0 2px rgba(214, 50, 42, .35);
}
.ingredients.is-found .ing-stamp { animation: stamp .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-14deg) scale(2.8); } 55% { opacity: 1; transform: rotate(-14deg) scale(.92); } 100% { opacity: 1; transform: rotate(-14deg) scale(1); } }
.ingredients.is-found { animation: thump .3s ease-out .2s both; }
@keyframes thump { 0%, 100% { transform: none; } 40% { transform: translateY(3px) scale(.99); } }

/* 誘導ボタン: へこむ → 枠が揺れる */
.popup-cta.is-pressed { transform: translateY(4px) scale(.97); box-shadow: 0 0 0 #0000, 0 2px 6px rgba(0, 0, 0, .25); transition: transform .08s ease-out; }
.popup-card.is-shaking { animation: shake .26s linear both; }
@keyframes shake { 0%, 100% { transform: none; } 15% { transform: translateX(-9px) rotate(-1.2deg); } 35% { transform: translateX(8px) rotate(1deg); } 55% { transform: translateX(-6px); } 75% { transform: translateX(4px); } }
.popup-card { animation: pop-in .18s ease-out both; }
@keyframes pop-in { from { transform: scale(.94); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ing-stamp, .popup-card, .popup-card.is-shaking, .ingredients.is-found { animation: none !important; }
  .ingredients.is-found .ing-stamp { opacity: 1; }
}
@media (max-width: 360px) { .ing-stamp { font-size: 28px; right: 8px; } }
/* 広告の絵を種類ごとに（pan は青のまま） */
.ad-budget .ad-art { background: linear-gradient(135deg, var(--ad-green), #8fe0a8); }
.ad-rack .ad-art { background: linear-gradient(135deg, #7a45d6, #c4a2ff); }

/* ---- 周回2 ux: 見た目の完成度（xu- 接頭辞） ---- */
/* 日本語の折り: 対応環境では語の切れ目で折る。非対応では <wbr> の位置だけで折る */
:lang(ja) .xu-wrap, html[lang="ja"] .xu-wrap { word-break: auto-phrase; line-break: strict; }
@supports not (word-break: auto-phrase) { html[lang="ja"] .xu-wrap { word-break: keep-all; } }

/* ポップアップの絵（種類ごと）。地は帯、図形は CSS だけ */
.popup-art { height: 96px; background: linear-gradient(135deg, #ffd59a, #ff9d6b); }
.xu-art-cookie { background: linear-gradient(135deg, #e8c9a0, #c99a6b); }
.xu-art-rating { background: linear-gradient(135deg, #f6b23c, #e9822b); }
.popup-art i { position: absolute; display: block; }
/* 封筒 */
.xu-art-newsletter::before { content: ""; position: absolute; left: 50%; top: 50%; width: 92px; height: 62px; margin: -29px 0 0 -46px; background: #fffaf0; border-radius: 6px; box-shadow: 0 5px 10px rgba(120, 50, 10, .3), inset 0 -3px 0 #f0e2c6; }
.xu-env-flap { left: 50%; top: 50%; width: 0; height: 0; margin: -29px 0 0 -46px; border-left: 46px solid transparent; border-right: 46px solid transparent; border-top: 36px solid #f3dfb9; filter: drop-shadow(0 2px 1px rgba(120, 50, 10, .25)); }
.xu-env-seal { left: 50%; top: 50%; width: 16px; height: 16px; margin: -2px 0 0 -8px; border-radius: 50%; background: #d6322a; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .2); }
/* ひと口かじったクッキー（右上が欠ける） */
.xu-ck { left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e0a964, #b2753a); box-shadow: 0 5px 8px rgba(80, 40, 10, .3), inset -3px -4px 6px rgba(80, 40, 10, .3);
  -webkit-mask: radial-gradient(circle at 88% 14%, transparent 0 15px, #000 16px); mask: radial-gradient(circle at 88% 14%, transparent 0 15px, #000 16px); }
.xu-ck-chip { width: 8px; height: 8px; border-radius: 50%; background: #4b2c18; }
.xu-ck1 { left: calc(50% - 20px); top: calc(50% - 14px); } .xu-ck2 { left: calc(50% + 4px); top: calc(50% + 6px); } .xu-ck3 { left: calc(50% - 16px); top: calc(50% + 14px); }
/* 星（3つ） */
.xu-star { width: 40px; height: 40px; background: #fff7d1; clip-path: polygon(50% 0, 62% 35%, 98% 36%, 69% 57%, 80% 92%, 50% 71%, 20% 92%, 31% 57%, 2% 36%, 38% 35%); filter: drop-shadow(0 2px 2px rgba(120, 70, 0, .35)); }
.xu-star1 { left: calc(50% - 20px); top: 12px; width: 48px; height: 48px; margin-left: -2px; background: #fff; }
.xu-star2 { left: calc(50% - 66px); top: 36px; transform: rotate(-14deg); } .xu-star3 { left: calc(50% + 26px); top: 36px; transform: rotate(14deg); }

/* 広告の絵: 架空の商品（泡立て器 / フライパン / 計量カップ / 冷却ラック）。既存の a/b/c は使わない */
.ad-art-a, .ad-art-b, .ad-art-c { display: none; }
.ad-art::before, .ad-art::after { content: ""; position: absolute; }
/* フライパン（pan） */
.xu-ad-pan::before { left: 50%; top: 50%; width: 96px; height: 96px; margin: -52px 0 0 -70px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4a4f5c 0 58%, #2d313b 60%); box-shadow: 0 6px 10px rgba(0, 0, 20, .35), inset 0 0 0 5px #20232b; }
.xu-ad-pan::after { left: 50%; top: 50%; width: 76px; height: 14px; margin: -14px 0 0 18px; border-radius: 7px; background: linear-gradient(#f0a85a, #c9722b); box-shadow: 0 3px 4px rgba(0, 0, 20, .3); }
/* 泡立て器（trick） */
.xu-ad-trick::before { left: 50%; top: 50%; width: 50px; height: 78px; margin: -52px 0 0 -25px; border: 5px solid #e8eef2; border-radius: 50% 50% 46% 46%; box-shadow: 0 0 0 0 #0000, inset 0 0 0 9px rgba(255, 255, 255, 0), 0 5px 8px rgba(0, 40, 20, .3); background: radial-gradient(ellipse at center, transparent 0 38%, rgba(232, 238, 242, .9) 40% 46%, transparent 48%); }
.xu-ad-trick::after { left: 50%; top: 50%; width: 14px; height: 54px; margin: 22px 0 0 -7px; border-radius: 7px; background: linear-gradient(90deg, #d9534a, #a8322b); box-shadow: 0 3px 4px rgba(0, 40, 20, .3); }
/* 計量カップ（budget） */
.xu-ad-budget::before { left: 50%; top: 50%; width: 72px; height: 76px; margin: -42px 0 0 -42px; border-radius: 4px 4px 12px 12px; background: linear-gradient(90deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55)); box-shadow: 0 5px 8px rgba(0, 50, 20, .3), inset 0 -26px 0 rgba(255, 200, 90, .65); background-image: repeating-linear-gradient(0deg, transparent 0 11px, rgba(60, 80, 70, .45) 11px 13px), linear-gradient(90deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55)); background-size: 22px 100%, 100% 100%; background-repeat: repeat-y, no-repeat; background-position: 6px 0, 0 0; }
.xu-ad-budget::after { left: 50%; top: 50%; width: 26px; height: 40px; margin: -30px 0 0 26px; border: 7px solid rgba(255, 255, 255, .85); border-left: 0; border-radius: 0 20px 20px 0; }
/* 冷却ラック（rack） */
.xu-ad-rack::before { left: 50%; top: 50%; width: 120px; height: 72px; margin: -40px 0 0 -60px; border-radius: 8px; border: 4px solid #e9dcff; background: repeating-linear-gradient(90deg, transparent 0 14px, #e9dcff 14px 18px), repeating-linear-gradient(0deg, transparent 0 14px, #e9dcff 14px 18px); box-shadow: 0 6px 10px rgba(40, 0, 80, .3); }
.xu-ad-rack::after { left: 50%; top: 50%; width: 120px; height: 8px; margin: 38px 0 0 -60px; border-radius: 4px; background: rgba(40, 0, 80, .3); filter: blur(3px); }

/* 連鎖など、誘導ボタンのないポップアップ: ボタンの分の空きを作らない */
.popup-card .popup-body:last-of-type { margin-bottom: 6px; }
.popup-card:not(:has(.popup-cta)) .popup-skip { margin-top: 0; }

/* ページの終わり（材料表の下）。見出しだけ */
.xu-end { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.xu-end-h { margin: 0 0 18px; font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--head); }
.xu-end-h + .xu-end-h { color: var(--muted); font-size: 17px; border-top: 1px dashed var(--line); padding-top: 16px; }
@media (max-width: 360px) { .ing-stamp { bottom: 6px; } }

/* 周回2 修正: 語（パンケーキ、カレー など）の内側では折らない */
.xu-w { white-space: nowrap; }
@media (max-width: 400px) { .article-title { font-size: 28px; } .popup-title { font-size: 20px; } }

/* ---- 周回3 ux: 通常／日替わりの切り替え、日付の印、本物のジャンプの行（xr3- 接頭辞） ---- */
#xr3-mode { display: flex; margin: 0 auto 14px; max-width: 360px; border: 1.5px solid var(--tomato); border-radius: 10px; overflow: hidden; background: #fff; }
#xr3-mode button { flex: 1; min-height: 44px; border: 0; background: transparent; color: var(--tomato); font-size: 15px; font-weight: 700; cursor: pointer; padding: 0 8px; line-height: 1.3; }
#xr3-mode button[aria-pressed="true"] { background: var(--tomato); color: #fff; }
#xr3-badge { flex: 0 0 auto; margin-right: 8px; padding: 3px 8px; border-radius: 10px; background: var(--sage); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
body.xr3-daily #hud-time { flex-basis: 20%; padding-left: 10px; }
body.xr3-daily #lang-switch { flex-basis: 30%; }
.rrow-head { flex-wrap: wrap; }
.rrow-name { flex: 1 1 8em; }
.rrow-value { flex: 0 1 auto; }
.btn-quiet { background: transparent; border-color: var(--line); color: var(--muted); min-height: 44px; font-size: 15px; font-weight: 600; }
@media (max-width: 400px) { #xr3-badge { margin-right: 4px; padding: 3px 6px; font-size: 11px; } }
/* 周回3 ux: 記事の途中の写真（b）は最初の写真と違う絵に（皿を右寄せ・回転・縮小、斜めの光） */
.block.photo .plate { left: 68%; top: 54%; transform: rotate(38deg) scale(.82); }
.block.photo::after { content: ""; position: absolute; left: -10%; top: 0; width: 38%; height: 100%; background: linear-gradient(100deg, rgba(255,255,255,.28), rgba(255,255,255,0)); transform: skewX(-14deg); }
/* 「作り方」「コメント」の下の空白を詰める */
.xu-end-h { margin-bottom: 8px; }
.xu-end { margin-top: 32px; }

/* ---- 周回4 ux: 判はカードの上の縁（文字のない余白）へ。切り替えは地味な細い枠に ---- */
.ing-stamp { top: -20px; bottom: auto; right: 10px; font-size: 22px; padding: 0 10px; border-width: 3px; border-radius: 6px; }
@media (max-width: 360px) { .ing-stamp { top: -18px; bottom: auto; right: 6px; font-size: 20px; } }
#xr3-mode { max-width: 220px; margin: 0 auto 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; }
#xr3-mode button { min-height: 36px; font-size: 12px; font-weight: 500; color: var(--muted); padding: 0 10px; }
#xr3-mode button[aria-pressed="true"] { background: var(--sand); color: var(--ink); font-weight: 700; }
body.xr3-daily #xr3-mode button[data-mode="daily"][aria-pressed="true"]::before { content: "● "; color: var(--sage); }
#xr3-mode { max-width: 260px; } #xr3-mode button { white-space: nowrap; }