/* ドパガキ育成計画 — 縦画面優先（幅320pxから）。コミカルで明るい色、動きは「動きを減らす」で止まる */
:root {
  --ink: #2c2546; --muted: #6d6878; --paper: #fffaf2; --line: #eadfce; --night: #2c2546; --accent: #f0954a; --gold: #ffd36b; --sea: #5ab2c8;
  --font: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --pop: cubic-bezier(.2, 1.4, .4, 1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--night); line-height: 1.7; overflow-x: hidden; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, textarea:focus-visible, input:focus-visible, .line:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.app { max-width: 560px; margin: 0 auto; background: var(--paper); min-height: 100vh; min-height: 100svh; }
.screen { display: none; }
.screen.is-active { display: block; }
.btn { display: block; width: 100%; min-height: 50px; padding: 12px 16px; border: 2.5px solid var(--ink); border-radius: 16px; background: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 4px 0 var(--ink); transition: transform .1s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: var(--accent); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.btn small { display: block; font-size: 12px; font-weight: 700; opacity: .8; }
.link { background: none; border: 0; padding: 8px 6px; text-decoration: underline; text-underline-offset: 4px; font-weight: 700; color: var(--muted); }
@keyframes pop { from { transform: scale(.8); opacity: 0; } }
@keyframes inUp { from { transform: translateY(10px); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }

/* タイトル */
#s-title.is-active { display: flex; flex-direction: column; min-height: 100svh; }
.t-art svg { display: block; width: 100%; height: auto; }
.t-body { padding: 16px 20px 28px; }
.t-brand { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.t-brand img { border-radius: 4px; }
.t-title { margin: 6px 0 8px; font-size: clamp(30px, 9.4vw, 42px); line-height: 1.15; letter-spacing: .02em; }
.t-title span { display: block; margin-top: 6px; font-size: .46em; color: var(--accent); letter-spacing: .06em; }
.t-lead { margin: 0 0 16px; font-size: 15px; font-weight: 700; }
.t-btns { display: grid; gap: 10px; }
.t-links { display: flex; justify-content: center; gap: 16px; margin: 10px 0 0; }
.t-meta { margin: 6px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.t-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }

/* 育成 */
#s-play.is-active { display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 480px; background: var(--night); }
.bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); color: #fff; }
.b-day { margin: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.b-day b { font-size: 15px; } .b-day span { font-size: 13px; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.15); }
.b-lv { flex: 1; margin: 0; min-width: 0; font-size: 11.5px; font-weight: 800; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.b-icons { display: flex; gap: 6px; }
.ib { width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); font-size: 16px; line-height: 1; }
.stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.art-wrap { position: relative; height: 100%; width: auto; max-width: 100%; aspect-ratio: 360 / 320; }
@supports not (aspect-ratio: 1) { .art-wrap { width: 100%; height: auto; } }
.layers, .layer { position: absolute; inset: 0; }
.layer svg { display: block; width: 100%; height: 100%; }
.layer.fadein { animation: fadeIn .5s ease both; }
.tint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; transition: background-color 1.6s; }
.tint.t-morning { background-color: rgba(255, 236, 205, .14); } .tint.t-night { background-color: rgba(52, 62, 128, .18); }
.stage.epic .layer svg { animation: epic 2.6s ease; }
@keyframes epic { 30%, 70% { filter: saturate(1.4) brightness(1.08); transform: scale(1.02); } }
/* タップできる物 */
.hits { position: absolute; inset: 0; }
.hit { position: absolute; border: 0; border-radius: 12px; background: transparent; padding: 0; }
.hit::after { content: ''; position: absolute; inset: -3px; border-radius: 14px; border: 2.5px dashed rgba(255, 211, 107, .95); opacity: 0; animation: glowItem 2.6s ease-in-out infinite; }
.hit:hover::after, .hit:focus-visible::after { opacity: 1; animation: none; }
@keyframes glowItem { 40%, 60% { opacity: .9; } }
.hit.q::after { border-style: solid; border-radius: 50%; border-color: #fff; animation-delay: .8s; }
.hit.q::before { content: '？'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff8d6; border: 2px solid var(--ink); font-size: 12px; font-weight: 900; color: var(--ink); animation: qbob 2.4s ease-in-out infinite; }
@keyframes qbob { 50% { transform: translateY(-3px); } }
.hit.tap { animation: tapItem .35s ease; }
@keyframes tapItem { 40% { transform: scale(.92); } }
.ipop { position: absolute; z-index: 6; display: grid; gap: 4px; padding: 6px; border-radius: 14px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 8px 20px rgba(0,0,0,.25); animation: pop .25s var(--pop); }
.ipop button { min-height: 40px; padding: 6px 12px; border: 0; border-radius: 10px; background: #fff5e6; font-weight: 800; font-size: 14px; text-align: left; white-space: nowrap; }
/* 絵の中の小さな動き */
.art .lid { animation: blink 5.2s infinite; }
@keyframes blink { 0%, 93% { opacity: 0; } 94.5%, 96.5% { opacity: 1; } 98%, 100% { opacity: 0; } }
.art .breath { animation: breathe 4s ease-in-out infinite; }
.art .headbob { animation: headbob 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(-1px); } }
@keyframes headbob { 50% { transform: translateY(-1.6px); } }
.art .glowscr { animation: glow 2.4s ease-in-out infinite; } @keyframes glow { 50% { opacity: .72; } }
.art .notif { animation: notif 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes notif { 50% { transform: scale(1.25); } }
.art .tw, .art .twinkle { animation: tw 2.4s ease-in-out infinite alternate; } @keyframes tw { to { opacity: .35; } }
.art .cloud { animation: cloud 16s linear infinite alternate; } @keyframes cloud { to { transform: translateX(26px); } }
.art .bubble .d1, .art .bubble .d2, .art .bubble .d3 { animation: dots 1s ease-in-out infinite; } .art .bubble .d2 { animation-delay: .15s; } .art .bubble .d3 { animation-delay: .3s; }
@keyframes dots { 40% { transform: translateY(-3px); } }
.art .rays { animation: spin 30s linear infinite; transform-origin: 180px 110px; transform-box: view-box; } .lvsvg .rays { transform-origin: 180px 150px; }
@keyframes spin { to { transform: rotate(360deg); } }
.art .pop { animation: popUp .6s var(--pop) both; } @keyframes popUp { from { transform: translateY(40px) scale(.9); opacity: 0; } }
.art .float { animation: float 3s ease-in-out infinite; } @keyframes float { 50% { transform: translateY(-6px); } }
.art .hook { animation: hookG 2.6s ease-in-out infinite; } @keyframes hookG { 50% { filter: drop-shadow(0 0 6px #fff4c4); } }
.art .steam { animation: steam 2.4s ease-in-out infinite; } @keyframes steam { 50% { transform: translateY(-4px); opacity: .5; } }
.art .spot { animation: spot 4s ease-in-out infinite alternate; } @keyframes spot { to { transform: translate(14px, 8px); opacity: .1; } }
.art .sunbeam { animation: fadeIn 2s ease both; }
.art .qmark { display: none; }
.kai.p-drink { animation: none; }
/* 擬音（HTMLの文字。絵の上に一瞬だけ） */
.sfx { position: absolute; inset: 0; pointer-events: none; }
.sx { position: absolute; left: 50%; top: 30%; font-size: clamp(18px, 6vw, 26px); font-weight: 900; color: #fff; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); animation: sx 1.6s ease forwards; white-space: nowrap; }
@keyframes sx { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6) rotate(-6deg); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1) rotate(-6deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -12px) rotate(-6deg); } }
.sx-sip, .sx-eat { left: 78%; top: 34%; } .sx-curtainOpen, .sx-curtainClose { left: 80%; top: 14%; } .sx-laundry { left: 24%; top: 50%; } .sx-charge { left: 42%; top: 28%; } .sx-door { left: 14%; top: 38%; } .sx-ninja { left: 34%; top: 26%; font-size: 30px; } .sx-rest { left: 50%; top: 44%; color: #c9d3ea; }
.sx-notif, .sx-putdown, .sx-typing, .sx-game { left: 52%; top: 66%; }
/* スマホのメッセージ */
.phone { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(76%, 320px); max-height: 70%; display: flex; flex-direction: column; border-radius: 22px; background: #f2f0f6; border: 6px solid #1c1b24; box-shadow: 0 16px 40px rgba(0,0,0,.4); overflow: hidden; z-index: 3; }
.phone.pop { animation: phoneIn .35s var(--pop); } @keyframes phoneIn { from { transform: translate(-50%, 30px); opacity: 0; } }
.ph-h { margin: 0; padding: 8px 12px; background: #fff; font-size: 13px; font-weight: 800; border-bottom: 1px solid #e3e0ea; }
.ph-b { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.pm { margin: 0; max-width: 86%; padding: 8px 11px; border-radius: 14px; font-size: 14px; line-height: 1.55; animation: inUp .3s ease; }
.pm.them { align-self: flex-start; background: #fff; border-top-left-radius: 4px; } .pm.me { align-self: flex-end; background: #ffd9b8; border-top-right-radius: 4px; }
.pm.typing { display: flex; gap: 4px; padding: 10px 12px; } .pm.typing i { width: 6px; height: 6px; border-radius: 50%; background: #b8b3c4; animation: dotsI 1s ease-in-out infinite; }
.pm.typing i:nth-child(2) { animation-delay: .15s; } .pm.typing i:nth-child(3) { animation-delay: .3s; } @keyframes dotsI { 40% { transform: translateY(-4px); } }
/* カットイン（大げさなリアクション） */
.cut { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(28, 22, 50, .55); cursor: pointer; }
.cut-art { width: min(96%, 520px); transform: skewY(-3deg); border: 4px solid var(--ink); border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); background: #fff; }
.cut-art svg { display: block; width: 100%; height: auto; }
.cut.in .cut-art { animation: cutIn .45s var(--pop); } @keyframes cutIn { from { transform: translateX(-60%) skewY(-3deg); opacity: 0; } }
.cut-t { margin: 0; max-width: 92%; padding: 10px 16px; border-radius: 14px; background: #fff; border: 3px solid var(--ink); font-size: clamp(16px, 4.8vw, 20px); font-weight: 900; line-height: 1.45; text-align: center; box-shadow: 0 4px 0 var(--ink); }
.cut.in .cut-t { animation: pop .4s var(--pop) .12s both; }
/* レベルアップ */
.lvup { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #2c2546; cursor: pointer; }
.lv-art { width: min(100%, 520px); } .lv-art svg { display: block; width: 100%; height: auto; }
.lv-txt { position: absolute; left: 0; right: 0; top: 10px; text-align: center; color: #fff; }
.lv-k { margin: 0; font-size: 14px; font-weight: 900; color: var(--gold); letter-spacing: .1em; }
.lv-n { margin: 2px 0 0; font-size: clamp(30px, 10vw, 44px); font-weight: 900; -webkit-text-stroke: 1px #fff; text-shadow: 0 4px 0 var(--accent); }
.lv-t { display: inline-block; margin: 4px 0 0; padding: 4px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 900; }
.lvup.in .lv-txt { animation: pop .6s var(--pop) .2s both; }
/* 日付のカード */
.daycard { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(28, 22, 50, .88); color: #fff; text-align: center; }
.daycard.in { animation: fadeIn .4s ease; }
.d-n { margin: 0; font-size: 34px; font-weight: 900; } .d-w { margin: 0; font-size: 14px; opacity: .8; }
.d-st { display: flex; gap: 10px; margin: 14px 0; } .d-st i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); }
.d-st i.done { background: rgba(255,255,255,.5); } .d-st i.good { background: var(--gold); border-color: var(--gold); } .d-st i.now { border-color: var(--accent); background: var(--accent); animation: pop .5s var(--pop); }
.d-m { margin: 0; font-size: 14px; font-weight: 700; }
.chip { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4; margin: 0; max-width: 92%; padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 800; border: 2px solid var(--gold); box-shadow: 0 4px 12px rgba(0,0,0,.2); text-align: center; }
.chip.show { animation: chip 2.6s ease both; } @keyframes chip { 0% { opacity: 0; transform: translate(-50%, -6px); } 12%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
/* 文章と選択肢 */
.panel { flex: none; padding: 10px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--paper); border-radius: 18px 18px 0 0; }
.line { position: relative; min-height: 128px; cursor: pointer; }
.line.in { animation: inUp .22s ease; }
.who { margin: 0 0 2px; min-height: 1.4em; font-size: 13px; font-weight: 800; color: var(--muted); }
.w-kai .who { color: #d27a34; } .w-mio .who { color: #3f9584; } .w-taku .who { color: #6a5ad8; } .w-mom .who { color: #b05a4b; }
.txt { margin: 0; font-size: 16.5px; line-height: 1.8; font-weight: 600; }
.w-n .txt { color: #4a4458; font-weight: 500; } .w-phone .txt { color: var(--muted); font-size: 14px; }
.next { position: absolute; right: 2px; bottom: 0; color: var(--accent); font-size: 12px; animation: blinkN 1.2s ease-in-out infinite; } @keyframes blinkN { 50% { opacity: .25; } }
.q { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--muted); }
.c-list { display: grid; gap: 7px; }
.c-list.acts { grid-template-columns: 1fr 1fr; max-height: 34vh; overflow-y: auto; padding: 2px; }
.opt { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 50px; padding: 7px 12px; text-align: left; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--ink); line-height: 1.3; transition: transform .12s, opacity .3s; }
.acts .opt { padding-left: 38px; min-height: 48px; }
.oi { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 19px; }
.opt b { font-size: 14.5px; } .opt small { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.opt.tired { border-style: dashed; } .opt.tired small { color: #b05a4b; }
.choices.in .opt { animation: inUp .3s ease both; }
.opt.chosen { transform: scale(.96); background: #fff2df; border-color: var(--accent); }
.choices.decided .opt:not(.chosen) { opacity: 0; transform: translateY(6px); }
.hint { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
@media (max-height: 640px) { .line { min-height: 104px; } .txt { font-size: 15px; line-height: 1.65; } .c-list.acts { max-height: 30vh; } .opt { min-height: 44px; } }

/* 結果 */
#s-result { padding: 16px 14px 32px; background: #f3ebde; }
.card { padding: 14px; border-radius: 18px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.card.in { animation: popUp2 .6s var(--pop); } @keyframes popUp2 { from { transform: translateY(30px) scale(.95); opacity: 0; } }
.c-k { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: var(--muted); }
.c-art svg { display: block; width: 100%; height: auto; border-radius: 10px; border: 2px solid var(--ink); }
.c-end { margin: 12px 0 4px; font-size: 22px; line-height: 1.4; color: var(--ink); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--ec) 45%, transparent) 62%); display: inline; }
.c-catch { margin: 8px 0 0; font-size: 14.5px; font-weight: 800; }
.c-lv { margin: 6px 0 0; display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--ink); color: var(--gold); font-size: 12.5px; font-weight: 800; }
.c-quote { margin: 8px 0 0; font-size: 14px; color: #4a4458; }
.block { margin-top: 14px; padding: 14px; border-radius: 14px; background: #fff; }
.block h3 { margin: 0 0 8px; font-size: 16px; } .block p { margin: 0; font-size: 14px; }
.grow { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.grow li { display: grid; grid-template-columns: 8.6em 1fr; gap: 2px 8px; align-items: center; font-size: 13px; font-weight: 700; }
.grow small { grid-column: 2; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.gbar { position: relative; display: block; height: 12px; border-radius: 6px; background: #f1e9dc; overflow: hidden; }
.gbar b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 6px; background: var(--ec, var(--accent)); animation: grow 1s ease both .3s; transform-origin: left; }
.gbar em { position: absolute; top: 0; bottom: 0; left: var(--w); width: 2px; background: var(--ink); opacity: .45; }
@keyframes grow { from { transform: scaleX(0); } }
.small { margin: 6px 0 0 !important; font-size: 11.5px !important; color: var(--muted); }
.moments { margin: 0; padding-left: 1.2em; font-size: 13.5px; } .moments li { margin: 3px 0; }
.tpl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chipb { padding: 6px 12px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; font-size: 13px; font-weight: 700; } .chipb.is-on { background: var(--ink); color: #fff; }
.share-label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--muted); }
textarea { width: 100%; padding: 10px; border: 2px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; }
.s-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.btn.x { background: #111; color: #fff; }
.r-btns { display: grid; gap: 10px; margin-top: 16px; }
.r-hint { margin: 0; font-size: 13px; text-align: center; color: var(--muted); }
.r-note { margin: 16px 0 0; font-size: 12px; color: var(--muted); }
/* ダイアログ */
.modal { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 18, 30, .6); }
.modal.m-in .m-box { animation: pop .3s var(--pop); }
.m-box { width: min(100%, 520px); max-height: 88vh; overflow-y: auto; padding: 18px; border-radius: 18px; background: var(--paper); display: grid; gap: 10px; }
.m-box h2 { margin: 0; font-size: 18px; } .m-txt { margin: 0; font-size: 14px; }
.row { display: flex; align-items: center; gap: 8px; font-size: 15px; } .row input[type=checkbox] { width: 22px; height: 22px; } .row input[type=range] { flex: 1; }
.album { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.album li { padding: 10px 12px; border-radius: 12px; background: #fff; border-left: 6px solid #ccc; } .album li.got { border-left-color: var(--c); }
.album b { display: block; } .album span { font-size: 12.5px; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.toast.show { animation: toast 2.4s ease both; } @keyframes toast { 10%, 85% { transform: translate(-50%, 0); opacity: 1; } }
@media (max-width: 360px) { .b-lv { display: none; } }
/* 動きを減らす */
html.rm *, html.rm *::before, html.rm *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
html.rm .hit::after { opacity: .7; }

/* ===================== v2：育成の手ごたえ ===================== */
.t-now { margin: 0 0 6px; display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; }
.t-away { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #fff5e6; font-size: 12.5px; color: var(--muted); }
/* 通知の数（スマホのある場所に） */
.nbadge { position: absolute; z-index: 2; transform: translate(-50%, -100%); min-width: 26px; padding: 2px 7px; border-radius: 999px; background: #e2604f; color: #fff; font-size: 12px; font-weight: 900; text-align: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); pointer-events: none; }
.nbadge.many { background: #c2392b; font-size: 13px; }
.nbadge.bump { animation: nbump .6s var(--pop); } @keyframes nbump { 40% { transform: translate(-50%, -100%) scale(1.4); } }
/* ステージごとの待機モーション（動きのキレ） */
.art .st-1 .breath { animation: slumpSway 5s ease-in-out infinite; }
@keyframes slumpSway { 50% { transform: translateY(1.5px) rotate(.4deg); } }
.art .bouncy { animation: bouncy 1.6s ease-in-out infinite; } @keyframes bouncy { 50% { transform: translate(196px, 319px) scale(.64); } }
.art .st-3 .breath { animation-duration: 2.6s; } .art .st-4 .breath { animation-duration: 3.4s; }
.art .st-5 .breath { animation: tiredBreath 6s ease-in-out infinite; } @keyframes tiredBreath { 50% { transform: translateY(2px); } }
.art .stretchy { animation: stretchy 1.8s ease-in-out 2; } @keyframes stretchy { 50% { transform: translate(294px, 300px) scale(.56, .6); } }
.art .squat { animation: squat 1s ease-in-out 3; } @keyframes squat { 50% { transform: translate(292px, 346px) scale(.62, .5); } }
.art .restart { animation: restartPop .6s var(--pop); } @keyframes restartPop { 40% { transform: translate(196px, 314px) scale(.68); } }
.art .pop-in { animation: popIn .6s var(--pop) both; } @keyframes popIn { from { opacity: 0; transform: translateY(-6px); } }
.art .plush.stare circle { transition: none; } .art .plush.stare { animation: stare 3s ease-in-out infinite; } @keyframes stare { 50% { transform: translateY(-1px); } }
/* 片付け：物が一つずつ収納される／洗濯物がたたまれて引き出しへ／サボると物が戻ってくる */
.art .stow { animation: stow .7s ease-in forwards; } .art .stow.s1 { animation-delay: .1s; } .art .stow.s2 { animation-delay: .6s; } .art .stow.s3 { animation-delay: 1.1s; }
@keyframes stow { 0% { transform: none; opacity: 1; } 60% { transform: translate(40px, -10px) rotate(12deg); opacity: 1; } 100% { transform: translate(70px, 20px) scale(.4); opacity: 0; } }
.art .fold { animation: fold 1.2s ease-in forwards .2s; } @keyframes fold { 50% { transform: translate(100px, -60px) rotate(-10deg); } 100% { transform: translate(250px, -70px) scale(.3); opacity: 0; } }
.art .ret { animation: ret .7s cubic-bezier(.3, 1.4, .5, 1) both; } .art .ret.r2 { animation-delay: .4s; } .art .ret.r3 { animation-delay: .8s; } .art .ret.r4 { animation-delay: 1.2s; }
@keyframes ret { from { transform: translateY(-40px); opacity: 0; } }
/* 散歩：歩き方はステージで変わる */
.art .legA, .art .legB { transform-box: fill-box; transform-origin: 50% 0; }
.art .walker .legA { animation: legA 1.1s ease-in-out infinite; } .art .walker .legB { animation: legB 1.1s ease-in-out infinite; }
.art .walker.st-1 .legA, .art .walker.st-1 .legB { animation-duration: 1.7s; } .art .walker.st-5 .legA, .art .walker.st-5 .legB { animation-duration: 1.9s; }
.art .walker.st-3 .legA, .art .walker.st-3 .legB, .art .walker.st-4 .legA, .art .walker.st-4 .legB { animation-duration: .8s; }
@keyframes legA { 50% { transform: rotate(14deg); } } @keyframes legB { 50% { transform: rotate(-14deg); } }
.art .walker .walkbody { animation: walkBob .55s ease-in-out infinite; } @keyframes walkBob { 50% { transform: translateY(-3px); } }
.art .scrollbg { animation: scrollbg 9s linear infinite; } .art .scrollbg.fast { animation-duration: 3s; } @keyframes scrollbg { to { transform: translateX(-360px); } }
/* ステージの切り替え */
.lvup.down { background: #3a3350; } .lvup.down .lv-k { color: #e9b4aa; }
.lv-art svg { display: block; width: 100%; height: auto; } .lvup .lv-txt { top: auto; bottom: 18px; padding: 0 16px; }
.lv-t { max-width: 92%; font-size: 13px; line-height: 1.5; }
.cmpsvg .before { opacity: .85; } .lvup.in .cmpsvg .after { animation: popUp .7s var(--pop) .5s both; }
/* 日付カード：きのうの変化とステージ */
.d-notes { margin: 0 0 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 92%; }
.d-notes p { width: 100%; margin: 0; font-size: 12px; opacity: .7; }
.d-notes span { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.15); font-size: 12.5px; font-weight: 800; animation: inUp .4s ease both; }
.d-st i.s1 { background: #8a7fa8; border-color: #8a7fa8; } .d-st i.s2 { background: #f0954a; border-color: #f0954a; } .d-st i.s3 { background: #5f9e8f; border-color: #5f9e8f; } .d-st i.s4 { background: #7d6cf0; border-color: #7d6cf0; } .d-st i.s5 { background: #c97b6c; border-color: #c97b6c; }
.d-st { flex-wrap: wrap; justify-content: center; } .d-st i { width: 14px; height: 14px; }
.d-stage { margin: 4px 0 6px; padding: 3px 14px; border-radius: 999px; background: var(--c); color: #fff; font-weight: 900; font-size: 15px; }
/* 選択肢：休むのがおすすめ／サボる */
.opt.rec { border-color: #6a8fd0; background: #eef3ff; } .opt.rec small { color: #4a6fb0; font-weight: 800; }
.opt.skip { border-style: dashed; background: #f5f2f7; } .opt.skip b { color: #6d6878; }
.line.w-auto { background: linear-gradient(90deg, #fff7df, transparent); border-radius: 12px; } .w-auto .who { color: #c98a00; }
/* 結果：ステージの移り変わり */
.sub-h { margin: 12px 0 6px; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.tl { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.tl li { height: 26px; border-radius: 6px; display: flex; align-items: flex-end; justify-content: center; font-size: 10px; color: #fff; font-weight: 800; animation: inUp .4s ease both; }
.tl li.s1, .tl-legend .s1 i { background: #8a7fa8; } .tl li.s2, .tl-legend .s2 i { background: #f0954a; } .tl li.s3, .tl-legend .s3 i { background: #5f9e8f; } .tl li.s4, .tl-legend .s4 i { background: #7d6cf0; } .tl li.s5, .tl-legend .s5 i { background: #c97b6c; }
.tl li.s2 { height: 32px; } .tl li.s3 { height: 40px; } .tl li.s4 { height: 48px; } .tl li.s5 { height: 22px; }
.tl { align-items: end; }
.tl-legend { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--muted); }
.tl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 3px; vertical-align: -1px; }
.counts { margin: 10px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.counts li { padding: 8px 4px; border-radius: 10px; background: #f7f1e6; text-align: center; font-size: 11px; color: var(--muted); font-weight: 700; line-height: 1.4; }
.counts b { display: block; font-size: 18px; color: var(--ink); }
html.rm .art .scrollbg, html.rm .art .walker * { animation: none !important; }
/* ステージ切り替え：絵の下に文字（重ねない） */
.lvup { justify-content: center; gap: 8px; padding: 10px 0; }
.lvup .lv-art { width: min(100%, 480px); max-height: 58%; display: flex; justify-content: center; }
.lvup .lv-art svg { width: auto; max-width: 100%; height: 100%; max-height: 100%; }
.lvup .lv-txt { position: static; padding: 0 16px; }
.lv-n { font-size: clamp(24px, 7.5vw, 36px); }

/* ===== v3：物語の演出 ===== */
.w-hina .who { color: #b8862a; } .w-goto .who { color: #4f7590; } .w-clerk .who, .w-minami .who { color: #7f6296; }
.t-lead { font-weight: 700; } .t-lap { margin: 8px 0 0; font-size: 13px; font-weight: 800; color: var(--accent); text-align: center; min-height: 0; } .t-lap:empty { display: none; }
.b-day span { max-width: 13em; overflow: hidden; text-overflow: ellipsis; }
.d-n.ch { font-size: clamp(24px, 7.4vw, 32px); padding: 0 12px; line-height: 1.35; }
.d-st i.s4 { background: var(--gold); border-color: var(--gold); }
.d-m { padding: 0 18px; } .d-lap { margin: 10px 0 0; padding: 2px 12px; border-radius: 999px; background: var(--accent); font-size: 13px; font-weight: 900; }
.c-list.three { gap: 6px; } .c-list.three .opt { min-height: 46px; }
/* 大事な会話の「間」：少しだけ寄って、静かになる */
.stage .layers { transition: transform 1.2s ease, filter 1.2s ease; transform-origin: 50% 46%; }
.stage.quiet .layers { transform: scale(1.06); filter: saturate(.85); }
.line.w-pause .txt { color: var(--muted); letter-spacing: .4em; text-align: center; font-size: 20px; }
/* スマホを伏せる・見る */
.flip { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(28, 22, 50, .6); cursor: pointer; }
.flip-p { width: 74px; height: 128px; perspective: 400px; }
.flip-p i { display: block; width: 100%; height: 100%; border-radius: 14px; border: 5px solid #24222c; background: linear-gradient(#c3e5ff, #fbe7cf); box-shadow: 0 8px 20px rgba(0,0,0,.35); transition: transform .45s var(--pop), background .2s; }
.flip-p.down i { transform: rotateY(180deg) scale(.92); background: #3a3d4c; }
.flip-t { margin: 0; padding: 6px 16px; border-radius: 999px; background: #fff; font-weight: 900; font-size: 16px; }
/* 通知がたまる */
.nt { position: absolute; max-width: 52%; padding: 6px 10px; border-radius: 12px; background: #fff; border: 2px solid var(--ink); font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 0 rgba(0,0,0,.2); animation: ntIn 3.4s ease both; }
@keyframes ntIn { 0% { opacity: 0; transform: translateY(-8px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 深呼吸 */
.brov { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(255, 244, 214, .55); cursor: pointer; }
.brov i { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 4px solid rgba(240, 149, 74, .8); background: rgba(255, 255, 255, .35); transition: transform 1.5s ease-in-out; transform: scale(.6); }
.brov.in-hale i { transform: scale(1.15); } .brov.ex-hale i { transform: scale(.6); }
.brov p { position: relative; margin: 0; font-size: 26px; font-weight: 900; color: var(--ink); }
.art .sunrise { animation: sunrise 6s ease-in-out infinite alternate; } @keyframes sunrise { to { transform: translateY(-4px); opacity: .85; } }
.end-anim svg { animation: endIn 1.4s ease both; } @keyframes endIn { from { filter: brightness(1.25) saturate(.6); transform: scale(1.04); } }
/* 結果カード */
.c-title { margin: 8px 0 0; display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--ec); color: var(--ink); font-size: 13px; font-weight: 900; }
.c-now { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px; border-radius: 12px; background: #f6efe4; }
.c-face { flex: none; width: 70px; height: 77px; border-radius: 10px; background: #fff; border: 2px solid var(--ink); overflow: hidden; } .c-face svg { display: block; width: 100%; height: 100%; }
.c-now .c-lv { margin: 0; display: block; padding: 0; background: none; color: var(--ink); font-size: 13px; line-height: 1.5; } .c-now .c-lv small { color: var(--muted); font-weight: 700; }
#r-grow, #r-stumble { padding-left: 1.2em; list-style: disc; display: block; } #r-grow li, #r-stumble li { display: list-item; margin: 4px 0; font-size: 13.5px; font-weight: 700; }
#r-stumble li { font-weight: 600; color: #4a4458; }
.path { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.path li { display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 999px; background: #f6efe4; font-size: 12.5px; font-weight: 800; }
.path li i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); }
.path li + li::before { content: '→'; margin-right: 2px; color: var(--muted); }
html.rm .stage .layers { transition: none; } html.rm .flip-p i, html.rm .brov i { transition: none; }
.panel { min-height: 152px; }
@media (max-height: 640px) { .panel { min-height: 128px; } }