/* Dotykowy podgląd awatara nie zmienia odnośnika prowadzącego na stronę główną. */
.brand-wrap { position: relative; display: inline-flex; }
.avatar-touch-preview { display: none; }

/* Łapki pokazujemy w widoku telefonu z ekranem dotykowym. */
@media (any-pointer: coarse) and (max-width: 960px) {
.cat-clock::after,
.horoscope-toggle:not(.horoscope-shortcut)::after,
.horoscope-picker-wrap::after,
.weather-widget::after,
.sticker--paws::after,
.guestbook-reactions-toggle::after,
.avatar-touch-preview summary::after,
body:not(.is-halloween) .sticker--heart::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: -6px;
  right: 4px;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(45, 108, 98, .22);
  border-radius: 50%;
  background: #fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232d6c62'%3E%3Cellipse cx='4.5' cy='9' rx='2.4' ry='3.1' transform='rotate(-25 4.5 9)'/%3E%3Cellipse cx='9' cy='5.3' rx='2.4' ry='3.1' transform='rotate(-8 9 5.3)'/%3E%3Cellipse cx='15' cy='5.3' rx='2.4' ry='3.1' transform='rotate(8 15 5.3)'/%3E%3Cellipse cx='19.5' cy='9' rx='2.4' ry='3.1' transform='rotate(25 19.5 9)'/%3E%3Cpath d='M12 10.1c-2.7 0-3.8 2.5-6.1 4.8-2.3 2.4-.4 5.8 2.5 5.5 1.2-.1 2.3-.7 3.6-.7s2.4.6 3.6.7c2.9.3 4.8-3.1 2.5-5.5-2.3-2.3-3.4-4.8-6.1-4.8z'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
  box-shadow: 0 2px 5px rgba(24, 40, 43, .14);
  pointer-events: none;
}

.sticker--paws::after,
body:not(.is-halloween) .sticker--heart::after { top: 7px; right: 7px; }

.guestbook-reactions-toggle::after { top: -7px; right: -8px; }
.horoscope-toggle:not(.horoscope-shortcut)::after { top: -6px; right: -7px; }
.horoscope-picker-wrap { width: min(170px, calc(100% - 20px)); }
.horoscope-picker-wrap::after { top: 50%; right: -20px; transform: translateY(-50%); }

.avatar-touch-preview {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
}
.avatar-touch-preview summary {
  position: relative;
  width: 44px;
  height: 44px;
  list-style: none;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.avatar-touch-preview summary::-webkit-details-marker { display: none; }
.avatar-touch-preview summary::marker { content: ''; }
.avatar-touch-preview summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.avatar-touch-preview summary::after { top: -2px; right: 0; }
.avatar-touch-preview .brand-preview { display: block; left: 0; }
.avatar-touch-preview[open] .brand-preview { opacity: 1; transform: translateY(0) rotate(-2deg); visibility: visible; }

body.is-halloween .cat-clock::after,
body.is-halloween .horoscope-toggle:not(.horoscope-shortcut)::after,
body.is-halloween .horoscope-picker-wrap::after,
body.is-halloween .weather-widget::after,
body.is-halloween .guestbook-reactions-toggle::after,
body.is-halloween .avatar-touch-preview summary::after,
body.is-halloween .sticker--paws::after {
  border-color: rgba(255, 180, 94, .55);
  background-color: #ffedcf;
}
}

/* Na ekranie dotykowym zdjęcie awatara jest wyłączone, a pozostałe
   podglądy można pokazać przez dotknięcie elementu. */
@media (any-pointer: coarse) {
  .cat-clock:focus .calendar-card {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) rotate(2deg);
  }
  .sticker--paws:focus .paws-preview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) rotate(-2deg);
  }
  .sticker--heart:focus .heart-preview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) rotate(-9deg) scale(1);
    animation: heart-preview-sway 2.15s ease-in-out infinite;
  }
}

@media (any-pointer: coarse) and (max-width: 620px) {
  .cat-clock:focus .calendar-card { transform: translateY(0) rotate(2deg); }
}