/* ホーム（v3.0）。里の 広場で 迎え、今日の 脳トレへ。届いた おくりもの・おだんごの 皿・妖怪退治と 絵巻・れんぞく。 */
.home-body { padding: 8px 12px 18px; gap: 0; background: #eee7d3 url('assets/ui/home-village-day-v1.webp') center top / auto 640px no-repeat; }
[data-home-period="night"] .home-body { background-image: url('assets/ui/home-village-night-v1.webp'); background-color: #27384a; }
[data-home-period="morning"] .home-body { background-image: linear-gradient(#ffe1a912, transparent), url('assets/ui/home-village-day-v1.webp'); }
[data-home-period="evening"] .home-body { background-image: linear-gradient(#dc8e5b18, transparent), url('assets/ui/home-village-day-v1.webp'); }
.home-village { display: flex; flex-direction: column; gap: 10px; position: relative; isolation: isolate; }
.home-village > :not(.home-season-particles) { position: relative; z-index: 2; flex: none; }

/* 広場 */
.home-world { display: flex; flex-direction: column; gap: 2px; }
.home-speech { align-self: center; width: 100%; position: relative; padding: 8px 12px; background: #fffdf5f5; border: 1px solid #d7bf8d; border-radius: 17px; color: #4b392d; font-size: var(--fs-sm); text-align: center; line-height: 1.5; box-shadow: 0 3px 8px #27312633; }
.home-speech::after { content: ''; position: absolute; width: 10px; height: 10px; bottom: -6px; left: 28%; background: #fffdf5; rotate: 45deg; border-right: 1px solid #d7bf8d; border-bottom: 1px solid #d7bf8d; }
.home-welcome-back { border-color: #c7953a; }
.home-residents { display: flex; justify-content: space-evenly; align-items: flex-end; position: relative; padding-top: 2px; }
.home-character { position: relative; width: 40%; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: end; background: none; border: 0; padding: 0; border-radius: 15px; }
.home-character-art { width: 100%; flex: 1; min-height: 0; transform-origin: 50% 100%; animation: home-breathe 4.6s ease-in-out infinite; filter: drop-shadow(0 4px 3px #25362c55); }
.home-character-guest .home-character-art { animation-delay: -1.8s; }
.home-character-art img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.home-growth-badge { position: absolute; left: 50%; transform: translateX(-50%); top: 0; white-space: nowrap; z-index: 2; padding: 3px 9px; border: 1px solid #aa8038; border-radius: 12px; background: #fff0ad; color: #513b24; font-size: var(--fs-xs); font-style: normal; font-weight: 700; box-shadow: 0 2px 4px #33241133; animation: home-badge 1.6s ease-in-out infinite; }
.home-character.is-speaking .home-character-art { animation: home-talk .8s ease-in-out 3; }
@keyframes home-breathe { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-3px) rotate(.5deg); } }
@keyframes home-talk { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-2deg) translateY(-3px); } }
@keyframes home-badge { 0%,100% { translate: 0 0; } 50% { translate: 0 -3px; } }

/* 今日の 脳トレ（いちばん 大きい ボタン） */
.home-departure { padding: 0 12px 2px; border: 1px solid #dab878; border-radius: 20px; background: #fff9eb; box-shadow: 0 4px 0 #62452d55, 0 5px 12px #273c3222; }
.home-journey-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 -12px; padding: 4px 12px; border-radius: 19px 19px 0 0; background: #f2e7cd; color: #59442e; }
.home-journey-heading h2 { display: flex; gap: 6px; align-items: center; margin: 0; font-size: var(--fs-sm); color: inherit; }
.home-goal { font-size: var(--fs-xs); color: #6b5638; white-space: nowrap; }
.home-goal.done { color: #31613c; font-weight: 700; }
.home-game-art { display: block; flex: none; width: 72px; height: 72px; background: #fff8e9 url('assets/ui/home-games-atlas-v1.webp') var(--art-x) var(--art-y) / 400% 200% no-repeat; border-radius: 12px; mask-image: linear-gradient(transparent, #000 8%, #000 90%, transparent); }
.home-next-preview { display: flex; align-items: center; gap: 10px; padding: 6px 0 4px; }
.home-next-preview > div { min-width: 0; }
.home-next-preview small { display: block; font-size: var(--fs-xs); color: #766148; }
.home-next-preview strong { display: block; color: #423629; font-size: var(--fs-lg); line-height: 1.35; }
.home-next-focus { display: block; color: #53634a; font-size: var(--fs-xs); }
.home-departure .img-skin-main { min-height: 66px; width: 100%; }
.home-map-link { min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 4px; color: #5d5948; font-size: var(--fs-xs); }
.home-map-link span { color: #416943; white-space: nowrap; }
.home-complete { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 0; color: #634b2d; font-size: var(--fs-sm); text-align: center; }

/* 届いた おくりもの */
.home-gifts { display: flex; flex-direction: column; gap: 7px; }
.home-gift { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 6px 10px 6px 6px; border: 2px solid #d39b3a; border-radius: 16px; background: linear-gradient(100deg, #fff4cc, #ffe7a8); color: #4a3520; text-align: left; box-shadow: 0 3px 0 #9a6a2a55, 0 0 0 0 #ffd56a; animation: home-gift-glow 2.2s ease-in-out infinite; }
.home-gift img { width: 54px; height: 54px; flex: none; object-fit: contain; animation: home-gift-wiggle 2.2s ease-in-out infinite; }
.home-gift > span { flex: 1; min-width: 0; }
.home-gift strong { display: block; font-size: var(--fs-sm); }
.home-gift small { display: block; font-size: var(--fs-xs); color: #6a5233; }
.home-gift-open { flex: none; padding: 6px 12px; border-radius: 999px; background: linear-gradient(#ff5c9a, #d81b5e); color: #fff; font-size: var(--fs-xs); border: 2px solid #f2c45a; }
@keyframes home-gift-glow { 0%,100% { box-shadow: 0 3px 0 #9a6a2a55, 0 0 0 0 #ffd56a00; } 50% { box-shadow: 0 3px 0 #9a6a2a55, 0 0 14px 2px #ffd56acc; } }
@keyframes home-gift-wiggle { 0%,86%,100% { rotate: 0deg; } 90% { rotate: -8deg; } 95% { rotate: 7deg; } }

/* おだんごの 皿（つぎの レベルアップまで） */
.home-plate { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 12px; border-radius: 16px; background: #fffaf0; border: 1px solid #d8bd85; color: #4a3a2a; box-shadow: 0 2px 0 #6e523744; }
.home-plate-icon { width: 42px; height: 42px; flex: none; object-fit: contain; }
.home-plate-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-plate-text strong { font-size: var(--fs-sm); }
.home-plate-text strong b { font-size: var(--fs-lg); color: #b3264e; }
.home-plate-text small { font-size: var(--fs-xs); color: #5f4c35; }
.home-plate-text small b { color: #b3264e; font-size: var(--fs-sm); }
.home-plate-bar { display: block; height: 8px; border-radius: 99px; background: #eee2c8; overflow: hidden; }
.home-plate-bar i { display: block; height: 100%; width: var(--fill); border-radius: inherit; background: linear-gradient(90deg, #f6a6c1, #e05a8a, #f2c45a); transition: width .6s ease; }
.home-plate-go { flex: none; color: #8a6a3e; font-size: 24px; }
.home-plate-go.ready { font-size: var(--fs-xs); color: #fff; background: linear-gradient(#ff5c9a, #d81b5e); border: 2px solid #f2c45a; padding: 6px 10px; border-radius: 999px; animation: home-badge 1.6s ease-in-out infinite; }

/* 妖怪退治・ふしぎ絵巻 */
.home-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.home-tile { display: flex; align-items: center; gap: 8px; min-height: 70px; min-width: 0; padding: 8px 10px; color: #493b28; background: #fff7e5; border: 1px solid #cab37f; border-radius: 16px; box-shadow: 0 2px 0 #6e523744; }
.home-tile > img { width: 40px; height: 40px; flex: none; object-fit: contain; }
.home-tile > span { min-width: 0; display: flex; flex-direction: column; }
.home-tile strong { font-size: var(--fs-sm); white-space: nowrap; }
.home-tile small { font-size: var(--fs-xs); color: #66543d; line-height: 1.35; }
.home-tile em { align-self: flex-start; font-style: normal; font-size: 12px; margin-top: 2px; }
.home-bell { display: inline-flex; align-items: center; gap: 2px; color: #8a5a10; font-weight: 700; }
.home-bell img { width: 18px; height: 18px; }
.home-new { color: #fff; background: #b3264e; padding: 1px 6px; border-radius: 8px; }
.tile-yokai { background: linear-gradient(160deg, #fff7e5, #ffe9d6); }
.tile-album { background: linear-gradient(160deg, #fff7e5, #fbeaf2); }
.home-locked { background: #eae3d2; color: #6e614c; box-shadow: none; }
.home-locked > img { filter: grayscale(.8); opacity: .6; }

/* 今日の れんぞく */
.home-progress { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px; color: #4c4736; background: #fffdf1; border: 1px solid #cbbd9d; border-radius: 15px; }
.home-stamp-strip { display: flex; align-items: center; gap: 10px; }
.home-week { flex: 1; display: grid; grid-template-columns: repeat(7,1fr); list-style: none; margin: 0; padding: 0; text-align: center; font-size: 12px; }
.home-week li { display: grid; justify-items: center; gap: 2px; }
.home-week b { width: 20px; height: 20px; border-radius: 50%; background: #ece5d5; color: #827457; }
.home-week .played b { background: #527e50; color: #fff; }
.home-week .is-today b { outline: 2px solid #a87635; outline-offset: 2px; }
.home-streak { display: flex; align-items: center; gap: 2px; color: #5b633d; font-size: 12px; white-space: nowrap; }
.home-streak b { font-size: var(--fs-xl); padding: 0 2px; color: #b4502b; }
.home-next-reward { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-xs); color: #5d4a2e; }
.home-next-reward img { width: 30px; height: 30px; flex: none; }
.home-next-reward b { color: #b3264e; font-size: var(--fs-sm); }
.home-play-options { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; }
.home-play-options a,.home-check-locked { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 5px 8px; color: #454c38; background: #f8f8ed; border: 1px solid #c4b899; border-radius: 12px; font-size: var(--fs-sm); }
.home-play-options a > b { margin-left: auto; }
.home-play-options small { display: block; font-size: var(--fs-xs); color: #6c644e; }
.home-check-locked { grid-column: 1 / -1; flex-wrap: wrap; font-size: var(--fs-xs); background: #eae3d2; }

/* 季節の 粒 */
.home-season-particles { position: absolute; top: 40px; left: 0; right: 0; height: 200px; overflow: hidden; pointer-events: none; z-index: 1; }
.home-season-particles i { position: absolute; top: -25px; left: calc(3% + var(--i) * 13%); width: 13px; height: 9px; border-radius: 80% 0 80% 0; background: linear-gradient(35deg,#d57c35,#f9c763); animation: home-leaf-fall calc(11s + var(--i) * .6s) linear infinite; animation-delay: calc(var(--i) * -2s); }
[data-home-season="spring"] .home-season-particles i { background: #e9aabc; }
[data-home-season="winter"] .home-season-particles i { background: #fff; width: 5px; height: 5px; border-radius: 50%; }
[data-home-season="summer"] .home-season-particles i { background: #ffffa8; top: calc(8% + var(--i) * 9%); width: 4px; height: 4px; border-radius: 50%; animation-name: home-firefly; }
@keyframes home-leaf-fall { 0% { transform: translate(-20px,-30px) rotate(0); opacity: 0; } 10% { opacity: .8; } 50% { transform: translate(25px,140px) rotate(160deg); } 100% { transform: translate(-10px,300px) rotate(340deg); opacity: 0; } }
@keyframes home-firefly { 0%,100% { transform: translate(0,0); opacity: .1; } 50% { transform: translate(15px,-25px); opacity: .8; } }
.reduce-motion .home-character-art,.reduce-motion .home-season-particles i,.reduce-motion .home-gift,.reduce-motion .home-gift img,.reduce-motion .home-growth-badge,.reduce-motion .home-plate-go { animation: none; }
@media (prefers-reduced-motion: reduce) { .home-character-art,.home-season-particles i,.home-gift,.home-gift img,.home-growth-badge,.home-plate-go { animation: none !important; } }
@media (max-width: 350px) { .home-body { padding: 8px; } .home-tile { padding: 6px; gap: 5px; } .home-tile > img { width: 30px; height: 30px; } .home-game-art { width: 60px; height: 60px; } .home-character { height: 128px; } }
.text-xlarge .home-tile strong { white-space: normal; }
.text-xlarge .home-tiles { grid-template-columns: 1fr; }
.text-xlarge .home-play-options { grid-template-columns: 1fr; }

/* おくりものの ダイアログ */
.gift-dialog .gift-art { display: grid; place-items: center; padding: 6px; }
.gift-dialog .gift-art img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 6px 8px #0003); }
.gift-dialog.opened .gift-art img { animation: gift-pop .7s cubic-bezier(.2,1.6,.4,1) both; }
.gift-dialog .gift-art.big img { width: 180px; height: 180px; }
.gift-lead,.gift-next { text-align: center; }
.gift-got { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--fs-lg); font-weight: 700; color: #4a3520; }
.gift-got b { font-size: calc(var(--fs-xl) * 1.3); color: #b3264e; }
.gift-next { color: #5b4a30; font-size: var(--fs-sm); }
@keyframes gift-pop { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* ===== v3.1: きょうの 脳年齢・キャラの 反応・初日の 妖怪退治の さそい ===== */
.home-character.is-react .home-character-art { animation: home-react .7s cubic-bezier(.2, 1.5, .4, 1) .2s 2, home-breathe 4.6s ease-in-out 1.6s infinite; }
@keyframes home-react { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-14px) scale(1.04); } }
.home-check { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 18px; background: linear-gradient(120deg, #fff8e6, #fff0f5); border: 2px solid #e7c98f; color: #3d2f20; box-shadow: 0 3px 0 #9a6a2a44; }
.home-check.todo { grid-template-columns: 64px 1fr; }
.home-check.todo .img-skin-main { grid-column: 1 / -1; min-height: 60px; }
.home-check-fig { width: 64px; height: 80px; object-fit: contain; object-position: bottom; }
.home-check h2 { margin: 0; font-size: var(--fs-md); color: inherit; }
.home-check p { margin: 0; font-size: var(--fs-xs); color: #6b5638; }
.home-check-crown { display: grid; justify-items: center; font-size: 11px; color: #6b5638; }
.home-check-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; }
.home-check-main small { flex: 1 0 100%; font-size: var(--fs-xs); color: #6b5638; }
.home-check-main b { font-size: calc(var(--fs-xl) * 1.5); line-height: 1.1; color: #b3264e; }
.home-check-main i { font-style: normal; font-size: var(--fs-sm); margin-right: 6px; }
.home-check-main .cka-delta { font-size: 12px; padding: 1px 8px; margin: 0; }
.home-check-main .cka-delta b { font-size: var(--fs-sm); color: inherit; }
.home-check-grades { display: grid; grid-template-columns: 22px 26px; align-items: center; gap: 1px 2px; }
.home-check-grades img { width: 22px; height: 22px; }
.home-check-grades img.mini { width: 26px; height: 26px; }
.home-check.mood-better { box-shadow: 0 0 0 2px #f2c45a, 0 0 14px #ffd76a88; }
.home-yokai-call { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; padding: 10px; border-radius: 18px; background: linear-gradient(120deg, #fff4cc, #ffe0ea); border: 2px solid #d39b3a; color: #3d2f20; box-shadow: 0 0 16px #ffd56a99; }
.home-yokai-art { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; }
.home-yokai-title { width: 100%; max-width: 220px; height: auto; }
.home-yokai-call p { margin: 2px 0 0; font-size: var(--fs-xs); }
.home-yokai-call .img-skin-main { grid-column: 1 / -1; min-height: 62px; }
.reduce-motion .home-character.is-react .home-character-art { animation: none; }

.home-check.todo { grid-template-columns: 52px 1fr 136px; padding: 6px 10px; }
.home-check.todo .img-skin-main { grid-column: auto; min-height: 46px; width: 136px; }
.home-check.todo .home-check-fig { width: 52px; height: 64px; }
.home-check.todo h2 { font-size: var(--fs-sm); }
.text-xlarge .home-check.todo { grid-template-columns: 52px 1fr; }
.text-xlarge .home-check.todo .img-skin-main { grid-column: 1 / -1; width: 100%; }