.home-pet {
  position: relative;
  overflow: hidden;
  min-height: 305px;
  border: 1px solid #cfdabf;
  border-radius: 22px;
  background: #eef0d8;
  text-align: center;
}
.home-pet-heading { position: absolute; z-index: 1; top: 14px; right: 18px; display: grid; gap: 2px; padding: 7px 10px; border-radius: 10px; background: #fffdf5d9; text-align: right; }
.home-pet-heading strong { color: #193b2b; font-size: 21px; line-height: 1.2; }
.pet-tap { display: block; width: 100%; height: 259px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pet-tap:focus-visible { outline: 3px solid #e37e4d; outline-offset: -5px; }
.pet-art { display: block; width: 100%; height: 100%; }
.pet-art svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.pet-room-roamer, .pet-room-bob, .pet-room-ball { transform-box: fill-box; transform-origin: center; }
.pet-room-roamer { animation: pet-room-patrol 10s ease-in-out infinite; }
.pet-room-bob { animation: pet-room-step .55s ease-in-out infinite alternate; }
.pet-room-ball { animation: pet-room-ball-idle 2.8s ease-in-out infinite; }
.pet-room-sparkles { opacity: 0; }
.pet-tap.is-playing .pet-room-roamer { animation: pet-room-play 1.25s ease-in-out 1; }
.pet-tap.is-playing .pet-room-ball { animation: pet-room-ball-play 1.25s ease-in-out 1; }
.pet-tap.is-playing .pet-room-sparkles { animation: pet-room-sparkle 1.25s ease-out 1; }
.home-pet p { position: relative; z-index: 1; margin: 0; padding: 7px 12px 11px; color: #4b6952; font-size: 12px; font-weight: 800; }
@keyframes pet-room-patrol {
  0%, 8% { transform: translateX(9px) scaleX(1); }
  40% { transform: translateX(-10px) scaleX(1); }
  41%, 52% { transform: translateX(-10px) scaleX(-1); }
  90% { transform: translateX(9px) scaleX(-1); }
  91%, 100% { transform: translateX(9px) scaleX(1); }
}
@keyframes pet-room-step { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes pet-room-ball-idle { 0%, 100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-3px) rotate(10deg); } }
@keyframes pet-room-play { 0%, 100% { transform: translateX(0) translateY(0); } 36% { transform: translateX(-15px) translateY(-10px); } 67% { transform: translateX(-21px) translateY(0); } }
@keyframes pet-room-ball-play { 0%, 100% { transform: translateX(0) translateY(0) rotate(0); } 33% { transform: translateX(31px) translateY(-15px) rotate(100deg); } 66% { transform: translateX(49px) translateY(-2px) rotate(250deg); } }
@keyframes pet-room-sparkle { 0%, 100% { opacity: 0; } 35%, 75% { opacity: 1; } }

#homeDashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
#homeDashboard > section { display: flex; flex-direction: column; min-width: 0; min-height: 142px; padding: 20px; }
#homeDashboard h2 { margin: 7px 0; font-size: 20px; }
#homeDashboard .wallet-amount { margin-top: auto; }
#homeDashboard .wallet-card p { margin-top: 6px; }
#homeDashboard .daily-card p { min-height: 0; margin: 5px 0 8px; }
#homeDashboard .daily-card button { align-self: start; margin-top: auto; }
.home-tile { border-radius: 19px; }
.home-tile p { margin: 0 0 10px; font-size: 12px; }
.home-tile button { width: 100%; min-height: 43px; margin-top: auto; border: 0; border-radius: 10px; font-weight: 900; cursor: pointer; }
.home-race-tile { background: #e8b17f; color: #193b2b; }
.home-race-tile .eyebrow { color: #7d492c; }
.home-race-tile button { background: #193b2b; color: #fff; }
.home-dress-tile { background: #d8e8da; color: #193b2b; }
.home-dress-tile .eyebrow { color: #427054; }
.home-dress-tile button { background: #fffdf5; color: #193b2b; }
.home-record { margin-top: 14px; padding: 20px 24px; border-radius: 19px; }
.home-record h2 { margin: 7px 0; font-size: 17px; }
.home-record .record-numbers { margin-top: 10px; }
.mission-panel { margin-top: 14px; padding: 22px 24px; scroll-margin-top: 75px; }
.mission-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.mission-heading h2 { margin: 5px 0 2px; font-size: 21px; }
.mission-heading p { margin: 0; color: #698071; font-size: 12px; }
.mission-heading > strong { flex: none; color: #2d6c45; font-size: 19px; }
.mission-panel progress { display: block; width: 100%; height: 11px; margin: 15px 0 18px; overflow: hidden; border: 0; border-radius: 99px; appearance: none; background: #e5ebdf; }
.mission-panel progress::-webkit-progress-bar { background: #e5ebdf; }
.mission-panel progress::-webkit-progress-value { border-radius: 99px; background: #e57b4e; }
.mission-panel progress::-moz-progress-bar { border-radius: 99px; background: #e57b4e; }
.mission-rewards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mission-reward { display: grid; gap: 4px; padding: 12px; border: 1px solid #dce2d2; border-radius: 11px; background: #f2f3ec; color: #607365; }
.mission-reward.is-unlocked { border-color: #e4bb5a; background: #fff2c4; color: #4e431f; }
.mission-reward strong { font-size: 14px; }
.mission-reward span { font-size: 12px; font-weight: 900; }
.mission-reward small { font-size: 11px; }
.mission-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 17px; }
.mission-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #e0e7da; border-radius: 10px; background: #fff; }
.mission-item.is-done { border-color: #acd4a7; background: #eef8e9; }
.mission-check { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #eef0e9; color: #78907b; font-weight: 1000; }
.mission-item.is-done .mission-check { background: #3c8b56; color: #fff; }
.mission-item strong, .mission-item small { display: block; }
.mission-item strong { font-size: 12px; }
.mission-item small { margin-top: 2px; color: #738576; font-size: 10px; }
.mission-item b { color: #49654e; font-size: 12px; font-variant-numeric: tabular-nums; }
.mission-note { margin: 14px 0 0; color: #718174; font-size: 11px; line-height: 1.6; }

.pet-dialog { width: min(710px, calc(100% - 20px)); max-height: min(90dvh, 900px); padding: 18px; border: 1px solid #c7d7c4; border-radius: 20px; background: #fffdf5; color: #173b2a; box-shadow: 0 18px 80px #10251c66; }
.pet-dialog::backdrop { background: #10251c99; }
.pet-dialog-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.pet-dialog-header h2 { margin: 4px 0 0; font-size: 24px; }
.pet-dialog-header > button { width: 40px; height: 40px; border: 1px solid #cdd9cb; border-radius: 10px; background: #fff; color: #193b2b; font-size: 23px; cursor: pointer; }
.pet-dialog-preview { position: relative; overflow: hidden; height: 215px; margin: 14px 0; border-radius: 14px; background: #e8efd9; }
.pet-dialog-preview .pet-art { height: 100%; }
.pet-dialog-preview > span:last-child { position: absolute; top: 11px; right: 13px; padding: 5px 9px; border-radius: 999px; background: #fffdf5db; font-size: 12px; font-weight: 900; }
.pet-dialog-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 15px; padding: 5px; border-radius: 12px; background: #eaf0e6; }
.pet-dialog-tabs button { min-height: 43px; border: 0; border-radius: 9px; background: transparent; color: #41624c; font-weight: 900; cursor: pointer; }
.pet-dialog-tabs button[aria-pressed="true"] { background: #193b2b; color: #fff; }
.pet-form { display: grid; gap: 13px; }
.pet-form label { display: grid; gap: 5px; color: #496956; font-size: 12px; font-weight: 900; }
.pet-form input, .pet-form select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #cbd8c6; border-radius: 9px; background: #fff; color: #193b2b; font: inherit; font-size: 15px; }
.pet-form-grid, .pet-equipment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pet-base-picker { min-width: 0; margin: 0; padding: 10px; border: 1px solid #d3ddcc; border-radius: 12px; }
.pet-base-picker legend { padding: 0 6px; color: #294b35; font-size: 13px; font-weight: 900; }
.pet-base-picker p { margin: 0 0 10px; color: #6c816e; font-size: 11px; line-height: 1.5; }
.pet-base-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.pet-base-option { display: grid; place-items: center; min-width: 0; min-height: 96px; padding: 5px; border: 2px solid #dbe5d8; border-radius: 10px; background: #f4f7ef; color: #284a34; cursor: pointer; }
.pet-base-option[aria-pressed="true"] { border-color: #e7824d; background: #fff0df; box-shadow: inset 0 0 0 2px #fff; }
.pet-base-option img { display: block; width: 100%; height: 55px; object-fit: contain; }
.pet-base-option span { display: -webkit-box; overflow: hidden; width: 100%; min-height: 2.4em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; font-size: 10px; font-weight: 900; text-align: center; overflow-wrap: anywhere; }
.pet-pattern-picker { min-width: 0; margin: 0; padding: 10px; border: 1px solid #d3ddcc; border-radius: 12px; }
.pet-pattern-picker legend { padding: 0 6px; color: #294b35; font-size: 13px; font-weight: 900; }
.pet-pattern-picker p { margin: 0 0 10px; color: #6c816e; font-size: 11px; line-height: 1.5; }
.pet-pattern-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pet-pattern-option { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 55px; padding: 6px; border: 2px solid #dbe5d8; border-radius: 10px; background: #f4f7ef; color: #284a34; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
.pet-pattern-option[aria-pressed="true"] { border-color: #e7824d; background: #fff0df; box-shadow: inset 0 0 0 2px #fff; }
.pet-pattern-swatch { flex: none; width: 34px; height: 34px; border: 1px solid #c7cfc0; border-radius: 50%; background-color: #fffdf4; }
.pet-pattern-stripes { background: repeating-linear-gradient(115deg, #fffdf4 0 7px, #555 7px 12px, #fffdf4 12px 19px); }
.pet-pattern-plain { background: #fffdf4; }
.pet-pattern-dots { background: radial-gradient(circle, #555 30%, transparent 34%) 0 0 / 16px 16px, #fffdf4; }
.pet-pattern-giraffe { background: radial-gradient(ellipse at 25% 30%, #ae7135 0 33%, transparent 37%) 0 0 / 21px 20px, radial-gradient(ellipse at 70% 70%, #ae7135 0 32%, transparent 36%) 0 0 / 19px 21px, #f4dfad; }
.pet-pattern-cow { background: radial-gradient(ellipse at 38% 31%, #3d3d3b 0 40%, transparent 43%) 0 0 / 35px 30px, #fffdf4; }
.pet-pattern-leopard { background: radial-gradient(circle, #cc914c 0 24%, #553727 28% 41%, transparent 44%) 0 0 / 18px 18px, #f5cc7d; }
.pet-accessory-picker { min-width: 0; margin: 0; padding: 10px; border: 1px solid #d3ddcc; border-radius: 12px; }
.pet-accessory-picker legend { padding: 0 6px; color: #294b35; font-size: 13px; font-weight: 900; }
.pet-accessory-picker p { margin: 0 0 10px; color: #6c816e; font-size: 11px; line-height: 1.5; }
.pet-form .primary-button { margin-top: 5px; }
.pet-shop > p { margin: 0 0 12px; color: #5b715e; font-size: 12px; line-height: 1.6; }
.pet-shop-balance { margin-bottom: 12px; padding: 10px 12px; border-radius: 9px; background: #edf2e3; font-size: 13px; font-weight: 900; }
.pet-shop-filter-label { display: grid; gap: 5px; margin-bottom: 12px; color: #496956; font-size: 12px; font-weight: 900; }
.pet-shop-filter-label select { width: 100%; min-height: 42px; padding: 7px 10px; border: 1px solid #cbd8c6; border-radius: 9px; background: #fff; color: #193b2b; font: inherit; font-size: 14px; }
.pet-shop-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pet-shop-item { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px; min-height: 91px; padding: 11px; border: 1px solid #d8e1d0; border-radius: 11px; background: #fff; }
.pet-shop-item strong, .pet-shop-item small { display: block; }
.pet-shop-item strong { font-size: 13px; }
.pet-shop-item small { margin-top: 4px; color: #748776; font-size: 11px; }
.pet-shop-actions { display: flex; gap: 6px; justify-content: flex-end; }
.pet-shop-item button { min-width: 68px; min-height: 36px; padding: 6px 9px; border: 0; border-radius: 8px; background: #e4e83f; color: #173829; font-size: 12px; font-weight: 900; cursor: pointer; }
.pet-shop-item button.pet-try-button { border: 1px solid #c7d5c4; background: #fff; }
.pet-shop-item button:disabled { background: #edf1e9; color: #718475; cursor: default; }
@media (max-width: 650px) {
  .mission-panel { padding: 16px 12px; }
  .mission-heading h2 { font-size: 17px; }
  .mission-heading > strong { font-size: 14px; }
  .mission-rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mission-reward { padding: 9px; }
  .mission-list { grid-template-columns: 1fr; }
  .home-pet { min-height: 257px; border-radius: 17px; }
  .home-pet-heading { top: 10px; right: 11px; }
  .home-pet-heading strong { font-size: 18px; }
  .pet-tap { height: 220px; }
  .home-pet p { padding: 4px 9px 8px; font-size: 11px; }
  #homeDashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
  #homeDashboard > section { min-height: 137px; padding: 13px 11px; border-radius: 13px; }
  #homeDashboard .eyebrow { font-size: 9px; }
  #homeDashboard h2 { font-size: 16px; }
  #homeDashboard .wallet-amount strong { font-size: clamp(21px, 6vw, 30px); }
  #homeDashboard .wallet-card p { font-size: 9px; line-height: 1.3; }
  #homeDashboard .daily-card p, #homeDashboard .home-tile p { font-size: 10px; line-height: 1.3; }
  #homeDashboard .daily-card button, #homeDashboard .home-tile button { width: 100%; min-height: 39px; padding: 7px 4px; font-size: 11px; }
  .home-record { margin-top: 9px; padding: 13px; }
  .pet-dialog { padding: 13px; }
  .pet-dialog-preview { height: 185px; }
  .pet-base-grid { gap: 5px; }
  .pet-base-option { min-height: 86px; padding: 3px; }
  .pet-base-option img { height: 48px; }
  .pet-base-option span { font-size: 9px; }
  .pet-pattern-option { gap: 5px; font-size: 10px; }
  .pet-pattern-swatch { width: 28px; height: 28px; }
  .pet-shop-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pet-room-roamer, .pet-room-bob, .pet-room-ball, .pet-tap.is-playing .pet-room-roamer, .pet-tap.is-playing .pet-room-ball, .pet-tap.is-playing .pet-room-sparkles { animation: none; } }