/* Wiki Shared Heart v3
 * All class names are new. Old v1/v2 CSS selectors cannot match this markup.
 * Important: The FRAME has a fixed size. Neither the caption nor the heart can
 * participate in normal layout / expand the border. Modify only its absolute
 * top position, via shortcode label_y, without affecting frame geometry.
 */
.wshc-v3-wrap {
  position: relative !important;
  display: block !important;
  width: 75px !important;
  max-width: 100% !important;
  margin: 12px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.wshc-v3-wrap .wshc-v3-button {
  all: unset !important;
  display: block !important;
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 75px !important;
  min-width: 75px !important;
  max-width: 75px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid #fff !important;
  border-radius: 9px !important;
  background: #000 !important;
  color: #fff !important;
  overflow: hidden !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font-family: system-ui, -apple-system, 'Noto Sans SC', 'Noto Sans JP', sans-serif !important;
  text-align: center !important;
}
/* Fixed absolute rows: font, margin and translation cannot resize outer border. */
.wshc-v3-wrap .wshc-v3-top {
  all: unset !important;
  position: absolute !important;
  display: flex !important;
  left: 3px !important;
  right: 3px !important;
  top: 6px !important;
  height: 21px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  line-height: 1 !important;
}
.wshc-v3-wrap .wshc-v3-heart {
  display: block !important;
  box-sizing: border-box !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 21px !important;
  min-height: 21px !important;
  max-height: 21px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  transform-origin: center center;
  transition: transform .13s ease;
}
.wshc-v3-wrap .wshc-v3-number {
  all: unset !important;
  position: static !important;
  display: block !important;
  box-sizing: border-box !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 21px !important;
  height: 21px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}
/* Caption is fully independent of the icon and border size. */
.wshc-v3-wrap .wshc-v3-caption {
  all: unset !important;
  display: block !important;
  position: absolute !important;
  box-sizing: border-box !important;
  top: var(--wshc-v3-label-y, 28px) !important;
  left: 2px !important;
  right: 2px !important;
  width: auto !important;
  height: 11px !important;
  min-height: 11px !important;
  max-height: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: system-ui, -apple-system, 'Noto Sans SC', 'Noto Sans JP', sans-serif !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  line-height: 11px !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}
/* Alternative sizes - remain fixed even for longer caption text. */
.wshc-v3-wrap.wshc-v3-wrap--small { width: 110px !important; }
.wshc-v3-wrap.wshc-v3-wrap--medium { width: 145px !important; }
.wshc-v3-wrap .wshc-v3-button--small {
  width: 110px !important; min-width: 110px !important; max-width: 110px !important;
  height: 70px !important; min-height: 70px !important; max-height: 70px !important;
  border-radius: 13px !important;
}
.wshc-v3-wrap .wshc-v3-button--small .wshc-v3-top { top: 8px !important; height: 30px !important; gap: 7px !important; }
.wshc-v3-wrap .wshc-v3-button--small .wshc-v3-heart { width: 31px !important; min-width: 31px !important; max-width: 31px !important; height: 29px !important; min-height: 29px !important; max-height: 29px !important; flex-basis: 31px !important; }
.wshc-v3-wrap .wshc-v3-button--small .wshc-v3-number { font-size: 25px !important; height: 30px !important; line-height: 30px !important; }
.wshc-v3-wrap .wshc-v3-button--small .wshc-v3-caption { font-size: 10px !important; height: 14px !important; min-height: 14px !important; max-height: 14px !important; line-height: 14px !important; }
.wshc-v3-wrap .wshc-v3-button--medium {
  width: 145px !important; min-width: 145px !important; max-width: 145px !important;
  height: 90px !important; min-height: 90px !important; max-height: 90px !important;
  border-radius: 16px !important;
}
.wshc-v3-wrap .wshc-v3-button--medium .wshc-v3-top { top: 12px !important; height: 39px !important; gap: 10px !important; }
.wshc-v3-wrap .wshc-v3-button--medium .wshc-v3-heart { width: 39px !important; min-width: 39px !important; max-width: 39px !important; height: 37px !important; min-height: 37px !important; max-height: 37px !important; flex-basis: 39px !important; }
.wshc-v3-wrap .wshc-v3-button--medium .wshc-v3-number { font-size: 32px !important; height: 39px !important; line-height: 39px !important; }
.wshc-v3-wrap .wshc-v3-button--medium .wshc-v3-caption { font-size: 12px !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; line-height: 18px !important; }
.wshc-v3-wrap .wshc-v3-button[data-digits='4'] .wshc-v3-number,
.wshc-v3-wrap .wshc-v3-button[data-digits='5'] .wshc-v3-number { font-size: 13px !important; }
.wshc-v3-wrap .wshc-v3-button[data-digits='6'] .wshc-v3-number,
.wshc-v3-wrap .wshc-v3-button[data-digits='7'] .wshc-v3-number { font-size: 10px !important; }
.wshc-v3-wrap .wshc-v3-button[data-digits='8'] .wshc-v3-number,
.wshc-v3-wrap .wshc-v3-button[data-digits='9'] .wshc-v3-number { font-size: 8px !important; }
.wshc-v3-wrap .wshc-v3-button[data-digits='10'] .wshc-v3-number,
.wshc-v3-wrap .wshc-v3-button[data-digits='11'] .wshc-v3-number { font-size: 6px !important; }
.wshc-v3-wrap .wshc-v3-button:hover .wshc-v3-heart { transform: scale(1.06); }
.wshc-v3-wrap .wshc-v3-button:active .wshc-v3-heart,
.wshc-v3-wrap .wshc-v3-button.is-pop .wshc-v3-heart { transform: scale(.88); }
.wshc-v3-wrap .wshc-v3-button:focus-visible { outline: 2px solid #8ec9ff !important; outline-offset: 3px !important; }
.wshc-v3-wrap .wshc-v3-status {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important;
  border: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .wshc-v3-wrap .wshc-v3-heart { transition: none; }
}