#maruDog {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1100;
  width: 104px;
  height: 113px;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  background: transparent;
  transition: opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
}
#maruDog.ready { opacity: 1; pointer-events: auto; }
#maruDog:focus-visible { outline: 2px solid #e8b86b; outline-offset: 2px; border-radius: 12px; }
#maruDog canvas { display: block; width: 104px; height: 113px; pointer-events: none; filter: drop-shadow(0 4px 5px rgba(0,0,0,.4)); }
.maru-noticed {
  outline: 3px solid #ffd27a;
  outline-offset: 3px;
  filter: brightness(1.08) drop-shadow(0 0 11px rgba(255, 190, 78, .9));
}
.polaroid.maru-noticed { transform: rotate(0deg) translateY(-7px) scale(1.025); }
.maru-bubble {
  position: absolute;
  bottom: 108px;
  width: max-content;
  max-width: min(260px, calc(100vw - 16px));
  padding: 8px 11px;
  border: 1px solid #d9c7ab;
  border-radius: 12px;
  background: #fff9ef;
  color: #43382b;
  box-shadow: 0 5px 16px rgba(0,0,0,.24);
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events: none;
}
.maru-bubble.show { opacity: 1; visibility: visible; transform: translateY(0); }
.maru-bubble.interactive { pointer-events: auto; min-width: 205px; padding: 10px; }
.maru-message { text-align: center; }
.maru-search-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; }
.maru-search-header .maru-message { padding-left: 22px; }
.maru-close {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #7a6955;
  font: 700 19px/20px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
}
.maru-close:hover, .maru-close:focus-visible { background: #f1dfc3; color: #43382b; outline: none; }
.maru-search-form { display: flex; gap: 6px; margin-top: 8px; }
.maru-search-form input {
  width: 190px;
  min-width: 0;
  border: 1px solid #d9c7ab;
  border-radius: 8px;
  padding: 7px 8px;
  background: #fff;
  color: #43382b;
  font: 12px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  outline: none;
}
.maru-search-form input:focus { border-color: #bc8a3e; }
.maru-search-form button {
  border: 1px solid #d9b978;
  border-radius: 8px;
  padding: 7px 9px;
  background: #ffe8b7;
  color: #59452d;
  font: 700 11px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
}
.maru-actions { display: flex; gap: 6px; margin-top: 8px; }
.maru-actions button {
  flex: 1;
  border: 1px solid #d9b978;
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  color: #59452d;
  font: 600 11px/1.25 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.maru-actions button:hover { background: #ffe8b7; }
.maru-paw {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  width: 42px;
  height: 42px;
  padding: 5px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 248, 225, .9);
  color: #e5a747;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
  cursor: pointer;
  animation: misePawIn .3s ease-out, misePawWiggle .8s .3s ease-in-out;
}
.maru-paw svg { display: block; width: 100%; height: 100%; }
.maru-photo-tapped {
  transform-origin: var(--maru-tap-x, 50%) var(--maru-tap-y, 50%);
  animation: maruPhotoTap .72s cubic-bezier(.2,.75,.25,1);
}
.maru-tap-ripple {
  position: absolute;
  z-index: 9;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 3px solid rgba(255, 221, 145, .95);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 190, 71, .8);
  pointer-events: none;
  animation: maruTapRipple .7s ease-out forwards;
}
@keyframes maruPhotoTap {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  34% { transform: scale(1.035); filter: brightness(1.14) saturate(1.08); }
  68% { transform: scale(1.012); filter: brightness(1.05); }
}
@keyframes maruTapRipple {
  0% { opacity: 1; transform: scale(.25); }
  100% { opacity: 0; transform: scale(3.2); }
}
@keyframes misePawIn { from { opacity: 0; transform: scale(.25) rotate(-25deg); } to { opacity: 1; transform: scale(1) rotate(-10deg); } }
@keyframes misePawWiggle { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg) scale(1.08); } }
.maru-bubble.below { top: calc(100% + 4px); bottom: auto; }
.maru-bubble::after {
  content: '';
  position: absolute;
  left: var(--tail-x, 50%);
  bottom: -8px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff9ef;
}
.maru-bubble.below::after {
  top: -8px;
  bottom: auto;
  border-top: 0;
  border-bottom: 8px solid #fff9ef;
}
@media (max-width: 600px) {
  #maruDog { width: 86px; height: 94px; }
  #maruDog canvas { width: 86px; height: 94px; }
  .maru-bubble { bottom: 91px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #maruDog, .maru-bubble { transition: none; }
  .maru-paw, .maru-photo-tapped, .maru-tap-ripple { animation: none; }
}