/* ===== トークン ===== */
:root{
  --bg:#F8F1E5;
  --bg-deep:#F1E6D2;
  --card:#FFFDF8;
  --ink:#5C4B3B;
  --soft:#9C8A76;
  --faint:#B5A48E;
  --line:#EDDFCC;
  --pink:#E8A9A9;
  --pink-soft:#F6D7D2;
  --pink-deep:#D98C8C;
  --brown:#C8A483;
  --radius:24px;
  --shadow:0 6px 24px rgba(92,75,59,.08);
}

/* ===== ベース ===== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;background:#EADCC4;color-scheme:light}
body{
  margin:0;min-height:100%;
  font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;
  background:radial-gradient(120% 90% at 50% 0%,#F3E8D6 0%,#EADCC4 100%) fixed;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
button{font-family:inherit;color:inherit}
.app{
  max-width:520px;margin:0 auto;min-height:100dvh;
  background:linear-gradient(180deg,#FAF4E9 0%,#F5EBDA 100%);
  box-shadow:0 0 48px rgba(92,75,59,.16);
  display:flex;flex-direction:column;position:relative;
}

/* ===== 画面切替 ===== */
.screen{display:none;flex-direction:column;flex:1;min-height:100dvh}
.screen.active{display:flex;animation:screenIn .32s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== トップバー ===== */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:10px;
  min-height:56px;padding:8px 14px;
  background:rgba(250,244,233,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.topbar-title{font-size:16px;font-weight:700;letter-spacing:.02em}
.logo-mini{flex:1}
.back-btn{
  width:38px;height:38px;border:none;border-radius:50%;
  background:#FFFDF8;border:1px solid var(--line);
  font-size:22px;line-height:1;cursor:pointer;color:var(--soft);
  display:flex;align-items:center;justify-content:center;padding-bottom:3px;
  transition:transform .15s,background .2s;
  flex-shrink:0;
}
.back-btn:active{transform:scale(.9)}
.season-chip{
  font-size:12px;color:var(--soft);
  background:#FFFDF8;border:1px solid var(--line);
  padding:4px 12px;border-radius:999px;
}
.sound-btn{
  font-size:14px;background:#FFFDF8;border:1px solid var(--line);
  padding:4px 10px;border-radius:999px;cursor:pointer;
  transition:transform .15s;
}
.sound-btn:active{transform:scale(.9)}

/* ===== 共通 ===== */
.content{flex:1;padding:18px 16px 28px;display:flex;flex-direction:column;gap:14px}
.greet{margin:2px 4px 0;font-size:17px;font-weight:700}
.avatar{display:inline-block;flex-shrink:0;position:relative}
/* 元気度のしるし：アイコンの右上に 5=♬ 4=♪ 3=☺ 2=☁ 1=☂。白丸バッジで目立たせる
   \FE0E は「絵文字ではなくテキストで表示する」ための指定 */
.avatar.genki1::after,.avatar.genki2::after,.avatar.genki3::after,.avatar.genki4::after,.avatar.genki5::after{
  position:absolute;top:-7px;right:-8px;pointer-events:none;z-index:1;
  width:21px;height:21px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1.5px solid var(--line);
  box-shadow:0 2px 6px rgba(92,75,59,.22);
  font-size:13px;line-height:1;font-weight:700;
  font-family:'Hiragino Sans','Yu Gothic',sans-serif;
}
.avatar.genki5::after{content:"\266C\FE0E";color:#E0507A;border-color:#F2B6C6}
.avatar.genki4::after{content:"\266A\FE0E";color:#E8833C;border-color:#F2CDA8}
.avatar.genki3::after{content:"\263A\FE0E";color:#69A05E;border-color:#C2D8B8;font-size:14px}
.avatar.genki2::after{content:"\2601\FE0E";color:#7E96B0;border-color:#C4D2DE}
.avatar.genki1::after{content:"\2602\FE0E";color:#4F74C8;border-color:#B9C8E8}
/* 小さいアイコンでは、しるしも小さく（犬がかくれすぎないように） */
.av-36.genki1::after,.av-36.genki2::after,.av-36.genki3::after,.av-36.genki4::after,.av-36.genki5::after,
.av-44.genki1::after,.av-44.genki2::after,.av-44.genki3::after,.av-44.genki4::after,.av-44.genki5::after{
  width:14px;height:14px;font-size:9px;top:-3px;right:-4px;border-width:1px;
}
.av-36.genki3::after,.av-44.genki3::after{font-size:10px}
/* 元気度ごとの、アイコンまわりの ほんのりした光 */
.avatar.genki5 svg{filter:drop-shadow(0 0 8px rgba(224,80,122,.5))}
.avatar.genki4 svg{filter:drop-shadow(0 0 7px rgba(232,131,60,.45))}
.avatar.genki3 svg{filter:drop-shadow(0 0 6px rgba(105,160,94,.38))}
.avatar.genki2 svg{filter:saturate(.85) drop-shadow(0 0 6px rgba(126,150,176,.5))}
.avatar.genki1 svg{filter:saturate(.7) brightness(.97) drop-shadow(0 0 6px rgba(79,116,200,.5))}
.avatar.genki1 svg .eye{animation:none;transform:scaleY(.55)}
/* 元気度に応じて、犬のアニメーションも変わる（高いと はずむ呼吸、低いと しずんだ呼吸） */
@keyframes dogIdleHappy{
  0%{transform:scale(1) rotate(0deg)}
  12%{transform:scale(1.035) rotate(0deg)}
  24%{transform:scale(1) rotate(0deg)}
  38%{transform:scale(1.025) rotate(4deg)}
  48%{transform:scale(1.025) rotate(-3deg)}
  58%{transform:scale(1) rotate(0deg)}
  76%{transform:scale(1.035) rotate(0deg)}
  100%{transform:scale(1) rotate(0deg)}
}
@keyframes dogIdleSad{
  0%,100%{transform:scale(1) translateY(0)}
  30%{transform:scale(1.01) translateY(0)}
  65%{transform:scale(.995) translateY(1.2%)}
}
/* 一瞬の演出：大よろこびの かがやき／しょんぼりの くすみ（元気度の光より優先） */
.avatar.cheer svg{filter:drop-shadow(0 0 12px rgba(242,195,80,.85)) !important;transition:filter .25s}
.avatar.gloom svg{filter:grayscale(.55) brightness(.94) !important;transition:filter .25s}
.avatar.genki5 svg{animation:dogIdleHappy 2.8s ease-in-out infinite;animation-delay:var(--d,0s)}
.avatar.genki4 svg{animation:dogIdleHappy 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.avatar.genki3 svg{animation-duration:5.5s}
.avatar.genki2 svg{animation:dogIdleSad 6s ease-in-out infinite;animation-delay:var(--d,0s)}
.avatar.genki1 svg{animation:dogIdleSad 7s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes sparkle{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.18)}}
.avatar svg{
  width:100%;height:100%;display:block;
  transform-origin:50% 62%;
  animation:dogIdle 7.5s ease-in-out infinite;animation-delay:var(--d,0s);
}
/* 呼吸でかすかにふくらみ、ときどき首をかしげる */
@keyframes dogIdle{
  0%{transform:scale(1) rotate(0deg)}
  20%{transform:scale(1.014) rotate(0deg)}
  40%{transform:scale(1) rotate(0deg)}
  55%{transform:scale(1.012) rotate(3deg)}
  64%{transform:scale(1.012) rotate(3deg)}
  72%{transform:scale(1) rotate(0deg)}
  86%{transform:scale(1.014) rotate(0deg)}
  100%{transform:scale(1) rotate(0deg)}
}
.av-36{width:36px;height:36px}
.av-44{width:44px;height:44px}
.av-64{width:64px;height:64px}
.av-72{width:72px;height:72px}
.av-96{width:96px;height:96px}
.av-120{width:120px;height:120px}
.avatar .eye{transform-box:fill-box;transform-origin:center;animation:blink 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes blink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
/* ときどき耳がぴくっと動く */
.avatar .ear{
  transform-box:fill-box;transform-origin:50% 88%;
  animation:earTwitch 5.5s ease-in-out infinite;animation-delay:var(--d,0s);
}
.avatar .ear-r{animation-delay:calc(var(--d,0s) + 2.6s)}
.avatar .ear-floppy{transform-origin:50% 12%}
@keyframes earTwitch{
  0%,86%,100%{transform:rotate(0deg)}
  89%{transform:rotate(-7deg)}
  92%{transform:rotate(4deg)}
  95%{transform:rotate(0deg)}
}
/* ときどき舌を出してハーハーする */
.avatar .tongue{
  transform-box:fill-box;transform-origin:50% 0%;
  opacity:0;animation:pant 9s ease-in-out infinite;
  animation-delay:calc(var(--d,0s) + 1.2s);
}
@keyframes pant{
  0%,55%{opacity:0;transform:scaleY(.25)}
  58%{opacity:1;transform:scaleY(1)}
  61%{transform:scaleY(.68)}
  64%{transform:scaleY(1)}
  67%{transform:scaleY(.68)}
  70%{transform:scaleY(1)}
  73%{transform:scaleY(.72)}
  76%{opacity:1;transform:scaleY(1)}
  81%,100%{opacity:0;transform:scaleY(.25)}
}
/* 眠っているときは舌を出さない */
.walk-dog.sleepy svg .tongue{animation:none;opacity:0}
/* 深夜はみんな眠そう：舌をしまい、目を細める */
.late-night .avatar svg .tongue{animation:none;opacity:0}
.late-night .avatar svg .eye{animation:none;transform:scaleY(.4)}
.avatar-paw{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--pink-soft);border-radius:50%;font-size:18px;
}

/* ===== ボタン ===== */
.btn-primary{
  width:100%;margin-top:20px;padding:14px;border:none;border-radius:999px;
  background:linear-gradient(135deg,#ECA6A0,#DB8A8A);
  color:#fff;font-size:16px;font-weight:700;letter-spacing:.06em;
  cursor:pointer;box-shadow:0 6px 16px rgba(217,140,140,.38);
  transition:transform .15s,box-shadow .2s,opacity .2s;
}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{opacity:.45;box-shadow:none;cursor:default}
.btn-secondary{
  padding:10px 20px;border:1.5px solid var(--pink);border-radius:999px;
  background:#fff;color:var(--pink-deep);font-size:13.5px;font-weight:700;
  cursor:pointer;transition:transform .15s,background .2s;
}
.btn-secondary:active{transform:scale(.96);background:var(--pink-soft)}
.link-soft{
  border:none;background:none;color:var(--faint);font-size:12px;
  text-decoration:underline;cursor:pointer;padding:8px;
}

/* ===== スタート画面 ===== */
.start-wrap{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px 48px;
}
.start-logo-row{display:flex;gap:6px;margin-bottom:10px}
.start-logo-row .avatar{animation:bob 2.8s ease-in-out infinite}
.start-logo-row .avatar:nth-child(2){animation-delay:.4s}
.start-logo-row .avatar:nth-child(3){animation-delay:.8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.start-title{
  margin:0;font-size:34px;font-weight:700;letter-spacing:.12em;
  color:var(--ink);
}
.start-sub{margin:6px 0 26px;font-size:13.5px;color:var(--soft);letter-spacing:.08em}
.start-card{
  width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow);
}
.field-label{display:block;margin:0 0 8px 4px;font-size:13px;font-weight:700;color:var(--soft)}
.choose-label{margin-top:22px}
.text-input{
  width:100%;padding:12px 16px;font-size:16px;font-family:inherit;
  border:1.5px solid var(--line);border-radius:16px;background:#fff;
  color:var(--ink);outline:none;transition:border-color .2s;
}
.text-input:focus{border-color:var(--pink)}
.choose-list{display:flex;flex-direction:column;gap:10px}
.choose-card{
  display:flex;gap:12px;align-items:center;
  padding:12px 14px;border:2px solid var(--line);border-radius:20px;
  background:#fff;cursor:pointer;transition:border-color .2s,background .2s,transform .15s;
}
.choose-card:active{transform:scale(.98)}
.choose-card.selected{border-color:var(--pink);background:#FDF3EF}
.choose-info{min-width:0}
.choose-name{font-size:15px;font-weight:700}
.choose-breed{font-size:11.5px;color:var(--soft)}
.choose-role{
  display:inline-block;margin-top:3px;font-size:10.5px;color:var(--pink-deep);
  background:var(--pink-soft);padding:1px 9px;border-radius:999px;
}
.choose-sample{margin:5px 0 0;font-size:12px;color:var(--soft);line-height:1.5}

/* ===== ホーム：犬カード ===== */
#dog-cards,#extra-cards{display:flex;flex-direction:column;gap:14px}
.dog-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
}
.dog-card-top{display:flex;gap:14px;align-items:center}
.dog-info{flex:1;min-width:0}
.dog-name{font-size:17px;font-weight:700}
.dog-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.chip{
  font-size:10.5px;color:var(--soft);background:var(--bg);
  border:1px solid var(--line);padding:1px 9px;border-radius:999px;
}
.mood-line{margin:6px 0 0;font-size:12.5px;color:var(--soft);display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.ava-btn{border:none;background:none;padding:0;cursor:pointer;line-height:0}
.card-actions{display:flex;gap:8px;margin-top:14px}
.act-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 2px;border:1px solid var(--line);border-radius:16px;
  background:var(--bg);cursor:pointer;font-size:11px;color:var(--soft);font-weight:500;
  transition:transform .15s,background .2s,border-color .2s;
}
.act-btn:active{transform:scale(.94);background:var(--pink-soft);border-color:var(--pink)}
.act-emoji{font-size:17px;line-height:1.2}

/* ===== ホーム：その他カード ===== */
.extra-card{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:14px 16px;box-shadow:var(--shadow);
  cursor:pointer;transition:transform .15s;
}
.extra-card:active{transform:scale(.98)}
.extra-card.locked{opacity:.6;cursor:default}
.extra-emoji{font-size:22px}
.extra-info{flex:1;min-width:0}
.extra-title{font-size:14px;font-weight:700}
.extra-sub{font-size:11.5px;color:var(--soft);margin-top:1px}
.card-arrow{color:var(--faint);font-size:18px}
.home-foot{display:flex;justify-content:center;gap:14px;padding:4px 0 18px}

/* ===== チャット ===== */
/* スマホでキーボードが出たときは visualViewport の高さを使う（--vvh、--vvtop、JSで更新）。
   チャット表示中は body 自体を position:fixed で固定（overflow:hiddenだけだとiOSが本文をスクロールする） */
html.chat-on{overflow:hidden;height:100%;-webkit-overflow-scrolling:auto}
body.chat-on{
  position:fixed;top:0;left:0;right:0;bottom:0;
  overflow:hidden;height:100%;width:100%;
}
.chat-screen.active{
  position:fixed;top:var(--vvtop,0px);left:0;right:0;margin:0 auto;width:100%;max-width:520px;
  height:var(--vvh,100dvh);max-height:var(--vvh,100dvh);min-height:0;
  /* チャット画面は fixed なので、画面切替の slide-in（translateY）は外して fade のみにする */
  animation:fadeIn .32s ease both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.chat-head{display:flex;align-items:center;gap:10px;min-width:0}
.chat-status{font-size:11px;color:var(--soft);margin-top:-2px;display:flex;align-items:center;gap:4px}
.chat-log{
  flex:1;overflow-y:auto;padding:16px 14px 14px;
  display:flex;flex-direction:column;gap:12px;
  overscroll-behavior:contain;
}
/* メッセージが少ないときは下寄せ（::before が伸びてスペースを埋める）。
   多くて溢れたときも上が切れない、justify-content:flex-end の置きかえ */
.chat-log::before{content:"";margin-top:auto}
.msg-row{display:flex;align-items:flex-end;gap:7px}
.msg-row.right{justify-content:flex-end}
.msg-col{min-width:0;display:flex;flex-direction:column}
.msg-name{font-size:11px;color:var(--soft);margin:0 0 3px 5px}
.bubble{
  max-width:100%;padding:10px 14px;border-radius:18px;
  font-size:14.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word;
  animation:msgIn .28s ease both;
}
.msg-row.left .msg-col{max-width:74%}
.msg-row.right .bubble{max-width:76%}
@keyframes msgIn{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.bubble-dog{
  background:var(--card);border:1px solid var(--line);
  border-bottom-left-radius:6px;box-shadow:0 2px 8px rgba(92,75,59,.06);
}
.bubble-user{
  background:linear-gradient(135deg,#F4CFC7,#EFBEB5);color:#6B453E;
  border-bottom-right-radius:6px;box-shadow:0 2px 8px rgba(217,140,140,.18);
}
.msg-meta{font-size:10px;color:var(--faint);flex-shrink:0;padding-bottom:2px}
.typing{display:inline-flex;gap:5px;align-items:center;padding:15px 16px}
.t-dot{width:7px;height:7px;border-radius:50%;background:#CDB9A2;animation:tBounce 1.2s ease-in-out infinite}
.t-dot:nth-child(2){animation-delay:.15s}
.t-dot:nth-child(3){animation-delay:.3s}
@keyframes tBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.chat-inputbar{
  position:sticky;bottom:0;z-index:20;
  display:flex;gap:8px;align-items:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,244,233,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
#chat-input{
  flex:1;min-width:0;border:1.5px solid var(--line);background:#fff;
  border-radius:999px;padding:11px 16px;font-size:16px;font-family:inherit;
  color:var(--ink);outline:none;transition:border-color .2s;
}
#chat-input:focus{border-color:var(--pink)}
.send-btn{
  width:46px;height:46px;flex-shrink:0;border-radius:50%;border:none;
  background:linear-gradient(135deg,#ECA6A0,#DB8A8A);color:#fff;font-size:19px;
  cursor:pointer;box-shadow:0 4px 12px rgba(217,140,140,.4);
  transition:transform .15s,opacity .2s;
}
.send-btn:active{transform:scale(.88)}
.send-btn:disabled{opacity:.5}

/* ふとした仕草の行 */
.cue-line{
  align-self:center;text-align:center;
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--brown);letter-spacing:.05em;
  background:#FBF4E8;border:1px solid var(--line);border-radius:999px;
  padding:5px 14px;box-shadow:0 2px 8px rgba(92,75,59,.05);
  animation:msgIn .45s ease both;
}
.cue-ava{width:19px;height:19px;flex-shrink:0;display:inline-block}
.cue-ava svg{width:100%;height:100%;display:block;animation:none}
#chat-avatar.nom{animation:nom .6s ease}

/* 共有チップ */
.share-chip{
  align-self:center;text-align:center;
  background:var(--bg);border:1px dashed var(--brown);
  border-radius:18px;padding:12px 16px;max-width:86%;
  animation:msgIn .3s ease both;
}
.share-chip p{margin:0 0 9px;font-size:12.5px;color:var(--soft)}
.share-sub{font-size:11px;color:var(--faint)}
.share-btns{display:flex;gap:8px;justify-content:center}
.chip-btn{
  padding:7px 16px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:12px;cursor:pointer;color:var(--soft);
  transition:transform .15s;
}
.chip-btn:active{transform:scale(.94)}
.chip-btn.yes{background:var(--pink-soft);border-color:var(--pink);color:var(--pink-deep);font-weight:700}

/* ===== プロフィール ===== */
.profile-hero{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 0 4px;text-align:center;
}
.profile-name{font-size:21px;font-weight:700;margin:0}
.profile-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.p-section{
  background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:14px 16px;box-shadow:var(--shadow);
}
.p-label{margin:0 0 5px;font-size:11.5px;font-weight:700;color:var(--pink-deep);letter-spacing:.06em}
.p-text{margin:0;font-size:13.5px;line-height:1.75}
.mem-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mem-item{font-size:13px;line-height:1.6;padding-left:24px;position:relative}
.mem-item::before{content:"🐾";position:absolute;left:0;top:1px;font-size:12px}

/* ===== さんぽ =====
   スマホで縦が足りなくなりやすいので、シーンの高さも余白も詰めて
   トップバー＋シーン＋テキスト＋カード＋ボタンが画面内に収まるようにする */
.walk-content{align-items:center;padding-top:12px;padding-bottom:16px;gap:10px}
.walk-scene{
  width:100%;height:clamp(170px,28vh,240px);border-radius:var(--radius);
  position:relative;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,#CDE4F2 0%,#E9F2E4 70%,#DCE9CF 100%);
  box-shadow:var(--shadow);
  transition:background 1s ease;
}
.walk-scene.sp-park{background:linear-gradient(180deg,#C8E6F5 0%,#D9EDCB 65%,#C5E0AE 100%)}
.walk-scene.sp-river{background:linear-gradient(180deg,#C6E3F4 0%,#D8EEF2 60%,#AFD7E3 100%)}
.walk-scene.sp-street{background:linear-gradient(180deg,#F6DFC0 0%,#F3E4CC 60%,#E2C9A6 100%)}
.walk-scene.sp-forest{background:linear-gradient(180deg,#BFD9C5 0%,#CDE3C6 60%,#A9C9A4 100%)}
.walk-scene.sp-sea{background:linear-gradient(180deg,#BEE0F2 0%,#D4ECF4 55%,#9FCEE0 100%)}
.walk-scene.sp-town{background:linear-gradient(180deg,#D8E4EF 0%,#EDE7D8 60%,#D9CDB4 100%)}
.walk-scene.sp-shrine{background:linear-gradient(180deg,#E9D9CE 0%,#E2D5B8 60%,#C9BD9C 100%)}
.walk-scene.sp-hill{background:linear-gradient(180deg,#BFE0F0 0%,#D9E8D2 70%,#C2D8AC 100%)}
.walk-scene.sp-flower{background:linear-gradient(180deg,#D8E8F5 0%,#F2E3EC 60%,#E9D2DC 100%)}
.walk-scene.sp-stream{background:linear-gradient(180deg,#CDE6E4 0%,#DDEEE6 60%,#B8D8CC 100%)}
/* 夜のさんぽ：どの場所にも夕闇のベールをかける */
.walk-scene.night::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(43,52,84,.42) 0%,rgba(43,52,84,.20) 60%,rgba(43,52,84,.12) 100%);
}
.walk-scene.night .walk-deco,.walk-scene.night .walk-dog{z-index:2}
.walk-deco{
  position:absolute;top:18px;left:0;right:0;
  display:flex;justify-content:space-around;font-size:30px;
  opacity:.9;
}
.walk-deco span{animation:bob 3.4s ease-in-out infinite}
.walk-deco span:nth-child(2){animation-delay:.6s;font-size:24px}
.walk-deco span:nth-child(3){animation-delay:1.1s}
.walk-ground{
  position:absolute;bottom:0;left:-10%;right:-10%;height:54px;
  background:rgba(255,253,248,.5);
  border-radius:50% 50% 0 0;
}
.walk-dog{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  filter:drop-shadow(0 6px 6px rgba(92,75,59,.18));
}
@keyframes walkBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
.walk-scene.e3 .walk-dog{animation:walkBob 2.2s ease-in-out infinite}
.walk-scene.e2 .walk-dog{animation:walkBob 3.4s ease-in-out infinite}
.walk-scene.e1 .walk-dog,.walk-scene.e0 .walk-dog{animation:none}
.walk-dog.sleepy svg .eye{animation:none;transform:scaleY(.12)}
.walk-zzz{
  position:absolute;top:-8px;right:-14px;font-size:19px;font-style:normal;
  animation:zfloat 2.2s ease-in-out infinite;
}
.walk-scene.walking .walk-dog{animation:trot .5s ease-in-out infinite}
@keyframes trot{0%,100%{transform:translateX(-50%) translateY(0) rotate(-2deg)}50%{transform:translateX(-50%) translateY(-9px) rotate(2deg)}}
.walk-text{margin:2px 0 0;font-size:15px;font-weight:700;text-align:center;min-height:1.6em;line-height:1.4}
.walk-line{margin:0;font-size:13.5px;color:var(--soft);text-align:center;min-height:1.6em;line-height:1.5}
.walk-actions{display:flex;gap:10px;margin-top:2px;flex-wrap:wrap;justify-content:center}

/* ===== おやつ ===== */
.treat-stage{align-items:center;justify-content:center;gap:20px}
.treat-dog-wrap{position:relative;margin-top:10px}
.treat-dog-wrap .avatar{transition:transform .2s}
.treat-dog-wrap .avatar.bounce{animation:nom .5s ease}
.treat-dog-wrap .avatar.sulk{animation:sulk .6s ease}
@keyframes sulk{0%{transform:rotate(0)}25%{transform:rotate(-5deg)}50%{transform:rotate(4deg)}75%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
.heart.drop{animation:dropDown 1.5s ease-in both}
@keyframes dropDown{from{opacity:1;transform:translateY(0) scale(.8)}to{opacity:0;transform:translateY(40px) scale(1.05)}}
@keyframes nom{0%{transform:scale(1)}30%{transform:scale(1.1) rotate(-3deg)}60%{transform:scale(.96) rotate(2deg)}100%{transform:scale(1)}}
.treat-hearts{position:absolute;inset:0;pointer-events:none}
.heart{
  position:absolute;font-size:17px;
  animation:heartUp 1.1s ease-out both;
}
@keyframes heartUp{from{opacity:1;transform:translateY(0) scale(.6)}to{opacity:0;transform:translateY(-58px) scale(1.25)}}
.treat-reaction{min-height:58px;text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center}
.treat-line{font-size:14.5px;font-weight:700}
.treat-tier{font-size:12px;color:var(--soft)}
.treat-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:420px}
.treat-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  width:86px;padding:14px 6px;border:1px solid var(--line);border-radius:20px;
  background:var(--card);cursor:pointer;box-shadow:var(--shadow);
  transition:transform .15s;
}
.treat-btn:active{transform:scale(.92)}
.t-emoji{font-size:28px;line-height:1.2}
.t-name{font-size:12px;color:var(--soft);font-weight:700}
.fly-treat{
  position:fixed;z-index:90;font-size:26px;pointer-events:none;
  transition:transform .55s cubic-bezier(.4,-.2,.6,1),opacity .55s ease;
}

.walk-tired{font-size:12.5px;color:var(--faint);align-self:center;padding:8px 4px}
.btn-secondary:disabled{opacity:.45;cursor:default}
.btn-secondary.locked{opacity:.5;border-style:dashed}
.walk-find{min-height:24px;display:flex;justify-content:center}
.find-card{
  width:100%;max-width:300px;text-align:center;
  padding:12px 16px;border-radius:20px;
  background:var(--card);border:1.5px solid var(--line);box-shadow:var(--shadow);
  animation:findPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.find-icon{font-size:36px;line-height:1;animation:findIcon .9s ease both}
.find-cap{margin-top:6px;font-size:13px;font-weight:700;color:var(--ink)}
.find-name{margin-top:2px;font-size:16px;font-weight:700}
.find-rarity{margin-top:3px;font-size:11.5px;color:var(--soft)}
/* たからもの：レア度で色とかがやきが変わる */
.find-card.treasure{border-color:#D8C9A8;background:linear-gradient(160deg,#FFFDF6,#FBF3DF)}
.find-card.treasure.rare{border-color:#E5C45A;background:linear-gradient(160deg,#FFFBEA,#FFF1C6)}
.find-card.treasure.rare .find-name{color:#9C7B1D}
.find-card.treasure.super{
  border-color:#E2A93C;
  background:linear-gradient(160deg,#FFF7E0,#FFE9B8);
  box-shadow:0 0 0 1px #F2D58A,0 8px 26px rgba(226,169,60,.35);
  animation:findPop .5s cubic-bezier(.34,1.56,.64,1) both,superGlow 1.6s ease-in-out .5s infinite;
}
.find-card.treasure.super .find-cap,.find-card.treasure.super .find-name{color:#B4781A}
.find-card.treasure.super .find-rarity{color:#C98A18;font-weight:700}
/* おやつ：あたたかいピンク系で「うれしい」感 */
.find-card.treat-find{border-color:var(--pink-soft);background:linear-gradient(160deg,#FFF9F6,#FBE6DF)}
.find-card.treat-find .find-cap{color:var(--pink-deep)}
/* なし：くすんだ静かな見た目 */
.find-card.nothing{background:var(--bg);border-style:dashed;opacity:.92}
/* ハプニング：しっとりした青グレー。大きめは雨色がつよい */
.find-card.trouble{border-color:#C4D2DE;background:linear-gradient(160deg,#F5F7FA,#E7EDF4)}
.find-card.trouble .find-cap{color:#7E96B0}
.find-card.trouble .find-rarity{color:#90A4B8}
.find-card.trouble.big{border-color:#B9C8E8;background:linear-gradient(160deg,#F0F3FA,#DDE5F2)}
.find-card.trouble.big .find-cap{color:#4F74C8}
.find-glyph{
  font-family:'Hiragino Sans','Yu Gothic',sans-serif;font-weight:700;
  color:#7E96B0;animation:none;
}
.find-card.trouble.big .find-glyph{color:#4F74C8}
.find-card.nothing .find-icon{filter:grayscale(.4);opacity:.7;animation:none}
.find-card.nothing .find-cap{color:var(--soft);font-weight:500}
@keyframes findPop{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
@keyframes findIcon{0%{transform:scale(.3) rotate(-12deg)}55%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
@keyframes superGlow{0%,100%{box-shadow:0 0 0 1px #F2D58A,0 8px 26px rgba(226,169,60,.35)}50%{box-shadow:0 0 0 2px #F2D58A,0 8px 34px rgba(226,169,60,.6)}}
.t-count{font-size:10.5px;color:var(--faint);font-weight:700}
.treat-btn.empty{opacity:.42;box-shadow:none;cursor:default}
.treat-hint{margin:0;font-size:11px;color:var(--faint)}
.pouch-item{
  display:flex;align-items:center;gap:13px;
  background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:12px 16px;box-shadow:var(--shadow);
}
.pouch-emoji{font-size:26px}
.pouch-info{flex:1;min-width:0}
.pouch-name{font-size:14px;font-weight:700}
.pouch-sub{font-size:11px;color:var(--soft);margin-top:1px}
.rare-chip{border-color:#E5C45A;background:#FFF8E1;color:#9C7B1D}
.super-chip{
  border-color:#E2A93C;color:#B4781A;font-weight:700;
  background:linear-gradient(135deg,#FFF3D1,#FFE9B8);
  box-shadow:0 0 8px rgba(226,169,60,.45);
}
.pouch-right{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0}
.gift-btn{padding:6px 13px;font-size:12px}
.album-text{font-size:13px;line-height:1.6}

/* ===== せってい ===== */
.setting-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:13.5px;line-height:1.5;
}
.setting-row + .setting-row{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.setting-row .btn-secondary{flex-shrink:0;padding:8px 16px;font-size:12.5px}
.volume-row{margin-bottom:4px}
.volume-val{font-variant-numeric:tabular-nums;color:var(--soft);font-size:12.5px;min-width:2.5em;text-align:right}
.volume-range{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;
  background:#E2D6BF;border-radius:999px;outline:none;margin:6px 0 2px;
}
.volume-range:disabled{opacity:.4}
.volume-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;
  background:var(--pink);border:2px solid #fff;border-radius:50%;cursor:pointer;
  box-shadow:0 1px 4px rgba(92,75,59,.25);
}
.volume-range::-moz-range-thumb{
  width:20px;height:20px;background:var(--pink);border:2px solid #fff;border-radius:50%;
  cursor:pointer;box-shadow:0 1px 4px rgba(92,75,59,.25);
}
.setting-note{margin:9px 2px 0;font-size:11.5px;color:var(--faint)}
.setting-desc{margin:0 2px 12px;font-size:12px;color:var(--soft);line-height:1.7}
.model-row{
  margin-top:8px;padding:8px 10px;border:1px dashed var(--line);border-radius:12px;
  font-size:11.5px;line-height:1.6;word-break:break-all;
}
.model-role{
  display:inline-block;margin-right:6px;padding:0 8px;border-radius:999px;
  background:var(--pink-soft);color:var(--pink-deep);font-weight:700;font-size:10.5px;
}
.model-status{color:var(--soft)}
/* iPhone風トグルスイッチ */
.switch{
  width:48px;height:29px;flex-shrink:0;border:none;border-radius:999px;
  background:#D9CDB9;position:relative;cursor:pointer;
  transition:background .25s;padding:0;
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(92,75,59,.3);
  transition:transform .25s;
}
.switch.on{background:var(--pink)}
.switch.on::after{transform:translateX(19px)}
/* 設定の選択リスト */
.opt-arrow{margin-left:6px;font-size:10px}
.opt-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.opt-item{
  display:flex;flex-direction:column;gap:2px;text-align:left;
  padding:11px 14px 11px 36px;border:1.5px solid var(--line);border-radius:16px;
  background:#fff;cursor:pointer;position:relative;
  transition:border-color .2s,background .2s;
}
.opt-item.selected{border-color:var(--pink);background:#FDF3EF}
.opt-item.selected::before{
  content:"✓";position:absolute;left:13px;top:11px;
  color:var(--pink-deep);font-weight:700;
}
.opt-name{font-size:13.5px;font-weight:700}
.opt-desc{font-size:11.5px;color:var(--soft);line-height:1.6}
/* テストモードのバッジ */
#test-badge{
  position:fixed;top:64px;right:calc((100vw - min(520px,100vw)) / 2 + 10px);
  z-index:80;border:none;cursor:pointer;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#fff;
  background:rgba(92,75,59,.55);padding:3px 11px;border-radius:999px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
#test-tip{
  position:fixed;top:92px;right:calc((100vw - min(520px,100vw)) / 2 + 10px);
  z-index:80;max-width:240px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:11px 14px;font-size:12px;line-height:1.8;color:var(--ink);
  box-shadow:0 10px 30px rgba(92,75,59,.25);
  animation:msgIn .25s ease both;
}
#test-tip .tip-sub{font-size:10.5px;color:var(--faint)}

/* ===== プラン ===== */
.plan-note{margin:0 4px;font-size:12.5px;color:var(--soft)}
#plan-list{display:flex;flex-direction:column;gap:14px}
.plan-card{
  background:var(--card);border:2px solid var(--line);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
  position:relative;
}
.plan-card.current{border-color:var(--pink)}
.plan-badge{
  position:absolute;top:-10px;right:16px;
  background:var(--pink);color:#fff;font-size:10.5px;font-weight:700;
  padding:2px 12px;border-radius:999px;
}
.plan-name{font-size:17px;font-weight:700}
.plan-max{font-size:12px;color:var(--pink-deep);font-weight:700;margin-top:2px}
.plan-desc{font-size:12.5px;color:var(--soft);margin:6px 0 0}
.plan-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.plan-price{font-size:13px;font-weight:700;color:var(--brown)}

/* ===== おむかえ ===== */
.adopt-card{
  display:flex;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
}
.adopt-info{flex:1;min-width:0}
.adopt-note{margin:4px;font-size:12.5px;color:var(--soft)}
.adopt-req{margin:6px 0 0;font-size:11.5px;color:#9C7B1D;font-weight:700}

@keyframes zfloat{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}

/* ===== モーダル（おむかえ・お知らせ） ===== */
#modal-back{
  position:fixed;inset:0;z-index:90;
  background:rgba(92,75,59,.35);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:toastIn .25s ease both;
}
#modal-back[hidden]{display:none}
.modal-card{
  width:100%;max-width:340px;max-height:82dvh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:26px;
  padding:24px 22px;box-shadow:0 18px 50px rgba(92,75,59,.35);
  animation:findPop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.modal-text{margin:0 0 12px;font-size:13.5px;line-height:1.8}
.modal-close-btn{display:block;margin:6px auto 0}
/* おむかえのシーン */
.welcome-scene{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.welcome-spark{display:flex;gap:14px;font-size:20px;margin-bottom:2px}
.welcome-spark span{animation:sparkle 1.6s ease-in-out infinite}
.welcome-spark span:nth-child(2){animation-delay:.4s}
.welcome-spark span:nth-child(3){animation-delay:.8s}
.welcome-scene .avatar{animation:bob 2.6s ease-in-out infinite}
.welcome-title{margin:10px 0 0;font-size:13px;color:var(--soft);letter-spacing:.08em}
.welcome-name{margin:2px 0 4px;font-size:24px;font-weight:700;letter-spacing:.06em}
.welcome-text{margin:12px 0 0;font-size:12.5px;color:var(--soft);line-height:1.9}
.welcome-btn{margin-top:18px}
/* 控えのAIで応答中：家じゅうが すこし眠そう */
.ai-tired .avatar svg .eye{animation:none;transform:scaleY(.45)}
.ai-tired .avatar svg .tongue{animation:none;opacity:0}
.status-tired{color:#C75050;font-weight:700}
.info-btn{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:15px;height:15px;padding:0;border:1px solid var(--faint);
  border-radius:50%;background:#fff;color:var(--soft);
  font-size:10px;line-height:1;font-style:italic;font-weight:700;font-family:Georgia,serif;
  cursor:pointer;vertical-align:middle;
}

/* ===== トースト ===== */
.toast-wrap{
  position:fixed;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:8px;
  z-index:100;pointer-events:none;
}
.toast-item{
  background:rgba(92,75,59,.92);color:#FDF8EF;
  font-size:13px;padding:10px 20px;border-radius:999px;
  box-shadow:0 6px 20px rgba(92,75,59,.3);
  animation:toastIn .3s ease both;
  max-width:86%;text-align:center;
}
.toast-item.out{animation:toastOut .3s ease both}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(8px)}}