@charset "UTF-8";
:root {
  --ink:#34473b;
  --muted:#899084;
  --green:#4e6954;
  --cream:#f6f3eb;
  --line:#e8e9df;
  --orange:#d89965
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:14px/1.6 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif
}
button,input,select {
  font:inherit
}
button,a,label.import-button {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer;
  color:inherit;
  border:1px solid var(--line);
  background:white;
  border-radius:12px;
  padding:10px 16px;
  transition:transform .2s,background .2s
}
button:hover {
  background:#f0f3e9;
  transform:translateY(-2px)
}
button:disabled {
  cursor:default;
  opacity:.55;
  transform:none
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #b9a966;
  outline-offset:4px
}
header {
  max-width:1240px;
  margin:auto;
  padding:27px 38px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #e3e4da
}
.brand {
  font-size:20px;
  font-weight:750;
  color:var(--ink);
  text-decoration:none
}
.brand span {
  font-size:9px;
  letter-spacing:2px;
  margin-left:12px;
  color:var(--muted)
}
.header-right {
  display:flex;
  align-items:center;
  gap:22px;
  font-size:12px;
  color:var(--muted)
}
.quiet {
  border:0;
  background:transparent;
  padding:6px
}
.intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:42px 0 28px
}
.eyebrow {
  font-size:10px;
  letter-spacing:2.5px;
  color:#8a967d;
  margin-bottom:12px
}
h1 {
  font-size:32px;
  letter-spacing:1px;
  margin:0 0 9px;
  font-weight:650
}
.intro p:last-child {
  color:var(--muted);
  margin:0
}
.date-tag {
  border-left:1px solid #d4d9c9;
  padding-left:22px;
  color:var(--muted);
  font-size:12px;
  white-space:pre-line
}
main {
  max-width:1164px;
  margin:auto;
  padding:0 24px
}
h2 {
  font-size:17px;
  margin:0;
  font-weight:650
}
h3 {
  font-size:14px;
  margin:0
}
p {
  margin:6px 0
}
.layout {
  display:grid;
  grid-template-columns:1.52fr 1fr;
  gap:24px
}
.card {
  background:#fffefa;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 5px 15px #34473b03
}
.home {
  padding:22px 26px
}
.home-top,.section-heading,.pet-info {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.home-top {
  font-size:11px;
  color:var(--muted)
}
.pill {
  border-radius:25px;
  padding:5px 11px;
  background:#edf1e5;
  font-size:11px;
  color:#6b805d
}
.scene {
  height:305px;
  position:relative;
  overflow:hidden;
  margin-top:8px;
  background:linear-gradient(#f9f8ef 75%,#eeeadd 75%);
  border-radius:14px
}
.window {
  position:absolute;
  top:25px;
  left:50%;
  transform:translateX(-50%);
  height:123px;
  width:128px;
  border:7px solid #e8e6d6;
  border-radius:70px 70px 5px 5px;
  background:#e8efdf;
  overflow:hidden
}
.window:after {
  content:"";
  position:absolute;
  left:50%;
  height:100%;
  width:5px;
  background:#e8e6d6
}
.sun {
  position:absolute;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#eed496;
  top:22px;
  right:20px
}
.hill {
  width:160px;
  height:80px;
  position:absolute;
  top:84px;
  left:-20px;
  background:#c7d5b2;
  border-radius:50%
}
.plant {
  position:absolute;
  bottom:66px;
  right:32px;
  color:#8b9d72;
  font-size:66px;
  line-height:1
}
.plant i {
  display:block;
  width:27px;
  height:31px;
  background:#d6bfa2;
  margin:auto;
  border-radius:2px 2px 9px 9px
}
.rug {
  position:absolute;
  width:230px;
  height:47px;
  background:#dce1c8;
  border-radius:50%;
  bottom:28px;
  left:50%;
  transform:translateX(-50%)
}
.speech {
  position:absolute;
  top:18px;
  left:18px;
  max-width:200px;
  font-size:12px;
  background:#fffef8;
  padding:12px 15px;
  border-radius:14px 14px 14px 2px;
  box-shadow:0 3px 12px #55664408;
  z-index:2
}
.pet {
  position:absolute;
  bottom:48px;
  left:50%;
  margin-left:-67px;
  width:134px;
  height:143px;
  border:0;
  background:transparent!important;
  padding:0;
  animation:breathe 3s ease-in-out infinite;
  filter:drop-shadow(0 8px 3px #59604412)
}
.pet-body {
  position:absolute;
  bottom:7px;
  left:7px;
  width:120px;
  height:112px;
  background:#f0d5a9;
  border-radius:48% 48% 43% 43%;
  box-shadow:inset -8px -8px 0 #e6c797
}
.ear {
  position:absolute;
  top:5px;
  background:#f0d5a9;
  width:40px;
  height:67px;
  border-radius:55% 55% 10% 10%
}
.ear.left {
  left:14px;
  transform:rotate(-19deg)
}
.ear.right {
  right:14px;
  transform:rotate(19deg)
}
.ear:after {
  content:"";
  position:absolute;
  inset:12px 12px 15px;
  background:#dfa985;
  border-radius:50%
}
.eyes {
  position:absolute;
  top:41px;
  left:29px;
  display:flex;
  gap:33px
}
.eyes i {
  width:8px;
  height:11px;
  background:#514c3d;
  border-radius:50%;
  animation:blink 5s infinite
}
.cheek {
  position:absolute;
  top:57px;
  width:20px;
  height:10px;
  border-radius:50%;
  background:#e7aa91;
  opacity:.6
}
.c1 {
  left:12px
}
.c2 {
  right:12px
}
.mouth {
  position:absolute;
  left:55px;
  top:56px;
  width:12px;
  height:8px;
  border-bottom:2px solid #796344;
  border-radius:0 0 50% 50%
}
.foot {
  position:absolute;
  bottom:0;
  width:34px;
  height:19px;
  background:#e5c695;
  border-radius:50%
}
.f1 {
  left:13px
}
.f2 {
  right:13px
}
.sparkle {
  position:absolute;
  right:25%;
  bottom:130px;
  font-size:28px;
  color:#b8ba85
}
.room-label {
  position:absolute;
  bottom:8px;
  width:100%;
  text-align:center;
  font:10px Georgia,serif;
  letter-spacing:1px;
  color:#a7a18f
}
.pet-info {
  margin-top:18px
}
.pet-info h2 {
  font-size:22px
}
.pet-info p {
  font-size:11px;
  color:var(--muted)
}
.level {
  font-size:11px;
  background:#f7efe1;
  padding:6px 11px;
  border-radius:9px;
  color:#b58b56
}
.xp-track {
  height:3px;
  border-radius:4px;
  background:#eeeede;
  margin:10px 0 20px;
  overflow:hidden
}
.xp-track div {
  background:#b6bd90;
  height:100%;
  transition:width .4s
}
.stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 25px
}
.stat-label {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  margin-bottom:5px
}
.track {
  height:6px;
  border-radius:9px;
  background:#f0f0e9;
  overflow:hidden
}
.track div {
  height:100%;
  border-radius:9px;
  transition:width .4s
}
.care-actions {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:25px
}
.care-actions button {
  padding:10px 2px;
  font-size:11px;
  border-color:#eeeee5;
  background:#fafbf5
}
.care-actions span {
  display:block;
  font-size:24px;
  line-height:1.4;
  color:#8c9c74
}
.care-actions small {
  display:block;
  font-size:9px;
  color:#9b9e91;
  margin-top:3px
}
.care-actions b {
  font-weight:400
}
aside {
  display:flex;
  flex-direction:column;
  gap:20px
}
.journey,.bag,.diary,.achievements {
  padding:24px
}
.muted {
  color:var(--muted);
  font-size:11px
}
.journey>.muted {
  margin-top:8px
}
.outing {
  display:flex;
  gap:14px;
  align-items:center;
  margin:24px 0 18px
}
.outing-icon {
  width:54px;
  height:54px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:#f0f1e1;
  color:#91a373;
  font-size:34px
}
.outing p {
  font-size:10px;
  color:var(--muted)
}
.primary {
  background:var(--green);
  color:#fff;
  width:100%;
  border:0;
  padding:12px
}
.primary:hover {
  background:#415e47
}
.hint {
  font-size:10px;
  color:var(--muted);
  text-align:center;
  margin:9px 0
}
.divider {
  height:1px;
  background:var(--line);
  margin:20px 0
}
.task {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:13px;
  font-size:12px
}
.task small {
  color:var(--muted);
  font-size:10px
}
.task button {
  padding:4px 10px;
  font-size:10px
}
.task .done {
  color:#92a07d
}
.bag {
  flex:1
}
.items {
  display:flex;
  gap:8px;
  margin:17px 0
}
.item {
  flex:1;
  text-align:center;
  background:#f6f5ec;
  border-radius:12px;
  padding:10px 3px;
  font-size:10px;
  color:#8a8f7e
}
.item span {
  display:block;
  font-size:24px;
  margin-bottom:4px
}
.text-button {
  font-size:11px;
  padding:0;
  background:transparent;
  border:0;
  color:#80916c
}
.bottom-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:24px;
  margin-top:24px
}
.entry {
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.entry:last-child {
  border:0
}
.entry time {
  font-size:10px;
  color:#a5aa9b;
  display:block;
  margin-bottom:3px
}
.badge-row {
  display:flex;
  gap:12px;
  padding-top:16px;
  align-items:center
}
.badge-icon {
  width:38px;
  height:38px;
  background:#f1efdf;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:20px
}
.badge-row.locked {
  opacity:.4
}
.badge-row p {
  font-size:11px;
  margin:0
}
.badge-row small {
  font-size:10px;
  color:var(--muted)
}
footer {
  display:flex;
  justify-content:space-between;
  color:#9b9e91;
  font-size:10px;
  margin:28px 0 32px
}
dialog {
  width:min(420px,90vw);
  border:1px solid var(--line);
  border-radius:20px;
  padding:26px;
  color:var(--ink);
  background:#fffefa
}
dialog::backdrop {
  background:#29382d66;
  backdrop-filter:blur(4px)
}
dialog label {
  display:block;
  font-size:12px;
  margin:20px 0
}
input,select {
  width:100%;
  border:1px solid #dce1d3;
  border-radius:8px;
  background:#fff;
  padding:10px;
  margin-top:7px;
  color:var(--ink)
}
.backup {
  display:flex;
  gap:10px;
  align-items:center
}
.backup>* {
  flex:1;
  text-align:center;
  font-size:12px
}
.import-button {
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer
}
.import-button input {
  display:none
}
.danger {
  color:#b07b65;
  margin-top:12px
}
#toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translate(-50%,20px);
  background:#34473b;
  color:white;
  border-radius:13px;
  padding:12px 22px;
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:10;
  font-size:12px;
  max-width:90vw
}
#toast.show {
  opacity:1;
  transform:translate(-50%,0)
}

.sleeping .eyes i {
  height:3px;
  animation:none
}
.sleeping .pet {
  animation:breathe 5s infinite
}
.sleeping .sun {
  background:#f7f4d4
}
.sleeping .window {
  background:#adb9c4
}
.away .pet {
  opacity:.3
}
@keyframes breathe {
  50% {
    transform:translateY(-5px) rotate(1deg)
  }
}

@media(max-width:800px) {
  header {
    padding:18px 22px
  }
  .brand span {
    display:none
  }
  .header-right {
    gap:8px
  }
  .layout,.bottom-grid {
    grid-template-columns:1fr
  }
  .intro {
    margin-top:28px
  }
  h1 {
    font-size:25px
  }
  .date-tag {
    display:none
  }
  main {
    padding:0 16px
  }
  .home {
    padding:18px
  }
  .bottom-grid {
    gap:20px
  }
  footer {
    display:block
  }
  footer span {
    display:block;
    margin-top:7px
  }
  .scene {
    height:290px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
/* 第二版：轻柔反馈。低状态同时用文字标注，不只依赖颜色。 */
.low-value {
  color: #b87457;
}
.track div {
  transition: width .45s ease, background .6s ease;
}
.care-actions button.cooling {
  opacity: .6;
  background: #ecefe3;
}
.pet.bounce {
  animation: gentle-hop .65s cubic-bezier(.25,.46,.45,.94);
}
.eyes i {
  animation: none;
  transition: transform .08s ease;
}
.blinking .eyes i {
  transform: scaleY(.1);
}
.sleep-bubbles {
  position: absolute;
  left: calc(50% + 48px);
  bottom: 154px;
  display: none;
  color: #8d9c95;
}
.sleep-bubbles i {
  display: inline-block;
  font-style: normal;
  animation: dream 2.8s ease-in-out infinite;
}
.sleep-bubbles i:nth-child(2) {
  font-size: 18px;
  animation-delay: .4s;
}
.sleep-bubbles i:nth-child(3) {
  font-size: 23px;
  animation-delay: .8s;
}
.sleeping .sleep-bubbles {
  display: block;
}
.distant-pet {
  width: 14px;
  height: 15px;
  border-radius: 48% 48% 40% 40%;
  background: #7b8c69;
  display: none;
  position: absolute;
  top: 105px;
  left: calc(50% + 24px);
  color: #7b8c69;
  font-size: 23px;
  animation: wander 3s ease-in-out infinite;
}
.away .distant-pet {
  display: block;
}
.away .pet {
  opacity: 0;
  pointer-events: none;
}
.away .speech {
  max-width: 205px;
}
.welcome {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  margin-bottom: 22px;
  background: #eef2e4;
  border-color: #dce4cc;
}
.welcome[hidden] {
  display: none;
}
.welcome-icon {
  font-size: 32px;
  color: #8b9d72;
}
.welcome h2 {
  font-size: 14px;
}
.welcome p {
  font-size: 12px;
  color: #758168;
  margin-bottom: 0;
}
.welcome .quiet {
  margin-left: auto;
  align-self: flex-start;
}
.item .item-count {
  font-size: 10px;
  margin: 0;
}
@keyframes gentle-hop {
  0%,100% {
    transform: translateY(0) rotate(0);
  }
  32% {
    transform: translateY(-22px) rotate(-5deg);
  }
  66% {
    transform: translateY(1px) scale(1.04,.96);
  }
  84% {
    transform: translateY(-3px) scale(.99,1.01);
  }
}
@keyframes dream {
  0%,100% {
    transform: translateY(3px);
    opacity: .35;
  }
  50% {
    transform: translateY(-7px);
    opacity: 1;
  }
}
@keyframes wander {
  0%,100% {
    transform: translateX(-6px) rotate(-8deg);
  }
  50% {
    transform: translateX(7px) rotate(8deg);
  }
}
@media (max-width: 520px) {
  .care-actions {
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
  }
  .care-actions button {
    padding: 12px 8px;
    font-size: 12px;
  }
  .welcome {
    padding: 15px;
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pet.bounce,.sleep-bubbles i,.distant-pet {
    animation: none;
  }
  .eyes i,.track div {
    transition: none;
  }
}
.distant-pet::before,.distant-pet::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 5px;
  height: 8px;
  background: #7b8c69;
  border-radius: 60% 60% 0 0;
}
.distant-pet::before {
  left: 1px;
  transform: rotate(-15deg);
}
.distant-pet::after {
  right: 1px;
  transform: rotate(15deg);
}

/* 柏希与叶老板：赎回不会覆盖或清除养成进度。 */
.rescue {
  display: flex; align-items: center; gap: 24px;
  padding: 24px; margin-bottom: 24px;
  background: #f3edf7; border-color: #e0d1e8;
}
.rescue[hidden] { display: none; }
.boss-portrait { font-size: 64px; flex-shrink: 0; }
.rescue-copy { flex: 1; }
.rescue-copy p:not(.eyebrow) { color: #89768e; font-size: 12px; margin: 9px 0 15px; }
.rescue-copy .eyebrow { margin-top: 0; color: #a08ba8; }
.rescue .primary { background: #83628f; max-width: 320px; }
.rescue .primary:hover { background: #71527d; }
.capture-note { display: none; position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%); font-size: 62px; text-align: center; }
.capture-note small { display: block; font-size: 12px; color: #8c7398; white-space: nowrap; }
.captured .capture-note { display: block; }
.captured .pet,.captured .sleep-bubbles,.captured .distant-pet { display: none; }
.scene.captured { background: #f3edf7; }
.items { flex-wrap: wrap; }
.item { flex: 1 1 calc(50% - 8px); }
@media (max-width: 520px) {
  .rescue { padding: 18px; gap: 14px; }
  .boss-portrait { font-size: 40px; }
}

/* 纯 CSS 的叶老板：独立访客，黑化 → 摸头 → 可爱。 */
.boss-visitor {
  --boss-color: #665170; --boss-shade: #4e3c59;
  position: absolute; z-index: 3; right: 7px; bottom: 26px;
  width: 158px; height: 172px; padding: 0; border: 0;
  background: transparent; border-radius: 18px;
  animation: visitor-arrive .5s ease-out;
}
.boss-visitor[hidden] { display: none; }
.boss-visitor:hover { background: transparent; transform: translateY(-3px); }
.boss-visitor.visit-left { right: auto; left: 7px; }
.boss-visitor:disabled { opacity: 1; cursor: default; }
.boss-line { position: absolute; top: 0; left: 0; width: 100%; background: #f3ebf5; color: #796382; font-size: 10px; padding: 8px 4px; border-radius: 10px 10px 2px 10px; }
.boss-character { position: absolute; width: 88px; height: 91px; bottom: 28px; left: 35px; transition: transform .4s ease; }
.boss-body { position: absolute; inset: 10px 0 0; border-radius: 45% 45% 40% 40%; background: var(--boss-color); box-shadow: inset -7px -6px 0 var(--boss-shade); transition: background .6s, box-shadow .6s; z-index: 1; }
.boss-horn { position: absolute; width: 20px; height: 29px; background: #bda0c7; top: 0; border-radius: 80% 10% 0 0; }
.horn-left { left: 8px; transform: rotate(-25deg); }
.horn-right { right: 8px; transform: scaleX(-1) rotate(-25deg); }
.boss-eye { position: absolute; top: 35px; height: 8px; width: 7px; background: #f5dab2; border-radius: 50%; }
.eye-left { left: 22px; }.eye-right { right: 22px; }
.boss-brow { position: absolute; top: 27px; width: 16px; height: 4px; background: #33263f; border-radius: 5px; transition: transform .4s; }
.brow-left { left: 17px; transform: rotate(20deg); }.brow-right { right: 17px; transform: rotate(-20deg); }
.boss-mouth { position: absolute; left: 37px; top: 53px; width: 15px; height: 8px; border-top: 2px solid #e5cee8; border-radius: 50% 50% 0 0; }
.boss-blush { position: absolute; top: 47px; width: 16px; height: 8px; border-radius: 50%; background: #e9a1ad; opacity: 0; transition: opacity .6s; }
.blush-left { left: 10px; }.blush-right { right: 10px; }
.boss-heart { position: absolute; right: -15px; top: 4px; color: #c78096; font-size: 24px; opacity: 0; transition: opacity .6s; }
.boss-shadow { position: absolute; bottom: -3px; left: -3px; width: 94px; height: 14px; border-radius: 50%; background: #44324a18; }
.boss-hint { position: absolute; bottom: 0; left: 0; width: 100%; font-size: 10px; color: #8b7595; }
.boss-visitor.cute { --boss-color: #d8c4e5; --boss-shade: #c5a9d5; }
.cute .boss-brow { transform: rotate(0); opacity: .4; }
.cute .boss-eye { background: #665170; }
.cute .boss-mouth { border-top: 0; border-bottom: 2px solid #876b91; border-radius: 0 0 50% 50%; }
.cute .boss-blush,.cute .boss-heart { opacity: 1; }
.cute .boss-character { transform: rotate(-5deg) translateY(-3px); }
.cute .boss-line { background: #f5edf2; color: #a2798e; }
@keyframes visitor-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 400px) {
  .boss-visitor { width: 119px; right: 0; }
  .boss-visitor.visit-left { left: 0; }
  .boss-character { left: 16px; transform: scale(.88); transform-origin: bottom center; }
  .cute .boss-character { transform: scale(.88) rotate(-5deg); }
  .boss-line,.boss-hint { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .boss-visitor { animation: none; } .boss-character,.boss-body,.boss-brow,.boss-blush,.boss-heart { transition: none; } }

/* 柏希是柴犬：三角立耳、白色脸颊、眉豆与卷尾。 */
.pet { width: 164px; height: 174px; margin-left: -82px; bottom: 38px; }
.shiba-art { width: 100%; height: 100%; overflow: visible; }
.shiba-eyes { transform-box: fill-box; transform-origin: center; transition: transform .08s ease; }
.blinking .shiba-eyes { transform: scaleY(.12); }
.sleeping .shiba-eyes { transform: scaleY(.14); }
.shiba-tail { transform-box: fill-box; transform-origin: left bottom; animation: shiba-wag 3s ease-in-out infinite; }
.sleeping .shiba-tail { animation: none; }
@keyframes shiba-wag { 0%,70%,100% { transform: rotate(0); } 78% { transform: rotate(-9deg); } 86% { transform: rotate(5deg); } 94% { transform: rotate(-6deg); } }
/* 叶老板是傲娇猫：尖耳、胡须、鼻头与翘尾。 */
.boss-visitor { --boss-color: #53515f; --boss-shade: #403e4c; }
.boss-body { border-radius: 42% 42% 38% 38%; }
.cat-ear { position: absolute; width: 27px; height: 34px; top: -4px; background: var(--boss-color); clip-path: polygon(7% 0,100% 85%,0 100%); transition: background .6s; }
.cat-ear::after { content: ""; position: absolute; inset: 8px 7px 5px; background: #b88fa7; clip-path: polygon(5% 0,100% 90%,0 100%); }
.cat-ear-left { left: 1px; transform: rotate(-6deg); }
.cat-ear-right { right: 1px; transform: scaleX(-1) rotate(-6deg); }
.cat-tail { position: absolute; right: -19px; bottom: 1px; width: 32px; height: 57px; border: 10px solid var(--boss-color); border-left: 0; border-bottom: 0; border-radius: 0 25px 0 0; transform: rotate(12deg); transition: border-color .6s,transform .6s; }
.cat-forehead { position: absolute; top: 0; left: 34px; width: 20px; height: 16px; background: #ffffff12; clip-path: polygon(0 0,100% 0,78% 100%,50% 60%,22% 100%); }
.cat-muzzle { position: absolute; left: 27px; top: 48px; width: 36px; height: 24px; background: #ffffff14; border-radius: 50%; }
.cat-nose { position: absolute; left: 40px; top: 48px; width: 9px; height: 6px; background: #e4a6b3; clip-path: polygon(0 0,100% 0,50% 100%); }
.cat-whiskers { position: absolute; top: 45px; width: 23px; height: 12px; border-top: 1.5px solid #d2c7d7; border-bottom: 1.5px solid #d2c7d7; opacity: .8; }
.whiskers-left { left: -8px; transform: rotate(9deg); }
.whiskers-right { right: -8px; transform: rotate(-9deg); }
.boss-eye { background: #edd288; height: 7px; }
.boss-visitor:not(.cute) .boss-body::before,.boss-visitor:not(.cute) .boss-body::after { content: ""; position: absolute; top: 20px; width: 12px; height: 28px; background: var(--boss-color); clip-path: polygon(50% 0,100% 35%,65% 45%,100% 80%,10% 100%,0 20%); }
.boss-visitor:not(.cute) .boss-body::before { left: -6px; }
.boss-visitor:not(.cute) .boss-body::after { right: -6px; transform: scaleX(-1); }
.boss-visitor.cute { --boss-color: #d5c2b1; --boss-shade: #bfa894; }
.cute .cat-muzzle { background: #fff4e4; }
.cute .cat-forehead { background: #fff4e466; }
.cute .cat-tail { transform: rotate(-14deg); }
.cute .cat-whiskers { border-color: #a58e7e; }
.cute .boss-eye { background: #584b46; }
.cute .boss-mouth { border-color: #967566; }
.cute .boss-brow { transform: rotate(-7deg); opacity: .22; }
.cute .brow-right { transform: rotate(7deg); }
@media (prefers-reduced-motion: reduce) {
  .shiba-tail { animation: none; }
  .shiba-eyes,.cat-ear,.cat-tail { transition: none; }
}

/* 拘留模式：保留柴犬形象，只有抱抱按钮可以操作。 */
.detained button:not(#hug-rescue):not(#pet),
.detained .care-actions,
.detained .import-button,
.detained #welcome { display: none !important; }
.detained .scene.captured .pet {
  display: block;
  animation: sealed-breathe 4s ease-in-out infinite;
  filter: brightness(.65) saturate(.6);
  pointer-events: none;
}
.scene.captured::after {
  content: ""; position: absolute;
  width: 190px; height: 205px; bottom: 27px; left: 50%;
  transform: translateX(-50%); border-radius: 48% 48% 20% 20%;
  border: 2px solid #a58abca6;
  background: repeating-linear-gradient(90deg,#b59bce26 0 3px,transparent 3px 31px),linear-gradient(#d9cae955,#ae96ca33);
  box-shadow: inset 0 0 28px #ab8bc766,0 0 20px #bba1ce33;
  pointer-events: none;
}
.captured .capture-note { bottom: 7px; font-size: 18px; z-index: 2; }
.detained .rescue { justify-content: center; text-align: center; border: 2px solid #b99aca; background: #f1e7f6; }
.detained .rescue h2 { color: #774a87; font-size: 17px; line-height: 1.8; }
.detained .rescue .primary { padding: 16px; margin: 5px auto; font-size: 15px; box-shadow: 0 5px 16px #83628f22; }
.detained .rescue .primary:focus-visible { outline: 3px solid #9c7baf; }
@keyframes sealed-breathe { 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .detained .scene.captured .pet { animation: none; } }

.captured .shiba-tail { animation: none; }

/* 回到圆软团子；猫猫的黑化只是闹一点小脾气。 */
.pet { width: 134px; height: 143px; margin-left: -67px; bottom: 48px; }
.boss-visitor { --boss-color: #b8afc9; --boss-shade: #a59ab9; }
.boss-eye { background: #63556e; width: 7px; height: 9px; }
.boss-brow { background: #82728e; height: 2px; }
.brow-left { transform: rotate(10deg); }.brow-right { transform: rotate(-10deg); }
.boss-visitor:not(.cute) .boss-body::before,.boss-visitor:not(.cute) .boss-body::after { display: none; }
.boss-blush { opacity: .55; }
.cat-whiskers { border-color: #9b88a2; width: 18px; }
.cat-tail { border-width: 8px; }
.cat-muzzle { background: #f3e8ef88; }
.boss-visitor.cute { --boss-color: #e6cdd6; --boss-shade: #d7b8c4; }
.cute .boss-eye { background: #806774; }
.cute .boss-line { color: #ac7c91; }
.album { margin-top: 24px; padding: 24px; }
.album-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0; }
.album-tools button { font-size: 11px; }
.album-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.polaroid { background: #fffefb; padding: 10px 10px 14px; border: 1px solid #e9e4d9; box-shadow: 0 4px 12px #55442c0b; border-radius: 6px; transform: rotate(-.6deg); }
.polaroid:nth-child(even) { transform: rotate(.6deg); }
.polaroid img { width: 100%; display: block; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 3px; }
.polaroid h3 { margin: 11px 3px 2px; font-size: 13px; }
.polaroid p { font-size: 10px; margin: 3px; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 2px 0; }
.photo-actions button { padding: 6px 9px; font-size: 10px; border-radius: 8px; }
.album-empty { grid-column: 1 / -1; padding: 24px 8px; font-size: 12px; color: var(--muted); text-align: center; }
.photo-preview { width: 100%; border-radius: 12px; margin: 16px 0 6px; aspect-ratio: 2 / 1; }
.photo-dialog { width: min(490px,92vw); }
.photo-dialog #photo-question { font-size: 13px; margin: 12px 0 20px; }
.photo-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-choices button { font-size: 12px; padding: 13px 8px; }
#photo-later { display: block; margin: 18px auto; }
.scene.has-wallpaper { background-size: cover; background-position: center; }
.has-wallpaper .window,.has-wallpaper .plant,.has-wallpaper .rug { visibility: hidden; }
.has-wallpaper .speech { background: #fffef4e8; }
.has-wallpaper .room-label { background: #fff9; color: #607064; }
.detained .album-tools { display: none; }
@media (max-width: 800px) { .album-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 480px) {
  .album { padding: 18px; }
  .album-list { grid-template-columns: 1fr; }
  .photo-choices { grid-template-columns: 1fr; }
  .polaroid { transform: none; }
  header { gap: 10px; }
}
@media (pointer: coarse) { button { min-height: 44px; } .pet,.boss-visitor { min-height: 0; } }

dialog { max-height: 90dvh; overflow-y: auto; }
body { padding-bottom: env(safe-area-inset-bottom); }