:root {
  --pet-red: #7b2030;
  --pet-dark: #241116;
  --pet-gold: #d4a85e;
  --pet-paper: #f7eedb;
}

[data-theme="dark"] .pet-page {
  --pet-red: #e7a396;
  color: var(--ink);
  background: radial-gradient(circle at 16% 12%, #342c26, transparent 28rem),
    linear-gradient(160deg, #1c2420, #171c19);
}

[data-theme="dark"] .pet-page::before {
  opacity: 0.06;
  mix-blend-mode: screen;
}

[data-theme="dark"] .pet-page :is(.pet-heading h1, .pet-notes h2,
  .pet-archive h2, .pet-archive h3, .pet-archive strong) {
  color: var(--ink);
}

[data-theme="dark"] .pet-page :is(.pet-heading p, .pet-now span, .pet-now small,
  .pet-notes p, .pet-archive p) {
  color: var(--ink-soft);
}

[data-theme="dark"] .pet-page :is(.pet-now, .pet-entry-replay, .pet-notes article,
  .pet-archive, .pet-archive-grid article) {
  background: #252e28;
  border-color: var(--line);
}

.pet-entry-active {
  height: 100vh;
  overflow: hidden;
}

.pet-entry {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  color: #2d302d;
  background: #ddd3bd;
  isolation: isolate;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.pet-entry.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pet-entry-landscape {
  position: absolute;
  inset: 0;
  background: url("./assets/hutao-entry-shanshui.webp") center / cover no-repeat;
  filter: saturate(0.86) contrast(1.04);
  animation: shanshui-breathe 7s ease-out both;
  will-change: transform;
}

.pet-entry-mist {
  position: absolute;
  left: 0;
  width: 100%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(245, 239, 222, 0.52), rgba(230, 227, 214, 0.28), transparent);
  filter: blur(28px);
  mix-blend-mode: screen;
}

.pet-entry-mist-back {
  top: 40%;
  height: 12%;
  animation: shanshui-mist 7s ease-in-out infinite alternate;
}

.pet-entry-mist-front {
  top: 67%;
  height: 15%;
  opacity: 0.42;
  animation: shanshui-mist 9s -3s ease-in-out infinite alternate-reverse;
}

.pet-entry-ink {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 36%, rgba(247, 239, 218, 0.12) 0 20%, transparent 52%),
    linear-gradient(180deg, rgba(42, 39, 32, 0.1), transparent 28% 72%, rgba(28, 31, 28, 0.38));
  pointer-events: none;
}

.pet-entry-title {
  position: absolute;
  top: 17%;
  left: 50%;
  width: min(90vw, 700px);
  text-align: center;
  text-shadow: 0 2px 18px rgba(248, 240, 219, 0.95);
  transform: translateX(-50%);
  animation: entry-title-reveal 1.8s 0.25s ease both;
}

.pet-entry-title span {
  color: rgba(57, 61, 57, 0.68);
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: 0.54em;
}

.pet-entry-title h1 {
  margin: 0.06em 0 0;
  font: 400 clamp(64px, 8vw, 120px)/1 var(--font-brush);
  letter-spacing: 0.08em;
}

.pet-entry-title p {
  margin: 12px 0 0;
  color: rgba(63, 62, 55, 0.78);
  font: 400 clamp(18px, 2vw, 27px)/1.4 var(--font-brush);
  letter-spacing: 0.2em;
}

.pet-entry-loader {
  position: absolute;
  right: clamp(24px, 5vw, 76px);
  bottom: clamp(28px, 6vh, 66px);
  display: grid;
  grid-template-columns: auto minmax(160px, 23vw) 38px;
  align-items: center;
  gap: 14px;
  color: rgba(45, 49, 45, 0.72);
  font-size: 11px;
  letter-spacing: 0.18em;
}

.pet-entry-loader > div {
  height: 1px;
  overflow: hidden;
  background: rgba(41, 45, 42, 0.2);
}

.pet-entry-loader i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #80352f, #bb7658);
  box-shadow: 0 0 12px rgba(128, 53, 47, 0.32);
  transition: width 0.35s ease;
}

.pet-entry-loader b {
  font-weight: 400;
}

.pet-entry-loader b::after {
  content: "%";
  margin-left: 2px;
  opacity: 0.55;
}

.pet-entry-skip {
  position: absolute;
  left: clamp(24px, 5vw, 76px);
  bottom: clamp(22px, 5vh, 56px);
  padding: 8px 1px;
  border: 0;
  border-bottom: 1px solid rgba(44, 49, 45, 0.4);
  color: rgba(45, 49, 45, 0.72);
  background: transparent;
  font-size: 12px;
  letter-spacing: 0.23em;
  cursor: pointer;
}

@keyframes shanshui-breathe {
  from { transform: scale(1.035); }
  to { transform: scale(1); }
}

@keyframes shanshui-mist {
  from { translate: -4% 0; scale: 0.94 1; }
  to { translate: 4% 0; scale: 1.06 1; }
}

@keyframes entry-title-reveal {
  from { opacity: 0; filter: blur(9px); transform: translate(-50%, 25px); }
  to { opacity: 1; filter: blur(0); transform: translate(-50%, 0); }
}

.pet-page {
  min-height: 100vh;
  color: #2b171b;
  background:
    radial-gradient(circle at 16% 12%, rgba(202, 152, 99, 0.2), transparent 28rem),
    linear-gradient(160deg, #f8f0df 0%, #ead7bd 48%, #d4b797 100%);
}

.pet-page::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.2;
  background-image: url("./assets/hutao-ink/PaperTexture.webp");
  background-size: 520px auto;
  mix-blend-mode: multiply;
}

.pet-header { background: rgba(247, 238, 219, 0.88); }
.pet-shell { width: min(1280px, calc(100% - 40px)); margin: 0 auto; padding: 126px 0 70px; }

.pet-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 24px;
}

.pet-kicker { margin: 0 0 8px; color: var(--pet-red); font: 700 0.72rem/1.2 sans-serif; letter-spacing: 0.22em; }
.pet-heading h1 { margin: 0; color: #4d1620; font: 400 clamp(2.7rem, 6vw, 5.2rem)/0.95 var(--font-brush); }
.pet-heading > div > p:last-child { max-width: 660px; margin: 14px 0 0; color: #795c53; line-height: 1.8; }

.pet-now {
  min-width: 220px;
  padding: 16px 20px;
  border: 1px solid rgba(104, 48, 47, 0.2);
  border-radius: 18px;
  background: rgba(255, 250, 239, 0.58);
  box-shadow: 0 14px 35px rgba(67, 34, 28, 0.08);
}
.pet-now span, .pet-now small { display: block; color: #86665d; }
.pet-now strong { display: block; margin: 3px 0; color: var(--pet-red); font: 500 1.8rem/1.1 var(--font-body); }

.pet-entry-replay {
  min-height: 44px;
  border: 1px solid rgba(104, 48, 47, 0.24);
  border-radius: 999px;
  padding: 10px 18px;
  color: var(--pet-red);
  background: rgba(255, 250, 239, 0.62);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(67, 34, 28, 0.08);
}

.pet-entry-replay:hover {
  transform: translate3d(0, -1px, 0);
}

.hutao-house {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  border: 1px solid rgba(255, 232, 193, 0.18);
  border-radius: 32px;
  background:
    linear-gradient(90deg, rgba(29, 13, 19, 0.2), transparent 35%, transparent 65%, rgba(29, 13, 19, 0.2)),
    linear-gradient(180deg, #371823 0%, #6f2830 61%, #452126 62%, #2d171a 100%);
  box-shadow: 0 32px 80px rgba(63, 27, 29, 0.25);
  isolation: isolate;
}

.hutao-house::after {
  position: absolute;
  inset: 0;
  z-index: 8;
  content: "";
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 227, 173, 0.24), transparent 32%),
    linear-gradient(100deg, transparent 0%, rgba(255, 248, 226, 0.62) 48%, transparent 70%);
  transform: translateX(-120%);
  transition:
    opacity 0.26s ease,
    transform 0.56s cubic-bezier(0.22, 1, 0.36, 1);
}

.hutao-house.is-switching-character::after {
  opacity: 1;
  transform: translateX(120%);
}

.room-scenery { position: absolute; inset: 0; overflow: hidden; z-index: -2; transition: filter 0.5s; }
.hutao-house.is-deep-night .room-scenery { filter: brightness(0.7) saturate(1.2) hue-rotate(5deg); }
.hutao-house[data-time-scene="dawn"] .room-scenery { filter: brightness(1.05) sepia(0.08) hue-rotate(-8deg); }
.hutao-house[data-time-scene="day"] .room-scenery { filter: brightness(1.12) saturate(0.95); }
.hutao-house[data-time-scene="dusk"] .room-scenery { filter: brightness(0.88) sepia(0.18) saturate(1.18); }
.hutao-house[data-time-scene="night"] .room-scenery { filter: brightness(0.68) saturate(1.2) hue-rotate(5deg); }
.room-scenery::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 5%, rgba(255, 215, 148, 0.22), transparent 32%),
    repeating-linear-gradient(90deg, transparent 0 120px, rgba(22, 8, 12, 0.2) 121px 124px);
}
.moon { position: absolute; top: 75px; left: 50%; width: 125px; height: 125px; translate: -50%; border-radius: 50%; background: #ffe6ad; box-shadow: 0 0 70px rgba(255, 218, 149, 0.45); }
.mountain { position: absolute; left: 0; bottom: 170px; width: 100%; height: 250px; clip-path: polygon(0 85%, 14% 44%, 25% 71%, 41% 27%, 53% 69%, 68% 20%, 82% 70%, 100% 38%, 100% 100%, 0 100%); }
.mountain-back { background: rgba(29, 24, 34, 0.55); }
.mountain-front { bottom: 120px; background: rgba(18, 15, 20, 0.8); transform: scaleX(-1); }
.window-frame { position: absolute; inset: 28px 26% 165px; border: 16px solid rgba(47, 18, 23, 0.92); border-radius: 180px 180px 12px 12px; box-shadow: inset 0 0 0 2px rgba(223, 164, 92, 0.18); }
.window-frame::before, .window-frame::after { position: absolute; content: ""; background: rgba(47, 18, 23, 0.88); }
.window-frame::before { top: 0; bottom: 0; left: 50%; width: 10px; }
.window-frame::after { top: 48%; left: 0; right: 0; height: 10px; }

.hanging-lantern { position: absolute; top: -5px; width: 46px; height: 78px; border-radius: 12px 12px 24px 24px; background: #c84438; box-shadow: 0 0 35px rgba(255, 104, 65, 0.48); animation: lanternSway 4s ease-in-out infinite alternate; transform-origin: 50% -30px; }
.hanging-lantern::before { position: absolute; left: 50%; bottom: 100%; width: 2px; height: 55px; content: ""; background: #1e0d10; }
.lantern-left { left: 20%; }
.lantern-right { right: 20%; animation-delay: -2s; }

.room-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 155px; z-index: -1; background: repeating-linear-gradient(92deg, #4a2923 0 110px, #3f211e 112px 116px); box-shadow: inset 0 12px 30px rgba(18, 8, 9, 0.35); }
.status-card, .control-card {
  position: absolute;
  z-index: 5;
  width: 260px;
  padding: 19px;
  border: 1px solid rgba(255, 228, 187, 0.18);
  border-radius: 22px;
  color: #f9ead4;
  background: rgba(33, 15, 21, 0.76);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 38px rgba(14, 6, 8, 0.23);
}
.status-card { top: 30px; left: 30px; }
.control-card { top: 30px; right: 30px; width: 284px; }
.profile-row { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 10px; }
.profile-avatar { position: relative; display: block; width: 45px; height: 45px; overflow: hidden; border: 1px solid #bd8959; border-radius: 50%; background: #8c2733; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar b { display: none; place-items: center; width: 100%; height: 100%; color: #ffe0a1; background: linear-gradient(145deg, #73291f, #281717); font: 400 1.35rem/1 var(--font-brush); }
.hutao-house.is-visitor .profile-avatar img { display: none; }
.hutao-house.is-visitor .profile-avatar b { display: grid; }
.profile-row small, .control-title small { display: block; color: #c5a594; font-size: 0.72rem; }
.profile-row strong, .control-title strong { display: block; margin-top: 2px; }
.coin-count { color: #f1c96f; font-size: 0.88rem; }
.xp-track { position: relative; height: 7px; margin: 14px 0 18px; overflow: visible; border-radius: 10px; background: rgba(255,255,255,0.1); }
.xp-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d48a4b, #ffdc85); transition: width 0.45s; }
.xp-track span { position: absolute; top: 8px; right: 0; color: #a98a7e; font-size: 0.62rem; }
.stat-list { display: grid; gap: 12px; margin-top: 26px; }
.stat-row { display: grid; grid-template-columns: 38px 1fr 25px; align-items: center; gap: 8px; font-size: 0.75rem; }
.stat-row > div { height: 7px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,0.1); }
.stat-row i { display: block; width: 80%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b94a55, #f09a72); transition: width 0.45s; }
.stat-row:nth-child(2) i { background: linear-gradient(90deg, #c25a8e, #f6a6bd); }
.stat-row:nth-child(3) i { background: linear-gradient(90deg, #65969b, #9ed8c8); }
.stat-row b { text-align: right; }
.daily-gift { width: 100%; margin-top: 18px; padding: 11px 12px; border: 1px solid rgba(239, 195, 116, 0.32); border-radius: 13px; color: #3a1a1d; background: linear-gradient(135deg, #f2d394, #ca8d52); cursor: pointer; }
.daily-gift span, .daily-gift strong { display: block; }
.daily-gift span { font-size: 0.68rem; opacity: 0.74; }
.daily-gift:disabled { filter: grayscale(0.7); opacity: 0.6; cursor: default; }

.control-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.text-control { border: 0; color: #d9b978; background: none; cursor: pointer; }
.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.visit-control { display: grid; grid-template-columns: 48px 1fr; align-items: center; width: 100%; margin-bottom: 12px; padding: 10px 12px; border: 1px solid rgba(239, 186, 103, 0.34); border-radius: 13px; color: #f7dfba; background: linear-gradient(110deg, rgba(161, 67, 48, 0.38), rgba(255,255,255,0.04)); text-align: left; cursor: pointer; }
.visit-control span { font: 400 1.08rem/1 var(--font-brush); }
.visit-control strong { font-size: 0.72rem; font-weight: 500; }
.visit-control:hover { border-color: rgba(239, 186, 103, 0.7); background-color: rgba(168, 64, 63, 0.25); }
.visit-control.is-active { color: #d9c8b8; border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); }
.visit-control:disabled { opacity: 0.5; cursor: wait; }
.action-grid button { padding: 10px 5px; border: 1px solid rgba(255, 231, 197, 0.11); border-radius: 13px; color: #f8ead8; background: rgba(255,255,255,0.055); cursor: pointer; transition: transform 0.2s, background 0.2s, border-color 0.2s; }
.action-grid button:hover { transform: translateY(-2px); border-color: rgba(239, 186, 103, 0.55); background: rgba(168, 64, 63, 0.26); }
.action-grid button:disabled { opacity: 0.45; cursor: wait; }
.action-grid span, .action-grid b, .action-grid small { display: block; }
.action-grid span { height: 21px; color: #e6b96f; font-size: 1.08rem; }
.action-grid b { font-size: 0.78rem; }
.action-grid small { margin-top: 2px; color: #ad9184; font-size: 0.58rem; }
.switch-row { display: flex; gap: 6px; margin-top: 14px; }
.mini-toggle { flex: 1; padding: 7px 4px; border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; color: #bba49a; background: transparent; font-size: 0.64rem; cursor: pointer; }
.mini-toggle.is-on { color: #ffe0a1; border-color: rgba(231, 181, 103, 0.4); background: rgba(183, 96, 56, 0.18); }

.live-status { position: absolute; top: 36px; left: 50%; z-index: 6; display: flex; align-items: center; gap: 8px; translate: -50%; padding: 7px 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; color: #d8c3b8; background: rgba(25,10,14,0.62); font-size: 0.68rem; backdrop-filter: blur(8px); }
.live-status i { width: 7px; height: 7px; border-radius: 50%; background: #e0a654; box-shadow: 0 0 10px #e0a654; animation: statusPulse 1s ease-in-out infinite alternate; }
.live-status.is-ready i { background: #76d49a; box-shadow: 0 0 10px #76d49a; animation: none; }
.live-status.is-error i { background: #d85a67; box-shadow: none; animation: none; }

.speech-bubble { position: absolute; top: 98px; left: 50%; z-index: 5; width: min(290px, 35%); translate: -50%; padding: 12px 17px; border: 1px solid rgba(255, 234, 204, 0.2); border-radius: 17px 17px 17px 4px; color: #f8ead5; background: rgba(42, 17, 22, 0.7); backdrop-filter: blur(10px); text-align: center; }
.speech-bubble small { color: #dfaf71; font-family: var(--font-brush); font-size: 1rem; }
.speech-bubble p { margin: 3px 0 0; font-size: 0.8rem; line-height: 1.55; }

.pet-stage { position: absolute; left: 50%; bottom: 76px; z-index: 3; width: min(470px, 42vw); height: 540px; translate: -50%; touch-action: none; }
.stage-glow { position: absolute; inset: 14% 8% 3%; border-radius: 50%; background: radial-gradient(circle, rgba(234, 151, 83, 0.17), transparent 68%); filter: blur(12px); }
.pet-shadow { position: absolute; left: 50%; bottom: 6px; width: 58%; height: 35px; translate: -50%; border-radius: 50%; background: rgba(8, 4, 6, 0.45); filter: blur(9px); animation: shadowBreath 3.6s ease-in-out infinite; }
.pet-character { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: grab; }
.pet-character:active { cursor: grabbing; }
.pet-rig, .pet-canvas { position: absolute; inset: 0; display: block; }
.pet-canvas { overflow: hidden; }
.live2d-canvas { display: block; width: 100%; height: 100%; }
.pet-fallback { position: absolute; left: 50%; bottom: 12px; width: 76%; max-height: 92%; translate: -50%; object-fit: contain; filter: drop-shadow(0 15px 20px rgba(15,5,8,0.3)); animation: fallbackBreath 3.4s ease-in-out infinite; }
.pet-rig.is-live2d-ready .pet-fallback { display: none; }
.hutao-house.is-visitor .pet-fallback { display: none; }
.drag-tip { position: absolute; left: 50%; bottom: 18px; z-index: 5; translate: -50%; margin: 0; color: rgba(244, 221, 194, 0.63); font-size: 0.67rem; letter-spacing: 0.08em; white-space: nowrap; }

.pet-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.pet-notes article { display: flex; gap: 15px; padding: 20px; border: 1px solid rgba(107, 52, 48, 0.14); border-radius: 18px; background: rgba(255, 249, 237, 0.48); }
.pet-notes article > span { color: var(--pet-red); font: 500 1.4rem/1 var(--font-body); }
.pet-notes h2 { margin: 0 0 6px; color: #51232a; font-size: 0.95rem; }
.pet-notes p { margin: 0; color: #80665d; font-size: 0.76rem; line-height: 1.65; }

.pet-archive {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(107, 52, 48, 0.12);
  border-radius: 18px;
  background: rgba(255, 249, 237, 0.4);
}

.pet-archive-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.pet-archive-heading h2 {
  margin: 0;
  color: #51232a;
  font-size: 1.02rem;
}

.pet-archive-heading p {
  margin: 5px 0 0;
  color: #80665d;
  font-size: 0.78rem;
  line-height: 1.65;
}

.pet-archive-tag {
  flex: 0 0 auto;
  color: #8d333d;
  font: 400 1.25rem/1 var(--font-brush);
}

.pet-archive-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.pet-archive-grid article {
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(107, 52, 48, 0.12);
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.52);
}

.pet-archive-grid span {
  display: block;
  color: #9a3440;
  font: 400 1.15rem/1 var(--font-brush);
}

.pet-archive-grid h3 {
  margin: 9px 0 6px;
  color: #51232a;
  font-size: 0.84rem;
}

.pet-archive-grid strong {
  display: block;
  margin: 9px 0 6px;
  color: #51232a;
  font-size: 0.84rem;
}

.pet-archive-grid p {
  margin: 0;
  color: #80665d;
  font-size: 0.72rem;
  line-height: 1.62;
}
.pet-toast { position: fixed; left: 50%; bottom: 30px; z-index: 50; translate: -50% 20px; padding: 10px 18px; border-radius: 22px; color: #fff0dc; background: rgba(49, 17, 23, 0.9); opacity: 0; pointer-events: none; transition: opacity 0.25s, translate 0.25s; }
.pet-toast.is-visible { translate: -50% 0; opacity: 1; }
.pet-spark { position: fixed; z-index: 40; color: #ffd27b; pointer-events: none; animation: sparkFly 0.8s ease-out forwards; }

@keyframes lanternSway { to { transform: rotate(4deg); } }
@keyframes statusPulse { to { opacity: 0.35; } }
@keyframes shadowBreath { 50% { transform: translateX(-50%) scaleX(0.92); opacity: 0.72; } }
@keyframes fallbackBreath { 50% { transform: translateX(-50%) translateY(-7px) scale(1.008); } }
@keyframes sparkFly { to { opacity: 0; transform: translate(var(--dx), -70px) rotate(80deg) scale(0.25); } }

/* Responsive layout reset: keep the room structured instead of stacking fixed offsets. */
.pet-page .pet-shell {
  width: min(1280px, calc(100% - clamp(24px, 4vw, 56px)));
  padding: clamp(92px, 11svh, 126px) 0 70px;
}

.pet-page .pet-heading {
  align-items: center;
  margin-bottom: clamp(16px, 2.4vw, 26px);
}

.pet-page .pet-heading h1 {
  font-size: clamp(2.45rem, 5vw, 4.65rem);
}

.pet-page .pet-heading > div > p:last-child {
  margin-top: 10px;
  font-size: clamp(0.94rem, 1.2vw, 1.02rem);
}

.pet-page .pet-now {
  min-width: min(220px, 100%);
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 250, 239, 0.46);
  box-shadow: 0 10px 26px rgba(67, 34, 28, 0.07);
}

.pet-page .pet-now strong {
  font-size: clamp(1.35rem, 2.5vw, 1.72rem);
}

.pet-page .hutao-house {
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(330px, 1.55fr) minmax(250px, 0.95fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
  min-height: min(760px, max(610px, calc(100svh - 178px)));
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;
}

.pet-page .room-scenery,
.pet-page .room-floor {
  pointer-events: none;
}

.pet-page .room-scenery {
  z-index: -2;
}

.pet-page .room-floor {
  z-index: -1;
}

.pet-page .status-card,
.pet-page .control-card,
.pet-page .pet-stage {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  translate: none;
}

.pet-page .status-card,
.pet-page .control-card {
  width: 100%;
  max-width: 310px;
  padding: clamp(16px, 2vw, 19px);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(37, 16, 21, 0.82), rgba(37, 16, 21, 0.66)),
    url("./assets/hutao-ink/PaperTexture.webp") center / 460px auto repeat;
  backdrop-filter: none;
}

.pet-page .status-card {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.pet-page .control-card {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.pet-page .pet-stage {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: min(100%, 520px);
  height: clamp(460px, 55svh, 580px);
  z-index: 3;
}

.pet-page .live-status {
  top: clamp(18px, 2.5vw, 32px);
  z-index: 7;
  font-size: 0.75rem;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}

.pet-page .live-status.is-ready {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
}

.pet-page .speech-bubble {
  top: 18px;
  left: 50%;
  z-index: 6;
  width: min(330px, 30vw);
  min-width: 240px;
  text-align: left;
}

.pet-page .speech-bubble p {
  font-size: clamp(0.84rem, 1vw, 0.92rem);
}

.pet-page .drag-tip {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  left: auto;
  bottom: auto;
  justify-self: center;
  z-index: 4;
  margin-top: -12px;
  translate: none;
  opacity: 0;
  white-space: normal;
  text-align: center;
  animation: petTipBrief 5.5s 1.1s ease both;
}

.pet-page .pet-notes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pet-page .pet-notes article {
  padding: 16px 18px;
  border-radius: 10px;
  background: rgba(255, 249, 237, 0.34);
}

.pet-page .pet-notes h2 {
  font-size: clamp(0.9rem, 1vw, 0.98rem);
}

.pet-page .pet-notes p {
  font-size: clamp(0.76rem, 0.9vw, 0.84rem);
}

.pet-page .pet-archive {
  border-radius: 10px;
  background: rgba(255, 249, 237, 0.34);
}

.pet-page .pet-archive-grid article {
  border-radius: 10px;
}

.pet-page .action-grid button {
  min-height: 46px;
}

.pet-page .action-grid b,
.pet-page .visit-control strong {
  font-size: max(0.84rem, 13px);
}

.pet-page .action-grid small,
.pet-page .mini-toggle,
.pet-page .profile-row small,
.pet-page .control-title small {
  font-size: max(0.72rem, 12px);
}

@keyframes petTipBrief {
  0%, 18% { opacity: 0; transform: translateY(8px); }
  28%, 72% { opacity: 0.72; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* The room uses an independent compact touch layout, with no fixed panel offsets. */
.pet-page .site-header{position:fixed;inset:0 0 auto;transform:none}.pet-page .pet-stage{min-width:0}.pet-page .status-card,.pet-page .control-card{backdrop-filter:none}.pet-page .action-grid button{transition:border-color 200ms,background-color 200ms}.pet-page .action-grid button:hover{transform:translateY(-2px)}
@media(max-width:1100px){.pet-page .hutao-house{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;min-height:0;padding:90px 24px 24px;gap:20px}.pet-page .pet-stage{grid-column:1/-1;grid-row:1;width:min(100%,520px);height:460px}.pet-page .status-card{grid-column:1;grid-row:2;max-width:none}.pet-page .control-card{grid-column:2;grid-row:2;max-width:none}.pet-page .speech-bubble{width:min(360px,calc(100% - 48px));top:18px}.pet-page .drag-tip{display:none}}
@media(max-width:767px){
 .pet-page .pet-shell{width:calc(100% - 24px);padding:calc(94px + env(safe-area-inset-top)) 0 40px}
 .pet-page .pet-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-bottom:18px;align-items:center}
 .pet-page .pet-heading>div:first-child{grid-column:1/-1}.pet-page .pet-heading h1{font-size:43px;line-height:1.15;margin:6px 0}.pet-page .pet-kicker{font-size:11px;letter-spacing:.18em}.pet-page .pet-heading>div>p:last-child{font-size:13px;margin:8px 0 0;line-height:1.75}
 .pet-page .pet-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;min-width:0}.pet-page .pet-now strong{font-size:19px}.pet-page .pet-now span{font-size:12px}.pet-page .pet-now small{flex-basis:100%;font-size:11px}.pet-page .pet-entry-replay{min-width:0;min-height:44px;padding:8px 12px;border-radius:0;font-size:12px}
 .pet-page .hutao-house{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;align-items:start;gap:10px;padding:14px 12px 16px;min-height:0;border-radius:5px}
 .pet-page .status-card{grid-column:1;grid-row:1;max-width:none;padding:10px 12px;border-radius:3px;background:#27171ceb;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px}
 .pet-page .profile-row{grid-column:1;grid-template-columns:32px minmax(0,1fr) auto;gap:8px}.pet-page .profile-avatar{width:32px;height:32px}.pet-page .profile-row small{font-size:10px}.pet-page .profile-row strong{font-size:13px}.pet-page .coin-count{font-size:12px}.pet-page .xp-track{grid-column:1/-1;grid-row:2;margin:0;height:5px}.pet-page .xp-track span{display:none}
 .pet-page .stat-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}.pet-page .stat-row{display:grid;grid-template-columns:1fr auto;gap:2px;font-size:10px}.pet-page .stat-row>div{grid-row:2;grid-column:1/-1;height:3px}.pet-page .stat-row b{grid-column:2;grid-row:1;font-size:10px}.pet-page .daily-gift{grid-column:2;grid-row:1;margin:0;min-height:44px;padding:4px 8px;font-size:10px;max-width:96px}.pet-page .daily-gift strong{font-size:10px}
 .pet-page .speech-bubble{position:relative;grid-column:1;grid-row:2;inset:auto;translate:none;width:100%;min-width:0;max-width:none;border-radius:0;padding:8px 12px;background:#29191ee0;backdrop-filter:none;text-align:left}.pet-page .speech-bubble small{font-size:12px}.pet-page .speech-bubble p{font-size:12px;line-height:1.6;margin:0}
 .pet-page .pet-stage{grid-column:1;grid-row:3;width:min(100%,360px);height:clamp(240px,31svh,300px);margin-top:-5px;justify-self:center}.pet-page .pet-fallback{width:78%}.pet-page .window-frame{inset:140px 7% auto;height:340px}.pet-page .live-status{top:134px;font-size:11px;max-width:calc(100% - 30px);white-space:normal}
 .pet-page .control-card{grid-column:1;grid-row:4;max-width:none;padding:12px;border-radius:3px;background:#27171cf0}.pet-page .control-title{margin-bottom:8px;align-items:center}.pet-page .control-title strong{font-size:14px}.pet-page .control-title small{font-size:10px}.pet-page .text-control{min-width:44px;min-height:44px}
 .pet-page .visit-control{grid-template-columns:34px minmax(0,1fr);min-height:44px;padding:7px 10px;margin-bottom:8px;border-radius:2px}.pet-page .visit-control strong{font-size:12px}.pet-page .action-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.pet-page .action-grid button{min-height:62px;height:auto;padding:7px 3px;border-radius:2px}.pet-page .action-grid button>span{font-size:15px}.pet-page .action-grid b{font-size:13px;color:#f0dcc3}.pet-page .action-grid small{font-size:11px;color:#cdb499}.pet-page .action-grid button:disabled{opacity:.7}.pet-page .switch-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.pet-page .mini-toggle{min-height:44px;padding:7px 2px;font-size:11px;border-radius:2px}
 .pet-page .pet-notes{grid-template-columns:1fr;gap:10px}.pet-page .pet-notes article{border-radius:0;padding:14px}.pet-page .pet-archive{padding:20px 14px;border-radius:0}.pet-page .pet-archive-heading{display:block}.pet-page .pet-archive-grid{grid-template-columns:1fr;gap:10px}.pet-page .pet-archive-grid article{border-radius:0}.pet-page .pet-entry-landscape{inset:0;background-position:center}.pet-page .pet-entry-title{top:16%}.pet-page .pet-entry-loader{right:20px;bottom:28px;grid-template-columns:minmax(130px,43vw) 34px}.pet-page .pet-entry-loader>span{display:none}.pet-page .pet-entry-skip{left:20px;bottom:20px}
}
@media(orientation:landscape) and (max-height:500px){.pet-page .hutao-house{grid-template-columns:minmax(0,1fr) minmax(260px,1fr);grid-template-rows:auto auto;padding:80px 20px 20px}.pet-page .pet-stage{grid-column:1;grid-row:1/3;width:100%;height:400px}.pet-page .status-card{grid-column:2;grid-row:1}.pet-page .control-card{grid-column:2;grid-row:2}.pet-page .speech-bubble{position:absolute;top:12px;left:20px;translate:none;width:calc(50% - 30px);min-width:0}.pet-page .pet-heading{margin-bottom:16px}.pet-page .hutao-house .window-frame{inset:25px 45% 35px 5%;height:auto}}
@media(prefers-reduced-motion:reduce){.pet-page *,.pet-page *::before,.pet-page *::after{animation:none!important;transition:none!important}.pet-page .action-grid button:hover{transform:none}}