/* 献立クエスト：おいしそうで、毎日開いても疲れないデザイン
   色はトマト・卵黄・バジル・トーストの、あたたかい食べものの色。背景は生成りの和紙 */
:root {
  --bg: #fbf5ec;          /* 生成り */
  --bg2: #f5ecdd;
  --card: #fffdf8;
  --ink: #4a3426;         /* しょうゆ色 */
  --sub: #9b8574;
  --line: #efe3d1;
  --edge: #eadbc5;
  --stitch: #e3d3bd;      /* うすい区切り線 */
  --pink: #fcdccf;  --pink-d: #e0664a;    /* トマト */
  --peach: #f9e1c6; --peach-d: #c9813f;   /* トースト */
  --butter: #ffeaae; --butter-d: #e3a51a; /* 卵黄 */
  --mint: #dbeed3;  --mint-d: #4f9a5b;    /* バジル */
  --sky: #e1ecf5;   --sky-d: #5f8fbf;     /* 染付の器 */
  --lav: #ebe1f2;   --lav-d: #7e5fa6;     /* なす */
  --pri: #e2603f;   --pri-d: #c24a2c;
  --chip: #f6ede0;
  --good: var(--mint-d); --warn: var(--butter-d); --bad: var(--pink-d);
  --p: #e8846a; --f: #f0b93a; --c: #8fbadd;
  --shadow: 0 10px 26px -16px rgba(120, 70, 30, .45);
  --display: "Kiwi Maru", "Zen Maru Gothic", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #241c17; --bg2: #2d241e; --card: #332922; --ink: #f6ebde; --sub: #b9a492; --line: #43372e; --edge: #1d1612; --stitch: #4e4035;
    --pink: #6e3b2f; --peach: #6a4a30; --butter: #6b5520; --mint: #34503a; --sky: #31465a; --lav: #4a3d5c; --chip: #3d3129;
    --pink-d: #ff9b80; --peach-d: #f0b071; --butter-d: #ffd062; --mint-d: #8fd39c; --sky-d: #a5c8ea; --lav-d: #c9b2ea;
    --pri: #f0734f; --pri-d: #b8462a;
    --shadow: 0 10px 26px -16px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  --bg: #241c17; --bg2: #2d241e; --card: #332922; --ink: #f6ebde; --sub: #b9a492; --line: #43372e; --edge: #1d1612; --stitch: #4e4035;
  --pink: #6e3b2f; --peach: #6a4a30; --butter: #6b5520; --mint: #34503a; --sky: #31465a; --lav: #4a3d5c; --chip: #3d3129;
  --pink-d: #ff9b80; --peach-d: #f0b071; --butter-d: #ffd062; --mint-d: #8fd39c; --sky-d: #a5c8ea; --lav-d: #c9b2ea;
  --pri: #f0734f; --pri-d: #b8462a;
  --shadow: 0 10px 26px -16px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  color: var(--ink);
  background-color: var(--bg);
  /* 和紙のような、ごく薄いむら */
  background-image: radial-gradient(rgba(150, 100, 60, .05) 1px, transparent 1.2px), radial-gradient(rgba(150, 100, 60, .035) 1px, transparent 1.2px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
  font-family: "Zen Maru Gothic", system-ui, "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}
button { font: inherit; color: inherit; cursor: pointer; }
input, select {
  font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px; width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pink); }
h2 { font-family: var(--display); font-size: 19px; font-weight: 500; margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; }
h2 .ic { color: var(--pri); }
h3 { font-size: 15px; margin: 0 0 8px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.muted { color: var(--sub); font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.ic { flex: none; vertical-align: -4px; }
.dish { flex: none; overflow: visible; }
.dish .steam path { animation: steam 2.8s ease-in-out infinite; opacity: .8; }
.dish .steam path:nth-child(2) { animation-delay: .5s; } .dish .steam path:nth-child(3) { animation-delay: 1s; }
@keyframes steam { 0% { transform: translateY(2px); opacity: 0; } 40% { opacity: .85; } 100% { transform: translateY(-4px); opacity: 0; } }

/* ---------- ヘッダー ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px);
}
.brand { font-family: var(--display); font-size: 19px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.brand .ic { color: var(--pri); }
.lv { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lv .title { font-size: 11px; color: var(--sub); white-space: nowrap; text-align: right; }
/* XPバー：火加減のように黄色からトマト色へ */
.xpbar { position: relative; width: 92px; height: 7px; border-radius: 7px; background: var(--line); overflow: hidden; margin-top: 2px; }
.xpbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: linear-gradient(90deg, var(--butter-d), var(--pri)); transition: width 1s cubic-bezier(.3, .8, .3, 1); }
.badge { font-family: var(--display); font-size: 13px; background: var(--butter); color: var(--ink); border-radius: 999px; padding: 4px 11px; white-space: nowrap; box-shadow: inset 0 -2px 0 rgba(200, 140, 20, .25); }
.iconbtn { border: none; background: var(--card); width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); box-shadow: 0 1.5px 0 var(--edge); }
.iconbtn:active { transform: translateY(1.5px); box-shadow: none; }
@media (max-width: 420px) {
  .brand { font-size: 17px; }
  .lv { gap: 6px; }
  .xpbar { width: 58px; }
  .iconbtn { width: 32px; height: 32px; }
}

main { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.view-enter > * { animation: rise .45s cubic-bezier(.25, .8, .3, 1) both; }
.view-enter > *:nth-child(2) { animation-delay: .04s; } .view-enter > *:nth-child(3) { animation-delay: .08s; }
.view-enter > *:nth-child(4) { animation-delay: .12s; } .view-enter > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- カード ---------- */
.card { position: relative; background: var(--card); border-radius: 22px; padding: 18px; margin-bottom: 14px; box-shadow: 0 1.5px 0 var(--edge), var(--shadow); }
.card.flat { background: var(--bg2); box-shadow: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 420px) { .grid3 { grid-template-columns: 1fr 1fr; } }

/* 予算のヒーロー：トマトと卵黄のあたたかい色 */
.hero { position: relative; background: linear-gradient(135deg, #ffe0d1 0%, #ffefc4 100%); border-radius: 26px; padding: 22px 20px 18px; box-shadow: 0 2px 0 #f3cdb7, var(--shadow); overflow: hidden; color: #4a3426; }
.hero .deco { position: absolute; right: 8px; top: 2px; opacity: .95; }
.hero .big { font-family: var(--display); font-size: 42px; line-height: 1.15; margin-top: 2px; }
.hero .lbl { font-size: 12.5px; opacity: .8; }
.hero .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; align-items: start; }
.hero .row b { font-family: var(--display); font-weight: 500; font-size: 17px; display: block; }
.hero .row .lbl { display: block; font-size: 11px; line-height: 1.3; }
.pace { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; margin-top: 2px; }
.pace .dotc { width: 10px; height: 10px; border-radius: 50%; background: #4f9a5b; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }
.pace.over .dotc { background: #e0664a; }
.budgetbar { position: relative; height: 12px; margin: 14px 0 6px; border-radius: 12px; background: rgba(255, 255, 255, .75); }
.budgetbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 12px; background: linear-gradient(90deg, #f0b93a, #e2603f); transition: width 1.1s cubic-bezier(.3, .8, .3, 1); }
.budgetbar span { position: absolute; top: -7px; width: 0; height: 0; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #4a3426; }

.kpi { position: relative; background: var(--card); border-radius: 18px; padding: 14px; box-shadow: 0 1.5px 0 var(--edge), var(--shadow); }
.kpi .v { font-family: var(--display); font-size: 21px; }
.kpi .l { font-size: 12px; color: var(--sub); }

/* ---------- ボタン ---------- */
.btn {
  position: relative; border: none; border-radius: 16px; padding: 12px 18px; font-weight: 700; background: var(--chip); color: var(--ink);
  box-shadow: 0 2px 0 var(--edge); transition: transform .12s, box-shadow .12s, background .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--edge); }
.btn.pri { background: var(--pri); color: #fff; box-shadow: 0 3px 0 var(--pri-d); }
.btn.pri:active { box-shadow: 0 0 0 var(--pri-d); transform: translateY(3px); }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 12px; }
.btn.ghost { background: transparent; box-shadow: none; border: 1.5px solid var(--line); }
.btn.done { background: var(--mint); color: var(--ink); box-shadow: 0 2px 0 var(--edge); }
.btn:disabled { opacity: .7; cursor: default; }
.grid2 > .btn { font-size: 13.5px; padding: 11px 8px; white-space: nowrap; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--chip); font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.7; }
.chip .ic { vertical-align: 0; }
.chip.deal { background: var(--pink); }
.chip.good { background: var(--mint); }
.chip.user { background: var(--sky); }
.chip.lav { background: var(--lav); }

.seg { display: inline-flex; background: var(--bg2); border-radius: 14px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { border: none; background: transparent; padding: 7px 14px; border-radius: 11px; font-weight: 700; font-size: 14px; color: var(--sub); transition: background .2s, color .2s; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1.5px 0 var(--edge); }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 700; color: var(--sub); }
input[type=range] { padding: 0; border: none; accent-color: var(--pri); background: transparent; box-shadow: none; }
input[type=checkbox] { accent-color: var(--mint-d); }

/* ---------- タブ ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: flex; justify-content: space-around; align-items: flex-end;
  background: var(--card); padding: 8px 4px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -18px rgba(120, 70, 30, .5);
  border-radius: 22px 22px 0 0;
}
.tabbar button { border: none; background: none; display: grid; justify-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--sub); padding: 6px 8px 0; min-width: 58px; }
.tabbar button .ic { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), color .2s; }
.tabbar button.on { color: var(--ink); }
.tabbar button.on .ic { color: var(--pri); transform: translateY(-2px) scale(1.08); }
.tabbar .center .potwrap {
  width: 60px; height: 60px; margin-top: -30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--butter); box-shadow: 0 3px 0 #ecc66b, var(--shadow);
}
.tabbar .center .donabe .puff { opacity: 0; }
.tabbar .center.on .donabe .puff path { animation: puff 2.4s ease-in-out infinite; }

/* ---------- 地図 ---------- */
#map { height: 300px; border-radius: 20px; overflow: hidden; z-index: 1; }
#map .leaflet-tile-pane { filter: saturate(.6) sepia(.12) brightness(1.04); }
.store { display: flex; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.store:last-of-type { border-bottom: none; }
.dot { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: var(--ink); flex: none; }
.store .nm { font-weight: 700; }
.mpin { position: relative; width: 18px; height: 30px; }
.mpin::before { content: ""; position: absolute; left: 1px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--c); border: 1.5px solid #4a3426; box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .5); }
.mpin::after { content: ""; position: absolute; left: 8px; top: 15px; width: 2px; height: 14px; background: #8a7a6c; border-radius: 1px; }
.home-pin { width: 34px; height: 34px; border-radius: 50%; background: #fffaf2; border: 1.6px solid #4a3426; display: grid; place-items: center; color: #e2603f; }

/* ---------- 献立ガチャ（土鍋） ---------- */
.gacha { text-align: center; padding: 18px 18px 20px; overflow: hidden; background: linear-gradient(180deg, var(--card) 55%, var(--bg2)); }
.gacha .stage { position: relative; height: 116px; margin-bottom: 6px; display: grid; place-items: center; }
.donabe .lid, .donabe .body, .donabe .puff path { transform-box: fill-box; }
.donabe .lid { transform-origin: 50% 100%; }
.idle .donabe .puff path { animation: puff 3s ease-in-out infinite; }
.idle .donabe .puff path:nth-child(2) { animation-delay: .6s; } .idle .donabe .puff path:nth-child(3) { animation-delay: 1.2s; }
@keyframes puff { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-8px); } }
/* ガチャ中：ふたがカタカタ鳴って、ぱかっと開き、湯気が立つ */
.spin .donabe .lid { animation: rattle .7s ease-in-out, liftoff .6s .75s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.spin .donabe .puff path { animation: puff 1s 1s ease-out infinite; }
.spin .donabe .puff path:nth-child(2) { animation-delay: 1.15s; } .spin .donabe .puff path:nth-child(3) { animation-delay: 1.3s; }
@keyframes rattle { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg) translateY(-2px); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg) translateY(-3px); } 80% { transform: rotate(2deg); } }
@keyframes liftoff { to { transform: translate(18px, -22px) rotate(18deg); } }
.reading .donabe .lid { animation: rattle 1s ease-in-out infinite; }
.reading .donabe .puff path { animation: puff 1.4s ease-out infinite; }

.storewin .ribbon { position: absolute; top: -12px; left: 18px; z-index: 2; background: var(--butter); font-size: 12.5px; font-weight: 700; padding: 3px 14px 3px 12px; border-radius: 999px; box-shadow: 0 2px 0 #ecc66b; display: inline-flex; gap: 5px; align-items: center; }
.rankbar { display: grid; grid-template-columns: 116px 1fr 70px; gap: 8px; align-items: center; font-size: 13px; margin: 8px 0; }
.rankbar .bar { position: relative; height: 8px; border-radius: 8px; background: var(--line); }
.rankbar .bar i { position: absolute; left: 0; top: 0; display: block; height: 8px; border-radius: 8px; width: 0; transition: width 1s cubic-bezier(.3, .8, .3, 1); }
.rankbar .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day { margin-top: 18px; }
/* 料理カード：器のイラストを大きく */
.meal {
  position: relative; display: flex; gap: 12px; align-items: center; background: var(--card); border-radius: 22px; padding: 12px 14px 12px 10px; margin-bottom: 10px;
  box-shadow: 0 1.5px 0 var(--edge), var(--shadow); animation: plateIn .5s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes plateIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.meal .emo { width: 70px; height: 70px; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #fff 0 52%, var(--bg2) 53%); border-radius: 50%; flex: none; }
.meal .body { flex: 1; min-width: 0; }
.meal .nm { font-weight: 700; font-size: 15px; cursor: pointer; line-height: 1.45; }
.meal .meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.meal .acts { display: grid; gap: 6px; position: relative; z-index: 1; }
.meal.cooked { background: linear-gradient(90deg, var(--mint), var(--card) 40%); }
.pfc { display: flex; height: 6px; border-radius: 99px; overflow: hidden; margin-top: 7px; background: var(--line); }
.pfc i:nth-child(1) { background: var(--p); } .pfc i:nth-child(2) { background: var(--f); } .pfc i:nth-child(3) { background: var(--c); }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--sub); flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.score { font-family: var(--display); font-weight: 500; }
.s-good { color: var(--mint-d); } .s-mid { color: var(--butter-d); } .s-bad { color: var(--pink-d); }

/* ホーム画面に追加の案内 */
.card.install { background: linear-gradient(135deg, var(--card), var(--butter)); margin-top: 14px; }

/* 日ごとの食数 */
.daytable { display: grid; gap: 2px; }
.dayrow .dl { white-space: nowrap; font-size: 14px; }
.dayrow .dl .muted { font-size: 12px; }
.dayrow { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.dayrow .why { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.5; }
.mealtg { border: 1.5px solid var(--line); background: var(--card); color: var(--sub); border-radius: 10px; padding: 4px 10px; font-weight: 700; font-size: 13px; }
.mealtg.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.mealtg.quick.on { background: var(--butter); border-color: var(--butter-d); color: var(--ink); }

/* かんたん度 */
.note.ease { margin-bottom: 12px; }
.note.ease.e5, .note.ease.e4 { background: var(--mint); color: var(--ink); }
.note.ease.e2, .note.ease.e1 { background: var(--pink); color: var(--ink); }

/* 台所チェック */
.ricelist { display: grid; gap: 8px; }
.riceopt { text-align: left; border: 1.5px solid var(--line); background: var(--card); border-radius: 16px; padding: 10px 14px; display: grid; gap: 2px; }
.riceopt.on { border-color: var(--pri); background: var(--pink); }
.chip.pick2 { border: none; cursor: pointer; padding: 5px 12px; font-size: 13px; color: var(--sub); }
.chip.pick2.on { background: var(--mint); color: var(--ink); }

/* 好み診断・レシピ帳 */
.tasterow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tasterow .muted { font-size: 12px; }
.seg.like button { padding: 6px 10px; font-size: 13px; }
.seg.like button.on:nth-child(1) { background: var(--pink); }
.chip.pick { border: none; cursor: pointer; padding: 5px 12px; font-size: 13px; }
.chip.pick.on { background: var(--pink); text-decoration: line-through; }
.book { display: grid; gap: 4px; }
.bookitem { display: flex; gap: 12px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.bookitem .art { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #fff 0 52%, var(--bg2) 53%); flex: none; }
.bookitem .nm { font-weight: 700; }
.iconbtn.heart { color: var(--sub); }
.iconbtn.heart.on { color: #fff; background: var(--pri); }

/* ---------- 買い物 ---------- */
.item { display: flex; gap: 10px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.item:last-of-type { border-bottom: none; }
.item input[type=checkbox] { width: 22px; height: 22px; flex: none; }
.item.got .nm { text-decoration: line-through; text-decoration-color: var(--pri); color: var(--sub); }
.item .nm { font-weight: 700; }
.item .pr { text-align: right; font-family: var(--display); }
.item .pr s { color: var(--sub); font-size: 12px; display: block; }
.total { display: flex; justify-content: space-between; font-family: var(--display); font-size: 20px; padding-top: 12px; }
.progress { position: relative; height: 8px; margin: 12px 0 4px; border-radius: 8px; background: var(--line); overflow: hidden; }
.progress i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: var(--mint-d); transition: width .6s cubic-bezier(.3, .8, .3, 1); }

/* ---------- 記録：ごはんスタンプのカレンダー ---------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal div { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-size: 11px; color: var(--sub); }
.cal .h { aspect-ratio: auto; font-weight: 700; }
.cal .d::before { content: ""; position: absolute; inset: 14%; border: 1.5px dashed var(--line); border-radius: 50%; }
.cal .x::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: var(--xc); opacity: .9; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); }
.cal .x span { position: relative; z-index: 1; color: #fff; font-weight: 700; }
.cal .today span { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--pri); }
.logitem { display: flex; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.logitem:last-of-type { border-bottom: none; }

/* ごほうびシール */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 8px; }
.bdg { text-align: center; font-size: 11px; color: var(--sub); line-height: 1.4; }
.bdg .i {
  width: 60px; height: 60px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bc, var(--butter)); color: var(--ink); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(120, 70, 30, .2);
  transform: rotate(-6deg); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.bdg:nth-child(even) .i { transform: rotate(5deg); }
.bdg:hover .i { transform: rotate(0) scale(1.06); }
.bdg b { display: block; font-size: 12px; color: var(--ink); }
.bdg.lock .i { background: var(--bg2); border-color: var(--bg2); box-shadow: none; color: var(--stitch); transform: none; }
.bdg.lock b { color: var(--sub); }

/* 今日のクエスト：お皿にチェック */
.quest { display: flex; align-items: center; gap: 12px; padding: 8px 2px; }
.quest .ck { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 2px var(--line), inset 0 0 0 6px #fff, inset 0 0 0 7px var(--line); }
.quest.ok .ck { background: var(--pri); color: #fff; box-shadow: none; animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.6); } to { transform: none; } }
.quest.ok .t { color: var(--sub); text-decoration: line-through; text-decoration-color: var(--stitch); }

/* 連続自炊：この7日間のお茶わん */
.stitches { display: flex; gap: 4px; margin-top: 10px; }
.stitches i { position: relative; width: 16px; height: 12px; border-radius: 0 0 9px 9px; background: var(--line); }
.stitches i.on { background: #6f97c2; }
.stitches i.on::before { content: ""; position: absolute; left: 1px; right: 1px; top: -5px; height: 7px; border-radius: 8px 8px 2px 2px; background: #fffdf6; box-shadow: 0 0 0 1px var(--line); }

/* ---------- モーダル ---------- */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(60, 35, 20, .35); display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(2px); }
.modal[hidden] { display: none; }
.sheet {
  position: relative; background: var(--card); width: 100%; max-width: 640px; max-height: 88vh; overflow: auto;
  border-radius: 26px 26px 0 0; padding: 26px 18px calc(24px + env(safe-area-inset-bottom)); animation: up .35s cubic-bezier(.25, .9, .3, 1);
}
.sheet::before { content: ""; position: absolute; left: 50%; top: 9px; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: var(--line); }
.sheet h3:first-child { font-family: var(--display); font-weight: 500; font-size: 19px; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet ol { padding-left: 20px; line-height: 1.8; }
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptable td { padding: 7px 4px; border-bottom: 1px solid var(--line); }
.ptable input { padding: 5px 8px; width: 84px; text-align: right; border-radius: 10px; }

.toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; pointer-events: none; width: min(92vw, 360px); }
.toast {
  background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: 16px; font-weight: 700; font-size: 14px;
  box-shadow: 0 2px 0 var(--edge), var(--shadow); animation: tagin .45s cubic-bezier(.3, 1.5, .5, 1), fade .4s 2.6s forwards;
}
.toast.xp { background: var(--butter); }
@keyframes tagin { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 0; transform: translateY(-6px); } }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 300; width: 100vw; height: 100vh; }

/* レベルアップ・シール獲得のお祝い */
.celebrate { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; background: rgba(60, 35, 20, .25); animation: cfade .3s ease both; }
.celebrate.out { animation: cfade .3s ease reverse both; }
@keyframes cfade { from { opacity: 0; } to { opacity: 1; } }
.celebrate .patch {
  text-align: center; background: var(--card); border-radius: 28px; padding: 26px 30px 22px; width: min(82vw, 300px);
  box-shadow: 0 3px 0 var(--edge), var(--shadow); animation: patchpop .6s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes patchpop { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.celebrate .medal { width: 88px; height: 88px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--mc, var(--butter)); border: 4px solid #fff; box-shadow: 0 3px 10px rgba(120, 70, 30, .25); animation: sway 2.4s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.celebrate .t1 { font-family: var(--display); font-size: 22px; }
.celebrate .t2 { color: var(--sub); font-size: 13px; margin-top: 4px; }

.empty { text-align: center; padding: 26px 10px; color: var(--sub); }
.empty .ic { color: var(--stitch); margin-bottom: 6px; }
.note { font-size: 12.5px; color: var(--sub); background: var(--bg2); border-radius: 14px; padding: 10px 12px; line-height: 1.7; }
.ring { position: relative; width: 84px; height: 84px; flex: none; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 500; font-size: 20px; }
.rcrow { padding: 10px 2px; border-bottom: 1px solid var(--line); }
.rcrow input:not([type=checkbox]), .rcrow select { padding: 7px 10px; border-radius: 11px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}