/* 介面的小動物裝飾 + 底部選單中間的按鈕（index.php / settlement.php / share.php 共用） */

/* 背景：淡淡的腳印、貓、魚、鳥、兔子花紋（顏色透明度寫在 SVG 裡） */
body { background-image: url('icons/bg-animals.svg'); background-size: 260px 260px; }
/* 首頁本身有漸層底色，花紋疊在漸層上面 */
#homeScreen { background-image: url('icons/bg-animals.svg'), linear-gradient(to bottom, #f0f9ff, #fff, #eef2ff); background-size: 260px 260px, auto; }

/* 底部選單的底：白到淡藍的漸層＋很淡的小腳印，上緣圓角、往上的柔和陰影、一條粉彩細線 */
.bottom-nav, .home-nav {
  background: url('icons/nav-paws.svg') 0 0 / 120px 64px repeat, linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(240, 249, 255, 0.97) 100%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -1px 0 rgba(148, 163, 184, 0.18), 0 -8px 24px -10px rgba(2, 132, 199, 0.28);
}
.bottom-nav::after, .home-nav::after { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #7dd3fc, #c4b5fd, #f9a8d4, #fcd34d); opacity: 0.55; pointer-events: none; z-index: 0; }
/* 按鈕疊在那條線上面（中間的首頁圓鈕會凸出選單上緣，不能被線蓋住） */
.bottom-nav .nav-btn, .home-nav .nav-btn { position: relative; z-index: 1; }
/* 目前所在的按鈕：圖示底下一小顆淡藍圓底 */
.bottom-nav .nav-btn.is-on > i, .home-nav .nav-btn.is-on > i { background: #e0f2fe; border-radius: 9999px; padding: 4px 12px; margin: -4px 0; }

/* 底部選單中間的按鈕：淺藍小圓底，只比旁邊的按鈕略突出，不再是整顆大房子 */
.nav-home-pill { position: relative; width: 2.6rem; height: 2.6rem; margin-top: -0.6rem; border-radius: 9999px;
  background: #e0f2fe; color: #0284c7; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px #fff, 0 3px 8px rgba(2, 132, 199, 0.16); }
.nav-home-pill i { font-size: 1.05rem; }
.nav-btn.is-on .nav-home-pill { background: #0ea5e9; color: #fff; }

/* 趴在底部選單上緣的小動物（nav_pets.js 隨機 1～2 隻，跟著點的按鈕走；不擋點擊） */
.nav-pets { position: absolute; left: 30%; bottom: calc(100% - 5px + var(--lift, 0px)); transform: translateX(-50%);
  display: flex; align-items: flex-end; pointer-events: none; z-index: 1;
  transition: left .6s cubic-bezier(.45, .05, .35, 1), bottom .3s ease; }
.nav-pets.no-anim { transition: none; }
.nav-pet { display: block; width: 40px; height: 24px; transform-origin: 50% 100%; }
.nav-pet.is-second { width: 34px; height: 21px; margin-left: -7px; }
/* 走路：一路小跳步、往前進的方向歪；第二隻慢半拍跟著 */
.nav-pets.is-walking .nav-pet { animation: petHop .3s ease-in-out 2; }
.nav-pets.is-walking .nav-pet.is-second { animation-delay: .08s; }
@keyframes petHop {
  0%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-7px) rotate(calc(var(--dir, 1) * 9deg)); }
  70% { transform: translateY(-2px) rotate(calc(var(--dir, 1) * 4deg)); }
}
/* 偶爾歪頭 */
.nav-pet.is-tilt { animation: petTilt 1.1s ease-in-out; }
@keyframes petTilt { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 55% { transform: rotate(9deg); } 80% { transform: rotate(-3deg); } }

/* 標題旁的小腳印 */
.paw-mark::after { content: ''; display: inline-block; width: 0.95em; height: 0.95em; margin-left: 0.35em; vertical-align: -0.05em;
  background: #fdba74; opacity: 0.8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cellipse cx='0' cy='5' rx='6.5' ry='5.5'/%3E%3Ccircle cx='-7.5' cy='-4' r='2.8'/%3E%3Ccircle cx='-2.6' cy='-8.5' r='2.8'/%3E%3Ccircle cx='2.6' cy='-8.5' r='2.8'/%3E%3Ccircle cx='7.5' cy='-4' r='2.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cellipse cx='0' cy='5' rx='6.5' ry='5.5'/%3E%3Ccircle cx='-7.5' cy='-4' r='2.8'/%3E%3Ccircle cx='-2.6' cy='-8.5' r='2.8'/%3E%3Ccircle cx='2.6' cy='-8.5' r='2.8'/%3E%3Ccircle cx='7.5' cy='-4' r='2.8'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(18deg); }

@media print { body { background-image: none; } .nav-pets, [data-home-panel]::after, #placeListContainer::after, #pendingListContainer::after { display: none; } }

/* 首頁各分頁、行程的景點清單、待定名單最下面放一隻睡覺的貓 */
[data-home-panel]:not(.hidden)::after, #placeListContainer:not(:empty)::after, #pendingListContainer:not(:empty)::after {
  content: ''; display: block; width: 96px; height: 45px; margin: 1.5rem auto 0.5rem;
  background: url('icons/sleep-cat.svg') center / contain no-repeat; opacity: 0.9; }